@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap");

html {
  overflow-x: hidden; /* Prevent horizontal scrolling for the entire page */
}

:root {
  --Main: #00b430; /* Pistachio Green */
  --Background: #e3ffe8; /* Light Green */
  --Accent: #ffe0b2; /* Pale Orange/Peach */
  --Highlight: #a0faa0; /* Light Green */
  --HighlightedBeatColor: #ffc471; /* Light Orange */
  --Alt1: #4682b4; /* Steel Blue */
  --Alt2: #dc143c; /* Crimson Red */
  --TextOnMain: #000000; /* Black */
  --TextPrimary: #333333; /* Dark Gray */
  --TextSecondary: #555555; /* Medium Gray */
  --SubdivisionBeatColor: rgba(14, 75, 0, 0.85); /* Dark Green */
  --ActiveBarBackground: rgb(255, 217, 248); /* Light Pink */
  --BorderColor: transparent; /* Set to transparent for flat look */
  --BorderRadius: 20px; /* Slightly rounded */
  --font-family: "Inter", sans-serif;
  --text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

  /* New Font Sizes */
  --font-1: 0.8rem; /* Smallest */
  --font-2: 1rem; /* Default/Medium */
  --font-3: 1.3rem; /* Large */
  --font-4: 1.6rem; /* Extra Large */

  /* New Spacing Units (Golden Ratio Inspired Scale) */
  --space-unit: 8px;
  --s0: 1px; /* 1px */
  --s1: calc(var(--space-unit) * 0.25); /* 2px */
  --s2: calc(var(--space-unit) * 0.5); /* 4px */
  --s3: var(--space-unit); /* 8px */
  --s4: calc(var(--space-unit) * 1.5); /* 12px */
  --s5: calc(var(--space-unit) * 2.5); /* 20px */
  --s6: calc(var(--space-unit) * 4); /* 32px */
  --s6-5: calc(var(--space-unit) * 5); /* 40px */
  --s7: calc(var(--space-unit) * 6); /* 48px */
  --s8: calc(var(--space-unit) * 8); /* 64px */
  --s8-5: calc(var(--space-unit) * 7.5); /* 60px */
  --s9: calc(var(--space-unit) * 10); /* 80px */
  --s10: calc(var(--space-unit) * 12); /* 96px */
  --s11: calc(var(--space-unit) * 14); /* 112px */
  --s13: calc(var(--space-unit) * 18); /* 144px */
  --s14: calc(var(--space-unit) * 20); /* 160px */
  --s15: calc(var(--space-unit) * 22); /* 176px */
}

body {
  overflow-x: hidden; /* Further ensure body content doesn't cause horizontal scroll */
  background-color: var(--Background);
  font-family: var(
    --font-family,
    "Inter",
    sans-serif
  ); /* Use theme font, fallback to Inter */
  font-size: var(--font-3); /* Standardized base font size */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to start to respect padding-top */
  min-height: 100vh; /* Ensure body takes at least full viewport height */
  width: 100%; /* Make body take full width */
  margin: 0; /* Remove auto margins for centering */
  /* Standardized padding: top, horizontal, bottom, horizontal */
  padding: var(--s8) var(--s4) var(--s5) var(--s4); /* 64px 12px 20px 12px */
  box-sizing: border-box; /* Include padding in the 100% width */
  user-select: none; /* Keep user-select none */
  color: var(--TextPrimary);
}
body * {
  transition: all 0.3s ease-in-out;
  text-shadow: var(--text-shadow);
}

.main-container {
  width: 100%;
  margin: auto;
}

.metronome-container {
  background-color: rgba(255, 255, 255, 0);
  width: 99%;
  height: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  /* Corrected and softened shadow */
  box-shadow: 0 var(--s3) var(--s5) rgba(0, 0, 0, 0.08); /* 0 8px 20px */
  padding: var(--s6) 0; /* Standardized padding (32px 0) */
  border-radius: var(--BorderRadius);
}

.tempo-container,
.measures-container,
.bar-settings-container {
  padding: var(--s3); /* Standardized padding (8px) */
  background: rgba(255, 255, 255, 0); /* White card background */
  text-align: center;
  width: 100%; /* Common width */
  align-self: center;
  border-radius: var(--BorderRadius);
}

.tempo-container {
  font-size: var(--font-3); /* Standardized font size */
  width: 100%;
}

.tempo-text {
  font-weight: lighter;
  color: var(--TextSecondary);
  font-size: var(--font-1); /* Standardized font size */
}

.tempo-text-box.updating .tempo-text {
  animation: fadeOutIn 0.5s ease-in-out;
}

@keyframes fadeOutIn {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  49% {
    opacity: 0;
    transform: translateY(-var(--s2));
  } /* -4px */
  50% {
    opacity: 0;
    transform: translateY(var(--s2));
  } /* New text starts from slightly below (4px) */
  51% {
    opacity: 0;
    transform: translateY(var(--s2));
  } /* Hold invisible briefly (4px) */
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tempo-settings {
  margin: var(--s3); /* Standardized margin (8px) */
}

.tempo-slider {
  width: auto;
  padding: 0 var(--s4); /* Standardized padding (0 12px) */
}

.slider {
  width: 100%;
}

input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]:focus {
  /* outline: none; */ /* Avoid removing outline without a replacement */
  outline: 2px solid var(--Main); /* Example: Use a theme color for focus */
  outline-offset: 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--s6); /* Standardized width (20px) */
  height: var(--s6); /* Standardized height (20px) */
  border-radius: 50%;
  background: var(--Accent);
  box-shadow: var(--text-shadow);
  margin-top: calc(var(--s4) * -1); /* Standardized margin (-12px) */
}

input[type="range"]::-webkit-slider-container {
  background: var(--Background);
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--Alt1);
  width: 100%;
  height: var(--s1); /* Standardized height (2px) */
}

