/* Final theme, title and flash refinements */
html[data-theme-mode="light"] {
  color-scheme: light;
  --panel: #eeeeee;
  --panel-2: #ffffff;
  --panel-3: #d9d9d9;
  --text: #2b2b2b;
  --muted: #6f6f6f;
  --border: #2b2b2b;
  --control: #ffffff;
  --rhythm-rest: #ffffff;
  --beat-idle: #ffffff;
}

html[data-theme-mode="dark"] {
  color-scheme: dark;
  --panel: #1d1d1d;
  --panel-2: #101010;
  --panel-3: #2a2a2a;
  --text: #f2f2f2;
  --muted: #b8b8b8;
  --border: #f2f2f2;
  --control: #050505;
  --rhythm-rest: #101010;
  --beat-idle: #101010;
}

html[data-theme-mode] {
  --accent-soft: color-mix(in srgb, var(--accent) 78%, var(--panel-2));
  --rhythm-accent: var(--accent);
  --rhythm-secondary: color-mix(in srgb, var(--accent) 56%, var(--panel-2));
  --rhythm-light: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
}

.brand-row {
  min-height: clamp(64px, 6.4vw, 118px);
  align-items: center !important;
  overflow: visible !important;
}

.brand-row > div:first-child {
  overflow: visible !important;
}

