/* =========================================================
   Note Mentor — UI
   ========================================================= */

:root {
    --bg: #f2ecdb;
    --bg-elevated: #fffcf3;
    --bg-soft: #ece3cc;
    --bg-muted: #e3d7ba;
    --ink: #2b2420;
    --ink-soft: #5c5044;
    --ink-faint: #8a7d6a;
    --line: #d6c8a8;
    --line-soft: #e4d9bd;
    --line-strong: #c9b483;
    --accent: #a5762f;
    --accent-rgb: 165, 118, 47;
    --accent-hover: #8a611f;
    --accent-soft: #f1e3bf;
    --accent-deep: #6b4a18;
    --accent-deep-rgb: 107, 74, 24;
    --accent-on-dark: #e0b96a;
    --accent-on-dark-rgb: 224, 185, 106;
    --good: #3f6b46;
    --good-rgb: 63, 107, 70;
    --good-soft: #e3ecdf;
    --good-deep: #2c4f30;
    --good-on-dark: #a7c9a0;
    --good-on-dark-rgb: 167, 201, 160;
    --bad: #8c3a2b;
    --bad-rgb: 140, 58, 43;
    --bad-soft: #f3e0d8;
    --bad-deep: #6b2a1e;
    --warn: #b8841f;
    --warn-soft: #f6ecd3;
    --warn-deep: #8a5f13;
    --target: #c9922f;
    --disabled-ink: #9c8f78;
    --disabled-bg: #e6dcc4;
    --disabled-line: #d3c4a3;
    --paper-halo: #fff;
    --paper-1: #fdfbf3;
    --paper-2: #fffcf3;
    --piano-panel-1: #f1e9d4;
    --piano-panel-2: #e6dcbf;
    --practice-panel-top: #fdf9ee;
    --key-white-1: #fffcf3;
    --key-white-2: #f5efe0;
    --key-white-3: #ebe2cc;
    --key-white-border: #6b5f4e;
    --key-white-active: #e3d9c2;
    --key-black-1: #2e2a24;
    --key-black-2: #161310;
    --key-black-border: #000;
    --key-black-active: #241f1a;
    --key-target-white-1: #e3c88a;
    --key-target-white-2: #c9922f;
    --key-target-white-border: #8a611f;
    --key-target-black-1: #caa056;
    --key-target-black-2: #8a611f;
    --key-target-black-border: #4a3110;
    --key-correct-white-1: #b9d8b0;
    --key-correct-white-2: #3f6b46;
    --key-correct-white-border: #2c4f30;
    --key-correct-black-1: #548a4f;
    --key-correct-black-2: #2c4f30;
    --key-wrong-white-1: #e3a89a;
    --key-wrong-white-2: #8c3a2b;
    --key-wrong-white-border: #6b2a1e;
    --key-wrong-black-1: #b97b66;
    --key-wrong-black-2: #8c3a2b;
    --key-timing-white-1: #f0d190;
    --key-timing-white-2: #b8841f;
    --key-timing-white-border: #8a5f13;
    --key-timing-black-1: #d9a53e;
    --key-timing-black-2: #96650f;
    --shadow-sm: 0 1px 2px rgba(43, 36, 32, 0.07);
    --shadow: 0 4px 16px rgba(43, 36, 32, 0.1), 0 1px 3px rgba(43, 36, 32, 0.06);
    --shadow-lg: 0 12px 40px rgba(43, 36, 32, 0.14);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-display: "Space Grotesk", var(--font);
    --mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --max: 1120px;
    --header-h: auto;
}

/* ---------- Themes ----------
   data-theme="warm"     — standaard (warme huisstijl)
   data-theme="original" — de originele blauwe kantoorstijl
   data-theme="dark"     — donker en gedimd, voor 's avonds oefenen
   De tokens hierboven in :root zijn de "warm"-waarden; deze twee blokken
   overschrijven dezelfde tokens zodra <html data-theme="..."> gezet wordt. */
