/* Base layout */
:root {
  --bg-1: #160F26;
  --bg-2: #2A1D47;
  --glass: #ffffff0d;
  --glass-border: #ffffff1a;
  --text: #eae8ff;
  --muted: #c8c3f0;
  --accent: #b782ff;
  --accent-2: #6aa6ff;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #3b2a52 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  overflow-x: hidden;
}

/* Background stars + gradient veil */
#stars {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(70% 50% at 80% 10%, #ffffff1a 0%, transparent 60%);
  mix-blend-mode: screen;
}

/* Window chrome */
.window {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 16px
}

.win-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px #00000040, inset 0 0 0 1px var(--glass-border);
}

.dots {
  display: flex;
  gap: 6px
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  display: inline-block
}

.dot.red {
  background: #ff5f57
}

.dot.yellow {
  background: #febc2e
}

.dot.green {
  background: #28c840
}

.address {
  opacity: .9;
  display: flex;
  gap: 8px;
  align-items: center
}

.address .lock {
  opacity: .6
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b782ff, #6aa6ff);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #111
}

/* Container + glass sections */
.container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 18px
}

.glass {
  background: var(--glass);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 38px #00000045, inset 0 0 0 1px var(--glass-border);
  backdrop-filter: blur(12px);
  margin-bottom: 26px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center
}

.hero-text h1 {
  font-size: clamp(28px, 5vw, 48px);
  margin: 0 0 8px
}

.hero-text h1 span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  color: transparent
}

.hero-text p {
  color: var(--muted);
  margin: 0 0 16px
}

.cta-row {
  display: flex;
  gap: 10px
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--glass-border);
  background: #ffffff10;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #14121e;
  font-weight: 700
}

.btn.ghost:hover {
  background: #ffffff14
}

/* Hero orbs */
.hero-art {
  position: relative;
  height: 220px
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .7
}

.orb-a {
  width: 150px;
  height: 150px;
  background: radial-gradient(#9ad0ff, #0000);
  top: 10%;
  left: 8%
}

.orb-b {
  width: 110px;
  height: 110px;
  background: radial-gradient(#e7b3ff, #0000);
  bottom: 10%;
  right: 18%
}

.orb-c {
  width: 80px;
  height: 80px;
  background: radial-gradient(#ffd08f, #0000);
  top: 25%;
  right: 5%
}

/* Sections */
.section-head h2 {
  margin: 0 0 6px
}

.section-head p {
  margin: 0 0 12px;
  color: var(--muted)
}

/* Now playing badge */
.now-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff10;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  font-size: .9rem;
  margin-bottom: 1rem;
}

/* Tracks grid + cards */
.track-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.track-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff08;
  box-shadow: inset 0 0 0 1px var(--glass-border);
}

.cover {
  position: relative;
  height: 160px;
  display: grid;
  place-items: center;
  overflow: hidden
}

.cover .album {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none
}

.cover-label {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0000003b;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px #ffffff55;
}

.gradient-1 {
  background: linear-gradient(135deg, #8de3ff, #c78fff)
}

.gradient-2 {
  background: linear-gradient(135deg, #9bffb3, #74e2ff)
}

.gradient-3 {
  background: linear-gradient(135deg, #ffc077, #ff75d1)
}

.meta {
  padding: 14px
}

.meta h3 {
  margin: 0 0 6px
}

.meta p {
  margin: 0 0 12px;
  color: var(--muted)
}

.art img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
}


/* Controls */
.controls {
  display: flex;
  align-items: center;
  gap: 8px
}

.play {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  color: #111;
  font-weight: 700;
  background: linear-gradient(135deg, #b6c2ff, #8fb1ff);
}

.track-card.playing .play {
  background: linear-gradient(135deg, #ffd08f, #ff9ad7)
}

.progress {
  flex: 1;
  height: 6px;
  background: #ffffff18;
  border-radius: 999px;
  overflow: hidden
}

.progress .bar {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width .15s linear
}

.time {
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums
}

/* Gallery */
.card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.art-card {
  background: #ffffff08;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--glass-border)
}

.art {
  height: 140px
}

.art-meta {
  padding: 12px
}

.art-meta h4 {
  margin: 0 0 6px
}

/* About */
.about-body p {
  margin: 0 0 12px
}

/* Social */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff10;
  border: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--text)
}

.soc svg {
  width: 20px;
  height: 20px
}

/* Footer */
.foot {
  opacity: .8;
  text-align: center;
  padding: 10px
}

.design {
  position: relative;
  color: var(--text-primary);
}

.design::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

.design:hover::after {
  width: 100%;
}

/* Responsive */
@media (max-width:820px) {
  .hero {
    grid-template-columns: 1fr
  }

  .hero-art {
    order: -1;
    height: 160px
  }
}

/* Extra small screen fix */
@media (max-width: 480px) {
  .track-grid {
    grid-template-columns: 1fr;
    /* stack cards vertically */
  }

  .track-card {
    width: 100%;
    /* force to fit container */
  }

  .cover {
    height: 140px;
    /* slightly shorter cover image */
  }
}