:root {
    /* Modern cool palette: deep slate background, soft panels, teal accent */
    --bg-dark: #0f1720;
    --panel-bg: #0b1220;
    --border-color: #1f2937;
    --accent: #14b8a6;
    --accent-rgb: 20, 184, 166;
    --accent-secondary: #c96a3d;
    --text-primary: #e6eef3;
    --text-muted: #9aa6b2;
    --poster-ratio: 1.414; /* A4 Ratio */
    --poster-height-vh: 85vh; /* default poster height in viewport units */
}

/* --- THEME: PIRATE (Adventure & Fun) --- */
.pirate-theme {
    --accent: #ff4136;
    --accent-rgb: 255, 65, 54;
    --background: #1a1a1a;
    background: linear-gradient(135deg, #2b5876, #4e4376), url('https://www.transparenttextures.com/patterns/old-map.png');
    color: #f6d365;
}

.pirate-theme .chord-item {
    background: rgba(255,255,255,0.1);
    border: 2px solid #8b4513;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
}

.pirate-theme .root-note {
    background: #8b4513;
    border-right: 4px solid #5d2e0d;
}

/* --- THEME: ACOUSTIC (Warm Wood) --- */
.acoustic-theme {
    --accent: #d35400;
    --accent-rgb: 211, 84, 0;
    --background: #3d2b1f;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://www.transparenttextures.com/patterns/wood-pattern.png');
    background-color: #3d2b1f; /* Fallback */
    color: #f3e5ab;
    border: 10px solid #2c1e15;
}

.acoustic-theme .chord-item {
    background: rgba(255,255,240,0.05);
    border: 1px solid rgba(243,229,171,0.2);
}

.acoustic-theme .root-note {
    background: #5d2e0d;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

html {
    overflow-y: auto;
    overflow-x: hidden;
}

.app-container {
    display: flex;
    min-height: 100vh;
    height: 100%;
    overflow: visible;
}

/* Sidebar */
/* Sidebar redone for Premium Feel */
.sidebar {
    width: 260px;
    min-width: 220px;
    max-width: 280px;
    background: #111825;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.5rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,170,0.6) rgba(255,255,255,0.05);
    box-sizing: border-box;
}

/* Right sidebar (settings panel) */
.rightbar {
    width: 320px;
    min-width: 260px;
    background: rgba(28, 31, 38, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255,255,255,0.06);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    transition: transform 0.32s ease;
}

.rightbar-header h2 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.rightbar-section { display:flex; flex-direction: column; gap:0.35rem; padding: 0.25rem 0; }

.rightbar .premium-input, .rightbar select { width:100%; }

/* Floating settings toggle */
.settings-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.6rem;
    cursor: pointer;
    display: none; /* visible on mobile */
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Collapsed helpers */
.sidebar.collapsed { transform: translateX(-110%); }
.rightbar.collapsed { transform: translateX(110%); }

/* Mobile behaviour */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-110%); position: fixed; left: 0; top: 0; }
    .rightbar { transform: translateX(110%); position: fixed; right: 0; top: 0; }
    .mobile-menu-toggle { display: flex; }
    .settings-toggle { display: flex; }
    .workspace { padding: 1rem; }
}

/* Custom Scrollbar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,212,170,0.6);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0,212,170,0.9);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 2000;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}



.premium-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: inherit;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.3s;
}

.premium-input:focus {
    border-color: var(--accent);
}

.mini-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 4px;
}

.mini-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

option {
    color: #111;
    background: #fff;
}

.color-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.color-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.color-btn.active {
    border-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent);
}



.toggle-group {
    padding: 0.5rem 0;
}

.toggle-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.toggle-hint .note-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 2px;
}

.toggle-hint .note-dot.C { background: #FF4136; }
.toggle-hint .note-dot.D { background: #FF851B; }
.toggle-hint .note-dot.E { background: #FFDC00; }
.toggle-hint .note-dot.F { background: #2ECC40; }
.toggle-hint .note-dot.G { background: #0074D9; }
.toggle-hint .note-dot.A { background: #B10DC9; }
.toggle-hint .note-dot.B { background: #F012BE; }

.learning-legend {
    margin-top: 0.6rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.learning-legend-title {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.legend-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.legend-row:last-child {
    margin-bottom: 0;
}

.legend-chip {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.legend-chip-major {
    background: rgba(255, 190, 50, 0.18);
    border-color: rgba(255, 190, 50, 0.35);
    color: #ffe19c;
}

.legend-chip-minor {
    background: rgba(90, 110, 255, 0.2);
    border-color: rgba(90, 110, 255, 0.4);
    color: #c8d0ff;
}

.legend-chip-dom7 {
    background: rgba(255, 110, 30, 0.2);
    border-color: rgba(255, 110, 30, 0.4);
    color: #ffd0b0;
}

.legend-row-text {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.62);
    gap: 0.5rem;
}

.print-cta {
    background: rgba(255, 255, 255, 0.05);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.action-buttons {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Improved Form Controls */
select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b92a5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

select:hover {
    border-color: var(--accent);
    background-color: rgba(255, 255, 255, 0.08);
}

select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.15);
}

