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

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
}

body {
  background: #000000;
  overflow: hidden;
}

/* =========================================
   HEADER
========================================= */

.header {
  height: 64px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 18px;

  border-bottom: 1px solid #121212;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.4px;
}

.meta,
.header-link,
.meta-title,
.section-label,
.meta-label,
.np-label {
  font-size: 10px;
  opacity: 0.45;
  letter-spacing: 0.4px;
}

.header-link {
  text-decoration: none;

  transition: opacity 0.15s ease;
}

.header-link:hover {
  opacity: 1;
}

/* =========================================
   GRID
========================================= */

.grid {
  display: flex;
  height: calc(100vh - 154px);
}

/* =========================================
   LIBRARY
========================================= */

.library {
  width: 28%;
  min-width: 280px;

  border-right: 1px solid #121212;

  padding: 15px;

  overflow-y: auto;
}

.track-list {
  margin-top: 10px;
}

.track {
  border: 1px solid #121212;

  padding: 11px;

  margin-bottom: 8px;

  cursor: pointer;

  font-size: 11px;

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.track:hover {
  border-color: #ffffff;
  background: #050505;
}

.track.active {
  border-color: #ffffff;
}

/* =========================================
   VISUAL
========================================= */

.visual {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-layout {
  width: 92%;
  height: 84%;

  display: flex;
  gap: 14px;
}

/* =========================================
   VISUALIZER
========================================= */

.grid-wall {
  flex: 1;

  border: 1px solid #121212;

  position: relative;

  overflow: hidden;
}

#waveCanvas {
  width: 100%;
  height: 100%;

  display: block;
}

/* =========================================
   METADATA
========================================= */

.meta-panel {
  width: 190px;

  border: 1px solid #121212;

  padding: 12px;
}

.meta-title {
  margin-bottom: 14px;
}

.meta-block {
  margin-bottom: 14px;
}

.meta-block:last-child {
  margin-bottom: 0;
}

.meta-label {
  margin-bottom: 4px;
}

.meta-block div:last-child {
  font-size: 11px;
}

/* =========================================
   PLAYER
========================================= */

.player {
  height: 90px;

  border-top: 1px solid #121212;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  padding: 0 20px;
}

/* =========================================
   NOW PLAYING
========================================= */

.now-playing {
  position: absolute;

  left: 20px;

  display: flex;
  align-items: center;

  gap: 10px;
}

#albumCover {
  width: 40px;
  height: 40px;

  object-fit: cover;

  border: 1px solid #ffffff;

  background: #000000;

  padding: 1px;
}

.now-text {
  display: flex;
  flex-direction: column;
}

#playerNowTitle {
  margin-top: 4px;
  font-size: 11px;
}

/* =========================================
   PLAYER CENTER
========================================= */

.player-center {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;
}

/* =========================================
   CONTROLS
========================================= */

.controls {
  display: flex;
  gap: 8px;
}

.controls button {
  background: transparent;

  border: 1px solid #121212;

  padding: 6px 10px;

  font-size: 10px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.controls button:hover {
  border-color: #ffffff;
  background: #050505;
}

/* =========================================
   TIME
========================================= */

.time-row {
  width: 320px;

  display: flex;
  justify-content: space-between;

  font-size: 10px;

  opacity: 0.45;
}

/* =========================================
   BAR
========================================= */

.bar {
  width: 320px;
  height: 10px;

  border: 1px solid #121212;

  background: #0b0b0b;

  cursor: pointer;

  position: relative;

  overflow: hidden;
}

#barFill {
  width: 0%;
  height: 100%;

  background: #ffffff;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

  body {
    overflow: auto;
  }

  .grid {
    flex-direction: column;
    height: auto;
  }

  .library {
    width: 100%;
    min-width: 100%;

    border-right: none;
    border-bottom: 1px solid #121212;
  }

  .visual {
    padding: 20px;
  }

  .visual-layout {
    flex-direction: column;
    height: auto;
  }

  .grid-wall {
    height: 400px;
  }

  .meta-panel {
    width: 100%;
  }

  .player {
    height: 120px;
  }

  .now-playing {
    left: 14px;
  }
}