.tempo-settings,
.beat-settings,
.bar-settings {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.beat-settings,
.bar-settings {
  background: var(
    --Accent
  ); /* Was white, now yellow-green for contrast with blue outline */
  width: 90%;
  padding: var(--s3); /* Standardized padding (8px) */
  margin: var(--s2) 0; /* Standardized margin (4px 0) */
  border-radius: var(--BorderRadius);
}

.start-stop-btn {
  height: var(--s13); /* Standardized height (144px) */
  width: var(--s13); /* Standardized width (144px) */
  padding: var(--s2); /* Standardized padding (4px) */
  margin: var(--s2); /* Standardized margin (4px) */
  display: flex; /* Added for consistent centering with other buttons */
  align-items: center; /* Added for consistent centering */
  justify-content: center; /* Added for consistent centering */
  text-align: center;
  line-height: 5; /* Unitless line-height is fine */
}
.start-stop-btn.active {
  background-color: var(--Alt2); /* A more active/warning color */
  color: var(--TextOnMain);
  box-shadow: var(--Main) 0px 0px 15px, inset var(--Alt1) 0px 0pxvar (--s5);
}

.measure-settings-container,
.bar-settings-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s2); /* Standardized padding (8px) */
}

.measures-container {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform-origin: top center;
  display: flex;
}

.measures-container.moving {
  opacity: 0;
  transform: translateY(-20px);
}

