:root {
  --bg: #0b0f14;
  --panel: #121822;
  --panel-border: #1f2937;
  --text: #e6edf3;
  --text-dim: #8b98a5;
  --accent: #f5b942;
  --accent-dim: #7a5c1a;
  --accent-wash: rgba(245, 185, 66, 0.14);
  --danger: #ef4444;
  --warn: #f59e0b;
  --timing: #22c55e;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  background: rgba(11, 15, 20, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--panel-border);
}

.tab-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn.is-active {
  background: var(--accent-wash);
  color: var(--accent);
}

.tab-btn:active {
  transform: scale(0.97);
}

body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.app-header {
  position: relative;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 14px;
  margin-bottom: 4px;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Below the desktop/sidebar breakpoint: center the brand instead of
   pinning it left, and pull the account bar out of the row entirely so
   it can sit as a small corner button instead of wrapping onto its own
   line under the title (which read as a stray, cluttered leftover). */
@media (max-width: 899px) {
  .app-header {
    /* Reserves a top strip for the absolutely-positioned account bar
       below, so the centered brand row starts underneath it instead of
       overlapping — a centered wordmark can span wide enough to reach
       under a same-row corner button otherwise. */
    padding-top: 40px;
  }

  .brand-row {
    /* No text-align here — it's an inherited property, and it was
       reaching the wordmark itself, centering "FluteChamp" *within*
       its own text column (as wide as the tagline line below it) and
       pulling it away from the logo. justify-content already centers
       the lockup as a whole; .header-short centers its own text
       explicitly, which is the only place that actually needed it. */
    justify-content: center;
  }

  .header-short {
    text-align: center;
  }

  /* The wordmark ("FluteChamp") is narrower than the tagline below it,
     and .brand-text's own width shrinks to fit its widest child (the
     tagline) — so without this, the wordmark sits left-aligned within
     that wider column instead of centered over the tagline. */
  .brand-wordmark {
    text-align: center;
  }

  .account-bar {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
    max-width: 42%;
    justify-content: flex-end;
  }

  .account-status {
    text-align: right;
  }
}

.brand-lockup {
  display: flex;
  align-items: flex-start;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}

.brand-wordmark {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--text);
}

.brand-wordmark-accent {
  color: var(--accent);
}

.tagline {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
}

.privacy-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
}

.tagline,
.privacy-note {
  display: none;
}

.header-short {
  position: relative;
  display: block;
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: left;
}

.state-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.state-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0000;
  border: 1px solid var(--panel-border);
}

.state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
}

.state-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.state-badge[data-state="LISTENING"] .state-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.state-badge[data-state="LISTENING"] .state-label { color: var(--accent); }

.state-badge[data-state="TIMING"] .state-dot {
  background: var(--timing);
  box-shadow: 0 0 10px var(--timing);
  animation: pulse 0.9s ease-in-out infinite;
}
.state-badge[data-state="TIMING"] .state-label { color: var(--timing); }

.state-badge[data-state="COMPLETE"] .state-dot { background: var(--accent); }
.state-badge[data-state="COMPLETE"] .state-label { color: var(--accent); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.timer-display {
  font-size: 3.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.01em;
}

.timer-unit {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.error-banner {
  width: 100%;
  background: #3b1418;
  border: 1px solid #7f1d1d;
  color: #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  text-align: center;
}

.arm-button {
  width: 100%;
  min-height: 68px;
  border-radius: 16px;
  border: none;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: #06231f;
  cursor: pointer;
}

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

.arm-button[data-armed="true"] {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.wakelock-hint {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warn);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.wakelock-hint[hidden] {
  display: none;
}

.meter-panel, .stats-panel, .history-panel, .swara-panel, .progress-panel, .tools-grid-section, .work-on-today-panel, .today-target-panel, .home-learn-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
}

/* --- Featured Learn articles on Home (hand-edited, see index.html) --- */

.home-learn-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-learn-item {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 12px 14px;
}

/* Safety net for the hand-edited list this wraps — only the first 3
   entries ever show, even if someone leaves more than 3 in the HTML. */
.home-learn-item:nth-child(n + 4) {
  display: none;
}

.home-learn-item a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.home-learn-item a:hover {
  color: var(--accent);
}

.home-learn-item p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.home-learn-more {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}

/* Wraps the four Home "personalized for you" panels (Today's target, the
   recommendation/mistake-pattern panels, Work on today) as one flex child
   of .tab-panel, so it can be moved before/after the tools grid as a unit
   (see js/ui.js's orderHomePersonalized) without losing the same 18px
   gap between them that .tab-panel's own flex gap used to provide when
   they were direct children of it. */
.home-personalized {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* "Mid-session resume" UX experiment. */
.session-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.session-resume-banner[hidden] {
  display: none;
}

.session-resume-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
}

.session-resume-meta {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.session-resume-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Home tab UX experiment: collapses Today's target / What should I
   practise today / Mistake patterns / Work on today behind a toggle so
   Practice dashboard (which already synthesizes all of them into one
   glance) isn't followed by four more cards before the tool grid. */
.home-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}

.home-details-toggle:active {
  transform: scale(0.99);
}

.home-details-toggle-icon {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 400;
}

.home-details-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-details-panel[hidden] {
  display: none;
}

.work-on-today-panel[hidden] {
  display: none;
}

.work-on-today-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-on-today-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: #0e1420;
}

.work-on-today-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.work-on-today-swara {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.work-on-today-detail {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.work-on-today-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #06231f;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.work-on-today-btn:active {
  transform: scale(0.96);
}

.today-target-panel[hidden] {
  display: none;
}

.today-target-suggest[hidden],
.today-target-active[hidden],
.today-target-done[hidden] {
  display: none;
}

.today-target-suggest-text,
.today-target-label,
.today-target-detail,
.today-target-done-text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 10px;
}

.today-target-track {
  height: 10px;
  border-radius: 6px;
  background: #1a2230;
  overflow: hidden;
  margin-bottom: 8px;
}

.today-target-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 6px;
  transition: width 0.2s ease;
}