select option {
    background: var(--panel-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.control-group label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-btn {
    background: linear-gradient(45deg, var(--accent), var(--accent-secondary));
    color: #000;
}

.primary-btn:hover {
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
    transform: translateY(-2px);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Workspace & Poster Area */
.workspace {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: radial-gradient(circle at center, #1a1d24 0%, var(--bg-dark) 100%);
    overflow: auto;
    min-height: 50vh;
    height: 100%;
}

.poster-wrapper {
    height: calc(var(--poster-height-px) * 1px);
    width: calc(var(--poster-width-px) * 1px);
    max-height: 900px;
    max-width: 1300px;
    min-height: 400px;
    min-width: 600px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: transform 0.3s ease;
    background: #fff; /* fallback */
    flex-shrink: 0;
    display: block;
}

/* Dual poster side-by-side layout */
.workspace.dual-posters {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
}

/* When only a single poster is shown, center it and limit width for better on-screen fit */
.workspace:not(.dual-posters) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.workspace:not(.dual-posters) .poster-wrapper {
    /* scale down proportionally: respect both axes, never overflow workspace */
    width: min(calc(var(--poster-width-px) * 1px), 100%);
    height: auto;
    aspect-ratio: var(--poster-width-px) / var(--poster-height-px);
    max-height: 85vh;
    max-width: 100%;
    margin: 0 auto;
}

.workspace.dual-posters .poster-wrapper {
    height: 80vh;
    max-height: 800px;
    aspect-ratio: 1 / var(--poster-ratio);
    flex: 1;
    max-width: 45%;
}

/* Instrument section labels on poster */
.instrument-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    background: linear-gradient(135deg, rgba(0,212,170,0.15), rgba(124,92,255,0.15));
    border-radius: 20px;
    border: 1px solid rgba(0,212,170,0.3);
}

.instrument-section-header .instrument-icon {
    font-size: 1.2rem;
}

.instrument-section-header .instrument-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent, #00d4aa);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.instrument-section-header .section-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.poster {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    container-type: inline-size;
    container-name: poster;
}

.poster-background {
    display: none !important;
}

.poster-overlay {
    display: none; /* Removed the murky gradient overlay */
}

.poster.dark-theme .poster {
    background-color: #0f1115;
}

.poster-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 4%;
    overflow: hidden; /* CRITICAL: Everything MUST stay inside */
    min-height: 0;
    box-sizing: border-box;
}

.poster-custom-title {
    font-size: 5vw;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.5%;
    letter-spacing: 0.05em;
    color: inherit;
    text-transform: uppercase;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.05;
}

/* Title always spans full width when inside a CSS grid */
.chords-grid .poster-custom-title {
    grid-column: 1 / -1;
}

/* Prevent grid row-stretch gap for content that uses full-width inner containers */
.chords-grid:has(.bass-chord-row),
.chords-grid:has(.game-options-grid),
.chords-grid.style-fretboard:not(.reference-mode),
.chords-grid.style-text:not(.reference-mode),
.chords-grid.style-notation:not(.reference-mode) {
    align-content: start !important;
    gap: 0 !important;
}

/* Nodevisning: nodesystemet er landskabs-format — giv det luft og lidt mindre navn */
.notation-item .chord-svg-container {
    padding: 4% 6%;
}
.notation-item .chord-svg-container svg {
    max-height: 100%;
}

/* Bass progression: horizontal card row spans full grid width */
.bass-chord-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 3%;
    width: 100%;
    grid-column: 1 / -1;
    padding: 0 3%;
    box-sizing: border-box;
}

.bass-chord-row > div {
    flex: 1 1 0;
    min-width: 14%;
    max-width: 22%;
}

.poster-custom-subtitle {
    font-size: 1.6vw;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2%;
    letter-spacing: 0.08em;
    opacity: 0.6;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sværhedsgrad-badge på plakaten */
.poster-difficulty-badge {
    display: inline-block;
    font-size: 1.1vw;
    font-weight: 600;
    padding: 0.3vw 1vw;
    border-radius: 999px;
    margin: 0 auto 1.5%;
    text-align: center;
    letter-spacing: 0.05em;
}
.poster-difficulty-badge.diff-easy {
    background: #e8f5e9;
    color: #2e7d32;
}
.poster-difficulty-badge.diff-medium {
    background: #fff3e0;
    color: #e65100;
}
.poster-difficulty-badge.diff-hard {
    background: #fce4ec;
    color: #c62828;
}

/* CHORD GRID - Flexible container for both reference and builder modes */
.chords-grid {
    display: flex;
    flex-direction: column;
    gap: 2%;
    flex: 1; 
    padding: 0;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden; /* Contain everything */
    justify-content: flex-start;
}

/* Builder mode chords - Flowing adaptive grid */
.builder-mode .chords-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
    grid-auto-rows: min-content;
    gap: 0.5rem;
    padding: 0.5rem;
    align-content: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
}

/* Center title+subtitle+chords block vertically in the poster */
.poster-content.builder-mode {
    justify-content: flex-start;
    gap: 0;
}

/* Ensure chord items are properly sized and don't overflow */
.builder-mode .chord-item {
    width: 100%; 
    height: auto;
    padding: 0.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Dynamic sizes based on chord count applied via JS classes */
.grid-dense .chord-item { 
    padding: 0.25rem; 
    border-radius: 4px;
    width: 100%;
}
.grid-dense .chord-name { font-size: 0.8rem; }
.grid-dense .chord-svg-container svg { max-height: 3rem; }

.chord-item {
    transition: all 0.2s ease-in-out;
}

.builder-mode .chord-item .chord-svg-container svg {
    max-height: 10rem;
    width: 100%;
    height: auto;
}

/* Larger diagrams when only a few chords (2-col layout) */
.builder-mode .chords-grid[style*="--grid-cols: 2"] .chord-svg-container svg {
    max-height: 14rem;
}
/* Medium diagrams for 3-col layout */
.builder-mode .chords-grid[style*="--grid-cols: 3"] .chord-svg-container svg {
    max-height: 9rem;
}
/* Smaller diagrams for 4-col layout */
.builder-mode .chords-grid[style*="--grid-cols: 4"] .chord-svg-container svg {
    max-height: 7rem;
}

.builder-mode .chord-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 800;
}

.builder-letter-icon {
    font-size: 2rem !important;
    background: var(--accent);
    color: white !important;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 3rem;
    text-align: center;
}

/* Standard Chord Item */
.chord-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chord-item:hover {
    transform: translateY(-5px) scale(1.05);
    z-index: 10;
}

.chord-svg-container {
    width: 100%;
    max-width: 100%;
}

.chord-svg-container svg {
    width: 100%;
    height: auto;
    max-height: 8rem;
    min-height: 4rem;
    color: #0077b6;
}

/* CHORD ROWS AND LISTS (REFERENCE MODE - PROFESSIONAL CHART FEEL) */
/* --- NEW UNIFIED MATRIX SYSTEM --- */
.chords-grid.reference-mode {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.matrix-headers {
    display: grid;
    grid-template-columns: 5% repeat(6, 1fr); /* Tighter 5% root column */
    width: 100%;
    height: 5%; /* Slightly shorter header */
    background: #f8f9fa;
    border-bottom: 2px solid var(--accent);
    align-items: center;
    box-sizing: border-box;
}

.chord-row {
    display: grid;
    grid-template-columns: 5% repeat(6, 1fr);
    width: 100%;
    outline: 1px solid rgba(0,0,0,0.06); /* Use outline to avoid pixel creep */
    outline-offset: -1px;
    background: transparent;
    box-sizing: border-box;
    align-items: center; 
    justify-items: center;
    position: relative;
    overflow: visible;
}

.root-note {
    font-size: 1.1vw;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #2c3e50;
    border-right: 1px solid rgba(0,0,0,0.08);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
}

.dark-theme .matrix-headers,
.dark-theme .root-note {
    background: #1a1c23;
    color: #ecf0f1;
}
.dark-theme .root-note { border-right-color: rgba(255,255,255,0.1); }


.chords-grid.reference-mode .chord-name {
    font-size: 0.75vw;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.2vw;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.04);
    padding: 0.1vw 0.4vw;
    border-radius: 4px;
    z-index: 2;
}
.dark-theme .chords-grid.reference-mode .chord-name {
    color: #bbb;
    background: rgba(255,255,255,0.05);
}

/* Reference Mode Micro Scaling */
.chords-grid.grid-dense .chord-item {
    width: 10%;
}
.chords-grid.reference-mode .chord-item {
    width: 95%;
    height: 95%;
    max-width: 8vw; /* Scale control */
    max-height: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: auto;
}