html[data-theme="original"] {
    --bg: #eef1f6;
    --bg-elevated: #ffffff;
    --bg-soft: #f5f7fb;
    --bg-muted: #e8edf5;
    --ink: #1a2332;
    --ink-soft: #4a5568;
    --ink-faint: #7a8699;
    --line: #d5dde8;
    --line-soft: #e6ebf2;
    --line-strong: #b9c6db;
    --accent: #3b6fd4;
    --accent-rgb: 59, 111, 212;
    --accent-hover: #2f5bb5;
    --accent-soft: #e8f0fc;
    --accent-deep: #1e4a9e;
    --accent-deep-rgb: 30, 74, 158;
    --accent-on-dark: #8fb8ef;
    --accent-on-dark-rgb: 143, 184, 239;
    --good: #1f8f4e;
    --good-rgb: 31, 143, 78;
    --good-soft: #e6f6ec;
    --good-deep: #145c32;
    --good-on-dark: #8fd6ac;
    --good-on-dark-rgb: 143, 214, 172;
    --bad: #c62828;
    --bad-rgb: 198, 40, 40;
    --bad-soft: #fdecea;
    --bad-deep: #8e1c1c;
    --warn: #d97706;
    --warn-soft: #fff7ed;
    --warn-deep: #a35a00;
    --target: #4a90d9;
    --disabled-ink: #94a0b3;
    --disabled-bg: #e3e8f0;
    --disabled-line: #cdd6e3;
    --paper-halo: #fff;
    --paper-1: #ffffff;
    --paper-2: #fafcff;
    --piano-panel-1: #eef2f9;
    --piano-panel-2: #e3e9f3;
    --practice-panel-top: #f7f9fc;
    --key-white-1: #ffffff;
    --key-white-2: #f2f5fa;
    --key-white-3: #e3e9f2;
    --key-white-border: #5a6270;
    --key-white-active: #dbe2ec;
    --key-black-1: #2b2f3a;
    --key-black-2: #10131a;
    --key-black-border: #000;
    --key-black-active: #1a1d24;
    --key-target-white-1: #a9cdf0;
    --key-target-white-2: #4a90d9;
    --key-target-white-border: #2f6bb0;
    --key-target-black-1: #6fa8d8;
    --key-target-black-2: #2f6bb0;
    --key-target-black-border: #1c4a80;
    --key-correct-white-1: #a9dfc0;
    --key-correct-white-2: #1f8f4e;
    --key-correct-white-border: #145c32;
    --key-correct-black-1: #4fae76;
    --key-correct-black-2: #145c32;
    --key-wrong-white-1: #f0aca0;
    --key-wrong-white-2: #c62828;
    --key-wrong-white-border: #8e1c1c;
    --key-wrong-black-1: #d97164;
    --key-wrong-black-2: #8e1c1c;
    --key-timing-white-1: #f6d9a0;
    --key-timing-white-2: #d97706;
    --key-timing-white-border: #a35a00;
    --key-timing-black-1: #e6ae4a;
    --key-timing-black-2: #a35a00;
    --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.05);
    --shadow: 0 4px 16px rgba(26, 35, 50, 0.07), 0 1px 3px rgba(26, 35, 50, 0.04);
    --shadow-lg: 0 12px 40px rgba(26, 35, 50, 0.1);
    --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-display: var(--font);
}