.today-target-detail {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.today-target-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.today-target-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #06231f;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.today-target-btn:active {
  transform: scale(0.97);
}

.today-target-link-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.attempt-comparison {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: #0e1420;
}

.attempt-comparison[hidden] {
  display: none;
}

.attempt-comparison-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

.attempt-comparison-detail {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* data-trend is set by renderAttemptComparison() — same green/amber/red
   vocabulary the pitch tier badge already uses (.pitch-tier-badge above),
   so "better" vs "worse" is readable at a glance, not just from the text. */
.attempt-comparison-detail[data-trend="better"] {
  color: var(--timing);
}

.attempt-comparison-detail[data-trend="worse"] {
  color: var(--danger);
}

/* Practice-tab tool launchers (Metronome, Sadhana, Fingering chart, Find my
   Sa, note converter, Recording) — each opens its own focused modal rather
   than sitting inline, so the core arm/timer loop above isn't competing
   with them for scroll space. Fixed 2-up grid (not a responsive auto-fill)
   and left-aligned icon-over-title-over-subtitle cards, deliberately
   modeled on a reference app's card-grid home screen rather than this
   app's other pill-shaped buttons. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  padding: 18px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: #0e1420;
  color: var(--text);
  cursor: pointer;
}

.tool-card:active {
  transform: scale(0.97);
}

.tool-card-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.tool-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.tool-card-subtitle {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.pitch-feedback {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.pitch-feedback[hidden] {
  display: none;
}

.pitch-target {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.pitch-tier-badge {
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}

.pitch-tier-badge[data-tier="green"] {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--timing);
  color: var(--timing);
}

.pitch-tier-badge[data-tier="yellow"] {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--warn);
  color: var(--warn);
}

.pitch-tier-badge[data-tier="red"] {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

.pitch-cents-readout {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pitch-miss-explainer {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.pitch-miss-explainer[hidden] {
  display: none;
}

.pitch-miss-headline {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.pitch-miss-suggestion {
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0;
}

/* --- Tuning-needle dial (Basic tier) --- */

.tuning-dial {
  width: 100%;
  max-width: 220px;
}

.tuning-dial svg {
  display: block;
  width: 100%;
  height: auto;
}

.tuning-dial-band {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.85;
}

.tuning-needle {
  transform-origin: 100px 104px;
  transition: transform 0.12s ease-out;
}

.tuning-needle-line {
  stroke: var(--text-dim);
  stroke-width: 3;
  stroke-linecap: round;
}

.tuning-needle-pivot {
  fill: var(--text-dim);
}

.tuning-needle[data-tier="green"] .tuning-needle-line {
  stroke: var(--timing);
}
.tuning-needle[data-tier="green"] .tuning-needle-pivot {
  fill: var(--timing);
}

.tuning-needle[data-tier="yellow"] .tuning-needle-line {
  stroke: var(--warn);
}
.tuning-needle[data-tier="yellow"] .tuning-needle-pivot {
  fill: var(--warn);
}

.tuning-needle[data-tier="red"] .tuning-needle-line {
  stroke: var(--danger);
}
.tuning-needle[data-tier="red"] .tuning-needle-pivot {
  fill: var(--danger);
}

.tuning-dial-labels {
  display: flex;
  justify-content: space-between;
  margin-top: -8px;
  padding: 0 4px;
  font-size: 0.65rem;
  color: var(--text-dim);
}

.swara-header {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.swara-sa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.swara-sa-row label {
  font-size: 0.85rem;
  color: var(--text);
}

.swara-sa-row select {
  background: #0e1420;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  min-width: 90px;
}

.swara-sa-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tone-play-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tone-play-btn:active {
  transform: scale(0.96);
}

.swara-select-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.swara-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #0e1420;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.swara-btn small {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-dim);
}

.swara-btn.is-active small {
  color: #06231f;
  opacity: 0.75;
}

.swara-btn:active {
  transform: scale(0.97);
}

.swara-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06231f;
}

