@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

/* Visually hidden (for screen readers only) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

html, body {
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  background: url('monakaiheadlo.png') center center / cover no-repeat fixed, #111;
  font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
  color: #fff;
  box-sizing: border-box;
  font-size: 15px;
  overflow-x: hidden;
}

#root, .app-wrapper {
  width: 100vw;
  min-height: 100vh;
  background: rgba(16,16,18,0.88);
  backdrop-filter: blur(7px) saturate(1.3);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  box-shadow: 0 0 48px 0 #0006;
}

.header-main {
  text-align: center;
  margin-top: 24px;
  letter-spacing: 0.06em;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 40px #fa2, 0 0 3px #311;
  filter: drop-shadow(0 4px 10px #f33a);
}
.header-sub {
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #f66;
  margin-bottom: 18px;
  opacity: 0.7;
  font-weight: 500;
}

#mainContent {
  width: 95vw;
  margin: 0 auto;
  max-width: 1800px;
}

.timeline-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  background: rgba(25, 19, 31, 0.6);
  border-radius: 24px;
  box-shadow: 0 2px 22px 0 #1f1122cc;
  padding: 12px 0;
  position: relative;
  margin-bottom: 26px;
}

#timelineScroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

#timelineInner {
  min-width: 1800px;
  position: relative;
  background: rgba(33,26,44,0.5);
  border-radius: 18px;
  padding-bottom: 80px;
  min-height: 400px;
  margin-bottom: 0;
  box-shadow: 0 2px 24px #1118;
}

#tickBar {
  display: flex;
  align-items: flex-end;
  height: 26px;
  margin-left: 87px;
  margin-bottom: 2px;
  font-size: 0.95rem;
  color: #f33;
}
.tick {
  width: 3px; height: 16px;
  background: linear-gradient(0deg,#f22 50%,#d10 95%);
  border-radius: 2px;
  margin-right: 9px;
  opacity: 0.7;
}
.tick-label {
  margin-left: 1px;
  color: #f33;
  font-weight: 700;
  font-size: 1.02rem;
  opacity: 0.84;
  text-shadow: 0 1px 8px #f005, 0 0 3px #3008;
}

.track-row {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 0 0 12px;
  border-radius: 14px;
  margin: 3px 0;
  background: rgba(28,21,40,0.60);
  box-shadow: 0 1px 8px #f44a, 0 0 3px #1004;
  position: relative;
}

.track-label {
  font-weight: 700;
  font-size: 1.05em;
  padding: 0 16px 0 3px;
  color: #fff;
  text-shadow: 0 0 9px #fa4c, 0 0 2px #f33;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.upload-label {
  background: rgba(65,29,37,0.18);
  border-radius: 8px;
  border: 1px solid #f333;
  color: #ff8888;
  padding: 4px 14px;
  font-size: 0.93em;
  font-family: inherit;
  margin-right: 15px;
  cursor: pointer;
  box-shadow: 0 0 4px #f33b, 0 1px 6px #c11b;
  transition: background 0.18s;
}
.upload-label:hover {
  background: rgba(65,29,37,0.38);
}

.track-samples {
  position: relative;
  height: 42px;
  flex: 1 1 auto;
}

.sample-block {
  position: absolute;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(90deg,rgba(80,22,44,0.68) 25%,rgba(80,22,44,0.35) 100%);
  border: 1.5px solid #d33;
  box-shadow: 0 2px 14px #f323, 0 1px 4px #3117;
  overflow: visible;
  z-index: 2;
  cursor: pointer;
  transition: box-shadow 0.14s, border 0.14s;
  display: flex;
  align-items: center;
}
.sample-block.selected {
  border: 2.6px solid #fa2;
  box-shadow: 0 2px 20px #fa2d, 0 1px 4px #911a;
}
.sample-block.muted {
  opacity: 0.38;
  background: linear-gradient(90deg,rgba(80,22,44,0.16) 25%,rgba(80,22,44,0.12) 100%);
  border: 1.5px dashed #666;
}
.sample-block.solo {
  border: 2.6px solid #fff275;
  box-shadow: 0 2px 20px #f0f25599, 0 1px 4px #fff2;
}
.sample-filename {
  font-size: 0.91em;
  color: #fa7;
  background: rgba(23,11,9,0.35);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
  text-shadow: 0 0 6px #f40a;
}

.block-btns {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}
.block-btn {
  background: rgba(28,8,16,0.88);
  border: 1.3px solid #e22;
  border-radius: 5px;
  color: #fa4;
  font-size: 1.02em;
  cursor: pointer;
  padding: 2.5px 6.5px;
  box-shadow: 0 0 6px #f44d, 0 1px 3px #1117;
  margin-left: 1px;
  transition: background 0.12s, border 0.14s;
}
.block-btn:hover {
  background: #d22;
  color: #fff;
  border-color: #fff;
}

.mixer-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  background: rgba(27,21,34,0.72);
  padding: 12px 12px 0 18px;
  border-radius: 19px;
  margin: 23px 0 0 0;
  min-height: 90px;
  gap: 14px;
  box-shadow: 0 1px 10px #ee2233a0, 0 1px 2px #1117;
}
.mixer-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(48,28,39,0.47);
  border-radius: 11px;
  box-shadow: 0 2px 12px #fa33a1a, 0 1px 4px #1117;
  padding: 7px 13px 8px 13px;
  min-width: 75px;
}
.mixer-label {
  color: #fa2;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 5px;
  text-shadow: 0 1px 8px #fa5, 0 0 3px #3313;
}
.vol-fader, .main-fader {
  width: 50px;
  accent-color: #fa2;
  margin-bottom: 6px;
}
.mute-btn, .solo-btn {
  margin: 2px 0;
  background: rgba(90,10,22,0.35);
  border: 1px solid #d33;
  color: #ffbb88;
  border-radius: 4px;
  font-size: 1.1em;
  cursor: pointer;
  padding: 1.8px 7px;
  transition: background 0.14s;
}
.mute-btn:hover, .solo-btn:hover {
  background: #fa2;
  color: #fff;
}

#fxPanel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 22px 2px 14px 2px;
  background: rgba(37,19,27,0.25);
  padding: 13px 6px;
  border-radius: 12px;
  box-shadow: 0 1px 11px #e42b, 0 1px 3px #1113;
}
.track-fx-panel {
  min-width: 230px;
  background: rgba(31,17,28,0.67);
  border-radius: 12px;
  padding: 10px 14px 9px 14px;
  margin-bottom: 6px;
  box-shadow: 0 1px 9px #fa2337a, 0 1px 2px #1117;
  color: #faa;
}
.track-fx-panel label {
  color: #fdd;
  font-size: 0.93em;
  margin-right: 6px;
}

#automationLanes {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  z-index: 9;
}
#automationLanes svg {
  pointer-events: auto;
}
#automationLanes path {
  stroke: #ff3131;
  stroke-width: 2.2;
  fill: none;
  filter: drop-shadow(0 0 3px #fa2d);
}
#automationLanes circle {
  fill: #fff;
  stroke: #ff3131;
  stroke-width: 1.3;
  cursor: pointer;
  filter: drop-shadow(0 0 2px #fa2a);
}

#playhead {
  position: absolute;
  top: 38px;
  left: 87px;
  width: 3.2px;
  background: linear-gradient(0deg,#fa0 70%,#fff 100%);
  border-radius: 5px;
  z-index: 20;
  box-shadow: 0 0 16px #fff8, 0 1px 3px #ff3b;
  pointer-events: all;
  cursor: ew-resize;
}

.transport-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 14px 0 6px 0;
  margin-bottom: 10px;
}
.transport-btn {
  background: rgba(90,12,21,0.78);
  color: #fff;
  border: 2px solid #fa2;
  border-radius: 10px;
  font-size: 1.3em;
  padding: 7px 16px;
  margin: 0 5px;
  cursor: pointer;
  box-shadow: 0 0 9px #fa238, 0 2px 6px #1115;
  transition: background 0.17s, border 0.15s;
}
.transport-btn:hover, .transport-btn.active {
  background: #fa2;
  color: #111;
  border-color: #fff;
}
#exportBtn {
  background: linear-gradient(90deg,#f22 0%,#fa2 100%);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 11px;
  font-weight: bold;
  font-size: 1.04em;
  padding: 7px 18px;
  cursor: pointer;
  box-shadow: 0 0 10px #fa23a, 0 2px 5px #0009;
  margin-left: 22px;
  transition: background 0.19s;
}
#exportBtn:hover {
  background: linear-gradient(90deg,#fa2 0%,#fff 100%);
  color: #d22;
}

/* Color-code tracks - adjust as desired */
.track1 { background: linear-gradient(90deg,rgba(250,80,82,0.18),rgba(250,80,82,0.07)); }
.track2 { background: linear-gradient(90deg,rgba(98,197,255,0.19),rgba(8,158,222,0.07)); }
.track3 { background: linear-gradient(90deg,rgba(246,255,94,0.14),rgba(255,217,54,0.06)); }
.track4 { background: linear-gradient(90deg,rgba(139,255,180,0.16),rgba(38,244,126,0.07)); }
.track5 { background: linear-gradient(90deg,rgba(254,144,242,0.16),rgba(207,70,179,0.09)); }
.track6 { background: linear-gradient(90deg,rgba(253,188,116,0.15),rgba(255,161,64,0.07)); }
.track7 { background: linear-gradient(90deg,rgba(99,111,255,0.18),rgba(44,71,204,0.09)); }
.track8 { background: linear-gradient(90deg,rgba(144,255,230,0.15),rgba(43,209,201,0.08)); }