.chords-grid.reference-mode .chord-svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.chords-grid.reference-mode .chord-svg-container svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* The 1:1 Scale Rule */
    overflow: visible;
}

.reference-chord-label {
    font-size: 0.45vw !important;
    font-weight: 800 !important;
    color: #333;
    padding: 0.1vw 0;
    white-space: nowrap;
}



.dark-theme .reference-chord-label {
    color: #aaa;
    background: rgba(255,255,255,0.05);
}

/* Styled Letter Icons */
.letter-icon-style {
    font-size: 1.1vw !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: white !important;
    width: 2.5vw;
    height: 1.6vw;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.4);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}


.dark-theme .letter-icon-style {
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.1);
}

.letter-icon-style:hover {
    transform: scale(1.1);
}

/* Quality Headers as Pills */
.quality-header {
    width: 14%;
    text-align: center;
    font-size: 0.8vw;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 0.4vw 0.2vw;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Kids Mode Color Coding for Rows - ONLY in kids mode */
.kids-mode [data-root="C"] .root-note { background-color: #FF4136; color: white; }
.kids-mode [data-root="D"] .root-note { background-color: #FF851B; color: white; }
.kids-mode [data-root="E"] .root-note { background-color: #FFDC00; color: #333; }
.kids-mode [data-root="F"] .root-note { background-color: #2ECC40; color: white; }
.kids-mode [data-root="G"] .root-note { background-color: #0074D9; color: white; }
.kids-mode [data-root="A"] .root-note { background-color: #B10DC9; color: white; }
.kids-mode [data-root="B"] .root-note { background-color: #F012BE; color: white; }

/* Mood Coloring — subtle glow + border tint by chord quality */
.mood-mode [data-quality="major"]     .chord-svg-container { box-shadow: 0 0 0 2px rgba(255,190,50,0.45); border-radius: 6px; }
.mood-mode [data-quality="minor"]     .chord-svg-container { box-shadow: 0 0 0 2px rgba(90,110,255,0.5);  border-radius: 6px; }
.mood-mode [data-quality="dominant7"] .chord-svg-container { box-shadow: 0 0 0 2px rgba(255,110,30,0.5);  border-radius: 6px; }
.mood-mode [data-quality="major7"]    .chord-svg-container { box-shadow: 0 0 0 2px rgba(255,230,80,0.55); border-radius: 6px; }
.mood-mode [data-quality="minor7"]    .chord-svg-container { box-shadow: 0 0 0 2px rgba(50,200,220,0.5);  border-radius: 6px; }
.mood-mode [data-quality="diminished"] .chord-svg-container { box-shadow: 0 0 0 2px rgba(200,30,60,0.55);  border-radius: 6px; }
.mood-mode [data-quality="augmented"] .chord-svg-container { box-shadow: 0 0 0 2px rgba(0,210,120,0.5);   border-radius: 6px; }
.mood-mode [data-quality="suspended"] .chord-svg-container { box-shadow: 0 0 0 2px rgba(180,100,255,0.5); border-radius: 6px; }

/* Subtle background tint on the chord item itself */
.mood-mode [data-quality="major"]     { background: rgba(255,190,50,0.05); }
.mood-mode [data-quality="minor"]     { background: rgba(90,110,255,0.07); }
.mood-mode [data-quality="dominant7"] { background: rgba(255,110,30,0.06); }
.mood-mode [data-quality="major7"]    { background: rgba(255,230,80,0.06); }
.mood-mode [data-quality="minor7"]    { background: rgba(50,200,220,0.06); }
.mood-mode [data-quality="diminished"]{ background: rgba(200,30,60,0.07);  }
.mood-mode [data-quality="augmented"] { background: rgba(0,210,120,0.06);  }
.mood-mode [data-quality="suspended"] { background: rgba(180,100,255,0.06);}

.chord-list {
    display: flex;
    gap: 2%;
    padding: 2%;
    flex-wrap: wrap;
    align-items: center;
}

/* Game mode: 2×2 grid for 4 options */
.game-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
    gap: 4% !important;
    padding: 0 4% !important;
    width: 100%;
    box-sizing: border-box;
}

.game-options-grid .chord-item {
    width: 100% !important;
    max-width: none !important;
}

/* Game mode: in-poster toast feedback */
.game-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    padding: 1.2% 4%;
    border-radius: 12px;
    font-size: 4vw;
    font-weight: 800;
    letter-spacing: 0.02em;
    pointer-events: none;
    animation: game-toast-pop 1.2s ease forwards;
    z-index: 100;
}

.game-toast--correct {
    background: #b3ffab;
    color: #1a5c15;
}

@keyframes game-toast-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* Game mode title spans full width */
.chords-grid:has(.game-options-grid) .poster-custom-title {
    grid-column: 1 / -1;
    margin-bottom: 4% !important;
}

.chords-grid.reference-mode .chord-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* Matrix Column Headers */
.matrix-headers {
    display: grid;
    grid-template-columns: 6% repeat(6, 1fr); /* Fixed 7-column grid */
    width: 100%;
    background: #f8f9fa;
    border-bottom: 2px solid var(--accent);
    min-height: 2vw;
}


.dark-theme .matrix-headers {
    background: #1a1c23;
}

.quality-header-cell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quality-header {
    width: 85%;
    text-align: center;
    font-size: 0.7vw;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 0.3vw 0;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}



/* Theory Sidebar / Toolbox */
.theory-toolbox {
    position: absolute;
    right: 5%;
    top: 20%;
    width: 30%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2%;
    display: flex;
    flex-direction: column;
    gap: 1%;
    z-index: 5;
    opacity: 0.8;
}

.theory-title {
    font-size: 2vw;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 0.5%;
    margin-bottom: 0.5%;
    color: var(--accent);
}

/* Fretboard Note Map */
.fretboard-map {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 1%;
}

.map-string {
    display: flex;
    gap: 4px;
    align-items: center;
}

.map-note {
    width: 3%;
    height: 3%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    font-weight: 800;
    color: white;
    background: #333;
    border: 1px solid rgba(255,255,255,0.1);
}

.map-note.root { background: var(--accent); }

/* Kids Mode Map Colors */
.kids-mode .map-note[data-note="C"] { background: #FF4136; border-color: #FF4136; }
.kids-mode .map-note[data-note="D"] { background: #FF851B; border-color: #FF851B; }
.kids-mode .map-note[data-note="E"] { background: #FFDC00; border-color: #FFDC00; color: #333; }
.kids-mode .map-note[data-note="F"] { background: #2ECC40; border-color: #2ECC40; }
.kids-mode .map-note[data-note="G"] { background: #0074D9; border-color: #0074D9; }
.kids-mode .map-note[data-note="A"] { background: #B10DC9; border-color: #B10DC9; }
.kids-mode .map-note[data-note="B"] { background: #F012BE; border-color: #F012BE; }

/* Text styling */
.chord-name {
    font-size: 2.5vw;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.05em;
    color: inherit;
}

.dark-theme .chord-name {
    color: #fff;
}

/* Harmonic function label (Roman numerals) */
.chord-function-label {
    text-align: center;
    font-size: clamp(0.62rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #00d4aa;
    opacity: 0.85;
    line-height: 1;
    padding-bottom: 0.2em;
    font-variant-numeric: tabular-nums;
}

.grid-dense .chord-function-label {
    font-size: clamp(0.5rem, 0.7vw, 0.72rem);
}

/* Remove confusing format overrides */

/* Modal Popup Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 1rem;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.chord-modal {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    /* Use local container query for modal scaling */
    container-type: inline-size;
    container-name: modal;
}

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

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 0.5;
    padding: 10px;
    transition: color 0.2s;
    z-index: 10;
}

.modal-close:hover {
    color: white;
}

.modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

.modal-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white; /* Changed from gradient to pure white for clarity */
}

.modal-subtitle {
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 0.5rem;
}

.modal-chords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 3rem;
    justify-items: center;
}

.modal-chord-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 160px;
    background: rgba(255,255,255,0.03);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
    cursor: pointer;
}

.modal-chord-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}

.modal-chord-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.modal-chord-svg {
    width: 100%;
    color: inherit; 
    transition: color 0.3s;
}

/* 
========================================
FEATURE: KIDS COLOR CODING (Note-Mapping)
Research shows kids learn best when 
notes/roots are color-coded consistently. 
C=Red, D=Orange, E=Yellow, F=Green, G=Blue, A=Indigo, B=Violet
======================================== 
*/

.poster-content.kids-mode .chord-row[data-root="C"] .root-note { color: #FF4136; }
.poster-content.kids-mode .chord-row[data-root="C"] .chord-svg-container svg { color: #FF4136; }

.poster-content.kids-mode .chord-row[data-root="D"] .root-note { color: #FF851B; }
.poster-content.kids-mode .chord-row[data-root="D"] .chord-svg-container svg { color: #FF851B; }

.poster-content.kids-mode .chord-row[data-root="E"] .root-note { color: #FFDC00; }
.poster-content.kids-mode .chord-row[data-root="E"] .chord-svg-container svg { color: #FFDC00; }

.poster-content.kids-mode .chord-row[data-root="F"] .root-note { color: #2ECC40; }
.poster-content.kids-mode .chord-row[data-root="F"] .chord-svg-container svg { color: #2ECC40; }

.poster-content.kids-mode .chord-row[data-root="G"] .root-note { color: #0074D9; }
.poster-content.kids-mode .chord-row[data-root="G"] .chord-svg-container svg { color: #0074D9; }

.poster-content.kids-mode .chord-row[data-root="A"] .root-note { color: #B10DC9; }
.poster-content.kids-mode .chord-row[data-root="A"] .chord-svg-container svg { color: #B10DC9; }

.poster-content.kids-mode .chord-row[data-root="B"] .root-note { color: #F012BE; }
.poster-content.kids-mode .chord-row[data-root="B"] .chord-svg-container svg { color: #F012BE; }

/* In builder mode for kids */
.poster-content.kids-mode .chord-item[data-root="C"] .chord-svg-container svg { color: #FF4136 !important; }
.poster-content.kids-mode .chord-item[data-root="D"] .chord-svg-container svg { color: #FF851B !important; }
.poster-content.kids-mode .chord-item[data-root="E"] .chord-svg-container svg { color: #FFDC00 !important; }
.poster-content.kids-mode .chord-item[data-root="F"] .chord-svg-container svg { color: #2ECC40 !important; }
.poster-content.kids-mode .chord-item[data-root="G"] .chord-svg-container svg { color: #0074D9 !important; }
.poster-content.kids-mode .chord-item[data-root="A"] .chord-svg-container svg { color: #B10DC9 !important; }
.poster-content.kids-mode .chord-item[data-root="B"] .chord-svg-container svg { color: #F012BE !important; }

/* Keep title white in kids mode */
.poster-content.kids-mode .poster-custom-title { color: inherit; }

/* Reference Matrix Kids Colors */
.kids-mode .chord-row[data-root="C"] .root-note { background-color: #FF4136; color: white; }
.kids-mode .chord-row[data-root="D"] .root-note { background-color: #FF851B; color: white; }
.kids-mode .chord-row[data-root="E"] .root-note { background-color: #FFDC00; color: #333; }
.kids-mode .chord-row[data-root="F"] .root-note { background-color: #2ECC40; color: white; }
.kids-mode .chord-row[data-root="G"] .root-note { background-color: #0074D9; color: white; }
.kids-mode .chord-row[data-root="A"] .root-note { background-color: #B10DC9; color: white; }
.kids-mode .chord-row[data-root="B"] .root-note { background-color: #F012BE; color: white; }

/* Modal Kids specific colors */
.chord-modal.kids-mode-modal[data-modal-root="C"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="C"] .modal-chord-svg { color: #FF4136; }
.chord-modal.kids-mode-modal[data-modal-root="D"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="D"] .modal-chord-svg { color: #FF851B; }
.chord-modal.kids-mode-modal[data-modal-root="E"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="E"] .modal-chord-svg { color: #FFDC00; }
.chord-modal.kids-mode-modal[data-modal-root="F"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="F"] .modal-chord-svg { color: #2ECC40; }
.chord-modal.kids-mode-modal[data-modal-root="G"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="G"] .modal-chord-svg { color: #0074D9; }
.chord-modal.kids-mode-modal[data-modal-root="A"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="A"] .modal-chord-svg { color: #B10DC9; }
.chord-modal.kids-mode-modal[data-modal-root="B"] .modal-title, .chord-modal.kids-mode-modal[data-modal-root="B"] .modal-chord-svg { color: #F012BE; }

/* Toggle Slider Styling for Kids Mode */
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* ── Boomwhacker root-colour stripe (K4) ──────────────────────────────
   Standard Boomwhackers® farver som en tynd top-stripe på hvert akkord-blok.
   Funktionsfarver oven på tokens (som akkord-farverne) — rører ikke paletlen.
   data-root attributten sættes af createChordElement() i script.js.
*/
.chord-item[data-root] { border-top: 3px solid transparent; }
.chord-item[data-root="C"]  { border-top-color: #e91e8e; }
.chord-item[data-root="C#"] { border-top-color: #ff5c2e; }
.chord-item[data-root="Db"] { border-top-color: #ff5c2e; }
.chord-item[data-root="D"]  { border-top-color: #ff8c00; }
.chord-item[data-root="D#"] { border-top-color: #d4a800; }
.chord-item[data-root="Eb"] { border-top-color: #d4a800; }
.chord-item[data-root="E"]  { border-top-color: #f0d800; }
.chord-item[data-root="F"]  { border-top-color: #5eb52e; }
.chord-item[data-root="F#"] { border-top-color: #22b8c2; }
.chord-item[data-root="Gb"] { border-top-color: #22b8c2; }
.chord-item[data-root="G"]  { border-top-color: #1a7032; }
.chord-item[data-root="G#"] { border-top-color: #007a6a; }
.chord-item[data-root="Ab"] { border-top-color: #007a6a; }
.chord-item[data-root="A"]  { border-top-color: #1155aa; }
.chord-item[data-root="A#"] { border-top-color: #8820aa; }
.chord-item[data-root="Bb"] { border-top-color: #8820aa; }
.chord-item[data-root="B"]  { border-top-color: #4a1080; }
.toggle-switch-wrapper span {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #666 0%, #444 100%);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}
.slider:hover {
    border-color: var(--accent);
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
input:checked + .slider {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
    border-color: transparent;
}
input:checked + .slider:before {
    transform: translateX(24px);
}
input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

.toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
input:checked + .slider:before {
    background-color: #fff;
    transform: translateX(20px);
}

/* SVGs styling base */
.chord-svg-container {
    width: 100%;
}

/* Brand tag */
.brand-signature {
    position: absolute;
    bottom: 2%;
    right: 2%;
    font-size: 0.6vw;
    font-weight: 400;
    z-index: 4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.3;
    pointer-events: none;
    padding-top: 0;
    border-top: none;
}

/* Dynamic Themes - Optimized for Clarity */
.neon-theme {
    color: #111;
    --accent-rgb: 0, 212, 170;
}
.neon-theme .chord-svg-container svg {
    color: #0077b6 !important; /* Blue with strong contrast */
    fill: #0077b6 !important;
}

.warm-theme {
    color: #111;
    --accent-rgb: 246, 211, 101;
}
.warm-theme .chord-svg-container svg {
    color: #d84315; /* Deep orange for visible contrast */
}

.purple-theme {
    color: #111;
    --accent-rgb: 124, 92, 255;
}
.purple-theme .chord-svg-container svg {
    color: #6200ea; /* True purple rather than hard-to-read green */
}

.classic-theme {
    color: #000;
}
.classic-theme .chord-svg-container svg {
    color: #000;
}

.dark-theme {
    color: #f0f2f5;
    --accent-rgb: 246, 211, 101;
}
.dark-theme .chord-svg-container svg {
    color: #ffffff;
}

/* Premium Theme with Mesh Gradient Background */
.premium-theme {
    color: #111;
    --accent-rgb: 102, 126, 234;
}
.premium-theme .poster-background {
    background-image: url('assets/ui/bg_mesh_gradient.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: none;
}
.premium-theme .chord-svg-container svg {
    color: #2d3436;
}
.premium-theme .root-note {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism Effect for Premium UI */
.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glassmorphism-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* Animated chord pulse for sequencer */
@keyframes chordPulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px 10px rgba(102, 126, 234, 0.2);
        transform: scale(1.02);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
        transform: scale(1);
    }
}

.chord-item.playing {
    animation: chordPulse 1s ease-in-out infinite;
}

/* Piano key press animation */
@keyframes keyPress {
    0% { transform: translateY(0); }
    50% { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

.piano-key.pressed {
    animation: keyPress 0.15s ease-out;
}

/* Guitar string vibration */
@keyframes stringVibrate {
    0% { transform: skewX(0deg); }
    25% { transform: skewX(2deg); }
    75% { transform: skewX(-2deg); }
    100% { transform: skewX(0deg); }
}

.guitar-string.vibrating {
    animation: stringVibrate 0.3s ease-in-out;
}

/* Mode transition flip animation */
@keyframes flipIn {
    0% { 
        transform: perspective(1000px) rotateY(90deg);
        opacity: 0;
    }
    100% { 
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
}

.chords-grid.mode-transition {
    animation: flipIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Button micro-interactions */
button:hover {
    transform: scale(1.02);
}

button:active {
    transform: scale(0.98);
}

/* --- MUSIC LAB CREATIVE ANIMATIONS --- */

/* 1. Floating Musical Notes Background */
.music-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.note-particle {
    position: absolute;
    color: var(--accent);
    opacity: 0;
    font-size: 2rem;
    animation: floatNote 10s linear infinite;
    filter: blur(1px);
}

@keyframes floatNote {
    0% {
        transform: translateY(110vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.2;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(-10vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes successPop {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(720deg);
        opacity: 0;
    }
}

/* 2. Equalizer Visualizer Bars */
.visualizer-container {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.visualizer-container.visualizer-active {
    display: flex;
}

.vis-bar {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.visualizer-active .vis-bar {
    animation: eqBounce 0.8s ease-in-out infinite;
}

.vis-bar:nth-child(2) { animation-delay: 0.1s; }
.vis-bar:nth-child(3) { animation-delay: 0.2s; }
.vis-bar:nth-child(4) { animation-delay: 0.3s; }
.vis-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes eqBounce {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

.seq-section-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    min-height: 1.2em;
    padding: 0.15rem 0.25rem 0;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seq-arrangement-info {
    font-size: 0.62rem;
    color: rgba(20, 184, 166, 0.72);
    min-height: 1em;
    padding: 0 0.25rem 0.2rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#beatlab-seed-status[data-state="error"],
.beatlab-connect-status[data-state="error"] {
    color: rgba(255, 122, 122, 0.85);
}

#beatlab-seed-status[data-state="ready"],
.beatlab-connect-status[data-state="ready"] {
    color: rgba(20, 184, 166, 0.88);
}


/* 3. Metronome Pendulum */
.metronome-visual {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
}

.pendulum {
    width: 2px;
    height: 30px;
    background: #f6d365;
    transform-origin: top center;
    position: absolute;
    top: 5px;
}

.pendulum.swinging {
    animation: swing 0.6s ease-in-out infinite alternate;
}

.pendulum::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f6d365;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(246, 211, 101, 0.5);
}

@keyframes swing {
    from { transform: rotate(-30deg); }
    to { transform: rotate(30deg); }
}

/* 4. Glow Text Effect */
.glow-text {
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5), 0 0 20px rgba(79, 172, 254, 0.2);
}

/* 5. Playing Aura for Workspace */
.workspace-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(79, 172, 254, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
    pointer-events: none;
}

.workspace.playing .workspace-aura {
    opacity: 1;
    animation: auraPulse 4s ease-in-out infinite;
}

@keyframes auraPulse {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.2); opacity: 0.2; }
}

/* Micro-animations for enhanced UX */

/* Subtle pulse for active elements */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Smooth fade in for modals */
@keyframes smoothFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* App notification toast */
@keyframes notifSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.app-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: #000;
    padding: 0.8rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 2000;
    max-width: min(420px, calc(100vw - 40px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    animation: notifSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) forwards;
    pointer-events: none;
}
.app-notification.fade-out {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Shimmer effect for loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Glow pulse for active buttons */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px var(--accent); }
    50% { box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent); }
}

/* Apply shimmer to loading elements */
.loading-shimmer {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.05) 25%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Smooth transitions for interactive UI elements */
button, .control-group, select, input[type="checkbox"] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced focus states */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Poster wrapper subtle zoom on hover */
.poster-wrapper:hover {
    transform: scale(1.01);
}

/* Chord items gentle lift on hover */
.chord-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Modal smooth appearance */
.chord-modal {
    animation: smoothFadeIn 0.3s ease-out;
}

/* Sequencer steps subtle glow when active */
.sequencer-step.active {
    animation: glowPulse 2s ease-in-out infinite;
}


/* Song Library Modal */
.song-library-modal {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .song-library-modal {
    transform: translateY(0);
}

.song-library-header {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.song-library-header .modal-title {
    font-size: 1.5rem;
}

.song-library-controls {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(20, 23, 30, 0.98), rgba(20, 23, 30, 0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0 -0.25rem 0.8rem;
    padding: 0 0.25rem 0.55rem;
}

.song-search-box {
    margin-bottom: 1rem;
    flex-shrink: 0;
    position: relative;
}

.song-search-clear {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.song-search-clear:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.song-search-box input {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}

.song-search-box input:focus {
    border-color: var(--accent);
}

.song-search-box input::placeholder {
    color: var(--text-muted);
}

/* Song Instrument Select */
.song-instrument-select {
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.song-instrument-select label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    display: inline !important;
}

.song-instrument-select select {
    flex: 1;
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Category Filters */
.category-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.category-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    width: auto;
    min-width: 0;
    min-height: 34px;
    flex: 0 0 auto;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.category-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 600;
}

/* Difficulty Filter */
.difficulty-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.difficulty-filter > span {
    flex: 0 0 auto;
}

.diff-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    width: auto;
    min-width: 0;
    min-height: 32px;
    flex: 0 0 auto;
}

.diff-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.diff-btn.active {
    background: rgba(246, 211, 101, 0.2);
    border-color: #f6d365;
    color: #f6d365;
}

.song-active-filters {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.song-active-filters.active {
    display: flex;
}

.song-active-filter-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.song-filter-chip {
    font-size: 0.66rem;
    color: #bfffee;
    border: 1px solid rgba(0, 212, 170, 0.35);
    background: rgba(0, 212, 170, 0.14);
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: auto;
    flex: 0 0 auto;
}
.song-filter-chip:hover {
    background: rgba(0, 212, 170, 0.28);
    border-color: rgba(0, 212, 170, 0.7);
    color: #fff;
}

.song-clear-filters-btn {
    width: auto;
    min-width: 0;
    padding: 0.26rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffd7b7;
    border: 1px solid rgba(255, 133, 27, 0.35);
    background: rgba(255, 133, 27, 0.15);
    flex: 0 0 auto;
}

.song-clear-filters-btn:hover {
    background: rgba(255, 133, 27, 0.24);
    border-color: rgba(255, 133, 27, 0.55);
}

/* Song List - Scrollable */
.song-list {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

.song-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.25rem 0.5rem;
    min-height: 1.5rem;
}

.song-sort-btn {
    width: auto;
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: background 0.12s, color 0.12s;
}
.song-sort-btn:hover, .song-sort-btn.sort-active {
    background: rgba(0,212,170,0.12);
    border-color: rgba(0,212,170,0.35);
    color: var(--accent, #00d4aa);
}

.song-count-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
}

.song-list-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.song-list-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.song-list-empty-hint {
    font-size: 0.78rem;
    margin-top: 0.4rem;
    opacity: 0.6;
}

.song-item.is-active {
    background: rgba(0, 212, 170, 0.06);
    border-color: rgba(0, 212, 170, 0.25);
    border-left-color: var(--accent, #00d4aa) !important;
}
.song-active-badge {
    font-size: 0.62rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: rgba(0, 212, 170, 0.18);
    border: 1px solid rgba(0, 212, 170, 0.4);
    color: #a0ffe8;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.song-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    animation: songCardIn 0.28s ease-out forwards;
    animation-delay: calc(var(--song-index, 0) * 22ms);
}

.song-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 170, 0.3);
    transform: translateX(4px);
}

.song-item[data-difficulty="beginner"] { border-left-color: rgba(46, 204, 64, 0.9); }
.song-item[data-difficulty="easy"] { border-left-color: rgba(0, 212, 170, 0.9); }
.song-item[data-difficulty="medium"] { border-left-color: rgba(246, 211, 101, 0.95); }
.song-item[data-difficulty="hard"] { border-left-color: rgba(255, 133, 27, 0.95); }
.song-item[data-difficulty="expert"] { border-left-color: rgba(255, 71, 87, 0.95); }

@keyframes songCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .song-item {
        animation: none;
        opacity: 1;
    }
}

.song-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.song-title {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
}

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

.song-key-tempo {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.02em;
}

.song-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    max-width: 50%;
}

.song-difficulty {
    font-size: 0.75rem;
    color: #f6d365;
}

.song-difficulty-badge {
    font-size: 0.65rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.song-difficulty-badge.diff-beginner {
    background: rgba(46, 204, 64, 0.2);
    border-color: rgba(46, 204, 64, 0.45);
    color: #c7ffd0;
}

.song-difficulty-badge.diff-easy {
    background: rgba(0, 212, 170, 0.2);
    border-color: rgba(0, 212, 170, 0.4);
    color: #bfffee;
}

.song-difficulty-badge.diff-medium {
    background: rgba(246, 211, 101, 0.2);
    border-color: rgba(246, 211, 101, 0.45);
    color: #fff0b2;
}

.song-difficulty-badge.diff-hard {
    background: rgba(255, 133, 27, 0.2);
    border-color: rgba(255, 133, 27, 0.45);
    color: #ffd7b7;
}

.song-difficulty-badge.diff-expert {
    background: rgba(255, 71, 87, 0.2);
    border-color: rgba(255, 71, 87, 0.45);
    color: #ffd0d6;
}

.song-chords {
    font-size: 0.75rem;
    color: var(--accent);
    background: rgba(0, 212, 170, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-kids-badge {
    background: #ff9ff3;
    color: #000;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
}

.song-subgenre-badge {
    background: rgba(124, 92, 255, 0.2);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #d9ceff;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Scrollbar for song list */
.song-list::-webkit-scrollbar {
    width: 6px;
}

.song-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.song-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.song-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .song-library-modal {
        padding: 1rem;
        max-height: 90vh;
    }

    .song-library-controls {
        margin: 0 -0.1rem 0.65rem;
        padding: 0 0.1rem 0.45rem;
    }

    .category-filters,
    .difficulty-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.35rem;
        padding-right: 1.5rem;
        scrollbar-width: thin;
        mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
    }

    .category-filters::-webkit-scrollbar,
    .difficulty-filter::-webkit-scrollbar {
        height: 4px;
    }

    .category-filters::-webkit-scrollbar-thumb,
    .difficulty-filter::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16);
        border-radius: 99px;
    }

    .song-active-filters {
        align-items: flex-start;
        flex-direction: column;
    }

    .song-clear-filters-btn {
        align-self: flex-start;
    }
    
    .category-filters {
        gap: 0.375rem;
    }
    
    .category-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .song-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .song-info {
        width: 100%;
        min-width: 0;
    }

    .song-title {
        font-size: 0.88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .song-artist {
        font-size: 0.74rem;
    }
    
    .song-meta {
        width: 100%;
        justify-content: space-between;
        max-width: 100%;
        gap: 0.45rem;
    }

    .song-chords {
        max-width: 100%;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar {
        width: 300px;
        min-width: 260px;
        padding: 1.25rem 0.75rem;
    }
    
    .workspace {
        padding: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        width: 280px;
        min-width: 240px;
        padding: 1rem 0.5rem;
    }
    
    .workspace {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    
    /* Show mobile menu button */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        max-height: 100vh;
        z-index: 99;
        transform: translateX(-100%);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        padding: 4rem 1rem 1rem 1rem;
        border-radius: 0 16px 16px 0;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 98;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    .workspace {
        padding: 3.5rem 0.5rem 0.5rem 0.5rem;
        min-height: 55vh;
        width: 100%;
    }
    
    .poster-wrapper {
        max-height: 50vh;
        width: 100%;
    }
    
    button {
        padding: 0.875rem;
        font-size: 0.9rem;
    }
    
    .tool-card summary {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    
    .tool-card .card-content {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .sidebar {
        max-height: 40vh;
    }
    
    .poster-wrapper {
        max-height: 45vh;
    }
    
    .control-group label {
        font-size: 0.65rem;
    }
    
    select {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .color-btn {
        width: 28px;
        height: 28px;
    }
    
    .action-buttons {
        gap: 0.5rem;
    }
}

/* Print Styles */
@media print {
    @page { 
        size: A4 portrait; 
        margin: 0; 
    }
    body { 
        background: #fff; 
        margin: 0; 
        padding: 0; 
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
        overflow: visible;
    }
    html {
        overflow: visible;
    }
    .sidebar { 
        display: none !important; 
    }
    .app-container {
        display: block;
        height: auto;
        overflow: visible;
    }
    .workspace {
        padding: 0;
        background: none;
        display: block;
        overflow: visible;
    }
    .poster-wrapper {
        box-shadow: none;
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        transform: none !important;
        overflow: visible;
    }
    .poster {
        overflow: visible;
    }
    .poster-content {
        overflow: visible;
    }
    .chords-grid {
        overflow: visible;
    }
    .chord-row {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .chord-item {
        break-inside: avoid;
    }
    
    /* Worksheet Mode for Gamification Printouts */
    .game-mode-item .chord-name {
        color: transparent !important; /* Hide the question mark */
        border-bottom: 3px solid #000;
        width: 80%;
        height: 3%;
        margin: 0 auto;
    }
}

/* End of file cleanup */

/* ═══════════════════════════════════════════════
   APP PANEL SIDEBAR — New design language
   ═══════════════════════════════════════════════ */

/* Brand header */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.15rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0.1rem;
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.sidebar-brand-mark {
    font-size: 1.1rem;
    color: var(--accent);
    flex-shrink: 0;
}
.sidebar-app-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}
.sidebar-app-sub {
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Hero CTA */
.sidebar-hero {
    padding: 0 0 0.5rem;
}
.hero-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #00d4aa 0%, #7c5cff 100%);
    color: #000;
    font-weight: 800;
    font-size: 0.82rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.hero-cta-btn:hover {
    filter: brightness(1.08);
}
.hero-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.3rem;
}

/* Panel section card */
.panel-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 0.65rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.panel-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    display: block;
    margin-bottom: 0.1rem;
}

/* Field rows */
.field-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.field-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}

/* App-style select */
.app-select {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.app-select:hover {
    border-color: rgba(255,255,255,0.2);
}
.app-select:focus {
    border-color: rgba(0,212,170,0.5);
}
.app-select option {
    background: #1a2035;
    color: var(--text-primary);
}

/* App-style text input */
.app-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.app-input:focus {
    border-color: rgba(0,212,170,0.5);
}

/* Checkbox row */
.app-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0.1rem 0;
}
.app-checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}

/* Mode button grid */
.mode-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}
.mode-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}
.mode-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.mode-btn.active {
    background: rgba(0,212,170,0.12);
    border-color: rgba(0,212,170,0.45);
    color: #00d4aa;
}

/* Advanced toggles */
.advanced-toggles {
    margin-top: 0.1rem;
}
.advanced-toggles > summary {
    font-size: 0.67rem;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    list-style: none;
    padding: 0.1rem 0;
}
.advanced-toggles > summary:hover {
    color: rgba(255,255,255,0.5);
}
.advanced-toggles-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0 0.1rem 0.5rem;
}

/* Transpose control row */
.transpose-row {
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.25rem;
}
.transpose-ctrl {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.transpose-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}
.transpose-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.transpose-display {
    min-width: 2rem;
    text-align: center;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.45);
}
.transpose-display.transpose-active {
    color: var(--accent, #00d4aa);
    font-weight: 700;
}
.transpose-reset-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.25);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.1s;
}
.transpose-reset-btn:hover {
    color: rgba(255,255,255,0.6);
}

.transpose-key-hint {
    font-size: 0.68rem;
    color: var(--accent, #00d4aa);
    opacity: 0.8;
    letter-spacing: 0.03em;
    padding-left: 0.1rem;
    margin-top: 0.1rem;
    display: block;
}

/* L27: transponerings-badge + capo-hint på plakaten */
.transpose-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font: 700 0.7rem/1.4 var(--font-ui, sans-serif);
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}
.capo-hint {
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 10;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.8);
    font: 600 0.65rem/1.4 var(--font-ui, sans-serif);
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}
@media print {
    .transpose-badge, .capo-hint {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Tool cards (collapsible panels inside tools-section) */
.tool-card {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
}
.tool-card > summary {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    list-style: none;
    background: rgba(255,255,255,0.03);
    transition: background 0.12s, color 0.12s;
}
.tool-card > summary:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
}
.tool-card[open] > summary {
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tool-card .card-content {
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Chord add layout */
.chord-add-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}
.chord-add-actions {
    display: flex;
    gap: 0.35rem;
}

/* Sequencer box */
.sequencer-box {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tempo-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tempo-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}
.tempo-val-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    text-align: right;
}

/* Builder action row */
.builder-action-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.builder-action-row .btn-tool-ghost {
    flex: 1;
    min-width: 0;
}

/* Game dashboard */
.game-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.score-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
}
.score-val, .streak-val {
    color: var(--accent);
    font-weight: 700;
}

/* Tool buttons */
.btn-tool-primary {
    background: rgba(20,184,166,0.15);
    border: 1px solid rgba(20,184,166,0.4);
    color: var(--accent);
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-tool-primary:hover {
    background: rgba(20,184,166,0.25);
    border-color: rgba(20,184,166,0.7);
}
.btn-tool-secondary {
    background: rgba(201,106,61,0.12);
    border: 1px solid rgba(201,106,61,0.45);
    color: #f3d3bd;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-tool-secondary:hover {
    background: rgba(201,106,61,0.22);
    border-color: rgba(201,106,61,0.75);
}
.btn-tool-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.55);
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-tool-ghost:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.25);
}
.btn-tool-ghost.btn-share {
    color: rgba(100,200,255,0.7);
    border-color: rgba(100,200,255,0.3);
}
.btn-tool-ghost.btn-danger-text {
    color: rgba(255,80,80,0.7);
    border-color: rgba(255,80,80,0.25);
}
.btn-tool-ghost.btn-danger-text:hover {
    background: rgba(255,80,80,0.08);
    color: rgba(255,80,80,0.9);
}
.btn-tool-danger {
    background: rgba(255,80,80,0.1);
    border: 1px solid rgba(255,80,80,0.3);
    color: rgba(255,80,80,0.75);
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-tool-danger:hover {
    background: rgba(255,80,80,0.18);
}

/* Spacer */
.sidebar-spacer {
    flex: 1;
    min-height: 0.5rem;
}

/* Footer export buttons */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.25rem;
}
.btn-export-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #00d4aa 0%, #0097ff 100%);
    color: #000;
    font-weight: 800;
    font-size: 0.78rem;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: filter 0.15s;
}
.btn-export-primary:hover {
    filter: brightness(1.08);
}
.btn-export-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.65);
    font-size: 0.76rem;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-export-secondary:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.footer-util-row {
    display: flex;
    gap: 0.35rem;
}
.btn-footer-util {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.35);
    border-radius: 5px;
    font-size: 0.67rem;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-footer-util:hover {
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.2);
}

/* Pulse button — subtle, not distracting */
.pulse-btn {
    animation: none;
}

/* Sequencer play button state variants */
#seq-play-btn {
    background: linear-gradient(45deg, #f6d365, #fda085);
    transition: background 0.2s ease, opacity 0.15s;
}
#seq-play-btn[data-state="counting"] {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
}
#seq-play-btn[data-state="playing"] {
    background: linear-gradient(45deg, #ff6b6b, #ff4757);
}
#seq-play-btn:hover {
    opacity: 0.88;
}

/* ══════════════════════════════════════════
   BEAT LAB CONNECT PANEL
   ══════════════════════════════════════════ */
.beatlab-connect-panel {
    margin: 0.55rem 0 0.25rem;
    border-radius: 8px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.07) 0%,
        rgba(15, 23, 32, 0.6) 100%);
    padding: 0.65rem 0.75rem 0.6rem;
    position: relative;
    overflow: hidden;
}
.beatlab-connect-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    border-left: 3px solid rgba(20, 184, 166, 0.7);
    border-radius: 8px 0 0 8px;
    pointer-events: none;
}

.beatlab-connect-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}
.beatlab-connect-icon {
    color: var(--accent);
    flex-shrink: 0;
    opacity: 0.9;
}
.beatlab-connect-header > span:first-of-type {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.beatlab-connect-badge {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(20, 184, 166, 0.15);
    color: rgba(20, 184, 166, 0.75);
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
    flex-shrink: 1;
}
.beatlab-connect-desc {
    font-size: 0.67rem;
    color: rgba(200, 220, 230, 0.6);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.beatlab-connect-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    justify-content: center;
    padding: 0.45rem 0.75rem;
    background: linear-gradient(90deg,
        rgba(20, 184, 166, 0.18) 0%,
        rgba(20, 184, 166, 0.10) 100%);
    border: 1px solid rgba(20, 184, 166, 0.5);
    color: rgba(20, 184, 166, 0.95);
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.beatlab-connect-btn:hover {
    background: linear-gradient(90deg,
        rgba(20, 184, 166, 0.28) 0%,
        rgba(20, 184, 166, 0.18) 100%);
    border-color: rgba(20, 184, 166, 0.8);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.18);
}
.beatlab-connect-btn:active {
    transform: translateY(1px);
}
.beatlab-connect-status {
    margin-top: 0.35rem;
    font-size: 0.62rem;
    min-height: 1em;
    padding: 0 0.1rem;
    letter-spacing: 0.03em;
    color: rgba(20, 184, 166, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Band Engine panel variant — terracotta accent (CSL-brand; afløser tidligere
   lilla der brød design-gaten: "ingen lilla som identitet"). Spejler Beat Lab-
   panelets teal-mønster, blot i terracotta, så de to destinationer adskilles. */
.band-engine-panel {
    border-color: rgba(201, 106, 61, 0.35);
    background: linear-gradient(135deg,
        rgba(201, 106, 61, 0.08) 0%,
        rgba(15, 23, 32, 0.6) 100%);
}
.band-engine-panel::before {
    border-left-color: rgba(201, 106, 61, 0.75);
}
.band-engine-panel .beatlab-connect-header > span:first-of-type,
.band-engine-panel .beatlab-connect-icon {
    color: var(--accent-secondary);
}
.band-engine-panel .beatlab-connect-badge {
    background: rgba(201, 106, 61, 0.15);
    color: rgba(201, 106, 61, 0.95);
    border-color: rgba(201, 106, 61, 0.28);
}
/* Band Engine-knap: terracotta-variant af .beatlab-connect-btn (afløser inline
   lilla i index.html), samme prominens/layout som Beat Lab-knappen. */
.band-engine-panel .beatlab-connect-btn {
    background: linear-gradient(90deg, rgba(201, 106, 61, 0.18) 0%, rgba(201, 106, 61, 0.10) 100%);
    border-color: rgba(201, 106, 61, 0.5);
    color: rgba(201, 106, 61, 0.95);
}
.band-engine-panel .beatlab-connect-btn:hover {
    background: linear-gradient(90deg, rgba(201, 106, 61, 0.28) 0%, rgba(201, 106, 61, 0.18) 100%);
    border-color: rgba(201, 106, 61, 0.8);
    box-shadow: 0 0 12px rgba(201, 106, 61, 0.18);
}
.band-engine-panel .beatlab-connect-status[data-state="ready"] {
    color: rgba(201, 106, 61, 0.88);
}
    transition: color 0.2s;
}
.beatlab-connect-status[data-state="ready"] {
    color: rgba(20, 184, 166, 0.88);
}
.beatlab-connect-status[data-state="error"] {
    color: rgba(255, 110, 110, 0.85);
}