.swara-hint {
  margin: 12px 0 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* --- Sequence builder (Sequences tab) --- */

.sequence-builder-panel,
.sequence-library-panel,
.sequence-lessons-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
}

.builder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  align-items: center;
  margin-bottom: 14px;
}

.builder-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.builder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.builder-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.builder-actions {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}

.builder-secondary {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.builder-secondary:active {
  transform: scale(0.97);
}

.builder-name-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #0e1420;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.builder-name-input::placeholder {
  color: var(--text-dim);
}

.builder-save {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #06231f;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.builder-save:active {
  transform: scale(0.98);
}

.builder-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sequence-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sequence-library-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
}

.sequence-library-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0e1420;
}

.sequence-library-info {
  flex: 1;
  min-width: 0;
}

.sequence-library-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sequence-library-notes {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sequence-library-practice {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #06231f;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.sequence-library-delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
}

/* --- Sequence practice (Practice tab, live) --- */

.sequence-practice {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.sequence-practice[hidden] {
  display: none;
}

.sequence-practice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.sequence-exit {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
}

.sequence-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sequence-chip {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2px solid var(--panel-border);
  color: var(--text-dim);
  background: #0e1420;
}

.sequence-chip[data-tier="green"] {
  border-color: var(--timing);
  color: var(--timing);
  background: rgba(34, 197, 94, 0.12);
}

.sequence-chip[data-tier="yellow"] {
  border-color: var(--warn);
  color: var(--warn);
  background: rgba(245, 158, 11, 0.12);
}

.sequence-chip[data-tier="red"] {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
}

.sequence-chip.is-current {
  border-color: var(--accent);
  color: var(--accent);
}

.sequence-chip[data-result="pass"] {
  border-color: var(--timing);
  color: var(--timing);
  background: rgba(34, 197, 94, 0.12);
}

.sequence-chip[data-result="fail"] {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
}

.sequence-chip-mark {
  margin-left: 6px;
  font-weight: 700;
}

.sequence-summary {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

.meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.meter-track {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: #1a2230;
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 8px 0 0 8px;
  transition: width 0.05s linear;
}

.meter-threshold {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--warn);
  left: 60%;
}

.sensitivity-row {
  margin-top: 16px;
}

.sensitivity-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

#thresholdValueLabel {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sensitivity-tag {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 32px;
}

.sensitivity-hint {
  margin: 6px 0 0;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.stats-panel {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.stat {
  flex: 1;
  text-align: center;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.consistency-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.consistency-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}

.consistency-graph-wrap {
  position: relative;
  height: 70px;
  border-radius: 8px;
  background: #0e1420;
  overflow: hidden;
}

.consistency-graph {
  width: 100%;
  height: 100%;
  display: block;
}

.consistency-graph[hidden] {
  display: none;
}

.consistency-graph rect {
  fill: var(--accent);
}

.consistency-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.consistency-empty[hidden] {
  display: none;
}

.consistency-hint {
  margin: 8px 0 0;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.consistency-decay {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.consistency-decay[hidden] {
  display: none;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.reset-button {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.reset-button:active { transform: scale(0.97); }

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0e1420;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.history-label {
  flex: 0 0 auto;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-date {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.history-graph-wrap {
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 180px;
  height: 32px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.history-graph-wrap .consistency-graph {
  opacity: 0.85;
}

.history-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.history-delete:active {
  transform: scale(0.95);
  color: var(--danger);
  border-color: var(--danger);
}

.history-empty {
  color: var(--text-dim);
  justify-content: center !important;
  font-variant-numeric: normal !important;
}

.history-list li.is-best {
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}

.faq-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
}

.faq-panel h2 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
}

.faq-item {
  border-top: 1px solid var(--panel-border);
  padding: 12px 0;
}

.faq-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.faq-item summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.app-footer {
  max-width: 480px;
  margin: 8px auto 0;
  padding: 20px 20px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--panel-border);
}

.footer-note {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.footer-feedback-btn {
  margin: 0 0 18px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.footer-feedback-btn:active {
  transform: scale(0.97);
}

.footer-credit {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.footer-instagram {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.footer-instagram + .footer-instagram {
  margin-top: 6px;
}

.footer-credit a,
.footer-instagram a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.footer-credit a:hover,
.footer-credit a:active,
.footer-instagram a:hover,
.footer-instagram a:active {
  text-decoration: underline;
}

.recordings-panel,
.teacher-connect-panel,
.teach-roster-panel,
.admin-section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
}

.admin-section + .admin-section {
  margin-top: 14px;
}

.record-history-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
}

.record-history-row[hidden] {
  display: none;
}

.recordings-hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.recordings-count {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.recordings-count.is-near-limit {
  color: var(--warn);
}

.recordings-count.is-at-limit {
  color: var(--danger);
}

.recordings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recordings-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  flex-wrap: wrap;
}

.recordings-list .recordings-meta {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recordings-list audio {
  flex: 1 1 160px;
  min-width: 140px;
  height: 32px;
}

.recordings-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
}

.recordings-compare-toggle {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.recordings-compare {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recordings-compare[hidden] {
  display: none;
}

.recordings-compare-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  flex-wrap: wrap;
}

.recordings-compare-slot .recordings-meta {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recordings-compare-slot audio {
  flex: 1 1 160px;
  min-width: 140px;
  height: 32px;
}

.recordings-compare-actions {
  display: flex;
  gap: 10px;
}

/* --- Personal practice dashboard (Premium) --- */

.practice-dashboard-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.practice-dashboard-body[hidden] {
  display: none;
}

.practice-dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.practice-dashboard-line {
  margin: 0;
  padding-left: 14px;
  position: relative;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.practice-dashboard-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
}

.practice-dashboard-line strong {
  color: var(--text);
}

/* The one line the button below actually acts on — visually distinct
   from the two purely-informational lines above it, so it reads as
   "here's your target" leading into the button rather than a third
   equal fact. */
.practice-dashboard-line--weak::before {
  background: var(--accent);
}

.practice-dashboard-line--weak strong {
  color: var(--accent);
}

/* --- Teacher assignments & feedback notes (Premium) --- */

.student-detail-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student-detail-list li {
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.student-detail-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.student-detail-row-top audio {
  flex: 1 1 160px;
  min-width: 140px;
  height: 32px;
}

.student-detail-meta {
  color: var(--text-dim);
  flex: 1 1 auto;
}

.student-detail-status {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}

.student-detail-status.is-complete {
  color: var(--timing);
  border-color: var(--timing);
}

.student-detail-note-text {
  font-size: 0.8rem;
  color: var(--text);
  margin: 0;
}

.student-detail-note-form {
  display: flex;
  gap: 6px;
}

.student-detail-note-form input {
  flex: 1 1 auto;
}

.student-detail-empty {
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
  padding: 6px 0;
}

.student-detail-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.student-detail-add-row select,
.student-detail-add-row input[type="number"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

.student-detail-add-row input[type="text"] {
  flex: 1 1 160px;
}

.student-detail-add-row .builder-save {
  width: 100%;
  min-height: 44px;
}

/* --- Instrument profile (Premium) --- */

.instrument-profile-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.instrument-profile-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.instrument-profile-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.instrument-profile-row-top .instrument-profile-name {
  flex: 1 1 auto;
  min-width: 0;
}

.instrument-profile-sa-select {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.85rem;
}

.instrument-profile-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.instrument-profile-stats {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.instrument-profile-active-btn {
  flex: 0 0 auto;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}

.instrument-profile-active-btn:disabled {
  color: var(--accent);
  border-color: var(--accent-dim);
  cursor: default;
}

.instrument-profile-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.instrument-profile-add-row input {
  flex: 1 1 160px;
}

.instrument-profile-add-row select {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.85rem;
}

.instrument-profile-add-row .builder-save {
  width: 100%;
  min-height: 44px;
}

/* --- Teacher/class dashboard (Premium, v1) --- */

.teacher-code-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
}

.teacher-code-row .gate-primary {
  width: auto;
  flex-shrink: 0;
  padding-left: 18px;
  padding-right: 18px;
}

#teacherCodeInput {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #0e1420;
  color: var(--text);
  font-size: 0.9rem;
  text-transform: uppercase;
}

#teacherCodeInput::placeholder {
  color: var(--text-dim);
  text-transform: none;
}

.teacher-connect-error {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--danger);
}

.teacher-connect-error[hidden] {
  display: none;
}

#teacherLeaveBtn {
  margin-top: 10px;
}

.teach-roster-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teach-roster-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  flex-wrap: wrap;
}

.teach-roster-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.88rem;
}

.teach-roster-meta {
  font-size: 0.76rem;
  color: var(--text-dim);
  text-align: right;
}

.teach-roster-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
}

.teach-roster-detail-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.teach-roster-detail-btn:active {
  transform: scale(0.97);
}

/* --- Admin dashboard (v1) --- */

.admin-checklist {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.admin-checklist code {
  background: var(--panel-border);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82em;
}

.admin-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* These two grow without bound (every payment request/feedback message
   ever submitted, oldest never pruned), unlike Promote a teacher's
   search-results list (bounded by the search itself) — same
   max-height/overflow convention as the Attempt history list
   (.history-list). Scoped by id rather than the shared .admin-list
   class so that search-results list is untouched. */
#adminPaymentList,
#adminFeedbackList {
  max-height: 320px;
  overflow-y: auto;
}

.admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1420;
  flex-wrap: wrap;
}

.admin-list:has(.admin-empty) {
  margin: 0;
}

.admin-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
  justify-content: center;
}

.admin-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-item-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.85rem;
}

.admin-item-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.admin-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.admin-item-actions button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-item-actions .admin-approve {
  border-color: var(--timing);
  color: var(--timing);
}

.admin-item-actions .admin-reject,
.admin-item-actions .admin-remove {
  border-color: var(--danger);
  color: var(--danger);
}

.admin-curated-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.admin-curated-form select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #0e1420;
  color: var(--text);
  font-size: 0.85rem;
}

.admin-curated-preview {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-dim);
  min-height: 1.1em;
}

.admin-curated-error {
  margin: 0;
  font-size: 0.78rem;
  color: var(--danger);
}

.admin-curated-error[hidden] {
  display: none;
}

.record-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.record-toggle[hidden] {
  display: none;
}

.record-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.record-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.record-download {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.record-download[hidden] {
  display: none;
}

.record-download:active {
  transform: scale(0.98);
}

/* Sibling of #sessionRecordingUnlocked, not a replacement for it (see
   setSessionRecordingGate in js/ui.js) — a free user sees this banner
   *and* the real controls together, unlike every other .gate-panel use
   in this app, which is the only thing shown. .gate-panel itself has no
   bottom margin (fine when it's alone), so scoped here rather than
   changing the shared class for every other modal. Also covers the
   ≥900px width where .record-hint (the paragraph that would otherwise
   separate this from the Start button) is hidden in favor of the
   info-tooltip pattern used elsewhere on desktop. */
#sessionRecordingLocked {
  margin-bottom: 16px;
}

/* Unlike the Sequences tab's own copy of this list (a full page, so an
   unbounded list is fine), this one lives inside a fixed-position
   modal with no cap of its own (.modal-card has no max-height) — with
   enough saved sequences the list alone could push Start/Stop/Close off
   past the bottom of the screen. Same max-height/overflow convention
   already used for the Attempt history list (.history-list). Scoped by
   id rather than changing .sequence-library-list, so the Sequences
   tab's own (unbounded, correctly so) list is untouched. */
#sessionRecordingSequenceList {
  max-height: 220px;
  overflow-y: auto;
}

/* Whatever's directly above (Start, Stop, or the result panel) is a
   plain block element with no bottom margin of its own, so this
   section ran flush against it — the "Your saved sequences" label
   sitting right on top of the button above it. */
#sessionRecordingSequencesSection {
  margin-top: 16px;
}

.session-recording-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-border);
  font-size: 0.85rem;
  font-weight: 600;
}

.session-recording-status[hidden] {
  display: none;
}

.session-recording-status-sep {
  color: var(--text-dim);
  font-weight: 400;
}

.session-recording-stop {
  background: var(--danger);
}

.session-recording-stop[hidden] {
  display: none;
}

.session-recording-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.session-recording-result[hidden] {
  display: none;
}

.session-recording-result p {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--text);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 9, 0.72);
  z-index: 50;
}

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

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 22px;
}

/* Beginner Pathway's "Play Sa"/"Hold Sa"/"Sa Re Ga" steps explicitly
   tell the learner to watch the tuning dial and use the arm button —
   both sit in the middle of the practice screen, exactly where the
   shared centered .modal-overlay would otherwise cover them. Anchoring
   to the bottom and lightening the backdrop keeps that whole area
   visible while the instructions are still on screen — every other
   modal in this app keeps the default centered/darker treatment, only
   this one has anything behind it worth seeing while it's open. */
