:root {
  color-scheme: light;
  --ink: #171514;
  --muted: #665f58;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --line: #ded7cf;
  --red: #b63f2f;
  --red-dark: #842d24;
  --teal: #176c68;
  --gold: #d99a2b;
  --blue: #263f75;
  --shadow: 0 22px 60px rgba(23, 21, 20, 0.16);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
section, main { scroll-margin-top: 86px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.8vw, 24px);
  padding: 14px clamp(16px, 3vw, 42px);
  background: rgba(251, 250, 247, 0.9);
  border-bottom: 1px solid rgba(222, 215, 207, 0.75);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; font-weight: 800; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.55vw, 24px); color: #312d2a; font-size: 0.94rem; min-width: 0; }
.site-nav a { border-bottom: 2px solid transparent; padding: 8px 0; }
.site-nav a:hover, .site-nav a:focus-visible { border-color: var(--red); }
.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px;
  padding: 0 18px !important;
  line-height: 1;
  white-space: nowrap;
  background: rgba(251, 250, 247, 0.64);
}
.nav-button { border: 0; background: transparent; color: #312d2a; cursor: pointer; font-weight: 800; padding: 8px 0; }
.menu-toggle { display: none; }

@media (max-width: 1320px) {
  .site-header {
    gap: 12px;
    padding-inline: clamp(14px, 1.8vw, 24px);
  }
  .site-nav {
    gap: clamp(8px, 1vw, 14px);
    font-size: 0.86rem;
  }
  .nav-cta {
    min-height: 36px;
    padding-inline: 14px !important;
  }
}

.hero {
  position: relative;
  min-height: min(660px, 86vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 112px clamp(22px, 6vw, 80px) 84px;
  isolation: isolate;
}

.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -2; }
.hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.68) 42%, rgba(12, 10, 8, 0.14) 100%),
    linear-gradient(0deg, rgba(12, 10, 8, 0.48), rgba(12, 10, 8, 0.04));
}
.hero-content { max-width: 690px; color: white; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; max-width: 12ch; font-size: clamp(3rem, 7vw, 5.65rem); line-height: 0.96; letter-spacing: 0; }
h2 { margin: 0; font-size: clamp(2rem, 4.8vw, 4.6rem); line-height: 1; letter-spacing: 0; }
h3 { margin: 0; font-size: 1.18rem; }
.hero-copy { max-width: 58ch; margin: 24px 0 0; color: rgba(255, 255, 255, 0.88); font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.6; }
.hero-actions, .tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover, .button:focus-visible, .tempo-button:hover, .tool-tab:hover, .tool-tab:focus-visible { transform: translateY(-1px); }
.button.primary { background: var(--red); color: white; }
.button.primary:hover, .button.primary:focus-visible { background: var(--red-dark); }
.button.secondary { border-color: rgba(255, 255, 255, 0.6); color: white; }
.button.quiet { border-color: var(--line); background: var(--panel); }
.text-link { color: var(--red); font-weight: 900; }
.page-main { padding-top: 70px; }
/* Tighten the gap between the fixed header and the first block on every
   subpage so pages start cleanly and consistently (the section/hero defaults
   add too much top padding on top of the 70px header clearance). */
.page-main > :first-child { padding-top: clamp(28px, 4vw, 52px); }
.page-hero {
  display: grid;
  gap: 18px;
  padding: clamp(96px, 14vw, 150px) clamp(18px, 4vw, 52px) clamp(48px, 8vw, 84px);
  background: #ede8e1;
}
.page-hero h1, .auth-copy h1, .portal-loading h1, .about-section h1, .contact-band h1, .tools-page h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: 0.98;
}
.page-hero p:not(.eyebrow), .auth-copy p, .teaser-panel p {
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.65;
}
.lesson-grid-section { padding-top: 28px; }

.quick-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.quick-strip div { min-height: 106px; display: grid; align-content: center; gap: 6px; padding: 22px clamp(18px, 4vw, 52px); background: var(--paper); }
.quick-strip strong { font-size: 1.55rem; }
.quick-strip span, .lesson-panel p, .about-copy, .contact-band p, .reviews-grid blockquote { color: var(--muted); line-height: 1.6; }

.section { padding: clamp(72px, 10vw, 128px) clamp(18px, 4vw, 52px); }
.section-heading { max-width: 920px; margin-bottom: clamp(30px, 5vw, 58px); }
.lesson-grid, .reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lesson-panel, .reviews-grid figure { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 24px; }
.lesson-panel {
  position: relative;
  min-height: 236px;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(222, 215, 207, 0.88);
  background:
    radial-gradient(circle at 88% 8%, rgba(217,154,43,0.14), transparent 32%),
    linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
}
.lesson-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--teal);
}
.lesson-panel:nth-child(2)::after { background: var(--red); }
.lesson-panel:nth-child(3)::after { background: var(--blue); }
.lesson-panel h3 { font-size: 1.28rem; line-height: 1.12; }
.lesson-panel p { margin: 0; }
.lesson-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23,21,20,0.12);
  border-radius: 14px;
  color: #fff9e9;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.25), transparent 30%),
    linear-gradient(145deg, #256f69, #123e3b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 18px rgba(23,21,20,0.16);
}
.lesson-panel:nth-child(2) .lesson-icon { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.25), transparent 30%), linear-gradient(145deg, #c24a3a, #842d24); }
.lesson-panel:nth-child(3) .lesson-icon { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.24), transparent 30%), linear-gradient(145deg, #344e86, #1c2f5a); }
.lesson-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-section { background: #f0ebe4; }
.portal-teaser {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 520px);
  gap: clamp(28px, 6vw, 78px);
  align-items: start;
  background: #f0ebe4;
}
.teaser-panel {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 24px;
}
.portal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.6fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.portal-sidebar, .portal-main, .teacher-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
}
.login-card, .student-card, .teacher-panel, .portal-main { display: grid; gap: 16px; }
.login-card label, .teacher-panel label { display: grid; gap: 8px; }
.login-card span, .teacher-panel label span { color: var(--muted); font-size: 0.88rem; font-weight: 800; }
.is-hidden { display: none !important; }
.student-card p, .portal-toolbar p, .lesson-module p, .teacher-saved { margin: 0; color: var(--muted); line-height: 1.55; }
.progress-ring {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 10px solid #e6ddd2;
  border-top-color: var(--teal);
  border-radius: 50%;
  text-align: center;
}
.progress-ring strong, .progress-ring span { display: block; }
.progress-ring strong { font-size: 2rem; line-height: 1; }
.progress-ring span { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.lesson-module {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-left: 6px solid #d3c8ba;
  border-radius: var(--radius);
  padding: 18px;
  background: #fffdf9;
}
.lesson-module.active { border-left-color: var(--red); }
.module-meta { display: grid; gap: 6px; }
.module-meta span { color: var(--gold); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.module-meta strong { font-size: 1.18rem; }
.module-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.completion-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: #3a332e;
  font-weight: 700;
}
.completion-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); }
.student-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  color: #3a332e;
  font-weight: 900;
}
progress { width: 100%; height: 12px; accent-color: var(--teal); }

