/* ==================== MUSIC THEORY COURSE STYLES ==================== */

/* Course Container */
.course-container {
    min-height: 100vh;
    padding-bottom: 4rem;
}

/* Course Header */
.course-header {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--dark-border);
    padding: 2rem 0 3rem;
}

.course-header-content {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--accent);
}

.course-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.course-category {
    background: rgba(167, 139, 250, 0.15);
    color: var(--accent);
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.course-duration {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.course-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

@media (min-width: 640px) {
    .course-title {
        font-size: 3rem;
    }
}

.course-subtitle {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 40rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.course-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.course-features .feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.course-features .feature svg {
    color: var(--accent);
    opacity: 0.8;
}

/* Course Navigation */
.course-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(13, 13, 15, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dark-border);
}

.course-nav-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.course-nav-inner::-webkit-scrollbar {
    display: none;
}

.nav-section {
    padding: 1rem 1rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.nav-section:hover {
    color: var(--light);
}

.nav-section.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Course Content */
.course-content {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Section Styles */
.course-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--dark-border);
}

.course-section:last-child {
    border-bottom: none;
}

.section-header {
    margin-bottom: 3rem;
}

.section-number {
    display: inline-block;
    background: rgba(167, 139, 250, 0.15);
    color: var(--accent);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 0.75rem;
}

.section-description {
    font-size: 1.0625rem;
    color: var(--muted);
    max-width: 36rem;
    line-height: 1.6;
}

/* Lesson Styles */
.lesson {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lesson:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.lesson-header {
    margin-bottom: 2rem;
}

.lesson-number {
    display: inline-block;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.lesson-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light);
}

/* Prose Content */
.prose-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--muted);
}

.prose-content p {
    margin-bottom: 1.25rem;
}

.prose-content p.lead {
    font-size: 1.1875rem;
    color: var(--light);
}

.prose-content h3 {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--light);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.prose-content h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--light);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.prose-content h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.prose-content strong {
    color: var(--light);
    font-weight: 600;
}

.prose-content em {
    font-style: italic;
}

.prose-content ul,
.prose-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.prose-content li {
    margin-bottom: 0.5rem;
}

.prose-content ul li {
    list-style-type: disc;
}

.prose-content ol li {
    list-style-type: decimal;
}

.prose-content a {
    color: var(--accent);
    text-decoration: none;
}

.prose-content a:hover {
    text-decoration: underline;
}

