:root{
  /* Neumorphism dark */
  --bg: #0f1116;
  --surface: #121521;
  --surface-2: #14182a;
  --text: #e9edf7;
  --muted: rgba(233,237,247,.68);

  --accent: #7c5cff;

  --shadow-dark: rgba(0,0,0,.55);
  --shadow-light: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.06);

  --radius: 18px;
  --pad: 14px;
  --tap: 48px;
}

*{ box-sizing: border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 650px at 20% -10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(1000px 600px at 95% 10%, rgba(0,208,255,.10), transparent 60%),
    linear-gradient(180deg, #0b0d13, var(--bg) 45%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
}

/* Neumo panel */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow:
    10px 10px 22px var(--shadow-dark),
    -10px -10px 20px var(--shadow-light);
}

/* Sticky player panel */
.player-panel{
  position: sticky;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 10;
  padding: var(--pad);
  backdrop-filter: blur(10px);
}

.topline{
  display:flex;
  gap: 10px;
  align-items: flex-start;
}

.now{
  min-width: 0;
  flex: 1;
}

.now-title{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .2px;
  word-break: break-word;
}

.now-meta{
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
  word-break: break-word;
}

.pill{
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.35),
    inset -2px -2px 6px rgba(255,255,255,.05);
}

.row{
  display:flex;
  gap: 10px;
  align-items: center;
}
.row-gap{ margin-top: 12px; }

.label{
  display:block;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: .2px;
}

.select-wrap{ flex: 1; min-width: 0; }
.select{
  width: 100%;
  height: var(--tap);
  padding: 0 12px;
  border-radius: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  outline: none;
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.45),
    inset -6px -6px 14px rgba(255,255,255,.04);
}
.select:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.45),
    inset -6px -6px 14px rgba(255,255,255,.04),
    0 0 0 3px rgba(124,92,255,.15);
}

.audio{
  width: 100%;
  margin-top: 10px;
}

/* Buttons */
.btn{
  height: var(--tap);
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-2);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;

  box-shadow:
    8px 8px 18px rgba(0,0,0,.55),
    -8px -8px 16px rgba(255,255,255,.05);
}

.btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.45),
    inset -6px -6px 14px rgba(255,255,255,.04);
}

.btn-primary{
  background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(124,92,255,.10));
  border-color: rgba(124,92,255,.55);
}

.btn-ghost{
  background: transparent;
}

.btn-small{
  height: 44px;
  font-size: 13px;
}

.btn-danger{
  border-color: rgba(255,90,90,.35);
  background: linear-gradient(180deg, rgba(255,90,90,.12), rgba(255,90,90,.06));
}

.controls{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.controls.secondary{
  grid-template-columns: 1fr 1fr 1fr;
}

.controls.tertiary{
  grid-template-columns: 1fr;
}

/* Stats + error */
.stats{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,90,90,.35);
  background: rgba(255,90,90,.08);
  color: #ffdede;
  font-size: 13px;
  line-height: 1.35;
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.35),
    inset -6px -6px 14px rgba(255,255,255,.04);
}

/* List */
.list{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cd{
  padding: 0;
}

.cd-head{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor:pointer;
  user-select:none;
}
.cd-head::-webkit-details-marker{ display:none; }

.cd-title{
  font-weight: 950;
}

.cd-badge{
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.35),
    inset -2px -2px 6px rgba(255,255,255,.05);
}

.tracks{
  margin: 0;
  padding: 0;
  list-style:none;
}

.track{
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.track.active{
  background: rgba(124,92,255,.10);
}

.track-play{
  width: 78px;
}

.track-info{
  min-width: 0;
}

.track-name{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

.track-src{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop tweaks */
@media (min-width: 820px){
  .wrap{ padding: 18px 16px 28px; }
  .controls{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .controls.secondary{ grid-template-columns: 1fr 1fr 1fr; }
  .list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}