/* Mobile and tablet responsive adjustments */
@media (max-width: 900px) {
  #mainContent { width: 100vw; max-width: 100vw; padding: 0; }
  .timeline-wrap, #timelineInner { min-width: 700px; }
  .header-main { font-size: 1.5rem; }
  .track-row { height: 41px; }
  .sample-block { height: 28px; font-size: 0.94em; }
  .mixer-channel { min-width: 58px; padding: 4px 6px; }
  .mixer-bar { gap: 7px; }
}
@media (max-width: 600px) {
  #mainContent, .timeline-wrap, #timelineInner { min-width: 430px; }
  .header-main { font-size: 1.05rem; margin-top: 10px; }
  .header-sub { font-size: 0.89rem; }
  .transport-bar { flex-wrap: wrap; gap: 7px; }
  .mixer-bar { padding: 5px 2px 0 2px; flex-wrap: wrap; }
  .mixer-channel { min-width: 36px; padding: 3px 2px; }
}

/* Slider/fader appearance (modern browsers) */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: #2a172a;
  height: 4.5px;
  border-radius: 2.5px;
  outline: none;
  box-shadow: 0 1px 4px #fa2c, 0 1px 1px #2315;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg,#f22 0%,#fa2 100%);
  border: 2.2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 8px #fa24, 0 2px 2px #000a;
  transition: background 0.17s;
}
input[type=range]:focus::-webkit-slider-thumb { background: #fff; border-color: #fa2; }
input[type=range]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg,#f22 0%,#fa2 100%);
  border: 2.2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 8px #fa24, 0 2px 2px #000a;
  transition: background 0.17s;
}
input[type=range]:focus::-moz-range-thumb { background: #fff; border-color: #fa2; }
input[type=range]:focus { outline: 2px solid #fa2; }
input[type=range]::-ms-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg,#f22 0%,#fa2 100%);
  border: 2.2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 8px #fa24, 0 2px 2px #000a;
  transition: background 0.17s;
}

/* Remove inner border and appearance for all browsers */
input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper {
  background: #2a172a;
  border-radius: 2.5px;
}
input[type=range]:focus::-ms-fill-lower { background: #fa2; }
input[type=range]:focus::-ms-fill-upper { background: #fa2; }

input[type=range]::-moz-range-track {
  background: #2a172a;
  border-radius: 2.5px;
}
input[type=range]:focus { outline: none; }

/* Hide number input arrows for bpm on Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Button style tweaks for accessibility/focus */
button:focus, input:focus {
  outline: 2px solid #fa2;
  outline-offset: 1.5px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  height: 11px; width: 11px; background: #1c1525;
  border-radius: 9px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,#fa2 30%,#ff5964 90%);
  border-radius: 8px;
}

/* Misc Utility */
[aria-label]:focus::after {
  content: attr(aria-label);
  position: absolute;
  background: #111;
  color: #fa2;
  padding: 2px 10px;
  font-size: 0.9em;
  border-radius: 7px;
  left: 110%;
  top: 0;
  z-index: 999;
}

/* Animation for playhead movement */
@keyframes playhead-glow {
  0%   { box-shadow: 0 0 12px #ffef, 0 1px 3px #fa33; }
  60%  { box-shadow: 0 0 27px #fff8, 0 2px 5px #fa34; }
  100% { box-shadow: 0 0 12px #ffef, 0 1px 3px #fa33; }
}
#playhead {
  animation: playhead-glow 1.4s infinite;
}