:root {
    --bg-main: #0f172a;
    --accent-primary: #2563eb;
    --accent-secondary: #d97706;
    --surface: #1e293b;
    --surface-soft: #172338;
    --border: color-mix(in srgb, var(--text-main) 16%, transparent);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --danger: #ef4444;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    --md-sys-color-primary: var(--accent-primary);
    --md-sys-color-on-primary: #062017;
    --md-sys-color-primary-container: color-mix(in srgb, var(--accent-primary) 24%, var(--surface));
    --md-sys-color-on-primary-container: var(--text-main);
    --md-sys-color-secondary: var(--accent-secondary);
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: color-mix(in srgb, var(--accent-secondary) 22%, var(--surface));
    --md-sys-color-on-secondary-container: var(--text-main);
    --md-sys-color-tertiary: color-mix(in srgb, var(--accent-primary) 52%, var(--accent-secondary));
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: color-mix(in srgb, var(--md-sys-color-tertiary) 24%, var(--surface));
    --md-sys-color-on-tertiary-container: var(--text-main);
    --md-sys-color-surface: var(--surface);
    --md-sys-color-on-surface: var(--text-main);
    --md-sys-color-on-surface-variant: var(--text-muted);
    --md-sys-color-surface-dim: color-mix(in srgb, var(--bg-main) 88%, #000000);
    --md-sys-color-surface-bright: color-mix(in srgb, var(--surface) 78%, #ffffff 22%);
    --md-sys-color-surface-container-lowest: color-mix(in srgb, var(--bg-main) 88%, #000000);
    --md-sys-color-surface-container-low: color-mix(in srgb, var(--surface) 74%, var(--bg-main));
    --md-sys-color-surface-container: var(--surface);
    --md-sys-color-surface-container-high: color-mix(in srgb, var(--surface) 88%, #ffffff 12%);
    --md-sys-color-surface-container-highest: color-mix(in srgb, var(--surface) 78%, #ffffff 22%);
    --md-sys-color-outline: var(--border);
    --md-sys-color-outline-variant: color-mix(in srgb, var(--text-main) 9%, transparent);
    --md-sys-color-error: var(--danger);
    --md-sys-color-on-error: #ffffff;
    --md-sys-shape-corner-extra-small: 8px;
    --md-sys-shape-corner-small: 12px;
    --md-sys-shape-corner-medium: 18px;
    --md-sys-shape-corner-large: 28px;
    --md-sys-shape-corner-extra-large: 48px;
    --md-sys-shape-corner-full: 999px;
    --md-ref-typeface-brand: Inter, system-ui, sans-serif;
    --md-ref-typeface-plain: Inter, system-ui, sans-serif;
    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-display-large-size: 3.5625rem;
    --md-sys-typescale-display-large-line-height: 4rem;
    --md-sys-typescale-display-large-weight: 900;
    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large-size: 2rem;
    --md-sys-typescale-headline-large-line-height: 2.5rem;
    --md-sys-typescale-headline-large-weight: 800;
    --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-title-large-size: 1.375rem;
    --md-sys-typescale-title-large-line-height: 1.75rem;
    --md-sys-typescale-title-large-weight: 800;
    --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-body-large-size: 1rem;
    --md-sys-typescale-body-large-line-height: 1.5rem;
    --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
    --md-sys-typescale-label-large-size: .875rem;
    --md-sys-typescale-label-large-line-height: 1.25rem;
    --md-sys-typescale-label-large-weight: 800;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --shape-small: var(--md-sys-shape-corner-small);
    --shape-medium: var(--md-sys-shape-corner-medium);
    --shape-large: var(--md-sys-shape-corner-large);
    --shape-extra-large: var(--md-sys-shape-corner-extra-large);
    --motion-standard: cubic-bezier(.2, 0, 0, 1);
    --motion-emphasized: cubic-bezier(.2, 0, 0, 1.18);
    --duration-short: 160ms;
    --duration-medium: 280ms;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 42%, transparent);
    --touch-target: 44px;
    --lyrics-size: clamp(1.02rem, .95rem + .35vw, 1.25rem);
}

body.light-mode {
    --bg-main: #f1f5f9;
    --surface: #ffffff;
    --surface-soft: #e2e8f0;
    --border: rgba(15, 23, 42, 0.1);
    --text-main: #0f172a;
    --text-muted: #475569;
    --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

* { box-sizing: border-box; }

[v-cloak] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--text-main);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

a { color: inherit; }

button,
a[href],
md-filled-button,
md-filled-tonal-button,
md-outlined-button,
md-text-button,
md-icon-button,
md-filled-select {
    cursor: pointer;
}

button:active,
a[href]:active,
md-filled-button:active,
md-filled-tonal-button:active,
md-outlined-button:active,
md-text-button:active,
md-icon-button:active {
    transform: scale(.98);
}

.wrap {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
}

.public-page .wrap { width: auto; }

.songbook-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px 24px 48px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-5);
}

.songbook-hero {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--card-shadow);
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.hero-logo {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 auto;
    border-radius: var(--shape-large);
}

.hero-copy { min-width: 0; }

.hero-kicker {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--accent-primary);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.songbook-hero h1 {
    margin: 0;
    color: var(--accent-primary);
    font-size: clamp(2.25rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

.songbook-hero p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: .96rem;
    font-weight: 600;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.hero-meta span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: .8rem;
    font-weight: 800;
}

.hero-side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    max-width: 530px;
}

.hero-jam-button {
    --md-filled-button-container-height: 46px;
    --md-filled-button-container-shape: var(--shape-medium);
    --md-filled-button-label-text-weight: 900;
}

.hero-admin-button {
    --md-outlined-button-container-height: 46px;
    --md-outlined-button-container-shape: var(--shape-medium);
    --md-outlined-button-label-text-weight: 800;
}

.village-switch-button,
.mobile-village-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 17px;
    border: 1px solid var(--border);
    border-radius: var(--shape-medium);
    background: color-mix(in srgb, var(--surface) 80%, var(--accent-primary) 10%);
    color: var(--text-main);
    font: 900 .82rem Inter, sans-serif;
    cursor: pointer;
}

.mobile-village-button {
    width: 34px;
    padding: 0;
    flex: 0 0 auto;
}

.village-switch-button:hover,
.mobile-village-button:hover {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

.songbook-hero img,
.hero-side img {
    width: 64px;
    height: auto;
}

.hero-village-mark {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-left: var(--space-2);
    border-radius: var(--shape-medium);
    background: var(--md-sys-color-surface-container-high);
}

.hero-village-mark img { transform: none; }

.mobile-brand {
    display: none;
}

.mobile-admin-link {
    display: none;
}

.village-picker-panel {
    grid-column: 1 / -1;
    width: min(920px, 100%);
    margin: 36px auto 18px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.village-picker-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.village-picker-head h2 {
    margin: 0;
    color: var(--accent-primary);
    font-size: 1.55rem;
}

.village-picker-head p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

.village-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.village-choice-grid button {
    position: relative;
    min-height: 152px;
    padding: var(--space-5);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--text-main);
    text-align: center;
    cursor: pointer;
    transition: border-radius var(--duration-medium) var(--motion-emphasized), background var(--duration-short) var(--motion-standard), border-color var(--duration-short) var(--motion-standard);
}

.village-choice-grid button.active,
.village-choice-grid button:hover {
    border-color: var(--accent-primary);
    background: var(--md-sys-color-primary-container);
}

.village-choice-grid button.active { border-radius: var(--shape-extra-large); }

.village-choice-grid button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
    outline-offset: 3px;
}

.village-choice-grid img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin-bottom: 10px;
}

