:root {
  color-scheme: dark light;
  --bg: #121016;
  --bg-alt: #1a1720;
  --fg: #f2f0f5;
  --muted: #a39cb0;
  --border: #2e2a38;
  --accent: #8b6bf0;
  --accent-strong: #a78bfa;
  --best: #34d399;
  --danger: #f87171;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f5f9;
    --bg-alt: #ffffff;
    --fg: #1c1a22;
    --muted: #6b6577;
    --border: #e2dfe9;
    --accent: #7c5cff;
    --accent-strong: #6d4bef;
    --best: #1f9d6b;
  }
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 0 1rem 3rem;
}

header {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand-icon {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}

.home-page {
  background:
    radial-gradient(circle at 50% 16%, rgba(111, 75, 239, 0.2), transparent 31rem),
    radial-gradient(circle at 7% 72%, rgba(99, 57, 200, 0.12), transparent 22rem),
    var(--bg);
}

.home-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 5.4rem auto 0 0;
  width: clamp(2.5rem, 8vw, 8rem);
  opacity: 0.24;
  pointer-events: none;
  border-right: 1px solid rgba(139, 107, 240, 0.3);
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(139, 107, 240, 0.32) 12px 14px);
}

.home-page header,
.home-page main {
  max-width: 1015px;
}

.tuner-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

.tuner-link:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.header-sign-in {
  padding: 0.42rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 72%, white);
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  white-space: nowrap;
}

main {
  max-width: 760px;
  margin: 0 auto;
}

a {
  color: var(--accent-strong);
}

.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.hero {
  margin-top: 1rem;
}

.home-hero {
  margin-top: 2rem;
  padding: 1.85rem clamp(1.2rem, 7vw, 7.4rem);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background:
    radial-gradient(circle at 87% 8%, rgba(167, 139, 250, 0.2), transparent 17rem),
    linear-gradient(120deg, rgba(53, 36, 103, 0.75), var(--bg-alt) 67%);
}

.home-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
}

.home-hero h1 span {
  color: var(--accent-strong);
}

.home-subtitle {
  margin: 0.45rem 0 1.2rem;
  color: color-mix(in srgb, var(--fg) 78%, var(--muted));
}

.home-tip {
  margin-bottom: 0;
}

.hero h1 {
  margin-bottom: 0.25rem;
}

.saved-songs {
  margin: 1.8rem auto 0;
  max-width: 1015px;
}

.saved-songs-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.saved-songs h2 {
  margin: 0;
  font-size: 1.25rem;
}

.saved-songs h2 span {
  color: var(--accent-strong);
  margin-right: 0.35rem;
}

.saved-songs-heading p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.saved-song-count {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 0.8rem;
  white-space: nowrap;
}

.saved-song-library-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.library-filter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.library-filter label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.library-filter select {
  max-width: 10.2rem;
  padding: 0.35rem 1.75rem 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--fg);
  font: inherit;
  font-size: 0.8rem;
}

.saved-song-empty {
  margin: 0.7rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.saved-song-show-all {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.help-improve-callout {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.85rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-alt));
}
.help-improve-callout strong { color: var(--accent-strong); }
.help-improve-callout span { color: var(--muted); font-size: 0.86rem; }
.help-improve-link {
  display: inline-grid;
  gap: 0.08rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-alt));
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
}
.help-improve-link small { color: var(--muted); font-size: 0.68rem; font-weight: 600; }
.help-improve-link:hover,
.help-improve-link.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-alt));
  color: var(--fg);
}

.saved-song {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.4rem 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--bg-alt) 87%, var(--accent)) , var(--bg-alt));
  margin-bottom: 0.28rem;
}

.saved-song:hover {
  border-color: var(--accent);
}

.saved-song-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 0;
  text-decoration: none;
  color: var(--fg);
}

.saved-song form {
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.saved-song-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
}

.saved-song-admin-actions form {
  margin-left: 0;
}

.refresh-song {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 1.15rem;
  line-height: 1;
}

.refresh-song:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.delete-x {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.delete-x:hover {
  background: var(--danger);
  color: #fff;
}

.saved-song-title {
  font-weight: 600;
}

.saved-song-artist {
  color: var(--muted);
  font-size: 0.9rem;
}

.song-library-icon {
  display: inline-flex;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.song-library-icon-global {
  background: linear-gradient(140deg, #4f2dd8, #9b57ed);
}

.song-library-icon-hebrew {
  background: linear-gradient(140deg, #036f70, #37a98b);
  font-family: Arial, sans-serif;
}

.search-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.search-form input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
}

.search-autocomplete {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-autocomplete input {
  width: 100%;
  box-sizing: border-box;
}

.search-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.search-suggestion {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: 100%;
  padding: 0.72rem 0.85rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  text-align: start;
}

.search-suggestion + .search-suggestion {
  border-top: 1px solid var(--border);
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-alt));
}

.search-suggestion-title {
  font-weight: 700;
}

.search-suggestion-artist {
  color: var(--muted);
  font-size: 0.88rem;
}

.search-suggestion-badge {
  margin-inline-start: auto;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.search-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.search-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.85rem 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-alt));
}

.search-progress[hidden] {
  display: none;
}

.search-progress strong {
  display: block;
}

.search-progress p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.search-progress-spinner {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: search-progress-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

.song-opening-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(10, 8, 15, 0.58);
  backdrop-filter: blur(5px);
}

.song-opening-overlay[hidden] { display: none; }

.song-opening-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(28rem, 100%);
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--bg-alt) 94%, var(--accent) 6%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.song-opening-card strong {
  display: block;
  overflow: hidden;
  color: var(--fg);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-opening-card p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.song-opening-spinner {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.68rem;
  border-radius: 13px;
  background: linear-gradient(145deg, #a78bfa, #6d4bef);
  box-shadow: 0 8px 22px rgba(109, 75, 239, 0.28);
}

.song-opening-spinner i {
  width: 0.27rem;
  border-radius: 999px;
  background: #fff;
  animation: song-opening-wave 0.72s ease-in-out infinite alternate;
}

.song-opening-spinner i:nth-child(1) { height: 45%; }
.song-opening-spinner i:nth-child(2) { height: 90%; animation-delay: -0.24s; }
.song-opening-spinner i:nth-child(3) { height: 62%; animation-delay: -0.48s; }
.is-opening-song { cursor: progress; }

@keyframes song-opening-wave {
  from { transform: scaleY(0.45); opacity: 0.65; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .song-opening-spinner i { animation: none; }
}

.song-stars {
  color: #f6c453;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.search-suggestion-stars {
  margin-inline-start: auto;
}

@keyframes search-progress-spin {
  to { transform: rotate(360deg); }
}

button, .button-link {
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-block;
}

button:hover, .button-link:hover {
  background: var(--accent-strong);
}

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

.song-header {
  margin: 1rem 0 1.25rem;
}

.song-header h1 {
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}

.song-section-workspace {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.song-section-nav {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-alt) 90%, var(--accent));
}

.song-section-nav button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: left;
}

.song-section-nav button span {
  width: 1rem;
  color: var(--accent-strong);
  text-align: center;
}

.song-nav-chord-icon {
  width: 2.1rem;
  height: 2.65rem;
  flex: 0 0 auto;
  color: var(--accent-strong);
  overflow: visible;
}

.song-nav-chord-icon text {
  fill: currentColor;
  font-family: system-ui, sans-serif;
  font-size: 7px;
  font-weight: 800;
}

.song-nav-chord-icon .is-open {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.song-nav-fret-grid {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 0.85;
}

.song-nav-fret-grid .song-nav-fret-lines { stroke-width: 1; }
.song-nav-fret-dots { fill: currentColor; }

.song-section-nav button:hover,
.song-section-nav button.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-alt));
  color: var(--fg);
}

.song-section-panel[hidden] {
  display: none;
}

.song-section-content > .song-section-panel > :first-child {
  margin-top: 0;
}

@media (max-width: 680px) {
  .song-section-workspace {
    display: block;
  }

  .song-section-nav {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.85rem;
    padding: 0.35rem;
  }

  .song-section-nav button {
    justify-content: center;
    padding: 0.58rem 0.25rem;
    font-size: 0.68rem;
  }

  .song-section-nav button span {
    display: none;
  }

  .song-section-nav button > .song-nav-chord-icon { display: none; }
}

.youtube-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.youtube-embed iframe,
.youtube-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-embed video {
  background: #000;
  object-fit: contain;
}

.reference-video-card {
  max-width: 68rem;
}
.reference-video-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.reference-video-heading h2 {
  margin: 0.18rem 0 0.35rem;
}
.reference-video-heading .hint {
  margin: 0;
}
.reference-video-heading .button-link {
  flex: 0 0 auto;
}
.reference-youtube-embed {
  margin-bottom: 1rem;
}
.resource-youtube-form {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .reference-video-heading { display: grid; }
  .reference-video-heading .button-link { justify-self: start; }
}

.youtube-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.youtube-form input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--fg);
}

