/* =====================================================
   MOSICI — Kinetic Intimacy Design System
   M3 Color Tokens + Glassmorphism + Sonic Wave
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ── Tokens ─────────────────────────────────────── */
:root {
  --primary:                 #a855f7;
  --primary-fixed:           #e9d5ff;
  --primary-fixed-dim:       #d8b4fe;
  --primary-container:       #9333ea;
  --on-primary:              #ffffff;
  --on-primary-container:    #f3e8ff;
  --on-primary-fixed:        #3b0764;

  --secondary:               #c084fc;
  --secondary-container:     #7e22ce;
  --on-secondary:            #ffffff;
  --on-secondary-container:  #f3e8ff;

  --tertiary:                #f472b6;
  --tertiary-container:      #db2777;
  --on-tertiary:             #ffffff;

  --error:                   #ffb4ab;
  --error-container:         #93000a;
  --on-error:                #690005;

  --surface:                 #131313;
  --surface-dim:             #131313;
  --surface-bright:          #393939;
  --surface-container-lowest:#0e0e0e;
  --surface-container-low:   #1c1b1b;
  --surface-container:       #201f1f;
  --surface-container-high:  #2a2a2a;
  --surface-container-highest:#353534;
  --surface-variant:         #353534;
  --surface-tint:            #a855f7;

  --on-surface:              #e5e2e1;
  --on-surface-variant:      #bbcbb8;
  --outline:                 #859583;
  --outline-variant:         #3c4a3c;

  --background:              #131313;
  --on-background:           #e5e2e1;

  --inverse-surface:         #e5e2e1;
  --inverse-primary:         #006e2d;
  --inverse-on-surface:      #313030;

  /* Typography scale */
  --font-headline: 'Plus Jakarta Sans', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Radii */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-full: 0;

  /* Shadows */
  --shadow-float: 0 24px 32px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.16);
  --shadow-card:  0 4px 16px rgba(0,0,0,0.24);

  /* Player heights */
  --nav-height:    4.5rem;
  --mini-player-h: 4.5rem;
  --top-bar-h:     4rem;
}

/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background:  var(--background);
  color:       var(--on-surface);
  min-height:  100dvh;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-height) + var(--mini-player-h) + 1rem);
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--radius-full); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Material Symbols ───────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
.msf { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Top App Bar ────────────────────────────────── */
#top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-bar-h);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 100;
  transition: background 0.3s;
}
#top-bar.scrolled {
  background: rgba(19,19,19,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#top-bar .wordmark {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.icon-btn {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.icon-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.icon-btn:active { transform: scale(0.9); }

.avatar {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  outline: 2px solid rgba(60,74,60,0.25);
  cursor: pointer;
}

/* ── Search Overlay ─────────────────────────────── */
#search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,13,13,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: var(--top-bar-h) 1rem 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
#search-overlay.open { opacity: 1; pointer-events: all; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  padding: 0 1rem;
  height: 3rem;
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface);
}
.search-bar input::placeholder { color: var(--on-surface-variant); }
.search-results { margin-top: 1.5rem; overflow-y: auto; flex: 1; }

/* ── Main Content ───────────────────────────────── */
main {
  padding-top: calc(var(--top-bar-h) + 1rem);
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 56rem;
  margin: 0 auto;
}