.village-choice-grid strong,
.village-choice-grid span {
    display: block;
}

.village-selected-mark {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    display: grid !important;
    place-items: center;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary) !important;
    font-size: .9rem !important;
}

.material-close-button {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
    --md-icon-button-icon-color: var(--md-sys-color-on-surface);
    --md-icon-button-hover-icon-color: var(--md-sys-color-primary);
}

.village-choice-grid strong {
    font-size: 1rem;
    font-weight: 900;
}

.village-choice-grid span {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 800;
}

.songbook-toolbar {
    grid-column: 1 / -1;
    position: sticky;
    top: 10px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: stretch;
    padding: 8px;
    border: 0;
    border-radius: var(--shape-large);
    background: color-mix(in srgb, var(--md-sys-color-surface-container) 92%, transparent);
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.toolbar-leading {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: var(--shape-medium);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 1.6rem;
    font-weight: 900;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.material-search-field {
    width: 100%;
    min-width: 0;
    --md-outlined-text-field-container-shape: 20px;
    --md-outlined-text-field-container-height: 56px;
    --md-outlined-text-field-input-text-font: var(--md-ref-typeface-plain);
    --md-outlined-text-field-label-text-font: var(--md-ref-typeface-plain);
    --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
    --md-outlined-text-field-hover-outline-color: var(--md-sys-color-primary);
    --md-outlined-text-field-outline-color: var(--md-sys-color-outline);
}

.controls-panel {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mobile-filter-heading { display: none; }

.toolbar-tool {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-medium);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: background var(--duration-short) var(--motion-standard), border-color var(--duration-short) var(--motion-standard), transform var(--duration-short) var(--motion-standard);
}

.toolbar-tool:hover {
    border-color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-high);
}

.toolbar-tool:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
    outline-offset: 2px;
}

.toolbar-tool-label { display: none; }
.toolbar-tool-icon { font-size: 1.2rem; line-height: 1; }
.filters-scrim { display: none; }
body.filters-open { overflow: hidden; }

.material-category-select {
    width: 220px;
    min-width: 190px;
    --md-filled-select-text-field-container-height: 54px;
    --md-filled-select-text-field-container-shape: 20px;
    --md-filled-select-text-field-container-color: var(--md-sys-color-surface-container-high);
    --md-filled-select-text-field-focus-active-indicator-color: var(--md-sys-color-primary);
}

.material-search-button {
    height: 54px;
    --md-filled-button-container-height: 54px;
    --md-filled-button-container-shape: 22px;
    --md-filled-button-label-text-font: var(--md-ref-typeface-brand);
    --md-filled-button-label-text-weight: 800;
}

.results-summary {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: calc(var(--space-2) * -1);
    color: var(--md-sys-color-on-surface-variant);
    font-size: .82rem;
}

.results-summary strong,
.results-summary span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: var(--shape-small);
    background: var(--md-sys-color-surface-container-high);
    font-weight: 800;
}

.results-summary strong {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.material-toolbar-button {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 20px;
    background: var(--md-sys-color-surface);
    font-size: 1.25rem;
    --md-icon-button-icon-color: var(--md-sys-color-on-surface);
    --md-icon-button-hover-icon-color: var(--md-sys-color-primary);
    --md-icon-button-pressed-icon-color: var(--md-sys-color-primary);
    --md-icon-button-state-layer-shape: 20px;
}

.dashboard-input,
.dashboard-select {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: var(--surface);
    color: var(--text-main);
    font: 700 1rem Inter, sans-serif;
}

.dashboard-input:focus,
.dashboard-select:focus {
    border-color: var(--accent-primary);
}

.dashboard-select { min-width: 220px; }

select,
.dashboard-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 15px) 50%;
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none;
}

.btn-primary,
.btn-secondary,
.btn-icon,
.song-actions button,
.song-actions a,
.nav a,
.nav button,
.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-main);
    font: 800 .94rem Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.admin-page .btn,
.admin-page .nav a,
.admin-page .nav button,
.admin-page button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--text-main) 22%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 90%, #ffffff 4%);
    box-shadow: none;
    font-size: .9rem;
}

.admin-page .btn:hover,
.admin-page .nav a:hover,
.admin-page .nav button:hover,
.admin-page button:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--surface) 84%, var(--accent-primary));
}

.admin-page .btn:focus-visible,
.admin-page .nav a:focus-visible,
.admin-page .nav button:focus-visible,
.admin-page button:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible,
.admin-page textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
    outline-offset: 2px;
}

.btn-primary {
    height: 54px;
    padding: 0 28px;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    text-transform: uppercase;
}

.btn-primary.blue { background: var(--accent-secondary); }

.btn-secondary {
    padding: 0 16px;
    background: rgba(255, 255, 255, .06);
}

.btn-icon {
    width: 54px;
    height: 54px;
    padding: 0;
    font-size: 1.25rem;
}

.btn-icon:hover,
.btn-primary:hover,
.song-actions button:hover,
.song-actions a:hover {
    border-color: var(--accent-primary);
}

.mobile-menu-btn { display: none; }

.songbook-layout {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-6);
}

.song-sidebar {
    height: calc(100vh - 150px);
    position: sticky;
    top: 104px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    font-weight: 900;
    text-transform: uppercase;
}

.song-sidebar nav {
    flex: 1;
    overflow: auto;
    padding: 10px;
}

.song-sidebar a {
    display: block;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--shape-small);
    color: var(--text-muted);
    font-size: .9rem;
    text-decoration: none;
}

.song-sidebar a:hover {
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-secondary-container);
    color: var(--text-main);
}

.song-sidebar a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
    outline-offset: 1px;
}

.song-results {
    display: grid;
    gap: 20px;
}

.result-summary,
.load-more-btn {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 84%, var(--accent-secondary));
    color: var(--text-muted);
    font-weight: 800;
}

.load-more-btn {
    color: var(--text-main);
    cursor: pointer;
}

.load-sentinel {
    height: 1px;
}

.public-song-card {
    overflow: hidden;
    padding: 30px 32px;
    border: 0;
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
    transition: border-color var(--duration-short) var(--motion-standard), background var(--duration-short) var(--motion-standard);
}

md-select-option:not(:defined) { display: none; }

.public-song-card:hover {
    border-color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container);
}

.public-song-card.highlighted-song {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface));
}