#beginnerPathwayOverlay {
  align-items: flex-end;
  background: rgba(4, 6, 9, 0.35);
}

/* Even bottom-anchored, the full-size card still reached up over the
   tuning needle/readout — the part that actually turns green — on a
   typical phone viewport. Trimmed every margin here down, scoped to
   this one modal only, so Sadhana/Warm-up/Practice session (which
   share these same .sadhana-* classes and don't have anything behind
   them worth seeing) keep their normal spacing. */
#beginnerPathwayOverlay .modal-card {
  padding: 10px 18px;
}

#beginnerPathwayOverlay .modal-card h2 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

#beginnerPathwayOverlay .sadhana-progress-row {
  display: none;
}

#beginnerPathwayOverlay .sadhana-step-count {
  margin: 0 0 4px;
}

#beginnerPathwayOverlay .sadhana-step-header {
  margin-bottom: 4px;
}

#beginnerPathwayOverlay .sadhana-instructions {
  margin: 0 0 8px;
}

#beginnerPathwayOverlay .modal-actions {
  margin-top: 4px;
}

.modal-card h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.modal-card p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Excludes .sadhana-summary/.sadhana-instructions: those manage their own
   trailing margin (see below) because their next sibling is a raw action
   button, not .modal-actions (which supplies its own margin-top and is
   the actual reason this rule zeroes a trailing paragraph's margin in the
   first place). Without this exclusion this rule's higher specificity
   silently wins and zeroes their margin no matter what value they set. */