html[data-theme="dark"] {
    --bg: #17140f;
    --bg-elevated: #241f17;
    --bg-soft: #1c1811;
    --bg-muted: #292219;
    --ink: #f0e6d2;
    --ink-soft: #c4b79b;
    --ink-faint: #8d8170;
    --line: #3a3226;
    --line-soft: #2c261c;
    --line-strong: #4a4030;
    --accent: #d9a441;
    --accent-rgb: 217, 164, 65;
    --accent-hover: #e8b862;
    --accent-soft: #3a2f18;
    --accent-deep: #f0c878;
    --accent-deep-rgb: 240, 200, 120;
    --accent-on-dark: #f0c878;
    --accent-on-dark-rgb: 240, 200, 120;
    --good: #6fbf7f;
    --good-rgb: 111, 191, 127;
    --good-soft: #203024;
    --good-deep: #9fd9ac;
    --good-on-dark: #9fd9ac;
    --good-on-dark-rgb: 159, 217, 172;
    --bad: #e0836b;
    --bad-rgb: 224, 131, 107;
    --bad-soft: #3a231c;
    --bad-deep: #f0a793;
    --warn: #e0ab52;
    --warn-soft: #362c18;
    --warn-deep: #f0c878;
    --target: #e8b862;
    --disabled-ink: #6b6153;
    --disabled-bg: #221d16;
    --disabled-line: #332c21;
    --paper-halo: #17140f;
    --paper-1: #241f17;
    --paper-2: #1c1811;
    --piano-panel-1: #221d16;
    --piano-panel-2: #1a160f;
    --practice-panel-top: #221d16;
    --key-white-1: #e8ddc4;
    --key-white-2: #cbb98f;
    --key-white-3: #a9976c;
    --key-white-border: #2b2016;
    --key-white-active: #b9a577;
    --key-black-1: #0c0a07;
    --key-black-2: #000;
    --key-black-border: #000;
    --key-black-active: #050403;
    --key-target-white-1: #f0c878;
    --key-target-white-2: #d9a441;
    --key-target-white-border: #a87830;
    --key-target-black-1: #b3843a;
    --key-target-black-2: #8a621f;
    --key-target-black-border: #5c4114;
    --key-correct-white-1: #9fd9ac;
    --key-correct-white-2: #6fbf7f;
    --key-correct-white-border: #3f7a4f;
    --key-correct-black-1: #5a9e68;
    --key-correct-black-2: #3f7a4f;
    --key-wrong-white-1: #e8a693;
    --key-wrong-white-2: #e0836b;
    --key-wrong-white-border: #a8493a;
    --key-wrong-black-1: #c06450;
    --key-wrong-black-2: #a8493a;
    --key-timing-white-1: #f0d190;
    --key-timing-white-2: #e0ab52;
    --key-timing-white-border: #b3812f;
    --key-timing-black-1: #c68f3e;
    --key-timing-black-2: #96650f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.hidden {
    display: none !important;
}

/* ---------- App shell ---------- */

.app {
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.25rem 1.1rem 3rem;
}

/* ---------- Header ---------- */

.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    margin-bottom: 1.1rem;
    padding: 1rem 1.15rem;
    background: var(--bg-elevated);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-bottom: 3px solid var(--accent);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.brand-mark {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--accent);
    color: var(--bg-elevated);
    border: 1px solid var(--accent-hover);
    font-size: 1.45rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.brand h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ink);
}

.tagline {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-weight: 400;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Language switcher */
.lang-switch {
    position: relative;
}

#lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--bg-soft);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

#lang-toggle:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
}

#lang-toggle .lang-globe {
    font-size: 1.05rem;
    line-height: 1;
}

#lang-current-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    min-width: 1.5rem;
}

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 50;
    min-width: 10.5rem;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: var(--bg-elevated);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.lang-menu li {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
}

.lang-menu li:hover {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.lang-menu li.is-active {
    color: var(--accent-deep);
}

.lang-menu li.is-active::before {
    content: "✓ ";
    font-weight: 700;
}

.theme-switch {
    position: relative;
}

#theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--bg-soft);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

#theme-toggle:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
}

.theme-swatch {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    background:
        conic-gradient(
            var(--swatch-bg, var(--bg)) 0deg 180deg,
            var(--swatch-accent, var(--accent)) 180deg 360deg
        );
    flex: none;
}

.theme-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 50;
    min-width: 13.5rem;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: var(--bg-elevated);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.theme-menu li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
}

.theme-menu li:hover {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.theme-menu li.is-active {
    color: var(--accent-deep);
}

.theme-menu li.is-active::after {
    content: "✓";
    margin-left: auto;
    font-weight: 700;
}

.theme-menu li[data-theme-option="original"] .theme-swatch {
    --swatch-bg: #eef1f6;
    --swatch-accent: #3b6fd4;
}

.theme-menu li[data-theme-option="warm"] .theme-swatch {
    --swatch-bg: #f2ecdb;
    --swatch-accent: #a5762f;
}

.theme-menu li[data-theme-option="dark"] .theme-swatch {
    --swatch-bg: #17140f;
    --swatch-accent: #d9a441;
}

/* ---------- Buttons ---------- */

button {
    appearance: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.55rem 1.05rem;
    margin: 0.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--bg-elevated);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled) {
    background: var(--bg-soft);
    border-color: var(--line-strong);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary,
.header-actions button {
    background: var(--accent);
    color: var(--bg-elevated);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled),
.header-actions button:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-deep);
    color: var(--bg-elevated);
}

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