.song-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.song-badges span,
.badge {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(16, 185, 129, .12);
    color: var(--accent-primary);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.song-badges md-assist-chip {
    --md-assist-chip-container-height: 30px;
    --md-assist-chip-container-shape: var(--shape-small);
    --md-assist-chip-container-color: var(--md-sys-color-primary-container);
    --md-assist-chip-label-text-font: var(--md-ref-typeface-plain);
    --md-assist-chip-label-text-weight: 800;
    --md-assist-chip-outline-width: 0;
    --md-assist-chip-label-text-color: var(--md-sys-color-primary);
}

.song-badges md-assist-chip + md-assist-chip {
    --md-assist-chip-label-text-color: var(--md-sys-color-secondary);
    --md-assist-chip-container-color: var(--md-sys-color-secondary-container);
}

.song-badges span + span {
    background: rgba(59, 130, 246, .12);
    color: var(--accent-secondary);
}

.public-song-card h2 {
    margin: 0 0 16px;
    color: var(--accent-primary);
    font-size: clamp(1.28rem, 2.2vw, 1.62rem);
    line-height: 1.12;
    cursor: pointer;
}

.public-song-card pre {
    margin: 0 0 22px;
    white-space: pre-wrap;
    color: var(--text-main);
    font: 1.08rem/1.62 Lora, Georgia, serif;
}

.song-comment {
    margin: -6px 0 20px;
    color: var(--text-muted);
    font-style: italic;
}

.song-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

.song-actions md-outlined-button,
.song-actions md-text-button,
.song-actions md-filled-tonal-button {
    --md-outlined-button-container-shape: 16px;
    --md-text-button-container-shape: 16px;
    --md-filled-tonal-button-container-shape: 16px;
    --md-outlined-button-label-text-font: var(--md-ref-typeface-plain);
    --md-text-button-label-text-font: var(--md-ref-typeface-plain);
    --md-outlined-button-label-text-weight: 800;
    --md-text-button-label-text-weight: 800;
    --md-filled-tonal-button-label-text-weight: 800;
    --md-outlined-button-outline-color: var(--md-sys-color-outline);
    --md-outlined-button-label-text-color: var(--md-sys-color-primary);
}

.song-actions button,
.song-actions a {
    min-height: 42px;
    padding: 0 14px;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 54px 20px;
    border: 1px solid var(--border);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--text-muted);
    text-align: center;
    font-weight: 800;
}

.error-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    border-color: color-mix(in srgb, var(--md-sys-color-error) 55%, var(--border));
}

.error-state strong {
    color: var(--md-sys-color-error);
    font-size: 1.15rem;
}

.song-skeleton-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.song-skeleton {
    min-height: 250px;
    padding: var(--space-6);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.song-skeleton span,
.song-skeleton strong,
.song-skeleton p {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--md-sys-color-surface-container-high) 25%, var(--md-sys-color-surface-container-highest) 48%, var(--md-sys-color-surface-container-high) 72%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.25s var(--motion-standard) infinite;
}

.song-skeleton span { width: 82px; height: 28px; }
.song-skeleton strong { width: 62%; height: 28px; margin: var(--space-5) 0; }
.song-skeleton p { width: 92%; height: 14px; margin: var(--space-3) 0; }
.song-skeleton p:last-child { width: 70%; }

@keyframes skeleton-shimmer {
    to { background-position: -220% 0; }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .76);
}

.modal.open { display: flex; }

.modal-content {
    position: relative;
    width: min(880px, 100%);
    max-height: 84vh;
    overflow: auto;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
}

.print-controls {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 10px;
    margin: 18px 0 12px;
}

.print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.print-song-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    max-height: 42vh;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.print-option {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 800;
}

.print-option input {
    width: auto;
    min-height: 0;
}

.print-option small {
    display: block;
    color: var(--text-muted);
    font-weight: 600;
}

.selected-count {
    align-self: center;
    color: var(--accent-primary);
    font-weight: 900;
}

.quick-top-button {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    font: 900 1.4rem/1 Inter, sans-serif;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .2s ease, transform .2s ease;
}

.quick-top-button.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 11000;
    display: none;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--accent-secondary);
    color: #fff;
    font-weight: 900;
}

.toast.visible { display: block; }

.app-footer {
    grid-column: 1 / -1;
    clear: both;
    margin-top: var(--space-10);
    padding: var(--space-10) var(--space-5);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    font-size: .875rem;
}

.app-footer-note {
    margin: var(--space-1) 0 0;
    font-size: .75rem;
    opacity: .82;
}

.print-area { display: none; }

.ai-result {
    max-height: 40vh;
    overflow: auto;
    margin: 16px 0 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    white-space: pre-wrap;
    color: var(--text-main);
    font: .98rem/1.55 Lora, Georgia, serif;
}

.admin-top {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-main) 92%, transparent);
    backdrop-filter: blur(14px);
}

.admin-top-inner {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.brand {
    color: var(--accent-primary);
    font-weight: 900;
    text-decoration: none;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.nav form { margin: 0; }

.admin-main {
    padding: 24px 0 56px;
}

.admin-hero {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--card-shadow);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent-secondary);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stats-grid article {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 88%, var(--accent-primary));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}

.stats-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 800;
}

.stats-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: 2rem;
    line-height: 1;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.metric-row:last-child {
    border-bottom: 0;
}

.metric-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-row strong {
    color: var(--accent-primary);
}

.elevated-panel {
    border-radius: 18px;
    padding: 24px;
}

.admin-list-head {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-search {
    max-width: 340px;
    background: var(--surface-soft);
}

.admin-song-list {
    display: grid;
    gap: 10px;
}

.village-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.village-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}

.village-tabs a.active,
.village-tabs a:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--surface));
    color: var(--text-main);
}

.village-tabs span {
    color: var(--accent-primary);
}

.admin-song-row {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
}

.admin-song-row[hidden] {
    display: none !important;
}

.category-row {
    grid-template-columns: 58px 1fr auto;
}

.village-row {
    grid-template-columns: 62px 1fr auto;
}

.village-row-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.village-row-logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.song-number {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(16, 185, 129, .12);
    color: var(--accent-primary);
    font-weight: 900;
}

.song-row-main strong,
.identity-preview strong {
    display: block;
    color: var(--text-main);
    font-size: 1rem;
}

.song-row-main span,
.identity-preview span,
.field-help {
    display: block;
    color: var(--text-muted);
    font-size: .88rem;
}

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

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

.table-actions form {
    margin: 0;
}

.row-actions form {
    margin: 0;
}

.row-actions .btn {
    min-width: 84px;
    min-height: 34px;
    padding: 0 12px;
}

.admin-page button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.identity-preview {
    min-width: 220px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    text-align: center;
}

.identity-preview img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.login-panel {
    max-width: 460px;
    margin: 8vh auto 0;
}

.inline-edit {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.settings-subsection {
    display: grid;
    gap: 16px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.toggle-row {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.toggle-row input {
    width: auto;
    min-height: 0;
}

input[type="color"] {
    min-height: 52px;
    padding: 6px;
}

.color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.color-presets button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.color-presets span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 24%, transparent);
}

.panel,
.song-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

h1,
h2,
h3 {
    margin: 0 0 12px;
    line-height: 1.12;
}

h1 {
    color: var(--accent-primary);
    font-size: clamp(1.6rem, 4vw, 2.45rem);
}

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

.flash {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 185, 129, .28);
    border-radius: 12px;
    background: rgba(16, 185, 129, .13);
}

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-main);
    font: inherit;
}

textarea {
    min-height: 240px;
    resize: vertical;
    font-family: Lora, Georgia, serif;
}

label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 800;
}

.grid { display: grid; gap: 16px; }
.two { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, 1fr); }

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