.modal-card p:last-of-type:not(.sadhana-summary):not(.sadhana-instructions) {
  margin-bottom: 0;
}

/* Practice session launcher's duration-picker row has no bottom margin of
   its own (.swara-select-row is shared with 3 other pickers elsewhere
   that don't need this gap), so it sat flush against whatever came next. */
#practiceSessionDurationRow {
  margin-bottom: 12px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

#transitionsWeakSection {
  margin-bottom: 20px;
}

.modal-cancel,
.modal-confirm {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.modal-cancel {
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
}

.modal-confirm {
  border: none;
  background: var(--warn);
  color: #231600;
}

.modal-cancel:active,
.modal-confirm:active {
  transform: scale(0.98);
}

/* --- Guided Sadhana (Premium) --- */

.sadhana-body {
  padding: 0;
}

.sadhana-body[hidden] {
  display: none;
}

/* Qualified with .modal-card (every usage is inside one) so this beats
   the generic ".modal-card p { margin: 0 0 12px; ... }" rule's higher
   specificity (0,1,1) > this class alone (0,1,0) — otherwise that rule's
   12px silently wins over this 28px, same failure mode as the
   :last-of-type exclusion just above .modal-card p:last-of-type. */
.modal-card .sadhana-summary {
  margin: 0 0 28px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.sadhana-progress-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.sadhana-progress-dot {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.sadhana-progress-dot[data-state="done"] {
  background: var(--accent-dim);
}

.sadhana-progress-dot[data-state="current"] {
  background: var(--accent);
}

.sadhana-step-count {
  margin: 0 0 10px;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sadhana-step-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sadhana-step-header span:first-child {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.sadhana-timer {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* See .modal-card .sadhana-summary above for why this needs the
   .modal-card qualifier too. */
.modal-card .sadhana-instructions {
  margin: 0 0 28px;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.sadhana-actions {
  display: flex;
  gap: 8px;
}

.practice-session-summary-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practice-session-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.practice-session-summary-list li span:first-child {
  color: var(--text);
  font-weight: 600;
}

/* --- Metronome (Basic tier) --- */

.metronome-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.metronome-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.metronome-toggle-icon {
  color: var(--text-dim);
  font-size: 1.1rem;
}

.metronome-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metronome-body[hidden] {
  display: none;
}

/* Inside the metronome modal (as opposed to the consistency-panel
   disclosure, the only other user of this class) .modal-card already
   supplies the card's own padding — drop this one so it isn't doubled. */
.modal-card .metronome-body {
  padding: 0;
}

.metronome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metronome-row label {
  font-size: 0.85rem;
  color: var(--text);
}

.metronome-bpm-label {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#metronomeTaalSelect {
  background: #0e1420;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  width: 100%;
  margin-bottom: 4px;
}

.metronome-pulse-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 18px;
  margin: 4px 0;
}

.metronome-beat-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-border);
  transition: background 0.05s ease-out, transform 0.05s ease-out;
}

.metronome-beat-dot[data-accent="true"] {
  border-color: var(--accent-dim);
}

.metronome-beat-dot[data-active="true"] {
  background: var(--accent);
  transform: scale(1.15);
}

/* --- Alankar generator (Premium) --- */

#alankarPatternSelect {
  background: #0e1420;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  width: 100%;
  margin-bottom: 8px;
}

.alankar-note-count {
  margin: 0 0 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* --- Find my Sa (Basic tier) --- */

#findSaListenBtn {
  margin-top: 4px;
}

.find-sa-status {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.find-sa-result {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.find-sa-result-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.find-sa-result[hidden] {
  display: none;
}

/* --- Interactive fingering chart (Basic tier) --- */

.fingering-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 6px;
}

.fingering-hand-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.bansuri-svg {
  width: min(280px, 100%);
  height: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}

/* Mirrors the whole instrument — body, bindings, blow hole, and finger
   holes together — see setFingeringOrientation() in js/ui.js. */
.bansuri-svg.is-flipped {
  transform: scaleX(-1);
}

.bansuri-blowhole {
  fill: #0b0806;
  stroke: #3a2a18;
  stroke-width: 1;
}

.bansuri-blowhole-label line {
  stroke: var(--text-dim);
  stroke-width: 1;
}

.bansuri-blowhole-label text {
  fill: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

/* The parent SVG mirrors on flip (see .bansuri-svg.is-flipped above), which
   would otherwise leave this label's letters backwards — counter-flip just
   the label so it stays readable while still moving to the correct side
   along with the blow hole it's pointing at. */
.bansuri-svg.is-flipped .bansuri-blowhole-label {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

.fingering-hole {
  fill: #0b0806;
  stroke: var(--accent);
  stroke-width: 2;
  transition: fill 0.15s ease-out;
}

.fingering-hole[data-closed="true"] {
  fill: var(--accent);
}

.modal-card .fingering-blow-label {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.fingering-tool-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.note-converter-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 0.88rem;
}

.note-converter-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--panel-border);
}

.note-converter-table td {
  padding: 8px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
}

.note-converter-table tr:last-child td {
  border-bottom: none;
}

.note-converter-table td:last-child {
  color: var(--accent);
  font-weight: 700;
}

.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #0e1420;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

.feedback-textarea::placeholder,
#feedbackEmail::placeholder {
  color: var(--text-dim);
}

.feedback-error {
  margin: -4px 0 10px;
  font-size: 0.78rem;
  color: var(--danger);
}

.feedback-error[hidden],
.feedback-success[hidden] {
  display: none;
}

.feedback-success {
  margin: -4px 0 10px;
  font-size: 0.85rem;
  color: var(--timing);
  font-weight: 600;
}

#feedbackSubmit {
  background: var(--accent);
  color: #2b1a02;
}

/* --- Account bar (header) --- */

.account-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  /* When .brand-row wraps (narrow phones), .account-bar lands alone on
     its own line — justify-content has no second item to space against
     there, so it collapses to the left instead of staying right. An
     auto left margin absorbs the line's free space instead, holding it
     flush right whether it's sharing the row with .brand-lockup or
     alone on its own wrapped line. */
  margin-left: auto;
}

.account-status {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.account-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.account-btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #2b1a02;
}

.account-btn:active {
  transform: scale(0.97);
}

/* Placed after the base .account-btn rule (not with the other mobile
   header overrides above) so it actually wins the cascade — same
   specificity, and a same-specificity tie goes to whichever rule
   comes later in the file regardless of which one sits inside a media
   query. */
@media (max-width: 899px) {
  .account-btn {
    padding: 4px 8px;
    font-size: 0.62rem;
  }
}

/* --- Sequences paywall/login gate --- */

.gate-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

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

.gate-panel p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
}

