/* PulseDeck Web — hardware-style 3D controls */
.hardware-layout .deck,
.hardware-layout .pro-center-mixer {
  border: 1px solid #4b525c !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 18%),
    linear-gradient(180deg, #242a31 0%, #151a20 46%, #0d1116 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 5px rgba(0,0,0,.75),
    0 8px 18px rgba(0,0,0,.55) !important;
}

.hardware-layout button {
  position: relative;
  border: 1px solid #020305 !important;
  color: #e9edf2;
  background: linear-gradient(180deg, #3d444d 0%, #252b32 42%, #11151a 48%, #20262c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 2px rgba(0,0,0,.78),
    0 3px 0 #050608,
    0 5px 8px rgba(0,0,0,.55) !important;
  text-shadow: 0 1px 2px #000;
  transition: transform 70ms ease, filter 90ms ease, box-shadow 90ms ease;
}

.hardware-layout button:hover {
  filter: brightness(1.18);
}

.hardware-layout button:active,
.hardware-layout button.active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.8),
    inset 0 0 12px rgba(255,255,255,.08),
    0 1px 0 #020304 !important;
}

.transport {
  min-height: 84px;
  align-items: center !important;
}

.transport .play {
  justify-self: center;
  width: 76px !important;
  min-width: 76px;
  height: 76px !important;
  padding: 0 !important;
  border: 3px solid #152019 !important;
  border-radius: 50% !important;
  color: #f5fff7 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background:
    radial-gradient(circle at 38% 28%, #aaffae 0 5%, #44ce58 19%, #168e31 48%, #073b15 72%, #06150b 100%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -7px 10px rgba(0,0,0,.75),
    0 0 0 3px #070a08,
    0 0 0 6px #50ff69,
    0 5px 0 #06160a,
    0 8px 16px rgba(0,0,0,.8),
    0 0 24px rgba(68,255,98,.45) !important;
}

.transport .play.playing {
  color: #fff !important;
  filter: brightness(1.25);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.8),
    0 0 0 3px #070a08,
    0 0 0 6px #7bff8b,
    0 0 30px rgba(64,255,94,.8) !important;
}

.transport .cue {
  justify-self: center;
  width: 62px !important;
  min-width: 62px;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #fff4dc !important;
  font-weight: 900 !important;
  background: radial-gradient(circle at 38% 28%, #5f5140, #2b251d 40%, #14100b 72%, #080706) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.32),
    inset 0 -6px 8px #000,
    0 0 0 3px #080909,
    0 0 0 6px #ff941f,
    0 5px 0 #261202,
    0 8px 14px #000,
    0 0 18px rgba(255,139,22,.38) !important;
}

.deck-a .transport .sync,
.deck-a .performance button.active,
.deck-a .pad-mode-buttons button.active {
  color: #ffad3d !important;
  border-color: #ff8500 !important;
  box-shadow: inset 0 0 10px #ff850033, 0 3px 0 #080402, 0 0 10px #ff850044 !important;
}

.deck-b .transport .sync,
.deck-b .performance button.active,
.deck-b .pad-mode-buttons button.active {
  color: #ff668a !important;
  border-color: #ff2458 !important;
  box-shadow: inset 0 0 10px #ff245833, 0 3px 0 #080204, 0 0 10px #ff245844 !important;
}

.performance button {
  min-height: 48px;
  border-radius: 6px !important;
  font-weight: 800;
}

.deck-a .performance button {
  border-bottom: 3px solid #ff8500 !important;
}

.deck-b .performance button {
  border-bottom: 3px solid #ff2458 !important;
}

.pad-mode-buttons button,
.transport button:not(.play):not(.cue) {
  min-height: 36px;
  border-radius: 5px !important;
  font-weight: 800;
}

.pro-center-mixer .mixer-top-row button,
.pro-center-mixer .cue-row button {
  border-radius: 5px !important;
  color: #80ecff !important;
  border-bottom: 3px solid #32d9f4 !important;
}

.hardware-layout input[type="range"] {
  accent-color: #4ddaf5;
}

.hardware-layout input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid #050608;
  border-radius: 2px;
  background: linear-gradient(180deg, #050608, #1d2329 52%, #050608);
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #4a5159;
}

.hardware-layout input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 31px;
  margin-top: -12px;
  border: 1px solid #050608;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(90deg, #090b0d 0 18%, #c4c9cd 19% 28%, #4c5359 29% 44%, #f2f3f4 45% 55%, #4c5359 56% 72%, #c4c9cd 73% 82%, #090b0d 83%);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 4px #000b, 0 3px 5px #000;
}

.eq-strip input[type="range"]::-webkit-slider-thumb,
.mixer-channel input[type="range"]::-webkit-slider-thumb,
.head-controls input[type="range"]::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecf2f5, #555d65 35%, #15191e 70%, #050607);
}

.interface-white .hardware-layout button {
  color: #10151a;
  text-shadow: 0 1px #fff;
  background: linear-gradient(180deg, #fff, #cfd4d8 45%, #929aa1 50%, #e9ecee) !important;
}

.login-reset-password {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d6aa39;
  border-radius: 6px;
  color: #f0cb62;
  background: linear-gradient(180deg, #302712, #100d08);
  font-weight: 900;
  cursor: pointer;
}

.login-reset-password:hover {
  color: #111;
  background: linear-gradient(180deg, #ffe99b, #c99020);
}