.secondary-actions {
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.danger {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 46%, transparent);
    color: #fecaca;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--text-muted);
    font-size: .9rem;
}

@media print {
    @page { size: A4; margin: 8mm; }

    body {
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        line-height: 1.18 !important;
    }

    body.printing .songbook-shell {
        display: block !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.printing .songbook-shell > :not(.print-area) { display: none !important; }
    body.printing .print-area { display: block !important; }

    .print-document-title {
        margin: 0 0 2mm;
        color: #000 !important;
        text-align: center;
        font-size: 16pt;
    }

    .print-document-note {
        margin: 0 0 4mm;
        color: #444 !important;
        text-align: center;
        font-size: 7pt;
    }

    .print-songs-grid {
        column-count: 2;
        column-gap: 8mm;
    }

    .print-song {
        break-inside: avoid;
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin: 0 0 3.5mm;
        padding: 0 0 2mm;
        border-bottom: .15mm solid #d8d8d8;
    }

    .print-song h2 {
        margin: 0 0 1mm;
        color: #000 !important;
        font-size: 10pt;
    }

    .print-song-category {
        margin: 0 0 1.3mm;
        color: #555 !important;
        font-size: 6.5pt;
    }

    .print-song-text {
        margin: 0;
        white-space: pre-wrap;
        color: #000 !important;
        font: 7.3pt/1.18 Georgia, "Times New Roman", serif !important;
    }

    .print-song-comment {
        margin-top: 1.5mm;
        color: #444 !important;
        font-size: 6.5pt;
        font-style: italic;
    }

    .print-title-card {
        break-inside: avoid;
        page-break-inside: avoid;
        padding: 4mm 0;
        border-bottom: .35mm solid #000;
        text-align: center;
    }

    .print-title-card:first-child { border-top: .35mm solid #000; }

    .print-title-card h2 {
        margin: 0;
        color: #000 !important;
        font-size: 28pt;
        line-height: 1.08;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .print-title-card span {
        margin-right: 3mm;
        font-size: .72em;
        font-weight: 400;
    }
}

.jam-glow-button,
.mobile-jam-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border));
    border-radius: 999px;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.mobile-jam-link { display: none; }

.jam-glow-button:hover,
.mobile-jam-link:hover { background: var(--md-sys-color-primary-container); }

.version-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.version-switcher button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-main);
    font: 800 .82rem Inter, sans-serif;
    cursor: pointer;
}

.version-switcher button.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--surface));
    color: var(--accent-primary);
}

.jam-status-panel {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-medium);
    background: var(--md-sys-color-surface-container);
}

.jam-status-main,
.jam-current-summary {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.jam-live-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
}

.jam-status-panel strong,
.jam-current-box strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jam-status-panel small,
.jam-current-box small {
    display: block;
    color: var(--text-muted);
    font-weight: 700;
}

.jam-kicker,
.jam-current-kicker {
    color: var(--md-sys-color-primary);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jam-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.jam-controls md-outlined-button,
.jam-controls md-text-button,
.jam-controls md-filled-button {
    --md-outlined-button-container-shape: var(--shape-medium);
    --md-text-button-container-shape: var(--shape-medium);
    --md-filled-button-container-shape: var(--shape-medium);
}

.jam-leader-select {
    width: 100%;
    --md-filled-select-text-field-container-height: 48px;
    --md-filled-select-text-field-container-shape: var(--shape-medium);
    --md-filled-select-text-field-container-color: var(--md-sys-color-surface-container-high);
}

.jam-modal { width: min(680px, 100%); }

.jam-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-right: 48px;
}

.jam-modal-head h2 { margin-bottom: 4px; }

.jam-dialog-kicker {
    color: var(--md-sys-color-secondary);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.jam-inline-message {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 46%, var(--md-sys-color-outline-variant));
    border-radius: var(--shape-medium);
    background: color-mix(in srgb, var(--md-sys-color-error) 10%, var(--md-sys-color-surface-container));
    color: var(--md-sys-color-on-surface);
}

.jam-inline-message strong { color: var(--md-sys-color-error); }

.jam-list-full,
.jam-create-panel { margin-top: 14px; }

.jam-choice-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 4px;
}

.jam-choice-button {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 94px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: transform var(--duration-medium) var(--motion-emphasized), background var(--duration-short) var(--motion-standard), border-color var(--duration-short) var(--motion-standard);
}

.jam-choice-button strong {
    display: block;
    color: var(--accent-primary);
    font: 900 1.02rem Inter, sans-serif;
}

.jam-choice-button span {
    display: block;
    color: var(--text-muted);
    font: 800 .9rem/1.45 Inter, sans-serif;
}

.jam-choice-button:hover,
.jam-choice-button:focus-visible {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface));
    outline: none;
}

.jam-create-box,
.jam-list-box,
.jam-current-box,
.pending-jam {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.jam-current-box {
    gap: var(--space-5);
    padding: var(--space-5);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 32%, var(--border));
    background: color-mix(in srgb, var(--md-sys-color-primary) 7%, var(--md-sys-color-surface-container-low));
}

.jam-step-panel {
    display: grid;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.jam-members { display: grid; gap: var(--space-2); }

.jam-members-label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 900;
}

.jam-member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.jam-member-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: .82rem;
    font-weight: 800;
}

.jam-member-chip.leader::before {
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    content: '';
}

.jam-member-chip.me {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.jam-modal-controls { justify-content: flex-start; }

.jam-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
}

.jam-step-head h3 {
    margin: 0;
    flex: 1 1 auto;
    color: var(--text-main);
}

.jam-list-item {
    position: relative;
    display: grid;
    gap: 3px;
    min-height: 64px;
    padding: var(--space-3) 54px var(--space-3) var(--space-4);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-medium);
    background: var(--md-sys-color-surface-container);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.jam-list-item:hover,
.jam-list-item:focus-visible {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    outline: none;
}

.jam-list-item:disabled { opacity: .55; cursor: wait; }

.jam-list-arrow {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    color: var(--md-sys-color-primary) !important;
    font-size: 1.25rem !important;
    transform: translateY(-50%);
}

.jam-field { width: 100%; }

.jam-loading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 800;
}

.jam-loading md-circular-progress {
    width: 28px;
    height: 28px;
    --md-circular-progress-active-indicator-color: var(--md-sys-color-primary);
}

.jam-list-item strong { color: var(--accent-primary); }

.jam-list-item span,
.empty-jams {
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 700;
}

.shuffle-hint {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin: 14px 0 4px;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--accent-secondary) 42%, transparent);
    border-radius: 14px;
    color: var(--text-muted);
    font: 800 .78rem Inter, sans-serif;
}

.shuffle-hint strong {
    color: var(--accent-primary);
    text-align: center;
}

.shuffle-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 4px;
}

.shuffle-controls button {
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--text-main);
    font: 900 .95rem Inter, sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.shuffle-controls .btn-primary {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
}

.shuffle-controls button:disabled {
    cursor: not-allowed;
    opacity: .42;
    box-shadow: none;
}

.single-jam-song-mode .songbook-layout,
.shuffle-single-mode .songbook-layout {
    grid-template-columns: 1fr;
}

.single-jam-song-mode .song-sidebar,
.shuffle-single-mode .song-sidebar {
    display: none;
}

