/* ============================
   Base / Reset
   ============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: black; /* dark gray */
  color: white;
  font-family: Roboto, Segoe UI, sans-serif;
}

/* Center the app on desktop */
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================
   App container
   ============================ */

.app {
  width: 100%;
  max-width: 520px;
  height: 100svh;

  display: flex;
  flex-direction: column;

  background: #1e1e1e;
  border: 1px solid #444;
}

/* ============================
   Header (sticky)
   ============================ */

.top {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;

  background: #1e1e1e;
  border-bottom: 1px solid #444;
}


/* ============================
   Top bar (row 1)
   ============================ */

.topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}


.topbar__cell {
  min-height: 56px; /* ← makes row slightly taller */
  padding: 10px;

  background: #1e1e1e;
  color: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: center;
}



/* Vertical dividers only between columns */
.topbar__cell:not(:last-child) {
  border-right: 1px solid #444;
}

button.topbar__cell {
  border: none;
  cursor: pointer;
}

button.topbar__cell:active {
  background: #2a2a2a;
}


.topbar__cell .label {
  font-size: 12px;
  opacity: 0.7;
}

.topbar__cell .value {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================
   Now playing (row 2)
   ============================ */

.now-playing {
  display: grid;
  grid-template-columns: 112px 1fr; /* art width */
  border-top: 1px solid #444;
  height: 112px; /* row height */
}

.now-playing__art {
  width: 112px;
  height: 112px;
  background: #333;

  /* if you’re using background-image from JS */
  background-size: cover;
  background-position: center;
}



/* Text */
.now-playing__title {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.now-playing__sub {
  font-size: 15px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 7px;
}

/* Progress */
.now-playing__progress {
  margin-top: 18px;
  padding-right: 10px;
}

.now-playing__bar {
  height: 3px;
  background: #555;
}

.now-playing__meta {
  padding: 10px 18px;
}



.now-playing__fill {
  height: 100%;
  width: 0%;
  background: #ccc;
}


.now-playing__times {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.7;
}

/* ============================
   Sliders area
   ============================ */

.sliders {
  flex: 1 1 auto;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

/* ============================
   Slider cards
   ============================ */

.slider-card {
  border-top: 1px solid #444;
  padding: 10px 28px;
}

/* Labels */
.slider-card__labels {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 15px;
  opacity: 0.7;
}

.slider-card__label--left { text-align: left; }
.slider-card__label--mid { text-align: center; }
.slider-card__label--right { text-align: right; }

/* Slider input */
.slider-card__range {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  accent-color: #bbb;
}


/* ============================
   Panels (overlays)
   ============================ */

.panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);

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

.panel[hidden] {
  display: none;
}

.panel__card {
  width: min(420px, 100%);
  background: #1e1e1e;
  border: 1px solid #444;
  padding: 12px;
}

.panel__actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.panel__button {
  flex: 1;
  background: #1e1e1e;
  color: #ffffff;
  border: 1px solid #444;
  padding: 8px;
  cursor: pointer;
}

.panel__button:active {
  background: #2a2a2a;
}