/* ==========================================================================
   neМУЗЫКА iOS 27 NATIVE DESIGN SYSTEM
   Deep Black (#000000), Apple Glass Polish, Red-Pink Accent (#fa2d48)
   ========================================================================== */

:root {
  --ios-bg: #000000;
  --ios-card-bg: #1c1c1e;
  --ios-card-subtle: #2c2c2e;
  --ios-pink: #fa2d48;
  --ios-pink-hover: #ff3b56;
  --ios-accent: #fa2d48;
  --ios-text-primary: #ffffff;
  --ios-text-secondary: #8e8e93;
  --ios-text-tertiary: #636366;
  --ios-separator: rgba(255, 255, 255, 0.1);
  --ios-glass-bg: rgba(28, 28, 30, 0.92);
  --ios-dock-bg: rgba(18, 18, 20, 0.94);
  --ios-top-clearance: calc(env(safe-area-inset-top, 24px) + 55px);
  --ios-bottom-clearance: calc(env(safe-area-inset-bottom, 20px) + 140px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body.ios-apple-theme {
  background-color: var(--ios-bg);
  color: var(--ios-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
  position: fixed;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient dynamic background */
.ios-ambient-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 15%, rgba(250, 45, 72, 0.09) 0%, transparent 60%);
  transition: background 0.8s ease;
}

.ios-app-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

/* Main Content Area */
.ios-main-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--ios-top-clearance);
  padding-bottom: var(--ios-bottom-clearance);
}

.tab-pane {
  display: none;
  padding: 0 16px;
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Nav Header */
.ios-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 16px 0;
}

.ios-large-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: #ffffff;
}

.ios-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ios-circle-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3a3a3c;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Shelves & Sections */
.ios-shelf-section {
  margin-top: 28px;
}

.shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.shelf-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.shelf-chevron {
  color: var(--ios-text-secondary);
  font-size: 18px;
}

/* ==========================================================================
   TAB 1: ГЛАВНАЯ (HOME)
   ========================================================================== */

.ios-hero-banner {
  background: linear-gradient(135deg, #fa1b43 0%, #c4002d 60%, #80001a 100%);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(250, 45, 72, 0.25);
  margin-bottom: 24px;
}

.hero-edition-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-bottom: 8px;
}

.hero-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 20px;
}

.hero-3d-graphic {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 80px;
  margin: 12px 0 20px 0;
}

.sound-pill-bar {
  width: 14px;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255, 220, 225, 0.95));
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: pulseHeight 2s ease-in-out infinite alternate;
}

.sound-pill-bar.b1 { height: 35px; animation-delay: 0.1s; }
.sound-pill-bar.b2 { height: 60px; animation-delay: 0.3s; }
.sound-pill-bar.b3 { height: 80px; animation-delay: 0.5s; }
.sound-pill-bar.b4 { height: 75px; animation-delay: 0.2s; }
.sound-pill-bar.b5 { height: 65px; animation-delay: 0.4s; }
.sound-pill-bar.b6 { height: 45px; animation-delay: 0.6s; }
.sound-pill-bar.b7 { height: 30px; animation-delay: 0.25s; }

@keyframes pulseHeight {
  0% { transform: scaleY(0.7); }
  100% { transform: scaleY(1.05); }
}

.hero-footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-cta-btn {
  background: #ffffff;
  color: #d1002c;
  border: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.15s ease;
}

.hero-cta-btn:active {
  transform: scale(0.96);
}