.song-artist {
  color: var(--muted);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.actions form {
  margin: 0;
}

.transpose {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.transpose-value {
  min-width: 1.2em;
  text-align: center;
  color: var(--fg);
  font-weight: 600;
}

.step-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  font-weight: 700;
}

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

.version {
  margin-bottom: 1.25rem;
}

.version-best {
  border-color: var(--best);
}

.canonical-version {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.canonical-badge {
  background: var(--accent);
  color: #fff;
}

.canonical-saved-badge {
  border: 1px solid color-mix(in srgb, var(--best) 55%, var(--border));
  background: color-mix(in srgb, var(--best) 12%, transparent);
  color: var(--best);
}

.canonical-summary {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.canonical-patterns {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.canonical-patterns span {
  display: block;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
  font-size: 0.78rem;
}

.canonical-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0.75rem 0;
}

.canonical-actions form {
  margin: 0;
}

.protected-arrangement-note {
  display: block;
  max-width: 18rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.source-versions-heading {
  margin: 1.7rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.version-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.sheet-song-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.1rem 0 0.85rem;
}

.sheet-song-facts div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0.28rem 0.58rem;
  border: 1px solid rgba(131, 226, 255, 0.22);
  border-radius: 999px;
  background: rgba(20, 16, 48, 0.56);
}

.sheet-song-facts dt {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sheet-song-facts dd {
  margin: 0;
  color: #eefcff;
  font-size: 0.78rem;
  font-weight: 750;
}

.source-version {
  padding: 0;
  overflow: hidden;
}

.source-version-summary {
  min-height: 3.25rem;
  margin: 0;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.source-version-summary::-webkit-details-marker {
  display: none;
}

.source-version-summary:hover,
.source-version-summary:focus-visible {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.source-version-toggle {
  margin-left: auto;
  color: var(--accent-strong);
  font-weight: 750;
}

.source-version-toggle::before {
  content: "Show sheet +";
}

.source-version[open] .source-version-toggle::before {
  content: "Hide sheet −";
}

.source-version-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.source-version-body > .sheet-play-hint {
  margin-top: 0.85rem;
}

.canonical-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.canonical-quick-actions .canonical-rate-form { margin: 0 0 0 0.15rem; }
.canonical-quick-actions .canonical-rate-form label { font-size: 0.75rem; }
.canonical-quick-actions .canonical-rate-form select,
.canonical-quick-actions .canonical-rate-form button { min-height: 2rem; font-size: 0.75rem; }

.canonical-edit-button,
.canonical-save-button {
  min-height: 2rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 750;
}

.canonical-edit-button {
  width: 2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 1.1rem;
}

.canonical-save-button { padding: 0.35rem 0.65rem; }

.source {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.source-link {
  color: var(--accent-strong);
}

.badge {
  background: var(--best);
  color: #08251a;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.chord-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.chord-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.5rem 0.4rem;
  text-decoration: none;
  color: var(--fg);
  min-width: 64px;
}

.chord-chip:hover {
  border-color: var(--accent);
}

.chord-chip-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.chord-svg {
  color: var(--fg);
  width: 68px;
  height: auto;
  display: block;
}

.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.shape-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.shape-card:hover,
.chord-chip:hover {
  border-color: var(--accent);
}

.shape-card .chord-svg {
  width: 100px;
}

.shape-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: rgba(139, 107, 240, 0.12);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.sheet {
  white-space: pre-wrap;
  font-family: "SFMono-Regular", Consolas, monospace;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.9rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.5;
}

.sheet-play-hint {
  margin: 0.25rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.sheet-chord,
.sheet-note {
  display: inline;
  direction: ltr;
  unicode-bidi: isolate;
  appearance: none;
  margin: 0;
  padding: 0 0.08em;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  vertical-align: baseline;
}

.sheet-chord:hover,
.sheet-chord:focus-visible,
.sheet-chord.is-sounding,
.sheet-note:hover,
.sheet-note:focus-visible,
.sheet-note.is-sounding {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--fg);
  outline: none;
}

.sheet-no-chord {
  color: color-mix(in srgb, var(--muted) 82%, white);
  font-style: italic;
}

.rate-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.rate-form select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
}

.sheet-editor {
  margin-top: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
}
.sheet-editor > summary {
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 750;
}
.sheet-editor form { padding: 0 0.85rem 0.85rem; }
.sheet-editor label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.sheet-editor textarea {
  width: 100%;
  min-height: 22rem;
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font: 0.86rem/1.45 Consolas, "Courier New", monospace;
  white-space: pre;
  tab-size: 2;
}

.sheet-editor textarea.is-rtl-editor {
  direction: rtl;
  text-align: right;
}
.sheet-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.65rem;
}
.sheet-editor-actions span {
  color: var(--muted);
  font-size: 0.76rem;
}
.sheet-editor-actions button { flex: 0 0 auto; }

.chord-listener {
  margin-bottom: 1.2rem;
  border-color: var(--practice-line);
  background: var(--practice-panel);
  color: #fff;
}
.chord-listener h2 { margin: 0.25rem 0 0.35rem; color: #fff; }
.chord-listener .hint { margin-top: 0; color: rgba(255, 255, 255, 0.66); }
.listen-chooser, .listen-active {
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.listen-chooser p { margin: 0 0 0.7rem; color: rgba(255, 255, 255, 0.78); }
.listen-start-section { display: grid; gap: 0.28rem; max-width: 22rem; margin: 0 0 0.75rem; color: rgba(255,255,255,0.74); font-size: 0.78rem; }
.listen-start-section select,
.listen-pattern-review select { min-height: 2.35rem; border: 1px solid rgba(148,117,255,0.55); border-radius: 8px; background: #f3efff; color: #17143c; padding: 0.4rem 0.55rem; }
.listen-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.listen-active { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.65rem; }
.listen-active output { font-variant-numeric: tabular-nums; color: var(--practice-gold); font-weight: 800; }
.listen-dot { color: #40e5a6; animation: chord-listening-pulse 1.2s ease-in-out infinite; }
.listen-meter { grid-column: 1 / -1; height: 0.5rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.listen-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--practice-teal), var(--practice-gold)); transition: width 70ms linear; }
.listen-active button { grid-column: 1 / -1; justify-self: start; }
.listen-results { margin-top: 0.8rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.65rem; background: rgba(0, 0, 0, 0.18); }
.listen-result-primary { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 0.6rem; }
.listen-result-primary span, .listen-sheet-match span, .listen-candidate-list > span, .listen-timeline > span { color: rgba(255, 255, 255, 0.62); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.listen-result-primary strong { color: #fff; font-size: 1.4rem; }
.listen-result-primary small { color: var(--practice-gold); font-weight: 800; }
.listen-sheet-match { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.listen-sheet-match strong { color: rgba(255, 255, 255, 0.92); }
.listen-sheet-match small { color: rgba(255, 255, 255, 0.67); }
.listen-candidate-list, .listen-timeline { margin-top: 0.75rem; }
.listen-candidate-list ul, .listen-timeline ol { margin: 0.35rem 0 0; padding-left: 1.15rem; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.listen-candidate-list li, .listen-timeline li { margin: 0.16rem 0; }
.listen-timeline ol { max-height: 9rem; overflow-y: auto; }
.listen-debug-toggle { display: block; margin-top: 0.8rem; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; }
.listen-results pre { max-height: 16rem; overflow: auto; margin: 0.6rem 0 0; padding: 0.65rem; border-radius: 0.45rem; background: rgba(0, 0, 0, 0.3); color: #d9f8ee; font-size: 0.72rem; white-space: pre-wrap; }
.listen-evaluation { margin-top: 0.8rem; padding: 0.8rem; border: 1px dashed rgba(255, 209, 102, 0.48); border-radius: 0.65rem; background: rgba(255, 209, 102, 0.06); }
.listen-evaluation .hint { margin: 0.3rem 0 0.7rem; }
.listen-evaluation-mark { display: flex; align-items: end; flex-wrap: wrap; gap: 0.5rem; }
.listen-evaluation-mark label { display: grid; gap: 0.25rem; color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; }
.listen-evaluation-mark select { min-width: 6rem; }
.listen-evaluation-status { margin: 0.65rem 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; }
.listen-evaluation-summary { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.listen-evaluation-summary p { margin: 0.32rem 0; color: rgba(255, 255, 255, 0.83); font-size: 0.82rem; }
.listen-message { min-height: 1.3rem; margin: 0.65rem 0 0; color: rgba(255, 255, 255, 0.67); font-size: 0.84rem; }
.listen-suggestion {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid rgba(145,107,255,0.68);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, rgba(30,25,91,0.9), rgba(9,11,48,0.93));
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 12px 30px rgba(3,2,31,0.28);
}
.listen-suggestion-heading { display: flex; align-items: end; justify-content: space-between; gap: 0.8rem; }
.listen-suggestion-heading h3 { margin: 0.15rem 0 0; color: #fff; }
.listen-suggestion-heading > span { color: #bda8ff; font-size: 0.74rem; font-weight: 750; }
.listen-pattern-review { display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(10rem, 0.7fr) auto; align-items: end; gap: 0.6rem; margin-top: 0.8rem; }
.listen-pattern-review > div,
.listen-pattern-review label { display: grid; gap: 0.28rem; color: rgba(238,232,255,0.72); font-size: 0.7rem; }
.listen-pattern-review output { overflow-x: auto; color: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; white-space: nowrap; }
.listen-pattern-review [data-listen-timing-output] { color: #75e8ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.67rem; line-height: 1.45; }
.listen-pattern-status { margin: 0.65rem 0 0; color: rgba(230,223,255,0.68); font-size: 0.76rem; }
.listen-row-comparisons { display: grid; gap: 0.55rem; margin-top: 0.8rem; }
.listen-row-comparison { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(12rem, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.7rem; border: 1px solid rgba(255,255,255,0.11); border-radius: 10px; background: rgba(14,14,59,0.56); }
.listen-row-comparison strong { color: #c9b9ff; font-size: 0.72rem; }
.listen-row-comparison p { margin: 0.22rem 0 0; color: rgba(255,255,255,0.88); font-size: 0.82rem; }
.listen-comparison-choices { display: flex; flex-wrap: wrap; gap: 0.55rem; color: rgba(246,242,255,0.85); font-size: 0.76rem; }
.listen-detected-pattern { flex-basis: 100%; color: #75e8ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.68rem; }
.listen-comparison-actions { display: flex; gap: 0.35rem; }
.listen-comparison-actions button { min-height: 2rem; padding: 0.35rem 0.5rem; font-size: 0.7rem; }
.listen-comparison-empty { margin: 0; color: rgba(232,225,255,0.64); }
@keyframes chord-listening-pulse { 50% { opacity: 0.35; } }

@media (max-width: 560px) {
  .listen-pattern-review,
  .listen-row-comparison { grid-template-columns: 1fr; align-items: stretch; }
  .listen-comparison-actions { flex-wrap: wrap; }
  .sheet-editor-actions { align-items: stretch; flex-direction: column; }
  .version-header { gap: 0.45rem; }
}

.new-version-form textarea {
  width: 100%;
  font-family: Consolas, monospace;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  margin-bottom: 0.75rem;
}

.empty {
  color: var(--muted);
}

.suggestions {
  padding-left: 1.25rem;
}

.suggestions li {
  margin-bottom: 0.35rem;
}

.artist {
  color: var(--muted);
  font-weight: 400;
}

[data-confirm-search].is-searching {
  opacity: 0.72;
  cursor: wait;
  pointer-events: none;
}

.confirm-search-status { margin-bottom: 0; }

.notice {
  border: 1px solid;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
}

.notice-success {
  color: var(--best);
  border-color: var(--best);
  background: rgba(52, 211, 153, 0.08);
}

.notice-error {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.08);
}

.ai-playback-setup {
  margin-bottom: 1rem;
  border-color: rgba(139, 107, 240, 0.5);
}

.ai-playback-copy h2 {
  margin: 0.2rem 0 0;
}

.media-name {
  color: var(--fg);
  font-size: 0.85rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.media-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.media-upload-form input[type="file"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.55rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.reanalyze-form {
  margin-top: 0.65rem;
}

.youtube-option {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.youtube-option summary {
  cursor: pointer;
  font-size: 0.9rem;
}

.youtube-option .youtube-form {
  margin: 0.75rem 0 0.4rem;
}

.optional-label {
  font-size: 0.76rem;
  font-weight: 500;
  opacity: 0.8;
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.playback-card {
  margin: -0.5rem 0 1.5rem;
  border-color: rgba(139, 107, 240, 0.65);
  overflow: hidden;
}

.playback-heading,
.sync-status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.playback-chord,
.sync-current-chord {
  color: var(--accent-strong);
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  font-weight: 850;
  letter-spacing: -0.06em;
  line-height: 1;
  margin-top: 0.25rem;
}

.playback-next {
  min-width: 5rem;
  text-align: right;
}

.playback-next strong {
  display: block;
  font-size: 1.5rem;
  margin-top: 0.2rem;
}

.playback-progress {
  height: 4px;
  margin: 1rem 0;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.playback-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.1s linear;
}

.playback-sequence {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.4rem;
  scrollbar-width: thin;
}

.guitar-playback-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 1rem 0 0.55rem;
  padding: 0.85rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
}

.playback-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.playback-mode {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
}

.playback-mode:hover,
.playback-mode.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.current-stroke {
  margin-left: auto;
  min-width: 7.5rem;
  color: var(--accent-strong);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: right;
}

.current-stroke.is-strumming {
  animation: strum-pulse 180ms ease-out;
}

@keyframes strum-pulse {
  from { transform: scale(1.12); filter: brightness(1.35); }
  to { transform: scale(1); filter: brightness(1); }
}

.playback-disclaimer {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.playback-event {
  min-width: 3.1rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  flex: 0 0 auto;
}

.playback-event.is-past {
  color: var(--fg);
}

.playback-event.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent-strong);
  transform: scale(1.06);
}

.chord-chip.is-playing {
  border-color: var(--accent-strong);
  background: rgba(139, 107, 240, 0.2);
  box-shadow: 0 0 0 2px rgba(139, 107, 240, 0.25);
}

.playback-action {
  background: var(--best);
  color: #08251a;
}

.playback-action:hover {
  background: #5ee0ad;
}

.sync-console {
  position: sticky;
  top: 0.5rem;
  z-index: 2;
  margin-bottom: 1.5rem;
  border-color: rgba(139, 107, 240, 0.65);
}

.sync-counter {
  color: var(--muted);
  font-size: 1rem;
  white-space: nowrap;
}

.sync-counter strong {
  color: var(--fg);
  font-size: 1.4rem;
}

.mark-chord-button {
  display: block;
  width: 100%;
  min-height: 4.25rem;
  margin-top: 1.1rem;
  font-size: 1.15rem;
  background: var(--accent);
}

.mark-chord-button span {
  font-variant-numeric: tabular-nums;
}

.sync-key-hint {
  margin: 0.55rem 0 1rem;
  text-align: center;
}

.sync-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.secondary-button {
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
}

.secondary-button:hover {
  background: var(--border);
}

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

button.is-saving:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sync-message {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
  color: var(--best);
  font-size: 0.9rem;
}

.sync-message.is-error {
  color: var(--danger);
}

.recorded-section h2 {
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recorded-events {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.recorded-event {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--fg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0.4rem 0.65rem;
}

.recorded-event:hover {
  border-color: var(--accent);
  background: var(--bg-alt);
}

.recorded-event time {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .youtube-form {
    flex-wrap: wrap;
  }

  .youtube-form input,
  .youtube-search-link {
    flex-basis: 100%;
  }

  .sync-controls > * {
    flex: 1 1 auto;
  }

  .playback-modes {
    width: 100%;
  }

  .playback-mode {
    flex: 1 1 auto;
  }

  .current-stroke {
    margin-left: 0;
    text-align: left;
  }
}

/* Premium practice page --------------------------------------------------- */
.practice-page {
  --practice-bg: #080c0e;
  --practice-panel: #101517;
  --practice-panel-2: #151a1c;
  --practice-line: rgba(255, 255, 255, 0.11);
  --practice-gold: #f4a62a;
  --practice-gold-soft: #a96516;
  --practice-teal: #28d7c1;
  color: #f7f5ef;
  background:
    radial-gradient(circle at 78% 5%, rgba(146, 79, 17, 0.32), transparent 25rem),
    radial-gradient(circle at 20% 52%, rgba(18, 103, 101, 0.12), transparent 24rem),
    var(--practice-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 30px;
  margin: 0.5rem 0 2rem;
  padding: 1.15rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.practice-page.is-rtl .practice-title {
  direction: rtl;
  text-align: right;
}

.practice-page.is-rtl .hero-progression {
  direction: rtl;
}

.practice-page.is-rtl .hero-progression button {
  direction: ltr;
  unicode-bidi: isolate;
}

.practice-page.is-rtl .playback-sequence {
  direction: rtl;
}

.practice-page.is-rtl .playback-event {
  direction: ltr;
  unicode-bidi: isolate;
}

.practice-page.is-rtl .karaoke-stage {
  direction: rtl;
  text-align: right;
}

.practice-page.is-rtl .karaoke-line-chords {
  direction: rtl;
  justify-content: flex-start;
}

.practice-page.is-rtl .karaoke-line-chords button {
  direction: ltr;
  unicode-bidi: isolate;
}

.sheet-line {
  display: block;
  min-height: 1.5em;
}

.sheet-section,
.sheet-line-section {
  display: block;
  min-height: 1.5em;
  margin-top: 1.5em;
  font-weight: 750;
}

.practice-page .sheet-section,
.practice-page .sheet-line-section,
.karaoke-section-label {
  color: #6ff0a4;
}
.sheet-playback-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin: 0.75rem 0; }
.sheet-playback-controls span { color: rgba(255,255,255,.62); font-size: .78rem; }
.sheet-line-chords.is-playing { background: rgba(107, 185, 255, 0.1); border-radius: 6px; }
.sheet-chord.is-playing,
.sheet-note.is-playing { background: #fff; color: #171123; box-shadow: 0 0 0 3px rgba(107,185,255,.72), 0 0 18px rgba(107,185,255,.6); }
.karaoke-section-label.is-chorus { color: #ff6b70; }
.karaoke-section-label.is-bridge { color: #55d7e8; }
.karaoke-section-label.is-intro { color: #f4a64c; }
.karaoke-section-label.is-outro { color: #a879ff; }
.practice-page .sheet-section.is-verse,
.practice-page .sheet-line-section.is-verse { color: #58d39b; }
.practice-page .sheet-section.is-chorus,
.practice-page .sheet-line-section.is-chorus { color: #ff6b70; }
.practice-page .sheet-section.is-bridge,
.practice-page .sheet-line-section.is-bridge { color: #55d7e8; }
.practice-page .sheet-section.is-intro,
.practice-page .sheet-line-section.is-intro { color: #f4a64c; }
.practice-page .sheet-section.is-outro,
.practice-page .sheet-line-section.is-outro { color: #a879ff; }

.karaoke-section-label {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sheet > .sheet-section:first-child,
.sheet > .sheet-line-section:first-child {
  margin-top: 0;
}

.sheet.is-rtl {
  text-align: right;
}

.sheet.is-rtl .sheet-line-chords,
.sheet.is-rtl .sheet-line-text {
  direction: rtl;
  text-align: right;
}

.sheet.is-rtl .sheet-line-tab {
  direction: ltr;
  text-align: left;
}

.song-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.round-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--practice-line);
  border-radius: 50%;
  color: #f7f5ef;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.2);
}

.practice-brand {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.practice-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  margin-bottom: 1rem;
}

.song-art {
  position: relative;
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(244, 166, 42, 0.7);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(244, 166, 42, 0.55), transparent 55%),
    radial-gradient(circle at 60% 35%, #805314, #15110d 62%, #090b0c);
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.45), 0 15px 30px rgba(0, 0, 0, 0.35);
}

.song-art span {
  position: relative;
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: #ffd277;
  text-shadow: 0 4px 18px #000;
}

.song-art i {
  position: absolute;
  bottom: 18px;
  width: 3px;
  border-radius: 4px;
  background: var(--practice-gold);
  opacity: 0.65;
}
.song-art i:nth-of-type(1) { height: 18px; transform: translateX(-24px); }
.song-art i:nth-of-type(2) { height: 34px; transform: translateX(-12px); }
.song-art i:nth-of-type(3) { height: 48px; }
.song-art i:nth-of-type(4) { height: 30px; transform: translateX(12px); }
.song-art i:nth-of-type(5) { height: 15px; transform: translateX(24px); }

.practice-title h1 {
  margin: 0.18rem 0 0.15rem;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.song-title-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.song-title-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  margin: 0;
  padding: 0.18rem 0.32rem;
  border: 1px solid rgba(246, 189, 72, 0.32);
  border-radius: 999px;
  background: rgba(246, 189, 72, 0.07);
  direction: ltr;
}
.song-title-rating button {
  min-width: 1.25rem;
  min-height: 1.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 225, 160, 0.5);
  font-size: 1.08rem;
  line-height: 1;
}
.song-title-rating span {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  min-height: 1.45rem;
  color: rgba(255, 225, 160, 0.5);
  font-size: 1.08rem;
  line-height: 1;
}
.song-title-rating span.is-filled { color: #f6bd48; }
.song-title-rating button.is-filled,
.song-title-rating button:hover,
.song-title-rating button:focus-visible {
  color: #f6bd48;
}
.song-title-rating button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.song-title-suggest {
  min-height: 1.55rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(170, 132, 255, 0.55);
  border-radius: 999px;
  background: rgba(106, 72, 194, 0.28);
  color: #e9ddff;
  font-size: 0.63rem;
  font-weight: 750;
  white-space: nowrap;
}
.song-title-suggest:hover:not(:disabled) {
  border-color: rgba(210, 188, 255, 0.88);
  background: rgba(126, 83, 226, 0.42);
}
.song-rating-summary {
  color: rgba(232, 227, 255, 0.72);
  font-size: 0.72rem;
  white-space: nowrap;
}

.practice-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.05rem;
}

.practice-page .eyebrow,
.section-kicker {
  color: var(--practice-gold);
}

.song-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.song-facts div {
  padding: 0 0.8rem;
  border-left: 1px solid var(--practice-line);
}
.song-facts div:first-child { padding-left: 0; border-left: 0; }
.song-facts dt { color: rgba(255, 255, 255, 0.48); font-size: 0.7rem; }
.song-facts dd { margin: 0.15rem 0 0; color: #fff; font-size: 0.88rem; font-weight: 750; }

.progression-card {
  position: relative;
  overflow: hidden;
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(244, 166, 42, 0.23);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.035), rgba(244, 166, 42, 0.08));
}

.progression-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 16rem;
  height: 8rem;
  border: 1px solid rgba(244, 166, 42, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(244, 166, 42, 0.12);
}

.section-kicker {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-progression {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
  margin-top: 0.7rem;
}

.hero-progression button {
  min-width: 2rem;
  padding: 0.2rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.2rem;
}
.hero-progression span { color: var(--practice-gold-soft); }
.progression-card > p { margin: 0.55rem 0 0; color: rgba(255, 255, 255, 0.43); font-size: 0.72rem; }

.practice-player.card {
  margin-bottom: 1.15rem;
  padding: 0;
  overflow: hidden;
  border-color: var(--practice-line);
  border-radius: 18px;
  background: rgba(10, 15, 17, 0.94);
  color: #fff;
}

.practice-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--practice-line);
}
.practice-tabs:has(button:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.practice-tabs button {
  padding: 0.9rem 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.practice-tabs button.is-active {
  color: #ffc256;
  background: linear-gradient(to top, rgba(244, 166, 42, 0.24), rgba(244, 166, 42, 0.04));
  box-shadow: inset 0 -2px var(--practice-gold);
}

.practice-player audio {
  display: block;
  width: calc(100% - 2rem);
  height: 42px;
  margin: 0.8rem 1rem 0;
  filter: sepia(0.25) saturate(0.8);
}

.virtual-practice-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.9rem 1rem 0;
}
.virtual-practice-controls-after-karaoke { margin: 0 1rem 0.9rem; }
.virtual-practice-controls span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
}
.virtual-practice-controls button {
  padding: 0.55rem 0.9rem;
}
.virtual-practice-controls .virtual-play-toggle {
  min-width: 5.4rem;
  background: var(--practice-teal);
  color: #06100f;
  font-weight: 850;
}
.virtual-practice-controls .karaoke-play-toggle {
  background: var(--practice-teal);
  color: #06100f;
  font-weight: 850;
}
.virtual-practice-controls .secondary-button {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.picking-editor {
  margin: 0.8rem 1rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.picking-editor summary { cursor: pointer; color: #ffc256; font-weight: 800; }
.picking-editor[open] summary { margin-bottom: 0.8rem; }
.picking-editor-intro { margin: 0 0 0.8rem; color: rgba(255, 255, 255, 0.68); font-size: 0.8rem; line-height: 1.45; }
.picking-editor-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.55rem; }
.picking-editor label { display: grid; gap: 0.25rem; color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; font-weight: 750; }
.picking-editor select { width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; padding: 0.42rem; color: #fff; background: #1b2225; }
.picking-palette { display: flex; flex-wrap: wrap; gap: 0.42rem; margin: 0.85rem 0 0.6rem; }
.picking-palette button, .picking-slot { min-width: 2.35rem; min-height: 2.35rem; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 8px; color: #fff; background: #1b2225; font-weight: 850; }
.picking-palette button small { color: rgba(255, 255, 255, 0.56); font-size: 0.58rem; font-weight: 700; }
.picking-palette button.is-selected { border-color: var(--practice-teal); background: rgba(40, 215, 193, 0.2); color: #a7fff3; }
.picking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.45rem; }
.picking-beat { min-width: 0; padding: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; background: rgba(0, 0, 0, 0.14); }
.picking-beat.is-split { border-color: rgba(40, 215, 193, 0.42); }
.picking-beat-header { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.3rem; color: rgba(255, 255, 255, 0.57); font-size: 0.63rem; font-weight: 800; }
.picking-split-button { border: 0; padding: 0.14rem 0.25rem; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: #a7fff3; font-size: 0.62rem; font-weight: 800; }
.picking-beat-actions { display: grid; gap: 0.25rem; }
.picking-slot { min-width: 0; background: rgba(244, 166, 42, 0.16); color: #ffd78d; }
.picking-slot.is-rest { background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.4); }
.picking-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.75rem; }
.picking-editor-actions output { overflow: hidden; color: #a7fff3; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.picking-editor-actions button { padding: 0.48rem 0.7rem; background: var(--practice-teal); color: #06100f; font-size: 0.78rem; font-weight: 850; }
.picking-preview-row { margin-top: 0.65rem; }
.picking-preview-button { padding: 0.45rem 0.68rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.78rem; font-weight: 800; }
@media (max-width: 560px) {
  .picking-editor-controls { grid-template-columns: 1fr 1fr; }
  .picking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.waveform-stage {
  position: relative;
  height: 74px;
  margin: 0.8rem 1rem 0;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(40, 215, 193, 0.8), rgba(40, 215, 193, 0.4) 45%, rgba(244, 166, 42, 0.45) 55%, rgba(244, 117, 42, 0.85)),
    repeating-linear-gradient(90deg, transparent 0 3px, #071012 3px 6px);
  mask: repeating-linear-gradient(90deg, transparent 0 2px, #000 2px 4px, transparent 4px 6px), linear-gradient(to bottom, transparent 2%, #000 30%, #000 70%, transparent 98%);
  opacity: 0.88;
}

.waveform-stage::before,
.waveform-stage::after {
  content: "";
  position: absolute;
  inset: 18% 0;
  background: var(--practice-bg);
  clip-path: polygon(0 45%, 4% 25%, 8% 55%, 12% 18%, 16% 64%, 20% 25%, 24% 70%, 28% 30%, 32% 60%, 36% 12%, 40% 75%, 44% 35%, 48% 62%, 52% 20%, 56% 72%, 60% 32%, 64% 68%, 68% 18%, 72% 78%, 76% 35%, 80% 65%, 84% 28%, 88% 74%, 92% 40%, 96% 60%, 100% 45%, 100% 100%, 0 100%);
  opacity: 0.56;
}
.waveform-stage::after { transform: scaleY(-1); }
.waveform-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, 0.16); }
.waveform-playhead { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; }

.player-time-row {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 1rem 0;
  color: rgba(255, 255, 255, 0.47);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.practice-speed-control {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) 3rem auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 1rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}
.practice-speed-control label { font-weight: 750; }
.practice-speed-control input { width: 100%; accent-color: var(--practice-gold); }
.practice-speed-control output {
  color: var(--practice-gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.practice-speed-control button {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.72rem;
}
@media (max-width: 560px) {
  .practice-speed-control {
    grid-template-columns: auto 1fr 3rem;
  }
  .practice-speed-control button { grid-column: 1 / -1; justify-self: end; }
  .virtual-practice-controls { flex-wrap: wrap; }
  .virtual-practice-controls span { flex-basis: 100%; }
}
.practice-player .playback-progress { margin: 0.45rem 1rem 0; background: rgba(255, 255, 255, 0.08); }

.practice-panel { display: none; padding: 1rem; }
.practice-panel.is-active { display: block; }

.karaoke-stage {
  min-height: 195px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--practice-line);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 50%, rgba(40, 215, 193, 0.07), transparent 65%);
  text-align: center;
}
.karaoke-stage p { margin: 0.35rem 0; }
.karaoke-previous, .karaoke-next { min-height: 1.3em; color: rgba(255, 255, 255, 0.46); font-size: 0.95rem; }
.karaoke-current { color: #fff; font-family: Georgia, serif; font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.25; }
.karaoke-up-next { margin-top: 0.3rem; min-height: 3.8rem; }
.karaoke-up-next-label { display: block; margin-bottom: 0.1rem; color: rgba(244, 166, 42, 0.62); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.karaoke-pattern {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem;
  min-height: 1.45rem;
  width: fit-content;
  margin-inline: auto;
  padding: 0.22rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--practice-gold);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.karaoke-pattern:hover, .karaoke-pattern:focus-visible { border-color: rgba(244, 166, 42, 0.55); background: rgba(244, 166, 42, 0.1); }
.karaoke-pattern[hidden] { display: none; }
.karaoke-pattern small { color: rgba(255, 255, 255, 0.58); font-size: 0.76rem; font-weight: 500; letter-spacing: normal; text-transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.karaoke-line-chords { display: flex; justify-content: center; align-items: center; gap: 0.32rem; min-height: 2rem; flex-wrap: wrap; }
.karaoke-bar-mark { color: rgba(244, 166, 42, 0.48); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.karaoke-line-chords button {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(244, 166, 42, 0.35);
  background: rgba(244, 166, 42, 0.06);
  color: rgba(255, 210, 119, 0.58);
  font-family: Georgia, serif;
}
.karaoke-line-chords button.is-active { color: #08100f; background: var(--practice-teal); border-color: var(--practice-teal); }
.karaoke-next-chords { min-height: 1.65rem; gap: 0.22rem; }
.karaoke-next-chords .karaoke-bar-mark { color: rgba(244, 166, 42, 0.3); font-size: 1rem; }
.karaoke-next-chords button { padding: 0.14rem 0.36rem; border-color: rgba(244, 166, 42, 0.23); color: rgba(255, 210, 119, 0.48); font-size: 0.88rem; }

.tab-preview-heading { display: flex; justify-content: space-between; color: var(--practice-gold); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.tab-preview-heading small { color: rgba(255, 255, 255, 0.4); font-weight: 500; text-transform: none; }
.chord-shape-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.45rem 0.8rem; text-align: right; }
.fretboard-guide-link {
  color: var(--practice-teal, #4fd1c5);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(79, 209, 197, 0.45);
  text-underline-offset: 0.18em;
  text-transform: none;
}
.fretboard-guide-link:hover { color: #fff; text-decoration-color: currentColor; }
.fretboard-guide-row { margin: -0.35rem 0 1rem; }
.player-chord-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-top: 1rem; }
.player-chord-shape { display: flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; }
.player-chord-shape strong { color: #fff; font-family: Georgia, serif; font-size: 1.1rem; }
.player-chord-shape:first-child strong { color: var(--practice-teal); }
.player-chord-shape .chord-svg { width: 100%; max-width: 105px; }
.chord-shapes-card {
  margin: 1rem 0;
  border-color: var(--practice-line);
  background: var(--practice-panel);
  color: #fff;
}
.complete-chord-grid {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}
.chord-shapes-card button.player-chord-shape,
.practice-panel button.player-chord-shape {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.compact-playing { padding: 0.7rem 1rem 0; }
.compact-playing .playback-chord { font-size: 2.5rem; color: var(--practice-gold); }
.practice-player .guitar-playback-controls { margin: 0.8rem 1rem 0.45rem; background: rgba(255, 255, 255, 0.025); }
.practice-player .playback-disclaimer { margin: 0 1rem 0.8rem; }
.practice-player .playback-sequence { margin: 0 1rem 1rem; }
.practice-player .playback-event.is-active { background: var(--practice-teal); border-color: var(--practice-teal); color: #06100f; }

.song-settings {
  margin-bottom: 1.2rem;
  border-color: var(--practice-line);
  background: var(--practice-panel);
  color: #fff;
}
.song-settings > summary { cursor: pointer; color: rgba(255, 255, 255, 0.72); font-weight: 750; }
.song-settings .ai-playback-setup { border: 0; padding: 1rem 0 0; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; }

.song-guidance {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(40, 215, 193, 0.24);
  border-radius: 16px;
  background: rgba(40, 215, 193, 0.055);
}
.song-guidance > strong { color: #fff; }
.song-guidance > p,
.song-guidance > small { margin: 0; color: rgba(255, 255, 255, 0.68); }
.guidance-patterns { display: grid; gap: 0.45rem; }
.guidance-sources { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; }
.guidance-patterns span {
  display: block;
  padding: 0.35rem 0.55rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
}
.guidance-sources a { color: var(--practice-teal); }

.practice-page .version.card { border-color: var(--practice-line); background: var(--practice-panel); color: #fff; }
.practice-page .version-best { border-color: rgba(40, 215, 193, 0.5); }
.practice-page .canonical-version {
  border-color: rgba(244, 166, 42, 0.7);
  background: linear-gradient(135deg, rgba(244, 166, 42, 0.13), rgba(16, 21, 23, 0.96) 45%), var(--practice-panel);
  box-shadow: inset 0 1px rgba(255, 220, 147, 0.14), 0 16px 34px rgba(0, 0, 0, 0.2);
}
.practice-page .canonical-summary { color: rgba(255, 255, 255, 0.6); }
.practice-page .canonical-patterns span { color: #fff; border-color: rgba(244, 166, 42, 0.35); background: rgba(244, 166, 42, 0.07); }
.practice-page .sheet { background: #080c0e; color: #eae8e3; border-color: var(--practice-line); }

@media (max-width: 620px) {
  .practice-page { margin-inline: -0.55rem; padding: 0.8rem; border-radius: 22px; }
  .practice-hero { grid-template-columns: 96px 1fr; }
  .song-art { width: 96px; }
  .song-art span { font-size: 3rem; }
  .song-facts { grid-column: 1 / -1; }
  .song-facts div { padding-inline: 0.55rem; }
  .song-facts dd { font-size: 0.78rem; }
  .hero-progression { gap: 0.35rem; }
  .player-chord-grid { grid-template-columns: repeat(2, 1fr); }
  .current-stroke { width: 100%; }
}

/* Violet song-page palette ------------------------------------------------ */
.practice-page {
  --practice-bg: #0c0a1a;
  --practice-panel: #121027;
  --practice-panel-2: #1a1637;
  --practice-line: rgba(177, 142, 255, 0.24);
  --practice-gold: #f6bd48;
  --practice-gold-soft: #b7791f;
  --practice-teal: #c4b5fd;
  color: #f7f5ff;
  background:
    radial-gradient(circle at 78% 5%, rgba(124, 92, 255, 0.28), transparent 25rem),
    radial-gradient(circle at 20% 52%, rgba(167, 139, 250, 0.13), transparent 24rem),
    var(--practice-bg);
}

.practice-page .song-art {
  border-color: rgba(167, 139, 250, 0.78);
  background:
    linear-gradient(145deg, rgba(167, 139, 250, 0.62), transparent 55%),
    radial-gradient(circle at 60% 35%, #5132a9, #17112f 62%, #0c0a1a);
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.45), 0 15px 30px rgba(27, 12, 71, 0.45);
}

.practice-page .song-art span { color: #e4dcff; }
.practice-page .practice-player.card { background: rgba(18, 16, 39, 0.96); }
.practice-page .practice-tabs button.is-active {
  color: #ffe1a0;
  background: linear-gradient(to top, rgba(246, 189, 72, 0.28), rgba(246, 189, 72, 0.04));
}
.practice-page .virtual-practice-controls .virtual-play-toggle,
.practice-page .picking-editor-actions button { color: #160d32; }
.practice-page .picking-editor summary { color: #ded2ff; }
.practice-page .picking-editor select,
.practice-page .picking-palette button,
.practice-page .picking-slot { border-color: rgba(199, 178, 255, 0.24); background: #1c1738; }
.practice-page .picking-palette button.is-selected { background: rgba(196, 181, 253, 0.2); color: #f0ebff; }
.practice-page .picking-slot { background: rgba(124, 92, 255, 0.2); color: #dfd5ff; }
.practice-page .picking-editor-actions output,
.practice-page .picking-split-button { color: #eee9ff; }
.practice-page .waveform-stage {
  background:
    linear-gradient(90deg, rgba(117, 79, 242, 0.85), rgba(167, 139, 250, 0.5) 45%, rgba(246, 189, 72, 0.65) 55%, rgba(255, 204, 91, 0.92)),
    repeating-linear-gradient(90deg, transparent 0 3px, #0d0a20 3px 6px);
}
.practice-page .karaoke-stage { background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.17), transparent 65%); }
.practice-page .karaoke-up-next-label { color: rgba(211, 188, 255, 0.74); }
.practice-page .karaoke-bar-mark { color: rgba(185, 160, 255, 0.6); }
.practice-page .karaoke-line-chords button { border-color: rgba(167, 139, 250, 0.42); background: rgba(124, 92, 255, 0.1); color: rgba(230, 221, 255, 0.72); }
.practice-page .karaoke-next-chords button { border-color: rgba(167, 139, 250, 0.27); color: rgba(220, 209, 255, 0.56); }
.practice-page .karaoke-line-chords button.is-active,
.practice-page .playback-event.is-active { color: #160d32; }
.practice-page .song-guidance { border-color: rgba(167, 139, 250, 0.35); background: rgba(124, 92, 255, 0.1); }
.practice-page .version-best { border-color: rgba(196, 181, 253, 0.62); }
.practice-page .canonical-version {
  border-color: rgba(167, 139, 250, 0.78);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.23), rgba(18, 16, 39, 0.96) 45%), var(--practice-panel);
  box-shadow: inset 0 1px rgba(222, 210, 255, 0.16), 0 16px 34px rgba(12, 6, 35, 0.32);
}
.practice-page .canonical-patterns span { border-color: rgba(167, 139, 250, 0.44); background: rgba(124, 92, 255, 0.12); }
.practice-page .sheet { background: #0c0a1a; color: #f0edff; }

.hero-edit-sheet {
  margin: 0.7rem 0 0 0.35rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(199, 178, 255, 0.28);
  background: rgba(124, 92, 255, 0.1);
  color: #ded2ff;
  font-size: 0.78rem;
}

.hero-edit-sheet:hover { border-color: #c4b5fd; background: rgba(124, 92, 255, 0.24); color: #fff; }

.transport-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  min-width: 3.4rem !important;
  height: 3.4rem;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #eee9ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(139, 92, 246, 0.08);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.transport-icon-button:hover,
.transport-icon-button:focus-visible {
  border-color: rgba(196, 181, 253, 0.72) !important;
  background: rgba(124, 92, 255, 0.2) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 0 18px rgba(139, 92, 246, 0.28);
  transform: translateY(-1px);
}

.transport-icon {
  display: block;
  width: 1.9rem;
  height: 1.55rem;
  overflow: visible;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.42));
}

.transport-icon text {
  fill: currentColor;
  font: 800 10px/1 system-ui, sans-serif;
}

.transport-icon .transport-seek-number {
  font-size: 14px;
  font-weight: 950;
  text-anchor: middle;
}

.transport-pause-shape { display: none; }
.transport-icon-button.is-playing .transport-play-shape { display: none; }
.transport-icon-button.is-playing .transport-pause-shape { display: initial; }

.karaoke-play-toggle.transport-icon-button .transport-icon {
  width: 2.15rem;
  height: 1.8rem;
}

.virtual-practice-controls .karaoke-play-toggle.transport-icon-button {
  border: 1px solid #c4b5fd;
  background: radial-gradient(circle at 35% 25%, #c4b5fd, #7c5cff 72%);
  color: #160d32;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.42);
}

.transport-icon-button:disabled { opacity: 0.65; cursor: wait; }

.song-page main {
  max-width: 1180px;
}

.hero-download-sheet {
  display: inline-flex;
  align-items: center;
  margin: 0.7rem 0 0;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(199, 178, 255, 0.28);
  border-radius: 10px;
  color: #ded2ff;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.hero-download-sheet:hover {
  border-color: #c4b5fd;
  background: rgba(124, 92, 255, 0.16);
  color: #fff;
}

#song-section-practice.has-chord-queue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
  gap: 1rem;
  align-items: start;
}

#song-section-practice.has-strumming-pattern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
  gap: 1rem;
  align-items: start;
}

#song-section-practice.has-strumming-pattern .practice-player.card {
  margin-bottom: 0;
}

.strumming-pattern-rail {
  display: grid;
  align-content: center;
  gap: 1rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 16px;
  background: radial-gradient(circle at 90% 5%, rgba(124, 92, 255, 0.3), transparent 11rem), rgba(18, 16, 39, 0.92);
}

.strumming-pattern-rail-title { color: #f6bd48; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.strumming-pattern-name { color: #fff; font-size: 1.1rem; }
.strumming-pattern-slots { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; min-height: 4rem; padding: 0.7rem; border-radius: 12px; background: rgba(6, 4, 19, 0.42); }
.strumming-pattern-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; min-height: 1.6rem; border-radius: 999px; color: #c4b5fd; font-size: 0.74rem; font-weight: 850; }
.strumming-pattern-slot::before { content: ""; width: 0.22rem; height: 1.35rem; border-radius: 999px; background: currentColor; opacity: 0.7; position: absolute; transform: translateY(1.05rem); }
.strumming-pattern-slot.is-accent { color: #f6bd48; box-shadow: 0 0 17px rgba(246, 189, 72, 0.42); }

@media (max-width: 840px) {
  #song-section-practice.has-strumming-pattern { grid-template-columns: 1fr; }
}

#song-section-practice.has-chord-queue .practice-player.card {
  margin-bottom: 0;
}

.upcoming-chord-rail {
  display: grid;
  gap: 0.75rem;
  min-height: 100%;
  padding: 0.85rem;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 4%, rgba(124, 92, 255, 0.3), transparent 10rem),
    rgba(18, 16, 39, 0.9);
}

.upcoming-chord-rail .compact-playing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding: 0;
}

.upcoming-chord-rail .playback-heading > div {
  min-height: 6.3rem;
  padding: 0.7rem;
  border: 1px solid rgba(199, 178, 255, 0.2);
  border-radius: 11px;
  background: rgba(9, 7, 24, 0.38);
}

.upcoming-chord-rail .playback-chord,
.upcoming-chord-rail .playback-next strong {
  display: block;
  margin-top: 0.35rem;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  line-height: 1;
}

.upcoming-chord-rail #playback-current {
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}

.upcoming-chord-rail .playback-next strong { color: #c4b5fd; }
.upcoming-chord-rail-title { color: #c4b5fd; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }

.upcoming-chord-queue {
  display: grid;
  gap: 0.38rem;
  overflow: hidden;
}

.upcoming-chord-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(199, 178, 255, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(240, 237, 255, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  animation: upcoming-chord-rise 260ms ease-out both;
}

.upcoming-chord-item.is-next {
  border-color: rgba(196, 181, 253, 0.58);
  background: rgba(124, 92, 255, 0.22);
  color: #fff;
}

.upcoming-chord-item small { color: rgba(222, 210, 255, 0.52); font-family: inherit; font-size: 0.68rem; }
.upcoming-chord-ending { color: rgba(222, 210, 255, 0.55); font-size: 0.82rem; }

@keyframes upcoming-chord-rise {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 840px) {
  #song-section-practice.has-chord-queue { grid-template-columns: 1fr; }
  .upcoming-chord-rail .compact-playing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upcoming-chord-rail .playback-heading > div { min-height: auto; }
  .upcoming-chord-queue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .upcoming-chord-item { display: grid; gap: 0.15rem; font-size: 0.9rem; }
}

/* Song practice layout: chord fingerings lead the right rail; the pattern follows. */
#song-section-practice.has-practice-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem);
  gap: 1rem;
  align-items: start;
}

#song-section-practice.has-practice-sidebar .practice-player.card { margin-bottom: 0; }

.practice-sidebar {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.chord-progression-rail,
.strumming-pattern-rail {
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 7%, rgba(124, 92, 255, 0.29), transparent 11rem),
    linear-gradient(145deg, rgba(30, 22, 64, 0.96), rgba(10, 7, 24, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 28px rgba(3, 1, 14, 0.22);
}

.chord-progression-rail .compact-playing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.75rem;
}

.chord-progression-rail .compact-playing > div {
  min-height: 15rem;
  padding: 0.75rem;
  border: 1px solid rgba(215, 199, 255, 0.2);
  border-radius: 13px;
  background: rgba(5, 3, 16, 0.4);
}

.chord-progression-rail .eyebrow { color: #f6bd48; }
.chord-progression-rail .playback-chord,
.chord-progression-rail .playback-next strong {
  display: block;
  margin-top: 0.34rem;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.16);
}

.chord-progression-rail .playback-next strong { color: #d7c7ff !important; }
.progression-fingering {
  display: grid;
  place-items: center;
  min-height: 9.4rem;
  margin-top: 0.4rem;
}

.progression-fingering svg { width: min(100%, 8.5rem); height: auto; max-height: 9rem; }
.progression-fingering-fallback { color: rgba(255, 255, 255, 0.35); font-size: 0.75rem; }
.progression-single-note {
  display: grid;
  min-height: 8rem;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: center;
}
.playback-chord.is-note-event { font-size: 1.25rem !important; letter-spacing: 0 !important; line-height: 1.25; }
.upcoming-chord-item .progression-single-note { min-height: 2.6rem; font-size: 0.64rem; }
.progression-silence {
  display: grid;
  min-height: 8rem;
  place-items: center;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-style: italic;
}
.playback-chord.is-silence-event { font-size: 1.45rem !important; font-style: italic; }
.upcoming-chord-item .progression-silence { min-height: 2.6rem; font-size: 0.64rem; }

.practice-sidebar .strumming-pattern-rail { min-height: 0; }
.practice-sidebar .strumming-pattern-slot { position: relative; padding-bottom: 0.9rem; }

.practice-page .karaoke-line-chords button.is-active {
  color: #fff !important;
  background: #7654ef;
  border-color: #b8a5ff;
  box-shadow: 0 0 15px rgba(184, 165, 255, 0.38);
}

@media (min-width: 681px) {
  .song-section-workspace { grid-template-columns: 10.2rem minmax(0, 1fr); }
  .song-section-nav {
    gap: 0.6rem;
    padding: 0.65rem;
    min-height: 26rem;
    border-color: rgba(167, 139, 250, 0.35);
    background: linear-gradient(180deg, rgba(25, 18, 53, 0.98), rgba(10, 7, 25, 0.96));
  }
  .song-section-nav button {
    min-height: 4.85rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.36rem;
    padding: 0.65rem 0.3rem;
    color: rgba(232, 225, 255, 0.63);
    font-size: 0.76rem;
    font-weight: 780;
    text-align: center;
  }
  .song-section-nav button span { width: auto; color: #f6bd48; font-size: 1.25rem; }
  .song-section-nav button > .song-nav-chord-icon { color: #f6bd48; }
  .song-section-nav button:hover,
  .song-section-nav button.is-active {
    border-color: rgba(190, 170, 255, 0.66);
    background: linear-gradient(145deg, #8966ff, #5636c8);
    color: #fff;
    box-shadow: 0 9px 20px rgba(79, 45, 181, 0.3);
  }
  .song-section-nav button.is-active span,
  .song-section-nav button.is-active > .song-nav-chord-icon { color: #fff; }
}

@media (max-width: 840px) {
  #song-section-practice.has-practice-sidebar { grid-template-columns: 1fr; }
  .chord-progression-rail .compact-playing > div { min-height: 12rem; }
}

/* The progression rail stays narrow: diagrams at the top, future chords rising below. */
#song-section-practice.has-practice-sidebar {
  grid-template-columns: minmax(0, 1fr) 18.25rem;
}

.practice-sidebar .upcoming-chord-rail {
  display: grid;
  gap: 0.75rem;
  min-height: 12rem;
  padding: 0.95rem;
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 7%, rgba(124, 92, 255, 0.29), transparent 11rem),
    linear-gradient(145deg, rgba(30, 22, 64, 0.96), rgba(10, 7, 24, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 28px rgba(3, 1, 14, 0.22);
}

.practice-sidebar .upcoming-chord-rail-title {
  color: #f6bd48;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-sidebar .upcoming-chord-queue {
  display: flex;
  min-height: 8.5rem;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 0.42rem;
  overflow: hidden;
}

.practice-sidebar .upcoming-chord-item {
  display: block;
  padding: 0.5rem 0.66rem;
  border: 1px solid rgba(215, 199, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(240, 237, 255, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  animation: upcoming-chord-rise 260ms ease-out both;
}

.practice-sidebar .upcoming-chord-item.is-next {
  border-color: rgba(246, 189, 72, 0.68);
  background: rgba(246, 189, 72, 0.14);
  color: #fff;
  box-shadow: 0 0 15px rgba(246, 189, 72, 0.12);
}

.practice-sidebar .upcoming-chord-item {
  cursor: pointer;
  text-align: left;
}

.practice-sidebar .upcoming-chord-item:focus-visible {
  outline: 2px solid #f6bd48;
  outline-offset: 3px;
}

.practice-sidebar .upcoming-chord-item.is-previewing {
  border-color: rgba(246, 189, 72, 0.95) !important;
  background: rgba(246, 189, 72, 0.2) !important;
}

.practice-sidebar .upcoming-chord-ending { color: rgba(235, 228, 255, 0.5); font-size: 0.82rem; }

@media (max-width: 840px) {
  #song-section-practice.has-practice-sidebar { grid-template-columns: 1fr; }
}

/* Current chord card and the thumbnail timeline follow the player reference. */
.chord-progression-rail .compact-playing { grid-template-columns: 1fr; }
.chord-progression-rail .compact-playing > div { position: relative; min-height: 15.4rem; }
.chord-progression-rail .playback-chord { color: #f6bd48 !important; font-size: 2.15rem; text-align: center; }
.chord-progression-rail .eyebrow { display: block; color: #f6bd48; }
.chord-progression-rail .progression-fingering { min-height: 10.4rem; margin-top: 0.3rem; }
.chord-progression-rail .progression-fingering svg { width: min(100%, 9.25rem); max-height: 10rem; }
.chord-string-hit { pointer-events: none; }
.progression-fingering.is-string-previewable .chord-string-hit { cursor: crosshair; pointer-events: stroke; }
.progression-fingering.is-string-previewable .chord-string-hit.is-muted { cursor: not-allowed; }
.progression-fingering .chord-string-line.is-auditioning {
  stroke: #f6bd48;
  stroke-opacity: 1;
  stroke-width: 3;
}
.progression-fingering.is-string-previewable::after {
  color: rgba(235, 228, 255, 0.58);
  content: "Hover a string to hear it";
  font-size: 0.7rem;
}

.chord-rail-arrow {
  position: absolute;
  top: 56%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(111, 91, 178, 0.2);
  color: #eee8ff;
  font-size: 1.75rem;
  line-height: 1;
}

.chord-rail-arrow:hover { background: rgba(143, 107, 255, 0.43); color: #fff; }
.chord-rail-arrow-previous { left: -0.35rem; }
.chord-rail-arrow-next { right: -0.35rem; }

.practice-sidebar .upcoming-chord-queue {
  position: relative;
  min-height: 20rem;
  flex-direction: column;
  gap: 0;
  padding-left: 2rem;
  overflow: visible;
}

.practice-sidebar .upcoming-chord-queue::before {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.62rem;
  width: 1px;
  background: linear-gradient(#f6bd48, #7959df 25%, rgba(121, 89, 223, 0.35));
  content: "";
}

.practice-sidebar .upcoming-chord-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  min-height: 4.45rem;
  padding: 0.45rem 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(215, 199, 255, 0.12);
  background: transparent;
  box-shadow: none;
}

.practice-sidebar .upcoming-chord-item::before {
  position: absolute;
  top: 50%;
  left: -1.72rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #8d6cff;
  box-shadow: 0 0 0 3px #151027;
  content: "";
}

.practice-sidebar .upcoming-chord-item.is-next {
  margin: 0.08rem 0 0.38rem;
  padding: 0.45rem;
  border: 1px solid rgba(246, 189, 72, 0.62);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(246, 189, 72, 0.16), rgba(246, 189, 72, 0.04));
  box-shadow: 0 0 15px rgba(246, 189, 72, 0.1);
}

.practice-sidebar .upcoming-chord-item.is-next::before { background: #f6bd48; }
.upcoming-chord-diagram { display: grid; place-items: center; width: 3rem; height: 3.65rem; }
.upcoming-chord-diagram svg { width: 2.75rem; max-height: 3.6rem; }
.practice-sidebar .upcoming-chord-item strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }

/* Reference-style navigation and transport. */
@media (min-width: 681px) {
  .song-section-workspace { grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0.9rem; }
  .song-section-nav {
    min-height: 48rem;
    gap: 0.65rem;
    padding: 0.7rem 0.38rem;
    border-color: rgba(142, 107, 255, 0.32);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(17, 13, 39, 0.98), rgba(9, 7, 25, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(4, 1, 15, 0.2);
  }
  .song-section-nav button {
    position: relative;
    min-height: 5.35rem;
    justify-content: center;
    gap: 0.48rem;
    border-color: transparent;
    border-radius: 12px;
    color: rgba(229, 219, 255, 0.74);
    font-size: 0.76rem;
  }
  .song-section-nav button span { color: #b39aff; font-size: 1.55rem; }
  .song-section-nav button > .song-nav-chord-icon { color: #b39aff; }
  .song-section-nav button.is-active {
    border-color: rgba(142, 107, 255, 0.72);
    background: linear-gradient(145deg, rgba(104, 66, 223, 0.82), rgba(62, 38, 139, 0.86));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 7px 20px rgba(59, 26, 154, 0.36);
  }
  .song-section-nav button.is-active::before {
    position: absolute;
    left: -0.4rem;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 0.2rem;
    border-radius: 999px;
    background: #ae8dff;
    box-shadow: 0 0 12px #8d63ff;
    content: "";
  }
}

.practice-player .playback-progress-redundant { display: none; }
.practice-page .waveform-stage {
  height: 3.2rem;
  margin: 0.85rem 1rem 0;
  border: 1px solid rgba(142, 107, 255, 0.46);
  border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(9, 4, 30, 0.68);
}
.practice-page .waveform-stage::before,
.practice-page .waveform-stage::after { opacity: 0.8; }
.practice-page .waveform-playhead { width: 2px; background: #fff3cf; box-shadow: 0 0 12px #ffd366; }
.playback-section-marker {
  position: absolute;
  z-index: 3;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 3px;
  border-radius: 999px;
  background: #6ff0a4;
  box-shadow: 0 0 7px rgba(111, 240, 164, 0.85);
  transform: translateX(-50%);
  pointer-events: auto;
}
.playback-section-marker.is-chorus { background: #6bb9ff; box-shadow: 0 0 8px rgba(107, 185, 255, 0.95); }
.playback-section-marker.is-bridge { background: #ff7f6e; box-shadow: 0 0 8px rgba(255, 127, 110, 0.85); }
.playback-section-marker.is-edge { background: #ffd166; box-shadow: 0 0 8px rgba(255, 209, 102, 0.85); }
.practice-page .player-time-row { margin: 0.25rem 1rem 0; color: rgba(241, 233, 255, 0.78); }

.practice-page .virtual-practice-controls-after-karaoke {
  justify-content: center;
  gap: clamp(0.45rem, 2.2vw, 0.9rem);
  margin: 0.25rem 1rem 0;
  min-height: 4.75rem;
}
.practice-page .virtual-practice-controls-after-karaoke > span { display: none; }
.practice-page .virtual-practice-controls-after-karaoke .transport-icon-button { width: 3.75rem; min-width: 3.75rem !important; height: 3.75rem; }
.practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button { width: 4.5rem; min-width: 4.5rem !important; height: 4.5rem; }
.practice-page .practice-speed-control { margin: 0.05rem 1rem 1rem; }

@media (max-width: 520px) {
  .practice-page .virtual-practice-controls-after-karaoke {
    gap: 0.38rem;
    margin-inline: 0.55rem;
  }
  .practice-page .virtual-practice-controls-after-karaoke .transport-icon-button {
    width: 3.05rem;
    min-width: 3.05rem !important;
    height: 3.05rem;
  }
  .practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button {
    width: 3.7rem;
    min-width: 3.7rem !important;
    height: 3.7rem;
  }
  .transport-icon { width: 1.65rem; height: 1.4rem; }
  .karaoke-play-toggle.transport-icon-button .transport-icon { width: 1.9rem; height: 1.65rem; }
}

/* Keep navigation inside the compact song frame rather than spending a row above it. */
.song-page > header {
  display: none;
}

.practice-page .practice-hero {
  width: 100%;
  max-width: none;
  margin: 0 0 0.65rem;
  padding: 0;
  grid-template-columns: 4.65rem 4.65rem minmax(0, 1fr) max-content;
  gap: 0.3rem 0.75rem;
}
.practice-page .hero-home-link {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  width: 4.65rem;
  height: 4.65rem;
  min-height: 4.65rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.16rem;
  padding: 0.25rem;
  text-align: center;
  white-space: nowrap;
}
.practice-page .hero-home-link span { font-size: 1.35rem; line-height: 1; }
.practice-page .hero-home-link small { font-size: 0.68rem; }
.practice-page .song-art { grid-column: 2; grid-row: 1 / span 2; width: 4.65rem; border-radius: 12px; }
.practice-page .practice-title { grid-column: 3; grid-row: 1; min-width: 0; }
.practice-page .song-facts { grid-column: 4; grid-row: 1 / span 2; justify-self: end; align-self: center; }
.practice-page .song-art span { font-size: 2.35rem; }
.practice-page .song-art i { bottom: 0.65rem; transform: scale(0.6); }
.practice-page .practice-title .eyebrow { display: none; }
.practice-page .practice-title h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3.1vw, 2.2rem);
  line-height: 1.06;
}
.practice-page .song-title-rating { padding-block: 0.12rem; }

@media (max-width: 680px) {
  .chord-shapes-card .tab-preview-heading { align-items: flex-start; gap: 0.65rem; }
  .chord-shape-heading-actions { max-width: 70%; }
  .song-title-row { align-items: flex-start; gap: 0.42rem; }
  .song-title-rating { margin-top: 0.1rem; }
  .song-title-rating button { min-width: 1.05rem; font-size: 0.96rem; }
}
.practice-page .practice-title p { font-size: 0.92rem; }
.practice-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.38rem;
}
.practice-hero-actions .hero-download-sheet,
.practice-hero-actions .hero-edit-sheet,
.practice-hero-actions .hero-tuner-link,
.practice-page .hero-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: 0.35rem 0.58rem;
  border: 1px solid rgba(199, 178, 255, 0.3);
  border-radius: 9px;
  background: rgba(124, 92, 255, 0.1);
  color: #ded2ff;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}
.practice-hero-actions .hero-tuner-link { border-color: rgba(246, 189, 72, 0.36); color: #f6bd48; }
.practice-page .song-facts { grid-template-columns: repeat(4, max-content); align-items: end; }
.practice-page .song-facts div { padding: 0 0.55rem; }
.practice-page .song-facts dt { font-size: 0.61rem; }
.practice-page .song-facts dd { font-size: 0.78rem; }

@media (max-width: 680px) {
  .song-page > header { padding-inline: 0.15rem; }
  .practice-page .practice-hero { grid-template-columns: 3.75rem 3.75rem minmax(0, 1fr); }
  .practice-page .hero-home-link { width: 3.75rem; height: 3.75rem; min-height: 3.75rem; }
  .practice-page .song-art { width: 3.75rem; }
  .practice-page .song-facts { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Signed-in identity */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.account-menu {
  position: relative;
  z-index: 30;
}

.account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.22rem 0.45rem 0.22rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-alt) 88%, var(--accent) 12%);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  user-select: none;
}

.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover,
.account-menu[open] summary { border-color: var(--accent); }

.account-avatar {
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #a78bfa, #6d4bef);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
}

.account-name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu summary svg {
  width: 0.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  opacity: 0.55;
  transition: transform 160ms ease;
}

.account-menu[open] summary svg { transform: rotate(180deg); }

.account-popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  gap: 0.2rem;
  min-width: 13rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-alt);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3);
}

.account-popover > span {
  color: var(--muted);
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-popover strong {
  margin-bottom: 0.55rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-popover form,
.account-popover button { width: 100%; }

.account-popover button {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
}

.account-popover button:hover { border-color: var(--accent); color: var(--accent-strong); }

.account-admin-link {
  display: block;
  margin-bottom: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}

.account-admin-link:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* Admin dashboard */
.admin-shell { display: grid; gap: 1.25rem; padding-bottom: 4rem; }

.admin-hero,
.admin-section {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-alt);
}

.admin-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.7rem);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 20rem),
    var(--bg-alt);
}

.admin-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-hero h1,
.admin-section h2 { margin: 0; letter-spacing: -0.035em; }
.admin-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.admin-hero > div > p:last-child,
.admin-section-heading > p { max-width: 42rem; margin: 0.7rem 0 0; color: var(--muted); line-height: 1.55; }

.admin-jump-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.admin-jump-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}
.admin-jump-links a:hover { border-color: var(--accent); }
.admin-jump-links span,
.admin-status {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-strong);
  font-size: 0.68rem;
}

.admin-notice {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, #34d399 38%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #34d399 10%, transparent);
}

.admin-section { padding: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: 1rem; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.admin-section-heading > p { max-width: 35rem; font-size: 0.84rem; }
.admin-pattern-workbench,
.admin-proposal-card,
.admin-current-presets,
.admin-empty {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
}

.admin-pattern-workbench { display: grid; gap: 1rem; padding: 1rem; }
.admin-pattern-picker { display: flex; align-items: end; gap: 0.65rem; }
.admin-pattern-picker label { flex: 1; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.admin-pattern-picker select { width: 100%; margin-top: 0.3rem; }
.admin-pattern-play { min-width: 9.5rem; white-space: nowrap; }
.admin-pattern-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.admin-pattern-settings label { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.admin-pattern-settings select { width: 100%; margin-top: 0.3rem; }
.admin-pattern-palette { display: flex; flex-wrap: wrap; gap: 0.42rem; }
.admin-pattern-palette button,
.admin-pattern-slot { min-width: 2.55rem; min-height: 2.55rem; padding: 0.35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--fg); font-weight: 800; }
.admin-pattern-palette button small { color: var(--muted); font-size: 0.58rem; }
.admin-pattern-palette button.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg-alt)); color: var(--accent-strong); }
.admin-pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.45rem; }
.admin-pattern-beat { min-width: 0; padding: 0.4rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-alt); }
.admin-pattern-beat.is-split { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.admin-pattern-beat-header { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.63rem; font-weight: 800; }
.admin-pattern-split { border: 0; padding: 0.14rem 0.3rem; border-radius: 5px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent-strong); font-size: 0.62rem; font-weight: 800; }
.admin-pattern-actions { display: grid; gap: 0.25rem; }
.admin-pattern-slot { min-width: 0; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent-strong); }
.admin-pattern-slot.is-rest { background: var(--bg); color: var(--muted); }
.admin-pattern-loaded { display: grid; gap: 0.7rem; padding: 0.9rem; border-radius: 12px; background: var(--bg-alt); }
.admin-pattern-title { display: flex; align-items: start; justify-content: space-between; gap: 0.7rem; }
.admin-pattern-title h3,
.admin-current-presets h3,
.admin-proposal-card h3,
.admin-empty h3 { margin: 0; }
.admin-pattern-title span { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.admin-pattern-preview {
  margin: 0;
  padding: 0.75rem;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt));
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
.admin-pattern-status { margin: 0; color: var(--muted); font-size: 0.74rem; }

.admin-publish-pattern { display: flex; align-items: end; gap: 0.55rem; }
.admin-publish-pattern label { flex: 1; color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.admin-publish-pattern input,
.admin-review-form input { width: 100%; margin-top: 0.3rem; }
.admin-publish-pattern button { white-space: nowrap; }

.admin-current-presets { margin-top: 1rem; padding: 1rem; }
.admin-preset-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.admin-preset-list > div { display: grid; gap: 0.3rem; padding: 0.7rem; border-radius: 10px; background: var(--bg-alt); }
.admin-preset-list span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem; }

.admin-proposal-list { display: grid; gap: 1rem; }
.admin-proposal-card { padding: 1rem; }
.admin-proposal-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.admin-proposal-card header p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; }
.admin-version-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.admin-version-comparison > section { min-width: 0; }
.admin-version-comparison h4 { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-version-comparison .sheet { max-height: 32rem; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.admin-suggested-patterns { margin-top: 0.85rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--bg-alt)); }
.admin-suggested-patterns h4 { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-suggested-patterns > div { display: grid; gap: 0.45rem; }
.admin-suggested-patterns p { display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto; align-items: center; gap: 0.65rem; margin: 0; padding: 0.55rem 0.65rem; border-radius: 8px; background: var(--bg); }
.admin-suggested-patterns span { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.74rem; }
.admin-suggested-patterns small { color: var(--muted); white-space: nowrap; }
.admin-empty-copy { min-height: 8rem; margin: 0; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.admin-review-form { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.admin-review-form label { flex: 1; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.admin-review-form > div { display: flex; gap: 0.55rem; }
.admin-empty { padding: 1.5rem; text-align: center; }
.admin-empty p { margin: 0.45rem 0 0; color: var(--muted); }

@media (max-width: 780px) {
  .admin-hero,
  .admin-section-heading,
  .admin-review-form { align-items: stretch; flex-direction: column; }
  .admin-version-comparison { grid-template-columns: 1fr; }
  .admin-pattern-settings,
  .admin-pattern-picker,
  .admin-publish-pattern { align-items: stretch; flex-direction: column; }
  .admin-pattern-settings { grid-template-columns: 1fr; }
  .admin-review-form > div { display: grid; }
}

.practice-hero-actions .account-menu { margin-inline-start: auto; }
.practice-hero-actions .account-menu summary {
  min-height: 2rem;
  border-color: rgba(199, 178, 255, 0.3);
  background: rgba(124, 92, 255, 0.1);
  color: #ded2ff;
}
.practice-hero-actions .account-avatar { width: 1.45rem; height: 1.45rem; }
.practice-hero-actions .account-popover { left: 0; right: auto; color: var(--fg); }

/* Login */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 20%, rgba(124, 92, 255, 0.2), transparent 30rem),
    radial-gradient(circle at 92% 82%, rgba(52, 211, 153, 0.1), transparent 26rem),
    var(--bg);
}

.auth-page > header,
.auth-page main { max-width: 1040px; }

.auth-browse-link {
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-browse-link:hover { border-color: var(--accent); color: var(--fg); }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(18rem, 0.88fr) minmax(22rem, 1.12fr);
  min-height: min(680px, calc(100vh - 7rem));
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  border-radius: 26px;
  background: var(--bg-alt);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 36rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.14), transparent 14rem),
    linear-gradient(145deg, #5f3dc4, #2b174f 68%, #181020);
  color: #fff;
}

.auth-visual::after {
  content: "";
  position: absolute;
  inset: auto -7rem -8rem auto;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 3.5rem rgba(255, 255, 255, 0.025), 0 0 0 7rem rgba(255, 255, 255, 0.02);
}

.auth-visual > p {
  position: relative;
  z-index: 2;
  margin: 2.2rem 0 0;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 430;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.auth-visual > p strong { color: #c4b5fd; font-weight: 820; }

.auth-fretboard {
  position: absolute;
  inset: 0 10% auto;
  height: 69%;
  border-inline: 5px solid rgba(255, 255, 255, 0.11);
  background: repeating-linear-gradient(to bottom, transparent 0 19.5%, rgba(255, 255, 255, 0.16) 19.5% 20%);
  transform: perspective(700px) rotateX(-3deg);
}

.auth-fretboard i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0.18));
}
.auth-fretboard i:nth-child(1) { left: 7%; }
.auth-fretboard i:nth-child(2) { left: 24%; }
.auth-fretboard i:nth-child(3) { left: 41%; }
.auth-fretboard i:nth-child(4) { left: 58%; }
.auth-fretboard i:nth-child(5) { left: 75%; }
.auth-fretboard i:nth-child(6) { left: 92%; }

.auth-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #f6bd48;
  color: #261540;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
}
.auth-note-one { top: 9%; left: calc(24% - 1.5rem); }
.auth-note-two { top: 29%; left: calc(58% - 1.5rem); background: #a7f3d0; }
.auth-note-three { top: 49%; left: calc(41% - 1.5rem); background: #ddd6fe; }
.auth-note-four { top: 69%; left: calc(75% - 1.5rem); background: #fda4af; }

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 7vw, 5.25rem);
}

.auth-eyebrow {
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0.65rem 0 1rem;
  font-size: clamp(2.35rem, 5vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.auth-intro {
  max-width: 33rem;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.auth-benefits {
  display: grid;
  gap: 0.68rem;
  margin: 1.65rem 0 1.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 650;
}

.auth-benefits li { display: flex; align-items: center; gap: 0.7rem; }
.auth-benefits li > span {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-size: 0.85rem;
}

.google-sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #fff 30%);
  border-radius: 12px;
  background: #fff;
  color: #202124;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
  font-size: 0.94rem;
  font-weight: 720;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.google-sign-in:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.2); }
.google-mark {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  color: #4285f4;
  font-size: 0.9rem;
  font-weight: 900;
}

.auth-privacy {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}

.auth-error {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; margin-top: 0.75rem; border-radius: 20px; }
  .auth-visual { display: none; }
  .auth-card { min-height: calc(100vh - 8rem); padding: 2.2rem clamp(1.3rem, 8vw, 3rem); }
  .auth-card h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .account-name { max-width: 6.5rem; }
  .practice-hero-actions .account-menu { margin-inline-start: 0; }
}

/* Top navigation and player controls inspired by the compact studio layout. */
.song-topbar {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 1rem;
  margin: -1.15rem -1.15rem 1rem;
  padding: 0.62rem 1.15rem;
  border-bottom: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 29px 29px 0 0;
  background: linear-gradient(180deg, rgba(29, 23, 58, 0.98), rgba(15, 12, 34, 0.94));
  box-shadow: 0 12px 30px rgba(3, 1, 14, 0.24);
}

.song-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  width: fit-content;
  color: #fff;
  text-decoration: none;
}

.song-topbar-brand > span:last-child { display: grid; line-height: 1.05; }
.song-topbar-brand strong { font-size: 0.92rem; letter-spacing: -0.02em; }
.song-topbar-brand small { margin-top: 0.2rem; color: rgba(235, 227, 255, 0.55); font-size: 0.58rem; }
.song-back-arrow {
  display: inline-block;
  margin-inline-end: 0.18rem;
  color: #c5b2ff;
  font-size: 1.02em;
  transition: transform 150ms ease, color 150ms ease;
}
.song-topbar-brand:hover .song-back-arrow {
  color: #fff;
  transform: translateX(-0.16rem);
}

.song-topbar .song-section-nav {
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: clamp(0.12rem, 0.9vw, 0.55rem);
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  align-self: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.song-topbar .song-section-nav button {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.18rem;
  width: auto;
  min-width: 4.45rem;
  min-height: 3.7rem;
  padding: 0.35rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: rgba(237, 232, 255, 0.68);
  font-size: 0.68rem;
  font-weight: 720;
  text-align: center;
}

.song-topbar .song-section-nav button > span {
  display: inline-flex;
  width: auto;
  color: inherit;
  font-size: inherit;
  line-height: 1.1;
}
.song-topbar .song-section-nav .song-nav-icon { font-size: 1.15rem; line-height: 1; }
.song-topbar .song-section-nav .song-nav-stack-icon { transform: rotate(90deg); }
.song-topbar .song-section-nav button:hover {
  border-color: rgba(167, 139, 250, 0.26);
  background: rgba(124, 92, 255, 0.11);
  color: #fff;
}

.song-topbar .song-section-nav button.is-active {
  border-color: rgba(167, 139, 250, 0.32);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.25), rgba(73, 42, 160, 0.12));
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 7px 18px rgba(72, 39, 164, 0.24);
}

.song-topbar .song-section-nav button.is-active::before {
  position: absolute;
  top: auto;
  right: 0.6rem;
  bottom: -0.65rem;
  left: 0.6rem;
  width: auto;
  height: 2px;
  border-radius: 999px;
  background: #b69cff;
  box-shadow: 0 0 10px #8d63ff;
  content: "";
}

.song-topbar .song-nav-chord-icon { width: 1.45rem; height: 2rem; color: currentColor; }
.song-topbar .song-nav-chord-icon text { font-size: 8px; }

.song-topbar .song-section-nav .song-record-control {
  color: #ffaaa3;
}

.song-topbar .song-section-nav .song-record-glyph {
  display: block;
  width: 1rem !important;
  height: 1rem;
  border-radius: 50%;
  background: #ff554d;
  box-shadow: 0 0 0 4px rgba(255, 85, 77, 0.13), 0 0 13px rgba(255, 85, 77, 0.6);
  transition: border-radius 140ms ease, transform 140ms ease;
}

.song-record-control.is-recording .song-record-glyph { border-radius: 3px; transform: scale(0.86); }
.song-record-control.is-recording { background: rgba(255, 85, 77, 0.14) !important; color: #ffd4d1 !important; }
.song-record-control.is-starting { opacity: 0.72; cursor: wait; }
.song-record-control::after {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.6rem);
  right: 0;
  width: max-content;
  max-width: 15rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 8px;
  background: #20183f;
  color: #f7f4ff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.38);
  content: attr(data-tooltip);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.song-record-control:hover::after,
.song-record-control:focus-visible::after { opacity: 1; transform: translateY(0); }

.song-section-workspace { display: block; }
.song-section-content { min-width: 0; }

.practice-page .practice-hero {
  grid-template-columns: 4.65rem minmax(15rem, 1fr) max-content max-content;
  gap: 0.55rem 1rem;
  align-items: center;
  padding: 0.65rem 0.35rem 0.9rem;
  border-bottom: 1px solid rgba(196, 181, 253, 0.13);
}
.practice-page .practice-hero > .hero-home-link { display: none; }
.practice-page .practice-hero > .song-art { grid-column: 1; grid-row: 1 / span 2; }
.practice-page .practice-hero > .practice-title { grid-column: 2; grid-row: 1 / span 2; }
.practice-page .practice-hero > .song-facts { grid-column: 3; grid-row: 1 / span 2; }
.practice-page .hero-download-primary {
  grid-column: 4;
  grid-row: 1 / span 2;
  gap: 0.5rem;
  justify-self: end;
  min-height: 2.9rem;
  margin: 0;
  padding: 0.66rem 1rem;
  border-color: rgba(196, 181, 253, 0.78);
  background: linear-gradient(145deg, #8f6cff, #6642d7);
  color: #fff;
  box-shadow: 0 10px 24px rgba(68, 33, 154, 0.38), inset 0 1px rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
}
.practice-page .hero-download-primary:hover { background: linear-gradient(145deg, #a389ff, #7450e8); }

.practice-page .playback-progress {
  position: relative;
  display: block;
  isolation: isolate;
  height: 3.35rem;
  margin: 0.42rem 1rem 0.35rem;
  overflow: hidden;
  border: 1px solid rgba(216, 204, 255, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025) 48%, rgba(144, 111, 255, 0.08)),
    rgba(19, 14, 43, 0.62);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px rgba(80, 52, 157, 0.22),
    0 10px 26px rgba(5, 2, 20, 0.3);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  cursor: pointer;
}
.practice-page .playback-progress::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0.13), transparent 24%, transparent 72%, rgba(255,255,255,0.06));
  content: "";
  pointer-events: none;
}
.practice-page .playback-progress::after {
  position: absolute;
  z-index: 2;
  inset: 0.48rem 0;
  background: rgba(245, 240, 255, 0.24);
  clip-path: polygon(0 48%, 3% 35%, 6% 57%, 9% 24%, 12% 68%, 15% 39%, 18% 60%, 21% 19%, 24% 72%, 27% 33%, 30% 62%, 33% 28%, 36% 75%, 39% 42%, 42% 58%, 45% 21%, 48% 68%, 51% 36%, 54% 63%, 57% 25%, 60% 71%, 63% 41%, 66% 61%, 69% 22%, 72% 76%, 75% 37%, 78% 66%, 81% 30%, 84% 70%, 87% 43%, 90% 61%, 93% 33%, 96% 65%, 100% 48%, 100% 54%, 96% 72%, 93% 39%, 90% 68%, 87% 49%, 84% 77%, 81% 36%, 78% 73%, 75% 43%, 72% 82%, 69% 29%, 66% 67%, 63% 47%, 60% 78%, 57% 31%, 54% 69%, 51% 42%, 48% 74%, 45% 28%, 42% 64%, 39% 48%, 36% 81%, 33% 34%, 30% 69%, 27% 39%, 24% 79%, 21% 25%, 18% 67%, 15% 45%, 12% 75%, 9% 30%, 6% 64%, 3% 41%, 0 55%);
  content: "";
  opacity: 0.82;
  pointer-events: none;
}
.practice-page .playback-progress .playback-section-segment {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(232, 225, 255, 0.32);
  background: linear-gradient(180deg, rgba(57, 177, 132, 0.5), rgba(36, 104, 83, 0.32));
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
  transition: none;
  pointer-events: none;
}
.practice-page .playback-progress .playback-section-segment.is-chorus { background: linear-gradient(180deg, rgba(255, 91, 99, 0.66), rgba(151, 46, 56, 0.42)); }
.practice-page .playback-progress .playback-section-segment.is-bridge { background: linear-gradient(180deg, rgba(72, 211, 230, 0.64), rgba(38, 124, 145, 0.4)); }
.practice-page .playback-progress .playback-section-segment.is-intro { background: linear-gradient(180deg, rgba(242, 158, 69, 0.68), rgba(144, 88, 38, 0.4)); }
.practice-page .playback-progress .playback-section-segment.is-outro { background: linear-gradient(180deg, rgba(164, 112, 255, 0.68), rgba(94, 55, 166, 0.42)); }
.practice-page .playback-progress #playback-progress {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(226, 216, 255, 0.24));
  box-shadow: 2px 0 0 rgba(255, 248, 220, 0.96), 5px 0 16px rgba(220, 199, 255, 0.7);
  pointer-events: none;
}

.playback-volume-control {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: clamp(8rem, 16vw, 11rem);
  margin-right: 0.15rem;
  color: rgba(235, 227, 255, 0.74);
}
.playback-volume-control svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.playback-volume-control input { width: min(7rem, 10vw); accent-color: #a78bfa; }
.playback-volume-control output { min-width: 2.25rem; color: rgba(235, 227, 255, 0.65); font-size: 0.67rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1020px) {
  .song-topbar-brand small { display: none; }
  .practice-page .practice-hero { grid-template-columns: 4.65rem minmax(0, 1fr) max-content; }
  .practice-page .practice-hero > .song-facts { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
  .practice-page .hero-download-primary { grid-column: 3; }
}

@media (max-width: 760px) {
  .song-topbar { display: block; margin: -0.8rem -0.8rem 0.8rem; padding: 0.55rem 0.65rem 0; border-radius: 21px 21px 0 0; }
  .song-topbar-brand { margin: 0 0.3rem 0.45rem; }
  .song-topbar .song-section-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.45rem; scrollbar-width: thin; }
  .song-topbar .song-section-nav button { min-width: 4.1rem; min-height: 3.25rem; padding-inline: 0.4rem; }
  .song-topbar .song-section-nav button > .song-nav-chord-icon { display: block; }
  .song-topbar .song-section-nav button.is-active::before { bottom: -0.45rem; }
  .practice-page .practice-hero { grid-template-columns: 3.75rem minmax(0, 1fr); padding-inline: 0; }
  .practice-page .practice-hero > .song-art { grid-column: 1; }
  .practice-page .practice-hero > .practice-title { grid-column: 2; }
  .practice-page .practice-hero > .song-facts { grid-column: 1 / -1; grid-row: 3; }
  .practice-page .hero-download-primary { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; justify-content: center; }
  .playback-volume-control { order: -1; flex: 1 1 100%; justify-content: center; width: 100%; margin: 0 0 0.25rem; }
  .playback-volume-control input { width: min(13rem, 56vw); }
}

@media not all {
/* Superseded transport experiments retained temporarily for easy comparison. */
/* Karaoke transport: floating glass dock with reference-style round controls. */
.transport-icon .transport-seek-ring {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

.transport-icon-back text,
.transport-icon-forward text {
  font-size: 8.5px;
  font-weight: 850;
  text-anchor: middle;
}

.practice-page .virtual-practice-controls-after-karaoke {
  position: relative;
  justify-content: center;
  gap: clamp(0.45rem, 1.4vw, 0.82rem);
  min-height: 5.9rem;
  margin: 0.55rem 1rem 0.8rem;
  padding: 0.62rem 0.82rem;
  overflow: visible;
  border: 1px solid rgba(207, 192, 255, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.095), transparent 28%, rgba(126, 87, 235, 0.075) 75%, rgba(255, 255, 255, 0.04)),
    rgba(19, 15, 43, 0.7);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px rgba(79, 52, 153, 0.2),
    0 14px 34px rgba(4, 2, 17, 0.34);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.practice-page .virtual-practice-controls-after-karaoke .transport-icon-button {
  width: 3.75rem;
  min-width: 3.75rem !important;
  height: 3.75rem;
  border: 1px solid rgba(192, 178, 240, 0.3) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018)),
    rgba(38, 31, 75, 0.72) !important;
  color: #f5f1ff;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.17),
    inset 0 -8px 18px rgba(8, 4, 27, 0.18),
    0 7px 18px rgba(4, 2, 18, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.practice-page .virtual-practice-controls-after-karaoke .transport-icon-button:hover,
.practice-page .virtual-practice-controls-after-karaoke .transport-icon-button:focus-visible {
  border-color: rgba(211, 198, 255, 0.72) !important;
  background: linear-gradient(145deg, rgba(151, 119, 255, 0.3), rgba(74, 47, 157, 0.42)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.22), 0 0 22px rgba(143, 105, 255, 0.32);
  transform: translateY(-2px);
}

.practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button {
  width: 4.8rem;
  min-width: 4.8rem !important;
  height: 4.8rem;
  border-color: rgba(221, 208, 255, 0.88) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(208, 188, 255, 0.92), transparent 30%),
    linear-gradient(145deg, #9873ff, #6842db 72%) !important;
  color: #fff;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.4),
    0 0 0 4px rgba(141, 99, 255, 0.1),
    0 0 28px rgba(145, 101, 255, 0.72),
    0 11px 25px rgba(37, 15, 89, 0.55);
}

.practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button:hover,
.practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button:focus-visible {
  background: radial-gradient(circle at 34% 24%, rgba(231, 220, 255, 0.96), transparent 31%), linear-gradient(145deg, #aa8aff, #7750e7 72%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 0 34px rgba(158, 119, 255, 0.82), 0 13px 27px rgba(37,15,89,.58);
}

.practice-page .virtual-practice-controls-after-karaoke .transport-record-button {
  border-color: rgba(207, 181, 255, 0.38) !important;
  background: linear-gradient(145deg, rgba(115, 78, 187, 0.28), rgba(35, 25, 70, 0.78)) !important;
}

.transport-record-button .song-record-glyph {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 50%;
  background: #ff5d62;
  box-shadow: 0 0 0 5px rgba(255, 93, 98, 0.1), 0 0 15px rgba(255, 93, 98, 0.72);
  transition: border-radius 140ms ease, transform 140ms ease;
}

.transport-record-button.is-recording .song-record-glyph { border-radius: 3px; transform: scale(0.84); }
.transport-record-button.is-recording { border-color: rgba(255, 117, 121, 0.72) !important; }

.practice-page .virtual-practice-controls-after-karaoke .playback-volume-control {
  width: clamp(10rem, 18vw, 13rem);
  margin-right: clamp(0.25rem, 1vw, 0.75rem);
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(196, 181, 253, 0.2);
  border-radius: 13px;
  background: rgba(39, 31, 76, 0.58);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
.practice-page .virtual-practice-controls-after-karaoke .playback-volume-control input { flex: 1; min-width: 4rem; }

@media (max-width: 760px) {
  .practice-page .virtual-practice-controls-after-karaoke { padding: 0.7rem 0.5rem; border-radius: 17px; }
  .practice-page .virtual-practice-controls-after-karaoke .playback-volume-control { flex-basis: 100%; width: min(100%, 20rem); margin: 0 auto 0.25rem; }
}

@media (max-width: 520px) {
  .practice-page .virtual-practice-controls-after-karaoke { gap: 0.34rem; }
  .practice-page .virtual-practice-controls-after-karaoke .transport-icon-button {
    width: 2.8rem;
    min-width: 2.8rem !important;
    height: 2.8rem;
  }
  .practice-page .virtual-practice-controls-after-karaoke .karaoke-play-toggle.transport-icon-button {
    width: 3.55rem;
    min-width: 3.55rem !important;
    height: 3.55rem;
  }
}

/* The transport owns its glass styling in markup; it must not depend on JS mounting first. */
.practice-page .karaoke-transport-dock {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.4vw, 0.82rem);
  min-height: 6rem;
  margin: 0.6rem 1rem 0.85rem;
  padding: 0.68rem 0.88rem;
  overflow: hidden;
  border: 1px solid rgba(221, 211, 255, 0.38);
  border-radius: 22px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 32%, rgba(117, 77, 226, 0.1) 72%, rgba(255, 255, 255, 0.07)),
    rgba(20, 15, 46, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(105, 73, 190, 0.25),
    0 18px 45px rgba(4, 2, 20, 0.42),
    0 0 34px rgba(104, 70, 207, 0.1);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}

.practice-page .karaoke-transport-dock::before {
  position: absolute;
  z-index: 0;
  inset: -45% -8%;
  background:
    radial-gradient(circle at 20% 48%, rgba(129, 86, 255, 0.34), transparent 24%),
    radial-gradient(circle at 58% 25%, rgba(190, 156, 255, 0.2), transparent 22%),
    radial-gradient(circle at 87% 65%, rgba(72, 120, 220, 0.18), transparent 22%);
  content: "";
  filter: blur(18px);
  pointer-events: none;
}

.practice-page .karaoke-transport-dock::after {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(255,255,255,0.08), transparent 24%, transparent 76%, rgba(255,255,255,0.035));
  content: "";
  pointer-events: none;
}

.practice-page .karaoke-transport-dock > * { position: relative; z-index: 2; }
.practice-page .karaoke-transport-dock > span { display: none; }

.practice-page .karaoke-transport-dock .transport-icon-button {
  position: relative;
  width: 3.8rem;
  min-width: 3.8rem !important;
  height: 3.8rem;
  overflow: hidden;
  border: 1px solid rgba(220, 209, 255, 0.38) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 31% 20%, rgba(255, 255, 255, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(80, 67, 133, 0.47), rgba(27, 20, 59, 0.58)) !important;
  color: #fbf9ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -10px 20px rgba(8, 4, 30, 0.23),
    0 9px 22px rgba(3, 1, 16, 0.4),
    0 0 0 1px rgba(126, 91, 226, 0.06);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.practice-page .karaoke-transport-dock .transport-icon-button:hover,
.practice-page .karaoke-transport-dock .transport-icon-button:focus-visible {
  border-color: rgba(226, 216, 255, 0.8) !important;
  background: radial-gradient(circle at 31% 20%, rgba(255,255,255,.24), transparent 34%), linear-gradient(145deg, rgba(137, 103, 238, 0.52), rgba(49, 31, 111, 0.65)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 0 25px rgba(144, 105, 255, 0.42), 0 11px 25px rgba(3,1,16,.45);
  transform: translateY(-2px) scale(1.015);
}

.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button {
  width: 4.9rem;
  min-width: 4.9rem !important;
  height: 4.9rem;
  overflow: visible;
  border-color: rgba(238, 230, 255, 0.92) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(235, 225, 255, 0.92), transparent 28%),
    linear-gradient(145deg, rgba(161, 124, 255, 0.98), rgba(101, 61, 219, 0.98) 72%) !important;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 -10px 20px rgba(52, 25, 127, 0.26),
    0 0 0 5px rgba(147, 104, 255, 0.1),
    0 0 32px rgba(151, 110, 255, 0.82),
    0 13px 28px rgba(35, 13, 91, 0.62);
}

.practice-page .karaoke-transport-dock .transport-record-button {
  background: radial-gradient(circle at 31% 20%, rgba(255,255,255,.14), transparent 34%), linear-gradient(145deg, rgba(92, 60, 142, 0.48), rgba(30, 20, 64, 0.64)) !important;
}

.practice-page .karaoke-transport-dock .playback-volume-control {
  width: clamp(10.5rem, 19vw, 13.5rem);
  margin-right: clamp(0.25rem, 1vw, 0.8rem);
  padding: 0.65rem 0.78rem;
  border: 1px solid rgba(221, 211, 255, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.025)),
    rgba(37, 28, 76, 0.44);
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 8px 20px rgba(5,2,20,.22);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.practice-page .karaoke-transport-dock .playback-volume-control input {
  --volume-level: 78%;
  flex: 1;
  min-width: 4.5rem;
  height: 1rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.practice-page .karaoke-transport-dock .playback-volume-control input::-webkit-slider-runnable-track {
  height: 0.34rem;
  border: 1px solid rgba(231, 223, 255, 0.14);
  border-radius: 999px;
  background: linear-gradient(90deg, #a17cff 0 var(--volume-level), rgba(230, 222, 255, 0.15) var(--volume-level) 100%);
  box-shadow: inset 0 1px 3px rgba(5, 2, 18, 0.42), 0 0 10px rgba(139, 92, 246, 0.13);
}

.practice-page .karaoke-transport-dock .playback-volume-control input::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.38rem;
  border: 1px solid rgba(248, 244, 255, 0.92);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: radial-gradient(circle at 35% 30%, #eee8ff, #9a73ff 58%, #6743d4);
  box-shadow: 0 0 0 4px rgba(158, 118, 255, 0.12), 0 0 14px rgba(158, 118, 255, 0.76);
}

.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-track {
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(230, 222, 255, 0.15);
}
.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-progress { height: 0.34rem; border-radius: 999px; background: #a17cff; }
.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-thumb { width: 1rem; height: 1rem; border: 1px solid #f8f4ff; border-radius: 50%; background: #9a73ff; box-shadow: 0 0 14px rgba(158,118,255,.76); }

@media (max-width: 760px) {
  .practice-page .karaoke-transport-dock { flex-wrap: wrap; padding: 0.72rem 0.52rem; border-radius: 18px; }
  .practice-page .karaoke-transport-dock .playback-volume-control { order: -1; flex: 1 1 100%; width: min(100%, 21rem); margin: 0 auto 0.3rem; }
}

@media (max-width: 520px) {
  .practice-page .karaoke-transport-dock { gap: 0.34rem; margin-inline: 0.55rem; }
  .practice-page .karaoke-transport-dock .transport-icon-button { width: 2.8rem; min-width: 2.8rem !important; height: 2.8rem; }
  .practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button { width: 3.65rem; min-width: 3.65rem !important; height: 3.65rem; }
}
}

/* Final media dock — one authoritative visual system. */
.song-page main {
  width: calc(100% - 2rem);
  max-width: 1480px;
}

.practice-page .karaoke-transport-dock {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.3vw, 1.15rem);
  min-height: 5.4rem;
  margin: 0.7rem 1rem 0.85rem;
  padding: 0.55rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(127, 142, 213, 0.34);
  border-radius: 17px;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.075), transparent 25%, transparent 72%, rgba(130,97,230,0.07)),
    rgba(17, 19, 58, 0.74);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.13),
    inset 0 -1px rgba(71, 81, 148, 0.2),
    0 12px 30px rgba(3, 4, 20, 0.32);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.practice-page .karaoke-transport-dock::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 13% 120%, rgba(124, 92, 255, 0.17), transparent 32%),
    radial-gradient(circle at 55% -80%, rgba(134, 104, 236, 0.12), transparent 35%);
  content: "";
  pointer-events: none;
}

.practice-page .karaoke-transport-dock::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 1rem;
  left: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  content: "";
  pointer-events: none;
}

.practice-page .karaoke-transport-dock > * { position: relative; z-index: 2; }
.practice-page .karaoke-transport-dock > span { display: none; }

.practice-page .karaoke-transport-dock .transport-icon-button {
  display: inline-grid;
  place-items: center;
  width: 3.65rem;
  min-width: 3.65rem !important;
  height: 3.65rem;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(130, 144, 207, 0.48) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(47, 53, 105, 0.82), rgba(20, 23, 66, 0.88)) !important;
  color: #f6f7ff;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.12),
    inset 0 -8px 15px rgba(4, 5, 24, 0.16),
    0 6px 14px rgba(4, 5, 23, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.practice-page .karaoke-transport-dock .transport-icon-button:hover,
.practice-page .karaoke-transport-dock .transport-icon-button:focus-visible {
  border-color: rgba(181, 168, 244, 0.82) !important;
  background: linear-gradient(145deg, rgba(75, 69, 145, 0.92), rgba(30, 27, 83, 0.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 16px rgba(124,92,255,.24), 0 8px 17px rgba(4,5,23,.32);
  transform: translateY(-1px);
}

.practice-page .karaoke-transport-dock .transport-icon { width: 1.72rem; height: 1.45rem; filter: none; }
.practice-page .karaoke-transport-dock .transport-icon .transport-seek-ring {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}
.practice-page .karaoke-transport-dock .transport-icon-back,
.practice-page .karaoke-transport-dock .transport-icon-forward { width: 2rem; height: 1.7rem; }
.practice-page .karaoke-transport-dock .transport-icon-back text,
.practice-page .karaoke-transport-dock .transport-icon-forward text {
  fill: currentColor;
  font-size: 10.5px;
  font-weight: 900;
  text-anchor: middle;
}
.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button {
  width: 4.65rem;
  min-width: 4.65rem !important;
  height: 4.65rem;
  overflow: visible;
  border-color: rgba(209, 193, 255, 0.96) !important;
  background: linear-gradient(145deg, #936dff, #6842db 74%) !important;
  color: #fff;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.38),
    0 0 0 4px rgba(126, 88, 233, 0.1),
    0 0 24px rgba(134, 91, 255, 0.62),
    0 10px 22px rgba(28, 16, 76, 0.48);
}
.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button:hover,
.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button:focus-visible {
  background: linear-gradient(145deg, #a17fff, #744ce5 74%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 0 28px rgba(145,105,255,.72), 0 12px 24px rgba(28,16,76,.52);
}
.practice-page .karaoke-transport-dock .karaoke-play-toggle .transport-icon { width: 2rem; height: 1.7rem; }

.practice-page .karaoke-transport-dock .transport-record-button {
  border-color: rgba(126, 118, 190, 0.56) !important;
  background: linear-gradient(145deg, rgba(54, 47, 105, 0.9), rgba(23, 21, 66, 0.92)) !important;
}
.practice-page .karaoke-transport-dock .transport-record-button .song-record-glyph {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #ff6268;
  box-shadow: 0 0 0 5px rgba(255, 84, 94, 0.08), 0 0 11px rgba(255, 84, 94, 0.54);
}
.practice-page .karaoke-transport-dock .transport-record-button.is-recording .song-record-glyph { border-radius: 3px; transform: scale(0.82); }

.practice-page .karaoke-transport-dock .playback-volume-control {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  width: clamp(11rem, 16vw, 14rem);
  margin-right: clamp(0.3rem, 1vw, 0.85rem);
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(119, 132, 194, 0.36);
  border-radius: 12px;
  background: rgba(29, 33, 83, 0.66);
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
}
.practice-page .karaoke-transport-dock .playback-volume-control svg { width: 1.12rem; height: 1.12rem; color: #d9dcf3; }
.practice-page .karaoke-transport-dock .playback-volume-control output { min-width: 2rem; color: #b9bdd9; font-size: 0.68rem; }
.practice-page .karaoke-transport-dock .playback-volume-control input {
  --volume-level: 78%;
  flex: 1;
  min-width: 4rem;
  height: 1rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.practice-page .karaoke-transport-dock .playback-volume-control input::-webkit-slider-runnable-track {
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #9b72ff 0 var(--volume-level), rgba(194,199,233,0.2) var(--volume-level) 100%);
}
.practice-page .karaoke-transport-dock .playback-volume-control input::-webkit-slider-thumb {
  width: 0.88rem;
  height: 0.88rem;
  margin-top: -0.3rem;
  border: 1px solid #e7deff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #956bff;
  box-shadow: 0 0 0 3px rgba(145,101,255,.12), 0 0 9px rgba(145,101,255,.58);
}
.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-track { height: .28rem; border-radius: 999px; background: rgba(194,199,233,.2); }
.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-progress { height: .28rem; border-radius: 999px; background: #9b72ff; }
.practice-page .karaoke-transport-dock .playback-volume-control input::-moz-range-thumb { width: .88rem; height: .88rem; border: 1px solid #e7deff; border-radius: 50%; background: #956bff; }

@media (max-width: 900px) {
  .song-page main { width: calc(100% - 1rem); }
  .practice-page .karaoke-transport-dock { flex-wrap: wrap; gap: 0.5rem; padding: 0.65rem; }
  .practice-page .karaoke-transport-dock .playback-volume-control { order: -1; flex: 1 1 100%; width: min(100%, 21rem); margin: 0 auto 0.25rem; }
}

@media (max-width: 520px) {
  .practice-page .karaoke-transport-dock { margin-inline: 0.55rem; }
  .practice-page .karaoke-transport-dock .transport-icon-button { width: 2.8rem; min-width: 2.8rem !important; height: 2.8rem; }
  .practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button { width: 3.55rem; min-width: 3.55rem !important; height: 3.55rem; }
}

/* Premium acrylic lighting pass. */
body.song-page {
  background:
    radial-gradient(circle at 16% 8%, rgba(99, 64, 201, 0.2), transparent 30rem),
    radial-gradient(circle at 82% 28%, rgba(50, 93, 190, 0.13), transparent 34rem),
    radial-gradient(circle at 48% 100%, rgba(111, 57, 180, 0.1), transparent 38rem),
    #070711;
  background-attachment: fixed;
}

.practice-page {
  --glass-line: rgba(221, 210, 255, 0.24);
  --glass-shine: rgba(255, 255, 255, 0.16);
  position: relative;
  border-color: rgba(198, 181, 255, 0.22);
  background:
    radial-gradient(circle at 78% 2%, rgba(131, 83, 246, 0.23), transparent 27rem),
    radial-gradient(circle at 8% 48%, rgba(57, 102, 213, 0.1), transparent 29rem),
    linear-gradient(145deg, rgba(25, 19, 54, 0.8), rgba(10, 9, 26, 0.84));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.12),
    0 30px 80px rgba(0,0,0,0.48),
    0 0 60px rgba(92, 54, 184, 0.1);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
}

.song-topbar {
  border-color: rgba(197, 181, 255, 0.22);
  background:
    linear-gradient(110deg, rgba(255,255,255,0.09), transparent 23%, transparent 70%, rgba(133,93,235,0.08)),
    rgba(20, 16, 48, 0.64);
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 13px 30px rgba(2,1,14,0.25);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.song-topbar .song-section-nav button {
  box-shadow: inset 0 1px transparent;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.song-topbar .song-section-nav button:hover {
  border-color: rgba(205,190,255,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(116,76,225,0.1));
  box-shadow: inset 0 1px rgba(255,255,255,0.15), 0 8px 18px rgba(29,13,79,0.2);
  transform: translateY(-1px);
}
.song-topbar .song-section-nav button.is-active {
  border-color: rgba(205,187,255,0.65);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.19), transparent 34%),
    linear-gradient(180deg, rgba(143,96,255,0.5), rgba(83,48,177,0.32));
  box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 0 20px rgba(125,79,244,0.3), 0 9px 20px rgba(29,13,79,0.3);
}

.practice-page .practice-hero {
  border-color: rgba(210, 197, 255, 0.16);
  background: linear-gradient(100deg, rgba(255,255,255,0.025), transparent 38%, rgba(121,79,226,0.035));
}
.practice-page .hero-download-primary {
  border-color: rgba(228, 217, 255, 0.82);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.22), transparent 36%),
    linear-gradient(145deg, #9873ff, #653ed8 76%);
  box-shadow: inset 0 1px rgba(255,255,255,0.38), 0 0 22px rgba(132,87,247,0.34), 0 10px 24px rgba(48,23,116,0.42);
}

.practice-page .practice-player.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgba(24, 20, 58, 0.68), rgba(10, 10, 30, 0.72)) padding-box,
    linear-gradient(135deg, rgba(244,239,255,0.34), rgba(135,94,239,0.46) 45%, rgba(83,107,202,0.25)) border-box !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.13),
    0 22px 48px rgba(2,1,16,0.38),
    0 0 38px rgba(101,62,203,0.12);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.practice-page .practice-player.card::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 9rem;
  background: linear-gradient(112deg, rgba(255,255,255,0.08), transparent 25%, transparent 73%, rgba(132,89,244,0.06));
  content: "";
  pointer-events: none;
}
.practice-page .practice-player.card > * { position: relative; z-index: 1; }

.picking-editor {
  border-color: rgba(209, 194, 255, 0.24);
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(116,76,216,0.035));
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 9px 22px rgba(2,1,14,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.karaoke-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(17rem, 31vh, 24rem);
  overflow: hidden;
  border: 1px solid rgba(202, 185, 255, 0.34);
  background:
    radial-gradient(circle at 50% 48%, rgba(130, 78, 244, 0.17), transparent 45%),
    radial-gradient(circle at 12% 0%, rgba(87, 127, 224, 0.1), transparent 35%),
    linear-gradient(145deg, rgba(26, 23, 62, 0.65), rgba(10, 10, 31, 0.7));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.17),
    inset 0 -24px 50px rgba(2,1,18,0.16),
    0 16px 34px rgba(2,1,15,0.3),
    0 0 34px rgba(107,65,221,0.11);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.karaoke-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.1), transparent 18%, transparent 63%, rgba(162,120,255,0.045)),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 28%);
  content: "";
  pointer-events: none;
}
.karaoke-stage::after {
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: -6rem;
  width: 18rem;
  height: 12rem;
  border-radius: 50%;
  background: rgba(112, 69, 229, 0.12);
  content: "";
  filter: blur(35px);
  pointer-events: none;
}
.karaoke-stage > * { position: relative; z-index: 1; }
.karaoke-current {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.54), 0 0 22px rgba(219,203,255,0.12);
}
.karaoke-previous,
.karaoke-next { color: rgba(240,235,255,0.58); }
.karaoke-pattern {
  border-color: rgba(226,210,255,0.2);
  background: linear-gradient(145deg, rgba(255,255,255,0.065), rgba(113,74,212,0.025));
}
.practice-page .karaoke-line-chords button {
  border-color: rgba(199,177,255,0.38);
  background: linear-gradient(180deg, rgba(162,122,255,0.13), rgba(82,55,155,0.08));
  box-shadow: inset 0 1px rgba(255,255,255,0.09);
  font-size: clamp(1.18rem, 2.2vw, 1.48rem);
  line-height: 1.15;
}
.practice-page .karaoke-line-chords button.is-active {
  border-color: rgba(221,207,255,0.88);
  background: linear-gradient(145deg, #9a74ff, #6d46dd);
  box-shadow: inset 0 1px rgba(255,255,255,0.32), 0 0 18px rgba(145,102,255,0.55);
}

.practice-page .playback-progress {
  border-color: rgba(218, 204, 255, 0.42);
  background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(89,61,169,0.055)), rgba(18,15,48,0.58);
  box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 9px 22px rgba(2,1,15,0.25), 0 0 22px rgba(107,66,214,0.1);
}
.practice-page .playback-progress .playback-section-segment {
  background: linear-gradient(180deg, rgba(63, 222, 157, 0.88), rgba(21, 121, 86, 0.62));
  border-right-color: rgba(245,240,255,0.38);
  color: #fff;
  filter: saturate(1.18);
  text-shadow: 0 1px 5px rgba(0,0,0,0.48);
  box-shadow: inset 0 1px rgba(255,255,255,0.22), inset 0 -9px 16px rgba(0,0,0,0.08);
}
.practice-page .playback-progress .playback-section-segment.is-intro { background: linear-gradient(180deg, rgba(255, 180, 64, 0.94), rgba(190, 91, 23, 0.68)); }
.practice-page .playback-progress .playback-section-segment.is-chorus { background: linear-gradient(180deg, rgba(255, 69, 103, 0.96), rgba(162, 24, 61, 0.7)); }
.practice-page .playback-progress .playback-section-segment.is-bridge { background: linear-gradient(180deg, rgba(47, 224, 242, 0.94), rgba(18, 126, 163, 0.68)); }
.practice-page .playback-progress .playback-section-segment.is-outro { background: linear-gradient(180deg, rgba(184, 108, 255, 0.94), rgba(91, 42, 178, 0.7)); }

.practice-page .karaoke-transport-dock {
  border-color: rgba(196,181,255,0.42);
  background:
    linear-gradient(110deg, rgba(255,255,255,0.12), transparent 23%, transparent 70%, rgba(134,91,239,0.09)),
    rgba(22, 22, 64, 0.58);
  box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 -1px rgba(90,77,158,0.2), 0 14px 34px rgba(2,1,17,0.38), 0 0 28px rgba(97,57,202,0.1);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}
.practice-page .karaoke-transport-dock .transport-icon-button {
  border-color: rgba(178,170,225,0.54) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.015) 42%),
    linear-gradient(145deg, rgba(56,59,119,0.82), rgba(20,22,64,0.88)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.22), inset 0 -9px 16px rgba(4,4,24,0.18), 0 8px 18px rgba(2,2,18,0.34);
}
.practice-page .karaoke-transport-dock .transport-icon-button::before {
  position: absolute;
  z-index: 0;
  top: 0.32rem;
  right: 0.65rem;
  left: 0.65rem;
  height: 35%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.17), transparent);
  content: "";
  pointer-events: none;
}
.practice-page .karaoke-transport-dock .transport-icon,
.practice-page .karaoke-transport-dock .song-record-glyph { position: relative; z-index: 1; }
.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button {
  background:
    radial-gradient(circle at 31% 20%, rgba(238,228,255,0.82), transparent 27%),
    linear-gradient(145deg, #ac85ff, #7145e5 72%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.52), inset 0 -12px 22px rgba(61,28,145,0.24), 0 0 0 4px rgba(148,103,255,0.12), 0 0 30px rgba(151,104,255,0.76), 0 13px 28px rgba(35,15,91,0.56);
}
.practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button::after {
  position: absolute;
  z-index: 0;
  top: 0.42rem;
  right: 0.72rem;
  left: 0.72rem;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent);
  content: "";
  transform: rotate(-8deg);
  pointer-events: none;
}

.practice-page .guitar-playback-controls {
  border: 1px solid rgba(207,192,255,0.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(113,73,216,0.03));
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 8px 20px rgba(2,1,14,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chord-progression-rail,
.practice-sidebar .upcoming-chord-rail {
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgba(35,27,76,0.64), rgba(12,10,35,0.72)) padding-box,
    linear-gradient(135deg, rgba(238,230,255,0.32), rgba(139,96,240,0.5) 52%, rgba(91,113,209,0.24)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 17px 36px rgba(2,1,16,0.34), 0 0 28px rgba(98,57,205,0.1);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.chord-progression-rail .compact-playing > div {
  border-color: rgba(217,202,255,0.28);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), transparent 34%),
    rgba(11,9,35,0.46);
  box-shadow: inset 0 1px rgba(255,255,255,0.11), 0 10px 24px rgba(2,1,14,0.18);
}
.practice-sidebar .upcoming-chord-item {
  border-bottom-color: rgba(215,202,255,0.13);
  background: linear-gradient(90deg, rgba(255,255,255,0.035), transparent);
}
.practice-sidebar .upcoming-chord-item.is-next {
  border-color: rgba(255, 190, 70, 0.82);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(90deg, rgba(255,174,46,0.22), rgba(137,77,216,0.1));
  box-shadow: inset 0 1px rgba(255,255,255,0.16), 0 0 20px rgba(255,161,42,0.14);
}

.karaoke-section-label.is-intro { color: #ffb340; text-shadow: 0 0 12px rgba(255,164,45,0.45); }
.karaoke-section-label.is-verse { color: #52e3a2; text-shadow: 0 0 12px rgba(54,211,145,0.38); }
.karaoke-section-label.is-chorus { color: #ff587b; text-shadow: 0 0 13px rgba(255,56,101,0.46); }
.karaoke-section-label.is-bridge { color: #40def0; text-shadow: 0 0 12px rgba(37,201,224,0.42); }
.karaoke-section-label.is-outro { color: #bd79ff; text-shadow: 0 0 13px rgba(167,91,255,0.46); }

.karaoke-stage .karaoke-section-label {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1.15rem;
  left: 1.15rem;
  margin: 0;
  min-height: 1em;
  text-align: center;
}
.karaoke-stage .playback-countdown {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 48%, rgba(151, 105, 255, 0.2), transparent 27%),
    linear-gradient(145deg, rgba(18, 13, 45, 0.22), rgba(8, 7, 25, 0.3));
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(2px) saturate(112%);
  -webkit-backdrop-filter: blur(2px) saturate(112%);
  color: #fff;
  text-align: center;
  direction: ltr;
}
.karaoke-stage .playback-countdown[hidden] { display: none; }
.playback-countdown span {
  font-family: Georgia, serif;
  font-size: clamp(5.5rem, 13vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 16px rgba(220, 201, 255, 0.62), 0 0 52px rgba(132, 79, 255, 0.52);
}
.playback-countdown span.is-ticking { animation: playback-countdown-tick 430ms ease-out both; }
.playback-countdown small {
  color: rgba(239, 231, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.karaoke-play-toggle.is-counting {
  border-color: rgba(222, 205, 255, 0.9) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 26px rgba(143, 93, 255, 0.56) !important;
}
@keyframes playback-countdown-tick {
  0% { opacity: 0; transform: scale(1.3); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.86; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .playback-countdown span.is-ticking { animation: none; }
}

.song-topbar .song-section-nav .song-menu-edit {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.18rem;
  width: auto;
  min-width: 4.45rem;
  min-height: 3.7rem;
  padding: 0.35rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: rgba(237, 232, 255, 0.68);
  box-shadow: inset 0 1px transparent;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.song-topbar .song-section-nav .song-menu-edit > span {
  display: inline-flex;
  width: auto;
  color: inherit;
  font-size: inherit;
  line-height: 1.1;
}
.song-topbar .song-section-nav .song-menu-edit > .song-nav-icon { font-size: 1.15rem; }
.song-topbar .song-section-nav .song-menu-edit:hover {
  border-color: rgba(205,190,255,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(116,76,225,0.1));
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,0.15), 0 8px 18px rgba(29,13,79,0.2);
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .song-topbar .song-section-nav .song-menu-edit {
    min-width: 4.1rem;
    min-height: 3.25rem;
    padding-inline: 0.4rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .practice-page .karaoke-transport-dock .karaoke-play-toggle.transport-icon-button { animation: play-button-bloom 3.2s ease-in-out infinite; }
  @keyframes play-button-bloom {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.07); }
  }
}

/* Jewel-glass section timeline. */
.practice-page .playback-progress {
  position: relative;
  isolation: isolate;
  height: 1.9rem;
  margin: 0.48rem 1rem 0.42rem;
  overflow: hidden;
  border: 1px solid rgba(221, 207, 255, 0.58);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), transparent 42%),
    linear-gradient(135deg, rgba(55, 38, 104, 0.72), rgba(17, 12, 47, 0.78));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.31),
    inset 0 -1px rgba(124, 82, 224, 0.28),
    0 7px 18px rgba(3, 1, 20, 0.34),
    0 0 20px rgba(129, 80, 242, 0.16);
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
}
.practice-page .playback-progress::before {
  z-index: 4;
  inset: 2px 5px auto;
  height: 42%;
  border-radius: 9px 9px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.055) 58%, transparent);
  opacity: 0.72;
}
.practice-page .playback-progress::after {
  z-index: 4;
  inset: auto 5px 3px;
  height: 24%;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgba(194, 170, 255, 0.1));
  clip-path: none;
  opacity: 1;
}
.practice-page .playback-progress .playback-section-segment {
  top: 3px;
  bottom: 3px;
  height: auto;
  border: 1px solid rgba(171, 255, 231, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(191,255,239,0.44), transparent 34%),
    linear-gradient(135deg, rgba(32, 247, 194, 0.92), rgba(0, 158, 133, 0.84));
  color: rgba(255,255,255,0.98);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.58),
    inset 0 -5px 10px rgba(0,74,71,0.18),
    0 0 12px rgba(28, 237, 190, 0.27);
  filter: saturate(1.24) brightness(1.06);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-shadow: 0 1px 4px rgba(0,27,35,0.64), 0 0 7px rgba(255,255,255,0.18);
}
.practice-page .playback-progress .playback-section-segment::before {
  position: absolute;
  inset: 1px 2px auto;
  height: 42%;
  border-radius: 7px 7px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.07) 70%, transparent);
  content: "";
  pointer-events: none;
}
.practice-page .playback-progress .playback-section-segment.is-compact {
  color: transparent;
  font-size: 0;
  text-shadow: none;
}
.practice-page .playback-progress .playback-section-segment.is-intro {
  border-color: rgba(220, 192, 255, 0.72);
  background: linear-gradient(180deg, rgba(239,214,255,0.48), transparent 34%), linear-gradient(135deg, rgba(177,105,255,0.96), rgba(91,41,238,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.62), inset 0 -5px 10px rgba(55,15,151,0.2), 0 0 13px rgba(152,83,255,0.34);
}
.practice-page .playback-progress .playback-section-segment.is-chorus {
  border-color: rgba(255, 177, 226, 0.76);
  background: linear-gradient(180deg, rgba(255,221,244,0.5), transparent 34%), linear-gradient(135deg, rgba(255,62,171,0.97), rgba(205,0,112,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.64), inset 0 -5px 10px rgba(112,0,68,0.2), 0 0 14px rgba(255,44,160,0.35);
}
.practice-page .playback-progress .playback-section-segment.is-bridge {
  border-color: rgba(169, 245, 255, 0.76);
  background: linear-gradient(180deg, rgba(218,252,255,0.52), transparent 34%), linear-gradient(135deg, rgba(31,230,255,0.97), rgba(0,104,225,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.65), inset 0 -5px 10px rgba(0,62,148,0.2), 0 0 14px rgba(31,211,255,0.36);
}
.practice-page .playback-progress .playback-section-segment.is-outro {
  border-color: rgba(231, 205, 255, 0.78);
  background: linear-gradient(180deg, rgba(247,229,255,0.54), transparent 34%), linear-gradient(135deg, rgba(205,139,255,0.97), rgba(112,51,232,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.66), inset 0 -5px 10px rgba(65,24,137,0.2), 0 0 14px rgba(193,113,255,0.36);
}
.practice-page .playback-progress .playback-section-segment.is-instrumental {
  border-color: rgba(255, 226, 151, 0.78);
  background: linear-gradient(180deg, rgba(255,247,205,0.52), transparent 34%), linear-gradient(135deg, rgba(255,193,54,0.98), rgba(235,91,12,0.89));
  box-shadow: inset 0 1px rgba(255,255,255,0.66), inset 0 -5px 10px rgba(124,51,0,0.2), 0 0 14px rgba(255,166,37,0.36);
}
.practice-page .playback-progress .playback-section-segment.is-alternate-one {
  border-color: rgba(211, 255, 164, 0.78);
  background: linear-gradient(180deg, rgba(239,255,211,0.5), transparent 34%), linear-gradient(135deg, rgba(155,240,54,0.97), rgba(21,163,92,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.64), inset 0 -5px 10px rgba(15,96,59,0.2), 0 0 14px rgba(126,232,70,0.34);
}
.practice-page .playback-progress .playback-section-segment.is-alternate-two {
  border-color: rgba(180, 205, 255, 0.8);
  background: linear-gradient(180deg, rgba(221,233,255,0.52), transparent 34%), linear-gradient(135deg, rgba(83,132,255,0.98), rgba(57,37,211,0.9));
  box-shadow: inset 0 1px rgba(255,255,255,0.66), inset 0 -5px 10px rgba(32,24,130,0.22), 0 0 14px rgba(75,112,255,0.38);
}
.karaoke-section-label.is-instrumental { color: #ffc34f; text-shadow: 0 0 13px rgba(255,166,37,0.46); }
.karaoke-section-label.is-alternate-one { color: #a4f15b; text-shadow: 0 0 13px rgba(111,222,62,0.42); }
.karaoke-section-label.is-alternate-two { color: #7fa4ff; text-shadow: 0 0 13px rgba(83,112,255,0.46); }
.practice-page .playback-progress #playback-progress {
  z-index: 6;
  top: 2px;
  bottom: 2px;
  height: auto;
  border-right: 2px solid rgba(255,255,255,0.98);
  background: linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.075));
  box-shadow: 2px 0 0 rgba(215,198,255,0.66), 4px 0 11px rgba(255,255,255,0.88), 7px 0 18px rgba(145,91,255,0.76);
}
.practice-page .playback-progress #playback-progress::after {
  position: absolute;
  top: 50%;
  right: -4px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 15px rgba(166,116,255,0.95);
  content: "";
  transform: translateY(-50%);
}

/* Pattern builder --------------------------------------------------------- */
.practice-page .picking-editor {
  --pattern-cyan: #42ecff;
  --pattern-violet: #8b5cff;
  --pattern-violet-bright: #a681ff;
  --pattern-orange: #ffad32;
  container-type: inline-size;
  margin: 0.9rem 1rem 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(134, 86, 255, 0.78);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 4%, rgba(112, 75, 255, 0.22), transparent 18rem),
    radial-gradient(circle at 92% 55%, rgba(41, 83, 222, 0.13), transparent 22rem),
    linear-gradient(145deg, rgba(25, 19, 77, 0.93), rgba(8, 9, 39, 0.95));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.18),
    inset 0 -1px rgba(107,70,228,0.3),
    0 18px 42px rgba(3,1,28,0.42),
    0 0 30px rgba(96,55,223,0.17);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}
.practice-page .picking-editor > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
  border-bottom: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.practice-page .picking-editor[open] > summary {
  margin: 0;
  border-bottom-color: rgba(153,117,255,0.26);
  background: linear-gradient(110deg, rgba(255,255,255,0.065), transparent 34%, rgba(116,66,255,0.06));
}
.practice-page .picking-editor > summary::-webkit-details-marker { display: none; }
.pattern-editor-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  width: 3.25rem;
  height: 2.75rem;
  color: #fff;
  filter: drop-shadow(0 0 7px rgba(115,77,255,0.95));
}
.pattern-editor-wave i {
  width: 0.19rem;
  height: 46%;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 0 8px #7550ff;
}
.pattern-editor-wave i:nth-child(2),
.pattern-editor-wave i:nth-child(4) { height: 75%; }
.pattern-editor-wave i:nth-child(3) { height: 100%; }
.pattern-editor-heading { display: grid; gap: 0.08rem; min-width: 0; }
.pattern-editor-heading strong,
.pattern-action-panel h3,
.pattern-sequence-panel h3 {
  font-family: Georgia, "Times New Roman", serif;
}
.pattern-editor-heading strong { color: #fff; font-size: clamp(1.18rem, 4cqi, 1.7rem); line-height: 1; }
.pattern-editor-heading small { color: rgba(231,224,255,0.76); font-size: 0.72rem; font-weight: 600; }
.pattern-editor-brand {
  padding-right: 0.85rem;
  border-right: 1px solid rgba(203,188,255,0.44);
  color: rgba(193,172,255,0.67);
  font-size: 0.59rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}
.pattern-editor-toggle {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(169,132,255,0.72);
  border-radius: 50% 50% 58% 58%;
  background: radial-gradient(circle at 50% 20%, rgba(152,111,255,0.72), rgba(77,36,207,0.62));
  box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 0 16px rgba(111,68,255,0.36);
}
.pattern-editor-toggle::after {
  display: block;
  color: #fff;
  content: "+";
  font-size: 1.15rem;
  line-height: 1.65rem;
  text-align: center;
}
.picking-editor[open] .pattern-editor-toggle::after { content: "×"; }
.picking-editor > form {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
}
.pattern-config-panel,
.pattern-action-panel,
.pattern-sequence-panel {
  position: relative;
  border: 1px solid rgba(151,111,255,0.46);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.065), transparent 32%),
    linear-gradient(145deg, rgba(38,31,101,0.58), rgba(12,13,52,0.68));
  box-shadow: inset 0 1px rgba(255,255,255,0.13), 0 10px 24px rgba(2,1,28,0.22);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.pattern-config-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.75rem;
}
.practice-page .picking-editor label {
  display: grid;
  gap: 0.26rem;
  color: rgba(235,229,255,0.82);
  font-size: 0.7rem;
  font-weight: 650;
}
.practice-page .picking-editor select,
.practice-page .picking-editor input[name="favorite_name"],
.practice-page .picking-editor input[name="pattern_slot_name"] {
  width: 100%;
  min-height: 2.7rem;
  border: 1px solid rgba(133,103,255,0.66);
  border-radius: 9px;
  outline: none;
  background: linear-gradient(180deg, rgba(34,35,99,0.96), rgba(21,22,67,0.96));
  box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 5px 13px rgba(2,1,25,0.2);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
}
.practice-page .picking-editor select { padding: 0.5rem 0.65rem; }
.practice-page .picking-editor input[name="favorite_name"],
.practice-page .picking-editor input[name="pattern_slot_name"] { padding: 0.5rem 0.75rem; }
.practice-page .picking-editor select:focus,
.practice-page .picking-editor input[name="favorite_name"]:focus,
.practice-page .picking-editor input[name="pattern_slot_name"]:focus {
  border-color: var(--pattern-cyan);
  box-shadow: inset 0 1px rgba(255,255,255,0.13), 0 0 0 2px rgba(66,236,255,0.12), 0 0 16px rgba(66,236,255,0.14);
}
.pattern-favourite-select { grid-column: 1 / -1; }
.pattern-song-slot-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.38rem;
}
.practice-page .pattern-song-slot-control > button {
  min-height: 2.7rem;
  padding: 0.45rem 0.68rem;
  border: 1px solid rgba(117, 212, 255, 0.52);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(36, 64, 133, 0.9), rgba(25, 28, 83, 0.94));
  color: #eaf8ff;
}
.pattern-action-panels { display: grid; gap: 0.75rem; }
.pattern-action-panel,
.pattern-sequence-panel { padding: 0.75rem; }
.pattern-action-panel > header,
.pattern-sequence-panel > header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.pattern-sequence-panel > header { grid-template-columns: auto auto auto minmax(0, 1fr); }
.pattern-sequence-actions { display: flex; align-items: center; gap: 0.25rem; }
.practice-page .pattern-sequence-actions button {
  min-height: 1.48rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid rgba(167, 132, 255, 0.58);
  border-radius: 6px;
  background: rgba(74, 51, 147, 0.34);
  box-shadow: inset 0 1px rgba(255,255,255,0.1);
  color: #eee9ff;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
}
.practice-page .pattern-sequence-actions button:hover { border-color: rgba(205,188,255,0.86); background: rgba(92,64,177,0.48); }
.practice-page .pattern-sequence-actions .pattern-reset-button { padding-right: 0.32rem; padding-left: 0.32rem; font-size: 0.51rem; opacity: 0.82; }
.pattern-panel-icon {
  color: #a875ff;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(131,83,255,0.8);
}
.pattern-action-panel h3,
.pattern-sequence-panel h3 { margin: 0; color: #fff; font-size: 1.08rem; }
.pattern-action-panel header p,
.pattern-sequence-panel header p {
  justify-self: end;
  margin: 0;
  color: rgba(226,217,255,0.7);
  font-size: 0.66rem;
  text-align: right;
}
.pattern-sequence-panel header p b { padding: 0 0.25rem; color: #a77aff; }
.practice-page .picking-palette {
  display: grid;
  gap: 0.42rem;
  margin: 0;
}
.pattern-string-palette,
.pattern-strum-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.practice-page .picking-palette .pattern-action-card,
.practice-page .pattern-extra-palette button {
  min-width: 0;
  min-height: 7.2rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid rgba(126,102,230,0.58);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), transparent 33%),
    linear-gradient(180deg, rgba(37,39,105,0.9), rgba(24,27,76,0.88));
  box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 7px 13px rgba(2,1,27,0.2);
  color: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.practice-page .picking-palette .pattern-action-card:hover,
.practice-page .pattern-extra-palette button:hover { border-color: rgba(183,154,255,0.9); transform: translateY(-1px); }
.practice-page .picking-palette .pattern-action-card.is-selected,
.practice-page .pattern-extra-palette button.is-selected {
  border-color: var(--pattern-cyan);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), transparent 34%),
    linear-gradient(180deg, rgba(26,56,121,0.94), rgba(18,29,82,0.94));
  box-shadow: inset 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(66,236,255,0.18), 0 0 20px rgba(38,212,255,0.37);
}
.pattern-action-copy { display: grid; justify-items: center; gap: 0.04rem; }
.pattern-action-copy strong { color: #fff; font-size: 1rem; line-height: 1.1; }
.pattern-action-copy small { color: rgba(236,231,255,0.82); font-size: 0.68rem; font-weight: 550; }
.pattern-action-caption { display: block; margin-top: 0.2rem; color: rgba(229,222,255,0.67); font-size: 0.6rem; font-weight: 600; }
.pattern-string-diagram,
.pattern-strum-diagram {
  position: relative;
  display: block;
  width: min(4rem, 82%);
  height: 2.9rem;
  margin: 0.35rem auto 0;
  background:
    repeating-linear-gradient(90deg, rgba(180,178,229,0.55) 0 1px, transparent 1px 0.72rem),
    repeating-linear-gradient(180deg, rgba(157,158,211,0.38) 0 1px, transparent 1px 0.72rem);
}
.pattern-string-diagram::before {
  position: absolute;
  top: -0.08rem;
  bottom: -0.08rem;
  left: var(--pattern-string-x, 10%);
  width: 0.14rem;
  border-radius: 99px;
  background: #ff9e22;
  box-shadow: 0 0 5px #ff8a00, 0 0 11px rgba(255,137,24,0.92);
  content: "";
}
.pattern-string-diagram::after {
  position: absolute;
  top: 48%;
  left: calc(var(--pattern-string-x, 10%) - 0.26rem);
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff9e22;
  box-shadow: 0 0 8px #ff8b16;
  content: "";
  transform: translateY(-50%);
}
[data-pattern-marker="bass"] { --pattern-string-x: 9%; }
[data-pattern-marker="bass2"] { --pattern-string-x: 23%; }
[data-pattern-marker="5"] { --pattern-string-x: 24%; }
[data-pattern-marker="4"] { --pattern-string-x: 39%; }
[data-pattern-marker="3"] { --pattern-string-x: 54%; }
[data-pattern-marker="2"] { --pattern-string-x: 69%; }
[data-pattern-marker="1"] { --pattern-string-x: 84%; }
.pattern-string-legend {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.65rem;
  color: rgba(225,218,255,0.7);
  font-size: 0.61rem;
}
.pattern-string-legend i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(156,135,234,0.6), transparent); }
.pattern-strum-diagram { overflow: hidden; }
.pattern-strum-diagram i,
.pattern-strum-diagram i::before,
.pattern-strum-diagram i::after { position: absolute; display: block; content: ""; }
.pattern-strum-diagram i { top: 50%; right: 10%; left: 10%; height: 0.14rem; background: #f4f0ff; box-shadow: 0 0 7px #744cff; }
.pattern-strum-diagram i::after {
  top: -0.34rem;
  right: -0.02rem;
  width: 0.52rem;
  height: 0.52rem;
  border-top: 0.14rem solid #f4f0ff;
  border-right: 0.14rem solid #f4f0ff;
  transform: rotate(45deg);
}
[data-pattern-action="up"] .pattern-strum-diagram i,
[data-pattern-action="up_mute"] .pattern-strum-diagram i,
[data-pattern-action="up3"] .pattern-strum-diagram i { transform: scaleX(-1); }
[data-pattern-action="down_mute"] .pattern-strum-diagram::after,
[data-pattern-action="up_mute"] .pattern-strum-diagram::after {
  position: absolute;
  right: 23%;
  bottom: -0.05rem;
  color: #fff;
  content: "×";
  font-size: 1rem;
  text-shadow: 0 0 6px #7550ff;
}
[data-pattern-action="down3"] .pattern-strum-diagram::before,
[data-pattern-action="up3"] .pattern-strum-diagram::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--pattern-cyan) 0 2px, transparent 2px 0.72rem);
  box-shadow: 0 0 13px rgba(66,236,255,0.52);
  content: "";
}
[data-pattern-action="pluck3"] .pattern-strum-diagram i { background: transparent; box-shadow: none; }
[data-pattern-action="pluck3"] .pattern-strum-diagram i::after {
  top: -0.3rem;
  right: 0;
  width: auto;
  height: auto;
  border: 0;
  color: var(--pattern-cyan);
  content: "● ● ●";
  font-size: 0.72rem;
  letter-spacing: 0.02rem;
  text-shadow: 0 0 7px var(--pattern-cyan);
  transform: none;
}
.pattern-extra-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; margin-top: 0.55rem; }
.practice-page .pattern-extra-palette button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.7rem;
  padding: 0.45rem 0.65rem;
}
.pattern-extra-palette button > span { color: #a784ff; font-size: 1.2rem; text-shadow: 0 0 8px rgba(130,81,255,0.68); }
.pattern-extra-palette button > strong { color: #e9e4ff; font-size: 0.72rem; font-weight: 650; }
.pattern-extra-palette button > i { color: #b690ff; font-style: normal; }
[data-pattern-action="bass_note"] > span,
[data-pattern-action="bass_note"] > i { color: #ffd04e !important; }
.pattern-sequence-panel { overflow: hidden; }
.practice-page .picking-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.practice-page .picking-beat {
  min-width: 0;
  padding: 0.38rem;
  border: 1px solid rgba(121,97,224,0.55);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(57,55,136,0.74), rgba(24,27,76,0.78));
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 6px 13px rgba(2,1,24,0.2);
}
.practice-page .picking-beat.is-split { border-color: rgba(148,117,255,0.78); }
.practice-page .picking-beat.is-quarter-split { grid-column: auto; }
.practice-page .picking-beat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.25rem;
  margin: 0 0 0.2rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
}
.practice-page .picking-split-button {
  padding: 0.1rem 0.2rem;
  border: 0;
  border-radius: 5px;
  background: rgba(121,83,232,0.19);
  color: rgba(227,219,255,0.76);
  font-size: 0.47rem;
  line-height: 1;
}
.practice-page .picking-beat-actions { display: grid; gap: 0.18rem; }
.practice-page .picking-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.25rem 0.1rem;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(71,68,156,0.72), rgba(33,34,94,0.56));
  color: #fff;
}
.practice-page .picking-slot:hover { background: linear-gradient(160deg, rgba(87,79,187,0.84), rgba(39,39,109,0.68)); }
.practice-page .picking-slot > strong { color: #fff; font-size: 0.76rem; line-height: 1; }
.practice-page .picking-slot .pattern-string-diagram,
.practice-page .picking-slot .pattern-strum-diagram { width: min(2.5rem, 88%); height: 2rem; margin-top: 0.1rem; }
.practice-page .picking-beat.is-split .picking-slot .pattern-string-diagram,
.practice-page .picking-beat.is-split .picking-slot .pattern-strum-diagram { width: min(1.55rem, 92%); }
.practice-page .picking-beat.is-quarter-split .picking-beat-actions { gap: 0.08rem; }
.practice-page .picking-beat.is-quarter-split .picking-slot { min-height: 3.65rem; padding-right: 0; padding-left: 0; }
.practice-page .picking-beat.is-quarter-split .picking-slot > strong { font-size: 0.64rem; }
.practice-page .picking-beat.is-quarter-split .picking-slot .pattern-string-diagram,
.practice-page .picking-beat.is-quarter-split .picking-slot .pattern-strum-diagram { width: min(0.85rem, 94%); }
.practice-page .picking-slot .pattern-rhythm-icon { color: #bd9bff; font-size: 1.25rem; line-height: 1; }
.practice-page .picking-slot.is-rest { background: rgba(30,31,81,0.5); color: rgba(236,231,255,0.62); }
.pattern-description-row {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.65rem;
  color: rgba(235,229,255,0.86);
  font-size: 0.72rem;
}
.pattern-description-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(145, 113, 244, 0.5);
  border-radius: 7px;
  outline: none;
  background: rgba(7, 10, 43, 0.72);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}
.pattern-description-row input:focus {
  border-color: rgba(114, 221, 255, 0.9);
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 0 12px rgba(70, 190, 255, 0.2);
}
.practice-page .pattern-copy-button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(148, 113, 245, 0.62);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(79, 61, 157, 0.82), rgba(34, 29, 91, 0.9));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 750;
}
.pattern-text-confirm {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: calc(100% + 0.45rem);
  display: flex;
  align-items: center;
  gap: 0.42rem;
  max-width: min(28rem, 92vw);
  padding: 0.48rem 0.55rem;
  border: 1px solid rgba(138, 205, 255, 0.64);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(25, 27, 91, 0.98), rgba(10, 13, 55, 0.98));
  box-shadow: inset 0 1px rgba(255,255,255,0.17), 0 10px 28px rgba(3, 2, 30, 0.48), 0 0 16px rgba(91, 70, 227, 0.28);
  color: #fff;
  white-space: nowrap;
}
.pattern-text-confirm[hidden] { display: none; }
.practice-page .pattern-text-confirm button {
  min-height: 1.75rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid rgba(151, 123, 247, 0.66);
  border-radius: 6px;
  background: rgba(92, 62, 196, 0.56);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 750;
}
.pattern-text-status {
  display: block;
  min-height: 1rem;
  padding: 0.12rem 0.75rem 0.35rem;
  color: rgba(183, 220, 255, 0.88);
  font-size: 0.66rem;
  text-align: center;
}
.practice-page .picking-editor-actions { display: grid; gap: 0.55rem; margin: 0; }
.practice-page .picking-editor-actions button {
  min-height: 3.35rem;
  border: 1px solid rgba(153,116,255,0.82);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 35%),
    linear-gradient(140deg, #6f40ff, #4824d4);
  box-shadow: inset 0 1px rgba(255,255,255,0.28), 0 0 18px rgba(103,57,255,0.26), 0 9px 17px rgba(11,4,49,0.3);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 750;
}
.practice-page .picking-preview-button {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 0 0.7rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
}
.pattern-preview-controls {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}
.pattern-preview-controls .picking-preview-button { min-width: 0; }
.practice-page .pattern-metronome-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 0.28rem;
  min-width: 5.6rem;
  min-height: 3.35rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(145, 116, 239, 0.58);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 38%),
    linear-gradient(145deg, rgba(43,40,103,0.88), rgba(20,23,67,0.92));
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 7px 15px rgba(2,1,24,0.2);
  color: rgba(238, 233, 255, 0.84);
  cursor: pointer;
}
.pattern-metronome-toggle input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: #8b62ff;
}
.pattern-metronome-toggle > span { color: #b898ff; font-size: 0.9rem; text-shadow: 0 0 8px rgba(126,82,255,0.7); }
.pattern-metronome-toggle strong { grid-column: 1 / -1; font-size: 0.57rem; text-align: center; }
.pattern-metronome-toggle:has(input:checked) {
  border-color: rgba(82, 226, 255, 0.88);
  box-shadow: inset 0 1px rgba(255,255,255,0.18), 0 0 15px rgba(54,205,255,0.22);
  color: #fff;
}
.practice-page .picking-preview-button[aria-pressed="true"] {
  border-color: rgba(111, 238, 255, 0.94);
  box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 0 22px rgba(80, 91, 255, 0.48), 0 9px 17px rgba(11,4,49,0.3);
}
.picking-preview-button > span { grid-row: 1 / span 2; font-size: 1.2rem; }
.picking-preview-button > strong { font-size: 0.92rem; }
.picking-preview-button > small { color: rgba(239,234,255,0.8); font-size: 0.6rem; font-weight: 550; }
.pattern-favourite-save { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, auto); gap: 0.55rem; }
.pattern-song-slot-save { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto); gap: 0.55rem; }
.practice-page .pattern-save-slot {
  border-color: rgba(101, 205, 255, 0.72);
  background: linear-gradient(145deg, rgba(43, 65, 145, 0.94), rgba(34, 29, 100, 0.94));
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 8px 16px rgba(2,1,24,0.24);
}
.practice-page .pattern-save-favourite {
  border-color: rgba(146,116,243,0.7);
  background: linear-gradient(145deg, rgba(51,45,118,0.9), rgba(27,27,81,0.9));
  box-shadow: inset 0 1px rgba(255,255,255,0.11), 0 8px 15px rgba(2,1,24,0.22);
}
.practice-page .pattern-save-main { font-size: 0.96rem; }
.pattern-save-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}
.practice-page .picking-editor-actions .pattern-save-actions button {
  min-height: 2.7rem;
  padding: 0.45rem 0.8rem;
}
.practice-page .picking-editor-actions .pattern-close-main {
  min-width: 4.8rem;
  border-color: rgba(182,164,244,0.52);
  background: linear-gradient(145deg, rgba(47,42,103,0.92), rgba(25,24,70,0.94));
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 7px 14px rgba(2,1,24,0.2);
  color: rgba(244,240,255,0.92);
  font-size: 0.78rem;
}
.practice-page .picking-editor-note {
  margin: -0.15rem 0 0;
  color: rgba(221,213,255,0.58);
  font-size: 0.61rem;
  line-height: 1.35;
  text-align: center;
}
.practice-page .picking-editor-note a {
  color: rgba(165, 220, 255, 0.88);
  font-weight: 700;
  text-decoration-color: rgba(165, 220, 255, 0.42);
  text-underline-offset: 0.14em;
}
.practice-page .picking-editor-note a:hover { color: #fff; }
.practice-page .picking-editor-actions button:disabled { cursor: wait; opacity: 0.68; }

@container (min-width: 36rem) {
  .pattern-string-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pattern-strum-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pattern-extra-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .practice-page .picking-editor-actions { grid-template-columns: minmax(12rem, 1fr) minmax(17rem, 1.3fr); }
  .pattern-save-actions { grid-column: 1 / -1; }
}
@container (min-width: 55rem) {
  .pattern-config-panel { grid-template-columns: 1.15fr 0.95fr 1fr 1.1fr 1.25fr; }
  .pattern-favourite-select { grid-column: auto; }
  .pattern-action-panels { grid-template-columns: 1.05fr 1fr; }
  .pattern-string-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pattern-strum-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .practice-page .picking-palette .pattern-action-card { min-height: 7.7rem; }
  .practice-page .picking-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .practice-page .picking-editor-actions { grid-template-columns: 1fr 1.25fr 0.85fr; align-items: stretch; }
  .pattern-save-actions { grid-column: auto; }
}
@media (min-width: 841px) {
  #song-section-practice.has-practice-sidebar:has(.picking-editor[open]) .practice-player.card,
  #song-section-practice.has-practice-sidebar:has(.picking-editor[open]) .practice-sidebar { grid-column: 1 / -1; }
  #song-section-practice.has-practice-sidebar:has(.picking-editor[open]) .practice-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .practice-page .picking-editor { margin-right: 0.55rem; margin-left: 0.55rem; border-radius: 16px; }
  .practice-page .picking-editor > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.55rem; min-height: 4rem; padding: 0.65rem 0.7rem; }
  .pattern-editor-wave { width: 2.25rem; height: 2.15rem; }
  .pattern-editor-brand { display: none; }
  .pattern-editor-heading strong { font-size: 1.15rem; }
  .pattern-editor-heading small { font-size: 0.64rem; }
  .pattern-editor-toggle { width: 1.6rem; height: 1.6rem; }
  .pattern-editor-toggle::after { font-size: 1rem; line-height: 1.45rem; }
  .picking-editor > form { gap: 0.58rem; padding: 0.58rem; }
  .pattern-config-panel,
  .pattern-action-panel,
  .pattern-sequence-panel { padding: 0.58rem; border-radius: 13px; }
  .pattern-action-panel > header,
  .pattern-sequence-panel > header { grid-template-columns: auto 1fr; gap: 0.4rem; }
  .pattern-sequence-panel > header { grid-template-columns: auto 1fr; }
  .pattern-sequence-actions { grid-column: 1 / -1; justify-self: start; padding-left: 1.8rem; }
  .pattern-action-panel header p,
  .pattern-sequence-panel header p { grid-column: 1 / -1; justify-self: start; padding-left: 1.8rem; text-align: left; }
  .pattern-string-legend { display: none; }
  .practice-page .picking-grid { gap: 0.28rem; }
  .practice-page .picking-beat { padding: 0.28rem; }
  .practice-page .picking-slot { min-height: 3.75rem; }
  .pattern-description-row { justify-content: flex-start; font-size: 0.64rem; }
  .pattern-favourite-save { grid-template-columns: 1fr; }
  .pattern-song-slot-save { grid-template-columns: 1fr; }
}
@media (max-width: 370px) {
  .practice-page .picking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared deep-indigo glass from the pattern editor. */
.practice-page {
  --deep-indigo-frame: rgba(134, 86, 255, 0.78);
  --deep-indigo-frame-soft: rgba(134, 103, 255, 0.52);
  --deep-indigo-top: rgba(25, 19, 77, 0.93);
  --deep-indigo-bottom: rgba(8, 9, 39, 0.95);
  --deep-indigo-glow: rgba(96, 55, 223, 0.23);
}

.practice-page .picking-editor,
.practice-page .karaoke-stage,
.practice-page .karaoke-transport-dock {
  border-color: var(--deep-indigo-frame);
  background:
    radial-gradient(circle at 10% 4%, rgba(112,75,255,0.22), transparent 18rem),
    radial-gradient(circle at 92% 55%, rgba(41,83,222,0.13), transparent 22rem),
    linear-gradient(145deg, var(--deep-indigo-top), var(--deep-indigo-bottom)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.18),
    inset 0 -1px rgba(107,70,228,0.3),
    0 18px 42px rgba(3,1,28,0.42),
    0 0 30px var(--deep-indigo-glow);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}
.practice-page .karaoke-stage {
  border-color: var(--deep-indigo-frame);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.19),
    inset 0 -28px 58px rgba(3,3,25,0.25),
    0 16px 34px rgba(2,1,24,0.38),
    0 0 28px var(--deep-indigo-glow);
}
.practice-page .karaoke-stage::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,0.12), transparent 18%, transparent 63%, rgba(122,84,255,0.065)),
    radial-gradient(circle at 52% 40%, rgba(75,66,184,0.17), transparent 48%);
}

.chord-progression-rail .compact-playing > div {
  border-color: var(--deep-indigo-frame);
  background:
    radial-gradient(circle at 10% 4%, rgba(112,75,255,0.22), transparent 18rem),
    radial-gradient(circle at 92% 55%, rgba(41,83,222,0.13), transparent 22rem),
    linear-gradient(145deg, var(--deep-indigo-top), var(--deep-indigo-bottom));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.18),
    inset 0 -1px rgba(107,70,228,0.3),
    0 10px 24px rgba(2,1,28,0.3),
    0 0 22px var(--deep-indigo-glow);
}
.chord-progression-rail .compact-playing > div {
  border-width: 1px;
  border-style: solid;
}

.practice-page .picking-editor select option,
.practice-page .picking-editor select optgroup {
  background: #f4f1ff;
  color: #11143f;
}

.song-topbar .song-section-nav .song-nav-edit-icon {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  overflow: visible;
  color: currentColor;
}
.song-nav-edit-page,
.song-nav-edit-fold,
.song-nav-edit-lines {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.song-nav-edit-pencil path {
  fill: currentColor;
  stroke: #17113d;
  stroke-width: 0.65;
}
.song-nav-edit-icon-strumming .song-nav-edit-lines { stroke-width: 1.8; }

.song-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  grid-template-columns: minmax(8rem, auto) minmax(8rem, 0.9fr) minmax(0, 2.35fr) auto;
}
.song-topbar-current {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
  padding: 0.18rem 0.55rem;
  border-inline-start: 1px solid rgba(198, 181, 255, 0.2);
}
.song-topbar-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
}
.song-topbar-current h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.84rem, 1.2vw, 1.08rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-topbar-current .song-title-rating {
  flex: 0 0 auto;
  padding: 0.08rem 0.18rem;
}
.song-topbar-current .song-title-rating button,
.song-topbar-current .song-title-rating span {
  min-width: 0.82rem;
  min-height: 1rem;
  font-size: 0.78rem;
}
.song-topbar-current-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  color: rgba(235, 229, 255, 0.62);
  font-size: 0.58rem;
  line-height: 1.1;
  white-space: nowrap;
}
.song-topbar-current-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-topbar-current .song-rating-summary {
  flex: 0 0 auto;
  font-size: 0.55rem;
}
.song-topbar > .account-menu {
  z-index: 40;
  justify-self: end;
}
.song-topbar > .account-menu summary {
  min-height: 2.45rem;
  border-color: rgba(173, 145, 255, 0.42);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.1), transparent 38%),
    linear-gradient(145deg, rgba(46,37,115,0.88), rgba(19,18,61,0.92));
  color: #f4f0ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 7px 17px rgba(4,2,28,0.26);
}
.song-topbar > .account-menu summary:hover,
.song-topbar > .account-menu[open] summary {
  border-color: rgba(176, 140, 255, 0.9);
}
.song-topbar > .account-menu .account-popover {
  color: var(--fg);
}

@media (max-width: 760px) {
  .song-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.35rem 0.6rem;
  }
  .song-topbar-brand { grid-column: 1; margin-bottom: 0.25rem; }
  .song-topbar-current { grid-column: 2; grid-row: 1; padding-inline: 0.4rem; }
  .song-topbar-title-row { display: grid; gap: 0.12rem; }
  .song-topbar-current h1 { font-size: 0.82rem; }
  .song-topbar-current .song-title-rating { width: fit-content; }
  .song-topbar-current .song-rating-summary { display: none; }
  .song-topbar > .account-menu { grid-column: 3; grid-row: 1; align-self: center; }
  .song-topbar > .account-menu summary { min-height: 2.2rem; }
  .song-topbar > .account-menu .account-name { max-width: 5.4rem; }
  .song-topbar .song-section-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (max-width: 480px) {
  .song-topbar-brand { gap: 0.35rem; }
  .song-topbar-brand strong { font-size: 0.72rem; white-space: nowrap; }
  .song-topbar-brand small { display: none; }
  .song-topbar-current { border-inline-start: 0; }
  .song-topbar-current-meta { font-size: 0.54rem; }
}

/* Piano-roll pattern editor ------------------------------------------------ */
.pattern-sequencer-config,
.pattern-roll-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 88, 255, 0.72);
  border-radius: 15px;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.075), transparent 24%),
    radial-gradient(circle at 5% 0%, rgba(92, 65, 226, 0.22), transparent 23rem),
    linear-gradient(145deg, rgba(20, 22, 79, 0.88), rgba(7, 10, 43, 0.94));
  box-shadow:
    inset 0 1px rgba(255,255,255,0.15),
    inset 0 -1px rgba(85, 65, 196, 0.28),
    0 10px 28px rgba(2, 1, 29, 0.3),
    0 0 24px rgba(100, 54, 235, 0.13);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.pattern-sequencer-config { padding: 0.75rem; }
.pattern-section-routing { display: grid; gap: 0.62rem; }
.pattern-load-and-suggestions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.9fr);
  align-items: start;
  gap: 0.8rem;
}
.pattern-section-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.pattern-section-picker.is-save-target {
  padding-top: 0.58rem;
  border-top: 1px solid rgba(137, 115, 230, 0.26);
}
.pattern-section-picker legend {
  margin-bottom: 0.45rem;
  color: rgba(240, 235, 255, 0.88);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.pattern-section-pills { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.practice-page .pattern-section-pills label {
  --section-pill-a: rgba(32, 247, 194, 0.92);
  --section-pill-b: rgba(0, 158, 133, 0.86);
  --section-pill-edge: rgba(171, 255, 231, 0.72);
  --section-pill-glow: rgba(28, 237, 190, 0.28);
  --section-pill-text: #a5ffe8;
  display: block;
  cursor: pointer;
}
.practice-page .pattern-section-pills label.is-section-intro,
.practice-page .pattern-section-pills label.is-section-outro {
  --section-pill-a: rgba(177, 105, 255, 0.94);
  --section-pill-b: rgba(91, 41, 238, 0.88);
  --section-pill-edge: rgba(220, 192, 255, 0.76);
  --section-pill-glow: rgba(152, 83, 255, 0.34);
  --section-pill-text: #dec5ff;
}
.practice-page .pattern-section-pills label.is-section-chorus {
  --section-pill-a: rgba(255, 62, 171, 0.96);
  --section-pill-b: rgba(205, 0, 112, 0.88);
  --section-pill-edge: rgba(255, 177, 226, 0.78);
  --section-pill-glow: rgba(255, 44, 160, 0.35);
  --section-pill-text: #ffb5de;
}
.practice-page .pattern-section-pills label.is-section-bridge {
  --section-pill-a: rgba(31, 230, 255, 0.96);
  --section-pill-b: rgba(0, 104, 225, 0.88);
  --section-pill-edge: rgba(169, 245, 255, 0.78);
  --section-pill-glow: rgba(31, 211, 255, 0.36);
  --section-pill-text: #a9f5ff;
}
.practice-page .pattern-section-pills label.is-section-instrumental {
  --section-pill-a: rgba(255, 193, 54, 0.97);
  --section-pill-b: rgba(235, 91, 12, 0.89);
  --section-pill-edge: rgba(255, 226, 151, 0.8);
  --section-pill-glow: rgba(255, 166, 37, 0.36);
  --section-pill-text: #ffe297;
}
.practice-page .pattern-section-pills label.is-section-alternate-one {
  --section-pill-a: rgba(155, 240, 54, 0.96);
  --section-pill-b: rgba(21, 163, 92, 0.88);
  --section-pill-edge: rgba(211, 255, 164, 0.8);
  --section-pill-glow: rgba(126, 232, 70, 0.34);
  --section-pill-text: #d3ffa4;
}
.practice-page .pattern-section-pills label.is-section-alternate-two {
  --section-pill-a: rgba(83, 132, 255, 0.97);
  --section-pill-b: rgba(57, 37, 211, 0.9);
  --section-pill-edge: rgba(180, 205, 255, 0.82);
  --section-pill-glow: rgba(75, 112, 255, 0.38);
  --section-pill-text: #b4cdff;
}
.pattern-section-pills input { position: absolute; opacity: 0; pointer-events: none; }
.pattern-section-pills span {
  display: block;
  padding: 0.4rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--section-pill-edge) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 47, 116, 0.68), rgba(24, 27, 76, 0.72));
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
  color: var(--section-pill-text);
  font-size: 0.7rem;
  font-weight: 750;
  transition: 140ms ease;
  opacity: 0.58;
  filter: saturate(0.62) brightness(0.86);
}
.pattern-section-pills input:checked + span {
  border-color: var(--section-pill-edge);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, var(--section-pill-a), var(--section-pill-b));
  box-shadow: inset 0 1px rgba(255,255,255,0.42), 0 0 14px var(--section-pill-glow);
  color: #fff;
  opacity: 1;
  filter: saturate(1.16) brightness(1.05);
}
.pattern-section-pills input:focus-visible + span { outline: 2px solid #79e9ff; outline-offset: 2px; }

/* Screen-aware sticky toolbar ------------------------------------------------ */
.song-secondary-toolbar {
  position: sticky;
  z-index: 85;
  top: var(--song-topbar-height, 5rem);
  margin: -1rem -0.55rem 1rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(197, 181, 255, 0.26);
  border-top: 0;
  border-radius: 0 0 17px 17px;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.105), transparent 23%, transparent 72%, rgba(117,230,255,0.055)),
    rgba(22, 17, 53, 0.88);
  box-shadow: inset 0 1px rgba(255,255,255,0.13), 0 12px 28px rgba(2,1,17,0.34);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.song-secondary-toolbar[hidden],
.song-secondary-panel[hidden] { display: none !important; }
.song-secondary-panel {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
}
.secondary-toolbar-spacer { flex: 1 1 auto; }
.song-secondary-toolbar button,
.song-secondary-toolbar a,
.song-secondary-toolbar summary,
.song-secondary-toolbar select,
.song-secondary-toolbar input { min-height: 2.35rem; }
.song-secondary-toolbar button,
.song-secondary-toolbar a,
.song-secondary-toolbar summary {
  border: 1px solid rgba(197, 181, 255, 0.27);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(78,51,148,0.12));
  color: #f5f1ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.12);
  font-size: 0.7rem;
  font-weight: 760;
  text-decoration: none;
}
.song-secondary-toolbar button:hover,
.song-secondary-toolbar a:hover,
.song-secondary-toolbar summary:hover {
  border-color: rgba(205,190,255,0.62);
  background: linear-gradient(155deg, rgba(255,255,255,0.17), rgba(102,65,205,0.2));
}
.song-secondary-toolbar .toolbar-action-cyan,
.song-secondary-toolbar .toolbar-transform {
  border-color: rgba(89, 230, 255, 0.58);
  background: linear-gradient(145deg, rgba(44,221,246,0.2), rgba(20,90,147,0.28));
  box-shadow: inset 0 1px rgba(211,252,255,0.22), 0 0 14px rgba(39,211,245,0.1);
}
.song-secondary-toolbar .toolbar-action-save {
  border-color: rgba(255, 98, 215, 0.6);
  background: linear-gradient(145deg, rgba(255,65,193,0.3), rgba(126,52,220,0.38));
  box-shadow: inset 0 1px rgba(255,225,249,0.26), 0 0 16px rgba(236,64,207,0.14);
}
.toolbar-secondary-link,
.toolbar-text-button,
.toolbar-action-cyan,
.toolbar-action-save { display: inline-flex; align-items: center; justify-content: center; padding: 0.38rem 0.68rem; white-space: nowrap; }
.secondary-transport { display: inline-flex; align-items: center; gap: 0.22rem; }
.song-secondary-toolbar .transport-icon-button {
  display: inline-grid;
  width: 2.38rem;
  min-width: 2.38rem !important;
  height: 2.38rem;
  min-height: 2.38rem;
  padding: 0.3rem;
  place-items: center;
  border-radius: 50%;
}
.song-secondary-toolbar .transport-icon-button .transport-icon { width: 1.4rem; height: 1.2rem; }
.song-secondary-toolbar .transport-icon-button .transport-icon-back,
.song-secondary-toolbar .transport-icon-button .transport-icon-forward { width: 1.9rem; height: 1.28rem; }
.song-secondary-toolbar .karaoke-play-toggle.transport-icon-button {
  width: 2.72rem;
  min-width: 2.72rem !important;
  height: 2.72rem;
  border-color: rgba(219,205,255,0.85);
  background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.35), transparent 28%), linear-gradient(145deg, #9c75ff, #6540dc 72%);
  box-shadow: 0 0 17px rgba(148,100,255,.5);
}
.playback-volume-control {
  position: relative;
  display: inline-flex;
  width: auto;
  align-items: center;
  margin: 0;
}
.song-secondary-toolbar .playback-volume-toggle {
  display: inline-grid;
  width: 2.38rem;
  min-width: 2.38rem;
  padding: 0.45rem;
  place-items: center;
}
.playback-volume-control svg { width: 1.2rem; height: 1.2rem; }
.playback-volume-slider {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.42rem);
  left: 0;
  display: flex;
  width: 10.8rem;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.65rem;
  visibility: hidden;
  border: 1px solid rgba(192,222,255,0.34);
  border-radius: 11px;
  background: rgba(21,17,52,0.97);
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: 130ms ease;
}
.playback-volume-control:hover .playback-volume-slider,
.playback-volume-control:focus-within .playback-volume-slider,
.playback-volume-control.is-open .playback-volume-slider { visibility: visible; opacity: 1; transform: none; }
.playback-volume-slider input { flex: 1; width: 7rem; min-height: 1.5rem; accent-color: #70e9ff; }
.playback-volume-slider output { min-width: 2.1rem; color: rgba(235,245,255,.75); font-size: .64rem; }
.secondary-speed-control {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.3rem;
  color: rgba(239,235,255,.78);
  font-size: .66rem;
  font-weight: 720;
  white-space: nowrap;
}
.secondary-speed-control input { width: clamp(4.5rem, 9vw, 7rem); accent-color: #d36cff; }
.secondary-speed-control output { min-width: 2.35rem; font-variant-numeric: tabular-nums; }
.toolbar-stepper { display: inline-flex; align-items: center; gap: .18rem; color: rgba(239,235,255,.72); font-size: .68rem; font-weight: 760; }
.toolbar-stepper > span { padding-inline: .32rem; }
.toolbar-stepper a { min-width: 2.35rem; padding: .4rem .62rem; text-align: center; }
.toolbar-stepper output { min-width: 1.65rem; color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.toolbar-status-chip { padding: .48rem .62rem; border: 1px solid rgba(141,233,255,.3); border-radius: 999px; color: #a8efff; font-size: .67rem; font-weight: 760; white-space: nowrap; }
.toolbar-text-button[aria-pressed="true"] { border-color: rgba(91,232,255,.7); color: #c6f8ff; box-shadow: 0 0 14px rgba(42,211,247,.18); }
.toolbar-transform { display: grid; gap: .05rem; padding: .32rem .62rem; text-align: left; white-space: nowrap; }
.toolbar-transform strong { font-size: .68rem; }
.toolbar-transform small { color: rgba(206,246,255,.72); font: 600 .58rem/1.1 ui-monospace, monospace; }
.sheet-editor-actions.is-toolbar-moved > button { display: none; }

.secondary-pattern-toolbar { align-items: stretch; gap: .55rem; }
.pattern-toolbar-zone { position: relative; display: flex; min-width: 0; flex: 1 1 50%; align-items: center; gap: .32rem; padding: .05rem .48rem; }
.pattern-toolbar-zone + .pattern-toolbar-zone { border-inline-start: 1px solid rgba(208,191,255,.22); }
.pattern-toolbar-zone > strong { flex: 0 0 auto; color: #b9efff; font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.pattern-toolbar-zone.is-save > strong { color: #ffb7e8; }
.toolbar-select { display: grid; min-width: 0; flex: 1 1 7.5rem; gap: .08rem; color: rgba(229,222,255,.62); font-size: .55rem; }
.toolbar-select select,
.toolbar-slot-name input {
  width: 100%;
  min-width: 0;
  padding: .3rem .45rem;
  border: 1px solid rgba(197,181,255,.27);
  border-radius: 8px;
  background: rgba(15,17,54,.88);
  color: #f4f1ff;
  font-size: .66rem;
}
.toolbar-slot-name { min-width: 5rem; flex: .75 1 7rem; }
.toolbar-popover { position: relative; flex: 0 0 auto; }
.toolbar-popover > summary { display: flex; min-width: 5.6rem; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .52rem; cursor: pointer; list-style: none; }
.toolbar-popover > summary::-webkit-details-marker { display: none; }
.toolbar-popover-card { position: absolute; z-index: 12; top: calc(100% + .42rem); left: 0; display: flex; width: min(24rem, 78vw); padding: .62rem; border: 1px solid rgba(169,205,255,.35); border-radius: 12px; background: rgba(17,15,51,.98); box-shadow: 0 15px 36px rgba(0,0,0,.42); }
.pattern-toolbar-zone.is-save .toolbar-popover-card { right: 0; left: auto; }
.song-secondary-toolbar .pattern-section-pills span { padding: .36rem .58rem; font-size: .65rem; }
.pattern-sequencer-config { padding: .75rem; }
.pattern-sequencer-config .pattern-sequencer-controls { margin: 0; }

.song-section-panel,
.picking-editor,
.sheet-editor,
#song-settings { scroll-margin-top: calc(var(--song-toolbar-stack-height, 9rem) + .75rem); }
html { scroll-padding-top: calc(var(--song-toolbar-stack-height, 9rem) + .75rem); }

@media (max-width: 900px) {
  .song-secondary-toolbar { overflow: visible; }
  .song-secondary-panel { width: 100%; min-width: 0; flex-wrap: wrap; }
  .secondary-pattern-toolbar { width: 100%; }
  .pattern-toolbar-zone { flex: 1 1 24rem; flex-wrap: wrap; }
  .secondary-toolbar-spacer { min-width: .5rem; }
}

@media (max-width: 760px) {
  .song-secondary-toolbar { margin: -0.8rem -0.2rem .8rem; padding: .3rem .35rem; border-radius: 0 0 14px 14px; }
  .song-secondary-toolbar button,
  .song-secondary-toolbar a,
  .song-secondary-toolbar summary,
  .song-secondary-toolbar select,
  .song-secondary-toolbar input { min-height: 2.6rem; }
  .song-secondary-toolbar .transport-icon-button { width: 2.6rem; min-width: 2.6rem !important; height: 2.6rem; }
  .song-secondary-toolbar .karaoke-play-toggle.transport-icon-button { width: 2.9rem; min-width: 2.9rem !important; height: 2.9rem; }
  .secondary-speed-control > span { display: none; }
  .secondary-speed-control input { width: 4.75rem; }
  .toolbar-transform small { display: none; }
  .toolbar-transform { min-height: 2.6rem; }
  .toolbar-secondary-link { padding-inline: .55rem; }
}
.pattern-suggestions {
  min-width: 0;
  padding-inline-start: 0.8rem;
  border-inline-start: 1px solid rgba(137, 115, 230, 0.28);
}
.pattern-suggestions-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.42rem;
}
.pattern-suggestions-heading strong {
  color: rgba(240, 235, 255, 0.9);
  font-size: 0.69rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.pattern-suggestions-heading small,
.pattern-suggestion-empty {
  color: rgba(205, 197, 239, 0.58);
  font-size: 0.62rem;
}
.practice-page .pattern-suggestions-heading button {
  min-height: 1.65rem;
  margin-inline-start: auto;
  padding: 0.2rem 0.5rem;
  border-color: rgba(91, 224, 255, 0.46);
  border-radius: 999px;
  background: rgba(20, 38, 99, 0.62);
  color: #baf5ff;
  font-size: 0.62rem;
  white-space: nowrap;
}
.pattern-tab-status {
  display: block;
  min-height: 1em;
  margin-top: 0.38rem;
  color: rgba(205, 226, 255, 0.7);
  font-size: 0.62rem;
}
.pattern-tab-status a { color: #76eaff; }
.pattern-suggestion-list { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.practice-page .pattern-suggestion {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 12rem;
  gap: 0.42rem;
  padding: 0.34rem 0.5rem;
  border: 1px solid rgba(134, 196, 255, 0.36);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 42%),
    linear-gradient(180deg, rgba(35, 52, 116, 0.78), rgba(18, 23, 74, 0.82));
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 5px 13px rgba(2, 3, 30, 0.18);
  color: #f7f4ff;
  text-align: left;
}
.practice-page .pattern-suggestion.is-ai { border-color: rgba(190, 119, 255, 0.42); }
.practice-page .pattern-suggestion:hover,
.practice-page .pattern-suggestion.is-active {
  border-color: rgba(116, 229, 255, 0.82);
  box-shadow: inset 0 1px rgba(255,255,255,0.22), 0 0 15px rgba(57, 190, 255, 0.22);
  transform: translateY(-1px);
}
.pattern-suggestion-source {
  flex: 0 0 auto;
  padding: 0.18rem 0.28rem;
  border-radius: 5px;
  background: rgba(41, 211, 255, 0.16);
  color: #7eeaff;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.is-ai .pattern-suggestion-source { background: rgba(184, 106, 255, 0.17); color: #d4a6ff; }
.pattern-suggestion-copy { display: grid; min-width: 0; }
.pattern-suggestion-copy strong,
.pattern-suggestion-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pattern-suggestion-copy strong { font-size: 0.67rem; }
.pattern-suggestion-copy small { color: rgba(220, 214, 245, 0.62); font-size: 0.56rem; }
.pattern-suggestion-empty { display: block; padding: 0.34rem 0; }
.pattern-suggestion-empty[hidden] { display: none; }
.pattern-sequencer-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.72rem;
}
.pattern-roll-panel > header {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 0.75rem;
  border-bottom: 1px solid rgba(137, 105, 245, 0.28);
  background: linear-gradient(90deg, rgba(86, 62, 185, 0.16), transparent 54%);
}
.pattern-roll-panel > header > div { display: flex; align-items: center; gap: 0.45rem; }
.pattern-roll-panel h3 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}
.pattern-roll-panel > header p {
  justify-self: end;
  margin: 0;
  color: rgba(220, 213, 248, 0.67);
  font-size: 0.64rem;
  text-align: right;
}
.pattern-roll-tools { display: flex; align-items: center; gap: 0.35rem; }
.practice-page .pattern-reset-button,
.practice-page .pattern-split-button {
  min-height: 1.75rem;
  padding: 0.26rem 0.52rem;
  border: 1px solid rgba(159, 130, 255, 0.54);
  border-radius: 7px;
  background: rgba(76, 55, 150, 0.32);
  box-shadow: inset 0 1px rgba(255,255,255,0.1);
  color: #eeeaff;
  font-size: 0.59rem;
  font-weight: 800;
}
.practice-page .pattern-split-button[aria-pressed="true"] {
  border-color: rgba(71, 226, 255, 0.88);
  background: linear-gradient(145deg, rgba(43, 121, 177, 0.5), rgba(63, 43, 159, 0.52));
  box-shadow: inset 0 1px rgba(255,255,255,0.16), 0 0 13px rgba(52, 204, 255, 0.2);
}
.pattern-roll-scroll {
  max-height: min(66vh, 42rem);
  overflow: auto;
  scrollbar-color: rgba(132, 95, 239, 0.72) rgba(8, 9, 39, 0.55);
  scrollbar-width: thin;
}
.pattern-roll-grid {
  --pattern-label-width: clamp(8.25rem, 15vw, 11rem);
  --pattern-cell-width: minmax(2rem, 1fr);
  display: grid;
  grid-template-columns: var(--pattern-label-width) repeat(var(--pattern-steps), var(--pattern-cell-width));
  min-width: calc(var(--pattern-label-width) + var(--pattern-steps) * 2rem);
  padding: 0.35rem 0.4rem 0.5rem;
  isolation: isolate;
}
.pattern-roll-grid.is-fit-16 {
  --pattern-cell-width: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pattern-roll-grid.is-fit-16 .pattern-roll-cell::after {
  right: max(1px, 10%);
  left: max(1px, 10%);
}
.pattern-roll-grid.is-fit-16.is-dense .pattern-roll-slot-label { font-size: 0.55rem; }
.pattern-roll-grid.is-fit-16.is-dense .pattern-roll-step-label { font-size: 0.44rem; }
.pattern-roll-corner,
.pattern-roll-slot-label,
.pattern-roll-step-label {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  min-height: 1.8rem;
  border-bottom: 1px solid rgba(134, 109, 226, 0.32);
  background: rgba(10, 12, 49, 0.96);
  color: rgba(226, 219, 251, 0.62);
  font-size: 0.58rem;
  font-weight: 800;
}
.pattern-roll-slot-label {
  grid-row: 1;
  top: 0;
  z-index: 7;
  min-height: 1.6rem;
  border-right: 1px solid rgba(135, 105, 231, 0.34);
  color: rgba(244, 240, 255, 0.88);
  font-size: 0.62rem;
}
.pattern-roll-step-label {
  grid-row: 2;
  top: 1.6rem;
  min-height: 1.35rem;
  background: rgba(15, 17, 59, 0.97);
  color: rgba(196, 187, 232, 0.6);
  font-size: 0.52rem;
}
.pattern-roll-corner {
  grid-row: 1 / span 2;
  left: 0;
  z-index: 8;
  justify-items: start;
  padding-left: 0.65rem;
  color: rgba(236, 231, 255, 0.78);
  text-transform: uppercase;
}
.pattern-roll-slot-label.is-bar-start,
.pattern-roll-step-label.is-bar-start { border-left: 2px solid rgba(113, 223, 255, 0.78); }
.pattern-roll-step-label.is-slot-start:not(.is-bar-start) { border-left: 1px solid rgba(183, 151, 255, 0.48); }
.pattern-roll-group,
.pattern-roll-group-track {
  min-height: 1.55rem;
  border-top: 1px solid rgba(143, 109, 255, 0.3);
  border-bottom: 1px solid rgba(73, 64, 142, 0.24);
  background: linear-gradient(90deg, rgba(69, 49, 151, 0.38), rgba(34, 31, 99, 0.22));
}
.pattern-roll-group {
  position: sticky;
  left: 0;
  z-index: 5;
  grid-column: 1;
  display: flex;
  align-items: center;
  padding: 0 0.62rem;
  color: rgba(225, 215, 255, 0.88);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pattern-roll-group-track { grid-column: 2 / -1; }
.pattern-roll-row-label {
  position: sticky;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.2rem 0.55rem;
  border-right: 1px solid rgba(132, 104, 225, 0.31);
  border-bottom: 1px solid rgba(79, 71, 145, 0.24);
  background: rgba(12, 14, 54, 0.97);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .pattern-roll-row-label[data-pattern-action-preview] { cursor: pointer; }
  .pattern-roll-row-label[data-pattern-action-preview]:hover {
    border-right-color: rgba(99, 218, 255, 0.72);
    background: linear-gradient(90deg, rgba(67, 50, 155, 0.98), rgba(14, 18, 66, 0.98));
    box-shadow: inset 0 1px rgba(255,255,255,0.13), inset -3px 0 rgba(75, 210, 255, 0.24);
  }
}
.pattern-roll-row-label strong {
  display: grid;
  place-items: center;
  min-height: 1.68rem;
  border: 1px solid rgba(139, 111, 240, 0.44);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(80, 65, 174, 0.52), rgba(38, 36, 103, 0.48));
  box-shadow: inset 0 1px rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.71rem;
}
.pattern-roll-row-label span {
  overflow: hidden;
  color: rgba(226, 220, 250, 0.75);
  font-size: 0.61rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pattern-roll-cell {
  position: relative;
  min-width: 0;
  min-height: 2.55rem;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(113, 97, 185, 0.19);
  border-bottom: 1px solid rgba(91, 77, 160, 0.2);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent),
    rgba(10, 13, 48, 0.58);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.pattern-roll-cell.is-alternate-slot { background-color: rgba(25, 27, 79, 0.7); }
.pattern-roll-cell:hover { background-color: rgba(61, 51, 135, 0.46); }
.pattern-roll-cell.is-slot-start { border-left: 1px solid rgba(168, 139, 255, 0.46); }
.pattern-roll-cell.is-bar-start { border-left: 2px solid rgba(109, 214, 255, 0.52); }
.pattern-roll-cell::after {
  position: absolute;
  inset: 0.31rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 6px;
  content: "";
  transform: scale(0.72);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.pattern-roll-cell.is-active::after { opacity: 1; transform: scale(1); }
.pattern-roll-cell.is-pick.is-active::after {
  border-color: rgba(83, 230, 255, 0.96);
  background: linear-gradient(150deg, rgba(255,255,255,0.42), transparent 32%), linear-gradient(180deg, #29dcff, #1677f4);
  box-shadow: inset 0 1px rgba(255,255,255,0.62), inset 0 -5px 12px rgba(10,49,169,0.35), 0 0 12px rgba(41,210,255,0.72);
}
.pattern-roll-cell[data-action="bass"].is-active::after,
.pattern-roll-cell[data-action="bass2"].is-active::after {
  border-color: #ffce58;
  background: linear-gradient(150deg, rgba(255,255,255,0.48), transparent 34%), linear-gradient(180deg, #ffc849, #eb7a16);
  box-shadow: inset 0 1px rgba(255,255,255,0.68), inset 0 -5px 12px rgba(151,57,3,0.34), 0 0 13px rgba(255,173,37,0.7);
}
.pattern-roll-cell.is-strum.is-active::after {
  border-color: rgba(255, 101, 225, 0.98);
  background: linear-gradient(150deg, rgba(255,255,255,0.45), transparent 32%), linear-gradient(180deg, #ff59d4, #9b36ec);
  box-shadow: inset 0 1px rgba(255,255,255,0.64), inset 0 -5px 12px rgba(78,18,145,0.38), 0 0 13px rgba(232,72,255,0.68);
}
.pattern-roll-cell[data-action="up"].is-active::after,
.pattern-roll-cell[data-action="up3"].is-active::after {
  border-color: rgba(99,255,177,0.96);
  background: linear-gradient(150deg, rgba(255,255,255,0.5), transparent 33%), linear-gradient(180deg, #50efa5, #16a97e);
  box-shadow: inset 0 1px rgba(255,255,255,0.65), inset 0 -5px 12px rgba(3,91,75,0.32), 0 0 13px rgba(65,238,173,0.64);
}
.pattern-roll-cell.is-effect.is-active::after {
  border-color: rgba(177, 115, 255, 0.98);
  background: linear-gradient(150deg, rgba(255,255,255,0.48), transparent 34%), linear-gradient(180deg, #b364ff, #6d35eb);
  box-shadow: inset 0 1px rgba(255,255,255,0.62), inset 0 -5px 12px rgba(50,18,135,0.38), 0 0 13px rgba(137,80,255,0.72);
}
.pattern-roll-cell:focus-visible { z-index: 3; outline: 2px solid #fff; outline-offset: -3px; }
.pattern-roll-panel .pattern-description-row { margin: 0; padding: 0.55rem 0.75rem; border-top: 1px solid rgba(133,101,231,0.25); }
.pattern-preview-tempo {
  grid-template-columns: auto 4.5rem auto;
  align-items: center;
  align-content: center;
  gap: 0.45rem !important;
  min-height: 3.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(138, 109, 232, 0.55);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(49, 45, 112, 0.82), rgba(22, 25, 73, 0.88));
}
.practice-page .pattern-preview-tempo input {
  width: 100%;
  min-height: 2rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid rgba(128, 103, 225, 0.62);
  border-radius: 7px;
  background: #111542;
  color: #fff;
  text-align: center;
}
.practice-page .picking-editor-actions {
  grid-template-columns: minmax(12rem, 1fr) minmax(11rem, 0.62fr) minmax(16rem, 1.15fr) minmax(12rem, 0.82fr);
  align-items: stretch;
}
.pattern-save-actions { grid-column: auto; }

@media (max-width: 900px) {
  .pattern-load-and-suggestions { grid-template-columns: 1fr; }
  .pattern-suggestions { padding: 0.58rem 0 0; border-inline-start: 0; border-top: 1px solid rgba(137, 115, 230, 0.26); }
  .pattern-sequencer-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-page .picking-editor-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .practice-page .picking-editor > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.45rem; padding: 0.65rem; }
  .pattern-editor-wave { width: 2.35rem; height: 2.2rem; }
  .pattern-editor-brand { display: none; }
  .pattern-editor-heading strong { font-size: 1.08rem; }
  .picking-editor > form { padding: 0.5rem; }
  .pattern-sequencer-config { padding: 0.58rem; }
  .pattern-section-pills { gap: 0.3rem; }
  .pattern-section-pills span { padding: 0.34rem 0.58rem; font-size: 0.64rem; }
  .pattern-sequencer-controls { gap: 0.42rem; }
  .practice-page .picking-editor select { min-height: 2.45rem; font-size: 0.78rem; }
  .pattern-roll-panel > header { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem; padding: 0.55rem; }
  .pattern-roll-panel > header p { display: none; }
  .pattern-roll-grid {
    --pattern-label-width: 7.25rem;
    --pattern-cell-width: 1.82rem;
    min-width: calc(var(--pattern-label-width) + var(--pattern-steps) * 1.82rem);
    padding: 0.25rem 0.25rem 0.4rem;
  }
  .pattern-roll-grid.is-fit-16 {
    --pattern-label-width: 5.9rem;
    --pattern-cell-width: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }
  .pattern-roll-grid.is-fit-16.is-dense .pattern-roll-row-label {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: 0.22rem;
    padding-right: 0.22rem;
    padding-left: 0.25rem;
  }
  .pattern-roll-grid.is-fit-16.is-dense .pattern-roll-row-label span { font-size: 0.5rem; }
  .pattern-roll-grid.is-fit-16.is-dense .pattern-roll-cell::after {
    right: 1px;
    left: 1px;
    border-radius: 3px;
  }
  .pattern-roll-row-label { grid-template-columns: 1.85rem minmax(0, 1fr); gap: 0.3rem; min-height: 2.4rem; padding: 0.15rem 0.38rem; }
  .pattern-roll-row-label strong { min-height: 1.55rem; font-size: 0.64rem; }
  .pattern-roll-row-label span { font-size: 0.56rem; }
  .pattern-roll-cell { min-height: 2.4rem; }
  .pattern-roll-cell::after { inset: 0.32rem 0.17rem; border-radius: 5px; }
  .pattern-roll-tools { display: grid; gap: 0.25rem; }
  .practice-page .pattern-reset-button,
  .practice-page .pattern-split-button { min-height: 1.55rem; padding: 0.2rem 0.4rem; font-size: 0.53rem; }
  .pattern-roll-scroll { max-height: 62vh; }
  .pattern-description-row { gap: 0.38rem; }
  .pattern-description-row input { font-size: 0.62rem; }
  .pattern-text-confirm { left: 0; right: auto; flex-wrap: wrap; white-space: normal; }
  .practice-page .picking-editor-actions { grid-template-columns: 1fr; }
  .pattern-preview-controls { grid-template-columns: minmax(0, 1fr) 5.4rem; }
  .pattern-preview-tempo { grid-template-columns: 1fr 4.25rem auto; }
  .pattern-favourite-save { grid-template-columns: minmax(0, 1fr) auto; }
  .pattern-song-slot-save { grid-template-columns: minmax(0, 1fr) auto; }
  .practice-page .pattern-save-favourite { padding-right: 0.65rem; padding-left: 0.65rem; font-size: 0.7rem; }
}

/* The sequencer is a full Play-mode view, not a collapsed card in the player. */
.practice-page .picking-editor:not([open]) { display: none; }
#song-section-practice.is-pattern-editing .practice-player.card {
  grid-column: 1 / -1;
  padding: 0;
}
#song-section-practice.is-pattern-editing .practice-player > :not(.picking-editor):not(script) {
  display: none !important;
}
#song-section-practice.is-pattern-editing .practice-sidebar { display: none; }
#song-section-practice.is-pattern-editing .picking-editor {
  margin: 0;
  border-radius: inherit;
}

.karaoke-edit-pattern {
  position: absolute;
  z-index: 4;
  top: 0.85rem;
  inset-inline-start: 1rem;
  padding: 0.2rem 0.45rem;
  border: 0;
  border-bottom: 1px solid rgba(198, 178, 255, 0.42);
  background: transparent;
  color: rgba(218, 205, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.karaoke-edit-pattern:hover,
.karaoke-edit-pattern:focus-visible {
  border-bottom-color: rgba(224, 212, 255, 0.88);
  color: #fff;
}
.karaoke-up-next {
  display: grid;
  align-content: center;
  min-height: 6.2rem;
}
.karaoke-next {
  min-height: 1.45em;
  color: rgba(245, 241, 255, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.12rem, 3.4vw, 1.5rem);
  line-height: 1.3;
}
.practice-page .karaoke-next-chords button {
  padding: 0.18rem 0.42rem;
  color: rgba(229, 219, 255, 0.7);
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
}

@media (max-width: 560px) {
  .karaoke-edit-pattern { top: 0.65rem; inset-inline-start: 0.7rem; }
  .karaoke-up-next { min-height: 5.4rem; }
  .karaoke-next { font-size: clamp(1.08rem, 5vw, 1.35rem); }
}