.measures-container.slide-down {
  animation: slideDown 0.5s ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#add-track-btn,
.track-mute-btn,
.track-solo-btn,
.track-remove-btn,
.adjust-tempo,
.adjust-bar-length,
.adjust-measure-length,
.start-stop-btn {
  border-radius: var(--BorderRadius);
  background: var(--Highlight);
  border: none;
  margin: var(--s2) auto;
  width: clamp(60px, 23%, 30%);
  height: clamp(10%, 100px, 25%);
  padding: var(--s5) 0;
  display: flex; /* For centering content */
  flex-flow: row nowrap;
  align-items: center; /* For centering content */
  justify-content: center; /* For centering content */
  cursor: pointer;
  transition: all 0.2s ease-out; /* Quicker, smoother, and includes border-radius */
}
.start-stop-btn,
.adjust-tempo {
  font-size: xx-large; /* Standardized font size */
}

.adjust-tempo:hover,
.adjust-bar-length:hover,
.adjust-measure-length:hover,
.start-stop-btn:hover {
  background: var(--Alt1); /* Was dodgerblue, now purple */
  color: var(--TextOnMain);
  transform: translateY(calc(var(--s1) * -1)); /* -2px */
  box-shadow: 0 var(--s2) var(--s3) rgba(0, 0, 0, 0.2); /* 0 4px 8px */
}

.adjust-tempo:active,
.adjust-bar-length:active,
.adjust-measure-length:active,
.start-stop-btn:active {
  transform: translateY(var(--s0)); /* 1px */
  box-shadow: 0 var(--s1) var(--s2) rgba(0, 0, 0, 0.15); /* 0 2px 4px */
  background-color: var(--Main); /* Slightly different active color */
  color: var(--TextOnMain);
}
.tap-tempo-btn.tapped {
  background-color: var(--Accent); /* Feedback color */
  /* Use a transform that doesn't conflict too much with :active */
  transform: scale(0.96) translateY(0px);
  box-shadow: 0 var(--s0) var(--s1) rgba(0, 0, 0, 0.1); /* 0 1px 2px */
}

.adjust-tempo {
  height: var(--s9); /* Standardized height (80px) */
  width: var(--s9); /* Standardized width (80px) */
  margin: auto;
  padding: var(--s3); /* Standardized padding (8px) */
}

.adjust-measure-length,
.adjust-bar-length {
  height: var(--s7); /* Standardized height (48px) */
  width: var(--s7); /* Standardized width (48px) */
  margin: auto;
  padding: 0px; /* Corrected: only one padding value needed */
}

.bar-display {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
select {
  height: var(--s7); /* Standardized height (48px) */
  width: var(--s7); /* Standardized width (48px) */
  outline-color: transparent; /* Changed from var(--Accent) */
  border: var(--s0) solid transparent; /* Standardized border (1px) */
  background-color: var(--Highlight);
  color: var(--TextPrimary);
  border-radius: var(--BorderRadius);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
select:hover {
  background-color: var(--Accent);
  border-color: transparent; /* Changed from var(--Alt1) */
}

/* Note: Styling option elements is very limited and browser-dependent */
option {
  background-color: var(--Highlight); /* May not apply in all browsers */
  border-color: transparent;
}

button {
  color: var(--TextOnMain);
}

.bar-display-container {
  background: var(--Background);
  outline: var(--BorderColor) var(--s0) solid; /* Standardized outline (1px) */
  border-radius: calc(var(--BorderRadius) / 25);
  width: 100%;
  height: auto;
  padding: var(--s2); /* Standardized padding (4px) */
  align-items: center;
  justify-content: space-around;
  display: flex; /* Allows bars to sit side-by-side */
  flex-wrap: wrap; /* Allows bars to wrap to next line if not enough space */
  box-sizing: border-box; /* Ensures padding is included in the 100% width */
  overflow-x: auto; /* Enable horizontal scrolling if content overflows */
  margin: var(--s2) 0; /* Standardized margin (4px 0) */
  position: relative; /* For positioning subdivision options within this container */

  min-height: 0; /* If needed, ensure it has a purpose */
}

.bar-visual {
  position: relative; /* For positioning subdivision options relative to the bar itself */
  padding: var(--s3); /* Standardized padding (8px) */
  margin: var(--s2); /* Standardized margin (4px) */
  border: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
  background-color: var(--Highlight); /* Was #f9f9f9 */
  flex-grow: 1;
  /* text-align: center; Flex properties will handle alignment */
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  flex-basis: 240px; /* Set a base size, allowing flex-grow to fill space */
  display: flex; /* Arrange beat squares horizontally */
  flex-wrap: nowrap; /* Prevent beat squares from wrapping to a new line */
  gap: var(--s1); /* Standardized gap (4px) */
  border-radius: var(--BorderRadius); /* Keep border radius */
  align-items: center; /* Vertically align squares */
  touch-action: none; /* Prevent browser default touch actions like scrolling on mobile */
  justify-content: space-around;
}
.bar-visual:hover {
  border-color: transparent; /* Changed from var(--Main) for flat look */
  box-shadow: 0 0 var(--s3) var(--Accent); /* 0 0 8px */
}

.bar-visual.active-bar {
  background-color: var(--ActiveBarBackground);
  /* The existing transition on .bar-visual for background-color will apply */
}

.bar-visual.selected {
  border-color: var(--Alt1); /* Was dodgerblue */
  /* background-color: var(--Main); */ /* Optional: change background on selection */
  outline: var(--s1) solid var(--Alt2); /* Standardized outline (2px) */
  box-shadow: 0 0 var(--s3) var(--Alt1); /* Standardized shadow (0 0 8px) */
}
.beat-square {
  flex: 0 1 auto; /* Allow shrinking and growing from flex-basis */
  height: var(--s5); /* Fixed height */
  background-color: color-mix(
    in srgb,
    var(--Main) 60%,
    white
  ); /* Lighter version of highlight */
  border: var(--s0) solid transparent; /* Standardized border (1px) */
  border-radius: var(--BorderRadius);
  transition: all 0.2s ease-out; /* Smoother and slightly longer "pop" for liquid feel */
}

.beat-square.rested,
.beat-square.subdivision.rested {
  /* Added .beat-square.subdivision.rested for higher specificity */
  background-color: color-mix(
    in srgb,
    var(--Alt2) 80%,
    white
  ); /* lighter background */
  border: var(--s1) double color-mix(in srgb, var(--Alt2) 50%, black); /* Red outline */
}
.beat-square.main-beat-marker.highlighted {
  scale: 1 1.8; /* Base highlight scale */
  background: var(--HighlightedBeatColor);
}

.beat-square.subdivision.highlighted-sub {
  scale: 1 1.4; /* Slightly smaller scale for subdivisions */
  background: color-mix(in srgb, var(--HighlightedBeatColor) 60%, white);
}

/* Style for beat squares that are subdivisions */
.beat-square.subdivision {
  background-color: var(--SubdivisionBeatColor);
}

/* Grouping for subdivisions */
.beat-square.group-end-2 {
  margin-right: var(--s1); /* Add a small gap after every 2nd subdivision */
}

.beat-square.group-end-4 {
  margin-right: var(
    --s2
  ); /* Add a slightly larger gap after every 4th subdivision */
}

.beat-square.group-end-3,
.beat-square.group-end-5,
.beat-square.group-end-6,
.beat-square.group-end-7,
.beat-square.group-end-8 {
  margin-right: var(--s1); /* Add a small gap for other subdivision groupings */
}
/* Animation for newly removed beat squares */
.beat-square.removing-beat-animation {
  animation: beat-disappear-animation 0.3s ease-in forwards;
}

@keyframes beat-disappear-animation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
/* Animation for newly added beat squares */
.beat-square.newly-added-beat-animation {
  animation: beat-appear-animation 0.3s ease-out forwards;
}

@keyframes beat-appear-animation {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* .highlighted class (already existing) will be used for beat squares */
.sound-label {
  width: clamp(50px, 80px, 45%);
  display: inline-block;
  background-color: var(--Highlight);
  border-radius: var(--BorderRadius);
  padding: var(--s2);
  font-size: var(--font-3);
  text-align: center;
  color: var(--TextPrimary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sound-label:hover {
  background-color: var(--Accent);
}

.total-beats-display,
select {
  outline: var(--s0) solid transparent;
  padding: var(--s2) var(--s2);
  background: var(--Highlight);
  border-radius: var(--BorderRadius);
  font-size: var(--font-1);
  width: clamp(50px, 50%, 211px);
  text-align: center;
  height: var(--s6);
  gap: 5px;
  margin: var(--s3);
}
.measure-bar {
  background: var(--Highlight);
  display: flex;
  gap: var(--s0); /* Standardized gap (1px) */
  width: 3em;
  align-items: center;
  padding: var(--s2); /* Standardized padding (4px) */
  margin: 0px;
  border-radius: var(--BorderRadius);
  justify-content: center;
  /* flex-flow: row nowrap; from stashed changes is default for flex-direction: row */
}
.measure-bar-segment {
  height: 90%;
  width: 90%;
  margin: var(--s0) var(--s2); /* Standardized margin (1px 4px) */
  border-radius: var(--BorderRadius);
  background: var(--Main); /* Was rgba(0,0,0,0.25), now solid purple */
}
.measure-bar:nth-of-type(odd) {
  filter: brightness(1.25);
  height: 0.5em;
}
.measure-bar:nth-of-type(even) {
  height: 0.25em;
  filter: brightness(1.7);
  border-radius: 0px;
}
.measure-bar:first-of-type {
  height: 1em;
  filter: brightness(1);
  border-radius: var(--BorderRadius);
  /* background: hotpink; from stashed changes - already on .measure-bar */
}
.measure-bar-segment:nth-of-type(odd) {
  background: var(
    --Alt2
  ); /* Was rgba(0,0,0,0.5), now solid red/pink for distinction */
}
/* Base styles (mobile-first approach) */
.metronome-container {
  flex-direction: column; /* Stack elements on small screens */
}

/* Tablet and larger */
@media (min-width: 768px) {
  body {
    font-size: var(--font-4); /* Standardized font size */
  }
  .metronome-container {
    flex-direction: row; /* Side-by-side on larger screens */
  }

  .tempo-slider {
    padding: 0 var(--s6); /* Standardized padding (0 32px) */
  }
  .bar-display-container {
    padding: var(--s3); /* Standardized padding (8px) */
    margin: var(--s3) 0; /* Standardized margin (8px 0) */
  }
  .start-stop-btn {
    height: var(--s15); /* Standardized size (176px) */
    width: var(--s15); /* Standardized size (176px) */
  }
  .adjust-tempo {
    height: var(--s10); /* Standardized size (96px) */
    width: var(--s10); /* Standardized size (96px) */
  }
  .adjust-measure-length,
  .adjust-bar-length {
    height: var(--s8-5); /* Standardized size (60px) */
    width: var(--s8-5); /* Standardized size (60px) */
  }
}

/* Styles for the new global application controls panel */
.global-app-controls {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
  justify-content: space-around; /* Distribute space */
  align-items: center;
  padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
  margin-bottom: var(--s3); /* Standardized margin (8px) */
  background-color: color-mix(
    in srgb,
    var(--Background) 90%,
    black 5%
  ); /* Slightly different from body */
  border-radius: var(--BorderRadius);
  gap: var(--s3); /* Standardized gap (8px) */
}
.control-group {
  display: flex;
  align-items: center;
  gap: var(--s2); /* Standardized gap (4px) */
}
.control-label {
  font-size: var(--font-1); /* Standardized font size */
  color: var(--TextSecondary);
}
/* Desktop and larger */
@media (min-width: 1024px) {
  html {
    height: 100vh; /* Ensure html element takes full viewport height */
    overflow: hidden; /* Prevent all scrolling on the html element */
  }

  body {
    font-size: var(--font-3); /* Standardized font size */
    /* max-width removed to allow full width */
    height: 100%; /* Make body fill the html element's height (effectively 100vh) */
    overflow: hidden; /* Prevent body from scrolling if its content overflows */
    box-sizing: border-box; /* Ensure padding is included in the body's height calculation */
    padding-top: var(--s5); /* Standardized padding (20px) */
    /* Horizontal and bottom padding will be inherited from global body style (15px horizontal, 20px bottom) */
    /* margin: 0; is inherited from global body style */
  }

  .main-container {
    width: 100%; /* Make .main-container fill the width of the body's content area. */
    max-height: 100%; /* Its max height will be 100% of the body's available content height (after body's padding). */
    overflow-y: auto; /* If content inside .main-container is taller than this max-height, a vertical scrollbar will appear for .main-container only. */
    overflow-x: hidden; /* Prevent horizontal scrolling within .main-container. */
    margin: 0; /* Override the global 'margin: auto;' for .main-container. Its position is now dictated by the body (which is a flex container) and its own dimensions. */
    /* The global 'height: auto;' for .main-container is fine; max-height will do the constraining. */
  }

  .global-app-controls {
    padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
    margin-bottom: var(--s3); /* Standardized margin (8px) */
    gap: var(--s3); /* Standardized gap (8px) */
  }
  .control-label {
    font-size: var(--font-1); /* Standardized font size */
  }
  /* Style for a compact select if used in global-app-controls */
  .compact-select {
    font-size: var(--font-1); /* Standardized font size */
    padding: var(--s1) var(--s2); /* Standardized padding (2px 4px) */
  }

  .start-stop-btn {
    height: var(--s14); /* Standardized size (160px) */
    width: var(--s14); /* Standardized size (160px) */
  }
  .adjust-tempo {
    height: calc(
      var(--s10) - var(--s3)
    ); /* Standardized size (88px, approx 90px) */
    width: calc(
      var(--s10) - var(--s3)
    ); /* Standardized size (88px, approx 90px) */
  }
  .adjust-measure-length,
  .adjust-bar-length {
    height: calc(
      var(--s7) + var(--s3)
    ); /* Standardized size (56px, approx 55px) */
    width: calc(
      var(--s7) + var(--s3)
    ); /* Standardized size (56px, approx 55px) */
  }
}
.compact-input {
  font-size: var(--font-1); /* Standardized font size */
  padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
  border: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
  background-color: var(--Highlight);
  border-radius: var(--BorderRadius);
  color: var(--TextPrimary);
  /* Add other styling as needed, e.g., width */
}

/* Theme Switcher Styles */
.theme-controls {
  position: fixed;
  top: var(--s3); /* Standardized position (8px) */
  right: var(--s3); /* Standardized position (8px) */
  display: flex; /* Keep as flex */
  flex-wrap: nowrap;
  gap: var(--s3); /* Standardized gap (8px) */
  padding: var(--s3); /* Standardized padding (8px) */
  background-color: color-mix(in srgb, var(--Background) 80%, transparent);
  border: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
  border-radius: var(--BorderRadius);
  z-index: 1000; /* Ensure it's on top of other elements */
  box-shadow: 0 var(--s1) var(--s2) rgba(0, 0, 0, 0.1); /* 0 2px 4px */
}

.theme-controls button {
  padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
  border: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
  background-color: var(--Highlight);
  color: var(--TextPrimary);
  cursor: pointer;
  border-radius: var(--BorderRadius); /* Keep consistent */
  font-size: var(--font-1); /* Standardized font size */
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.theme-controls button:hover {
  background-color: var(--Accent);
  border-color: transparent; /* Changed from var(--Main) for flat look */
  color: var(--TextPrimary); /* Ensure good contrast on Accent */
}
/* Animation for text updates on tempo, beats per measure, and bar length displays */
.tempo-text-box.updating,
.beats-per-current-measure.updating,
.bars-length.updating {
  animation: control-value-fade-out-in 0.5s ease-in-out;
}

@keyframes control-value-fade-out-in {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  49% {
    /* Point just before text content changes */
    opacity: 0;
    transform: translateY(
      calc(var(--s1) * -1)
    ); /* Slight upward movement (-2px) */
  }
  50% {
    /* Text content changes here via JS */
    opacity: 0;
    transform: translateY(var(--s1)); /* Start from slightly below (2px) */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation for newly added bars */
.bar-visual.newly-added-bar-animation {
  animation: bar-appear 0.2s ease-out forwards;
  transform-origin: left center; /* Makes scaling appear from the left */
}

@keyframes bar-appear {
  from {
    opacity: 0;
    transform: scaleX(0.01) translateX(calc(var(--s4) * -1)); /* -12px */
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

/* Animation for newly removed bars */
.bar-visual.removing-bar-animation {
  animation: bar-disappear-animation 0.2s ease-in forwards;
  transform-origin: left center; /* Consistent with adding animation */
}

@keyframes bar-disappear-animation {
  from {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
  to {
    opacity: 0;
    transform: scaleX(0.01) translateX(calc(var(--s4) * -1)); /* -12px, mirrors the 'from' state of bar-appear */
  }
}

/* Volume Controls Styling */
.volume-controls-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Keep centered */
  gap: var(--s3); /* Standardized gap (8px) */
  margin: var(--s3) auto; /* Standardized margin (8px auto) */
  padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
  width: 90%;
  max-width: 350px;
}
.volume-controls-container label {
  font-size: var(--font-1); /* Standardized font size */
  color: var(--TextSecondary);
  white-space: nowrap;
}

/* Corrected selector for volume label span */
.volume-label {
  color: var(--TextSecondary);
}

.volume-slider {
  /* This class is on the input[type="range"] */
  flex-grow: 1;
  min-width: var(--s10); /* Standardized min-width (96px) */
  /* General input[type="range"] styles will apply for thumb and track */
}

.volume-value {
  font-size: var(--font-1); /* Standardized font size */
  color: var(--TextPrimary); /* Keep color */
  min-width: var(--s6-5); /* Standardized min-width (40px) */
  text-align: right;
  background-color: var(--Highlight); /* Consistent with other displays */
  padding: var(--s1) var(--s2); /* Standardized padding (2px 4px) */
  border-radius: var(--BorderRadius); /* Keep border radius */
  border: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
}

/* Preset Controls Styling */
.preset-controls {
  width: 100%;
  padding: var(--s3); /* Standardized padding (8px) */
  margin-top: var(--s4); /* Standardized margin (12px) */
  border-top: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
  text-align: center;
}
/* Styles for the preset display heading (formerly just <h3>PRESETS</h3>) */
#current-preset-display-heading {
  font-size: 0.9em; /* Adjusted size */
  font-weight: 500;
  color: var(--TextPrimary);
  margin-bottom: var(--s3); /* Standardized margin (8px) */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Ensure long song names don't break layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%; /* Adjust as needed, prevents full stretch with long names */
  margin-left: auto; /* Helps center if max-width is applied */
  margin-right: auto; /* Helps center if max-width is applied */
}
.preset-slot-selection,
.preset-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3); /* Standardized gap (8px) */
  margin-bottom: var(--s3); /* Standardized margin (8px) */
}
/* Corrected selector for preset slot label span */
.preset-slot-label {
  font-size: var(--font-1); /* Standardized font size */
  color: var(--TextSecondary);
}
/* Original rule for label, can be removed or kept if actual label elements are used elsewhere */
/*.preset-slot-selection label {
    font-size: 0.7em;
    color: var(--TextSecondary);
}*/
/* #preset-slot-select inherits from general 'select' but we can refine */
#preset-slot-select {
  font-size: var(--font-1); /* Standardized font size */
  padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
  /* width: auto; height: auto; already in general select via .total-beats-display, select */
  min-width: var(--s7); /* Standardized min-width (48px) */
}

.preset-btn {
  padding: var(--s3) var(--s4); /* Standardized padding (8px 12px) */
  border-radius: var(--BorderRadius); /* Keep border radius */
  border: var(--s0) solid transparent; /* Standardized border (1px) */
  background-color: var(--Highlight);
  color: var(--TextPrimary);
  cursor: pointer;
  font-size: var(--font-1); /* Standardized font size */
  transition: background-color 0.2s ease, border-color 0.2s ease,
    transform 0.1s ease;
}
.preset-btn:hover {
  background-color: var(--Accent);
  border-color: transparent; /* Changed from var(--Main) */
}
.preset-btn:active {
  background-color: color-mix(in srgb, var(--Accent) 80%, white);
  transform: translateY(var(--s0)); /* Standardized transform (1px) */
}

/* Suggestion for your CSS file */
.top-controls-area {
  position: fixed; /* Changed from absolute to fixed */
  top: var(--s3); /* Standardized position (8px) */
  left: var(--s3); /* Standardized position (8px) */
  display: flex;
  gap: var(--s3); /* Standardized gap (8px) */
  z-index: 1000; /* Ensure it's on top of other elements */
  overflow-x: auto;
}

.top-controls-area button {
  /* Basic styling, adjust to match your theme */
  padding: var(--s3) var(--s3); /* Standardized padding (8px 8px) */
  font-size: var(--font-2); /* Standardized font size */
  cursor: pointer;
  border: var(--s0) solid var(--BorderColor, transparent); /* Standardized border (1px) */
  background-color: var(--Accent, #f0f0f0);
  color: var(--TextPrimary, #333);
  border-radius: var(--BorderRadius);
}

.top-controls-area button:hover {
  background-color: var(--Highlight, #e0e0e0);
}

#screen-off-toggle-btn.active {
    background-color: var(--Main);
    color: var(--TextOnMain);
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  .top-controls-area,
  .theme-controls {
    position: fixed;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--s3); /* Standardized padding (8px) */
    box-sizing: border-box;
    background-color: color-mix(in srgb, var(--Background) 80%, transparent);
    border-radius: 0; /* Removed border-radius for full-width bars */
    box-shadow: 0 calc(var(--s1) * -1) var(--s2) rgba(0, 0, 0, 0.1); /* 0 -2px 4px */
    z-index: 1000;
  }

  body {
    /* Override global body styles for mobile */
    /* Adjust body padding to make space for the fixed top and bottom bars */
    /* These values are estimates; you might need to fine-tune them based on the actual height of your bars */
    padding-top: var(--s7); /* Standardized padding (48px, approx 50px) */
    padding-left: 0;
    padding-bottom: var(--s7); /* Standardized padding (48px, approx 50px) */
    padding-right: 0;
    max-width: 100%;
    margin: 0; /* Remove auto margins */
  }

  /* Specific styling for .top-controls-area */
  .top-controls-area {
    top: 0;
    bottom: auto;
    left: 0; /* Ensure it starts from the left edge */
    width: 100%;
    justify-content: space-between;
    border-bottom: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
    box-shadow: 0 var(--s1) var(--s2) rgba(0, 0, 0, 0.1); /* Standardized shadow (0 2px 4px) */
  }

  /* Specific styling for .theme-controls */
  .theme-controls {
    top: auto;
    bottom: 0;
    right: 0; /* Ensure it starts from the right edge */
    left: 0; /* Stretch across the bottom */
    width: 100%;
    justify-content: flex-start; /* Align items to the start */
    border-top: var(--s0) solid var(--BorderColor); /* Standardized border (1px) */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Keep all buttons on one line */
    padding-left: var(--s3); /* Add some padding to the left */
    padding-right: var(--s3); /* Add some padding to the right */
  }
  /* Add this to your style.css file */
  /* Base styles for all subdivision options */
  .subdivision-option {
    z-index: 1001;
    padding: var(--s5) 15px;
    background-color: var(--Accent);
    color: var(--TextOnMain);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    white-space: nowrap;
    /* Temporarily remove opacity and scale for debugging */
    scale: 0.8;
    transition: all 0.2s ease; /* Disable transitions for debugging */
  }

  /* Desktop-specific overrides */
  .subdivision-option.desktop {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 var(--s2);
    /* Temporarily set fixed size for debugging */
    width: 100px;
    height: 40px;
    padding: var(--s5) 15px;
    background-color: var(--Accent);
    color: var(--TextOnMain);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    white-space: nowrap;
    /* Temporarily remove opacity and scale for debugging */
    opacity: 0;
    scale: 0.8;
    transition: all 0.2s ease; /* Disable transitions for debugging */
  }

  /* Visible state for all options (temporarily make them always visible for debugging) */
  .subdivision-option.visible {
    opacity: 1;
    scale: 1;
  }

  /* Visible state specifically for desktop options (temporarily make them always visible for debugging) */
  .subdivision-option.desktop.visible {
    max-width: 150px;
    padding: var(--s5) 15px;
    opacity: 1;
  }

  .top-controls-area button,
  .theme-controls button {
    /*font-size: var(--font-1); /* Standardized font size */
    padding: var(--s2) var(--s3); /* Standardized padding (4px 8px) */
    white-space: nowrap; /* Keep text on one line */
    text-align: center;
    height: 40px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    flex-grow: 0; /* Prevent buttons from growing */
    flex-basis: auto; /* Let content determine size */
    overflow: visible; /* Ensure text is visible */
    text-overflow: clip; /* Prevent ellipsis */
    margin-right: var(--s2); /* Add some space between buttons */
  }

  /* Example: Reduce size of large elements to help content fit vertically */
  .start-stop-btn {
    height: var(--s11); /* Standardized size (112px, approx 110px) */
    width: var(--s11); /* Standardized size (112px, approx 110px) */
    font-size: xx-large; /* Standardized font size */
  }
  .adjust-tempo {
    font-size: xx-large;
  }

  .main-container {
    width: 100%; /* Ensure main container takes full width */
    max-width: 100%; /* Override any max-width constraints */
    padding: 0 var(--s3); /* Standardized padding (0 8px) */
  }
}

@media (max-width: 768px) {
  /* Styles for mobile devices */
}

.subdivision-option.desktop {
  /* Temporarily set fixed size for debugging */

  padding: var(--s5) 15px;
  background-color: var(--Accent);
  color: var(--TextOnMain);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  white-space: nowrap;
  /* Temporarily remove opacity and scale for debugging */
  opacity: 0;
  scale: 0.8;
  transition: all 0.2s ease; /* Disable transitions for debugging */
}
.subdivision-option.desktop.visible {
  opacity: 1;
  scale: 1;
}

@keyframes boop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    transform: scale(1);
  }
}

button:active,
.adjust-tempo:active,
.adjust-bar-length:active,
.adjust-measure-length:active,
.start-stop-btn:active {
  animation: boop 0.2s ease;
}
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 0, 221, 0.5);
  }
  50% {
    box-shadow: 0 0 var(--s5) rgba(255, 0, 221, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 0, 221, 0.5);
  }
}

.start-stop-btn.active {
  animation: pulse-glow 1.2s infinite;
}
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(-1.5deg);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.adjust-tempo:hover,
.adjust-bar-length:hover,
.adjust-measure-length:hover {
  animation: wiggle 0.3s ease;
}

/* Debugging styles */
.debug-mode .bar-visual {
  border: 2px dashed red;
}

.debug-mode .beat-square {
  border: 1px dotted blue;
}

.debug-mode .subdivision-option {
  border: 2px solid lime;
}

.debug-mode .bar-display-container {
  border: 2px solid purple;
}

.debug-mode .subdivision-option.desktop {
  border: 2px solid orange;
}

.debug-mode .subdivision-option.visible {
  border: 2px solid yellow;
}

.debug-mode .subdivision-option.desktop.visible {
  border: 2px solid cyan;
}

/* Add this to your style.css file */
#all-tracks-wrapper {
  display: flex;
  flex-flow: row wrap;
  flex-grow: 1;
  justify-content: center;
}
.track-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(340px, 90%, auto);
  padding: var(--s2);
  margin: var(--s3) var(--s2);
  border-radius: 8px;
  background-color: var(--track-background);
  color: var(--track-text);
}

.track-controls {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap; /* Allow controls to wrap on smaller screens */
}

.track-name {
  font-weight: bold;
  margin: var(--s2);
  background: var(--Accent);
  border-radius: var(--BorderRadius);
  text-shadow: var(--Alt2) 1px 2px;
  padding: var(--s2);
  box-shadow: var(--Main) 0px var(--s2);
}
.track-volume-value,
.track-volume-label {
  font-size: var(--font-1);
  width: 8%;
  text-align: center;
  margin: var(s1);
  color: var(--track-background);
  background-color: var(--track-text);
  padding: var(--s1) var(--s2);
  border-radius: var(--BorderRadius);
}

.track-volume-controls {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: var(--s2);
}

.track-volume-slider {
  -webkit-appearance: none;
  width: clamp(120px, 90%, 600px); /* A fixed width for consistency */
  height: var(--s1); /* 2px track height */
  background: var(--Alt1);
  border-radius: var(--s1);
  outline: none;
  opacity: 0.8;
  margin: 0px var(--s3);
  transition: opacity 0.2s;
}

.track-volume-slider:hover {
  opacity: 1;
}

.track-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--s5); /* 12px thumb */
  height: var(--s5); /* 12px thumb */
  background: var(--Main);
  cursor: pointer;
  border-radius: 50%;
  align-self: center;
}