.btn-accent:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-deep);
    color: #fff;
}

.btn-good {
    background: var(--good);
    color: #fff;
    border-color: var(--good-deep);
}

.btn-good:hover:not(:disabled) {
    background: var(--good-deep);
    color: #fff;
}

.btn-warn {
    background: var(--warn);
    color: #fff;
    border-color: var(--warn-deep);
}

.btn-warn:hover:not(:disabled) {
    background: var(--warn-deep);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border-color: var(--line);
    box-shadow: none;
}

.tempo-reset {
    padding: 0.35rem 0.75rem;
    font-size: 0.88rem;
    margin: 0;
    border-radius: var(--radius-pill);
}

/* ---------- Status ---------- */

.status-wrap {
    margin: 0 0 1rem;
}

#status {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.status-wrap.is-parsing #status {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.parse-progress {
    padding: 0.55rem 1rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-top: none;
    border-left: 4px solid var(--accent);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.parse-progress.hidden {
    display: none;
}

.parse-progress-track {
    height: 0.55rem;
    background: var(--line-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.parse-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep, var(--accent)));
    border-radius: var(--radius-pill);
    transition: width 0.12s linear;
}

.parse-progress-bar.is-indeterminate {
    width: 35% !important;
    transition: none;
    animation: parse-progress-slide 1.15s ease-in-out infinite;
}

@keyframes parse-progress-slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.parse-progress-meta {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

/* ---------- Transport + settings ---------- */

#controls {
    margin-bottom: 1.15rem;
}

.transport-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.transport-bar button {
    margin: 0.15rem;
}

.btn-sys-nav {
    min-width: 2.4rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 700;
}

.btn-sys-nav:disabled {
    opacity: 0.35;
    color: var(--disabled-ink);
    background: var(--disabled-bg);
    border-color: var(--disabled-line);
    cursor: not-allowed;
}

.btn-record {
    background: var(--bad);
    color: #fff;
    border-color: var(--bad-deep);
    font-weight: 600;
}

.btn-record:hover:not(:disabled) {
    background: var(--bad-deep);
    color: #fff;
}

.btn-record.is-recording {
    animation: record-pulse 1.15s ease-in-out infinite;
}

@keyframes record-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bad-rgb), 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(var(--bad-rgb), 0); }
}

.btn-replay-recording {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-color: var(--accent);
    font-weight: 600;
}

.btn-replay-recording:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
}

.btn-replay-recording.is-playing {
    background: var(--accent);
    color: #fff;
}

.btn-save-recording {
    background: var(--bg-elevated);
    color: var(--accent-deep);
    border-color: var(--accent);
    font-weight: 600;
}

.btn-save-recording:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.btn-settings {
    margin-left: auto !important;
    background: var(--bg-soft);
    border-color: var(--line);
    color: var(--accent-deep);
    font-weight: 600;
}

.btn-settings:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--line-strong);
}

.btn-settings .settings-chevron {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 0.85em;
}

.btn-settings[aria-expanded="false"] .settings-chevron {
    transform: rotate(180deg);
}

/* Collapsible options drawer */
.settings-drawer {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.38s ease, opacity 0.28s ease;
    opacity: 1;
}

.settings-drawer.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.settings-drawer-inner {
    overflow: hidden;
    min-height: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    padding-bottom: 0.15rem;
}

.playback-options {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.playback-options label {
    font-weight: 600;
    margin-right: 0.45rem;
    color: var(--ink);
    font-size: 0.92rem;
}

.playback-options select,
.playback-options input[type="number"] {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-soft);
    color: var(--ink);
    max-width: 100%;
}

.playback-options input[type="number"] {
    width: 4.75rem;
}

.playback-options .hint {
    display: block;
    margin-top: 0.4rem;
    color: var(--ink-faint);
    font-size: 0.84rem;
    line-height: 1.4;
}

.playback-options .hint a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.playback-options .hint a:hover {
    text-decoration: underline;
}

.playback-options .tempo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.playback-options input[type="range"] {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 320px;
    accent-color: var(--accent);
    vertical-align: middle;
}