.tools-section { background: #11100f; color: white; }
.tools-page {
  min-height: calc(100vh - 70px);
  padding-top: clamp(34px, 4vw, 54px);
}
.tools-page .section-heading {
  max-width: 980px;
  margin-bottom: clamp(26px, 3.2vw, 42px);
}
.tools-page .section-heading h1 {
  max-width: 100%;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.05;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tools-page .section-heading h1 { white-space: normal; }
}
.tools-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight: 750;
}
.tools-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tool-tabs {
  position: sticky;
  top: 74px;
  z-index: 5;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    rgba(17,16,15,0.92);
  box-shadow: 0 18px 30px rgba(0,0,0,0.22);
  backdrop-filter: blur(14px);
}
.tool-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tool-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tool-category {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.tool-category span {
  min-width: 0;
  color: rgba(255,248,224,0.66);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-tab {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(180deg, #26231f, #191715);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 0 12px;
  text-align: center;
  font-weight: 900;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.34);
}
.tool-card {
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
}
.tool-card.featured {
  min-height: 86px;
  padding: 12px 14px;
}
.tool-card-kicker {
  color: rgba(255,248,224,0.62);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-card strong {
  color: inherit;
  font-size: clamp(0.98rem, 1.6vw, 1.22rem);
  line-height: 1.05;
}
.tool-card small {
  margin-top: 4px;
  color: rgba(255,255,255,0.58);
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 800;
}
.tool-pill {
  min-height: 38px;
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
  font-size: 0.86rem;
}
.tool-category .tool-pill + .tool-pill {
  margin-top: 0;
}
.tool-tab.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #fdf8ed, #e8d3a5);
  border-color: #070809;
  color: #24180c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 0 #070809;
}
.tool-tab.active .tool-card-kicker,
.tool-tab.active small {
  color: rgba(36,24,12,0.72);
}
.tool-surface {
  min-height: 514px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.08), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 50px rgba(0,0,0,0.22);
  padding: clamp(16px, 2.4vw, 26px);
}
.tool-pane { display: none; }
.tool-pane.active { display: grid; gap: 0; }
.tool-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tool-badge { min-width: 76px; border-radius: 999px; background: #e7ded2; color: #413832; padding: 7px 12px; text-align: center; font-size: 0.82rem; font-weight: 800; }

.metronome-stage {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
}
.metronome-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 390px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 18px;
  background:
    radial-gradient(circle at 84% 76%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #30343a, #171a1f);
  border: 1px solid #0e1013;
  border-radius: 34px 34px 42px 42px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -18px 34px rgba(0,0,0,0.4), 0 18px 38px rgba(23,21,20,0.24);
  overflow: hidden;
}
.metronome-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.device-top {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.beat-lights {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.beat-lights span {
  height: 12px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.beat-lights span.enabled {
  background: #2a352c;
}
.beat-lights span.active {
  background: #80e186;
  box-shadow: 0 0 14px rgba(128,225,134,0.8);
}
.metronome-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(390px, 1.18fr);
  gap: 16px;
  align-items: stretch;
}
.metronome-display-stack {
  width: 100%;
  max-width: 390px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.lcd-screen {
  width: 100%;
  max-width: 390px;
  min-height: 225px;
  display: grid;
  align-content: center;
  gap: 4px;
  justify-items: center;
  border: 3px solid #0c0e10;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.72) 0%, rgba(255,191,68,0.42) 28%, transparent 58%),
    radial-gradient(ellipse at 18% 100%, rgba(255,88,24,0.34), transparent 46%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%),
    repeating-linear-gradient(0deg, rgba(88,54,18,0.04), rgba(88,54,18,0.04) 1px, transparent 1px, transparent 4px);
  color: #24180c;
  box-shadow: inset 0 0 18px rgba(69,38,7,0.28), inset 0 -20px 34px rgba(255,120,24,0.28), 0 0 18px rgba(255,139,24,0.12);
}
.lcd-screen span {
  color: rgba(36,24,12,0.7);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.lcd-label {
  justify-self: start;
  margin-left: 18px;
}
.speaker-grill {
  position: relative;
  z-index: 1;
  width: min(70%, 390px);
  display: grid;
  gap: 6px;
}
.speaker-grill span {
  height: 4px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}
.bpm-readout { display: grid; place-items: center; color: #24180c; font-family: "Courier New", ui-monospace, monospace; font-size: clamp(4.2rem, 10vw, 6.2rem); font-weight: 900; line-height: 0.9; text-shadow: 0 1px 0 rgba(255,244,205,0.44); }
.metronome-controls {
  width: 100%;
  min-height: 225px;
  height: 225px;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.metronome-settings-stack {
  width: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
}
.tempo-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tempo-presets button {
  min-height: 32px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.metronome-control-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.metronome-control-row input,
.metronome-control-row select {
  min-height: 30px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 48%),
    #b8caa2;
  color: #172016;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.metronome-control-row input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #d14435;
}
.metronome-control-row input[data-bpm-slider] {
  min-height: 36px;
}
.metronome-control-row input[type="range"]::-webkit-slider-runnable-track {
  height: 11px;
  border: 1px solid #070809;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.38), transparent 62%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%);
  box-shadow: inset 0 0 10px rgba(69,38,7,0.26), 0 0 10px rgba(255,139,24,0.12);
}
.metronome-control-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border: 2px solid #070809;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 30%),
    linear-gradient(180deg, #df4b3d, #9f251d);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 10px rgba(209,68,53,0.18);
}
.metronome-control-row input[data-bpm-slider]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border: 2px solid #070809;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 30%),
    linear-gradient(180deg, #df4b3d, #9f251d);
  box-shadow: 0 4px 10px rgba(0,0,0,0.42), 0 0 12px rgba(209,68,53,0.22);
}
.metronome-control-row input[type="range"]::-moz-range-track {
  height: 11px;
  border: 1px solid #070809;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%);
  box-shadow: inset 0 0 10px rgba(69,38,7,0.26), 0 0 10px rgba(255,139,24,0.12);
}
.metronome-control-row input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #070809;
  border-radius: 50%;
  background: #df4b3d;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 10px rgba(209,68,53,0.18);
}
.metronome-control-row input[data-bpm-slider]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #070809;
  background: #df4b3d;
  box-shadow: 0 4px 10px rgba(0,0,0,0.42), 0 0 12px rgba(209,68,53,0.22);
}
.metronome-beats-row {
  align-items: center;
}
.metronome-beat-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.metronome-beat-buttons button {
  min-height: 32px;
  border: 1px solid #060708;
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 3px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.metronome-beat-buttons button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -4px 7px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 13px rgba(209,68,53,0.24);
}
.metronome-actions {
  display: grid;
  grid-template-columns: minmax(130px, 190px);
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.metronome-actions .button {
  min-height: 46px;
  justify-content: center;
  border: 1px solid #060708;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 4px 0 #060708;
}
.metronome-speaker {
  width: min(74%, 300px);
  justify-self: center;
}

.tuner-layout {
  display: grid;
  justify-items: center;
}
.tuner-device {
  position: relative;
  width: min(100%, 1180px);
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  grid-template-areas:
    "top top"
    "screen controls"
    "led speaker";
  gap: 12px 16px;
  justify-items: center;
  align-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.tuner-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.tuner-clip {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 144px;
  height: 68px;
  border: 1px solid #090a0c;
  border-radius: 22px 22px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 36%),
    linear-gradient(135deg, #2d3137, #111318);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,0.42), 0 10px 24px rgba(0,0,0,0.2);
  transform: translateX(-50%);
}
.tuner-top {
  grid-area: top;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,0.74);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.tuner-screen {
  grid-area: screen;
  width: 100%;
  max-width: 390px;
  min-height: 225px;
  align-self: start;
  display: grid;
  align-content: center;
  gap: 6px;
  justify-items: center;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.72) 0%, rgba(255,191,68,0.42) 28%, transparent 58%),
    radial-gradient(ellipse at 18% 100%, rgba(255,88,24,0.34), transparent 46%),
    linear-gradient(180deg, #fff8e8 0%, #f8e8bd 55%, #e7c77f 100%),
    repeating-linear-gradient(0deg, rgba(88,54,18,0.04), rgba(88,54,18,0.04) 1px, transparent 1px, transparent 4px);
  color: #24180c;
  box-shadow: inset 0 0 24px rgba(69,38,7,0.3), inset 0 -22px 38px rgba(255,120,24,0.29), 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(255,139,24,0.12);
}
.tuner-meter {
  position: relative;
  width: min(100%, 270px);
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 4px;
  padding-top: 18px;
  color: rgba(36,24,12,0.7);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}
.tuner-meter::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 10px;
  height: 22px;
  border-top: 2px solid rgba(36,24,12,0.52);
  border-radius: 50% 50% 0 0;
}
.tuner-meter i {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 40px;
  border-radius: 999px;
  background: #24180c;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.24);
  transform: translateX(-50%) rotate(var(--needle-angle, 0deg));
  transform-origin: 50% 100%;
  transition: transform 180ms ease;
}
.tuner-note {
  color: #24180c;
  text-shadow: 0 1px 0 rgba(255,244,205,0.44);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(4.2rem, 10vw, 6.2rem);
  font-weight: 900;
  line-height: 0.8;
}
.tuner-cents {
  min-height: 20px;
  color: rgba(36,24,12,0.82);
  font-weight: 900;
}
.tuner-hz {
  color: rgba(36,24,12,0.7);
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 900;
}
.tuner-led-row {
  grid-area: led;
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 16px;
}
.tuner-led-row span {
  width: 28px;
  height: 14px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.tuner-device.flat [data-tuner-led="flat"],
.tuner-device.sharp [data-tuner-led="sharp"] {
  background: #f0bd4c;
  box-shadow: 0 0 16px rgba(240,189,76,0.72);
}
.tuner-device.in-tune [data-tuner-led="in"] {
  background: #7ee08b;
  box-shadow: 0 0 18px rgba(126,224,139,0.82);
}
.tuner-controls {
  grid-area: controls;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 390px;
  height: 100%;
  align-self: start;
  align-content: space-between;
  min-height: 225px;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.tuner-select {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.68);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tuner-select select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tuner-wheel {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(130px, 1fr) 44px;
  align-items: center;
  gap: 0;
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 44%),
    linear-gradient(180deg, #050607 0%, #191d21 45%, #050607 100%);
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,0.04),
    inset 0 -14px 20px rgba(0,0,0,0.82),
    0 8px 18px rgba(0,0,0,0.34);
}
.tuner-wheel-step,
.tuner-wheel-face {
  min-height: 44px;
  border: 0;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  box-shadow: none;
}
.tuner-wheel-step {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14px 11px, rgba(255,255,255,0.13) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 11px, rgba(255,255,255,0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 14px 23px, rgba(255,255,255,0.1) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 23px, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 14px 35px, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 28px 35px, rgba(255,255,255,0.07) 0 2px, transparent 3px),
    linear-gradient(90deg, #0b0d10, #20242a 46%, #0b0d10);
  font-size: 0;
}
.tuner-wheel-step:first-child { border-radius: 22px 7px 7px 22px; }
.tuner-wheel-step:last-child { border-radius: 7px 22px 22px 7px; }
.tuner-wheel-face {
  min-height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  padding: 9px 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.44), transparent 18%, transparent 82%, rgba(0,0,0,0.5)),
    radial-gradient(ellipse at 50% -8%, rgba(255,255,255,0.18), transparent 42%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.64), transparent 54%),
    linear-gradient(180deg, #24282d 0%, #121519 45%, #070809 100%);
  color: rgba(238,238,238,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -8px 16px rgba(0,0,0,0.76),
    inset 0 0 24px rgba(255,255,255,0.03);
  font-weight: 900;
}
.tuner-wheel-face::before,
.tuner-wheel-face::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  height: 18%;
  border-radius: 999px;
  background: rgba(242,242,242,0.62);
  transform: translateX(-50%);
}
.tuner-wheel-face::before { top: 4px; }
.tuner-wheel-face::after { bottom: 4px; }
.tuner-wheel-face strong {
  position: relative;
  z-index: 1;
  color: rgba(242,242,242,0.86);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(0.72rem, 1.7vw, 0.98rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 12px rgba(255,255,255,0.08);
}
.tuner-wheel-mark {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(242,242,242,0.28);
  transform: translateX(-50%);
}
.tuner-speaker {
  grid-area: speaker;
  position: relative;
  z-index: 1;
  width: min(72%, 310px);
  display: grid;
  gap: 6px;
}
.tuner-speaker span {
  height: 4px;
  border-radius: 999px;
  background: #0d0f12;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}
.string-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.string-buttons button {
  min-height: 44px;
  border: 1px solid #060708;
  border-radius: 11px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.string-buttons button span {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,0.5);
  font-size: 0.6rem;
}
.string-buttons button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.string-buttons button.active span { color: rgba(255,255,255,0.72); }
.tuner-device-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tuner-device-actions button {
  position: relative;
  min-height: 44px;
  border: 1px solid #060708;
  border-radius: 11px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #2b3037, #111318);
  color: rgba(255,255,255,0.9);
  padding: 6px 10px 6px 30px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.44), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tuner-device-actions button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #161a1d;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(-50%);
}
.tuner-device-actions button.active::before {
  background: #7ee08b;
  box-shadow: 0 0 12px rgba(126,224,139,0.88), 0 0 0 1px rgba(230,255,232,0.36);
}
.tuner-device-actions button:first-child {
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.tuner-readout {
  margin: 0;
  color: rgba(255,255,255,0.54);
  font-weight: 800;
  text-align: center;
}
.tuner-diagnostic {
  min-height: 22px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-weight: 800;
  text-align: center;
}
.tuner-diagnostic:empty {
  display: none;
}
.scale-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 640px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.scale-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.scale-device .device-top,
.scale-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.scale-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(820px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.scale-control-panel,
.scale-screen {
  min-width: 0;
  border-radius: 22px;
}
.scale-control-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.scale-screen {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.scale-device .scale-controls,
.scale-device .scale-fingering-row,
.scale-mode-section {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
.scale-device .scale-controls label {
  gap: 5px;
}
.scale-device .scale-controls span,
.scale-device .scale-fingering-label {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
}
.scale-device .scale-controls select {
  min-height: 40px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.scale-device .scale-chips {
  display: grid;
  gap: 8px;
}
.scale-device .scale-chip {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 7px rgba(0,0,0,0.42), 0 3px 0 #060708;
}
.scale-device .scale-chip.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
}
.scale-mode-section {
  display: grid;
}
.scale-device .scale-mode-toggle {
  justify-self: start;
  border-color: #070809;
  background: rgba(255,249,233,0.08);
}
.scale-device .scale-mode-button {
  color: rgba(255,248,224,0.86);
}
.scale-device .scale-mode-button.active {
  background: linear-gradient(180deg, #d95a48, #9f2d23);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.3);
}
.scale-screen .scale-title,
.scale-screen .scale-summary,
.scale-screen .scale-legend,
.scale-screen .scale-info-row dt,
.scale-screen .scale-info-row dd {
  color: #24180c;
}
.scale-screen .scale-info-row.scale-info-cue dd {
  color: #9f251d;
}
.scale-screen .scale-board-scroll {
  max-width: 100%;
  border-color: rgba(36,24,12,0.16);
  background: transparent;
  box-shadow: none;
}

/* Standalone Segovia scales review tool. Uses the same hardware language as
   Practice Scales, but keeps the controls narrow and gives the two long
   Segovia fretboards the full width they need. */
.segovia-tool-body {
  min-height: 100vh;
  background: #11100f;
}
.segovia-tool-main {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 28px clamp(12px, 2vw, 28px);
}
.segovia-tool-wrap {
  display: grid;
}
.segovia-device {
  width: 100%;
  min-height: auto;
}
.segovia-device-face {
  grid-template-columns: minmax(210px, 300px) minmax(900px, 1fr);
  align-items: stretch;
}
.segovia-control-panel {
  align-content: start;
}
.segovia-control-grid {
  display: grid;
  gap: 12px;
}
.segovia-range-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.segovia-range-card span {
  color: rgba(255,248,224,0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.segovia-range-card strong {
  color: #fff8e0;
  font-size: 1.05rem;
}
.segovia-control-note {
  color: rgba(255,248,224,0.78);
  margin: 0;
}
.segovia-screen {
  align-content: start;
}
.segovia-board-stack {
  gap: 18px;
}
.segovia-board-stack .scale-board-scroll {
  overflow: hidden;
  padding-bottom: 0;
}
.segovia-board-stack .scale-svg-board {
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}
.segovia-info {
  margin-top: 0;
}
@media (max-width: 980px) {
  .segovia-device-face {
    grid-template-columns: 1fr;
  }
  .segovia-device {
    padding-inline: 16px;
  }
}

@media (max-width: 1080px) {
  .tool-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tool-category-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .tool-feature-grid {
    grid-template-columns: 1fr;
  }
  .tool-category {
    grid-template-columns: 1fr;
  }
  .tool-category span {
    min-width: 0;
  }
  .tool-pill {
    width: 100%;
    max-width: none;
  }
}

/* Standalone circle of fifths review tool. The static SVG keeps Claude's
   hand-tuned website palette; the overlay supplies clickable keys, animated
   highlights, and progression cues. */
.fifths-tool-body {
  min-height: 100vh;
  background: #11100f;
}
.fifths-tool-main {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 28px clamp(12px, 2vw, 28px);
}
.fifths-tool-wrap {
  display: grid;
}
.fifths-device {
  width: 100%;
  min-height: auto;
}
.fifths-device-face {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(620px, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.fifths-control-panel {
  align-content: start;
}
.fifths-control-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.fifths-step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fifths-step-button {
  min-height: 46px;
  font-size: 0.95rem;
}
.fifths-progression-grid {
  display: grid;
  gap: 10px;
}
.fifths-cycle-button {
  min-height: 54px;
  border: 1px solid #260907;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #d95a48, #8f1f18);
  color: #fff9e9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -4px 7px rgba(0,0,0,0.35), 0 4px 0 #060708;
  font-weight: 900;
}
.fifths-cycle-button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #3b814e, #1d4c2d);
}
.fifths-screen {
  display: grid;
  grid-template-columns: minmax(440px, 0.9fr) minmax(260px, 0.55fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  min-width: 0;
}
.fifths-wheel-card,
.fifths-readout {
  border: 6px solid #08090a;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244,164,73,0.28), transparent 52%),
    linear-gradient(180deg, #fffaf0, #f5dfad);
  box-shadow: inset 0 0 34px rgba(106,70,22,0.18), 0 18px 34px rgba(0,0,0,0.28);
}
.fifths-wheel-card {
  padding: clamp(14px, 2vw, 26px);
}
.fifths-wheel-shell {
  position: relative;
  max-width: 610px;
  margin: 0 auto;
  aspect-ratio: 480 / 519.35;
}
.fifths-wheel-shell img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(63,45,24,0.12));
  user-select: none;
}
.fifths-pointer {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 2px;
  height: 33%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(182,63,47,0.92), rgba(182,63,47,0));
  opacity: 0.34;
  pointer-events: none;
  transition: transform 360ms ease;
}
.fifths-marker {
  position: absolute;
  translate: -50% -50%;
  border: 3px solid #b63f2f;
  border-radius: 999px;
  pointer-events: none;
  transition: left 360ms ease, top 360ms ease, width 240ms ease, height 240ms ease, opacity 240ms ease;
  animation: fifthsPulse 1500ms ease-in-out infinite;
}
.fifths-marker-major {
  width: 58px;
  height: 58px;
  box-shadow: 0 0 0 6px rgba(182,63,47,0.1), 0 0 28px rgba(182,63,47,0.28);
}
.fifths-marker-minor {
  width: 44px;
  height: 34px;
  border-color: rgba(182,63,47,0.72);
}
.fifths-wheel-shell[data-focus="major"] .fifths-marker-minor,
.fifths-wheel-shell[data-focus="minor"] .fifths-marker-major {
  opacity: 0.42;
  animation: none;
}
.fifths-hotspot {
  position: absolute;
  translate: -50% -50%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.fifths-hotspot-outer {
  width: 62px;
  height: 44px;
}
.fifths-hotspot-inner {
  width: 58px;
  height: 34px;
}
.fifths-hotspot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(182,63,47,0);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.fifths-hotspot:hover::after,
.fifths-hotspot:focus-visible::after {
  background: rgba(182,63,47,0.12);
  box-shadow: 0 0 0 2px rgba(182,63,47,0.24);
}
.fifths-hotspot.is-progression::after {
  background: rgba(29,23,18,0.1);
  box-shadow: 0 0 0 2px rgba(29,23,18,0.16);
  animation: fifthsStep 1150ms ease-in-out infinite;
  animation-delay: var(--progression-delay, 0ms);
}
.fifths-hotspot.is-active::after {
  background: rgba(182,63,47,0.18);
  box-shadow: 0 0 0 2px rgba(182,63,47,0.26);
}
.fifths-readout {
  display: grid;
  gap: 18px;
  align-self: stretch;
  padding: clamp(20px, 2.5vw, 34px);
  align-content: center;
}
.fifths-current {
  display: grid;
  gap: 8px;
}
.fifths-current span {
  color: #24180c;
  font-size: clamp(2rem, 4vw, 4.7rem);
  font-weight: 950;
  line-height: 0.92;
}
.fifths-current strong {
  color: #b63f2f;
  font-size: clamp(1.2rem, 2vw, 2rem);
}
.fifths-facts {
  display: grid;
  gap: 8px;
  color: #665f58;
  font-weight: 850;
}
.fifths-chords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fifths-chords span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(36,24,12,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.36);
  color: #24180c;
  font-weight: 900;
}
.fifths-chords b {
  color: #b63f2f;
}
@keyframes fifthsPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}
@keyframes fifthsStep {
  0%, 100% { opacity: 0.44; }
  45% { opacity: 1; }
}
@media (max-width: 1100px) {
  .fifths-device-face,
  .fifths-screen {
    grid-template-columns: 1fr;
  }
  .fifths-control-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fifths-progression-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .fifths-tool-main {
    padding-inline: 10px;
  }
  .fifths-device {
    padding-inline: 14px;
  }
  .fifths-control-grid,
  .fifths-progression-grid,
  .fifths-step-row {
    grid-template-columns: 1fr;
  }
  .fifths-chords {
    grid-template-columns: 1fr;
  }
}
.fifths-control-panel .scale-controls.fifths-control-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 1101px) {
  .fifths-control-panel .scale-controls.fifths-control-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .fifths-control-panel .scale-controls.fifths-control-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.scale-controls {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 14px;
}
.scale-controls label {
  display: grid;
  gap: 8px;
}
.scale-fingering-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 4px;
}
.scale-fingering-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  padding-top: 8px;
}
.scale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scale-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.scale-chip:hover { border-color: var(--ink); }
.scale-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.scale-chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.scale-legend {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.control-row, .planner-controls, .chord-controls { display: grid; grid-template-columns: minmax(110px, 0.35fr) 1fr; gap: 14px; align-items: center; }
.control-row span, .planner-controls span, .chord-controls span, .scale-controls span, .contact-form span { color: var(--muted); font-size: 0.88rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #cfc5ba; border-radius: var(--radius); background: white; color: var(--ink); padding: 12px; }
input[type="range"] { accent-color: var(--red); }
.planner-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chord-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planner-controls label, .chord-controls label, .contact-form label { display: grid; gap: 8px; }
.practice-plan { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.practice-plan li { padding: 10px 0; color: #3a332e; }

.scale-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}
.scale-heading-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.scale-heading-bar .scale-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.scale-heading-bar .scale-summary {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--muted);
}
.scale-heading-bar .scale-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}
.scale-board-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.scale-board-controls .scale-legend { margin: 0; min-width: 0; }
.scale-board-controls .scale-mode-toggle { justify-self: end; }
.scale-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: white;
  gap: 2px;
}
.scale-mode-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.scale-mode-button:hover { color: var(--ink); }
.scale-mode-button.active {
  background: var(--ink);
  color: white;
}
.scale-mode-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.scale-board-stack {
  display: grid;
  gap: 14px;
}
.chord-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.chord-device {
  position: relative;
  width: min(100%, 1120px);
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.chord-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.chord-device .device-top,
.chord-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.chord-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(420px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.chord-screen {
  min-height: 390px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.chord-screen .scale-title,
.chord-screen .scale-summary {
  color: #24180c;
}
.chord-control-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.chord-control-panel .chord-controls {
  grid-template-columns: 1fr;
  gap: 10px;
}
.chord-control-panel .chord-controls label {
  display: grid;
  gap: 5px;
}
.chord-control-panel .chord-controls span,
.chord-control-panel .scale-info dt {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chord-control-panel select {
  min-height: 40px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.chord-control-panel .scale-legend {
  color: rgba(255,248,224,0.72);
}
.chord-device-info {
  display: grid;
  gap: 8px;
  margin: 0;
}
.chord-device-info .scale-info-row {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #070809;
  border-radius: 10px;
  background: rgba(255,249,233,0.08);
}
.chord-device-info .scale-info-row dd {
  margin: 0;
  color: rgba(255,252,238,0.96);
  font-weight: 800;
}
.chord-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.chord-device .chord-play-button,
.inversion-device .chord-play-button {
  min-height: 46px;
  width: 100%;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  padding: 8px 18px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}
.chord-device .chord-play-button:hover,
.inversion-device .chord-play-button:hover { filter: brightness(1.08); }
.chord-device .chord-play-button:active,
.inversion-device .chord-play-button:active { transform: scale(0.97); }
.chord-play-button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chord-play-icon { font-size: 0.72rem; }
.chord-diagram-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 8px;
  background: transparent;
}
.tab-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-download-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  padding: 8px 16px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.tab-download-button:hover { border-color: var(--ink); }
.tab-download-button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chord-device .chord-play-button.is-playing,
.inversion-device .chord-play-button.is-playing { background: var(--red); border-color: var(--red); }
.inversion-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 600px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.inversion-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.inversion-device .device-top,
.inversion-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.inversion-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(760px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.inversion-control-panel,
.inversion-screen {
  min-width: 0;
  border-radius: 22px;
}
.inversion-control-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.inversion-controls {
  grid-template-columns: 1fr;
  gap: 10px;
}
.inversion-control-row {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 10px;
}
.inversion-controls label {
  display: grid;
  gap: 5px;
}
.inversion-controls span,
.inversion-control-panel .scale-info dt {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inversion-controls select {
  min-height: 40px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.inversion-control-panel .scale-legend {
  margin: 0;
  color: rgba(255,248,224,0.72);
}
.inversion-screen {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.inversion-screen .scale-title,
.inversion-screen .scale-summary,
.inversion-screen .scale-legend,
.inversion-screen .scale-info-row dt,
.inversion-screen .scale-info-row dd {
  color: #24180c;
}
.inversion-map .scale-board-scroll {
  max-width: 100%;
  margin-bottom: 10px;
  border-color: rgba(36,24,12,0.16);
  background: transparent;
  box-shadow: none;
}
.inversion-map .scale-svg-board {
  min-width: 760px;
}
.inversion-position-map {
  display: grid;
  gap: 8px;
}
.inversion-active-chord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 12px 12px 0 0;
  background: rgba(255,255,255,0.34);
  color: #24180c;
}
.inversion-active-chord span,
.inversion-active-chord em {
  color: rgba(36,24,12,0.62);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}
.inversion-active-chord strong {
  min-width: 0;
  font-size: 1rem;
  font-weight: 950;
  text-align: center;
}
.inversion-position-map .scale-board-scroll {
  border-radius: 0 0 12px 12px;
}
.inversion-position-map .scale-svg-board {
  display: block;
}
.inversion-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.inversion-position-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.3);
}
.inversion-position-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #24180c;
}
.inversion-position-head strong {
  font-size: 0.9rem;
  font-weight: 900;
}
.inversion-position-head span {
  min-width: 0;
  color: rgba(36,24,12,0.66);
  font-size: 0.82rem;
  font-weight: 900;
}
.inversion-position-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.inversion-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(36,24,12,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46);
}
.inversion-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  color: #24180c;
}
.inversion-card-head strong {
  font-size: 0.92rem;
  font-weight: 900;
}
.inversion-card-head span {
  color: rgba(36,24,12,0.62);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
}
.inversion-card-diagram {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.inversion-card-diagram .chord-svg {
  width: min(100%, 210px);
  height: auto;
}
.inversion-row-play {
  min-height: 34px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #353a41, #111318);
  color: white;
  padding: 6px 14px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -4px 8px rgba(0,0,0,0.34), 0 3px 0 #060708;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}
.inversion-row-play.is-playing {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.tab-device {
  position: relative;
  width: min(100%, 1280px);
  min-height: 640px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  justify-items: center;
  padding: 42px 26px 22px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.tab-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.tab-device .device-top,
.tab-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.tab-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(820px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.tab-control-panel,
.tab-screen {
  min-width: 0;
  border-radius: 22px;
}
.tab-control-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.tab-screen {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 4px solid #0a0b0d;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.tab-screen .scale-title,
.tab-screen .scale-summary,
.tab-screen .tab-tempo-label,
.tab-screen .tab-tempo-out,
.tab-screen .scale-legend,
.tab-screen .scale-fingering-label {
  color: #24180c;
}
.tab-screen .scale-heading-bar {
  min-width: 0;
}
.tab-device .chord-play-button {
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  padding: 6px 14px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
}
.tab-device .chord-play-button.is-playing { background: var(--red); border-color: var(--red); }
.tab-device .tab-controls {
  grid-template-columns: 1fr;
  gap: 7px;
}
.tab-device .tab-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.tab-device .tab-actions .chord-play-button {
  justify-content: center;
  width: 100%;
}
.tab-device .tab-controls label {
  display: grid;
  gap: 3px;
}
.tab-device .tab-controls span {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tab-control-panel .tab-tempo-label,
.tab-control-panel .scale-fingering-label,
.tab-control-panel .tab-tempo-out,
.tab-control-panel .tab-switch {
  color: rgba(255,248,224,0.88);
}
.tab-device .tab-controls select {
  min-height: 34px;
  border: 2px solid #070809;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,218,112,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,246,207,0.44)),
    #fff9e9;
  color: #24180c;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.28);
  font-weight: 900;
}
.tab-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--muted);
  user-select: none;
}
.tab-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tab-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cfc5ba;
  transition: background-color 140ms ease;
  flex: 0 0 auto;
}
.tab-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 140ms ease;
}
.tab-switch input:checked + .tab-switch-track { background: var(--red); }
.tab-switch input:checked + .tab-switch-track::after { transform: translateX(16px); }
.tab-switch input:checked ~ .tab-switch-label { color: var(--ink); }
.tab-screen .tab-switch { color: #24180c; }
.tab-switch input:focus-visible + .tab-switch-track { outline: 2px solid var(--red); outline-offset: 2px; }
.tab-tempo-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tab-tempo-label { font-size: 0.82rem; font-weight: 800; color: var(--muted); }
.tab-tempo-row input[type="range"] { flex: 1 1 auto; max-width: 320px; }
.tab-device .tab-tempo-row input[type="range"] {
  max-width: none;
  accent-color: #d14435;
}
.tab-control-panel .tab-tempo-row input[type="range"] {
  height: 18px;
  border-radius: 999px;
  background: transparent;
}
.tab-control-panel .tab-tempo-row input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid rgba(255,248,224,0.36);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,249,229,0.95), rgba(231,199,128,0.88)),
    #f4e4b3;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.44), 0 0 10px rgba(255,226,142,0.18);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid #050607;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(180deg, #d14435, #7f1d16);
  box-shadow: 0 2px 0 #050607, 0 0 0 2px rgba(255,248,224,0.14);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-moz-range-track {
  height: 9px;
  border: 1px solid rgba(255,248,224,0.36);
  border-radius: 999px;
  background: #f4e4b3;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.44), 0 0 10px rgba(255,226,142,0.18);
}
.tab-control-panel .tab-tempo-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #050607;
  border-radius: 50%;
  background: #b7392c;
  box-shadow: 0 2px 0 #050607, 0 0 0 2px rgba(255,248,224,0.14);
}
.tab-tempo-out { font-size: 0.86rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tab-tempo-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 2px; }
.tab-device .tab-tempo-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.tab-tempo-presets button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  padding: 5px 6px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tab-device .tab-tempo-presets button {
  border: 1px solid #060708;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.tab-device .tab-tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 16px rgba(209,68,53,0.26);
}
.tab-tempo-presets button:hover { border-color: var(--ink); color: var(--ink); }
.tab-tempo-presets button.active { background: var(--ink); border-color: var(--ink); color: white; }
.tab-device .tab-tempo-presets button:hover {
  border-color: #060708;
  color: white;
  filter: brightness(1.08);
}
.tab-device .tab-tempo-presets button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
}
.tab-tempo-presets button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tab-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tab-notation-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0; }
.tab-device .tab-notation-row {
  display: grid;
  gap: 5px;
  margin: 0;
}
.tab-device .tab-notation-row .scale-mode-toggle {
  width: 100%;
}
.tab-device .tab-notation-row .scale-mode-button {
  flex: 1 1 0;
}
.tab-device .tab-notation-row .tab-notation-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button {
  min-height: 46px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.14), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 50%;
  background: #15171b;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.76);
  vertical-align: -1px;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.24), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
}
.tab-device .tab-notation-row .tab-notation-toggle .scale-mode-button.active::before {
  border-color: rgba(255,255,255,0.72);
  background: #f5dfb0;
  box-shadow: 0 0 10px rgba(245,223,176,0.52), inset 0 1px 3px rgba(255,255,255,0.35);
}
.tab-notation-row .scale-fingering-label { padding-top: 0; }
.tab-share-row {
  display: grid;
  gap: 6px;
}
.tab-share-button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #060708;
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.94);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
  cursor: pointer;
  font-weight: 900;
}
.tab-share-button:hover {
  filter: brightness(1.08);
}
.tab-share-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.tab-share-status {
  min-height: 1.1em;
  color: rgba(255,248,224,0.82);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}
.tab-staff-wrap {
  min-width: 0;
  max-width: 100%;
  padding: 4px;
}
/* alphaTab play-along visuals: red beat cursor line + active-note color.
   Bar (measure) shading is hidden — just the line. */
.tab-staff-wrap .at-cursor-bar { display: none; }
/* Trim the beat cursor to the tab staff. alphaTab scales the cursor to the
   full bar height (which includes ~30% header space above the top line) via an
   inline transform we can't safely override, and the scale factor varies per
   bar. So instead paint only the bottom ~70% of the element red with a
   gradient — proportional, so it tracks the scale, and the cursor's bottom is
   already anchored to the low-E line. */
/* No playback cursor — lesson audio is driven by our own synth, not alphaTab's
   player, so the beat-cursor line is hidden everywhere. */
.tab-staff-wrap .at-cursor-beat { display: none !important; }
.tab-staff-wrap .at-highlight * { fill: var(--red); stroke: var(--red); }
.tab-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}
.chord-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  background: transparent;
}
.scale-board-block {
  display: grid;
  gap: 6px;
}
.scale-board-block-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scale-board-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}
.tab-device .scale-board-scroll {
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  background: rgba(255,252,238,0.74);
  box-shadow: inset 0 0 18px rgba(69,38,7,0.18);
}
.tab-device .tab-staff-wrap {
  width: max-content;
  min-width: 100%;
}
.tab-device .tab-staff-wrap svg,
.tab-device .tab-staff-wrap .at-surface,
.tab-device .tab-staff-wrap > div {
  max-width: none;
}
.tab-device .tab-staff-wrap svg {
  display: block;
}
.scale-svg-board {
  display: block;
  width: 100%;
  min-width: 820px;
  height: auto;
}
.scale-info {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.scale-info-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}
.scale-info-row dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.scale-info-row dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.scale-info-row.scale-info-cue dd {
  color: var(--red);
  font-weight: 800;
}

.chord-card { display: grid; grid-template-columns: minmax(140px, 0.42fr) minmax(240px, 1fr); gap: 22px; align-items: center; }
.chord-name { margin: 0; font-size: clamp(2.4rem, 8vw, 5.6rem); font-weight: 900; line-height: 0.95; }
.chord-fingering { margin: 14px 0 0; color: var(--muted); font-weight: 800; }
.chord-diagram { position: relative; width: min(100%, 440px); aspect-ratio: 1.22; border: 1px solid var(--line); border-radius: var(--radius); background: white; overflow: hidden; }
.string-line, .fret-line { position: absolute; background: #2c2927; }
.string-line { top: 14%; bottom: 10%; width: 2px; }
.fret-line { left: 10%; right: 10%; height: 2px; }
.nut-line { height: 6px; }
.finger-dot { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: white; font-size: 0.78rem; font-weight: 900; transform: translate(-50%, -50%); }
.open-marker, .mute-marker { position: absolute; top: 4%; transform: translateX(-50%); color: #2c2927; font-weight: 900; }

.trainer-device {
  position: relative;
  width: min(100%, 900px);
  justify-self: center;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  justify-items: center;
  padding: 36px 26px 14px;
  border: 1px solid #0d0f12;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(145deg, #3c4148 0%, #181b20 48%, #0f1115 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 -22px 42px rgba(0,0,0,0.48), 0 22px 46px rgba(23,21,20,0.28);
  overflow: hidden;
}
.trainer-device::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px 22px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.trainer-device .device-top,
.trainer-device .speaker-grill {
  position: relative;
  z-index: 1;
}
.trainer-device-face {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}
.trainer-screen {
  min-height: auto;
  display: grid;
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 9px 12px 8px;
  border: 2px solid #0a0b0d;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.44) 0%, rgba(255,191,68,0.25) 24%, transparent 56%),
    linear-gradient(180deg, #fffaf0 0%, #f9edcc 56%, #ead09a 100%);
  box-shadow: inset 0 0 24px rgba(69,38,7,0.24), inset 0 -20px 34px rgba(255,120,24,0.16), 0 1px 0 rgba(255,255,255,0.08);
}
.trainer-control-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(145deg, #171a1f, #090b0e);
  box-shadow: inset 0 2px 16px rgba(0,0,0,0.72), 0 1px 0 rgba(255,255,255,0.07);
}
.trainer-panel-label {
  color: rgba(255,248,224,0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trainer-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trainer-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  justify-self: start;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #e7ded2;
  padding: 4px;
}
.trainer-mode button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #413832;
  cursor: pointer;
  font-weight: 900;
}
.trainer-mode button.active { background: white; color: var(--ink); box-shadow: 0 1px 6px rgba(23, 21, 20, 0.12); }
.trainer-top-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  min-width: 0;
}
.trainer-device .trainer-mode {
  width: auto;
  grid-template-columns: repeat(2, auto);
  gap: 3px;
  justify-self: auto;
  padding: 3px;
  border-color: rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 46%),
    #090b0e;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.62);
}
.trainer-device .trainer-mode button {
  min-height: 27px;
  padding: 0 14px;
  color: rgba(255,255,255,0.78);
  font-size: 0.66rem;
  letter-spacing: 0;
}
.trainer-device .trainer-mode button.active {
  background: #fff9e9;
  color: #24180c;
  box-shadow: inset 0 -2px 5px rgba(207,164,73,0.2), 0 1px 6px rgba(0,0,0,0.22);
}
.trainer-visual {
  display: grid;
  gap: 6px;
  border-radius: var(--radius);
}
.trainer-visual p {
  margin: 0;
  color: #3b2a18;
  font-weight: 900;
  text-align: center;
}
.trainer-visual p strong {
  color: #24180c;
}
.fretboard-picture {
  position: relative;
  aspect-ratio: 2172 / 724;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: url("assets/fretboard-approved-white.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
.trainer-device .fretboard-picture {
  background: transparent;
  box-shadow: none;
}
.trainer-device .fretboard-picture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("assets/fretboard-approved-white.png") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fretboard-marker {
  position: absolute;
  left: var(--marker-x, 11%);
  top: var(--marker-y, 20%);
  z-index: 5;
  width: 24px;
  height: 24px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
}
.triad-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 5;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}
.triad-marker.root { background: var(--red); }
.triad-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.triad-notes span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
  color: #3a332e;
  text-align: center;
  font-weight: 900;
}
.finder-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 5;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}
.finder-marker.root { background: var(--red); }
.finder-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf9;
  padding: 14px;
}
.finder-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}
.finder-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
}
.finder-results {
  display: grid;
  gap: 10px;
}
.finder-results p {
  margin: 0;
  color: var(--muted);
}
.finder-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
}
.finder-result strong { font-size: 1.15rem; }
.finder-result span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}
.trainer-prompt { min-height: 154px; display: grid; place-items: center; border-radius: var(--radius); background: var(--ink); color: white; text-align: center; }
.trainer-device .trainer-prompt {
  min-height: 300px;
  border: 2px solid rgba(36,24,12,0.16);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,138,24,0.3), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,247,217,0.28));
  color: #24180c;
  box-shadow: inset 0 0 18px rgba(69,38,7,0.2);
}
.trainer-prompt span, .trainer-prompt strong { display: block; }
.trainer-prompt strong { font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1; }
.note-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.note-choices button { min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: white; cursor: pointer; font-weight: 900; }
.trainer-control-panel .note-choices {
  grid-template-columns: repeat(6, 1fr);
}
.trainer-control-panel .note-choices button {
  min-height: 48px;
  border: 1px solid #060708;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 4px 0 #060708;
}
.trainer-control-panel .note-choices button:hover {
  filter: brightness(1.08);
}
.note-choices button.correct { background: var(--teal); color: white; }
.note-choices button.incorrect { background: var(--red); color: white; }
.trainer-control-panel .note-choices button.correct {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #32b195, #136d5e);
}
.trainer-control-panel .note-choices button.incorrect {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
}
.trainer-control-panel [data-next-note] {
  width: auto;
  min-height: 30px;
  border: 1px solid #060708;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, #d14435, #8f1f18);
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 10px rgba(0,0,0,0.32), 0 4px 0 #260907;
  font-weight: 900;
  padding: 6px 12px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.reviews-section { background: #ede8e1; }
.reviews-grid figure { margin: 0; }
.reviews-grid blockquote { margin: 0 0 20px; }
.reviews-grid figcaption { font-weight: 900; }
/* Reviews page: masonry-style columns so cards of varying length pack tightly */
.reviews-masonry { columns: 3 300px; column-gap: 16px; }
.reviews-masonry figure {
  break-inside: avoid;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 24px;
}
.reviews-masonry blockquote { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.reviews-masonry figcaption { font-weight: 900; }
.reviews-cta { margin-top: clamp(28px, 5vw, 48px); }
@media (max-width: 720px) { .reviews-masonry { columns: 1; } }
/* Reviews page: tighten the gap between the heading and the cards. */
.reviews-page .page-hero { padding-bottom: clamp(20px, 3vw, 36px); }
.reviews-page .reviews-section { padding-top: clamp(24px, 4vw, 44px); }
/* Reviews page polish: warmer cards, a quote accent, avatar initials, and a
   Read more / Show less toggle (wired up in reviews.js). */
.reviews-masonry figure {
  position: relative;
  padding: 26px 24px 22px;
  border-color: rgba(222, 215, 207, 0.9);
  background: linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.reviews-masonry figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.review-stars {
  display: flex;
  gap: 2px;
  margin: 0 0 12px;
  color: #e0a52a;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 1px;
}
/* Featured lead review: full-width, larger, always shows the whole review */
.reviews-featured { margin: 0 0 22px; }
.review-featured {
  position: relative;
  margin: 0;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px);
  border: 1px solid rgba(222, 215, 207, 0.9);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #f4eee5 100%);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.review-featured .review-stars { font-size: 1.15rem; margin-bottom: 16px; }
.review-featured .review-quote {
  display: block;
  max-width: 64ch;
  margin: 0 0 20px;
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.review-featured .review-avatar { width: 52px; height: 52px; font-size: 1rem; }
.review-featured .review-name { font-size: 1.05rem; }
.review-quote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card.is-open .review-quote { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}
.review-more:hover, .review-more:focus-visible { text-decoration: underline; }
.review-cap { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff9e9;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(23, 21, 20, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px rgba(23, 21, 20, 0.16);
}
.review-avatar--teal { background: linear-gradient(145deg, #256f69, #123e3b); }
.review-avatar--red { background: linear-gradient(145deg, #c24a3a, #842d24); }
.review-avatar--blue { background: linear-gradient(145deg, #344e86, #1c2f5a); }
.review-avatar--amber { background: linear-gradient(145deg, #cf922f, #8a5a12); }
.review-name { font-weight: 900; line-height: 1.2; }

/* Lessons page */
/* Denser vertical rhythm on the content-heavy lessons page (the default
   section padding leaves too much air between many stacked sections). */
.lessons-page .section:not(.contact-band) { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 6vw, 76px); }
.lessons-page .page-hero { padding-bottom: clamp(36px, 5vw, 60px); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; background: var(--panel); font-weight: 700; font-size: 0.95rem; }
.lessons-cta { margin-top: clamp(22px, 4vw, 38px); }
.lessons-final-cta { align-items: center; }
.lessons-final-cta h2 { margin: 8px 0 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.04; }
.lessons-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-section { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1fr); gap: clamp(30px, 6vw, 88px); align-items: start; }
.about-portrait-section { grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.1fr); align-items: start; }
.about-photo { margin: 0; }
.about-photo img {
  width: 100%;
  aspect-ratio: 1617 / 973;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-portrait-section .about-copy { grid-column: 1 / -1; max-width: 850px; }
.about-copy { font-size: 1.08rem; }
.contact-band { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 520px); gap: clamp(28px, 6vw, 74px); padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 52px); background: #203d3a; color: white; }
.contact-band.standalone { min-height: calc(100vh - 148px); align-items: center; }
.contact-band p { color: rgba(255,255,255,0.78); }
.contact-form { display: grid; gap: 14px; }
.contact-form span { color: rgba(255,255,255,0.76); }
.site-footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px clamp(18px, 4vw, 52px); background: var(--ink); color: white; }

.auth-page {
  min-height: calc(100vh - 78px);
  display: grid;
  align-items: center;
  padding: clamp(96px, 12vw, 140px) clamp(18px, 4vw, 52px) clamp(42px, 7vw, 74px);
  background: #f0ebe4;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 440px);
  gap: clamp(28px, 6vw, 82px);
  align-items: center;
}
.auth-stack {
  display: grid;
  gap: 14px;
}
.auth-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.auth-card-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-weight: 700;
}
.admin-login-card {
  background: #f8f4eb;
  box-shadow: none;
}
.auth-card label {
  display: grid;
  gap: 8px;
}
.auth-card label span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}
.form-status {
  min-height: 24px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.portal-app {
  min-height: calc(100vh - 78px);
  padding: clamp(96px, 12vw, 130px) clamp(18px, 4vw, 52px) clamp(42px, 7vw, 74px);
  background: #f0ebe4;
}
.portal-loading {
  display: grid;
  gap: 14px;
}
.portal-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.7fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.portal-lessons {
  display: grid;
  gap: 16px;
}

/* --- Portal: smaller greeting, tools buttons, lesson-plan editor + search --- */
.student-card .portal-greeting { font-size: 1.45rem; line-height: 1.15; margin: 2px 0 0; font-weight: 800; }
.portal-tools { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; display: grid; gap: 10px; }
.portal-tools .eyebrow { margin: 0; }
.portal-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.portal-tool-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fbfaf7);
  color: var(--ink); font-weight: 700; font-size: 0.86rem; text-decoration: none; transition: all .15s;
}
.portal-tool-btn:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); transform: translateY(-1px); }
.portal-tool-btn.wide { grid-column: 1 / -1; background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }

.portal-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portal-toolbar h2 { margin: 2px 0; font-size: 1.5rem; line-height: 1.15; }
.gps-search-item .drag-grip { color: var(--muted); font-size: 1rem; line-height: 1; flex: none; }
.gps-search-hint { color: var(--muted); font-style: italic; font-size: 0.85rem; }

.lesson-plan { display: grid; gap: 12px; margin-top: 4px; }
.plan-empty { color: var(--muted); font-style: italic; }
.plan-entry { border: 1px solid var(--line); border-radius: 16px; background: var(--panel, #fff); padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: border-color .12s, box-shadow .12s; }
.plan-entry.drag-over { border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.plan-entry.is-editing { border-color: var(--teal, #176c68); box-shadow: 0 0 0 2px rgba(23,108,104,.12); }
.plan-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-date { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.plan-date svg { width: 17px; height: 17px; color: var(--red, #b63f2f); flex: none; }
.plan-edit { border: 1px solid var(--line); background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.82rem; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.plan-edit:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.plan-entry-head-actions { display: inline-flex; gap: 8px; align-items: center; }
.plan-save-btn { background: var(--red, #b63f2f); border-color: var(--red, #b63f2f); color: #fff; }
.plan-save-btn:hover { background: #9a3527; border-color: #9a3527; color: #fff; }
.plan-entry-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.plan-items { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-note-view { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
.plan-entry-actions { display: flex; justify-content: flex-end; gap: 8px; }
.plan-delete { border: 1px solid var(--line); background: none; color: #b63f2f; font-weight: 800; font-size: 0.84rem; padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.plan-delete:hover { background: #b63f2f; border-color: #b63f2f; color: #fff; }
.plan-entry-head input[type="date"] { font-weight: 800; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--paper, #fbfaf7); color: var(--ink); }
.plan-del { border: none; background: none; color: var(--muted); font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.plan-del:hover { color: var(--red, #b63f2f); }
.plan-dropzone { min-height: 46px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: all .12s; }
.plan-dropzone.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); }
.plan-hint { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.plan-item { display: inline-flex; align-items: center; gap: 6px; background: var(--paper, #fbfaf7); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem; font-weight: 700; }
.plan-item a { color: var(--ink); text-decoration: none; }
.plan-item a:hover { color: var(--red, #b63f2f); text-decoration: underline; }
.plan-item button { border: none; background: var(--line); color: var(--ink); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 0.85rem; }
.plan-item button:hover { background: var(--red, #b63f2f); color: #fff; }
.plan-note { width: 100%; min-height: 304px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 0.92rem; line-height: 1.45; color: var(--ink); background: var(--paper, #fbfaf7); }

/* Admin right-pane tool overlay (admin-shell.js). Sidebar items tagged
   data-admin-iframe="/path" open inside the content area instead of navigating
   away, so the admin chrome stays put. */
/* Embedded view — when a page (Guitar GPS / lesson / tools / etc.) is loaded
   inside the admin shell's right-pane iframe, app.js stamps `.is-embedded` on
   <html>. Hide the duplicate site header (brand + Portal/Guitar GPS/Tools/Log
   out nav) because the admin sidebar already provides navigation. Also strip
   the top padding that page-main reserves for the (now-hidden) fixed header,
   and tighten the lesson-reader top padding so the content starts close to
   the iframe's title bar. */
.is-embedded .site-header { display: none; }
.is-embedded .page-main { padding-top: 0; }
.is-embedded .lesson-reader { padding-top: clamp(12px, 1.5vw, 20px); }
.is-embedded .site-footer { display: none; }

/* Pinned to the viewport (not absolute inside .portal-content) so that on tall
   admin pages the iframe is always exactly one viewport high — otherwise the
   iframe stretches with the page below it and the body's overflow:hidden lock
   leaves the lower half unreachable (you'd scroll inside a lesson and just hit
   the bottom of the visible window). The sidebar gets a higher z-index below
   so it sits ON TOP of the overlay and stays usable. */
.admin-tool-overlay { position: fixed; inset: 0; background: var(--paper, #fbfaf7); display: flex; flex-direction: column; z-index: 30; }
.admin-tool-overlay[hidden] { display: none; }
.admin-tool-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.admin-tool-overlay-title { font-size: 0.95rem; color: var(--ink); }
.admin-tool-overlay-open { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.admin-tool-overlay-open:hover { color: var(--red, #b63f2f); }
.admin-tool-overlay-close { font-size: 1.6rem; line-height: 1; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 6px; }
.admin-tool-overlay-close:hover { color: var(--red, #b63f2f); }
.admin-tool-overlay-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--paper, #fbfaf7); }
.portal-content { position: relative; }
body.admin-tool-overlay-open { overflow: hidden; }
/* Keep the admin sidebar visible above the fixed overlay so the user can
   switch tabs (Students, Schedule, Billing) without closing the iframe.
   We also push the overlay's LEFT edge in by the sidebar width — otherwise
   the iframe content (which starts at left:0) is hidden behind the sidebar
   that sits on top at z-index 40, cutting off the first ~256px of every
   iframed page. When the sidebar is collapsed (.portal-shell.is-collapsed)
   the overlay snaps back to full width. */
body.admin-tool-overlay-open .portal-sidebar { z-index: 40; }
body.admin-tool-overlay-open .admin-tool-overlay { left: 256px; }
body.admin-tool-overlay-open .portal-shell.is-collapsed .admin-tool-overlay { left: 0; }
/* The hamburger toggle has to sit ABOVE the sidebar so the user can collapse
   the sidebar even while a tool overlay is open. Without this bump the toggle
   is hidden behind the overlay (same z-index, but the overlay paints last). */
.portal-menu-toggle { z-index: 50; }

/* Free Tab pane (tools.html?tool=tab&tex=…) — same alphaTab player as the old
   standalone /tab.html, but embedded inside the practice-tools surface. */
.freetab-stage { display: grid; gap: 12px; padding: 16px; background: var(--paper, #fbfaf7); border: 1px solid var(--line); border-radius: 16px; }
.freetab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.freetab-head h2 { font-size: 1.2rem; margin: 0; color: var(--ink); }
.freetab-tempo { color: var(--muted); font-weight: 700; font-size: 0.9rem; white-space: nowrap; margin-left: auto; }
.freetab-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.freetab-loop { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.freetab-loop input[type="checkbox"] { margin: 0; }
.freetab-paper { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; overflow-x: auto; }
.freetab-empty { color: var(--muted); padding: 24px; text-align: center; margin: 0; }
.freetab-note { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Lesson attachments & links (GWJ-59). */
.plan-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plan-attach { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: #eef4f5; border: 1px solid #d7e3e6; border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; font-weight: 700; color: #2a6b78; text-decoration: none; }
.plan-attach:hover { background: #e3eef0; text-decoration: underline; }
.plan-attach svg { flex: 0 0 auto; }
.plan-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.plan-item-link { background: #eef4f5; border-color: #d7e3e6; color: #2a6b78; }
.plan-item-link a { color: #2a6b78; }
.plan-item-link svg { flex: 0 0 auto; }
.plan-attach-edit { display: grid; gap: 6px; }
.plan-attach-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.plan-attach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-attach-add { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-attach-url { flex: 1 1 200px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper, #fbfaf7); }
.plan-attach-title { flex: 0 1 150px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper, #fbfaf7); }
.plan-attach-add .button { flex: 0 0 auto; }
.plan-attach-tip { margin: 4px 0 0; font-size: 0.8rem; }
.plan-file-drop { display: block; margin-top: 8px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; font-size: 0.85rem; color: var(--muted); cursor: pointer; transition: all .12s; }
.plan-file-drop:hover { border-color: var(--red, #b63f2f); color: var(--ink); }
.plan-file-drop.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); color: var(--ink); }
.plan-file-drop.is-uploading { opacity: 0.6; pointer-events: none; }
/* GWJ-78: one combined zone for "drag a GPS lesson" + "drop / click to upload
   a file" + chip display. Chips sit at the top; the dashed hint sits below. */
.plan-drop-combined { display: grid; gap: 10px; min-height: 86px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper, #fbfaf7); cursor: pointer; transition: all .12s; }
.plan-drop-combined:hover { border-color: var(--red, #b63f2f); }
.plan-drop-combined.drag-over { border-color: var(--red, #b63f2f); background: rgba(182,63,47,.06); box-shadow: 0 0 0 2px rgba(182,63,47,.12); }
.plan-drop-combined.is-uploading { opacity: 0.65; pointer-events: none; }
.plan-drop-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.plan-drop-chips:empty { display: none; }
.plan-drop-hint { text-align: center; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.plan-drop-hint strong { color: var(--ink); }
.plan-file-drop.is-uploading span::after { content: ' — uploading…'; }

/* Portal Settings → AI connector instructions (GWJ-66). */
.ai-connect-steps { margin: 4px 0 10px; padding-left: 22px; display: grid; gap: 10px; color: var(--ink); line-height: 1.5; }
.ai-connect-steps li { padding-left: 4px; }
.ai-connect-url { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ai-connect-url code { background: #f3efe8; border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 0.9rem; }
.ai-connect-examples { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }

.gps-search { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel, #fff); padding: 16px; display: grid; gap: 10px; }
.gps-search-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--paper, #fbfaf7); color: var(--ink); }
.gps-search-input:focus { outline: none; border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.gps-search-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.gps-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: grab; font-size: 0.85rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.04); transition: border-color .12s, box-shadow .12s, transform .08s; }
.gps-search-item:hover { border-color: var(--red, #b63f2f); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.gps-search-item:active { cursor: grabbing; transform: scale(.99); }
.gps-search-item .gps-toc-num { width: 26px; height: 26px; font-size: 0.78rem; }
.gps-search-item .gps-search-title { flex: 1 1 auto; }
.gps-search-item .gps-toc-live { margin-left: auto; }
.gps-search-empty { color: var(--muted); font-style: italic; font-size: 0.85rem; }
.portal-history { margin-top: 22px; }
.portal-history h3 { margin: 0 0 10px; }

/* === Friendly student portal: light, centered, clearly-labeled cards === */
.portal-page .portal-app { max-width: 1080px; margin: 0 auto; padding: 30px 22px 84px; background: transparent; }
.portal-page .portal-dashboard { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
.portal-page .portal-loading { text-align: center; padding: 90px 0; }
.portal-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.portal-card-title { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.portal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portal-card-sub { margin: 6px 0 16px; color: var(--muted); font-size: 0.92rem; }
.portal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.portal-welcome-main { display: grid; gap: 2px; }
.portal-welcome .portal-greeting { font-size: 1.85rem; margin: 8px 0 0; line-height: 1.1; }
.portal-welcome .portal-track { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.portal-welcome .portal-credits { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.portal-welcome-side { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.portal-tools-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.plan-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.plan-layout .gps-search { position: sticky; top: 86px; }
.past-search { max-width: 260px; width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--paper, #fbfaf7); color: var(--ink); }
.past-search:focus { outline: none; border-color: var(--red, #b63f2f); box-shadow: 0 0 0 3px rgba(182,63,47,.15); }
.portal-page .portal-lessons { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 4px; }
.portal-lessons-empty { color: var(--muted); font-style: italic; }
.portal-note-card p { color: var(--muted); }
@media (max-width: 820px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-layout .gps-search { position: static; }
}

/* === App shell: left icon sidebar + content === */
.portal-page { background: var(--paper); }
.portal-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; align-items: stretch; }
.portal-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto; }
.portal-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; text-decoration: none; color: var(--ink); font-weight: 900; }
.portal-brand img { width: 34px; height: 34px; }
.portal-brand span { font-size: 1rem; line-height: 1.05; }
.portal-nav { display: flex; flex-direction: column; gap: 2px; }
.portal-nav-label { margin: 14px 10px 4px; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.portal-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem; background: none; border: none; cursor: pointer; width: 100%; text-align: left; transition: background .12s, color .12s; }
.portal-nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.portal-nav-item:hover { background: var(--paper); color: var(--red, #b63f2f); }
.portal-nav-item:hover svg { color: var(--red, #b63f2f); }
.portal-logout { margin-top: auto; color: var(--muted); }
.portal-logout:hover { color: var(--red, #b63f2f); }
.portal-content { padding: 28px clamp(16px, 3vw, 40px) 80px; }
.portal-page .portal-content .portal-dashboard { max-width: 1000px; margin: 0 auto; }
.portal-page .portal-loading { text-align: center; padding: 90px 0; }
.portal-zoom { padding: 11px 22px; font-size: 0.95rem; }

/* Lessons & payments */
.credits-pill { background: rgba(23,108,104,.12); color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 0.82rem; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.package-opt { position: relative; display: grid; gap: 3px; align-content: start; text-align: center; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px 12px; background: var(--paper, #fbfaf7); transition: border-color .12s, box-shadow .12s, transform .08s; }
.package-opt:hover { border-color: var(--red, #b63f2f); box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.package-opt.is-popular { border-color: var(--red, #b63f2f); box-shadow: 0 0 0 2px rgba(182,63,47,.14); }
.pkg-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--red, #b63f2f); color: #fff; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pkg-name { font-weight: 800; font-size: 0.9rem; }
.pkg-price { font-size: 1.4rem; font-weight: 900; color: var(--red, #b63f2f); }
.pkg-per { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.pkg-buy { margin-top: 8px; display: block; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 0; font-weight: 800; font-size: 0.85rem; }
.package-opt:hover .pkg-buy { background: var(--red, #b63f2f); }
.pkg-history-title { margin: 4px 0 10px; font-size: 1rem; }
.payment-history { display: grid; gap: 8px; }
.payment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--paper, #fbfaf7); }
.payment-row-main { display: grid; gap: 1px; }
.payment-row-main strong { font-size: 0.9rem; }
.payment-row-main span { color: var(--muted); font-size: 0.8rem; }
.payment-row-side { text-align: right; display: grid; gap: 1px; }
.payment-amount { font-weight: 900; }
.payment-status { color: #136b54; font-size: 0.78rem; font-weight: 800; }
.payment-empty { color: var(--muted); font-style: italic; }

@media (max-width: 900px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; border-right: none; border-bottom: 1px solid var(--line); padding: 12px 14px; }
  .portal-brand { padding: 0 12px 0 4px; }
  .portal-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .portal-nav-label { display: none; }
  .portal-nav-item { width: auto; padding: 8px 10px; }
  .portal-nav-item span { display: none; }
  .portal-logout { margin: 0 0 0 auto; }
  .portal-logout span { display: inline; }
}

/* === Embedded tool (portal right pane): show only the tool, no page chrome === */
.tools-embed .site-header,
.tools-embed .section-heading,
.tools-embed .tool-tabs,
.tools-embed .site-footer { display: none !important; }
.tools-embed .page-main { padding-top: 0; }
.tools-embed .tools-section { padding: 6px; min-height: 0; background: transparent; color: var(--ink); }
.tools-embed body, .tools-embed { background: var(--paper, #fbfaf7); color: var(--ink); }
.tools-embed .tool-surface { min-height: 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 14px rgba(0,0,0,.05); }
/* Keep the wide tools in their horizontal layout inside the pane (the page's
   1240px breakpoint would otherwise stack them); the board column flexes/scrolls. */
.tools-embed .scale-device-face { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.tools-embed .tab-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .chord-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .inversion-device-face { grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); }
.tools-embed .scale-board-controls { grid-template-columns: minmax(0, 1fr) auto; }
/* Let the fretboard SVGs scale down to the pane width instead of forcing the
   page's 760/820px floor (which clips/scrolls in a narrow embed like the portal
   right pane). The boards are SVGs with viewBoxes, so they shrink cleanly. */
.tools-embed .scale-svg-board { min-width: 0; width: 100%; }
.tools-embed .inversion-map .scale-svg-board { min-width: 0; width: 100%; }
.tools-embed .inversion-card-diagram svg { width: 100%; height: auto; }
/* Drop the chord-screen min-height so the tool packs into a shorter pane. */
.tools-embed .chord-screen { min-height: 0; }
/* On very narrow embeds (phones), stack the control panel above the screen. */
@media (max-width: 640px) {
  .tools-embed .inversion-device-face { grid-template-columns: 1fr; }
}

/* === Dark sidebar === */
.portal-sidebar { background: #211c19; border-right: 1px solid rgba(255,255,255,.08); }
.portal-brand { color: #fff; }
.portal-brand img { background: #fff; border-radius: 50%; padding: 2px; box-sizing: border-box; }

/* === Collapsible sidebar — hamburger as a tab on the menu's upper-right === */
.portal-menu-toggle { position: fixed; top: 12px; left: 256px; z-index: 30; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-left: none; border-radius: 0 9px 9px 0; background: #fff; cursor: pointer; box-shadow: 2px 2px 8px rgba(0,0,0,.18); }
.portal-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: background .12s; }
.portal-menu-toggle:hover { border-color: var(--red, #b63f2f); }
.portal-menu-toggle:hover span { background: var(--red, #b63f2f); }
.portal-shell.is-collapsed { grid-template-columns: 1fr; }
.portal-shell.is-collapsed .portal-sidebar { display: none; }
.portal-shell.is-collapsed .portal-menu-toggle { top: 12px; left: 0; border-radius: 0 9px 9px 0; }
.portal-shell.is-collapsed .portal-content { padding-left: 70px; }
@media (max-width: 900px) {
  .portal-menu-toggle, .portal-shell.is-collapsed .portal-menu-toggle { position: sticky; top: 12px; left: auto; transform: none; align-self: flex-start; }
  .portal-shell.is-collapsed .portal-content { padding-left: clamp(16px, 3vw, 40px); }
}
.portal-nav-label { color: rgba(255,255,255,.42); }
.portal-nav-item { color: rgba(255,255,255,.82); }
.portal-nav-item svg { color: rgba(255,255,255,.55); }
.portal-nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.portal-nav-item:hover svg { color: #fff; }
.portal-nav-item.is-active { background: var(--red, #b63f2f); color: #fff; }
.portal-nav-item.is-active svg { color: #fff; }
.portal-logout { color: rgba(255,255,255,.6); }
.portal-logout:hover { background: rgba(255,255,255,.09); color: #fff; }
@media (max-width: 900px) {
  .portal-sidebar { border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* === Right-pane views (payments page + tool iframe) === */
.portal-view { display: none; }
.portal-view.is-active { display: block; }
.portal-payments-view.is-active { max-width: 1000px; margin: 0 auto; }
.portal-recordings-view.is-active { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; }

/* === Practice recordings (audio + video, stored in IndexedDB) === */
.rec-recorder .portal-card-head { flex-wrap: wrap; gap: 12px; }
.rec-mode { display: inline-flex; gap: 4px; padding: 4px; background: #f1ece2; border-radius: 999px; }
.rec-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 800; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.rec-mode-btn svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-mode-btn:hover { color: var(--ink); }
.rec-mode-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.rec-stage { position: relative; min-height: 220px; border-radius: 14px; background: linear-gradient(180deg, #fbfaf7, #f3eee2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 14px 0 12px; padding: 18px; }
.rec-stage.is-hidden { display: none; }
.rec-preview { width: 100%; max-width: 720px; max-height: 420px; aspect-ratio: 16 / 9; background: #1a1a1a; border-radius: 10px; object-fit: cover; transform: scaleX(-1); /* mirror selfie camera */ }
.rec-preview.is-hidden { display: none; }
.rec-meter { display: block; width: 100%; max-width: 720px; height: 80px; }
.rec-meter.is-hidden { display: none; }
.rec-stage-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.9rem; text-align: center; max-width: 80%; }
.rec-stage[data-phase="recording"] .rec-stage-hint { display: none; }

.rec-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rec-go {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--red, #b63f2f); color: #fff; font: inherit; font-weight: 900; font-size: 1rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.rec-go:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.rec-go:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.rec-go-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.rec-go.is-recording { background: #1a1a1a; animation: rec-pulse 1.4s ease-in-out infinite; }
.rec-go.is-recording .rec-go-dot { background: var(--red, #b63f2f); animation: rec-blink 0.9s ease-in-out infinite; border-radius: 3px; width: 14px; height: 14px; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(214, 68, 53, 0.5); } 50% { box-shadow: 0 3px 0 rgba(0,0,0,.15), 0 0 0 14px rgba(214, 68, 53, 0); } }
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 1.4rem; color: var(--ink); min-width: 60px; }
.rec-status { font-size: 0.92rem; color: var(--muted); }
.rec-status[data-kind="error"] { color: var(--red, #b63f2f); font-weight: 700; }
.rec-status[data-kind="ok"] { color: #2f8c4a; font-weight: 700; }

/* Review state (after a clip is captured but before save) */
.rec-review { margin-top: 14px; padding: 18px; border-radius: 14px; background: #fbf6ec; border: 1px dashed var(--line); }
.rec-review.is-hidden { display: none; }
.rec-review-title { margin: 0 0 10px; font-size: 1.05rem; }
.rec-review-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 720px) { .rec-review-body { grid-template-columns: 1fr; } }
.rec-review-player { background: #1a1a1a; border-radius: 10px; overflow: hidden; min-height: 120px; }
.rec-review-media { width: 100%; height: auto; display: block; max-height: 360px; }
.rec-review-media[src$=".mp4"], .rec-review-player video { aspect-ratio: 16 / 9; object-fit: contain; }
.rec-review-meta { display: grid; gap: 12px; align-content: start; }
.rec-review-label { display: grid; gap: 4px; }
.rec-review-label > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rec-review-label input, .rec-review-label textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font: inherit; }
.rec-review-label textarea { min-height: 70px; resize: vertical; }
.rec-review-actions { display: flex; gap: 10px; align-items: center; }

/* GWJ-90: Tabs splitting the recordings list into recent ("New", ≤7 days)
   and archival ("Saved", older). Search bar shows only on the Saved tab. */
.rec-tabs {
  display: flex; gap: 4px; margin: 10px 0 0;
  border-bottom: 1px solid var(--line);
}
.rec-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px 10px; margin-bottom: -1px;
  font-weight: 800; font-size: 0.94rem; color: var(--muted);
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.rec-tab:hover { color: var(--ink); }
.rec-tab.is-active { color: var(--red, #b63f2f); border-bottom-color: var(--red, #b63f2f); }
.rec-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: rgba(0,0,0,0.07); color: var(--ink);
  font-size: 0.75rem; font-weight: 900;
}
.rec-tab.is-active .rec-tab-count { background: var(--red, #b63f2f); color: #fff; }
.rec-tab-search { margin: 12px 0 4px; }
.rec-tab-search[hidden] { display: none; }
.rec-search-input {
  width: 100%; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600;
}
.rec-search-input::placeholder { color: var(--muted); }
.rec-search-input:focus { outline: 2px solid var(--red, #b63f2f); outline-offset: 1px; border-color: var(--red, #b63f2f); }
.rec-tab-blurb { margin: 8px 0 12px; }

/* Saved list */
.rec-list { display: grid; gap: 12px; margin-top: 6px; }
.rec-card {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px;
  padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
.rec-card.is-open { border-color: rgba(214, 68, 53, 0.45); box-shadow: 0 4px 16px rgba(214,68,53,0.08); }
.rec-card-icon { width: 54px; height: 54px; border-radius: 12px; border: 0; background: #faf3e6; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--red, #b63f2f); }
.rec-card-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-card-icon:hover { background: #f2e6cb; }
.rec-card[data-kind="video"] .rec-card-icon { background: #eef3fb; color: #1f5db4; }
.rec-card-body { min-width: 0; display: grid; gap: 8px; }
.rec-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rec-card-title { flex: 1 1 280px; min-width: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-weight: 800; font-size: 1rem; color: var(--ink); }
.rec-card-title:hover { border-color: var(--line); }
.rec-card-title:focus { background: #fff; border-color: var(--red, #b63f2f); outline: 0; }
.rec-card-meta { font-size: 0.85rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.rec-card-notes { margin: 0; color: var(--muted); font-size: 0.92rem; }
.rec-card-player { display: none; }
.rec-card.is-open .rec-card-player { display: block; }
.rec-card-media { width: 100%; max-height: 360px; display: block; border-radius: 8px; background: #1a1a1a; }
.rec-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-card-actions .button.tiny { font-size: 0.8rem; padding: 5px 10px; }
.rec-card-status { font-size: 0.85rem; color: var(--muted); }
.rec-card-status[data-kind="ok"] { color: #2f8c4a; font-weight: 700; }
.rec-card-status[data-kind="error"] { color: var(--red, #b63f2f); font-weight: 700; }
.rec-card-shared { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #e7f4ec; color: #2f8c4a; font-weight: 800; font-size: 0.78rem; }
.rec-card.is-shared { border-color: #b7dec6; }

/* === Admin: practice clips inbox on a student page === */
.admin-clips-section { margin-top: 18px; }
.admin-clips-section h2 { font-size: 1.05rem; }
.admin-clips-list { display: grid; gap: 12px; margin-top: 8px; }
.admin-clip-card { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.admin-clip-card.is-open { border-color: rgba(214, 68, 53, 0.45); box-shadow: 0 4px 16px rgba(214,68,53,0.08); }
.admin-clip-icon { width: 54px; height: 54px; border-radius: 12px; border: 0; background: #faf3e6; color: var(--red, #b63f2f); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.admin-clip-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-clip-card[data-kind="video"] .admin-clip-icon { background: #eef3fb; color: #1f5db4; }
.admin-clip-body { min-width: 0; display: grid; gap: 6px; }
.admin-clip-title { margin: 0; font-weight: 800; font-size: 1rem; color: var(--ink); }
.admin-clip-meta { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.admin-clip-notes { margin: 0; color: var(--muted); font-size: 0.92rem; }
.admin-clip-player { display: none; margin-top: 4px; }
.admin-clip-card.is-open .admin-clip-player { display: block; }
.admin-clip-media { width: 100%; max-height: 360px; display: block; border-radius: 8px; background: #1a1a1a; }
.admin-clip-actions { display: flex; gap: 8px; align-items: center; }
.admin-clip-card.is-unread { border-color: rgba(214, 68, 53, 0.45); background: linear-gradient(180deg, #fff, #fff7ef); }
.admin-clip-card.is-unread .admin-clip-title::after {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  background: var(--red, #b63f2f); border-radius: 50%; vertical-align: middle;
}

/* === Unread practice clip notifications === */
/* Sidebar pill next to Students */
.portal-nav-item .nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.72rem; line-height: 1;
}
.portal-nav-item .nav-badge[hidden] { display: none; }
/* Roster dot — small red marker by a student's name when unread clips exist */
.roster-row .roster-clip-dot {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.7rem; line-height: 1;
}
/* Today page "new clips" card */
.home-clips-card { border-left: 4px solid var(--red, #b63f2f); }
.home-clips-card .tool-header h2 { display: flex; align-items: baseline; gap: 8px; }
.home-clips-card .clips-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--red, #b63f2f); color: #fff;
  font-weight: 900; font-size: 0.78rem; line-height: 1;
}
.home-clips-list { display: grid; gap: 10px; margin-top: 4px; }
.home-clip-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.home-clip-icon { width: 36px; height: 36px; border-radius: 8px; background: #faf3e6; color: var(--red, #b63f2f); display: flex; align-items: center; justify-content: center; }
.home-clip-row[data-kind="video"] .home-clip-icon { background: #eef3fb; color: #1f5db4; }
.home-clip-icon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-clip-meta { min-width: 0; display: grid; gap: 2px; }
.home-clip-title { margin: 0; font-weight: 800; font-size: 0.95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-clip-sub { margin: 0; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.home-clip-actions { display: flex; gap: 6px; }
.home-clip-actions .button.tiny { font-size: 0.78rem; padding: 4px 9px; }
.home-clips-empty { color: var(--muted); margin: 0; }
.home-clip-player { grid-column: 1 / -1; margin-top: 8px; }
.home-clip-player video, .home-clip-player audio { width: 100%; max-height: 280px; border-radius: 8px; background: #1a1a1a; display: block; }
/* GWJ-87: Admin-viewing-portal banner. Sticky strip across the very top of
   the page that warns Jimmy he's inside a student's portal and offers a
   one-click "Back to admin" out. Inserted as document.body's first child by
   portal-shell.js, so it sits above the portal sidebar + main content
   without needing any HTML markup changes.
   v3: cream-on-dark-ink for readability, slimmer row, white-on-red button. */
.admin-portal-banner {
  position: sticky; top: 0; z-index: 1000;
  background: #faf3e6;
  color: #1d1712;
  border-bottom: 1px solid #e6dcc8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.admin-portal-banner .apb-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  max-width: 1320px; margin: 0 auto; padding: 4px 18px;
  font-size: 0.86rem; font-weight: 700; line-height: 1.2;
}
.admin-portal-banner .apb-eye { font-size: 0.95rem; line-height: 1; color: var(--red, #b63f2f); }
.admin-portal-banner .apb-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-portal-banner .apb-name { font-weight: 900; color: var(--red, #b63f2f); }
.admin-portal-banner .apb-back {
  flex: none;
  background: var(--red, #b63f2f); color: #fff !important; border: none;
  text-decoration: none; padding: 3px 11px; font-weight: 800; font-size: 0.82rem;
  border-radius: 6px; line-height: 1.4;
}
.admin-portal-banner .apb-back:hover { background: #d4513f; color: #fff !important; }
@media (max-width: 560px) {
  .admin-portal-banner .apb-inner { font-size: 0.78rem; padding: 3px 12px; gap: 8px; }
}

.portal-toolview { display: none; }
.portal-toolview.is-active { display: flex; flex-direction: column; min-height: calc(100vh - 56px); }
.toolview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; }
.toolview-bar strong { font-size: 1.2rem; }
.toolview-bar a { font-weight: 700; color: var(--red, #b63f2f); text-decoration: none; font-size: 0.9rem; }
.portal-toolview iframe { flex: 1 1 auto; width: 100%; min-height: 78vh; border: 1px solid var(--line); border-radius: 14px; background: #fff; }

/* === Practice-this-week tracker === */
.practice-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.practice-count { background: rgba(23,108,104,.12); color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 0.82rem; }
.practice-toggle { border: 1px solid var(--line); background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.practice-toggle:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.practice-body.is-hidden { display: none; }
.practice-cal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 10px; }
.practice-cal-nav button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper, #fbfaf7); cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink); }
.practice-cal-nav button:hover { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.practice-cal-nav strong { min-width: 170px; text-align: center; font-size: 1rem; }
/* GWJ-46: in the Practice calendar, sit the < Month > nav directly above the
   254px grid (7*32 + 6*5) with prev/next at its edges, rather than centered in
   the wider page column. (The lessons mini-calendar nav keeps its own sizing.) */
.practice-cal-wrap .practice-cal-nav { justify-content: space-between; gap: 8px; width: 254px; max-width: 100%; }
.practice-cal-wrap .practice-cal-nav strong { flex: 1; min-width: 0; font-size: 0.98rem; }
.practice-cal-dow { display: grid; grid-template-columns: repeat(7, 32px); gap: 5px; margin-bottom: 4px; }
.practice-cal-dow span { text-align: center; font-size: 0.6rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.practice-cal { display: grid; grid-template-columns: repeat(7, 32px); gap: 5px; }
.cal-cell { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: all .12s; }
.cal-cell.cal-empty { border: none; background: none; cursor: default; }
.cal-cell:not(.cal-empty):hover { border-color: #2f9e44; }
.cal-cell.is-today { border-color: var(--ink); font-weight: 900; }
.cal-cell.is-done { background: #2f9e44; border-color: #2f9e44; color: #fff; }

@media (max-width: 1240px) {
  .menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 50%; background: white; }
  .menu-toggle span { width: 18px; height: 2px; display: block; background: var(--ink); }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; grid-template-columns: 1fr; gap: 0; padding: 14px 22px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-nav.open { display: grid; }
  .nav-cta { width: max-content; margin-top: 8px; }
  section, main { scroll-margin-top: 74px; }
  html { scroll-padding-top: 74px; }
  .tools-page { padding-top: 34px; }
  .hero { min-height: min(700px, 84vh); align-items: center; padding: 116px 22px 82px; }
  .hero-bg { object-position: 62% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(12,10,8,0.9) 0%, rgba(12,10,8,0.66) 48%, rgba(12,10,8,0.14) 100%), linear-gradient(90deg, rgba(12,10,8,0.38), rgba(12,10,8,0)); }
  .quick-strip, .lesson-grid, .reviews-grid, .about-section, .contact-band, .tools-layout, .chord-card, .tuner-layout, .scale-controls, .scale-fingering-row, .portal-layout, .portal-teaser, .auth-layout, .portal-dashboard { grid-template-columns: 1fr; }
  .scale-device-face { grid-template-columns: 1fr; }
  .tab-device-face { grid-template-columns: 1fr; }
  .chord-device-face { grid-template-columns: 1fr; }
  .inversion-device-face { grid-template-columns: 1fr; }
  .trainer-device-face { grid-template-columns: 1fr; }
  .scale-fingering-label { padding-top: 0; }
  .scale-board-controls { grid-template-columns: 1fr; }
  .scale-board-controls .scale-mode-toggle { justify-self: end; }
  .about-portrait-section .about-copy { grid-column: auto; }
  .tool-tabs { grid-template-columns: repeat(2, 1fr); }
  .portal-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .brand span { max-width: 136px; line-height: 1.05; }
  h1 { font-size: clamp(3.1rem, 17vw, 4.7rem); }
  .site-header { padding-block: 10px; }
  .hero { min-height: auto; padding: 108px 18px 78px; }
  .section { padding-block: 58px; }
  .tools-page { padding-top: 30px; }
  .tool-tabs, .planner-controls, .chord-controls, .scale-controls, .control-row { grid-template-columns: 1fr; }
  .metronome-stage { grid-template-columns: 1fr; }
  .metronome-device { min-height: 560px; padding-inline: 16px; }
  .metronome-face { grid-template-columns: 1fr; }
  .lcd-screen { max-width: none; min-height: 168px; }
  .scale-device { min-height: auto; padding: 34px 16px 18px; }
  .scale-screen { padding: 14px; }
  .scale-device .scale-mode-toggle { width: 100%; }
  .scale-device .scale-mode-button { flex: 1 1 auto; }
  .chord-device { min-height: auto; padding: 34px 16px 18px; }
  .chord-screen { min-height: 320px; padding: 14px; }
  .chord-control-panel .chord-controls label { grid-template-columns: 1fr; gap: 5px; }
  .inversion-device { min-height: auto; padding: 34px 16px 18px; }
  .inversion-screen { padding: 14px; }
  .inversion-card-grid { grid-template-columns: 1fr; }
  .inversion-control-row { grid-template-columns: 1fr; }
  .tab-device { min-height: auto; padding: 34px 16px 18px; }
  .tab-screen { padding: 14px; }
  .tab-tempo-row { align-items: stretch; flex-direction: column; }
  .tab-tempo-presets { display: grid; grid-template-columns: repeat(3, 1fr); }
  .trainer-device { min-height: auto; padding: 34px 16px 18px; }
  .trainer-screen { min-height: 320px; padding: 14px; }
  .trainer-control-panel .note-choices { grid-template-columns: repeat(3, 1fr); }
  .metronome-control-row { grid-template-columns: 1fr; gap: 6px; }
  .metronome-actions { grid-template-columns: 1fr; }
  .tuner-device {
    min-height: 540px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "screen"
      "led"
      "controls"
      "speaker";
    padding-inline: 16px;
  }
  .tuner-screen { min-height: 168px; }
  .tuner-select { grid-template-columns: 1fr; gap: 6px; }
  .string-buttons { grid-template-columns: repeat(3, 1fr); }
  .tuner-device-actions { grid-template-columns: 1fr; }
  .tempo-stepper { grid-template-columns: repeat(2, 1fr); }
  .tempo-button { width: 100%; border-radius: var(--radius); }
  .tempo-presets { grid-template-columns: repeat(3, 1fr); }
  .trainer-mode { width: 100%; grid-template-columns: 1fr; border-radius: var(--radius); }
  .trainer-mode button { border-radius: calc(var(--radius) - 2px); }
  .fretboard-marker { width: 20px; height: 20px; border-width: 2px; }
  .triad-marker { width: 19px; height: 19px; border-width: 2px; }
  .scale-svg-board { min-width: 640px; }
  .triad-notes { grid-template-columns: 1fr; }
  .finder-marker { width: 19px; height: 19px; border-width: 2px; }
  .finder-summary, .finder-result { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .note-choices { grid-template-columns: repeat(3, 1fr); }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Site-wide dark theme — matches the tools page background.
   The page background is dark with light text directly on it,
   while light "cards/panels" keep their dark text for contrast.
   The sticky header stays light, exactly like the tools page.
   ============================================================ */
body { background: #11100f; color: #f3efe9; }

/* Header stays light, so force its text dark (it would otherwise
   inherit the new light body color and vanish). */
.site-header { color: var(--ink); }

/* Light section bands blend into the dark background */
.page-hero { background: transparent; }
.reviews-section { background: transparent; }
.portal-section { background: transparent; }
.portal-teaser { background: transparent; }
.portal-app { background: transparent; }
.auth-page { background: transparent; }

/* Secondary text that sits directly on the dark background */
.page-hero p:not(.eyebrow),
.about-copy,
.auth-copy p { color: rgba(243, 239, 233, 0.74); }

/* Light cards/panels keep dark text for readability on white */
.lesson-panel,
.reviews-grid figure,
.reviews-masonry figure,
.tag-list span,
.teaser-panel,
.auth-card,
.login-card,
.student-card,
.lesson-module,
.portal-sidebar,
.portal-main,
.teacher-panel { color: var(--ink); }

/* Light (quiet) button keeps dark text on its white face */
.button.quiet { color: var(--ink); }

/* Stat strip → dark band with light text */
.quick-strip { background: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); }
.quick-strip div { background: #1b1916; }
.quick-strip strong { color: #f3efe9; }
.quick-strip span { color: rgba(243, 239, 233, 0.66); }

/* ============================================================
   Studio admin page
   ============================================================ */
.admin-page { padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 52px) clamp(48px, 8vw, 80px); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.admin-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; }
.admin-demo-tag { align-self: flex-start; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }

.admin-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: start; }

.admin-roster { position: sticky; top: 86px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 16px; display: grid; gap: 12px; }
.admin-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-roster-head h2 { font-size: 1.1rem; }
.admin-add-btn { min-height: 38px; padding: 0 12px; font-size: 0.86rem; }
.roster-list { display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.roster-item { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; cursor: pointer; }
.roster-item:hover { border-color: var(--ink); }
.roster-item.active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.roster-name { font-weight: 900; }
.roster-sub { color: var(--muted); font-size: 0.84rem; }
.roster-meta { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.roster-item.is-inactive { opacity: 0.6; }
.roster-tag { font-style: normal; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.roster-inactive-row { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.roster-inactive-row input { width: 15px; height: 15px; }

/* Students Sort & Filter dropdown menu (GWJ-55/56). */
.roster-sortfilter { position: relative; flex: 0 0 auto; }
.roster-sortfilter-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.roster-sortfilter-caret { font-size: 0.7rem; color: var(--muted); }
.roster-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 280px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; }
.roster-menu.is-hidden { display: none; }
.roster-menu-label { margin: 8px 10px 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.roster-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 0.98rem; color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.roster-menu-item:hover { background: #f5f1ea; }
.roster-menu-item.is-sort.is-selected { background: rgba(182,64,48,0.12); color: var(--red-dark, #8f2f23); font-weight: 700; }
.roster-menu-check { color: var(--red); font-weight: 800; opacity: 0; }
.roster-menu-item.is-sort.is-selected .roster-menu-check { opacity: 1; }
.roster-menu-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.roster-menu-box { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; position: relative; }
.roster-menu-item.is-checked .roster-menu-box { background: var(--red); border-color: var(--red); }
.roster-menu-item.is-checked .roster-menu-box::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 0.8rem; font-weight: 800; }
/* ---- Shared schedule/reschedule picker ---- */
.gsp-modal { position: fixed; inset: 0; background: rgba(20,17,15,.55); display: grid; place-items: center; z-index: 90; padding: 16px; }
.gsp-modal.is-hidden { display: none; }
.gsp-card { background: #fff; color: var(--ink); border-radius: 14px; width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.gsp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.gsp-head h3 { margin: 0; font-size: 1.05rem; }
.gsp-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); }
.gsp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px; overflow: auto; }
@media (max-width: 520px) { .gsp-body { grid-template-columns: 1fr; } }
.gsp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 800; }
.gsp-cal-nav button { border: 0; background: none; font-size: 1.2rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.gsp-cal-nav button:hover { background: #f0ece3; }
.gsp-dow, .gsp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gsp-dow span { text-align: center; font-size: 0.68rem; font-weight: 800; color: var(--muted); }
.gsp-day { border: 0; background: none; font: inherit; font-weight: 700; padding: 7px 0; border-radius: 8px; cursor: pointer; position: relative; }
.gsp-day.gsp-empty { visibility: hidden; }
.gsp-day[data-gsp-day]:hover { background: #f0ece3; }
.gsp-day.gsp-today { box-shadow: inset 0 0 0 2px var(--ink); }
.gsp-day.gsp-sel { background: var(--red); color: #fff; }
.gsp-day.gsp-unavail { color: #c9bfb2; cursor: not-allowed; }
.gsp-day.gsp-unavail::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 2px solid rgba(182,64,48,0.55); transform: rotate(-45deg); transform-origin: center; }
.gsp-times-date { font-weight: 800; margin: 0 0 8px; }
.gsp-time-list { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.gsp-time { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 11px; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.gsp-time.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.gsp-hint { color: var(--muted); font-size: 0.88rem; }
.gsp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
/* Calendar "Add a lesson" modal: wider card + inline date/time picker.
   Cap the height and let the body scroll, with the action buttons pinned in a
   sticky footer so Save/Cancel are always visible. */
.ca-modal-card { max-width: 600px; width: min(600px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.ca-modal-card .admin-form { overflow-y: auto; flex: 1 1 auto; min-height: 0; gap: 10px; }
.ca-modal-card .admin-form-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; margin-top: 2px; border-top: 1px solid var(--line); }
.ca-pick-label { font-weight: 800; font-size: 0.84rem; color: var(--muted); }
.ca-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ca-pick .gsp-times { max-height: 260px; overflow-y: auto; }
.ca-modal-card .sched-add-row { grid-template-columns: 1fr 1fr; }
.ca-modal-card .admin-form select { width: 100%; }
@media (max-width: 520px) { .ca-pick { grid-template-columns: 1fr; } }
/* Trigger button that opens the shared date+time picker — styled to read like a form field. */
.sched-datepick-field { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 9px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sched-datepick-field:hover { border-color: var(--ink); }
/* Account/settings form feedback message */
.portal-account-form { max-width: 420px; }
.form-msg { margin: 4px 0 0; font-weight: 700; font-size: 0.88rem; }
.form-msg.is-hidden { display: none; }
.form-msg.is-error { color: var(--red); }
.form-msg.is-ok { color: #2e7d32; }
.zh-table { margin: 4px 0 18px; }
.zh-table td { vertical-align: top; }
.zh-attach { display: flex; flex-direction: column; gap: 2px; }
.zh-attach a { font-size: 0.84rem; word-break: break-all; }
.pay-apply-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.pay-apply-row input { width: auto; }
/* Checkbox + label inline. Higher specificity than ".admin-form label{display:grid}"
   which otherwise stacks the box above the text. */
.admin-form label.sched-noend-field,
.sched-noend-field { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.sched-noend-field input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.admin-form label.sched-noend-field span { font-weight: 700; font-size: 0.9rem; color: var(--ink); text-transform: none; }
.pay-owed { color: var(--red); font-weight: 800; }
.pay-applied { display: block; font-size: 0.84rem; }
.tool-badge.is-owed { background: var(--red); color: #fff; }

/* ---- Admin students: search-first page + tabbed student view ---- */
.admin-search-view .students-search { display: grid; gap: 14px; }
.students-search-row { display: flex; gap: 10px; align-items: center; }
.students-search-row .roster-search { flex: 1; margin: 0; }
.students-search-row .button { flex: 0 0 auto; }
.admin-search-view .roster-list { display: grid; gap: 8px; max-height: none; overflow: visible; }
.admin-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
}
.admin-back-btn:hover { border-color: var(--ink); }
.admin-back-btn span { font-size: 1.2em; line-height: 1; }
.admin-student-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-student-head h2 { font-size: 1.7rem; }
.admin-student-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-weight: 800; font-size: 0.95rem;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { color: var(--red-dark); border-bottom-color: var(--red); }
.admin-tab-panel { display: none; }
.admin-tab-panel.is-active { display: grid; gap: clamp(14px, 2vw, 20px); }
/* Contextual action button on the tab row (GWJ-51/52). */
.admin-tabs-spacer { margin-left: auto; }
.admin-tab-action { align-self: center; margin: 0 0 6px; padding: 7px 14px; font-size: 0.85rem; }
.admin-tab-action[hidden] { display: none; }
.sched-add { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sched-add-label { margin: 0 0 10px; font-weight: 900; }
.sched-add-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.sched-row-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .sched-add-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .sched-add-row { grid-template-columns: 1fr; } }

.admin-detail { display: grid; gap: clamp(14px, 2vw, 20px); }
.admin-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: clamp(16px, 2.2vw, 24px); }
.admin-card h2 { font-size: 1.5rem; }
.admin-card h3 { font-size: 1.12rem; }
.muted-line { color: var(--muted); margin: 6px 0 0; line-height: 1.5; font-size: 0.92rem; }
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-actions .button { min-height: 36px; padding: 0 14px; font-size: 0.85rem; }

/* ============================================================
   Guitar GPS lesson reader (book pages converted to web)
   ============================================================ */
.lesson-reader { max-width: 920px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 40px) clamp(60px, 9vw, 96px); }
.lesson-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lesson-bar h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.02; margin-top: 4px; white-space: nowrap; }
@media (max-width: 600px) { .lesson-bar h1 { white-space: normal; } }
.lesson-lock { flex: none; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 7px 13px; font-size: 0.78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.lesson-intro { color: rgba(243,239,233,0.78); font-size: 1.08rem; line-height: 1.6; max-width: 64ch; margin: 14px 0 0; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.lesson-sheets { display: grid; gap: 20px; margin-top: 22px; }
.lesson-sheet { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.lesson-sheet img { display: block; width: 100%; height: auto; }
.lesson-nav { display: flex; align-items: stretch; gap: 12px; margin-top: 30px; }
.lesson-nav-link { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 14px 16px; color: var(--paper); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.lesson-nav-link[hidden] { display: none; }
.lesson-nav-index { text-align: center; }
.lesson-nav-link.next { text-align: right; }
.lesson-nav-link span { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.lesson-nav-link strong { font-size: 1.05rem; }
.lesson-nav-link:hover { border-color: var(--red); }
@media (max-width: 480px) { .lesson-nav { gap: 8px; } .lesson-nav-link { padding: 11px 10px; } .lesson-nav-link strong { font-size: 0.92rem; } }

/* Lesson prose + embedded interactive tab players */
.lesson-body { margin-top: 18px; }
.lesson-body p { color: rgba(243,239,233,0.82); font-size: 1.06rem; line-height: 1.65; max-width: 70ch; margin: 0 0 16px; }
.lesson-body em { color: var(--paper); font-style: italic; }
.lesson-body strong { color: var(--paper); }
.lesson-body h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 30px 0 10px; }
.lesson-body .photo-figure,
.lesson-body .parts-figure {
  margin: 18px 0 8px;
}
/* GWJ-76: the source image is portrait (1676×2133), so any width-based
   constraint forces vertical scrolling on a typical laptop viewport.
   Constrain by viewport HEIGHT instead so it fits on screen without
   scrolling, and let the aspect ratio pick the width. Allow more height
   on tall screens; ease back on phones where every vh counts. */
.lesson-body .parts-figure {
  display: flex; justify-content: center;
  width: 100%;
  margin: 22px 0 8px;
}
.lesson-body .parts-figure img {
  /* These !important overrides defeat the earlier `.lesson-body .photo-figure img,
     .lesson-body .parts-figure img { width: 100% }` rule a few lines below. */
  width: auto !important;
  max-width: 100%;
  max-height: calc(100vh - 280px);
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .lesson-body .parts-figure img { max-height: calc(100vh - 200px); }
}
.lesson-body .photo-figure img,
.lesson-body .parts-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
}
.lesson-body .photo-figure.narrow img {
  max-width: 420px;
  margin: 0 auto;
}
.lesson-body .fretboard-figure {
  max-width: 300px;
}
.lesson-body .fw-photo {
  float: right;
  width: min(320px, 44%);
  margin: 4px 0 18px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
}
.lesson-body .fw-photo img,
.lesson-body .fw-sign img {
  display: block;
  width: 100%;
  height: auto;
}
.lesson-body .fw-photo figcaption {
  padding: 7px 10px;
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.lesson-body .fw-sign {
  clear: both;
  margin: 30px 0 0;
}
.lesson-body .fw-sign img {
  width: min(330px, 72%);
}
.lesson-body .fw-byline {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lesson-body .pick-step {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 22px 0;
}
.lesson-body .pick-step img {
  flex: none;
  width: min(280px, 44%);
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.lesson-body .pick-step .step-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.lesson-body .pick-step .step-body p {
  flex: 1;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.22rem, 2.7vw, 1.7rem);
  line-height: 1.45;
}
.lesson-body .pick-step .step-num {
  flex: none;
  display: inline-grid;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}
@media (max-width: 560px) {
  .lesson-body .fw-photo {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
  .lesson-body .pick-step {
    flex-direction: column;
    align-items: flex-start;
  }
  .lesson-body .pick-step img {
    width: 100%;
  }
}
.gps-player {
  position: relative;
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
.gps-player:focus-visible {
  outline: 3px solid rgba(209,68,53,0.72);
  outline-offset: 4px;
}
.gps-exercise-label {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin: 2px 2px 6px;
}

/* Guitar GPS contents index */
.gps-toc-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 64ch; margin: 6px 0 clamp(20px, 3vw, 32px); }
.gps-toc-section { margin-bottom: clamp(24px, 4vw, 40px); }
.gps-toc-section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.gps-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.gps-toc-list a { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 12px 14px; font-weight: 700; }
.gps-toc-list a:hover { border-color: var(--red); }
.gps-toc-num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; font-weight: 900; }
.gps-toc-live { margin-left: auto; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #136b54; border: 1px solid #1f9e7e; border-radius: 999px; padding: 2px 8px; }
.gps-source-pages {
  display: grid;
  gap: 18px;
  margin: 18px 0 26px;
}
.gps-source-pages figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gps-source-pages img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.gps-player .tab-staff-wrap {
  padding: 14px 0 0;
  overflow-x: auto;
}
.gps-counted .tab-staff-wrap svg {
  display: block;
}
.gps-counted .tab-staff-wrap svg:not(:first-child):not(:last-child) {
  margin-bottom: 58px;
}
/* Chord diagrams in lessons (rendered by gps-chords.js).
   `column-reverse` puts the chord name ABOVE the SVG so this matches the
   gps-player overlay (which also labels its diagrams on top). The JS appends
   the name after the SVG; the reverse keeps that DOM order while flipping
   the visual stacking.
   The SVG already has built-in top padding for the X / O markers above the
   nut, so we don't need flex gap on top of that — `gap: 0` and a small
   negative margin under the name keeps the label snug against the diagram. */
.chord-fig { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 0; }
/* Pull the SVG up under the name so the label sits just above the X / O
   row — the SVG's natural top padding leaves ~20px of empty space before
   those markers, so -22px tucks the name in tight without overlapping. */
.chord-fig-name { margin-bottom: -22px; }
/* Hover-to-play chord-fig diagrams (wired up in gps-chords.js): give a soft
   pointer + lift so users discover the interaction. */
.chord-fig-playable { cursor: pointer; transition: transform 120ms ease, filter 120ms ease; }
.chord-fig-playable:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)); }
.chord-fig .chord-svg { width: 150px; max-width: 100%; height: auto; }
.chord-fig-name { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.chord-figs-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 18px 0; }
.chord-tab-svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 4px auto 8px; }
.chord-tab-row { margin: 6px 0 26px; }

.finger-shift-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
.finger-shift-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.finger-shift-copy {
  display: block;
  padding: 14px 16px 4px;
  color: var(--ink);
}
.finger-shift-copy strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}
.finger-shift-copy span {
  display: block;
  color: #665c52;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}
.shift-chord-a,
.shift-chord-b {
  color: var(--ink);
}
.animated-chord-chart {
  --gap-x: 15.6%;
  --gap-y: 18.5%;
  --x0: 7%;
  --y0: 7%;
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto 12px;
  padding: 4px 18px 12px;
}
.animated-chord-label {
  position: relative;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 2px 4px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
}
.animated-chord-label span {
  grid-area: 1 / 1;
  animation: chord-label-a 4s ease-in-out infinite;
}
.animated-chord-label span:last-child {
  color: var(--red);
  animation-name: chord-label-b;
}
@keyframes chord-label-a {
  0%, 30% { opacity: 1; transform: translateY(0); }
  42%, 78% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes chord-label-b {
  0%, 30% { opacity: 0; transform: translateY(4px); }
  42%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}
.open-row,
.string-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  text-align: center;
  color: #4f4841;
  font-size: 0.72rem;
  font-weight: 900;
}
.open-row {
  min-height: 20px;
  margin-bottom: 4px;
}
.string-row {
  margin-top: 8px;
  color: #6a6158;
}
.animated-board {
  position: relative;
  aspect-ratio: 1 / 0.9;
}
.animated-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent calc(7% - 1px), #171717 calc(7% - 1px) calc(7% + 1px), transparent calc(7% + 1px)),
    linear-gradient(90deg, transparent calc(22.6% - 1px), #171717 calc(22.6% - 1px) calc(22.6% + 1px), transparent calc(22.6% + 1px)),
    linear-gradient(90deg, transparent calc(38.2% - 1px), #171717 calc(38.2% - 1px) calc(38.2% + 1px), transparent calc(38.2% + 1px)),
    linear-gradient(90deg, transparent calc(53.8% - 1px), #171717 calc(53.8% - 1px) calc(53.8% + 1px), transparent calc(53.8% + 1px)),
    linear-gradient(90deg, transparent calc(69.4% - 1px), #171717 calc(69.4% - 1px) calc(69.4% + 1px), transparent calc(69.4% + 1px)),
    linear-gradient(90deg, transparent calc(85% - 1px), #171717 calc(85% - 1px) calc(85% + 1px), transparent calc(85% + 1px)),
    repeating-linear-gradient(180deg, #171717 0 3px, transparent 3px calc(18.5%));
}
.animated-board::after {
  content: "";
  position: absolute;
  left: 6.3%;
  right: 14.2%;
  top: -1px;
  height: 7px;
  background: #171717;
  border-radius: 2px;
}
.shift-dot-dot {
  --sx1: 1;
  --sf1: 1;
  --sx2: 1;
  --sf2: 1;
  position: absolute;
  left: calc(var(--x0) + var(--gap-x) * var(--sx1));
  top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  box-shadow: 0 0 0 3px #fffaf0, 0 8px 14px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  animation: shift-dot-cycle 4s ease-in-out infinite;
}
.shift-dot-dot b {
  font-size: 0.86rem;
  line-height: 1;
}
.shift-dot-dot.finger-1 {
  background: #b98225;
  animation-name: shift-dot-cycle-fade;
}
.shift-dot-dot.finger-2 {
  background: #d14435;
}
.shift-dot-dot.finger-3 {
  background: #171717;
}
.shift-c-am .shift-dot-dot.finger-1,
.shift-c-am .shift-dot-dot.finger-2 {
  background: #286c56;
}
.shift-c-am .shift-dot-dot.finger-3 {
  background: #d14435;
}
.shift-em-am .finger-2 { --sx1: 1; --sf1: 2; --sx2: 2; --sf2: 2; }
.shift-em-am .finger-3 { --sx1: 2; --sf1: 2; --sx2: 3; --sf2: 2; }
.shift-em-am .finger-1 { --sx1: 4; --sf1: 1; --sx2: 4; --sf2: 1; }
.shift-c-am .finger-1 { --sx1: 4; --sf1: 1; --sx2: 4; --sf2: 1; animation-name: shift-dot-cycle; }
.shift-c-am .finger-2 { --sx1: 2; --sf1: 2; --sx2: 2; --sf2: 2; }
.shift-c-am .finger-3 { --sx1: 1; --sf1: 3; --sx2: 3; --sf2: 2; }
@keyframes shift-dot-cycle {
  0%, 26% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
  45%, 76% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
  }
  100% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
  }
}
@keyframes shift-dot-cycle-fade {
  0%, 26% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  45%, 76% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    left: calc(var(--x0) + var(--gap-x) * var(--sx1));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf1) - 0.5));
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shift-dot-dot {
    animation: none;
    left: calc(var(--x0) + var(--gap-x) * var(--sx2));
    top: calc(var(--y0) + var(--gap-y) * (var(--sf2) - 0.5));
  }
  .shift-em-am .finger-1 {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .animated-chord-label span:first-child {
    opacity: 0;
  }
  .animated-chord-label span:last-child {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 680px) {
  .finger-shift-map {
    grid-template-columns: 1fr;
  }
  .finger-shift-copy {
    display: block;
  }
  .finger-shift-copy span {
    display: block;
    margin-top: 4px;
  }
  .animated-chord-chart {
    width: min(100%, 340px);
    padding-inline: 16px;
  }
  .shift-dot-dot {
    width: 30px;
    height: 30px;
  }
}

/* Chord-song widget: diagram row + bar-by-bar progression + strum playback. */
.gps-chord-song { position: relative; margin: 24px 0; }
.chord-song-diagrams { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 18px; }
.chord-song-diagrams .chord-fig .chord-svg { width: 132px; }
.gps-chord-song .chord-song-controls { position: static; inset: auto; display: flex; align-items: center; gap: 14px; justify-content: flex-start; margin: 6px 0 18px; }
.chord-song-section { margin: 14px 0; }
.chord-song-section-label { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.chord-song-bars { display: flex; flex-wrap: wrap; gap: 8px; }
.chord-song-bar {
  flex: 0 0 128px; min-width: 104px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 10px 12px 9px; display: grid; grid-template-rows: auto 1fr; gap: 8px;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.chord-song-chords {
  display: grid;
  align-items: center;
  min-height: 1.35em;
  column-gap: 4px;
}
.chord-song-bar .chord-song-chord {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(0.88rem, 2vw, 1.05rem);
  line-height: 1.1;
}
.chord-song-bar .chord-song-slashes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}
.chord-song-bar.is-playing { background: #fbeae6; border-color: var(--red); }
.chord-song-notation {
  display: grid;
  gap: 18px;
}
.chord-song-notation-section {
  margin: 0;
}
.chord-notation-row {
  position: relative;
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow-x: auto;
}
.chord-notation-svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.notation-section-name {
  fill: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 900;
}
.notation-chord-name {
  fill: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 700;
  text-anchor: middle;
}
.notation-staff-line,
.notation-barline {
  stroke: #34312d;
  stroke-width: 1.1;
}
.notation-final-bar {
  stroke: #171514;
  stroke-width: 1.2;
}
.notation-final-bar.thick {
  stroke-width: 3.3;
}
.notation-clef {
  fill: #050505;
  font-family: "Bravura", "Noto Music", "Times New Roman", serif;
  font-size: 62px;
}
.notation-time {
  fill: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 900;
  text-anchor: middle;
}
.notation-slash {
  stroke: #050505;
  stroke-width: 4.5;
  stroke-linecap: square;
}
.chord-notation-hit {
  position: absolute;
  z-index: 1;
  border-radius: 4px;
  pointer-events: none;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.chord-notation-hit.is-playing {
  background: rgba(209, 68, 53, 0.12);
  box-shadow: inset 0 0 0 2px rgba(209, 68, 53, 0.42);
}

/* Chord diagrams pinned above each chord in a tab (Open Chords lesson). */
.gps-chord-diagrams-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gps-chord-diagram {
  position: absolute; transform: translateX(-50%);
  width: 112px; text-align: center;
}
.gps-chord-diagram svg { width: 100%; height: auto; display: block; }
.gps-chord-diagram-name {
  font-weight: 800; font-size: 0.95rem;
  color: var(--ink, #1a1a1a); line-height: 1.1;
  /* Sit the name cleanly ABOVE the SVG with a small breathing gap. The old
     negative `margin-bottom: -14px` pulled the SVG up under the name and made
     the label overlap the open-string "O" markers (looked like the name was
     blocking the open strings on E7, G7, etc.). Now the name floats just
     above the diagram, matching the chord-vocab row higher up the page. */
  margin-bottom: 4px;
}

/* Beginning Rhythm: a book rhythm image + a Play button that taps it out. */
.gps-rhythm { margin: 18px 0 8px; }
.gps-rhythm img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #ded7cf); background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.gps-rhythm .gps-rhythm-controls { position: static; margin-top: 12px; }

/* Counting numbers (1 2 & 3) drawn below the rhythm beams on metered pieces. */
.gps-count-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gps-count {
  position: absolute; transform: translateX(-50%);
  font-size: 0.86rem; font-weight: 900; color: #111;
  white-space: nowrap;
}
.gps-count-tick {
  position: absolute;
  width: 2px;
  height: 22px;
  background: #111;
  transform: translateX(-50%);
}
.gps-count-beam {
  position: absolute;
  height: 9px;
  border-left: 3px solid #111;
  border-right: 3px solid #111;
  border-bottom: 4px solid #111;
  transform: translateX(0);
}
/* data-gps-wide exercises keep the normal column width but force their bars
   onto a single line (handled in gps-player.js via barsPerRow + stretchForce),
   so a short exercise spreads across the full column like the printed book. */
/* Click any lesson image to view it larger (lightbox). */
.lesson-reader img { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 14, 13, 0.88); padding: 24px; cursor: zoom-out;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: zoom-out;
}
/* Multi-line widgets reserve a top strip (via staff.style.marginTop in JS) so
   the top-right floating controls AND the row of chord diagrams above the
   first tab line both have room without overlapping. The default top-right
   controls layout is used for both wide and multi-line widgets. */
.gps-player.gps-multiline { padding-bottom: 8px; }

.gps-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 2.2in;
  max-width: 100%;
  min-height: 0.48in;
  display: grid;
  grid-template-columns: 28px auto 26px 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid #111318;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.18), transparent 22%),
    linear-gradient(145deg, #30353c 0%, #12151a 56%, #090b0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -8px 18px rgba(0,0,0,0.46), 0 8px 18px rgba(23,21,20,0.18);
}
.gps-tempo-control {
  display: inline-grid;
  grid-template-columns: 19px 56px 19px;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: rgba(255,248,224,0.92);
}
.gps-tempo-control label {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.gps-tempo-control span,
.gps-bpm-label {
  color: rgba(255,248,224,0.92);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gps-tempo-control input[type="number"] {
  width: 56px;
  height: 24px;
  border: 2px solid #070809;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,166,40,0.24), transparent 60%),
    linear-gradient(180deg, #fffaf0 0%, #f5dfad 100%);
  color: #24180c;
  font-weight: 900;
  font-size: 0.74rem;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(69,38,7,0.22);
}
.gps-tempo-control input[type="number"]::-webkit-outer-spin-button,
.gps-tempo-control input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.gps-tempo-control button,
.gps-repeat-btn,
.gps-metronome-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  border: 1px solid #060708;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #353a41, #111318);
  color: rgba(255,255,255,0.92);
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -5px 9px rgba(0,0,0,0.42), 0 3px 0 #060708;
}
.gps-tempo-control button {
  width: 21px;
  min-width: 21px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 0.86rem;
}
.gps-tempo-control button:hover,
.gps-repeat-btn:hover,
.gps-metronome-btn:hover {
  color: #fff;
  filter: brightness(1.08);
}
.gps-repeat-btn.active,
.gps-metronome-btn.active {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.2), transparent 26%),
    linear-gradient(180deg, #1f9e7e, #136b54);
  border-color: #0a3a2c;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #0a3a2c;
}
.gps-metronome-btn.silent {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(180deg, #d14435, #8f1f18);
  border-color: #260907;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -5px 9px rgba(0,0,0,0.28), 0 2px 0 #260907, 0 0 12px rgba(209,68,53,0.22);
}
.gps-metronome-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}
.gps-metro-case {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.gps-metro-arm,
.gps-metro-base {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gps-metro-weight {
  fill: currentColor;
}
.lesson-tip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 12px; padding: 16px 18px; color: rgba(243,239,233,0.82); line-height: 1.6; margin-top: 24px; }
.lesson-tip strong { color: var(--gold); }

/* Guitar GPS lessons read on warm "book paper" rather than the dark theme */
.paper-page { background: var(--paper); color: var(--ink); }
.paper-page .lesson-body p { color: var(--muted); }
.paper-page .lesson-body em, .paper-page .lesson-body strong { color: var(--ink); }
.paper-page .lesson-lock { border-color: var(--line); color: var(--red-dark); }
.paper-page .lesson-nav-link { border-color: var(--line); color: var(--ink); }
.paper-page .lesson-nav-link span { color: var(--red); }
.paper-page .lesson-tip { background: #fff; border-color: var(--line); color: var(--muted); }
.paper-page .lesson-tip strong { color: var(--red-dark); }
.paper-page .gps-player { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* Red Play button (matches the tools page) */
.gps-play-btn { width: 28px; min-width: 28px; height: 28px; min-height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); color: #fff; padding: 0; font-weight: 900; font-size: 0.74rem; box-shadow: 0 2px 0 var(--red-dark); transition: background 140ms ease, transform 120ms ease; white-space: nowrap; }
.gps-play-btn:hover { background: var(--red-dark); }
.gps-play-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--red-dark); }
@media (max-width: 780px) {
  .gps-controls {
    grid-template-columns: 28px auto 26px 26px;
  }
}
@media (max-width: 520px) {
  .gps-tempo-control { justify-content: center; }
}
.admin-empty { color: var(--muted); padding: 14px 0; }

.zoom-field { display: grid; gap: 8px; margin-top: 16px; }
.zoom-field > span { font-weight: 800; font-size: 0.86rem; color: var(--muted); }
.zoom-row { display: flex; gap: 8px; flex-wrap: wrap; }
.zoom-row input { flex: 1 1 240px; }
.admin-card input, .admin-card textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); width: 100%; }
.admin-card input:focus, .admin-card textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.button.is-disabled { opacity: 0.45; pointer-events: none; }

.lesson-editor-list { display: grid; gap: 14px; margin-top: 14px; }
.lesson-editor { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fbfaf7; display: grid; gap: 12px; }
.lesson-editor-head { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.lesson-title-input { font-weight: 800; }
.lesson-notes-label { display: grid; gap: 6px; }
.lesson-notes-label span { font-weight: 800; font-size: 0.82rem; color: var(--muted); }
.lesson-notes { resize: vertical; line-height: 1.5; }
.lesson-editor-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Guitar GPS admin editor */
.gps-editor-shell { min-height: 100vh; }
.gps-book-editor {
  padding-top: 4px;
}
.gps-editor-index-reader { max-width: 1100px; }
.gps-editor-index-reader .lesson-bar {
  align-items: center;
}
.gps-editor-index-reader [data-add-section] {
  align-self: flex-start;
  margin-top: 8px;
  white-space: nowrap;
}
.gps-editor-toc {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}
.gps-editor-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(16px, 2vw, 24px);
}
.gps-editor-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.gps-editor-section-head h2 {
  min-width: 160px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
}
.gps-editor-section-head h2:focus {
  outline: 2px solid var(--red);
  background: #fff8e0;
}
.gps-editor-section-head div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.gps-editor-section-head button,
.gps-wysiwyg-toolbar button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffaf0;
  color: var(--ink);
  min-height: 34px;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}
.gps-editor-section-head button:hover,
.gps-wysiwyg-toolbar button:hover {
  border-color: var(--red);
  color: var(--red-dark);
}
.gps-editor-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.gps-editor-lesson-list li { margin: 0; }
.gps-editor-lesson-list button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
  color: var(--ink);
  padding: 11px 13px;
  cursor: pointer;
}
.gps-editor-lesson-list button:hover {
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}
.gps-editor-lesson-list .gps-toc-num {
  grid-row: 1 / span 2;
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 999px;
}
.gps-editor-lesson-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gps-editor-lesson-list small {
  color: var(--muted);
  font-weight: 800;
}
.gps-editor-page-view { padding-bottom: 80px; }
.gps-wysiwyg-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 28px);
  border-bottom: 1px solid rgba(37,31,24,0.14);
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(145deg, #30353c 0%, #12151a 58%, #090b0e 100%);
  box-shadow: 0 12px 28px rgba(23,21,20,0.22);
}
.gps-wysiwyg-toolbar button {
  min-height: 32px;
  background: linear-gradient(180deg, #fffaf0, #eddca9);
}
.gps-wysiwyg-toolbar button.is-primary {
  background: linear-gradient(180deg, #d55749, #9f2f24);
  color: #fff;
  border-color: #6d1d16;
}
.gps-toolbar-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.22);
  margin: 0 4px;
}
.gps-wysiwyg-lesson {
  max-width: 920px;
  min-height: calc(100vh - 170px);
}
.gps-wysiwyg-lesson [contenteditable="true"] {
  border-radius: 8px;
  outline: 0;
}
.gps-wysiwyg-lesson [contenteditable="true"]:focus {
  box-shadow: 0 0 0 3px rgba(209,68,53,0.24);
  background: rgba(255,255,255,0.42);
}
.gps-wysiwyg-body {
  min-height: 48vh;
  border: 1px dashed rgba(37,31,24,0.18);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.28);
}
.gps-wysiwyg-body:empty::before {
  content: "Start typing the lesson here.";
  color: var(--muted);
}
.gps-wysiwyg-body .gps-player {
  user-select: text;
}
.gps-wysiwyg-body .chord-svg {
  display: grid;
  place-items: center;
  width: 160px;
  height: 190px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: #fffaf0;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
  padding: 12px;
}

.gps-editor-page { --editor-rail: minmax(250px, 310px); }
.gps-editor-head { align-items: flex-end; }
.gps-editor-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-grid {
  display: grid;
  grid-template-columns: var(--editor-rail) minmax(460px, 1.05fr) minmax(360px, 0.9fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.gps-editor-library,
.gps-editor-preview { position: sticky; top: 24px; }
.gps-editor-library { display: grid; gap: 14px; }
.gps-editor-library input,
.gps-editor-library select,
.gps-editor-workbench input,
.gps-editor-workbench select,
.gps-editor-workbench textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffaf4;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  width: 100%;
}
.gps-editor-library input:focus,
.gps-editor-library select:focus,
.gps-editor-workbench input:focus,
.gps-editor-workbench select:focus,
.gps-editor-workbench textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.gps-editor-list,
.gps-editor-list-group,
.gps-existing-loader,
.gps-editor-workbench,
.gps-editor-blocks { display: grid; gap: 12px; }
.gps-editor-list-group h3,
.gps-existing-loader h3 {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gps-draft-item {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
}
.gps-draft-item strong { font-size: 0.94rem; }
.gps-draft-item span { color: var(--muted); font-size: 0.78rem; font-weight: 800; line-height: 1.3; }
.gps-draft-item:hover,
.gps-draft-item.is-active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.gps-editor-status {
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.gps-editor-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gps-editor-meta label,
.gps-editor-block label {
  display: grid;
  gap: 6px;
}
.gps-editor-meta span,
.gps-editor-block label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gps-editor-wide { grid-column: 1 / -1; }
.gps-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf7;
  padding: 10px;
}
.gps-editor-toolbar button,
.gps-editor-block-head button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  min-height: 34px;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}
.gps-editor-toolbar button:hover,
.gps-editor-block-head button:hover { border-color: var(--red); color: var(--red-dark); }
.gps-editor-block {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfaf7;
  padding: 14px;
}
.gps-editor-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gps-editor-block-head strong { font-size: 1rem; }
.gps-editor-block-head div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-block-head button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
}
.gps-editor-block-head button:disabled { opacity: 0.42; cursor: default; }
.gps-editor-mini-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}
.gps-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.button.danger {
  border-color: rgba(209, 68, 53, 0.42);
  color: var(--red-dark);
  background: #fff;
}
.gps-editor-preview { max-height: calc(100vh - 48px); overflow: auto; }
.gps-editor-preview-page {
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 100%, rgba(244, 164, 73, 0.32), transparent 48%),
    linear-gradient(180deg, #fffaf0 0%, #f8edcf 100%);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: inset 0 0 40px rgba(83, 54, 20, 0.08);
}
.gps-editor-preview-page h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1;
  margin: 4px 0 10px;
}
.gps-editor-preview-summary {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}
.gps-editor-preview-page .lesson-body p {
  color: var(--ink);
  margin-bottom: 14px;
}
.gps-editor-preview-page .lesson-tip {
  background: rgba(255,255,255,0.68);
  border-color: rgba(37, 31, 24, 0.14);
  color: var(--muted);
}
.gps-editor-preview-page .lesson-tip strong { color: var(--red-dark); }
.gps-editor-preview-figure {
  margin: 18px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.gps-editor-preview-figure img { display: block; width: 100%; height: auto; }
.gps-editor-preview-figure figcaption,
.gps-editor-video figcaption {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 8px 10px 10px;
}
.gps-editor-video {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.gps-editor-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.gps-editor-video-empty,
.gps-editor-tab-preview {
  border: 1px dashed rgba(37, 31, 24, 0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.56);
  padding: 14px;
  color: var(--muted);
  font-weight: 800;
}
.gps-editor-tab-preview {
  display: grid;
  gap: 8px;
  color: var(--ink);
}
.gps-editor-tab-preview pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: #171514;
  color: #fff8e0;
  padding: 12px;
  font-size: 0.86rem;
}
.gps-editor-tab-preview span { color: var(--muted); font-weight: 900; }
.gps-editor-html-preview {
  border: 1px solid rgba(37, 31, 24, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.42);
}

@media (max-width: 1320px) {
  .gps-editor-grid { grid-template-columns: var(--editor-rail) minmax(0, 1fr); }
  .gps-editor-preview {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}
@media (max-width: 860px) {
  .gps-editor-grid,
  .gps-editor-meta { grid-template-columns: 1fr; }
  .gps-editor-library { position: static; }
  .gps-editor-head { align-items: flex-start; }
  .gps-editor-head-actions { justify-content: flex-start; }
}

.media-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.media-thumb { width: 104px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; display: grid; }
.media-thumb img, .media-thumb video { width: 104px; height: 78px; object-fit: cover; display: block; }
.media-name { font-size: 0.7rem; padding: 4px 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-video { position: relative; }
.media-video::after { content: '\25B6'; position: absolute; top: 26px; left: 0; right: 0; text-align: center; color: white; font-size: 1.2rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); pointer-events: none; }
.upload-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px dashed var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; }
.upload-btn:hover { border-color: var(--ink); }

.pay-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.92rem; }
.pay-table th, .pay-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.pay-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* Add-student modal */
.admin-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10,9,8,0.6); backdrop-filter: blur(3px); }
.admin-modal.is-hidden { display: none; }
.admin-modal-card { width: min(440px, 100%); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 22px; box-shadow: var(--shadow); }
.admin-modal-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.admin-form { display: grid; gap: 14px; margin-top: 8px; }
.admin-form label { display: grid; gap: 6px; }
.admin-form label span { font-weight: 800; font-size: 0.84rem; color: var(--muted); }
.admin-form input { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* toast */
.admin-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1b1916; color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 70; box-shadow: var(--shadow); }
.admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-roster { position: static; }
  .lesson-editor-head { grid-template-columns: 1fr; }
}

/* Student portal — Zoom link + lesson media gallery */
/* Make the left summary column a light card like the other two panels */
.student-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px; align-content: start; }
.portal-credits { margin: 0; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.portal-zoom { width: 100%; }
.portal-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.portal-media-thumb { width: 96px; height: 70px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); display: block; }
.portal-media-thumb img, .portal-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-media-video { position: relative; }
.portal-media-video::after { content: '\25B6'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

/* ============================================================
   Packages / pricing page
   ============================================================ */
.packages-page .page-hero .admin-demo-tag { margin-top: 6px; }
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.price-card.popular { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.price-flag { position: absolute; top: -12px; left: 24px; background: var(--red); color: #fff; font-size: 0.74rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.price-card h2 { font-size: 1.25rem; }
.price-amount { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.price-amount span { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.price-sub { margin: -4px 0 0; color: var(--red); font-weight: 800; font-size: 0.9rem; }
.price-features { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 0.94rem; }
.price-features li { padding-left: 22px; position: relative; }
.price-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--teal); font-weight: 900; }
.price-buy { margin-top: auto; }
.packages-note { color: rgba(243,239,233,0.74); margin-top: clamp(20px, 3vw, 32px); }

/* ============================================================
   Booking page
   ============================================================ */
.book-head, .admin-head { /* shared head spacing handled by .admin-head */ }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.book-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1; }
.book-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
.book-side { display: grid; gap: clamp(14px, 2vw, 20px); }
.day-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.day-chip { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; color: var(--ink); padding: 10px 14px; cursor: pointer; }
.day-chip:hover { border-color: var(--ink); }
.day-chip.active { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.day-chip-label { font-weight: 800; }
.day-chip-meta { font-size: 0.76rem; color: var(--muted); font-weight: 700; }
.slot-heading { font-size: 1rem; color: var(--muted); margin-top: 6px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.slot-btn { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); padding: 10px 18px; font-weight: 800; cursor: pointer; }
.slot-btn:hover { border-color: var(--ink); }
.slot-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.slot-btn.taken { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.book-confirm [data-confirm-text] .warn { color: var(--red); font-weight: 800; }
.book-confirm .button { width: 100%; margin-top: 12px; }
.upcoming-list, .sched-upcoming { display: grid; gap: 10px; margin-top: 12px; }
.upcoming-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; padding: 12px 14px; }
.upcoming-item strong { display: block; }
.upcoming-item .muted-line { margin: 2px 0 0; font-size: 0.84rem; }
.upcoming-cancel { min-height: 34px; padding: 0 12px; font-size: 0.84rem; }

/* ============================================================
   Admin schedule / availability
   ============================================================ */
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
.avail-grid { display: grid; gap: 10px; margin-top: 14px; }
.avail-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.avail-day { font-weight: 900; color: var(--ink); }
.avail-hours { display: flex; flex-wrap: wrap; gap: 6px; }
.avail-chip { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); padding: 7px 10px; font-weight: 800; font-size: 0.82rem; cursor: pointer; min-width: 40px; }
.avail-chip:hover { border-color: var(--ink); }
.avail-chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- Admin lesson calendar + scheduling ---- */
.admin-card select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); width: 100%; font: inherit; }
.admin-card select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.button.tiny { padding: 6px 11px; font-size: 0.8rem; border-radius: 8px; }
.sched-side { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }
.sched-cal-head { align-items: center; flex-wrap: wrap; }
.sched-cal-add-btn { margin-right: auto; }
.sched-cal-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sched-cal-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sched-cal-modes button { border: none; background: #fff; color: var(--ink); padding: 7px 14px; font-weight: 800; font-size: 0.85rem; cursor: pointer; border-left: 1px solid var(--line); }
.sched-cal-modes button:first-child { border-left: none; }
.sched-cal-modes button:hover { color: var(--red, #b63f2f); }
.sched-cal-modes button.is-active { background: var(--red, #b63f2f); color: #fff; }
.sched-cal-dow.is-hidden { display: none; }
.sched-cal-nav { display: inline-flex; align-items: center; gap: 12px; }
.sched-cal-nav button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.sched-cal-nav button:hover { border-color: var(--red); color: var(--red); }
.sched-cal-nav strong { min-width: 150px; text-align: center; }
.sched-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 6px; }
.sched-cal-dow span { text-align: center; font-size: 0.66rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.sched-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.schedcell { position: relative; min-height: 78px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 6px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.schedcell.is-blocked { background: rgba(182,64,48,0.07); }
/* Closed / fully-blocked day: a large red diagonal slash across the cell. */
.schedcell-closed { position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), rgba(182,64,48,0.6) calc(50% - 1.5px), rgba(182,64,48,0.6) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.schedcell-blocked-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.schedcell-empty { border: none; background: none; cursor: default; }
.schedcell:not(.schedcell-empty):hover { border-color: var(--red); }
.schedcell.is-today { border-color: var(--ink); }
.schedcell.is-selected { box-shadow: 0 0 0 2px var(--red); border-color: var(--red); }
.schedcell-num { font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.schedcell.has-lessons .schedcell-num { color: var(--ink); }
.sched-chip { font-size: 0.66rem; font-weight: 700; line-height: 1.25; background: rgba(182,63,47,.12); color: var(--red-dark, #8f2f22); border-radius: 5px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Week view: a single row of 7 taller day cells */
.sched-cal.is-week .schedcell-tall { min-height: 150px; }
/* Day view: hour-by-hour agenda */
.sched-cal.is-day { display: block; }
.day-agenda { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.day-slot { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 46px; }
.day-slot:last-child { border-bottom: none; }
.day-slot.has-lesson { background: rgba(182,63,47,.06); }
.day-slot-hr { flex: 0 0 70px; font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.day-slot-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day-slot-free { color: var(--muted); font-size: 0.82rem; }
.sched-more { font-size: 0.62rem; font-weight: 800; color: var(--muted); }
.sched-day-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.sched-lesson { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.sched-lesson-main { display: flex; flex-direction: column; }
.sched-lesson-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sched-add-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.sched-add-form h3 { margin: 0 0 8px; }
.sched-slot-hint { font-size: 0.8rem; color: var(--muted); margin: 2px 0 4px; }

/* ---- Admin home / Today ---- */
.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 18px); margin-bottom: clamp(16px, 2.4vw, 22px); }
.home-stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.home-stat-num { font-size: 2rem; font-weight: 900; line-height: 1; color: var(--red); }
.home-stat-label { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 20px); align-items: start; }
@media (max-width: 860px) { .home-stats { grid-template-columns: 1fr; } .home-layout { grid-template-columns: 1fr; } }

/* ---- Settings page ---- */
.settings-layout { display: grid; gap: 10px; max-width: 560px; }
.settings-layout .admin-card { padding: 12px 14px; }
.settings-layout .admin-card h2 { font-size: 1.02rem; margin: 0 0 2px; }
.settings-layout .admin-card h3 { font-size: 0.9rem; margin: 10px 0 3px; }
.settings-layout .muted-line { font-size: 0.84rem; margin: 2px 0 6px; }
.settings-layout .admin-form { gap: 8px; }
.settings-layout .admin-form label { gap: 3px; font-size: 0.9rem; }
.settings-layout .admin-form input, .settings-layout .admin-form select { max-width: 320px; padding: 7px 9px; }
.settings-layout .admin-form-actions { margin-top: 2px; }
.settings-layout .settings-steps { margin: 4px 0; padding-left: 16px; font-size: 0.84rem; }
.settings-layout .settings-steps li { margin: 1px 0; }
.settings-layout .lesson-bar { margin: 6px 0 !important; }
.settings-layout .gps-mcp-token { font-size: 0.78rem; word-break: break-all; }
/* Last field row shares a line with its Save button (button hugs bottom-right). */
.settings-row { display: flex; align-items: flex-end; gap: 10px; }
.settings-row .settings-grow { flex: 1 1 auto; min-width: 0; }
.settings-row > .button { flex: 0 0 auto; }
.settings-msg { font-weight: 700; font-size: 0.9rem; margin: 4px 0 0; }
.settings-msg:empty { display: none; }
.settings-msg.is-ok { color: #2f9e44; }
.settings-msg.is-error { color: var(--red, #b63f2f); }
.settings-steps { margin: 6px 0 16px; padding-left: 20px; color: var(--ink); line-height: 1.7; }
.settings-steps code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; }

/* ---- GPS editor: draft badge in the table of contents ---- */
.gps-toc-draft { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--red, #b63f2f); color: #fff; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.04em; vertical-align: middle; }
.lesson-lock.is-draft { background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }

/* ---- GPS WYSIWYG editor: compact admin widget polish ---- */
.gps-book-editor { padding: 4px clamp(8px, 2vw, 20px) 48px; }
.gps-editor-index-reader {
  max-width: 1180px;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(145deg, #30353c 0%, #15181d 58%, #090b0e 100%);
  color: #f8f3e8;
  box-shadow: 0 24px 55px rgba(23,21,20,0.22);
}
.gps-editor-index-reader .lesson-bar {
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gps-editor-index-reader h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); }
.gps-editor-index-reader .gps-toc-intro { max-width: 680px; color: rgba(248,243,232,0.76); }
.gps-editor-index-reader [data-add-section] {
  min-height: 42px;
  border-radius: 999px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.45);
}
.gps-editor-toc { gap: 12px; margin-top: 16px; }
.gps-editor-section {
  padding: 12px;
  border-color: rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.gps-editor-section-head {
  align-items: center;
  margin-bottom: 10px;
  padding: 2px;
}
.gps-editor-section-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}
.gps-editor-section-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff7db, #e9cc77);
  color: #1d1712;
  font-weight: 950;
  flex: none;
}
.gps-editor-section-head h2 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.02rem, 2vw, 1.35rem);
  color: #fff;
}
.gps-editor-section-count {
  color: rgba(248,243,232,0.56);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.gps-editor-section-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gps-editor-section-head button,
.gps-editor-delete-lesson {
  min-height: 30px;
  padding: 0 11px;
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(180deg, #2d333a, #0d1014);
  color: #f8f3e8;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
}
.gps-editor-section-head button:hover,
.gps-editor-delete-lesson:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-1px);
}
.gps-editor-section-head button.is-danger,
.gps-editor-delete-lesson {
  background: linear-gradient(180deg, #b94a3a, #81251d);
  border-color: #641a14;
}
.gps-editor-lesson-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 7px;
}
.gps-editor-lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}
.gps-editor-lesson-list button[data-open-lesson] {
  min-height: 48px;
  border-color: rgba(255,255,255,0.13);
  border-radius: 10px;
  background: rgba(255,250,240,0.94);
  padding: 8px 10px;
}
.gps-editor-delete-lesson {
  align-self: stretch;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}
.gps-wysiwyg-toolbar {
  justify-content: flex-start;
  gap: 6px;
  padding: 8px clamp(10px, 2vw, 20px);
}
.gps-wysiwyg-toolbar button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.82rem;
}
.gps-wysiwyg-lesson {
  max-width: 1080px;
  margin-top: 18px;
  min-height: calc(100vh - 150px);
}
.gps-wysiwyg-body {
  min-height: 56vh;
  background: rgba(255,255,255,0.48);
}
.gps-wysiwyg-body .gps-player { margin: 16px 0; }

/* ---- GPS editor: refined index (searchable TOC), top controls, toolbar ---- */
.gps-editor-index-head { margin-bottom: 4px; }
.gps-editor-index-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 2px 0; }
.gps-editor-index-head .gps-toc-intro { max-width: 680px; color: rgba(248,243,232,0.76); }

.gps-editor-controls {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
}
.gps-control-group { display: grid; gap: 7px; align-content: start; }
.gps-control-lesson { flex: 1 1 380px; }
.gps-control-section { flex: 1 1 240px; }
.gps-control-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(248,243,232,0.6); }
.gps-control-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gps-control-row input, .gps-control-row select {
  min-height: 40px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: rgba(255,250,240,0.96); color: #1d1712;
  font: inherit; font-weight: 700;
}
.gps-control-row input[type="text"] { flex: 1 1 150px; min-width: 120px; }
.gps-control-row select { flex: 0 1 210px; max-width: 100%; }
.gps-control-row input:focus, .gps-control-row select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.gps-control-btn {
  min-height: 40px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: linear-gradient(180deg, #2d333a, #0d1014); color: #f8f3e8;
  font-weight: 900; cursor: pointer; white-space: nowrap;
}
.gps-control-btn:hover { border-color: rgba(255,255,255,0.34); }
.gps-control-btn.is-primary { background: linear-gradient(180deg, #d55749, #9f2f24); border-color: #6d1d16; color: #fff; }
.gps-control-btn.is-primary:hover { filter: brightness(1.06); }

/* GWJ-88: Sort + filter row, modeled on the Guitar GPS TOC controls. The
   search input takes the remaining width and the two dropdowns sit at its
   right. On narrow screens everything wraps to its own line. */
.gps-editor-search-row {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.gps-editor-search {
  flex: 1 1 280px; min-width: 0;
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07); color: #f8f3e8;
  font: inherit; font-weight: 600;
}
.gps-editor-control { display: inline-flex; align-items: center; gap: 8px; }
/* Drafts-only checkbox sits in the same flex row as the sort/filter selects.
   Sized to match the 44px control height so the row stays tidy. */
.gps-editor-checkbox {
  cursor: pointer; user-select: none;
  padding: 0 12px; min-height: 44px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07); color: #f8f3e8;
  font: inherit; font-weight: 700; font-size: 0.9rem;
}
.gps-editor-checkbox input { accent-color: var(--red, #b63f2f); width: 16px; height: 16px; }
.gps-editor-control-label {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(248,243,232,0.7);
}
.gps-editor-select {
  min-height: 44px; padding: 0 32px 0 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(255,255,255,0.07) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23f8f3e8' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 12px center;
  background-size: 10px 6px;
  color: #f8f3e8; font: inherit; font-weight: 700; -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.gps-editor-select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* Flat-list view: each row shows a "section tag" pill before the title */
.gps-editor-toc-flat .gps-editor-toc-section-tag {
  display: inline-block; padding: 2px 8px; margin-right: 8px;
  border-radius: 999px; background: rgba(255,255,255,0.10);
  color: rgba(248,243,232,0.85); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gps-editor-search::placeholder { color: rgba(248,243,232,0.5); }
.gps-editor-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.gps-editor-toc-empty { color: rgba(248,243,232,0.6); font-weight: 700; padding: 10px 2px; }

/* Section header: number + inline-editable title + count, with hover-only delete */
.gpsx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gpsx-sec-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gpsx-sec-num {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(180deg, #fff7db, #e9cc77);
  color: #1d1712; font-weight: 950;
}
.gpsx-sec-h {
  margin: 0; min-width: 0; padding: 3px 8px; border-radius: 8px;
  font-size: clamp(1.05rem, 2vw, 1.4rem); color: #fff;
}
.gpsx-sec-h:hover { background: rgba(255,255,255,0.06); }
.gpsx-sec-h:focus { outline: 2px solid var(--red); background: rgba(255,248,224,0.14); }
.gpsx-sec-count { color: rgba(248,243,232,0.56); font-size: 0.78rem; font-weight: 900; white-space: nowrap; }
.gps-editor-section-del {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: rgba(248,243,232,0.5);
  cursor: pointer; opacity: 0; box-shadow: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gps-editor-section:hover .gps-editor-section-del,
.gps-editor-section-del:focus-visible { opacity: 1; }
.gps-editor-section-del:hover { background: rgba(182,63,47,0.26); color: #ffd9d2; }
.gps-editor-section-del svg { width: 18px; height: 18px; }

/* Searchable TOC list: full titles, no truncation, no per-row buttons */
.gps-editor-toc-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
/* GWJ-88 sort fix: when sorted by Name or Recent, the synthetic flat list
   shouldn't squeeze each row into a 230px cell — the section-tag pill +
   title need a full row to read cleanly. Single column it is. */
.gps-editor-toc-flat { grid-template-columns: 1fr; gap: 4px; }
.gps-editor-toc-flat .gps-editor-toc-link { padding: 8px 12px; gap: 10px; }
.gps-editor-toc-flat .gps-editor-toc-title { white-space: normal; overflow-wrap: normal; }
.gps-editor-toc-list li { margin: 0; }
.gps-editor-toc-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  text-align: left; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; background: rgba(255,250,240,0.96); color: #1d1712;
  padding: 6px 11px; cursor: pointer; font: inherit;
}
.gps-editor-toc-link:hover { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.gps-editor-toc-link .gps-toc-num {
  flex: none; min-width: 38px; height: 21px; padding: 0 7px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #efe7d6; color: #4a4034; font-weight: 900; font-size: 0.74rem;
}
.gps-editor-toc-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.gps-editor-toc-link .gps-toc-draft { flex: none; }

/* Polished lesson-editor toolbar widget (overrides the older dark bar) */
.gps-wysiwyg-toolbar {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1080px; margin: 0 auto 16px;
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,253,248,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(23,21,20,0.16);
}
.gps-wysiwyg-toolbar .gps-tb-group { display: flex; align-items: center; gap: 4px; }
.gps-wysiwyg-toolbar .gps-tb-group + .gps-tb-group { margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--line); }
.gps-wysiwyg-toolbar .gps-tb-spacer { flex: 1 1 auto; }
.gps-wysiwyg-toolbar .gps-tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink);
  font-weight: 800; font-size: 0.88rem; line-height: 1; cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gps-wysiwyg-toolbar .gps-tb-btn svg { width: 17px; height: 17px; }
.gps-wysiwyg-toolbar .gps-tb-btn:hover { background: #f1ebe0; color: var(--ink); transform: none; }
.gps-wysiwyg-toolbar .gps-tb-actions .gps-tb-btn { border-color: var(--line); background: #fffaf0; }
.gps-wysiwyg-toolbar .gps-tb-actions .gps-tb-btn:hover { border-color: var(--red); color: var(--red-dark); background: #fff; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-primary { background: var(--red); color: #fff; border-color: #6d1d16; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-primary:hover { background: var(--red-dark); color: #fff; }
.gps-wysiwyg-toolbar .gps-tb-btn.is-danger { color: var(--red); background: #fff; border-color: rgba(182,63,47,0.4); }
.gps-wysiwyg-toolbar .gps-tb-btn.is-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* GPS editor index: original white / paper look (matches the book) */
.gps-editor-index-reader {
  background: var(--panel, #fff);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
}
.gps-editor-index-head h1 { color: var(--ink); }
.gps-editor-index-head .gps-toc-intro { color: var(--muted); }
.gps-editor-controls { background: #fbfaf7; border-color: var(--line); }
.gps-control-label { color: var(--muted); }
.gps-control-row input, .gps-control-row select { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-control-btn { background: #fffaf0; color: var(--ink); border-color: var(--line); }
.gps-control-btn:hover { border-color: var(--red); color: var(--red-dark); }
.gps-control-btn.is-primary { background: var(--red); color: #fff; border-color: #6d1d16; }
.gps-control-btn.is-primary:hover { background: var(--red-dark); color: #fff; }
.gps-editor-search { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-editor-search::placeholder { color: var(--muted); }
/* GWJ-88: light-theme overrides for the sort/filter selects when the editor
   chrome is on a paper background. */
.gps-editor-control-label { color: var(--muted); }
.gps-editor-select {
  background-color: #fff; color: var(--ink); border-color: var(--line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231d1712' d='M0 0l5 6 5-6z'/></svg>");
}
.gps-editor-toc-flat .gps-editor-toc-section-tag {
  background: rgba(0,0,0,0.06); color: var(--muted);
}
/* Light-theme override for the drafts-only checkbox (matches the search input). */
.gps-editor-checkbox { background: #fff; color: var(--ink); border-color: var(--line); }
.gps-editor-toc-empty { color: var(--muted); }
.gps-editor-section {
  background: var(--panel, #fff);
  border-color: var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
.gpsx-sec-h { color: var(--ink); }
.gpsx-sec-h:hover { background: rgba(23, 21, 20, 0.05); }
.gpsx-sec-count { color: var(--muted); }
.gps-editor-section-del { color: var(--muted); }
.gps-editor-section-del:hover { background: #fbe9e6; color: var(--red-dark); }
.gps-editor-toc-link { background: #fbfaf7; color: var(--ink); border-color: var(--line); }
.gps-editor-toc-list { gap: 5px; }
/* Delete lesson sits bottom-right of the editor, not in the toolbar. */
.gps-editor-delete-row { display: flex; justify-content: flex-end; max-width: 1080px; margin: 28px auto 0; }

/* ---- GPS editor: sub-tab strip (Lessons / Authoring guide) ---- */
.gps-editor-tabs { margin: 8px 0 16px; }
.gps-editor-tab-panel { display: none; }
.gps-editor-tab-panel.is-active { display: block; }
.gps-editor-tab-panel[hidden] { display: none; }

/* ---- Authoring guide ---- */
.gps-authoring-guide { display: none; }
.gps-authoring-guide.is-active { display: flex; flex-direction: column; gap: 18px; }
.gps-guide-intro h2 { color: var(--ink); margin: 0 0 8px; }
.gps-guide-intro p { color: var(--muted); line-height: 1.6; margin: 0 0 8px; max-width: 72ch; }
.gps-guide-tip { background: #fff9e6; border: 1px solid #f0d97b; border-radius: 10px; padding: 12px 14px; color: var(--ink) !important; }
.gps-guide-tip code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }

.gps-guide-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.gps-guide-card-head h3 {
  color: var(--ink);
  font-size: 1.15rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gps-guide-card-head p { color: var(--muted); margin: 0 0 14px; line-height: 1.55; max-width: 72ch; }
.gps-guide-card-head p code,
.gps-guide-ask code,
.gps-guide-bullets code,
.gps-guide-note code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }
.gps-guide-pill {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--red-dark); background: #fbe9e6; border: 1px solid #f0c7c1;
  padding: 3px 8px; border-radius: 999px;
}
.gps-guide-demo {
  background: #fbfaf7;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 14px;
  overflow-x: auto;
}
.gps-guide-demo .chord-figs-row { justify-content: flex-start; }
.gps-guide-demo .gps-player { margin: 0; }
.gps-guide-ask {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 14px;
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.55;
}
.gps-guide-ask strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red-dark); margin-bottom: 6px; }
.gps-guide-ask ul { margin: 0; padding-left: 18px; }
.gps-guide-ask li { margin: 4px 0; }
.gps-guide-ask em { color: var(--ink); font-style: normal; font-weight: 700; }

.gps-guide-code { margin-top: 6px; }
.gps-guide-code summary {
  cursor: pointer; font-weight: 800; color: var(--muted);
  padding: 6px 8px; border-radius: 6px;
  list-style: none;
}
.gps-guide-code summary::-webkit-details-marker { display: none; }
.gps-guide-code summary::before {
  content: '\25B8'; display: inline-block; margin-right: 6px;
  transition: transform 120ms ease;
}
.gps-guide-code[open] > summary::before { transform: rotate(90deg); }
.gps-guide-code summary:hover { color: var(--ink); background: #fbfaf7; }
.gps-guide-code pre {
  background: #1b1916; color: #f5efe2;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.gps-guide-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.gps-guide-note { color: var(--muted); font-size: 0.92rem; margin: 8px 0 0; line-height: 1.55; }

.gps-guide-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.gps-guide-table th,
.gps-guide-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.gps-guide-table th { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gps-guide-table tbody tr:last-child td { border-bottom: 0; }

.gps-guide-bullets { margin: 0; padding-left: 18px; color: var(--ink); line-height: 1.6; }
.gps-guide-bullets li { margin: 6px 0; }

/* ---- GPS editor: MCP / AI access panel ---- */
.gps-mcp-access { margin-top: clamp(18px, 3vw, 30px); }
.gps-mcp-access code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }
.gps-mcp-new { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #fff; }
.gps-mcp-new.is-hidden { display: none; }
.gps-mcp-token { display: block; word-break: break-all; background: #1b1916; color: #f5efe2; padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 0.9rem; }
.gps-mcp-tokens { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.gps-mcp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.gps-mcp-row strong { display: block; }

/* ---- Admin students CRM ---- */
.students-bar { margin-bottom: clamp(14px, 2vw, 20px); }
.students-bar-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.students-bar-row .roster-search { flex: 1; margin: 0; }
.students-bar-row .button { flex: 0 0 auto; }
.students-bar .roster-list { display: flex; gap: 10px; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.students-bar .roster-item { flex: 0 0 auto; min-width: 210px; }
.admin-detail { max-width: 960px; }
.roster-search { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff; color: var(--ink); font: inherit; margin-bottom: 4px; }
.roster-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.roster-empty { color: var(--muted); font-size: 0.9rem; padding: 6px 2px; }
.prof-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.prof-head h2 { font-size: 1.6rem; }
.prof-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.prof-grid-actions { grid-column: 1 / -1; justify-content: flex-start; }
.prof-adminnote { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; resize: vertical; }
.prof-adminnote:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* GWJ-50: show ~4 upcoming lessons, scroll for the rest (teacher student page). */
.prof-sched { display: flex; flex-direction: column; gap: 8px; max-height: 264px; overflow-y: auto; padding-right: 2px; }
.prof-sched-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.prof-sched-row strong { display: block; }
.prof-sched-series { border-left: 3px solid var(--red, #b63f2f); background: #faf8f4; }
.prof-series { display: flex; flex-direction: column; gap: 8px; }
.prof-danger { border-color: rgba(182,63,47,.35); }
.button.danger { background: #fff; color: var(--red, #b63f2f); border-color: rgba(182,63,47,.5); }
.button.danger:hover { background: var(--red, #b63f2f); color: #fff; border-color: var(--red, #b63f2f); }
@media (max-width: 560px) { .prof-grid { grid-template-columns: 1fr; } }

/* ---- Admin payments ---- */
.pay-layout { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(14px, 2vw, 20px); align-items: start; margin-bottom: clamp(14px, 2vw, 20px); }
.pay-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-student-picker { position: relative; }
.pay-student-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 12;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23,21,20,0.18);
}
.pay-student-results.is-open { display: grid; }
.pay-student-results button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.pay-student-results button:last-child { border-bottom: 0; }
.pay-student-results button:hover,
.pay-student-results button:focus-visible { background: rgba(182,63,47,0.08); outline: none; }
.pay-student-results strong { font-size: 0.92rem; }
.pay-student-results span { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.pay-student-results .muted-line { padding: 10px 12px; }
.pay-table { display: flex; flex-direction: column; }
.pay-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: none; }
.pay-row-main { display: flex; flex-direction: column; }
.pay-row-side { display: flex; flex-direction: column; align-items: flex-end; }
.pay-amount { font-weight: 900; }
.pay-record-inline { display: flex; gap: 8px; align-items: center; }
.pay-record-inline select { width: auto; max-width: 230px; }
@media (max-width: 860px) { .pay-layout { grid-template-columns: 1fr; } }

/* ---- Student portal: lessons & scheduling ---- */
.next-lesson { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(182,63,47,.10), rgba(182,63,47,.03)); border: 1px solid rgba(182,63,47,.25); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.next-lesson-main { display: flex; flex-direction: column; gap: 2px; }
.next-lesson-eyebrow { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red-dark, #8f2f22); }
.next-lesson-main strong { font-size: 1.15rem; }
.next-lesson-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.next-lesson-empty { display: flex; flex-direction: column; gap: 2px; }
.sl-layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.sl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sl-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper, #fbfaf7); color: var(--ink); font-weight: 700; font-size: 0.8rem; }
.sl-cell.cal-empty { border: none; background: none; }
.sl-cell.is-today { border-color: var(--ink); font-weight: 900; }
.sl-cell.has-lesson { background: var(--red); border-color: var(--red); color: #fff; }
.sl-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.sl-list-title { margin: 0; font-size: 1.05rem; }
.sl-pager { display: flex; align-items: center; gap: 6px; }
.sl-pager.is-hidden { display: none; }
.sl-pg { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; font-size: 0.95rem; line-height: 1; display: grid; place-items: center; }
.sl-pg:hover:not(:disabled) { border-color: var(--red, #b63f2f); color: var(--red, #b63f2f); }
.sl-pg:disabled { opacity: 0.4; cursor: default; }
.sl-pg-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.sl-head-right { display: flex; align-items: center; gap: 10px; }

/* Past lessons page controls (search + filter) */
.past-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.past-controls .past-search { flex: 1 1 220px; min-width: 0; margin: 0; }
.past-filter { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; }
.past-filter:focus { outline: 2px solid var(--red, #b63f2f); outline-offset: 1px; }
.portal-past-view.is-active { max-width: 1000px; margin: 0 auto; }
.sl-upcoming { display: flex; flex-direction: column; gap: 10px; }
/* GWJ-50: show ~4 upcoming lessons, scroll for the rest (student portal). */
.sl-upcoming[data-sl-upcoming] { max-height: 296px; overflow-y: auto; padding-right: 2px; }
.sl-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.sl-item-main { display: flex; flex-direction: column; }
.sl-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-cancel { color: var(--muted); }
.sl-past-wrap { margin-top: 16px; }
.sl-past-head { margin-top: 0; }
.sl-item-past { background: #faf8f4; border-style: dashed; }
.sl-item-past .sl-item-main strong { font-weight: 700; }
.sl-zoom-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e7eef0; color: #2a6b78; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.sl-cancel:hover { border-color: var(--red); color: var(--red); }
.sl-modal { position: fixed; inset: 0; background: rgba(20,17,15,.55); display: grid; place-items: center; z-index: 80; padding: 20px; }
.sl-modal.is-hidden { display: none; }
.sl-modal-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 22px; width: min(520px, 100%); max-height: 84vh; overflow: auto; box-shadow: var(--shadow); }
.sl-modal-head { display: flex; justify-content: space-between; align-items: center; }
.sl-modal-head h3 { margin: 0; }
.sl-modal-close { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.sl-modal-sub { margin: 6px 0 14px; }
.sl-cancel-when { font-weight: 800; margin: 8px 0 4px; }
.sl-cancel-msg { color: var(--muted); margin: 4px 0 18px; }
.sl-cancel-warn { margin: 4px 0 12px; }
.sl-cancel-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; font-weight: 600; margin: 0 0 18px; cursor: pointer; }
.sl-cancel-ack input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.sl-cancel-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sl-slots { display: flex; flex-direction: column; gap: 12px; }
.sl-slot-group { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
.sl-slot-date { font-weight: 800; font-size: 0.82rem; color: var(--ink); }
.sl-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-slot { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 7px 11px; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.sl-slot:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 720px) { .sl-layout { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .book-layout, .schedule-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Guitar GPS technique animation cards
   ============================================================ */
.gps-motion-card {
  --motion-red: #c54232;
  --motion-amber: #f0c879;
  margin: 24px 0 30px;
  border: 3px solid #10100f;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.15), transparent 24%),
    linear-gradient(135deg, #363b40, #0b0d0f 68%);
  color: #f5efe2;
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(280px, 1.35fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
}
.gps-motion-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}
.gps-motion-copy span {
  color: #f5dfb0;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gps-motion-copy strong {
  color: #f5efe2;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1;
}
.gps-motion-copy p {
  margin: 0;
  color: rgba(245,239,226,0.82);
  line-height: 1.45;
}
.paper-page .lesson-body .gps-motion-copy strong { color: #f5efe2; }
.paper-page .lesson-body .gps-motion-copy p { color: rgba(245,239,226,0.82); }
.motion-fretboard {
  position: relative;
  min-height: 220px;
  border: 2px solid rgba(16,16,15,0.9);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 12%, transparent 88%, rgba(0,0,0,0.18)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #332118, #1d120e 54%, #2d1b13);
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0,0,0,0.38);
}
.motion-fretboard::before,
.motion-fretboard::after {
  content: "";
  position: absolute;
  inset: 17% 8% 18%;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(235,225,202,0.85) 12.4% 13.2%, transparent 13.6% 28%, rgba(235,225,202,0.85) 28.4% 29.2%, transparent 29.6% 44%, rgba(235,225,202,0.85) 44.4% 45.2%, transparent 45.6% 60%, rgba(235,225,202,0.85) 60.4% 61.2%, transparent 61.6% 76%, rgba(235,225,202,0.85) 76.4% 77.2%, transparent 77.6% 100%);
  pointer-events: none;
}
.motion-fretboard::after {
  background:
    linear-gradient(0deg, rgba(246,226,192,0.95) 0 1.5%, transparent 1.7% 18%, rgba(235,235,229,0.82) 18.3% 19.4%, transparent 19.7% 38%, rgba(235,235,229,0.82) 38.3% 39.4%, transparent 39.7% 58%, rgba(235,235,229,0.82) 58.3% 59.4%, transparent 59.7% 78%, rgba(235,235,229,0.82) 78.3% 79.4%, transparent 79.7% 97.5%, rgba(235,235,229,0.82) 97.8% 99%);
  inset: 24% 5% 22%;
}
.motion-dot,
.motion-pick,
.motion-palm,
.motion-tap-finger {
  position: absolute;
  z-index: 3;
}
.motion-dot {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #151515;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  font-weight: 900;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
.motion-dot.red { background: var(--motion-red); }
.motion-note {
  position: absolute;
  z-index: 4;
  color: #f5efe2;
  font-weight: 900;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px #000;
}
.motion-arrow {
  position: absolute;
  z-index: 2;
  height: 4px;
  border-radius: 999px;
  background: var(--motion-amber);
  box-shadow: 0 0 16px rgba(240,200,121,0.6);
  transform-origin: left center;
}
.motion-bend .bend-main { left: 55%; top: 59%; animation: bendDot 2.6s ease-in-out infinite; }
.motion-bend .bend-helper-1 { left: 35%; top: 59%; }
.motion-bend .bend-helper-2 { left: 45%; top: 59%; }
.motion-bend .bend-target { left: 56%; top: 35%; color: #f4d392; }
.motion-bend .motion-arrow { left: 55%; top: 58%; width: 120px; transform: rotate(-45deg); animation: bendArrow 2.6s ease-in-out infinite; }
.motion-legato .hammer { left: 42%; top: 59%; animation: hammerMove 2.7s cubic-bezier(.2,.75,.15,1) infinite; }
.motion-legato .pull { left: 66%; top: 59%; animation: pullMove 2.7s cubic-bezier(.2,.75,.15,1) infinite; }
.motion-legato .anchor { left: 28%; top: 59%; }
.motion-legato .motion-arrow { left: 32%; top: 38%; width: 130px; transform: rotate(0deg); }
.motion-slide .slide-dot { left: 30%; top: 58%; animation: slideDot 2.8s ease-in-out infinite; }
.motion-slide .slide-start { left: 28%; top: 70%; }
.motion-slide .slide-end { left: 69%; top: 70%; }
.motion-slide .motion-arrow { left: 32%; top: 58%; width: 210px; animation: slideGlow 2.8s ease-in-out infinite; }
.motion-tapping .tap-note { left: 73%; top: 58%; animation: tapPulse 2.2s ease-in-out infinite; }
.motion-tapping .left-note { left: 34%; top: 58%; }
.motion-tapping .motion-tap-finger {
  left: 74%;
  top: 3%;
  width: 42px;
  height: 90px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f1d3b4, #b87955);
  transform: translate(-50%, 0);
  animation: tapFinger 2.2s ease-in-out infinite;
  box-shadow: inset 0 -8px 12px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.32);
}
.motion-picking .motion-pick,
.motion-tremolo .motion-pick {
  width: 42px;
  height: 50px;
  background: var(--motion-red);
  clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,0.38));
}
.motion-picking .motion-pick { left: 50%; top: 35%; animation: pickDownUp 1.2s ease-in-out infinite; }
.motion-tremolo .motion-pick { left: 54%; top: 30%; animation: tremoloPick .34s ease-in-out infinite; }
.motion-tremolo .motion-burst {
  position: absolute;
  z-index: 2;
  left: 47%;
  top: 57%;
  width: 110px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(90deg, rgba(240,200,121,0.85) 0 6px, transparent 6px 14px);
  opacity: 0.7;
  animation: tremoloBurst .34s linear infinite;
}
.motion-muting .motion-palm {
  left: 58%;
  top: 23%;
  width: 140px;
  height: 86px;
  border-radius: 40px 40px 34px 34px;
  background: linear-gradient(180deg, #efcaa9, #ad704e);
  transform: translate(-50%, 0);
  animation: palmMute 2.4s ease-in-out infinite;
  box-shadow: inset 0 -10px 12px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.32);
}
.motion-muting .mute-mark {
  left: 48%;
  top: 58%;
  font-size: 2rem;
  color: var(--motion-red);
  animation: muteX 2.4s ease-in-out infinite;
}
@keyframes bendDot {
  0%, 20%, 100% { transform: translate(-50%, -50%); }
  48%, 72% { transform: translate(-50%, calc(-50% - 42px)); }
}
@keyframes bendArrow {
  0%, 20%, 100% { opacity: .35; transform: rotate(-45deg) scaleX(.65); }
  48%, 72% { opacity: 1; transform: rotate(-45deg) scaleX(1); }
}
@keyframes hammerMove {
  0%, 24%, 100% { left: 42%; top: 28%; transform: translate(-50%, -50%) scale(.82); opacity: .75; }
  42%, 78% { left: 42%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes pullMove {
  0%, 38% { left: 66%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  56%, 76% { left: 58%; top: 75%; transform: translate(-50%, -50%) scale(.9); opacity: .45; }
  100% { left: 66%; top: 59%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes slideDot {
  0%, 18%, 100% { left: 30%; }
  48%, 74% { left: 70%; }
}
@keyframes slideGlow {
  0%, 18%, 100% { opacity: .35; transform: scaleX(.35); }
  48%, 74% { opacity: 1; transform: scaleX(1); }
}
@keyframes tapFinger {
  0%, 30%, 100% { top: 4%; }
  45%, 68% { top: 25%; }
}
@keyframes tapPulse {
  0%, 33%, 100% { transform: translate(-50%, -50%) scale(.95); }
  48%, 70% { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 10px rgba(197,66,50,0.18); }
}
@keyframes pickDownUp {
  0%, 100% { top: 27%; transform: translate(-50%, -50%) rotate(12deg); }
  50% { top: 71%; transform: translate(-50%, -50%) rotate(-10deg); }
}
@keyframes tremoloPick {
  0%, 100% { transform: translate(-50%, -50%) rotate(15deg); top: 31%; }
  50% { transform: translate(-50%, -50%) rotate(-15deg); top: 65%; }
}
@keyframes tremoloBurst {
  from { background-position: 0 0; opacity: .42; }
  to { background-position: 28px 0; opacity: .9; }
}
@keyframes palmMute {
  0%, 100% { top: 16%; opacity: .88; }
  40%, 72% { top: 40%; opacity: 1; }
}
@keyframes muteX {
  0%, 30%, 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  45%, 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@media (max-width: 760px) {
  .gps-motion-card { grid-template-columns: 1fr; }
  .motion-fretboard { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .gps-motion-card *, .gps-motion-card *::before, .gps-motion-card *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Close-voiced triad inversions (gps-inversions.js): lesson reference + tool ---- */
.inv-reference { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1rem 0; }
.inv-set { border: 1px solid #e5e0d5; border-radius: 12px; padding: 12px 14px 6px; background: #fffdf8; }
.inv-set-title { margin: 0 0 10px; font-size: 1rem; color: #117a65; }
.inv-set-title span { color: #9a9384; font-weight: 600; }
.inv-row { margin-bottom: 12px; }
.inv-row-label { font-weight: 700; font-size: 0.88rem; color: #2c3e50; margin-bottom: 4px; }
.inv-row-boxes { display: flex; gap: 8px; }
.inv-box { flex: 1 1 0; min-width: 0; text-align: center; }
.inv-box-cap { display: block; font-size: 0.72rem; color: #5d554d; margin-bottom: 2px; font-weight: 600; }
.inv-chordbox { width: 100%; height: auto; max-width: 130px; }
@media (max-width: 720px) { .inv-reference { grid-template-columns: 1fr; } }

/* Inversions tool (tools.html) */
.inv-tool-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.inv-tool-controls label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 700; color: #5d554d; gap: 4px; }
.inv-tool-controls select, .inv-tool-controls input { padding: 6px 8px; border: 1px solid #cfc8ba; border-radius: 8px; font-size: 0.95rem; }
.inv-tool-modes { display: inline-flex; border: 1px solid #cfc8ba; border-radius: 8px; overflow: hidden; }
.inv-tool-modes button { padding: 7px 14px; border: 0; background: #fff; cursor: pointer; font-weight: 700; color: #5d554d; }
.inv-tool-modes button.is-active { background: #117a65; color: #fff; }
.inv-explorer-boxes { display: flex; gap: 14px; flex-wrap: wrap; }
.inv-explorer-boxes .inv-box { flex: 0 0 150px; }

/* ---- Schedule: searchable student picker (schedule.js) ---- */
.sched-student-search { position: relative; }
.sched-student-search input[type="text"] { width: 100%; }
.sched-student-results { position: absolute; z-index: 40; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #cfc8ba; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); max-height: 260px; overflow-y: auto; }
.sched-student-results li { margin: 0; }
.sched-student-results button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: 0.95rem; text-align: left; color: #2c3e50; }
.sched-student-results button:hover, .sched-student-results button:focus { background: #f1ede4; }
.sched-student-cr { color: #117a65; font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.sched-student-empty { padding: 8px 10px; color: #9a9384; font-size: 0.9rem; }
.sched-student-results button.is-inactive span:first-child { color: #9a9384; }
.sched-student-tag { font-style: normal; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #b04a3a; background: #f6e7e3; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.sched-student-toggle { border-top: 1px solid #ece7dc; margin-top: 4px; }
.sched-student-toggle button { width: 100%; padding: 8px 10px; border: 0; background: none; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #117a65; text-align: left; border-radius: 8px; }
.sched-student-toggle button:hover { background: #eef5f2; }