/* ============================================
   LOGIC PRO X INSPIRED THEME - Matching Portal
   ============================================ */
:root {
  --bg-primary: #1b1e22;
  --bg-secondary: #232629;
  --bg-tertiary: #2a2d31;
  --bg-card: #2a2d31;
  --bg-input: #1b1e22;
  
  --accent-blue: #63a4ff;
  --accent-green: #4bff72;
  --accent-green-dark: #1ea641;
  --accent-orange: #ff9500;
  --accent-red: #ff453a;
  
  --text-primary: #e6e6e6;
  --text-secondary: #a0a0a5;
  --text-muted: #707075;
  
  --border-color: #3a3d43;
  --border-light: #4a4d53;
  --shadow-dark: rgba(0,0,0,0.45);
  
  --success: #32d74b;
  --error: #ff453a;
  
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Header / Title */
h2#pageTitle {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #2f3238 0%, #26292d 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 6px var(--shadow-dark);
}

/* Track Cards */
.track {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 6px var(--shadow-dark);
}

.track strong {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.5rem;
}

#tracks .track label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#tracks .track select[data-action="variant"] {
  -webkit-appearance: none;
  appearance: none;

  height: 28px;
  padding: 0 2rem 0 0.6rem;
  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;

  font: inherit;
  line-height: 28px;

  cursor: pointer;
  outline: none;

  /* dropdown arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 14px) 11px,
    calc(100% - 9px) 11px,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.2rem 100%;
  background-repeat: no-repeat;
}

#tracks .track select[data-action="variant"]:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.32);
}

#tracks .track select[data-action="variant"]:focus-visible {
  border-color: rgba(13, 110, 253, 0.95);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

#tracks .track select[data-action="variant"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Options (limited support across browsers, but harmless) */
#tracks .track select[data-action="variant"] option {
  background: #111;
  color: #fff;
}

/* Buttons */
button {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.15s ease;
  background: linear-gradient(180deg, #43464b 0%, #36393e 100%);
  color: var(--text-primary);
  box-shadow: 0 1px 2px var(--shadow-dark);
}

button:hover {
  background: linear-gradient(180deg, #4b4e54 0%, #3c3f45 100%);
}

button:active {
  background: linear-gradient(180deg, #36393e 0%, #2d3035 100%);
}

button.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--bg-primary);
  box-shadow: 0 0 8px rgba(99,164,255,0.4);
}

/* Transport Controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #2f3238 0%, #26292d 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px var(--shadow-dark);
}

.controls .pitch-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left:0.5rem;
}

.controls .pitch-line label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.controls #globalPitch {
  -webkit-appearance: none;
  appearance: none;

  height: 28px;
  padding: 0 2rem 0 0.6rem;
  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;

  font: inherit;
  line-height: 28px;

  cursor: pointer;
  outline: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 14px) 11px,
    calc(100% - 9px) 11px,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.2rem 100%;
  background-repeat: no-repeat;
}

.controls #globalPitch:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.32);
}

.controls #globalPitch:focus-visible {
  border-color: rgba(13, 110, 253, 0.95);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.controls #globalPitch option {
  background: #111;
  color: #fff;
}

/* Transport buttons (round style) */
#play, #pause, #stop {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Default grey state for all */
  background: radial-gradient(circle at 30% 30%, #54585e, #303337);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  box-shadow: 0 2px 4px var(--shadow-dark);
}

#play:hover, #pause:hover, #stop:hover {
  background: radial-gradient(circle at 30% 30%, #5e6268, #383b40);
}

/* Play button - green when playing */
#play.active {
  background: radial-gradient(circle at 30% 30%, var(--accent-green), var(--accent-green-dark));
  border: 1px solid var(--accent-green-dark);
  color: #0d240f;
  box-shadow: 0 0 8px rgba(75,255,114,0.5), 0 2px 4px var(--shadow-dark);
}

#play.active:hover {
  box-shadow: 0 0 12px rgba(75,255,114,0.7), 0 2px 4px var(--shadow-dark);
}

/* Pause button - yellow when paused */
#pause.active {
  background: radial-gradient(circle at 30% 30%, #ffd60a, #e6b800);
  border: 1px solid #cca300;
  color: #1a1a00;
  box-shadow: 0 0 8px rgba(255,214,10,0.5), 0 2px 4px var(--shadow-dark);
}