.playback-options #tempo-value,
.playback-options #zoom-value {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    font-weight: 600;
    color: var(--accent-deep);
    font-family: var(--mono);
    font-size: 0.9rem;
}

.field-gap {
    margin-top: 0.55rem;
}

.option-divider {
    height: 1px;
    background: var(--line-soft);
    margin: 0.65rem 0;
    border: 0;
}

/* ---------- Score stage ---------- */

.score-stage {
    margin: 0 0 1rem;
    padding: 0.85rem 0.85rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.score-hidden-placeholder {
    margin: 0 0 0.75rem;
    padding: 1.1rem 1.15rem;
    border: 1px dashed var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
}

.score-hidden-placeholder.hidden {
    display: none;
}

#osmd-container {
    margin: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.75rem;
    background:
        linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 40%);
    overflow: hidden;
    min-height: 200px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#osmd-container.hidden {
    display: none;
}

/* Onzichtbaar tijdens multi-pass layout, wél meetbaar voor OSMD (niet display:none) */
#osmd-container.is-preparing {
    visibility: hidden;
    pointer-events: none;
}

/* Bron-SVG van OSMD (verborgen als we gestapelde clones tonen) */
#osmd-container svg.osmd-main-svg-hidden {
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* Gestapelde systemen zonder lege rust-regels (multi-instrument) */
#osmd-view-stack {
    position: relative;
    width: 100%;
}
#osmd-view-stack.hidden {
    display: none !important;
}
#osmd-view-stack .osmd-sys-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Viewport-pan slide (translateY + height; geen OSMD re-render) */
#osmd-container.osmd-viewport-animating {
    /* transition-duur komt uit JS (SCORE_SLIDE_MS) */
    will-change: height;
}
#osmd-container.osmd-viewport-animating svg {
    will-change: transform;
    backface-visibility: hidden;
}

.osmd-slide-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    will-change: transform, opacity;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.osmd-slide-layer.osmd-slide-live {
    pointer-events: auto;
    z-index: 1;
}

.osmd-slide-layer.osmd-slide-old {
    z-index: 2;
}

/* Snelle ease-out: snel weg, zacht aankomt (match SCORE_SLIDE_MS in app.js) */
.osmd-slide-layer.osmd-animating {
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.18s cubic-bezier(0.4, 0, 1, 1);
}

#measure-window-label {
    color: var(--ink-faint);
    font-size: 0.88rem;
    margin: 0.55rem 0 0.35rem;
    padding: 0 0.15rem;
    font-weight: 500;
}

/* Staff space guides (FACE / ACEG) */
#staff-space-guides-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

#wrong-notes-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 7;
}

#staff-space-guides-overlay .ssg-letter {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--accent-deep);
    font-family: var(--font);
    font-weight: 600;
    opacity: 0.9;
    user-select: none;
    line-height: 1;
    text-shadow: 0 0 2px var(--paper-halo), 0 0 3px var(--paper-halo);
    z-index: 6;
}

.key-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.35rem;
}

.key-picker button {
    min-width: 2.2rem;
    padding: 0.22rem 0.4rem;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.85rem;
}

.key-picker button:hover {
    border-color: var(--target);
}

.key-picker button.is-current {
    background: var(--target);
    border-color: var(--accent-hover);
    color: var(--bg-elevated);
    font-weight: 600;
}

.key-picker button.is-original:not(.is-current) {
    box-shadow: inset 0 0 0 1px var(--warn-deep);
}

/* ---------- Practice panel ---------- */

#practice {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--practice-panel-top) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#practice p {
    margin: 0.4rem 0;
}

#practice-instruction {
    color: var(--ink-soft);
}

#practice-instruction .note-target {
    color: var(--target);
    font-weight: 700;
}

#current-note {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.65rem 0;
    min-height: 2rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    font-variant-numeric: tabular-nums;
}

#feedback {
    min-height: 1.25rem;
    margin: 0.35rem 0;
}

.practice-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.5rem;
}

.progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.goed {
    color: var(--good);
}

.fout {
    color: var(--bad);
}

/* ---------- Piano ---------- */

#piano-section {
    margin: 0.65rem 0 0.35rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--piano-panel-1) 0%, var(--piano-panel-2) 100%);
    padding: 0.65rem 0.75rem 0.85rem;
}