/* ── Tabs ───────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 1.5rem;
}
.tab-btn {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.tab-btn:active { transform: scale(0.95); }
.tab-btn.active {
  background: var(--primary);
  color: var(--on-primary);
}

/* ── Hero Bento Grid ────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .bento-grid { grid-template-columns: 2fr 1fr; }
}

.hero-card {
  position: relative;
  height: 16rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  group: true;
}
.hero-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
  display: block;
}
.hero-card:hover img { transform: scale(1.05); }
.hero-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}
.hero-card-badge {
  font-family: var(--font-headline);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.375rem;
}
.hero-card-title {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}
.hero-card-sub {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}

.discovery-card {
  background: rgba(69,213,108,0.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 12rem;
  position: relative;
  overflow: hidden;
}
.discovery-card::before {
  content: '';
  position: absolute;
  top: -2rem; right: -2rem;
  width: 8rem; height: 8rem;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(101,242,133,0.12) 0%, transparent 70%);
}
.discovery-card h3 {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.discovery-card p {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  line-height: 1.6;
}
.play-fab {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  align-self: flex-end;
  box-shadow: 0 4px 16px rgba(101,242,133,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.play-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(101,242,133,0.5); }
.play-fab:active { transform: scale(0.92); }

/* ── Section Header ─────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}
.see-all-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 0.25rem 0;
  transition: opacity 0.15s;
}
.see-all-btn:hover { opacity: 0.75; }

/* ── Song List ──────────────────────────────────── */
.song-list { display: flex; flex-direction: column; gap: 0.25rem; }

.song-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.18s;
  position: relative;
}
.song-item:hover { background: var(--surface-container-high); }
.song-item.active { background: var(--surface-container); }
.song-item:active { background: var(--surface-container-highest); }

.song-thumb {
  position: relative;
  width: 3.25rem; height: 3.25rem;
  flex-shrink: 0;
}
.song-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--surface-container-high);
}
.song-thumb-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s;
  color: #fff;
}
.song-item:hover .song-thumb-overlay { opacity: 1; }
.song-item.active .song-thumb-overlay { opacity: 1; background: rgba(0,0,0,0.6); }

.song-info { flex: 1; min-width: 0; }
.song-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
  transition: color 0.18s;
}
.song-item.active .song-name { color: var(--primary); }
.song-artist {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-album {
  display: none;
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  font-weight: 500;
  margin-right: 1rem;
  white-space: nowrap;
}
@media (min-width: 640px) { .song-album { display: block; } }

.song-duration {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  font-weight: 500;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.more-btn {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.18s, background 0.15s, color 0.15s;
}
.song-item:hover .more-btn { opacity: 1; }
.more-btn:hover { background: var(--surface-container-highest); color: var(--on-surface); }

/* Playing animation bars */
.playing-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1rem;
}
.playing-bars span {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--primary);
  animation: barBounce 0.8s ease-in-out infinite alternate;
}
.playing-bars span:nth-child(2) { animation-delay: 0.25s; }
.playing-bars span:nth-child(3) { animation-delay: 0.5s; }
@keyframes barBounce {
  from { height: 4px; opacity: 0.5; }
  to   { height: 14px; opacity: 1; }
}

/* ── Album Grid ─────────────────────────────────── */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
}
.album-card {
  cursor: pointer;
  transition: transform 0.2s;
}
.album-card:hover { transform: translateY(-4px); }
.album-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
  background: var(--surface-container-high);
  box-shadow: var(--shadow-card);
  margin-bottom: 0.625rem;
}
.album-name {
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-artist {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.125rem;
}

/* ── Artist Grid ────────────────────────────────── */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1.5rem 1rem;
}
.artist-card { cursor: pointer; text-align: center; }
.artist-card:hover .artist-img { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.artist-img {
  width: 6rem; height: 6rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto 0.625rem;
  display: block;
  background: var(--surface-container-high);
  transition: transform 0.25s, box-shadow 0.25s;
}
.artist-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface);
}

/* ── Playlists ──────────────────────────────────── */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.playlist-card {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.playlist-card:hover { background: var(--surface-container-high); transform: translateY(-2px); }
.playlist-cover {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--surface-container-high);
}
.playlist-info { padding: 0.75rem; }
.playlist-name {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.125rem;
}
.playlist-meta { font-size: 0.75rem; color: var(--on-surface-variant); }

/* ── Mini Player ────────────────────────────────── */
#mini-player {
  position: fixed;
  bottom: calc(var(--nav-height) + 0.5rem);
  left: 0.5rem; right: 0.5rem;
  height: var(--mini-player-h);
  background: rgba(42,42,42,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
  z-index: 90;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  overflow: hidden;
}
#mini-player.hidden { opacity: 0; pointer-events: none; transform: translateY(1rem); }
#mini-player:active { transform: scale(0.98); }