.track-sound-select {
  /* Add styles for the sound dropdown */
}

#add-track-btn {
  /* Add styles for the "Add Track" button */
}

.subdivision-selector {
  position: absolute;
  z-index: 10;
  background-color: var(--Accent);
  border: var(--s0) solid var(--Main);
  border-radius: var(--s2);
  padding: var(--s2);
}

/* Track color variations */
.track-color-0 {
  --track-background: color-mix(in srgb, var(--Main) 10%, var(--TextPrimary));
  --track-text: #ffffff;
}

.track-color-1 {
  --track-background: color-mix(in srgb, var(--Main) 20%, var(--TextPrimary));
  --track-text: #333333;
}

.track-color-2 {
  --track-background: color-mix(in srgb, var(--Main) 40%, var(--TextPrimary));
  --track-text: #ffffff;
}

.track-color-3 {
  --track-background: color-mix(in srgb, var(--Main) 60%, var(--TextPrimary));
  --track-text: #333333;
}
.track-color-4 {
  --track-background: color-mix(in srgb, var(--Main) 80%, var(--TextPrimary));
  --track-text: #ffffff;
}
.track-color-5 {
  --track-background: color-mix(in srgb, var(--Main) 100%, var(--TextPrimary));
  --track-text: #333333;
}

/* Beat square styling */
.beat-square {
  background-color: color-mix(in srgb, var(--track-background) 60%, white);
}