#piano-section.hidden {
    display: none !important;
}

#piano-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin: 0 0 0.5rem;
}

#piano-caption {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0;
}

#piano-hands-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    max-width: 22rem;
}

#piano-hands-legend.hidden {
    display: none;
}

#piano-hands-inline-wrap {
    font-size: 0.88rem;
    color: var(--ink-soft);
    white-space: nowrap;
    user-select: none;
}

#piano-hands-partial {
    color: var(--bad-deep);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: right;
}

#piano-caption .legend-target {
    color: var(--target);
    font-weight: 700;
}

#piano-caption .legend-good {
    color: var(--good);
    font-weight: 700;
}

#piano-caption .legend-bad {
    color: var(--bad);
    font-weight: 700;
}

#library-score {
    width: 230px;
    max-width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--ink);
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    text-overflow: ellipsis;
}

#piano-playback-layout {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

#piano-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    border-radius: 6px;
}

#falling-chords {
    position: relative;
    flex: 0 0 136px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #2b2420, #4a3c2e);
    box-shadow: inset 1px 0 rgba(255,255,255,.15);
}

#falling-chords-canvas { display: block; }
.falling-chords-legend {
    display: block;
    padding: 5px 3px;
    text-align: center;
    font-size: 10px;
    color: #d4e7ff;
}
.falling-chords-heading {
    position: absolute;
    inset: 0 0 auto;
    padding: 4px 2px;
    text-align: center;
    font-size: 11px;
    color: #d4e7ff;
    background: #2b2420;
    pointer-events: none;
}
.piano-stage-active #piano-playback-layout { display: block; }
.piano-stage-active #falling-chords { display: none; }

/* Synthesia-style falling notes (playback only) */
#falling-notes-wrap {
    position: relative;
    /* Standaard 160px = 100%; JS zet style.height op basis van schuifbalk */
    height: 160px;
    width: 100%;
    min-width: 100%;
    /* Dicht tegen het klavier zodat “hit” ≈ toets-aanslag */
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    background:
        linear-gradient(180deg, #2b2420 0%, #3a2f26 55%, #4a3c2e 100%);
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    contain: layout paint;
}

#falling-notes-wrap.hidden {
    display: none !important;
}

#falling-notes-canvas {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    pointer-events: none;
    contain: strict;
}

#falling-notes-hitline {
    position: absolute;
    left: 0;
    right: 0;
    /* Onderaan de baan (bij het klavier), niet 10% omhoog */
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(230, 180, 90, 0.85), transparent);
    box-shadow: 0 0 8px rgba(230, 180, 90, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* Compactere labelrij als er vallende noten zijn (minder “lucht” tot de toetsen) */
#falling-notes-wrap:not(.hidden) + #piano-label-row {
    height: 1.05rem;
    margin-bottom: 0;
}

#piano-label-row {
    position: relative;
    height: 1.4rem;
    margin-bottom: 0.15rem;
    min-width: 100%;
}

#piano-label-row .pk-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-deep);
    white-space: nowrap;
    pointer-events: none;
}

#piano-wrap {
    position: relative;
    width: max-content;
    min-width: 100%;
}

#piano-wrap.has-hands {
    padding-bottom: var(--hands-extra, 78px);
}

#piano-hands-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    z-index: 6;
}

#piano-hands-canvas.hidden {
    display: none;
}

/* SVG overlay for 2D hands -- mirrors #piano-hands-canvas exactly so it
   lines up with the world-pixel coordinates piano-hands.js solves in, and
   inherits the same visibility:hidden ancestor rule when the 3D stage
   (#piano-3d-stage) is active, since it also lives inside #piano-wrap. */
#piano-hands-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 6;
}

#piano-hands-svg.hidden {
    display: none;
}

#piano {
    position: relative;
    height: 132px;
    display: flex;
    width: max-content;
    min-width: 100%;
    user-select: none;
    touch-action: manipulation;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

#piano-cross-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

