/* bundle-features.css — earTraining + harmonium + guitar + tuner */
/* ================================================================
   earTraining.css — Ear Training Module Styles
   ChordStar Music Learning Portal

   All classes prefixed with .et- to prevent collisions.
   Follows the same visual language as toolkit.css (dark glass morphism,
   purple/gradient brand, Space Grotesk + Outfit typography).
   ================================================================ */

/* ── Level selector screen ──────────────────────────────────────── */
.et-level-screen {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem 0;
}

.et-intro-header {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.et-intro-icon {
    font-size: 2.4rem;
    margin-bottom: 0.4rem;
    display: block;
}

.et-intro-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.et-intro-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(196, 181, 212, 0.6);
    margin: 0;
}

/* Stats row */
.et-stats-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.et-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
}

.et-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #d946ef;
    line-height: 1;
}

.et-stat-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196, 181, 212, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Level cards */
.et-levels-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.et-level-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(26, 15, 46, 0.6);
    border: 1px solid rgba(217, 70, 239, 0.15);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

.et-level-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--et-color, #d946ef), transparent 70%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.et-level-card.et-level-unlocked {
    cursor: pointer;
}

.et-level-card.et-level-unlocked:hover,
.et-level-card.et-level-unlocked:focus {
    transform: translateY(-3px);
    border-color: var(--et-color, #d946ef);
    box-shadow: 0 8px 28px rgba(217, 70, 239, 0.15);
    outline: none;
}

.et-level-card.et-level-unlocked:hover::before {
    opacity: 0.07;
}

.et-level-card.et-level-active {
    border-color: var(--et-color, #d946ef);
    background: rgba(26, 15, 46, 0.8);
}

.et-level-card.et-level-locked {
    opacity: 0.55;
    cursor: default;
}

.et-level-icon {
    font-size: 1.55rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.et-level-text {
    flex: 1;
    min-width: 0;
}

.et-level-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f0e7ff;
    margin-bottom: 0.18rem;
}

.et-level-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.77rem;
    color: rgba(196, 181, 212, 0.55);
    line-height: 1.3;
}

.et-lock {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196, 181, 212, 0.4);
    margin-top: 0.2rem;
}

.et-level-arrow {
    font-size: 1rem;
    color: rgba(217, 70, 239, 0.5);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.et-level-card.et-level-unlocked:hover .et-level-arrow {
    transform: translateX(4px);
    color: var(--et-color, #d946ef);
}

/* ── Question screen ────────────────────────────────────────────── */
.et-question-screen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0;
}

/* Header row */
.et-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.et-streak-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    letter-spacing: 0.02em;
    animation: et-streak-pulse 1.5s ease infinite;
}

@keyframes et-streak-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.0); }
    50%       { box-shadow: 0 0 0 5px rgba(245,158,11,0.08); }
}

.et-back-btn {
    background: none;
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 8px;
    color: rgba(196, 181, 212, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    margin-left: auto;
}

.et-back-btn:hover {
    color: #d946ef;
    border-color: rgba(217, 70, 239, 0.5);
    background: rgba(217, 70, 239, 0.06);
}

/* Progress bar toward next level */
.et-progress-bar-wrap {
    height: 4px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: -0.25rem 0;
}

.et-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Play zone */
.et-play-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.5rem 1rem;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 16px;
}

.et-play-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.4);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease,
                filter 0.15s ease;
    position: relative;
    overflow: hidden;
}

.et-play-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.15s;
}

.et-play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(217, 70, 239, 0.55);
}

.et-play-btn:active,
.et-play-btn.et-playing {
    transform: scale(0.97);
}

.et-play-btn.et-playing::after {
    opacity: 1;
}

.et-play-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.et-play-btn.et-playing .et-play-icon {
    animation: et-spin-in 0.3s ease;
}

@keyframes et-spin-in {
    from { transform: scale(1.4) rotate(-15deg); opacity: 0.5; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.et-play-label {
    letter-spacing: 0.02em;
}

.et-play-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196, 181, 212, 0.45);
    margin: 0;
    text-align: center;
}

/* Question label */
.et-question-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(240, 231, 255, 0.8);
    text-align: center;
    letter-spacing: 0.01em;
}

/* Options grid */
.et-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.et-option-btn {
    padding: 0.9rem 1rem;
    background: rgba(26, 15, 46, 0.7);
    border: 1.5px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2d8f0;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.15s ease,
                background 0.15s ease,
                box-shadow 0.15s ease;
    letter-spacing: 0.01em;
    text-align: center;
}

.et-option-btn:hover:not(:disabled) {
    border-color: rgba(217, 70, 239, 0.6);
    background: rgba(217, 70, 239, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(217, 70, 239, 0.15);
}

.et-option-btn:active:not(:disabled) {
    transform: translateY(0);
}

.et-option-btn:disabled {
    cursor: default;
}

.et-option-btn.et-correct {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #34d399;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    animation: et-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.et-option-btn.et-wrong {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: rgba(252, 165, 165, 0.8);
    animation: et-shake 0.35s ease;
}

@keyframes et-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}

@keyframes et-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* Feedback */
.et-feedback {
    min-height: 44px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    font-family: 'Outfit', sans-serif;
}

.et-feedback--visible {
    opacity: 1;
    transform: translateY(0);
}

.et-fb-correct,
.et-fb-wrong {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-radius: 12px;
}

.et-fb-correct {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.et-fb-wrong {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.et-fb-icon {
    font-size: 1rem;
    font-weight: 900;
    flex-shrink: 0;
}

.et-feedback--correct .et-fb-icon { color: #34d399; }
.et-feedback--wrong   .et-fb-icon { color: #f87171; }

.et-fb-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f0e7ff;
    flex: 1;
}

.et-fb-xp {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #d946ef;
    background: rgba(217, 70, 239, 0.12);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.et-fb-bonus {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
    width: 100%;
    margin-top: 0.1rem;
    display: block;
}

.et-fb-hint {
    font-size: 0.78rem;
    color: rgba(196, 181, 212, 0.6);
    line-height: 1.4;
    padding: 0.1rem 0 0 1.6rem;
}

/* "Next" button in wrong-answer state */
.et-next-btn {
    margin-top: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 8px;
    color: #c084fc;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    align-self: flex-start;
}

.et-next-btn:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.55);
    transform: translateX(3px);
}

/* Session score */
.et-session-score {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196, 181, 212, 0.4);
    text-align: center;
}

.et-session-score strong {
    color: rgba(196, 181, 212, 0.7);
    font-weight: 700;
}

/* ── Toolkit card addition ───────────────────────────────────────── */
/* Ear Training card uses same .tk-card styling — only the separator
   line below the existing grid is added here. */
.et-card-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: rgba(168, 85, 247, 0.1);
    margin: 0.25rem 0 0;
}

/* ── Responsive: mobile ─────────────────────────────────────────── */
@media (max-width: 500px) {
    .et-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .et-option-btn {
        padding: 0.75rem 0.5rem;
        font-size: 0.95rem;
    }

    .et-play-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .et-stats-row {
        gap: 0.5rem;
        padding: 0.7rem 0.75rem;
    }

    .et-stat-num {
        font-size: 1.1rem;
    }
}

/* ── Light theme overrides ──────────────────────────────────────── */
[data-theme="light"] .et-level-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(168, 85, 247, 0.18);
}

[data-theme="light"] .et-level-title {
    color: #1e0a33;
}

[data-theme="light"] .et-level-desc,
[data-theme="light"] .et-play-hint,
[data-theme="light"] .et-session-score {
    color: rgba(60, 30, 80, 0.55);
}

[data-theme="light"] .et-option-btn {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(168, 85, 247, 0.2);
    color: #1e0a33;
}

[data-theme="light"] .et-option-btn:hover:not(:disabled) {
    background: rgba(217, 70, 239, 0.07);
}

[data-theme="light"] .et-play-zone {
    background: rgba(168, 85, 247, 0.04);
}

[data-theme="light"] .et-question-label {
    color: rgba(30, 10, 51, 0.8);
}

[data-theme="light"] .et-intro-title {
    color: #1e0a33;
}

/* ================================================================
   Ear Training v2 — Full-Page Section Styles
   Covers: Home screen (eth-*), shared trainer components (etr-*),
           interval settings (etiv-*), scale difficulty (etsc-*)
   ================================================================ */

/* ── #earTraining section base ──────────────────────────────────── */
#earTraining.tab-section {
    padding: 0;
    min-height: 100vh;
}

#etHomeContainer {
    min-height: 100vh;
}

/* ── Shared trainer wrapper ─────────────────────────────────────── */
.etr-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.etr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.etr-back-btn {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
    border-radius: 10px;
    padding: 0.45rem 0.9rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.etr-back-btn:hover { background: rgba(168, 85, 247, 0.2); }

.etr-streak {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
}

/* ── Stats row (shared) ─────────────────────────────────────────── */
.etr-stats-row {
    display: flex;
    gap: 0.75rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.etr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.15rem;
}

.etr-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #d946ef;
    line-height: 1;
}

.etr-stat-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196, 181, 212, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Mode select screen ─────────────────────────────────────────── */
.etr-mode-screen {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.etr-mode-header {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.etr-mode-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.4rem;
}

.etr-mode-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.3rem;
}

.etr-mode-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(196, 181, 212, 0.6);
    margin: 0;
}

.etr-mode-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.etr-mode-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: rgba(26, 15, 46, 0.6);
    border: 1px solid rgba(217, 70, 239, 0.18);
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.etr-mode-card:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 70, 239, 0.4);
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.12);
}

.etr-mode-card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.etr-mode-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.etr-mode-card-text strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f0e7ff;
}

.etr-mode-card-text span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.55);
}

/* ── Note pills (preview row) ───────────────────────────────────── */
.etr-piano-section {
    width: 100%;
    margin-top: 1.5rem;
}

.etr-piano-label {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196,181,212,0.55);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

/* Scrollable wrapper for small screens */
.etr-piano-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.5rem;
    /* hide scrollbar but keep scroll */
    scrollbar-width: none;
}
.etr-piano-wrap::-webkit-scrollbar { display: none; }

/* Piano container — white key width as CSS variable */
.etr-piano {
    position: relative;
    display: flex;
    --wkey-w: 44px;        /* white key width  */
    --wkey-h: 130px;       /* white key height */
    --bkey-w: 28px;        /* black key width  */
    --bkey-h: 80px;        /* black key height */
    width: calc(14 * var(--wkey-w));
    height: var(--wkey-h);
    margin: 0 auto;
    user-select: none;
}

/* ── White keys ──────────────────────────────────────────────────── */
.etr-piano-white {
    position: relative;
    width: var(--wkey-w);
    height: var(--wkey-h);
    background: linear-gradient(180deg, #f0eaf8 0%, #ffffff 100%);
    border: 1px solid rgba(120,80,180,0.3);
    border-top: none;
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    box-sizing: border-box;
    transition: background 0.08s, transform 0.08s;
    flex-shrink: 0;
    z-index: 1;
}

.etr-piano-white:hover {
    background: linear-gradient(180deg, #e8dff5 0%, #f5f0ff 100%);
}

.etr-piano-white.etr-piano-pressed {
    background: linear-gradient(180deg, #c4a8f0 0%, #d8c4f8 100%);
    transform: scaleY(0.97);
    transform-origin: top;
}

.etr-piano-white-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(80,40,120,0.7);
    pointer-events: none;
}

/* ── Black keys ──────────────────────────────────────────────────── */
.etr-piano-black {
    position: absolute;
    top: 0;
    width: var(--bkey-w);
    height: var(--bkey-h);
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1060 100%);
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(150,100,220,0.25);
    border-top: none;
    transition: background 0.08s, transform 0.08s;
    /* Center the black key over the gap */
    transform: translateX(calc((var(--wkey-w) - var(--bkey-w)) / 2));
}

.etr-piano-black:hover {
    background: linear-gradient(180deg, #2d1060 0%, #4a1a8a 100%);
}

.etr-piano-black.etr-piano-pressed {
    background: linear-gradient(180deg, #7c3aed 0%, #a855f7 100%);
    transform: translateX(calc((var(--wkey-w) - var(--bkey-w)) / 2)) scaleY(0.96);
    transform-origin: top;
}

.etr-piano-black-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.48rem;
    font-weight: 700;
    color: rgba(200,170,240,0.65);
    pointer-events: none;
    writing-mode: horizontal-tb;
}

/* ── Mobile — smaller keys ───────────────────────────────────────── */
@media (max-width: 600px) {
    .etr-piano {
        --wkey-w: 32px;
        --wkey-h: 100px;
        --bkey-w: 20px;
        --bkey-h: 62px;
    }
    .etr-piano-white-label { font-size: 0.55rem; }
    .etr-piano-black-label { font-size: 0.42rem; }
}

/* ── Quiz progress bar ──────────────────────────────────────────── */
.etr-quiz-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.etr-quiz-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.etr-quiz-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #d946ef);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.etr-quiz-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196, 181, 212, 0.5);
    white-space: nowrap;
}

/* ── Question screen ────────────────────────────────────────────── */
.etr-question-screen {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

/* ── Play button ────────────────────────────────────────────────── */
.etr-play-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.etr-play-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 3rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(217,70,239,0.15));
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    color: #f0e7ff;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    font-family: 'Space Grotesk', sans-serif;
}

.etr-play-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, rgba(168,85,247,0.35), rgba(217,70,239,0.25));
}

.etr-play-btn.etr-playing {
    animation: etr-pulse 0.6s ease;
    background: linear-gradient(135deg, rgba(168,85,247,0.45), rgba(217,70,239,0.35));
}

.etr-play-btn--scale { padding: 1.2rem 2.5rem; }
.etr-play-btn--scale.etr-playing { animation: etr-pulse 3.2s linear; }

.etr-play-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.etr-play-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.etr-play-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196, 181, 212, 0.45);
    margin: 0;
    text-align: center;
}

@keyframes etr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5); }
    50%  { box-shadow: 0 0 0 14px rgba(168, 85, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* ── Question label ─────────────────────────────────────────────── */
.etr-question-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(240, 231, 255, 0.7);
    text-align: center;
}

/* ── Options grid ───────────────────────────────────────────────── */
.etr-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.etr-options-grid--wide {
    grid-template-columns: repeat(2, 1fr);
}

.etr-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1rem 0.5rem;
    border-radius: 14px;
    background: rgba(26, 15, 46, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    color: #f0e7ff;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.etr-option-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--opt-color, rgba(168, 85, 247, 0.5));
    background: rgba(168, 85, 247, 0.1);
}

.etr-option-btn--interval {
    padding: 0.85rem 0.5rem;
}

.etr-option-name {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.etr-option-quality {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196, 181, 212, 0.5);
}

.etr-option-btn.etr-correct {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
}

.etr-option-btn.etr-wrong {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.etr-option-btn:disabled { cursor: default; }

/* ── Feedback area ──────────────────────────────────────────────── */
.etr-feedback {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
    min-height: 2.5rem;
}

.etr-feedback--visible {
    opacity: 1;
    transform: translateY(0);
}

.etr-fb-correct {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.etr-fb-xp {
    font-size: 0.82rem;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    padding: 0.15rem 0.55rem;
    color: #10b981;
}

.etr-fb-wrong {
    padding: 0.65rem 1rem;
    border-radius: 12px 12px 0 0;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    text-align: center;
}

.etr-fb-wrong strong { color: #f87171; }

.etr-fb-hint {
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-top: none;
    border-radius: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.65);
}

.etr-next-btn {
    display: block;
    width: 100%;
    padding: 0.65rem;
    border-radius: 0 0 12px 12px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-top: none;
    color: #c084fc;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
    text-align: center;
}
.etr-next-btn:hover { background: rgba(168, 85, 247, 0.25); }

.etr-session-info {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.4);
}

.etr-session-info strong {
    color: rgba(196, 181, 212, 0.7);
}

/* ── Level cards (chord trainer) ────────────────────────────────── */
.etr-levels-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.etr-level-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(26, 15, 46, 0.6);
    border: 1px solid rgba(217, 70, 239, 0.15);
    position: relative;
    overflow: hidden;
}

.etr-level-unlocked {
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    border-color: rgba(var(--et-color-rgb, 168,85,247), 0.2);
}

.etr-level-unlocked:hover {
    transform: translateY(-2px);
    border-color: var(--et-color, rgba(168, 85, 247, 0.5));
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.12);
}

.etr-level-locked {
    opacity: 0.55;
}

.etr-level-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.etr-level-text {
    flex: 1;
}

.etr-level-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f0e7ff;
}

.etr-level-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.55);
}

.etr-level-lock {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196, 181, 212, 0.4);
    display: block;
    margin-top: 0.2rem;
}

.etr-level-arrow {
    color: rgba(196, 181, 212, 0.35);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Interval trainer display ───────────────────────────────────── */
.etr-interval-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
}

.etr-interval-note {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #c084fc;
    min-width: 2.5rem;
    text-align: center;
}

.etr-interval-note--hidden {
    color: transparent;
    background: rgba(168, 85, 247, 0.15);
    border-radius: 8px;
    transition: color 0.3s, background 0.3s;
}

.etr-interval-arrow {
    font-size: 1.4rem;
    color: rgba(196, 181, 212, 0.3);
}

/* ── Interval settings toggles ──────────────────────────────────── */
.etiv-settings {
    background: rgba(26, 15, 46, 0.5);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    padding: 1rem;
}

.etiv-settings-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(196, 181, 212, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.etiv-toggles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.etiv-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.etiv-toggle:hover { background: rgba(168, 85, 247, 0.07); }

.etiv-toggle input {
    accent-color: var(--iv-color, #a855f7);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.etiv-toggle-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.7);
}

.etiv-warn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: #fb923c;
    text-align: center;
    margin: 0;
    padding: 0.5rem;
    background: rgba(251, 146, 60, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

/* ── Scale difficulty selector ──────────────────────────────────── */
.etsc-difficulty {
    background: rgba(26, 15, 46, 0.5);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.etsc-diff-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(196, 181, 212, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
}

.etsc-diff-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.etsc-diff-btn {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(196, 181, 212, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.etsc-diff-btn:hover { background: rgba(168, 85, 247, 0.1); }

.etsc-diff-btn.etsc-diff-active {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.45);
    color: #c084fc;
}

/* ── Result screen ──────────────────────────────────────────────── */
.etr-result-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem 2rem;
    text-align: center;
}

.etr-result-grade {
    font-size: 4rem;
    line-height: 1;
}

.etr-result-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
}

.etr-result-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #d946ef;
    line-height: 1;
}

.etr-result-pct {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: rgba(196, 181, 212, 0.55);
}

.etr-result-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.75rem;
}

.etr-btn-primary {
    padding: 0.75rem 1.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #a855f7, #d946ef);
    border: none;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.18s;
}

.etr-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.etr-btn-secondary {
    padding: 0.75rem 1.75rem;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
}

.etr-btn-secondary:hover { background: rgba(168, 85, 247, 0.2); }

/* ════════════════════════════════════════════════════════════════
   HOME SCREEN (eth-* classes)
   ════════════════════════════════════════════════════════════════ */

.eth-home {
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem 1rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Hero */
.eth-hero {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.eth-hero-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.eth-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.9rem;
    font-weight: 900;
    color: #f0e7ff;
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #f0e7ff 30%, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eth-hero-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: rgba(196, 181, 212, 0.55);
    margin: 0;
    line-height: 1.5;
}

/* Stats */
.eth-stats-row {
    display: flex;
    gap: 0.75rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: 16px;
    padding: 1rem;
}

.eth-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.eth-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #d946ef;
    line-height: 1;
}

.eth-stat-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196, 181, 212, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Trainer cards */
.eth-trainers-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.eth-trainer-card {
    position: relative;
    border-radius: 18px;
    background: rgba(26, 15, 46, 0.65);
    border: 1.5px solid rgba(217, 70, 239, 0.12);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}

.eth-trainer-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--eth-rgb, 168,85,247), 0.06), transparent 60%);
    pointer-events: none;
}

.eth-trainer-card:hover {
    transform: translateY(-3px);
    border-color: var(--eth-color, rgba(168, 85, 247, 0.45));
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.14);
}

.eth-card-glow {
    position: absolute;
    top: -20px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: var(--eth-color, #a855f7);
    opacity: 0.06;
    filter: blur(24px);
    pointer-events: none;
}

.eth-card-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.eth-card-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eth-card-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.eth-card-body {
    flex: 1;
    min-width: 0;
}

.eth-card-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.eth-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
}

.eth-card-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.12rem 0.5rem;
    border-radius: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eth-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196, 181, 212, 0.5);
    margin: 0;
    line-height: 1.4;
}

.eth-card-arrow {
    color: rgba(196, 181, 212, 0.3);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: color 0.18s, transform 0.18s;
}

.eth-trainer-card:hover .eth-card-arrow {
    color: var(--eth-color, #c084fc);
    transform: translateX(3px);
}

.eth-footer-tip {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196, 181, 212, 0.45);
    text-align: center;
    margin: 0;
}

.eth-footer-tip strong { color: rgba(196, 181, 212, 0.65); }

/* ══ Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 500px) {
    .etr-options-grid { grid-template-columns: repeat(2, 1fr); }
    .etiv-toggles-grid { grid-template-columns: repeat(1, 1fr); }
    .etr-play-btn { padding: 1.2rem 2rem; }
    .eth-hero-title { font-size: 1.6rem; }
    .eth-stat-num { font-size: 1.2rem; }
}

/* ══ Light theme overrides ──────────────────────────────────────── */
[data-theme="light"] .etr-wrapper,
[data-theme="light"] .eth-home { color: #1a0a2e; }

[data-theme="light"] .etr-mode-card,
[data-theme="light"] .etr-level-card,
[data-theme="light"] .eth-trainer-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(168, 85, 247, 0.2);
}

[data-theme="light"] .etr-mode-title,
[data-theme="light"] .etr-level-title,
[data-theme="light"] .eth-card-title,
[data-theme="light"] .etr-option-btn { color: #1a0a2e; }

[data-theme="light"] .etr-option-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .etr-play-btn {
    background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(217,70,239,0.08));
}

[data-theme="light"] .eth-hero-title {
    background: linear-gradient(135deg, #6b21a8, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   TRAINING HUB — thub-* classes
   Phase 2: Ear Training → Training Hub
   Visual language: same dark glass-morphism as eth-* (existing trainers)
================================================================ */

/* ── Hub home wrapper ──────────────────────────────────────── */
.thub-home {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem 0 2rem;
}

/* ── Hero ──────────────────────────────────────────────────── */
.thub-hero {
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.thub-hero-icon {
    font-size: 2.6rem;
    margin-bottom: 0.4rem;
    display: block;
}
.thub-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.3rem;
    letter-spacing: -0.02em;
}
.thub-hero-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(196,181,212,0.6);
    margin: 0;
}

/* ── Category cards grid ───────────────────────────────────── */
.thub-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

/* ── Category card ─────────────────────────────────────────── */
.thub-category-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 1.1rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.thub-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--thub-rgb,168,85,247),0.07), transparent 60%);
    pointer-events: none;
}
.thub-category-card:hover,
.thub-category-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--thub-color, rgba(168,85,247,0.5));
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    outline: none;
}
.thub-cat-glow {
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: var(--thub-color, #a855f7);
    opacity: 0.06;
    filter: blur(28px);
    pointer-events: none;
    transition: opacity 0.18s;
}
.thub-category-card:hover .thub-cat-glow { opacity: 0.13; }

.thub-cat-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.thub-cat-icon-wrap {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
}
.thub-cat-icon { font-size: 1.6rem; }
.thub-cat-body { flex: 1; min-width: 0; }
.thub-cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.thub-cat-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #e9deff;
    margin: 0;
    letter-spacing: -0.01em;
}
.thub-cat-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    background: rgba(255,255,255,0.06);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.thub-cat-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.55);
    margin: 0 0 0.35rem;
    line-height: 1.4;
}
.thub-cat-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196,181,212,0.4);
    font-weight: 600;
}
.thub-cat-arrow {
    font-size: 1.1rem;
    color: rgba(196,181,212,0.3);
    flex-shrink: 0;
    transition: color 0.18s, transform 0.18s;
}
.thub-category-card:hover .thub-cat-arrow {
    color: var(--thub-color, #c084fc);
    transform: translateX(3px);
}

/* Progress bar inside category card */
.thub-cat-progress { margin-top: 0.5rem; }
.thub-cat-progress-bar {
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.thub-cat-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 99px;
    transition: width 0.5s ease;
}
.thub-cat-progress-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    color: rgba(217,70,239,0.65);
    font-weight: 600;
}

/* Footer tip */
.thub-footer-tip {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.45);
    text-align: center;
    margin: 0.25rem 0 0;
}

/* ── Category page ─────────────────────────────────────────── */
.thub-category-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 2rem;
}
.thub-back-row { padding: 0 0 0.25rem; }
.thub-back-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(196,181,212,0.65);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0;
    transition: color 0.15s;
}
.thub-back-btn:hover { color: #d946ef; }

.thub-cat-header-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--thub-color, #a855f7);
    border-radius: 14px;
}
.thub-cat-header-icon { font-size: 1.8rem; }
.thub-cat-header-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.15rem;
}
.thub-cat-header-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.5);
    margin: 0;
}

/* ── Trainer cards grid ────────────────────────────────────── */
.thub-trainers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* ── Trainer card ──────────────────────────────────────────── */
.thub-trainer-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.thub-trainer-card:hover,
.thub-trainer-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--thub-color, rgba(168,85,247,0.45));
    outline: none;
}
.thub-trainer-card--soon {
    cursor: default;
    opacity: 0.55;
}
.thub-trainer-card--soon:hover { transform: none; border-color: rgba(255,255,255,0.07); }
.thub-trainer-glow {
    position: absolute;
    top: -20px; right: -20px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--thub-color, #a855f7);
    opacity: 0.06;
    filter: blur(20px);
    pointer-events: none;
}
.thub-trainer-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}
.thub-trainer-icon-wrap {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
}
.thub-trainer-icon { font-size: 1.3rem; }
.thub-trainer-body { flex: 1; min-width: 0; }
.thub-trainer-header-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.thub-trainer-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e9deff;
    margin: 0;
}
.thub-new-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 99px;
    background: rgba(217,70,239,0.15);
    color: #d946ef;
    vertical-align: middle;
}
.thub-trainer-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    background: rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.thub-trainer-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.5);
    margin: 0;
    line-height: 1.4;
}
.thub-coming-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    color: rgba(217,70,239,0.5);
    margin: 0.25rem 0 0;
    font-weight: 600;
}
.thub-trainer-arrow {
    font-size: 1rem;
    color: rgba(196,181,212,0.25);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.thub-trainer-card:not(.thub-trainer-card--soon):hover .thub-trainer-arrow {
    color: var(--thub-color, #c084fc);
    transform: translateX(3px);
}

/* ── Placeholder page ──────────────────────────────────────── */
.thub-placeholder {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 2rem;
}
.thub-placeholder-back {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(196,181,212,0.65);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0;
    transition: color 0.15s;
}
.thub-placeholder-back:hover { color: #d946ef; }
.thub-placeholder-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
}
.thub-placeholder-icon { font-size: 3rem; }
.thub-placeholder-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
}
.thub-placeholder-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(196,181,212,0.55);
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}
.thub-placeholder-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.thub-placeholder-coming {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-top: 0.5rem;
}
.thub-placeholder-wip {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(196,181,212,0.7);
    display: block;
    margin-bottom: 0.5rem;
}
.thub-placeholder-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.4);
    margin: 0;
}
.thub-placeholder-cta {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #f0e7ff;
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    margin-top: 0.5rem;
}
.thub-placeholder-cta:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 480px) {
    .thub-categories-grid { grid-template-columns: 1fr 1fr; }
    .thub-trainers-grid   { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .thub-categories-grid { grid-template-columns: 1fr 1fr; }
    .thub-trainers-grid   { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   CLAP TRAINER + RHYTHM TRAINER — ct-* / rt-* classes
================================================================ */

/* ── Info box (both trainers) ──────────────────────────────── */
.ct-info-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.ct-info-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196,181,212,0.7);
}
.ct-info-row span:first-child { font-size: 1rem; flex-shrink: 0; }

/* ── BPM badge (topbar) ────────────────────────────────────── */
.ct-bpm-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(196,181,212,0.5);
    padding: 0.25rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.07);
}

/* ── Beat / tap area ───────────────────────────────────────── */
.ct-session, .rt-session {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0 1.5rem;
}

.ct-beat-area, .rt-tap-area {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Outer pulse ring */
.ct-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(168,85,247,0.3);
    pointer-events: none;
}
@keyframes ctPulseExpand {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}
.ct-pulse-ring.ct-pulse-active {
    animation: ctPulseExpand 0.35s ease-out forwards;
}
.ct-pulse-ring.ct-pulse-ring--countdown {
    border-color: rgba(245,158,11,0.4);
    animation: ctPulseExpand 0.6s ease-out infinite;
}

/* Main beat circle */
.ct-beat-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(168,85,247,0.1);
    border: 2px solid rgba(168,85,247,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, border-color 0.1s;
    position: relative;
    z-index: 1;
}
@keyframes ctBeatPulse {
    0%   { transform: scale(1); background: rgba(168,85,247,0.1); }
    25%  { transform: scale(1.12); background: rgba(168,85,247,0.3); border-color: rgba(168,85,247,0.7); }
    100% { transform: scale(1); background: rgba(168,85,247,0.1); }
}
.ct-beat-circle.ct-beat--pulse {
    animation: ctBeatPulse 0.25s ease-out forwards;
}
.ct-beat-circle.ct-beat--accent {
    border-color: rgba(217,70,239,0.7) !important;
}
@keyframes ctBeatAccent {
    0%   { transform: scale(1); background: rgba(217,70,239,0.15); }
    25%  { transform: scale(1.15); background: rgba(217,70,239,0.35); }
    100% { transform: scale(1); background: rgba(168,85,247,0.1); }
}
.ct-beat-circle.ct-beat--accent.ct-beat--pulse {
    animation: ctBeatAccent 0.28s ease-out forwards;
}
.ct-beat-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(196,181,212,0.7);
    pointer-events: none;
}

/* Tap feedback */
.ct-tap-feedback {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    height: 1.4rem;
    transition: opacity 0.3s;
}
@keyframes ctFbFlash {
    0%   { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0.4; transform: scale(1); }
}
.ct-tap-feedback.ct-fb-flash {
    animation: ctFbFlash 0.5s ease-out forwards;
}

/* Session stats row */
.ct-session-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.ct-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.ct-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #d946ef;
}
.ct-stat-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    color: rgba(196,181,212,0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.35);
    text-align: center;
    margin: 0;
    max-width: 280px;
}

/* ── Results screen ────────────────────────────────────────── */
.ct-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 2rem;
    text-align: center;
}
.ct-result-emoji { font-size: 3rem; }
.ct-result-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
}
.ct-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    max-width: 320px;
}
.ct-result-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.8rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.ct-result-card--main {
    grid-column: 1 / -1;
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.3);
}
.ct-result-big {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #d946ef;
}
.ct-result-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #a855f7;
}
.ct-result-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196,181,212,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ct-result-bpm {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.35);
    margin: 0;
}
.ct-result-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 320px;
}
.ct-result-actions .etr-mode-card { flex: 1; min-width: 120px; text-align: center; justify-content: center; }

/* ── Rhythm trainer pattern display ───────────────────────── */
.rt-pattern-display {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1rem;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.rt-dots-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.rt-dot {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: background 0.1s, border-color 0.1s;
    color: rgba(196,181,212,0.5);
}
.rt-dot--quarter { border-color: rgba(168,85,247,0.35); color: rgba(196,181,212,0.8); font-size: 1.4rem; }
.rt-dot--eighth  { border-color: rgba(59,130,246,0.35); color: rgba(147,197,253,0.8); font-size: 1rem; width: 32px; height: 32px; }
.rt-dot--rest    { border-color: rgba(255,255,255,0.06); color: rgba(196,181,212,0.2); }
@keyframes rtDotActive {
    0%   { background: rgba(217,70,239,0.5); transform: scale(1.2); }
    100% { background: rgba(168,85,247,0.1); transform: scale(1); }
}
.rt-dot--active { animation: rtDotActive 0.25s ease-out forwards; }

/* Phase indicator */
.rt-phase-indicator {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(196,181,212,0.6);
    text-align: center;
    min-height: 1.3rem;
}

/* Controls row */
.rt-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.rt-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.65rem 1.2rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.rt-btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.rt-btn:disabled { opacity: 0.35; cursor: default; }
.rt-btn--play   { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; }
.rt-btn--record { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.rt-btn--submit { background: linear-gradient(135deg, #059669, #047857); color: #fff; }

/* ── Rhythm Trainer v2 — listening state glow ────────────────── */
@keyframes rtListenPulse {
    0%   { box-shadow: 0 0 0 0   rgba(217,70,239,0.5); border-color: rgba(217,70,239,0.7); }
    50%  { box-shadow: 0 0 0 14px rgba(217,70,239,0); border-color: rgba(217,70,239,0.9); }
    100% { box-shadow: 0 0 0 0   rgba(217,70,239,0); border-color: rgba(217,70,239,0.7); }
}
.ct-beat-circle.rt-listening-glow {
    animation: rtListenPulse 1.2s ease-in-out infinite;
    border-color: rgba(217,70,239,0.7);
    background: rgba(217,70,239,0.12);
}
/* Tapped dot state */
.rt-dot--tapped {
    border-color: rgba(217,70,239,0.7) !important;
    color: #d946ef !important;
    background: rgba(217,70,239,0.15) !important;
}

/* ================================================================
   PIANO TRAINERS — pt-* / sb-* classes
   Used by pianoTrainers.js (PitchTrainer, PianoChordTrainer,
   ProgressionTrainer, ScaleBuilderTrainer)
================================================================ */

/* ── Question screen ───────────────────────────────────────── */
.pt-q-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 0.5rem 0 2rem;
}
.pt-q-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f0e7ff;
    text-align: center;
    margin: 0;
}
.pt-q-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.pt-replay-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(196,181,212,0.7);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pt-replay-btn:hover { background: rgba(168,85,247,0.15); color: #d946ef; }

/* ── Note answer grid (Pitch Trainer) ─────────────────────── */
.pt-note-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    width: 100%;
    max-width: 340px;
}
.pt-note-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #e9deff;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.9rem 0.3rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-align: center;
}
.pt-note-btn:hover { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.5); transform: translateY(-2px); }
.pt-note-btn:active { transform: scale(0.95); }

/* ── Chord answer grid ─────────────────────────────────────── */
.pt-chord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    width: 100%;
    max-width: 340px;
}
.pt-chord-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e9deff;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-align: center;
}
.pt-chord-btn:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.5); transform: translateY(-2px); }

/* ── Answer state colors ───────────────────────────────────── */
.pt-btn--correct {
    background: rgba(16,185,129,0.2) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
}
.pt-btn--wrong {
    background: rgba(239,68,68,0.15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

/* ── Feedback ─────────────────────────────────────────────── */
.pt-feedback {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    min-height: 1.4rem;
    text-align: center;
}
.pt-fb--correct { color: #10b981; }
.pt-fb--wrong   { color: #ef4444; }
@keyframes ptFbShake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-6px); }
    40%,80% { transform: translateX(6px); }
}
.pt-fb-shake { animation: ptFbShake 0.5s ease; }

/* ── Stats row ─────────────────────────────────────────────── */
.pt-stats-row {
    display: flex;
    gap: 1.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196,181,212,0.5);
    font-weight: 600;
}

/* ── Level card badge ──────────────────────────────────────── */
.pt-level-card { cursor: pointer; }

/* ── Chord Progression display ─────────────────────────────── */
.pt-prog-display {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    min-height: 3rem;
}
.pt-prog-step {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(196,181,212,0.5);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.pt-prog-step--active {
    color: #f0e7ff;
    background: rgba(168,85,247,0.2);
    border-color: rgba(168,85,247,0.5);
}
.pt-prog-arrow {
    font-size: 0.75rem;
    color: rgba(196,181,212,0.25);
}

/* ── Progression options ───────────────────────────────────── */
.pt-prog-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 360px;
}
.pt-prog-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    font-family: 'Outfit', sans-serif;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}
.pt-prog-btn:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.4); }
.pt-prog-btn-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e9deff;
}
.pt-prog-btn-name {
    font-size: 0.72rem;
    color: rgba(196,181,212,0.45);
}

/* ================================================================
   PIANO KEYBOARD — REDESIGNED v4
   Full 2-octave interactive piano (C4–B5, 14 white keys)
   Correct black key math, 3D appearance, smooth animations
================================================================ */