.beat-square.highlighted {
  background-color: var(--HighlightedBeatColor);
}

/* Subdivision Options Container */
.subdivision-options-container {
  position: fixed;
  z-index: 1002; /* Higher than other elements */
  display: flex;
  flex-flow: row wrap;
  width: clamp(25vw, 90%, 250px);
  gap: var(--s2);
  padding: var(--s5);
  background-color: var(--Background);
  border: 1px solid var(--BorderColor);
  border-radius: var(--BorderRadius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translate(-50%, -110%) scale(0.9); /* Start slightly above and scaled down */
  transform-origin: bottom center;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none; /* Initially not interactive */
}

.subdivision-options-container.visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1); /* Move to final position */
  pointer-events: auto; /* Become interactive */
}

/* Individual Subdivision Option */
.subdivision-option {
  padding: 16px;
  margin: var(--s1);
  background-color: var(--Highlight);
  color: var(--TextPrimary);
  border-radius: calc(var(--BorderRadius) - 4px);
  cursor: pointer;
  text-align: center;
  font-size: var(--font-2);
  transition: background-color 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
}

.subdivision-option:hover,
.subdivision-option.hovered {
  background-color: var(--Accent);
  color: var(--TextOnMain);
  transform: scale(1.05);
  border-color: var(--Main);
}