.single-jam-song-mode .song-results,
.shuffle-single-mode .song-results {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.single-jam-song-mode .public-song-card.shuffle-song-card,
.shuffle-single-mode .public-song-card.shuffle-song-card {
    min-height: min(74vh, 780px);
    cursor: default;
    touch-action: pan-y;
    user-select: none;
}

@media (max-width: 780px) {
    .mobile-jam-link { display: inline-flex; }

    .mobile-jam-link.active { background: var(--md-sys-color-primary-container); }

    .jam-status-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .jam-status-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

    .jam-modal-controls { display: grid; grid-template-columns: 1fr; }

    .jam-modal-controls > * { width: 100%; }

    .jam-choice-box { grid-template-columns: 1fr; }

    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content {
        width: 100%;
        max-height: min(88vh, 900px);
        padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: var(--shape-extra-large) var(--shape-extra-large) 0 0;
        animation: bottom-sheet-enter var(--duration-medium) var(--motion-emphasized);
    }

    .modal-content::before {
        content: "";
        width: 36px;
        height: 4px;
        display: block;
        margin: 0 auto var(--space-5);
        border-radius: var(--md-sys-shape-corner-full);
        background: var(--md-sys-color-outline);
    }

    .version-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .version-switcher button {
        width: 100%;
        min-width: 0;
    }

    .shuffle-controls {
        grid-template-columns: 1fr;
    }

    .songbook-shell {
        display: block;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0 10px 32px;
    }

    .songbook-hero,
    .song-sidebar {
        display: none;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: space-between;
        padding: 10px 4px;
        border-bottom: 0;
    }

    .mobile-brand img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .mobile-brand strong {
        display: block;
        color: var(--accent-primary);
        font-size: 1rem;
        line-height: 1.1;
        font-weight: 900;
    }

    .mobile-brand span {
        display: block;
        color: var(--text-muted);
        font-size: .72rem;
        font-weight: 700;
    }

    .mobile-brand > div {
        min-width: 0;
        flex: 1;
    }

    .mobile-brand-copy { flex: 1; }

    .mobile-admin-link {
        min-height: 40px;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255, 255, 255, .05);
        color: var(--text-main);
        font-size: .74rem;
        font-weight: 900;
        text-decoration: none;
    }

    .mobile-village-button {
        display: inline-flex;
        width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: var(--shape-medium);
    }

    .mobile-jam-link { min-height: 40px; padding-inline: 10px; }

    .village-picker-panel {
        width: 100%;
        margin: 18px 0;
        padding: 18px 14px;
        border-radius: 16px;
    }

    .village-picker-head {
        display: block;
        padding-right: 44px;
    }

    .village-choice-grid {
        grid-template-columns: 1fr;
    }

    .village-choice-grid button {
        min-height: 96px;
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 10px;
        align-items: center;
        text-align: left;
    }

    .village-choice-grid img {
        grid-row: span 2;
        margin: 0;
    }

    .songbook-toolbar {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        top: 6px;
        padding: 8px 0;
        border: 0;
        border-radius: 0;
        background: var(--md-sys-color-surface-container-lowest);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .toolbar-leading { display: none; }

    .search-box {
        min-width: 0;
        width: 100%;
        grid-column: 1;
    }

    .controls-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) repeat(3, 46px);
        gap: 8px;
        min-width: 0;
    }

    .material-category-select {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .material-search-button {
        height: 46px;
        min-width: 0;
        grid-column: 1;
        --md-filled-button-container-height: 46px;
    }

    .material-toolbar-button {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .dashboard-input,
    .dashboard-select,
    .btn-primary,
    .btn-icon {
        height: 46px;
        min-height: 46px;
        border-radius: 12px;
    }

    .dashboard-input {
        padding: 0 14px;
        font-size: 1rem;
    }

    .dashboard-select {
        min-width: 0;
        grid-column: 1 / -1;
    }

    .btn-primary {
        grid-column: 1;
        padding: 0 10px;
        font-size: .78rem;
        min-width: 0;
    }

    .btn-icon {
        width: 46px;
        min-width: 46px;
        font-size: 1.08rem;
    }

    .mobile-menu-btn {
        display: inline-flex;
        grid-column: 2;
        align-self: center;
        width: 54px;
        height: 54px;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: var(--md-sys-shape-corner-full);
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
        --md-icon-button-icon-color: currentColor;
        --md-icon-button-state-layer-shape: var(--md-sys-shape-corner-full);
    }

    .mobile-menu-btn.active {
        border-color: var(--md-sys-color-primary);
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }

    .songbook-toolbar.is-compact { grid-template-columns: minmax(0, 1fr) auto; }

    .songbook-toolbar.is-compact .search-box {
        grid-column: 1;
    }

    .songbook-toolbar.is-compact .mobile-menu-btn { display: inline-flex; grid-column: 2; }

    .songbook-toolbar.is-compact .controls-panel {
        display: none;
    }

    .filters-scrim {
        position: fixed;
        inset: 0;
        z-index: 1190;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .5);
    }

    .songbook-toolbar.controls-open .controls-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: 100vw;
        box-sizing: border-box;
        z-index: 1200;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: var(--shape-extra-large) var(--shape-extra-large) 0 0;
        background: var(--md-sys-color-surface-container-high);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
        animation: bottom-sheet-enter var(--duration-medium) var(--motion-emphasized);
    }

    .mobile-filter-heading {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        color: var(--text-muted);
        font-size: .9rem;
        font-weight: 900;
    }

    .material-search-button { display: none; }

    .toolbar-tool {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 72px;
        flex: none;
        min-width: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px 8px;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: var(--shape-medium);
        background: var(--md-sys-color-surface-container-low);
        color: var(--md-sys-color-on-surface-variant);
    }

    .toolbar-tool.active {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }

    .toolbar-tool-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: .72rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .toolbar-tool-icon {
        display: block;
        font-size: 1.2rem;
    }

    .songbook-toolbar.controls-open .dashboard-select,
    .songbook-toolbar.controls-open .material-category-select,
    .songbook-toolbar.controls-open .material-search-button,
    .songbook-toolbar.controls-open .btn-primary {
        grid-column: 1 / -1;
        width: 100%;
    }

    .songbook-toolbar.controls-open .btn-icon {
        width: 100%;
    }

    .songbook-layout {
        display: block;
    }

    .song-results {
        gap: 12px;
        padding-top: 10px;
    }

    .results-summary {
        margin: var(--space-2) 0;
    }

    .song-skeleton-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .public-song-card {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        border-radius: var(--shape-large);
    }

    .public-song-card h2 {
        font-size: 1.28rem;
        line-height: 1.18;
    }

    .public-song-card pre {
        font-size: 1rem;
        line-height: 1.55;
    }

    .song-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .song-actions > * { width: 100%; min-width: 0; }

    .song-actions md-filled-tonal-button,
    .song-actions md-text-button,
    .song-actions md-outlined-button {
        --md-filled-tonal-button-container-height: 44px;
        --md-text-button-container-height: 44px;
        --md-outlined-button-container-height: 44px;
    }

    .song-actions button,
    .song-actions a {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: .78rem;
        line-height: 1.15;
        text-align: center;
    }

    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content {
        width: 100%;
        max-height: min(88vh, 900px);
        padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: var(--shape-extra-large) var(--shape-extra-large) 0 0;
    }

    .print-controls,
    .print-song-list {
        grid-template-columns: 1fr;
    }

    .admin-top-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .nav a,
    .nav button {
        white-space: nowrap;
    }
    .two,
    .three { grid-template-columns: 1fr; }

    .admin-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .admin-quick-actions,
    .admin-list-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search {
        max-width: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid article {
        padding: 14px;
    }

    .stats-grid strong {
        font-size: 1.55rem;
    }

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

    .admin-song-row {
        grid-template-columns: 46px 1fr;
    }

    .village-row {
        grid-template-columns: 54px 1fr;
    }

    .village-row-logo {
        width: 46px;
        height: 46px;
    }

    .village-row-logo img {
        width: 36px;
        height: 36px;
    }

    .song-number {
        width: 40px;
        height: 40px;
    }

    .row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .admin-song-row {
        align-items: start;
    }

    .admin-song-row .btn {
        min-width: 0;
        flex: 1 1 auto;
    }

    .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .table-actions .btn {
        width: 100%;
    }

    .inline-edit {
        grid-template-columns: 1fr;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    }

    th { display: none; }
    td {
        padding: 7px 0;
        border-bottom: 0;
    }
}