.piano-key {
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.piano-key.white {
    flex: 1 0 0;
    min-width: 26px;
    height: 132px;
    background: linear-gradient(var(--key-white-1), var(--key-white-2) 70%, var(--key-white-3));
    border: 1px solid var(--key-white-border);
    border-radius: 0 0 5px 5px;
    z-index: 1;
}

.piano-key.white:active {
    background: var(--key-white-active);
}

.piano-key.black {
    position: absolute;
    top: 0;
    width: 18px;
    height: 84px;
    background: linear-gradient(var(--key-black-1), var(--key-black-2) 80%);
    border: 1px solid var(--key-black-border);
    border-radius: 0 0 3px 3px;
    z-index: 2;
    margin-left: -9px;
}

.piano-key.black:active {
    background: var(--key-black-active);
}

.piano-key.white.target {
    background: linear-gradient(var(--key-target-white-1), var(--key-target-white-2));
    border-color: var(--key-target-white-border);
}

.piano-key.black.target {
    background: linear-gradient(var(--key-target-black-1), var(--key-target-black-2));
    border-color: var(--key-target-black-border);
}

.piano-key.white.correct {
    background: linear-gradient(var(--key-correct-white-1), var(--key-correct-white-2));
    border-color: var(--key-correct-white-border);
}

.piano-key.black.correct {
    background: linear-gradient(var(--key-correct-black-1), var(--key-correct-black-2));
}

.piano-key.white.wrong {
    background: linear-gradient(var(--key-wrong-white-1), var(--key-wrong-white-2));
    border-color: var(--key-wrong-white-border);
}

.piano-key.black.wrong {
    background: linear-gradient(var(--key-wrong-black-1), var(--key-wrong-black-2));
}

.piano-key.white.timing {
    background: linear-gradient(var(--key-timing-white-1), var(--key-timing-white-2));
    border-color: var(--key-timing-white-border);
}

.piano-key.black.timing {
    background: linear-gradient(var(--key-timing-black-1), var(--key-timing-black-2));
}

.piano-key .key-dot {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    display: none;
    pointer-events: none;
    z-index: 3;
}

.piano-key.target .key-dot,
.piano-key.correct .key-dot,
.piano-key.wrong .key-dot,
.piano-key.timing .key-dot {
    display: block;
}

.piano-key.black .key-dot {
    bottom: 10px;
}

label[for="auto-fingering"] {
    display: block;
}

.piano-key .key-finger {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    min-width: 1.15em;
    height: 1.15em;
    padding: 0 0.12em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15em;
    text-align: center;
    pointer-events: none;
    z-index: 4;
    background: rgba(255, 255, 255, 0.92);
    color: var(--accent-deep);
    box-shadow: 0 0 0 1px rgba(var(--accent-deep-rgb), 0.35);
}

.piano-key .key-finger.lh {
    color: var(--good-deep);
    box-shadow: 0 0 0 1px rgba(var(--good-rgb), 0.4);
}

.piano-key .key-finger.ghost {
    opacity: 0.55;
    font-size: 0.68rem;
    min-width: 1em;
    height: 1em;
    line-height: 1em;
    bottom: 42px;
}

.piano-key.black .key-finger {
    bottom: 8px;
    background: rgba(20, 20, 20, 0.82);
    color: var(--accent-on-dark);
    box-shadow: 0 0 0 1px rgba(var(--accent-on-dark-rgb), 0.45);
}

.piano-key.black .key-finger.lh {
    color: var(--good-on-dark);
    box-shadow: 0 0 0 1px rgba(var(--good-on-dark-rgb), 0.45);
}

.piano-key.black .key-finger.ghost {
    bottom: 26px;
}

.piano-key.target .key-finger,
.piano-key.correct .key-finger,
.piano-key.wrong .key-finger,
.piano-key.timing .key-finger {
    background: rgba(255, 255, 255, 0.95);
}

.piano-key.key-flash-off {
    filter: brightness(1.35) !important;
    background: #fff !important;
    transition: none !important;
}

.piano-key.black.key-flash-off {
    background: #555 !important;
    filter: brightness(1.5) !important;
}

@keyframes key-retrigger-pulse {
    0%   { transform: scale(1);    box-shadow: none; }
    25%  { transform: scale(0.94); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.85); }
    55%  { transform: scale(1.03); box-shadow: 0 0 14px 4px rgba(var(--accent-rgb), 0.55); }
    100% { transform: scale(1);    box-shadow: none; }
}