.gate-primary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #06231f;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.gate-primary:active {
  transform: scale(0.98);
}

.gate-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gate-secondary {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.gate-secondary:active {
  transform: scale(0.97);
}

.plan-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.plan-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  font-size: 0.85rem;
  color: var(--text);
}

.upi-qr {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
}

.upi-details {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* --- Progress analytics (premium): streak + heatmap --- */

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

.progress-stats-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 20px;
  margin-bottom: 12px;
}

.progress-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.streak-count {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
}

.streak-label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Weeks as columns, days-of-week as rows (GitHub-style) — cell size is
   fixed and app.js picks how many weeks to render so the grid's total
   width actually fills its container instead of sitting in a box sized
   for a wider desktop layout. See updateHeatmapWidth() in app.js. */
.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px);
  grid-auto-columns: 13px;
  gap: 3px;
}

.sustain-improvement {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.sustain-improvement[hidden] {
  display: none;
}

.heatmap-cell {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.heatmap-cell[data-level="1"] {
  background: var(--accent-wash);
}

.heatmap-cell[data-level="2"] {
  background: var(--accent-dim);
}

.heatmap-cell[data-level="3"] {
  background: var(--accent);
}

/* --- Info tooltip (desktop-only; hint paragraphs cover this on mobile) --- */

.info-trigger {
  display: none;
  position: relative;
}

.info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--text-dim);
  background: none;
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 700;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}

