/* Shared visual foundation. Loaded after each page's functional styles. */
:root {
  --bs-ink: #171717;
  --bs-charcoal: #171717;
  --bs-raised: #262626;
  --bs-paper: #f5f2ec;
  --bs-white: #faf9f6;
  --bs-muted: #c9c7c1;
  --bs-line: #707070;
  --bs-line-dark: #606060;
  --bs-brand-red: #B21F24;
  --bs-brand-red-hover: #8C171B;
  --bs-range-track: #686868;
  --bs-accent: #4a4d4e;
  --bs-accent-hover: #171717;
  --bs-text-dark: #f5f2ec;
  --bs-success: #397454;
  --bs-danger: #a23d39;
  --bs-warning: #B45309;
  --bs-space-section: clamp(24px, 3vw, 32px);
  --bs-space-card: 24px;
  --bs-space-control: 16px;
  --dark: var(--bs-charcoal);
  --card: var(--bs-raised);
  --card-hover: #303030;
  --text: var(--bs-paper);
  --text-light: var(--bs-muted);
  --border: var(--bs-line);
  --bs-muted-accent: #a7aaa8;
  --accent: var(--bs-accent);
  --border-accent: var(--bs-line-dark);
  --shadow: 0 8px 24px rgb(23 23 23 / 8%);
  --shadow-hover: 0 10px 28px rgb(23 23 23 / 12%);
}

html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; }
button, input, select, textarea { font-family: Inter, sans-serif; }
a { text-underline-offset: .2em; }
:focus-visible { outline-color: var(--bs-paper); }

/* Error documents use main.css but follow the same site palette and type system. */
.page-shell { color: var(--bs-paper); background: var(--bs-charcoal); }
.status-card { color: var(--bs-paper); background: var(--bs-raised); border-color: var(--bs-line-dark); border-radius: 2px; box-shadow: none; }
.status-card .eyebrow { color: #c9c7c1; }
.status-card h1 { color: var(--bs-paper); font-family: 'Cormorant Garamond', serif; }
.status-card > p:not(.eyebrow) { color: var(--bs-muted); }
.status-link { color: var(--bs-paper); }
.status-link:focus-visible { outline-color: var(--bs-paper); }

/* A white brand mark always sits on a dark, integral surface. */
.header { background: var(--bs-charcoal); color: var(--bs-white); border-bottom: 1px solid var(--bs-line-dark); box-shadow: none; }
.header .container { background: transparent; }
.header .logo { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; padding: 0; background: transparent; }
.header .brand-logo { display: block; }
.mobile-menu { background: var(--bs-charcoal); color: var(--bs-white); border-color: var(--bs-line-dark); box-shadow: none; }
.header .menu a, .header .mobile-menu a { color: var(--bs-white); }
.header .menu a:hover, .header .menu a.active, .header .mobile-menu a:hover { color: #fff; background: var(--bs-raised); }
.header .menu-toggle { color: var(--bs-white); }
.admin-sidebar, .student-sidebar, .student-sidebar-collapsible, .program-sidebar, .lesson-sidebar {
  background: var(--bs-charcoal);
  color: var(--bs-white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.sidebar-logo { background: transparent; border-color: var(--bs-line-dark); }
.sidebar-logo .brand-logo { padding: 0; }
.sidebar-logo span { color: #d0cec8; }
.sidebar-nav a, .sidebar-nav button { color: #d0cec8; border-radius: 0; }
.sidebar-nav a:hover, .sidebar-nav button:hover,
.sidebar-nav form button:hover { background: #303030; color: #fff; }
.sidebar-nav a.active { background: #343434; border: 0; box-shadow: inset 3px 0 #f5f2ec; color: #fff; }
.sidebar-nav form button:focus-visible { outline-color: #f5f2ec; }

/* Public editorial pages and account access. */
.login-page { background-color: var(--bs-paper); background-image: url('/images/bg-branco-ruido.webp'); }
.login-card { color: var(--bs-white); background: var(--bs-charcoal); border: 1px solid var(--bs-line-dark); border-radius: 2px; box-shadow: none; }
.login-brand__logo { padding: 0; background: transparent; }
.login-brand p, .login-guidance, .login-footer span { color: #c9c7c1; }
.login-form label { color: var(--bs-white); }
.login-form input { color: var(--bs-white); background: #2d2d2d; border-color: #707070; border-radius: 2px; }
.login-form input:focus { background: #333; border-color: #e7e4dc; }
.login-form input::placeholder { color: #b0aea7; }
.login-form .password-toggle { color: #e7e4dc; }
.login-form .password-toggle:hover { background: #404040; color: #fff; }
.login-form > button[type='submit'] { color: #fff; background: var(--bs-brand-red); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none; }
.login-form > button[type='submit']:hover:not(:disabled) { color: #fff; background: var(--bs-brand-red-hover); border-color: var(--bs-line); }
.login-form > button[type='submit']:active:not(:disabled) { background: #651014; }
.login-footer a { color: var(--bs-white); }
.login-form > button[type='submit']:focus-visible, .login-footer a:focus-visible { outline-color: var(--bs-white); }
.login-error { border-color: #a95650; background: #432d2b; color: #f3d8d5; }
.login-success { border-color: #59836a; background: #263b2e; color: #d9ecdf; }
.lead-capture-page { color: var(--bs-paper); background: var(--bs-charcoal); }
.lead-capture-card { color: var(--bs-white); border-color: var(--bs-line); border-radius: 2px; background: #0d0d0d; box-shadow: none; }
.lead-capture-card > .logo { display: inline-flex; padding: 0; background: transparent; }
.lead-capture-card > .logo img { display: block; }
.lead-capture-card input, .lead-capture-card textarea { color: var(--bs-white); background: #202020; border-color: #707070; border-radius: 2px; }
.lead-capture-card input:focus, .lead-capture-card textarea:focus { outline-color: #fff; }
.lead-capture-card .lead-capture-submit { color: #fff; background: var(--bs-brand-red); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none; }
.lead-capture-card .lead-capture-submit:hover:not(:disabled) { color: #fff; background: var(--bs-brand-red-hover); border-color: var(--bs-line); box-shadow: none; transform: none; }
.lead-capture-card .lead-capture-submit:focus-visible { outline-color: #fff; }
.lead-capture-card .lead-capture-submit:active:not(:disabled) { background: #651014; }
.lead-capture-card .lead-capture-submit:disabled { color: #c9c7c1; background: #303030; border-color: #606060; box-shadow: none; }

/* Administrative pages use a continuous charcoal work surface and an architectural dark rail. */
.admin-layout {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  min-height: 100vh;
  padding: 0 clamp(20px, 4vw, 64px) 0 0;
  color: var(--bs-paper);
  background-color: var(--bs-charcoal);
}
.admin-sidebar { position: sticky; top: 0; height: 100vh; min-height: 100vh; padding: 28px 20px; overflow-y: auto; }
.admin-main { padding: clamp(28px, 4vw, 56px) 0; color: var(--bs-paper); }
.admin-header { margin-bottom: 32px; }
.admin-header h1, .admin-main h1, .admin-main h2, .admin-main h3 { color: var(--bs-paper); }
.admin-header p, .admin-main p, .admin-main small, .admin-main label, .admin-main .text-muted { color: var(--bs-muted); }
.admin-main a { color: var(--bs-paper); }
.admin-main .admin-sidebar a, .admin-main .sidebar-nav a { color: #d0cec8; }
.admin-section, .admin-card, .metric-card, .analytics-period-summary, .analytics-chart-card,
.student-admin-card, .student-profile-section, .admin-form-card, .admin-panel,
.prospecting-card, .library-card, .program-card, .payment-card {
  color: var(--bs-paper);
  background: var(--bs-raised);
  border: 1px solid var(--bs-line);
  border-radius: 2px;
  box-shadow: none;
}
.admin-section { padding: var(--bs-space-card); }
.admin-main .admin-card, .admin-main .student-admin-card, .admin-main .student-profile-section,
.admin-main .admin-panel, .admin-main .prospecting-card, .admin-main .library-card,
.admin-main .program-card, .admin-main .payment-card, .admin-main .settings-card { padding: var(--bs-space-card); }
.metric-card { padding: var(--bs-space-card); }
.metric-card span, .metric-card small { color: var(--bs-muted); }
.metric-card h3, .metric-card strong { color: var(--bs-paper); }
.admin-table-container { border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-raised); box-shadow: none; }
.admin-table, .student-table { color: var(--bs-paper); background: var(--bs-raised); }
.admin-table th, .student-table th { color: var(--bs-paper); background: #303030; border-color: var(--bs-line); }
.admin-table td, .student-table td { color: var(--bs-paper); border-color: var(--bs-line); }
.admin-table tr:hover td, .student-table tr:hover td { background: #383838; }
.admin-button, .admin-main .btn-primary, .admin-main .button-primary {
  color: var(--bs-white); background: var(--bs-brand-red); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none;
}
.admin-button:hover:not(:disabled), .admin-main .btn-primary:hover:not(:disabled), .admin-main .button-primary:hover:not(:disabled) { color: #fff; background: var(--bs-brand-red-hover); border-color: var(--bs-line); box-shadow: none; transform: none; }
.admin-button:active:not(:disabled), .admin-main .btn-primary:active:not(:disabled), .admin-main .button-primary:active:not(:disabled) { color: #fff; background: #651014; border-color: var(--bs-line); transform: translateY(1px); }
.admin-button:focus-visible, .admin-main .btn-primary:focus-visible, .admin-main .button-primary:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 3px; }
.admin-button:disabled, .admin-main .btn-primary:disabled, .admin-main .button-primary:disabled { color: var(--bs-muted); background: #303030; border-color: #707070; cursor: not-allowed; }
.admin-main button[type='submit']:not(.table-action):not(.admin-button):not(.btn-primary):not(.button-primary):not(.danger) { min-height: 40px; padding: 9px 14px; border: 1px solid #707070; border-radius: 2px; color: var(--bs-paper); background: #303030; }
.admin-main button[type='submit']:not(.table-action):not(.admin-button):not(.btn-primary):not(.button-primary):not(.danger):hover:not(:disabled) { color: #fff; border-color: #999; background: #414141; }
.admin-main button[type='submit']:not(.table-action):not(.admin-button):not(.btn-primary):not(.button-primary):not(.danger):focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 2px; }
.admin-main button[type='submit']:not(.table-action):not(.admin-button):not(.btn-primary):not(.button-primary):not(.danger):disabled { color: var(--bs-muted); background: #303030; border-color: #707070; cursor: not-allowed; }
.admin-main .btn-secondary, .admin-main .button-secondary { color: var(--bs-paper); background: transparent; border: 1px solid #8b8983; border-radius: 2px; box-shadow: none; }
.admin-main .table-action { min-height: 40px; padding: 9px 14px; border: 1px solid #707070; border-radius: 2px; color: var(--bs-paper); background: #303030; text-decoration: none; }
.admin-main .table-action:hover:not(:disabled) { color: #fff; border-color: #999; background: #414141; transform: none; }
.admin-main .table-action:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 2px; }
.admin-main .table-action.danger { color: #F3D8D5; border-color: #A95650; background: #432D2B; }
.admin-main .table-action.danger:hover:not(:disabled) { border-color: #D17A71; background: #573431; }
.free-material-actions > a.table-action:first-child { color: #fff; border-color: var(--bs-line); background: var(--bs-brand-red); }
.free-material-actions > a.table-action:first-child:hover { border-color: var(--bs-line); background: var(--bs-brand-red-hover); }
.admin-table th, .student-table th { padding: 15px 14px; }
.admin-table td { padding: 15px 14px; }
.student-table th, .student-table td { padding: 14px 12px; }
.admin-toolbar input, .admin-main input:not([type='checkbox']):not([type='radio']):not([type='range']),
.admin-main select, .admin-main textarea { color: var(--bs-paper); background: #202020; border: 1px solid #707070; border-radius: 2px; box-shadow: none; }
.admin-main input::placeholder, .admin-main textarea::placeholder { color: #c9c7c1; }
.admin-main input:focus, .admin-main select:focus, .admin-main textarea:focus { border-color: #c9c7c1; box-shadow: 0 0 0 2px rgb(245 242 236 / 22%); outline: 0; }
.admin-main input[type='checkbox'], .admin-main input[type='radio'] { accent-color: var(--bs-brand-red); }
.status-badge, .badge, .admin-badge { border-radius: 2px; box-shadow: none; }
.admin-main .status-badge.active, .admin-main .status-badge.paid, .admin-main .status-badge.published { color: #d9ecdf; background: #263b2e; border-color: #59836a; }
.admin-main .status-badge.overdue, .admin-main .status-badge.error { color: #f3d8d5; background: #432d2b; border-color: #a95650; }
.admin-main .status-badge.pending, .admin-main .status-badge.trial { color: #F6C5A3; background: #3B261A; border-color: #9A5128; }
.admin-main .admin-message, .admin-main .alert { border-radius: 2px; box-shadow: none; }
.analytics-period-summary, .analytics-chart-card { color: var(--bs-paper); }

/* Student area and lesson reading pages share the dark workspace surfaces. */
.student-layout {
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.2vw, 44px) 0 0 clamp(20px, 4vw, 64px);
  color: var(--bs-paper);
  background-color: var(--bs-charcoal);
}
.student-sidebar, .student-sidebar-collapsible { position: sticky; top: 0; height: 100vh; min-height: 100vh; padding: 28px 20px; overflow-y: auto; }
.student-main, .lesson-main { color: var(--bs-paper); }
.dashboard-header h1, .student-main h1, .student-main h2, .student-main h3, .lesson-main h1, .lesson-main h2, .lesson-main h3 { color: var(--bs-paper); }
.dashboard-header p, .student-main p, .lesson-main p { color: var(--bs-muted); }
.dashboard-section, .overview-card, .program-card, .student-empty-state, .lesson-content,
.lesson-card, .module-card, .meeting-card, .student-material-card {
  color: var(--bs-paper); background: var(--bs-raised); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none;
}
.dashboard-section { padding: var(--bs-space-section); }
.overview-card, .program-card, .student-empty-state, .lesson-content,
.lesson-card, .module-card, .meeting-card, .student-material-card { padding: var(--bs-space-card); }
.student-library-video-card, .student-video-main, .student-video-card { border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-raised); box-shadow: none; }
.study-tool-card { border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-raised); box-shadow: none; }
.study-tool-card .bs-fretboard-trainer { width: 100%; max-width: none; min-width: 0; padding: clamp(20px, 3vw, 32px); }
.study-tool-action { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; min-height: 44px; color: #fff; border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-brand-red); text-align: center; text-decoration: none; }
.study-tool-card summary:hover .study-tool-action { color: #fff; border-color: var(--bs-line); background: var(--bs-brand-red-hover); }
.study-tool-action:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 3px; }
.study-tool-card summary:focus-visible .study-tool-action { outline: 2px solid var(--bs-paper); outline-offset: 3px; }
.study-tool-card summary:active .study-tool-action { border-color: #651014; background: #651014; }
.study-tool-card .metronome-disclosure { border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-raised); box-shadow: none; }
.dashboard-section { padding: clamp(20px, 3vw, 32px); }
.student-empty-state { border-style: dashed; }
.student-layout .locked-card { color: var(--bs-paper); background: var(--bs-raised); border-color: var(--bs-line); border-radius: 2px; box-shadow: none; }
.student-layout .locked-card-title, .student-layout .locked-card-price, .student-layout .locked-card-price strong { color: var(--bs-paper); }
.student-layout .locked-card-description { color: var(--bs-muted); }
.student-layout .locked-card-action, .student-layout .empty-mentorship-action,
.student-layout .timeline-action:not(.disabled), .program-layout .timeline-action:not(.disabled),
.student-layout .library-action[href], .lesson-main .student-material-card > a[href],
.lesson-main .student-material-card .library-action[href], .program-main .btn-primary,
.student-main .btn-primary, .lesson-main .btn-primary, .lesson-main .study-button,
.program-layout .btn-primary, .mentorship-card__action, .btn-primary, .btn-header {
  color: #fff; background: var(--bs-brand-red); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none;
  min-height: 44px; padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.student-layout .locked-card-action:hover, .student-layout .empty-mentorship-action:hover,
.student-layout .timeline-action:not(.disabled):hover, .program-layout .timeline-action:not(.disabled):hover,
.student-layout .library-action[href]:hover, .lesson-main .student-material-card > a[href]:hover,
.lesson-main .student-material-card .library-action[href]:hover, .program-main .btn-primary:hover,
.student-main .btn-primary:hover, .lesson-main .btn-primary:hover, .lesson-main .study-button:hover,
.program-layout .btn-primary:hover, .mentorship-card__action:hover, .btn-primary:hover, .btn-header:hover {
  color: #fff; background: var(--bs-brand-red-hover); border-color: var(--bs-line); box-shadow: none; transform: none;
}
.student-layout .locked-card-action:focus-visible, .student-layout .empty-mentorship-action:focus-visible,
.student-layout .timeline-action:focus-visible, .program-layout .timeline-action:focus-visible,
.student-layout .library-action[href]:focus-visible, .lesson-main .student-material-card > a[href]:focus-visible,
.lesson-main .student-material-card .library-action[href]:focus-visible, .program-main .btn-primary:focus-visible,
.student-main .btn-primary:focus-visible, .lesson-main .btn-primary:focus-visible, .lesson-main .study-button:focus-visible,
.program-layout .btn-primary:focus-visible, .mentorship-card__action:focus-visible, .btn-primary:focus-visible, .btn-header:focus-visible {
  outline: 2px solid var(--bs-paper); outline-offset: 3px;
}
.student-layout .locked-card-action:active, .student-layout .empty-mentorship-action:active,
.student-layout .timeline-action:active, .program-layout .timeline-action:active,
.student-layout .library-action[href]:active, .lesson-main .student-material-card > a[href]:active,
.lesson-main .student-material-card .library-action[href]:active, .program-main .btn-primary:active,
.student-main .btn-primary:active, .lesson-main .btn-primary:active, .lesson-main .study-button:active,
.program-layout .btn-primary:active, .mentorship-card__action:active, .btn-primary:active, .btn-header:active {
  color: #fff; background: #651014; border-color: var(--bs-line); transform: translateY(1px);
}
.student-layout .timeline-item.current .timeline-action:not(.disabled), .program-layout .timeline-item.current .timeline-action:not(.disabled) { color: #fff; background: var(--bs-brand-red); border-color: var(--bs-line); }
.student-layout .timeline-action.disabled, .program-layout .timeline-action.disabled { color: var(--bs-muted); background: #303030; border-color: #606060; }
.student-main button, .lesson-main button { border-radius: 2px; box-shadow: none; }
.student-main input:not([type='checkbox']):not([type='radio']):not([type='range']), .student-main select, .student-main textarea,
.lesson-main input:not([type='checkbox']):not([type='radio']):not([type='range']), .lesson-main select, .lesson-main textarea {
  color: var(--bs-paper); background: #202020; border-color: #707070; border-radius: 2px;
}
.program-layout, .lesson-layout {
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: clamp(24px, 4vw, 56px);
  padding: 0 0 0 clamp(20px, 4vw, 64px);
  color: var(--bs-paper);
  background-color: var(--bs-charcoal);
}
.program-sidebar, .lesson-sidebar { position: sticky; top: 0; height: 100vh; min-height: 100vh; padding: 28px 20px; overflow-y: auto; }
.program-main, .lesson-main { min-width: 0; padding: clamp(28px, 4vw, 56px) 0; color: var(--bs-paper); }
.program-main h1, .program-main h2, .program-main h3, .lesson-main h1, .lesson-main h2, .lesson-main h3 { color: var(--bs-paper); }
.program-main p, .program-main li, .lesson-main p, .lesson-main li { color: var(--bs-muted); }
.summary-card, .program-empty-state, .program-material-card, .program-challenge-card,
.lesson-section, .lesson-completion, .mentor-notes, .next-steps, .lesson-material-card,
.lesson-resource-card {
  color: var(--bs-paper); background: var(--bs-raised); border-color: var(--bs-line); border-radius: 2px; box-shadow: none;
}
.program-main .program-hero { color: var(--bs-white); background: var(--bs-charcoal); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none; }
.program-main .program-hero h1 { color: var(--bs-white); }
.program-main .program-hero p { color: #c9c7c1; }
.program-main .summary-card { background: var(--bs-raised); border-radius: 2px; box-shadow: none; }
.program-main .summary-card h3 { color: var(--bs-paper); }
.program-main .program-section { background: transparent; }
.lesson-main .lesson-highlight, .lesson-main .video-placeholder, .lesson-main .lesson-section,
.lesson-main .lesson-completion, .lesson-main .mentor-notes, .lesson-main .next-steps,
.lesson-main .student-material-card { color: var(--bs-paper); background: var(--bs-raised); border: 1px solid var(--bs-line); border-radius: 2px; box-shadow: none; }
.lesson-main .lesson-section { padding: var(--bs-space-section); }
.lesson-main .lesson-completion, .lesson-main .mentor-notes, .lesson-main .next-steps,
.lesson-main .lesson-material-card, .lesson-main .lesson-resource-card { padding: var(--bs-space-card); }
.lesson-main .lesson-section :is(h1, h2, h3, p, li, span, label) { color: var(--bs-paper); }
.lesson-main .lesson-section p, .lesson-main .lesson-section li { color: var(--bs-muted); }

/* Public catalog and mentorship pages retain their content hierarchy on square surfaces. */
.mentorship-card { border: 1px solid var(--bs-line); border-radius: 2px; background: var(--bs-raised); box-shadow: none; }
.free-material-card, .material-card { border-color: var(--bs-line); border-radius: 2px; box-shadow: none; }
.free-material-card:hover, .material-card:hover { border-color: #777b7d; border-radius: 2px; box-shadow: none; transform: none; }
.free-material-detail__player, .free-material-detail__media-panel, .free-material-detail__resource-panel,
.free-material-detail__cta { border-radius: 2px; box-shadow: none; }
.summary-card:hover, .program-material-card:hover, .program-challenge-card:hover { border-radius: 2px; box-shadow: none; transform: none; }

/* Music tools use charcoal panels and red note highlights with semantic states. */
.metronome-study-block, .metronome-disclosure, .bs-metronome, .bs-audio-controls,
.bs-ear-trainer, .ear-trainer, .bs-fretboard-trainer, .fretboard-trainer,
.bs-chord-voicing-generator, .bs-scale-generator, .bs-practice-room, .bs-triad-pairs,
.triad-pairs, .study-tool-card, .music-tool, .tool-panel {
  color: var(--bs-paper); border-color: var(--bs-line-dark); border-radius: 2px; box-shadow: none;
}
.metronome-disclosure, .study-tool-card, .music-tool, .tool-panel { background: var(--bs-raised); }
.bs-metronome, .bs-audio-controls, .bs-ear-trainer, .ear-trainer, .bs-fretboard-trainer, .fretboard-trainer,
.bs-chord-voicing-generator, .bs-scale-generator, .bs-practice-room, .bs-triad-pairs, .triad-pairs {
  color: var(--bs-white);
  background: var(--bs-charcoal);
}
.bs-metronome, .bs-ear-trainer, .ear-trainer, .bs-fretboard-trainer, .fretboard-trainer,
.bs-chord-voicing-generator, .bs-scale-generator, .bs-practice-room, .bs-triad-pairs, .triad-pairs {
  padding: var(--bs-space-section);
}
.bs-metronome__beat.is-active { box-shadow: none; }
.bs-metronome button, .bs-audio-controls button, .bs-ear-trainer button, .ear-trainer button,
.bs-fretboard-trainer button, .fretboard-trainer button, .bs-chord-voicing-generator button,
.bs-scale-generator button, .bs-practice-room button, .bs-triad-pairs button, .triad-pairs button {
  border-radius: 2px; box-shadow: none;
}
.bs-metronome .bs-metronome__primary, .bs-practice-room .bs-practice-room__play,
.bs-ear-trainer [data-ear-play], .bs-fretboard-trainer [data-blues-play] {
  color: #fff; border: 1px solid var(--bs-line); background: var(--bs-brand-red); font-weight: 600;
}
.bs-metronome .bs-metronome__primary:hover:not(:disabled), .bs-practice-room .bs-practice-room__play:hover:not(:disabled),
.bs-ear-trainer [data-ear-play]:hover:not(:disabled), .bs-fretboard-trainer [data-blues-play]:hover:not(:disabled) {
  color: #fff; border-color: var(--bs-line); background: var(--bs-brand-red-hover);
}
.bs-metronome .bs-metronome__primary:focus-visible, .bs-practice-room .bs-practice-room__play:focus-visible,
.bs-ear-trainer [data-ear-play]:focus-visible, .bs-fretboard-trainer [data-blues-play]:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 3px; }
.bs-metronome .bs-metronome__primary:active:not(:disabled), .bs-practice-room .bs-practice-room__play:active:not(:disabled),
.bs-ear-trainer [data-ear-play]:active:not(:disabled), .bs-fretboard-trainer [data-blues-play]:active:not(:disabled) { background: #651014; }
.bs-metronome select, .bs-metronome input:not([type='range']), .bs-chord-voicing-generator select,
.bs-scale-generator select, .bs-ear-trainer select, .bs-fretboard-trainer select { color: var(--bs-paper); background-color: #202020; border-color: #707070; border-radius: 2px; }
.bs-metronome :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-audio-controls :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-ear-trainer :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-fretboard-trainer :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-chord-voicing-generator :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-scale-generator :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-practice-room :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled,
.bs-triad-pairs :is(button, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])):disabled {
  color: var(--bs-muted);
  border-color: #606060;
  opacity: 1;
  cursor: not-allowed;
}
.bs-metronome input[type='range'], .bs-audio-controls input[type='range'], .bs-ear-trainer input[type='range'],
.bs-fretboard-trainer input[type='range'], .bs-chord-voicing-generator input[type='range'], .bs-scale-generator input[type='range'],
.bs-practice-room input[type='range'], .bs-triad-pairs input[type='range'] { appearance: none; -webkit-appearance: none; width: 100%; min-height: 24px; margin: 0; padding: 0; accent-color: var(--bs-brand-red); background: transparent; cursor: pointer; }
.bs-metronome input[type='range']::-webkit-slider-runnable-track, .bs-audio-controls input[type='range']::-webkit-slider-runnable-track,
.bs-ear-trainer input[type='range']::-webkit-slider-runnable-track, .bs-fretboard-trainer input[type='range']::-webkit-slider-runnable-track,
.bs-chord-voicing-generator input[type='range']::-webkit-slider-runnable-track, .bs-scale-generator input[type='range']::-webkit-slider-runnable-track,
.bs-practice-room input[type='range']::-webkit-slider-runnable-track, .bs-triad-pairs input[type='range']::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 999px; background: linear-gradient(to right, var(--bs-brand-red) 0%, var(--bs-brand-red) var(--range-progress, 0%), var(--bs-range-track) var(--range-progress, 0%), var(--bs-range-track) 100%); }
.bs-metronome input[type='range']::-webkit-slider-thumb, .bs-audio-controls input[type='range']::-webkit-slider-thumb,
.bs-ear-trainer input[type='range']::-webkit-slider-thumb, .bs-fretboard-trainer input[type='range']::-webkit-slider-thumb,
.bs-chord-voicing-generator input[type='range']::-webkit-slider-thumb, .bs-scale-generator input[type='range']::-webkit-slider-thumb,
.bs-practice-room input[type='range']::-webkit-slider-thumb, .bs-triad-pairs input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--bs-paper); border-radius: 50%; background: var(--bs-brand-red); }
.bs-metronome input[type='range']::-moz-range-track, .bs-audio-controls input[type='range']::-moz-range-track,
.bs-ear-trainer input[type='range']::-moz-range-track, .bs-fretboard-trainer input[type='range']::-moz-range-track,
.bs-chord-voicing-generator input[type='range']::-moz-range-track, .bs-scale-generator input[type='range']::-moz-range-track,
.bs-practice-room input[type='range']::-moz-range-track, .bs-triad-pairs input[type='range']::-moz-range-track { height: 6px; border: 0; border-radius: 999px; background: var(--bs-range-track); }
.bs-metronome input[type='range']::-moz-range-progress, .bs-audio-controls input[type='range']::-moz-range-progress,
.bs-ear-trainer input[type='range']::-moz-range-progress, .bs-fretboard-trainer input[type='range']::-moz-range-progress,
.bs-chord-voicing-generator input[type='range']::-moz-range-progress, .bs-scale-generator input[type='range']::-moz-range-progress,
.bs-practice-room input[type='range']::-moz-range-progress, .bs-triad-pairs input[type='range']::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--bs-brand-red); }
.bs-metronome input[type='range']::-moz-range-thumb, .bs-audio-controls input[type='range']::-moz-range-thumb,
.bs-ear-trainer input[type='range']::-moz-range-thumb, .bs-fretboard-trainer input[type='range']::-moz-range-thumb,
.bs-chord-voicing-generator input[type='range']::-moz-range-thumb, .bs-scale-generator input[type='range']::-moz-range-thumb,
.bs-practice-room input[type='range']::-moz-range-thumb, .bs-triad-pairs input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--bs-paper); border-radius: 50%; background: var(--bs-brand-red); }
.bs-metronome input[type='range']:focus-visible, .bs-audio-controls input[type='range']:focus-visible,
.bs-ear-trainer input[type='range']:focus-visible, .bs-fretboard-trainer input[type='range']:focus-visible,
.bs-chord-voicing-generator input[type='range']:focus-visible, .bs-scale-generator input[type='range']:focus-visible,
.bs-practice-room input[type='range']:focus-visible, .bs-triad-pairs input[type='range']:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 3px; }
.bs-metronome input[type='checkbox'], .bs-audio-controls input[type='checkbox'], .bs-ear-trainer input[type='checkbox'],
.bs-fretboard-trainer input[type='checkbox'], .bs-chord-voicing-generator input[type='checkbox'], .bs-scale-generator input[type='checkbox'],
.bs-practice-room input[type='checkbox'], .bs-triad-pairs input[type='checkbox'], .bs-triad-pairs input[type='radio'] { accent-color: var(--bs-brand-red); }
.metronome-study-block, .metronome-disclosure { border-radius: 2px; }
.metronome-disclosure > summary { color: var(--bs-paper); }
.bs-chord-voicing-card__audio-actions button:focus-visible { outline: 2px solid var(--bs-paper); outline-offset: 2px; }
.bs-triad-pairs { --triad-accent: var(--bs-paper); }
.student-main .student-material-grid .student-material-card, .lesson-main .student-material-grid .student-material-card { padding: 24px; }

/* Persistent option selection across music tools. Hover and focus stay distinct. */
.bs-ear-trainer__choices input:checked + span,
.bs-fretboard-trainer__choices input:checked + span,
.bs-triad-pairs__controls input:checked + span {
  border-color: var(--bs-paper);
  background: var(--bs-brand-red);
  color: #fff;
}
.bs-ear-trainer__choices label:hover input:not(:checked) + span,
.bs-fretboard-trainer__choices label:hover input:not(:checked) + span,
.bs-triad-pairs__controls label:hover input:not(:checked) + span {
  border-color: #aaa;
  background: rgba(255, 255, 255, .09);
}
.bs-ear-trainer__choices label:hover input:checked + span,
.bs-fretboard-trainer__choices label:hover input:checked + span,
.bs-triad-pairs__controls label:hover input:checked + span {
  border-color: var(--bs-paper);
  background: var(--bs-brand-red-hover);
}
.bs-ear-trainer :is(input[type='checkbox'], input[type='radio']),
.bs-fretboard-trainer :is(input[type='checkbox'], input[type='radio']),
.bs-chord-voicing-generator input[type='checkbox'],
.bs-scale-generator input[type='checkbox'],
.bs-practice-room input[type='checkbox'],
.bs-triad-pairs :is(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--bs-brand-red);
}

/* Answer controls carry result feedback after submission; keep it distinct from selection red. */
.bs-ear-trainer__answer-grid button[aria-pressed='true'],
.bs-fretboard-trainer__answers button[aria-pressed='true'] {
  border-color: var(--bs-paper);
  background: var(--bs-brand-red);
  color: #fff;
}
.bs-ear-trainer__answer-grid button[data-answer-state='correct'],
.bs-fretboard-trainer__answers button[data-answer-state='correct'] {
  border-color: #b6ddb7;
  background: #315d39;
  color: #fff;
}
.bs-ear-trainer__answer-grid button[data-answer-state='incorrect'],
.bs-fretboard-trainer__answers button[data-answer-state='incorrect'] {
  border-color: #f0b9a9;
  background: #713b32;
  color: #fff;
}
.bs-ear-trainer__answer-grid button:focus-visible,
.bs-fretboard-trainer__answers button:focus-visible,
.bs-ear-trainer__choices input:focus-visible + span,
.bs-fretboard-trainer__choices input:focus-visible + span,
.bs-triad-pairs__controls input:focus-visible + span {
  outline: 2px solid var(--bs-paper);
  outline-offset: 3px;
}
.bs-ear-trainer__answer-grid button:disabled,
.bs-fretboard-trainer__answers button:disabled {
  cursor: default;
}
.bs-fretboard-trainer .bs-piano-key--answered-correct { background: #315d39; border-color: #b6ddb7; color: #fff; }
.bs-fretboard-trainer .bs-piano-key--black.bs-piano-key--answered-correct { background: #315d39; }
.bs-fretboard-trainer .bs-piano-key--answered-incorrect { background: #713b32; border-color: #f0b9a9; color: #fff; }
.bs-fretboard-trainer .bs-piano-key--black.bs-piano-key--answered-incorrect { background: #713b32; }
.bs-fretboard-trainer .bs-piano-key--answered-correct,
.bs-fretboard-trainer .bs-piano-key--answered-incorrect { box-shadow: none; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--answered-correct .bs-guitar-fretboard__note-circle { fill: #315d39; stroke: #b6ddb7; stroke-width: 3; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--answered-incorrect .bs-guitar-fretboard__note-circle { fill: #713b32; stroke: #f0b9a9; stroke-width: 3; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--playing .bs-guitar-fretboard__note-circle { fill: var(--bs-paper); stroke: var(--bs-brand-red); stroke-width: 4; }
.bs-fretboard-trainer__viewport .bs-guitar-fretboard__note--playing .bs-guitar-fretboard__note-label { fill: var(--bs-ink); }
.bs-practice-room .bs-practice-room__measure.is-active { border-color: var(--bs-paper); background: var(--bs-paper); color: var(--bs-ink); }
.bs-practice-room .bs-practice-room__measure.is-active .bs-practice-room__measure-number { background: var(--bs-ink); color: var(--bs-paper); }
.bs-practice-room .bs-practice-room__segment.is-active { background: var(--bs-paper); color: var(--bs-ink); box-shadow: inset 0 0 0 1px var(--bs-ink); }
.bs-practice-room .bs-practice-room__segment.is-active .bs-practice-room__segment-duration { color: #414141; }
.bs-practice-room .bs-practice-room__segment.is-active .bs-practice-room__segment-arrow { background: var(--bs-ink); color: var(--bs-paper); }
.bs-practice-room .bs-practice-room__card.is-active { border-color: var(--bs-paper); background: rgba(245, 242, 236, .1); box-shadow: inset 0 0 0 1px var(--bs-paper); }
.bs-practice-room .bs-practice-room__card.is-active .bs-practice-room__number { background: var(--bs-ink); color: var(--bs-paper); }
.bs-practice-room .bs-practice-room__card.is-active .bs-practice-room__now { background: var(--bs-paper); color: var(--bs-ink); }
.bs-fretboard-trainer__choices input:disabled + span,
.bs-ear-trainer__choices input:disabled + span,
.bs-triad-pairs__controls input:disabled + span { opacity: .55; cursor: not-allowed; }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; gap: 0; padding: 0 20px 24px; }
  .admin-sidebar { position: relative; top: auto; height: auto; min-height: 0; margin: 0 -20px; padding: 18px 20px; }
  .admin-sidebar .sidebar-nav, .student-sidebar .sidebar-nav, .program-sidebar .sidebar-nav, .lesson-sidebar .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .admin-main { padding: 28px 0; }
  .student-layout { grid-template-columns: 1fr; gap: 0; padding: 24px 20px; }
  .student-sidebar, .student-sidebar-collapsible { position: relative; top: auto; order: -1; height: auto; min-height: 0; margin: -24px -20px 24px; padding: 18px 20px; }
  .program-layout, .lesson-layout { grid-template-columns: 1fr; gap: 0; padding: 24px 20px; }
  .program-sidebar, .lesson-sidebar { position: relative; top: auto; order: -1; height: auto; min-height: 0; margin: -24px -20px 24px; padding: 18px 20px; }
  .program-main, .lesson-main { padding: 0; }
}

@media (max-width: 600px) {
  .admin-section, .metric-card, .dashboard-section { padding: 18px; }
  .admin-main .admin-card, .admin-main .student-admin-card, .admin-main .student-profile-section,
  .admin-main .admin-panel, .admin-main .prospecting-card, .admin-main .library-card,
  .admin-main .program-card, .admin-main .payment-card, .admin-main .settings-card { padding: 18px; }
  .lesson-main .lesson-section { padding: 20px; }
  .student-main .student-material-grid .student-material-card,
  .lesson-main .student-material-grid .student-material-card { padding: 18px; }
}
@media (max-width: 600px) {
  .admin-section, .dashboard-section { padding: 18px; }
  .admin-toolbar { align-items: stretch; flex-direction: column; }
  .admin-layout, .student-layout { padding-left: 14px; padding-right: 14px; }
  .admin-sidebar, .student-sidebar, .student-sidebar-collapsible, .program-sidebar, .lesson-sidebar { margin-left: -14px; margin-right: -14px; }
}