/*
Copyright © 2026 Scott Hertzog.
All rights reserved.

ZoneBuilder™
Build your practice. Find the zone.
*/
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #172033;
  --muted: #647084;
  --border: #d9dee8;
  --border-soft: rgba(100, 112, 132, 0.2);
  --shadow: 0 10px 30px rgba(20, 30, 50, 0.08);
  --shadow-soft: 0 8px 24px rgba(20, 30, 50, 0.06);
  --primary: #1f5eff;
  --primary-dark: #1748c6;
  --danger: #b42318;
  --danger-bg: #fff1f0;
  --success: #067647;
  --success-bg: #ecfdf3;
  --warning: #b54708;
  --warning-bg: #fffaeb;
  --soft: #eef2ff;
  --radius-card: 18px;
  --radius-control: 12px;
  --control-height: 2.5rem;
}

.app-screen {
  contain: layout style;
}

.app-screen[hidden] {
  display: none !important;
}

body.zb-route-switching .app-screen,
body.zb-route-switching .app-nav-button,
body.zb-route-switching .zb-practice-v2-screen {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

body[data-current-screen] .app-screen {
  display: none !important;
}

body[data-current-screen="practice-v2"] .app-screen[data-screen-panel="practice-v2"],
body[data-current-screen="dashboard"] .app-screen[data-screen-panel="dashboard"],
body[data-current-screen="getting-started"] .app-screen[data-screen-panel="getting-started"],
body[data-current-screen="log"] .app-screen[data-screen-panel="log"],
body[data-current-screen="schedule-builder"] .app-screen[data-screen-panel="schedule-builder"],
body[data-current-screen="collection-builder"] .app-screen[data-screen-panel="collection-builder"],
body[data-current-screen="catalog"] #organizeWorkspaceShell,
body[data-current-screen="schedules"] #organizeWorkspaceShell,
body[data-current-screen="manage"] .app-screen[data-screen-panel="manage"],
body[data-current-screen="setup"] .app-screen[data-screen-panel="setup"],
body[data-current-screen="tools"] .app-screen[data-screen-panel="tools"],
body[data-current-screen="importzone"] .app-screen[data-screen-panel="importzone"],
body[data-current-screen="creativezone"] .app-screen[data-screen-panel="creativezone"],
body[data-current-screen="settings"] .app-screen[data-screen-panel="settings"],
body[data-current-screen="system"] .app-screen[data-screen-panel="system"],
body[data-current-screen="developer"] .app-screen[data-screen-panel="developer"],
body[data-current-screen="compact-practice"] .app-screen[data-screen-panel="compact-practice"],
body[data-current-screen="dynamic-practice"] .app-screen[data-screen-panel="dynamic-practice"] {
  display: block !important;
}

/* P10QC left rail hierarchy: navigation, progress, utilities, maintenance. */
body[data-current-screen="dashboard"] .practice-rail-progress {
  display: grid !important;
  gap: 0.54rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "progress"
    "utilities"
    "maintenance" !important;
  justify-items: stretch !important;
  inline-size: 11.45rem !important;
  margin-left: 3.05rem !important;
  margin-right: auto !important;
  max-inline-size: 11.45rem !important;
  max-width: 11.45rem !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  width: 11.45rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak {
  align-items: center !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(250, 204, 21, 0.16), transparent 34%),
    radial-gradient(circle at 92% 95%, rgba(45, 212, 191, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.46)) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  box-shadow:
    0 14px 28px rgba(8, 13, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  display: grid !important;
  gap: 0.42rem 0.52rem !important;
  grid-template-columns: 1.86rem minmax(0, 1fr) !important;
  grid-area: progress !important;
  order: 1 !important;
  overflow: hidden !important;
  padding: 0.62rem !important;
  text-align: left !important;
  max-width: 100% !important;
  min-height: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-mini-icon {
  align-self: center !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 1.76rem !important;
  justify-self: start !important;
  margin: 0 !important;
  width: 1.76rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-mini-copy {
  align-items: start !important;
  display: grid !important;
  gap: 0.06rem !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-items: start !important;
  min-width: 0 !important;
  text-align: left !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-mini-copy strong,
body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-mini-copy small,
body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-mini-copy em {
  line-height: 1.08 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: auto !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-streak-value {
  font-size: 0.86rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-week-time {
  font-size: 0.9rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak .practice-rail-progress-link {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 2.08rem !important;
  padding: 0.36rem 0.52rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-utility-actions {
  display: grid !important;
  gap: 0.48rem !important;
  grid-area: utilities !important;
  grid-template-columns: minmax(0, 1fr) !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  order: 2 !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-maintenance-actions {
  display: grid !important;
  gap: 0.42rem !important;
  grid-area: maintenance !important;
  grid-template-columns: minmax(0, 1fr) !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  order: 3 !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-settings-button,
body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button,
body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status,
body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link {
  box-sizing: border-box !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-settings-button,
body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button {
  align-items: center !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(45, 212, 191, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.58)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  display: inline-flex !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  min-height: 2.34rem !important;
  min-width: 0 !important;
  padding: 0.48rem 0.72rem !important;
  text-align: left !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(203, 213, 225, 0.72) !important;
  display: inline-flex !important;
  font-size: 0.62rem !important;
  gap: 0.28rem !important;
  justify-content: center !important;
  overflow: hidden !important;
  min-height: 1.72rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0.24rem 0.48rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .app-header.header-with-nav .practice-rail-progress,
  body[data-current-screen="dashboard"] .practice-rail-progress {
    inline-size: 172px !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-inline-size: 172px !important;
    max-width: 172px !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    width: 172px !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak,
  body[data-current-screen="dashboard"] .practice-rail-utility-actions,
  body[data-current-screen="dashboard"] .practice-rail-maintenance-actions {
    inline-size: 172px !important;
    max-inline-size: 172px !important;
    max-width: 172px !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    width: 172px !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link,
  body[data-current-screen="dashboard"] .practice-rail-settings-button,
  body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button,
  body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
    justify-content: center !important;
    padding: 0.22rem 0.34rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link {
    gap: 0.36rem !important;
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaUpdateMessage {
    color: rgba(203, 213, 225, 0.54) !important;
    font-size: 0.58rem !important;
    max-width: 4.8rem !important;
  }

  body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaReloadButton.pwa-reload-button {
    background: rgba(226, 232, 240, 0.16) !important;
    border-color: rgba(226, 232, 240, 0.34) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    min-width: 3.5rem !important;
  }
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaVersionLabel {
  display: none !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaUpdateMessage {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link::before {
  height: 1.18rem !important;
  width: 1.18rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link .practice-rail-progress-link-icon {
  display: none !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status .pwa-reload-button {
  min-height: 1.35rem !important;
  padding: 0.12rem 0.38rem !important;
}

.settings-screen .settings-redesign-shell {
  max-width: 1120px;
}

.settings-screen .settings-practice-defaults-group {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.5));
}

/* P10R Navigation utility consolidation: schedule lives in drawer, rail holds progress/settings/feedback. */
body[data-current-screen="dashboard"] #activeScheduleWidget,
body[data-current-screen="dashboard"] .active-schedule-widget {
  display: none !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress {
  gap: 0.66rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak {
  display: grid !important;
  gap: 0.62rem !important;
  padding: 0.92rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress-link {
  margin-top: 0.16rem !important;
}

body[data-current-screen="dashboard"] .practice-rail-utility-actions {
  display: grid;
  gap: 0.48rem;
  width: 100%;
}

body[data-current-screen="dashboard"] .practice-rail-settings-button,
body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button {
  align-items: center;
  background:
    radial-gradient(circle at 14% 12%, rgba(45, 212, 191, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.58));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 850;
  justify-content: flex-start;
  min-height: 2.34rem;
  padding: 0.48rem 0.72rem;
  text-align: left;
  width: 100%;
}

body[data-current-screen="dashboard"] .practice-rail-settings-button::before {
  content: "⚙";
  margin-right: 0.48rem;
}

body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button {
  margin: 0;
  min-width: 0;
}

.practice-queue-schedule-tools {
  display: grid;
  gap: 0.72rem;
  margin: 0.75rem 0 0.9rem;
}

.practice-queue-current-schedule,
.practice-queue-available-schedules {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  display: grid;
  gap: 0.42rem;
  padding: 0.82rem;
}

.practice-queue-current-schedule > span,
.practice-queue-available-schedules > span {
  color: rgba(190, 201, 219, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.practice-queue-current-schedule > strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1.05rem;
}

.practice-queue-current-schedule > small,
.practice-queue-available-schedules small,
.practice-queue-available-schedules p {
  color: rgba(203, 213, 225, 0.72);
}

.practice-queue-current-schedule button,
.practice-queue-available-schedules button {
  justify-self: start;
}

.practice-queue-available-schedules button {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  color: rgba(226, 232, 240, 0.9);
  display: grid;
  gap: 0.12rem;
  justify-items: start;
  min-height: auto;
  padding: 0.56rem 0.68rem;
  text-align: left;
  width: 100%;
}

.practice-queue-available-schedules button:hover,
.practice-queue-available-schedules button:focus-visible,
body[data-current-screen="dashboard"] .practice-rail-settings-button:hover,
body[data-current-screen="dashboard"] .practice-rail-settings-button:focus-visible,
body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button:hover,
body[data-current-screen="dashboard"] .alpha-feedback-button.is-rail-feedback-button:focus-visible {
  border-color: rgba(45, 212, 191, 0.38);
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* P10FK final cascade: active tools sit tighter, read as one balanced musician band. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    gap: 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions {
    margin-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: -0.18rem !important;
    padding: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    box-sizing: border-box !important;
    min-height: 9.2rem !important;
    padding: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.55rem, 1.7vw, 1.9rem) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    font-size: 0.66rem !important;
    min-height: 1.48rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    min-height: 1.78rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed,
  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1.22rem !important;
    min-height: 2.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card {
    min-height: 9.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
    gap: 0.3rem !important;
    grid-template-areas:
      "title auto"
      "bpm tap" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { grid-area: title !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region { grid-area: bpm !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap { grid-area: tap !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { grid-area: auto !important; }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    grid-template-columns: 1.55rem minmax(2.5rem, 1fr) 1.55rem !important;
    min-height: 1.92rem !important;
    padding: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input {
    font-size: clamp(1.25rem, 1.55vw, 1.65rem) !important;
    height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button {
    min-height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-link,
  body[data-current-screen="dashboard"] #p10exMetroNoteCell {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-pattern::before {
    color: rgba(232, 237, 250, 0.38) !important;
    content: "Feel" !important;
    display: block !important;
    font-size: 0.58rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.18rem !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    min-height: 1.82rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    background:
      radial-gradient(circle at 18% 18%, rgba(167, 139, 250, 0.22), transparent 52%),
      radial-gradient(circle at 92% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important;
    border-color: rgba(221, 230, 247, 0.062) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 20px 48px rgba(0, 0, 0, 0.12) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week {
    background:
      radial-gradient(circle at 18% 30%, rgba(74, 222, 128, 0.20), transparent 54%),
      radial-gradient(circle at 95% 0%, rgba(34, 211, 238, 0.07), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips > .p10ex-help-anchor {
    cursor: help !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::after {
    content: attr(data-help) !important;
    left: calc(100% + 0.55rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 1181px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* P10OG Backup foundation stabilization: final cascade lock for hosted tools. */
.toolbox-screen [hidden],
.toolbox-screen .toolbox-tool-panel[hidden],
.toolbox-screen .zoneplayer-card-shell[hidden],
.toolbox-screen .zonetune-card-shell[hidden],
.toolbox-floating-body [hidden],
.toolbox-floating-body .toolbox-tool-panel[hidden],
.toolbox-floating-body .zoneplayer-card-shell[hidden],
.toolbox-floating-body .zonetune-card-shell[hidden],
.toolbox-screen [data-toolbox-float][hidden],
.toolbox-floating-body [data-toolbox-float][hidden] {
  display: none !important;
}

.toolbox-screen .toolbox-stage {
  display: block !important;
  overflow: hidden !important;
}

.toolbox-screen .toolbox-tool-panel:not([hidden]) {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
}

.toolbox-screen .zoneplayer-card-shell:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

.toolbox-screen .zonetune-card-shell:not([hidden]) {
  display: grid !important;
}

/* P10OG final floating host layout lock. Keep this at EOF so older tool styles cannot
   reintroduce page-level scrolling or vertical offsets in floating windows. */
html.toolbox-floating-root,
body.toolbox-floating-body {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  scroll-behavior: auto !important;
}

body.toolbox-floating-body {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  padding: clamp(0.75rem, 1.6vw, 1.1rem) !important;
}

.toolbox-floating-body .toolbox-floating-shell {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.85rem !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: calc(100vh - clamp(1.5rem, 3.2vw, 2.2rem)) !important;
  margin: 0 auto !important;
  max-height: calc(100vh - clamp(1.5rem, 3.2vw, 2.2rem)) !important;
  max-width: min(100%, 88rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.toolbox-floating-body .toolbox-floating-header {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
}

.toolbox-floating-body .toolbox-tool-panel:not([hidden]) {
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  width: 100% !important;
}

.toolbox-floating-body .zoneplayer-card-shell:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

.toolbox-floating-body .zonetune-card-shell:not([hidden]) {
  display: grid !important;
}

.toolbox-floating-body .fretboard-tool-card:not([hidden]) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

.toolbox-floating-body .fretboard-tool-card:not([hidden]) .fretboard-canvas {
  min-height: min(31rem, 48vh) !important;
}

/* P10OG Toolbox floating layout: one stable viewport shell for every hosted tool. */
html:has(.toolbox-floating-body),
body.toolbox-floating-body {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  scroll-behavior: auto !important;
}

body.toolbox-floating-body {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  padding: clamp(0.75rem, 1.6vw, 1.1rem) !important;
}

.toolbox-floating-body .toolbox-floating-shell {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.85rem !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: calc(100vh - clamp(1.5rem, 3.2vw, 2.2rem)) !important;
  margin: 0 auto !important;
  max-height: calc(100vh - clamp(1.5rem, 3.2vw, 2.2rem)) !important;
  max-width: min(100%, 88rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.toolbox-floating-body .toolbox-floating-header {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
}

.toolbox-floating-body .toolbox-tool-panel:not([hidden]) {
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  width: 100% !important;
}

.toolbox-floating-body .zoneplayer-card-shell:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

.toolbox-floating-body .zonetune-card-shell:not([hidden]) {
  display: grid !important;
}

.toolbox-floating-body .fretboard-tool-card:not([hidden]) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

.toolbox-floating-body .fretboard-tool-card:not([hidden]) .fretboard-canvas {
  min-height: min(31rem, 48vh) !important;
}

.toolbox-floating-body .tool-card-header {
  flex-shrink: 0 !important;
}

.toolbox-screen .toolbox-tool-panel.is-tool-selected {
  border-color: rgba(125, 211, 252, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(124, 58, 237, 0.16) !important;
}

.toolbox-screen .tool-card-header {
  align-items: start !important;
  gap: 0.75rem !important;
}

.toolbox-screen .toolbox-migration-panel .toolbox-placeholder-module {
  align-items: center !important;
  display: grid !important;
  justify-items: center !important;
}

.toolbox-screen .zoneplayer-card-shell:not([hidden]) .tool-card-note,
.toolbox-screen .zonetune-card-shell:not([hidden]) .zonetune-status,
.toolbox-screen .toolbox-migration-panel:not([hidden]) .tool-card-note {
  color: rgba(203, 213, 225, 0.82) !important;
}

.toolbox-screen .fretboard-tool-card:not([hidden]) .fretboard-canvas {
  max-width: 100% !important;
}

/* P10OG Backup foundation stabilization: hidden hosted tools must stay hidden. */
.toolbox-screen [hidden],
.toolbox-screen .toolbox-tool-panel[hidden],
.toolbox-screen .zoneplayer-card-shell[hidden],
.toolbox-screen .zonetune-card-shell[hidden],
.toolbox-floating-body [hidden],
.toolbox-floating-body .toolbox-tool-panel[hidden],
.toolbox-floating-body .zoneplayer-card-shell[hidden],
.toolbox-floating-body .zonetune-card-shell[hidden],
.toolbox-screen [data-toolbox-float][hidden],
.toolbox-floating-body [data-toolbox-float][hidden] {
  display: none !important;
}

.toolbox-screen .toolbox-stage {
  display: block !important;
  overflow: hidden !important;
}

.toolbox-screen .toolbox-tool-panel:not([hidden]) {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
}

.toolbox-screen .zoneplayer-card-shell:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

.toolbox-screen .zonetune-card-shell:not([hidden]) {
  display: grid !important;
}

.toolbox-screen .toolbox-tool-panel.is-tool-selected {
  border-color: rgba(125, 211, 252, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(124, 58, 237, 0.16) !important;
}

.toolbox-screen .tool-card-header {
  align-items: start !important;
  gap: 0.75rem !important;
}

.toolbox-screen .toolbox-migration-panel .toolbox-placeholder-module {
  align-items: center !important;
  display: grid !important;
  justify-items: center !important;
}

.toolbox-screen .zoneplayer-card-shell:not([hidden]) .tool-card-note,
.toolbox-screen .zonetune-card-shell:not([hidden]) .zonetune-status,
.toolbox-screen .toolbox-migration-panel:not([hidden]) .tool-card-note {
  color: rgba(203, 213, 225, 0.82) !important;
}

.toolbox-screen .fretboard-tool-card:not([hidden]) .fretboard-canvas {
  max-width: 100% !important;
}

/* P10OC Toolbox visual + docking repair: final layer after legacy Tools rules. */
.toolbox-screen.tools-screen.advanced-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.24), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(7, 14, 29, 0.98), rgba(3, 13, 24, 0.97)) !important;
  color: rgba(248, 250, 252, 0.96) !important;
}

.toolbox-screen.tools-screen .section-header {
  align-items: center !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

.toolbox-screen.tools-screen .screen-title {
  color: rgba(248, 250, 252, 0.98) !important;
}

.toolbox-screen.tools-screen .section-note {
  color: rgba(203, 213, 225, 0.76) !important;
}

.toolbox-screen .toolbox-host-shell {
  grid-template-columns: minmax(15.5rem, 0.25fr) minmax(0, 1fr) !important;
  min-height: min(73vh, 52rem) !important;
}

.toolbox-screen .toolbox-rail,
.toolbox-screen .toolbox-stage,
.toolbox-screen.tools-screen .advanced-tool-card,
.toolbox-floating-body .toolbox-floating-header,
.toolbox-floating-body .advanced-tool-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(168, 85, 247, 0.16), transparent 42%),
    radial-gradient(circle at 98% 12%, rgba(56, 189, 248, 0.08), transparent 36%),
    linear-gradient(145deg, rgba(23, 38, 62, 0.92), rgba(5, 16, 30, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 24px 68px rgba(0, 0, 0, 0.34) !important;
  color: rgba(248, 250, 252, 0.96) !important;
}

.toolbox-screen.tools-screen .advanced-tool-card {
  min-height: 100% !important;
  padding: 1.15rem !important;
}

.toolbox-screen .tool-card-header,
.toolbox-floating-body .tool-card-header {
  align-items: center !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  display: flex !important;
  gap: 1rem !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.95rem !important;
}

.toolbox-screen.tools-screen .advanced-tool-card .tool-card-header h3,
.toolbox-floating-body .advanced-tool-card .tool-card-header h3 {
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: clamp(1.28rem, 1.6vw, 1.75rem) !important;
  font-weight: 650 !important;
}

.toolbox-screen.tools-screen .advanced-tool-card .tool-card-note,
.toolbox-floating-body .advanced-tool-card .tool-card-note {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.95rem !important;
}

.toolbox-screen .advanced-tool-badge,
.toolbox-floating-body .advanced-tool-badge {
  background: rgba(124, 58, 237, 0.34) !important;
  border: 1px solid rgba(196, 181, 253, 0.32) !important;
  color: rgba(248, 250, 252, 0.96) !important;
}

.toolbox-screen .fretboard-controls,
.toolbox-floating-body .fretboard-controls {
  align-items: end !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  display: grid !important;
  gap: 0.75rem !important;
  grid-template-columns: repeat(6, minmax(7.25rem, 1fr)) !important;
  margin: 1rem 0 !important;
  padding: 0.85rem !important;
}

.toolbox-screen .fretboard-controls select,
.toolbox-floating-body .fretboard-controls select,
.toolbox-screen .fretboard-controls input,
.toolbox-floating-body .fretboard-controls input {
  background: rgba(2, 8, 23, 0.80) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.toolbox-screen .fretboard-canvas,
.toolbox-floating-body .fretboard-canvas {
  background:
    linear-gradient(90deg, rgba(226, 232, 240, 0.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226, 232, 240, 0.11) 1px, transparent 1px),
    radial-gradient(circle at 48% 38%, rgba(251, 191, 36, 0.16), transparent 52%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(8, 13, 24, 0.98)) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  border-radius: 20px !important;
  gap: 0.34rem !important;
  min-height: 24rem !important;
  padding: 0.95rem !important;
}

.toolbox-screen .fretboard-cell,
.toolbox-floating-body .fretboard-cell {
  min-height: 3rem !important;
}

.toolbox-screen .fretboard-note,
.toolbox-floating-body .fretboard-note {
  min-height: 2.72rem !important;
}

.toolbox-screen .fretboard-note.is-out-of-scale,
.toolbox-floating-body .fretboard-note.is-out-of-scale {
  opacity: 0.38 !important;
}

.toolbox-screen .fretboard-note.is-in-scale,
.toolbox-floating-body .fretboard-note.is-in-scale {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.36), transparent 34%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.92), rgba(14, 165, 233, 0.62)) !important;
}

.toolbox-screen .fretboard-note.is-root,
.toolbox-floating-body .fretboard-note.is-root {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.40), transparent 34%),
    linear-gradient(145deg, rgba(168, 85, 247, 0.98), rgba(236, 72, 153, 0.76)) !important;
  border-color: rgba(216, 180, 254, 0.78) !important;
  box-shadow: 0 16px 34px rgba(168, 85, 247, 0.30) !important;
}

.toolbox-screen .fretboard-note.is-chord-tone:not(.is-root),
.toolbox-floating-body .fretboard-note.is-chord-tone:not(.is-root) {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(20, 184, 166, 0.94), rgba(59, 130, 246, 0.68)) !important;
  border-color: rgba(94, 234, 212, 0.62) !important;
  box-shadow: 0 13px 28px rgba(20, 184, 166, 0.18) !important;
}

.toolbox-floating-body {
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.26), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(20, 184, 166, 0.18), transparent 36%),
    linear-gradient(145deg, #050b16, #071827) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  min-height: 100vh !important;
  padding: 1rem !important;
}

.toolbox-floating-shell {
  gap: 1rem !important;
  max-width: 86rem !important;
}

.toolbox-floating-header {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
}

.toolbox-floating-header h1 {
  color: rgba(248, 250, 252, 0.98) !important;
}

.toolbox-floating-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.toolbox-floating-actions .secondary-button,
.toolbox-screen .secondary-button,
.toolbox-floating-body .secondary-button {
  background: rgba(15, 23, 42, 0.76) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: rgba(248, 250, 252, 0.90) !important;
}

.toolbox-floating-actions .secondary-button:hover,
.toolbox-screen .secondary-button:hover,
.toolbox-floating-body .secondary-button:hover {
  background: rgba(59, 130, 246, 0.22) !important;
  border-color: rgba(125, 211, 252, 0.45) !important;
}

.toolbox-screen .zonetune-card-shell,
.toolbox-floating-body .zonetune-card-shell {
  display: grid !important;
  gap: 1rem !important;
}

.toolbox-screen .zonetune-instrument-row,
.toolbox-floating-body .zonetune-instrument-row {
  align-items: end !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  display: grid !important;
  gap: 0.45rem !important;
  max-width: 22rem !important;
  padding: 0.85rem !important;
}

.toolbox-screen .zonetune-strings-wrapper,
.toolbox-floating-body .zonetune-strings-wrapper {
  align-items: start !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.12), transparent 40%),
    rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  display: grid !important;
  gap: 0.75rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 0.9rem !important;
}

.toolbox-screen .zonetune-strings,
.toolbox-floating-body .zonetune-strings {
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)) !important;
}

.toolbox-screen .zonetune-display,
.toolbox-floating-body .zonetune-display {
  background:
    radial-gradient(circle at 50% 15%, rgba(34, 197, 94, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 8, 23, 0.92)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 20px !important;
  display: grid !important;
  gap: 0.4rem !important;
  justify-items: center !important;
  min-height: 9rem !important;
  padding: 1rem !important;
}

.toolbox-screen .zonetune-note,
.toolbox-floating-body .zonetune-note {
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: clamp(3rem, 8vw, 5.5rem) !important;
  line-height: 0.95 !important;
}

.toolbox-screen .zonetune-meter,
.toolbox-floating-body .zonetune-meter {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  padding: 0.9rem !important;
}

.toolbox-screen .zoneplayer-card-shell,
.toolbox-floating-body .zoneplayer-card-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
}

.toolbox-screen .zoneplayer-canvas-wrap,
.toolbox-floating-body .zoneplayer-canvas-wrap {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  min-height: 18rem !important;
}

.toolbox-screen .toolbox-placeholder-module,
.toolbox-floating-body .toolbox-placeholder-module {
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.80), rgba(15, 23, 42, 0.76)) !important;
  border-color: rgba(196, 181, 253, 0.24) !important;
  min-height: 12rem !important;
  place-content: center !important;
  text-align: center !important;
}

@media (max-width: 1100px) {
  .toolbox-screen .fretboard-controls,
  .toolbox-floating-body .fretboard-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .toolbox-screen .fretboard-controls,
  .toolbox-floating-body .fretboard-controls,
  .toolbox-screen .zonetune-strings-wrapper,
  .toolbox-floating-body .zonetune-strings-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* P10OB Toolbox framework: keep docked and floating tools on the same dark host language. */
.toolbox-screen.tools-screen .advanced-tool-card,
.toolbox-floating-body .advanced-tool-card,
.toolbox-floating-body .toolbox-tool-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.90), rgba(2, 12, 22, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.30) !important;
  color: rgba(239, 246, 255, 0.96) !important;
}

.toolbox-screen.tools-screen .advanced-tool-card .tool-card-header h3,
.toolbox-floating-body .advanced-tool-card .tool-card-header h3,
.toolbox-floating-body h1 {
  color: rgba(248, 250, 252, 0.98) !important;
}

.toolbox-screen.tools-screen .advanced-tool-card .tool-card-note,
.toolbox-screen.tools-screen .advanced-tool-card .eyebrow,
.toolbox-floating-body .advanced-tool-card .tool-card-note,
.toolbox-floating-body .advanced-tool-card .eyebrow,
.toolbox-floating-header span {
  color: rgba(203, 213, 225, 0.74) !important;
}

.toolbox-floating-body {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.26), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(20, 184, 166, 0.16), transparent 34%),
    linear-gradient(145deg, #020617, #06111d) !important;
  color: rgba(239, 246, 255, 0.96);
  margin: 0;
  min-height: 100vh;
  padding: 1rem;
}

.toolbox-floating-shell {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 78rem;
  min-height: calc(100vh - 2rem);
}

.toolbox-floating-header {
  align-items: center;
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(2, 12, 22, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.15rem;
}

.toolbox-floating-header h1 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 680;
  letter-spacing: 0;
  margin: 0;
}

.toolbox-floating-panel {
  min-height: auto !important;
}

.toolbox-placeholder-module {
  background:
    radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.74), rgba(2, 8, 23, 0.68));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  color: rgba(226, 232, 240, 0.82);
  display: grid;
  gap: 0.4rem;
  padding: 1rem;
}

.toolbox-placeholder-module strong {
  color: rgba(248, 250, 252, 0.96);
}

/* Toolbox restoration: one host for standalone musician tools. */
.toolbox-screen.advanced-screen {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.22), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(20, 184, 166, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(5, 12, 26, 0.98), rgba(8, 20, 32, 0.96)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(239, 246, 255, 0.96) !important;
}

.toolbox-screen .screen-title,
.toolbox-screen .section-note,
.toolbox-screen .advanced-tool-card .tool-card-header h3,
.toolbox-screen .advanced-tool-card .tool-card-note,
.toolbox-screen .advanced-tool-card .eyebrow {
  color: inherit !important;
}

.toolbox-screen .section-note,
.toolbox-screen .advanced-tool-card .tool-card-note,
.toolbox-screen .advanced-tool-card .eyebrow {
  color: rgba(203, 213, 225, 0.74) !important;
}

.toolbox-host-shell {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(15rem, 0.28fr) minmax(0, 1fr);
  min-height: min(70vh, 48rem);
}

.toolbox-rail,
.toolbox-stage,
.toolbox-screen .advanced-tool-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(2, 12, 22, 0.84)) !important;
  border: 1px solid rgba(148, 163, 184, 0.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 60px rgba(0, 0, 0, 0.24) !important;
}

.toolbox-rail {
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  padding: 1rem;
}

.toolbox-rail-heading {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 0.2rem;
  padding: 0 0 0.72rem;
}

.toolbox-rail-heading strong {
  color: rgba(248, 250, 252, 0.95);
  font-size: 0.98rem;
  font-weight: 680;
}

.toolbox-tool-tab {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 16px;
  color: rgba(226, 232, 240, 0.78);
  cursor: pointer;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 4rem;
  padding: 0.72rem;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.toolbox-tool-tab:hover,
.toolbox-tool-tab:focus-visible {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.13), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028));
  border-color: rgba(125, 211, 252, 0.32);
  box-shadow: 0 18px 36px rgba(14, 165, 233, 0.10);
  transform: translateY(-1px);
}

.toolbox-tool-tab.is-selected {
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.30), transparent 58%),
    linear-gradient(145deg, rgba(99, 102, 241, 0.26), rgba(8, 47, 73, 0.18));
  border-color: rgba(167, 139, 250, 0.62);
  box-shadow:
    inset 3px 0 0 rgba(192, 132, 252, 0.94),
    0 20px 44px rgba(88, 28, 135, 0.22);
  color: rgba(255, 255, 255, 0.98);
}

.toolbox-tool-icon {
  align-items: center;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.34), transparent 32%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.98), rgba(14, 165, 233, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.18);
  color: white;
  display: inline-flex;
  font-weight: 760;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.toolbox-tool-tab strong {
  color: inherit;
  display: block;
  font-size: 0.92rem;
  line-height: 1.16;
}

.toolbox-tool-tab small {
  color: rgba(203, 213, 225, 0.62);
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  margin-top: 0.1rem;
}

.toolbox-stage {
  border-radius: 24px;
  min-width: 0;
  padding: 1rem;
}

.toolbox-screen .advanced-tool-card {
  border-radius: 20px !important;
  min-height: 100% !important;
}

.toolbox-screen .tool-card-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding-bottom: 0.8rem;
}

.fretboard-controls {
  align-items: end;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(5, minmax(8rem, 1fr));
}

.fretboard-controls label {
  color: rgba(203, 213, 225, 0.68);
  display: grid;
  font-size: 0.72rem;
  font-weight: 720;
  gap: 0.32rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fretboard-controls select,
.fretboard-controls input {
  background: rgba(2, 8, 23, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  color: rgba(248, 250, 252, 0.94);
  min-height: 2.6rem;
  padding: 0.55rem 0.7rem;
}

.fretboard-canvas {
  --fretboard-fret-count: 14;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(251, 191, 36, 0.13), transparent 55%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.94), rgba(3, 7, 18, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: 3.5rem repeat(var(--fretboard-fret-count), minmax(2.8rem, 1fr));
  overflow: auto;
  padding: 0.72rem;
}

.fretboard-cell {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.8rem;
}

.fretboard-corner,
.fretboard-fret-label,
.fretboard-string-label {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fretboard-string-label {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  color: rgba(248, 250, 252, 0.86);
}

.fretboard-note {
  background: rgba(15, 23, 42, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 999px;
  color: rgba(148, 163, 184, 0.28);
  cursor: default;
  min-height: 2.45rem;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.fretboard-note.is-out-of-scale {
  opacity: 0.42;
}

.fretboard-note.is-in-scale {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.86), rgba(14, 165, 233, 0.54));
  border-color: rgba(125, 211, 252, 0.44);
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.13);
  color: white;
}

.fretboard-note.is-root {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.40), transparent 34%),
    linear-gradient(145deg, rgba(168, 85, 247, 0.98), rgba(236, 72, 153, 0.72));
  border-color: rgba(216, 180, 254, 0.72);
  box-shadow: 0 14px 30px rgba(168, 85, 247, 0.28);
}

.fretboard-note.is-chord-tone:not(.is-root) {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(20, 184, 166, 0.92), rgba(59, 130, 246, 0.66));
  border-color: rgba(94, 234, 212, 0.62);
  box-shadow: 0 12px 26px rgba(20, 184, 166, 0.18);
}

.fretboard-note.is-in-scale:hover {
  transform: translateY(-1px) scale(1.02);
}

.fretboard-note strong,
.fretboard-note small,
.fretboard-note span {
  display: block;
  line-height: 1;
}

.fretboard-note strong {
  font-size: 0.86rem;
}

.fretboard-note small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  margin-top: 0.14rem;
}

.fretboard-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.fretboard-legend span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.75rem;
  font-weight: 680;
  padding: 0.32rem 0.56rem;
}

.fretboard-legend .fretboard-legend-title,
.fretboard-legend span.is-root {
  background: rgba(124, 58, 237, 0.34);
  border-color: rgba(167, 139, 250, 0.44);
  color: white;
}

.fretboard-legend span.is-chord-tone:not(.is-root) {
  background: rgba(20, 184, 166, 0.22);
  border-color: rgba(94, 234, 212, 0.34);
  color: rgba(204, 251, 241, 0.96);
}

.toolbox-migration-panel {
  justify-content: flex-start;
}

.toolbox-floating-body {
  background: #020617;
  margin: 0;
  padding: 1rem;
}

.floating-fretboard-shell {
  min-height: calc(100vh - 2rem) !important;
}

@media (max-width: 980px) {
  .toolbox-host-shell {
    grid-template-columns: 1fr;
  }

  .toolbox-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbox-rail-heading {
    grid-column: 1 / -1;
  }

  .fretboard-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .toolbox-rail,
  .fretboard-controls {
    grid-template-columns: 1fr;
  }

  .fretboard-canvas {
    grid-template-columns: 3rem repeat(var(--fretboard-fret-count), minmax(2.45rem, 1fr));
  }
}

/* P10NR Add Catalog flow: move add decisions out of the cramped toolbar. */
.catalog-add-launch-button {
  align-items: center !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(79, 70, 229, 0.94)) !important;
  border: 1px solid rgba(190, 167, 255, 0.72) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(90, 52, 210, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  gap: 0.55rem !important;
  justify-content: center !important;
  min-height: 2.65rem !important;
  padding: 0.58rem 1rem !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
  white-space: nowrap !important;
}

.catalog-add-launch-button:hover {
  border-color: rgba(216, 202, 255, 0.96) !important;
  box-shadow: 0 18px 46px rgba(105, 65, 230, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-1px) !important;
}

.catalog-add-launch-button span {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  display: inline-grid !important;
  font-size: 1.08rem !important;
  height: 1.85rem !important;
  place-items: center !important;
  width: 1.85rem !important;
}

.catalog-add-flow {
  align-items: center !important;
  display: grid !important;
  inset: 0 !important;
  justify-items: center !important;
  padding: clamp(1rem, 3vw, 2.5rem) !important;
  position: fixed !important;
  z-index: 12000 !important;
}

body:has(.catalog-add-flow) .app-header.header-with-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.catalog-add-flow-scrim {
  background:
    radial-gradient(circle at 48% 18%, rgba(124, 58, 237, 0.20), transparent 34%),
    rgba(1, 7, 19, 0.76) !important;
  border: 0 !important;
  cursor: default !important;
  inset: 0 !important;
  position: absolute !important;
}

.catalog-add-flow-panel.organize-catalog-add-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.26), transparent 38%),
    radial-gradient(circle at 92% 10%, rgba(45, 212, 191, 0.10), transparent 32%),
    linear-gradient(145deg, rgba(13, 24, 43, 0.98), rgba(4, 13, 25, 0.98)) !important;
  border: 1px solid rgba(148, 112, 255, 0.48) !important;
  border-radius: 18px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
  color: #f8fbff !important;
  max-height: calc(100vh - 3rem) !important;
  max-width: min(820px, calc(100vw - 2rem)) !important;
  overflow: auto !important;
  padding: 0 !important;
  position: relative !important;
  width: min(820px, calc(100vw - 2rem)) !important;
}

.catalog-add-flow-header {
  align-items: start !important;
  border-bottom: 1px solid rgba(175, 190, 214, 0.14) !important;
  display: flex !important;
  gap: 1rem !important;
  justify-content: space-between !important;
  padding: 1.1rem 1.15rem 1rem !important;
}

.catalog-add-flow-header h3,
.catalog-add-reference-heading h4 {
  color: #ffffff !important;
  font-size: clamp(1.2rem, 2vw, 1.65rem) !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: #ffffff !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  margin: 0.1rem 0 0.24rem !important;
}

.catalog-add-flow-header p,
.catalog-add-flow-empty span {
  color: rgba(220, 229, 245, 0.72) !important;
  margin: 0 !important;
}

.catalog-add-flow .modal-close-button {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(216, 202, 255, 0.18) !important;
  border-radius: 999px !important;
  color: rgba(226, 232, 240, 0.9) !important;
  display: inline-flex !important;
  height: 2.12rem !important;
  justify-content: center !important;
  min-height: 2.12rem !important;
  min-width: 2.12rem !important;
  padding: 0 !important;
  width: 2.12rem !important;
}

.catalog-add-flow-choices.catalog-add-choice-grid {
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 1rem 1.1rem !important;
}

.catalog-add-flow .catalog-add-choice {
  align-items: start !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.22), transparent 48%),
    linear-gradient(145deg, rgba(16, 30, 54, 0.96), rgba(7, 17, 33, 0.96)) !important;
  border: 1px solid rgba(166, 185, 216, 0.16) !important;
  border-radius: 14px !important;
  color: #eef4ff !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 0.22rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 5.6rem !important;
  padding: 0.85rem !important;
  text-align: left !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.catalog-add-flow .catalog-add-choice:hover,
.catalog-add-flow .catalog-add-choice.is-selected {
  border-color: rgba(174, 132, 255, 0.78) !important;
  box-shadow: 0 18px 42px rgba(74, 33, 168, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-1px) !important;
}

.catalog-add-flow .catalog-add-choice.is-muted {
  cursor: not-allowed !important;
  opacity: 0.54 !important;
}

.catalog-add-flow .catalog-add-choice-icon {
  align-items: center !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(67, 56, 202, 0.82)) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(67, 56, 202, 0.22) !important;
  color: #ffffff !important;
  display: inline-grid !important;
  font-size: 1.02rem !important;
  grid-row: span 2 !important;
  height: 2.45rem !important;
  place-items: center !important;
  width: 2.45rem !important;
}

.catalog-add-flow .catalog-add-choice strong {
  color: #ffffff !important;
  font-size: 0.94rem !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
}

.catalog-add-flow .catalog-add-choice span:not(.catalog-add-choice-icon) {
  color: rgba(211, 222, 240, 0.68) !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

.catalog-add-reference-form {
  border-top: 1px solid rgba(175, 190, 214, 0.13) !important;
  padding: 0.95rem 1.1rem 1.15rem !important;
}

.catalog-add-reference-heading {
  align-items: start !important;
  display: flex !important;
  gap: 1rem !important;
  justify-content: space-between !important;
  margin-bottom: 0.8rem !important;
}

.catalog-add-flow .organize-catalog-add-grid {
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.catalog-add-flow label span,
.catalog-add-section-label {
  color: rgba(191, 203, 224, 0.72) !important;
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.045em !important;
  margin: 0 0 0.28rem !important;
  text-transform: uppercase !important;
}

.catalog-add-flow input,
.catalog-add-flow select,
.catalog-add-flow textarea {
  background: rgba(1, 10, 21, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 11px !important;
  color: #f8fbff !important;
  min-height: 2.55rem !important;
  padding: 0.65rem 0.75rem !important;
  width: 100% !important;
}

.catalog-add-flow textarea {
  min-height: 8rem !important;
  resize: vertical !important;
}

.catalog-resource-intelligence-status {
  color: rgba(209, 222, 236, 0.76) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0.55rem 0 0 !important;
  min-height: 1.05rem !important;
}

.catalog-resource-intelligence-status.is-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
  border-radius: 10px !important;
  color: rgba(255, 235, 190, 0.95) !important;
  padding: 0.45rem 0.6rem !important;
}

.catalog-resource-intelligence-status.is-success {
  color: rgba(160, 245, 231, 0.9) !important;
}

.catalog-youtube-playlist-import {
  align-items: center !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(79, 70, 229, 0.12)) !important;
  border: 1px solid rgba(45, 212, 191, 0.32) !important;
  border-radius: 12px !important;
  color: rgba(241, 255, 252, 0.94) !important;
  display: flex !important;
  gap: 0.8rem !important;
  justify-content: space-between !important;
  margin-top: 0.65rem !important;
  padding: 0.7rem 0.75rem !important;
}

.catalog-youtube-playlist-import[hidden] {
  display: none !important;
}

.organize-catalog-add-panel.has-youtube-playlist-decision [data-catalog-create-entry],
.organize-catalog-add-panel.has-youtube-playlist-decision [data-resource-creator-save-url] {
  display: none !important;
}

.catalog-youtube-playlist-import strong {
  display: block !important;
  font-size: 0.86rem !important;
}

.catalog-youtube-playlist-import p {
  color: rgba(218, 233, 242, 0.78) !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
  margin: 0.12rem 0 0 !important;
}

.catalog-youtube-playlist-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  justify-content: flex-end !important;
}

.catalog-add-flow .speech-input-wrap {
  gap: 0.42rem !important;
}

.catalog-add-flow .speech-mic-button {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.7), transparent 34%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(14, 116, 144, 0.96)) !important;
  border: 1px solid rgba(8, 97, 96, 0.42) !important;
  box-shadow:
    0 8px 18px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  color: #f7fffb !important;
  height: 2.08rem !important;
  min-height: 2.08rem !important;
  min-width: 2.08rem !important;
  width: 2.08rem !important;
}

.catalog-add-flow .speech-mic-button:hover,
.catalog-add-flow .speech-mic-button:focus-visible {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, rgba(45, 212, 191, 0.98), rgba(8, 145, 178, 0.98)) !important;
  border-color: rgba(15, 118, 110, 0.62) !important;
  color: #ffffff !important;
  outline: 2px solid rgba(20, 184, 166, 0.28) !important;
  outline-offset: 2px !important;
}

.catalog-add-flow .speech-mic-icon {
  height: 1rem !important;
  width: 1rem !important;
}

.catalog-add-flow .organize-catalog-body-field {
  display: block !important;
  margin-top: 0.76rem !important;
}

.catalog-add-flow-actions {
  align-items: center !important;
  display: flex !important;
  gap: 0.65rem !important;
  justify-content: flex-end !important;
  margin-top: 0.85rem !important;
}

.catalog-add-flow-actions .secondary-button {
  background: rgba(15, 23, 42, 0.68) !important;
  border: 1px solid rgba(216, 202, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  color: rgba(234, 241, 252, 0.88) !important;
  min-height: 2.42rem !important;
  padding: 0.55rem 1rem !important;
}

.catalog-add-flow-actions .importzone-primary-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.94), rgba(14, 165, 233, 0.58)) !important;
  border-color: rgba(216, 202, 255, 0.3) !important;
  color: #ffffff !important;
}

.catalog-add-flow-actions button:disabled {
  background: rgba(30, 41, 59, 0.48) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.54) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.catalog-add-flow-empty {
  background:
    radial-gradient(circle at 10% 10%, rgba(45, 212, 191, 0.10), transparent 44%),
    rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(175, 190, 214, 0.10) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 0.25rem !important;
  margin: 0 1.1rem 1.1rem !important;
  padding: 0.9rem !important;
}

.catalog-add-flow-empty strong {
  color: #f8fbff !important;
  font-size: 0.96rem !important;
}

.catalog-quick-add-toolbox {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.11), transparent 12rem),
    linear-gradient(145deg, rgba(11, 23, 42, 0.82), rgba(5, 13, 27, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 0.65rem;
  padding: 0.82rem;
}

.catalog-quick-add-heading {
  align-items: center;
  display: flex;
  gap: 0.72rem;
  justify-content: space-between;
}

.catalog-quick-add-heading > span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.catalog-quick-add-heading strong {
  color: rgba(248, 251, 255, 0.96);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.catalog-quick-add-heading span span {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.76rem;
  line-height: 1.25;
}

.catalog-quick-add-help {
  align-items: center;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 950;
  height: 1.82rem;
  justify-content: center;
  line-height: 1;
  min-height: 1.82rem;
  min-width: 1.82rem;
  padding: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  width: 1.82rem;
}

.catalog-quick-add-help:hover,
.catalog-quick-add-help:focus-visible {
  border-color: rgba(94, 234, 212, 0.48);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
  color: #f8fafc;
  transform: translateY(-1px);
}

.catalog-quick-add-grid {
  display: grid;
  gap: 0.48rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-quick-add-grid button {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.14), transparent 4rem),
    rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  color: rgba(241, 245, 249, 0.94);
  cursor: pointer;
  display: flex;
  gap: 0.46rem;
  justify-content: flex-start;
  min-height: 2.35rem;
  min-width: 0;
  padding: 0.42rem 0.52rem;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.catalog-quick-add-grid button:hover,
.catalog-quick-add-grid button:focus-visible {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 4rem),
    rgba(15, 23, 42, 0.82);
  border-color: rgba(94, 234, 212, 0.38);
  box-shadow: 0 12px 26px rgba(2, 8, 23, 0.28);
  transform: translateY(-1px);
}

.catalog-quick-add-icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(14, 165, 233, 0.64));
  border-radius: 10px;
  color: #fff;
  display: inline-grid;
  flex: 0 0 auto;
  height: 1.6rem;
  place-items: center;
  width: 1.6rem;
}

.catalog-quick-add-icon svg {
  display: block;
  fill: none;
  height: 1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 1rem;
}

.catalog-quick-add-grid button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-quick-add-help-modal {
  display: grid;
  gap: 0.85rem;
}

.catalog-quick-add-help-list {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-quick-add-help-list article {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 0.18rem;
  padding: 0.64rem 0.7rem;
}

.catalog-quick-add-help-list strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.88rem;
  line-height: 1.18;
}

.catalog-quick-add-help-list p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
}

.catalog-quick-add-learn-more {
  justify-self: start;
}

.importzone-return-button {
  justify-self: end !important;
  white-space: nowrap !important;
}

.importzone-screen {
  gap: 0.9rem !important;
}

.importzone-shell {
  display: grid !important;
  gap: 0.9rem !important;
}

.importzone-screen[data-importzone-stage="intake"] .importzone-preview-panel,
.importzone-screen[data-importzone-stage="intake"] .importzone-actions-panel,
.importzone-screen[data-importzone-stage="intake"] .importzone-bottom-bar,
.importzone-screen[data-importzone-stage="review"] .importzone-input-panel,
.importzone-screen[data-importzone-stage="review"] .importzone-actions-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-input-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-preview-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-bottom-bar {
  display: none !important;
}

.importzone-screen[data-importzone-stage="review"] .importzone-bottom-bar {
  display: flex !important;
}

.importzone-input-panel,
.importzone-preview-panel,
.importzone-actions-panel,
.importzone-bottom-bar {
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 36%),
    rgba(7, 17, 32, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 18px !important;
  padding: 0.95rem !important;
}

.importzone-header.section-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(45, 212, 191, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(12, 25, 43, 0.86), rgba(5, 14, 27, 0.86)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  gap: 0.85rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0.85rem 1rem !important;
}

.importzone-header .screen-title {
  font-size: clamp(1.45rem, 2.3vw, 2.15rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
}

.importzone-header .section-note {
  font-size: 0.94rem !important;
  margin-top: 0.22rem !important;
  max-width: 44rem !important;
}

.importzone-header .importzone-logo-mark {
  height: 2.4rem !important;
  width: 2.4rem !important;
}

.importzone-stepper {
  align-items: center !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-left: auto !important;
}

.importzone-stepper span {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(219, 229, 245, 0.70) !important;
  display: inline-flex !important;
  font-size: 0.78rem !important;
  gap: 0.34rem !important;
  min-height: 2rem !important;
  padding: 0.3rem 0.62rem !important;
}

.importzone-stepper span.is-active {
  background: rgba(45, 212, 191, 0.14) !important;
  border-color: rgba(45, 212, 191, 0.38) !important;
  color: #eaffff !important;
}

.importzone-stepper strong {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  height: 1.22rem !important;
  place-items: center !important;
  width: 1.22rem !important;
}

.importzone-panel-heading {
  align-items: start !important;
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: space-between !important;
  margin-bottom: 0.75rem !important;
}

.importzone-help-button {
  flex: 0 0 auto !important;
  min-height: 2.15rem !important;
  padding: 0.36rem 0.68rem !important;
}

.importzone-panel-heading h3 {
  font-size: 1.08rem !important;
  letter-spacing: 0 !important;
  margin: 0.1rem 0 0.25rem !important;
}

.importzone-panel-heading p:not(.eyebrow) {
  color: rgba(218, 228, 245, 0.70) !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.importzone-unified-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  justify-content: space-between !important;
  margin-bottom: 0.75rem !important;
}

.importzone-drop-pad,
.importzone-detection-card,
.importzone-detected-text-card,
.importzone-pdf-preview-card,
.importzone-url-promotion-panel,
.importzone-preview-list,
.importzone-content-summary,
.importzone-simple-url-suggestion,
.importzone-advanced-link-handling {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 16px !important;
  padding: 0.8rem !important;
}

.importzone-drop-pad {
  display: grid !important;
  gap: 0.42rem !important;
}

.importzone-detection-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 40%),
    rgba(7, 17, 32, 0.82) !important;
  border-color: rgba(45, 212, 191, 0.22) !important;
  display: grid !important;
  gap: 0.78rem !important;
  margin-bottom: 0.75rem !important;
}

.importzone-empty-examples {
  display: grid !important;
  gap: 0.5rem !important;
}

.importzone-empty-examples strong {
  color: rgba(248, 251, 255, 0.96) !important;
  font-size: 0.92rem !important;
}

.importzone-empty-examples ul {
  color: rgba(203, 213, 225, 0.76) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.38rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.importzone-empty-examples li {
  background: rgba(15, 23, 42, 0.54) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  padding: 0.28rem 0.52rem !important;
}

.importzone-detection-head {
  align-items: start !important;
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: space-between !important;
}

.importzone-detection-kicker,
.importzone-detection-grid span {
  color: rgba(153, 246, 228, 0.72) !important;
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.importzone-detection-head h4 {
  color: #f8fbff !important;
  font-size: 1.28rem !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  margin: 0.1rem 0 0 !important;
}

.importzone-detection-pill {
  background: rgba(45, 212, 191, 0.14) !important;
  border: 1px solid rgba(45, 212, 191, 0.32) !important;
  border-radius: 999px !important;
  color: rgba(236, 253, 245, 0.96) !important;
  flex: 0 0 auto !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  padding: 0.3rem 0.58rem !important;
}

.importzone-detection-grid {
  display: grid !important;
  gap: 0.6rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.importzone-detection-grid > div {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(148, 163, 184, 0.11) !important;
  border-radius: 12px !important;
  min-width: 0 !important;
  padding: 0.58rem 0.65rem !important;
}

.importzone-detection-grid strong {
  color: #f8fbff !important;
  display: block !important;
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  margin-top: 0.18rem !important;
  overflow-wrap: anywhere !important;
}

.importzone-detection-instructions {
  grid-column: 1 / -1 !important;
}

.importzone-detection-instructions ul,
.importzone-detection-list {
  display: grid !important;
  gap: 0.28rem !important;
  margin: 0.4rem 0 0 !important;
  padding: 0 !important;
}

.importzone-detection-instructions li,
.importzone-detection-list li {
  color: rgba(226, 236, 250, 0.86) !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
  list-style: none !important;
}

.importzone-detection-instructions li {
  padding-left: 0.85rem !important;
  position: relative !important;
}

.importzone-detection-instructions li::before {
  background: rgba(94, 234, 212, 0.74) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 0.28rem !important;
  left: 0.05rem !important;
  position: absolute !important;
  top: 0.48rem !important;
  width: 0.28rem !important;
}

.importzone-detection-muted,
.importzone-detection-note {
  color: rgba(207, 219, 239, 0.70) !important;
  font-size: 0.84rem !important;
  line-height: 1.42 !important;
  margin: 0 !important;
}

.importzone-detection-why {
  background: rgba(45, 212, 191, 0.07) !important;
  border: 1px solid rgba(45, 212, 191, 0.16) !important;
  border-radius: 12px !important;
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
  margin: 0 !important;
  padding: 0.55rem 0.65rem !important;
}

.importzone-detection-why strong {
  color: rgba(153, 246, 228, 0.92) !important;
}

.importzone-detection-list li {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.032) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  border-radius: 10px !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding: 0.48rem 0.58rem !important;
}

.importzone-detection-list li > span {
  align-items: center !important;
  background: rgba(99, 102, 241, 0.22) !important;
  border: 1px solid rgba(167, 139, 250, 0.26) !important;
  border-radius: 999px !important;
  color: #f8fbff !important;
  display: inline-grid !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  height: 1.45rem !important;
  place-items: center !important;
  width: 1.45rem !important;
}

.importzone-detection-list strong {
  color: #f8fbff !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.importzone-detection-list em {
  color: rgba(207, 219, 239, 0.68) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.importzone-detection-list .importzone-detection-more {
  color: rgba(207, 219, 239, 0.72) !important;
  display: block !important;
  font-weight: 750 !important;
  padding: 0.48rem 0.58rem !important;
}

.importzone-detection-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.52rem !important;
}

.importzone-detection-warnings,
.importzone-preview-detection-context {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
}

.importzone-detection-warnings span,
.importzone-preview-detection-context span {
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
  border-radius: 999px !important;
  color: rgba(253, 230, 138, 0.92) !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
  padding: 0.28rem 0.55rem !important;
}

.importzone-preview-detection-context {
  grid-column: 1 / -1 !important;
}

.importzone-preview-detection-context span {
  background: rgba(45, 212, 191, 0.08) !important;
  border-color: rgba(45, 212, 191, 0.18) !important;
  color: rgba(204, 251, 241, 0.86) !important;
}

.importzone-preview-detection-context strong {
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: 0.68rem !important;
  margin-right: 0.35rem !important;
  text-transform: uppercase !important;
}

.importzone-detected-text-card {
  background: rgba(255, 255, 255, 0.018) !important;
  border-color: rgba(148, 163, 184, 0.10) !important;
  margin-bottom: 0.75rem !important;
}

.importzone-detected-text-card pre {
  color: rgba(216, 226, 242, 0.76) !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
  margin: 0.45rem 0 0 !important;
  max-height: 14rem !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
}

.importzone-drop-pad.is-file-drag-over {
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.18), transparent 58%),
    rgba(45, 212, 191, 0.055) !important;
  border-color: rgba(45, 212, 191, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.18), 0 18px 42px rgba(13, 148, 136, 0.18) !important;
}

.importzone-textarea {
  min-height: 15rem !important;
}

.importzone-pdf-preview-card {
  display: grid !important;
  gap: 0.7rem !important;
  margin-top: 0.75rem !important;
}

.importzone-pdf-preview-card[hidden] {
  display: none !important;
}

.importzone-pdf-preview-card iframe {
  background: rgba(2, 8, 17, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 12px !important;
  min-height: 22rem !important;
  width: 100% !important;
}

.importzone-pdf-preview-card p {
  color: rgba(207, 219, 239, 0.68) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

.importzone-support-note {
  margin-top: 0.7rem !important;
}

.importzone-support-note {
  color: rgba(207, 219, 239, 0.66) !important;
}

.importzone-content-summary {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  margin-bottom: 0.75rem !important;
}

.importzone-content-summary strong {
  color: #f8fbff !important;
}

.importzone-content-summary span,
.importzone-simple-url-suggestion small {
  color: rgba(207, 219, 239, 0.68) !important;
  font-size: 0.78rem !important;
}

.importzone-simple-url-suggestion {
  border-color: rgba(245, 158, 11, 0.28) !important;
  margin-bottom: 0.75rem !important;
}

.importzone-save-primary-heading {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.importzone-save-subheading {
  align-items: baseline !important;
  border-top: 1px solid rgba(148, 163, 184, 0.13) !important;
  display: flex !important;
  gap: 0.5rem !important;
  margin-top: 0.8rem !important;
  padding-top: 0.78rem !important;
}

.importzone-save-subheading strong {
  color: #f8fbff !important;
  font-size: 0.9rem !important;
}

.importzone-save-subheading span {
  color: rgba(207, 219, 239, 0.62) !important;
  font-size: 0.78rem !important;
}

.importzone-destination-panel {
  display: grid !important;
  gap: 0.68rem !important;
  margin-top: 0.85rem !important;
}

.importzone-destination-card {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 0.8rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 0.78rem !important;
}

.importzone-destination-card.is-primary,
.importzone-destination-card.is-recommended {
  border-color: rgba(45, 212, 191, 0.34) !important;
}

.importzone-destination-card strong {
  color: #f8fbff !important;
  font-size: 0.94rem !important;
}

.importzone-destination-card p {
  color: rgba(216, 226, 242, 0.68) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0.2rem 0 0 !important;
}

.importzone-practice-type-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
    rgba(3, 10, 22, 0.62) !important;
  border: 1px solid rgba(45, 212, 191, 0.2) !important;
  border-radius: 16px !important;
  display: grid !important;
  gap: 0.78rem !important;
  margin-top: 0.8rem !important;
  padding: 0.85rem !important;
}

.importzone-practice-type-panel[hidden] {
  display: none !important;
}

.importzone-practice-type-heading {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.importzone-practice-type-grid {
  display: grid !important;
  gap: 0.62rem !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.importzone-practice-type-grid button {
  background:
    linear-gradient(145deg, rgba(10, 31, 55, 0.74), rgba(4, 13, 25, 0.88)) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 13px !important;
  color: rgba(238, 245, 255, 0.94) !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 0.28rem !important;
  min-height: 6rem !important;
  padding: 0.72rem !important;
  text-align: left !important;
}

.importzone-practice-type-grid button:hover,
.importzone-practice-type-grid button:focus-visible {
  border-color: rgba(45, 212, 191, 0.44) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.14), 0 16px 34px rgba(13, 148, 136, 0.12) !important;
  outline: 0 !important;
}

.importzone-practice-type-grid button strong {
  color: #f8fbff !important;
  font-size: 0.9rem !important;
}

.importzone-practice-type-grid button span {
  color: rgba(207, 219, 239, 0.68) !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
}

.importzone-catalog-fields {
  display: grid !important;
  gap: 0.65rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 0.65rem !important;
}

.importzone-catalog-fields label {
  display: grid !important;
  gap: 0.25rem !important;
}

.importzone-catalog-fields label span {
  color: rgba(207, 219, 239, 0.72) !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
}

.importzone-advanced-link-handling {
  margin-top: 0.85rem !important;
}

.importzone-advanced-link-handling summary {
  align-items: baseline !important;
  cursor: pointer !important;
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: space-between !important;
  list-style: none !important;
}

.importzone-advanced-link-handling summary::-webkit-details-marker {
  display: none !important;
}

.importzone-advanced-link-handling summary span {
  color: #f8fbff !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}

.importzone-advanced-link-handling summary small {
  color: rgba(207, 219, 239, 0.62) !important;
}

.importzone-url-mode-grid {
  display: grid !important;
  gap: 0.52rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 0.72rem !important;
}

.importzone-url-mode-grid label {
  align-items: start !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 13px !important;
  display: grid !important;
  gap: 0.48rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: 0.65rem !important;
}

.importzone-url-mode-grid label span {
  display: grid !important;
  gap: 0.12rem !important;
}

.importzone-url-mode-grid label small {
  color: rgba(207, 219, 239, 0.62) !important;
  font-size: 0.72rem !important;
}

.importzone-save-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.85rem !important;
}

.importzone-bottom-bar {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  justify-content: space-between !important;
}

.importzone-screen[data-importzone-stage="intake"] .importzone-preview-panel,
.importzone-screen[data-importzone-stage="intake"] .importzone-actions-panel,
.importzone-screen[data-importzone-stage="intake"] .importzone-bottom-bar,
.importzone-screen[data-importzone-stage="review"] .importzone-input-panel,
.importzone-screen[data-importzone-stage="review"] .importzone-actions-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-input-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-preview-panel,
.importzone-screen[data-importzone-stage="save"] .importzone-bottom-bar {
  display: none !important;
}

.importzone-screen[data-importzone-stage="review"] .importzone-bottom-bar {
  display: flex !important;
}

@media (max-width: 760px) {
  .importzone-detection-grid,
  .importzone-catalog-fields,
  .importzone-url-mode-grid,
  .importzone-destination-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .importzone-detection-head,
  .importzone-detection-actions {
    align-items: stretch !important;
  }

  .importzone-detection-head {
    flex-direction: column !important;
  }

  .importzone-detection-list li {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .importzone-detection-list em {
    grid-column: 2 !important;
    white-space: normal !important;
  }
}

@media (max-width: 760px) {
  .catalog-add-flow {
    align-items: stretch !important;
    padding: 0.65rem !important;
  }

  .catalog-add-flow-panel.organize-catalog-add-panel {
    max-height: calc(100vh - 1.3rem) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .catalog-add-flow-choices.catalog-add-choice-grid,
  .catalog-add-flow .organize-catalog-add-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Library detail cleanup: keep instruction, goals, references, and secondary metadata distinct. */
.catalog-record-details {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.10), transparent 38%),
    rgba(7, 17, 32, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 14px !important;
  margin-top: 0.9rem !important;
  padding: 0 !important;
}

.catalog-record-details summary {
  align-items: center !important;
  color: #f8fbff !important;
  cursor: pointer !important;
  display: flex !important;
  gap: 0.65rem !important;
  justify-content: space-between !important;
  list-style: none !important;
  padding: 0.82rem 0.95rem !important;
}

.catalog-record-details summary::-webkit-details-marker {
  display: none !important;
}

.catalog-record-details summary::after {
  color: rgba(199, 210, 254, 0.76) !important;
  content: "Show" !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.catalog-record-details[open] summary::after {
  content: "Hide" !important;
}

.catalog-record-details summary span {
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.catalog-record-details summary small {
  color: rgba(203, 213, 225, 0.68) !important;
  flex: 1 !important;
  font-size: 0.78rem !important;
  min-width: 0 !important;
}

.catalog-record-details .catalog-record-settings-list {
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0.85rem 0.95rem 0.95rem !important;
}

.catalog-record-details .catalog-record-settings-list > div {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  border-radius: 10px !important;
  padding: 0.58rem 0.65rem !important;
}

.catalog-record-details dt {
  color: rgba(186, 199, 220, 0.72) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  margin: 0 0 0.22rem !important;
  text-transform: uppercase !important;
}

.catalog-record-details dd {
  color: #f7fbff !important;
  font-size: 0.86rem !important;
  font-weight: 650 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

.catalog-linked-goals-section,
.catalog-goal-linked-items-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 40%),
    rgba(5, 16, 30, 0.70) !important;
  border: 1px solid rgba(94, 234, 212, 0.13) !important;
  border-radius: 14px !important;
  margin-top: 0.9rem !important;
  padding: 0.9rem !important;
}

.catalog-linked-goals-section p {
  color: rgba(203, 213, 225, 0.72) !important;
  margin: 0.65rem 0 0 !important;
}

.catalog-linked-goal-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-top: 0.7rem !important;
}

.catalog-linked-goal-list span {
  background: rgba(20, 184, 166, 0.12) !important;
  border: 1px solid rgba(94, 234, 212, 0.22) !important;
  border-radius: 999px !important;
  color: #dffcf7 !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  padding: 0.38rem 0.62rem !important;
}

.catalog-linked-item-list {
  display: grid !important;
  gap: 0.55rem !important;
  margin-top: 0.7rem !important;
}

.catalog-linked-item-list article {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.65rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: 0.62rem !important;
}

.catalog-linked-item-icon {
  height: 2.25rem !important;
  width: 2.25rem !important;
}

.catalog-linked-item-list strong {
  color: #ffffff !important;
  display: block !important;
  font-size: 0.9rem !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}

.catalog-linked-item-list small {
  color: rgba(203, 213, 225, 0.68) !important;
  display: block !important;
  font-size: 0.76rem !important;
  margin-top: 0.12rem !important;
}

@media (max-width: 760px) {
  .catalog-record-details .catalog-record-settings-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .catalog-record-details summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* P10JV Goals workspace modernization: dark premium goals surface with optional inspector absent by default. */
body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) {
  background:
    radial-gradient(circle at 82% 4%, rgba(60, 128, 255, 0.2), transparent 32%),
    linear-gradient(145deg, #06101f 0%, #071829 45%, #07101e 100%) !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace {
  border-color: rgba(75, 137, 227, 0.2) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(53, 128, 229, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(6, 16, 31, 0.98), rgba(5, 13, 25, 0.97)) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
  grid-template-columns: minmax(12.5rem, 0.24fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace:not(.is-inspector-hidden) {
  grid-template-columns: minmax(12.5rem, 0.24fr) minmax(0, 1fr) minmax(15rem, 0.28fr) !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav {
  background:
    linear-gradient(180deg, rgba(8, 24, 42, 0.94), rgba(4, 13, 25, 0.96)) !important;
  border: 0 !important;
  border-right: 1px solid rgba(91, 141, 198, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0.45rem;
  min-height: 100%;
  padding: 2rem 0.9rem 1.1rem !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-label {
  color: rgba(213, 225, 242, 0.78) !important;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin: 0 0 1rem 0.15rem;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item {
  border-radius: 8px !important;
  color: rgba(224, 234, 248, 0.86) !important;
  font-size: 0.95rem;
  font-weight: 560;
  min-height: 2.8rem;
  padding: 0.66rem 0.8rem !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item:hover {
  background: rgba(55, 119, 202, 0.18) !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item.is-selected {
  background:
    linear-gradient(135deg, rgba(36, 132, 255, 0.34), rgba(44, 105, 179, 0.28)) !important;
  box-shadow: inset 3px 0 0 #2f8dff, 0 16px 34px rgba(19, 91, 192, 0.22) !important;
  color: #f8fbff !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-main {
  min-height: min(68rem, calc(100vh - 8rem));
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-content {
  display: block !important;
  min-height: 100%;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-goal-browser-panel {
  display: none !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-context-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 100%;
  padding: 0 !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-context-header {
  display: none !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-relationship-preview {
  gap: 0 !important;
  min-height: 100%;
}

.organize-goals-modern-workspace {
  color: #eef5ff;
  display: grid;
  min-height: 100%;
}

.organize-goals-hero {
  align-items: start;
  background:
    linear-gradient(90deg, rgba(5, 14, 27, 0.95) 0%, rgba(5, 14, 27, 0.66) 34%, rgba(5, 14, 27, 0.22) 70%),
    linear-gradient(180deg, rgba(5, 14, 27, 0.18), rgba(5, 14, 27, 0.8)),
    url("assets/organize/goals-mountain-hero.png") center / cover no-repeat;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: clamp(14rem, 28vw, 19rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.35rem, 4vw, 3.25rem) 1.45rem;
}

.organize-goals-hero-copy {
  max-width: 36rem;
}

.organize-goals-hero h2 {
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0 0 1rem;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

.organize-goals-hero-kicker,
.organize-goals-hero-support {
  color: rgba(242, 247, 255, 0.93) !important;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.45;
  margin: 0 !important;
}

.organize-goals-hero-kicker::after {
  background: #2f8dff;
  content: "";
  display: block;
  height: 2px;
  margin: 0.75rem 0;
  width: 2.9rem;
}

.organize-goals-new-action {
  align-items: center;
  appearance: none;
  background: linear-gradient(135deg, #1f8cff, #1265d8);
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(18, 101, 216, 0.34);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  font-weight: 680;
  gap: 0.65rem;
  justify-self: end;
  min-height: 2.9rem;
  padding: 0.75rem 1.15rem;
  white-space: nowrap;
}

.organize-goals-new-action span {
  font-size: 1.45rem;
  font-weight: 320;
  line-height: 1;
}

.organize-goals-list-panel {
  background:
    radial-gradient(circle at 86% 12%, rgba(47, 141, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(6, 18, 33, 0.98), rgba(5, 13, 25, 0.99));
  border: 1px solid rgba(97, 147, 210, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
  display: grid;
  gap: 0.62rem;
  margin: -0.7rem clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.organize-goals-list-header {
  align-items: center;
  border-bottom: 1px solid rgba(111, 156, 211, 0.2);
  color: rgba(240, 247, 255, 0.96);
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0.2rem 0.82rem;
}

.organize-goals-list-header strong {
  font-size: 1rem;
  font-weight: 680;
}

.organize-goals-modern-list {
  display: grid;
  gap: 0.55rem;
}

.organize-goal-modern-row {
  --goal-accent: #2f8dff;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(10, 28, 48, 0.92), rgba(6, 18, 33, 0.86));
  border: 1px solid rgba(112, 160, 218, 0.16);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--goal-accent), 0 14px 28px rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 5.9rem;
  padding: 0.7rem 0.82rem 0.7rem 1rem;
}

.organize-goal-modern-row.is-selected {
  border-color: rgba(127, 184, 255, 0.44);
  box-shadow: inset 3px 0 0 var(--goal-accent), 0 0 0 1px rgba(255,255,255,0.04), 0 18px 36px rgba(0, 0, 0, 0.22);
}

.organize-goal-modern-main {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 1rem;
  grid-template-columns: 4rem minmax(13rem, 0.85fr) minmax(14rem, 1fr);
  min-width: 0;
  padding: 0;
  text-align: left;
}

.organize-goal-modern-identity {
  align-items: center;
  border: 2px solid var(--goal-accent);
  border-radius: 999px;
  color: var(--goal-accent);
  display: inline-flex;
  font-size: 1.45rem;
  font-weight: 760;
  height: 3.4rem;
  justify-content: center;
  width: 3.4rem;
}

.organize-goal-modern-copy,
.organize-goal-modern-links {
  min-width: 0;
}

.organize-goal-modern-copy strong {
  color: #f8fbff;
  display: block;
  font-size: 1.08rem;
  font-weight: 720;
  line-height: 1.2;
  margin-bottom: 0.28rem;
}

.organize-goal-modern-copy small,
.organize-goal-modern-links {
  color: rgba(215, 226, 242, 0.84);
  font-size: 0.92rem;
  line-height: 1.4;
}

.organize-goal-modern-links {
  border-left: 1px solid rgba(124, 165, 218, 0.16);
  padding-left: 1rem;
}

.organize-goal-modern-edit {
  appearance: none;
  background: rgba(47, 141, 255, 0.1);
  border: 1px solid rgba(102, 166, 247, 0.26);
  border-radius: 999px;
  color: rgba(232, 242, 255, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  min-height: 2.1rem;
  padding: 0.42rem 0.75rem;
}

.organize-goal-modern-edit:hover,
.organize-goals-new-action:hover {
  filter: brightness(1.08);
}

.organize-goals-modern-empty {
  border: 1px dashed rgba(134, 174, 224, 0.26);
  border-radius: 8px;
  color: rgba(220, 232, 248, 0.84);
  display: grid;
  gap: 0.3rem;
  padding: 1.2rem;
}

.organize-goals-modern-empty strong {
  color: #f8fbff;
}

.organize-goals-quote {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(12, 34, 58, 0.9), rgba(8, 22, 40, 0.86));
  border: 1px solid rgba(117, 160, 213, 0.18);
  border-radius: 8px;
  color: rgba(238, 245, 255, 0.94);
  display: flex;
  gap: 0.85rem;
  margin-top: 0.35rem;
  min-height: 4.4rem;
  padding: 1rem 1.15rem;
}

.organize-goals-quote span {
  color: #2f8dff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.8rem;
  line-height: 0.7;
}

.organize-goals-quote p {
  color: rgba(248, 251, 255, 0.94) !important;
  font-size: 1.05rem;
  font-style: italic;
  margin: 0 !important;
}

@media (max-width: 920px) {
  body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace,
  body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace:not(.is-inspector-hidden) {
    grid-template-columns: 1fr !important;
  }

  body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav {
    border-bottom: 1px solid rgba(91, 141, 198, 0.18) !important;
    border-right: 0 !important;
    min-height: 0;
  }

  .organize-goals-hero {
    grid-template-columns: 1fr;
  }

  .organize-goals-new-action {
    justify-self: start;
  }

  .organize-goal-modern-main {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .organize-goal-modern-links {
    border-left: 0;
    grid-column: 2;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .organize-goals-list-panel {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    padding: 0.72rem;
  }

  .organize-goal-modern-row {
    grid-template-columns: 1fr;
  }

  .organize-goal-modern-edit {
    justify-self: start;
  }
}

/* P10FK band height correction: keep the tool strip compact instead of letting timer/metronome dominate. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    height: 10.35rem !important;
    max-height: 10.35rem !important;
    min-height: 10.35rem !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    display: grid !important;
    gap: 0.22rem !important;
    grid-template-rows: auto auto auto !important;
    height: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-left,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-middle,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.38rem, 1.5vw, 1.62rem) !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.14rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    font-size: 0.62rem !important;
    min-height: 1.34rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    font-size: 0.68rem !important;
    min-height: 1.55rem !important;
    padding-block: 0.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-auto-row,
  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-timer-auto-row {
    font-size: 0.66rem !important;
    min-height: 1.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.24rem !important;
    height: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title {
    font-size: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker {
    font-size: 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    min-height: 1.72rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input {
    font-size: 1.28rem !important;
    height: 1.62rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto {
    font-size: 0.66rem !important;
    min-height: 1.66rem !important;
    padding-block: 0.08rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    font-size: 0.66rem !important;
    min-height: 1.55rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed,
  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1.42rem !important;
    min-height: 2.2rem !important;
  }
}

/* P10FK band height correction: keep the tool strip compact instead of letting timer/metronome dominate. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    height: 10.35rem !important;
    max-height: 10.35rem !important;
    min-height: 10.35rem !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    display: grid !important;
    gap: 0.22rem !important;
    grid-template-rows: auto auto auto !important;
    height: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-left,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-middle,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.38rem, 1.5vw, 1.62rem) !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.14rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    font-size: 0.62rem !important;
    min-height: 1.34rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    font-size: 0.68rem !important;
    min-height: 1.55rem !important;
    padding-block: 0.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-auto-row,
  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-timer-auto-row {
    font-size: 0.66rem !important;
    min-height: 1.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.24rem !important;
    height: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title {
    font-size: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker {
    font-size: 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    min-height: 1.72rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input {
    font-size: 1.28rem !important;
    height: 1.62rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto {
    font-size: 0.66rem !important;
    min-height: 1.66rem !important;
    padding-block: 0.08rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    gap: 0.24rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    font-size: 0.66rem !important;
    min-height: 1.55rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed,
  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1.42rem !important;
    min-height: 2.2rem !important;
  }
}

/* P10FK workspace rhythm: tighter active band, calmer rail, simpler inline metronome. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    gap: 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions {
    margin-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: -0.18rem !important;
    padding: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    box-sizing: border-box !important;
    min-height: 9.2rem !important;
    padding: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel.quick-record-panel,
  body[data-current-screen="dashboard"] .current-item-references-box {
    min-height: 9.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.55rem, 1.7vw, 1.9rem) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    font-size: 0.66rem !important;
    min-height: 1.48rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    min-height: 1.78rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed,
  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1.22rem !important;
    min-height: 2.1rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-primary-row {
    gap: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card {
    min-height: 9.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.32rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
    gap: 0.3rem !important;
    grid-template-areas:
      "title auto"
      "bpm tap" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region {
    grid-area: title !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region {
    grid-area: bpm !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap {
    grid-area: tap !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto {
    grid-area: auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    grid-template-columns: 1.55rem minmax(2.5rem, 1fr) 1.55rem !important;
    min-height: 1.92rem !important;
    padding: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input {
    font-size: clamp(1.25rem, 1.55vw, 1.65rem) !important;
    height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button {
    min-height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport {
    grid-template-columns: 1fr !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-link,
  body[data-current-screen="dashboard"] #p10exMetroNoteCell {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-cell {
    padding: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-pattern::before {
    color: rgba(232, 237, 250, 0.38) !important;
    content: "Feel" !important;
    display: block !important;
    font-size: 0.58rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.18rem !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    min-height: 1.82rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    align-items: center !important;
    display: flex !important;
    font-size: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    background:
      radial-gradient(circle at 18% 18%, rgba(167, 139, 250, 0.22), transparent 52%),
      radial-gradient(circle at 92% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important;
    border-color: rgba(221, 230, 247, 0.062) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 20px 48px rgba(0, 0, 0, 0.12) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week {
    background:
      radial-gradient(circle at 18% 30%, rgba(74, 222, 128, 0.20), transparent 54%),
      radial-gradient(circle at 95% 0%, rgba(34, 211, 238, 0.07), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips > .p10ex-help-anchor {
    cursor: help !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::after {
    content: attr(data-help) !important;
    left: calc(100% + 0.55rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 1181px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* P10FJ refinement: compact action row, ambient rail widgets, passive help mode. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    display: grid !important;
    gap: 0.5rem !important;
    grid-template-columns: minmax(9.5rem, 1.18fr) repeat(4, minmax(7.25rem, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    align-items: center !important;
    border-radius: 12px !important;
    gap: 0.48rem !important;
    min-height: 4.05rem !important;
    padding: 0.62rem 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-icon {
    font-size: 1rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy strong {
    font-size: 0.92rem !important;
    line-height: 1.05 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy small {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0.72rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    align-items: center !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(139, 92, 246, 0.11), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.018)) !important;
    border: 1px solid rgba(221, 230, 247, 0.055) !important;
    border-radius: 13px !important;
    display: grid !important;
    gap: 0.62rem !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 4.75rem !important;
    padding: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-icon {
    align-items: center !important;
    background: rgba(139, 92, 246, 0.16) !important;
    border-radius: 999px !important;
    color: rgba(196, 181, 253, 0.95) !important;
    display: inline-flex !important;
    font-size: 1rem !important;
    height: 2.15rem !important;
    justify-content: center !important;
    width: 2.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy {
    display: grid !important;
    gap: 0.1rem !important;
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy small {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.64rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy strong {
    color: rgba(250, 252, 255, 0.84) !important;
    font-size: 0.9rem !important;
    font-weight: 590 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy em {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
    line-height: 1.3 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-ring {
    --practice-rail-percent: 8%;
    align-items: center !important;
    background:
      conic-gradient(from 210deg, rgba(74, 222, 128, 0.92) var(--practice-rail-percent), rgba(255, 255, 255, 0.08) 0),
      rgba(255, 255, 255, 0.025) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    height: 3rem !important;
    justify-content: center !important;
    position: relative !important;
    width: 3rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-ring::after {
    background: #09101d !important;
    border-radius: inherit !important;
    content: "" !important;
    inset: 0.38rem !important;
    position: absolute !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-ring-core {
    color: rgba(250, 252, 255, 0.86) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    justify-self: stretch !important;
  }

  body[data-current-screen="dashboard"] .practice-help-toggle {
    align-items: center !important;
    background: rgba(139, 92, 246, 0.10) !important;
    border: 1px solid rgba(167, 139, 250, 0.34) !important;
    border-radius: 999px !important;
    color: rgba(216, 201, 255, 0.92) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    font: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    gap: 0.48rem !important;
    justify-content: center !important;
    min-height: 2.25rem !important;
    padding: 0.4rem 0.78rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-help-toggle span {
    align-items: center !important;
    border: 1px solid rgba(216, 201, 255, 0.46) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    font-size: 0.72rem !important;
    height: 1.1rem !important;
    justify-content: center !important;
    width: 1.1rem !important;
  }

  body.practice-help-mode [data-help] {
    position: relative !important;
  }

  body.practice-help-mode [data-help]::after {
    background: rgba(11, 17, 31, 0.92) !important;
    border: 1px solid rgba(167, 139, 250, 0.30) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 0 24px rgba(139, 92, 246, 0.12) !important;
    color: rgba(238, 242, 255, 0.88) !important;
    content: attr(data-help) !important;
    font-size: 0.68rem !important;
    font-weight: 530 !important;
    left: 0 !important;
    line-height: 1.25 !important;
    max-width: 15rem !important;
    opacity: 1 !important;
    padding: 0.42rem 0.62rem !important;
    pointer-events: none !important;
    position: absolute !important;
    top: calc(100% + 0.42rem) !important;
    transform: translateY(0) !important;
    white-space: normal !important;
    width: max-content !important;
    z-index: 30 !important;
  }

  body.practice-help-mode .practice-rail-progress[data-help]::after,
  body.practice-help-mode .practice-rail-mini[data-help]::after {
    left: 0.25rem !important;
    top: -2.45rem !important;
  }

  body.practice-help-mode .practice-action-strip #funItemButton[data-help]::after,
  body.practice-help-mode .queue-title-row[data-help]::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p06d-stable-metronome.is-open {
    min-height: 13.6rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    gap: 0.56rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions button {
    min-width: 3.6rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    background: rgba(255, 255, 255, 0.028) !important;
    border-radius: 13px !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    font-size: 1.62rem !important;
    font-weight: 560 !important;
  }
}

@media (min-width: 761px) and (max-width: 1220px) {
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    padding-inline: 0.5rem !important;
  }
}

/* P10FJ workflow ergonomics: left-rail momentum, timer presets, and calmer tool controls. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .app-header.header-with-nav {
    gap: clamp(1.15rem, 1.9vh, 1.65rem) !important;
  }

  body[data-current-screen="dashboard"] .app-nav {
    gap: 0.46rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button {
    min-height: 3.18rem !important;
    padding: 0.72rem 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-label {
    font-size: 0.91rem !important;
    font-weight: 540 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-icon {
    opacity: 0.78 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress {
    background:
      radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.13), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.018)) !important;
    border: 1px solid rgba(221, 230, 247, 0.06) !important;
    border-radius: 14px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 18px 38px rgba(0, 0, 0, 0.10) !important;
    display: grid !important;
    gap: 0.58rem !important;
    margin-top: auto !important;
    padding: 0.88rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-kicker {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-main {
    display: grid !important;
    gap: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-value {
    color: rgba(250, 252, 255, 0.84) !important;
    font-size: 0.94rem !important;
    font-weight: 590 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-detail {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-bar {
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 999px !important;
    height: 0.32rem !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-fill {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.96), rgba(45, 212, 191, 0.74)) !important;
    border-radius: inherit !important;
    display: block !important;
    height: 100% !important;
    min-width: 0.72rem !important;
    transition: width 180ms ease !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.034) !important;
    border: 1px solid rgba(221, 230, 247, 0.07) !important;
    border-radius: 999px !important;
    color: rgba(248, 250, 255, 0.76) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    font-size: 0.76rem !important;
    font-weight: 560 !important;
    justify-content: center !important;
    min-height: 2.1rem !important;
    padding: 0.42rem 0.68rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #editCurrentItemButton .p10eb-action-copy small {
    color: rgba(232, 237, 250, 0.40) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-items: stretch !important;
    grid-template-columns: minmax(12.2rem, 1fr) minmax(13.8rem, 1.06fr) minmax(12.5rem, 1fr) minmax(13rem, 1.05fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card {
    min-height: 12.4rem !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-open-header {
    align-items: start !important;
    gap: 0.58rem !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-tool-button {
    font-size: 0.72rem !important;
    min-height: 1.84rem !important;
    opacity: 0.58 !important;
    padding: 0.25rem 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-body {
    display: grid !important;
    gap: 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard #p03iCountdownMinutes {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin-top: 0.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    background: rgba(255, 255, 255, 0.038) !important;
    border: 1px solid rgba(221, 230, 247, 0.06) !important;
    border-radius: 9px !important;
    color: rgba(248, 250, 255, 0.76) !important;
    font-size: 0.77rem !important;
    font-weight: 560 !important;
    min-height: 2rem !important;
    padding: 0.22rem 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset::after {
    content: "m";
    color: rgba(232, 237, 250, 0.34);
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: 0.08rem;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p06d-stable-metronome.is-open {
    min-height: 12.4rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.58rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title actions"
      "bpm bpm"
      "select select"
      "auto auto" !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-title-region {
    grid-area: title !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions {
    align-items: center !important;
    display: flex !important;
    gap: 0.38rem !important;
    grid-area: actions !important;
    justify-content: flex-end !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions button {
    min-height: 2rem !important;
    padding-inline: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-bpm-region {
    grid-area: bpm !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-header-bpm-field {
    display: grid !important;
    gap: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-header-bpm-field label,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-sound-region label {
    color: rgba(232, 237, 250, 0.35) !important;
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(221, 230, 247, 0.055) !important;
    border-radius: 12px !important;
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: 2rem minmax(3rem, 1fr) 2rem !important;
    padding: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-step {
    border-radius: 9px !important;
    min-height: 2.05rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    background: transparent !important;
    border: 0 !important;
    color: rgba(250, 252, 255, 0.86) !important;
    font-size: 1.38rem !important;
    font-weight: 540 !important;
    height: 2.05rem !important;
    max-width: none !important;
    text-align: center !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-settings-region, .p05t-settings-button, #p03iPatternSelect) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(221, 230, 247, 0.055) !important;
    border-radius: 10px !important;
    color: rgba(248, 250, 255, 0.74) !important;
    font-size: 0.78rem !important;
    min-height: 2.16rem !important;
    padding: 0.44rem 0.52rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03mAutoSound,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03m-metro-auto-row {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.74rem !important;
    grid-area: auto !important;
    justify-content: flex-start !important;
    margin-top: -0.08rem !important;
  }

  body[data-current-screen="dashboard"] .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(ellipse at 8% 0%, rgba(139, 92, 246, 0.038), transparent 36%),
      linear-gradient(145deg, rgba(18, 25, 45, 0.34), rgba(9, 14, 28, 0.42)) !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card textarea::placeholder {
    color: rgba(232, 237, 250, 0.36) !important;
  }
}

/* P10FJ final workflow overrides: keep ergonomic controls dominant after legacy layers. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-rail-progress {
    background:
      radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.13), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.018)) !important;
    border: 1px solid rgba(221, 230, 247, 0.06) !important;
    border-radius: 14px !important;
    display: grid !important;
    gap: 0.58rem !important;
    margin-top: auto !important;
    padding: 0.88rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-kicker {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-value {
    color: rgba(250, 252, 255, 0.84) !important;
    font-size: 0.94rem !important;
    font-weight: 590 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-detail {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-bar {
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 999px !important;
    height: 0.32rem !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-fill {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.96), rgba(45, 212, 191, 0.74)) !important;
    border-radius: inherit !important;
    display: block !important;
    height: 100% !important;
    min-width: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    background: rgba(255, 255, 255, 0.034) !important;
    border: 1px solid rgba(221, 230, 247, 0.07) !important;
    border-radius: 999px !important;
    color: rgba(248, 250, 255, 0.76) !important;
    font-size: 0.76rem !important;
    min-height: 2.1rem !important;
    padding: 0.42rem 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    border-radius: 9px !important;
    font-size: 0.77rem !important;
    min-height: 2rem !important;
    padding: 0.22rem 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.58rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title actions"
      "bpm bpm"
      "select select"
      "auto auto" !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-title-region { grid-area: title !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions { grid-area: actions !important; justify-content: flex-end !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-bpm-region { grid-area: bpm !important; }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: 2rem minmax(3rem, 1fr) 2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    font-size: 1.38rem !important;
    max-width: none !important;
    text-align: center !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-settings-region, .p05t-settings-button, #p03iPatternSelect) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    min-height: 2.16rem !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body) {
    display: grid !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }
}

/* P10FJ final shell correction: the old mode switch is no longer product chrome. */
body .app-header.header-with-nav .header-utility-bar .dashboard-mode-buttons.header-mode-buttons {
  display: none !important;
}

/* P10FJ foundation cleanup: five-item rail, human action, softer momentum/tools. */
@media (min-width: 761px) {
  .app-header.header-with-nav .app-nav-button.setup-nav-button,
  .app-header.header-with-nav .app-nav-button[data-screen="setup"] {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    grid-template-columns: minmax(10rem, 1.25fr) repeat(4, minmax(8.4rem, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #funItemButton {
    background:
      radial-gradient(circle at 18% 15%, rgba(251, 191, 36, 0.08), transparent 46%),
      linear-gradient(145deg, rgba(18, 24, 43, 0.36), rgba(8, 12, 24, 0.42)) !important;
    border-color: rgba(251, 191, 36, 0.10) !important;
    color: rgba(255, 249, 236, 0.78) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #funItemButton .p10eb-action-icon {
    color: rgba(251, 191, 36, 0.72) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #funItemButton .p10eb-action-copy strong {
    color: rgba(255, 249, 236, 0.86) !important;
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #funItemButton .p10eb-action-copy small {
    color: rgba(255, 249, 236, 0.42) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress {
    background:
      radial-gradient(circle at 14% 0%, rgba(139, 92, 246, 0.10), transparent 45%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.012)) !important;
    border-color: rgba(221, 230, 247, 0.045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-kicker {
    color: rgba(232, 237, 250, 0.34) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-value {
    font-size: 0.9rem !important;
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    background: transparent !important;
    border-color: rgba(221, 230, 247, 0.045) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.38rem !important;
    margin: 0.12rem 0 0.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips span {
    background: rgba(167, 139, 250, 0.12) !important;
    border: 1px solid rgba(196, 181, 253, 0.13) !important;
    border-radius: 999px !important;
    color: rgba(221, 214, 254, 0.82) !important;
    font-size: 0.72rem !important;
    font-weight: 540 !important;
    line-height: 1 !important;
    padding: 0.34rem 0.54rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.3rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    background: rgba(255, 255, 255, 0.032) !important;
    min-height: 1.92rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) !important;
    grid-template-areas:
      "title actions"
      "bpm bpm"
      "select select"
      "auto auto" !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions {
    gap: 0.32rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions button {
    min-height: 1.92rem !important;
    padding-inline: 0.58rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    background: rgba(255, 255, 255, 0.022) !important;
    grid-template-columns: 2rem minmax(3.5rem, 1fr) 2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    gap: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    background: rgba(255, 255, 255, 0.022) !important;
    font-size: 0.76rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1240px) {
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 761px) and (max-width: 1160px) {
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .organize-item-controls {
    align-items: stretch;
    display: grid;
    gap: 0.55rem;
    margin: 0.62rem 0;
  }

  .organize-item-view-toggle {
    align-items: center;
    border: 1px solid rgba(95, 113, 135, 0.14);
    border-radius: 999px;
    background: rgba(247, 250, 249, 0.9);
    display: inline-flex;
    gap: 0.18rem;
    justify-self: start;
    padding: 0.2rem;
  }

  .organize-item-view-toggle button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #627084;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.34rem 0.48rem;
  }

  .organize-item-view-toggle button.is-selected {
    background: #ffffff;
    color: #263246;
    box-shadow: 0 4px 10px rgba(40, 56, 77, 0.08);
  }
}

/* P10DX Practice composition polish: calmer hierarchy and cleaner companion cards. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background:
      radial-gradient(circle at 80% 0%, rgba(139, 92, 246, 0.16), transparent 30%),
      radial-gradient(circle at 18% 22%, rgba(34, 211, 199, 0.12), transparent 26%),
      linear-gradient(150deg, #07131c 0%, #071019 52%, #050a10 100%) !important;
    padding: clamp(1.35rem, 2.3vw, 2.1rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    margin-bottom: 1.45rem !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    font-size: clamp(1.6rem, 1.9vw, 1.95rem) !important;
    font-weight: 500 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    color: rgba(231, 238, 246, 0.68) !important;
    font-size: 0.98rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    gap: 1.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    align-content: end !important;
    background:
      linear-gradient(92deg, rgba(5, 12, 18, 0.98) 0%, rgba(7, 17, 24, 0.94) 43%, rgba(7, 17, 24, 0.52) 66%, rgba(5, 12, 18, 0.82) 100%),
      radial-gradient(ellipse at 78% 44%, rgba(214, 129, 58, 0.32), transparent 24%),
      radial-gradient(circle at 14% 76%, rgba(34, 211, 199, 0.11), transparent 25%),
      linear-gradient(120deg, rgba(18, 39, 50, 0.78), rgba(7, 15, 23, 0.88)) !important;
    border-color: rgba(217, 230, 242, 0.14) !important;
    border-radius: 22px !important;
    min-height: clamp(19.5rem, 27vw, 24rem) !important;
    padding: clamp(1.55rem, 3.4vw, 2.75rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    inset: -16% -6% -4% 48% !important;
    opacity: 0.48 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      linear-gradient(180deg, transparent 62%, rgba(3, 9, 14, 0.42) 100%),
      radial-gradient(circle at 76% 42%, rgba(255, 188, 117, 0.14), transparent 18%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.82rem !important;
    max-width: min(47rem, 68%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    background: rgba(139, 92, 246, 0.52) !important;
    border-color: rgba(196, 181, 253, 0.22) !important;
    border-radius: 9px !important;
    font-size: 0.72rem !important;
    font-weight: 560 !important;
    letter-spacing: 0.105em !important;
    padding: 0.46rem 0.66rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.35rem, 4.2vw, 3.65rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.04 !important;
    max-width: 13.5ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(244, 248, 252, 0.78) !important;
    font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
    line-height: 1.58 !important;
    max-width: 42rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    background: rgba(7, 16, 23, 0.66) !important;
    color: rgba(244, 248, 252, 0.66) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    gap: 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button {
    border-radius: 15px !important;
    font-size: 1rem !important;
    font-weight: 480 !important;
    min-block-size: 5.1rem !important;
    min-height: 5.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #startItemButton {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 34px rgba(22, 163, 74, 0.16) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel {
    background:
      radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.08), transparent 34%),
      linear-gradient(145deg, rgba(12, 25, 36, 0.74), rgba(8, 18, 27, 0.88)) !important;
    border-radius: 17px !important;
    min-height: 5.1rem !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(226, 235, 244, 0.09) !important;
    border-radius: 999px !important;
    font-size: 0.98rem !important;
    padding: 0.55rem 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    gap: 0.98rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(circle at 10% 0%, rgba(34, 211, 199, 0.075), transparent 32%),
      linear-gradient(145deg, rgba(13, 29, 41, 0.82), rgba(8, 18, 27, 0.92)) !important;
    border-color: rgba(217, 230, 242, 0.12) !important;
    border-radius: 18px !important;
    min-height: 13.4rem !important;
    padding: 1.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.practice-tool-card {
    gap: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.practice-tool-card > summary,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .reference-box-header {
    align-items: center !important;
    min-height: 2rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-summary-main,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .reference-box-header strong,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-title {
    color: rgba(248, 251, 255, 0.94) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-summary-status,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .reference-box-header span,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .current-item-notes-header span,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .current-item-reminder-box p {
    color: rgba(231, 238, 246, 0.56) !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-open-body {
    align-content: space-between !important;
    min-height: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard :is(.p03i-presets, #p03iCountdownMinutes, .p03i-timer-middle, .p05q-timer-middle, .timer-config, .timer-presets) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-display {
    font-size: clamp(2.1rem, 3vw, 2.7rem) !important;
    font-weight: 330 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-actions,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p05q-timer-right {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.48rem !important;
    justify-content: flex-start !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-shell,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-main {
    align-content: space-between !important;
    display: grid !important;
    gap: 0.9rem !important;
    grid-area: auto !important;
    grid-template-areas: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-title-region {
    display: flex !important;
    grid-area: auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-title-region .p03i-timing-title {
    max-width: none !important;
    min-width: 8rem !important;
    overflow: visible !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard :is(.p06d-metro-bpm-region, .p03i-metronome-actions) {
    grid-area: auto !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-bpm-region .p03i-field {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p03i-bpm-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    height: 2.1rem !important;
    text-align: center !important;
    width: 4.2rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard :is(.p03i-metronome-select-grid, .p06d-metro-sound-region, .p06d-metro-pattern-region, .p06d-metro-settings-region, .p05t-settings-button, .p05t-pattern-summary) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-tool-card button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(.p05w-bpm-step, .timer-preset, .p03i-preset) {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(226, 235, 244, 0.11) !important;
    color: rgba(246, 249, 252, 0.82) !important;
    font-size: 0.82rem !important;
    min-height: 2.1rem !important;
    padding: 0.36rem 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-elapsed {
    font-size: clamp(2.3rem, 3vw, 3rem) !important;
    font-weight: 320 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid {
    gap: 1rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemNotesBox.practice-tool-card textarea {
    background: rgba(246, 249, 252, 0.92) !important;
    border: 0 !important;
    color: #1a2632 !important;
    min-height: 7.2rem !important;
  }
}

/* P10DY Practice queue + companion composition refinement. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    min-height: clamp(18.5rem, 25vw, 23rem) !important;
    padding: clamp(1.7rem, 3.2vw, 2.55rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.2rem, 3.75vw, 3.45rem) !important;
    font-weight: 500 !important;
    line-height: 1.06 !important;
    max-width: 15ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(244, 248, 252, 0.74) !important;
    max-width: 40rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    gap: 0.9rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button {
    border-color: rgba(226, 235, 244, 0.105) !important;
    min-block-size: 5rem !important;
    min-height: 5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel.is-desktop-queue-open {
    background:
      radial-gradient(circle at 3% 0%, rgba(139, 92, 246, 0.09), transparent 28%),
      linear-gradient(145deg, rgba(13, 29, 41, 0.82), rgba(7, 16, 24, 0.92)) !important;
    border-color: rgba(217, 230, 242, 0.14) !important;
    border-radius: 18px !important;
    gap: 1.05rem !important;
    padding: 1.15rem 1.2rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-heading {
    display: grid !important;
    gap: 0.6rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-title-row {
    align-items: center !important;
    display: grid !important;
    gap: 0.65rem !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-heading h3 {
    align-items: center !important;
    color: rgba(248, 251, 255, 0.94) !important;
    display: inline-flex !important;
    font-size: 1.24rem !important;
    font-weight: 500 !important;
    gap: 0.36rem !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .help-bubble {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(244, 248, 252, 0.62) !important;
    font-size: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-progress-pill {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(226, 235, 244, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(248, 251, 255, 0.88) !important;
    font-size: 0.78rem !important;
    font-weight: 520 !important;
    padding: 0.18rem 0.48rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-progress-track {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    display: block !important;
    height: 0.32rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-progress-bar {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.95), rgba(34, 211, 199, 0.7)) !important;
    border-radius: inherit !important;
    height: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .desktop-queue-toggle {
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(226, 235, 244, 0.13) !important;
    color: rgba(248, 251, 255, 0.88) !important;
    justify-self: end !important;
    min-height: 2.25rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-helper {
    color: rgba(231, 238, 246, 0.58) !important;
    font-size: 0.82rem !important;
    justify-self: end !important;
    margin: -0.25rem 0 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-status-text {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .session-queue {
    display: grid !important;
    gap: 0.82rem !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(14.5rem, 1fr) !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding: 0.15rem 0 0.22rem !important;
    scroll-snap-type: x proximity !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .session-queue::-webkit-scrollbar {
    height: 0.45rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .session-queue::-webkit-scrollbar-thumb {
    background: rgba(226, 235, 244, 0.16) !important;
    border-radius: 999px !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item {
    align-items: center !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.045), transparent 32%),
      linear-gradient(145deg, rgba(21, 39, 52, 0.82), rgba(12, 25, 36, 0.9)) !important;
    border-color: rgba(226, 235, 244, 0.105) !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    display: grid !important;
    gap: 0.65rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 6.2rem !important;
    padding: 0.95rem 1rem !important;
    scroll-snap-align: start !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-current {
    background:
      radial-gradient(circle at 10% 12%, rgba(139, 92, 246, 0.14), transparent 36%),
      linear-gradient(145deg, rgba(25, 40, 58, 0.88), rgba(13, 25, 38, 0.92)) !important;
    border-color: rgba(139, 92, 246, 0.62) !important;
    box-shadow:
      inset 3px 0 0 rgba(139, 92, 246, 0.98),
      0 14px 34px rgba(0, 0, 0, 0.22) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-complete {
    opacity: 0.56 !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-status-marker {
    align-items: center !important;
    background: rgba(244, 248, 252, 0.88) !important;
    border-radius: 999px !important;
    color: #17212c !important;
    display: inline-flex !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    height: 1.1rem !important;
    justify-content: center !important;
    width: 1.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.is-current .queue-status-marker {
    background: rgba(96, 165, 250, 0.95) !important;
    color: #f8fbff !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-text {
    display: grid !important;
    gap: 0.16rem !important;
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item-title {
    color: rgba(248, 251, 255, 0.93) !important;
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item-type {
    color: rgba(231, 238, 246, 0.55) !important;
    font-size: 0.72rem !important;
    font-weight: 420 !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-start-now-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(226, 235, 244, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(248, 251, 255, 0.88) !important;
    font-size: 0.78rem !important;
    font-weight: 560 !important;
    min-height: 2rem !important;
    padding: 0.3rem 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card {
    min-height: 12.2rem !important;
    padding: 1rem 1.05rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-display {
    font-size: clamp(2rem, 2.6vw, 2.45rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard :is(.p03i-timer-actions, .p05q-timer-right),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p03i-metronome-actions {
    gap: 0.42rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .checkbox-row {
    color: rgba(231, 238, 246, 0.54) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.07em !important;
    opacity: 0.72 !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-primary-row {
    align-items: center !important;
    display: grid !important;
    gap: 0.45rem !important;
    grid-template-columns: auto auto minmax(6.5rem, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel :is(#quickRecordPlayButton, #quickRecordSaveButton, #quickRecordDeleteButton, #quickRecordReplaceButton, .quick-record-label-field, .quick-record-secondary-row) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-status {
    color: rgba(231, 238, 246, 0.66) !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-elapsed {
    justify-self: end !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    min-height: 10.8rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemNotesBox.practice-tool-card textarea {
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(226, 235, 244, 0.11) !important;
    color: rgba(248, 251, 255, 0.9) !important;
    min-height: 6.4rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemNotesBox.practice-tool-card textarea::placeholder {
    color: rgba(231, 238, 246, 0.46) !important;
  }
}

/* P10DZ: break the dashboard grid into a focused workspace plus sidecar tools. */
@media (min-width: 1121px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background:
      radial-gradient(circle at 78% 4%, rgba(139, 92, 246, 0.18), transparent 30%),
      radial-gradient(circle at 10% 28%, rgba(34, 211, 199, 0.13), transparent 28%),
      linear-gradient(152deg, #06121a 0%, #08111b 48%, #050910 100%) !important;
    padding: clamp(1.45rem, 2vw, 2.05rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    align-items: start !important;
    display: grid !important;
    gap: 1rem 1.18rem !important;
    grid-template-areas:
      "focus tools"
      "actions tools"
      "queue tools"
      "notes tools"
      "defaults tools" !important;
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.34fr) !important;
    grid-template-rows: auto auto auto auto 1fr !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-area: focus !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip {
    grid-area: actions !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card {
    grid-area: queue !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-area: tools !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid {
    grid-area: notes !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > #runtimeDefaultsPrompt {
    grid-area: defaults !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    background:
      linear-gradient(91deg, rgba(4, 10, 16, 0.97) 0%, rgba(6, 15, 22, 0.92) 45%, rgba(6, 15, 22, 0.58) 68%, rgba(4, 10, 16, 0.84) 100%),
      radial-gradient(ellipse at 75% 40%, rgba(217, 132, 63, 0.34), transparent 25%),
      radial-gradient(circle at 15% 75%, rgba(34, 211, 199, 0.12), transparent 26%),
      linear-gradient(120deg, rgba(19, 45, 55, 0.8), rgba(6, 13, 21, 0.9)) !important;
    border-radius: 24px !important;
    min-height: clamp(22rem, 35vw, 33rem) !important;
    padding: clamp(1.75rem, 3.8vw, 3.35rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    inset: -14% -20% -2% 42% !important;
    opacity: 0.56 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      linear-gradient(180deg, transparent 56%, rgba(4, 10, 16, 0.5) 100%),
      radial-gradient(circle at 72% 42%, rgba(255, 188, 117, 0.16), transparent 19%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.9rem !important;
    max-width: min(42rem, 72%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.55rem, 5.1vw, 5.2rem) !important;
    font-weight: 490 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.01 !important;
    max-width: 12.5ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(244, 248, 252, 0.73) !important;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem) !important;
    max-width: 39rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    gap: 0.72rem !important;
    grid-template-columns: minmax(12rem, 1.16fr) repeat(3, minmax(8rem, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button {
    min-block-size: 5.15rem !important;
    min-height: 5.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.08), transparent 28%),
      linear-gradient(180deg, rgba(13, 28, 40, 0.46), rgba(6, 14, 22, 0.14)) !important;
    border: 1px solid rgba(217, 230, 242, 0.075) !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.78rem !important;
    min-height: 100% !important;
    padding: 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card {
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 199, 0.07), transparent 32%),
      linear-gradient(145deg, rgba(14, 30, 42, 0.78), rgba(8, 18, 27, 0.88)) !important;
    border-color: rgba(217, 230, 242, 0.11) !important;
    border-radius: 17px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    flex: 0 0 auto !important;
    min-height: 9.6rem !important;
    padding: 0.95rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel {
    min-height: 11.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box {
    min-height: 8.6rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-primary-row {
    grid-template-columns: auto auto minmax(5.5rem, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-elapsed {
    font-size: clamp(2rem, 2.5vw, 2.6rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.9rem, 2.3vw, 2.35rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-title-region .p03i-timing-title,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timing-title,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-summary-main,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .reference-box-header strong {
    font-size: 0.98rem !important;
    font-weight: 500 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p06d-metro-title-region .p03i-timing-title {
    min-width: 7rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-queue-card.main-queue-panel {
    border-radius: 18px !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-queue-card.is-desktop-queue-open .session-queue {
    grid-auto-columns: minmax(13rem, 0.36fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid {
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(16rem, 0.72fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.055), transparent 32%),
      linear-gradient(145deg, rgba(12, 25, 36, 0.62), rgba(7, 16, 24, 0.78)) !important;
    border-color: rgba(217, 230, 242, 0.095) !important;
    min-height: 11.8rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemNotesBox.practice-tool-card textarea {
    min-height: 7rem !important;
  }
}

@media (min-width: 1121px) and (max-width: 1280px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.32fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.45rem, 4.6vw, 4.2rem) !important;
  }
}

/* P10DW hard layout reset for the recomposed Practice player. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player {
    display: grid !important;
    gap: 1rem !important;
    grid-template-areas:
      "focus"
      "actions"
      "queue"
      "tools"
      "notes"
      "defaults" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    order: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    align-items: end !important;
    display: grid !important;
    flex-direction: initial !important;
    grid-area: focus !important;
    grid-template-columns: minmax(0, 0.62fr) minmax(16rem, 0.38fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip {
    grid-area: actions !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card {
    grid-area: queue !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-area: tools !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid {
    grid-area: notes !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > #runtimeDefaultsPrompt {
    grid-area: defaults !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-focus-copy {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemElapsedPill {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #currentItemMeta {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    display: grid !important;
    grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #startItemButton,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #doneItemButton,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #skipItemButton,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #editCurrentItemButton {
    align-items: center !important;
    display: flex !important;
    font-size: 1.04rem !important;
    font-weight: 500 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    min-block-size: 5.6rem !important;
    min-height: 5.6rem !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > *,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .zb-p03i-original-hidden {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card {
    background:
      radial-gradient(circle at 0% 0%, rgba(34, 211, 199, 0.07), transparent 38%),
      linear-gradient(145deg, rgba(15, 31, 43, 0.84), rgba(9, 20, 30, 0.92)) !important;
    border: 1px solid var(--practice-line) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 16px 36px rgba(0, 0, 0, 0.14) !important;
    color: var(--practice-text) !important;
    display: grid !important;
    min-height: 14rem !important;
    padding: 1.05rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iTimerCard {
    order: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iMetronomeCard {
    order: 2 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel {
    order: 3 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box {
    order: 4 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iTimerCard,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iMetronomeCard {
    height: auto !important;
    max-width: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-closed-strip,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-open-header > .p03i-tool-button[hidden] {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-open-body,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-open-header,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p06d-metro-main,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p05q-rail {
    display: grid !important;
    gap: 0.72rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) *,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) *::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) *::after {
    position: static !important;
    transform: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) :is(.p06d-metro-region, .p05q-rail-group, .p03i-field, .p03i-action-row) {
    min-width: 0 !important;
    width: auto !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-title {
    color: var(--practice-text) !important;
    display: block !important;
    font-size: 1.08rem !important;
    font-weight: 540 !important;
    letter-spacing: 0 !important;
    margin-bottom: 0.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-display {
    color: #f8fbff !important;
    display: block !important;
    font-size: 2.2rem !important;
    font-weight: 360 !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p03i-header-bpm-field {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.8rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p05w-bpm-control {
    align-items: center !important;
    display: flex !important;
    gap: 0.35rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard .p03i-metronome-grid {
    display: grid !important;
    gap: 0.55rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-presets,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.42rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard :is(.p03i-presets, #p03iCountdownMinutes),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard :is(.p03i-metronome-select-grid, .p06d-metro-sound-region, .p06d-metro-pattern-region, .p06d-metro-settings-region, .p05t-settings-button, .p05t-pattern-summary) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard :is(.p05q-timer-left, .p05q-timer-right),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iMetronomeCard :is(.p06d-metro-title-region, .p06d-metro-bpm-region, .p03i-metronome-actions) {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.55rem !important;
    justify-content: space-between !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player :is(#p03iTimerCard, #p03iMetronomeCard) label {
    color: rgba(231, 238, 246, 0.62) !important;
    font-size: 0.66rem !important;
    font-weight: 580 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iTimerCard :is(button, input, select),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #p03iMetronomeCard :is(button, input, select) {
    max-width: 100% !important;
  }
}

/* P10AL Organize Workspace v1 foundation: evolve Manage shell while preserving existing flows. */
.setup-nav-button {
  display: none !important;
}

.organize-workspace-shell {
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.62fr) minmax(0, 2fr) minmax(14rem, 0.86fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  border-color: rgba(104, 118, 140, 0.22);
  background:
    linear-gradient(135deg, rgba(248, 251, 252, 0.96), rgba(242, 246, 248, 0.92)),
    #f7fafb;
}

.organize-workspace-shell[hidden] {
  display: none !important;
}

.organize-workspace-nav,
.organize-context-card,
.organize-inspector-card,
.organize-getting-started-card {
  border: 1px solid rgba(112, 128, 150, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(26, 38, 55, 0.06);
}

.organize-workspace-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  background: rgba(241, 246, 248, 0.9);
}

.organize-workspace-label {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #627086;
  text-transform: uppercase;
}

.organize-nav-item {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0.58rem 0.68rem;
  background: transparent;
  color: #263349;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.organize-nav-item:hover {
  background: rgba(58, 82, 112, 0.08);
}

.organize-nav-item.is-selected {
  color: #12233c;
  background: #ffffff;
  box-shadow: inset 3px 0 0 #3d73e6, 0 8px 18px rgba(35, 53, 82, 0.08);
}

.organize-workspace-main {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.organize-getting-started-card,
.organize-context-card,
.organize-inspector-card {
  padding: 0.9rem;
}

.organize-getting-started-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 250, 237, 0.98), rgba(239, 248, 246, 0.96));
  border-color: rgba(218, 169, 84, 0.3);
}

.organize-getting-started-card[hidden] {
  display: none !important;
}

.organize-getting-started-card h3,
.organize-context-card h3,
.organize-inspector-card h3 {
  margin: 0.1rem 0 0.28rem;
  color: #172033;
  letter-spacing: 0;
}

.organize-getting-started-card p:not(.eyebrow),
.organize-context-card p:not(.eyebrow),
.organize-inspector-card p:not(.eyebrow) {
  margin: 0;
  color: #5a6679;
  line-height: 1.45;
}

.organize-getting-started-actions {
  flex-wrap: nowrap;
  margin: 0;
}

.organize-getting-started-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.organize-setup-step {
  appearance: none;
  display: grid;
  gap: 0.16rem;
  width: 100%;
  border: 1px solid rgba(112, 128, 150, 0.14);
  border-radius: 12px;
  padding: 0.62rem 0.66rem;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.organize-setup-step:hover:not(:disabled),
.organize-setup-step:focus-visible {
  border-color: rgba(33, 92, 255, 0.26);
  box-shadow: 0 10px 22px rgba(33, 92, 255, 0.08);
  transform: translateY(-1px);
}

.organize-setup-step:disabled {
  cursor: default;
  opacity: 0.78;
}

.organize-setup-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 999px;
  background: rgba(56, 71, 94, 0.08);
  color: #425169;
  font-size: 0.68rem;
  font-weight: 760;
}

.organize-setup-step strong {
  color: #1a2638;
  font-size: 0.76rem;
  font-weight: 720;
}

.organize-setup-step em {
  color: #66758a;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 620;
}

.organize-setup-step small {
  color: #6a7789;
  font-size: 0.66rem;
  font-weight: 560;
  line-height: 1.28;
}

.organize-setup-step-action {
  align-self: end;
  margin-top: 0.16rem;
  color: #2d579f;
  font-size: 0.68rem;
  font-weight: 680;
}

.organize-setup-step:disabled .organize-setup-step-action {
  color: #7b8798;
}

.organize-setup-step.is-complete {
  border-color: rgba(77, 132, 96, 0.18);
  background: rgba(239, 248, 242, 0.72);
}

.organize-setup-step.is-ready {
  border-color: rgba(35, 120, 87, 0.24);
  background: linear-gradient(135deg, rgba(230, 247, 237, 0.9), rgba(240, 249, 243, 0.84));
}

.organize-setup-step.is-next {
  border-color: rgba(73, 114, 176, 0.2);
  background: rgba(239, 245, 252, 0.76);
}

.organize-setup-step.is-recommended {
  border-color: rgba(170, 134, 70, 0.2);
  background: rgba(255, 248, 234, 0.76);
}

.organize-setup-step.is-example {
  border-color: rgba(133, 113, 174, 0.2);
  background: rgba(246, 242, 252, 0.78);
}

.organize-setup-step.is-example-loaded {
  border-color: rgba(97, 142, 148, 0.2);
  background: rgba(237, 248, 248, 0.76);
}

.organize-setup-step.is-review,
.organize-setup-step.is-review-ready {
  border-color: rgba(74, 128, 152, 0.2);
  background: rgba(238, 247, 250, 0.76);
}

.organize-setup-step.is-locked {
  background: rgba(248, 250, 252, 0.68);
}

.guidance-modal-body[hidden] {
  display: none !important;
}

.guidance-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  margin: 0.85rem 0 0;
}

.guidance-choice-card {
  appearance: none;
  display: grid;
  gap: 0.28rem;
  width: 100%;
  border: 1px solid rgba(112, 128, 150, 0.16);
  border-radius: 15px;
  padding: 0.78rem 0.82rem;
  background: rgba(248, 250, 252, 0.92);
  color: #1d2a3d;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.guidance-choice-card:hover,
.guidance-choice-card:focus-visible {
  border-color: rgba(45, 87, 159, 0.28);
  box-shadow: 0 12px 26px rgba(31, 49, 78, 0.1);
  transform: translateY(-1px);
}

.guidance-choice-card.is-primary {
  background: rgba(240, 246, 255, 0.92);
}

.guidance-choice-kicker {
  color: #647287;
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.guidance-choice-card strong {
  color: #172033;
  font-size: 0.92rem;
  font-weight: 720;
}

.guidance-choice-card span:not(.guidance-choice-kicker),
.guidance-choice-card em {
  color: #5f6d81;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
}

.guidance-choice-card em {
  color: #738095;
}

.organize-context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.organize-relationship-preview {
  display: grid;
  gap: 0.65rem;
}

.organize-preview-summary,
.organize-inspector-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.organize-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  border: 1px solid rgba(112, 128, 150, 0.2);
  border-radius: 999px;
  padding: 0.38rem 0.58rem;
  background: rgba(255, 255, 255, 0.86);
  color: #617087;
  font-size: 0.78rem;
  font-weight: 720;
}

.organize-stat strong {
  color: #172033;
  font-size: 0.92rem;
}

.organize-goal-map-card {
  display: grid;
  gap: 0.48rem;
  padding: 0.75rem;
  border: 1px solid rgba(83, 101, 126, 0.14);
  border-radius: 12px;
  background: rgba(248, 251, 252, 0.9);
}

.organize-goal-map-card strong {
  color: #1a2638;
}

.organize-linked-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.organize-linked-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.32rem 0.52rem;
  background: #eef5ff;
  color: #24507c;
  font-size: 0.74rem;
  font-weight: 760;
}

.organize-linked-chip.is-empty {
  background: #f2f4f7;
  color: #737f91;
}

.organize-linked-song { background: #eaf8ef; color: #21603b; }
.organize-linked-solo { background: #f0eafb; color: #5c3a93; }
.organize-linked-activity { background: #fff2df; color: #854b17; }
.organize-linked-drill { background: #eaf3ff; color: #24507c; }

.organize-preview-empty,
.organize-preview-note {
  margin: 0;
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(244, 247, 250, 0.92);
  color: #647086;
}

.organize-preview-empty {
  display: grid;
  gap: 0.18rem;
}

.organize-inspector-card {
  align-self: start;
  background: rgba(251, 252, 253, 0.88);
}

.organize-inspector-stats {
  margin-top: 0.85rem;
}

body:has(.organize-workspace-shell:not([hidden])) .manage-tabs-card,
body:has(.organize-workspace-shell:not([hidden])) .record-list {
  border-color: rgba(112, 128, 150, 0.18);
  box-shadow: 0 12px 30px rgba(22, 32, 48, 0.055);
}

body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded),
body:has(.organize-workspace-shell:not([hidden])) .rotation-planning-panel {
  padding: 0.8rem 0.9rem;
  border-color: rgba(112, 128, 150, 0.18);
  background: rgba(250, 252, 253, 0.88);
}

@media (max-width: 760px) {
  .organize-workspace-shell {
    display: block;
    padding: 0.72rem;
  }

  .organize-workspace-nav {
    display: flex;
    flex-direction: row;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
    padding: 0.52rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .organize-workspace-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .organize-nav-item {
    flex: 0 0 auto;
    width: auto;
    padding: 0.54rem 0.68rem;
    border: 1px solid rgba(68, 82, 105, 0.16);
    background: #fff;
    box-shadow: none;
  }

  .organize-nav-item.is-selected {
    box-shadow: inset 0 -3px 0 #2563eb;
  }

  .organize-workspace-main {
    gap: 0.7rem;
  }

  .organize-getting-started-card {
    display: grid;
    gap: 0.72rem;
  }

  .organize-getting-started-actions {
    flex-wrap: wrap;
  }

  .organize-getting-started-progress {
    grid-template-columns: minmax(0, 1fr);
  }

  .guidance-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .organize-inspector-card {
    margin-top: 0.7rem;
  }
}

/* P10AK canonical mobile Song editor sheet: active Add/Edit Song paths only. */
@media (max-width: 760px) {
  #addRecordModalBackdrop[data-mobile-sheet="song"],
  #editModalBackdrop[data-mobile-sheet="song"] {
    align-items: flex-end !important;
    background: rgba(15, 23, 42, 0.34) !important;
    display: flex !important;
    height: var(--mobile-sheet-height, 100dvh) !important;
    inset: 0 !important;
    justify-content: center !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    position: fixed !important;
    touch-action: none !important;
    transform: none !important;
    width: 100vw !important;
    z-index: 90 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-card,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-card {
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(248, 250, 252, 0.96)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    bottom: var(--mobile-sheet-keyboard-bottom, 0px) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    left: 0 !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--mobile-sheet-top, 0px) !important;
    transform: none !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-card *,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-header,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-header {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(249, 250, 246, 0.96)) !important;
    border-bottom: 1px solid rgba(147, 123, 88, 0.12) !important;
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 0.2rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    margin: 0 !important;
    min-height: 3.45rem !important;
    padding: max(0.58rem, env(safe-area-inset-top, 0px)) 0.9rem 0.62rem !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-header > div,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-header > div {
    min-width: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-header .eyebrow,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-header .eyebrow,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-close-button,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-close-button {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-header h2,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-header h2 {
    color: #142033 !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-action,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-action {
    align-items: center !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #2563eb !important;
    display: inline-flex !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 2.05rem !important;
    padding: 0.25rem 0 !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-save,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-save {
    justify-self: end !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-cancel,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-goal-sheet-cancel {
    justify-self: start !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .record-form,
  #editModalBackdrop[data-mobile-sheet="song"] .record-form {
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 0.54rem !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0.56rem 0.62rem calc(0.68rem + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding: 0.8rem 0 1.4rem !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-source-shell:empty,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-source-shell:empty {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section {
    background: rgba(255, 253, 248, 0.88) !important;
    border: 1px solid rgba(111, 87, 54, 0.12) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 0.42rem !important;
    margin: 0 !important;
    padding: 0.6rem 0.68rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-core,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-core {
    background: rgba(255, 245, 225, 0.96) !important;
    border-color: rgba(143, 101, 48, 0.22) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing {
    background: rgba(232, 241, 248, 0.95) !important;
    border-color: rgba(56, 84, 116, 0.18) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-planning,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-planning {
    background: rgba(236, 248, 241, 0.95) !important;
    border-color: rgba(55, 115, 88, 0.17) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-relationships,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-relationships {
    background: rgba(233, 240, 248, 0.95) !important;
    border-color: rgba(67, 91, 124, 0.18) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-references,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-references {
    background: rgba(255, 239, 214, 0.95) !important;
    border-color: rgba(176, 105, 28, 0.2) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-notes,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-notes {
    background: rgba(242, 246, 249, 0.94) !important;
    border-color: rgba(83, 100, 121, 0.14) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header {
    display: grid !important;
    gap: 0.16rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-title-row,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-title-row {
    align-items: center !important;
    display: flex !important;
    gap: 0.34rem !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header h3,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header h3 {
    color: #172033 !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-badge,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-badge,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-header span,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-header span {
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(100, 116, 139, 0.14) !important;
    border-radius: 999px !important;
    color: #6b7280 !important;
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0.18rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-info-button,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-info-button {
    align-items: center !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(100, 116, 139, 0.16) !important;
    border-radius: 999px !important;
    color: #475569 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    height: 1.18rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-left: auto !important;
    padding: 0 !important;
    width: 1.18rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header p,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-header p {
    color: #64748b !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-help,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-help {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(100, 116, 139, 0.1) !important;
    border-radius: 10px !important;
    color: #475569 !important;
    display: none !important;
    font-size: 0.74rem !important;
    line-height: 1.28 !important;
    margin: 0.12rem 0 0 !important;
    padding: 0.38rem 0.46rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section.is-help-open .mobile-drill-section-help,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section.is-help-open .mobile-drill-section-help {
    display: block !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .field,
  #editModalBackdrop[data-mobile-sheet="song"] .field,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .field-grid,
  #editModalBackdrop[data-mobile-sheet="song"] .field-grid,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-references-box,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-references-box,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .add-reference-create-box,
  #editModalBackdrop[data-mobile-sheet="song"] .add-reference-create-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] label,
  #editModalBackdrop[data-mobile-sheet="song"] label,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock strong,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock strong {
    color: #1f2937 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .help-bubble,
  #editModalBackdrop[data-mobile-sheet="song"] .help-bubble,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .speech-field-hint,
  #editModalBackdrop[data-mobile-sheet="song"] .speech-field-hint,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .compact-field-help,
  #editModalBackdrop[data-mobile-sheet="song"] .compact-field-help,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .reference-edit-note,
  #editModalBackdrop[data-mobile-sheet="song"] .reference-edit-note,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-notes label,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-notes label,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-references .linked-goals-header,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-references .linked-goals-header,
  #addRecordModalBackdrop[data-mobile-sheet="song"] [hidden],
  #editModalBackdrop[data-mobile-sheet="song"] [hidden] {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] input,
  #editModalBackdrop[data-mobile-sheet="song"] input,
  #addRecordModalBackdrop[data-mobile-sheet="song"] select,
  #editModalBackdrop[data-mobile-sheet="song"] select {
    border-radius: 10px !important;
    font-size: 1rem !important;
    min-height: 2.34rem !important;
    padding: 0.52rem 0.62rem !important;
    scroll-margin: 0.85rem 0 1.3rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] textarea,
  #editModalBackdrop[data-mobile-sheet="song"] textarea {
    border-radius: 10px !important;
    font-size: 1rem !important;
    line-height: 1.36 !important;
    min-height: 4.05rem !important;
    padding: 0.62rem 0.66rem !important;
    scroll-margin: 0.85rem 0 1.3rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordNotes {
    min-height: 3.35rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-mock,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-references-box,
  #editModalBackdrop[data-mobile-sheet="song"] .modal-references-box,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .add-reference-create-box,
  #editModalBackdrop[data-mobile-sheet="song"] .add-reference-create-box {
    display: grid !important;
    gap: 0.38rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-header,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.32rem !important;
    justify-content: space-between !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-list,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-list {
    display: grid !important;
    gap: 0.24rem !important;
    max-height: 7.25rem !important;
    overflow: auto !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goal-option,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goal-option {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid rgba(100, 116, 139, 0.1) !important;
    border-radius: 10px !important;
    display: flex !important;
    gap: 0.4rem !important;
    min-height: 2rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .linked-goals-empty,
  #editModalBackdrop[data-mobile-sheet="song"] .linked-goals-empty {
    color: #64748b !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .reference-add-grid,
  #editModalBackdrop[data-mobile-sheet="song"] .reference-add-grid {
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.7fr) !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .reference-url-field,
  #editModalBackdrop[data-mobile-sheet="song"] .reference-url-field {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing {
    align-items: start !important;
    display: grid !important;
    gap: 0.48rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing .mobile-drill-section-header,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-section-timing .mobile-drill-section-header {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordBpmField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalBpmField {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordAutoTimerField,
  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordTimingSoundField,
  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordAutoMetronomeField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalAutoTimerField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalTimingSoundField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalAutoMetronomeField {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readouts,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readouts {
    display: contents !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout[data-timing-key="sound-beat"],
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout[data-timing-key="sound-beat"] {
    grid-column: 3 / span 2 !important;
    grid-row: 2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout[data-timing-key="auto-metro"],
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout[data-timing-key="auto-metro"] {
    grid-column: 5 / span 2 !important;
    grid-row: 2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-readout {
    align-self: end !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(100, 116, 139, 0.12) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.12rem !important;
    justify-content: center !important;
    min-height: 2.34rem !important;
    padding: 0.32rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-label,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-label {
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-value,
  #editModalBackdrop[data-mobile-sheet="song"] .mobile-drill-timing-value {
    color: #1f2937 !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordStatusCategoryFields,
  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordPlanningFields,
  #editModalBackdrop[data-mobile-sheet="song"] #modalEntityFields {
    align-items: start !important;
    display: grid !important;
    gap: 0.48rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordStatusCategoryFields,
  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordPlanningFields .field:has(#addRecordFrequency),
  #editModalBackdrop[data-mobile-sheet="song"] #modalFrequencyField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalPracticeRoleField {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordSequenceOrderField,
  #editModalBackdrop[data-mobile-sheet="song"] #modalSequenceOrderField,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .modal-footer-actions,
  #editModalBackdrop[data-mobile-sheet="song"] .button-row:last-child {
    display: none !important;
  }
}

/* P07J checkpoint polish: warm Manage composition and modal grouping. */
.overview-card.app-screen[data-screen-panel="manage"],
.manage-tabs-card,
.manage-list-card,
.rotation-planning-panel,
.practice-composition-rail {
  border-color: rgba(147, 123, 88, 0.16) !important;
  box-shadow: 0 14px 34px rgba(41, 52, 76, 0.07) !important;
}

.overview-card.app-screen[data-screen-panel="manage"] {
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.72), rgba(245, 248, 255, 0.92)) !important;
}

.manage-tabs-card,
.manage-list-card {
  background: #fbfcf8 !important;
}

.practice-composition-rail {
  background:
    radial-gradient(circle at top left, rgba(255, 237, 213, 0.7), transparent 28rem),
    linear-gradient(180deg, #fffdf7 0%, #f4f8f4 100%) !important;
  border-color: rgba(114, 83, 45, 0.16) !important;
}

.composition-total-pill {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(114, 83, 45, 0.14) !important;
  color: #3d4b63 !important;
}

.composition-total-pill.is-total {
  background: #eaf8ee !important;
  border-color: rgba(6, 118, 71, 0.18) !important;
  color: #067647 !important;
}

.composition-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 252, 245, 0.74)) !important;
  box-shadow: 0 8px 20px rgba(41, 52, 76, 0.055);
}

.composition-daily {
  background: linear-gradient(180deg, #f8fbff, #eef5ff) !important;
  border-left-color: #1f5eff !important;
}

.composition-pool {
  background: linear-gradient(180deg, #f4fbfb, #e9f6f5) !important;
  border-left-color: #0e7490 !important;
}

.composition-fresh {
  background: linear-gradient(180deg, #f5fbf6, #eaf8ee) !important;
  border-left-color: #067647 !important;
}

.composition-learning {
  background: linear-gradient(180deg, #faf7ff, #f2ecff) !important;
  border-left-color: #7c3aed !important;
}

.composition-activity {
  background: linear-gradient(180deg, #fffaf2, #fff2da) !important;
  border-left-color: #b45309 !important;
}

.composition-chip {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(71, 85, 105, 0.13) !important;
}

.composition-count-chip {
  background: rgba(15, 23, 42, 0.045) !important;
}

.composition-sections {
  padding-bottom: 0.5rem !important;
}

.modal-card {
  background:
    linear-gradient(180deg, #fffefb 0%, #f9fbff 100%) !important;
  border: 1px solid rgba(147, 123, 88, 0.16);
  max-height: min(97vh, 940px) !important;
  max-width: 960px !important;
  padding: 1.85rem !important;
}

.compact-modal-card {
  max-width: 940px !important;
}

.modal-card .record-form {
  gap: 1.05rem !important;
}

.modal-card .field-grid,
.modal-card form > .field,
.linked-goals-mock,
.modal-references-box,
.add-reference-create-box {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 123, 88, 0.13);
  border-radius: 16px;
  padding: 0.85rem;
}

.modal-card form > .field {
  display: grid;
  gap: 0.35rem;
}

.modal-card .planning-fields {
  background: rgba(239, 246, 255, 0.62);
  border-color: rgba(31, 94, 255, 0.12);
}

.modal-card .linked-goals-mock {
  background: rgba(236, 253, 245, 0.54);
  border-color: rgba(6, 118, 71, 0.13);
}

.modal-card .modal-references-box,
.modal-card .add-reference-create-box {
  background: rgba(255, 247, 237, 0.58);
  border-color: rgba(180, 83, 9, 0.13);
}

.modal-card .button-row:last-child {
  background: rgba(255, 255, 255, 0.74);
  border-top: 1px solid rgba(147, 123, 88, 0.14);
  border-radius: 0 0 16px 16px;
  margin: 0.15rem -0.35rem -0.35rem;
  padding: 0.85rem 0.35rem 0.2rem;
}

.help-bubble-text {
  background: #fffefb !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.13) !important;
  max-width: min(16rem, 72vw) !important;
}

.frequency-help-panel {
  gap: 0.5rem !important;
  width: min(17rem, 78vw) !important;
}

@media (max-width: 760px) {
  .modal-card {
    max-height: 94vh !important;
    padding: 1rem !important;
  }

  .modal-card .field-grid,
  .modal-card form > .field,
  .linked-goals-mock,
  .modal-references-box,
  .add-reference-create-box {
    padding: 0.7rem;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

button, input, textarea { font: inherit; }

button {
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font-weight: 750;
  padding: 0.8rem 1rem;
}

button:hover { background: var(--primary-dark); }

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

button[hidden],
[hidden] {
  display: none !important;
}

input, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
}

textarea { resize: vertical; }

input:focus, textarea:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(31, 94, 255, 0.16);
}

.app-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.app-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.eyebrow {
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  margin-bottom: 0.4rem;
}

h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.help-heading {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  min-width: 0;
}

.help-heading > h2,
.help-heading > h3 {
  margin-bottom: 0;
}

.help-bubble {
  align-items: center;
  background: rgba(31, 94, 255, 0.1);
  border: 1px solid rgba(31, 94, 255, 0.24);
  border-radius: 999px;
  color: var(--primary);
  cursor: help;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  position: relative;
  text-transform: none;
  width: 1.25rem;
  z-index: 5;
}

.help-bubble:focus {
  outline: 3px solid rgba(31, 94, 255, 0.18);
  outline-offset: 2px;
}

.help-bubble-text {
  background: #fbfcfe;
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 11px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  left: 50%;
  line-height: 1.32;
  max-width: min(14rem, 72vw);
  opacity: 0;
  padding: 0.6rem 0.68rem;
  pointer-events: none;
  position: absolute;
  text-align: left;
  text-transform: none;
  top: calc(100% + 0.45rem);
  transform: translate(-50%, -0.2rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  width: max-content;
  z-index: 80;
}

.help-bubble.is-positioned .help-bubble-text {
  left: var(--help-left, 1rem);
  position: fixed;
  right: auto;
  top: var(--help-top, 1rem);
  transform: none;
}

.frequency-help-panel {
  display: grid;
  gap: 0.48rem;
  line-height: 1.25;
  width: min(16rem, 78vw);
}

.frequency-help-panel > span {
  display: grid;
  gap: 0.08rem;
}

.frequency-help-panel strong {
  color: var(--primary);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.frequency-help-panel > span {
  color: var(--muted);
  font-weight: 550;
}

.compact-help-bubble {
  height: 1rem;
  margin-left: 0.25rem;
  vertical-align: text-bottom;
  width: 1rem;
}

.help-bubble:hover .help-bubble-text,
.help-bubble:focus .help-bubble-text,
.help-bubble.is-open .help-bubble-text {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.help-bubble.is-positioned:hover .help-bubble-text,
.help-bubble.is-positioned:focus .help-bubble-text,
.help-bubble.is-positioned.is-open .help-bubble-text {
  transform: none;
}

.context-help-panel {
  background: #f7f9fc;
  border: 1px solid rgba(100, 112, 132, 0.2);
  border-radius: 14px;
  color: var(--text);
  margin: 0.75rem 0 1rem;
  padding: 0.72rem 0.85rem;
}

.context-help-panel summary {
  color: #334155;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
  list-style-position: outside;
}

.context-help-panel p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0.45rem 0 0;
  max-width: 68rem;
}

.guidance-modal-card {
  max-width: 34rem;
}

#guidanceModalBackdrop.is-schedule-context-modal {
  align-items: center;
  overflow: hidden;
}

#guidanceModalBackdrop.is-schedule-context-modal .guidance-modal-card {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 8, 23, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(248, 250, 252, 0.94);
  max-height: min(92vh, 46rem);
  max-width: min(58rem, 94vw);
  overflow: auto;
  scrollbar-gutter: stable;
}

#guidanceModalBackdrop.is-event-context-modal .guidance-modal-card {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(41, 28, 12, 0.98), rgba(2, 8, 23, 0.96));
  border-color: rgba(245, 158, 11, 0.32);
}

#guidanceModalBackdrop.is-note-context-modal .guidance-modal-card {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(12, 38, 27, 0.98), rgba(2, 8, 23, 0.96));
  border-color: rgba(34, 197, 94, 0.3);
}

#guidanceModalBackdrop.is-schedule-context-modal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
}

#guidanceModalBackdrop.is-event-context-modal #guidanceModalTitle::before,
#guidanceModalBackdrop.is-note-context-modal #guidanceModalTitle::before {
  align-items: center;
  border-radius: 0.65rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 950;
  height: 1.55rem;
  justify-content: center;
  margin-right: 0.5rem;
  vertical-align: middle;
  width: 1.55rem;
}

#guidanceModalBackdrop.is-event-context-modal #guidanceModalTitle::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(180, 83, 9, 0.9));
  content: "E";
}

#guidanceModalBackdrop.is-note-context-modal #guidanceModalTitle::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.94), rgba(20, 184, 166, 0.86));
  content: "N";
}

#guidanceModalBackdrop.is-schedule-context-modal .guidance-modal-message {
  color: rgba(203, 213, 225, 0.78);
  margin-bottom: 0.85rem;
}

#guidanceModalBackdrop.is-schedule-context-modal .guidance-modal-body {
  max-height: calc(92vh - 11rem);
  overflow: auto;
  padding-right: 0.15rem;
  scrollbar-gutter: stable;
}

#guidanceModalBackdrop.is-schedule-context-modal .guidance-modal-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  margin-top: 0.9rem;
  padding-top: 0.85rem;
}

#guidanceModalBackdrop.is-schedule-preview-modal {
  align-items: stretch;
  overflow: hidden;
  padding: clamp(0.55rem, 1.2vw, 1rem);
}

#guidanceModalBackdrop.is-schedule-preview-modal .modal-card.guidance-modal-card {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 42%),
    radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.1), transparent 46%),
    linear-gradient(145deg, rgba(2, 8, 23, 0.99), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(125, 211, 252, 0.2);
  color: rgba(248, 250, 252, 0.95);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: min(94vh, 66rem);
  max-height: 94vh !important;
  max-width: min(108rem, 98vw) !important;
  overflow: hidden;
  width: min(108rem, 98vw) !important;
}

#guidanceModalBackdrop.is-schedule-preview-modal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 0.8rem;
  padding-bottom: 0.7rem;
}

#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-message {
  color: rgba(203, 213, 225, 0.72);
  margin-bottom: 0.75rem;
}

#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-body {
  max-height: none !important;
  min-height: 0;
  overflow: hidden;
  padding-right: 0.18rem;
  scrollbar-gutter: stable;
}

#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  margin-top: 0.8rem;
  padding-top: 0.78rem;
}

#guidanceModalBackdrop.is-practice-map-modal .modal-header,
#guidanceModalBackdrop.is-practice-map-modal .guidance-modal-message,
#guidanceModalBackdrop.is-practice-map-modal .guidance-modal-actions {
  display: none;
}

#guidanceModalBackdrop.is-practice-map-modal .modal-card.guidance-modal-card {
  grid-template-rows: minmax(0, 1fr);
}

.schedule-builder-preview-workspace {
  color: rgba(235, 241, 248, 0.94);
  display: grid;
  gap: 0.62rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.schedule-builder-preview-topbar,
.schedule-builder-day-header,
.schedule-builder-preview-month-heading,
.schedule-builder-preview-side-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.schedule-builder-preview-topbar {
  align-items: center;
  gap: 0.65rem;
}

.schedule-builder-preview-topbar h3,
.schedule-builder-day-header h3 {
  color: rgba(255, 251, 242, 0.98);
  font-size: clamp(1.5rem, 2.1vw, 2.15rem);
  line-height: 1;
  margin: 0;
}

.schedule-builder-preview-topbar p,
.schedule-builder-day-header p {
  color: rgba(203, 213, 225, 0.72);
  margin: 0.25rem 0 0;
}

.schedule-builder-preview-controls,
.schedule-builder-preview-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schedule-builder-preview-legend {
  background: rgba(15, 23, 42, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 0.64rem;
  flex: 1 1 34rem;
  justify-content: flex-start;
  min-width: 0;
  padding: 0.28rem 0.5rem;
}

.schedule-builder-preview-legend span:not(.schedule-builder-preview-dot) {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.74rem;
  font-weight: 850;
}

.schedule-builder-preview-dot {
  background: rgba(59, 130, 246, 0.95);
  border-radius: 999px;
  display: inline-block;
  height: 0.48rem;
  width: 0.48rem;
}

.schedule-builder-preview-dot.is-practice-block {
  background: rgba(168, 85, 247, 0.95);
}

.schedule-builder-preview-dot.is-scheduled-block {
  background: rgba(20, 184, 166, 0.98);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
}

.schedule-builder-preview-dot.is-spaced-review {
  background: rgba(20, 184, 166, 0.98);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
}

.schedule-builder-preview-dot.is-overdue-spaced-review {
  background: rgba(248, 113, 113, 0.98);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.22);
}

.schedule-builder-preview-dot.is-event {
  background: rgba(168, 85, 247, 0.95);
}

.schedule-builder-preview-dot.is-note {
  background: rgba(34, 197, 94, 0.95);
}

.schedule-builder-preview-dot.is-holiday {
  background: rgba(251, 191, 36, 0.98);
}

.schedule-builder-preview-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(34rem, 1.75fr) minmax(17.5rem, 0.58fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.schedule-builder-preview-main,
.schedule-builder-preview-side-panel,
.schedule-builder-day-side,
.schedule-builder-generated-section,
.schedule-builder-day-stats,
.schedule-builder-preview-upcoming {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(30, 41, 59, 0.42)),
    rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.9rem;
  box-shadow: 0 18px 46px rgba(2, 8, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-width: 0;
}

.schedule-builder-preview-main {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.68), rgba(30, 41, 59, 0.48)),
    rgba(15, 23, 42, 0.56);
  border-color: rgba(125, 211, 252, 0.16);
  display: grid;
  gap: 0.8rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.85rem;
}

.schedule-builder-preview-side-panel {
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.72), rgba(38, 43, 55, 0.48)),
    rgba(15, 23, 42, 0.58);
  border-color: rgba(251, 191, 36, 0.14);
}

.schedule-builder-generated-section {
  background:
    linear-gradient(150deg, rgba(15, 23, 42, 0.62), rgba(30, 41, 59, 0.36)),
    rgba(15, 23, 42, 0.46);
}

.schedule-builder-preview-nav-button.is-current-month {
  border-color: rgba(251, 191, 36, 0.32);
  color: rgba(255, 251, 235, 0.96);
}

.schedule-builder-preview-today-button {
  border-color: rgba(251, 191, 36, 0.28);
}

.schedule-builder-preview-month-heading strong {
  color: rgba(255, 251, 242, 0.98);
  font-size: 1.25rem;
}

.schedule-builder-preview-month-title {
  display: grid;
  gap: 0.18rem;
}

.schedule-builder-preview-month-button {
  border-color: rgba(125, 211, 252, 0.24);
  color: rgba(226, 232, 240, 0.92);
  min-height: 2.15rem;
  white-space: nowrap;
}

.schedule-builder-preview-month-button:hover,
.schedule-builder-preview-month-button:focus-visible {
  border-color: rgba(251, 191, 36, 0.38);
  color: rgba(255, 251, 242, 0.98);
}

.schedule-builder-preview-month-heading small {
  color: rgba(251, 191, 36, 0.72);
  font-size: 0.74rem;
  font-weight: 850;
}

.schedule-builder-preview-month-heading span,
.schedule-builder-preview-side-header span {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.8rem;
  font-weight: 800;
}

.schedule-builder-preview-month-stats {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.schedule-builder-preview-month-stats span {
  background: rgba(2, 8, 23, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.64rem;
  color: rgba(203, 213, 225, 0.74);
  display: grid;
  font-size: 0.72rem;
  font-weight: 820;
  gap: 0.12rem;
  padding: 0.46rem 0.5rem;
}

.schedule-builder-preview-month-stats b {
  color: rgba(255, 251, 242, 0.96);
  font-size: 0.98rem;
}

.schedule-builder-preview-month-grid {
  background: rgba(2, 8, 23, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.86rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1.72rem repeat(6, minmax(2.35rem, 1fr));
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-preview-month-grid > span {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.62)),
    rgba(2, 8, 23, 0.46);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0.42rem 0.35rem;
  text-align: center;
}

.schedule-builder-preview-month-grid > span.is-empty,
.schedule-builder-preview-month-grid > button {
  align-content: start;
  background: rgba(15, 23, 42, 0.44);
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: rgba(248, 250, 252, 0.9);
  display: grid;
  gap: 0.12rem;
  min-height: 0;
  padding: 0.42rem;
  position: relative;
  text-align: left;
}

.schedule-builder-preview-month-grid > span.is-empty {
  opacity: 0.28;
}

.schedule-builder-preview-month-grid > button {
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.schedule-builder-preview-month-grid > button.has-context {
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.68), rgba(15, 23, 42, 0.48)),
    rgba(15, 23, 42, 0.52);
}

.schedule-builder-preview-month-grid > button.has-holiday {
  background:
    linear-gradient(145deg, rgba(70, 50, 22, 0.38), rgba(15, 23, 42, 0.52)),
    rgba(15, 23, 42, 0.48);
}

.schedule-builder-preview-month-grid > button:hover,
.schedule-builder-preview-month-grid > button:focus-visible {
  background:
    linear-gradient(145deg, rgba(51, 65, 85, 0.7), rgba(30, 41, 59, 0.5)),
    rgba(30, 41, 59, 0.58);
  outline: 2px solid rgba(125, 211, 252, 0.34);
  outline-offset: -2px;
}

.schedule-builder-preview-month-grid > button.is-selected {
  background:
    linear-gradient(145deg, rgba(37, 99, 235, 0.34), rgba(20, 184, 166, 0.16)),
    rgba(15, 23, 42, 0.82);
  box-shadow: inset 0 0 0 2px rgba(125, 211, 252, 0.8), 0 10px 26px rgba(8, 47, 73, 0.2);
}

.schedule-builder-preview-month-grid > button.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.42);
}

.schedule-builder-preview-month-grid strong {
  font-size: 0.92rem;
}

.schedule-builder-preview-month-grid button em {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 820;
}

.schedule-builder-preview-month-grid button.has-context em {
  color: rgba(226, 232, 240, 0.78);
}

.schedule-builder-preview-markers {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.schedule-builder-preview-markers .schedule-builder-preview-dot {
  height: 0.46rem;
  width: 0.46rem;
}

.schedule-builder-preview-upcoming {
  display: grid;
  gap: 0.38rem;
  padding: 0.5rem 0.56rem;
}

.schedule-builder-preview-upcoming > strong {
  color: rgba(255, 251, 242, 0.96);
  font-size: 0.88rem;
}

.schedule-builder-preview-upcoming > div {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-builder-preview-upcoming article {
  background: rgba(2, 8, 23, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-left-color: rgba(251, 191, 36, 0.28);
  border-radius: 0.62rem;
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.34rem 0.4rem;
}

.schedule-builder-preview-upcoming article b {
  color: rgba(248, 250, 252, 0.95);
  font-size: 0.78rem;
}

.schedule-builder-preview-upcoming article span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-preview-side-panel {
  align-content: start;
  display: grid;
  gap: 0.68rem;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem;
  scrollbar-gutter: stable;
}

.schedule-builder-preview-side-header strong {
  color: rgba(255, 251, 242, 0.98);
  font-size: 1.05rem;
}

.schedule-builder-generated-section {
  display: grid;
  gap: 0.54rem;
  padding: 0.7rem;
}

.schedule-builder-generated-section h4 {
  align-items: center;
  color: rgba(248, 250, 252, 0.94);
  display: flex;
  font-size: 0.92rem;
  gap: 0.45rem;
  margin: 0;
}

.schedule-builder-generated-section p {
  color: rgba(203, 213, 225, 0.66);
  margin: 0;
}

.schedule-builder-generated-list {
  display: grid;
  gap: 0.44rem;
}

.schedule-builder-generated-list details {
  background: rgba(2, 8, 23, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.64rem;
  min-width: 0;
  overflow: hidden;
}

.schedule-builder-generated-list summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.56rem 0.62rem;
}

.schedule-builder-generated-list summary::marker {
  color: rgba(125, 211, 252, 0.82);
}

.schedule-builder-generated-list details[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.schedule-builder-generated-list details p {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.78rem;
  line-height: 1.42;
  margin: 0;
  padding: 0.5rem 0.72rem 0.62rem 1.15rem;
}

.schedule-builder-generated-list summary span {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.schedule-builder-generated-list summary strong,
.schedule-builder-generated-list summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-generated-list summary strong {
  color: rgba(248, 250, 252, 0.98);
  font-size: 1.04rem;
  line-height: 1.18;
}

.schedule-builder-generated-list summary small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.76rem;
}

.schedule-builder-generated-list summary em {
  color: rgba(203, 213, 225, 0.76);
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
}

.schedule-builder-preview-wide-action {
  width: 100%;
}

.schedule-builder-item-explanation {
  display: grid;
  gap: 0.34rem;
  margin: 0;
  padding: 0.58rem 0.72rem 0.7rem;
}

.schedule-builder-item-explanation div {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: 5.2rem minmax(0, 1fr);
}

.schedule-builder-item-explanation dt {
  color: rgba(125, 211, 252, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-builder-item-explanation dd {
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.schedule-builder-practice-block-day-list {
  display: grid;
  gap: 0.48rem;
}

.schedule-builder-practice-block-detail {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.11), transparent 55%),
    rgba(2, 8, 23, 0.36);
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 0.7rem;
  overflow: hidden;
}

.schedule-builder-practice-block-detail > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.62rem 0.7rem;
}

.schedule-builder-practice-block-detail > summary::marker,
.schedule-builder-why-detail > summary::marker {
  color: rgba(125, 211, 252, 0.86);
}

.schedule-builder-practice-block-detail > summary span {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.schedule-builder-practice-block-detail > summary strong {
  color: rgba(248, 250, 252, 0.98);
  font-size: 1.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-practice-block-detail > summary small {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-practice-block-detail > summary em {
  color: rgba(203, 213, 225, 0.82);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.schedule-builder-practice-block-detail[open] {
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(18, 58, 75, 0.84), rgba(10, 21, 39, 0.88));
  border-color: rgba(45, 212, 191, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.12),
    inset 4px 0 0 rgba(45, 212, 191, 0.82),
    0 0 0 2px rgba(45, 212, 191, 0.1),
    0 16px 34px rgba(45, 212, 191, 0.12);
}

.schedule-builder-practice-block-detail[open] > summary {
  border-bottom: 1px solid rgba(153, 246, 228, 0.16);
}

.schedule-builder-source-help {
  display: grid;
  gap: 0.68rem;
}

.schedule-builder-source-help p {
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.schedule-builder-source-help strong {
  color: rgba(248, 250, 252, 0.98);
  font-weight: 950;
}

.schedule-builder-source-help ul {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 8rem),
    rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 12px;
  color: rgba(226, 232, 240, 0.9);
  display: grid;
  gap: 0.32rem;
  margin: 0;
  padding: 0.72rem 0.9rem 0.72rem 1.65rem;
}

.schedule-builder-source-help li {
  line-height: 1.3;
}

.schedule-builder-practice-block-generated-items {
  counter-reset: generated-practice-item;
  display: grid;
  gap: 0.48rem;
  list-style: none;
  margin: 0;
  padding: 0.62rem;
}

.schedule-builder-practice-block-generated-items li {
  align-items: start;
  background: rgba(2, 8, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 0.62rem;
  counter-increment: generated-practice-item;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.56rem 0.62rem 0.56rem 2.2rem;
  position: relative;
}

.schedule-builder-practice-block-generated-items li::before {
  color: rgba(125, 211, 252, 0.9);
  content: counter(generated-practice-item) ".";
  font-size: 0.88rem;
  font-weight: 950;
  left: 0.72rem;
  position: absolute;
  top: 0.64rem;
}

.schedule-builder-practice-block-generated-items li > span {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.schedule-builder-practice-block-generated-items li > span strong {
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.2;
}

.schedule-builder-practice-block-generated-items li > span small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.76rem;
}

.schedule-builder-why-detail {
  justify-self: end;
  min-width: min(16rem, 100%);
}

.schedule-builder-why-detail > summary {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.94);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 950;
  padding: 0.28rem 0.5rem;
  text-align: center;
}

.schedule-builder-why-detail[open] > summary {
  border-color: rgba(45, 212, 191, 0.44);
  color: rgba(204, 251, 241, 0.96);
  margin-bottom: 0.42rem;
}

.schedule-builder-why-detail .schedule-builder-item-explanation {
  background: rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.58rem;
  padding: 0.5rem;
}

.secondary-button.schedule-builder-preview-nav-button,
#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 50%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.82));
  border: 1px solid rgba(125, 211, 252, 0.22);
  box-shadow: 0 0.7rem 1.45rem rgba(2, 8, 23, 0.24);
  color: rgba(226, 232, 240, 0.96);
}

.secondary-button.schedule-builder-preview-nav-button:hover,
.secondary-button.schedule-builder-preview-nav-button:focus-visible,
#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:hover,
#guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:focus-visible {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.2), transparent 54%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 90, 0.86));
  border-color: rgba(34, 211, 238, 0.38);
  color: #f8fafc;
  transform: translateY(-1px);
}

.schedule-builder-day-header {
  justify-content: center;
  text-align: center;
}

.schedule-builder-day-header > div {
  min-width: min(32rem, 70vw);
}

.schedule-builder-day-header strong {
  color: rgba(248, 250, 252, 0.96);
  display: block;
  font-size: clamp(1.42rem, 2vw, 2.1rem);
  margin-top: 0.18rem;
}

.schedule-builder-day-stats {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.58rem 0.65rem;
}

.schedule-builder-day-stats article {
  border-left: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 0.14rem;
  padding: 0.22rem 0.58rem;
}

.schedule-builder-day-stats article:first-child {
  border-left: 0;
}

.schedule-builder-day-stats span,
.schedule-builder-day-side span,
.schedule-builder-day-side p {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.78rem;
  margin: 0;
}

.schedule-builder-day-stats strong {
  color: #f8fafc;
  font-size: 1.16rem;
}

.schedule-builder-day-layout {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.schedule-builder-day-layout main {
  display: grid;
  gap: 0.58rem;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.schedule-builder-day-side,
.schedule-builder-day-explain {
  align-content: start;
  display: grid;
  gap: 0.64rem;
  min-height: 0;
  overflow: auto;
  padding: 0.8rem;
  scrollbar-gutter: stable;
}

.schedule-builder-day-side section,
.schedule-builder-day-explain section {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 0.38rem;
  padding-bottom: 0.62rem;
}

.schedule-builder-day-side section:last-child,
.schedule-builder-day-explain section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.schedule-builder-day-side h4,
.schedule-builder-day-explain h4 {
  color: #f8fafc;
  margin: 0;
}

.schedule-builder-day-side strong,
.schedule-builder-day-explain li strong {
  color: #f8fafc;
}

.schedule-builder-day-explain {
  background:
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.11), transparent 45%),
    rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 0.9rem;
}

.schedule-builder-day-explain span {
  color: rgba(125, 211, 252, 0.88);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-builder-day-explain ol {
  counter-reset: schedule-explain;
  display: grid;
  gap: 0.46rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-builder-day-explain li {
  background: rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.62rem;
  counter-increment: schedule-explain;
  display: grid;
  gap: 0.12rem;
  padding: 0.52rem 0.58rem 0.52rem 2.15rem;
  position: relative;
}

.schedule-builder-day-explain li::before {
  align-items: center;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.94);
  content: counter(schedule-explain);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 950;
  height: 1.2rem;
  justify-content: center;
  left: 0.58rem;
  position: absolute;
  top: 0.58rem;
  width: 1.2rem;
}

.schedule-builder-day-explain li small,
.schedule-builder-day-explain li em,
.schedule-builder-day-explain p {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
  margin: 0;
}

.schedule-builder-day-explain li small {
  color: rgba(226, 232, 240, 0.86);
  font-weight: 850;
}

.schedule-builder-report-issue-placeholder {
  justify-self: stretch;
  opacity: 0.72;
}

.schedule-builder-day-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.schedule-builder-day-tags span {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.92);
  font-weight: 850;
  padding: 0.34rem 0.52rem;
}

.schedule-builder-day-footer {
  background: rgba(15, 23, 42, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.8rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.5rem;
}

.schedule-builder-preview-calendar-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.schedule-builder-day-details-modal {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.schedule-builder-day-details-modal {
  gap: 0.65rem;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

@media (max-width: 960px) {
  .schedule-builder-preview-layout,
  .schedule-builder-day-layout {
    align-content: start;
    display: block;
    grid-template-columns: 1fr;
    overflow: auto;
    padding-right: 0.18rem;
    scrollbar-gutter: stable;
  }

  .schedule-builder-preview-main,
  .schedule-builder-preview-side-panel {
    max-height: none;
    overflow: visible;
  }

  .schedule-builder-preview-main {
    margin-bottom: 1rem;
    min-height: max-content;
  }

  .schedule-builder-preview-month-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .schedule-builder-preview-upcoming > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-builder-day-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .schedule-builder-preview-topbar,
  .schedule-builder-preview-month-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-builder-preview-controls {
    justify-content: stretch;
  }

  .schedule-builder-preview-controls > button {
    flex: 1 1 auto;
  }

  .schedule-builder-preview-month-stats,
  .schedule-builder-preview-upcoming > div,
  .schedule-builder-day-stats {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-builder-preview-month-grid > span.is-empty,
  .schedule-builder-preview-month-grid > button {
    min-height: 4rem;
    padding: 0.5rem;
  }

  .schedule-builder-preview-month-grid button em {
    font-size: 0.62rem;
  }
}

.guidance-modal-message {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.guidance-modal-actions {
  justify-content: flex-end;
}

.abandoned-session-status {
  align-items: center;
  background: linear-gradient(180deg, #fff8ed, #fff3dc);
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: 999px;
  color: #92400e;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 850;
  gap: 0.35rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0.38rem 0.62rem;
  width: fit-content;
}

.abandoned-session-status::before {
  background: #f59e0b;
  border-radius: 999px;
  content: "";
  height: 0.48rem;
  width: 0.48rem;
}

.abandoned-session-modal-card {
  max-width: 560px !important;
}

.abandoned-session-modal-body {
  display: grid;
  gap: 0.9rem;
  margin: 0.2rem 0 1.05rem;
}

.abandoned-session-countdown {
  align-items: center;
  background: rgba(255, 248, 237, 0.8);
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 16px;
  display: grid;
  gap: 0.24rem;
  justify-items: center;
  padding: 1rem;
  text-align: center;
}

.abandoned-session-countdown span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.abandoned-session-countdown strong {
  color: var(--text);
  font-size: 2.35rem;
  line-height: 1;
}

.abandoned-session-recovery-summary {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(147, 123, 88, 0.16);
  border-radius: 16px;
  display: grid;
  gap: 0.22rem;
  padding: 0.85rem;
}

.abandoned-session-recovery-summary span,
.abandoned-session-recovery-summary small,
.abandoned-session-recovery-note {
  color: var(--muted);
}

.abandoned-session-recovery-summary span {
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.abandoned-session-recovery-summary strong {
  color: var(--text);
  font-size: 1rem;
}

.abandoned-session-recovery-note {
  font-size: 0.9rem;
  margin: 0;
}

.abandoned-session-adjust-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.abandoned-session-adjust-grid button {
  min-height: 3rem;
}

.abandoned-session-custom-time {
  display: grid;
  gap: 0.35rem;
}

.abandoned-session-custom-time span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.abandoned-session-custom-time input {
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  padding: 0.72rem 0.78rem;
}

.abandoned-session-modal-actions {
  gap: 0.55rem;
}

.abandoned-session-modal-actions:has(.abandoned-session-action-section) {
  align-items: stretch;
  display: grid;
  gap: 0.72rem;
  justify-content: stretch;
}

.abandoned-session-action-section {
  border-top: 1px solid rgba(147, 123, 88, 0.14);
  display: grid;
  gap: 0.42rem;
  padding-top: 0.62rem;
}

.abandoned-session-action-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.abandoned-session-action-section h3 {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.abandoned-session-action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  justify-content: flex-end;
}

.abandoned-session-action-section.is-primary-actions .abandoned-session-action-controls {
  justify-content: flex-start;
}

.abandoned-session-action-section.is-primary-actions button:first-child {
  min-width: 10rem;
}

.abandoned-session-action-section.is-danger-zone h3 {
  color: #b91c1c;
}

.subtitle,
.section-note {
  color: var(--muted);
  margin-bottom: 0;
}

.version-badge {
  background: var(--text);
  border-radius: 999px;
  color: white;
  flex: 0 0 auto;
  font-weight: 800;
  padding: 0.45rem 0.75rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  margin: 1rem 0;
  padding: 1.25rem;
}

.session-card {
  border-color: rgba(31, 94, 255, 0.22);
}

.session-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.current-item {
  background: #fbfcff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
}

.current-item h3 {
  font-size: 1.45rem;
  margin-bottom: 0.4rem;
}

.metronome-card {
  align-items: center;
  background: #fffdf7;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr minmax(260px, 360px);
  padding: 1rem;
}

.metronome-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.metronome-controls {
  display: grid;
  gap: 0.55rem;
}

.metronome-controls label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.metronome-controls input[type="range"] {
  padding: 0;
}


.session-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.session-queue {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.25rem;
}

.queue-item {
  color: var(--muted);
  padding: 0.35rem 0.25rem;
}

.queue-item.is-current {
  color: var(--text);
  font-weight: 800;
}

.queue-item.is-complete {
  opacity: 0.55;
  text-decoration: line-through;
}

.queue-item.is-skipped {
  color: #fbbf24;
}


.log-card {
  border-color: rgba(6, 118, 71, 0.18);
}

.activity-log-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.activity-log-item {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  gap: 0.8rem;
  padding: 0.75rem;
}

.log-outcome {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.28rem 0.6rem;
}

.log-outcome.is-done {
  background: var(--success-bg);
  color: var(--success);
}

.log-outcome.is-skipped {
  background: var(--warning-bg);
  color: var(--warning);
}

.log-content {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.practice-log-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.practice-log-action-button,
.modal-card .practice-log-action-button {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  min-height: 2rem;
  padding: 0.34rem 0.58rem;
}

.practice-log-action-button.is-danger {
  border-color: rgba(185, 28, 28, 0.22);
  color: #b91c1c;
}

.practice-log-view {
  display: grid;
  gap: 0.55rem;
}

.practice-log-view-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 123, 88, 0.13);
  border-radius: 14px;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr);
  padding: 0.72rem 0.8rem;
}

.practice-log-view-row span,
.practice-log-editor span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.practice-log-view-row strong {
  color: var(--text);
  min-width: 0;
}

.practice-log-view blockquote {
  background: rgba(255, 255, 255, 0.72);
  border-left: 3px solid rgba(14, 165, 233, 0.45);
  border-radius: 12px;
  color: var(--text);
  margin: 0;
  padding: 0.75rem 0.85rem;
}

.practice-log-editor {
  display: grid;
  gap: 0.9rem;
}

.practice-log-field,
.practice-log-duration-editor {
  display: grid;
  gap: 0.35rem;
}

.practice-log-field-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-log-field input,
.practice-log-field select,
.practice-log-field textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 0.68rem 0.72rem;
}

.practice-log-field textarea {
  resize: vertical;
}

.practice-log-duration-editor {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(147, 123, 88, 0.13);
  border-radius: 16px;
  padding: 0.78rem;
}

.practice-log-duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.practice-log-duration-presets button {
  border-radius: 999px;
  min-height: 2.25rem;
  padding: 0.42rem 0.68rem;
}

.practice-log-duration-presets button.is-selected {
  background: var(--text);
  color: #fff;
}

.teacher-report-history-table .practice-log-actions {
  justify-content: flex-start;
}

.progress-journal-session-row .practice-log-actions {
  justify-content: flex-end;
}

.progress-journal-session-row {
  grid-template-columns: 4.8rem minmax(0, 1fr) auto !important;
}

.progress-history-item {
  align-items: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.practice-notes-history-item .practice-log-actions {
  justify-content: flex-start;
  margin-top: 0.35rem;
}

.myzone-workspace-tabs {
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 20px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0;
  padding: 0.45rem;
}

.myzone-workspace-tabs button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  color: rgba(203, 213, 225, 0.74);
  cursor: pointer;
  display: grid;
  gap: 0.12rem;
  justify-items: start;
  padding: 0.72rem 0.82rem;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.myzone-workspace-tabs button:hover {
  background: rgba(255, 255, 255, 0.052);
  border-color: rgba(148, 163, 184, 0.16);
  color: rgba(248, 250, 252, 0.92);
  transform: translateY(-1px);
}

.myzone-workspace-tabs button.is-active {
  background:
    radial-gradient(circle at 20% 0%, rgba(94, 234, 212, 0.16), transparent 58%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(15, 23, 42, 0.64));
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
  color: #f8fafc;
}

.myzone-workspace-tabs strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.myzone-workspace-tabs small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.74rem;
}

.progress-review-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.10), transparent 42%),
    linear-gradient(180deg, rgba(28, 40, 66, 0.68), rgba(13, 22, 39, 0.62));
  border: 1px solid rgba(221, 230, 247, 0.12);
  border-radius: 24px;
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
}

.progress-review-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.progress-review-header h3 {
  color: rgba(248, 250, 252, 0.94);
  font-size: 1.18rem;
  line-height: 1.15;
  margin: 0.2rem 0 0;
}

.progress-review-header p {
  color: rgba(203, 213, 225, 0.64);
  margin: 0.3rem 0 0;
}

.teacher-report-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-report-panel {
  display: grid;
  gap: 1rem;
  max-height: none;
  overflow: visible;
}

.teacher-report-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-report-stat,
.teacher-report-section {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(30, 41, 59, 0.46));
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 16px;
  padding: 1rem;
}

.teacher-report-stat {
  display: grid;
  gap: 0.18rem;
}

.teacher-report-stat strong {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 900;
}

.teacher-report-stat span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.82rem;
}

.teacher-report-section h4,
.teacher-report-section p {
  margin: 0 0 0.55rem;
}

.teacher-report-section p {
  color: rgba(226, 232, 240, 0.72);
}

.teacher-report-wide-section {
  grid-column: 1 / -1;
}

.teacher-report-recordings,
.teacher-report-history,
.teacher-report-list {
  display: grid;
  gap: 0.65rem;
}

.teacher-report-recording-card,
.teacher-report-row,
.teacher-report-history-table {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.54));
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
}

.teacher-report-recording-card,
.teacher-report-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
}

.teacher-report-recording-card small,
.teacher-report-row small {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.74rem;
  font-weight: 760;
}

.teacher-report-recording-card strong,
.teacher-report-row span {
  color: #f8fafc;
  font-weight: 850;
}

.teacher-report-recording-card p,
.teacher-report-row p,
.teacher-report-muted,
.teacher-report-empty {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

.teacher-report-recording-card audio {
  margin-top: 0.25rem;
  width: 100%;
}

.teacher-report-history {
  overflow-x: auto;
}

.teacher-report-history-table {
  border-collapse: collapse;
  overflow: hidden;
  width: 100%;
}

.teacher-report-history-table th,
.teacher-report-history-table td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.1);
  color: rgba(226, 232, 240, 0.86);
  padding: 0.65rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.teacher-report-history-table th {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.teacher-report-history-table tr:last-child td {
  border-bottom: 0;
}

.teacher-report-chart,
.progress-donut-breakdown {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(110px, 0.78fr) minmax(0, 1fr);
}

.progress-donut-chart {
  align-items: center;
  aspect-ratio: 1;
  background: var(--donut-gradient, rgba(148, 163, 184, 0.16));
  border-radius: 999px;
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 1.25rem;
  position: relative;
}

.progress-donut-chart::after {
  background: rgba(8, 17, 31, 0.92);
  border-radius: inherit;
  content: "";
  inset: 22%;
  position: absolute;
}

.progress-donut-chart strong,
.progress-donut-chart span {
  position: relative;
  z-index: 1;
}

.progress-donut-chart strong {
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 900;
}

.progress-donut-chart span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.72rem;
  margin-top: -1.8rem;
}

.progress-donut-legend {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
}

.progress-donut-legend-item {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 0.65rem minmax(0, 1fr) auto;
  min-width: 0;
}

.progress-donut-legend-item i {
  background: var(--legend-color, #8b5cf6);
  border-radius: 999px;
  height: 0.56rem;
  width: 0.56rem;
}

.progress-donut-legend-item span {
  color: rgba(248, 250, 252, 0.9);
  min-width: 0;
  overflow-wrap: anywhere;
}

.progress-donut-legend-item strong {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.86rem;
  white-space: nowrap;
}

.progress-trend-bars {
  align-items: end;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(30, minmax(5px, 1fr));
  min-height: 8.8rem;
}

.progress-trend-bars span {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px 999px 4px 4px;
  display: block;
  height: max(0.45rem, var(--bar-height, 0%));
  min-height: 0.45rem;
}

.progress-trend-bars span.has-practice {
  background: linear-gradient(180deg, #67e8f9, #8b5cf6);
  box-shadow: 0 8px 22px rgba(34, 211, 238, 0.16);
}

.progress-primary-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.progress-period-navigation {
  align-items: center;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  margin: 1rem 0;
  padding: 0.7rem;
}

.progress-view-mode-selector {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  display: inline-grid;
  gap: 0.28rem;
  grid-template-columns: repeat(3, minmax(4rem, 1fr));
  padding: 0.28rem;
}

.progress-view-mode-selector button,
.progress-period-nav-button {
  border-radius: 10px;
}

.progress-view-mode-selector button {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(30, 41, 59, 0.72);
  cursor: pointer;
  font-weight: 850;
  min-height: 2.25rem;
  padding: 0.36rem 0.62rem;
}

.progress-view-mode-selector button.is-active {
  background: #ffffff;
  border-color: rgba(34, 197, 94, 0.24);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.progress-period-stepper {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  justify-content: flex-end;
  min-width: 0;
}

.progress-period-label {
  color: #0f172a;
  font-size: 0.98rem;
  line-height: 1.2;
  min-width: min(18rem, 100%);
  text-align: center;
}

.progress-period-history-panel,
.progress-journal-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.74));
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 18px;
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem;
}

.progress-period-history-header h3,
.progress-journal-header h3 {
  color: #172033;
  font-size: 1.14rem;
  line-height: 1.2;
  margin: 0.18rem 0 0;
}

.progress-period-history-header p,
.progress-journal-header p {
  color: rgba(51, 65, 85, 0.72);
  margin: 0.25rem 0 0;
}

.progress-period-summary-stats {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-period-summary-stat {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 0.12rem;
  padding: 0.72rem;
}

.progress-period-summary-stat strong {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 900;
}

.progress-period-summary-stat span {
  color: rgba(71, 85, 105, 0.78);
  font-size: 0.78rem;
  font-weight: 760;
}

.progress-period-history-list,
.progress-journal-entries {
  display: grid;
  gap: 0.72rem;
}

.progress-history-item,
.progress-day-summary-card,
.progress-month-week-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.15);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.progress-history-item {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
}

.progress-history-item-content {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.progress-history-item-content strong {
  color: #172033;
}

.progress-history-goals {
  color: rgba(37, 99, 235, 0.78);
  font-weight: 760;
}

.progress-day-summary-card,
.progress-month-week-card {
  display: grid;
  gap: 0.58rem;
  padding: 0.85rem;
}

.progress-day-summary-card.is-empty,
.progress-month-week-card.is-empty {
  background: rgba(248, 250, 252, 0.62);
  border-style: dashed;
  box-shadow: none;
}

.progress-day-summary-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  justify-content: space-between;
}

.progress-day-summary-heading strong {
  color: #172033;
}

.progress-day-summary-heading span,
.progress-day-summary-note {
  color: rgba(71, 85, 105, 0.76);
  font-size: 0.82rem;
  margin: 0;
}

.progress-item-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.progress-item-pill-row span {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.16);
  border-radius: 999px;
  color: #166534;
  font-size: 0.76rem;
  font-weight: 820;
  padding: 0.24rem 0.5rem;
}

.progress-item-pill-row .progress-muted-pill {
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.12);
  color: rgba(71, 85, 105, 0.72);
}

.progress-month-day-list,
.progress-journal-index-days {
  display: grid;
  gap: 0.4rem;
}

.progress-month-day-list span {
  color: rgba(51, 65, 85, 0.82);
  font-size: 0.84rem;
}

.progress-journal-panel {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(250, 247, 239, 0.92));
  background-size: 100% 100%, 100% 100%;
  border-color: rgba(120, 113, 108, 0.2);
}

.progress-journal-page,
.progress-journal-index-week {
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(250, 247, 239, 0.96));
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(68, 64, 60, 0.08);
  display: grid;
  gap: 0.92rem;
  padding: 1rem 1rem 1rem 1.25rem;
}

.progress-journal-page-header {
  display: grid;
  gap: 0.75rem;
}

.progress-journal-date {
  color: #292524;
  font-size: 1.05rem;
  font-weight: 920;
}

.progress-journal-page-stats {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.progress-journal-page-stats span {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(120, 113, 108, 0.13);
  border-radius: 12px;
  display: grid;
  gap: 0.08rem;
  padding: 0.58rem;
}

.progress-journal-page-stats strong {
  color: #1f2937;
}

.progress-journal-page-stats small,
.progress-journal-muted {
  color: rgba(87, 83, 78, 0.76);
}

.progress-journal-section {
  display: grid;
  gap: 0.45rem;
}

.progress-journal-section h4,
.progress-journal-index-week h4 {
  color: #292524;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.progress-journal-section p {
  color: rgba(68, 64, 60, 0.86);
  margin: 0;
}

.progress-journal-section blockquote {
  border-left: 3px solid rgba(34, 197, 94, 0.34);
  color: rgba(68, 64, 60, 0.9);
  margin: 0;
  padding: 0.1rem 0 0.1rem 0.7rem;
}

.progress-journal-month-index {
  display: grid;
  gap: 0.75rem;
}

.progress-journal-index-days article {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(120, 113, 108, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.18rem;
  padding: 0.62rem 0.7rem;
}

.progress-journal-index-days strong {
  color: #292524;
}

.progress-journal-index-days span {
  color: rgba(87, 83, 78, 0.78);
  font-size: 0.84rem;
}

@media (max-width: 640px) {
  .myzone-workspace-tabs {
    grid-template-columns: 1fr;
  }

  .progress-review-grid,
  .progress-period-summary-stats,
  .progress-journal-page-stats {
    grid-template-columns: 1fr;
  }

  .progress-period-navigation,
  .progress-period-stepper {
    align-items: stretch;
    flex-direction: column;
  }

  .progress-view-mode-selector {
    width: 100%;
  }

  .progress-period-stepper > button,
  .progress-period-label {
    width: 100%;
  }

  .progress-period-label {
    order: -1;
  }

  .progress-history-item {
    align-items: start;
    flex-direction: column;
  }
}

/* Phase 1 Progress workspace visual-density pass. */
.log-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.16), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(34, 211, 238, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(3, 10, 20, 0.96), rgba(7, 16, 30, 0.94)) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
  color: rgba(248, 250, 252, 0.94);
}

.log-card > .section-header {
  align-items: start;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, auto);
  margin-bottom: 0.72rem;
  padding-bottom: 0.72rem;
}

.log-card .screen-title {
  color: #f8fafc;
}

.log-card .section-note {
  color: rgba(203, 213, 225, 0.72);
}

.progress-header-actions {
  align-items: end;
  display: grid;
  gap: 0.55rem;
  justify-items: end;
  min-width: 0;
}

.progress-command-row {
  gap: 0.45rem;
}

.progress-command-row button {
  min-height: 2.35rem;
}

.progress-primary-tabs.myzone-workspace-tabs {
  background: rgba(2, 6, 23, 0.58);
  border-color: rgba(99, 102, 241, 0.22);
  border-radius: 14px;
  gap: 0.35rem;
  margin: 0.65rem 0;
  padding: 0.32rem;
}

.progress-primary-tabs.myzone-workspace-tabs button {
  align-items: center;
  border-radius: 10px;
  display: grid;
  gap: 0.04rem 0.6rem;
  grid-template-columns: minmax(0, 1fr);
  min-height: 3.05rem;
  padding: 0.48rem 0.7rem;
}

.progress-primary-tabs.myzone-workspace-tabs button.is-active {
  background:
    linear-gradient(135deg, rgba(91, 33, 182, 0.62), rgba(14, 165, 233, 0.16)),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(216, 180, 254, 0.1),
    0 12px 26px rgba(88, 28, 135, 0.2);
}

.progress-primary-tabs.myzone-workspace-tabs strong {
  font-size: 0.9rem;
}

.progress-primary-tabs.myzone-workspace-tabs small {
  font-size: 0.7rem;
}

.progress-period-navigation {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0.45rem;
  justify-content: end;
  margin: 0;
  padding: 0;
}

.progress-view-mode-selector {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(125, 211, 252, 0.18);
  border-radius: 10px;
  gap: 0.12rem;
  grid-template-columns: repeat(3, minmax(3.7rem, auto));
  padding: 0.18rem;
}

.progress-view-mode-selector button {
  color: rgba(226, 232, 240, 0.72);
  min-height: 2rem;
  padding: 0.26rem 0.48rem;
}

.progress-view-mode-selector button.is-active {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.9), rgba(59, 130, 246, 0.48));
  border-color: rgba(216, 180, 254, 0.35);
  box-shadow: 0 9px 18px rgba(76, 29, 149, 0.28);
  color: #f8fafc;
}

.progress-period-stepper {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 10px;
  gap: 0.22rem;
  padding: 0.18rem;
}

.progress-period-label {
  color: #f8fafc;
  font-size: 0.9rem;
  min-width: 12rem;
  padding: 0 0.4rem;
}

.progress-period-nav-button,
#progressPeriodTodayButton {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(125, 211, 252, 0.18);
  color: rgba(248, 250, 252, 0.88);
  min-height: 2rem;
  padding: 0.24rem 0.52rem;
}

#progressPeriodTodayButton {
  background: rgba(37, 99, 235, 0.28);
}

.progress-overview-panel,
.teacher-report-panel,
.progress-review-panel {
  color: rgba(248, 250, 252, 0.9);
}

.progress-overview-header {
  display: none;
}

.progress-overview-stats {
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-overview-stat,
.progress-period-summary-stat,
.teacher-report-stat {
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.16), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.72));
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 0.78rem;
}

.progress-overview-stat strong,
.progress-period-summary-stat strong,
.teacher-report-stat strong {
  color: #f8fafc;
}

.progress-overview-stat span,
.progress-period-summary-stat span,
.teacher-report-stat span {
  color: rgba(203, 213, 225, 0.72);
}

.progress-insight-cards {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.62rem 0;
}

.progress-insight-card {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, var(--insight-glow, rgba(168, 85, 247, 0.18)), transparent 48%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.7));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 0.68rem;
}

.progress-insight-card.is-streak { --insight-glow: rgba(168, 85, 247, 0.28); }
.progress-insight-card.is-category { --insight-glow: rgba(14, 165, 233, 0.24); }
.progress-insight-card.is-goal { --insight-glow: rgba(34, 197, 94, 0.22); }
.progress-insight-card.is-best { --insight-glow: rgba(251, 146, 60, 0.22); }

.progress-insight-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #c084fc;
  display: inline-flex;
  font-weight: 950;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.progress-insight-card div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.progress-insight-card small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.7rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.progress-insight-card strong {
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-insight-card span:not(.progress-insight-icon) {
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.76rem;
}

.progress-visual-grid {
  gap: 0.65rem;
}

.progress-visual-card,
.teacher-report-section,
.teacher-report-row,
.teacher-report-recording-card,
.teacher-report-history-table {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.74));
  border-color: rgba(96, 165, 250, 0.16);
  border-radius: 12px;
}

.progress-visual-card {
  padding: 0.82rem;
}

.progress-period-history-panel,
.progress-journal-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(2, 8, 23, 0.66));
  border-color: rgba(94, 234, 212, 0.16);
  border-radius: 14px;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.78rem;
}

.progress-period-history-header h3,
.progress-journal-header h3 {
  color: #f8fafc;
  font-size: 1rem;
}

.progress-period-history-header p,
.progress-journal-header p {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.84rem;
}

.progress-period-summary-stats {
  gap: 0.45rem;
}

.progress-history-item,
.progress-day-summary-card,
.progress-month-week-card,
.progress-journal-page,
.progress-journal-index-week {
  background:
    radial-gradient(circle at 5% 0%, rgba(168, 85, 247, 0.13), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(2, 8, 23, 0.78));
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.progress-history-item,
.progress-day-summary-card,
.progress-month-week-card {
  padding: 0.68rem;
}

.progress-day-summary-card[role="button"],
.progress-month-day-list button,
.progress-journal-index-days button,
.progress-drill-heading {
  cursor: pointer;
}

.progress-day-summary-card[role="button"]:hover,
.progress-month-day-list button:hover,
.progress-journal-index-days button:hover,
.progress-drill-heading:hover {
  border-color: rgba(168, 85, 247, 0.42);
}

.progress-history-item-content strong,
.progress-day-summary-heading strong,
.progress-journal-date,
.progress-journal-index-days strong {
  color: #f8fafc;
}

.progress-day-summary-heading span,
.progress-day-summary-note,
.progress-month-day-list button,
.progress-journal-index-days span,
.progress-journal-muted,
.progress-journal-section p {
  color: rgba(203, 213, 225, 0.76);
}

.progress-item-pill-row span {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.22);
  color: #99f6e4;
}

.progress-item-pill-row span:nth-child(3n + 2) {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

.progress-item-pill-row span:nth-child(3n) {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.24);
  color: #e9d5ff;
}

.progress-month-day-list button,
.progress-journal-index-days button,
.progress-drill-heading {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  color: rgba(226, 232, 240, 0.82);
  font: inherit;
  padding: 0.42rem 0.52rem;
  text-align: left;
}

.progress-drill-heading {
  color: #f8fafc;
  font-weight: 900;
}

.progress-journal-section h4,
.progress-journal-index-week h4,
.progress-journal-section blockquote {
  color: rgba(248, 250, 252, 0.9);
}

.progress-journal-page-stats span {
  background: rgba(15, 23, 42, 0.52);
  border-color: rgba(148, 163, 184, 0.14);
}

.progress-journal-page-stats strong {
  color: #f8fafc;
}

.progress-journal-section blockquote {
  border-left-color: rgba(168, 85, 247, 0.55);
}

.progress-report-feature-panel.teacher-report-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.18), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.14), transparent 28%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 8, 23, 0.76));
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.28);
  gap: 0.7rem;
  margin: 0.65rem 0 0.78rem;
  padding: 0.85rem;
}

.progress-report-feature-panel .teacher-report-header {
  align-items: center;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.progress-report-feature-panel .teacher-report-header h3 {
  color: #f8fafc;
  font-size: 1.18rem;
  margin: 0.15rem 0 0;
}

.progress-report-feature-panel .teacher-report-header p {
  color: rgba(203, 213, 225, 0.72);
  margin: 0.18rem 0 0;
}

.progress-report-feature-panel .teacher-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: end;
}

.progress-report-feature-panel .teacher-report-actions button {
  min-height: 2.35rem;
}

.progress-report-feature-panel .teacher-report-summary {
  gap: 0.45rem;
}

.progress-report-feature-panel .teacher-report-grid {
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-report-feature-panel .teacher-report-wide-section {
  grid-column: span 2;
}

.progress-report-feature-panel .teacher-report-section {
  padding: 0.72rem;
}

.progress-report-feature-panel .teacher-report-history {
  max-height: 12rem;
}

@media (max-width: 980px) {
  .log-card > .section-header,
  .progress-report-feature-panel .teacher-report-header {
    grid-template-columns: 1fr;
  }

  .progress-header-actions,
  .progress-report-feature-panel .teacher-report-actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  .progress-period-navigation {
    justify-content: stretch;
  }

  .progress-overview-stats,
  .progress-insight-cards,
  .progress-report-feature-panel .teacher-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .progress-command-row,
  .progress-period-navigation,
  .progress-period-stepper,
  .progress-report-feature-panel .teacher-report-actions {
    width: 100%;
  }

  .progress-overview-stats,
  .progress-insight-cards,
  .progress-report-feature-panel .teacher-report-grid,
  .progress-report-feature-panel .teacher-report-summary {
    grid-template-columns: 1fr;
  }

  .progress-report-feature-panel .teacher-report-wide-section {
    grid-column: auto;
  }
}

/* Progress correction pass: command-center composition over stacked report cards. */
.log-card[data-screen-panel="log"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.12), transparent 32rem),
    radial-gradient(circle at 72% 0%, rgba(168, 85, 247, 0.14), transparent 30rem),
    linear-gradient(145deg, rgba(2, 8, 23, 0.9), rgba(2, 6, 23, 0.82));
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow:
    0 24px 80px rgba(2, 6, 23, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 0.92rem;
}

.log-card[data-screen-panel="log"] > .section-header {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(88, 28, 135, 0.12) 42%, rgba(2, 8, 23, 0.36));
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(15rem, 1fr) auto;
  margin-bottom: 0.6rem;
  padding: 0.72rem 0.82rem;
}

.log-card .screen-title {
  color: #f8fafc;
  font-size: 1.42rem;
  line-height: 1.05;
}

.log-card .section-note {
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.84rem;
}

.progress-header-actions {
  align-content: center;
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto auto;
  justify-items: end;
}

.progress-command-row {
  justify-content: end;
}

.progress-command-row button,
.progress-period-nav-button,
#progressPeriodTodayButton {
  border-radius: 10px;
  font-size: 0.78rem;
  min-height: 2.1rem;
  padding: 0.32rem 0.62rem;
}

.progress-period-navigation {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  justify-content: end;
}

.progress-view-mode-selector,
.progress-period-stepper {
  backdrop-filter: blur(14px);
  background: rgba(2, 8, 23, 0.58);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.progress-view-mode-selector {
  display: grid;
  gap: 0.12rem;
  grid-template-columns: repeat(3, minmax(3.4rem, 1fr));
  padding: 0.18rem;
}

.progress-view-mode-selector button {
  border-radius: 9px;
  color: rgba(226, 232, 240, 0.72);
  min-height: 1.9rem;
  padding: 0.2rem 0.42rem;
}

.progress-view-mode-selector button.is-active {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.96), rgba(6, 182, 212, 0.48));
  box-shadow: 0 10px 24px rgba(88, 28, 135, 0.32);
  color: #fff;
}

.progress-period-stepper {
  align-items: center;
  display: grid;
  gap: 0.18rem;
  grid-template-columns: auto minmax(10rem, 1fr) auto auto;
  padding: 0.18rem;
}

.progress-period-label {
  color: #f8fafc;
  font-size: 0.86rem;
  min-width: 10rem;
  padding: 0 0.34rem;
  text-align: center;
}

.progress-primary-tabs.myzone-workspace-tabs {
  background: rgba(2, 8, 23, 0.42);
  border-color: rgba(125, 211, 252, 0.12);
  border-radius: 13px;
  gap: 0.34rem;
  margin: 0.45rem 0 0.58rem;
  padding: 0.24rem;
}

.progress-primary-tabs.myzone-workspace-tabs button {
  align-items: center;
  border-radius: 10px;
  min-height: 2.72rem;
  padding: 0.42rem 0.62rem;
}

.progress-primary-tabs.myzone-workspace-tabs button.is-active {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.24), transparent 46%),
    linear-gradient(135deg, rgba(88, 28, 135, 0.74), rgba(14, 165, 233, 0.14));
  border-color: rgba(125, 211, 252, 0.42);
}

.progress-primary-tabs.myzone-workspace-tabs strong {
  font-size: 0.88rem;
}

.progress-primary-tabs.myzone-workspace-tabs small {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.68rem;
}

.progress-overview-panel {
  display: grid;
  gap: 0.58rem;
}

.log-card[data-screen-panel="log"] .progress-overview-header {
  display: none !important;
}

.progress-command-center {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: minmax(20rem, 1.16fr) minmax(18rem, 0.84fr);
  grid-template-areas:
    "momentum explore"
    "activity explore"
    "signals signals";
}

.progress-momentum-stage,
.progress-activity-flow,
.progress-explore-map,
.progress-focus-signals {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.64));
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(2, 6, 23, 0.18);
  min-width: 0;
}

.progress-momentum-stage {
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.22), transparent 42%),
    radial-gradient(circle at 74% 0%, rgba(168, 85, 247, 0.22), transparent 40%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 8, 23, 0.68));
  display: grid;
  gap: 0.72rem;
  grid-area: momentum;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.92rem;
  position: relative;
  overflow: hidden;
}

.progress-momentum-stage::after {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.32), rgba(168, 85, 247, 0.3), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 8%;
  position: absolute;
  width: 84%;
}

.progress-momentum-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.progress-momentum-copy h3 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
}

.progress-momentum-copy p {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.86rem;
  margin: 0;
}

.progress-momentum-delta {
  border-radius: 999px;
  color: #bae6fd;
  font-size: 0.75rem;
  font-weight: 850;
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0.26rem 0.52rem;
}

.progress-momentum-delta.is-up {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.progress-momentum-delta.is-down {
  background: rgba(251, 146, 60, 0.16);
  color: #fed7aa;
}

.progress-momentum-ring {
  --momentum-percent: 0%;
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(2, 8, 23, 0.92) 0 58%, transparent 59%),
    conic-gradient(#22d3ee 0 var(--momentum-percent), rgba(30, 41, 59, 0.74) var(--momentum-percent) 100%);
  border-radius: 999px;
  display: grid;
  height: 7.15rem;
  justify-items: center;
  padding: 1rem;
}

.progress-momentum-ring strong {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}

.progress-momentum-ring span {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.68rem;
  font-weight: 820;
  text-transform: uppercase;
}

.progress-momentum-metrics {
  display: grid;
  gap: 0.36rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-signal-pill {
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
}

.progress-signal-pill small {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.62rem;
  font-weight: 880;
  text-transform: uppercase;
}

.progress-signal-pill strong {
  color: #f8fafc;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-signal-pill.is-cyan { border-color: rgba(34, 211, 238, 0.26); }
.progress-signal-pill.is-purple { border-color: rgba(168, 85, 247, 0.28); }
.progress-signal-pill.is-green { border-color: rgba(52, 211, 153, 0.28); }
.progress-signal-pill.is-pink { border-color: rgba(244, 114, 182, 0.28); }

.progress-momentum-spark-wrap {
  display: grid;
  gap: 0.28rem;
  grid-column: 1 / -1;
}

.progress-momentum-spark-wrap > span {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
}

.progress-momentum-spark {
  align-items: end;
  background: rgba(2, 6, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 10px;
  display: grid;
  gap: 0.16rem;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  height: 3rem;
  padding: 0.4rem;
}

.progress-momentum-spark span {
  background: rgba(71, 85, 105, 0.58);
  border-radius: 999px 999px 2px 2px;
  height: var(--bar-height, 10%);
  min-height: 0.22rem;
}

.progress-momentum-spark span.has-practice {
  background: linear-gradient(180deg, #67e8f9, #8b5cf6);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}

.progress-activity-flow {
  display: grid;
  gap: 0.48rem;
  grid-area: activity;
  padding: 0.78rem;
}

.progress-activity-flow header,
.progress-explore-map header,
.progress-focus-signals header,
.progress-journal-index-intro {
  display: grid;
  gap: 0.12rem;
}

.progress-activity-flow h3,
.progress-explore-map h3,
.progress-focus-signals h3,
.progress-journal-index-intro h3 {
  color: #f8fafc;
  font-size: 1rem;
  margin: 0;
}

.progress-explore-map header p,
.progress-journal-index-intro p {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.76rem;
  margin: 0;
}

.progress-activity-list {
  display: grid;
  gap: 0.34rem;
}

.progress-activity-row {
  align-items: center;
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  color: inherit;
  display: grid;
  font: inherit;
  gap: 0.48rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(5rem, auto);
  min-height: 2.72rem;
  padding: 0.44rem 0.52rem;
  text-align: left;
}

.progress-activity-row:hover,
.progress-map-day:hover,
.progress-map-week-button:hover,
.progress-journal-open-button:hover,
.progress-journal-index-days button:hover,
.progress-journal-week-heading:hover {
  border-color: rgba(34, 211, 238, 0.44);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.1);
  transform: translateY(-1px);
}

.progress-activity-marker {
  background: #22d3ee;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
  height: 0.6rem;
  width: 0.6rem;
}

.progress-activity-row.is-purple .progress-activity-marker { background: #a855f7; box-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }
.progress-activity-row.is-green .progress-activity-marker { background: #34d399; box-shadow: 0 0 16px rgba(52, 211, 153, 0.32); }
.progress-activity-row.is-orange .progress-activity-marker { background: #fb923c; box-shadow: 0 0 16px rgba(251, 146, 60, 0.32); }
.progress-activity-row.is-pink .progress-activity-marker { background: #f472b6; box-shadow: 0 0 16px rgba(244, 114, 182, 0.32); }

.progress-activity-copy {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.progress-activity-copy strong,
.progress-activity-detail {
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-activity-copy small {
  color: rgba(203, 213, 225, 0.64);
  font-size: 0.72rem;
}

.progress-activity-detail {
  color: rgba(186, 230, 253, 0.86);
  font-size: 0.74rem;
  justify-self: end;
  max-width: 13rem;
}

.progress-command-empty {
  align-items: center;
  background: rgba(2, 8, 23, 0.38);
  border: 1px dashed rgba(125, 211, 252, 0.22);
  border-radius: 12px;
  color: rgba(203, 213, 225, 0.74);
  display: flex;
  min-height: 6rem;
  padding: 0.9rem;
}

.progress-explore-map {
  display: grid;
  gap: 0.58rem;
  grid-area: explore;
  padding: 0.78rem;
}

.progress-map-month,
.progress-map-week,
.progress-map-day-panel {
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.46), rgba(15, 23, 42, 0.36));
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 13px;
  padding: 0.48rem;
}

.progress-map-weekday-labels,
.progress-map-week-row {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: 4.7rem repeat(7, minmax(0, 1fr));
}

.progress-map-weekday-labels {
  color: rgba(203, 213, 225, 0.54);
  font-size: 0.62rem;
  font-weight: 900;
  margin-bottom: 0.24rem;
  text-align: center;
  text-transform: uppercase;
}

.progress-map-week-row + .progress-map-week-row {
  margin-top: 0.22rem;
}

.progress-map-week-button,
.progress-map-day,
.progress-journal-open-button {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  color: rgba(226, 232, 240, 0.78);
  font: inherit;
}

.progress-map-week-button {
  color: #e9d5ff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.36rem 0.28rem;
  text-align: center;
}

.progress-map-day {
  align-content: center;
  aspect-ratio: 1.05;
  display: grid;
  gap: 0.04rem;
  justify-items: center;
  min-height: 2.25rem;
  overflow: hidden;
  padding: 0.16rem;
  position: relative;
}

.progress-map-day::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.54), transparent 60%);
  content: "";
  inset: 0;
  opacity: var(--activity-level, 0);
  position: absolute;
}

.progress-map-day strong,
.progress-map-day span,
.progress-map-day small {
  position: relative;
  z-index: 1;
}

.progress-map-day strong {
  color: #f8fafc;
  font-size: 0.88rem;
}

.progress-map-day span {
  color: rgba(186, 230, 253, 0.86);
  font-size: 0.58rem;
  font-weight: 850;
}

.progress-map-day small {
  color: rgba(203, 213, 225, 0.54);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-map-day.has-practice {
  background:
    linear-gradient(145deg, rgba(8, 145, 178, 0.26), rgba(91, 33, 182, 0.28));
  border-color: rgba(34, 211, 238, 0.28);
}

.progress-map-day.is-selected {
  border-color: rgba(216, 180, 254, 0.72);
  box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.18), 0 0 24px rgba(168, 85, 247, 0.2);
}

.progress-map-day.is-outside-month {
  background: transparent;
  border-color: transparent;
}

.progress-map-week {
  display: grid;
  gap: 0.32rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.progress-map-week .progress-map-day {
  aspect-ratio: 0.88;
  min-height: 4.8rem;
}

.progress-map-day-panel {
  display: grid;
  gap: 0.5rem;
}

.progress-journal-open-button {
  display: grid;
  gap: 0.1rem;
  padding: 0.64rem;
  text-align: left;
}

.progress-journal-open-button strong {
  color: #f8fafc;
}

.progress-journal-open-button span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.78rem;
}

.progress-focus-signals {
  display: grid;
  gap: 0.52rem;
  grid-area: signals;
  grid-template-columns: minmax(10rem, 0.22fr) minmax(0, 1fr);
  padding: 0.72rem;
}

.progress-signal-list {
  display: grid;
  gap: 0.38rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-signal-row {
  background: rgba(2, 8, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 11px;
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.5rem;
}

.progress-signal-row small {
  color: rgba(203, 213, 225, 0.58);
  display: block;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-signal-row strong {
  color: #f8fafc;
  display: block;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-signal-row span {
  color: rgba(203, 213, 225, 0.68);
  display: block;
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-signal-row i {
  background: rgba(30, 41, 59, 0.74);
  border-radius: 999px;
  display: block;
  height: 0.34rem;
  overflow: hidden;
  position: relative;
}

.progress-signal-row i::before {
  background: #22d3ee;
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: var(--signal-progress, 0%);
}

.progress-signal-row.is-green i::before { background: #34d399; }
.progress-signal-row.is-purple i::before { background: #a855f7; }
.progress-signal-row.is-orange i::before { background: #fb923c; }

.progress-analytics-detail {
  background: rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 14px;
  margin-top: 0.04rem;
  overflow: hidden;
}

.progress-analytics-detail > summary {
  align-items: center;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  gap: 0.42rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.58rem 0.72rem;
}

.progress-analytics-detail > summary::-webkit-details-marker {
  display: none;
}

.progress-analytics-detail > summary span {
  font-size: 0.82rem;
  font-weight: 900;
}

.progress-analytics-detail > summary small {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.72rem;
}

.progress-analytics-detail-grid {
  display: grid;
  gap: 0.58rem;
  padding: 0 0.72rem 0.72rem;
}

.progress-overview-stats,
.progress-insight-cards {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.progress-period-history-panel {
  margin-top: 0;
}

.progress-journal-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.12), transparent 34%),
    radial-gradient(circle at 76% 0%, rgba(168, 85, 247, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.66));
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  margin-top: 0;
  padding: 0.82rem;
}

.progress-journal-header {
  margin-bottom: 0.58rem;
}

.progress-journal-header h3 {
  font-size: 1.08rem;
}

.progress-journal-entries {
  display: grid;
  gap: 0.62rem;
}

.progress-journal-page {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(2, 8, 23, 0.7));
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 0.68rem;
  padding: 0.82rem;
}

.progress-journal-page-header {
  align-items: start;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.progress-journal-date {
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.12;
  margin: 0.12rem 0 0;
}

.progress-journal-page-header p {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.8rem;
  margin: 0.18rem 0 0;
}

.progress-journal-page-stats {
  display: grid;
  gap: 0.34rem;
  grid-template-columns: repeat(2, minmax(5.4rem, 1fr));
}

.progress-journal-page-stats span {
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  display: grid;
  padding: 0.4rem 0.46rem;
}

.progress-journal-page-stats strong {
  color: #f8fafc;
}

.progress-journal-page-stats small {
  color: rgba(203, 213, 225, 0.58);
  font-size: 0.62rem;
  font-weight: 880;
  text-transform: uppercase;
}

.progress-journal-day-nav {
  align-items: stretch;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.13), transparent 48%),
    rgba(2, 8, 23, 0.38);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 14px;
  display: grid;
  gap: 0.4rem;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(10rem, 1fr) auto auto;
  padding: 0.38rem;
}

.progress-journal-nav-button,
.progress-journal-day-current {
  border-radius: 10px;
  min-height: 2.35rem;
  padding: 0.48rem 0.72rem;
}

.progress-journal-nav-button {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.88);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
}

.progress-journal-nav-button:hover {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(125, 211, 252, 0.32);
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(8, 47, 73, 0.2);
}

.progress-journal-nav-button.is-secondary {
  background: rgba(30, 41, 59, 0.58);
}

.progress-journal-day-current {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(125, 211, 252, 0.18);
  display: grid;
  justify-items: center;
}

.progress-journal-day-current small {
  color: rgba(186, 230, 253, 0.7);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-journal-day-current strong {
  color: #f8fafc;
  font-size: 0.84rem;
}

.progress-journal-body {
  align-items: start;
  display: grid;
  gap: 0.58rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
}

.progress-journal-section {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.08), transparent 42%),
    rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  padding: 0.68rem;
}

.progress-journal-session-section {
  min-height: 100%;
}

.progress-journal-goals-section,
.progress-journal-notes-section,
.progress-journal-recordings-section {
  background:
    radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.1), transparent 42%),
    rgba(2, 8, 23, 0.3);
}

.progress-journal-section h4 {
  color: rgba(248, 250, 252, 0.9);
  font-size: 0.74rem;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.progress-journal-session-list {
  display: grid;
  gap: 0.38rem;
}

.progress-journal-session-row {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.56));
  border: 1px solid rgba(125, 211, 252, 0.1);
  border-left: 3px solid #22d3ee;
  border-radius: 12px;
  display: grid;
  gap: 0.48rem;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  padding: 0.5rem 0.58rem;
}

.progress-journal-session-row.is-purple { border-left-color: #a855f7; }
.progress-journal-session-row.is-green { border-left-color: #34d399; }
.progress-journal-session-row.is-orange { border-left-color: #fb923c; }

.progress-journal-session-row > span {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 999px;
  color: rgba(186, 230, 253, 0.9);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.22rem 0.34rem;
  text-align: center;
}

.progress-journal-session-row strong {
  color: #f8fafc;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-journal-session-row small {
  color: rgba(203, 213, 225, 0.62);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-goal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.progress-goal-chip {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 999px;
  color: #bbf7d0;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.24rem 0.46rem;
}

.progress-goal-chip.is-cyan { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.24); color: #a5f3fc; }
.progress-goal-chip.is-purple { background: rgba(168, 85, 247, 0.14); border-color: rgba(168, 85, 247, 0.24); color: #e9d5ff; }
.progress-goal-chip.is-pink { background: rgba(244, 114, 182, 0.14); border-color: rgba(244, 114, 182, 0.24); color: #fbcfe8; }

.progress-journal-section blockquote {
  background: rgba(15, 23, 42, 0.48);
  border-left-color: rgba(34, 211, 238, 0.68);
  border-radius: 0 10px 10px 0;
  color: rgba(248, 250, 252, 0.86);
  margin: 0;
  padding: 0.52rem 0.62rem;
}

.progress-journal-recording-list {
  display: grid;
  gap: 0.36rem;
}

.progress-journal-recording-card {
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 10px;
  display: grid;
  gap: 0.42rem;
  padding: 0.48rem 0.55rem;
}

.progress-journal-recording-card strong {
  color: #f8fafc;
  font-size: 0.82rem;
}

.progress-journal-recording-card small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.7rem;
}

.progress-journal-recording-card p {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.74rem;
  margin: 0;
}

.progress-journal-recording-header {
  align-items: center;
  display: flex;
  gap: 0.42rem;
  min-width: 0;
}

.journal-recording-open {
  background: none;
  border: 0;
  color: #f8fafc;
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-recording-open:hover {
  color: #a5f3fc;
}

.journal-recording-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0;
  padding: 0.18rem 0.42rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.journal-recording-status.is-inbox {
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.24);
  color: #a5f3fc;
}

.journal-recording-status.is-attached {
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.24);
  color: #bbf7d0;
}

.journal-recording-status.is-library {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #e9d5ff;
}

.journal-recording-audio {
  height: 2rem;
  max-width: 100%;
  width: 100%;
}

.progress-journal-recording-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.progress-journal-recording-actions .secondary-button {
  border-radius: 999px;
  font-size: 0.68rem;
  padding: 0.26rem 0.5rem;
}

.progress-journal-recording-actions .journal-recording-delete {
  border-color: rgba(244, 63, 94, 0.34);
  color: #fecdd3;
}

.journal-recording-detail,
.journal-recording-resource-form,
.journal-recording-discovery-card {
  display: grid;
  gap: 0.82rem;
}

.journal-capture-overview {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-capture-metric,
.journal-capture-audio-panel,
.journal-recording-resource-step,
.journal-discard-prompt {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    linear-gradient(145deg, rgba(240, 251, 251, 0.84), rgba(204, 226, 234, 0.8));
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 26px rgba(12, 74, 80, 0.08);
  color: #172b31;
}

.journal-capture-metric {
  display: grid;
  gap: 0.36rem;
  min-width: 0;
  padding: 0.72rem;
}

.journal-capture-metric small,
.journal-capture-audio-panel .progress-kicker,
.journal-recording-resource-step p,
.journal-recording-discovery-card p,
.journal-recording-discovery-card li,
.journal-recording-detail-help,
.journal-recording-collection-choice small,
.journal-discard-prompt p {
  color: #51686d;
  font-size: 0.84rem;
}

.journal-capture-metric strong,
.journal-capture-audio-panel strong,
.journal-recording-resource-step > strong,
.journal-recording-collection-choice strong,
.journal-recording-discovery-card strong,
.journal-discard-prompt strong {
  color: #172b31;
}

.journal-capture-metric strong {
  font-size: 0.9rem;
  line-height: 1.24;
}

.journal-capture-audio-panel {
  display: grid;
  gap: 0.62rem;
  padding: 0.82rem;
}

.journal-capture-audio-panel p {
  color: #51686d;
  margin: 0;
}

.journal-recording-detail-help,
.journal-recording-discovery-card p,
.journal-discard-prompt p {
  margin: 0;
}

.journal-recording-detail-help {
  line-height: 1.5;
}

.journal-recording-discovery-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.journal-recording-resource-step {
  display: grid;
  gap: 0.68rem;
  padding: 0.82rem;
}

.journal-recording-collection-choice {
  display: grid;
  gap: 0.48rem;
}

.journal-recording-collection-choice label {
  align-items: flex-start;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(20, 184, 166, 0.1));
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 14px;
  color: #172b31;
  display: flex;
  gap: 0.55rem;
  font-size: 0.84rem;
  font-weight: 850;
  padding: 0.6rem 0.68rem;
}

.journal-recording-collection-choice input {
  flex: 0 0 auto;
  margin-top: 0.18rem;
}

.journal-recording-collection-choice label > span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.journal-recording-collection-choice label:has(input:checked) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.2), transparent 11rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(125, 211, 252, 0.18));
  border-color: rgba(15, 118, 110, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 22px rgba(12, 74, 80, 0.1);
}

.journal-discard-prompt {
  align-items: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.82rem;
}

.journal-discard-prompt[hidden] {
  display: none;
}

.journal-discard-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
  justify-content: flex-end;
}

.journal-recording-collection-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.journal-recording-collection-examples span {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 999px;
  color: #e9d5ff;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0.2rem 0.44rem;
}

@media (max-width: 720px) {
  .journal-capture-overview,
  .journal-discard-prompt {
    grid-template-columns: 1fr;
  }
}

.progress-journal-week-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.11), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(168, 85, 247, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.66));
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 14px;
  display: grid;
  gap: 0.7rem;
  padding: 0.82rem;
}

.progress-journal-week-header {
  align-items: start;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.progress-journal-week-header h3 {
  color: #f8fafc;
  font-size: 1.18rem;
  margin: 0.1rem 0 0;
}

.progress-journal-week-header p {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.8rem;
  margin: 0.18rem 0 0;
}

.progress-journal-week-day-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.progress-journal-week-day-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.14), transparent 48%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.74), rgba(2, 8, 23, 0.56));
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 12px;
  color: inherit;
  display: grid;
  font: inherit;
  gap: 0.14rem;
  min-height: 5.4rem;
  padding: 0.58rem;
  text-align: left;
}

.progress-journal-week-day-card:hover {
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 14px 32px rgba(8, 47, 73, 0.18);
  transform: translateY(-1px);
}

.progress-journal-week-day-card.is-empty {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(148, 163, 184, 0.1);
  opacity: 0.74;
}

.progress-journal-week-day-card strong {
  color: #f8fafc;
  font-size: 0.8rem;
}

.progress-journal-week-day-card span {
  color: #bae6fd;
  font-size: 0.74rem;
  font-weight: 850;
}

.progress-journal-week-day-card small {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-journal-month-index {
  display: grid;
  gap: 0.54rem;
}

.progress-journal-index-week {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 8, 23, 0.56));
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 13px;
  display: grid;
  gap: 0.48rem;
  padding: 0.58rem;
}

.progress-journal-week-heading {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: flex;
  font: inherit;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0;
  text-align: left;
}

.progress-journal-week-heading strong {
  color: #f8fafc;
}

.progress-journal-week-heading span {
  color: rgba(186, 230, 253, 0.82);
  font-size: 0.76rem;
}

.progress-journal-index-days {
  display: grid;
  gap: 0.38rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.progress-journal-index-days button {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.15), transparent 48%),
    rgba(2, 8, 23, 0.44);
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 11px;
  color: inherit;
  display: grid;
  font: inherit;
  gap: 0.08rem;
  padding: 0.52rem;
  text-align: left;
}

.progress-journal-index-days strong {
  color: #f8fafc;
}

.progress-journal-index-days span {
  color: #bae6fd;
  font-size: 0.76rem;
  font-weight: 850;
}

.progress-journal-index-days small {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-journal-index-empty {
  background: rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  color: rgba(203, 213, 225, 0.72);
  margin: 0;
  padding: 0.72rem;
}

.progress-report-feature-panel.teacher-report-panel {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 8, 23, 0.74));
  border-color: rgba(168, 85, 247, 0.2);
  margin: 0.68rem 0 0;
}

.progress-report-feature-panel .teacher-report-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  padding-bottom: 0.62rem;
}

.progress-report-feature-panel .teacher-report-header h3 {
  font-size: 1.08rem;
}

.progress-report-feature-panel .teacher-report-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.progress-report-feature-panel .teacher-report-grid {
  opacity: 0.96;
}

@media (max-width: 1180px) {
  .progress-command-center {
    grid-template-columns: 1fr;
    grid-template-areas:
      "momentum"
      "explore"
      "activity"
      "signals";
  }

  .progress-focus-signals,
  .progress-signal-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .log-card[data-screen-panel="log"] > .section-header,
  .progress-header-actions {
    grid-template-columns: 1fr;
  }

  .progress-period-navigation,
  .progress-command-row {
    justify-content: stretch;
  }

  .progress-period-stepper {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #progressPeriodTodayButton {
    grid-column: 1 / -1;
  }

  .progress-momentum-stage,
  .progress-journal-page-header,
  .progress-journal-week-header,
  .progress-journal-body {
    grid-template-columns: 1fr;
  }

  .progress-journal-week-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-momentum-ring {
    justify-self: start;
  }

  .progress-momentum-metrics,
  .progress-overview-stats,
  .progress-insight-cards,
  .progress-report-feature-panel .teacher-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .progress-focus-signals,
  .progress-signal-list,
  .progress-overview-stats,
  .progress-insight-cards,
  .progress-report-feature-panel .teacher-report-summary {
    grid-template-columns: 1fr;
  }

  .progress-momentum-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-journal-day-nav,
  .progress-journal-week-day-grid {
    grid-template-columns: 1fr;
  }

  .progress-map-weekday-labels,
  .progress-map-week-row {
    grid-template-columns: 3.8rem repeat(7, minmax(1.8rem, 1fr));
  }

  .progress-map-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-map-week .progress-map-day {
    min-height: 4rem;
  }

  .progress-activity-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .progress-activity-detail {
    grid-column: 2;
    justify-self: start;
  }
}

.overview-card {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.overview-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-pill {
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.4rem 0.7rem;
}

.type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.type-tab {
  background: #f2f4f7;
  color: var(--text);
}

.type-tab:hover {
  background: #e4e7ec;
}

.type-tab.is-selected {
  background: var(--primary);
  color: white;
}

.record-form {
  display: grid;
  gap: 1rem;
}

.field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 160px;
}

.field label {
  display: block;
  font-weight: 750;
  margin-bottom: 0.5rem;
}

.checkbox-row {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  font-weight: 650;
}

.checkbox-row input { width: auto; }

.status {
  color: var(--muted);
  min-height: 1.5rem;
  margin: 0.9rem 0 0;
}

.status[data-tone="success"] { color: var(--success); }
.status[data-tone="error"] { color: var(--danger); }

.section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.button-row, .record-actions, .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-row {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.secondary-button, .filter-button {
  background: var(--soft);
  color: var(--primary);
}

.secondary-button:hover, .filter-button:hover { background: #e0e7ff; }

.filter-button.is-selected {
  background: var(--primary);
  color: white;
}

.success-button {
  background: var(--success);
}

.success-button:hover {
  background: #05603a;
}

.restore-button {
  background: var(--success-bg);
  color: var(--success);
  outline: 1px solid rgba(6, 118, 71, 0.18);
}

.restore-button:hover { background: #d1fadf; }

.record-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.record-card {
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
  padding: 1rem;
}

.record-card.is-archived {
  background: #fafafa;
  opacity: 0.78;
}

.record-card.is-not-available { background: #fffdf7; }

.record-content {
  display: grid;
  gap: 0.45rem;
}

.title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mini-badge,
.type-badge {
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.22rem 0.55rem;
}

.type-badge {
  background: #f2f4f7;
  color: var(--text);
}

.badge-available {
  background: var(--success-bg);
  color: var(--success);
}

.badge-not-available {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-archived {
  background: #f2f4f7;
  color: var(--muted);
}

.description {
  color: var(--text);
  margin-bottom: 0;
}

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

.danger-button {
  background: var(--danger-bg);
  color: var(--danger);
}

.danger-button:hover { background: #ffe4e2; }

.empty-state {
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  padding: 1.2rem;
  text-align: center;
}

@media (max-width: 760px) {
  .help-bubble-text {
    left: auto;
    right: -0.25rem;
    transform: translateY(-0.2rem);
    width: min(16rem, 78vw);
  }

  .help-bubble:hover .help-bubble-text,
  .help-bubble:focus .help-bubble-text {
    transform: translateY(0);
  }

  .context-help-panel {
    margin: 0.55rem 0 0.75rem;
    padding: 0.64rem 0.72rem;
  }

  .context-help-panel p {
    font-size: 0.82rem;
  }

  .app-header,
  .overview-card,
  .field-grid,
  .section-header,
  .record-card,
  .button-row,
  .record-actions,
  .metronome-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .version-badge { justify-self: start; }
  button { width: 100%; }
}


.recovery-card {
  border-color: rgba(181, 71, 8, 0.22);
  background: #fffcf5;
}


/* P04P practice screen first pass */
.practice-dashboard {
  border-color: rgba(31, 94, 255, 0.24);
  padding: 1.35rem;
}

.practice-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.practice-header h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  margin-bottom: 0.35rem;
}

.practice-empty {
  margin-top: 1rem;
}

.practice-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
}

.hero-current {
  align-content: start;
  min-height: 260px;
}

.hero-current h3 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.65rem;
}

.hero-current .description {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-top: 0.75rem;
}

.hero-actions {
  margin-top: 1.2rem;
}

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

.compact-metronome {
  grid-template-columns: 1fr;
}

.queue-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  grid-column: 1 / -1;
  padding: 1rem;
}

.queue-heading {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.queue-heading h3 {
  margin-bottom: 0;
}

.session-queue {
  counter-reset: queue-counter;
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.queue-item {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
}

.queue-item::before {
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--muted);
  content: counter(queue-counter);
  counter-increment: queue-counter;
  display: inline-grid;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  height: 1.55rem;
  place-items: center;
  width: 1.55rem;
}

.queue-item.is-current {
  background: #fbfcff;
  border-color: rgba(31, 94, 255, 0.3);
  color: var(--text);
  font-weight: 800;
}

.queue-item.is-current::before {
  background: var(--primary);
  color: white;
  content: "→";
}

.queue-item.is-complete {
  opacity: 0.58;
  text-decoration: line-through;
}

.queue-item.is-skipped {
  border-color: rgba(251, 191, 36, 0.34);
  color: #fbbf24;
}

.queue-item.is-complete::before {
  background: var(--success-bg);
  color: var(--success);
  content: "✓";
}

.queue-item.is-skipped::before {
  background: rgba(251, 191, 36, 0.16);
  color: #f59e0b;
  content: "!";
}

@media (max-width: 860px) {
  .practice-header,
  .practice-grid,
  .queue-heading {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.compact-checkbox {
  font-size: 0.9rem;
  margin-top: 0.15rem;
}


.availability-button {
  outline: 1px solid transparent;
}

.availability-button.is-available {
  background: var(--success-bg);
  color: var(--success);
  outline-color: rgba(6, 118, 71, 0.18);
}

.availability-button.is-available:hover {
  background: #d1fadf;
}

.availability-button.is-not-available {
  background: var(--warning-bg);
  color: var(--warning);
  outline-color: rgba(181, 71, 8, 0.18);
}

.availability-button.is-not-available:hover {
  background: #fef0c7;
}


.queue-text {
  flex: 1 1 auto;
}

.queue-edit-button {
  background: var(--soft);
  color: var(--primary);
  flex: 0 0 auto;
  font-size: 0.82rem;
  padding: 0.45rem 0.65rem;
}

.queue-edit-button:hover {
  background: #e0e7ff;
}

.availability-button {
  white-space: nowrap;
}


.hero-primary-button {
  min-width: 8.5rem;
}

.queue-item {
  cursor: pointer;
}

.status-action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.status-action-row .status {
  flex: 1 1 18rem;
}

.status-action-row #statusGoPracticeButton {
  flex: 0 0 auto;
}

.setup-sample-status {
  margin: 0.4rem 0 0;
}

.queue-item:hover {
  border-color: rgba(31, 94, 255, 0.28);
  background: #fbfcff;
}


/* P05A app shell tabs */
.app-nav {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
  margin: -0.75rem 0 1.25rem;
  padding: 0.35rem;
}

.app-nav-button {
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 0.65rem 0.95rem;
}

.app-nav-button:hover {
  background: #eef2ff;
  color: var(--primary);
}

.app-nav-button.is-selected {
  background: var(--primary);
  color: white;
}

.setup-grid,
.system-grid {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.setup-step,
.placeholder-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}

.setup-step {
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
}

.step-number {
  background: var(--primary);
  border-radius: 999px;
  color: white;
  display: inline-grid;
  flex: 0 0 auto;
  font-weight: 850;
  height: 1.8rem;
  place-items: center;
  width: 1.8rem;
}

.setup-step p,
.placeholder-panel p {
  color: var(--muted);
  margin: 0.35rem 0 0;
}

@media (max-width: 760px) {
  .app-nav {
    border-radius: 18px;
    justify-content: stretch;
  }

  .app-nav-button {
    flex: 1 1 auto;
  }
}


/* P05B dashboard countdown timer */
.countdown-card {
  align-items: center;
  background: #fbfcff;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(150px, 1fr) auto minmax(220px, auto) auto;
  margin-top: 1rem;
  padding: 0.9rem;
}

.countdown-card .eyebrow {
  margin-bottom: 0.2rem;
}

.countdown-display {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
}

.countdown-display span:first-child {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.countdown-display span:last-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.timer-preset {
  background: #f2f4f7;
  color: var(--text);
  min-width: 2.4rem;
  padding: 0.45rem 0.55rem;
}

.timer-preset.is-selected {
  background: var(--primary);
  color: white;
}

.countdown-actions {
  justify-content: flex-end;
}

.countdown-actions button {
  padding: 0.55rem 0.75rem;
}

@media (max-width: 980px) {
  .countdown-card {
    grid-template-columns: 1fr;
  }

  .countdown-display {
    justify-items: start;
  }

  .countdown-actions {
    justify-content: stretch;
  }
}


.timer-config {
  display: grid;
  gap: 0.25rem;
  max-width: 6rem;
}

.timer-config label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-config input {
  padding: 0.55rem 0.65rem;
  text-align: center;
}


/* P05D compact timer + modal editing */
.compact-countdown-card {
  grid-template-columns: auto 5.2rem minmax(180px, 1fr) auto auto;
  padding: 0.65rem 0.75rem;
}

.countdown-left {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.compact-countdown-card .countdown-display span:first-child {
  font-size: 1.25rem;
}

.compact-countdown-card .timer-preset {
  min-width: 2rem;
  padding: 0.35rem 0.45rem;
}

.compact-countdown-card .countdown-actions button {
  padding: 0.45rem 0.65rem;
}

.timer-checkbox {
  white-space: nowrap;
}

.modal-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.48);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 50;
}

.modal-card {
  background: var(--panel);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  max-height: min(96vh, 900px);
  max-width: 900px;
  overflow: auto;
  padding: 1.75rem;
  width: min(900px, 100%);
}

.modal-card .record-form {
  gap: 1rem;
}

.modal-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-close-button {
  flex: 0 0 auto;
  min-width: 2.25rem;
}

@media (max-width: 980px) {
  .compact-countdown-card {
    grid-template-columns: 1fr;
  }

  .countdown-left {
    justify-content: space-between;
  }
}


/* P06A focused timing-strip rebuild */
.timing-strip,
.timer-strip {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
  padding: 0.55rem 0.65rem;
}

.timing-strip {
  margin: 0;
}

.timer-strip {
  margin-top: 0.65rem;
}

.timing-strip-main,
.timer-strip-display {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.timing-chip {
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 0.25rem;
  line-height: 1;
  min-height: 1.8rem;
  padding: 0.32rem 0.58rem;
  white-space: nowrap;
}

.timing-chip-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.timing-chip-muted {
  color: var(--muted);
}

.timing-strip-controls,
.timer-strip-controls {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  justify-content: flex-end;
  min-width: 0;
}

.timing-strip-controls input[type="range"] {
  min-width: 110px;
  padding: 0;
  width: 150px;
}

.timing-auto,
.timer-checkbox {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.timing-strip-controls button,
.timer-strip-controls button,
.countdown-actions button {
  font-size: 0.82rem;
  padding: 0.42rem 0.58rem;
  white-space: nowrap;
}

.timer-config {
  max-width: 4.6rem;
}

.timer-config input {
  padding: 0.42rem 0.5rem;
  text-align: center;
}

.timer-presets {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.timer-preset {
  font-size: 0.78rem;
  min-width: 1.85rem;
  padding: 0.36rem 0.4rem;
}

.countdown-actions {
  flex-wrap: nowrap;
}

.sr-only {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media (max-width: 980px) {
  .timing-strip,
  .timer-strip {
    grid-template-columns: 1fr;
  }

  .timing-strip-controls,
  .timer-strip-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* P06B dashboard header/progress cleanup */
.compact-brand-header {
  align-items: center;
  margin-bottom: 0.65rem;
  padding-top: 0.2rem;
}

.compact-brand-header h1 {
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  letter-spacing: -0.04em;
  margin: 0 0 0.1rem;
}

.brand-tagline,
.brand-support,
.today-line {
  margin: 0;
}

.brand-tagline {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 780;
}

.brand-support {
  color: var(--muted);
  font-size: 0.86rem;
}

.today-line {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.12rem;
}

.app-nav {
  margin-top: 0;
}

.dashboard-session-note {
  align-self: start;
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.38rem 0.65rem;
}

.dashboard-start-empty {
  align-items: center;
  display: flex;
  gap: 0.9rem;
  justify-content: space-between;
  text-align: left;
}

.dashboard-start-empty p {
  margin: 0.25rem 0 0;
}

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

.queue-heading h3 {
  align-items: center;
  display: flex;
  gap: 0.45rem;
}

.queue-progress-pill {
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.22rem 0.5rem;
}

.queue-status-text {
  display: none;
}

@media (max-width: 760px) {
  .dashboard-start-empty {
    display: grid;
  }
}


/* P06C dashboard density and containment */
.header-with-nav {
  align-items: flex-start;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(260px, 1fr) auto;
}

.header-right {
  align-items: flex-end;
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}

.header-with-nav .app-nav {
  box-shadow: none;
  margin: 0;
  padding: 0.25rem;
}

.header-with-nav .app-nav-button {
  font-size: 0.82rem;
  padding: 0.5rem 0.72rem;
}

.dashboard-session-spacer {
  min-width: 1px;
}

.practice-dashboard,
.current-item,
.queue-panel,
.metronome-card,
.countdown-card,
.timing-strip,
.timer-strip {
  overflow: hidden;
}

.timing-strip,
.timer-strip,
.compact-countdown-card {
  max-width: 100%;
  min-width: 0;
}

.timing-strip,
.timer-strip {
  grid-template-columns: 1fr;
}

.timing-strip-main,
.timer-strip-display,
.timing-info {
  min-width: 0;
}

.timing-strip-controls,
.timer-strip-controls,
.metronome-controls,
.countdown-actions,
.timer-presets {
  flex-wrap: wrap !important;
  justify-content: flex-start;
  min-width: 0;
}

.timing-strip-controls input[type="range"],
.metronome-controls input[type="range"] {
  flex: 1 1 130px;
  min-width: 90px;
  max-width: 180px;
  width: auto;
}

.timing-chip,
.timer-preset,
.timing-strip-controls button,
.timer-strip-controls button,
.countdown-actions button {
  flex: 0 0 auto;
}

.compact-countdown-card {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 1fr;
}

.countdown-left,
.timer-strip-display {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.timer-config {
  max-width: 4.5rem;
}

.queue-heading {
  display: grid;
  gap: 0.35rem;
}

.queue-heading h3 {
  margin-bottom: 0;
}

.queue-progress-track {
  background: #eef2f7;
  border-radius: 999px;
  height: 0.42rem;
  overflow: hidden;
  width: 100%;
}

.queue-progress-bar {
  background: var(--primary);
  border-radius: inherit;
  height: 100%;
  transition: width 160ms ease;
  width: 0%;
}

.queue-status-text {
  display: none !important;
}

@media (max-width: 900px) {
  .header-with-nav {
    grid-template-columns: 1fr;
  }

  .header-right {
    justify-items: stretch;
  }

  .header-with-nav .app-nav {
    justify-content: stretch;
  }
}


/* P06D queue header and timer thin-strip compaction */
.compact-queue-heading {
  align-items: center;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.queue-title-row {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto auto minmax(120px, 1fr);
  min-width: 0;
}

.queue-title-row h3 {
  margin: 0;
}

.queue-helper {
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

.queue-progress-track {
  align-self: center;
  height: 0.38rem;
  min-width: 120px;
}

.queue-progress-pill {
  white-space: nowrap;
}

/* Make countdown a true thin strip */
.compact-countdown-card,
.timer-strip,
.countdown-card {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
  margin-top: 0.55rem;
  min-height: unset;
  padding: 0.42rem 0.55rem !important;
}

.countdown-left,
.timer-strip-display {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

.countdown-left .eyebrow {
  margin: 0;
}

.countdown-display {
  align-items: baseline;
  display: inline-flex !important;
  gap: 0.35rem;
}

.countdown-display span:first-child {
  font-size: 1rem !important;
  line-height: 1;
}

.countdown-display span:last-child {
  font-size: 0.68rem !important;
  line-height: 1;
}

.timer-config {
  flex: 0 0 4.2rem;
  max-width: 4.2rem;
}

.timer-config label {
  display: none;
}

.timer-config input {
  min-height: unset;
  padding: 0.34rem 0.45rem !important;
}

.timer-presets {
  display: inline-flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap !important;
  gap: 0.25rem;
}

.timer-preset {
  font-size: 0.76rem !important;
  min-width: 1.75rem !important;
  padding: 0.3rem 0.36rem !important;
}

.timer-checkbox {
  flex: 0 0 auto;
  font-size: 0.78rem;
}

.countdown-actions {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-wrap: wrap !important;
  gap: 0.25rem;
}

.countdown-actions button {
  font-size: 0.78rem !important;
  padding: 0.34rem 0.5rem !important;
}

@media (max-width: 760px) {
  .compact-queue-heading {
    grid-template-columns: 1fr;
  }

  .queue-helper {
    justify-self: start;
    white-space: normal;
  }

  .queue-title-row {
    grid-template-columns: auto auto minmax(80px, 1fr);
  }
}


/* P06E timing mode / drum beat mockup */
.timing-mode-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.timing-select-label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  gap: 0.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.timing-select-label select {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  max-width: 170px;
  padding: 0.34rem 0.55rem;
  text-transform: none;
}

@media (max-width: 760px) {
  .timing-select-label {
    width: 100%;
  }

  .timing-select-label select {
    max-width: none;
    width: 100%;
  }
}


/* P06F contrast + timing pattern implementation UI */
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(96, 165, 250, 0.20), transparent 28rem),
    linear-gradient(135deg, #d5dde8 0%, #aeb9c8 100%);
}

.app-shell {
  background: rgba(255,255,255,0.10);
  border-radius: 28px;
}

.card {
  background: rgba(255,255,255,0.88);
  border-color: rgba(100, 112, 132, 0.26);
}

.practice-dashboard {
  background: rgba(255,255,255,0.90);
}

.timing-start-stop {
  flex-wrap: nowrap;
}

.bpm-override-label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  gap: 0.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bpm-override-label input {
  max-width: 4.4rem;
  padding: 0.38rem 0.45rem;
  text-align: center;
}

.timing-auto,
.timer-checkbox {
  white-space: normal;
}

.timing-auto span,
.timer-checkbox span {
  line-height: 1.15;
}

.timing-strip-controls,
.timer-strip-controls {
  align-items: center;
}

.session-queue {
  max-height: 260px;
  overflow: auto;
}

.queue-panel {
  max-height: 360px;
  overflow: hidden;
}

.activity-log-list {
  max-height: 360px;
  overflow: auto;
}

@media (max-width: 980px) {
  .timing-start-stop {
    flex-wrap: wrap;
  }

  .bpm-override-label {
    width: auto;
  }
}


/* P06G queue cleanup */
.queue-edit-button {
  display: none !important;
}

.queue-item {
  cursor: pointer;
}

.queue-item:hover {
  background: #f8fafc;
  border-color: rgba(31, 94, 255, 0.35);
}

.queue-text {
  flex: 1 1 auto;
}


/* P06N recovery banner */
.recovery-banner {
  background: #fffdf7;
  border-color: rgba(181, 71, 8, 0.22);
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
  padding: 0.75rem 1rem;
}


/* P06O manage add-modal UI only */
.manage-static-form-card {
  display: none !important;
}

.manage-tabs-card {
  margin-bottom: 0.45rem;
  padding: 0.8rem;
}

.manage-list-card {
  margin-top: 0.45rem;
  padding-top: 1rem;
}

.manage-list-card .section-header {
  margin-bottom: 0.65rem;
}

.manage-list-card .filter-row {
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
}

.manage-list-card #listTitle {
  display: none;
}

.manage-tabs-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.add-item-inline-button {
  flex: 0 0 auto;
  padding: 0.65rem 0.95rem;
}

.compact-modal-card {
  max-width: 900px;
}

@media (max-width: 760px) {
  .manage-tabs-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .add-item-inline-button {
    width: 100%;
  }
}


/* P06P add modal metadata fields */
.optional-metadata-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .optional-metadata-fields {
    grid-template-columns: 1fr;
  }
}


/* P06Q type-specific add modal layouts */
.modal-intro {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: -0.25rem;
}

.planning-fields {
  align-items: start;
}

.field.is-deemphasized {
  opacity: 0.68;
}

.compact-field-help {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.25rem 0 0;
}

.availability-field.is-invalid select {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.availability-field.is-invalid .compact-field-help::after {
  color: #dc2626;
  content: " Choose whether this item is available for scheduling or archived.";
  display: block;
  font-weight: 800;
  margin-top: 0.2rem;
}

.custom-frequency-row {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  gap: 0.4rem;
  grid-template-columns: auto minmax(4rem, 6rem) auto;
  margin-top: 0.45rem;
}

.custom-frequency-row input {
  min-height: 2.2rem;
  padding: 0.42rem 0.55rem;
}

.record-actions .availability-button {
  background: var(--soft);
  border: 1px solid rgba(31, 94, 255, 0.14);
  color: var(--primary);
  outline: 0;
}

.record-actions .availability-button:hover {
  background: #e8efff;
}

.rotation-planning-panel {
  padding-block: 0.9rem;
}

.compact-rotation-fields {
  margin-top: 0.6rem;
}

.practice-composition-rail {
  background: linear-gradient(180deg, #fbfcff 0%, #f5f8fd 100%);
  border-color: rgba(31, 94, 255, 0.14);
  padding: 0.95rem;
}

.composition-rail-header {
  align-items: flex-start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.composition-rail-header h3 {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.composition-totals {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  max-width: 30rem;
}

.composition-total-pill {
  background: #eef4ff;
  border: 1px solid rgba(31, 94, 255, 0.13);
  border-radius: 999px;
  color: #21446f;
  font-size: 0.74rem;
  font-weight: 850;
  padding: 0.28rem 0.52rem;
  white-space: nowrap;
}

.composition-total-pill.is-total {
  background: #e6f7ef;
  border-color: rgba(6, 118, 71, 0.16);
  color: #067647;
}

.composition-sections {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(31, 94, 255, 0.28) rgba(226, 232, 240, 0.7);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.composition-sections::-webkit-scrollbar {
  height: 0.45rem;
}

.composition-sections::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.72);
  border-radius: 999px;
}

.composition-sections::-webkit-scrollbar-thumb {
  background: rgba(31, 94, 255, 0.28);
  border-radius: 999px;
}

.composition-section {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-left: 4px solid rgba(31, 94, 255, 0.35);
  border-radius: 12px;
  flex: 0 0 clamp(13.5rem, 18vw, 17rem);
  min-width: 13.5rem;
  padding: 0.62rem;
  scroll-snap-align: start;
}

.composition-section-header {
  align-items: flex-start;
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
}

.composition-section-header strong {
  align-items: center;
  display: inline-flex;
  font-size: 0.82rem;
  gap: 0.25rem;
  line-height: 1.2;
}

.composition-estimate {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.composition-section-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  margin: 0.35rem 0 0;
}

.composition-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.45rem;
}

.composition-chip {
  background: #f1f5f9;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 760;
  max-width: 100%;
  overflow: hidden;
  padding: 0.18rem 0.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composition-count-chip {
  background: #ffffff;
  color: var(--muted);
}

.composition-more-chip {
  color: var(--primary);
}

.composition-daily {
  border-left-color: #1f5eff;
}

.composition-pool {
  border-left-color: #0e7490;
}

.composition-fresh {
  border-left-color: #067647;
}

.composition-learning {
  border-left-color: #7c3aed;
}

.composition-activity {
  border-left-color: #b45309;
}

.composition-empty-note {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
  padding: 0.45rem 0.1rem;
}

@media (max-width: 760px) {
  .composition-rail-header {
    grid-template-columns: 1fr;
  }

  .composition-totals {
    justify-content: flex-start;
  }

  .composition-sections {
    gap: 0.5rem;
  }

  .composition-section {
    flex-basis: min(82vw, 18rem);
  }
}

.linked-goals-mock {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem;
}

.linked-goals-mock span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-left: 0.25rem;
}

.linked-goals-mock p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
}

.state-box {
  background: #fff7f7;
  border: 1px solid rgba(180, 80, 80, 0.22);
  border-radius: 14px;
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
}

.modal-footer-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .planning-fields {
    grid-template-columns: 1fr;
  }
}


/* P06R Manage modal compaction + consistent selects */
.modal-card {
  max-height: min(96vh, 900px);
  max-width: 900px;
}

.compact-modal-card,
.modal-card {
  padding: 1.55rem;
}

.modal-header {
  margin-bottom: 0.9rem;
}

.modal-header h2 {
  font-size: 1.35rem;
  margin: 0.05rem 0 0;
}

.record-form {
  gap: 0.6rem;
}

.record-form .field {
  gap: 0.25rem;
}

.record-form label {
  font-size: 0.82rem;
}

.record-form input,
.record-form textarea,
.record-form select,
.manual-log-form select {
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  min-height: 2.25rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.record-form textarea {
  min-height: 4rem;
  resize: vertical;
}

.field-grid {
  gap: 0.6rem;
}

.planning-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.linked-goals-mock {
  display: grid;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem;
}

.linked-goals-mock p {
  display: none;
}

.state-box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.55rem 0.65rem;
}

.checkbox-row {
  min-height: 2rem;
}

.optional-metadata-fields,
#addRecordStatusCategoryFields,
#addRecordGoalFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#addRecordTimedFields {
  align-items: end;
}

.desktop-timing-defaults-section {
  background: linear-gradient(180deg, rgba(247, 251, 253, 0.98), rgba(235, 243, 248, 0.94));
  border: 1px solid rgba(72, 95, 124, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 0.65rem;
  padding: 0.72rem 0.78rem;
}

.desktop-timing-defaults-section[hidden] {
  display: none !important;
}

.desktop-timing-defaults-header {
  display: grid;
  gap: 0.2rem;
}

.desktop-timing-defaults-header h3 {
  color: #26364a;
  font-size: 0.95rem;
  margin: 0;
}

.desktop-timing-defaults-header p {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.desktop-timing-defaults-grid {
  align-items: end;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#modalMinutesField,
#addRecordDurationField,
#modalBpmField,
#addRecordBpmField,
#modalTimingSoundField,
#addRecordTimingSoundField,
#modalAutoTimerField,
#addRecordAutoTimerField,
#modalAutoMetronomeField,
#addRecordAutoMetronomeField {
  grid-column: span 2;
}

.desktop-timing-defaults-section.has-timer-defaults #modalMinutesField,
.desktop-timing-defaults-section.has-timer-defaults #addRecordDurationField {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.desktop-timing-defaults-section.has-timer-defaults #modalAutoTimerField,
.desktop-timing-defaults-section.has-timer-defaults #addRecordAutoTimerField {
  grid-column: 3 / span 2;
  grid-row: 1;
}

.desktop-timing-defaults-section.has-timer-defaults #modalBpmField,
.desktop-timing-defaults-section.has-timer-defaults #addRecordBpmField {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.desktop-timing-defaults-section.has-timer-defaults #modalTimingSoundField,
.desktop-timing-defaults-section.has-timer-defaults #addRecordTimingSoundField {
  grid-column: 3 / span 2;
  grid-row: 2;
}

.desktop-timing-defaults-section.has-timer-defaults #modalAutoMetronomeField,
.desktop-timing-defaults-section.has-timer-defaults #addRecordAutoMetronomeField {
  grid-column: 5 / span 2;
  grid-row: 2;
}

.desktop-timing-checkbox {
  align-self: end;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 12px;
  min-height: 2.55rem;
  padding-inline: 0.62rem;
}

#addRecordTagsField,
#addRecordNotesField {
  margin-top: -0.1rem;
}

#addRecordNotes {
  min-height: 3rem;
}

#addRecordDescription {
  min-height: 3.5rem;
}

.modal-footer-actions {
  margin-top: 0.15rem;
  position: sticky;
  bottom: -1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), #fff 35%);
  padding-top: 0.55rem;
}

/* Goal modal is shorter and should feel balanced */
#addRecordGoalIntro {
  margin-bottom: -0.15rem;
}

@media (min-width: 900px) {
  .compact-modal-card {
    max-width: 860px;
  }

  #addRecordModalForm {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .planning-fields,
  .state-box,
  .optional-metadata-fields,
  #addRecordStatusCategoryFields,
  #addRecordGoalFields,
  #addRecordTimedFields {
    grid-template-columns: 1fr;
  }

  .desktop-timing-defaults-grid {
    grid-template-columns: 1fr;
  }
}


/* P06S goal edit repair + modal visual polish */
.modal-card,
.compact-modal-card {
  font-size: 0.9rem;
  line-height: 1.28;
}

.modal-header .eyebrow {
  font-size: 0.72rem;
}

.modal-header h2 {
  font-size: 1.22rem;
  letter-spacing: -0.025em;
}

.record-form label,
.linked-goals-mock strong,
.goal-linked-items-box strong {
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.record-form input,
.record-form textarea,
.record-form select {
  font-size: 0.88rem;
  min-height: 2.05rem;
  padding: 0.42rem 0.58rem;
}

.record-form textarea {
  min-height: 3.2rem;
}

.checkbox-row {
  gap: 0.42rem;
  min-height: 1.65rem;
}

.checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.linked-goals-mock,
.goal-linked-items-box,
.state-box {
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
}

.goal-linked-items-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  gap: 0.25rem;
}

.goal-linked-items-box p,
.goal-linked-items-box small {
  color: var(--muted);
  margin: 0;
}

.goal-linked-items-box small {
  font-size: 0.76rem;
}

.goal-guidance-examples {
  background: rgba(255, 249, 235, 0.72);
  border: 1px solid rgba(147, 123, 88, 0.16);
  border-radius: 12px;
  color: #4b3f2f;
  display: grid;
  font-size: 0.82rem;
  gap: 0.2rem;
  line-height: 1.35;
  margin-top: 0.42rem;
  padding: 0.5rem 0.62rem;
}

.goal-guidance-examples[hidden] {
  display: none !important;
}

.goal-guidance-examples strong {
  color: #27364a;
  font-size: 0.76rem;
}

.goal-example-toggle {
  display: none;
}

.goal-example-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.3rem;
}

.goal-example-button {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(101, 84, 56, 0.18);
  border-radius: 999px;
  color: #32425a;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 760;
  min-height: 1.72rem;
  padding: 0.26rem 0.56rem;
}

.goal-example-button:hover,
.goal-example-button:focus-visible {
  background: rgba(255, 252, 244, 0.98);
  border-color: rgba(37, 99, 235, 0.3);
  color: #174ea6;
}

.modal-footer-actions {
  padding-top: 0.42rem;
}

.modal-footer-actions button {
  padding: 0.5rem 0.75rem;
}


/* P06T linked goals in edit modal */
#modalLinkedGoalsMock {
  margin: 0.1rem 0;
}


/* P06U linked goals checklist */
.linked-goals-header {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
}

.linked-goals-header > span {
  line-height: 1.25;
  max-width: min(26rem, 58%);
  text-align: right;
  white-space: normal;
}

.linked-goals-list {
  display: grid;
  gap: 0.42rem;
  max-height: 7rem;
  overflow: auto;
  padding: 0.2rem 0;
}

.linked-goals-list.is-chip-picker {
  max-height: 9rem;
}

.linked-goals-helper {
  color: var(--muted);
  display: block !important;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  margin: -0.08rem 0 0.25rem;
}

.linked-goal-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.linked-goal-chip,
.linked-goal-create-toggle {
  align-items: center;
  background: rgba(8, 18, 34, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 850;
  justify-content: center;
  line-height: 1.15;
  min-height: 2rem;
  padding: 0.42rem 0.72rem;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.linked-goal-chip:hover,
.linked-goal-chip:focus-visible,
.linked-goal-create-toggle:hover,
.linked-goal-create-toggle:focus-visible {
  background: rgba(20, 34, 58, 0.92);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.linked-goal-chip.is-selected {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.52), rgba(79, 70, 229, 0.48));
  border-color: rgba(94, 234, 212, 0.68);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2), 0 0 18px rgba(20, 184, 166, 0.18);
  color: #ffffff;
}

.linked-goal-create-toggle {
  border-style: dashed;
  color: rgba(165, 243, 252, 0.94);
}

.linked-goal-create-form {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.linked-goal-create-form input {
  background: rgba(2, 8, 23, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.7rem;
  color: #f8fafc;
  min-height: 2.1rem;
  padding: 0.42rem 0.62rem;
}

.warmup-role-toggle {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 0.78rem;
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 0.52rem;
  padding: 0.58rem 0.72rem;
}

.warmup-role-toggle input {
  accent-color: #f59e0b;
  height: 1rem;
  width: 1rem;
}

.warmup-role-toggle span {
  display: grid;
  gap: 0.12rem;
}

.warmup-role-toggle strong {
  color: #fef3c7;
  font-size: 0.86rem;
}

.warmup-role-toggle small {
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.76rem;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .linked-goal-create-form {
    grid-template-columns: 1fr;
  }
}

.linked-goal-option {
  border-radius: 10px;
  padding: 0.2rem 0.25rem;
}

.linked-goal-option:hover {
  background: #f8fafc;
}

.linked-goals-empty {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}


/* P08G Setup navigation verified */
.setup-version-marker {
  background: var(--primary);
  border-radius: 999px;
  color: white;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 850;
  margin-left: 0.35rem;
  padding: 0.18rem 0.5rem;
  vertical-align: middle;
}

.setup-return-bar {
  align-items: center;
  background: #fffdf7;
  border: 1px solid rgba(181, 71, 8, 0.28);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--text);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0.75rem 0 1rem;
  padding: 0.65rem 0.8rem;
}

.setup-return-bar span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.setup-card-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 1rem;
}

.setup-action-card {
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 0.7rem;
  min-height: 230px;
  padding: 0.85rem;
}

.setup-action-copy {
  display: grid;
  gap: 0.35rem;
}

.setup-action-card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.32;
  margin: 0;
}

.setup-action-card button {
  align-self: end;
  padding: 0.62rem 0.72rem;
}

@media (max-width: 980px) {
  .setup-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .setup-card-row,
  .setup-return-bar {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* P09B2 Current item notes log write + desktop width bump */
.current-item-notes-box {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.current-item-notes-box label {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 850;
}

.current-item-notes-box textarea {
  background: rgba(255, 255, 255, 0.82);
  min-height: 4.8rem;
}

.current-item-notes-helper {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}


/* P09D sample content controls */

/* P09G goal link checkbox repair */

/* P09H goal link cleanup */
.linked-item-row {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}


/* P09K dashboard layout stage 1 */
.practice-dashboard {
  padding: 1.1rem;
}

.hero-current .description {
  margin-bottom: 0.75rem;
}

.hero-actions {
  margin-top: 0.9rem;
  margin-bottom: 0.65rem;
}

.current-item-notes-box {
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(100, 112, 132, 0.20);
  border-radius: 14px;
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.65rem;
}

.current-item-notes-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: space-between;
}

.current-item-notes-header label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.current-item-notes-header span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.current-item-notes-box textarea {
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.25;
  max-height: 5.5rem;
  min-height: 3.15rem;
  padding: 0.55rem 0.65rem;
}

@media (min-width: 1200px) {
  .app-shell {
    max-width: 1280px;
  }
}


/* P09L dashboard layout stage 2: width + recorder mock */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1280px;
  }
}

.practice-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
}

.dashboard-tool-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(100, 112, 132, 0.22);
  border-radius: 18px;
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
}

.tool-card-header {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.tool-card-header h3 {
  margin: 0;
}

.tool-card-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
  margin: 0;
}

.mock-badge {
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 850;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
}

.recorder-mock-display {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.65rem 0.75rem;
}

.record-dot {
  background: var(--danger);
  border-radius: 999px;
  display: inline-block;
  height: 0.7rem;
  width: 0.7rem;
}

.recorder-mock-actions button {
  font-size: 0.82rem;
  padding: 0.5rem 0.65rem;
}

@media (max-width: 860px) {
  .practice-grid {
    grid-template-columns: 1fr;
  }
}


/* P09M reference button mock */
.current-item-references-box {
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid rgba(181, 71, 8, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.65rem;
}

.reference-box-header {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.reference-box-header strong {
  display: block;
  font-size: 0.9rem;
}

.reference-list-mock {
  display: grid;
  gap: 0.45rem;
}

.reference-row-mock {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(100, 112, 132, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 0.55rem;
}

.reference-row-mock strong {
  display: block;
  font-size: 0.86rem;
}

.reference-row-mock span {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  margin-top: 0.08rem;
}

.reference-row-mock button {
  font-size: 0.78rem;
  padding: 0.42rem 0.58rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .reference-row-mock {
    grid-template-columns: 1fr;
  }
}


/* P09N reference/player launcher + dashboard queue visibility pass */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1320px;
  }
}

@media (min-width: 861px) {
  .practice-grid {
    align-items: start;
    display: grid;
    grid-template-areas:
      "current tools"
      "current queue";
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.72fr);
  }

  .hero-current {
    grid-area: current;
  }

  .practice-side {
    grid-area: tools;
  }

  .queue-panel {
    grid-area: queue;
    grid-column: auto;
    max-height: 260px;
    padding: 0.75rem;
  }

  .queue-panel .session-queue {
    max-height: 175px;
  }
}

.reference-player-card {
  background: rgba(251, 252, 255, 0.88);
}

.launcher-list-mock {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr;
}

.launcher-list-mock button {
  font-size: 0.82rem;
  justify-content: center;
  padding: 0.5rem 0.65rem;
}

.recorder-mock-card .tool-card-note,
.reference-player-card .tool-card-note {
  font-size: 0.82rem;
}

.recorder-mock-display {
  padding: 0.5rem 0.65rem;
}

.dashboard-tool-card {
  gap: 0.5rem;
  padding: 0.75rem;
}

.queue-helper::before {
  content: "";
}


/* P09O dashboard tool layout cleanup */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1320px;
  }
}

@media (min-width: 861px) {
  .practice-grid {
    align-items: start;
    display: grid;
    grid-template-areas:
      "current tools"
      "queue queue";
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.68fr);
  }

  .hero-current {
    grid-area: current;
  }

  .practice-side {
    grid-area: tools;
  }

  .queue-panel {
    grid-area: queue;
    grid-column: 1 / -1;
    max-height: 210px;
    padding: 0.75rem;
  }

  .queue-panel .session-queue {
    max-height: 135px;
  }
}

.tool-stack {
  display: grid;
  gap: 0.75rem;
}

.tool-stack-card {
  width: 100%;
}

.reference-select-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-reference-select {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.6rem;
  width: 100%;
}

.launcher-list-mock {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.launcher-list-mock button {
  font-size: 0.82rem;
  justify-content: center;
  padding: 0.5rem 0.65rem;
}

@media (max-width: 760px) {
  .launcher-list-mock {
    grid-template-columns: 1fr;
  }
}


/* P09P references context restore */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1320px;
  }
}

@media (min-width: 861px) {
  .practice-grid {
    align-items: start;
    display: grid;
    grid-template-areas: "current tools";
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.68fr);
  }

  .hero-current {
    grid-area: current;
  }

  .practice-side {
    grid-area: tools;
  }

  .compact-side-queue,
  .queue-panel.compact-side-queue {
    grid-area: auto;
    grid-column: auto;
    max-height: 260px;
    padding: 0.75rem;
  }

  .compact-side-queue .session-queue {
    max-height: 175px;
    overflow: auto;
  }
}

.reference-context-box {
  background: linear-gradient(135deg, rgba(255, 248, 235, 0.95), rgba(243, 234, 215, 0.96));
  border-color: rgba(181, 128, 64, 0.28);
  box-shadow: 0 8px 20px rgba(120, 84, 40, 0.08);
  margin-top: 0.75rem;
}

.reference-box-header span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.05rem;
}

.warm-mock-badge {
  background: rgba(181, 128, 64, 0.14);
  color: #8a5a16;
}

.reference-context-list {
  max-height: 11.5rem;
  overflow: auto;
}

.reference-row-mock {
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: left;
  width: 100%;
}

button.reference-row-mock {
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-weight: 650;
}

button.reference-row-mock:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(181, 128, 64, 0.42);
}

.reference-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.reference-text strong {
  font-size: 0.88rem;
}

.reference-text small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  margin-top: 0.06rem;
}

.reference-overflow {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 900;
}

.compact-side-queue .queue-heading {
  margin-bottom: 0.5rem;
}

.compact-side-queue .queue-title-row {
  grid-template-columns: auto auto minmax(70px, 1fr);
}

.compact-side-queue .queue-helper {
  font-size: 0.78rem;
  justify-self: start;
  white-space: normal;
}


/* P09Q queue auto-window + reference list refinement */
.compact-side-queue,
.queue-panel.compact-side-queue {
  max-height: 290px;
}

.compact-side-queue .session-queue {
  max-height: 220px;
  overflow: auto;
  gap: 0.28rem;
}

.compact-side-queue .queue-item.compact-queue-item {
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.5rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.compact-side-queue .queue-item.compact-queue-item::before {
  display: none;
}

.queue-status-marker {
  border-radius: 999px;
  display: inline-grid;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.25rem;
  place-items: center;
  width: 1.25rem;
}

.queue-item.is-complete .queue-status-marker {
  background: var(--success-bg);
  color: var(--success);
}

.queue-item.is-skipped .queue-status-marker {
  background: rgba(251, 191, 36, 0.16);
  color: #f59e0b;
}

.queue-item.is-current .queue-status-marker {
  background: var(--primary);
  color: white;
}

.queue-item:not(.is-current):not(.is-complete):not(.is-skipped) .queue-status-marker {
  background: #f2f4f7;
  color: var(--muted);
}

.queue-window-marker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  list-style: none;
  padding: 0.1rem 0.5rem;
  text-align: center;
}

.reference-context-box {
  margin-top: 0.65rem;
  padding: 0.85rem;
}

.reference-context-list {
  max-height: 9.2rem;
  overflow: auto;
}

.reference-row-mock {
  border: 1px solid rgba(181, 128, 64, 0.22);
  border-radius: 13px;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
}


/* P10A/P10B backup export and restore system panel */
.backup-export-panel {
  background: #f8fbff;
  border-color: rgba(31, 94, 255, 0.18);
}

.system-action-row {
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.system-screen .placeholder-panel > strong,
.system-health-panel h3 {
  color: #1f2f42;
  font-weight: 680;
}

.system-screen .placeholder-panel p,
.system-health-panel p {
  line-height: 1.45;
}

.backup-status {
  margin-top: 0.65rem;
  min-height: 1.25rem;
}

.backup-protection-panel {
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(239, 246, 255, 0.84));
}

.backup-protection-heading {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.backup-protection-state-pill {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(226, 232, 240, 0.96), rgba(203, 213, 225, 0.78));
  border: 1px solid rgba(71, 85, 105, 0.34);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #1e293b;
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 760;
  min-height: 1.8rem;
  padding: 0.22rem 0.62rem;
  white-space: nowrap;
}

.backup-protection-state-pill[data-tone="neutral"] {
  background:
    linear-gradient(135deg, rgba(226, 232, 240, 0.98), rgba(191, 219, 254, 0.48));
  border-color: rgba(51, 65, 85, 0.32);
  color: #1e293b;
}

.backup-protection-state-pill[data-tone="success"] {
  background: rgba(220, 252, 231, 0.78);
  border-color: rgba(22, 163, 74, 0.22);
  color: #166534;
}

.backup-protection-state-pill[data-tone="warning"] {
  background: rgba(254, 249, 195, 0.82);
  border-color: rgba(202, 138, 4, 0.22);
  color: #854d0e;
}

.backup-protection-state-pill[data-tone="error"] {
  background: rgba(254, 226, 226, 0.82);
  border-color: rgba(220, 38, 38, 0.22);
  color: #991b1b;
}

.backup-protection-prompt-body {
  color: #40506a;
  display: grid;
  gap: 0.72rem;
  line-height: 1.48;
}

.backup-protection-prompt-body p {
  margin: 0;
}

.backup-protection-modal-card {
  max-width: 560px;
}


/* P10B restore backup controls */
.backup-file-input {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(112, 101, 82, 0.16);
  border-radius: 12px;
  color: #40506a;
  font-size: 0.84rem;
  max-width: 22rem;
  padding: 0.44rem 0.5rem;
}

.backup-warning {
  color: #6f5b38;
  font-size: 0.8rem;
  line-height: 1.35;
  margin-top: 0.65rem;
}

.system-primary-action {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(75, 92, 118, 0.18);
  box-shadow: 0 6px 14px rgba(32, 41, 56, 0.05);
  color: #243247;
  font-weight: 650;
}

.system-primary-action:hover {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(45, 124, 100, 0.2);
  color: #1f3c35;
}

.backup-export-panel .system-primary-action {
  border-color: rgba(59, 130, 246, 0.16);
  color: #264468;
}

.backup-restore-panel .system-primary-action,
.restore-confirm-proceed-button {
  border-color: rgba(180, 83, 9, 0.22);
  color: #6f4216;
}

.system-health-actions .secondary-button {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(45, 124, 100, 0.2);
  box-shadow: 0 6px 14px rgba(32, 41, 56, 0.05);
  color: #245c4c;
  font-weight: 650;
}

.restore-preview-panel {
  background: linear-gradient(135deg, rgba(255, 252, 245, 0.94), rgba(246, 251, 249, 0.9));
  border: 1px solid rgba(146, 102, 42, 0.16);
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(64, 47, 24, 0.05);
  display: grid;
  gap: 0.66rem;
  margin-top: 0.85rem;
  padding: 0.78rem;
}

.restore-preview-header {
  align-items: start;
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
}

.restore-preview-header strong {
  color: #27364a;
  display: block;
  font-size: 0.96rem;
  font-weight: 760;
}

.restore-preview-header p {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0.22rem 0 0;
}

.restore-preview-counts {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.restore-preview-count {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(112, 101, 82, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.08rem;
  padding: 0.44rem 0.5rem;
}

.restore-preview-count strong {
  color: #243247;
  font-size: 1rem;
  font-weight: 760;
}

.restore-preview-count span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.restore-preview-messages {
  display: grid;
  gap: 0.34rem;
}

.restore-preview-message {
  border: 1px solid rgba(112, 101, 82, 0.12);
  border-radius: 11px;
  color: #435268;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
  padding: 0.42rem 0.52rem;
}

.restore-preview-message.is-success {
  background: rgba(232, 247, 241, 0.82);
  border-color: rgba(45, 124, 100, 0.16);
  color: #245c4c;
}

.restore-preview-message.is-warning {
  background: rgba(255, 247, 237, 0.86);
  border-color: rgba(180, 83, 9, 0.16);
  color: #704214;
}

.restore-preview-message.is-neutral {
  background: rgba(248, 250, 252, 0.86);
  border-color: rgba(100, 116, 139, 0.13);
}

@media (max-width: 760px) {
  .restore-preview-header {
    display: grid;
  }

  .restore-preview-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* P10C restore UX cleanup */
.restore-confirm-card {
  max-width: 560px;
}

.restore-confirm-body {
  display: grid;
  gap: 0.75rem;
}

.restore-confirm-warning {
  background: rgba(255, 247, 237, 0.72);
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 14px;
  color: #704214;
  font-size: 0.86rem;
  line-height: 1.45;
  padding: 0.8rem 0.9rem;
}

.danger-solid-button {
  background: var(--danger);
  color: white;
}

.danger-solid-button:hover {
  background: #8f1d14;
}

.restore-confirm-proceed-button:hover {
  background: rgba(254, 243, 199, 0.98);
}

.restore-status[data-tone="success"],
.backup-status[data-tone="success"],
.system-factory-reset-panel .status[data-tone="success"] { color: var(--success); }
.restore-status[data-tone="error"],
.backup-status[data-tone="error"],
.system-factory-reset-panel .status[data-tone="error"] { color: var(--danger); }


/* P11A real references data system */
.reference-context-box .warm-mock-badge {
  background: #7c4a03;
  color: #fff7ed;
}
.reference-empty-state {
  border: 1px dashed rgba(124, 74, 3, 0.25);
  border-radius: 14px;
  color: #7c4a03;
  font-size: 0.86rem;
  padding: 0.65rem;
  text-align: center;
}
.reference-row-live,
.reference-edit-row {
  text-align: left;
}
.modal-references-box {
  background: #fffaf0;
  border: 1px solid #e7d6b7;
  border-radius: 14px;
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
}
.reference-add-grid {
  align-items: end;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.72fr) minmax(190px, 1.15fr) minmax(170px, 1fr) auto auto;
}
.reference-file-field input {
  width: 100%;
}
.reference-edit-list {
  display: grid;
  gap: 0.35rem;
  max-height: 8rem;
  overflow: auto;
}
.reference-edit-row-wrap {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.reference-edit-row {
  align-items: center;
  background: #fffdf8;
  border: 1px solid #e7d6b7;
  border-radius: 12px;
  color: var(--text);
  display: flex;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
}
.reference-edit-row:hover {
  background: #f8edda;
}
.reference-delete-button {
  font-size: 0.78rem;
  padding: 0.42rem 0.55rem;
}
.reference-edit-note {
  font-size: 0.82rem;
}
.optional-label {
  color: var(--muted);
  font-weight: 700;
}
.supporting-material-picker {
  display: grid;
  gap: 0.75rem;
  min-width: min(36rem, 82vw);
}
.supporting-material-picker-controls {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.42fr);
}
.supporting-material-picker-controls label {
  display: grid;
  gap: 0.28rem;
}
.supporting-material-picker-controls span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.supporting-material-picker-list {
  display: grid;
  gap: 0.72rem;
  max-height: min(52vh, 30rem);
  overflow: auto;
  padding-right: 0.1rem;
}
.supporting-material-picker-section {
  display: grid;
  gap: 0.42rem;
}
.supporting-material-picker-section + .supporting-material-picker-section {
  border-top: 1px solid rgba(124, 74, 3, 0.16);
  padding-top: 0.65rem;
}
.supporting-material-picker-heading {
  display: grid;
  gap: 0.08rem;
}
.supporting-material-picker-heading small {
  color: var(--muted);
  font-size: 0.78rem;
}
.supporting-material-picker-item {
  align-items: center;
  background: #fffdf8;
  border: 1px solid #e7d6b7;
  border-radius: 12px;
  color: var(--text);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.48rem 0.55rem;
}
.supporting-material-picker-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}
.supporting-material-picker-copy strong,
.supporting-material-picker-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supporting-material-picker-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}
@media (max-width: 900px) {
  .reference-add-grid {
    grid-template-columns: 1fr;
  }
  .supporting-material-picker {
    min-width: 0;
  }
  .supporting-material-picker-controls {
    grid-template-columns: 1fr;
  }
  .supporting-material-picker-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .supporting-material-picker-item button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

.add-reference-create-box.modal-references-box {
  background: #fffaf0;
  border-color: #e7d6b7;
}
.reference-small-button,
.reference-cancel-edit-button {
  font-size: 0.78rem;
  padding: 0.42rem 0.55rem;
}

/* P11H ZonePlayer mock + layout rebalance */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1320px;
  }
}

@media (min-width: 861px) {
  .practice-grid {
    align-items: start;
    display: grid;
    grid-template-areas: "current tools";
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.62fr);
  }

  .hero-current {
    grid-area: current;
  }

  .practice-side {
    grid-area: tools;
  }
}

.current-item #currentItemMeta:empty {
  display: none;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  margin-top: 0.75rem;
  max-height: 250px;
  padding: 0.75rem;
}

.main-queue-panel .session-queue {
  max-height: 180px;
  overflow: auto;
}

.main-queue-panel .queue-item.compact-queue-item {
  font-size: 0.82rem;
  padding: 0.42rem 0.5rem;
}

.video-recorder-mock-card {
  background: rgba(255, 255, 255, 0.88);
}

.video-dot {
  background: #7c3aed;
  border-radius: 5px;
  display: inline-block;
  height: 0.7rem;
  width: 0.95rem;
}

.zoneplayer-mock-card {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.96), rgba(255, 255, 255, 0.9));
  border-color: rgba(31, 94, 255, 0.20);
}

.zoneplayer-actions button {
  width: 100%;
}

.tool-stack .dashboard-tool-card,
.tool-stack .metronome-card {
  padding: 0.72rem;
}

.tool-stack .tool-card-note {
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .main-queue-panel,
  .queue-panel.main-queue-panel {
    max-height: none;
  }
}


/* P11J UI final polish + tuner mock */
@media (min-width: 1200px) {
  .app-shell { max-width: 1320px; }
}

/* Compress the top dashboard header so the useful practice area starts higher. */
.compact-practice-header,
.practice-dashboard .practice-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.compact-session-title {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
}
.compact-session-title .eyebrow {
  margin: 0;
  font-size: 0.68rem;
}
.compact-session-title h2,
.practice-header h2 {
  font-size: 1.05rem;
  line-height: 1.1;
  margin: 0;
}
.compact-session-note {
  font-size: 0.82rem;
  margin: 0;
}

/* Current item: remove unused-feeling meta line unless elapsed time is active. */
#currentItemMeta:empty {
  display: none;
}
.hero-current {
  padding: 0.9rem;
}
.hero-current h3 {
  font-size: clamp(1.7rem, 3.6vw, 2.55rem);
  margin-bottom: 0.35rem;
}
.hero-current .description {
  margin-top: 0.45rem;
}
.hero-actions {
  margin-top: 0.65rem;
}

/* Keep references visually warm but less tall. */
.reference-context-box {
  margin-top: 0.7rem;
  padding: 0.65rem;
}
.reference-box-header {
  margin-bottom: 0.4rem;
}
.reference-box-header span {
  font-size: 0.72rem;
}
.reference-context-list {
  max-height: 7.2rem;
}
.reference-list-row,
.reference-edit-row {
  padding: 0.38rem 0.48rem;
}

/* Tool rail: tighter cards and subtle differentiated colors. */
.tool-stack {
  gap: 0.55rem;
}
.tool-stack .dashboard-tool-card,
.tool-stack .metronome-card,
.tool-stack .tool-stack-card {
  border-radius: 16px;
  padding: 0.56rem 0.62rem;
}
.tool-card-header {
  margin-bottom: 0.35rem;
}
.tool-card-header .eyebrow {
  font-size: 0.64rem;
  margin-bottom: 0.05rem;
}
.tool-card-header h3 {
  font-size: 0.92rem;
  margin: 0;
}
.tool-stack .tool-card-note {
  font-size: 0.75rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.tool-stack .button-row button,
.recorder-mock-actions button,
.zoneplayer-actions button {
  font-size: 0.78rem;
  padding: 0.38rem 0.5rem;
}
.tool-stack .metronome-card {
  background: linear-gradient(135deg, #eaf2ff 0%, rgba(255,255,255,0.92) 100%);
  border-color: rgba(31, 94, 255, 0.18);
}
.recorder-mock-card {
  background: linear-gradient(135deg, #eaf8ef 0%, rgba(255,255,255,0.92) 100%);
  border-color: rgba(6,118,71,0.16);
}
.video-recorder-mock-card {
  background: linear-gradient(135deg, #f2eaff 0%, rgba(255,255,255,0.92) 100%);
  border-color: rgba(124,58,237,0.16);
}
.zoneplayer-mock-card {
  background: linear-gradient(135deg, #fff3df 0%, rgba(255,255,255,0.94) 100%);
  border-color: rgba(181, 71, 8, 0.18);
}
.recorder-mock-display {
  font-size: 0.78rem;
  padding: 0.38rem 0.45rem;
  margin-bottom: 0.35rem;
}
.timing-strip-main,
.timing-mode-row,
.timing-strip-controls {
  gap: 0.32rem;
}
.timing-chip {
  font-size: 0.72rem;
  min-height: 1.45rem;
  padding: 0.24rem 0.45rem;
}
.timing-select-label {
  font-size: 0.66rem;
}
.timing-select-label select {
  font-size: 0.72rem;
  padding: 0.28rem 0.45rem;
}
.bpm-override-label input {
  max-width: 3.8rem;
  padding: 0.3rem 0.36rem;
}

/* Queue as compact progress window. */
.main-queue-panel,
.queue-panel.main-queue-panel {
  margin-top: 0.62rem;
  max-height: 178px;
  padding: 0.55rem;
}
.main-queue-panel .queue-heading,
.compact-queue-heading {
  gap: 0.22rem;
  margin-bottom: 0.35rem;
}
.main-queue-panel .queue-title-row {
  gap: 0.4rem;
}
.main-queue-panel h3 {
  font-size: 0.9rem;
}
.queue-progress-pill {
  font-size: 0.68rem;
  padding: 0.15rem 0.38rem;
}
.queue-helper {
  font-size: 0.74rem;
}
.main-queue-panel .session-queue {
  gap: 0.25rem;
  max-height: 118px;
  overflow: auto;
}
.main-queue-panel .queue-item,
.main-queue-panel .queue-item.compact-queue-item {
  border-radius: 10px;
  font-size: 0.73rem;
  line-height: 1.15;
  padding: 0.28rem 0.42rem;
}
.main-queue-panel .queue-item::before {
  font-size: 0.62rem;
  height: 1.15rem;
  width: 1.15rem;
}

/* Keep the timer usable while saving vertical space. */
.compact-countdown-card,
.countdown-card {
  margin-top: 0.55rem;
  padding: 0.36rem 0.5rem !important;
}
.countdown-display span:first-child {
  font-size: 1rem !important;
}

@media (max-width: 860px) {
  .compact-practice-header,
  .practice-dashboard .practice-header {
    align-items: flex-start;
    display: grid;
  }
}


/* P11J final polish: stretch shell, add ZoneTune, balance tools + queue */
html, body {
  min-height: 100%;
}

.app-shell {
  min-height: calc(100vh - 1.25rem);
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
}

.practice-dashboard {
  padding-bottom: 1rem;
}

.practice-grid {
  align-items: stretch;
}

.tool-stack {
  gap: 0.46rem;
}

.tool-stack .dashboard-tool-card,
.tool-stack .metronome-card,
.tool-stack .tool-stack-card {
  padding: 0.46rem 0.55rem;
}

.zonebeat-header {
  margin-bottom: 0.25rem;
}

.zonebeat-header h3 {
  font-size: 0.9rem;
}

.timing-strip-main,
.timing-mode-row,
.timing-strip-controls {
  gap: 0.25rem;
}

.timing-chip {
  font-size: 0.68rem;
  min-height: 1.35rem;
  padding: 0.2rem 0.38rem;
}

.tool-stack .tool-card-note {
  margin-bottom: 0.25rem;
}

.recorder-mock-display,
.tuner-mock-display {
  margin-bottom: 0.28rem;
}

.zonetune-mock-card {
  background: linear-gradient(135deg, #e8fbff 0%, rgba(255,255,255,0.94) 100%);
  border-color: rgba(14, 116, 144, 0.18);
}

.tuner-mock-display {
  align-items: center;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(14,116,144,0.12);
  border-radius: 12px;
  display: flex;
  gap: 0.42rem;
  justify-content: space-between;
  padding: 0.32rem 0.45rem;
}

.tuner-note {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 900;
}

.tuner-frequency,
.tuner-cents {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.tuner-mock-actions button {
  font-size: 0.76rem;
  padding: 0.34rem 0.48rem;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  max-height: 196px;
  padding: 0.58rem;
}

.main-queue-panel .session-queue {
  max-height: 136px;
}

.main-queue-panel .queue-item,
.main-queue-panel .queue-item.compact-queue-item {
  font-size: 0.71rem;
  padding: 0.25rem 0.38rem;
}

.compact-practice-header,
.practice-dashboard .practice-header {
  margin-bottom: 0.42rem;
}

.hero-current {
  padding: 0.82rem;
}

.hero-current h3 {
  font-size: clamp(1.62rem, 3.3vw, 2.35rem);
}

@media (max-height: 820px) and (min-width: 861px) {
  .tool-stack .dashboard-tool-card,
  .tool-stack .metronome-card,
  .tool-stack .tool-stack-card {
    padding: 0.38rem 0.48rem;
  }
  .tool-card-header h3 { font-size: 0.84rem; }
  .tool-stack .tool-card-note { display: none; }
  .recorder-mock-display, .tuner-mock-display { padding: 0.26rem 0.38rem; }
}


/* P11K tool header controls: put action buttons inline with tool names to recover vertical space. */
@media (min-width: 1200px) {
  .app-shell { max-width: 1340px; }
}

.app-shell {
  min-height: calc(100vh - 0.5rem);
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

.card.practice-dashboard {
  padding-top: 0.82rem;
  padding-bottom: 0.74rem;
}

.compact-practice-header,
.practice-dashboard .practice-header {
  margin-bottom: 0.32rem;
}

.compact-session-title .eyebrow {
  font-size: 0.62rem;
}
.compact-session-title h2,
.practice-header h2 {
  font-size: 0.98rem;
}
.compact-session-note {
  font-size: 0.76rem;
}

.hero-current {
  padding: 0.72rem;
}
.hero-current h3 {
  font-size: clamp(1.5rem, 3vw, 2.18rem);
  margin-bottom: 0.25rem;
}
.hero-current .description {
  margin-top: 0.32rem;
}
.hero-actions {
  margin-top: 0.5rem;
}

.tool-stack {
  gap: 0.36rem;
}
.tool-stack .dashboard-tool-card,
.tool-stack .metronome-card,
.tool-stack .tool-stack-card {
  padding: 0.34rem 0.46rem;
  border-radius: 14px;
}
.compact-tool-header-with-actions,
.tool-card-header.compact-tool-header-with-actions {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
  margin-bottom: 0.22rem;
}
.compact-tool-header-with-actions .eyebrow,
.tool-card-header .eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.075em;
  margin-bottom: 0.02rem;
}
.compact-tool-header-with-actions h3,
.tool-card-header h3 {
  font-size: 0.78rem;
  line-height: 1.05;
}
.compact-inline-actions,
.button-row.compact-inline-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.22rem;
  justify-content: flex-end;
}
.compact-inline-actions button,
.tool-stack .button-row.compact-inline-actions button,
.recorder-mock-actions button,
.zoneplayer-actions button,
.tuner-mock-actions button,
.timing-start-stop button {
  border-radius: 9px;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.25rem 0.34rem;
  white-space: nowrap;
}

.timing-strip-main,
.timing-mode-row,
.timing-strip-controls {
  gap: 0.18rem;
}
.timing-strip-main {
  margin-bottom: 0.08rem;
}
.timing-mode-row {
  margin-bottom: 0.08rem;
}
.timing-chip {
  font-size: 0.62rem;
  min-height: 1.18rem;
  padding: 0.16rem 0.31rem;
}
.timing-select-label {
  font-size: 0.58rem;
  gap: 0.18rem;
}
.timing-select-label select {
  font-size: 0.66rem;
  max-width: 145px;
  padding: 0.2rem 0.34rem;
}
.timing-strip-controls input[type="range"],
.metronome-controls input[type="range"] {
  max-width: 132px;
  min-width: 82px;
}
.bpm-override-label {
  font-size: 0.62rem;
}
.bpm-override-label input {
  max-width: 3.35rem;
  padding: 0.22rem 0.3rem;
}
.timing-auto {
  font-size: 0.68rem;
}

.recorder-mock-display,
.tuner-mock-display {
  font-size: 0.68rem;
  margin-bottom: 0;
  padding: 0.22rem 0.34rem;
}
.record-dot,
.video-dot {
  height: 0.55rem;
  width: 0.55rem;
}
.tuner-note {
  font-size: 0.82rem;
}
.tuner-frequency,
.tuner-cents {
  font-size: 0.62rem;
}

.reference-context-box {
  margin-top: 0.55rem;
  padding: 0.52rem;
}
.reference-context-list {
  max-height: 6.8rem;
}
.reference-list-row,
.reference-edit-row {
  padding: 0.3rem 0.4rem;
}
.current-item-notes-box {
  margin-top: 0.48rem;
}
.current-item-notes-box textarea {
  min-height: 2.45rem;
}
.compact-countdown-card,
.countdown-card {
  margin-top: 0.46rem;
  padding: 0.3rem 0.45rem !important;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  margin-top: 0.54rem;
  max-height: 214px;
  padding: 0.54rem;
}
.main-queue-panel .session-queue {
  max-height: 154px;
}
.main-queue-panel .queue-item,
.main-queue-panel .queue-item.compact-queue-item {
  font-size: 0.69rem;
  padding: 0.23rem 0.36rem;
}
.queue-helper {
  font-size: 0.7rem;
}

@media (max-height: 820px) and (min-width: 861px) {
  .tool-stack { gap: 0.28rem; }
  .tool-stack .dashboard-tool-card,
  .tool-stack .metronome-card,
  .tool-stack .tool-stack-card { padding: 0.28rem 0.4rem; }
  .compact-tool-header-with-actions h3,
  .tool-card-header h3 { font-size: 0.72rem; }
  .compact-inline-actions button,
  .tool-stack .button-row.compact-inline-actions button { font-size: 0.62rem; padding: 0.2rem 0.28rem; }
  .recorder-mock-display,
  .tuner-mock-display { padding: 0.18rem 0.3rem; }
}



.build-chip {
  background: rgba(23, 32, 51, 0.08);
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 999px;
  color: var(--muted);
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 850;
  margin-left: 0.4rem;
  padding: 0.12rem 0.42rem;
  vertical-align: baseline;
}

/* P11O backup health indicator - header placement */
.backup-health-button {
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20, 30, 50, 0.08);
  color: #172033;
  font-size: 0.78rem;
  font-weight: 850;
  justify-self: end;
  min-width: 8.2rem;
  padding: 0.44rem 0.7rem;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.backup-health-button:hover {
  transform: translateY(-1px);
}

.backup-health-fresh {
  background: linear-gradient(135deg, #d1fadf, #ecfdf3);
  color: #067647;
}

.backup-health-warm {
  background: linear-gradient(135deg, #fef7c3, #fffaeb);
  color: #93370d;
}

.backup-health-risk {
  background: linear-gradient(135deg, #fedf89, #fffaeb);
  color: #b54708;
}

.backup-health-danger {
  background: linear-gradient(135deg, #fecdca, #fff1f0);
  color: #b42318;
}

.backup-health-button.backup-health-risk,
.backup-health-button.backup-health-danger {
  border-color: rgba(150, 82, 30, 0.22);
  box-shadow: 0 5px 14px rgba(82, 54, 29, 0.08);
}

.backup-health-button.backup-health-risk {
  background: linear-gradient(135deg, #fff2d6, #fffaf0);
  color: #7a4a12;
}

.backup-health-button.backup-health-danger {
  animation: none;
  background: linear-gradient(135deg, #ffe7df, #fff8f3);
  color: #8c2a1b;
}

@keyframes backupHealthPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(180, 35, 24, 0.0); }
  50% { box-shadow: 0 0 0 5px rgba(180, 35, 24, 0.16); }
}

@media (max-width: 900px) {
  .backup-health-button {
    justify-self: stretch;
    width: 100%;
  }
}


/* P02G Progressive Dashboard Modes */
.dashboard-mode-bar {
  align-items: center;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(100, 112, 132, 0.22);
  border-radius: 18px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.7rem;
}

.dashboard-mode-copy {
  display: grid;
  gap: 0.12rem;
}

.dashboard-mode-copy strong {
  font-size: 0.95rem;
}

.dashboard-mode-copy span,
.tool-launcher-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.dashboard-mode-buttons {
  background: #eef2ff;
  border: 1px solid rgba(31, 94, 255, 0.14);
  border-radius: 999px;
  display: flex;
  gap: 0.2rem;
  padding: 0.22rem;
}

.dashboard-mode-button {
  background: transparent;
  border-radius: 999px;
  color: var(--primary);
  font-size: 0.8rem;
  padding: 0.45rem 0.65rem;
}

.dashboard-mode-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.dashboard-mode-button.is-selected {
  background: var(--primary);
  color: white;
}

.dashboard-tool-launcher {
  background: rgba(248, 250, 252, 0.90);
  border: 1px solid rgba(100, 112, 132, 0.22);
  border-radius: 18px;
  display: grid;
  gap: 0.55rem;
  padding: 0.72rem;
}

.tool-launcher-grid {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-launch-button {
  font-size: 0.8rem;
  padding: 0.5rem 0.45rem;
}

body[data-dashboard-mode="essentials"] .practice-dashboard {
  border-color: rgba(6, 118, 71, 0.22);
}

body[data-dashboard-mode="essentials"] .practice-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-dashboard-mode="essentials"] .hero-current {
  text-align: center;
}

body[data-dashboard-mode="essentials"] .hero-current h3 {
  font-size: clamp(2.15rem, 8vw, 3.8rem);
}

body[data-dashboard-mode="essentials"] .hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

body[data-dashboard-mode="essentials"] #startItemButton,
body[data-dashboard-mode="essentials"] #doneItemButton {
  font-size: 1.1rem;
  min-height: 3.7rem;
}

body[data-dashboard-mode="essentials"] #skipItemButton,
body[data-dashboard-mode="essentials"] #editCurrentItemButton {
  font-size: 0.86rem;
  min-height: 2.6rem;
}

body[data-dashboard-mode="essentials"] .practice-side {
  grid-row: auto;
}

body[data-dashboard-mode="essentials"] .timing-mode-row,
body[data-dashboard-mode="essentials"] .timing-auto,
body[data-dashboard-mode="essentials"] #bpmInput,
body[data-dashboard-mode="essentials"] .tool-launcher-note {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .zonebeat-card {
  order: -1;
}

body[data-dashboard-mode="essentials"] .zonebeat-card .tool-card-header {
  align-items: center;
}

body[data-dashboard-mode="essentials"] .zonebeat-card h3::after {
  content: " • simple";
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

body[data-dashboard-mode="essentials"] .metronome-controls {
  align-items: center;
  display: flex;
  justify-content: center;
}

body[data-dashboard-mode="essentials"] .main-queue-panel {
  background: linear-gradient(135deg, rgba(236, 253, 243, 0.88), rgba(255, 255, 255, 0.92));
  border-color: rgba(6, 118, 71, 0.22);
  max-height: none;
}

body[data-dashboard-mode="essentials"] .main-queue-panel .session-queue {
  max-height: 260px;
}

body[data-dashboard-mode="essentials"] .queue-helper {
  display: none;
}

body[data-dashboard-mode="essentials"] .current-item-notes-box {
  text-align: left;
}

body[data-dashboard-mode="essentials"] [data-tool-card],
body[data-dashboard-mode="flow"] [data-tool-card] {
  display: none;
}

body[data-dashboard-mode="essentials"] [data-tool-card].is-open,
body[data-dashboard-mode="flow"] [data-tool-card].is-open,
body[data-dashboard-mode="studio"] [data-tool-card] {
  display: grid;
}

body[data-dashboard-mode="essentials"] .dashboard-tool-launcher,
body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
  display: grid;
}

body[data-dashboard-mode="studio"] .dashboard-tool-launcher {
  display: none;
}

body[data-dashboard-mode="flow"] .practice-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.72fr);
}

body[data-dashboard-mode="flow"] .practice-side {
  align-content: start;
}

body[data-dashboard-mode="flow"] .video-recorder-mock-card:not(.is-open),
body[data-dashboard-mode="flow"] .recorder-mock-card:not(.is-open),
body[data-dashboard-mode="flow"] .zonetune-mock-card:not(.is-open),
body[data-dashboard-mode="flow"] .zoneplayer-mock-card:not(.is-open) {
  display: none;
}

body[data-dashboard-mode="studio"] .practice-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.62fr);
}

body[data-dashboard-mode="studio"] .dashboard-mode-bar {
  border-color: rgba(31, 94, 255, 0.20);
}

@media (max-width: 860px) {
  .dashboard-mode-bar {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-mode-buttons {
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-mode-button {
    border-radius: 12px;
  }

  .tool-launcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-dashboard-mode] .practice-grid {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-mode="flow"] .practice-side,
  body[data-dashboard-mode="essentials"] .practice-side {
    order: 2;
  }
}

@media (max-width: 560px) {
  body[data-dashboard-mode="essentials"] .hero-actions {
    grid-template-columns: 1fr;
  }

  .tool-launcher-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-mode-copy {
    text-align: center;
  }
}


/* P02G progressive dashboard tightening verified patch */
.embedded-zonebeat-card {
  margin-top: 0.6rem;
  margin-bottom: 0.45rem;
}

.embedded-zonebeat-card .tool-card-header {
  align-items: center;
}

.embedded-zonebeat-card .tool-card-header h3 {
  font-size: 0.98rem;
}

.embedded-zonebeat-card .timing-mode-row {
  margin-top: 0.35rem;
}

.embedded-zonebeat-card .timing-strip-controls {
  margin-top: 0.35rem;
}

body[data-dashboard-mode="essentials"] .practice-side {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .dashboard-tool-launcher {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card {
  background: rgba(248, 250, 252, 0.92);
  border-radius: 16px;
  padding: 0.55rem 0.65rem;
  text-align: left;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .eyebrow {
  display: none;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card h3 {
  margin: 0;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card h3::after {
  content: "";
}

body[data-dashboard-mode="essentials"] .timing-start-stop button {
  padding: 0.42rem 0.58rem;
  font-size: 0.8rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label {
  display: grid !important;
  gap: 0.18rem;
  width: 100%;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label select {
  max-width: none;
  width: 100%;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card #bpmInput,
body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-auto {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .metronome-controls {
  display: flex;
  justify-content: flex-start;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .bpm-override-label {
  font-size: 0.8rem;
}

body[data-dashboard-mode="essentials"] .current-item-notes-box {
  padding: 0.45rem 0.55rem;
  margin-top: 0.45rem;
}

body[data-dashboard-mode="essentials"] .current-item-notes-header span {
  display: none;
}

body[data-dashboard-mode="essentials"] .current-item-notes-box textarea {
  min-height: 2.2rem;
  max-height: 3.2rem;
  rows: 1;
}

body[data-dashboard-mode="essentials"] .current-item-references-box[data-has-references="false"] {
  display: none !important;
}

body[data-dashboard-mode="flow"] .dashboard-mode-bar {
  margin-bottom: 0.55rem;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
  padding: 0.55rem;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-card-header {
  display: none;
}

body[data-dashboard-mode="flow"] .tool-launcher-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-dashboard-mode="flow"] .tool-launch-button {
  padding: 0.42rem 0.35rem;
  font-size: 0.76rem;
}

body[data-dashboard-mode="flow"] .tool-launcher-note {
  display: none;
}

body[data-dashboard-mode="flow"] .practice-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.52fr);
}

body[data-dashboard-mode="flow"] .compact-countdown-card,
body[data-dashboard-mode="studio"] .compact-countdown-card {
  padding: 0.34rem 0.48rem !important;
  gap: 0.3rem;
}

body[data-dashboard-mode="flow"] .countdown-actions,
body[data-dashboard-mode="studio"] .countdown-actions {
  margin-left: auto;
}

@media (max-width: 760px) {
  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-mode="essentials"] .hero-actions {
    grid-template-columns: 1fr;
  }
}


/* P02G Flow tools + Essentials timing tightening */
.mode-tool-strip {
  align-items: center;
  display: none;
  gap: 0.28rem;
}

.mode-tool-strip .tool-launch-button {
  font-size: 0.76rem;
  min-height: 2rem;
  padding: 0.36rem 0.52rem;
  white-space: nowrap;
}

body[data-dashboard-mode="flow"] .dashboard-mode-bar {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.6rem;
}

body[data-dashboard-mode="flow"] .mode-tool-strip {
  display: inline-flex;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher,
body[data-dashboard-mode="essentials"] .mode-tool-strip {
  display: none !important;
}

body[data-dashboard-mode="flow"] .practice-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-dashboard-mode="flow"] .practice-side {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-dashboard-mode="flow"] .practice-side:empty {
  display: none;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  display: grid;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open .tool-card-header {
  align-items: center;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card {
  margin-top: 0.42rem;
  margin-bottom: 0.34rem;
  padding: 0.42rem 0.55rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
  grid-template-columns: auto 1fr auto;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card h3 {
  font-size: 0.9rem;
  white-space: nowrap;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
  align-items: end;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  margin-top: 0.25rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label {
  font-size: 0.68rem;
  gap: 0.1rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label select {
  min-height: 2rem;
  padding: 0.32rem 0.45rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .metronome-controls {
  margin-top: 0.25rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .bpm-override-label {
  align-items: center;
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.35rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .bpm-override-label input {
  min-height: 2.05rem;
  max-width: 4.8rem;
  padding: 0.32rem 0.45rem;
}

body[data-dashboard-mode="essentials"] .timing-start-stop {
  display: inline-flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

body[data-dashboard-mode="essentials"] .timing-start-stop button {
  font-size: 0.92rem;
  min-height: 2.35rem;
  min-width: 4.4rem;
  padding: 0.5rem 0.72rem;
}

body[data-dashboard-mode="essentials"] .compact-countdown-card {
  padding: 0.5rem 0.6rem !important;
  gap: 0.38rem;
}

body[data-dashboard-mode="essentials"] .countdown-display span:first-child {
  font-size: 1.18rem !important;
}

body[data-dashboard-mode="essentials"] .timer-preset,
body[data-dashboard-mode="essentials"] .countdown-actions button {
  font-size: 0.86rem !important;
  min-height: 2.25rem;
  padding: 0.42rem 0.58rem !important;
}

body[data-dashboard-mode="essentials"] .countdown-actions button {
  min-width: 4.1rem;
}

@media (max-width: 860px) {
  body[data-dashboard-mode="flow"] .dashboard-mode-bar {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-mode="flow"] .mode-tool-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-dashboard-mode="flow"] .practice-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-mode="essentials"] .timing-start-stop {
    justify-content: stretch;
  }

  body[data-dashboard-mode="essentials"] .timing-start-stop button {
    flex: 1 1 0;
  }
}


/* P02G proportion + flow refinement */
.practice-support-row {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

body[data-dashboard-mode="flow"] .practice-support-row {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
}

body[data-dashboard-mode="studio"] .practice-support-row {
  grid-template-columns: 1fr;
}

body[data-dashboard-mode="essentials"] .practice-support-row {
  grid-template-columns: 1fr;
  margin-top: 0.48rem;
}

body[data-dashboard-mode="essentials"] .current-item-references-box {
  display: none !important;
}

/* Restore readable ZoneBeat proportions while removing vertical dead space. */
.embedded-zonebeat-card,
body[data-dashboard-mode="flow"] .embedded-zonebeat-card,
body[data-dashboard-mode="studio"] .embedded-zonebeat-card {
  margin: 0 !important;
  padding: 0.62rem 0.72rem !important;
}

.embedded-zonebeat-card .tool-card-header {
  gap: 0.55rem;
}

.embedded-zonebeat-card .tool-card-header h3 {
  font-size: 1.08rem !important;
  line-height: 1.1;
}

.embedded-zonebeat-card .eyebrow {
  font-size: 0.7rem;
  margin-bottom: 0.12rem;
}

.embedded-zonebeat-card .timing-mode-row,
.embedded-zonebeat-card .timing-strip-controls {
  margin-top: 0.32rem !important;
}

.embedded-zonebeat-card .timing-select-label {
  font-size: 0.75rem !important;
}

.embedded-zonebeat-card .timing-select-label select {
  min-height: 2.15rem !important;
  padding: 0.38rem 0.5rem !important;
}

.embedded-zonebeat-card .bpm-override-label {
  font-size: 0.82rem !important;
  font-weight: 900;
}

.embedded-zonebeat-card .bpm-override-label input {
  font-size: 0.95rem;
  min-height: 2.18rem !important;
}

.timing-start-stop button,
body[data-dashboard-mode="flow"] .timing-start-stop button,
body[data-dashboard-mode="studio"] .timing-start-stop button {
  font-size: 0.98rem !important;
  min-height: 2.45rem;
  min-width: 4.8rem;
  padding: 0.52rem 0.78rem !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card {
  padding: 0.58rem 0.68rem !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
  grid-template-columns: 1fr auto;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card h3 {
  font-size: 1.08rem !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.32rem !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .metronome-controls {
  margin-top: 0.28rem !important;
}

body[data-dashboard-mode="essentials"] .timing-start-stop button {
  font-size: 1rem !important;
  min-height: 2.55rem;
  min-width: 5rem;
}

/* Flow: references share the row with timing instead of consuming a separate tall block. */
body[data-dashboard-mode="flow"] .reference-context-box {
  margin: 0 !important;
  padding: 0.62rem 0.72rem;
}

body[data-dashboard-mode="flow"] .reference-box-header strong {
  font-size: 0.98rem;
}

body[data-dashboard-mode="flow"] .reference-context-list {
  max-height: 8.2rem;
}

body[data-dashboard-mode="flow"] .reference-empty-state {
  padding: 0.55rem;
}

/* Timer: keep the stronger P02G sizing, but make the action buttons feel intentional. */
.compact-countdown-card {
  margin-top: 0.65rem !important;
}

.countdown-actions button {
  min-height: 2.3rem;
  min-width: 4.25rem;
}

body[data-dashboard-mode="studio"] .countdown-actions button,
body[data-dashboard-mode="flow"] .countdown-actions button {
  font-size: 0.88rem !important;
  padding: 0.44rem 0.62rem !important;
}

@media (max-width: 860px) {
  body[data-dashboard-mode="flow"] .practice-support-row,
  body[data-dashboard-mode="studio"] .practice-support-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
    grid-template-columns: 1fr;
  }
  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
    grid-template-columns: 1fr;
  }
}

/* P02I Essentials + Flow Workspace direction
   - Studio is now reserved for future instructor/builder work.
   - Current product modes are Essentials and Flow.
   - Flow tools behave as a right-side utility rail, not a two-column popup grid. */

.dashboard-mode-bar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
}

.dashboard-mode-copy strong,
.current-item-notes-header label,
.compact-side-queue .queue-title-row h3,
.embedded-zonebeat-card .tool-card-header h3 {
  font-size: 0.95rem;
  line-height: 1.1;
}

.dashboard-mode-copy span {
  font-size: 0.78rem;
}

body[data-dashboard-mode="essentials"] .mode-tool-strip {
  display: none !important;
}

body[data-dashboard-mode="flow"] .mode-tool-strip {
  display: inline-flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.mode-tool-strip .tool-launch-button {
  padding: 0.46rem 0.66rem;
  font-size: 0.8rem;
  min-height: 2.15rem;
}

.mode-tool-strip .tool-launch-button.is-selected {
  background: var(--primary);
  color: white;
}

/* Essentials: keep the guided surface clean and compact. */
body[data-dashboard-mode="essentials"] .practice-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-dashboard-mode="essentials"] .practice-side {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .practice-support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

body[data-dashboard-mode="essentials"] .current-item-references-box {
  display: none !important;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card {
  padding: 0.52rem 0.62rem !important;
  gap: 0.4rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header {
  margin-bottom: 0.05rem;
  gap: 0.55rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header .eyebrow {
  font-size: 0.68rem;
}

body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header h3 {
  font-size: 0.98rem !important;
}

body[data-dashboard-mode="essentials"] .timing-mode-row,
body[data-dashboard-mode="essentials"] .timing-strip-controls {
  gap: 0.35rem;
}

body[data-dashboard-mode="essentials"] .timing-select-label {
  font-size: 0.68rem;
}

body[data-dashboard-mode="essentials"] .timing-select-label select {
  min-height: 2.05rem;
  padding: 0.35rem 0.52rem;
}

body[data-dashboard-mode="essentials"] .timing-start-stop button,
body[data-dashboard-mode="flow"] .timing-start-stop button {
  min-height: 2.25rem;
  padding: 0.52rem 0.82rem !important;
  font-size: 0.88rem !important;
}

body[data-dashboard-mode="essentials"] .current-item-notes-box {
  padding: 0.52rem 0.62rem;
  margin-top: 0.55rem;
}

body[data-dashboard-mode="essentials"] .current-item-notes-box textarea {
  min-height: 2.4rem;
  max-height: 4.2rem;
}

/* Flow: support strip uses timing + references side-by-side when possible. */
body[data-dashboard-mode="flow"] .practice-support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 0.65rem;
  align-items: stretch;
}

body[data-dashboard-mode="flow"] .embedded-zonebeat-card,
body[data-dashboard-mode="flow"] .current-item-references-box {
  margin-top: 0;
  padding: 0.6rem 0.7rem !important;
}

body[data-dashboard-mode="flow"] .current-item-references-box .warm-mock-badge {
  display: none !important;
}

body[data-dashboard-mode="flow"] .embedded-zonebeat-card .tool-card-header h3 {
  font-size: 0.98rem !important;
}

/* Flow utility rail: opened tools stack down the right side with no two-column dead space. */
body[data-dashboard-mode="flow"] .practice-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.54fr);
  align-items: start;
}

body[data-dashboard-mode="flow"] .practice-side {
  display: grid !important;
  gap: 0.55rem;
  align-content: start;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
  display: none !important;
}

body[data-dashboard-mode="flow"] [data-tool-card] {
  display: none !important;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  display: grid !important;
  grid-column: auto !important;
  width: 100%;
  padding: 0.62rem !important;
  gap: 0.45rem;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open .tool-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open .tool-card-header h3 {
  font-size: 0.9rem;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open .tool-card-header .eyebrow {
  font-size: 0.64rem;
}

body[data-dashboard-mode="flow"] .recorder-mock-display,
body[data-dashboard-mode="flow"] .tuner-mock-display {
  min-height: 2.2rem;
  padding: 0.5rem 0.6rem;
}

/* Phone/tablet fallback: tools become full-width stacked panels below the practice surface. */
@media (max-width: 860px) {
  .dashboard-mode-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-dashboard-mode="flow"] .mode-tool-strip {
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-dashboard-mode="flow"] .practice-grid,
  body[data-dashboard-mode="flow"] .practice-support-row {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-mode="flow"] .practice-side {
    margin-top: 0.65rem;
  }
}

@media (max-width: 520px) {
  body[data-dashboard-mode="flow"] .mode-tool-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* P02I Mobile Essentials + reference drawer + queue launch surface */
.references-toggle-button {
  font-size: 0.78rem;
  min-height: 2rem;
  padding: 0.35rem 0.58rem;
}

body[data-dashboard-mode="essentials"] .current-item-references-box[data-has-references="true"] {
  display: grid !important;
}

body[data-dashboard-mode="essentials"] .current-item-references-box {
  margin-top: 0.42rem;
  padding: 0.5rem 0.6rem;
}

body[data-dashboard-mode="essentials"] .reference-context-list,
body[data-dashboard-mode="essentials"] .reference-empty-state {
  display: none;
}

body[data-dashboard-mode="essentials"] .current-item-references-box.is-expanded .reference-context-list,
body[data-dashboard-mode="essentials"] .current-item-references-box.is-expanded .reference-empty-state {
  display: grid;
}

.queue-start-now-button {
  background: rgba(31, 94, 255, 0.10);
  color: var(--primary);
  flex: 0 0 auto;
  font-size: 0.76rem;
  min-height: 1.85rem;
  padding: 0.28rem 0.52rem;
}

.queue-start-now-button:hover {
  background: rgba(31, 94, 255, 0.18);
}

.main-queue-panel .queue-item.compact-queue-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

body[data-dashboard-mode="flow"] .practice-side {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 360px;
  justify-self: end;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  width: 100%;
}

body[data-dashboard-mode="flow"] .practice-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr) !important;
}

body[data-dashboard-mode="flow"] .mode-tool-strip {
  order: 2;
}

body[data-dashboard-mode="flow"] .dashboard-mode-buttons {
  order: 3;
}

/* Phone-specific composition: make the app feel like practice first, not admin first. */
@media (max-width: 720px) {
  body {
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  }

  .app-shell {
    padding: 0.45rem 0.55rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .app-header.header-with-nav {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    padding: 0.25rem 0.1rem;
  }

  .compact-brand-header h1 {
    font-size: 1.25rem;
    line-height: 1;
    margin: 0;
  }

  .brand-tagline,
  .brand-support,
  .today-line,
  #pwaUpdateStatus,
  #backupHealthButton {
    display: none !important;
  }

  .header-right {
    display: block;
  }

  .app-nav {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(100,112,132,0.26);
    border-radius: 18px 18px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(15,23,42,0.14);
    display: grid;
    gap: 0.18rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    left: 0;
    margin: 0;
    padding: 0.38rem 0.35rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: 40;
  }

  .app-nav-button {
    border-radius: 12px;
    font-size: 0.67rem;
    min-height: 2.35rem;
    padding: 0.32rem 0.18rem;
    width: auto;
  }

  .practice-dashboard.card,
  .current-item,
  .queue-panel,
  .embedded-zonebeat-card,
  .current-item-references-box,
  .countdown-card {
    border-radius: 16px;
  }

  .practice-dashboard.card {
    margin-top: 0.35rem;
    padding: 0.65rem;
  }

  .compact-practice-header {
    margin-bottom: 0.35rem;
  }

  .compact-session-title .eyebrow,
  .compact-session-note,
  .dashboard-mode-copy {
    display: none !important;
  }

  .compact-session-title h2 {
    font-size: 0.95rem;
    margin: 0;
  }

  .dashboard-mode-bar {
    background: transparent;
    border: 0;
    display: flex !important;
    justify-content: flex-end;
    margin: -0.15rem 0 0.35rem;
    padding: 0;
  }

  .dashboard-mode-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 13.5rem;
  }

  .dashboard-mode-button {
    font-size: 0.75rem;
    padding: 0.42rem 0.58rem;
  }

  .practice-empty.dashboard-start-empty {
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .practice-empty.dashboard-start-empty strong {
    font-size: 1rem;
  }

  .practice-empty.dashboard-start-empty p {
    font-size: 0.82rem;
  }

  #startSessionButton {
    min-height: 3.2rem;
    font-size: 1.05rem;
  }

  body[data-dashboard-mode="essentials"] .hero-current {
    padding: 0.68rem;
    text-align: left;
  }

  body[data-dashboard-mode="essentials"] .hero-current .eyebrow {
    font-size: 0.66rem;
    margin-bottom: 0.1rem;
  }

  body[data-dashboard-mode="essentials"] .hero-current h3 {
    font-size: clamp(1.65rem, 10vw, 2.35rem);
    line-height: 0.98;
    margin-bottom: 0.25rem;
  }

  body[data-dashboard-mode="essentials"] .hero-current .description {
    font-size: 0.88rem;
    line-height: 1.25;
    margin: 0.35rem 0 0.45rem;
  }

  body[data-dashboard-mode="essentials"] .hero-actions {
    gap: 0.42rem;
    grid-template-columns: 1fr 1fr;
    margin: 0.45rem 0;
  }

  body[data-dashboard-mode="essentials"] #startItemButton,
  body[data-dashboard-mode="essentials"] #doneItemButton {
    font-size: 1rem;
    min-height: 3.1rem;
  }

  body[data-dashboard-mode="essentials"] #skipItemButton,
  body[data-dashboard-mode="essentials"] #editCurrentItemButton {
    font-size: 0.78rem;
    min-height: 2.15rem;
  }

  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card {
    padding: 0.42rem 0.5rem !important;
  }

  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .tool-card-header h3 {
    font-size: 0.88rem !important;
  }

  body[data-dashboard-mode="essentials"] .timing-start-stop button {
    font-size: 0.86rem;
    min-height: 2.12rem;
    min-width: 4.1rem;
    padding: 0.38rem 0.62rem;
  }

  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-mode-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.32rem;
  }

  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label {
    font-size: 0.62rem;
  }

  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .timing-select-label select,
  body[data-dashboard-mode="essentials"] .embedded-zonebeat-card .bpm-override-label input {
    min-height: 1.85rem;
    padding: 0.24rem 0.38rem;
  }

  body[data-dashboard-mode="essentials"] .compact-countdown-card {
    padding: 0.42rem 0.5rem !important;
  }

  body[data-dashboard-mode="essentials"] .current-item-notes-box {
    display: none !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel {
    margin-top: 0.48rem;
    padding: 0.55rem;
  }

  .compact-side-queue .queue-title-row {
    grid-template-columns: auto auto minmax(60px, 1fr);
  }

  .main-queue-panel .session-queue {
    max-height: 190px;
  }

  .main-queue-panel .queue-item,
  .main-queue-panel .queue-item.compact-queue-item {
    font-size: 0.78rem;
    gap: 0.35rem;
    padding: 0.36rem 0.42rem;
  }

  .queue-start-now-button {
    display: inline-grid;
    font-size: 0.7rem;
    min-height: 1.7rem;
    padding: 0.2rem 0.42rem;
  }

  body[data-dashboard-mode="flow"] .mode-tool-strip {
    display: none !important;
  }

  body[data-dashboard-mode="flow"] .practice-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-dashboard-mode="flow"] .practice-side {
    max-width: none;
    width: 100%;
  }
}

/* P02M mobile practice-first navigation and queue readiness polish */
@media (max-width: 720px) {
  .app-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app-nav-button[data-screen="advanced"],
  .app-nav-button[data-screen="system"] {
    display: none !important;
  }

  .app-nav-button[data-screen="dashboard"]::before { content: "▶ "; }
  .app-nav-button[data-screen="log"]::before { content: "✓ "; }
  .app-nav-button[data-screen="setup"]::before { content: "⚙ "; }
  .app-nav-button[data-screen="manage"]::before { content: "＋ "; }

  .overview-card.app-screen[data-screen-panel="manage"] {
    display: none !important;
  }

  .manage-tabs-card {
    padding: 0.55rem;
  }

  .manage-tabs-row {
    gap: 0.45rem;
  }

  .type-tabs {
    display: grid;
    gap: 0.28rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .type-tab {
    font-size: 0.74rem;
    min-height: 2rem;
    padding: 0.32rem 0.3rem;
  }

  .add-item-inline-button {
    min-height: 2.45rem;
    padding: 0.42rem 0.55rem;
  }

  .filter-row {
    display: grid;
    gap: 0.28rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-button {
    font-size: 0.74rem;
    min-height: 2rem;
    padding: 0.3rem;
  }

  .section-header {
    align-items: stretch;
    gap: 0.5rem;
  }

  .section-header h2 {
    margin-bottom: 0.15rem;
  }

  .section-header .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-card {
    padding: 0.68rem;
  }

  .record-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-actions button {
    font-size: 0.72rem;
    min-height: 2rem;
    padding: 0.3rem;
  }
}

/* P02M mobile polish pass: phone-first practice composition */
@media (max-width: 720px) {
  body {
    padding-bottom: calc(4.2rem + env(safe-area-inset-bottom));
  }

  .app-shell {
    padding: calc(0.45rem + env(safe-area-inset-top)) 0.45rem 4.8rem;
  }

  .app-header.header-with-nav {
    align-items: center;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1fr auto;
    margin-bottom: 0.35rem;
    padding: 0;
  }

  .brand-block {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    min-width: 0;
  }

  .compact-brand-header h1 {
    font-size: 1rem;
    letter-spacing: -0.03em;
    margin: 0;
    white-space: nowrap;
  }

  .brand-tagline,
  .brand-support {
    display: none !important;
  }

  .today-line {
    margin: 0;
  }

  .build-chip,
  #appVersionDisplay {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: 0.58rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.18rem 0.34rem;
  }

  .header-right {
    align-items: center;
    display: flex;
    gap: 0.28rem;
    justify-content: flex-end;
    min-width: 0;
  }

  #pwaUpdateStatus,
  #backupHealthButton,
  .mode-tool-strip,
  .dashboard-mode-copy {
    display: none !important;
  }

  .dashboard-mode-bar {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    gap: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
  }

  .dashboard-mode-buttons {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    display: flex;
    gap: 0.18rem;
    padding: 0.14rem;
  }

  .dashboard-mode-button {
    border-radius: 999px;
    font-size: 0.66rem;
    min-height: 1.72rem;
    padding: 0.24rem 0.42rem;
    width: auto;
  }

  .app-nav {
    background: rgba(255,255,255,0.96);
    border-radius: 18px 18px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.2rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 0;
    margin: 0;
    padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 80;
  }

  .app-nav-button {
    border-radius: 12px;
    font-size: 0.68rem;
    min-height: 2.35rem;
    padding: 0.28rem 0.22rem;
  }

  .app-nav-button[data-screen="advanced"],
  .app-nav-button[data-screen="system"] {
    display: none !important;
  }

  .practice-dashboard {
    border-radius: 18px;
    margin-top: 0.35rem;
    padding: 0.48rem;
  }

  .practice-header.compact-practice-header {
    display: none !important;
  }

  .dashboard-start-empty {
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .dashboard-start-empty p {
    font-size: 0.85rem;
  }

  .practice-grid {
    gap: 0.45rem;
  }

  .hero-current {
    border-radius: 16px;
    min-height: 0;
    padding: 0.62rem;
  }

  .hero-current > .eyebrow {
    font-size: 0.64rem;
    margin-bottom: 0.12rem;
  }

  .hero-current h3 {
    font-size: clamp(1.45rem, 8vw, 2.15rem);
    margin-bottom: 0.22rem;
  }

  .hero-current .description {
    font-size: 0.86rem;
    line-height: 1.25;
    margin: 0.35rem 0 0.42rem;
    max-height: 3.2rem;
    overflow: auto;
  }

  .hero-actions {
    display: grid;
    gap: 0.34rem;
    grid-template-columns: 1fr 1fr;
    margin: 0.45rem 0;
  }

  .hero-primary-button {
    min-height: 2.85rem;
    min-width: 0;
  }

  #skipItemButton,
  #editCurrentItemButton {
    font-size: 0.78rem;
    min-height: 2.15rem;
    padding: 0.42rem;
  }

  .practice-support-row {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 1fr;
  }

  .embedded-zonebeat-card,
  .timing-strip.embedded-zonebeat-card {
    border-radius: 14px;
    gap: 0.34rem;
    padding: 0.42rem !important;
  }

  .embedded-zonebeat-card .tool-card-header {
    align-items: center;
    display: flex;
    gap: 0.4rem;
  }

  .embedded-zonebeat-card .eyebrow {
    display: none;
  }

  .embedded-zonebeat-card h3 {
    font-size: 0.92rem;
    margin: 0;
  }

  .timing-start-stop {
    display: flex;
    gap: 0.28rem;
    margin-left: auto;
  }

  .timing-start-stop button {
    font-size: 0.82rem;
    min-height: 2.15rem;
    padding: 0.38rem 0.68rem;
    width: auto;
  }

  .timing-mode-row {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: 1fr 1fr;
  }

  .timing-select-label {
    display: grid;
    gap: 0.15rem;
    font-size: 0.58rem;
    width: auto;
  }

  .timing-select-label select {
    border-radius: 10px;
    font-size: 0.72rem;
    min-height: 1.95rem;
    padding: 0.28rem 0.36rem;
  }

  .metronome-controls,
  .timing-strip-controls {
    align-items: center;
    display: grid !important;
    gap: 0.32rem;
    grid-template-columns: minmax(80px, 1fr) auto;
  }

  .timing-strip-controls input[type="range"] {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .bpm-override-label {
    font-size: 0.6rem;
  }

  .bpm-override-label input {
    max-width: 3.8rem;
    min-height: 1.85rem;
    padding: 0.25rem;
  }

  .timing-auto {
    display: none;
  }

  .reference-context-box {
    margin-top: 0;
    padding: 0.45rem;
  }

  .reference-box-header strong {
    font-size: 0.82rem;
  }

  .reference-box-header span {
    display: none;
  }

  .references-toggle-button {
    font-size: 0.72rem;
    min-height: 1.95rem;
    padding: 0.32rem 0.55rem;
    width: auto;
  }

  .current-item-notes-box {
    margin-top: 0.42rem;
    padding: 0.46rem;
  }

  .current-item-notes-header span {
    display: none;
  }

  .current-item-notes-box textarea {
    max-height: 3rem;
    min-height: 2.4rem;
  }

  .compact-countdown-card,
  .countdown-card {
    align-items: center;
    display: grid !important;
    gap: 0.34rem;
    grid-template-columns: auto auto 1fr;
    margin-top: 0.42rem;
    padding: 0.42rem !important;
  }

  .countdown-left {
    display: grid;
    gap: 0.1rem;
  }

  .countdown-left .eyebrow {
    font-size: 0.58rem;
    margin: 0;
  }

  .countdown-display span:first-child {
    font-size: 1.12rem !important;
  }

  .countdown-display span:last-child {
    display: none;
  }

  .timer-config {
    max-width: 3.4rem;
  }

  .timer-config input {
    min-height: 2rem;
    padding: 0.28rem !important;
  }

  .timer-presets {
    display: none !important;
  }

  .timer-checkbox {
    display: none;
  }

  .countdown-actions {
    display: grid !important;
    gap: 0.25rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .countdown-actions button {
    font-size: 0.8rem !important;
    min-height: 2.15rem;
    padding: 0.34rem 0.44rem !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel {
    margin-top: 0.45rem;
    max-height: 12rem;
    padding: 0.5rem;
  }

  .compact-side-queue .queue-heading,
  .queue-heading.compact-queue-heading {
    gap: 0.22rem;
    margin-bottom: 0.28rem;
  }

  .queue-title-row h3 {
    font-size: 0.9rem;
  }

  .queue-helper {
    display: none;
  }

  .main-queue-panel .session-queue,
  .compact-side-queue .session-queue {
    max-height: 8.2rem;
  }

  .compact-side-queue .queue-item.compact-queue-item {
    font-size: 0.76rem;
    min-height: 2.1rem;
    padding: 0.32rem 0.38rem;
  }

  .queue-start-now-button {
    font-size: 0.7rem;
    min-height: 1.75rem;
    padding: 0.22rem 0.38rem;
    width: auto;
  }

  .setup-screen {
    padding: 0.65rem;
  }

  .setup-screen .section-header .section-note {
    display: none;
  }

  .setup-card-row {
    gap: 0.45rem;
    grid-template-columns: 1fr;
  }

  .setup-action-card {
    align-items: center;
    display: grid;
    gap: 0.48rem;
    grid-template-columns: auto 1fr auto;
    min-height: 0;
    padding: 0.55rem;
  }

  .setup-action-card p {
    display: none;
  }

  body[data-setup-config="empty"] .setup-action-card {
    align-items: start;
  }

  body[data-setup-config="empty"] .setup-action-card p {
    display: block;
    font-size: 0.78rem;
    line-height: 1.28;
    margin-top: 0.08rem;
  }

  .setup-action-card button {
    font-size: 0.72rem;
    min-height: 2rem;
    padding: 0.3rem 0.45rem;
    width: auto;
  }

  .manage-tabs-card + .form-card,
  .manage-static-form-card {
    display: none !important;
  }

  .section-header .section-note,
  .section-header p.section-note {
    display: none;
  }

  #refreshButton,
  #refreshLogButton,
  #removeSampleButton {
    display: none !important;
  }

  .section-header .button-row {
    display: flex;
    justify-content: flex-end;
  }

  .record-card {
    border-radius: 14px;
    gap: 0.42rem;
    padding: 0.52rem;
  }

  .record-card .description {
    display: -webkit-box;
    font-size: 0.78rem;
    line-height: 1.22;
    max-height: 2.05rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .record-meta {
    display: none;
  }

  .title-row strong {
    font-size: 0.9rem;
  }

  .type-badge,
  .mini-badge {
    font-size: 0.62rem;
    padding: 0.14rem 0.36rem;
  }

  .record-actions {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .record-actions button {
    font-size: 0.66rem;
    min-height: 1.85rem;
    padding: 0.22rem;
  }

  .log-card {
    padding: 0.65rem;
  }

  .log-card .section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .log-card .section-header h2 {
    font-size: 1rem;
    margin: 0;
  }

  #clearLogButton {
    font-size: 0.7rem;
    min-height: 1.95rem;
    padding: 0.28rem 0.45rem;
    width: auto;
  }

  .activity-log-list {
    gap: 0.38rem;
    margin-top: 0.55rem;
  }

  .activity-log-item {
    border-radius: 12px;
    gap: 0.45rem;
    padding: 0.48rem;
  }

  .log-outcome {
    font-size: 0.64rem;
    padding: 0.18rem 0.38rem;
  }

  .log-content strong {
    font-size: 0.84rem;
  }

  .log-note {
    font-size: 0.76rem;
    margin: 0.15rem 0 0;
  }
}

/* P02M practice-flow recomposition */
.practice-support-row.timing-support-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.reference-context-box[hidden] {
  display: none !important;
}
.countdown-card.compact-countdown-card {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.countdown-card.compact-countdown-card .timer-presets {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
}
.countdown-card.compact-countdown-card .timer-checkbox {
  margin-left: auto;
}
.countdown-card.compact-countdown-card .countdown-actions {
  margin-left: 0;
}
.embedded-zonebeat-card {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}
.embedded-zonebeat-card .tool-card-header,
.embedded-zonebeat-card .timing-mode-row,
.embedded-zonebeat-card .timing-strip-controls {
  margin: 0;
}
.references-toggle-button {
  min-width: 4.25rem;
}
@media (max-width: 720px) {
  .practice-dashboard {
    padding-top: 0.45rem;
  }
  .hero-current {
    padding-top: 0.65rem;
  }
  .hero-current h3 {
    margin-bottom: 0.25rem;
  }
  .hero-current .description {
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
  }
  .embedded-zonebeat-card {
    gap: 0.35rem !important;
  }
  .embedded-zonebeat-card h3,
  .current-item-notes-header label,
  .main-queue-panel h3,
  .reference-box-header strong {
    font-size: 0.92rem !important;
  }
  .embedded-zonebeat-card .eyebrow,
  .current-item-notes-header span,
  .reference-box-header span,
  .queue-helper {
    font-size: 0.68rem !important;
  }
  .timing-start-stop button,
  .countdown-actions button {
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem !important;
  }
  .countdown-card.compact-countdown-card {
    margin-top: 0.45rem;
    padding: 0.45rem 0.55rem !important;
  }
  .countdown-card.compact-countdown-card .timer-checkbox {
    margin-left: 0;
    flex: 1 1 100%;
  }
  .timer-presets .timer-preset {
    min-width: 2rem !important;
  }
  .reference-context-box {
    margin-top: 0.45rem;
  }
  .current-item-notes-box {
    margin-top: 0.45rem;
  }
  .main-queue-panel,
  .queue-panel.main-queue-panel {
    margin-top: 0.55rem;
  }
}

/* P02N mobile manage + timing compression */
.app-build-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.build-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.prominent-build-chip {
  background: #172033;
  color: #fff;
}

.header-backup-export-button {
  min-width: 9.4rem;
}

.compact-metronome-header-controls {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.metronome-header-bpm {
  flex: 0 0 auto;
}

.embedded-zonebeat-card .metronome-controls {
  grid-template-columns: minmax(90px, 1fr) auto;
}

.embedded-zonebeat-card .metronome-controls .timing-auto {
  margin-left: auto;
}

.compact-manage-card {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  padding: 0.48rem 0.58rem;
}

.compact-record-content {
  min-width: 0;
}

.record-expand-button {
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.32rem;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  padding: 0;
  text-align: left;
  width: 100%;
}

.record-expand-button:hover {
  background: transparent;
  color: var(--text);
}

.record-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-state-badge {
  font-size: 0.66rem;
  padding: 0.15rem 0.38rem;
  white-space: nowrap;
}

.record-expand-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.record-details {
  border-top: 1px solid rgba(100, 112, 132, 0.18);
  margin-top: 0.42rem;
  padding-top: 0.42rem;
}

.record-details .description {
  font-size: 0.86rem;
  line-height: 1.28;
}

.record-details .record-meta {
  font-size: 0.74rem;
  margin-top: 0.18rem;
}

.compact-record-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.24rem;
}

.compact-action-button {
  border-radius: 9px;
  font-size: 0.68rem;
  line-height: 1;
  min-height: unset;
  padding: 0.28rem 0.38rem;
  white-space: nowrap;
  width: auto;
}

.compact-delete-button {
  display: none;
}

.compact-manage-card.is-expanded .compact-delete-button {
  display: inline-flex;
}

.filter-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.28rem;
  overflow-x: auto;
  padding-bottom: 0.55rem;
  -webkit-overflow-scrolling: touch;
}

.filter-row .filter-button {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 0.34rem 0.5rem;
  white-space: nowrap;
  width: auto;
}

.timer-presets .timer-preset {
  border-radius: 999px;
  min-width: 1.42rem !important;
  padding: 0.22rem 0.28rem !important;
}

@media (max-width: 760px) {
  .app-shell {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .brand-support {
    display: none;
  }

  .header-right {
    gap: 0.35rem;
  }

  .pwa-update-status {
    font-size: 0.68rem;
    padding: 0.22rem 0.42rem;
  }

  .header-backup-export-button,
  .backup-health-button {
    font-size: 0.72rem;
    min-width: unset;
    padding: 0.32rem 0.5rem;
    width: auto;
    justify-self: start;
  }

  .dashboard-mode-bar {
    display: none !important;
  }

  body[data-dashboard-mode="flow"] .practice-side {
    display: none !important;
  }

  .embedded-zonebeat-card {
    padding: 0.34rem 0.42rem !important;
  }

  .embedded-zonebeat-card .tool-card-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.12rem !important;
  }

  .embedded-zonebeat-card .tool-card-header .eyebrow {
    display: none;
  }

  .embedded-zonebeat-card .tool-card-header h3 {
    font-size: 0.76rem !important;
  }

  .compact-metronome-header-controls {
    gap: 0.22rem;
  }

  .metronome-header-bpm {
    font-size: 0.58rem !important;
  }

  .metronome-header-bpm input {
    max-width: 3.05rem !important;
    padding: 0.18rem 0.24rem !important;
  }

  .timing-start-stop button {
    font-size: 0.62rem !important;
    padding: 0.2rem 0.28rem !important;
  }

  .embedded-zonebeat-card .timing-mode-row {
    display: grid;
    gap: 0.22rem;
    grid-template-columns: 0.82fr 1.18fr;
  }

  .embedded-zonebeat-card .timing-select-label {
    font-size: 0.56rem !important;
    width: auto !important;
  }

  .embedded-zonebeat-card .timing-select-label select {
    font-size: 0.64rem !important;
    max-width: 100% !important;
    padding: 0.18rem 0.3rem !important;
    width: 100% !important;
  }

  .embedded-zonebeat-card .metronome-controls {
    align-items: center;
    display: grid !important;
    grid-template-columns: minmax(80px, 1fr) auto;
    gap: 0.22rem;
  }

  .embedded-zonebeat-card .metronome-controls input[type="range"] {
    max-width: none;
    min-width: 80px;
  }

  .embedded-zonebeat-card .timing-auto {
    font-size: 0.62rem !important;
  }

  .compact-countdown-card,
  .countdown-card {
    gap: 0.25rem !important;
    padding: 0.28rem 0.38rem !important;
  }

  .countdown-left .eyebrow {
    display: none;
  }

  .countdown-display span:first-child {
    font-size: 0.92rem !important;
  }

  .countdown-display span:last-child {
    font-size: 0.58rem !important;
  }

  .timer-config {
    flex-basis: 3.2rem;
    max-width: 3.2rem;
  }

  .timer-config input {
    font-size: 0.72rem;
    padding: 0.22rem 0.28rem !important;
  }

  .timer-presets {
    flex-wrap: nowrap !important;
    gap: 0.16rem;
  }

  .timer-presets .timer-preset {
    font-size: 0.62rem !important;
    min-width: 1.28rem !important;
    padding: 0.16rem 0.2rem !important;
    width: auto;
  }

  .timer-checkbox {
    font-size: 0.62rem !important;
  }

  .countdown-actions {
    gap: 0.16rem;
  }

  .countdown-actions button {
    font-size: 0.62rem !important;
    padding: 0.2rem 0.28rem !important;
    width: auto;
  }

  .filter-row {
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
  }

  .filter-row .filter-button {
    font-size: 0.66rem;
    padding: 0.26rem 0.42rem;
  }

  .record-list {
    gap: 0.38rem;
  }

  .compact-manage-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.38rem 0.44rem;
  }

  .record-expand-button {
    gap: 0.22rem;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .record-title-text {
    font-size: 0.86rem;
  }

  .compact-state-badge {
    font-size: 0.58rem;
    padding: 0.12rem 0.28rem;
  }

  .compact-record-actions {
    gap: 0.18rem;
  }

  .compact-action-button {
    font-size: 0.58rem;
    padding: 0.22rem 0.28rem;
  }

  .type-tabs {
    flex-wrap: nowrap;
    gap: 0.22rem;
    overflow-x: auto;
  }

  .type-tab {
    flex: 0 0 auto;
    font-size: 0.7rem;
    padding: 0.34rem 0.48rem;
    width: auto;
  }

  .add-item-inline-button {
    padding: 0.42rem 0.55rem;
  }
}

/* P02O audio/version/flow-dock/mobile execution repair */
.metronome-inline-status {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--muted);
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 850;
  margin-left: 0.25rem;
  padding: 0.1rem 0.32rem;
  vertical-align: middle;
}

.mobile-build-ribbon {
  align-items: center;
  background: rgba(15, 23, 42, 0.88);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
  color: white;
  display: inline-flex;
  gap: 0.28rem;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0.24rem 0.52rem;
  position: fixed;
  right: 0.6rem;
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
}

.mobile-build-ribbon span {
  opacity: 0.72;
}

.mobile-build-ribbon strong {
  font-size: 0.72rem;
}

.hero-current {
  display: flex;
  flex-direction: column;
}

.hero-actions {
  order: 10;
  align-items: center;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  margin-top: 0.45rem;
}

.hero-actions button {
  width: auto;
  white-space: nowrap;
}

.practice-support-row { order: 20; }
.compact-countdown-card { order: 30; }
.current-item-references-box { order: 40; }
.current-item-notes-box { order: 50; }
.main-queue-panel { order: 60; }

body[data-dashboard-mode="flow"] .mode-tool-strip {
  display: none !important;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
  background: linear-gradient(135deg, rgba(238,242,255,0.96), rgba(255,255,255,0.9));
  border: 1px dashed rgba(31, 94, 255, 0.28);
  display: grid !important;
  gap: 0.55rem;
}

body[data-dashboard-mode="flow"] .tool-launcher-grid {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-dashboard-mode="flow"] .tool-launch-button {
  font-size: 0.82rem;
  padding: 0.55rem 0.62rem;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  min-height: 5.25rem;
  padding: 0.85rem !important;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open .recorder-mock-display,
body[data-dashboard-mode="flow"] [data-tool-card].is-open .tuner-mock-display {
  font-size: 0.82rem;
  min-height: 2.65rem;
}

body[data-dashboard-mode="flow"] .practice-support-row {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
}

body[data-dashboard-mode="flow"] .current-item-references-box[data-has-references="true"] {
  display: grid !important;
}

.setup-starter-content-panel {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 250, 239, 0.96), rgba(248, 243, 231, 0.94));
  border: 1px solid rgba(160, 126, 69, 0.22);
  border-radius: 16px;
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.8rem;
}

.setup-starter-copy {
  display: grid;
  gap: 0.18rem;
}

.setup-collapsible-heading,
.setup-mobile-map-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
}

.setup-collapse-toggle {
  display: none;
}

.setup-collapsible-content {
  display: grid;
  gap: 0.12rem;
}

.setup-starter-content-panel p {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0.15rem 0 0;
}

.sample-program-field {
  align-items: start;
  display: grid;
  gap: 0.24rem;
  min-width: min(100%, 16rem);
}

.sample-program-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.sample-program-field select {
  min-height: 2.1rem;
  width: 100%;
}

.practice-map-standalone-panel,
.integrity-health-panel {
  background: linear-gradient(180deg, rgba(250, 248, 241, 0.98), rgba(244, 241, 232, 0.98));
  border: 1px solid rgba(112, 101, 82, 0.18);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(32, 41, 56, 0.06);
  display: grid;
  gap: 0.82rem;
  margin-top: 1rem;
  padding: 0.9rem;
}

.practice-map-standalone-panel {
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(248, 243, 231, 0.96));
}

.setup-mobile-map-panel {
  display: none;
}

.integrity-health-panel {
  background:
    linear-gradient(135deg, rgba(236, 251, 247, 0.96), rgba(241, 248, 246, 0.92) 48%, rgba(246, 250, 248, 0.94));
  border-color: rgba(45, 124, 100, 0.18);
}

.integrity-health-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.integrity-health-header h3 {
  color: #17352f;
  font-size: 1.08rem;
  font-weight: 760;
  margin: 0;
}

.integrity-health-header p {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0.15rem 0 0;
}

.integrity-backlog-note,
.integrity-severity-note {
  color: #6a6470 !important;
  font-size: 0.78rem !important;
  line-height: 1.35;
}

.integrity-severity-note {
  margin: 0;
}

.integrity-health-summary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(234, 249, 244, 0.78));
  border: 1px solid rgba(45, 124, 100, 0.16);
  border-radius: 14px;
  color: #304c47;
  display: grid;
  gap: 0.56rem;
  font-size: 0.88rem;
  padding: 0.82rem 0.88rem;
}

.integrity-map-panel,
.integrity-review-panel {
  border-radius: 14px;
  display: grid;
  gap: 0.52rem;
  padding: 0.68rem;
}

.integrity-map-panel {
  background: rgba(255, 253, 247, 0.78);
  border: 1px solid rgba(142, 118, 78, 0.15);
}

.integrity-review-panel {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(45, 124, 100, 0.13);
}

.integrity-panel-label {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.integrity-panel-label strong {
  color: #1f2c3d;
  font-size: 0.88rem;
}

.integrity-panel-label span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.integrity-summary-line {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.integrity-summary-line strong {
  color: #15352f;
  font-size: 1.12rem;
  font-weight: 780;
}

.integrity-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.integrity-pill {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 760;
  padding: 0.24rem 0.52rem;
}

.integrity-error {
  background: rgba(254, 226, 226, 0.74);
  border-color: rgba(185, 28, 28, 0.24);
  color: #8a1f1f;
}

.integrity-warning {
  background: rgba(254, 243, 199, 0.72);
  border-color: rgba(180, 83, 9, 0.22);
  color: #765018;
}

.integrity-info {
  background: rgba(219, 234, 254, 0.58);
  border-color: rgba(37, 99, 235, 0.16);
  color: #245089;
}

.integrity-health-list {
  display: grid;
  gap: 0.38rem;
  max-height: 22rem;
  overflow: auto;
  padding-right: 0.12rem;
}

.integrity-relationship-map {
  display: grid;
  gap: 0.55rem;
}

.integrity-map-heading {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: -0.05rem;
}

.integrity-map-heading strong {
  color: #17263a;
  font-size: 0.88rem;
}

.integrity-map-heading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.integrity-map-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integrity-map-card,
.integrity-map-empty {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(118, 107, 88, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  padding: 0.62rem;
}

.integrity-map-card strong {
  color: #243247;
  font-size: 0.84rem;
}

.integrity-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.integrity-map-chip {
  background: rgba(240, 246, 255, 0.86);
  border: 1px solid rgba(54, 96, 160, 0.14);
  border-radius: 999px;
  color: #2d496e;
  font-size: 0.72rem;
  font-weight: 740;
  padding: 0.2rem 0.46rem;
}

.integrity-map-chip.is-reference {
  background: rgba(252, 245, 226, 0.9);
  border-color: rgba(148, 116, 58, 0.16);
  color: #70552c;
}

.integrity-map-chip.is-muted,
.integrity-map-chip.is-empty {
  background: rgba(244, 244, 242, 0.92);
  border-color: rgba(113, 113, 104, 0.14);
  color: #68707c;
}

.integrity-map-chip.is-more {
  background: rgba(236, 240, 245, 0.86);
  color: #4d5b6c;
}

.integrity-map-unlinked {
  border-color: rgba(180, 83, 9, 0.18);
}

.integrity-map-more-card,
.integrity-map-empty {
  color: #536274;
  font-size: 0.82rem;
}

.integrity-issue,
.integrity-empty {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(118, 107, 88, 0.14);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 0.48rem 0.58rem;
}

.integrity-issue.is-actionable {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.integrity-issue.is-actionable:hover,
.integrity-issue.is-actionable:focus-visible {
  border-color: rgba(45, 124, 100, 0.24);
  box-shadow: 0 8px 18px rgba(27, 72, 62, 0.08);
  outline: none;
}

.integrity-issue.is-reviewed-return {
  animation: integrityReviewReturnPulse 1.8s ease;
  border-color: rgba(45, 124, 100, 0.34);
  box-shadow: 0 0 0 3px rgba(45, 124, 100, 0.1);
}

.integrity-empty {
  border-left-width: 1px;
  color: #42546c;
  font-size: 0.86rem;
}

.integrity-issue-heading {
  align-items: center;
  display: flex;
  gap: 0.38rem;
}

.integrity-issue-heading span {
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.34rem;
  text-transform: uppercase;
}

.integrity-issue-heading strong {
  color: #1f2c3d;
  font-size: 0.82rem;
}

.integrity-relationship-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  margin-top: 0.34rem;
}

.integrity-relationship-chip {
  background: rgba(244, 247, 251, 0.92);
  border: 1px solid rgba(80, 97, 124, 0.14);
  border-radius: 999px;
  color: #334358;
  font-size: 0.7rem;
  font-weight: 760;
  padding: 0.16rem 0.42rem;
}

.integrity-relationship-chip.is-target {
  background: rgba(255, 248, 232, 0.94);
  border-color: rgba(166, 123, 51, 0.18);
  color: #6b4f22;
}

.integrity-relationship-arrow {
  color: #7d8796;
  font-size: 0.82rem;
}

.integrity-detail,
.integrity-action {
  color: #4a586b;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0.26rem 0 0;
}

.integrity-action {
  color: #6a5a3d;
  font-weight: 720;
}

.integrity-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.36rem;
}

.integrity-action-button {
  font-size: 0.76rem;
  min-height: 1.82rem;
  padding: 0.3rem 0.56rem;
}

.system-health-panel {
  grid-column: 1 / -1;
  margin-top: 0;
}

.system-health-actions {
  align-items: center;
  justify-content: flex-end;
}

.system-foundation-panel {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(239, 245, 246, 0.78));
}

.system-section-kicker {
  color: #68758a;
  display: block;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.01em;
  margin-bottom: 0.34rem;
  text-transform: none;
}

.backup-export-panel {
  background: linear-gradient(135deg, rgba(239, 247, 255, 0.94), rgba(248, 251, 255, 0.88));
  border-color: rgba(59, 130, 246, 0.14);
}

.backup-restore-panel {
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.9), rgba(255, 252, 244, 0.88));
  border-color: rgba(180, 83, 9, 0.14);
}

@keyframes integrityReviewReturnPulse {
  0% {
    background: rgba(231, 249, 243, 0.95);
  }
  100% {
    background: rgba(255, 255, 255, 0.72);
  }
}

.setup-screen .step-number {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(75, 92, 118, 0.14);
  box-shadow: 0 4px 12px rgba(40, 52, 70, 0.06);
}

@media (max-width: 860px) {
  .desktop-only-setup-card {
    display: none !important;
  }
}

@media (max-width: 1040px) {
  .integrity-map-grid {
    grid-template-columns: 1fr;
  }

  .integrity-map-heading {
    align-items: start;
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* Sample controls are setup/onboarding controls now, not daily Manage controls. */
#seedButton,
#removeSampleButton {
  display: none !important;
}

.filter-row {
  flex-wrap: nowrap !important;
  gap: 0.32rem;
  overflow-x: auto;
  padding-bottom: 0.42rem;
}

.filter-row .filter-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .mobile-build-ribbon {
    display: inline-flex;
  }

  .dashboard-mode-buttons {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    gap: 0.24rem;
    grid-template-columns: 1.15fr 1.15fr 0.8fr 0.9fr;
  }

  .hero-actions button {
    border-radius: 10px;
    font-size: 0.68rem !important;
    min-height: 1.8rem;
    padding: 0.28rem 0.32rem !important;
    width: 100%;
  }

  .embedded-zonebeat-card .tool-card-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.4rem !important;
    justify-content: space-between !important;
  }

  .embedded-zonebeat-card .tool-card-header h3 {
    align-items: center;
    display: flex;
    gap: 0.24rem;
    white-space: nowrap;
  }

  .embedded-zonebeat-card .timing-start-stop {
    flex: 0 0 auto;
  }

  .embedded-zonebeat-card .timing-start-stop button {
    font-size: 0.62rem !important;
    min-height: 1.6rem !important;
    padding: 0.2rem 0.32rem !important;
    width: auto;
  }

  .setup-starter-content-panel {
    display: grid;
    gap: 0.58rem;
    padding: 0.62rem;
  }

  .setup-collapsible-heading strong {
    font-size: 0.92rem;
  }

  .setup-collapse-toggle {
    display: inline-flex;
    font-size: 0.72rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.55rem;
  }

  .setup-starter-content-panel.is-collapsed {
    align-items: center;
  }

  .setup-starter-content-panel.is-collapsed .setup-collapsible-content {
    display: none;
  }

  .setup-starter-content-panel.is-collapsed .sample-program-field,
  .setup-starter-content-panel.is-collapsed .setup-sample-actions {
    display: none !important;
  }

  .setup-starter-content-panel.is-collapsed .setup-starter-copy {
    gap: 0;
  }

  .setup-starter-content-panel.is-collapsed .setup-collapsible-heading::after {
    color: var(--muted);
    content: "Examples and sample programs";
    font-size: 0.76rem;
    font-weight: 720;
    margin-left: 0.35rem;
  }

  .setup-sample-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .setup-action-card .step-number {
    display: none;
  }

  .setup-action-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setup-mobile-map-panel {
    background: linear-gradient(135deg, rgba(255, 253, 247, 0.97), rgba(246, 241, 230, 0.96));
    border: 1px solid rgba(143, 117, 73, 0.18);
    border-radius: 14px;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding: 0.62rem;
  }

  .setup-mobile-map-heading > div {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
  }

  .setup-mobile-map-heading strong {
    color: #1f2c3d;
    font-size: 0.92rem;
  }

  .setup-mobile-map-heading span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 740;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .setup-mobile-map-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.08rem;
  }

  .setup-mobile-map-chip {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(99, 116, 143, 0.14);
    border-radius: 999px;
    color: #37445a;
    font-size: 0.72rem;
    font-weight: 780;
    padding: 0.18rem 0.44rem;
  }

  body[data-setup-config="established"] .goal-guidance-examples {
    gap: 0.28rem;
    padding: 0.42rem 0.5rem;
  }

  body[data-setup-config="established"] .goal-guidance-examples .goal-example-toggle {
    display: inline-flex;
    font-size: 0.72rem;
    justify-self: start;
    min-height: 1.8rem;
    padding: 0.22rem 0.52rem;
  }

  body[data-setup-config="established"] .goal-guidance-examples.is-collapsed > span,
  body[data-setup-config="established"] .goal-guidance-examples.is-collapsed .goal-example-picker {
    display: none;
  }
}

@media (min-width: 861px) {
  .mobile-build-ribbon {
    bottom: 0.75rem;
    right: 0.75rem;
  }
}

/* P02P start-day, desktop flow reference dock, and mobile compression refinements */
:root {
  --zb-available: #067647;
  --zb-available-bg: #ecfdf3;
  --zb-unavailable: #b54708;
  --zb-unavailable-bg: #fffaeb;
  --zb-archived: #647084;
  --zb-archived-bg: #f2f4f7;
}

.app-build-line,
.prominent-build-chip,
.mobile-build-ribbon {
  opacity: 1 !important;
  visibility: visible !important;
}

.prominent-build-chip {
  background: #172033 !important;
  border-color: #172033 !important;
  color: #fff !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.5rem !important;
}

.header-with-nav {
  grid-template-columns: minmax(220px, 1fr) minmax(420px, auto);
}

.header-right {
  align-items: start;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: auto auto;
  justify-items: end;
}

.header-right .dashboard-mode-bar {
  grid-column: 1 / -1;
  justify-self: stretch;
  margin: 0;
  padding: 0.32rem 0.42rem;
}

.header-right .app-nav {
  grid-column: 1 / -1;
  width: 100%;
}

.mode-tool-strip {
  display: none !important;
}

.dashboard-start-empty {
  background: linear-gradient(135deg, rgba(238,242,255,0.98), rgba(255,255,255,0.94));
  border-style: solid;
  padding: 0.95rem;
}

.dashboard-start-empty strong {
  font-size: 1.05rem;
}

#startSessionButton {
  border-radius: 999px;
  font-size: 0.95rem;
  padding: 0.68rem 1rem;
}

.hero-current {
  display: flex;
  flex-direction: column;
}

.hero-actions {
  order: 5 !important;
  align-items: center;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.32rem;
  margin: 0.35rem 0 0.45rem !important;
}

.hero-actions button {
  width: auto;
  white-space: nowrap;
}

.practice-support-row {
  order: 10 !important;
}

.compact-countdown-card { order: 20 !important; }
.current-item-notes-box { order: 35 !important; }
.main-queue-panel { order: 40 !important; }

/* Desktop Flow: metronome and references share the horizontal support row. */
.practice-support-row.timing-support-row {
  align-items: stretch;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
  margin-top: 0.35rem;
}

.practice-support-row.timing-support-row .embedded-zonebeat-card,
.practice-support-row.timing-support-row .reference-context-box {
  margin: 0 !important;
  min-width: 0;
}

.reference-context-box {
  order: 12 !important;
}

.current-item-references-box[data-has-references="false"] {
  display: none !important;
}

.current-item-references-box[data-has-references="true"] {
  display: grid !important;
}

.current-item-references-box:not(.is-expanded) .reference-context-list,
.current-item-references-box:not(.is-expanded) .reference-empty-state {
  display: none !important;
}

.current-item-references-box.is-expanded .reference-context-list {
  display: grid !important;
}

.current-item-references-box.is-expanded .reference-empty-state:not([hidden]) {
  display: block !important;
}

.reference-box-header {
  align-items: center;
  margin: 0;
}

.references-toggle-button {
  font-size: 0.72rem !important;
  padding: 0.28rem 0.48rem !important;
  width: auto !important;
}

/* Metronome: keep status from overlapping BPM, and give selects slightly larger touch targets. */
.metronome-inline-status {
  margin-left: 0.28rem;
  position: static;
  white-space: nowrap;
}

.compact-metronome-header-controls {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.embedded-zonebeat-card .tool-card-header h3 {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.timing-select-label select {
  min-height: 1.85rem;
}

/* Desktop Flow: make the tool rail feel like a stable dock and prevent card-size jitter. */
body[data-dashboard-mode="flow"] .practice-grid {
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1.72fr) minmax(265px, 0.55fr) !important;
}

body[data-dashboard-mode="flow"] .practice-side {
  align-content: start;
  background: linear-gradient(180deg, rgba(248,250,252,0.92), rgba(238,242,255,0.68));
  border: 1px solid rgba(100,112,132,0.18);
  border-radius: 18px;
  gap: 0.45rem;
  min-height: 16rem;
  padding: 0.5rem;
}

body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
  border-style: solid;
  display: grid !important;
  padding: 0.58rem !important;
}

body[data-dashboard-mode="flow"] .tool-launcher-grid {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-dashboard-mode="flow"] .tool-launch-button {
  border-radius: 12px;
  min-height: 2.2rem;
  padding: 0.48rem 0.5rem;
}

body[data-dashboard-mode="flow"] [data-tool-card] {
  display: none !important;
  min-height: 5.5rem;
}

body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  display: grid !important;
  min-height: 5.5rem;
  padding: 0.72rem !important;
}

body[data-dashboard-mode="flow"] .recorder-mock-card.is-open,
body[data-dashboard-mode="flow"] .video-recorder-mock-card.is-open,
body[data-dashboard-mode="flow"] .zoneplayer-mock-card.is-open,
body[data-dashboard-mode="flow"] .zonetune-mock-card.is-open {
  min-height: 5.5rem;
}

/* Manage: list is a compact library, not a verbose saved-record report. */
#listTitle {
  font-size: 0.95rem;
  margin: 0;
}

.filter-row {
  align-items: center;
  border-bottom: 0;
  flex-wrap: nowrap !important;
  gap: 0.28rem;
  margin-bottom: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.filter-row .filter-button {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.34rem 0.5rem;
  white-space: nowrap;
  width: auto !important;
}

.filter-button[data-filter="available"] {
  background: var(--zb-available-bg);
  color: var(--zb-available);
}
.filter-button[data-filter="available"].is-selected {
  background: var(--zb-available);
  color: white;
}
.filter-button[data-filter="notAvailable"] {
  background: var(--zb-unavailable-bg);
  color: var(--zb-unavailable);
}
.filter-button[data-filter="notAvailable"].is-selected {
  background: var(--zb-unavailable);
  color: white;
}
.filter-button[data-filter="archived"] {
  background: var(--zb-archived-bg);
  color: var(--zb-archived);
}
.filter-button[data-filter="archived"].is-selected {
  background: var(--zb-archived);
  color: white;
}

.compact-manage-card {
  align-items: center;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.48rem 0.55rem !important;
}

.compact-title-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.compact-title-row .record-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-state-badge {
  font-size: 0.66rem;
  padding: 0.16rem 0.38rem;
}

.record-expand-hint {
  color: var(--primary);
  font-size: 0.66rem;
  font-weight: 850;
  min-width: 2.6rem;
  text-align: right;
}

.compact-record-actions {
  flex-wrap: nowrap !important;
  gap: 0.22rem;
}

.compact-action-button {
  border-radius: 9px !important;
  font-size: 0.66rem !important;
  padding: 0.28rem 0.36rem !important;
  white-space: nowrap;
  width: auto !important;
}

/* Phone: no Flow chrome, visible build, one-line action row, tighter top. */
@media (max-width: 860px) {
  .header-with-nav {
    gap: 0.45rem;
    grid-template-columns: 1fr;
  }

  .brand-support,
  .pwa-update-status,
  .backup-health-button,
  .dashboard-mode-bar {
    display: none !important;
  }

  .mobile-build-ribbon {
    bottom: auto;
    display: inline-flex !important;
    right: 0.45rem;
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
  }

  .app-shell {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    padding-top: 0.55rem;
  }

  .practice-dashboard {
    padding: 0.55rem;
  }

  .hero-current {
    padding: 0.56rem;
  }

  .hero-current h3 {
    font-size: 1.38rem;
    margin-bottom: 0.22rem;
  }

  .hero-current .description {
    font-size: 0.86rem;
    line-height: 1.25;
    margin-top: 0.18rem;
  }

  .hero-actions {
    display: grid !important;
    gap: 0.22rem;
    grid-template-columns: 1.15fr 0.95fr 0.66fr 0.72fr;
    margin: 0.32rem 0 0.38rem !important;
  }

  .hero-actions button {
    border-radius: 10px;
    font-size: 0.64rem !important;
    min-height: 1.75rem;
    padding: 0.24rem 0.22rem !important;
    width: 100% !important;
  }

  #editCurrentItemButton { font-size: 0 !important; }
  .practice-support-row.timing-support-row {
    grid-template-columns: 1fr;
    gap: 0.34rem;
  }

  .embedded-zonebeat-card {
    padding: 0.34rem 0.4rem !important;
  }

  .compact-metronome-header-controls {
    gap: 0.22rem;
  }

  .metronome-header-bpm {
    font-size: 0.58rem !important;
  }

  .metronome-header-bpm input {
    max-width: 3.1rem !important;
    min-height: 1.55rem !important;
    padding: 0.16rem 0.24rem !important;
  }

  .metronome-inline-status {
    font-size: 0.54rem;
    margin-left: 0.12rem;
    padding: 0.06rem 0.22rem;
  }

  .embedded-zonebeat-card .timing-start-stop button {
    min-height: 1.55rem !important;
    padding: 0.18rem 0.28rem !important;
  }

  .embedded-zonebeat-card .timing-mode-row {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr;
  }

  .embedded-zonebeat-card .timing-select-label {
    width: auto !important;
  }

  .embedded-zonebeat-card .timing-select-label select {
    font-size: 0.7rem !important;
    min-height: 1.8rem;
    padding: 0.22rem 0.34rem !important;
  }

  .compact-countdown-card {
    gap: 0.24rem;
  }

  .timer-preset {
    min-width: 1.52rem !important;
    padding: 0.22rem 0.28rem !important;
  }

  #listTitle,
  .section-header #listTitle {
    display: none !important;
  }

  .filter-row {
    margin-top: -0.15rem;
  }

  .filter-row .filter-button {
    font-size: 0.66rem;
    padding: 0.3rem 0.4rem;
  }

  .compact-manage-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-record-actions {
    justify-content: flex-start;
  }

  .compact-action-button {
    font-size: 0.62rem !important;
    padding: 0.24rem 0.3rem !important;
  }
}

/* P02U viewport polish cleanup: practice-first stabilization */
.current-item-references-box .references-toggle-button {
  display: none !important;
}
.current-item-references-box[data-has-references="true"] {
  display: grid !important;
}
.current-item-references-box[data-has-references="true"] .reference-context-list,
.current-item-references-box[data-has-references="true"] #currentItemReferencesList {
  display: grid !important;
}
.current-item-references-box .reference-empty-state {
  align-self: start;
  text-align: left;
}

@media (min-width: 861px) {
  body[data-dashboard-mode="flow"] .practice-support-row.timing-support-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 0.92fr) minmax(260px, 1.08fr);
    align-items: stretch;
  }
  body[data-dashboard-mode="flow"] .current-item-references-box.reference-context-box {
    margin-top: 0;
    min-height: 100%;
  }
  body[data-dashboard-mode="flow"] .dashboard-tool-launcher {
    display: grid !important;
    width: 100%;
  }
  body[data-dashboard-mode="flow"] .tool-launcher-grid,
  body[data-dashboard-mode="flow"] .mode-tool-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }
  body[data-dashboard-mode="flow"] .dashboard-tool-card,
  body[data-dashboard-mode="flow"] .tool-stack-card[data-tool-card] {
    width: 100%;
    max-width: none;
  }
  body[data-dashboard-mode="flow"] .practice-side {
    padding-left: 0.15rem;
  }
}

.zb-collapse-button {
  background: var(--soft);
  color: var(--primary);
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}
.zb-collapse-button:hover { background: #e0e7ff; }
.zb-collapsible-tools .zb-collapse-button { margin-left: auto; }
.zb-collapsed .timing-mode-row,
.zb-collapsed .timing-strip-controls,
.zb-collapsed .timer-config,
.zb-collapsed .timer-presets,
.zb-collapsed .timer-checkbox,
.zb-collapsed .countdown-actions {
  display: none !important;
}
.zb-collapsed.compact-countdown-card,
.zb-collapsed.countdown-card,
.zb-collapsed.embedded-zonebeat-card {
  min-height: unset;
  padding: 0.32rem 0.5rem !important;
}
.zb-collapsed .countdown-left { width: 100%; }

.hero-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.32rem !important;
  align-items: center;
}
.hero-actions button {
  flex: 1 1 0;
  min-width: 0 !important;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-actions button {
    font-size: 0.78rem;
    padding: 0.48rem 0.36rem;
  }
  .filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    -webkit-overflow-scrolling: touch;
  }
  .filter-button {
    flex: 0 0 auto;
    width: auto !important;
    font-size: 0.76rem;
    padding: 0.38rem 0.52rem;
    white-space: nowrap;
  }
  .record-card {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.62rem;
  }
  .record-card .record-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    overflow-x: auto;
  }
  .record-card .record-actions button {
    width: auto !important;
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.36rem 0.46rem;
    white-space: nowrap;
  }
  .record-card .description {
    font-size: 0.8rem;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
  }
  .record-meta { display: none; }
  .mini-badge,
  .type-badge {
    font-size: 0.66rem;
    padding: 0.16rem 0.38rem;
  }
  .title-row strong {
    flex: 1 1 9rem;
    min-width: 0;
  }
}

.filter-button[data-filter="available"] {
  background: var(--success-bg);
  color: var(--success);
}
.filter-button[data-filter="notAvailable"] {
  background: var(--warning-bg);
  color: var(--warning);
}
.filter-button[data-filter="archived"] {
  background: #f2f4f7;
  color: var(--muted);
}
.filter-button.is-selected {
  background: var(--primary) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .app-build-line,
  .mobile-build-ribbon,
  .prominent-build-chip {
    display: inline-flex !important;
    visibility: visible !important;
  }
  .prominent-build-chip,
  #mobileBuildBadge {
    background: #172033 !important;
    color: #fff !important;
  }
}

/* P02U viewport polish cleanup: final stabilization pass */
.practice-support-row.timing-support-row {
  margin-top: 0.5rem;
}

/* Timer stays as a true one-line strip. No partial timer collapse. */
.compact-countdown-card .zb-collapse-button,
.countdown-card .zb-collapse-button {
  display: none !important;
}
.compact-countdown-card.zb-collapsed,
.countdown-card.zb-collapsed {
  display: flex !important;
}
.compact-countdown-card.zb-collapsed .timer-config,
.compact-countdown-card.zb-collapsed .timer-presets,
.compact-countdown-card.zb-collapsed .timer-checkbox,
.compact-countdown-card.zb-collapsed .countdown-actions,
.countdown-card.zb-collapsed .timer-config,
.countdown-card.zb-collapsed .timer-presets,
.countdown-card.zb-collapsed .timer-checkbox,
.countdown-card.zb-collapsed .countdown-actions {
  display: flex !important;
}

/* Metronome header: prevent BPM/status/open-hide from writing over the title. */
.embedded-zonebeat-card .zonebeat-header,
.embedded-zonebeat-card .compact-tool-header-with-actions {
  align-items: center !important;
  display: grid !important;
  gap: 0.35rem !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  margin-bottom: 0.35rem !important;
}
.embedded-zonebeat-card .zonebeat-header > div:first-child {
  min-width: 0;
}
.embedded-zonebeat-card .zonebeat-header h3 {
  align-items: baseline;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  white-space: nowrap;
}
.metronome-inline-status {
  background: rgba(23, 32, 51, 0.07);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 850;
  padding: 0.12rem 0.38rem;
}
.compact-metronome-header-controls {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  min-width: 0;
}
.embedded-zonebeat-card .bpm-override-label,
.embedded-zonebeat-card .metronome-header-bpm {
  flex: 0 0 auto;
  white-space: nowrap;
}
.embedded-zonebeat-card .timing-start-stop {
  flex: 0 0 auto;
}
.embedded-zonebeat-card .zb-collapse-button {
  flex: 0 0 auto;
  justify-self: end;
}

/* Collapsed metronome shows only the useful header/start-stop/BPM row. */
.embedded-zonebeat-card.zb-collapsed .timing-mode-row,
.embedded-zonebeat-card.zb-collapsed .timing-strip-controls {
  display: none !important;
}
.embedded-zonebeat-card.zb-collapsed {
  cursor: pointer;
}
.embedded-zonebeat-card.zb-collapsed .zonebeat-header {
  margin-bottom: 0 !important;
}

/* Practice action row: keep it one row but make it less harsh visually. */
.hero-actions {
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(100, 112, 132, 0.18);
  border-radius: 16px;
  padding: 0.35rem;
}
.hero-actions button {
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(20, 30, 50, 0.06);
  font-weight: 850;
  letter-spacing: -0.01em;
}
.hero-actions #startItemButton,
.hero-actions #doneItemButton {
  font-size: 0.86rem !important;
}
.hero-actions #skipItemButton,
.hero-actions #nextBlockButton,
.hero-actions #editCurrentItemButton {
  font-size: 0.74rem !important;
}

/* Flow dock: every opened tool uses the same dock width and behavior. */
body[data-dashboard-mode="flow"] .practice-side.tool-stack {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .dashboard-tool-launcher,
body[data-dashboard-mode="flow"] .dashboard-tool-card,
body[data-dashboard-mode="flow"] .dashboard-tool-card.is-open,
body[data-dashboard-mode="flow"] [data-tool-card],
body[data-dashboard-mode="flow"] [data-tool-card].is-open {
  box-sizing: border-box !important;
  justify-self: stretch !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .dashboard-tool-card.is-open {
  display: grid !important;
}
body[data-dashboard-mode="flow"] .tool-launcher-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .tool-launch-button {
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .video-recorder-mock-card,
body[data-dashboard-mode="flow"] .zoneplayer-mock-card,
body[data-dashboard-mode="flow"] .zonetune-mock-card,
body[data-dashboard-mode="flow"] .recorder-mock-card {
  grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
  .compact-countdown-card,
  .countdown-card {
    margin-top: 0.4rem !important;
    order: 1;
  }
  .practice-support-row.timing-support-row {
    order: 2;
  }
  .embedded-zonebeat-card .zonebeat-header,
  .embedded-zonebeat-card .compact-tool-header-with-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .compact-metronome-header-controls {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.28rem;
    grid-template-columns: auto 1fr;
    width: 100%;
  }
  .embedded-zonebeat-card .timing-start-stop {
    justify-self: stretch;
  }
  .embedded-zonebeat-card .timing-start-stop button {
    flex: 1 1 0;
  }
  .embedded-zonebeat-card .zb-collapse-button {
    padding: 0.25rem 0.42rem;
  }
  .embedded-zonebeat-card .timing-mode-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .embedded-zonebeat-card .timing-select-label select {
    font-size: 0.74rem !important;
  }
  .hero-actions {
    gap: 0.24rem !important;
    padding: 0.28rem;
  }
  .hero-actions #startItemButton,
  .hero-actions #doneItemButton {
    font-size: 0.76rem !important;
    padding: 0.46rem 0.28rem !important;
  }
  .hero-actions #skipItemButton,
  .hero-actions #nextBlockButton,
  .hero-actions #editCurrentItemButton {
    font-size: 0.66rem !important;
    padding: 0.42rem 0.22rem !important;
  }
}


/* P02U viewport polish cleanup: stabilize presentation visuals without a larger redesign. */
:root { --zb-p02s-demo-fix: 1; }

/* The P02R metronome collapse looked broken on phone/desktop, so leave timing visible for demos. */
.zb-collapse-button { display: none !important; }
.zb-collapsed { cursor: default !important; }
.zb-collapsed .timing-mode-row,
.zb-collapsed .timing-strip-controls,
.zb-collapsed .timer-config,
.zb-collapsed .timer-presets,
.zb-collapsed .timer-checkbox,
.zb-collapsed .countdown-actions {
  display: revert !important;
}
.embedded-zonebeat-card.zb-collapsed .timing-mode-row { display: flex !important; }
.embedded-zonebeat-card.zb-collapsed .timing-strip-controls { display: flex !important; }
.embedded-zonebeat-card.zb-collapsed .zonebeat-header { margin-bottom: 0.35rem !important; }

/* Metronome header: keep title, BPM, status, and start/stop from overwriting each other. */
.embedded-zonebeat-card .zonebeat-header,
.embedded-zonebeat-card .compact-tool-header-with-actions {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.45rem !important;
}
.embedded-zonebeat-card .zonebeat-header h3 {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.metronome-inline-status {
  display: inline-flex !important;
  max-width: 100% !important;
  position: static !important;
}
.compact-metronome-header-controls {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 0.3rem !important;
}

/* Keep references visible when present; no Show/Hide in demo build. */
.references-toggle-button,
.current-item-references-box .references-toggle-button { display: none !important; }
.current-item-references-box[data-has-references="true"] {
  display: grid !important;
  min-height: unset !important;
}
.current-item-references-box[data-has-references="true"] .reference-context-list,
.current-item-references-box[data-has-references="true"] #currentItemReferencesList {
  display: grid !important;
}
.current-item-references-box[data-has-references="false"] { display: none !important; }
.reference-box-header { align-items: center !important; }
.reference-box-header span { text-align: left !important; }

/* Flow dock: all opened tools should behave like the Audio card did: full dock width. */
body[data-dashboard-mode="flow"] .practice-side.tool-stack {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .dashboard-tool-card,
body[data-dashboard-mode="flow"] [data-tool-card],
body[data-dashboard-mode="flow"] [data-tool-card].is-open,
body[data-dashboard-mode="flow"] .dashboard-tool-card.is-open {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] [data-tool-card].is-open,
body[data-dashboard-mode="flow"] .dashboard-tool-card.is-open {
  display: grid !important;
}
body[data-dashboard-mode="flow"] .tool-launcher-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.35rem !important;
  width: 100% !important;
}
body[data-dashboard-mode="flow"] .tool-launch-button { width: 100% !important; }

/* Top practice action row: retain one line, make labels fit, and make primary buttons look better. */
.hero-actions {
  border-radius: 999px !important;
  padding: 0.3rem !important;
}
.hero-actions #startItemButton,
.hero-actions #doneItemButton {
  border-radius: 999px !important;
  font-weight: 850 !important;
}
.hero-actions #skipItemButton,
.hero-actions #editCurrentItemButton {
  border-radius: 999px !important;
  font-weight: 800 !important;
}
#editCurrentItemButton { min-width: 0 !important; }

/* Manage details: make Delete look intentional, not like a broken DEL chip. */
.compact-delete-button {
  border-radius: 9px !important;
  display: none;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  padding: 0.28rem 0.42rem !important;
  width: auto !important;
}
.compact-manage-card.is-expanded .compact-delete-button,
.record-card.is-expanded .compact-delete-button {
  display: inline-flex !important;
}
.compact-record-actions,
.record-actions {
  align-items: center !important;
}

@media (max-width: 760px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1.05fr 1.05fr 0.72fr 0.65fr !important;
    gap: 0.75rem !important;
    padding: 0.24rem !important;
  }
  .hero-actions button {
    min-height: 1.95rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
  .hero-actions #startItemButton,
  .hero-actions #doneItemButton { font-size: 0.74rem !important; }
  .hero-actions #skipItemButton,
  .hero-actions #editCurrentItemButton { font-size: 0.66rem !important; }

  .embedded-zonebeat-card .zonebeat-header,
  .embedded-zonebeat-card .compact-tool-header-with-actions {
    grid-template-columns: 1fr !important;
    gap: 0.28rem !important;
  }
  .compact-metronome-header-controls {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .embedded-zonebeat-card .timing-start-stop {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
  .embedded-zonebeat-card .timing-start-stop button { width: 100% !important; }

  .filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    overflow-x: auto !important;
  }
  .filter-row .filter-button {
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    padding: 0.34rem 0.48rem !important;
    width: auto !important;
  }
  .compact-delete-button { font-size: 0.66rem !important; }
}

/* P02T mobile metronome + show-ready visual tuning */
:root { --zb-p02t-visual-tune: 1; }

/* Desktop Flow: when no references exist, keep the reference panel present so the layout does not look broken. */
@media (min-width: 861px) {
  body[data-dashboard-mode="flow"] .current-item-references-box[data-p02t-placeholder="true"] {
    display: grid !important;
    background: linear-gradient(135deg, rgba(255,248,235,0.98), rgba(244,232,208,0.96)) !important;
    border-color: rgba(181,128,64,0.28) !important;
    min-height: 100% !important;
  }
  body[data-dashboard-mode="flow"] .current-item-references-box[data-p02t-placeholder="true"] .reference-empty-state {
    display: block !important;
    border: 0 !important;
    color: #8a5a16 !important;
    padding: 0.25rem 0 0 !important;
    text-align: left !important;
  }
  body[data-dashboard-mode="flow"] .current-item-references-box[data-p02t-placeholder="true"] #currentItemReferencesList {
    display: none !important;
  }
}

/* Keep desktop metronome fully visible and balanced. Mobile gets the compact behavior. */
@media (min-width: 861px) {
  .zb-mobile-metronome-toggle { display: none !important; }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-mode-row,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-strip-controls {
    display: flex !important;
  }
}

/* Button hierarchy: primary item actions slightly bigger; timer/metronome utility buttons smaller. */
.hero-actions {
  gap: 0.3rem !important;
}
.hero-actions #startItemButton,
.hero-actions #doneItemButton {
  font-size: 0.9rem !important;
  min-height: 2.25rem !important;
  padding: 0.52rem 0.82rem !important;
}
.hero-actions #skipItemButton,
.hero-actions #editCurrentItemButton {
  font-size: 0.78rem !important;
  min-height: 2.05rem !important;
  padding: 0.45rem 0.62rem !important;
}
.countdown-actions button,
.embedded-zonebeat-card .timing-start-stop button,
.zb-mobile-metronome-toggle {
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  min-height: 1.7rem !important;
  padding: 0.28rem 0.45rem !important;
}
.timer-presets .timer-preset,
.timer-preset {
  font-size: 0.72rem !important;
  min-height: 1.55rem !important;
  min-width: 1.55rem !important;
  padding: 0.22rem 0.28rem !important;
}

@media (max-width: 860px) {
  /* Mobile metronome compact mode hides only the busy setup/details, not start/stop/BPM. */
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-mode-row,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-strip-controls {
    display: none !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact {
    padding-bottom: 0.28rem !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header {
    margin-bottom: 0 !important;
  }
  .embedded-zonebeat-card .zonebeat-header,
  .embedded-zonebeat-card .compact-tool-header-with-actions {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.25rem !important;
  }
  .embedded-zonebeat-card .zonebeat-header h3 {
    align-items: center !important;
    display: flex !important;
    gap: 0.25rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .metronome-inline-status {
    font-size: 0.58rem !important;
    margin-left: 0 !important;
    padding: 0.07rem 0.24rem !important;
  }
  .compact-metronome-header-controls {
    align-items: center !important;
    display: grid !important;
    gap: 0.22rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
  }
  .metronome-header-bpm {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
  }
  .metronome-header-bpm input {
    max-width: 3.05rem !important;
    min-height: 1.52rem !important;
    padding: 0.15rem 0.22rem !important;
  }
  .embedded-zonebeat-card .timing-start-stop {
    display: grid !important;
    gap: 0.18rem !important;
    grid-template-columns: 1fr 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .embedded-zonebeat-card .timing-start-stop button,
  .zb-mobile-metronome-toggle {
    width: 100% !important;
  }
  .zb-mobile-metronome-toggle {
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* Main practice buttons should be more visually important than utility buttons. */
  .hero-actions {
    grid-template-columns: 1.12fr 1.12fr 0.72fr 0.72fr !important;
    gap: 0.24rem !important;
    padding: 0.25rem !important;
  }
  .hero-actions #startItemButton,
  .hero-actions #doneItemButton {
    font-size: 0.8rem !important;
    min-height: 2.15rem !important;
    padding: 0.44rem 0.3rem !important;
  }
  .hero-actions #skipItemButton,
  .hero-actions #editCurrentItemButton {
    font-size: 0.7rem !important;
    min-height: 2rem !important;
    padding: 0.38rem 0.22rem !important;
  }

  .countdown-actions button,
  .timer-presets .timer-preset,
  .timer-preset {
    font-size: 0.66rem !important;
    min-height: 1.5rem !important;
    padding: 0.2rem 0.24rem !important;
  }
}

/* P02U viewport + polish cleanup: remove duplicate floating build ribbon and prevent dead gray dashboard scrolling on phones. */
.mobile-build-ribbon {
  display: none !important;
}

@media (max-width: 860px) {
  html,
  body {
    min-height: 100%;
    overscroll-behavior-y: none;
  }

  body[data-current-screen="dashboard"] {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .app-shell {
    min-height: 100dvh !important;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .card.practice-dashboard,
  .practice-dashboard.card {
    margin-bottom: 0 !important;
  }

  .practice-dashboard .hero-current {
    min-height: unset !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel {
    max-height: min(34dvh, 260px) !important;
    overflow: hidden !important;
  }

  .main-queue-panel .session-queue,
  .queue-panel.main-queue-panel .session-queue {
    max-height: min(25dvh, 190px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-build-line,
  .prominent-build-chip,
  #appVersionDisplay {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* P02W mobile header + metronome repair */
:root { --zb-p02v-session-mobile-cleanup: 1; }

/* Prevent duplicate pseudo text on the phone Edit button. */
#editCurrentItemButton::after { content: none !important; display: none !important; }
.hero-actions #editCurrentItemButton { font-size: 0.76rem !important; }

/* Keep the primary action row readable while still compact. */
.hero-actions {
  align-items: center !important;
}
.hero-actions #startItemButton,
.hero-actions #doneItemButton {
  border-radius: 13px !important;
  font-weight: 850 !important;
}
.hero-actions #skipItemButton,
.hero-actions #editCurrentItemButton {
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* Countdown title should be explicit, not mysterious. */
.countdown-left .eyebrow {
  white-space: nowrap;
}

/* Hide old queue window markers; P02V renders the full queue in the scroll box. */
.queue-window-marker { display: none !important; }
.main-queue-panel .session-queue,
.queue-panel.main-queue-panel .session-queue {
  scroll-behavior: smooth;
}

/* Fix nav indicator/checkmark alignment issues by forcing nav buttons to align on one row. */
.app-nav-button {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.app-nav-button::before,
.app-nav-button::after {
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Make the completed-session button fit the bubble better. */
#startItemButton.is-new-session-button,
#startItemButton[data-mode="newSession"] {
  white-space: nowrap !important;
  min-width: 0 !important;
}

@media (max-width: 860px) {
  /* Stronger iPhone installed-PWA viewport lock: only inner panels should scroll. */
  html, body {
    height: 100%;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overscroll-behavior: none;
  }
  body {
    min-height: 100dvh;
  }
  .app-shell {
    min-height: 100dvh !important;
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-current-screen="dashboard"] .app-shell {
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body[data-current-screen="dashboard"] .practice-dashboard {
    max-height: calc(100dvh - 5.4rem) !important;
    overflow: hidden !important;
  }
  body[data-current-screen="dashboard"] .hero-current {
    max-height: calc(100dvh - 6.8rem) !important;
    overflow: hidden !important;
  }
  .main-queue-panel,
  .queue-panel.main-queue-panel {
    max-height: min(34dvh, 245px) !important;
  }
  .main-queue-panel .session-queue,
  .queue-panel.main-queue-panel .session-queue {
    max-height: min(25dvh, 185px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .hero-actions #startItemButton,
  .hero-actions #doneItemButton {
    font-size: 0.82rem !important;
  }
  .hero-actions #skipItemButton,
  .hero-actions #editCurrentItemButton {
    font-size: 0.72rem !important;
  }
}


/* P02W mobile header + metronome repair */
:root { --zb-p02w-mobile-header-metronome-repair: 1; }

/* Keep the in-header build chip as the single version indicator; never show the old floating ribbon. */
.mobile-build-ribbon { display: none !important; }

/* Friendly empty tool dock copy. */
.dashboard-tool-launcher .tool-launcher-note {
  background: rgba(248, 250, 252, 0.78);
  border: 1px dashed rgba(100, 112, 132, 0.30);
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.65rem;
  text-align: center;
}

/* Recover from P02V queue/timer crowding: the timer must own its row and the queue must sit below it. */
.compact-countdown-card,
.countdown-card.compact-countdown-card {
  position: relative;
  z-index: 2;
  width: 100%;
}
.main-queue-panel,
.queue-panel.main-queue-panel {
  clear: both;
  position: relative;
  z-index: 1;
}
.countdown-left .eyebrow::before { content: none !important; }
.countdown-left .eyebrow { display: inline-flex; align-items: center; }

@media (max-width: 860px) {
  /* Mobile header: show backup health/export badge without bringing back desktop chrome. */
  .app-header { position: relative; padding-right: 6.6rem; }
  .pwa-update-status,
  .dashboard-mode-bar { display: none !important; }
  .backup-health-button.header-backup-export-button,
  .backup-health-button {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    font-size: 0.66rem !important;
    justify-content: center !important;
    min-height: 1.7rem !important;
    min-width: 5.8rem !important;
    padding: 0.25rem 0.42rem !important;
    position: absolute !important;
    right: 0.35rem !important;
    top: calc(0.32rem + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    z-index: 12 !important;
  }

  /* Do not let the queue creep over the countdown timer. */
  .compact-countdown-card,
  .countdown-card.compact-countdown-card {
    flex: 0 0 auto !important;
    margin-bottom: 0.42rem !important;
    overflow: visible !important;
  }
  .main-queue-panel,
  .queue-panel.main-queue-panel {
    margin-top: 0.45rem !important;
    overflow: hidden !important;
  }

  /* Mobile metronome collapsed means a true thin strip: title + Open only. */
  .embedded-zonebeat-card.zb-mobile-metronome-compact {
    min-height: 0 !important;
    padding: 0.32rem 0.45rem !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-height: 1.65rem !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header .eyebrow,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-inline-status,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-header-bpm,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-start-stop,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-mode-row,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-strip-controls,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-controls {
    display: none !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header h3 {
    font-size: 0.82rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .compact-metronome-header-controls {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    min-width: auto !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zb-mobile-metronome-toggle {
    display: inline-flex !important;
    font-size: 0.68rem !important;
    min-height: 1.45rem !important;
    padding: 0.22rem 0.48rem !important;
    width: auto !important;
  }

  /* Open metronome remains compact but usable. */
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .zb-mobile-metronome-toggle {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.42rem !important;
    width: auto !important;
  }
}

/* P02X mobile timing/header repair */
:root { --zb-p02x-mobile-timing-header-repair: 1; }

/* Stronger single visible build/version indicator. */
.mobile-build-ribbon,
.floating-build-badge,
#floatingBuildBadge {
  display: none !important;
}

/* Friendly tool dock helper: make it obvious when no tools are opened. */
.dashboard-tool-launcher .tool-launcher-note {
  display: block !important;
  background: linear-gradient(135deg, rgba(248,250,252,0.95), rgba(238,242,255,0.72)) !important;
  border: 1px dashed rgba(31, 94, 255, 0.22) !important;
  border-radius: 14px !important;
  color: var(--muted) !important;
  font-size: 0.84rem !important;
  font-weight: 760 !important;
  margin-top: 0.5rem !important;
  padding: 0.65rem 0.75rem !important;
  text-align: center !important;
}
body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-launcher-note::before {
  content: "Add tools here when needed. ";
  color: var(--text);
  font-weight: 850;
}

/* Mobile: keep backup visible at the top-right of the app header. */
@media (max-width: 860px) {
  .app-header.header-with-nav,
  .app-header {
    position: relative !important;
    padding-right: 6.2rem !important;
  }
  #backupHealthButton,
  #backupHealthButton.backup-health-button,
  .backup-health-button.header-backup-export-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 0.35rem !important;
    top: calc(0.35rem + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    min-width: 5.4rem !important;
    max-width: 6.2rem !important;
    min-height: 1.65rem !important;
    padding: 0.22rem 0.4rem !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 50 !important;
  }

  /* Timer stays visible but compact. */
  .compact-countdown-card,
  .countdown-card.compact-countdown-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    padding: 0.26rem 0.38rem !important;
    margin-top: 0.34rem !important;
    margin-bottom: 0.28rem !important;
    overflow: visible !important;
  }
  .countdown-left {
    gap: 0.32rem !important;
  }
  .countdown-left .eyebrow {
    font-size: 0.58rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
  }
  .countdown-display span:first-child {
    font-size: 0.9rem !important;
  }
  .countdown-display span:last-child {
    font-size: 0.58rem !important;
  }
  .timer-config {
    flex: 0 0 3.2rem !important;
    max-width: 3.2rem !important;
  }
  .timer-config input {
    font-size: 0.72rem !important;
    padding: 0.24rem 0.28rem !important;
  }
  .timer-presets { gap: 0.18rem !important; }
  .timer-preset {
    min-width: 1.38rem !important;
    font-size: 0.64rem !important;
    padding: 0.2rem 0.24rem !important;
  }
  .countdown-actions { gap: 0.18rem !important; }
  .countdown-actions button {
    font-size: 0.64rem !important;
    padding: 0.22rem 0.32rem !important;
  }

  /* Mobile collapsed metronome should remain usable: title + BPM + Start/Stop + Open. */
  .embedded-zonebeat-card.zb-mobile-metronome-compact {
    display: grid !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0.26rem 0.36rem !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.35rem !important;
    justify-content: space-between !important;
    min-height: 1.55rem !important;
    margin: 0 !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header > div:first-child {
    min-width: 0 !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header .eyebrow {
    display: none !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-inline-status {
    display: inline !important;
    font-size: 0.62rem !important;
    opacity: 0.72 !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .compact-metronome-header-controls {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0.22rem !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-header-bpm,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-start-stop {
    display: inline-flex !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-header-bpm {
    align-items: center !important;
    font-size: 0.58rem !important;
    gap: 0.15rem !important;
    width: auto !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-header-bpm input {
    max-width: 2.9rem !important;
    min-height: 1.35rem !important;
    padding: 0.12rem 0.2rem !important;
    font-size: 0.68rem !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-start-stop {
    gap: 0.16rem !important;
    flex-wrap: nowrap !important;
  }
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-start-stop button,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zb-mobile-metronome-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-height: 1.35rem !important;
    border-radius: 8px !important;
    color: #111827 !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    padding: 0.18rem 0.3rem !important;
    white-space: nowrap !important;
  }

  /* Hide only the detailed setup controls when collapsed. */
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-mode-row,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-strip-controls,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-controls,
  .embedded-zonebeat-card.zb-mobile-metronome-compact #bpmInput,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-auto {
    display: none !important;
  }

  /* Open metronome remains compact but readable. */
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .zb-mobile-metronome-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-height: 1.45rem !important;
    font-size: 0.62rem !important;
    padding: 0.2rem 0.34rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-mode-row {
    gap: 0.25rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-select-label {
    font-size: 0.62rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-select-label select {
    font-size: 0.72rem !important;
    padding: 0.26rem 0.38rem !important;
  }

  /* More robust dashboard gap reduction. */
  body[data-current-screen="dashboard"] {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.90) !important;
  }
  body[data-current-screen="dashboard"] .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* P02Y timing strips + update control cleanup */
@media (max-width: 860px) {
  .header-right {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 0.28rem !important;
  }
  #pwaUpdateStatus {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-height: 1.45rem !important;
    padding: 0.18rem 0.36rem !important;
    font-size: 0.62rem !important;
  }
  #pwaReloadButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 1.25rem !important;
    padding: 0.14rem 0.34rem !important;
    font-size: 0.58rem !important;
    border-radius: 999px !important;
  }
  #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 5.2rem !important;
    min-height: 1.45rem !important;
    padding: 0.18rem 0.38rem !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    margin-top: -0.08rem !important;
  }

  /* Shared thin closed timing strip. */
  .compact-countdown-card.zb-mobile-timer-closed,
  .embedded-zonebeat-card.zb-mobile-metronome-compact {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 2rem !important;
    padding: 0.28rem 0.48rem !important;
    gap: 0.35rem !important;
    overflow: hidden !important;
  }

  .compact-countdown-card.zb-mobile-timer-closed .countdown-left,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
  }

  .compact-countdown-card.zb-mobile-timer-closed .countdown-left .eyebrow,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .zonebeat-header .eyebrow {
    display: none !important;
  }

  .compact-countdown-card.zb-mobile-timer-closed .countdown-display,
  .compact-countdown-card.zb-mobile-timer-closed .timer-config,
  .compact-countdown-card.zb-mobile-timer-closed .timer-presets,
  .compact-countdown-card.zb-mobile-timer-closed .timer-checkbox,
  .compact-countdown-card.zb-mobile-timer-closed .countdown-actions,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-mode-row,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .timing-strip-controls,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .compact-metronome-header-controls,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-controls {
    display: none !important;
  }

  .compact-countdown-card.zb-mobile-timer-closed::before {
    content: "Countdown Timer";
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
  }

  .embedded-zonebeat-card.zb-mobile-metronome-compact::before {
    content: "Metronome";
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
  }

  .zb-mobile-timer-toggle,
  .zb-mobile-metronome-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 3.1rem !important;
    min-height: 1.35rem !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    padding: 0.2rem 0.42rem !important;
    white-space: nowrap !important;
  }

  .compact-countdown-card:not(.zb-mobile-timer-closed) .zb-mobile-timer-toggle,
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .zb-mobile-metronome-toggle {
    min-width: 2.8rem !important;
  }

  /* Open timer/metronome should be compact but legible. */
  .compact-countdown-card:not(.zb-mobile-timer-closed) {
    padding: 0.34rem 0.48rem !important;
    gap: 0.3rem !important;
  }
  .compact-countdown-card:not(.zb-mobile-timer-closed) .countdown-left .eyebrow {
    font-size: 0.62rem !important;
    margin: 0 !important;
  }
  .compact-countdown-card:not(.zb-mobile-timer-closed) .countdown-display span:first-child {
    font-size: 0.92rem !important;
  }
  .compact-countdown-card:not(.zb-mobile-timer-closed) .timer-config {
    max-width: 3.45rem !important;
    flex-basis: 3.45rem !important;
  }
  .compact-countdown-card:not(.zb-mobile-timer-closed) .timer-preset,
  .compact-countdown-card:not(.zb-mobile-timer-closed) .countdown-actions button {
    min-height: 1.35rem !important;
    font-size: 0.62rem !important;
    padding: 0.18rem 0.3rem !important;
  }

  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) {
    padding: 0.38rem 0.48rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .zonebeat-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.3rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .compact-metronome-header-controls {
    display: flex !important;
    gap: 0.22rem !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-mode-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.32rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-select-label {
    display: grid !important;
    width: auto !important;
    font-size: 0.58rem !important;
  }
  .embedded-zonebeat-card:not(.zb-mobile-metronome-compact) .timing-select-label select {
    width: 100% !important;
    max-width: none !important;
    min-height: 1.65rem !important;
    font-size: 0.66rem !important;
  }

  /* Prevent the old P02X compact rules from making the closed metronome ugly. */
  .embedded-zonebeat-card.zb-mobile-metronome-compact .tool-card-header,
  .embedded-zonebeat-card.zb-mobile-metronome-compact h3,
  .embedded-zonebeat-card.zb-mobile-metronome-compact .metronome-inline-status {
    display: none !important;
  }

  /* Dashboard tool helper should show as an intentional empty dock note when applicable. */
  .dashboard-tool-launcher .tool-launcher-note {
    display: block !important;
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    margin: 0.2rem 0 0 !important;
  }
}

/* P03A mobile timing system cleanup: stable strips, header badges, setup backup tools */
@media (max-width: 720px) {
  .header-right {
    align-items: start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    justify-content: flex-end !important;
  }

  #backupHealthButton.backup-health-button {
    align-self: center !important;
    display: inline-flex !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
    min-height: 1.55rem !important;
    min-width: auto !important;
    padding: 0.22rem 0.42rem !important;
    width: auto !important;
  }

  #pwaUpdateStatus.pwa-update-status {
    align-self: center !important;
    font-size: 0.64rem !important;
    min-height: 1.55rem !important;
    padding: 0.18rem 0.36rem !important;
  }

  #pwaReloadButton.pwa-reload-button {
    display: inline-flex !important;
    font-size: 0.62rem !important;
    min-height: 1.35rem !important;
    padding: 0.16rem 0.32rem !important;
    width: auto !important;
  }

  .dashboard-tool-launcher .tool-launcher-note {
    background: rgba(248,250,252,0.82) !important;
    border: 1px dashed rgba(100,112,132,0.32) !important;
    border-radius: 12px !important;
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    margin: 0.35rem 0 0 !important;
    padding: 0.42rem 0.5rem !important;
    text-align: center !important;
  }

  .zb-mobile-timing-strip {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    min-height: 2.05rem !important;
    padding: 0.34rem 0.48rem !important;
  }

  .zb-mobile-timing-strip .eyebrow,
  .zb-mobile-timing-strip h3 {
    margin: 0 !important;
  }

  .zb-mobile-timing-toggle {
    border-radius: 999px !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    min-height: 1.45rem !important;
    padding: 0.24rem 0.52rem !important;
    width: auto !important;
  }

  .countdown-card.zb-timer-collapsed,
  .metronome-card.zb-metronome-collapsed {
    display: block !important;
    min-height: unset !important;
    padding: 0 !important;
  }

  .countdown-card.zb-timer-collapsed > :not(.countdown-left),
  .countdown-card.zb-timer-collapsed .countdown-display,
  .metronome-card.zb-metronome-collapsed > :not(.zonebeat-header),
  .metronome-card.zb-metronome-collapsed .compact-metronome-header-controls,
  .metronome-card.zb-metronome-collapsed .metronome-inline-status,
  .metronome-card.zb-metronome-collapsed .eyebrow {
    display: none !important;
  }

  .countdown-card.zb-timer-collapsed .countdown-left,
  .metronome-card.zb-metronome-collapsed .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    min-height: 2.05rem !important;
    padding: 0.34rem 0.48rem !important;
    width: 100% !important;
  }

  .metronome-card.zb-metronome-collapsed .zonebeat-header h3 {
    font-size: 0.86rem !important;
    margin: 0 !important;
  }

  .countdown-card:not(.zb-timer-collapsed),
  .metronome-card:not(.zb-metronome-collapsed) {
    border-radius: 14px !important;
  }

  .countdown-card:not(.zb-timer-collapsed) .countdown-left,
  .metronome-card:not(.zb-metronome-collapsed) .zonebeat-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  .countdown-card:not(.zb-timer-collapsed) .countdown-display span:first-child {
    font-size: 0.95rem !important;
  }

  .timing-mode-row,
  .timing-strip-controls {
    margin-top: 0.3rem !important;
  }

  .zb-old-mobile-toggle,
  .zb-mobile-metronome-toggle:not(.zb-mobile-timing-toggle) {
    display: none !important;
  }

  .setup-mobile-backup-panel {
    display: grid !important;
  }
}

@media (min-width: 721px) {
  .setup-mobile-backup-panel { display: none !important; }
}

.setup-mobile-backup-panel {
  background: rgba(248,250,252,0.92);
  border: 1px solid rgba(100,112,132,0.24);
  border-radius: 16px;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.setup-mobile-backup-panel strong { font-size: 0.9rem; }
.setup-mobile-backup-panel p { color: var(--muted); font-size: 0.82rem; margin: 0; }
.setup-mobile-backup-panel .button-row { display: flex !important; flex-wrap: nowrap !important; gap: 0.4rem !important; }
.setup-mobile-backup-panel button { font-size: 0.78rem !important; padding: 0.42rem 0.55rem !important; }

/* P03A corrective repair: stable one-line mobile timing strips, badge placement, restore clarity. */
.tool-launcher-note[hidden] { display: none !important; }
.compact-delete-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 3.2rem !important;
  width: auto !important;
}

@media (max-width: 720px) {
  /* Hide earlier experimental toggles so only P03A controls are visible. */
  .zb-mobile-timer-toggle,
  .zb-mobile-metronome-toggle,
  .zb-timer-toggle-p03a,
  .zb-metronome-toggle-p03a,
  .zb-timer-toggle-p02z,
  .zb-metronome-toggle-p02z,
  .zb-mobile-timing-toggle:not(.p03a-timing-toggle) {
    display: none !important;
  }

  .app-build-line {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin-top: 0.12rem !important;
  }

  .p03a-mobile-header-badge,
  #backupHealthButton.p03a-mobile-header-badge,
  .p03a-mobile-update-button {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    min-height: 1.35rem !important;
    min-width: auto !important;
    padding: 0.18rem 0.38rem !important;
    width: auto !important;
  }

  #pwaUpdateStatus.pwa-update-status {
    display: none !important;
  }

  .header-right {
    gap: 0.28rem !important;
  }

  .p03a-timing-card {
    overflow: hidden !important;
  }

  .p03a-timing-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-height: 2rem !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .p03a-timing-header > div:first-child,
  .p03a-timing-header .countdown-display {
    min-width: 0 !important;
  }

  .p03a-timing-header h3,
  .p03a-timing-header .eyebrow {
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .p03a-timing-toggle {
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    min-height: 1.45rem !important;
    padding: 0.24rem 0.55rem !important;
    width: auto !important;
  }

  .countdown-card.p03a-closed,
  .compact-countdown-card.p03a-closed,
  .metronome-card.p03a-closed,
  .embedded-zonebeat-card.p03a-closed {
    display: block !important;
    margin-top: 0.42rem !important;
    min-height: unset !important;
    padding: 0.38rem 0.52rem !important;
  }

  .countdown-card.p03a-closed > :not(.countdown-left),
  .compact-countdown-card.p03a-closed > :not(.countdown-left),
  .countdown-card.p03a-closed .countdown-display,
  .compact-countdown-card.p03a-closed .countdown-display,
  .metronome-card.p03a-closed > :not(.zonebeat-header),
  .embedded-zonebeat-card.p03a-closed > :not(.zonebeat-header),
  .metronome-card.p03a-closed .compact-metronome-header-controls,
  .embedded-zonebeat-card.p03a-closed .compact-metronome-header-controls,
  .metronome-card.p03a-closed .metronome-inline-status,
  .embedded-zonebeat-card.p03a-closed .metronome-inline-status,
  .metronome-card.p03a-closed .eyebrow,
  .embedded-zonebeat-card.p03a-closed .eyebrow {
    display: none !important;
  }

  .countdown-card.p03a-closed .countdown-left,
  .compact-countdown-card.p03a-closed .countdown-left,
  .metronome-card.p03a-closed .zonebeat-header,
  .embedded-zonebeat-card.p03a-closed .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    min-height: 1.65rem !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .countdown-card.p03a-open,
  .compact-countdown-card.p03a-open,
  .metronome-card.p03a-open,
  .embedded-zonebeat-card.p03a-open {
    border-radius: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
    margin-top: 0.42rem !important;
    padding: 0.42rem 0.5rem !important;
  }

  .countdown-card.p03a-open .countdown-left,
  .compact-countdown-card.p03a-open .countdown-left,
  .metronome-card.p03a-open .zonebeat-header,
  .embedded-zonebeat-card.p03a-open .zonebeat-header {
    flex: 1 0 100% !important;
  }

  .countdown-card.p03a-open .timer-config {
    flex: 0 0 3.6rem !important;
    max-width: 3.6rem !important;
  }

  .countdown-card.p03a-open .timer-presets,
  .countdown-card.p03a-open .countdown-actions,
  .compact-countdown-card.p03a-open .timer-presets,
  .compact-countdown-card.p03a-open .countdown-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
  }

  .countdown-card.p03a-open button,
  .compact-countdown-card.p03a-open button,
  .metronome-card.p03a-open button,
  .embedded-zonebeat-card.p03a-open button {
    font-size: 0.7rem !important;
    min-height: 1.55rem !important;
    padding: 0.24rem 0.42rem !important;
    width: auto !important;
  }

  .metronome-card.p03a-open .timing-mode-row,
  .embedded-zonebeat-card.p03a-open .timing-mode-row,
  .metronome-card.p03a-open .timing-strip-controls,
  .embedded-zonebeat-card.p03a-open .timing-strip-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    margin-top: 0.2rem !important;
    width: 100% !important;
  }

  .metronome-card.p03a-open .timing-select-label,
  .embedded-zonebeat-card.p03a-open .timing-select-label {
    flex: 1 1 8rem !important;
    width: auto !important;
  }

  .metronome-card.p03a-open .timing-select-label select,
  .embedded-zonebeat-card.p03a-open .timing-select-label select {
    max-width: none !important;
    width: 100% !important;
  }

  .record-actions.compact-record-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
  }

  .record-actions.compact-record-actions button {
    font-size: 0.62rem !important;
    min-height: 1.55rem !important;
    padding: 0.22rem 0.32rem !important;
  }
}


/* P03D mobile timing/header cleanup: true one-line closed strips, visible dock helper, aligned badges. */
@media (max-width: 720px) {
  .dashboard-tool-launcher .tool-launcher-note {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1.1rem !important;
    margin: 0.35rem 0 0 !important;
    color: var(--muted) !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  .app-build-line {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    overflow: visible !important;
  }

  .app-build-line .build-label { display: none !important; }

  #backupHealthButton.p03b-mobile-header-badge,
  .p03b-mobile-update-button {
    align-items: center !important;
    align-self: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    height: 1.35rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 1.35rem !important;
    min-width: 0 !important;
    padding: 0.16rem 0.38rem !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
  }

  #appVersionDisplay.prominent-build-chip {
    align-items: center !important;
    display: inline-flex !important;
    height: 1.35rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0.16rem 0.42rem !important;
  }

  /* Closed timing cards are exactly one thin row: label left, Open right. */
  .countdown-card.p03b-closed,
  .compact-countdown-card.p03b-closed,
  .metronome-card.p03b-closed,
  .embedded-zonebeat-card.p03b-closed {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    justify-content: space-between !important;
    margin-top: 0.36rem !important;
    min-height: 1.9rem !important;
    overflow: hidden !important;
    padding: 0.32rem 0.48rem !important;
    width: 100% !important;
  }

  .countdown-card.p03b-closed > :not(.countdown-left),
  .compact-countdown-card.p03b-closed > :not(.countdown-left),
  .metronome-card.p03b-closed > :not(.zonebeat-header),
  .embedded-zonebeat-card.p03b-closed > :not(.zonebeat-header) {
    display: none !important;
  }

  .countdown-card.p03b-closed .countdown-left,
  .compact-countdown-card.p03b-closed .countdown-left,
  .metronome-card.p03b-closed .zonebeat-header,
  .embedded-zonebeat-card.p03b-closed .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .countdown-card.p03b-closed .countdown-display,
  .compact-countdown-card.p03b-closed .countdown-display,
  .metronome-card.p03b-closed .compact-metronome-header-controls,
  .embedded-zonebeat-card.p03b-closed .compact-metronome-header-controls,
  .metronome-card.p03b-closed .eyebrow,
  .embedded-zonebeat-card.p03b-closed .eyebrow,
  .metronome-card.p03b-closed .metronome-inline-status,
  .embedded-zonebeat-card.p03b-closed .metronome-inline-status {
    display: none !important;
  }

  .countdown-card.p03b-closed .eyebrow,
  .compact-countdown-card.p03b-closed .eyebrow,
  .metronome-card.p03b-closed h3,
  .embedded-zonebeat-card.p03b-closed h3 {
    color: var(--text) !important;
    display: block !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .p03b-timing-toggle {
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    height: 1.35rem !important;
    line-height: 1 !important;
    min-height: 1.35rem !important;
    padding: 0.16rem 0.52rem !important;
    width: auto !important;
  }

  .countdown-card.p03b-open,
  .compact-countdown-card.p03b-open,
  .metronome-card.p03b-open,
  .embedded-zonebeat-card.p03b-open {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.28rem !important;
    margin-top: 0.36rem !important;
    padding: 0.38rem 0.48rem !important;
  }

  .countdown-card.p03b-open .countdown-left,
  .compact-countdown-card.p03b-open .countdown-left,
  .metronome-card.p03b-open .zonebeat-header,
  .embedded-zonebeat-card.p03b-open .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    flex: 1 0 100% !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  .countdown-card.p03b-open .timer-config { flex: 0 0 3.4rem !important; max-width: 3.4rem !important; }
  .countdown-card.p03b-open .timer-presets,
  .countdown-card.p03b-open .countdown-actions,
  .compact-countdown-card.p03b-open .timer-presets,
  .compact-countdown-card.p03b-open .countdown-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
  }

  .countdown-card.p03b-open button,
  .compact-countdown-card.p03b-open button,
  .metronome-card.p03b-open button,
  .embedded-zonebeat-card.p03b-open button {
    font-size: 0.68rem !important;
    min-height: 1.45rem !important;
    padding: 0.2rem 0.38rem !important;
    width: auto !important;
  }

  .current-item-elapsed-pill {
    position: absolute !important;
    top: 0.55rem !important;
    right: 0.62rem !important;
    background: rgba(23, 32, 51, 0.08) !important;
    border: 1px solid rgba(23, 32, 51, 0.08) !important;
    border-radius: 999px !important;
    color: var(--muted) !important;
    display: inline-flex !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    padding: 0.16rem 0.45rem !important;
    z-index: 1 !important;
  }
  .hero-current { position: relative !important; }
}


/* P03D final mobile timing/header/restore polish overrides */
@media (max-width: 720px) {
  .app-shell { overflow-x: hidden !important; }

  /* Keep build, backup, and update badges on a single stable line. */
  .app-build-line {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.24rem !important;
    min-height: 1.45rem !important;
    white-space: nowrap !important;
  }
  .app-build-line .build-label { display: none !important; }
  #appVersionDisplay.prominent-build-chip,
  #backupHealthButton.p03c-mobile-header-badge,
  #pwaReloadButton.p03c-mobile-update-button {
    align-items: center !important;
    align-self: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.61rem !important;
    font-weight: 850 !important;
    height: 1.32rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 1.32rem !important;
    min-width: 0 !important;
    padding: 0.15rem 0.36rem !important;
    position: static !important;
    transform: none !important;
    vertical-align: middle !important;
    width: auto !important;
  }

  /* Stable tool dock helper. No pseudo text, no format switching. */
  .dashboard-tool-launcher .tool-launcher-note,
  body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-launcher-note,
  body[data-dashboard-mode="essentials"] .dashboard-tool-launcher .tool-launcher-note {
    background: rgba(248, 250, 252, 0.82) !important;
    border: 1px dashed rgba(100, 112, 132, 0.28) !important;
    border-radius: 12px !important;
    color: var(--muted) !important;
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    margin: 0.35rem 0 0 !important;
    min-height: 1.85rem !important;
    opacity: 1 !important;
    padding: 0.35rem 0.45rem !important;
    position: static !important;
    text-align: center !important;
    visibility: visible !important;
  }
  .dashboard-tool-launcher .tool-launcher-note::before,
  body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-launcher-note::before,
  body[data-dashboard-mode="essentials"] .dashboard-tool-launcher .tool-launcher-note::before {
    content: none !important;
    display: none !important;
  }

  /* P03D phone timing strips: closed = exactly one clean line. */
  .countdown-card.p03c-closed,
  .compact-countdown-card.p03c-closed,
  .metronome-card.p03c-closed,
  .embedded-zonebeat-card.p03c-closed {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    justify-content: space-between !important;
    margin-top: 0.32rem !important;
    min-height: 1.85rem !important;
    overflow: hidden !important;
    padding: 0.28rem 0.45rem !important;
    width: 100% !important;
  }
  .countdown-card.p03c-closed > :not(.countdown-left),
  .compact-countdown-card.p03c-closed > :not(.countdown-left),
  .metronome-card.p03c-closed > :not(.zonebeat-header),
  .embedded-zonebeat-card.p03c-closed > :not(.zonebeat-header) {
    display: none !important;
  }
  .countdown-card.p03c-closed .countdown-left,
  .compact-countdown-card.p03c-closed .countdown-left,
  .metronome-card.p03c-closed .zonebeat-header,
  .embedded-zonebeat-card.p03c-closed .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .countdown-card.p03c-closed .countdown-display,
  .compact-countdown-card.p03c-closed .countdown-display,
  .metronome-card.p03c-closed .eyebrow,
  .embedded-zonebeat-card.p03c-closed .eyebrow,
  .metronome-card.p03c-closed .compact-metronome-header-controls,
  .embedded-zonebeat-card.p03c-closed .compact-metronome-header-controls,
  .metronome-card.p03c-closed .metronome-inline-status,
  .embedded-zonebeat-card.p03c-closed .metronome-inline-status {
    display: none !important;
  }
  .countdown-card.p03c-closed .eyebrow,
  .compact-countdown-card.p03c-closed .eyebrow,
  .metronome-card.p03c-closed h3,
  .embedded-zonebeat-card.p03c-closed h3 {
    color: var(--text) !important;
    display: block !important;
    flex: 1 1 auto !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .p03c-timing-toggle {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    height: 1.32rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.32rem !important;
    padding: 0.15rem 0.52rem !important;
    width: auto !important;
  }

  /* Opened controls stay compact, with header on one line and controls underneath. */
  .countdown-card.p03c-open,
  .compact-countdown-card.p03c-open,
  .metronome-card.p03c-open,
  .embedded-zonebeat-card.p03c-open {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin-top: 0.32rem !important;
    overflow: hidden !important;
    padding: 0.34rem 0.45rem !important;
  }
  .countdown-card.p03c-open .countdown-left,
  .compact-countdown-card.p03c-open .countdown-left,
  .metronome-card.p03c-open .zonebeat-header,
  .embedded-zonebeat-card.p03c-open .zonebeat-header {
    align-items: center !important;
    display: flex !important;
    flex: 1 0 100% !important;
    gap: 0.4rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .countdown-card.p03c-open .eyebrow,
  .compact-countdown-card.p03c-open .eyebrow,
  .metronome-card.p03c-open h3,
  .embedded-zonebeat-card.p03c-open h3 {
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .countdown-card.p03c-open .countdown-display,
  .compact-countdown-card.p03c-open .countdown-display {
    align-items: baseline !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0.25rem !important;
  }
  .countdown-card.p03c-open .timer-config,
  .compact-countdown-card.p03c-open .timer-config {
    flex: 0 0 3.2rem !important;
    max-width: 3.2rem !important;
  }
  .countdown-card.p03c-open .timer-presets,
  .countdown-card.p03c-open .countdown-actions,
  .compact-countdown-card.p03c-open .timer-presets,
  .compact-countdown-card.p03c-open .countdown-actions,
  .metronome-card.p03c-open .timing-start-stop,
  .embedded-zonebeat-card.p03c-open .timing-start-stop {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.16rem !important;
  }
  .countdown-card.p03c-open button,
  .compact-countdown-card.p03c-open button,
  .metronome-card.p03c-open button,
  .embedded-zonebeat-card.p03c-open button {
    font-size: 0.66rem !important;
    min-height: 1.38rem !important;
    padding: 0.18rem 0.34rem !important;
    width: auto !important;
  }
  .metronome-card.p03c-open .timing-mode-row,
  .embedded-zonebeat-card.p03c-open .timing-mode-row,
  .metronome-card.p03c-open .timing-strip-controls,
  .embedded-zonebeat-card.p03c-open .timing-strip-controls {
    display: flex !important;
    flex: 1 0 100% !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
  }
  .metronome-card.p03c-open .timing-select-label,
  .embedded-zonebeat-card.p03c-open .timing-select-label {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .metronome-card.p03c-open .timing-select-label select,
  .embedded-zonebeat-card.p03c-open .timing-select-label select {
    max-width: none !important;
    width: 100% !important;
  }

  .current-item-elapsed-pill {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.55rem !important;
    background: rgba(23, 32, 51, 0.08) !important;
    border: 1px solid rgba(23, 32, 51, 0.08) !important;
    border-radius: 999px !important;
    color: var(--muted) !important;
    display: inline-flex !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    padding: 0.16rem 0.45rem !important;
    z-index: 1 !important;
  }
  .hero-current { position: relative !important; }

  /* Setup should feel like a choice screen, not a long blank page. */
  .setup-screen {
    min-height: auto !important;
    padding-bottom: 0.75rem !important;
  }

  .restore-confirm-card {
    max-width: min(92vw, 560px) !important;
    min-width: min(92vw, 340px) !important;
  }
  .restore-confirm-card .modal-header {
    display: block !important;
  }
  #restoreConfirmTitle {
    white-space: normal !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
  }
  #restoreConfirmCancelTopButton {
    display: none !important;
  }
}

@media (min-width: 721px) {
  /* Desktop mode toggle should not jump horizontally when Flow tools become visible. */
  .dashboard-mode-bar {
    justify-content: space-between !important;
    min-width: 420px !important;
  }
  .dashboard-mode-buttons {
    flex: 0 0 auto !important;
  }
  .mode-tool-strip {
    min-width: 210px !important;
  }
}

/* P03D true mobile timing strip visual repair */
@media (max-width: 720px) {
  .p03d-closed-strip {
    align-items: center !important;
    background: rgba(248, 250, 252, 0.96) !important;
    border: 1px solid rgba(100, 112, 132, 0.24) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    min-height: 2.05rem !important;
    padding: 0.34rem 0.5rem !important;
    width: 100% !important;
  }

  .p03d-closed-title {
    display: block !important;
    flex: 1 1 auto !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .p03d-open-button,
  .p03d-hide-button {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    height: 1.5rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.5rem !important;
    padding: 0.18rem 0.62rem !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  .p03d-timing-card.p03d-closed {
    display: block !important;
    margin-top: 0.36rem !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .p03d-timing-card.p03d-closed > :not(.p03d-closed-strip) {
    display: none !important;
  }

  .p03d-timing-card.p03d-closed > .p03d-closed-strip {
    display: flex !important;
  }

  .p03d-timing-card.p03d-open > .p03d-closed-strip {
    display: none !important;
  }

  .p03d-timing-card.p03d-open {
    align-items: center !important;
    display: grid !important;
    gap: 0.32rem !important;
    margin-top: 0.36rem !important;
    overflow: hidden !important;
    padding: 0.48rem 0.55rem !important;
  }

  .compact-countdown-card.p03d-open,
  .countdown-card.p03d-open {
    grid-template-columns: 1fr !important;
  }

  .p03d-timing-card.p03d-open .p03c-timing-toggle,
  .p03d-timing-card.p03d-open .p03b-timing-toggle,
  .p03d-timing-card.p03d-open .p03a-timing-toggle,
  .p03d-timing-card.p03d-open .zb-mobile-timer-toggle,
  .p03d-timing-card.p03d-open .zb-mobile-metronome-toggle {
    display: none !important;
  }

  .p03d-timing-card.p03d-open .countdown-left,
  .p03d-timing-card.p03d-open .zonebeat-header,
  .p03d-timing-card.p03d-open .tool-card-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .p03d-timing-card.p03d-open .countdown-left .eyebrow,
  .p03d-timing-card.p03d-open .zonebeat-header h3,
  .p03d-timing-card.p03d-open .tool-card-header h3 {
    color: var(--text) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .p03d-timing-card.p03d-open .countdown-left .eyebrow::before,
  .p03d-timing-card.p03d-open .zonebeat-header .eyebrow,
  .p03d-timing-card.p03d-open .metronome-inline-status {
    display: none !important;
  }

  .p03d-timer-card.p03d-open .countdown-left {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    gap: 0.35rem !important;
    justify-content: start !important;
  }

  .p03d-timer-card.p03d-open .countdown-display {
    align-items: baseline !important;
    display: inline-flex !important;
    gap: 0.28rem !important;
  }

  .p03d-timer-card.p03d-open .countdown-display span:first-child {
    font-size: 1.08rem !important;
    line-height: 1 !important;
  }

  .p03d-timer-card.p03d-open .countdown-display span:last-child {
    font-size: 0.58rem !important;
  }

  .p03d-timer-card.p03d-open .timer-config {
    display: inline-grid !important;
    flex: 0 0 auto !important;
    max-width: 3.2rem !important;
    width: 3.2rem !important;
  }

  .p03d-timer-card.p03d-open .timer-config label {
    display: none !important;
  }

  .p03d-timer-card.p03d-open .timer-config input {
    font-size: 0.78rem !important;
    min-height: 1.55rem !important;
    padding: 0.16rem 0.28rem !important;
  }

  .p03d-timer-card.p03d-open .timer-presets,
  .p03d-timer-card.p03d-open .countdown-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.16rem !important;
  }

  .p03d-timer-card.p03d-open .timer-presets button,
  .p03d-timer-card.p03d-open .countdown-actions button {
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    min-height: 1.55rem !important;
    min-width: 1.55rem !important;
    padding: 0.18rem 0.42rem !important;
    width: auto !important;
  }

  .p03d-timer-card.p03d-open .timer-checkbox {
    display: none !important;
  }

  .p03d-metronome-card.p03d-open .zonebeat-header,
  .p03d-metronome-card.p03d-open .tool-card-header {
    display: flex !important;
  }

  .p03d-metronome-card.p03d-open .compact-metronome-header-controls {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0.22rem !important;
  }

  .p03d-metronome-card.p03d-open .metronome-header-bpm {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    gap: 0.2rem !important;
  }

  .p03d-metronome-card.p03d-open .metronome-header-bpm input {
    font-size: 0.72rem !important;
    max-width: 3.15rem !important;
    min-height: 1.45rem !important;
    padding: 0.12rem 0.22rem !important;
  }

  .p03d-metronome-card.p03d-open .timing-start-stop button {
    font-size: 0.66rem !important;
    min-height: 1.38rem !important;
    padding: 0.16rem 0.34rem !important;
    width: auto !important;
  }

  .p03d-metronome-card.p03d-open .timing-mode-row {
    align-items: end !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .p03d-metronome-card.p03d-open .timing-select-label {
    display: grid !important;
    font-size: 0.62rem !important;
    gap: 0.18rem !important;
    width: 100% !important;
  }

  .p03d-metronome-card.p03d-open .timing-select-label select {
    font-size: 0.78rem !important;
    min-height: 1.65rem !important;
    padding: 0.16rem 0.32rem !important;
    width: 100% !important;
  }

  .p03d-metronome-card.p03d-open .timing-strip-controls,
  .p03d-metronome-card.p03d-open .metronome-controls {
    display: none !important;
  }

  .dashboard-tool-launcher .tool-launcher-note {
    min-height: 2.2rem !important;
    overflow: hidden !important;
    contain: layout style !important;
  }
}

/* P03E timing strip/color polish -------------------------------------------------
   True one-line closed strips, compact open controls, stable tool helper,
   and warm timing-card color accents inspired by the amber/soft-green references. */
.dashboard-tool-launcher .tool-launcher-note,
body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-launcher-note,
body[data-dashboard-mode="essentials"] .dashboard-tool-launcher .tool-launcher-note {
  min-height: 2.05rem !important;
  max-height: 2.05rem !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  display: block !important;
  visibility: visible !important;
  white-space: normal !important;
}
.dashboard-tool-launcher .tool-launcher-note::before,
body[data-dashboard-mode="flow"] .dashboard-tool-launcher .tool-launcher-note::before,
body[data-dashboard-mode="essentials"] .dashboard-tool-launcher .tool-launcher-note::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px) {
  .practice-dashboard {
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248, 255, 250, 0.90)) !important;
  }

  .p03e-timing-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .p03e-strip {
    align-items: center !important;
    border: 1px solid rgba(100, 112, 132, 0.23) !important;
    border-radius: 16px !important;
    display: flex !important;
    gap: 0.55rem !important;
    justify-content: space-between !important;
    min-height: 2.05rem !important;
    padding: 0.34rem 0.48rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .p03e-metronome-strip,
  .p03e-metronome-card.p03e-open {
    background: linear-gradient(135deg, #fff5df, rgba(255, 250, 240, 0.94)) !important;
    border-color: rgba(196, 127, 43, 0.28) !important;
  }

  .p03e-timer-strip,
  .p03e-timer-card.p03e-open {
    background: linear-gradient(135deg, #eefaf1, rgba(248, 255, 250, 0.96)) !important;
    border-color: rgba(116, 170, 132, 0.28) !important;
  }

  .p03e-strip-title {
    color: var(--text) !important;
    display: block !important;
    flex: 1 1 auto !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .p03e-strip-open,
  .p03e-hide-button {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    height: 1.55rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.55rem !important;
    padding: 0.18rem 0.64rem !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  .p03e-timing-card.p03e-closed {
    display: block !important;
    margin-top: 0.34rem !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .p03e-timing-card.p03e-closed > :not(.p03e-strip) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  .p03e-timing-card.p03e-closed > .p03e-strip {
    display: flex !important;
    visibility: visible !important;
  }

  .p03e-timing-card.p03e-open > .p03e-strip {
    display: none !important;
  }

  .p03e-timing-card.p03e-open {
    border-radius: 16px !important;
    display: grid !important;
    gap: 0.34rem !important;
    margin-top: 0.34rem !important;
    overflow: hidden !important;
    padding: 0.48rem 0.55rem !important;
  }

  /* Timer open: two compact rows max. */
  .p03e-timer-card.p03e-open {
    grid-template-columns: 1fr !important;
  }

  .p03e-timer-card.p03e-open .countdown-left {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .p03e-timer-card.p03e-open .countdown-left .eyebrow {
    color: var(--text) !important;
    font-size: 0.93rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .p03e-timer-card.p03e-open .countdown-display {
    align-items: baseline !important;
    display: inline-flex !important;
    gap: 0.2rem !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  .p03e-timer-card.p03e-open .countdown-display span:first-child {
    font-size: 1.06rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .p03e-timer-card.p03e-open .countdown-display span:last-child {
    display: none !important;
  }

  .p03e-timer-card.p03e-open .p03e-hide-button {
    grid-column: 4 !important;
    justify-self: end !important;
  }

  .p03e-timer-card.p03e-open .timer-config {
    display: inline-grid !important;
    grid-column: 3 !important;
    justify-self: end !important;
    max-width: 3.05rem !important;
    width: 3.05rem !important;
  }

  .p03e-timer-card.p03e-open .timer-config label {
    display: none !important;
  }

  .p03e-timer-card.p03e-open .timer-config input {
    font-size: 0.78rem !important;
    min-height: 1.5rem !important;
    padding: 0.14rem 0.24rem !important;
    text-align: center !important;
  }

  .p03e-timer-card.p03e-open .timer-presets,
  .p03e-timer-card.p03e-open .countdown-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    width: auto !important;
  }

  .p03e-timer-card.p03e-open .timer-presets {
    grid-row: 2 !important;
  }

  .p03e-timer-card.p03e-open .countdown-actions {
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .p03e-timer-card.p03e-open .timer-presets button {
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    min-height: 1.65rem !important;
    min-width: 1.65rem !important;
    padding: 0.18rem 0.28rem !important;
    width: auto !important;
  }

  .p03e-timer-card.p03e-open .countdown-actions button {
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    min-height: 1.65rem !important;
    padding: 0.18rem 0.54rem !important;
    width: auto !important;
  }

  .p03e-timer-card.p03e-open .timer-checkbox {
    display: none !important;
  }

  /* Metronome open: remove duplicate labels and keep one compact title row + one settings row. */
  .p03e-metronome-card.p03e-open .zonebeat-header,
  .p03e-metronome-card.p03e-open .tool-card-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    gap: 0.32rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .p03e-metronome-card.p03e-open .zonebeat-header > div:first-child,
  .p03e-metronome-card.p03e-open .tool-card-header > div:first-child {
    display: contents !important;
  }

  .p03e-metronome-card.p03e-open .zonebeat-header .eyebrow,
  .p03e-metronome-card.p03e-open .metronome-inline-status {
    display: none !important;
  }

  .p03e-metronome-card.p03e-open .zonebeat-header h3,
  .p03e-metronome-card.p03e-open .tool-card-header h3 {
    color: var(--text) !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .p03e-metronome-card.p03e-open .compact-metronome-header-controls {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.22rem !important;
    justify-self: end !important;
  }

  .p03e-metronome-card.p03e-open .metronome-header-bpm {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.62rem !important;
    gap: 0.18rem !important;
  }

  .p03e-metronome-card.p03e-open .metronome-header-bpm input {
    font-size: 0.72rem !important;
    max-width: 3.15rem !important;
    min-height: 1.45rem !important;
    padding: 0.12rem 0.22rem !important;
  }

  .p03e-metronome-card.p03e-open .timing-start-stop {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.16rem !important;
  }

  .p03e-metronome-card.p03e-open .timing-start-stop button {
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    min-height: 1.42rem !important;
    padding: 0.16rem 0.36rem !important;
    width: auto !important;
  }

  .p03e-metronome-card.p03e-open .p03e-hide-button {
    justify-self: end !important;
  }

  .p03e-metronome-card.p03e-open .timing-mode-row {
    align-items: end !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .p03e-metronome-card.p03e-open .timing-select-label {
    display: grid !important;
    font-size: 0.62rem !important;
    gap: 0.16rem !important;
    width: 100% !important;
  }

  .p03e-metronome-card.p03e-open .timing-select-label select {
    font-size: 0.78rem !important;
    min-height: 1.65rem !important;
    padding: 0.16rem 0.32rem !important;
    width: 100% !important;
  }

  .p03e-metronome-card.p03e-open .timing-strip-controls,
  .p03e-metronome-card.p03e-open .metronome-controls {
    display: none !important;
  }

  /* Keep page bottom from showing gray when both timing panels are closed. */
  body[data-current-screen="dashboard"],
  body[data-current-screen="dashboard"] {
    background: linear-gradient(180deg, #fbfcff, #f1fbf4) !important;
  }
}


/* P03H timing reset/header/BPM corrective pass */
:root {
  --zb-timer-soft: #f3eefb;
  --zb-timer-soft-border: rgba(128, 90, 168, 0.24);
  --zb-metronome-soft: #fff4df;
  --zb-metronome-soft-border: rgba(196, 127, 43, 0.30);
  --zb-app-soft-bg: #f3f5f0;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 214, 153, 0.20), transparent 24rem),
    linear-gradient(135deg, #f5f6f1 0%, #edf2ea 100%) !important;
}

.p03g-tool-note,
.dashboard-tool-launcher .tool-launcher-note.p03g-tool-note {
  display: block !important;
  min-height: 1.4rem !important;
  max-height: 1.4rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  font-size: 0.78rem !important;
  margin: 0.2rem 0 0 !important;
  visibility: visible !important;
}

.pwa-update-status {
  align-items: center !important;
}
.p03g-update-button,
.pwa-reload-button.p03g-update-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.45rem !important;
  height: 1.45rem !important;
  padding: 0.14rem 0.48rem !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}
.header-backup-export-button.p03g-backup-button,
.backup-health-button.p03g-backup-button {
  align-self: center !important;
  transform: translateY(-1px) !important;
  min-height: 1.65rem !important;
  padding-top: 0.22rem !important;
  padding-bottom: 0.22rem !important;
}

.current-item-elapsed-pill {
  position: absolute !important;
  top: 0.55rem !important;
  right: 0.65rem !important;
  border: 1px solid rgba(23, 32, 51, 0.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.78) !important;
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  padding: 0.18rem 0.45rem !important;
  z-index: 3 !important;
}
.hero-current, .current-item { position: relative !important; }

@media (max-width: 720px) {
  html, body {
    min-height: 100dvh !important;
    overscroll-behavior-y: none !important;
  }
  body[data-current-screen="dashboard"] {
    overflow: hidden !important;
  }
  .app-shell {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom)) !important;
  }
  .practice-dashboard {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247, 252, 246, 0.94)) !important;
  }

  .app-header.header-with-nav {
    align-items: start !important;
  }
  .header-right {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.26rem !important;
  }
  .pwa-update-status,
  .backup-health-button.p03g-backup-button {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .backup-health-button.p03g-backup-button {
    font-size: 0.68rem !important;
    min-width: auto !important;
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
  }

  .p03g-timing-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0.36rem !important;
  }
  .p03g-strip {
    align-items: center !important;
    border-radius: 16px !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
    min-height: 2.05rem !important;
    padding: 0.32rem 0.48rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .p03g-metronome-strip,
  .p03g-metronome-card.p03g-open {
    background: linear-gradient(135deg, var(--zb-metronome-soft), rgba(255, 250, 241, 0.97)) !important;
    border: 1px solid var(--zb-metronome-soft-border) !important;
  }
  .p03g-timer-strip,
  .p03g-timer-card.p03g-open {
    background: linear-gradient(135deg, var(--zb-timer-soft), rgba(251, 249, 255, 0.97)) !important;
    border: 1px solid var(--zb-timer-soft-border) !important;
  }
  .p03g-strip-title {
    color: var(--text) !important;
    flex: 1 1 auto !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .p03g-open-button,
  .p03g-hide-button {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    height: 1.55rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.55rem !important;
    padding: 0.18rem 0.62rem !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .p03g-timing-card.p03g-closed {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .p03g-timing-card.p03g-closed > :not(.p03g-strip) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }
  .p03g-timing-card.p03g-closed > .p03g-strip {
    display: flex !important;
    visibility: visible !important;
  }
  .p03g-timing-card.p03g-open > .p03g-strip {
    display: none !important;
  }
  .p03g-timing-card.p03g-open {
    border-radius: 16px !important;
    display: grid !important;
    gap: 0.34rem !important;
    overflow: hidden !important;
    padding: 0.48rem 0.55rem !important;
  }

  /* Open countdown = compact title/action row + compact controls row. */
  .p03g-timer-card.p03g-open .countdown-left {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    gap: 0.34rem !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .p03g-timer-card.p03g-open .countdown-left .eyebrow {
    color: var(--text) !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
  .p03g-timer-card.p03g-open .countdown-display {
    align-items: baseline !important;
    display: inline-flex !important;
    gap: 0.18rem !important;
  }
  .p03g-timer-card.p03g-open .countdown-display span:first-child {
    font-size: 1.08rem !important;
    line-height: 1 !important;
  }
  .p03g-timer-card.p03g-open .countdown-display span:last-child { display: none !important; }
  .p03g-timer-card.p03g-open .timer-config {
    display: inline-grid !important;
    justify-self: end !important;
    max-width: 3.1rem !important;
    width: 3.1rem !important;
  }
  .p03g-timer-card.p03g-open .timer-config label { display: none !important; }
  .p03g-timer-card.p03g-open .timer-config input {
    font-size: 0.78rem !important;
    min-height: 1.52rem !important;
    padding: 0.14rem 0.24rem !important;
    text-align: center !important;
  }
  .p03g-timer-card.p03g-open .timer-presets,
  .p03g-timer-card.p03g-open .countdown-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    width: auto !important;
  }
  .p03g-timer-card.p03g-open .timer-presets button {
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    min-height: 1.72rem !important;
    min-width: 1.72rem !important;
    padding: 0.18rem 0.28rem !important;
    width: auto !important;
  }
  .p03g-timer-card.p03g-open .countdown-actions button {
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    min-height: 1.65rem !important;
    padding: 0.18rem 0.46rem !important;
    width: auto !important;
  }
  .p03g-timer-card.p03g-open .timer-checkbox { display: none !important; }

  /* Open metronome = one compact title/action row + one compact settings row. */
  .p03g-metronome-card.p03g-open .zonebeat-header,
  .p03g-metronome-card.p03g-open .tool-card-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 0.32rem !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .p03g-metronome-card.p03g-open .zonebeat-header > div:first-child,
  .p03g-metronome-card.p03g-open .tool-card-header > div:first-child { display: contents !important; }
  .p03g-metronome-card.p03g-open .zonebeat-header .eyebrow,
  .p03g-metronome-card.p03g-open .metronome-inline-status { display: none !important; }
  .p03g-metronome-card.p03g-open .zonebeat-header h3,
  .p03g-metronome-card.p03g-open .tool-card-header h3 {
    color: var(--text) !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .p03g-metronome-card.p03g-open .compact-metronome-header-controls {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.22rem !important;
    justify-self: end !important;
  }
  .p03g-metronome-card.p03g-open .metronome-header-bpm {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.62rem !important;
    gap: 0.16rem !important;
  }
  .p03g-metronome-card.p03g-open .metronome-header-bpm input {
    font-size: 0.72rem !important;
    max-width: 3.15rem !important;
    min-height: 1.45rem !important;
    padding: 0.12rem 0.22rem !important;
  }
  .p03g-metronome-card.p03g-open .timing-start-stop {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.16rem !important;
  }
  .p03g-metronome-card.p03g-open .timing-start-stop button {
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    min-height: 1.42rem !important;
    padding: 0.16rem 0.36rem !important;
    width: auto !important;
  }
  .p03g-metronome-card.p03g-open .timing-mode-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.34rem !important;
    width: 100% !important;
  }
  .p03g-metronome-card.p03g-open .timing-select-label {
    display: grid !important;
    font-size: 0.62rem !important;
    gap: 0.16rem !important;
    width: 100% !important;
  }
  .p03g-metronome-card.p03g-open .timing-select-label select {
    font-size: 0.78rem !important;
    min-height: 1.65rem !important;
    padding: 0.16rem 0.32rem !important;
    width: 100% !important;
  }
  .p03g-metronome-card.p03g-open .timing-strip-controls,
  .p03g-metronome-card.p03g-open .metronome-controls { display: none !important; }

  /* Hide the older generated timing variants if they survive briefly. */
  .p03e-strip, .p03d-closed-strip, .p03f-strip,
  .p03a-timing-toggle, .p03b-timing-toggle, .p03c-timing-toggle,
  .p03d-hide-button, .p03e-hide-button, .p03f-hide-button,
  .zb-mobile-timer-toggle, .zb-mobile-metronome-toggle {
    display: none !important;
  }
}


/* P03H timing stabilization + soft theme reset */
:root {
  --zb-app-soft-bg: #f3f4ef;
  --zb-card-soft: rgba(255, 255, 255, 0.88);
  --zb-metronome-amber: #fff2d9;
  --zb-metronome-amber-border: rgba(197, 133, 50, 0.34);
  --zb-timer-lavender: #f3eefc;
  --zb-timer-lavender-border: rgba(139, 92, 246, 0.22);
  --zb-queue-green: #eefbf3;
  --zb-queue-green-border: rgba(87, 171, 122, 0.28);
}
body {
  background:
    radial-gradient(circle at 18% 10%, rgba(217, 229, 210, 0.52), transparent 26rem),
    linear-gradient(135deg, #eef1ea 0%, var(--zb-app-soft-bg) 100%) !important;
}
.card,
.practice-dashboard,
.current-item {
  background: var(--zb-card-soft) !important;
}

/* Keep tool helper steady; do not allow reflow/flicker. */
.dashboard-tool-launcher .p03h-tool-note,
.dashboard-tool-launcher .tool-launcher-note.p03h-tool-note {
  display: block !important;
  min-height: 1.65rem !important;
  margin: 0.3rem 0 0 !important;
  padding: 0.38rem 0.55rem !important;
  border: 1px dashed rgba(100,112,132,0.20) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.58) !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Header/update visibility */
.p03h-update-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
.p03h-update-button,
.pwa-reload-button.p03h-update-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.75rem !important;
  padding: 0.28rem 0.58rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  background: #eef2ff !important;
  color: var(--primary) !important;
  width: auto !important;
}
.backup-health-button.p03h-backup-button,
.header-backup-export-button.p03h-backup-button {
  align-self: center !important;
  transform: translateY(-1px) !important;
}

/* Timing cards: remove experimental leftovers. */
.p03h-timing-card .p03a-timing-toggle,
.p03h-timing-card .p03b-timing-toggle,
.p03h-timing-card .p03c-timing-toggle,
.p03h-timing-card .p03d-closed-strip,
.p03h-timing-card .p03e-strip,
.p03h-timing-card .p03f-strip,
.p03h-timing-card .p03g-strip,
.p03h-timing-card .p03d-hide-button,
.p03h-timing-card .p03e-hide-button,
.p03h-timing-card .p03f-hide-button,
.p03h-timing-card .p03g-hide-button,
.p03h-timing-card .zb-mobile-timer-toggle,
.p03h-timing-card .zb-mobile-metronome-toggle {
  display: none !important;
}

.p03h-timing-card {
  box-shadow: none !important;
  overflow: hidden !important;
  transition: none !important;
}
.p03h-metronome-card {
  background: linear-gradient(135deg, var(--zb-metronome-amber), rgba(255, 251, 244, 0.96)) !important;
  border: 1px solid var(--zb-metronome-amber-border) !important;
}
.p03h-timer-card {
  background: linear-gradient(135deg, var(--zb-timer-lavender), rgba(255, 255, 255, 0.95)) !important;
  border: 1px solid var(--zb-timer-lavender-border) !important;
}
.main-queue-panel,
.queue-panel.main-queue-panel {
  background: linear-gradient(135deg, var(--zb-queue-green), rgba(255,255,255,0.94)) !important;
  border-color: var(--zb-queue-green-border) !important;
}

.p03h-strip {
  align-items: center !important;
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 2.25rem !important;
  padding: 0.22rem 0.22rem 0.22rem 0.1rem !important;
}
.p03h-strip-title {
  color: var(--text) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.p03h-strip-open,
.p03h-hide-button {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  min-height: 1.8rem !important;
  padding: 0.34rem 0.7rem !important;
  width: auto !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .app-shell {
    background: rgba(255,255,255,0.06) !important;
  }
  .pwa-update-status.p03h-update-status {
    display: inline-flex !important;
  }
  .pwa-update-status.p03h-update-status #pwaUpdateMessage {
    display: none !important;
  }
  .pwa-update-status.p03h-update-status #pwaVersionLabel {
    display: none !important;
  }
  .pwa-reload-button.p03h-update-button {
    display: inline-flex !important;
  }

  .p03h-timing-card {
    display: block !important;
    margin-top: 0.42rem !important;
    padding: 0.62rem 0.72rem !important;
    border-radius: 18px !important;
    min-height: 0 !important;
  }
  .p03h-timing-card.p03h-closed {
    padding: 0.48rem 0.72rem !important;
  }
  .p03h-timing-card.p03h-closed > :not(.p03h-strip) {
    display: none !important;
  }
  .p03h-timing-card.p03h-closed > .p03h-strip {
    display: flex !important;
  }
  .p03h-timing-card.p03h-open > .p03h-strip {
    display: none !important;
  }

  /* Open timer = two compact rows. */
  .p03h-timer-card.p03h-open {
    display: grid !important;
    gap: 0.45rem !important;
  }
  .p03h-timer-card.p03h-open .countdown-left {
    align-items: center !important;
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-columns: auto auto 1fr auto !important;
    min-width: 0 !important;
  }
  .p03h-timer-card.p03h-open .countdown-left .eyebrow {
    color: var(--text) !important;
    font-size: 0.96rem !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
  .p03h-timer-card.p03h-open .countdown-display {
    align-items: baseline !important;
    display: inline-flex !important;
    gap: 0.25rem !important;
  }
  .p03h-timer-card.p03h-open #countdownDisplay {
    font-size: 1.35rem !important;
    font-weight: 950 !important;
  }
  .p03h-timer-card.p03h-open #countdownStatus {
    font-size: 0.62rem !important;
  }
  .p03h-timer-card.p03h-open .p03h-timer-hide {
    justify-self: end !important;
  }
  .p03h-timer-card.p03h-open .timer-config {
    align-self: center !important;
    justify-self: end !important;
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
    max-width: 4rem !important;
  }
  .p03h-timer-card.p03h-open .timer-config input {
    min-height: 1.85rem !important;
    padding: 0.2rem 0.45rem !important;
    text-align: center !important;
  }
  .p03h-timer-card.p03h-open .timer-config label {
    display: none !important;
  }
  .p03h-timer-card.p03h-open .timer-presets,
  .p03h-timer-card.p03h-open .countdown-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
  }
  .p03h-timer-card.p03h-open .timer-presets {
    float: left !important;
  }
  .p03h-timer-card.p03h-open .timer-preset {
    border-radius: 999px !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.88rem !important;
  }
  .p03h-timer-card.p03h-open .countdown-actions button {
    border-radius: 999px !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.62rem !important;
    font-size: 0.86rem !important;
  }
  .p03h-timer-card.p03h-open .timer-checkbox {
    display: none !important;
  }

  /* Open metronome = compact title/action row + sound/pattern row. */
  .p03h-metronome-card.p03h-open {
    display: grid !important;
    gap: 0.48rem !important;
  }
  .p03h-metronome-card.p03h-open .zonebeat-header,
  .p03h-metronome-card.p03h-open .tool-card-header {
    align-items: center !important;
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: auto 1fr auto !important;
    margin: 0 !important;
  }
  .p03h-metronome-card.p03h-open .zonebeat-header > div:first-child,
  .p03h-metronome-card.p03h-open .tool-card-header > div:first-child {
    display: contents !important;
  }
  .p03h-metronome-card.p03h-open .zonebeat-header .eyebrow,
  .p03h-metronome-card.p03h-open .metronome-inline-status {
    display: none !important;
  }
  .p03h-metronome-card.p03h-open h3 {
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .p03h-metronome-card.p03h-open .compact-metronome-header-controls {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.26rem !important;
    justify-self: end !important;
  }
  .p03h-metronome-card.p03h-open .metronome-header-bpm {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.68rem !important;
    gap: 0.22rem !important;
  }
  .p03h-metronome-card.p03h-open .metronome-header-bpm input {
    max-width: 3.4rem !important;
    min-height: 1.75rem !important;
    padding: 0.18rem 0.3rem !important;
  }
  .p03h-metronome-card.p03h-open .timing-start-stop {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
  }
  .p03h-metronome-card.p03h-open .timing-start-stop button {
    min-height: 1.75rem !important;
    padding: 0.28rem 0.55rem !important;
  }
  .p03h-metronome-card.p03h-open .p03h-metronome-hide {
    justify-self: end !important;
  }
  .p03h-metronome-card.p03h-open .timing-mode-row {
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .p03h-metronome-card.p03h-open .timing-select-label {
    display: grid !important;
    gap: 0.15rem !important;
    font-size: 0.68rem !important;
  }
  .p03h-metronome-card.p03h-open .timing-select-label select {
    width: 100% !important;
    max-width: none !important;
    min-height: 2rem !important;
    font-size: 0.82rem !important;
  }
  .p03h-metronome-card.p03h-open .timing-strip-controls,
  .p03h-metronome-card.p03h-open .metronome-controls {
    display: none !important;
  }
}

@media (min-width: 761px) {
  .p03h-timing-card > .p03h-strip,
  .p03h-hide-button {
    display: none !important;
  }
  .p03h-timing-card {
    min-height: 0 !important;
  }
  .p03h-metronome-card {
    padding: 0.7rem !important;
  }
  .p03h-timer-card {
    padding: 0.55rem 0.7rem !important;
  }
  .p03h-metronome-card .zonebeat-header,
  .p03h-metronome-card .tool-card-header {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
  }
  .p03h-metronome-card .timing-mode-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.45rem !important;
  }
  .p03h-timer-card {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
  }
}

/* P03R Timing Component Reset + header/reference cleanup */
:root {
  --zb-app-wash-p03i: #f4f5ef;
  --zb-metronome-amber-p03i: #fff1d8;
  --zb-metronome-amber-border-p03i: rgba(199, 132, 42, 0.36);
  --zb-timer-lavender-p03i: #f7f0ff;
  --zb-timer-lavender-border-p03i: rgba(151, 104, 205, 0.28);
  --zb-queue-green-p03i: #f0fff8;
}

body {
  background: linear-gradient(135deg, #f7f8f4 0%, var(--zb-app-wash-p03i) 100%) !important;
}

/* Keep update visible during active testing. */
#pwaReloadButton,
.pwa-reload-button,
.p03i-update-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pwa-update-status {
  align-items: center !important;
  display: inline-flex !important;
  gap: 0.35rem !important;
}

.header-right,
.mobile-top-badges,
.brand-header .header-right {
  align-items: center !important;
}

.backup-health-button,
.p03h-backup-button,
.p03i-backup-button {
  align-self: center !important;
  transform: translateY(-1px) !important;
}

/* Hide the old accumulated timing markup. P03R creates clean replacement controls. */
.compact-countdown-card.zb-p03i-original-hidden,
.countdown-card.zb-p03i-original-hidden,
.embedded-zonebeat-card.zb-p03i-original-hidden,
.metronome-card.zb-p03i-original-hidden {
  display: none !important;
}

.p03i-timing-card {
  border-radius: 18px;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.58rem;
  overflow: hidden;
  padding: 0.72rem 0.85rem;
}

.p03i-metronome-card {
  background: linear-gradient(135deg, var(--zb-metronome-amber-p03i), rgba(255,250,241,0.98));
  border: 1px solid var(--zb-metronome-amber-border-p03i);
}

.p03i-timer-card {
  background: linear-gradient(135deg, var(--zb-timer-lavender-p03i), rgba(255,255,255,0.96));
  border: 1px solid var(--zb-timer-lavender-border-p03i);
}

.p03i-timing-strip {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  min-height: 2.7rem;
}

.p03i-timing-strip strong,
.p03i-timing-title {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.p03i-tool-button {
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  min-height: 2.15rem !important;
  padding: 0.36rem 0.78rem !important;
  white-space: nowrap !important;
  width: auto !important;
}

.p03i-timing-card.is-closed .p03i-open-body { display: none !important; }
.p03i-timing-card.is-open .p03i-closed-strip { display: none !important; }

.p03i-timing-open-header {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  min-width: 0;
}

.p03i-timer-display {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.p03i-status {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.p03i-timer-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.p03i-presets {
  align-items: center;
  display: inline-flex;
  gap: 0.28rem;
}

.p03i-preset {
  background: rgba(255,255,255,0.58) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: 0.92rem !important;
  min-height: 2.05rem !important;
  min-width: 2.05rem !important;
  padding: 0.2rem 0.45rem !important;
  width: auto !important;
}

.p03i-preset.is-selected {
  background: var(--primary) !important;
  color: white !important;
}

.p03i-number-input,
.p03i-bpm-input {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 850;
  max-width: 4.2rem;
  min-height: 2.1rem;
  padding: 0.28rem 0.55rem;
  text-align: center;
  width: 4.2rem;
}

.p03i-action-row {
  align-items: center;
  display: inline-flex;
  gap: 0.32rem;
}

.p03i-action-row button {
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  min-height: 2.05rem !important;
  padding: 0.34rem 0.75rem !important;
  width: auto !important;
}

.p03i-metronome-grid {
  align-items: end;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto auto minmax(120px, 1fr) minmax(150px, 1fr);
}

.p03i-field {
  display: grid;
  gap: 0.22rem;
}

.p03i-field label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p03i-field select {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  min-height: 2.1rem;
  padding: 0.3rem 0.55rem;
  width: 100%;
}

/* Desktop Flow: metronome + references sit side by side. */
@media (min-width: 861px) {
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.75rem !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr) !important;
  }

  .timing-support-row .p03i-metronome-card {
    margin-top: 0 !important;
  }

  .timing-support-row .reference-context-box {
    display: grid !important;
    min-height: 100% !important;
    margin-top: 0 !important;
  }

  .p03i-timer-card {
    padding: 0.45rem 0.65rem !important;
  }

  .p03i-timer-card .p03i-open-body,
  .p03i-timer-card .p03i-timer-body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
}

/* Phone app: one-line closed tools, compact open controls. */
@media (max-width: 760px) {
  .brand-block h1,
  .compact-brand-header h1 {
    font-size: 1.34rem !important;
  }

  .app-header,
  .header-with-nav {
    background: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(100,112,132,0.12);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pwa-update-status {
    gap: 0.2rem !important;
  }

  #pwaUpdateMessage,
  #pwaVersionLabel {
    display: none !important;
  }

  #pwaReloadButton {
    display: inline-flex !important;
    font-size: 0.78rem !important;
    padding: 0.26rem 0.5rem !important;
  }

  .backup-health-button {
    font-size: 0.78rem !important;
    min-width: auto !important;
    padding: 0.32rem 0.58rem !important;
  }

  .p03i-timing-card {
    border-radius: 16px;
    margin-top: 0.5rem;
    padding: 0.58rem 0.68rem;
  }

  .p03i-timing-card.is-closed {
    padding: 0.46rem 0.62rem;
  }

  .p03i-timing-card.is-closed .p03i-timing-strip {
    min-height: 2.2rem;
  }

  .p03i-timing-strip strong,
  .p03i-timing-title {
    font-size: 0.94rem;
  }

  .p03i-tool-button {
    font-size: 0.82rem !important;
    min-height: 1.95rem !important;
    padding: 0.28rem 0.68rem !important;
  }

  .p03i-timing-open-header {
    align-items: center;
    gap: 0.35rem;
  }

  .p03i-timer-card .p03i-timing-open-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .p03i-timer-display {
    font-size: 1.14rem;
  }

  .p03i-timer-body {
    display: grid;
    gap: 0.42rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p03i-presets {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .p03i-preset {
    min-height: 2rem !important;
    min-width: 2rem !important;
  }

  .p03i-action-row {
    grid-column: 1 / -1;
    justify-content: start;
  }

  .p03i-metronome-grid {
    grid-template-columns: 4.1rem 1fr 1fr;
  }

  .p03i-metronome-grid .p03i-action-row {
    grid-column: 2 / 4;
    grid-row: 1;
    justify-content: end;
  }

  .p03i-metronome-grid .p03i-field {
    grid-column: auto;
  }

  .p03i-metronome-grid .p03i-field:nth-of-type(2) {
    grid-column: 1 / 2;
  }

  .p03i-field select {
    font-size: 0.78rem;
    min-height: 2.05rem;
  }

  .p03i-bpm-input,
  .p03i-number-input {
    width: 3.8rem;
  }

  .timing-support-row {
    display: block !important;
  }
}

/* P03R layout repair: header, update button, timing compression, references, nav bubbles */
:root {
  --zb-soft-header-p03k: rgba(247, 249, 243, 0.94);
  --zb-soft-app-p03k: #f4f6ef;
  --zb-soft-countdown-p03k: #f7efff;
  --zb-soft-countdown-border-p03k: rgba(164, 113, 206, 0.28);
  --zb-soft-metronome-p03k: #fff2dc;
  --zb-soft-metronome-border-p03k: rgba(205, 140, 54, 0.34);
}

body {
  background: linear-gradient(135deg, #f9faf6 0%, var(--zb-soft-app-p03k) 100%) !important;
}

/* Stable header banner that does not clip the brand on phone. */
.app-header.header-with-nav,
.app-header.compact-brand-header {
  background: linear-gradient(135deg, var(--zb-soft-header-p03k), rgba(255,255,255,0.86)) !important;
  border: 1px solid rgba(124, 143, 120, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(20, 30, 50, 0.05) !important;
  overflow: visible !important;
  padding: 0.6rem 0.75rem !important;
}

.brand-block {
  min-width: 0 !important;
  overflow: visible !important;
}

.brand-block h1,
.compact-brand-header h1 {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.today-line {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

.mobile-force-update-button {
  align-items: center !important;
  background: #eef2ff !important;
  border-radius: 999px !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  min-height: 1.65rem !important;
  padding: 0.22rem 0.55rem !important;
  width: auto !important;
}

/* Make bottom nav/bubbles more prominent without taking over the screen. */
.app-nav-button {
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .app-shell {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }

  .app-header.header-with-nav,
  .app-header.compact-brand-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.5rem 0.48rem !important;
  }

  .brand-block h1,
  .compact-brand-header h1 {
    font-size: 1.18rem !important;
    letter-spacing: -0.055em !important;
    max-width: 13rem !important;
  }

  .brand-tagline,
  .brand-support { display: none !important; }

  .today-line { margin-top: 0.12rem !important; }

  .build-chip {
    font-size: 0.72rem !important;
    margin-left: 0 !important;
    padding: 0.18rem 0.5rem !important;
  }

  .header-right {
    align-items: center !important;
    display: flex !important;
    gap: 0.3rem !important;
    justify-content: flex-end !important;
  }

  #pwaUpdateStatus {
    display: none !important;
  }

  .backup-health-button {
    align-self: center !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    min-height: 1.9rem !important;
    padding: 0.28rem 0.62rem !important;
    transform: translateY(0) !important;
    width: auto !important;
  }

  .mobile-force-update-button { display: inline-flex !important; }

  .bottom-nav,
  .app-nav {
    background: rgba(255,255,255,0.94) !important;
    border-top: 1px solid rgba(100, 112, 132, 0.18) !important;
  }

  .app-nav-button {
    font-size: 0.96rem !important;
    min-height: 2.8rem !important;
    padding: 0.5rem 0.58rem !important;
  }
}

/* P03R replacement timing cards: no duplicate old timing controls. */
.p03i-timing-card {
  box-shadow: 0 8px 20px rgba(20,30,50,0.035) !important;
}

.p03i-metronome-card {
  background: linear-gradient(135deg, var(--zb-soft-metronome-p03k), rgba(255,250,242,0.98)) !important;
  border-color: var(--zb-soft-metronome-border-p03k) !important;
}

.p03i-timer-card {
  background: linear-gradient(135deg, var(--zb-soft-countdown-p03k), rgba(255,255,255,0.96)) !important;
  border-color: var(--zb-soft-countdown-border-p03k) !important;
}

.p03i-timing-card.is-closed {
  padding: 0.45rem 0.7rem !important;
}

.p03i-timing-card.is-closed .p03i-timing-strip {
  min-height: 2.25rem !important;
}

.p03i-timing-card.is-closed .p03i-open-body {
  display: none !important;
}

.p03i-timing-card.is-open .p03i-closed-strip {
  display: none !important;
}

/* Desktop: timer below action row; metronome and references side-by-side in both Essentials and Flow. */
@media (min-width: 861px) {
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.8rem !important;
    grid-template-columns: minmax(380px, 1.05fr) minmax(360px, 1.15fr) !important;
  }

  .timing-support-row .p03i-metronome-card,
  .timing-support-row .reference-context-box {
    margin-top: 0 !important;
  }

  .current-item-references-box.reference-context-box {
    display: grid !important;
    min-height: 100% !important;
  }

  .p03i-metronome-grid {
    align-items: end !important;
    gap: 0.42rem !important;
    grid-template-columns: 4.2rem 7.2rem minmax(110px, 1fr) minmax(140px, 1.1fr) !important;
  }

  .p03i-metronome-card .p03i-action-row button,
  .p03i-timer-card .p03i-action-row button {
    font-size: 0.76rem !important;
    min-height: 1.85rem !important;
    padding: 0.28rem 0.52rem !important;
  }

  .p03i-field select {
    font-size: 0.74rem !important;
    min-height: 1.9rem !important;
  }

  .p03i-timer-card .p03i-timer-body {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
  }

  .p03i-presets { flex: 0 0 auto !important; }
}

/* Phone: compressed open states. */
@media (max-width: 760px) {
  .p03i-timing-card {
    margin-top: 0.48rem !important;
    padding: 0.58rem 0.68rem !important;
  }

  .p03i-timing-title,
  .p03i-timing-strip strong {
    font-size: 0.96rem !important;
    min-width: 0 !important;
  }

  .p03i-timing-open-header {
    align-items: center !important;
    display: grid !important;
    gap: 0.35rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .p03i-tool-button {
    font-size: 0.84rem !important;
    min-height: 2rem !important;
    padding: 0.28rem 0.68rem !important;
  }

  .p03i-timer-card .p03i-timer-display {
    font-size: 1.15rem !important;
  }

  .p03i-status { display: none !important; }

  .p03i-timer-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.34rem !important;
    grid-template-columns: 3.7rem minmax(0, 1fr) !important;
  }

  .p03i-number-input {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 2rem !important;
    width: 3.7rem !important;
  }

  .p03i-presets {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }

  .p03i-preset {
    font-size: 0.92rem !important;
    min-height: 2rem !important;
    min-width: 2rem !important;
    padding: 0.15rem 0.35rem !important;
  }

  .p03i-timer-card .p03i-action-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: start !important;
  }

  .p03i-timer-card .p03i-action-row button {
    min-height: 2rem !important;
    padding: 0.3rem 0.72rem !important;
  }

  .p03i-metronome-grid {
    align-items: end !important;
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-columns: 3.8rem minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .p03i-bpm-input {
    grid-column: 1 !important;
    width: 3.8rem !important;
  }

  .p03i-metronome-card .p03i-action-row {
    grid-column: 2 / 4 !important;
    justify-content: end !important;
  }

  .p03i-metronome-card .p03i-action-row button {
    min-height: 2rem !important;
    padding: 0.3rem 0.68rem !important;
  }

  .p03i-metronome-grid .p03i-field:nth-of-type(1) {
    grid-column: 1 / 2 !important;
  }

  .p03i-metronome-grid .p03i-field:nth-of-type(2) {
    grid-column: 2 / 4 !important;
  }

  .p03i-field select {
    font-size: 0.78rem !important;
    min-height: 2.05rem !important;
  }
}


/* P03R focused metronome/timing layout repair */
:root {
  --zb-shell-bg-p03l: #f3f7f4;
  --zb-header-bg-p03l: rgba(250, 252, 247, 0.96);
  --zb-countdown-bg-p03l: #fbf5ff;
  --zb-countdown-border-p03l: #dfc8f3;
  --zb-metronome-bg-p03l: #fff6e7;
  --zb-metronome-border-p03l: #efc98f;
}

body {
  background: linear-gradient(180deg, #f8faf7 0%, var(--zb-shell-bg-p03l) 100%) !important;
}

.brand-header,
.compact-brand-header,
.header-with-nav {
  background: var(--zb-header-bg-p03l) !important;
  border: 1px solid rgba(126, 150, 130, 0.18) !important;
  border-radius: 22px !important;
  padding: 0.65rem 0.85rem !important;
  overflow: visible !important;
}

.brand-block h1 {
  white-space: nowrap !important;
}

.mobile-force-update-button,
.p03i-update-button,
#pwaReloadButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.p03i-timer-card {
  background: linear-gradient(135deg, var(--zb-countdown-bg-p03l), rgba(255,255,255,0.96)) !important;
  border-color: var(--zb-countdown-border-p03l) !important;
}

.p03i-metronome-card {
  background: linear-gradient(135deg, var(--zb-metronome-bg-p03l), rgba(255,251,244,0.98)) !important;
  border-color: var(--zb-metronome-border-p03l) !important;
}

.p03i-metronome-header {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  gap: 0.45rem !important;
}

.p03i-header-bpm-field {
  align-items: center !important;
  display: inline-flex !important;
  gap: 0.28rem !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.p03i-header-bpm-field label,
.p03i-header-bpm-field > label,
.p03i-header-bpm-field span {
  margin: 0 !important;
}

.p03i-header-bpm-field label,
.p03i-field label {
  color: #667085 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.p03i-bpm-input {
  min-height: 2rem !important;
  width: 4rem !important;
  max-width: 4rem !important;
  text-align: center !important;
}

.p03i-metronome-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0.28rem !important;
  justify-content: flex-end !important;
}

.p03i-metronome-actions button,
.p03i-tool-button {
  min-height: 2rem !important;
  padding: 0.32rem 0.68rem !important;
  white-space: nowrap !important;
}

.p03i-metronome-select-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 0.55rem !important;
  align-items: end !important;
  margin-top: 0.2rem !important;
}

.p03i-metronome-select-grid .p03i-field {
  min-width: 0 !important;
}

.p03i-metronome-select-grid select {
  width: 100% !important;
  min-width: 0 !important;
}

/* Desktop: no metronome hide button; keep metronome compact beside references. */
@media (min-width: 861px) {
  .p03i-metronome-hide {
    display: none !important;
  }

  .p03i-metronome-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(390px, 1.05fr) !important;
  }

  .current-item-references-box.reference-context-box {
    display: grid !important;
    margin-top: 0.58rem !important;
    min-height: 100% !important;
  }

  .p03i-metronome-card {
    align-content: start !important;
  }
}

/* Phone: keep the closed strips simple and compress open states. */
@media (max-width: 760px) {
  .brand-header,
  .compact-brand-header,
  .header-with-nav {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.5rem 0.62rem !important;
  }

  .brand-block {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex: 1 1 auto !important;
  }

  .brand-block h1 {
    font-size: 1.22rem !important;
    line-height: 1 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex: 0 0 auto !important;
  }

  #pwaUpdateStatus,
  .pwa-update-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.24rem 0.42rem !important;
  }

  #pwaUpdateMessage { display: none !important; }

  .mobile-force-update-button,
  #pwaReloadButton {
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    min-height: 1.8rem !important;
    padding: 0.25rem 0.48rem !important;
  }

  .backup-health-button,
  .p03i-backup-button {
    align-self: center !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    min-height: 1.8rem !important;
    padding: 0.25rem 0.5rem !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  .p03i-timing-card.is-closed {
    padding: 0.42rem 0.62rem !important;
  }

  .p03i-timing-card.is-closed .p03i-timing-strip {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 0.5rem !important;
    min-height: 2.35rem !important;
  }

  .p03i-timing-card.is-closed .p03i-timing-strip strong {
    font-size: 0.98rem !important;
    white-space: nowrap !important;
  }

  .p03i-timing-open-header {
    gap: 0.32rem !important;
  }

  .p03i-timer-card .p03i-timing-open-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .p03i-timer-card .p03i-timer-body {
    grid-template-columns: 3.5rem minmax(0, 1fr) !important;
  }

  .p03i-number-input {
    width: 3.5rem !important;
    max-width: 3.5rem !important;
  }

  .p03i-presets {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.18rem !important;
  }

  .p03i-preset {
    min-width: 1.92rem !important;
    min-height: 1.92rem !important;
  }

  .p03i-metronome-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  }

  .p03i-metronome-card .p03i-timing-title {
    font-size: 1rem !important;
  }

  .p03i-header-bpm-field label {
    display: none !important;
  }

  .p03i-bpm-input {
    width: 3.35rem !important;
    max-width: 3.35rem !important;
    min-height: 1.9rem !important;
    padding: 0.22rem 0.32rem !important;
  }

  .p03i-metronome-actions button,
  .p03i-metronome-hide {
    font-size: 0.82rem !important;
    min-height: 1.9rem !important;
    padding: 0.25rem 0.48rem !important;
  }

  .p03i-metronome-select-grid {
    gap: 0.42rem !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  }

  .p03i-metronome-select-grid select,
  .p03i-field select {
    font-size: 0.82rem !important;
    min-height: 2.05rem !important;
  }

  .bottom-nav,
  .app-nav {
    background: rgba(250,252,247,0.96) !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .app-nav-button {
    font-size: 1rem !important;
  }
}


/* P03R targeted polish: stable order, tool dock text containment, auto controls, references. */
:root {
  --zb-header-p03m: rgba(250, 252, 247, 0.98);
  --zb-shell-p03m: #f3f7f4;
  --zb-timer-p03m: #fbf4ff;
  --zb-timer-border-p03m: rgba(169, 120, 211, 0.32);
  --zb-metro-p03m: #fff4df;
  --zb-metro-border-p03m: rgba(208, 145, 58, 0.36);
}

body { background: linear-gradient(180deg, #fafbf7 0%, var(--zb-shell-p03m) 100%) !important; }

.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  background: linear-gradient(135deg, var(--zb-header-p03m), rgba(255,255,255,0.88)) !important;
  border: 1px solid rgba(115, 139, 118, 0.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 22px rgba(20,30,50,0.055) !important;
}

#pwaReloadButton,
.mobile-force-update-button,
.p03m-update-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#backupHealthButton.p03m-backup-button,
.backup-health-button.p03m-backup-button {
  align-self: center !important;
  transform: none !important;
}

.hero-current { display: flex !important; flex-direction: column !important; }
.hero-actions { order: 20 !important; }
#p03iTimerCard { order: 30 !important; }
.timing-support-row { order: 40 !important; }
#currentItemNotesBox { order: 50 !important; }
.main-queue-panel { order: 60 !important; }

.p03i-timer-card { background: linear-gradient(135deg, var(--zb-timer-p03m), rgba(255,255,255,0.97)) !important; border-color: var(--zb-timer-border-p03m) !important; }
.p03i-metronome-card { background: linear-gradient(135deg, var(--zb-metro-p03m), rgba(255,251,244,0.98)) !important; border-color: var(--zb-metro-border-p03m) !important; }

.dashboard-tool-launcher .tool-launcher-note.p03m-tool-note,
.dashboard-tool-launcher .tool-launcher-note {
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: 0.78rem !important;
  padding: 0.28rem 0.35rem !important;
}
.dashboard-tool-launcher .tool-launcher-note::before,
.dashboard-tool-launcher .tool-launcher-note::after { content: none !important; display: none !important; }

.p03m-auto-row {
  align-items: center !important;
  display: inline-flex !important;
  gap: 0.25rem !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}
.p03m-auto-row input { width: auto !important; }

@media (min-width: 861px) {
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(390px, 1.05fr) !important;
  }
  .timing-support-row .p03i-metronome-card,
  .timing-support-row .reference-context-box {
    margin-top: 0 !important;
    min-width: 0 !important;
  }
  .current-item-references-box.reference-context-box,
  .p03m-desktop-reference {
    display: grid !important;
    min-height: 100% !important;
  }
  .p03i-metronome-hide { display: none !important; }
  .p03i-metronome-header { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  .p03i-metronome-select-grid { margin-top: 0.12rem !important; }
}

@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.42rem !important;
    padding: 0.54rem 0.62rem !important;
  }
  .brand-block { flex: 1 1 auto !important; min-width: 0 !important; }
  .brand-block h1 { font-size: 1.26rem !important; line-height: 1 !important; }
  .header-right { align-items: center !important; display: flex !important; gap: 0.28rem !important; }
  #pwaReloadButton, .mobile-force-update-button, .p03m-update-button {
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    min-height: 1.9rem !important;
    padding: 0.26rem 0.54rem !important;
  }
  #backupHealthButton.p03m-backup-button,
  .backup-health-button.p03m-backup-button {
    font-size: 0.8rem !important;
    min-height: 1.9rem !important;
    padding: 0.26rem 0.54rem !important;
    transform: translateY(0) !important;
  }
  #pwaUpdateMessage { display: none !important; }
  .pwa-update-status { align-items: center !important; }

  #p03iTimerCard { margin-top: 0.5rem !important; }
  .p03i-timer-card.is-open .p03i-timer-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: 3.55rem minmax(0, 1fr) !important;
  }
  .p03i-timer-card .p03i-action-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  .p03i-timer-card .p03i-action-row button {
    font-size: 0.82rem !important;
    min-height: 1.9rem !important;
    padding: 0.28rem 0.55rem !important;
  }
  .p03m-timer-auto-row { margin-left: 0.15rem !important; }

  .p03i-metronome-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 0.35rem !important;
  }
  .p03i-metronome-actions { gap: 0.22rem !important; }
  .p03i-metronome-actions button,
  .p03i-metronome-hide {
    font-size: 0.8rem !important;
    min-height: 1.85rem !important;
    padding: 0.25rem 0.45rem !important;
  }
  .p03i-metronome-select-grid {
    gap: 0.36rem !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  }
  .p03m-metro-auto-row { align-self: center !important; }

  .dashboard-tool-launcher .tool-launcher-note { font-size: 0.76rem !important; }
}

/* P03R follow-up: desktop header de-dupe, desktop references in both modes, and metronome Auto alignment. */
@media (min-width: 861px) {
  .brand-block .app-build-line {
    display: none !important;
  }

  .practice-support-row.timing-support-row,
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: minmax(350px, 0.95fr) minmax(390px, 1.05fr) !important;
    width: 100% !important;
  }

  .timing-support-row .p03i-metronome-card,
  .timing-support-row .current-item-references-box.reference-context-box,
  .timing-support-row .reference-context-box {
    align-self: stretch !important;
    display: grid !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }

  .p03i-metronome-header {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  }

  .p03m-metro-auto-row {
    align-self: center !important;
    margin: 0 0 0 0.18rem !important;
  }
}

@media (max-width: 760px) {
  .p03i-metronome-header {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto !important;
  }
  .p03m-metro-auto-row {
    font-size: 0.72rem !important;
    margin: 0 !important;
  }
  .p03m-metro-auto-row span {
    max-width: 2.4rem !important;
  }
}


/* P03Z Demo Stability Final: safe layout overrides only. */
:root {
  --zb-header-p03r: #4c666e;
  --zb-header-p03r-2: #405961;
  --zb-shell-p03r: #f3f7f4;
  --zb-timer-p03r: #fbf3ff;
  --zb-timer-border-p03r: rgba(178, 128, 218, 0.30);
  --zb-metro-p03r: #fff4df;
  --zb-metro-border-p03r: rgba(208, 145, 58, 0.36);
  --zb-queue-p03r: #effbf4;
}

body { background: linear-gradient(180deg, #f8faf7 0%, var(--zb-shell-p03r) 100%) !important; }

.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  background: linear-gradient(135deg, var(--zb-header-p03r), var(--zb-header-p03r-2)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 24px !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 26px rgba(20,30,50,0.16) !important;
}
.brand-block h1,
.brand-tagline,
.brand-support,
.today-line { color: #f8fafc !important; }
.brand-tagline, .brand-support { opacity: 0.92 !important; }

#pwaUpdateStatus,
.pwa-update-status {
  align-items: center !important;
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
#pwaReloadButton,
.mobile-force-update-button,
.p03m-update-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
}
#backupHealthButton,
.backup-health-button {
  align-self: center !important;
  transform: none !important;
}

.dashboard-tool-launcher .tool-launcher-note,
.dashboard-tool-launcher .tool-launcher-note.p03r-tool-note {
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  min-height: 1.85rem !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  font-size: 0.76rem !important;
  padding: 0.34rem 0.45rem !important;
}
.dashboard-tool-launcher .tool-launcher-note::before,
.dashboard-tool-launcher .tool-launcher-note::after { content: none !important; display: none !important; }

.hero-current { display: flex !important; flex-direction: column !important; }
.hero-actions { order: 20 !important; }
#p03iTimerCard { order: 30 !important; }
.timing-support-row { order: 40 !important; }
#currentItemNotesBox { order: 50 !important; }
.main-queue-panel { order: 60 !important; }

.p03i-timer-card {
  background: linear-gradient(135deg, var(--zb-timer-p03r), rgba(255,255,255,0.98)) !important;
  border-color: var(--zb-timer-border-p03r) !important;
}
.p03i-metronome-card {
  background: linear-gradient(135deg, var(--zb-metro-p03r), rgba(255,251,244,0.98)) !important;
  border-color: var(--zb-metro-border-p03r) !important;
}
.queue-panel.main-queue-panel,
.main-queue-panel { background: linear-gradient(135deg, var(--zb-queue-p03r), rgba(255,255,255,0.96)) !important; }

/* Timer: keep it compact and below primary actions. */
#p03iTimerCard.p03i-timing-card {
  margin-top: 0.55rem !important;
  overflow: hidden !important;
  padding: 0.46rem 0.62rem !important;
}
#p03iTimerCard .p03i-timing-open-header {
  align-items: center !important;
  display: grid !important;
  gap: 0.45rem !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
#p03iTimerCard .p03i-timer-body {
  align-items: center !important;
  display: grid !important;
  gap: 0.38rem !important;
  grid-template-columns: 4.1rem minmax(0, 1fr) auto !important;
}
#p03iTimerCard .p03i-number-input { width: 3.8rem !important; max-width: 3.8rem !important; }
#p03iTimerCard .p03i-presets { justify-content: center !important; gap: 0.32rem !important; }
#p03iTimerCard .p03i-preset { background: rgba(255,255,255,0.76) !important; border-radius: 999px !important; min-width: 2rem !important; }
#p03iTimerCard .p03i-action-row { align-items: center !important; display: flex !important; flex-wrap: nowrap !important; gap: 0.3rem !important; }
#p03iTimerCard .p03i-action-row button { width: auto !important; }

/* Metronome: title/controls row + sound/pattern row. */
#p03iMetronomeCard.p03i-timing-card {
  margin-top: 0.55rem !important;
  padding: 0.5rem 0.62rem !important;
}
#p03iMetronomeCard .p03i-metronome-header {
  align-items: center !important;
  display: grid !important;
  gap: 0.38rem !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}
#p03iMetronomeCard .p03i-header-bpm-field { margin: 0 !important; }
#p03iMetronomeCard .p03i-header-bpm-field label { display: none !important; }
#p03iMetronomeCard .p03i-bpm-input { width: 3.35rem !important; max-width: 3.35rem !important; }
#p03iMetronomeCard .p03i-metronome-actions { align-items: center !important; display: flex !important; flex-wrap: nowrap !important; gap: 0.25rem !important; }
#p03iMetronomeCard .p03i-metronome-actions button,
#p03iMetronomeCard .p03i-metronome-hide { width: auto !important; }
#p03iMetronomeCard .p03i-metronome-select-grid {
  align-items: end !important;
  display: grid !important;
  gap: 0.48rem !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) !important;
  margin-top: 0.32rem !important;
}

@media (min-width: 861px) {
  .brand-block .app-build-line { display: none !important; }
  .practice-support-row.timing-support-row,
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: minmax(340px, 0.95fr) minmax(390px, 1.05fr) !important;
    width: 100% !important;
  }
  .timing-support-row .current-item-references-box.reference-context-box,
  .timing-support-row .reference-context-box,
  .p03r-desktop-reference {
    align-self: stretch !important;
    display: grid !important;
    margin-top: 0 !important;
    min-height: 100% !important;
    min-width: 0 !important;
  }
  #p03iTimerCard .p03i-action-row { justify-content: flex-end !important; }
}

@media (max-width: 860px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.36rem !important;
    padding: 0.62rem 0.65rem !important;
  }
  .brand-block { flex: 1 1 auto !important; min-width: 0 !important; }
  .brand-block h1 { font-size: 1.42rem !important; line-height: 1 !important; }
  .header-right { align-items: center !important; display: flex !important; gap: 0.28rem !important; }
  #pwaUpdateStatus { gap: 0.22rem !important; padding: 0.22rem 0.38rem !important; }
  #pwaUpdateMessage { display: none !important; }
  #pwaVersionLabel { font-size: 0.76rem !important; }
  #pwaReloadButton { font-size: 0.82rem !important; min-height: 1.9rem !important; padding: 0.28rem 0.55rem !important; }
  #backupHealthButton { font-size: 0.82rem !important; min-height: 1.9rem !important; padding: 0.28rem 0.55rem !important; }

  #p03iTimerCard .p03i-timing-open-header { grid-template-columns: minmax(0,1fr) auto auto !important; }
  #p03iTimerCard .p03i-timer-body {
    grid-template-columns: 3.65rem minmax(0,1fr) !important;
    grid-template-areas: "minutes presets" "actions actions" !important;
  }
  #p03iTimerCard .p03i-number-input { grid-area: minutes !important; width: 3.45rem !important; max-width: 3.45rem !important; }
  #p03iTimerCard .p03i-presets { grid-area: presets !important; justify-content: space-between !important; }
  #p03iTimerCard .p03i-action-row { grid-area: actions !important; justify-content: flex-start !important; overflow: hidden !important; }
  #p03iTimerCard .p03i-action-row button { font-size: 0.82rem !important; min-height: 1.88rem !important; padding: 0.28rem 0.55rem !important; }

  #p03iMetronomeCard .p03i-metronome-header {
    grid-template-columns: minmax(0,1fr) auto auto auto !important;
  }
  #p03iMetronomeCard .p03i-metronome-select-grid {
    grid-template-columns: minmax(0,0.95fr) minmax(0,1.15fr) !important;
  }
  #p03iMetronomeCard .p03i-metronome-actions button,
  #p03iMetronomeCard .p03i-metronome-hide { font-size: 0.82rem !important; min-height: 1.9rem !important; padding: 0.28rem 0.5rem !important; }
}

@media (max-width: 860px) and (orientation: landscape) {
  /* Standard Practice remains portrait-only on narrow landscape screens.
     Compact Practice owns its own responsive/immersive Fretboard surface and
     must not be covered by this legacy global blocker. */
  body:not([data-current-screen="compact-practice"])::before {
    content: "Rotate to portrait for the current ZoneBuilder mobile layout.";
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(31, 45, 50, 0.96);
    color: white;
    text-align: center;
    font-weight: 900;
    font-size: 1.2rem;
  }
}


/* P03S Demo Stability: softer header, desktop references, compact timer strip. */
:root {
  --zb-header-p03s: #6f888e;
  --zb-header-p03s-2: #5f777d;
  --zb-header-ink-p03s: #f8fbfc;
  --zb-header-pill-p03s: rgba(255,255,255,0.93);
  --zb-header-pill-border-p03s: rgba(23,32,51,0.12);
}

.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  background: linear-gradient(135deg, var(--zb-header-p03s), var(--zb-header-p03s-2)) !important;
  color: var(--zb-header-ink-p03s) !important;
  box-shadow: 0 10px 24px rgba(20,30,50,0.13) !important;
}
.brand-block h1,
.brand-tagline,
.brand-support,
.today-line { color: var(--zb-header-ink-p03s) !important; }

#pwaUpdateStatus,
.pwa-update-status,
.dashboard-mode-bar,
.header-with-nav .app-nav,
.mode-tool-strip {
  background: var(--zb-header-pill-p03s) !important;
  border-color: var(--zb-header-pill-border-p03s) !important;
  color: #172033 !important;
}
#pwaVersionLabel,
#pwaUpdateMessage,
.dashboard-mode-copy strong,
.dashboard-mode-copy span,
.dashboard-mode-button,
.app-nav-button { color: #172033 !important; }
.dashboard-mode-button.is-selected,
.app-nav-button.is-selected { color: #fff !important; }
#backupHealthButton.backup-health-button {
  align-self: center !important;
  margin-top: 0 !important;
}

@media (min-width: 861px) {
  /* Keep desktop references visible beside the metronome in both Essentials and Flow. */
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: minmax(350px, 0.95fr) minmax(390px, 1.05fr) !important;
    width: 100% !important;
  }
  .timing-support-row .current-item-references-box.reference-context-box,
  .timing-support-row .reference-context-box,
  .p03s-desktop-reference {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    min-height: 100% !important;
    min-width: 0 !important;
  }
  .timing-support-row .reference-box-header {
    margin-bottom: 0.35rem !important;
  }
  .timing-support-row .references-toggle-button {
    display: none !important;
  }

  /* Desktop countdown: keep one-line feel, remove unnecessary Hide button, distribute controls. */
  #p03iTimerCard.p03i-timing-card {
    padding: 0.38rem 0.58rem !important;
  }
  #p03iTimerCard .p03i-open-body {
    display: grid !important;
    gap: 0.28rem !important;
  }
  #p03iTimerCard .p03i-timing-open-header {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }
  #p03iTimerCard .p03i-timing-open-header .p03i-tool-button {
    display: none !important;
  }
  #p03iTimerCard .p03i-timer-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.62rem !important;
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
  }
  #p03iTimerCard .p03i-number-input {
    width: 4.2rem !important;
    max-width: 4.2rem !important;
  }
  #p03iTimerCard .p03i-presets {
    justify-content: center !important;
    gap: 0.42rem !important;
  }
  #p03iTimerCard .p03i-preset {
    background: rgba(238, 226, 255, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    color: #402064 !important;
    font-weight: 900 !important;
    min-width: 2.35rem !important;
    padding: 0.36rem 0.55rem !important;
  }
  #p03iTimerCard .p03i-preset.is-selected {
    background: var(--primary) !important;
    color: white !important;
  }
  #p03iTimerCard .p03i-action-row {
    justify-content: flex-end !important;
    min-width: max-content !important;
  }
}

@media (max-width: 860px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    background: linear-gradient(135deg, #6f888e, #5f777d) !important;
  }
  #backupHealthButton.backup-health-button {
    align-self: center !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }
}


/* P03Z Demo Stability Final: safe final overrides, no DOM churn. */
:root {
  --zb-header-p03u: #7f9aa1;
  --zb-header-p03u-2: #6f8a91;
  --zb-header-ink-p03u: #ffffff;
  --zb-timer-p03u: #fbf5ff;
  --zb-timer-border-p03u: #dac1ee;
  --zb-metronome-p03u: #fff3df;
  --zb-metronome-border-p03u: #efc98f;
}

/* Softer product banner that still feels branded. */
.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  background: linear-gradient(135deg, var(--zb-header-p03u), var(--zb-header-p03u-2)) !important;
  color: var(--zb-header-ink-p03u) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 8px 22px rgba(20,30,50,0.12) !important;
}
.brand-block h1,
.brand-tagline,
.brand-support,
.today-line { color: var(--zb-header-ink-p03u) !important; }
#pwaUpdateStatus,
.pwa-update-status,
.dashboard-mode-bar,
.header-with-nav .app-nav,
.mode-tool-strip {
  background: rgba(255,255,255,0.94) !important;
  color: #172033 !important;
  border-color: rgba(23,32,51,0.14) !important;
}
#pwaVersionLabel,
#pwaUpdateMessage,
.dashboard-mode-copy strong,
.dashboard-mode-copy span,
.dashboard-mode-button,
.app-nav-button { color: #172033 !important; }
.dashboard-mode-button.is-selected,
.app-nav-button.is-selected { color: #fff !important; }

#p03iTimerCard.p03i-timer-card {
  background: linear-gradient(135deg, var(--zb-timer-p03u), rgba(255,255,255,0.97)) !important;
  border-color: var(--zb-timer-border-p03u) !important;
}
#p03iMetronomeCard.p03i-metronome-card {
  background: linear-gradient(135deg, var(--zb-metronome-p03u), rgba(255,251,244,0.98)) !important;
  border-color: var(--zb-metronome-border-p03u) !important;
}

/* Desktop: keep timer compact; show references beside metronome in both modes. */
@media (min-width: 861px) {
  .practice-support-row.timing-support-row,
  .timing-support-row {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(350px, 0.95fr) minmax(390px, 1.05fr) !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }
  .timing-support-row > #p03iMetronomeCard,
  .timing-support-row > .p03i-metronome-card {
    grid-column: 1 !important;
    margin-top: 0 !important;
  }
  .timing-support-row > .current-item-references-box.reference-context-box,
  .timing-support-row > .reference-context-box,
  .timing-support-row > [hidden].p03u-force-reference {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-column: 2 !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    min-height: 100% !important;
    min-width: 0 !important;
  }
  .timing-support-row .references-toggle-button { display: none !important; }

  #p03iTimerCard.p03i-timing-card {
    padding: 0.34rem 0.56rem !important;
    overflow: hidden !important;
  }
  #p03iTimerCard .p03i-open-body {
    display: grid !important;
    grid-template-columns: auto minmax(240px,1fr) auto !important;
    gap: 0.55rem !important;
    align-items: center !important;
  }
  #p03iTimerCard .p03i-timing-open-header {
    display: contents !important;
  }
  #p03iTimerCard .p03i-timing-title { white-space: nowrap !important; }
  #p03iTimerCard .p03i-status { display: none !important; }
  #p03iTimerCard .p03i-timer-body {
    display: contents !important;
  }
  #p03iTimerCard .p03i-number-input {
    width: 4.2rem !important;
    max-width: 4.2rem !important;
    border-radius: 10px !important;
  }
  #p03iTimerCard .p03i-presets {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 0.42rem !important;
  }
  #p03iTimerCard .p03i-preset {
    background: rgba(238,226,255,0.95) !important;
    border: 1px solid rgba(139,92,246,0.18) !important;
    color: #402064 !important;
    font-weight: 900 !important;
    min-width: 2.35rem !important;
    padding: 0.34rem 0.54rem !important;
  }
  #p03iTimerCard .p03i-preset.is-selected { background: var(--primary) !important; color: #fff !important; }
  #p03iTimerCard .p03i-action-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0.32rem !important;
    min-width: max-content !important;
  }
  #p03iTimerCard .p03i-timing-open-header .p03i-tool-button { display: none !important; }

  /* Desktop metronome: no Hide, compact two-line workstation layout. */
  #p03iMetronomeCard .p03i-metronome-hide { display: none !important; }
  #p03iMetronomeCard .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto auto !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }
  #p03iMetronomeCard .p03i-timing-title { justify-self: start !important; }
  #p03iMetronomeCard .p03m-metro-auto-row,
  #p03iMetronomeCard #p03mAutoSound {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
  }
}

/* Phone: keep cards in normal flow, prevent overlap, compact open tool controls. */
@media (max-width: 860px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    min-height: 3.2rem !important;
    padding: 0.56rem 0.62rem !important;
  }
  .brand-block h1 { font-size: 1.36rem !important; line-height: 1 !important; }
  #backupHealthButton.backup-health-button,
  .backup-health-button {
    align-self: center !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }

  .hero-current { overflow: hidden !important; }
  #p03iTimerCard,
  #p03iMetronomeCard,
  .main-queue-panel {
    position: static !important;
    clear: both !important;
    flex: 0 0 auto !important;
  }
  #p03iTimerCard.p03i-timing-card,
  #p03iMetronomeCard.p03i-timing-card {
    overflow: hidden !important;
    margin-top: 0.52rem !important;
    padding: 0.52rem 0.62rem !important;
  }

  /* Timer closed/open: distinct rectangular minutes field and no button overflow. */
  #p03iTimerCard .p03i-timing-open-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    align-items: center !important;
    gap: 0.38rem !important;
  }
  #p03iTimerCard .p03i-timer-display { font-size: 1.18rem !important; }
  #p03iTimerCard .p03i-timer-body {
    display: grid !important;
    grid-template-columns: 3.9rem minmax(0,1fr) !important;
    grid-template-areas: "minutes presets" "actions actions" !important;
    gap: 0.35rem !important;
    align-items: center !important;
  }
  #p03iTimerCard .p03i-number-input {
    grid-area: minutes !important;
    width: 3.75rem !important;
    max-width: 3.75rem !important;
    min-height: 2.05rem !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.92) !important;
    font-weight: 900 !important;
  }
  #p03iTimerCard .p03i-presets {
    grid-area: presets !important;
    display: inline-flex !important;
    justify-content: space-between !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
  }
  #p03iTimerCard .p03i-preset {
    font-size: 0.92rem !important;
    min-width: 1.95rem !important;
    min-height: 1.95rem !important;
    padding: 0.12rem 0.28rem !important;
    border-radius: 999px !important;
  }
  #p03iTimerCard .p03i-action-row {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.24rem !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  #p03iTimerCard .p03i-action-row button {
    flex: 0 1 auto !important;
    font-size: 0.8rem !important;
    min-height: 1.88rem !important;
    padding: 0.28rem 0.48rem !important;
    width: auto !important;
  }
  #p03iTimerCard .p03m-timer-auto-row,
  #p03iTimerCard #p03mAutoTimer {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
  #p03iTimerCard input[type="checkbox"] { width: 1rem !important; height: 1rem !important; }

  /* Metronome open: one compact header row + one selector row. */
  #p03iMetronomeCard .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto auto !important;
    grid-template-areas: "title actions hide auto" !important;
    align-items: center !important;
    gap: 0.28rem !important;
  }
  #p03iMetronomeCard .p03i-timing-title {
    grid-area: title !important;
    justify-self: start !important;
    white-space: nowrap !important;
    font-size: 1.03rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-actions {
    grid-area: actions !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    justify-content: end !important;
  }
  #p03iMetronomeCard .p03i-metronome-hide { grid-area: hide !important; }
  #p03iMetronomeCard #p03mAutoSound,
  #p03iMetronomeCard .p03m-metro-auto-row {
    grid-area: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.18rem !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  #p03iMetronomeCard #p03mAutoSound input,
  #p03iMetronomeCard .p03m-metro-auto-row input {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    margin: 0 !important;
  }
  #p03iMetronomeCard .p03i-metronome-actions button,
  #p03iMetronomeCard .p03i-metronome-hide {
    font-size: 0.78rem !important;
    min-height: 1.82rem !important;
    padding: 0.24rem 0.42rem !important;
    width: auto !important;
  }
  #p03iMetronomeCard .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: 3.7rem minmax(0,0.9fr) minmax(0,1.1fr) !important;
    gap: 0.34rem !important;
    align-items: end !important;
    margin-top: 0.36rem !important;
  }
  #p03iMetronomeCard .p03i-header-bpm-field {
    grid-column: 1 !important;
    display: grid !important;
    gap: 0.14rem !important;
  }
  #p03iMetronomeCard .p03i-header-bpm-field label { display: block !important; }
  #p03iMetronomeCard .p03i-bpm-input {
    width: 3.55rem !important;
    max-width: 3.55rem !important;
    min-height: 1.98rem !important;
    font-size: 0.9rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) { grid-column: 2 !important; }
  #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) { grid-column: 3 !important; }
  #p03iMetronomeCard .p03i-field label { font-size: 0.66rem !important; }
  #p03iMetronomeCard .p03i-field select {
    font-size: 0.76rem !important;
    min-height: 1.98rem !important;
    padding: 0.32rem 0.44rem !important;
  }

  .main-queue-panel { margin-top: 0.58rem !important; }
}

/* P03U Mobile Final Touches: elapsed pill, bottom nav tint, backup alignment, mobile Setup backup/restore. */
:root {
  --zb-bottom-nav-p03u: rgba(238, 246, 251, 0.96);
  --zb-bottom-nav-border-p03u: rgba(93, 124, 140, 0.22);
}

.hero-current,
.current-item {
  position: relative !important;
}

.current-item-elapsed-pill {
  position: absolute !important;
  top: 0.72rem !important;
  right: 0.8rem !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(23, 32, 51, 0.08) !important;
  border: 1px solid rgba(23, 32, 51, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
  color: #667085 !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0.28rem 0.62rem !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .current-item-elapsed-pill {
    top: 0.68rem !important;
    right: 0.72rem !important;
    font-size: 0.8rem !important;
    padding: 0.26rem 0.58rem !important;
  }

  .app-nav {
    background: linear-gradient(135deg, var(--zb-bottom-nav-p03u), rgba(250, 253, 250, 0.98)) !important;
    border: 1px solid var(--zb-bottom-nav-border-p03u) !important;
    box-shadow: 0 -8px 22px rgba(20, 30, 50, 0.08) !important;
  }

  .app-nav-button {
    font-size: 1.02rem !important;
    font-weight: 900 !important;
  }

  .app-nav-button.is-selected {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(31, 94, 255, 0.22) !important;
  }

  #backupHealthButton,
  .backup-health-button {
    align-self: center !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }

  .setup-mobile-backup-panel {
    display: grid !important;
  }
}

.setup-mobile-backup-panel {
  display: none;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(93, 124, 140, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(238,246,251,0.95), rgba(255,255,255,0.92));
}

.setup-mobile-backup-panel strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.setup-mobile-backup-panel p {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
}

.setup-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.setup-backup-actions button,
.setup-restore-file-label {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 850;
  min-height: 2.15rem;
  padding: 0.42rem 0.7rem;
}

.setup-restore-file-label {
  background: var(--soft);
  color: var(--primary);
  cursor: pointer;
}

.setup-restore-file-input {
  display: none !important;
}

.setup-backup-restore-status {
  min-height: 1.2rem;
  margin: 0;
  font-size: 0.82rem;
}


/* P03Z Header/Nav/Metronome final-safe polish.
   Scope: restore mobile banner/update, tint bottom nav, align backup, and compact metronome rows. */
:root {
  --zb-p03v-header-a: #5f7f86;
  --zb-p03v-header-b: #4f7078;
  --zb-p03v-header-c: #76949a;
  --zb-p03v-bottom-nav: #e7f0f4;
  --zb-p03v-bottom-nav-border: rgba(68, 101, 111, 0.22);
}

.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.75rem !important;
  align-items: center !important;
  background: linear-gradient(135deg, var(--zb-p03v-header-a) 0%, var(--zb-p03v-header-b) 58%, var(--zb-p03v-header-c) 100%) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 22px !important;
  color: white !important;
  box-shadow: 0 10px 24px rgba(24, 43, 50, 0.16) !important;
  padding: 0.72rem 0.86rem !important;
  overflow: visible !important;
}
.brand-block h1 {
  color: #fff !important;
  font-size: clamp(1.72rem, 3.2vw, 2.25rem) !important;
  line-height: 1 !important;
  margin: 0 0 0.12rem !important;
  letter-spacing: -0.045em !important;
}
.brand-tagline,
.brand-support,
.today-line { color: rgba(255,255,255,0.92) !important; }
.header-right {
  display: grid !important;
  grid-auto-flow: row !important;
  gap: 0.42rem !important;
  align-items: center !important;
  justify-items: end !important;
}
#pwaUpdateStatus,
.pwa-update-status,
#backupHealthButton.backup-health-button,
.backup-health-button,
.dashboard-mode-bar,
.mode-tool-strip {
  box-shadow: 0 3px 12px rgba(15,23,42,0.10) !important;
}
#pwaUpdateStatus,
.pwa-update-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 2rem !important;
}
#pwaReloadButton,
.pwa-reload-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.55rem !important;
  padding: 0.22rem 0.52rem !important;
  font-size: 0.74rem !important;
  line-height: 1 !important;
}
#backupHealthButton.backup-health-button,
.backup-health-button {
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
  min-height: 2rem !important;
  padding-top: 0.34rem !important;
  padding-bottom: 0.34rem !important;
}

/* Bottom nav gets a distinct app-chrome surface while preserving the blue active pill. */
.app-nav {
  background: linear-gradient(135deg, var(--zb-p03v-bottom-nav), rgba(246,250,252,0.98)) !important;
  border: 1px solid var(--zb-p03v-bottom-nav-border) !important;
  box-shadow: 0 -6px 18px rgba(20, 30, 50, 0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.app-nav-button {
  font-size: 0.94rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
.app-nav-button.is-selected {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(31,94,255,0.22) !important;
}

/* Metronome open state: title + transport + auto on the top line; BPM/Sound/Pattern on one compact second row. */
#p03iMetronomeCard .p03i-metronome-header {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto auto !important;
  grid-template-areas: "title actions auto" !important;
  align-items: center !important;
  gap: 0.38rem !important;
}
#p03iMetronomeCard .p03i-timing-title {
  grid-area: title !important;
  justify-self: start !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#p03iMetronomeCard .p03i-metronome-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
}
#p03iMetronomeCard #p03mAutoSound,
#p03iMetronomeCard .p03m-metro-auto-row {
  grid-area: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#p03iMetronomeCard .p03i-metronome-hide { display: none !important; }
#p03iMetronomeCard .p03i-metronome-select-grid {
  display: grid !important;
  grid-template-columns: 4.1rem minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: end !important;
  gap: 0.42rem !important;
  margin-top: 0.36rem !important;
}
#p03iMetronomeCard .p03i-header-bpm-field { grid-column: 1 !important; }
#p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) { grid-column: 2 !important; }
#p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) { grid-column: 3 !important; }
#p03iMetronomeCard .p03i-bpm-input {
  width: 3.8rem !important;
  max-width: 3.8rem !important;
}

/* Phone header: restore visible banner + Update + Backup on one compact line, without hiding the product identity. */
@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.46rem !important;
    padding: 0.64rem 0.68rem !important;
    margin-bottom: 0.55rem !important;
    min-height: unset !important;
  }
  .brand-block {
    display: grid !important;
    gap: 0.08rem !important;
    min-width: 0 !important;
  }
  .brand-block h1 {
    font-size: 1.62rem !important;
    white-space: nowrap !important;
  }
  .brand-tagline { font-size: 0.86rem !important; }
  .brand-support { display: none !important; }
  .today-line.app-build-line { display: none !important; }
  .header-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.35rem !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
  }
  #pwaUpdateStatus,
  .pwa-update-status {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 1.88rem !important;
    padding: 0.24rem 0.42rem !important;
  }
  #pwaVersionLabel { font-size: 0.72rem !important; }
  #pwaUpdateMessage { font-size: 0.7rem !important; }
  #pwaReloadButton,
  .pwa-reload-button {
    display: inline-flex !important;
    min-height: 1.42rem !important;
    padding: 0.2rem 0.42rem !important;
    font-size: 0.68rem !important;
  }
  #backupHealthButton.backup-health-button,
  .backup-health-button {
    justify-self: end !important;
    width: auto !important;
    min-width: 4.9rem !important;
    max-width: 5.5rem !important;
    min-height: 1.88rem !important;
    padding: 0.24rem 0.44rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .dashboard-mode-bar,
  .mode-tool-strip { display: none !important; }
  .app-nav {
    position: sticky !important;
    bottom: 0.35rem !important;
    z-index: 25 !important;
    padding: 0.32rem !important;
    gap: 0.2rem !important;
  }
  .app-nav-button {
    font-size: 0.9rem !important;
    padding-left: 0.38rem !important;
    padding-right: 0.38rem !important;
  }

  #p03iMetronomeCard .p03i-metronome-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.28rem !important;
  }
  #p03iMetronomeCard .p03i-timing-title { font-size: 1.02rem !important; }
  #p03iMetronomeCard .p03i-metronome-actions button,
  #p03iMetronomeCard .p03m-metro-auto-row {
    font-size: 0.76rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-actions button {
    min-height: 1.78rem !important;
    padding: 0.24rem 0.4rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-select-grid {
    grid-template-columns: 3.65rem minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    gap: 0.28rem !important;
    margin-top: 0.3rem !important;
  }
  #p03iMetronomeCard .p03i-bpm-input {
    width: 3.45rem !important;
    max-width: 3.45rem !important;
    min-height: 1.88rem !important;
  }
}

/* P03Z demo-stability containment pass.
   Scope: no broad redesign; fix mobile expanded timing overlap, backup alignment, and bottom nav surface. */
:root {
  --zb-p03w-header-a: #6d8a91;
  --zb-p03w-header-b: #55747b;
  --zb-p03w-header-c: #7f9ba0;
  --zb-p03w-nav-bg: #e8f1f5;
  --zb-p03w-nav-bg-2: #f5f9fb;
}

/* Header: keep the teal banner but soften it and center the pills vertically. */
.app-header.header-with-nav,
.app-header.compact-brand-header,
.brand-header {
  background: linear-gradient(135deg, var(--zb-p03w-header-a) 0%, var(--zb-p03w-header-b) 56%, var(--zb-p03w-header-c) 100%) !important;
  align-items: center !important;
}
.header-right {
  align-items: center !important;
}
#backupHealthButton.backup-health-button,
.backup-health-button {
  align-self: center !important;
  transform: translateY(0) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}
#pwaReloadButton,
.pwa-reload-button,
.mobile-force-update-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bottom navigation: separate it from the white app body without overpowering the active blue tab. */
.app-nav {
  background: linear-gradient(135deg, var(--zb-p03w-nav-bg), var(--zb-p03w-nav-bg-2)) !important;
  border-color: rgba(68, 101, 111, 0.24) !important;
  box-shadow: 0 -6px 18px rgba(20, 30, 50, 0.08), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}
.app-nav-button {
  font-weight: 900 !important;
}

/* Timing stack: keep expanded mobile panels in normal flow and stop them from pushing upward into Current Item controls. */
.hero-current,
.current-item,
.practice-support-row,
.timing-support-row {
  overflow: visible !important;
}
#p03iTimerCard,
#p03iMetronomeCard {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  contain: layout style !important;
  box-sizing: border-box !important;
}
#p03iTimerCard.is-open,
#p03iMetronomeCard.is-open {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#p03iTimerCard .p03i-open-body,
#p03iMetronomeCard .p03i-open-body {
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Countdown open state: compact rows that fit inside the card. */
#p03iTimerCard.p03i-timing-card {
  padding: 0.62rem 0.72rem !important;
}
#p03iTimerCard .p03i-timing-open-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 0.45rem !important;
  align-items: center !important;
  margin-bottom: 0.42rem !important;
}
#p03iTimerCard .p03i-timing-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#p03iTimerCard .p03i-timer-display {
  font-weight: 950 !important;
  white-space: nowrap !important;
}
#p03iTimerCard .p03i-timer-body {
  display: grid !important;
  grid-template-columns: 4rem minmax(0, 1fr) auto !important;
  grid-template-areas:
    "minutes presets presets"
    "actions actions actions" !important;
  gap: 0.35rem 0.45rem !important;
  align-items: center !important;
}
#p03iTimerCard .p03i-number-input {
  grid-area: minutes !important;
  width: 3.7rem !important;
  max-width: 3.7rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: inset 0 0 0 1px rgba(100,112,132,0.14) !important;
}
#p03iTimerCard .p03i-presets {
  grid-area: presets !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}
#p03iTimerCard .p03i-action-row {
  grid-area: actions !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.32rem !important;
  overflow: visible !important;
  min-width: 0 !important;
}
#p03iTimerCard .p03i-action-row button,
#p03iTimerCard .p03m-timer-auto-row {
  flex: 0 0 auto !important;
  min-height: 1.95rem !important;
}

/* Metronome open state: two compact rows; title/transport on row one, BPM/Sound/Pattern on row two. */
#p03iMetronomeCard.p03i-timing-card {
  padding: 0.62rem 0.72rem !important;
}
#p03iMetronomeCard .p03i-metronome-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas: "title actions auto" !important;
  gap: 0.38rem !important;
  align-items: center !important;
  margin-bottom: 0.4rem !important;
}
#p03iMetronomeCard .p03i-timing-title {
  grid-area: title !important;
  justify-self: start !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
#p03iMetronomeCard .p03i-metronome-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0.28rem !important;
  align-items: center !important;
}
#p03iMetronomeCard #p03mAutoSound,
#p03iMetronomeCard .p03m-metro-auto-row {
  grid-area: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#p03iMetronomeCard .p03i-metronome-hide { display: none !important; }
#p03iMetronomeCard .p03i-metronome-select-grid {
  display: grid !important;
  grid-template-columns: 3.8rem minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 0.36rem !important;
  align-items: end !important;
  margin-top: 0 !important;
}
#p03iMetronomeCard .p03i-header-bpm-field {
  grid-column: 1 !important;
  margin: 0 !important;
}
#p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) { grid-column: 2 !important; }
#p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) { grid-column: 3 !important; }
#p03iMetronomeCard .p03i-bpm-input {
  width: 3.45rem !important;
  max-width: 3.45rem !important;
}

@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    padding: 0.66rem 0.72rem !important;
    border-radius: 20px !important;
  }
  .brand-block h1 { font-size: 1.64rem !important; }
  .header-right {
    align-items: center !important;
  }
  #backupHealthButton.backup-health-button,
  .backup-health-button {
    transform: translateY(1px) !important;
  }
  #p03iTimerCard.is-open,
  #p03iMetronomeCard.is-open {
    margin-top: 0.58rem !important;
    margin-bottom: 0.58rem !important;
  }
  #p03iTimerCard .p03i-timing-open-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.34rem !important;
  }
  #p03iTimerCard .p03i-timer-body {
    grid-template-columns: 3.85rem minmax(0, 1fr) !important;
    grid-template-areas:
      "minutes presets"
      "actions actions" !important;
  }
  #p03iTimerCard .p03i-presets {
    justify-content: space-between !important;
  }
  #p03iTimerCard .p03i-action-row button {
    padding: 0.34rem 0.55rem !important;
    font-size: 0.82rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.25rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-select-grid {
    grid-template-columns: 3.65rem minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    gap: 0.3rem !important;
  }
  #p03iMetronomeCard .p03i-metronome-actions button,
  #p03iMetronomeCard .p03m-metro-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.85rem !important;
  }
  #p03iMetronomeCard .p03i-field label,
  #p03iTimerCard .p03i-field label {
    font-size: 0.68rem !important;
  }
}


/* P03Z stability stopgap: freeze mobile structure, restore bottom nav, stop timing overlap. */
:root {
  --zb-p03y-header: #4f6970;
  --zb-p03y-header-2: #405a61;
  --zb-p03y-bottom-nav: #eef4f6;
  --zb-p03y-bottom-nav-2: #e7eff2;
}

/* Header: keep the update/backup/build controls visible and aligned. */
.app-header.brand-header,
.app-header.header-with-nav {
  background: linear-gradient(135deg, var(--zb-p03y-header), var(--zb-p03y-header-2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 12px 30px rgba(26, 43, 50, 0.16) !important;
}
.brand-block h1,
.brand-tagline,
.brand-support,
.today-line { color: #fff !important; }
#pwaUpdateStatus,
.pwa-update-status {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: rgba(255,255,255,0.82) !important;
  color: #172033 !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 999px !important;
  min-height: 2.05rem !important;
  padding: 0.18rem 0.42rem !important;
}
#pwaReloadButton,
#mobileForceUpdateButton,
.pwa-reload-button,
.mobile-force-update-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}
#backupHealthButton.backup-health-button {
  align-self: center !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile: keep nav as native-style bottom tab bar, not top nav. */
@media (max-width: 760px) {
  body { overflow-x: hidden !important; }
  .app-shell { padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)) !important; }
  .app-nav {
    position: fixed !important;
    left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
    right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    z-index: 80 !important;
    margin: 0 !important;
    padding: 0.38rem !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    background: linear-gradient(135deg, var(--zb-p03y-bottom-nav), var(--zb-p03y-bottom-nav-2)) !important;
    border: 1px solid rgba(68,101,111,0.22) !important;
    border-radius: 22px !important;
    box-shadow: 0 -10px 26px rgba(20, 30, 50, 0.12), inset 0 1px 0 rgba(255,255,255,0.75) !important;
  }
  .app-nav-button {
    min-width: 0 !important;
    width: auto !important;
    min-height: 2.95rem !important;
    padding: 0.52rem 0.34rem !important;
    font-size: clamp(0.78rem, 3.4vw, 0.96rem) !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .app-nav-button[data-screen="advanced"],
  .app-nav-button[data-screen="system"] { display: none !important; }
  .app-header.brand-header,
  .app-header.header-with-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.42rem !important;
    padding: 0.62rem 0.7rem !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }
  .brand-block { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 0.35rem !important; }
  .brand-block h1 { font-size: clamp(1.18rem, 6vw, 1.58rem) !important; white-space: nowrap !important; margin: 0 !important; }
  .brand-tagline,.brand-support,.today-line .build-label { display: none !important; }
  .today-line { margin: 0 !important; display: inline-flex !important; }
  #appVersionDisplay { display: inline-flex !important; }
  .header-right { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.34rem !important; min-width: 0 !important; }
  #pwaUpdateStatus { display: inline-flex !important; min-width: 0 !important; }
  #pwaVersionLabel,#pwaUpdateMessage { display: none !important; }
  #pwaReloadButton { font-size: 0.86rem !important; padding: 0.42rem 0.64rem !important; min-height: 2.2rem !important; }
  #backupHealthButton.backup-health-button { font-size: 0.86rem !important; min-height: 2.25rem !important; padding: 0.42rem 0.62rem !important; white-space: nowrap !important; }
  .dashboard-mode-bar,.mode-tool-strip { display: none !important; }
}

/* Timing containment: force cards into normal flow and prevent overlap with Current Item controls. */
.hero-current,
.current-item,
.practice-dashboard,
.practice-grid,
.practice-support-row,
.timing-support-row,
#p03iTimerCard,
#p03iMetronomeCard {
  overflow: visible !important;
  contain: none !important;
}
.hero-actions { position: relative !important; z-index: 4 !important; margin-bottom: 0.62rem !important; }
#p03iTimerCard,
#p03iMetronomeCard {
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
#p03iTimerCard.is-open,
#p03iMetronomeCard.is-open {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin-top: 0.62rem !important;
  margin-bottom: 0.62rem !important;
}
#p03iTimerCard.is-closed,
#p03iMetronomeCard.is-closed {
  display: block !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
#p03iTimerCard .p03i-open-body,
#p03iMetronomeCard .p03i-open-body { position: static !important; display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
#p03iTimerCard.is-closed .p03i-open-body,
#p03iMetronomeCard.is-closed .p03i-open-body { display: none !important; }
#p03iTimerCard.is-open .p03i-closed-strip,
#p03iMetronomeCard.is-open .p03i-closed-strip { display: none !important; }

/* Mobile timing cards: safe, compact, non-overlapping. */
@media (max-width: 760px) {
  #p03iTimerCard.p03i-timing-card,
  #p03iMetronomeCard.p03i-timing-card {
    padding: 0.72rem !important;
    border-radius: 18px !important;
  }
  #p03iTimerCard .p03i-timing-open-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.4rem !important;
    align-items: center !important;
    margin-bottom: 0.44rem !important;
  }
  #p03iTimerCard .p03i-timer-body {
    display: grid !important;
    grid-template-columns: 3.8rem minmax(0, 1fr) !important;
    grid-template-areas: "minutes presets" "actions actions" !important;
    gap: 0.34rem 0.42rem !important;
    align-items: center !important;
  }
  #p03iTimerCard .p03i-number-input { grid-area: minutes !important; width: 3.65rem !important; border-radius: 12px !important; }
  #p03iTimerCard .p03i-presets { grid-area: presets !important; display: flex !important; justify-content: space-between !important; gap: 0.22rem !important; min-width: 0 !important; }
  #p03iTimerCard .p03i-action-row { grid-area: actions !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.24rem !important; overflow: hidden !important; }
  #p03iTimerCard .p03i-action-row button { min-width: 0 !important; flex: 1 1 0 !important; font-size: 0.82rem !important; padding: 0.38rem 0.42rem !important; }
  #p03iTimerCard .p03m-timer-auto-row { flex: 0 0 auto !important; font-size: 0.8rem !important; }

  #p03iMetronomeCard .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "title actions auto" !important;
    gap: 0.26rem !important;
    align-items: center !important;
    margin-bottom: 0.42rem !important;
  }
  #p03iMetronomeCard .p03i-timing-title { grid-area: title !important; justify-self: start !important; }
  #p03iMetronomeCard .p03i-metronome-actions { grid-area: actions !important; display: flex !important; flex-wrap: nowrap !important; gap: 0.22rem !important; }
  #p03iMetronomeCard .p03i-metronome-actions button { font-size: 0.78rem !important; padding: 0.34rem 0.42rem !important; min-height: 1.85rem !important; }
  #p03iMetronomeCard .p03i-metronome-hide { display: inline-flex !important; }
  #p03iMetronomeCard #p03mAutoSound,
  #p03iMetronomeCard .p03m-metro-auto-row { grid-area: auto !important; display: inline-flex !important; font-size: 0.78rem !important; align-items: center !important; gap: 0.2rem !important; }
  #p03iMetronomeCard .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: 3.6rem minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: 0.3rem !important;
    align-items: end !important;
  }
  #p03iMetronomeCard .p03i-header-bpm-field { grid-column: 1 !important; }
  #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) { grid-column: 2 !important; }
  #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) { grid-column: 3 !important; }
  #p03iMetronomeCard .p03i-bpm-input { width: 3.35rem !important; }
  #p03iMetronomeCard select { font-size: 0.78rem !important; padding: 0.34rem 0.38rem !important; }
}

/* Desktop: keep the metronome hide button out of the desktop layout. */
@media (min-width: 761px) {
  #p03iMetronomeCard .p03i-metronome-hide { display: none !important; }
}

/* P03Z Mobile Nav + Update Stabilization: only final small fixes. */
:root {
  --zb-p03y-mobile-nav-bg: #e8f0f4;
  --zb-p03y-mobile-nav-bg-2: #dfeaf0;
}

/* Keep current item description visible and separated from timing tools. */
#currentItemDescription.description {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 6 !important;
  margin: 0.35rem 0 0.55rem !important;
  max-height: none !important;
  overflow: visible !important;
}
.hero-actions {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 0.38rem !important;
  margin-bottom: 0.72rem !important;
}
#p03iTimerCard,
#p03iMetronomeCard,
.practice-support-row,
.timing-support-row {
  position: relative !important;
  clear: both !important;
  z-index: 1 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .app-shell {
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Mobile nav is the bottom tab bar. */
  .app-nav {
    position: fixed !important;
    top: auto !important;
    left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.42rem, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 999 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    padding: 0.38rem !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, var(--zb-p03y-mobile-nav-bg), var(--zb-p03y-mobile-nav-bg-2)) !important;
    border: 1px solid rgba(64, 86, 96, 0.22) !important;
    box-shadow: 0 -8px 26px rgba(20, 30, 50, 0.13), inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  .app-nav-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.85rem !important;
    padding: 0.48rem 0.28rem !important;
    border-radius: 16px !important;
    font-size: clamp(0.76rem, 3.25vw, 0.94rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .app-nav-button[data-screen="advanced"],
  .app-nav-button[data-screen="system"] {
    display: none !important;
  }
  .app-nav-button.is-selected {
    box-shadow: 0 5px 13px rgba(31, 94, 255, 0.22) !important;
  }

  /* Make build/update reliably visible in the phone header. */
  .app-header.brand-header,
  .app-header.header-with-nav {
    overflow: visible !important;
  }
  .header-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.32rem !important;
    min-width: 0 !important;
  }
  #pwaUpdateStatus,
  .pwa-update-status {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #pwaReloadButton,
  .pwa-reload-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.08rem !important;
    padding: 0.38rem 0.58rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
  #pwaVersionLabel,
  #pwaUpdateMessage {
    display: none !important;
  }
  #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.08rem !important;
    padding: 0.38rem 0.58rem !important;
    font-size: 0.82rem !important;
    transform: none !important;
    align-self: center !important;
  }

  /* Keep description in the current item block above the timing tools. */
  #currentItemDescription.description {
    font-size: 0.88rem !important;
    line-height: 1.24 !important;
    margin: 0.26rem 0 0.5rem !important;
    background: rgba(255,255,255,0.48) !important;
    border: 1px solid rgba(100,112,132,0.12) !important;
    border-radius: 12px !important;
    padding: 0.42rem 0.5rem !important;
  }

  /* Do not let expanded timing cards visually cover the description/action row. */
  #p03iTimerCard,
  #p03iMetronomeCard {
    margin-top: 0.54rem !important;
    margin-bottom: 0.54rem !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }
  #p03iTimerCard.is-open,
  #p03iMetronomeCard.is-open {
    margin-top: 0.62rem !important;
    margin-bottom: 0.62rem !important;
  }
}

/* P03Z isolated fix: Current Item description + notes containment.
   Scope intentionally limited: no metronome redesign, no header/reference changes. */
.hero-current,
.current-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#currentItemName {
  order: 1 !important;
}

#currentItemMeta {
  order: 2 !important;
}

#currentItemDescription.description {
  order: 3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 12 !important;
  margin: 0.34rem 0 0.54rem !important;
  max-height: none !important;
  overflow: visible !important;
  clear: both !important;
}

.hero-actions {
  order: 4 !important;
  position: relative !important;
  z-index: 11 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.58rem !important;
}

#currentItemNotesBox.current-item-notes-box {
  order: 5 !important;
  display: grid;
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0.08rem !important;
  margin-bottom: 0.58rem !important;
  clear: both !important;
}

#currentItemNotesBox.current-item-notes-box[hidden] {
  display: none !important;
}

.compact-countdown-card,
.countdown-card,
#p03iTimerCard {
  order: 10 !important;
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
  transform: none !important;
}

.practice-support-row,
.timing-support-row,
#p03iMetronomeCard {
  order: 11 !important;
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
  transform: none !important;
}

.current-item-references-box {
  order: 20 !important;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  order: 30 !important;
}

@media (max-width: 760px) {
  #currentItemDescription.description {
    background: rgba(255,255,255,0.58) !important;
    border: 1px solid rgba(100,112,132,0.14) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    font-size: 0.88rem !important;
    line-height: 1.26 !important;
    padding: 0.44rem 0.52rem !important;
    margin: 0.28rem 0 0.52rem !important;
  }

  #currentItemNotesBox.current-item-notes-box {
    background: rgba(248,250,252,0.9) !important;
    border: 1px solid rgba(100,112,132,0.18) !important;
    border-radius: 13px !important;
    padding: 0.46rem 0.5rem !important;
    gap: 0.28rem !important;
  }

  #currentItemNotesBox .current-item-notes-header {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
  }

  #currentItemNotesBox .current-item-notes-header label {
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    margin: 0 !important;
  }

  #currentItemNotesBox .current-item-notes-header span {
    display: none !important;
  }

  #currentItemNotes {
    min-height: 2.15rem !important;
    max-height: 3.6rem !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    padding: 0.42rem 0.5rem !important;
  }

  /* Expansion must go downward only; no tool is allowed to rise over description/notes. */
  .compact-countdown-card,
  .countdown-card,
  #p03iTimerCard,
  .practice-support-row,
  .timing-support-row,
  #p03iMetronomeCard {
    margin-top: 0.54rem !important;
    margin-bottom: 0.54rem !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #p03iTimerCard.is-open,
  #p03iMetronomeCard.is-open {
    margin-top: 0.64rem !important;
    margin-bottom: 0.64rem !important;
  }
}


/* P04P isolated fix: mobile note field + visible update/version control.
   Scope: no timing redesign, no reference/layout restructuring. */
@media (max-width: 760px) {
  .brand-header,
  .compact-brand-header,
  .header-with-nav,
  .header-right {
    overflow: visible !important;
  }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-height: 2.05rem !important;
    max-height: 2.15rem !important;
    padding: 0.22rem 0.32rem !important;
    flex: 0 0 auto !important;
  }

  #pwaReloadButton.pwa-reload-button,
  #pwaReloadButton {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.78rem !important;
    max-height: 1.9rem !important;
    padding: 0.26rem 0.42rem !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #appVersionDisplay,
  #pwaVersionLabel {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  #backupHealthButton.backup-health-button {
    align-self: center !important;
    transform: none !important;
  }

  #currentItemNotesBox.current-item-notes-box {
    order: 5 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9 !important;
    background: rgba(248,250,252,0.92) !important;
    border: 1px solid rgba(100,112,132,0.18) !important;
    border-radius: 13px !important;
    padding: 0.42rem 0.5rem !important;
    gap: 0.26rem !important;
    margin: 0.1rem 0 0.52rem !important;
    clear: both !important;
  }

  #currentItemNotesBox.current-item-notes-box[hidden] {
    display: none !important;
  }

  #currentItemNotesBox .current-item-notes-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 1rem !important;
    margin: 0 !important;
  }

  #currentItemNotesBox .current-item-notes-header label {
    display: inline-flex !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #currentItemNotesBox .current-item-notes-header span {
    display: none !important;
  }

  #currentItemNotes {
    display: block !important;
    min-height: 2.05rem !important;
    max-height: 3.2rem !important;
    width: 100% !important;
    font-size: 0.84rem !important;
    line-height: 1.18 !important;
    padding: 0.38rem 0.48rem !important;
    resize: vertical !important;
  }
}

/* P04P isolated fix: mobile header cleanup + move notes below timing tools.
   Scope: no timing redesign, no reference/layout restructuring. */
@media (max-width: 760px) {
  .app-header.brand-header,
  .app-header.header-with-nav,
  .app-header.compact-brand-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 0.42rem !important;
    padding: 0.64rem 0.72rem !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .brand-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-block h1 {
    color: #ffffff !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(1.22rem, 5.7vw, 1.62rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .brand-tagline,
  .brand-support,
  .today-line .build-label {
    display: none !important;
  }

  .today-line.app-build-line {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
  }

  #appVersionDisplay.prominent-build-chip,
  #appVersionDisplay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 2.02rem !important;
    padding: 0.34rem 0.56rem !important;
    border-radius: 999px !important;
    background: #172033 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .header-right {
    display: contents !important;
  }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 2.16rem !important;
    max-height: 2.16rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #pwaVersionLabel,
  #pwaUpdateMessage {
    display: none !important;
  }

  #pwaReloadButton.pwa-reload-button,
  #pwaReloadButton,
  #mobileForceUpdateButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 2.16rem !important;
    max-height: 2.16rem !important;
    padding: 0.38rem 0.6rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #backupHealthButton.backup-health-button {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    transform: none !important;
    min-height: 2.16rem !important;
    max-height: 2.16rem !important;
    padding: 0.38rem 0.62rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .dashboard-mode-bar,
  .mode-tool-strip {
    display: none !important;
  }

  /* Notes now live below the timing tools so the current item/action area stays visible. */
  #currentItemNotesBox.current-item-notes-box {
    order: 24 !important;
    display: grid !important;
    margin: 0.48rem 0 0.58rem !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel {
    order: 30 !important;
  }
}

/* P04P isolated patch: mobile header fit + compact metronome. */
@media (max-width: 760px) {
  .app-header.brand-header,
  .app-header.header-with-nav,
  .app-header.compact-brand-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 0.32rem !important;
    padding: 0.58rem 0.62rem !important;
    overflow: hidden !important;
  }

  .brand-block {
    min-width: 0 !important;
    gap: 0.28rem !important;
  }

  .brand-block h1 {
    font-size: clamp(1.18rem, 5.2vw, 1.48rem) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  #appVersionDisplay.prominent-build-chip,
  #appVersionDisplay {
    min-height: 1.92rem !important;
    max-height: 1.92rem !important;
    padding: 0.32rem 0.48rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
  }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus {
    grid-column: 3 !important;
    min-height: 1.92rem !important;
    max-height: 1.92rem !important;
    align-self: center !important;
  }

  #pwaReloadButton.pwa-reload-button,
  #pwaReloadButton,
  #mobileForceUpdateButton {
    min-height: 1.92rem !important;
    max-height: 1.92rem !important;
    padding: 0.32rem 0.5rem !important;
    font-size: 0.78rem !important;
  }

  #backupHealthButton.backup-health-button {
    grid-column: 4 !important;
    align-self: center !important;
    transform: translateY(0) !important;
    min-height: 1.92rem !important;
    max-height: 1.92rem !important;
    padding: 0.32rem 0.52rem !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* Compact expanded metronome into two predictable rows. */
  #p03iMetronomeCard.p03i-metronome-card.is-open {
    padding: 0.54rem 0.6rem !important;
    gap: 0.44rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-open-body {
    display: grid !important;
    gap: 0.44rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 0.34rem !important;
    min-height: 2rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-header .p03i-timing-title {
    grid-column: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    font-size: 0.98rem !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-actions {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.26rem !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.is-open .p03i-metronome-hide {
    min-height: 1.76rem !important;
    max-height: 1.76rem !important;
    padding: 0.3rem 0.42rem !important;
    font-size: 0.76rem !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-hide {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: 0.58fr 0.72fr minmax(0, 1.22fr) minmax(0, 1.42fr) !important;
    align-items: end !important;
    gap: 0.32rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-header-bpm-field,
  #p03iMetronomeCard.is-open .p04c-metro-auto-field,
  #p03iMetronomeCard.is-open .p03i-metronome-select-grid .p03i-field {
    min-width: 0 !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-field label,
  #p03iMetronomeCard.is-open .p04c-metro-auto-field span {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
  }

  #p03iMetronomeCard.is-open .p03i-bpm-input,
  #p03iMetronomeCard.is-open .p03i-metronome-select-grid select {
    width: 100% !important;
    min-height: 1.82rem !important;
    max-height: 1.82rem !important;
    padding: 0.25rem 0.42rem !important;
    font-size: 0.76rem !important;
    border-radius: 12px !important;
  }

  #p03iMetronomeCard.is-open .p04c-metro-auto-field {
    display: grid !important;
    justify-items: center !important;
    align-items: end !important;
    gap: 0.16rem !important;
  }

  #p03iMetronomeCard.is-open .p04c-metro-auto-field input {
    width: 1.54rem !important;
    height: 1.54rem !important;
    margin: 0 !important;
  }
}

/* P04P isolated: mobile header de-dupe + metronome top-row tidy. */
@media (max-width: 760px) {
  .app-header.brand-header,
  .app-header.header-with-nav,
  .app-header.compact-brand-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 0.38rem !important;
    padding: 0.58rem 0.68rem !important;
    overflow: hidden !important;
  }

  .app-header .brand-block {
    grid-column: 1 !important;
    min-width: 0 !important;
    display: block !important;
  }

  .app-header .brand-block h1 {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: clamp(1.25rem, 6vw, 1.62rem) !important;
    line-height: 1 !important;
  }

  /* Hide the older build/update line under the title. Keep only the single right-side version/update control. */
  .app-header .app-build-line,
  .app-header #appUpdateStatus,
  #appUpdateStatus {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .app-header .header-right { display: contents !important; }
  .app-header .dashboard-mode-bar,
  .app-header .mode-tool-strip { display: none !important; }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.24rem !important;
    min-width: 0 !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #pwaVersionLabel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    padding: 0.36rem 0.46rem !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  #pwaUpdateMessage { display: none !important; }

  #pwaReloadButton.pwa-reload-button,
  #pwaReloadButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    padding: 0.35rem 0.52rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #backupHealthButton.backup-health-button {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    padding: 0.35rem 0.54rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    top: auto !important;
    transform: none !important;
    position: static !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 0.28rem !important;
  }
  #p03iMetronomeCard.is-open .p03i-metronome-header .p03i-timing-title {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  #p03iMetronomeCard.is-open .p03i-metronome-actions {
    grid-column: 2 !important;
    display: inline-flex !important;
    gap: 0.24rem !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }
  #p03iMetronomeCard.is-open #p03mAutoSound,
  #p03iMetronomeCard.is-open .p04d-metro-auto-field {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  #p03iMetronomeCard.is-open .p03i-metronome-hide {
    grid-column: 4 !important;
    justify-self: end !important;
    margin: 0 !important;
  }
  #p03iMetronomeCard.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: 0.58fr minmax(0, 1.16fr) minmax(0, 1.32fr) !important;
    align-items: end !important;
    gap: 0.34rem !important;
  }
}

/* P04P isolated patch: mobile header fit + two-row metronome compacting. */
@media (max-width: 760px) {
  .app-header.brand-header,
  .app-header.header-with-nav,
  .app-header.compact-brand-header {
    display: grid !important;
    grid-template-columns: minmax(5.8rem, 1fr) auto auto auto !important;
    align-items: center !important;
    column-gap: 0.22rem !important;
    padding: 0.5rem 0.46rem !important;
    overflow: hidden !important;
  }

  .app-header .brand-block {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .app-header .brand-block h1 {
    font-size: clamp(1.02rem, 5.25vw, 1.42rem) !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus {
    grid-column: 2 / span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }

  #pwaVersionLabel {
    min-width: 0 !important;
    min-height: 1.94rem !important;
    max-height: 1.94rem !important;
    padding: 0.34rem 0.42rem !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.035em !important;
  }

  #pwaReloadButton.pwa-reload-button,
  #pwaReloadButton {
    min-height: 1.94rem !important;
    max-height: 1.94rem !important;
    padding: 0.34rem 0.44rem !important;
    font-size: 0.76rem !important;
  }

  #backupHealthButton.backup-health-button {
    grid-column: 4 !important;
    min-height: 1.94rem !important;
    max-height: 1.94rem !important;
    padding: 0.34rem 0.46rem !important;
    font-size: 0.76rem !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  /* Keep expanded metronome to two rows: title/actions then BPM/Sound/Pattern. */
  #p03iMetronomeCard.p03i-metronome-card.is-open {
    padding: 0.48rem 0.56rem !important;
    gap: 0.34rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-open-body {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 0.34rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 0.22rem !important;
    min-height: 1.9rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-header .p03i-timing-title {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 0.96rem !important;
    line-height: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-actions {
    grid-column: 2 !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.18rem !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.is-open #p03mAutoSound,
  #p03iMetronomeCard.is-open .p04c-metro-auto-field,
  #p03iMetronomeCard.is-open .p04d-metro-auto-field {
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.16rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-hide {
    grid-column: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.is-open .p03i-metronome-hide {
    min-height: 1.72rem !important;
    max-height: 1.72rem !important;
    padding: 0.26rem 0.36rem !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  #p03iMetronomeCard.is-open .p04c-metro-auto-field .p03i-auto-check,
  #p03iMetronomeCard.is-open .p04d-metro-auto-field .p03i-auto-check,
  #p03iMetronomeCard.is-open #p03mAutoSound .p03i-auto-check {
    width: 1.42rem !important;
    height: 1.42rem !important;
    min-width: 1.42rem !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: 0.58fr minmax(0, 1.1fr) minmax(0, 1.18fr) !important;
    align-items: end !important;
    gap: 0.28rem !important;
    margin-top: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-metronome-select-grid .p03i-field,
  #p03iMetronomeCard.is-open .p03i-header-bpm-field {
    min-width: 0 !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.is-open .p03i-field label,
  #p03iMetronomeCard.is-open .p03i-header-bpm-field label,
  #p03iMetronomeCard.is-open .p04c-metro-auto-field span,
  #p03iMetronomeCard.is-open .p04d-metro-auto-field span {
    font-size: 0.54rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
  }

  #p03iMetronomeCard.is-open .p03i-bpm-input,
  #p03iMetronomeCard.is-open .p03i-metronome-select-grid select {
    width: 100% !important;
    min-height: 1.76rem !important;
    max-height: 1.76rem !important;
    padding: 0.22rem 0.38rem !important;
    font-size: 0.72rem !important;
    border-radius: 12px !important;
  }
}


/* P04P: final visible version/header stability and true compact metronome layout. */
@media (max-width: 760px) {
  .app-header.brand-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.34rem !important;
    padding: 0.72rem 0.72rem !important;
    overflow: hidden !important;
  }

  .app-header .brand-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .app-header .brand-block h1 {
    font-size: clamp(1.26rem, 7.1vw, 1.65rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  .app-header .header-right {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.26rem !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .app-build-line,
  #appUpdateStatus,
  #pwaUpdateMessage,
  .dashboard-mode-bar {
    display: none !important;
  }

  #pwaUpdateStatus.pwa-update-status,
  #pwaUpdateStatus.p04j-version-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.24rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }

  #pwaVersionLabel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.02rem !important;
    padding: 0 0.62rem !important;
    border-radius: 999px !important;
    background: #111a2c !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  #pwaReloadButton.pwa-reload-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.02rem !important;
    padding: 0 0.62rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.02rem !important;
    padding: 0 0.66rem !important;
    margin: 0 !important;
    transform: none !important;
    position: static !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open {
    padding: 0.72rem 0.72rem 0.68rem !important;
    overflow: hidden !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 0.44rem !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(6.2rem, 1fr) auto auto auto !important;
    grid-template-areas: "title actions hide auto" !important;
    align-items: center !important;
    column-gap: 0.22rem !important;
    row-gap: 0 !important;
    min-height: 1.78rem !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p03i-timing-title {
    grid-area: title !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    grid-area: actions !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 0.16rem !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    grid-area: hide !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    grid-area: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 0.14rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field input {
    width: 1.18rem !important;
    height: 1.18rem !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    min-width: 0 !important;
    min-height: 1.62rem !important;
    max-height: 1.62rem !important;
    padding: 0.2rem 0.34rem !important;
    border-radius: 999px !important;
    font-size: 0.69rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: minmax(3.65rem, 0.55fr) minmax(6.7rem, 1fr) minmax(7.25rem, 1.08fr) !important;
    align-items: end !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-field label,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label {
    display: block !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.095em !important;
    line-height: 1 !important;
    margin: 0 0 0.16rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-bpm-input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid select {
    width: 100% !important;
    min-height: 1.78rem !important;
    max-height: 1.78rem !important;
    padding: 0.22rem 0.34rem !important;
    border-radius: 12px !important;
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 390px) {
  #pwaVersionLabel,
  #pwaReloadButton.pwa-reload-button,
  #backupHealthButton.backup-health-button {
    min-height: 1.86rem !important;
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
    font-size: 0.72rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    grid-template-columns: minmax(5.35rem, 1fr) auto auto auto !important;
    column-gap: 0.14rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    font-size: 0.62rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    grid-template-columns: minmax(3.25rem, 0.52fr) minmax(5.8rem, 1fr) minmax(6.05rem, 1.05fr) !important;
    gap: 0.2rem !important;
  }
}


/* P04P surgical finalizer: keep mobile brand visible and force metronome into a stable two-row grid. */
@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    display: grid !important;
    grid-template-columns: minmax(7.4rem, 1fr) auto auto auto !important;
    grid-template-areas: "brand version update backup" !important;
    align-items: center !important;
    column-gap: 0.28rem !important;
    padding: 0.64rem 0.58rem !important;
    overflow: hidden !important;
  }

  .app-header .brand-block {
    grid-area: brand !important;
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .app-header .brand-block h1,
  .brand-block h1,
  .compact-brand-header h1 {
    display: block !important;
    color: #ffffff !important;
    font-size: clamp(1.15rem, 5.6vw, 1.52rem) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .brand-tagline,
  .brand-support,
  .app-build-line,
  #appUpdateStatus,
  #pwaUpdateMessage,
  .dashboard-mode-bar { display: none !important; }

  #pwaUpdateStatus.pwa-update-status {
    grid-area: version / version / version / update !important;
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #pwaVersionLabel {
    grid-area: version !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 3.35rem !important;
    max-width: 3.6rem !important;
    min-height: 1.84rem !important;
    padding: 0 0.46rem !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    background: #111a2c !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
  }

  #pwaReloadButton.pwa-reload-button {
    grid-area: update !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 3.85rem !important;
    max-width: 4.3rem !important;
    min-height: 1.84rem !important;
    padding: 0 0.46rem !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  #backupHealthButton.backup-health-button {
    grid-area: backup !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 4.65rem !important;
    max-width: 5.2rem !important;
    min-height: 1.84rem !important;
    padding: 0 0.48rem !important;
    margin: 0 !important;
    transform: none !important;
    position: static !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open {
    padding: 0.64rem 0.62rem 0.62rem !important;
    overflow: hidden !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 0.36rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(6.2rem, 1fr) auto auto auto auto !important;
    grid-template-areas: "title start stop hide auto" !important;
    align-items: center !important;
    column-gap: 0.16rem !important;
    row-gap: 0 !important;
    min-height: 1.52rem !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    grid-area: title !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    display: contents !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button:nth-of-type(1) { grid-area: start !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button:nth-of-type(2) { grid-area: stop !important; }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    grid-area: hide !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    grid-area: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.12rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 0.63rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field input {
    width: 1.02rem !important;
    height: 1.02rem !important;
    min-width: 1.02rem !important;
    min-height: 1.02rem !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    min-width: 0 !important;
    min-height: 1.48rem !important;
    max-height: 1.48rem !important;
    padding: 0.18rem 0.3rem !important;
    border-radius: 999px !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: minmax(3.65rem, 0.55fr) minmax(0, 1.15fr) minmax(0, 1fr) !important;
    grid-template-areas: "bpm sound pattern" !important;
    align-items: end !important;
    gap: 0.24rem !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field { grid-area: bpm !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect { grid-area: auto !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect.closest { grid-area: sound !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect.closest { grid-area: pattern !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect { min-width: 0 !important; }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(1) { grid-area: bpm !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(2) { grid-area: sound !important; }
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(3) { grid-area: pattern !important; }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-field label,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label {
    display: block !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.085em !important;
    line-height: 1 !important;
    margin: 0 0 0.13rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-bpm-input,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 1.58rem !important;
    max-height: 1.58rem !important;
    padding: 0.16rem 0.26rem !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 390px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    grid-template-columns: minmax(6.95rem, 1fr) auto auto auto !important;
    column-gap: 0.22rem !important;
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
  }

  .app-header .brand-block h1,
  .brand-block h1,
  .compact-brand-header h1 { font-size: 1.18rem !important; }

  #pwaVersionLabel { min-width: 3.05rem !important; max-width: 3.12rem !important; padding-left: 0.36rem !important; padding-right: 0.36rem !important; font-size: 0.68rem !important; }
  #pwaReloadButton.pwa-reload-button { min-width: 3.45rem !important; max-width: 3.65rem !important; padding-left: 0.35rem !important; padding-right: 0.35rem !important; font-size: 0.7rem !important; }
  #backupHealthButton.backup-health-button { min-width: 4.25rem !important; max-width: 4.55rem !important; padding-left: 0.36rem !important; padding-right: 0.36rem !important; font-size: 0.68rem !important; }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    grid-template-columns: minmax(5.2rem, 1fr) auto auto auto auto !important;
    column-gap: 0.12rem !important;
  }
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    font-size: 0.58rem !important;
    padding-left: 0.22rem !important;
    padding-right: 0.22rem !important;
  }
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    grid-template-columns: minmax(3.25rem, 0.56fr) minmax(0, 1.08fr) minmax(0, 0.98fr) !important;
    gap: 0.18rem !important;
  }
}


/* P04P isolated patch: mobile practice content scroll + closed timing strip spacing.
   Scope: do not change header, metronome internals, countdown internals, or desktop layout. */
@media (max-width: 760px) {
  html,
  body {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior-y: none !important;
  }

  .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .app-header,
  .app-header.header-with-nav,
  .app-header.compact-brand-header,
  .brand-header {
    flex: 0 0 auto !important;
  }

  .app-screen {
    min-height: 0 !important;
  }

  .card.practice-dashboard.app-screen,
  .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(7.35rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }

  .hero-current,
  #sessionPanel,
  .practice-grid {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Keep the closed tool strips visually light so opening the page shows more content. */
  #p03iTimerCard.p03i-timing-card.is-closed,
  #p03iMetronomeCard.p03i-timing-card.is-closed {
    margin-top: 0.42rem !important;
    margin-bottom: 0.42rem !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    min-height: 2.72rem !important;
    padding: 0.48rem 0.68rem !important;
    align-items: center !important;
  }

  #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip strong,
  #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip strong {
    line-height: 1.05 !important;
  }

  #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    min-height: 2.0rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .current-item-notes-box {
    margin-top: 0.5rem !important;
  }

  .main-queue-panel,
  .queue-panel.compact-side-queue {
    margin-top: 0.55rem !important;
  }
}


/* P04P surgical fix: restore mobile scrolling for Setup and other non-dashboard screens.
   Keep P04O dashboard behavior intact; do not touch queue/timing/metronome layout. */
@media (max-width: 760px) {
  .app-screen[data-screen-panel="setup"],
  .app-screen[data-screen-panel="manage"],
  .app-screen[data-screen-panel="log"],
  .app-screen[data-screen-panel="system"],
  .app-screen[data-screen-panel="advanced"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(6.8rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .setup-screen,
  .setup-card-row,
  .setup-action-card {
    max-height: none !important;
  }
}


/* P04Z mobile header/status readability only. */
@media (max-width: 760px) {
  .app-header.header-with-nav .brand-block h1,
  .app-header.compact-brand-header .brand-block h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    font-size: clamp(1.2rem, 6vw, 1.72rem) !important;
    line-height: 1 !important;
  }

  .app-header.header-with-nav .brand-tagline,
  .app-header.header-with-nav .brand-support,
  .app-header.header-with-nav .app-build-line,
  #pwaUpdateMessage {
    display: none !important;
  }

  #pwaUpdateStatus.pwa-update-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.24rem !important;
    min-width: 0 !important;
    padding: 0.16rem !important;
    white-space: nowrap !important;
  }

  #pwaVersionLabel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 3.2rem !important;
    max-width: 3.4rem !important;
    padding: 0.32rem 0.38rem !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #pwaReloadButton.pwa-reload-button {
    min-width: 3.9rem !important;
    min-height: 2.25rem !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #backupHealthButton.backup-health-button {
    min-width: 4.7rem !important;
    min-height: 2.25rem !important;
    max-width: none !important;
    padding: 0.4rem 0.52rem !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}


/* P04Z Practice/Dashboard block order and timer preset readability. */
.current-item-references-box {
  order: 5 !important;
}

#currentItemNotesBox.current-item-notes-box {
  order: 6 !important;
}

#p03iTimerCard,
.compact-countdown-card,
.countdown-card {
  order: 7 !important;
}

#p03iMetronomeCard,
.practice-support-row,
.timing-support-row {
  order: 8 !important;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  order: 9 !important;
}

#p03iTimerCard .p03i-preset,
.compact-countdown-card .timer-preset,
.countdown-card .timer-preset {
  color: #172033 !important;
}

#p03iTimerCard .p03i-preset.is-selected,
.compact-countdown-card .timer-preset.is-selected,
.countdown-card .timer-preset.is-selected {
  background: #1f5eff !important;
  border-color: #1f5eff !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}


/* P04Z mobile Practice/Dashboard scroll and queue reachability. */
@media (max-width: 760px) {
  body[data-current-screen="dashboard"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav {
    flex: 0 0 auto !important;
  }

  .card.practice-dashboard.app-screen,
  .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }

  .practice-dashboard .practice-grid,
  .practice-dashboard #sessionPanel,
  .practice-dashboard .hero-current,
  .practice-dashboard .current-item {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel,
  .queue-panel.compact-side-queue.main-queue-panel {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .main-queue-panel .session-queue,
  .queue-panel.main-queue-panel .session-queue,
  .queue-panel.compact-side-queue.main-queue-panel .session-queue {
    max-height: min(31rem, 52dvh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-right: 0.18rem !important;
  }

  .main-queue-panel .queue-item,
  .main-queue-panel .queue-item.compact-queue-item {
    min-height: 2.75rem !important;
  }
}


/* P04Z mobile Practice/Dashboard fixed scroll viewport. */
@media (max-width: 760px) {
  body[data-current-screen="dashboard"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav,
  body[data-current-screen="dashboard"] .brand-header {
    flex: 0 0 auto !important;
  }

  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    flex: 0 0 calc(100dvh - 5.85rem) !important;
    height: calc(100dvh - 5.85rem) !important;
    min-height: calc(100dvh - 5.85rem) !important;
    max-height: calc(100dvh - 5.85rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(8.4rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard .practice-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel,
  body[data-current-screen="dashboard"] .practice-dashboard .hero-current,
  body[data-current-screen="dashboard"] .practice-dashboard .current-item {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: stretch !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard .hero-current > *,
  body[data-current-screen="dashboard"] #sessionPanel > *,
  body[data-current-screen="dashboard"] .practice-grid > * {
    flex-shrink: 0 !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel .session-queue {
    max-height: min(31rem, 72dvh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
}


/* P04Z mobile lower-panel density polish. */
@media (max-width: 760px) {
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,248,246,0.98) 58%, rgba(232,241,237,0.98) 100%) !important;
    padding-bottom: calc(6.9rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .hero-current {
    gap: 0 !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box,
  body[data-current-screen="dashboard"] #p03iTimerCard,
  body[data-current-screen="dashboard"] #p03iMetronomeCard,
  body[data-current-screen="dashboard"] .main-queue-panel {
    margin-top: 0.38rem !important;
    margin-bottom: 0.38rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box {
    padding: 0.42rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotes {
    min-height: 2rem !important;
    max-height: 3.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed {
    margin-top: 0.32rem !important;
    margin-bottom: 0.32rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    min-height: 2.28rem !important;
    padding: 0.34rem 0.58rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    min-height: 1.78rem !important;
    padding: 0.24rem 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-open,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-open {
    margin-top: 0.46rem !important;
    margin-bottom: 0.46rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel {
    background: linear-gradient(180deg, rgba(250,252,251,0.96), rgba(238,246,242,0.96)) !important;
    padding: 0.5rem 0.52rem !important;
    border-radius: 14px !important;
    margin-bottom: calc(0.72rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-heading,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .queue-heading {
    margin-bottom: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-title-row {
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel h3 {
    font-size: 0.95rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-helper {
    margin-top: 0.16rem !important;
    font-size: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel .session-queue {
    gap: 0.28rem !important;
    padding: 0 !important;
    max-height: min(29rem, 68dvh) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-item,
  body[data-current-screen="dashboard"] .main-queue-panel .queue-item.compact-queue-item {
    min-height: 2.48rem !important;
    padding: 0.34rem 0.42rem !important;
  }
}

/* P04Z final mobile density and panel separation polish. */
@media (max-width: 760px) {
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background: linear-gradient(180deg, rgba(252,254,253,0.98) 0%, rgba(237,246,241,0.98) 54%, rgba(218,232,225,0.98) 100%) !important;
    padding-bottom: calc(6.35rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box,
  body[data-current-screen="dashboard"] #p03iTimerCard,
  body[data-current-screen="dashboard"] #p03iMetronomeCard,
  body[data-current-screen="dashboard"] .main-queue-panel {
    margin-top: 0.26rem !important;
    margin-bottom: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box {
    padding: 0.38rem 0.44rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotes {
    min-height: 1.9rem !important;
    max-height: 2.85rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed {
    margin-top: 0.24rem !important;
    margin-bottom: 0.24rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    min-height: 2.08rem !important;
    padding: 0.28rem 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    min-height: 1.68rem !important;
    padding: 0.2rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-open,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-open {
    margin-top: 0.38rem !important;
    margin-bottom: 0.38rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,252,250,0.98)) !important;
    border: 1px solid rgba(103, 124, 112, 0.2) !important;
    box-shadow: 0 0.35rem 1rem rgba(52, 70, 60, 0.08) !important;
    padding: 0.42rem 0.46rem !important;
    border-radius: 13px !important;
    margin-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-heading,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .queue-heading {
    margin-bottom: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-title-row {
    gap: 0.22rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-helper {
    margin-top: 0.1rem !important;
    font-size: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel .session-queue {
    gap: 0.22rem !important;
    max-height: min(28rem, 66dvh) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-item,
  body[data-current-screen="dashboard"] .main-queue-panel .queue-item.compact-queue-item {
    min-height: 2.38rem !important;
    padding: 0.3rem 0.38rem !important;
  }
}

/* P04Z mobile practice panel contrast and bottom-fill polish. */
@media (max-width: 760px) {
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background: linear-gradient(180deg, rgba(247,246,241,0.99) 0%, rgba(230,226,216,0.99) 48%, rgba(212,220,211,0.99) 100%) !important;
    padding-bottom: calc(7.1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .hero-current {
    gap: 0 !important;
    padding-bottom: 0.12rem !important;
  }

  body[data-current-screen="dashboard"] .hero-actions {
    margin-top: 0.14rem !important;
    margin-bottom: 0.12rem !important;
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box,
  body[data-current-screen="dashboard"] #p03iTimerCard,
  body[data-current-screen="dashboard"] #p03iMetronomeCard,
  body[data-current-screen="dashboard"] .main-queue-panel {
    margin-top: 0.18rem !important;
    margin-bottom: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.current-item-notes-box {
    background: linear-gradient(180deg, rgba(255,253,247,0.99), rgba(248,244,233,0.99)) !important;
    border: 1px solid rgba(132, 118, 88, 0.24) !important;
    box-shadow: 0 0.28rem 0.7rem rgba(75, 65, 47, 0.07) !important;
    padding: 0.34rem 0.42rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotes {
    min-height: 1.82rem !important;
    max-height: 2.7rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card {
    box-shadow: 0 0.3rem 0.8rem rgba(50, 58, 52, 0.07) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card {
    background: linear-gradient(180deg, rgba(247,252,255,0.99), rgba(233,243,249,0.99)) !important;
    border-color: rgba(87, 130, 154, 0.24) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card {
    background: linear-gradient(180deg, rgba(255,252,244,0.99), rgba(246,238,220,0.99)) !important;
    border-color: rgba(151, 124, 76, 0.24) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed {
    margin-top: 0.16rem !important;
    margin-bottom: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    min-height: 2rem !important;
    padding: 0.24rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    min-height: 1.62rem !important;
    padding: 0.18rem 0.44rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard.p03i-timing-card.is-open,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p03i-timing-card.is-open {
    margin-top: 0.26rem !important;
    margin-bottom: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel {
    background: linear-gradient(180deg, rgba(229,244,232,0.99), rgba(209,232,216,0.99)) !important;
    border: 1px solid rgba(73, 130, 91, 0.32) !important;
    box-shadow: 0 0.45rem 1.1rem rgba(42, 88, 56, 0.13) !important;
    padding: 0.38rem 0.44rem !important;
    margin-bottom: calc(0.28rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-heading,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .queue-heading {
    margin-bottom: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-helper {
    margin-top: 0.06rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.main-queue-panel .session-queue,
  body[data-current-screen="dashboard"] .queue-panel.compact-side-queue.main-queue-panel .session-queue {
    gap: 0.18rem !important;
    max-height: min(28rem, 66dvh) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel .queue-item,
  body[data-current-screen="dashboard"] .main-queue-panel .queue-item.compact-queue-item {
    background: rgba(255,255,255,0.76) !important;
    border-color: rgba(86, 133, 96, 0.22) !important;
    min-height: 2.32rem !important;
    padding: 0.28rem 0.36rem !important;
  }
}

/* P05A desktop/tablet Timing Tools row. */
@media (min-width: 861px) {
  .desktop-timing-tools-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr) !important;
    margin: 0.35rem 0 0.45rem !important;
    order: 7 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard,
  .desktop-timing-tools-row > #p03iMetronomeCard {
    align-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard .p03i-open-body,
  .desktop-timing-tools-row > #p03iMetronomeCard .p03i-open-body {
    min-width: 0 !important;
  }
}

/* P05B desktop/tablet compact Timing Tools and reference polish. */
@media (min-width: 861px) {
  .desktop-timing-tools-row {
    align-items: start !important;
    gap: 0.72rem !important;
    grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr) !important;
    margin: 0.24rem 0 0.34rem !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard,
  .desktop-timing-tools-row > #p03iMetronomeCard {
    align-self: start !important;
    min-height: 0 !important;
    padding: 0.42rem 0.56rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-open-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.3rem 0.5rem !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      "title display actions"
      "minutes presets presets" !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-open-header,
  .desktop-timing-tools-row #p03iTimerCard .p03i-timer-body {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-title {
    grid-area: title !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timer-display {
    font-size: 1.1rem !important;
    grid-area: display !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-number-input {
    grid-area: minutes !important;
    min-height: 1.9rem !important;
    width: 3.7rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-presets {
    grid-area: presets !important;
    justify-content: start !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row {
    grid-area: actions !important;
    justify-content: end !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-preset,
  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row button,
  .desktop-timing-tools-row #p03iTimerCard .p03m-timer-auto-row {
    min-height: 1.78rem !important;
    padding-bottom: 0.2rem !important;
    padding-top: 0.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.3rem 0.45rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "title title actions auto"
      "bpm sound pattern pattern" !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-timing-title {
    grid-area: title !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions {
    grid-area: actions !important;
    justify-content: end !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    grid-area: auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    grid-area: bpm !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) {
    grid-area: sound !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    grid-area: pattern !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-bpm-input,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-field select,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions button,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    min-height: 1.82rem !important;
  }

  .main-queue-panel h3,
  .queue-panel.main-queue-panel h3 {
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
  }

  .main-queue-panel .queue-heading,
  .queue-panel.main-queue-panel .queue-heading {
    margin-bottom: 0.45rem !important;
  }

  .current-item-references-box.reference-context-box {
    align-self: start !important;
    min-height: 0 !important;
    padding: 0.62rem 0.72rem !important;
  }

  .current-item-references-box.reference-context-box:not([data-has-references="true"]) {
    display: none !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-context-list,
  .current-item-references-box.reference-context-box[data-has-references="true"] #currentItemReferencesList {
    max-height: 10rem !important;
    overflow-y: auto !important;
  }
}

/* P05C desktop/tablet References strip. */
@media (min-width: 861px) {
  .current-item-references-box.reference-context-box[data-has-references="true"] {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(250,252,248,0.88), rgba(243,248,242,0.86)) !important;
    border: 1px solid rgba(102, 132, 104, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 0.42rem 0.65rem !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    margin: 0.18rem 0 0.22rem !important;
    min-height: 0 !important;
    padding: 0.38rem 0.54rem !important;
    width: 100% !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-box-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.48rem !important;
    margin: 0 !important;
    min-width: max-content !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-box-header > div {
    align-items: baseline !important;
    display: inline-flex !important;
    gap: 0.36rem !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-box-header strong {
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] #currentItemReferencesCount {
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .references-toggle-button {
    display: none !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-context-list,
  .current-item-references-box.reference-context-box[data-has-references="true"] #currentItemReferencesList {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
    margin: 0 !important;
    max-height: 5.6rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-empty-state {
    display: none !important;
  }
}

/* P05D desktop/tablet final Timing Tools polish. */
@media (min-width: 861px) {
  .desktop-timing-tools-row {
    align-items: stretch !important;
    gap: 0.68rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    margin: 0.22rem 0 0.34rem !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard,
  .desktop-timing-tools-row > #p03iMetronomeCard {
    align-self: stretch !important;
    background-color: rgba(255,255,255,0.92) !important;
    min-height: 5.2rem !important;
    padding: 0.34rem 0.46rem !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard {
    background: linear-gradient(135deg, rgba(253,248,255,0.96), rgba(248,244,253,0.94)) !important;
    border-color: rgba(168, 129, 205, 0.26) !important;
  }

  .desktop-timing-tools-row > #p03iMetronomeCard {
    background: linear-gradient(135deg, rgba(255,250,239,0.96), rgba(250,244,232,0.94)) !important;
    border-color: rgba(200, 151, 77, 0.28) !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-open-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.26rem 0.44rem !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      "title display actions"
      "minutes presets presets" !important;
    min-height: 4.3rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-title,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-timing-title {
    font-size: 0.98rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timer-display {
    align-self: center !important;
    font-size: 1.04rem !important;
    line-height: 1 !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row {
    align-items: center !important;
    gap: 0.22rem !important;
    justify-content: end !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-presets {
    gap: 0.26rem !important;
    justify-content: start !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-number-input {
    min-height: 1.74rem !important;
    width: 3.45rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-preset,
  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row button,
  .desktop-timing-tools-row #p03iTimerCard .p03m-timer-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.66rem !important;
    padding: 0.16rem 0.42rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.26rem 0.42rem !important;
    grid-template-columns: 4rem minmax(8.5rem, 0.8fr) minmax(12rem, 1.35fr) auto !important;
    grid-template-areas:
      "title title actions auto"
      "bpm sound pattern pattern" !important;
    min-height: 4.3rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.22rem !important;
    justify-content: end !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.16rem !important;
    justify-content: end !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field {
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-bpm-input {
    min-height: 1.74rem !important;
    width: 3.5rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-field select {
    min-height: 1.74rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions button,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.66rem !important;
    padding: 0.16rem 0.42rem !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] {
    background: linear-gradient(180deg, rgba(251,253,249,0.82), rgba(244,249,243,0.8)) !important;
    border-color: rgba(102, 132, 104, 0.14) !important;
  }

  .main-queue-panel,
  .queue-panel.main-queue-panel {
    background: linear-gradient(135deg, rgba(239,251,244,0.98), rgba(250,255,252,0.96)) !important;
    border-color: rgba(73, 130, 91, 0.22) !important;
  }
}

/* P05E desktop/tablet contrast and Metronome field polish. */
@media (min-width: 861px) {
  .current-item-references-box.reference-context-box[data-has-references="true"] {
    background: linear-gradient(180deg, rgba(255,248,236,0.94), rgba(249,240,222,0.9)) !important;
    border-color: rgba(150, 120, 76, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }

  .current-item-references-box.reference-context-box[data-has-references="true"] .reference-context-list > *,
  .current-item-references-box.reference-context-box[data-has-references="true"] #currentItemReferencesList > * {
    background: rgba(255,255,255,0.78) !important;
    border-color: rgba(150, 120, 76, 0.18) !important;
  }

  #currentItemNotesBox.current-item-notes-box {
    background: linear-gradient(180deg, rgba(246,248,251,0.98), rgba(236,241,247,0.96)) !important;
    border: 1px solid rgba(96, 112, 132, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78) !important;
  }

  #currentItemNotesBox.current-item-notes-box textarea,
  #currentItemNotes {
    background: rgba(255,255,255,0.86) !important;
    border-color: rgba(96, 112, 132, 0.18) !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    column-gap: 0.62rem !important;
    grid-template-columns: 5.2rem minmax(8.4rem, 0.58fr) minmax(15rem, 1.5fr) auto !important;
    grid-template-areas:
      "title title actions auto"
      "bpm fields fields fields" !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    grid-area: bpm !important;
    justify-self: start !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    grid-area: sound !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    grid-area: pattern !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iSoundSelect {
    min-width: 7.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iPatternSelect {
    min-width: 13.5rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-field select {
    text-overflow: clip !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-header {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid {
    align-items: end !important;
    display: grid !important;
    gap: 0.42rem !important;
    grid-area: fields !important;
    grid-template-columns: minmax(8rem, 0.58fr) minmax(15rem, 1.42fr) !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    display: grid !important;
    gap: 0.1rem !important;
    grid-area: bpm !important;
    min-width: 4.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field label {
    display: block !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(1),
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(2),
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-bpm-input {
    width: 4.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    grid-template-columns: 4.8rem minmax(7.5rem, 0.72fr) minmax(11.5rem, 1.28fr) !important;
    grid-template-areas:
      "title actions auto"
      "bpm sound pattern" !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(1),
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) {
    grid-area: sound !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(2),
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    grid-area: pattern !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard #p03iPatternSelect {
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row > #p03iMetronomeCard {
    position: relative !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    bottom: 0.4rem !important;
    left: 0.46rem !important;
    position: absolute !important;
    width: 4.7rem !important;
    z-index: 3 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field label {
    display: block !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iSoundSelect {
    margin-left: 5.05rem !important;
    min-width: 6.4rem !important;
    width: 6.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(1) label,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) label {
    margin-left: 5.05rem !important;
  }
}

/* P05F desktop Metronome control alignment only. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    left: 0.42rem !important;
    width: 4.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field label {
    text-align: center !important;
    width: 4.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-bpm-input {
    width: 4.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iSoundSelect {
    margin-left: 4.85rem !important;
    min-width: 8.2rem !important;
    width: 8.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(1) label,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(1) label {
    margin-left: 4.85rem !important;
    text-align: center !important;
    width: 8.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-child(2),
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    min-width: 11rem !important;
  }
}

/* P05G desktop Metronome row alignment only. */
@media (min-width: 861px) {
  .desktop-timing-tools-row > #p03iMetronomeCard.p03i-metronome-card.is-open {
    align-self: stretch !important;
    min-height: 0 !important;
    padding: 0.56rem 0.62rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    align-content: center !important;
    align-items: center !important;
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-columns: minmax(8.5rem, 1fr) auto !important;
    grid-template-areas:
      "metro-title metro-actions"
      "metro-fields metro-fields" !important;
    grid-template-rows: auto auto !important;
    min-height: 4.45rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    align-self: center !important;
    grid-area: metro-title !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.28rem !important;
    grid-area: metro-actions !important;
    justify-content: end !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    gap: 0.16rem !important;
    grid-area: metro-actions !important;
    justify-self: end !important;
    margin: 0 0 0 9.8rem !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    display: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button {
    min-height: 1.66rem !important;
    padding: 0.2rem 0.48rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field {
    bottom: auto !important;
    display: grid !important;
    gap: 0.12rem !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    left: auto !important;
    margin: 0 !important;
    min-width: 4.4rem !important;
    position: static !important;
    width: 4.4rem !important;
    z-index: auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-field label {
    display: block !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    margin: 0 0 0.12rem !important;
    text-align: left !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label {
    text-align: center !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-bpm-input {
    min-height: 1.76rem !important;
    text-align: center !important;
    width: 4.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(1),
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-of-type(1) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin: 0 0 0 4.9rem !important;
    min-width: 8.7rem !important;
    width: 8.7rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(2),
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin: 0 0 0 14rem !important;
    min-width: 12.6rem !important;
    width: 12.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    margin: 0 !important;
    min-height: 1.76rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P05G correction: keep desktop Metronome as two true rows. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    align-content: center !important;
    display: grid !important;
    gap: 0.34rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "metro-header"
      "metro-controls" !important;
    grid-template-rows: auto auto !important;
    min-height: 4.45rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    align-items: center !important;
    display: grid !important;
    gap: 0.28rem !important;
    grid-area: metro-header !important;
    grid-template-columns: minmax(7rem, 1fr) auto auto !important;
    grid-template-areas: "metro-title metro-actions metro-auto" !important;
    margin: 0 !important;
    min-height: 1.72rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    grid-area: metro-title !important;
    justify-self: start !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.26rem !important;
    grid-area: metro-actions !important;
    justify-content: end !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.14rem !important;
    grid-area: metro-auto !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    display: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    align-items: end !important;
    display: grid !important;
    gap: 0.46rem !important;
    grid-area: metro-controls !important;
    grid-template-columns: 4.4rem 8.8rem 12.8rem minmax(0, 1fr) !important;
    grid-template-areas: "metro-bpm metro-sound metro-pattern ." !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0.54rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field {
    bottom: auto !important;
    display: grid !important;
    gap: 0.12rem !important;
    grid-area: metro-bpm !important;
    justify-self: stretch !important;
    left: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    position: static !important;
    width: 100% !important;
    z-index: auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(1),
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-of-type(1) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-area: metro-sound !important;
    justify-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-child(2),
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:nth-of-type(2) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-area: metro-pattern !important;
    justify-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-field label {
    display: block !important;
    margin: 0 0 0.12rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-bpm-input,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    min-height: 1.76rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-area: metro-sound !important;
    justify-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    display: grid !important;
    gap: 0.12rem !important;
    grid-area: metro-pattern !important;
    justify-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-header-bpm-field {
    bottom: 0.72rem !important;
    display: grid !important;
    gap: 0.12rem !important;
    margin: 0 !important;
    left: 1.16rem !important;
    opacity: 1 !important;
    position: absolute !important;
    visibility: visible !important;
    width: 4.4rem !important;
    z-index: 4 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-header-bpm-field label {
    display: block !important;
    left: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    text-align: center !important;
    top: -0.84rem !important;
    transform: none !important;
    visibility: visible !important;
    width: 4.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-header-bpm-field .p03i-bpm-input {
    display: block !important;
    opacity: 1 !important;
    text-align: center !important;
    visibility: visible !important;
    width: 4.4rem !important;
  }
}

/* P05P desktop Essentials compact collapsed timing tools. */
@media (min-width: 861px) {
  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-closed,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p03i-timing-card.is-closed {
    min-height: 2.9rem !important;
    padding: 0.24rem 0.42rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    min-height: 2.2rem !important;
    padding: 0.16rem 0.24rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    min-height: 1.72rem !important;
    padding: 0.18rem 0.5rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timing-open-header .p03i-tool-button,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p03i-timing-card.is-open .p03i-metronome-hide {
    display: inline-flex !important;
  }
}

/* P05P Practice header mode toggle. */
.practice-dashboard .practice-header .dashboard-mode-buttons {
  display: flex !important;
  margin-left: auto;
}

.practice-dashboard .practice-header .dashboard-mode-button {
  min-height: 1.95rem;
  padding: 0.34rem 0.64rem;
}

@media (max-width: 860px) {
  .practice-dashboard .practice-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.45rem !important;
  }

  .practice-dashboard .practice-header .dashboard-mode-buttons {
    display: flex !important;
    flex: 0 0 auto;
    grid-template-columns: none !important;
    margin-left: auto;
    padding: 0.12rem;
  }
}

@media (max-width: 760px) {
  .practice-dashboard .practice-header .dashboard-mode-button {
    border-radius: 999px;
    font-size: 0.74rem;
    min-height: 1.8rem;
    padding: 0.24rem 0.46rem;
  }
}

/* P05P desktop/tablet timing tool rails. */
@media (min-width: 861px) {
  .desktop-timing-tools-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0.18rem 0 0.32rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard,
  .desktop-timing-tools-row > #p03iMetronomeCard {
    align-self: stretch !important;
    border-radius: 12px !important;
    min-height: 0 !important;
    padding: 0.34rem 0.48rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row > #p03iTimerCard {
    background: linear-gradient(90deg, rgba(254,251,255,0.98), rgba(249,246,253,0.96)) !important;
    border-color: rgba(150, 119, 183, 0.24) !important;
  }

  .desktop-timing-tools-row > #p03iMetronomeCard {
    background: linear-gradient(90deg, rgba(255,252,244,0.98), rgba(250,246,236,0.96)) !important;
    border-color: rgba(186, 141, 74, 0.24) !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-closed-strip,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-closed-strip,
  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-open-header .p03i-tool-button,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-hide {
    display: none !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-open-body,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    display: grid !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-open-header,
  .desktop-timing-tools-row #p03iTimerCard .p03i-timer-body,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-open-body {
    align-items: center !important;
    column-gap: 0.48rem !important;
    grid-template-columns: max-content max-content max-content minmax(12rem, 1fr) max-content !important;
    grid-template-areas: "timer-title timer-display timer-minutes timer-presets timer-actions" !important;
    row-gap: 0.22rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-title {
    grid-area: timer-title !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timer-display {
    font-size: 1.06rem !important;
    grid-area: timer-display !important;
    line-height: 1 !important;
    min-width: 4.2rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-number-input {
    grid-area: timer-minutes !important;
    min-height: 1.8rem !important;
    width: 3.4rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-presets {
    align-items: center !important;
    display: flex !important;
    gap: 0.2rem !important;
    grid-area: timer-presets !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    grid-area: timer-actions !important;
    justify-content: flex-end !important;
    min-width: max-content !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-preset,
  .desktop-timing-tools-row #p03iTimerCard .p03i-action-row button,
  .desktop-timing-tools-row #p03iTimerCard .p03m-timer-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.72rem !important;
    padding: 0.18rem 0.42rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    align-items: center !important;
    column-gap: 0.5rem !important;
    grid-template-columns: max-content max-content max-content max-content minmax(7.8rem, 0.7fr) minmax(11rem, 1fr) !important;
    grid-template-areas: "metro-title metro-actions metro-auto metro-bpm metro-sound metro-pattern" !important;
    row-gap: 0.22rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-timing-title {
    grid-area: metro-title !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    grid-area: metro-actions !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.16rem !important;
    grid-area: metro-auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field {
    grid-area: metro-bpm !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    grid-area: metro-sound !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    grid-area: metro-pattern !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-field {
    align-items: center !important;
    display: grid !important;
    gap: 0.16rem !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-header-bpm-field label,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-field label {
    font-size: 0.64rem !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-bpm-input {
    min-height: 1.8rem !important;
    width: 3.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard #p03iPatternSelect {
    min-height: 1.8rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard .p03i-metronome-actions button,
  .desktop-timing-tools-row #p03iMetronomeCard .p03m-metro-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.72rem !important;
    padding: 0.18rem 0.42rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard .p03i-timing-title,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-timing-title {
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .desktop-timing-tools-row #p03iTimerCard .p03i-open-body,
  .desktop-timing-tools-row #p03iMetronomeCard .p03i-open-body {
    overflow-x: auto !important;
  }
}

/* P05P final rail specificity over older desktop metronome grid passes. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    align-items: center !important;
    column-gap: 0.52rem !important;
    display: grid !important;
    grid-template-areas: "metro-title metro-actions metro-auto metro-bpm metro-sound metro-pattern" !important;
    grid-template-columns: 7.6rem max-content max-content 6.4rem 12rem minmax(11.5rem, 1fr) !important;
    min-height: 0 !important;
    row-gap: 0.18rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    grid-area: metro-title !important;
    margin: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-actions !important;
    margin: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    grid-area: metro-auto !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-bpm !important;
    justify-self: stretch !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-sound !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-pattern !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field label {
    display: inline-flex !important;
    font-size: 0.62rem !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field .p03i-bpm-input {
    flex: 0 0 3.4rem !important;
    width: 3.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.52rem !important;
    overflow-x: auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    align-items: center !important;
    display: flex !important;
    gap: 0.42rem !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    flex: 0 1 auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    flex: 1 1 auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    flex: 0 0 auto !important;
    min-width: 6.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.18rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    flex: 0 1 11rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    flex: 1 1 12rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 0.42rem !important;
    grid-template-areas: "metro-title metro-bpm metro-actions metro-auto" !important;
    grid-template-columns: 8.8rem 4rem max-content max-content !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p03i-timing-title {
    grid-area: metro-title !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p03i-header-bpm-field {
    grid-area: metro-bpm !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p03i-header-bpm-field label {
    display: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p03i-metronome-actions {
    grid-area: metro-actions !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header .p04c-metro-auto-field {
    grid-area: metro-auto !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    flex: 0 1 13.5rem !important;
  }
}

/* P05P desktop Metronome rail alignment. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-areas: "metro-title metro-bpm metro-sound metro-pattern metro-spacer metro-actions metro-auto" !important;
    grid-template-columns:
      6.6rem
      4.4rem
      12rem
      14.6rem
      minmax(0, 0.5fr)
      max-content
      max-content !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: contents !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-timing-title {
    align-self: center !important;
    grid-area: metro-title !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-bpm !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field .p03i-bpm-input {
    flex: 0 0 3.25rem !important;
    width: 3.25rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-sound !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-pattern !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: flex !important;
    gap: 0.18rem !important;
    grid-area: metro-actions !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.14rem !important;
    grid-area: metro-auto !important;
    justify-self: end !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* P05P desktop Metronome rail select readability. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    min-width: 12rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    min-width: 14.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    appearance: auto !important;
    background-color: rgba(255,255,255,0.94) !important;
    color: var(--text) !important;
    max-width: none !important;
    min-height: 1.8rem !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect {
    flex: 0 0 7.6rem !important;
    width: 7.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    flex: 0 0 10.7rem !important;
    width: 10.7rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-open-body {
    display: grid !important;
    grid-template-areas: "metro-title metro-bpm metro-sound metro-pattern" !important;
    grid-template-columns: 5.8rem 3.6rem 11rem minmax(12rem, 1fr) !important;
    padding-right: 12rem !important;
    position: relative !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label {
    display: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    position: absolute !important;
    right: 4.6rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p04c-metro-auto-field {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect) {
    min-width: 11rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    min-width: 12rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect),
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    justify-content: flex-start !important;
    justify-items: start !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field label,
  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid .p03i-field label {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect {
    flex: 0 0 7.2rem !important;
    margin: 0 !important;
    width: 7.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.is-open #p03iPatternSelect {
    flex: 0 0 9.4rem !important;
    margin: 0 !important;
    width: 9.4rem !important;
  }
}

/* P05Q desktop/tablet timing rail groups. */
.p05q-rail-group {
  display: contents;
}

@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-open-body.p05q-rail,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p03i-open-body.p05q-rail {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.54rem !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-timing-open-header,
  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-timer-body,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p03i-metronome-header,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p03i-metronome-select-grid {
    display: none !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p05q-rail-group {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p05q-rail-left {
    flex: 0 0 auto !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p05q-rail-middle {
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p05q-rail-right {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p05q-timer-left {
    gap: 0.46rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p05q-timer-middle {
    flex: 1 1 18rem !important;
    justify-content: flex-start !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p05q-timer-right {
    flex: 0 0 auto !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-presets,
  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-action-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-number-input {
    flex: 0 0 3.3rem !important;
    min-height: 1.78rem !important;
    width: 3.3rem !important;
  }

  .desktop-timing-tools-row #p03iTimerCard.p05q-rail-ready .p03i-timer-display {
    flex: 0 0 4.25rem !important;
    font-size: 1.06rem !important;
    line-height: 1 !important;
    min-width: 4.25rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    flex: 0 0 6.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 auto !important;
    gap: 0.36rem !important;
    justify-content: flex-start !important;
    min-width: 22rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    flex: 0 0 auto !important;
    gap: 0.22rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field {
    flex: 0 0 5.25rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect) {
    flex: 0 0 10.9rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iPatternSelect) {
    flex: 0 1 13.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    position: static !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-bpm-input {
    flex: 0 0 3.3rem !important;
    min-height: 1.78rem !important;
    width: 3.3rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle #p03iSoundSelect {
    flex: 0 0 8.4rem !important;
    min-height: 1.78rem !important;
    width: 8.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle #p03iPatternSelect {
    flex: 0 0 0 !important;
    min-height: 1.78rem !important;
    width: 0 !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right #p03mAutoSound,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p04k-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p04j-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p04i-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p04d-metro-auto-field,
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p04c-metro-auto-field {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    grid-area: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p03i-timing-title {
    flex: 0 0 auto !important;
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row .p05q-rail-ready .p03i-preset,
  .desktop-timing-tools-row .p05q-rail-ready .p03i-action-row button,
  .desktop-timing-tools-row .p05q-rail-ready .p03m-timer-auto-row,
  .desktop-timing-tools-row .p05q-rail-ready .p03m-metro-auto-row {
    font-size: 0.78rem !important;
    min-height: 1.72rem !important;
    padding: 0.18rem 0.42rem !important;
  }
}

/* P05U canonical timing config controls. */
.p05t-pattern-summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 53, 15, 0.18);
  border-radius: 999px;
  color: #4b2e17;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  min-height: 1.78rem;
  min-width: 0;
  padding: 0.28rem 0.58rem;
  white-space: nowrap;
}

.p05t-legacy-pattern-select {
  display: none !important;
}

.p05t-timing-details[hidden] {
  display: none !important;
}

.p05t-timing-details {
  background: rgba(255, 251, 244, 0.84);
  border: 1px solid rgba(120, 53, 15, 0.14);
  border-radius: 10px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.45rem;
  padding: 0.55rem;
  width: 100%;
}

.p05t-timing-details .p03i-field {
  margin: 0;
  min-width: 0;
}

.p05t-timing-details .p03i-field select {
  width: 100%;
}

@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready.p05t-details-open .p03i-open-body.p05q-rail {
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field {
    flex: 1 1 14rem !important;
    max-width: 18rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details {
    flex: 1 0 100%;
    margin-top: 0.18rem;
  }
}

@media (max-width: 760px) {
  #p03iMetronomeCard .p05t-pattern-summary {
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #p03iMetronomeCard .p05t-timing-details {
    grid-template-columns: 1fr;
    margin-top: 0.35rem;
    padding: 0.45rem;
  }
}

/* P05V: stable desktop expanded timing row and select usability. */
#p03iMetronomeCard .p05t-more-button {
  white-space: nowrap;
}

#p03iMetronomeCard .p05t-timing-details select,
#p03iMetronomeCard #p03iSoundSelect {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p03i-open-body.p05q-rail {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-rows: auto auto !important;
    overflow-x: visible !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.54rem !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    order: 1;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 24rem !important;
    min-width: 24rem !important;
    order: 1;
    overflow: visible !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.26rem !important;
    order: 1;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions {
    gap: 0.22rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right #p03mAutoSound {
    order: 2;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p05t-more-button {
    order: 3;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field {
    flex: 1 1 16rem !important;
    max-width: none !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details {
    align-items: end;
    display: grid !important;
    grid-template-columns: minmax(5.5rem, 0.65fr) minmax(7rem, 0.85fr) minmax(8rem, 1fr) minmax(8.5rem, 1fr) minmax(7rem, 0.85fr);
    margin: 0.08rem 0 0 !important;
    min-width: 100% !important;
    order: 2;
    overflow: visible !important;
    position: relative;
    z-index: 4;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details .p03i-field {
    display: grid !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details .p03i-field label {
    display: block !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details select {
    min-height: 1.86rem !important;
    width: 100% !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details[hidden] {
    display: none !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p03i-open-body.p05q-rail {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.54rem !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-rail-group {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    flex: 0 0 6.4rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 auto !important;
    gap: 0.36rem !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    flex: 0 0 auto !important;
    gap: 0.26rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle #p03iSoundSelect {
    flex: 0 0 6.8rem !important;
    min-height: 1.78rem !important;
    width: 6.8rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-bpm-input {
    flex: 0 0 3.3rem !important;
    min-height: 1.78rem !important;
    width: 3.3rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field {
    flex: 1 1 9rem !important;
    max-width: none !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect) > label,
  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field > label {
    display: none !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    background: rgba(239, 246, 255, 0.9) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: #1f2937 !important;
    justify-content: center !important;
    max-width: 100% !important;
    min-width: 7.4rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details {
    align-items: end !important;
    display: grid !important;
    grid-template-columns: minmax(5.5rem, 0.65fr) minmax(7rem, 0.85fr) minmax(8rem, 1fr) minmax(8.5rem, 1fr) minmax(7rem, 0.85fr) !important;
    margin: 0.08rem 0 0 !important;
    min-width: 100% !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details .p03i-field {
    display: grid !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details .p03i-field label {
    display: block !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details select {
    min-height: 1.86rem !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details[hidden] {
    display: none !important;
  }
}

/* P05W: final compact metronome rail polish, settings toggle, and BPM stepper. */
#p03iMetronomeCard .p05w-bpm-control {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.14rem;
  min-width: 0;
}

#p03iMetronomeCard .p05w-bpm-step,
#p03iMetronomeCard .p05t-settings-button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

#p03iMetronomeCard .p05w-bpm-step {
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 1.72rem;
  min-width: 1.72rem;
}

#p03iMetronomeCard .p05t-settings-button {
  font-size: 0.94rem;
  min-height: 1.9rem;
  min-width: 1.9rem;
}

#p03iMetronomeCard .p05t-settings-button.is-active {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, 0.34);
  color: #1d4ed8;
}

@media (min-width: 861px) {
  #p03iMetronomeCard.p05q-rail-ready {
    padding-bottom: 0.46rem !important;
    padding-top: 0.46rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p03i-open-body.p05q-rail {
    gap: 0.28rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    gap: 0.42rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    flex-basis: 5.9rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    gap: 0.28rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    gap: 0.18rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions {
    gap: 0.16rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control .p03i-bpm-input {
    flex-basis: 3rem !important;
    min-height: 1.68rem !important;
    width: 3rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-step {
    min-height: 1.58rem !important;
    min-width: 1.58rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-settings-button {
    min-height: 1.74rem !important;
    min-width: 1.74rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    min-width: 10.4rem !important;
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
  }

  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details {
    gap: 0.34rem !important;
    margin-top: 0 !important;
    padding: 0.42rem !important;
  }
}

@media (max-width: 760px) {
  #p03iMetronomeCard .p03i-closed-strip {
    min-height: 2.2rem !important;
    padding-bottom: 0.38rem !important;
    padding-top: 0.38rem !important;
  }

  #p03iMetronomeCard.is-open,
  #p03iMetronomeCard.p03i-metronome-card.is-open {
    padding-bottom: 0.46rem !important;
    padding-top: 0.46rem !important;
  }

  #p03iMetronomeCard .p03i-open-body {
    gap: 0.3rem !important;
  }

  #p03iMetronomeCard .p03i-metronome-header {
    gap: 0.3rem !important;
  }

  #p03iMetronomeCard .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 0.16rem !important;
  }

  #p03iMetronomeCard .p03i-metronome-actions #p03mAutoSound {
    margin: 0 !important;
  }

  #p03iMetronomeCard .p05w-bpm-control {
    gap: 0.12rem;
  }

  #p03iMetronomeCard .p05w-bpm-step {
    min-height: 1.82rem;
    min-width: 1.82rem;
  }

  #p03iMetronomeCard .p05t-settings-button {
    min-height: 1.9rem;
    min-width: 1.9rem;
  }

  #p03iMetronomeCard .p05t-pattern-summary {
    font-size: 0.72rem !important;
    min-height: 1.8rem !important;
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
  }

  #p03iMetronomeCard .p05t-timing-details {
    gap: 0.32rem !important;
    margin-top: 0.2rem !important;
    padding: 0.4rem !important;
  }
}

/* P05X: final metronome rail spacing and mobile settings placement. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row,
  #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    gap: 0.66rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    flex: 0 0 5.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 32rem !important;
    gap: 0.46rem !important;
    min-width: 31rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    flex: 0 0 auto !important;
    gap: 0.3rem !important;
    margin-left: 0.2rem !important;
    white-space: nowrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions {
    gap: 0.22rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field {
    flex: 0 0 8.8rem !important;
    min-width: 8.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control {
    flex: 0 0 6.9rem !important;
    gap: 0.16rem !important;
    min-width: 6.9rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control .p03i-bpm-input,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control .p03i-bpm-input {
    flex: 0 0 3.15rem !important;
    min-width: 3.15rem !important;
    width: 3.15rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-step,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-step {
    flex: 0 0 1.62rem !important;
    min-height: 1.62rem !important;
    min-width: 1.62rem !important;
    width: 1.62rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect),
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect) {
    flex: 0 0 7.4rem !important;
    min-width: 7.4rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field,
  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field {
    flex: 1 1 12.6rem !important;
    min-width: 11rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary,
  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    justify-content: flex-start !important;
    min-width: 11rem !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(5.7rem, 1fr) auto auto !important;
    grid-template-areas: "title actions hide" !important;
    column-gap: 0.22rem !important;
    min-height: 1.9rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.12rem !important;
    grid-area: actions !important;
    justify-self: end !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions button,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    min-height: 1.62rem !important;
    padding: 0.2rem 0.34rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p05t-settings-button {
    flex: 0 0 1.72rem !important;
    min-height: 1.72rem !important;
    min-width: 1.72rem !important;
    padding: 0 !important;
    width: 1.72rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions #p03mAutoSound,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p04k-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p04j-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p04i-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p04d-metro-auto-field,
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p04c-metro-auto-field {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.62rem !important;
    grid-area: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-hide {
    grid-area: hide !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    gap: 0.22rem !important;
  }
}

/* P05Y: repair desktop rail spacing and mobile metronome header placement. */
@media (min-width: 861px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row,
  #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    align-items: center !important;
    gap: 0.5rem !important;
    overflow: visible !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-left {
    flex: 0 0 5.6rem !important;
    min-width: 5.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 auto !important;
    gap: 0.42rem !important;
    min-width: 30rem !important;
    overflow: visible !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    flex: 0 0 auto !important;
    gap: 0.22rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    min-width: max-content !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right .p03i-metronome-actions {
    gap: 0.18rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-header-bpm-field {
    flex: 0 0 9.6rem !important;
    min-width: 9.6rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control {
    flex: 0 0 7.7rem !important;
    gap: 0.2rem !important;
    min-width: 7.7rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control .p03i-bpm-input,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-control .p03i-bpm-input {
    flex: 0 0 3.35rem !important;
    min-width: 3.35rem !important;
    text-align: center !important;
    width: 3.35rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-step,
  #p03iMetronomeCard.p05q-rail-ready .p05w-bpm-step {
    flex: 0 0 1.82rem !important;
    min-height: 1.72rem !important;
    min-width: 1.82rem !important;
    width: 1.82rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect),
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle .p03i-field:has(#p03iSoundSelect) {
    flex: 0 0 7.8rem !important;
    min-width: 7.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle #p03iSoundSelect,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle #p03iSoundSelect {
    width: 7.8rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field,
  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-field {
    flex: 1 1 12rem !important;
    min-width: 11.2rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary,
  #p03iMetronomeCard.p05q-rail-ready .p05t-pattern-summary {
    min-width: 11.2rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details,
  #p03iMetronomeCard.p05q-rail-ready .p05t-timing-details {
    grid-template-columns: minmax(6.7rem, 0.8fr) minmax(7.2rem, 0.9fr) minmax(7.2rem, 0.9fr) minmax(8.4rem, 1fr) minmax(7.2rem, 0.9fr) !important;
  }
}

@media (min-width: 861px) and (max-width: 1040px) {
  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row,
  #p03iMetronomeCard.p05q-rail-ready .p05v-metro-main-row {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-middle {
    flex: 1 1 calc(100% - 6.1rem) !important;
    min-width: 28rem !important;
  }

  .desktop-timing-tools-row #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right,
  #p03iMetronomeCard.p05q-rail-ready .p05q-metro-right {
    margin-left: 6.1rem !important;
  }
}

@media (max-width: 760px) {
  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "title settings hide"
      "actions actions actions" !important;
    column-gap: 0.28rem !important;
    row-gap: 0.28rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-header > .p05t-settings-button {
    grid-area: settings !important;
    justify-self: end !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    grid-area: actions !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    min-width: 0 !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-actions .p05t-settings-button {
    display: none !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-template-columns: minmax(7.8rem, 0.95fr) minmax(7.2rem, 1fr) !important;
    grid-template-areas:
      "bpm sound"
      "pattern pattern" !important;
    gap: 0.28rem !important;
    overflow: visible !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-header-bpm-field {
    min-width: 7.8rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p05w-bpm-control {
    gap: 0.16rem !important;
    min-width: 7.2rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p05w-bpm-control .p03i-bpm-input {
    flex: 0 0 3rem !important;
    min-width: 3rem !important;
    text-align: center !important;
    width: 3rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p05w-bpm-step {
    flex: 0 0 1.8rem !important;
    min-height: 1.8rem !important;
    min-width: 1.8rem !important;
    width: 1.8rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p03i-field:has(#p03iSoundSelect) {
    min-width: 6.9rem !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open #p03iSoundSelect {
    width: 100% !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p05t-pattern-field {
    grid-area: pattern !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #p03iMetronomeCard.p03i-metronome-card.is-open .p05t-pattern-summary {
    justify-content: flex-start !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P06G: stable metronome presentation split. Keep the P06D DOM untouched and
   target Flow, Essentials, and mobile as separate layout contexts. */
#p03iMetronomeCard.p06d-stable-metronome {
  width: 100% !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-open-body,
#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-shell {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  position: static !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-header {
  align-items: center !important;
  display: grid !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: static !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-title-region { grid-area: title !important; }
#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-bpm-region { grid-area: bpm !important; }
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-select-grid { grid-area: config !important; }
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-actions { grid-area: actions !important; }
#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-settings-region { grid-area: settings !important; }
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-hide { grid-area: hide !important; }

#p03iMetronomeCard.p06d-stable-metronome .p03i-timing-title,
#p03iMetronomeCard.p06d-stable-metronome .p03i-header-bpm-field,
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-select-grid .p03i-field,
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect),
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect),
#p03iMetronomeCard.p06d-stable-metronome .p05t-pattern-field,
#p03iMetronomeCard.p06d-stable-metronome #p03mAutoSound {
  grid-area: auto !important;
  justify-self: auto !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-region,
#p03iMetronomeCard.p06d-stable-metronome .p03i-field,
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-actions,
#p03iMetronomeCard.p06d-stable-metronome #p03mAutoSound {
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-field {
  margin: 0 !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-field label {
  font-size: 0.67rem !important;
  line-height: 1 !important;
  margin: 0 0 0.14rem !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05w-bpm-control {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 0.16rem !important;
  min-width: max-content !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05w-bpm-control .p03i-bpm-input {
  flex: 0 0 3.35rem !important;
  min-width: 3.35rem !important;
  text-align: center !important;
  width: 3.35rem !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05w-bpm-step,
#p03iMetronomeCard.p06d-stable-metronome .p05t-settings-button {
  flex: 0 0 auto !important;
  min-height: 1.86rem !important;
  min-width: 1.86rem !important;
  padding: 0 !important;
  pointer-events: auto !important;
  width: 1.86rem !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-actions {
  align-items: center !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0.2rem !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-actions button,
#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-hide {
  min-height: 1.86rem !important;
  padding: 0.28rem 0.52rem !important;
  white-space: nowrap !important;
}

#p03iMetronomeCard.p06d-stable-metronome #p03mAutoSound {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 0.18rem !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p03i-metronome-select-grid {
  align-items: end !important;
  display: grid !important;
  overflow: visible !important;
  position: static !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-sound-region { grid-column: 1 !important; }
#p03iMetronomeCard.p06d-stable-metronome .p06d-metro-pattern-region { grid-column: 2 !important; }

#p03iMetronomeCard.p06d-stable-metronome #p03iSoundSelect,
#p03iMetronomeCard.p06d-stable-metronome .p05t-timing-details select {
  min-height: 1.9rem !important;
  pointer-events: auto !important;
  width: 100% !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05t-pattern-summary {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  min-height: 1.9rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05t-legacy-pattern-select {
  display: none !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05t-timing-details {
  display: grid !important;
  gap: 0.42rem !important;
  margin-top: 0 !important;
  overflow: visible !important;
  position: static !important;
}

#p03iMetronomeCard.p06d-stable-metronome .p05t-timing-details[hidden] {
  display: none !important;
}

@media (min-width: 861px) {
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-open-body,
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-shell {
    align-items: stretch !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    align-self: stretch !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    justify-self: stretch !important;
    max-width: none !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open .p03i-metronome-header {
    align-self: stretch !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region {
    min-width: max-content !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control {
    gap: 0.22rem !important;
    min-width: 7.8rem !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control .p03i-bpm-input {
    flex-basis: 3.75rem !important;
    min-width: 3.75rem !important;
    width: 3.75rem !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region,
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-pattern-region {
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-pattern-field {
    max-width: none !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region {
    min-width: max-content !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 15.75rem !important;
    flex-wrap: nowrap !important;
    gap: 0.58rem !important;
    justify-content: end !important;
    min-width: 15.75rem !important;
    pointer-events: auto !important;
    position: relative !important;
    top: 0.06rem !important;
    width: 15.75rem !important;
    z-index: 1 !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 15.75rem !important;
    flex-wrap: nowrap !important;
    gap: 0.58rem !important;
    justify-content: end !important;
    min-width: 15.75rem !important;
    pointer-events: auto !important;
    position: relative !important;
    right: auto !important;
    top: 0.06rem !important;
    transform: none !important;
    width: 15.75rem !important;
    z-index: 1 !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-action-row.p03i-metronome-actions.p06d-metro-actions {
    transform: translateY(3px) !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions button,
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions #p03mAutoSound {
    align-self: center !important;
    flex: 0 0 auto !important;
    grid-row: 1 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions #p03mAutoSound {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-content: center !important;
    justify-self: auto !important;
    position: static !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iSoundSelect),
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open .p03i-metronome-select-grid .p03i-field:has(#p03iPatternSelect) {
    align-items: stretch !important;
    display: grid !important;
    flex: initial !important;
    gap: 0.14rem !important;
    grid-area: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open #p03iSoundSelect,
  body[data-dashboard-mode] .desktop-timing-tools-row #p03iMetronomeCard.p03i-metronome-card.p06d-stable-metronome.is-open .p05t-pattern-summary {
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open {
    padding-bottom: 0.42rem !important;
    padding-top: 0.42rem !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-open-body,
  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.34rem !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    column-gap: 0.78rem !important;
    display: grid !important;
    grid-template-areas: "title bpm config actions settings" !important;
    grid-template-columns: minmax(6.9rem, max-content) minmax(9rem, max-content) minmax(0, 1fr) minmax(15.75rem, 15.75rem) max-content !important;
    row-gap: 0.18rem !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-area: config !important;
    gap: 0.38rem !important;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-title-region { grid-area: title !important; }
  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region { grid-area: bpm !important; }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    grid-area: actions !important;
    justify-self: end !important;
    margin-left: auto !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region {
    grid-area: settings !important;
    justify-self: end !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    display: none !important;
  }

  body[data-dashboard-mode="flow"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-timing-details {
    grid-template-columns: minmax(6.8rem, 0.8fr) minmax(7.4rem, 0.9fr) minmax(7.4rem, 0.9fr) minmax(8.8rem, 1fr) minmax(7.4rem, 0.9fr) !important;
    padding: 0.42rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open {
    padding-bottom: 0.4rem !important;
    padding-top: 0.4rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-open-body,
  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.24rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    align-items: center !important;
    column-gap: 0.78rem !important;
    display: grid !important;
    grid-template-areas: "title bpm config actions" !important;
    grid-template-columns: minmax(7.1rem, max-content) minmax(8.8rem, max-content) minmax(18rem, 1fr) minmax(15.75rem, 15.75rem) !important;
    row-gap: 0.12rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-timing-title {
    font-size: 0.88rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    align-items: center !important;
    display: grid !important;
    grid-area: config !important;
    gap: 0 !important;
    grid-template-columns: minmax(18rem, max-content) !important;
    justify-content: start !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-title-region { grid-area: title !important; }
  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region { grid-area: bpm !important; }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region .p03i-field {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0 !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region .p03i-field label {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region .p03i-field {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.46rem !important;
    width: auto !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region .p03i-field label {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open #p03iSoundSelect {
    min-height: 2.22rem !important;
    min-width: 12.4rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    align-items: center !important;
    gap: 0.58rem !important;
    grid-area: actions !important;
    justify-self: end !important;
    margin-left: auto !important;
    top: 0 !important;
    transform: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions button {
    min-height: 2.22rem !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound {
    align-items: center !important;
    min-height: 2.22rem !important;
    transform: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound input {
    margin: 0 0.28rem 0 0 !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-pattern-region {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-pattern-summary {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] .desktop-timing-tools-row #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-timing-details {
    display: none !important;
  }
}

@media (max-width: 860px) {
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open {
    padding-bottom: 0.34rem !important;
    padding-top: 0.34rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-open-body,
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.18rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    align-items: center !important;
    column-gap: 0.12rem !important;
    display: grid !important;
    grid-template-areas:
      "title settings hide"
      "actions actions actions"
      "bpm config config" !important;
    grid-template-columns: max-content minmax(0, 1fr) auto !important;
    row-gap: 0.14rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-title-region {
    align-self: center !important;
    grid-area: title !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region,
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    align-self: center !important;
    justify-self: end !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region { grid-area: bpm !important; }
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region { grid-area: settings !important; }
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide { grid-area: hide !important; }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    grid-area: actions !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    min-width: max-content !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions button,
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    flex: 0 0 auto !important;
    font-size: 0.7rem !important;
    min-height: 1.7rem !important;
    min-width: max-content !important;
    padding: 0.18rem 0.34rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-settings-button,
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-step {
    min-height: 1.7rem !important;
    min-width: 1.7rem !important;
    width: 1.7rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound {
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    min-height: 1.7rem !important;
    min-width: max-content !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region .p03i-field {
    align-items: flex-start !important;
    display: grid !important;
    gap: 0.08rem !important;
    justify-items: start !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control {
    gap: 0.12rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control .p03i-bpm-input {
    flex-basis: 2.9rem !important;
    min-width: 2.9rem !important;
    width: 2.9rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-area: config !important;
    gap: 0.1rem !important;
    grid-template-columns: minmax(4.6rem, 5.4rem) minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region,
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-pattern-region {
    min-width: 0 !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03iSoundSelect {
    max-width: 5.4rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-pattern-summary {
    font-size: 0.72rem !important;
    max-width: 100% !important;
    min-height: 1.76rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0.32rem !important;
    padding-right: 0.62rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-timing-details {
    gap: 0.24rem !important;
    grid-template-columns: 1fr !important;
    padding: 0.3rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open {
    padding-bottom: 0.28rem !important;
    padding-top: 0.28rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-shell {
    gap: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    column-gap: 0.22rem !important;
    grid-template-areas:
      "title actions"
      "bpm config" !important;
    grid-template-columns: minmax(5.9rem, 1fr) minmax(0, max-content) !important;
    row-gap: 0.26rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-title-region {
    min-width: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-timing-title {
    font-size: 0.86rem !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-pattern-region,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-pattern-summary,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-timing-details {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    grid-area: actions !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions button {
    font-size: 0.72rem !important;
    min-height: 1.76rem !important;
    min-width: 2.65rem !important;
    padding: 0.18rem 0.3rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound {
    align-items: center !important;
    font-size: 0.7rem !important;
    gap: 0.12rem !important;
    min-height: 1.76rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound input {
    height: 0.92rem !important;
    margin: 0 !important;
    width: 0.92rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region {
    grid-area: bpm !important;
    justify-self: start !important;
    min-width: max-content !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region .p03i-field {
    gap: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region .p03i-field label {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control {
    gap: 0.14rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-step {
    min-height: 1.76rem !important;
    min-width: 1.76rem !important;
    width: 1.76rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control .p03i-bpm-input {
    flex-basis: 2.8rem !important;
    min-height: 1.76rem !important;
    min-width: 2.8rem !important;
    width: 2.8rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    grid-area: config !important;
    grid-template-columns: minmax(8.4rem, 1fr) !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region {
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region .p03i-field {
    gap: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-sound-region .p03i-field label {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03iSoundSelect {
    max-width: none !important;
    min-height: 1.86rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P06M UI consistency: visual hierarchy only. */
.app-screen.card,
.practice-dashboard,
.overview-card,
.manage-tabs-card,
.manage-list-card,
.setup-screen,
.log-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.app-screen > .section-header h2,
.practice-header h2,
#manageScreenTitle {
  color: var(--primary);
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
  margin-bottom: 0.35rem;
}

.screen-title {
  color: var(--primary);
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0 0 0.35rem;
}

.screen-subtitle {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.overview-card #overviewTitle {
  color: var(--text);
  font-weight: 850;
}

.section-header .section-note,
#overviewText,
.setup-starter-content-panel p,
.setup-action-card p,
.context-help-panel p,
.guidance-modal-message {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.section-header,
.practice-header,
.overview-card {
  gap: 0.85rem;
}

.setup-screen,
.log-card,
.manage-list-card {
  padding: 1rem;
}

.setup-screen .section-header,
.log-card .section-header,
.manage-list-card .section-header {
  margin-bottom: 0.7rem;
}

.setup-starter-content-panel,
.setup-action-card,
.record-card,
.activity-log-item,
.empty-state,
.guidance-modal-card,
.reference-context-box,
.current-item-notes-box,
.queue-panel {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: none;
}

.setup-starter-content-panel,
.setup-action-card,
.record-card,
.activity-log-item {
  background: var(--panel);
}

.setup-screen .setup-starter-content-panel {
  background: linear-gradient(135deg, rgba(255, 250, 239, 0.96), rgba(248, 243, 231, 0.94));
  border-color: rgba(160, 126, 69, 0.22);
}

.setup-screen .setup-action-card {
  background: linear-gradient(180deg, rgba(255, 255, 252, 0.96), rgba(250, 247, 239, 0.94));
  border-color: rgba(153, 132, 96, 0.2);
}

.setup-screen .setup-action-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(248, 252, 247, 0.97), rgba(240, 248, 237, 0.94));
  border-color: rgba(89, 143, 84, 0.2);
}

.setup-screen .setup-action-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.97), rgba(250, 241, 222, 0.94));
  border-color: rgba(168, 125, 55, 0.22);
}

.setup-screen .setup-action-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.97), rgba(238, 244, 252, 0.94));
  border-color: rgba(84, 118, 166, 0.2);
}

.setup-screen .setup-action-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(252, 248, 255, 0.97), rgba(245, 239, 250, 0.94));
  border-color: rgba(130, 96, 158, 0.18);
}

.setup-screen .setup-action-card:nth-child(5) {
  background: linear-gradient(180deg, rgba(248, 252, 251, 0.97), rgba(238, 247, 245, 0.94));
  border-color: rgba(75, 134, 126, 0.18);
}

.setup-card-row {
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.manage-tabs-card {
  margin-bottom: 0.2rem;
  padding: 0.62rem;
}

.manage-list-card {
  margin-top: 0.2rem;
  padding-top: 0.82rem;
}

.manage-list-card .section-header {
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.manage-list-card .filter-row {
  border-color: var(--border-soft);
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
}

button,
.secondary-button,
.filter-button,
.type-tab,
.add-item-inline-button,
select,
input {
  border-radius: var(--radius-control);
}

button,
.secondary-button,
.filter-button,
.type-tab,
.add-item-inline-button {
  align-items: center;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 800;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0.58rem 0.82rem;
}

input,
select,
textarea {
  border-color: var(--border);
  font-size: 0.9rem;
}

input,
select {
  min-height: var(--control-height);
}

.secondary-button,
.filter-button,
.type-tab {
  background: var(--soft);
  color: var(--primary);
}

.filter-button.is-selected,
.type-tab.is-selected,
.dashboard-mode-button.is-selected {
  background: var(--primary);
  color: #fff;
}

.summary-pill,
.queue-progress-pill,
.mock-badge {
  background: var(--panel-soft);
  color: var(--text);
}

@media (max-width: 760px) {
  .setup-screen,
  .log-card,
  .manage-list-card {
    padding: 0.78rem;
  }

  .app-screen > .section-header h2,
  .practice-header h2,
  #manageScreenTitle,
  .screen-title {
    font-size: 1.05rem;
  }

  .help-bubble-text {
    left: 0.75rem !important;
    max-width: none;
    position: fixed;
    right: 0.75rem !important;
    top: calc(env(safe-area-inset-top, 0px) + 5.75rem);
    transform: translateY(-0.2rem);
    width: auto;
  }

  .help-bubble:hover .help-bubble-text,
  .help-bubble:focus .help-bubble-text {
    opacity: 0;
    transform: translateY(-0.2rem);
    visibility: hidden;
  }
  .help-bubble.is-open .help-bubble-text,
  .help-bubble.is-open:focus .help-bubble-text {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .help-bubble.is-positioned .help-bubble-text {
    left: var(--help-left, 0.75rem) !important;
    max-width: calc(100vw - 1.5rem);
    right: auto !important;
    top: var(--help-top, calc(env(safe-area-inset-top, 0px) + 5.75rem)) !important;
    width: min(17rem, calc(100vw - 1.5rem));
  }

  button,
  .secondary-button,
  .filter-button,
  .type-tab,
  .add-item-inline-button {
    min-height: 2.28rem;
    padding: 0.46rem 0.62rem;
  }

  .setup-card-row {
    gap: 0.48rem;
  }
}

@media (max-width: 860px) {
  .practice-dashboard .practice-header.compact-practice-header {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-bottom: 0.22rem !important;
    padding-top: 0 !important;
  }

  .practice-dashboard .practice-header .dashboard-mode-buttons {
    display: none !important;
  }

  .practice-dashboard .compact-session-title {
    align-items: baseline !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.38rem !important;
    min-width: 0 !important;
  }

  .practice-dashboard .practice-header h2,
  .practice-dashboard .compact-session-title .screen-title {
    flex: 0 0 auto !important;
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .practice-dashboard .compact-session-title .screen-subtitle {
    flex: 0 1 auto !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 860px) {
  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open {
    margin-bottom: 0.34rem !important;
    margin-top: 0.34rem !important;
    padding: 0.34rem 0.48rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-open-body {
    display: grid !important;
    gap: 0.28rem !important;
    grid-template-columns: 1fr !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timing-open-header {
    align-items: center !important;
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    margin: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timing-title {
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timer-display {
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    min-width: 3.45rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-status {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timing-open-header .p03i-tool-button {
    display: inline-flex !important;
    font-size: 0.72rem !important;
    min-height: 1.76rem !important;
    padding: 0.18rem 0.38rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-timer-body {
    align-items: center !important;
    display: grid !important;
    gap: 0.24rem !important;
    grid-template-areas:
      "presets"
      "actions" !important;
    grid-template-columns: 1fr !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-number-input {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-presets {
    display: flex !important;
    gap: 0.2rem !important;
    grid-area: presets !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-preset {
    flex: 1 1 0 !important;
    font-size: 0.8rem !important;
    min-height: 1.72rem !important;
    min-width: 0 !important;
    padding: 0.12rem 0.16rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-action-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    grid-area: actions !important;
    justify-content: stretch !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03i-action-row button {
    flex: 1 1 0 !important;
    font-size: 0.76rem !important;
    min-height: 1.78rem !important;
    min-width: 0 !important;
    padding: 0.18rem 0.22rem !important;
    width: auto !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open #p03mAutoTimer,
  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03m-timer-auto-row {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.7rem !important;
    gap: 0.12rem !important;
    min-height: 1.78rem !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open #p03mAutoTimer input,
  body[data-dashboard-mode="essentials"] #p03iTimerCard.p03i-timing-card.is-open .p03m-timer-auto-row input {
    height: 0.92rem !important;
    margin: 0 !important;
    width: 0.92rem !important;
  }
}

/* P07J final override: keep Manage/Rail warmth after legacy patches. */
.overview-card.app-screen[data-screen-panel="manage"],
.manage-tabs-card,
.manage-list-card,
.rotation-planning-panel,
.practice-composition-rail {
  border-color: rgba(147, 123, 88, 0.16) !important;
  box-shadow: 0 14px 34px rgba(41, 52, 76, 0.07) !important;
}

.overview-card.app-screen[data-screen-panel="manage"] {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.72), rgba(245, 248, 255, 0.92)) !important;
}

.manage-tabs-card,
.manage-list-card {
  background: #fbfcf8 !important;
}

.practice-composition-rail {
  background:
    radial-gradient(circle at top left, rgba(255, 237, 213, 0.7), transparent 28rem),
    linear-gradient(180deg, #fffdf7 0%, #f4f8f4 100%) !important;
  border-color: rgba(114, 83, 45, 0.16) !important;
}

.composition-total-pill {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(114, 83, 45, 0.14) !important;
  color: #3d4b63 !important;
}

.composition-total-pill.is-total {
  background: #eaf8ee !important;
  border-color: rgba(6, 118, 71, 0.18) !important;
  color: #067647 !important;
}

.composition-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 252, 245, 0.74)) !important;
  box-shadow: 0 8px 20px rgba(41, 52, 76, 0.055) !important;
}

.composition-daily {
  background: linear-gradient(180deg, #f8fbff, #eef5ff) !important;
  border-left-color: #1f5eff !important;
}

.composition-pool {
  background: linear-gradient(180deg, #f4fbfb, #e9f6f5) !important;
  border-left-color: #0e7490 !important;
}

.composition-fresh {
  background: linear-gradient(180deg, #f5fbf6, #eaf8ee) !important;
  border-left-color: #067647 !important;
}

.composition-learning {
  background: linear-gradient(180deg, #faf7ff, #f2ecff) !important;
  border-left-color: #7c3aed !important;
}

.composition-activity {
  background: linear-gradient(180deg, #fffaf2, #fff2da) !important;
  border-left-color: #b45309 !important;
}

.composition-chip {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(71, 85, 105, 0.13) !important;
}

.composition-count-chip {
  background: rgba(15, 23, 42, 0.045) !important;
}

.modal-card {
  background: linear-gradient(180deg, #fffefb 0%, #f9fbff 100%) !important;
  border: 1px solid rgba(147, 123, 88, 0.16) !important;
  max-height: min(97vh, 940px) !important;
  max-width: 960px !important;
  padding: 1.85rem !important;
}

.compact-modal-card {
  max-width: 940px !important;
}

.modal-card .record-form {
  gap: 1.05rem !important;
}

.modal-card .field-grid,
.modal-card form > .field,
.modal-card .linked-goals-mock,
.modal-card .modal-references-box,
.modal-card .add-reference-create-box {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(147, 123, 88, 0.13) !important;
  border-radius: 16px !important;
  padding: 0.85rem !important;
}

.modal-card .planning-fields {
  background: rgba(239, 246, 255, 0.62) !important;
  border-color: rgba(31, 94, 255, 0.12) !important;
}

.modal-card .linked-goals-mock {
  background: rgba(236, 253, 245, 0.54) !important;
  border-color: rgba(6, 118, 71, 0.13) !important;
}

.modal-card .modal-references-box,
.modal-card .add-reference-create-box {
  background: rgba(255, 247, 237, 0.58) !important;
  border-color: rgba(180, 83, 9, 0.13) !important;
}

.modal-card .button-row:last-child {
  background: rgba(255, 255, 255, 0.74) !important;
  border-top: 1px solid rgba(147, 123, 88, 0.14) !important;
  border-radius: 0 0 16px 16px !important;
  margin: 0.15rem -0.35rem -0.35rem !important;
  padding: 0.85rem 0.35rem 0.2rem !important;
}

.help-bubble-text {
  background: #fffefb !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.13) !important;
  max-width: min(16rem, 72vw) !important;
}

.frequency-help-panel {
  gap: 0.5rem !important;
  width: min(17rem, 78vw) !important;
}

@media (max-width: 760px) {
  .modal-card {
    max-height: 94vh !important;
    padding: 1rem !important;
  }

  .modal-card .field-grid,
  .modal-card form > .field,
  .modal-card .linked-goals-mock,
  .modal-card .modal-references-box,
  .modal-card .add-reference-create-box {
    padding: 0.7rem !important;
  }
}

/* P07T expandable composition cards: compact by default, inspectable on demand. */
.composition-sections {
  align-items: stretch !important;
  gap: 0.75rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.1rem 0.15rem 0.75rem !important;
  scroll-snap-type: x proximity;
}

.composition-section {
  cursor: pointer !important;
  flex: 0 0 clamp(13rem, 18vw, 16rem) !important;
  min-height: 9.25rem !important;
  overflow: hidden !important;
  padding: 0.85rem !important;
  scroll-snap-align: start;
  transition: border-color 160ms ease, box-shadow 160ms ease, flex-basis 160ms ease, transform 160ms ease;
}

.composition-section:hover,
.composition-section:focus-visible {
  border-color: rgba(31, 94, 255, 0.24) !important;
  box-shadow: 0 12px 28px rgba(41, 52, 76, 0.09) !important;
  transform: translateY(-1px);
}

.composition-section:focus-visible {
  outline: 3px solid rgba(31, 94, 255, 0.18);
  outline-offset: 2px;
}

.composition-section.is-expanded {
  flex-basis: clamp(20rem, 36vw, 30rem) !important;
}

.composition-section-header {
  align-items: flex-start !important;
  gap: 0.65rem !important;
}

.composition-title-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.composition-section-title {
  color: #10243a;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.15;
}

.composition-count {
  align-items: center;
  background: rgba(15, 23, 42, 0.055);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: #38475f;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.12rem 0.38rem;
}

.composition-estimate {
  flex: 0 0 auto;
  font-size: 0.76rem !important;
  margin-top: 0.05rem;
}

.composition-section-note {
  color: #536177 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0.48rem 0 0.6rem !important;
}

.composition-chip-row {
  gap: 0.35rem !important;
  max-height: 3.2rem;
  overflow: hidden;
}

.composition-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composition-more-chip {
  color: #42526a !important;
  font-weight: 800 !important;
}

.composition-detail {
  border-top: 1px solid rgba(71, 85, 105, 0.12);
  margin-top: 0.7rem;
  max-height: 12.5rem;
  overflow-y: auto;
  padding-right: 0.15rem;
  padding-top: 0.6rem;
}

.composition-detail[hidden] {
  display: none !important;
}

.composition-detail-list {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.composition-detail-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(100, 116, 139, 0.11);
  border-radius: 10px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.42rem 0.5rem;
}

.composition-detail-name {
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composition-detail-meta {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.composition-empty-note {
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(100, 116, 139, 0.24);
  border-radius: 14px;
  color: #536177;
  margin: 0;
  min-width: min(32rem, 88vw);
  padding: 0.9rem 1rem;
}

.modal-card .field-grid,
.modal-card form > .field,
.modal-card .linked-goals-mock,
.modal-card .modal-references-box,
.modal-card .add-reference-create-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

.modal-card .field-grid:first-of-type,
.modal-card form > .field:first-of-type {
  background: rgba(255, 251, 235, 0.62) !important;
}

@media (max-width: 760px) {
  .composition-sections {
    gap: 0.6rem !important;
    padding-bottom: 0.65rem !important;
  }

  .composition-section,
  .composition-section.is-expanded {
    flex-basis: min(84vw, 22rem) !important;
    min-height: 8.7rem !important;
    padding: 0.78rem !important;
  }

  .composition-section.is-expanded {
    flex-basis: min(88vw, 24rem) !important;
  }

  .composition-detail {
    max-height: 14rem;
  }

  .composition-detail-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.16rem;
  }
}

/* P07T responsive composition rail: portrait pulse, richer desktop/landscape planning. */
.composition-pulse {
  display: none;
}

.manage-list-card,
.manage-list-card .record-card,
.record-list .record-card {
  background: linear-gradient(180deg, rgba(255, 254, 251, 0.96), rgba(248, 251, 247, 0.88)) !important;
}

.manage-list-card .empty-state,
.overview-card.app-screen[data-screen-panel="manage"] .summary-pill {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(147, 123, 88, 0.12) !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  .practice-composition-rail {
    border-radius: 18px !important;
    margin-bottom: 0.7rem !important;
    padding: 0.72rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 0.45rem !important;
  }

  .practice-composition-rail .composition-rail-header h3 {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .practice-composition-rail .composition-rail-header .section-note,
  .practice-composition-rail .composition-totals {
    display: none !important;
  }

  .composition-pulse {
    align-items: center;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 253, 245, 0.72)),
      rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(114, 83, 45, 0.14);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: #193047;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    min-height: 3.35rem;
    padding: 0.55rem 0.62rem;
    text-align: left;
    width: 100%;
  }

  .composition-pulse-segments {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .composition-pulse-segments::-webkit-scrollbar {
    display: none;
  }

  .composition-pulse-segment {
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 900;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.42rem;
  }

  .composition-pulse-d {
    background: #eef5ff;
    color: #1743a6;
  }

  .composition-pulse-p {
    background: #e9f6f5;
    color: #0e6675;
  }

  .composition-pulse-s {
    background: #eaf8ee;
    color: #067647;
  }

  .composition-pulse-so {
    background: #f2ecff;
    color: #6d28d9;
  }

  .composition-pulse-a {
    background: #fff2da;
    color: #92400e;
  }

  .composition-pulse-total {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(6, 118, 71, 0.14);
    border-radius: 999px;
    color: #067647;
    font-size: 0.82rem;
    font-weight: 900;
    justify-self: end;
    padding: 0.28rem 0.5rem;
    white-space: nowrap;
  }

  .composition-pulse-hint,
  .composition-pulse-empty {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    grid-column: 1 / -1;
  }

  .composition-pulse-empty {
    color: #536177;
    font-size: 0.8rem;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-sections {
    display: none !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    display: flex !important;
    margin-top: 0.6rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section,
  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
    flex-basis: min(86vw, 22rem) !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-detail {
    max-height: 11.5rem !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  .practice-composition-rail {
    padding: 0.8rem !important;
  }

  .composition-pulse {
    display: none !important;
  }

  .composition-sections {
    display: flex !important;
    max-height: 16rem;
  }

  .composition-section {
    flex-basis: clamp(12.5rem, 24vw, 16rem) !important;
    min-height: 8.25rem !important;
    padding: 0.72rem !important;
  }

  .composition-section.is-expanded {
    flex-basis: clamp(18rem, 38vw, 26rem) !important;
  }

  .composition-detail {
    max-height: 8rem !important;
  }
}

/* P07T final responsive Manage polish: efficient dialogs, clearer pulse, calmer editing surfaces. */
@media (min-width: 861px) {
  .modal-card {
    max-height: min(96vh, 980px) !important;
    max-width: 1040px !important;
    padding: 1.45rem 1.55rem 1.1rem !important;
  }

  .compact-modal-card {
    max-width: 1000px !important;
  }

  .modal-card .record-form {
    gap: 0.78rem !important;
  }

  .modal-card .field-grid {
    gap: 0.72rem !important;
    padding: 0.72rem !important;
  }

  .modal-card form > .field,
  .modal-card .linked-goals-mock,
  .modal-card .modal-references-box,
  .modal-card .add-reference-create-box {
    padding: 0.68rem 0.75rem !important;
  }

  .modal-card label,
  .modal-card .field {
    gap: 0.28rem !important;
  }

  .modal-card .section-note,
  .modal-card .help-text,
  .modal-card .form-helper,
  .modal-card .linked-goals-summary {
    line-height: 1.32 !important;
    margin-bottom: 0.2rem !important;
  }

  .modal-card .linked-goals-list,
  .modal-card .checkbox-list,
  .modal-card .reference-list,
  .modal-card .modal-reference-list {
    gap: 0.34rem !important;
    max-height: 8.5rem !important;
  }

  .modal-card .linked-goals-list label,
  .modal-card .checkbox-list label {
    align-items: center !important;
    min-height: 1.7rem !important;
    padding: 0.26rem 0.36rem !important;
  }

  .modal-card .button-row:last-child {
    align-items: center !important;
    margin-top: 0.2rem !important;
    padding-top: 0.65rem !important;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .manage-list-card {
    padding: 0.9rem 1rem !important;
  }

  .manage-list-card .filter-row {
    margin-bottom: 0.45rem !important;
    padding-bottom: 0.5rem !important;
  }

  .record-card.compact-manage-card {
    padding: 0.78rem 0.9rem !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .practice-composition-rail {
    margin-bottom: 0.55rem !important;
    padding: 0.58rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    margin-bottom: 0.34rem !important;
  }

  .practice-composition-rail .composition-rail-header h3 {
    font-size: 0.88rem !important;
  }

  .composition-pulse {
    border-radius: 14px !important;
    gap: 0.28rem !important;
    min-height: 2.6rem !important;
    padding: 0.42rem 0.5rem !important;
  }

  .composition-pulse-segments {
    gap: 0.2rem !important;
  }

  .composition-pulse-segment {
    font-size: 0.7rem !important;
    min-width: 2rem !important;
    padding: 0.18rem 0.34rem !important;
  }

  .composition-pulse-total {
    font-size: 0.74rem !important;
    padding: 0.22rem 0.42rem !important;
  }

  .composition-pulse-hint {
    font-size: 0.66rem !important;
    line-height: 1.18 !important;
  }

  .composition-pulse-daily {
    background: #eef5ff !important;
    color: #1743a6 !important;
  }

  .composition-pulse-pool {
    background: #e9f6f5 !important;
    color: #0e6675 !important;
  }

  .composition-pulse-songs {
    background: #eaf8ee !important;
    color: #067647 !important;
  }

  .composition-pulse-solos {
    background: #f2ecff !important;
    color: #6d28d9 !important;
  }

  .composition-pulse-activities {
    background: #fff2da !important;
    color: #92400e !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    gap: 0.48rem !important;
    margin-top: 0.48rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section,
  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
    flex-basis: min(82vw, 20rem) !important;
    min-height: 7.6rem !important;
    padding: 0.62rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section-note {
    display: none !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-chip-row {
    max-height: 2.3rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-detail {
    max-height: 9.5rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
  .practice-composition-rail {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    align-items: center !important;
    display: grid !important;
    gap: 0.5rem;
    grid-template-columns: minmax(14rem, 1fr) auto;
    margin-bottom: 0 !important;
  }

  .practice-composition-rail .composition-rail-header .section-note {
    display: none !important;
  }

  .composition-totals {
    justify-content: flex-end !important;
  }

  .composition-total-pill {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.46rem !important;
  }

  .composition-sections {
    gap: 0.55rem !important;
    max-height: 13.5rem !important;
    padding-bottom: 0.45rem !important;
  }

  .composition-section {
    flex-basis: clamp(12rem, 22vw, 15rem) !important;
    min-height: 7.4rem !important;
    padding: 0.62rem !important;
  }

  .composition-section.is-expanded {
    flex-basis: clamp(18rem, 34vw, 24rem) !important;
  }

  .composition-section-note {
    margin: 0.32rem 0 0.42rem !important;
  }

  .composition-detail {
    max-height: 7.5rem !important;
  }
}

/* P07T mobile Manage density: shorter pulse, single-row tabs, compact rotation controls. */
@media (max-width: 760px) {
  .manage-tabs-card {
    margin-bottom: 0.28rem !important;
    padding: 0.48rem !important;
  }

  .manage-tabs-row {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .type-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding: 0.08rem !important;
    scrollbar-width: none;
    white-space: nowrap !important;
  }

  .type-tabs::-webkit-scrollbar {
    display: none;
  }

  .type-tab {
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    min-height: 1.9rem !important;
    padding: 0.34rem 0.42rem !important;
  }

  .add-item-inline-button {
    align-self: center !important;
    font-size: 0.74rem !important;
    min-height: 1.95rem !important;
    padding: 0.36rem 0.5rem !important;
    white-space: nowrap !important;
  }

  .rotation-planning-panel {
    margin-bottom: 0.34rem !important;
    padding: 0.52rem 0.58rem !important;
  }

  .rotation-planning-panel .section-header,
  .rotation-planning-panel .section-note {
    margin-bottom: 0.35rem !important;
  }

  .rotation-planning-panel h3 {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .compact-rotation-fields {
    align-items: end !important;
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-columns: minmax(5.4rem, 0.75fr) minmax(7rem, 1fr) !important;
    padding: 0.45rem !important;
  }

  .compact-rotation-fields .field {
    gap: 0.18rem !important;
  }

  .compact-rotation-fields label {
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }

  #rotationItemsPerSessionLabel {
    font-size: 0 !important;
  }

  #rotationItemsPerSessionLabel::after {
    content: "Keeping Fresh";
    font-size: 0.68rem;
  }

  .compact-rotation-fields input,
  .compact-rotation-fields select {
    font-size: 0.78rem !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.42rem !important;
  }

  .manage-list-card {
    margin-top: 0.3rem !important;
    padding: 0.58rem !important;
  }

  .manage-list-card .section-header {
    gap: 0.42rem !important;
    margin-bottom: 0.42rem !important;
  }

  .manage-list-card .section-header .button-row {
    gap: 0.3rem !important;
  }

  .manage-list-card .filter-row {
    gap: 0.24rem !important;
    margin-bottom: 0.36rem !important;
    padding-bottom: 0.36rem !important;
  }

  .filter-button {
    font-size: 0.72rem !important;
    min-height: 1.85rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  .record-list {
    gap: 0.4rem !important;
  }

  .record-card.compact-manage-card {
    padding: 0.62rem !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .practice-composition-rail {
    margin-bottom: 0.38rem !important;
    padding: 0.42rem 0.48rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    margin-bottom: 0.22rem !important;
  }

  .practice-composition-rail .composition-rail-header h3 {
    font-size: 0.82rem !important;
  }

  .composition-pulse {
    border-radius: 12px !important;
    gap: 0.18rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 2.18rem !important;
    padding: 0.32rem 0.4rem !important;
  }

  .composition-pulse-segment {
    font-size: 0.66rem !important;
    min-width: auto !important;
    padding: 0.14rem 0.26rem !important;
  }

  .composition-pulse-total {
    font-size: 0.68rem !important;
    padding: 0.16rem 0.34rem !important;
  }

  .composition-pulse-hint {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    margin-top: -0.02rem !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-pulse-hint {
    max-height: 0.75rem;
    overflow: hidden;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    margin-top: 0.36rem !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  .practice-composition-rail {
    margin-bottom: 0.45rem !important;
    padding: 0.55rem 0.65rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.65rem !important;
    justify-content: space-between !important;
    margin-bottom: 0.38rem !important;
  }

  .practice-composition-rail .composition-rail-header h3 {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  .practice-composition-rail .composition-rail-header .section-note {
    display: none !important;
  }

  .composition-totals {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    overflow-x: auto !important;
  }

  .composition-total-pill {
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    padding: 0.2rem 0.34rem !important;
  }

  .composition-sections {
    display: flex !important;
    gap: 0.42rem !important;
    max-height: 10.5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0.3rem !important;
  }

  .composition-section {
    flex-basis: clamp(10.5rem, 19vw, 13rem) !important;
    min-height: 6.6rem !important;
    padding: 0.52rem !important;
  }

  .composition-section.is-expanded {
    flex-basis: clamp(16rem, 31vw, 21rem) !important;
  }

  .composition-section-note {
    display: none !important;
  }

  .composition-detail {
    max-height: 6.4rem !important;
  }
}

/* P07T true accordion cleanup: collapsed cards reserve no expansion space. */
.composition-sections {
  align-items: flex-start !important;
}

.composition-section,
.composition-section.is-expanded,
.practice-composition-rail.is-pulse-expanded .composition-section,
.practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
  height: auto !important;
  min-height: 0 !important;
}

.composition-section:not(.is-expanded) {
  align-self: flex-start !important;
}

.composition-section:not(.is-expanded) .composition-detail,
.composition-detail[hidden],
.record-details[hidden] {
  display: none !important;
  margin: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.composition-section.is-expanded .composition-detail {
  display: block !important;
  max-height: 12.5rem !important;
}

.record-card.compact-manage-card,
.compact-manage-card {
  height: auto !important;
  min-height: 0 !important;
}

.compact-manage-card:not(.is-expanded) {
  align-items: center !important;
}

.compact-manage-card:not(.is-expanded) .record-expand-button {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .composition-section,
  .composition-section.is-expanded,
  .practice-composition-rail.is-pulse-expanded .composition-section,
  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
    min-height: 0 !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) {
    padding-bottom: 0.54rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded .composition-detail {
    max-height: 9.5rem !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  .composition-section,
  .composition-section.is-expanded {
    min-height: 0 !important;
  }

  .composition-section.is-expanded .composition-detail {
    max-height: 6.4rem !important;
  }
}

/* P07T checkpoint polish: no reserved accordion space, no clipped summary fragments. */
.composition-section {
  contain: layout paint;
}

.composition-section:not(.is-expanded) .composition-chip-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-height: none !important;
  overflow: hidden !important;
}

.composition-section:not(.is-expanded) .composition-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.composition-section:not(.is-expanded) .composition-section-note {
  max-height: none !important;
  overflow: hidden !important;
}

.composition-section.is-expanded {
  overflow: visible !important;
}

.composition-section.is-expanded .composition-detail {
  overflow-y: auto !important;
}

@media (min-width: 861px) {
  .modal-card {
    max-height: min(96vh, 980px) !important;
    padding: 1.25rem 1.4rem 0.95rem !important;
  }

  .modal-card .record-form {
    gap: 0.64rem !important;
  }

  .modal-card .field-grid,
  .modal-card form > .field,
  .modal-card .linked-goals-mock,
  .modal-card .modal-references-box,
  .modal-card .add-reference-create-box {
    border-radius: 14px !important;
    padding: 0.62rem 0.68rem !important;
  }

  .modal-card textarea {
    min-height: 4.5rem !important;
  }

  .modal-card .linked-goals-list,
  .modal-card .checkbox-list {
    gap: 0.26rem !important;
    max-height: 7.25rem !important;
  }

  .modal-card .linked-goals-list label,
  .modal-card .checkbox-list label {
    min-height: 1.52rem !important;
    padding: 0.22rem 0.32rem !important;
  }

  .modal-card .button-row:last-child {
    margin-top: 0.08rem !important;
    padding-top: 0.52rem !important;
  }
}

@media (max-width: 760px) {
  label[for="rotationModeSelect"] {
    font-size: 0 !important;
  }

  label[for="rotationModeSelect"]::after {
    content: "Mode";
    font-size: 0.68rem;
  }

  .compact-rotation-fields {
    grid-template-columns: minmax(5rem, 0.7fr) minmax(6.5rem, 1fr) !important;
    padding: 0.34rem !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .practice-composition-rail:not(.is-pulse-expanded) {
    background:
      linear-gradient(135deg, rgba(255, 253, 247, 0.92), rgba(239, 248, 244, 0.84)) !important;
    margin-bottom: 0.3rem !important;
    padding: 0.34rem 0.4rem !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header {
    margin-bottom: 0.14rem !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header h3 {
    font-size: 0.78rem !important;
    line-height: 1 !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-pulse {
    min-height: 1.92rem !important;
    padding: 0.24rem 0.34rem !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-pulse-hint {
    display: none !important;
  }

  .practice-composition-rail.is-pulse-expanded {
    padding: 0.46rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    align-items: flex-start !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0.28rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) {
    flex-basis: min(76vw, 18rem) !important;
    padding: 0.48rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) .composition-chip-row {
    margin-top: 0.32rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) .composition-section-note {
    display: none !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
    flex-basis: min(86vw, 22rem) !important;
    padding: 0.58rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded .composition-detail {
    max-height: 10rem !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  .practice-composition-rail {
    margin-bottom: 0.34rem !important;
    padding: 0.46rem 0.56rem !important;
  }

  .composition-sections {
    align-items: flex-start !important;
    max-height: 9rem !important;
  }

  .composition-section:not(.is-expanded) {
    flex-basis: clamp(10rem, 18vw, 12rem) !important;
    padding: 0.46rem !important;
  }

  .composition-section.is-expanded {
    flex-basis: clamp(15.5rem, 30vw, 20rem) !important;
    padding: 0.52rem !important;
  }

  .composition-section:not(.is-expanded) .composition-chip-row {
    margin-top: 0.28rem !important;
  }

  .composition-section.is-expanded .composition-detail {
    max-height: 5.8rem !important;
  }
}

/* P07T container sizing fix: mobile Manage cards shrink to visible content. */
.practice-composition-rail,
.rotation-planning-panel,
.manage-tabs-card {
  height: auto !important;
  min-height: 0 !important;
}

.practice-composition-rail {
  overflow: visible !important;
}

.composition-section {
  contain: none !important;
}

.composition-section:not(.is-expanded) {
  overflow: hidden !important;
}

.composition-section:not(.is-expanded) .composition-detail,
.composition-section:not(.is-expanded) .composition-detail-list,
.record-card.compact-manage-card:not(.is-expanded) .record-details {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.composition-section:not(.is-expanded) .composition-chip-row {
  min-height: 0 !important;
}

@media (max-width: 760px) {
  .rotation-planning-panel,
  .manage-tabs-card,
  .practice-composition-rail {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .rotation-planning-panel .section-header {
    align-items: center !important;
    margin-bottom: 0.24rem !important;
    min-height: 0 !important;
  }

  .rotation-planning-panel .section-note {
    display: none !important;
  }

  .compact-rotation-fields {
    margin: 0 !important;
    min-height: 0 !important;
  }

  .manage-tabs-row,
  .type-tabs {
    min-height: 0 !important;
  }

  .manage-list-card {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .practice-composition-rail:not(.is-pulse-expanded) {
    max-height: none !important;
    min-height: 0 !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-sections,
  .practice-composition-rail:not(.is-pulse-expanded) .composition-totals,
  .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header .section-note {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header {
    margin: 0 0 0.1rem !important;
    min-height: 0 !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-pulse {
    height: auto !important;
    min-height: 0 !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    max-height: none !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) .composition-chip-row {
    max-height: 1.7rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape) {
  .practice-composition-rail {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.42rem 0.5rem !important;
  }

  .practice-composition-rail .composition-rail-header {
    display: flex !important;
    margin: 0 0 0.18rem !important;
    min-height: 0 !important;
  }

  .practice-composition-rail .composition-rail-header .section-note,
  .practice-composition-rail .composition-totals {
    display: none !important;
  }

  .composition-pulse {
    align-items: center !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(236, 253, 245, 0.74)) !important;
    border: 1px solid rgba(114, 83, 45, 0.14) !important;
    border-radius: 12px !important;
    display: grid !important;
    gap: 0.35rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    min-height: 0 !important;
    padding: 0.28rem 0.4rem !important;
    width: 100% !important;
  }

  .composition-pulse-hint {
    display: inline !important;
    font-size: 0.68rem !important;
    grid-column: auto !important;
    white-space: nowrap !important;
  }

  .practice-composition-rail:not(.is-pulse-expanded) .composition-sections {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-sections {
    align-items: flex-start !important;
    display: flex !important;
    margin-top: 0.38rem !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0.24rem !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section:not(.is-expanded) {
    flex-basis: clamp(10rem, 22vw, 13rem) !important;
    min-height: 0 !important;
  }

  .practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
    flex-basis: clamp(16rem, 36vw, 23rem) !important;
    min-height: 0 !important;
  }
}

/* P07T Manage mobile parent sizing fix: cards use content height, page scrolls. */
@media (max-width: 760px) {
  body:has(.manage-tabs-card:not([hidden])) .app-shell {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .app-screen[data-screen-panel="manage"] {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .overview-card.app-screen[data-screen-panel="manage"],
  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail,
  body:has(.manage-tabs-card:not([hidden])) .rotation-planning-panel,
  body:has(.manage-tabs-card:not([hidden])) .manage-tabs-card,
  body:has(.manage-tabs-card:not([hidden])) .manage-list-card {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-sections,
  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-totals,
  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header .section-note {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) {
    display: block !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  body:has(.manage-tabs-card:not([hidden])) .app-shell {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .app-screen[data-screen-panel="manage"] {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body:has(.manage-tabs-card:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-sections {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
}

#recordList[hidden] {
  display: none !important;
}

/* P07T compact inventory controls: filters, visibility, and counts in one strip. */
.manage-list-card .filter-row {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(147, 123, 88, 0.12) !important;
  border-radius: 14px;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  margin-bottom: 0.48rem !important;
  padding: 0.4rem !important;
}

.manage-list-card .filter-row .inventory-toggle-button {
  margin-left: auto;
}

.inventory-summary {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.12);
  border-radius: 999px;
  color: #46566f;
  flex: 0 1 auto;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1.1;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0.34rem 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-toggle-button {
  min-height: 1.9rem !important;
  padding: 0.3rem 0.54rem !important;
}

@media (max-width: 760px) {
  .manage-list-card .filter-row {
    display: grid !important;
    gap: 0.24rem !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    padding: 0.32rem !important;
  }

  .manage-list-card .filter-row .filter-button {
    font-size: 0.66rem !important;
    min-height: 1.62rem !important;
    min-width: 0 !important;
    padding: 0.22rem 0.24rem !important;
    width: 100% !important;
  }

  .manage-list-card .filter-row .inventory-toggle-button {
    font-size: 0.66rem !important;
    grid-column: 5;
    margin-left: 0;
    min-height: 1.62rem !important;
    padding: 0.22rem 0.32rem !important;
    white-space: nowrap;
  }

  .inventory-summary {
    font-size: 0.66rem;
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    padding: 0.24rem 0.42rem;
  }
}

/* P08G speech-to-text foundation: mic buttons are progressive enhancement only. */
.speech-input-wrap {
  align-items: center;
  display: grid;
  gap: 0.24rem;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
}

.speech-textarea-wrap {
  align-items: start;
}

.speech-input-wrap input,
.speech-input-wrap textarea {
  min-width: 0;
  width: 100%;
}

.speech-input-wrap input[data-speech-previewing="true"],
.speech-input-wrap textarea[data-speech-previewing="true"] {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 58%),
    rgba(6, 78, 59, 0.34);
  border-color: rgba(34, 197, 94, 0.42);
}

.speech-mic-button {
  align-self: center;
  align-items: center;
  background: rgba(8, 18, 34, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: rgba(203, 213, 225, 0.82);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0;
  font-weight: 880;
  gap: 0;
  height: 1.92rem;
  justify-content: center;
  min-height: 1.92rem;
  min-width: 1.92rem;
  padding: 0;
  width: 1.92rem;
}

.speech-mic-icon {
  display: inline-flex;
  height: 0.92rem;
  width: 0.92rem;
}

.speech-mic-icon svg {
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 100%;
}

.speech-textarea-wrap .speech-mic-button {
  align-self: start;
  margin-top: 0.12rem;
}

.speech-mic-label {
  display: none;
}

.speech-mic-button[data-speech-state="listening"] {
  animation: speechListeningPulse 1.8s ease-in-out infinite;
  background: rgba(5, 46, 22, 0.42);
  border-color: rgba(74, 222, 128, 0.36);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.14),
    0 0 18px rgba(34, 197, 94, 0.18);
  color: rgba(187, 247, 208, 0.96);
}

.speech-mic-button[data-speech-state="listening"] .speech-mic-icon {
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5));
}

.speech-mic-button[data-speech-state="processing"] {
  background: rgba(69, 26, 3, 0.42);
  border-color: rgba(251, 191, 36, 0.36);
  color: rgba(254, 243, 199, 0.96);
}

.speech-mic-button[data-speech-state="error"],
.speech-mic-button[data-speech-state="unsupported"] {
  background: rgba(30, 41, 59, 0.42);
  border-color: rgba(100, 116, 139, 0.22);
  color: rgba(148, 163, 184, 0.7);
}

.speech-mic-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

@keyframes speechListeningPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(74, 222, 128, 0.12),
      0 0 14px rgba(34, 197, 94, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(74, 222, 128, 0.18),
      0 0 22px rgba(34, 197, 94, 0.24);
  }
}

.speech-status-text {
  color: #536275;
  font-size: 0.72rem;
  font-weight: 760;
  grid-column: 1 / -1;
  line-height: 1.2;
  min-height: 0;
}

.speech-status-text:empty {
  display: none;
}

.speech-field-hint {
  color: #607086;
  font-size: 0.76rem;
  line-height: 1.3;
  margin: 0.22rem 0 0;
}

@media (max-width: 760px) {
  .speech-input-wrap {
    gap: 0.28rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .speech-mic-button {
    height: 1.84rem;
    min-height: 1.84rem;
    min-width: 1.84rem;
    padding: 0;
    width: 1.84rem;
  }

  .speech-mic-label {
    display: none;
  }

  .speech-field-hint {
    font-size: 0.7rem;
  }
}

/* P08I mobile dashboard space recovery: compact Practice Notes and metronome. */
@media (max-width: 760px) {
  #currentItemNotesBox.current-item-notes-box {
    gap: 0.16rem !important;
    padding: 0.38rem 0.46rem !important;
  }

  #currentItemNotesBox .current-item-notes-header {
    align-items: flex-start !important;
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 !important;
  }

  #currentItemNotesBox .current-item-notes-header label {
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
  }

  #currentItemNotesBox .current-item-notes-header span {
    display: none !important;
  }

  #currentItemNotesBox .speech-input-wrap {
    margin-top: 0.04rem !important;
  }

  #currentItemNotesBox #currentItemNotes {
    min-height: 2.9rem !important;
  }
}

@media (max-width: 860px) {
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome {
    margin-top: 0.38rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-closed {
    padding: 0.28rem 0.42rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-closed .p03i-closed-strip {
    gap: 0.32rem !important;
    min-height: 1.72rem !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-closed .p03i-closed-strip strong {
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-closed .p03i-closed-strip strong::after {
    color: #7c6f61;
    content: " ·";
    font-weight: 800;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.is-closed .p03i-tool-button {
    font-size: 0.72rem !important;
    min-height: 1.58rem !important;
    padding: 0.14rem 0.42rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open {
    padding: 0.28rem 0.42rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-header {
    align-items: center !important;
    column-gap: 0.18rem !important;
    grid-template-areas:
      "title actions hide"
      "bpm config config" !important;
    grid-template-columns: max-content minmax(0, 1fr) auto !important;
    row-gap: 0.16rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-title-region {
    align-self: center !important;
    grid-area: title !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-timing-title {
    font-size: 0.82rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.14rem !important;
    grid-area: actions !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    min-width: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-actions button,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    font-size: 0.68rem !important;
    min-height: 1.58rem !important;
    min-width: max-content !important;
    padding: 0.14rem 0.28rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    gap: 0.1rem !important;
    min-height: 1.58rem !important;
    white-space: nowrap !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03mAutoSound input {
    height: 0.88rem !important;
    margin: 0 !important;
    width: 0.88rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-hide {
    display: inline-flex !important;
    grid-area: hide !important;
    justify-self: end !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-settings-region,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-pattern-region,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-pattern-summary,
  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05t-timing-details {
    display: none !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p06d-metro-bpm-region {
    grid-area: bpm !important;
    min-width: max-content !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control {
    gap: 0.1rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-step {
    min-height: 1.62rem !important;
    min-width: 1.62rem !important;
    width: 1.62rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p05w-bpm-control .p03i-bpm-input {
    flex-basis: 2.62rem !important;
    min-height: 1.62rem !important;
    min-width: 2.62rem !important;
    width: 2.62rem !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    grid-area: config !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  body[data-dashboard-mode="essentials"] #p03iMetronomeCard.p06d-stable-metronome.is-open #p03iSoundSelect {
    min-height: 1.72rem !important;
  }
}

/* P08U studio surfaces: lightweight optional context. */
.mobile-queue-toggle,
.desktop-queue-toggle {
  display: none;
}

@media (min-width: 861px) {
  .desktop-queue-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    color: #17633b;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 820;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    min-height: 1.62rem;
    min-width: 3.5rem;
    padding: 0.18rem 0.52rem;
    white-space: nowrap;
  }

  .main-queue-panel .queue-title-row {
    grid-template-columns: auto auto minmax(80px, 1fr) auto !important;
  }

  .desktop-queue-toggle:hover {
    background: rgba(236, 253, 245, 0.9);
    border-color: rgba(34, 197, 94, 0.28);
  }

  .main-queue-panel.is-desktop-queue-collapsed,
  .queue-panel.main-queue-panel.is-desktop-queue-collapsed,
  .queue-panel.compact-side-queue.main-queue-panel.is-desktop-queue-collapsed {
    gap: 0.35rem !important;
    min-height: 0 !important;
    padding-block: 0.58rem !important;
  }

  .main-queue-panel.is-desktop-queue-collapsed .queue-helper,
  .main-queue-panel.is-desktop-queue-collapsed .session-queue {
    display: none !important;
  }

  .main-queue-panel.is-desktop-queue-collapsed .queue-title-row {
    align-items: center !important;
  }
}

/* P08U studio surfaces: calm open states and safer destructive confirmations. */
.guidance-modal-message {
  white-space: pre-line;
}

.composition-pulse,
.composition-pulse[aria-expanded="true"],
.practice-composition-rail.is-pulse-expanded .composition-pulse {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(236, 253, 245, 0.72)),
    rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(114, 83, 45, 0.16) !important;
  color: #193047 !important;
}

.composition-pulse[aria-expanded="true"] .composition-pulse-total,
.practice-composition-rail.is-pulse-expanded .composition-pulse-total {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(6, 118, 71, 0.16) !important;
  color: #067647 !important;
}

.composition-section.is-expanded,
.practice-composition-rail.is-pulse-expanded .composition-section.is-expanded {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 248, 0.88)) !important;
  border-color: rgba(31, 94, 255, 0.18) !important;
  box-shadow: 0 14px 30px rgba(41, 52, 76, 0.08) !important;
  color: #172033 !important;
}

.composition-section.is-expanded .composition-section-title,
.composition-section.is-expanded .composition-count,
.composition-section.is-expanded .composition-estimate,
.composition-section.is-expanded .composition-section-note,
.composition-section.is-expanded .composition-chip,
.composition-section.is-expanded .composition-detail-name,
.composition-section.is-expanded .composition-detail-meta {
  color: inherit;
  text-shadow: none !important;
}

.composition-section.is-expanded .composition-count,
.composition-section.is-expanded .composition-chip,
.composition-section.is-expanded .composition-detail-item {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(71, 85, 105, 0.13) !important;
}

#currentItemNotesBox.current-item-notes-box {
  background: linear-gradient(180deg, rgba(255, 253, 245, 0.98), rgba(247, 239, 223, 0.94)) !important;
  border-color: rgba(126, 102, 67, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(54, 42, 25, 0.045) !important;
}

.current-item-references-box.reference-context-box {
  background: linear-gradient(180deg, rgba(255, 249, 235, 0.98), rgba(241, 225, 195, 0.94)) !important;
  border-color: rgba(151, 105, 42, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 30px rgba(72, 50, 25, 0.06) !important;
}

body[data-dashboard-mode] #p03iTimerCard.p03i-timing-card {
  background: linear-gradient(180deg, rgba(244, 249, 252, 0.98), rgba(226, 235, 243, 0.94)) !important;
  border-color: rgba(66, 91, 124, 0.19) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(38, 57, 82, 0.045) !important;
}

body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome {
  background: linear-gradient(180deg, rgba(243, 248, 251, 0.98), rgba(222, 233, 241, 0.94)) !important;
  border-color: rgba(57, 91, 121, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(38, 57, 82, 0.045) !important;
}

.current-item-reminder-box[open] {
  background: linear-gradient(180deg, rgba(253, 248, 238, 0.98), rgba(235, 221, 196, 0.94)) !important;
  border-color: rgba(132, 100, 58, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 12px 26px rgba(62, 45, 22, 0.05) !important;
  color: #302d27 !important;
}

.quick-record-panel {
  background: linear-gradient(180deg, rgba(138, 152, 168, 0.96), rgba(107, 123, 143, 0.94));
  border: 1px solid rgba(235, 242, 249, 0.44);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 14px 30px rgba(30, 41, 59, 0.058);
  color: #f8fbfd;
  margin-top: 0.5rem;
  order: 45;
  padding: 0.34rem 0.48rem;
}

.runtime-defaults-prompt {
  align-items: center;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(232, 240, 247, 0.96));
  border: 1px solid rgba(72, 95, 124, 0.18);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(38, 57, 82, 0.045);
  color: #405063;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: space-between;
  margin-top: 0.42rem;
  order: 44;
  padding: 0.42rem 0.54rem;
}

.desktop-timing-tools-row > .runtime-defaults-prompt,
.timing-support-row > .runtime-defaults-prompt {
  flex: 1 1 100%;
  width: 100%;
}

.runtime-defaults-prompt[hidden] {
  display: none !important;
}

.runtime-defaults-prompt span {
  font-size: 0.78rem;
  font-weight: 760;
}

.runtime-defaults-prompt button {
  font-size: 0.76rem;
  min-height: 1.72rem;
  padding: 0.2rem 0.58rem;
}

.runtime-defaults-prompt.has-confirmation {
  background: linear-gradient(180deg, rgba(239, 253, 246, 0.98), rgba(220, 242, 231, 0.96));
  border-color: rgba(45, 126, 91, 0.2);
  color: #25634b;
}

.runtime-default-action-prompt {
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.99), rgba(246, 232, 191, 0.97));
  border: 1px solid rgba(166, 113, 35, 0.32);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(92, 63, 18, 0.07);
  color: #5b421c;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: 0.45rem;
  order: 44;
  padding: 0.48rem 0.6rem;
  width: 100%;
}

.runtime-default-action-prompt[hidden] {
  display: none !important;
}

.runtime-default-action-prompt span {
  font-size: 0.82rem;
  font-weight: 780;
}

.runtime-default-action-buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.runtime-default-action-prompt button {
  font-size: 0.77rem;
  min-height: 1.76rem;
  padding: 0.22rem 0.62rem;
}

.runtime-default-action-prompt .runtime-default-save-button {
  background: #2563eb;
  border-color: rgba(37, 99, 235, 0.36);
  color: #ffffff;
}

.runtime-timer-default-prompt {
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.99), rgba(224, 238, 252, 0.97));
  border-color: rgba(61, 99, 143, 0.26);
  color: #294564;
}

.runtime-default-action-prompt.has-confirmation {
  background: linear-gradient(180deg, rgba(238, 252, 244, 0.99), rgba(217, 241, 228, 0.97));
  border-color: rgba(45, 126, 91, 0.24);
  color: #25634b;
}

.quick-record-panel[hidden] {
  display: none !important;
}

.main-queue-panel,
.queue-panel.main-queue-panel {
  order: 46 !important;
}

#currentItemNotesBox.current-item-notes-box {
  order: 50 !important;
}

.current-item-reminder-box {
  order: 55 !important;
}

.quick-record-panel summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  list-style: none;
  min-height: 1.82rem;
}

.quick-record-panel summary::-webkit-details-marker {
  display: none;
}

.quick-record-panel summary::after {
  color: #d4dee8;
  content: "Hide";
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.quick-record-panel[open] summary::after {
  content: "Hide";
}

.quick-record-panel:not([open]) summary::after {
  content: "";
}

.quick-record-summary-main {
  align-items: center;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 850;
  gap: 0.36rem;
  min-width: 0;
}

.quick-record-summary-status {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(226, 235, 244, 0.22);
  border-radius: 999px;
  color: #e1eaf2;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.2rem 0.46rem;
  white-space: nowrap;
}

.quick-record-panel.is-recording .quick-record-summary-status {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(248, 113, 113, 0.38);
  color: #fecaca;
}

.quick-record-panel.is-playing .quick-record-summary-status {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.34);
  color: #bfdbfe;
}

.quick-record-body {
  display: grid;
  gap: 0.32rem;
  padding-top: 0.34rem;
}

.quick-record-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.quick-record-row button {
  font-size: 0.78rem;
  min-height: 1.78rem;
  padding: 0.22rem 0.58rem;
}

.quick-record-primary-row button:first-child {
  background: linear-gradient(135deg, #d62f4b, #f04462);
  color: #fff;
}

.quick-record-panel.is-recording .quick-record-primary-row button:first-child {
  background: #e5e7eb;
  color: #64748b;
}

.quick-record-elapsed {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(226, 235, 244, 0.22);
  border-radius: 999px;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
  min-width: 3.3rem;
  padding: 0.38rem 0.54rem;
  text-align: center;
}

.quick-record-status {
  color: #d4dee8;
  font-size: 0.76rem;
  line-height: 1.25;
  margin: 0;
}

.quick-record-status[data-tone="error"] {
  color: #fecaca;
}

.quick-record-status[data-tone="success"] {
  color: #bbf7d0;
}

.quick-record-status[data-tone="recording"],
.quick-record-status[data-tone="playing"] {
  color: #fecaca;
  font-weight: 760;
}

.quick-record-status[data-tone="playing"] {
  color: #bfdbfe;
}

.quick-record-label-field {
  align-items: center;
  display: grid;
  gap: 0.32rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}

.quick-record-label-field[hidden] {
  display: none !important;
}

.quick-record-label-field span {
  color: #d4dee8;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.quick-record-label-field input {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(226, 235, 244, 0.3);
  min-height: 1.82rem;
}

.log-recording-badge {
  align-items: center;
  background: rgba(36, 50, 67, 0.08);
  border: 1px solid rgba(36, 50, 67, 0.1);
  border-radius: 999px;
  color: #334155;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  margin-top: 0.18rem;
  padding: 0.2rem 0.48rem;
  width: fit-content;
}

.log-recording-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.18rem;
}

.log-recording-play-button {
  background: rgba(36, 50, 67, 0.06);
  border: 1px solid rgba(36, 50, 67, 0.12);
  border-radius: 999px;
  color: #1e40af;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  min-height: 1.58rem;
  padding: 0.2rem 0.5rem;
}

.log-recording-play-button.is-playing {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.22);
  color: #1d4ed8;
}

@media (max-width: 860px) {
  body[data-dashboard-mode] #p03iTimerCard.p03i-timing-card.is-closed,
  body[data-dashboard-mode] #p03iMetronomeCard.p03i-timing-card.is-closed {
    padding: 0.28rem 0.42rem !important;
  }

  body[data-dashboard-mode] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip,
  body[data-dashboard-mode] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip {
    align-items: center !important;
    gap: 0.32rem !important;
    min-height: 1.72rem !important;
    padding: 0 !important;
  }

  body[data-dashboard-mode] #p03iTimerCard.p03i-timing-card.is-closed .p03i-closed-strip strong,
  body[data-dashboard-mode] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-closed-strip strong {
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
  }

  body[data-dashboard-mode] #p03iTimerCard.p03i-timing-card.is-closed .p03i-tool-button,
  body[data-dashboard-mode] #p03iMetronomeCard.p03i-timing-card.is-closed .p03i-tool-button {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.72rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.58rem !important;
    min-width: 3.18rem !important;
    padding: 0.14rem 0.42rem !important;
  }

  .quick-record-panel {
    margin-top: 0.34rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  .quick-record-panel summary {
    gap: 0.34rem;
    min-height: 1.72rem;
  }

  .quick-record-summary-main {
    font-size: 0.82rem;
  }

  .quick-record-summary-status {
    font-size: 0.68rem;
    padding: 0.16rem 0.38rem;
  }

  .quick-record-body {
    gap: 0.26rem;
    padding-top: 0.3rem;
  }

  .quick-record-row {
    flex-wrap: wrap;
    gap: 0.24rem;
  }

  .quick-record-row button {
    flex: 0 1 auto;
    font-size: 0.72rem;
    min-height: 1.62rem;
    min-width: max-content;
    padding: 0.16rem 0.42rem;
  }

  .quick-record-elapsed {
    min-width: 3rem;
    padding: 0.3rem 0.42rem;
  }

  .quick-record-status {
    font-size: 0.7rem;
  }

  .quick-record-label-field {
    gap: 0.24rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quick-record-label-field span {
    font-size: 0.66rem;
  }

  .quick-record-label-field input {
    min-height: 1.62rem;
  }
}

@media (max-width: 760px) {
  .hero-current > .eyebrow {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  #currentItemMeta.record-meta {
    display: none !important;
  }

  .main-queue-panel .mobile-queue-toggle {
    align-items: center;
    background: rgba(236, 253, 245, 0.88);
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 999px;
    color: #17633b;
    display: flex;
    font-size: 0.76rem;
    font-weight: 880;
    justify-content: space-between;
    min-height: 1.8rem;
    padding: 0.18rem 0.58rem;
    width: 100%;
  }

  .mobile-queue-toggle-label,
  .mobile-queue-toggle-action {
    display: inline-flex;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-queue-toggle-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-queue-toggle-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(34, 197, 94, 0.14);
    border-radius: 999px;
    color: #17633b;
    font-size: 0.72rem;
    justify-content: center;
    margin-left: auto;
    min-height: 1.48rem;
    min-width: 3.18rem;
    padding: 0.12rem 0.42rem;
  }

  .main-queue-panel.is-mobile-queue-collapsed,
  .queue-panel.main-queue-panel.is-mobile-queue-collapsed,
  .queue-panel.compact-side-queue.main-queue-panel.is-mobile-queue-collapsed {
    gap: 0 !important;
    margin-top: 0.3rem !important;
    min-height: 0 !important;
    padding: 0.34rem 0.44rem !important;
  }

  .main-queue-panel.is-mobile-queue-collapsed .queue-heading,
  .main-queue-panel.is-mobile-queue-collapsed .session-queue {
    display: none !important;
  }

  .main-queue-panel.is-mobile-queue-open .mobile-queue-toggle {
    margin-bottom: 0.3rem;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome,
  .main-queue-panel,
  .queue-panel.main-queue-panel,
  .current-item-reminder-box {
    margin-top: 0.34rem !important;
  }

  .current-item-reminder-box summary {
    min-height: 1.72rem;
  }

  .current-item-reminder-box summary::after {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(154, 111, 56, 0.14);
    border-radius: 999px;
    color: #6b5b45;
    display: inline-flex;
    font-size: 0.72rem;
    justify-content: center;
    line-height: 1;
    min-height: 1.48rem;
    min-width: 3.18rem;
    padding: 0.12rem 0.42rem;
  }
}

/* P08H reminder persistence: Reminder Notes are item-level, compact, and secondary. */
.current-item-reminder-box {
  background:
    linear-gradient(90deg, rgba(181, 118, 48, 0.12), transparent 0.36rem),
    rgba(255, 248, 232, 0.72);
  border: 1px solid rgba(154, 111, 56, 0.2);
  border-radius: 12px;
  color: #324055;
  margin: 0.38rem 0;
  order: 36;
  padding: 0.42rem 0.54rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.current-item-reminder-box[hidden] {
  display: none !important;
}

.current-item-reminder-box summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 880;
  gap: 0.5rem;
  justify-content: space-between;
  list-style: none;
  padding-left: 0.2rem;
}

.current-item-reminder-box summary::-webkit-details-marker {
  display: none;
}

.current-item-reminder-box summary::after {
  color: #7c6f61;
  content: "Open";
  font-size: 0.68rem;
  font-weight: 820;
}

.current-item-reminder-box[open] summary::after {
  content: "Hide";
}

.reminder-indicator {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(120, 113, 108, 0.14);
  border-radius: 999px;
  color: #6b5b45;
  font-size: 0.68rem;
  font-weight: 820;
  padding: 0.14rem 0.38rem;
}

.reminder-indicator:empty {
  display: none;
}

.current-item-reminder-box p {
  color: #62513d;
  font-size: 0.74rem;
  line-height: 1.25;
  margin: 0.34rem 0 0.34rem 0.2rem;
}

.current-item-reminder-box textarea {
  min-height: 3rem;
  resize: vertical;
  width: 100%;
}

.reminder-actions {
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.38rem;
}

.reminder-actions .status {
  font-size: 0.74rem;
  margin: 0;
}

@media (max-width: 760px) {
  .current-item-reminder-box {
    margin: 0.34rem 0 0;
    padding: 0.38rem 0.48rem;
  }

  .current-item-reminder-box summary {
    font-size: 0.78rem;
    min-height: 1.72rem;
  }

  .current-item-reminder-box summary::after {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(154, 111, 56, 0.14);
    border-radius: 999px;
    color: #6b5b45;
    display: inline-flex;
    font-size: 0.72rem;
    justify-content: center;
    line-height: 1;
    min-height: 1.48rem;
    padding: 0.12rem 0.42rem;
  }

  .current-item-reminder-box p {
    font-size: 0.68rem;
    margin: 0.28rem 0;
  }

  .current-item-reminder-box textarea {
    min-height: 2.9rem;
  }
}

/* P10AG mobile Setup compression enforcement: keep this late so older mobile layers cannot revive the expanded setup UI. */
@media (max-width: 940px), (pointer: coarse) {
  .app-screen[hidden],
  .setup-screen.app-screen[hidden] {
    display: none !important;
  }

  .setup-screen.app-screen {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.46rem !important;
  }

  .setup-screen > .section-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .setup-screen > .section-header {
    order: 1 !important;
  }

  .setup-screen > .setup-card-row {
    order: 2 !important;
  }

  .setup-screen > .setup-starter-content-panel {
    order: 3 !important;
  }

  .setup-screen > #setupMobileMapPanel {
    order: 4 !important;
  }

  .setup-screen > #integrityHealthPanel {
    order: 5 !important;
  }

  .setup-screen > .setup-mobile-backup-panel {
    order: 6 !important;
  }

  .setup-screen .setup-action-card > .step-number,
  .setup-screen .setup-card-row .setup-action-card > .step-number {
    display: none !important;
  }

  .setup-screen .setup-action-card {
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 0.44rem 0.52rem !important;
  }

  .setup-screen .setup-action-card p {
    display: block !important;
    font-size: 0.73rem !important;
    line-height: 1.25 !important;
    margin: 0.06rem 0 0 !important;
  }

  .setup-screen .setup-action-card button {
    align-self: center !important;
    font-size: 0.7rem !important;
    min-height: 1.9rem !important;
    padding: 0.24rem 0.48rem !important;
  }

  .setup-screen .setup-collapse-toggle {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.72rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.86rem !important;
    padding: 0.22rem 0.54rem !important;
    width: auto !important;
  }

  .setup-screen .setup-starter-content-panel.is-collapsed {
    padding: 0.42rem 0.52rem !important;
  }

  .setup-screen .setup-starter-content-panel.is-collapsed #setupStarterContent,
  .setup-screen .setup-starter-content-panel.is-collapsed .setup-collapsible-content,
  .setup-screen .setup-starter-content-panel.is-collapsed .sample-program-field,
  .setup-screen .setup-starter-content-panel.is-collapsed .setup-sample-actions {
    display: none !important;
  }

  .setup-screen .setup-starter-content-panel.is-collapsed .setup-collapsible-heading {
    width: 100% !important;
  }

  .setup-screen .setup-starter-content-panel.is-collapsed .setup-collapsible-heading::after {
    color: var(--muted);
    content: "Examples and sample programs";
    flex: 1 1 auto;
    font-size: 0.74rem;
    font-weight: 720;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .setup-screen #setupMobileMapPanel.setup-mobile-map-panel {
    background: linear-gradient(135deg, rgba(255, 253, 247, 0.97), rgba(246, 241, 230, 0.96)) !important;
    border: 1px solid rgba(143, 117, 73, 0.18) !important;
    border-radius: 14px !important;
    display: grid !important;
    gap: 0.34rem !important;
    margin-top: 0.34rem !important;
    padding: 0.46rem 0.52rem !important;
  }

  .setup-screen .setup-mobile-map-preview {
    display: grid !important;
    gap: 0.24rem !important;
  }

  .setup-screen #setupMobileMapPanel.is-expanded .setup-mobile-map-preview {
    display: none !important;
  }

  .setup-screen .setup-mobile-map-section {
    display: grid !important;
    gap: 0.28rem !important;
  }

  .setup-screen .setup-mobile-map-section-title {
    color: #344152 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
  }

  .setup-screen .setup-mobile-map-section-body {
    display: grid !important;
    gap: 0.3rem !important;
  }

  .setup-screen .setup-mobile-map-relation,
  .setup-screen .setup-mobile-map-empty,
  .setup-screen .setup-mobile-map-unlinked-list {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(116, 99, 70, 0.14) !important;
    border-radius: 11px !important;
    display: grid !important;
    gap: 0.16rem !important;
    padding: 0.4rem 0.48rem !important;
  }

  .setup-screen .setup-mobile-map-section.is-standalone .setup-mobile-map-unlinked-list {
    background: rgba(255, 250, 241, 0.72) !important;
    border-color: rgba(180, 83, 9, 0.16) !important;
  }

  .setup-screen .setup-mobile-map-relation strong {
    color: #27364a !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }

  .setup-screen .setup-mobile-map-relation span,
  .setup-screen .setup-mobile-map-relation em,
  .setup-screen .setup-mobile-map-unlinked-list span,
  .setup-screen .setup-mobile-map-unlinked-list em,
  .setup-screen .setup-mobile-map-empty {
    color: #526070 !important;
    font-size: 0.72rem !important;
    font-style: normal !important;
    line-height: 1.22 !important;
  }

  .setup-screen .setup-mobile-map-relation.is-unlinked {
    border-color: rgba(180, 83, 9, 0.18) !important;
  }

  .setup-screen #setupMobileMapPanel.is-expanded #setupMobileMapDetails {
    border-top: 1px solid rgba(116, 99, 70, 0.12) !important;
    padding-top: 0.3rem !important;
  }

  .setup-screen #setupMobileMapDetails[hidden] {
    display: none !important;
  }

  .setup-screen #setupMobileMapDetails {
    display: grid !important;
    gap: 0.34rem !important;
  }

  .setup-screen .setup-mobile-map-counts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.2rem !important;
  }

  .setup-screen .setup-mobile-map-chip {
    font-size: 0.68rem !important;
    line-height: 1 !important;
    padding: 0.16rem 0.38rem !important;
  }

  .setup-screen #integrityHealthPanel.desktop-only-setup-card {
    display: grid !important;
    gap: 0.38rem !important;
    margin-top: 0 !important;
    padding: 0.46rem 0.52rem !important;
  }

  .setup-screen #integrityHealthPanel .integrity-health-header {
    align-items: start !important;
    display: grid !important;
    gap: 0.4rem !important;
  }

  .setup-screen #integrityHealthPanel .integrity-health-header p,
  .setup-screen #integrityHealthPanel .integrity-backlog-note {
    display: none !important;
  }

  .setup-screen #integrityHealthPanel .integrity-health-header h3 {
    font-size: 0.92rem !important;
  }

  .setup-screen #integrityHealthPanel #integrityCheckButton {
    font-size: 0.74rem !important;
    min-height: 1.9rem !important;
    padding: 0.26rem 0.52rem !important;
    width: max-content !important;
  }

  .setup-screen .integrity-health-summary,
  .setup-screen .integrity-review-panel {
    padding: 0.38rem 0.42rem !important;
  }

  .setup-screen #integrityHealthList[hidden] {
    display: none !important;
  }

  .setup-screen .integrity-review-panel {
    display: grid !important;
    gap: 0.36rem !important;
  }

  .setup-screen .integrity-review-panel .integrity-panel-label {
    align-items: center !important;
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .setup-screen .integrity-review-panel .integrity-panel-label strong,
  .setup-screen .integrity-review-panel .integrity-panel-label span {
    min-width: 0 !important;
  }

  .setup-screen .integrity-review-panel .integrity-panel-label span {
    grid-column: 1 !important;
  }

  .setup-screen .integrity-review-toggle {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.7rem !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 1.82rem !important;
    padding: 0.22rem 0.5rem !important;
    max-width: 8.4rem !important;
    white-space: nowrap !important;
  }

  .setup-screen .integrity-health-list {
    gap: 0.34rem !important;
  }

  .setup-screen .integrity-issue {
    gap: 0.28rem !important;
    padding: 0.4rem 0.46rem !important;
  }

  .setup-screen .integrity-issue-heading {
    gap: 0.3rem !important;
  }

  .setup-screen .integrity-detail,
  .setup-screen .integrity-action {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .setup-screen > .setup-mobile-backup-panel {
    display: grid !important;
    gap: 0.3rem !important;
    margin-top: 0 !important;
    padding: 0.42rem 0.5rem !important;
  }

  .setup-screen > .setup-mobile-backup-panel strong {
    font-size: 0.86rem !important;
    margin: 0 !important;
  }

  .setup-screen > .setup-mobile-backup-panel p {
    display: none !important;
  }

  .setup-screen > .setup-mobile-backup-panel .setup-backup-actions {
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .setup-screen > .setup-mobile-backup-panel button,
  .setup-screen > .setup-mobile-backup-panel .setup-restore-file-label {
    font-size: 0.7rem !important;
    min-height: 1.85rem !important;
    padding: 0.24rem 0.42rem !important;
  }
}

/* P10AG canonical mobile Goal editor sheet: one cascade source for active Add/Edit paths. */
@media (max-width: 760px) {
  body.mobile-editing-sheet-open {
    height: var(--mobile-sheet-height, 100dvh) !important;
    left: 0 !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--mobile-sheet-body-top, 0px) !important;
    width: 100vw !important;
  }

  body.mobile-editing-sheet-open .app-nav {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"],
  #editModalBackdrop[data-mobile-sheet="goal"] {
    align-items: flex-end !important;
    background: rgba(15, 23, 42, 0.32) !important;
    display: flex !important;
    height: var(--mobile-sheet-height, 100dvh) !important;
    inset: 0 !important;
    justify-content: center !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    position: fixed !important;
    touch-action: none !important;
    transform: none !important;
    width: 100vw !important;
    z-index: 90 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-card {
    border: 0 !important;
    border-radius: 0 !important;
    bottom: var(--mobile-sheet-keyboard-bottom, 0px) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    left: 0 !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: fixed !important;
    right: 0 !important;
    touch-action: auto !important;
    top: var(--mobile-sheet-top, 0px) !important;
    transform: none !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card *,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-header,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-header {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(251, 252, 248, 0.96)) !important;
    border-bottom: 1px solid rgba(147, 123, 88, 0.12) !important;
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 0.18rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    margin: 0 !important;
    min-height: 3.65rem !important;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 1rem 0.75rem !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-header > div,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-header > div {
    min-width: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-header .eyebrow,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-header .eyebrow {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-header h2,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-header h2 {
    font-size: 1.2rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-close-button,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-close-button {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-action,
  #editModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-action {
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #2563eb !important;
    font-size: 1.02rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    min-height: 2.1rem !important;
    padding: 0.25rem 0 !important;
    white-space: nowrap !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-save,
  #editModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-save {
    justify-self: end !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-cancel,
  #editModalBackdrop[data-mobile-sheet="goal"] .mobile-goal-sheet-cancel {
    justify-self: start !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .record-form,
  #editModalBackdrop[data-mobile-sheet="goal"] .record-form {
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 0.72rem !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0.68rem 0 0.92rem !important;
    touch-action: pan-y !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .field-grid,
  #editModalBackdrop[data-mobile-sheet="goal"] .field-grid,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] form > .field,
  #editModalBackdrop[data-mobile-sheet="goal"] form > .field,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-references-box,
  #editModalBackdrop[data-mobile-sheet="goal"] .modal-references-box,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .add-reference-create-box,
  #editModalBackdrop[data-mobile-sheet="goal"] .add-reference-create-box {
    background: rgba(255, 253, 248, 0.92) !important;
    border: 1px solid rgba(111, 87, 54, 0.13) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    gap: 0.52rem !important;
    margin: 0 !important;
    padding: 0.82rem 0.88rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .planning-fields,
  #editModalBackdrop[data-mobile-sheet="goal"] .planning-fields {
    align-items: stretch !important;
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .planning-fields .field,
  #editModalBackdrop[data-mobile-sheet="goal"] .planning-fields .field {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.52rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalFields,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalEntityFields {
    background: rgba(244, 250, 247, 0.82) !important;
    border-color: rgba(74, 103, 88, 0.12) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordPlanningFields,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalEntityFields {
    padding: 0.62rem 0.8rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordPriorityField,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordPlanningFields .field:has(#addRecordFrequency),
  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordSequenceOrderField,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalPriorityField,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalFrequencyField,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalPracticeRoleField,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalSequenceOrderField {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] [hidden],
  #editModalBackdrop[data-mobile-sheet="goal"] [hidden],
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .planning-fields .field[hidden],
  #editModalBackdrop[data-mobile-sheet="goal"] .planning-fields .field[hidden] {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] label,
  #editModalBackdrop[data-mobile-sheet="goal"] label,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock strong,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock strong,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box strong,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box strong {
    color: #111827 !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] input,
  #editModalBackdrop[data-mobile-sheet="goal"] input,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] select,
  #editModalBackdrop[data-mobile-sheet="goal"] select {
    border-radius: 10px !important;
    font-size: 1rem !important;
    min-height: 3.05rem !important;
    padding: 0.72rem 0.78rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordName,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalRecordName {
    min-height: 2.66rem !important;
    padding-block: 0.58rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalStatus,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalLifecycleState {
    min-height: 2.72rem !important;
    padding-block: 0.58rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] textarea,
  #editModalBackdrop[data-mobile-sheet="goal"] textarea {
    border-radius: 10px !important;
    font-size: 1rem !important;
    line-height: 1.42 !important;
    min-height: 5.72rem !important;
    padding: 0.82rem 0.85rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordDescription,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalRecordDescription {
    min-height: 5.72rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] form > .field:has(#addRecordDescription),
  #editModalBackdrop[data-mobile-sheet="goal"] form > .field:has(#modalRecordDescription) {
    background: rgba(248, 250, 252, 0.86) !important;
    border-color: rgba(71, 85, 105, 0.11) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordNotesField {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalIntro,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalGoalGuidance > span,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .speech-field-hint,
  #editModalBackdrop[data-mobile-sheet="goal"] .speech-field-hint,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .reference-edit-note,
  #editModalBackdrop[data-mobile-sheet="goal"] .reference-edit-note,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box small,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box small {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples {
    background: rgba(255, 250, 239, 0.9) !important;
    border-color: rgba(132, 104, 58, 0.14) !important;
    display: grid !important;
    column-gap: 0.55rem !important;
    row-gap: 0.5rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin-top: 0 !important;
    padding: 0.82rem 0.88rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed > span,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed > span,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed .goal-example-picker,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed .goal-example-picker {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed::after,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples.is-collapsed::after {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples strong,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples strong {
    color: #111827 !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    line-height: 1.2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples::after,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-guidance-examples::after {
    color: #64748b !important;
    content: "Example goals for inspiration." !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-toggle,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-toggle {
    align-self: center !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #2563eb !important;
    display: inline-flex !important;
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    line-height: 1 !important;
    min-height: 1.5rem !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-picker,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-picker {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.56rem !important;
    margin: 0 !important;
    max-height: 3.25rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.02rem 1.25rem 0.04rem 0 !important;
    scroll-padding-inline: 0.9rem !important;
    scrollbar-width: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-picker::-webkit-scrollbar,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-picker::-webkit-scrollbar {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button {
    align-items: center !important;
    display: inline-flex !important;
    border-color: rgba(80, 97, 149, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    font-size: 0.82rem !important;
    flex: 0 0 auto !important;
    font-weight: 800 !important;
    justify-content: center !important;
    max-width: none !important;
    min-height: 2.45rem !important;
    min-width: max-content !important;
    padding: 0.42rem 0.76rem !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(1),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(1) {
    background: rgba(235, 241, 255, 0.86) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
    color: #2457c5 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(2),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(2) {
    background: rgba(236, 251, 242, 0.86) !important;
    border-color: rgba(22, 163, 74, 0.18) !important;
    color: #166534 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(3),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(3) {
    background: rgba(245, 239, 255, 0.88) !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
    color: #5b21b6 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(4),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(4) {
    background: rgba(255, 246, 232, 0.9) !important;
    border-color: rgba(194, 98, 23, 0.18) !important;
    color: #9a3412 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(5),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:nth-child(5) {
    background: rgba(236, 250, 250, 0.88) !important;
    border-color: rgba(13, 148, 136, 0.18) !important;
    color: #0f766e !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:is(:hover, :focus-visible, .is-selected),
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-example-button:is(:hover, :focus-visible, .is-selected) {
    border-color: rgba(37, 99, 235, 0.34) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-mock {
    background: rgba(252, 249, 241, 0.86) !important;
    border-color: rgba(98, 84, 58, 0.12) !important;
    padding-block: 0.62rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box p,
  #editModalBackdrop[data-mobile-sheet="goal"] .goal-linked-items-box p,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-empty,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-empty,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .record-meta,
  #editModalBackdrop[data-mobile-sheet="goal"] .record-meta {
    color: #64748b !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-header,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.12rem !important;
    justify-content: space-between !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-header span,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-header span {
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(100, 116, 139, 0.14) !important;
    border-radius: 999px !important;
    color: #64748b !important;
    flex: 0 0 auto !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    padding: 0.22rem 0.46rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    max-height: 2.7rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    scrollbar-width: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list::-webkit-scrollbar,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list::-webkit-scrollbar {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list:empty,
  #editModalBackdrop[data-mobile-sheet="goal"] .linked-goals-list:empty,
  #addRecordModalBackdrop[data-mobile-sheet="goal"] .reference-edit-list:empty,
  #editModalBackdrop[data-mobile-sheet="goal"] .reference-edit-list:empty {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalLinkedItems,
  #editModalBackdrop[data-mobile-sheet="goal"] #modalLinkedGoalsMock {
    display: grid !important;
    gap: 0.26rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalLinkedItems[hidden],
  #editModalBackdrop[data-mobile-sheet="goal"] #modalLinkedGoalsMock[hidden] {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] #addRecordGoalLinkedItems p {
    color: #64748b !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-row {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(100, 116, 139, 0.16) !important;
    border-radius: 999px !important;
    color: #334155 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0.34rem !important;
    min-height: 2.04rem !important;
    padding: 0.28rem 0.58rem 0.28rem 0.34rem !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-type {
    border-radius: 999px !important;
    color: #475569 !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    padding: 0.24rem 0.34rem !important;
    text-transform: uppercase !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-name {
    color: #1f2937 !important;
    font-size: 0.85rem !important;
    font-weight: 750 !important;
    line-height: 1.05 !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-row-drill .linked-item-type {
    background: rgba(219, 234, 254, 0.82) !important;
    color: #1d4ed8 !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-row-song .linked-item-type {
    background: rgba(220, 252, 231, 0.82) !important;
    color: #15803d !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-row-solo .linked-item-type {
    background: rgba(237, 233, 254, 0.82) !important;
    color: #6d28d9 !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .linked-item-row-activity .linked-item-type {
    background: rgba(255, 237, 213, 0.86) !important;
    color: #c2410c !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] #modalReferencesBox {
    display: grid !important;
    gap: 0.05rem !important;
    padding: 0.06rem 0.12rem !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] #modalReferencesBox[hidden] {
    display: none !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .reference-add-grid {
    display: grid !important;
    gap: 0.05rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 !important;
  }

  #editModalBackdrop[data-mobile-sheet="goal"] .reference-add-grid .field {
    display: grid !important;
    gap: 0.04rem !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-footer-actions,
  #editModalBackdrop[data-mobile-sheet="goal"] .button-row:last-child {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-footer-actions button,
  #editModalBackdrop[data-mobile-sheet="goal"] .button-row:last-child button {
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    min-height: 1.16rem !important;
    padding: 0.08rem 0.22rem !important;
  }
}

/* P10AJ canonical mobile Drill editor sheet: active Add/Edit Drill paths only. */
@media (max-width: 760px) {
  #addRecordModalBackdrop[data-mobile-sheet="drill"],
  #editModalBackdrop[data-mobile-sheet="drill"] {
    align-items: flex-end !important;
    background: rgba(15, 23, 42, 0.34) !important;
    display: flex !important;
    height: var(--mobile-sheet-height, 100dvh) !important;
    inset: 0 !important;
    justify-content: center !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    position: fixed !important;
    touch-action: none !important;
    transform: none !important;
    width: 100vw !important;
    z-index: 90 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-card,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-card {
    background:
      linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(248, 250, 252, 0.96)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    bottom: var(--mobile-sheet-keyboard-bottom, 0px) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    left: 0 !important;
    max-height: var(--mobile-sheet-height, 100dvh) !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--mobile-sheet-top, 0px) !important;
    transform: none !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-card *,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-header,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-header {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(249, 250, 246, 0.96)) !important;
    border-bottom: 1px solid rgba(147, 123, 88, 0.12) !important;
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 0.2rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    margin: 0 !important;
    min-height: 3.45rem !important;
    padding: max(0.58rem, env(safe-area-inset-top, 0px)) 0.9rem 0.62rem !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-header > div,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-header > div {
    min-width: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-header .eyebrow,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-header .eyebrow {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-header h2,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-header h2 {
    color: #142033 !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-close-button,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-close-button {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-action,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-action {
    align-items: center !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #2563eb !important;
    display: inline-flex !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 2.05rem !important;
    padding: 0.25rem 0 !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-save,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-save {
    justify-self: end !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-cancel,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-goal-sheet-cancel {
    justify-self: start !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .record-form,
  #editModalBackdrop[data-mobile-sheet="drill"] .record-form {
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 0.54rem !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0.56rem 0.62rem calc(0.68rem + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding: 0.8rem 0 1.4rem !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-source-shell:empty,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-source-shell:empty {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section {
    background: rgba(255, 253, 248, 0.88) !important;
    border: 1px solid rgba(111, 87, 54, 0.12) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 0.42rem !important;
    margin: 0 !important;
    padding: 0.6rem 0.68rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-core,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-core {
    background: rgba(255, 245, 225, 0.96) !important;
    border-color: rgba(143, 101, 48, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing {
    background: rgba(232, 241, 248, 0.95) !important;
    border-color: rgba(56, 84, 116, 0.18) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-planning,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-planning {
    background: rgba(236, 248, 241, 0.95) !important;
    border-color: rgba(55, 115, 88, 0.17) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-relationships,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-relationships {
    background: rgba(232, 247, 239, 0.95) !important;
    border-color: rgba(45, 112, 84, 0.18) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-references,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-references {
    background: rgba(255, 239, 214, 0.95) !important;
    border-color: rgba(176, 105, 28, 0.2) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-notes,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-notes {
    background: rgba(242, 246, 249, 0.94) !important;
    border-color: rgba(83, 100, 121, 0.14) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header {
    display: grid !important;
    gap: 0.16rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-title-row,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-title-row {
    align-items: center !important;
    display: flex !important;
    gap: 0.34rem !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header h3,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header h3 {
    color: #172033 !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-badge,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-badge {
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(100, 116, 139, 0.14) !important;
    border-radius: 999px !important;
    color: #6b7280 !important;
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0.18rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-info-button,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-info-button {
    align-items: center !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(100, 116, 139, 0.16) !important;
    border-radius: 999px !important;
    color: #475569 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    height: 1.18rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-left: auto !important;
    padding: 0 !important;
    width: 1.18rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header p,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-header p {
    color: #64748b !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-help,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-help {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(100, 116, 139, 0.1) !important;
    border-radius: 10px !important;
    color: #475569 !important;
    display: none !important;
    font-size: 0.74rem !important;
    line-height: 1.28 !important;
    margin: 0.12rem 0 0 !important;
    padding: 0.38rem 0.46rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section.is-help-open .mobile-drill-section-help,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section.is-help-open .mobile-drill-section-help {
    display: block !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .field,
  #editModalBackdrop[data-mobile-sheet="drill"] .field,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .field-grid,
  #editModalBackdrop[data-mobile-sheet="drill"] .field-grid,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-references-box,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-references-box,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .add-reference-create-box,
  #editModalBackdrop[data-mobile-sheet="drill"] .add-reference-create-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] label,
  #editModalBackdrop[data-mobile-sheet="drill"] label,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock strong,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock strong {
    color: #1f2937 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .help-bubble,
  #editModalBackdrop[data-mobile-sheet="drill"] .help-bubble,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .speech-field-hint,
  #editModalBackdrop[data-mobile-sheet="drill"] .speech-field-hint {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] input,
  #editModalBackdrop[data-mobile-sheet="drill"] input,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] select,
  #editModalBackdrop[data-mobile-sheet="drill"] select {
    border-radius: 10px !important;
    font-size: 1rem !important;
    min-height: 2.34rem !important;
    padding: 0.52rem 0.62rem !important;
    scroll-margin: 0.85rem 0 1.3rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] textarea,
  #editModalBackdrop[data-mobile-sheet="drill"] textarea {
    border-radius: 10px !important;
    font-size: 1rem !important;
    line-height: 1.36 !important;
    min-height: 4.05rem !important;
    padding: 0.62rem 0.66rem !important;
    scroll-margin: 0.85rem 0 1.3rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordNotes,
  #editModalBackdrop[data-mobile-sheet="drill"] #addRecordNotes {
    min-height: 3.35rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-core,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-core,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-planning,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-planning {
    gap: 0.46rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing {
    align-items: start !important;
    display: grid !important;
    gap: 0.48rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordTimedFields {
    display: contents !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordTimingDefaultsSection,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalTimingDefaultsSection,
  #addRecordModalBackdrop[data-mobile-sheet="song"] #addRecordTimingDefaultsSection,
  #editModalBackdrop[data-mobile-sheet="song"] #modalTimingDefaultsSection {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: contents !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .desktop-timing-defaults-header,
  #editModalBackdrop[data-mobile-sheet="drill"] .desktop-timing-defaults-header,
  #addRecordModalBackdrop[data-mobile-sheet="song"] .desktop-timing-defaults-header,
  #editModalBackdrop[data-mobile-sheet="song"] .desktop-timing-defaults-header {
    display: none !important;
  }

  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing .mobile-drill-section-header,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-timing .mobile-drill-section-header {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordPlanningFields,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalEntityFields {
    align-items: start !important;
    display: grid !important;
    gap: 0.48rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordPlanningFields .field:has(#addRecordFrequency),
  #editModalBackdrop[data-mobile-sheet="drill"] #modalFrequencyField {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordSequenceOrderField,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordAutoTimerField,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordTimingSoundField,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordAutoMetronomeField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalAutoTimerField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalTimingSoundField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalAutoMetronomeField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalPracticeRoleField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalSequenceOrderField,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] [hidden],
  #editModalBackdrop[data-mobile-sheet="drill"] [hidden] {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .compact-field-help,
  #editModalBackdrop[data-mobile-sheet="drill"] .compact-field-help,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .reference-edit-note,
  #editModalBackdrop[data-mobile-sheet="drill"] .reference-edit-note {
    color: #64748b !important;
    display: none !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-mock,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-references-box,
  #editModalBackdrop[data-mobile-sheet="drill"] .modal-references-box,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] .add-reference-create-box,
  #editModalBackdrop[data-mobile-sheet="drill"] .add-reference-create-box {
    display: grid !important;
    gap: 0.38rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-notes label,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-notes label {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-references .linked-goals-header,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-section-references .linked-goals-header {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-header,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.32rem !important;
    justify-content: space-between !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-header span,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-header span {
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(100, 116, 139, 0.14) !important;
    border-radius: 999px !important;
    color: #64748b !important;
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    padding: 0.2rem 0.4rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-list,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-list {
    display: grid !important;
    gap: 0.24rem !important;
    max-height: 7.25rem !important;
    overflow: auto !important;
    padding: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goal-option,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goal-option {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid rgba(100, 116, 139, 0.1) !important;
    border-radius: 10px !important;
    display: flex !important;
    gap: 0.4rem !important;
    min-height: 2rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .linked-goals-empty,
  #editModalBackdrop[data-mobile-sheet="drill"] .linked-goals-empty {
    color: #64748b !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .reference-add-grid,
  #editModalBackdrop[data-mobile-sheet="drill"] .reference-add-grid {
    display: grid !important;
    gap: 0.4rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.7fr) !important;
    margin: 0 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readouts,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readouts {
    display: contents !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordDurationField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalMinutesField {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="auto-timer"],
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="auto-timer"] {
    grid-column: 4 / span 3 !important;
    grid-row: 2 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #addRecordBpmField,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalBpmField {
    grid-column: 1 / span 2 !important;
    grid-row: 3 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="sound-beat"],
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="sound-beat"] {
    grid-column: 3 / span 2 !important;
    grid-row: 3 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="auto-metro"],
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout[data-timing-key="auto-metro"] {
    grid-column: 5 / span 2 !important;
    grid-row: 3 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-readout {
    align-self: end !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(100, 116, 139, 0.12) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.12rem !important;
    justify-content: center !important;
    min-height: 2.34rem !important;
    padding: 0.32rem 0.42rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-label,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-label {
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-value,
  #editModalBackdrop[data-mobile-sheet="drill"] .mobile-drill-timing-value {
    color: #1f2937 !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .reference-url-field,
  #editModalBackdrop[data-mobile-sheet="drill"] .reference-url-field {
    grid-column: 1 / -1 !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] #modalAddReferenceButton,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalAddReferenceButton,
  #addRecordModalBackdrop[data-mobile-sheet="drill"] #modalCancelReferenceEditButton,
  #editModalBackdrop[data-mobile-sheet="drill"] #modalCancelReferenceEditButton {
    min-height: 2rem !important;
    padding: 0.36rem 0.52rem !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-footer-actions,
  #editModalBackdrop[data-mobile-sheet="drill"] .button-row:last-child {
    display: none !important;
  }

  #addRecordModalBackdrop[data-mobile-sheet="drill"] .modal-footer-actions button,
  #editModalBackdrop[data-mobile-sheet="drill"] .button-row:last-child button {
    border-radius: 10px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    min-height: 2.24rem !important;
    padding: 0.46rem 0.78rem !important;
  }
}

/* P10AI workspace shell hierarchy refinement: quieter header, nav, and status utilities. */
:root {
  --workspace-shell: #26323d;
  --workspace-shell-soft: #34424e;
  --workspace-shell-muted: rgba(239, 243, 247, 0.68);
  --workspace-accent: #a9c9f6;
}

.app-header.header-with-nav,
.app-header.compact-brand-header.header-with-nav {
  background:
    linear-gradient(180deg, rgba(57, 71, 82, 0.98), rgba(38, 50, 61, 0.985)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 34px rgba(20, 30, 44, 0.12) !important;
  gap: 0.72rem 1.55rem;
  padding: 0.92rem 1.08rem 0.72rem;
}

.compact-brand-header h1 {
  font-weight: 820;
}

.brand-tagline {
  font-weight: 700;
}

.brand-support {
  color: rgba(239, 243, 247, 0.6) !important;
}

.header-with-nav .app-nav,
.app-nav {
  gap: 0.2rem 1.22rem;
}

.header-with-nav .app-nav-button,
.app-nav-button {
  color: rgba(239, 243, 247, 0.7) !important;
  font-size: 0.84rem;
  font-weight: 690;
  letter-spacing: 0.015em;
  min-height: 1.86rem;
  padding: 0.22rem 0.01rem 0.34rem !important;
}

.header-with-nav .app-nav-button:hover,
.app-nav-button:hover {
  border-bottom-color: rgba(169, 201, 246, 0.36) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

.header-with-nav .app-nav-button.is-selected,
.app-nav-button.is-selected {
  border-bottom-color: var(--workspace-accent) !important;
  color: #ffffff !important;
  font-weight: 780;
}

.header-utility-bar {
  border-top-color: rgba(239, 243, 247, 0.1);
  gap: 0.4rem;
  justify-content: flex-end;
  padding-top: 0.55rem;
}

.header-utility-bar .build-label {
  color: rgba(239, 243, 247, 0.4) !important;
  font-size: 0.64rem;
}

.header-utility-bar .build-chip,
.header-utility-bar .prominent-build-chip,
.header-utility-bar .pwa-update-status,
.header-utility-bar #pwaUpdateStatus.pwa-update-status,
.backup-health-button.header-backup-export-button {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(239, 243, 247, 0.095) !important;
  border-radius: 8px !important;
  color: rgba(244, 247, 250, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
  min-height: 1.56rem !important;
  padding: 0.28rem 0.46rem !important;
}

.header-utility-bar #pwaUpdateStatus.pwa-update-status {
  gap: 0.22rem !important;
}

.header-utility-bar #pwaUpdateMessage {
  color: rgba(244, 247, 250, 0.68) !important;
  opacity: 1;
}

.header-utility-bar .pwa-reload-button,
.header-utility-bar .pwa-reload-button.p03h-update-button {
  display: none !important;
}

.header-utility-bar .pwa-update-status.update-available .pwa-reload-button,
.header-utility-bar .pwa-update-status.update-error .pwa-reload-button {
  display: inline-flex !important;
}

.backup-health-button.header-backup-export-button {
  text-transform: none;
}

.card,
.app-screen.card,
.practice-dashboard,
.overview-card,
.manage-tabs-card,
.manage-list-card,
.setup-screen,
.log-card {
  box-shadow: 0 12px 28px rgba(24, 35, 50, 0.045) !important;
}

@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav {
    gap: 0.54rem;
    padding: 0.78rem 0.78rem 0.66rem;
  }

  .header-with-nav .app-nav,
  .app-nav {
    gap: 0.92rem;
  }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    font-size: 0.82rem;
    min-height: 1.82rem !important;
  }

  .header-utility-bar {
    gap: 0.28rem;
    padding-top: 0.46rem;
  }
}

/* P10AH workspace shell modernization: app frame, navigation, and card hierarchy only. */
:root {
  --workspace-bg: #eef0ec;
  --workspace-ink: #162033;
  --workspace-shell: #17212b;
  --workspace-shell-soft: #22303d;
  --workspace-shell-muted: rgba(232, 238, 244, 0.72);
  --workspace-card: rgba(255, 255, 255, 0.88);
  --workspace-card-border: rgba(76, 89, 108, 0.14);
  --workspace-card-shadow: 0 16px 36px rgba(24, 35, 50, 0.055);
  --workspace-accent: #86b9ff;
}

body {
  background: linear-gradient(180deg, #f3f4ef 0%, var(--workspace-bg) 100%) !important;
  color: var(--workspace-ink);
}

.app-shell {
  max-width: 1280px;
  padding: 1.15rem 1rem 4rem;
}

.app-header.header-with-nav,
.app-header.compact-brand-header.header-with-nav {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(35, 48, 61, 0.98), rgba(23, 33, 43, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(22, 32, 46, 0.16);
  display: grid;
  gap: 0.85rem 1.4rem;
  grid-template-areas:
    "brand nav"
    "utility utility";
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.35fr);
  margin-bottom: 1rem;
  padding: 1rem 1.05rem 0.82rem;
}

.brand-block {
  grid-area: brand;
  min-width: 0;
}

.compact-brand-header h1 {
  color: #ffffff;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.18rem;
}

.brand-tagline {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.9rem;
  font-weight: 760;
}

.brand-support {
  color: var(--workspace-shell-muted) !important;
  font-size: 0.8rem;
  line-height: 1.35;
}

.header-with-nav .app-nav,
.app-nav {
  align-items: center;
  align-self: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem 1rem;
  grid-area: nav;
  justify-content: flex-end;
  margin: 0 !important;
  min-width: 0;
  padding: 0 !important;
}

.header-with-nav .app-nav-button,
.app-nav-button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(232, 238, 244, 0.74) !important;
  font-size: 0.86rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  min-height: 2rem;
  padding: 0.28rem 0.03rem 0.38rem !important;
  position: relative;
}

.header-with-nav .app-nav-button:hover,
.app-nav-button:hover {
  background: transparent !important;
  border-bottom-color: rgba(134, 185, 255, 0.44) !important;
  color: #ffffff !important;
}

.header-with-nav .app-nav-button.is-selected,
.app-nav-button.is-selected {
  background: transparent !important;
  border-bottom-color: var(--workspace-accent) !important;
  color: #ffffff !important;
  font-weight: 880;
}

.header-utility-bar {
  align-items: center;
  border-top: 1px solid rgba(232, 238, 244, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  grid-area: utility;
  justify-content: flex-end;
  min-width: 0;
  padding-top: 0.66rem;
}

.header-utility-bar .app-build-line {
  align-items: center;
  color: rgba(232, 238, 244, 0.62) !important;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  line-height: 1;
  margin: 0;
}

.header-utility-bar .build-label {
  color: rgba(232, 238, 244, 0.48) !important;
  font-size: 0.68rem;
  font-weight: 820;
  text-transform: uppercase;
}

.header-utility-bar .build-chip,
.header-utility-bar .prominent-build-chip,
.header-utility-bar .pwa-update-status,
.header-utility-bar #pwaUpdateStatus.pwa-update-status,
.pwa-update-status,
.backup-health-button.header-backup-export-button {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(232, 238, 244, 0.14) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: rgba(244, 247, 250, 0.84) !important;
  display: inline-flex !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  gap: 0.34rem !important;
  line-height: 1 !important;
  min-height: 1.72rem !important;
  padding: 0.34rem 0.5rem !important;
  white-space: nowrap;
  width: auto !important;
}

.header-utility-bar .pwa-update-status.update-available,
.header-utility-bar #pwaUpdateStatus.pwa-update-status.update-available,
.pwa-update-status.update-available,
.backup-health-button.backup-health-warning,
.backup-health-button.backup-health-stale {
  background: rgba(255, 247, 224, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
  color: #fff4c2 !important;
}

.pwa-update-status.update-error {
  background: rgba(254, 226, 226, 0.13) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fee2e2 !important;
}

.app-header.header-with-nav .brand-block h1,
.app-header.compact-brand-header.header-with-nav .brand-block h1 {
  color: #ffffff !important;
}

#pwaUpdateMessage {
  opacity: 0.75;
}

.header-utility-bar #appUpdateStatus,
.header-utility-bar #pwaVersionLabel {
  display: none !important;
}

.pwa-reload-button,
.pwa-reload-button.p03h-update-button {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(232, 238, 244, 0.14) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  min-height: 1.32rem !important;
  padding: 0.16rem 0.42rem !important;
}

.card,
.app-screen.card,
.practice-dashboard,
.overview-card,
.manage-tabs-card,
.manage-list-card,
.setup-screen,
.log-card,
.current-item,
.queue-panel,
.record-card,
.placeholder-panel,
.setup-action-card,
.setup-starter-content-panel,
.activity-log-item {
  border-color: var(--workspace-card-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--workspace-card-shadow) !important;
}

.card,
.app-screen.card,
.practice-dashboard,
.overview-card,
.manage-tabs-card,
.manage-list-card,
.setup-screen,
.log-card {
  background: var(--workspace-card) !important;
  margin: 0.85rem 0;
}

.practice-dashboard.card,
.setup-screen,
.log-card,
.manage-list-card {
  padding: 1.05rem;
}

.section-header,
.practice-header,
.overview-card {
  gap: 0.72rem;
}

.app-screen > .section-header h2,
.practice-header h2,
.screen-title,
#manageScreenTitle {
  color: #1b2638 !important;
  font-size: 1.12rem !important;
  font-weight: 880 !important;
}

.screen-subtitle,
.section-note,
.subtitle {
  color: #6b7280 !important;
  font-weight: 650 !important;
}

.help-bubble {
  background: rgba(88, 116, 150, 0.08) !important;
  border-color: rgba(88, 116, 150, 0.2) !important;
  color: #4f6f94 !important;
}

.dashboard-mode-button,
.filter-button,
.type-tab {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.dashboard-mode-button.is-selected,
.filter-button.is-selected,
.type-tab.is-selected {
  box-shadow: inset 0 -2px 0 rgba(31, 94, 255, 0.38) !important;
}

@media (max-width: 900px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav {
    grid-template-areas:
      "brand"
      "nav"
      "utility";
    grid-template-columns: 1fr;
  }

  .header-with-nav .app-nav,
  .app-nav {
    justify-content: flex-start;
  }

  .header-utility-bar {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0.78rem 0.68rem 5.2rem;
  }

  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav {
    border-radius: 18px;
    gap: 0.62rem;
    padding: 0.85rem 0.82rem 0.72rem;
  }

  .compact-brand-header h1 {
    font-size: 1.58rem;
  }

  .brand-support {
    display: none;
  }

  .header-with-nav .app-nav,
  .app-nav {
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 0.1rem !important;
    scrollbar-width: none;
  }

  .header-with-nav .app-nav::-webkit-scrollbar,
  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    flex: 0 0 auto !important;
    min-height: 1.9rem !important;
    padding: 0.18rem 0 0.34rem !important;
    width: auto !important;
  }

  .header-utility-bar {
    gap: 0.34rem;
    padding-top: 0.54rem;
  }

  .header-utility-bar .pwa-update-status {
    max-width: 100%;
  }

  .practice-dashboard.card,
  .setup-screen,
  .log-card,
  .manage-list-card {
    padding: 0.78rem;
  }

  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* P10AI final cascade lock: hierarchy cleanup must win over older header stopgaps. */
.app-header.header-with-nav,
.app-header.compact-brand-header.header-with-nav,
.app-header.brand-header.header-with-nav {
  background:
    linear-gradient(180deg, rgba(57, 71, 82, 0.98), rgba(38, 50, 61, 0.985)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 34px rgba(20, 30, 44, 0.12) !important;
}

.header-with-nav .app-nav-button,
.app-nav-button {
  color: rgba(239, 243, 247, 0.7) !important;
  font-weight: 690 !important;
}

.header-with-nav .app-nav-button.is-selected,
.app-nav-button.is-selected {
  border-bottom-color: var(--workspace-accent) !important;
  color: #ffffff !important;
  font-weight: 780 !important;
}

.header-utility-bar #pwaUpdateStatus.pwa-update-status,
.header-utility-bar #backupHealthButton.backup-health-button,
.header-utility-bar .build-chip {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(239, 243, 247, 0.095) !important;
  border-radius: 8px !important;
  color: rgba(244, 247, 250, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
  min-height: 1.56rem !important;
  padding: 0.28rem 0.46rem !important;
}

.header-utility-bar #pwaReloadButton.pwa-reload-button {
  display: none !important;
}

.header-utility-bar #mobileForceUpdateButton.mobile-force-update-button {
  display: none !important;
}

.header-utility-bar #pwaUpdateStatus.pwa-update-status.update-available #pwaReloadButton,
.header-utility-bar #pwaUpdateStatus.pwa-update-status.update-error #pwaReloadButton {
  display: inline-flex !important;
}

/* P10AJ mobile stabilization: protect readability and touch clarity from desktop shell flattening. */
@media (max-width: 760px) {
  :root {
    --mobile-nav-bg: #f8fbff;
    --mobile-nav-border: rgba(49, 78, 105, 0.24);
    --mobile-nav-text: #243246;
    --mobile-nav-active: #1748c6;
    --mobile-card-border: rgba(71, 85, 105, 0.22);
  }

  body {
    background: linear-gradient(180deg, #f6f8f3 0%, #edf3f1 100%) !important;
  }

  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    background:
      linear-gradient(180deg, rgba(70, 87, 98, 0.98), rgba(50, 66, 78, 0.98)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 10px 24px rgba(20, 30, 44, 0.12) !important;
  }

  .brand-tagline {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status,
  .header-utility-bar #backupHealthButton.backup-health-button,
  .header-utility-bar .build-chip {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .app-nav,
  .header-with-nav .app-nav {
    background: linear-gradient(180deg, var(--mobile-nav-bg), #edf5fb) !important;
    border: 1px solid var(--mobile-nav-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(24, 35, 50, 0.22) !important;
    gap: 0.2rem !important;
    left: max(0.55rem, env(safe-area-inset-left, 0px)) !important;
    right: max(0.55rem, env(safe-area-inset-right, 0px)) !important;
    padding: 0.34rem 0.36rem calc(0.34rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-nav-button,
  .header-with-nav .app-nav-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: var(--mobile-nav-text) !important;
    flex: 1 1 0 !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    min-height: 2.34rem !important;
    padding: 0.34rem 0.38rem !important;
    text-align: center !important;
    width: auto !important;
  }

  .app-nav-button::before {
    color: currentColor !important;
    opacity: 0.95 !important;
  }

  .app-nav-button.is-selected,
  .header-with-nav .app-nav-button.is-selected {
    background: #ffffff !important;
    border-color: rgba(23, 72, 198, 0.18) !important;
    box-shadow: 0 4px 12px rgba(23, 72, 198, 0.13) !important;
    color: var(--mobile-nav-active) !important;
    font-weight: 900 !important;
  }

  .app-nav-button:hover,
  .header-with-nav .app-nav-button:hover {
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--mobile-nav-active) !important;
  }

  .app-nav-button[data-screen="advanced"],
  .app-nav-button[data-screen="system"] {
    display: none !important;
  }

  .card,
  .app-screen.card,
  .practice-dashboard,
  .current-item,
  .queue-panel,
  .record-card,
  .setup-action-card,
  .setup-starter-content-panel,
  .activity-log-item,
  .reference-context-box,
  .current-item-notes-box,
  .p03i-timing-card,
  #p03iTimerCard,
  #p03iMetronomeCard {
    border-color: var(--mobile-card-border) !important;
    box-shadow: 0 8px 20px rgba(24, 35, 50, 0.075) !important;
  }

  .current-item,
  .hero-current {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .screen-title,
  .practice-header h2,
  .app-screen > .section-header h2,
  #manageScreenTitle {
    color: #172033 !important;
  }

  .screen-subtitle,
  .section-note,
  .record-meta,
  .description {
    color: #536174 !important;
  }

  button,
  .secondary-button,
  .hero-primary-button,
  .success-button,
  .p03i-tool-button,
  .p05w-bpm-step,
  .timer-preset,
  .dashboard-mode-button {
    min-height: 2.32rem !important;
  }

  .hero-actions button,
  #startItemButton,
  #doneItemButton,
  #skipItemButton,
  #editCurrentItemButton {
    border-radius: 12px !important;
    font-weight: 880 !important;
  }

  #startItemButton,
  .hero-primary-button {
    background: #1f5eff !important;
    color: #ffffff !important;
  }

  #doneItemButton,
  .success-button {
    background: #087443 !important;
    color: #ffffff !important;
  }

  #skipItemButton,
  #editCurrentItemButton,
  .secondary-button {
    background: #ffffff !important;
    border: 1px solid rgba(71, 85, 105, 0.22) !important;
    color: #243246 !important;
  }

  #p03iTimerCard,
  #p03iMetronomeCard {
    background: rgba(255, 255, 255, 0.92) !important;
  }

  #p03iTimerCard .p03i-open-body,
  #p03iMetronomeCard .p03i-open-body {
    color: #172033 !important;
  }

  #p03iTimerCard input,
  #p03iMetronomeCard input,
  #p03iMetronomeCard select {
    background: #ffffff !important;
    border-color: rgba(71, 85, 105, 0.24) !important;
    color: #172033 !important;
  }

  .backup-health-button.backup-health-risk,
  .backup-health-button.backup-health-danger,
  .backup-health-button.backup-health-warning,
  .backup-health-button.backup-health-stale {
    background: #fff7ed !important;
    border-color: rgba(180, 83, 9, 0.28) !important;
    color: #8a2a1b !important;
  }
}

/* P10AL final cascade lock: Organize is primary nav; Setup is contextual. */
.app-nav-button.setup-nav-button,
.header-with-nav .app-nav-button.setup-nav-button {
  display: none !important;
}

.organize-workspace-shell:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(9.5rem, 0.62fr) minmax(0, 2fr) minmax(14rem, 0.86fr);
  gap: 1rem;
}

.organize-nav-item.is-selected {
  color: #12233c !important;
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 #3d73e6, 0 8px 18px rgba(35, 53, 82, 0.08) !important;
}

.organize-nav-item:not(.is-selected) {
  color: #263349 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.organize-getting-started-toggle {
  margin-top: 0.25rem;
}

.organize-getting-started-toggle:hover,
.organize-getting-started-toggle.is-selected {
  border-color: rgba(61, 115, 230, 0.28);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(35, 53, 82, 0.08);
  color: #1748c6;
}

.organize-getting-started-toggle[hidden] {
  display: none !important;
}

.organize-getting-started-card.is-contextual-help {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.78);
}

@media (max-width: 760px) {
  .organize-workspace-shell:not([hidden]) {
    display: block !important;
  }

  .organize-workspace-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .organize-nav-item:not(.is-selected) {
    background: #ffffff !important;
  }

  .organize-nav-item.is-selected {
    box-shadow: inset 0 -3px 0 #2563eb !important;
  }
}

/* P10AM Organize Workspace v1 evolution: selected-goal workspace and compact mobile shell repair. */
.organize-workspace-shell:not([hidden]) {
  grid-template-columns: minmax(10.5rem, 0.58fr) minmax(0, 3.1fr) minmax(15rem, 0.82fr) !important;
  align-items: stretch;
}

.organize-workspace-content {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.35fr);
  gap: 0.9rem;
  min-width: 0;
}

.organize-goal-browser-panel {
  border: 1px solid rgba(112, 128, 150, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(26, 38, 55, 0.05);
  padding: 0.82rem;
  min-width: 0;
}

.organize-goal-browser-panel[hidden] {
  display: none !important;
}

.organize-panel-header h3 {
  margin: 0.08rem 0 0.24rem;
  color: #172033;
}

.organize-panel-header p:not(.eyebrow) {
  margin: 0 0 0.74rem;
  color: #5a6679;
  font-size: 0.86rem;
  line-height: 1.38;
}

.organize-goal-list {
  display: grid;
  gap: 0.58rem;
}

.organize-goal-list-card {
  appearance: none;
  display: grid;
  gap: 0.32rem;
  width: 100%;
  border: 1px solid rgba(112, 128, 150, 0.16);
  border-radius: 13px;
  padding: 0.76rem;
  background: rgba(248, 250, 252, 0.92);
  color: #1b2638;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organize-goal-list-card:hover {
  border-color: rgba(74, 117, 173, 0.28);
  background: #ffffff;
}

.organize-goal-list-card.is-selected {
  border-color: rgba(74, 117, 173, 0.34);
  background: linear-gradient(135deg, rgba(239, 246, 252, 0.96), rgba(248, 251, 252, 0.94));
  color: #172033;
  box-shadow: 0 12px 24px rgba(49, 72, 103, 0.08);
}

.organize-goal-list-title {
  font-size: 0.92rem;
  font-weight: 840;
  line-height: 1.2;
}

.organize-goal-list-description {
  color: #637086;
  display: -webkit-box;
  font-size: 0.78rem;
  line-height: 1.28;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.organize-goal-list-card.is-selected .organize-goal-list-description {
  color: #536176;
}

.organize-goal-list-meta {
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 820;
}

.organize-goal-list-card.is-selected .organize-goal-list-meta {
  color: #365f9f;
}

.organize-item-workspace-summary {
  margin-bottom: 0.25rem;
}

.organize-item-workspace {
  display: grid;
  gap: 0.58rem;
}

.organize-item-workspace-card {
  appearance: none;
  display: grid;
  gap: 0.24rem;
  width: 100%;
  border: 1px solid rgba(112, 128, 150, 0.14);
  border-radius: 14px;
  padding: 0.72rem 0.78rem;
  background: rgba(255, 255, 255, 0.82);
  color: #1b2638;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.organize-item-workspace-card:hover,
.organize-item-workspace-card.is-selected {
  border-color: rgba(74, 117, 173, 0.28);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 20px rgba(49, 72, 103, 0.08);
  transform: translateY(-1px);
}

.organize-item-workspace-type {
  color: #5d6a7d;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.organize-item-workspace-card strong {
  color: #172033;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.2;
}

.organize-item-workspace-card span:not(.organize-item-workspace-type) {
  color: #637086;
  font-size: 0.78rem;
  line-height: 1.34;
}

.organize-item-workspace-card em {
  color: #48627e;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 720;
}

.organize-goal-empty {
  display: grid;
  gap: 0.18rem;
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(244, 247, 250, 0.92);
  color: #617087;
}

.organize-primary-action {
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: #215cff;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 840;
  min-height: 2.25rem;
  padding: 0.55rem 0.82rem;
  white-space: nowrap;
}

.organize-map-summary {
  display: grid;
  gap: 0.38rem;
  border: 1px solid rgba(112, 128, 150, 0.14);
  border-radius: 14px;
  padding: 0.82rem;
  background: rgba(255, 255, 255, 0.78);
}

.organize-map-summary strong {
  color: #172033;
  font-size: 1rem;
}

.organize-map-summary > span {
  color: #5a6679;
  font-size: 0.86rem;
}

.organize-relationship-map {
  position: relative;
  min-height: 27rem;
  overflow: hidden;
  border: 1px solid rgba(112, 128, 150, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(33, 92, 255, 0.06), transparent 35%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(242, 246, 249, 0.92));
}

.organize-relationship-map[data-node-count="5"],
.organize-relationship-map[data-node-count="6"] {
  min-height: 36rem;
}

.organize-relationship-map[data-node-count="7"],
.organize-relationship-map[data-node-count="8"] {
  min-height: 44rem;
}

.organize-relationship-map::before,
.organize-relationship-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.organize-relationship-map::before {
  left: 50%;
  top: 5.9rem;
  height: 3.25rem;
  border-left: 1px solid rgba(96, 111, 132, 0.18);
  transform: translateX(-50%);
}

.organize-relationship-map::after {
  left: 27%;
  right: 27%;
  top: 9.15rem;
  border-top: 1px solid rgba(96, 111, 132, 0.16);
}

.organize-map-center,
.organize-map-node {
  appearance: none;
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(112, 128, 150, 0.16);
  border-radius: 14px;
  background: #ffffff;
  color: #1b2638;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 12px 24px rgba(26, 38, 55, 0.08);
}

.organize-map-center {
  left: 50%;
  top: 1.25rem;
  max-width: 15rem;
  padding: 0.9rem 1rem;
  transform: translateX(-50%);
  background: #172033;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 850;
  text-align: center;
}

.organize-map-node {
  display: grid;
  gap: 0.14rem;
  width: min(13rem, 40%);
  padding: 0.72rem 0.8rem;
}

.organize-map-node::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.02rem);
  height: 1.95rem;
  border-left: 1px solid rgba(96, 111, 132, 0.15);
  transform: translateX(-50%);
}

.organize-map-node span {
  color: #627086;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.organize-map-node strong {
  font-size: 0.82rem;
  line-height: 1.18;
}

.organize-map-node:hover,
.organize-inspector-link:hover,
.organize-goal-list-card:hover {
  transform: translateY(-1px);
}

.organize-map-drill { background: #edf6ff; }
.organize-map-song { background: #effaf3; }
.organize-map-solo { background: #f3efff; }
.organize-map-activity { background: #fff5e8; }

.organize-map-node.pos-1 { left: 6%; top: 11.45rem; }
.organize-map-node.pos-2 { right: 6%; top: 11.45rem; }
.organize-map-node.pos-3 { left: 6%; top: 18.45rem; }
.organize-map-node.pos-4 { right: 6%; top: 18.45rem; }
.organize-map-node.pos-5 { left: 6%; top: 25.45rem; }
.organize-map-node.pos-6 { right: 6%; top: 25.45rem; }
.organize-map-node.pos-7 { left: 6%; top: 32.45rem; }
.organize-map-node.pos-8 { right: 6%; top: 32.45rem; }

.organize-map-node.pos-5::before,
.organize-map-node.pos-6::before,
.organize-map-node.pos-7::before,
.organize-map-node.pos-8::before {
  height: 1.95rem;
}

.organize-map-empty {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  width: min(22rem, 80%);
  border-radius: 12px;
  padding: 0.78rem;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.84);
  color: #617087;
  font-size: 0.86rem;
  text-align: center;
}

.organize-inspector-meta,
.organize-inspector-links,
.organize-inspector-actions {
  margin-top: 0.85rem;
}

.organize-inspector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border-top: 1px solid rgba(112, 128, 150, 0.12);
  padding: 0.56rem 0;
  color: #637086;
  font-size: 0.8rem;
}

.organize-inspector-row strong {
  color: #172033;
  font-size: 0.8rem;
  text-align: right;
}

.organize-inspector-links > strong {
  display: block;
  margin-bottom: 0.48rem;
  color: #172033;
  font-size: 0.84rem;
}

.organize-inspector-link-list {
  display: grid;
  gap: 0.42rem;
}

.organize-inspector-link {
  appearance: none;
  border: 1px solid rgba(112, 128, 150, 0.14);
  border-radius: 10px;
  padding: 0.52rem 0.6rem;
  background: #ffffff;
  color: #263349;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 780;
  text-align: left;
}

@media (min-width: 861px) {
  body:has(.organize-workspace-shell:not([hidden])) .overview-card {
    margin-bottom: 0.55rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) {
    display: block !important;
    margin-top: 0.7rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .manage-tabs-card {
    opacity: 0.82;
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .organize-workspace-shell:not([hidden]) {
    grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr) !important;
  }

  .organize-inspector-card {
    grid-column: 1 / -1;
  }

  .organize-workspace-content {
    grid-template-columns: minmax(13rem, 0.65fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    display: grid !important;
    grid-template-areas: "brand utility" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 3.55rem !important;
    margin-bottom: 0.72rem !important;
    padding: 0.56rem 0.72rem !important;
    border-radius: 18px !important;
  }

  .app-header .brand-block {
    grid-area: brand !important;
  }

  .app-header .brand-block h1,
  .app-header.header-with-nav .brand-block h1,
  .app-header.compact-brand-header .brand-block h1 {
    margin: 0 !important;
    font-size: 1.16rem !important;
    line-height: 1 !important;
  }

  .app-header .brand-tagline,
  .app-header .brand-support {
    display: none !important;
  }

  .header-utility-bar {
    grid-area: utility !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.32rem !important;
    width: auto !important;
    min-width: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .header-utility-bar .app-build-line {
    display: inline-flex !important;
    margin: 0 !important;
  }

  .header-utility-bar .build-label {
    display: none !important;
  }

  .header-utility-bar #appVersionDisplay.build-chip,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status,
  .header-utility-bar #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    min-height: 1.72rem !important;
    max-height: 1.72rem !important;
    border-radius: 999px !important;
    padding: 0.28rem 0.48rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .header-utility-bar #pwaVersionLabel {
    display: none !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    color: inherit !important;
    opacity: 1 !important;
  }

  .header-utility-bar #backupHealthButton.backup-health-button {
    max-width: 4.4rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .organize-workspace-content {
    display: block !important;
  }

  .organize-goal-browser-panel {
    margin-bottom: 0.7rem;
  }

  .organize-relationship-map {
    min-height: 19rem;
  }

  .organize-map-node {
    width: min(11.5rem, 44%);
  }

  .organize-inspector-card {
    display: block !important;
  }
}

/* P10AN mobile recovery: keep Organize desktop workspace off phones for now. */
@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    display: grid !important;
    grid-template-areas: "brand utility" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 3.25rem !important;
    margin: 0 0 0.65rem !important;
    padding: 0.5rem 0.68rem !important;
    border-radius: 16px !important;
  }

  .app-header .brand-block,
  .app-header.header-with-nav .brand-block {
    grid-area: brand !important;
    min-width: 0 !important;
  }

  .app-header .brand-block h1,
  .app-header.header-with-nav .brand-block h1,
  .app-header.compact-brand-header .brand-block h1 {
    margin: 0 !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .app-header .brand-tagline,
  .app-header .brand-support {
    display: none !important;
  }

  .header-utility-bar {
    grid-area: utility !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.28rem !important;
    width: auto !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .header-utility-bar .app-build-line {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .header-utility-bar .build-label,
  .header-utility-bar #pwaVersionLabel {
    display: none !important;
  }

  .header-utility-bar #appVersionDisplay.build-chip,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status,
  .header-utility-bar #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 1.58rem !important;
    max-height: 1.58rem !important;
    border-radius: 999px !important;
    padding: 0.24rem 0.43rem !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    color: inherit !important;
    opacity: 1 !important;
  }

  .header-utility-bar #backupHealthButton.backup-health-button {
    max-width: 4.65rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-nav,
  .header-with-nav .app-nav {
    background: linear-gradient(180deg, #f8fbff, #edf5fb) !important;
    border: 1px solid rgba(49, 78, 105, 0.24) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(24, 35, 50, 0.22) !important;
    gap: 0.2rem !important;
    left: max(0.55rem, env(safe-area-inset-left, 0px)) !important;
    right: max(0.55rem, env(safe-area-inset-right, 0px)) !important;
    padding: 0.34rem 0.36rem calc(0.34rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-nav-button,
  .header-with-nav .app-nav-button {
    color: #243246 !important;
    flex: 1 1 0 !important;
    font-size: 0.82rem !important;
    font-weight: 830 !important;
    min-height: 2.34rem !important;
    text-align: center !important;
  }

  .app-nav-button.is-selected,
  .header-with-nav .app-nav-button.is-selected {
    background: #ffffff !important;
    border-color: rgba(23, 72, 198, 0.18) !important;
    box-shadow: 0 4px 12px rgba(23, 72, 198, 0.13) !important;
    color: #1748c6 !important;
  }

  .app-nav-button.setup-nav-button,
  .header-with-nav .app-nav-button.setup-nav-button {
    display: flex !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    min-width: 4.75rem !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    display: inline-flex !important;
    min-width: max-content !important;
  }

  .organize-workspace-shell,
  .organize-workspace-shell:not([hidden]),
  #organizeWorkspaceShell:not([hidden]) {
    display: none !important;
  }

  body:has(.overview-card:not([hidden])) .practice-composition-rail,
  body:has(.overview-card:not([hidden])) .rotation-planning-panel {
    display: none !important;
  }

  body:has(.overview-card:not([hidden])) .manage-tabs-card,
  body:has(.overview-card:not([hidden])) .manage-list-card {
    display: block !important;
  }

  body:has(.overview-card:not([hidden])) .overview-card {
    margin-bottom: 0.65rem !important;
  }
}

/* P10AQ targeted recovery/refinement: stable mobile status, desktop-only Organize polish. */
@media (max-width: 760px) {
  .app-nav-button.setup-nav-button,
  .header-with-nav .app-nav-button.setup-nav-button {
    display: flex !important;
  }

  .header-utility-bar .app-build-line,
  .header-utility-bar #appVersionDisplay.build-chip,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status,
  .header-utility-bar #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-utility-bar #appVersionDisplay.build-chip {
    min-width: 3.5rem !important;
    max-width: 4.6rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    min-width: 4.75rem !important;
    max-width: 6.2rem !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    display: inline-flex !important;
    min-width: max-content !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-utility-bar #pwaReloadButton[hidden] {
    display: none !important;
  }
}

@media (min-width: 761px) {
  .organize-map-node em {
    color: #536278;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 720;
    line-height: 1.22;
  }

  .organize-map-node.is-active {
    border-color: rgba(35, 132, 88, 0.22);
    box-shadow: 0 12px 24px rgba(35, 132, 88, 0.09);
  }

  .organize-map-node.is-inactive {
    border-style: dashed;
    opacity: 0.82;
  }

  .organize-map-node.is-archived {
    border-color: rgba(152, 88, 34, 0.24);
    background:
      linear-gradient(135deg, rgba(255, 247, 237, 0.94), rgba(250, 245, 238, 0.92));
    opacity: 0.78;
  }

  .organize-inspector-description {
    margin-top: 0.72rem;
    border: 1px solid rgba(112, 128, 150, 0.12);
    border-radius: 12px;
    padding: 0.72rem 0.78rem;
    background: rgba(248, 250, 252, 0.86);
    color: #4b5870;
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .organize-supporting-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .organize-supporting-group {
    border: 1px solid rgba(112, 128, 150, 0.14);
    border-radius: 16px;
    padding: 0.72rem;
    background: rgba(255, 255, 255, 0.78);
  }

  .organize-supporting-drill { background: rgba(237, 246, 255, 0.78); }
  .organize-supporting-song { background: rgba(239, 250, 243, 0.78); }
  .organize-supporting-solo { background: rgba(243, 239, 255, 0.78); }
  .organize-supporting-activity { background: rgba(255, 245, 232, 0.78); }

  .organize-supporting-group h4 {
    margin: 0 0 0.5rem;
    color: #172033;
    font-size: 0.78rem;
    font-weight: 880;
    letter-spacing: 0.02em;
  }

  .organize-supporting-list {
    display: grid;
    gap: 0.42rem;
  }

  .organize-supporting-item {
    appearance: none;
    display: grid;
    gap: 0.12rem;
    width: 100%;
    border: 1px solid rgba(112, 128, 150, 0.13);
    border-radius: 11px;
    padding: 0.5rem 0.58rem;
    background: rgba(255, 255, 255, 0.76);
    color: #1b2638;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .organize-supporting-item strong {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .organize-supporting-item span {
    color: #647187;
    font-size: 0.68rem;
    font-weight: 720;
  }

  .organize-supporting-item:hover,
  .organize-supporting-item.is-selected {
    border-color: rgba(74, 117, 173, 0.28);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 20px rgba(49, 72, 103, 0.08);
    transform: translateY(-1px);
  }

  .organize-map-center.is-selected,
  .organize-map-node.is-selected {
    outline: 2px solid rgba(74, 117, 173, 0.14);
    border-color: rgba(74, 117, 173, 0.34);
    box-shadow: 0 14px 28px rgba(49, 72, 103, 0.09);
  }

  .organize-map-center.is-selected {
    background: #24334a;
  }

  .organize-map-node.is-selected {
    transform: translateY(-2px);
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail {
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 251, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header h3 {
    font-size: 1rem;
    letter-spacing: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-pulse {
    border-radius: 14px !important;
  }

  .organize-inspector-card {
    position: sticky;
    top: 0.8rem;
  }
}

/* P10AP mobile status correction: keep build, update, and backup as separate visible badges. */
@media (max-width: 760px) {
  .header-utility-bar {
    gap: 0.24rem !important;
    max-width: min(15.8rem, 66vw) !important;
    overflow: visible !important;
  }

  .header-utility-bar .app-build-line {
    display: none !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .header-utility-bar #pwaVersionLabel,
  .header-utility-bar #pwaUpdateMessage,
  .header-utility-bar #backupHealthButton.backup-health-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.56rem !important;
    max-height: 1.56rem !important;
    border-radius: 999px !important;
    padding: 0.24rem 0.42rem !important;
    font-size: 0.66rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-utility-bar #pwaVersionLabel {
    min-width: 3.15rem !important;
    border: 1px solid rgba(191, 208, 228, 0.42) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f6fbff !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    min-width: 4.2rem !important;
    border: 1px solid rgba(93, 188, 134, 0.34) !important;
    background: rgba(70, 156, 108, 0.18) !important;
    color: #dff8e9 !important;
  }

  .header-utility-bar #backupHealthButton.backup-health-button {
    max-width: 4.85rem !important;
  }
}

/* P10AT desktop Organize tone pass: calmer typography and workspace hierarchy. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) {
    --zb-workspace-ink: #182235;
    --zb-workspace-muted: #667487;
    --zb-workspace-soft: #eef3f6;
  }

  body:has(.organize-workspace-shell:not([hidden])) .overview-card h2,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card h3 {
    color: var(--zb-workspace-ink);
    font-weight: 720 !important;
    letter-spacing: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .overview-card h2 {
    font-size: 1.55rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3 {
    font-size: 1.35rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card h3 {
    font-size: 1.04rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .eyebrow,
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-label {
    color: #7a8799;
    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.075em;
  }

  body:has(.organize-workspace-shell:not([hidden])) .section-note,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card p:not(.eyebrow) {
    color: var(--zb-workspace-muted);
    font-weight: 430;
    line-height: 1.5;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell {
    background:
      linear-gradient(135deg, rgba(248, 250, 251, 0.98), rgba(242, 246, 248, 0.94)),
      #f6f8fa;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-nav,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card {
    border-color: rgba(116, 130, 150, 0.16);
    box-shadow: 0 12px 26px rgba(29, 42, 60, 0.045);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item {
    color: #354157;
    font-size: 0.86rem;
    font-weight: 620;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item.is-selected {
    color: #14243a !important;
    font-weight: 720;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-supporting-item strong,
  body:has(.organize-workspace-shell:not([hidden])) .composition-section-title {
    font-weight: 700;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-supporting-item span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    color: #6a7789;
    font-weight: 620;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action,
  body:has(.organize-workspace-shell:not([hidden])) .secondary-button,
  body:has(.organize-workspace-shell:not([hidden])) .danger-button {
    font-weight: 720 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card {
    background:
      linear-gradient(135deg, rgba(255, 251, 242, 0.88), rgba(242, 248, 246, 0.92));
  }
}

/* P10BE workspace grammar pass: quieter type and structured goal relationships. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) {
    --zb-workspace-ink: #1b2739;
    --zb-workspace-muted: #6e7a8c;
    --zb-workspace-line: rgba(106, 122, 143, 0.14);
    --zb-workspace-accent: #426b9e;
  }

  body:has(.organize-workspace-shell:not([hidden])) .overview-card h2,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card h3 {
    font-weight: 650 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3 {
    font-size: 1.28rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3 {
    font-size: 0.98rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .eyebrow,
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-label,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-type,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node span {
    color: #7d8898;
    font-weight: 640 !important;
    letter-spacing: 0.065em;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item {
    font-weight: 560;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item.is-selected {
    color: #1d2d43 !important;
    font-weight: 650;
    box-shadow: inset 2px 0 0 var(--zb-workspace-accent), 0 8px 18px rgba(35, 53, 82, 0.055) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-supporting-item strong {
    font-weight: 650;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center {
    background: #243348;
    font-weight: 660;
    box-shadow: 0 12px 22px rgba(26, 38, 55, 0.12);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-summary {
    border-color: var(--zb-workspace-line);
    background: rgba(255, 255, 255, 0.68);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-summary strong {
    font-weight: 650;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map {
    border-color: var(--zb-workspace-line);
    background:
      linear-gradient(180deg, rgba(249, 251, 252, 0.98), rgba(244, 248, 250, 0.94));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map::before,
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map::after,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node::before {
    border-color: rgba(86, 102, 124, 0.14);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-inventory,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-group,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    border-color: var(--zb-workspace-line);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-preview-note.organize-operational-note {
    margin: -0.1rem 0 0.18rem;
    color: #667386;
    font-size: 0.78rem;
    font-weight: 430;
    line-height: 1.42;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action {
    background: #28364a;
    box-shadow: none;
    font-weight: 650 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item small,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row strong {
    font-weight: 540;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-cluster {
    cursor: default;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 20px rgba(26, 38, 55, 0.055);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-cluster:hover {
    transform: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-inventory {
    display: grid;
    gap: 0.72rem;
    border: 1px solid var(--zb-workspace-line);
    border-radius: 18px;
    padding: 0.78rem;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(246, 249, 251, 0.76));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header strong {
    display: block;
    color: #1b2739;
    font-size: 0.9rem;
    font-weight: 650;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header span {
    display: block;
    margin-top: 0.12rem;
    color: #6e7a8c;
    font-size: 0.78rem;
    line-height: 1.38;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-group {
    display: grid;
    gap: 0.44rem;
    border: 1px solid var(--zb-workspace-line);
    border-radius: 14px;
    padding: 0.62rem;
    background: rgba(255, 255, 255, 0.62);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-group h4 {
    margin: 0;
    color: #354157;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.02em;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-list {
    display: grid;
    gap: 0.36rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    border: 1px solid var(--zb-workspace-line);
    border-radius: 11px;
    padding: 0.28rem;
    background: rgba(255, 255, 255, 0.76);
    color: #1b2638;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item.is-selected {
    border-color: rgba(74, 117, 173, 0.24);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(49, 72, 103, 0.06);
    transform: translateY(-1px);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-select {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    border: 0;
    border-radius: 9px;
    padding: 0.25rem 0.32rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-select span {
    display: grid;
    min-width: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item strong {
    overflow: hidden;
    color: #1b2739;
    font-size: 0.78rem;
    font-weight: 620;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item em {
    overflow: hidden;
    color: #6e7a8c;
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item small {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
    background: rgba(238, 243, 246, 0.88);
    color: #6d7a8d;
    font-size: 0.64rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item.is-linked small {
    background: rgba(226, 241, 234, 0.9);
    color: #2f6f50;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-link-action,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters button {
    appearance: none;
    border: 1px solid rgba(106, 122, 143, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #40516a;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    min-height: 1.65rem;
    padding: 0.32rem 0.52rem;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-link-action:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters button:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters button.is-selected {
    border-color: rgba(74, 117, 173, 0.28);
    background: rgba(238, 244, 248, 0.92);
    color: #25364f;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.32rem;
    max-width: 30rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-empty {
    margin: 0;
    color: #748094;
    font-size: 0.78rem;
  }
}

/* P10BG selection reset: selected workspace cards stay readable and quiet. */
.guidance-choice-card.is-primary,
.guidance-choice-card.is-selected,
.guidance-choice-card[aria-selected="true"],
.guidance-choice-card[aria-pressed="true"] {
  border-color: rgba(74, 117, 173, 0.34) !important;
  background: linear-gradient(135deg, rgba(239, 246, 252, 0.96), rgba(248, 251, 252, 0.94)) !important;
  color: #1b2739 !important;
  box-shadow: 0 12px 24px rgba(49, 72, 103, 0.08) !important;
}

.guidance-choice-card.is-primary *,
.guidance-choice-card.is-selected *,
.guidance-choice-card[aria-selected="true"] *,
.guidance-choice-card[aria-pressed="true"] * {
  color: inherit !important;
}

@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item.is-selected {
    border-color: rgba(74, 117, 173, 0.3) !important;
    background: linear-gradient(135deg, rgba(240, 246, 250, 0.96), rgba(250, 252, 252, 0.94)) !important;
    color: #1b2739 !important;
    box-shadow: 0 10px 22px rgba(49, 72, 103, 0.075) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center.is-selected {
    background: #2b3a50 !important;
    color: #ffffff !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail {
    margin: 0 0 0.75rem !important;
    border-color: var(--zb-workspace-line, rgba(106, 122, 143, 0.14)) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 10px 22px rgba(29, 42, 60, 0.045) !important;
    padding: 0.72rem 0.82rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-sections,
  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-totals,
  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header .section-note {
    display: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header {
    margin-bottom: 0.4rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header h3 {
    color: #26364d;
    font-size: 0.92rem !important;
    font-weight: 650 !important;
  }
}

/* P10BI Goals cleanup: bounded browsing and integrated planning context. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .manage-tabs-card,
  body:has(.organize-workspace-shell:not([hidden])) .manage-list-card,
  body:has(.organize-workspace-shell:not([hidden])) .record-list,
  body:has(.organize-workspace-shell:not([hidden])) #emptyState {
    display: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    align-self: start;
    max-height: min(43rem, calc(100vh - 10.5rem));
    overflow: hidden;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    max-height: min(38.5rem, calc(100vh - 14.5rem));
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.18rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-summary {
    display: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map {
    max-height: min(44rem, calc(100vh - 13rem));
    min-height: 25rem;
    margin-top: 0.15rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map .organize-map-center,
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map .organize-map-node {
    max-width: calc(100% - 2rem);
    overflow-wrap: anywhere;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center {
    border-color: rgba(86, 119, 151, 0.28);
    background:
      linear-gradient(135deg, rgba(39, 56, 78, 0.98), rgba(52, 72, 95, 0.96));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-drill {
    background: linear-gradient(135deg, rgba(238, 247, 255, 0.94), rgba(247, 251, 255, 0.9));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-song {
    background: linear-gradient(135deg, rgba(239, 250, 243, 0.94), rgba(248, 252, 249, 0.9));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-solo {
    background: linear-gradient(135deg, rgba(245, 241, 255, 0.94), rgba(250, 249, 255, 0.9));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-activity {
    background: linear-gradient(135deg, rgba(255, 247, 235, 0.95), rgba(255, 252, 247, 0.9));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-inventory {
    max-height: min(42rem, calc(100vh - 11rem));
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.66rem;
    scroll-padding-top: 8.75rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: 0 0 0.1rem;
    padding: 0 0 0.62rem;
    border-bottom: 1px solid rgba(106, 122, 143, 0.1);
    background: #fbfcfd;
    box-shadow: 0 8px 14px rgba(29, 42, 60, 0.045);
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) {
    display: grid !important;
    grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-rail-header {
    margin-bottom: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) .composition-pulse {
    display: flex !important;
    min-height: 2.1rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-pulse {
    display: flex !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded {
    padding: 0.85rem 0.9rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-sections {
    max-height: 16rem;
    overflow-y: auto;
  }
}

/* P10BJ Goals workspace polish: preserve browsing scale and soften visual weight. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) {
    --zb-workspace-ink: #243148;
    --zb-workspace-soft-ink: #35445b;
    --zb-workspace-muted: #758195;
    --zb-workspace-accent: #4f6f95;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    max-height: min(48rem, calc(100vh - 8.75rem));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    max-height: min(43.25rem, calc(100vh - 12rem));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3 {
    color: var(--zb-workspace-ink);
    font-weight: 600 !important;
    letter-spacing: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card p:not(.eyebrow) {
    color: var(--zb-workspace-muted);
    font-weight: 400;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row strong {
    color: var(--zb-workspace-soft-ink);
    font-weight: 600 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    color: var(--zb-workspace-muted) !important;
    font-weight: 500 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center.is-selected {
    border-color: rgba(79, 111, 149, 0.28) !important;
    background:
      linear-gradient(135deg, rgba(246, 249, 251, 0.98), rgba(236, 242, 246, 0.96)) !important;
    color: #28364d !important;
    font-weight: 620 !important;
    box-shadow: 0 12px 22px rgba(29, 42, 60, 0.08) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action {
    border: 1px solid rgba(55, 74, 101, 0.2);
    background:
      linear-gradient(135deg, rgba(55, 74, 101, 0.96), rgba(72, 92, 120, 0.94)) !important;
    color: rgba(255, 255, 255, 0.94);
    font-weight: 620 !important;
    box-shadow: 0 8px 18px rgba(31, 45, 64, 0.08);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action:hover {
    background:
      linear-gradient(135deg, rgba(66, 89, 119, 0.96), rgba(82, 105, 133, 0.94)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item.is-selected {
    border-color: rgba(79, 111, 149, 0.32) !important;
    background:
      linear-gradient(135deg, rgba(242, 247, 250, 0.98), rgba(251, 252, 252, 0.96)) !important;
    color: #26364d !important;
    box-shadow: 0 10px 20px rgba(49, 72, 103, 0.065) !important;
  }
}

/* P10BK final Goals polish: contextual tools, warmer rhythm, and planning snapshot clarity. */
.current-item-notes-box.is-context-empty,
.current-item-reminder-box.is-context-empty,
.quick-record-panel.is-context-empty {
  opacity: 0.86;
}

.current-item-notes-box.is-context-empty textarea,
.current-item-reminder-box.is-context-empty textarea {
  background: rgba(255, 255, 255, 0.56) !important;
  color: #7a8493;
  cursor: not-allowed;
}

.current-item-notes-box.is-context-empty .current-item-notes-header span {
  color: #7a6f61;
}

.current-item-reminder-box.is-context-empty summary,
.quick-record-panel.is-context-empty summary {
  cursor: default;
}

.quick-record-panel.is-context-empty {
  background:
    linear-gradient(180deg, rgba(179, 188, 198, 0.72), rgba(145, 158, 174, 0.7)) !important;
  border-color: rgba(235, 242, 249, 0.36) !important;
  color: #f7fafc;
}

.quick-record-panel.is-context-empty .quick-record-body button,
.quick-record-panel.is-context-empty .quick-record-label-field input {
  opacity: 0.72;
}

@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) {
    --zb-workspace-warm: rgba(251, 246, 235, 0.88);
    --zb-workspace-cool: rgba(239, 246, 250, 0.9);
    --zb-workspace-green: rgba(239, 249, 243, 0.9);
    --zb-workspace-lavender: rgba(246, 242, 253, 0.9);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    max-height: min(52rem, calc(100vh - 7.5rem));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 251, 0.86));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    max-height: min(47rem, calc(100vh - 10.5rem));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 251, 0.88));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected {
    background:
      linear-gradient(135deg, rgba(244, 249, 251, 0.98), rgba(255, 251, 241, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map {
    background:
      radial-gradient(circle at 50% 8%, rgba(225, 235, 241, 0.7), transparent 18rem),
      linear-gradient(180deg, rgba(250, 252, 252, 0.98), rgba(243, 248, 248, 0.94));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center.is-selected {
    background:
      linear-gradient(135deg, rgba(255, 252, 244, 0.98), rgba(235, 244, 246, 0.96)) !important;
    color: #334154 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-drill,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-drill {
    background:
      linear-gradient(135deg, rgba(236, 246, 253, 0.94), rgba(249, 252, 254, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-song,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-song {
    background:
      linear-gradient(135deg, rgba(239, 250, 243, 0.94), rgba(250, 253, 250, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-solo,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-solo {
    background:
      linear-gradient(135deg, rgba(246, 242, 253, 0.94), rgba(252, 250, 255, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-activity,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-activity {
    background:
      linear-gradient(135deg, rgba(255, 248, 235, 0.95), rgba(255, 253, 248, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action {
    background:
      linear-gradient(135deg, rgba(70, 88, 113, 0.94), rgba(88, 108, 133, 0.92)) !important;
    border-color: rgba(70, 88, 113, 0.18);
    box-shadow: 0 8px 16px rgba(31, 45, 64, 0.065);
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail {
    border-color: rgba(120, 132, 151, 0.13) !important;
    background:
      linear-gradient(135deg, rgba(255, 252, 244, 0.84), rgba(240, 248, 246, 0.82)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) {
    grid-template-columns: minmax(10rem, auto) minmax(0, 1fr);
    min-height: 3.2rem;
    padding: 0.58rem 0.72rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header h3 {
    color: #344256;
    font-weight: 590 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse {
    border-color: rgba(98, 117, 140, 0.14) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 247, 246, 0.78)) !important;
    color: #334154 !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-segment,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-total,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-hint {
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded {
    padding: 0.78rem 0.86rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-sections {
    margin-top: 0.65rem;
  }
}

/* P10BL Goals containment: scalable relationship map, clean inventory scroll, semantic inspector. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    max-height: min(56rem, calc(100vh - 6.5rem));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    max-height: min(51rem, calc(100vh - 9rem));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map {
    height: clamp(25rem, 42vh, 31rem);
    max-height: clamp(25rem, 42vh, 31rem);
    min-height: 25rem;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 0.8rem;
    scroll-padding: 1rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map[data-node-count="5"],
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map[data-node-count="6"] {
    min-height: 28rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map[data-node-count="7"],
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map[data-node-count="8"] {
    min-height: 31rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-map[data-map-mode="cluster"] {
    min-height: 25rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-map-empty {
    z-index: 1;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-inventory {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(46rem, calc(100vh - 9rem));
    overflow: hidden !important;
    padding: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header {
    position: relative !important;
    z-index: 4;
    margin: 0 !important;
    border-bottom: 1px solid rgba(106, 122, 143, 0.13);
    border-radius: 18px 18px 0 0;
    background:
      linear-gradient(180deg, rgba(251, 252, 253, 0.98), rgba(244, 248, 250, 0.98)) !important;
    box-shadow: 0 8px 16px rgba(29, 42, 60, 0.045);
    padding: 0.78rem 0.82rem 0.7rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-scroll {
    display: grid;
    gap: 0.72rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.78rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 250, 0.86)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats {
    gap: 0.45rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats .organize-stat {
    border: 1px solid rgba(110, 128, 148, 0.13);
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(245, 249, 251, 0.9), rgba(255, 252, 244, 0.72));
    padding: 0.52rem 0.58rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    border: 1px solid rgba(110, 128, 148, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    padding: 0.58rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    background:
      linear-gradient(135deg, rgba(245, 249, 252, 0.76), rgba(250, 246, 255, 0.52));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    border-top-color: rgba(110, 128, 148, 0.1);
    padding: 0.46rem 0.1rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row:first-child {
    border-top: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-description {
    border: 1px solid rgba(132, 105, 67, 0.12);
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(255, 252, 244, 0.72), rgba(247, 250, 250, 0.64));
    color: #596579;
    font-weight: 420;
    line-height: 1.45;
    padding: 0.62rem 0.68rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-link {
    border-color: rgba(110, 128, 148, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: #40516a;
    font-weight: 560;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-linked-drill {
    background: rgba(235, 245, 252, 0.9);
    color: #31597c;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-linked-song {
    background: rgba(237, 248, 242, 0.9);
    color: #36664a;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-linked-solo {
    background: rgba(244, 239, 253, 0.9);
    color: #604982;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-linked-activity {
    background: rgba(255, 246, 232, 0.92);
    color: #7a5730;
  }
}

/* P10BN left goal browser correction: make the goal list the tall browsing surface. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: clamp(38rem, calc(100vh - 8rem), 52rem);
    max-height: clamp(38rem, calc(100vh - 8rem), 52rem);
    min-height: 38rem;
    overflow: hidden;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    align-content: start;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.22rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}

/* P10BO Practice Pool polish: goal browser containment and calmer working-set language. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    gap: 0.68rem;
    padding-bottom: 0.4rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card {
    align-content: start;
    grid-template-rows: auto auto auto;
    min-height: 6.85rem;
    padding: 0.82rem 0.84rem;
    overflow: hidden;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title {
    display: block;
    color: #263246;
    font-size: 0.9rem;
    font-weight: 680;
    line-height: 1.27;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description {
    display: -webkit-box;
    margin-top: 0.02rem;
    color: #657186;
    font-size: 0.78rem;
    line-height: 1.36;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta {
    display: block;
    margin-top: 0.08rem;
    color: #55708e;
    font-size: 0.71rem;
    font-weight: 620;
    line-height: 1.24;
    overflow-wrap: anywhere;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected {
    border-color: rgba(70, 113, 154, 0.32);
    background:
      linear-gradient(135deg, rgba(239, 247, 250, 0.98), rgba(255, 251, 242, 0.78));
    box-shadow: 0 10px 22px rgba(36, 56, 80, 0.075);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header strong {
    color: #2b374a;
    font-weight: 660;
    letter-spacing: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header span {
    color: #66758a;
    line-height: 1.35;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters button.is-selected {
    border-color: rgba(67, 112, 148, 0.28);
    background: rgba(232, 242, 247, 0.92);
    color: #2f526d;
    box-shadow: 0 4px 10px rgba(38, 60, 82, 0.055);
  }
}

/* P10BQ goal-card containment: restore normal vertical flow for wrapped content. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.88rem 0.86rem !important;
    overflow: visible !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title {
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    color: #263246 !important;
    font-size: 0.9rem !important;
    font-weight: 640 !important;
    line-height: 1.31 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description {
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    color: #657186 !important;
    font-size: 0.78rem !important;
    line-height: 1.34 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta {
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    color: #55708e !important;
    font-size: 0.71rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
}

/* P10BQ normal-flow goal cards and calmer rotation snapshot text. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta {
    display: block !important;
    flex: 0 0 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    -webkit-line-clamp: unset !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse {
    gap: 0.5rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 0.58rem 0.68rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-segment {
    font-size: 0.74rem !important;
    font-weight: 620 !important;
    min-width: 0 !important;
    padding: 0.24rem 0.48rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-total {
    color: #3a6854 !important;
    font-size: 0.78rem !important;
    font-weight: 640 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-hint,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-empty {
    color: #66758a !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
  }
}

/* P10BR emergency goal-list reset: plain stacked cards, no overlapping layout tricks. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list {
    align-content: normal !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.72rem !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 0.22rem 0.4rem 0 !important;
    position: relative !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card {
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.86rem !important;
    position: relative !important;
    overflow: visible !important;
    transform: none !important;
    border: 1px solid rgba(112, 128, 150, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(248, 250, 252, 0.94) !important;
    color: #263246 !important;
    text-align: left !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected {
    border-color: rgba(70, 113, 154, 0.34) !important;
    background: linear-gradient(135deg, rgba(239, 247, 250, 0.98), rgba(255, 251, 242, 0.78)) !important;
    box-shadow: 0 10px 22px rgba(36, 56, 80, 0.075) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta {
    box-sizing: border-box !important;
    clear: both !important;
    display: block !important;
    float: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title {
    color: #263246 !important;
    font-size: 0.91rem !important;
    font-weight: 640 !important;
    line-height: 1.28 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description {
    color: #657186 !important;
    font-size: 0.78rem !important;
    line-height: 1.36 !important;
    margin-top: 0.42rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta {
    color: #55708e !important;
    font-size: 0.71rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-top: 0.46rem !important;
  }
}

/* P10BS Organize chrome compression, explicit snapshot controls, and warmer workspace tones. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .overview-card {
    display: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail {
    border-color: rgba(159, 128, 82, 0.18) !important;
    background:
      linear-gradient(135deg, rgba(255, 250, 239, 0.92), rgba(239, 248, 244, 0.88)) !important;
    box-shadow: 0 10px 24px rgba(71, 58, 42, 0.055) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail:not(.is-pulse-expanded) {
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) !important;
    min-height: 2.85rem !important;
    padding: 0.48rem 0.64rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded {
    padding: 0.68rem 0.76rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header {
    gap: 0.36rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header h3 {
    color: #3d4757 !important;
    font-size: 0.88rem !important;
    font-weight: 620 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-rail-header .section-note {
    color: #6d776f !important;
    display: block !important;
    font-size: 0.76rem !important;
    line-height: 1.32 !important;
    margin-top: 0.12rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse {
    align-items: center !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 241, 229, 0.78)) !important;
    border-color: rgba(145, 113, 70, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    color: #354255 !important;
    display: grid !important;
    gap: 0.44rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    min-height: 2.7rem !important;
    padding: 0.5rem 0.58rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-pulse {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-segments {
    gap: 0.32rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-segment {
    border-color: rgba(70, 88, 110, 0.1) !important;
    color: #40516a !important;
    font-weight: 620 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-daily,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-d {
    background: rgba(231, 242, 252, 0.95) !important;
    color: #31597c !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-pool,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-p {
    background: rgba(232, 246, 243, 0.95) !important;
    color: #34695f !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-songs,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-s {
    background: rgba(235, 247, 239, 0.95) !important;
    color: #39694b !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-solos,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-so {
    background: rgba(244, 239, 253, 0.96) !important;
    color: #604982 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-activities,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-a {
    background: rgba(255, 243, 225, 0.96) !important;
    color: #785833 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-total {
    background: rgba(248, 252, 248, 0.94) !important;
    border-color: rgba(65, 112, 88, 0.16) !important;
    color: #3a6854 !important;
    font-weight: 650 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-hint {
    color: #6d776f !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    grid-column: 1 / 2 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-action {
    align-self: center;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(92, 111, 132, 0.16);
    border-radius: 999px;
    color: #40516a;
    font-size: 0.74rem;
    font-weight: 650;
    grid-column: 3;
    grid-row: 1 / span 2;
    padding: 0.28rem 0.52rem;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-sections {
    gap: 0.6rem !important;
    margin-top: 0.62rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail.is-pulse-expanded .composition-section {
    border-color: rgba(132, 108, 71, 0.14) !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell {
    background:
      linear-gradient(135deg, rgba(255, 252, 244, 0.64), rgba(244, 250, 249, 0.86)) !important;
    border-color: rgba(139, 118, 85, 0.14) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-nav,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card {
    border-color: rgba(132, 116, 88, 0.13) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(249, 245, 236, 0.58)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 248, 0.82)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-inventory {
    border-color: rgba(135, 105, 65, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(246, 250, 249, 0.9)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-header {
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(241, 249, 246, 0.96)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 249, 238, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    background:
      linear-gradient(135deg, rgba(239, 248, 247, 0.78), rgba(255, 246, 231, 0.58)) !important;
  }
}

/* P10BT Drills operational workspace: Practice Pool cards, filters, and inspector rhythm. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-content:has(.organize-goal-browser-panel[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-content:has(.organize-goal-browser-panel[hidden]) .organize-context-card {
    min-width: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-preview-summary.organize-item-workspace-summary {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0.74rem 0 0.76rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-drill-workspace,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace {
    margin-top: 0.62rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-drill-workspace) .organize-item-filter-bar,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-activity-workspace) .organize-item-filter-bar {
    margin: 0.3rem 0 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-song-workspace) .organize-item-filter-bar,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-solo-workspace) .organize-item-filter-bar {
    margin: 0.54rem 0 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings {
    border: 1px solid rgba(135, 105, 65, 0.15) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(135deg, rgba(255, 250, 239, 0.9), rgba(239, 248, 246, 0.82)) !important;
    box-shadow: 0 8px 18px rgba(71, 58, 42, 0.045) !important;
    display: grid !important;
    gap: 0.46rem 0.7rem !important;
    grid-template-columns: minmax(13rem, 1fr) auto !important;
    margin: 0.46rem 0 0.52rem !important;
    padding: 0.52rem 0.62rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings .section-header {
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings h3 {
    color: #374458 !important;
    font-size: 0.82rem !important;
    font-weight: 640 !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings .section-note {
    color: #6d776f !important;
    font-size: 0.7rem !important;
    line-height: 1.18 !important;
    margin: 0.1rem 0 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings .compact-rotation-fields {
    align-items: end !important;
    display: grid !important;
    gap: 0.44rem !important;
    grid-template-columns: 6.2rem minmax(9rem, 12rem) !important;
    margin: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings .field {
    margin: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings label {
    color: #617087 !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.18rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings input,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings select {
    min-height: 1.86rem !important;
    border-color: rgba(95, 113, 135, 0.16) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #344154 !important;
    font-size: 0.78rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings #rotationItemsPerSession {
    max-width: 4.6rem !important;
    min-width: 4.2rem !important;
    text-align: center !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-controls {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    margin: 0.38rem 0 0.74rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-controls .organize-item-filter-bar {
    flex: 1 1 auto;
    margin: 0 !important;
    min-width: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar button {
    appearance: none;
    border: 1px solid rgba(95, 113, 135, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #536177;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 590;
    padding: 0.34rem 0.56rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar button span {
    color: #7a8797;
    font-size: 0.7rem;
    margin-left: 0.18rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar button.is-selected {
    border-color: rgba(65, 104, 134, 0.28);
    background: rgba(232, 242, 247, 0.92);
    color: #315970;
    box-shadow: 0 4px 10px rgba(38, 60, 82, 0.055);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle {
    align-items: center;
    border: 1px solid rgba(95, 113, 135, 0.13);
    border-radius: 999px;
    background: rgba(247, 250, 249, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.18rem;
    padding: 0.2rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #667386;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 590;
    line-height: 1;
    padding: 0.34rem 0.48rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle button.is-selected {
    background: rgba(255, 255, 255, 0.92);
    color: #324154;
    box-shadow: 0 4px 10px rgba(40, 56, 77, 0.08);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-placeholder {
    border: 1px solid rgba(95, 113, 135, 0.14);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(248, 251, 250, 0.95), rgba(245, 239, 229, 0.72));
    box-shadow: 0 10px 24px rgba(40, 56, 77, 0.055);
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-placeholder > span {
    color: #7a6b56;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.065em;
    text-transform: uppercase;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-placeholder strong {
    color: #2f3b4d;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.22;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-placeholder p {
    color: #657186;
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 0;
    max-width: 46rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-preview em {
    border: 1px solid rgba(135, 105, 65, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #665947;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 580;
    padding: 0.28rem 0.48rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    max-height: min(46rem, calc(100vh - 13rem));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.12rem 0.22rem 0.4rem 0;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view {
    gap: 0.42rem;
    grid-template-columns: 1fr;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card {
    align-content: start;
    border-color: rgba(113, 130, 148, 0.14);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 250, 249, 0.82));
    box-shadow: 0 8px 18px rgba(40, 56, 77, 0.045);
    display: grid;
    gap: 0.42rem;
    min-height: 11.2rem;
    overflow: hidden;
    padding: 0.86rem;
    transform: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-row {
    display: grid;
    min-width: 0;
    position: relative;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-row > .organize-item-workspace-card {
    width: 100%;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-quick-archive-button {
    align-self: start;
    background: rgba(238, 248, 250, 0.9);
    border-color: rgba(20, 184, 166, 0.24);
    border-radius: 999px;
    color: #17665f;
    font-size: 0.72rem;
    font-weight: 720;
    min-height: 1.9rem;
    padding: 0.34rem 0.62rem;
    position: absolute;
    right: 0.62rem;
    top: 0.62rem;
    z-index: 2;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-quick-archive-button:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-quick-archive-button:focus-visible {
    background: rgba(204, 251, 241, 0.96);
    border-color: rgba(20, 184, 166, 0.42);
    color: #0f4c47;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    align-items: center;
    display: grid;
    gap: 0.14rem 0.56rem;
    grid-template-areas:
      "name description tags"
      "meta description tags";
    grid-template-columns: minmax(11rem, 1fr) minmax(11rem, 1fr) minmax(14rem, 1.25fr);
    min-height: 0;
    padding: 0.48rem 0.64rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-row {
    min-width: 42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-quick-archive-button {
    right: 0.78rem;
    top: 50%;
    transform: translateY(-50%);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card.is-selected {
    border-color: rgba(67, 112, 148, 0.32) !important;
    background:
      linear-gradient(135deg, rgba(238, 248, 250, 0.98), rgba(255, 250, 238, 0.86)) !important;
    box-shadow: 0 12px 24px rgba(36, 56, 80, 0.075) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card.is-archived {
    opacity: 0.72;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-type {
    color: #778392;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.055em;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-type {
    grid-area: meta;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card strong {
    color: #263246;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.24;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card strong {
    grid-area: name;
    font-size: 0.88rem;
    font-weight: 620;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-description {
    color: #657186;
    font-size: 0.8rem;
    line-height: 1.38;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-description {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    font-size: 0.76rem;
    grid-area: description;
    overflow: hidden;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.1rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-tags {
    flex-wrap: nowrap;
    grid-area: tags;
    justify-content: flex-end;
    margin-top: 0;
    min-width: 0;
    overflow: hidden;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-tags em {
    border: 1px solid rgba(95, 113, 135, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #5e6d80;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 560;
    line-height: 1.1;
    padding: 0.24rem 0.42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-tags em {
    font-size: 0.66rem;
    max-width: 10rem;
    overflow: hidden;
    padding: 0.2rem 0.34rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view {
    border: 1px solid rgba(112, 128, 150, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    gap: 0;
    overflow-x: auto;
    padding: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1rem minmax(17rem, 3.2fr) minmax(5.5rem, 0.75fr) minmax(7.5rem, 0.9fr) minmax(8.5rem, 1fr) 1.2rem;
    grid-template-areas: none;
    min-width: 42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header {
    align-items: center;
    border-bottom: 1px solid rgba(112, 128, 150, 0.16);
    background: rgba(248, 250, 251, 0.98);
    color: #63718a;
    font-size: 0.66rem;
    font-weight: 680;
    letter-spacing: 0.075em;
    padding: 0.62rem 0.78rem;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(112, 128, 150, 0.12);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: none;
    color: #243149;
    gap: 0.35rem;
    min-height: 2.85rem;
    padding: 0.46rem 0.78rem;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card:hover {
    background: rgba(248, 252, 252, 0.96);
    box-shadow: inset 3px 0 0 rgba(91, 122, 146, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-selected {
    border-color: rgba(112, 128, 150, 0.12) !important;
    background: rgba(240, 247, 250, 0.96) !important;
    box-shadow: inset 3px 0 0 rgba(74, 119, 153, 0.42) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name strong {
    color: #223047;
    font-size: 0.9rem;
    font-weight: 650;
    grid-area: auto !important;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name small {
    display: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-rotation {
    color: #40506a;
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-goals {
    color: #5d7188;
    font-weight: 560;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-rotation {
    color: #607086;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card {
    display: flex;
    flex-direction: column;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-actions {
    margin-top: 0.62rem !important;
    order: 3;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats {
    order: 4;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-meta {
    order: 5;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    order: 6;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-actions .organize-primary-action {
    width: 100%;
    min-height: 2.15rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3 {
    color: #233048;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3 {
    font-weight: 610 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3 {
    font-weight: 650 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-drill-card .organize-item-workspace-tags em:nth-child(2) {
    background: rgba(232, 246, 243, 0.86);
    color: #34695f;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-drill-card .organize-item-workspace-tags em:nth-child(4) {
    background: rgba(231, 242, 252, 0.88);
    color: #31597c;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-link.organize-linked-goal {
    background: rgba(239, 248, 247, 0.88);
    color: #34695f;
  }
}

/* P10CD Organize-wide typography and visual-weight refinement. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) {
    --zb-org-ink: #273348;
    --zb-org-heading: #202d42;
    --zb-org-muted: #68758a;
    --zb-org-subtle: #8490a1;
    --zb-org-line: rgba(108, 124, 145, 0.13);
    --zb-org-line-strong: rgba(108, 124, 145, 0.19);
    --zb-org-surface: rgba(255, 255, 255, 0.84);
    --zb-org-surface-warm: rgba(250, 248, 243, 0.76);
    --zb-org-surface-cool: rgba(244, 249, 250, 0.82);
    --zb-org-focus: rgba(76, 113, 142, 0.18);
    color: var(--zb-org-ink);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell,
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-nav,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card {
    border-color: var(--zb-org-line) !important;
    box-shadow: 0 14px 30px rgba(35, 49, 68, 0.045) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-browser-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(249, 248, 244, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .overview-card h2 {
    color: var(--zb-org-heading) !important;
    font-weight: 590 !important;
    letter-spacing: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card h3 {
    font-size: clamp(1.26rem, 1.55vw, 1.55rem) !important;
    line-height: 1.08 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header h3,
  body:has(.organize-workspace-shell:not([hidden])) .organize-getting-started-card h3 {
    font-size: 1.02rem !important;
    line-height: 1.16 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .eyebrow,
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-label,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-type,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-placeholder > span {
    color: var(--zb-org-subtle) !important;
    font-size: 0.65rem !important;
    font-weight: 590 !important;
    letter-spacing: 0.07em !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .section-note,
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-panel-header p:not(.eyebrow),
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-description,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-description,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-supporting-item span {
    color: var(--zb-org-muted) !important;
    font-weight: 400 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item {
    color: #40506a !important;
    font-weight: 520 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item.is-selected {
    border-color: rgba(87, 116, 145, 0.18) !important;
    background: rgba(245, 250, 251, 0.92) !important;
    color: #243348 !important;
    box-shadow: inset 2px 0 0 rgba(72, 109, 138, 0.34), 0 7px 16px rgba(42, 58, 76, 0.045) !important;
    font-weight: 580 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-primary-action,
  body:has(.organize-workspace-shell:not([hidden])) .primary-button {
    border: 1px solid rgba(48, 68, 92, 0.16) !important;
    background: linear-gradient(180deg, #42556f, #344861) !important;
    box-shadow: 0 8px 16px rgba(32, 48, 70, 0.095) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .secondary-button,
  body:has(.organize-workspace-shell:not([hidden])) .filter-button,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar button,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-action {
    border-color: var(--zb-org-line-strong) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    color: #526178 !important;
    font-weight: 520 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .filter-button.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-filter-bar button.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inventory-filters button.is-selected {
    border-color: rgba(72, 111, 140, 0.24) !important;
    background: rgba(239, 247, 249, 0.92) !important;
    color: #31586d !important;
    box-shadow: 0 5px 12px rgba(38, 58, 78, 0.045) !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings {
    border-color: var(--zb-org-line) !important;
    box-shadow: 0 7px 16px rgba(42, 58, 76, 0.035) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle button {
    color: #657286 !important;
    font-weight: 520 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-view-toggle button.is-selected {
    color: #2f4056 !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node,
  body:has(.organize-workspace-shell:not([hidden])) .organize-operational-item,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-link {
    border-color: var(--zb-org-line) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-title,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-supporting-item strong {
    color: var(--zb-org-heading) !important;
    font-weight: 570 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-rotation,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-tags em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row,
  body:has(.organize-workspace-shell:not([hidden])) .organize-stat,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-segment,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-total,
  body:has(.organize-workspace-shell:not([hidden])) .composition-pulse-hint {
    color: var(--zb-org-muted) !important;
    font-weight: 430 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header {
    background: rgba(249, 250, 249, 0.98) !important;
    border-bottom-color: var(--zb-org-line) !important;
    color: var(--zb-org-subtle) !important;
    font-weight: 580 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view {
    border-color: var(--zb-org-line) !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    border-bottom-color: rgba(108, 124, 145, 0.105) !important;
    background: rgba(255, 255, 255, 0.62) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card:hover {
    background: rgba(247, 251, 250, 0.95) !important;
    box-shadow: inset 3px 0 0 rgba(89, 124, 143, 0.22) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-goal-list-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-center.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-map-node.is-selected {
    border-color: rgba(76, 113, 142, 0.28) !important;
    background: linear-gradient(135deg, rgba(240, 248, 249, 0.96), rgba(253, 248, 239, 0.82)) !important;
    box-shadow: inset 3px 0 0 rgba(76, 113, 142, 0.34), 0 8px 18px rgba(35, 52, 73, 0.055) !important;
    color: var(--zb-org-heading) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-description {
    background: rgba(248, 250, 249, 0.66) !important;
    border-color: var(--zb-org-line) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    background: rgba(255, 255, 255, 0.48) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links > strong {
    color: #536178 !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-link {
    background: rgba(255, 255, 255, 0.62) !important;
    color: #40506a !important;
    font-weight: 500 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings h3 {
    color: var(--zb-org-heading) !important;
    font-weight: 570 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings label {
    color: var(--zb-org-subtle) !important;
    font-weight: 560 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings input,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inline-rotation-settings select {
    border-color: var(--zb-org-line-strong) !important;
    color: #3f4d62 !important;
    font-weight: 460 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .practice-composition-rail .composition-rail-header h3 {
    color: var(--zb-org-heading) !important;
    font-weight: 570 !important;
  }
}

/* P10CF Goals support lanes and Schedules workspace foundation. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lanes {
    border: 1px solid rgba(108, 124, 145, 0.13);
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(250, 248, 243, 0.78), rgba(245, 250, 250, 0.86));
    box-shadow: 0 10px 22px rgba(35, 49, 68, 0.04);
    display: grid;
    gap: 0.66rem;
    margin-top: 0.72rem;
    padding: 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor {
    appearance: none;
    border: 1px solid rgba(105, 91, 68, 0.14);
    border-radius: 14px;
    background: rgba(255, 253, 247, 0.78);
    color: #273348;
    cursor: pointer;
    display: grid;
    gap: 0.16rem;
    padding: 0.64rem 0.72rem;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-header span {
    color: #7b8797;
    font-size: 0.66rem;
    font-weight: 590;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor strong {
    color: #202d42;
    font-size: 1rem;
    font-weight: 590;
    line-height: 1.18;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor em {
    color: #68758a;
    font-size: 0.76rem;
    font-style: normal;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lane {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.52rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-drill {
    background: rgba(241, 247, 251, 0.72);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-song {
    background: rgba(242, 250, 245, 0.7);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-solo {
    background: rgba(247, 243, 252, 0.68);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-activity {
    background: rgba(255, 248, 238, 0.72);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-header em {
    border: 1px solid rgba(108, 124, 145, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #5f6d80;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 560;
    min-width: 1.6rem;
    padding: 0.14rem 0.38rem;
    text-align: center;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-items {
    display: grid;
    gap: 0.3rem;
    max-height: 10.6rem;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item {
    align-items: center;
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #273348;
    cursor: pointer;
    display: grid;
    gap: 0.12rem;
    padding: 0.42rem 0.5rem;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item strong {
    color: #202d42;
    font-size: 0.8rem;
    font-weight: 560;
    line-height: 1.16;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-empty {
    color: #6b7789;
    font-size: 0.7rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-empty {
    margin: 0;
    padding: 0.34rem 0.12rem 0.2rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor.is-selected {
    border-color: rgba(76, 113, 142, 0.25);
    background: rgba(248, 252, 252, 0.94);
    box-shadow: inset 3px 0 0 rgba(76, 113, 142, 0.3);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-workspace {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(10rem, 0.24fr) minmax(0, 1fr);
    margin-top: 0.72rem;
  }

  body:has(.organize-schedules-workspace) .organize-workspace-shell:not([hidden]) {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
  }

  body:has(.organize-schedules-workspace) .organize-inspector-card {
    display: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-selector,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-surface {
    border: 1px solid rgba(108, 124, 145, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 22px rgba(35, 49, 68, 0.04);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-selector {
    align-self: start;
    display: grid;
    gap: 0.46rem;
    padding: 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
    color: #273348;
    cursor: pointer;
    display: grid;
    gap: 0.18rem;
    padding: 0.54rem;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card strong {
    color: #202d42;
    font-size: 0.78rem;
    font-weight: 570;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card span {
    color: #6b7789;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card.is-selected {
    border-color: rgba(76, 113, 142, 0.25);
    background: rgba(241, 249, 250, 0.9);
    box-shadow: inset 3px 0 0 rgba(76, 113, 142, 0.28);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card.is-practice-source {
    border-color: rgba(30, 132, 118, 0.28);
    background: linear-gradient(135deg, rgba(240, 250, 247, 0.94), rgba(255, 255, 255, 0.74));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-active-badge {
    border: 1px solid rgba(30, 132, 118, 0.18);
    border-radius: 999px;
    background: rgba(232, 248, 243, 0.92);
    color: #2e7669;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 600;
    justify-self: start;
    letter-spacing: 0.02em;
    margin-top: 0.08rem;
    padding: 0.14rem 0.42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-card.is-disabled {
    cursor: default;
    opacity: 0.58;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-surface {
    background:
      radial-gradient(circle at 16% 4%, rgba(217, 228, 225, 0.46), transparent 35%),
      radial-gradient(circle at 88% 0%, rgba(236, 222, 195, 0.22), transparent 30%),
      linear-gradient(135deg, rgba(239, 244, 244, 0.96), rgba(232, 238, 239, 0.86));
    border-color: rgba(94, 112, 132, 0.19);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 16px 34px rgba(35, 49, 68, 0.07);
    display: grid;
    gap: 0.5rem;
    padding: 0.78rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-utility-row {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    min-height: 1.6rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-utility-row > span {
    color: #7a8798;
    font-size: 0.68rem;
    font-weight: 560;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-board {
    display: grid;
    gap: 0.78rem;
    grid-template-columns: minmax(0, 1.28fr) minmax(19rem, 0.76fr);
    align-items: start;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-workspace.is-eligible-hidden .organize-schedule-board {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedules-workspace.is-eligible-hidden .organize-source-pools {
    display: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-today-schedule,
  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pools {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.54);
    display: grid;
    gap: 0.62rem;
    padding: 0.66rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-today-schedule {
    background: linear-gradient(135deg, rgba(253, 254, 253, 0.95), rgba(244, 249, 249, 0.84));
    box-shadow: 0 10px 24px rgba(40, 54, 72, 0.045);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pools {
    background: linear-gradient(135deg, rgba(248, 245, 239, 0.86), rgba(241, 247, 247, 0.8));
    opacity: 0.96;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-column-header {
    align-items: end;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-column-header span {
    color: #7b8797;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-column-header strong {
    color: #243149;
    display: block;
    font-size: 0.9rem;
    font-weight: 590;
    margin-top: 0.08rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-column-header > em {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #56667b;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 560;
    padding: 0.22rem 0.42rem;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-today-schedule .organize-schedule-column-header {
    align-items: start;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-today-schedule .organize-schedule-column-header span {
    color: #223148;
    display: block;
    font-size: 1.08rem;
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-today-schedule .organize-schedule-column-header strong {
    color: #68758a;
    display: block;
    font-size: 0.74rem;
    font-weight: 470;
    line-height: 1.35;
    margin-top: 0.16rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-eligible-toggle {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    color: #58677d;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 540;
    padding: 0.24rem 0.46rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-eligible-toggle:hover {
    background: rgba(247, 251, 252, 0.94);
    border-color: rgba(76, 113, 142, 0.22);
  }

  body:has(.organize-schedules-workspace) .organize-schedule-header-toggle {
    border-color: rgba(108, 124, 145, 0.16) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: #58677d !important;
    box-shadow: none !important;
    font-size: 0.72rem;
    font-weight: 540;
    padding: 0.34rem 0.62rem;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-header-toggle:hover {
    border-color: rgba(76, 113, 142, 0.24) !important;
    background: rgba(247, 251, 252, 0.95) !important;
    color: #32445c !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-header {
    display: none;
    align-items: start;
    border: 1px solid rgba(108, 124, 145, 0.11);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(250, 248, 243, 0.76), rgba(244, 250, 250, 0.82));
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    padding: 0.66rem 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-header span {
    color: #7b8797;
    font-size: 0.64rem;
    font-weight: 590;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-header strong {
    color: #202d42;
    display: block;
    font-size: 1rem;
    font-weight: 590;
    line-height: 1.18;
    margin-top: 0.08rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-header p {
    color: #68758a;
    font-size: 0.76rem;
    line-height: 1.35;
    margin: 0.18rem 0 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-header > em {
    border: 1px solid rgba(108, 124, 145, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #46566d;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 560;
    padding: 0.28rem 0.48rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-flow {
    display: grid;
    gap: 0.52rem;
    max-height: min(42rem, calc(100vh - 17rem));
    overflow-y: auto;
    padding-right: 0.18rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-flow {
    display: grid;
    gap: 0.52rem;
    max-height: min(34rem, calc(100vh - 20rem));
    overflow-y: auto;
    padding-right: 0.18rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane {
    border: 1px solid rgba(108, 124, 145, 0.115);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    display: grid;
    gap: 0.42rem;
    padding: 0.54rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-lane {
    border: 1px solid rgba(99, 118, 137, 0.14);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.66);
    display: grid;
    gap: 0.36rem;
    padding: 0.5rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-daily {
    border-color: rgba(68, 124, 148, 0.16);
    background: linear-gradient(135deg, rgba(237, 248, 250, 0.72), rgba(249, 252, 252, 0.76));
    box-shadow: inset 3px 0 0 rgba(68, 124, 148, 0.28);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-pool {
    border-color: rgba(59, 135, 121, 0.16);
    background: linear-gradient(135deg, rgba(238, 249, 246, 0.72), rgba(250, 252, 250, 0.76));
    box-shadow: inset 3px 0 0 rgba(59, 135, 121, 0.26);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-songs {
    border-color: rgba(165, 127, 55, 0.18);
    background: linear-gradient(135deg, rgba(253, 247, 234, 0.78), rgba(255, 252, 246, 0.76));
    box-shadow: inset 3px 0 0 rgba(165, 127, 55, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-solos {
    border-color: rgba(126, 103, 169, 0.17);
    background: linear-gradient(135deg, rgba(246, 242, 252, 0.72), rgba(252, 250, 254, 0.76));
    box-shadow: inset 3px 0 0 rgba(126, 103, 169, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-activity {
    border-color: rgba(177, 118, 65, 0.17);
    background: linear-gradient(135deg, rgba(253, 243, 235, 0.72), rgba(255, 250, 246, 0.76));
    box-shadow: inset 3px 0 0 rgba(177, 118, 65, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-header {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-header strong {
    color: #202d42;
    font-size: 0.86rem;
    font-weight: 570;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-header span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-header em {
    color: #68758a;
    font-size: 0.7rem;
    font-style: normal;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-guidance {
    color: #6f7e90;
    font-size: 0.7rem;
    line-height: 1.35;
    margin: 0.18rem 0 0;
    max-width: 34rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    justify-content: end;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-actions > em {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #56667b;
    padding: 0.24rem 0.42rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control {
    align-items: center;
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #617086;
    display: flex;
    gap: 0.34rem;
    min-height: 1.74rem;
    padding: 0.16rem 0.24rem 0.16rem 0.46rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control span {
    font-size: 0.66rem;
    font-weight: 540;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control input,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control select {
    border: 1px solid rgba(108, 124, 145, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #273448;
    font-size: 0.7rem;
    min-height: 1.26rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control input {
    padding: 0 0.2rem;
    text-align: center;
    width: 2.7rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-lane-control select {
    padding: 0 1.35rem 0 0.4rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-items {
    display: grid;
    gap: 0.26rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item {
    align-items: center;
    display: grid;
    gap: 0.36rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item > span:first-child {
    border-radius: 999px;
    background: rgba(241, 247, 250, 0.9);
    color: #587086;
    font-size: 0.66rem;
    font-weight: 560;
    padding: 0.16rem 0;
    text-align: center;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item .organize-schedule-item-content {
    border: 1px solid rgba(108, 124, 145, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.68);
    color: #273348;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    min-width: 0;
    padding: 0.38rem 0.46rem;
    text-align: left;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-items {
    display: grid;
    gap: 0.22rem;
    list-style: none;
    margin: 0;
    max-height: 8.2rem;
    overflow-y: auto;
    padding: 0;
    padding-right: 0.12rem;
    scrollbar-width: thin;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-item > span {
    align-items: center;
    border: 1px solid rgba(108, 124, 145, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.7);
    color: #273348;
    display: flex;
    gap: 0.35rem;
    justify-content: flex-start;
    min-width: 0;
    padding: 0.34rem 0.42rem;
    text-align: left;
    width: 100%;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-item strong {
    color: #213049;
    font-size: 0.74rem;
    font-weight: 560;
    line-height: 1.24;
    overflow-wrap: anywhere;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-source-pool-item em {
    color: #728096;
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-style: normal;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item strong {
    color: #202d42;
    font-size: 0.78rem;
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item em,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-more,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-section-empty,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-empty {
    color: #6b7789;
    font-size: 0.68rem;
    font-style: normal;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-more,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-section-empty,
  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-empty {
    margin: 0;
    padding: 0.35rem 0.3rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-section-empty {
    border: 1px dashed rgba(108, 124, 145, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.42);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-custom-schedule-note {
    border: 1px solid rgba(108, 124, 145, 0.11);
    border-radius: 12px;
    background: rgba(250, 248, 243, 0.58);
    color: #637084;
    display: grid;
    gap: 0.2rem;
    margin-top: 0.25rem;
    padding: 0.56rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-custom-schedule-note strong {
    color: #2a374b;
    font-size: 0.72rem;
    font-weight: 570;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-custom-schedule-note span {
    font-size: 0.66rem;
    line-height: 1.35;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-controls {
    display: none;
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    gap: 0.6rem;
    padding: 0.64rem 0.7rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-controls-header {
    align-items: end;
    display: flex;
    gap: 0.72rem;
    justify-content: space-between;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-controls-header strong {
    color: #253247;
    font-size: 0.86rem;
    font-weight: 570;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-controls-header span {
    color: #68758a;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: right;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(7.2rem, 1fr));
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field {
    align-items: center;
    border: 1px solid rgba(108, 124, 145, 0.1);
    border-radius: 11px;
    background: rgba(247, 250, 250, 0.62);
    color: #627087;
    display: flex;
    gap: 0.45rem;
    justify-content: space-between;
    min-height: 2.16rem;
    padding: 0.34rem 0.42rem 0.34rem 0.56rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field span {
    font-size: 0.68rem;
    font-weight: 560;
    line-height: 1.2;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field input,
  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field select {
    border: 1px solid rgba(108, 124, 145, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #26334a;
    font-size: 0.72rem;
    min-height: 1.48rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field input {
    padding: 0.1rem 0.18rem;
    text-align: center;
    width: 3.2rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-default-schedule-field select {
    padding: 0.12rem 1.45rem 0.12rem 0.38rem;
  }
}

@media (max-width: 760px) {
  body:has(.organize-schedules-workspace) .organize-schedule-selector,
  body:has(.organize-schedules-workspace) .organize-source-pools {
    display: none !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedules-workspace,
  body:has(.organize-schedules-workspace) .organize-schedule-board {
    display: block;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-surface {
    padding: 0.62rem;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-header-toggle {
    border: 1px solid rgba(108, 124, 145, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: #536177 !important;
    box-shadow: none !important;
    font-weight: 540 !important;
  }

  body:has(.organize-schedules-workspace) .organize-today-schedule {
    border-color: rgba(73, 102, 124, 0.18) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(210, 231, 230, 0.48), transparent 34%),
      linear-gradient(135deg, rgba(248, 253, 252, 0.97), rgba(235, 245, 245, 0.9)) !important;
    box-shadow: 0 14px 32px rgba(35, 49, 68, 0.075) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-lane {
    border-width: 1px !important;
    box-shadow: inset 4px 0 0 rgba(108, 124, 145, 0.12), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-daily {
    border-color: rgba(57, 123, 148, 0.24) !important;
    background: linear-gradient(135deg, rgba(224, 244, 248, 0.95), rgba(247, 252, 252, 0.78)) !important;
    box-shadow: inset 4px 0 0 rgba(57, 123, 148, 0.36), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-pool {
    border-color: rgba(48, 130, 113, 0.24) !important;
    background: linear-gradient(135deg, rgba(226, 246, 241, 0.95), rgba(248, 252, 250, 0.78)) !important;
    box-shadow: inset 4px 0 0 rgba(48, 130, 113, 0.34), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-songs {
    border-color: rgba(170, 126, 45, 0.26) !important;
    background: linear-gradient(135deg, rgba(252, 242, 215, 0.95), rgba(255, 251, 243, 0.8)) !important;
    box-shadow: inset 4px 0 0 rgba(170, 126, 45, 0.34), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-solos {
    border-color: rgba(125, 95, 165, 0.25) !important;
    background: linear-gradient(135deg, rgba(241, 233, 251, 0.95), rgba(252, 249, 254, 0.8)) !important;
    box-shadow: inset 4px 0 0 rgba(125, 95, 165, 0.32), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-activity {
    border-color: rgba(178, 113, 52, 0.25) !important;
    background: linear-gradient(135deg, rgba(252, 235, 219, 0.95), rgba(255, 249, 243, 0.8)) !important;
    box-shadow: inset 4px 0 0 rgba(178, 113, 52, 0.32), 0 8px 18px rgba(35, 49, 68, 0.035) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-item .organize-schedule-item-content {
    border-color: rgba(96, 116, 137, 0.13) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body:has(.organize-schedules-workspace) .organize-schedule-item > span:first-child {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #506982 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-sort-control {
    align-items: center;
    border: 1px solid rgba(95, 113, 135, 0.13);
    border-radius: 999px;
    background: rgba(247, 250, 249, 0.88);
    color: #657286;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.34rem;
    min-height: 2.06rem;
    padding: 0.18rem 0.28rem 0.18rem 0.52rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-sort-control span {
    font-size: 0.68rem;
    font-weight: 560;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-sort-control select {
    border: 1px solid rgba(108, 124, 145, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #34445a;
    font-size: 0.72rem;
    min-height: 1.48rem;
    padding: 0.12rem 1.45rem 0.12rem 0.48rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    grid-template-columns: minmax(18rem, 3.25fr) minmax(5.5rem, 0.72fr) minmax(7.5rem, 0.9fr) minmax(8.5rem, 1fr) 1.2rem !important;
    min-width: 40rem !important;
  }
}

/* P10CG operational workspace warmth: list-first Songs, Solos, Activities polish. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card {
    min-height: 2.45rem;
    padding-block: 0.38rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 2),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 2),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 2) {
    background: linear-gradient(90deg, rgba(232, 246, 229, 0.66), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 3),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 3),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 3) {
    background: linear-gradient(90deg, rgba(226, 243, 249, 0.66), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 4),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 4),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 4) {
    background: linear-gradient(90deg, rgba(239, 232, 251, 0.62), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 5),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 5),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 5) {
    background: linear-gradient(90deg, rgba(255, 244, 222, 0.68), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 6),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 6),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 6) {
    background: linear-gradient(90deg, rgba(250, 231, 230, 0.62), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 7),
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 7),
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card:nth-child(6n + 7) {
    background: linear-gradient(90deg, rgba(224, 246, 246, 0.62), rgba(255, 255, 255, 0.64)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card.is-selected {
    background: linear-gradient(90deg, rgba(229, 242, 249, 0.96), rgba(255, 252, 243, 0.84)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-list-name strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-list-name strong,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-list-name strong {
    font-size: 0.86rem;
    letter-spacing: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-list-rotation,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-list-rotation,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-list-rotation {
    color: #52677d;
    font-size: 0.72rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats .organize-stat {
    background: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(108, 124, 145, 0.1) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-description {
    background: linear-gradient(135deg, rgba(241, 248, 250, 0.72), rgba(255, 249, 238, 0.58)) !important;
  }
}

/* P10DU schedules header cleanup: Schedules owns its own context, so the persistent inspector steps aside. */
@media (min-width: 761px) {
  body:has(.organize-schedules-workspace) .organize-workspace-shell:not([hidden]) {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr) !important;
  }

  body:has(.organize-schedules-workspace) .organize-inspector-card {
    display: none !important;
  }
}

/* P10CH semantic color system: intentional warmth for Goals, rows, and inspectors. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="goal"].is-selected) .organize-context-card {
    background:
      radial-gradient(circle at 18% 12%, rgba(232, 220, 194, 0.28), transparent 36%),
      linear-gradient(180deg, rgba(255, 253, 247, 0.93), rgba(245, 250, 249, 0.74)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lanes {
    border-color: rgba(122, 99, 67, 0.18) !important;
    background:
      linear-gradient(135deg, rgba(255, 248, 232, 0.78), rgba(238, 248, 248, 0.86)) !important;
    box-shadow: 0 14px 30px rgba(67, 54, 38, 0.06) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor {
    border-color: rgba(111, 88, 54, 0.2) !important;
    background:
      linear-gradient(135deg, rgba(255, 250, 237, 0.94), rgba(242, 249, 247, 0.86)) !important;
    box-shadow: inset 4px 0 0 rgba(144, 108, 62, 0.3), 0 8px 18px rgba(74, 59, 40, 0.055) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor strong {
    color: #273044 !important;
    font-size: 1.04rem !important;
    font-weight: 620 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lane:has(.organize-lane-empty):not(:has(.organize-lane-item)) {
    display: none;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-grid {
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-drill {
    border-color: rgba(73, 112, 145, 0.18) !important;
    background: linear-gradient(135deg, rgba(235, 246, 252, 0.92), rgba(255, 255, 255, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-song {
    border-color: rgba(72, 128, 91, 0.17) !important;
    background: linear-gradient(135deg, rgba(235, 249, 239, 0.9), rgba(255, 255, 255, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-solo {
    border-color: rgba(112, 84, 151, 0.16) !important;
    background: linear-gradient(135deg, rgba(245, 239, 252, 0.9), rgba(255, 255, 255, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-activity {
    border-color: rgba(162, 113, 52, 0.16) !important;
    background: linear-gradient(135deg, rgba(255, 246, 231, 0.92), rgba(255, 255, 255, 0.66)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item {
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: inset 2px 0 0 rgba(108, 124, 145, 0.12);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-drill .organize-lane-item {
    box-shadow: inset 2px 0 0 rgba(73, 112, 145, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-song .organize-lane-item {
    box-shadow: inset 2px 0 0 rgba(72, 128, 91, 0.24);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-solo .organize-lane-item {
    box-shadow: inset 2px 0 0 rgba(112, 84, 151, 0.22);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-activity .organize-lane-item {
    box-shadow: inset 2px 0 0 rgba(162, 113, 52, 0.22);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card {
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 3px 0 0 rgba(92, 111, 132, 0.14) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-active {
    background: linear-gradient(90deg, rgba(232, 247, 241, 0.88), rgba(255, 255, 255, 0.68)) !important;
    box-shadow: inset 3px 0 0 rgba(67, 132, 103, 0.28) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-inactive {
    background: linear-gradient(90deg, rgba(239, 245, 248, 0.86), rgba(255, 255, 255, 0.68)) !important;
    box-shadow: inset 3px 0 0 rgba(87, 122, 145, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-archived {
    background: linear-gradient(90deg, rgba(235, 238, 240, 0.82), rgba(255, 255, 255, 0.62)) !important;
    box-shadow: inset 3px 0 0 rgba(112, 124, 135, 0.18) !important;
    opacity: 0.78 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card {
    box-shadow: inset 3px 0 0 rgba(76, 132, 96, 0.2) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card {
    box-shadow: inset 3px 0 0 rgba(106, 86, 147, 0.2) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card {
    box-shadow: inset 3px 0 0 rgba(158, 111, 51, 0.19) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-song-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-solo-workspace.is-list-view .organize-item-workspace-card.is-selected,
  body:has(.organize-workspace-shell:not([hidden])) .organize-activity-workspace.is-list-view .organize-item-workspace-card.is-selected {
    border-color: rgba(70, 106, 137, 0.24) !important;
    background: linear-gradient(90deg, rgba(226, 241, 248, 0.96), rgba(255, 248, 235, 0.84)) !important;
    box-shadow: inset 4px 0 0 rgba(67, 106, 136, 0.42), 0 6px 14px rgba(43, 60, 78, 0.055) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 247, 0.82)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats {
    gap: 0.34rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats .organize-stat {
    background: linear-gradient(135deg, rgba(250, 253, 251, 0.86), rgba(241, 247, 250, 0.72)) !important;
    border-color: rgba(108, 124, 145, 0.13) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-stats .organize-stat strong {
    color: #28364c !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-meta,
  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    background:
      linear-gradient(180deg, rgba(250, 248, 242, 0.72), rgba(245, 250, 249, 0.7)) !important;
    border-color: rgba(108, 124, 145, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-links {
    border-left: 3px solid rgba(80, 132, 116, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-row {
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(108, 124, 145, 0.09) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-description {
    border-left: 3px solid rgba(144, 108, 62, 0.22) !important;
    background: linear-gradient(135deg, rgba(255, 249, 237, 0.78), rgba(240, 249, 249, 0.7)) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-link {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(108, 124, 145, 0.1) !important;
  }
}

/* P10CI Goals vertical support lanes: relationship rows, not dashboard tiles. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lanes {
    gap: 0.52rem !important;
    padding: 0.62rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-goal-anchor {
    min-height: 0 !important;
    padding: 0.56rem 0.68rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    grid-template-columns: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-relationship-lane {
    align-items: stretch !important;
    border-radius: 12px !important;
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: minmax(5.25rem, 0.22fr) minmax(0, 1fr) !important;
    padding: 0.42rem 0.5rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-header {
    align-items: start !important;
    display: grid !important;
    gap: 0.2rem !important;
    justify-content: initial !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-header em {
    justify-self: start !important;
    min-width: 1.4rem !important;
    padding: 0.1rem 0.32rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-items {
    align-self: center !important;
    display: grid !important;
    gap: 0.22rem !important;
    max-height: 9rem !important;
    min-width: 0 !important;
    overflow-y: auto !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item {
    align-items: center !important;
    border-radius: 9px !important;
    display: grid !important;
    gap: 0.45rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 0.42fr) !important;
    min-height: 2.05rem !important;
    padding: 0.34rem 0.46rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item strong {
    font-size: 0.78rem !important;
    line-height: 1.14 !important;
    min-width: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item span {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    color: #657489 !important;
    font-size: 0.64rem !important;
    justify-self: end !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0.13rem 0.34rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-drill .organize-lane-item,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-song .organize-lane-item,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-solo .organize-lane-item,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-activity .organize-lane-item {
    background: rgba(255, 255, 255, 0.64) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item:hover,
  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item.is-selected {
    background: rgba(251, 253, 252, 0.94) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-lane-empty {
    padding: 0.2rem 0 !important;
  }
}

/* P10DU workspace surface color and hideable inspector controls. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-context-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-toggle {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #56667c;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 540;
    min-height: 2.05rem;
    padding: 0.38rem 0.62rem;
    white-space: nowrap;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-inspector-toggle:hover {
    border-color: rgba(76, 113, 142, 0.25);
    background: rgba(248, 252, 252, 0.96);
    color: #31445c;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-inspector-hidden {
    grid-template-columns: minmax(10.5rem, 0.48fr) minmax(0, 3.8fr) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started {
    align-items: start;
    grid-template-columns: minmax(10.5rem, 0.42fr) minmax(0, 3.8fr) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-inspector-card,
  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-inspector-hidden .organize-inspector-card {
    display: none !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-workspace-main {
    align-self: start;
    gap: 0;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-getting-started-card {
    align-items: stretch;
    background:
      radial-gradient(circle at 14% 4%, rgba(235, 216, 177, 0.36), transparent 32%),
      linear-gradient(135deg, rgba(255, 251, 241, 0.96), rgba(240, 248, 246, 0.86)) !important;
    display: grid;
    gap: 0.74rem;
    margin-top: 0;
    padding: 0.86rem 0.9rem 0.95rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-getting-started-card h3 {
    font-size: clamp(1.22rem, 1.5vw, 1.5rem) !important;
    line-height: 1.08 !important;
    margin: 0.04rem 0 0.18rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-getting-started-card p:not(.eyebrow) {
    max-width: 54rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-getting-started-progress {
    gap: 0.46rem;
    margin-top: 0.68rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-getting-started .organize-setup-step {
    padding: 0.56rem 0.6rem;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell.is-inspector-hidden .organize-workspace-content {
    grid-template-columns: minmax(16rem, 0.58fr) minmax(0, 1.8fr);
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="drill"].is-selected) .organize-context-card {
    background:
      radial-gradient(circle at 15% 8%, rgba(208, 232, 235, 0.38), transparent 33%),
      linear-gradient(135deg, rgba(241, 248, 249, 0.96), rgba(232, 241, 243, 0.78)) !important;
    border-color: rgba(72, 125, 142, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="song"].is-selected) .organize-context-card {
    background:
      radial-gradient(circle at 16% 8%, rgba(238, 220, 178, 0.34), transparent 34%),
      linear-gradient(135deg, rgba(252, 248, 238, 0.96), rgba(243, 238, 225, 0.8)) !important;
    border-color: rgba(159, 124, 62, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="solo"].is-selected) .organize-context-card {
    background:
      radial-gradient(circle at 16% 8%, rgba(220, 207, 239, 0.38), transparent 34%),
      linear-gradient(135deg, rgba(248, 245, 252, 0.97), rgba(239, 235, 247, 0.8)) !important;
    border-color: rgba(126, 103, 169, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="activity"].is-selected) .organize-context-card {
    background:
      radial-gradient(circle at 16% 8%, rgba(235, 211, 184, 0.36), transparent 34%),
      linear-gradient(135deg, rgba(253, 247, 240, 0.97), rgba(244, 237, 229, 0.8)) !important;
    border-color: rgba(177, 118, 65, 0.18) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="drill"].is-selected) .organize-item-workspace.is-list-view {
    background: rgba(234, 244, 246, 0.78) !important;
    border-color: rgba(72, 125, 142, 0.16) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="song"].is-selected) .organize-item-workspace.is-list-view {
    background: rgba(247, 241, 226, 0.78) !important;
    border-color: rgba(159, 124, 62, 0.16) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="solo"].is-selected) .organize-item-workspace.is-list-view {
    background: rgba(242, 236, 249, 0.78) !important;
    border-color: rgba(126, 103, 169, 0.16) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="activity"].is-selected) .organize-item-workspace.is-list-view {
    background: rgba(249, 239, 229, 0.78) !important;
    border-color: rgba(177, 118, 65, 0.16) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-surface {
    background:
      radial-gradient(circle at 14% 2%, rgba(197, 218, 219, 0.62), transparent 34%),
      radial-gradient(circle at 88% 0%, rgba(232, 214, 178, 0.34), transparent 32%),
      linear-gradient(135deg, rgba(229, 238, 238, 0.99), rgba(219, 230, 233, 0.93)) !important;
    border-color: rgba(74, 98, 120, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 38px rgba(35, 49, 68, 0.085) !important;
  }

  body:has(.organize-schedules-workspace) #organizeAddCurrentButton.organize-schedule-header-toggle {
    border: 1px solid rgba(108, 124, 145, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: none !important;
    color: #536177 !important;
    font-weight: 540 !important;
  }

  body:has(.organize-schedules-workspace) #organizeAddCurrentButton.organize-schedule-header-toggle:hover {
    border-color: rgba(76, 113, 142, 0.24) !important;
    background: rgba(247, 251, 252, 0.96) !important;
    color: #32445c !important;
  }
}

@media (max-width: 760px) {
  .organize-context-actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .organize-inspector-toggle {
    display: none !important;
  }
}

/* P10DU regression cleanup: stable operational list columns and workspace-level surfaces. */
@media (min-width: 761px) {
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view {
    overflow-x: auto !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card {
    align-items: center !important;
    column-gap: 0.9rem !important;
    display: grid !important;
    grid-template-columns: minmax(22rem, 3.7fr) minmax(6.25rem, 0.72fr) minmax(8rem, 0.9fr) minmax(10rem, 1fr) !important;
    min-width: 52rem !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header span,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace.is-list-view .organize-item-workspace-card > span {
    min-width: 0 !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-header span {
    display: block !important;
    line-height: 1.1 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-name strong {
    max-width: 100% !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-goals,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-frequency,
  body:has(.organize-workspace-shell:not([hidden])) .organize-item-list-rotation {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-drill-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(190, 222, 229, 0.48), transparent 32%),
      linear-gradient(135deg, rgba(238, 248, 250, 0.98), rgba(224, 238, 241, 0.9)) !important;
    border-color: rgba(72, 125, 142, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-song-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(232, 206, 152, 0.44), transparent 32%),
      linear-gradient(135deg, rgba(252, 246, 231, 0.98), rgba(241, 231, 211, 0.9)) !important;
    border-color: rgba(159, 124, 62, 0.23) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-solo-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(210, 190, 232, 0.46), transparent 32%),
      linear-gradient(135deg, rgba(248, 243, 252, 0.98), rgba(235, 226, 246, 0.9)) !important;
    border-color: rgba(126, 103, 169, 0.23) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-activity-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(232, 196, 158, 0.44), transparent 32%),
      linear-gradient(135deg, rgba(253, 245, 236, 0.98), rgba(242, 229, 215, 0.9)) !important;
    border-color: rgba(177, 118, 65, 0.23) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-drill-workspace) .organize-item-workspace.is-list-view {
    background: rgba(221, 237, 241, 0.92) !important;
    border-color: rgba(72, 125, 142, 0.22) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-song-workspace) .organize-item-workspace.is-list-view {
    background: rgba(242, 232, 210, 0.92) !important;
    border-color: rgba(159, 124, 62, 0.22) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-solo-workspace) .organize-item-workspace.is-list-view {
    background: rgba(235, 226, 246, 0.92) !important;
    border-color: rgba(126, 103, 169, 0.22) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])) .organize-context-card:has(.organize-activity-workspace) .organize-item-workspace.is-list-view {
    background: rgba(244, 229, 216, 0.92) !important;
    border-color: rgba(177, 118, 65, 0.22) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-surface {
    background:
      radial-gradient(circle at 15% 0%, rgba(178, 207, 211, 0.7), transparent 34%),
      radial-gradient(circle at 86% 2%, rgba(229, 205, 156, 0.42), transparent 32%),
      linear-gradient(135deg, rgba(222, 235, 236, 0.99), rgba(213, 226, 230, 0.95)) !important;
    border-color: rgba(74, 98, 120, 0.3) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="drill"].is-selected) .organize-context-card:has(.organize-drill-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(190, 222, 229, 0.5), transparent 32%),
      linear-gradient(135deg, rgba(238, 248, 250, 0.99), rgba(224, 238, 241, 0.91)) !important;
    border-color: rgba(72, 125, 142, 0.25) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="song"].is-selected) .organize-context-card:has(.organize-song-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(232, 206, 152, 0.46), transparent 32%),
      linear-gradient(135deg, rgba(252, 246, 231, 0.99), rgba(241, 231, 211, 0.91)) !important;
    border-color: rgba(159, 124, 62, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="solo"].is-selected) .organize-context-card:has(.organize-solo-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(210, 190, 232, 0.48), transparent 32%),
      linear-gradient(135deg, rgba(248, 243, 252, 0.99), rgba(235, 226, 246, 0.91)) !important;
    border-color: rgba(126, 103, 169, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="activity"].is-selected) .organize-context-card:has(.organize-activity-workspace) {
    background:
      radial-gradient(circle at 12% 0%, rgba(232, 196, 158, 0.46), transparent 32%),
      linear-gradient(135deg, rgba(253, 245, 236, 0.99), rgba(242, 229, 215, 0.91)) !important;
    border-color: rgba(177, 118, 65, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="drill"].is-selected) .organize-context-card:has(.organize-drill-workspace) .organize-item-workspace.is-list-view {
    background: rgba(221, 237, 241, 0.93) !important;
    border-color: rgba(72, 125, 142, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="song"].is-selected) .organize-context-card:has(.organize-song-workspace) .organize-item-workspace.is-list-view {
    background: rgba(242, 232, 210, 0.93) !important;
    border-color: rgba(159, 124, 62, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="solo"].is-selected) .organize-context-card:has(.organize-solo-workspace) .organize-item-workspace.is-list-view {
    background: rgba(235, 226, 246, 0.93) !important;
    border-color: rgba(126, 103, 169, 0.24) !important;
  }

  body:has(.organize-workspace-shell:not([hidden])):has(.organize-nav-item[data-organize-type="activity"].is-selected) .organize-context-card:has(.organize-activity-workspace) .organize-item-workspace.is-list-view {
    background: rgba(244, 229, 216, 0.93) !important;
    border-color: rgba(177, 118, 65, 0.24) !important;
  }

  body:has(.organize-schedules-workspace) .organize-context-card:has(.organize-schedules-workspace) {
    background:
      radial-gradient(circle at 10% 0%, rgba(168, 204, 209, 0.58), transparent 33%),
      radial-gradient(circle at 92% 4%, rgba(226, 205, 159, 0.34), transparent 34%),
      linear-gradient(135deg, rgba(224, 237, 238, 0.99), rgba(210, 225, 229, 0.94)) !important;
    border-color: rgba(70, 101, 123, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 18px 40px rgba(35, 49, 68, 0.09) !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedules-workspace {
    border: 1px solid rgba(70, 101, 123, 0.2) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(203, 224, 227, 0.78), rgba(225, 234, 229, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 12px 28px rgba(35, 49, 68, 0.075) !important;
    padding: 0.72rem !important;
  }

  body:has(.organize-schedules-workspace) .organize-schedule-selector,
  body:has(.organize-schedules-workspace) .organize-schedule-surface {
    background: rgba(248, 252, 251, 0.74) !important;
    border-color: rgba(70, 101, 123, 0.19) !important;
  }
}

/* P10DU custom schedules: manual ordered sequences with a supportive available-item pool. */
@media (min-width: 761px) {
  body:has(.organize-schedules-workspace) .organize-create-schedule-button {
    appearance: none;
    border: 1px solid rgba(70, 101, 123, 0.18);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 248, 247, 0.76));
    color: #30435a;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 560;
    min-height: 2.1rem;
    padding: 0.48rem 0.58rem;
    text-align: left;
  }

  body:has(.organize-schedules-workspace) .organize-create-schedule-button:hover {
    border-color: rgba(66, 113, 124, 0.28);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 245, 244, 0.9));
  }

  body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card {
    border: 1px dashed rgba(86, 116, 132, 0.24);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(238, 247, 246, 0.52));
    color: #647489;
    display: grid;
    gap: 0.18rem;
    padding: 0.58rem;
  }

  body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card strong {
    color: #2c3b52;
    font-size: 0.76rem;
    font-weight: 570;
    line-height: 1.22;
  }

  body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card span {
    font-size: 0.68rem;
    line-height: 1.32;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-schedule-board {
    grid-template-columns: minmax(24rem, 1.32fr) minmax(19rem, 0.78fr) !important;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-today-schedule {
    border-color: rgba(75, 112, 132, 0.22) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(206, 226, 225, 0.56), transparent 34%),
      linear-gradient(135deg, rgba(249, 253, 251, 0.94), rgba(234, 244, 240, 0.86)) !important;
    box-shadow: 0 14px 30px rgba(35, 49, 68, 0.075) !important;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-source-pools {
    border-color: rgba(137, 113, 71, 0.18) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(235, 214, 176, 0.44), transparent 32%),
      linear-gradient(135deg, rgba(255, 251, 242, 0.9), rgba(239, 247, 246, 0.78)) !important;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-schedule-column-header p {
    color: #68788b;
    font-size: 0.72rem;
    line-height: 1.35;
    margin: 0.16rem 0 0;
    max-width: 34rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-title-block {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field {
    display: grid;
    gap: 0.16rem;
    max-width: 30rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field > span {
    color: #7b8797;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field input {
    border: 1px solid rgba(86, 112, 132, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
    color: #223148;
    font: inherit;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 590;
    min-height: 2.45rem;
    padding: 0.42rem 0.58rem;
    width: min(100%, 26rem);
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field input:focus {
    border-color: rgba(76, 113, 142, 0.32);
    box-shadow: 0 0 0 3px rgba(76, 113, 142, 0.1);
    outline: none;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions em,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions em {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #56667b;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 560;
    padding: 0.22rem 0.42rem;
    white-space: nowrap;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions button,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions button {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #57677d;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 540;
    min-height: 1.7rem;
    padding: 0.2rem 0.46rem;
    white-space: nowrap;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions button {
    border-color: rgba(68, 122, 112, 0.18);
    background: rgba(241, 250, 247, 0.82);
    color: #315d55;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions button:hover,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions button:hover {
    border-color: rgba(76, 113, 142, 0.25);
    background: rgba(248, 252, 252, 0.96);
    color: #31445c;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-flow,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-list {
    display: grid;
    gap: 0.52rem;
    min-height: 0;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-flow {
    max-height: min(42rem, calc(100vh - 18rem));
    overflow-y: auto;
    padding-right: 0.18rem;
    scrollbar-width: thin;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-list {
    max-height: min(42rem, calc(100vh - 18rem));
    overflow-y: auto;
    padding-right: 0.18rem;
    scrollbar-width: thin;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty {
    border: 1px dashed rgba(84, 119, 133, 0.26);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(236, 247, 246, 0.58));
    color: #596a7f;
    display: grid;
    gap: 0.3rem;
    min-height: 9rem;
    padding: 1rem;
    place-content: center;
    text-align: center;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty strong {
    color: #27364b;
    font-size: 0.98rem;
    font-weight: 590;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty span {
    font-size: 0.78rem;
    line-height: 1.42;
    margin-inline: auto;
    max-width: 28rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-items {
    display: grid;
    gap: 0.42rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item {
    align-items: center;
    border: 1px solid rgba(92, 112, 132, 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    min-height: 3.15rem;
    padding: 0.48rem 0.58rem;
    box-shadow: inset 3px 0 0 rgba(76, 113, 142, 0.16);
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item > span:first-child {
    align-items: center;
    border-radius: 999px;
    background: rgba(236, 245, 245, 0.86);
    color: #536b7e;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 560;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item .organize-schedule-item-content {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid;
    gap: 0.14rem;
    padding: 0 !important;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item strong,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item span {
    color: #25334a;
    font-size: 0.82rem;
    font-weight: 570;
    line-height: 1.2;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item em,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item em {
    color: #6b7789;
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.22;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    justify-content: flex-end;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions button {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #56667c;
    cursor: pointer;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 540;
    min-height: 1.55rem;
    padding: 0.16rem 0.4rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions button:hover:not(:disabled) {
    border-color: rgba(76, 113, 142, 0.25);
    background: rgba(248, 252, 252, 0.96);
    color: #32445c;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions button:disabled {
    cursor: default;
    opacity: 0.42;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-group {
    border: 1px solid rgba(108, 124, 145, 0.12);
    border-radius: 13px;
    display: grid;
    gap: 0.32rem;
    padding: 0.48rem;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-group > strong {
    color: #68758a;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item {
    appearance: none;
    border: 1px solid rgba(108, 124, 145, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    display: grid;
    gap: 0.1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.42rem 0.48rem;
    text-align: left;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item:hover {
    border-color: rgba(76, 113, 142, 0.23);
    background: rgba(255, 255, 255, 0.86);
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item span,
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item em {
    grid-column: 1;
    min-width: 0;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item small {
    align-self: center;
    border: 1px solid rgba(68, 122, 112, 0.16);
    border-radius: 999px;
    background: rgba(241, 250, 247, 0.82);
    color: #37665e;
    font-size: 0.62rem;
    font-weight: 560;
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0.16rem 0.4rem;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-today-schedule {
    display: grid !important;
  }

  body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
}

/* P10DU app shell modernization: calmer workspace navigation and custom confirmations. */
@media (min-width: 761px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    align-items: center !important;
    background:
      radial-gradient(circle at 7% 0%, rgba(55, 75, 95, 0.5), transparent 34%),
      linear-gradient(135deg, #1f2d3d, #273645 58%, #303a45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(23, 31, 43, 0.18) !important;
    display: grid !important;
    gap: 1.1rem !important;
    grid-template-columns: minmax(11rem, 0.85fr) minmax(20rem, 1.5fr) minmax(22rem, 1.1fr) !important;
    margin-bottom: 1rem !important;
    min-height: 4.7rem !important;
    padding: 0.86rem 1.08rem !important;
  }

  .app-header.header-with-nav .brand-block,
  .app-header.compact-brand-header.header-with-nav .brand-block {
    min-width: 0 !important;
  }

  .app-header.header-with-nav .brand-block h1,
  .app-header.compact-brand-header.header-with-nav .brand-block h1 {
    color: #f8fbff !important;
    font-size: clamp(1.18rem, 1.55vw, 1.55rem) !important;
    font-weight: 680 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .app-header.header-with-nav .brand-tagline {
    color: rgba(235, 242, 248, 0.82) !important;
    font-size: 0.76rem !important;
    font-weight: 470 !important;
    line-height: 1.25 !important;
    margin: 0.24rem 0 0 !important;
  }

  .app-header.header-with-nav .brand-support {
    display: none !important;
  }

  .header-with-nav .app-nav,
  .app-nav {
    align-items: center !important;
    align-self: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    gap: clamp(0.82rem, 1.4vw, 1.35rem) !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .app-nav-button.setup-nav-button,
  .header-with-nav .app-nav-button.setup-nav-button {
    display: none !important;
  }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(235, 242, 248, 0.68) !important;
    font-size: 0.82rem !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    min-height: 2rem !important;
    padding: 0.3rem 0.08rem 0.42rem !important;
    position: relative !important;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease !important;
    white-space: nowrap !important;
  }

  .app-nav-button::before,
  .app-nav-button::after {
    content: none !important;
  }

  .header-with-nav .app-nav-button:hover,
  .app-nav-button:hover {
    color: rgba(255, 255, 255, 0.94) !important;
    transform: translateY(-1px) !important;
  }

  .header-with-nav .app-nav-button.is-selected,
  .app-nav-button.is-selected {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 610 !important;
  }

  .header-with-nav .app-nav-button.is-selected::after,
  .app-nav-button.is-selected::after {
    background: linear-gradient(90deg, rgba(117, 182, 255, 0.35), rgba(144, 220, 205, 0.9), rgba(117, 182, 255, 0.35)) !important;
    border-radius: 999px !important;
    bottom: 0.14rem !important;
    content: "" !important;
    display: block !important;
    height: 2px !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
  }

  .header-utility-bar {
    align-items: center !important;
    align-self: center !important;
    border-top: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    opacity: 0.92 !important;
    padding: 0 !important;
  }

  .header-utility-bar .header-mode-buttons.dashboard-mode-buttons {
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    gap: 0.1rem !important;
    padding: 0.16rem !important;
  }

  .header-utility-bar .dashboard-mode-button {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(235, 242, 248, 0.7) !important;
    font-size: 0.68rem !important;
    font-weight: 560 !important;
    min-height: 1.5rem !important;
    padding: 0.18rem 0.48rem !important;
  }

  .header-utility-bar .dashboard-mode-button.is-selected {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #263447 !important;
    box-shadow: 0 4px 12px rgba(14, 23, 37, 0.12) !important;
  }

  .header-utility-bar .app-build-line {
    margin: 0 !important;
  }

  .header-utility-bar .build-label {
    display: none !important;
  }

  .header-utility-bar .build-chip,
  .header-utility-bar .prominent-build-chip,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status,
  .header-utility-bar #backupHealthButton.backup-health-button {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.075) !important;
    box-shadow: none !important;
    color: rgba(238, 245, 250, 0.75) !important;
    font-size: 0.66rem !important;
    font-weight: 530 !important;
    min-height: 1.72rem !important;
    padding: 0.28rem 0.48rem !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    gap: 0.22rem !important;
  }

  .header-utility-bar #pwaVersionLabel {
    color: rgba(238, 245, 250, 0.58) !important;
    font-weight: 560 !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    color: rgba(238, 245, 250, 0.78) !important;
    opacity: 1 !important;
  }

  .header-utility-bar #pwaReloadButton.pwa-reload-button {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 0 !important;
    color: #263447 !important;
    min-height: 1.28rem !important;
    padding: 0.12rem 0.38rem !important;
  }
}

#guidanceModalBackdrop.is-confirmation-modal {
  background:
    radial-gradient(circle at 50% 8%, rgba(149, 202, 194, 0.2), transparent 28rem),
    rgba(25, 36, 49, 0.38) !important;
  z-index: 13090 !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(219, 243, 238, 0.76), transparent 15rem),
    linear-gradient(180deg, #fffefb 0%, #f6fbfd 100%) !important;
  border: 1px solid rgba(103, 130, 145, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 64px rgba(29, 45, 61, 0.22) !important;
  max-height: min(88vh, 34rem) !important;
  max-width: min(31rem, calc(100vw - 2rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#guidanceModalBackdrop.is-confirmation-modal .modal-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 253, 0.9)) !important;
  border-bottom: 1px solid rgba(101, 121, 139, 0.13) !important;
  margin: 0 !important;
  padding: 1rem 1.12rem 0.82rem !important;
}

#guidanceModalBackdrop.is-confirmation-modal .modal-header .eyebrow {
  color: #53706f !important;
  font-size: 0.68rem !important;
  font-weight: 660 !important;
  letter-spacing: 0.08em !important;
}

#guidanceModalBackdrop.is-confirmation-modal .modal-header h2 {
  color: #172536 !important;
  font-size: clamp(1.18rem, 2vw, 1.42rem) !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  margin-top: 0.2rem !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-message {
  color: #4c6072 !important;
  font-size: 0.98rem !important;
  font-weight: 450 !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  padding: 0.95rem 1.12rem 1rem !important;
  white-space: pre-line;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-body:not([hidden]) {
  display: grid !important;
  gap: 0.72rem !important;
  margin: -0.25rem 0 0 !important;
  padding: 0 1.12rem 1.05rem !important;
}

.zonebuilder-confirm-detail {
  background: rgba(236, 248, 246, 0.76);
  border: 1px solid rgba(89, 128, 122, 0.16);
  border-radius: 12px;
  color: #3d5666;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
  padding: 0.78rem 0.84rem;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions {
  background: linear-gradient(180deg, rgba(250, 252, 253, 0.9), rgba(255, 254, 251, 0.98)) !important;
  border-top: 1px solid rgba(101, 121, 139, 0.14) !important;
  gap: 0.55rem !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0.78rem 1.12rem 0.9rem !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions button {
  border-radius: 999px !important;
  min-height: 2.28rem !important;
  min-width: 7.65rem !important;
  padding: 0.48rem 0.95rem !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .secondary-button {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(104, 124, 143, 0.2) !important;
  color: #435668 !important;
  font-weight: 560 !important;
}

.zonebuilder-confirm-action-button {
  border-color: rgba(30, 120, 134, 0.2) !important;
  background: linear-gradient(135deg, rgba(32, 135, 151, 0.96), rgba(52, 168, 151, 0.88)) !important;
  box-shadow: 0 12px 24px rgba(33, 125, 139, 0.18) !important;
  color: #ffffff !important;
  font-weight: 650 !important;
}

.zonebuilder-confirm-action-button.is-caution {
  border-color: rgba(180, 83, 9, 0.28) !important;
  background: linear-gradient(135deg, rgba(173, 96, 26, 0.96), rgba(213, 128, 49, 0.86)) !important;
  box-shadow: 0 12px 24px rgba(173, 96, 26, 0.18) !important;
  color: #ffffff !important;
}

.zonebuilder-confirm-action-button:disabled {
  cursor: not-allowed !important;
  filter: grayscale(0.35) !important;
  opacity: 0.58 !important;
}

.zonebuilder-confirm-acknowledgement {
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(255, 248, 235, 0.94), rgba(255, 255, 255, 0.86));
  border: 1px solid rgba(214, 132, 45, 0.24);
  border-radius: 12px;
  color: #6b4a2c;
  display: flex;
  font-weight: 620;
  gap: 0.65rem;
  line-height: 1.38;
  margin: 0;
  padding: 0.82rem 0.88rem;
}

.zonebuilder-confirm-acknowledgement input {
  accent-color: #b45309;
  flex: 0 0 auto;
  height: 1rem;
  margin-top: 0.12rem;
  width: 1rem;
}

@media (max-width: 520px) {
  #guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions {
    align-items: stretch !important;
    flex-direction: column-reverse !important;
  }

  #guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions button {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .header-utility-bar .header-mode-buttons.dashboard-mode-buttons {
    display: none !important;
  }
}

/* P10DU focused header cleanup: identity/build left, navigation center, mode/status right. */
@media (min-width: 761px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    grid-template-columns: minmax(13rem, 0.9fr) minmax(21rem, 1.5fr) minmax(15rem, 0.82fr) !important;
  }

  .app-header.header-with-nav .brand-block,
  .app-header.compact-brand-header.header-with-nav .brand-block {
    display: grid !important;
    gap: 0.2rem !important;
  }

  .app-header.header-with-nav .brand-block .app-build-line {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.3rem !important;
    margin: 0.1rem 0 0 !important;
    max-width: max-content !important;
  }

  .app-header.header-with-nav .brand-block .build-label {
    color: rgba(235, 242, 248, 0.45) !important;
    display: inline-flex !important;
    font-size: 0.58rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

    .app-header.header-with-nav .brand-block #appVersionDisplay.build-chip,
    .app-header.header-with-nav .brand-block #appUpdateStatus.build-chip {
      border: 1px solid rgba(255, 255, 255, 0.09) !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, 0.055) !important;
      box-shadow: none !important;
      color: rgba(235, 242, 248, 0.62) !important;
      font-size: 0.61rem !important;
      font-weight: 400 !important;
      min-height: 1.34rem !important;
      padding: 0.18rem 0.38rem !important;
    }

    .app-header.header-with-nav .brand-block #appUpdateStatus.build-chip {
      display: none !important;
    }

    .app-header.header-with-nav .brand-block #mobileForceUpdateButton {
      display: none !important;
    }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    font-weight: 400 !important;
  }

  .header-with-nav .app-nav-button.is-selected,
  .app-nav-button.is-selected {
    font-weight: 500 !important;
  }

  .header-utility-bar {
    gap: 0.38rem !important;
  }

    .header-utility-bar .app-build-line,
    .header-utility-bar #appVersionDisplay,
    .header-utility-bar #appUpdateStatus,
    .header-utility-bar #pwaVersionLabel,
    .header-utility-bar #mobileForceUpdateButton,
    .header-utility-bar #backupHealthButton,
    .header-utility-bar .backup-health-button {
      display: none !important;
    }

  .header-utility-bar .header-mode-buttons.dashboard-mode-buttons {
    order: 1 !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    order: 2 !important;
  }

  .header-utility-bar .dashboard-mode-button,
  .header-utility-bar .build-chip,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    font-weight: 400 !important;
  }

  .header-utility-bar .dashboard-mode-button.is-selected {
    font-weight: 500 !important;
  }
}

@media (max-width: 760px) {
  .app-header.header-with-nav .brand-block .app-build-line {
    display: inline-flex !important;
  }
}

/* P10DU header micro-polish: larger/lighter nav, cleaner identity badge, aligned utilities. */
@media (min-width: 761px) {
  .app-header.header-with-nav .brand-block .app-build-line {
    align-items: center !important;
    gap: 0 !important;
    margin-top: 0.14rem !important;
  }

  .app-header.header-with-nav .brand-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .app-header.header-with-nav .app-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .app-header.header-with-nav .brand-block .build-label {
    display: none !important;
  }

  .app-header.header-with-nav .brand-block #appVersionDisplay.build-chip {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(235, 242, 248, 0.58) !important;
    font-size: 0.62rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    min-height: 1.28rem !important;
    padding: 0.2rem 0.42rem !important;
  }

  .header-with-nav .app-nav,
  .app-nav {
    gap: clamp(1rem, 1.55vw, 1.45rem) !important;
  }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    min-height: 2.05rem !important;
    padding: 0.32rem 0.08rem 0.46rem !important;
  }

  .header-with-nav .app-nav-button.is-selected,
  .app-nav-button.is-selected {
    font-weight: 500 !important;
  }

  .header-with-nav .app-nav-button:hover,
  .app-nav-button:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
  }

  .header-utility-bar {
    align-items: center !important;
    gap: 0.44rem !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    line-height: 1 !important;
  }

  .header-utility-bar .header-mode-buttons.dashboard-mode-buttons,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    align-items: center !important;
    display: inline-flex !important;
    min-height: 1.86rem !important;
  }

  .header-utility-bar .dashboard-mode-button {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.69rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    min-height: 1.48rem !important;
  }

  .header-utility-bar .dashboard-mode-button.is-selected {
    font-weight: 500 !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    background: rgba(255, 255, 255, 0.065) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(238, 245, 250, 0.72) !important;
    font-size: 0.67rem !important;
    font-weight: 400 !important;
    padding: 0.22rem 0.52rem !important;
  }

  .header-utility-bar #pwaUpdateMessage {
    line-height: 1 !important;
  }
}

/* P10DU final header typography pass: confident light nav with a calmer utility rhythm. */
@media (min-width: 761px) {
  .header-with-nav .app-nav,
  .app-nav {
    gap: clamp(1.12rem, 1.7vw, 1.58rem) !important;
  }

  .header-with-nav .app-nav-button,
  .app-nav-button {
    font-size: 0.94rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.08 !important;
    min-height: 2.12rem !important;
    padding: 0.34rem 0.1rem 0.48rem !important;
  }

  .header-with-nav .app-nav-button.is-selected,
  .app-nav-button.is-selected {
    font-weight: 500 !important;
  }

  .header-with-nav .app-nav-button:hover,
  .app-nav-button:hover {
    color: rgba(255, 255, 255, 0.91) !important;
    opacity: 1 !important;
    transform: translateY(-0.5px) !important;
  }

  .header-with-nav .app-nav-button.is-selected::after,
  .app-nav-button.is-selected::after {
    bottom: 0.1rem !important;
    height: 2px !important;
    opacity: 0.88 !important;
  }

  .header-utility-bar {
    align-items: center !important;
    gap: 0.48rem !important;
  }

  .header-utility-bar .header-mode-buttons.dashboard-mode-buttons,
  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    min-height: 1.82rem !important;
  }

  .header-utility-bar .dashboard-mode-button {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    min-height: 1.44rem !important;
    padding: 0.18rem 0.5rem !important;
  }

  .header-utility-bar .dashboard-mode-button.is-selected {
    font-weight: 500 !important;
  }

  .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    font-size: 0.66rem !important;
    font-weight: 400 !important;
    min-height: 1.82rem !important;
    padding: 0.22rem 0.54rem !important;
  }
}

/* P10DU explicit primary-nav typography override: target only the centered workspace navigation. */
@media (min-width: 761px) {
  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] {
    gap: clamp(1.28rem, 1.9vw, 1.75rem) !important;
  }

  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.setup-nav-button),
  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.setup-nav-button):not(.is-selected),
  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.setup-nav-button)[type="button"] {
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 1.12rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.18 !important;
    min-height: 2.35rem !important;
    padding: 0.35rem 0.1rem 0.56rem !important;
    text-transform: none !important;
  }

  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:not(.setup-nav-button),
  header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:not(.setup-nav-button)[type="button"] {
    font-size: 1.12rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.18 !important;
  }
}

/* P10DU Basic / Advanced visibility foundation: same data, different exposure depth. */
body.is-basic-mode .organize-inspector-toggle,
body.is-basic-mode .organize-inspector-card,
body.is-basic-mode .app-nav-button[data-screen="advanced"],
body.is-basic-mode .organize-source-pools,
body.is-basic-mode .organize-schedule-selector,
body.is-basic-mode .organize-schedule-eligible-toggle,
body.is-basic-mode .organize-item-view-toggle,
body.is-basic-mode .organize-default-schedule-controls,
body.is-basic-mode .organize-custom-schedule-note,
body.is-basic-mode .organize-custom-source-list,
body.is-basic-mode .organize-custom-source-actions {
  display: none !important;
}

body.is-basic-mode .organize-workspace-shell:not([hidden]),
body.is-basic-mode .organize-workspace-shell.is-basic-organize {
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr) !important;
}

body.is-basic-mode .organize-workspace-content,
body.is-basic-mode .organize-workspace-shell.is-basic-organize .organize-workspace-content {
  grid-template-columns: minmax(14rem, 0.36fr) minmax(0, 1fr) !important;
}

body.is-basic-mode .organize-workspace-shell.is-basic-organize .organize-context-card {
  min-height: 0 !important;
}

body.is-basic-mode .organize-context-header {
  align-items: flex-start !important;
  gap: 0.8rem !important;
}

body.is-basic-mode .organize-context-actions {
  justify-content: flex-end !important;
}

body.is-basic-mode .organize-item-controls {
  align-items: center !important;
  display: flex !important;
  gap: 0.45rem !important;
  justify-content: space-between !important;
}

body.is-basic-mode .organize-item-filter-bar {
  gap: 0.38rem !important;
}

body.is-basic-mode .organize-item-sort-control {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(108, 128, 148, 0.14) !important;
  flex: 0 0 auto !important;
  padding: 0.25rem 0.42rem !important;
}

body.is-basic-mode .organize-item-sort-control span {
  font-size: 0.66rem !important;
  font-weight: 500 !important;
}

body.is-basic-mode .organize-item-sort-control select {
  font-size: 0.72rem !important;
  min-height: 1.72rem !important;
  padding: 0.16rem 0.48rem !important;
}

body.is-basic-mode .organize-item-workspace.is-basic-list {
  gap: 0.3rem !important;
}

body.is-basic-mode .organize-item-workspace.is-basic-list .organize-item-list-header,
body.is-basic-mode .organize-item-workspace.is-basic-list .organize-item-workspace-card {
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 0.2fr) !important;
}

body.is-basic-mode .organize-item-workspace.is-basic-list .organize-item-list-header span:nth-child(n + 3),
body.is-basic-mode .organize-item-workspace.is-basic-list .organize-item-workspace-card > span:nth-child(n + 3) {
  display: none !important;
}

body.is-basic-mode .organize-item-list-status {
  border-radius: 999px;
  background: rgba(234, 247, 241, 0.86);
  color: #426c5b;
  font-size: 0.72rem;
  font-weight: 500;
  justify-self: end;
  padding: 0.18rem 0.46rem;
  white-space: nowrap;
}

body.is-basic-mode .organize-basic-goal-summary {
  border: 1px solid rgba(105, 133, 147, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(251, 253, 251, 0.96), rgba(238, 247, 243, 0.86));
  box-shadow: 0 14px 30px rgba(40, 56, 72, 0.08);
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

body.is-basic-mode .organize-basic-goal-header {
  display: grid;
  gap: 0.22rem;
}

body.is-basic-mode .organize-basic-goal-header span {
  color: #6f7f92;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.is-basic-mode .organize-basic-goal-header strong {
  color: #203047;
  font-size: clamp(1.25rem, 1.9vw, 1.72rem);
  font-weight: 560;
  line-height: 1.12;
}

body.is-basic-mode .organize-basic-goal-header p,
body.is-basic-mode .organize-basic-linked-items p,
body.is-basic-mode .organize-basic-linked-items small {
  color: #65758a;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

body.is-basic-mode .organize-basic-linked-items {
  display: grid;
  gap: 0.42rem;
}

body.is-basic-mode .organize-basic-linked-items > strong {
  color: #4c5f75;
  font-size: 0.78rem;
  font-weight: 560;
}

body.is-basic-mode .organize-basic-linked-scroll {
  border: 1px solid rgba(108, 128, 148, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.44);
  display: grid;
  gap: 0.56rem;
  max-height: clamp(13rem, 37vh, 20rem);
  overflow-y: auto;
  padding: 0.56rem 0.56rem 1.45rem;
  scroll-padding-block-end: 1.6rem;
  scrollbar-width: thin;
}

body.is-basic-mode .organize-basic-linked-item {
  appearance: none;
  align-content: center;
  border: 1px solid rgba(108, 128, 148, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #26364d;
  cursor: pointer;
  display: grid;
  gap: 0.22rem;
  min-height: 3.55rem;
  overflow: visible;
  padding: 0.72rem 0.76rem;
  text-align: left;
}

body.is-basic-mode .organize-basic-linked-item:hover {
  border-color: rgba(75, 122, 145, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

body.is-basic-mode .organize-basic-linked-item span {
  display: block;
  font-size: 0.88rem;
  font-weight: 540;
  line-height: 1.24;
  overflow: visible;
}

body.is-basic-mode .organize-basic-linked-item em {
  color: #708094;
  display: block;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.34;
  overflow: visible;
}

body.is-basic-mode .organize-goal-sort-control {
  align-items: center;
  border: 1px solid rgba(108, 128, 148, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  padding: 0.42rem 0.5rem;
}

body.is-basic-mode .organize-goal-sort-control span {
  color: #6b7789;
  font-size: 0.68rem;
  font-weight: 500;
}

body.is-basic-mode .organize-goal-sort-control select {
  border: 1px solid rgba(108, 128, 148, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #35465d;
  font: inherit;
  font-size: 0.72rem;
  min-height: 1.7rem;
  padding: 0.18rem 0.5rem;
}

body.is-basic-mode .organize-goal-list-card {
  position: relative;
}

body.is-basic-mode .organize-goal-list-card.is-selected {
  background: linear-gradient(135deg, rgba(240, 249, 247, 0.96), rgba(255, 255, 255, 0.84)) !important;
  border-color: rgba(52, 113, 132, 0.42) !important;
  box-shadow: inset 3px 0 0 rgba(49, 126, 135, 0.42), 0 10px 24px rgba(40, 63, 82, 0.1) !important;
  transform: translateY(-1px);
}

body.is-basic-mode .organize-goal-list-action {
  align-self: start;
  border: 1px solid rgba(80, 119, 141, 0.16);
  border-radius: 999px;
  background: rgba(245, 251, 250, 0.92);
  color: #3e6070;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 520;
  justify-content: center;
  margin-top: 0.28rem;
  max-width: max-content;
  padding: 0.18rem 0.5rem;
}

body.is-basic-mode .organize-basic-edit-action {
  appearance: none;
  border: 1px solid rgba(78, 121, 143, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #375d6d;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 520;
  justify-self: start;
  margin-top: 0.28rem;
  min-height: 1.9rem;
  padding: 0.24rem 0.62rem;
}

body.is-basic-mode .organize-basic-edit-action:hover,
body.is-basic-mode .organize-goal-list-action:hover {
  border-color: rgba(78, 121, 143, 0.28);
  background: rgba(255, 255, 255, 0.96);
}

body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item .organize-schedule-item-content {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

body:has(.organize-workspace-shell:not([hidden])) .organize-schedule-item .organize-schedule-item-content:hover {
  border-color: rgba(77, 121, 145, 0.2);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 14px rgba(54, 76, 94, 0.08);
}

.modal-card .modal-footer-actions,
.modal-card .button-row.modal-footer-actions,
.modal-card form > .button-row:last-child {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.modal-card .modal-footer-actions button,
.modal-card form > .button-row:last-child button {
  min-width: 7.25rem;
}

.modal-card .modal-footer-actions .secondary-button,
.modal-card form > .button-row:last-child .secondary-button {
  order: 1;
}

.modal-card .modal-footer-actions button:not(.secondary-button),
.modal-card form > .button-row:last-child button:not(.secondary-button) {
  order: 2;
}

body.is-basic-mode .organize-schedules-workspace,
body.is-basic-mode .organize-schedule-board,
body.is-basic-mode .organize-schedules-workspace.is-eligible-hidden .organize-schedule-board {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.is-basic-mode .organize-schedule-surface {
  padding: 0.85rem !important;
}

body.is-basic-mode .organize-today-schedule {
  min-height: 0 !important;
}

body.is-basic-mode .organize-schedule-lane-actions .organize-schedule-lane-control,
body.is-basic-mode .organize-schedule-lane-actions select,
body.is-basic-mode .organize-schedule-lane-actions input {
  display: none !important;
}

body.is-basic-mode .organize-schedule-column-header span {
  text-transform: none !important;
}

body.is-basic-mode .advanced-only,
body.is-basic-mode [data-advanced-only="true"] {
  display: none !important;
}

/* P10DU Advanced tools: modular Tuner + Player from Tom's first code drop. */
.advanced-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 232, 226, 0.5), transparent 34%),
    linear-gradient(135deg, rgba(247, 250, 248, 0.98), rgba(238, 244, 242, 0.9));
}

.advanced-tools-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
}

.advanced-tool-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(91, 116, 125, 0.16);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(36, 50, 58, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  min-height: 18rem;
  padding: 1rem;
}

.advanced-tool-card .tool-card-header h3 {
  color: #18263a;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.advanced-tool-card .tool-card-note,
.advanced-tool-card .eyebrow {
  color: #657486;
  font-weight: 400;
}

.advanced-tool-badge {
  border: 1px solid rgba(58, 115, 126, 0.16);
  border-radius: 999px;
  background: rgba(232, 244, 242, 0.86);
  color: #3b6d72;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.22rem 0.55rem;
}

.advanced-tool-actions {
  align-items: center;
}

.advanced-tool-card:not(.is-tool-open) .tool-card-note {
  margin-bottom: 0;
}

.advanced-tool-card:not(.is-tool-open) :is([data-zp], audio, .zonetune-instrument-row, .zonetune-strings-wrapper, .zonetune-display, .zonetune-meter, .zonetune-status, #zoneTuneStartButton) {
  display: none !important;
}

.advanced-tool-card.is-tool-open {
  min-height: 22rem;
}

.zoneplayer-card .tool-card-note {
  margin-bottom: 0.1rem;
}

.zoneplayer-card .zoneplayer-canvas-wrap {
  background: #20313c;
  border-radius: 12px;
  min-height: 8.5rem;
}

.zoneplayer-card .zoneplayer-transport button,
.zoneplayer-card .zoneplayer-add-btn,
.zonetune-card-shell .secondary-button,
.zonetune-card-shell .zonetune-global-btn,
.zonetune-card-shell .zonetune-str-adj-btn,
.zonetune-card-shell .zonetune-string-btn {
  border-radius: 999px;
  font-weight: 500;
}

.zoneplayer-card .zoneplayer-transport button,
.zoneplayer-card .zoneplayer-add-btn {
  background: rgba(31, 49, 60, 0.92);
  border-color: rgba(31, 49, 60, 0.2);
}

.zoneplayer-card .zoneplayer-playlist {
  background: rgba(245, 249, 248, 0.72);
  border: 1px solid rgba(91, 116, 125, 0.12);
  border-radius: 12px;
  max-height: 10rem;
  padding: 0.35rem;
}

.zoneplayer-card .zoneplayer-playlist-row {
  color: #27384a;
}

.zoneplayer-card .zoneplayer-playlist-row:hover {
  background: rgba(224, 238, 235, 0.72);
}

.zoneplayer-card .zoneplayer-playlist-row.zp-playing {
  background: rgba(213, 232, 236, 0.9);
  border-color: rgba(56, 116, 132, 0.22);
  color: #17384a;
}

.zoneplayer-card .zoneplayer-empty-playlist,
.zoneplayer-card .zoneplayer-track-count,
.zoneplayer-card .zoneplayer-time,
.zoneplayer-card .zoneplayer-volume-row {
  color: #657486;
}

.zonetune-card-shell {
  background:
    linear-gradient(135deg, rgba(250, 247, 238, 0.9), rgba(255, 255, 255, 0.84)),
    rgba(255, 255, 255, 0.88);
}

.zonetune-card-shell .zonetune-note,
.zonetune-card-shell .zonetune-cents-readout {
  color: #1c2a3b;
  font-weight: 500;
}

.zonetune-card-shell .zonetune-display {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(91, 116, 125, 0.12);
  border-radius: 14px;
  padding: 0.75rem;
}

.zonetune-card-shell .zonetune-status,
.zonetune-card-shell .zonetune-freq,
.zonetune-card-shell .zonetune-meter-labels {
  color: #657486;
}

@media (max-width: 920px) {
  .advanced-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* P10DU modal structure: fixed header/footer with a dedicated scroll body. */
@media (min-width: 761px) {
  .modal-backdrop:not([hidden]) .modal-card {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(92vh, 900px) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .modal-card > .modal-header {
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(250, 252, 255, 0.96)) !important;
    border-bottom: 1px solid rgba(111, 127, 146, 0.13) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 1.05rem 1.2rem 0.92rem !important;
  }

  .modal-card > .record-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .modal-card .modal-scroll-body {
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 1.05rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 1.05rem 1.2rem 1.35rem !important;
    scrollbar-width: thin;
  }

  .modal-card > .modal-scroll-body {
    flex: 1 1 auto !important;
  }

  .modal-card .modal-scroll-body > :last-child {
    margin-bottom: 0.35rem !important;
  }

  .modal-card .modal-footer-actions,
  .modal-card .button-row.modal-footer-actions,
  .modal-card form > .button-row:last-child {
    background: linear-gradient(180deg, #fbfcff 0%, #fffefb 100%) !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(111, 127, 146, 0.16) !important;
    box-shadow: 0 -10px 24px rgba(38, 51, 68, 0.06) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.82rem 1.2rem 0.95rem !important;
    position: static !important;
  }

  .restore-confirm-card .restore-confirm-body.modal-scroll-body,
  .guidance-modal-card .guidance-modal-body {
    max-height: min(58vh, 32rem);
  }

  body.is-basic-mode .organize-basic-linked-scroll {
    max-height: clamp(13rem, 37vh, 20rem) !important;
    padding: 0.62rem 0.62rem 1.75rem !important;
    scroll-padding-block-end: 1.9rem !important;
  }

  body.is-basic-mode .organize-basic-linked-scroll::after {
    content: "";
    display: block;
    min-height: 0.9rem;
  }
}

/* P10DV final cascade lock: make the Practice dark experiment win over older dashboard layers. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] {
    background:
      radial-gradient(circle at 78% 8%, rgba(139, 92, 246, 0.18), transparent 30%),
      radial-gradient(circle at 18% 24%, rgba(20, 184, 166, 0.1), transparent 34%),
      linear-gradient(180deg, #060b10 0%, #09131a 48%, #071016 100%) !important;
    color: #eef4f8 !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    max-width: 1480px !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    --practice-dark-panel: rgba(12, 24, 32, 0.74);
    --practice-dark-panel-strong: rgba(15, 29, 39, 0.88);
    --practice-dark-border: rgba(177, 211, 224, 0.11);
    --practice-dark-border-strong: rgba(177, 211, 224, 0.18);
    --practice-dark-text: #f4f7fb;
    --practice-dark-muted: rgba(226, 235, 244, 0.68);
    --practice-purple: #8b5cf6;
    --practice-cyan: #20d5ca;
    --practice-green: #22c55e;
    background:
      radial-gradient(circle at 78% 0%, rgba(139, 92, 246, 0.2), transparent 25%),
      radial-gradient(circle at 10% 18%, rgba(32, 213, 202, 0.09), transparent 30%),
      linear-gradient(145deg, rgba(7, 15, 21, 0.98), rgba(10, 22, 30, 0.97)) !important;
    border: 1px solid rgba(214, 231, 239, 0.12) !important;
    border-radius: 26px !important;
    box-shadow:
      0 32px 80px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    color: var(--practice-dark-text) !important;
    margin-top: 1rem !important;
    overflow: hidden !important;
    padding: clamp(1.1rem, 2.1vw, 1.8rem) !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    color: var(--practice-dark-text) !important;
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle,
  body[data-current-screen="dashboard"] .section-note,
  body[data-current-screen="dashboard"] .record-meta,
  body[data-current-screen="dashboard"] .description {
    color: var(--practice-dark-muted) !important;
    font-weight: 420 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-grid,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen #sessionPanel.practice-grid,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-grid,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard .current-item.hero-current,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen .current-item.hero-current,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .current-item.hero-current {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > .eyebrow,
  body[data-current-screen="dashboard"] .current-item.hero-current > h3,
  body[data-current-screen="dashboard"] .current-item.hero-current > .record-meta,
  body[data-current-screen="dashboard"] .current-item.hero-current > .description {
    margin-inline: clamp(0.9rem, 2vw, 1.5rem) !important;
    max-width: 46rem !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > #currentItemMeta {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > .eyebrow {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(91, 59, 171, 0.58)) !important;
    border: 1px solid rgba(167, 139, 250, 0.22) !important;
    border-radius: 8px !important;
    color: rgba(244, 240, 255, 0.94) !important;
    display: inline-flex !important;
    font-size: 0.72rem !important;
    font-weight: 620 !important;
    grid-row: 1 !important;
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
    padding: 0.28rem 0.58rem !important;
    width: fit-content !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > h3 {
    color: #ffffff !important;
    font-size: clamp(2.1rem, 5vw, 4.2rem) !important;
    font-weight: 560 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.36) !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > .record-meta {
    color: #a970ff !important;
    font-size: clamp(1.1rem, 2.2vw, 1.62rem) !important;
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current > .description {
    color: rgba(245, 249, 252, 0.78) !important;
    font-size: clamp(0.95rem, 1.35vw, 1.08rem) !important;
    line-height: 1.5 !important;
    padding-bottom: clamp(1rem, 2vw, 1.45rem) !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current::before {
    background:
      linear-gradient(90deg, rgba(7, 14, 20, 0.97) 0%, rgba(8, 15, 21, 0.92) 41%, rgba(7, 13, 18, 0.42) 62%, rgba(6, 11, 15, 0.14) 100%),
      radial-gradient(ellipse at 88% 28%, rgba(231, 152, 84, 0.28), transparent 24%),
      radial-gradient(ellipse at 74% 38%, rgba(180, 95, 50, 0.22), transparent 20%),
      linear-gradient(115deg, rgba(20, 40, 50, 0.9), rgba(6, 12, 16, 0.96)) !important;
    border: 1px solid var(--practice-dark-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 42px rgba(0, 0, 0, 0.24) !important;
    content: "" !important;
    height: clamp(18rem, 31vw, 25rem) !important;
    inset: 0 0 auto 0 !important;
    min-height: 0 !important;
    position: absolute !important;
    z-index: 0 !important;
  }

  body[data-current-screen="dashboard"] .current-item.hero-current::after {
    background:
      repeating-linear-gradient(100deg, transparent 0 1.05rem, rgba(238, 183, 127, 0.42) 1.08rem 1.13rem, transparent 1.16rem 2.1rem),
      linear-gradient(105deg, transparent 0%, rgba(221, 148, 83, 0.16) 56%, rgba(255, 203, 145, 0.36) 72%, transparent 92%) !important;
    border-radius: 18px !important;
    content: "" !important;
    height: clamp(18rem, 31vw, 25rem) !important;
    min-height: 0 !important;
    opacity: 0.78 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: min(48%, 38rem) !important;
    z-index: 0 !important;
  }

  body[data-current-screen="dashboard"] .hero-actions {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 0.8rem !important;
    grid-column: 1 !important;
    grid-row: 5 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
    margin: 0 !important;
    max-width: none !important;
    order: 6 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard .current-item.hero-current .hero-actions button,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .current-item.hero-current .hero-actions button,
  body[data-current-screen="dashboard"] .current-item.hero-current .button-row.hero-actions button,
  body[data-current-screen="dashboard"] .current-item.hero-current .hero-actions button,
  body[data-current-screen="dashboard"] .hero-actions button {
    border: 1px solid var(--practice-dark-border) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(21, 35, 45, 0.92), rgba(11, 22, 30, 0.92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 26px rgba(0, 0, 0, 0.18) !important;
    color: rgba(244, 248, 252, 0.93) !important;
    display: inline-flex !important;
    font-size: clamp(0.95rem, 1.15vw, 1.08rem) !important;
    font-weight: 560 !important;
    justify-content: center !important;
    min-height: 4.9rem !important;
    padding: 0.86rem 1rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #startItemButton {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    border-color: rgba(74, 222, 128, 0.32) !important;
    color: #f2fff6 !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard, .current-item-notes-box, .current-item-reminder-box, .quick-record-panel, .current-item-references-box, .queue-panel.main-queue-panel, .dashboard-tool-launcher, .dashboard-tool-card, .runtime-defaults-prompt, .runtime-default-action-prompt) {
    background:
      radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.08), transparent 34%),
      linear-gradient(145deg, var(--practice-dark-panel-strong), rgba(11, 22, 30, 0.82)) !important;
    border: 1px solid var(--practice-dark-border) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 34px rgba(0, 0, 0, 0.18) !important;
    color: var(--practice-dark-text) !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard, .current-item-notes-box, .current-item-reminder-box, .quick-record-panel, .current-item-references-box, .queue-panel.main-queue-panel) {
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .timing-support-row {
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    order: 8 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard,
  body[data-current-screen="dashboard"] #p03iMetronomeCard {
    min-height: 12rem !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard, .quick-record-panel, .current-item-notes-box, .current-item-reminder-box, .dashboard-tool-launcher, .dashboard-tool-card, .queue-panel.main-queue-panel) button,
  body[data-current-screen="dashboard"] .mode-tool-strip button,
  body[data-current-screen="dashboard"] .timer-preset,
  body[data-current-screen="dashboard"] .p03i-tool-button,
  body[data-current-screen="dashboard"] .p05w-bpm-step {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(226, 235, 244, 0.11) !important;
    border-radius: 999px !important;
    color: rgba(244, 248, 252, 0.92) !important;
    box-shadow: none !important;
  }

  body[data-current-screen="dashboard"] :is(input, select, textarea) {
    background: rgba(5, 14, 20, 0.72) !important;
    border: 1px solid rgba(226, 235, 244, 0.14) !important;
    color: rgba(246, 249, 252, 0.94) !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel {
    grid-column: 1 !important;
    grid-row: 7 !important;
    order: 9 !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle {
    background: transparent !important;
    border: 0 !important;
    color: rgba(244, 248, 252, 0.88) !important;
    font-size: 0.88rem !important;
    font-weight: 520 !important;
    min-height: 2.6rem !important;
    padding-inline: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle::after {
    color: rgba(244, 248, 252, 0.72) !important;
    content: "›" !important;
    font-size: 1.8rem !important;
    line-height: 0.6 !important;
    margin-left: 0.45rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 5rem !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed .queue-heading {
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed .queue-title-row {
    display: flex !important;
    justify-content: center !important;
  }

  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed h3,
  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed .queue-progress-pill,
  body[data-current-screen="dashboard"] .main-queue-panel.is-desktop-queue-collapsed .queue-progress-track {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .queue-item.compact-queue-item {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(226, 235, 244, 0.09) !important;
    border-radius: 12px !important;
    color: rgba(244, 248, 252, 0.9) !important;
  }

  body[data-current-screen="dashboard"] .queue-item.compact-queue-item.is-current {
    border-color: rgba(139, 92, 246, 0.52) !important;
    box-shadow: inset 3px 0 0 var(--practice-purple) !important;
  }

  body[data-current-screen="dashboard"] .quick-record-elapsed {
    color: #f3f7fb !important;
    font-size: 1.55rem !important;
    font-weight: 420 !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill {
    align-self: start !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(226, 235, 244, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(244, 248, 252, 0.68) !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: clamp(1rem, 2vw, 1.5rem) clamp(0.9rem, 2vw, 1.5rem) 0 0 !important;
    padding: 0.22rem 0.55rem !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body[data-current-screen="dashboard"] .desktop-timing-tools-row {
    grid-column: 1 !important;
    grid-row: 6 !important;
    order: 8 !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel {
    grid-column: 1 !important;
    grid-row: 8 !important;
    order: 10 !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox {
    grid-column: 1 !important;
    grid-row: 9 !important;
    order: 11 !important;
  }

  body[data-current-screen="dashboard"] #currentItemReminderBox {
    grid-column: 1 !important;
    grid-row: 10 !important;
    order: 12 !important;
  }

  body[data-current-screen="dashboard"] .practice-side.tool-stack {
    background:
      radial-gradient(circle at 16% 0%, rgba(32, 213, 202, 0.09), transparent 34%),
      linear-gradient(145deg, rgba(15, 29, 39, 0.86), rgba(8, 18, 26, 0.86)) !important;
    border: 1px solid var(--practice-dark-border) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 34px rgba(0, 0, 0, 0.16) !important;
    color: var(--practice-dark-text) !important;
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-side.tool-stack .tool-stack-card {
    min-height: 9rem !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .dashboard-tool-card:not(.is-open) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .dashboard-start-empty {
    background:
      radial-gradient(circle at 80% 10%, rgba(139, 92, 246, 0.16), transparent 26%),
      linear-gradient(145deg, rgba(12, 24, 32, 0.9), rgba(7, 15, 21, 0.92)) !important;
    border: 1px solid var(--practice-dark-border) !important;
    border-radius: 18px !important;
    color: var(--practice-dark-text) !important;
    min-height: 20rem !important;
  }

  body[data-current-screen="dashboard"] .help-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(244, 248, 252, 0.78) !important;
  }

  body[data-current-screen="dashboard"] [hidden] {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  body[data-current-screen="dashboard"] .hero-actions,
  body[data-current-screen="dashboard"] .timing-support-row,
  body[data-current-screen="dashboard"] .practice-side.tool-stack {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (min-width: 761px) {
  body[data-dashboard-mode="flow"] .practice-dashboard #sessionPanel.practice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .current-item.hero-current {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .current-item.hero-current > :is(.eyebrow, h3, .description) {
    flex: 0 0 auto !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .current-item.hero-current .hero-actions {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .current-item.hero-current .hero-actions button {
    height: 4.9rem !important;
    max-height: none !important;
    min-height: 4.9rem !important;
    min-block-size: 4.9rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .current-item.hero-current .button-row.hero-actions > button {
    height: 4.9rem !important;
    max-height: none !important;
    min-height: 4.9rem !important;
    min-block-size: 4.9rem !important;
  }

  body[data-dashboard-mode="flow"] .practice-dashboard .desktop-timing-tools-row,
  body[data-dashboard-mode="flow"] .practice-dashboard .main-queue-panel,
  body[data-dashboard-mode="flow"] .practice-dashboard #quickRecordPanel,
  body[data-dashboard-mode="flow"] .practice-dashboard #currentItemNotesBox,
  body[data-dashboard-mode="flow"] .practice-dashboard #currentItemReminderBox {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P10DW structural Practice player pass. Scoped to the Practice screen only. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    --practice-stage: #061018;
    --practice-stage-2: #0a1822;
    --practice-card: rgba(13, 28, 39, 0.86);
    --practice-card-strong: rgba(16, 34, 46, 0.9);
    --practice-line: rgba(198, 218, 235, 0.13);
    --practice-line-strong: rgba(198, 218, 235, 0.2);
    --practice-text: #f4f7fb;
    --practice-muted: rgba(231, 238, 246, 0.72);
    --practice-soft: rgba(231, 238, 246, 0.54);
    --practice-purple: #8b5cf6;
    --practice-cyan: #22d3c7;
    --practice-green: #22c55e;
    background:
      radial-gradient(circle at 78% 2%, rgba(139, 92, 246, 0.13), transparent 32%),
      radial-gradient(circle at 12% 18%, rgba(34, 211, 199, 0.11), transparent 30%),
      linear-gradient(155deg, #08131d 0%, #07121a 45%, #050c12 100%) !important;
    border: 1px solid rgba(205, 222, 238, 0.12) !important;
    border-radius: 24px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 24px 70px rgba(0, 0, 0, 0.34) !important;
    color: var(--practice-text) !important;
    padding: clamp(1.1rem, 2vw, 1.75rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    align-items: center !important;
    border: 0 !important;
    margin-bottom: 1.25rem !important;
    padding: 0 0.15rem !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    color: var(--practice-text) !important;
    font-size: clamp(1.55rem, 2.1vw, 2rem) !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    color: var(--practice-muted) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    align-items: stretch !important;
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card {
    align-items: end !important;
    background:
      linear-gradient(90deg, rgba(5, 12, 18, 0.95) 0%, rgba(7, 17, 24, 0.9) 42%, rgba(7, 17, 24, 0.34) 62%, rgba(4, 10, 15, 0.7) 100%),
      radial-gradient(circle at 82% 44%, rgba(180, 99, 42, 0.45), transparent 18%),
      linear-gradient(112deg, rgba(20, 45, 57, 0.78), rgba(8, 16, 24, 0.82)) !important;
    border: 1px solid var(--practice-line) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 20px 54px rgba(0, 0, 0, 0.22) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.62fr) minmax(16rem, 0.38fr) !important;
    min-height: clamp(21rem, 31vw, 28rem) !important;
    overflow: hidden !important;
    padding: clamp(1.35rem, 3vw, 2.35rem) !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    background:
      linear-gradient(18deg, transparent 41%, rgba(230, 185, 132, 0.58) 42%, transparent 43%),
      linear-gradient(17deg, transparent 49%, rgba(230, 185, 132, 0.46) 50%, transparent 51%),
      linear-gradient(16deg, transparent 57%, rgba(230, 185, 132, 0.35) 58%, transparent 59%),
      radial-gradient(ellipse at 88% 47%, rgba(236, 162, 95, 0.28), transparent 22%);
    content: "";
    inset: -9% -8% 0 44%;
    opacity: 0.74;
    pointer-events: none;
    position: absolute;
    transform: rotate(-4deg);
    z-index: 1;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background: radial-gradient(circle at 75% 48%, rgba(255, 188, 117, 0.22), transparent 18%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    align-self: end !important;
    display: grid !important;
    gap: 0.72rem !important;
    max-width: 46rem !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    align-self: start !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(99, 102, 241, 0.52)) !important;
    border: 1px solid rgba(196, 181, 253, 0.18) !important;
    border-radius: 8px !important;
    color: #f6f1ff !important;
    font-size: 0.76rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    padding: 0.48rem 0.66rem !important;
    text-transform: uppercase !important;
    width: fit-content !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    color: #ffffff !important;
    font-size: clamp(2.25rem, 5vw, 4.45rem) !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    max-width: 15ch !important;
    text-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card #currentItemMeta {
    color: #a78bfa !important;
    font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(244, 248, 252, 0.84) !important;
    font-size: 1.04rem !important;
    line-height: 1.55 !important;
    max-width: 45rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    align-self: start !important;
    background: rgba(5, 12, 18, 0.58) !important;
    border: 1px solid rgba(226, 235, 244, 0.16) !important;
    border-radius: 999px !important;
    color: rgba(244, 248, 252, 0.72) !important;
    font-size: 0.78rem !important;
    font-weight: 450 !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0.38rem 0.68rem !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1.1fr repeat(3, 1fr) !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    align-items: center !important;
    background: linear-gradient(145deg, rgba(19, 38, 51, 0.88), rgba(10, 23, 33, 0.88)) !important;
    border: 1px solid var(--practice-line) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 32px rgba(0, 0, 0, 0.15) !important;
    color: rgba(246, 249, 252, 0.9) !important;
    display: flex !important;
    font-size: 1.04rem !important;
    font-weight: 500 !important;
    gap: 0.55rem !important;
    justify-content: center !important;
    min-height: 5.6rem !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #startItemButton {
    background: linear-gradient(145deg, rgba(22, 163, 74, 0.95), rgba(21, 128, 61, 0.95)) !important;
    border-color: rgba(134, 239, 172, 0.22) !important;
    color: #f5fff8 !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button:disabled {
    cursor: not-allowed !important;
    opacity: 0.52 !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel,
  body[data-current-screen="dashboard"] .practice-tool-card {
    background:
      radial-gradient(circle at 0% 0%, rgba(34, 211, 199, 0.06), transparent 38%),
      linear-gradient(145deg, rgba(15, 31, 43, 0.84), rgba(9, 20, 30, 0.9)) !important;
    border: 1px solid var(--practice-line) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 16px 36px rgba(0, 0, 0, 0.14) !important;
    color: var(--practice-text) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel {
    display: grid !important;
    gap: 0.9rem !important;
    margin: 0 !important;
    min-height: 5.4rem !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel.is-desktop-queue-collapsed {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    padding: 1rem 1.2rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel.is-desktop-queue-collapsed .queue-title-row {
    justify-content: center !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel.is-desktop-queue-collapsed :is(h3, .queue-helper, .queue-progress-pill, .queue-progress-track, #sessionQueue) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle {
    background: transparent !important;
    border: 0 !important;
    color: rgba(246, 249, 252, 0.9) !important;
    font-size: 1.05rem !important;
    font-weight: 480 !important;
    min-height: 2.7rem !important;
    padding: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle::after {
    content: "›" !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
    margin-left: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .session-queue {
    display: grid !important;
    gap: 0.78rem !important;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(226, 235, 244, 0.1) !important;
    border-radius: 13px !important;
    min-height: 7.6rem !important;
    padding: 0.95rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-current {
    border-color: rgba(139, 92, 246, 0.62) !important;
    box-shadow: inset 3px 0 0 var(--practice-purple), 0 14px 30px rgba(0, 0, 0, 0.18) !important;
  }

  body[data-current-screen="dashboard"] .practice-companion-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-notes-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card {
    min-height: 13rem !important;
    padding: 1.05rem !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card :is(h3, h4, summary, .section-label) {
    color: var(--practice-text) !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card :is(p, small, .section-note, .record-meta, .hint, .reference-list) {
    color: var(--practice-muted) !important;
    font-weight: 400 !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel.practice-tool-card {
    display: grid !important;
    gap: 0.85rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel.practice-tool-card > summary {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    list-style: none !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel.practice-tool-card > summary::-webkit-details-marker {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .quick-record-elapsed {
    color: #f7fbff !important;
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    font-weight: 360 !important;
    letter-spacing: 0.01em !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card button,
  body[data-current-screen="dashboard"] .p03i-tool-button,
  body[data-current-screen="dashboard"] .p05w-bpm-step,
  body[data-current-screen="dashboard"] .timer-preset {
    background: rgba(255, 255, 255, 0.065) !important;
    border: 1px solid rgba(226, 235, 244, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(246, 249, 252, 0.9) !important;
    font-weight: 480 !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card textarea,
  body[data-current-screen="dashboard"] .practice-tool-card input,
  body[data-current-screen="dashboard"] .practice-tool-card select {
    background: rgba(4, 11, 17, 0.62) !important;
    border: 1px solid rgba(226, 235, 244, 0.13) !important;
    border-radius: 12px !important;
    color: var(--practice-text) !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card textarea {
    min-height: 8.25rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box.practice-tool-card {
    background:
      radial-gradient(circle at 10% 10%, rgba(34, 211, 199, 0.12), transparent 30%),
      linear-gradient(145deg, rgba(15, 31, 43, 0.84), rgba(9, 20, 30, 0.92)) !important;
  }

  body.is-basic-mode:has(.practice-dashboard:not([hidden])) .practice-notes-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  body[data-current-screen="dashboard"] .practice-focus-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 23rem !important;
  }

  body[data-current-screen="dashboard"] .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-notes-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  body[data-current-screen="dashboard"] .practice-player {
    display: grid !important;
    gap: 0.9rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-tool-card,
  body[data-current-screen="dashboard"] .practice-queue-card {
    border-radius: 16px !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip {
    display: grid !important;
    gap: 0.7rem !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body[data-current-screen="dashboard"] .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-notes-grid {
    display: grid !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
  }
}

/* P10DZ final cascade: wide Practice becomes primary workspace + sidecar tools. */
@media (min-width: 1121px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    align-items: start !important;
    display: grid !important;
    gap: 1rem 1.18rem !important;
    grid-template-areas:
      "focus tools"
      "actions tools"
      "queue tools"
      "notes tools"
      "defaults tools" !important;
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.34fr) !important;
    grid-template-rows: auto auto auto auto 1fr !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-area: focus !important;
    min-height: clamp(22rem, 35vw, 33rem) !important;
    padding: clamp(1.75rem, 3.8vw, 3.35rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip {
    grid-area: actions !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card {
    grid-area: queue !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.08), transparent 28%),
      linear-gradient(180deg, rgba(13, 28, 40, 0.46), rgba(6, 14, 22, 0.14)) !important;
    border: 1px solid rgba(217, 230, 242, 0.075) !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.78rem !important;
    grid-area: tools !important;
    min-height: 100% !important;
    padding: 0.78rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid {
    grid-area: notes !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > #runtimeDefaultsPrompt {
    grid-area: defaults !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.55rem, 5.1vw, 5.2rem) !important;
    font-weight: 490 !important;
    line-height: 1.01 !important;
    max-width: 12.5ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(244, 248, 252, 0.73) !important;
    max-width: 39rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    gap: 0.72rem !important;
    grid-template-columns: minmax(12rem, 1.16fr) repeat(3, minmax(8rem, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card {
    border-radius: 17px !important;
    flex: 0 0 auto !important;
    min-height: 9.6rem !important;
    padding: 0.95rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel {
    min-height: 11.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box {
    min-height: 8.6rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .quick-record-elapsed {
    font-size: clamp(2rem, 2.5vw, 2.6rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.9rem, 2.3vw, 2.35rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-queue-card.is-desktop-queue-open .session-queue {
    grid-auto-columns: minmax(13rem, 0.36fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid {
    display: grid !important;
    gap: 0.9rem !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(16rem, 0.72fr) !important;
  }
}

/* P10EA Practice mockup alignment: left rail navigation + lower companion region. */
@media (min-width: 900px) {
  body[data-current-screen="dashboard"] {
    background:
      radial-gradient(circle at 18% 12%, rgba(34, 211, 199, 0.09), transparent 29rem),
      radial-gradient(circle at 74% 4%, rgba(139, 92, 246, 0.11), transparent 34rem),
      linear-gradient(135deg, #071018 0%, #07131c 48%, #050910 100%) !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    align-items: start !important;
    display: grid !important;
    gap: clamp(1rem, 2vw, 1.8rem) !important;
    grid-template-columns: clamp(11.5rem, 15vw, 14rem) minmax(0, 1fr) !important;
    max-width: min(100vw, 1680px) !important;
    padding: clamp(0.95rem, 1.7vw, 1.35rem) clamp(1rem, 2vw, 1.75rem) clamp(1.4rem, 2.3vw, 2.2rem) !important;
  }

  body[data-current-screen="dashboard"] .app-shell > :not(.app-header) {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav,
  body[data-current-screen="dashboard"] .app-header.compact-brand-header.header-with-nav,
  body[data-current-screen="dashboard"] .app-header.brand-header.header-with-nav {
    align-self: start !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.13), transparent 44%),
      linear-gradient(180deg, rgba(13, 27, 38, 0.74), rgba(6, 13, 20, 0.4)) !important;
    border: 1px solid rgba(218, 232, 244, 0.09) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1rem, 2.2vh, 1.45rem) !important;
    grid-column: 1 !important;
    min-height: calc(100vh - clamp(1.9rem, 3.4vw, 2.7rem)) !important;
    padding: clamp(1rem, 1.8vw, 1.35rem) !important;
    position: sticky !important;
    top: clamp(0.95rem, 1.7vw, 1.35rem) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block {
    display: grid !important;
    gap: 0.28rem !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block h1,
  body[data-current-screen="dashboard"] .app-header.compact-brand-header .brand-block h1 {
    color: rgba(248, 251, 255, 0.96) !important;
    font-size: clamp(1.1rem, 1.5vw, 1.32rem) !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-tagline {
    color: rgba(231, 238, 246, 0.62) !important;
    display: block !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    max-width: 11rem !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-support,
  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block .app-build-line {
    display: none !important;
  }

  body[data-current-screen="dashboard"] header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"],
  body[data-current-screen="dashboard"] .header-with-nav .app-nav,
  body[data-current-screen="dashboard"] .app-nav {
    align-items: stretch !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0.32rem !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button,
  body[data-current-screen="dashboard"] .header-with-nav .app-nav-button,
  body[data-current-screen="dashboard"] .app-nav-button {
    align-items: center !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: rgba(231, 238, 246, 0.62) !important;
    display: flex !important;
    font-size: 0.92rem !important;
    font-weight: 460 !important;
    justify-content: flex-start !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    min-height: 2.55rem !important;
    padding: 0.64rem 0.72rem !important;
    position: relative !important;
    text-align: left !important;
    text-transform: none !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button::after {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .header-with-nav .app-nav-button:hover,
  body[data-current-screen="dashboard"] .app-nav-button:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    color: rgba(248, 251, 255, 0.92) !important;
    transform: none !important;
  }

  body[data-current-screen="dashboard"] header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected,
  body[data-current-screen="dashboard"] .header-with-nav .app-nav-button.is-selected,
  body[data-current-screen="dashboard"] .app-nav-button.is-selected {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(226, 235, 244, 0.11) !important;
    color: #ffffff !important;
    font-weight: 540 !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.6rem !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: auto !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .header-mode-buttons.dashboard-mode-buttons {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(226, 235, 244, 0.1) !important;
    border-radius: 999px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 0.18rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .dashboard-mode-button {
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0.34rem 0.45rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    justify-content: center !important;
    width: 100% !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    background:
      radial-gradient(circle at 74% 0%, rgba(139, 92, 246, 0.12), transparent 30%),
      radial-gradient(circle at 15% 19%, rgba(34, 211, 199, 0.09), transparent 28%),
      linear-gradient(150deg, rgba(8, 19, 28, 0.9), rgba(5, 10, 16, 0.92)) !important;
    border-color: rgba(217, 230, 242, 0.075) !important;
    border-radius: 26px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 26px 80px rgba(0, 0, 0, 0.26) !important;
    padding: clamp(1.15rem, 2vw, 1.85rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    margin-bottom: 1.05rem !important;
    padding-inline: 0.25rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    align-items: stretch !important;
    display: grid !important;
    gap: clamp(0.9rem, 1.45vw, 1.25rem) !important;
    grid-template-areas:
      "focus"
      "actions"
      "queue"
      "tools"
      "notes"
      "defaults" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-area: focus !important;
    min-height: clamp(20rem, 29vw, 27rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip {
    grid-area: actions !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card {
    grid-area: queue !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-self: stretch !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)) !important;
    border: 1px solid rgba(217, 230, 242, 0.06) !important;
    border-radius: 22px !important;
    display: grid !important;
    gap: clamp(0.75rem, 1.25vw, 1rem) !important;
    grid-area: tools !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    padding: clamp(0.7rem, 1.1vw, 0.95rem) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid {
    grid-area: notes !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > #runtimeDefaultsPrompt {
    grid-area: defaults !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box, .compact-countdown-card, .countdown-card).practice-tool-card {
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 199, 0.055), transparent 34%),
      linear-gradient(145deg, rgba(14, 29, 41, 0.68), rgba(8, 18, 27, 0.78)) !important;
    border-color: rgba(217, 230, 242, 0.095) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.038) !important;
    flex: initial !important;
    min-height: clamp(11.5rem, 15vw, 13.8rem) !important;
    padding: clamp(0.9rem, 1.25vw, 1.12rem) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel,
  body[data-current-screen="dashboard"] .practice-tool-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.038) !important;
  }
}

@media (min-width: 1121px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    min-height: clamp(21rem, 31vw, 29rem) !important;
    padding: clamp(1.8rem, 3.5vw, 3.2rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    grid-template-columns: minmax(13rem, 1.18fr) repeat(3, minmax(8rem, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.55rem, 4.35vw, 4.35rem) !important;
    max-width: 14ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    max-width: min(50rem, 64%) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-queue-card.is-desktop-queue-open .session-queue {
    display: grid !important;
    gap: 0.8rem !important;
    grid-auto-columns: minmax(13.5rem, 18rem) !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 0.25rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* P10EB premium musician workspace refinement, aligned to the May 21 mockup. */
@media (min-width: 900px) {
  body[data-current-screen="dashboard"] {
    --p10eb-bg: #050914;
    --p10eb-stage: rgba(8, 12, 26, 0.88);
    --p10eb-surface: rgba(17, 24, 43, 0.68);
    --p10eb-surface-soft: rgba(18, 26, 47, 0.48);
    --p10eb-line: rgba(197, 211, 233, 0.12);
    --p10eb-line-soft: rgba(197, 211, 233, 0.075);
    --p10eb-text: #f7f8ff;
    --p10eb-muted: rgba(232, 237, 250, 0.66);
    --p10eb-soft: rgba(232, 237, 250, 0.46);
    --p10eb-purple: #8b5cf6;
    --p10eb-purple-2: #a855f7;
    --p10eb-cyan: #22d3c7;
    background:
      radial-gradient(circle at 9% 19%, rgba(139, 92, 246, 0.16), transparent 22rem),
      radial-gradient(circle at 68% -8%, rgba(54, 78, 129, 0.20), transparent 34rem),
      linear-gradient(145deg, #060a15 0%, #090d1c 52%, #050812 100%) !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    gap: clamp(1.25rem, 2.35vw, 2.45rem) !important;
    grid-template-columns: clamp(12.8rem, 15.7vw, 15.25rem) minmax(0, 1fr) !important;
    max-width: 1720px !important;
    padding: 0 clamp(1rem, 2vw, 1.85rem) clamp(1rem, 1.8vw, 1.6rem) 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav,
  body[data-current-screen="dashboard"] .app-header.compact-brand-header.header-with-nav,
  body[data-current-screen="dashboard"] .app-header.brand-header.header-with-nav {
    background:
      linear-gradient(180deg, rgba(10, 14, 29, 0.97), rgba(6, 10, 22, 0.92)) !important;
    border-width: 0 1px 0 0 !important;
    border-color: rgba(214, 224, 244, 0.09) !important;
    border-radius: 0 !important;
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.03),
      14px 0 42px rgba(0, 0, 0, 0.18) !important;
    min-height: 100vh !important;
    padding: clamp(1.35rem, 2vw, 2rem) clamp(1.15rem, 1.7vw, 1.55rem) !important;
    top: 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav::before {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), transparent 60%) !important;
    content: "" !important;
    inset: 8rem 0 auto auto !important;
    height: 26rem !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1px !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block {
    gap: 0.46rem !important;
    padding-left: 2.45rem !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block::before {
    align-items: center !important;
    background: linear-gradient(145deg, #8b5cf6, #5b21b6) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.34) !important;
    color: #ffffff !important;
    content: "♪" !important;
    display: flex !important;
    font-size: 1.2rem !important;
    height: 2rem !important;
    justify-content: center !important;
    left: 0 !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 0.05rem !important;
    transform: rotate(-18deg) !important;
    width: 2rem !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block h1 {
    font-size: clamp(1.03rem, 1.18vw, 1.24rem) !important;
    font-weight: 700 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-tagline {
    color: rgba(232, 237, 250, 0.72) !important;
    font-size: 0.83rem !important;
    line-height: 1.45 !important;
  }

  body[data-current-screen="dashboard"] header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"],
  body[data-current-screen="dashboard"] .app-nav {
    gap: 0.62rem !important;
    padding-top: clamp(1.1rem, 2.5vh, 2.1rem) !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button {
    border-radius: 10px !important;
    color: rgba(237, 241, 250, 0.76) !important;
    gap: 0.78rem !important;
    min-height: 3.48rem !important;
    padding: 0.72rem 0.9rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-icon {
    align-items: center !important;
    color: rgba(237, 241, 250, 0.76) !important;
    display: inline-flex !important;
    font-size: 1.35rem !important;
    height: 1.5rem !important;
    justify-content: center !important;
    width: 1.55rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button.is-selected {
    background:
      linear-gradient(135deg, rgba(139, 92, 246, 0.34), rgba(82, 55, 146, 0.32)) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 16px 35px rgba(79, 40, 170, 0.18) !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button.is-selected .p10eb-nav-icon {
    color: #a78bfa !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    border-top: 1px solid rgba(214, 224, 244, 0.12) !important;
    padding-top: 1.35rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .header-mode-buttons.dashboard-mode-buttons {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(214, 224, 244, 0.14) !important;
    border-radius: 14px !important;
    padding: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .dashboard-mode-button {
    border-radius: 10px !important;
    color: rgba(232, 237, 250, 0.68) !important;
    font-size: 0.84rem !important;
    min-height: 2.25rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .dashboard-mode-button.is-selected {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.86), rgba(91, 33, 182, 0.82)) !important;
    color: #fff !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    background: transparent !important;
    border-color: rgba(214, 224, 244, 0.14) !important;
    border-radius: 999px !important;
    color: rgba(232, 237, 250, 0.76) !important;
    min-height: 2.45rem !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card {
    background:
      radial-gradient(circle at 80% 8%, rgba(139, 92, 246, 0.09), transparent 32rem),
      linear-gradient(145deg, rgba(9, 13, 27, 0.7), rgba(6, 10, 21, 0.42)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(1.4rem, 2.25vw, 2.2rem) 0 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    align-items: center !important;
    display: flex !important;
    margin: 0 0 1.35rem !important;
    padding: 0 clamp(0.35rem, 1vw, 0.85rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-header .compact-session-title {
    align-items: baseline !important;
    display: flex !important;
    gap: 0.95rem !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    color: var(--p10eb-text, #f7f8ff) !important;
    font-size: clamp(2.05rem, 2.25vw, 2.55rem) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    color: var(--p10eb-muted, rgba(232, 237, 250, 0.66)) !important;
    font-size: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player {
    gap: clamp(0.9rem, 1.25vw, 1.15rem) !important;
    padding-inline: clamp(0.35rem, 1vw, 0.85rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    align-content: end !important;
    background:
      linear-gradient(90deg, rgba(6, 10, 20, 0.97) 0%, rgba(8, 13, 25, 0.9) 38%, rgba(8, 13, 25, 0.42) 62%, rgba(5, 8, 16, 0.62) 100%),
      radial-gradient(ellipse at 78% 45%, rgba(188, 101, 46, 0.46), transparent 22%),
      linear-gradient(112deg, rgba(13, 39, 45, 0.28), transparent 48%),
      linear-gradient(145deg, #08101d, #050912) !important;
    border: 1px solid rgba(202, 214, 235, 0.14) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 22px 60px rgba(0, 0, 0, 0.26) !important;
    min-height: clamp(20.5rem, 28vw, 24.2rem) !important;
    overflow: hidden !important;
    padding: clamp(1.8rem, 3vw, 2.7rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    background:
      linear-gradient(118deg, transparent 32%, rgba(180, 122, 78, 0.46) 32.3%, transparent 33%),
      linear-gradient(116deg, transparent 39%, rgba(202, 139, 83, 0.39) 39.3%, transparent 40%),
      linear-gradient(114deg, transparent 46%, rgba(232, 168, 99, 0.29) 46.25%, transparent 47%),
      linear-gradient(112deg, transparent 53%, rgba(232, 168, 99, 0.22) 53.2%, transparent 54%),
      radial-gradient(ellipse at 70% 46%, rgba(209, 132, 77, 0.56), transparent 21%),
      linear-gradient(75deg, transparent 24%, rgba(128, 75, 42, 0.42) 30%, rgba(27, 15, 12, 0.18) 48%, transparent 64%) !important;
    inset: -14% -5% -6% 49% !important;
    opacity: 0.9 !important;
    transform: rotate(-3deg) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 18px),
      linear-gradient(180deg, transparent 64%, rgba(3, 6, 13, 0.56) 100%) !important;
    opacity: 0.72 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.62rem !important;
    max-width: min(48rem, 58%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.82), rgba(91, 33, 182, 0.78)) !important;
    border-color: rgba(196, 181, 253, 0.2) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(91, 33, 182, 0.24) !important;
    font-size: 0.73rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.055em !important;
    padding: 0.45rem 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.55rem, 4vw, 4.15rem) !important;
    font-weight: 780 !important;
    line-height: 1.02 !important;
    margin-top: 0.34rem !important;
    max-width: 13ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card #currentItemMeta {
    color: #a78bfa !important;
    font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(243, 246, 255, 0.86) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    max-width: 36rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stats {
    display: grid !important;
    gap: clamp(1.1rem, 2vw, 2rem) !important;
    grid-template-columns: repeat(4, max-content) !important;
    margin-top: clamp(1.25rem, 2.6vw, 2.25rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat {
    align-items: center !important;
    color: rgba(244, 247, 255, 0.9) !important;
    display: inline-flex !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat-icon {
    align-items: center !important;
    border: 1px solid rgba(230, 236, 250, 0.25) !important;
    border-radius: 999px !important;
    color: rgba(232, 237, 250, 0.74) !important;
    display: flex !important;
    height: 1.58rem !important;
    justify-content: center !important;
    width: 1.58rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat small {
    color: rgba(232, 237, 250, 0.58) !important;
    display: block !important;
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat strong {
    display: block !important;
    font-size: 0.98rem !important;
    font-weight: 560 !important;
    line-height: 1.2 !important;
    max-width: 9rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    align-self: end !important;
    background: rgba(5, 8, 16, 0.5) !important;
    border-color: rgba(232, 237, 250, 0.22) !important;
    margin: 0 !important;
    place-self: end !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    gap: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    align-items: center !important;
    background: linear-gradient(145deg, rgba(17, 24, 43, 0.72), rgba(9, 14, 28, 0.74)) !important;
    border: 1px solid rgba(202, 214, 235, 0.13) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    gap: 0.74rem !important;
    justify-content: center !important;
    min-height: 5.35rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #startItemButton {
    background:
      radial-gradient(circle at 18% 20%, rgba(74, 222, 128, 0.18), transparent 36%),
      linear-gradient(145deg, rgba(22, 163, 74, 0.96), rgba(9, 113, 52, 0.96)) !important;
    border-color: rgba(134, 239, 172, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 42px rgba(22, 163, 74, 0.18) !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-icon {
    color: rgba(246, 249, 255, 0.84) !important;
    font-size: 1.25rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy {
    display: grid !important;
    gap: 0.12rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy strong {
    color: rgba(250, 252, 255, 0.96) !important;
    font-size: 1.06rem !important;
    font-weight: 720 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy small {
    color: rgba(232, 237, 250, 0.62) !important;
    font-size: 0.82rem !important;
    font-weight: 440 !important;
  }

  body[data-current-screen="dashboard"] #startItemButton .p10eb-action-copy small {
    color: rgba(239, 253, 244, 0.76) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel {
    background: linear-gradient(145deg, rgba(19, 24, 44, 0.55), rgba(10, 14, 28, 0.42)) !important;
    border-color: rgba(202, 214, 235, 0.11) !important;
    border-radius: 18px !important;
    padding: 1.05rem 1.12rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .queue-title-row {
    grid-template-columns: auto auto minmax(10rem, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-heading h3 {
    color: rgba(248, 250, 255, 0.94) !important;
    font-size: 1.17rem !important;
    font-weight: 740 !important;
  }

  body[data-current-screen="dashboard"] .queue-progress-pill {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(202, 214, 235, 0.13) !important;
    color: rgba(241, 245, 255, 0.78) !important;
  }

  body[data-current-screen="dashboard"] .queue-progress-track {
    background: rgba(255, 255, 255, 0.075) !important;
    height: 4px !important;
  }

  body[data-current-screen="dashboard"] .queue-progress-bar {
    background: linear-gradient(90deg, #8b5cf6, #22d3c7) !important;
  }

  body[data-current-screen="dashboard"] .desktop-queue-toggle {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(202, 214, 235, 0.13) !important;
    color: rgba(245, 248, 255, 0.82) !important;
  }

  body[data-current-screen="dashboard"] .queue-helper {
    color: rgba(232, 237, 250, 0.5) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.is-desktop-queue-open .session-queue {
    gap: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(202, 214, 235, 0.10) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 5.35rem !important;
    padding: 0.88rem 0.96rem !important;
  }

  body[data-current-screen="dashboard"] .queue-status-marker {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(248, 250, 255, 0.9) !important;
    display: inline-flex !important;
    height: 1.08rem !important;
    justify-content: center !important;
    width: 1.08rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-current {
    background: linear-gradient(145deg, rgba(34, 24, 64, 0.72), rgba(14, 18, 35, 0.78)) !important;
    border-color: rgba(139, 92, 246, 0.74) !important;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.18) !important;
  }

  body[data-current-screen="dashboard"] .queue-item-title {
    color: rgba(250, 252, 255, 0.9) !important;
    font-size: 0.9rem !important;
    font-weight: 620 !important;
  }

  body[data-current-screen="dashboard"] .queue-item-type {
    color: rgba(232, 237, 250, 0.5) !important;
    font-size: 0.78rem !important;
    font-weight: 440 !important;
  }

  body[data-current-screen="dashboard"] .queue-start-now-button {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(202, 214, 235, 0.15) !important;
    border-radius: 999px !important;
    color: rgba(248, 250, 255, 0.88) !important;
    font-size: 0.78rem !important;
    min-height: 2rem !important;
    padding: 0.32rem 0.7rem !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    gap: 0.82rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(circle at 12% 0%, rgba(83, 115, 185, 0.08), transparent 38%),
      linear-gradient(145deg, rgba(19, 26, 47, 0.64), rgba(10, 15, 30, 0.74)) !important;
    border-color: rgba(202, 214, 235, 0.105) !important;
    border-radius: 13px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 18px 40px rgba(0, 0, 0, 0.13) !important;
    min-height: 11.3rem !important;
    padding: 1.05rem 1.12rem !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-closed-strip,
  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-open-header {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-title,
  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-summary-main,
  body[data-current-screen="dashboard"] .reference-box-header strong,
  body[data-current-screen="dashboard"] .current-item-notes-header label,
  body[data-current-screen="dashboard"] #currentItemReminderBox summary span:first-child {
    color: rgba(250, 252, 255, 0.94) !important;
    font-size: 1.02rem !important;
    font-weight: 760 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display,
  body[data-current-screen="dashboard"] .quick-record-elapsed {
    color: #ffffff !important;
    font-size: clamp(2.05rem, 2.6vw, 2.7rem) !important;
    font-weight: 640 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets,
  body[data-current-screen="dashboard"] #p03iTimerCard #p03iCountdownMinutes,
  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p03i-metronome-select-grid, .p06d-metro-sound-region, .p06d-metro-pattern-region, .p06d-metro-settings-region, .p05t-pattern-summary) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-action-row,
  body[data-current-screen="dashboard"] .quick-record-primary-row,
  body[data-current-screen="dashboard"] .quick-record-secondary-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card button,
  body[data-current-screen="dashboard"] .p03i-tool-button,
  body[data-current-screen="dashboard"] .p05w-bpm-step {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(202, 214, 235, 0.12) !important;
    border-radius: 9px !important;
    color: rgba(248, 250, 255, 0.88) !important;
    min-height: 2.08rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordStartButton {
    background: linear-gradient(145deg, #dc2626, #9f1239) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fff !important;
  }

  body[data-current-screen="dashboard"] .p05w-bpm-control {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #p03iBpmInput {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 720 !important;
    text-align: center !important;
    width: 3.8rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts {
    display: grid !important;
    gap: 0.65rem !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 1rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts span,
  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts .p10eb-resource-shortcut {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(232, 237, 250, 0.68) !important;
    display: grid !important;
    gap: 0.35rem !important;
    justify-items: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts .p10eb-resource-shortcut {
    cursor: pointer !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts .p10eb-resource-shortcut:hover small {
    color: #fff !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts strong {
    color: #8b5cf6 !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts span:nth-child(1) strong,
  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts .p10eb-resource-shortcut:nth-child(1) strong {
    color: #facc15 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts span:nth-child(2) strong,
  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts .p10eb-resource-shortcut:nth-child(2) strong {
    color: #22d3c7 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-reference-shortcuts small {
    font-size: 0.72rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-notes-grid {
    gap: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-reminder-box.practice-tool-card {
    min-height: 9.6rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-header,
  body[data-current-screen="dashboard"] #currentItemReminderBox summary {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 0.6rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-header span,
  body[data-current-screen="dashboard"] .current-item-reminder-box p,
  body[data-current-screen="dashboard"] .reference-box-header span {
    color: rgba(232, 237, 250, 0.58) !important;
    font-size: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] #currentItemReminderBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] .practice-tool-card textarea {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(202, 214, 235, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    color: rgba(248, 250, 255, 0.92) !important;
    min-height: 4.6rem !important;
    padding: 0.9rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card textarea::placeholder,
  body[data-current-screen="dashboard"] #currentItemReminderBox.practice-tool-card textarea::placeholder {
    color: rgba(232, 237, 250, 0.43) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-focus-stats {
    grid-template-columns: repeat(2, max-content) !important;
  }
}

/* P10EC atmospheric refinement: soften surfaces, mature type, deepen the focus hero. */
@media (min-width: 900px) {
  body[data-current-screen="dashboard"] {
    --p10ec-ink: #f6f7fb;
    --p10ec-muted: rgba(232, 237, 250, 0.62);
    --p10ec-dim: rgba(232, 237, 250, 0.42);
    background:
      radial-gradient(ellipse at 21% 16%, rgba(115, 78, 202, 0.13), transparent 30rem),
      radial-gradient(ellipse at 83% 10%, rgba(41, 72, 121, 0.16), transparent 36rem),
      radial-gradient(ellipse at 68% 66%, rgba(18, 70, 78, 0.08), transparent 34rem),
      linear-gradient(140deg, #050811 0%, #080c19 48%, #050812 100%) !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    gap: clamp(1.05rem, 2vw, 2.15rem) !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav {
    background:
      radial-gradient(ellipse at 22% 16%, rgba(139, 92, 246, 0.095), transparent 15rem),
      linear-gradient(180deg, rgba(9, 13, 28, 0.94), rgba(5, 8, 18, 0.88)) !important;
    border-color: rgba(224, 231, 247, 0.065) !important;
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.025),
      18px 0 54px rgba(0, 0, 0, 0.14) !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block h1 {
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-tagline {
    color: rgba(232, 237, 250, 0.6) !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button {
    color: rgba(238, 242, 250, 0.66) !important;
    font-weight: 520 !important;
    min-height: 3.36rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button.is-selected {
    background:
      radial-gradient(circle at 22% 22%, rgba(168, 85, 247, 0.2), transparent 58%),
      linear-gradient(135deg, rgba(80, 56, 145, 0.35), rgba(39, 28, 74, 0.32)) !important;
    border-color: rgba(181, 160, 246, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    border-color: rgba(224, 231, 247, 0.075) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card {
    background:
      radial-gradient(ellipse at 76% 4%, rgba(139, 92, 246, 0.07), transparent 33rem),
      radial-gradient(ellipse at 32% 48%, rgba(34, 211, 199, 0.035), transparent 28rem),
      linear-gradient(150deg, rgba(8, 12, 25, 0.52), rgba(5, 8, 17, 0.24)) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    margin-bottom: 1.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    font-size: clamp(1.95rem, 2.1vw, 2.38rem) !important;
    font-weight: 690 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    color: var(--p10ec-muted) !important;
    font-size: 0.98rem !important;
    font-weight: 450 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player {
    gap: clamp(0.78rem, 1.05vw, 1.02rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    background:
      linear-gradient(90deg, rgba(5, 8, 17, 0.98) 0%, rgba(7, 11, 22, 0.94) 34%, rgba(9, 13, 25, 0.58) 55%, rgba(5, 8, 16, 0.72) 100%),
      radial-gradient(ellipse at 75% 42%, rgba(192, 113, 58, 0.38), transparent 23%),
      radial-gradient(ellipse at 54% 32%, rgba(139, 92, 246, 0.12), transparent 28%),
      radial-gradient(ellipse at 18% 85%, rgba(34, 211, 199, 0.075), transparent 26%),
      linear-gradient(145deg, #08111d, #050812) !important;
    border-color: rgba(221, 230, 247, 0.095) !important;
    border-radius: 17px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 26px 70px rgba(0, 0, 0, 0.22) !important;
    min-height: clamp(21rem, 28vw, 25.2rem) !important;
    padding: clamp(1.95rem, 3.25vw, 3rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    background:
      linear-gradient(116deg, transparent 31%, rgba(225, 154, 92, 0.32) 31.25%, transparent 31.75%),
      linear-gradient(115deg, transparent 38%, rgba(231, 173, 111, 0.28) 38.2%, transparent 38.72%),
      linear-gradient(114deg, transparent 45%, rgba(231, 173, 111, 0.20) 45.18%, transparent 45.7%),
      linear-gradient(113deg, transparent 52%, rgba(231, 173, 111, 0.14) 52.18%, transparent 52.7%),
      radial-gradient(ellipse at 70% 43%, rgba(214, 127, 68, 0.48), transparent 20%),
      linear-gradient(76deg, transparent 20%, rgba(94, 57, 35, 0.32) 33%, rgba(16, 12, 13, 0.22) 50%, transparent 68%) !important;
    filter: saturate(0.92) blur(0.1px) !important;
    inset: -17% -8% -8% 47% !important;
    opacity: 0.74 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      radial-gradient(ellipse at 76% 44%, rgba(255, 214, 156, 0.08), transparent 20%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 20px),
      linear-gradient(180deg, transparent 60%, rgba(3, 6, 13, 0.58) 100%) !important;
    opacity: 0.78 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.56rem !important;
    max-width: min(44rem, 55%) !important;
    transform: translateY(-0.15rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    background: rgba(111, 73, 196, 0.82) !important;
    border-color: rgba(202, 187, 255, 0.14) !important;
    box-shadow: 0 9px 26px rgba(84, 47, 178, 0.18) !important;
    font-size: 0.69rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.07em !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.35rem, 3.65vw, 3.85rem) !important;
    font-weight: 690 !important;
    letter-spacing: 0 !important;
    line-height: 1.055 !important;
    margin-top: 0.4rem !important;
    text-shadow: 0 18px 45px rgba(0, 0, 0, 0.38) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card #currentItemMeta {
    color: rgba(167, 139, 250, 0.96) !important;
    font-size: clamp(1.02rem, 1.28vw, 1.22rem) !important;
    font-weight: 620 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(241, 245, 255, 0.78) !important;
    font-size: 0.98rem !important;
    line-height: 1.56 !important;
    max-width: 34rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stats {
    gap: clamp(1rem, 1.85vw, 1.75rem) !important;
    margin-top: clamp(1.15rem, 2.35vw, 2rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat-icon {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(232, 237, 250, 0.18) !important;
    color: rgba(232, 237, 250, 0.62) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat small {
    color: rgba(232, 237, 250, 0.46) !important;
    font-size: 0.72rem !important;
    font-weight: 430 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat strong {
    color: rgba(250, 252, 255, 0.88) !important;
    font-size: 0.94rem !important;
    font-weight: 520 !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    background: rgba(7, 10, 19, 0.4) !important;
    border-color: rgba(232, 237, 250, 0.16) !important;
    color: rgba(232, 237, 250, 0.58) !important;
    font-weight: 430 !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button,
  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    border-color: rgba(221, 230, 247, 0.075) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.028),
      0 18px 48px rgba(0, 0, 0, 0.10) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    background: linear-gradient(145deg, rgba(18, 24, 43, 0.55), rgba(8, 12, 24, 0.58)) !important;
    min-height: 5.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #startItemButton {
    background:
      radial-gradient(circle at 18% 20%, rgba(74, 222, 128, 0.14), transparent 38%),
      linear-gradient(145deg, rgba(18, 142, 67, 0.94), rgba(8, 93, 44, 0.94)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.095),
      0 20px 46px rgba(22, 163, 74, 0.13) !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy strong {
    font-size: 1rem !important;
    font-weight: 650 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy small {
    color: rgba(232, 237, 250, 0.5) !important;
    font-size: 0.79rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel {
    background:
      radial-gradient(ellipse at 12% 0%, rgba(139, 92, 246, 0.055), transparent 34%),
      linear-gradient(145deg, rgba(18, 24, 43, 0.43), rgba(9, 13, 27, 0.38)) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-heading h3 {
    font-size: 1.08rem !important;
    font-weight: 650 !important;
  }

  body[data-current-screen="dashboard"] .queue-progress-pill,
  body[data-current-screen="dashboard"] .desktop-queue-toggle,
  body[data-current-screen="dashboard"] .queue-start-now-button {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(221, 230, 247, 0.095) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item {
    background: rgba(255, 255, 255, 0.033) !important;
    border-color: rgba(221, 230, 247, 0.07) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-current {
    background:
      radial-gradient(circle at 4% 50%, rgba(139, 92, 246, 0.17), transparent 38%),
      linear-gradient(145deg, rgba(30, 24, 56, 0.6), rgba(12, 16, 31, 0.56)) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
  }

  body[data-current-screen="dashboard"] .queue-item-title {
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(ellipse at 14% 0%, rgba(107, 126, 181, 0.055), transparent 42%),
      linear-gradient(145deg, rgba(18, 25, 45, 0.48), rgba(9, 14, 28, 0.56)) !important;
    border-radius: 12px !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-title,
  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-summary-main,
  body[data-current-screen="dashboard"] .reference-box-header strong,
  body[data-current-screen="dashboard"] .current-item-notes-header label,
  body[data-current-screen="dashboard"] #currentItemReminderBox summary span:first-child {
    font-size: 0.98rem !important;
    font-weight: 650 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display,
  body[data-current-screen="dashboard"] .quick-record-elapsed {
    font-weight: 520 !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card button,
  body[data-current-screen="dashboard"] .p03i-tool-button,
  body[data-current-screen="dashboard"] .p05w-bpm-step {
    background: rgba(255, 255, 255, 0.052) !important;
    border-color: rgba(221, 230, 247, 0.088) !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-header span,
  body[data-current-screen="dashboard"] .current-item-reminder-box p,
  body[data-current-screen="dashboard"] .reference-box-header span,
  body[data-current-screen="dashboard"] .quick-record-summary-status,
  body[data-current-screen="dashboard"] .quick-record-status {
    color: var(--p10ec-dim) !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] #currentItemReminderBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] .practice-tool-card textarea {
    background: rgba(255, 255, 255, 0.033) !important;
    border-color: rgba(221, 230, 247, 0.085) !important;
    min-height: 4.35rem !important;
  }
}

/* P10FJ high-end product polish: quieter chrome, gentler surfaces, less title-banner energy. */
@media (min-width: 900px) {
  body[data-current-screen="dashboard"] {
    --p10ed-text: #f4f6fb;
    --p10ed-muted: rgba(232, 237, 250, 0.56);
    --p10ed-faint: rgba(232, 237, 250, 0.34);
    background:
      radial-gradient(ellipse at 17% 13%, rgba(124, 85, 219, 0.105), transparent 29rem),
      radial-gradient(ellipse at 82% 0%, rgba(46, 78, 132, 0.12), transparent 35rem),
      radial-gradient(ellipse at 63% 72%, rgba(25, 91, 96, 0.055), transparent 33rem),
      linear-gradient(142deg, #050811 0%, #070b17 48%, #040711 100%) !important;
  }

  body[data-current-screen="dashboard"] .app-shell {
    grid-template-columns: clamp(12.25rem, 15vw, 14.7rem) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav {
    background:
      radial-gradient(ellipse at 18% 14%, rgba(139, 92, 246, 0.07), transparent 13rem),
      linear-gradient(180deg, rgba(8, 12, 26, 0.91), rgba(5, 8, 18, 0.86)) !important;
    border-color: rgba(224, 231, 247, 0.052) !important;
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.018),
      16px 0 48px rgba(0, 0, 0, 0.10) !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block h1 {
    color: rgba(248, 250, 255, 0.93) !important;
    font-size: clamp(0.98rem, 1.1vw, 1.16rem) !important;
    font-weight: 620 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-block::before {
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.26) !important;
    opacity: 0.9 !important;
  }

  body[data-current-screen="dashboard"] .app-header.header-with-nav .brand-tagline {
    color: rgba(232, 237, 250, 0.52) !important;
    font-size: 0.8rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgba(238, 242, 250, 0.58) !important;
    font-size: 0.88rem !important;
    font-weight: 470 !important;
    gap: 0.72rem !important;
    min-height: 3.18rem !important;
    padding-inline: 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-icon {
    color: rgba(238, 242, 250, 0.54) !important;
    font-size: 1.22rem !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button:hover {
    background: rgba(255, 255, 255, 0.026) !important;
  }

  body[data-current-screen="dashboard"] .app-nav-button.is-selected {
    background:
      radial-gradient(circle at 22% 22%, rgba(168, 85, 247, 0.155), transparent 60%),
      linear-gradient(135deg, rgba(65, 49, 119, 0.32), rgba(30, 24, 58, 0.30)) !important;
    border-color: rgba(181, 160, 246, 0.13) !important;
    color: rgba(250, 252, 255, 0.94) !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar .header-mode-buttons.dashboard-mode-buttons,
  body[data-current-screen="dashboard"] .header-utility-bar #pwaUpdateStatus.pwa-update-status {
    border-color: rgba(224, 231, 247, 0.095) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card {
    background:
      radial-gradient(ellipse at 77% 3%, rgba(139, 92, 246, 0.052), transparent 31rem),
      radial-gradient(ellipse at 26% 53%, rgba(34, 211, 199, 0.026), transparent 26rem),
      linear-gradient(150deg, rgba(8, 12, 24, 0.42), rgba(5, 8, 17, 0.18)) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    margin-bottom: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    font-size: clamp(1.82rem, 1.95vw, 2.18rem) !important;
    font-weight: 640 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    color: var(--p10ed-muted) !important;
    font-size: 0.94rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player {
    gap: clamp(0.72rem, 0.92vw, 0.95rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    background:
      linear-gradient(90deg, rgba(5, 8, 17, 0.985) 0%, rgba(7, 11, 22, 0.95) 32%, rgba(8, 12, 24, 0.68) 50%, rgba(5, 8, 16, 0.74) 100%),
      radial-gradient(ellipse at 73% 42%, rgba(188, 111, 57, 0.34), transparent 22%),
      radial-gradient(ellipse at 52% 29%, rgba(139, 92, 246, 0.09), transparent 27%),
      radial-gradient(ellipse at 18% 84%, rgba(34, 211, 199, 0.052), transparent 24%),
      linear-gradient(145deg, #08101c, #050812) !important;
    border-color: rgba(221, 230, 247, 0.07) !important;
    border-radius: 16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.026),
      0 28px 76px rgba(0, 0, 0, 0.19) !important;
    grid-template-columns: minmax(0, 0.56fr) minmax(17rem, 0.44fr) !important;
    min-height: clamp(20.5rem, 26vw, 23.8rem) !important;
    padding: clamp(1.85rem, 2.9vw, 2.72rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    background:
      linear-gradient(116deg, transparent 30%, rgba(225, 154, 92, 0.24) 30.2%, transparent 30.65%),
      linear-gradient(115deg, transparent 37%, rgba(231, 173, 111, 0.21) 37.2%, transparent 37.66%),
      linear-gradient(114deg, transparent 44%, rgba(231, 173, 111, 0.15) 44.15%, transparent 44.62%),
      linear-gradient(113deg, transparent 51%, rgba(231, 173, 111, 0.10) 51.15%, transparent 51.62%),
      radial-gradient(ellipse at 69% 43%, rgba(214, 127, 68, 0.40), transparent 19%),
      linear-gradient(76deg, transparent 18%, rgba(94, 57, 35, 0.24) 33%, rgba(16, 12, 13, 0.18) 50%, transparent 69%) !important;
    inset: -18% -9% -9% 45% !important;
    opacity: 0.68 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      radial-gradient(ellipse at 74% 44%, rgba(255, 214, 156, 0.06), transparent 19%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 22px),
      linear-gradient(180deg, transparent 58%, rgba(3, 6, 13, 0.56) 100%) !important;
    opacity: 0.72 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.5rem !important;
    max-width: min(41rem, 53%) !important;
    transform: translateY(-0.3rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    background: rgba(101, 67, 180, 0.74) !important;
    border-color: rgba(202, 187, 255, 0.11) !important;
    box-shadow: 0 8px 22px rgba(84, 47, 178, 0.14) !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    padding: 0.42rem 0.68rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(2.1rem, 3.25vw, 3.42rem) !important;
    font-weight: 620 !important;
    line-height: 1.08 !important;
    margin-top: 0.36rem !important;
    max-width: 14.5ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card #currentItemMeta {
    color: rgba(167, 139, 250, 0.88) !important;
    font-size: clamp(0.98rem, 1.16vw, 1.14rem) !important;
    font-weight: 560 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    color: rgba(241, 245, 255, 0.72) !important;
    font-size: 0.95rem !important;
    line-height: 1.58 !important;
    max-width: 32rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stats {
    gap: clamp(0.92rem, 1.55vw, 1.45rem) !important;
    margin-top: clamp(1.05rem, 2vw, 1.72rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat {
    gap: 0.56rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat-icon {
    border-color: rgba(232, 237, 250, 0.135) !important;
    color: rgba(232, 237, 250, 0.52) !important;
    height: 1.42rem !important;
    width: 1.42rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat small {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.69rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat strong {
    color: rgba(250, 252, 255, 0.82) !important;
    font-size: 0.9rem !important;
    font-weight: 470 !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    background: rgba(7, 10, 19, 0.33) !important;
    border-color: rgba(232, 237, 250, 0.12) !important;
    color: rgba(232, 237, 250, 0.48) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button,
  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    border-color: rgba(221, 230, 247, 0.052) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.022),
      0 16px 44px rgba(0, 0, 0, 0.085) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    gap: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button {
    background: linear-gradient(145deg, rgba(18, 24, 43, 0.46), rgba(8, 12, 24, 0.50)) !important;
    border-radius: 13px !important;
    min-height: 4.9rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions #startItemButton {
    background:
      radial-gradient(circle at 18% 20%, rgba(74, 222, 128, 0.12), transparent 40%),
      linear-gradient(145deg, rgba(15, 132, 62, 0.94), rgba(7, 82, 39, 0.94)) !important;
    border-color: rgba(134, 239, 172, 0.16) !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-icon {
    font-size: 1.12rem !important;
    opacity: 0.86 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy strong {
    font-size: 0.98rem !important;
    font-weight: 590 !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy small {
    color: rgba(232, 237, 250, 0.43) !important;
    font-size: 0.76rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card.main-queue-panel {
    background:
      radial-gradient(ellipse at 12% 0%, rgba(139, 92, 246, 0.038), transparent 34%),
      linear-gradient(145deg, rgba(18, 24, 43, 0.34), rgba(9, 13, 27, 0.32)) !important;
    border-radius: 15px !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-heading h3 {
    font-size: 1.02rem !important;
    font-weight: 590 !important;
  }

  body[data-current-screen="dashboard"] .queue-helper,
  body[data-current-screen="dashboard"] .queue-status-text {
    color: rgba(232, 237, 250, 0.34) !important;
    font-size: 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .queue-progress-pill,
  body[data-current-screen="dashboard"] .desktop-queue-toggle,
  body[data-current-screen="dashboard"] .queue-start-now-button {
    background: rgba(255, 255, 255, 0.032) !important;
    border-color: rgba(221, 230, 247, 0.07) !important;
    color: rgba(246, 249, 255, 0.72) !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item {
    background: rgba(255, 255, 255, 0.026) !important;
    border-color: rgba(221, 230, 247, 0.052) !important;
    min-height: 5.05rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card .queue-item.compact-queue-item.is-current {
    background:
      radial-gradient(circle at 4% 50%, rgba(139, 92, 246, 0.13), transparent 38%),
      linear-gradient(145deg, rgba(28, 23, 53, 0.52), rgba(12, 16, 31, 0.50)) !important;
    border-color: rgba(139, 92, 246, 0.34) !important;
  }

  body[data-current-screen="dashboard"] .queue-status-marker {
    background: rgba(255, 255, 255, 0.085) !important;
    color: rgba(248, 250, 255, 0.72) !important;
  }

  body[data-current-screen="dashboard"] .queue-item-title {
    color: rgba(250, 252, 255, 0.84) !important;
    font-size: 0.86rem !important;
    font-weight: 520 !important;
  }

  body[data-current-screen="dashboard"] .queue-item-type {
    color: rgba(232, 237, 250, 0.38) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-notes-grid > .practice-tool-card {
    background:
      radial-gradient(ellipse at 14% 0%, rgba(107, 126, 181, 0.04), transparent 42%),
      linear-gradient(145deg, rgba(18, 25, 45, 0.40), rgba(9, 14, 28, 0.48)) !important;
    border-radius: 11px !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard) .p03i-timing-title,
  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-summary-main,
  body[data-current-screen="dashboard"] .reference-box-header strong,
  body[data-current-screen="dashboard"] .current-item-notes-header label,
  body[data-current-screen="dashboard"] #currentItemReminderBox summary span:first-child {
    color: rgba(250, 252, 255, 0.86) !important;
    font-size: 0.94rem !important;
    font-weight: 580 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display,
  body[data-current-screen="dashboard"] .quick-record-elapsed {
    font-size: clamp(1.82rem, 2.35vw, 2.35rem) !important;
    font-weight: 470 !important;
  }

  body[data-current-screen="dashboard"] .practice-tool-card button,
  body[data-current-screen="dashboard"] .p03i-tool-button,
  body[data-current-screen="dashboard"] .p05w-bpm-step {
    background: rgba(255, 255, 255, 0.042) !important;
    border-color: rgba(221, 230, 247, 0.064) !important;
    color: rgba(248, 250, 255, 0.76) !important;
  }

  body[data-current-screen="dashboard"] #quickRecordStartButton {
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.86), rgba(159, 18, 57, 0.86)) !important;
    border-color: rgba(248, 113, 113, 0.16) !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-header,
  body[data-current-screen="dashboard"] #currentItemReminderBox summary {
    margin-bottom: 0.46rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-notes-header span,
  body[data-current-screen="dashboard"] .current-item-reminder-box p,
  body[data-current-screen="dashboard"] .reference-box-header span,
  body[data-current-screen="dashboard"] .quick-record-summary-status,
  body[data-current-screen="dashboard"] .quick-record-status {
    color: rgba(232, 237, 250, 0.32) !important;
    font-size: 0.78rem !important;
    font-weight: 410 !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] #currentItemReminderBox.practice-tool-card textarea,
  body[data-current-screen="dashboard"] .practice-tool-card textarea {
    background: rgba(255, 255, 255, 0.026) !important;
    border-color: rgba(221, 230, 247, 0.064) !important;
    border-radius: 9px !important;
    color: rgba(248, 250, 255, 0.82) !important;
    min-height: 4.15rem !important;
  }
}

/* P10FJ final workflow overrides: keep ergonomic controls dominant after legacy layers. */
@media (min-width: 761px) {
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body) {
    display: grid !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }
}

/* P10FJ final workflow overrides: keep ergonomic controls dominant after legacy layers. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-rail-progress {
    background:
      radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.13), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.018)) !important;
    border: 1px solid rgba(221, 230, 247, 0.06) !important;
    border-radius: 14px !important;
    display: grid !important;
    gap: 0.58rem !important;
    margin-top: auto !important;
    padding: 0.88rem !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-kicker {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-value {
    color: rgba(250, 252, 255, 0.84) !important;
    font-size: 0.94rem !important;
    font-weight: 590 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-detail {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-bar {
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 999px !important;
    height: 0.32rem !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-fill {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.96), rgba(45, 212, 191, 0.74)) !important;
    border-radius: inherit !important;
    display: block !important;
    height: 100% !important;
    min-width: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    background: rgba(255, 255, 255, 0.034) !important;
    border: 1px solid rgba(221, 230, 247, 0.07) !important;
    border-radius: 999px !important;
    color: rgba(248, 250, 255, 0.76) !important;
    font-size: 0.76rem !important;
    min-height: 2.1rem !important;
    padding: 0.42rem 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    border-radius: 9px !important;
    font-size: 0.77rem !important;
    min-height: 2rem !important;
    padding: 0.22rem 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row {
    display: grid !important;
    gap: 0.42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.58rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title actions"
      "bpm bpm"
      "select select"
      "auto auto" !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-title-region { grid-area: title !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions { grid-area: actions !important; justify-content: flex-end !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-bpm-region { grid-area: bpm !important; }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    display: grid !important;
    gap: 0.32rem !important;
    grid-template-columns: 2rem minmax(3rem, 1fr) 2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    font-size: 1.38rem !important;
    max-width: none !important;
    text-align: center !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard :is(.p06d-metro-settings-region, .p05t-settings-button, #p03iPatternSelect) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    min-height: 2.16rem !important;
    width: 100% !important;
  }
}

/* P10FJ final workflow overrides: appended after legacy layers for ergonomic control visibility. */
@media (min-width: 761px) {
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open :is(.p05q-timer-middle, .p05q-rail-middle, .p03i-timer-body) {
    display: grid !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iTimerCard.is-open .p03i-presets {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.44rem !important;
    grid-area: select !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  }

  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary),
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p06d-stable-metronome.is-open :is(.p06d-metro-sound-region, .p06d-metro-pattern-region, .p05t-pattern-summary) {
    display: block !important;
  }
}

/* P10FJ nav visibility correction: keep secondary rail areas reachable in Basic mode. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .app-nav-button[data-screen="setup"],
  body[data-current-screen="dashboard"] .app-nav-button[data-screen="advanced"],
  body[data-current-screen="dashboard"] .app-nav-button[data-screen="system"] {
    display: flex !important;
  }
}

/* P10FJ global rail visibility: secondary areas stay reachable after leaving Practice. */
@media (min-width: 761px) {
  .app-header.header-with-nav .app-nav-button[data-screen="setup"],
  .app-header.header-with-nav .app-nav-button[data-screen="tools"],
  .app-header.header-with-nav .app-nav-button[data-screen="system"] {
    display: flex !important;
  }
}

/* P10FJ tools architecture: retire visible mode switching and make Tools first-class. */
.dashboard-mode-buttons.header-mode-buttons {
  display: none !important;
}

.mode-tool-strip {
  display: none !important;
}

.tools-screen.advanced-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(110, 231, 214, 0.16), transparent 34%),
    radial-gradient(circle at 86% 4%, rgba(139, 92, 246, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(246, 249, 252, 0.98), rgba(234, 241, 244, 0.92)) !important;
}

.tools-screen .section-header {
  align-items: end !important;
  border-bottom: 1px solid rgba(95, 113, 135, 0.10) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.9rem !important;
}

.tools-screen .screen-title {
  color: #172033 !important;
  font-size: clamp(1.8rem, 2.5vw, 2.55rem) !important;
  font-weight: 640 !important;
  letter-spacing: 0 !important;
}

.tools-screen .section-note {
  color: #667488 !important;
  font-size: 0.94rem !important;
  line-height: 1.48 !important;
  max-width: 42rem !important;
}

.tools-screen .tools-workspace-grid {
  align-items: stretch !important;
  gap: 1rem !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr) !important;
}

.tools-screen .advanced-tool-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.82), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 250, 0.78)) !important;
  border-color: rgba(83, 101, 122, 0.12) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 20px 48px rgba(31, 45, 61, 0.08) !important;
  min-height: 22rem !important;
}

.tools-screen .advanced-tool-card:not(.is-tool-open) :is([data-zp], audio, .zonetune-instrument-row, .zonetune-strings-wrapper, .zonetune-display, .zonetune-meter, .zonetune-status, #zoneTuneStartButton) {
  display: revert !important;
}

.tools-screen .advanced-tool-card .tool-card-header h3 {
  color: #172033 !important;
  font-size: 1.18rem !important;
  font-weight: 620 !important;
}

.tools-screen .advanced-tool-card .tool-card-note,
.tools-screen .advanced-tool-card .eyebrow {
  color: #657489 !important;
}

.tools-screen [data-advanced-tool-toggle] {
  opacity: 0.72 !important;
}

@media (max-width: 920px) {
  .tools-screen .tools-workspace-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-rail-progress {
    gap: 0.66rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    gap: 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    border-radius: 14px !important;
    grid-template-columns: 2.15rem minmax(3.8rem, 1fr) 2.15rem !important;
    padding: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    font-size: 1.5rem !important;
    height: 2.22rem !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-select-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    border-radius: 11px !important;
    min-height: 2.28rem !important;
  }
}

/* P10FJ final action-row correction: five Practice actions stay on one row. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    display: grid !important;
    gap: 0.46rem !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions > button {
    box-sizing: border-box !important;
    min-height: 3.82rem !important;
    min-width: 0 !important;
    padding: 0.52rem 0.54rem !important;
    width: auto !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy strong {
    font-size: 0.88rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy small {
    font-size: 0.64rem !important;
  }
}

/* P10FJ final compact-action override: reduce legacy button chrome after all Practice layers. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .button-row.hero-actions.practice-action-strip > button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions > button,
  body[data-current-screen="dashboard"] .button-row.hero-actions.practice-action-strip > button {
    height: 3.85rem !important;
    min-height: 3.85rem !important;
    max-height: 3.85rem !important;
    padding: 0.48rem 0.56rem !important;
  }

  body[data-current-screen="dashboard"] .button-row.hero-actions.practice-action-strip > button .p10eb-action-copy {
    gap: 0.16rem !important;
  }
}

/* P10FJ ID-level action compacting: override legacy hero-primary button heights. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] :is(#startItemButton, #doneItemButton, #skipItemButton, #nextBlockButton, #funItemButton, #editCurrentItemButton) {
    height: 3.85rem !important;
    min-height: 3.85rem !important;
    max-height: 3.85rem !important;
    padding: 0.48rem 0.56rem !important;
  }
}

/* P10FJ cockpit polish: lower queue, brighter help placards, calmer rail, hardware-like metronome. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    grid-template-areas:
      "focus"
      "actions"
      "tools"
      "queue"
      "notes"
      "defaults" !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-area: tools !important;
    margin-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.p10eu-lower-queue,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-queue-card {
    grid-area: queue !important;
    margin-top: -0.1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stats {
    gap: 0.68rem !important;
    opacity: 0.72 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat {
    background: rgba(255, 255, 255, 0.022) !important;
    border-color: rgba(231, 238, 250, 0.048) !important;
    color: rgba(234, 240, 250, 0.62) !important;
    padding: 0.38rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat small {
    color: rgba(234, 240, 250, 0.38) !important;
    font-size: 0.61rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-stat strong {
    color: rgba(250, 252, 255, 0.72) !important;
    font-size: 0.78rem !important;
    font-weight: 520 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0.62rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    background:
      radial-gradient(circle at 14% 10%, rgba(139, 92, 246, 0.18), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.026)) !important;
    border: 1px solid rgba(221, 230, 247, 0.075) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    display: grid !important;
    gap: 0.62rem !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week {
    background:
      radial-gradient(circle at 16% 28%, rgba(74, 222, 128, 0.14), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.024)) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-detail {
    color: rgba(232, 237, 250, 0.36) !important;
    font-size: 0.72rem !important;
    font-style: normal !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    background: transparent !important;
    border-color: rgba(221, 230, 247, 0.065) !important;
    min-height: 2rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-dashboard {
    position: relative !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-dashboard::before {
    background: rgba(2, 6, 14, 0.18) !important;
    border-radius: inherit !important;
    content: "" !important;
    inset: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 1 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help] {
    isolation: isolate !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 255, 0.91)) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    box-shadow:
      0 12px 28px rgba(2, 8, 18, 0.28),
      0 0 0 1px rgba(139, 92, 246, 0.10),
      0 0 22px rgba(167, 139, 250, 0.18) !important;
    color: #172033 !important;
    content: attr(data-help) !important;
    font-size: 0.68rem !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    max-width: 13rem !important;
    min-width: 5.8rem !important;
    opacity: 0 !important;
    padding: 0.38rem 0.58rem !important;
    pointer-events: none !important;
    position: absolute !important;
    text-transform: none !important;
    transform: translateY(0.2rem) !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
    width: max-content !important;
    white-space: normal !important;
    z-index: 8 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::before {
    background: rgba(238, 243, 255, 0.76) !important;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.20) !important;
    content: "" !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    transform-origin: left center !important;
    transition: opacity 180ms ease !important;
    width: 1.1rem !important;
    z-index: 7 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::before {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips::after {
    left: calc(100% + 0.7rem) !important;
    top: 0 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips::before {
    left: 100% !important;
    top: 50% !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #funItemButton::after {
    bottom: calc(100% + 0.42rem) !important;
    left: 50% !important;
    transform: translate(-50%, 0.2rem) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #funItemButton::before {
    display: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .queue-title-row::after {
    bottom: calc(100% + 0.45rem) !important;
    left: 0.2rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .queue-title-row::before {
    display: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-rail-progress::after {
    bottom: calc(100% + 0.5rem) !important;
    left: 0.1rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-rail-progress::before {
    display: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iTimerCard [data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard [data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10eb-reference-shortcuts::after {
    bottom: calc(100% + 0.42rem) !important;
    left: 0 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iTimerCard [data-help]::before,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard [data-help]::before,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10eb-reference-shortcuts::before {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10eu-metronome-card .p03i-open-body {
    display: block !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-header.p06d-metro-main {
    display: contents !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-shell {
    display: grid !important;
    gap: 0.64rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-top {
    align-items: center !important;
    display: grid !important;
    gap: 0.52rem !important;
    grid-template-areas:
      "title tap"
      "bpm bpm"
      "actions actions" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-title-region,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-bpm-region,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions {
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-title-region {
    grid-area: title !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p06d-metro-bpm-region {
    grid-area: bpm !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-tap {
    grid-area: tap !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions {
    grid-area: actions !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-timing-title {
    font-size: 0.92rem !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-header-bpm-field {
    display: grid !important;
    gap: 0.22rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-header-bpm-field > label,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-field > label {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.62rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-control {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(221, 230, 247, 0.075) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    grid-template-columns: 1.9rem minmax(2.8rem, 1fr) 1.9rem !important;
    max-width: 100% !important;
    padding: 0.28rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-bpm-input {
    background: transparent !important;
    border: 0 !important;
    color: rgba(250, 252, 255, 0.92) !important;
    font-size: clamp(1.55rem, 2vw, 2rem) !important;
    font-weight: 560 !important;
    height: 2.15rem !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions > button {
    border-radius: 10px !important;
    min-height: 2.3rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-actions {
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-rhythm .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.52rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    background: rgba(255, 255, 255, 0.034) !important;
    border: 1px solid rgba(221, 230, 247, 0.065) !important;
    border-radius: 10px !important;
    color: rgba(248, 250, 255, 0.78) !important;
    min-height: 2.25rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-footer {
    align-items: center !important;
    display: flex !important;
    gap: 0.54rem !important;
    justify-content: space-between !important;
    min-height: 1.85rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-footer .checkbox-row {
    color: rgba(232, 237, 250, 0.54) !important;
    font-size: 0.76rem !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard .p03i-metronome-hide {
    opacity: 0.42 !important;
  }

  body[data-current-screen="dashboard"] .practice-companion-grid > .zb-p03i-original-hidden {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .p10eu-runtime-prompt {
    grid-area: defaults !important;
    margin-top: 0.2rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-top,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p10eu-metro-rhythm .p03i-metronome-select-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) {
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p10eu-metro-top {
    display: grid !important;
    grid-template-areas:
      "title tap"
      "bpm bpm"
      "actions actions" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p06d-metro-title-region { grid-area: title !important; }
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p06d-metro-bpm-region { grid-area: bpm !important; display: block !important; min-width: 0 !important; width: 100% !important; }
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p10eu-metro-tap { grid-area: tap !important; }
  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p03i-metronome-actions { grid-area: actions !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p03i-header-bpm-field {
    display: grid !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-dashboard-mode] #p03iMetronomeCard.p06d-stable-metronome.p10eu-metronome-card.is-open .p05w-bpm-control {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1.9rem minmax(2.8rem, 1fr) 1.9rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P10FJ+1: contextual help anchors, simpler rail meaning, compact modular metronome. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] #practiceHelpToggle.practice-help-toggle {
    position: fixed !important;
    right: clamp(1.2rem, 3vw, 2.4rem) !important;
    top: clamp(1rem, 2vw, 1.55rem) !important;
    z-index: 60 !important;
  }

  body[data-current-screen="dashboard"] .header-utility-bar {
    padding-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week .practice-rail-ring {
    height: 2.4rem !important;
    width: 2.4rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week .practice-rail-ring-core {
    color: rgba(74, 222, 128, 0.9) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week .practice-rail-progress-value {
    font-size: 0.9rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week .practice-rail-progress-detail {
    font-size: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] .p10ex-help-target {
    position: relative !important;
  }

  body[data-current-screen="dashboard"] .p10ex-help-anchor {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(214, 224, 244, 0.14) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    color: rgba(218, 203, 255, 0.86) !important;
    display: inline-grid !important;
    font-size: 0.68rem !important;
    font-weight: 680 !important;
    height: 1.12rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1.12rem !important;
    z-index: 6 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips > .p10ex-help-anchor {
    position: static !important;
    margin-left: 0.24rem !important;
    vertical-align: middle !important;
  }

  body[data-current-screen="dashboard"] :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) > .p10ex-help-anchor {
    right: 0.58rem !important;
    top: 0.58rem !important;
  }

  body[data-current-screen="dashboard"] .practice-queue-card > .p10ex-help-anchor {
    right: 7.4rem !important;
    top: 1rem !important;
  }

  body[data-current-screen="dashboard"] .practice-notes-grid > .p10ex-help-anchor,
  body[data-current-screen="dashboard"] #currentItemNotesBox > .p10ex-help-anchor {
    right: 1rem !important;
    top: 0.9rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.98) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor[data-help]::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 255, 0.94)) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 12px !important;
    box-shadow:
      0 14px 30px rgba(2, 8, 18, 0.30),
      0 0 22px rgba(167, 139, 250, 0.18) !important;
    color: #172033 !important;
    content: attr(data-help) !important;
    font-size: 0.7rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    max-width: 12rem !important;
    min-width: 8rem !important;
    opacity: 1 !important;
    padding: 0.5rem 0.62rem !important;
    pointer-events: none !important;
    position: absolute !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    width: max-content !important;
    z-index: 20 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor[data-help]::before {
    background: rgba(238, 243, 255, 0.88) !important;
    content: "" !important;
    height: 1px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1rem !important;
    z-index: 19 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::after {
    left: calc(100% + 0.7rem) !important;
    top: -0.3rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::before {
    left: 100% !important;
    top: 50% !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #funItemButton > .p10ex-help-anchor::after {
    bottom: calc(100% + 0.5rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #funItemButton > .p10ex-help-anchor::before {
    display: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) > .p10ex-help-anchor::after {
    bottom: calc(100% + 0.52rem) !important;
    right: -0.15rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) > .p10ex-help-anchor::before {
    bottom: calc(100% + 0.22rem) !important;
    right: 0.22rem !important;
    transform: rotate(90deg) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-queue-card > .p10ex-help-anchor::after {
    bottom: calc(100% + 0.55rem) !important;
    right: -0.5rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-queue-card > .p10ex-help-anchor::before {
    display: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) :is(.practice-notes-grid, #currentItemNotesBox) > .p10ex-help-anchor::after {
    right: 0 !important;
    top: calc(100% + 0.5rem) !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) :is(.practice-notes-grid, #currentItemNotesBox) > .p10ex-help-anchor::before {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.58rem !important;
    padding: 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    min-height: 10.15rem !important;
    padding: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.42rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
    align-items: center !important;
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-areas: "title bpm tap auto" !important;
    grid-template-columns: minmax(4.2rem, 0.82fr) minmax(5.4rem, 1fr) auto auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region {
    display: grid !important;
    gap: 0.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker {
    color: rgba(232, 237, 250, 0.34) !important;
    font-size: 0.58rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    font-size: 0.66rem !important;
    justify-content: center !important;
    min-height: 2rem !important;
    padding: 0.25rem 0.42rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto span {
    font-size: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto span::after {
    content: "Auto" !important;
    font-size: 0.66rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport {
    align-items: center !important;
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions {
    display: grid !important;
    gap: 0.36rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-link,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap {
    font-size: 0.72rem !important;
    min-height: 2.14rem !important;
    padding-inline: 0.54rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    display: grid !important;
    gap: 0.38rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(4.6rem, 0.74fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-cell {
    background: rgba(255, 255, 255, 0.028) !important;
    border: 1px solid rgba(221, 230, 247, 0.058) !important;
    border-radius: 9px !important;
    min-width: 0 !important;
    padding: 0.32rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-note {
    display: grid !important;
    gap: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-note small {
    color: rgba(232, 237, 250, 0.38) !important;
    font-size: 0.58rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-note strong {
    color: rgba(248, 250, 255, 0.78) !important;
    font-size: 0.75rem !important;
    font-weight: 520 !important;
  }
}

/* P10FJ metronome/tool-band correction: give the modular metronome enough horizontal room. */
@media (min-width: 1181px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-template-columns:
      minmax(11.2rem, 0.88fr)
      minmax(19.5rem, 1.34fr)
      minmax(12rem, 0.9fr)
      minmax(12rem, 0.9fr) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] #practiceHelpToggle.practice-help-toggle {
    background: rgba(16, 20, 34, 0.92) !important;
    border-color: rgba(167, 139, 250, 0.44) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 30px rgba(0, 0, 0, 0.24) !important;
    color: rgba(221, 204, 255, 0.98) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
    grid-template-columns: minmax(5.2rem, 0.82fr) minmax(7.2rem, 1fr) auto auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    grid-template-columns: 1.65rem minmax(2.7rem, 1fr) 1.65rem !important;
    min-height: 2.1rem !important;
    padding: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap {
    min-height: 2rem !important;
    min-width: 2rem !important;
    padding-inline: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto {
    min-height: 2rem !important;
    padding-inline: 0.38rem !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #funItemButton > .p10ex-help-anchor::after {
    bottom: calc(100% + 0.55rem) !important;
    left: 45% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 0.62fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-footer {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card {
    min-height: 11rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-items: start !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel.quick-record-panel > summary {
    align-items: center !important;
    min-height: 2.35rem !important;
    padding-block: 0 !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.42rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed {
    font-size: clamp(1.42rem, 1.65vw, 1.72rem) !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1rem !important;
    max-width: 100% !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-primary-row {
    gap: 0.26rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed {
    font-size: 0.88rem !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    order: -1 !important;
    padding: 0.3rem 0.28rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel,
  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel :is(.quick-record-status, .quick-record-help, .quick-record-note, .quick-record-playback-label) {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    gap: 0.46rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-left {
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.7rem, 2.1vw, 2.05rem) !important;
    line-height: 1 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-middle {
    gap: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    min-height: 1.62rem !important;
    padding: 0.12rem 0 !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    display: grid !important;
    gap: 0.3rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row {
    display: contents !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-auto-row,
  body[data-current-screen="dashboard"] #p03iTimerCard .p03m-timer-auto-row {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    min-height: 1.5rem !important;
  }
}

/* P10FJ stabilization: stop help flicker, anchor controls, restore calm hierarchy. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard .practice-header {
    position: relative !important;
    padding-right: 9rem !important;
  }

  body[data-current-screen="dashboard"] #practiceHelpToggle.practice-help-toggle {
    position: absolute !important;
    right: 0.25rem !important;
    top: 0 !important;
    z-index: 12 !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-dashboard::before {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-icon {
    align-items: center !important;
    display: inline-grid !important;
    height: 1.2rem !important;
    justify-items: center !important;
    width: 1.2rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-nav-icon svg {
    fill: none !important;
    height: 1.14rem !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 1.8 !important;
    width: 1.14rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress {
    gap: 0.64rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    background:
      radial-gradient(circle at 16% 16%, rgba(139, 92, 246, 0.20), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.026)) !important;
    border: 1px solid rgba(221, 230, 247, 0.085) !important;
    border-radius: 14px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 16px 32px rgba(0, 0, 0, 0.10) !important;
    min-height: 4.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week {
    background:
      radial-gradient(circle at 16% 26%, rgba(74, 222, 128, 0.18), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.024)) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy small {
    color: rgba(232, 237, 250, 0.42) !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini-copy strong {
    color: rgba(250, 252, 255, 0.9) !important;
    font-size: 0.94rem !important;
  }

  body[data-current-screen="dashboard"] .quick-record-panel summary::after {
    content: "" !important;
    display: none !important;
  }

  body[data-current-screen="dashboard"] #quickRecordSummaryStatus {
    opacity: 0.72 !important;
  }

  body[data-current-screen="dashboard"] .p10ex-help-anchor {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips > .p10ex-help-anchor {
    display: inline-grid !important;
    position: static !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help],
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor {
    transition: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::before,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .p10ex-help-anchor::before {
    animation: none !important;
    transition: none !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 255, 0.94)) !important;
    border-radius: 12px !important;
    color: #172033 !important;
    font-size: 0.69rem !important;
    font-weight: 560 !important;
    line-height: 1.22 !important;
    max-width: 11.5rem !important;
    min-width: 0 !important;
    padding: 0.46rem 0.58rem !important;
    transform: none !important;
    width: max-content !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iTimerCard[data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard[data-help]::after,
  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .current-item-references-box[data-help]::after {
    bottom: calc(100% + 0.5rem) !important;
    left: auto !important;
    right: 0.6rem !important;
    top: auto !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-queue-card[data-help]::after {
    bottom: calc(100% + 0.5rem) !important;
    left: auto !important;
    right: 0.8rem !important;
    top: auto !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) [data-help]::before {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.8rem !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr) !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox.practice-tool-card,
  body[data-current-screen="dashboard"] #currentItemReminderBox.practice-tool-card {
    min-height: 9rem !important;
    padding: 1rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotesBox .speech-input-wrap,
  body[data-current-screen="dashboard"] #currentItemReminderBox .speech-input-wrap {
    align-items: stretch !important;
    display: grid !important;
    gap: 0.6rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #currentItemNotes,
  body[data-current-screen="dashboard"] #currentItemReminderNotes {
    box-sizing: border-box !important;
    min-height: 5rem !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    align-content: start !important;
    gap: 0.38rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    align-items: center !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    min-height: 1.95rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    grid-template-areas:
      "focus"
      "actions"
      "tools"
      "notes"
      "queue"
      "defaults" !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }
}

/* P10FK final cascade: active tools sit tighter, read as one balanced musician band. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    gap: 0.62rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions {
    margin-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: -0.18rem !important;
    padding: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) {
    box-sizing: border-box !important;
    min-height: 9.2rem !important;
    padding: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-timer-display {
    font-size: clamp(1.55rem, 1.7vw, 1.9rem) !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell {
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    font-size: 0.66rem !important;
    min-height: 1.48rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    min-height: 1.78rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-body {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #quickRecordPanel .quick-record-elapsed,
  body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
    font-size: 1.22rem !important;
    min-height: 2.1rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card {
    min-height: 9.2rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
    gap: 0.3rem !important;
    grid-template-areas:
      "title auto"
      "bpm tap" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { grid-area: title !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region { grid-area: bpm !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap { grid-area: tap !important; }
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { grid-area: auto !important; }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control {
    grid-template-columns: 1.55rem minmax(2.5rem, 1fr) 1.55rem !important;
    min-height: 1.92rem !important;
    padding: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input {
    font-size: clamp(1.25rem, 1.55vw, 1.65rem) !important;
    height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap,
  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button {
    min-height: 1.9rem !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-link,
  body[data-current-screen="dashboard"] #p10exMetroNoteCell {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid {
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-pattern::before {
    color: rgba(232, 237, 250, 0.38) !important;
    content: "Feel" !important;
    display: block !important;
    font-size: 0.58rem !important;
    font-weight: 640 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.18rem !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #p03iMetronomeCard #p03iSoundSelect,
  body[data-current-screen="dashboard"] #p03iMetronomeCard .p05t-pattern-summary {
    min-height: 1.82rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-mini {
    background:
      radial-gradient(circle at 18% 18%, rgba(167, 139, 250, 0.22), transparent 52%),
      radial-gradient(circle at 92% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important;
    border-color: rgba(221, 230, 247, 0.062) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 20px 48px rgba(0, 0, 0, 0.12) !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-week {
    background:
      radial-gradient(circle at 18% 30%, rgba(74, 222, 128, 0.20), transparent 54%),
      radial-gradient(circle at 95% 0%, rgba(34, 211, 238, 0.07), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-goal-chips > .p10ex-help-anchor {
    cursor: help !important;
  }

  body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::after {
    content: attr(data-help) !important;
    left: calc(100% + 0.55rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 1181px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* P10OG Backup foundation stabilization: final EOF cascade lock for hosted tools. */
.toolbox-screen [hidden],
.toolbox-screen .toolbox-tool-panel[hidden],
.toolbox-screen .zoneplayer-card-shell[hidden],
.toolbox-screen .zonetune-card-shell[hidden],
.toolbox-floating-body [hidden],
.toolbox-floating-body .toolbox-tool-panel[hidden],
.toolbox-floating-body .zoneplayer-card-shell[hidden],
.toolbox-floating-body .zonetune-card-shell[hidden],
.toolbox-screen [data-toolbox-float][hidden],
.toolbox-floating-body [data-toolbox-float][hidden] {
  display: none !important;
}

.toolbox-screen .toolbox-stage {
  display: block !important;
  overflow: hidden !important;
}

.toolbox-screen .toolbox-tool-panel:not([hidden]) {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
}

.toolbox-screen .zoneplayer-card-shell:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

.toolbox-screen .zonetune-card-shell:not([hidden]) {
  display: grid !important;
}

/* P10OH Cloud Backup + Basic/Advanced shell. */
.product-mode-shell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  max-width: max-content;
  padding: 0.22rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.52)),
    rgba(2, 6, 23, 0.62);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.product-mode-label {
  padding-left: 0.46rem;
  color: rgba(203, 213, 225, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-mode-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(4.15rem, 1fr));
  gap: 0.12rem;
  padding: 0.12rem;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.58);
}

.product-mode-option {
  min-height: 1.86rem;
  padding: 0.28rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
}

.product-mode-option:hover {
  color: #fff;
  background: rgba(148, 163, 184, 0.14);
}

.product-mode-option.is-selected {
  color: #fff;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.95), rgba(34, 211, 238, 0.58));
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body[data-current-screen="dashboard"] .practice-rail-progress .product-mode-shell.is-rail-positioned {
  justify-self: center;
  margin: 0.14rem auto 0;
  order: 3;
  padding: 0.18rem;
  transform: scale(0.92);
  transform-origin: center;
}

body[data-current-screen="dashboard"] .practice-rail-progress .product-mode-shell.is-rail-positioned .product-mode-label {
  font-size: 0.6rem;
}

body[data-current-screen="dashboard"] .practice-rail-progress .product-mode-shell.is-rail-positioned .product-mode-toggle {
  grid-template-columns: repeat(2, minmax(3.72rem, 1fr));
}

body[data-current-screen="dashboard"] .practice-rail-progress .product-mode-shell.is-rail-positioned .product-mode-option {
  min-height: 1.62rem;
  padding-inline: 0.52rem;
}

.legacy-product-mode-shell,
.legacy-product-mode-shell.is-rail-positioned {
  display: none !important;
}

body:not(.is-developer-mode) .app-nav-button[data-screen="tools"],
body:not(.is-developer-mode) [data-workspace-module-nav="tools"],
body:not(.is-developer-mode) [data-workspace-module-screen="tools"] {
  display: none !important;
}

.cloud-backup-list-panel {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.44));
}

.cloud-backup-list-heading,
.cloud-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cloud-backup-list-heading {
  margin-bottom: 0.65rem;
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.82rem;
}

.cloud-backup-list-heading > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.cloud-backup-list-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.cloud-backup-filter-toggle {
  align-items: center;
  color: rgba(226, 232, 240, 0.86);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.4rem;
  line-height: 1.2;
  white-space: nowrap;
}

.cloud-backup-filter-toggle input {
  accent-color: #5eead4;
  height: 0.92rem;
  width: 0.92rem;
}

.cloud-backup-list-heading span,
.cloud-backup-list-note {
  color: rgba(148, 163, 184, 0.8);
}

.cloud-backup-prune-button {
  flex: 0 0 auto;
}

.cloud-backup-list-note {
  margin: -0.18rem 0 0.62rem;
}

.cloud-backup-list {
  display: grid;
  gap: 0.5rem;
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.2rem;
  scrollbar-color: rgba(167, 139, 250, 0.55) rgba(15, 23, 42, 0.42);
}

.cloud-backup-row {
  padding: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.36);
}

.cloud-backup-row.is-older {
  border-color: rgba(148, 163, 184, 0.1);
  background: rgba(2, 6, 23, 0.24);
}

.cloud-backup-row.is-other-install {
  border-color: rgba(251, 191, 36, 0.25);
}

.cloud-backup-row > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.cloud-backup-row-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.cloud-backup-delete-button {
  border-color: rgba(248, 113, 113, 0.32);
  color: rgba(254, 202, 202, 0.92);
}

.cloud-backup-delete-button:hover {
  border-color: rgba(248, 113, 113, 0.56);
  background: rgba(127, 29, 29, 0.3);
}

.cloud-backup-row strong,
.cloud-backup-row span,
.cloud-backup-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-backup-row strong {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 0.42rem;
  min-width: 0;
}

.cloud-backup-row span,
.cloud-backup-row small {
  color: rgba(203, 213, 225, 0.72);
}

.cloud-backup-origin-badge {
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  color: rgba(254, 243, 199, 0.94);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 760;
  padding: 0.12rem 0.42rem;
}

@media (max-width: 780px) {
  .cloud-backup-list-heading,
  .cloud-backup-row {
    align-items: stretch;
    flex-direction: column;
  }

  .cloud-backup-row-actions {
    justify-content: flex-start;
  }

  .cloud-backup-list-toolbar {
    justify-content: flex-start;
  }
}

.system-screen .backup-status {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: inline-flex;
  margin-top: 0.72rem;
  min-height: 0;
  padding: 0.36rem 0.62rem;
  background: rgba(15, 23, 42, 0.42);
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.82rem;
}

.system-screen .backup-status:empty {
  display: none;
}

.system-screen .backup-status[data-tone="success"] {
  background: rgba(21, 128, 61, 0.18);
  border-color: rgba(74, 222, 128, 0.28);
  color: #bbf7d0;
}

.system-screen .backup-status[data-tone="error"] {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

.system-screen .backup-status[data-tone="neutral"] {
  background: rgba(30, 41, 59, 0.54);
  border-color: rgba(167, 139, 250, 0.18);
  color: rgba(226, 232, 240, 0.82);
}

.system-screen .cloud-backup-row {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.68), rgba(15, 23, 42, 0.52));
  border-color: rgba(167, 139, 250, 0.18);
}

.section-note.is-error {
  color: #fecaca;
}

/* P10OI System backup clarity + Configuration Review dark polish. */
.system-screen .system-grid .placeholder-panel,
.system-screen .system-health-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(17, 26, 48, 0.94), rgba(7, 13, 27, 0.88));
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 22px 54px rgba(2, 6, 23, 0.24);
}

.system-screen .system-grid .placeholder-panel > strong,
.system-screen .system-health-panel h3,
.system-screen .integrity-panel-label strong,
.system-screen .integrity-summary-line strong,
.system-screen .integrity-map-heading strong,
.system-screen .integrity-map-card strong,
.system-screen .integrity-issue-heading strong {
  color: rgba(248, 250, 252, 0.96);
}

.system-screen .system-grid .placeholder-panel p,
.system-screen .system-health-panel p,
.system-screen .integrity-panel-label span,
.system-screen .integrity-map-heading span,
.system-screen .integrity-map-more-card,
.system-screen .integrity-empty,
.system-screen .integrity-detail,
.system-screen .integrity-severity-note,
.system-screen .integrity-backlog-note {
  color: rgba(203, 213, 225, 0.74) !important;
}

.system-screen .system-section-kicker {
  color: rgba(196, 181, 253, 0.88);
}

.system-screen .backup-protection-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.28), transparent 38%),
    radial-gradient(circle at 92% 4%, rgba(34, 211, 238, 0.10), transparent 32%),
    linear-gradient(145deg, rgba(24, 29, 63, 0.96), rgba(7, 13, 27, 0.9));
}

.backup-method-card {
  display: flex;
  flex-direction: column;
}

.system-screen .backup-method-grid {
  grid-template-columns: repeat(3, minmax(18rem, 1fr));
}

.system-screen .backup-method-grid .backup-protection-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-screen .backup-restore-panel {
  margin-top: 0.92rem;
}

.backup-setup-reminder {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.16), rgba(30, 64, 175, 0.1)),
    rgba(3, 10, 24, 0.62);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 14px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.92rem;
  padding: 0.78rem 0.86rem;
}

.backup-protection-status-badge {
  align-items: center;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  margin-left: auto;
  min-height: 1.75rem;
  padding: 0.38rem 0.62rem;
  white-space: nowrap;
}

.backup-protection-status-badge[hidden] {
  display: none !important;
}

.backup-protection-status-badge[data-tone="warning"] {
  background: rgba(146, 64, 14, 0.24);
  color: #fde68a;
}

.backup-protection-status-badge[data-tone="success"] {
  background: rgba(21, 128, 61, 0.24);
  border-color: rgba(74, 222, 128, 0.34);
  color: #bbf7d0;
}

.backup-protection-status-badge[data-tone="error"] {
  background: rgba(127, 29, 29, 0.26);
  border-color: rgba(248, 113, 113, 0.34);
  color: #fecaca;
}

.backup-setup-reminder[hidden] {
  display: none !important;
}

.backup-setup-reminder > div:first-child {
  display: grid;
  gap: 0.18rem;
}

.backup-setup-reminder > div:first-child span {
  color: rgba(213, 226, 245, 0.78);
  font-size: 0.82rem;
  line-height: 1.35;
}

.backup-setup-reminder .button-row {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin: 0;
}

.local-backup-metrics .local-backup-time-value {
  line-height: 1.18;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.local-backup-metrics .local-backup-time-value span {
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  display: block;
  font-size: inherit;
  padding: 0;
}

.local-backup-list-panel .local-backup-row {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.local-backup-list-panel .local-backup-row > div:first-child {
  min-width: 0;
}

.local-backup-list-panel .local-backup-row strong,
.local-backup-list-panel .local-backup-row small {
  display: block;
  overflow-wrap: anywhere;
}

.system-recording-storage-group .recording-storage-card {
  display: grid;
  gap: 0.85rem;
}

.recording-storage-intro,
.temporary-recording-manager-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.recording-storage-intro > div:first-child,
.temporary-recording-manager-header > div:first-child {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.recording-storage-intro p,
.temporary-recording-manager-header span {
  color: rgba(203, 213, 225, 0.76);
  margin: 0;
}

.system-screen .recording-storage-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
}

.temporary-recording-manager {
  border-top: 1px solid rgba(125, 211, 252, 0.18);
  display: grid;
  gap: 0.8rem;
  padding-top: 0.85rem;
}

.temporary-recording-manager[hidden] {
  display: none !important;
}

.temporary-recording-table-wrap {
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 8px;
  max-height: 30rem;
  overflow: auto;
}

.temporary-recording-table {
  border-collapse: collapse;
  min-width: 66rem;
  width: 100%;
}

.temporary-recording-table th,
.temporary-recording-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 0.58rem 0.62rem;
  text-align: left;
  vertical-align: middle;
}

.temporary-recording-table th {
  background: rgba(8, 18, 34, 0.98);
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.temporary-recording-table td {
  color: rgba(238, 245, 255, 0.9);
  font-size: 0.8rem;
}

.temporary-recording-row-actions {
  display: flex;
  gap: 0.35rem;
  white-space: nowrap;
}

.temporary-recording-row-actions .secondary-button {
  min-height: 2rem;
  padding: 0.34rem 0.52rem;
}

.journal-recording-availability {
  color: rgba(253, 230, 138, 0.86);
  margin: 0.45rem 0 0;
}

@media (max-width: 1120px) {
  .system-screen .recording-storage-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recording-storage-intro,
  .temporary-recording-manager-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1180px) {
  .system-screen .backup-method-grid {
    grid-template-columns: 1fr;
  }

  .backup-setup-reminder {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-setup-reminder .button-row {
    justify-content: flex-start;
  }
}

.backup-method-details {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  margin: 0.45rem 0 0.75rem;
  overflow: hidden;
}

.backup-method-details summary {
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  list-style-position: inside;
  padding: 0.62rem 0.72rem;
}

.backup-method-details summary:hover {
  background: rgba(255, 255, 255, 0.045);
}

.backup-method-details div {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 0.48rem;
  padding: 0.72rem;
}

.backup-method-details p {
  margin: 0;
}

.uninstall-data-safety-guidance {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.54), rgba(8, 13, 28, 0.38));
  border-color: rgba(251, 191, 36, 0.18);
  margin-top: 0.78rem;
}

.uninstall-data-safety-guidance summary {
  color: rgba(253, 230, 138, 0.9);
  font-size: 0.82rem;
  padding: 0.54rem 0.68rem;
}

.uninstall-data-safety-guidance div {
  gap: 0.38rem;
  padding: 0.62rem 0.68rem;
}

.uninstall-data-safety-guidance p {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.82rem;
  line-height: 1.42;
}

.uninstall-data-safety-guidance strong {
  color: rgba(254, 243, 199, 0.96);
}

.backup-protection-metrics {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0.85rem 0 0.95rem;
}

.backup-protection-metrics span {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(11, 18, 32, 0.72);
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.66rem 0.72rem;
}

.backup-protection-metrics strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.86rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-protection-metrics small {
  color: rgba(196, 207, 226, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-screen .backup-protection-state-pill {
  background:
    linear-gradient(135deg, rgba(71, 85, 105, 0.92), rgba(51, 65, 85, 0.76));
  border-color: rgba(203, 213, 225, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(2, 6, 23, 0.2);
  color: rgba(248, 250, 252, 0.94);
}

.system-screen .backup-protection-state-pill[data-tone="neutral"] {
  background:
    linear-gradient(135deg, rgba(51, 65, 85, 0.95), rgba(67, 56, 202, 0.32));
  border-color: rgba(167, 139, 250, 0.3);
  color: rgba(248, 250, 252, 0.94);
}

.system-screen .backup-protection-state-pill[data-tone="success"] {
  background: rgba(21, 128, 61, 0.26);
  border-color: rgba(74, 222, 128, 0.28);
  color: #bbf7d0;
}

.system-screen .backup-protection-state-pill[data-tone="warning"] {
  background: rgba(133, 77, 14, 0.28);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fde68a;
}

.system-screen .backup-protection-state-pill[data-tone="error"] {
  background: rgba(127, 29, 29, 0.28);
  border-color: rgba(248, 113, 113, 0.3);
  color: #fecaca;
}

@media (max-width: 980px) {
  .backup-protection-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.system-screen .integrity-health-summary,
.system-screen .integrity-map-panel,
.system-screen .integrity-review-panel,
.system-screen .restore-preview-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.42));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.system-screen .integrity-health-summary,
.system-screen .integrity-summary-line {
  color: rgba(226, 232, 240, 0.9);
}

.system-screen .integrity-issue,
.system-screen .integrity-empty,
.system-screen .integrity-map-card,
.system-screen .integrity-map-empty {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.58));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.system-screen .integrity-issue.is-actionable:hover,
.system-screen .integrity-issue.is-actionable:focus-visible {
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18);
}

.system-screen .integrity-pill,
.system-screen .integrity-relationship-chip,
.system-screen .integrity-map-chip {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.86);
}

.system-screen .integrity-error {
  background: rgba(127, 29, 29, 0.28);
  border-color: rgba(248, 113, 113, 0.24);
  color: #fecaca;
}

.system-screen .integrity-warning {
  background: rgba(133, 77, 14, 0.28);
  border-color: rgba(251, 191, 36, 0.26);
  color: #fde68a;
}

.system-screen .integrity-info {
  background: rgba(37, 99, 235, 0.24);
  border-color: rgba(96, 165, 250, 0.24);
  color: #bfdbfe;
}

.system-screen .integrity-action,
.system-screen .integrity-relationship-arrow {
  color: rgba(196, 181, 253, 0.82);
}

/* P10OJ Practice cleanup: keep management actions in the schedule drawer. */
body[data-current-screen="dashboard"] .current-item-utility-actions[hidden] {
  display: none !important;
}

.practice-queue-workspace-actions .practice-queue-workspace-icon-button {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  min-height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
}

.practice-queue-workspace-actions .practice-queue-workspace-icon-button svg {
  fill: none;
  height: 1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1rem;
}

.practice-queue-workspace-actions .practice-queue-workspace-delete {
  border-color: rgba(248, 113, 113, 0.16);
  color: rgba(254, 202, 202, 0.76);
}

.practice-queue-workspace-actions .practice-queue-workspace-delete:hover,
.practice-queue-workspace-actions .practice-queue-workspace-delete:focus-visible {
  background: rgba(127, 29, 29, 0.24);
  border-color: rgba(248, 113, 113, 0.34);
  color: #fecaca;
}

.practice-queue-workspace-copy {
  display: grid;
  gap: 0.26rem;
  min-width: 0;
}

.practice-queue-workspace-detail,
.queue-item-detail {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  min-width: 0;
}

.practice-queue-workspace-state,
.practice-queue-workspace-iteration,
.queue-item-state,
.queue-item-iteration {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1;
  min-height: 1.3rem;
  padding: 0.2rem 0.46rem;
  white-space: nowrap;
}

.practice-queue-workspace-iteration,
.queue-item-iteration {
  background: rgba(15, 23, 42, 0.26);
  color: rgba(203, 213, 225, 0.88);
  font-weight: 680;
}

.practice-queue-workspace-state.is-current,
.queue-item-state.is-current {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.34);
  color: rgba(219, 234, 254, 0.96);
}

.practice-queue-workspace-state.is-ready,
.queue-item-state.is-ready {
  background: rgba(45, 212, 191, 0.15);
  border-color: rgba(94, 234, 212, 0.28);
  color: rgba(204, 251, 241, 0.94);
}

.practice-queue-workspace-state.is-completed,
.queue-item-state.is-completed {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(74, 222, 128, 0.26);
  color: rgba(187, 247, 208, 0.92);
}

.practice-queue-workspace-state.is-skipped,
.queue-item-state.is-skipped {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.32);
  color: rgba(254, 243, 199, 0.94);
}

.practice-queue-workspace-state.is-pending,
.queue-item-state.is-pending {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(226, 232, 240, 0.82);
}

.practice-queue-workspace-state.is-upcoming,
.practice-queue-workspace-state.is-planned,
.queue-item-state.is-upcoming,
.queue-item-state.is-planned {
  background: rgba(148, 163, 184, 0.12);
}

/* P10OK Things To Focus On foundation. */
.things-focus-inline-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(23, 18, 49, 0.92), rgba(5, 22, 31, 0.9));
  box-shadow: 0 18px 36px rgba(10, 8, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.things-focus-inline-box > div {
  display: grid;
  gap: 0.22rem;
}

.things-focus-inline-box strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 1.02rem;
}

.things-focus-inline-box small {
  color: rgba(190, 201, 219, 0.78);
}

.current-item-focus-badge {
  border-color: rgba(139, 92, 246, 0.38);
  background: rgba(78, 48, 153, 0.34);
  color: rgba(241, 236, 255, 0.92);
}

.current-item-focus-badge.is-configured {
  border-color: rgba(99, 236, 216, 0.4);
  background:
    radial-gradient(circle at 12% 12%, rgba(99, 236, 216, 0.16), transparent 42%),
    rgba(54, 42, 126, 0.48);
  box-shadow: 0 0 20px rgba(98, 79, 236, 0.18);
}

.things-focus-backdrop {
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: rgba(1, 6, 14, 0.72);
  backdrop-filter: blur(20px);
  z-index: 1600 !important;
}

.things-focus-screen {
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(920px, calc(100vh - 2rem));
  margin: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.26), transparent 34%),
    radial-gradient(circle at 96% 12%, rgba(31, 188, 211, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(16, 18, 45, 0.98), rgba(1, 14, 24, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.things-focus-header,
.things-focus-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.1rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.things-focus-unsaved-prompt {
  display: grid;
  gap: 0.55rem;
  margin: 0 clamp(0.85rem, 3vw, 2rem) 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 14px;
  background: rgba(120, 72, 14, 0.24);
  color: #fef3c7;
}

.things-focus-unsaved-prompt[hidden] { display: none; }
.things-focus-unsaved-prompt > span { color: rgba(254, 243, 199, 0.82); font-size: 0.88rem; }
.things-focus-unsaved-prompt .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.things-focus-unsaved-prompt button { min-height: 44px; }

.things-focus-header h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: 0;
}

.things-focus-header p {
  margin: 0.25rem 0 0;
  color: rgba(203, 213, 225, 0.78);
}

.things-focus-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 3vw, 2rem);
  overflow: auto;
}

.things-focus-intro,
.things-focus-group {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(8, 20, 36, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.things-focus-intro {
  align-self: start;
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
}

.things-focus-intro p {
  margin: 0;
  color: rgba(203, 213, 225, 0.78);
}

.things-focus-enable-row {
  border-color: rgba(139, 92, 246, 0.32);
  background: rgba(139, 92, 246, 0.12);
}

.things-focus-rotation-field {
  margin: 0;
}

.things-focus-rotation-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) auto;
  align-items: center;
  gap: 0.55rem;
}

.things-focus-rotation-row input {
  width: 100%;
}

.things-focus-rotation-row span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
}

.things-focus-custom-row {
  display: flex;
  gap: 0.55rem;
}

.things-focus-custom-row input {
  min-width: 0;
  flex: 1;
}

.things-focus-prompt-groups {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.things-focus-group {
  padding: 1rem;
}

.things-focus-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.things-focus-group-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
}

.things-focus-group-header span {
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.2);
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.78rem;
}

.things-focus-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.things-focus-pill {
  min-height: 2.45rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 0.55rem 0.78rem;
  background: rgba(15, 23, 42, 0.74);
  color: rgba(226, 232, 240, 0.86);
  font: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.things-focus-pill:hover,
.things-focus-pill:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.58);
  background: rgba(64, 45, 129, 0.58);
}

.things-focus-pill.is-selected {
  border-color: rgba(99, 236, 216, 0.52);
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 236, 216, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(109, 62, 224, 0.78), rgba(20, 92, 109, 0.62));
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.14);
  color: #fff;
}

.things-focus-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 0;
}

.things-focus-footer p {
  margin: 0;
  color: rgba(203, 213, 225, 0.82);
}

@media (max-width: 760px) {
  .things-focus-backdrop {
    padding: 0;
  }

  .things-focus-screen {
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }

  .things-focus-body {
    grid-template-columns: 1fr;
  }

  .things-focus-header,
  .things-focus-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .things-focus-footer .button-row {
    width: 100%;
  }
}

/* P10OL Things To Focus On atmosphere pass: warmer focus space, less settings-modal. */
.things-focus-backdrop {
  background:
    radial-gradient(circle at 18% 12%, rgba(178, 103, 30, 0.18), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(91, 55, 22, 0.24), transparent 36%),
    rgba(2, 5, 10, 0.78);
}

.things-focus-screen {
  border-color: rgba(245, 158, 11, 0.26);
  background:
    radial-gradient(circle at 12% 4%, rgba(245, 158, 11, 0.22), transparent 30%),
    radial-gradient(circle at 80% 12%, rgba(120, 53, 15, 0.24), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(23, 15, 17, 0.98), rgba(4, 13, 22, 0.985));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.62),
    0 0 80px rgba(180, 83, 9, 0.14),
    inset 0 1px 0 rgba(255, 237, 213, 0.08);
}

.things-focus-header,
.things-focus-footer {
  border-color: rgba(245, 158, 11, 0.14);
}

.things-focus-header .eyebrow {
  color: rgba(252, 211, 77, 0.82);
}

.things-focus-header h2 {
  text-shadow: 0 0 32px rgba(245, 158, 11, 0.14);
}

.things-focus-intro,
.things-focus-group {
  border-color: rgba(245, 158, 11, 0.16);
  background:
    radial-gradient(circle at 8% 0%, rgba(245, 158, 11, 0.11), transparent 42%),
    rgba(10, 18, 29, 0.58);
}

.things-focus-intro strong {
  color: rgba(255, 247, 237, 0.96);
  font-size: 1.08rem;
}

.things-focus-enable-row {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(120, 53, 15, 0.24);
}

.things-focus-rotation-row input {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(2, 6, 23, 0.62);
}

.things-focus-group-header h3 {
  color: rgba(254, 243, 199, 0.96);
}

.things-focus-group-header span {
  background: rgba(120, 53, 15, 0.42);
  color: rgba(254, 243, 199, 0.9);
}

.things-focus-pill {
  border-color: rgba(251, 191, 36, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 191, 36, 0.08), transparent 38%),
    rgba(12, 20, 32, 0.72);
  color: rgba(241, 245, 249, 0.88);
}

.things-focus-pill:hover,
.things-focus-pill:focus-visible {
  border-color: rgba(251, 191, 36, 0.42);
  background:
    radial-gradient(circle at 10% 0%, rgba(251, 191, 36, 0.18), transparent 46%),
    rgba(51, 35, 23, 0.72);
}

.things-focus-pill.is-selected {
  border-color: rgba(253, 186, 116, 0.62);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 237, 213, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(180, 83, 9, 0.82), rgba(88, 58, 22, 0.72));
  box-shadow:
    0 0 28px rgba(245, 158, 11, 0.18),
    inset 0 1px 0 rgba(255, 237, 213, 0.16);
}

.things-focus-custom-row input {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(2, 6, 23, 0.62);
}

/* Build 3G: touch-safe Compact Focus editor without changing the canonical editor route. */
.things-focus-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
}

.things-focus-header .modal-close-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  justify-self: end;
  border-radius: 50%;
  font-size: 1.55rem;
  line-height: 1;
}

.things-focus-custom-input {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}

.things-focus-custom-input > input {
  width: 100%;
  min-height: 46px;
  padding-right: 48px;
}

.things-focus-speech-mount {
  position: absolute;
  top: 3px;
  right: 3px;
}

.things-focus-speech-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 7px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 50%;
  background: rgba(45, 31, 21, 0.92);
  color: #fde68a;
}

.things-focus-speech-button .speech-mic-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.things-focus-speech-button .speech-mic-icon,
.things-focus-speech-button svg { display: block; width: 100%; height: 100%; }
.things-focus-speech-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.things-focus-speech-button[data-speech-state="listening"] { border-color: #67e8f9; color: #a5f3fc; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16); }
.things-focus-speech-button[data-speech-state="unsupported"] { opacity: 0.48; }
.things-focus-speech-status { min-height: 1.2em; color: rgba(226, 232, 240, 0.76); font-size: 0.76rem; line-height: 1.3; }
.things-focus-speech-status:empty { display: none; }
.things-focus-speech-status[data-state="listening"] { color: #a5f3fc; }
.things-focus-speech-status[data-state="error"] { color: #fecaca; }

@media (max-width: 760px) {
  .things-focus-screen {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .things-focus-header {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.65rem;
    padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.85rem 0.7rem;
  }

  .things-focus-header h2 { font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.08; }
  .things-focus-header p { max-width: 30rem; font-size: 0.82rem; line-height: 1.35; }
  .things-focus-header .modal-close-button { display: grid; place-items: center; }

  .things-focus-body {
    display: block;
    padding: 0.7rem 0.8rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .things-focus-intro { gap: 0.75rem; padding: 0.85rem; }
  .things-focus-intro > p { font-size: 0.84rem; }
  .things-focus-rotation-row { grid-template-columns: minmax(5.4rem, 7rem) minmax(0, 1fr); }
  .things-focus-rotation-row input { min-width: 0; min-height: 44px; }
  .things-focus-rotation-row span { white-space: nowrap; }
  .things-focus-custom-row { align-items: stretch; }
  .things-focus-custom-row > button { flex: 0 0 auto; width: auto !important; min-width: 58px; min-height: 46px; padding-inline: 0.8rem; }
  .things-focus-prompt-groups { margin-top: 0.75rem; }
  .things-focus-group { padding: 0.82rem; }
  .things-focus-pill { min-height: 44px; }

  .things-focus-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  }

  .things-focus-footer .button-row { width: auto; flex-wrap: nowrap; }
  .things-focus-footer .button-row button { width: auto; min-height: 44px; padding-inline: 0.8rem; white-space: nowrap; }
}

@media (max-width: 370px) {
  .things-focus-footer { grid-template-columns: 1fr; }
  .things-focus-footer .button-row { justify-content: stretch; }
  .things-focus-footer .button-row button { flex: 1 1 0; }
}

.practice-focus-card {
  position: relative;
}

.practice-focus-rotation {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 5vw, 5.5rem);
  width: min(25rem, 42%);
  transform: translateY(-50%) translateX(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
  z-index: 3;
}

.practice-focus-rotation.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.practice-focus-rotation-orb {
  position: absolute;
  top: 50%;
  left: -0.35rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow:
    0 0 18px rgba(251, 191, 36, 0.62),
    0 0 54px rgba(180, 83, 9, 0.38);
  transform: translateY(-50%);
  pointer-events: none;
}

.practice-focus-rotation-cue {
  height: 10.8rem;
  min-height: 10.8rem;
  display: grid;
  align-content: center;
  gap: 0.72rem;
  overflow: hidden;
  padding: 1.25rem 1.35rem 1.25rem 1.65rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 8%, rgba(251, 191, 36, 0.17), transparent 42%),
    linear-gradient(135deg, rgba(28, 18, 20, 0.82), rgba(5, 16, 24, 0.76));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    0 0 52px rgba(146, 64, 14, 0.12),
    inset 0 1px 0 rgba(255, 237, 213, 0.08);
  opacity: 0;
  transform: translateY(0.22rem);
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.practice-focus-rotation-cue[hidden] {
  display: none !important;
}

.practice-focus-rotation-cue small {
  color: rgba(252, 211, 77, 0.86);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.practice-focus-rotation-text {
  align-items: center;
  color: rgba(255, 251, 235, 0.96);
  display: grid;
  font-size: clamp(1.34rem, 2.05vw, 1.86rem);
  font-weight: 750;
  line-height: 1.12;
  min-height: 6.7rem;
  text-shadow: 0 0 24px rgba(245, 158, 11, 0.11);
}

.practice-focus-rotation-cue.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 480ms ease,
    transform 480ms ease;
}

.guidance-inline-box {
  align-items: stretch;
  gap: 1rem;
}

.guidance-inline-header {
  min-width: min(16rem, 100%);
}

.guidance-editor {
  flex: 1 1 28rem;
  display: grid;
  gap: 0.85rem;
}

.guidance-key-options {
  display: grid;
  gap: 0.85rem;
}

.guidance-key-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(210, 246, 255, 0.9);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guidance-key-header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.guidance-key-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(2.8rem, 1fr));
  gap: 0.48rem;
}

.guidance-key-chip {
  min-height: 2.45rem;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 14px;
  background: rgba(2, 12, 24, 0.62);
  color: rgba(226, 242, 255, 0.88);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.guidance-key-chip:hover,
.guidance-key-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.6);
  outline: none;
}

.guidance-key-chip.is-selected {
  border-color: rgba(45, 212, 191, 0.72);
  background:
    radial-gradient(circle at 20% 18%, rgba(45, 212, 191, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(17, 94, 89, 0.74), rgba(88, 80, 236, 0.58));
  color: white;
  box-shadow: 0 14px 30px rgba(20, 184, 166, 0.18);
}

.guidance-key-options .field-hint {
  display: block;
  margin-top: 0.3rem;
  color: rgba(148, 163, 184, 0.78);
  font-size: 0.76rem;
  line-height: 1.35;
}

.practice-focus-rotation.has-key-guidance {
  width: min(31rem, 48%);
  pointer-events: auto;
}

.practice-focus-rotation:has(.practice-key-guidance:not([hidden])) {
  pointer-events: auto;
}

.practice-focus-rotation.has-key-guidance .practice-focus-rotation-cue:not([hidden]) {
  margin-bottom: 0.72rem;
}

.practice-key-guidance {
  display: grid;
  gap: 0.34rem;
  max-height: min(27rem, 56vh);
  overflow: auto;
  padding: 1rem 1.1rem 1.05rem 1.35rem;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.19), transparent 42%),
    linear-gradient(135deg, rgba(5, 24, 32, 0.86), rgba(20, 18, 48, 0.76));
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(204, 251, 241, 0.08);
}

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

.practice-key-guidance small,
.practice-key-guidance-label {
  color: rgba(94, 234, 212, 0.86);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.practice-key-guidance-current {
  color: rgba(240, 253, 250, 0.98);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  text-shadow: 0 0 28px rgba(45, 212, 191, 0.18);
}

.practice-key-guidance-progress,
.practice-key-guidance-next {
  color: rgba(209, 250, 229, 0.78);
  font-size: 0.9rem;
  font-weight: 700;
}

.practice-key-guidance button {
  justify-self: start;
  margin-top: 0.3rem;
}

.practice-key-guidance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.practice-key-guidance-actions button {
  margin-top: 0;
}

.practice-key-guidance-key-list,
.practice-key-guidance-other {
  display: grid;
  gap: 0.36rem;
  margin-top: 0.45rem;
}

.practice-key-guidance-section-label {
  color: rgba(148, 163, 184, 0.82);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-key-guidance-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.practice-key-jump-chip {
  min-height: 1.85rem;
  min-width: 2.35rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 999px;
  background: rgba(2, 12, 24, 0.58);
  color: rgba(226, 242, 255, 0.82);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0.3rem 0.58rem;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.practice-key-jump-chip:hover,
.practice-key-jump-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.58);
  outline: none;
}

.practice-key-jump-chip.is-current {
  border-color: rgba(191, 219, 254, 0.78);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(124, 58, 237, 0.86));
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 24px rgba(59, 130, 246, 0.24);
}

.practice-key-jump-chip.is-completed {
  border-color: rgba(52, 211, 153, 0.72);
  background:
    radial-gradient(circle at 14% 10%, rgba(52, 211, 153, 0.3), transparent 44%),
    linear-gradient(135deg, rgba(6, 95, 70, 0.82), rgba(20, 83, 45, 0.58));
  color: rgba(236, 253, 245, 0.96);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.16),
    0 0 18px rgba(16, 185, 129, 0.16);
}

.practice-key-jump-chip.is-completed::before {
  content: "✓";
  display: inline-block;
  font-weight: 950;
  margin-right: 0.28rem;
}

.practice-key-jump-chip.is-remaining {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(30, 64, 175, 0.36);
  color: rgba(219, 234, 254, 0.9);
}

.practice-key-jump-chip.is-available {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.36);
  color: rgba(203, 213, 225, 0.72);
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
  grid-column: 1 / 2 !important;
  align-self: end !important;
  justify-self: start !important;
  position: relative !important;
  z-index: 8 !important;
  margin: 0.75rem 0 0 !important;
  width: min(24rem, 100%) !important;
  max-width: min(24rem, 100%) !important;
  overflow: hidden !important;
  border: 1px solid rgba(125, 211, 252, 0.13) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 42%),
    rgba(4, 13, 24, 0.72) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(226, 242, 255, 0.05) !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 2.75rem !important;
  padding: 0.52rem 0.78rem !important;
  color: rgba(226, 242, 255, 0.9) !important;
  cursor: pointer !important;
  list-style: none !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary::-webkit-details-marker {
  display: none !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary span {
  color: rgba(240, 253, 250, 0.96) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary span::after {
  content: " ▼";
  color: rgba(94, 234, 212, 0.72);
  font-size: 0.72em;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary small {
  color: rgba(148, 163, 184, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] {
  justify-self: stretch !important;
  width: min(50rem, 100%) !important;
  max-width: min(50rem, 100%) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(4, 13, 24, 0.92), rgba(9, 15, 31, 0.88)) !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] summary span::after {
  content: " ▲";
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]) {
  min-height: clamp(24rem, 34vw, 30rem) !important;
  align-content: end !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
  max-height: min(12rem, 24vh) !important;
  overflow: auto !important;
  padding: 0 0.9rem 0.9rem !important;
  color: rgba(203, 213, 225, 0.9) !important;
  font-size: 0.9rem !important;
  line-height: 1.52 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body p {
  margin: 0.7rem 0 0 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body p:first-child {
  margin-top: 0 !important;
}

@media (max-width: 840px) {
  .practice-focus-rotation {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 1rem;
    transform: translateY(0);
  }

  .practice-focus-rotation.is-active {
    transform: translateY(0);
  }
}

/* P10PJ Practice vertical space cleanup: tighter dashboard, intentional hero ambience. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen {
    padding: clamp(0.78rem, 1.25vw, 1.12rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    margin-bottom: 0.52rem !important;
    min-height: 0 !important;
    padding-block: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    font-size: clamp(1.46rem, 1.65vw, 1.9rem) !important;
    line-height: 1.03 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
    margin: 0.12rem 0 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    gap: clamp(0.5rem, 0.75vw, 0.72rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-columns: minmax(0, 0.64fr) minmax(14rem, 0.36fr) !important;
    min-height: clamp(15.8rem, 20vw, 18.8rem) !important;
    padding: clamp(1.16rem, 2vw, 1.78rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::before {
    background:
      linear-gradient(116deg, transparent 28%, rgba(225, 154, 92, 0.24) 28.2%, transparent 28.7%),
      linear-gradient(115deg, transparent 36%, rgba(231, 173, 111, 0.18) 36.18%, transparent 36.68%),
      linear-gradient(114deg, transparent 44%, rgba(231, 173, 111, 0.12) 44.16%, transparent 44.68%),
      radial-gradient(ellipse at 72% 44%, rgba(214, 127, 68, 0.34), transparent 20%),
      radial-gradient(ellipse at 83% 28%, rgba(251, 191, 36, 0.11), transparent 18%),
      repeating-linear-gradient(104deg, transparent 0 1.05rem, rgba(255, 236, 190, 0.035) 1.07rem 1.12rem, transparent 1.14rem 2.18rem),
      linear-gradient(76deg, transparent 18%, rgba(94, 57, 35, 0.24) 33%, rgba(16, 12, 13, 0.2) 50%, transparent 70%) !important;
    inset: -22% -9% -10% 42% !important;
    opacity: 0.82 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card::after {
    background:
      radial-gradient(ellipse at 76% 42%, rgba(255, 214, 156, 0.075), transparent 20%),
      radial-gradient(ellipse at 91% 72%, rgba(180, 83, 9, 0.12), transparent 24%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 18px),
      linear-gradient(180deg, transparent 52%, rgba(3, 6, 13, 0.56) 100%) !important;
    opacity: 0.82 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-copy {
    gap: 0.38rem !important;
    max-width: min(50rem, 64%) !important;
    transform: none !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .eyebrow {
    font-size: 0.62rem !important;
    padding: 0.34rem 0.58rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(1.9rem, 2.75vw, 3.05rem) !important;
    line-height: 1.05 !important;
    margin-top: 0.18rem !important;
    max-width: 18ch !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card #currentItemMeta {
    font-size: clamp(0.88rem, 1vw, 1.02rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card .description {
    font-size: 0.88rem !important;
    line-height: 1.42 !important;
    max-width: 38rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-context-badges {
    gap: 0.38rem !important;
    margin-top: 0.22rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-context-badge {
    min-height: 1.78rem !important;
    padding: 0.28rem 0.56rem !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    margin: 0.72rem 0.78rem 0 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation {
    right: clamp(0.8rem, 3vw, 3rem);
    width: min(22rem, 36%);
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation.has-key-guidance {
    width: min(31rem, 48%) !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation-cue {
    min-height: 6.3rem;
    padding: 0.92rem 1rem 0.92rem 1.28rem;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation-text {
    font-size: clamp(1rem, 1.65vw, 1.32rem);
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #startItemButton,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #doneItemButton,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > #skipItemButton {
    min-block-size: 3.82rem !important;
    min-height: 3.82rem !important;
    padding: 0.62rem 0.78rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy strong {
    font-size: 0.9rem !important;
  }

  body[data-current-screen="dashboard"] .p10eb-action-copy small {
    font-size: 0.68rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard {
    overflow: visible !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail,
  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-open-body {
    align-content: stretch !important;
    gap: 0.32rem !important;
    overflow: visible !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.24rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    min-height: 1.82rem !important;
    padding-block: 0.16rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    gap: 0.32rem !important;
    overflow: visible !important;
    padding-bottom: 0.05rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    min-height: 1.92rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-reference-badge {
    cursor: pointer !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box.is-reference-jump-highlight {
    animation: referenceJumpPulse 1.45s ease;
  }
}

@keyframes referenceJumpPulse {
  0% {
    border-color: rgba(45, 212, 191, 0.78);
    box-shadow:
      0 0 0 0 rgba(45, 212, 191, 0.42),
      0 18px 48px rgba(0, 0, 0, 0.14);
  }
  45% {
    border-color: rgba(251, 191, 36, 0.56);
    box-shadow:
      0 0 0 6px rgba(251, 191, 36, 0.11),
      0 22px 58px rgba(0, 0, 0, 0.2);
  }
  100% {
    border-color: rgba(221, 230, 247, 0.075);
    box-shadow:
      0 0 0 0 rgba(45, 212, 191, 0),
      0 18px 48px rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 761px) and (max-height: 850px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    min-height: clamp(14.2rem, 18.4vw, 16.8rem) !important;
    padding-block: clamp(0.95rem, 1.55vw, 1.35rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button {
    min-height: 3.48rem !important;
    min-block-size: 3.48rem !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-card h3 {
    font-size: clamp(1.72rem, 2.45vw, 2.72rem) !important;
  }
}

@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    box-sizing: border-box !important;
    display: grid !important;
    gap: 0.38rem !important;
    max-width: min(50rem, 100%) !important;
    padding: 0 !important;
    width: min(50rem, 100%) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription {
    max-width: min(100%, 46rem) !important;
    width: auto !important;
  }
}

@media (min-width: 761px) {
  #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  main.practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    box-sizing: border-box !important;
    display: grid !important;
    gap: 0.38rem !important;
    max-width: min(51rem, 100%) !important;
    padding: 0 !important;
    width: min(51rem, 100%) !important;
  }

  #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  main.practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    max-width: min(100%, 48rem) !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    width: auto !important;
  }

  #sessionPanel.practice-player > .practice-focus-card #currentItemDescription,
  .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription,
  main.practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription {
    max-width: min(100%, 42rem) !important;
    width: auto !important;
  }
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* P10PM Schedules mode split: Basic playlist facade, Advanced block builder. */
.schedule-builder-header {
  align-items: center;
}

.schedule-builder-help-button {
  align-items: center;
  border-radius: 999px;
  display: none !important;
  font-size: 1rem;
  font-weight: 900;
  height: 2.4rem;
  justify-content: center;
  padding: 0;
  width: 2.4rem;
}

.schedule-builder-help-panel[hidden],
.schedule-basic-grid[hidden],
.schedule-builder-grid[hidden],
[data-schedule-help-basic][hidden],
[data-schedule-help-advanced][hidden] {
  display: none !important;
}

.schedule-builder-help-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 22rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(8, 15, 28, 0.9));
  border: 1px solid rgba(168, 139, 250, 0.22);
  border-radius: 1rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  margin-bottom: 1rem;
  padding: 1rem;
}

.schedule-basic-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  min-height: min(68vh, 48rem);
}

.schedule-basic-current-panel,
.schedule-basic-catalog-panel {
  min-height: 0;
}

.schedule-basic-current-panel .schedule-builder-current-heading {
  align-items: start;
  gap: 0.8rem;
}

.schedule-basic-current-panel .schedule-builder-current-heading > div:first-child {
  display: grid;
  gap: 0.34rem;
  min-width: min(100%, 22rem);
}

.schedule-basic-current-panel .schedule-builder-current-heading > div:first-child > span {
  display: block;
  max-width: 24rem;
}

.schedule-basic-selector {
  background: rgba(3, 8, 20, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.72rem;
  color: #f8fbff;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 900;
  margin-top: 0.35rem;
  max-width: min(100%, 28rem);
  padding: 0.72rem 0.9rem;
}

.schedule-basic-item-list {
  display: grid;
  gap: 0.66rem;
  max-height: clamp(24rem, 54vh, 38rem);
  min-height: 18rem;
  overflow: auto;
  padding-right: 0.18rem;
}

.schedule-basic-behavior {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  padding: 0.28rem;
}

.schedule-basic-behavior p {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0 0.36rem 0 0.5rem;
  text-transform: uppercase;
}

.schedule-basic-behavior label {
  align-items: center;
  background: rgba(3, 8, 20, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  color: #e9eef9;
  display: inline-flex;
  font-weight: 800;
  gap: 0.42rem;
  min-height: 1.9rem;
  padding: 0.3rem 0.66rem;
}

.schedule-basic-behavior label.is-selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.88), rgba(20, 184, 166, 0.58));
  border-color: rgba(196, 181, 253, 0.34);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.18), inset 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
}

.schedule-basic-behavior input {
  accent-color: #8b5cf6;
  height: 0.9rem;
  width: 0.9rem;
}

.schedule-basic-items-scroll {
  display: grid;
  gap: 0.66rem;
  min-height: 15rem;
}

.schedule-basic-empty {
  min-height: 18rem;
}

.schedule-basic-item-row {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(27, 39, 72, 0.82), rgba(9, 18, 35, 0.88)),
    radial-gradient(circle at 0% 0%, rgba(125, 92, 255, 0.16), transparent 12rem);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.9rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.12);
  cursor: grab;
  display: grid;
  gap: 0.72rem;
  min-height: 4.35rem;
  padding: 0.72rem 0.82rem;
}

.schedule-basic-item-main {
  align-items: center;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.schedule-builder-drag-handle {
  align-items: center;
  align-self: stretch;
  color: rgba(203, 213, 225, 0.62);
  cursor: grab;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 900;
  justify-content: center;
  letter-spacing: -0.18em;
  min-width: 1.1rem;
  opacity: 0.84;
  touch-action: none;
}

.schedule-builder-drag-handle:hover {
  color: #ffffff;
  opacity: 1;
}

.schedule-basic-item-row:hover,
.schedule-basic-item-row.is-dragging {
  border-color: rgba(168, 139, 250, 0.42);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.22), 0 20px 50px rgba(46, 16, 101, 0.22);
}

.schedule-basic-item-copy,
.schedule-builder-item-expand,
.schedule-builder-block-item-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.schedule-builder-item-expand {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.schedule-builder-item-expand:hover strong {
  color: #ffffff;
}

.schedule-builder-item-expand:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

.schedule-builder-item-expand:focus-visible {
  border-radius: 0.45rem;
  outline: 2px solid rgba(168, 139, 250, 0.72);
  outline-offset: 3px;
}

.schedule-basic-item-copy strong,
.schedule-builder-item-expand strong,
.schedule-builder-block-item-copy strong {
  color: #f8fbff;
  font-size: 0.98rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-basic-item-copy small,
.schedule-builder-item-expand small,
.schedule-builder-item-expand em,
.schedule-builder-block-item-copy small,
.schedule-builder-block-item-copy em {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.78rem;
}

.schedule-builder-item-expand em,
.schedule-builder-block-item-copy em {
  display: block;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-basic-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.schedule-builder-item-expanded {
  background: rgba(3, 8, 20, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.78rem;
  display: grid;
  gap: 0.7rem;
  margin-left: clamp(0rem, 5vw, 4.7rem);
  padding: 0.8rem;
}

.schedule-builder-block-expanded-items {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.schedule-builder-item-expanded.is-block-item {
  margin-left: 0;
}

.schedule-builder-item-expanded p {
  color: rgba(237, 242, 250, 0.88);
  line-height: 1.45;
  margin: 0;
}

.schedule-builder-item-detail-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.schedule-builder-item-detail-grid span {
  background: rgba(15, 23, 42, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.62rem;
  color: rgba(226, 232, 240, 0.82);
  display: grid;
  gap: 0.18rem;
  padding: 0.55rem 0.65rem;
}

.schedule-builder-item-detail-grid strong {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-basic-catalog {
  display: grid;
  gap: 0.45rem;
  min-height: 0;
}

.schedule-basic-catalog .schedule-builder-picker-list {
  max-height: clamp(30rem, 64vh, 46rem);
  overflow: auto;
}

.schedule-basic-advanced-notice,
.schedule-basic-catalog-disabled {
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.14), transparent 18rem),
    linear-gradient(135deg, rgba(36, 24, 54, 0.92), rgba(8, 15, 28, 0.88));
  border: 1px solid rgba(251, 191, 36, 0.26);
  border-radius: 1rem;
  color: #f8fbff;
  display: grid;
  gap: 0.65rem;
  margin: 0.1rem 0;
  padding: 1.1rem;
}

.schedule-basic-advanced-notice strong,
.schedule-basic-catalog-disabled strong {
  font-size: 1.05rem;
}

.schedule-basic-advanced-notice p,
.schedule-basic-catalog-disabled p {
  color: rgba(226, 232, 240, 0.78);
  margin: 0;
}

.schedule-builder-block-main .schedule-builder-drag-handle {
  margin-left: -0.1rem;
}

.schedule-builder-block-items {
  max-height: clamp(10rem, 26vh, 20rem);
  overflow: auto;
}

.schedule-builder-block-card.is-expanded .schedule-builder-block-items {
  max-height: none;
  overflow: visible;
}

.schedule-builder-block-item-row {
  align-items: center;
  align-content: start;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.78rem;
  color: #f8fbff;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  padding: 0.58rem 0.65rem;
}

.schedule-builder-block-item-main {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.schedule-builder-block-item-row.is-dragging {
  opacity: 0.68;
}

.schedule-builder-block-item-row .schedule-builder-item-expand strong,
.schedule-builder-block-item-row .schedule-builder-item-expand small,
.schedule-builder-block-item-row .schedule-builder-item-expand em,
.schedule-builder-block-item-row .schedule-builder-block-item-copy strong,
.schedule-builder-block-item-row .schedule-builder-block-item-copy small,
.schedule-builder-block-item-row .schedule-builder-block-item-copy em {
  color: inherit;
}

.schedule-builder-block-item-row .schedule-builder-item-expand small,
.schedule-builder-block-item-row .schedule-builder-item-expand em,
.schedule-builder-block-item-row .schedule-builder-block-item-copy small,
.schedule-builder-block-item-row .schedule-builder-block-item-copy em {
  color: rgba(203, 213, 225, 0.78);
}

.schedule-builder-block-item-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.schedule-builder-block-more {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
  padding-inline: 0.35rem;
}

.schedule-builder-picker-row {
  align-items: center;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.72rem;
  color: #f8fbff;
  cursor: grab;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.56rem 0.62rem;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.schedule-builder-picker-row:hover,
.schedule-builder-picker-row:focus-visible {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(94, 234, 212, 0.26);
}

.schedule-builder-picker-row.is-selected {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.34), rgba(37, 99, 235, 0.22)),
    rgba(9, 28, 44, 0.94);
  border-color: rgba(125, 249, 232, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(125, 249, 232, 0.4),
    inset 4px 0 0 rgba(45, 212, 191, 0.92),
    0 0 0 1px rgba(45, 212, 191, 0.26),
    0 14px 30px rgba(8, 47, 73, 0.32);
}

.schedule-builder-picker-row.is-selected > .schedule-builder-mini-icon {
  background: rgba(204, 251, 241, 0.18);
  border-color: rgba(153, 246, 228, 0.6);
  color: #f8fbff;
}

.schedule-builder-picker-row.is-selected .schedule-builder-picker-copy strong {
  color: #fff;
}

.schedule-builder-picker-row.is-selected .schedule-builder-picker-copy small {
  color: rgba(219, 234, 254, 0.9);
}

.schedule-builder-picker-row.is-dragging {
  opacity: 0.72;
  transform: scale(0.995);
}

.schedule-builder-picker-row > .schedule-builder-drag-handle {
  flex: 0 0 1rem;
  justify-content: center;
  width: 1rem;
}

.schedule-builder-picker-row > .schedule-builder-mini-icon {
  flex: 0 0 2rem;
  height: 2rem;
  width: 2rem;
}

.schedule-builder-type-card::before {
  color: rgba(203, 213, 225, 0.5);
  content: "⋮⋮";
  font-weight: 900;
  letter-spacing: -0.18em;
}

.schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) {
  flex: 1 1 12rem;
  min-width: 0;
  text-align: left;
}

.schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) strong,
.schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small {
  display: block;
  overflow-wrap: anywhere;
}

.schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small {
  color: rgba(203, 213, 225, 0.76);
}

.schedule-builder-picker-row > button {
  flex: 0 0 auto;
  margin-left: auto;
}

.schedule-builder-picker-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.34rem;
  justify-content: flex-end;
  margin-left: auto;
}

.schedule-builder-picker-actions > button {
  flex: 0 0 auto;
}

.schedule-builder-archive-item-button {
  background: rgba(15, 23, 42, 0.48);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(203, 213, 225, 0.84);
}

.schedule-builder-archive-item-button:hover,
.schedule-builder-archive-item-button:focus-visible {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(94, 234, 212, 0.34);
  color: rgba(240, 253, 250, 0.96);
}

.schedule-builder-picker-empty-state {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.1), transparent 14rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.62), rgba(3, 8, 20, 0.56));
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  color: rgba(226, 232, 240, 0.86);
  display: grid;
  justify-items: center;
  min-height: 15rem;
  padding: 1.3rem;
  text-align: center;
}

.schedule-builder-picker-empty-icon {
  align-items: center;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 999px;
  color: #9ff7ea;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: 900;
  height: 2.5rem;
  justify-content: center;
  margin-bottom: 0.35rem;
  width: 2.5rem;
}

.schedule-builder-picker-empty-state strong {
  color: #f8fbff;
  font-size: 1rem;
}

.schedule-builder-picker-empty-state p,
.schedule-builder-picker-empty-state small {
  color: rgba(203, 213, 225, 0.78);
  margin: 0;
}

.schedule-builder-picker-empty-state small {
  max-width: 18rem;
}

.schedule-builder-queue-empty {
  background: rgba(15, 23, 42, 0.48);
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 0.62rem;
  color: rgba(226, 232, 240, 0.8);
  margin: 0;
  padding: 0.75rem 0.85rem;
}

.schedule-builder-type-card {
  cursor: grab;
}

body.is-zb-basic-mode .schedule-builder-screen .schedule-builder-type-panel,
body.is-zb-basic-mode .schedule-builder-screen [data-schedule-advanced-shell] {
  display: none !important;
}

body.is-zb-advanced-mode .schedule-builder-screen [data-schedule-basic-shell] {
  display: none !important;
}

@media (max-width: 980px) {
  .schedule-basic-grid {
    grid-template-columns: 1fr;
  }

  .schedule-basic-item-list,
  .schedule-basic-catalog .schedule-builder-picker-list {
    max-height: none;
  }
}

/* P10PK System redesign foundation: user settings, protection, recovery, and developer separation. */
.system-screen {
  background:
    radial-gradient(circle at 88% 0%, rgba(56, 189, 248, 0.13), transparent 28rem),
    radial-gradient(circle at 8% 18%, rgba(148, 163, 184, 0.11), transparent 24rem),
    linear-gradient(145deg, rgba(10, 18, 31, 0.96), rgba(5, 10, 20, 0.98)) !important;
  border-color: rgba(190, 205, 224, 0.16) !important;
  color: #eef5ff;
}

.system-redesign-header {
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}

.system-redesign-shell {
  display: grid;
  gap: clamp(1rem, 1.65vw, 1.45rem);
}

.system-redesign-group {
  background:
    linear-gradient(150deg, rgba(21, 31, 47, 0.78), rgba(9, 17, 30, 0.82));
  border: 1px solid rgba(196, 211, 230, 0.13);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.18);
  padding: clamp(1rem, 1.8vw, 1.35rem);
}

.system-redesign-group-heading {
  align-items: end;
  border-bottom: 1px solid rgba(196, 211, 230, 0.11);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.82rem;
}

.system-redesign-group-heading h3 {
  color: rgba(242, 247, 255, 0.94);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.2;
  margin: 0;
}

.system-card-grid {
  display: grid;
  gap: 0.92rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-card-grid-large {
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.82fr);
}

.system-card-grid-large .backup-restore-panel {
  grid-column: 2;
}

.system-redesign-card,
.developer-card,
.system-about-card,
.system-settings-grid {
  background:
    linear-gradient(150deg, rgba(31, 42, 59, 0.74), rgba(12, 22, 36, 0.86));
  border: 1px solid rgba(196, 211, 230, 0.13);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.system-screen .system-redesign-card.placeholder-panel,
.developer-screen .developer-card.placeholder-panel,
.system-screen .system-health-panel {
  padding: 1rem;
}

.system-screen .system-card-feature {
  grid-row: span 2;
}

.system-screen .system-section-kicker {
  color: rgba(147, 197, 253, 0.88) !important;
  letter-spacing: 0.1em;
}

.system-screen .placeholder-panel > strong,
.system-screen .system-redesign-card > strong,
.developer-screen .developer-card > strong {
  color: rgba(248, 251, 255, 0.95) !important;
  font-size: 1.04rem;
}

.system-screen .placeholder-panel p,
.system-screen .system-health-panel p,
.developer-screen .developer-card p {
  color: rgba(219, 229, 241, 0.7) !important;
}

.system-settings-grid {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1rem;
}

.system-setting-row {
  align-items: center;
  background: rgba(8, 15, 27, 0.62);
  border: 1px solid rgba(196, 211, 230, 0.11);
  border-radius: 14px;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 4.2rem;
  padding: 0.78rem 0.85rem;
}

.system-setting-row strong {
  color: rgba(248, 251, 255, 0.94);
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
}

.system-setting-row small {
  color: rgba(203, 213, 225, 0.68);
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.system-setting-row select,
.system-setting-row input[type="text"],
.system-setting-row input[type="number"] {
  background: rgba(4, 10, 19, 0.78);
  border: 1px solid rgba(196, 211, 230, 0.18);
  border-radius: 12px;
  color: #f8fbff;
  min-height: 2.35rem;
  padding: 0.4rem 0.68rem;
}

.system-setting-row input[type="checkbox"] {
  accent-color: #60a5fa;
  height: 1.15rem;
  width: 1.15rem;
}

.system-screen .integrity-health-panel {
  background:
    linear-gradient(145deg, rgba(24, 35, 52, 0.78), rgba(9, 17, 30, 0.88)) !important;
  border-color: rgba(147, 197, 253, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.16) !important;
}

.system-about-card {
  align-items: center;
  cursor: default;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.95rem 1rem;
}

.system-about-card:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.72);
  outline-offset: 3px;
}

.system-about-card strong,
.system-about-card b {
  color: rgba(248, 251, 255, 0.96);
}

.system-about-card small,
.system-about-card span {
  color: rgba(203, 213, 225, 0.72);
}

.system-about-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.system-about-meta > span,
.developer-mode-status {
  background: rgba(8, 15, 27, 0.58);
  border: 1px solid rgba(196, 211, 230, 0.12);
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
}

.system-build-copy-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.72rem;
}

.system-copy-build-button {
  background: rgba(8, 15, 27, 0.58) !important;
  border-color: rgba(96, 165, 250, 0.26) !important;
  border-radius: 999px !important;
  color: rgba(226, 237, 250, 0.92) !important;
  min-height: 2.35rem !important;
  padding: 0.42rem 0.86rem !important;
}

.system-copy-build-button:hover,
.system-copy-build-button:focus-visible {
  background: rgba(30, 64, 175, 0.24) !important;
  border-color: rgba(125, 211, 252, 0.42) !important;
  color: #ffffff !important;
}

.is-developer-mode .developer-mode-status {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.36);
  color: rgba(219, 234, 254, 0.94);
}

.developer-screen {
  background:
    radial-gradient(circle at 82% 6%, rgba(96, 165, 250, 0.12), transparent 28rem),
    linear-gradient(145deg, rgba(10, 18, 31, 0.96), rgba(5, 10, 20, 0.98)) !important;
  border-color: rgba(190, 205, 224, 0.14) !important;
}

.developer-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-upper-prototype-card {
  grid-column: 1 / -1;
  overflow: hidden;
}

.dynamic-prototype-card-header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.dynamic-prototype-frame-note {
  align-items: center;
  background: rgba(2, 6, 23, 0.44);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 12px;
  color: rgba(203, 213, 225, 0.76);
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  margin-top: 0.85rem;
  padding: 0.52rem 0.68rem;
}

.dynamic-prototype-frame-note strong {
  color: rgba(240, 253, 250, 0.95);
  flex: 0 0 auto;
  font-size: 0.82rem;
  line-height: 1.2;
}

.dynamic-prototype-frame-note span {
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: right;
}

.dynamic-workspace-probe-banner {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.2), transparent 18rem),
    linear-gradient(135deg, rgba(8, 47, 73, 0.84), rgba(6, 78, 59, 0.78));
  border: 1px solid rgba(94, 234, 212, 0.36);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(8, 47, 73, 0.22);
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding: 0.68rem 0.78rem;
}

.dynamic-workspace-probe-banner[hidden] {
  display: none;
}

.dynamic-workspace-probe-banner strong {
  color: rgba(240, 253, 250, 0.98);
  display: block;
  line-height: 1.2;
  margin-top: 0.1rem;
}

.dynamic-workspace-probe-banner small {
  color: rgba(204, 251, 241, 0.78);
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}

.dynamic-workspace-probe-banner .secondary-button {
  background: rgba(240, 253, 250, 0.92) !important;
  border-color: rgba(153, 246, 228, 0.72) !important;
  color: #064e3b !important;
  flex: 0 0 auto;
}

.dynamic-upper-prototype-card.is-current-practice-preview {
  border-color: rgba(94, 234, 212, 0.34) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.1), 0 22px 48px rgba(8, 47, 73, 0.16);
}

.dynamic-workspace-bridge-inspector {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.9rem;
}

.dynamic-workspace-bridge-inspector strong {
  color: rgba(248, 250, 252, 0.95);
  display: block;
  line-height: 1.2;
}

.dynamic-workspace-bridge-inspector p {
  color: rgba(203, 213, 225, 0.72) !important;
  margin: 0.25rem 0 0 !important;
}

.dynamic-workspace-sample-select-label {
  align-items: center;
  color: rgba(203, 213, 225, 0.78);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  gap: 0.42rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dynamic-workspace-sample-select-label select {
  background: rgba(2, 6, 23, 0.78);
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  color: rgba(240, 253, 250, 0.95);
  font-size: 0.82rem;
  font-weight: 760;
  min-height: 2.15rem;
  padding: 0.35rem 0.72rem;
}

.dynamic-workspace-bridge-json {
  color: rgba(203, 213, 225, 0.78);
}

.dynamic-workspace-bridge-json summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
}

.dynamic-workspace-bridge-output {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  color: rgba(226, 232, 240, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.42;
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: 0.78rem;
  white-space: pre-wrap;
}

.dynamic-workspace-activation-controls {
  background:
    radial-gradient(circle at 6% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 12px;
  display: grid;
  gap: 0.62rem;
  padding: 0.72rem;
}

.dynamic-workspace-available-cards {
  background:
    radial-gradient(circle at 6% 0%, rgba(99, 102, 241, 0.1), transparent 12rem),
    rgba(2, 6, 23, 0.44);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 0.62rem;
  padding: 0.72rem;
}

.dynamic-workspace-activation-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.7rem;
}

.dynamic-workspace-activation-heading strong {
  color: rgba(248, 250, 252, 0.94);
}

.dynamic-workspace-activation-heading span,
.dynamic-workspace-activation-empty {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.78rem;
  line-height: 1.35;
}

.dynamic-workspace-activation-empty {
  margin: 0;
}

.dynamic-workspace-activation-list {
  display: grid;
  gap: 0.44rem;
}

.dynamic-workspace-card-list {
  display: grid;
  gap: 0.38rem;
}

.dynamic-workspace-card-row,
.dynamic-workspace-resource-row {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 11px;
  color: rgba(226, 232, 240, 0.88);
}

.dynamic-workspace-card-row {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 2.8rem;
  padding: 0.46rem 0.62rem;
  text-align: left;
  width: 100%;
}

.dynamic-workspace-card-copy,
.dynamic-workspace-resource-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.dynamic-workspace-card-copy strong,
.dynamic-workspace-resource-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-workspace-card-copy small,
.dynamic-workspace-resource-copy small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.74rem;
}

.dynamic-workspace-card-action {
  background: rgba(15, 118, 110, 0.2);
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 999px;
  color: rgba(153, 246, 228, 0.78);
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0.24rem 0.48rem;
  text-transform: uppercase;
}

.dynamic-workspace-resource-row {
  align-items: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.05rem;
  padding: 0.5rem 0.58rem;
}

.dynamic-workspace-resource-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  justify-content: flex-end;
}

.dynamic-workspace-activation-button,
.dynamic-workspace-open-source-button {
  background: rgba(2, 6, 23, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 850;
  min-height: 2rem;
  padding: 0.32rem 0.62rem;
}

.dynamic-workspace-activation-button.is-recommended {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.72), rgba(13, 148, 136, 0.64));
  border-color: rgba(103, 232, 249, 0.38);
  color: rgba(240, 253, 250, 0.96);
}

.dynamic-workspace-card-row strong,
.dynamic-workspace-resource-row strong {
  color: rgba(248, 250, 252, 0.94);
  line-height: 1.14;
}

.dynamic-workspace-card-row:hover,
.dynamic-workspace-card-row:focus-visible,
.dynamic-workspace-card-row.is-active,
.dynamic-workspace-resource-row.is-active,
.dynamic-workspace-activation-button:hover,
.dynamic-workspace-activation-button:focus-visible,
.dynamic-workspace-activation-button.is-active,
.dynamic-workspace-open-source-button:hover,
.dynamic-workspace-open-source-button:focus-visible {
  background: rgba(14, 116, 144, 0.28);
  border-color: rgba(103, 232, 249, 0.42);
  outline: none;
}

.dynamic-workspace-track-picker {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
  padding: 0.28rem 0.52rem;
}

.dynamic-workspace-resource-list {
  display: grid;
  gap: 0.38rem;
}

.dynamic-workspace-resource-choice {
  background: rgba(2, 6, 23, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  font-weight: 760;
  min-height: 2rem;
  padding: 0.35rem 0.58rem;
  text-align: left;
}

.dynamic-workspace-resource-more {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.35rem;
}

.dynamic-workspace-resource-choice:hover,
.dynamic-workspace-resource-choice:focus-visible,
.dynamic-workspace-resource-choice.is-active {
  background: rgba(14, 116, 144, 0.24);
  border-color: rgba(103, 232, 249, 0.42);
  outline: none;
}

.dynamic-prototype-mode-toggle {
  align-items: center;
  background: rgba(3, 10, 20, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.24rem;
}

.dynamic-prototype-mode-toggle .secondary-button {
  border-radius: 999px !important;
  min-height: 2.1rem !important;
  padding: 0.32rem 0.76rem !important;
}

.dynamic-prototype-mode-toggle .secondary-button.is-selected {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.84), rgba(45, 212, 191, 0.72)) !important;
  border-color: rgba(165, 243, 252, 0.64) !important;
  color: #06262c !important;
}

.dynamic-prototype-shell {
  background:
    radial-gradient(circle at 18% 12%, rgba(45, 212, 191, 0.18), transparent 18rem),
    radial-gradient(circle at 84% 88%, rgba(99, 102, 241, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(5, 16, 30, 0.94), rgba(8, 13, 27, 0.98));
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 44px rgba(0, 0, 0, 0.22);
  margin-top: 1rem;
  min-width: 0;
  padding: clamp(0.82rem, 1.5vw, 1.1rem);
}

.dynamic-prototype-realistic-frame {
  box-sizing: border-box;
  height: 555px;
  margin: 0.62rem auto 0;
  max-height: 555px;
  max-width: 1234px;
  overflow: hidden;
  padding: 0.45rem;
}

.dynamic-prototype-mode {
  display: none;
}

.dynamic-prototype-mode.is-active {
  display: block;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-active {
  height: 100%;
}

.dynamic-prototype-upper {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(13.5rem, 0.42fr) minmax(0, 1fr);
  min-height: 24rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-upper {
  gap: 0.55rem;
  grid-template-columns: 391px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.dynamic-prototype-stable-left,
.dynamic-prototype-canvas {
  border-radius: 18px;
  min-width: 0;
}

.dynamic-prototype-stable-left {
  background:
    linear-gradient(160deg, rgba(6, 33, 34, 0.78), rgba(5, 10, 20, 0.92)),
    repeating-linear-gradient(102deg, rgba(250, 204, 21, 0.13) 0 1px, transparent 1px 38px);
  border: 1px solid rgba(45, 212, 191, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(0.85rem, 1.5vw, 1.15rem);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-stable-left {
  border-radius: 15px;
  gap: 0.48rem;
  overflow: hidden;
  padding: 0.72rem;
}

.dynamic-prototype-state-pill,
.dynamic-prototype-type-pill,
.dynamic-prototype-content-card span,
.dynamic-prototype-canvas-header span,
.dynamic-prototype-focus span {
  color: rgba(153, 246, 228, 0.84);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dynamic-prototype-type-pill {
  align-self: start;
  background: rgba(20, 184, 166, 0.16);
  border: 1px solid rgba(94, 234, 212, 0.26);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
}

.dynamic-prototype-stable-left h3 {
  color: #f8fafc;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-stable-left h3 {
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  max-height: 7.8rem;
  overflow: hidden;
}

.dynamic-prototype-stable-left p {
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 0.9rem;
  line-height: 1.35;
  margin: 0 !important;
}

.dynamic-prototype-focus {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.18), transparent 14rem),
    rgba(15, 12, 11, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 16px;
  margin-top: auto;
  padding: 0.82rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-focus {
  border-radius: 14px;
  padding: 0.66rem;
}

.dynamic-prototype-focus strong {
  color: rgba(255, 251, 235, 0.96);
  display: block;
  font-size: 1.05rem;
  line-height: 1.18;
  margin-top: 0.35rem;
}

.dynamic-prototype-focus small {
  color: rgba(253, 230, 138, 0.72);
  display: block;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.dynamic-prototype-stable-left.has-empty-focus-cue .dynamic-prototype-focus {
  background: rgba(15, 23, 42, 0.44);
  border-color: rgba(148, 163, 184, 0.18);
}

.dynamic-prototype-stable-left.has-empty-focus-cue .dynamic-prototype-focus strong {
  color: rgba(203, 213, 225, 0.72);
}

.dynamic-prototype-stable-left.has-empty-focus-cue .dynamic-prototype-focus small {
  color: rgba(148, 163, 184, 0.72);
}

.dynamic-prototype-canvas {
  background:
    radial-gradient(circle at 16% 4%, rgba(56, 189, 248, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(8, 13, 27, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(0.82rem, 1.45vw, 1rem);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-canvas {
  border-radius: 15px;
  gap: 0.48rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0.55rem;
}

.dynamic-prototype-canvas-header {
  align-items: start;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.dynamic-prototype-canvas-header strong {
  color: rgba(248, 250, 252, 0.95);
  display: block;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.15;
  margin-top: 0.15rem;
}

.dynamic-prototype-canvas-header small {
  color: rgba(203, 213, 225, 0.68);
  line-height: 1.35;
  max-width: 17rem;
  text-align: right;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-canvas-header,
.dynamic-prototype-realistic-frame .dynamic-prototype-content-strip {
  display: none;
}

.dynamic-prototype-audio-canvas .dynamic-prototype-viewer-stage {
  order: 1;
}

.dynamic-prototype-audio-canvas .dynamic-prototype-content-strip {
  order: 2;
}

.dynamic-prototype-audio-canvas .dynamic-prototype-audio-player {
  order: 3;
}

.dynamic-prototype-video-canvas .dynamic-prototype-viewer-stage {
  order: 1;
}

.dynamic-prototype-video-canvas .dynamic-prototype-content-strip {
  order: 2;
}

.dynamic-prototype-video-canvas .dynamic-prototype-video-player {
  order: 3;
}

.dynamic-prototype-content-strip {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  min-height: 0.7rem;
  min-width: 0;
}

.dynamic-prototype-strip-arrow {
  align-self: center;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 10px;
  color: #e0f2fe;
  cursor: pointer;
  font-size: 1.08rem;
  height: 1.85rem;
  line-height: 1;
  width: 1.85rem;
}

.dynamic-prototype-strip-arrow:hover,
.dynamic-prototype-strip-arrow:focus-visible {
  background: rgba(14, 116, 144, 0.36);
  border-color: rgba(103, 232, 249, 0.58);
  outline: none;
}

.dynamic-prototype-strip-track {
  align-items: center;
  display: flex;
  gap: 0.34rem;
  justify-content: center;
  min-width: 0;
  max-width: min(100%, 9rem);
  overflow: hidden;
  padding: 0;
  scroll-snap-type: x proximity;
}

.dynamic-prototype-content-card {
  align-items: center;
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.1), transparent 5rem),
    rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 0.55rem;
  justify-content: center;
  min-height: 0.55rem;
  padding: 0;
  scroll-snap-align: start;
  width: 0.55rem;
}

.dynamic-prototype-content-card.is-primary,
.dynamic-prototype-content-card:hover,
.dynamic-prototype-content-card:focus-visible {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 8rem),
    rgba(15, 23, 42, 0.84);
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.08);
  outline: none;
  width: 1.45rem;
}

.dynamic-prototype-content-card strong {
  display: none;
}

.dynamic-prototype-content-card p {
  display: none;
}

.dynamic-prototype-content-card span {
  display: none;
}

.dynamic-prototype-viewer-stage {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.13), transparent 13rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.82));
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 16px;
  display: grid;
  gap: 0.65rem;
  min-height: 16.2rem;
  overflow: hidden;
  padding: 0.9rem;
  position: relative;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-stage {
  flex: 1 1 auto;
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-audio-player[hidden],
.dynamic-prototype-realistic-frame .dynamic-prototype-video-player[hidden],
.dynamic-prototype-realistic-frame .dynamic-workspace-controlled-rail[hidden] {
  display: none !important;
}

.dynamic-prototype-viewer-toolbar {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-toolbar {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.66), rgba(15, 23, 42, 0.24)),
    rgba(2, 6, 23, 0.22);
  border-bottom: 1px solid rgba(125, 211, 252, 0.14);
  gap: 0.42rem;
  padding: 0.38rem 0.5rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-toolbar > div:first-child {
  min-width: 0;
}

.dynamic-prototype-active-nav {
  align-items: center;
  background: rgba(2, 6, 23, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
  max-width: min(100%, 17rem);
  padding: 0.22rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-active-nav {
  margin-left: auto;
  max-width: min(100%, 13.5rem);
  padding: 0.16rem;
}

.dynamic-prototype-active-nav button {
  align-items: center;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  color: #e0f2fe;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 900;
  height: 1.55rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 1.55rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-active-nav button {
  font-size: 0.82rem;
  height: 1.35rem;
  min-height: 1.35rem;
  width: 1.35rem;
}

.dynamic-prototype-active-nav span {
  align-items: baseline;
  color: rgba(226, 232, 240, 0.84);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.35rem;
  letter-spacing: 0;
  min-width: 0;
  text-transform: none;
}

.dynamic-prototype-active-nav b {
  color: rgba(240, 253, 250, 0.95);
  display: inline-block;
  max-width: 8.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-active-nav b {
  max-width: 6.8rem;
}

.dynamic-prototype-active-nav em {
  color: rgba(153, 246, 228, 0.78);
  font-style: normal;
  white-space: nowrap;
}

.dynamic-prototype-viewer-toolbar span,
.dynamic-prototype-secondary-viewer span {
  color: rgba(153, 246, 228, 0.84);
  display: block;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dynamic-prototype-viewer-toolbar strong {
  color: rgba(248, 250, 252, 0.96);
  display: block;
  line-height: 1.18;
  margin-top: 0.14rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-toolbar strong {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-prototype-viewer-toolbar .dynamic-prototype-active-nav span {
  align-items: baseline;
  color: rgba(226, 232, 240, 0.84);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.35rem;
  letter-spacing: 0;
  min-width: 0;
  text-transform: none;
}

.dynamic-prototype-viewer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-actions {
  flex: 0 0 auto;
  gap: 0.24rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-actions [data-dynamic-viewer-focus]:not([hidden]),
.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-actions [data-dynamic-viewer-two-up]:not([hidden]) {
  display: inline-flex;
}

.dynamic-prototype-viewer-body {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-body {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode:not(.has-controlled-rail) .dynamic-prototype-viewer-body {
  grid-template-rows: minmax(0, 1fr);
}

.dynamic-workspace-controlled-rail {
  background:
    radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.14), transparent 10rem),
    rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  padding: 0.5rem;
}

.dynamic-workspace-controlled-rail[hidden] {
  display: none;
}

.dynamic-workspace-controlled-rail-heading {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  min-width: 0;
}

.dynamic-workspace-controlled-rail-heading span {
  color: rgba(153, 246, 228, 0.78);
  display: block;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.dynamic-workspace-controlled-rail-heading strong {
  color: rgba(248, 250, 252, 0.95);
  display: block;
  line-height: 1.12;
}

.dynamic-workspace-controlled-rail-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  justify-content: flex-end;
}

.dynamic-workspace-controlled-rail-tabs button {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 820;
  min-height: 1.65rem;
  padding: 0.22rem 0.54rem;
}

.dynamic-workspace-controlled-rail-tabs button.is-active,
.dynamic-workspace-controlled-rail-tabs button:hover,
.dynamic-workspace-controlled-rail-tabs button:focus-visible {
  background: rgba(14, 116, 144, 0.28);
  border-color: rgba(103, 232, 249, 0.42);
  color: rgba(240, 253, 250, 0.96);
  outline: none;
}

.dynamic-workspace-controlled-rail-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  min-width: 0;
}

.dynamic-workspace-controlled-rail-body .dynamic-prototype-key-card {
  flex: 1 1 14rem;
  margin: 0;
}

.dynamic-workspace-controlled-rail-body .dynamic-prototype-key-pills {
  flex: 1 1 12rem;
  justify-content: flex-end;
}

.dynamic-prototype-primary-viewer,
.dynamic-prototype-secondary-viewer {
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 9rem),
    rgba(3, 10, 20, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  color: rgba(226, 232, 240, 0.84);
  min-height: 11.2rem;
  padding: 0.8rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-primary-viewer,
.dynamic-prototype-realistic-frame .dynamic-prototype-secondary-viewer {
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.62rem;
}

.dynamic-prototype-primary-viewer {
  align-items: start;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-primary-viewer {
  align-content: start;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-prototype-primary-viewer,
.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-prototype-viewer-content,
.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary {
  height: 100%;
  min-height: 100%;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-prototype-primary-viewer {
  display: flex;
  flex-direction: column;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-prototype-viewer-content {
  display: flex;
  flex: 1 1 auto;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary {
  align-content: stretch;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-primary-viewer > .dynamic-prototype-viewer-icon {
  display: none;
}

.dynamic-prototype-primary-viewer p,
.dynamic-prototype-secondary-viewer p {
  color: rgba(203, 213, 225, 0.74) !important;
  font-size: 0.86rem;
  line-height: 1.42;
  margin: 0 !important;
}

.dynamic-prototype-viewer-content {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-content {
  gap: 0.52rem;
  min-height: 100%;
}

.dynamic-workspace-instruction-anchor {
  background:
    radial-gradient(circle at 4% 0%, rgba(45, 212, 191, 0.12), transparent 11rem),
    rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 13px;
  display: grid;
  gap: 0.55rem;
  min-height: 0;
  padding: 0.68rem;
}

.dynamic-workspace-instruction-anchor.is-primary {
  align-self: stretch;
}

.dynamic-workspace-instruction-anchor.is-compact {
  background: rgba(15, 23, 42, 0.48);
  border-color: rgba(148, 163, 184, 0.16);
  gap: 0.36rem;
  padding: 0.5rem 0.58rem;
}

.dynamic-workspace-instruction-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.dynamic-workspace-instruction-heading strong {
  color: rgba(248, 250, 252, 0.96);
  line-height: 1.15;
}

.dynamic-workspace-instruction-heading small {
  color: rgba(153, 246, 228, 0.68);
  font-size: 0.72rem;
  font-weight: 760;
}

.dynamic-workspace-instruction-body {
  color: rgba(226, 232, 240, 0.86);
  font-size: 1rem;
  line-height: 1.52;
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
}

.dynamic-prototype-realistic-frame .dynamic-workspace-instruction-body {
  font-size: 0.92rem;
  line-height: 1.44;
  max-height: 11.5rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary .dynamic-workspace-instruction-body {
  max-height: none;
}

.dynamic-workspace-instruction-anchor.is-compact .dynamic-workspace-instruction-body {
  color: rgba(203, 213, 225, 0.84);
  font-size: 0.82rem;
  line-height: 1.38;
  max-height: 4.7rem;
}

.dynamic-workspace-instruction-chips {
  margin-top: 0.1rem;
}

.dynamic-workspace-utility-preview {
  background:
    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.14), transparent 10rem),
    rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 13px;
  display: grid;
  gap: 0.44rem;
  padding: 0.58rem;
}

.dynamic-workspace-utility-preview > strong {
  color: rgba(248, 250, 252, 0.95);
  line-height: 1.15;
}

.dynamic-workspace-utility-preview > small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.76rem;
  line-height: 1.32;
}

.dynamic-workspace-utility-preview .dynamic-prototype-key-card {
  margin-top: 0.1rem;
}

.dynamic-workspace-utility-preview .dynamic-prototype-fretboard.is-compact {
  min-height: 3.1rem;
}

.dynamic-prototype-media-source-card {
  align-items: center;
  background: rgba(2, 6, 23, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  display: grid;
  gap: 0.28rem 0.55rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.58rem;
}

.dynamic-prototype-media-source-card strong,
.dynamic-prototype-media-source-card small {
  min-width: 0;
}

.dynamic-prototype-media-source-card small {
  color: rgba(203, 213, 225, 0.72);
  line-height: 1.35;
}

.dynamic-prototype-media-source-card .dynamic-prototype-viewer-icon {
  grid-row: span 2;
}

.dynamic-prototype-checklist {
  display: grid;
  gap: 0.38rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dynamic-prototype-checklist span,
.dynamic-prototype-key-pills span {
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.76rem;
  font-weight: 720;
  padding: 0.34rem 0.5rem;
}

.dynamic-prototype-mini-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dynamic-prototype-mini-actions button,
.dynamic-prototype-key-card button {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 760;
  min-height: 1.9rem;
  padding: 0.25rem 0.58rem;
}

.dynamic-prototype-key-card {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.dynamic-prototype-key-card strong {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 12px;
  color: rgba(240, 253, 250, 0.96);
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.1;
  padding: 0.62rem 0.78rem;
  text-align: center;
}

.dynamic-prototype-key-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.dynamic-prototype-key-pills span.is-current {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.84), rgba(45, 212, 191, 0.7));
  color: #06262c;
}

.dynamic-prototype-key-pills span.is-complete {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(74, 222, 128, 0.36);
  color: rgba(220, 252, 231, 0.94);
}

.dynamic-prototype-fretboard {
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.18) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(148, 163, 184, 0.16) 0 1px, transparent 1px 100%),
    rgba(2, 6, 23, 0.52);
  background-size: 10% 100%, 100% 25%, auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  min-height: 5.6rem;
  padding: 0.7rem;
}

.dynamic-prototype-fretboard span {
  align-self: center;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  height: 0.42rem;
  justify-self: center;
  width: 0.42rem;
}

.dynamic-prototype-fretboard span.is-note {
  background: rgba(125, 211, 252, 0.86);
  height: 0.8rem;
  width: 0.8rem;
}

.dynamic-prototype-fretboard span.is-root {
  background: rgba(45, 212, 191, 0.95);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.14);
  height: 0.95rem;
  width: 0.95rem;
}

.dynamic-prototype-tab-chart {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.64rem;
}

.dynamic-prototype-tab-chart span {
  color: rgba(226, 232, 240, 0.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  white-space: nowrap;
}

.dynamic-prototype-pdf-preview {
  align-items: center;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.12), rgba(125, 211, 252, 0.08));
  border: 1px solid rgba(203, 213, 225, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  min-height: 6rem;
  padding: 0.7rem;
  text-align: center;
}

.dynamic-prototype-pdf-preview span {
  background: rgba(248, 250, 252, 0.88);
  border-radius: 8px;
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 920;
  padding: 0.42rem 0.5rem;
}

.dynamic-prototype-pdf-preview strong {
  color: rgba(248, 250, 252, 0.94);
}

.dynamic-prototype-pdf-preview small {
  color: rgba(203, 213, 225, 0.68);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-pdf-preview {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(56, 189, 248, 0.06));
  border: 0;
  border-radius: 10px;
  gap: 0.24rem 0.58rem;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  min-height: 0;
  padding: 0.46rem 0.54rem;
  text-align: left;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-pdf-preview span {
  grid-row: span 2;
  padding: 0.32rem 0.42rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-pdf-preview strong,
.dynamic-prototype-realistic-frame .dynamic-prototype-pdf-preview small {
  min-width: 0;
}

.dynamic-prototype-secondary-viewer {
  display: none;
}

.dynamic-prototype-secondary-viewer strong {
  color: rgba(248, 250, 252, 0.9);
  display: block;
  margin: 0.25rem 0 0.35rem;
}

.dynamic-prototype-viewer-icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.94), rgba(56, 189, 248, 0.82));
  border-radius: 12px;
  color: #082f49;
  display: grid;
  font-weight: 950;
  height: 2.2rem;
  place-items: center;
  width: 2.2rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-icon {
  border-radius: 10px;
  height: 1.8rem;
  width: 1.8rem;
}

.dynamic-prototype-realistic-frame .dynamic-workspace-resource-list {
  gap: 0.32rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  max-height: none;
  overflow: auto;
}

.dynamic-prototype-realistic-frame .dynamic-workspace-resource-choice {
  border-radius: 8px;
  font-size: 0.72rem;
  min-height: 1.72rem;
  padding: 0.26rem 0.46rem;
}

.dynamic-prototype-viewer-actions [data-dynamic-viewer-collapse] {
  display: none;
}

.dynamic-prototype-canvas .dynamic-prototype-viewer-actions [data-dynamic-viewer-focus],
.dynamic-prototype-canvas .dynamic-prototype-viewer-actions [data-dynamic-viewer-two-up] {
  display: none;
}

.dynamic-prototype-viewer-stage[data-viewer-kind="pdf"] .dynamic-prototype-viewer-actions [data-dynamic-viewer-focus],
.dynamic-prototype-viewer-stage[data-viewer-kind="pdf"] .dynamic-prototype-viewer-actions [data-dynamic-viewer-two-up],
.dynamic-prototype-viewer-stage[data-viewer-kind="tab"] .dynamic-prototype-viewer-actions [data-dynamic-viewer-focus],
.dynamic-prototype-viewer-stage[data-viewer-kind="tab"] .dynamic-prototype-viewer-actions [data-dynamic-viewer-two-up] {
  display: inline-flex;
}

.dynamic-prototype-mode.is-viewer-expanded .dynamic-prototype-viewer-stage {
  min-height: 21rem;
}

.dynamic-prototype-mode.is-viewer-expanded .dynamic-prototype-viewer-actions [data-dynamic-viewer-collapse],
.dynamic-prototype-mode.is-viewer-focused .dynamic-prototype-viewer-actions [data-dynamic-viewer-collapse],
.dynamic-prototype-mode.is-two-up .dynamic-prototype-viewer-actions [data-dynamic-viewer-collapse] {
  display: inline-flex;
}

.dynamic-prototype-mode.is-viewer-expanded [data-dynamic-viewer-expand],
.dynamic-prototype-mode.is-viewer-focused [data-dynamic-viewer-focus],
.dynamic-prototype-mode.is-two-up [data-dynamic-viewer-two-up] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.84), rgba(45, 212, 191, 0.72));
  border-color: rgba(165, 243, 252, 0.64);
  color: #06262c;
}

.dynamic-prototype-mode.is-two-up .dynamic-prototype-viewer-body {
  grid-template-columns: minmax(0, 1.1fr) minmax(13rem, 0.9fr);
}

.dynamic-prototype-mode.is-two-up .dynamic-prototype-secondary-viewer {
  display: block;
}

.dynamic-prototype-mode.is-viewer-focused .dynamic-prototype-viewer-stage {
  background:
    radial-gradient(circle at 10% 4%, rgba(45, 212, 191, 0.18), transparent 22rem),
    radial-gradient(circle at 90% 12%, rgba(99, 102, 241, 0.18), transparent 22rem),
    linear-gradient(145deg, rgba(3, 10, 20, 0.98), rgba(8, 13, 27, 0.99));
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.46);
  inset: 1.2rem;
  min-height: 0;
  position: fixed;
  z-index: 10040;
}

.dynamic-prototype-mode.is-viewer-focused .dynamic-prototype-viewer-body {
  min-height: 0;
}

.dynamic-prototype-mode.is-viewer-focused .dynamic-prototype-primary-viewer {
  min-height: 58vh;
}

.dynamic-prototype-audio-player {
  background:
    radial-gradient(circle at 4% 0%, rgba(45, 212, 191, 0.14), transparent 11rem),
    rgba(2, 6, 23, 0.74);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 14px;
  display: grid;
  gap: 0.48rem;
  grid-template-areas:
    "main scrub transport"
    "tools tools tools";
  grid-template-columns: minmax(11rem, 0.64fr) minmax(13rem, 1fr) minmax(17rem, 1.06fr);
  padding: 0.58rem;
}

.dynamic-prototype-player-main {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  grid-area: main;
  min-width: 0;
}

.dynamic-prototype-play-button {
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  border: 0;
  border-radius: 999px;
  color: #042f2e;
  cursor: pointer;
  font-weight: 900;
  height: 2.18rem;
  width: 2.18rem;
}

.dynamic-prototype-player-main strong {
  color: rgba(248, 250, 252, 0.96);
  display: block;
  line-height: 1.15;
}

.dynamic-prototype-player-main small {
  color: rgba(203, 213, 225, 0.7);
}

.dynamic-prototype-audio-scrub {
  align-items: center;
  background: rgba(241, 245, 249, 0.08);
  border: 1px solid rgba(203, 213, 225, 0.12);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  display: grid;
  gap: 0.55rem;
  grid-area: scrub;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 2.15rem;
  padding: 0.25rem 0.58rem;
}

.dynamic-prototype-audio-scrub span {
  font-size: 0.76rem;
  font-weight: 780;
  white-space: nowrap;
}

.dynamic-prototype-scrub-track,
.dynamic-prototype-speed-slider {
  background: rgba(226, 232, 240, 0.2);
  border-radius: 999px;
  height: 0.36rem;
  min-width: 0;
  overflow: hidden;
}

.dynamic-prototype-scrub-track i,
.dynamic-prototype-speed-slider i {
  background: linear-gradient(90deg, #2dd4bf, #38bdf8);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: 26%;
}

.dynamic-prototype-waveform {
  align-items: center;
  display: flex;
  gap: 0.26rem;
  min-height: 2.4rem;
}

.dynamic-prototype-waveform span {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.88), rgba(59, 130, 246, 0.62));
  border-radius: 999px;
  display: block;
  flex: 1 1 0;
  min-width: 0.25rem;
}

.dynamic-prototype-waveform span:nth-child(1),
.dynamic-prototype-waveform span:nth-child(7) { height: 35%; }
.dynamic-prototype-waveform span:nth-child(2),
.dynamic-prototype-waveform span:nth-child(11) { height: 62%; }
.dynamic-prototype-waveform span:nth-child(3),
.dynamic-prototype-waveform span:nth-child(8) { height: 45%; }
.dynamic-prototype-waveform span:nth-child(4),
.dynamic-prototype-waveform span:nth-child(10) { height: 82%; }
.dynamic-prototype-waveform span:nth-child(5),
.dynamic-prototype-waveform span:nth-child(12) { height: 52%; }
.dynamic-prototype-waveform span:nth-child(6),
.dynamic-prototype-waveform span:nth-child(9) { height: 72%; }

.dynamic-prototype-ab-strip {
  background: rgba(2, 6, 23, 0.38);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 999px;
  min-height: 1.48rem;
  overflow: hidden;
  padding: 0.22rem 0.42rem;
  position: relative;
}

.dynamic-prototype-ab-strip span.is-loop-marker {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.95), rgba(45, 212, 191, 0.76));
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.16);
  min-width: 0.22rem;
}

.dynamic-prototype-player-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  grid-area: transport;
  justify-content: flex-end;
}

.dynamic-prototype-transport-controls {
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(203, 213, 225, 0.12);
  border-radius: 11px;
  justify-content: flex-start;
  padding: 0.32rem;
}

.dynamic-prototype-player-controls button,
.dynamic-prototype-active-nav button,
.dynamic-prototype-viewer-actions button,
.dynamic-prototype-video-actions button,
.dynamic-prototype-media-actions button,
.dynamic-prototype-video-rail button {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  font-weight: 760;
  min-height: 1.9rem;
  padding: 0.25rem 0.58rem;
}

.dynamic-prototype-player-controls button:hover,
.dynamic-prototype-player-controls button:focus-visible,
.dynamic-prototype-active-nav button:hover,
.dynamic-prototype-active-nav button:focus-visible,
.dynamic-prototype-viewer-actions button:hover,
.dynamic-prototype-viewer-actions button:focus-visible,
.dynamic-prototype-video-actions button:hover,
.dynamic-prototype-video-actions button:focus-visible,
.dynamic-prototype-media-actions button:hover,
.dynamic-prototype-media-actions button:focus-visible,
.dynamic-prototype-video-rail button:hover,
.dynamic-prototype-video-rail button:focus-visible {
  background: rgba(14, 116, 144, 0.32);
  border-color: rgba(103, 232, 249, 0.5);
  outline: none;
}

.dynamic-prototype-viewer-toolbar .dynamic-prototype-active-nav button {
  font-size: 0.95rem;
  height: 1.55rem;
  min-height: 1.55rem;
  padding: 0;
  width: 1.55rem;
}

.dynamic-prototype-audio-tools {
  display: grid;
  gap: 0.35rem;
  grid-area: tools;
}

.dynamic-prototype-speed-row {
  align-items: center;
  display: grid;
  gap: 0.38rem;
  grid-template-columns: auto repeat(4, auto) minmax(7rem, 1fr);
}

.dynamic-prototype-speed-row > span {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dynamic-prototype-speed-row button {
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(203, 213, 225, 0.14);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  font-weight: 820;
  min-height: 1.65rem;
  padding: 0.18rem 0.48rem;
  white-space: nowrap;
}

.dynamic-prototype-speed-row button.is-active {
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(94, 234, 212, 0.46);
  color: rgba(209, 250, 229, 0.96);
}

.dynamic-prototype-speed-slider i {
  width: 100%;
}

.dynamic-prototype-video-player {
  background:
    radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.16), transparent 12rem),
    radial-gradient(circle at 88% 12%, rgba(45, 212, 191, 0.12), transparent 13rem),
    rgba(2, 6, 23, 0.76);
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 16px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(18rem, 1.08fr) minmax(16rem, 0.92fr);
  padding: 0.68rem;
}

.dynamic-prototype-video-player-controls {
  align-content: space-between;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.dynamic-prototype-video-player-controls span {
  color: rgba(153, 246, 228, 0.84);
  display: block;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dynamic-prototype-video-player-controls strong {
  color: rgba(248, 250, 252, 0.96);
  display: block;
  line-height: 1.16;
  margin-top: 0.16rem;
}

.dynamic-prototype-video-player-controls small {
  color: rgba(203, 213, 225, 0.68);
  display: block;
  line-height: 1.35;
  margin-top: 0.22rem;
}

.dynamic-prototype-media-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.dynamic-prototype-media-actions [data-dynamic-media-expand],
.dynamic-prototype-media-actions [data-dynamic-media-focus] {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(94, 234, 212, 0.34);
  color: rgba(209, 250, 229, 0.96);
}

.dynamic-prototype-video-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.dynamic-prototype-video-layout {
  display: grid;
  flex: 1;
  gap: 0.72rem;
  grid-template-rows: minmax(16rem, 1fr) auto;
  min-height: 0;
}

.dynamic-prototype-video-frame {
  align-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(56, 189, 248, 0.22), transparent 12rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.94));
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  min-height: 16rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-align: center;
}

.dynamic-prototype-video-frame::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 100%);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  position: absolute;
}

.dynamic-prototype-video-play {
  align-items: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.86));
  border-radius: 999px;
  color: white;
  display: grid;
  font-size: 1.35rem;
  height: 4rem;
  place-items: center;
  position: relative;
  width: 4rem;
  z-index: 1;
}

.dynamic-prototype-video-frame strong,
.dynamic-prototype-video-frame small {
  position: relative;
  z-index: 1;
}

.dynamic-prototype-video-frame small {
  color: rgba(203, 213, 225, 0.72);
  max-width: 24rem;
}

.dynamic-prototype-video-rail {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}

.dynamic-prototype-video-rail button.is-primary {
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(94, 234, 212, 0.42);
  color: rgba(209, 250, 229, 0.96);
}

.dynamic-prototype-video-stage {
  flex: 1;
  min-height: 19rem;
}

.dynamic-prototype-video-stage .dynamic-prototype-viewer-body {
  min-height: 0;
}

.dynamic-prototype-video-stage .dynamic-prototype-primary-viewer {
  min-height: 16rem;
}

.dynamic-prototype-mode.is-viewer-expanded .dynamic-prototype-primary-viewer.dynamic-prototype-video-frame {
  min-height: 22rem;
}

.dynamic-prototype-mode.is-viewer-expanded .dynamic-prototype-video-rail {
  opacity: 0.72;
}

.dynamic-prototype-mode.is-media-expanded .dynamic-prototype-content-strip,
.dynamic-prototype-mode.is-media-expanded .dynamic-prototype-viewer-stage {
  display: none;
}

.dynamic-prototype-mode.is-media-expanded .dynamic-prototype-video-player {
  grid-template-columns: minmax(0, 1fr);
  min-height: 23rem;
}

.dynamic-prototype-mode.is-media-expanded .dynamic-prototype-video-frame {
  min-height: 17rem;
}

.dynamic-prototype-mode.is-media-expanded [data-dynamic-media-expand],
.dynamic-prototype-mode.is-media-focused [data-dynamic-media-focus] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.84), rgba(45, 212, 191, 0.72));
  border-color: rgba(165, 243, 252, 0.64);
  color: #06262c;
}

.dynamic-prototype-mode.is-media-focused .dynamic-prototype-video-player {
  background:
    radial-gradient(circle at 12% 4%, rgba(45, 212, 191, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 10%, rgba(99, 102, 241, 0.2), transparent 24rem),
    linear-gradient(145deg, rgba(3, 10, 20, 0.98), rgba(8, 13, 27, 0.99));
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.46);
  grid-template-columns: minmax(0, 1fr);
  inset: 1.2rem;
  min-height: 0;
  position: fixed;
  z-index: 10040;
}

.dynamic-prototype-mode.is-media-focused .dynamic-prototype-video-frame {
  min-height: 62vh;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-player-controls button,
.dynamic-prototype-realistic-frame .dynamic-prototype-viewer-actions button,
.dynamic-prototype-realistic-frame .dynamic-prototype-media-actions button {
  font-size: 0.68rem;
  min-height: 1.45rem;
  padding: 0.14rem 0.38rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-audio-player {
  flex: 0 0 auto;
  gap: 0.34rem;
  grid-template-areas:
    "main scrub transport"
    "tools tools tools";
  grid-template-columns: minmax(9rem, 0.58fr) minmax(12rem, 1fr) minmax(14rem, 0.92fr);
  padding: 0.42rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-play-button {
  height: 1.85rem;
  width: 1.85rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-audio-scrub {
  min-height: 1.8rem;
  padding: 0.18rem 0.45rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-transport-controls {
  padding: 0.22rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-audio-tools {
  gap: 0.25rem;
  grid-template-columns: minmax(9rem, 0.6fr) minmax(17rem, 1fr);
  align-items: center;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-speed-row {
  gap: 0.28rem;
  grid-template-columns: auto repeat(4, auto) minmax(5rem, 1fr);
}

.dynamic-prototype-realistic-frame .dynamic-prototype-ab-strip {
  min-height: 1.32rem;
  padding: 0.18rem 0.36rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-speed-row button {
  font-size: 0.7rem;
  min-height: 1.35rem;
  padding: 0.1rem 0.36rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-video-player {
  flex: 0 0 13.75rem;
  gap: 0.48rem;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.68fr);
  min-height: 0;
  padding: 0.48rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-prototype-viewer-stage {
  flex: 0 1 auto;
  max-height: 10.5rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-prototype-primary-viewer {
  max-height: 7.1rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-workspace-instruction-anchor.is-primary {
  gap: 0.34rem;
  padding: 0.5rem 0.58rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-workspace-instruction-anchor.is-primary .dynamic-workspace-instruction-body {
  max-height: 3.25rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-workspace-instruction-chips {
  display: none;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-compact-primary-area .dynamic-prototype-video-player {
  flex: 1 1 auto;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-video-media-active.is-heavy-primary-area .dynamic-prototype-viewer-stage {
  flex: 1 1 auto;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-video-player-controls {
  gap: 0.45rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-media-actions {
  gap: 0.25rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-video-frame {
  min-height: 8.8rem;
  padding: 0.72rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-video-play {
  font-size: 1rem;
  height: 3rem;
  width: 3rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-viewer-expanded .dynamic-prototype-viewer-stage {
  min-height: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-media-expanded .dynamic-prototype-video-player,
.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-media-expanded .dynamic-prototype-audio-player {
  flex: 1 1 auto;
  min-height: 0;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-mode.is-media-expanded .dynamic-prototype-video-frame {
  min-height: 19rem;
}

.dynamic-prototype-realistic-frame .dynamic-prototype-plain-deck {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 3.6rem;
  padding: 0.58rem 0.7rem;
}

.developer-nav-button[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .system-card-grid,
  .system-card-grid-large,
  .system-settings-grid,
  .developer-grid {
    grid-template-columns: 1fr;
  }

  .system-card-grid-large .backup-restore-panel {
    grid-column: auto;
  }

  .system-screen .system-card-feature {
    grid-row: auto;
  }

  .system-redesign-group-heading,
  .system-about-card {
    align-items: start;
    flex-direction: column;
  }

  .system-about-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .dynamic-prototype-card-header,
  .dynamic-prototype-canvas-header {
    align-items: start;
    flex-direction: column;
  }

  .dynamic-prototype-mode-toggle,
  .dynamic-prototype-video-actions {
    justify-content: flex-start;
  }

  .dynamic-prototype-upper,
  .dynamic-prototype-audio-player {
    grid-template-columns: 1fr;
  }

  .dynamic-prototype-audio-player {
    grid-template-areas:
      "main"
      "scrub"
      "transport"
      "tools";
  }

  .dynamic-prototype-video-player {
    grid-template-columns: 1fr;
  }

  .dynamic-prototype-canvas-header small {
    max-width: none;
    text-align: left;
  }

  .dynamic-prototype-player-controls {
    justify-content: flex-start;
  }

  .dynamic-prototype-speed-row {
    grid-template-columns: 1fr;
  }
}

/* Practice companion settings: warmer palette aligned with Practice V2. */
.settings-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 26rem),
    radial-gradient(circle at 76% 6%, rgba(139, 92, 246, 0.18), transparent 28rem),
    radial-gradient(circle at 88% 76%, rgba(245, 158, 11, 0.10), transparent 24rem),
    linear-gradient(145deg, rgba(3, 12, 24, 0.98), rgba(7, 15, 32, 0.97)) !important;
  border-color: rgba(125, 211, 252, 0.14) !important;
  box-shadow: 0 28px 70px rgba(2, 8, 23, 0.28);
  color: rgba(241, 245, 249, 0.96);
}

.settings-screen .settings-screen-header {
  background:
    radial-gradient(circle at 8% 12%, rgba(45, 212, 191, 0.16), transparent 44%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.50), rgba(30, 41, 59, 0.22));
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  margin-bottom: 1rem;
  padding: 1rem;
}

.settings-screen .screen-title {
  color: rgba(248, 250, 252, 0.98) !important;
}

.settings-screen .section-note {
  color: rgba(203, 213, 225, 0.76) !important;
}

.settings-screen .system-redesign-group {
  background:
    radial-gradient(circle at 6% 0%, rgba(45, 212, 191, 0.14), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.13), transparent 36%),
    linear-gradient(150deg, rgba(13, 28, 48, 0.78), rgba(7, 16, 31, 0.86)) !important;
  border-color: rgba(125, 211, 252, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 58px rgba(0, 0, 0, 0.22) !important;
}

.settings-screen .system-redesign-group-heading {
  border-bottom-color: rgba(125, 211, 252, 0.12) !important;
}

.settings-screen .system-section-kicker {
  color: rgba(94, 234, 212, 0.88) !important;
}

.settings-screen .system-redesign-group-heading h3 {
  color: rgba(245, 247, 255, 0.96) !important;
}

.settings-screen .system-settings-grid {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12), transparent 36%),
    radial-gradient(circle at 88% 100%, rgba(245, 158, 11, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(4, 14, 28, 0.72), rgba(15, 23, 42, 0.58)) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
}

.settings-screen .system-settings-subgroup {
  background:
    linear-gradient(145deg, rgba(15, 31, 53, 0.48), rgba(7, 17, 32, 0.58));
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 18px;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.settings-screen .system-settings-subgroup-heading {
  display: grid;
  gap: 0.25rem;
  padding: 0 0.2rem 0.15rem;
}

.settings-screen .system-settings-subgroup-heading p {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
}

.settings-screen .system-settings-subgroup--breaks {
  border-color: rgba(245, 158, 11, 0.18);
}

.settings-screen .system-settings-subgroup--microbreaks {
  border-color: rgba(45, 212, 191, 0.18);
}

.settings-screen .system-setting-row {
  background:
    radial-gradient(circle at 5% 10%, rgba(45, 212, 191, 0.11), transparent 40%),
    linear-gradient(145deg, rgba(15, 31, 53, 0.78), rgba(7, 17, 32, 0.82)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(2, 8, 23, 0.16);
  overflow: hidden;
  position: relative;
}

.settings-screen .system-setting-row::before {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.72), rgba(139, 92, 246, 0.70));
  border-radius: 999px;
  content: "";
  inset: 0.8rem auto 0.8rem 0.55rem;
  opacity: 0.78;
  position: absolute;
  width: 3px;
}

.settings-screen .system-setting-row > span {
  padding-left: 0.5rem;
}

.settings-screen .system-setting-row strong {
  color: rgba(248, 250, 252, 0.96) !important;
}

.settings-screen .system-setting-row small {
  color: rgba(203, 213, 225, 0.72) !important;
}

.settings-screen .system-setting-row select,
.settings-screen .system-setting-row input[type="text"],
.settings-screen .system-setting-row input[type="number"] {
  background: rgba(2, 8, 23, 0.78) !important;
  border-color: rgba(125, 211, 252, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settings-screen .system-setting-row input[type="checkbox"] {
  accent-color: #2dd4bf;
}

.getting-started-screen {
  background:
    radial-gradient(circle at 82% 6%, rgba(45, 212, 191, 0.13), transparent 28rem),
    radial-gradient(circle at 15% 4%, rgba(124, 58, 237, 0.16), transparent 25rem),
    linear-gradient(145deg, rgba(11, 18, 34, 0.96), rgba(4, 10, 20, 0.98)) !important;
  border-color: rgba(190, 205, 224, 0.15) !important;
  display: grid;
  gap: 1.1rem;
}

.getting-started-hero {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(124, 58, 237, 0.12)),
    rgba(10, 18, 32, 0.76);
  border: 1px solid rgba(196, 211, 230, 0.14);
  border-radius: 24px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: clamp(1.1rem, 2vw, 1.55rem);
}

.getting-started-kicker {
  color: rgba(94, 234, 212, 0.86);
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.getting-started-hero h2 {
  color: rgba(248, 251, 255, 0.98);
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 0.55rem;
}

.getting-started-hero p {
  color: rgba(219, 229, 241, 0.76);
  font-size: 1.02rem;
  margin: 0;
  max-width: 44rem;
}

.getting-started-status {
  background: rgba(8, 15, 28, 0.72);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.86);
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.58rem 0.82rem;
}

.getting-started-hero-actions {
  align-items: flex-end;
  display: grid;
  flex: 0 0 auto;
  gap: 0.55rem;
  justify-items: end;
}

.getting-started-exit-button {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.56)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  border-radius: 999px !important;
  color: rgba(248, 250, 252, 0.92) !important;
  min-height: 2.4rem !important;
  padding: 0.48rem 0.86rem !important;
  white-space: nowrap;
}

.getting-started-exit-button:hover,
.getting-started-exit-button:focus-visible {
  border-color: rgba(94, 234, 212, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12) !important;
  color: #ffffff !important;
}

.getting-started-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.getting-started-card {
  background:
    linear-gradient(145deg, rgba(31, 42, 59, 0.72), rgba(9, 17, 31, 0.88));
  border: 1px solid rgba(196, 211, 230, 0.13);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 48px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 0.72rem;
  min-height: 16rem;
  padding: 1rem;
}

.getting-started-card > span {
  align-items: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.72), rgba(45, 212, 191, 0.44));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.getting-started-card h3 {
  color: rgba(248, 251, 255, 0.96);
  font-size: 1.1rem;
  line-height: 1.15;
  margin: 0;
}

.getting-started-card-status {
  align-self: start;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(196, 211, 230, 0.14);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.74rem;
  font-weight: 900;
  justify-self: start;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.58rem;
  text-transform: uppercase;
}

.getting-started-card p {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.getting-started-card button {
  align-self: end;
  justify-self: start;
}

.practice-welcome-builder-card {
  align-content: start;
}

.practice-welcome-card-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.practice-welcome-card .practice-welcome-card-actions button {
  justify-self: stretch;
  margin-top: 0;
}

.practice-welcome-card .practice-welcome-card-actions .secondary-button {
  background: rgba(15, 23, 42, 0.58) !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  color: rgba(248, 250, 252, 0.9) !important;
}

.practice-welcome-card-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(216, 180, 254, 0.94) !important;
  justify-self: start !important;
  min-height: auto !important;
  padding: 0.2rem 0 !important;
}

.practice-welcome-card-link::after {
  display: none !important;
}

.getting-started-screen .getting-started-home.practice-welcome-mode {
  background:
    linear-gradient(180deg, rgba(10, 22, 42, 0.08), rgba(10, 17, 34, 0.40) 32%, rgba(2, 6, 23, 0.94) 72%),
    radial-gradient(circle at 20% 35%, rgba(251, 191, 36, 0.26), transparent 17rem),
    radial-gradient(ellipse at 48% 5%, rgba(34, 211, 238, 0.22), transparent 30rem),
    radial-gradient(ellipse at 80% 18%, rgba(124, 58, 237, 0.22), transparent 29rem),
    url("assets/myzone/welcome-sunrise-rocky-coast-unsplash.jpg"),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  background-position: center top, center top, center top, center top, center 42%, center;
  background-size: cover, cover, cover, cover, cover, cover;
  border: 1px solid rgba(226, 232, 240, 0.12);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 32px 90px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.55rem);
}

.getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-hero {
  background: transparent;
  border: 0;
  padding: clamp(0.4rem, 1vw, 0.75rem) clamp(0.25rem, 1vw, 0.65rem) 0;
}

.getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-card {
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.13), transparent 11rem),
    linear-gradient(155deg, rgba(15, 23, 42, 0.58), rgba(6, 13, 26, 0.78));
  border-color: rgba(226, 232, 240, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  gap: 0.64rem;
  min-height: 14.5rem;
  padding: 0.92rem;
}

.zb-material-actions {
  align-items: center;
}

.zb-material-actions > div {
  margin-right: auto;
  max-width: 26rem;
}

.zb-material-actions h3 {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.zb-material-actions p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 1180px) {
  .getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-onboarding-model,
  .zb-existing-system-map {
    grid-template-columns: 1fr;
  }

  .zb-onboarding-model i {
    display: none;
  }
}

.zb-material-guide,
.zb-concepts-guide {
  background:
    radial-gradient(circle at 12% 8%, rgba(45, 212, 191, 0.18), transparent 18rem),
    radial-gradient(circle at 86% 10%, rgba(124, 58, 237, 0.2), transparent 20rem),
    linear-gradient(145deg, rgba(8, 15, 28, 0.86), rgba(2, 6, 23, 0.94));
  border: 1px solid rgba(196, 211, 230, 0.14);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 80px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 1.05rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.zb-material-guide[hidden],
.zb-concepts-guide[hidden] {
  display: none !important;
}

.zb-material-guide-hero {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(88, 28, 135, 0.16)),
    rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.zb-material-guide-hero h2 {
  color: rgba(248, 251, 255, 0.98);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 0.52rem;
}

.zb-material-guide-hero p {
  color: rgba(219, 229, 241, 0.78);
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0;
  max-width: 48rem;
}

.zb-material-back {
  flex: 0 0 auto;
}

.zb-guide-chapter {
  --guide-ink: #17120b;
  --guide-soft-ink: rgba(45, 35, 20, 0.76);
  --guide-accent: #d97706;
  --guide-accent-strong: #92400e;
  --guide-accent-soft: rgba(251, 191, 36, 0.2);
  --guide-card: rgba(255, 255, 255, 0.72);
  --guide-panel: rgba(255, 255, 255, 0.82);
  --guide-shadow: rgba(80, 48, 12, 0.12);
  background:
    radial-gradient(circle at 13% 0%, var(--guide-accent-soft), transparent 21rem),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 20rem),
    linear-gradient(145deg, rgba(255, 251, 235, 0.98), var(--guide-page-end, rgba(254, 243, 199, 0.9))) !important;
  border-color: color-mix(in srgb, var(--guide-accent) 28%, transparent) !important;
  color: var(--guide-ink);
  gap: clamp(1rem, 2.1vw, 1.45rem);
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
}

.zb-guide-accent-focus {
  --guide-ink: #241706;
  --guide-soft-ink: rgba(55, 38, 12, 0.78);
  --guide-accent: #d97706;
  --guide-accent-strong: #92400e;
  --guide-accent-soft: rgba(251, 191, 36, 0.34);
  --guide-page-end: rgba(254, 243, 199, 0.9);
  --guide-hero-end: rgba(254, 243, 199, 0.76);
  --guide-shadow: rgba(146, 64, 14, 0.12);
}

.zb-guide-accent-collections {
  --guide-ink: #211531;
  --guide-soft-ink: rgba(55, 43, 72, 0.76);
  --guide-accent: #8b5cf6;
  --guide-accent-strong: #6d28d9;
  --guide-accent-soft: rgba(196, 181, 253, 0.34);
  --guide-page-end: rgba(237, 233, 254, 0.92);
  --guide-hero-end: rgba(237, 233, 254, 0.78);
  --guide-shadow: rgba(76, 29, 149, 0.12);
}

.zb-guide-accent-workflow {
  --guide-ink: #102116;
  --guide-soft-ink: rgba(27, 61, 42, 0.76);
  --guide-accent: #059669;
  --guide-accent-strong: #047857;
  --guide-accent-soft: rgba(110, 231, 183, 0.32);
  --guide-page-end: rgba(220, 252, 231, 0.92);
  --guide-hero-end: rgba(209, 250, 229, 0.78);
  --guide-shadow: rgba(6, 95, 70, 0.12);
}

.zb-guide-accent-scheduling {
  --guide-ink: #062233;
  --guide-soft-ink: rgba(16, 64, 82, 0.76);
  --guide-accent: #0891b2;
  --guide-accent-strong: #0e7490;
  --guide-accent-soft: rgba(125, 211, 252, 0.34);
  --guide-page-end: rgba(224, 242, 254, 0.92);
  --guide-hero-end: rgba(207, 250, 254, 0.78);
  --guide-shadow: rgba(14, 116, 144, 0.12);
}

.zb-guide-accent-understanding {
  --guide-ink: #10203a;
  --guide-soft-ink: rgba(33, 58, 94, 0.76);
  --guide-accent: #2563eb;
  --guide-accent-strong: #1d4ed8;
  --guide-accent-soft: rgba(147, 197, 253, 0.34);
  --guide-page-end: rgba(219, 234, 254, 0.92);
  --guide-hero-end: rgba(239, 246, 255, 0.82);
  --guide-shadow: rgba(29, 78, 216, 0.12);
}

.zb-guide-accent-memory {
  --guide-ink: #082f36;
  --guide-soft-ink: rgba(15, 71, 78, 0.76);
  --guide-accent: #0d9488;
  --guide-accent-strong: #0f766e;
  --guide-accent-soft: rgba(153, 246, 228, 0.34);
  --guide-page-end: rgba(204, 251, 241, 0.88);
  --guide-hero-end: rgba(224, 242, 254, 0.82);
  --guide-shadow: rgba(15, 118, 110, 0.12);
}

.zb-guide-accent-goals {
  --guide-ink: #0d2517;
  --guide-soft-ink: rgba(24, 72, 45, 0.76);
  --guide-accent: #16a34a;
  --guide-accent-strong: #047857;
  --guide-accent-soft: rgba(187, 247, 208, 0.36);
  --guide-page-end: rgba(220, 252, 231, 0.9);
  --guide-hero-end: rgba(209, 250, 229, 0.78);
  --guide-shadow: rgba(4, 120, 87, 0.12);
}

.zb-guide-accent-keepfresh {
  --guide-ink: #0b2630;
  --guide-soft-ink: rgba(20, 72, 82, 0.76);
  --guide-accent: #0d9488;
  --guide-accent-strong: #0f766e;
  --guide-accent-soft: rgba(153, 246, 228, 0.34);
  --guide-page-end: rgba(204, 251, 241, 0.88);
  --guide-hero-end: rgba(207, 250, 254, 0.8);
  --guide-shadow: rgba(15, 118, 110, 0.12);
}

.zb-guide-accent-interleaving {
  --guide-ink: #172033;
  --guide-soft-ink: rgba(38, 54, 84, 0.76);
  --guide-accent: #6366f1;
  --guide-accent-strong: #4338ca;
  --guide-accent-soft: rgba(199, 210, 254, 0.36);
  --guide-page-end: rgba(224, 231, 255, 0.9);
  --guide-hero-end: rgba(238, 242, 255, 0.82);
  --guide-shadow: rgba(67, 56, 202, 0.12);
}

.zb-guide-hero {
  align-items: start;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 17rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), var(--guide-hero-end, rgba(254, 243, 199, 0.76)));
  border-color: color-mix(in srgb, var(--guide-accent) 28%, transparent);
  box-shadow: 0 20px 52px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.zb-guide-kicker,
.zb-guide-label {
  color: var(--guide-accent-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.zb-guide-hero h2 {
  color: var(--guide-ink);
  font-size: clamp(2.35rem, 5vw, 4.3rem);
  margin-bottom: 0.45rem;
}

.zb-guide-hero h3 {
  color: var(--guide-accent-strong);
  font-size: clamp(1.35rem, 2.45vw, 2rem);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 0.72rem;
  max-width: 45rem;
}

.zb-guide-hero p {
  color: var(--guide-soft-ink);
  font-size: clamp(1.04rem, 1.45vw, 1.2rem);
  line-height: 1.58;
  max-width: 54rem;
}

.zb-guide-back {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: color-mix(in srgb, var(--guide-accent-strong) 22%, transparent) !important;
  color: var(--guide-accent-strong) !important;
  -webkit-text-fill-color: var(--guide-accent-strong) !important;
}

.zb-guide-core {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-guide-card,
.zb-guide-visual,
.zb-guide-examples,
.zb-guide-takeaway {
  background: var(--guide-card);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 24px;
  box-shadow: 0 18px 42px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.zb-guide-card {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

.zb-guide-card.is-solution {
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 11rem),
    var(--guide-panel);
}

.zb-guide-card strong {
  color: var(--guide-ink);
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  letter-spacing: 0;
  line-height: 1.12;
}

.zb-guide-card p,
.zb-guide-takeaway p {
  color: var(--guide-soft-ink);
  font-size: 1.04rem;
  line-height: 1.52;
  margin: 0;
}

.zb-guide-visual,
.zb-guide-examples {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.3vw, 1.45rem);
}

.zb-guide-visual h3,
.zb-guide-examples h3 {
  color: var(--guide-ink);
  font-size: clamp(1.28rem, 2.2vw, 1.78rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0.2rem 0 0;
}

.zb-guide-flow {
  display: grid;
  gap: 0.68rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-guide-flow li {
  align-content: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--guide-accent) 12%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  display: grid;
  gap: 0.46rem;
  min-height: 7.25rem;
  padding: 0.88rem;
  position: relative;
}

.zb-guide-flow li:not(:last-child)::after {
  border-right: 2px solid color-mix(in srgb, var(--guide-accent) 34%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--guide-accent) 34%, transparent);
  content: "";
  height: 0.55rem;
  position: absolute;
  right: -0.43rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 0.55rem;
  z-index: 2;
}

.zb-guide-flow li span {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  height: 1.9rem;
  justify-content: center;
  width: 1.9rem;
}

.zb-guide-flow li strong {
  color: var(--guide-ink);
  font-size: 1.02rem;
  line-height: 1.18;
}

.zb-guide-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
}

.zb-guide-chip-grid span {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.74), transparent 3rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 18%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 24%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 24px var(--guide-shadow);
  color: var(--guide-accent-strong);
  font-size: 1rem;
  font-weight: 820;
  line-height: 1;
  padding: 0.68rem 0.86rem;
}

.zb-guide-coach-tip {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.5), transparent 15rem),
    linear-gradient(145deg, color-mix(in srgb, var(--guide-accent) 22%, white), color-mix(in srgb, var(--guide-accent) 36%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent-strong) 22%, transparent);
  border-radius: 28px;
  box-shadow: 0 24px 58px color-mix(in srgb, var(--guide-accent-strong) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.72rem;
  padding: clamp(1.15rem, 2.6vw, 1.8rem);
}

.zb-guide-coach-tip p {
  color: var(--guide-soft-ink);
  font-size: clamp(1.08rem, 1.55vw, 1.24rem);
  line-height: 1.56;
  margin: 0;
  max-width: 62rem;
}

.zb-guide-coach-tip p:first-of-type {
  color: var(--guide-ink);
  font-size: clamp(1.18rem, 2.1vw, 1.58rem);
  line-height: 1.38;
}

.zb-guide-coach-tip em {
  color: var(--guide-accent-strong);
  font-style: italic;
  font-weight: 820;
}

.zb-guide-takeaway {
  display: grid;
  gap: 0.45rem;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  text-align: center;
}

.zb-guide-takeaway strong {
  color: var(--guide-ink);
  font-size: clamp(1.42rem, 2.7vw, 2.25rem);
  letter-spacing: 0;
  line-height: 1.08;
}

.zb-continuing-situation-grid,
.zb-continuing-example-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-continuing-situation-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-continuing-example-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-continuing-situation-grid .zb-guide-card,
.zb-continuing-example-grid .zb-guide-card {
  min-height: 10.2rem;
}

.zb-continuing-decision-map {
  display: grid;
  gap: 0.62rem;
  justify-items: center;
}

.zb-continuing-decision-map > i {
  color: var(--guide-accent-strong);
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.zb-continuing-decision-caption {
  background: color-mix(in srgb, var(--guide-accent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.42rem 0.68rem;
  text-transform: uppercase;
}

.zb-continuing-decision-node,
.zb-continuing-decision-branches article {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.68), transparent 6rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 12%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.zb-continuing-decision-node {
  max-width: 28rem;
  padding: 0.95rem 1rem;
  text-align: center;
  width: min(100%, 28rem);
}

.zb-continuing-decision-node span,
.zb-continuing-decision-branches strong {
  color: var(--guide-ink);
  font-size: 1.04rem;
  font-weight: 880;
  line-height: 1.18;
}

.zb-continuing-decision-branches {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52rem;
  width: 100%;
}

.zb-continuing-decision-branches.is-final {
  max-width: 42rem;
}

.zb-continuing-decision-branches article {
  display: grid;
  gap: 0.42rem;
  justify-items: center;
  min-height: 5.8rem;
  padding: 0.88rem;
  text-align: center;
}

.zb-continuing-decision-branches b {
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.38rem 0.62rem;
  text-transform: uppercase;
}

.zb-guide-flow.zb-goals-model-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-guide-flow.zb-resources-model-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-guide-flow.zb-resources-example-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-resources-model-flow li,
.zb-resources-example-flow li {
  min-height: 8rem;
}

.zb-resources-example-note {
  background: color-mix(in srgb, var(--guide-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 16px;
  color: var(--guide-soft-ink);
  font-size: 1.02rem;
  line-height: 1.48;
  margin: 0;
  padding: 0.86rem 1rem;
}

.zb-resources-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #dcfce7 42%, white));
}

.zb-goals-model-flow li {
  min-height: 8rem;
}

.zb-goals-example-map,
.zb-goals-practical-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-goals-example-map {
  grid-template-columns: 1.05fr 1.3fr 1.45fr 1fr;
}

.zb-goals-practical-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-goals-example-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.68), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 11%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.62rem;
  min-height: 11rem;
  padding: 0.95rem;
}

.zb-goals-example-card.is-goal {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 10rem),
    var(--guide-panel);
}

.zb-goals-example-card strong {
  color: var(--guide-ink);
  font-size: clamp(1.12rem, 1.9vw, 1.48rem);
  line-height: 1.12;
}

.zb-goals-example-card .zb-guide-chip-grid span,
.zb-goals-practical-grid .zb-guide-chip-grid span {
  font-size: 0.9rem;
  padding: 0.58rem 0.72rem;
}

.zb-goals-schedule-flow {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-goals-schedule-flow li {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.92rem;
  font-weight: 860;
  line-height: 1;
  padding: 0.62rem 0.72rem;
  text-align: center;
}

.zb-goals-support-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.zb-goals-support-list span {
  background: color-mix(in srgb, var(--guide-accent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.86rem;
  font-weight: 860;
  line-height: 1;
  padding: 0.5rem 0.64rem;
}

.zb-goals-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 15%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), color-mix(in srgb, #fef3c7 42%, white));
}

.zb-guide-flow.zb-keepfresh-model-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-keepfresh-model-flow li {
  min-height: 8rem;
}

.zb-keepfresh-example-map {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: 1fr 1fr 1.15fr 1.15fr;
}

.zb-keepfresh-example-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.68), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 11%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.62rem;
  min-height: 11rem;
  padding: 0.95rem;
}

.zb-keepfresh-example-card.is-collection,
.zb-keepfresh-example-card.is-today {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 10rem),
    var(--guide-panel);
}

.zb-keepfresh-example-card strong {
  color: var(--guide-ink);
  font-size: clamp(1.12rem, 1.9vw, 1.48rem);
  line-height: 1.12;
}

.zb-keepfresh-example-card p {
  color: var(--guide-soft-ink);
  font-size: 1rem;
  line-height: 1.42;
  margin: 0;
}

.zb-keepfresh-song-list {
  display: grid;
  gap: 0.5rem;
}

.zb-keepfresh-song-list span {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 1rem;
  font-weight: 880;
  line-height: 1;
  padding: 0.68rem 0.78rem;
  text-align: center;
}

.zb-keepfresh-link-flow {
  align-items: stretch;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.zb-keepfresh-link-flow article {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.68), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.45rem;
  min-height: 10.2rem;
  padding: 0.95rem;
}

.zb-keepfresh-link-flow strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.14;
}

.zb-keepfresh-link-flow p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.42;
  margin: 0;
}

.zb-keepfresh-link-flow i {
  align-self: center;
  color: var(--guide-accent-strong);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.zb-keepfresh-practical-list span {
  font-size: 1.02rem;
}

.zb-keepfresh-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #e0f2fe 36%, white));
}

.zb-guide-flow.zb-interleaving-model-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-interleaving-model-flow li {
  min-height: 8rem;
}

.zb-interleaving-example-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-interleaving-example-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.68), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 11%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.82rem;
  padding: 0.95rem;
}

.zb-interleaving-example-card.is-compact {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 10rem),
    var(--guide-panel);
}

.zb-interleaving-sequence {
  display: grid;
  gap: 0.42rem;
  justify-items: stretch;
}

.zb-interleaving-sequence strong {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.7), transparent 4rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 13%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1;
  padding: 0.72rem 0.86rem;
  text-align: center;
}

.zb-interleaving-sequence i {
  color: var(--guide-accent-strong);
  font-size: 1.32rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.zb-interleaving-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #e0e7ff 42%, white));
}

.zb-rotation-unit-map {
  align-items: stretch;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.08fr) auto minmax(0, 1fr);
}

.zb-rotation-unit-map article {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.5rem;
  min-height: 11rem;
  padding: 0.95rem;
}

.zb-rotation-unit-map article.is-core {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 24%, transparent), transparent 12rem),
    var(--guide-panel);
  border-color: color-mix(in srgb, var(--guide-accent) 34%, transparent);
}

.zb-rotation-unit-map > i {
  align-self: center;
  border-right: 3px solid color-mix(in srgb, var(--guide-accent) 44%, transparent);
  border-top: 3px solid color-mix(in srgb, var(--guide-accent) 44%, transparent);
  height: 0.74rem;
  transform: rotate(45deg);
  width: 0.74rem;
}

.zb-rotation-unit-map span {
  background: color-mix(in srgb, var(--guide-accent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.45rem 0.62rem;
  width: fit-content;
}

.zb-rotation-unit-map strong {
  color: var(--guide-ink);
  font-size: clamp(1.18rem, 1.9vw, 1.48rem);
  letter-spacing: 0;
  line-height: 1.12;
}

.zb-rotation-unit-map p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.42;
  margin: 0;
}

.zb-rotation-problem-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-rotation-problem-grid .zb-guide-card {
  min-height: 13rem;
}

.zb-spaced-timeline-section {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--guide-accent) 10%, white));
}

.zb-spaced-timeline {
  display: grid;
  gap: 0.42rem;
  justify-self: center;
  max-width: 34rem;
  width: min(100%, 34rem);
}

.zb-spaced-timeline article {
  align-items: center;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.68), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.72rem;
  grid-template-columns: 7rem minmax(0, 1fr);
  min-height: 4.85rem;
  padding: 0.84rem;
}

.zb-spaced-timeline article.is-learn {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 24%, transparent), transparent 10rem),
    var(--guide-panel);
}

.zb-spaced-timeline article span {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.96rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 2.3rem;
  padding: 0.58rem 0.78rem;
  text-align: center;
}

.zb-spaced-timeline article strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.14;
}

.zb-spaced-timeline i {
  color: var(--guide-accent-strong);
  font-size: 1.34rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.zb-spaced-example-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-spaced-example-grid article {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.5rem;
  min-height: 12rem;
  padding: 0.95rem;
}

.zb-spaced-example-grid article.is-zonebuilder {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 24%, transparent), transparent 12rem),
    var(--guide-panel);
  border-color: color-mix(in srgb, var(--guide-accent) 32%, transparent);
}

.zb-spaced-example-grid strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  letter-spacing: 0;
  line-height: 1.14;
}

.zb-spaced-example-grid p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.44;
  margin: 0;
}

.zb-spaced-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #e0f2fe 38%, white));
}

@media (max-width: 980px) {
  .zb-spaced-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .zb-spaced-timeline article,
  .zb-spaced-example-grid {
    grid-template-columns: 1fr;
  }
}

.zb-practice-system-guide {
  --practice-card: rgba(255, 255, 255, 0.74);
  --practice-card-strong: rgba(255, 255, 255, 0.9);
}

.zb-practice-model-strip {
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 15rem),
    rgba(255, 255, 255, 0.7);
}

.zb-guide-flow.zb-practice-model-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-practice-model-flow li {
  min-height: 8.1rem;
}

.zb-practice-model-flow li small {
  color: var(--guide-soft-ink);
  display: block;
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.32;
}

.zb-practice-model-note {
  color: var(--guide-soft-ink);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 760;
  line-height: 1.45;
  margin: 0;
  max-width: 48rem;
}

.zb-practice-system-flow {
  align-items: stretch;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.08fr) auto minmax(0, 0.95fr);
}

.zb-practice-flow-arrow {
  align-self: center;
  height: 0.85rem;
  position: relative;
  width: 1.6rem;
}

.zb-practice-flow-arrow::before,
.zb-practice-flow-arrow::after {
  background: color-mix(in srgb, var(--guide-accent-strong) 40%, transparent);
  content: "";
  position: absolute;
}

.zb-practice-flow-arrow::before {
  height: 2px;
  left: 0;
  right: 0.1rem;
  top: 50%;
  transform: translateY(-50%);
}

.zb-practice-flow-arrow::after {
  border-radius: 2px;
  height: 0.62rem;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 0.62rem;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 34% 84%, 58% 60%, 0 60%, 0 40%, 58% 40%, 34% 16%);
}

.zb-practice-stage {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 12%, transparent), transparent 13rem),
    var(--practice-card);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 24px;
  box-shadow: 0 18px 42px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.74rem;
  padding: clamp(0.95rem, 2vw, 1.25rem);
}

.zb-practice-stage.is-schedule {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, #60a5fa 14%, transparent), transparent 13rem),
    var(--practice-card);
}

.zb-practice-stage.is-session {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, #f59e0b 14%, transparent), transparent 13rem),
    var(--practice-card);
}

.zb-practice-stage header {
  align-items: start;
  display: grid;
  gap: 0.68rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.zb-practice-stage-number {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 18px;
  box-shadow: 0 12px 24px var(--guide-shadow);
  color: #ffffff;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 900;
  height: 2.45rem;
  justify-content: center;
  width: 2.45rem;
}

.zb-practice-stage h3,
.zb-practice-stage h4,
.zb-practice-today-card h4 {
  color: var(--guide-ink);
  letter-spacing: 0;
  line-height: 1.14;
  margin: 0;
}

.zb-practice-stage h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.42rem);
  margin-top: 0.22rem;
}

.zb-practice-stage header p,
.zb-practice-card p {
  color: var(--guide-soft-ink);
  font-size: 0.96rem;
  line-height: 1.48;
  margin: 0.28rem 0 0;
}

.zb-practice-stage header p strong {
  color: var(--guide-accent-strong);
}

.zb-practice-card,
.zb-practice-today-card {
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 255, 255, 0.62), transparent 8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 8%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 18px;
  display: grid;
  gap: 0.52rem;
  padding: 0.82rem;
}

.zb-practice-card h4 {
  font-size: 1rem;
}

.zb-practice-goal-card strong {
  color: var(--guide-ink);
  font-size: 1.08rem;
  line-height: 1.22;
}

.zb-practice-down-arrow {
  justify-self: center;
  height: 1.45rem;
  position: relative;
  width: 1rem;
}

.zb-practice-down-arrow::before,
.zb-practice-down-arrow::after {
  background: color-mix(in srgb, var(--guide-accent-strong) 34%, transparent);
  content: "";
  position: absolute;
}

.zb-practice-down-arrow::before {
  bottom: 0.16rem;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

.zb-practice-down-arrow::after {
  border-right: 2px solid color-mix(in srgb, var(--guide-accent-strong) 34%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--guide-accent-strong) 34%, transparent);
  bottom: 0.08rem;
  height: 0.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 0.5rem;
}

.zb-practice-library-chips {
  gap: 0.45rem;
}

.zb-practice-library-chips span {
  font-size: 0.88rem;
  padding: 0.52rem 0.66rem;
}

.zb-practice-card ul,
.zb-practice-today-card ol {
  color: var(--guide-soft-ink);
  display: grid;
  gap: 0.28rem;
  font-size: 0.9rem;
  line-height: 1.35;
  margin: 0;
  padding-left: 1.1rem;
}

.zb-practice-card b {
  align-self: start;
  background: color-mix(in srgb, var(--guide-accent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 28%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.68rem;
  font-weight: 900;
  justify-self: start;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.5rem;
  text-transform: uppercase;
}

.zb-practice-mini-flow {
  align-items: stretch;
  display: grid;
  gap: 0.42rem;
}

.zb-practice-mini-flow span {
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 16%, transparent);
  border-radius: 14px;
  color: var(--guide-ink);
  display: flex;
  font-size: 0.88rem;
  font-weight: 780;
  line-height: 1.24;
  min-height: 2.35rem;
  padding: 0.55rem 0.64rem;
}

.zb-practice-mini-flow i {
  justify-self: center;
  height: 0.82rem;
  position: relative;
  width: 0.72rem;
}

.zb-practice-mini-flow i::before,
.zb-practice-mini-flow i::after {
  content: "";
  position: absolute;
}

.zb-practice-mini-flow i::before {
  background: color-mix(in srgb, var(--guide-accent-strong) 30%, transparent);
  bottom: 0.04rem;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

.zb-practice-mini-flow i::after {
  border-bottom: 2px solid color-mix(in srgb, var(--guide-accent-strong) 30%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--guide-accent-strong) 30%, transparent);
  bottom: 0;
  height: 0.36rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 0.36rem;
}

.zb-practice-keep-fresh {
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, #60a5fa 14%, transparent), transparent 9rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--guide-accent) 9%, white));
}

.zb-practice-today-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.74), transparent 10rem),
    linear-gradient(145deg, color-mix(in srgb, #f59e0b 18%, white), rgba(255, 255, 255, 0.94));
  border-color: color-mix(in srgb, #f59e0b 24%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, #92400e 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.zb-practice-today-card > span {
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zb-practice-today-card h4 {
  font-size: clamp(1.24rem, 2.2vw, 1.62rem);
}

.zb-practice-today-card ol {
  color: rgba(55, 38, 12, 0.82);
  font-size: 0.95rem;
}

.zb-practice-today-card .zb-practice-queue-preview {
  display: grid;
  gap: 0.48rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-practice-queue-preview li {
  align-items: center;
  background:
    radial-gradient(circle at 9% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(18, 35, 46, 0.9), rgba(11, 24, 36, 0.95));
  border: 1px solid rgba(226, 235, 244, 0.14);
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(55, 38, 12, 0.1);
  color: rgba(248, 251, 255, 0.9);
  display: grid;
  gap: 0.58rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.85rem;
  padding: 0.68rem 0.74rem;
}

.zb-practice-queue-preview li.is-current {
  background:
    radial-gradient(circle at 10% 12%, rgba(16, 185, 129, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(20, 54, 49, 0.95), rgba(11, 30, 36, 0.96));
  border-color: rgba(16, 185, 129, 0.52);
  box-shadow:
    inset 3px 0 0 var(--guide-accent),
    0 14px 30px rgba(6, 78, 59, 0.16);
}

.zb-practice-queue-preview li > span {
  align-items: center;
  background: rgba(244, 248, 252, 0.9);
  border-radius: 999px;
  color: #17212c;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

.zb-practice-queue-preview li.is-current > span {
  background: var(--guide-accent);
  color: #ffffff;
}

.zb-practice-queue-preview div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.zb-practice-queue-preview strong {
  color: rgba(248, 251, 255, 0.94);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.zb-practice-queue-preview small {
  color: rgba(226, 236, 250, 0.6);
  font-size: 0.72rem;
  font-weight: 640;
  line-height: 1.2;
}

.zb-practice-queue-preview b {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(226, 235, 244, 0.14);
  border-radius: 999px;
  color: rgba(226, 236, 250, 0.76);
  font-size: 0.64rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  padding: 0.24rem 0.42rem;
  text-transform: uppercase;
}

.zb-practice-queue-preview li.is-current b {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.34);
  color: rgba(209, 250, 229, 0.95);
}

.zb-practice-queue-preview li.is-warmup small em {
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 999px;
  color: rgba(153, 246, 228, 0.96);
  display: inline-flex;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-right: 0.34rem;
  padding: 0.12rem 0.32rem;
  text-transform: uppercase;
  vertical-align: 0.08rem;
}

.zb-practice-handles .zb-guide-chip-grid span {
  padding-left: 0.78rem;
}

.zb-practice-handles .zb-guide-chip-grid span::before {
  color: var(--guide-accent-strong);
  content: "✓";
  font-weight: 900;
  margin-right: 0.4rem;
}

.zb-practice-system-actions {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 22px;
  box-shadow: 0 14px 34px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  justify-content: flex-start;
  padding: clamp(0.9rem, 2vw, 1.15rem);
}

.zb-practice-system-actions h3 {
  color: var(--guide-ink);
}

.zb-practice-system-actions p {
  color: var(--guide-soft-ink);
}

.zb-practice-system-actions .text-button {
  color: var(--guide-accent-strong);
}

.zb-practice-system-actions .text-button:hover,
.zb-practice-system-actions .text-button:focus-visible {
  color: var(--guide-ink);
}

.zb-practice-final-takeaway {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--guide-accent) 20%, transparent), transparent 17rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--guide-accent) 16%, white));
  border-color: color-mix(in srgb, var(--guide-accent-strong) 24%, transparent);
  box-shadow:
    0 22px 54px color-mix(in srgb, var(--guide-accent-strong) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: clamp(1.15rem, 2.8vw, 1.85rem);
}

.zb-practice-final-takeaway strong {
  font-size: clamp(1.62rem, 3.1vw, 2.62rem);
}

.zb-practice-memory-guide {
  --memory-card: rgba(255, 255, 255, 0.76);
  --memory-card-strong: rgba(255, 255, 255, 0.92);
}

.zb-memory-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-memory-flow li {
  min-height: 8.25rem;
}

.zb-memory-flow li small {
  color: var(--guide-soft-ink);
  display: block;
  font-size: 0.86rem;
  line-height: 1.34;
}

.zb-memory-section,
.zb-memory-example {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 18px 42px var(--guide-shadow);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.3vw, 1.45rem);
}

.zb-memory-section-heading {
  display: grid;
  gap: 0.38rem;
  max-width: 58rem;
}

.zb-memory-section-heading h3 {
  color: var(--guide-ink);
  font-size: clamp(1.28rem, 2.2vw, 1.78rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0.15rem 0 0;
}

.zb-memory-section-heading p,
.zb-memory-story p,
.zb-memory-example-card p,
.zb-memory-actions p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.52;
  margin: 0;
}

.zb-memory-chip-grid span {
  border-radius: 16px;
  color: var(--guide-ink);
  padding: 0.72rem 0.82rem;
}

.zb-memory-chip-grid span::before {
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 0.52rem;
  margin-right: 0.48rem;
  vertical-align: 0.08rem;
  width: 0.52rem;
}

.zb-memory-story-grid {
  align-items: stretch;
  display: grid;
  gap: 0.58rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.zb-memory-story-grid article {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 30px var(--guide-shadow);
  display: grid;
  gap: 0.45rem;
  min-height: 7.2rem;
  padding: 0.9rem;
}

.zb-memory-story-grid article strong {
  color: var(--guide-ink);
  font-size: 1rem;
  line-height: 1.16;
}

.zb-memory-story-grid article span {
  color: var(--guide-soft-ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.36;
}

.zb-memory-story-grid i {
  align-self: center;
  height: 0.8rem;
  position: relative;
  width: 1.35rem;
}

.zb-memory-story-grid i::before,
.zb-memory-story-grid i::after {
  content: "";
  position: absolute;
}

.zb-memory-story-grid i::before {
  background: color-mix(in srgb, var(--guide-accent-strong) 36%, transparent);
  height: 2px;
  left: 0;
  right: 0.16rem;
  top: 50%;
  transform: translateY(-50%);
}

.zb-memory-story-grid i::after {
  border-right: 2px solid color-mix(in srgb, var(--guide-accent-strong) 36%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--guide-accent-strong) 36%, transparent);
  height: 0.48rem;
  right: 0.1rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 0.48rem;
}

.zb-memory-example-card {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--guide-accent) 15%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--guide-accent) 8%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, transparent);
  border-radius: 22px;
  box-shadow: 0 18px 42px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.zb-memory-example-card header {
  display: grid;
  gap: 0.34rem;
}

.zb-memory-example-card header span {
  color: var(--guide-accent-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zb-memory-example-card header strong {
  color: var(--guide-ink);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  letter-spacing: 0;
  line-height: 1.05;
}

.zb-memory-stat-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zb-memory-stat-grid article {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 16px;
  display: grid;
  gap: 0.3rem;
  min-height: 5.8rem;
  padding: 0.78rem;
}

.zb-memory-stat-grid strong {
  color: var(--guide-accent-strong);
  font-size: clamp(1.28rem, 2.2vw, 1.75rem);
  line-height: 1;
}

.zb-memory-stat-grid span {
  color: var(--guide-soft-ink);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.22;
}

.zb-memory-final-takeaway {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 17rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 16%, white));
  border-color: color-mix(in srgb, var(--guide-accent-strong) 28%, transparent);
  box-shadow:
    0 24px 58px color-mix(in srgb, var(--guide-accent-strong) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.zb-memory-final-takeaway strong {
  font-size: clamp(1.62rem, 3.2vw, 2.72rem);
}

.zb-memory-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.zb-memory-actions h3 {
  color: var(--guide-ink);
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0 0 0.28rem;
}

.zb-memory-actions .text-button {
  color: var(--guide-accent-strong);
}

.zb-existing-system-mapping {
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 15rem),
    rgba(255, 255, 255, 0.7);
}

.zb-existing-map-grid {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-existing-map-grid article {
  align-items: center;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.66), transparent 5rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 16px;
  box-shadow: 0 10px 24px var(--guide-shadow);
  display: grid;
  gap: 0.42rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 5.1rem;
  padding: 0.7rem;
}

.zb-existing-map-grid span,
.zb-existing-map-grid strong {
  line-height: 1.18;
  min-width: 0;
}

.zb-existing-map-grid span {
  color: var(--guide-soft-ink);
  font-size: 0.88rem;
  font-weight: 720;
}

.zb-existing-map-grid i {
  color: var(--guide-accent-strong);
  font-style: normal;
  font-weight: 900;
}

.zb-existing-map-grid strong {
  color: var(--guide-ink);
  font-size: 0.94rem;
  font-weight: 860;
}

.zb-existing-routine-chips span,
.zb-existing-benefit-chips span {
  font-size: 0.88rem;
  padding: 0.54rem 0.68rem;
}

.zb-existing-benefit-chips span::before {
  color: var(--guide-accent-strong);
  content: "✓";
  font-weight: 900;
  margin-right: 0.4rem;
}

.zb-concepts-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-concepts-index {
  display: grid;
  gap: 1rem;
}

.zb-concepts-section {
  --zb-concept-accent: 94, 234, 212;
  --zb-concept-accent-2: 167, 139, 250;
  display: grid;
  gap: 0.72rem;
}

.zb-concepts-section--methods {
  --zb-concept-accent: 94, 234, 212;
  --zb-concept-accent-2: 45, 212, 191;
}

.zb-concepts-section--scheduling {
  --zb-concept-accent: 167, 139, 250;
  --zb-concept-accent-2: 34, 211, 238;
}

.zb-concepts-section--capstone {
  --zb-concept-accent: 251, 191, 36;
  --zb-concept-accent-2: 249, 115, 22;
}

.zb-concepts-section--understanding {
  --zb-concept-accent: 96, 165, 250;
  --zb-concept-accent-2: 34, 211, 238;
}

.zb-concepts-section > header {
  border-bottom: 1px solid rgba(var(--zb-concept-accent), 0.2);
  display: grid;
  gap: 0.18rem;
  padding: 0 0.12rem 0.58rem;
  position: relative;
}

.zb-concepts-section > header::after {
  background: linear-gradient(90deg, rgba(var(--zb-concept-accent), 0.72), rgba(var(--zb-concept-accent-2), 0.08));
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0.12rem;
  position: absolute;
  width: min(11rem, 42%);
}

.zb-concepts-section > header .getting-started-kicker {
  color: rgba(var(--zb-concept-accent), 0.92);
}

.zb-concepts-section h3 {
  color: rgba(248, 251, 255, 0.96);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
}

.zb-concepts-grid article {
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--zb-concept-accent), 0.11), transparent 11rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(5, 12, 24, 0.82));
  border: 1px solid rgba(var(--zb-concept-accent), 0.16);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 48px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 0.46rem;
  min-height: 9rem;
  padding: 0.92rem;
  position: relative;
}

.zb-concepts-grid article button,
.zb-concepts-grid article .zb-concept-card-status {
  align-self: end;
  justify-self: start;
}

.zb-concepts-grid article.is-planned {
  opacity: 0.72;
}

.zb-concepts-grid article.is-planned strong {
  color: rgba(226, 232, 240, 0.82);
}

.zb-concepts-grid article.is-planned p {
  color: rgba(203, 213, 225, 0.62);
}

.zb-concepts-grid article.is-planned::before {
  opacity: 0.38;
}

.zb-concepts-grid article::before {
  background: linear-gradient(180deg, rgba(var(--zb-concept-accent), 0.62), rgba(var(--zb-concept-accent-2), 0.42));
  border-radius: 999px;
  content: "";
  inset: 0.82rem auto 0.82rem 0;
  opacity: 0.72;
  position: absolute;
  width: 3px;
}

.zb-concepts-grid strong {
  color: rgba(248, 251, 255, 0.96);
  font-size: 0.98rem;
  line-height: 1.18;
}

.zb-concepts-grid p {
  color: rgba(203, 213, 225, 0.75);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
}

.zb-concepts-grid.zb-concepts-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.zb-concepts-grid article.zb-concepts-card--capstone {
  background:
    radial-gradient(circle at calc(100% - 5rem) 0%, rgba(var(--zb-concept-accent), 0.2), transparent 12rem),
    radial-gradient(circle at 8% 0%, rgba(var(--zb-concept-accent-2), 0.15), transparent 11rem),
    linear-gradient(145deg, rgba(30, 24, 8, 0.78), rgba(6, 12, 24, 0.88));
  border-color: rgba(var(--zb-concept-accent), 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 22px 58px rgba(0, 0, 0, 0.2),
    0 0 36px rgba(var(--zb-concept-accent), 0.08);
  min-height: 10.4rem;
  overflow: hidden;
  padding: 1.08rem 8rem 1.08rem 1.08rem;
}

.zb-concepts-card--capstone strong {
  font-size: 1.08rem;
  max-width: 34rem;
}

.zb-concepts-card--capstone p {
  font-size: 0.9rem;
  max-width: 34rem;
}

.zb-concepts-card--capstone::after {
  background:
    linear-gradient(90deg, rgba(var(--zb-concept-accent), 0.46), rgba(var(--zb-concept-accent-2), 0.26)) 50% 50% / 72% 2px no-repeat,
    radial-gradient(circle at 18% 50%, rgba(var(--zb-concept-accent), 0.94) 0 0.33rem, transparent 0.35rem),
    radial-gradient(circle at 50% 50%, rgba(var(--zb-concept-accent-2), 0.82) 0 0.33rem, transparent 0.35rem),
    radial-gradient(circle at 82% 50%, rgba(248, 251, 255, 0.78) 0 0.33rem, transparent 0.35rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(5, 12, 24, 0.84));
  border: 1px solid rgba(var(--zb-concept-accent), 0.24);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  content: "";
  height: 4.3rem;
  position: absolute;
  right: 1.05rem;
  top: 1.05rem;
  width: 5.7rem;
}

.zb-concept-card-status {
  align-self: start;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(196, 211, 230, 0.14);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.58rem;
  text-transform: uppercase;
}

.zb-guide-flow.zb-importzone-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-importzone-flow li {
  min-height: 8.4rem;
}

.zb-importzone-flow li small {
  color: var(--guide-soft-ink);
  display: block;
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.34;
}

.zb-importzone-assistant-list {
  color: var(--guide-soft-ink);
  display: grid;
  gap: 0.36rem;
  line-height: 1.42;
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

.zb-importzone-use-grid span {
  font-size: 0.9rem;
  padding: 0.58rem 0.72rem;
}

.zb-importzone-workflow-choice {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 12rem),
    color-mix(in srgb, var(--guide-accent) 10%, white);
}

.zb-importzone-confidence-grid,
.zb-importzone-example-stack,
.zb-importzone-ambiguity-grid {
  display: grid;
  gap: 0.74rem;
}

.zb-importzone-confidence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-importzone-confidence-grid article,
.zb-importzone-example-card,
.zb-importzone-ambiguity-grid article {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 14%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 9%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.62rem;
  padding: clamp(0.82rem, 1.55vw, 1rem);
}

.zb-importzone-confidence-grid article:first-child,
.zb-importzone-example-card:nth-child(odd) {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 12rem),
    var(--guide-panel);
}

.zb-importzone-confidence-grid strong,
.zb-importzone-example-card h4,
.zb-importzone-ambiguity-grid strong {
  color: var(--guide-ink);
  letter-spacing: 0;
  line-height: 1.14;
  margin: 0;
}

.zb-importzone-confidence-grid strong {
  font-size: clamp(1.2rem, 1.9vw, 1.48rem);
}

.zb-importzone-example-card h4 {
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
}

.zb-importzone-ambiguity-grid strong {
  font-size: 1.04rem;
}

.zb-importzone-confidence-grid p,
.zb-importzone-example-card p,
.zb-importzone-ambiguity-grid p,
.zb-importzone-ambiguity > div > p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.48;
  margin: 0;
}

.zb-importzone-example-card header {
  display: grid;
  gap: 0.28rem;
}

.zb-importzone-example-card pre {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--guide-accent) 10%, transparent), transparent 8rem),
    rgba(255, 255, 255, 0.68);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 16px;
  color: var(--guide-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.42;
  margin: 0;
  overflow-x: auto;
  padding: 0.68rem;
  white-space: pre-wrap;
}

.zb-importzone-example-steps {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-importzone-example-steps section {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 16%, transparent);
  border-radius: 15px;
  display: grid;
  gap: 0.28rem;
  padding: 0.58rem;
}

.zb-importzone-example-steps strong {
  color: var(--guide-accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.18;
  text-transform: uppercase;
}

.zb-importzone-example-steps p {
  font-size: 0.84rem;
  line-height: 1.34;
}

.zb-importzone-ambiguity-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-importzone-review-tip {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #dbeafe 34%, white));
}

.zb-importzone-final-takeaway {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--guide-accent) 20%, transparent), transparent 17rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 14%, white));
  border-color: color-mix(in srgb, var(--guide-accent-strong) 22%, transparent);
}

.zb-scheduling-flow {
  align-items: stretch;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.zb-scheduling-flow article,
.zb-scheduling-topic-grid article,
.zb-scheduling-example > div,
.zb-scheduling-scale article,
.zb-scheduling-intelligence-grid article,
.zb-scheduling-learn-more,
.zb-scheduling-future {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 18px 42px var(--guide-shadow);
}

.zb-scheduling-flow article {
  display: grid;
  gap: 0.48rem;
  padding: 0.95rem;
}

.zb-scheduling-flow article span {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.8), rgba(124, 58, 237, 0.72));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.zb-scheduling-flow article strong,
.zb-scheduling-topic-grid article strong,
.zb-scheduling-example strong,
.zb-scheduling-scale article strong,
.zb-scheduling-intelligence-grid article strong,
.zb-scheduling-learn-more strong,
.zb-scheduling-future strong {
  color: var(--guide-ink);
  font-size: 1rem;
  line-height: 1.18;
}

.zb-scheduling-flow article p,
.zb-scheduling-topic-grid article p,
.zb-scheduling-example p,
.zb-scheduling-section-heading p,
.zb-scheduling-scale article p,
.zb-scheduling-intelligence-grid article p,
.zb-scheduling-learn-more p,
.zb-scheduling-future p {
  color: var(--guide-soft-ink);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}

.zb-scheduling-flow i {
  align-self: center;
  color: rgba(94, 234, 212, 0.72);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.35);
}

.zb-scheduling-example {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-scheduling-example > div {
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem;
}

.zb-scheduling-example ol {
  color: var(--guide-soft-ink);
  display: grid;
  gap: 0.42rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-scheduling-example li {
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 14%, transparent);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 2.35rem;
  padding: 0.48rem 0.58rem;
}

.zb-scheduling-example li span {
  color: var(--guide-ink);
  font-weight: 820;
  min-width: 0;
}

.zb-scheduling-example li em {
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 0.34rem 0.48rem;
  white-space: nowrap;
}

.zb-scheduling-example li.is-warmup,
.zb-scheduling-example li.is-repeat {
  background: color-mix(in srgb, #fef3c7 64%, white);
  border-color: rgba(217, 119, 6, 0.24);
}

.zb-scheduling-example li.is-warmup em,
.zb-scheduling-example li.is-repeat em {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}

.zb-scheduling-example li.is-completed,
.zb-scheduling-example li.is-later {
  background: rgba(255, 255, 255, 0.38);
}

.zb-scheduling-example li.is-completed span,
.zb-scheduling-example li.is-later span {
  color: color-mix(in srgb, var(--guide-soft-ink) 88%, white);
}

.zb-scheduling-example li.is-completed em,
.zb-scheduling-example li.is-later em {
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
}

.zb-scheduling-example li.is-stop-point {
  background: color-mix(in srgb, #fee2e2 62%, white);
  border-color: rgba(220, 38, 38, 0.24);
}

.zb-scheduling-example li.is-stop-point em {
  background: rgba(220, 38, 38, 0.1);
  color: #991b1b;
}

.zb-scheduling-example li.is-resume-point,
.zb-scheduling-example li.is-moving-up {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 9rem),
    color-mix(in srgb, var(--guide-accent) 14%, white);
  border-color: color-mix(in srgb, var(--guide-accent) 34%, transparent);
  box-shadow: 0 12px 26px var(--guide-shadow);
}

.zb-scheduling-example li.is-resume-point em,
.zb-scheduling-example li.is-moving-up em {
  background: color-mix(in srgb, var(--guide-accent) 17%, white);
  color: var(--guide-accent-strong);
}

.zb-scheduling-topic-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-scheduling-topic-grid article {
  display: grid;
  gap: 0.44rem;
  min-height: 8rem;
  padding: 0.9rem;
}

.zb-scheduling-model-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zb-scheduling-model-flow li small {
  color: var(--guide-soft-ink);
  display: block;
  font-size: 0.82rem;
  line-height: 1.32;
}

.zb-scheduling-scale,
.zb-scheduling-intelligence,
.zb-scheduling-learn-more {
  display: grid;
  gap: 1rem;
}

.zb-scheduling-section-heading {
  display: grid;
  gap: 0.38rem;
  max-width: 58rem;
}

.zb-scheduling-section-heading h3 {
  color: var(--guide-ink);
  font-size: clamp(1.28rem, 2.2vw, 1.78rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0.15rem 0 0;
}

.zb-scheduling-scale-grid,
.zb-scheduling-intelligence-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-scheduling-scale-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-scheduling-intelligence-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-scheduling-scale article,
.zb-scheduling-intelligence-grid article,
.zb-scheduling-learn-more {
  display: grid;
  gap: 0.62rem;
  padding: 1rem;
}

.zb-scheduling-future {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem;
}

.zb-key-rotation-stage,
.zb-key-session-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-key-rotation-stage {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.72fr) minmax(0, 1fr);
}

.zb-key-rotation-stage article,
.zb-key-session-grid article {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--guide-accent) 14%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 18px 42px var(--guide-shadow);
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem;
}

.zb-key-ladder {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 10rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--guide-accent) 14%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 24%, transparent);
  border-radius: 22px;
  box-shadow: 0 22px 52px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  padding: 1rem;
}

.zb-key-ladder span {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 1.02rem;
  font-weight: 900;
  height: 2.55rem;
  justify-content: center;
  min-width: 2.55rem;
  padding: 0 0.72rem;
}

.zb-key-ladder i {
  color: var(--guide-accent-strong);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.zb-key-session-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-key-session-grid article.is-resume {
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--guide-accent) 24%, transparent), transparent 12rem),
    var(--guide-panel);
  border-color: color-mix(in srgb, var(--guide-accent) 32%, transparent);
}

.zb-preview-forecast,
.zb-preview-week,
.zb-preview-look-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-preview-forecast {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-preview-week {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zb-preview-look-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-preview-forecast article,
.zb-preview-week article,
.zb-preview-look-grid article {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem;
}

.zb-preview-week article {
  align-content: start;
  min-height: 10rem;
}

.zb-preview-week article.is-heavy {
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.26), transparent 10rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, #f59e0b 16%, white));
  border-color: rgba(245, 158, 11, 0.26);
}

.zb-preview-week article.is-light {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 20%, transparent), transparent 10rem),
    var(--guide-panel);
}

.zb-preview-week span {
  color: var(--guide-accent-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.zb-preview-forecast strong,
.zb-preview-week strong,
.zb-preview-look-grid strong {
  color: var(--guide-ink);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  letter-spacing: 0;
  line-height: 1.14;
}

.zb-preview-forecast p,
.zb-preview-week p,
.zb-preview-look-grid p,
.zb-preview-calendar-note {
  color: var(--guide-soft-ink);
  font-size: 0.96rem;
  line-height: 1.45;
  margin: 0;
}

.zb-preview-calendar-note {
  background: color-mix(in srgb, var(--guide-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 16px;
  padding: 0.85rem 1rem;
}

.zb-goal-map-roadmap {
  align-items: stretch;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.zb-goal-map-roadmap article,
.zb-goal-map-example-flow li,
.zb-goal-map-reading-grid article {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem;
}

.zb-goal-map-roadmap article {
  align-content: center;
  min-height: 10.4rem;
}

.zb-goal-map-roadmap article.is-goal,
.zb-goal-map-example-flow li:first-child {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 12rem),
    var(--guide-panel);
}

.zb-goal-map-roadmap > i {
  align-self: center;
  border-right: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  border-top: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  height: 0.8rem;
  transform: rotate(45deg);
  width: 0.8rem;
}

.zb-goal-map-roadmap strong,
.zb-goal-map-example-flow strong,
.zb-goal-map-reading-grid strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  letter-spacing: 0;
  line-height: 1.14;
}

.zb-goal-map-roadmap p,
.zb-goal-map-reading-grid p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.44;
  margin: 0;
}

.zb-goal-map-example-flow {
  display: grid;
  gap: 0.46rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-goal-map-example-flow li {
  align-items: center;
  grid-template-columns: 10rem minmax(0, 1fr);
  min-height: 4.9rem;
  position: relative;
}

.zb-goal-map-example-flow li:not(:last-child)::after {
  border-bottom: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  border-right: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  bottom: -0.56rem;
  content: "";
  height: 0.72rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 0.72rem;
  z-index: 2;
}

.zb-goal-map-example-flow span {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  padding: 0.62rem 0.78rem;
  text-align: center;
  text-transform: uppercase;
}

.zb-goal-map-reading-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-goal-map-reading-grid article {
  min-height: 11.2rem;
}

.zb-goal-map-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #dbeafe 42%, white));
}

.zb-view-day-question-map {
  align-items: stretch;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.zb-view-day-question-map article,
.zb-view-day-schedule article,
.zb-view-day-reading-grid article {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.7), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 18px;
  box-shadow: 0 14px 32px var(--guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem;
}

.zb-view-day-question-map article {
  min-height: 10.4rem;
}

.zb-view-day-question-map article.is-answer,
.zb-view-day-schedule article:nth-child(4),
.zb-view-day-schedule article:nth-child(5) {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 22%, transparent), transparent 12rem),
    var(--guide-panel);
}

.zb-view-day-question-map > i {
  align-self: center;
  border-right: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  border-top: 3px solid color-mix(in srgb, var(--guide-accent) 42%, transparent);
  height: 0.8rem;
  transform: rotate(45deg);
  width: 0.8rem;
}

.zb-view-day-question-map strong,
.zb-view-day-schedule strong,
.zb-view-day-reading-grid strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  letter-spacing: 0;
  line-height: 1.14;
}

.zb-view-day-question-map p,
.zb-view-day-schedule p,
.zb-view-day-reading-grid p {
  color: var(--guide-soft-ink);
  font-size: 0.98rem;
  line-height: 1.44;
  margin: 0;
}

.zb-view-day-schedule {
  display: grid;
  gap: 0.72rem;
}

.zb-view-day-schedule article {
  align-items: center;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.35fr);
  min-height: 5.8rem;
}

.zb-view-day-schedule article > span {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 900;
  height: 2.2rem;
  justify-content: center;
  width: 2.2rem;
}

.zb-view-day-schedule article div {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.zb-view-day-schedule small {
  background: color-mix(in srgb, var(--guide-accent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 24%, transparent);
  border-radius: 999px;
  color: var(--guide-accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
  justify-self: start;
  line-height: 1;
  padding: 0.42rem 0.58rem;
  text-transform: uppercase;
}

.zb-view-day-reading-grid {
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-view-day-reading-grid article {
  min-height: 11.2rem;
}

.zb-view-day-misunderstanding {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--guide-accent) 16%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, #dbeafe 42%, white));
}

@media (max-width: 980px) {
  .zb-preview-forecast,
  .zb-preview-week,
  .zb-preview-look-grid,
  .zb-goal-map-roadmap,
  .zb-goal-map-reading-grid,
  .zb-view-day-question-map,
  .zb-view-day-reading-grid {
    grid-template-columns: 1fr;
  }

  .zb-goal-map-roadmap > i,
  .zb-view-day-question-map > i {
    justify-self: center;
    transform: rotate(135deg);
  }
}

@media (max-width: 760px) {
  .zb-goal-map-example-flow li,
  .zb-view-day-schedule article {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .zb-goal-map-example-flow span {
    justify-self: start;
  }
}

.zb-collections-principle,
.zb-collections-example,
.zb-collections-topic-grid {
  display: grid;
  gap: 0.86rem;
}

.zb-collections-principle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-collections-example {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zb-collections-topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zb-collections-principle article,
.zb-collections-example > div,
.zb-collections-topic-grid article {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(5, 12, 24, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 48px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem;
}

.zb-collections-topic-grid article {
  min-height: 8.25rem;
}

.zb-collections-principle strong,
.zb-collections-example strong,
.zb-collections-topic-grid strong {
  color: rgba(248, 251, 255, 0.96);
  font-size: 1rem;
  line-height: 1.18;
}

.zb-collections-principle p,
.zb-collections-example p,
.zb-collections-topic-grid p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

.zb-collections-example ul {
  color: rgba(226, 236, 250, 0.84);
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.1rem;
}

.zb-material-flow {
  align-items: stretch;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.22fr) auto minmax(0, 0.98fr);
}

.zb-material-arrow {
  align-self: center;
  color: rgba(94, 234, 212, 0.72);
  font-size: 1.55rem;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.35);
}

.zb-material-column {
  background:
    radial-gradient(circle at 20% 0%, rgba(94, 234, 212, 0.12), transparent 13rem),
    linear-gradient(160deg, rgba(15, 23, 42, 0.78), rgba(8, 15, 28, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 56px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: 0.7rem;
  padding: 0.82rem;
}

.zb-material-column.is-schedule {
  background:
    radial-gradient(circle at 18% 0%, rgba(167, 139, 250, 0.15), transparent 14rem),
    linear-gradient(160deg, rgba(28, 25, 52, 0.82), rgba(8, 15, 28, 0.9));
}

.zb-material-column.is-session {
  background:
    radial-gradient(circle at 18% 0%, rgba(251, 191, 36, 0.13), transparent 14rem),
    linear-gradient(160deg, rgba(34, 24, 16, 0.78), rgba(8, 15, 28, 0.9));
}

.zb-material-column header {
  align-items: start;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: auto 1fr;
}

.zb-material-column header > span {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.72), rgba(124, 58, 237, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.96);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 900;
  height: 2.2rem;
  justify-content: center;
  width: 2.2rem;
}

.zb-material-column h3,
.zb-material-column h4 {
  color: rgba(248, 251, 255, 0.96);
  letter-spacing: 0;
  line-height: 1.14;
  margin: 0;
}

.zb-material-column h3 {
  font-size: 1.02rem;
}

.zb-material-column header p,
.zb-material-schedule-card p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.85rem;
  line-height: 1.42;
  margin: 0.25rem 0 0;
}

.zb-material-list-card,
.zb-material-schedule-card,
.zb-material-session-card {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.74), rgba(2, 8, 20, 0.7));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  display: grid;
  gap: 0.48rem;
  padding: 0.68rem;
}

.zb-material-list-card h4,
.zb-material-schedule-card h4 {
  font-size: 0.92rem;
}

.zb-material-list-card ul,
.zb-material-schedule-card ul,
.zb-material-session-card ol {
  color: rgba(226, 232, 240, 0.86);
  display: grid;
  gap: 0.28rem;
  font-size: 0.84rem;
  line-height: 1.35;
  margin: 0;
  padding-left: 1.05rem;
}

.zb-material-schedule-card > div {
  align-items: start;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
}

.zb-material-schedule-card b {
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 999px;
  color: rgba(204, 251, 241, 0.92);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 0.24rem 0.46rem;
  text-transform: uppercase;
}

.zb-material-session-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.12), transparent 11rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(2, 8, 20, 0.74));
  min-height: 100%;
}

.zb-material-session-card > span {
  color: rgba(253, 230, 138, 0.96);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zb-material-handles {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(124, 58, 237, 0.15)),
    rgba(8, 15, 28, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  display: grid;
  gap: 0.72rem;
  padding: 0.88rem;
}

.zb-material-handles h3 {
  color: rgba(248, 251, 255, 0.96);
  font-size: 1rem;
  margin: 0;
}

.zb-material-handles div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.zb-material-handles span {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.38rem 0.58rem;
}

.zb-onboarding-model,
.zb-existing-system-map {
  display: grid;
  gap: 0.86rem;
}

.zb-onboarding-model {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
}

.zb-onboarding-model article,
.zb-existing-system-map section,
.zb-onboarding-note {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(5, 12, 24, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 48px rgba(0, 0, 0, 0.18);
}

.zb-onboarding-model article {
  display: grid;
  gap: 0.54rem;
  padding: 0.95rem;
}

.zb-onboarding-model article > span {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.8), rgba(124, 58, 237, 0.72));
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.zb-onboarding-model strong,
.zb-existing-system-map h3 {
  color: rgba(248, 251, 255, 0.96);
  font-size: 1rem;
  line-height: 1.18;
  margin: 0;
}

.zb-onboarding-model p,
.zb-existing-system-map li,
.zb-onboarding-note {
  color: rgba(226, 236, 250, 0.82);
  font-size: 0.88rem;
  line-height: 1.45;
}

.zb-onboarding-model p {
  margin: 0;
}

.zb-onboarding-model ul,
.zb-existing-system-map ul {
  color: rgba(226, 236, 250, 0.84);
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding-left: 1.05rem;
}

.zb-onboarding-model i {
  align-self: center;
  color: rgba(94, 234, 212, 0.72);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.35);
}

.zb-first-routine-guide .zb-onboarding-model {
  gap: clamp(0.78rem, 1.55vw, 1rem);
}

.zb-first-routine-guide .zb-onboarding-model article {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--guide-accent) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--guide-accent) 8%, white));
  border-color: color-mix(in srgb, var(--guide-accent) 18%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 18px 42px var(--guide-shadow);
  gap: 0.62rem;
  padding: clamp(1rem, 2vw, 1.28rem);
}

.zb-first-routine-guide .zb-onboarding-model article > span {
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--guide-accent-strong) 18%, transparent);
  color: #ffffff;
}

.zb-first-routine-guide .zb-onboarding-model strong {
  color: var(--guide-ink);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  letter-spacing: 0;
}

.zb-first-routine-guide .zb-onboarding-model p,
.zb-first-routine-guide .zb-onboarding-model li {
  color: var(--guide-soft-ink);
  font-size: 0.96rem;
  line-height: 1.48;
}

.zb-first-routine-guide .zb-onboarding-model ul:not(.zb-first-routine-checklist) {
  color: var(--guide-soft-ink);
  gap: 0.34rem;
}

.zb-first-routine-guide .zb-onboarding-model i {
  color: color-mix(in srgb, var(--guide-accent-strong) 55%, transparent);
  text-shadow: none;
}

.zb-first-routine-checklist {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.44rem !important;
  list-style: none;
  padding-left: 0 !important;
}

.zb-first-routine-checklist li {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent);
  border-radius: 999px;
  color: var(--guide-ink) !important;
  display: flex;
  font-size: 0.9rem !important;
  font-weight: 760;
  gap: 0.42rem;
  line-height: 1.2 !important;
  padding: 0.42rem 0.58rem;
}

.zb-first-routine-checklist li::before {
  align-items: center;
  background: linear-gradient(135deg, var(--guide-accent-strong), var(--guide-accent));
  border-radius: 999px;
  color: #ffffff;
  content: "\2713";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
  height: 1rem;
  justify-content: center;
  width: 1rem;
}

.zb-first-routine-example,
.zb-first-routine-reassurance {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--guide-accent) 14%, transparent), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--guide-accent) 10%, white));
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 18px 42px var(--guide-shadow);
}

.zb-first-routine-example {
  align-items: stretch;
  display: grid;
  gap: 0.74rem;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.35fr) auto minmax(0, 0.9fr);
  padding: clamp(1rem, 2.1vw, 1.3rem);
}

.zb-first-routine-example article {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 18%, transparent);
  border-radius: 18px;
  display: grid;
  gap: 0.36rem;
  padding: 0.82rem;
}

.zb-first-routine-example span {
  color: var(--guide-accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zb-first-routine-example strong {
  color: var(--guide-ink);
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.zb-first-routine-example ul {
  color: var(--guide-soft-ink);
  display: grid;
  gap: 0.24rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zb-first-routine-example li {
  color: var(--guide-soft-ink);
  font-size: 0.92rem;
  line-height: 1.38;
}

.zb-first-routine-example li::before {
  color: var(--guide-accent-strong);
  content: "\2022";
  font-weight: 900;
  margin-right: 0.4rem;
}

.zb-first-routine-example i {
  align-self: center;
  color: color-mix(in srgb, var(--guide-accent-strong) 52%, transparent);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 900;
}

.zb-first-routine-reassurance {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--guide-accent) 18%, transparent), transparent 17rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--guide-accent) 14%, white));
  border-color: color-mix(in srgb, var(--guide-accent-strong) 22%, transparent);
}

.zb-first-routine-reassurance strong {
  color: var(--guide-ink);
}

.zb-first-routine-reassurance p {
  color: var(--guide-soft-ink);
  margin: 0;
}

@media (max-width: 1180px) {
  .zb-first-routine-example {
    grid-template-columns: 1fr;
  }

  .zb-first-routine-example i {
    display: none;
  }
}

.zb-existing-system-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zb-existing-system-map section {
  display: grid;
  gap: 0.62rem;
  padding: 0.98rem;
}

.zb-onboarding-note {
  background:
    radial-gradient(circle at 0 0, rgba(251, 191, 36, 0.15), transparent 12rem),
    linear-gradient(145deg, rgba(49, 31, 15, 0.68), rgba(5, 12, 24, 0.86));
  border-color: rgba(251, 191, 36, 0.22);
  padding: 0.88rem 0.95rem;
}

.zb-material-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  justify-content: center;
}

.zb-material-actions .text-button {
  background: transparent;
  border: 0;
  color: rgba(203, 213, 225, 0.78);
  min-height: auto;
  padding: 0.35rem 0.2rem;
}

.zb-material-actions .text-button:hover,
.zb-material-actions .text-button:focus-visible {
  color: rgba(94, 234, 212, 0.94);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

body.guided-onboarding-overlay-active .dashboard-start-empty {
  pointer-events: none;
}

body.guided-onboarding-overlay-active .dashboard-start-empty .button-row {
  display: none;
}

.onboarding-choice-grid {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guidance-choice-card {
  align-items: start;
  background: rgba(8, 15, 28, 0.72);
  border: 1px solid rgba(196, 211, 230, 0.18);
  border-radius: 16px;
  color: rgba(248, 251, 255, 0.9);
  display: grid;
  gap: 0.25rem;
  min-height: 3.7rem;
  padding: 0.78rem 0.85rem;
  text-align: left;
}

.guidance-choice-card:hover,
.guidance-choice-card:focus-visible,
.guidance-choice-card.is-selected {
  background:
    radial-gradient(circle at 16% 20%, rgba(45, 212, 191, 0.2), transparent 7rem),
    rgba(88, 63, 191, 0.34);
  border-color: rgba(167, 139, 250, 0.68);
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.2),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.guidance-choice-card.is-selected,
.guidance-choice-card[aria-pressed="true"] {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.24), rgba(124, 58, 237, 0.32)),
    rgba(15, 23, 42, 0.86);
  border-color: rgba(94, 234, 212, 0.8);
  box-shadow:
    0 0 0 3px rgba(45, 212, 191, 0.2),
    0 18px 42px rgba(45, 212, 191, 0.12);
}

.guidance-choice-card.is-selected::after,
.guidance-choice-card[aria-pressed="true"]::after {
  align-items: center;
  background: rgba(45, 212, 191, 0.22);
  border: 1px solid rgba(94, 234, 212, 0.72);
  border-radius: 999px;
  color: rgba(204, 251, 241, 0.98);
  content: "Selected";
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0.08em;
  margin-top: 0.18rem;
  padding: 0.22rem 0.48rem;
  text-transform: uppercase;
  width: fit-content;
}

.guidance-choice-card small {
  color: rgba(203, 213, 225, 0.7);
  line-height: 1.35;
}

.onboarding-form {
  display: grid;
  gap: 0.85rem;
}

.onboarding-form label {
  display: grid;
  gap: 0.38rem;
}

.onboarding-form label span {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-form input,
.onboarding-form textarea {
  background: rgba(2, 8, 20, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.94);
  font: inherit;
  padding: 0.72rem 0.82rem;
}

.onboarding-suggestion-row {
  justify-content: flex-start;
}

.onboarding-draft-list {
  display: grid;
  gap: 0.45rem;
}

.onboarding-draft-row {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(8, 47, 73, 0.42));
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.55rem 0.65rem 0.55rem 0.8rem;
}

.onboarding-draft-row span {
  color: rgba(248, 250, 252, 0.92);
  font-weight: 800;
}

.onboarding-draft-row button {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
}

.onboarding-form.is-creating-schedule {
  opacity: 0.86;
}

.onboarding-form.is-creating-schedule input,
.onboarding-form.is-creating-schedule textarea,
.onboarding-form.is-creating-schedule button {
  pointer-events: none;
}

body.zb-brand-new-welcome-active {
  background: #020617;
  margin: 0 !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

body.zb-brand-new-welcome-active .app-header,
body.zb-brand-new-welcome-active #setupReturnBar {
  display: none !important;
}

body.zb-brand-new-welcome-active .app-shell {
  display: block;
  grid-template-columns: 1fr !important;
  min-height: 100vh;
  max-width: none !important;
  padding: 0 !important;
  width: 100vw !important;
}

body.zb-brand-new-welcome-active .practice-dashboard {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 100vh;
  padding: 0 !important;
  grid-column: 1 / -1 !important;
  transform: none !important;
  width: 100vw !important;
}

body.zb-brand-new-welcome-active .practice-header,
body.zb-brand-new-welcome-active .mode-tool-strip {
  display: none !important;
}

body.zb-brand-new-welcome-active #sessionPanel.practice-player,
body.zb-brand-new-welcome-active .practice-dashboard > :not(#sessionEmptyState) {
  display: none !important;
}

.getting-started-area-map {
  display: grid;
  gap: 0.62rem;
}

.getting-started-area-map article,
.guided-demo-data-actions {
  background: rgba(8, 15, 28, 0.58);
  border: 1px solid rgba(196, 211, 230, 0.12);
  border-radius: 14px;
  padding: 0.72rem;
}

.getting-started-area-map article {
  display: grid;
  gap: 0.18rem;
}

.getting-started-area-map strong {
  color: rgba(248, 251, 255, 0.94);
}

.getting-started-area-map span {
  color: rgba(203, 213, 225, 0.74);
}

.guidance-modal-actions button:disabled {
  cursor: not-allowed;
  filter: saturate(0.6);
  opacity: 0.52;
}

.zonebuilder-works-overview {
  display: grid;
  gap: 1rem;
}

.zonebuilder-works-flow {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.16), rgba(124, 58, 237, 0.14)),
    rgba(8, 15, 28, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  color: rgba(226, 232, 240, 0.92);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  padding: 0.78rem;
}

.zonebuilder-works-flow span {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.34rem 0.58rem;
}

.zonebuilder-works-flow b {
  color: rgba(94, 234, 212, 0.72);
}

.zonebuilder-works-card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zonebuilder-works-card {
  background:
    radial-gradient(circle at 24% 0%, rgba(94, 234, 212, 0.16), transparent 44%),
    linear-gradient(145deg, rgba(21, 31, 52, 0.94), rgba(8, 15, 28, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 0.55rem;
  min-height: 10.5rem;
  padding: 0.78rem;
}

.zonebuilder-works-card.is-schedules {
  background:
    radial-gradient(circle at 22% 0%, rgba(168, 85, 247, 0.17), transparent 46%),
    linear-gradient(145deg, rgba(24, 22, 54, 0.94), rgba(8, 15, 28, 0.92));
}

.zonebuilder-works-card.is-practice {
  background:
    radial-gradient(circle at 22% 0%, rgba(245, 158, 11, 0.17), transparent 46%),
    linear-gradient(145deg, rgba(38, 28, 26, 0.94), rgba(8, 15, 28, 0.92));
}

.zonebuilder-works-card.is-progress {
  background:
    radial-gradient(circle at 22% 0%, rgba(59, 130, 246, 0.17), transparent 46%),
    linear-gradient(145deg, rgba(18, 32, 61, 0.94), rgba(8, 15, 28, 0.92));
}

.zonebuilder-works-card.is-system {
  background:
    radial-gradient(circle at 22% 0%, rgba(148, 163, 184, 0.17), transparent 46%),
    linear-gradient(145deg, rgba(31, 41, 55, 0.94), rgba(8, 15, 28, 0.92));
}

.zonebuilder-works-thumb {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(2, 8, 20, 0.58);
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 14px;
  display: grid;
  gap: 0.32rem;
  min-height: 4.1rem;
  padding: 0.55rem;
}

.zonebuilder-works-thumb span {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.7), rgba(139, 92, 246, 0.45));
  border-radius: 999px;
  min-height: 0.42rem;
}

.zonebuilder-works-thumb span:nth-child(2) {
  opacity: 0.7;
  width: 76%;
}

.zonebuilder-works-thumb span:nth-child(3) {
  opacity: 0.45;
  width: 54%;
}

.zonebuilder-works-card strong {
  color: rgba(248, 251, 255, 0.96);
}

.zonebuilder-works-card p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.86rem;
  line-height: 1.42;
  margin: 0;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal {
  background:
    radial-gradient(circle at 50% 8%, rgba(94, 234, 212, 0.16), transparent 29rem),
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, 0.18), transparent 28rem),
    rgba(2, 8, 20, 0.72) !important;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .guidance-modal-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 20rem),
    radial-gradient(circle at 92% 4%, rgba(124, 58, 237, 0.18), transparent 21rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 8, 20, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 22px !important;
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: rgba(248, 250, 252, 0.94);
  max-height: min(91vh, 50rem);
  max-width: min(64rem, calc(100vw - 2rem));
  overflow: auto;
  scrollbar-gutter: stable;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
  margin-bottom: 0.9rem;
  padding-bottom: 0.86rem;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .modal-header .eyebrow {
  color: rgba(94, 234, 212, 0.84);
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .modal-header h2 {
  color: rgba(248, 250, 252, 0.98);
  letter-spacing: 0;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .guidance-modal-message {
  color: rgba(203, 213, 225, 0.82);
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

#guidanceModalBackdrop.is-zonebuilder-difference-modal .guidance-modal-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  margin-top: 1rem;
  padding-top: 0.86rem;
}

.zonebuilder-difference-overview {
  display: grid;
  gap: 0.85rem;
}

.zonebuilder-difference-overview p {
  margin: 0;
}

.zonebuilder-difference-hero {
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.18), rgba(124, 58, 237, 0.15)),
    rgba(8, 15, 28, 0.66);
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 18px;
  display: grid;
  gap: 0.4rem;
  padding: 0.95rem 1rem;
}

.zonebuilder-difference-hero strong {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.22rem, 2.3vw, 1.72rem);
  letter-spacing: 0;
  line-height: 1.08;
}

.zonebuilder-difference-hero p {
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.98rem;
  line-height: 1.48;
  max-width: 50rem;
}

.zonebuilder-difference-pillars {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zonebuilder-difference-pillar {
  --pillar-accent: #5eead4;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--pillar-accent) 24%, transparent), transparent 11rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(8, 15, 28, 0.88));
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 28%, rgba(148, 163, 184, 0.14));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 0.72rem;
  grid-column: span 2;
  grid-template-columns: auto 1fr;
  min-height: 8.2rem;
  min-width: 0;
  padding: 0.85rem;
}

.zonebuilder-difference-pillar:nth-child(4),
.zonebuilder-difference-pillar:nth-child(5) {
  grid-column: span 3;
}

.zonebuilder-difference-pillar.is-library {
  --pillar-accent: #60a5fa;
}

.zonebuilder-difference-pillar.is-system {
  --pillar-accent: #a78bfa;
}

.zonebuilder-difference-pillar.is-practice {
  --pillar-accent: #f59e0b;
}

.zonebuilder-difference-pillar.is-memory {
  --pillar-accent: #22c55e;
}

.zonebuilder-difference-icon {
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pillar-accent) 86%, white 8%), rgba(124, 58, 237, 0.68)),
    rgba(15, 23, 42, 0.84);
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 54%, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--pillar-accent) 18%, transparent);
  color: white;
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 900;
  height: 2.45rem;
  justify-content: center;
  line-height: 1;
  width: 2.45rem;
}

.zonebuilder-difference-pillar h3 {
  color: rgba(248, 250, 252, 0.97);
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.16;
  margin: 0 0 0.24rem;
}

.zonebuilder-difference-pillar p {
  color: rgba(203, 213, 225, 0.8);
  font-size: 0.84rem;
  line-height: 1.42;
}

.zonebuilder-difference-pillar em {
  color: rgba(240, 253, 250, 0.92);
  font-style: normal;
  font-weight: 800;
}

.zonebuilder-difference-guide-bridge {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(59, 130, 246, 0.1)),
    rgba(8, 15, 28, 0.58);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 16px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.75rem 0.88rem;
}

.zonebuilder-difference-guide-bridge span {
  color: rgba(94, 234, 212, 0.86);
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zonebuilder-difference-guide-bridge p {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.88rem;
  line-height: 1.38;
  text-align: right;
}

.zonebuilder-difference-takeaway {
  align-items: center;
  background:
    radial-gradient(circle at 0 0, rgba(167, 139, 250, 0.18), transparent 14rem),
    rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  justify-content: center;
  padding: 0.82rem 0.95rem;
  text-align: center;
}

.zonebuilder-difference-takeaway span {
  color: rgba(203, 213, 225, 0.76);
}

.zonebuilder-difference-takeaway strong {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.96), rgba(196, 181, 253, 0.96));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 950;
}

@media (max-width: 900px) {
  #guidanceModalBackdrop.is-zonebuilder-difference-modal .guidance-modal-card {
    max-width: min(42rem, calc(100vw - 1.25rem));
  }

  .zonebuilder-difference-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zonebuilder-difference-pillar,
  .zonebuilder-difference-pillar:nth-child(4),
  .zonebuilder-difference-pillar:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  #guidanceModalBackdrop.is-zonebuilder-difference-modal .guidance-modal-card {
    border-radius: 18px !important;
    max-height: min(92vh, 52rem);
  }

  .zonebuilder-difference-pillars {
    grid-template-columns: 1fr;
  }

  .zonebuilder-difference-pillar {
    min-height: auto;
  }

  .zonebuilder-difference-guide-bridge {
    align-items: flex-start;
    display: grid;
  }

  .zonebuilder-difference-guide-bridge p {
    text-align: left;
  }
}

.developer-practice-state-reasons {
  color: rgba(203, 213, 225, 0.78);
  display: grid;
  gap: 0.32rem;
  margin: 0.65rem 0 0;
  padding-left: 1.1rem;
}

.dynamic-practice-screen {
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.18), transparent 32rem),
    radial-gradient(circle at 92% 8%, rgba(79, 70, 229, 0.18), transparent 28rem),
    rgba(3, 8, 18, 0.92);
  border-color: rgba(125, 211, 252, 0.2);
  color: rgba(226, 232, 240, 0.9);
}

.dynamic-practice-header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.dynamic-practice-header .screen-title {
  color: rgba(248, 250, 252, 0.98);
}

.dynamic-practice-header-actions,
.dynamic-practice-context-actions,
.dynamic-practice-media-actions,
.dynamic-practice-resource-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dynamic-practice-empty-state {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 18rem),
    rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 18px;
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 1.1rem;
}

.dynamic-practice-empty-state strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1.25rem;
}

.dynamic-practice-workspace {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr);
  min-height: min(62vh, 42rem);
}

.dynamic-practice-left,
.dynamic-practice-main {
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.13), transparent 18rem),
    rgba(2, 6, 23, 0.66);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 18px;
  min-width: 0;
}

.dynamic-practice-left {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.9rem;
}

.dynamic-practice-left h3 {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  margin: 0;
}

.dynamic-practice-left p {
  color: rgba(203, 213, 225, 0.74);
  line-height: 1.42;
  margin: 0;
}

.dynamic-practice-focus {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.16), transparent 16rem),
    rgba(30, 17, 8, 0.64);
  border: 1px solid rgba(245, 158, 11, 0.36);
  border-radius: 14px;
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.8rem;
}

.dynamic-practice-focus span,
.dynamic-practice-sidecar-heading small,
.dynamic-practice-card-row small,
.dynamic-practice-resource-row small {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.76rem;
}

.dynamic-practice-focus strong,
.dynamic-practice-sidecar-heading strong,
.dynamic-practice-card-row strong,
.dynamic-practice-resource-row strong {
  color: rgba(248, 250, 252, 0.96);
}

.dynamic-practice-focus small {
  color: rgba(251, 191, 36, 0.72);
  line-height: 1.3;
}

.dynamic-practice-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.dynamic-practice-workspace.has-controlled-rail .dynamic-practice-main {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.dynamic-practice-workspace.has-media-deck .dynamic-practice-main {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.dynamic-practice-workspace.has-controlled-rail.has-media-deck .dynamic-practice-main {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.dynamic-practice-workspace.is-video-media-active.has-media-deck .dynamic-practice-main {
  grid-template-rows: auto minmax(6.5rem, 0.42fr) minmax(13rem, 1fr);
}

.dynamic-practice-workspace.is-video-media-active.has-controlled-rail.has-media-deck .dynamic-practice-main {
  grid-template-rows: auto auto minmax(6rem, 0.36fr) minmax(13rem, 1fr);
}

.dynamic-practice-main-toolbar {
  align-items: center;
  border-bottom: 1px solid rgba(125, 211, 252, 0.14);
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  padding: 0.52rem 0.65rem;
}

.dynamic-practice-main-toolbar > div:first-child {
  min-width: 0;
}

.dynamic-practice-main-toolbar strong {
  color: rgba(248, 250, 252, 0.96);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-practice-card-nav {
  align-items: center;
  background: rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: flex;
  gap: 0.32rem;
  padding: 0.16rem;
}

.dynamic-practice-card-nav button,
.dynamic-practice-context-actions button,
.dynamic-practice-media-actions button,
.dynamic-practice-resource-action {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  color: rgba(240, 253, 250, 0.94);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  min-height: 1.8rem;
  padding: 0.28rem 0.62rem;
}

.dynamic-practice-card-nav button {
  display: grid;
  font-size: 0.92rem;
  height: 1.55rem;
  min-height: 1.55rem;
  padding: 0;
  place-items: center;
  width: 1.55rem;
}

.dynamic-practice-card-nav span {
  align-items: baseline;
  color: rgba(226, 232, 240, 0.78);
  display: flex;
  font-size: 0.72rem;
  gap: 0.32rem;
  max-width: 11rem;
  min-width: 0;
}

.dynamic-practice-card-nav b {
  color: rgba(248, 250, 252, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-practice-card-nav em {
  color: rgba(153, 246, 228, 0.78);
  font-style: normal;
  white-space: nowrap;
}

.dynamic-practice-controlled-rail,
.dynamic-practice-media-deck {
  border-bottom: 1px solid rgba(125, 211, 252, 0.14);
  display: grid;
  gap: 0.45rem;
  padding: 0.58rem 0.65rem;
}

.dynamic-practice-controlled-rail[hidden],
.dynamic-practice-media-deck[hidden] {
  display: none !important;
}

.dynamic-practice-rail-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
}

.dynamic-practice-rail-heading span {
  color: rgba(153, 246, 228, 0.78);
  display: block;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dynamic-practice-rail-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.dynamic-practice-rail-tabs button {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 820;
  min-height: 1.7rem;
  padding: 0.24rem 0.55rem;
}

.dynamic-practice-rail-tabs button.is-active {
  background: rgba(14, 116, 144, 0.28);
  border-color: rgba(103, 232, 249, 0.42);
  color: rgba(240, 253, 250, 0.96);
}

.dynamic-practice-primary-area {
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
}

.dynamic-practice-workspace.is-primary-area-full .dynamic-practice-primary-area,
.dynamic-practice-workspace.is-primary-area-full .dynamic-prototype-viewer-content,
.dynamic-practice-workspace.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary {
  height: 100%;
  min-height: 100%;
}

.dynamic-practice-workspace.is-primary-area-full .dynamic-prototype-viewer-content {
  display: flex;
}

.dynamic-practice-workspace.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.dynamic-practice-workspace.is-primary-area-full .dynamic-workspace-instruction-anchor.is-primary .dynamic-workspace-instruction-body {
  max-height: none;
  white-space: pre-wrap;
}

.dynamic-practice-media-deck {
  border-bottom: 0;
  border-top: 1px solid rgba(125, 211, 252, 0.14);
}

.dynamic-practice-media-deck.is-audio {
  align-items: center;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(11rem, 1fr) auto;
}

.dynamic-practice-audio-main {
  align-items: center;
  display: grid;
  gap: 0.28rem 0.5rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.dynamic-practice-audio-main small {
  color: rgba(203, 213, 225, 0.72);
  grid-column: 2;
}

.dynamic-practice-media-deck.is-video {
  align-items: stretch;
  grid-template-columns: minmax(16rem, 1fr);
  position: relative;
}

.dynamic-practice-video-frame {
  align-items: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.2), transparent 16rem),
    rgba(2, 6, 23, 0.78);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 0.28rem;
  min-height: 13rem;
  place-items: center;
  padding: 0.8rem 8.5rem 0.8rem 0.8rem;
  text-align: center;
}

.dynamic-practice-media-deck.is-video .dynamic-practice-media-actions {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  width: min(7rem, 28%);
}

.dynamic-practice-media-picker {
  border-top: 1px solid rgba(125, 211, 252, 0.14);
  display: grid;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding-top: 0.35rem;
  width: 100%;
}

.dynamic-practice-media-picker span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.68rem;
  font-weight: 780;
  line-height: 1.2;
}

.dynamic-practice-media-picker button {
  background: rgba(2, 6, 23, 0.54);
  border-color: rgba(148, 163, 184, 0.2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-practice-media-picker button.is-active {
  background: rgba(20, 184, 166, 0.22);
  border-color: rgba(94, 234, 212, 0.42);
}

.dynamic-practice-dev-controls {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.dynamic-practice-dev-controls[hidden] {
  display: none !important;
}

.dynamic-practice-dev-controls details {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.11), transparent 16rem),
    rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 16px;
  min-width: 0;
  overflow: hidden;
}

.dynamic-practice-dev-controls summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
}

.dynamic-practice-dev-controls summary strong {
  color: rgba(248, 250, 252, 0.96);
}

.dynamic-practice-dev-controls summary span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.76rem;
  text-align: right;
}

.dynamic-practice-dev-controls details > div {
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  max-height: 13rem;
  overflow: auto;
  padding: 0.65rem;
}

.dynamic-practice-sidecar-heading {
  display: grid;
  gap: 0.2rem;
}

.dynamic-practice-card-list,
.dynamic-practice-resource-list {
  display: grid;
  gap: 0.45rem;
  min-height: 0;
  overflow: auto;
}

.dynamic-practice-card-row,
.dynamic-practice-resource-row {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  color: inherit;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.58rem 0.65rem;
  text-align: left;
}

.dynamic-practice-card-row {
  cursor: pointer;
}

.dynamic-practice-card-row.is-active,
.dynamic-practice-card-row:hover,
.dynamic-practice-card-row:focus-visible,
.dynamic-practice-resource-row.is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem),
    rgba(15, 23, 42, 0.78);
  border-color: rgba(45, 212, 191, 0.34);
  outline: none;
}

.dynamic-practice-resource-row {
  grid-template-columns: minmax(0, 1fr);
}

.dynamic-practice-resource-actions {
  justify-content: flex-start;
}

.dynamic-practice-empty-copy {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.86rem;
  line-height: 1.42;
  margin: 0;
}

@media (max-width: 1120px) {
  .dynamic-practice-workspace {
    grid-template-columns: minmax(12rem, 0.46fr) minmax(0, 1fr);
  }

  .dynamic-practice-dev-controls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guided-demo-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.85rem;
}

.guided-demo-flow span.is-current {
  background: rgba(45, 212, 191, 0.2);
  border-color: rgba(94, 234, 212, 0.42);
  color: rgba(204, 251, 241, 0.96);
}

.onboarding-confirmation ul {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.onboarding-confirmation li {
  background: rgba(8, 15, 28, 0.62);
  border: 1px solid rgba(196, 211, 230, 0.12);
  border-radius: 14px;
  display: grid;
  gap: 0.2rem;
  padding: 0.78rem 0.85rem;
}

.onboarding-confirmation li strong {
  color: rgba(209, 250, 229, 0.94);
}

.onboarding-confirmation li span {
  color: rgba(226, 232, 240, 0.78);
}

@media (max-width: 1180px) {
  .getting-started-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-concepts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-importzone-confidence-grid,
  .zb-importzone-example-steps,
  .zb-importzone-ambiguity-grid {
    grid-template-columns: 1fr;
  }

  .zb-scheduling-flow,
  .zb-scheduling-example,
  .zb-scheduling-topic-grid,
  .zb-scheduling-scale-grid,
  .zb-scheduling-intelligence-grid,
  .zb-key-rotation-stage,
  .zb-key-session-grid,
  .zb-memory-story-grid {
    grid-template-columns: 1fr;
  }

  .zb-continuing-situation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-continuing-example-grid {
    grid-template-columns: 1fr;
  }

  .zb-goals-example-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-keepfresh-example-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-interleaving-example-grid {
    grid-template-columns: 1fr;
  }

  .zb-goals-practical-grid {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-practice-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-importzone-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-goals-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-resources-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-resources-example-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-interleaving-model-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-keepfresh-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow.zb-scheduling-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-guide-flow li:nth-child(3n)::after {
    display: none;
  }

  .zb-practice-system-flow {
    grid-template-columns: 1fr;
  }

  .zb-existing-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zb-practice-flow-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .zb-scheduling-flow i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .zb-memory-story-grid i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .zb-keepfresh-link-flow {
    grid-template-columns: 1fr;
  }

  .zb-keepfresh-link-flow i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .zb-rotation-unit-map {
    grid-template-columns: 1fr;
  }

  .zb-rotation-unit-map > i {
    justify-self: center;
    transform: rotate(135deg);
  }

  .zb-memory-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zb-material-flow {
    grid-template-columns: 1fr;
  }

  .zb-material-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 760px) {
  .getting-started-hero {
    align-items: start;
    flex-direction: column;
  }

  .getting-started-hero-actions {
    align-items: start;
    justify-items: start;
    width: 100%;
  }

  .getting-started-grid,
  .zb-concepts-grid,
  .zb-importzone-confidence-grid,
  .zb-importzone-example-steps,
  .zb-importzone-ambiguity-grid,
  .zb-scheduling-flow,
  .zb-scheduling-example,
  .zb-scheduling-topic-grid,
  .zb-scheduling-scale-grid,
  .zb-scheduling-intelligence-grid,
  .zb-key-rotation-stage,
  .zb-key-session-grid,
  .zb-memory-story-grid,
  .zb-memory-stat-grid,
  .zb-guide-core,
  .zb-continuing-situation-grid,
  .zb-continuing-example-grid,
  .zb-continuing-decision-branches,
  .zb-goals-example-map,
  .zb-goals-practical-grid,
  .zb-keepfresh-example-map,
  .zb-keepfresh-link-flow,
  .zb-rotation-unit-map,
  .zb-rotation-problem-grid,
  .onboarding-choice-grid {
    grid-template-columns: 1fr;
  }

  .getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-grid {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-scheduling-model-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-practice-model-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-importzone-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-goals-model-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-resources-model-flow,
  .zb-guide-flow.zb-resources-example-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-keepfresh-model-flow {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow.zb-interleaving-model-flow {
    grid-template-columns: 1fr;
  }

  .zb-scheduling-example li {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .zb-scheduling-example li em {
    justify-self: start;
    white-space: normal;
  }

  .zb-existing-map-grid {
    grid-template-columns: 1fr;
  }

  .zb-guide-flow li {
    min-height: 0;
  }

  .zb-guide-flow li::after,
  .zb-guide-flow li:nth-child(3n)::after {
    display: block;
    left: 50%;
    right: auto;
    top: auto;
    bottom: -0.48rem;
    transform: translateX(-50%) rotate(135deg);
  }

  .zb-guide-flow li:last-child::after {
    display: none;
  }

  .zb-practice-system-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .zb-practice-system-actions > div,
  .zb-practice-system-actions button {
    width: 100%;
  }

  .zb-concepts-grid article.zb-concepts-card--capstone {
    min-height: 9.4rem;
    padding-right: 0.92rem;
  }

  .zb-concepts-card--capstone::after {
    display: none;
  }

  .zb-practice-queue-preview li {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .zb-practice-queue-preview b {
    grid-column: 2;
    justify-self: start;
  }

  .zb-material-guide-hero {
    align-items: start;
    flex-direction: column;
  }

  .importzone-panel-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

.practice-welcome-mode.dashboard-start-empty {
  align-items: stretch !important;
  background:
    linear-gradient(180deg, rgba(10, 22, 42, 0.08), rgba(10, 17, 34, 0.36) 32%, rgba(2, 6, 23, 0.94) 72%),
    radial-gradient(circle at 20% 35%, rgba(251, 191, 36, 0.38), transparent 15rem),
    radial-gradient(ellipse at 48% 5%, rgba(34, 211, 238, 0.26), transparent 28rem),
    radial-gradient(ellipse at 80% 18%, rgba(124, 58, 237, 0.22), transparent 29rem),
    url("assets/myzone/welcome-sunrise-rocky-coast-unsplash.jpg"),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)) !important;
  background-position: center top, center top, center top, center top, center 42%, center;
  background-size: cover, cover, cover, cover, cover, cover;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 26px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.34);
  color: rgba(248, 250, 252, 0.96);
  display: grid !important;
  gap: clamp(0.75rem, 1.4vw, 1.05rem);
  grid-template-columns: minmax(0, min(100%, 76rem));
  justify-content: center;
  overflow: hidden;
  padding: clamp(1.1rem, 2.7vw, 2.6rem) !important;
  position: relative;
  text-align: center !important;
}

.practice-welcome-mode.dashboard-start-empty::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 204, 128, 0.22), transparent 17rem),
    radial-gradient(ellipse at 58% 4%, rgba(34, 211, 238, 0.16), transparent 29rem),
    radial-gradient(ellipse at 84% 12%, rgba(168, 85, 247, 0.18), transparent 25rem),
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.09), transparent 21rem);
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 62%);
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
}

.practice-welcome-mode.dashboard-start-empty::after {
  background:
    linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.18) 45%, rgba(2, 6, 23, 0.82)),
    radial-gradient(ellipse at 30% 12%, rgba(255, 255, 255, 0.28), transparent 20rem);
  content: "";
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
}

.practice-welcome-mode > * {
  position: relative;
  z-index: 1;
}

.practice-welcome-hero {
  align-items: center;
  display: grid;
  justify-items: center;
  margin-inline: auto;
  max-width: 76rem;
  min-height: clamp(10.5rem, 19vh, 16rem);
  padding: clamp(0.45rem, 1.4vw, 1.1rem) 1rem clamp(0.15rem, 0.45vw, 0.3rem);
  width: 100%;
}

.practice-welcome-brand {
  align-items: center;
  color: rgba(241, 245, 249, 0.9);
  display: inline-flex;
  font-size: clamp(1.32rem, 1.65vw, 1.9rem);
  font-weight: 900;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.practice-welcome-mark {
  align-items: center;
  background: conic-gradient(from 35deg, rgba(45, 212, 191, 0.95), rgba(124, 58, 237, 0.9), rgba(59, 130, 246, 0.9), rgba(45, 212, 191, 0.95));
  border-radius: 999px;
  box-shadow: 0 0 32px rgba(45, 212, 191, 0.35);
  color: #fff;
  display: inline-flex;
  height: 2.8rem;
  justify-content: center;
  width: 2.8rem;
}

.practice-welcome-hero h3 {
  color: #f8fafc;
  font-size: clamp(2.75rem, 3.7vw, 4.2rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

.practice-welcome-tagline {
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 900;
  margin: 0.72rem 0 0.35rem !important;
  position: relative;
}

.practice-welcome-tagline::before,
.practice-welcome-tagline::after {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.55), transparent);
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: clamp(4rem, 10vw, 8rem);
}

.practice-welcome-tagline::before {
  right: calc(100% + 1.4rem);
}

.practice-welcome-tagline::after {
  left: calc(100% + 1.4rem);
}

.practice-welcome-hero #sessionEmptyStateText {
  color: rgba(226, 232, 240, 0.86);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.55;
  margin: 0 auto !important;
  max-width: 45rem;
}

.practice-welcome-difference-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(94, 234, 212, 0.16), transparent 16rem),
    radial-gradient(circle at 92% 0%, rgba(167, 139, 250, 0.18), transparent 18rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(2, 8, 20, 0.76));
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  backdrop-filter: blur(18px) saturate(1.14);
  border: 1px solid rgba(226, 232, 240, 0.17);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 62px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: clamp(0.68rem, 1vw, 0.95rem);
  margin: 0 auto;
  max-width: 76rem;
  overflow: hidden;
  padding: clamp(0.9rem, 1.55vw, 1.25rem);
  position: relative;
  text-align: left;
  width: 100%;
}

.practice-welcome-difference-card::before {
  background:
    linear-gradient(90deg, rgba(94, 234, 212, 0.42), rgba(167, 139, 250, 0.42), rgba(251, 191, 36, 0.3));
  content: "";
  height: 1px;
  inset: 0 0 auto;
  opacity: 0.78;
  position: absolute;
}

.practice-welcome-difference-card h4 {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 0.36rem;
}

.practice-welcome-difference-card p {
  color: rgba(226, 232, 240, 0.82);
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.45;
  margin: 0 !important;
  max-width: 60rem;
}

.practice-welcome-difference-card ul {
  display: grid;
  gap: 0.46rem 0.95rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.practice-welcome-difference-card li {
  color: rgba(226, 232, 240, 0.82);
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  line-height: 1.36;
  min-width: 0;
  padding-left: 1.05rem;
  position: relative;
}

.practice-welcome-difference-card li::before {
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.34);
  content: "";
  height: 0.42rem;
  left: 0;
  position: absolute;
  top: 0.42rem;
  width: 0.42rem;
}

.practice-welcome-difference-card > strong {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.92), rgba(196, 181, 253, 0.94));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(0.94rem, 1.08vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0;
}

.practice-welcome-value-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.practice-welcome-difference-link {
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: rgba(204, 251, 241, 0.92);
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 850;
  min-height: auto;
  padding: 0.48rem 0.72rem;
}

.practice-welcome-difference-link:hover,
.practice-welcome-difference-link:focus-visible {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(94, 234, 212, 0.42);
  color: rgba(240, 253, 250, 0.98);
}

.practice-welcome-value-list {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice-welcome-value-list article {
  background:
    radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.12), transparent 9rem),
    rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  display: grid;
  gap: 0.34rem;
  padding: 0.78rem;
}

.practice-welcome-value-list strong {
  color: rgba(248, 250, 252, 0.98);
  font-size: 0.98rem;
  line-height: 1.16;
}

.practice-welcome-value-list p {
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}

.practice-welcome-grid {
  display: grid;
  gap: clamp(0.9rem, 1.5vw, 1.2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-welcome-card {
  --welcome-card-accent: #5eead4;
  --welcome-card-line: rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.12), transparent 9rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.66));
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 22px 72px rgba(0, 0, 0, 0.26);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  min-height: clamp(11.5rem, 16vh, 14.5rem);
  overflow: hidden;
  padding: clamp(0.78rem, 1.25vw, 1.08rem);
  position: relative;
  text-align: left;
}

.practice-welcome-card::before {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255, 255, 255, 0.16), transparent 12rem),
    repeating-linear-gradient(165deg, var(--welcome-card-line) 0 1px, transparent 1px 10px);
  content: "";
  inset: 0;
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
}

.practice-welcome-card::after {
  background:
    radial-gradient(circle at 17% 19%, color-mix(in srgb, var(--welcome-card-accent) 24%, transparent), transparent 5.2rem),
    radial-gradient(ellipse at 78% 13%, color-mix(in srgb, var(--welcome-card-accent) 20%, transparent), transparent 12rem);
  content: "";
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.practice-welcome-card > * {
  position: relative;
  z-index: 1;
}

.practice-welcome-card.is-quick {
  --welcome-card-accent: #2dd4bf;
  --welcome-card-line: rgba(45, 212, 191, 0.18);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(45, 212, 191, 0.34), transparent 12rem),
    radial-gradient(ellipse at 18% 22%, rgba(45, 212, 191, 0.18), transparent 11rem),
    linear-gradient(150deg, rgba(9, 96, 105, 0.5), rgba(2, 6, 23, 0.72));
  border-color: rgba(94, 234, 212, 0.28);
}

.practice-welcome-card.is-demo {
  --welcome-card-accent: #a855f7;
  --welcome-card-line: rgba(168, 85, 247, 0.18);
  background:
    radial-gradient(ellipse at 78% 10%, rgba(168, 85, 247, 0.36), transparent 12rem),
    radial-gradient(ellipse at 18% 22%, rgba(168, 85, 247, 0.2), transparent 11rem),
    linear-gradient(150deg, rgba(67, 18, 112, 0.52), rgba(2, 6, 23, 0.72));
  border-color: rgba(196, 181, 253, 0.28);
}

.practice-welcome-card.is-setup {
  --welcome-card-accent: #f59e0b;
  --welcome-card-line: rgba(245, 158, 11, 0.17);
  background:
    radial-gradient(ellipse at 78% 10%, rgba(245, 158, 11, 0.38), transparent 12rem),
    radial-gradient(ellipse at 18% 22%, rgba(245, 158, 11, 0.22), transparent 11rem),
    linear-gradient(150deg, rgba(112, 60, 8, 0.5), rgba(2, 6, 23, 0.72));
  border-color: rgba(251, 191, 36, 0.3);
}

.practice-welcome-card.is-tour {
  --welcome-card-accent: #3b82f6;
  --welcome-card-line: rgba(59, 130, 246, 0.17);
  background:
    radial-gradient(ellipse at 78% 10%, rgba(59, 130, 246, 0.36), transparent 12rem),
    radial-gradient(ellipse at 18% 22%, rgba(59, 130, 246, 0.2), transparent 11rem),
    linear-gradient(150deg, rgba(29, 78, 216, 0.5), rgba(2, 6, 23, 0.72));
  border-color: rgba(147, 197, 253, 0.28);
}

.practice-welcome-card-icon {
  align-items: center;
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--welcome-card-accent) 34%, transparent), transparent 45%),
    rgba(15, 23, 42, 0.44);
  border: 1px solid color-mix(in srgb, var(--welcome-card-accent) 34%, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px color-mix(in srgb, var(--welcome-card-accent) 20%, transparent);
  color: var(--welcome-card-accent);
  display: inline-flex;
  height: 3.85rem;
  justify-content: center;
  width: 3.85rem;
}

.practice-welcome-card-icon svg {
  fill: none;
  height: 2.05rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 2.05rem;
}

.practice-welcome-card h4 {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  letter-spacing: 0;
  margin: 0;
}

.practice-welcome-card p {
  color: rgba(226, 232, 240, 0.82);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.42;
  margin: 0 !important;
  max-width: 25rem;
}

.practice-welcome-card button {
  align-self: end;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--welcome-card-accent), color-mix(in srgb, var(--welcome-card-accent) 70%, #1f5eff));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--welcome-card-accent) 18%, transparent);
  color: white;
  justify-self: stretch;
  margin-top: 0.5rem;
  min-height: 3rem;
  position: relative;
}

.practice-welcome-card button::after,
.practice-welcome-footer button::after {
  content: "→";
  font-size: 1.15rem;
  position: absolute;
  right: 1rem;
}

.practice-welcome-footer,
.practice-welcome-demo-notice,
.practice-ready-panel {
  align-items: center;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
  text-align: left;
}

body.zb-brand-new-welcome-active .practice-welcome-mode.dashboard-start-empty {
  background:
    linear-gradient(180deg, rgba(10, 22, 42, 0.08), rgba(10, 17, 34, 0.36) 32%, rgba(2, 6, 23, 0.94) 72%),
    radial-gradient(circle at 20% 35%, rgba(251, 191, 36, 0.38), transparent 15rem),
    radial-gradient(ellipse at 48% 5%, rgba(34, 211, 238, 0.26), transparent 28rem),
    radial-gradient(ellipse at 80% 18%, rgba(124, 58, 237, 0.22), transparent 29rem),
    url("assets/myzone/welcome-sunrise-rocky-coast-unsplash.jpg"),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)) !important;
  background-position: center top, center top, center top, center top, center 42%, center !important;
  background-size: cover, cover, cover, cover, cover, cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  min-height: 100vh !important;
  padding: clamp(0.85rem, 2.2vw, 2.1rem) clamp(1rem, 3.4vw, 3rem) !important;
  width: 100% !important;
}

body.zb-brand-new-welcome-active .practice-welcome-hero {
  min-height: clamp(10.5rem, 20vh, 16rem);
}

body.zb-brand-new-welcome-active .practice-welcome-grid,
body.zb-brand-new-welcome-active .practice-welcome-difference-card,
body.zb-brand-new-welcome-active .practice-welcome-footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 76rem;
  width: 100%;
}

.practice-welcome-footer small {
  color: rgba(148, 163, 184, 0.82);
}

.practice-welcome-demo-notice,
.practice-ready-panel {
  background:
    radial-gradient(circle at 8% 20%, rgba(45, 212, 191, 0.12), transparent 16rem),
    rgba(15, 23, 42, 0.78);
}

.practice-ready-kicker {
  color: rgba(94, 234, 212, 0.88);
  display: block;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 0.22rem;
  text-transform: uppercase;
}

.practice-welcome-demo-notice strong,
.practice-ready-panel strong {
  color: rgba(248, 250, 252, 0.96);
}

.practice-welcome-demo-notice p,
.practice-ready-panel p {
  color: rgba(203, 213, 225, 0.78);
  margin: 0.3rem 0 0 !important;
}

.practice-welcome-mode.is-practice-ready-state .practice-welcome-grid,
.practice-welcome-mode.is-practice-ready-state .practice-welcome-difference-card,
.practice-welcome-mode.is-practice-ready-state .practice-welcome-footer,
.practice-welcome-mode.is-empty-guidance-state .practice-welcome-grid,
.practice-welcome-mode.is-empty-guidance-state .practice-welcome-difference-card,
.practice-welcome-mode.is-empty-guidance-state .practice-welcome-footer,
.practice-welcome-mode.is-active-schedule-ready .practice-welcome-grid,
.practice-welcome-mode.is-active-schedule-ready .practice-welcome-difference-card,
.practice-welcome-mode.is-active-schedule-ready .practice-welcome-footer {
  display: none;
}

.practice-welcome-mode.is-practice-ready-state .practice-welcome-hero,
.practice-welcome-mode.is-empty-guidance-state .practice-welcome-hero,
.practice-welcome-mode.is-active-schedule-ready .practice-welcome-hero {
  min-height: 13rem;
  padding-bottom: 0;
}

.practice-welcome-mode.is-practice-ready-state .practice-welcome-tagline,
.practice-welcome-mode.is-empty-guidance-state .practice-welcome-tagline,
.practice-welcome-mode.is-active-schedule-ready .practice-welcome-tagline {
  color: rgba(94, 234, 212, 0.88) !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}

.practice-welcome-mode.is-empty-guidance-state.dashboard-start-empty {
  background:
    radial-gradient(circle at 18% 20%, rgba(245, 158, 11, 0.16), transparent 18rem),
    radial-gradient(circle at 86% 16%, rgba(124, 58, 237, 0.16), transparent 20rem),
    linear-gradient(145deg, rgba(13, 25, 39, 0.9), rgba(5, 12, 24, 0.94));
  border-color: rgba(148, 163, 184, 0.18);
  min-height: min(42rem, calc(100vh - 9rem));
}

.practice-welcome-mode.is-empty-guidance-state .practice-ready-panel {
  margin: 0 auto;
  max-width: 72rem;
  width: min(100%, 72rem);
}

@media (max-width: 900px) {
  .practice-welcome-grid {
    grid-template-columns: 1fr;
  }

  .practice-welcome-difference-card ul,
  .practice-welcome-value-list {
    grid-template-columns: 1fr;
  }

  .practice-welcome-value-heading {
    align-items: start;
    flex-direction: column;
  }

  .zonebuilder-works-card-grid {
    grid-template-columns: 1fr;
  }

  .zonebuilder-works-flow {
    justify-content: flex-start;
  }

  .practice-welcome-footer,
  .practice-welcome-demo-notice,
  .practice-ready-panel {
    align-items: stretch;
    display: grid;
  }
}

/* P10PN Schedule usability pass: final row hierarchy overrides. */
.schedule-builder-screen .schedule-builder-block-item-row {
  align-content: start !important;
  align-items: stretch !important;
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  padding: 0.58rem 0.65rem !important;
}

.schedule-builder-screen .schedule-builder-block-card.is-expanded .schedule-builder-block-items {
  display: grid !important;
  gap: 0.55rem !important;
  max-height: none !important;
  overflow: visible !important;
}

.schedule-builder-screen .schedule-builder-block-item-main {
  align-items: center !important;
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
}

.schedule-builder-screen .schedule-builder-block-item-row span:not(.schedule-builder-mini-icon),
.schedule-builder-screen .schedule-builder-block-item-row .schedule-builder-item-expand strong,
.schedule-builder-screen .schedule-builder-block-item-row .schedule-builder-item-expand small,
.schedule-builder-screen .schedule-builder-block-item-row .schedule-builder-item-expand em {
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.schedule-builder-screen .schedule-builder-block-item-row .schedule-builder-item-expand strong {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}

.schedule-builder-screen .schedule-builder-picker-row {
  align-items: center !important;
  display: grid !important;
  gap: 0.46rem !important;
  grid-template-columns: 0.8rem 1.78rem minmax(0, 1fr) minmax(7rem, auto) !important;
  min-height: 3.18rem !important;
  overflow: hidden !important;
  padding-block: 0.38rem !important;
}

.schedule-builder-screen .schedule-builder-picker-row.has-badges,
.schedule-builder-screen .schedule-builder-picker-row.is-selected,
.schedule-builder-screen .schedule-builder-picker-row.is-scheduled {
  min-height: 3.7rem !important;
  padding-block: 0.4rem !important;
}

.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-drag-handle,
.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-mini-icon,
.schedule-builder-screen .schedule-builder-picker-row > button,
.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-picker-actions {
  margin: 0 !important;
}

.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-mini-icon {
  font-size: 0.72rem !important;
  height: 1.78rem !important;
  width: 1.78rem !important;
}

.schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) {
  min-width: 0 !important;
}

.schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) strong,
.schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) strong {
  white-space: nowrap !important;
}

.schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small {
  white-space: nowrap !important;
}

.schedule-builder-screen .schedule-builder-picker-row > button.schedule-builder-icon-button {
  justify-self: end !important;
  min-height: 2.08rem !important;
  min-width: 3.28rem !important;
  padding-inline: 0.46rem !important;
}

.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-picker-actions {
  justify-self: end !important;
}

.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-picker-actions > button.schedule-builder-icon-button {
  min-height: 2.08rem !important;
  min-width: 3.28rem !important;
  padding-inline: 0.46rem !important;
}

.schedule-builder-screen .schedule-builder-picker-row.is-added > button.schedule-builder-icon-button,
.schedule-builder-screen .schedule-builder-picker-row > button.schedule-builder-icon-button:disabled,
.schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-picker-actions > button.schedule-builder-icon-button:disabled {
  opacity: 0.58 !important;
}

/* P10OS top-header navigation: keep all primary destinations on one line. */
@media (min-width: 761px) {
  body:not(:has(.practice-dashboard:not([hidden]))) .app-header.header-with-nav,
  body:not(:has(.practice-dashboard:not([hidden]))) .app-header.compact-brand-header.header-with-nav,
  body:not(:has(.practice-dashboard:not([hidden]))) .app-header.brand-header.header-with-nav {
    grid-template-columns: minmax(10.5rem, 0.72fr) minmax(0, 2.2fr) minmax(9.5rem, 0.58fr) !important;
  }

  body:not(:has(.practice-dashboard:not([hidden]))) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"],
  body:not(:has(.practice-dashboard:not([hidden]))) .header-with-nav .app-nav,
  body:not(:has(.practice-dashboard:not([hidden]))) .app-nav {
    flex-wrap: nowrap !important;
    gap: clamp(0.52rem, 0.92vw, 0.92rem) !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  body:not(:has(.practice-dashboard:not([hidden]))) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"]::-webkit-scrollbar,
  body:not(:has(.practice-dashboard:not([hidden]))) .header-with-nav .app-nav::-webkit-scrollbar,
  body:not(:has(.practice-dashboard:not([hidden]))) .app-nav::-webkit-scrollbar {
    display: none !important;
  }

  body:not(:has(.practice-dashboard:not([hidden]))) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.setup-nav-button),
  body:not(:has(.practice-dashboard:not([hidden]))) .header-with-nav .app-nav-button,
  body:not(:has(.practice-dashboard:not([hidden]))) .app-nav-button {
    flex: 0 0 auto !important;
    font-size: clamp(0.84rem, 0.92vw, 0.98rem) !important;
    min-width: max-content !important;
    padding-left: 0.06rem !important;
    padding-right: 0.06rem !important;
  }
}

/* Guided demo prototype: lightweight spotlight/callout layer. */
.guided-demo-overlay {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 13000;
}

.guided-demo-overlay[hidden] {
  display: none !important;
}

body.guided-demo-screen-changing [data-screen-panel],
body.guided-demo-screen-changing .screen-title,
body.guided-demo-screen-changing .screen-subtitle,
body.guided-demo-screen-changing .app-main,
body.guided-demo-screen-changing .app-nav-button {
  animation: none !important;
  transition: none !important;
}

.guided-demo-scrim {
  background:
    radial-gradient(circle at 28% 18%, rgba(139, 92, 246, 0.18), transparent 18rem),
    rgba(1, 6, 18, 0.46);
  inset: 0;
  position: absolute;
  z-index: 13000;
}

.guided-demo-callout {
  background:
    linear-gradient(145deg, #172136, #07101f);
  border: 1px solid rgba(196, 181, 253, 0.48);
  border-radius: 22px;
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 0 54px rgba(124, 58, 237, 0.24);
  bottom: 1rem;
  color: rgba(248, 251, 255, 0.96);
  left: 50%;
  max-width: min(42rem, calc(100vw - 2rem));
  padding: 1.15rem;
  pointer-events: auto;
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  z-index: 13030;
}

.guided-demo-callout::before {
  background: rgba(1, 6, 18, 0.96);
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.guided-demo-overlay.is-callout-top-right .guided-demo-callout {
  bottom: auto;
  left: auto;
  max-width: min(31rem, calc(100vw - 2rem));
  right: 1rem;
  top: 1rem;
  transform: none;
  width: min(31rem, calc(100vw - 2rem));
}

.guided-demo-overlay.is-callout-top-center .guided-demo-callout {
  bottom: auto;
  left: 50%;
  max-width: min(37rem, calc(100vw - 2rem));
  right: auto;
  top: 1rem;
  transform: translateX(-50%);
  width: min(37rem, calc(100vw - 2rem));
}

.guided-demo-overlay.is-callout-bottom-left .guided-demo-callout {
  bottom: 1rem;
  left: 1rem;
  max-width: min(33rem, calc(100vw - 2rem));
  right: auto;
  top: auto;
  transform: none;
  width: min(33rem, calc(100vw - 2rem));
}

.guided-demo-step-label {
  color: rgba(196, 181, 253, 0.94);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.guided-demo-callout h2 {
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 0.45rem;
}

.guided-demo-callout p {
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.5;
  margin: 0;
}

.guided-demo-action-message {
  background:
    linear-gradient(135deg, rgba(83, 58, 17, 0.98), rgba(8, 56, 58, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 14px;
  color: rgba(255, 247, 237, 0.92);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 0.85rem;
  padding: 0.7rem 0.82rem;
}

.guided-demo-action-message[hidden] {
  display: none !important;
}

.guided-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.guided-demo-flow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.95rem;
}

.guided-demo-flow span {
  background: rgba(124, 58, 237, 0.24);
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 999px;
  color: rgba(248, 251, 255, 0.94);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.42rem 0.64rem;
}

.guided-demo-flow b {
  color: rgba(45, 212, 191, 0.85);
  font-size: 1rem;
}

.guided-demo-flow.is-modal {
  justify-content: center;
  margin: 0 0 0.8rem;
}

.guided-demo-complete-summary p {
  color: rgba(203, 213, 225, 0.8);
  margin: 0;
  text-align: center;
}

.guided-demo-active .guided-demo-highlight {
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 0.92),
    0 0 0 7px rgba(124, 58, 237, 0.20),
    0 18px 54px rgba(124, 58, 237, 0.22) !important;
  pointer-events: none !important;
  position: relative;
  z-index: 12001;
}

.guided-demo-active .app-nav.guided-demo-highlight {
  border-radius: 999px;
}

.guided-demo-action-cursor {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate(-50%, -50%);
  transition:
    left 1850ms cubic-bezier(0.22, 1, 0.36, 1),
    top 1850ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
  z-index: 13040;
}

.guided-demo-action-cursor[hidden] {
  display: none !important;
}

.guided-demo-action-cursor span {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.95), rgba(251, 191, 36, 0.92) 42%, rgba(217, 119, 6, 0.96));
  border: 1px solid rgba(255, 251, 235, 0.8);
  border-radius: 999px;
  box-shadow:
    0 0 0 7px rgba(251, 191, 36, 0.18),
    0 18px 38px rgba(0, 0, 0, 0.38);
  height: 1.15rem;
  width: 1.15rem;
}

.guided-demo-action-cursor strong {
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  color: rgba(255, 251, 235, 0.96);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  padding: 0.36rem 0.58rem;
  text-transform: uppercase;
}

.guided-demo-active .guided-demo-action-target {
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.72),
    0 0 0 7px rgba(251, 191, 36, 0.16),
    0 18px 48px rgba(251, 191, 36, 0.12) !important;
  position: relative;
  z-index: 12002;
}

.guided-demo-active .guided-demo-action-drop-target {
  animation: guidedDemoDropPulse 2200ms ease;
}

.guided-demo-creation-card {
  background:
    linear-gradient(145deg, rgba(20, 30, 52, 0.98), rgba(6, 14, 29, 0.98));
  border: 1px solid rgba(45, 212, 191, 0.36);
  border-radius: 20px;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 44px rgba(45, 212, 191, 0.16);
  color: rgba(248, 251, 255, 0.96);
  left: 50%;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: 1rem;
  pointer-events: none;
  position: fixed;
  top: 24%;
  opacity: 0;
  transform: translateX(-50%) translateY(0.35rem);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
  width: 34rem;
  z-index: 13050;
}

.guided-demo-creation-card[hidden] {
  display: none !important;
}

.guided-demo-creation-card.is-ready {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.guided-demo-creation-kicker {
  color: rgba(94, 234, 212, 0.84);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.guided-demo-creation-card h3 {
  color: #fff;
  font-size: 1.45rem;
  margin: 0 0 0.85rem;
}

.guided-demo-creation-card label {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.guided-demo-creation-card label span {
  align-items: center;
  color: rgba(203, 213, 225, 0.82);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 900;
  gap: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guided-demo-voice-cue {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 999px;
  color: rgba(204, 251, 241, 0.92);
  display: inline-flex;
  height: 1.45rem;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  width: 1.45rem;
}

.guided-demo-voice-cue svg {
  fill: none;
  height: 0.86rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 0.86rem;
}

.guided-demo-typed-field {
  align-items: center;
  background: rgba(2, 8, 20, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.94);
  display: flex;
  min-height: 2.75rem;
  padding: 0.72rem 0.82rem;
}

.guided-demo-typed-field.is-textarea {
  align-items: flex-start;
  line-height: 1.45;
  min-height: 5.2rem;
}

.guided-demo-typed-field::after {
  animation: guidedDemoCaret 840ms steps(1) infinite;
  color: rgba(45, 212, 191, 0.95);
  content: "|";
  margin-left: 0.12rem;
}

.guided-demo-save-ghost {
  margin-top: 0.9rem;
  pointer-events: none;
  width: 100%;
}

.guided-demo-creation-card.is-saving {
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(74, 222, 128, 0.14) inset,
    0 0 52px rgba(74, 222, 128, 0.22);
}

@keyframes guidedDemoCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes guidedDemoDropPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(45, 212, 191, 0.46),
      0 0 0 2px rgba(45, 212, 191, 0.7);
  }
  70% {
    box-shadow:
      0 0 0 13px rgba(45, 212, 191, 0),
      0 0 0 2px rgba(45, 212, 191, 0.3);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(45, 212, 191, 0),
      0 0 0 0 rgba(45, 212, 191, 0);
  }
}

.onboarding-stub-grid .guidance-choice-card {
  min-height: 4.2rem;
}

@media (max-width: 760px) {
  .guided-demo-callout {
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
    right: 0.75rem;
    transform: none;
    width: auto;
  }

  .guided-demo-overlay.is-callout-top-right .guided-demo-callout {
    left: 0.75rem;
    max-width: none;
    right: 0.75rem;
    top: 0.75rem;
    width: auto;
  }

  .guided-demo-overlay.is-callout-top-center .guided-demo-callout {
    left: 0.75rem;
    max-width: none;
    right: 0.75rem;
    top: 0.75rem;
    transform: none;
    width: auto;
  }

  .guided-demo-overlay.is-callout-bottom-left .guided-demo-callout {
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
    right: 0.75rem;
    width: auto;
  }

  .guided-demo-creation-card {
    left: 0.75rem;
    right: 0.75rem;
    top: 12%;
    transform: translateY(0.35rem);
    width: auto;
  }

  .guided-demo-creation-card.is-ready {
    transform: translateY(0);
  }
}

/* Welcome mode is a product splash screen, not a normal Practice card. Keep this
   final in the cascade so older Practice sizing patches cannot reframe it. */
body.zb-brand-new-welcome-active,
body.zb-brand-new-welcome-active .app-shell,
body.zb-brand-new-welcome-active .practice-dashboard {
  margin: 0 !important;
  padding: 0 !important;
}

body.zb-brand-new-welcome-active .app-shell,
body.zb-brand-new-welcome-active .practice-dashboard {
  display: grid !important;
  max-width: none !important;
  min-height: 100vh !important;
  place-items: center !important;
  width: 100vw !important;
}

body:has(#sessionEmptyState:not([hidden]).practice-welcome-mode.is-brand-new-welcome) section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#sessionEmptyState:not([hidden]).practice-welcome-mode.is-brand-new-welcome) section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] > #sessionEmptyState.practice-welcome-mode {
  margin: 0 auto !important;
  width: min(100vw, 92rem) !important;
}

body.zb-brand-new-welcome-active .practice-dashboard > :not(#sessionEmptyState),
body.zb-brand-new-welcome-active #sessionPanel.practice-player {
  display: none !important;
}

body.zb-brand-new-welcome-active #sessionEmptyState.practice-welcome-mode {
  border-radius: 28px !important;
  box-sizing: border-box !important;
  min-height: min(100vh, 54rem) !important;
  max-height: 100vh !important;
  overflow: auto !important;
  width: min(100vw, 92rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-mode.dashboard-start-empty {
  gap: clamp(0.6rem, 1vw, 0.9rem) !important;
  padding: clamp(0.65rem, 1.5vw, 1.35rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-hero {
  min-height: clamp(8.5rem, 16vh, 12.5rem) !important;
  padding: clamp(0.25rem, 0.9vw, 0.75rem) 1rem 0 !important;
}

body.zb-brand-new-welcome-active .practice-welcome-brand {
  font-size: clamp(1.05rem, 1.25vw, 1.45rem) !important;
  margin-bottom: 0.45rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-mark {
  height: 2.15rem !important;
  width: 2.15rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-hero h3 {
  font-size: clamp(2.2rem, 3vw, 3.45rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-tagline {
  font-size: clamp(1rem, 1.35vw, 1.35rem) !important;
  margin-top: 0.5rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-hero #sessionEmptyStateText {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important;
  line-height: 1.42 !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card {
  padding: clamp(0.68rem, 1vw, 0.95rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card h4 {
  font-size: clamp(1.1rem, 1.35vw, 1.42rem) !important;
  margin-bottom: 0.22rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card p {
  font-size: clamp(0.78rem, 0.88vw, 0.9rem) !important;
  line-height: 1.36 !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card ul {
  gap: 0.34rem 0.78rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card li {
  font-size: clamp(0.74rem, 0.78vw, 0.82rem) !important;
  line-height: 1.28 !important;
}

body.zb-brand-new-welcome-active .practice-welcome-difference-card > strong {
  font-size: clamp(0.86rem, 0.96vw, 1rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card {
  min-height: clamp(9.2rem, 14vh, 12rem) !important;
  padding: clamp(0.65rem, 1vw, 0.92rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card-icon {
  height: 3rem !important;
  width: 3rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card-icon svg {
  height: 1.55rem !important;
  width: 1.55rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card h4 {
  font-size: clamp(1.14rem, 1.4vw, 1.45rem) !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card p {
  font-size: clamp(0.82rem, 0.9vw, 0.92rem) !important;
  line-height: 1.35 !important;
}

body.zb-brand-new-welcome-active .practice-welcome-card button {
  min-height: 2.55rem !important;
}

body.zb-brand-new-welcome-active .practice-welcome-footer {
  padding: 0.72rem 0.85rem !important;
}

@media (max-width: 900px) {
  body.zb-brand-new-welcome-active .practice-welcome-grid,
  body.zb-brand-new-welcome-active .practice-welcome-difference-card ul,
  body.zb-brand-new-welcome-active .practice-welcome-value-list {
    grid-template-columns: 1fr !important;
  }
}

/* Practice state guard: stale session UI must never render when JS marks it hidden. */
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player[hidden],
body[data-current-screen="dashboard"] .practice-dashboard [hidden]#sessionPanel.practice-player,
.practice-dashboard #sessionPanel.practice-player[hidden] {
  display: none !important;
}

/* P10OL Advanced Schedule Builder: ribbon-first block model. */
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(24rem, 1.35fr) minmax(18rem, 0.85fr);
}

.schedule-builder-ribbon-panel {
  grid-column: 1 / -1;
}

.schedule-builder-live-ribbon {
  align-items: stretch;
  display: flex;
  gap: 0.66rem;
  overflow-x: auto;
  padding: 0.25rem 0.1rem 0.1rem;
}

.schedule-builder-ribbon-chip {
  flex: 0 0 clamp(13rem, 18vw, 18rem);
  min-height: 4.6rem;
}

.schedule-builder-ribbon-empty {
  align-items: center;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.16), transparent 16rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(8, 15, 28, 0.88));
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  color: rgba(226, 232, 240, 0.8);
  display: flex;
  font-weight: 800;
  min-height: 4.8rem;
  padding: 1rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-current-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-list {
  max-height: clamp(20rem, 38vh, 31rem);
  overflow: auto;
  scrollbar-gutter: stable;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-editor {
  margin-top: 1rem;
}

.schedule-builder-config-flow {
  display: grid;
  gap: 0.85rem;
  min-width: min(34rem, 78vw);
}

.schedule-builder-config-flow label,
.schedule-builder-config-flow fieldset {
  display: grid;
  gap: 0.4rem;
}

.schedule-builder-config-flow fieldset {
  border: 1px solid rgba(168, 139, 250, 0.22);
  border-radius: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.8rem;
}

.schedule-builder-config-flow legend,
.schedule-builder-config-flow label > span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-builder-config-flow input,
.schedule-builder-config-flow select,
.schedule-builder-config-flow textarea {
  background: rgba(3, 8, 20, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.72rem;
  color: #f8fbff;
  font: inherit;
  padding: 0.72rem 0.82rem;
}

.schedule-builder-checkbox-line {
  align-items: center;
  background: rgba(15, 23, 42, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.8rem;
  display: flex !important;
  gap: 0.55rem;
  padding: 0.66rem 0.72rem;
}

.schedule-builder-checkbox-line input {
  accent-color: #8b5cf6;
  width: auto;
}

.schedule-builder-member-row em {
  color: rgba(125, 211, 252, 0.82);
  display: block;
  font-size: 0.76rem;
  font-style: normal;
  margin-top: 0.15rem;
}

.schedule-builder-full-view {
  display: grid;
  gap: 0.8rem;
  max-height: min(68vh, 42rem);
  min-width: min(48rem, 82vw);
  overflow: auto;
}

.schedule-builder-full-block {
  background:
    linear-gradient(135deg, rgba(27, 39, 72, 0.84), rgba(8, 15, 28, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.schedule-builder-full-block header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.schedule-builder-full-block header > span {
  align-items: center;
  background: rgba(139, 92, 246, 0.48);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.schedule-builder-full-block ul {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-builder-full-block li {
  background: rgba(3, 8, 20, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.7rem;
  display: grid;
  gap: 0.12rem;
  padding: 0.58rem 0.7rem;
}

.schedule-builder-full-block li span,
.schedule-builder-full-block small,
.schedule-builder-full-block p {
  color: rgba(203, 213, 225, 0.78);
  margin: 0;
}

@media (max-width: 1180px) {
  .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-grid {
    grid-template-columns: 1fr;
  }
}

/* P10ON Schedule Builder cleanup: compact workbench layout. */
.schedule-builder-screen .schedule-builder-header {
  align-items: center;
  border-radius: 1rem;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  min-height: 0;
  padding: clamp(0.62rem, 0.9vw, 0.82rem) clamp(0.78rem, 1.2vw, 1rem) !important;
}

.schedule-builder-title-area {
  display: grid;
  gap: 0.36rem;
  min-width: min(100%, 27rem);
}

.schedule-builder-screen .schedule-builder-header h2 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 0.95;
  margin: 0;
}

.schedule-builder-screen .schedule-builder-header [data-schedule-mode-summary] {
  display: none;
}

.schedule-builder-top-controls {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  min-width: min(100%, 34rem);
  position: relative;
}

.schedule-mode-switcher {
  align-self: start;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.14), transparent 9rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(8, 15, 28, 0.74));
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 0.3rem;
  max-width: min(100%, 30rem);
  padding: 0.4rem;
  position: relative;
}

.schedule-mode-switcher-heading {
  align-items: center;
  color: rgba(203, 213, 225, 0.78);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 0.42rem;
  letter-spacing: 0.06em;
  padding-inline: 0.18rem;
  text-transform: uppercase;
}

.schedule-mode-help {
  align-items: center;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.86);
  cursor: help;
  display: inline-flex;
  font-size: 0.72rem;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 1.25rem;
}

.schedule-mode-help-popover {
  background:
    radial-gradient(circle at 15% 0%, rgba(94, 234, 212, 0.16), transparent 10rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.96));
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 0.78rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0;
  line-height: 1.38;
  opacity: 0;
  padding: 0.78rem;
  pointer-events: none;
  position: absolute;
  text-transform: none;
  top: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(-0.2rem);
  transition: opacity 140ms ease, transform 140ms ease;
  width: min(20rem, 78vw);
  z-index: 20;
}

.schedule-mode-help-popover strong {
  color: #f8fbff;
  display: block;
  margin: 0.18rem 0 0.06rem;
}

.schedule-mode-help:hover .schedule-mode-help-popover,
.schedule-mode-help:focus-visible .schedule-mode-help-popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.schedule-mode-segments {
  background: rgba(2, 6, 23, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  display: grid;
  gap: 0.14rem;
  grid-template-columns: repeat(2, minmax(8rem, 1fr));
  padding: 0.16rem;
}

.schedule-mode-segment {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 2.05rem;
  padding: 0.32rem 0.72rem;
  white-space: nowrap;
}

.schedule-mode-segment:hover,
.schedule-mode-segment:focus-visible {
  background: rgba(148, 163, 184, 0.14);
  color: #fff;
}

.schedule-mode-segment.is-selected {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(124, 58, 237, 0.86));
  box-shadow: 0 14px 32px rgba(45, 212, 191, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: #fff;
}

.schedule-builder-start-practice-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem 0.68rem;
  justify-content: space-between;
  margin-top: 0.34rem;
  min-width: 0;
}

.schedule-builder-start-practice-button {
  align-items: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 7rem),
    linear-gradient(135deg, #14b85d, #16a085 48%, #2563eb);
  border: 1px solid rgba(134, 239, 172, 0.42);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(34, 197, 94, 0.28),
    0 0 34px rgba(45, 212, 191, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  color: #f8fffb;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 950;
  gap: 0.48rem;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 2.56rem;
  padding: 0.52rem 1.05rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, filter 140ms ease;
  white-space: nowrap;
}

.schedule-builder-start-practice-button:hover,
.schedule-builder-start-practice-button:focus-visible {
  border-color: rgba(187, 247, 208, 0.72);
  box-shadow:
    0 22px 54px rgba(34, 197, 94, 0.34),
    0 0 42px rgba(45, 212, 191, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.schedule-builder-start-practice-button:disabled,
.schedule-builder-start-practice-button[aria-disabled="true"] {
  background:
    linear-gradient(135deg, rgba(51, 65, 85, 0.72), rgba(15, 23, 42, 0.82));
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(203, 213, 225, 0.58);
  cursor: not-allowed;
  filter: saturate(0.6);
  transform: none;
}

.schedule-builder-start-practice-help {
  color: rgba(167, 243, 208, 0.84);
  flex: 1 1 11rem;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.25;
  min-width: min(100%, 9rem);
}

.schedule-builder-start-practice-button:disabled + .schedule-builder-start-practice-help,
.schedule-builder-start-practice-button[aria-disabled="true"] + .schedule-builder-start-practice-help {
  color: rgba(251, 191, 36, 0.88);
}

.schedule-builder-header-schedule {
  align-items: stretch;
  align-self: flex-start;
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 10rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(8, 15, 28, 0.72));
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.45rem;
  position: relative;
  width: min(100%, 34rem);
}

.schedule-builder-current-label {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 0 0.18rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-builder-current-command {
  align-items: stretch;
  display: grid;
  gap: 0.38rem;
  grid-template-columns: minmax(15rem, 1fr);
}

.schedule-builder-command-actions {
  display: grid;
  gap: 0.34rem;
  grid-template-columns: repeat(auto-fit, minmax(4.7rem, 1fr));
}

.schedule-builder-header .schedule-builder-schedule-current {
  align-items: center;
  background: rgba(2, 8, 20, 0.35);
  border-color: rgba(167, 139, 250, 0.22);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.25rem;
  min-width: clamp(14rem, 20vw, 20rem);
  padding: 0.38rem 0.62rem;
  text-align: left;
}

.schedule-builder-header .schedule-builder-command-actions .schedule-builder-small-button {
  align-self: center;
  justify-content: center;
  min-height: 2rem;
  padding-inline: 0.52rem;
  white-space: nowrap;
  width: 100%;
}

.schedule-builder-header .schedule-builder-clear-button {
  align-self: center;
  background: rgba(127, 29, 29, 0.16);
  border-color: rgba(248, 113, 113, 0.28);
  color: rgba(254, 202, 202, 0.92);
  height: 2.55rem;
  justify-content: center;
  max-height: 2.55rem;
  min-width: 6.9rem;
  padding-inline: 0.85rem;
  white-space: nowrap;
}

.schedule-builder-goals-flow,
.schedule-builder-goal-assist-flow {
  display: grid;
  gap: 0.9rem;
}

.schedule-builder-goals-intro,
.schedule-builder-goals-empty,
.schedule-builder-goal-add,
.schedule-builder-goal-assist-flow {
  background: rgba(8, 18, 34, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.9rem;
  padding: 0.85rem;
}

.schedule-builder-goals-intro {
  display: grid;
  gap: 0.35rem;
}

.schedule-builder-goals-intro strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1rem;
}

.schedule-builder-goals-intro p,
.schedule-builder-goals-empty p,
.schedule-builder-goal-assist-flow p,
.schedule-builder-goal-assist-flow small {
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.45;
  margin: 0;
}

.schedule-builder-goals-intro span {
  color: rgba(196, 181, 253, 0.95);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-builder-goals-name {
  display: grid;
  gap: 0.35rem;
  margin: 0.35rem 0 0.2rem;
}

.schedule-builder-goals-name span {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-builder-goals-name input {
  background: rgba(2, 8, 20, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.7rem;
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.98rem;
  min-height: 2.6rem;
  padding: 0.58rem 0.72rem;
}

.schedule-builder-goals-name input:focus-visible {
  border-color: rgba(125, 211, 252, 0.68);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
  outline: none;
}

.schedule-builder-goals-list,
.schedule-builder-goal-assist-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.schedule-builder-goal-chip {
  align-items: center;
  background: rgba(15, 23, 42, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 1rem;
  color: rgba(241, 245, 249, 0.9);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.58rem;
  line-height: 1.22;
  max-width: min(18rem, 100%);
  min-height: 2.65rem;
  padding: 0.52rem 0.82rem;
  position: relative;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.schedule-builder-goal-chip input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.schedule-builder-goal-chip::before {
  align-items: center;
  background: rgba(2, 8, 20, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 0.42rem;
  color: rgba(248, 250, 252, 0.96);
  content: "";
  display: inline-flex;
  flex: 0 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 900;
  height: 1.1rem;
  justify-content: center;
  width: 1.1rem;
}

.schedule-builder-goal-chip span {
  display: block;
  min-width: 0;
}

.schedule-builder-goal-chip:hover,
.schedule-builder-goal-chip:focus-within {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(203, 213, 225, 0.46);
  transform: translateY(-1px);
}

.schedule-builder-goal-chip.is-selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.62), rgba(20, 184, 166, 0.22));
  border-color: rgba(216, 180, 254, 0.5);
  color: #ffffff;
}

.schedule-builder-goal-chip.is-selected::before {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(139, 92, 246, 0.94));
  border-color: rgba(255, 255, 255, 0.38);
  content: "✓";
}

.schedule-builder-goal-add {
  align-items: end;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.schedule-builder-goal-add label {
  display: grid;
  gap: 0.3rem;
}

.schedule-builder-goal-add label span {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-builder-goal-add input {
  background: rgba(2, 8, 20, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.7rem;
  color: #f8fbff;
  min-height: 2.5rem;
  padding: 0.58rem 0.72rem;
}

.schedule-builder-goal-add .schedule-builder-context-form-status {
  grid-column: 1 / -1;
}

.schedule-builder-goal-assist-options .schedule-builder-small-button {
  min-height: 2.35rem;
}

.schedule-builder-header .schedule-builder-schedule-current .schedule-builder-mini-icon {
  height: 1.75rem;
  width: 1.75rem;
}

.schedule-builder-header .schedule-builder-schedule-current strong {
  font-size: 0.9rem;
}

.schedule-builder-header .schedule-builder-schedule-current small,
.schedule-builder-header .schedule-builder-schedule-current em {
  font-size: 0.68rem;
}

.schedule-builder-header .schedule-builder-schedule-tray {
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.18), transparent 11rem),
    linear-gradient(145deg, rgba(4, 10, 22, 0.98), rgba(8, 17, 32, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.92rem;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(15, 23, 42, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  left: 0;
  max-height: min(54vh, 28rem);
  min-width: min(26rem, 88vw);
  overflow: auto;
  padding: 0.62rem;
  position: absolute;
  right: auto;
  top: calc(100% + 0.45rem);
  z-index: 90;
}

.schedule-builder-tray-actions {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: rgba(203, 213, 225, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  padding: 0 0.1rem 0.45rem;
  text-transform: uppercase;
}

.schedule-builder-schedule-list {
  display: grid;
  gap: 0.5rem;
}

.schedule-builder-schedule-card {
  margin: 0;
}

.schedule-builder-schedule-select {
  align-items: center;
  background: rgba(2, 8, 20, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.82rem;
  color: rgba(248, 250, 252, 0.94);
  display: grid;
  gap: 0.58rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.6rem;
  padding: 0.62rem 0.7rem;
  text-align: left;
  width: 100%;
}

.schedule-builder-schedule-select:hover,
.schedule-builder-schedule-select:focus-visible,
.schedule-builder-schedule-card.is-selected .schedule-builder-schedule-select {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(125, 211, 252, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.schedule-builder-schedule-select strong {
  color: rgba(248, 250, 252, 0.98);
  display: block;
  font-size: 0.95rem;
}

.schedule-builder-schedule-select small {
  color: rgba(203, 213, 225, 0.84);
  display: block;
  font-size: 0.74rem;
  line-height: 1.35;
  margin-top: 0.08rem;
}

.schedule-builder-schedule-select em {
  color: rgba(167, 243, 208, 0.92);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-grid {
  gap: 0.78rem;
}

.schedule-builder-ribbon-panel {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.68), rgba(8, 15, 28, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 0.95rem;
  padding: 0.72rem;
}

.schedule-builder-ribbon-heading {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.58rem;
  padding-bottom: 0.5rem;
}

.schedule-builder-ribbon-heading span {
  display: none;
}

.schedule-builder-live-ribbon {
  gap: 0.45rem;
  padding: 0;
}

.schedule-builder-ribbon-chip {
  align-items: center;
  border-radius: 999px !important;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(7rem, auto) !important;
  min-height: 2.55rem !important;
  padding: 0.42rem 0.76rem 0.42rem 0.48rem !important;
  width: auto !important;
}

.schedule-builder-ribbon-chip > span {
  height: 1.6rem !important;
  width: 1.6rem !important;
}

.schedule-builder-ribbon-chip strong {
  font-size: 0.9rem !important;
  line-height: 1.1;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-ribbon-chip small {
  display: none !important;
}

.schedule-builder-ribbon-empty {
  min-height: 2.9rem;
  padding: 0.72rem 0.85rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-panel {
  border-radius: 0.95rem;
  padding: 0.82rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-panel-heading {
  margin-bottom: 0.65rem;
  padding-bottom: 0.52rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-list {
  gap: 0.55rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card {
  border-radius: 0.78rem;
  gap: 0.55rem;
  min-height: 4.45rem;
  padding: 0.62rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card small,
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card em {
  display: none;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-icon {
  height: 2.05rem;
  width: 2.05rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-list {
  max-height: none;
  min-height: 0;
  overflow-y: scroll;
  padding-right: 0.35rem;
  scrollbar-gutter: stable;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-card {
  border-radius: 0.8rem;
  gap: 0.45rem;
  padding: 0.55rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-main {
  min-height: 2.75rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-items {
  max-height: 7.5rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-meta span:first-child {
  display: none;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-actions {
  gap: 0.3rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-editor {
  margin-top: 0.65rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-editor[hidden] {
  display: none !important;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-editor-card {
  border-radius: 0.9rem;
  gap: 0.7rem;
  padding: 0.82rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-editor-title {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 0.1rem;
}

.schedule-builder-editor-close {
  justify-self: end;
}

.schedule-builder-segmented-control {
  background: rgba(3, 8, 20, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.24rem;
}

.schedule-builder-segmented-control label {
  align-items: center;
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.74);
  cursor: pointer;
  display: inline-flex !important;
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 2rem;
  padding: 0.35rem 0.72rem;
}

.schedule-builder-segmented-control label.is-selected {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.82), rgba(139, 92, 246, 0.82));
  color: #fff;
  box-shadow: 0 10px 28px rgba(45, 212, 191, 0.16);
}

.schedule-builder-segmented-control input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.schedule-builder-config-group {
  display: grid;
  gap: 0.44rem;
}

.schedule-builder-config-summary {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 0.82rem;
  color: rgba(226, 232, 240, 0.84);
  display: grid;
  gap: 0.24rem;
  padding: 0.72rem 0.82rem;
}

.schedule-builder-config-summary strong {
  color: #f8fafc;
  font-size: 0.98rem;
}

.schedule-builder-config-summary small {
  color: rgba(203, 213, 225, 0.72);
  line-height: 1.45;
}

.schedule-builder-inline-setting {
  align-items: center;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.82rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.58rem 0.7rem;
}

.schedule-builder-inline-setting span {
  color: rgba(226, 232, 240, 0.86);
  font-weight: 850;
}

.schedule-builder-inline-setting select {
  max-width: 6rem;
}

.schedule-builder-loop-group {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 0.45rem;
  padding-top: 0.58rem;
}

.schedule-builder-loop-group > strong {
  color: rgba(129, 230, 217, 0.9);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-builder-config-group > span,
.schedule-builder-keep-fresh-options > span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-builder-keep-fresh-options {
  align-items: center;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.62rem;
}

.schedule-builder-keep-fresh-options[hidden] {
  display: none !important;
}

.schedule-builder-keep-fresh-options label {
  align-items: center;
  display: inline-flex !important;
  flex-direction: row;
  gap: 0.35rem;
}

.schedule-builder-keep-fresh-options input[type="number"] {
  max-width: 4.5rem;
  padding-block: 0.42rem;
}

.schedule-builder-review-methods label {
  align-items: center;
  border-radius: 999px;
  display: inline-flex !important;
  font-weight: 900;
  gap: 0.35rem;
  padding: 0.48rem 0.7rem;
}

.schedule-builder-review-methods label.is-selected {
  background: rgba(96, 165, 250, 0.22);
  color: #fff;
}

.schedule-builder-review-rule-flow {
  display: grid;
  gap: 0.85rem;
  max-height: min(72vh, 46rem);
  overflow-y: auto;
  padding-right: 0.18rem;
}

.schedule-builder-review-copy-row {
  align-items: end;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.62));
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 1rem;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.8rem;
}

.schedule-builder-review-copy-row label,
.schedule-builder-review-rule-detail label {
  display: grid;
  gap: 0.38rem;
}

.schedule-builder-review-copy-row label > span,
.schedule-builder-review-rule-detail label > span:first-child,
.schedule-builder-detail-label {
  color: rgba(196, 181, 253, 0.92);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-builder-review-type-grid {
  border: 0;
  display: grid;
  gap: 0.54rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.schedule-builder-review-type-grid legend,
.schedule-builder-priority-row legend {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.9rem;
  font-weight: 950;
  margin-bottom: 0.5rem;
}

.schedule-builder-review-type-grid label {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.54));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  cursor: pointer;
  display: grid !important;
  gap: 0.22rem;
  min-height: 5.35rem;
  padding: 0.8rem;
  position: relative;
}

.schedule-builder-review-type-grid label input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.schedule-builder-review-type-grid label strong {
  color: rgba(248, 250, 252, 0.95);
  font-size: 0.94rem;
}

.schedule-builder-review-type-grid label span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.8rem;
  line-height: 1.35;
}

.schedule-builder-review-type-grid label.is-selected {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.26), rgba(99, 102, 241, 0.22));
  border-color: rgba(94, 234, 212, 0.52);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.16), 0 18px 38px rgba(20, 184, 166, 0.12);
}

.schedule-builder-review-rule-detail {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
}

.schedule-builder-review-rule-detail[hidden] {
  display: none !important;
}

.schedule-builder-inline-number {
  align-items: center;
  display: inline-flex;
  gap: 0.48rem;
}

.schedule-builder-inline-number input {
  max-width: 6rem;
}

.schedule-builder-inline-number em {
  color: rgba(203, 213, 225, 0.7);
  font-style: normal;
  font-weight: 800;
}

.schedule-builder-weekday-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.schedule-builder-weekday-grid label,
.schedule-builder-priority-row label {
  align-items: center;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  cursor: pointer;
  display: inline-flex !important;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 0.34rem;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.42rem 0.62rem;
}

.schedule-builder-weekday-grid label.is-selected,
.schedule-builder-priority-row label.is-selected {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.32), rgba(139, 92, 246, 0.26));
  border-color: rgba(94, 234, 212, 0.46);
  color: #fff;
}

.schedule-builder-custom-date-list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-builder-priority-row {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin: 0;
  padding: 0;
}

.schedule-builder-priority-row legend {
  flex-basis: 100%;
  margin-bottom: 0;
}

.modal-backdrop.is-schedule-rule-editor-modal {
  align-items: center;
  padding: 1rem;
}

.modal-backdrop.is-schedule-rule-editor-modal .guidance-modal-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.1), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(99, 102, 241, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(2, 8, 23, 0.98), rgba(15, 23, 42, 0.97));
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: 1.15rem;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
  color: rgba(248, 250, 252, 0.94);
  max-height: min(94vh, 960px) !important;
  max-width: min(98vw, 1500px) !important;
  min-width: min(98vw, 1320px) !important;
  width: min(98vw, 1500px) !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .guidance-modal-body {
  max-height: min(80vh, 53rem) !important;
  overflow: auto;
}

.modal-backdrop.is-schedule-rule-editor-modal .guidance-modal-message:empty {
  display: none;
}

.modal-backdrop.is-schedule-rule-editor-modal .modal-header {
  padding-block: 0.72rem !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .guidance-modal-message {
  color: rgba(203, 213, 225, 0.72);
}

.modal-backdrop.is-schedule-rule-editor-modal .modal-header,
.modal-backdrop.is-schedule-rule-editor-modal .modal-footer-actions {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 8, 23, 0.94)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

.schedule-builder-review-rule-flow {
  color: rgba(248, 250, 252, 0.94);
  gap: 0.82rem;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.schedule-builder-rule-main {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(38rem, 2.15fr) minmax(15rem, 0.7fr);
}

.schedule-builder-review-rule-flow.is-custom-calendar-rule .schedule-builder-rule-main {
  grid-template-columns: minmax(15.5rem, 0.78fr) minmax(44rem, 2.45fr) minmax(14rem, 0.62fr);
}

.schedule-builder-rule-editor-panel,
.schedule-builder-rule-preview {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(2, 8, 23, 0.76));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  min-width: 0;
  padding: 1rem;
}

.schedule-builder-rule-panel-heading {
  display: grid;
  gap: 0.24rem;
  margin-bottom: 0.62rem;
}

.schedule-builder-rule-panel-heading strong,
.schedule-builder-rule-preview > div:first-child strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1rem;
  font-weight: 950;
}

.schedule-builder-rule-panel-heading span,
.schedule-builder-rule-preview > div:first-child span,
.schedule-builder-rule-copy-list em,
.schedule-builder-review-item-strip em {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.35;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid {
  display: grid;
  gap: 0.44rem;
  grid-template-columns: 1fr;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label {
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.48));
  border-color: rgba(148, 163, 184, 0.14);
  display: grid !important;
  gap: 0.62rem;
  grid-template-columns: 1rem 2.15rem minmax(0, 1fr);
  min-height: 3.5rem;
  padding: 0.56rem 0.66rem;
}

.schedule-builder-rule-radio-dot {
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 999px;
  display: block;
  height: 0.88rem;
  width: 0.88rem;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label.is-selected .schedule-builder-rule-radio-dot {
  background: radial-gradient(circle, #dbeafe 0 32%, #2563eb 34% 100%);
  border-color: rgba(147, 197, 253, 0.92);
}

.schedule-builder-rule-type-icon,
.schedule-builder-review-item-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.9), rgba(99, 102, 241, 0.86));
  border-radius: 0.5rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 950;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label strong {
  display: block;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label em {
  color: rgba(203, 213, 225, 0.66);
  display: block;
  font-size: 0.73rem;
  font-style: normal;
  line-height: 1.35;
  margin-top: 0.1rem;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label.is-selected {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.28), rgba(14, 116, 144, 0.18));
  border-color: rgba(59, 130, 246, 0.58);
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label.is-disabled .schedule-builder-rule-radio-dot,
.schedule-builder-review-rule-flow .schedule-builder-review-type-grid label.is-disabled .schedule-builder-rule-type-icon {
  filter: grayscale(0.35);
}

.schedule-builder-review-type-grid label[data-rule-type="every-day"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(21, 128, 61, 0.84));
}

.schedule-builder-review-type-grid label[data-rule-type="every-n-days"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 165, 233, 0.78));
}

.schedule-builder-review-type-grid label[data-rule-type="weekdays"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.96), rgba(6, 182, 212, 0.78));
}

.schedule-builder-review-type-grid label[data-rule-type="custom-dates"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(124, 58, 237, 0.78));
}

.schedule-builder-review-type-grid label[data-rule-type="spaced"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.98), rgba(180, 83, 9, 0.82));
}

.schedule-builder-review-type-grid label[data-rule-type="copy-pattern"] .schedule-builder-rule-type-icon {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.98), rgba(59, 130, 246, 0.78));
}

.schedule-builder-review-type-grid label[data-rule-type="every-day"].is-selected {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.26), rgba(15, 23, 42, 0.54));
  border-color: rgba(52, 211, 153, 0.58);
}

.schedule-builder-review-type-grid label[data-rule-type="every-n-days"].is-selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.26), rgba(15, 23, 42, 0.54));
  border-color: rgba(96, 165, 250, 0.58);
}

.schedule-builder-review-type-grid label[data-rule-type="weekdays"].is-selected {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.26), rgba(15, 23, 42, 0.54));
  border-color: rgba(94, 234, 212, 0.58);
}

.schedule-builder-review-type-grid label[data-rule-type="custom-dates"].is-selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(15, 23, 42, 0.54));
  border-color: rgba(167, 139, 250, 0.62);
}

.schedule-builder-review-type-grid label[data-rule-type="spaced"].is-selected {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(15, 23, 42, 0.54));
  border-color: rgba(251, 191, 36, 0.56);
}

.schedule-builder-review-type-grid label[data-rule-type="copy-pattern"].is-selected {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(15, 23, 42, 0.54));
  border-color: rgba(196, 181, 253, 0.6);
}

.schedule-builder-review-item-strip {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.72rem;
  display: flex;
  gap: 0.72rem;
  margin-bottom: 0.78rem;
  padding: 0.62rem;
}

.schedule-builder-review-item-strip strong {
  display: block;
}

.schedule-builder-rule-config-card {
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.82rem;
  display: grid;
  gap: 0.72rem;
  margin-bottom: 0.66rem;
  padding: 0.72rem;
}

.schedule-builder-rule-config-card[hidden] {
  display: none !important;
}

.schedule-builder-rule-config-card p {
  color: rgba(203, 213, 225, 0.72);
  margin: 0;
}

.schedule-builder-review-rule-flow .schedule-builder-weekday-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-builder-review-rule-flow .schedule-builder-weekday-grid label {
  border-radius: 0.65rem;
  display: grid !important;
  gap: 0.16rem;
  min-height: 3.85rem;
  padding-inline: 0.28rem;
}

.schedule-builder-review-rule-flow .schedule-builder-weekday-grid label input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.schedule-builder-review-rule-flow .schedule-builder-weekday-grid label strong {
  font-size: 1rem;
}

.schedule-builder-review-rule-flow .schedule-builder-weekday-grid label span {
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.66rem;
}

.schedule-builder-calendar-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.schedule-builder-calendar-header span {
  display: grid;
  gap: 0.1rem;
  text-align: center;
}

.schedule-builder-calendar-header em {
  color: rgba(203, 213, 225, 0.64);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 750;
}

.schedule-builder-icon-button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 2.2rem;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0;
}

.schedule-builder-calendar-grid {
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-builder-review-rule-flow.is-custom-calendar-rule .schedule-builder-calendar-grid {
  gap: 0.42rem;
}

.schedule-builder-calendar-grid > span {
  color: rgba(148, 163, 184, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.schedule-builder-calendar-grid button,
.schedule-builder-calendar-grid .is-empty {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.45rem;
  color: rgba(226, 232, 240, 0.86);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 2.75rem;
  position: relative;
}

.schedule-builder-review-rule-flow.is-custom-calendar-rule .schedule-builder-calendar-grid button,
.schedule-builder-review-rule-flow.is-custom-calendar-rule .schedule-builder-calendar-grid .is-empty {
  min-height: 3.35rem;
}

.schedule-builder-calendar-grid button.is-selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.88), rgba(14, 165, 233, 0.78));
  border-color: rgba(196, 181, 253, 0.86);
  box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.32), 0 16px 32px rgba(88, 28, 135, 0.28);
  color: #fff;
}

.schedule-builder-calendar-grid button.has-context {
  border-color: rgba(251, 191, 36, 0.38);
}

.schedule-builder-calendar-day-number {
  position: relative;
  z-index: 1;
}

.schedule-builder-calendar-markers {
  bottom: 0.32rem;
  display: flex;
  gap: 0.14rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.schedule-builder-calendar-marker {
  background: rgba(251, 191, 36, 0.86);
  border-radius: 999px;
  height: 0.32rem;
  width: 0.32rem;
}

.schedule-builder-calendar-marker.is-event {
  background: rgba(168, 85, 247, 0.95);
}

.schedule-builder-calendar-marker.is-note {
  background: rgba(34, 197, 94, 0.95);
}

.schedule-builder-calendar-marker.is-holiday {
  background: rgba(251, 191, 36, 0.98);
}

.schedule-builder-calendar-marker.is-scheduled-item {
  background: rgba(59, 130, 246, 0.95);
}

.schedule-builder-calendar-popover {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 0.82rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  color: rgba(248, 250, 252, 0.94);
  display: grid;
  gap: 0.4rem;
  padding: 0.72rem 0.82rem;
}

.schedule-builder-calendar-hover-popover {
  background: linear-gradient(145deg, rgba(2, 8, 23, 0.98), rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 0.72rem;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.42);
  color: rgba(248, 250, 252, 0.94);
  display: grid;
  gap: 0.36rem;
  max-width: 15rem;
  padding: 0.62rem 0.72rem;
  pointer-events: none;
  position: fixed;
  z-index: 10020;
}

.schedule-builder-calendar-popover[hidden] {
  display: none !important;
}

.schedule-builder-calendar-hover-popover[hidden] {
  display: none !important;
}

.schedule-builder-calendar-popover ul {
  display: grid;
  gap: 0.28rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-builder-calendar-hover-popover ul {
  display: grid;
  gap: 0.22rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-builder-calendar-popover li {
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.82rem;
}

.schedule-builder-calendar-hover-popover li {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.78rem;
}

.schedule-builder-calendar-popover li span {
  color: rgba(251, 191, 36, 0.88);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  margin-right: 0.34rem;
  text-transform: uppercase;
}

.schedule-builder-calendar-hover-popover li span {
  color: rgba(251, 191, 36, 0.9);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  margin-right: 0.28rem;
  text-transform: uppercase;
}

.schedule-builder-selected-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schedule-builder-selected-dates button,
.schedule-builder-selected-dates span {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.34rem 0.55rem;
}

.schedule-builder-rule-options {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0.72rem;
}

.schedule-builder-rule-options label {
  display: grid;
  gap: 0.3rem;
}

.schedule-builder-rule-options label > span,
.schedule-builder-rule-config-card label > span:first-child {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.78rem;
  font-weight: 900;
}

.schedule-builder-rule-options label > span em {
  color: rgba(148, 163, 184, 0.78);
  font-style: normal;
  font-weight: 800;
}

.schedule-builder-rule-options small {
  color: rgba(148, 163, 184, 0.76);
  font-size: 0.72rem;
}

.schedule-builder-rule-attribute-row {
  display: grid;
  gap: 0.7rem;
  grid-column: 1 / -1;
  grid-template-columns: minmax(10rem, 0.75fr) minmax(0, 1.25fr);
}

.schedule-builder-rule-attribute-row .schedule-builder-priority-row {
  align-content: end;
}

.schedule-builder-rule-copy-search {
  margin-bottom: 0.62rem;
  width: 100%;
}

.schedule-builder-rule-copy-list {
  display: grid;
  gap: 0.42rem;
  max-height: min(54vh, 34rem);
  overflow-y: auto;
  padding-right: 0.14rem;
}

.schedule-builder-rule-copy-list button {
  align-items: center;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 0.76rem;
  color: rgba(248, 250, 252, 0.92);
  display: grid;
  gap: 0.62rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  min-height: 4.15rem;
  padding: 0.68rem;
  text-align: left;
}

.schedule-builder-rule-copy-list small {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.88);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.26rem 0.44rem;
}

.schedule-builder-rule-copy-list button:hover,
.schedule-builder-rule-copy-list button:focus-visible {
  border-color: rgba(96, 165, 250, 0.58);
}

.schedule-builder-copy-empty {
  color: rgba(203, 213, 225, 0.68);
  margin: 0;
}

.schedule-builder-rule-preview {
  display: grid;
  align-content: start;
  gap: 0.62rem;
}

.schedule-builder-rule-preview-list {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr;
  overflow: visible;
  padding-bottom: 0;
}

.schedule-builder-rule-preview-list article {
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.62rem;
  display: grid;
  gap: 0.16rem;
  min-height: auto;
  padding: 0.48rem 0.56rem;
}

.schedule-builder-rule-preview-list article.is-today {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(15, 23, 42, 0.66));
  border-color: rgba(110, 231, 183, 0.44);
}

.schedule-builder-rule-preview-list article strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.75rem;
}

.schedule-builder-rule-preview-list article span {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 950;
}

.schedule-builder-rule-preview-list article em,
.schedule-builder-rule-preview-list p {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.72rem;
  font-style: normal;
  margin: 0;
}

.schedule-builder-preview-calendar {
  display: grid;
  gap: 0.48rem;
}

.schedule-builder-preview-calendar > strong,
.schedule-builder-preview-selected > strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.82rem;
}

.schedule-builder-preview-calendar-grid {
  display: grid;
  gap: 0.16rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-builder-preview-calendar-grid em {
  color: rgba(148, 163, 184, 0.74);
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.schedule-builder-preview-calendar-grid span {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.32rem;
  color: rgba(226, 232, 240, 0.78);
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 850;
  justify-content: center;
}

.schedule-builder-preview-calendar-grid span.is-empty {
  opacity: 0;
}

.schedule-builder-preview-calendar-grid span.is-selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.86), rgba(14, 165, 233, 0.72));
  border-color: rgba(196, 181, 253, 0.74);
  color: #fff;
}

.schedule-builder-preview-selected {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  padding-top: 0.58rem;
}

.schedule-builder-preview-selected strong {
  flex-basis: 100%;
}

.schedule-builder-preview-selected span {
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0.25rem 0.42rem;
}

.schedule-builder-pattern-grid {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-builder-pattern-grid button {
  background:
    radial-gradient(circle at 95% 12%, rgba(139, 92, 246, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.52));
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 0.9rem;
  color: rgba(248, 250, 252, 0.92);
  cursor: pointer;
  display: grid;
  gap: 0.32rem;
  min-height: 7.35rem;
  padding: 0.78rem;
  position: relative;
  text-align: left;
}

.schedule-builder-pattern-grid button:hover,
.schedule-builder-pattern-grid button:focus-visible {
  border-color: rgba(167, 139, 250, 0.62);
  box-shadow: 0 18px 44px rgba(88, 28, 135, 0.18);
}

.schedule-builder-pattern-grid button strong {
  font-size: 1rem;
}

.schedule-builder-pattern-grid button span:not(.schedule-builder-pattern-used-by) {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.8rem;
}

.schedule-builder-pattern-grid button em {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.schedule-builder-pattern-grid button small {
  align-self: end;
  color: rgba(94, 234, 212, 0.88);
  font-size: 0.74rem;
  font-weight: 900;
}

.schedule-builder-pattern-used-by {
  background: rgba(2, 8, 23, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 0.72rem;
  bottom: calc(100% - 0.25rem);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  display: none;
  gap: 0.22rem;
  left: 0.72rem;
  min-width: min(18rem, 90vw);
  padding: 0.62rem;
  position: absolute;
  z-index: 4;
}

.schedule-builder-pattern-grid button:hover .schedule-builder-pattern-used-by,
.schedule-builder-pattern-grid button:focus-visible .schedule-builder-pattern-used-by {
  display: grid;
}

.schedule-builder-pattern-used-by b {
  color: rgba(196, 181, 253, 0.92);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-builder-pattern-used-by i {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.78rem;
  font-style: normal;
}

.schedule-builder-context-form {
  display: grid;
  gap: 0.72rem;
  min-width: min(46rem, 88vw);
}

.schedule-builder-context-form-fields {
  display: grid;
  gap: 0.82rem;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.55fr);
}

.schedule-builder-context-form-wide {
  grid-column: 1 / -1;
}

.schedule-builder-context-form label {
  display: grid;
  gap: 0.34rem;
}

.schedule-builder-context-form label > span {
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.78rem;
  font-weight: 900;
}

.schedule-builder-context-form label > span em {
  color: rgba(148, 163, 184, 0.78);
  font-style: normal;
  font-weight: 800;
}

.schedule-builder-context-form input,
.schedule-builder-context-form textarea {
  background: rgba(2, 8, 23, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.72rem;
  color: rgba(248, 250, 252, 0.94);
  padding: 0.72rem 0.8rem;
}

.is-event-context-form input,
.is-event-context-form textarea {
  border-color: rgba(245, 158, 11, 0.24);
}

.is-note-context-form input,
.is-note-context-form textarea {
  border-color: rgba(34, 197, 94, 0.22);
}

.schedule-builder-context-form textarea {
  resize: vertical;
}

.schedule-builder-context-date-summary {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.62));
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.72rem;
  display: grid;
  gap: 0.28rem;
  min-height: 100%;
  padding: 0.64rem 0.72rem;
}

.is-event-context-form .schedule-builder-context-date-summary {
  border-color: rgba(245, 158, 11, 0.24);
}

.is-note-context-form .schedule-builder-context-date-summary {
  border-color: rgba(34, 197, 94, 0.22);
}

.schedule-builder-context-date-summary strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.82rem;
}

.schedule-builder-context-date-summary em {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-context-date-summary .schedule-builder-calendar-markers {
  justify-self: start;
  position: static;
  transform: none;
}

.schedule-builder-context-form-status {
  color: rgba(251, 191, 36, 0.9);
  font-size: 0.82rem;
  font-weight: 850;
  margin: 0;
  min-height: 1em;
}

.schedule-builder-context-calendar {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 48%),
    rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.7rem;
  padding: 0.75rem;
  position: relative;
}

.is-event-context-form .schedule-builder-context-calendar {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 48%),
    rgba(2, 8, 23, 0.48);
  border-color: rgba(245, 158, 11, 0.24);
}

.is-note-context-form .schedule-builder-context-calendar {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.15), transparent 48%),
    rgba(2, 8, 23, 0.48);
  border-color: rgba(34, 197, 94, 0.22);
}

.schedule-builder-context-calendar .schedule-builder-calendar-grid button,
.schedule-builder-context-calendar .schedule-builder-calendar-grid .is-empty {
  min-height: clamp(2rem, 5.2vh, 2.35rem);
}

@media (max-width: 1180px) {
  .schedule-builder-rule-main {
    grid-template-columns: 1fr;
  }

  .schedule-builder-rule-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .schedule-builder-screen .schedule-builder-header,
  .schedule-builder-top-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-builder-current-command {
    grid-template-columns: 1fr;
  }

  .schedule-builder-command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-builder-header .schedule-builder-schedule-current {
    width: 100%;
  }

  .schedule-builder-review-copy-row,
  .schedule-builder-review-type-grid,
  .schedule-builder-weekday-grid,
  .schedule-builder-custom-date-list {
    grid-template-columns: 1fr;
  }
}

/* P10ON Schedule Builder cleanup: denser ribbon and aligned block cards. */
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-grid {
  grid-template-columns: minmax(13rem, 0.56fr) minmax(24rem, 1.42fr) minmax(18rem, 0.9fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-header {
  margin-bottom: 0.55rem;
}

.schedule-builder-ribbon-panel {
  align-items: center;
  column-gap: 0.65rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0.5rem 0.58rem;
}

.schedule-builder-ribbon-heading {
  display: contents;
}

.schedule-builder-ribbon-heading > div {
  align-items: center;
  display: flex;
  gap: 0.42rem;
  min-width: max-content;
}

.schedule-builder-ribbon-heading p {
  margin: 0;
  white-space: nowrap;
}

.schedule-builder-ribbon-heading button {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}

.schedule-builder-live-ribbon {
  grid-column: 2;
  min-width: 0;
  overflow-x: auto;
  padding: 0.08rem 0.04rem;
}

.schedule-builder-ribbon-empty {
  background: rgba(15, 23, 42, 0.52);
  border-radius: 999px;
  min-height: 2.35rem;
  padding: 0.48rem 0.72rem;
  white-space: nowrap;
}

.schedule-builder-ribbon-chip {
  min-height: 2.28rem !important;
  padding-block: 0.32rem !important;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-panel {
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 4;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card {
  align-items: center;
  display: grid;
  grid-template-columns: 1rem 2.15rem minmax(0, 1fr) auto;
  justify-items: stretch;
  overflow: visible;
  position: relative;
  text-align: left;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card::before {
  justify-self: center;
  width: 1rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card > span:last-child {
  align-items: start;
  display: grid;
  gap: 0.08rem;
  justify-items: start;
  min-width: 0;
  text-align: left;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-card strong {
  line-height: 1.1;
  text-align: left;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-type-icon {
  flex: 0 0 2.15rem;
  justify-self: center;
}

.schedule-builder-keep-fresh-options > span {
  flex: 1 0 100%;
}

@media (max-width: 1180px) {
  .schedule-builder-ribbon-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.45rem;
  }

  .schedule-builder-ribbon-heading > div {
    grid-column: 1;
  }

  .schedule-builder-live-ribbon {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* P10OQ Schedule builder visibility: selected block gets room without opening details. */
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-ribbon-panel {
  display: block;
  min-height: 0;
  padding: 0.42rem 0.5rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-live-ribbon {
  display: flex;
  grid-column: auto;
  min-height: 2.6rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-ribbon-chip {
  grid-template-columns: auto auto minmax(7rem, auto) auto !important;
}

.schedule-builder-ribbon-grip {
  color: rgba(203, 213, 225, 0.68);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.18em;
  line-height: 1;
  margin-right: 0.1rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-ribbon-chip small {
  color: rgba(203, 213, 225, 0.72);
  display: block !important;
  font-size: 0.68rem;
  font-weight: 900;
  margin-left: 0.35rem;
  white-space: nowrap;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-list:has(.schedule-builder-block-card.is-selected) {
  max-height: none;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-card.is-selected .schedule-builder-block-items {
  max-height: clamp(16rem, 39vh, 28rem);
  overflow: auto;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-catalog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-screen.is-advanced-schedule-screen #scheduleBuilderCatalogBrowser,
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-catalog-browser {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-catalog-summary {
  align-items: center;
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.34), rgba(14, 116, 144, 0.24));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.72rem;
  color: rgba(226, 232, 240, 0.82);
  display: inline-flex;
  gap: 0.28rem;
  min-height: 2rem;
  padding: 0.34rem 0.62rem;
  position: relative;
  z-index: 0;
}

.schedule-builder-catalog-summary strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

.schedule-builder-catalog-summary span {
  font-size: 0.78rem;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-catalog-list {
  align-content: start;
  grid-auto-rows: max-content;
  max-height: none;
  min-height: 0;
  overflow: auto;
}

.schedule-builder-type-info {
  align-items: center;
  align-self: center;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(203, 213, 225, 0.28);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.94);
  display: inline-flex;
  font-family: ui-serif, Georgia, serif;
  font-size: 0.82rem;
  font-weight: 900;
  font-style: italic;
  height: 1.18rem;
  justify-content: center;
  justify-self: end;
  opacity: 0.82;
  pointer-events: none;
  text-transform: none;
  width: 1.18rem;
}

.schedule-builder-type-help {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.15), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.96));
  border: 1px solid rgba(168, 139, 250, 0.26);
  border-radius: 0.85rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
  color: rgba(226, 232, 240, 0.9);
  display: grid;
  gap: 0.35rem;
  left: calc(100% + 0.65rem);
  opacity: 0;
  padding: 0.78rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-0.25rem);
  transition: opacity 150ms ease, transform 150ms ease;
  width: min(18rem, 50vw);
  z-index: 70;
}

.schedule-builder-type-help strong {
  color: #fff;
  font-size: 0.9rem;
}

.schedule-builder-type-help span,
.schedule-builder-type-help small {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.78rem;
  line-height: 1.35;
}

.schedule-builder-type-card:hover .schedule-builder-type-help,
.schedule-builder-type-card:focus-visible .schedule-builder-type-help {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* P10OZ Advanced Scheduler Phase 1: Practice Blocks, Scheduled Items, Events & Notes. */
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-advanced-workbench {
  align-items: stretch;
  display: grid;
  gap: 0.68rem;
  grid-template-columns: minmax(28rem, 1.08fr) minmax(22rem, 0.92fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(32rem, calc(100vh - 10rem), 46rem);
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-generated-panel {
  grid-column: 1 / -1;
}

.schedule-builder-generated-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 197, 94, 0.14), transparent 14rem),
    linear-gradient(135deg, rgba(5, 15, 28, 0.9), rgba(11, 20, 39, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.85rem;
  display: block;
  padding: 0.42rem 0.5rem;
}

.schedule-builder-generated-heading {
  display: none;
}

.schedule-builder-generated-heading p {
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.schedule-builder-generated-estimate {
  color: rgba(226, 232, 240, 0.82);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.22rem;
}

.schedule-builder-advanced-sections {
  align-content: start;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 0.62rem;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
  scrollbar-gutter: stable;
}

.schedule-builder-advanced-section {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(8, 15, 28, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.8rem;
  display: grid;
  gap: 0.5rem;
  padding: 0.66rem;
}

.schedule-builder-advanced-section.is-collapsed {
  gap: 0;
  padding-block: 0.5rem;
}

.schedule-builder-practice-blocks-section {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.26), transparent 48%),
    linear-gradient(145deg, rgba(18, 33, 67, 0.9), rgba(8, 15, 28, 0.8));
  border-color: rgba(96, 165, 250, 0.34);
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.12), 0 18px 45px rgba(37, 99, 235, 0.06);
}

.schedule-builder-scheduled-items-section {
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.23), transparent 48%),
    linear-gradient(145deg, rgba(12, 53, 51, 0.78), rgba(8, 15, 28, 0.82));
  border-color: rgba(45, 212, 191, 0.33);
  box-shadow: inset 0 1px 0 rgba(94, 234, 212, 0.11), 0 18px 45px rgba(20, 184, 166, 0.05);
}

.schedule-builder-events-notes-section {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.24), transparent 48%),
    linear-gradient(145deg, rgba(62, 40, 12, 0.72), rgba(8, 15, 28, 0.82));
  border-color: rgba(245, 158, 11, 0.32);
  box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.11), 0 18px 45px rgba(245, 158, 11, 0.05);
}

.schedule-builder-advanced-section.is-section-selected {
  border-color: rgba(248, 250, 252, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(96, 165, 250, 0.26),
    0 0 34px rgba(96, 165, 250, 0.18),
    0 22px 58px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.schedule-builder-scheduled-items-section.is-section-selected {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 0 2px rgba(45, 212, 191, 0.28),
    0 0 34px rgba(45, 212, 191, 0.18),
    0 22px 58px rgba(0, 0, 0, 0.28);
}

.schedule-builder-practice-blocks-section.is-empty-drop-preview {
  border-color: rgba(125, 211, 252, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(240, 249, 255, 0.14),
    0 0 0 2px rgba(56, 189, 248, 0.2),
    0 0 38px rgba(56, 189, 248, 0.2),
    0 20px 52px rgba(0, 0, 0, 0.28);
}

.schedule-builder-practice-blocks-section .schedule-builder-section-list,
.schedule-builder-scheduled-items-section .schedule-builder-section-list,
.schedule-builder-events-notes-section .schedule-builder-section-list {
  border-radius: 0.68rem;
}

.schedule-builder-practice-blocks-section .schedule-builder-drop-hint {
  background: rgba(37, 99, 235, 0.07);
  border-color: rgba(96, 165, 250, 0.24);
}

.schedule-builder-scheduled-items-section .schedule-builder-drop-hint {
  background: rgba(20, 184, 166, 0.07);
  border-color: rgba(45, 212, 191, 0.23);
}

.schedule-builder-events-notes-section .schedule-builder-drop-hint {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.23);
}

.schedule-builder-section-title {
  align-items: center;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.schedule-builder-section-number {
  align-items: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(139, 92, 246, 0.88));
  border-radius: 0.35rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 950;
  height: 1.45rem;
  justify-content: center;
  width: 1.45rem;
}

.schedule-builder-events-notes-section .schedule-builder-section-number {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(249, 115, 22, 0.88));
}

.schedule-builder-section-title p {
  align-items: center;
  color: rgba(226, 232, 240, 0.94);
  display: flex;
  font-size: 0.84rem;
  gap: 0.38rem;
  font-weight: 950;
  letter-spacing: 0.055em;
  margin: 0;
  text-transform: uppercase;
}

.schedule-builder-section-count {
  align-items: center;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(203, 213, 225, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.84);
  display: inline-flex;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  min-height: 1.28rem;
  padding: 0.22rem 0.46rem;
  text-transform: none;
  white-space: nowrap;
}

.schedule-builder-section-collapse-toggle {
  font-weight: 950;
  min-width: 2.08rem;
  padding-inline: 0.46rem;
}

.schedule-builder-context-help {
  display: inline-flex;
  position: relative;
}

.schedule-builder-context-help-trigger {
  align-items: center;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(203, 213, 225, 0.2);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  cursor: help;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 950;
  height: 1.22rem;
  justify-content: center;
  padding: 0;
  width: 1.22rem;
}

.schedule-builder-context-help-trigger:hover,
.schedule-builder-context-help-trigger:focus-visible {
  border-color: rgba(125, 211, 252, 0.62);
  color: #f8fafc;
  outline: none;
}

.schedule-builder-context-help-card {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 45%),
    linear-gradient(145deg, rgba(2, 8, 23, 0.98), rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 0.8rem;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.44);
  color: rgba(226, 232, 240, 0.9);
  display: none;
  gap: 0.42rem;
  left: 0;
  letter-spacing: 0;
  line-height: 1.38;
  min-width: min(19rem, 72vw);
  padding: 0.78rem 0.85rem;
  position: absolute;
  text-transform: none;
  top: calc(100% + 0.46rem);
  z-index: 40;
}

.schedule-builder-context-help-card strong {
  color: #f8fafc;
  font-size: 0.84rem;
}

.schedule-builder-context-help-card span,
.schedule-builder-context-help-card em {
  color: rgba(203, 213, 225, 0.88);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
}

.schedule-builder-context-help-card em {
  color: rgba(125, 211, 252, 0.9);
}

.schedule-builder-context-help:hover .schedule-builder-context-help-card,
.schedule-builder-context-help:focus-within .schedule-builder-context-help-card {
  display: grid;
}

.schedule-builder-context-guide-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: -0.12rem;
}

.schedule-builder-learning-link,
.secondary-button.schedule-builder-learning-link {
  align-items: center;
  background: rgba(8, 47, 73, 0.26);
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 999px;
  color: rgba(186, 230, 253, 0.95);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 1.95rem;
  padding: 0.36rem 0.68rem;
  text-decoration: none;
  white-space: nowrap;
}

.schedule-builder-learning-link:hover,
.schedule-builder-learning-link:focus-visible,
.secondary-button.schedule-builder-learning-link:hover,
.secondary-button.schedule-builder-learning-link:focus-visible {
  background: rgba(14, 116, 144, 0.28);
  border-color: rgba(125, 211, 252, 0.52);
  color: #f8fafc;
  outline: none;
}

.schedule-builder-keep-fresh-options .schedule-builder-learning-link {
  flex: 1 0 100%;
  justify-self: flex-start;
  width: fit-content;
}

.schedule-builder-section-title small {
  color: rgba(203, 213, 225, 0.78);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.12rem;
}

.schedule-builder-section-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  justify-content: flex-end;
}

.schedule-builder-section-list {
  display: grid;
  gap: 0.42rem;
}

.schedule-builder-advanced-item-row,
.schedule-builder-advanced-context-row {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 0.62rem;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.55rem;
  padding: 0.5rem 0.58rem;
}

.schedule-builder-advanced-block-row {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12), transparent 14rem),
    linear-gradient(135deg, rgba(22, 36, 67, 0.78), rgba(9, 17, 34, 0.88));
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 0.78rem;
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
}

.schedule-builder-advanced-block-row.is-collapsed {
  gap: 0;
  padding: 0.38rem;
}

.schedule-builder-advanced-block-row.is-selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.24), transparent 15rem),
    linear-gradient(135deg, rgba(18, 58, 75, 0.9), rgba(10, 21, 39, 0.9));
  border-color: rgba(45, 212, 191, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.16),
    inset 4px 0 0 rgba(45, 212, 191, 0.88),
    0 0 0 2px rgba(45, 212, 191, 0.14),
    0 18px 45px rgba(45, 212, 191, 0.16);
}

.schedule-builder-advanced-block-row.is-drop-preview {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.36), transparent 15rem),
    linear-gradient(135deg, rgba(30, 64, 120, 0.94), rgba(8, 20, 40, 0.94));
  border-color: rgba(125, 211, 252, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(240, 249, 255, 0.22),
    0 0 0 3px rgba(56, 189, 248, 0.24),
    0 0 42px rgba(56, 189, 248, 0.24),
    0 22px 58px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.schedule-builder-advanced-block-row.is-focused {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.28), transparent 17rem),
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.2), transparent 14rem),
    linear-gradient(135deg, rgba(12, 41, 60, 0.94), rgba(10, 18, 38, 0.96));
  border-color: rgba(125, 211, 252, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.12),
    0 0 0 2px rgba(45, 212, 191, 0.12),
    0 22px 62px rgba(2, 8, 23, 0.38);
  min-height: min(38rem, calc(100vh - 18rem));
}

.schedule-builder-advanced-block-row.is-focus-sibling {
  opacity: 0.76;
}

.schedule-builder-advanced-block-row.is-focus-sibling .schedule-builder-advanced-block-header {
  border-color: rgba(148, 163, 184, 0.1);
}

.schedule-builder-advanced-block-header {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.22), transparent 13rem),
    linear-gradient(135deg, rgba(13, 42, 61, 0.94), rgba(18, 24, 54, 0.88));
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 0.72rem;
  box-shadow:
    inset 0 0 0 1px rgba(240, 253, 250, 0.05),
    0 12px 28px rgba(2, 8, 23, 0.18);
  cursor: pointer;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, auto);
  min-height: 4.25rem;
  padding: 0.66rem 0.72rem;
}

.schedule-builder-advanced-block-row.is-collapsed .schedule-builder-advanced-block-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.18), transparent 11rem),
    linear-gradient(135deg, rgba(13, 36, 58, 0.9), rgba(16, 24, 46, 0.84));
  min-height: 3.75rem;
}

.schedule-builder-advanced-row-main {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-height: 2.85rem;
  min-width: 0;
  padding: 0.12rem 0;
  text-align: left;
}

.schedule-builder-advanced-item-row,
.schedule-builder-advanced-context-row {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.schedule-builder-advanced-row-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.schedule-builder-advanced-row-copy strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.96rem;
  line-height: 1.16;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.schedule-builder-advanced-row-copy small,
.schedule-builder-advanced-row-copy em {
  color: rgba(203, 213, 225, 0.75);
  font-size: 0.72rem;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-advanced-row-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  justify-content: flex-end;
  max-width: min(100%, 28rem);
}

.schedule-builder-collapse-toggle {
  font-weight: 950;
  min-width: 2.1rem;
  padding-inline: 0.5rem;
}

.schedule-builder-focus-toggle {
  border-color: rgba(125, 211, 252, 0.32);
}

.schedule-builder-advanced-block-header .schedule-builder-icon-button {
  min-width: 2.7rem;
  padding-inline: 0.62rem;
}

.schedule-builder-advanced-block-row.is-focused .schedule-builder-focus-toggle {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(139, 92, 246, 0.24));
  border-color: rgba(153, 246, 228, 0.48);
  color: rgba(248, 250, 252, 0.98);
}

.schedule-builder-focus-banner {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(45, 212, 191, 0.08));
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 0.62rem;
  display: grid;
  gap: 0.12rem;
  padding: 0.58rem 0.66rem;
}

.schedule-builder-focus-banner strong {
  color: rgba(224, 242, 254, 0.98);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-builder-focus-banner span {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.78rem;
  line-height: 1.35;
}

.schedule-builder-advanced-block-items {
  background: rgba(2, 8, 20, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 0.62rem;
  display: grid;
  gap: 0.38rem;
  margin-top: 0.18rem;
  max-height: 13rem;
  overflow: auto;
  padding: 0.46rem;
  scrollbar-gutter: stable;
}

.schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-block-items {
  align-content: start;
  background:
    linear-gradient(135deg, rgba(2, 8, 20, 0.38), rgba(8, 18, 34, 0.5));
  border-color: rgba(125, 211, 252, 0.2);
  gap: 0.46rem;
  max-height: clamp(22rem, 48vh, 35rem);
  min-height: 18rem;
  padding: 0.62rem;
}

.schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-item-row {
  min-height: 4.25rem;
}

.schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy strong,
.schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy small,
.schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy em {
  white-space: normal;
}

.schedule-builder-drop-hint {
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 0.55rem;
  color: rgba(203, 213, 225, 0.75);
  margin: 0;
  padding: 0.55rem;
  text-align: center;
}

.schedule-builder-permanent-drop-target {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.42), rgba(2, 8, 20, 0.38));
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 0.68rem;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  display: grid;
  gap: 0.18rem;
  padding: 0.72rem;
  text-align: left;
  width: 100%;
}

.schedule-builder-block-drop-target {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 116, 144, 0.08));
  border: 1px dashed rgba(96, 165, 250, 0.46);
  border-radius: 0.62rem;
  color: rgba(226, 232, 240, 0.9);
  cursor: copy;
  display: grid;
  gap: 0.12rem;
  padding: 0.56rem 0.68rem;
  text-align: left;
  width: 100%;
}

.schedule-builder-block-drop-target strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schedule-builder-block-drop-target span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.72rem;
}

.schedule-builder-advanced-block-row.is-focused .schedule-builder-block-drop-target {
  border-color: rgba(125, 211, 252, 0.62);
  min-height: 4.2rem;
  padding: 0.76rem 0.82rem;
}

.schedule-builder-advanced-block-row.is-drop-preview .schedule-builder-block-drop-target {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(125, 211, 252, 0.9);
  box-shadow: inset 0 0 0 1px rgba(240, 249, 255, 0.14);
}

.schedule-builder-permanent-drop-target strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.84rem;
}

.schedule-builder-permanent-drop-target span {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.76rem;
  line-height: 1.35;
}

.schedule-builder-practice-blocks-section .schedule-builder-permanent-drop-target {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(96, 165, 250, 0.36);
}

.schedule-builder-scheduled-items-section .schedule-builder-permanent-drop-target {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(45, 212, 191, 0.35);
}

.schedule-builder-events-notes-section .schedule-builder-permanent-drop-target {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.34);
}

.schedule-builder-compact-empty {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.36), rgba(2, 8, 20, 0.32));
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 0.68rem;
  column-gap: 0.82rem;
  display: grid;
  grid-template-columns: auto minmax(0, 24rem);
  justify-content: center;
  min-height: clamp(3.9rem, 6.5vh, 4.9rem);
  padding: 0.62rem 0.82rem;
  row-gap: 0.08rem;
  text-align: left;
}

.schedule-builder-compact-empty strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.88rem;
  line-height: 1.2;
}

.schedule-builder-compact-empty p {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.8rem;
  margin: 0;
}

.schedule-builder-empty-icon {
  grid-row: 1 / 3;
  opacity: 0.82;
}

.schedule-builder-empty-icon-blocks {
  display: grid;
  gap: 0.14rem;
  grid-template-columns: repeat(2, 0.62rem);
  grid-template-rows: repeat(2, 0.62rem);
}

.schedule-builder-empty-icon-blocks span {
  border: 2px solid rgba(191, 219, 254, 0.74);
  border-radius: 0.16rem;
}

.schedule-builder-empty-icon-calendar {
  border: 2px solid rgba(191, 219, 254, 0.74);
  border-radius: 0.28rem;
  height: 1.72rem;
  position: relative;
  width: 1.72rem;
}

.schedule-builder-empty-icon-calendar::before {
  background: rgba(191, 219, 254, 0.74);
  content: "";
  height: 2px;
  left: 0.24rem;
  position: absolute;
  right: 0.24rem;
  top: 0.48rem;
}

.schedule-builder-empty-icon-calendar::after {
  background: rgba(191, 219, 254, 0.74);
  border-radius: 999px;
  box-shadow: 0.58rem 0 rgba(191, 219, 254, 0.74);
  content: "";
  height: 0.18rem;
  left: 0.42rem;
  position: absolute;
  top: 1rem;
  width: 0.18rem;
}

.schedule-builder-library-panel {
  align-self: stretch;
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-library-panel #scheduleBuilderCatalogBrowser,
.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-library-panel .schedule-builder-catalog-browser {
  display: grid;
  gap: 0.5rem;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-library-panel .schedule-builder-catalog-browser:has(.schedule-builder-selection-summary) {
  grid-template-rows: auto minmax(0, 1fr);
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-library-panel .schedule-builder-picker-list {
  align-content: start;
  grid-auto-rows: max-content;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 0.08rem;
  scrollbar-gutter: stable;
}

.schedule-builder-advanced-footer {
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(20, 15, 47, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.8rem;
  display: flex;
  gap: 1rem;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 0.7rem 0.82rem;
}

.schedule-builder-today-summary {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  min-height: 2.3rem;
}

.schedule-builder-today-summary strong {
  color: #86efac;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-builder-today-summary span {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.84rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0.42rem 0 0.5rem;
}

.schedule-builder-library-tabs button {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  min-height: 1.95rem;
  padding: 0.38rem 0.72rem;
}

.schedule-builder-library-tabs button.is-selected {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.78), rgba(139, 92, 246, 0.82));
  border-color: rgba(196, 181, 253, 0.38);
  color: #fff;
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.12);
}

.schedule-builder-library-sort {
  align-items: center;
  display: inline-flex;
  gap: 0.38rem;
  min-width: 7.4rem;
}

.schedule-builder-library-sort span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.schedule-builder-library-sort select {
  min-width: 4.5rem;
}

.schedule-builder-available-heading {
  align-items: start !important;
  border-bottom: 0;
  display: grid !important;
  gap: 0.24rem;
  grid-template-areas:
    "title"
    "subtitle"
    "toggle";
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch !important;
  justify-items: start;
  margin-bottom: 0.45rem;
  padding-bottom: 0.12rem;
}

.schedule-builder-available-titlebar {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  grid-area: title;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

.schedule-builder-available-titlebar p {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  line-height: 1.1;
  margin: 0;
  min-width: 0;
}

.schedule-builder-available-titlebar p em {
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 999px;
  color: #99f6e4;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  padding: 0.2rem 0.42rem;
}

.schedule-builder-available-titlebar .schedule-builder-small-button {
  flex: 0 0 auto;
  min-height: 1.82rem;
  padding: 0.26rem 0.54rem;
  white-space: nowrap;
}

.schedule-builder-available-subtitle {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.76rem;
  grid-area: subtitle;
  line-height: 1.25;
  margin: 0;
}

.schedule-builder-available-header-actions {
  display: contents;
}

.schedule-builder-selection-summary {
  align-items: center;
  background: rgba(8, 47, 73, 0.32);
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 0.58rem;
  color: #f8fbff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.36rem 0.46rem;
}

.schedule-builder-selection-summary strong {
  color: #ccfbf1;
  font-size: 0.78rem;
  font-weight: 950;
}

.schedule-builder-selection-summary span {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  justify-content: flex-end;
}

.schedule-builder-selection-summary .schedule-builder-small-button {
  min-height: 1.9rem;
  padding: 0.28rem 0.5rem;
}

.schedule-builder-hide-scheduled-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.32rem;
  color: rgba(226, 232, 240, 0.76);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.34rem;
  grid-area: toggle;
  height: auto;
  justify-content: flex-start;
  justify-self: end;
  line-height: 1.1;
  min-height: 1.15rem;
  padding: 0.08rem 0.1rem;
  width: auto;
}

.schedule-builder-hide-scheduled-toggle input {
  accent-color: #14b8a6;
  flex: 0 0 auto;
  height: 0.9rem;
  margin: 0;
  min-height: 0;
  padding: 0;
  transform: scale(0.86);
  width: 0.9rem;
}

.schedule-builder-picker-row.is-scheduled {
  border-color: rgba(45, 212, 191, 0.28);
}

.schedule-builder-picker-row.is-selected,
.schedule-builder-picker-row.is-selected.is-scheduled {
  border-color: rgba(125, 249, 232, 0.86);
}

.schedule-builder-picker-row.is-selected::before {
  background: #2dd4bf;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.14), 0 0 18px rgba(45, 212, 191, 0.36);
  content: "";
  height: 0.58rem;
  left: 0.42rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.58rem;
}

.schedule-builder-picker-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  margin-top: 0.18rem;
}

.schedule-builder-picker-badges em {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 999px;
  color: #ccfbf1;
  display: inline-flex;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.15;
  min-height: 1.38rem;
  padding: 0.22rem 0.5rem;
}

.schedule-builder-picker-badges em.schedule-builder-selection-indicator {
  background: rgba(219, 234, 254, 0.18);
  border-color: rgba(191, 219, 254, 0.48);
  color: #dbeafe;
}

.schedule-builder-picker-row.is-selected .schedule-builder-picker-badges em:not(.schedule-builder-selection-indicator) {
  background: rgba(8, 47, 73, 0.62);
  border-color: rgba(153, 246, 228, 0.34);
  color: rgba(240, 253, 250, 0.92);
}

.schedule-builder-screen .schedule-builder-picker-row.is-selected {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.34), rgba(37, 99, 235, 0.22)),
    rgba(9, 28, 44, 0.94) !important;
  background-color: rgba(20, 184, 166, 0.22) !important;
  border-color: rgba(125, 249, 232, 0.86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(125, 249, 232, 0.4),
    inset 4px 0 0 rgba(45, 212, 191, 0.92),
    0 0 0 1px rgba(45, 212, 191, 0.26),
    0 14px 30px rgba(8, 47, 73, 0.32) !important;
}

.schedule-builder-screen .schedule-builder-picker-row.is-selected > .schedule-builder-mini-icon {
  background: rgba(204, 251, 241, 0.18) !important;
  border-color: rgba(153, 246, 228, 0.6) !important;
  color: #f8fbff !important;
}

.schedule-builder-screen .schedule-builder-picker-row.is-selected .schedule-builder-picker-copy strong {
  color: #fff !important;
}

.schedule-builder-screen .schedule-builder-picker-row.is-selected .schedule-builder-picker-copy small {
  color: rgba(219, 234, 254, 0.9) !important;
}

.schedule-builder-screen .schedule-builder-picker-row.has-badges,
.schedule-builder-screen .schedule-builder-picker-row.is-selected,
.schedule-builder-screen .schedule-builder-picker-row.is-scheduled {
  min-height: 3.7rem !important;
  padding-block: 0.4rem !important;
}

.schedule-builder-block-choice-list {
  display: grid;
  gap: 0.5rem;
  min-width: min(28rem, 82vw);
}

.schedule-builder-block-choice {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.72rem;
  color: #f8fbff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0.68rem 0.78rem;
  text-align: left;
}

.schedule-builder-block-choice:hover,
.schedule-builder-block-choice:focus-visible {
  border-color: rgba(94, 234, 212, 0.42);
  background: rgba(20, 184, 166, 0.14);
}

.schedule-builder-block-choice strong,
.schedule-builder-block-choice small {
  display: block;
}

.schedule-builder-block-choice small {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.78rem;
  margin-top: 0.14rem;
}

.schedule-builder-archive-picker-shell,
.schedule-builder-archive-picker {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal {
  background:
    radial-gradient(circle at 25% 10%, rgba(45, 212, 191, 0.1), transparent 21rem),
    radial-gradient(circle at 82% 4%, rgba(99, 102, 241, 0.08), transparent 20rem),
    rgba(4, 7, 13, 0.72) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .modal-card.guidance-modal-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 13rem),
    linear-gradient(145deg, rgba(13, 27, 45, 0.98), rgba(5, 12, 25, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.42) !important;
  color: #f8fafc !important;
  max-width: min(46rem, calc(100vw - 2rem)) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .modal-header,
#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-message,
#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions {
  background: transparent !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .modal-header {
  border-bottom-color: rgba(125, 211, 252, 0.14) !important;
  padding-bottom: 0.75rem !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .modal-header .eyebrow {
  color: rgba(125, 211, 252, 0.84) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal #guidanceModalTitle {
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  line-height: 1.05 !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-message {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  padding-bottom: 0.45rem !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-body {
  display: grid !important;
  gap: 0.5rem !important;
  padding-top: 0.6rem !important;
}

.unarchive-toolbar {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 10rem);
}

.unarchive-toolbar input,
.unarchive-toolbar select {
  background: rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 0.55rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 0.86rem !important;
  min-height: 2.25rem;
  padding: 0.42rem 0.58rem;
  width: 100%;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

.unarchive-toolbar input::placeholder {
  color: rgba(148, 163, 184, 0.62) !important;
  -webkit-text-fill-color: rgba(148, 163, 184, 0.62) !important;
}

.unarchive-toolbar input:focus,
.unarchive-toolbar select:focus {
  border-color: rgba(94, 234, 212, 0.52) !important;
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  outline: none !important;
}

.unarchive-toolbar select option {
  background: #0f172a !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

.unarchive-list {
  background: rgba(2, 8, 23, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.72rem;
  display: grid;
  gap: 0;
  max-height: min(54vh, 25rem);
  overflow: auto;
  padding: 0;
  scrollbar-color: rgba(94, 234, 212, 0.34) rgba(15, 23, 42, 0.5);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.unarchive-selection-summary {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0 0.05rem;
}

.unarchive-row {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 2rem 1.75rem minmax(0, 1fr);
  min-height: 3rem;
  padding: 0.45rem 0.65rem;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.unarchive-row + .unarchive-row {
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.unarchive-row:hover {
  background: rgba(148, 163, 184, 0.045);
}

.unarchive-row.is-selected {
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.2), rgba(99, 102, 241, 0.08)),
    rgba(15, 23, 42, 0.38);
  box-shadow:
    inset 3px 0 0 rgba(45, 212, 191, 0.88),
    inset 0 0 0 1px rgba(94, 234, 212, 0.16);
}

.unarchive-row:focus-within {
  box-shadow:
    inset 3px 0 0 rgba(45, 212, 191, 0.86),
    0 0 0 1px rgba(45, 212, 191, 0.22);
}

.unarchive-check-cell {
  align-items: center;
  display: inline-grid;
  height: 1.25rem;
  justify-content: center;
  justify-self: center;
  position: relative;
  width: 1.25rem;
}

.unarchive-checkbox {
  cursor: pointer;
  height: 1.25rem !important;
  inset: 0;
  margin: 0;
  min-height: 1.25rem !important;
  min-width: 1.25rem !important;
  opacity: 0;
  padding: 0 !important;
  position: absolute;
  width: 1.25rem !important;
  z-index: 2;
}

.unarchive-checkmark {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 8, 23, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.28rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: inline-flex;
  height: 1rem;
  justify-content: center;
  pointer-events: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
  width: 1rem;
}

.unarchive-checkmark::after {
  border: solid rgba(255, 255, 255, 0.96);
  border-width: 0 2px 2px 0;
  content: "";
  height: 0.42rem;
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
  transition: opacity 120ms ease, transform 120ms ease;
  width: 0.2rem;
}

.unarchive-checkbox:checked + .unarchive-checkmark {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.98), rgba(99, 102, 241, 0.92));
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.unarchive-checkbox:checked + .unarchive-checkmark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.unarchive-checkbox:focus-visible + .unarchive-checkmark {
  outline: 2px solid rgba(94, 234, 212, 0.56);
  outline-offset: 2px;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-row {
  background: rgba(248, 253, 252, 0.42) !important;
  box-shadow: none !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-row:hover {
  background: rgba(229, 246, 246, 0.72) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-row.is-selected {
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.34), rgba(14, 165, 233, 0.16)),
    rgba(224, 248, 247, 0.92) !important;
  box-shadow:
    inset 4px 0 0 rgba(15, 118, 110, 0.76),
    inset 0 0 0 1px rgba(15, 118, 110, 0.3) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-checkmark {
  background: #ffffff !important;
  border-color: rgba(81, 111, 121, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 3px rgba(12, 74, 80, 0.14) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-checkbox:checked + .unarchive-checkmark {
  background: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.88) !important;
  box-shadow:
    0 0 0 3px rgba(45, 212, 191, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-checkmark::after {
  border-color: #0f766e !important;
}

.unarchive-type-badge {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(99, 102, 241, 0.12)),
    rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 0.42rem;
  color: rgba(226, 232, 240, 0.94);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 850;
  height: 1.55rem;
  justify-content: center;
  line-height: 1;
  width: 1.55rem;
}

.unarchive-row-main {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.unarchive-row-title {
  color: rgba(248, 250, 252, 0.95);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.unarchive-row-meta {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.73rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .schedule-builder-field-note,
#guidanceModalBackdrop.is-schedule-archive-picker-modal .unarchive-list > .schedule-builder-field-note {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(232, 247, 247, 0.9)) !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  border-radius: 0.62rem !important;
  color: #23414a !important;
  font-size: 0.9rem !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0.78rem 0.9rem !important;
  -webkit-text-fill-color: #23414a !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions .secondary-button {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 0.5rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  color: #263d45 !important;
  font-weight: 720 !important;
  min-height: 1.95rem !important;
  padding: 0.34rem 0.62rem !important;
  -webkit-text-fill-color: #263d45 !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions button:not(.secondary-button) {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.98), rgba(20, 184, 166, 0.94)) !important;
  border: 1px solid rgba(15, 118, 110, 0.32) !important;
  border-radius: 0.52rem !important;
  box-shadow:
    0 10px 22px rgba(15, 118, 110, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  color: #063331 !important;
  font-weight: 760 !important;
  min-height: 1.98rem !important;
  padding: 0.34rem 0.74rem !important;
  -webkit-text-fill-color: #063331 !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions button:disabled {
  background: rgba(221, 235, 237, 0.86) !important;
  border-color: rgba(15, 118, 110, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  color: rgba(42, 63, 72, 0.86) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(42, 63, 72, 0.86) !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions .secondary-button:hover,
#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions .secondary-button:focus-visible {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 118, 110, 0.36) !important;
  color: #17282d !important;
  outline: none !important;
  -webkit-text-fill-color: #17282d !important;
}

@media (max-width: 640px) {
  .schedule-builder-available-titlebar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .schedule-builder-selection-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .unarchive-toolbar {
    grid-template-columns: 1fr;
  }

  .unarchive-row {
    grid-template-columns: 2rem 1.75rem minmax(0, 1fr);
  }
}

.schedule-builder-library-group {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.78rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
}

.schedule-builder-library-group + .schedule-builder-library-group {
  margin-top: 0.52rem;
}

.schedule-builder-library-group header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem 0.18rem;
}

.schedule-builder-library-group header strong {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.schedule-builder-library-group header span {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.72rem;
  font-weight: 900;
}

.schedule-builder-library-group-drill {
  border-color: rgba(96, 165, 250, 0.24);
}

.schedule-builder-library-group-song {
  border-color: rgba(34, 197, 94, 0.24);
}

.schedule-builder-library-group-activity {
  border-color: rgba(168, 85, 247, 0.24);
}

.schedule-builder-library-group-solo {
  border-color: rgba(245, 158, 11, 0.26);
}

.schedule-builder-library-group-list {
  display: grid;
  gap: 0.34rem;
}

.schedule-builder-advanced-footer p {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.8rem;
  margin: 0;
}

.schedule-builder-advanced-footer > div {
  display: inline-flex;
  gap: 0.55rem;
}

.schedule-builder-hidden-schedule-name,
.schedule-builder-advanced-workbench > [hidden] {
  display: none !important;
}

@media (max-width: 1120px) {
  .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-advanced-workbench {
    grid-template-columns: 1fr;
  }

  .schedule-builder-advanced-sections,
  .schedule-builder-library-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .schedule-builder-today-summary {
    grid-template-columns: 1fr auto auto;
  }

  .schedule-builder-today-summary strong {
    grid-column: 1 / -1;
  }
}

.schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-block-card.is-selected:not(.is-expanded) {
  padding-bottom: 0.75rem;
}

.schedule-builder-item-expanded-header {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
}

.schedule-builder-item-expanded-header strong {
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* P10OS Schedule builder drawer: inspect block contents without opening settings. */
.schedule-builder-block-drawer-shell {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 180ms ease;
  z-index: 120;
}

body.schedule-builder-block-drawer-open .schedule-builder-block-drawer-shell {
  opacity: 1;
  pointer-events: auto;
}

.schedule-builder-block-drawer-scrim {
  background: rgba(2, 6, 23, 0.48);
  inset: 0;
  position: absolute;
}

.schedule-builder-block-drawer {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 20rem),
    linear-gradient(150deg, rgba(31, 41, 76, 0.98), rgba(12, 22, 40, 0.98));
  border-right: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 28px 0 60px rgba(0, 0, 0, 0.36);
  color: rgba(226, 232, 240, 0.92);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.8rem;
  height: 100%;
  left: 0;
  max-width: min(32rem, 92vw);
  overflow: hidden;
  padding: 1.15rem;
  position: absolute;
  top: 0;
  transform: translateX(-102%);
  transition: transform 220ms ease;
  width: 32rem;
}

body.schedule-builder-block-drawer-open .schedule-builder-block-drawer {
  transform: translateX(0);
}

.schedule-builder-block-drawer-header {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.schedule-builder-block-drawer-header small {
  color: rgba(196, 181, 253, 0.82);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-builder-block-drawer-header h3 {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.05;
  margin: 0.08rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-block-drawer-summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(203, 213, 225, 0.78);
  margin: 0;
  padding-bottom: 0.7rem;
}

.schedule-builder-block-drawer-list {
  align-content: start;
  display: grid;
  gap: 0.62rem;
  list-style: none;
  margin: 0;
  overflow: auto;
  padding: 0 0.2rem 1rem 0;
}

.schedule-builder-block-drawer-item {
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.52));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.95rem;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4.35rem;
  padding: 0.72rem 0.78rem;
}

.schedule-builder-block-drawer-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.schedule-builder-block-drawer-copy strong,
.schedule-builder-block-drawer-copy small,
.schedule-builder-block-drawer-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-builder-block-drawer-copy strong {
  color: #f8fafc;
  font-size: 0.94rem;
}

.schedule-builder-block-drawer-copy small,
.schedule-builder-block-drawer-copy em {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.76rem;
  font-style: normal;
}

.schedule-builder-block-drawer-actions {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.schedule-builder-block-drawer-actions .practice-queue-workspace-icon-button {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  min-height: 2.15rem;
  min-width: 2.15rem;
  padding: 0;
}

.schedule-builder-block-drawer-actions .practice-queue-workspace-icon-button svg {
  fill: none;
  height: 1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1rem;
}

.schedule-builder-block-drawer-empty {
  background: rgba(15, 23, 42, 0.58);
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 0.95rem;
  color: rgba(203, 213, 225, 0.78);
  padding: 1rem;
}

.quick-start-modal-card {
  background:
    radial-gradient(circle at 8% -4%, rgba(59, 130, 246, 0.22), transparent 19rem),
    radial-gradient(circle at 88% 2%, rgba(45, 212, 191, 0.15), transparent 21rem),
    radial-gradient(circle at 55% 108%, rgba(124, 58, 237, 0.12), transparent 24rem),
    linear-gradient(145deg, rgba(13, 24, 43, 0.99), rgba(4, 12, 25, 0.99));
  border: 1px solid rgba(125, 211, 252, 0.2);
  box-shadow:
    0 30px 92px rgba(2, 8, 23, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 860px);
  max-width: min(1040px, calc(100vw - 48px));
  min-height: 0;
  overflow: hidden;
}

.quick-start-modal-backdrop {
  z-index: 12050;
}

.quick-start-modal-card .modal-header {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.11), rgba(45, 212, 191, 0.07)),
    rgba(15, 23, 42, 0.36) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
  display: grid !important;
  gap: 0.85rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0;
}

.quick-start-modal-card .modal-header h2 {
  color: rgba(248, 250, 252, 0.96) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96) !important;
}

.quick-start-modal-card .modal-header .section-note {
  color: rgba(203, 213, 225, 0.78) !important;
  font-weight: 460 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.78) !important;
}

.quick-start-modal-card .modal-header .eyebrow {
  color: rgba(125, 211, 252, 0.86) !important;
  -webkit-text-fill-color: rgba(125, 211, 252, 0.86) !important;
}

.quick-start-modal-card .modal-close-button {
  align-items: center !important;
  aspect-ratio: 1;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: 2.2rem !important;
  justify-content: center !important;
  justify-self: end;
  min-height: 2.2rem !important;
  min-width: 2.2rem !important;
  padding: 0 !important;
  width: 2.2rem !important;
}

.unscheduled-intent-tabs {
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.62), rgba(15, 23, 42, 0.34));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(2, 8, 23, 0.38);
  display: grid;
  gap: 0.36rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 1rem 0;
  overflow: clip;
  padding: 0.3rem;
}

.unscheduled-intent-tab {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.5), rgba(8, 17, 31, 0.56));
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(226, 236, 250, 0.82);
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  min-height: 3.55rem;
  padding: 0.6rem 0.85rem;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.unscheduled-intent-tab strong {
  color: #f8fafc;
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.14;
}

.unscheduled-intent-tab span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.78rem;
  line-height: 1.28;
}

.unscheduled-intent-tab:hover,
.unscheduled-intent-tab:focus-visible {
  background: rgba(30, 41, 59, 0.58);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08);
  outline: none;
}

.unscheduled-intent-tab.is-active {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.16), transparent 5.4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.68) 58%, rgba(20, 184, 166, 0.72));
  border-color: rgba(191, 219, 254, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.unscheduled-intent-tab.is-active span,
.unscheduled-intent-tab.is-active strong {
  color: #ffffff;
}

.unscheduled-intent-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.unscheduled-intent-panel {
  display: grid;
  gap: 0.82rem;
  min-height: 0;
}

.unscheduled-panel-hero {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.13), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(8, 17, 31, 0.66));
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
}

.unscheduled-panel-hero.is-log {
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.11), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(8, 17, 31, 0.66));
  border-color: rgba(251, 191, 36, 0.18);
}

.unscheduled-panel-hero > span {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.86), rgba(45, 212, 191, 0.68));
  border-radius: 13px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.98rem;
  font-weight: 900;
  height: 2.32rem;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.13);
  width: 2.32rem;
}

.unscheduled-panel-hero.is-log > span {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.88), rgba(20, 184, 166, 0.7));
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.12);
}

.unscheduled-panel-hero h3 {
  color: #f8fafc;
  font-size: clamp(1.04rem, 1.55vw, 1.24rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0.04rem 0 0.18rem;
}

.unscheduled-panel-hero p:not(.eyebrow) {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.86rem;
  line-height: 1.38;
  margin: 0;
  max-width: 48rem;
}

.unscheduled-modal-section {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.08), transparent 15rem),
    radial-gradient(circle at 96% 8%, rgba(124, 58, 237, 0.08), transparent 14rem),
    linear-gradient(145deg, rgba(25, 40, 70, 0.68), rgba(7, 15, 29, 0.78)),
    rgba(10, 18, 32, 0.8);
  border: 1px solid rgba(139, 170, 255, 0.2);
  border-radius: 18px;
  box-shadow:
    0 18px 48px rgba(2, 8, 23, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1rem;
}

.unscheduled-practice-section,
.unscheduled-library-section,
.unscheduled-log-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.unscheduled-section-header {
  margin-bottom: 0.85rem;
}

.unscheduled-section-header h3 {
  color: var(--text-primary);
  font-size: 1.04rem;
  font-weight: 850;
  letter-spacing: 0;
  margin: 3px 0 5px;
}

.unscheduled-section-header p:not(.eyebrow) {
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.unscheduled-form {
  display: grid;
  gap: 0.82rem;
}

.unscheduled-form label {
  color: rgba(203, 213, 225, 0.82);
  display: grid;
  font-size: 0.78rem;
  font-weight: 820;
  gap: 6px;
  letter-spacing: 0.02em;
}

.unscheduled-form label span small {
  color: var(--text-subtle);
  font-weight: 700;
  letter-spacing: 0;
}

.unscheduled-form input,
.unscheduled-form textarea,
.quick-start-controls input,
.quick-start-controls select {
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.68), rgba(15, 23, 42, 0.58));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 13px;
  color: var(--text-primary);
  font: inherit;
  min-height: 2.5rem;
  padding: 0.62rem 0.72rem;
  resize: vertical;
  width: 100%;
}

.quick-start-modal-card .quick-start-controls input,
.quick-start-modal-card .quick-start-controls select,
.quick-start-modal-card .unscheduled-form input,
.quick-start-modal-card .unscheduled-form textarea {
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.72), rgba(15, 23, 42, 0.6)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #f8fafc !important;
  color-scheme: dark;
  -webkit-text-fill-color: #f8fafc !important;
}

.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.8), rgba(15, 23, 42, 0.68)) !important;
  background-color: rgba(2, 8, 23, 0.82) !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 0 1000px rgba(2, 8, 23, 0.08) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput):focus {
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.84), rgba(15, 23, 42, 0.7)) !important;
  background-color: rgba(2, 8, 23, 0.86) !important;
  border-color: rgba(125, 211, 252, 0.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 0 4px rgba(14, 165, 233, 0.12) !important;
}

.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput)::-webkit-search-decoration,
.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput)::-webkit-search-cancel-button,
.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput)::-webkit-search-results-button,
.quick-start-modal-card :is(#quickStartSearchInput, #unscheduledManualLibrarySearchInput)::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.quick-start-modal-card .quick-start-controls input::placeholder,
.quick-start-modal-card .unscheduled-form input::placeholder,
.quick-start-modal-card .unscheduled-form textarea::placeholder {
  color: rgba(203, 213, 225, 0.52) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.52) !important;
}

.unscheduled-form input:focus,
.unscheduled-form textarea:focus,
.quick-start-controls input:focus,
.quick-start-controls select:focus {
  border-color: rgba(45, 212, 191, 0.48);
  outline: 2px solid rgba(45, 212, 191, 0.35);
}

.unscheduled-form button {
  justify-self: start;
}

.quick-start-controls {
  align-items: end;
  display: grid;
  flex: 0 0 auto;
  gap: 0.68rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(8.5rem, 0.7fr) minmax(8.5rem, 0.7fr);
  margin: 0;
}

.quick-start-controls label {
  color: rgba(203, 213, 225, 0.76);
  display: grid;
  font-size: 0.72rem;
  font-weight: 850;
  gap: 0.38rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quick-start-list {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 14rem),
    linear-gradient(145deg, rgba(2, 8, 23, 0.54), rgba(15, 23, 42, 0.38));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  display: grid;
  flex: 1 1 auto;
  gap: 0.56rem;
  max-height: none;
  min-height: 18.5rem;
  overflow-y: auto;
  padding: 0.58rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.quick-start-item {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.08), transparent 10rem),
    linear-gradient(145deg, rgba(18, 31, 54, 0.76), rgba(7, 15, 29, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  box-shadow:
    0 10px 26px rgba(2, 8, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.88rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quick-start-item:hover {
  border-color: rgba(94, 234, 212, 0.34);
  box-shadow:
    0 16px 36px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.quick-start-item-main {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.quick-start-type {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(20, 184, 166, 0.12));
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 999px;
  color: rgba(219, 234, 254, 0.94);
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.44rem;
  text-transform: uppercase;
  width: max-content;
}

.quick-start-item-main strong {
  color: #f8fafc;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.22;
}

.quick-start-item-main p {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.82rem;
  line-height: 1.36;
  margin: 0;
}

.quick-start-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.quick-start-item-meta span {
  background: rgba(2, 8, 23, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.66rem;
  font-weight: 760;
  padding: 0.16rem 0.42rem;
}

.quick-start-item-actions {
  align-items: center;
  display: flex;
  gap: 0.42rem;
}

.quick-start-run-button {
  background: linear-gradient(135deg, #2563eb, #7c3aed 58%, #14b8a6);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.26);
  color: #ffffff;
  cursor: pointer;
  font-weight: 850;
  min-height: 2.42rem;
  padding: 0.55rem 0.9rem;
}

.quick-start-run-button:hover,
.quick-start-run-button:focus-visible {
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.3);
  outline: 2px solid rgba(125, 211, 252, 0.32);
}

.quick-start-delete-button {
  align-items: center;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.7);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  height: 2.2rem;
  justify-content: center;
  width: 2.2rem;
}

.quick-start-delete-button:hover,
.quick-start-delete-button:focus-visible {
  border-color: rgba(248, 113, 113, 0.42);
  color: rgba(254, 202, 202, 0.95);
  outline: none;
}

.quick-start-empty {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.08), transparent 11rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.58), rgba(8, 17, 31, 0.68));
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  color: rgba(203, 213, 225, 0.78);
  display: flex;
  min-height: 5rem;
  padding: 1rem;
}

.unscheduled-choice-grid,
.unscheduled-log-choice-grid {
  display: grid;
  gap: 0.88rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.9rem;
}

.unscheduled-choice-card,
.unscheduled-log-choice {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.07), transparent 9rem),
    linear-gradient(145deg, rgba(17, 29, 51, 0.76), rgba(7, 15, 29, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: grid;
  gap: 0.86rem;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  min-height: 5.45rem;
  padding: 1.05rem 1.1rem;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.unscheduled-choice-card input,
.unscheduled-log-choice input {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(2, 8, 23, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 4px rgba(2, 8, 23, 0.88);
  height: 1.1rem;
  margin: 0;
  min-height: 1.1rem;
  min-width: 1.1rem;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  width: 1.1rem;
}

.unscheduled-choice-card input:checked,
.unscheduled-log-choice input:checked {
  background: #ffffff;
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow:
    inset 0 0 0 4px #2563eb,
    0 0 0 4px rgba(37, 99, 235, 0.16);
}

.unscheduled-choice-card strong,
.unscheduled-log-choice strong {
  color: #f8fafc;
  display: block;
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.24;
  white-space: nowrap;
}

.unscheduled-choice-card small,
.unscheduled-log-choice small {
  color: rgba(226, 236, 250, 0.76);
  display: block;
  font-size: 0.82rem;
  line-height: 1.38;
  margin-top: 0.28rem;
}

.unscheduled-choice-card:hover,
.unscheduled-choice-card:focus-within,
.unscheduled-log-choice:hover,
.unscheduled-log-choice:focus-within {
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow:
    0 14px 34px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.unscheduled-choice-card.is-selected,
.unscheduled-log-choice.is-selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.17), transparent 10rem),
    linear-gradient(145deg, rgba(14, 116, 144, 0.38), rgba(8, 17, 31, 0.82));
  border-color: rgba(56, 189, 248, 0.48);
  box-shadow:
    0 16px 36px rgba(14, 165, 233, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.unscheduled-practice-mode-panel {
  display: grid;
  gap: 0.76rem;
}

#quickStartLibraryPracticePanel,
#quickStartAdhocPracticePanel,
.unscheduled-log-mode-panel {
  background:
    linear-gradient(145deg, rgba(2, 8, 23, 0.34), rgba(15, 23, 42, 0.28));
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 0.78rem;
}

.unscheduled-log-form {
  max-width: 760px;
}

.unscheduled-one-time-form {
  max-width: 760px;
}

.unscheduled-one-time-form .primary-button {
  font-size: 0.95rem;
  min-height: 2.7rem;
  padding-inline: 1.15rem;
}

.quick-start-modal-card .speech-input-wrap {
  align-items: start;
}

.quick-start-modal-card .speech-mic-button {
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.28), rgba(30, 64, 175, 0.5));
  border-color: rgba(153, 246, 228, 0.48);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 8px 18px rgba(2, 6, 23, 0.32);
  color: #f0fdfa;
  height: 2.18rem;
  min-height: 2.18rem;
  min-width: 2.18rem;
  width: 2.18rem;
}

.quick-start-modal-card .speech-mic-button:hover,
.quick-start-modal-card .speech-mic-button:focus-visible {
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.46), rgba(79, 70, 229, 0.62));
  border-color: rgba(204, 251, 241, 0.76);
  color: #ffffff;
}

.quick-start-modal-card .speech-mic-button[data-speech-state="unsupported"] {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(148, 163, 184, 0.36);
  color: rgba(226, 232, 240, 0.78);
}

.quick-start-modal-card .speech-status-text {
  color: rgba(226, 236, 250, 0.82);
}

.unscheduled-log-mode-panel {
  display: grid;
  gap: 0.7rem;
}

.unscheduled-library-log-list {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.07), transparent 10rem),
    rgba(2, 8, 23, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  display: grid;
  gap: 0.52rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.52rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.quick-record-save-dialog,
.quick-record-attach-picker {
  display: grid;
  gap: 0.85rem;
}

.quick-record-save-prompt,
.quick-record-attach-search-card,
.quick-record-attach-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(241, 252, 252, 0.86), rgba(204, 226, 234, 0.82));
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 26px rgba(12, 74, 80, 0.08);
  color: #172b31;
}

.quick-record-save-prompt {
  display: grid;
  gap: 0.36rem;
  padding: 0.92rem;
}

.quick-record-save-prompt strong {
  color: #172b31;
  font-size: 0.98rem;
}

.quick-record-save-prompt p,
.quick-record-save-prompt span {
  color: #51686d;
  line-height: 1.45;
  margin: 0;
}

.quick-record-save-prompt span {
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  color: #0f766e;
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 850;
  justify-self: start;
  padding: 0.2rem 0.52rem;
}

.quick-record-current-target {
  align-items: center;
  background: rgba(204, 251, 241, 0.58);
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 13px;
  display: grid;
  gap: 0.12rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.62rem 0.72rem;
}

.quick-record-current-target span {
  color: #52686e;
  font-size: 0.74rem;
  font-weight: 760;
  margin-right: 0.32rem;
}

.quick-record-current-target strong {
  color: #16343a;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quick-record-current-target.is-unavailable {
  background: rgba(241, 245, 249, 0.72);
  border-color: rgba(100, 116, 139, 0.24);
}

.quick-record-save-status {
  border-radius: 10px;
  color: #52686e;
  font-size: 0.78rem;
  line-height: 1.38;
  margin: 0;
  padding: 0.38rem 0.52rem;
}

.quick-record-save-status[data-tone="error"] {
  background: rgba(254, 226, 226, 0.76);
  color: #991b1b;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions {
  align-items: stretch;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#guidanceModalBackdrop.is-quick-record-save-modal {
  z-index: 1200;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: min(92dvh, 46rem);
  overflow: hidden;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-body {
  min-height: 0;
  overflow-y: auto;
}

#guidanceModalBackdrop.is-quick-record-save-modal .speech-mic-button,
#guidanceModalBackdrop.is-quick-record-save-modal .speech-mic-button[data-speech-state] {
  background: linear-gradient(145deg, #2dd4bf, #4f46e5);
  border-color: rgba(15, 118, 110, 0.42);
  box-shadow: 0 7px 16px rgba(15, 118, 110, 0.22);
  color: #ffffff;
}

#guidanceModalBackdrop.is-quick-record-save-modal .speech-mic-button:hover,
#guidanceModalBackdrop.is-quick-record-save-modal .speech-mic-button:focus-visible {
  background: linear-gradient(145deg, #14b8a6, #4338ca);
  border-color: rgba(204, 251, 241, 0.78);
  color: #ffffff;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions button {
  margin: 0;
  min-height: 2.7rem;
  white-space: normal;
  width: 100%;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions [data-guidance-action-role="library-resource"] {
  grid-column: 1 / -1;
}

#guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions [data-guidance-action-role="danger"] {
  align-self: center;
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 2.2rem;
  width: auto;
}

@media (max-width: 560px) {
  #guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions [data-guidance-action-role="library-resource"],
  #guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions [data-guidance-action-role="danger"] {
    grid-column: 1;
  }

  #guidanceModalBackdrop.is-quick-record-save-modal .guidance-modal-actions [data-guidance-action-role="danger"] {
    justify-self: stretch;
    width: 100%;
  }
}

.quick-record-save-dialog .practice-log-field {
  background:
    linear-gradient(145deg, rgba(247, 254, 254, 0.86), rgba(219, 238, 242, 0.76));
  border-color: rgba(15, 118, 110, 0.22);
  color: #172b31;
}

.quick-record-save-dialog .practice-log-field > span {
  color: #1f3b41;
}

.quick-record-save-dialog :is(input, textarea) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 118, 110, 0.28);
  color: #172b31;
}

.quick-record-save-dialog :is(input, textarea)::placeholder {
  color: rgba(81, 104, 109, 0.68);
}

.quick-record-save-dialog :is(input, textarea):focus {
  border-color: rgba(15, 118, 110, 0.58);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

.quick-record-attach-search-card {
  display: grid;
  gap: 0.46rem;
  padding: 0.72rem;
}

.quick-record-attach-search-field {
  display: grid;
  gap: 0.36rem;
}

.quick-record-attach-search-field > span {
  color: #172b31;
  font-size: 0.8rem;
  font-weight: 850;
}

.quick-record-search-results {
  background:
    linear-gradient(145deg, rgba(248, 254, 254, 0.94), rgba(216, 236, 241, 0.9));
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 13px;
  display: grid;
  gap: 0.56rem;
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.6rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.quick-record-search-results[hidden] {
  display: none;
}

.quick-record-search-group {
  display: grid;
  gap: 0.34rem;
}

.quick-record-search-group-heading,
.quick-record-attach-heading {
  align-items: end;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
}

.quick-record-search-group-heading strong,
.quick-record-attach-heading strong {
  color: #172b31;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.quick-record-search-group-heading small,
.quick-record-attach-heading small {
  color: #51686d;
  font-size: 0.7rem;
  text-align: right;
}

.quick-record-search-group-list,
.quick-record-attach-section-list,
.quick-record-attach-list {
  display: grid;
  gap: 0.38rem;
}

.quick-record-attach-section {
  display: grid;
  gap: 0.46rem;
  padding: 0.64rem;
}

.quick-record-attach-item {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(20, 184, 166, 0.1));
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 11px;
  color: #172b31;
  cursor: pointer;
  display: grid;
  gap: 0.42rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.46rem 0.56rem;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  width: 100%;
}

.quick-record-attach-item:hover,
.quick-record-attach-item:focus-visible {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 10rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(125, 211, 252, 0.18));
  border-color: rgba(15, 118, 110, 0.38);
  box-shadow: 0 10px 22px rgba(12, 74, 80, 0.1);
  outline: none;
}

.quick-record-type-icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.78), rgba(14, 165, 233, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 950;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.quick-record-type-icon.is-song { background: linear-gradient(135deg, rgba(14, 165, 233, 0.8), rgba(6, 182, 212, 0.68)); }
.quick-record-type-icon.is-solo { background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(20, 184, 166, 0.68)); }
.quick-record-type-icon.is-activity { background: linear-gradient(135deg, rgba(245, 158, 11, 0.82), rgba(249, 115, 22, 0.66)); }

.quick-record-attach-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.quick-record-attach-title-row {
  align-items: center;
  display: flex;
  gap: 0.38rem;
  min-width: 0;
}

.quick-record-attach-title-row strong {
  color: #172b31;
  font-size: 0.84rem;
  font-weight: 880;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-record-attach-copy small {
  color: #51686d;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-record-attach-empty,
.quick-record-search-empty {
  color: #51686d;
  font-size: 0.78rem;
  line-height: 1.38;
  padding: 0.38rem 0.42rem;
}

.quick-record-search-empty {
  display: grid;
  gap: 0.16rem;
}

.quick-record-search-empty strong {
  color: #172b31;
}

.unscheduled-library-log-item {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(17, 29, 51, 0.7), rgba(8, 17, 31, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 14px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  display: grid;
  gap: 0.34rem 0.58rem;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  padding: 0.72rem 0.78rem;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  width: 100%;
}

.unscheduled-library-log-item .quick-start-type {
  grid-row: span 2;
}

.unscheduled-library-log-item strong,
.unscheduled-library-log-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unscheduled-library-log-item strong {
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 820;
}

.unscheduled-library-log-item small {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.74rem;
}

.unscheduled-library-log-item:hover,
.unscheduled-library-log-item:focus-visible,
.unscheduled-library-log-item.is-selected {
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 12px 28px rgba(20, 184, 166, 0.12);
  outline: none;
}

.unscheduled-library-log-item.is-selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 8rem),
    linear-gradient(145deg, rgba(19, 78, 74, 0.48), rgba(8, 17, 31, 0.78));
}

.unscheduled-log-field-grid,
.unscheduled-manual-form {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unscheduled-log-footnote {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0.78rem 0 0;
}

.unscheduled-log-form .primary-button {
  font-size: 0.95rem;
  min-height: 2.7rem;
  padding-inline: 1.15rem;
}

.unscheduled-log-form .primary-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.3);
  opacity: 0.48;
}

.quick-start-status {
  flex: 0 0 auto;
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 14rem),
    linear-gradient(145deg, rgba(12, 74, 80, 0.34), rgba(15, 23, 42, 0.72));
  border: 1px solid rgba(45, 212, 191, 0.34);
  border-radius: 15px;
  box-shadow:
    0 14px 34px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(224, 252, 247, 0.96);
  display: flex;
  font-size: 0.9rem;
  font-weight: 760;
  gap: 0.58rem;
  line-height: 1.35;
  margin: 0.92rem 1rem 0;
  min-height: 2.8rem;
  padding: 0.74rem 0.9rem;
  -webkit-text-fill-color: rgba(224, 252, 247, 0.96);
}

.quick-start-status[hidden],
.quick-start-status:empty {
  display: none;
}

.quick-start-status::before {
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.9), rgba(56, 189, 248, 0.78));
  border-radius: 999px;
  color: #052e2b;
  content: "✓";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 950;
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

.quick-start-status[data-tone="neutral"] {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.1), transparent 12rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.48), rgba(8, 17, 31, 0.72));
  border-color: rgba(125, 211, 252, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(203, 213, 225, 0.84);
  -webkit-text-fill-color: rgba(203, 213, 225, 0.84);
}

.quick-start-status[data-tone="neutral"]::before {
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(125, 211, 252, 0.28);
  color: rgba(186, 230, 253, 0.95);
  content: "i";
}

.quick-start-status[data-tone="error"] {
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.14), transparent 12rem),
    linear-gradient(145deg, rgba(69, 10, 10, 0.34), rgba(15, 23, 42, 0.72));
  border-color: rgba(248, 113, 113, 0.32);
  box-shadow:
    0 14px 34px rgba(127, 29, 29, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(254, 226, 226, 0.96);
  -webkit-text-fill-color: rgba(254, 226, 226, 0.96);
}

.quick-start-status[data-tone="error"]::before {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.9), rgba(251, 146, 60, 0.78));
  color: #450a0a;
  content: "!";
}

.quick-start-modal-footer {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem 1rem;
}

.quick-start-modal-footer .secondary-button {
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.84), rgba(15, 23, 42, 0.76));
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  box-shadow:
    0 10px 24px rgba(2, 8, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.92);
  font-weight: 820;
  min-height: 2.45rem;
  padding: 0.58rem 1.1rem;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.92);
}

.quick-start-modal-footer .secondary-button:hover,
.quick-start-modal-footer .secondary-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.42);
  box-shadow:
    0 14px 30px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
}

.scheduler-diagnostics-output {
  background: rgba(2, 8, 23, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  color: rgba(226, 232, 240, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  padding: 0.85rem;
  white-space: pre-wrap;
}

.alpha-feedback-button {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(139, 92, 246, 0.12)),
    rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 2rem;
  padding: 0.36rem 0.78rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.alpha-feedback-button:hover,
.alpha-feedback-button:focus-visible {
  border-color: rgba(45, 212, 191, 0.46);
  color: #ffffff;
  transform: translateY(-1px);
}

.alpha-feedback-utility-button {
  margin: 0;
  min-height: 2.15rem;
  white-space: nowrap;
  width: max-content;
}

.alpha-feedback-utility-button::before {
  content: "!";
  align-items: center;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 999px;
  color: rgba(125, 249, 233, 0.9);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 1.05rem;
  justify-content: center;
  margin-right: 0.42rem;
  width: 1.05rem;
}

body[data-current-screen="dashboard"] .header-utility-bar .alpha-feedback-utility-button {
  display: inline-flex !important;
  justify-self: start;
  margin-top: 0.2rem;
  order: 3;
  width: auto;
}

.alpha-feedback-choice-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: min(620px, calc(100vw - 48px));
}

.alpha-feedback-choice-grid button {
  background:
    linear-gradient(145deg, rgba(38, 52, 86, 0.78), rgba(8, 17, 31, 0.82)),
    rgba(10, 18, 32, 0.78);
  border: 1px solid rgba(139, 170, 255, 0.24);
  border-radius: 16px;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  text-align: left;
}

.alpha-feedback-choice-grid button:hover,
.alpha-feedback-choice-grid button:focus-visible {
  border-color: rgba(45, 212, 191, 0.46);
  box-shadow: 0 14px 36px rgba(45, 212, 191, 0.12);
}

.alpha-feedback-choice-grid strong {
  font-size: 1rem;
}

.alpha-feedback-choice-grid span,
.alpha-feedback-note,
.alpha-feedback-status {
  color: var(--text-muted);
  line-height: 1.45;
}

.alpha-feedback-form,
.alpha-feedback-result {
  display: grid;
  gap: 0.85rem;
  min-width: min(720px, calc(100vw - 48px));
}

#guidanceModalBackdrop.is-alpha-feedback-modal {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(96, 165, 250, 0.2)),
    rgba(4, 12, 30, 0.68);
}

#guidanceModalBackdrop.is-alpha-feedback-modal .guidance-modal-card {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(45, 212, 191, 0.26), transparent 34rem),
    radial-gradient(ellipse at 88% 8%, rgba(147, 197, 253, 0.24), transparent 30rem),
    linear-gradient(150deg, rgba(33, 62, 88, 0.98), rgba(15, 40, 66, 0.96) 54%, rgba(26, 42, 72, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.46) !important;
  box-shadow:
    0 28px 70px rgba(3, 7, 18, 0.45),
    0 0 52px rgba(45, 212, 191, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  display: flex;
  flex-direction: column;
  max-height: min(96vh, 56rem) !important;
  max-width: min(58rem, calc(100vw - 28px)) !important;
  overflow: hidden;
}

#guidanceModalBackdrop.is-alpha-feedback-modal .modal-header {
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.28), rgba(45, 212, 191, 0.18)),
    rgba(24, 48, 76, 0.72);
  border-bottom-color: rgba(125, 211, 252, 0.22);
}

#guidanceModalBackdrop.is-alpha-feedback-modal .guidance-modal-message {
  background: rgba(18, 46, 73, 0.72);
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  color: rgba(226, 236, 250, 0.84);
}

#guidanceModalBackdrop.is-alpha-feedback-modal .guidance-modal-body {
  background:
    linear-gradient(180deg, rgba(25, 58, 88, 0.56), rgba(13, 31, 54, 0.34));
  flex: 1 1 auto;
  max-height: none !important;
  min-height: 0;
  overflow: auto;
  padding-bottom: 1rem;
  scrollbar-gutter: stable;
}

#guidanceModalBackdrop.is-alpha-feedback-modal .guidance-modal-actions {
  background:
    linear-gradient(180deg, rgba(19, 46, 70, 0.62), rgba(17, 32, 55, 0.96)),
    rgba(17, 32, 55, 0.96);
  border-top: 1px solid rgba(125, 211, 252, 0.22);
  bottom: 0;
  margin-top: 0;
  padding-top: 1rem;
  position: sticky;
  z-index: 3;
}

.alpha-feedback-form label {
  color: var(--text-primary);
  display: grid;
  font-weight: 800;
  gap: 0.4rem;
}

.alpha-feedback-form label small {
  color: var(--text-subtle);
  font-weight: 700;
}

.alpha-feedback-permissions {
  background:
    linear-gradient(145deg, rgba(45, 212, 191, 0.28), rgba(96, 165, 250, 0.24)),
    rgba(25, 70, 100, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(8, 47, 73, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 0.48rem;
  padding: 0.85rem;
}

.alpha-feedback-permissions-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}

.alpha-feedback-permissions-header span {
  color: rgba(125, 249, 233, 0.86);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alpha-feedback-permissions-header strong {
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.82rem;
  font-weight: 760;
}

.alpha-feedback-mic-ready {
  color: rgba(240, 253, 250, 0.96);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.25;
  margin: 0;
}

.alpha-feedback-mic-copy {
  color: rgba(226, 236, 250, 0.82);
  line-height: 1.4;
  margin: 0;
}

.alpha-feedback-mic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.alpha-feedback-mic-actions button[hidden],
.alpha-feedback-mic-message:empty {
  display: none;
}

.alpha-feedback-voice-wrap {
  gap: 0.34rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.alpha-feedback-voice-wrap .speech-mic-button {
  margin-top: 0.48rem;
}

.alpha-feedback-voice-wrap .alpha-feedback-dictation-status {
  color: rgba(148, 163, 184, 0.92);
  font-size: 0.74rem;
  padding-left: 0.05rem;
}

.alpha-feedback-form textarea,
.alpha-feedback-report-preview {
  background:
    linear-gradient(180deg, rgba(26, 58, 87, 0.92), rgba(13, 35, 62, 0.88)),
    rgba(18, 43, 70, 0.9);
  border: 1px solid rgba(171, 211, 239, 0.42);
  border-radius: 14px;
  color: rgba(226, 232, 240, 0.94);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.45;
  padding: 0.85rem;
  resize: vertical;
  width: 100%;
}

.alpha-feedback-form textarea::placeholder {
  color: rgba(203, 213, 225, 0.64);
  font-weight: 400;
}

.alpha-feedback-form textarea:focus,
.alpha-feedback-report-preview:focus {
  border-color: rgba(94, 234, 212, 0.58);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
  outline: 2px solid rgba(45, 212, 191, 0.24);
}

.alpha-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.alpha-feedback-report-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  max-height: 45vh;
  min-height: 18rem;
  overflow: auto;
  white-space: pre;
}

.unscheduled-manual-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unscheduled-manual-form label:nth-child(n + 3),
.unscheduled-manual-form button {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .quick-start-modal-card {
    max-height: calc(100vh - 28px);
    max-width: calc(100vw - 28px);
  }

  .unscheduled-intent-tabs,
  .quick-start-controls,
  .unscheduled-choice-grid,
  .unscheduled-log-choice-grid,
  .unscheduled-log-field-grid {
    grid-template-columns: 1fr;
  }

  .unscheduled-intent-tabs {
    margin-inline: 0.78rem;
  }

  .unscheduled-intent-workspace {
    padding-inline: 0.78rem;
  }

  .unscheduled-panel-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .quick-start-list {
    max-height: 340px;
  }

  .quick-start-item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .quick-start-item-actions {
    justify-content: space-between;
  }

  .unscheduled-choice-card strong,
  .unscheduled-log-choice strong {
    white-space: normal;
  }

  .alpha-feedback-choice-grid {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .alpha-feedback-form,
  .alpha-feedback-result {
    min-width: 0;
  }

  .alpha-feedback-permissions-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* P10PX practice quick polish: keep timer controls visible and make progress easier to notice. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] #p03iTimerCard {
    padding-bottom: 0.86rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-rail {
    align-content: stretch !important;
    padding-bottom: 0.12rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right {
    align-items: stretch !important;
    gap: 0.34rem !important;
    padding-bottom: 0.08rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-action-row > button,
  body[data-current-screen="dashboard"] #p03iTimerCard .p05q-timer-right > button {
    box-sizing: border-box !important;
    min-height: 2.12rem !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link {
    align-items: center !important;
    background:
      radial-gradient(circle at 18% 18%, rgba(250, 204, 21, 0.28), transparent 38%),
      linear-gradient(135deg, rgba(124, 58, 237, 0.44), rgba(14, 165, 233, 0.30) 58%, rgba(20, 184, 166, 0.32)) !important;
    border: 1px solid rgba(129, 230, 217, 0.42) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.045) inset !important;
    color: rgba(250, 252, 255, 0.98) !important;
    display: inline-flex !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    gap: 0.46rem !important;
    justify-content: flex-start !important;
    letter-spacing: 0 !important;
    min-height: 2.9rem !important;
    min-width: 10.25rem !important;
    padding: 0.64rem 0.82rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-rail-progress-link::before {
    align-items: center;
    background: rgba(2, 6, 23, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    content: "↗";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.88rem;
    height: 1.55rem;
    justify-content: center;
    opacity: 0.95;
    width: 1.55rem;
  }

  .practice-rail-progress .practice-rail-progress-link {
    align-items: center !important;
    background:
      radial-gradient(circle at 18% 18%, rgba(250, 204, 21, 0.28), transparent 38%),
      linear-gradient(135deg, rgba(124, 58, 237, 0.44), rgba(14, 165, 233, 0.30) 58%, rgba(20, 184, 166, 0.32)) !important;
    border: 1px solid rgba(129, 230, 217, 0.42) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.045) inset !important;
    color: rgba(250, 252, 255, 0.98) !important;
    display: inline-flex !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    gap: 0.46rem !important;
    justify-content: flex-start !important;
    letter-spacing: 0 !important;
    min-height: 2.9rem !important;
    padding: 0.64rem 0.82rem !important;
    text-align: left !important;
    width: 100% !important;
  }

  .practice-rail-progress .practice-rail-progress-link::before {
    align-items: center;
    background: rgba(2, 6, 23, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    content: "↗";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.88rem;
    height: 1.55rem;
    justify-content: center;
    opacity: 0.95;
    width: 1.55rem;
  }

  .practice-rail-progress-link-icon {
    align-items: center;
    background: rgba(2, 6, 23, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.88rem;
    height: 1.55rem;
    justify-content: center;
    line-height: 1;
    width: 1.55rem;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    align-items: stretch !important;
    grid-auto-flow: column !important;
    grid-auto-rows: 1fr !important;
    margin-bottom: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions:has(#nextBlockButton:not([hidden])) {
    grid-template-columns: minmax(8.5rem, 1.18fr) repeat(4, minmax(6.3rem, 0.9fr)) minmax(5.6rem, 0.74fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions:has(#nextBlockButton[hidden]) {
    grid-template-columns: minmax(9rem, 1.16fr) minmax(7.4rem, 1fr) minmax(6.6rem, 0.92fr) minmax(6.2rem, 0.86fr) minmax(5.6rem, 0.74fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions > button {
    min-width: 0 !important;
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy strong {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy small {
    font-size: 0.59rem !important;
    line-height: 1.15 !important;
  }
}

/* P10Q Guidance workspace layout: Context | Content | Guidance. */
.current-item-reminder-preview[hidden] {
  display: none !important;
}

.current-item-reminder-preview {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.26rem;
}

.current-item-context-preview-block {
  align-items: start;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  display: grid;
  gap: 0.18rem;
  max-width: min(100%, 32rem);
  padding: 0.62rem 0.76rem;
}

.current-item-context-preview-block strong {
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.current-item-context-preview-block span {
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.34;
}

.current-item-context-preview-block.is-focus {
  background:
    radial-gradient(circle at 5% 10%, rgba(251, 191, 36, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(55, 35, 15, 0.96), rgba(8, 20, 31, 0.92));
  border-color: rgba(245, 158, 11, 0.5);
}

.current-item-context-preview-block.is-focus strong {
  color: rgba(252, 211, 77, 0.98);
}

.current-item-context-preview-block.is-focus span {
  color: rgba(255, 247, 237, 0.98);
  font-weight: 850;
}

.current-item-context-preview-block.is-reminder {
  background:
    radial-gradient(circle at 5% 10%, rgba(45, 212, 191, 0.13), transparent 42%),
    rgba(6, 20, 29, 0.58);
  border-color: rgba(45, 212, 191, 0.22);
}

.current-item-context-preview-block.is-reminder strong {
  color: rgba(94, 234, 212, 0.9);
}

@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card {
    align-items: stretch !important;
    display: grid !important;
    gap: clamp(0.85rem, 1.3vw, 1.25rem) !important;
    grid-template-areas:
      "context content guidance"
      "elapsed content guidance" !important;
    grid-template-columns: minmax(17rem, 0.86fr) minmax(22rem, 1.12fr) minmax(18rem, 0.86fr) !important;
    min-height: clamp(19rem, 26vw, 25rem) !important;
    padding: clamp(1rem, 1.55vw, 1.45rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: start !important;
    grid-area: context !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemDescription {
    max-width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    font-size: clamp(1.82rem, 2.4vw, 2.9rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.10), transparent 44%),
      linear-gradient(135deg, rgba(4, 13, 24, 0.84), rgba(9, 15, 31, 0.78)) !important;
    border-color: rgba(125, 211, 252, 0.16) !important;
    border-radius: 18px !important;
    grid-area: content !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    z-index: 6 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]) {
    align-self: start !important;
    border-radius: 999px !important;
    max-width: 24rem !important;
    min-height: 0 !important;
    width: min(24rem, 100%) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] {
    border-radius: 18px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    max-width: none !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]) {
    align-content: stretch !important;
    min-height: clamp(19rem, 26vw, 25rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
    min-height: 2.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  body[data-current-screen="dashboard"] #currentItemElapsedPill.current-item-elapsed-pill {
    align-self: end !important;
    grid-area: elapsed !important;
    justify-self: start !important;
    margin: 0 !important;
    z-index: 6 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation {
    align-self: stretch !important;
    grid-area: guidance !important;
    justify-self: stretch !important;
    max-width: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 7 !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation:not(.has-key-guidance) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation-orb,
  body[data-current-screen="dashboard"] .practice-focus-rotation-cue {
    display: none !important;
  }

  body[data-current-screen="dashboard"] .practice-key-guidance {
    align-content: start !important;
    gap: 0.5rem !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: clamp(0.92rem, 1.15vw, 1.15rem) !important;
  }

  body[data-current-screen="dashboard"] .practice-key-guidance-current {
    font-size: clamp(2.5rem, 4vw, 4.4rem) !important;
  }
}

@media (max-width: 979px) {
  body[data-current-screen="dashboard"] .practice-focus-rotation {
    margin: 0.75rem 0 0 !important;
    max-width: none !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-focus-rotation-orb,
  body[data-current-screen="dashboard"] .practice-focus-rotation-cue {
    display: none !important;
  }
}

@media (min-width: 980px) {
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-areas:
      "context content guidance"
      "elapsed content guidance" !important;
    grid-template-columns: minmax(17rem, 0.86fr) minmax(22rem, 1.12fr) minmax(18rem, 0.86fr) !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    grid-area: context !important;
    max-width: none !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    grid-area: content !important;
    grid-column: auto !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    grid-area: guidance !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemElapsedPill.current-item-elapsed-pill {
    grid-area: elapsed !important;
  }
}

/* P10R Practice three-panel stabilization: Context | Content | Guidance. */
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card {
  background:
    radial-gradient(circle at 7% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(139, 92, 246, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(4, 13, 24, 0.92), rgba(9, 15, 31, 0.88)) !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(226, 242, 255, 0.06) !important;
  min-width: 0 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
  align-content: start !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(6, 20, 29, 0.86), rgba(15, 23, 42, 0.72)) !important;
  display: grid !important;
  gap: 0.42rem !important;
  grid-template-rows: auto minmax(0, auto) auto minmax(0, auto) auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding: clamp(0.78rem, 1vw, 0.98rem) !important;
  position: relative !important;
  z-index: 4 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy .eyebrow {
  margin: 0 !important;
  order: 1 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
  color: rgba(248, 250, 252, 0.98) !important;
  display: block !important;
  font-size: clamp(1.42rem, 1.6vw, 2.08rem) !important;
  line-height: 1.06 !important;
  max-height: 9.35rem !important;
  overflow: auto !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  order: 2 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemMeta {
  margin: -0.1rem 0 0 !important;
  order: 3 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemDescription {
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
  color: rgba(226, 232, 240, 0.82) !important;
  display: block !important;
  font-size: 0.84rem !important;
  line-height: 1.34 !important;
  max-height: 4.4rem !important;
  overflow: auto !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  order: 4 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-badges {
  margin-top: 0.2rem !important;
  order: 5 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
  align-self: stretch !important;
  grid-area: focus !important;
  margin-top: 0.18rem !important;
  order: 6 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  z-index: 5 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
  border-radius: 14px !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  max-width: 100% !important;
  padding: 0.56rem 0.68rem !important;
  position: relative !important;
  z-index: 6 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-heading {
  align-items: center !important;
  display: flex !important;
  gap: 0.55rem !important;
  justify-content: space-between !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button {
  align-items: center !important;
  border: 1px solid rgba(252, 211, 77, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: rgba(254, 243, 199, 0.92) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 1.45rem !important;
  padding: 0.2rem 0.48rem !important;
  text-transform: uppercase !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button:hover,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button:focus-visible {
  border-color: rgba(252, 211, 77, 0.5) !important;
  outline: none !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(8, 17, 31, 0.9), rgba(4, 13, 24, 0.82)) !important;
  overflow: auto !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]) {
  align-self: start !important;
  border-radius: 18px !important;
  max-width: none !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] {
  min-height: 0 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
  min-height: 2.45rem !important;
  padding: 0.54rem 0.8rem !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]) summary {
  border-bottom: 0 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
  font-size: 0.86rem !important;
  line-height: 1.43 !important;
  padding: 0.66rem 0.82rem 0.78rem !important;
  overflow: visible !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(6, 20, 29, 0.9), rgba(23, 18, 48, 0.76)) !important;
  overflow: hidden !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation-orb,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation-cue {
  display: none !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation.has-key-guidance {
  opacity: 1 !important;
  pointer-events: auto !important;
  justify-self: stretch !important;
  max-width: 100% !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance {
  align-content: safe center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 0.2rem !important;
  justify-items: center !important;
  max-height: 100% !important;
  overflow: auto !important;
  padding: clamp(0.42rem, 0.6vw, 0.58rem) !important;
  text-align: center !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-current {
  font-size: clamp(1.68rem, 2.45vw, 2.72rem) !important;
  line-height: 0.95 !important;
  margin: 0 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance small,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-label,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-section-label {
  font-size: 0.56rem !important;
  line-height: 1.05 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-progress,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-next {
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(100%, 15rem) !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-actions button {
  min-height: 1.58rem !important;
  padding: 0.25rem 0.42rem !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-actions button {
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-key-list,
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-other {
  gap: 0.2rem !important;
  margin-top: 0.18rem !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-chip-grid {
  gap: 0.2rem !important;
  justify-content: center !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-jump-chip {
  min-height: 1.28rem !important;
  min-width: 1.72rem !important;
  padding: 0.12rem 0.32rem !important;
  font-size: 0.62rem !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-jump-chip.is-completed {
  background:
    radial-gradient(circle at 14% 10%, rgba(52, 211, 153, 0.3), transparent 44%),
    linear-gradient(135deg, rgba(6, 95, 70, 0.82), rgba(20, 83, 45, 0.58)) !important;
  border-color: rgba(52, 211, 153, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.16),
    0 0 18px rgba(16, 185, 129, 0.16) !important;
  color: rgba(236, 253, 245, 0.96) !important;
}

@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-areas:
      "context content guidance"
      "focus content guidance"
      "elapsed content guidance" !important;
    grid-template-columns: minmax(21.5rem, 1.24fr) minmax(20rem, 1.08fr) minmax(17rem, 0.82fr) !important;
    grid-template-rows: minmax(11.35rem, 1fr) auto auto !important;
    min-height: clamp(15.1rem, 18.4vw, 19rem) !important;
    padding: clamp(0.72rem, 1vw, 1rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]) {
    align-content: stretch !important;
    min-height: clamp(15.1rem, 18.4vw, 19rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    align-self: stretch !important;
    height: 100% !important;
    max-height: clamp(15.1rem, 18.4vw, 19rem) !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    max-height: none !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemElapsedPill.current-item-elapsed-pill {
    align-self: end !important;
    margin-top: 0.35rem !important;
  }
}

@media (max-width: 979px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card {
    display: grid !important;
    gap: 0.85rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    height: auto !important;
    width: 100% !important;
  }
}

/* P10S Practice vertical compression: preserve panels, reclaim scroll height. */
@media (min-width: 761px) {
  body[data-current-screen="dashboard"] .app-shell {
    gap: 0 !important;
    padding-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard.card,
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen,
  body[data-current-screen="dashboard"] section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"],
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    margin: 0 0 0.35rem !important;
    padding: 0.08rem 0.42rem 0.3rem !important;
    padding-top: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header.compact-practice-header {
    align-items: center !important;
    display: none !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-block: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-title {
    font-size: clamp(1.48rem, 1.7vw, 1.9rem) !important;
    line-height: 0.98 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-header .screen-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player,
  body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player {
    gap: 0.22rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .card.practice-dashboard.app-screen[data-screen-panel="dashboard"] #sessionPanel.practice-player > .practice-focus-card {
    align-content: start !important;
    column-gap: 1.38rem !important;
    grid-template-columns: minmax(21.2rem, 1.18fr) minmax(18.4rem, 1fr) minmax(16.2rem, 0.78fr) !important;
    grid-template-rows: minmax(12.15rem, auto) auto auto !important;
    height: auto !important;
    margin-top: -0.54rem !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 0.08rem 0.42rem 0.04rem !important;
    row-gap: 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card:has(.current-item-instructions-panel[open]) {
    min-height: auto !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    max-height: 15.35rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    align-self: stretch !important;
    height: 100% !important;
    max-height: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    gap: 0.22rem !important;
    padding: 0.5rem 0.58rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    font-size: clamp(1.22rem, 1.36vw, 1.82rem) !important;
    line-height: 1 !important;
    max-height: 10.85rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemMeta {
    margin-top: -0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    gap: 0.08rem !important;
    padding: 0.82rem 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block strong {
    font-size: 0.66rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span {
    font-size: 1.04rem !important;
    line-height: 1.18 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button {
    font-size: 0.56rem !important;
    min-height: 1.24rem !important;
    padding: 0.14rem 0.4rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
    min-height: 2.02rem !important;
    padding: 0.38rem 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary small {
    font-size: 0.68rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
    font-size: 0.94rem !important;
    line-height: 1.36 !important;
    padding: 0.52rem 0.72rem 0.62rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body p {
    margin: 0 0 0.44rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance {
    gap: 0.14rem !important;
    padding: 0.34rem 0.46rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-current {
    font-size: clamp(1.54rem, 2.15vw, 2.38rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-actions button {
    min-height: 1.42rem !important;
    padding: 0.18rem 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-jump-chip {
    min-height: 1.16rem !important;
    min-width: 1.56rem !important;
    padding: 0.08rem 0.26rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions {
    margin-bottom: 0.08rem !important;
    margin-top: -0.24rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions > button {
    min-height: 2.62rem !important;
    padding-block: 0.3rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy strong {
    font-size: 0.76rem !important;
  }

  body[data-current-screen="dashboard"] .practice-action-strip.hero-actions .p10eb-action-copy small {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.28rem !important;
  }

  body[data-current-screen="dashboard"] .p03i-tool-card,
  body[data-current-screen="dashboard"] .p03i-open-card,
  body[data-current-screen="dashboard"] .p10eb-tool-card {
    padding: 0.7rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-presets {
    gap: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #p03iTimerCard .p03i-preset {
    min-height: 1.62rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box {
    height: 2.08rem !important;
    max-height: 2.08rem !important;
    min-height: 2.08rem !important;
    overflow: hidden !important;
    padding: 0.22rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.practice-tool-card {
    height: 2.08rem !important;
    max-height: 2.08rem !important;
    min-height: 2.08rem !important;
    padding: 0.22rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box .current-item-reference-list,
  body[data-current-screen="dashboard"] .current-item-references-box .current-item-reference-empty {
    margin-top: 0.08rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.08rem !important;
    min-height: 2.28rem !important;
    padding: 0.24rem 0.52rem !important;
  }
}

/* P10QC final rail hierarchy override: progress first, utilities second, update last. */
body[data-current-screen="dashboard"] .practice-rail-progress {
  display: grid !important;
  gap: 0.64rem !important;
  grid-template-areas:
    "progress"
    "utilities"
    "maintenance" !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak {
  grid-area: progress !important;
  order: 1 !important;
}

body[data-current-screen="dashboard"] .practice-rail-utility-actions {
  display: grid !important;
  gap: 0.48rem !important;
  grid-area: utilities !important;
  order: 2 !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-maintenance-actions {
  display: grid !important;
  gap: 0.42rem !important;
  grid-area: maintenance !important;
  order: 3 !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(203, 213, 225, 0.72) !important;
  display: inline-flex !important;
  font-size: 0.68rem !important;
  gap: 0.28rem !important;
  justify-content: center !important;
  min-height: 1.72rem !important;
  padding: 0.24rem 0.48rem !important;
  width: 100% !important;
}

/* P10QC rail finish: readable update state and centered progress CTA. */
body[data-current-screen="dashboard"] .practice-rail-progress {
  inline-size: 172px !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-inline-size: 172px !important;
  max-width: 172px !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  width: 172px !important;
}

body[data-current-screen="dashboard"] .practice-rail-mini.practice-rail-streak,
body[data-current-screen="dashboard"] .practice-rail-utility-actions,
body[data-current-screen="dashboard"] .practice-rail-maintenance-actions {
  inline-size: 172px !important;
  max-inline-size: 172px !important;
  max-width: 172px !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  width: 172px !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link {
  align-items: center !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  font-size: 0.76rem !important;
  gap: 0.32rem !important;
  inline-size: 100% !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  padding-left: 0.46rem !important;
  padding-right: 0.46rem !important;
  white-space: nowrap !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] .practice-rail-progress .practice-rail-progress-link::before {
  flex: 0 0 auto !important;
  font-size: 0.74rem !important;
  height: 1.18rem !important;
  margin: 0 !important;
  width: 1.18rem !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
  box-sizing: border-box !important;
  align-items: center !important;
  display: flex !important;
  gap: 0.24rem !important;
  inline-size: 100% !important;
  justify-content: space-between !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  min-height: 1.78rem !important;
  min-width: 0 !important;
  padding: 0.22rem 0.28rem 0.22rem 0.4rem !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaVersionLabel {
  display: none !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaUpdateMessage {
  color: rgba(203, 213, 225, 0.9) !important;
  display: inline !important;
  flex: 1 1 auto !important;
  font-size: 0.54rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  min-width: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaReloadButton.pwa-reload-button {
  background: rgba(226, 232, 240, 0.16) !important;
  border-color: rgba(226, 232, 240, 0.34) !important;
  color: rgba(255, 255, 255, 0.98) !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 1.35rem !important;
  min-width: 2.95rem !important;
  padding: 0.12rem 0.28rem !important;
}

/* P10V correction: large stable panels, real instruction scrolling, visible ambience. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem;
    align-items: stretch !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.75rem) !important;
    padding-bottom: 0.58rem !important;
    padding-top: 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    background-color: rgba(5, 13, 25, 0.94) !important;
    background-image:
      radial-gradient(circle at 6% 0%, rgba(37, 99, 235, 0.22), transparent 42%),
      radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.14), transparent 38%),
      linear-gradient(145deg, rgba(9, 20, 37, 0.96), rgba(3, 10, 20, 0.91)) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(226, 242, 255, 0.08),
      inset 0 0 42px rgba(37, 99, 235, 0.06) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] > .current-item-instructions-body,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] > .current-item-instructions-body {
    box-sizing: border-box !important;
    display: block !important;
    height: calc(var(--practice-peer-panel-height) - 2.35rem) !important;
    max-height: calc(var(--practice-peer-panel-height) - 2.35rem) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.7rem 0.84rem 0.9rem !important;
    scrollbar-gutter: stable !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]) > .current-item-instructions-body,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]) > .current-item-instructions-body {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    background-color: rgba(7, 19, 32, 0.96) !important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.32), transparent 42%),
      radial-gradient(circle at 100% 12%, rgba(59, 130, 246, 0.3), transparent 44%),
      radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.18), transparent 46%),
      linear-gradient(145deg, rgba(6, 20, 29, 0.97), rgba(22, 18, 49, 0.9)) !important;
    border-color: rgba(45, 212, 191, 0.34) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance:not(.is-empty) .practice-key-guidance-empty,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-empty[hidden] {
    display: none !important;
    visibility: hidden !important;
  }

  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    background-color: rgba(20, 15, 11, 0.88) !important;
    background-image:
      radial-gradient(circle at 4% 50%, rgba(180, 83, 9, 0.32), transparent 36%),
      radial-gradient(circle at 98% 20%, rgba(251, 191, 36, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(29, 20, 13, 0.94), rgba(7, 15, 29, 0.84)) !important;
    border-color: rgba(180, 83, 9, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(251, 191, 36, 0.1),
      0 10px 28px rgba(0, 0, 0, 0.26) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-rows: minmax(0, 1fr) minmax(3.35rem, auto) !important;
    row-gap: 0.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    min-height: 0 !important;
    padding-bottom: 0.8rem !important;
    padding-top: 0.8rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: end !important;
    margin-top: 0.38rem !important;
    min-height: 3.35rem !important;
    overflow: visible !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    border-radius: 14px !important;
    min-height: 3.18rem !important;
    padding: 0.46rem 0.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span {
    font-size: 0.98rem !important;
    line-height: 1.12 !important;
  }
}

/* P10T Practice panel stabilization: fixed Context | Content | Guidance peers. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: clamp(18.25rem, 25vh, 22rem);
    align-items: stretch !important;
    background:
      radial-gradient(circle at 6% 0%, rgba(45, 212, 191, 0.13), transparent 34%),
      radial-gradient(circle at 84% 0%, rgba(59, 130, 246, 0.12), transparent 30%),
      radial-gradient(circle at 100% 16%, rgba(139, 92, 246, 0.16), transparent 36%),
      linear-gradient(135deg, rgba(4, 13, 24, 0.94), rgba(9, 15, 31, 0.9)) !important;
    column-gap: clamp(0.78rem, 1.15vw, 1.15rem) !important;
    display: grid !important;
    grid-template-areas:
      "context content guidance"
      "focus content guidance" !important;
    grid-template-columns: minmax(22.5rem, 1.06fr) minmax(20rem, 1fr) minmax(18rem, 0.82fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.35rem) !important;
    overflow: hidden !important;
    padding: 0.28rem 0.62rem 0.38rem !important;
    row-gap: 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    border-radius: 18px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.18), transparent 40%),
      radial-gradient(circle at 90% 12%, rgba(245, 158, 11, 0.09), transparent 34%),
      linear-gradient(145deg, rgba(5, 18, 28, 0.88), rgba(15, 23, 42, 0.74)) !important;
    display: grid !important;
    gap: 0.36rem !important;
    grid-area: context !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0.68rem 0.78rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    -webkit-line-clamp: initial !important;
    display: block !important;
    font-size: clamp(1.55rem, 2.05vw, 2.48rem) !important;
    line-height: 1.03 !important;
    max-height: 100% !important;
    overflow: auto !important;
    overflow-wrap: anywhere !important;
    padding-right: 0.2rem !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemDescription {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    max-height: 3.5rem !important;
    overflow: auto !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-badges {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: stretch !important;
    grid-area: focus !important;
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 4.15rem !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    background:
      radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.2), transparent 34%),
      linear-gradient(135deg, rgba(76, 43, 8, 0.62), rgba(6, 13, 24, 0.8)) !important;
    border: 1px solid rgba(245, 158, 11, 0.42) !important;
    border-radius: 16px !important;
    display: grid !important;
    gap: 0.18rem !important;
    min-height: 4.15rem !important;
    padding: 0.64rem 0.8rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-heading strong {
    color: rgba(252, 211, 77, 0.86) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span {
    color: rgba(255, 251, 235, 0.96) !important;
    font-size: 1.04rem !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.14), transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.1), transparent 38%),
      linear-gradient(145deg, rgba(8, 17, 31, 0.93), rgba(4, 13, 24, 0.86)) !important;
    border-color: rgba(125, 211, 252, 0.2) !important;
    display: grid !important;
    grid-area: content !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    max-width: none !important;
    min-height: var(--practice-peer-panel-height) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel:not([open]),
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] {
    align-self: stretch !important;
    border-radius: 18px !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    max-width: none !important;
    min-height: var(--practice-peer-panel-height) !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
    flex: 0 0 auto !important;
    min-height: 2.1rem !important;
    padding: 0.42rem 0.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: clamp(0.98rem, 1vw, 1.08rem) !important;
    line-height: 1.38 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 0.58rem 0.78rem 0.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-empty {
    align-content: center !important;
    color: rgba(203, 213, 225, 0.86) !important;
    display: grid !important;
    gap: 0.24rem !important;
    height: 100% !important;
    justify-items: start !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-empty strong {
    color: rgba(248, 250, 252, 0.94) !important;
    font-size: 1.02rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    align-self: stretch !important;
    background:
      radial-gradient(circle at 4% 0%, rgba(45, 212, 191, 0.24), transparent 40%),
      radial-gradient(circle at 100% 12%, rgba(59, 130, 246, 0.22), transparent 42%),
      linear-gradient(145deg, rgba(6, 20, 29, 0.94), rgba(23, 18, 48, 0.84)) !important;
    border-color: rgba(45, 212, 191, 0.28) !important;
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.32),
      0 0 34px rgba(45, 212, 191, 0.08),
      inset 0 1px 0 rgba(226, 242, 255, 0.08) !important;
    display: grid !important;
    grid-area: guidance !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation:not(.has-key-guidance) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance {
    align-content: center !important;
    display: grid !important;
    gap: 0.22rem !important;
    height: 100% !important;
    justify-items: center !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 0.62rem 0.72rem !important;
    text-align: center !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance.is-empty > :not(.practice-key-guidance-empty) {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-empty {
    align-content: center !important;
    color: rgba(203, 213, 225, 0.86) !important;
    display: grid !important;
    gap: 0.35rem !important;
    justify-items: center !important;
    max-width: 18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-empty strong {
    color: rgba(248, 250, 252, 0.95) !important;
    font-size: 1.04rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-empty ul {
    display: grid !important;
    gap: 0.16rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-current {
    font-size: clamp(2.05rem, 3.15vw, 3.42rem) !important;
    line-height: 0.95 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    background:
      radial-gradient(circle at 4% 50%, rgba(180, 83, 9, 0.15), transparent 32%),
      linear-gradient(135deg, rgba(21, 14, 10, 0.82), rgba(8, 17, 31, 0.78)) !important;
    border-color: rgba(180, 83, 9, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.06) !important;
  }
}

/* P10U Practice panel corrections: restore large panels and make scroll/empty states explicit. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem;
    min-height: calc(var(--practice-peer-panel-height) + 0.75rem) !important;
    padding-bottom: 0.48rem !important;
    padding-top: 0.36rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    background-color: rgba(5, 13, 25, 0.94) !important;
    background-image:
      radial-gradient(circle at 6% 0%, rgba(37, 99, 235, 0.22), transparent 42%),
      radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.14), transparent 38%),
      linear-gradient(145deg, rgba(9, 20, 37, 0.96), rgba(3, 10, 20, 0.91)) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(226, 242, 255, 0.08),
      inset 0 0 42px rgba(37, 99, 235, 0.06) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel[open] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body {
    block-size: auto !important;
    box-sizing: border-box !important;
    height: calc(var(--practice-peer-panel-height) - 2.35rem) !important;
    max-block-size: calc(var(--practice-peer-panel-height) - 2.35rem) !important;
    max-height: calc(var(--practice-peer-panel-height) - 2.35rem) !important;
    min-block-size: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-body p {
    max-width: 62ch !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    background-color: rgba(7, 19, 32, 0.96) !important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.32), transparent 42%),
      radial-gradient(circle at 100% 12%, rgba(59, 130, 246, 0.3), transparent 44%),
      radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.18), transparent 46%),
      linear-gradient(145deg, rgba(6, 20, 29, 0.97), rgba(22, 18, 49, 0.9)) !important;
    border-color: rgba(45, 212, 191, 0.34) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance-empty[hidden] {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-key-guidance:not(.is-empty) .practice-key-guidance-empty {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    background-color: rgba(20, 15, 11, 0.88) !important;
    background-image:
      radial-gradient(circle at 4% 50%, rgba(180, 83, 9, 0.32), transparent 36%),
      radial-gradient(circle at 98% 20%, rgba(251, 191, 36, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(29, 20, 13, 0.94), rgba(7, 15, 29, 0.84)) !important;
    border-color: rgba(180, 83, 9, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(251, 191, 36, 0.1),
      0 10px 28px rgba(0, 0, 0, 0.26) !important;
  }
}

/* P10W focus emphasis: larger focus panel, fuller title panel. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-rows: minmax(0, 1fr) minmax(6.65rem, auto) !important;
    row-gap: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    height: 100% !important;
    min-height: calc(var(--practice-peer-panel-height) - 7.2rem) !important;
    padding-bottom: 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: end !important;
    min-height: 6.65rem !important;
    margin-top: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    align-content: center !important;
    border-radius: 17px !important;
    min-height: 6.35rem !important;
    padding: 0.92rem 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-heading strong,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-heading strong {
    font-size: 0.82rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-configure-button {
    font-size: 0.64rem !important;
    min-height: 1.48rem !important;
    padding: 0.16rem 0.52rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span {
    font-size: clamp(1.45rem, 1.45vw, 1.78rem) !important;
    line-height: 1.08 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    gap: 0.24rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    align-items: center !important;
    background-color: rgba(22, 15, 9, 0.9) !important;
    background-image:
      radial-gradient(circle at 3% 50%, rgba(180, 83, 9, 0.34), transparent 32%),
      radial-gradient(circle at 94% 42%, rgba(245, 158, 11, 0.1), transparent 34%),
      linear-gradient(135deg, rgba(30, 20, 11, 0.94), rgba(8, 15, 28, 0.82)) !important;
    border-color: rgba(180, 83, 9, 0.3) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    height: 2.85rem !important;
    max-height: 2.85rem !important;
    min-height: 2.85rem !important;
    overflow: hidden !important;
    padding: 0.28rem 0.54rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-box-header {
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-empty-state,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .current-item-reference-empty,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-context-list,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box #currentItemReferencesList {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.18rem !important;
  }
}

/* P10X final practice density correction: taller title glass, thinner amber references rail. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-rows: minmax(14.4rem, 1fr) minmax(6.35rem, auto) !important;
    row-gap: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 14.4rem !important;
    padding-bottom: 2.2rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    min-height: 6.35rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    min-height: 5.95rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.18rem !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row:has(.current-item-references-box),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .timing-support-row:has(.current-item-references-box) {
    align-items: center !important;
    gap: 0.24rem !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] .current-item-references-box.p10fy-reference-strip,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .timing-support-row > .current-item-references-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .timing-support-row > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .timing-support-row .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(.current-item-references-box).practice-tool-card,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    align-items: center !important;
    align-self: stretch !important;
    background:
      radial-gradient(circle at 4% 50%, rgba(245, 158, 11, 0.28), transparent 32%),
      radial-gradient(circle at 96% 38%, rgba(180, 83, 9, 0.16), transparent 30%),
      linear-gradient(135deg, rgba(31, 20, 10, 0.96), rgba(7, 14, 26, 0.88)) !important;
    border-color: rgba(245, 158, 11, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(251, 191, 36, 0.12),
      0 8px 18px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    height: 2.25rem !important;
    max-block-size: 2.25rem !important;
    max-height: 2.25rem !important;
    min-block-size: 2.25rem !important;
    min-height: 2.25rem !important;
    overflow: hidden !important;
    padding: 0.16rem 0.48rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-box-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.36rem !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box .reference-box-header {
    align-items: center !important;
    display: flex !important;
    gap: 0.36rem !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-box-header strong {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.74rem !important;
    gap: 0.28rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box .reference-box-header strong {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 0.74rem !important;
    gap: 0.28rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-box-header > span,
  body[data-current-screen="dashboard"] .current-item-references-box .reference-box-header > span,
  body[data-current-screen="dashboard"] .current-item-references-box #currentItemReferencesCount,
  body[data-current-screen="dashboard"] .current-item-references-box #currentItemReferencesEmpty,
  body[data-current-screen="dashboard"] .current-item-references-box .reference-box-header + *,
  body[data-current-screen="dashboard"] .current-item-references-box .reference-empty-state,
  body[data-current-screen="dashboard"] .current-item-references-box .current-item-reference-empty,
  body[data-current-screen="dashboard"] .current-item-references-box .reference-context-list,
  body[data-current-screen="dashboard"] .current-item-references-box .current-item-reference-list,
  body[data-current-screen="dashboard"] .current-item-references-box #currentItemReferencesList,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box #currentItemReferencesCount,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box #currentItemReferencesEmpty,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-box-header + *,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-empty-state,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .current-item-reference-empty,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .reference-context-list,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .current-item-reference-list,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box #currentItemReferencesList {
    display: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .p10eb-reference-shortcuts {
    align-items: center !important;
    display: flex !important;
    gap: 0.76rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    transform: scale(0.82) !important;
    transform-origin: right center !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] .current-item-references-box .p10eb-reference-shortcuts {
    align-items: center !important;
    display: flex !important;
    gap: 0.76rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    transform: scale(0.82) !important;
    transform-origin: right center !important;
    white-space: nowrap !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.34rem !important;
  }
}

/* P10Y practice panel alignment: small top edge, deeper title glass, usable amber references rail. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] section.practice-dashboard.app-screen[data-screen-panel="dashboard"],
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    padding-top: 0.42rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    border-top: 1px solid rgba(125, 211, 252, 0.12) !important;
    padding-top: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-rows: minmax(15.55rem, 1fr) minmax(6.35rem, auto) !important;
    row-gap: 0.26rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    min-height: 15.55rem !important;
    padding-bottom: 1.72rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid {
    gap: 0.14rem !important;
    padding-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] .current-item-references-box.p10fy-reference-strip,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    height: 2.6rem !important;
    max-block-size: 2.6rem !important;
    max-height: 2.6rem !important;
    min-block-size: 2.6rem !important;
    min-height: 2.6rem !important;
    padding: 0.2rem 0.58rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.92rem !important;
  }
}

/* P10Z final visible-rail correction: deeper title, readable references, schedule pulled upward. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    grid-template-rows: minmax(16.85rem, 1fr) minmax(6.35rem, auto) !important;
    row-gap: 0.22rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    min-height: 16.85rem !important;
    padding-bottom: 1.4rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box,
  body[data-current-screen="dashboard"] .current-item-references-box.practice-tool-card,
  body[data-current-screen="dashboard"] .current-item-references-box.reference-context-box,
  body[data-current-screen="dashboard"] .current-item-references-box.p10fy-reference-strip,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .timing-support-row > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    height: 3.15rem !important;
    margin-bottom: -0.7rem !important;
    max-block-size: 3.15rem !important;
    max-height: 3.15rem !important;
    min-block-size: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0.24rem 0.64rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box .p10eb-reference-shortcuts,
  body[data-current-screen="dashboard"] .current-item-references-box .p10eb-reference-shortcuts {
    gap: 0.82rem !important;
    transform: scale(0.94) !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -2.15rem !important;
  }
}

/* P10PU version/status fix: current builds show version, update controls only appear when needed. */
#pwaUpdateStatus.pwa-update-status.is-current,
body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status.is-current {
  display: none !important;
}

#pwaUpdateStatus.pwa-update-status.is-current #pwaReloadButton,
#pwaUpdateStatus.pwa-update-status.is-current .pwa-reload-button,
body:not(.has-app-update) #pwaReloadButton,
body:not(.has-app-update) .header-update-button,
#pwaReloadButton[hidden],
.pwa-reload-button[hidden] {
  display: none !important;
}

.practice-rail-version-badge {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  color: rgba(203, 213, 225, 0.86) !important;
  display: inline-flex !important;
  font-size: 0.58rem !important;
  font-weight: 780 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  min-height: 1.44rem !important;
  overflow: hidden !important;
  padding: 0.24rem 0.44rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.header-app-status {
  align-items: flex-end !important;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 0.22rem !important;
  margin-left: 0.35rem !important;
}

.header-app-status[hidden] {
  display: none !important;
}

.header-app-status .header-feedback-button {
  justify-content: center !important;
  min-height: 1.45rem !important;
  padding: 0.22rem 0.52rem !important;
  width: max-content !important;
}

.header-version-badge,
.header-update-pill {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(232, 238, 244, 0.13) !important;
  border-radius: 999px !important;
  color: rgba(244, 247, 250, 0.82) !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  gap: 0.36rem !important;
  line-height: 1 !important;
  min-height: 1.45rem !important;
  padding: 0.22rem 0.52rem !important;
  white-space: nowrap !important;
}

.header-update-pill {
  background: rgba(255, 247, 224, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
  color: #fff4c2 !important;
}

.header-update-pill[hidden] {
  display: none !important;
}

.header-update-pill .header-update-button {
  display: inline-flex !important;
  min-height: 1.22rem !important;
  padding: 0.14rem 0.4rem !important;
}

body[data-current-screen="dashboard"] .header-app-status {
  display: none !important;
}

/* P11A direct correction: remove title ceiling and physically lift the active schedule rail. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-content: start !important;
    align-self: start !important;
    margin-top: 0 !important;
    max-height: none !important;
    min-height: 16.85rem !important;
    padding-bottom: 0.86rem !important;
    transform: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    -webkit-line-clamp: initial !important;
    display: block !important;
    max-height: 13.2rem !important;
    min-height: 12.25rem !important;
    overflow: auto !important;
    padding-bottom: 0.6rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid {
    margin-bottom: -1.05rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -3.45rem !important;
    position: relative !important;
    transform: translateY(-1.2rem) !important;
    z-index: 8 !important;
  }
}

/* P11B restore left panel top alignment; stretch only the title content, not the whole left tile. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    border-top: 1px solid rgba(125, 211, 252, 0.14) !important;
    padding-top: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    align-items: stretch !important;
    grid-template-rows: minmax(0, calc(var(--practice-peer-panel-height) - 6.35rem - 0.18rem)) minmax(6.35rem, auto) !important;
    row-gap: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding-bottom: 0.64rem !important;
    transform: none !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    min-height: 13.15rem !important;
    padding-bottom: 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: end !important;
    margin-top: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid {
    gap: 0.12rem !important;
    margin-bottom: -1.35rem !important;
    padding-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -4.15rem !important;
    position: relative !important;
    transform: translateY(-1.25rem) !important;
    z-index: 8 !important;
  }
}

/* P11C peer-panel correction: same top/bottom edges, title glass fills its row, schedule hugs references. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
    padding-top: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --p11c-focus-height: 6.45rem;
    --p11c-peer-gap: 0.16rem;
    align-items: stretch !important;
    grid-template-rows:
      minmax(0, calc(var(--practice-peer-panel-height) - var(--p11c-focus-height) - var(--p11c-peer-gap)))
      var(--p11c-focus-height) !important;
    row-gap: var(--p11c-peer-gap) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    block-size: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.62rem 0.72rem 0.7rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    block-size: auto !important;
    max-height: none !important;
    min-height: 13.75rem !important;
    padding-bottom: 1.12rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: stretch !important;
    block-size: var(--p11c-focus-height) !important;
    height: var(--p11c-focus-height) !important;
    margin: 0 !important;
    min-height: var(--p11c-focus-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    block-size: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    gap: 0.08rem !important;
    margin-bottom: -1.65rem !important;
    padding-bottom: 0 !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-block-start: -4.9rem !important;
    margin-top: -4.9rem !important;
    position: relative !important;
    transform: translateY(-1.38rem) !important;
    z-index: 8 !important;
  }
}

/* P11D remove hero slack: peer panels define the hero height, action row moves up. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    align-content: start !important;
    box-sizing: border-box !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.36rem) !important;
    padding-bottom: 0.16rem !important;
    padding-top: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    margin-top: 0.2rem !important;
  }
}

/* P11F correction: keep center/right stable, pull the left banner down, remove hero slack. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] section.practice-dashboard.app-screen[data-screen-panel="dashboard"],
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    padding-top: 0.38rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
    padding-top: 0.24rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem !important;
    --p11f-focus-height: 6.8rem;
    --p11f-peer-gap: 0.16rem;
    align-content: start !important;
    grid-template-rows:
      minmax(0, calc(var(--practice-peer-panel-height) - var(--p11f-focus-height) - var(--p11f-peer-gap)))
      var(--p11f-focus-height) !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.34rem) !important;
    padding-bottom: 0.1rem !important;
    padding-top: 0.2rem !important;
    row-gap: var(--p11f-peer-gap) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 1.34rem 0.72rem 0.56rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    min-height: 14.95rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    height: var(--p11f-focus-height) !important;
    min-height: var(--p11f-focus-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    margin-top: -0.35rem !important;
  }
}

/* P11G geometry correction: align the three peer panels and remove the lower hero band. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] section.practice-dashboard.app-screen[data-screen-panel="dashboard"],
  body[data-current-screen="dashboard"] .practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    padding-top: 0.34rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player {
    border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
    padding-top: 0.22rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem !important;
    --p11g-focus-height: 6.95rem;
    --p11g-peer-gap: 0.12rem;
    align-content: start !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    grid-template-areas:
      "context content guidance"
      "focus content guidance" !important;
    grid-template-columns: minmax(22.25rem, 1.06fr) minmax(20rem, 1fr) minmax(18rem, 0.82fr) !important;
    grid-template-rows:
      minmax(0, calc(var(--practice-peer-panel-height) - var(--p11g-focus-height) - var(--p11g-peer-gap)))
      var(--p11g-focus-height) !important;
    height: calc(var(--practice-peer-panel-height) + 0.44rem) !important;
    max-height: calc(var(--practice-peer-panel-height) + 0.44rem) !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.44rem) !important;
    overflow: hidden !important;
    padding: 0.2rem 0.58rem 0.22rem !important;
    row-gap: var(--p11g-peer-gap) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    block-size: 100% !important;
    box-sizing: border-box !important;
    grid-area: context !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 0.74rem 0.72rem 0.84rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy::before,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy::after,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy::after {
    inset: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: 0.2rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: stretch !important;
    block-size: var(--p11g-focus-height) !important;
    grid-area: focus !important;
    height: var(--p11g-focus-height) !important;
    margin: 0 !important;
    max-height: var(--p11g-focus-height) !important;
    min-height: var(--p11g-focus-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::before,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::after,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::after {
    inset: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    align-content: center !important;
    block-size: 100% !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.62rem 0.86rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    align-self: start !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    margin-top: 0.08rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    gap: 0.12rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    min-height: 3.35rem !important;
    height: 3.35rem !important;
    max-height: 3.35rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.18rem !important;
    transform: none !important;
  }
}

/* P11H final alignment trim: extend left atmosphere, lower focus, and close the rail gap. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --p11g-focus-height: 6.7rem;
    --p11g-peer-gap: 0.08rem;
    padding-bottom: 0.18rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::after,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::after {
    inset: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    padding-bottom: 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    transform: translateY(0.14rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    margin-bottom: -0.62rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    margin-bottom: -0.54rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -0.86rem !important;
    transform: none !important;
  }
}

/* P11I direct left-column placement: visibly lower focus and extend title space. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    position: relative !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    inset: 0 auto auto 0.58rem !important;
    min-height: 14.25rem !important;
    position: absolute !important;
    top: 0.2rem !important;
    width: min(38.8%, 35.8rem) !important;
    z-index: 2 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    left: 0.58rem !important;
    min-height: 7.1rem !important;
    position: absolute !important;
    top: 16.55rem !important;
    transform: none !important;
    width: min(38.8%, 35.8rem) !important;
    z-index: 3 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    min-height: 7.1rem !important;
    padding: 0.82rem 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    margin-bottom: -0.95rem !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -1.35rem !important;
  }
}

/* P11J corrective trim: keep peer panels stable, make the left column visible, and ease rail overlap. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    overflow: hidden !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before {
    background:
      radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.14), transparent 36%),
      radial-gradient(circle at 78% 78%, rgba(245, 158, 11, 0.22), transparent 34%),
      linear-gradient(100deg, rgba(4, 16, 25, 0.74), rgba(30, 20, 13, 0.46) 41%, transparent 42%) !important;
    inset: 0 auto 0 0 !important;
    opacity: 1 !important;
    width: 41.2% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    height: 15.05rem !important;
    min-height: 15.05rem !important;
    top: 0.22rem !important;
    width: min(38.5%, 35.25rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    height: 6.55rem !important;
    min-height: 6.55rem !important;
    top: 15.78rem !important;
    width: min(38.5%, 35.25rem) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    height: 6.55rem !important;
    min-height: 6.55rem !important;
    padding: 0.72rem 0.98rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] #sessionPanel.practice-player .current-item-references-box {
    transform: translateY(-0.08rem) !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner,
  body[data-current-screen="dashboard"] .schedule-journey-banner {
    margin-top: -1.05rem !important;
    transform: translateY(-0.24rem) !important;
  }
}

/* P11K left-panel correction: title glass grows down, focus stays fully above actions, wallpaper follows. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    overflow: hidden !important;
    position: relative !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before {
    background:
      radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.13), transparent 35%),
      radial-gradient(circle at 68% 84%, rgba(245, 158, 11, 0.26), transparent 42%),
      linear-gradient(100deg, rgba(4, 16, 25, 0.78), rgba(31, 21, 13, 0.54) 42%, transparent 43%) !important;
    inset: 0 auto 0 0 !important;
    transform: none !important;
    width: 42.3% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    bottom: auto !important;
    height: 16.35rem !important;
    left: 0.58rem !important;
    min-height: 16.35rem !important;
    position: absolute !important;
    right: auto !important;
    top: 0.18rem !important;
    width: min(38.55%, 35.35rem) !important;
    z-index: 2 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    max-height: 14.85rem !important;
    min-height: 13.8rem !important;
    overflow-y: auto !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    bottom: auto !important;
    height: 6.85rem !important;
    left: 0.58rem !important;
    min-height: 6.85rem !important;
    position: absolute !important;
    right: auto !important;
    top: 13.95rem !important;
    transform: none !important;
    width: min(38.55%, 35.35rem) !important;
    z-index: 4 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    align-content: center !important;
    height: 6.85rem !important;
    min-height: 6.85rem !important;
    padding: 0.74rem 0.98rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block span {
    font-size: 1.24rem !important;
    line-height: 1.08 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }
}

/* P11L stable left column: no absolute drift, title and focus live in the visible grid. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem !important;
    --p11l-focus-height: 6.9rem;
    --p11l-left-gap: 0.54rem;
    display: grid !important;
    grid-template-areas:
      "context content guidance"
      "focus content guidance" !important;
    grid-template-columns: minmax(24rem, 1.1fr) minmax(20rem, 0.92fr) minmax(18rem, 0.78fr) !important;
    grid-template-rows:
      minmax(0, calc(var(--practice-peer-panel-height) - var(--p11l-focus-height) - var(--p11l-left-gap)))
      var(--p11l-focus-height) !important;
    height: calc(var(--practice-peer-panel-height) + 0.5rem) !important;
    max-height: calc(var(--practice-peer-panel-height) + 0.5rem) !important;
    min-height: calc(var(--practice-peer-panel-height) + 0.5rem) !important;
    overflow: hidden !important;
    padding-bottom: 0.44rem !important;
    row-gap: var(--p11l-left-gap) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before {
    background:
      radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.14), transparent 35%),
      radial-gradient(circle at 70% 88%, rgba(245, 158, 11, 0.3), transparent 44%),
      linear-gradient(100deg, rgba(4, 16, 25, 0.8), rgba(31, 21, 13, 0.58) 43%, transparent 44%) !important;
    inset: 0 auto -0.55rem 0 !important;
    width: 43.6% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    align-self: stretch !important;
    bottom: auto !important;
    grid-area: context !important;
    height: auto !important;
    justify-self: stretch !important;
    left: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    z-index: 2 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    max-height: 15.8rem !important;
    min-height: 14.5rem !important;
    overflow-y: auto !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    align-self: stretch !important;
    bottom: auto !important;
    grid-area: focus !important;
    height: var(--p11l-focus-height) !important;
    justify-self: stretch !important;
    left: auto !important;
    margin: 0 !important;
    max-height: var(--p11l-focus-height) !important;
    min-height: var(--p11l-focus-height) !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    z-index: 3 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.78rem 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel {
    align-self: stretch !important;
    grid-area: content !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-rotation {
    align-self: stretch !important;
    grid-area: guidance !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
  }
}

/* P11M close the hero shell: wallpaper extends visually, but the action row hugs the panels. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    --practice-peer-panel-height: 27rem !important;
    --p11l-focus-height: 8.15rem !important;
    --p11l-left-gap: 0.32rem !important;
    box-sizing: border-box !important;
    height: var(--practice-peer-panel-height) !important;
    max-height: var(--practice-peer-panel-height) !important;
    min-height: var(--practice-peer-panel-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0.12rem !important;
    row-gap: var(--p11l-left-gap) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before {
    inset: 0 auto -1.35rem 0 !important;
    width: 44.2% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy {
    min-height: 0 !important;
    padding-bottom: 0.5rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemName,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemName {
    max-height: 14.35rem !important;
    min-height: 12.95rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-context-preview-block {
    padding: 0.82rem 1rem !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-action-strip.hero-actions,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-action-strip.hero-actions {
    margin-top: -4.35rem !important;
    position: relative !important;
    z-index: 12 !important;
  }
}

/* P11N surgical close: fill only the left-panel lower shell gap. */
@media (min-width: 980px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card {
    background:
      radial-gradient(ellipse at 20% 92%, rgba(245, 158, 11, 0.24), transparent 34%),
      linear-gradient(90deg, rgba(15, 19, 19, 0.94) 0 44.2%, transparent 44.2% 100%),
      linear-gradient(90deg, rgba(6, 18, 27, 0.92) 0 44.2%, rgba(6, 11, 24, 0.96) 44.2% 100%),
      radial-gradient(circle at 8% 84%, rgba(245, 158, 11, 0.18), transparent 28%),
      radial-gradient(circle at 78% 20%, rgba(45, 212, 191, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(4, 13, 24, 0.94), rgba(9, 15, 31, 0.9)) !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card::before,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card::before {
    inset: 0 auto -2.05rem 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview {
    overflow: visible !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::after,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-reminder-preview::after {
    background: linear-gradient(180deg, rgba(41, 27, 13, 0.72), rgba(7, 15, 24, 0.2)) !important;
    border-radius: 0 0 18px 18px !important;
    content: "" !important;
    height: 1.1rem !important;
    inset: auto 0 -1.02rem 0 !important;
    opacity: 0.78 !important;
    position: absolute !important;
  }
}

/* P11O session-complete cleanup: make the completion helper readable. */
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card #currentItemDescription.is-session-complete-message,
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription.is-session-complete-message {
  color: rgba(231, 238, 246, 0.9) !important;
  display: block !important;
  font-size: clamp(1rem, 1.05vw, 1.22rem) !important;
  font-weight: 650 !important;
  line-height: 1.28 !important;
  margin-top: 0.5rem !important;
  max-width: 32rem !important;
}

/* P11R desktop sizing contract: timing tools must stay in one row after PWA launch/reflow. */
@media (min-width: 1120px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player {
    min-width: 0 !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid {
    align-items: stretch !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-areas:
      "metronome timer recorder"
      "references references references" !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > :is(#p03iMetronomeCard, .embedded-zonebeat-card, .metronome-card),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iMetronomeCard, .embedded-zonebeat-card, .metronome-card) {
    grid-area: metronome !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, .compact-countdown-card, .countdown-card),
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, .compact-countdown-card, .countdown-card) {
    grid-area: timer !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel {
    grid-area: recorder !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-current-screen="dashboard"] #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box,
  body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box {
    grid-area: references !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* P11Q Text Cleanup Assistant: conservative preview-before-apply cleanup for user-entered text. */
.text-cleanup-control-row {
  display: flex;
  justify-content: flex-end;
  margin: 0.08rem 0 0.18rem;
}

.text-cleanup-button {
  align-items: center;
  background: rgba(8, 18, 34, 0.46);
  border-color: rgba(148, 163, 184, 0.18);
  color: rgba(203, 213, 225, 0.78);
  display: inline-flex;
  height: 1.84rem;
  justify-content: center;
  min-height: 1.84rem;
  padding: 0;
  text-shadow: none;
  width: 1.84rem;
}

.text-cleanup-button svg {
  fill: none;
  height: 0.9rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 0.9rem;
}

.text-cleanup-button:hover,
.text-cleanup-button:focus-visible {
  border-color: rgba(94, 234, 212, 0.3);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.08), 0 8px 18px rgba(14, 165, 163, 0.07);
  color: rgba(226, 232, 240, 0.94);
}

.text-cleanup-button:active {
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  transform: translateY(1px);
}

.text-cleanup-backdrop {
  z-index: 9999;
}

.text-cleanup-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(20, 184, 166, 0.16), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(124, 58, 237, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(8, 18, 32, 0.98), rgba(10, 16, 28, 0.98));
  border-color: rgba(94, 234, 212, 0.22);
  color: rgba(240, 247, 255, 0.94);
  max-width: min(1040px, calc(100vw - 2rem));
}

.text-cleanup-intro {
  color: rgba(203, 213, 225, 0.78);
  margin: -0.2rem 0 0.9rem;
}

.text-cleanup-preview-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-cleanup-preview-grid section,
.text-cleanup-summary {
  background: rgba(3, 10, 20, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 0.8rem;
}

.text-cleanup-preview-grid h3,
.text-cleanup-summary h3 {
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.85rem;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.text-cleanup-preview-grid pre {
  color: rgba(241, 245, 249, 0.9);
  font: 0.92rem/1.5 var(--font-body, inherit);
  margin: 0;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-cleanup-summary {
  margin-top: 0.8rem;
}

.text-cleanup-summary ul {
  color: rgba(203, 213, 225, 0.86);
  margin: 0;
  padding-left: 1.1rem;
}

.text-cleanup-actions {
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.72), rgba(8, 18, 32, 0.96) 38%);
}

.text-cleanup-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 760px) {
  .text-cleanup-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* P11P instruction bookmarks: keep instructions as text, not app button pills. */
body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary {
  gap: 0.55rem !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instructions-panel summary small {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line,
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line {
  appearance: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: rgba(226, 232, 240, 0.93) !important;
  cursor: pointer !important;
  display: block !important;
  flex: 0 0 100% !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  line-height: inherit !important;
  margin: 0.02rem 0 !important;
  min-height: 0 !important;
  padding: 0.08rem 0.45rem 0.08rem 0.62rem !important;
  position: relative !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: normal !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:hover,
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:hover {
  background: rgba(45, 212, 191, 0.07) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:focus-visible,
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.36) !important;
  outline-offset: 1px !important;
}

body[data-current-screen="dashboard"] #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line.is-bookmarked,
body[data-current-screen="dashboard"] .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line.is-bookmarked {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(45, 212, 191, 0.08) 54%, transparent) !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
  box-shadow:
    inset 3px 0 0 rgba(245, 158, 11, 0.76),
    0 0 18px rgba(245, 158, 11, 0.1) !important;
  color: rgba(255, 251, 235, 0.98) !important;
}

/* Practice and import polish: keep tools readable and make empty import a true workspace. */
.importzone-screen[data-importzone-stage="intake"] .importzone-drop-pad {
  align-content: center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.12), transparent 16rem),
    rgba(2, 8, 17, 0.52) !important;
  border: 1.5px dashed rgba(94, 234, 212, 0.32) !important;
  gap: 0.72rem !important;
  min-height: min(56vh, 35rem) !important;
  padding: clamp(1.2rem, 3vw, 2.4rem) !important;
  place-items: center !important;
  text-align: center !important;
}

.importzone-drop-icon {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.34), rgba(99, 102, 241, 0.34)) !important;
  border: 1px solid rgba(153, 246, 228, 0.34) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 38px rgba(13, 148, 136, 0.14) !important;
  color: rgba(240, 253, 250, 0.98) !important;
  display: inline-grid !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  height: 4.15rem !important;
  line-height: 1 !important;
  place-items: center !important;
  width: 4.15rem !important;
}

.importzone-drop-pad > strong {
  color: #f8fbff !important;
  font-size: clamp(1.18rem, 2vw, 1.62rem) !important;
  line-height: 1.12 !important;
}

.importzone-drop-pad > small {
  color: rgba(207, 219, 239, 0.76) !important;
  line-height: 1.42 !important;
  max-width: 42rem !important;
}

.importzone-textarea {
  background: rgba(2, 8, 17, 0.76) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 14px !important;
  color: rgba(248, 250, 252, 0.94) !important;
  line-height: 1.48 !important;
  min-height: 16rem !important;
  text-align: left !important;
  width: 100% !important;
}

.importzone-textarea::placeholder {
  color: rgba(203, 213, 225, 0.46) !important;
}

.importzone-empty-examples span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.84rem !important;
  line-height: 1.42 !important;
}

.countdown-display,
#countdownStatus {
  overflow: visible !important;
}

#countdownStatus {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  min-height: 1rem !important;
  padding-block: 0.03rem !important;
}

#quickRecordPanel.is-recording .quick-record-summary-status {
  align-items: center !important;
  display: inline-flex !important;
  gap: 0.32rem !important;
  opacity: 1 !important;
}

#quickRecordPanel.is-recording .quick-record-summary-status::before {
  animation: zb-recording-pulse 1.1s ease-in-out infinite !important;
  background: #ef4444 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.46) !important;
  content: "" !important;
  height: 0.48rem !important;
  width: 0.48rem !important;
}

#quickRecordPanel.is-recording .quick-record-status {
  background: rgba(127, 29, 29, 0.22) !important;
  border: 1px solid rgba(248, 113, 113, 0.24) !important;
  border-radius: 999px !important;
  color: #fecaca !important;
  display: inline-flex !important;
  font-weight: 800 !important;
  padding: 0.24rem 0.58rem !important;
  width: fit-content !important;
}

#quickRecordPanel.is-recording .quick-record-elapsed {
  border-color: rgba(248, 113, 113, 0.34) !important;
  color: #fee2e2 !important;
}

@keyframes zb-recording-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.46);
  }
  70% {
    box-shadow: 0 0 0 0.45rem rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* P10PU final app-status visibility guard. */
body:not(.has-app-update) #pwaReloadButton,
body:not(.has-app-update) .pwa-reload-button,
body:not(.has-app-update) .header-update-button,
#pwaUpdateStatus.pwa-update-status.is-current {
  display: none !important;
}
body.has-app-update #pwaUpdateStatus.pwa-update-status:not(.is-current) {
  display: inline-flex !important;
}

section.card.app-screen.settings-screen[data-screen-panel="settings"] {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 26rem),
    radial-gradient(circle at 76% 6%, rgba(139, 92, 246, 0.18), transparent 28rem),
    radial-gradient(circle at 88% 76%, rgba(245, 158, 11, 0.10), transparent 24rem),
    linear-gradient(145deg, rgba(3, 12, 24, 0.98), rgba(7, 15, 32, 0.97)) !important;
  border-color: rgba(125, 211, 252, 0.14) !important;
}

section.card.app-screen.settings-screen[data-screen-panel="settings"] .screen-title {
  color: rgba(248, 250, 252, 0.98) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

/* P10PU Goal Map relationship view. */
.practice-map-workspace {
  background:
    radial-gradient(circle at 8% 8%, rgba(99, 102, 241, 0.18), transparent 22rem),
    radial-gradient(circle at 72% 42%, rgba(14, 165, 233, 0.12), transparent 30rem),
    linear-gradient(145deg, rgba(2, 8, 23, 0.98), rgba(4, 12, 26, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.2rem;
  gap: 0.85rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: 1rem;
}

.practice-map-header,
.practice-map-toolbar,
.practice-map-summary-bar,
.practice-map-side-card {
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.95rem;
  box-shadow: 0 20px 60px rgba(2, 8, 23, 0.28);
}

.practice-map-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 0.95rem;
}

.practice-map-title,
.practice-map-header-actions,
.practice-map-legend-row,
.practice-map-mode-toggle {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.practice-map-logo {
  align-items: center;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.32);
  color: white;
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 950;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.practice-map-title h3 {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  margin: 0;
}

.practice-map-title p,
.practice-map-toolbar p,
.practice-map-side-card p {
  color: rgba(203, 213, 225, 0.78);
  margin: 0.22rem 0 0;
}

.practice-map-title small {
  color: rgba(148, 163, 184, 0.86);
  display: block;
  font-weight: 750;
  margin-top: 0.35rem;
}

.practice-map-title p strong,
.practice-map-title small strong {
  color: rgba(248, 250, 252, 0.94);
}

.practice-map-header-actions button {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.practice-map-header-actions .secondary-button,
.practice-map-unlinked-actions .secondary-button {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.94);
}

.practice-map-header-actions .secondary-button:hover,
.practice-map-header-actions .secondary-button:focus-visible,
.practice-map-unlinked-actions .secondary-button:hover,
.practice-map-unlinked-actions .secondary-button:focus-visible {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(125, 211, 252, 0.36);
  color: #ffffff;
}

.practice-map-workspace svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.practice-map-header-actions svg {
  height: 1.1rem;
  width: 1.1rem;
}

.practice-map-toolbar {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(18rem, 1fr) auto;
  padding: 0.68rem;
}

.practice-map-mode-toggle {
  background: rgba(2, 8, 23, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.85rem;
  overflow: hidden;
}

.practice-map-mode-toggle button {
  background: transparent;
  border: 0;
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 0.72rem 0.95rem;
}

.practice-map-mode-toggle button.is-selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(59, 130, 246, 0.38));
  color: white;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.2);
}

.practice-map-legend-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.practice-map-legend-row.is-emphasized span {
  border-color: rgba(125, 211, 252, 0.46);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.18);
}

.practice-map-legend-row span,
.practice-map-goal-chip-row b {
  align-items: center;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.86);
  display: inline-flex;
  gap: 0.32rem;
  padding: 0.32rem 0.55rem;
  white-space: nowrap;
}

.practice-map-legend-row span svg {
  color: var(--practice-map-tone, rgba(203, 213, 225, 0.86));
}

.practice-map-legend-row svg,
.practice-map-card-icon svg,
.practice-map-goal-icon svg,
.practice-map-summary-bar article > span svg,
.practice-map-mini-goal span svg {
  height: 1rem;
  width: 1rem;
}

.practice-map-legend-row .is-goal,
.practice-map-goal-card {
  --practice-map-tone: rgba(139, 92, 246, 0.96);
}

.practice-map-legend-row .is-block,
.practice-map-block-card,
.practice-map-goal-card.is-block-root {
  --practice-map-tone: rgba(59, 130, 246, 0.96);
}

.practice-map-legend-row .is-drill,
.practice-map-item-card.is-drill {
  --practice-map-tone: rgba(34, 197, 94, 0.96);
}

.practice-map-legend-row .is-song,
.practice-map-item-card.is-song {
  --practice-map-tone: rgba(96, 165, 250, 0.96);
}

.practice-map-legend-row .is-activity,
.practice-map-item-card.is-activity {
  --practice-map-tone: rgba(20, 184, 166, 0.96);
}

.practice-map-legend-row .is-solo,
.practice-map-item-card.is-solo {
  --practice-map-tone: rgba(249, 115, 22, 0.96);
}

.practice-map-legend-row .is-reference,
.practice-map-card-icon.is-reference {
  --practice-map-tone: rgba(124, 58, 237, 0.96);
}

.practice-map-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  min-height: 0;
  overflow: hidden;
}

.practice-map-main {
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 22% 12%, rgba(59, 130, 246, 0.13), transparent 28%),
    radial-gradient(circle at 70% 68%, rgba(20, 184, 166, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(2, 8, 23, 0.78), rgba(15, 23, 42, 0.44));
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  cursor: grab;
  min-height: 0;
  overflow: auto;
  padding: 1.05rem;
  scroll-behavior: smooth;
  scrollbar-color: rgba(148, 163, 184, 0.34) rgba(15, 23, 42, 0.45);
  touch-action: none;
}

.practice-map-main:active {
  cursor: grabbing;
}

.practice-map-canvas {
  align-items: start;
  display: flex;
  gap: 1.15rem;
  min-height: min(54vh, 42rem);
  min-width: max-content;
  padding: 0.55rem 0.75rem 0.9rem;
}

.practice-map-goal-column {
  display: grid;
  gap: 0.85rem;
  min-width: 20.5rem;
  position: relative;
}

.practice-map-block-column {
  min-width: 22rem;
}

.practice-map-goal-card,
.practice-map-card,
.practice-map-empty-goal {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 8, 23, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.85rem;
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.28);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.practice-map-goal-card:hover,
.practice-map-card:hover,
.practice-map-mini-goal:hover {
  border-color: var(--practice-map-tone, rgba(125, 211, 252, 0.56));
  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.34), 0 0 24px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.practice-map-goal-card {
  align-items: center;
  display: grid;
  gap: 0.78rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-color: color-mix(in srgb, var(--practice-map-tone, #8b5cf6) 42%, transparent);
  min-height: 7.6rem;
  padding: 1rem;
}

.practice-map-goal-column.needs-content .practice-map-goal-card,
.practice-map-goal-column.coverage-low .practice-map-goal-card {
  border-color: rgba(245, 158, 11, 0.48);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.12);
}

.practice-map-goal-column.coverage-medium .practice-map-goal-card {
  border-color: rgba(59, 130, 246, 0.48);
}

.practice-map-goal-column.coverage-strong .practice-map-goal-card {
  border-color: rgba(45, 212, 191, 0.48);
}

.practice-map-goal-card.is-block-root {
  border-color: rgba(59, 130, 246, 0.42);
}

.practice-map-goal-icon,
.practice-map-card-icon,
.practice-map-summary-bar article > span {
  align-items: center;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(135deg, var(--practice-map-tone, rgba(124, 58, 237, 0.9)), rgba(15, 23, 42, 0.7));
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.18);
  color: white;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.practice-map-goal-copy {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.practice-map-goal-copy strong,
.practice-map-card strong,
.practice-map-empty-goal strong,
.practice-map-side-card strong,
.practice-map-mini-goal strong {
  color: rgba(248, 250, 252, 0.97);
  font-size: 1rem;
}

.practice-map-goal-copy small,
.practice-map-card small,
.practice-map-empty-goal span,
.practice-map-mini-goal small {
  color: rgba(203, 213, 225, 0.72);
}

.practice-map-card-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.practice-map-card-copy em {
  color: rgba(148, 163, 184, 0.82);
  font-size: 0.76rem;
  font-style: normal;
}

.practice-map-goal-card em {
  color: rgba(196, 181, 253, 0.95);
  font-style: normal;
  font-weight: 950;
}

.practice-map-coverage {
  background: rgba(15, 23, 42, 0.88);
  border-radius: 999px;
  display: block;
  height: 0.42rem;
  overflow: hidden;
  width: 100%;
}

.practice-map-coverage i {
  background: linear-gradient(90deg, var(--practice-map-tone, #a855f7), #22d3ee);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.practice-map-connector {
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.36), rgba(148, 163, 184, 0.05));
  height: 1.45rem;
  justify-self: center;
  margin: -0.5rem 0;
  width: 2px;
}

.practice-map-block-stack,
.practice-map-item-stack {
  display: grid;
  gap: 0.46rem;
}

.practice-map-card {
  align-items: center;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.72rem;
}

.practice-map-block-card {
  border-color: rgba(59, 130, 246, 0.38);
  position: relative;
}

.practice-map-item-card.is-drill {
  border-color: rgba(34, 197, 94, 0.3);
}

.practice-map-item-card.is-song {
  border-color: rgba(96, 165, 250, 0.32);
}

.practice-map-item-card.is-activity {
  border-color: rgba(45, 212, 191, 0.32);
}

.practice-map-item-card.is-solo {
  border-color: rgba(249, 115, 22, 0.34);
}

.practice-map-item-card {
  align-items: start;
}

.practice-map-reference-strip {
  display: grid;
  gap: 0.35rem;
  grid-column: 1 / -1;
  margin-left: 3rem;
}

.practice-map-reference-chip {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 0.65rem;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  display: inline-grid;
  font: inherit;
  gap: 0.42rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 0.38rem 0.5rem;
  text-align: left;
}

.practice-map-more-chip {
  color: rgba(196, 181, 253, 0.86);
  font-size: 0.76rem;
  font-weight: 850;
}

.practice-map-supported-goals {
  display: grid;
  gap: 0.46rem;
}

.practice-map-mini-goal {
  align-items: center;
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.48rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.62rem;
}

.practice-map-mini-goal span {
  align-items: center;
  background: rgba(139, 92, 246, 0.18);
  border-radius: 999px;
  color: rgba(196, 181, 253, 0.96);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.practice-map-mini-goal small {
  grid-column: 2;
}

.practice-map-mini-goal.is-empty {
  grid-template-columns: 1fr;
}

.practice-map-empty-goal {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
}

.practice-map-side {
  display: grid;
  gap: 0.9rem;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow: auto;
}

.practice-map-side-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
}

.practice-map-context-card b {
  color: rgba(226, 232, 240, 0.9);
}

.practice-map-detail-meter {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  height: 0.52rem;
  overflow: hidden;
}

.practice-map-detail-meter i {
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  display: block;
  height: 100%;
}

.practice-map-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.practice-map-detail-chip-row span {
  background: rgba(59, 130, 246, 0.13);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.92);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.28rem 0.5rem;
}

.practice-map-side-card header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.practice-map-side-card header span {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  color: #fde68a;
  font-weight: 950;
  padding: 0.18rem 0.5rem;
}

.practice-map-side-card .practice-map-subheader {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  margin-top: 0.25rem;
  padding-top: 0.78rem;
}

.practice-map-unlinked-list {
  display: grid;
  gap: 0.55rem;
}

.practice-map-unlinked-list article {
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.68rem;
}

.practice-map-unlinked-item-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0;
  text-align: left;
}

.practice-map-unlinked-item-button:hover strong,
.practice-map-unlinked-item-button:focus-visible strong {
  color: #ffffff;
}

.practice-map-unlinked-item-button:focus-visible {
  border-radius: 0.5rem;
  outline: 2px solid rgba(125, 211, 252, 0.42);
  outline-offset: 0.18rem;
}

.practice-map-unlinked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  grid-column: 1 / -1;
}

.practice-map-archive-button {
  color: rgba(203, 213, 225, 0.88);
}

.practice-map-archive-button:hover,
.practice-map-archive-button:focus-visible {
  border-color: rgba(94, 234, 212, 0.34);
  color: rgba(240, 253, 250, 0.98);
}

.practice-map-summary-bar {
  align-items: stretch;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.8rem;
}

.practice-map-summary-bar article {
  align-items: center;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto auto minmax(0, 1fr);
}

.practice-map-summary-bar article:last-child {
  border-right: 0;
}

.practice-map-summary-bar article.has-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 0.85rem;
  padding: 0.35rem;
}

.practice-map-summary-bar strong {
  color: rgba(248, 250, 252, 0.96);
  font-size: 1.32rem;
}

.practice-map-summary-bar small {
  color: rgba(203, 213, 225, 0.76);
}

.practice-map-pan-hint {
  align-items: center;
  color: rgba(203, 213, 225, 0.78);
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-size: 0.82rem;
}

.practice-map-pan-hint span {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

/* P12 Goal Map density pass: compact working map with goal-level visual identity. */
.practice-map-workspace {
  gap: 0.62rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: 0.72rem;
}

.practice-map-header,
.practice-map-toolbar,
.practice-map-summary-bar,
.practice-map-side-card {
  border-radius: 0.82rem;
  box-shadow: 0 16px 42px rgba(2, 8, 23, 0.22);
}

.practice-map-header {
  padding: 0.62rem 0.72rem;
}

.practice-map-logo {
  font-size: 1rem;
  height: 2.05rem;
  width: 2.05rem;
}

.practice-map-title h3 {
  font-size: clamp(1.35rem, 1.65vw, 1.8rem);
}

.practice-map-title p {
  font-size: 0.9rem;
  margin-top: 0.12rem;
}

.practice-map-title small {
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

.practice-map-header-actions .secondary-button {
  min-height: 2.25rem;
  padding-inline: 0.72rem;
}

.practice-map-toolbar {
  gap: 0.52rem;
  grid-template-columns: auto minmax(13rem, 1fr) auto;
  padding: 0.5rem;
}

.practice-map-toolbar p {
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0;
}

.practice-map-mode-toggle {
  border-radius: 0.72rem;
}

.practice-map-mode-toggle button {
  font-size: 0.82rem;
  min-height: 2.35rem;
  padding: 0.52rem 0.72rem;
}

.practice-map-legend-row {
  gap: 0.38rem;
}

.practice-map-legend-row span {
  font-size: 0.76rem;
  padding: 0.26rem 0.45rem;
}

.practice-map-layout {
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 17vw, 16.5rem);
}

.practice-map-main {
  border-radius: 0.86rem;
  padding: 0.65rem;
}

.practice-map-canvas {
  gap: 0.72rem;
  min-height: min(60vh, 44rem);
  padding: 0.32rem 0.42rem 0.55rem;
}

.practice-map-goal-column {
  gap: 0.52rem;
  min-width: clamp(14.5rem, 16vw, 16.25rem);
}

.practice-map-block-column {
  min-width: clamp(15rem, 18vw, 17rem);
}

.practice-map-goal-tone-0 {
  --practice-map-column-tone: rgba(139, 92, 246, 0.96);
  --practice-map-column-soft: rgba(139, 92, 246, 0.14);
  --practice-map-column-border: rgba(167, 139, 250, 0.42);
}

.practice-map-goal-tone-1 {
  --practice-map-column-tone: rgba(96, 165, 250, 0.96);
  --practice-map-column-soft: rgba(96, 165, 250, 0.13);
  --practice-map-column-border: rgba(147, 197, 253, 0.4);
}

.practice-map-goal-tone-2 {
  --practice-map-column-tone: rgba(45, 212, 191, 0.95);
  --practice-map-column-soft: rgba(45, 212, 191, 0.12);
  --practice-map-column-border: rgba(94, 234, 212, 0.38);
}

.practice-map-goal-tone-3 {
  --practice-map-column-tone: rgba(245, 158, 11, 0.95);
  --practice-map-column-soft: rgba(245, 158, 11, 0.12);
  --practice-map-column-border: rgba(251, 191, 36, 0.38);
}

.practice-map-goal-tone-4 {
  --practice-map-column-tone: rgba(34, 197, 94, 0.94);
  --practice-map-column-soft: rgba(34, 197, 94, 0.12);
  --practice-map-column-border: rgba(134, 239, 172, 0.36);
}

.practice-map-goal-tone-5 {
  --practice-map-column-tone: rgba(244, 114, 182, 0.92);
  --practice-map-column-soft: rgba(244, 114, 182, 0.12);
  --practice-map-column-border: rgba(249, 168, 212, 0.36);
}

.practice-map-goal-column[class*="practice-map-goal-tone"] {
  --practice-map-tone: var(--practice-map-column-tone);
}

.practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 70%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.91), rgba(2, 8, 23, 0.9));
  border-color: var(--practice-map-column-border);
  box-shadow:
    0 12px 30px rgba(2, 8, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.practice-map-goal-card {
  border-radius: 0.72rem;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 4.7rem;
  padding: 0.62rem;
}

.practice-map-goal-card em {
  align-self: start;
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid color-mix(in srgb, var(--practice-map-tone, #8b5cf6) 32%, transparent);
  border-radius: 999px;
  font-size: 0.68rem;
  grid-column: 2;
  justify-self: start;
  padding: 0.16rem 0.42rem;
}

.practice-map-goal-icon,
.practice-map-card-icon,
.practice-map-summary-bar article > span {
  height: 1.78rem;
  width: 1.78rem;
}

.practice-map-legend-row svg,
.practice-map-card-icon svg,
.practice-map-goal-icon svg,
.practice-map-summary-bar article > span svg,
.practice-map-mini-goal span svg {
  height: 0.88rem;
  width: 0.88rem;
}

.practice-map-goal-copy {
  gap: 0.2rem;
}

.practice-map-goal-copy strong,
.practice-map-card strong,
.practice-map-empty-goal strong,
.practice-map-side-card strong,
.practice-map-mini-goal strong {
  font-size: 0.9rem;
  line-height: 1.16;
}

.practice-map-goal-copy small,
.practice-map-card small,
.practice-map-empty-goal span,
.practice-map-mini-goal small {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.72rem;
  line-height: 1.25;
}

.practice-map-coverage {
  height: 0.34rem;
}

.practice-map-connector {
  background: linear-gradient(180deg, var(--practice-map-column-border, rgba(148, 163, 184, 0.32)), rgba(148, 163, 184, 0.03));
  height: 0.85rem;
  margin: -0.28rem 0;
}

.practice-map-block-stack,
.practice-map-item-stack {
  gap: 0.34rem;
}

.practice-map-card {
  border-radius: 0.68rem;
  gap: 0.44rem;
  padding: 0.48rem 0.52rem;
}

.practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-block-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 64%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 8, 23, 0.84));
  border-color: var(--practice-map-column-border);
}

.practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-item-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 58%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.76));
  border-left: 2px solid color-mix(in srgb, var(--practice-map-column-tone) 42%, transparent);
}

.practice-map-card-copy {
  gap: 0.08rem;
}

.practice-map-card-copy em {
  font-size: 0.68rem;
}

.practice-map-goal-view .practice-map-item-card .practice-map-card-copy em {
  display: none;
}

.practice-map-reference-strip {
  gap: 0.28rem;
  margin-left: 2.25rem;
}

.practice-map-reference-chip {
  border-radius: 0.55rem;
  font-size: 0.72rem;
  padding: 0.28rem 0.38rem;
}

.practice-map-mini-goal[class*="practice-map-goal-tone"] {
  --practice-map-tone: var(--practice-map-column-tone);
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 65%),
    rgba(15, 23, 42, 0.74);
  border-color: var(--practice-map-column-border);
}

.practice-map-mini-goal[class*="practice-map-goal-tone"] span {
  background: color-mix(in srgb, var(--practice-map-column-tone) 24%, rgba(15, 23, 42, 0.78));
  color: rgba(248, 250, 252, 0.96);
}

.practice-map-side {
  gap: 0.52rem;
}

.practice-map-side-card {
  gap: 0.42rem;
  padding: 0.62rem;
}

.practice-map-side-card p {
  font-size: 0.8rem;
  line-height: 1.38;
  margin-top: 0.1rem;
}

.practice-map-detail-meter {
  height: 0.38rem;
}

.practice-map-detail-chip-row {
  gap: 0.28rem;
}

.practice-map-detail-chip-row span {
  font-size: 0.68rem;
  padding: 0.2rem 0.38rem;
}

.practice-map-unlinked-card {
  display: block;
}

.practice-map-unlinked-card summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  list-style: none;
}

.practice-map-unlinked-card summary::-webkit-details-marker {
  display: none;
}

.practice-map-unlinked-card summary::after {
  align-items: center;
  border: solid rgba(226, 232, 240, 0.8);
  border-width: 0 2px 2px 0;
  color: rgba(226, 232, 240, 0.88);
  content: "";
  display: inline-flex;
  height: 0.48rem;
  justify-content: center;
  margin: 0 0.18rem;
  transform: rotate(-45deg);
  transition: transform 160ms ease, border-color 160ms ease;
  width: 0.48rem;
}

.practice-map-unlinked-card[open] > summary::after,
.practice-map-unlinked-card[open] summary::after {
  transform: rotate(45deg);
}

.practice-map-unlinked-card summary small {
  color: rgba(203, 213, 225, 0.76);
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
  margin-top: 0.14rem;
}

.practice-map-unlinked-card summary b {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  color: #fde68a;
  font-size: 0.78rem;
  font-weight: 720;
  padding: 0.16rem 0.45rem;
}

.practice-map-unlinked-card[open] > p,
.practice-map-unlinked-card[open] > header,
.practice-map-unlinked-card[open] > .practice-map-unlinked-list {
  margin-top: 0.5rem;
}

.practice-map-unlinked-guidance {
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.72rem;
  line-height: 1.35;
}

.practice-map-unlinked-list {
  gap: 0.38rem;
  max-height: min(30vh, 16rem);
  overflow: auto;
  padding-right: 0.12rem;
}

.practice-map-unlinked-list article {
  border-radius: 0.62rem;
  gap: 0.38rem;
  padding: 0.5rem;
}

.practice-map-unlinked-actions {
  gap: 0.34rem;
}

.practice-map-unlinked-actions .secondary-button {
  min-height: 2rem;
  padding-inline: 0.55rem;
}

.practice-map-warmup-card {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.08)),
    rgba(15, 23, 42, 0.66);
  border-color: rgba(245, 158, 11, 0.22);
}

.practice-map-warmup-card > header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.practice-map-warmup-card header small {
  color: rgba(253, 230, 138, 0.72);
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
  margin-top: 0.14rem;
}

.practice-map-warmup-card header b {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 999px;
  color: #fde68a;
  font-size: 0.78rem;
  padding: 0.16rem 0.45rem;
}

.practice-map-warmup-list {
  display: grid;
  gap: 0.34rem;
  margin-top: 0.55rem;
  max-height: min(24vh, 12rem);
  overflow: auto;
  padding-right: 0.12rem;
}

.practice-map-warmup-item {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.48));
  border: 1px solid rgba(245, 158, 11, 0.16);
  border-radius: 0.62rem;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.48rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.46rem 0.5rem;
  text-align: left;
}

.practice-map-warmup-item:hover,
.practice-map-warmup-item:focus-visible {
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(30, 41, 59, 0.66));
  border-color: rgba(245, 158, 11, 0.28);
  outline: none;
}

.practice-map-warmup-item small {
  color: rgba(203, 213, 225, 0.72);
}

.practice-map-warmup-badge {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 999px;
  color: #fde68a;
  display: inline-flex;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  margin-top: 0.26rem;
  padding: 0.18rem 0.42rem;
  width: fit-content;
}

.practice-map-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.practice-map-summary-bar {
  gap: 0.45rem;
  padding: 0.55rem;
}

.practice-map-summary-bar article {
  gap: 0.42rem;
  grid-template-columns: auto auto minmax(0, 1fr);
}

.practice-map-summary-bar strong {
  font-size: 1.05rem;
}

.practice-map-summary-bar small {
  font-size: 0.72rem;
  line-height: 1.2;
}

.practice-map-pan-hint {
  font-size: 0.74rem;
  gap: 0.9rem;
}

@media (max-width: 1180px) {
  .practice-map-toolbar,
  .practice-map-layout,
  .practice-map-summary-bar {
    grid-template-columns: 1fr;
  }

  .practice-map-legend-row {
    justify-content: flex-start;
  }

  .practice-map-layout {
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .practice-map-workspace {
    padding: 0.7rem;
  }

  .practice-map-header,
  .practice-map-title,
  .practice-map-header-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .practice-map-canvas {
    display: grid;
    min-width: 0;
  }

  .practice-map-goal-column,
  .practice-map-block-column {
    min-width: min(100%, 22rem);
  }
}

/* Goal-centric Goal Map simplification. */
.practice-map-plan-board {
  display: grid;
  gap: 0.7rem;
  grid-auto-columns: minmax(13.8rem, 17.5rem);
  grid-auto-flow: column;
  overflow-x: auto;
  padding: 0.08rem 0 0.35rem;
  scrollbar-color: rgba(45, 124, 100, 0.3) transparent;
}

.practice-map-plan-goal-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 251, 249, 0.78));
  border: 1px solid rgba(45, 124, 100, 0.16);
  border-radius: 0.78rem;
  display: grid;
  gap: 0.52rem;
  min-height: 12rem;
  padding: 0.62rem;
}

.practice-map-plan-goal-card header {
  align-items: center;
  display: grid;
  gap: 0.48rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.practice-map-plan-goal-card header strong {
  color: #17352f;
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.practice-map-plan-goal-card header small {
  color: #60716d;
  display: block;
  font-size: 0.74rem;
  font-weight: 560;
  margin-top: 0.1rem;
}

.practice-map-plan-goal-mark,
.practice-map-plan-type-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  justify-content: center;
}

.practice-map-plan-goal-mark {
  background: linear-gradient(135deg, rgba(45, 124, 100, 0.95), rgba(59, 130, 246, 0.78));
  color: #ffffff;
  height: 1.85rem;
  width: 1.85rem;
}

.practice-map-plan-goal-mark svg {
  height: 0.95rem;
  width: 0.95rem;
}

.practice-map-plan-item-list {
  display: grid;
  gap: 0.34rem;
}

.practice-map-plan-item-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(118, 107, 88, 0.13);
  border-radius: 0.58rem;
  color: #223246;
  display: grid;
  font: inherit;
  gap: 0.42rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 2.35rem;
  padding: 0.34rem 0.42rem;
  text-align: left;
  width: 100%;
}

button.practice-map-plan-item-row {
  cursor: pointer;
}

button.practice-map-plan-item-row:hover,
button.practice-map-plan-item-row:focus-visible {
  border-color: rgba(45, 124, 100, 0.34);
  box-shadow: 0 8px 18px rgba(27, 72, 62, 0.08);
  outline: none;
}

.practice-map-plan-type-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(124, 58, 237, 0.84));
  color: #ffffff;
  font-size: 0.68rem;
  height: 1.45rem;
  min-width: 1.45rem;
  padding: 0 0.32rem;
}

.practice-map-plan-item-copy {
  display: grid;
  min-width: 0;
}

.practice-map-plan-item-copy strong {
  color: #1f2c3d;
  font-size: 0.8rem;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-map-plan-artist,
.practice-map-plan-type-label {
  color: #65746f;
  font-size: 0.68rem;
  font-weight: 760;
}

.practice-map-plan-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-map-plan-type-label {
  background: rgba(236, 246, 243, 0.92);
  border: 1px solid rgba(45, 124, 100, 0.12);
  border-radius: 999px;
  padding: 0.14rem 0.34rem;
}

.practice-map-plan-empty {
  color: #60716d;
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.practice-map-plan-unlinked {
  background: rgba(255, 253, 247, 0.72);
  border: 1px solid rgba(180, 83, 9, 0.17);
  border-radius: 0.78rem;
  color: #223246;
  padding: 0.52rem;
}

.practice-map-plan-unlinked summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 850;
  gap: 0.45rem;
  justify-content: space-between;
  list-style: none;
}

.practice-map-plan-unlinked summary::-webkit-details-marker {
  display: none;
}

.practice-map-plan-unlinked summary::after {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  content: "";
  flex: 0 0 auto;
  height: 0.44rem;
  opacity: 0.72;
  transform: rotate(-45deg);
  transition: transform 160ms ease, opacity 160ms ease;
  width: 0.44rem;
}

.practice-map-plan-unlinked[open] summary::after {
  transform: rotate(45deg);
}

.practice-map-plan-unlinked summary > span {
  display: grid;
  flex: 1 1 auto;
  gap: 0.08rem;
  min-width: 0;
}

.practice-map-plan-unlinked summary strong {
  font-size: 0.86rem;
  line-height: 1.18;
}

.practice-map-plan-unlinked summary small {
  color: rgba(82, 96, 107, 0.72);
  font-size: 0.68rem;
  font-weight: 560;
  line-height: 1.2;
}

.practice-map-plan-unlinked summary b {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(180, 83, 9, 0.2);
  border-radius: 999px;
  color: #765018;
  font-size: 0.74rem;
  font-weight: 640;
  margin-left: auto;
  padding: 0.12rem 0.44rem;
}

.practice-map-plan-warmup {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(20, 184, 166, 0.07)),
    rgba(255, 253, 247, 0.66);
  border: 1px solid rgba(180, 83, 9, 0.14);
  border-radius: 0.78rem;
  color: #223246;
  padding: 0.58rem;
}

.practice-map-plan-warmup header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.practice-map-plan-warmup header strong {
  display: block;
  font-size: 0.88rem;
}

.practice-map-plan-warmup header small {
  color: #60716d;
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  margin-top: 0.08rem;
}

.practice-map-plan-warmup header b {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(180, 83, 9, 0.2);
  border-radius: 999px;
  color: #765018;
  font-size: 0.74rem;
  padding: 0.12rem 0.44rem;
}

.practice-map-plan-warmup-list {
  display: grid;
  gap: 0.24rem;
  margin-top: 0.48rem;
}

.practice-map-plan-unlinked-body {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.practice-map-plan-unlinked-guidance {
  color: rgba(82, 96, 107, 0.72);
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0;
}

.practice-map-unlinked-assignment-row {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(118, 107, 88, 0.13);
  border-radius: 0.68rem;
  display: grid;
  gap: 0.42rem;
  padding: 0.45rem;
}

.practice-map-unlinked-assignment-controls {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.practice-map-goal-select {
  background: rgba(2, 8, 23, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: rgba(248, 250, 252, 0.94);
  font: inherit;
  min-height: 2rem;
  min-width: 0;
  padding: 0.25rem 0.58rem;
}

.practice-map-workspace.is-goal-plan {
  grid-template-rows: auto minmax(0, 1fr);
}

.practice-map-workspace.is-goal-plan .practice-map-layout {
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 18vw, 18rem);
}

.practice-map-workspace.is-goal-plan .practice-map-main {
  cursor: auto;
  overflow: auto;
}

.practice-map-workspace.is-goal-plan .practice-map-canvas {
  display: grid;
  gap: 0.7rem;
  grid-auto-columns: minmax(13.8rem, 17.5rem);
  grid-auto-flow: column;
  min-height: min(62vh, 44rem);
  min-width: max-content;
  padding: 0.15rem 0.2rem 0.45rem;
}

.practice-map-workspace.is-goal-plan .practice-map-goal-column {
  gap: 0.48rem;
  min-width: 0;
}

.practice-map-workspace.is-goal-plan .practice-map-goal-card {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 4.2rem;
}

.practice-map-workspace.is-goal-plan .practice-map-item-card {
  border-radius: 0.58rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 2.75rem;
  padding: 0.42rem 0.5rem;
}

.practice-map-workspace.is-goal-plan .practice-map-card-copy em,
.practice-map-workspace.is-goal-plan .practice-map-coverage,
.practice-map-workspace.is-goal-plan .practice-map-connector,
.practice-map-workspace.is-goal-plan .practice-map-toolbar,
.practice-map-workspace.is-goal-plan .practice-map-summary-bar,
.practice-map-workspace.is-goal-plan .practice-map-pan-hint {
  display: none;
}

.practice-map-workspace.is-goal-plan .practice-map-unlinked-list article {
  grid-template-columns: auto minmax(0, 1fr);
}

.practice-map-workspace.is-goal-plan .practice-map-unlinked-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 900px) {
  .practice-map-plan-board,
  .practice-map-workspace.is-goal-plan .practice-map-canvas {
    grid-auto-columns: minmax(14.5rem, 82vw);
  }

  .practice-map-workspace.is-goal-plan .practice-map-layout,
  .practice-map-workspace.is-goal-plan .practice-map-unlinked-actions,
  .practice-map-unlinked-assignment-controls {
    grid-template-columns: 1fr;
  }
}

/* Goal Map premium planning board pass. */
.practice-map-standalone-panel {
  background:
    radial-gradient(circle at 14% 0%, rgba(45, 212, 191, 0.08), transparent 18rem),
    radial-gradient(circle at 92% 10%, rgba(96, 165, 250, 0.08), transparent 22rem),
    linear-gradient(180deg, rgba(250, 253, 252, 0.98), rgba(242, 247, 247, 0.96));
  border-color: rgba(84, 112, 122, 0.12);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  gap: 0.95rem;
  padding: 1.05rem;
}

.practice-map-standalone-panel .integrity-health-header {
  padding: 0 0.1rem;
}

.practice-map-standalone-panel .integrity-health-header h3 {
  color: #132c30;
  font-size: 1.18rem;
  letter-spacing: 0;
}

.practice-map-standalone-panel .integrity-health-header p {
  color: rgba(58, 73, 82, 0.76);
  font-size: 0.9rem;
}

.practice-map-standalone-panel .integrity-map-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(248, 251, 251, 0.44));
  border: 0;
  border-radius: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(87, 106, 118, 0.08);
  gap: 0.78rem;
  padding: 0.92rem;
}

.practice-map-standalone-panel .integrity-panel-label {
  padding: 0 0.12rem;
}

.practice-map-standalone-panel .integrity-panel-label strong {
  color: #172b35;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.practice-map-standalone-panel .integrity-panel-label span {
  color: rgba(82, 96, 107, 0.72);
}

.practice-map-plan-board {
  gap: 1rem;
  grid-auto-columns: minmax(15rem, 18.75rem);
  padding: 0.1rem 0.08rem 0.75rem;
}

.practice-map-plan-goal-card {
  --practice-map-plan-tone: var(--practice-map-column-tone, rgba(45, 124, 100, 0.92));
  --practice-map-plan-soft: var(--practice-map-column-soft, rgba(45, 212, 191, 0.1));
  background:
    radial-gradient(circle at 4% 4%, color-mix(in srgb, var(--practice-map-plan-tone) 20%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--practice-map-plan-tone) 12%, rgba(255, 255, 255, 0.82)), rgba(255, 255, 255, 0.54) 34%, color-mix(in srgb, var(--practice-map-plan-tone) 6%, rgba(246, 250, 250, 0.36)));
  border: 1px solid color-mix(in srgb, var(--practice-map-plan-tone) 26%, rgba(88, 111, 122, 0.1));
  border-radius: 1rem;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  gap: 0;
  min-height: 15.5rem;
  padding: 0.42rem 0.38rem 0.6rem;
}

.practice-map-plan-goal-card header {
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--practice-map-plan-tone) 24%, rgba(255, 255, 255, 0.9)), rgba(255, 255, 255, 0.58));
  border-radius: 0.82rem;
  gap: 0.58rem;
  margin: 0.04rem 0.04rem 0.62rem;
  min-height: 3.55rem;
  padding: 0.68rem 0.72rem;
}

.practice-map-plan-goal-card header strong {
  color: #10262d;
  font-size: 0.96rem;
  line-height: 1.12;
}

.practice-map-plan-goal-card header small {
  color: rgba(48, 66, 74, 0.68);
  font-size: 0.73rem;
  letter-spacing: 0.01em;
}

.practice-map-plan-goal-mark {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(135deg, var(--practice-map-plan-tone), color-mix(in srgb, var(--practice-map-plan-tone) 42%, #0f172a));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--practice-map-plan-tone) 22%, transparent);
  height: 1.9rem;
  width: 1.9rem;
}

.practice-map-plan-item-list {
  gap: 0.24rem;
  padding: 0 0.12rem;
}

.practice-map-plan-item-row {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-plan-tone, #3b82f6) 13%, rgba(255, 255, 255, 0.58)), rgba(255, 255, 255, 0.38));
  border-color: transparent;
  border-radius: 0.74rem;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--practice-map-plan-tone, #3b82f6) 32%, transparent),
    inset 0 0 0 1px rgba(84, 112, 122, 0.055);
  gap: 0.48rem;
  min-height: 2.62rem;
  padding: 0.46rem 0.5rem;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button.practice-map-plan-item-row:hover,
button.practice-map-plan-item-row:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-plan-tone, #3b82f6) 17%, rgba(255, 255, 255, 0.78)), rgba(255, 255, 255, 0.68));
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--practice-map-plan-tone, #2d7c64) 24%, rgba(84, 112, 122, 0.1)),
    0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.practice-map-plan-type-badge {
  background: color-mix(in srgb, var(--practice-map-plan-tone, #3b82f6) 18%, rgba(15, 23, 42, 0.78));
  box-shadow: none;
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.64rem;
  height: 1.42rem;
  min-width: 1.42rem;
}

.practice-map-plan-item-row.is-drill {
  --practice-map-plan-tone: rgba(34, 197, 94, 0.92);
}

.practice-map-plan-item-row.is-song {
  --practice-map-plan-tone: rgba(96, 165, 250, 0.94);
}

.practice-map-plan-item-row.is-activity {
  --practice-map-plan-tone: rgba(20, 184, 166, 0.92);
}

.practice-map-plan-item-row.is-solo {
  --practice-map-plan-tone: rgba(249, 115, 22, 0.9);
}

.practice-map-plan-goal-card.practice-map-goal-tone-0 {
  --practice-map-plan-tone: rgba(139, 92, 246, 0.9);
  --practice-map-plan-soft: rgba(139, 92, 246, 0.14);
}

.practice-map-plan-goal-card.practice-map-goal-tone-1 {
  --practice-map-plan-tone: rgba(96, 165, 250, 0.92);
  --practice-map-plan-soft: rgba(96, 165, 250, 0.13);
}

.practice-map-plan-goal-card.practice-map-goal-tone-2 {
  --practice-map-plan-tone: rgba(45, 212, 191, 0.9);
  --practice-map-plan-soft: rgba(45, 212, 191, 0.13);
}

.practice-map-plan-goal-card.practice-map-goal-tone-3 {
  --practice-map-plan-tone: rgba(245, 158, 11, 0.88);
  --practice-map-plan-soft: rgba(245, 158, 11, 0.13);
}

.practice-map-plan-goal-card.practice-map-goal-tone-4 {
  --practice-map-plan-tone: rgba(34, 197, 94, 0.88);
  --practice-map-plan-soft: rgba(34, 197, 94, 0.13);
}

.practice-map-plan-goal-card.practice-map-goal-tone-5 {
  --practice-map-plan-tone: rgba(244, 114, 182, 0.86);
  --practice-map-plan-soft: rgba(244, 114, 182, 0.13);
}

.practice-map-plan-item-copy strong {
  color: rgba(24, 37, 47, 0.94);
  font-size: 0.82rem;
  font-weight: 850;
}

.practice-map-plan-artist,
.practice-map-plan-type-label {
  color: rgba(74, 88, 98, 0.68);
  font-size: 0.67rem;
}

.practice-map-plan-type-label {
  background: transparent;
  border: 0;
  padding: 0;
}

.practice-map-plan-empty {
  background: rgba(255, 255, 255, 0.38);
  border-radius: 0.72rem;
  color: rgba(74, 88, 98, 0.68);
  padding: 0.7rem;
}

.practice-map-plan-unlinked {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 251, 235, 0.36));
  border: 0;
  border-radius: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
  margin-top: 0.08rem;
  padding: 0.58rem 0.68rem;
}

.practice-map-plan-unlinked summary {
  color: #263949;
  font-size: 0.84rem;
}

.practice-map-plan-unlinked summary b {
  background: rgba(245, 158, 11, 0.12);
  border-color: transparent;
  color: #8a5b14;
}

.practice-map-unlinked-assignment-row {
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(84, 112, 122, 0.08);
}

.practice-map-workspace.is-goal-plan {
  background:
    radial-gradient(circle at 18% 4%, rgba(45, 212, 191, 0.12), transparent 20rem),
    radial-gradient(circle at 82% 12%, rgba(96, 165, 250, 0.12), transparent 24rem),
    linear-gradient(145deg, rgba(3, 10, 24, 0.98), rgba(7, 17, 32, 0.98));
}

.practice-map-workspace.is-goal-plan .practice-map-main {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(2, 8, 23, 0.34));
  background-size: auto;
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 0.84rem;
}

.practice-map-workspace.is-goal-plan .practice-map-canvas {
  gap: 1rem;
  grid-auto-columns: minmax(15rem, 18.75rem);
  padding: 0.1rem 0.1rem 0.6rem;
}

.practice-map-workspace.is-goal-plan .practice-map-goal-column {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 18%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(15, 23, 42, 0.2));
  border-radius: 1rem;
  gap: 0.34rem;
  padding: 0.34rem;
}

.practice-map-workspace.is-goal-plan .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78));
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, rgba(148, 163, 184, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  min-height: 4.45rem;
}

.practice-map-workspace.is-goal-plan .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78));
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, rgba(148, 163, 184, 0.1));
}

.practice-map-workspace.is-goal-plan .practice-map-item-card {
  --practice-map-item-tone: rgba(96, 165, 250, 0.9);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 14%, rgba(15, 23, 42, 0.58)), rgba(15, 23, 42, 0.38));
  border-color: transparent;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--practice-map-item-tone) 44%, transparent),
    inset 0 0 0 1px rgba(148, 163, 184, 0.065);
}

.practice-map-workspace.is-goal-plan .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-item-card {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 14%, rgba(15, 23, 42, 0.58)), rgba(15, 23, 42, 0.38));
  border-color: transparent;
  border-left: 0;
}

.practice-map-workspace.is-goal-plan .practice-map-item-card.is-drill {
  --practice-map-item-tone: rgba(34, 197, 94, 0.9);
}

.practice-map-workspace.is-goal-plan .practice-map-item-card.is-song {
  --practice-map-item-tone: rgba(96, 165, 250, 0.92);
}

.practice-map-workspace.is-goal-plan .practice-map-item-card.is-activity {
  --practice-map-item-tone: rgba(20, 184, 166, 0.9);
}

.practice-map-workspace.is-goal-plan .practice-map-item-card.is-solo {
  --practice-map-item-tone: rgba(249, 115, 22, 0.9);
}

.practice-map-workspace.is-goal-plan .practice-map-item-card:hover,
.practice-map-workspace.is-goal-plan .practice-map-item-card:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 20%, rgba(30, 41, 59, 0.78)), rgba(30, 41, 59, 0.66));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 30%, rgba(148, 163, 184, 0.08)),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Goal Map final visual polish: preserve the dark dashboard, clarify semantic color. */
:root {
  --zb-system-warmup-tone: rgba(251, 191, 36, 0.92);
  --zb-system-warmup-soft: rgba(251, 191, 36, 0.12);
  --zb-system-warmup-border: rgba(253, 230, 138, 0.34);
  --zb-system-unlinked-tone: rgba(148, 163, 184, 0.9);
  --zb-system-unlinked-soft: rgba(148, 163, 184, 0.11);
  --zb-system-unlinked-border: rgba(148, 163, 184, 0.24);
}

.practice-map-goal-tone-0,
.practice-map-plan-goal-card.practice-map-goal-tone-0 {
  --practice-map-column-tone: rgba(139, 92, 246, 0.96);
  --practice-map-column-soft: rgba(139, 92, 246, 0.13);
  --practice-map-column-border: rgba(167, 139, 250, 0.42);
}

.practice-map-goal-tone-1,
.practice-map-plan-goal-card.practice-map-goal-tone-1 {
  --practice-map-column-tone: rgba(56, 189, 248, 0.95);
  --practice-map-column-soft: rgba(56, 189, 248, 0.12);
  --practice-map-column-border: rgba(125, 211, 252, 0.38);
}

.practice-map-goal-tone-2,
.practice-map-plan-goal-card.practice-map-goal-tone-2 {
  --practice-map-column-tone: rgba(20, 184, 166, 0.94);
  --practice-map-column-soft: rgba(20, 184, 166, 0.12);
  --practice-map-column-border: rgba(94, 234, 212, 0.34);
}

.practice-map-goal-tone-3,
.practice-map-plan-goal-card.practice-map-goal-tone-3 {
  --practice-map-column-tone: rgba(244, 63, 94, 0.92);
  --practice-map-column-soft: rgba(244, 63, 94, 0.11);
  --practice-map-column-border: rgba(251, 113, 133, 0.34);
}

.practice-map-goal-tone-4,
.practice-map-plan-goal-card.practice-map-goal-tone-4 {
  --practice-map-column-tone: rgba(16, 185, 129, 0.92);
  --practice-map-column-soft: rgba(16, 185, 129, 0.11);
  --practice-map-column-border: rgba(110, 231, 183, 0.32);
}

.practice-map-goal-tone-5,
.practice-map-plan-goal-card.practice-map-goal-tone-5 {
  --practice-map-column-tone: rgba(217, 70, 239, 0.9);
  --practice-map-column-soft: rgba(217, 70, 239, 0.11);
  --practice-map-column-border: rgba(232, 121, 249, 0.32);
}

.practice-map-workspace.is-goal-plan {
  background:
    radial-gradient(circle at 12% 2%, rgba(45, 212, 191, 0.13), transparent 23rem),
    radial-gradient(circle at 82% 8%, rgba(56, 189, 248, 0.11), transparent 27rem),
    radial-gradient(circle at 74% 86%, rgba(14, 165, 233, 0.07), transparent 24rem),
    linear-gradient(145deg, rgba(3, 10, 24, 0.99), rgba(5, 15, 31, 0.98) 52%, rgba(3, 12, 24, 0.99));
  border-color: rgba(125, 211, 252, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.practice-map-workspace.is-goal-plan .practice-map-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(2, 8, 23, 0.82));
  border-color: rgba(125, 211, 252, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.24);
}

.practice-map-workspace.is-goal-plan .practice-map-logo {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.96), rgba(59, 130, 246, 0.86));
  box-shadow: 0 0 24px rgba(45, 212, 191, 0.22);
}

.practice-map-workspace.is-goal-plan .practice-map-main {
  background:
    linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(125, 211, 252, 0.026) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(45, 212, 191, 0.08), transparent 30%),
    radial-gradient(circle at 76% 76%, rgba(56, 189, 248, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(2, 8, 23, 0.38));
  background-size: 38px 38px, 38px 38px, auto, auto, auto;
  border-color: rgba(125, 211, 252, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(15, 23, 42, 0.28);
}

.practice-map-workspace.is-goal-plan .practice-map-goal-column {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 16%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.28));
  border: 1px solid color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 16%, rgba(125, 211, 252, 0.1));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.practice-map-workspace.is-goal-plan .practice-map-goal-card {
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 28%, rgba(148, 163, 184, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.practice-map-workspace.is-goal-plan .practice-map-goal-card:hover,
.practice-map-workspace.is-goal-plan .practice-map-goal-card:focus-visible,
.practice-map-workspace.is-goal-plan .practice-map-mini-goal:hover,
.practice-map-workspace.is-goal-plan .practice-map-mini-goal:focus-visible {
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 46%, rgba(125, 211, 252, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.2),
    0 0 24px color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 14%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.practice-map-workspace.is-goal-plan .practice-map-item-card:hover,
.practice-map-workspace.is-goal-plan .practice-map-item-card:focus-visible {
  border-color: transparent;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--practice-map-item-tone) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--practice-map-item-tone) 22%, rgba(148, 163, 184, 0.08)),
    0 13px 28px rgba(0, 0, 0, 0.18);
  outline: none;
  transform: translateY(-1px);
}

.practice-map-warmup-card {
  background:
    radial-gradient(circle at 0% 0%, var(--zb-system-warmup-soft), transparent 62%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.58));
  border-color: var(--zb-system-warmup-border);
}

.practice-map-warmup-card header small,
.practice-map-warmup-item small {
  color: rgba(254, 240, 138, 0.74);
}

.practice-map-warmup-card header b,
.practice-map-warmup-badge {
  background: color-mix(in srgb, var(--zb-system-warmup-tone) 16%, rgba(15, 23, 42, 0.72));
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone) 36%, transparent);
  color: #fef3c7;
}

.practice-map-warmup-item {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-warmup-tone) 15%, rgba(15, 23, 42, 0.64)), rgba(15, 23, 42, 0.42));
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone) 24%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zb-system-warmup-tone) 42%, transparent);
}

.practice-map-warmup-item .practice-map-card-icon {
  --practice-map-tone: var(--zb-system-warmup-tone);
}

.practice-map-warmup-item:hover,
.practice-map-warmup-item:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-warmup-tone) 21%, rgba(30, 41, 59, 0.76)), rgba(30, 41, 59, 0.62));
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone) 38%, transparent);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zb-system-warmup-tone) 62%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.practice-map-unlinked-card {
  background:
    radial-gradient(circle at 0% 0%, var(--zb-system-unlinked-soft), transparent 62%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 8, 23, 0.58));
  border-color: var(--zb-system-unlinked-border);
}

.practice-map-unlinked-card summary b {
  background: color-mix(in srgb, var(--zb-system-unlinked-tone) 15%, rgba(15, 23, 42, 0.76));
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone) 28%, transparent);
  color: rgba(226, 232, 240, 0.92);
}

.practice-map-unlinked-card summary::after {
  background: transparent;
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone) 42%, rgba(226, 232, 240, 0.72));
  border-radius: 0;
  border-style: solid;
  border-width: 0 2px 2px 0;
  content: "";
  height: 0.48rem;
  transform: rotate(-45deg);
  width: 0.48rem;
}

.practice-map-unlinked-card[open] > summary::after,
.practice-map-unlinked-card[open] summary::after {
  transform: rotate(45deg);
}

.practice-map-unlinked-list article {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-unlinked-tone) 11%, rgba(15, 23, 42, 0.66)), rgba(15, 23, 42, 0.44));
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone) 20%, transparent);
}

.practice-map-unlinked-list article .practice-map-card-icon {
  --practice-map-tone: var(--zb-system-unlinked-tone);
}

.practice-map-unlinked-list article:hover,
.practice-map-unlinked-list article:focus-within {
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone) 34%, transparent);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zb-system-unlinked-tone) 48%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

.practice-map-plan-warmup {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--zb-system-warmup-tone) 14%, rgba(255, 255, 255, 0.76)), rgba(255, 255, 255, 0.46));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zb-system-warmup-tone) 24%, transparent);
}

.practice-map-plan-warmup header b {
  background: color-mix(in srgb, var(--zb-system-warmup-tone) 14%, rgba(255, 255, 255, 0.82));
  border-color: transparent;
  color: #7a5314;
}

.practice-map-plan-unlinked {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--zb-system-unlinked-tone) 12%, rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.46));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zb-system-unlinked-tone) 18%, transparent);
}

.practice-map-plan-unlinked summary b {
  background: color-mix(in srgb, var(--zb-system-unlinked-tone) 14%, rgba(255, 255, 255, 0.82));
  border-color: transparent;
  color: #475569;
}

.practice-map-goal-copy strong,
.practice-map-plan-goal-card header strong {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.practice-map-goal-copy small,
.practice-map-plan-goal-card header small {
  font-weight: 540;
  opacity: 0.86;
}

.pwa-install-prompt {
  align-items: center;
  background:
    radial-gradient(circle at 10% 0%, rgba(94, 234, 212, 0.18), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 8, 23, 0.94));
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 1.15rem;
  bottom: 1.25rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46), 0 0 36px rgba(45, 212, 191, 0.12);
  color: rgba(248, 250, 252, 0.95);
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: min(94vw, 34rem);
  opacity: 0;
  padding: 1rem;
  position: fixed;
  right: 1.25rem;
  transform: translateY(0.85rem);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 10000;
}

.pwa-install-prompt[hidden] {
  display: none !important;
}

.pwa-install-prompt.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pwa-install-prompt-orb {
  align-items: center;
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
  border-radius: 0.85rem;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.24);
  color: #ffffff;
  display: inline-flex;
  font-size: 1.3rem;
  font-weight: 950;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.pwa-install-prompt-copy {
  min-width: 0;
}

.pwa-install-prompt-kicker {
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin: 0 0 0.18rem;
  text-transform: uppercase;
}

.pwa-install-prompt h2 {
  color: #f8fafc;
  font-size: 1.12rem;
  line-height: 1.15;
  margin: 0;
}

.pwa-install-prompt p {
  color: rgba(203, 213, 225, 0.86);
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0.35rem 0 0;
}

.pwa-install-prompt-fallback {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 0.7rem;
  color: #fde68a !important;
  padding: 0.55rem 0.65rem;
}

.pwa-install-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  grid-column: 1 / -1;
}

.pwa-install-prompt-actions button {
  min-height: 2.45rem;
}

.pwa-install-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.22);
}

.pwa-install-prompt .ghost-button {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.86);
}

#scheduleBuilderScheduleTray .schedule-builder-schedule-select {
  background: rgba(2, 8, 20, 0.92) !important;
}

#scheduleBuilderScheduleTray .schedule-builder-schedule-select:hover,
#scheduleBuilderScheduleTray .schedule-builder-schedule-select:focus-visible,
#scheduleBuilderScheduleTray .schedule-builder-schedule-card.is-selected .schedule-builder-schedule-select {
  background: rgba(15, 23, 42, 0.96) !important;
}

@media (max-width: 760px) {
  .pwa-install-prompt {
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }
}

.pwa-update-banner {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 14rem),
    linear-gradient(145deg, rgba(8, 20, 36, 0.96), rgba(4, 11, 23, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  bottom: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.34);
  color: rgba(248, 250, 252, 0.94);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 50%;
  max-width: min(42rem, calc(100vw - 2rem));
  padding: 0.82rem 0.9rem;
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 1200;
}

.pwa-update-banner[hidden] {
  display: none !important;
}

.pwa-update-banner-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.pwa-update-banner-copy strong {
  color: #f8fafc;
  font-size: 0.92rem;
  line-height: 1.2;
}

.pwa-update-banner-copy span,
.pwa-update-banner-copy em {
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.25;
}

.pwa-update-banner-copy em {
  color: rgba(253, 230, 138, 0.9);
}

.pwa-update-banner-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.pwa-update-banner-actions .secondary-button {
  min-height: 2.12rem;
  padding: 0.42rem 0.74rem;
  white-space: nowrap;
}

.pwa-update-banner-actions [data-pwa-update-now] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 58%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(79, 70, 229, 0.84));
  border-color: rgba(165, 243, 252, 0.28);
  color: #ffffff;
}

.pwa-update-banner-actions [data-pwa-update-now]:disabled {
  background: rgba(30, 41, 59, 0.64);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
  color: rgba(203, 213, 225, 0.58);
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .pwa-update-banner {
    bottom: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    left: 0.75rem;
    max-width: none;
    right: 0.75rem;
    transform: none;
    width: auto;
  }

  .pwa-update-banner-actions {
    justify-content: flex-end;
  }
}

/* Build metadata and update controls: keep manual checks visible and compact. */
.app-build-line {
  max-width: 100%;
}

#appVersionDisplay.prominent-build-chip,
.practice-rail-version-badge,
.header-version-badge {
  max-width: min(100%, 18rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body #pwaUpdateStatus.pwa-update-status,
body #pwaUpdateStatus.pwa-update-status.is-current,
body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status.is-current {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.9) !important;
  display: inline-flex !important;
  gap: 0.36rem !important;
  max-width: min(100%, 21rem) !important;
  min-height: 1.7rem !important;
  padding: 0.24rem 0.42rem !important;
}

body #pwaUpdateStatus.pwa-update-status.update-available {
  background: rgba(120, 53, 15, 0.48) !important;
  border-color: rgba(251, 191, 36, 0.34) !important;
  color: #fff7d6 !important;
}

body #pwaUpdateStatus.pwa-update-status.update-error {
  background: rgba(69, 10, 10, 0.48) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
  color: #fee2e2 !important;
}

body #pwaUpdateStatus.pwa-update-status #pwaVersionLabel,
body #pwaUpdateStatus.pwa-update-status #pwaUpdateMessage {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #pwaUpdateStatus.pwa-update-status #pwaReloadButton.pwa-reload-button,
body:not(.has-app-update) #pwaReloadButton.pwa-reload-button,
body.has-app-update #pwaReloadButton.pwa-reload-button {
  display: inline-flex !important;
  min-height: 1.34rem !important;
  opacity: 1 !important;
  padding: 0.16rem 0.44rem !important;
  pointer-events: auto !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

/* Progress screen redirection: Dashboard / Journal / Report destinations. */
.log-card[data-screen-panel="log"] {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.13), transparent 26rem),
    radial-gradient(circle at 78% 2%, rgba(139, 92, 246, 0.16), transparent 30rem),
    linear-gradient(145deg, rgba(3, 10, 20, 0.97), rgba(2, 6, 23, 0.94)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 18px !important;
  color: rgba(248, 250, 252, 0.94);
  padding: 0.78rem !important;
}

.log-card[data-screen-panel="log"] > .section-header {
  align-items: center !important;
  background: rgba(2, 8, 23, 0.34) !important;
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  grid-template-columns: minmax(12rem, 1fr) auto !important;
  margin-bottom: 0.52rem !important;
  padding: 0.62rem 0.72rem !important;
}

.log-card[data-screen-panel="log"] .screen-title {
  font-size: 1.32rem !important;
}

.log-card[data-screen-panel="log"] .section-note {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.84rem !important;
}

.progress-header-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.42rem !important;
  justify-content: flex-end !important;
}

.progress-command-row {
  gap: 0.38rem !important;
}

.progress-command-row button,
.progress-period-nav-button,
#progressPeriodTodayButton {
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  min-height: 2.1rem !important;
  padding: 0.34rem 0.64rem !important;
}

.progress-period-navigation {
  align-items: center !important;
  background: rgba(2, 8, 23, 0.54) !important;
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.34rem !important;
  margin: 0 !important;
  padding: 0.22rem !important;
}

.progress-view-mode-selector {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 0.14rem !important;
  grid-template-columns: repeat(3, minmax(3.5rem, 1fr)) !important;
  padding: 0 !important;
}

.progress-view-mode-selector button,
.progress-period-stepper button {
  border-radius: 10px !important;
}

.progress-view-mode-selector button {
  color: rgba(203, 213, 225, 0.82) !important;
  min-height: 2rem !important;
  padding: 0.28rem 0.5rem !important;
}

.progress-view-mode-selector button.is-active {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.24) !important;
  color: #ffffff !important;
}

.progress-period-stepper {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 0.24rem !important;
  grid-template-columns: auto minmax(10rem, 1fr) auto auto !important;
  padding: 0 !important;
}

.progress-period-label {
  color: #f8fafc !important;
  font-size: 0.86rem !important;
  min-width: 11rem !important;
  text-align: center !important;
}

.progress-primary-tabs.myzone-workspace-tabs {
  background: rgba(2, 8, 23, 0.42) !important;
  border: 1px solid rgba(125, 211, 252, 0.14) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 0.28rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0.48rem 0 0.56rem !important;
  padding: 0.28rem !important;
}

.progress-primary-tabs.myzone-workspace-tabs button {
  border-radius: 11px !important;
  min-height: 2.75rem !important;
  padding: 0.42rem 0.68rem !important;
}

.progress-primary-tabs.myzone-workspace-tabs button.is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.28), transparent 50%),
    linear-gradient(135deg, rgba(79, 70, 229, 0.72), rgba(2, 132, 199, 0.24)) !important;
  border-color: rgba(147, 197, 253, 0.56) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(14, 165, 233, 0.12) !important;
}

.progress-primary-tabs.myzone-workspace-tabs strong {
  color: #f8fafc !important;
  font-size: 0.9rem !important;
}

.progress-primary-tabs.myzone-workspace-tabs small {
  color: rgba(203, 213, 225, 0.7) !important;
  font-size: 0.68rem !important;
}

.progress-dashboard-panel {
  color: rgba(248, 250, 252, 0.92);
}

.progress-dashboard-shell {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: minmax(20rem, 0.9fr) minmax(24rem, 1fr) minmax(18rem, 0.72fr);
  grid-template-areas:
    "metrics metrics metrics"
    "hero items rhythm"
    "hero type rhythm"
    "calendar goals rhythm"
    "calendar activity activity"
    "achievements achievements achievements";
  width: 100%;
}

.progress-dashboard-metrics { grid-area: metrics; }
.progress-dashboard-hero { grid-area: hero; }
.progress-dashboard-calendar { grid-area: calendar; }
.progress-dashboard-rhythm { grid-area: rhythm; }
.progress-dashboard-type { grid-area: type; }
.progress-dashboard-items { grid-area: items; }
.progress-dashboard-goals { grid-area: goals; }
.progress-dashboard-activity { grid-area: activity; }
.progress-dashboard-signals { grid-area: signals; }
.progress-dashboard-achievements { grid-area: achievements; }

.progress-dashboard-signals {
  display: none !important;
}

.progress-dashboard-card,
.progress-momentum-stage.progress-dashboard-hero,
.progress-explore-map.progress-dashboard-calendar,
.progress-activity-flow.progress-dashboard-activity,
.progress-focus-signals.progress-dashboard-signals {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.68)) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 46px rgba(2, 6, 23, 0.2) !important;
  min-width: 0;
  padding: 0.78rem !important;
}

.progress-dashboard-card header,
.progress-activity-flow header,
.progress-explore-map header,
.progress-focus-signals header {
  display: grid !important;
  gap: 0.12rem !important;
  margin: 0 0 0.58rem !important;
}

.progress-card-kicker,
.progress-kicker {
  color: #7dd3fc !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.progress-dashboard-card h3,
.progress-activity-flow h3,
.progress-explore-map h3,
.progress-focus-signals h3 {
  color: #f8fafc !important;
  font-size: 1rem !important;
  line-height: 1.14 !important;
  margin: 0 !important;
}

.progress-dashboard-card p,
.progress-explore-map header p {
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.progress-dashboard-metrics {
  display: grid !important;
  gap: 0.52rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

.progress-overview-stat {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, var(--stat-glow, rgba(34, 211, 238, 0.18)), transparent 58%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(2, 8, 23, 0.7)) !important;
  border: 1px solid var(--stat-border, rgba(34, 211, 238, 0.18)) !important;
  border-radius: 14px !important;
  display: grid;
  gap: 0.08rem 0.62rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 4.35rem;
  padding: 0.68rem !important;
}

.progress-overview-stat::before {
  background: linear-gradient(135deg, var(--stat-color, #22d3ee), rgba(124, 58, 237, 0.8));
  border-radius: 12px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--stat-color, #22d3ee) 28%, transparent);
  content: "";
  grid-row: 1 / span 2;
  height: 2.35rem;
  width: 2.35rem;
}

.progress-overview-stat.is-practice { --stat-color: #a855f7; --stat-glow: rgba(168, 85, 247, 0.22); --stat-border: rgba(168, 85, 247, 0.28); }
.progress-overview-stat.is-days { --stat-color: #38bdf8; --stat-glow: rgba(56, 189, 248, 0.18); --stat-border: rgba(56, 189, 248, 0.28); }
.progress-overview-stat.is-completed { --stat-color: #34d399; --stat-glow: rgba(52, 211, 153, 0.18); --stat-border: rgba(52, 211, 153, 0.26); }
.progress-overview-stat.is-recordings { --stat-color: #fb923c; --stat-glow: rgba(251, 146, 60, 0.18); --stat-border: rgba(251, 146, 60, 0.26); }

.progress-overview-stat strong {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.progress-overview-stat span {
  color: rgba(203, 213, 225, 0.7) !important;
  font-size: 0.78rem !important;
}

.progress-momentum-stage.progress-dashboard-hero {
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.18), transparent 38%),
    radial-gradient(circle at 78% 2%, rgba(168, 85, 247, 0.26), transparent 44%),
    linear-gradient(135deg, rgba(13, 35, 54, 0.94), rgba(20, 16, 44, 0.9)) !important;
  gap: 0.6rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.progress-momentum-copy h3 {
  color: #ffffff !important;
  font-size: clamp(2.35rem, 4.4vw, 3.8rem) !important;
}

.progress-momentum-ring {
  height: 7.2rem !important;
}

.progress-momentum-metrics {
  gap: 0.38rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.progress-momentum-now {
  display: grid;
  gap: 0.36rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.progress-momentum-now span {
  background: rgba(2, 8, 23, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  display: grid;
  gap: 0.06rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
}

.progress-momentum-now small {
  color: rgba(203, 213, 225, 0.64);
  font-size: 0.62rem;
  font-weight: 880;
  text-transform: uppercase;
}

.progress-momentum-now strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.82rem;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-signal-pill,
.progress-signal-row,
.progress-activity-row,
.progress-map-week-button,
.progress-map-day,
.progress-journal-open-button {
  background: rgba(2, 8, 23, 0.44) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
}

.progress-momentum-spark {
  height: 3.4rem !important;
}

.progress-dashboard-rhythm .progress-trend-bars {
  background: rgba(2, 8, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 14px;
  display: block;
  min-height: 12rem;
  padding: 0.72rem;
}

.progress-dashboard-rhythm {
  align-content: stretch !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.progress-trend-bars.has-contextual-trend {
  display: block;
  grid-template-columns: none;
  min-height: auto;
}

.progress-trend-bars.has-empty-trend {
  display: block;
  grid-template-columns: none;
  min-height: auto;
}

.progress-trend-frame {
  align-items: stretch;
  display: grid;
  gap: 0.5rem 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(5.8rem, 0.24fr);
  grid-template-areas:
    "y plot best"
    ". x best";
  min-width: 0;
}

.progress-trend-axis-label,
.progress-trend-x-labels small,
.progress-trend-best-day small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.62rem;
  font-weight: 840;
  letter-spacing: 0;
}

.progress-trend-axis-y {
  align-self: center;
  grid-area: y;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.progress-trend-plot {
  align-items: end;
  display: grid;
  gap: 0.22rem;
  grid-area: plot;
  grid-template-columns: repeat(30, minmax(4px, 1fr));
  min-height: 9.6rem;
  overflow: visible;
  padding: 0.18rem 0.12rem 0;
  position: relative;
}

.progress-trend-bars.has-contextual-trend .progress-trend-bar {
  background: rgba(71, 85, 105, 0.48);
  border-radius: 999px 999px 4px 4px;
  display: block;
  height: max(0.45rem, var(--bar-height, 0%));
  min-height: 0.45rem;
  position: relative;
  z-index: 1;
}

.progress-trend-bars.has-contextual-trend .progress-trend-bar.has-practice {
  background: linear-gradient(180deg, #67e8f9, #4f46e5);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.22);
}

.progress-trend-bars.has-contextual-trend .progress-trend-bar.is-best-day {
  background: linear-gradient(180deg, #fde68a, #22d3ee);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.24);
}

.progress-trend-bar:hover::after,
.progress-trend-bar:focus-visible::after {
  background: rgba(3, 10, 24, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 10px;
  bottom: calc(100% + 0.5rem);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.32);
  color: rgba(248, 250, 252, 0.94);
  content: attr(data-tooltip);
  font-size: 0.7rem;
  left: 50%;
  line-height: 1.35;
  min-width: 9rem;
  padding: 0.5rem 0.58rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: pre-line;
  z-index: 5;
}

.progress-trend-average {
  border-top: 1px dashed rgba(251, 191, 36, 0.74);
  bottom: var(--average-bottom);
  left: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}

.progress-trend-average span {
  background: rgba(3, 10, 24, 0.96);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  color: #fde68a;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1;
  padding: 0.22rem 0.42rem;
  position: absolute;
  right: 0;
  top: -0.6rem;
}

.progress-trend-x-labels {
  display: grid;
  gap: 0.4rem;
  grid-area: x;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.progress-trend-x-labels small:nth-child(2) {
  text-align: center;
  text-transform: uppercase;
}

.progress-trend-x-labels small:last-child {
  text-align: right;
}

.progress-trend-best-day {
  align-content: center;
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.2rem;
  grid-area: best;
  padding: 0.58rem;
}

.progress-trend-best-day strong {
  color: #f8fafc;
  font-size: 1rem;
}

.progress-rhythm-review-grid {
  align-self: stretch;
  display: grid;
  gap: 0.52rem;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  margin-top: 0.62rem;
  min-height: 0;
}

.progress-rhythm-review-card {
  align-content: start;
  background: rgba(2, 8, 23, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  padding: 0.58rem;
}

.progress-rhythm-review-card header {
  display: grid !important;
  gap: 0.06rem !important;
  margin: 0 !important;
}

.progress-rhythm-review-card h4 {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.86rem;
  line-height: 1.15;
  margin: 0;
}

.progress-recording-signals,
.progress-notes-signals {
  display: grid;
  gap: 0.42rem;
}

.progress-recording-stats {
  display: grid;
  gap: 0.36rem;
}

.progress-recording-stats span,
.progress-note-preview {
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.48rem 0.56rem;
}

.progress-recording-stats small,
.progress-note-preview small {
  color: rgba(203, 213, 225, 0.64);
  font-size: 0.62rem;
  font-weight: 880;
  text-transform: uppercase;
}

.progress-recording-stats strong,
.progress-note-preview strong {
  color: rgba(248, 250, 252, 0.92);
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.progress-notes-list {
  display: grid;
  gap: 0.36rem;
}

.progress-note-preview p {
  color: rgba(203, 213, 225, 0.72);
  display: -webkit-box;
  font-size: 0.72rem;
  line-height: 1.28;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.progress-recording-view-button {
  justify-self: start;
  min-height: 2.1rem;
  padding: 0.38rem 0.7rem;
}

.progress-donut-breakdown.progress-goal-progress-list {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.46rem !important;
  grid-template-columns: 1fr !important;
}

.progress-goal-progress-row {
  background: rgba(2, 8, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  display: grid;
  gap: 0.38rem;
  overflow: hidden;
  padding: 0.52rem 0.58rem;
}

.progress-goal-progress-row div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.progress-goal-progress-row strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.86rem;
  line-height: 1.2;
}

.progress-goal-progress-row span {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.72rem;
}

.progress-goal-progress-row i {
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.88)) 0 0 / var(--goal-progress, 0%) 100% no-repeat,
    rgba(71, 85, 105, 0.32);
  border-radius: 999px;
  height: 0.4rem;
}

.progress-donut-breakdown {
  align-items: center !important;
  gap: 0.72rem !important;
  grid-template-columns: minmax(6.8rem, 0.72fr) minmax(0, 1fr) !important;
}

.progress-donut-breakdown:has(.progress-empty-state) {
  grid-template-columns: 1fr !important;
}

.progress-donut-breakdown .progress-empty-state {
  background: rgba(2, 8, 23, 0.38);
  border: 1px dashed rgba(125, 211, 252, 0.2);
  border-radius: 12px;
  color: rgba(203, 213, 225, 0.72);
  margin: 0;
  padding: 0.9rem;
}

.progress-donut-chart {
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.1);
  min-width: 6.8rem;
  padding: 1rem !important;
}

.progress-donut-chart::after {
  background: rgba(3, 10, 20, 0.96) !important;
  inset: 24% !important;
}

.progress-donut-legend {
  gap: 0.44rem !important;
}

.progress-donut-legend-item {
  background: rgba(2, 8, 23, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 10px;
  gap: 0.42rem !important;
  padding: 0.38rem 0.48rem;
}

.progress-donut-legend-item span {
  color: rgba(248, 250, 252, 0.88) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-donut-legend-item strong {
  color: #ffffff !important;
}

.progress-secondary-context {
  background: rgba(2, 8, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 0.42rem;
  grid-column: 1 / -1;
  padding: 0.54rem 0.6rem;
}

.progress-secondary-context > strong {
  color: rgba(125, 211, 252, 0.92);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.progress-secondary-context-list {
  display: grid;
  gap: 0.36rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.progress-secondary-context-list span {
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 10px;
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.42rem 0.48rem;
}

.progress-secondary-context-list b {
  color: rgba(248, 250, 252, 0.9);
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.14;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-secondary-context-list em {
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}

.progress-dashboard-donut-card {
  min-height: 14.2rem;
}

.progress-dashboard-donut-card .progress-donut-breakdown {
  gap: 1rem !important;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr) !important;
  min-height: 9.8rem;
}

.progress-dashboard-donut-card .progress-donut-chart {
  justify-self: center;
  min-width: 8.8rem;
  width: min(10.8rem, 100%);
}

.progress-dashboard-donut-card .progress-donut-legend {
  align-content: center;
}

.progress-dashboard-donut-card .progress-donut-legend-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.5rem 0.62rem;
}

.progress-dashboard-donut-card .progress-donut-legend-item span {
  font-weight: 800;
  line-height: 1.18;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.progress-dashboard-donut-card .progress-donut-legend-item strong {
  font-size: 0.82rem;
  white-space: nowrap;
}

.progress-explore-map.progress-dashboard-calendar {
  align-content: start;
}

.progress-map-month {
  border-radius: 14px !important;
  padding: 0.58rem !important;
}

.progress-map-weekday-labels,
.progress-map-week-row {
  gap: 0.26rem !important;
  grid-template-columns: 4.6rem repeat(7, minmax(0, 1fr)) !important;
}

.progress-map-day {
  min-height: 2.45rem !important;
}

.progress-map-day.has-practice {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.36), rgba(124, 58, 237, 0.34)) !important;
}

.progress-map-day.is-selected {
  border-color: rgba(216, 180, 254, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.18), 0 0 22px rgba(168, 85, 247, 0.2) !important;
}

.progress-activity-flow.progress-dashboard-activity {
  align-content: start;
}

.progress-activity-list {
  gap: 0.38rem !important;
}

.progress-activity-row {
  min-height: 2.6rem !important;
  padding: 0.46rem 0.54rem !important;
}

.progress-dashboard-activity .progress-activity-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.progress-dashboard-activity .progress-activity-detail {
  grid-column: 2 !important;
  justify-self: start !important;
  max-width: none !important;
}

.progress-dashboard-activity .progress-activity-copy strong {
  white-space: normal !important;
}

.progress-activity-detail {
  color: rgba(125, 211, 252, 0.9) !important;
}

.progress-focus-signals.progress-dashboard-signals {
  align-content: start;
  grid-template-columns: 1fr !important;
}

.progress-focus-signals .progress-signal-list {
  grid-template-columns: 1fr !important;
}

.progress-focus-signals .progress-signal-row {
  padding: 0.48rem !important;
}

.progress-dashboard-achievements .progress-insight-cards {
  display: grid !important;
  gap: 0.52rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

.progress-insight-card {
  background:
    radial-gradient(circle at 0% 0%, var(--insight-glow, rgba(168, 85, 247, 0.18)), transparent 55%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.68)) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 14px !important;
  min-height: 4.45rem;
}

.progress-insight-icon {
  border-radius: 12px !important;
}

.progress-journal-panel[data-myzone-pane="journal"] {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.1), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(2, 8, 23, 0.7)) !important;
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 16px !important;
  margin-top: 0 !important;
}

.progress-report-feature-panel.teacher-report-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 8, 23, 0.74)) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

.progress-report-feature-panel .teacher-report-grid {
  gap: 0.62rem !important;
}

.progress-report-feature-panel .teacher-report-trend-section,
.progress-report-feature-panel .teacher-report-wide-section {
  grid-column: 1 / -1 !important;
}

.progress-report-feature-panel .teacher-report-chart-section {
  grid-column: span 2;
}

.progress-report-feature-panel .teacher-report-artifacts-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 8, 23, 0.7)) !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}

.progress-report-feature-panel .teacher-report-recordings-section,
.progress-report-feature-panel .teacher-report-history-section {
  grid-column: 1 / -1 !important;
}

.progress-report-feature-panel .teacher-report-notes-section,
.progress-report-feature-panel .teacher-report-focus-section {
  grid-column: span 2 !important;
}

.progress-report-feature-panel .teacher-report-analytics-section {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.42)) !important;
}

.teacher-report-panel[hidden],
[data-myzone-pane][hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .progress-dashboard-shell {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 1fr);
    grid-template-areas:
      "metrics metrics"
      "hero type"
      "items items"
      "rhythm calendar"
      "goals calendar"
      "activity activity"
      "achievements achievements";
  }

  .progress-dashboard-achievements .progress-insight-cards,
  .progress-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .log-card[data-screen-panel="log"] > .section-header,
  .progress-header-actions,
  .progress-dashboard-shell {
    grid-template-columns: 1fr !important;
  }

  .log-card[data-screen-panel="log"] > .section-header {
    align-items: stretch !important;
    gap: 0.52rem !important;
    height: auto !important;
  }

  .progress-header-actions {
    display: grid !important;
    justify-items: stretch !important;
    width: 100%;
  }

  .progress-command-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .progress-period-navigation {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .progress-view-mode-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .progress-dashboard-shell {
    grid-template-areas:
      "metrics"
      "hero"
      "type"
      "items"
      "goals"
      "calendar"
      "rhythm"
      "activity"
      "achievements";
  }

  .progress-dashboard-metrics,
  .progress-dashboard-achievements .progress-insight-cards,
  .progress-secondary-context-list,
  .progress-report-feature-panel .teacher-report-summary {
    grid-template-columns: 1fr !important;
  }

  .progress-primary-tabs.myzone-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.18rem !important;
  }

  .progress-primary-tabs.myzone-workspace-tabs button {
    justify-items: center !important;
    min-height: 2.35rem !important;
    padding: 0.36rem 0.24rem !important;
    text-align: center !important;
  }

  .progress-primary-tabs.myzone-workspace-tabs small {
    display: none !important;
  }

  .progress-period-navigation,
  .progress-command-row {
    justify-content: stretch !important;
    width: 100%;
  }

  .progress-period-stepper {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    width: 100%;
  }

  #progressPeriodTodayButton {
    grid-column: 1 / -1;
  }

  .progress-donut-breakdown {
    grid-template-columns: 1fr !important;
  }

  .progress-donut-chart {
    justify-self: start;
    width: min(10rem, 60vw);
  }

  .progress-momentum-now,
  .progress-report-feature-panel .teacher-report-chart-section,
  .progress-report-feature-panel .teacher-report-notes-section,
  .progress-report-feature-panel .teacher-report-focus-section {
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
  }

  .progress-trend-frame {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "y plot"
      ". x"
      "best best";
  }

  .progress-map-weekday-labels,
  .progress-map-week-row {
    grid-template-columns: 3.6rem repeat(7, minmax(1.85rem, 1fr)) !important;
  }
}

/* Alpha button state normalization.
   Several older light-theme rules still target shared button classes; keep
   action states dark and consistent wherever those classes are reused. */
:root {
  --zb-action-button-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.78));
  --zb-action-button-bg-hover: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.82));
  --zb-action-button-border: rgba(148, 163, 184, 0.34);
  --zb-action-button-text: rgba(241, 245, 249, 0.94);
  --zb-action-button-disabled-bg: rgba(15, 23, 42, 0.52);
  --zb-action-button-disabled-border: rgba(148, 163, 184, 0.18);
  --zb-action-button-disabled-text: rgba(148, 163, 184, 0.62);
  --zb-action-button-primary-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 165, 233, 0.76));
  --zb-action-button-success-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.94), rgba(20, 184, 166, 0.74));
  --zb-action-button-danger-bg: linear-gradient(135deg, rgba(127, 29, 29, 0.9), rgba(153, 27, 27, 0.68));
}

:is(
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .ghost-button,
  .importzone-return-button,
  .importzone-clear-button,
  .reference-small-button,
  .reference-cancel-edit-button,
  .catalog-add-launch-button,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .catalog-attach-close,
  .cloud-backup-prune-button,
  .schedule-builder-small-button,
  .schedule-builder-icon-button,
  .schedule-builder-preview-nav-button,
  .modal-card .modal-footer-actions button,
  .modal-card form > .button-row:last-child button,
  .catalog-add-flow-actions button,
  .guidance-modal-actions button,
  .text-cleanup-actions button,
  .modal-card :is(.primary-button, .secondary-button, .filter-button, .restore-button, .ghost-button, .importzone-primary-button, .reference-small-button, .reference-cancel-edit-button, .catalog-attach-target, .catalog-attach-edit-target, .cloud-backup-prune-button, .schedule-builder-small-button, .schedule-builder-icon-button),
  [data-catalog-cancel-edit],
  [data-catalog-unlink-entry],
  [data-catalog-unlink-record],
  [data-catalog-open-attach-picker],
  [data-catalog-close-attach-picker],
  [data-importzone-review-action],
  [data-cloud-backup-preview],
  [data-schedule-builder-selected-action]
) {
  background-color: rgba(15, 23, 42, 0.92) !important;
  background-image: var(--zb-action-button-bg) !important;
  border: 1px solid var(--zb-action-button-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 10px 24px rgba(0, 0, 0, 0.16) !important;
  color: var(--zb-action-button-text) !important;
  text-shadow: none !important;
}

:is(
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .ghost-button,
  .importzone-return-button,
  .importzone-clear-button,
  .reference-small-button,
  .reference-cancel-edit-button,
  .catalog-add-launch-button,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .catalog-attach-close,
  .cloud-backup-prune-button,
  .schedule-builder-small-button,
  .schedule-builder-icon-button,
  .schedule-builder-preview-nav-button,
  .modal-card .modal-footer-actions button,
  .modal-card form > .button-row:last-child button,
  .catalog-add-flow-actions button,
  .guidance-modal-actions button,
  .text-cleanup-actions button,
  .modal-card :is(.primary-button, .secondary-button, .filter-button, .restore-button, .ghost-button, .importzone-primary-button, .reference-small-button, .reference-cancel-edit-button, .catalog-attach-target, .catalog-attach-edit-target, .cloud-backup-prune-button, .schedule-builder-small-button, .schedule-builder-icon-button),
  [data-catalog-cancel-edit],
  [data-catalog-unlink-entry],
  [data-catalog-unlink-record],
  [data-catalog-open-attach-picker],
  [data-catalog-close-attach-picker],
  [data-importzone-review-action],
  [data-cloud-backup-preview],
  [data-schedule-builder-selected-action]
):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: rgba(30, 41, 59, 0.96) !important;
  background-image: var(--zb-action-button-bg-hover) !important;
  border-color: rgba(125, 211, 252, 0.46) !important;
  color: #ffffff !important;
}

:is(
  .primary-button,
  .importzone-primary-button,
  .catalog-add-flow-actions .importzone-primary-button,
  .modal-card :is(.primary-button, .importzone-primary-button),
  [data-catalog-save-id]
) {
  background-color: rgba(37, 99, 235, 0.94) !important;
  background-image: var(--zb-action-button-primary-bg) !important;
  border-color: rgba(147, 197, 253, 0.48) !important;
  color: #ffffff !important;
}

:is(.success-button, .restore-button) {
  background-color: rgba(5, 150, 105, 0.9) !important;
  background-image: var(--zb-action-button-success-bg) !important;
  border-color: rgba(110, 231, 183, 0.48) !important;
  color: #ecfdf5 !important;
}

:is(
  .danger-button,
  .danger-solid-button,
  .catalog-danger-action,
  .reference-delete-button,
  .cloud-backup-delete-button,
  .schedule-builder-icon-button.danger,
  .modal-card :is(.danger-button, .danger-solid-button, .catalog-danger-action, .reference-delete-button, .cloud-backup-delete-button, .schedule-builder-icon-button.danger),
  [data-catalog-delete-id],
  [data-cloud-backup-delete]
) {
  background-color: rgba(127, 29, 29, 0.88) !important;
  background-image: var(--zb-action-button-danger-bg) !important;
  border-color: rgba(248, 113, 113, 0.48) !important;
  color: #fee2e2 !important;
}

:is(
  .danger-button,
  .danger-solid-button,
  .catalog-danger-action,
  .reference-delete-button,
  .cloud-backup-delete-button,
  .schedule-builder-icon-button.danger,
  .modal-card :is(.danger-button, .danger-solid-button, .catalog-danger-action, .reference-delete-button, .cloud-backup-delete-button, .schedule-builder-icon-button.danger),
  [data-catalog-delete-id],
  [data-cloud-backup-delete]
):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: rgba(153, 27, 27, 0.94) !important;
  background-image: linear-gradient(135deg, rgba(153, 27, 27, 0.96), rgba(185, 28, 28, 0.78)) !important;
  border-color: rgba(252, 165, 165, 0.62) !important;
  color: #fff1f2 !important;
}

:is(
  .secondary-button.is-selected,
  .filter-button.is-selected,
  .type-tab.is-selected,
  .dashboard-mode-button.is-selected,
  .modal-card :is(.secondary-button.is-selected, .filter-button.is-selected, .type-tab.is-selected, .dashboard-mode-button.is-selected),
  [aria-pressed="true"].secondary-button
) {
  background-color: rgba(37, 99, 235, 0.92) !important;
  background-image: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(124, 58, 237, 0.76)) !important;
  border-color: rgba(191, 219, 254, 0.5) !important;
  color: #ffffff !important;
}

button:disabled,
button[disabled],
button[aria-disabled="true"],
button.is-disabled,
button.is-loading,
button[aria-busy="true"],
:is(
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .success-button,
  .danger-button,
  .danger-solid-button,
  .importzone-primary-button,
  .importzone-return-button,
  .importzone-clear-button,
  .reference-small-button,
  .reference-cancel-edit-button,
  .reference-delete-button,
  .catalog-danger-action,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .cloud-backup-prune-button,
  .cloud-backup-delete-button,
  .schedule-builder-small-button,
  .schedule-builder-icon-button,
  [data-catalog-save-id],
  [data-catalog-unlink-entry],
  [data-catalog-unlink-record],
  [data-importzone-review-action],
  [data-cloud-backup-preview],
  [data-cloud-backup-delete],
  [data-schedule-builder-selected-action],
  .modal-card :is(.primary-button, .secondary-button, .filter-button, .restore-button, .success-button, .danger-button, .danger-solid-button, .importzone-primary-button, .reference-small-button, .reference-cancel-edit-button, .reference-delete-button, .catalog-danger-action, .catalog-attach-target, .catalog-attach-edit-target, .cloud-backup-prune-button, .cloud-backup-delete-button, .schedule-builder-small-button, .schedule-builder-icon-button)
):disabled {
  background-color: var(--zb-action-button-disabled-bg) !important;
  background-image: none !important;
  border-color: var(--zb-action-button-disabled-border) !important;
  box-shadow: none !important;
  color: var(--zb-action-button-disabled-text) !important;
  cursor: not-allowed !important;
  filter: saturate(0.72) !important;
  opacity: 1 !important;
  transform: none !important;
}

button:focus-visible,
:is(
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .success-button,
  .danger-button,
  .importzone-primary-button,
  .reference-small-button,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .cloud-backup-prune-button,
  .schedule-builder-small-button,
  .schedule-builder-icon-button
):focus-visible {
  outline: 3px solid rgba(125, 211, 252, 0.32) !important;
  outline-offset: 2px !important;
}

:is(.modal-close-button, .catalog-attach-close) {
  border-radius: 999px !important;
  min-height: 2.25rem !important;
  min-width: 2.25rem !important;
  padding: 0.35rem !important;
}

#addRecordReferenceToggle.secondary-button,
#editModalBackdrop .modal-references-box .secondary-button,
#addRecordModalBackdrop .modal-references-box .secondary-button {
  background-color: rgba(15, 23, 42, 0.92) !important;
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.78)) !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 10px 24px rgba(0, 0, 0, 0.16) !important;
  color: rgba(241, 245, 249, 0.94) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.94) !important;
}

#addRecordReferenceToggle.secondary-button:hover:not(:disabled),
#editModalBackdrop .modal-references-box .secondary-button:hover:not(:disabled),
#addRecordModalBackdrop .modal-references-box .secondary-button:hover:not(:disabled) {
  background-color: rgba(30, 41, 59, 0.96) !important;
  background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.82)) !important;
  border-color: rgba(125, 211, 252, 0.46) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#addRecordReferenceToggle.secondary-button:disabled,
#editModalBackdrop .modal-references-box .secondary-button:disabled,
#addRecordModalBackdrop .modal-references-box .secondary-button:disabled {
  background-color: rgba(15, 23, 42, 0.52) !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(148, 163, 184, 0.62) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(148, 163, 184, 0.62) !important;
}

.schedule-builder-config-flow select[data-config-field="repeatCount"],
.schedule-builder-inline-setting select[data-schedule-builder-field="repeatCount"] {
  appearance: auto !important;
  background-color: rgba(3, 8, 20, 0.88) !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  color: #f8fafc !important;
  font-weight: 850 !important;
  min-width: 5.25rem !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.schedule-builder-config-flow select[data-config-field="repeatCount"] option,
.schedule-builder-inline-setting select[data-schedule-builder-field="repeatCount"] option {
  background: #020617;
  color: #f8fafc;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[data-review-rule-field],
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow select[data-review-rule-field],
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-rule-copy-search {
  appearance: auto !important;
  background-color: rgba(3, 8, 20, 0.88) !important;
  background-image: linear-gradient(135deg, rgba(3, 8, 20, 0.94), rgba(15, 23, 42, 0.78)) !important;
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 0 1px rgba(15, 23, 42, 0.42) !important;
  color: #f8fafc !important;
  color-scheme: dark;
  font-weight: 850 !important;
  min-height: 3.1rem !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[data-review-rule-field]::placeholder,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-rule-copy-search::placeholder {
  color: rgba(203, 213, 225, 0.62) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.62) !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[data-review-rule-field]:focus,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow select[data-review-rule-field]:focus,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-rule-copy-search:focus {
  background-color: rgba(3, 8, 20, 0.96) !important;
  border-color: rgba(125, 211, 252, 0.66) !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
  outline: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[data-review-rule-field]:disabled,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow select[data-review-rule-field]:disabled {
  background-color: rgba(15, 23, 42, 0.58) !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(203, 213, 225, 0.62) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.62) !important;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow select[data-review-rule-field] option {
  background: #020617;
  color: #f8fafc;
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[type="date"][data-review-rule-field]::-webkit-calendar-picker-indicator,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[type="number"][data-review-rule-field]::-webkit-inner-spin-button,
.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-review-rule-flow input[type="number"][data-review-rule-field]::-webkit-outer-spin-button {
  opacity: 0.86;
  filter: invert(1) saturate(0.65) brightness(1.35);
}

.modal-backdrop.is-schedule-rule-editor-modal .schedule-builder-inline-number input[data-review-rule-field="intervalDays"] {
  max-width: 6.25rem !important;
  min-width: 5.25rem !important;
  text-align: center;
}

.importzone-setlist-header h4 {
  color: #f8fbff !important;
}

.importzone-setlist-review {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.10), transparent 42%),
    rgba(3, 10, 22, 0.74) !important;
  border: 1px solid rgba(45, 212, 191, 0.22) !important;
  border-radius: 16px !important;
  display: grid !important;
  gap: 0.85rem !important;
  padding: 0.85rem !important;
}

.importzone-setlist-header {
  align-items: start !important;
  display: flex !important;
  gap: 0.8rem !important;
  justify-content: space-between !important;
}

.importzone-setlist-header h4 {
  font-size: 1.12rem !important;
  letter-spacing: 0 !important;
  margin: 0.08rem 0 0.2rem !important;
}

.importzone-setlist-header p {
  color: rgba(207, 219, 239, 0.72) !important;
  font-size: 0.82rem !important;
  margin: 0 !important;
}

.importzone-upsert-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-top: 0.58rem !important;
}

.importzone-upsert-summary span {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.58) !important;
  border: 1px solid rgba(45, 212, 191, 0.18) !important;
  border-radius: 999px !important;
  color: rgba(241, 245, 249, 0.92) !important;
  display: inline-flex !important;
  gap: 0.38rem !important;
  min-height: 1.8rem !important;
  padding: 0.28rem 0.58rem !important;
}

.importzone-upsert-summary strong {
  color: rgba(153, 246, 228, 0.86) !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.importzone-setlist-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  justify-content: end !important;
}

.importzone-setlist-table {
  display: grid !important;
  gap: 0.42rem !important;
  overflow-x: auto !important;
}

.importzone-setlist-row {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.54) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.45rem !important;
  grid-template-columns: 4rem minmax(12rem, 1.35fr) minmax(10rem, 0.9fr) minmax(7rem, 0.55fr) minmax(6.5rem, 0.45fr) minmax(5.25rem, 0.35fr) minmax(11rem, 1fr) minmax(8rem, 0.6fr) minmax(8.6rem, 0.7fr) !important;
  min-width: 1240px !important;
  padding: 0.5rem !important;
}

.importzone-setlist-row.has-duplicate {
  border-color: rgba(245, 158, 11, 0.34) !important;
}

.importzone-setlist-row-head {
  background: rgba(2, 8, 23, 0.68) !important;
  border-color: rgba(148, 163, 184, 0.10) !important;
  color: rgba(153, 246, 228, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  min-height: 2.2rem !important;
  padding-block: 0.38rem !important;
  text-transform: uppercase !important;
}

.importzone-setlist-row label {
  display: block !important;
  min-width: 0 !important;
}

.importzone-setlist-row input,
.importzone-setlist-row select {
  background: rgba(3, 8, 20, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 9px !important;
  color: #f8fafc !important;
  font: inherit !important;
  min-height: 2.35rem !important;
  padding: 0.44rem 0.52rem !important;
  width: 100% !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.importzone-setlist-row input[type="checkbox"] {
  accent-color: #2dd4bf !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  width: 1.05rem !important;
}

.importzone-setlist-include {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.importzone-setlist-duplicate {
  display: grid !important;
  gap: 0.22rem !important;
}

.importzone-setlist-duplicate span {
  color: rgba(253, 230, 138, 0.92) !important;
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.importzone-setlist-duplicate em {
  color: rgba(187, 247, 208, 0.82) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.importzone-resource-collection-review {
  border-color: rgba(168, 85, 247, 0.28) !important;
}

.importzone-resource-collection-fields {
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.importzone-resource-collection-fields label,
.importzone-resource-collection-row label {
  display: grid !important;
  gap: 0.25rem !important;
  min-width: 0 !important;
}

.importzone-resource-collection-fields span {
  color: rgba(153, 246, 228, 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.importzone-resource-collection-fields input,
.importzone-resource-collection-row input,
.importzone-resource-collection-row select {
  background: rgba(3, 8, 20, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 9px !important;
  color: #f8fafc !important;
  font: inherit !important;
  min-height: 2.35rem !important;
  padding: 0.44rem 0.52rem !important;
  width: 100% !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.importzone-resource-collection-table {
  display: grid !important;
  gap: 0.42rem !important;
  overflow-x: auto !important;
}

.importzone-resource-collection-row {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.54) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.45rem !important;
  grid-template-columns: 4rem minmax(15rem, 1.2fr) minmax(10rem, 0.65fr) minmax(12rem, 0.9fr) minmax(20rem, 1.6fr) !important;
  min-width: 980px !important;
  padding: 0.5rem !important;
}

.importzone-resource-collection-row-head {
  background: rgba(2, 8, 23, 0.68) !important;
  color: rgba(153, 246, 228, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  min-height: 2.2rem !important;
  text-transform: uppercase !important;
}

.catalog-collection-viewer,
.catalog-attached-collection-details {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.10), transparent 42%),
    rgba(3, 10, 22, 0.58) !important;
  border: 1px solid rgba(45, 212, 191, 0.18) !important;
  border-radius: 16px !important;
  display: grid !important;
  gap: 0.75rem !important;
  padding: 0.8rem !important;
}

.catalog-collection-resource-list {
  display: grid !important;
  gap: 0.55rem !important;
}

.catalog-collection-resource-list.is-compact {
  margin-top: 0.55rem !important;
}

.catalog-collection-resource {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.54) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding: 0.62rem !important;
}

.catalog-collection-resource span {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.catalog-collection-resource strong,
.catalog-record-attached-reference.is-collection strong {
  color: #f8fbff !important;
}

.catalog-collection-resource small,
.catalog-record-attached-reference.is-collection small {
  color: rgba(203, 213, 225, 0.72) !important;
}

.catalog-collection-resource em {
  color: rgba(125, 211, 252, 0.78) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.catalog-collection-resource .catalog-open-playlist-button,
.catalog-attached-collection-details .catalog-open-playlist-button {
  align-items: center !important;
  appearance: none !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.90), rgba(124, 58, 237, 0.72)) !important;
  background-color: rgba(37, 99, 235, 0.90) !important;
  border: 1px solid rgba(147, 197, 253, 0.42) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(37, 99, 235, 0.16) !important;
  color: #ffffff !important;
  color-scheme: dark !important;
  display: inline-flex !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 2.35rem !important;
  min-width: 7.6rem !important;
  padding: 0.48rem 0.7rem !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.catalog-collection-resource .catalog-open-playlist-button:hover,
.catalog-collection-resource .catalog-open-playlist-button:focus-visible,
.catalog-attached-collection-details .catalog-open-playlist-button:hover,
.catalog-attached-collection-details .catalog-open-playlist-button:focus-visible {
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.28), transparent 38%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(139, 92, 246, 0.82)) !important;
  background-color: rgba(59, 130, 246, 0.98) !important;
  border-color: rgba(191, 219, 254, 0.58) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.catalog-attached-collection-details {
  margin-top: 0.45rem !important;
  padding: 0.55rem !important;
}

.catalog-attached-collection-details summary {
  color: rgba(153, 246, 228, 0.86) !important;
  cursor: pointer !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.catalog-collection-empty,
.catalog-collection-source-notes p {
  color: rgba(203, 213, 225, 0.76) !important;
  margin: 0 !important;
}

.catalog-record-artist-line {
  color: rgba(203, 213, 225, 0.82) !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  margin: -0.08rem 0 0.18rem !important;
}

.organize-inspector-item-title,
.organize-inspector-item-artist {
  display: block !important;
}

.organize-inspector-item-title {
  color: inherit !important;
  font: inherit !important;
}

.organize-inspector-item-artist {
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  margin-top: 0.18rem !important;
}

.current-item-artist-line {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: clamp(0.86rem, 1vw, 1rem) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  margin: -0.18rem 0 0.24rem !important;
}

.queue-item-artist {
  color: rgba(203, 213, 225, 0.74) !important;
  display: block !important;
  font-size: 0.76rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .importzone-setlist-header {
    display: grid !important;
  }

  .importzone-setlist-actions {
    justify-content: start !important;
  }

  .importzone-resource-collection-fields {
    grid-template-columns: 1fr !important;
  }

  .catalog-collection-resource {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .catalog-collection-resource .catalog-open-playlist-button {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

/* Restore workflow contrast guard: keep restore actions and warnings readable. */
#restoreConfirmModalBackdrop .restore-confirm-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(219, 243, 238, 0.76), transparent 15rem),
    linear-gradient(180deg, #fffefb 0%, #f6fbfd 100%) !important;
  border: 1px solid rgba(103, 130, 145, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 64px rgba(29, 45, 61, 0.22) !important;
  color: #172536 !important;
  max-width: min(34rem, calc(100vw - 2rem)) !important;
}

#restoreConfirmModalBackdrop .restore-confirm-card :is(h2, strong, p, span, div) {
  color: #172536 !important;
  -webkit-text-fill-color: #172536 !important;
}

#restoreConfirmModalBackdrop .restore-confirm-card .eyebrow {
  color: #53706f !important;
  -webkit-text-fill-color: #53706f !important;
}

#restoreConfirmModalBackdrop .restore-confirm-body #restoreConfirmSummary {
  color: #4c6072 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  -webkit-text-fill-color: #4c6072 !important;
}

#restoreConfirmModalBackdrop .restore-confirm-warning {
  background:
    linear-gradient(135deg, rgba(255, 248, 235, 0.94), rgba(255, 255, 255, 0.86)) !important;
  border: 1px solid rgba(214, 132, 45, 0.24) !important;
  border-radius: 12px !important;
  color: #6b4a2c !important;
  font-weight: 620 !important;
  -webkit-text-fill-color: #6b4a2c !important;
}

#restoreConfirmModalBackdrop .modal-footer-actions {
  background: linear-gradient(180deg, rgba(250, 252, 253, 0.9), rgba(255, 254, 251, 0.98)) !important;
  border-top-color: rgba(101, 121, 139, 0.14) !important;
}

#restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton) {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(104, 124, 143, 0.2) !important;
  box-shadow: none !important;
  color: #435668 !important;
  font-weight: 560 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #435668 !important;
}

#restoreConfirmModalBackdrop #restoreConfirmProceedButton {
  background:
    linear-gradient(135deg, rgba(32, 135, 151, 0.96), rgba(52, 168, 151, 0.88)) !important;
  border: 1px solid rgba(30, 120, 134, 0.2) !important;
  box-shadow: 0 12px 24px rgba(33, 125, 139, 0.18) !important;
  color: #ffffff !important;
  font-weight: 650 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

#restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton):hover,
#restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton):focus-visible {
  background: #ffffff !important;
  border-color: rgba(91, 115, 132, 0.32) !important;
  color: #24384a !important;
  -webkit-text-fill-color: #24384a !important;
}

#restoreConfirmModalBackdrop #restoreConfirmProceedButton:hover,
#restoreConfirmModalBackdrop #restoreConfirmProceedButton:focus-visible {
  background:
    linear-gradient(135deg, rgba(21, 119, 138, 1), rgba(38, 151, 138, 0.94)) !important;
  border-color: rgba(30, 120, 134, 0.32) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.system-screen .backup-restore-panel .system-primary-action {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 165, 233, 0.8)) !important;
  border-color: rgba(191, 219, 254, 0.58) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.system-screen .restore-preview-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(3, 10, 24, 0.82)) !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
}

.system-screen .restore-preview-header strong {
  color: #f8fafc !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.system-screen .restore-preview-header p {
  color: #dbeafe !important;
  font-weight: 640 !important;
  -webkit-text-fill-color: #dbeafe !important;
}

.system-screen .restore-preview-count {
  background: rgba(2, 6, 23, 0.62) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
}

.system-screen .restore-preview-count strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.system-screen .restore-preview-count span {
  color: #cbd5e1 !important;
  font-weight: 820 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

.system-screen .restore-preview-message {
  border-width: 1px !important;
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

.system-screen .restore-preview-message.is-success {
  background: rgba(20, 83, 45, 0.42) !important;
  border-color: rgba(74, 222, 128, 0.42) !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
}

.system-screen .restore-preview-message.is-warning {
  background: rgba(120, 53, 15, 0.44) !important;
  border-color: rgba(251, 191, 36, 0.52) !important;
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

.system-screen .restore-preview-message.is-neutral {
  background: rgba(30, 41, 59, 0.68) !important;
  border-color: rgba(190, 209, 238, 0.26) !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

.system-screen .backup-warning {
  color: #fde68a !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: #fde68a !important;
}

.system-screen :is(.restore-status, .backup-status) {
  font-weight: 760 !important;
}

.collection-form-modal {
  display: grid;
  gap: 1rem;
  min-width: min(38rem, 82vw);
}

.collection-form-modal label,
.collection-builder-details label,
.collection-builder-toolbar {
  display: grid;
  gap: 0.45rem;
}

.collection-form-modal input,
.collection-form-modal textarea,
.collection-builder-details input,
.collection-builder-details textarea,
.collection-builder-toolbar input,
.collection-builder-toolbar select,
.importzone-setlist-collection-option input[type="text"] {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.8rem;
  background: rgba(3, 10, 24, 0.74);
  color: #f8fafc;
  padding: 0.75rem 0.85rem;
  font: inherit;
}

.collection-form-note,
.catalog-collection-empty,
.collection-builder-empty {
  color: #cbd5e1;
  font-weight: 650;
}

.collection-builder-screen {
  background:
    radial-gradient(circle at 7% 0%, rgba(124, 58, 237, 0.18), transparent 22rem),
    radial-gradient(circle at 94% 10%, rgba(45, 212, 191, 0.11), transparent 24rem),
    linear-gradient(145deg, rgba(8, 18, 35, 0.96), rgba(2, 7, 18, 0.96)) !important;
  border: 1px solid rgba(125, 211, 252, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.34) !important;
  color: #f8fafc !important;
  height: calc(100dvh - 7.25rem);
  min-height: 44rem;
  overflow: hidden;
  padding: clamp(0.62rem, 1vw, 0.95rem) !important;
}

.collection-builder-screen-root,
.collection-builder-screen-shell {
  min-height: inherit;
}

.collection-builder-screen-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  height: 100%;
  min-height: 0;
}

.collection-builder-screen-header {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(18rem, 1.15fr) auto;
  gap: 0.72rem;
  align-items: stretch;
  padding: 0.72rem;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(16, 31, 56, 0.78), rgba(5, 15, 31, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.collection-builder-title-block,
.collection-builder-title-label,
.collection-builder-description-label {
  display: grid;
  gap: 0.35rem;
}

.collection-builder-eyebrow {
  margin: 0;
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.collection-builder-title-label span,
.collection-builder-description-label span {
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 850;
}

.collection-builder-title-label input,
.collection-builder-description-label textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.7rem;
  background: rgba(2, 8, 23, 0.68);
  color: #f8fafc;
  padding: 0.58rem 0.68rem;
  font: inherit;
}

.collection-builder-title-label input {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 900;
}

.collection-builder-description-label textarea {
  resize: vertical;
  min-height: 2.7rem;
}

.collection-builder-header-meta {
  display: grid;
  place-items: center;
  min-width: 6rem;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.18), transparent 5rem),
    rgba(20, 184, 166, 0.1);
  color: #ccfbf1;
  padding: 0.52rem;
}

.collection-builder-header-meta strong {
  color: #ffffff;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 950;
}

.collection-builder-header-meta span {
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.collection-builder-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  min-height: 0;
}

.collection-builder-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.68rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 17rem),
    linear-gradient(145deg, rgba(9, 22, 43, 0.78), rgba(3, 9, 22, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 0.82rem;
  overflow: hidden;
  min-height: 0;
}

.collection-builder-panel.is-browser {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.collection-builder-panel.is-drag-over {
  border-color: rgba(45, 212, 191, 0.72);
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.16);
}

.collection-builder-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.collection-builder-panel-header strong,
.collection-builder-details span,
.collection-form-modal span,
.collection-create-inline h4,
.collection-add-item-modal h4 {
  color: #f8fafc;
  font-weight: 850;
}

.collection-builder-panel-header small,
.collection-member-copy small,
.collection-member-copy em,
.collection-candidate-row small,
.collection-candidate-row em,
.collection-picker-row small {
  color: #cbd5e1;
}

.collection-member-list,
.collection-builder-candidate-list,
.collection-picker-list {
  display: grid;
  grid-auto-rows: auto;
  gap: 0.52rem;
  align-content: start;
  overflow: auto;
  min-height: 0;
  padding-right: 0.1rem;
}

.collection-member-row,
.collection-candidate-row,
.collection-picker-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.09), transparent 7rem),
    rgba(15, 23, 42, 0.66);
  color: #f8fafc;
  line-height: 1.2;
  min-height: 4.65rem;
  overflow: visible;
  padding: 0.58rem 0.62rem;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.collection-candidate-row {
  cursor: pointer;
  grid-template-columns: 1rem 2.5rem minmax(0, 1fr);
  min-height: 5rem;
  padding: 0.68rem 0.72rem;
}

.collection-picker-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.collection-candidate-row.is-selected {
  border-color: rgba(45, 212, 191, 0.78);
  background:
    radial-gradient(circle at 0% 50%, rgba(45, 212, 191, 0.18), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(59, 130, 246, 0.15));
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.13),
    0 14px 32px rgba(20, 184, 166, 0.12);
}

.collection-candidate-row:hover,
.collection-candidate-row:focus-visible,
.collection-member-row:hover {
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.26);
  transform: translateY(-1px);
}

.collection-member-row.is-drag-over,
.collection-candidate-row.is-drag-over {
  border-color: rgba(125, 211, 252, 0.76);
  box-shadow: inset 0 2px 0 rgba(125, 211, 252, 0.82);
}

.collection-member-row.is-dragging,
.collection-candidate-row.is-dragging {
  opacity: 0.62;
}

.collection-row-grip {
  color: #64748b;
  font-weight: 900;
  letter-spacing: 0;
  cursor: grab;
  user-select: none;
}

.collection-member-copy,
.collection-candidate-copy,
.collection-picker-row span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  overflow: hidden;
}

.collection-member-copy strong,
.collection-candidate-row strong,
.collection-picker-row strong {
  color: #ffffff;
  font-weight: 880;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.collection-candidate-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.collection-candidate-copy small,
.collection-candidate-copy em,
.collection-member-copy small,
.collection-member-copy em {
  display: block;
  line-height: 1.22;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-candidate-row > .catalog-row-icon,
.collection-member-row > .catalog-row-icon {
  align-self: start;
  justify-self: center;
}

.catalog-record-icon.catalog-record-collection,
.catalog-row-icon.catalog-record-collection,
.catalog-selected-icon.catalog-record-collection {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.2), transparent 1.7rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.86), rgba(20, 184, 166, 0.58)) !important;
  border: 1px solid rgba(196, 181, 253, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(79, 70, 229, 0.24) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.catalog-record-icon.catalog-record-collection svg,
.catalog-row-icon.catalog-record-collection svg,
.catalog-selected-icon.catalog-record-collection svg {
  stroke-width: 2.15;
}

.collection-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.collection-builder-mini-button {
  min-height: 2rem;
  padding: 0.38rem 0.56rem;
  font-size: 0.78rem;
}

.collection-builder-browser-controls {
  display: grid;
  gap: 0.58rem;
}

.collection-builder-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.collection-builder-filter-group {
  display: grid;
  gap: 0.28rem;
}

.collection-builder-filter-group > span {
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.collection-builder-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.collection-builder-filter-button {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #dbeafe;
  cursor: pointer;
  padding: 0.34rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 850;
  min-height: 1.95rem;
}

.collection-builder-filter-button:hover,
.collection-builder-filter-button:focus-visible,
.collection-builder-filter-button.is-selected {
  border-color: rgba(45, 212, 191, 0.62);
  background: rgba(20, 184, 166, 0.18);
  color: #f8fafc;
}

.collection-builder-selection-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(45, 212, 191, 0.26);
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 10rem),
    rgba(20, 184, 166, 0.1);
  padding: 0.52rem 0.62rem;
}

.collection-builder-selection-bar span {
  color: #cbd5e1;
  font-weight: 700;
  margin-right: auto;
}

.collection-builder-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.18rem 0 0;
}

.collection-builder-footer .secondary-button,
.collection-builder-footer .primary-button {
  min-height: 2.32rem;
  min-width: 7rem;
  padding: 0.48rem 0.9rem;
}

.collection-builder-screen .secondary-button,
.collection-builder-screen .primary-button,
.collection-builder-mini-button {
  border-radius: 999px !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

.collection-builder-screen .secondary-button,
.collection-builder-mini-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.11), transparent 4rem),
    rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  color: rgba(226, 232, 240, 0.94) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.94) !important;
}

.collection-builder-screen .primary-button,
.collection-builder-screen .importzone-primary-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.96), rgba(14, 165, 233, 0.72)) !important;
  border: 1px solid rgba(216, 202, 255, 0.38) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.collection-builder-screen .catalog-danger-action {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 4rem),
    rgba(127, 29, 29, 0.54) !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
}

.collection-builder-model-help {
  display: grid;
  gap: 0.55rem;
}

.collection-builder-model-help p {
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.catalog-record-collections-section,
.catalog-collection-members-section {
  display: grid;
  gap: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(8, 21, 42, 0.55);
  padding: 1rem;
}

.catalog-record-collection-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog-record-collection-chip-list button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.14);
  color: #e0f2fe;
  padding: 0.5rem 0.75rem;
  font-weight: 800;
}

.catalog-record-collection-chip-list svg {
  width: 1rem;
  height: 1rem;
}

.catalog-collection-selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0.65rem 0;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 0.85rem;
  background: rgba(20, 184, 166, 0.12);
  padding: 0.65rem 0.75rem;
}

.catalog-collection-selection-bar strong {
  color: #f8fafc;
  font-weight: 900;
}

.catalog-collection-selection-bar span {
  color: #cbd5e1;
  font-weight: 650;
  margin-right: auto;
}

.catalog-unified-row.is-multi-selected {
  border-color: rgba(45, 212, 191, 0.74);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.14));
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.12);
}

.catalog-collection-member-list {
  max-height: 26rem;
}

.importzone-setlist-collection-option {
  display: grid;
  grid-template-columns: auto minmax(14rem, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.7rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 0.85rem;
  background: rgba(8, 21, 42, 0.62);
}

.importzone-setlist-collection-option label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f8fafc;
  font-weight: 800;
}

@media (max-width: 860px) {
  .collection-builder-screen-header,
  .collection-builder-workbench,
  .importzone-setlist-collection-option {
    grid-template-columns: 1fr;
  }

  .collection-builder-screen {
    min-height: calc(100vh - 5rem);
  }
}

body #collectionBuilderWorkspaceScreen.collection-builder-screen.card.app-screen {
  background:
    radial-gradient(circle at 7% 0%, rgba(124, 58, 237, 0.2), transparent 22rem),
    radial-gradient(circle at 94% 10%, rgba(45, 212, 191, 0.12), transparent 24rem),
    linear-gradient(145deg, rgba(8, 18, 35, 0.98), rgba(2, 7, 18, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(0, 0, 0, 0.36) !important;
  color: #f8fafc !important;
}

body #collectionBuilderWorkspaceScreen .secondary-button,
body #collectionBuilderWorkspaceScreen .collection-builder-mini-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.13), transparent 4rem),
    rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(125, 211, 252, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.16) !important;
  color: rgba(241, 245, 249, 0.94) !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.94) !important;
}

body #collectionBuilderWorkspaceScreen .primary-button,
body #collectionBuilderWorkspaceScreen .importzone-primary-button,
body #collectionBuilderWorkspaceScreen [data-collection-builder-done] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 4rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(14, 165, 233, 0.78)) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 34px rgba(37, 99, 235, 0.2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body #collectionBuilderWorkspaceScreen .catalog-danger-action {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 4rem),
    rgba(127, 29, 29, 0.58) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
}

/* Library + Collection polish pass: restore compact Library header and unify Collection actions. */
body:has(.organize-catalog-workspace) .organize-catalog-workspace {
  display: grid;
  gap: 0.78rem;
}

body:has(.organize-catalog-workspace) .catalog-workspace-topbar {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.16), transparent 22rem),
    radial-gradient(circle at 96% 0%, rgba(45, 212, 191, 0.1), transparent 20rem),
    linear-gradient(145deg, rgba(10, 22, 42, 0.92), rgba(4, 12, 27, 0.96)) !important;
  border: 1px solid rgba(125, 211, 252, 0.2) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 48px rgba(0, 0, 0, 0.24) !important;
  display: grid !important;
  gap: 0.62rem !important;
  padding: 0.74rem 0.82rem !important;
}

body:has(.organize-catalog-workspace) .catalog-header-primary-row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

body:has(.organize-catalog-workspace) .catalog-workspace-brand {
  align-items: center;
  display: flex;
  min-width: 7.5rem;
}

body:has(.organize-catalog-workspace) .catalog-workspace-brand h2 {
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: clamp(1.3rem, 1.9vw, 1.72rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body:has(.organize-catalog-workspace) .catalog-workspace-brand p,
body:has(.organize-catalog-workspace) .catalog-workspace-logo,
body:has(.organize-catalog-workspace) .organize-catalog-tools {
  display: none !important;
}

body:has(.organize-catalog-workspace) .catalog-workspace-controls {
  align-items: end;
  display: grid !important;
  gap: 0.62rem !important;
  grid-template-columns: minmax(22rem, 1fr) minmax(8rem, auto) auto;
  min-width: 0;
}

body:has(.organize-catalog-workspace) .organize-catalog-search,
body:has(.organize-catalog-workspace) .catalog-sort-control {
  display: grid !important;
  gap: 0.24rem !important;
  min-width: 0;
}

body:has(.organize-catalog-workspace) .organize-catalog-search span,
body:has(.organize-catalog-workspace) .catalog-sort-control span {
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

body:has(.organize-catalog-workspace) .organize-catalog-search input,
body:has(.organize-catalog-workspace) .catalog-sort-control select {
  background: rgba(2, 8, 23, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  min-height: 2.42rem !important;
  padding: 0.55rem 0.72rem !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-search input::placeholder {
  color: rgba(203, 213, 225, 0.54) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.54) !important;
}

body:has(.organize-catalog-workspace) .catalog-add-launch-button {
  align-self: end !important;
  min-height: 2.42rem !important;
  padding: 0.5rem 0.9rem !important;
}

body:has(.organize-catalog-workspace) .catalog-add-launch-button span {
  height: 1.5rem !important;
  width: 1.5rem !important;
}

body:has(.organize-catalog-workspace) .catalog-unified-filter-rail {
  align-items: center;
  display: flex !important;
  gap: 0.55rem !important;
  justify-content: space-between;
  min-width: 0;
}

body:has(.organize-catalog-workspace) .catalog-unified-filter-rail > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  min-width: 0;
}

body:has(.organize-catalog-workspace) .catalog-type-filter-group {
  flex: 1 1 auto;
}

body:has(.organize-catalog-workspace) .catalog-status-filter-group {
  flex: 0 0 auto;
  justify-content: flex-end;
}

body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button {
  border-radius: 999px !important;
  cursor: pointer;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  min-height: 1.95rem !important;
  padding: 0.34rem 0.62rem !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

body:has(.organize-catalog-workspace) .catalog-type-filter-group button {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  color: rgba(219, 234, 254, 0.9) !important;
  -webkit-text-fill-color: rgba(219, 234, 254, 0.9) !important;
}

body:has(.organize-catalog-workspace) .catalog-status-filter-group button {
  background: rgba(67, 56, 202, 0.13) !important;
  border: 1px solid rgba(167, 139, 250, 0.18) !important;
  color: rgba(221, 214, 254, 0.86) !important;
  -webkit-text-fill-color: rgba(221, 214, 254, 0.86) !important;
  font-size: 0.72rem !important;
}

body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button:hover,
body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button:focus-visible {
  border-color: rgba(94, 234, 212, 0.42) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  transform: translateY(-1px);
}

body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button.is-selected,
body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(124, 58, 237, 0.78)) !important;
  border-color: rgba(191, 219, 254, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(37, 99, 235, 0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:has(.organize-catalog-workspace) .catalog-quick-add-row {
  display: grid;
}

body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox {
  gap: 0.78rem !important;
  padding: 0.96rem !important;
}

body:has(.organize-catalog-workspace) .catalog-quick-add-heading strong {
  font-size: 1rem !important;
}

body:has(.organize-catalog-workspace) .catalog-quick-add-grid {
  gap: 0.62rem !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

body:has(.organize-catalog-workspace) .catalog-quick-add-grid button {
  gap: 0.54rem !important;
  min-height: 2.72rem !important;
  padding: 0.54rem 0.62rem !important;
}

body:has(.organize-catalog-workspace) .catalog-quick-add-icon {
  height: 1.82rem !important;
  width: 1.82rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row {
  display: contents !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-toolbar input,
body #collectionBuilderWorkspaceScreen .collection-builder-title-label input,
body #collectionBuilderWorkspaceScreen .collection-builder-description-label textarea,
body .collection-form-modal input,
body .collection-form-modal textarea,
body .collection-add-item-modal input,
body .collection-add-item-modal textarea {
  background: rgba(2, 8, 23, 0.76) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #f8fafc !important;
  caret-color: #67e8f9 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-toolbar input::placeholder,
body #collectionBuilderWorkspaceScreen .collection-builder-title-label input::placeholder,
body #collectionBuilderWorkspaceScreen .collection-builder-description-label textarea::placeholder,
body .collection-form-modal input::placeholder,
body .collection-form-modal textarea::placeholder {
  color: rgba(203, 213, 225, 0.54) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.54) !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-header-meta {
  align-items: center !important;
  display: flex !important;
  gap: 0.45rem !important;
  justify-content: center !important;
  min-width: 7.25rem !important;
  padding: 0.48rem 0.58rem !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.1), transparent 5rem),
    rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(94, 234, 212, 0.18) !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-header-meta span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-header-meta strong {
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 1rem !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-filter-group:first-of-type .collection-builder-filter-button {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  color: rgba(219, 234, 254, 0.9) !important;
  -webkit-text-fill-color: rgba(219, 234, 254, 0.9) !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-filter-strip.is-status .collection-builder-filter-button {
  background: rgba(67, 56, 202, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
  color: rgba(221, 214, 254, 0.88) !important;
  -webkit-text-fill-color: rgba(221, 214, 254, 0.88) !important;
}

body #collectionBuilderWorkspaceScreen .collection-builder-filter-button.is-selected,
body #collectionBuilderWorkspaceScreen .collection-builder-filter-button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(124, 58, 237, 0.78)) !important;
  border-color: rgba(191, 219, 254, 0.52) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-card,
#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.18), transparent 18rem),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.09), transparent 18rem),
    linear-gradient(145deg, rgba(10, 22, 42, 0.98), rgba(3, 10, 24, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  color: #f8fafc !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions,
#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-actions {
  gap: 0.58rem !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button,
#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-actions button,
#guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline button {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: 0.86rem !important;
  font-weight: 880 !important;
  justify-content: center !important;
  min-height: 2.38rem !important;
  padding: 0.5rem 0.95rem !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button:not(.secondary-button),
#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-learn-more,
#guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 4rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(14, 165, 233, 0.78)) !important;
  border: 1px solid rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .collection-picker-row,
#guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline {
  background:
    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.08), transparent 7rem),
    rgba(15, 23, 42, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

#guidanceModalBackdrop:has(.collection-form-modal) .collection-picker-row button {
  min-width: 5.5rem;
}

#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-modal {
  gap: 0.72rem !important;
}

#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list {
  gap: 0.44rem !important;
}

#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list article {
  gap: 0.12rem !important;
  min-height: 4.4rem;
  padding: 0.54rem 0.62rem !important;
}

#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list strong {
  font-size: 0.84rem !important;
}

#guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list p {
  font-size: 0.74rem !important;
  line-height: 1.28 !important;
}

@media (max-width: 1180px) {
  body:has(.organize-catalog-workspace) .catalog-workspace-controls {
    grid-template-columns: minmax(16rem, 1fr) minmax(7rem, auto) auto;
  }

  body:has(.organize-catalog-workspace) .catalog-quick-add-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:has(.organize-catalog-workspace) .catalog-header-primary-row,
  body:has(.organize-catalog-workspace) .catalog-workspace-controls {
    grid-template-columns: 1fr;
  }

  body:has(.organize-catalog-workspace) .catalog-unified-filter-rail {
    align-items: stretch;
    display: grid !important;
  }

  body:has(.organize-catalog-workspace) .catalog-status-filter-group {
    justify-content: flex-start;
  }

  body:has(.organize-catalog-workspace) .catalog-quick-add-grid,
  #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list {
    grid-template-columns: 1fr;
  }
}

/* Practice log modal polish: keep history editing on the premium dark modal surface. */
#guidanceModalBackdrop.is-practice-log-editor-modal {
  align-items: center !important;
  overflow: auto !important;
  padding: clamp(0.8rem, 2vw, 1.5rem) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .modal-card.guidance-modal-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.18), transparent 16rem),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 18rem),
    linear-gradient(145deg, rgba(10, 18, 35, 0.99), rgba(3, 10, 24, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 22px !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: #f8fafc !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  max-height: min(94vh, 52rem) !important;
  max-width: min(52rem, calc(100vw - 1.6rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(52rem, calc(100vw - 1.6rem)) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .modal-header,
#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-message,
#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions {
  margin: 0 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  padding: 1.05rem 1.35rem 0.82rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .modal-header .eyebrow {
  color: rgba(125, 211, 252, 0.84) !important;
  letter-spacing: 0.08em !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal #guidanceModalTitle {
  color: #ffffff !important;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-message {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
  color: rgba(203, 213, 225, 0.74) !important;
  padding: 0.72rem 1.35rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-body {
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 1.05rem 1.35rem 1.15rem !important;
  scrollbar-gutter: stable !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions {
  background: rgba(2, 8, 23, 0.88) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  justify-content: flex-end !important;
  padding: 0.64rem 1.35rem 0.72rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions button {
  border-radius: 999px !important;
  font-size: 0.86rem !important;
  font-weight: 880 !important;
  min-height: 2.38rem !important;
  min-width: 7.4rem !important;
  padding: 0.55rem 1rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions .secondary-button {
  background: rgba(15, 23, 42, 0.86) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: rgba(241, 245, 249, 0.94) !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.94) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions button:not(.secondary-button):not(.danger-solid-button) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(20, 184, 166, 0.76)) !important;
  border: 1px solid rgba(191, 219, 254, 0.38) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions .danger-solid-button {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.96), rgba(127, 29, 29, 0.95)) !important;
  border: 1px solid rgba(254, 202, 202, 0.28) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view {
  gap: 0.5rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view-row,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-editor,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view blockquote {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 9rem),
    rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view-row {
  gap: 0.7rem !important;
  grid-template-columns: minmax(7.5rem, 0.34fr) minmax(0, 1fr) !important;
  min-height: 2.85rem !important;
  padding: 0.65rem 0.78rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view-row span,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-editor span {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view-row strong {
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 0.94rem !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view blockquote {
  border-left: 3px solid rgba(45, 212, 191, 0.55) !important;
  color: rgba(226, 232, 240, 0.94) !important;
  line-height: 1.45 !important;
  padding: 0.75rem 0.85rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-editor {
  gap: 0.72rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field-grid {
  gap: 0.68rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-editor {
  gap: 0.32rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field input,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field select,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field textarea {
  background: rgba(2, 8, 23, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
  min-height: 2.58rem !important;
  outline: none !important;
  padding: 0.68rem 0.78rem !important;
  -webkit-text-fill-color: #f8fafc !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field textarea {
  height: 5.2rem !important;
  line-height: 1.42 !important;
  min-height: 4.8rem !important;
  resize: vertical !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field input:focus,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field select:focus,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field textarea:focus {
  border-color: rgba(103, 232, 249, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field input::placeholder,
#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field textarea::placeholder {
  color: rgba(203, 213, 225, 0.5) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.5) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field select option {
  background: #0f172a;
  color: #f8fafc;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-editor {
  align-items: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 0.34fr) !important;
  padding: 0.76rem !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-editor > span {
  grid-column: 1 / -1 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-presets {
  gap: 0.42rem !important;
  grid-column: 1 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-custom-duration {
  grid-column: 2 !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-presets button {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: rgba(226, 232, 240, 0.9) !important;
  min-height: 2.18rem !important;
  padding: 0.38rem 0.68rem !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.9) !important;
}

#guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-presets button.is-selected {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(124, 58, 237, 0.76)) !important;
  border-color: rgba(191, 219, 254, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Practice schedule rail correction: keep the generated-day reader compact and horizontal. */
body[data-current-screen="dashboard"] #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner:not([hidden]) {
  background:
    radial-gradient(circle at 2% 0%, rgba(124, 58, 237, 0.22), transparent 16rem),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(21, 20, 64, 0.94), rgba(4, 45, 48, 0.88)) !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 42px rgba(0, 0, 0, 0.26) !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.56rem !important;
  grid-template-columns: minmax(13.75rem, 18rem) minmax(0, 1fr) !important;
  margin-top: 0.34rem !important;
  max-height: 7.2rem !important;
  min-height: 5.95rem !important;
  overflow: hidden !important;
  padding: 0.54rem !important;
  transform: none !important;
  width: 100% !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBanner .schedule-journey-heading {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.12), transparent 8rem),
    linear-gradient(135deg, rgba(88, 28, 135, 0.68), rgba(15, 23, 42, 0.74)) !important;
  border: 1px solid rgba(196, 181, 253, 0.18) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.56rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0.62rem 0.72rem !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBanner .schedule-journey-heading > div {
  min-width: 0 !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBanner .schedule-journey-heading span {
  color: rgba(216, 180, 254, 0.78) !important;
  display: block !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBanner .schedule-journey-heading strong {
  color: #ffffff !important;
  display: block !important;
  font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  margin-top: 0.16rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyOpenButton {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: rgba(241, 245, 249, 0.94) !important;
  flex: 0 0 auto !important;
  font-size: 0.72rem !important;
  min-height: 2rem !important;
  padding: 0.34rem 0.64rem !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.94) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks.schedule-journey-blocks {
  align-items: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.02rem 0.04rem 0.12rem !important;
  scrollbar-width: thin !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip {
  align-content: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.16), transparent 8rem),
    rgba(15, 23, 42, 0.68) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  cursor: pointer !important;
  display: grid !important;
  flex: 1 0 12.6rem !important;
  gap: 0.12rem 0.52rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 4.72rem !important;
  min-width: 12.6rem !important;
  padding: 0.6rem 0.7rem !important;
  text-align: left !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip span {
  align-items: center !important;
  align-self: center !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.96), rgba(14, 165, 233, 0.78)) !important;
  border: 1px solid rgba(191, 219, 254, 0.34) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  grid-row: 1 / 3 !important;
  height: 1.72rem !important;
  justify-content: center !important;
  width: 1.72rem !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip strong {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip small {
  color: rgba(203, 213, 225, 0.82) !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
  line-height: 1.18 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.is-current,
body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.is-ready {
  border-color: rgba(125, 211, 252, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 2px rgba(45, 212, 191, 0.12) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.is-complete {
  opacity: 0.68 !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.has-skipped {
  border-color: rgba(251, 191, 36, 0.32) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.schedule-builder-accent-green span {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(20, 184, 166, 0.78)) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.schedule-builder-accent-blue span {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(14, 165, 233, 0.78)) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.schedule-builder-accent-purple span {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(99, 102, 241, 0.78)) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.schedule-builder-accent-teal span {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(14, 165, 233, 0.76)) !important;
}

body[data-current-screen="dashboard"] #scheduleJourneyBlocks .schedule-journey-chip.schedule-builder-accent-amber span {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.98), rgba(217, 119, 6, 0.78)) !important;
}

.phone-preview-warning {
  align-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.2), transparent 18rem),
    radial-gradient(circle at 82% 12%, rgba(124, 58, 237, 0.24), transparent 19rem),
    rgba(2, 6, 23, 0.78);
  box-sizing: border-box;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  position: fixed;
  z-index: 10020;
}

.phone-preview-warning-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.2), transparent 13rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(5, 12, 24, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 72px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(45, 212, 191, 0.08);
  box-sizing: border-box;
  display: grid;
  gap: 0.72rem;
  max-width: 34rem;
  padding: clamp(1.1rem, 4vw, 1.55rem);
  width: min(100%, 34rem);
}

.phone-preview-warning-kicker {
  color: rgba(94, 234, 212, 0.9);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.phone-preview-warning-card h2 {
  color: rgba(248, 250, 252, 0.98);
  font-size: clamp(1.45rem, 7vw, 2.1rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.phone-preview-warning-card p {
  color: rgba(219, 229, 241, 0.82);
  font-size: clamp(0.98rem, 4vw, 1.05rem);
  line-height: 1.55;
  margin: 0;
}

.phone-preview-warning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.phone-preview-warning-actions button {
  flex: 1 1 12rem;
}

@media (min-width: 761px) {
  .zb-soft-modal-overlay {
    background:
      radial-gradient(circle at 22% 18%, rgba(245, 158, 11, 0.16), transparent 18rem),
      radial-gradient(circle at 82% 8%, rgba(45, 212, 191, 0.12), transparent 20rem),
      rgba(5, 8, 14, 0.72) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
    padding: clamp(1rem, 3vw, 2rem) !important;
  }

  .zb-soft-modal {
    --zb-soft-modal-amber: #f0b45f;
    --zb-soft-modal-amber-strong: #d58a2d;
    --zb-soft-modal-cream: #f2eee6;
    --zb-soft-modal-muted: rgba(211, 207, 198, 0.76);
    --zb-soft-modal-surface: #222324;
    --zb-soft-modal-panel: rgba(47, 48, 49, 0.84);
    --zb-soft-modal-panel-strong: rgba(55, 55, 54, 0.92);
    background:
      radial-gradient(circle at 8% 0%, rgba(240, 180, 95, 0.08), transparent 16rem),
      radial-gradient(circle at 94% 12%, rgba(151, 162, 118, 0.055), transparent 18rem),
      linear-gradient(145deg, #292a2a 0%, var(--zb-soft-modal-surface) 48%, #161819 100%) !important;
    border: 1px solid rgba(224, 176, 104, 0.22) !important;
    border-radius: 28px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 247, 234, 0.12),
      0 30px 90px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(240, 180, 95, 0.06) !important;
    color: var(--zb-soft-modal-cream);
    display: flex !important;
    flex-direction: column !important;
    max-height: min(92vh, 880px) !important;
    max-width: min(92vw, 820px) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .zb-soft-modal-header {
    align-items: center !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(240, 180, 95, 0.11), transparent 13rem),
      linear-gradient(135deg, rgba(45, 45, 43, 0.98), rgba(30, 31, 32, 0.98)) !important;
    border-bottom: 1px solid rgba(224, 176, 104, 0.18) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: clamp(1rem, 2.1vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.6rem) !important;
  }

  .zb-soft-modal-subtitle {
    color: rgba(240, 180, 95, 0.9) !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 0.22rem !important;
    text-transform: uppercase !important;
  }

  .zb-soft-modal-title {
    color: var(--zb-soft-modal-cream) !important;
    font-size: clamp(1.45rem, 2.7vw, 2.05rem) !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .zb-soft-modal .modal-close-button {
    background: rgba(255, 247, 234, 0.08) !important;
    border-color: rgba(255, 247, 234, 0.16) !important;
    color: rgba(255, 247, 234, 0.86) !important;
    min-height: 2.45rem !important;
  }

  .zb-soft-modal .modal-close-button:hover,
  .zb-soft-modal .modal-close-button:focus-visible {
    background: rgba(240, 180, 95, 0.16) !important;
    border-color: rgba(240, 180, 95, 0.34) !important;
    color: var(--zb-soft-modal-cream) !important;
  }

  .zb-soft-modal-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .zb-soft-modal-body {
    background:
      linear-gradient(180deg, rgba(232, 228, 220, 0.026), rgba(232, 228, 220, 0.008)) !important;
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 0.86rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: clamp(1rem, 2.3vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.6rem) !important;
    scrollbar-color: rgba(240, 180, 95, 0.34) rgba(255, 247, 234, 0.08);
    scrollbar-width: thin;
  }

  .zb-soft-modal-field:not(.field-grid) {
    background:
      radial-gradient(circle at 0% 0%, rgba(232, 228, 220, 0.045), transparent 11rem),
      var(--zb-soft-modal-panel) !important;
    border: 1px solid rgba(224, 176, 104, 0.13) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 247, 234, 0.06),
      0 14px 32px rgba(0, 0, 0, 0.16) !important;
    gap: 0.5rem !important;
    padding: 0.95rem !important;
  }

  .zb-soft-modal .field-grid.zb-soft-modal-field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0.78rem !important;
    padding: 0 !important;
  }

  .zb-soft-modal .field-grid.zb-soft-modal-field > .field {
    background:
      radial-gradient(circle at 0% 0%, rgba(232, 228, 220, 0.045), transparent 11rem),
      var(--zb-soft-modal-panel) !important;
    border: 1px solid rgba(224, 176, 104, 0.13) !important;
    border-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 247, 234, 0.06),
      0 14px 32px rgba(0, 0, 0, 0.16) !important;
    padding: 0.95rem !important;
  }

  .zb-soft-modal-label,
  .zb-soft-modal .linked-goals-header strong,
  .zb-soft-modal .goal-linked-items-box strong,
  .zb-soft-modal .goal-guidance-examples strong {
    color: rgba(242, 238, 230, 0.95) !important;
    font-size: 0.83rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em !important;
  }

  .zb-soft-modal .field-help,
  .zb-soft-modal .field-hint,
  .zb-soft-modal .section-note,
  .zb-soft-modal .linked-goals-header span,
  .zb-soft-modal .goal-linked-items-box p,
  .zb-soft-modal .goal-guidance-examples > span,
  .zb-soft-modal .modal-intro,
  .zb-soft-modal .linked-goals-empty,
  .zb-soft-modal .record-meta {
    color: var(--zb-soft-modal-muted) !important;
  }

  .zb-soft-modal-input {
    background: rgba(238, 235, 228, 0.96) !important;
    border: 1px solid rgba(224, 176, 104, 0.24) !important;
    border-radius: 13px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 8px 18px rgba(0, 0, 0, 0.12) !important;
    color: #232426 !important;
  }

  .zb-soft-modal-input::placeholder {
    color: rgba(96, 94, 89, 0.54) !important;
  }

  .zb-soft-modal-input:focus {
    border-color: rgba(240, 180, 95, 0.78) !important;
    box-shadow:
      0 0 0 3px rgba(240, 180, 95, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    outline: none !important;
  }

  .zb-soft-modal textarea.zb-soft-modal-input {
    min-height: 7rem !important;
    resize: vertical;
  }

  .zb-soft-modal .goal-example-button,
  .zb-soft-modal .linked-item-row {
    background: rgba(255, 247, 234, 0.08) !important;
    border-color: rgba(255, 247, 234, 0.14) !important;
    color: rgba(255, 247, 234, 0.9) !important;
  }

  .zb-soft-modal .goal-example-button:hover,
  .zb-soft-modal .goal-example-button:focus-visible {
    background: rgba(240, 180, 95, 0.16) !important;
    border-color: rgba(240, 180, 95, 0.36) !important;
  }

  .zb-soft-modal-footer {
    background:
      linear-gradient(180deg, rgba(31, 32, 33, 0.98), rgba(21, 22, 23, 0.98)) !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(224, 176, 104, 0.16) !important;
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.62rem !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0.9rem clamp(1.05rem, 2.4vw, 1.6rem) !important;
  }

  .zb-soft-modal-actions button {
    border-radius: 999px !important;
    min-height: 2.65rem !important;
    min-width: 8.5rem !important;
    padding: 0.65rem 1rem !important;
  }

  .zb-soft-modal-actions .secondary-button {
    background: rgba(255, 247, 234, 0.08) !important;
    border-color: rgba(255, 247, 234, 0.16) !important;
    color: rgba(255, 247, 234, 0.82) !important;
  }

  .zb-soft-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) {
    background: linear-gradient(135deg, var(--zb-soft-modal-amber), var(--zb-soft-modal-amber-strong)) !important;
    border-color: rgba(255, 218, 160, 0.48) !important;
    color: #21160c !important;
    font-weight: 900 !important;
    box-shadow:
      0 14px 30px rgba(213, 138, 45, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  }
}

@media (min-width: 761px) {
  .zb-soft-light-modal-overlay {
    background:
      radial-gradient(circle at 23% 16%, rgba(45, 212, 191, 0.18), transparent 18rem),
      radial-gradient(circle at 82% 10%, rgba(14, 165, 233, 0.08), transparent 20rem),
      rgba(4, 7, 13, 0.76) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
  }

  .zb-soft-light-modal {
    --zb-soft-light-teal: #14b8a6;
    --zb-soft-light-teal-strong: #0f766e;
    --zb-soft-light-ink: #203036;
    --zb-soft-light-muted: #5e7375;
    --zb-soft-light-surface: #e3eeee;
    --zb-soft-light-panel: rgba(210, 228, 228, 0.9);
    background:
      radial-gradient(circle at 9% 0%, rgba(45, 212, 191, 0.22), transparent 17rem),
      linear-gradient(145deg, #f3fbfa 0%, var(--zb-soft-light-surface) 50%, #d5e3e3 100%) !important;
    border: 1px solid rgba(15, 118, 110, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 36px 100px rgba(0, 0, 0, 0.5),
      0 0 42px rgba(20, 184, 166, 0.14) !important;
    color: var(--zb-soft-light-ink) !important;
    color-scheme: light;
    -webkit-text-fill-color: var(--zb-soft-light-ink) !important;
  }

  .zb-soft-light-modal-header {
    background:
      radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.2), transparent 13rem),
      linear-gradient(135deg, rgba(248, 253, 252, 0.98), rgba(218, 235, 234, 0.98)) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      inset 0 -1px 0 rgba(255, 255, 255, 0.42) !important;
    color: var(--zb-soft-light-ink) !important;
    -webkit-text-fill-color: var(--zb-soft-light-ink) !important;
  }

  .zb-soft-light-modal-subtitle {
    color: #0f766e !important;
    -webkit-text-fill-color: #0f766e !important;
  }

  .zb-soft-light-modal-title {
    color: #203036 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #203036 !important;
  }

  .zb-soft-light-modal .modal-close-button {
    background: rgba(46, 45, 41, 0.08) !important;
    border-color: rgba(46, 45, 41, 0.18) !important;
    color: #303238 !important;
    -webkit-text-fill-color: #303238 !important;
  }

  .zb-soft-light-modal .modal-close-button:hover,
  .zb-soft-light-modal .modal-close-button:focus-visible {
    background: rgba(20, 184, 166, 0.16) !important;
    border-color: rgba(15, 118, 110, 0.34) !important;
    color: #203036 !important;
    -webkit-text-fill-color: #203036 !important;
  }

  .zb-soft-light-modal-body {
    background:
      linear-gradient(180deg, rgba(249, 254, 253, 0.42), rgba(216, 234, 234, 0.2)) !important;
  }

  .zb-soft-light-modal-field:not(.field-grid) {
    background:
      radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
      var(--zb-soft-light-panel) !important;
    border: 1px solid rgba(15, 118, 110, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      0 14px 32px rgba(12, 74, 80, 0.1) !important;
  }

  .zb-soft-light-modal .field-grid.zb-soft-light-modal-field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field {
    background:
      radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
      var(--zb-soft-light-panel) !important;
    border: 1px solid rgba(15, 118, 110, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      0 14px 32px rgba(12, 74, 80, 0.1) !important;
  }

  .zb-soft-light-modal-label,
  .zb-soft-light-modal .linked-goals-header strong,
  .zb-soft-light-modal .goal-linked-items-box strong,
  .zb-soft-light-modal .goal-guidance-examples strong {
    color: rgba(37, 40, 45, 0.94) !important;
    -webkit-text-fill-color: rgba(37, 40, 45, 0.94) !important;
  }

  .zb-soft-light-modal .field-help,
  .zb-soft-light-modal .field-hint,
  .zb-soft-light-modal .section-note,
  .zb-soft-light-modal .linked-goals-header span,
  .zb-soft-light-modal .goal-linked-items-box p,
  .zb-soft-light-modal .goal-guidance-examples > span,
  .zb-soft-light-modal .modal-intro,
  .zb-soft-light-modal .linked-goals-empty,
  .zb-soft-light-modal .record-meta {
    color: var(--zb-soft-light-muted) !important;
    -webkit-text-fill-color: var(--zb-soft-light-muted) !important;
  }

  .zb-soft-light-modal-input {
    background: #fbfefd !important;
    border: 1px solid rgba(15, 118, 110, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 8px 18px rgba(12, 74, 80, 0.1) !important;
    color: #1f2f35 !important;
    color-scheme: light !important;
    caret-color: #0f766e !important;
    -webkit-text-fill-color: #1f2f35 !important;
  }

  .zb-soft-light-modal-input::placeholder {
    color: rgba(82, 104, 107, 0.62) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(82, 104, 107, 0.62) !important;
  }

  .zb-soft-light-modal-input:focus {
    background: #fdfffe !important;
    border-color: rgba(20, 184, 166, 0.84) !important;
    box-shadow:
      0 0 0 3px rgba(20, 184, 166, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    color: #17282d !important;
    outline: none !important;
    -webkit-text-fill-color: #17282d !important;
  }

  .zb-soft-light-modal .goal-example-button,
  .zb-soft-light-modal .linked-item-row {
    background: rgba(241, 253, 251, 0.56) !important;
    border-color: rgba(15, 118, 110, 0.2) !important;
    color: #21343a !important;
    -webkit-text-fill-color: #21343a !important;
  }

  .zb-soft-light-modal-footer {
    background:
      linear-gradient(180deg, rgba(220, 238, 237, 0.96), rgba(202, 224, 224, 0.98)) !important;
    border-top: 1px solid rgba(15, 118, 110, 0.22) !important;
    box-shadow: 0 -14px 30px rgba(12, 74, 80, 0.1) !important;
  }

  .zb-soft-light-modal-actions .secondary-button {
    background: rgba(15, 118, 110, 0.08) !important;
    border-color: rgba(15, 118, 110, 0.24) !important;
    color: #21343a !important;
    -webkit-text-fill-color: #21343a !important;
  }

  .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) {
    background: linear-gradient(135deg, #99f6e4, var(--zb-soft-light-teal-strong)) !important;
    border-color: rgba(204, 251, 241, 0.66) !important;
    color: #042f2e !important;
    box-shadow:
      0 14px 30px rgba(15, 118, 110, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    -webkit-text-fill-color: #042f2e !important;
  }
}

@media (max-width: 520px) {
  .phone-preview-warning {
    align-items: end;
    padding: 0.75rem;
  }

  .phone-preview-warning-card {
    border-radius: 22px;
    padding: 1rem;
  }
}

#sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(13.75rem, 18rem) minmax(0, 1fr) !important;
  max-height: 7.2rem !important;
  min-height: 5.95rem !important;
  overflow: hidden !important;
}

#sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
}

#sessionPanel.practice-player #scheduleJourneyBlocks.schedule-journey-blocks {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#sessionPanel.practice-player #scheduleJourneyBlocks.schedule-journey-blocks > .schedule-journey-chip {
  flex: 1 0 12.6rem !important;
  min-width: 12.6rem !important;
}

@media (max-width: 979px) {
  body[data-current-screen="dashboard"] #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner:not([hidden]) {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  body[data-current-screen="dashboard"] #scheduleJourneyBanner .schedule-journey-heading {
    min-height: 4.25rem !important;
  }
}

@media (max-width: 640px) {
  #guidanceModalBackdrop.is-practice-log-editor-modal .modal-card.guidance-modal-card {
    max-height: 94vh !important;
    width: calc(100vw - 1rem) !important;
  }

  #guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-field-grid,
  #guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-view-row {
    grid-template-columns: 1fr !important;
  }

  #guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-editor {
    grid-template-columns: 1fr !important;
  }

  #guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-duration-presets,
  #guidanceModalBackdrop.is-practice-log-editor-modal .practice-log-custom-duration {
    grid-column: 1 !important;
  }

  #guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions {
    justify-content: stretch !important;
  }

  #guidanceModalBackdrop.is-practice-log-editor-modal .guidance-modal-actions button {
    flex: 1 1 100% !important;
  }
}

#guidanceModalBackdrop.is-supporting-material-picker-modal {
  align-items: center !important;
  overflow: auto !important;
  padding: clamp(0.8rem, 2vw, 1.5rem) !important;
  z-index: 13080 !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .modal-card.guidance-modal-card {
  max-width: min(58rem, 92vw) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-body {
  max-height: min(58vh, 32rem) !important;
  overflow: auto !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker {
  display: grid !important;
  gap: 0.9rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls {
  align-items: end !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem) !important;
  width: 100% !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls label {
  display: grid !important;
  gap: 0.32rem !important;
  margin: 0 !important;
  min-width: 0 !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls input,
#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls select {
  background: rgba(15, 23, 42, 0.58) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  width: 100% !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls input::placeholder {
  color: rgba(148, 163, 184, 0.58) !important;
  -webkit-text-fill-color: rgba(148, 163, 184, 0.58) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls select option {
  background: #0f172a !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-list,
#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section {
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section + .supporting-material-picker-section {
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading {
  display: grid !important;
  gap: 0.08rem !important;
  margin-bottom: 0.28rem !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading strong,
#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading small {
  display: block !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading strong {
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 0.9rem !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading small {
  color: rgba(203, 213, 225, 0.84) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-item {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  padding: 0.62rem 0.08rem !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-item:hover {
  background: rgba(148, 163, 184, 0.045) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-copy {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-copy strong,
#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-copy small {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-copy strong {
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-copy small {
  color: rgba(203, 213, 225, 0.84) !important;
  font-size: 0.8rem !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.84) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.7) !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  justify-self: end !important;
  line-height: 1 !important;
  min-height: 1.55rem !important;
  min-width: 0 !important;
  outline: none !important;
  padding: 0.22rem 0.25rem !important;
  text-shadow: none !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.7) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose]:focus:not(:focus-visible) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.7) !important;
  outline: none !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.7) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose]:hover,
#guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose]:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(248, 250, 252, 0.96) !important;
  outline: none !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15rem !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.88) !important;
  font-size: 0.82rem !important;
  font-weight: 780 !important;
  min-height: 2rem !important;
  min-width: 0 !important;
  outline: none !important;
  padding: 0.36rem 0.55rem !important;
  text-shadow: none !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.88) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button:focus:not(:focus-visible) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.88) !important;
  outline: none !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.88) !important;
}

#guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button:hover,
#guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button:focus-visible {
  background: rgba(148, 163, 184, 0.08) !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(248, 250, 252, 0.96) !important;
  outline: none !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96) !important;
}

@media (max-width: 760px) {
  #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls {
    grid-template-columns: 1fr !important;
  }

  #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-item {
    grid-template-columns: 2rem minmax(0, 1fr) !important;
  }

  #guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }
}

/* Practice rail update affordance: keep the narrow rail concise. */
body[data-current-screen="practice-v2"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status,
body[data-current-screen="dashboard"] #pwaUpdateStatus.pwa-update-status.is-rail-update-status {
  display: none !important;
}

.practice-rail-version-badge.is-update-available {
  background:
    radial-gradient(circle at 16% 10%, rgba(253, 230, 138, 0.3), transparent 52%),
    linear-gradient(135deg, rgba(120, 53, 15, 0.78), rgba(14, 116, 144, 0.48) 58%, rgba(79, 70, 229, 0.36)) !important;
  border-color: rgba(251, 191, 36, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(245, 158, 11, 0.12) !important;
  color: #fff7d6 !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  font-weight: 880 !important;
}

.practice-rail-version-badge.is-update-available:hover,
.practice-rail-version-badge.is-update-available:focus-visible {
  border-color: rgba(253, 230, 138, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(34, 211, 238, 0.2),
    0 12px 26px rgba(245, 158, 11, 0.18) !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Final confirmation-dialog guard: keep shared confirmations readable after global button normalization. */
#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-card {
  color: #172536 !important;
  -webkit-text-fill-color: initial !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-message {
  color: #40576a !important;
  -webkit-text-fill-color: #40576a !important;
}

#guidanceModalBackdrop.is-confirmation-modal .zonebuilder-confirm-detail {
  background: rgba(237, 248, 246, 0.92) !important;
  border-color: rgba(78, 130, 123, 0.2) !important;
  color: #3b5968 !important;
  -webkit-text-fill-color: #3b5968 !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .secondary-button {
  background: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  border-color: rgba(104, 124, 143, 0.24) !important;
  box-shadow: 0 8px 18px rgba(44, 57, 72, 0.08) !important;
  color: #41566a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #41566a !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .secondary-button:hover,
#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .secondary-button:focus-visible {
  background: #ffffff !important;
  border-color: rgba(71, 93, 112, 0.34) !important;
  color: #22374b !important;
  -webkit-text-fill-color: #22374b !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button {
  background: linear-gradient(135deg, rgba(32, 135, 151, 0.96), rgba(52, 168, 151, 0.88)) !important;
  border-color: rgba(30, 120, 134, 0.24) !important;
  box-shadow: 0 12px 24px rgba(33, 125, 139, 0.18) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop.is-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button.is-caution {
  background: linear-gradient(135deg, rgba(180, 45, 54, 0.96), rgba(197, 70, 64, 0.88)) !important;
  border-color: rgba(139, 25, 34, 0.28) !important;
  box-shadow: 0 12px 24px rgba(180, 45, 54, 0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Update confirmation: compact modern dialog for app reloads. */
#guidanceModalBackdrop.is-update-confirmation-modal {
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.16), transparent 24rem),
    radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.16), transparent 22rem),
    rgba(7, 14, 26, 0.48) !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(224, 247, 246, 0.92), transparent 13rem),
    linear-gradient(180deg, #fbfeff 0%, #f2fbfc 100%) !important;
  border-color: rgba(82, 132, 149, 0.22) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 70px rgba(6, 18, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  max-height: min(84vh, 28rem) !important;
  max-width: min(28.5rem, calc(100vw - 2rem)) !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .modal-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 211, 252, 0.22), transparent 13rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 252, 0.9)) !important;
  padding: 1rem 1.08rem 0.78rem !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .modal-header .eyebrow {
  color: #087276 !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.09em !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .modal-header h2 {
  color: #12283a !important;
  font-size: clamp(1.28rem, 2vw, 1.54rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-message {
  color: #41596b !important;
  font-size: 0.95rem !important;
  line-height: 1.46 !important;
  padding: 0.9rem 1.08rem 0.84rem !important;
  -webkit-text-fill-color: #41596b !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-body:not([hidden]) {
  margin: -0.18rem 0 0 !important;
  padding: 0 1.08rem 0.92rem !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .zonebuilder-confirm-detail {
  background:
    linear-gradient(135deg, rgba(224, 247, 246, 0.96), rgba(239, 248, 255, 0.9)) !important;
  border-color: rgba(20, 184, 166, 0.2) !important;
  border-radius: 13px !important;
  color: #31576a !important;
  font-size: 0.86rem !important;
  font-weight: 560 !important;
  padding: 0.68rem 0.78rem !important;
  -webkit-text-fill-color: #31576a !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions {
  background: linear-gradient(180deg, rgba(248, 252, 253, 0.88), rgba(255, 255, 255, 0.98)) !important;
  gap: 0.5rem !important;
  padding: 0.74rem 1.08rem 0.86rem !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions button {
  min-height: 2.32rem !important;
  min-width: 7.25rem !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions .secondary-button {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(99, 116, 133, 0.22) !important;
  box-shadow: none !important;
  color: #4b6072 !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #4b6072 !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button {
  background: linear-gradient(135deg, #0f93a6, #18b69e) !important;
  border-color: rgba(15, 147, 166, 0.28) !important;
  box-shadow: 0 12px 24px rgba(15, 147, 166, 0.2) !important;
  color: #ffffff !important;
  font-weight: 720 !important;
  -webkit-text-fill-color: #ffffff !important;
}

#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button:hover,
#guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button:focus-visible {
  box-shadow:
    0 14px 28px rgba(15, 147, 166, 0.24),
    0 0 0 3px rgba(45, 212, 191, 0.18) !important;
}

/* System flow modals: resume, unfinished scheduled work, and similar app-level prompts. */
#guidanceModalBackdrop.is-system-flow-modal {
  background:
    radial-gradient(circle at 28% 12%, rgba(45, 212, 191, 0.16), transparent 22rem),
    radial-gradient(circle at 78% 8%, rgba(14, 165, 233, 0.1), transparent 22rem),
    rgba(4, 7, 13, 0.68) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-card {
  background:
    radial-gradient(circle at 9% 0%, rgba(45, 212, 191, 0.2), transparent 17rem),
    linear-gradient(145deg, #f3fbfa 0%, #e4eeee 52%, #d6e4e4 100%) !important;
  border: 1px solid rgba(15, 118, 110, 0.26) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 30px 90px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(20, 184, 166, 0.12) !important;
  color: #203036 !important;
  color-scheme: light;
  max-height: min(88vh, 38rem) !important;
  max-width: min(36rem, calc(100vw - 2rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  -webkit-text-fill-color: initial !important;
}

#guidanceModalBackdrop.is-system-flow-modal .modal-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 13rem),
    linear-gradient(135deg, rgba(248, 253, 252, 0.98), rgba(219, 235, 234, 0.96)) !important;
  border-bottom: 1px solid rgba(20, 184, 166, 0.24) !important;
  margin: 0 !important;
  padding: 1.12rem 1.2rem 0.92rem !important;
}

#guidanceModalBackdrop.is-system-flow-modal .modal-header .eyebrow {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.08em !important;
}

#guidanceModalBackdrop.is-system-flow-modal .modal-header h2 {
  color: #17282d !important;
  font-size: clamp(1.32rem, 2.4vw, 1.72rem) !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-message {
  color: #435c64 !important;
  font-size: 0.98rem !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  padding: 0.95rem 1.2rem 0.78rem !important;
  -webkit-text-fill-color: #435c64 !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-body:not([hidden]) {
  display: grid !important;
  gap: 0.85rem !important;
  padding: 0 1.2rem 1rem !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions {
  background: linear-gradient(180deg, rgba(220, 238, 237, 0.88), rgba(202, 224, 224, 0.98)) !important;
  border-top: 1px solid rgba(15, 118, 110, 0.2) !important;
  gap: 0.55rem !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0.78rem 1.2rem 0.92rem !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions button {
  border-radius: 999px !important;
  min-height: 2.42rem !important;
  padding: 0.52rem 1rem !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions button:not(.secondary-button):not(.danger-solid-button) {
  background: linear-gradient(135deg, #99f6e4, #0f766e) !important;
  border-color: rgba(204, 251, 241, 0.66) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  color: #042f2e !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: #042f2e !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions .secondary-button {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow: none !important;
  color: #263d45 !important;
  font-weight: 640 !important;
  -webkit-text-fill-color: #263d45 !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions .guidance-link-action {
  background: transparent !important;
  border-color: transparent !important;
  color: #0f766e !important;
  min-width: 0 !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  -webkit-text-fill-color: #0f766e !important;
}

#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions .secondary-button:hover,
#guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions .secondary-button:focus-visible {
  border-color: rgba(15, 118, 110, 0.4) !important;
  color: #17282d !important;
  outline: none !important;
  -webkit-text-fill-color: #17282d !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-details,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow,
#guidanceModalBackdrop.is-system-flow-modal .jump-ahead-schedule-flow {
  color: #203036 !important;
  display: grid;
  gap: 0.78rem;
  -webkit-text-fill-color: initial !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-stop,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow > p,
#guidanceModalBackdrop.is-system-flow-modal .jump-ahead-schedule-flow > p {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    rgba(210, 228, 228, 0.86) !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 12px 28px rgba(12, 74, 80, 0.08) !important;
  color: #203036 !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-stop span {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-stop strong {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-options,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow-options {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-options article,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow-options article {
  background: rgba(248, 253, 252, 0.68) !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  padding: 0.82rem !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-options strong,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow-options strong {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

#guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-options p,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow-options span,
#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow > p,
#guidanceModalBackdrop.is-system-flow-modal .jump-ahead-schedule-flow > p {
  color: #5e7375 !important;
  line-height: 1.42 !important;
  margin: 0 !important;
  -webkit-text-fill-color: #5e7375 !important;
}

#guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow > p,
#guidanceModalBackdrop.is-system-flow-modal .jump-ahead-schedule-flow > p {
  padding: 0.76rem 0.86rem !important;
}

@media (max-width: 760px) {
  #guidanceModalBackdrop.is-system-flow-modal .practice-resume-choice-options,
  #guidanceModalBackdrop.is-system-flow-modal .unfinished-schedule-flow-options {
    grid-template-columns: 1fr;
  }

  #guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* Practice protection prompts use their own DOM, but share the system-flow modal language. */
.abandoned-session-modal-backdrop {
  background:
    radial-gradient(circle at 28% 12%, rgba(45, 212, 191, 0.16), transparent 22rem),
    radial-gradient(circle at 78% 8%, rgba(14, 165, 233, 0.1), transparent 22rem),
    rgba(4, 7, 13, 0.68) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
}

.abandoned-session-modal-card {
  background:
    radial-gradient(circle at 9% 0%, rgba(45, 212, 191, 0.2), transparent 17rem),
    linear-gradient(145deg, #f3fbfa 0%, #e4eeee 52%, #d6e4e4 100%) !important;
  border: 1px solid rgba(15, 118, 110, 0.26) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 30px 90px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(20, 184, 166, 0.12) !important;
  color: #203036 !important;
  color-scheme: light;
  max-height: min(88vh, 40rem) !important;
  max-width: min(36rem, calc(100vw - 2rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  -webkit-text-fill-color: initial !important;
}

.abandoned-session-modal-card .modal-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.18), transparent 13rem),
    linear-gradient(135deg, rgba(248, 253, 252, 0.98), rgba(219, 235, 234, 0.96)) !important;
  border-bottom: 1px solid rgba(20, 184, 166, 0.24) !important;
  margin: 0 !important;
  padding: 1.12rem 1.2rem 0.92rem !important;
}

.abandoned-session-modal-card .modal-header .eyebrow {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.08em !important;
}

.abandoned-session-modal-card .modal-header h2 {
  color: #17282d !important;
  font-size: clamp(1.32rem, 2.4vw, 1.72rem) !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

.abandoned-session-modal-card .guidance-modal-message {
  color: #435c64 !important;
  font-size: 0.98rem !important;
  line-height: 1.48 !important;
  margin: 0 !important;
  padding: 0.95rem 1.2rem 0.78rem !important;
  -webkit-text-fill-color: #435c64 !important;
}

.abandoned-session-modal-body {
  display: grid !important;
  gap: 0.85rem !important;
  margin: 0 !important;
  padding: 0 1.2rem 1rem !important;
}

.abandoned-session-countdown,
.abandoned-session-recovery-summary,
.abandoned-session-adjust-body {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 12rem),
    rgba(210, 228, 228, 0.86) !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 12px 28px rgba(12, 74, 80, 0.08) !important;
  color: #203036 !important;
}

.abandoned-session-countdown {
  padding: 1rem !important;
}

.abandoned-session-countdown span,
.abandoned-session-recovery-summary span,
.abandoned-session-custom-time span,
.abandoned-session-action-section h3 {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

.abandoned-session-countdown strong,
.abandoned-session-recovery-summary strong {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

.abandoned-session-recovery-summary small,
.abandoned-session-recovery-note {
  color: #5e7375 !important;
  -webkit-text-fill-color: #5e7375 !important;
}

.abandoned-session-adjust-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.82rem;
}

.abandoned-session-adjust-grid button,
.abandoned-session-custom-time input {
  background: rgba(248, 253, 252, 0.78) !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 12px !important;
  color: #17282d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  -webkit-text-fill-color: #17282d !important;
}

.abandoned-session-custom-time input:focus {
  border-color: rgba(15, 118, 110, 0.48) !important;
  outline: 3px solid rgba(20, 184, 166, 0.22) !important;
  outline-offset: 2px !important;
}

.abandoned-session-modal-actions {
  background: linear-gradient(180deg, rgba(220, 238, 237, 0.88), rgba(202, 224, 224, 0.98)) !important;
  border-top: 1px solid rgba(15, 118, 110, 0.2) !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  padding: 0.78rem 1.2rem 0.92rem !important;
}

.abandoned-session-action-section {
  border-top-color: rgba(15, 118, 110, 0.16) !important;
}

.abandoned-session-action-controls button,
.abandoned-session-modal-actions > button {
  border-radius: 999px !important;
  min-height: 2.42rem !important;
  padding: 0.52rem 1rem !important;
}

.abandoned-session-action-controls button:not(.secondary-button):not(.danger-solid-button),
.abandoned-session-modal-actions > button:not(.secondary-button):not(.danger-solid-button) {
  background: linear-gradient(135deg, #99f6e4, #0f766e) !important;
  border-color: rgba(204, 251, 241, 0.66) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  color: #042f2e !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: #042f2e !important;
}

.abandoned-session-action-controls .secondary-button,
.abandoned-session-modal-actions > .secondary-button {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow: none !important;
  color: #263d45 !important;
  font-weight: 640 !important;
  -webkit-text-fill-color: #263d45 !important;
}

.abandoned-session-action-controls .danger-solid-button,
.abandoned-session-modal-actions > .danger-solid-button {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  border-color: rgba(254, 202, 202, 0.7) !important;
  color: #fff7f7 !important;
  font-weight: 760 !important;
  -webkit-text-fill-color: #fff7f7 !important;
}

.abandoned-session-action-section.is-danger-zone h3 {
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}

#guidanceModalBackdrop.is-schedule-archive-picker-modal .guidance-modal-actions button[data-guidance-action-role="unarchiveSelected"]:disabled {
  background: rgba(221, 235, 237, 0.9) !important;
  background-image: none !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  color: rgba(38, 61, 69, 0.9) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(38, 61, 69, 0.9) !important;
}

/* URL Resource modal: keep the Title dictation affordance visible on the light editor surface. */
body:has(.catalog-add-flow) .catalog-add-flow .speech-input-wrap > .speech-mic-button,
body:has(.catalog-add-flow) .catalog-add-flow .speech-input-wrap > .speech-mic-button[data-speech-state],
body:has(.catalog-add-flow) .catalog-add-flow .speech-input-wrap > .speech-mic-button:disabled {
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.88), transparent 30%),
    linear-gradient(135deg, #2dd4bf, #0f766e) !important;
  background-color: #0f766e !important;
  background-image:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.88), transparent 30%),
    linear-gradient(135deg, #2dd4bf, #0f766e) !important;
  border-color: rgba(4, 120, 87, 0.7) !important;
  box-shadow:
    0 10px 22px rgba(15, 118, 110, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:has(.catalog-add-flow) .catalog-add-flow .speech-input-wrap > .speech-mic-button .speech-mic-icon,
body:has(.catalog-add-flow) .catalog-add-flow .speech-input-wrap > .speech-mic-button svg {
  color: #ffffff !important;
  opacity: 1 !important;
  stroke: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Developer route-performance diagnostic mode. Off by default; use
   ZoneBuilderDev.enableLowEffectsMode() to compare Safari compositing cost. */
body.zb-low-effects-mode *,
body.zb-low-effects-mode *::before,
body.zb-low-effects-mode *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

body.zb-low-effects-mode .app-shell,
body.zb-low-effects-mode .card,
body.zb-low-effects-mode .app-screen,
body.zb-low-effects-mode .practice-dashboard,
body.zb-low-effects-mode .zb-practice-v2-screen,
body.zb-low-effects-mode .zb-pv2-panel,
body.zb-low-effects-mode .zb-pv2-shell,
body.zb-low-effects-mode .zb-dynamic-practice-shell,
body.zb-low-effects-mode .guidance-modal,
body.zb-low-effects-mode .catalog-add-flow,
body.zb-low-effects-mode .placeholder-panel,
body.zb-low-effects-mode [class*="glass"],
body.zb-low-effects-mode [class*="wallpaper"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.16) !important;
  filter: none !important;
}

body.zb-low-effects-mode .practice-wallpaper-grid,
body.zb-low-effects-mode .zb-pv2-wallpaper,
body.zb-low-effects-mode .zb-pv2-stage::before,
body.zb-low-effects-mode .zb-pv2-stage::after,
body.zb-low-effects-mode .dynamic-practice-stage::before,
body.zb-low-effects-mode .dynamic-practice-stage::after {
  opacity: 0.22 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}