.info-icon:hover,
.info-icon:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2230;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.5;
  width: 220px;
  text-align: left;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.state-badge .info-trigger {
  /* Shown at every width — the only explanation of the auto-detect/
     privacy behavior, no fallback paragraph exists on mobile. */
  display: inline-flex;
}

/* Sits near the top of the page (opening upward clips) and stays
   centered within .state-panel at every width, so a simple centered
   open works here — just clamp the width so it can't overflow on
   narrow screens. */
.state-badge .info-tooltip {
  bottom: auto;
  top: calc(100% + 8px);
  width: min(220px, calc(100vw - 64px));
}

.info-trigger:hover .info-tooltip,
.info-trigger.is-open .info-tooltip,
.info-icon:focus-visible + .info-tooltip {
  display: block;
}

/* --- Record toggle row (wraps the checkbox label + info trigger) --- */

.record-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* "Beat pulse" UX experiment — visual-only, no audio (see js/beatPulse.js
   for why). */
.beat-pulse-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.beat-pulse-controls[hidden] {
  display: none;
}

.beat-pulse-dots {
  display: flex;
  gap: 8px;
}

.beat-pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel-border);
  transition: background 0.05s, transform 0.05s;
}

.beat-pulse-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

.beat-pulse-dot.is-accent.is-active {
  background: var(--timing);
}

.beat-pulse-bpm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.beat-pulse-bpm-label input {
  width: 56px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px;
  font-size: 0.85rem;
}

/* --- Timer progress ring (decorative, desktop-only) --- */

.timer-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

.timer-ring {
  display: block;
  position: absolute;
  inset: 0;
  width: 220px;
  height: 220px;
}

.timer-display,
.timer-unit {
  position: relative;
}

.ring-track {
  fill: none;
  stroke: var(--panel-border);
  stroke-width: 9;
}

.ring-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 616;
  stroke-dashoffset: 616;
  transform: rotate(-90deg);
  transform-origin: 110px 110px;
  transition: stroke-dashoffset 0.2s ease;
}

/* Empty at rest — was previously a fixed partial arc shown at every
   state, including before a note had even started, which looked like
   frozen/broken progress rather than decoration. Now only appears, and
   only moves, while a note is actually being timed — a continuous
   sweep rather than a percentage fill, since sustain duration has no
   fixed endpoint to fill "toward." */
.timer-ring-wrap[data-state="TIMING"] .ring-arc {
  stroke-dashoffset: 450;
  animation: ring-sweep 1.6s linear infinite;
}

@keyframes ring-sweep {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

/* --- Desktop/tablet layout --- */

@media (min-width: 900px) {
  .info-trigger {
    display: inline-flex;
  }

  .sensitivity-hint,
  .swara-hint,
  .record-hint,
  .consistency-hint {
    display: none;
  }

  .app {
    max-width: 1080px;
    padding: 24px 32px calc(24px + env(safe-area-inset-bottom));
    padding-left: calc(216px + 32px);
  }

  body {
    padding-bottom: 0;
  }

  .tab-bar {
    left: 0;
    right: auto;
    bottom: 0;
    top: var(--header-offset, 0px);
    width: 200px;
    max-width: none;
    margin: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 12px;
    gap: 6px;
    border-top: none;
    border-right: 1px solid var(--panel-border);
  }

  .tab-btn {
    flex: none;
    text-align: left;
    padding: 12px 14px;
  }

  .app-header {
    margin-left: calc(-1 * (216px + 32px));
    width: calc(100% + 216px + 32px);
    padding: 0 32px 16px;
    box-sizing: border-box;
  }

  .brand-wordmark {
    font-size: 1.4rem;
  }

  .tab-panel[data-tab-panel="practice"]:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 18px;
  }

  .tab-panel[data-tab-panel="practice"] .state-panel,
  .tab-panel[data-tab-panel="practice"] .tools-grid-section,
  .tab-panel[data-tab-panel="practice"] .metronome-panel {
    grid-column: 1 / -1;
  }

  /* Full-width on desktop leaves 2 fixed columns badly stretched (a lot of
     empty space beside each icon) — 3 keeps the same card proportions the
     mobile 2-up layout was tuned for instead of just widening them. */
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tab-panel[data-tab-panel="sequences"] #sequencesUnlocked {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .tab-panel[data-tab-panel="history"]:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .tab-panel[data-tab-panel="history"] .stats-panel,
  .tab-panel[data-tab-panel="history"] .progress-panel,
  .tab-panel[data-tab-panel="history"] .recordings-panel,
  .tab-panel[data-tab-panel="history"] .teacher-connect-panel {
    grid-column: 1 / -1;
  }

  .tab-panel[data-tab-panel="history"] .history-panel {
    grid-column: 1 / -1;
  }
}