#pause.active:hover {
  box-shadow: 0 0 12px rgba(255,214,10,0.7), 0 2px 4px var(--shadow-dark);
}

/* Stop button - red only when pressed */
#stop:active {
  background: radial-gradient(circle at 30% 30%, #ff453a, #cc362e);
  border: 1px solid #b02e27;
  color: #1a0000;
  box-shadow: 0 0 8px rgba(255,69,58,0.5), 0 2px 4px var(--shadow-dark);
}

/* Metronome button - purple when active/on */
#metronome {
  margin-left: 0.5rem;
}

#metronome.active {
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  border-color: #6d28d9;
  color: #fff;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

#metronome.active:hover {
  background: linear-gradient(180deg, #b869f8 0%, #8b47ef 100%);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

/* Volume Line */
.volume-line {
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.volume-line label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Range Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  height: 6px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #63a4ff 0%, #4a8be0 100%);
  border: 1px solid #4080d0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow-dark);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #63a4ff 0%, #4a8be0 100%);
  border: 1px solid #4080d0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow-dark);
}

/* Volume sliders with unity gain notch (0-2 range, unity at 50%) */
input[type="range"][data-action="gain"],
#masterVol {
  position: relative;
  background: 
    linear-gradient(to right, 
      var(--bg-input) 0%, 
      var(--bg-input) calc(50% - 1px),
      var(--accent-green) calc(50% - 1px),
      var(--accent-green) calc(50% + 1px),
      var(--bg-input) calc(50% + 1px),
      var(--bg-input) 100%
    );
}

/* Progress Container */
.progress-container {
  margin: 1rem 0;
  position: relative;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px var(--shadow-dark);
}

.progress-container input[type="range"] {
  width: 100%;
  height: 8px;
  margin-bottom: 0.5rem;
}

.loop-highlight {
  position: absolute;
  top: calc(0.75rem + 4px);
  height: 8px;
  background: rgba(99,164,255,0.3);
  border-radius: 3px;
  pointer-events: none;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Time Display */
.time {
  font-size: 0.7rem;
  font-family: SF Mono, Monaco, monospace;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}

/* Bookmarks Panel */
#bookmarksPanel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0 2px 6px var(--shadow-dark);
}

#bookmarksPanel h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

#bookmarksPanel label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

#bookmarksPanel button {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.75rem;
  display: block;
  width: 100%;
  text-align: left;
}

#bookmarksPanel p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Loading Overlay */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(27, 30, 34, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

#loadingText {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Spinner for loading */
#loadingOverlay::before {
  content: '';
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* How To Overlay */
#howToOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(27, 30, 34, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

#howToOverlay h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

#howToOverlay p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 400px;
}

#howToOverlay button {
  margin-top: 1.5rem;
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  background: radial-gradient(circle at 30% 30%, var(--accent-green), var(--accent-green-dark));
  border: 1px solid var(--accent-green-dark);
  color: #0d240f;
  box-shadow: 0 0 8px rgba(75,255,114,0.4);
}

#howToOverlay button:hover {
  box-shadow: 0 0 12px rgba(75,255,114,0.6);
}

/* Floating Help Button */
#howToBtn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1001;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  font-size: 1rem;
  background: linear-gradient(180deg, #43464b 0%, #36393e 100%);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  box-shadow: 0 2px 8px var(--shadow-dark);
}

#howToBtn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--bg-primary);
  box-shadow: 0 0 10px rgba(99,164,255,0.4);
}

/* Track controls inline */
.track button {
  margin-right: 0.4rem;
}

.track label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
}

.track-icon {
  margin-right: 0.6rem;
  /* font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  margin-right: 0.4rem;
  background: linear-gradient(180deg, #4a4d52 0%, #36393e 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center; */
  }

.track input[type="range"] {
  width: 80px;
}

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: var(--accent-blue);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-input);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5a5d63;
}

/* Responsive */
@media (max-width: 600px) {
  .volume-line {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #play, #pause, #stop {
    width: 44px;
    height: 44px;
  }
  
  .track input[type="range"] {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .track label {
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}