:root {
  --bg-top: #f4efe3;
  --bg-bottom: #e9dfcc;
  --panel: #fffaf1;
  --panel-edge: #cfbf9e;
  --ink: #1f2a34;
  --muted: #5a6672;
  --accent: #b85a2e;
  --accent-strong: #9f4320;
  --blue-active: #72aef7;
  --target-white: #ffd768;
  --target-black: #d99e18;
  --key-black: #141414;
  --key-white: #ffffff;
}

/* Minimal Modern Override - Final */
:root {
  --bg-top: #f4f7fb;
  --bg-bottom: #eef2f7;
  --panel: #ffffff;
  --panel-edge: #d9e2ec;
  --ink: #1f2937;
  --muted: #5f6c7b;
  --accent: #0f76d8;
  --accent-strong: #0b63b7;
  --blue-active: #3f9df2;
  --target-white: #ffd66b;
  --target-black: #e5a121;
  --key-black: #111827;
  --key-white: #ffffff;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body::before,
body::after {
  display: none !important;
}

.app-shell {
  max-width: 1320px;
  padding: 20px 18px;
  animation: none !important;
}

.app-header {
  margin-bottom: 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.app-header h1 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  color: #17212b;
}

.subtitle {
  color: #617386;
}

.panel,
.status-panel {
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
  animation: none !important;
}

.mode-nav {
  gap: 8px;
}

.mode-tab {
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  background: #ffffff;
  color: #2b3a4a;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease;
}

.mode-tab:hover {
  transform: none;
  background: #f7fafc;
  border-color: #c6d5e5;
  box-shadow: none;
}

.mode-tab.active {
  border-color: #8dc3f3;
  background: #eaf4ff;
  color: #174a79;
  box-shadow: none;
}

.btn {
  border: 1px solid #c9d8e8;
  border-radius: 10px;
  background: #f8fbff;
  color: #24405a;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.btn:hover {
  transform: none;
  box-shadow: none;
  border-color: #b8cce1;
  background: #f2f7fd;
}

.btn.accent {
  border-color: #0f76d8;
  background: linear-gradient(180deg, #1791ff 0%, #0f76d8 100%);
  color: #ffffff;
}

.btn.accent:hover {
  border-color: #0b63b7;
  background: linear-gradient(180deg, #1384e8 0%, #0b63b7 100%);
}

.btn.danger {
  border-color: #d95858;
  background: #d95858;
  color: #ffffff;
}

.piano-wrap {
  border: 1px solid #d6e1ec;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef2f6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.auth-page-shell {
  background: linear-gradient(180deg, #eff4fa 0%, #e8eef6 100%);
}

.auth-page-card {
  border: 1px solid #d7e3ef;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Dark Minimal Override - Final */
:root {
  --bg-top: #0b1220 !important;
  --bg-bottom: #070d16 !important;
  --panel: #101a2b !important;
  --panel-edge: #233248 !important;
  --ink: #e6edf7 !important;
  --muted: #9fb0c4 !important;
  --accent: #3aa1ff !important;
  --accent-strong: #2384de !important;
  --blue-active: #57b2ff !important;
  --target-white: #6cc3ff !important;
  --target-black: #3f94df !important;
  --key-black: #0a101a !important;
  --key-white: #ecf3fb !important;
}

html,
body {
  color-scheme: dark;
}

body {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important;
}

body::before,
body::after {
  display: none !important;
}

.app-shell {
  max-width: 1360px !important;
  padding: 20px 18px !important;
  animation: none !important;
}

.app-header {
  margin-bottom: 14px !important;
  padding: 2px 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-header h1 {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-size: clamp(1.8rem, 2.9vw, 2.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #f3f8ff !important;
}

.subtitle {
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.panel,
.status-panel,
.library-card,
.auth-page-card,
.modal-card {
  background: #101a2b !important;
  border: 1px solid #233248 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.hub-head h2,
.screen-head h2,
.adaptive-course-head h3,
.library-title {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  color: #eaf2fc !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

#song-hub-meta,
.screen-head p,
.screen-note,
.hint,
.library-meta,
.auth-status,
.learn-status,
.timing-v,
.timing-k {
  color: #9fb0c4 !important;
}

.screen-note {
  border: 1px solid #233248 !important;
  background: #0e1727 !important;
}

.mode-nav {
  gap: 8px !important;
}

.mode-tab {
  border: 1px solid #2a3b52 !important;
  background: #0f1828 !important;
  color: #c9d9ea !important;
  border-radius: 10px !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.mode-tab:hover {
  transform: none !important;
  background: #132034 !important;
  border-color: #355174 !important;
}

.mode-tab.active {
  background: #142842 !important;
  border-color: #4aa9ff !important;
  color: #eff7ff !important;
}

.auth-user-badge {
  border: 1px solid #2a3d57 !important;
  background: #0f1b2d !important;
  color: #d7e8f8 !important;
  font-family: "Space Mono", monospace !important;
}

.btn {
  border: 1px solid #2a3d57 !important;
  background: #122136 !important;
  color: #d8e9f8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

.btn:hover {
  transform: none !important;
  background: #152942 !important;
  border-color: #3b5d83 !important;
  box-shadow: none !important;
}

.btn.accent {
  background: linear-gradient(180deg, #42abff 0%, #2384de 100%) !important;
  border-color: #42abff !important;
  color: #f7fbff !important;
}

.btn.accent:hover {
  background: linear-gradient(180deg, #57b5ff 0%, #2d91ed 100%) !important;
  border-color: #57b5ff !important;
}

.btn.danger {
  background: #d55454 !important;
  border-color: #d55454 !important;
  color: #fff !important;
}

.coach-item .k {
  color: #89a7c6 !important;
  font-family: "Space Mono", monospace !important;
}

.coach-item .v,
#play-status {
  color: #e6eef7 !important;
}

.piano-wrap {
  border: 1px solid #27374f !important;
  background: linear-gradient(180deg, #0e1726 0%, #0a1220 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.piano-key.white {
  background: linear-gradient(180deg, #ffffff 0%, #e8f0fa 100%) !important;
  border-color: #a7b8ca !important;
}

.piano-key.black {
  background: linear-gradient(180deg, #111a27 0%, #070f19 100%) !important;
  border-color: #314963 !important;
}

.piano-key.white .note {
  color: #1d3249 !important;
  font-weight: 700 !important;
}

.piano-key.black .note {
  color: #d8e8f8 !important;
  font-weight: 700 !important;
}

.piano-key.key--active.white {
  background: linear-gradient(180deg, #b9e2ff 0%, #77bfff 100%) !important;
  border-color: #5eaeea !important;
}

.piano-key.key--active.black {
  background: linear-gradient(180deg, #58aef2 0%, #2f7ec8 100%) !important;
  border-color: #72baf4 !important;
}

.timing-meter {
  border: 1px solid #2a3d57 !important;
  background: #0f192a !important;
}

.timing-fill.when {
  background: linear-gradient(90deg, #77c7ff 0%, #3495e3 100%) !important;
}

.timing-fill.hold {
  background: linear-gradient(90deg, #6ab8f2 0%, #2879c6 100%) !important;
}

.auth-page-shell {
  background: linear-gradient(180deg, #0b1220 0%, #070d16 100%) !important;
}

.auth-page-card h1 {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  color: #f2f8ff !important;
}

.auth-tab {
  border-color: #2a3d57 !important;
  background: #0f1828 !important;
  color: #c9daea !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
}

.auth-tab.active {
  border-color: #4aa9ff !important;
  background: #142842 !important;
  color: #f0f8ff !important;
}

.auth-field span {
  color: #9db6cf !important;
  font-family: "Space Mono", monospace !important;
}

.auth-field input {
  border: 1px solid #2a3d57 !important;
  background: #0f1828 !important;
  color: #e2eef9 !important;
}

.auth-field input:focus {
  outline: 2px solid rgba(74, 169, 255, 0.45) !important;
}

/* Adaptive Contrast Final */
#screen-adaptive .adaptive-progress-line,
#screen-adaptive #adaptive-progress-line {
  border: 1px solid #2b4160 !important;
  background: linear-gradient(180deg, #0f1c30 0%, #0d1728 100%) !important;
  color: #dce8f6 !important;
}

#screen-adaptive .adaptive-danger-box {
  border: 1px solid #7d3440 !important;
  background: linear-gradient(180deg, #311720 0%, #241019 100%) !important;
}

#screen-adaptive .adaptive-danger-text,
#screen-adaptive .adaptive-danger-text strong {
  color: #ffd7dd !important;
}

#screen-adaptive .adaptive-course {
  border: 1px solid #2a3f5d !important;
  background: linear-gradient(180deg, #121f35 0%, #0d1829 100%) !important;
}

#screen-adaptive .adaptive-course-summary {
  color: #b9cbe0 !important;
}

#screen-adaptive .adaptive-course-tree {
  scrollbar-color: #3a587f #0f1a2c !important;
}

#screen-adaptive .adaptive-course-empty {
  border: 1px dashed #375375 !important;
  background: rgba(16, 29, 48, 0.9) !important;
  color: #c4d5e8 !important;
}

#screen-adaptive .course-section {
  border: 1px solid #314a69 !important;
  background: rgba(13, 24, 40, 0.92) !important;
}

#screen-adaptive .course-section-title {
  color: #dfebf8 !important;
}

#screen-adaptive .course-section-meta {
  color: #97afc8 !important;
}

#screen-adaptive .course-unit {
  border: 1px solid #2f4867 !important;
  background: #111f34 !important;
}

#screen-adaptive .course-unit.main-current {
  border-color: #8d7235 !important;
  background: linear-gradient(180deg, #2a2414 0%, #1d1a10 100%) !important;
}

#screen-adaptive .course-unit.main-needs_review {
  border-color: #8f5f3f !important;
  background: linear-gradient(180deg, #2d1f16 0%, #211811 100%) !important;
}

#screen-adaptive .course-unit.main-passed {
  border-color: #3f7150 !important;
  background: linear-gradient(180deg, #15281d 0%, #111f18 100%) !important;
}

#screen-adaptive .course-unit.main-in_progress {
  border-color: #3e668f !important;
  background: linear-gradient(180deg, #15263a 0%, #111d2e 100%) !important;
}

#screen-adaptive .course-unit.main-locked {
  border-color: #46566a !important;
  background: #151d29 !important;
  opacity: 0.86 !important;
}

#screen-adaptive .course-unit-name {
  color: #eaf2fc !important;
}

#screen-adaptive .course-unit-metrics {
  color: #a6bed4 !important;
}

#screen-adaptive .course-unit-chip {
  border: 1px solid #4a5f79 !important;
  background: #1a2a40 !important;
  color: #c7d8ea !important;
}

#screen-adaptive .course-unit-chip.state-current {
  border-color: #ac8c43 !important;
  background: #2e2817 !important;
  color: #ffe2a5 !important;
}

#screen-adaptive .course-unit-chip.state-needs_review {
  border-color: #a8704b !important;
  background: #312116 !important;
  color: #ffd5bd !important;
}

#screen-adaptive .course-unit-chip.state-passed {
  border-color: #4f855a !important;
  background: #182d1f !important;
  color: #d2f0d8 !important;
}

#screen-adaptive .course-unit-chip.state-in_progress {
  border-color: #4b7da8 !important;
  background: #18283d !important;
  color: #cde2f8 !important;
}

#screen-adaptive .course-unit-chip.state-available {
  border-color: #56708e !important;
  background: #1b2a3f !important;
  color: #c6d9ee !important;
}

#screen-adaptive .course-unit-chip.state-locked {
  border-color: #586070 !important;
  background: #212732 !important;
  color: #c0c8d6 !important;
}

#screen-adaptive .coach-panel {
  border: 1px solid #2d4464 !important;
  background: linear-gradient(180deg, #111f34 0%, #0d1829 100%) !important;
}

#screen-adaptive .coach-head h2 {
  color: #e6effa !important;
}

#screen-adaptive .coach-pill {
  border: 1px solid #44658d !important;
  background: #1a2d45 !important;
  color: #d2e2f4 !important;
}

#screen-adaptive .coach-pill.adaptive {
  border-color: #8f7841 !important;
  background: #2b2415 !important;
  color: #ffe3a9 !important;
}

#screen-adaptive .coach-pill.autoplay {
  border-color: #4b7296 !important;
  background: #17283f !important;
  color: #d3e6fa !important;
}

#screen-adaptive .coach-item {
  border-bottom: 1px dashed rgba(127, 154, 182, 0.26) !important;
}

#screen-adaptive .coach-item .k {
  color: #90acc8 !important;
}

#screen-adaptive .coach-item .v {
  color: #e7f0fb !important;
}

/* Key Label Readability Lock */
.piano-key.white .note,
.piano-key.black .note {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(112, 127, 145, 0.7) !important;
  color: #1d3249 !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
  font-size: 12px !important;
  padding: 1px 6px !important;
}

.piano-key.black .note {
  bottom: 28px !important;
}

/* Popup Contrast Tail Lock */
.stage-overlay {
  background: rgba(5, 10, 18, 0.64) !important;
}