/* ── Base wrapper ─────────────────────────────────────────── */
.pt-keyboard-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0.25rem 0.75rem;
    width: 100%;
}
.pt-keyboard-wrap::-webkit-scrollbar { display: none; }

/* ── Base keyboard container ──────────────────────────────── */
.pt-keyboard {
    --wkey-w: 44px;
    --wkey-h: 150px;
    position: relative;
    display: flex;
    height: var(--wkey-h);
    width: calc(var(--wkey-w) * 8);
    min-width: calc(var(--wkey-w) * 8);
    margin: 0 auto;
    user-select: none;
    /* Subtle shadow under keyboard as a whole */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}

/* ── Key shared base ──────────────────────────────────────── */
.pt-key {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0 0 8px 8px;
    /* GPU layer for smooth animations */
    will-change: transform, box-shadow;
    transition: background 0.08s ease, transform 0.07s ease, box-shadow 0.08s ease;
}

/* ── White keys ───────────────────────────────────────────── */
.pt-key--white {
    width: var(--wkey-w);
    height: 100%;
    /* 3D gradient: lighter at top, slightly ivory-toned */
    background: linear-gradient(175deg, #f8f3ff 0%, #ede4ff 40%, #ddd0f5 100%);
    border: 1px solid rgba(0,0,0,0.18);
    border-top: 2px solid rgba(255,255,255,0.6);
    box-shadow:
        inset 0 -3px 5px rgba(0,0,0,0.12),
        inset 1px 0 0 rgba(255,255,255,0.5),
        2px 0 0 rgba(0,0,0,0.05);
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 9px;
    z-index: 1;
    /* Subtle rounded border at bottom */
    border-radius: 0 0 7px 7px;
}
.pt-key--white:hover {
    background: linear-gradient(175deg, #f0e8ff 0%, #e0d0ff 40%, #cdbdf0 100%);
    box-shadow:
        inset 0 -3px 5px rgba(168,85,247,0.15),
        inset 1px 0 0 rgba(255,255,255,0.5),
        2px 0 0 rgba(0,0,0,0.05);
}
.pt-key--white:active,
.pt-key--white.pt-key--pressed {
    background: linear-gradient(175deg, #e8dcff 0%, #d4bcff 40%, #bea8f0 100%);
    transform: scaleY(0.968);
    transform-origin: top center;
    box-shadow: inset 0 -1px 3px rgba(0,0,0,0.1), inset 1px 0 0 rgba(255,255,255,0.3);
}

/* ── Black keys ───────────────────────────────────────────── */
.pt-key--black {
    position: absolute;
    /* Width: 62% of white key; Height: 61% of white key */
    width: calc(var(--wkey-w) * 0.62);
    height: 61%;
    /* 3D gradient: near-black at top fading slightly lighter */
    background: linear-gradient(175deg, #1e1030 0%, #261540 50%, #1a0d2e 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 -4px 6px rgba(0,0,0,0.5),
        inset 0 2px 3px rgba(255,255,255,0.06),
        3px 4px 8px rgba(0,0,0,0.55),
        -1px 0 0 rgba(0,0,0,0.4);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    border-radius: 0 0 5px 5px;
    /* Black keys slightly taller start — achieved by top:0 in absolute */
    top: 0;
}
.pt-key--black:hover {
    background: linear-gradient(175deg, #2e1848 0%, #3a2258 50%, #271540 100%);
    box-shadow:
        inset 0 -4px 6px rgba(0,0,0,0.4),
        inset 0 2px 3px rgba(255,255,255,0.08),
        3px 4px 8px rgba(168,85,247,0.2),
        -1px 0 0 rgba(0,0,0,0.4);
}
.pt-key--black:active,
.pt-key--black.pt-key--pressed {
    background: linear-gradient(175deg, #3a2258 0%, #472a68 50%, #321a4a 100%);
    transform: scaleY(0.965);
    transform-origin: top center;
    box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.5),
        inset 0 2px 3px rgba(255,255,255,0.05),
        1px 2px 4px rgba(0,0,0,0.55);
}

/* ── Key labels ───────────────────────────────────────────── */
.pt-key-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
    letter-spacing: -0.01em;
}
.pt-key--white .pt-key-label { color: rgba(80,40,140,0.45); }
.pt-key--black .pt-key-label { color: rgba(200,180,230,0.4); }
/* C-root keys get a subtle purple tint on label */
.pt-key--white[data-note^="C"] .pt-key-label { color: rgba(168,85,247,0.55); }

/* ═══════════════════════════════════════════════════════════
   KEY ANIMATIONS
═══════════════════════════════════════════════════════════ */

/* Press flash */
@keyframes ptKeyPress {
    0%   { filter: brightness(1); }
    25%  { filter: brightness(1.55); }
    100% { filter: brightness(1); }
}
.pt-key--pressed { animation: ptKeyPress 0.28s ease; }

/* ── Correct glow (purple) ─────────────────────────────────── */
@keyframes ptKeyGlowWhite {
    0%,100% {
        background: linear-gradient(175deg, #f0e0ff 0%, #e0c8ff 40%, #cfb4f8 100%) !important;
        box-shadow:
            inset 0 -3px 5px rgba(168,85,247,0.2),
            0 0 12px rgba(168,85,247,0.5),
            0 0 28px rgba(168,85,247,0.25);
        border-color: rgba(168,85,247,0.6) !important;
    }
    50% {
        background: linear-gradient(175deg, #ead8ff 0%, #d4b8ff 40%, #c2a0f5 100%) !important;
        box-shadow:
            inset 0 -3px 5px rgba(168,85,247,0.3),
            0 0 22px rgba(168,85,247,0.7),
            0 0 45px rgba(168,85,247,0.35);
        border-color: #a855f7 !important;
    }
}
@keyframes ptKeyGlowBlack {
    0%,100% {
        background: linear-gradient(175deg, #4a2870 0%, #5b3488 50%, #3d2060 100%) !important;
        box-shadow:
            inset 0 -4px 6px rgba(0,0,0,0.4),
            0 0 12px rgba(168,85,247,0.6),
            0 0 28px rgba(168,85,247,0.3);
        border-color: rgba(168,85,247,0.5) !important;
    }
    50% {
        background: linear-gradient(175deg, #5e3490 0%, #7040a8 50%, #501e78 100%) !important;
        box-shadow:
            inset 0 -4px 6px rgba(0,0,0,0.35),
            0 0 22px rgba(168,85,247,0.8),
            0 0 45px rgba(168,85,247,0.4);
        border-color: #a855f7 !important;
    }
}
.pt-key--glow { --key-glow-color: #a855f7; }
.pt-key--white.pt-key--glow {
    animation: ptKeyGlowWhite 1.1s ease-in-out infinite !important;
}
.pt-key--black.pt-key--glow {
    animation: ptKeyGlowBlack 1.1s ease-in-out infinite !important;
}

/* ── Wrong key flash (red) ─────────────────────────────────── */
@keyframes ptKeyErrorWhite {
    0%,100% { background: linear-gradient(175deg, #f8f3ff 0%, #ede4ff 40%, #ddd0f5 100%); }
    20%,65% {
        background: linear-gradient(175deg, #ffe0e0 0%, #ffb8b8 40%, #f09090 100%) !important;
        box-shadow: 0 0 14px rgba(239,68,68,0.7), 0 0 30px rgba(239,68,68,0.3) !important;
        border-color: rgba(239,68,68,0.7) !important;
    }
}
@keyframes ptKeyErrorBlack {
    0%,100% { background: linear-gradient(175deg, #1e1030 0%, #261540 50%, #1a0d2e 100%); }
    20%,65% {
        background: linear-gradient(175deg, #5a1010 0%, #7a2020 50%, #4a0808 100%) !important;
        box-shadow: 0 0 14px rgba(239,68,68,0.8), 0 0 30px rgba(239,68,68,0.35) !important;
        border-color: rgba(239,68,68,0.6) !important;
    }
}
@keyframes ptKeyShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}
.pt-key--white.pt-key--error {
    animation: ptKeyErrorWhite 0.52s ease, ptKeyShake 0.35s ease !important;
}
.pt-key--black.pt-key--error {
    animation: ptKeyErrorBlack 0.52s ease, ptKeyShake 0.35s ease !important;
}

/* Disabled */
.pt-key--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ── Particle burst on correct tap ─────────────────────────── */
@keyframes sbParticleOut {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--p-angle)) translateX(0px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--p-angle)) translateX(32px) scale(0.3); }
}
.sb-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: sbParticleOut 0.55s ease-out forwards;
    background: var(--p-color, #a855f7);
}

/* ═══════════════════════════════════════════════════════════
   SCALE BUILDER SCREEN LAYOUT
═══════════════════════════════════════════════════════════ */

/* Scale progress display */
.sb-progress-row {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(168,85,247,0.12);
    border-radius: 14px;
    width: 100%;
    max-width: 620px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sb-progress-row::-webkit-scrollbar { display: none; }

.sb-step {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.08);
    color: rgba(196,181,212,0.3);
    background: rgba(255,255,255,0.02);
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.sb-step--active {
    border-color: #a855f7;
    color: #e879f9;
    background: rgba(168,85,247,0.18);
    transform: scale(1.18);
    box-shadow: 0 0 10px rgba(168,85,247,0.35);
}
.sb-step--done {
    border-color: #10b981;
    color: #34d399;
    background: rgba(16,185,129,0.14);
    animation: sbStepComplete 0.32s ease;
}
@keyframes sbStepComplete {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.sb-step-arrow {
    font-size: 0.55rem;
    color: rgba(196,181,212,0.12);
    flex-shrink: 0;
}

/* Instruction text */
.sb-instruction {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: rgba(196,181,212,0.7);
    text-align: center;
    min-height: 1.6rem;
}
.sb-instruction strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    color: #f0e7ff;
}

/* Step demo pulse animation */
@keyframes sbStepDemo {
    0%,100% { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.45); color: #93c5fd; }
    50%      { background: rgba(59,130,246,0.28); border-color: #3b82f6; }
}
.sb-step--demo {
    animation: sbStepDemo 0.52s ease-in-out infinite;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

/* Screen containers */
.sb-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0 2rem;
}
.sb-keyboard-area { width: 100%; max-width: 380px; }

/* ── Scale Builder v3 fullscreen layout ───────────────────── */
.sb-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}
.sb-screen-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0 1rem;
}
.sb-keyboard-area-v2 { width: 100%; }

.sb-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 620px;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   FULL-WIDTH SCROLLABLE KEYBOARD WRAPPER (Scale Builder)
═══════════════════════════════════════════════════════════ */
.pt-keyboard-wrap--fullpage {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,85,247,0.35) transparent;
    padding-bottom: 8px;
    /* Subtle ambient glow under keyboard area */
    background: linear-gradient(0deg, rgba(88,28,135,0.08) 0%, transparent 100%);
    border-radius: 0 0 12px 12px;
}
.pt-keyboard-wrap--fullpage::-webkit-scrollbar { height: 4px; }
.pt-keyboard-wrap--fullpage::-webkit-scrollbar-track { background: transparent; }
.pt-keyboard-wrap--fullpage::-webkit-scrollbar-thumb {
    background: rgba(168,85,247,0.38);
    border-radius: 99px;
}

/* ── Scale Builder 2-octave keyboard (C4–B5, 14 white keys) ── */
/*
   BLACK KEY POSITIONING — CORRECTED MATH:
   Given white key width W and black key width B = 0.62W (half = 0.31W):
   Black key's left edge = (right-neighbor white index × W) − (B ÷ 2)
   As multiples of W:
     C# (right of C@0):  1×W − 0.31W = 0.69W
     D# (right of D@1):  2×W − 0.31W = 1.69W
     F# (right of F@3):  4×W − 0.31W = 3.69W
     G# (right of G@4):  5×W − 0.31W = 4.69W
     A# (right of A@5):  6×W − 0.31W = 5.69W
   Second octave adds 7 white keys (7W) to each offset.
   These values replace the previous incorrect offsets.
*/
.pt-keyboard--sb {
    --wkey-w: 44px;
    --wkey-h: 175px;
    height: var(--wkey-h);
    width: calc(var(--wkey-w) * 14);
    min-width: calc(var(--wkey-w) * 14);
    margin: 0 auto;
}

/* Tablet: fill available width, larger keys */
@media (min-width: 560px) {
    .pt-keyboard--sb {
        /* Fill width exactly: subtract 32px for container padding */
        --wkey-w: clamp(44px, calc((100vw - 32px) / 14), 72px);
        width: calc(var(--wkey-w) * 14);
        min-width: unset;
        --wkey-h: 185px;
        height: var(--wkey-h);
    }
}

/* Desktop: capped max width at 1000px */
@media (min-width: 900px) {
    .pt-keyboard--sb {
        --wkey-w: clamp(52px, calc((min(1000px, 100vw) - 48px) / 14), 78px);
        width: calc(var(--wkey-w) * 14);
        --wkey-h: 200px;
        height: var(--wkey-h);
    }
}

/* ── Legacy pt-keyboard--full (same improved sizing) ─────── */
.pt-keyboard--full {
    --wkey-w: 40px;
    --wkey-h: 155px;
    height: var(--wkey-h);
    min-width: calc(var(--wkey-w) * 14);
    width: calc(var(--wkey-w) * 14);
    margin: 0 auto;
}
@media (min-width: 500px) {
    .pt-keyboard--full {
        --wkey-w: clamp(40px, calc((100vw - 48px) / 14), 64px);
        width: calc(var(--wkey-w) * 14);
        min-width: unset;
        --wkey-h: 168px;
        height: var(--wkey-h);
    }
}

/* ── Responsive tweak for compact screens ─────────────────── */
@media (min-width: 480px) {
    .pt-note-grid { grid-template-columns: repeat(4,1fr); }
    .pt-chord-grid { grid-template-columns: repeat(2,1fr); }
    .pt-keyboard { --wkey-w: 46px; }
}

/* ═══════════════════════════════════════════════════════════
   PROGRESSION TRAINER v2 (unchanged logic, style tweaks)
═══════════════════════════════════════════════════════════ */
.prog-teach-header { text-align: center; }
.prog-teach-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.45);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.prog-teach-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
}
.prog-teach-display { background: rgba(168,85,247,0.06); border-color: rgba(168,85,247,0.2); }
.prog-play-big {
    font-size: 0.95rem;
    padding: 0.65rem 1.6rem;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.prog-play-big:hover { opacity: .85; transform: translateY(-1px); }
.prog-teach-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.4);
    text-align: center;
}
.prog-teach-nav {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    width: 100%;
    max-width: 360px;
}
.prog-teach-nav .rt-btn { flex: 1; }

.pt-prog-step--hidden {
    color: rgba(196,181,212,0.2) !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
}
.pt-prog-step--revealed {
    color: #a855f7 !important;
    background: rgba(168,85,247,0.15) !important;
    border-color: rgba(168,85,247,0.4) !important;
}

/* ================================================================
   SCALE BUILDER — DESKTOP FULLWIDTH OVERRIDE
   etr-wrapper is capped at 640px globally; we must break that cap
   so the 2-octave piano can fill the entire content pane.
================================================================ */
.etr-wrapper.sb-fullscreen {
    max-width: none !important;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
/* Non-keyboard elements: keep them centred at a readable width */
.etr-wrapper.sb-fullscreen .etr-topbar,
.etr-wrapper.sb-fullscreen .sb-progress-row,
.etr-wrapper.sb-fullscreen .sb-instruction,
.etr-wrapper.sb-fullscreen .pt-feedback,
.etr-wrapper.sb-fullscreen .sb-bottom-row {
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
   SCALE BUILDER — MOBILE VERTICAL PIANO  (≤ 559px)
   Keyboard is rotated 90° by JS. CSS handles the visual polish.
================================================================ */
@media (max-width: 559px) {

    /* ── Tighten the overall screen gaps so piano gets max space ── */
    .sb-screen-v2 {
        gap: 0.45rem;
        padding: 0.3rem 0 0.6rem;
    }

    /* ── Progress row: compact, horizontal scroll if needed ─────── */
    .sb-progress-row {
        max-width: 100%;
        padding: 0.45rem 0.6rem;
        border-radius: 10px;
        gap: 0.18rem;
    }
    .sb-step {
        min-width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .sb-step-arrow { font-size: 0.5rem; }

    /* ── Instruction text smaller ───────────────────────────────── */
    .sb-instruction { font-size: 0.85rem; }

    /* ── Keyboard area: JS sets height; we just tidy layout ─────── */
    .sb-keyboard-area-v2 {
        /* height is set by JS _fitKeyboard() */
        position: relative;
    }

    /* ── The wrap: JS sets width; disable scrolling (not needed) ── */
    .pt-keyboard-wrap--fullpage {
        overflow: visible !important;
        padding: 0 !important;
        background: none !important;
        scrollbar-width: none;
    }

    /* ── Rotated keyboard: JS handles transform + dimensions.
          We only add the shadow + allow overflow ─────────────────── */
    .pt-keyboard--sb {
        /* JS sets transform: rotate(90deg); we just ensure it visually overflows */
        overflow: visible;
    }

    /* ── Counter-rotate labels so they stay readable ─────────────── */
    .pt-keyboard--sb .pt-key-label {
        transform: rotate(-90deg);
        font-size: 0.52rem;
    }

    /* ── White keys: slightly taller border-radius for vertical feel  */
    .pt-keyboard--sb .pt-key--white {
        border-radius: 0 0 7px 7px;
    }

    /* ── Bottom row: stack vertically, centred ──────────────────── */
    .sb-bottom-row {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 0 0.5rem;
    }
    .sb-bottom-row .pt-stats-row {
        font-size: 0.78rem;
        gap: 0.6rem;
    }
    .sb-bottom-row > div:last-child {
        gap: 0.4rem;
    }
    .pt-replay-btn {
        padding: 0.4rem 0.9rem;
        font-size: 0.8rem;
    }
}

/* ── Very small phones (≤380px): slightly smaller key width ─── */
@media (max-width: 380px) {
    .sb-instruction { font-size: 0.78rem; }
    .sb-step { min-width: 22px; height: 22px; font-size: 0.65rem; }
}

/* ================================================================
   NOTE RECOGNITION — FULLWIDTH PIANO (Desktop)
   etr-wrapper is capped at 640px globally; nt-fullwidth breaks that
   so the 2-octave keyboard fills the content pane.
================================================================ */
.etr-wrapper.nt-fullwidth {
    max-width: none !important;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
/* Constrain non-keyboard elements to a readable width */
.etr-wrapper.nt-fullwidth .etr-topbar,
.etr-wrapper.nt-fullwidth .etr-mode-screen .etr-mode-header,
.etr-wrapper.nt-fullwidth .etr-stats-row,
.etr-wrapper.nt-fullwidth .etr-mode-cards {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
/* Piano section itself gets full width */
.etr-wrapper.nt-fullwidth .etr-piano-section {
    width: 100%;
    max-width: none;
}
.nt-piano-area {
    width: 100%;
}
/* Desktop: no overflow scroll on the wrap */
@media (min-width: 560px) {
    .nt-piano-area .pt-keyboard-wrap--fullpage {
        overflow-x: hidden;
    }
}

/* ================================================================
   NOTE RECOGNITION — MOBILE VERTICAL PIANO (≤ 559px)
================================================================ */
@media (max-width: 559px) {
    /* Piano area: JS sets height */
    .nt-piano-area {
        position: relative;
    }
    /* Keyboard wrap: disable scroll, JS handles layout */
    .nt-piano-area .pt-keyboard-wrap--fullpage {
        overflow: visible !important;
        padding: 0 !important;
        background: none !important;
        scrollbar-width: none;
    }
    /* Counter-rotate labels so they read correctly */
    .nt-piano-area .pt-keyboard--sb .pt-key-label {
        transform: rotate(-90deg);
        font-size: 0.52rem;
    }
    /* Tighten mode screen padding so piano has room */
    .etr-wrapper.nt-fullwidth .etr-mode-screen {
        padding-bottom: 0.5rem;
    }
    .etr-piano-section {
        margin-top: 0.75rem;
    }
}
/* ================================================================
   harmonium.css — ChordStar Harmonium
   Desktop + Mobile responsive styles
================================================================ */

/* DESKTOP styles */

/* Harmonium scoped CSS variables */
#hm-app-root {
  --bg:           #0a0514;
  --primary:      #d946ef;
  --purple:       #a855f7;
  --amber:        #f59e0b;
  
  --gold:         #fbbf24;
  --green:        #22c55e;
  --text:         #f0e7ff;
  --dim:          rgba(196,181,212,0.55);
  --dim2:         rgba(196,181,212,0.22);
  --wood-dark:    #2d1505;
  --wood-mid:     #5c2d0e;
  --wood-light:   #8b4513;
  --wood-accent:  #c47a30;
  --key-white:    #f5f0e8;
  --brass:        #c8a84b;
  --brass-dark:   #8b6914;
  --radius:       14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: #f0e7ff;
  background: #0a0514;
  background-image: radial-gradient(ellipse at 18% 8%, rgba(168,85,247,0.13) 0%, transparent 50%),
                    radial-gradient(ellipse at 82% 85%, rgba(217,70,239,0.09) 0%, transparent 45%);
}

/* ══════════════════════════════════════════════
   DESKTOP — ChordStar Harmonium
   Two-column: [Instrument 60%] | [Chord Panel 40%]
══════════════════════════════════════════════ */


#hm-app-root *, #hm-app-root *::before, #hm-app-root *::after { box-sizing: border-box; }


/* ── LOADING ── */
.hm-loading {
  position: fixed; inset: 0; background: rgba(10,5,20,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; z-index: 200; transition: opacity 0.5s;
}
.hm-loading.done { opacity: 0; pointer-events: none; }
.hm-loading-icon { font-size: 3rem; animation: spin 1.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hm-loading-text { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold); }
.hm-loading-sub  { font-size: 0.8rem; color: var(--dim); max-width: 320px; text-align: center; }
.hm-loading-bar  { width: 220px; height: 3px; background: rgba(200,168,75,0.2); border-radius: 99px; overflow: hidden; }
.hm-loading-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); border-radius: 99px; transition: width 0.3s; }

/* ── HEADER ── */
.hm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 1.25rem; border-bottom: 1px solid rgba(168,85,247,0.12);
  flex-shrink: 0; background: rgba(10,5,20,0.92); backdrop-filter: blur(10px);
}
.hm-logo { display: flex; align-items: center; gap: 0.6rem; }
.hm-logo-icon { font-size: 1.4rem; filter: drop-shadow(0 0 8px rgba(217,70,239,0.6)); }
.hm-logo-text {
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.05em;
  background: linear-gradient(135deg, #d946ef, #a855f7, #f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hm-logo-sub { font-size: 0.62rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; -webkit-text-fill-color: var(--dim); }
.hm-midi-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--dim); }
.hm-midi-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a4a6a; transition: all 0.3s; }
.hm-midi-dot.active { background: #10b981; box-shadow: 0 0 6px #10b981; }
.hm-midi-dot.error  { background: #ef4444; }

/* ══════════════════════════════════════════════
   MAIN TWO-COLUMN LAYOUT
══════════════════════════════════════════════ */
.hm-main-layout {
  display: flex; flex-direction: row; flex: 1; min-height: 0;
  padding: 0.5rem 0.65rem; gap: 0.6rem; overflow: hidden;
}

/* LEFT: Instrument column */
.hm-instrument-col {
  flex: 0 0 60%; min-width: 0; display: flex; flex-direction: column;
}

/* RIGHT: Chord panel column */
.hm-panel-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
}

/* ── HARMONIUM BODY ── */
.hm-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--wood-mid) 0%, var(--wood-dark) 60%, #1a0a05 100%);
  border-radius: 18px; border: 2px solid var(--wood-light);
  box-shadow: 0 0 0 1px rgba(196,119,48,0.2), 0 8px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden; position: relative;
}
.hm-body::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(87deg, transparent 0px, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
  pointer-events: none; border-radius: inherit;
}

/* ── TOP PANEL ── */
.hm-top-panel {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: center;
  padding: 0.5rem 1.1rem 0.4rem; border-bottom: 2px solid rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.25); flex-shrink: 0;
}
.hm-section-left  { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; width: fit-content; }
.hm-section-right { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; width: fit-content; justify-self: flex-end; }
.hm-center-section{ display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }

.hm-name-plate {
  background: linear-gradient(135deg, var(--brass-dark), var(--brass), var(--brass-dark));
  border-radius: 8px; padding: 0.3rem 1.1rem; border: 1px solid var(--brass);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.hm-name-plate span { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 700; color: var(--bg); letter-spacing: 0.12em; }

.hm-bellows { width: 72px; height: 36px; display: flex; align-items: center; justify-content: center; }
.hm-bellows-bars { width: 100%; height: 100%; display: flex; align-items: center; gap: 3px; }
.hm-bellows-bar { flex: 1; height: 100%; background: linear-gradient(to bottom, #8b1a1a, #4a0e0e); border-radius: 2px; }
@keyframes bellow { 0%{transform:scaleY(1)} 50%{transform:scaleY(0.55)} 100%{transform:scaleY(1)} }
.bellowing .hm-bellows-bar:nth-child(odd)  { animation: bellow 0.38s ease-in-out infinite; }
.bellowing .hm-bellows-bar:nth-child(even) { animation: bellow 0.38s 0.05s ease-in-out infinite; }

.hm-ctrl-group { display: flex; flex-direction: column; gap: 0.3rem; background: rgba(0,0,0,0.32); border: 1px solid rgba(200,168,75,0.16); border-radius: 7px; padding: 0.38rem 0.55rem; }
.hm-ctrl-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brass); font-family: 'Space Grotesk', sans-serif; }
.hm-ctrl-row { display: flex; gap: 0.3rem; align-items: center; justify-content: flex-start; }

.hm-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700;
  padding: 0.26rem 0.6rem; border-radius: 6px;
  border: 1.5px solid rgba(200,168,75,0.3); background: linear-gradient(180deg, rgba(45,22,4,0.85) 0%, rgba(18,7,2,0.92) 100%); color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 3px rgba(0,0,0,0.45);
  cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent;
}
.hm-btn:hover { border-color: var(--brass); background: rgba(200,168,75,0.1); }
.hm-btn.active { border-color: var(--primary); background: rgba(217,70,239,0.18); color: #e879f9; box-shadow: 0 0 8px rgba(217,70,239,0.3); }
.hm-btn.green-active { border-color: var(--green) !important; background: rgba(34,197,94,0.18) !important; color: var(--green) !important; box-shadow: 0 0 10px rgba(34,197,94,0.35) !important; }

.hm-value-display { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--gold); min-width: 2.4rem; text-align: center; text-shadow: 0 0 10px rgba(251,191,36,0.5); background: rgba(0,0,0,0.28); border: 1px solid rgba(200,168,75,0.18); border-radius: 4px; padding: 0.04rem 0.18rem; }
.hm-slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 99px; background: rgba(200,168,75,0.2); outline: none; cursor: pointer; }
.hm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, var(--brass), var(--gold)); border: 1.5px solid rgba(0,0,0,0.5); cursor: pointer; box-shadow: 0 0 5px rgba(200,168,75,0.45); }
.hm-slider.green-slider { background: rgba(34,197,94,0.2); }
.hm-slider.green-slider::-webkit-slider-thumb { background: linear-gradient(135deg, #16a34a, var(--green)); }

/* ── STOPS ── */
.hm-stops {
  display: flex; gap: 0.55rem; align-items: center;
  padding: 0.3rem 1.1rem; background: rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(0,0,0,0.35); flex-wrap: wrap; flex-shrink: 0;
}
.hm-stop { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-stop-knob {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b3c1a, #2d1505);
  border: 2px solid var(--wood-accent); box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative; transition: all 0.15s;
}
.hm-stop-knob::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(var(--rot,-45deg)); width:2px; height:9px; background:var(--wood-accent); border-radius:1px; transition:transform 0.3s; }
.hm-stop.on .hm-stop-knob { background: radial-gradient(circle at 40% 35%, #d946ef, #7c1a8a); border-color: var(--primary); box-shadow: 0 0 12px rgba(217,70,239,0.5), 0 2px 6px rgba(0,0,0,0.6); --rot: 45deg; }
.hm-stop-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.52rem; font-weight: 700; color: var(--dim); text-transform: uppercase; }
.hm-stop.on .hm-stop-label { color: var(--primary); }
.hm-stop-pitch { font-size: 0.45rem; color: var(--dim2); }
.hm-stop.on .hm-stop-pitch { color: rgba(217,70,239,0.6); }

/* ── DRONE ── */
.hm-drone-section {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 1.1rem; background: rgba(0,0,0,0.15);
  border-bottom: 2px solid rgba(0,0,0,0.3); flex-wrap: wrap; flex-shrink: 0;
}
.hm-drone-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brass); white-space: nowrap; }
.hm-drone-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 700;
  padding: 0.2rem 0.45rem; border-radius: 6px;
  border: 1.5px solid rgba(200,168,75,0.22); background: rgba(0,0,0,0.35); color: var(--dim);
  cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent;
}
.hm-drone-btn:hover { border-color: var(--brass); color: var(--gold); }
.hm-drone-btn.active { border-color: var(--amber); background: rgba(245,158,11,0.22); color: var(--gold); box-shadow: 0 0 10px rgba(245,158,11,0.4); }

/* ── KEYBOARD ── */
.hm-keyboard-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hm-keyboard-wrap {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
  padding: 0.55rem 1.1rem 0.65rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(200,168,75,0.3) transparent;
  flex: 1; min-height: 0; display: flex; align-items: stretch;
}
.hm-keyboard-wrap::-webkit-scrollbar { height: 4px; }
.hm-keyboard-wrap::-webkit-scrollbar-thumb { background: rgba(200,168,75,0.3); border-radius: 99px; }
.hm-keyboard { position: relative; display: flex; width: max-content; min-width: 100%; height: 100%; min-height: 110px; user-select: none; -webkit-user-select: none; justify-content: center; }

/* White keys */
.hm-key-w {
  position: relative; width: 48px; height: 100%;
  background: linear-gradient(180deg, var(--key-white) 0%, #ede0cc 70%, #d4c4a0 100%);
  border: 1px solid rgba(0,0,0,0.35); border-top: 2px solid rgba(255,255,255,0.6);
  border-radius: 0 0 8px 8px; cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 6px; z-index: 1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
  transition: background 0.05s, transform 0.05s, box-shadow 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.hm-key-w:hover { background: linear-gradient(180deg, #ede0cc 0%, #d4c4a0 70%, #c0a880 100%); }
.hm-key-w.pressed {
  background: linear-gradient(180deg, #f0d0ff 0%, #d946ef 50%, #9013a0 100%) !important;
  transform: scaleY(0.97); transform-origin: top;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 20px rgba(217,70,239,0.8) !important;
}
.hm-key-w.in-scale {
  background: linear-gradient(180deg, #dcfce7 0%, #86efac 65%, #4ade80 100%) !important;
  box-shadow: 0 0 14px rgba(34,197,94,0.55) inset, 0 4px 8px rgba(0,0,0,0.35) !important;
}
.hm-key-w.scale-root {
  background: linear-gradient(180deg, #bbf7d0 0%, #22c55e 55%, #15803d 100%) !important;
  box-shadow: 0 0 18px rgba(22,163,74,0.75) inset, 0 4px 8px rgba(0,0,0,0.35) !important;
}
.hm-key-w.autoplay-hi {
  background: linear-gradient(180deg, #fff 0%, var(--green) 50%, #15803d 100%) !important;
  box-shadow: 0 0 28px rgba(34,197,94,1) !important;
  transform: scaleY(0.96); transform-origin: top;
}
.hm-key-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem; font-weight: 700; color: rgba(80,40,20,0.6); pointer-events: none; }
.hm-key-w.pressed .hm-key-label { color: rgba(255,255,255,0.85); }
.hm-key-w.in-scale .hm-key-label, .hm-key-w.scale-root .hm-key-label { color: rgba(5,46,22,0.85); }
.hm-key-kb {
  font-size: 0.48rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  color: rgba(80,40,20,0.5); background: rgba(200,168,75,0.18);
  padding: 1px 4px; border-radius: 3px; pointer-events: none; margin-bottom: 2px;
  border: 1px solid rgba(200,168,75,0.22); letter-spacing: 0;
}
.hm-key-w.pressed .hm-key-kb { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }
.hm-key-w.in-scale .hm-key-kb, .hm-key-w.scale-root .hm-key-kb { color: rgba(5,46,22,0.7); background: rgba(34,197,94,0.22); border-color: rgba(34,197,94,0.35); }

/* Black keys */
.hm-key-b {
  position: absolute; width: 30px; height: 58%; top: 0;
  background: linear-gradient(180deg, #2d1a45 0%, #1a0a2e 40%, #0d0516 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 5px 5px;
  cursor: pointer; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.05s, box-shadow 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.hm-key-b:hover { background: linear-gradient(180deg, #3d2a55 0%, #2a1a3e 40%, #1a0a28 100%); }
.hm-key-b.pressed {
  background: linear-gradient(180deg, #d946ef 0%, #7c1aa0 60%, #3d0050 100%) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 20px rgba(217,70,239,0.8) !important;
}
.hm-key-b.in-scale { background: linear-gradient(180deg, #166534 0%, #15803d 40%, #16a34a 100%) !important; box-shadow: 0 0 14px rgba(34,197,94,0.75), 0 4px 10px rgba(0,0,0,0.7) !important; }
.hm-key-b.scale-root { background: linear-gradient(180deg, #14532d 0%, #059669 40%, #10b981 100%) !important; box-shadow: 0 0 18px rgba(16,185,129,0.9), 0 4px 10px rgba(0,0,0,0.7) !important; }
.hm-key-b.autoplay-hi { background: linear-gradient(180deg, #4ade80 0%, #16a34a 60%, #14532d 100%) !important; box-shadow: 0 0 28px rgba(34,197,94,1) !important; }
.hm-key-b .hm-key-label { font-size: 0.42rem; color: rgba(200,180,230,0.45); pointer-events: none; }
.hm-key-b.pressed .hm-key-label { color: rgba(255,255,255,0.75); }
.hm-key-b.in-scale .hm-key-label, .hm-key-b.scale-root .hm-key-label { color: rgba(200,255,220,0.85); }
.hm-key-b .hm-key-kb { font-size: 0.4rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: rgba(180,150,220,0.55); background: rgba(200,168,75,0.12); padding: 1px 3px; border-radius: 3px; pointer-events: none; margin-bottom: 2px; border: 1px solid rgba(200,168,75,0.18); }
.hm-key-b.pressed .hm-key-kb { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); }
.hm-key-b.in-scale .hm-key-kb, .hm-key-b.scale-root .hm-key-kb { color: rgba(200,255,220,0.7); background: rgba(34,197,94,0.18); }

/* ── KEYBOARD LEGEND ── */
.hm-kb-legend { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 1.1rem 0.4rem; border-top: 1px solid rgba(0,0,0,0.3); flex-wrap: wrap; flex-shrink: 0; }
.hm-kb-legend-title { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim2); font-family: 'Space Grotesk', sans-serif; }
.hm-kb-item { display: flex; align-items: center; gap: 0.22rem; }
.hm-kb-key { font-size: 0.56rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; padding: 0.1rem 0.3rem; border-radius: 4px; background: rgba(0,0,0,0.5); border: 1px solid rgba(200,168,75,0.25); color: var(--gold); }
.hm-kb-note { font-size: 0.56rem; color: var(--dim); }

/* ── WAVEFORM ── */
.hm-wave-strip { padding: 0.2rem 1.1rem; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,0,0,0.4); flex-shrink: 0; }
.hm-vis-canvas { width: 100%; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.45); border: 1px solid rgba(168,85,247,0.12); display: block; }

/* ── STATUS BAR ── */
.hm-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.25rem 1.1rem; background: rgba(0,0,0,0.4); border-top: 1px solid rgba(200,168,75,0.12);
  flex-wrap: wrap; gap: 0.4rem; flex-shrink: 0;
}
.hm-status-note { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; color: var(--primary); text-shadow: 0 0 12px rgba(217,70,239,0.5); min-width: 55px; }
.hm-active-keys { display: flex; gap: 0.28rem; flex-wrap: wrap; }
.hm-active-badge { font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 6px; background: rgba(217,70,239,0.2); border: 1px solid rgba(217,70,239,0.35); color: #e879f9; animation: badgePop 0.15s ease; }
@keyframes badgePop { 0%{transform:scale(0.8)} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
.hm-chord-name { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 20px rgba(251,191,36,0.4); min-width: 3.5rem; min-height: 2.2rem; display: flex; align-items: center; }
.hm-chord-info { display: flex; flex-direction: column; gap: 0.25rem; }
.hm-chord-type { font-size: 0.75rem; color: var(--purple); font-weight: 600; }
.hm-chord-notes { font-size: 0.68rem; color: var(--dim); }
.hm-tuning-info { font-size: 0.68rem; color: var(--dim); }

/* ══════════════════════════════════════════════
   RIGHT PANEL — Always visible on desktop
══════════════════════════════════════════════ */
.hm-panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: rgba(14,6,28,0.92); border: 1px solid rgba(168,85,247,0.18);
  border-radius: var(--radius); backdrop-filter: blur(14px); overflow: hidden;
}
.riyaaz-active-lock .hm-key-w,
.riyaaz-active-lock .hm-key-b { pointer-events: none; opacity: 0.55; filter: saturate(0.3); }
.riyaaz-active-lock .hm-tab-btn[data-tab="presets"] { pointer-events: none; opacity: 0.4; cursor: not-allowed; }

/* Panel toggle hidden on desktop — panel always visible */
#panelToggleBtn { display: none !important; }

.hm-tab-nav { display: flex; border-bottom: 1px solid rgba(168,85,247,0.15); background: rgba(0,0,0,0.3); flex-shrink: 0; }
.hm-tab-btn { flex: 1; font-family: 'Space Grotesk', sans-serif; font-size: 0.73rem; font-weight: 700; padding: 0.48rem 0.5rem; border: none; background: transparent; color: var(--dim); cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent; -webkit-tap-highlight-color: transparent; }
.hm-tab-btn:hover { color: var(--text); background: rgba(168,85,247,0.06); }
.hm-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(217,70,239,0.08); }
.hm-tab-pane { display: none; padding: 0.6rem 1.1rem; overflow-y: auto; flex: 1; min-height: 0; }
.hm-tab-pane.active { display: flex; flex-direction: column; }

/* Chord display (inside status bar) */
.hm-chord-display { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

/* Presets tab */
.hm-preset-section { margin-bottom: 0.75rem; }
.hm-preset-section-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim2); margin-bottom: 0.4rem; font-family: 'Space Grotesk', sans-serif; }
.hm-preset-grid { display: flex; gap: 0.28rem; flex-wrap: wrap; }
.hm-preset-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.73rem; font-weight: 700;
  padding: 0.28rem 0.55rem; border-radius: 7px;
  border: 1.5px solid rgba(168,85,247,0.2); background: rgba(168,85,247,0.06); color: #c084fc;
  cursor: pointer; transition: all 0.12s; user-select: none; -webkit-tap-highlight-color: transparent;
}
.hm-preset-btn:hover { border-color: var(--purple); background: rgba(168,85,247,0.18); color: #e879f9; }
.hm-preset-btn.active { border-color: var(--primary); background: rgba(217,70,239,0.22); color: #f0abfc; box-shadow: 0 0 8px rgba(217,70,239,0.3); }

/* Scale tab */
.hm-scale-ctrl-lbl { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); font-family: 'Space Grotesk', sans-serif; white-space: nowrap; }
.hm-tempo-group { display: flex; align-items: center; gap: 0.4rem; }
.hm-tempo-val { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--green); min-width: 4.2rem; }
.hm-scale-info { font-size: 0.7rem; color: var(--dim); margin-top: 0.5rem; padding: 0.38rem 0.55rem; background: rgba(34,197,94,0.05); border-radius: 6px; border: 1px solid rgba(34,197,94,0.1); }

/* RIYAAZ MODE */
.riyaaz-wrap {
  background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.2);
  border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 0.75rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.riyaaz-row1 { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.riyaaz-title { font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 700; color: var(--green); letter-spacing: 0.08em; }
.riyaaz-beat-sel { display: flex; gap: 0.28rem; align-items: center; }
.riyaaz-beat-lbl { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-family: 'Space Grotesk', sans-serif; }
.riyaaz-beat-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 6px;
  border: 1.5px solid rgba(34,197,94,0.25); background: rgba(0,0,0,0.3); color: var(--dim);
  cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent;
}
.riyaaz-beat-btn:hover { border-color: var(--green); color: var(--green); }
.riyaaz-beat-btn.active { border-color: var(--green); background: rgba(34,197,94,0.18); color: var(--green); box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.riyaaz-dir-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 6px;
  border: 1.5px solid rgba(168,85,247,0.25); background: rgba(0,0,0,0.3); color: var(--dim);
  cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent;
}
.riyaaz-dir-btn:hover { border-color: #a855f7; color: #a855f7; }
.riyaaz-dir-btn.active { border-color: #a855f7; background: rgba(168,85,247,0.18); color: #c084fc; box-shadow: 0 0 8px rgba(168,85,247,0.35); }
#tapTempoBtn { border-color: rgba(34,197,94,0.35); color: var(--green); }
#tapTempoBtn:hover { border-color: var(--green); background: rgba(34,197,94,0.12); }
#tapTempoBtn:active { background: rgba(34,197,94,0.25); transform: scale(0.94); }

.riyaaz-row2 { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.riyaaz-dots-wrap { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.riyaaz-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(34,197,94,0.12); border: 1.5px solid rgba(34,197,94,0.25);
  transition: all 0.07s;
}
.riyaaz-dot.beat-group-sep { margin-left: 5px; }
.riyaaz-dot.active-inhale { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.9); transform: scale(1.25); }
.riyaaz-dot.active-hold   { background: #f59e0b; border-color: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.9); transform: scale(1.25); }
.riyaaz-dot.active-exhale { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 10px rgba(168,85,247,0.9); transform: scale(1.25); }
.riyaaz-dot.done-inhale   { background: rgba(34,197,94,0.4); border-color: rgba(34,197,94,0.5); }
.riyaaz-dot.done-hold     { background: rgba(245,158,11,0.35); border-color: rgba(245,158,11,0.45); }
.riyaaz-dot.done-exhale   { background: rgba(168,85,247,0.35); border-color: rgba(168,85,247,0.45); }
.riyaaz-cycles { font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; color: var(--dim2); }
/* Uniform btn size inside control groups */
.hm-ctrl-group .hm-btn {
  min-width: 2rem;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}
.hm-ctrl-group .hm-value-display {
  min-width: 2rem;
  text-align: center;
}


/* MOBILE styles (max-width: 900px) */
@media (max-width: 900px), (pointer: coarse) and (orientation: landscape) {
/* ══════════════════════════════════════════════
   MOBILE — ChordStar Harmonium
   Layout: [Controls Left | Center Nameplate | Controls Right]
           [Drone Row]
           [Keyboard (horizontal, fills remaining height)]
   Panel: Fixed, slides in from RIGHT
══════════════════════════════════════════════ */


#hm-app-root *, #hm-app-root *::before, #hm-app-root *::after { box-sizing: border-box; }


/* ── LOADING ── */
.hm-loading {
  position: fixed; inset: 0; background: rgba(10,5,20,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; z-index: 500; transition: opacity 0.5s;
}
.hm-loading.done { opacity: 0; pointer-events: none; }
.hm-loading-icon { font-size: 3rem; animation: spin 1.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hm-loading-text { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold); }
.hm-loading-sub  { font-size: 0.8rem; color: var(--dim); max-width: 300px; text-align: center; }
.hm-loading-bar  { width: 200px; height: 3px; background: rgba(200,168,75,0.2); border-radius: 99px; overflow: hidden; }
.hm-loading-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); border-radius: 99px; transition: width 0.3s; }

/* ══════════════════════════════════════
   TOP BAR — 3-column layout
══════════════════════════════════════ */
.hm-topbar {
  display: flex; flex-direction: row; flex-shrink: 0;
  background: linear-gradient(170deg, var(--wood-mid) 0%, var(--wood-dark) 100%);
  border-bottom: 2px solid var(--wood-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  min-height: 110px;
}

/* LEFT: Octave + Transpose controls */
.hm-top-left {
  flex: 0 0 auto; width: 155px;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-right: 1px solid rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.3);
}
.hm-ctrl-group {
  display: flex; flex-direction: column; gap: 0.28rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(200,168,75,0.18);
  border-radius: 7px;
  padding: 0.38rem 0.5rem;
}
.hm-ctrl-label {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--brass); font-family: 'Space Grotesk', sans-serif;
}
.hm-ctrl-row { display: flex; gap: 0.25rem; align-items: center; }
.hm-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700;
  padding: 0.26rem 0.58rem; border-radius: 5px;
  border: 1.5px solid rgba(200,168,75,0.35);
  background: linear-gradient(180deg, rgba(50,25,5,0.8) 0%, rgba(20,8,2,0.9) 100%);
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer; transition: all 0.1s; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hm-btn:active { border-color: var(--brass); background: rgba(200,168,75,0.15); }
.hm-btn.active { border-color: var(--primary); background: rgba(217,70,239,0.18); color: #e879f9; box-shadow: 0 0 8px rgba(217,70,239,0.3); }
.hm-btn.green-active { border-color: var(--green) !important; background: rgba(34,197,94,0.18) !important; color: var(--green) !important; }
.hm-value-display {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700;
  color: var(--gold); min-width: 2rem; text-align: center;
  text-shadow: 0 0 12px rgba(251,191,36,0.7);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(200,168,75,0.2);
  border-radius: 4px;
  padding: 0.05rem 0.2rem;
}

/* CENTER: Nameplate + bellows + stops */
.hm-top-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  border-right: 1px solid rgba(0,0,0,0.45);
  overflow: hidden;
}
.hm-name-plate {
  background: linear-gradient(135deg, var(--brass-dark), var(--brass), var(--brass-dark));
  border-radius: 7px; padding: 0.25rem 0.9rem; border: 1px solid var(--brass);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.hm-name-plate span {
  font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 700;
  color: var(--bg); letter-spacing: 0.12em;
}
.hm-bellows { width: 60px; height: 28px; display: flex; align-items: center; justify-content: center; }
.hm-bellows-bars { width: 100%; height: 100%; display: flex; align-items: center; gap: 2px; }
.hm-bellows-bar { flex: 1; height: 100%; background: linear-gradient(to bottom, #8b1a1a, #4a0e0e); border-radius: 2px; }
@keyframes bellow { 0%{transform:scaleY(1)} 50%{transform:scaleY(0.55)} 100%{transform:scaleY(1)} }
.bellowing .hm-bellows-bar:nth-child(odd)  { animation: bellow 0.38s ease-in-out infinite; }
.bellowing .hm-bellows-bar:nth-child(even) { animation: bellow 0.38s 0.05s ease-in-out infinite; }

/* Stops in center (horizontal compact) */
#stopsRow {
  display: flex; flex-direction: row; gap: 0.6rem; align-items: center;
  justify-content: center;
}
.hm-stop { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-stop-knob {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b3c1a, #2d1505);
  border: 2px solid var(--wood-accent); box-shadow: 0 2px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative; transition: all 0.15s;
}
.hm-stop-knob::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(var(--rot,-45deg)); width:2px; height:8px; background:var(--wood-accent); border-radius:1px; transition:transform 0.3s; }
.hm-stop.on .hm-stop-knob { background: radial-gradient(circle at 40% 35%, #d946ef, #7c1a8a); border-color: var(--primary); box-shadow: 0 0 10px rgba(217,70,239,0.5), 0 2px 5px rgba(0,0,0,0.6); --rot: 45deg; }
.hm-stop-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.45rem; font-weight: 700; color: var(--dim); text-transform: uppercase; }
.hm-stop.on .hm-stop-label { color: var(--primary); }
.hm-stop-pitch { display: none; } /* hidden on mobile */

/* RIGHT: Toggle btn + audio controls */
.hm-top-right {
  flex: 0 0 auto; width: 155px;
  display: flex; flex-direction: column; gap: 0;
  padding: 0;
}

/* Two panel buttons row */
.mob-panel-btns {
  display: flex; flex-direction: row; flex-shrink: 0;
  border-bottom: 1px solid rgba(168,85,247,0.22);
}
#chordsOpenBtn, #scaleOpenBtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.28rem;
  padding: 0.48rem 0.3rem; flex-shrink: 0;
  background: rgba(168,85,247,0.15); border: none;
  color: #c084fc; font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
#chordsOpenBtn { border-right: 1px solid rgba(168,85,247,0.22); }
#chordsOpenBtn:active, #scaleOpenBtn:active { background: rgba(168,85,247,0.32); }
#chordsOpenBtn.active { background: rgba(217,70,239,0.25); color: #e879f9; }
#scaleOpenBtn.active  { background: rgba(168,85,247,0.25); color: #d8b4fe; }

/* Audio sliders */
.hm-top-audio {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.5rem 0.65rem; flex: 1; justify-content: center;
  background: rgba(0,0,0,0.3);
}
.hm-audio-row { display: flex; align-items: center; gap: 0.45rem; }
.hm-audio-lbl { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brass); font-family: 'Space Grotesk', sans-serif; white-space: nowrap; min-width: 42px; }
.hm-slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 99px; background: rgba(200,168,75,0.25); outline: none; cursor: pointer; flex: 1; }
.hm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, var(--brass), var(--gold)); border: 1.5px solid rgba(0,0,0,0.5); cursor: pointer; box-shadow: 0 0 5px rgba(200,168,75,0.4); }
.hm-btn-sm {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; font-weight: 700;
  padding: 0.18rem 0.4rem; border-radius: 5px;
  border: 1.5px solid rgba(200,168,75,0.3); background: rgba(0,0,0,0.4); color: var(--gold);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.hm-btn-sm.active { border-color: var(--primary); background: rgba(217,70,239,0.18); color: #e879f9; }
.hm-sustain-val { font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* ══════════════════════════════════════
   DRONE ROW
══════════════════════════════════════ */
.hm-drone-section {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.75rem; flex-shrink: 0; flex-wrap: wrap;
  background: rgba(0,0,0,0.35); border-bottom: 1px solid rgba(0,0,0,0.5);
  border-top: 1px solid rgba(200,168,75,0.08);
}
.hm-drone-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); white-space: nowrap; }
.hm-drone-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 700;
  padding: 0.18rem 0.4rem; border-radius: 5px;
  border: 1.5px solid rgba(200,168,75,0.22); background: rgba(0,0,0,0.35); color: var(--dim);
  cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent;
}
.hm-drone-btn:active { border-color: var(--brass); color: var(--gold); }
.hm-drone-btn.active { border-color: var(--amber); background: rgba(245,158,11,0.22); color: var(--gold); box-shadow: 0 0 8px rgba(245,158,11,0.4); }

/* ══════════════════════════════════════
   KEYBOARD SECTION
══════════════════════════════════════ */
.hm-keyboard-section {
  flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  background: linear-gradient(to bottom, #1a0a05 0%, #0d0503 100%);
}
.hm-keyboard-wrap {
  flex: 1; min-height: 0;
  padding: 0.4rem 0.6rem 0.5rem; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(200,168,75,0.3) transparent;
  display: flex; align-items: stretch;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 100%);
}
.hm-keyboard-wrap::-webkit-scrollbar { height: 3px; }
.hm-keyboard-wrap::-webkit-scrollbar-thumb { background: rgba(200,168,75,0.35); border-radius: 99px; }
.hm-keyboard {
  position: relative; display: flex; width: max-content; min-width: 100%; height: 100%;
  min-height: 100px; user-select: none; -webkit-user-select: none; justify-content: center;
}

/* White keys */
.hm-key-w {
  position: relative; width: 44px; height: 100%;
  background: linear-gradient(180deg, var(--key-white) 0%, #ede0cc 70%, #d4c4a0 100%);
  border: 1px solid rgba(0,0,0,0.35); border-top: 2px solid rgba(255,255,255,0.6);
  border-radius: 0 0 7px 7px; cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 5px; z-index: 1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
  transition: background 0.05s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.hm-key-w.pressed {
  background: linear-gradient(180deg, #f0d0ff 0%, #d946ef 50%, #9013a0 100%) !important;
  transform: scaleY(0.97); transform-origin: top;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 18px rgba(217,70,239,0.8) !important;
}
.hm-key-w.in-scale { background: linear-gradient(180deg, #dcfce7 0%, #86efac 65%, #4ade80 100%) !important; box-shadow: 0 0 12px rgba(34,197,94,0.55) inset, 0 4px 8px rgba(0,0,0,0.35) !important; }
.hm-key-w.scale-root { background: linear-gradient(180deg, #bbf7d0 0%, #22c55e 55%, #15803d 100%) !important; box-shadow: 0 0 16px rgba(22,163,74,0.75) inset, 0 4px 8px rgba(0,0,0,0.35) !important; }
.hm-key-w.autoplay-hi { background: linear-gradient(180deg, #fff 0%, var(--green) 50%, #15803d 100%) !important; box-shadow: 0 0 24px rgba(34,197,94,1) !important; transform: scaleY(0.96); transform-origin: top; }
.hm-key-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; font-weight: 700; color: rgba(80,40,20,0.6); pointer-events: none; }
.hm-key-w.pressed .hm-key-label { color: rgba(255,255,255,0.85); }
.hm-key-w.in-scale .hm-key-label, .hm-key-w.scale-root .hm-key-label { color: rgba(5,46,22,0.85); }
.hm-key-kb {
  font-size: 0.44rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  color: rgba(80,40,20,0.5); background: rgba(200,168,75,0.18);
  padding: 1px 3px; border-radius: 3px; pointer-events: none; margin-bottom: 2px;
  border: 1px solid rgba(200,168,75,0.22);
}
.hm-key-w.pressed .hm-key-kb { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.2); }
.hm-key-w.in-scale .hm-key-kb, .hm-key-w.scale-root .hm-key-kb { color: rgba(5,46,22,0.7); background: rgba(34,197,94,0.22); }

/* Black keys */
.hm-key-b {
  position: absolute; width: 28px; height: 58%; top: 0;
  background: linear-gradient(180deg, #2d1a45 0%, #1a0a2e 40%, #0d0516 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 5px 5px;
  cursor: pointer; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.05s, box-shadow 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.hm-key-b.pressed { background: linear-gradient(180deg, #d946ef 0%, #7c1aa0 60%, #3d0050 100%) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 18px rgba(217,70,239,0.8) !important; }
.hm-key-b.in-scale { background: linear-gradient(180deg, #166534 0%, #15803d 40%, #16a34a 100%) !important; box-shadow: 0 0 12px rgba(34,197,94,0.75), 0 4px 10px rgba(0,0,0,0.7) !important; }
.hm-key-b.scale-root { background: linear-gradient(180deg, #14532d 0%, #059669 40%, #10b981 100%) !important; box-shadow: 0 0 16px rgba(16,185,129,0.9), 0 4px 10px rgba(0,0,0,0.7) !important; }
.hm-key-b.autoplay-hi { background: linear-gradient(180deg, #4ade80 0%, #16a34a 60%, #14532d 100%) !important; box-shadow: 0 0 24px rgba(34,197,94,1) !important; }
.hm-key-b .hm-key-label { font-size: 0.4rem; color: rgba(200,180,230,0.45); pointer-events: none; }
.hm-key-b.pressed .hm-key-label { color: rgba(255,255,255,0.75); }
.hm-key-b.in-scale .hm-key-label, .hm-key-b.scale-root .hm-key-label { color: rgba(200,255,220,0.85); }
.hm-key-b .hm-key-kb { font-size: 0.38rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: rgba(180,150,220,0.55); background: rgba(200,168,75,0.12); padding: 1px 2px; border-radius: 2px; pointer-events: none; margin-bottom: 2px; border: 1px solid rgba(200,168,75,0.18); }

/* Status strip at bottom of keyboard section */
.hm-status-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.2rem 0.75rem; background: rgba(0,0,0,0.55); flex-shrink: 0;
  border-top: 1px solid rgba(168,85,247,0.1);
}
.hm-chord-name { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600; color: var(--primary); text-shadow: 0 0 10px rgba(217,70,239,0.5); min-width: 50px; }
.hm-chord-type { font-size: 0.62rem; color: var(--purple); font-weight: 600; }
.hm-chord-notes { font-size: 0.6rem; color: var(--dim); }
.hm-active-keys { display: flex; gap: 0.22rem; flex-wrap: wrap; }
.hm-active-badge { font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 700; padding: 0.08rem 0.35rem; border-radius: 5px; background: rgba(217,70,239,0.2); border: 1px solid rgba(217,70,239,0.35); color: #e879f9; animation: badgePop 0.15s ease; }
@keyframes badgePop { 0%{transform:scale(0.8)} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
.hm-tuning-info { font-size: 0.58rem; color: var(--dim2); }

/* Invisible elements required by JS */
.hm-kb-legend { display: none; }
.hm-wave-strip { display: none; }

/* ══════════════════════════════════════
   SLIDE-IN PANEL (from right)
══════════════════════════════════════ */
.hm-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 68%; max-width: 420px;
  display: flex; flex-direction: column;
  background: var(--panel-bg);
  border-left: 1px solid rgba(168,85,247,0.28);
  box-shadow: -8px 0 32px rgba(0,0,0,0.7);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
.hm-panel.panel-open { transform: translateX(0); }

/* Panel overlay backdrop */
.hm-panel-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 199; display: none; backdrop-filter: blur(2px);
}
.hm-panel-backdrop.visible { display: block; }

/* Panel toggle btn — "Close" button inside panel */
#panelToggleBtn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 1rem; flex-shrink: 0; width: 100%;
  background: rgba(168,85,247,0.2); border: none; border-bottom: 1px solid rgba(168,85,247,0.3);
  color: #c084fc; font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.05em;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
#panelToggleBtn:active { background: rgba(168,85,247,0.35); }
#panelToggleBtn.open { background: rgba(217,70,239,0.22); border-color: rgba(217,70,239,0.38); color: #e879f9; }

.hm-tab-nav { display: flex; border-bottom: 1px solid rgba(168,85,247,0.15); background: rgba(0,0,0,0.3); flex-shrink: 0; }
.hm-tab-btn { flex: 1; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700; padding: 0.5rem 0.4rem; border: none; background: transparent; color: var(--dim); cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent; -webkit-tap-highlight-color: transparent; }
.hm-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(217,70,239,0.08); }
.hm-tab-pane { display: none; padding: 0.6rem 1rem; overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.hm-tab-pane.active { display: flex; flex-direction: column; }

/* Preset chords */
.hm-preset-section { margin-bottom: 0.7rem; }
.hm-preset-section-label { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim2); margin-bottom: 0.38rem; font-family: 'Space Grotesk', sans-serif; }
.hm-preset-grid { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.hm-preset-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700;
  padding: 0.26rem 0.5rem; border-radius: 7px;
  border: 1.5px solid rgba(168,85,247,0.2); background: rgba(168,85,247,0.06); color: #c084fc;
  cursor: pointer; transition: all 0.12s; user-select: none; -webkit-tap-highlight-color: transparent;
}
.hm-preset-btn:active { border-color: var(--purple); background: rgba(168,85,247,0.25); color: #e879f9; }
.hm-preset-btn.active { border-color: var(--primary); background: rgba(217,70,239,0.22); color: #f0abfc; box-shadow: 0 0 8px rgba(217,70,239,0.3); }

/* Scale tab */
.hm-scale-ctrl-lbl { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); font-family: 'Space Grotesk', sans-serif; white-space: nowrap; }
.hm-tempo-group { display: flex; align-items: center; gap: 0.35rem; }
.hm-tempo-val { font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--green); min-width: 4rem; }
.hm-scale-info { font-size: 0.68rem; color: var(--dim); margin-top: 0.5rem; padding: 0.35rem 0.55rem; background: rgba(34,197,94,0.05); border-radius: 6px; border: 1px solid rgba(34,197,94,0.1); }

/* Riyaaz Mode */
.riyaaz-wrap { background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.2); border-radius: 10px; padding: 0.7rem 0.85rem; margin-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.riyaaz-row1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.riyaaz-title { font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 700; color: var(--green); letter-spacing: 0.08em; }
.riyaaz-beat-sel { display: flex; gap: 0.25rem; align-items: center; }
.riyaaz-beat-lbl { font-size: 0.54rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-family: 'Space Grotesk', sans-serif; }
.riyaaz-beat-btn { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.48rem; border-radius: 5px; border: 1.5px solid rgba(34,197,94,0.25); background: rgba(0,0,0,0.3); color: var(--dim); cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent; }
.riyaaz-beat-btn.active { border-color: var(--green); background: rgba(34,197,94,0.18); color: var(--green); box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.riyaaz-dir-btn { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 5px; border: 1.5px solid rgba(168,85,247,0.25); background: rgba(0,0,0,0.3); color: var(--dim); cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent; }
.riyaaz-dir-btn.active { border-color: #a855f7; background: rgba(168,85,247,0.18); color: #c084fc; box-shadow: 0 0 8px rgba(168,85,247,0.35); }
#tapTempoBtn { border-color: rgba(34,197,94,0.35); color: var(--green); }
#tapTempoBtn:active { background: rgba(34,197,94,0.25); transform: scale(0.94); }
.riyaaz-row2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.riyaaz-dots-wrap { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.riyaaz-dot { width: 15px; height: 15px; border-radius: 50%; background: rgba(34,197,94,0.12); border: 1.5px solid rgba(34,197,94,0.25); transition: all 0.07s; }
.riyaaz-dot.beat-group-sep { margin-left: 4px; }
.riyaaz-dot.active-inhale { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.9); transform: scale(1.25); }
.riyaaz-dot.active-hold   { background: #f59e0b; border-color: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.9); transform: scale(1.25); }
.riyaaz-dot.active-exhale { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.9); transform: scale(1.25); }
.riyaaz-dot.done-inhale   { background: rgba(34,197,94,0.4); border-color: rgba(34,197,94,0.5); }
.riyaaz-dot.done-hold     { background: rgba(245,158,11,0.35); border-color: rgba(245,158,11,0.45); }
.riyaaz-dot.done-exhale   { background: rgba(168,85,247,0.35); border-color: rgba(168,85,247,0.45); }
.riyaaz-cycles { font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; color: var(--dim2); }

/* Riyaaz lock */
.riyaaz-active-lock .hm-key-w,
.riyaaz-active-lock .hm-key-b { pointer-events: none; opacity: 0.55; filter: saturate(0.3); }
.riyaaz-active-lock .hm-tab-btn[data-tab="presets"] { pointer-events: none; opacity: 0.4; cursor: not-allowed; }
/* ══════════════════════════════════════
   MOBILE CHORD STRIP
   Sits between drone row & keyboard
   Compact 2-row: note selector + chord btns
══════════════════════════════════════ */

/* Topbar wrapper — chord strip drops below this */
.hm-topbar-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 50;
}

.mob-chord-strip {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 100;
  display: flex; flex-direction: column; gap: 0;
  background: rgba(8,3,20,0.97);
  border: 1px solid rgba(168,85,247,0.28);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  overflow: hidden;
  animation: stripSlideDown 0.2s cubic-bezier(0.32,0.72,0,1);
}
@keyframes stripSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top row: note buttons + close */
.mob-chord-strip-top {
  display: flex; align-items: center;
  padding: 0.3rem 0.5rem 0.25rem;
  gap: 0.3rem;
  border-bottom: 1px solid rgba(168,85,247,0.12);
  background: rgba(168,85,247,0.06);
}
.mob-note-row {
  display: flex; gap: 0.22rem; flex: 1;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mob-note-row::-webkit-scrollbar { display: none; }
.mob-note-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 700;
  padding: 0.25rem 0.45rem; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid rgba(168,85,247,0.22); background: rgba(0,0,0,0.4); color: var(--dim);
  cursor: pointer; transition: all 0.1s; -webkit-tap-highlight-color: transparent;
}
.mob-note-btn.active {
  border-color: var(--primary); background: rgba(217,70,239,0.22);
  color: #f0abfc; box-shadow: 0 0 8px rgba(217,70,239,0.4);
}
.mob-chord-close {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
  padding: 0.25rem 0.5rem; border-radius: 6px;
  border: 1px solid rgba(168,85,247,0.25); background: rgba(0,0,0,0.4);
  color: var(--dim); cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mob-chord-close:active { background: rgba(168,85,247,0.2); color: #c084fc; }

/* Bottom row: chord buttons for selected note */
.mob-chord-btns {
  display: flex; flex-wrap: wrap; gap: 0.28rem;
  padding: 0.35rem 0.5rem 0.4rem;
  overflow-y: auto; max-height: 80px;
  -webkit-overflow-scrolling: touch;
}
.mob-chord-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700;
  padding: 0.28rem 0.55rem; border-radius: 7px;
  border: 1.5px solid rgba(168,85,247,0.22); background: rgba(168,85,247,0.08); color: #c084fc;
  cursor: pointer; transition: all 0.1s; -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mob-chord-btn:active { border-color: var(--primary); background: rgba(217,70,239,0.28); color: #f0abfc; transform: scale(0.96); }
.mob-chord-btn.active { border-color: var(--primary); background: rgba(217,70,239,0.28); color: #f0abfc; box-shadow: 0 0 10px rgba(217,70,239,0.4); }
.mob-chord-type-label {
  font-size: 0.45rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim2); width: 100%;
  font-family: 'Space Grotesk', sans-serif; padding-top: 0.15rem;
}

/* Mobile: hide Preset Chords tab in the scale/panel (mobile uses inline chord strip instead) */
.hm-tab-btn[data-tab="presets"] { display: none !important; }
#tab-presets { display: none !important; }
/* Make Scale tab always active styling */
.hm-tab-btn[data-tab="scale"] { border-bottom-color: var(--primary) !important; color: var(--primary) !important; }

@keyframes rotateHint{0%,100%{transform:rotate(0deg)}35%,65%{transform:rotate(-90deg)}}
#rotate-phone-icon{animation:rotateHint 2.2s ease-in-out infinite;}

}
/* ================================================================
   guitar.css — Guitar Training Suite
   ChordStar Music Learning Platform

   Covers:
     .gt-*        — shared Guitar Training UI
     .gfb-*       — Guitar Fretboard component
     .gt-strum-*  — Strumming Trainer
     .gt-switch-* — Chord Switching Trainer
     .gt-scale-*  — Scale Trainer
     .gt-fretboard-* — Fretboard Note Trainer
================================================================ */

/* ── Break out of the 640px etr-wrapper cap (same fix as piano) */
.etr-wrapper.gt-fullwidth {
    max-width: none !important;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.etr-wrapper.gt-fullwidth .etr-topbar,
.etr-wrapper.gt-fullwidth .etr-mode-screen .etr-mode-header,
.etr-wrapper.gt-fullwidth .etr-stats-row,
.etr-wrapper.gt-fullwidth .etr-mode-cards,
.etr-wrapper.gt-fullwidth .pt-stats-row {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ================================================================
   GUITAR FRETBOARD COMPONENT
================================================================ */
.gfb-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,0.35) transparent;
    padding-bottom: 6px;
    border-radius: 10px;
    background: rgba(15,8,30,0.55);
    border: 1px solid rgba(245,158,11,0.12);
    padding: 8px 8px 10px;
}
.gfb-wrap::-webkit-scrollbar { height: 3px; }
.gfb-wrap::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.35); border-radius: 99px; }

.gfb-svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Fret dot animations */
.gfb-dot {
    transition: fill 0.15s ease, stroke 0.15s ease, r 0.15s ease;
}

@keyframes gfbDotPop {
    0%   { r: 8; }
    40%  { r: 15; }
    100% { r: 13; }
}
.gfb-dot--active {
    animation: gfbDotPop 0.25s ease forwards;
    filter: drop-shadow(0 0 6px rgba(168,85,247,0.8));
}

@keyframes gfbDotDone {
    0%   { filter: drop-shadow(0 0 4px rgba(16,185,129,0.6)); }
    100% { filter: drop-shadow(0 0 8px rgba(16,185,129,0.3)); }
}
.gfb-dot--done {
    animation: gfbDotDone 0.3s ease forwards;
}

@keyframes gfbDotWrong {
    0%,100% { transform-box: fill-box; transform-origin: center; transform: translateX(0); }
    20%     { transform: translateX(-3px); }
    40%     { transform: translateX(3px); }
    60%     { transform: translateX(-2px); }
    80%     { transform: translateX(2px); }
}
.gfb-dot--wrong {
    animation: gfbDotWrong 0.38s ease;
}

/* ================================================================
   SHARED GUITAR SCREEN LAYOUT
================================================================ */
.gt-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}
.gt-fretboard-area,
.gt-scale-body .gt-fretboard-area {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

/* ================================================================
   STRUMMING TRAINER v7 — 16-Step Rhythm Grid + Player
================================================================ */

/* ── Browser (pattern list) ──────────────────────────────── */
.st-browser-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.25rem 2rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.st-browser-header { text-align: center; }
.st-browser-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem; font-weight: 800; color: #f0e7ff; margin: 0 0 0.2rem;
}
.st-browser-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem; color: rgba(196,181,212,0.45); margin: 0;
}

/* Level tabs */
.st-tabs { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center; }
.st-tab {
    font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700;
    padding: 0.38rem 1rem; border-radius: 99px;
    border: 1.5px solid rgba(245,158,11,0.18); background: rgba(245,158,11,0.05);
    color: rgba(196,181,212,0.5); cursor: pointer; transition: all 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.st-tab:hover { border-color: rgba(245,158,11,0.4); color: #fbbf24; }
.st-tab--on { border-color: #f59e0b; background: rgba(245,158,11,0.16); color: #fbbf24; }

/* Pattern cards */
.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem; width: 100%;
}
.st-card {
    background: rgba(255,255,255,0.025);
    border: 1.5px solid rgba(245,158,11,0.1);
    border-radius: 14px; padding: 0.85rem 0.9rem 0.75rem;
    cursor: pointer; transition: border-color 0.13s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.st-card:hover { border-color: rgba(245,158,11,0.38); transform: translateY(-2px); }
.st-card:active { transform: translateY(0); }
.st-card-top {
    display: flex; align-items: baseline;
    justify-content: space-between; margin-bottom: 0.3rem;
}
.st-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem; font-weight: 700; color: #f0e7ff;
}
.st-card-lvl {
    font-family: 'Outfit', sans-serif; font-size: 0.68rem; font-weight: 700;
    color: #f59e0b; text-transform: uppercase; letter-spacing: .05em;
}
.st-card-desc {
    font-family: 'Outfit', sans-serif; font-size: 0.72rem;
    color: rgba(196,181,212,0.38); margin-bottom: 0.45rem; line-height: 1.4;
}
.st-card-preview { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 0.3rem; }
.st-prev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px; font-size: 0.68rem; font-weight: 700;
}
.st-prev-D    { background: rgba(245,158,11,0.15); color: #f59e0b; }
.st-prev-U    { background: rgba(168,85,247,0.15); color: #c084fc; }
.st-prev-B    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.st-prev-X    { background: rgba(239,68,68,0.12);   color: #f87171; }
.st-prev-R    { background: rgba(255,255,255,0.04); color: rgba(196,181,212,0.2); }
.st-prev-ghost{ background: rgba(255,255,255,0.06); color: rgba(196,181,212,0.3); }

/* ── Player body ─────────────────────────────────────────── */
.st-player-body {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.9rem; padding: 0.5rem 0.25rem 2rem;
    width: 100%; max-width: 900px; margin: 0 auto;
}
.st-player-hdr { text-align: center; }
.st-player-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem; font-weight: 800; color: #f0e7ff; margin: 0 0 0.2rem;
}
.st-player-desc {
    font-family: 'Outfit', sans-serif; font-size: 0.8rem;
    color: rgba(196,181,212,0.45); margin: 0 0 0.4rem;
}
.st-player-meta { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.st-meta-lvl, .st-meta-bpm, .st-meta-steps {
    font-family: 'Outfit', sans-serif; font-size: 0.73rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 99px;
    border: 1px solid rgba(245,158,11,0.22); color: #fbbf24;
    background: rgba(245,158,11,0.1);
}

/* ── Symbol legend ───────────────────────────────────────── */
.st-legend {
    display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: center;
    padding: 0.45rem 0.75rem; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 10px;
    width: 100%; max-width: 520px;
}
.st-leg-item {
    display: flex; align-items: center; gap: 4px;
    font-family: 'Outfit', sans-serif; font-size: 0.7rem;
    color: rgba(196,181,212,0.45);
}
.st-leg-D,.st-leg-U,.st-leg-B,.st-leg-X,.st-leg-ghost,.st-leg-R {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    font-size: 0.75rem; font-weight: 700;
}
.st-leg-D     { background: rgba(245,158,11,0.18); color: #f59e0b; }
.st-leg-U     { background: rgba(168,85,247,0.18); color: #c084fc; }
.st-leg-B     { background: rgba(59,130,246,0.18);  color: #60a5fa; }
.st-leg-X     { background: rgba(239,68,68,0.15);   color: #f87171; }
.st-leg-ghost { background: rgba(255,255,255,0.06); color: rgba(196,181,212,0.4);}
.st-leg-R     { background: rgba(255,255,255,0.05); color: rgba(196,181,212,0.22); }

/* ══════════════════════════════════════════════════════════
   16-STEP RHYTHM GRID
══════════════════════════════════════════════════════════ */
.st-grid-wrap {
    width: 100%;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,0.22) transparent;
    padding-bottom: 4px;
}
.st-grid-wrap::-webkit-scrollbar { height: 3px; }
.st-grid-wrap::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.22); border-radius: 99px; }

/* Beat labels row */
.st-beat-labels {
    display: flex;
    width: max-content;
    min-width: 100%;
    margin-bottom: 4px;
}
.st-grid-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem; font-weight: 600;
    color: rgba(196,181,212,0.25);
    text-align: center;
    flex: 1 0 0;
    min-width: 36px;
    padding-bottom: 2px;
}
.st-grid-lbl--beat {
    color: rgba(245,158,11,0.55);
    font-weight: 800;
}

/* Rhythm cells */
.st-rhythm-grid {
    display: flex;
    gap: 4px;
    width: max-content;
    min-width: 100%;
}
.st-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - 15*4px) / 16); /* fills exactly */
    min-width: 36px;
    height: 62px;
    border-radius: 9px;
    border: 2px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.06s, background 0.06s, box-shadow 0.06s;
}
/* Beat-1 emphasis */
.st-cell--beat {
    border-color: rgba(245,158,11,0.15);
    background: rgba(245,158,11,0.04);
}
.st-cell-glyph {
    font-size: 1.3rem;
    line-height: 1;
    transition: color 0.06s;
}
/* Idle colours per type */
.st-cell[data-type="D"] .st-cell-glyph,
.st-cell[data-type="A"] .st-cell-glyph { color: rgba(245,158,11,0.45); }
.st-cell[data-type="U"] .st-cell-glyph { color: rgba(168,85,247,0.45); }
.st-cell[data-type="B"] .st-cell-glyph { color: rgba(59,130,246,0.45);  }
.st-cell[data-type="X"] .st-cell-glyph { color: rgba(239,68,68,0.38);   }
.st-cell[data-type="-"] .st-cell-glyph { color: rgba(196,181,212,0.12); }
.st-cell[data-type="d"] .st-cell-glyph,
.st-cell[data-type="u"] .st-cell-glyph { color: rgba(196,181,212,0.22); }

/* Active step — bright animated highlight */
@keyframes stCellFlash { 0%{transform:scale(1)} 35%{transform:scale(1.08)} 100%{transform:scale(1)} }
.st-cell--on {
    border-color: #f59e0b !important;
    background: rgba(245,158,11,0.22) !important;
    box-shadow: 0 0 10px rgba(245,158,11,0.55), 0 0 22px rgba(245,158,11,0.18);
    animation: stCellFlash 0.1s ease;
}
.st-cell--on .st-cell-glyph { color: #fbbf24 !important; }
/* Type-specific active colours */
.st-cell--on[data-type="U"] { border-color:#a855f7 !important; background:rgba(168,85,247,0.22)!important; box-shadow:0 0 10px rgba(168,85,247,0.55); }
.st-cell--on[data-type="B"] { border-color:#3b82f6 !important; background:rgba(59,130,246,0.22) !important; box-shadow:0 0 10px rgba(59,130,246,0.55);  }
.st-cell--on[data-type="X"] { border-color:#ef4444 !important; background:rgba(239,68,68,0.22)  !important; box-shadow:0 0 10px rgba(239,68,68,0.55);   }

/* Bar dividers */
.st-bar-dividers { position: absolute; top: 22px; bottom: 0; left: 0; right: 0; pointer-events: none; }
.st-bar-div {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: rgba(245,158,11,0.18); border-radius: 1px;
    transform: translateX(-50%);
}

/* ── Hand direction indicator row ───────────────────────── */
/* Shows continuous pick-hand motion (↓↑) beneath each grid step.
   Animates on every step — including ghost strokes and rests —
   so the player can see the hand always moves even when silent.   */
.st-hand-row {
    display: flex;
    gap: 4px;
    width: max-content;
    min-width: 100%;
    margin-top: 5px;
}
.st-hand-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 0;
    min-width: 36px;
    height: 24px;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.07s, color 0.07s, transform 0.07s;
}
.st-hand-down {
    color: rgba(245,158,11,0.2);
    background: rgba(245,158,11,0.03);
}
.st-hand-up {
    color: rgba(168,85,247,0.2);
    background: rgba(168,85,247,0.03);
}
/* Active state — pick-hand hits THIS position */
.st-hand-down.st-hand-cell--on {
    color: #f59e0b;
    background: rgba(245,158,11,0.18);
    transform: translateY(2px);   /* little bounce down */
    box-shadow: 0 0 6px rgba(245,158,11,0.45);
}
.st-hand-up.st-hand-cell--on {
    color: #c084fc;
    background: rgba(168,85,247,0.18);
    transform: translateY(-2px);  /* little bounce up */
    box-shadow: 0 0 6px rgba(168,85,247,0.45);
}

/* ── Now-playing chord display ──────────────────────────── */
.st-now-playing {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 1.1rem; background: rgba(245,158,11,0.1);
    border: 1.5px solid rgba(245,158,11,0.28); border-radius: 12px;
    width: 100%; max-width: 320px; justify-content: center;
}
.st-np-label {
    font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: rgba(196,181,212,0.4);
}
.st-np-chord {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.55rem; font-weight: 800;
    color: #fbbf24; min-width: 2.5rem; text-align: center; transition: all 0.1s;
}
.st-np-bar { font-family: 'Outfit', sans-serif; font-size: 0.7rem; color: rgba(196,181,212,0.35); }

/* ── Status ──────────────────────────────────────────────── */
.st-status {
    font-family: 'Outfit', sans-serif; font-size: 0.85rem;
    color: rgba(196,181,212,0.5); text-align: center; min-height: 1.3rem;
}

/* ── Chord Progression Builder ───────────────────────────── */
.st-prog-section {
    width: 100%; max-width: 700px;
    display: flex; flex-direction: column; gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.14); border-radius: 16px;
}
.st-prog-header {
    display: flex; align-items: center;
    justify-content: space-between; gap: 0.5rem;
}
.st-prog-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem; font-weight: 700; color: rgba(196,181,212,0.7);
}
.st-prog-gen-btn {
    font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 700;
    padding: 0.28rem 0.75rem; border-radius: 8px;
    border: 1.5px solid rgba(245,158,11,0.28); background: rgba(245,158,11,0.1);
    color: #fbbf24; cursor: pointer; transition: all 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.st-prog-gen-btn:hover { background: rgba(245,158,11,0.22); border-color: #f59e0b; transform: translateY(-1px); }
/* Progression slots */
.st-prog-slots { display: flex; gap: 6px; flex-wrap: wrap; min-height: 44px; }
.st-slot {
    width: 46px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; transition: all 0.12s ease;
}
.st-slot--filled {
    background: rgba(245,158,11,0.12); border: 2px solid rgba(245,158,11,0.3); cursor: pointer;
}
.st-slot--filled:hover { border-color: #f59e0b; background: rgba(245,158,11,0.22); }
.st-slot--filled:hover .st-slot-remove { opacity: 1; }
.st-slot--active {
    border-color: #f59e0b !important; background: rgba(245,158,11,0.3) !important;
    box-shadow: 0 0 10px rgba(245,158,11,0.55), 0 0 22px rgba(245,158,11,0.2);
    transform: scale(1.08);
}
.st-slot--empty {
    background: rgba(255,255,255,0.02);
    border: 2px dashed rgba(255,255,255,0.1);
}
.st-slot-chord {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem; font-weight: 800; color: #fbbf24;
    pointer-events: none; user-select: none;
}
.st-slot-plus { font-size: 1.1rem; color: rgba(196,181,212,0.18); }
.st-slot-remove {
    position: absolute; top: -6px; right: -6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(239,68,68,0.85); color: #fff;
    font-size: 0.6rem; font-weight: 700; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.12s; padding: 0; line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.st-slot-remove:hover { background: #ef4444; }
@media (hover: none) { .st-slot-remove { opacity: 0.75; } }
/* Chord palette */
.st-chord-palette {
    display: flex; gap: 5px; flex-wrap: wrap;
    max-height: 178px; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(168,85,247,0.3) transparent;
    padding-right: 2px;
}
.st-chord-palette::-webkit-scrollbar { width: 4px; }
.st-chord-palette::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 99px; }
.st-chord-btn {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 700;
    padding: 0.28rem 0.55rem; border-radius: 8px;
    border: 1.5px solid rgba(168,85,247,0.22); background: rgba(168,85,247,0.08);
    color: #c084fc; cursor: pointer; transition: all 0.12s;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.st-chord-btn:hover { border-color:#a855f7; background:rgba(168,85,247,0.2); color:#e879f9; transform:translateY(-1px); }

/* ── BPM row ─────────────────────────────────────────────── */
.st-bpm-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 1rem; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(245,158,11,0.1); border-radius: 12px;
    flex-wrap: wrap; justify-content: center; width: 100%; max-width: 460px;
}
.st-bpm-lbl {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: rgba(196,181,212,0.4); min-width: 2.2rem;
}
.st-bpm-btns { display: flex; gap: 0.3rem; }
.st-bpm-btn {
    font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700;
    padding: 0.28rem 0.7rem; border-radius: 7px;
    border: 1.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
    color: rgba(196,181,212,0.4); cursor: pointer; transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.st-bpm-btn:hover { border-color:rgba(245,158,11,0.35); color:#fbbf24; }
.st-bpm-btn--on { border-color:#f59e0b; background:rgba(245,158,11,0.17); color:#fbbf24; }

/* Tap tempo button */
.st-tap-btn {
    font-family: 'Outfit', sans-serif;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 0.28rem 0.65rem; border-radius: 9px;
    border: 1.5px solid rgba(16,185,129,0.28); background: rgba(16,185,129,0.07);
    color: #34d399; cursor: pointer; transition: all 0.10s;
    -webkit-tap-highlight-color: transparent;
    min-width: 52px;
}
.st-tap-btn:hover { border-color: #10b981; background: rgba(16,185,129,0.18); transform: scale(1.04); }
.st-tap-btn:active { transform: scale(0.94); background: rgba(16,185,129,0.32); }
.st-tap-ico { font-size: 1rem; line-height: 1; }
.st-tap-lbl {
    font-size: 0.58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: rgba(52,211,153,0.65);
}

/* ── Practice tools row (metronome + count-in) ──────────── */
.st-tools-row {
    display: flex; align-items: center; gap: 0.55rem;
    justify-content: center; flex-wrap: wrap; width: 100%;
}
.st-tool-btn {
    font-family: 'Outfit', sans-serif;
    display: flex; align-items: center; gap: 5px;
    padding: 0.32rem 0.8rem; border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03);
    cursor: pointer; transition: all 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.st-tool-btn:hover { border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.08); }
.st-tool-btn--on {
    border-color: #a855f7 !important; background: rgba(168,85,247,0.18) !important;
    box-shadow: 0 0 10px rgba(168,85,247,0.3);
}
.st-tool-ico {
    font-size: 0.9rem; line-height: 1;
}
.st-tool-lbl {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: rgba(196,181,212,0.5);
}
.st-tool-btn--on .st-tool-lbl { color: #c084fc; }

/* ── Count-in display ────────────────────────────────────── */
/* Shows animated 1  2  3  4 digits during the lead-in beats  */
.st-countin-display {
    display: flex; gap: 0.4rem; align-items: center;
    margin-left: 0.5rem;
}
.st-ci-beat {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem; font-weight: 900;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.07);
    color: rgba(196,181,212,0.2);
    background: rgba(255,255,255,0.02);
    transition: all 0.06s;
}
/* Beat just fired — bright flash */
@keyframes stCiPop {
    0%   { transform: scale(1);    }
    25%  { transform: scale(1.35); }
    100% { transform: scale(1);    }
}
.st-ci-beat--on {
    color: #fbbf24;
    background: rgba(245,158,11,0.25);
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245,158,11,0.6);
    animation: stCiPop 0.18s ease-out forwards;
}
/* Beat already passed — dimmed */
.st-ci-beat--done {
    color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.06);
    border-color: rgba(245,158,11,0.18);
}

/* ── Controls ────────────────────────────────────────────── */
.st-controls { display: flex; gap: 0.7rem; align-items: center; justify-content: center; }
.st-btn-play {
    width: 70px; height: 70px; border-radius: 50%; font-size: 1.75rem;
    border: 2.5px solid rgba(245,158,11,0.35);
    background: linear-gradient(135deg,rgba(245,158,11,0.18),rgba(249,115,22,0.12));
    color: #fbbf24; cursor: pointer; transition: all 0.12s;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.st-btn-play:hover { transform:scale(1.07); border-color:#f59e0b; box-shadow:0 0 18px rgba(245,158,11,0.4); }
.st-btn-play--on {
    background: linear-gradient(135deg,rgba(245,158,11,0.4),rgba(249,115,22,0.3))!important;
    border-color:#f59e0b!important; box-shadow:0 0 20px rgba(245,158,11,0.5);
}
.st-btn-sec {
    width: 56px; height: 56px; border-radius: 14px; font-size: 1.1rem;
    border: 2px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04);
    color: #f0e7ff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.st-btn-sec:hover { border-color:rgba(168,85,247,0.4); background:rgba(168,85,247,0.08); }
.st-btn-sec--on { border-color:#a855f7!important; background:rgba(168,85,247,0.18)!important; box-shadow:0 0 12px rgba(168,85,247,0.35); }
.st-btn-lbl {
    font-family: 'Outfit', sans-serif; font-size: 0.55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing:.04em; color:rgba(196,181,212,0.38);
}
.st-loop-pill {
    font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing:.07em; color:#c084fc;
    background: rgba(168,85,247,0.14); border:1px solid rgba(168,85,247,0.28);
    padding: 0.25rem 0.8rem; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 0.35rem;
    animation: stLoopPulse 2s ease-in-out infinite;
}
@keyframes stLoopPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Mobile ≤559px ──────────────────────────────────────── */
@media (max-width: 559px) {
    .st-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .st-cell { min-width: 28px; height: 52px; }
    .st-cell-glyph { font-size: 1.05rem; }
    .st-hand-cell { min-width: 28px; height: 20px; font-size: 0.52rem; }
    .st-btn-play { width: 62px; height: 62px; font-size: 1.55rem; }
    .st-btn-sec  { width: 50px; height: 50px; }
    .st-player-name { font-size: 1.1rem; }
    .st-prog-section { padding: 0.7rem 0.75rem; }
    .st-slot { width: 40px; height: 40px; }
    .st-bpm-row { max-width: 100%; gap: 0.45rem; padding: 0.45rem 0.65rem; }
    .st-tap-btn { padding: 0.22rem 0.5rem; min-width: 44px; }
    .st-tap-lbl { font-size: 0.52rem; }
    .st-tools-row { gap: 0.4rem; }
    .st-tool-btn { padding: 0.28rem 0.6rem; }
    .st-tool-lbl { font-size: 0.65rem; }
    .st-countin-display { margin-left: 0; }
    .st-ci-beat { width: 24px; height: 24px; font-size: 0.95rem; }
}
@media (max-width: 360px) {
    .st-grid { grid-template-columns: 1fr; }
    .st-bpm-btns { gap: 0.2rem; }
    .st-bpm-btn { padding: 0.22rem 0.5rem; font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM BUILDER — new styles
═══════════════════════════════════════════════════════════ */
.st-build-btn {
    margin-top: 0.7rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none; border-radius: 20px;
    color: #fff; font-size: 0.88rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s;
}
.st-build-btn:hover { opacity: 0.85; }

.st-bld-hint {
    font-size: 0.78rem; color: var(--text-dim);
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.18);
    border-radius: 8px; padding: 0.5rem 0.75rem;
    margin: 0.5rem 0 0.75rem;
    line-height: 1.5;
}

/* Builder grid — cells are clickable/editable */
.st-rhythm-grid--builder .st-cell {
    cursor: pointer;
    user-select: none;
    transition: transform .08s, background .1s;
}
.st-rhythm-grid--builder .st-cell:hover {
    transform: scale(1.08);
    background: rgba(168,85,247,0.22);
}
.st-rhythm-grid--builder .st-cell:active { transform: scale(0.95); }

.st-bld-chord-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 0.75rem 0;
}
.st-bld-lbl { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; }
.st-bld-chord-sel {
    background: rgba(30,20,50,0.7);
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 8px; color: var(--text-main);
    padding: 0.3rem 0.6rem; font-size: 0.88rem; cursor: pointer;
}
.st-bld-clear, .st-bld-preset {
    padding: 0.3rem 0.75rem;
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: var(--text-main); font-size: 0.8rem; cursor: pointer;
    transition: background .12s;
}
.st-bld-clear:hover   { background: rgba(239,68,68,0.18); border-color: #ef4444; }
.st-bld-preset:hover  { background: rgba(168,85,247,0.18); }

.st-bld-notation {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.82rem; color: var(--text-dim);
}
.st-bld-notation-lbl { font-weight: 500; margin-right: 0.3rem; }
.st-bld-notation-code {
    font-family: 'Courier New', monospace;
    background: rgba(168,85,247,0.1);
    border-radius: 4px; padding: 0.15rem 0.4rem;
    color: #c4b5f4; font-size: 0.85rem; letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED TRAINER COMPONENTS  (pt-* classes)
   Used by: Scale Trainer, Progression Trainer, Fretboard Trainer
═══════════════════════════════════════════════════════════════ */

/* ── Stats row ────────────────────────────────────────────── */
.pt-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin: 0.5rem auto;
    max-width: 400px;
    font-size: 0.88rem;
    color: var(--text-dim, rgba(196,181,212,0.75));
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.14);
    border-radius: 12px;
}
.pt-stats-row span { display: flex; align-items: center; gap: 0.3rem; }

/* ── Feedback messages ────────────────────────────────────── */
.pt-feedback {
    min-height: 2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    padding: 0.3rem;
}
.pt-fb--correct {
    color: #34d399;
    text-shadow: 0 0 12px rgba(52,211,153,0.4);
}
.pt-fb--wrong {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248,113,113,0.35);
}

/* ── Answer buttons: correct / wrong states ───────────────── */
.pt-btn--correct {
    background: rgba(52,211,153,0.18) !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
    box-shadow: 0 0 0 2px rgba(52,211,153,0.25);
}
.pt-btn--wrong {
    background: rgba(248,113,113,0.18) !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}

/* ── Replay button ────────────────────────────────────────── */
.pt-replay-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.4rem;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 20px;
    color: #c4b5f4;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin: 0.4rem auto;
}
.pt-replay-btn:hover { background: rgba(168,85,247,0.28); }

/* ── Question screen wrapper ──────────────────────────────── */
.pt-q-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 2rem;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}
.pt-q-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}
.pt-q-label {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-main, #e8e0f0);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SCALE TRAINER  (gt-scale-*)
═══════════════════════════════════════════════════════════════ */
.gt-scale-screen {
    padding: 0;
}
.gt-scale-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem 2.5rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.gt-scale-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.25rem;
}
.gt-scale-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main, #e8e0f0);
    letter-spacing: -0.01em;
}
.gt-scale-sub {
    font-size: 0.88rem;
    color: var(--text-dim, rgba(196,181,212,0.75));
}
.gt-scale-status {
    font-size: 0.88rem;
    color: #a78bfa;
    min-height: 1.4rem;
    display: flex; align-items: center; gap: 0.35rem;
}
.gt-scale-notation {
    width: 100%;
}
.gt-scale-notation pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(196,181,212,0.65);
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.14);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}
.gt-scale-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.gt-scale-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.3rem;
    border-radius: 20px;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    border: none;
}
.gt-scale-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gt-scale-btn:not(:disabled):hover { opacity: 0.85; transform: translateY(-1px); }
.gt-scale-btn:not(:disabled):active { transform: translateY(0); }

.gt-scale-btn--replay {
    background: rgba(168,85,247,0.2);
    border: 1px solid rgba(168,85,247,0.4);
    color: #c4b5f4;
}
.gt-scale-btn--done {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    box-shadow: 0 2px 10px rgba(168,85,247,0.3);
}
.gt-scale-stats {
    margin-top: 0.4rem;
    align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   CHORD PROGRESSION TRAINER  (pt-prog-*)
═══════════════════════════════════════════════════════════════ */

/* Chord display with ? placeholders */
.pt-prog-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.2rem;
    background: rgba(168,85,247,0.07);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 14px;
    min-height: 3rem;
    width: 100%;
    max-width: 420px;
}
.pt-prog-step {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; height: 2.2rem;
    padding: 0 0.5rem;
    background: rgba(168,85,247,0.18);
    border: 1.5px solid rgba(168,85,247,0.35);
    border-radius: 8px;
    font-size: 1rem; font-weight: 700;
    color: #c4b5f4;
    transition: all 0.2s;
}
.pt-prog-step--hidden {
    background: rgba(168,85,247,0.1);
    border-style: dashed;
    color: rgba(196,181,212,0.4);
    font-size: 1.1rem;
}
.pt-prog-step--active {
    background: rgba(168,85,247,0.35);
    border-color: #a855f7;
    color: #e9d5ff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(168,85,247,0.5);
}
.pt-prog-step--revealed {
    background: rgba(52,211,153,0.15);
    border-color: #34d399;
    color: #34d399;
}
.pt-prog-arrow {
    color: rgba(196,181,212,0.35);
    font-size: 0.9rem;
    font-weight: 400;
}

/* Option buttons */
.pt-prog-options {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    max-width: 420px;
}
.pt-prog-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    padding: 0.75rem 1.1rem;
    background: rgba(30,20,50,0.55);
    border: 1.5px solid rgba(168,85,247,0.2);
    border-radius: 12px;
    color: var(--text-main, #e8e0f0);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.pt-prog-btn:hover:not(:disabled) {
    background: rgba(168,85,247,0.14);
    border-color: rgba(168,85,247,0.4);
    transform: translateX(3px);
}
.pt-prog-btn:active:not(:disabled) { transform: translateX(1px); }
.pt-prog-btn-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main, #e8e0f0);
}
.pt-prog-btn-name {
    font-size: 0.78rem;
    color: var(--text-dim, rgba(196,181,212,0.65));
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   FRETBOARD NOTE TRAINER  (gt-fretboard-* / gt-note-*)
═══════════════════════════════════════════════════════════════ */
.gt-fretboard-screen {
    padding: 0;
}
.gt-fretboard-q-body {
    display: flex;
    flex-direction: column;
    align-items: center;        /* everything centered */
    gap: 1.1rem;
    padding: 1.5rem 1.2rem 3rem;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Question text — centered, larger */
.gt-fretboard-question {
    width: 100%;
}
.gt-fret-q-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-main, #e8e0f0);
    line-height: 1.65;
    margin: 0;
    text-align: center;
}
.gt-fret-q-text strong {
    color: #c4b5f4;
    font-weight: 700;
}

/* Fretboard visual — centered, good width */
.gt-fretboard-vis {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: rgba(15,8,30,0.55);
    border: 1px solid rgba(168,85,247,0.18);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

/* Note answer buttons — centered row */
.gt-note-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    max-width: 380px;
    margin: 0 auto;
}
.gt-note-btn {
    min-width: 4rem;
    padding: 0.65rem 1.1rem;
    background: rgba(30,20,50,0.65);
    border: 1.5px solid rgba(168,85,247,0.28);
    border-radius: 12px;
    color: var(--text-main, #e8e0f0);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s, box-shadow 0.12s;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.gt-note-btn:hover:not(:disabled) {
    background: rgba(168,85,247,0.2);
    border-color: rgba(168,85,247,0.55);
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(168,85,247,0.22);
}
.gt-note-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Mobile ≤559px ────────────────────────────────────────── */
@media (max-width: 559px) {
    .gt-scale-body,
    .gt-fretboard-q-body { padding: 0.75rem 0.85rem 2rem; }
    .gt-scale-name { font-size: 1rem; }
    .gt-scale-btn  { padding: 0.4rem 1rem; font-size: 0.8rem; }
    .pt-prog-display { padding: 0.55rem 0.75rem; }
    .pt-prog-step { min-width: 1.9rem; height: 1.9rem; font-size: 0.88rem; }
    .pt-prog-btn  { padding: 0.6rem 0.85rem; }
    .pt-prog-btn-label { font-size: 0.88rem; }
    .gt-note-options { gap: 0.5rem; justify-content: center; }
    .gt-note-btn { min-width: 3.2rem; padding: 0.5rem 0.8rem; font-size: 0.95rem; }
    .gt-fretboard-vis { padding: 0.7rem 0.8rem; min-height: 130px; }
}
/* ================================================================
   tuner.css — Guitar Tuner Tool
   ChordStar Music Portal
   Matches existing dark/light theme via CSS variables
================================================================ */

/* ── Modal overlay ───────────────────────────────────────────── */
#tunerModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 1rem;
}
#tunerModal.open { display: flex; }

/* ── Main container ──────────────────────────────────────────── */
.tuner-box {
    background: linear-gradient(160deg, #0d0720 0%, #180930 60%, #0a0415 100%);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 24px;
    box-shadow:
        0 0 0 1px rgba(217,70,239,0.08),
        0 30px 80px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.06);
    width: 100%;
    max-width: 680px;
    padding: 0 0 2rem 0;
    position: relative;
    /* ROOT FIX: removed overflow:hidden — it clipped dynamically injected A4 reference
       row on short screens (iPhone SE at 667px). Clipping had no scroll escape, hiding
       content completely. overflow:hidden was only needed for the pseudo-element grid
       texture, which now uses inset:0 + z-index so it clips naturally. */
    overflow: visible;
    /* Scrollable inner content area for short-viewport devices */
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Subtle grid texture background */
.tuner-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(217,70,239,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217,70,239,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ── Header ──────────────────────────────────────────────────── */
.tuner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(217,70,239,0.12);
}
.tuner-header-left h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0e7ff;
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tuner-header-left span {
    font-size: 0.75rem;
    color: rgba(196,181,212,0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tuner-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(217,70,239,0.2);
    background: rgba(217,70,239,0.08);
    color: rgba(196,181,212,0.7);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.tuner-close-btn:hover {
    background: rgba(217,70,239,0.2);
    color: #f0e7ff;
    border-color: rgba(217,70,239,0.5);
}

/* ── Status badge ────────────────────────────────────────────── */
.tuner-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,181,212,0.45);
}
.tuner-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(196,181,212,0.25);
    transition: all 0.4s ease;
    flex-shrink: 0;
}
.tuner-status-dot.listening {
    background: #d946ef;
    box-shadow: 0 0 8px rgba(217,70,239,0.8);
    animation: tsPulse 1.4s ease-in-out infinite;
}
.tuner-status-dot.in-tune {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,0.8);
    animation: tsPulse 1s ease-in-out infinite;
}
@keyframes tsPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.7; }
}

/* ── Needle meter ────────────────────────────────────────────── */
.tuner-meter {
    position: relative;
    height: 120px;
    margin: 0 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Arc track */
.tuner-arc-wrap {
    position: relative;
    width: 340px;
    height: 90px;
    overflow: hidden;
    flex-shrink: 0;
}
.tuner-arc-wrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Cent scale ticks */
.tuner-scale {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 0 4px;
    margin-top: 6px;
}
.tuner-scale span {
    font-size: 0.62rem;
    color: rgba(196,181,212,0.3);
    letter-spacing: 0.02em;
    font-family: 'Courier New', monospace;
}
.tuner-scale span.center-label {
    color: rgba(196,181,212,0.5);
    font-weight: 700;
}

/* Needle */
#tunerNeedle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 72px;
    background: linear-gradient(to top, rgba(217,70,239,0.2), #d946ef);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 0 6px rgba(217,70,239,0.9));
}
#tunerNeedle::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d946ef;
    box-shadow: 0 0 12px rgba(217,70,239,1);
}
#tunerNeedle.in-tune {
    background: linear-gradient(to top, rgba(34,197,94,0.2), #22c55e);
    filter: drop-shadow(0 0 8px rgba(34,197,94,1));
}
#tunerNeedle.in-tune::after {
    background: #22c55e;
    box-shadow: 0 0 14px rgba(34,197,94,1);
}

/* ── Note readout ────────────────────────────────────────────── */
.tuner-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 0 1.5rem 1.25rem;
    padding: 0.9rem 1.25rem;
    background: rgba(0,0,0,0.35);
    border-radius: 12px;
    border: 1px solid rgba(217,70,239,0.1);
}
.tuner-readout-item {
    text-align: center;
    flex: 1;
}
.tuner-readout-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(196,181,212,0.35);
    margin-bottom: 0.25rem;
}
.tuner-readout-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(196,181,212,0.6);
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
    font-family: 'Courier New', monospace;
}
.tuner-readout-value.active { color: #f0e7ff; }
.tuner-readout-value.in-tune { color: #22c55e; }

.tuner-note-big {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(196,181,212,0.25);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.tuner-note-big.active {
    color: #d946ef;
    text-shadow: 0 0 20px rgba(217,70,239,0.6);
}
.tuner-note-big.in-tune {
    color: #22c55e;
    text-shadow: 0 0 24px rgba(34,197,94,0.7);
}

/* IN TUNE badge */
.tuner-in-tune-badge {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: transparent;
    font-weight: 800;
    transition: color 0.3s ease;
    min-height: 1em;
}
.tuner-in-tune-badge.show { color: #22c55e; }

/* ── Guitar headstock + string pegs ─────────────────────────── */
.tuner-guitar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 1rem;
    min-height: 220px;
}

.tuner-strings-left,
.tuner-strings-right {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    z-index: 2;
    flex-shrink: 0;
}
.tuner-strings-left { margin-right: -8px; }
.tuner-strings-right { margin-left: -8px; }

/* Individual string peg button */
.tuner-peg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(217,70,239,0.2);
    background: rgba(18,8,32,0.9);
    color: rgba(196,181,212,0.6);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.4);
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}
.tuner-peg:hover {
    border-color: rgba(217,70,239,0.5);
    color: #f0e7ff;
    background: rgba(217,70,239,0.12);
}
.tuner-peg.active {
    border-color: rgba(217,70,239,0.7);
    color: #d946ef;
    background: rgba(217,70,239,0.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 20px rgba(217,70,239,0.4),
        0 4px 12px rgba(0,0,0,0.4);
}
.tuner-peg.in-tune {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34,197,94,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 24px rgba(34,197,94,0.5),
        0 4px 12px rgba(0,0,0,0.4);
}
/* Frequency sub-label on peg */
.tuner-peg span.peg-hz {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.48rem;
    font-weight: 400;
    color: rgba(196,181,212,0.35);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tuner-peg.active span.peg-hz { color: rgba(217,70,239,0.6); }
.tuner-peg.in-tune span.peg-hz { color: rgba(34,197,94,0.6); }

/* ── Headstock image area ─────────────────────────────────────── */
.tuner-headstock {
    width: 190px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG-drawn headstock */
.tuner-headstock-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.7));
}

/* ── Start / Stop button ─────────────────────────────────────── */
.tuner-btn-row {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0 1.5rem;
}
#tunerStartBtn {
    background: linear-gradient(135deg, #d946ef, #ef4444);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 24px rgba(217,70,239,0.4);
}
#tunerStartBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(217,70,239,0.6);
}
#tunerStartBtn.active {
    background: linear-gradient(135deg, #1f2937, #374151);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
#tunerStartBtn.active:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}

/* ── Permission error ────────────────────────────────────────── */
.tuner-mic-error {
    display: none;
    text-align: center;
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    padding: 0 1.5rem;
    line-height: 1.5;
}
.tuner-mic-error.show { display: block; }

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme="light"] .tuner-box {
    background: linear-gradient(160deg, #f5eeff 0%, #ede0ff 60%, #f0e6ff 100%);
    border-color: rgba(185,31,214,0.2);
}
[data-theme="light"] .tuner-box::before {
    background-image:
        linear-gradient(rgba(185,31,214,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(185,31,214,0.04) 1px, transparent 1px);
}
[data-theme="light"] .tuner-header-left h2 { color: #1a0535; }
[data-theme="light"] .tuner-readout {
    background: rgba(255,255,255,0.6);
    border-color: rgba(185,31,214,0.15);
}
[data-theme="light"] .tuner-readout-value { color: rgba(91,45,140,0.6); }
[data-theme="light"] .tuner-readout-value.active { color: #1a0535; }
[data-theme="light"] .tuner-note-big { color: rgba(91,45,140,0.2); }
[data-theme="light"] .tuner-peg {
    background: rgba(255,255,255,0.85);
    color: rgba(91,45,140,0.6);
    border-color: rgba(185,31,214,0.2);
}
[data-theme="light"] .tuner-peg:hover {
    background: rgba(185,31,214,0.08);
    color: #1a0535;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tuner-box { border-radius: 18px; }
    .tuner-arc-wrap { width: 270px; height: 76px; }
    #tunerNeedle { height: 58px; }
    .tuner-headstock { width: 140px; height: 170px; }
    .tuner-peg { width: 48px; height: 48px; font-size: 0.9rem; }
    .tuner-guitar-wrap { gap: 0; min-height: 180px; }
    .tuner-readout { gap: 1rem; flex-wrap: wrap; }
    .tuner-note-big { font-size: 2.2rem; }
    .tuner-readout-value { font-size: 0.9rem; }
}
@media (max-width: 400px) {
    .tuner-peg { width: 42px; height: 42px; font-size: 0.8rem; }
    .tuner-arc-wrap { width: 220px; }
    .tuner-headstock { width: 120px; }
}

/* ================================================================
   LIGHT MODE COMPREHENSIVE FIXES — Guitar Tuner
================================================================ */
[data-theme="light"] .tuner-header-left span {
    color: rgba(91,45,140,0.55);
}
[data-theme="light"] .tuner-status-bar {
    color: rgba(91,45,140,0.6);
}
[data-theme="light"] .tuner-status-dot {
    background: rgba(91,45,140,0.25);
}

/* Arc — boost contrast on light background */
[data-theme="light"] .tuner-arc-wrap {
    filter: saturate(2.5) brightness(0.65) contrast(1.4);
}

/* Scale ticks under arc */
[data-theme="light"] .tuner-scale span {
    color: rgba(91,45,140,0.45);
}
[data-theme="light"] .tuner-scale span.center-label {
    color: rgba(91,45,140,0.7);
}

/* Readout box */
[data-theme="light"] .tuner-readout {
    border-color: rgba(185,31,214,0.18);
}
[data-theme="light"] .tuner-readout-label {
    color: rgba(91,45,140,0.45);
}
[data-theme="light"] .tuner-note-big.active {
    color: #b91fd6;
    text-shadow: 0 0 16px rgba(185,31,214,0.4);
}

/* Pegs — stronger contrast */
[data-theme="light"] .tuner-peg {
    border-color: rgba(185,31,214,0.3);
    color: rgba(91,45,140,0.75);
    box-shadow: 0 2px 10px rgba(185,31,214,0.1), 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .tuner-peg:hover {
    border-color: rgba(185,31,214,0.6);
    background: rgba(185,31,214,0.1);
    color: #1a0535;
}
[data-theme="light"] .tuner-peg.active {
    border-color: rgba(185,31,214,0.7);
    color: #b91fd6;
    background: rgba(185,31,214,0.15);
    box-shadow: 0 0 16px rgba(185,31,214,0.35), 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .tuner-peg span.peg-hz {
    color: rgba(91,45,140,0.4);
}
[data-theme="light"] .tuner-peg.active span.peg-hz { color: rgba(185,31,214,0.6); }

/* A4 reference row */
[data-theme="light"] .tuner-a4-row {
    color: rgba(91,45,140,0.65);
}
[data-theme="light"] .tuner-a4-btn {
    background: rgba(185,31,214,0.08);
    border-color: rgba(185,31,214,0.25);
    color: rgba(91,45,140,0.75);
}
[data-theme="light"] .tuner-a4-btn.active {
    background: rgba(185,31,214,0.2);
    border-color: #b91fd6;
    color: #1a0535;
}
[data-theme="light"] .tuner-close-btn {
    border-color: rgba(185,31,214,0.25);
    background: rgba(185,31,214,0.08);
    color: rgba(91,45,140,0.65);
}
[data-theme="light"] .tuner-close-btn:hover {
    background: rgba(185,31,214,0.18);
    color: #1a0535;
}