/* Key Concept Box */
.key-concept {
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.key-concept h4 {
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.key-concept p:last-child {
    margin-bottom: 0;
}

/* Interactive Placeholder */
.interactive-placeholder {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(167, 139, 250, 0.03) 100%);
    border: 2px dashed rgba(167, 139, 250, 0.3);
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    margin: 2rem 0;
    text-align: center;
}

.interactive-placeholder .placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.interactive-placeholder .placeholder-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.interactive-placeholder .placeholder-description {
    font-size: 0.9375rem;
    color: var(--muted);
    max-width: 24rem;
    margin: 0 auto;
}

/* Summary Box */
.lesson-summary {
    background: rgba(42, 42, 42, 0.5);
    border: 1px solid var(--dark-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 2rem;
}

.lesson-summary h4 {
    color: var(--light);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.lesson-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

.lesson-summary li {
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

.lesson-summary li:last-child {
    margin-bottom: 0;
}

/* Tables */
.theory-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.theory-table th,
.theory-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--dark-border);
}

.theory-table th {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theory-table td {
    color: var(--muted);
}

.theory-table tr:hover td {
    background: rgba(167, 139, 250, 0.05);
}

.theory-table td:first-child {
    color: var(--light);
    font-weight: 500;
}

/* Course Complete */
.course-complete {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    margin-top: 3rem;
}

.course-complete h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1rem;
}

.course-complete p {
    color: var(--muted);
    font-size: 1.0625rem;
    max-width: 32rem;
    margin: 0 auto 1rem;
}

.course-complete p:last-child {
    color: var(--light);
    font-weight: 500;
    margin-bottom: 0;
}

/* Course Footer */
.course-footer {
    border-top: 1px solid var(--dark-border);
    padding: 3rem 0;
    margin-top: 2rem;
}

.course-footer-content {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--dark-border);
    border-radius: 0.5rem;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

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

/* Related Courses */
.related-courses {
    margin-top: 3rem;
}

.related-courses h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 1rem;
}

.related-courses ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-courses li {
    margin-bottom: 0.5rem;
}

.related-courses a {
    color: var(--accent);
    text-decoration: none;
}

.related-courses a:hover {
    text-decoration: underline;
}

/* Cheat Sheet */
.cheat-sheet {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.cheat-sheet h4 {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.cheat-sheet p,
.cheat-sheet ul {
    margin-bottom: 1rem;
}

.cheat-sheet p:last-child,
.cheat-sheet ul:last-child {
    margin-bottom: 0;
}

/* ==================== INTERACTIVE ELEMENTS ==================== */

/* Interactive Container */
.interactive-element {
    background: rgba(20, 20, 24, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

/* Common Button Styles */
.interactive-element button {
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--accent);
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.interactive-element button:hover {
    background: rgba(167, 139, 250, 0.25);
    border-color: var(--accent);
}

.interactive-element button:active {
    transform: scale(0.98);
}

.interactive-element button.active,
.interactive-element button.playing {
    background: var(--accent);
    color: #000;
}

/* Beat Sync Game */
.beat-sync-game {
    text-align: center;
}

.bsg-display {
    margin-bottom: 1.5rem;
}

.bsg-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.2);
    border: 3px solid var(--accent);
    margin: 0 auto 1rem;
    transition: transform 0.1s;
}

.bsg-circle.pulse {
    transform: scale(1.2);
    background: var(--accent);
}

.bsg-feedback {
    height: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.bsg-feedback.perfect { color: #22c55e; }
.bsg-feedback.good { color: #eab308; }
.bsg-feedback.miss { color: #ef4444; }

.bsg-bpm {
    color: var(--muted);
    font-size: 0.875rem;
}

.bsg-progress {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    color: var(--muted);
}

.bsg-tap-btn {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 1.25rem;
    margin: 1rem auto;
    display: none;
}

.bsg-instructions {
    color: var(--muted);
    font-size: 0.9375rem;
    margin: 1rem 0;
}

.bsg-start-btn {
    margin-top: 1rem;
}

/* Rhythm Beat Demo */
.rhythm-beat-demo {
    text-align: center;
}

.rbd-visual {
    margin-bottom: 1.5rem;
}

.rbd-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.rbd-label {
    width: 60px;
    text-align: right;
    color: var(--muted);
    font-size: 0.875rem;
}

.rbd-beats {
    display: flex;
    gap: 0.5rem;
}

.rbd-beat {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--dark-border);
    transition: all 0.1s;
}

.rbd-beat.small {
    width: 30px;
    height: 30px;
}

.rbd-beat.active {
    background: var(--accent);
    border-color: var(--accent);
}

.rbd-rhythm-row {
    opacity: 0.3;
    transition: opacity 0.3s;
}

.rbd-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rbd-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* Measure Visualizer */
.measure-visualizer {
    text-align: center;
}

.mv-display {
    margin-bottom: 1.5rem;
}

.mv-measure {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.mv-beats {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.mv-beat {
    width: 60px;
    height: 60px;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--muted);
    transition: all 0.1s;
}

.mv-beat.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: scale(1.1);
}

/* Rhythm Pattern Creator */
.rhythm-pattern-creator {
    text-align: center;
}

.rpc-grid {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.rpc-slot {
    width: 60px;
    height: 60px;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed var(--dark-border);
    cursor: pointer;
    transition: all 0.2s;
}

.rpc-slot:hover {
    border-color: var(--accent);
}

.rpc-slot.active {
    background: rgba(167, 139, 250, 0.3);
    border-style: solid;
    border-color: var(--accent);
}

.rpc-slot.active::after {
    content: '🥁';
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rpc-slot.playing {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.5);
}

.rpc-labels {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rpc-labels span {
    width: 60px;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}

.rpc-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.rpc-hint {
    color: var(--muted);
    font-size: 0.8125rem;
    margin-top: 1rem;
}

/* Pitch Comparison Game */
.pitch-comparison-game {
    text-align: center;
}

.pcg-progress, .pcg-score {
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.pcg-feedback {
    height: 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0;
}

.pcg-feedback.correct { color: #22c55e; }
.pcg-feedback.incorrect { color: #ef4444; }

.pcg-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.pcg-btn {
    flex: 1;
    max-width: 180px;
    padding: 1rem;
}

.pcg-btn.correct {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}

.pcg-btn.incorrect {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
}

/* Keyboard */
.keyboard-container {
    text-align: center;
}

.keyboard {
    display: flex;
    justify-content: center;
    position: relative;
    height: 140px;
    margin: 0 auto 1rem;
}

.keyboard .key {
    position: relative;
    cursor: pointer;
    transition: all 0.1s;
}

.keyboard .key.white {
    width: 40px;
    height: 140px;
    background: linear-gradient(180deg, #f5f5f5 0%, #d4d4d4 100%);
    border: 1px solid #999;
    border-radius: 0 0 4px 4px;
    z-index: 1;
}

.keyboard .key.black {
    width: 28px;
    height: 90px;
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    margin-left: -14px;
    margin-right: -14px;
    z-index: 2;
}

.keyboard .key.white:hover {
    background: linear-gradient(180deg, #fff 0%, #e4e4e4 100%);
}

.keyboard .key.black:hover {
    background: linear-gradient(180deg, #444 0%, #222 100%);
}

.keyboard .key.playing,
.keyboard .key.highlight {
    background: var(--accent) !important;
}

.keyboard .key.dimmed {
    opacity: 0.3;
    cursor: default;
}

.keyboard .key-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.keyboard-hint {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Octave Demo */
.octave-demo {
    text-align: center;
}

.od-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.od-note {
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--dark-border);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.od-note.active {
    border-color: var(--accent);
    background: rgba(167, 139, 250, 0.2);
}

.od-note-name {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light);
}

.od-note-label {
    font-size: 0.875rem;
    color: var(--muted);
}

.od-arrow {
    font-size: 1.5rem;
    color: var(--muted);
}

.od-info {
    color: var(--accent);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.od-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Step Size Demo */
.step-size-demo {
    text-align: center;
}

.ssd-keyboard {
    display: flex;
    justify-content: center;
    height: 100px;
    margin-bottom: 1.5rem;
}

.ssd-keyboard .key {
    cursor: pointer;
    transition: all 0.1s;
}

.ssd-keyboard .key.white {
    width: 50px;
    height: 100px;
    background: linear-gradient(180deg, #f5f5f5 0%, #d4d4d4 100%);
    border: 1px solid #999;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    font-size: 0.875rem;
    color: #666;
}

.ssd-keyboard .key.black {
    width: 35px;
    height: 65px;
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    margin-left: -17px;
    margin-right: -17px;
    z-index: 2;
}

.ssd-keyboard .key.highlight,
.ssd-keyboard .key.playing {
    background: var(--accent) !important;
    color: #000;
}

.ssd-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ssd-result {
    color: var(--light);
    font-weight: 500;
    min-height: 1.5rem;
}

/* Pitch Pattern Creator */
.pitch-pattern-creator {
    overflow-x: auto;
}

.ppc-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 1rem;
}

.ppc-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ppc-note-label {
    width: 30px;
    text-align: right;
    padding-right: 8px;
    font-size: 0.75rem;
    color: var(--muted);
}

.ppc-cell {
    width: 36px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dark-border);
    cursor: pointer;
    transition: all 0.1s;
}

.ppc-cell:hover {
    background: rgba(167, 139, 250, 0.2);
}

.ppc-cell.active {
    background: var(--accent);
    border-color: var(--accent);
}

.ppc-cell.playing {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.ppc-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* Scale Builder */
.scale-builder {
    text-align: center;
}

.sb-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sb-controls label {
    color: var(--muted);
}

.sb-controls select {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
}

.sb-pattern {
    color: var(--accent);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sb-notes {
    color: var(--light);
    font-size: 1.125rem;
    font-weight: 500;
    margin: 1rem 0;
}

.sb-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Major Minor Comparison */
.major-minor-comparison {
    text-align: center;
}

.mmc-display {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.mmc-scale {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--dark-border);
    border-radius: 0.5rem;
    transition: all 0.2s;
    min-width: 180px;
}

.mmc-scale.active {
    border-color: var(--accent);
    background: rgba(167, 139, 250, 0.15);
}

.mmc-scale h4 {
    color: var(--light);
    margin-bottom: 0.5rem;
}

.mmc-scale p {
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0;
}

.mmc-diff {
    color: var(--accent);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.mmc-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* Pentatonic Playground */
.pentatonic-playground {
    text-align: center;
}

.pp-toggle {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pp-toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.pp-keyboard {
    margin-bottom: 1rem;
}

.keyboard.pentatonic .key {
    width: 50px;
    height: 80px;
}

.pp-hint {
    color: #22c55e;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Chord Builder */
.chord-builder {
    text-align: center;
}

.cb-controls {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cb-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cb-control label {
    color: var(--muted);
}

.cb-control select {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.cb-display {
    margin-bottom: 1rem;
}

.cb-chord-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.cb-notes {
    color: var(--light);
    margin-bottom: 0.25rem;
}

.cb-intervals {
    color: var(--muted);
    font-size: 0.875rem;
}

.cb-keyboard {
    margin: 1rem 0;
}

/* Chords in Key */
.chords-in-key {
    text-align: center;
}

.cik-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cik-control label {
    color: var(--muted);
}

.cik-control select {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.cik-chord-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cik-chord-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    min-width: 60px;
}

.cik-chord-btn.major {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

.cik-chord-btn.minor {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.cik-chord-btn.dim {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.cik-chord-btn.playing {
    transform: scale(1.1);
}

.cik-numeral {
    font-size: 0.75rem;
    color: var(--muted);
}

.cik-name {
    font-weight: 600;
}

.cik-info {
    color: var(--muted);
    font-size: 0.875rem;
}

/* Chord Loop Builder */
.chord-loop-builder {
    text-align: center;
}

.clb-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.clb-control label {
    color: var(--muted);
}

.clb-control select {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.clb-slots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.clb-slot {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--dark-border);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.clb-slot.playing {
    border-color: var(--accent);
    background: rgba(167, 139, 250, 0.2);
}

.clb-slot select {
    background: transparent;
    border: none;
    color: var(--light);
    font-size: 0.9375rem;
    padding: 0.5rem;
}

.clb-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.clb-tempo {
    width: 100px;
}

.clb-tempo-display {
    color: var(--muted);
    font-size: 0.875rem;
}

/* Progression Player */
.progression-player {
    text-align: center;
}

.pp-header h4 {
    color: var(--light);
    margin-bottom: 0.5rem;
}

.pp-header p {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.pp-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    flex-wrap: wrap;
}

.pp-numeral {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.375rem;
    color: var(--muted);
    transition: all 0.2s;
}

.pp-numeral.active {
    background: var(--accent);
    color: #000;
}

.pp-songs {
    color: var(--muted);
    font-size: 0.8125rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.pp-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.pp-controls select {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.pp-chord-display {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    min-height: 2rem;
}

/* Beat Builder */
.beat-builder {
    overflow-x: auto;
}

.bb-grid {
    margin-bottom: 1rem;
}

.bb-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.bb-label {
    width: 50px;
    text-align: right;
    padding-right: 8px;
    font-size: 0.75rem;
    color: var(--muted);
}

.bb-cells {
    display: flex;
    gap: 2px;
}

.bb-cell {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dark-border);
    cursor: pointer;
    transition: all 0.1s;
}

.bb-cell.downbeat {
    border-left: 2px solid var(--accent);
}

.bb-cell:hover {
    background: rgba(167, 139, 250, 0.2);
}

.bb-cell.active {
    background: var(--accent);
    border-color: var(--accent);
}

.bb-cell.playing {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.bb-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bb-tempo {
    width: 100px;
}

.bb-tempo-display {
    color: var(--muted);
    font-size: 0.875rem;
}

.bb-presets {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bb-preset {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .course-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .lesson-title {
        font-size: 1.25rem;
    }

    .theory-table {
        font-size: 0.8125rem;
    }

    .theory-table th,
    .theory-table td {
        padding: 0.5rem 0.75rem;
    }

    .interactive-placeholder {
        padding: 2rem 1.5rem;
    }

    .keyboard .key.white {
        width: 30px;
    }

    .keyboard .key.black {
        width: 22px;
        margin-left: -11px;
        margin-right: -11px;
    }

    .mv-beat, .rpc-slot {
        width: 50px;
        height: 50px;
    }

    .bb-cell {
        width: 22px;
        height: 22px;
    }

    .ppc-cell {
        width: 28px;
        height: 22px;
    }

    /* Mobile button adjustments */
    .interactive-element button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .pcg-btn, .cfg-btn {
        padding: 0.5rem 0.75rem;
    }

    .tsc-btn, .gre-btn, .sc-btn, .rd-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
}