.subdivision-option.current {
  font-weight: bold;
  background-color: var(--Main);
  color: var(--TextOnMain);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Solo track styling */
.track.soloed {
  background-color: var(--Accent);
  box-shadow: 0 0 15px var(--Accent);
  border: 2px solid var(--Main);
}

.track.soloed .track-name {
  color: var(--TextOnMain);
}

.track.soloed .track-solo-btn {
  background-color: var(--Main);
  color: var(--TextOnMain);
  font-weight: bold;
}

/*Mute Track Styling */
.track.muted {
  background-color: var(--Highlight);
  box-shadow: 0 0 15px var(--Alt1);
  border: 2px solid var(--Main);
}

.track.muted .track-name {
  color: var(--TextOnMain);
}

.track.muted .track-mute-btn {
  background-color: var(--Main);
}

/* Modal Styles */
.modal {
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.modal-content {
    background-color: var(--Background);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid var(--Alt2);
    width: 85%;
    max-width: 500px;
    border-radius: var(--BorderRadius);
    position: relative;
    box-shadow: var(--text-shadow);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}


.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;

  h2{
    width: 100%;
  }
}

#reset-sound-btn {
  background-color: var(--Main); /* Green */
  color: var(--Background);
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: var(--BorderRadius);
  transition-duration: 0.4s;
}

