/*
Progress dashboard final layer.
Loaded after the shared interaction/polish sheets so MyZone dashboard charts keep readable legends.
*/

html body[data-current-screen="log"] .log-card .progress-dashboard-shell {
  display: grid !important;
  align-items: start !important;
  gap: 0.82rem !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  grid-template-areas: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-metrics,
html body[data-current-screen="log"] .log-card .progress-dashboard-row {
  grid-area: auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-row {
  align-items: start !important;
  display: grid !important;
  gap: 0.82rem !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-columns {
  align-items: start !important;
  display: grid !important;
  gap: 0.82rem !important;
  grid-template-columns: minmax(19rem, 0.9fr) minmax(22rem, 1.06fr) minmax(22rem, 1.1fr) !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-column {
  align-content: start !important;
  align-items: start !important;
  display: grid !important;
  gap: 0.82rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-column > * {
  align-self: start !important;
  grid-area: auto !important;
  grid-column: auto !important;
  height: auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-primary-row {
  grid-template-columns: minmax(19rem, 0.9fr) minmax(22rem, 1.06fr) minmax(22rem, 1.1fr) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-insights-row {
  grid-template-columns: minmax(21rem, 0.95fr) minmax(23rem, 1.02fr) minmax(22rem, 1.03fr) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-context-row {
  grid-template-columns: minmax(17rem, 0.88fr) minmax(17rem, 0.88fr) minmax(23rem, 1.24fr) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-row > * {
  align-self: start !important;
  grid-area: auto !important;
  height: auto !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-signals {
  display: none !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-card,
html body[data-current-screen="log"] .log-card .progress-momentum-stage.progress-dashboard-hero,
html body[data-current-screen="log"] .log-card .progress-activity-flow.progress-dashboard-activity {
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(2, 6, 23, 0.18) !important;
  padding: 0.86rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-card header,
html body[data-current-screen="log"] .log-card .progress-activity-flow header {
  gap: 0.14rem !important;
  margin-bottom: 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .progress-card-kicker,
html body[data-current-screen="log"] .log-card .progress-kicker {
  color: rgba(125, 211, 252, 0.92) !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.05em !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-card h3,
html body[data-current-screen="log"] .log-card .progress-activity-flow h3 {
  font-size: clamp(1rem, 1.05vw, 1.12rem) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-card p {
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 0.78rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-metrics {
  gap: 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stat {
  min-height: 4.05rem !important;
  padding: 0.62rem 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stat::before {
  border-radius: 11px !important;
  height: 2.12rem !important;
  width: 2.12rem !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stat strong {
  font-size: clamp(1.34rem, 1.9vw, 1.62rem) !important;
  line-height: 1.14 !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stat span {
  color: rgba(203, 213, 225, 0.78) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card {
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-breakdown {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 14rem),
    rgba(3, 10, 24, 0.3) !important;
  display: grid !important;
  gap: 0.84rem !important;
  grid-template-columns: minmax(11.45rem, 0.46fr) minmax(0, 1fr) !important;
  min-height: 11.7rem !important;
  padding: 0.9rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-chart {
  justify-self: center !important;
  min-width: 10.6rem !important;
  width: min(13.1rem, 100%) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-legend {
  align-content: center !important;
  display: grid !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-legend-item {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(8, 18, 34, 0.72), rgba(3, 10, 24, 0.58)) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
  display: grid !important;
  gap: 0.08rem 0.44rem !important;
  grid-template-areas:
    "dot label"
    ". value" !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 2.45rem !important;
  padding: 0.46rem 0.58rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-legend-item i {
  grid-area: dot !important;
  height: 0.62rem !important;
  margin-top: 0.16rem !important;
  width: 0.62rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-legend-item span {
  color: rgba(248, 250, 252, 0.94) !important;
  display: block !important;
  font-size: clamp(0.78rem, 0.82vw, 0.88rem) !important;
  font-weight: 760 !important;
  grid-area: label !important;
  line-height: 1.18 !important;
  min-width: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-legend-item strong {
  color: rgba(203, 213, 225, 0.86) !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  grid-area: value !important;
  justify-self: start !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.86) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-items {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.16), transparent 18rem),
    radial-gradient(circle at 90% 4%, rgba(139, 92, 246, 0.12), transparent 20rem),
    linear-gradient(145deg, rgba(9, 24, 42, 0.9), rgba(3, 10, 24, 0.92)) !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-stage.progress-dashboard-hero {
  align-content: start !important;
  align-self: start !important;
  gap: 0.7rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-copy {
  gap: 0.22rem !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-copy h3 {
  overflow: visible !important;
  padding: 0.1em 0 !important;
  font-size: clamp(2.25rem, 3.4vw, 3.35rem) !important;
  line-height: 1.22 !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-copy p {
  color: rgba(226, 232, 240, 0.8) !important;
  font-size: 0.82rem !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-delta {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 0.74rem !important;
  margin-top: 0.24rem !important;
  padding: 0.32rem 0.58rem !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-summary {
  display: grid !important;
  gap: 0.36rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-summary .progress-signal-pill {
  min-height: 3.35rem !important;
  padding: 0.5rem 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-summary .progress-signal-pill strong {
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-momentum-summary .progress-signal-pill small {
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-bars {
  min-height: 10.35rem !important;
  padding: 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-frame {
  gap: 0.42rem 0.5rem !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(4.9rem, 0.2fr) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-plot {
  min-height: 7.75rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-average span {
  align-items: center !important;
  line-height: 1.18 !important;
  min-height: 1.12rem !important;
  min-width: max-content !important;
  top: -0.72rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-x-labels small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm {
  align-content: start !important;
  align-self: start !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-grid {
  align-self: start !important;
  grid-template-rows: auto auto !important;
  margin-top: 0.5rem !important;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-card {
  min-height: 0 !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, padding 160ms ease;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-card.is-compact {
  gap: 0.22rem !important;
  padding: 0.44rem 0.52rem !important;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-card.is-compact header {
  gap: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-card.is-compact h4 {
  display: none !important;
}

html body[data-current-screen="log"] .log-card .progress-compact-empty-state {
  background: rgba(2, 8, 23, 0.22) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 10px !important;
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.76rem !important;
  margin: 0 !important;
  padding: 0.34rem 0.42rem !important;
}

html body[data-current-screen="log"] .log-card .progress-rhythm-review-card.has-content {
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-attention-card {
  align-content: start !important;
  align-self: start !important;
  display: grid !important;
  gap: 0.46rem !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-attention-card header {
  margin-bottom: 0.28rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-attention-card header p {
  font-size: 0.74rem !important;
  line-height: 1.28 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-list,
html body[data-current-screen="log"] .log-card .progress-recording-signals,
html body[data-current-screen="log"] .log-card .progress-notes-signals {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-card {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 146, 60, 0.12), transparent 58%),
    linear-gradient(145deg, rgba(8, 18, 34, 0.78), rgba(2, 8, 23, 0.64)) !important;
  border: 1px solid rgba(251, 146, 60, 0.16) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.38rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  padding: 0.52rem 0.6rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-copy {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-card strong,
html body[data-current-screen="log"] .log-card .progress-dashboard-note-card strong {
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 0.82rem !important;
  line-height: 1.14 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-card span,
html body[data-current-screen="log"] .log-card .progress-dashboard-note-card span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.71rem !important;
  line-height: 1.18 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-play {
  align-items: center !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(124, 58, 237, 0.2)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 999px !important;
  color: rgba(248, 250, 252, 0.94) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 1.66rem !important;
  padding: 0.24rem 0.54rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-play:hover,
html body[data-current-screen="log"] .log-card .progress-dashboard-recording-play.is-playing {
  border-color: rgba(125, 211, 252, 0.46) !important;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.14) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-recording-state,
html body[data-current-screen="log"] .log-card .progress-dashboard-recording-more {
  color: rgba(186, 230, 253, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-note-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.12), transparent 58%),
    linear-gradient(145deg, rgba(8, 18, 34, 0.78), rgba(2, 8, 23, 0.64)) !important;
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 12px !important;
  color: inherit !important;
  cursor: pointer !important;
  display: grid !important;
  font: inherit !important;
  gap: 0.12rem !important;
  justify-items: start !important;
  min-width: 0 !important;
  padding: 0.56rem 0.62rem !important;
  text-align: left !important;
  width: 100% !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-note-card strong,
html body[data-current-screen="log"] .log-card .progress-dashboard-note-card span,
html body[data-current-screen="log"] .log-card .progress-dashboard-note-card p {
  justify-self: start !important;
  text-align: left !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-note-card p {
  color: rgba(203, 213, 225, 0.76) !important;
  display: -webkit-box !important;
  font-size: 0.75rem !important;
  line-height: 1.32 !important;
  margin: 0.18rem 0 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-note-card.is-expanded p {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.18), transparent 18rem),
    radial-gradient(circle at 96% 0%, rgba(168, 85, 247, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(9, 24, 42, 0.94), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals .progress-donut-breakdown {
  align-content: start !important;
  gap: 0.52rem !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals .progress-goal-progress-row {
  border-color: rgba(148, 163, 184, 0.16) !important;
  gap: 0.42rem !important;
  padding: 0.62rem 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals .progress-goal-progress-row strong {
  font-size: 0.88rem !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals .progress-goal-progress-row span {
  color: rgba(203, 213, 225, 0.76) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-goals .progress-goal-progress-row i {
  height: 0.44rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements {
  align-self: start !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements header {
  margin-bottom: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements .progress-insight-cards {
  align-content: start !important;
  gap: 0.48rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements .progress-insight-card {
  min-height: 3.9rem !important;
  padding: 0.58rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements .progress-insight-card strong {
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-achievements .progress-insight-card span:not(.progress-insight-icon) {
  overflow-wrap: anywhere !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity {
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-rows: auto auto !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity header {
  margin-bottom: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity.has-content {
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity.is-empty {
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-list {
  align-content: start !important;
  gap: 0.34rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-row {
  min-height: 2.42rem !important;
  padding: 0.46rem 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-copy strong {
  font-size: 0.82rem !important;
  line-height: 1.16 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-copy small,
html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-detail {
  font-size: 0.7rem !important;
  line-height: 1.22 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-copy,
html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-detail {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar {
  align-items: start !important;
  align-self: start !important;
  display: grid !important;
  gap: 0.52rem !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  order: -1 !important;
  padding: 0.72rem 0.82rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar header {
  align-self: start !important;
  margin: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar header p {
  max-width: none !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-month {
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  padding: 0.46rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-weekday-labels,
html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-row {
  gap: 0.18rem !important;
  grid-template-columns: 4.15rem repeat(7, minmax(0, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-button,
html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-day {
  aspect-ratio: auto !important;
  min-height: 2.08rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-row + .progress-map-week-row {
  margin-top: 0.18rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-weekday-labels {
  font-size: 0.58rem !important;
  margin-bottom: 0.18rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-button {
  align-items: center !important;
  display: grid !important;
  font-size: 0.62rem !important;
  justify-items: center !important;
  line-height: 1.12 !important;
  padding: 0.22rem 0.2rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-day strong {
  font-size: 0.82rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-day span {
  font-size: 0.54rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-row.is-selected-week {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(124, 58, 237, 0.12)) !important;
  border: 1px solid rgba(125, 211, 252, 0.2) !important;
  border-radius: 12px !important;
  padding: 0.16rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-button.is-selected {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.36), rgba(124, 58, 237, 0.42)) !important;
  border-color: rgba(147, 197, 253, 0.42) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.16) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-row.is-selected-week .progress-map-day:not(.is-outside-month) {
  border-color: rgba(125, 211, 252, 0.2) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-dashboard-calendar {
  padding: 0.64rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-map-day-panel {
  align-items: start !important;
  display: grid !important;
  gap: 0.48rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-journal-open-button {
  gap: 0.06rem !important;
  padding: 0.48rem 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-journal-open-button strong {
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-journal-open-button span {
  font-size: 0.72rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-map-day small {
  font-size: 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-map-day span {
  font-size: 0.54rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-week-dashboard .progress-momentum-stage,
html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-month-dashboard .progress-momentum-stage {
  align-content: start !important;
  min-height: 0 !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-week-dashboard .progress-momentum-copy h3,
html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-month-dashboard .progress-momentum-copy h3 {
  font-size: clamp(2.2rem, 3.25vw, 3.05rem) !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-week-dashboard .progress-momentum-ring,
html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-month-dashboard .progress-momentum-ring {
  height: 6.2rem !important;
  width: 6.2rem !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-week-dashboard .progress-momentum-now,
html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-month-dashboard .progress-momentum-now {
  display: none !important;
}

html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-week-dashboard .progress-momentum-metrics,
html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-month-dashboard .progress-momentum-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 1181px) {
  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] {
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell {
    align-items: start !important;
    box-sizing: border-box !important;
    grid-template-areas: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-self: stretch !important;
    max-width: none !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-dashboard-shell > .progress-dashboard-metrics,
  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-dashboard-shell > .progress-dashboard-row {
    grid-area: auto !important;
    width: 100% !important;
  }
}

@media (min-width: 1181px) {
  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review {
    grid-template-areas: none !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-rhythm {
    align-self: start !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-activity.has-content {
    min-height: 0 !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-goals {
    min-height: 0 !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-goals .progress-donut-breakdown {
    min-height: 0 !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-achievements {
    align-self: start !important;
    min-height: 0 !important;
  }

  html body[data-current-screen="log"] .log-card[data-screen-panel="log"] .progress-overview-panel[data-myzone-pane="dashboard"] .progress-dashboard-shell.has-compact-review > .progress-dashboard-achievements .progress-insight-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html body[data-current-screen="log"] .log-card .progress-dashboard-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-metrics,
  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar {
    grid-column: 1 / -1 !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-columns {
    display: contents !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-column {
    display: contents !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-column > * {
    grid-area: auto !important;
    grid-column: auto !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-hero { order: 1 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm { order: 2 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-goals { order: 3 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-type { order: 4 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-items { order: 5 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-activity { order: 6 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-recordings { order: 7 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-notes { order: 8 !important; }
  html body[data-current-screen="log"] .log-card .progress-dashboard-achievements { order: 9 !important; }

  html body[data-current-screen="log"] .log-card .progress-dashboard-achievements {
    grid-column: 1 / -1 !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-breakdown {
    grid-template-columns: minmax(9rem, 0.36fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  html body[data-current-screen="log"] .log-card .progress-dashboard-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-metrics,
  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar,
  html body[data-current-screen="log"] .log-card .progress-dashboard-achievements {
    grid-column: auto !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar header p {
    max-width: none !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-weekday-labels,
  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-row {
    grid-template-columns: 3.1rem repeat(7, minmax(0, 1fr)) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-week-button,
  html body[data-current-screen="log"] .log-card .progress-dashboard-calendar .progress-map-day {
    min-height: 2.45rem !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-shell.is-day-dashboard .progress-map-day-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-rhythm .progress-trend-frame {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "y plot"
      ". x"
      "best best" !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-activity .progress-activity-detail {
    grid-column: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card .section-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body[data-current-screen="log"] .log-card .progress-header-actions {
    display: grid !important;
    justify-items: stretch !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card .progress-period-navigation {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card .progress-view-mode-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card .progress-period-stepper {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  html body[data-current-screen="log"] .log-card #progressPeriodTodayButton {
    grid-column: 1 / -1 !important;
  }

  html body[data-current-screen="log"] .log-card .progress-primary-tabs.myzone-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 8.45rem !important;
  }

  html body[data-current-screen="log"] .log-card .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;
  }

  html body[data-current-screen="log"] .log-card .progress-primary-tabs.myzone-workspace-tabs small {
    display: none !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-breakdown {
    grid-template-columns: 1fr !important;
  }

  html body[data-current-screen="log"] .log-card .progress-dashboard-donut-card .progress-donut-chart {
    justify-self: start !important;
    width: min(11rem, 68vw) !important;
  }
}

html body[data-current-screen="log"] .log-card .progress-activity-recordings {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.12), transparent 18rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 8, 23, 0.58)) !important;
  border: 1px solid rgba(125, 211, 252, 0.14) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 0.56rem !important;
  margin-top: 0.58rem !important;
  padding: 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recordings-header {
  align-items: center !important;
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: space-between !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recordings-header strong {
  color: #f8fafc !important;
  font-size: 0.9rem !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recordings-header span,
html body[data-current-screen="log"] .log-card .progress-activity-recording-card span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.76rem !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recording-list {
  display: grid !important;
  gap: 0.46rem !important;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recording-card {
  background:
    linear-gradient(145deg, rgba(8, 18, 34, 0.78), rgba(2, 8, 23, 0.64)) !important;
  border: 1px solid rgba(125, 211, 252, 0.15) !important;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0.14rem !important;
  padding: 0.52rem 0.6rem !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recording-card strong {
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 0.86rem !important;
  line-height: 1.16 !important;
}

html body[data-current-screen="log"] .log-card .progress-activity-recording-more {
  align-self: center !important;
  color: rgba(186, 230, 253, 0.82) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-selected-day {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.2), transparent 44%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(124, 58, 237, 0.16)) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  border-radius: 14px !important;
  color: inherit !important;
  display: grid !important;
  font: inherit !important;
  gap: 0.08rem !important;
  justify-items: start !important;
  padding: 0.68rem 0.78rem !important;
  text-align: left !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-selected-day small {
  color: #7dd3fc !important;
  font-size: 0.64rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-selected-day strong {
  color: #f8fafc !important;
  font-size: 0.98rem !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-selected-day span {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.78rem !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-week-day-card.is-selected,
html body[data-current-screen="log"] .log-card .progress-journal-index-days button.is-selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.28), transparent 48%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.44), rgba(124, 58, 237, 0.42)) !important;
  border-color: rgba(147, 197, 253, 0.56) !important;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.12), 0 0 24px rgba(14, 165, 233, 0.18) !important;
  opacity: 1 !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-index-week.is-selected-week {
  border-color: rgba(125, 211, 252, 0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.05) !important;
}

html body[data-current-screen="log"] .log-card .progress-journal-week-heading.is-selected-week strong::after {
  color: #7dd3fc !important;
  content: "  Selected week";
  font-size: 0.68rem !important;
  font-weight: 900 !important;
}

/* Global readability guardrails.
   This file loads last, so these rules protect dark-theme controls from older
   light hover/active/disabled states without changing workflow layout. */
:root {
  --zb-readable-bg: rgba(3, 10, 24, 0.96);
  --zb-readable-panel: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(3, 10, 24, 0.96));
  --zb-readable-toolbar: rgba(2, 6, 23, 0.84);
  --zb-readable-border: rgba(148, 163, 184, 0.28);
  --zb-readable-text: #f8fafc;
  --zb-readable-muted: #cbd5e1;
  --zb-readable-soft: #e2e8f0;
  --zb-readable-action: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86));
  --zb-readable-action-hover: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.92));
  --zb-readable-primary: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(14, 165, 233, 0.84));
  --zb-readable-selected: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(124, 58, 237, 0.82));
  --zb-readable-success: linear-gradient(135deg, rgba(5, 150, 105, 0.96), rgba(20, 184, 166, 0.76));
  --zb-readable-danger: linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(185, 28, 28, 0.72));
  --zb-readable-disabled-bg: rgba(15, 23, 42, 0.58);
  --zb-readable-disabled-border: rgba(148, 163, 184, 0.18);
  --zb-readable-disabled-text: rgba(148, 163, 184, 0.7);
}

html body :is(
  button,
  [role="button"],
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .ghost-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-add-launch-button,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .catalog-attach-close,
  .catalog-danger-action,
  .cloud-backup-prune-button,
  .cloud-backup-delete-button,
  .schedule-builder-small-button,
  .schedule-builder-icon-button,
  .schedule-builder-preview-nav-button,
  .pwa-reload-button
) {
  text-shadow: none !important;
}

html body :is(
  button,
  [role="button"],
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .ghost-button,
  .importzone-primary-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,
  .pwa-reload-button,
  [data-catalog-cancel-edit],
  [data-catalog-open-attach-picker],
  [data-catalog-close-attach-picker],
  [data-importzone-review-action],
  [data-cloud-backup-preview],
  [data-schedule-builder-selected-action]
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(15, 23, 42, 0.94) !important;
  background-image: var(--zb-readable-action) !important;
  border-color: var(--zb-readable-border) !important;
  color: var(--zb-readable-text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--zb-readable-text) !important;
}

html body :is(
  button,
  [role="button"],
  .primary-button,
  .secondary-button,
  .filter-button,
  .restore-button,
  .ghost-button,
  .importzone-primary-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,
  .pwa-reload-button,
  [data-catalog-cancel-edit],
  [data-catalog-open-attach-picker],
  [data-catalog-close-attach-picker],
  [data-importzone-review-action],
  [data-cloud-backup-preview],
  [data-schedule-builder-selected-action]
):is(:hover, :focus-visible, :active):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(30, 41, 59, 0.98) !important;
  background-image: var(--zb-readable-action-hover) !important;
  border-color: rgba(125, 211, 252, 0.58) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  .primary-button,
  .importzone-primary-button,
  .restore-confirm-proceed-button,
  #restoreConfirmProceedButton,
  [data-catalog-save-id],
  [data-pwa-update-now]
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(37, 99, 235, 0.96) !important;
  background-image: var(--zb-readable-primary) !important;
  border-color: rgba(191, 219, 254, 0.58) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  .success-button,
  .restore-button
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(5, 150, 105, 0.94) !important;
  background-image: var(--zb-readable-success) !important;
  border-color: rgba(110, 231, 183, 0.5) !important;
  color: #ecfdf5 !important;
  -webkit-text-fill-color: #ecfdf5 !important;
}

html body :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]
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(127, 29, 29, 0.92) !important;
  background-image: var(--zb-readable-danger) !important;
  border-color: rgba(248, 113, 113, 0.54) !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
}

html body :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]
):is(:hover, :focus-visible, :active):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(153, 27, 27, 0.98) !important;
  background-image: linear-gradient(135deg, rgba(153, 27, 27, 0.98), rgba(220, 38, 38, 0.78)) !important;
  border-color: rgba(252, 165, 165, 0.72) !important;
  color: #fff1f2 !important;
  -webkit-text-fill-color: #fff1f2 !important;
}

html body :is(
  button.is-selected,
  button.is-active,
  button.active,
  button[aria-pressed="true"],
  button[aria-selected="true"],
  .secondary-button.is-selected,
  .secondary-button.is-active,
  .filter-button.is-selected,
  .filter-button.is-active,
  .type-tab.is-selected,
  .dashboard-mode-button.is-selected,
  .progress-view-mode-selector button.is-active,
  .progress-timeframe-control button.is-active
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(37, 99, 235, 0.96) !important;
  background-image: var(--zb-readable-selected) !important;
  border-color: rgba(191, 219, 254, 0.62) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  button:disabled,
  button[disabled],
  button[aria-disabled="true"],
  button.is-disabled,
  button.is-loading,
  button[aria-busy="true"],
  [role="button"][aria-disabled="true"],
  .primary-button:disabled,
  .secondary-button:disabled,
  .filter-button:disabled,
  .restore-button:disabled,
  .success-button:disabled,
  .danger-button:disabled,
  .danger-solid-button:disabled,
  .importzone-primary-button:disabled,
  .reference-small-button:disabled,
  .reference-cancel-edit-button:disabled,
  .reference-delete-button:disabled,
  .catalog-danger-action:disabled,
  .catalog-attach-target:disabled,
  .catalog-attach-edit-target:disabled,
  .cloud-backup-prune-button:disabled,
  .cloud-backup-delete-button:disabled,
  .schedule-builder-small-button:disabled,
  .schedule-builder-icon-button:disabled,
  .pwa-reload-button:disabled
) {
  background-color: var(--zb-readable-disabled-bg) !important;
  background-image: none !important;
  border-color: var(--zb-readable-disabled-border) !important;
  box-shadow: none !important;
  color: var(--zb-readable-disabled-text) !important;
  cursor: not-allowed !important;
  filter: saturate(0.72) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transform: none !important;
  -webkit-text-fill-color: var(--zb-readable-disabled-text) !important;
}

html body :is(button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid rgba(125, 211, 252, 0.36) !important;
  outline-offset: 2px !important;
}

html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  color: var(--zb-readable-text) !important;
  -webkit-text-fill-color: var(--zb-readable-text) !important;
}

html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):disabled {
  background-color: var(--zb-readable-disabled-bg) !important;
  border-color: var(--zb-readable-disabled-border) !important;
  color: var(--zb-readable-disabled-text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--zb-readable-disabled-text) !important;
}

html body :is(input, textarea)::placeholder {
  color: rgba(203, 213, 225, 0.62) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.62) !important;
}

html body :is(
  .modal-card,
  .guidance-modal-card,
  .quick-start-modal-card,
  .restore-confirm-card,
  .backup-protection-modal-card,
  .collection-form-modal,
  .catalog-create-new-menu,
  .catalog-help-menu,
  .collection-builder-screen
) {
  background: var(--zb-readable-panel) !important;
  border-color: rgba(190, 209, 238, 0.24) !important;
  color: var(--zb-readable-text) !important;
}

html body :is(
  .modal-card,
  .guidance-modal-card,
  .quick-start-modal-card,
  .restore-confirm-card,
  .backup-protection-modal-card,
  .collection-form-modal
) :is(.modal-header, .modal-footer, .modal-footer-actions, .guidance-modal-actions, .button-row.modal-footer-actions) {
  background: var(--zb-readable-toolbar) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  color: var(--zb-readable-text) !important;
}

html body :is(
  .modal-card,
  .guidance-modal-card,
  .quick-start-modal-card,
  .restore-confirm-card,
  .backup-protection-modal-card,
  .collection-form-modal,
  .catalog-create-new-menu,
  .catalog-help-menu
) :is(h1, h2, h3, h4, strong, label, p, span, small, li, em) {
  color: inherit;
}

html body :is(
  .modal-card,
  .guidance-modal-card,
  .quick-start-modal-card,
  .restore-confirm-card,
  .backup-protection-modal-card,
  .collection-form-modal,
  .catalog-create-new-menu,
  .catalog-help-menu
) :is(.eyebrow, small, .helper-text, .muted, .secondary-copy, .modal-subtitle) {
  color: var(--zb-readable-muted) !important;
  -webkit-text-fill-color: var(--zb-readable-muted) !important;
}

html body :is(
  .status:not(:empty),
  .toast,
  .toast-message,
  .app-toast,
  .setup-backup-restore-status:not(:empty),
  .pwa-update-banner,
  #pwaUpdateStatus.pwa-update-status
) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.1), transparent 12rem),
    rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: var(--zb-readable-soft) !important;
  -webkit-text-fill-color: var(--zb-readable-soft) !important;
}

html body :is(
  .status:not(:empty),
  .toast,
  .toast-message,
  .app-toast,
  .setup-backup-restore-status:not(:empty),
  .pwa-update-banner,
  #pwaUpdateStatus.pwa-update-status
) :is(strong, span, em, p, small) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html body :is(.pwa-update-banner, #pwaUpdateStatus.pwa-update-status):is(:hover, :focus-within) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem),
    rgba(15, 23, 42, 0.98) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #pwaUpdateStatus.pwa-update-status.update-available,
html body .pwa-update-banner {
  border-color: rgba(251, 191, 36, 0.46) !important;
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

html body #pwaUpdateStatus.pwa-update-status.update-error {
  background: rgba(69, 10, 10, 0.82) !important;
  border-color: rgba(248, 113, 113, 0.52) !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .backup-restore-panel,
  .backup-protection-panel,
  .restore-preview-panel,
  .cloud-backup-list,
  .cloud-backup-row
) {
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.26) !important;
  color: var(--zb-readable-text) !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .restore-preview-header strong,
  .restore-preview-count strong,
  .cloud-backup-row strong,
  .backup-restore-panel h3,
  .backup-restore-panel h4
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .restore-preview-header p,
  .restore-preview-count span,
  .cloud-backup-row p,
  .cloud-backup-row small,
  .backup-restore-panel p,
  .backup-restore-panel small
) {
  color: var(--zb-readable-muted) !important;
  -webkit-text-fill-color: var(--zb-readable-muted) !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-message {
  background: rgba(30, 41, 59, 0.74) !important;
  border-color: rgba(190, 209, 238, 0.3) !important;
  color: var(--zb-readable-text) !important;
  -webkit-text-fill-color: var(--zb-readable-text) !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-message.is-success,
html body .status.is-success,
html body .status[data-tone="success"] {
  background: rgba(20, 83, 45, 0.54) !important;
  border-color: rgba(74, 222, 128, 0.52) !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-message.is-warning,
html body .status.is-warning,
html body .status[data-tone="warning"] {
  background: rgba(120, 53, 15, 0.58) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

html body .status.is-error,
html body .status[data-tone="error"] {
  background: rgba(69, 10, 10, 0.76) !important;
  border-color: rgba(248, 113, 113, 0.52) !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
}

html body #restoreConfirmModalBackdrop .restore-confirm-card {
  background: var(--zb-readable-panel) !important;
  border-color: rgba(190, 209, 238, 0.28) !important;
  color: var(--zb-readable-text) !important;
}

html body #restoreConfirmModalBackdrop :is(#restoreConfirmTitle, #restoreConfirmSummary, .restore-confirm-card strong) {
  color: var(--zb-readable-text) !important;
  -webkit-text-fill-color: var(--zb-readable-text) !important;
}

html body #restoreConfirmModalBackdrop .restore-confirm-warning,
html body #restoreConfirmModalBackdrop .restore-confirm-warning * {
  background-color: transparent;
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

html body #restoreConfirmModalBackdrop .restore-confirm-warning {
  background:
    linear-gradient(135deg, rgba(120, 53, 15, 0.52), rgba(127, 29, 29, 0.24)),
    rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(251, 191, 36, 0.62) !important;
}

html body #restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton):not(:disabled) {
  background-image: var(--zb-readable-action) !important;
  border-color: rgba(203, 213, 225, 0.42) !important;
  color: var(--zb-readable-text) !important;
  -webkit-text-fill-color: var(--zb-readable-text) !important;
}

html body #restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton):is(:hover, :focus-visible):not(:disabled) {
  background-image: var(--zb-readable-action-hover) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #restoreConfirmModalBackdrop #restoreConfirmProceedButton:not(:disabled) {
  background-image: var(--zb-readable-primary) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Bookmarkable instruction lines are buttons semantically, but should read as
   practice text, not boxed app controls. */
html body .zb-practice-v2-screen .zb-pv2-instruction-lines {
  display: grid !important;
  gap: 0.08rem !important;
}

html body .zb-practice-v2-screen .zb-pv2-instruction-line,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line,
html body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line {
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(248, 250, 252, 0.94) !important;
  cursor: pointer !important;
  display: block !important;
  font: inherit !important;
  line-height: 1.34 !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0.1rem 0.38rem 0.1rem 0.72rem !important;
  position: relative !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: normal !important;
  width: 100% !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body .zb-practice-v2-screen .zb-pv2-instruction-line:hover,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:hover,
html body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:hover {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.06), transparent 78%) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .zb-practice-v2-screen .zb-pv2-instruction-line:focus-visible,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:focus-visible,
html body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.4) !important;
  outline-offset: 2px !important;
}

html body .zb-practice-v2-screen .zb-pv2-instruction-line.is-current,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line.is-bookmarked,
html body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .current-item-instruction-line.is-bookmarked {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(45, 212, 191, 0.04) 46%, transparent 80%) !important;
  border-color: transparent !important;
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.78) !important;
  color: rgba(255, 251, 235, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 251, 235, 0.98) !important;
}

html body .zb-practice-v2-screen button.zb-pv2-instruction-line.zb-pv2-instruction-line:not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body:has(.practice-dashboard:not([hidden])) button.current-item-instruction-line.current-item-instruction-line:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(248, 250, 252, 0.94) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body .zb-practice-v2-screen button.zb-pv2-instruction-line.zb-pv2-instruction-line:is(:hover, :focus-visible):not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body:has(.practice-dashboard:not([hidden])) button.current-item-instruction-line.current-item-instruction-line:is(:hover, :focus-visible):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.06), transparent 78%) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .zb-practice-v2-screen button.zb-pv2-instruction-line.zb-pv2-instruction-line.is-current:not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body .zb-practice-v2-screen button.zb-pv2-instruction-line.zb-pv2-instruction-line.is-bookmarked:not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body:has(.practice-dashboard:not([hidden])) button.current-item-instruction-line.current-item-instruction-line.is-bookmarked:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(45, 212, 191, 0.04) 46%, transparent 80%) !important;
  border-color: transparent !important;
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.78) !important;
  color: rgba(255, 251, 235, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 251, 235, 0.98) !important;
}

/* Recorder timer should be a compact status, not a giant readout that covers controls. */
html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  align-items: start !important;
  grid-template-areas:
    "icon body"
    "icon timer" !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 9.4rem !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > div {
  align-items: start !important;
  display: grid !important;
  gap: 0.28rem 0.5rem !important;
  grid-area: body !important;
  grid-template-areas:
    "title auto"
    "meta auto"
    "actions actions" !important;
  grid-template-columns: minmax(0, 1fr) minmax(5.8rem, auto) !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > .zb-pv2-tool-icon {
  grid-area: icon !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] h4 {
  grid-area: title !important;
  min-width: 0 !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong {
  align-self: end !important;
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 999px !important;
  color: rgba(226, 232, 240, 0.88) !important;
  font-size: 1.12rem !important;
  font-weight: 850 !important;
  grid-area: timer !important;
  justify-self: end !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 2.1rem !important;
  min-width: 5.1rem !important;
  padding: 0.42rem 0.62rem !important;
  position: static !important;
  text-align: center !important;
  z-index: 1 !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.88) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value][data-zb-pv2-recorder-value] {
  align-self: end !important;
  display: inline-flex !important;
  font-size: 1.12rem !important;
  grid-area: timer !important;
  height: auto !important;
  justify-self: end !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 2.1rem !important;
  min-width: 5.1rem !important;
  padding: 0.42rem 0.62rem !important;
  position: static !important;
  width: auto !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-recording > strong {
  color: #fecaca !important;
  font-size: 1rem !important;
  min-width: 5.6rem !important;
  -webkit-text-fill-color: #fecaca !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  grid-area: actions !important;
  max-width: calc(100% - 6.35rem) !important;
  min-width: 0 !important;
  width: calc(100% - 6.35rem) !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  min-height: 1.72rem !important;
  padding-inline: 0.58rem !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] p[data-zb-pv2-recorder-meta] {
  color: rgba(226, 232, 240, 0.88) !important;
  display: block !important;
  font-size: 0.78rem !important;
  grid-area: meta !important;
  line-height: 1.24 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  white-space: normal !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.88) !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]),
html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) {
  align-items: start !important;
  display: grid !important;
  gap: 0.24rem !important;
  grid-area: auto !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  justify-items: start !important;
  line-height: 1.08 !important;
  max-width: 7.8rem !important;
  position: static !important;
  white-space: normal !important;
  z-index: 1 !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) span,
html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) span {
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.92) !important;
}

html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) input,
html body .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) input {
  height: 0.92rem !important;
  margin-top: 0.02rem !important;
  width: 0.92rem !important;
}

/* Alpha polish containment: keep focused blocks and practice tools inside their panels. */
html body[data-current-screen="practice-v2"] .zb-pv2-main {
  grid-template-rows: minmax(0, 1fr) 2.9rem minmax(10.65rem, auto) 2.65rem minmax(4.2rem, auto) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-current-card {
  grid-template-rows: minmax(0, 1fr) minmax(8.15rem, 9.35rem) !important;
  min-height: 0 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-focus-card {
  cursor: pointer !important;
  gap: 0.56rem !important;
  min-height: 8.15rem !important;
  padding: 1rem 1.08rem 0.88rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-focus-card strong {
  font-size: clamp(1.52rem, 2.08vw, 2.24rem) !important;
  line-height: 1.08 !important;
  min-height: 0 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-focus-card span {
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.04em !important;
  opacity: 0.88 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-focus-card button {
  font-size: 0.95rem !important;
  min-height: 2rem !important;
  min-width: 2rem !important;
}

html body[data-current-screen="practice-v2"] #guidanceModalBackdrop[data-overlay-owner="onboarding"] {
  display: none !important;
  pointer-events: none !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-current-scroll {
  align-content: start !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-current-scroll h4[data-zb-pv2-current-title] {
  font-size: clamp(1.76rem, 2.45vw, 2.78rem) !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-current-scroll h4[data-zb-pv2-current-title].is-long-title {
  font-size: clamp(1.38rem, 2vw, 2.18rem) !important;
  line-height: 1.04 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-current-scroll h4[data-zb-pv2-current-title].is-very-long-title {
  font-size: clamp(1.08rem, 1.52vw, 1.68rem) !important;
  line-height: 1.08 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tools {
  align-items: stretch !important;
  min-height: 10.65rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card {
  min-height: 10.45rem !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  align-content: start !important;
  display: grid !important;
  gap: 0.22rem !important;
  grid-template-columns: minmax(0, 1fr) minmax(4.8rem, 6rem) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  width: min(10.1rem, 100%) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field,
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  grid-column: 1 / -1 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field select {
  min-width: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused {
  grid-template-rows: auto auto minmax(7.5rem, 1fr) auto !important;
  max-height: min(30rem, calc(100vh - 13.8rem)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-block-header {
  min-height: 3.8rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused .schedule-builder-focus-banner {
  padding-block: 0.42rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-block-items {
  align-content: start !important;
  gap: 0.42rem !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0.5rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-item-row {
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  min-height: 3.85rem !important;
  position: relative !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-advanced-block-row.is-focused .schedule-builder-block-drop-target {
  min-height: 3.35rem !important;
  padding: 0.52rem 0.68rem !important;
}

/* Practice V2 tool-band trim must live in this last-loaded sheet. */
html body[data-current-screen="practice-v2"] .zb-pv2-main {
  grid-template-rows: minmax(0, 1fr) 2.65rem 9.8rem minmax(5.9rem, auto) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tools {
  align-items: stretch !important;
  min-height: 0 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card {
  min-height: 0 !important;
  padding: 0.48rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt {
  display: none !important;
}

html body[data-current-screen="practice-v2"] [data-zb-pv2-metronome-meta],
html body[data-current-screen="practice-v2"] [data-zb-pv2-metronome-meta][hidden] {
  display: none !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  align-content: start !important;
  display: grid !important;
  gap: 0.2rem 0.34rem !important;
  grid-template-columns: minmax(0, 1fr) 5.45rem !important;
  grid-template-areas:
    "title auto"
    "bpm actions"
    "sound actions"
    "beat actions" !important;
  grid-template-rows: auto auto auto auto !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] h4 {
  grid-area: title !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  grid-area: bpm !important;
  width: min(11.4rem, 100%) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls strong {
  font-size: 1.36rem !important;
  padding: 0.18rem 0.32rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls button {
  min-height: 1.56rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field {
  grid-column: auto !important;
  grid-template-columns: 2.35rem minmax(0, 9.2rem) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(1) {
  grid-area: sound !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(2) {
  grid-area: beat !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  grid-area: auto !important;
  justify-self: end !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  align-self: start !important;
  display: grid !important;
  gap: 0.24rem !important;
  grid-area: actions !important;
  grid-column: auto !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(2, 1.5rem) !important;
  margin: 0 !important;
  padding-top: 0.08rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions button,
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions button,
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  min-height: 1.36rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-field select,
html body[data-current-screen="practice-v2"] .zb-pv2-countdown-custom input {
  min-height: 1.34rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] {
  grid-template-columns: auto minmax(0, 1fr) minmax(6.8rem, 8rem) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] > strong {
  align-self: center !important;
  font-size: clamp(2.15rem, 3vw, 3rem) !important;
  margin: 0 !important;
  padding: 0.2rem 0.48rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-timer-presets,
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions {
  max-width: 11.2rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-timer-presets button,
html body[data-current-screen="practice-v2"] .zb-pv2-countdown-custom {
  min-height: 1.18rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  grid-template-columns: auto minmax(0, 1fr) minmax(4.8rem, 5.55rem) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta] {
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
  margin-right: 6.1rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  margin-top: 0.14rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong {
  align-self: center !important;
  font-size: 0.96rem !important;
  justify-self: end !important;
  margin: 1.15rem 0 0 !important;
  min-height: 1.62rem !important;
  padding: 0.18rem 0.52rem !important;
}

/* Practice V2 tool-card fit: keep the rail height, make controls fit inside it. */
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] {
  align-items: start !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(7rem, 8.25rem) !important;
  position: relative !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] > div {
  gap: 0.12rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] [data-zb-pv2-countdown-meta] {
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
  min-height: 0 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-timer-presets {
  gap: 0.18rem !important;
  max-width: 11.8rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-timer-presets button,
html body[data-current-screen="practice-v2"] .zb-pv2-countdown-custom {
  font-size: 0.66rem !important;
  line-height: 1 !important;
  min-height: 1.05rem !important;
  padding-bottom: 0.05rem !important;
  padding-top: 0.05rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-countdown-custom input {
  min-height: 1.05rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions {
  gap: 0.18rem !important;
  margin-top: 0.04rem !important;
  max-width: 11.8rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions button {
  font-size: 0.68rem !important;
  line-height: 1 !important;
  min-height: 1.18rem !important;
  padding: 0.08rem 0.4rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] > strong {
  font-size: clamp(2.25rem, 3.05vw, 3rem) !important;
  margin-top: 0.82rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-check {
  position: absolute !important;
  right: 0.58rem !important;
  top: 0.5rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] h4 {
  padding-right: 4.35rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  align-items: start !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(5.6rem, 6.2rem) !important;
  overflow: visible !important;
  position: relative !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > div {
  gap: 0.28rem !important;
  padding-right: 0.2rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] h4 {
  padding-right: 7.1rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta][hidden] {
  display: none !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].has-recorder-hint [data-zb-pv2-recorder-meta] {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 999px !important;
  bottom: 0.36rem !important;
  color: rgba(255, 237, 213, 0.96) !important;
  display: block !important;
  font-size: 0.68rem !important;
  left: 2.7rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 0.18rem 0.46rem !important;
  position: absolute !important;
  right: 6.35rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

/* ABSOLUTE FINAL V2 RECORDER FIT 2026-06-26. Must remain at EOF. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  column-gap: 0.5rem !important;
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(14.8rem, 1fr) minmax(6.05rem, 6.35rem) !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: grid !important;
  gap: 0.34rem 0.42rem !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin-top: 0.66rem !important;
  width: max-content !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  color: rgba(241, 245, 249, 0.9) !important;
  font-size: 0.84rem !important;
  font-weight: 590 !important;
  letter-spacing: 0 !important;
  min-height: 1.86rem !important;
  min-width: 4.18rem !important;
  padding: 0.2rem 0.66rem !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.9) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button:not(:disabled):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button:disabled {
  color: rgba(203, 213, 225, 0.58) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.58) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 650 !important;
  min-width: 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"]:not(:disabled) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  font-size: clamp(1.42rem, 1.82vw, 1.9rem) !important;
  justify-self: end !important;
  line-height: 0.96 !important;
  margin: 0.76rem 0 0 !important;
  min-height: 2.55rem !important;
  min-width: 6.05rem !important;
  padding: 0.28rem 0.46rem !important;
}

/* ABSOLUTE FINAL V2 METRONOME FIT EOF 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 1rem !important;
  grid-template-areas:
    "title auto"
    "bpm actions"
    "sound actions"
    "beat actions" !important;
  grid-template-columns: minmax(15.6rem, 1fr) minmax(5.75rem, 6rem) !important;
  grid-template-rows: auto auto auto auto !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  align-self: start !important;
  grid-area: auto !important;
  justify-self: end !important;
  margin: 0 0 0.18rem !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  grid-area: bpm !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(1) {
  grid-area: sound !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(2) {
  grid-area: beat !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  align-self: center !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-area: actions !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(2, minmax(1.46rem, auto)) !important;
  justify-self: stretch !important;
  margin: 0.2rem 0 0 !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions button {
  min-height: 1.62rem !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-sound],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-pattern] {
  min-width: 11.35rem !important;
  width: 11.35rem !important;
}

/* ABSOLUTE FINAL V2 ACTION RAIL COLOR + CURRENT BLOCK ACCENT EOF 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions {
  background:
    radial-gradient(circle at 4% 0%, rgba(34, 211, 238, 0.12), transparent 12rem),
    linear-gradient(90deg, rgba(3, 10, 25, 0.72), rgba(11, 20, 42, 0.74)) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button {
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:not(:disabled):hover,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:not(:disabled):focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(94, 234, 212, 0.16) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="start"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.98), rgba(20, 184, 166, 0.82)) !important;
  border-color: rgba(134, 239, 172, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(20, 184, 166, 0.18) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="unscheduled"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.88), rgba(217, 119, 6, 0.46)) !important;
  border-color: rgba(253, 230, 138, 0.36) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="done"] {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.72), rgba(30, 41, 59, 0.62)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="skip"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.54)) !important;
  border-color: rgba(147, 197, 253, 0.38) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="next-block"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(67, 56, 202, 0.56)) !important;
  border-color: rgba(196, 181, 253, 0.34) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="notes"] {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.88), rgba(124, 58, 237, 0.48)) !important;
  border-color: rgba(153, 246, 228, 0.34) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:disabled {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.68), rgba(15, 23, 42, 0.72)) !important;
  border-color: rgba(100, 116, 139, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: rgba(203, 213, 225, 0.5) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.5) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.3), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(49, 46, 129, 0.28)),
    rgba(7, 16, 34, 0.9) !important;
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 12px 30px rgba(8, 47, 73, 0.32),
    0 0 28px rgba(45, 212, 191, 0.18),
    inset 4px 0 0 rgba(45, 212, 191, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current > span {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(139, 92, 246, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.34) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current small,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current em {
  color: rgba(207, 250, 254, 0.86) !important;
  -webkit-text-fill-color: rgba(207, 250, 254, 0.86) !important;
}

/* TRUE FINAL V2 PRACTICE STATUS RAIL + ACTIVE LOCATION FIT 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="done"] {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.88), rgba(190, 18, 60, 0.5)) !important;
  border-color: rgba(251, 113, 133, 0.42) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  align-items: stretch !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.24), transparent 17rem),
    radial-gradient(circle at 88% 70%, rgba(139, 92, 246, 0.2), transparent 18rem),
    linear-gradient(90deg, rgba(9, 35, 48, 0.94), rgba(18, 22, 54, 0.94)) !important;
  border-color: rgba(94, 234, 212, 0.34) !important;
  grid-template-columns: minmax(11.5rem, 0.5fr) minmax(0, 4.8fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading {
  min-height: 0 !important;
  padding: 0.44rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading h3 {
  font-size: 1rem !important;
  line-height: 1.04 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading p {
  line-height: 1.05 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions button {
  min-height: 1.9rem !important;
  padding: 0.2rem 0.66rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.34rem 0.46rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.has-rotation-status {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: clamp(0.8rem, 1.35vw, 1.28rem) !important;
  grid-template-columns: minmax(0, 1fr) minmax(8.6rem, 10.2rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-context,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.has-rotation-status .zb-pv2-status-context {
  align-items: center !important;
  background: linear-gradient(135deg, rgba(2, 8, 17, 0.5), rgba(15, 23, 42, 0.58)) !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;
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: minmax(9.4rem, 0.85fr) minmax(0, 1.7fr) minmax(6.4rem, 0.58fr) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.38rem 0.64rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status .zb-pv2-status-context {
  grid-template-columns: minmax(9.4rem, 0.75fr) minmax(0, 2fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell {
  align-content: center !important;
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer span {
  color: rgba(153, 246, 228, 0.78) !important;
  font-size: 0.56rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell strong {
  color: rgba(248, 250, 252, 0.98) !important;
  display: block !important;
  font-size: 0.84rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell.is-item strong {
  font-size: 0.98rem !important;
  font-weight: 820 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer {
  align-content: center !important;
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  gap: 0.04rem !important;
  justify-self: end !important;
  min-width: 8.6rem !important;
  text-align: right !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer strong {
  color: #fff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
  font-size: clamp(2.25rem, 3.65vw, 3.2rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 0.9 !important;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.42) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-current {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.3), transparent 9rem),
    radial-gradient(circle at 98% 10%, rgba(139, 92, 246, 0.28), transparent 10rem),
    rgba(5, 18, 35, 0.9) !important;
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.24),
    0 0 38px rgba(45, 212, 191, 0.24),
    inset 4px 0 0 rgba(45, 212, 191, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.38), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(49, 46, 129, 0.3)),
    rgba(7, 16, 34, 0.96) !important;
  border-color: rgba(103, 232, 249, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.32),
    0 14px 34px rgba(8, 47, 73, 0.38),
    0 0 34px rgba(45, 212, 191, 0.24),
    inset 4px 0 0 rgba(45, 212, 191, 0.98),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article[aria-current="true"] {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.34), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(49, 46, 129, 0.3)),
    rgba(7, 16, 34, 0.94) !important;
  border-color: rgba(103, 232, 249, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.28),
    0 12px 30px rgba(8, 47, 73, 0.34),
    0 0 30px rgba(45, 212, 191, 0.22),
    inset 4px 0 0 rgba(45, 212, 191, 0.94),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* TRUE EOF V2 ACTIVE STATUS RAIL FIT 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  grid-template-columns: minmax(11.8rem, 0.58fr) minmax(0, 4.6fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading {
  padding: 0.44rem 0.56rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading h3 {
  font-size: 1.02rem !important;
  line-height: 1.02 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  min-width: 0 !important;
  padding: 0.34rem 0.44rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status {
  align-items: center !important;
  display: grid !important;
  gap: 0.78rem !important;
  grid-template-columns: minmax(30rem, 1fr) minmax(8.2rem, 10.2rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-context,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status .zb-pv2-status-context {
  gap: 0.72rem !important;
  grid-template-columns: minmax(10.2rem, 0.9fr) minmax(16rem, 1.6fr) minmax(6.8rem, 0.62fr) !important;
  min-width: 0 !important;
  padding: 0.38rem 0.62rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status .zb-pv2-status-context {
  grid-template-columns: minmax(10.2rem, 0.9fr) minmax(19rem, 1.9fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer span {
  font-size: 0.54rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell strong {
  font-size: 0.82rem !important;
  line-height: 1.06 !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell.is-item strong {
  font-size: 0.92rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer {
  justify-self: center !important;
  min-width: 8.2rem !important;
  text-align: center !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer strong {
  font-size: clamp(2.1rem, 3.25vw, 3rem) !important;
  line-height: 0.86 !important;
}

/* Current block accent on the bottom schedule rail. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.3), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(49, 46, 129, 0.28)),
    rgba(7, 16, 34, 0.9) !important;
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 12px 30px rgba(8, 47, 73, 0.32),
    0 0 28px rgba(45, 212, 191, 0.18),
    inset 4px 0 0 rgba(45, 212, 191, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current > span {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(139, 92, 246, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.34) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current small,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current em {
  color: rgba(207, 250, 254, 0.86) !important;
  -webkit-text-fill-color: rgba(207, 250, 254, 0.86) !important;
}

/* Practice drawer active-location highlight: make "where am I?" immediate. */
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-drawer {
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 1rem !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-current {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.26), transparent 9rem),
    radial-gradient(circle at 98% 10%, rgba(139, 92, 246, 0.24), transparent 10rem),
    rgba(5, 18, 35, 0.84) !important;
  border-color: rgba(94, 234, 212, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.2),
    0 0 34px rgba(45, 212, 191, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice > .practice-queue-workspace-block-heading strong,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-current > .practice-queue-workspace-block-heading strong {
  color: rgba(248, 250, 252, 0.98) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice > ol,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-current > ol {
  display: grid !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.34), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(49, 46, 129, 0.28)),
    rgba(7, 16, 34, 0.9) !important;
  border-color: rgba(103, 232, 249, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.26),
    0 14px 34px rgba(8, 47, 73, 0.36),
    0 0 30px rgba(45, 212, 191, 0.18),
    inset 4px 0 0 rgba(45, 212, 191, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  position: relative !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice .practice-queue-workspace-marker,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current .practice-queue-workspace-marker {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(139, 92, 246, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.36) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice .practice-queue-workspace-copy strong,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current .practice-queue-workspace-copy strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice .practice-queue-workspace-copy small,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current .practice-queue-workspace-copy small {
  color: rgba(207, 250, 254, 0.88) !important;
  -webkit-text-fill-color: rgba(207, 250, 254, 0.88) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-complete:not(.is-active-practice):not(.is-current) {
  opacity: 0.78 !important;
}

/* FINAL Practice Status Rail Phase 1: keep the rail footprint while active. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  align-items: stretch !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.23), transparent 18rem),
    radial-gradient(circle at 86% 80%, rgba(139, 92, 246, 0.2), transparent 19rem),
    linear-gradient(90deg, rgba(9, 35, 48, 0.94), rgba(18, 22, 54, 0.94)) !important;
  border-color: rgba(94, 234, 212, 0.32) !important;
  grid-template-columns: minmax(12.5rem, 0.62fr) minmax(0, 3.5fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading {
  min-height: 0 !important;
  padding-block: 0.52rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading p {
  line-height: 1.05 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions button {
  min-height: 1.96rem !important;
  padding: 0.22rem 0.7rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0.38rem 0.48rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: clamp(0.8rem, 1.6vw, 1.45rem) !important;
  grid-template-columns: minmax(0, 1fr) minmax(9.4rem, 13.5rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-context {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(2, 8, 17, 0.48), rgba(15, 23, 42, 0.56)) !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;
  display: grid !important;
  gap: 0.68rem !important;
  grid-template-columns: minmax(8rem, 0.82fr) minmax(15rem, 1.72fr) minmax(7rem, 0.72fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0.42rem 0.68rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status .zb-pv2-status-context {
  grid-template-columns: minmax(8rem, 0.82fr) minmax(15rem, 2fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell {
  align-content: center !important;
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer span {
  color: rgba(153, 246, 228, 0.74) !important;
  font-size: 0.56rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell strong {
  color: rgba(248, 250, 252, 0.96) !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell.is-item strong {
  font-size: 0.96rem !important;
  font-weight: 820 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer {
  align-content: center !important;
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  gap: 0.04rem !important;
  justify-self: end !important;
  min-width: 9.4rem !important;
  text-align: right !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer strong {
  color: #fff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
  font-size: clamp(2.32rem, 4.2vw, 3.42rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 0.86 !important;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.42) !important;
  -webkit-text-fill-color: #fff !important;
}

/* FINAL small metronome fit: separate Start/Stop from Auto and keep the sound label readable. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 1rem !important;
  grid-template-columns: minmax(15rem, 1fr) minmax(5.65rem, 5.95rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  justify-self: end !important;
  margin-bottom: 0.18rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  gap: 0.52rem !important;
  margin-top: 0.48rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-sound],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-pattern] {
  min-width: 11.1rem !important;
  text-overflow: clip !important;
}

/* Final Schedule Builder row containment: keep focused block previews inside item cards. */
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-block-items {
  gap: 0.56rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-item-row {
  align-items: center !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  min-height: 5.65rem !important;
  overflow: hidden !important;
  padding: 0.68rem 0.72rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy {
  align-content: center !important;
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy strong {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  line-height: 1.16 !important;
  max-height: 2.36em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy small {
  display: block !important;
  line-height: 1.18 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy em {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  display: -webkit-box !important;
  line-height: 1.16 !important;
  max-height: 1.2em !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* Practice Screen Phase 1 status rail: the bottom rail shows Now Practicing only while an item is running. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.26), transparent 18rem),
    radial-gradient(circle at 86% 80%, rgba(139, 92, 246, 0.22), transparent 19rem),
    linear-gradient(90deg, rgba(9, 35, 48, 0.94), rgba(18, 22, 54, 0.94)) !important;
  border-color: rgba(94, 234, 212, 0.34) !important;
  grid-template-columns: minmax(13.5rem, 0.7fr) minmax(0, 2.8fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding: 0.42rem 0.5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(2, 8, 17, 0.32), rgba(15, 23, 42, 0.46)) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: minmax(8.5rem, 0.8fr) minmax(15rem, 1.45fr) minmax(7rem, 0.7fr) minmax(9.5rem, 0.82fr) !important;
  min-height: 100% !important;
  padding: 0.56rem 0.74rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status {
  grid-template-columns: minmax(8.5rem, 0.82fr) minmax(16rem, 1.55fr) minmax(9.5rem, 0.75fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell {
  align-content: center !important;
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer span {
  color: rgba(153, 246, 228, 0.74) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell strong {
  color: rgba(248, 250, 252, 0.96) !important;
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
  line-height: 1.12 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell.is-item strong {
  font-size: 1.02rem !important;
  font-weight: 860 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer {
  align-content: center !important;
  display: grid !important;
  gap: 0.08rem !important;
  justify-self: end !important;
  min-width: 8.8rem !important;
  text-align: right !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer strong {
  color: #fff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 0.94 !important;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.42) !important;
  -webkit-text-fill-color: #fff !important;
}

/* Small metronome spacing correction: keep Auto and Start/Stop from crowding. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 0.74rem !important;
  grid-template-columns: minmax(13.8rem, 1fr) 5.75rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  justify-self: end !important;
  margin-bottom: 0.2rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  gap: 0.42rem !important;
  margin-top: 0.38rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-check {
  position: absolute !important;
  right: 0.58rem !important;
  top: 0.5rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.22rem !important;
  margin: 0.62rem 0 0 !important;
  max-width: 14.5rem !important;
  padding-right: 0 !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.68rem !important;
  line-height: 1 !important;
  min-height: 1.2rem !important;
  padding: 0.08rem 0.46rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong {
  align-self: center !important;
  font-size: 1.02rem !important;
  justify-self: end !important;
  margin: 0.72rem 0 0 !important;
  min-height: 1.58rem !important;
  padding: 0.18rem 0.58rem !important;
}

/* Final recorder fit override: two compact control rows, no spill below card. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  align-items: start !important;
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(10.5rem, 1fr) minmax(5.4rem, 5.95rem) !important;
  grid-template-rows: 1fr !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > div {
  align-content: start !important;
  display: grid !important;
  gap: 0.2rem !important;
  grid-area: body !important;
  grid-template-areas:
    "title"
    "actions" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-right: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] h4 {
  grid-area: title !important;
  padding-right: 7.1rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: grid !important;
  gap: 0.22rem !important;
  grid-area: actions !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin: 0.62rem 0 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: max-content !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.66rem !important;
  line-height: 1 !important;
  min-height: 1.18rem !important;
  min-width: 2.55rem !important;
  padding: 0.08rem 0.38rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  display: inline-flex !important;
  font-size: 1.02rem !important;
  grid-area: timer !important;
  justify-content: center !important;
  justify-self: end !important;
  line-height: 1 !important;
  margin: 0.62rem 0 0 !important;
  min-height: 1.58rem !important;
  min-width: 5.2rem !important;
  padding: 0.18rem 0.54rem !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-check {
  position: absolute !important;
  right: 0.58rem !important;
  top: 0.5rem !important;
}

/* Recorder final polish: larger controls and aligned Auto Playback label. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  grid-template-columns: auto minmax(12rem, 1fr) minmax(7.25rem, 7.8rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]),
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) {
  align-items: center !important;
  align-content: center !important;
  display: inline-grid !important;
  gap: 0.26rem !important;
  grid-template-columns: auto auto !important;
  height: auto !important;
  line-height: 1 !important;
  max-width: none !important;
  right: 0.58rem !important;
  top: 0.72rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) input,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) input {
  height: 0.92rem !important;
  margin: 0 !important;
  width: 0.92rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) span {
  display: inline-block !important;
  line-height: 0.92rem !important;
  padding-top: 0 !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  gap: 0.34rem !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin-top: 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.82rem !important;
  min-height: 1.76rem !important;
  min-width: 4rem !important;
  padding: 0.18rem 0.68rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  font-size: 1.74rem !important;
  margin-top: 0.56rem !important;
  min-height: 2.5rem !important;
  min-width: 7.35rem !important;
  padding: 0.34rem 0.88rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta] {
  display: none !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].has-recorder-hint [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:hover [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:focus-within [data-zb-pv2-recorder-meta] {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 999px !important;
  bottom: 0.36rem !important;
  color: rgba(255, 237, 213, 0.96) !important;
  display: block !important;
  font-size: 0.68rem !important;
  left: 2.7rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 0.18rem 0.46rem !important;
  position: absolute !important;
  right: 7.8rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

/* Absolute final V2 rail fix: these rules intentionally sit at EOF. */
html body[data-current-screen="practice-v2"] #runtimeDefaultsPrompt {
  display: none !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast:not([hidden]) {
  align-items: center !important;
  background: rgba(8, 13, 26, 0.96) !important;
  border: 1px solid rgba(94, 234, 212, 0.34) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
  height: auto !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  max-width: min(32rem, calc(100vw - 2rem)) !important;
  min-height: 2.15rem !important;
  min-width: 0 !important;
  order: initial !important;
  overflow: visible !important;
  padding: 0.26rem 0.34rem 0.26rem 0.72rem !important;
  width: max-content !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-text {
  color: rgba(248, 250, 252, 0.98) !important;
  flex: 0 1 auto !important;
  font-size: 0.74rem !important;
  font-weight: 640 !important;
  line-height: 1.05 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-buttons {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 0.28rem !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-buttons button {
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  font-size: 0.7rem !important;
  font-weight: 640 !important;
  line-height: 1 !important;
  min-height: 1.62rem !important;
  padding: 0.18rem 0.54rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  column-gap: 0.5rem !important;
  grid-template-columns: auto minmax(16.2rem, 1fr) 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  grid-template-columns: minmax(16.2rem, 1fr) 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field {
  grid-template-columns: 2.38rem minmax(11.3rem, 11.9rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-sound],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-pattern] {
  max-width: none !important;
  min-width: 11.3rem !important;
  overflow: visible !important;
  padding-right: 2.1rem !important;
  text-overflow: clip !important;
  width: 11.3rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  column-gap: 0.46rem !important;
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(14.5rem, 1fr) minmax(6.55rem, 6.95rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  gap: 0.34rem 0.42rem !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin-top: 0.66rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  min-height: 1.86rem !important;
  min-width: 4.18rem !important;
  padding: 0.2rem 0.66rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 670 !important;
  min-width: 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  font-size: clamp(1.72rem, 2.2vw, 2.24rem) !important;
  line-height: 0.96 !important;
  margin: 0.78rem 0 0 !important;
  min-height: 2.85rem !important;
  min-width: 6.55rem !important;
  padding: 0.32rem 0.52rem !important;
}

/* Final V2 tool rail cleanup: editable BPM, readable sound select, compact default prompts. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  grid-template-columns: minmax(13.8rem, 1fr) 5.2rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  gap: 0.3rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-bpm-field {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 999px !important;
  color: rgba(248, 250, 252, 0.98) !important;
  display: inline-grid !important;
  gap: 0.14rem !important;
  grid-template-columns: minmax(2.65rem, 3.2rem) auto !important;
  min-height: 2.38rem !important;
  min-width: 7.2rem !important;
  padding: 0.12rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-bpm-field input {
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 1.34rem !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  min-width: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  width: 100% !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-bpm-field input::-webkit-outer-spin-button,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-bpm-field input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-bpm-field span {
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 0.84rem !important;
  font-weight: 670 !important;
  line-height: 1 !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.92) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field {
  grid-template-columns: 2.4rem minmax(9.6rem, 11.5rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-sound],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-pattern] {
  min-width: 9.6rem !important;
  padding-right: 2rem !important;
  text-overflow: ellipsis !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast:not([hidden]) {
  align-items: center !important;
  background: rgba(8, 13, 26, 0.96) !important;
  border: 1px solid rgba(94, 234, 212, 0.32) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
  height: auto !important;
  max-width: min(33rem, calc(100vw - 2rem)) !important;
  min-height: 2.2rem !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0.26rem 0.32rem 0.26rem 0.72rem !important;
  width: auto !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-text {
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: 0.75rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-buttons {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 0.28rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-buttons button {
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  min-height: 1.66rem !important;
  padding: 0.18rem 0.58rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-dismiss-button {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.92) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-save-button {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.88)) !important;
  border-color: rgba(191, 219, 254, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-weight: 610 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 680 !important;
}

/* EOF authoritative Practice V2 recorder/default prompt rules. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(14.1rem, 1fr) minmax(7.45rem, 7.95rem) !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: grid !important;
  gap: 0.38rem 0.44rem !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin-top: 0.74rem !important;
  width: max-content !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.82rem !important;
  font-weight: 620 !important;
  min-height: 1.9rem !important;
  min-width: 4.2rem !important;
  padding: 0.2rem 0.68rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 700 !important;
  min-width: 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  display: inline-flex !important;
  font-size: clamp(2.35rem, 3.05vw, 3.05rem) !important;
  grid-area: timer !important;
  justify-content: center !important;
  justify-self: end !important;
  letter-spacing: 0 !important;
  line-height: 0.94 !important;
  margin: 0.7rem 0 0 !important;
  min-height: 3.55rem !important;
  min-width: 7.45rem !important;
  padding: 0.38rem 0.7rem !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt:not([hidden]) {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96)) !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35) !important;
  color: rgba(239, 246, 255, 0.96) !important;
  display: flex !important;
  gap: 0.6rem !important;
  max-width: min(34rem, calc(100vw - 2rem)) !important;
  padding: 0.52rem 0.62rem !important;
  width: max-content !important;
  -webkit-text-fill-color: rgba(239, 246, 255, 0.96) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt .runtime-default-action-text {
  color: rgba(239, 246, 255, 0.96) !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  -webkit-text-fill-color: rgba(239, 246, 255, 0.96) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt .runtime-default-action-buttons {
  gap: 0.34rem !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt .runtime-default-action-buttons button {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  min-height: 1.58rem !important;
  padding: 0.16rem 0.56rem !important;
}

/* Absolute final recorder rail override. Keep this at EOF so older patch layers cannot shrink it. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(11.6rem, 1fr) minmax(10.2rem, 10.9rem) !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].has-recorder-hint [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:hover [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:focus-within [data-zb-pv2-recorder-meta] {
  display: none !important;
  visibility: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  min-height: 1.94rem !important;
  min-width: 4.28rem !important;
  padding: 0.2rem 0.7rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 720 !important;
  min-width: 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tools .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  display: inline-flex !important;
  font-size: clamp(3.15rem, 4.05vw, 4.05rem) !important;
  grid-area: timer !important;
  justify-content: center !important;
  justify-self: end !important;
  letter-spacing: 0 !important;
  line-height: 0.92 !important;
  margin: 0.62rem 0 0 !important;
  min-height: 4.75rem !important;
  min-width: 10.1rem !important;
  padding: 0.48rem 0.95rem !important;
  position: static !important;
}

/* Final V2 recorder shape: no inline hint, large elapsed display. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  grid-template-columns: auto minmax(11.5rem, 1fr) minmax(8.8rem, 9.45rem) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].has-recorder-hint [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:hover [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:focus-within [data-zb-pv2-recorder-meta] {
  display: none !important;
  visibility: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  gap: 0.34rem 0.38rem !important;
  margin-top: 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.84rem !important;
  min-height: 1.82rem !important;
  min-width: 4.12rem !important;
  padding: 0.18rem 0.68rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.44), rgba(76, 29, 29, 0.28)) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
  color: rgba(254, 202, 202, 0.66) !important;
  -webkit-text-fill-color: rgba(254, 202, 202, 0.66) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"]:not(:disabled) {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.96), rgba(190, 18, 60, 0.82)) !important;
  border-color: rgba(254, 202, 202, 0.44) !important;
  box-shadow: 0 10px 22px rgba(190, 18, 60, 0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Restore the polished recorder composition: large controls, red Record, large clock. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  align-items: start !important;
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(12.2rem, 1fr) minmax(9.25rem, 9.85rem) !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > .zb-pv2-tool-icon {
  height: 2.15rem !important;
  width: 2.15rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > div {
  align-content: start !important;
  display: grid !important;
  gap: 0.22rem !important;
  grid-area: body !important;
  grid-template-areas:
    "title"
    "actions" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-right: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] h4 {
  font-size: 1.04rem !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  padding-right: 7rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] [data-zb-pv2-recorder-meta] {
  display: none !important;
  visibility: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]),
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) {
  align-items: center !important;
  display: inline-grid !important;
  gap: 0.28rem !important;
  grid-template-columns: auto auto !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 0.62rem !important;
  top: 0.72rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) input,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) input {
  height: 0.96rem !important;
  margin: 0 !important;
  width: 0.96rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check:has([data-zb-pv2-recorder-auto-playback]) span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] label.zb-pv2-tool-check-compact:has([data-zb-pv2-recorder-auto-playback]) span {
  line-height: 0.96rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: grid !important;
  gap: 0.38rem 0.44rem !important;
  grid-area: actions !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin: 0.74rem 0 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: max-content !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  min-height: 1.98rem !important;
  min-width: 4.35rem !important;
  padding: 0.24rem 0.74rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.56), rgba(190, 18, 60, 0.38)) !important;
  border-color: rgba(254, 202, 202, 0.36) !important;
  color: rgba(254, 202, 202, 0.78) !important;
  min-width: 5rem !important;
  -webkit-text-fill-color: rgba(254, 202, 202, 0.78) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"]:not(:disabled) {
  background: linear-gradient(135deg, #fb3d69, #c71843) !important;
  border-color: rgba(254, 202, 202, 0.58) !important;
  box-shadow: 0 12px 24px rgba(190, 18, 60, 0.28) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  display: inline-flex !important;
  font-size: clamp(2.55rem, 3.25vw, 3.25rem) !important;
  grid-area: timer !important;
  justify-content: center !important;
  justify-self: end !important;
  letter-spacing: 0 !important;
  line-height: 0.95 !important;
  margin: 0.78rem 0 0 !important;
  min-height: 4.05rem !important;
  min-width: 9.35rem !important;
  padding: 0.42rem 0.9rem !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  font-size: clamp(2.1rem, 2.75vw, 2.85rem) !important;
  margin-top: 0.7rem !important;
  min-height: 3.25rem !important;
  min-width: 8.75rem !important;
  padding: 0.38rem 0.92rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:hover [data-zb-pv2-recorder-meta],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-record-disabled:focus-within [data-zb-pv2-recorder-meta] {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 999px !important;
  bottom: 0.36rem !important;
  color: rgba(255, 237, 213, 0.96) !important;
  display: block !important;
  font-size: 0.68rem !important;
  left: 2.7rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 0.18rem 0.46rem !important;
  position: absolute !important;
  right: 7.4rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

/* ABSOLUTE FINAL V2 RECORDER FIT EOF 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] {
  column-gap: 0.5rem !important;
  grid-template-areas: "icon body timer" !important;
  grid-template-columns: auto minmax(14.8rem, 1fr) minmax(6.05rem, 6.35rem) !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  display: grid !important;
  gap: 0.34rem 0.42rem !important;
  grid-template-columns: repeat(3, max-content) !important;
  margin-top: 0.66rem !important;
  width: max-content !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  color: rgba(241, 245, 249, 0.9) !important;
  font-size: 0.84rem !important;
  font-weight: 590 !important;
  letter-spacing: 0 !important;
  min-height: 1.86rem !important;
  min-width: 4.18rem !important;
  padding: 0.2rem 0.66rem !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.9) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button:not(:disabled):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button:disabled {
  color: rgba(203, 213, 225, 0.58) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.58) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"] {
  font-weight: 650 !important;
  min-width: 5rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button[data-zb-pv2-action="record-start"]:not(:disabled) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong[data-zb-pv2-recorder-value] {
  align-self: center !important;
  font-size: clamp(1.42rem, 1.82vw, 1.9rem) !important;
  justify-self: end !important;
  line-height: 0.96 !important;
  margin: 0.76rem 0 0 !important;
  min-height: 2.55rem !important;
  min-width: 6.05rem !important;
  padding: 0.28rem 0.46rem !important;
}

/* ABSOLUTE FINAL V2 METRONOME FIT EOF 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 1rem !important;
  grid-template-areas:
    "title auto"
    "bpm actions"
    "sound actions"
    "beat actions" !important;
  grid-template-columns: minmax(15.6rem, 1fr) minmax(5.75rem, 6rem) !important;
  grid-template-rows: auto auto auto auto !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  align-self: start !important;
  grid-area: auto !important;
  justify-self: end !important;
  margin: 0 0 0.18rem !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  grid-area: bpm !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(1) {
  grid-area: sound !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(2) {
  grid-area: beat !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  align-self: center !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-area: actions !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(2, minmax(1.46rem, auto)) !important;
  justify-self: stretch !important;
  margin: 0.2rem 0 0 !important;
  position: static !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions button {
  min-height: 1.62rem !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-sound],
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-pattern] {
  min-width: 11.35rem !important;
  width: 11.35rem !important;
}

/* TRUE EOF V2 ACTION RAIL COLOR + CURRENT BLOCK ACCENT 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions {
  background:
    radial-gradient(circle at 4% 0%, rgba(34, 211, 238, 0.12), transparent 12rem),
    linear-gradient(90deg, rgba(3, 10, 25, 0.72), rgba(11, 20, 42, 0.74)) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button {
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:not(:disabled):hover,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:not(:disabled):focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(94, 234, 212, 0.16) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="start"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.98), rgba(20, 184, 166, 0.82)) !important;
  border-color: rgba(134, 239, 172, 0.46) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="unscheduled"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.88), rgba(217, 119, 6, 0.46)) !important;
  border-color: rgba(253, 230, 138, 0.36) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="done"] {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.72), rgba(30, 41, 59, 0.62)) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="skip"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.54)) !important;
  border-color: rgba(147, 197, 253, 0.38) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="next-block"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(67, 56, 202, 0.56)) !important;
  border-color: rgba(196, 181, 253, 0.34) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="notes"] {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.88), rgba(124, 58, 237, 0.48)) !important;
  border-color: rgba(153, 246, 228, 0.34) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button:disabled {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.68), rgba(15, 23, 42, 0.72)) !important;
  border-color: rgba(100, 116, 139, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: rgba(203, 213, 225, 0.5) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.5) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.3), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(49, 46, 129, 0.28)),
    rgba(7, 16, 34, 0.9) !important;
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 12px 30px rgba(8, 47, 73, 0.32),
    0 0 28px rgba(45, 212, 191, 0.18),
    inset 4px 0 0 rgba(45, 212, 191, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current > span {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(139, 92, 246, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.34) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current small,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current em {
  color: rgba(207, 250, 254, 0.86) !important;
  -webkit-text-fill-color: rgba(207, 250, 254, 0.86) !important;
}

/* TRUE EOF V2 PRACTICE STATUS RAIL RECOVERY 2026-06-26. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-actions button[data-zb-pv2-action="done"] {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.88), rgba(190, 18, 60, 0.5)) !important;
  border-color: rgba(251, 113, 133, 0.42) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  align-items: stretch !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.24), transparent 17rem),
    radial-gradient(circle at 88% 70%, rgba(139, 92, 246, 0.2), transparent 18rem),
    linear-gradient(90deg, rgba(9, 35, 48, 0.94), rgba(18, 22, 54, 0.94)) !important;
  border-color: rgba(94, 234, 212, 0.34) !important;
  grid-template-columns: minmax(11.5rem, 0.5fr) minmax(0, 4.8fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading {
  min-height: 0 !important;
  padding: 0.44rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading h3 {
  font-size: 1rem !important;
  line-height: 1.04 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions button {
  min-height: 1.9rem !important;
  padding: 0.2rem 0.66rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.34rem 0.46rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.has-rotation-status {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: clamp(0.8rem, 1.35vw, 1.28rem) !important;
  grid-template-columns: minmax(0, 1fr) minmax(8.6rem, 10.2rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-context,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.has-rotation-status .zb-pv2-status-context {
  align-items: center !important;
  background: linear-gradient(135deg, rgba(2, 8, 17, 0.5), rgba(15, 23, 42, 0.58)) !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;
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: minmax(9.4rem, 0.85fr) minmax(0, 1.7fr) minmax(6.4rem, 0.58fr) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.38rem 0.64rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-now-practicing-card.no-rotation-status .zb-pv2-status-context {
  grid-template-columns: minmax(9.4rem, 0.75fr) minmax(0, 2fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell {
  align-content: center !important;
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell span,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer span {
  color: rgba(153, 246, 228, 0.78) !important;
  font-size: 0.56rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell strong {
  color: rgba(248, 250, 252, 0.98) !important;
  display: block !important;
  font-size: 0.84rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-cell.is-item strong {
  font-size: 0.98rem !important;
  font-weight: 820 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer {
  align-content: center !important;
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  gap: 0.04rem !important;
  justify-self: end !important;
  min-width: 8.6rem !important;
  text-align: right !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-status-timer strong {
  color: #fff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
  font-size: clamp(2.25rem, 3.65vw, 3.2rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  line-height: 0.9 !important;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.42) !important;
  -webkit-text-fill-color: #fff !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-block.is-current {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.3), transparent 9rem),
    radial-gradient(circle at 98% 10%, rgba(139, 92, 246, 0.28), transparent 10rem),
    rgba(5, 18, 35, 0.9) !important;
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.24),
    0 0 38px rgba(45, 212, 191, 0.24),
    inset 4px 0 0 rgba(45, 212, 191, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-workspace-item.is-current {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.38), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(49, 46, 129, 0.3)),
    rgba(7, 16, 34, 0.96) !important;
  border-color: rgba(103, 232, 249, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.32),
    0 14px 34px rgba(8, 47, 73, 0.38),
    0 0 34px rgba(45, 212, 191, 0.24),
    inset 4px 0 0 rgba(45, 212, 191, 0.98),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article.is-current,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list article[aria-current="true"] {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.34), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(49, 46, 129, 0.3)),
    rgba(7, 16, 34, 0.94) !important;
  border-color: rgba(103, 232, 249, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.28),
    0 12px 30px rgba(8, 47, 73, 0.34),
    0 0 30px rgba(45, 212, 191, 0.22),
    inset 4px 0 0 rgba(45, 212, 191, 0.94),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* TRUE EOF V2 SCHEDULE DRAWER HEADER COMPACTION 2026-06-26. */
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-tools {
  gap: 0.42rem !important;
  margin: 0.48rem 0 0.62rem !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-current-schedule.practice-queue-current-schedule-compact {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 11rem),
    linear-gradient(135deg, rgba(7, 17, 36, 0.76), rgba(15, 23, 42, 0.6)) !important;
  border-color: rgba(45, 212, 191, 0.28) !important;
  border-radius: 14px !important;
  gap: 0.48rem !important;
  padding: 0.58rem 0.64rem !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-summary-row {
  align-items: center !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-summary-copy {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-summary-copy > span,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row > span {
  color: rgba(190, 201, 219, 0.74) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-summary-copy > strong {
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: 1rem !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-summary-copy > small {
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-open-builder-compact {
  justify-self: end !important;
  min-height: 2rem !important;
  padding: 0.3rem 0.7rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row {
  align-items: center !important;
  display: grid !important;
  gap: 0.48rem !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row select {
  appearance: none !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.62)) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 999px !important;
  color: rgba(248, 250, 252, 0.94) !important;
  font: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  min-height: 2rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.34rem 2rem 0.34rem 0.76rem !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row {
  position: relative !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row::after {
  color: rgba(153, 246, 228, 0.78) !important;
  content: "⌄" !important;
  font-size: 1rem !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0.76rem !important;
  top: 50% !important;
  transform: translateY(-52%) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row:has(select:disabled)::after {
  content: "" !important;
  display: none !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row select:disabled {
  color: rgba(203, 213, 225, 0.68) !important;
  cursor: default !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.68) !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row select:not(:disabled):hover,
html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row select:not(:disabled):focus-visible {
  border-color: rgba(45, 212, 191, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.16),
    0 0 22px rgba(45, 212, 191, 0.12) !important;
  outline: none !important;
}

html body[data-current-screen="practice-v2"] #practiceQueueWorkspace .practice-queue-schedule-selector-row em {
  color: rgba(203, 213, 225, 0.62) !important;
  font-size: 0.72rem !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

/* TRUE EOF V2 CROSS-DAY PRACTICE RESUME CHOICE 2026-06-26. */
.practice-resume-choice-details {
  color: rgba(226, 232, 240, 0.92);
  display: grid;
  gap: 0.9rem;
}

.practice-resume-choice-details > p {
  margin: 0;
}

.practice-resume-choice-stop {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(99, 102, 241, 0.16));
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.28rem;
  padding: 0.85rem 1rem;
}

.practice-resume-choice-stop span {
  color: rgba(153, 246, 228, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practice-resume-choice-stop strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.98rem;
}

.practice-resume-choice-options {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-resume-choice-options article {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.85rem;
  padding: 0.85rem;
}

.practice-resume-choice-options strong {
  color: rgba(255, 255, 255, 0.95);
  display: block;
  margin-bottom: 0.3rem;
}

.practice-resume-choice-options p {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 760px) {
  .practice-resume-choice-options {
    grid-template-columns: 1fr;
  }
}

/* TRUE EOF ACTIVE PRACTICE GLOW + MODAL UPDATE DEFERRAL 2026-06-26. */
html body #practiceQueueWorkspace .practice-queue-workspace-block.is-active-practice,
html body #practiceQueueWorkspace .practice-queue-workspace-block.is-current,
html body #practiceQueueWorkspace .practice-queue-workspace-block[aria-current="true"],
html body #practiceQueueWorkspace .practice-queue-workspace-block[data-practice-queue-active-block="true"] {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.34), transparent 9rem),
    radial-gradient(circle at 98% 10%, rgba(139, 92, 246, 0.3), transparent 10rem),
    rgba(5, 18, 35, 0.92) !important;
  border-color: rgba(94, 234, 212, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.3),
    0 0 42px rgba(45, 212, 191, 0.26),
    inset 4px 0 0 rgba(45, 212, 191, 0.94),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body #practiceQueueWorkspace .practice-queue-workspace-item.is-active-practice,
html body #practiceQueueWorkspace .practice-queue-workspace-item.is-current,
html body #practiceQueueWorkspace .practice-queue-workspace-item[aria-current="step"],
html body #practiceQueueWorkspace .practice-queue-workspace-item[data-practice-queue-active-item="true"] {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.4), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(49, 46, 129, 0.32)),
    rgba(7, 16, 34, 0.96) !important;
  border-color: rgba(103, 232, 249, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.36),
    0 14px 34px rgba(8, 47, 73, 0.4),
    0 0 38px rgba(45, 212, 191, 0.28),
    inset 4px 0 0 rgba(45, 212, 191, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule-list > article.is-current,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule-list > article[aria-current="true"] {
  background:
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, 0.36), transparent 8rem),
    linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(49, 46, 129, 0.32)),
    rgba(7, 16, 34, 0.95) !important;
  border-color: rgba(103, 232, 249, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.32),
    0 12px 30px rgba(8, 47, 73, 0.36),
    0 0 34px rgba(45, 212, 191, 0.24),
    inset 4px 0 0 rgba(45, 212, 191, 0.96),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-status-context.is-active-practice,
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-status-cell.is-block {
  border-color: rgba(94, 234, 212, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.14),
    0 0 28px rgba(45, 212, 191, 0.16),
    inset 3px 0 0 rgba(45, 212, 191, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body .schedule-journey-chip.is-current,
html body .schedule-journey-chip[aria-current="true"],
html body #scheduleJourneyBanner .schedule-journey-chip.is-current,
html body #scheduleJourneyBanner .schedule-journey-chip[aria-current="true"] {
  border-color: rgba(103, 232, 249, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.3),
    0 12px 28px rgba(8, 47, 73, 0.34),
    0 0 28px rgba(45, 212, 191, 0.22),
    inset 4px 0 0 rgba(45, 212, 191, 0.92) !important;
}

html body:has(.modal-backdrop:not([hidden])) #pwaUpdateBanner,
html body:has(.text-cleanup-backdrop:not([hidden])) #pwaUpdateBanner,
html body:has(#alphaAccessGate:not([hidden])) #pwaUpdateBanner,
html body:has(.things-focus-screen:not([hidden])) #pwaUpdateBanner {
  display: none !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip.is-current,
html body button.practice-key-jump-chip.is-current:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.3), transparent 44%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(124, 58, 237, 0.88)) !important;
  border-color: rgba(191, 219, 254, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 22px rgba(59, 130, 246, 0.26) !important;
  color: #ffffff !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip.is-completed,
html body button.practice-key-jump-chip.is-completed:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  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.76) !important;
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.16),
    0 0 18px rgba(16, 185, 129, 0.18) !important;
  color: rgba(236, 253, 245, 0.98) !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip.is-completed::before,
html body button.practice-key-jump-chip.is-completed:not(:disabled):not([disabled]):not([aria-disabled="true"])::before {
  color: rgba(187, 247, 208, 0.98) !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-guidance-body,
html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-guidance {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-actions {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  justify-content: center !important;
  max-width: 100% !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-actions button {
  flex: 1 1 calc(50% - 0.32rem) !important;
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
  min-height: 1.58rem !important;
  min-width: 0 !important;
  padding: 0.18rem 0.32rem !important;
  white-space: normal !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-actions button:hover,
html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-actions button:focus-visible,
html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip:hover,
html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip:focus-visible,
html body button.practice-key-jump-chip:hover,
html body button.practice-key-jump-chip:focus-visible {
  transform: none !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip-grid {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.24rem !important;
  justify-content: center !important;
  max-width: 100% !important;
  overflow: visible !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-key-chip {
  flex: 0 1 auto !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  min-height: 1.48rem !important;
  min-width: 1.78rem !important;
  padding: 0.18rem 0.34rem !important;
}

/* Library create action should remain the primary visual action in the toolbar. */
html body[data-current-screen="catalog"] .organize-catalog-workspace button.catalog-header-icon-button.catalog-add-primary-button[data-catalog-toggle-create-menu] {
  background-color: #2563eb !important;
  background-image:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.36), transparent 32%),
    linear-gradient(135deg, #2563eb 0%, #0ea5e9 78%, #38bdf8 100%) !important;
  border-color: rgba(191, 219, 254, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 42px rgba(37, 99, 235, 0.34),
    0 0 30px rgba(14, 165, 233, 0.2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.18) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace button.catalog-header-icon-button.catalog-add-primary-button[data-catalog-toggle-create-menu]:hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace button.catalog-header-icon-button.catalog-add-primary-button[data-catalog-toggle-create-menu]:focus-visible,
html body[data-current-screen="catalog"] .organize-catalog-workspace button.catalog-header-icon-button.catalog-add-primary-button[data-catalog-toggle-create-menu][aria-expanded="true"] {
  background-color: #1d4ed8 !important;
  background-image:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
  border-color: rgba(219, 234, 254, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 22px 54px rgba(37, 99, 235, 0.42),
    0 0 38px rgba(14, 165, 233, 0.28) !important;
}

/* Final practice rail lock: schedule blocks are a horizontal strip, never a wrapping grid. */
html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner {
  align-items: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: minmax(12.25rem, 16rem) minmax(0, 1fr) !important;
  height: 5.8rem !important;
  max-height: 5.8rem !important;
  min-height: 5.8rem !important;
  overflow: hidden !important;
  padding: 0.5rem 0.58rem !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail > .schedule-journey-heading,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading {
  align-items: center !important;
  display: grid !important;
  gap: 0.44rem !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  height: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail > .schedule-journey-heading > div,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > div {
  grid-column: 1 !important;
  min-width: 0 !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail > .schedule-journey-heading > button,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 1.9rem !important;
  padding: 0.32rem 0.58rem !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail #scheduleJourneyBlocks.schedule-journey-blocks,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner #scheduleJourneyBlocks.schedule-journey-blocks {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-auto-columns: clamp(11.2rem, 16vw, 13.5rem) !important;
  grid-auto-flow: column !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.02rem 0.05rem 0.28rem !important;
  scrollbar-width: thin !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner.is-scroll-rail #scheduleJourneyBlocks.schedule-journey-blocks > .schedule-journey-chip,
html body:has(.practice-dashboard:not([hidden])) #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner #scheduleJourneyBlocks.schedule-journey-blocks > .schedule-journey-chip {
  align-self: stretch !important;
  box-sizing: border-box !important;
  flex: none !important;
  height: calc(100% - 0.08rem) !important;
  max-width: none !important;
  min-width: 0 !important;
  scroll-snap-align: center !important;
  width: 100% !important;
}

/* Absolute schedule rail guard: the live rail IDs are unique, so do not depend on parent state. */
html body #scheduleJourneyBanner.schedule-journey-banner {
  align-items: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: minmax(12.25rem, 16rem) minmax(0, 1fr) !important;
  height: 5.8rem !important;
  max-height: 5.8rem !important;
  min-height: 5.8rem !important;
  overflow: hidden !important;
  padding: 0.5rem 0.58rem !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading {
  align-items: center !important;
  display: grid !important;
  gap: 0.44rem !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  height: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > div {
  grid-column: 1 !important;
  min-width: 0 !important;
}

html body #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 1.9rem !important;
  padding: 0.32rem 0.58rem !important;
}

html body #scheduleJourneyBlocks.schedule-journey-blocks {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-auto-columns: clamp(11.2rem, 16vw, 13.5rem) !important;
  grid-auto-flow: column !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.02rem 0.05rem 0.28rem !important;
  scrollbar-width: thin !important;
}

html body #scheduleJourneyBlocks.schedule-journey-blocks > .schedule-journey-chip {
  align-self: stretch !important;
  box-sizing: border-box !important;
  flex: none !important;
  height: calc(100% - 0.08rem) !important;
  max-width: none !important;
  min-width: 0 !important;
  scroll-snap-align: center !important;
  width: 100% !important;
}

/* Final schedule rail lock: beats older #sessionPanel rail rules on both practice shells. */
html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner {
  align-items: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: minmax(12.25rem, 16rem) minmax(0, 1fr) !important;
  height: 5.8rem !important;
  max-height: 5.8rem !important;
  min-height: 5.8rem !important;
  overflow: hidden !important;
  padding: 0.5rem 0.58rem !important;
}

html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading {
  align-items: center !important;
  display: grid !important;
  gap: 0.44rem !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  height: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > div {
  grid-column: 1 !important;
  min-width: 0 !important;
}

html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner > .schedule-journey-heading > button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 1.9rem !important;
  padding: 0.32rem 0.58rem !important;
}

html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner #scheduleJourneyBlocks.schedule-journey-blocks {
  align-items: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  padding: 0.02rem 0.05rem 0.28rem !important;
  scroll-behavior: smooth !important;
  scroll-padding-inline: 0.6rem !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: thin !important;
}

html body #sessionPanel.practice-player #scheduleJourneyBanner.schedule-journey-banner #scheduleJourneyBlocks.schedule-journey-blocks > .schedule-journey-chip {
  align-self: stretch !important;
  box-sizing: border-box !important;
  flex: 0 0 clamp(11.2rem, 16vw, 13.5rem) !important;
  height: calc(100% - 0.08rem) !important;
  max-width: 13.5rem !important;
  min-width: 11.2rem !important;
  scroll-snap-align: center !important;
  width: auto !important;
}

/* V2 schedule rail lock: extra blocks scroll horizontally instead of wrapping the rail taller. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) {
  align-items: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: minmax(17.5rem, 20rem) minmax(0, 1fr) !important;
  height: 5.8rem !important;
  max-height: 5.8rem !important;
  min-height: 5.8rem !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-panel-heading {
  align-items: center !important;
  border-bottom: 0 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0.5rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-panel-heading :is(.zb-pv2-kicker, h3) {
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-actions {
  align-items: center !important;
  display: inline-flex !important;
  gap: 0.48rem !important;
  justify-content: end !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-actions button {
  min-height: 1.9rem !important;
  padding: 0.32rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list {
  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;
  overscroll-behavior-x: contain !important;
  padding: 0.5rem 0.58rem 0.42rem !important;
  scroll-behavior: smooth !important;
  scroll-padding-inline: 0.6rem !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: thin !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule:not(.is-now-practicing) .zb-pv2-schedule-list > article {
  align-self: stretch !important;
  box-sizing: border-box !important;
  flex: 0 0 clamp(10.8rem, 15vw, 13rem) !important;
  height: 100% !important;
  max-width: 13rem !important;
  min-height: 0 !important;
  min-width: 10.8rem !important;
  scroll-snap-align: center !important;
  width: auto !important;
}

/* Selected Practice Block rows also show descriptions, so give them the focused-row containment. */
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-block-items {
  gap: 0.56rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-item-row {
  align-items: center !important;
  box-sizing: border-box !important;
  grid-template-columns: auto auto minmax(0, 1fr) max-content !important;
  min-height: 6.1rem !important;
  overflow: hidden !important;
  padding: 0.72rem 0.72rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-row-copy {
  align-content: center !important;
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-row-copy strong {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  font-size: 0.92rem !important;
  line-height: 1.14 !important;
  max-height: 2.28em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-row-copy small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-row-copy em {
  display: block !important;
  font-size: 0.7rem !important;
  line-height: 1.14 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row:is(.is-selected, .is-focused) .schedule-builder-advanced-row-actions {
  align-items: center !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  min-width: max-content !important;
}

/* Active practice rail correction: keep the large elapsed timer without replacing the schedule blocks. */
html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing {
  grid-template-columns: minmax(16.5rem, 18rem) minmax(0, 1fr) !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading {
  align-content: center !important;
  align-items: center !important;
  display: grid !important;
  gap: 0.2rem 0.5rem !important;
  grid-template-areas:
    "copy actions"
    "time time" !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.48rem 0.62rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading > div:first-child {
  grid-area: copy !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-panel-heading h3 {
  display: none !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-kicker {
  font-size: 0.62rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions {
  grid-area: actions !important;
  min-width: 0 !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions .zb-pv2-chip {
  display: none !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-actions button {
  min-height: 1.68rem !important;
  padding: 0.2rem 0.58rem !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-active-time {
  align-items: center !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  font-size: clamp(3rem, 3.7vw, 3.65rem) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 930 !important;
  grid-area: time !important;
  justify-content: center !important;
  line-height: 0.9 !important;
  max-width: 100% !important;
  min-height: 3.1rem !important;
  overflow: hidden !important;
  padding: 0.22rem 0.56rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list {
  align-items: stretch !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html body[data-current-screen="practice-v2"] section.zb-practice-v2-screen .zb-pv2-schedule.is-now-practicing .zb-pv2-schedule-list > article {
  flex: 0 0 12.6rem !important;
  max-width: 12.6rem !important;
  min-width: 12.6rem !important;
}

/* Final advanced scheduler containment: keep block headers and expanded block items inside their cards. */
html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-block-header {
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-block-header > .schedule-builder-advanced-row-main {
  min-width: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-block-header > .schedule-builder-advanced-row-actions {
  align-items: center !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0.26rem !important;
  justify-content: flex-end !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-block-header .schedule-builder-icon-button {
  min-height: 2rem !important;
  min-width: 0 !important;
  padding-inline: 0.5rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-block-header .schedule-builder-collapse-toggle {
  flex: 0 0 2rem !important;
  min-width: 2rem !important;
  padding-inline: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row {
  align-items: center !important;
  box-sizing: border-box !important;
  grid-template-columns: auto auto minmax(0, 1fr) max-content !important;
  min-height: 4.9rem !important;
  overflow: hidden !important;
  padding: 0.64rem 0.72rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row:has(.schedule-builder-advanced-row-copy em) {
  min-height: 6.1rem !important;
  padding-block: 0.72rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy {
  align-content: center !important;
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy strong {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  font-size: 0.92rem !important;
  line-height: 1.14 !important;
  max-height: 2.28em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy em {
  display: block !important;
  font-size: 0.7rem !important;
  line-height: 1.14 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-advanced-schedule-screen .schedule-builder-practice-blocks-section .schedule-builder-advanced-block-row:not(.is-collapsed) .schedule-builder-advanced-item-row .schedule-builder-advanced-row-actions {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.28rem !important;
  max-width: none !important;
  min-width: max-content !important;
}

/* Update confirmation keeps the shared dialog's calm teal primary action. */
html body #guidanceModalBackdrop.is-update-confirmation-modal {
  --zb-readable-primary: linear-gradient(135deg, #0f93a6, #18b69e);
}

html body #guidanceModalBackdrop.is-update-confirmation-modal .guidance-modal-actions .zonebuilder-confirm-action-button:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: #0f93a6 !important;
  background-image: 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;
}

/* Installed PWA landing screens own the viewport, including after legacy mobile nav reparenting. */
html body[data-installed-pwa="true"][data-current-screen="getting-started"],
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) {
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html body[data-installed-pwa="true"][data-current-screen="getting-started"] .app-header,
html body[data-installed-pwa="true"][data-current-screen="getting-started"] .app-nav,
html body[data-installed-pwa="true"][data-current-screen="getting-started"] #setupReturnBar,
html body[data-installed-pwa="true"][data-current-screen="getting-started"] #pwaUpdateBanner,
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-header,
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-nav,
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) #setupReturnBar,
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) #pwaUpdateBanner {
  display: none !important;
}

html body[data-installed-pwa="true"][data-current-screen="getting-started"] .app-shell,
html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-shell {
  max-width: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  width: 100vw !important;
}

html body[data-installed-pwa="true"][data-current-screen="getting-started"] .getting-started-screen:not([hidden]) {
  box-sizing: border-box !important;
  inset: 0 !important;
  margin: 0 !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: auto !important;
  position: fixed !important;
  width: 100vw !important;
  z-index: 1 !important;
}

html body[data-installed-pwa="true"]:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100dvh !important;
  inset: 0 !important;
  margin: 0 !important;
  max-height: 100dvh !important;
  overflow: auto !important;
  padding: 0 !important;
  position: fixed !important;
  transform: none !important;
  z-index: 1 !important;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  html:has(body[data-current-screen="getting-started"]),
  html:has(body .practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) {
    overflow: hidden !important;
  }

  body[data-current-screen="getting-started"] .app-header,
  body[data-current-screen="getting-started"] .app-nav,
  body[data-current-screen="getting-started"] #setupReturnBar,
  body[data-current-screen="getting-started"] #pwaUpdateBanner,
  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-header,
  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-nav,
  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) #setupReturnBar,
  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) #pwaUpdateBanner {
    display: none !important;
  }

  body[data-current-screen="getting-started"] .app-shell,
  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) .app-shell {
    max-width: none !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    width: 100vw !important;
  }

  body[data-current-screen="getting-started"] .getting-started-screen:not([hidden]) {
    box-sizing: border-box !important;
    inset: 0 !important;
    margin: 0 !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: auto !important;
    position: fixed !important;
    width: 100vw !important;
    z-index: 1 !important;
  }

  body:has(.practice-dashboard:not([hidden]) #sessionEmptyState.practice-welcome-mode.is-brand-new-welcome) section.card.practice-dashboard.app-screen[data-screen-panel="dashboard"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100dvh !important;
    inset: 0 !important;
    margin: 0 !important;
    max-height: 100dvh !important;
    overflow: auto !important;
    padding: 0 !important;
    position: fixed !important;
    transform: none !important;
    z-index: 1 !important;
  }
}

/* Alpha system-flow modal cleanup: keep app-level prompts in the new light modal family. */
html body #guidanceModalBackdrop.is-system-flow-modal,
html body #backupProtectionModalBackdrop,
html body #restoreConfirmModalBackdrop,
html body .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);
}

html body #guidanceModalBackdrop.is-system-flow-modal .guidance-modal-card,
html body #backupProtectionModalBackdrop .backup-protection-modal-card,
html body #restoreConfirmModalBackdrop .restore-confirm-card,
html body .abandoned-session-modal-backdrop .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-width: min(36rem, calc(100vw - 2rem)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  -webkit-text-fill-color: initial !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal .modal-header,
html body #backupProtectionModalBackdrop .modal-header,
html body #restoreConfirmModalBackdrop .modal-header,
html body .abandoned-session-modal-backdrop .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;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.eyebrow, .modal-header .eyebrow),
html body #backupProtectionModalBackdrop :is(.eyebrow, .modal-header .eyebrow),
html body #restoreConfirmModalBackdrop :is(.eyebrow, .modal-header .eyebrow),
html body .abandoned-session-modal-backdrop :is(.eyebrow, .modal-header .eyebrow) {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(h2, strong, label),
html body #backupProtectionModalBackdrop :is(h2, strong, label),
html body #restoreConfirmModalBackdrop :is(h2, strong, label),
html body .abandoned-session-modal-backdrop :is(h2, strong, label) {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(p, span, small, div),
html body #backupProtectionModalBackdrop :is(p, span, small, div),
html body #restoreConfirmModalBackdrop :is(p, span, small, div),
html body .abandoned-session-modal-backdrop :is(p, span, small, div) {
  color: #5e7375 !important;
  -webkit-text-fill-color: #5e7375 !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal .guidance-modal-message,
html body .abandoned-session-modal-backdrop .guidance-modal-message {
  color: #435c64 !important;
  -webkit-text-fill-color: #435c64 !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.practice-resume-choice-stop, .unfinished-schedule-flow > p),
html body #backupProtectionModalBackdrop .backup-protection-prompt-body,
html body #restoreConfirmModalBackdrop .restore-confirm-warning,
html body .abandoned-session-modal-backdrop :is(.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;
  -webkit-text-fill-color: initial !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.guidance-modal-actions, .modal-footer-actions),
html body #backupProtectionModalBackdrop :is(.modal-actions, .modal-footer-actions),
html body #restoreConfirmModalBackdrop :is(.modal-actions, .modal-footer-actions),
html body .abandoned-session-modal-backdrop :is(.abandoned-session-modal-actions, .modal-footer-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;
  color: #203036 !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  padding: 0.78rem 1.2rem 0.92rem !important;
}

html body #backupProtectionModalBackdrop .backup-protection-prompt-body,
html body #restoreConfirmModalBackdrop .restore-confirm-body {
  display: grid !important;
  gap: 0.72rem !important;
  margin: 0 !important;
  padding: 0.95rem 1.2rem 1rem !important;
}

html body #backupProtectionModalBackdrop #backupPromptEnableCloudButton,
html body #restoreConfirmModalBackdrop #restoreConfirmProceedButton {
  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;
}

html body #backupProtectionModalBackdrop #backupPromptLocalOnlyButton,
html body #restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton) {
  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;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.practice-resume-choice-options article, .unfinished-schedule-flow-options article),
html body .abandoned-session-modal-backdrop .abandoned-session-action-section {
  background: rgba(248, 253, 252, 0.68) !important;
  border-color: rgba(15, 118, 110, 0.18) !important;
  color: #203036 !important;
  -webkit-text-fill-color: initial !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.practice-resume-choice-stop span, .guidance-link-action),
html body .abandoned-session-modal-backdrop :is(.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;
}

html body #guidanceModalBackdrop.is-system-flow-modal :is(.practice-resume-choice-stop strong, .practice-resume-choice-options strong, .unfinished-schedule-flow-options strong),
html body .abandoned-session-modal-backdrop :is(.abandoned-session-countdown strong, .abandoned-session-recovery-summary strong) {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

html body #guidanceModalBackdrop.is-system-flow-modal .guidance-modal-actions .guidance-link-action {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

html body .abandoned-session-modal-backdrop .abandoned-session-action-controls button:not(.secondary-button):not(.danger-solid-button),
html body .abandoned-session-modal-backdrop .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;
}

html body .abandoned-session-modal-backdrop .abandoned-session-action-controls .secondary-button,
html body .abandoned-session-modal-backdrop .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;
}

html body .abandoned-session-modal-backdrop .abandoned-session-action-controls .danger-solid-button,
html body .abandoned-session-modal-backdrop .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;
}

html body #abandonedSessionModalBackdrop #abandonedSessionModalActions > button:not(.secondary-button):not(.danger-solid-button):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: #99f6e4 !important;
  background-image: 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;
}

html body #abandonedSessionModalBackdrop #abandonedSessionModalActions > .secondary-button:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(255, 255, 255, 0.74) !important;
  background-image: none !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;
}

html body #abandonedSessionModalBackdrop #abandonedSessionModalActions > .danger-solid-button:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: #ef4444 !important;
  background-image: 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;
}

html body #backupProtectionModalBackdrop #backupPromptEnableCloudButton:not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body #restoreConfirmModalBackdrop #restoreConfirmProceedButton:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: #99f6e4 !important;
  background-image: 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;
}

html body #backupProtectionModalBackdrop #backupPromptLocalOnlyButton:not(:disabled):not([disabled]):not([aria-disabled="true"]),
html body #restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color: rgba(255, 255, 255, 0.74) !important;
  background-image: none !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;
}

/* Data Protection workflow polish: keep the alpha page focused, and make
   Restore Preview feel attached to the backup management flow. */
html body[data-current-screen="system"] .system-screen .backup-method-grid {
  align-items: start !important;
}

html body[data-current-screen="system"] .system-screen .backup-method-grid > .system-redesign-card {
  align-self: start !important;
}

html body[data-current-screen="system"] .system-screen .backup-folder-panel[hidden] {
  display: none !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-panel {
  scroll-margin-top: 7rem !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-panel.is-preview-focus {
  animation: restorePreviewFocusPulse 1.25s ease-out;
}

@keyframes restorePreviewFocusPulse {
  0% {
    border-color: rgba(125, 211, 252, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 14px 34px rgba(2, 8, 23, 0.18);
  }
  28% {
    border-color: rgba(94, 234, 212, 0.68);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 2px rgba(94, 234, 212, 0.18),
      0 18px 42px rgba(14, 165, 233, 0.26);
  }
  100% {
    border-color: rgba(125, 211, 252, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 14px 34px rgba(2, 8, 23, 0.18);
  }
}

/* Metronome usability pass: keep the tool row footprint stable while making
   the BPM value read as an editable control. */
html body #p03iMetronomeCard .p03i-bpm-input,
html body[data-current-screen="practice-v2"] .zb-pv2-metronome-bpm-field input {
  cursor: text !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(125, 211, 252, 0.22) !important;
}

html body #p03iMetronomeCard .p03i-bpm-input:hover,
html body #p03iMetronomeCard .p03i-bpm-input:focus,
html body[data-current-screen="practice-v2"] .zb-pv2-metronome-bpm-field input:hover,
html body[data-current-screen="practice-v2"] .zb-pv2-metronome-bpm-field input:focus {
  border-color: rgba(125, 211, 252, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 2px rgba(14, 165, 233, 0.2) !important;
}

html body #p03iMetronomeCard .p10-metronome-scope-badge {
  align-items: center;
  align-self: start;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  color: rgba(219, 234, 254, 0.94);
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-top: 0.18rem;
  padding: 0.2rem 0.42rem;
  text-transform: uppercase;
}

html body #p03iMetronomeCard .p10-metronome-scope-badge.is-custom {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.34);
  color: rgba(254, 243, 199, 0.96);
}

/* Metronome polish: keep the new status affordances compact without changing the tool row footprint. */
html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.34rem !important;
  grid-template-areas:
    "title title title"
    "bpm sound auto" !important;
  grid-template-columns: minmax(7.25rem, 1.08fr) minmax(6.25rem, 0.98fr) minmax(4.9rem, 0.76fr) !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region {
  align-items: center !important;
  display: grid !important;
  gap: 0.08rem 0.34rem !important;
  grid-area: title !important;
  grid-template-columns: max-content auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-width: 0 !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region .p03i-timing-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region .p10-metronome-scope-badge {
  align-self: center !important;
  font-size: 0.54rem !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  letter-spacing: 0.055em !important;
  margin: 0 !important;
  max-width: 4.4rem !important;
  overflow: hidden !important;
  padding: 0.16rem 0.34rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region .p10ex-metro-kicker {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region {
  grid-area: bpm !important;
  min-width: 0 !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-sound-region {
  grid-area: sound !important;
  min-width: 0 !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top > #p03mAutoSound,
html body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top > .p10ex-metro-auto {
  align-items: center !important;
  align-self: stretch !important;
  display: inline-flex !important;
  grid-area: auto !important;
  justify-content: center !important;
  justify-self: stretch !important;
  margin: 0 !important;
  min-height: 2.7rem !important;
  min-width: 0 !important;
  padding: 0.3rem 0.42rem !important;
  position: relative !important;
  width: 100% !important;
}

html body .runtime-default-action-prompt:not([hidden]) {
  box-sizing: border-box !important;
  max-width: min(34rem, calc(100vw - 2rem)) !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body .runtime-default-action-prompt .runtime-default-action-text {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body .runtime-default-action-prompt .runtime-default-action-buttons {
  flex: 0 0 auto !important;
}

html body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt:not([hidden]) {
  align-items: center !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(94, 234, 212, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(13, 21, 35, 0.98), rgba(7, 13, 24, 0.96)) !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
  border-radius: 16px !important;
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  color: rgba(248, 250, 252, 0.98) !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.48rem !important;
  left: auto !important;
  max-width: min(31rem, calc(100vw - 2rem)) !important;
  padding: 0.58rem 0.66rem !important;
  position: fixed !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  z-index: 260 !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body:has(.practice-dashboard:not([hidden])) #p03iTimerCard > .runtime-default-action-prompt:not([hidden]) {
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.45rem) !important;
}

html body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt .runtime-default-action-text {
  color: rgba(248, 250, 252, 0.98) !important;
  flex: 1 1 min(20rem, 100%) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.98) !important;
}

html body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt .runtime-default-action-buttons {
  align-items: center !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  justify-content: flex-end !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast:not([hidden]) {
  align-items: center !important;
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  flex-wrap: wrap !important;
  max-width: min(32rem, calc(100vw - 2rem)) !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  width: auto !important;
}

html body[data-current-screen="practice-v2"] .runtime-default-action-prompt.is-practice-v2-runtime-default-toast .runtime-default-action-text {
  flex: 1 1 min(18rem, 100%) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Final metronome V2 fit: compact custom/global badge, Auto restored, prompt centered. */
html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 0.58rem !important;
  grid-template-areas:
    "title scope actions"
    "bpm bpm actions"
    "sound sound actions"
    "beat beat auto" !important;
  grid-template-columns: minmax(4.8rem, auto) auto minmax(5.75rem, 6rem) !important;
  grid-template-rows: auto auto auto auto !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] h4 {
  grid-area: title !important;
  min-width: 0 !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta],
html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta][hidden] {
  align-self: center !important;
  background: rgba(14, 165, 233, 0.16) !important;
  border: 1px solid rgba(125, 211, 252, 0.3) !important;
  border-radius: 999px !important;
  color: rgba(224, 242, 254, 0.96) !important;
  display: inline-flex !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  grid-area: scope !important;
  justify-self: start !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-width: 4.9rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.18rem 0.38rem !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(224, 242, 254, 0.96) !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta]:not(:empty) {
  visibility: visible !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta][title*="custom" i] {
  background: rgba(251, 191, 36, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.34) !important;
  color: rgba(254, 243, 199, 0.96) !important;
  -webkit-text-fill-color: rgba(254, 243, 199, 0.96) !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  grid-area: bpm !important;
  max-width: 12.4rem !important;
  width: min(12.4rem, 100%) !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(1) {
  grid-area: sound !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field:nth-of-type(2) {
  grid-area: beat !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  align-items: center !important;
  align-self: end !important;
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  gap: 0.22rem !important;
  grid-area: auto !important;
  justify-self: stretch !important;
  margin: 0 !important;
  min-height: 1.64rem !important;
  padding: 0.2rem 0.42rem !important;
  position: static !important;
  white-space: nowrap !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check input {
  margin: 0 !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  align-self: center !important;
  grid-area: actions !important;
  margin: 0 !important;
}

html body .runtime-default-action-prompt.is-practice-v2-runtime-default-toast:not([hidden]),
html body section.zb-practice-v2-screen .runtime-default-action-prompt.is-practice-v2-runtime-default-toast:not([hidden]) {
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  max-width: min(34rem, calc(100vw - 2rem)) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Final correction: keep V2 metronome scope inside the title lane and center all V2 metronome prompts. */
html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  position: relative !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div {
  column-gap: 0.62rem !important;
  grid-template-areas:
    "title auto"
    "bpm actions"
    "sound actions"
    "beat actions" !important;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 5.9rem) !important;
  grid-template-rows: auto auto auto auto !important;
  overflow: visible !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] h4 {
  grid-area: title !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding-right: 4.85rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta],
html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta][hidden] {
  left: 8.75rem !important;
  max-width: 4.55rem !important;
  position: absolute !important;
  top: 0.82rem !important;
  z-index: 2 !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-check {
  align-self: start !important;
  grid-area: auto !important;
  justify-self: end !important;
  width: min(5.5rem, 100%) !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  grid-area: actions !important;
  width: 100% !important;
}

html body:has(section.zb-practice-v2-screen:not([hidden])) .runtime-default-action-prompt:not([hidden]) {
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  max-width: min(34rem, calc(100vw - 2rem)) !important;
  position: fixed !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  z-index: 320 !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-timer-presets button,
html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-countdown-custom {
  align-items: center !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  gap: 0.28rem !important;
  line-height: 1.1 !important;
  min-height: 1.66rem !important;
  overflow: visible !important;
  padding: 0.18rem 0.34rem !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-countdown-custom input {
  box-sizing: border-box !important;
  line-height: 1.1 !important;
  min-height: 1.22rem !important;
  padding: 0.02rem 0.26rem !important;
  transform: translateY(0) !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta][hidden] {
  display: none !important;
}

html body section.zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] [data-zb-pv2-metronome-meta]:not([hidden]) {
  display: inline-flex !important;
}

/* Inactivity recovery: compact hierarchy without labeled action bands. */
html body #abandonedSessionModalBackdrop.is-recovery .abandoned-session-modal-card,
html body #abandonedSessionModalBackdrop.is-recovery-confirmation .abandoned-session-modal-card {
  max-height: min(90vh, 35rem) !important;
  max-width: min(34rem, calc(100vw - 1.5rem)) !important;
}

html body #abandonedSessionModalBackdrop.is-recovery .modal-header,
html body #abandonedSessionModalBackdrop.is-recovery-confirmation .modal-header {
  padding: 0.92rem 1.05rem 0.72rem !important;
}

html body #abandonedSessionModalBackdrop.is-recovery .guidance-modal-message,
html body #abandonedSessionModalBackdrop.is-recovery-confirmation .guidance-modal-message {
  padding: 0.72rem 1.05rem 0.58rem !important;
}

html body #abandonedSessionModalBackdrop.is-recovery .abandoned-session-modal-body,
html body #abandonedSessionModalBackdrop.is-recovery-confirmation .abandoned-session-modal-body {
  gap: 0.5rem !important;
  padding: 0 1.05rem 0.78rem !important;
}

html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-body {
  display: grid !important;
  gap: 0.42rem !important;
}

html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary {
  align-items: center !important;
  display: grid !important;
  gap: 0.1rem 0.7rem !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 0.68rem 0.78rem !important;
}

html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary span {
  grid-column: 1 / -1 !important;
}

html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary small {
  text-align: right !important;
  white-space: nowrap !important;
}

html body #abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 0.72rem 1.05rem 0.82rem !important;
}

html body #abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > button {
  justify-content: center !important;
  margin: 0 !important;
  min-height: 2.52rem !important;
  width: 100% !important;
}

html body #abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="discard"] {
  align-self: center !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #9f3434 !important;
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  min-height: 2rem !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em !important;
  width: auto !important;
  -webkit-text-fill-color: #9f3434 !important;
}

html body #abandonedSessionModalBackdrop.is-recovery-confirmation #abandonedSessionModalActions {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0.72rem 1.05rem 0.82rem !important;
}

html body #abandonedSessionModalBackdrop.is-recovery-confirmation #abandonedSessionModalActions > [data-abandoned-action="keep"] {
  background: linear-gradient(135deg, #99f6e4, #0f766e) !important;
  border-color: rgba(204, 251, 241, 0.66) !important;
  color: #042f2e !important;
  -webkit-text-fill-color: #042f2e !important;
}

html body #abandonedSessionModalBackdrop.is-recovery-confirmation #abandonedSessionModalActions > [data-abandoned-action="confirm-discard"] {
  background: rgba(255, 255, 255, 0.6) !important;
  background-image: none !important;
  border-color: rgba(159, 52, 52, 0.38) !important;
  box-shadow: none !important;
  color: #8f2f2f !important;
  -webkit-text-fill-color: #8f2f2f !important;
}

@media (max-width: 560px) {
  html body #abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="discard"] {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary small {
    text-align: left !important;
    white-space: normal !important;
  }

  html body #abandonedSessionModalBackdrop.is-recovery-confirmation #abandonedSessionModalActions {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Save Recording uses a light surface; keep dictation controls unmistakable. */
html body #guidanceModalBackdrop.is-quick-record-save-modal .quick-record-save-dialog .speech-input-wrap > .speech-mic-button,
html body #guidanceModalBackdrop.is-quick-record-save-modal .quick-record-save-dialog .speech-input-wrap > .speech-mic-button[data-speech-state] {
  background: linear-gradient(145deg, #2dd4bf, #4f46e5) !important;
  background-color: #4f46e5 !important;
  border-color: rgba(15, 118, 110, 0.5) !important;
  box-shadow: 0 7px 16px rgba(15, 118, 110, 0.24) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #guidanceModalBackdrop.is-quick-record-save-modal .quick-record-save-dialog .speech-mic-button :is(.speech-mic-icon, svg) {
  color: #ffffff !important;
  stroke: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Recovery modal wins over the global dark-modal and button-order compatibility rules. */
html body div#abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-modal-card {
  background: linear-gradient(145deg, #f3fbfa 0%, #e4eeee 58%, #d6e4e4 100%) !important;
}

html body div#abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-modal-card > .modal-header {
  background: linear-gradient(135deg, rgba(248, 253, 252, 0.99), rgba(219, 235, 234, 0.98)) !important;
  color: #17282d !important;
}

html body div#abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) #abandonedSessionModalTitle {
  color: #17282d !important;
  -webkit-text-fill-color: #17282d !important;
}

html body div#abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) .abandoned-session-recovery-summary small {
  color: #52686e !important;
  -webkit-text-fill-color: #52686e !important;
}

html body div#abandonedSessionModalBackdrop:is(.is-recovery, .is-recovery-confirmation) #abandonedSessionModalActions {
  background: linear-gradient(180deg, rgba(220, 238, 237, 0.94), rgba(202, 224, 224, 0.99)) !important;
  color: #203036 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > button {
  order: 0 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="resume"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="adjust"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="complete"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="schedule"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > button.abandoned-session-discard-button[data-abandoned-action="discard"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #9f3434 !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  order: 0 !important;
  -webkit-text-fill-color: #9f3434 !important;
}

@media (max-width: 560px) {
  html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="resume"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="adjust"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="complete"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > [data-abandoned-action="schedule"] {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html body div#abandonedSessionModalBackdrop.is-recovery #abandonedSessionModalActions > button.abandoned-session-discard-button[data-abandoned-action="discard"] {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }
}