.hero-subtext {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* Playlists Made for You (Horizontal Deck) */
.ios-card-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.ios-card-carousel::-webkit-scrollbar {
  display: none;
}

.ios-curated-card {
  flex: 0 0 210px;
  height: 240px;
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: start;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}

.ios-curated-card:active {
  transform: scale(0.97);
}

.card-gradient-blue { background: linear-gradient(160deg, #1d72b8 0%, #0d3b66 100%); }
.card-gradient-orange { background: linear-gradient(160deg, #e65100 0%, #bf360c 100%); }
.card-gradient-purple { background: linear-gradient(160deg, #7b1fa2 0%, #4a148c 100%); }
.card-gradient-gold { background: linear-gradient(160deg, #d97706 0%, #78350f 100%); }

.curated-logo {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.curated-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.curated-artists {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stations 2x2 Grid */
.ios-stations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.station-tile {
  background: var(--ios-card-bg);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.station-tile:active {
  transform: scale(0.97);
}

.station-art-badge {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.station-tile-pink .station-art-badge { background: linear-gradient(135deg, #ff2d55, #a80036); }
.station-tile-blue .station-art-badge { background: linear-gradient(135deg, #007aff, #003e85); }
.station-tile-red .station-art-badge { background: linear-gradient(135deg, #ff3b30, #800000); }
.station-tile-violet .station-art-badge { background: linear-gradient(135deg, #af52de, #491763); }

.station-meta .station-brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--ios-pink);
  display: block;
}

.station-meta .station-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.station-meta .station-tag {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Featured Artists Carousel */
.ios-artists-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.ios-artists-carousel::-webkit-scrollbar {
  display: none;
}

.artist-avatar-card {
  flex: 0 0 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.artist-circle-img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

.artist-circle-name {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* ==========================================================================
   TAB 2: МИКСЫ (MIXES & МОЯ ВОЛНА)
   ========================================================================== */

.ios-wave-hero-card {
  background: linear-gradient(135deg, #fa1b43 0%, #ff5e00 100%);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(250, 45, 72, 0.35);
  margin-bottom: 24px;
}

.wave-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.wave-badge {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
}

.wave-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.wave-title {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.wave-desc {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.wave-play-cluster {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wave-hero-play-btn {
  background: #ffffff;
  color: #fa2d48;
  border: none;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: transform 0.15s ease;
}

.wave-hero-play-btn:active {
  transform: scale(0.96);
}

.wave-hero-play-btn svg path {
  fill: #fa2d48;
}

.wave-bars-anim {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}

.wave-bars-anim span {
  width: 4px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  animation: barBounce 1.2s ease-in-out infinite alternate;
}

.wave-bars-anim span:nth-child(1) { height: 12px; animation-delay: 0.1s; }
.wave-bars-anim span:nth-child(2) { height: 24px; animation-delay: 0.3s; }
.wave-bars-anim span:nth-child(3) { height: 18px; animation-delay: 0.5s; }
.wave-bars-anim span:nth-child(4) { height: 28px; animation-delay: 0.2s; }
.wave-bars-anim span:nth-child(5) { height: 14px; animation-delay: 0.4s; }

@keyframes barBounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.0); }
}

/* Mixes Grid */
.ios-mixes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mix-card {
  border-radius: var(--radius-lg);
  padding: 16px;
  height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}

.mix-card:active {
  transform: scale(0.97);
}

.mix-card-daily { background: linear-gradient(145deg, #007aff, #004ba0); }
.mix-card-discover { background: linear-gradient(145deg, #af52de, #7928ca); }
.mix-card-russian { background: linear-gradient(145deg, #ff2d55, #a30026); }
.mix-card-night { background: linear-gradient(145deg, #30d158, #006622); }

.mix-card-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.8);
}

.mix-card-name {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.mix-card-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

.mix-play-bubble {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #000000;
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Moods Horizontal Scroll */
.ios-mood-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.ios-mood-scroll::-webkit-scrollbar {
  display: none;
}

.mood-pill-card {
  flex: 0 0 160px;
  background: var(--ios-card-bg);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.08);
  transition: transform 0.15s ease;
}

.mood-pill-card:active {
  transform: scale(0.96);
}

.mood-emoji {
  font-size: 26px;
}

.mood-info .mood-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  display: block;
}

.mood-info .mood-sub {
  font-size: 11px;
  color: var(--ios-text-secondary);
}

/* Tools list */
.ios-tools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ios-tool-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ios-card-bg);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.06);
}

.tool-icon {
  font-size: 24px;
}

.tool-meta {
  flex: 1;
}

.tool-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: block;
}

.tool-desc {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.tool-chevron {
  color: var(--ios-text-secondary);
  font-size: 18px;
}

/* ==========================================================================
   TAB 3: МЕДИАТЕКА (LIBRARY)
   ========================================================================== */

.ios-library-nav-menu {
  margin-top: 8px;
}

.ios-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--ios-separator);
  cursor: pointer;
}

.ios-menu-item:active {
  opacity: 0.7;
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-icon-pink {
  color: var(--ios-pink);
}

.menu-label {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.menu-chevron {
  color: var(--ios-text-tertiary);
  font-size: 20px;
  font-weight: 600;
}

.ios-subview {
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.ios-subview-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ios-back-btn {
  background: transparent;
  border: none;
  color: var(--ios-pink);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.subview-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.ios-action-pill {
  background: var(--ios-pink);
  color: #ffffff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
}

.ios-select-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.ios-glass-select {
  width: 100%;
  appearance: none;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 36px 12px 14px;
  border-radius: var(--radius-md);
  outline: none;
}

.chevron-down {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ios-text-secondary);
  pointer-events: none;
}

.ios-tip-badge {
  background: rgba(250, 45, 72, 0.1);
  color: var(--ios-pink);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.ios-track-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ios-track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ios-card-bg);
  padding: 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.ios-track-item:active {
  transform: scale(0.98);
}

.track-cover-sm {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.track-meta-info {
  flex: 1;
  min-width: 0;
}

.track-name-main {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist-sub {
  font-size: 13px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-drag-handle {
  color: var(--ios-text-tertiary);
  font-size: 18px;
  padding: 6px 8px;
  cursor: grab;
}

/* ==========================================================================
   TAB 4: ПОИСК (SEARCH)
   ========================================================================== */

.ios-search-bar-wrap {
  margin-bottom: 20px;
}

.ios-search-input-pill {
  background: #1c1c1e;
  border-radius: var(--radius-md);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.search-lens-icon {
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

.ios-search-input-pill input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 16px;
  flex: 1;
  min-width: 0;
}

.ios-search-input-pill input::placeholder {
  color: var(--ios-text-secondary);
}

.search-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--ios-pink);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.search-mic-btn {
  background: transparent;
  border: none;
  color: var(--ios-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-discovery-header,
.search-section-header {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.ios-discovery-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.disco-card {
  height: 100px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.disco-card:active {
  transform: scale(0.96);
}

.disco-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.disco-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* Live Search Results */
.search-artists-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 6px;
}

.search-artist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ios-card-bg);
  padding: 8px 14px;
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
}

.search-artist-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.search-artist-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

/* ==========================================================================
   ARTIST PAGE (Opens ON TOP of Player with z-index 2000 & Safe Telegram Top)
   ========================================================================== */

.ios-artist-page {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 2000; /* Higher than Now Playing Modal (1400) */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--ios-bottom-clearance);
  animation: slideInPage 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInPage {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Safe Area Inset so Back & Options buttons NEVER collide with Telegram controls */
.artist-nav-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 24px) + 55px) 16px 12px 16px;
  z-index: 30;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.artist-nav-circle-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  background: rgba(28, 28, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.artist-header-stage {
  position: relative;
  width: 100%;
  height: 380px;
  margin-top: calc(-1 * (env(safe-area-inset-top, 24px) + 95px));
}

.artist-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artist-header-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 60%, #000000 100%);
}

.artist-header-content {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  text-align: center;
}

.artist-upcoming-badge {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.artist-header-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #ffffff;
  margin-bottom: 16px;
}

.artist-actions-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.artist-action-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  border: none;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.artist-hero-play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
}

.artist-hero-play-btn:active {
  transform: scale(0.92);
}

.artist-body-container {
  padding: 0 16px;
}

/* Latest Release Card */
.artist-release-card {
  background: var(--ios-card-bg);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  border: 0.5px solid rgba(255,255,255,0.06);
}

.release-art img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.release-meta {
  flex: 1;
  min-width: 0;
}

.release-date {
  font-size: 11px;
  color: var(--ios-text-secondary);
  display: block;
}

.release-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release-type {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.release-add-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ios-pink);
  color: #ffffff;
  border: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.artist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.artist-section-header .section-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.artist-songs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.artist-albums-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
}

.artist-album-card {
  flex: 0 0 140px;
  cursor: pointer;
}

.artist-album-card img {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-bottom: 6px;
}

.artist-album-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-album-year {
  font-size: 11px;
  color: var(--ios-text-secondary);
}

/* ==========================================================================
   PERSISTENT FLOATING MINI-PLAYER PILL
   ========================================================================== */

.ios-mini-player {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 74px;
  z-index: 900;
  height: 56px;
  background: var(--ios-glass-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: var(--radius-lg);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.ios-mini-player:active {
  transform: scale(0.98);
}

.mini-art-wrap {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: #2c2c2e;
  position: relative;
  flex-shrink: 0;
}

.mini-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.mini-art.visible {
  display: block;
}

.mini-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-info {
  flex: 1;
  min-width: 0;
}

.mini-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-artist {
  font-size: 12px;
  color: var(--ios-text-secondary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-ctrl-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

/* ==========================================================================
   NAVIGATION DOCK & KEYBOARD PREVENTION
   ========================================================================== */

.ios-apple-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  background: var(--ios-dock-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  z-index: 850;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.dock-tab {
  background: transparent;
  border: none;
  color: var(--ios-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
  width: 25%;
}

.dock-tab svg {
  transition: transform 0.15s ease;
}

.dock-tab.active {
  color: var(--ios-pink);
}

.dock-tab.active svg {
  transform: scale(1.05);
}

/* Prevent dock & mini-player from jumping over virtual keyboard on mobile */
body.keyboard-open .ios-apple-dock,
body.keyboard-open .ios-mini-player {
  transform: translateY(160px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   EXPANDED NOW PLAYING MODAL (Scrollable with Embedded Queue)
   ========================================================================== */

.ios-player-modal {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, #1c1c1e 0%, #000000 65%);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.player-modal-top-stage {
  padding-top: calc(env(safe-area-inset-top, 24px) + 40px);
  padding-bottom: 12px;
  flex-shrink: 0;
}

.player-modal-grabber {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 auto;
  cursor: pointer;
}

.player-modal-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 24px calc(env(safe-area-inset-bottom, 20px) + 40px) 24px;
}

.ios-art-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1/1;
}

.ios-art-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  filter: blur(40px);
  opacity: 0.6;
  background-size: cover;
  transition: background-image 0.5s ease;
}

.ios-art-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.ios-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ios-visualizer-container {
  width: 100%;
  max-width: 320px;
  margin: 14px auto 8px auto;
  display: flex;
  justify-content: center;
}

/* Track Meta */
.ios-track-meta {
  margin: 12px 0;
}

.meta-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-text {
  flex: 1;
  min-width: 0;
}

.ios-track-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-track-artist {
  font-size: 17px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-track-artist.clickable {
  cursor: pointer;
  color: var(--ios-pink);
  font-weight: 600;
}

.track-star-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Scrubber (Zero-Lag) */
.ios-scrubber-section {
  margin: 10px 0 20px 0;
}

.ios-slider-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  touch-action: none;
}

.ios-slider-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 3px;
  width: 0%;
  pointer-events: none;
}

.ios-slider-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
}

.ios-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ios-text-secondary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Controls Cluster */
.ios-controls-cluster {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 320px;
  margin: 0 auto 20px auto;
  width: 100%;
}

.ios-icon-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.ios-play-hero {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

/* Volume */
.ios-modal-volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto 20px auto;
  width: 100%;
}

.vol-icon {
  color: var(--ios-text-secondary);
}

.vol-slider-wrap {
  flex: 1;
}

.vol-slider-wrap input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

.vol-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
}

/* Centered Tools Row */
.ios-modal-actions-dock.centered-tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  margin: 0 auto 28px auto;
  width: 100%;
}

.modal-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Embedded Queue inside Player */
.player-queue-container {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.queue-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.queue-heading {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.queue-count-badge {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.player-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   STUDIO EQUALIZER SHEET (Prominent Close Button & Rich Background)
   ========================================================================== */

.ios-studio-sheet,
.ios-lyrics-sheet,
.ios-wrapped-modal {
  position: fixed;
  inset: 0;
  background: #121214;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 2200;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 24px) + 55px) 20px 30px 20px;
  overflow-y: auto;
  animation: slideUpSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-grabber {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 auto 16px auto;
  cursor: pointer;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-meta h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}

.sheet-sub {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

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

.sheet-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sheet-close-btn:active {
  background: rgba(255, 255, 255, 0.3);
}

.eq-master-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eq-toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ios-pink);
}

.ios-switch,
.ios-switch-sm {
  position: relative;
  display: inline-block;
}

.ios-switch {
  width: 46px;
  height: 26px;
}

.ios-switch-sm {
  width: 38px;
  height: 22px;
}

.ios-switch input,
.ios-switch-sm input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ios-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #39393d;
  transition: 0.3s;
  border-radius: 26px;
}

.ios-switch .ios-switch-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.ios-switch-sm .ios-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.ios-switch input:checked + .ios-switch-slider,
.ios-switch-sm input:checked + .ios-switch-slider {
  background-color: #34c759;
}

.ios-switch input:checked + .ios-switch-slider:before {
  transform: translateX(20px);
}

.ios-switch-sm input:checked + .ios-switch-slider:before {
  transform: translateX(16px);
}

.eq-card-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.eq-glass-card {
  background: #1c1c1e;
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 0.5px solid rgba(255,255,255,0.08);
}

.card-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ios-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.knob-control-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eq-range-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

.eq-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
}

.knob-readout {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-align: right;
}

.eq-spatial-card {
  margin-bottom: 16px;
}

.card-header-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-headline-sm {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.spatial-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spatial-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spatial-label {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.eq-glass-select-sm, .eq-glass-select {
  background: #2c2c2e;
  border: none;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  outline: none;
}

.eq-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.eq-mode-segments {
  display: flex;
  background: #2c2c2e;
  border-radius: var(--radius-md);
  padding: 2px;
}

.eq-seg-btn {
  background: transparent;
  border: none;
  color: var(--ios-text-secondary);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.eq-seg-btn.active {
  background: #ffffff;
  color: #000000;
}

.eq-preset-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eq-reset-btn {
  background: #2c2c2e;
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}

.eq-mode-view {
  display: none;
}

.eq-mode-view.active {
  display: block;
}

.simple-eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.simple-band-card {
  background: #1c1c1e;
  border-radius: var(--radius-lg);
  padding: 14px;
  text-align: center;
}

.band-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--ios-pink);
  margin-bottom: 12px;
}

.knob-container {
  margin: 12px 0;
}

.band-knob-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

.band-knob-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
}

.band-db-badge {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 8px;
}

.band-freq-sub {
  font-size: 10px;
  color: var(--ios-text-secondary);
}

.eq-preamp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1c1c1e;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.preamp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-secondary);
}

.preamp-badge {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.eq-sliders-board {
  background: #1c1c1e;
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.eq-scale-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ios-text-tertiary);
  padding-bottom: 24px;
}

.eq-bands-wrapper {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.eq-band-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.channel-freq {
  font-size: 10px;
  font-weight: 600;
  color: var(--ios-text-secondary);
}

.fader-track {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fader-zero-line {
  position: absolute;
  top: 50%;
  left: -2px;
  right: -2px;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.eq-fader {
  -webkit-appearance: slider-vertical;
  width: 24px;
  height: 110px;
}

.channel-db {
  font-size: 9px;
  color: var(--ios-text-tertiary);
}

.tempo-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tempo-pill {
  background: #2c2c2e;
  border: none;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tempo-pill.active {
  background: var(--ios-pink);
}

/* Lyrics */
.sheet-lyrics-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lyrics-line {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.35;
  transition: all 0.25s ease;
  cursor: pointer;
}

.lyrics-line.active {
  color: #ffffff;
  transform: scale(1.04);
  transform-origin: left center;
}

.lyrics-empty-state {
  text-align: center;
  padding: 40px 0;
  color: var(--ios-text-secondary);
}

/* Artist Bio Modal */
.ios-bio-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bio-modal-card {
  background: var(--ios-card-bg);
  border-radius: var(--radius-xl);
  padding: 24px;
  max-width: 400px;
  width: 100%;
  border: 0.5px solid rgba(255,255,255,0.1);
}

.bio-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bio-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.bio-close-btn {
  background: #2c2c2e;
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
}

.bio-genre-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-pink);
  margin-bottom: 14px;
}

.bio-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* Utilities */
.hidden { display: none !important; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}