.overlay-card,
.modal-card {
  background: linear-gradient(180deg, #111c2e 0%, #0c1523 100%) !important;
  border: 1px solid #2e4563 !important;
  color: #e6eef8 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45) !important;
}

.overlay-card h3,
.modal-card h3 {
  color: #f2f7ff !important;
}

.overlay-card p,
.modal-card p {
  color: #c5d6e9 !important;
}

/* Library Progress Tail Lock */
.library-card {
  gap: 10px !important;
}

.library-card.library-card-selected {
  border-color: #4aa9ff !important;
  box-shadow: 0 0 0 1px rgba(74, 169, 255, 0.45), 0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

.library-progress {
  border: 1px solid #2d425e !important;
  background: #0f1b2f !important;
  border-radius: 10px !important;
  padding: 8px 9px !important;
}

.library-progress-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

.library-progress-title {
  color: #c8d8ea !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.library-progress-percent {
  color: #eef6ff !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.library-progress-track {
  margin-top: 7px !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 1px solid #2f4a69 !important;
  background: #0b1523 !important;
  overflow: hidden !important;
}

.library-progress-fill {
  height: 100% !important;
  width: 0% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #49a8ff 0%, #2f81d0 100%) !important;
  transition: width 220ms ease !important;
}

.library-actions {
  margin-top: auto !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.library-actions .btn {
  min-width: 132px !important;
}

/* Black Key Dot Position Tail Lock */
.piano-key.black[data-guide-repeat-dots]::after {
  top: auto !important;
  bottom: 6px !important;
  transform: translateX(-50%) !important;
}

/* Black Key Label/Dot Collision Lock */
.piano-key.black[data-guide-repeat-dots] .note {
  bottom: 28px !important;
}

.piano-key.black[data-guide-repeat-dots]::after {
  bottom: 4px !important;
}

/* Contrast Hotfix Tail */
.range-option,
.modal-card,
.overlay-card,
.adaptive-progress-line,
.adaptive-course,
.course-unit,
.coach-panel,
.coach-item,
.note-slider-chip,
.note-only-helper,
.guide-step,
.guide-strip,
.hand-guide,
.timing-coach,
.status-wrap,
.library-card,
.library-meta,
.screen-note {
  background: #0f1828 !important;
  border-color: #2a3d57 !important;
  color: #e6edf7 !important;
}

.song-select-wrap select,
.preview-mode-wrap select,
.app-shell input[type="text"],
.app-shell input[type="email"],
.app-shell input[type="password"],
.app-shell input[type="number"],
.app-shell input[type="range"],
.app-shell textarea {
  background: #0f1828 !important;
  border: 1px solid #2a3d57 !important;
  color: #e6edf7 !important;
}

.song-select-wrap select option,
.preview-mode-wrap select option {
  background: #0f1828 !important;
  color: #e6edf7 !important;
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: #91a7bf !important;
}

.coach-item .k,
.adaptive-course-summary,
.adaptive-course-head h3,
.screen-head p,
.hint,
#song-hub-meta {
  color: #9fb0c4 !important;
}

.coach-item .v,
#learn-status,
#play-status,
#adaptive-course-summary,
#adaptive-progress-line {
  color: #e6edf7 !important;
}

.piano-key.white,
.piano-key.white * {
  color: #1d3249 !important;
}

.piano-key.black,
.piano-key.black * {
  color: #d8e8f8 !important;
}

@media (max-width: 920px) {
  .app-shell {
    padding: 16px 14px !important;
  }
}

/* Minimal Modern Override */
:root {
  --bg-top: #f4f7fb;
  --bg-bottom: #eef2f7;
  --panel: #ffffff;
  --panel-edge: #d9e2ec;
  --ink: #1f2937;
  --muted: #5f6c7b;
  --accent: #0f76d8;
  --accent-strong: #0b63b7;
  --blue-active: #3f9df2;
  --target-white: #ffd66b;
  --target-black: #e5a121;
  --key-black: #111827;
  --key-white: #ffffff;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body::before,
body::after {
  display: none !important;
}

.app-shell {
  max-width: 1320px;
  padding: 20px 18px;
  animation: none;
}

.app-header {
  margin-bottom: 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.app-header h1 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  color: #17212b;
}

.subtitle {
  color: #617386;
}

.panel,
.status-panel {
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
  animation: none !important;
}

.panel {
  padding: 12px;
}

.mode-nav {
  gap: 8px;
}

.mode-tab {
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  background: #ffffff;
  color: #2b3a4a;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease;
}

.mode-tab:hover {
  transform: none;
  background: #f7fafc;
  border-color: #c6d5e5;
  box-shadow: none;
}

.mode-tab.active {
  border-color: #8dc3f3;
  background: #eaf4ff;
  color: #174a79;
  box-shadow: none;
}

.hub-head h2,
.screen-head h2,
.adaptive-course-head h3 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: #223446;
  letter-spacing: 0.02em;
}

#song-hub-meta,
.screen-head p,
.screen-note,
.hint,
.library-meta {
  color: #5b6f84;
}

.screen-note {
  border: 1px dashed #d4dfeb;
  background: #f8fbff;
}

.library-card {
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.library-title {
  color: #223244;
}

.auth-user-badge {
  border: 1px solid #d3dfec;
  background: #f6f9fc;
  color: #2f4459;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.btn {
  border: 1px solid #c9d8e8;
  border-radius: 10px;
  background: #f8fbff;
  color: #24405a;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.btn:hover {
  transform: none;
  box-shadow: none;
  border-color: #b8cce1;
  background: #f2f7fd;
}

.btn.secondary {
  background: #ffffff;
}

.btn.accent {
  border-color: #0f76d8;
  background: linear-gradient(180deg, #1791ff 0%, #0f76d8 100%);
  color: #ffffff;
}

.btn.accent:hover {
  border-color: #0b63b7;
  background: linear-gradient(180deg, #1384e8 0%, #0b63b7 100%);
}

.btn.danger {
  border-color: #d95858;
  background: #d95858;
  color: #ffffff;
}

.coach-item .k {
  color: #4a657f;
  font-family: "Space Mono", monospace;
}

.coach-item .v {
  color: #1f2f40;
}

.piano-wrap {
  border: 1px solid #d6e1ec;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef2f6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.piano-key.white {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  border-color: #c6d3e0;
  box-shadow: inset 0 -4px 6px rgba(151, 167, 185, 0.16);
}

.piano-key.black {
  background: linear-gradient(180deg, #1c2b3a 0%, #101b27 100%);
  border-color: #293f54;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.45);
}

.piano-key.white .note {
  color: #21364a;
}

.piano-key.black .note {
  color: #dce9f6;
}

.piano-key.key--active.white {
  background: linear-gradient(180deg, #ffe8a3 0%, #ffd66b 100%);
  border-color: #e7ba47;
}

.piano-key.key--active.black {
  background: linear-gradient(180deg, #ffc555 0%, #de991f 100%);
  border-color: #efb247;
}

.timing-meter {
  border: 1px solid #d2dfeb;
  background: #f3f7fb;
}

.timing-fill.when {
  background: linear-gradient(90deg, #72c6ff 0%, #2a8fd6 100%);
}

.timing-fill.hold {
  background: linear-gradient(90deg, #ffd36b 0%, #f0a53c 100%);
}

.auth-page-shell {
  background: linear-gradient(180deg, #eff4fa 0%, #e8eef6 100%);
}

.auth-page-card {
  border: 1px solid #d7e3ef;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.auth-page-card h1 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: #1b2b3c;
  letter-spacing: 0;
}

.auth-status {
  color: #5e7185;
}

.auth-tab {
  border-color: #d4e0ec;
  background: #f7fafc;
  color: #334b62;
}

.auth-tab.active {
  border-color: #91c6f1;
  background: #e9f4ff;
  color: #1c5688;
}

.auth-field span {
  color: #4e6882;
}

.auth-field input {
  border: 1px solid #d4e0ec;
  background: #ffffff;
  color: #1f2e3d;
}

.auth-field input:focus {
  outline: 2px solid rgba(75, 155, 226, 0.35);
}

@media (max-width: 920px) {
  .app-header {
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Brand Rebuild */
:root {
  --bg-top: #091c2f;
  --bg-bottom: #04101d;
  --panel: #0f2538cc;
  --panel-edge: #2f536f;
  --ink: #e9f2ff;
  --muted: #99b1c9;
  --accent: #ff8f45;
  --accent-strong: #ff6b2c;
  --blue-active: #5ec4ff;
  --target-white: #ffdd6d;
  --target-black: #ffb238;
  --key-black: #06101a;
  --key-white: #f5fbff;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #17456a 0%, rgba(23, 69, 106, 0) 60%),
    radial-gradient(1100px 700px at 95% 0%, #3f2d4a 0%, rgba(63, 45, 74, 0) 58%),
    linear-gradient(170deg, #081726 0%, #04101c 56%, #030b14 100%);
  color: var(--ink);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  width: 46vw;
  height: 46vw;
  pointer-events: none;
  z-index: 0;
  filter: blur(46px);
  opacity: 0.24;
  border-radius: 50%;
  transform: translateZ(0);
}

body::before {
  left: -16vw;
  bottom: -24vw;
  background: #36d7c3;
  animation: auraFloatA 16s ease-in-out infinite alternate;
}

body::after {
  right: -14vw;
  top: -26vw;
  background: #ff8f45;
  animation: auraFloatB 19s ease-in-out infinite alternate;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1520px;
  padding: 24px;
  animation: shellReveal 560ms cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

.app-header {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(106, 145, 174, 0.32);
  background: linear-gradient(145deg, rgba(15, 42, 64, 0.86) 0%, rgba(10, 28, 45, 0.88) 100%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.app-header h1 {
  font-family: "Syne", "Manrope", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: 0.02em;
  color: #f3f8ff;
}

.subtitle {
  color: #afc4d9;
  font-weight: 600;
}

.header-actions {
  gap: 10px;
}

.auth-user-badge {
  border: 1px solid rgba(132, 187, 226, 0.46);
  background: linear-gradient(145deg, rgba(13, 48, 76, 0.9) 0%, rgba(8, 33, 54, 0.88) 100%);
  color: #d7ecff;
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.panel,
.status-panel {
  border-radius: 18px;
  border: 1px solid rgba(112, 154, 187, 0.34);
  background: linear-gradient(170deg, rgba(14, 43, 66, 0.86) 0%, rgba(9, 28, 45, 0.9) 55%, rgba(7, 22, 36, 0.93) 100%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

.mode-nav {
  gap: 12px;
}

.mode-tab {
  border: 1px solid rgba(132, 177, 210, 0.36);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(16, 52, 78, 0.9) 0%, rgba(10, 36, 57, 0.92) 100%);
  color: #d9ebfb;
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mode-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(161, 204, 235, 0.66);
  box-shadow: 0 12px 24px rgba(4, 14, 24, 0.5);
  background: linear-gradient(160deg, rgba(18, 60, 90, 0.94) 0%, rgba(11, 40, 64, 0.96) 100%);
}

.mode-tab.active {
  border-color: rgba(110, 212, 255, 0.9);
  background:
    radial-gradient(circle at 18% 18%, rgba(83, 189, 235, 0.3) 0%, rgba(83, 189, 235, 0) 42%),
    linear-gradient(155deg, rgba(14, 83, 118, 0.96) 0%, rgba(11, 58, 88, 0.96) 100%);
  color: #f0fbff;
  box-shadow:
    0 0 0 1px rgba(94, 196, 255, 0.34),
    0 14px 26px rgba(3, 15, 25, 0.48);
}

.hub-head h2,
.screen-head h2,
.adaptive-course-head h3 {
  font-family: "Syne", "Manrope", sans-serif;
  color: #c9ebff;
  letter-spacing: 0.05em;
}

#song-hub-meta,
.screen-head p,
.screen-note,
.hint,
.library-meta {
  color: #a9bfd4;
}

.screen-note {
  border: 1px dashed rgba(146, 183, 210, 0.5);
  background: linear-gradient(160deg, rgba(16, 48, 74, 0.8) 0%, rgba(10, 32, 52, 0.84) 100%);
}

.library-card {
  border: 1px solid rgba(132, 173, 203, 0.42);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(19, 56, 84, 0.84) 0%, rgba(11, 35, 56, 0.9) 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.library-title {
  color: #e6f5ff;
}

.btn {
  border-radius: 12px;
  border: 1px solid rgba(132, 182, 214, 0.5);
  background: linear-gradient(160deg, rgba(20, 67, 99, 0.9) 0%, rgba(13, 45, 69, 0.94) 100%);
  color: #e5f5ff;
  font-family: "Space Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(163, 213, 244, 0.78);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
}

.btn.secondary {
  background: linear-gradient(160deg, rgba(18, 53, 79, 0.88) 0%, rgba(10, 32, 51, 0.94) 100%);
}

.btn.accent {
  border-color: rgba(255, 165, 105, 0.75);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 197, 123, 0.3) 0%, rgba(255, 197, 123, 0) 38%),
    linear-gradient(158deg, #ff9a4f 0%, #ff7a34 46%, #e95d24 100%);
  color: #fffaf2;
}

.btn.accent:hover {
  border-color: rgba(255, 198, 150, 0.95);
  box-shadow: 0 14px 28px rgba(143, 58, 14, 0.34);
}

.btn.danger {
  border-color: rgba(255, 121, 121, 0.75);
  background: linear-gradient(160deg, #e76060 0%, #c83d3d 100%);
}

.status-panel {
  border-color: rgba(118, 170, 204, 0.4);
}

#play-status {
  font-family: "Space Mono", monospace;
  letter-spacing: 0.04em;
  color: #def1ff;
}

.coach-pill {
  border: 1px solid rgba(113, 191, 233, 0.7);
  background: linear-gradient(145deg, rgba(22, 86, 118, 0.82) 0%, rgba(10, 53, 77, 0.9) 100%);
  color: #eaf8ff;
}

.coach-item .k {
  color: #7fd0ff;
  font-family: "Space Mono", monospace;
  letter-spacing: 0.04em;
}

.coach-item .v {
  color: #e6f4ff;
}

.piano-wrap {
  border: 1px solid rgba(116, 166, 196, 0.34);
  background:
    linear-gradient(180deg, rgba(14, 41, 62, 0.9) 0%, rgba(9, 25, 39, 0.94) 42%, rgba(7, 17, 27, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 38px rgba(0, 0, 0, 0.4);
}

.piano-key.white {
  background: linear-gradient(180deg, #ffffff 0%, #edf5ff 100%);
  border-color: #8da9c0;
  box-shadow: inset 0 -6px 9px rgba(84, 122, 156, 0.18);
}

.piano-key.black {
  background: linear-gradient(180deg, #0f2536 0%, #07131d 100%);
  border-color: #3d627f;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.54), 0 5px 10px rgba(0, 0, 0, 0.48);
}

.piano-key.white .note {
  color: #1b344a;
}

.piano-key.black .note {
  color: #d6ebff;
}

.piano-key .hotkey {
  font-family: "Space Mono", monospace;
}

.piano-key.key--active.white {
  background: linear-gradient(180deg, #fff5be 0%, #ffd567 100%);
  border-color: #d99f20;
}

.piano-key.key--active.black {
  background: linear-gradient(180deg, #ffce59 0%, #cf8818 100%);
  border-color: #f2b943;
}

.piano-key.key--target.white {
  box-shadow:
    inset 0 0 0 2px rgba(255, 165, 0, 0.45),
    0 0 0 2px rgba(255, 205, 95, 0.35);
}

.piano-key.key--target.black {
  box-shadow:
    inset 0 0 0 2px rgba(255, 214, 130, 0.48),
    0 0 0 2px rgba(255, 171, 67, 0.28);
}

.timing-meter {
  border: 1px solid rgba(126, 183, 216, 0.42);
  background: rgba(8, 29, 47, 0.7);
}

.timing-fill.when {
  background: linear-gradient(90deg, #67d8ff 0%, #2aa6f6 100%);
}

.timing-fill.hold {
  background: linear-gradient(90deg, #ffcf62 0%, #ff9341 100%);
}

.auth-page-shell {
  position: relative;
  background:
    radial-gradient(900px 700px at 6% -10%, rgba(59, 189, 189, 0.25) 0%, rgba(59, 189, 189, 0) 60%),
    radial-gradient(800px 680px at 96% 0%, rgba(255, 153, 95, 0.24) 0%, rgba(255, 153, 95, 0) 58%),
    linear-gradient(175deg, #071320 0%, #040b14 100%);
}

.auth-page-card {
  border-color: rgba(123, 177, 212, 0.5);
  background: linear-gradient(170deg, rgba(16, 46, 68, 0.9) 0%, rgba(9, 26, 42, 0.94) 100%);
}

.auth-page-card h1 {
  font-family: "Syne", "Manrope", sans-serif;
  color: #e8f5ff;
  letter-spacing: 0.02em;
}

.auth-status {
  color: #a8c0d6;
}

.auth-tab,
.auth-field input {
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.auth-tab {
  border-color: rgba(130, 177, 208, 0.48);
  background: linear-gradient(160deg, rgba(16, 53, 80, 0.9) 0%, rgba(10, 34, 54, 0.94) 100%);
  color: #d3e8f8;
}

.auth-tab.active {
  border-color: rgba(96, 195, 238, 0.84);
  background: linear-gradient(160deg, rgba(23, 82, 116, 0.92) 0%, rgba(13, 53, 78, 0.95) 100%);
  color: #ecf9ff;
}

.auth-field span {
  color: #8fc3e8;
  font-family: "Space Mono", monospace;
  letter-spacing: 0.05em;
}

.auth-field input {
  border: 1px solid rgba(134, 180, 211, 0.55);
  background: rgba(8, 25, 41, 0.78);
  color: #e8f4ff;
}

.auth-field input:focus {
  outline: 2px solid rgba(97, 197, 241, 0.55);
}

.mode-screen.active,
.panel,
.status-panel {
  animation: panelRise 420ms ease both;
}

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

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

@keyframes auraFloatA {
  from {
    transform: translate(-2vw, 0) scale(1);
  }
  to {
    transform: translate(3vw, -2vw) scale(1.08);
  }
}

@keyframes auraFloatB {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-3vw, 2vw) scale(1.1);
  }
}

@media (max-width: 920px) {
  .app-shell {
    padding: 16px;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .mode-nav {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .mode-screen.active,
  .panel,
  .status-panel,
  .app-shell {
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Archivo", "Segoe UI", sans-serif;
  background: radial-gradient(circle at 12% 8%, #fffdf7 0%, var(--bg-top) 32%, var(--bg-bottom) 100%);
  color: var(--ink);
}

.app-shell {
  max-width: 1420px;
  margin: 0 auto;
  padding: 18px;
}

.app-shell.is-auth-locked {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-user-badge {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #cbb996;
  background: #fff9ef;
  color: #2f4962;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 26, 36, 0.64);
  padding: 14px;
}

.auth-gate.is-hidden {
  display: none;
}

.auth-page-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  width: min(440px, 95vw);
  border-radius: 14px;
  border: 1px solid #ccb78f;
  background: linear-gradient(180deg, #fffefb 0%, #f3e8d0 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  padding: 16px;
}

.auth-page-card {
  width: min(460px, 95vw);
  border-radius: 14px;
  border: 1px solid #ccb78f;
  background: linear-gradient(180deg, #fffefb 0%, #f3e8d0 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  padding: 16px;
}

.auth-page-card h1 {
  margin: 0;
  color: #2a4a67;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
}

.auth-card h2 {
  margin: 0;
  color: #2a4a67;
}

.auth-status {
  margin: 6px 0 0;
  color: #4d6175;
  font-size: 0.86rem;
  font-weight: 600;
  min-height: 1.25rem;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.auth-tab {
  border: 1px solid #cbb996;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff7e8 0%, #f2e4cb 100%);
  color: #2a3e53;
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  cursor: pointer;
}

.auth-tab.active {
  border-color: #2f79c7;
  background: linear-gradient(180deg, #e9f4ff 0%, #cfe7ff 100%);
  color: #123a63;
}

.auth-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.auth-field {
  display: grid;
  gap: 5px;
}

.auth-field span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #2e4960;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.auth-field input {
  width: 100%;
  border: 1px solid #cdbb96;
  border-radius: 9px;
  background: #fffdf8;
  color: #1f2a34;
  padding: 9px 10px;
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-size: 0.9rem;
}

.auth-field input:focus {
  outline: 2px solid #9ec5ef;
  outline-offset: 1px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.app-header h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.7vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.subtitle {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.panel,
.status-panel {
  background: linear-gradient(180deg, #fffef9 0%, var(--panel) 100%);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(52, 35, 12, 0.09);
}

.panel {
  padding: 12px;
  margin-bottom: 12px;
}

.mode-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.mode-tab {
  border: 1px solid #cbb996;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7e8 0%, #f2e4cb 100%);
  color: #2a3e53;
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 10px 8px;
  cursor: pointer;
}

.mode-tab:hover {
  background: linear-gradient(180deg, #fff5dc 0%, #efdebe 100%);
}

.mode-tab.active {
  border-color: #2f79c7;
  background: linear-gradient(180deg, #e9f4ff 0%, #cfe7ff 100%);
  color: #123a63;
  box-shadow: 0 0 0 1px rgba(47, 121, 199, 0.2), 0 3px 10px rgba(28, 86, 146, 0.18);
}

.mode-screen {
  display: none;
}

.mode-screen.active {
  display: block;
}

.song-hub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.hub-head h2 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #355574;
}

#song-hub-meta {
  margin: 0;
  color: #536274;
  font-size: 0.83rem;
  font-weight: 600;
}

.screen-head {
  margin-bottom: 10px;
}

.screen-head.compact {
  margin-bottom: 8px;
}

.screen-head h2 {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  color: #2d4f6e;
  text-transform: uppercase;
}

.screen-head p {
  margin: 5px 0 0;
  color: #5b697a;
  font-size: 0.83rem;
  font-weight: 600;
}

.screen-note {
  border: 1px dashed #c7b287;
  border-radius: 11px;
  background: #fff9ec;
  padding: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #3e5268;
}

.library-song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.library-card {
  border: 1px solid #d8c7a5;
  border-radius: 11px;
  padding: 10px;
  background: linear-gradient(180deg, #fffdfa 0%, #f8efde 100%);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.library-title {
  margin: 0;
  font-size: 0.92rem;
  color: #2a3f56;
}

.library-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #5f6f81;
  font-weight: 600;
}

.library-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.range-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.range-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid #d1c1a0;
  border-radius: 9px;
  background: #fff9ee;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2e465d;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 26, 36, 0.6);
  padding: 16px;
}

.modal-card {
  width: min(640px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid #ccb78f;
  background: linear-gradient(180deg, #fffdf8 0%, #f4ead5 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 14px;
}

.modal-card h3 {
  margin: 0;
  color: #2a4a67;
  letter-spacing: 0.03em;
}

.modal-card p {
  margin: 6px 0 0;
  color: #536477;
  font-size: 0.83rem;
  font-weight: 600;
}

.modal-all-wrap {
  margin-top: 10px;
}

.modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.session-panel {
  display: none;
}

.session-panel.active {
  display: block;
}

.practice-feedback {
  display: none;
  margin-bottom: 12px;
}

.practice-feedback.active {
  display: block;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.toggle-wrap,
.song-select-wrap,
.lookahead-wrap,
.preview-mode-wrap,
.mic-sensitivity-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
}

.toggle-wrap {
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid #d2c3a5;
  background: #fff9ef;
}

.song-select-wrap select {
  min-width: 240px;
}

.preview-mode-wrap select {
  min-width: 170px;
}

.lookahead-wrap input {
  width: 64px;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid #c5b598;
  font-family: "Archivo", "Segoe UI", sans-serif;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
}

.mic-sensitivity-wrap {
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid #d2c3a5;
  background: #fff9ef;
}

.mic-sensitivity-wrap input[type="range"] {
  width: 130px;
}

.mic-sensitivity-value {
  min-width: 90px;
  text-align: right;
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  color: #2f4258;
}

select,
.btn {
  border-radius: 9px;
  border: 1px solid #c5b598;
  font-family: "Archivo", "Segoe UI", sans-serif;
}

select {
  background: #fff;
  color: var(--ink);
  padding: 7px 9px;
  font-size: 0.9rem;
}

.btn {
  background: #f7efe2;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 11px;
  cursor: pointer;
}

.btn:hover {
  background: #f2e4d0;
}

.is-hidden {
  display: none !important;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.secondary {
  background: #ece5d8;
}

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

.btn.accent:hover {
  background: var(--accent-strong);
}

.btn.danger {
  background: #b7362b;
  border-color: #8f261d;
  color: #fff;
}

.btn.danger:hover {
  background: #8f261d;
}

.adaptive-progress-line {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d6c39e;
  background: linear-gradient(180deg, #fff8e9 0%, #f6ead0 100%);
  color: #384f66;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.adaptive-danger-box {
  margin-top: 10px;
  border: 1px solid #d96b63;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff0ee 0%, #ffe4e1 100%);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.adaptive-danger-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #6a201b;
  font-size: 0.78rem;
  font-weight: 700;
}

.adaptive-danger-text strong {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adaptive-course {
  margin-top: 10px;
  border: 1px solid #d7c7a7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf8 0%, #f4ead7 100%);
  padding: 10px;
}

.adaptive-course-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.adaptive-course-head h3 {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #284764;
}

.adaptive-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adaptive-course-summary {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #3d5369;
}

.adaptive-course-tree {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.adaptive-course-empty {
  border: 1px dashed #c6b18a;
  border-radius: 10px;
  background: rgba(255, 248, 232, 0.75);
  padding: 10px;
  color: #5b6c7f;
  font-size: 0.8rem;
  font-weight: 700;
}

.course-section {
  border: 1px solid #d4c2a0;
  border-radius: 10px;
  background: rgba(255, 251, 243, 0.92);
  padding: 8px;
}

.course-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.course-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #2b465f;
  letter-spacing: 0.03em;
}

.course-section-meta {
  font-size: 0.72rem;
  font-weight: 700;
  color: #60758b;
}

.course-section-list {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.course-unit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9cab0;
  border-radius: 9px;
  background: #fffdf8;
  padding: 6px 7px;
}

.course-unit.main-current {
  border-color: #be8a23;
  background: linear-gradient(180deg, #fff4d6 0%, #ffebbb 100%);
}

.course-unit.main-needs_review {
  border-color: #d58f4b;
  background: linear-gradient(180deg, #fff2e7 0%, #ffe4cf 100%);
}

.course-unit.main-passed {
  border-color: #8ab88c;
  background: linear-gradient(180deg, #f1faf1 0%, #e5f4e6 100%);
}

.course-unit.main-in_progress {
  border-color: #78a7d1;
  background: linear-gradient(180deg, #eef6ff 0%, #ddeeff 100%);
}

.course-unit.main-locked {
  opacity: 0.72;
  filter: grayscale(0.15);
}

.course-unit-text {
  min-width: 0;
}

.course-unit-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.course-unit-name {
  font-size: 0.79rem;
  font-weight: 800;
  color: #21384f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-unit-chip {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #b4b4b4;
  color: #30485f;
  background: #f4f7fa;
}

.course-unit-chip.state-current {
  border-color: #aa7608;
  background: #ffdf87;
  color: #503200;
}

.course-unit-chip.state-needs_review {
  border-color: #b5682f;
  background: #ffd7b6;
  color: #5d2f0e;
}

.course-unit-chip.state-passed {
  border-color: #659969;
  background: #dcf0de;
  color: #27492a;
}

.course-unit-chip.state-in_progress {
  border-color: #5f8db4;
  background: #d9e9f8;
  color: #1f3d58;
}

.course-unit-chip.state-available {
  border-color: #95a7ba;
  background: #eaf1f7;
  color: #35536d;
}

.course-unit-chip.state-locked {
  border-color: #a59d8f;
  background: #f2eee5;
  color: #615a4d;
}

.course-unit-metrics {
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5f7388;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-unit-action {
  white-space: nowrap;
}

.coach-panel {
  margin-top: 11px;
  border: 1px solid #d4c2a0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fcf8f0 0%, #f3e8d4 100%);
  padding: 10px 11px;
}

.coach-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.coach-head h2 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: #284662;
}

.coach-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #acbed2;
  background: #eaf2fb;
  color: #1f3953;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-pill.adaptive {
  background: #fff0c6;
  border-color: #d7a93d;
  color: #5a3a00;
}

.coach-pill.autoplay {
  background: #e6f1ff;
  border-color: #7ea7d0;
  color: #1e4169;
}

.coach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 7px 12px;
}

.coach-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(122, 108, 78, 0.22);
}

.coach-item .k {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #4f6378;
  text-transform: uppercase;
}

.coach-item .v {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1d3348;
  min-width: 0;
}

.status-wrap {
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #c7d6e7;
  background: linear-gradient(180deg, #edf6ff 0%, #dfefff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.learn-status {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: #234f78;
}

.timing-toggle {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.75);
  border-color: #bdd0e5;
  font-size: 0.82rem;
}

.piano-wrap {
  position: relative;
  background: linear-gradient(180deg, #222 0%, #171717 100%);
  border: 2px solid #111;
  border-radius: 15px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px #3f3f3f;
}

.stage-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: 12px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 16, 23, 0.52);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

.overlay-card {
  width: min(620px, 96%);
  border-radius: 13px;
  border: 1px solid rgba(191, 168, 128, 0.82);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.98) 0%, rgba(242, 228, 198, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 14px;
  text-align: center;
}

.overlay-card h3 {
  margin: 0;
  font-size: 1.02rem;
  color: #294764;
  letter-spacing: 0.02em;
}

.overlay-card p {
  margin: 7px 0 0;
  color: #334f69;
  font-size: 0.88rem;
  font-weight: 600;
}

.overlay-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.hand-guide {
  position: relative;
  width: 100%;
  height: 122px;
  margin-bottom: 10px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 11% 10%, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, rgba(245, 250, 255, 0.12) 0%, rgba(17, 22, 28, 0.78) 100%);
  border: 1px solid rgba(226, 210, 176, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.hand-guide.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cad5e2;
  font-size: 0.84rem;
  font-weight: 600;
}

.hand-guide-head {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.hand-guide-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d7e4f0;
  text-transform: uppercase;
  white-space: nowrap;
}

.hand-guide-summary {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e8f2fc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hand-span-line {
  position: absolute;
  top: 62px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 176, 228, 0.4) 0%, rgba(255, 219, 124, 0.9) 50%, rgba(126, 176, 228, 0.4) 100%);
  box-shadow: 0 0 0 1px rgba(255, 248, 220, 0.24), 0 0 15px rgba(255, 210, 88, 0.35);
  pointer-events: none;
}

.hand-finger-pin {
  position: absolute;
  min-width: 24px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #152235;
  background: rgba(232, 240, 250, 0.95);
  border: 1px solid rgba(114, 130, 150, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.hand-finger-pin .finger-num {
  line-height: 1;
}

.hand-finger-pin .finger-note {
  line-height: 1;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(90, 103, 120, 0.44);
  color: #101e2f;
}

.hand-finger-pin.current {
  color: #172635;
  background: #ffd56f;
  border-color: #a16c00;
  box-shadow: 0 0 0 2px rgba(255, 213, 111, 0.38), 0 4px 12px rgba(0, 0, 0, 0.34);
  z-index: 3;
}

.hand-finger-pin.current .finger-note {
  background: rgba(255, 247, 222, 0.98);
  border-color: rgba(156, 111, 5, 0.5);
}

.hand-finger-pin.next {
  background: rgba(145, 196, 248, 0.95);
  border-color: rgba(44, 92, 140, 0.78);
  color: #0e2438;
  z-index: 2;
}

.hand-finger-pin.next .finger-note {
  background: rgba(238, 247, 255, 0.95);
  border-color: rgba(46, 96, 144, 0.5);
}

.hand-guide-capsule {
  position: absolute;
  right: 12px;
  bottom: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(202, 183, 146, 0.75);
  background: rgba(255, 245, 220, 0.94);
  color: #142638;
  font-family: "Space Mono", monospace;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

#piano-stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 34vh, 330px);
  user-select: none;
}

.piano-key {
  position: absolute;
  margin: 0;
  padding: 0;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  overflow: visible;
  transition: background-color 90ms linear, transform 90ms linear;
}

.piano-key .note {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  z-index: 55;
  pointer-events: none;
}

.piano-key .hotkey {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  font-family: "Space Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  z-index: 66;
  opacity: 0.9;
  padding: 1px 5px;
  border-radius: 999px;
  pointer-events: none;
}

.piano-key.white {
  background: linear-gradient(180deg, #fff 0%, #f4f4f4 88%);
  border: 1px solid #b4b4b4;
  color: #0f1720;
  z-index: 2;
}

.piano-key.white .note {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(112, 127, 145, 0.7);
  color: #122235;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.piano-key.white .hotkey {
  color: #13273b;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(108, 127, 148, 0.62);
}

.piano-key.black {
  background: linear-gradient(180deg, #1a1a1a 0%, #060606 95%);
  border: 1px solid #000;
  color: #f2f2f2;
  z-index: 20;
  border-radius: 0 0 5px 5px;
}

.piano-key.black .note {
  bottom: 10px;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(250, 252, 255, 0.98);
  border-color: rgba(31, 42, 52, 0.88);
  color: #0d2033;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.piano-key.black .hotkey {
  top: 3px;
  font-size: 8px;
  color: #f3f8ff;
  background: rgba(14, 31, 50, 0.88);
  border: 1px solid rgba(158, 180, 205, 0.5);
}

.piano-key[data-hand-finger] .hotkey {
  display: none;
}

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

.piano-key.key--active.black {
  background: #275fb0;
}

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

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

.piano-key[data-hand-finger] {
  --hand-bg: rgba(230, 239, 249, 0.96);
  --hand-border: rgba(110, 126, 145, 0.78);
  --hand-ink: #112136;
}

.piano-key[data-hand-role="support"] {
  --hand-bg: rgba(230, 239, 249, 0.95);
  --hand-border: rgba(110, 126, 145, 0.74);
  --hand-ink: #132338;
}

.piano-key[data-hand-role="next"] {
  --hand-bg: rgba(145, 196, 248, 0.96);
  --hand-border: rgba(44, 92, 140, 0.82);
  --hand-ink: #0d2237;
}

.piano-key[data-hand-role="current"] {
  --hand-bg: #ffd56f;
  --hand-border: #a16c00;
  --hand-ink: #142536;
}

.piano-key[data-hand-finger]::before {
  content: attr(data-hand-finger);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 24px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hand-ink, #112136);
  background: var(--hand-bg, rgba(230, 239, 249, 0.96));
  border: 1px solid var(--hand-border, rgba(110, 126, 145, 0.78));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  z-index: 40;
  pointer-events: none;
}

.piano-key.white[data-hand-finger]::before {
  top: 72%;
}

.piano-key.black[data-hand-finger]::before {
  top: 62%;
  min-width: 22px;
  height: 24px;
  font-size: 0.66rem;
  padding: 0 6px;
  z-index: 46;
}

.piano-key[data-hand-role="current"]::before {
  box-shadow: 0 0 0 2px rgba(255, 213, 111, 0.4), 0 4px 12px rgba(0, 0, 0, 0.34);
}

.piano-key[data-hand-note]::after {
  content: none;
  display: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border-radius: 999px;
  font-family: "Space Mono", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  color: #102031;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(92, 110, 131, 0.55);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.26);
  z-index: 41;
  pointer-events: none;
}

.piano-key.white[data-hand-note]::after {
  top: 74%;
}

.piano-key.black[data-hand-note]::after {
  top: 82%;
  font-size: 0.56rem;
  z-index: 47;
}

.piano-key[data-guide-rank] {
  border-width: 1px;
  border-style: solid;
  --guide-fill-white: 16px;
  --guide-fill-black: 10px;
}

.piano-key.white[data-guide-rank] {
  z-index: 4;
  box-shadow:
    inset 0 calc(-1 * var(--guide-fill-white, 16px)) rgba(var(--guide-rgb, 255, 181, 26), var(--guide-fill-a, 0.18)),
    0 2px 7px rgba(0, 0, 0, 0.11);
}

.piano-key.black[data-guide-rank] {
  z-index: 25;
  box-shadow:
    inset 0 calc(-1 * var(--guide-fill-black, 10px)) rgba(var(--guide-rgb, 255, 181, 26), calc(var(--guide-fill-a, 0.18) + 0.12)),
    0 0 8px rgba(var(--guide-rgb, 255, 181, 26), 0.3);
}

.piano-key[data-guide-repeat-dots]::after {
  content: attr(data-guide-repeat-dots);
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #0d2236;
  background: #ffffff;
  border: 1px solid #4d5968;
  pointer-events: none;
}

.piano-key.black[data-guide-repeat-dots]::after {
  top: 18px;
  bottom: auto;
  font-size: 0.64rem;
  color: #0b1e2f;
  background: #ffffff;
  border-color: #2d3b49;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.piano-key.guide-rank-1 {
  --guide-rgb: 255, 189, 46;
  --guide-fill-a: 0.46;
  --guide-fill-white: 34px;
  --guide-fill-black: 22px;
  --guide-pulse-from-white: 32px;
  --guide-pulse-to-white: 42px;
  --guide-pulse-from-black: 20px;
  --guide-pulse-to-black: 28px;
  animation: guide-now-pulse 1.2s ease-in-out infinite;
}

.piano-key.guide-rank-2 {
  --guide-rgb: 114, 176, 247;
  --guide-fill-a: 0.34;
  --guide-fill-white: 28px;
  --guide-fill-black: 18px;
}

.piano-key.guide-rank-3 {
  --guide-rgb: 122, 204, 163;
  --guide-fill-a: 0.28;
  --guide-fill-white: 23px;
  --guide-fill-black: 15px;
}

.piano-key.guide-rank-4 {
  --guide-rgb: 166, 176, 194;
  --guide-fill-a: 0.22;
  --guide-fill-white: 19px;
  --guide-fill-black: 13px;
}

.piano-key.guide-rank-5 {
  --guide-rgb: 166, 176, 194;
  --guide-fill-a: 0.18;
  --guide-fill-white: 16px;
  --guide-fill-black: 11px;
}

.piano-key.guide-rank-6 {
  --guide-rgb: 166, 176, 194;
  --guide-fill-a: 0.15;
  --guide-fill-white: 14px;
  --guide-fill-black: 10px;
}

.piano-key.guide-rank-7 {
  --guide-rgb: 166, 176, 194;
  --guide-fill-a: 0.13;
  --guide-fill-white: 12px;
  --guide-fill-black: 8px;
}

.piano-key.guide-rank-8 {
  --guide-rgb: 166, 176, 194;
  --guide-fill-a: 0.11;
  --guide-fill-white: 10px;
  --guide-fill-black: 7px;
}

.piano-key[data-guide-style="faded"] {
  border-style: dashed;
}

.piano-key.white[data-guide-style="faded"] {
  box-shadow:
    inset 0 -10px rgba(115, 158, 204, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

.piano-key.black[data-guide-style="faded"] {
  box-shadow:
    inset 0 -8px rgba(115, 158, 204, 0.24),
    0 0 6px rgba(98, 138, 179, 0.26);
}

.piano-key[data-guide-style="faded"]::after {
  display: none;
}

.piano-key[data-guide-style="faded"].guide-rank-1 {
  animation: none;
  --guide-rgb: 120, 172, 224;
  --guide-fill-a: 0.2;
  --guide-fill-white: 16px;
  --guide-fill-black: 11px;
}

.piano-key[data-guide-style="faded"].guide-rank-2 {
  --guide-rgb: 164, 186, 208;
  --guide-fill-a: 0.12;
  --guide-fill-white: 12px;
  --guide-fill-black: 8px;
}

.piano-key.white.guide-rank-1 {
  --guide-pulse-from: var(--guide-pulse-from-white, 32px);
  --guide-pulse-to: var(--guide-pulse-to-white, 42px);
}

.piano-key.black.guide-rank-1 {
  --guide-pulse-from: var(--guide-pulse-from-black, 20px);
  --guide-pulse-to: var(--guide-pulse-to-black, 28px);
}

@keyframes guide-now-pulse {
  0% {
    box-shadow: inset 0 calc(-1 * var(--guide-pulse-from, 32px)) rgba(255, 189, 46, 0.44), 0 0 8px rgba(255, 189, 46, 0.26);
  }
  55% {
    box-shadow: inset 0 calc(-1 * var(--guide-pulse-to, 42px)) rgba(255, 189, 46, 0.54), 0 0 14px rgba(255, 189, 46, 0.4);
  }
  100% {
    box-shadow: inset 0 calc(-1 * var(--guide-pulse-from, 32px)) rgba(255, 189, 46, 0.44), 0 0 8px rgba(255, 189, 46, 0.26);
  }
}

.guide-strip {
  margin-top: 10px;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px dashed #cbbda2;
  border-radius: 10px;
  background: #fffcf5;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
}

.guide-strip.note-only {
  justify-content: center;
  border-style: solid;
  border-color: rgba(95, 114, 132, 0.72);
  background:
    radial-gradient(circle at 11% 10%, rgba(170, 196, 221, 0.08) 0%, rgba(170, 196, 221, 0) 44%),
    linear-gradient(180deg, rgba(27, 36, 46, 0.98) 0%, rgba(11, 16, 22, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.42);
}

.guide-strip.faded {
  border-style: solid;
  border-color: #b3c4d6;
  background: linear-gradient(180deg, #f3f8fd 0%, #e7f0f9 100%);
}

.note-only-track {
  width: min(100%, 840px);
  position: relative;
  padding: 8px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-only-track::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 176, 228, 0.2) 0%, rgba(255, 219, 124, 0.82) 50%, rgba(126, 176, 228, 0.2) 100%);
  box-shadow: 0 0 0 1px rgba(255, 248, 220, 0.18), 0 0 12px rgba(255, 210, 88, 0.24);
  transform: translateY(-50%);
  pointer-events: none;
}

.note-only-track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 196, 74, 0.2) 0%, rgba(255, 196, 74, 0.03) 62%, rgba(255, 196, 74, 0) 100%);
  pointer-events: none;
}

.note-only-slider {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  will-change: transform, opacity;
}

.note-slider-slot {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-slider-slot.empty {
  opacity: 0;
}

.note-slider-chip {
  min-width: 54px;
  max-width: 94px;
  width: 100%;
  height: 58px;
  padding: 7px 6px 7px;
  border-radius: 16px;
  border: 1px solid #3d556b;
  background: linear-gradient(180deg, #223241 0%, #18242f 100%);
  box-shadow: 0 8px 16px rgba(4, 10, 18, 0.42);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transform-origin: center center;
  transition: transform 140ms ease, opacity 140ms ease;
}

.note-slider-chip .note-slider-note {
  font-family: "Space Mono", monospace;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: #e8f3ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

.note-slider-chip .note-slider-finger {
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #d5e7fb;
  background: rgba(76, 120, 166, 0.2);
  border: 1px solid rgba(112, 156, 201, 0.32);
  border-radius: 999px;
  padding: 2px 6px;
}

.note-slider-chip.current {
  border-color: #c79234;
  background: linear-gradient(180deg, #4b3a1d 0%, #362a14 100%);
  box-shadow: 0 10px 20px rgba(8, 15, 26, 0.48), 0 0 0 1px rgba(199, 146, 52, 0.24) inset;
}

.note-slider-chip.past {
  border-color: #455767;
  background: linear-gradient(180deg, #1f2b35 0%, #18222b 100%);
  box-shadow: 0 4px 10px rgba(6, 11, 18, 0.4);
}

.note-slider-chip.future {
  border-color: #4e6d8f;
  background: linear-gradient(180deg, #243646 0%, #1b2a37 100%);
  box-shadow: 0 6px 12px rgba(6, 12, 20, 0.4);
}

.note-slider-slot.depth-0 .note-slider-chip {
  transform: scale(1);
  opacity: 1;
}

.note-slider-slot.depth-1 .note-slider-chip {
  transform: scale(0.9);
  opacity: 0.82;
}

.note-slider-slot.depth-2 .note-slider-chip {
  transform: scale(0.8);
  opacity: 0.66;
}

.note-slider-slot.depth-3 .note-slider-chip {
  transform: scale(0.68);
  opacity: 0.48;
}

.note-only-helper {
  display: none;
}

.note-only-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #a9802f;
  background: #fffbe9;
  box-shadow: 0 2px 7px rgba(121, 88, 24, 0.2);
}

.note-only-cue .cue-k {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5e6d7c;
  font-weight: 700;
}

.note-only-cue .cue-v {
  font-family: "Space Mono", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #17304a;
}

.note-only-cue .cue-h {
  font-size: 0.73rem;
  font-weight: 700;
  color: #7a652f;
  border-left: 1px solid rgba(140, 108, 42, 0.45);
  padding-left: 9px;
}

.guide-strip.empty {
  color: #73808d;
  font-size: 0.88rem;
  font-weight: 600;
}

.timing-coach {
  margin-top: 8px;
  border: 1px solid #c8b89a;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff7e5 0%, #f7ead0 100%);
  padding: 8px 9px;
  display: grid;
  gap: 5px;
}

.timing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.timing-k {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3f556c;
}

.timing-v {
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f3348;
  text-align: right;
}

.timing-meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(39, 58, 80, 0.14);
}

.timing-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 110ms linear;
}

.timing-coach.is-holding-live .timing-fill.hold {
  transition: none;
}

.timing-coach-wrap {
  display: none;
  margin-top: 10px;
}

.timing-coach-wrap.active {
  display: block;
}

.timing-fill.when {
  background: linear-gradient(90deg, #6fa5dc 0%, #3f79b7 100%);
}

.timing-fill.hold {
  background: linear-gradient(90deg, #f1b84d 0%, #d88817 100%);
}

.guide-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #c1c9d3;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1b2a3a;
  background: #f7fafc;
  opacity: 0.4;
}

.guide-step .step-note {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.guide-step.rank-1 { opacity: 1; border-color: #d39e25; background: #fff1cb; box-shadow: 0 2px 8px rgba(155, 112, 8, 0.24); }
.guide-step.rank-2 { opacity: 0.9; border-color: #89b0d4; background: #eef6ff; }
.guide-step.rank-3 { opacity: 0.78; border-color: #9bb8cd; background: #f1f7fb; }
.guide-step.rank-4 { opacity: 0.66; border-color: #b2c0ce; background: #f4f8fb; }
.guide-step.rank-5 { opacity: 0.58; }
.guide-step.rank-6 { opacity: 0.5; }
.guide-step.rank-7 { opacity: 0.44; }
.guide-step.rank-8 { opacity: 0.38; }

.guide-strip.faded .guide-step {
  border-style: dashed;
  border-color: #97afc5;
  background: #f7fbff;
}

.guide-strip.faded .guide-step.rank-1 {
  opacity: 0.9;
  border-color: #6f95ba;
  background: #edf5ff;
  box-shadow: 0 2px 7px rgba(77, 118, 160, 0.18);
}

.guide-strip.faded .guide-step.rank-2 {
  opacity: 0.65;
  border-color: #b2c3d4;
  background: #f4f9ff;
}

.status-panel {
  margin-top: 12px;
  padding: 10px 12px;
}

#play-status {
  font-size: 1rem;
  font-weight: 700;
  color: #153754;
}

.hint {
  margin-top: 4px;
  font-size: 0.86rem;
  color: #5c6774;
}

@media (max-width: 900px) {
  .app-shell {
    padding: 12px;
  }

  .mode-nav {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .hub-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .song-select-wrap {
    width: 100%;
  }

  .song-select-wrap select,
  .preview-mode-wrap select {
    min-width: 180px;
    width: 100%;
  }

  .preview-mode-wrap {
    width: 100%;
  }

  .mic-sensitivity-wrap {
    width: 100%;
    justify-content: space-between;
  }

  .mic-sensitivity-wrap input[type="range"] {
    flex: 1 1 auto;
    min-width: 120px;
    width: auto;
  }

  .song-hub .control-row {
    gap: 6px;
  }

  .adaptive-progress-line {
    font-size: 0.72rem;
    padding: 7px 8px;
  }

  .adaptive-course-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .adaptive-course-actions {
    width: 100%;
  }

  .adaptive-danger-box {
    flex-direction: column;
    align-items: stretch;
  }

  .course-unit {
    grid-template-columns: 1fr;
  }

  .course-unit-action {
    justify-self: start;
  }

  .lookahead-wrap {
    width: 100%;
    justify-content: space-between;
  }

  .library-song-grid {
    grid-template-columns: 1fr;
  }

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

  .coach-item {
    grid-template-columns: 96px 1fr;
  }

  .hand-guide {
    height: 110px;
  }

  .hand-guide-summary {
    font-size: 0.64rem;
  }

  .hand-finger-pin {
    min-width: 22px;
    height: 24px;
    font-size: 0.64rem;
    padding: 0 6px;
  }

  .hand-finger-pin .finger-note {
    font-size: 0.56rem;
    padding: 1px 4px;
  }

  .hand-guide-capsule {
    font-size: 0.62rem;
    padding: 3px 8px;
  }

  .piano-key[data-hand-finger]::before {
    min-width: 22px;
    height: 24px;
    font-size: 0.64rem;
    padding: 0 6px;
  }

  .piano-key[data-hand-note]::after {
    font-size: 0.54rem;
    padding: 1px 5px;
  }

  .note-only-slider {
    gap: 5px;
  }

  .note-slider-chip {
    min-width: 42px;
    height: 52px;
    padding: 5px 4px 4px;
  }

  .note-slider-chip .note-slider-note {
    font-size: 0.72rem;
  }

  .note-slider-chip .note-slider-finger {
    font-size: 0.56rem;
  }

  .note-only-helper {
    font-size: 0.66rem;
  }

  .timing-k {
    font-size: 0.66rem;
  }

  .timing-v {
    font-size: 0.68rem;
  }
}

/* Dark Canonical Tail */
:root {
  --bg-top: #0b1220 !important;
  --bg-bottom: #070d16 !important;
  --panel: #101a2b !important;
  --panel-edge: #233248 !important;
  --ink: #e6edf7 !important;
  --muted: #9fb0c4 !important;
  --accent: #3aa1ff !important;
  --accent-strong: #2384de !important;
  --blue-active: #57b2ff !important;
  --target-white: #6cc3ff !important;
  --target-black: #3f94df !important;
  --key-black: #0a101a !important;
  --key-white: #ecf3fb !important;
}

html,
body {
  color-scheme: dark;
}

body {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important;
}

body::before,
body::after {
  display: none !important;
}

.app-shell {
  max-width: 1360px !important;
  padding: 20px 18px !important;
  animation: none !important;
}

.app-header {
  margin-bottom: 14px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}

.app-header h1 {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  color: #f3f8ff !important;
}

.subtitle,
#song-hub-meta,
.screen-head p,
.screen-note,
.hint,
.library-meta,
.auth-status,
.learn-status,
.timing-k,
.timing-v {
  color: #9fb0c4 !important;
}

.panel,
.status-panel,
.library-card,
.auth-page-card,
.modal-card {
  background: #101a2b !important;
  border: 1px solid #233248 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.hub-head h2,
.screen-head h2,
.adaptive-course-head h3,
.library-title,
.auth-page-card h1 {
  font-family: "Sora", "Segoe UI", sans-serif !important;
  color: #eaf2fc !important;
  font-weight: 700 !important;
}

.screen-note {
  border: 1px solid #233248 !important;
  background: #0e1727 !important;
}

.mode-tab {
  border: 1px solid #2a3b52 !important;
  border-radius: 10px !important;
  background: #0f1828 !important;
  color: #c9d9ea !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.mode-tab:hover {
  transform: none !important;
  background: #132034 !important;
  border-color: #355174 !important;
}

.mode-tab.active {
  background: #142842 !important;
  border-color: #4aa9ff !important;
  color: #eff7ff !important;
}

.btn {
  border: 1px solid #2a3d57 !important;
  border-radius: 10px !important;
  background: #122136 !important;
  color: #d8e9f8 !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.btn:hover {
  transform: none !important;
  background: #152942 !important;
  border-color: #3b5d83 !important;
  box-shadow: none !important;
}

.btn.accent {
  background: linear-gradient(180deg, #42abff 0%, #2384de 100%) !important;
  border-color: #42abff !important;
  color: #f7fbff !important;
}

.btn.danger {
  background: #d55454 !important;
  border-color: #d55454 !important;
  color: #fff !important;
}

.auth-user-badge {
  border: 1px solid #2a3d57 !important;
  background: #0f1b2d !important;
  color: #d7e8f8 !important;
  font-family: "Space Mono", monospace !important;
}

.coach-item .k {
  color: #89a7c6 !important;
  font-family: "Space Mono", monospace !important;
}

.coach-item .v,
#play-status {
  color: #e6eef7 !important;
}

.piano-wrap {
  border: 1px solid #27374f !important;
  background: linear-gradient(180deg, #0e1726 0%, #0a1220 100%) !important;
}

.piano-key.white {
  background: linear-gradient(180deg, #ffffff 0%, #e8f0fa 100%) !important;
  border-color: #a7b8ca !important;
}

.piano-key.black {
  background: linear-gradient(180deg, #111a27 0%, #070f19 100%) !important;
  border-color: #314963 !important;
}

.piano-key.white .note {
  color: #1d3249 !important;
}

.piano-key.black .note {
  color: #d8e8f8 !important;
}

.piano-key.key--active.white {
  background: linear-gradient(180deg, #b9e2ff 0%, #77bfff 100%) !important;
  border-color: #5eaeea !important;
}

.piano-key.key--active.black {
  background: linear-gradient(180deg, #58aef2 0%, #2f7ec8 100%) !important;
  border-color: #72baf4 !important;
}

.timing-meter {
  border: 1px solid #2a3d57 !important;
  background: #0f192a !important;
}

.timing-fill.when {
  background: linear-gradient(90deg, #77c7ff 0%, #3495e3 100%) !important;
}

.timing-fill.hold {
  background: linear-gradient(90deg, #6ab8f2 0%, #2879c6 100%) !important;
}

.auth-page-shell {
  background: linear-gradient(180deg, #0b1220 0%, #070d16 100%) !important;
}

.auth-tab {
  border-color: #2a3d57 !important;
  background: #0f1828 !important;
  color: #c9daea !important;
  font-family: "Sora", "Segoe UI", sans-serif !important;
}

.auth-tab.active {
  border-color: #4aa9ff !important;
  background: #142842 !important;
  color: #f0f8ff !important;
}

.auth-field span {
  color: #9db6cf !important;
}

.auth-field input {
  border: 1px solid #2a3d57 !important;
  background: #0f1828 !important;
  color: #e2eef9 !important;
}

.auth-field input:focus {
  outline: 2px solid rgba(74, 169, 255, 0.45) !important;
}
/* Adaptive Contrast Tail Lock */
#screen-adaptive .adaptive-progress-line,
#screen-adaptive #adaptive-progress-line {
  border: 1px solid #2b4160 !important;
  background: linear-gradient(180deg, #0f1c30 0%, #0d1728 100%) !important;
  color: #dce8f6 !important;
}

#screen-adaptive .adaptive-danger-box {
  border: 1px solid #7d3440 !important;
  background: linear-gradient(180deg, #311720 0%, #241019 100%) !important;
}

#screen-adaptive .adaptive-danger-text,
#screen-adaptive .adaptive-danger-text strong {
  color: #ffd7dd !important;
}

#screen-adaptive .adaptive-course {
  border: 1px solid #2a3f5d !important;
  background: linear-gradient(180deg, #121f35 0%, #0d1829 100%) !important;
}

#screen-adaptive .adaptive-course-summary {
  color: #b9cbe0 !important;
}

#screen-adaptive .adaptive-course-empty {
  border: 1px dashed #375375 !important;
  background: rgba(16, 29, 48, 0.9) !important;
  color: #c4d5e8 !important;
}

#screen-adaptive .course-section {
  border: 1px solid #314a69 !important;
  background: rgba(13, 24, 40, 0.92) !important;
}

#screen-adaptive .course-section-title {
  color: #dfebf8 !important;
}

#screen-adaptive .course-section-meta {
  color: #97afc8 !important;
}

#screen-adaptive .course-unit {
  border: 1px solid #2f4867 !important;
  background: #111f34 !important;
}

#screen-adaptive .course-unit.main-current {
  border-color: #8d7235 !important;
  background: linear-gradient(180deg, #2a2414 0%, #1d1a10 100%) !important;
}

#screen-adaptive .course-unit.main-needs_review {
  border-color: #8f5f3f !important;
  background: linear-gradient(180deg, #2d1f16 0%, #211811 100%) !important;
}

#screen-adaptive .course-unit.main-passed {
  border-color: #3f7150 !important;
  background: linear-gradient(180deg, #15281d 0%, #111f18 100%) !important;
}

#screen-adaptive .course-unit.main-in_progress {
  border-color: #3e668f !important;
  background: linear-gradient(180deg, #15263a 0%, #111d2e 100%) !important;
}

#screen-adaptive .course-unit.main-locked {
  border-color: #46566a !important;
  background: #151d29 !important;
  opacity: 0.86 !important;
}

#screen-adaptive .course-unit-name {
  color: #eaf2fc !important;
}

#screen-adaptive .course-unit-metrics {
  color: #a6bed4 !important;
}

#screen-adaptive .course-unit-chip {
  border: 1px solid #4a5f79 !important;
  background: #1a2a40 !important;
  color: #c7d8ea !important;
}

#screen-adaptive .course-unit-chip.state-current {
  border-color: #ac8c43 !important;
  background: #2e2817 !important;
  color: #ffe2a5 !important;
}

#screen-adaptive .course-unit-chip.state-needs_review {
  border-color: #a8704b !important;
  background: #312116 !important;
  color: #ffd5bd !important;
}

#screen-adaptive .course-unit-chip.state-passed {
  border-color: #4f855a !important;
  background: #182d1f !important;
  color: #d2f0d8 !important;
}

#screen-adaptive .course-unit-chip.state-in_progress {
  border-color: #4b7da8 !important;
  background: #18283d !important;
  color: #cde2f8 !important;
}

#screen-adaptive .course-unit-chip.state-available {
  border-color: #56708e !important;
  background: #1b2a3f !important;
  color: #c6d9ee !important;
}

#screen-adaptive .course-unit-chip.state-locked {
  border-color: #586070 !important;
  background: #212732 !important;
  color: #c0c8d6 !important;
}

#screen-adaptive .coach-panel {
  border: 1px solid #2d4464 !important;
  background: linear-gradient(180deg, #111f34 0%, #0d1829 100%) !important;
}

#screen-adaptive .coach-head h2 {
  color: #e6effa !important;
}

#screen-adaptive .coach-pill {
  border: 1px solid #44658d !important;
  background: #1a2d45 !important;
  color: #d2e2f4 !important;
}

#screen-adaptive .coach-pill.adaptive {
  border-color: #8f7841 !important;
  background: #2b2415 !important;
  color: #ffe3a9 !important;
}

#screen-adaptive .coach-pill.autoplay {
  border-color: #4b7296 !important;
  background: #17283f !important;
  color: #d3e6fa !important;
}

#screen-adaptive .coach-item {
  border-bottom: 1px dashed rgba(127, 154, 182, 0.26) !important;
}

#screen-adaptive .coach-item .k {
  color: #90acc8 !important;
}

#screen-adaptive .coach-item .v {
  color: #e7f0fb !important;
}

/* Key Label Readability Tail Lock */
.piano-key.white .note,
.piano-key.black .note {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(112, 127, 145, 0.7) !important;
  color: #1d3249 !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
  font-size: 12px !important;
  padding: 1px 6px !important;
}

.piano-key.black .note {
  bottom: 20px !important;
}

/* Black Key Dot Position Tail Lock */
.piano-key.black[data-guide-repeat-dots]::after {
  top: auto !important;
  bottom: 6px !important;
  transform: translateX(-50%) !important;
}

/* Black Key Dot Spacing Tail Lock */
.piano-key.black[data-guide-repeat-dots]::after {
  top: auto !important;
  bottom: 4px !important;
  transform: translateX(-50%) !important;
}

/* Controls Contrast Tail Lock */
.toggle-wrap,
.mic-sensitivity-wrap,
.song-select-wrap,
.preview-mode-wrap,
.lookahead-wrap {
  background: #0f1a2c !important;
  border: 1px solid #2c405b !important;
  color: #e6edf7 !important;
}

.toggle-wrap span,
.mic-sensitivity-wrap span,
.song-select-wrap span,
.preview-mode-wrap span,
.lookahead-wrap span,
.mic-sensitivity-value,
#mic-sensitivity-value {
  color: #dbe9f8 !important;
}

.toggle-wrap input[type="checkbox"],
.modal-all-wrap input[type="checkbox"] {
  accent-color: #4aa9ff !important;
}

.mic-sensitivity-wrap input[type="range"] {
  accent-color: #4aa9ff !important;
}

.song-select-wrap select,
.preview-mode-wrap select,
.lookahead-wrap input {
  background: #0f1828 !important;
  border: 1px solid #2a3d57 !important;
  color: #e6edf7 !important;
}

/* Black Key Label Static Height Lock */
.piano-key.black .note {
  bottom: 28px !important;
}

/* Popup Contrast Final Tail Lock */
.stage-overlay {
  background: rgba(5, 10, 18, 0.64) !important;
}

.overlay-card,
.modal-card {
  background: linear-gradient(180deg, #111c2e 0%, #0c1523 100%) !important;
  border: 1px solid #2e4563 !important;
  color: #e6eef8 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45) !important;
}

.overlay-card h3,
.modal-card h3 {
  color: #f2f7ff !important;
}

.overlay-card p,
.modal-card p {
  color: #c5d6e9 !important;
}

/* Library Progress Final Tail Lock */
#screen-library .library-song-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#screen-library .library-card {
  border-color: rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), var(--lib-border-a, 0.36)) !important;
  background: linear-gradient(
    180deg,
    #111c2f 0%,
    rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), var(--lib-bg-a, 0.08)) 100%
  ) !important;
  box-shadow:
    0 0 0 1px rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), var(--lib-glow-a, 0.14)),
    0 10px 24px rgba(0, 0, 0, 0.3) !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 13px !important;
}

#screen-library .library-card.library-card-selected {
  border-color: rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), 0.55),
    0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

#screen-library .library-progress {
  border: 1px solid #2d425e !important;
  background: #0f1b2f !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

#screen-library .library-progress-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

#screen-library .library-progress-title {
  color: #c8d8ea !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

#screen-library .library-progress-percent {
  color: #eef6ff !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

#screen-library .library-progress-track {
  margin-top: 7px !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 1px solid #2f4a69 !important;
  background: #0b1523 !important;
  overflow: hidden !important;
}

#screen-library .library-progress-fill {
  height: 100% !important;
  width: var(--fill-pct, 0%) !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), 0.95) 0%,
    rgba(var(--lib-accent-r, 74), var(--lib-accent-g, 129), var(--lib-accent-b, 193), 0.72) 100%
  ) !important;
  transition: width 220ms ease !important;
}

#screen-library .library-actions {
  margin-top: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#screen-library .library-actions .btn {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  padding: 9px 10px !important;
}

#screen-library .library-meta {
  line-height: 1.45 !important;
}

/* UI V2 Final Tail */
:root {
  --ui-bg-top: #0e1727 !important;
  --ui-bg-bottom: #132238 !important;
  --ui-surface-1: #16273d !important;
  --ui-surface-2: #1a2d46 !important;
  --ui-surface-3: #203652 !important;
  --ui-border: #345172 !important;
  --ui-ink: #edf4fd !important;
  --ui-muted: #b2c4d8 !important;
}

body {
  background:
    radial-gradient(circle at 14% 10%, rgba(101, 156, 217, 0.18) 0%, rgba(101, 156, 217, 0) 38%),
    radial-gradient(circle at 88% 4%, rgba(76, 121, 174, 0.14) 0%, rgba(76, 121, 174, 0) 34%),
    linear-gradient(180deg, var(--ui-bg-top) 0%, var(--ui-bg-bottom) 100%) !important;
  color: var(--ui-ink) !important;
}

.app-header h1 {
  color: #f5f9ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.subtitle {
  color: #b8c9dc !important;
}

.panel,
.status-panel,
.song-hub,
.mode-screen.panel,
.session-panel,
.practice-feedback {
  background: linear-gradient(180deg, var(--ui-surface-2) 0%, var(--ui-surface-1) 100%) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 10px 26px rgba(4, 8, 14, 0.34) !important;
}

.mode-nav {
  background: rgba(10, 20, 33, 0.5) !important;
  border: 1px solid rgba(59, 87, 118, 0.65) !important;
  border-radius: 14px !important;
  padding: 6px !important;
}

.mode-tab {
  background: linear-gradient(180deg, #1a2b43 0%, #152338 100%) !important;
  border: 1px solid #345170 !important;
  color: #d3e0ef !important;
  font-weight: 700 !important;
}

.mode-tab:hover {
  background: linear-gradient(180deg, #203651 0%, #1a2c43 100%) !important;
  border-color: #4d6b8d !important;
  color: #eff6ff !important;
}

.mode-tab[data-app-mode="learn"].active {
  background: linear-gradient(180deg, #29466a 0%, #1d3653 100%) !important;
  border-color: #65b2ff !important;
  color: #f3f8ff !important;
}

.mode-tab[data-app-mode="adaptive"].active {
  background: linear-gradient(180deg, #4d3f24 0%, #3b2f1a 100%) !important;
  border-color: #d3af58 !important;
  color: #fff0cb !important;
}

.mode-tab[data-app-mode="library"].active {
  background: linear-gradient(180deg, #264959 0%, #1b3948 100%) !important;
  border-color: #67bdd9 !important;
  color: #e6f8ff !important;
}

.mode-tab[data-app-mode="free_play"].active {
  background: linear-gradient(180deg, #24504f 0%, #193f3e 100%) !important;
  border-color: #6fc0bc !important;
  color: #e9fffd !important;
}

#screen-learn.active {
  border-color: #4f7fb5 !important;
  background: linear-gradient(180deg, #1c304b 0%, #17283e 100%) !important;
}

#screen-adaptive.active {
  border-color: #9f8247 !important;
  background: linear-gradient(180deg, #2c2a1f 0%, #222319 100%) !important;
}

#screen-library.active {
  border-color: #4f8eab !important;
  background: linear-gradient(180deg, #1b3240 0%, #162835 100%) !important;
}

#screen-free-play.active {
  border-color: #4e8b8a !important;
  background: linear-gradient(180deg, #1a3136 0%, #14262c 100%) !important;
}

.screen-head h2,
.hub-head h2,
.library-title,
.coach-head h2 {
  color: #f0f6ff !important;
}

.screen-head p,
#song-hub-meta,
.library-meta,
.hint,
.timing-k,
.timing-v {
  color: var(--ui-muted) !important;
}

.btn {
  background: linear-gradient(180deg, #223850 0%, #1a2d44 100%) !important;
  border-color: #3f6288 !important;
  color: #e6f0fb !important;
  font-weight: 700 !important;
}

.btn:hover {
  background: linear-gradient(180deg, #29466a 0%, #203754 100%) !important;
  border-color: #5680ad !important;
  color: #f4f9ff !important;
}

.btn.secondary {
  background: linear-gradient(180deg, #1f3148 0%, #18283c 100%) !important;
  border-color: #385777 !important;
}

.btn.accent {
  background: linear-gradient(180deg, #55b8ff 0%, #2f87d8 100%) !important;
  border-color: #69c0ff !important;
  color: #f7fcff !important;
}

/* Dropdown + library text cleanup
   Some earlier contrast overrides applied dark block backgrounds to
   select wrappers and library metadata rows. Keep these elements clean. */
.song-select-wrap,
.preview-mode-wrap {
  background: transparent !important;
  border: 0 !important;
}

#lookahead-wrap,
.lookahead-wrap {
  background: transparent !important;
  border: 0 !important;
}

.song-select-wrap select,
.preview-mode-wrap select {
  background: #fff !important;
  border: 1px solid #c5b598 !important;
  color: #1f2f42 !important;
}

#lookahead-wrap input,
.lookahead-wrap input {
  background: #fff !important;
  border: 1px solid #c5b598 !important;
  color: #1f2f42 !important;
}

.song-select-wrap select option,
.preview-mode-wrap select option {
  background: #fff !important;
  color: #1f2f42 !important;
}

#screen-library .library-meta,
.library-card .library-meta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#screen-library .library-progress {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#screen-library .library-progress-meta,
#screen-library .library-progress-footer {
  margin: 0 !important;
  line-height: 1.55 !important;
}

#screen-library .library-progress-footer {
  margin-top: 2px !important;
}

/* Learn/Adaptive feedback container cleanup */
#practice-feedback {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.status-wrap {
  background: linear-gradient(180deg, #1a2e46 0%, #15253a 100%) !important;
  border: 1px solid #38577a !important;
}

.learn-status {
  color: #e6f1fc !important;
}

.song-hub .control-row,
#screen-learn .control-row,
#screen-adaptive .control-row {
  gap: 10px !important;
}

/* Unified Learn-Look Dark Theme (lighter mood) */
:root {
  --ui-bg-top: #16243a !important;
  --ui-bg-bottom: #1d304a !important;
  --ui-surface-1: #213650 !important;
  --ui-surface-2: #29415f !important;
  --ui-surface-3: #325074 !important;
  --ui-border: #4f739d !important;
  --ui-ink: #f2f7ff !important;
  --ui-muted: #c5d5e8 !important;
}

body {
  background:
    radial-gradient(circle at 14% 10%, rgba(130, 184, 239, 0.2) 0%, rgba(130, 184, 239, 0) 40%),
    radial-gradient(circle at 84% 4%, rgba(110, 161, 222, 0.16) 0%, rgba(110, 161, 222, 0) 36%),
    linear-gradient(180deg, var(--ui-bg-top) 0%, var(--ui-bg-bottom) 100%) !important;
}

.panel,
.status-panel,
.song-hub,
.mode-screen.panel,
.session-panel,
.practice-feedback {
  background: linear-gradient(180deg, var(--ui-surface-2) 0%, var(--ui-surface-1) 100%) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 12px 26px rgba(8, 16, 28, 0.26) !important;
}

.mode-tab.active,
.mode-tab[data-app-mode="learn"].active,
.mode-tab[data-app-mode="adaptive"].active,
.mode-tab[data-app-mode="library"].active,
.mode-tab[data-app-mode="free_play"].active {
  background: linear-gradient(180deg, #355984 0%, #28476b 100%) !important;
  border-color: #7fc0ff !important;
  color: #f5f9ff !important;
}

#screen-learn.active,
#screen-adaptive.active,
#screen-library.active,
#screen-free-play.active {
  border-color: #6a9acd !important;
  background: linear-gradient(180deg, #274161 0%, #213752 100%) !important;
}

.btn {
  background: linear-gradient(180deg, #304e72 0%, #264364 100%) !important;
  border-color: #5f87b7 !important;
  color: #edf5ff !important;
}

.btn:hover {
  background: linear-gradient(180deg, #396190 0%, #2e527c 100%) !important;
  border-color: #79a7dd !important;
  color: #f8fbff !important;
}

.btn.accent {
  background: linear-gradient(180deg, #75c6ff 0%, #449ce8 100%) !important;
  border-color: #8ad0ff !important;
  color: #f8fcff !important;
}

.status-wrap {
  background: linear-gradient(180deg, #2b4668 0%, #223a57 100%) !important;
  border-color: #618bbd !important;
}

.menu-container {
  display: grid !important;
  gap: 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(138, 160, 184, 0.34) !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-container.is-hidden {
  display: none !important;
}

.mobile-play-now-wrap {
  display: block;
  margin: 10px 0 0;
}

.mobile-play-now-wrap.is-hidden {
  display: none !important;
}

  #mobile-play-now-btn {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.96rem !important;
  }

.gameplay-container {
  margin-top: 12px !important;
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(138, 160, 184, 0.38) !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gameplay-container.is-hidden {
  display: none !important;
}

#practice-feedback #learn-status {
  display: none !important;
}

#practice-feedback {
  margin-bottom: 0 !important;
}

.gameplay-container .status-panel {
  margin-top: 0 !important;
}

.play-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#focus-mode-btn {
  white-space: nowrap !important;
}

.range-display-pill {
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
}

#practice-feedback .status-wrap > #focus-mode-btn {
  margin-left: auto !important;
  order: 2 !important;
}

.play-status-row .timing-toggle {
  margin-left: auto !important;
}

#piano-wrap #guide-strip {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

#piano-wrap #timing-coach-wrap {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

#practice-feedback .status-wrap {
  background: linear-gradient(180deg, #2f4a6b 0%, #243d5a 100%) !important;
  border: 1px solid rgba(109, 144, 179, 0.72) !important;
  box-shadow: 0 3px 10px rgba(9, 20, 33, 0.24) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

#practice-feedback #session-controls {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  order: 1 !important;
}

#practice-feedback #session-controls .control-row {
  justify-content: flex-start !important;
  gap: 8px !important;
}

#practice-feedback #adaptive-inline-controls .control-row {
  justify-content: flex-start !important;
  gap: 8px !important;
}

#screen-free-play .free-play-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

#screen-free-play .free-play-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

@media (max-width: 760px) {
  #screen-free-play .free-play-head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  #screen-free-play .free-play-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}

.onboarding-screen {
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 10px !important;
}

#onboarding-screen.is-hidden,
body.app-onboarding-active #onboarding-screen.is-hidden {
  display: none !important;
}

.logo-container,
.profile-container,
.choose-mode-container,
.hint-container {
  width: 100% !important;
}

.logo-container h1 {
  margin: 0 !important;
  font-size: clamp(1.7rem, 3.4vw, 2.45rem) !important;
  color: #f1f7ff !important;
  letter-spacing: 0.02em !important;
}

.profile-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.choose-mode-container {
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.hint-container {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  border: 1px solid rgba(95, 133, 173, 0.8) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2f4a6b 0%, #253f5e 100%) !important;
  padding: 10px 11px !important;
}

.hint-container strong {
  color: #f1f7ff !important;
  font-size: 0.86rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.hint-container span {
  color: #c9dced !important;
  font-size: 0.96rem !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
}

.onboarding-head {
  margin-bottom: 0 !important;
}

.onboarding-head h2 {
  margin: 0 !important;
  font-size: 1.22rem !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--ui-ink) !important;
}

.onboarding-head p {
  margin: 4px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.onboarding-context {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(95, 133, 173, 0.8) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2f4a6b 0%, #253f5e 100%) !important;
}

.onboarding-continue-btn {
  min-width: 190px !important;
}

.onboarding-context-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.onboarding-inline-meta {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  color: #cfe0f2 !important;
}

.onboarding-inline-meta .k {
  color: #b9cee3 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.onboarding-inline-meta strong {
  color: #f1f7ff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.onboarding-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.onboarding-card {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid #5a7fa8 !important;
  background: linear-gradient(180deg, #2f4a6b 0%, #253f5e 100%) !important;
  color: #edf5ff !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease !important;
}

.onboarding-card:hover {
  border-color: #86b5e8 !important;
  background: linear-gradient(180deg, #365579 0%, #2b496b 100%) !important;
  transform: translateY(-1px) !important;
}

.onboarding-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.onboarding-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.onboarding-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(181, 214, 247, 0.82) !important;
  background: linear-gradient(180deg, #3c618c 0%, #2c4a6d 100%) !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.onboarding-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: rgba(219, 238, 255, 0.9) !important;
}

.onboarding-card-free .onboarding-icon {
  border-color: rgba(157, 221, 214, 0.9) !important;
  background: linear-gradient(180deg, #2f6d73 0%, #25585d 100%) !important;
}

.onboarding-card-learn .onboarding-icon {
  border-color: rgba(182, 212, 255, 0.9) !important;
  background: linear-gradient(180deg, #406c9b 0%, #315478 100%) !important;
}

.onboarding-card-adaptive .onboarding-icon {
  border-color: rgba(246, 216, 148, 0.9) !important;
  background: linear-gradient(180deg, #6a5a35 0%, #554726 100%) !important;
}

.onboarding-card-library .onboarding-icon {
  border-color: rgba(154, 212, 198, 0.9) !important;
  background: linear-gradient(180deg, #2b6b5f 0%, #22564d 100%) !important;
}

.onboarding-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(131, 172, 214, 0.8) !important;
  background: rgba(18, 34, 52, 0.38) !important;
  color: #dcedff !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.onboarding-card strong {
  font-size: 1.15rem !important;
  letter-spacing: 0.02em !important;
}

.onboarding-card span {
  color: #cadcf1 !important;
  font-size: 0.98rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.onboarding-card-go {
  justify-self: end !important;
  align-self: end !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(131, 172, 214, 0.85) !important;
  background: rgba(16, 30, 46, 0.46) !important;
  position: relative !important;
}

.onboarding-card-go::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 8px !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid #dff0ff !important;
  border-right: 2px solid #dff0ff !important;
  transform: rotate(45deg) !important;
}

@media (max-width: 760px) {
  .onboarding-context {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .onboarding-context-meta {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
}


#practice-feedback .timing-toggle {
  margin-left: auto !important;
  order: 2 !important;
}

body.app-focus-mode .app-header,
body.app-focus-mode #menu-container {
  display: none !important;
}

body.app-focus-mode #app-shell {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.app-focus-mode #gameplay-container {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.app-focus-mode #practice-feedback .status-wrap {
  min-width: 0 !important;
}

body.app-focus-mode #practice-feedback .control-row {
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body.app-focus-mode #practice-feedback .control-row .btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 920px) {
  .menu-container,
  .gameplay-container {
    padding: 8px !important;
    gap: 8px !important;
  }
}

/* Adaptive surface harmony: match silver-blue app palette */
#screen-adaptive.active {
  border-color: #4f7193 !important;
  background: linear-gradient(180deg, #355678 0%, #294665 100%) !important;
}

#screen-adaptive .adaptive-progress-line,
#screen-adaptive #adaptive-progress-line {
  border: 1px solid #4f7193 !important;
  background: linear-gradient(180deg, #2f4a6b 0%, #243d5a 100%) !important;
  color: #e8f2fc !important;
}

#screen-adaptive .adaptive-course,
#screen-adaptive .coach-panel {
  border: 1px solid #4f7193 !important;
  background: linear-gradient(180deg, #2f4a6b 0%, #243d5a 100%) !important;
}

#screen-adaptive .adaptive-course-summary,
#screen-adaptive .course-section-meta,
#screen-adaptive .course-unit-metrics,
#screen-adaptive .coach-item .k {
  color: #c9dced !important;
}

#screen-adaptive .course-section {
  border: 1px solid #537596 !important;
  background: rgba(40, 63, 90, 0.9) !important;
}

#screen-adaptive .course-unit {
  border: 1px solid #537596 !important;
  background: #2a4461 !important;
}

#screen-adaptive .course-unit.main-locked {
  border-color: #48627c !important;
  background: #22384f !important;
  opacity: 0.9 !important;
}

#screen-adaptive .course-unit-name,
#screen-adaptive .coach-item .v,
#screen-adaptive .coach-head h2,
#screen-adaptive .course-section-title {
  color: #eef5fc !important;
}

#screen-adaptive .coach-grid {
  gap: 8px 12px !important;
}

#screen-adaptive .coach-item {
  grid-template-columns: 120px 1fr !important;
  align-items: start !important;
  border: 1px solid rgba(97, 130, 163, 0.72) !important;
  border-radius: 10px !important;
  border-bottom: 1px solid rgba(97, 130, 163, 0.72) !important;
  background: linear-gradient(180deg, rgba(38, 62, 88, 0.86) 0%, rgba(32, 53, 76, 0.86) 100%) !important;
  padding: 7px 10px !important;
}

#screen-adaptive .coach-item .k {
  color: #c1d4e7 !important;
}

#screen-adaptive .coach-item .v {
  color: #edf5ff !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

#screen-adaptive .btn,
#screen-adaptive .course-unit-action .btn,
#screen-adaptive .adaptive-course-actions .btn {
  background: linear-gradient(180deg, #365a7e 0%, #2a4768 100%) !important;
  border: 1px solid #5f83a8 !important;
  color: #f0f7ff !important;
  box-shadow: none !important;
}

#screen-adaptive .btn:hover,
#screen-adaptive .course-unit-action .btn:hover,
#screen-adaptive .adaptive-course-actions .btn:hover {
  background: linear-gradient(180deg, #3f658d 0%, #315274 100%) !important;
  border-color: #7397bc !important;
  color: #f7fbff !important;
}

#screen-adaptive .adaptive-course-progress-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid #5f83a8 !important;
  background: linear-gradient(180deg, #365a7e 0%, #2a4768 100%) !important;
  color: #f0f7ff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

#screen-adaptive .adaptive-course.is-collapsed .adaptive-course-tree {
  display: none !important;
}

#screen-adaptive .adaptive-course.is-collapsed {
  padding-bottom: 10px !important;
}

/* Adaptive accent rebalance */
#screen-adaptive .adaptive-danger-box {
  border: 1px solid #c95d67 !important;
  background: linear-gradient(180deg, #6a2530 0%, #531d27 100%) !important;
}

#screen-adaptive .adaptive-danger-text,
#screen-adaptive .adaptive-danger-text strong {
  color: #ffd9de !important;
}

#screen-adaptive .course-unit.main-passed {
  border-color: #5ea772 !important;
  background: linear-gradient(180deg, #1f4a2e 0%, #183a24 100%) !important;
}

#screen-adaptive .course-unit-chip.state-passed {
  border-color: #78be8a !important;
  background: #28573a !important;
  color: #e4f8ea !important;
}

/* Onboarding viewport lock (desktop + mobile) */
body.app-onboarding-active {
  overflow: hidden !important;
}

body.app-onboarding-active #app-shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-rows: 1fr !important;
  gap: 10px !important;
  padding-top: clamp(10px, 2.2vh, 18px) !important;
  padding-bottom: clamp(10px, 2.2vh, 18px) !important;
}

body.app-onboarding-active #onboarding-screen {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: clamp(10px, 1.6vh, 14px) !important;
}

body.app-onboarding-active .choose-mode-container {
  flex: 0 0 auto !important;
  min-height: auto !important;
  grid-template-rows: auto auto auto !important;
}

body.app-onboarding-active .app-header {
  display: none !important;
}

body.app-onboarding-active .onboarding-head {
  margin-bottom: 0 !important;
}

body.app-onboarding-active .onboarding-head p {
  margin-top: 2px !important;
  font-size: 0.96rem !important;
}

body.app-onboarding-active .onboarding-context {
  padding: 8px 10px !important;
  gap: 8px !important;
}

body.app-onboarding-active .onboarding-continue-btn {
  min-width: 168px !important;
  min-height: 34px !important;
  font-size: 0.78rem !important;
}

body.app-onboarding-active .onboarding-inline-meta .k {
  font-size: 0.76rem !important;
}

body.app-onboarding-active .onboarding-inline-meta strong {
  font-size: 0.96rem !important;
}

body.app-onboarding-active .onboarding-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body.app-onboarding-active .onboarding-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px !important;
  gap: 5px !important;
}

body.app-onboarding-active .onboarding-card strong {
  font-size: 1.08rem !important;
}

body.app-onboarding-active .onboarding-card span {
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.app-onboarding-active .onboarding-chip {
  font-size: 0.82rem !important;
  padding: 4px 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .logo-container h1 {
    font-size: clamp(1.45rem, 7.2vw, 2rem) !important;
  }

  .profile-container {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .hint-container {
    align-items: flex-start !important;
    padding: 8px !important;
  }

  .hint-container span {
    font-size: 0.9rem !important;
  }

  body.app-onboarding-active #app-shell {
    padding: 10px !important;
    gap: 8px !important;
  }

  body.app-onboarding-active .app-header {
    margin-bottom: 0 !important;
  }

  body.app-onboarding-active .app-header h1 {
    font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
  }

  body.app-onboarding-active .onboarding-context {
    gap: 6px !important;
    padding: 8px !important;
  }

  body.app-onboarding-active .onboarding-continue-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-onboarding-active .onboarding-context-meta {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body.app-onboarding-active .onboarding-inline-meta strong {
    max-width: 90px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-onboarding-active .onboarding-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  body.app-onboarding-active .onboarding-card {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px !important;
  }

  body.app-onboarding-active .onboarding-card span {
    -webkit-line-clamp: 2 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }

  body.app-onboarding-active .onboarding-card strong {
    font-size: 1.08rem !important;
  }

  body.app-onboarding-active .onboarding-icon {
    width: 22px !important;
    height: 22px !important;
  }

  body.app-onboarding-active .onboarding-icon::after {
    left: 5px !important;
    top: 5px !important;
    width: 10px !important;
    height: 10px !important;
  }

  body.app-onboarding-active .onboarding-chip {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
  }

  body.app-onboarding-active .onboarding-card-go {
    width: 28px !important;
    height: 28px !important;
  }

  body.app-onboarding-active .onboarding-card-go::before {
    left: 9px !important;
    top: 8px !important;
    width: 8px !important;
    height: 8px !important;
  }
}

/* Mobile onboarding/nav refinement pass */
@media (max-width: 760px) {
  /* In-app nav: Main Menu should span full row width */
  .mode-nav {
    grid-template-columns: 1fr !important;
  }

  #mode-main-menu-btn {
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* Keep page-top spacing while preserving full viewport fit */
  body.app-onboarding-active #app-shell {
    padding: max(16px, env(safe-area-inset-top)) 10px 8px !important;
    gap: 6px !important;
  }

  /* Keep logo visually dominant */
  body.app-onboarding-active .logo-container h1 {
    font-size: clamp(1.45rem, 7.4vw, 2rem) !important;
  }

  /* Better profile container treatment */
  body.app-onboarding-active .profile-container {
    justify-content: space-between !important;
    align-items: center !important;
    border: 1px solid rgba(105, 142, 180, 0.82) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #2f4a6b 0%, #243d5a 100%) !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  body.app-onboarding-active #onboarding-user-badge {
    max-width: 72% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #eef6ff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
  }

  body.app-onboarding-active #onboarding-logout-btn {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.8rem !important;
  }

  /* Reduce card height expansion; keep cards content-driven */
  body.app-onboarding-active .choose-mode-container {
    grid-template-rows: auto auto auto !important;
    gap: 6px !important;
  }

  body.app-onboarding-active .onboarding-grid {
    grid-template-rows: repeat(4, auto) !important;
    align-content: stretch !important;
    gap: 6px !important;
  }

  body.app-onboarding-active .onboarding-card {
    height: auto !important;
    min-height: 60px !important;
    padding: 7px 9px !important;
    gap: 3px !important;
  }

  body.app-onboarding-active .onboarding-card strong {
    font-size: 0.96rem !important;
  }

  body.app-onboarding-active .onboarding-card span {
    font-size: 0.78rem !important;
    -webkit-line-clamp: 1 !important;
  }

  body.app-onboarding-active .onboarding-chip {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
  }

  body.app-onboarding-active .hint-container {
    padding: 6px 8px !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  body.app-onboarding-active .hint-container strong {
    font-size: 0.72rem !important;
  }

  body.app-onboarding-active .hint-container span {
    font-size: 0.74rem !important;
    line-height: 1.18 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Final mobile onboarding fit lock */
@media (max-width: 760px) {
  body.app-onboarding-active #app-shell {
    padding: max(16px, env(safe-area-inset-top)) 10px 8px !important;
    gap: 6px !important;
  }

  body.app-onboarding-active #onboarding-screen {
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body.app-onboarding-active .choose-mode-container {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  body.app-onboarding-active .onboarding-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(58px, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  body.app-onboarding-active .onboarding-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 7px 9px !important;
    gap: 3px !important;
  }

  body.app-onboarding-active .onboarding-card span {
    -webkit-line-clamp: 1 !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }
}

/* Phone landscape compact fit */
@media (max-height: 500px) and (hover: none) and (pointer: coarse) {
  body.app-onboarding-active #app-shell {
    padding: max(8px, env(safe-area-inset-top)) 8px 6px !important;
    gap: 4px !important;
  }

  body.app-onboarding-active #onboarding-screen {
    grid-template-rows: auto 1fr auto auto !important;
    gap: 4px !important;
    padding: 8px !important;
  }

  body.app-onboarding-active .logo-container h1 {
    font-size: clamp(1.12rem, 4.5vw, 1.4rem) !important;
  }

  body.app-onboarding-active .onboarding-head h2 {
    font-size: 0.96rem !important;
  }

  body.app-onboarding-active .onboarding-head p {
    display: none !important;
  }

  body.app-onboarding-active .onboarding-context {
    padding: 5px 7px !important;
    gap: 5px !important;
  }

  body.app-onboarding-active .onboarding-continue-btn {
    min-height: 26px !important;
    font-size: 0.72rem !important;
    padding: 0 8px !important;
  }

  body.app-onboarding-active .onboarding-inline-meta .k {
    font-size: 0.62rem !important;
  }

  body.app-onboarding-active .onboarding-inline-meta strong {
    font-size: 0.74rem !important;
    max-width: 96px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-onboarding-active .onboarding-grid {
    grid-template-rows: repeat(4, minmax(42px, 1fr)) !important;
    gap: 4px !important;
  }

  body.app-onboarding-active .onboarding-card {
    padding: 5px 7px !important;
    min-height: 0 !important;
    gap: 2px !important;
  }

  body.app-onboarding-active .onboarding-card strong {
    font-size: 0.84rem !important;
  }

  body.app-onboarding-active .onboarding-card span {
    font-size: 0.68rem !important;
    line-height: 1.12 !important;
    -webkit-line-clamp: 1 !important;
  }

  body.app-onboarding-active .onboarding-chip {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
  }

  body.app-onboarding-active .onboarding-icon {
    width: 14px !important;
    height: 14px !important;
  }

  body.app-onboarding-active .onboarding-icon::after {
    left: 3px !important;
    top: 3px !important;
    width: 6px !important;
    height: 6px !important;
  }

  body.app-onboarding-active .onboarding-card-go {
    width: 20px !important;
    height: 20px !important;
  }

  body.app-onboarding-active .onboarding-card-go::before {
    left: 6px !important;
    top: 5px !important;
    width: 6px !important;
    height: 6px !important;
  }

  body.app-onboarding-active .profile-container {
    padding: 4px 7px !important;
    gap: 6px !important;
  }

  body.app-onboarding-active #onboarding-user-badge {
    font-size: 0.72rem !important;
    max-width: 72% !important;
  }

  body.app-onboarding-active #onboarding-logout-btn {
    min-height: 24px !important;
    font-size: 0.68rem !important;
    padding: 0 8px !important;
  }

  body.app-onboarding-active .hint-container {
    padding: 4px 7px !important;
    gap: 5px !important;
  }

  body.app-onboarding-active .hint-container strong {
    font-size: 0.62rem !important;
  }

  body.app-onboarding-active .hint-container span {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    -webkit-line-clamp: 1 !important;
  }
}

/* Mobile focus mode viewport fit lock (portrait + landscape) */
@media (hover: none) and (pointer: coarse) {
  body.app-focus-mode {
    overflow: hidden !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.app-focus-mode #app-shell {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.app-focus-mode #gameplay-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.app-focus-mode #practice-feedback {
    margin: 0 !important;
  }

  body.app-focus-mode #practice-feedback .status-wrap {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  body.app-focus-mode #piano-wrap {
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.app-focus-mode .hand-guide {
    height: 86px !important;
    margin-bottom: 6px !important;
  }

  body.app-focus-mode #piano-stage {
    height: clamp(168px, 36dvh, 280px) !important;
  }

  body.app-focus-mode #piano-wrap #guide-strip {
    margin-bottom: 4px !important;
  }

  body.app-focus-mode #piano-wrap #timing-coach-wrap {
    margin-top: 4px !important;
  }

  body.app-focus-mode .status-panel {
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.app-focus-mode .play-status-row {
    gap: 6px !important;
  }

  body.app-focus-mode #play-status {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-focus-mode #focus-mode-btn {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.8rem !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  body.app-focus-mode #gameplay-container {
    gap: 0 !important;
  }

  body.app-focus-mode #practice-feedback .status-wrap {
    padding: 2px 6px !important;
    gap: 4px !important;
    min-height: 0 !important;
  }

  body.app-focus-mode #practice-feedback .control-row {
    gap: 4px !important;
  }

  body.app-focus-mode #practice-feedback .btn {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
  }

  body.app-focus-mode #practice-feedback .timing-toggle {
    padding: 1px 6px !important;
    font-size: 0.72rem !important;
  }

  body.app-focus-mode .hand-guide {
    height: 56px !important;
    margin-bottom: 2px !important;
  }

  body.app-focus-mode #piano-wrap {
    padding: 2px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.app-focus-mode #piano-stage {
    height: clamp(144px, 34dvh, 240px) !important;
  }

  body.app-focus-mode #piano-wrap #guide-strip {
    margin-bottom: 2px !important;
  }

  body.app-focus-mode #piano-wrap #timing-coach-wrap {
    margin-top: 2px !important;
  }

  body.app-focus-mode .status-panel {
    padding: 2px 6px !important;
    min-height: 0 !important;
  }

  body.app-focus-mode #play-status {
    font-size: 0.76rem !important;
  }

  body.app-focus-mode #focus-mode-btn {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
  }
}

/* Focus mode: reliable landscape fit (applies regardless of pointer emulation) */
@media (orientation: landscape) and (max-height: 700px) {
  body.app-focus-mode {
    overflow-x: hidden !important;
  }

  body.app-focus-mode #app-shell {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body.app-focus-mode #gameplay-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  body.app-focus-mode #practice-feedback {
    margin: 0 !important;
  }

  body.app-focus-mode #practice-feedback .status-wrap {
    padding: 2px 6px !important;
    gap: 4px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.app-focus-mode #practice-feedback .control-row {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.app-focus-mode #practice-feedback .btn {
    min-height: 22px !important;
    padding: 0 6px !important;
    font-size: 0.66rem !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.app-focus-mode #practice-feedback .timing-toggle {
    padding: 1px 6px !important;
    font-size: 0.7rem !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  body.app-focus-mode #piano-wrap {
    margin: 0 !important;
    padding: 1px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-focus-mode .hand-guide {
    height: 46px !important;
    margin-bottom: 1px !important;
  }

  body.app-focus-mode #piano-wrap #guide-strip {
    margin-bottom: 2px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
  }

  body.app-focus-mode #piano-stage {
    height: clamp(168px, 48dvh, 300px) !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body.app-focus-mode #piano-wrap #timing-coach-wrap {
    margin-top: 2px !important;
  }

  body.app-focus-mode .status-panel {
    margin: 0 !important;
    padding: 1px 6px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
  }

  body.app-focus-mode .play-status-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.app-focus-mode #play-status {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-focus-mode .play-status-row .timing-toggle {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  body.app-focus-mode #play-status { font-size: 0.7rem !important; }

  body.app-focus-mode #focus-mode-btn {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 0.7rem !important;
  }
}

/* Focus hard lock + debug HUD */
body.app-focus-hard-lock {
  overflow: hidden !important;
}

body.app-focus-hard-lock #app-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.app-focus-hard-lock #gameplay-container {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.app-focus-hard-lock #gameplay-container.no-practice-panels {
  grid-template-rows: 1fr auto !important;
}

body.app-focus-hard-lock #piano-wrap {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.app-focus-hard-lock #piano-stage {
  flex: 1 1 auto !important;
  min-height: clamp(220px, 52dvh, 560px) !important;
  height: auto !important;
}

body.app-focus-mode.app-timing-visible #piano-stage {
  min-height: clamp(180px, 42dvh, 460px) !important;
  height: auto !important;
}

/* Mobile interaction guards */
@media (hover: none) and (pointer: coarse) {
  body.app-mobile-menu-view .app-header {
    display: none !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html,
  body,
  .app-shell,
  #app-shell {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .app-shell,
  #app-shell,
  #menu-container,
  #song-hub,
  .mode-screen.panel,
  #gameplay-container,
  #practice-feedback,
  #piano-wrap,
  .status-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  #song-hub .control-row,
  #screen-learn .control-row,
  #screen-adaptive .control-row {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  #song-hub .control-row > *,
  #screen-learn .control-row > *,
  #screen-adaptive .control-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #screen-adaptive .coach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #screen-adaptive .coach-item {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    min-width: 0 !important;
    padding: 6px 7px !important;
  }

  #screen-adaptive .coach-item .k {
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
  }

  #screen-adaptive .coach-item .v {
    font-size: 0.72rem !important;
    line-height: 1.14 !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  input,
  textarea,
  select,
  option {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
  }

  #practice-feedback #session-controls .control-row,
  #practice-feedback #adaptive-inline-controls .control-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
    gap: 5px !important;
  }

  #practice-feedback #session-controls .control-row .btn,
  #practice-feedback #adaptive-inline-controls .control-row .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    min-height: 30px !important;
    font-size: clamp(0.58rem, 2.4vw, 0.78rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .play-status-row {
    gap: 6px !important;
  }

  #play-status {
    min-width: 0 !important;
    font-size: clamp(0.76rem, 2.7vw, 1rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #focus-mode-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    min-height: 30px !important;
    font-size: clamp(0.62rem, 2.6vw, 0.84rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.app-focus-mode.app-timing-visible #piano-stage {
    height: clamp(126px, 38dvh, 236px) !important;
  }

  body.app-focus-hard-lock #piano-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.app-focus-hard-lock #piano-stage {
    flex: 1 1 auto !important;
    min-height: clamp(136px, 36dvh, 248px) !important;
    height: auto !important;
  }

  body.app-focus-mode.app-timing-visible #piano-stage {
    min-height: clamp(120px, 30dvh, 216px) !important;
    height: auto !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  body.app-onboarding-active .onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
}


body.app-focus-mode #gameplay-container.no-practice-panels {
  grid-template-rows: 1fr auto !important;
  gap: 0 !important;
  align-content: start !important;
  align-items: stretch !important;
  grid-auto-rows: min-content !important;
}

body.app-focus-mode #gameplay-container.no-practice-panels #piano-wrap {
  min-height: 0 !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

body.app-focus-mode #gameplay-container.no-practice-panels #piano-stage {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: clamp(220px, 58dvh, 620px) !important;
}

body.app-focus-mode.app-timing-visible #gameplay-container.no-practice-panels #piano-stage {
  min-height: clamp(180px, 48dvh, 520px) !important;
}

body.app-focus-mode #gameplay-container.no-practice-panels .status-panel {
  margin: 0 !important;
  min-height: 44px !important;
  padding: 4px 8px !important;
  height: auto !important;
  max-height: max-content !important;
  align-self: end !important;
  flex: 0 0 auto !important;
}

body.app-focus-mode #gameplay-container.no-practice-panels .play-status-row {
  gap: 8px !important;
  min-height: 34px !important;
  align-items: center !important;
}

body.app-focus-mode #gameplay-container.no-practice-panels #focus-mode-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 0.86rem !important;
}