#reset-sound-btn:hover {
  background-color: var(--Alt2);
}

#note-snap-btn, #quantize-btn {
  background-color: var(--Main); /* Red */
  color: var(--Background);
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: var(--BorderRadius);
  transition-duration: 0.4s;
}

#note-snap-btn:hover, #quantize-btn:hover {
  background-color: var(--Accent);
  color: var(--TextOnMain);
}

#note-snap-btn.active, #quantize-btn.active {
  background-color: var(--Alt2);
}

.close-button {
  color: var(--TextOnMain);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#sound-sliders-container {
  margin-top: 20px;
  width: 95%;
}

.slider-container {
  margin-bottom: 15px;
}

.slider-container label {
  display: block;
  margin-bottom: 5px;
}

.slider-container input[type="range"] {
  width: 100%;
}
.slider-container span {
  padding-top: 20px;
}
#background-oscilloscope {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it behind all other content */
  background-color: var(--Background); /* A light fallback background */
}
.oscilloscope-canvas {
  display: flex;
  width: 95%;
  border-radius: var(--BorderRadius);
  box-shadow: var(--text-shadow);
  justify-self: center;
  align-self: center;
}


.waveform-container {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 15px;
    border-radius: var(--BorderRadius);
}

.waveform-canvas {
    width: 100%;
    height: 100%;
    background-color: #000;
        border-radius: var(--BorderRadius);
}