@media (min-width: 781px) and (max-width: 1050px) {
    .songbook-shell { padding-inline: var(--space-5); }

    .songbook-hero {
        min-height: 0;
        padding: var(--space-6);
        border-radius: var(--shape-large);
    }

    .songbook-hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
    .hero-village-mark { display: none; }
    .toolbar-leading { display: none; }
    .search-box { flex-basis: 100%; }
    .controls-panel { width: 100%; }
    .material-category-select { flex: 1; }
    .songbook-layout { grid-template-columns: 250px 1fr; }
}

@keyframes bottom-sheet-enter {
    from { transform: translateY(24px); opacity: .72; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* Public songbook refinement: one calm document, focused song detail and PWA states. */
.ui-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.ui-icon-small { width: 16px; height: 16px; }

body.light-mode,
html.initial-light-mode body {
    --md-sys-color-surface-container-lowest: #f6f7ff;
    --md-sys-color-surface-container-low: #ffffff;
    --md-sys-color-surface-container: #eef1fa;
    --md-sys-color-surface-container-high: #e7ebf6;
    --md-sys-color-surface-container-highest: #dce2f0;
    --md-sys-color-outline: rgba(31, 41, 66, .2);
    --md-sys-color-outline-variant: rgba(31, 41, 66, .1);
    --border: rgba(31, 41, 66, .12);
    --text-muted: #566177;
}

.public-page :is(button, a[href], summary, md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button, md-icon-button, md-filled-select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 48%, transparent);
    outline-offset: 3px;
}

.songbook-shell {
    width: min(1440px, calc(100% - clamp(48px, 5vw, 96px)));
    max-width: none;
    padding: 20px 0 56px;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
}
.songbook-hero { min-height: 84px; padding: 14px 20px; border-radius: 20px; background: linear-gradient(135deg, var(--md-sys-color-surface-container-low) 62%, color-mix(in srgb, var(--accent-primary) 10%, var(--md-sys-color-surface-container-low))); }
.hero-brand { gap: 14px; }
.hero-logo { width: 52px !important; height: 52px !important; border-radius: 14px; }
.hero-kicker { display: none; }
.songbook-hero h1 { margin: 0; font-size: 1.65rem; line-height: 1.05; }
.songbook-hero p { margin: 3px 0 0; font-size: .9rem; }
.hero-side { flex-wrap: nowrap; }
.hero-jam-button { --md-filled-button-container-height: 50px; --md-filled-button-container-shape: 16px; }
.village-switch-button { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 16px 12px; background: transparent; font-size: .94rem; }
.hero-village-mark, .hero-admin-button { display: none; }

.header-menu, .song-more { position: relative; }
.header-menu summary, .song-more summary {
    width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 12px; background: transparent; cursor: pointer;
    list-style: none; color: var(--text-main); font-weight: 900;
}
.header-menu summary::-webkit-details-marker, .song-more summary::-webkit-details-marker { display: none; }
.header-menu > div, .song-more > div {
    position: absolute; right: 0; z-index: 1500; min-width: 180px; padding: 6px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--md-sys-color-surface-container-high);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.header-menu :is(button, a), .song-more :is(button, a) {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
    border: 0; border-radius: 8px; background: transparent; color: var(--text-main); text-decoration: none;
    font: 700 .88rem system-ui, sans-serif;
}
.header-menu :is(button, a):hover, .song-more :is(button, a):hover { background: var(--md-sys-color-primary-container); }

.songbook-toolbar { top: max(8px, env(safe-area-inset-top)); gap: 10px; padding: 8px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 20px; }
.material-search-field {
    --md-outlined-text-field-container-height: 60px;
    --md-outlined-text-field-container-shape: 16px;
    --md-outlined-text-field-input-text-size: 1rem;
    --md-outlined-text-field-label-text-size: .88rem;
}
.search-field-icon { color: var(--text-muted); }
.material-category-select { width: 205px; min-width: 190px; --md-filled-select-text-field-container-height: 60px; --md-filled-select-text-field-container-shape: 16px; }
.toolbar-tool { width: 52px; height: 52px; flex-basis: 52px; gap: 8px; border-radius: 16px; }
.toolbar-tool.active { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.toolbar-tool-icon { display: grid; place-items: center; font-size: 1.35rem; }
.search-clear { position: absolute; z-index: 2; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.25rem; }
.material-search-field:has(+ .search-clear) { padding-right: 44px; }
.mobile-filter-button { position: relative; }
.filter-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--accent-primary); color: #fff; font: 800 .68rem/1 system-ui, sans-serif; }

.catalog-trigger {
    display: none;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text-main);
    font: 800 .9rem system-ui, sans-serif;
}
.catalog-trigger.desktop-visible { display: inline-flex; }
.catalog-scrim { display: none; }
.songbook-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
.songbook-layout.catalog-collapsed { grid-template-columns: 1fr; }
.songbook-layout.catalog-collapsed .song-sidebar { display: none; }
.song-sidebar { height: calc(100vh - 132px); top: 100px; border-radius: 16px; }
.sidebar-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 18px; font-size: .84rem; color: var(--text-muted); }
.sidebar-header button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; }
.sidebar-header button:hover { background: var(--md-sys-color-primary-container); color: var(--text-main); }
.song-sidebar nav { padding: 8px; }
.song-sidebar a {
    min-height: 46px;
    display: -webkit-box;
    overflow: hidden;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: .94rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.song-sidebar a.active { background: var(--md-sys-color-primary-container); color: var(--text-main); }
.song-sidebar a.active::before { content: ""; width: 4px; position: absolute; inset: 8px auto 8px 3px; border-radius: 999px; background: var(--md-sys-color-primary); }
.song-sidebar a { position: relative; }
.song-results { gap: 28px; overflow: visible; border-radius: 0; background: transparent; }
.public-song-card { padding: 30px clamp(28px, 3.2vw, 44px) 34px; border: 0; border-radius: 22px; background: var(--md-sys-color-surface-container-low); }
.public-song-card:hover { background: var(--md-sys-color-surface-container-low); }
.song-badges { margin-bottom: 12px; }
.song-badges md-assist-chip { --md-assist-chip-container-height: 30px; }
.public-song-card h2 { margin-bottom: 12px; }
.public-song-card h2 button { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--text-main); font: 800 clamp(1.28rem, 1.18rem + .3vw, 1.48rem)/1.22 system-ui, sans-serif; text-align: left; cursor: pointer; }
.song-title-open-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-secondary); opacity: .84; transition: transform var(--duration-short) var(--motion-standard), opacity var(--duration-short) var(--motion-standard); }
.song-title-open-icon .ui-icon { width: 18px; height: 18px; }
.public-song-card h2 button:hover .song-title-open-icon { transform: translate(2px, -2px); opacity: 1; }
.public-song-card pre { max-width: 92ch; margin-bottom: 22px; font: clamp(1.08rem, 1.03rem + .12vw, 1.16rem)/1.56 Georgia, 'Times New Roman', serif; }
.public-song-card mark { border-radius: 3px; background: color-mix(in srgb, var(--accent-secondary) 38%, transparent); color: inherit; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-secondary) 38%, transparent); }
.song-actions { align-items: center; gap: 10px; margin-bottom: 24px; }
.song-actions md-filled-tonal-button, .song-actions md-outlined-button { --md-filled-tonal-button-container-height: 48px; --md-outlined-button-container-height: 48px; --md-filled-tonal-button-container-shape: 12px; --md-outlined-button-container-shape: 12px; }
.song-more[open] { z-index: 20; }
.song-more > div { top: calc(100% + 8px); bottom: auto; }