h1 {
  line-height: 1.16 !important;
  padding-block: 0.04em 0.1em;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (min-width: 761px) {
  h1 {
    font-size: clamp(2.15rem, 3.35vw, 5.4rem) !important;
  }
}

@media (max-width: 760px) {
  .brand-row {
    min-height: 54px;
  }

  h1 {
    line-height: 1.18 !important;
    font-size: clamp(1.3rem, 5vw, 2rem) !important;
  }
}

.theme-panel,
.theme-panel-desktop,
.theme-panel-mobile {
  min-width: min(360px, calc(100vw - 32px));
  gap: 14px !important;
  padding: 14px !important;
}

.theme-group {
  padding-bottom: 12px !important;
  border-bottom: 3px solid var(--border) !important;
}

.theme-group:last-of-type {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.theme-group::before {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.theme-group[data-theme-key="themeAccent"]::before {
  content: "强调色";
}

.theme-group[data-theme-key="themeBg"]::before {
  content: "背景色";
}

.theme-swatches,
.theme-panel-desktop .theme-swatches,
.theme-panel-mobile .theme-swatches {
  grid-template-columns: repeat(6, 32px) !important;
  justify-content: start !important;
  gap: 8px !important;
}

.theme-swatches button,
.theme-panel-desktop .theme-swatches button,
.theme-panel-mobile .theme-swatches button {
  width: 32px !important;
  height: 32px !important;
}

.theme-reset,
.theme-panel-desktop .theme-reset,
.theme-panel-mobile .theme-reset {
  background: var(--accent-2) !important;
  color: #ffffff !important;
}

html[data-theme-mode="dark"] .theme-reset,
html[data-theme-mode="dark"] .theme-panel-desktop .theme-reset,
html[data-theme-mode="dark"] .theme-panel-mobile .theme-reset {
  color: #101010 !important;
}

.beat-stage {
  background: var(--panel) !important;
}

.beat-stage::before {
  color: color-mix(in srgb, var(--text) 16%, transparent) !important;
}

.beat-flash {
  background: var(--beat-idle) !important;
  border-color: var(--border) !important;
}

.beat-flash.pulse {
  animation: beat-flash-lift 180ms ease-out !important;
  background: color-mix(in srgb, var(--rhythm-light) 42%, var(--beat-idle)) !important;
  border-color: var(--border) !important;
  filter: brightness(1.16) saturate(1.08) !important;
}

.beat-flash.pulse.accent {
  background: color-mix(in srgb, var(--rhythm-accent) 56%, var(--beat-idle)) !important;
}

.beat-flash.pulse.secondary {
  background: color-mix(in srgb, var(--rhythm-secondary) 52%, var(--beat-idle)) !important;
}

.beat-flash.pulse.subdivision {
  background: color-mix(in srgb, var(--rhythm-light) 38%, var(--beat-idle)) !important;
}

.beat-flash.pulse.rest {
  background: color-mix(in srgb, var(--panel-3) 70%, var(--beat-idle)) !important;
  border-style: dashed !important;
}

@keyframes beat-flash-lift {
  0% {
    filter: brightness(1.28) saturate(1.16);
    opacity: 1;
  }
  100% {
    filter: brightness(1.02) saturate(1);
    opacity: 1;
  }
}

.beat-dot-cell.light,
.rhythm-cell.light {
  --cell-flash-color: var(--rhythm-light);
}

.beat-dot-cell.secondary,
.rhythm-cell.secondary {
  --cell-flash-color: var(--rhythm-secondary);
}

.beat-dot-cell.accent,
.rhythm-cell.accent {
  --cell-flash-color: var(--rhythm-accent);
}

.beat-dot-cell.rest,
.rhythm-cell.rest {
  --cell-flash-color: var(--panel-3);
}

.beat-dot-cell.active,
.rhythm-cell.playing {
  background: color-mix(in srgb, var(--cell-flash-color, var(--accent)) 86%, var(--panel-2)) !important;
  border-color: var(--border) !important;
  outline: 4px solid color-mix(in srgb, var(--cell-flash-color, var(--accent)) 74%, var(--text)) !important;
  outline-offset: -7px;
  filter: brightness(1.18) saturate(1.12) !important;
}

.rhythm-cell.playing.rest,
.beat-dot-cell.rest.active {
  background: color-mix(in srgb, var(--panel-3) 80%, var(--panel-2)) !important;
  border-style: dashed !important;
}

@media (max-width: 760px) {
  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-inline: 10px !important;
    overflow-x: hidden !important;
  }

  .tempo-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-row,
  .visualizer,
  .status-grid,
  .primary-actions,
  body[data-advanced-rhythm="true"] .rhythm-card-wrap,
  body[data-advanced-rhythm="true"] .rhythm-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tempo-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    gap: 8px !important;
  }

  .icon-button {
    width: 50px !important;
    min-width: 0 !important;
  }

  .tempo-readout,
  #bpmInput {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .slider,
  .range-field input {
    width: calc(100% - var(--slider-thumb-width)) !important;
    max-width: calc(100% - var(--slider-thumb-width)) !important;
    margin-inline: calc(var(--slider-thumb-width) / 2) !important;
  }

  .primary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .primary-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Final refinements for theme system and compact panel typography */
html[data-theme-mode="light"] {
  --panel: color-mix(in srgb, var(--bg) 84%, white);
  --panel-2: color-mix(in srgb, var(--bg) 62%, white);
  --panel-3: color-mix(in srgb, var(--bg) 82%, #8c8c8c);
  --control: color-mix(in srgb, var(--bg) 42%, white);
  --rhythm-rest: color-mix(in srgb, var(--bg) 54%, white);
  --beat-idle: color-mix(in srgb, var(--bg) 62%, white);
}

html[data-theme-mode="dark"] {
  --panel: color-mix(in srgb, var(--bg) 82%, white);
  --panel-2: color-mix(in srgb, var(--bg) 92%, black);
  --panel-3: color-mix(in srgb, var(--bg) 68%, white);
  --control: color-mix(in srgb, var(--bg) 88%, black);
  --rhythm-rest: color-mix(in srgb, var(--bg) 88%, black);
  --beat-idle: color-mix(in srgb, var(--bg) 90%, black);
}

h1,
h2,
.collapsible-label,
.rhythm-title,
.section-heading h2 {
  line-height: 1.22 !important;
  padding-block: 0.08em 0.12em !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

h2,
.section-heading h2 {
  font-size: clamp(1.3rem, 1.86vw, 2.8rem) !important;
}

.section-heading.compact,
.section-heading.rhythm-heading,
.collapsible-trigger {
  min-height: 52px;
  align-items: center !important;
  overflow: visible !important;
}

.section-heading.compact > div:first-child,
.section-heading.rhythm-heading > div:first-child {
  min-width: 0;
  overflow: visible !important;
}

.theme-panel,
.theme-panel-desktop,
.theme-panel-mobile {
  width: min(360px, calc(100vw - 28px)) !important;
  min-width: min(360px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--panel-2) !important;
}

.theme-group,
.theme-panel-desktop .theme-group,
.theme-panel-mobile .theme-group {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  padding: 0 10px 12px !important;
  border-bottom: 3px solid var(--border) !important;
}

.theme-group:last-of-type,
.theme-panel-desktop .theme-group:last-of-type,
.theme-panel-mobile .theme-group:last-of-type {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.theme-group::before {
  margin: 0 !important;
  min-height: 0;
  display: grid !important;
  align-items: center;
  font-size: 0.82rem !important;
  line-height: 1.16 !important;
}

.theme-swatches,
.theme-panel-desktop .theme-swatches,
.theme-panel-mobile .theme-swatches {
  display: grid !important;
  grid-template-columns: repeat(5, 32px) !important;
  gap: 8px !important;
  justify-content: start !important;
}

.theme-group[data-theme-key="themeBg"] .theme-swatches {
  grid-template-columns: repeat(6, 32px) !important;
}

.theme-swatches button,
.theme-panel-desktop .theme-swatches button,
.theme-panel-mobile .theme-swatches button {
  position: relative;
}

.theme-swatches button.active::after,
.theme-panel-desktop .theme-swatches button.active::after,
.theme-panel-mobile .theme-swatches button.active::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px solid var(--border);
  background: transparent;
  pointer-events: none;
}

.theme-reset,
.theme-panel-desktop .theme-reset,
.theme-panel-mobile .theme-reset {
  width: calc(100% - 20px);
  margin-inline: 10px;
  min-height: 38px;
}

.settings-card .controls,
.practice-card .practice-grid {
  grid-auto-rows: minmax(51px, 1fr) !important;
  align-items: stretch !important;
  gap: 4px !important;
}

.settings-card .field,
.settings-card .switch,
.practice-card .field,
.practice-card .practice-reset {
  min-height: 51px !important;
  padding: 5px 8px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
}

.settings-card .field,
.practice-card .field {
  grid-template-rows: auto minmax(24px, 1fr);
}

.settings-card .switch,
.practice-card .practice-reset {
  grid-template-rows: none;
}

.field span,
.switch span,
.practice-enable span {
  line-height: 1.18 !important;
  padding-block: 0.05em;
  overflow: visible !important;
}

.practice-card .practice-reset {
  align-items: center !important;
  justify-items: center !important;
}

.practice-modes {
  gap: 5px !important;
}

.practice-modes button,
.tempo-presets button {
  min-height: 26px !important;
  padding-block: 3px !important;
}

.practice-card .section-heading.compact {
  min-height: 42px !important;
  margin-bottom: 2px !important;
}

.practice-options {
  gap: 5px !important;
}

@media (max-width: 760px) {
  h2,
  .section-heading h2,
  .collapsible-label {
    font-size: clamp(1.02rem, 4vw, 1.35rem) !important;
    line-height: 1.24 !important;
  }

  .section-heading.compact,
  .section-heading.rhythm-heading,
  .collapsible-trigger {
    min-height: 50px;
  }

  .theme-panel,
  .theme-panel-desktop,
  .theme-panel-mobile {
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }

  .theme-group,
  .theme-panel-mobile .theme-group {
    grid-template-columns: 1fr;
  }

  .theme-swatches,
  .theme-panel-mobile .theme-swatches,
  .theme-group[data-theme-key="themeBg"] .theme-swatches {
    grid-template-columns: repeat(5, 30px) !important;
    gap: 7px !important;
  }

  .theme-swatches button,
  .theme-panel-mobile .theme-swatches button {
    width: 30px !important;
    height: 30px !important;
  }

  .settings-card .field,
  .settings-card .switch,
  .practice-card .field,
  .practice-card .practice-reset {
    min-height: 52px !important;
  }
}

/* Final brutalist layout consolidation */
:root {
  --ui-border: 3px;
  --ui-gap: clamp(8px, 0.75vw, 14px);
  --ui-pad: clamp(8px, 0.85vw, 14px);
  --panel-title-size: clamp(1.45rem, 1.9vw, 2.35rem);
  --control-text-size: clamp(0.72rem, 0.72vw, 0.92rem);
  --compact-button-height: clamp(28px, 3.6vh, 38px);
  --side-field-min: clamp(38px, 5.1vh, 54px);
}

html,
body {
  margin: 0;
  max-width: 100%;
  background: var(--bg) !important;
}

*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

.panel,
.theme-panel,
.theme-panel-desktop,
.theme-panel-mobile,
.tempo-card,
.settings-card,
.practice-card,
.rhythm-card-wrap,
.beat-stage,
.beat-flash,
.signature-field,
.status-grid div,
.field,
.switch,
.practice-enable,
.rhythm-enable,
.collapsible-trigger,
.custom-select-menu,
.advanced-rhythm-toggle,
.theme-toggle,
.theme-toggle-desktop,
.theme-toggle-mobile,
.icon-button,
.tap-button,
.timer-reset,
.start-button,
.practice-modes button,
.tempo-presets button,
.practice-reset,
.rhythm-reset,
.rhythm-split-button,
.custom-select-button,
.panel-close {
  border-radius: 0 !important;
}

.app {
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  background: var(--bg) !important;
}

h1,
h2,
.collapsible-label,
.section-heading h2 {
  line-height: 1.08 !important;
  padding-block: 0.14em 0.12em !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.beat-stage::before {
  content: none !important;
  display: none !important;
}

.section-heading.compact,
.section-heading.rhythm-heading {
  min-height: auto !important;
  margin-bottom: clamp(2px, 0.45vh, 6px) !important;
}

.settings-card .controls,
.practice-card .practice-grid {
  gap: clamp(4px, 0.55vh, 7px) !important;
}

.settings-card .field,
.settings-card .switch,
.practice-card .field,
.practice-card .practice-reset {
  min-height: var(--side-field-min) !important;
  padding: clamp(4px, 0.48vw, 8px) !important;
  align-content: center !important;
}

.field span,
.switch span,
.practice-enable span,
.custom-select-button,
.field select,
.practice-modes button,
.tempo-presets button,
.practice-reset,
.rhythm-reset,
.rhythm-legend span {
  font-size: var(--control-text-size) !important;
  line-height: 1.12 !important;
}

.custom-select-button,
.field select,
.field input[type="number"] {
  min-height: var(--compact-button-height) !important;
  padding-block: 3px !important;
}

.practice-modes button,
.tempo-presets button,
.rhythm-reset,
.practice-reset {
  min-height: var(--compact-button-height) !important;
}

.slider,
.range-field input {
  --slider-track-height: 24px;
  --slider-thumb-width: 24px;
  --slider-thumb-height: 34px;
}

@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html,
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
  }

  .app {
    height: 100vh;
    overflow: hidden !important;
    padding: var(--ui-gap);
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(440px, 1.46fr) minmax(320px, 0.98fr);
    grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr);
    grid-template-areas:
      "rhythm tempo settings"
      "rhythm tempo practice";
    gap: var(--ui-gap);
  }

  .rhythm-card-wrap,
  body:not([data-advanced-rhythm="true"]) .rhythm-card-wrap,
  body[data-advanced-rhythm="true"] .rhythm-card-wrap {
    display: grid !important;
    grid-area: rhythm !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-advanced-rhythm="true"] .visualizer {
    display: grid !important;
  }

  .tempo-card,
  .settings-card,
  .practice-card,
  .rhythm-card-wrap {
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
    padding: var(--ui-pad) !important;
  }

  .tempo-card {
    display: grid !important;
    grid-template-rows: auto minmax(126px, 0.32fr) auto minmax(140px, 1fr) auto auto;
    gap: clamp(4px, 0.6vh, 8px) !important;
  }

  body[data-advanced-rhythm="true"] .tempo-card {
    grid-template-rows: auto minmax(116px, 0.24fr) auto minmax(150px, 1fr) auto auto;
  }

  .brand-row {
    min-height: clamp(54px, 7vh, 76px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(8px, 0.8vw, 12px) !important;
  }

  .brand-actions {
    min-width: 0 !important;
  }

  .advanced-rhythm-toggle {
    display: none !important;
  }

  h1 {
    font-size: clamp(2.15rem, 3.15vw, 4.25rem) !important;
  }

  h2,
  .section-heading h2 {
    font-size: var(--panel-title-size) !important;
  }

  .tempo-panel {
    min-height: 0 !important;
    grid-template-columns: clamp(54px, 4.2vw, 78px) minmax(0, 1fr) clamp(54px, 4.2vw, 78px) !important;
    gap: clamp(6px, 0.7vw, 10px) !important;
  }

  #bpmInput {
    font-size: clamp(4.7rem, 7.2vw, 8.1rem) !important;
    line-height: 0.82 !important;
  }

  .beat-stage {
    min-height: 0 !important;
    height: 100% !important;
  }

  .beat-count {
    font-size: clamp(5.5rem, 8vw, 10rem) !important;
  }

  .status-grid div {
    min-height: clamp(46px, 6vh, 62px) !important;
  }

  .primary-actions button {
    min-height: clamp(38px, 5.5vh, 52px) !important;
  }

  .settings-card {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .practice-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .practice-card .section-heading.compact {
    min-height: 0 !important;
  }

  .settings-card .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    min-height: 0;
  }

  .practice-options {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    gap: clamp(3px, 0.5vh, 5px) !important;
  }

  .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: clamp(3px, 0.5vh, 5px) !important;
    min-height: 0;
  }

  .practice-modes {
    gap: clamp(4px, 0.45vw, 6px) !important;
  }

  .practice-modes button {
    min-height: clamp(24px, 3.1vh, 32px) !important;
    padding-block: 2px !important;
  }

  .practice-card .field,
  .practice-card .practice-reset {
    min-height: clamp(31px, 4.0vh, 42px) !important;
    height: 100% !important;
    padding-block: 2px !important;
    overflow: hidden !important;
  }

  .practice-card .range-field {
    gap: 2px !important;
  }

  .practice-card .field span,
  .practice-card .field strong {
    font-size: clamp(0.6rem, 0.58vw, 0.76rem) !important;
    line-height: 1.05 !important;
  }

  .practice-card .range-field input[type="range"] {
    --slider-track-height: 16px;
    --slider-thumb-width: 18px;
    --slider-thumb-height: 26px;
    max-height: 22px !important;
  }

  .rhythm-card-wrap {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(6px, 0.7vh, 10px) !important;
  }

  .rhythm-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(5px, 0.55vw, 8px) !important;
  }

  .rhythm-heading h2 {
    font-size: clamp(1.55rem, 2.1vw, 2.45rem) !important;
    line-height: 1 !important;
  }

  .rhythm-tools {
    align-items: center !important;
    justify-content: end !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .rhythm-legend {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, auto)) !important;
    gap: 3px 5px !important;
  }

  .rhythm-legend span {
    min-height: 20px !important;
    padding: 2px 4px !important;
    border: 2px solid var(--border) !important;
    background: var(--panel-2) !important;
    white-space: nowrap !important;
  }

  .rhythm-reset {
    min-width: 50px !important;
    max-width: 62px !important;
    padding-inline: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .rhythm-grid {
    grid-template-columns: repeat(var(--beat-count, 4), minmax(0, 1fr)) !important;
    overflow: hidden !important;
    gap: clamp(4px, 0.45vw, 7px) !important;
  }

  .rhythm-beat-bar {
    min-width: 0 !important;
    grid-template-rows: clamp(20px, 2.8vh, 28px) minmax(0, 1fr) clamp(20px, 2.8vh, 28px) !important;
  }

  .rhythm-cell {
    min-height: 28px !important;
  }

  .rhythm-cells {
    gap: clamp(3px, 0.45vw, 6px) !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html,
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
  }

  .app {
    height: 100vh;
    overflow: hidden !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.28fr) minmax(0, 0.72fr);
    grid-template-areas:
      "tempo tempo"
      "settings practice";
    gap: 10px !important;
  }

  .tempo-card,
  .settings-card,
  .practice-card,
  .rhythm-card-wrap {
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .rhythm-card-wrap {
    display: none !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-card-wrap {
    display: grid !important;
    border: var(--ui-border) solid var(--border) !important;
    max-height: 26vh;
  }

  .tempo-card {
    display: grid !important;
    grid-template-rows: auto minmax(124px, 0.24fr) auto minmax(164px, 0.9fr) auto auto;
    gap: 7px !important;
  }

  .brand-row {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: start !important;
  }

  .advanced-rhythm-toggle {
    display: inline-flex !important;
    position: static !important;
    align-self: start !important;
    max-width: 140px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    white-space: normal !important;
  }

  h1 {
    font-size: clamp(2.1rem, 5vw, 3.6rem) !important;
  }

  .settings-card .controls,
  .practice-card .practice-grid {
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .rhythm-grid {
    overflow: hidden !important;
    grid-template-columns: repeat(var(--beat-count, 4), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body:not([data-advanced-rhythm="true"]) .rhythm-card-wrap {
    display: none !important;
  }

  .tempo-card,
  .settings-card,
  .practice-card,
  .collapsible-trigger {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tempo-card {
    padding-inline: 14px !important;
  }

  .advanced-rhythm-toggle {
    position: static !important;
    width: auto !important;
    max-width: 128px !important;
    min-height: 38px !important;
    white-space: normal !important;
  }

  .theme-toggle-mobile {
    display: none !important;
  }

  .brand-row,
  .visualizer,
  .beat-stage,
  .bar-timeline,
  .status-grid,
  .primary-actions,
  body[data-advanced-rhythm="true"] .rhythm-card-wrap,
  body[data-advanced-rhythm="true"] .rhythm-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tempo-panel {
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    min-width: 0 !important;
  }

  .slider {
    box-sizing: border-box !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .tempo-readout {
    min-width: 0 !important;
  }

  #bpmInput {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .primary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .primary-actions button {
    min-width: 0 !important;
    padding-inline: 6px !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-card-wrap {
    overflow: hidden !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-grid {
    grid-template-columns: repeat(var(--beat-count, 4), minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-beat-bar {
    min-width: 0 !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-tools,
  body[data-advanced-rhythm="true"] .rhythm-help-icon {
    overflow: hidden !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-help-icon::after {
    content: none !important;
    display: none !important;
  }
}

/* Goal layout pass: preserve the existing brutalist style while tightening the
   control grids and restoring the mobile theme entry point. */
.theme-panel,
.theme-panel-desktop,
.theme-panel-mobile {
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 20px) !important;
  padding: 12px !important;
  gap: 10px !important;
}

.theme-group,
.theme-panel-desktop .theme-group,
.theme-panel-mobile .theme-group {
  padding-inline: 0 !important;
}

.theme-swatches,
.theme-panel-desktop .theme-swatches,
.theme-panel-mobile .theme-swatches,
.theme-group[data-theme-key="themeBg"] .theme-swatches {
  grid-template-columns: repeat(3, 34px) !important;
  gap: 8px !important;
  justify-content: start !important;
}

.theme-swatches button,
.theme-panel-desktop .theme-swatches button,
.theme-panel-mobile .theme-swatches button {
  width: 34px !important;
  height: 34px !important;
}

.theme-reset,
.theme-panel-desktop .theme-reset,
.theme-panel-mobile .theme-reset {
  width: 100% !important;
  margin-inline: 0 !important;
}

.settings-card .controls {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
}

.settings-card .field,
.settings-card .switch {
  min-height: var(--side-field-min) !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  .brand-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 74px) minmax(0, 74px) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .brand-actions {
    display: none !important;
  }

  .theme-toggle-mobile,
  .advanced-rhythm-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 7px !important;
    font-size: clamp(0.68rem, 3.1vw, 0.82rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .theme-panel-mobile {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
  }

  .theme-panel-mobile .theme-swatches,
  .theme-panel-mobile .theme-group[data-theme-key="themeBg"] .theme-swatches {
    grid-template-columns: repeat(3, 32px) !important;
    gap: 7px !important;
  }

  .theme-panel-mobile .theme-swatches button {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Equal-size cells for the settings and practice option grids. */
:root {
  --settings-cell-min: clamp(58px, 8.6vh, 106px);
  --practice-cell-min: clamp(44px, 6.1vh, 62px);
}

.settings-card .controls,
.practice-card .practice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  grid-auto-flow: row !important;
}

.settings-card .controls {
  grid-template-rows: repeat(3, minmax(var(--settings-cell-min), 1fr)) !important;
  grid-auto-rows: minmax(var(--settings-cell-min), 1fr) !important;
}

.practice-card .practice-grid {
  grid-template-rows: repeat(5, minmax(var(--practice-cell-min), 1fr)) !important;
  grid-auto-rows: minmax(var(--practice-cell-min), 1fr) !important;
}

.settings-card .controls > *,
.practice-card .practice-grid > * {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.settings-card .field,
.settings-card .switch,
.practice-card .field,
.practice-card .practice-reset {
  align-self: stretch !important;
}

@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  .settings-card .controls {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .practice-card .practice-grid {
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  .settings-card .controls {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .practice-card .practice-grid {
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .settings-card.expanded .controls {
    grid-template-rows: repeat(3, minmax(var(--settings-cell-min), 1fr)) !important;
  }

  .practice-card.expanded .practice-grid {
    grid-template-rows: repeat(5, minmax(var(--practice-cell-min), 1fr)) !important;
  }
}

/* Cross-panel equal cells: settings and practice use the same cell size. */
:root {
  --option-cell-height: clamp(54px, 6.5vh, 59px);
}

.settings-card .controls,
.practice-card .practice-grid,
.settings-card.expanded .controls,
.practice-card.expanded .practice-grid {
  align-content: start !important;
}

.settings-card .controls {
  grid-template-rows: repeat(3, var(--option-cell-height)) !important;
  grid-auto-rows: var(--option-cell-height) !important;
}

.practice-card .practice-grid {
  grid-template-rows: repeat(5, var(--option-cell-height)) !important;
  grid-auto-rows: var(--option-cell-height) !important;
}

.settings-card .controls > *,
.practice-card .practice-grid > * {
  height: var(--option-cell-height) !important;
  min-height: var(--option-cell-height) !important;
  max-height: var(--option-cell-height) !important;
}

@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  :root {
    --option-cell-height: clamp(56px, 6.55vh, 59px);
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  :root {
    --option-cell-height: 53px;
  }
}

@media (max-width: 760px) {
  :root {
    --option-cell-height: clamp(54px, 7vh, 59px);
  }
}

/* Final layout repair: fill the right panels and keep rhythm labels stable. */
.rhythm-heading,
.section-heading.rhythm-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title enable"
    "tools tools" !important;
  align-items: start !important;
  gap: 6px 8px !important;
}

.rhythm-heading > div:first-child {
  grid-area: title !important;
  min-width: 0 !important;
}

.rhythm-heading .rhythm-enable {
  grid-area: enable !important;
  justify-self: end !important;
  align-self: start !important;
}

.rhythm-heading .rhythm-tools,
.rhythm-tools {
  grid-area: tools !important;
  display: grid !important;
  grid-template-columns: max-content 18px max-content !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.rhythm-legend {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  grid-auto-rows: 18px !important;
  gap: 3px 4px !important;
  align-items: center !important;
  justify-content: start !important;
  min-width: 0 !important;
}

.rhythm-legend span {
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 1px 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.rhythm-help-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  align-self: center !important;
  justify-self: center !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.rhythm-reset {
  box-sizing: border-box !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.settings-card .controls,
.practice-card .practice-grid {
  align-content: stretch !important;
}

.settings-card .controls > *,
.practice-card .practice-grid > * {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  .app {
    grid-template-rows: minmax(0, 0.41fr) minmax(0, 0.59fr) !important;
  }

  .settings-card {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: clamp(4px, 0.5vh, 6px) !important;
  }

  .practice-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(4px, 0.5vh, 6px) !important;
  }

  .settings-card .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .practice-options {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .practice-card .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .settings-card .field,
  .settings-card .switch,
  .practice-card .field,
  .practice-card .practice-reset {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  .settings-card .controls {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    height: 100% !important;
  }

  .practice-card .practice-grid {
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    height: 100% !important;
  }
}

@media (max-width: 760px) {
  .settings-card.expanded .controls,
  .practice-card.expanded .practice-grid {
    align-content: stretch !important;
  }

  .settings-card.expanded .controls {
    grid-template-rows: repeat(3, minmax(62px, 1fr)) !important;
    grid-auto-rows: minmax(62px, 1fr) !important;
  }

  .practice-card.expanded .practice-grid {
    grid-template-rows: repeat(5, minmax(56px, 1fr)) !important;
    grid-auto-rows: minmax(56px, 1fr) !important;
  }

  .rhythm-heading .rhythm-tools,
  .rhythm-tools {
    grid-template-columns: max-content 18px max-content !important;
  }
}

/* Latest correction: rhythm legend markers must stay on one line. */
.rhythm-heading .rhythm-tools,
.rhythm-tools {
  grid-template-columns: max-content 18px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 4px !important;
  row-gap: 0 !important;
}

.rhythm-reset {
  justify-self: end !important;
}

.rhythm-legend {
  display: grid !important;
  grid-template-columns: repeat(4, 40px) !important;
  grid-template-rows: 18px !important;
  grid-auto-flow: column !important;
  grid-auto-rows: 18px !important;
  gap: 0 4px !important;
  width: max-content !important;
  height: 18px !important;
  overflow: visible !important;
}

.rhythm-legend span {
  width: 40px !important;
  min-width: 40px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  white-space: nowrap !important;
}

/* Mobile top actions: equal height, single-line labels. */
@media (max-width: 760px) {
  .brand-row {
    grid-template-columns: minmax(0, 1fr) 92px 74px !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .advanced-rhythm-toggle,
  .theme-toggle-mobile {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 6px 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(0.68rem, 2.75vw, 0.78rem) !important;
    line-height: 1 !important;
  }

  .advanced-rhythm-toggle {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  .theme-toggle-mobile {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

/* Final visual-density pass: unified typography and centered sliders. */
:root {
  --ui-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  --control-text-size: clamp(0.86rem, 0.86vw, 1.12rem);
  --panel-title-size: clamp(1.75rem, 2.18vw, 2.8rem);
  --slider-track-height: clamp(22px, 1.28vw, 28px);
  --slider-thumb-width: clamp(24px, 1.35vw, 30px);
  --slider-thumb-height: clamp(34px, 1.85vw, 42px);
}

body,
button,
input,
select,
textarea,
.app,
.panel,
.field,
.switch,
.custom-select,
.practice-modes,
.tempo-presets,
.rhythm-card-wrap {
  font-family: var(--ui-font) !important;
}

.field span,
.switch span,
.practice-enable span,
.rhythm-enable span,
.custom-select-button,
.field select,
.field input[type="number"],
.practice-modes button,
.tempo-presets button,
.practice-reset,
.rhythm-reset,
.rhythm-legend span {
  font-family: var(--ui-font) !important;
  font-size: var(--control-text-size) !important;
  line-height: 1.14 !important;
  font-weight: 800 !important;
}

.field strong,
.practice-card .field strong,
.status-grid strong {
  font-family: var(--ui-font) !important;
}

.settings-card .field,
.settings-card .switch,
.practice-card .field,
.practice-card .practice-reset {
  padding: clamp(7px, 0.62vw, 12px) clamp(8px, 0.75vw, 14px) !important;
}

.range-field {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
}

.slider,
.range-field input[type="range"],
.practice-card .range-field input[type="range"],
.settings-card .range-field input[type="range"] {
  --slider-track-height: clamp(22px, 1.28vw, 28px);
  --slider-thumb-width: clamp(24px, 1.35vw, 30px);
  --slider-thumb-height: clamp(34px, 1.85vw, 42px);
  box-sizing: border-box !important;
  height: var(--slider-track-height) !important;
  min-height: var(--slider-track-height) !important;
  max-height: var(--slider-track-height) !important;
  align-self: center !important;
  justify-self: center !important;
  margin-block: 0 !important;
}

.range-field input[type="range"] {
  grid-row: 2 !important;
}

.slider::-webkit-slider-thumb,
.range-field input[type="range"]::-webkit-slider-thumb {
  width: var(--slider-thumb-width) !important;
  height: var(--slider-thumb-height) !important;
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb-height)) / 2 - 3px) !important;
}

.slider::-moz-range-thumb,
.range-field input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-width) !important;
  height: var(--slider-thumb-height) !important;
}

@media (min-width: 1800px) {
  :root {
    --ui-gap: clamp(12px, 0.8vw, 18px);
    --ui-pad: clamp(14px, 0.95vw, 20px);
    --control-text-size: clamp(1rem, 0.92vw, 1.22rem);
    --panel-title-size: clamp(2.35rem, 2.25vw, 3.15rem);
    --compact-button-height: clamp(34px, 2.4vw, 46px);
  }

  .settings-card .field,
  .settings-card .switch,
  .practice-card .field,
  .practice-card .practice-reset {
    padding: clamp(10px, 0.68vw, 14px) clamp(12px, 0.82vw, 16px) !important;
  }

  .practice-card .field span,
  .practice-card .field strong {
    font-size: var(--control-text-size) !important;
    line-height: 1.12 !important;
  }

  .practice-modes button,
  .tempo-presets button {
    font-size: clamp(0.9rem, 0.74vw, 1.08rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --control-text-size: clamp(0.82rem, 3.45vw, 0.98rem);
    --slider-track-height: 20px;
    --slider-thumb-width: 24px;
    --slider-thumb-height: 34px;
  }

  .field span,
  .switch span,
  .custom-select-button,
  .field select,
  .practice-modes button,
  .tempo-presets button,
  .practice-reset {
    font-size: var(--control-text-size) !important;
  }

  .slider,
  .range-field input[type="range"],
  .practice-card .range-field input[type="range"],
  .settings-card .range-field input[type="range"] {
    --slider-track-height: 20px;
    --slider-thumb-width: 24px;
    --slider-thumb-height: 34px;
  }
}

/* Final visual QA correction: rhythm labels. */
.slider,
.range-field input[type="range"],
.practice-card .range-field input[type="range"],
.settings-card .range-field input[type="range"] {
  height: var(--slider-track-height) !important;
  min-height: var(--slider-track-height) !important;
  max-height: var(--slider-track-height) !important;
}

.range-field {
  grid-template-rows: auto minmax(var(--slider-thumb-height), 1fr) !important;
}

.rhythm-heading .rhythm-tools,
.rhythm-tools {
  grid-template-columns: max-content 18px minmax(72px, 1fr) !important;
}

.rhythm-legend {
  grid-template-columns: repeat(4, 42px) !important;
  grid-template-rows: 22px !important;
  grid-auto-rows: 22px !important;
  gap: 0 4px !important;
  height: 22px !important;
}

.rhythm-legend span {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.7rem, 0.58vw, 0.86rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.rhythm-help-icon {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.rhythm-reset {
  box-sizing: border-box !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.65rem, 0.55vw, 0.8rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .rhythm-heading .rhythm-tools,
  .rhythm-tools {
    grid-template-columns: max-content 18px minmax(68px, 1fr) !important;
  }

  .rhythm-legend {
    grid-template-columns: repeat(4, 39px) !important;
    grid-template-rows: 21px !important;
    grid-auto-rows: 21px !important;
    height: 21px !important;
    gap: 0 3px !important;
  }

  .rhythm-legend span {
    width: 39px !important;
    min-width: 39px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    font-size: clamp(0.64rem, 2.5vw, 0.74rem) !important;
  }

  .rhythm-reset {
    width: 68px !important;
    min-width: 68px !important;
    height: 25px !important;
    min-height: 25px !important;
    font-size: clamp(0.62rem, 2.35vw, 0.72rem) !important;
  }
}

/* Keep beat flash colors identical to the rhythm legend colors. */
.beat-flash.pulse,
.beat-flash.pulse.subdivision {
  background: var(--rhythm-light) !important;
  border-color: var(--rhythm-light) !important;
}

.beat-flash.pulse.accent {
  background: var(--rhythm-accent) !important;
  border-color: var(--rhythm-accent) !important;
}

.beat-flash.pulse.secondary {
  background: var(--rhythm-secondary) !important;
  border-color: var(--rhythm-secondary) !important;
}