#share-btn {
  /* Basic styling, adjust to match your theme */
  padding: var(--s3) var(--s3);
  font-size: var(--font-2);
  cursor: pointer;
  border: var(--s0) solid var(--BorderColor, transparent);
  background-color: var(--Accent, #f0f0f0);
  color: var(--TextPrimary, #333);
  border-radius: var(--BorderRadius);
}

#share-btn:hover {
  background-color: var(--Highlight, #e0e0e0);
}

#connection-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  background-color: #ff0000; /* Red for disconnected */
}

#share-btn.connected #connection-status {
  background-color: #00ff00; /* Green for connected */
}

#share-btn.connecting #connection-status {
  background-color: #ffff00; /* Yellow for connecting */
}
#n-of-connections {
  padding-left: var(--s2);
}

#connection-modal .modal-content {
  background-color: var(--Background);
  color: var(--TextPrimary);
}

#connection-modal button {
  background-color: var(--Main);
  color: var(--TextOnMain);
  border: none;
  padding: 10px 20px;
  border-radius: var(--BorderRadius);
  cursor: pointer;
  font-size: 1em;
  margin-top: 10px;
}

#connection-modal button:hover {
  background-color: var(--Accent);
}
.sound-selection {
  width: 80%;
}
.track-sound-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
.sound-selector {
  width: 60%;
}
.rest-button,
.record-btn,
.recording-item button {
  background: var(--Highlight);
  border: none;
  border-radius: var(--BorderRadius);
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Use a font stack that is likely to include musical symbols */
  font-family: "Apple Symbols", "Noto Sans Symbols", "Segoe UI Symbol",
    sans-serif;
}
.recording-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.recording-item button{
  width: 25%;
}
.recording-item span{
  width: 50%;
  padding-bottom: var(--s3);
}
.rest-button.active,
.record-btn.active {
  background-color: var(--Alt2); /* A distinct color when active */
  box-shadow: 0 0 8px var(--Alt2); /* A subtle glow */
}

.beat-selectors-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: var(--Highlight);
  border-radius: var(--BorderRadius);
  margin-top: 10px;
}

.beat-selector-wrapper {
  display: flex;
  align-items: center;
}

.beat-selector {
  margin-right: 5px;
}

.slider-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.slider-container label {
  margin-bottom: 0.5rem;
}
.slider-container input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  height: 20px;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--s6); /* 20px */
  height: var(--s6); /* 20px */
  border-radius: 50%;
  background: var(--Accent);
  box-shadow: var(--text-shadow);
  margin-top: -12px; /* Adjusted to match global slider */
  cursor: pointer;
}

.slider-container input[type="range"]::-webkit-slider-runnable-track {
  background: var(--Alt1);
  width: 100%;
  height: 2px;
}

.slider-container span {
  padding-top: 0.5rem;
  text-align: end;
}

/* Bouncy Animation for Measures Container */
@keyframes bouncy-pop-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bouncy-pop-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.measures-container.hidden {
  display: none;
}

.measures-container.showing {
  display: flex;
  animation: bouncy-pop-in 150ms ease-out forwards;
}

.measures-container.hiding {
  animation: bouncy-pop-out 150ms ease-in forwards;
}

.sound-label.modified-sound {
  outline: 3px double var(--Alt2);
}

.slider-wrapper {
  display: flex;
  align-items: center;
}

.slider-button-decrement,
.slider-button-increment {
  cursor: pointer;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  color: var(--TextOnMain);
  background-color: var(--Main);
  border-radius: var(--BorderRadius);
  margin: 0 5px;
  height: 30px;
  width: 30px;
  text-align-last: center;
  align-items: center;
}
environments: Development, Staging,
  Production /* Recording Display Modal */ #recording-display-modal {
  background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
  display: none; /* Hidden by default */
  flex-direction: column; /* Arrange content vertically */
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Ensure it's on top of everything */
}

#recording-display-modal .modal-content {
  background-color: transparent; /* No background for the content box itself */
  border: none; /* No border */
  box-shadow: none; /* No shadow */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 800px; /* Limit width for larger screens */
  padding: 20px;
}

#recording-timer {
  font-size: 4em; /* Large timer */
  color: white;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#recording-waveform-canvas {
  background-color: black; /* Black background for the waveform */
  border: 2px solid var(--Main); /* Border matching theme */
  border-radius: 10px;
  width: 100%;
  height: 200px; /* Fixed height for the canvas */
  margin-bottom: 20px;
}

#recording-stop-btn {
  padding: 15px 30px;
  font-size: 1.5em;
  background-color: var(--Alt2); /* Red color for stop button */
  color: white;
  border: none;
  border-radius: var(--BorderRadius);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#recording-stop-btn:hover {
  background-color: color-mix(in srgb, var(--Alt2) 80%, black);
}