@media (min-width: 1051px) {
    .toolbar-tool { width: auto; min-width: 96px; flex-basis: auto; padding: 0 14px; }
    .toolbar-tool-label { display: block; color: currentColor; font-size: .82rem; font-weight: 800; white-space: nowrap; }
}

.empty-state { display: grid; justify-items: center; gap: 8px; border-radius: 14px; }
.empty-state strong { color: var(--text-main); font-size: 1.1rem; }
.empty-state button { min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-main); }

body.detail-open { overflow: hidden; }
.song-detail-modal { align-items: stretch; justify-content: flex-end; padding: 0; background: rgba(2,6,23,.66); }
.song-detail-modal .song-detail { width: min(820px, 100%); max-height: 100vh; margin: 0; padding: max(30px, env(safe-area-inset-top)) clamp(22px, 5vw, 64px) max(32px, env(safe-area-inset-bottom)); border-width: 0 0 0 1px; border-radius: 0; background: var(--md-sys-color-surface-container-lowest); }
.song-detail:focus { outline: none; }
.detail-close { position: sticky; float: right; top: 0; z-index: 2; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-main); font-size: 1.35rem; }
.detail-meta { margin-top: 32px; color: var(--text-muted); font-size: .82rem; font-weight: 800; }
.song-detail h2 { max-width: 18ch; margin: 8px 0 24px; color: var(--text-main); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.035em; }
.detail-lyrics { max-width: 72ch; margin: 0 0 28px; white-space: pre-wrap; color: var(--text-main); font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; }
.detail-primary-actions, .detail-tools { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.detail-primary-actions button, .detail-tools button { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-main); font-weight: 800; }
.detail-primary-actions button:first-child { background: var(--md-sys-color-primary-container); border-color: transparent; }
.detail-tools { margin-top: 10px; border-top: 0; }