.piano-key.retrigger {
    animation: key-retrigger-pulse 0.4s ease-out;
    z-index: 4;
}

#piano-octave-row {
    display: flex;
    font-size: 0.7rem;
    color: var(--ink-faint);
    margin-top: 0.25rem;
    min-width: 100%;
    width: max-content;
}

#piano-octave-row span {
    flex: 1 0 0;
    min-width: 26px;
    text-align: left;
    padding-left: 2px;
}

/* ---------- Input section (MIDI / mic) ---------- */

.input-section {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem 1.15rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.input-section h2 {
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

#midi-status,
#mic-status {
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin: 0.25rem 0;
}

.input-section .playback-options {
    margin-top: 0.85rem;
    background: var(--bg-soft);
}

/* ---------- Count-in badge (partituur blijft zichtbaar) ---------- */

#count-in-overlay {
    position: fixed;
    /* Rechtsboven: groot genoeg om te lezen, dekt de bladmuziek niet af */
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    left: auto;
    bottom: auto;
    inset: auto;
    background: rgba(43, 36, 32, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    min-width: 5.5rem;
    padding: 0.65rem 1rem 0.75rem;
    border-radius: 1rem;
    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: count-in-pop 0.18s ease-out;
}

#count-in-overlay.hidden {
    display: none !important;
}

#count-in-number {
    font-size: clamp(2.4rem, 7vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    font-variant-numeric: tabular-nums;
    transition: color 0.08s ease, transform 0.08s ease;
}

#count-in-sub {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: rgba(240, 240, 245, 0.9);
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 11rem;
    line-height: 1.25;
}

#count-in-overlay.downbeat #count-in-number {
    color: #e6b25a;
    transform: scale(1.08);
}

@keyframes count-in-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    #count-in-overlay {
        top: max(0.5rem, env(safe-area-inset-top, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding: 0.5rem 0.75rem 0.55rem;
        min-width: 4.5rem;
    }

    #count-in-number {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }

    #count-in-sub {
        font-size: 0.65rem;
        max-width: 9rem;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .app {
        padding: 0.75rem 0.7rem 2rem;
    }

    .app-header {
        padding: 0.9rem 1rem;
    }

    .brand-mark {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }

    .transport-bar {
        justify-content: stretch;
    }

    .transport-bar button {
        flex: 1 1 auto;
        text-align: center;
    }

    .btn-sys-nav {
        flex: 0 0 auto;
    }

    .btn-settings {
        margin-left: 0.15rem !important;
        flex: 1 1 100%;
    }

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

.hand-model-credit { display: block; font-size: 10px; opacity: .7; margin-top: 4px; }

.hands-3d-ready #piano-wrap { padding-bottom: var(--hands-extra, 156px); }

#piano { height: var(--piano-depth, 132px); }
#piano .piano-key.white { height: var(--piano-depth, 132px); }
#piano .piano-key.black { height: var(--black-depth, 84px); }

.hands-3d-ready #piano-hands-canvas { pointer-events: auto; }

/* The 3D scene has its own viewport, independent of the legacy key overlay. */
#piano-3d-stage { position:relative; height: min(65vh,720px); min-height:420px; overflow:hidden; border:1px solid #4a3c2e; border-radius:18px; background:radial-gradient(ellipse at center,#3a2f26,#1c1712); }
#piano-3d-stage[hidden] { display:none; }
#piano-3d-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.piano-stage-hint { position:absolute; top:18px; left:20px; color:#d9cdb0; font-size:12px; pointer-events:none; }
.piano-stage-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.piano-stage-labels span { position:absolute; width:24px; height:24px; border-radius:50%; text-align:center; line-height:24px; color:#241f1a; font-size:12px; font-weight:700; transform:translate(-50%,-50%); }
.piano-stage-tools { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.piano-stage-tools[hidden] { display:none; }
.piano-stage-tools button { padding:8px 14px; border:1px solid #5c4c37; border-radius:9px; background:#2e2620; color:#ece3cc; cursor:pointer; }
.piano-stage-active #piano-scroll { position:absolute; visibility:hidden; pointer-events:none; width:100%; height:1px; overflow:hidden; }
@media(max-width:640px) { #piano-3d-stage { min-height:340px; height:55vh; } .piano-stage-hint { max-width:85%; } }