.mini-thumb {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-container-high);
}
.mini-info { flex: 1; min-width: 0; }
.mini-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-artist {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-controls {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

/* Sonic Wave Progress */
.mini-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--surface-variant);
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-fixed-dim), var(--primary));
  box-shadow: 0 0 8px rgba(101,242,133,0.6);
  border-radius: var(--radius-full);
  transition: width 0.4s linear;
  width: 0%;
}

/* ── Full-Screen Player ──────────────────────────── */
#full-player {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--surface-container-lowest);
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
#full-player.open { transform: translateY(0); }

.fp-bg-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(1.5);
  opacity: 0.25;
  transform: scale(1.1);
  z-index: 0;
}
.fp-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.5rem;
}

.fp-handle-bar {
  width: 2.5rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--on-surface-variant);
  opacity: 0.4;
  margin: 0 auto 1rem;
  cursor: pointer;
}

.fp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.fp-top-title {
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fp-artwork {
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s;
}
.fp-artwork img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-container-high);
}

.fp-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.fp-song-title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fp-song-artist {
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
  margin-top: 0.25rem;
}

.like-btn {
  width: 2.5rem; height: 2.5rem;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
}
.like-btn.liked { color: var(--primary); }
.like-btn:active { transform: scale(0.85); }

/* Sonic Wave Seek Bar */
.seek-container { margin-bottom: 1.25rem; }
.seek-bar-wrap {
  position: relative;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.seek-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-fixed-dim), var(--primary));
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px rgba(101,242,133,0.5);
  pointer-events: none;
  transition: width 0.1s linear;
}
.seek-bar-input {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  height: 20px;
  top: -8px;
}
.seek-knob {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  box-shadow: 0 0 0 4px rgba(114,254,143,0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.1s linear;
}
.seek-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* Playback Controls */
.playback-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.ctrl-btn {
  background: none;
  border: none;
  color: var(--on-surface-variant);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.ctrl-btn:hover { color: var(--on-surface); background: var(--surface-container-high); }
.ctrl-btn:active { transform: scale(0.88); }
.ctrl-btn.active { color: var(--primary); }

.play-pause-btn {
  width: 4rem; height: 4rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(101,242,133,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.play-pause-btn:hover { transform: scale(1.06); box-shadow: 0 6px 32px rgba(101,242,133,0.55); }
.play-pause-btn:active { transform: scale(0.93); }
.play-pause-btn .material-symbols-outlined { font-size: 2rem; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Queue */
.fp-queue {
  flex: 1;
  overflow-y: auto;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
}
.fp-queue-title {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* ── Bottom Navigation ──────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(32,31,31,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem env(safe-area-inset-bottom, 0);
  z-index: 95;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  transition: color 0.15s;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
}
.nav-btn.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.nav-btn .material-symbols-outlined { font-size: 1.4rem; }
.nav-btn.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Context Menu ───────────────────────────────── */
#context-menu {
  position: fixed;
  z-index: 500;
  background: var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0;
  min-width: 13rem;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transform-origin: top right;
  transition: opacity 0.18s, transform 0.18s;
}
#context-menu.open { opacity: 1; pointer-events: all; transform: scale(1); }
.ctx-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--on-surface);
  cursor: pointer;
  transition: background 0.15s;
}
.ctx-item:hover { background: var(--surface-container-highest); }
.ctx-item .material-symbols-outlined { font-size: 1.25rem; color: var(--on-surface-variant); }

/* ── Loading States ─────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-container) 25%,
    var(--surface-container-high) 50%,
    var(--surface-container) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast ──────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--mini-player-h) + 1.5rem);
  left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  z-index: 600;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Empty State ────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--on-surface-variant);
}
.empty-state .material-symbols-outlined { font-size: 3.5rem; opacity: 0.5; }
.empty-state h3 { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 700; color: var(--on-surface); }

/* ── Responsive tweaks ──────────────────────────── */
@media (min-width: 768px) {
  main { padding-left: 1.5rem; padding-right: 1.5rem; }
  .fp-content { padding: 1.5rem 2.5rem; max-width: 36rem; margin: 0 auto; width: 100%; }
  .fp-artwork { width: min(100%, 26rem); }
}

/* ── Spin animation (used by loading spinners) ───── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { display: inline-block; animation: spin 0.75s linear infinite; }

/* ── Playlist Card Play Overlay ─────────────────── */
.playlist-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.playlist-cover-wrap .playlist-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-container-high);
  transition: transform 0.35s ease;
}
.playlist-card:hover .playlist-cover-wrap .playlist-cover {
  transform: scale(1.06);
}
.playlist-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: #fff;
}
.playlist-play-overlay .material-symbols-outlined {
  font-size: 3rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.playlist-card:hover .playlist-play-overlay { opacity: 1; }

/* ── Sheet Backdrop ─────────────────────────────── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sheet-backdrop.open { opacity: 1; pointer-events: all; }

/* ── Add-to-Playlist Bottom Sheet ───────────────── */
#playlist-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 410;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 1rem);
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}
#playlist-sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 2.5rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--on-surface-variant);
  opacity: 0.35;
  margin: 0.75rem auto 0;
  flex-shrink: 0;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.5rem;
  flex-shrink: 0;
}
.sheet-title {
  font-family: var(--font-headline);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--on-surface);
}