.connection-status, .update-banner { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 12000; transform: translateX(-50%); padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-main); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .8rem; font-weight: 800; }
.update-banner { border-color: var(--accent-primary); cursor: pointer; }
.install-tip { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 11900; width: min(360px, calc(100% - 24px)); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px; border: 1px solid var(--border); border-radius: 24px; background: var(--md-sys-color-surface-container-high); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.install-tip strong, .install-tip span { grid-column: 1; }
.install-tip span { color: var(--text-muted); font-size: .84rem; }
.install-tip button { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-main); font-weight: 800; }
.install-tip .install-tip-action { grid-column: 1; justify-self: start; margin-top: 6px; border-color: transparent; background: var(--accent-primary); color: var(--md-sys-color-on-primary, #fff); }
.install-tip .install-tip-close { grid-column: 2; grid-row: 1 / 4; width: 44px; padding: 0; align-self: start; }
.install-help-modal { z-index: 12100; }
.install-help { width: min(520px, 100%); padding: 28px; border-radius: 30px; background: var(--md-sys-color-surface-container-lowest); }
.install-help .detail-close { position: absolute; top: 18px; right: 18px; float: none; }
.install-help-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 20px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.install-help-icon .ui-icon { width: 30px; height: 30px; }
.install-help-kicker { display: block; margin-bottom: 6px; color: var(--accent-primary); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.install-help h2 { max-width: 12ch; margin: 0 52px 10px 0; color: var(--text-main); font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; }
.install-help > p { margin: 0 0 22px; color: var(--text-muted); line-height: 1.5; }
.install-help-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.install-help-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; min-height: 64px; padding: 10px 12px; border-radius: 18px; background: var(--md-sys-color-surface-container); color: var(--text-main); }
.install-help-steps li > strong { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.install-help-steps li > span { line-height: 1.4; }
.install-offline-note { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--text-main); }
.install-offline-note > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-primary); color: var(--md-sys-color-on-primary, #fff); font-weight: 900; }
.install-offline-note p { margin: 2px 0 0; line-height: 1.45; }
.install-help-done { width: 100%; min-height: 50px; margin-top: 18px; border: 0; border-radius: 16px; background: var(--accent-primary); color: var(--md-sys-color-on-primary, #fff); font-size: 1rem; font-weight: 900; }

@media (max-width: 780px) {
    .songbook-shell { width: 100%; max-width: 100%; padding: env(safe-area-inset-top) 16px calc(36px + env(safe-area-inset-bottom)); }
    .mobile-brand { min-height: 68px; gap: 10px; padding: 8px 0; }
    .mobile-brand img { width: 40px; height: 40px; }
    .mobile-brand strong { font-size: 1.18rem; }
    .mobile-brand span { margin-top: 2px; font-size: .8rem; }
    .mobile-jam-link, .mobile-village-button { min-height: 48px; }
    .mobile-jam-link { gap: 6px; padding-inline: 12px; }
    .mobile-jam-link .ui-icon { width: 18px; height: 18px; }
    .mobile-village-button { width: 48px; display: inline-grid; place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
    .songbook-toolbar { top: max(4px, env(safe-area-inset-top)); }
    .material-search-field { --md-outlined-text-field-container-height: 60px; }
    .mobile-menu-btn { width: 56px; height: 56px; border-radius: 16px; }
    .toolbar-tool-label { overflow: visible; text-overflow: clip; white-space: normal; }
    .results-summary { gap: 8px; margin: 8px 0 12px; }
    .results-summary :is(strong, span) { min-height: 36px; font-size: .88rem; }
    .catalog-trigger { display: inline-flex; margin-left: auto; }
    .catalog-scrim {
        position: fixed;
        inset: 0;
        z-index: 1290;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(2, 6, 23, .66);
    }
    .songbook-layout.catalog-collapsed .song-sidebar { display: flex; }
    .song-sidebar,
    .songbook-layout.catalog-collapsed .song-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1300;
        width: min(330px, calc(100vw - 48px));
        height: 100dvh;
        display: flex;
        border-width: 0 1px 0 0;
        border-radius: 0 18px 18px 0;
        background: var(--md-sys-color-surface-container-low);
        box-shadow: 18px 0 48px rgba(0, 0, 0, .36);
        transform: translateX(-105%);
        transition: transform var(--duration-medium) var(--motion-standard);
    }
    .song-sidebar.open { transform: translateX(0); }
    .sidebar-header { min-height: 68px; padding: max(8px, env(safe-area-inset-top)) 10px 8px 20px; color: var(--text-main); font-size: 1rem; }
    .song-sidebar nav { padding: 8px 10px max(20px, env(safe-area-inset-bottom)); }
    .song-sidebar a { min-height: 48px; padding: 12px; font-size: .95rem; }
    .song-results { gap: 28px; padding-top: 0; border-radius: 0; }
    .public-song-card { padding: 24px 4px 30px; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
    .public-song-card:hover { background: transparent; }
    .song-badges { margin-bottom: 14px; }
    .public-song-card h2 { margin-bottom: 12px; }
    .public-song-card h2 button { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.5rem); line-height: 1.2; }
    .song-title-open-icon { width: 32px; height: 32px; border-radius: 11px; }
    .public-song-card pre { max-width: 100%; margin-bottom: 24px; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.375rem); line-height: 1.58; }
    .song-actions { display: flex; gap: 8px; margin-bottom: 22px; }
    .song-actions > * { width: auto; flex: 0 0 auto; }
    .song-actions md-filled-tonal-button, .song-actions md-outlined-button { width: auto; }
    .song-actions md-filled-tonal-button, .song-actions md-outlined-button { --md-filled-tonal-button-container-height: 48px; --md-outlined-button-container-height: 48px; }
    .song-more summary { width: 48px; height: 48px; }
    .song-detail-modal .song-detail { max-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; animation: none; }
    .song-detail-modal .song-detail::before { display: none; }
    .song-detail h2 { margin-top: 6px; font-size: clamp(1.8rem, 9vw, 2.7rem); }
    .detail-lyrics { line-height: 1.58; }
    .detail-primary-actions button { flex: 1 1 auto; }
    .detail-tools button:nth-child(3), .detail-tools button:nth-child(4) { flex: 1 1 40%; }
    .install-tip { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    .install-help { max-height: 92dvh; overflow-y: auto; padding: 26px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
    .install-help h2 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
    .install-help-steps li { grid-template-columns: 38px 1fr; min-height: 60px; padding: 9px 10px; }
    .install-help-steps li > strong { width: 38px; height: 38px; }
}

@media (display-mode: standalone) and (max-width: 780px) {
    .mobile-brand { min-height: 72px; }
    .songbook-toolbar { top: max(6px, env(safe-area-inset-top)); }
}

@media (max-width: 350px) {
    .mobile-brand-copy span { display: none; }
    .mobile-brand { gap: 5px; }
    .mobile-jam-link { padding-inline: 8px; }
    .songbook-shell { padding-inline: 12px; }
    .public-song-card { padding-inline: 4px; }
}

.top-shell {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    overflow: visible;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 22px;
    background: var(--md-sys-color-surface-container-low);
}

.top-shell .songbook-hero {
    grid-column: auto;
    border-radius: 22px 22px 0 0;
    background: transparent;
    box-shadow: none;
}

.top-shell .songbook-toolbar {
    grid-column: auto;
    position: static;
    top: auto;
    border: 0;
    border-radius: 0 0 22px 22px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 780px) {
    body.filters-open { overflow-y: auto; }

    .songbook-shell {
        padding-inline: 12px;
        background: var(--md-sys-color-surface-container-lowest);
    }

    .top-shell {
        width: 100%;
        display: block;
        margin: 8px 0 14px;
        padding: 6px;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 20px;
        background: var(--md-sys-color-surface-container-low);
    }

    .mobile-brand {
        min-height: 52px;
        padding: 4px 4px 7px;
    }

    .mobile-brand img {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .mobile-brand strong { font-size: 1rem; }
    .mobile-brand span { font-size: .74rem; }

    .mobile-jam-link,
    .mobile-village-button { min-height: 40px; }

    .mobile-jam-link {
        gap: 5px;
        padding-inline: 11px;
        border-radius: 14px;
    }

    .mobile-village-button {
        width: 40px;
        border-radius: 14px;
    }

    .songbook-toolbar,
    .songbook-toolbar.is-compact {
        position: static;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 6px;
        padding: 6px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .material-search-field {
        --md-outlined-text-field-container-height: 52px;
        --md-outlined-text-field-container-shape: 14px;
        --md-outlined-text-field-input-text-size: .96rem;
    }

    .mobile-menu-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .search-clear {
        top: 4px;
        right: 4px;
    }

    .filters-scrim { display: none; }

    .songbook-toolbar.controls-open .controls-panel {
        position: static;
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 6px 0 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        animation: none;
    }

    .mobile-filter-heading { display: none; }

    .songbook-toolbar.controls-open .material-category-select {
        --md-filled-select-text-field-container-height: 50px;
        --md-filled-select-text-field-container-shape: 14px;
    }

    .toolbar-tool {
        width: 100%;
        height: 52px;
        min-width: 0;
        min-height: 48px;
        flex-direction: row;
        gap: 5px;
        padding: 4px 6px;
        border-radius: 12px;
    }

    .toolbar-tool-icon .ui-icon {
        width: 19px;
        height: 19px;
    }

    .toolbar-tool-label {
        overflow: visible;
        font-size: .68rem;
        line-height: 1;
        text-overflow: clip;
        white-space: nowrap;
    }

    .results-summary {
        margin: 0 0 12px;
    }

    .results-summary :is(strong, span) {
        min-height: 32px;
        padding-inline: 10px;
        font-size: .78rem;
        white-space: nowrap;
    }

    .results-summary span {
        max-width: min(55vw, 230px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-trigger {
        min-height: 38px;
        padding-inline: 12px;
        border-radius: 11px;
        font-size: .82rem;
        white-space: nowrap;
    }

    .song-results { gap: 18px; }

    .public-song-card {
        padding: 20px 4px 24px;
    }

    .song-badges {
        margin-bottom: 8px;
    }

    .public-song-card h2 {
        margin-bottom: 9px;
    }

    .public-song-card h2 button {
        gap: 7px;
        font-size: 1.08rem;
        line-height: 1.25;
        letter-spacing: -.01em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .song-title-open-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .song-title-open-icon .ui-icon {
        width: 16px;
        height: 16px;
    }

    .song-actions {
        gap: 6px;
        margin-bottom: 16px;
    }

    .song-actions md-filled-tonal-button,
    .song-actions md-outlined-button {
        --md-filled-tonal-button-container-height: 44px;
        --md-outlined-button-container-height: 44px;
    }

    .song-more summary {
        width: 44px;
        height: 44px;
    }

    .public-song-card pre {
        max-width: 100%;
        margin-bottom: 18px;
        white-space: pre-wrap;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        font-size: 1.05rem;
        line-height: 1.5;
        text-wrap: pretty;
    }
}