.playlist-sheet-list {
  overflow-y: auto;
  padding: 0.375rem 0 1rem;
  flex: 1;
}
.playlist-sheet-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}
.playlist-sheet-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.playlist-sheet-row:hover { background: var(--surface-container); }
.playlist-sheet-row:active { background: var(--surface-container-high); }
.playlist-sheet-row.loading { opacity: 0.6; pointer-events: none; }

.playlist-sheet-cover {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-container-high);
}
.playlist-sheet-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-surface);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-sheet-chevron {
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}
.playlist-sheet-new {
  border-top: 1px solid rgba(60,74,60,0.15);
  margin-top: 0.375rem;
}

/* ── Edit Metadata Modal ─────────────────────────── */
.edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(13,13,13,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.edit-backdrop:has(#edit-modal.open) {
  opacity: 1;
  pointer-events: all;
}
/* Fallback for browsers without :has() */
#edit-modal.open { display: flex; }

#edit-modal {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 42rem;
  max-height: 92dvh;
  overflow-y: auto;
  flex-direction: column;
  padding: 0 0 env(safe-area-inset-bottom, 1.5rem);
  box-shadow: 0 -12px 48px rgba(0,0,0,0.5);
  transform: translateY(110%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
}
#edit-modal.open {
  transform: translateY(0);
}

.edit-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(60,74,60,0.15);
}
.edit-cover {
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-container-high);
}
.edit-modal-title-group { flex: 1; min-width: 0; }
.edit-modal-label {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface);
  display: block;
}
.edit-modal-hint {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  display: block;
  margin-top: 0.125rem;
}

.edit-modal-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.edit-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.edit-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}
.edit-field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.edit-field-input {
  background: var(--surface-container-high);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--on-surface);
  outline: none;
  width: 100%;
  transition: background 0.15s, box-shadow 0.15s;
}
.edit-field-input::placeholder { color: var(--on-surface-variant); opacity: 0.6; }
.edit-field-input:focus {
  background: var(--surface-container-highest);
  box-shadow: 0 0 0 2px rgba(101,242,133,0.35);
}

.edit-modal-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 1.25rem 1.25rem;
  flex-shrink: 0;
}
.edit-cancel {
  flex: 1;
  padding: 0.875rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.edit-cancel:hover  { background: var(--surface-variant); }
.edit-cancel:active { transform: scale(0.97); }

.edit-save {
  flex: 2;
  padding: 0.875rem;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(101,242,133,0.35);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.edit-save:hover  { transform: scale(1.02); box-shadow: 0 6px 28px rgba(101,242,133,0.5); }
.edit-save:active { transform: scale(0.97); }
.edit-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }