/* 
 * Rave Web App - Main Styles
 * Complete design system and component library
 */

/* Inter font is now loaded directly in HTML files for better performance */

/* Design System - Color Palette */
:root {
  /* Primary Colors */
  --lime: #DEE63D;
  --card-bg: #EDEDE8;
  --olive: #3E3F05;

  /* Greys */
  --black: #000000;
  --ink: #171712;
  --charcoal: #22221B;
  --ash: #2E2E24;
  --taupe: #50503F;
  --sage: #C8C8B0;
  --stone: #E4E4DD;
  --feather: #EDEDE8;
  --shimmer: #F3F3ED;
  --cloud: #EDEDE8;
  --white: #FFFFFF;

  /* Sentiment Colors */
  --cherry: #7C1A0A;
  --tomato: #C55A26;
  --chard: #3F5711;
  --pea: #7FAE3A;
  --tangerine: #FDC063;
}

/* Design Tokens */
:root {
  /* Background Tokens */
  --bg-primary: #FFFFFF;
  --bg-secondary: #EDEDE8;
  --bg-tertiary: #C8C8B0;
  --bg-negative: #7C1A0A;
  --bg-positive: #3F5711;

  /* Content Tokens */
  --content-primary: #171712;
  --content-secondary: #50503F;
  --content-tertiary: #C8C8B0;
  --content-light: #FFFFFF;
  --content-interactive: #DEE63D;
  --content-negative: #7C1A0A;
  --content-positive: #3F5711;

  /* Border Tokens */
  --border-light: #E4E4DD;
  --border-medium: #C8C8B0;
  --border-dark: #50503F;

  /* Spacing Tokens */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-xxxxl: 40px;

  /* Skeleton Tokens */
  --skeleton-base: #EDEDE8;
  --skeleton-shimmer: #F3F3ED;
}

/* Light mode only - dark mode tokens removed */

/* Typography */
:root {
  /* Display */
  --font-display: 700 40px/44px Inter, sans-serif;

  /* Titles */
  --font-title-screen: 600 30px/30px Inter, sans-serif;
  --font-title-section: 600 26px/32px Inter, sans-serif;
  --font-title-subsection: 600 22px/28px Inter, sans-serif;
  --font-title-body: 600 18px/24px Inter, sans-serif;
  --font-title-group: 400 14px/20px Inter, sans-serif;

  /* Body */
  --font-body-large: 400 16px/24px Inter, sans-serif;
  --font-body-large-bold: 600 16px/24px Inter, sans-serif;
  --font-body-default: 400 14px/22px Inter, sans-serif;
  --font-body-default-bold: 600 14px/22px Inter, sans-serif;

  /* Cards */
  --font-card-title: 600 22px/26px Inter, sans-serif;
  --font-card-description: 400 14px/22px Inter, sans-serif;

  /* Button */
  --font-button-text: 600 16px/24px Inter, sans-serif;
  
  /* Content Styles */
  --font-content-hero: 400 64px/1.1 Inter, sans-serif; /* Large hero text */
  --font-content-title: 600 40px/1.2 Inter, sans-serif; /* Semi-bold titles */
  --font-content-subtitle: 400 24px/1.4 Inter, sans-serif; /* Subtitles and descriptions */
  --font-content-description: 400 18px/1.4 Inter, sans-serif; /* Smaller descriptions */
  --font-content-label: 400 16px/1.45 Inter, sans-serif; /* Labels and small text */
}

/* Typography Classes */
.font-display { font: 700 40px/44px Inter, sans-serif; }
.font-title-screen { font: 600 30px/30px Inter, sans-serif; }
.font-title-section { font: 600 26px/32px Inter, sans-serif; }
.font-title-subsection { font: 600 22px/28px Inter, sans-serif; }
.font-title-body { font: 600 18px/24px Inter, sans-serif; }
.font-title-group { font: 400 14px/20px Inter, sans-serif; }
.font-body-large { font: 400 16px/24px Inter, sans-serif; }
.font-body-large-bold { font: 600 16px/24px Inter, sans-serif; }
.font-body-default { font: 400 14px/22px Inter, sans-serif; }
.font-body-default-bold { font: 600 14px/22px Inter, sans-serif; }
.font-card-title { font: 600 22px/26px Inter, sans-serif; }
.font-card-description { font: 400 14px/22px Inter, sans-serif; }
.font-button-text { font: 600 16px/24px Inter, sans-serif; }

/* Content Typography Classes */
.font-content-hero { 
  font: 400 64px/1.1 Inter, sans-serif; 
  letter-spacing: -2%;
}
.font-content-title { 
  font: 600 40px/1.2 Inter, sans-serif; 
  letter-spacing: -1%;
}
.font-content-subtitle { 
  font: 400 24px/1.4 Inter, sans-serif; 
  letter-spacing: -0.5%;
}
.font-content-description { 
  font: 400 18px/1.4 Inter, sans-serif; 
  letter-spacing: -0.5%;
}
.font-content-label { 
  font: 400 16px/1.45 Inter, sans-serif; 
  letter-spacing: -0.5%;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 400 14px/22px Inter, sans-serif;
  background: #FFFFFF;
  color: #171712;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Avatar Component */
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8C8B0;
  border-radius: 12px;
  overflow: hidden;
}

.avatar--small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.avatar--default {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.avatar--medium {
  width: 80px;
  height: 80px;
  border-radius: 24px;
}

.avatar--extra-large {
  width: 200px;
  height: 200px;
  border-radius: 24px;
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__fallback {
  position: absolute;
  font: 600 14px/22px Inter, sans-serif;
  color: #DEE63D;
  font-weight: 700;
  text-transform: uppercase;
}

.avatar--medium .avatar__fallback {
  font-size: 32px;
  font-weight: 700;
}

.avatar--extra-large .avatar__fallback {
  font-size: 72px;
  font-weight: 700;
}

.avatar--skeleton {
  background: #EDEDE8;
  animation: skeleton-shimmer 2s linear infinite;
}

/* Button Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font: 600 16px/24px Inter, sans-serif;
  text-decoration: none;
}

.btn--large {
  padding: 16px 32px;
  min-height: 56px;
  width: 100%;
}

.btn--small {
  padding: 12px 16px;
  height: 44px;
  gap: 4px;
  font: 400 14px/20px Inter, sans-serif;
}

.btn--primary {
  background: #DEE63D;
  color: #171712;
}

.btn--secondary {
  background: #EDEDE8;
  color: #171712;
  border: 1px solid #171712;
}

.btn--tertiary {
  background: transparent;
  color: #171712;
}

.btn--grey {
  background: #EDEDE8;
  color: #171712;
}

.btn--charcoal {
  background: #22221B;
  color: #FFFFFF;
}

.btn--disabled {
  background: #EDEDE8;
  color: #C8C8B0;
  cursor: not-allowed;
}

.btn--loading {
  pointer-events: none;
}

.btn--skeleton {
  background: #EDEDE8;
  color: transparent;
  animation: skeleton-shimmer 2s linear infinite;
}

.btn__icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btn__loading {
  animation: spin 1s linear infinite;
}

/* Icon Button Component */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: #171712;
}

.icon-btn:hover {
  background: #EDEDE8;
}

/* Card Components */
.card {
  background: #FFFFFF;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

.card--large {
  padding: 8px 16px 8px 16px;
}

.card__content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
}

.card__meta {
  font: 400 14px/22px Inter, sans-serif;
  color: #50503F;
}

.card__title {
  font: 600 18px/24px Inter, sans-serif;
  color: #171712;
  margin: 0;
}

.card__description {
  font: 400 14px/22px Inter, sans-serif;
  color: #50503F;
  margin: 0;
}

.profile-page .card__title {
  color: #22221B !important;
}

.profile-page .card__description {
  color: #22221B !important;
  opacity: 0.7;
}

.profile-page .card__meta {
  color: #22221B !important;
  opacity: 0.5;
}

.card__image {
  position: relative;
  width: 120px;
  aspect-ratio: 4/5;
  background: #C8C8B0;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__image-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  font-weight: 700;
  color: #DEE63D;
  text-transform: uppercase;
}

/* Everything Playlist Special Styling */
.card--everything .card__image {
  background: #DEE63D;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.card--everything .everything-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Image Card (for recommendations) */
.card--image {
  position: relative;
  aspect-ratio: 4/5;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
}

.card__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__overlay {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
}

.card__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.card__stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: #EDEDE8;
  border-radius: 12px;
  font: 400 14px/20px Inter, sans-serif;
  color: #171712;
  min-height: 44px;
}

.card__stat svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.card__stat--ctr {
  background: #C8C8B0;
}

/* Navigation Components */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 8px;
  min-height: 64px;
  background: #FFFFFF;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.nav-btn:hover {
  background: #EDEDE8;
}

.nav-btn svg {
  fill: #171712;
}

.nav-title {
  font: 600 16px/24px Inter, sans-serif;
  color: #171712;
  margin: 0;
  text-align: center;
  flex: 1;
}

.nav-actions {
  display: flex;
  gap: 0;
}

/* Tab Bar */
.tab-bar {
  display: flex;
  background: transparent;
  border-bottom: 1px solid #171712;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: 400 14px/20px Inter, sans-serif;
  color: #50503F;
  transition: color 0.2s ease;
}

.tab-item--active {
  color: #171712;
  border-bottom: 2px solid #171712;
}

.tab-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Grid Layout */
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
}

@media (min-width: 768px) {
  .recommendation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .recommendation-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-item {
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-item:hover {
  transform: scale(1.02);
}

.grid-item .card__title {
  font: 600 18px/24px Inter, sans-serif;
  color: #22221B !important;
  margin: 0;
  text-align: left;
  font-weight: 600;
}

/* Modal Component */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal--active {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.modal__content {
  position: relative;
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  animation: modal-enter 0.3s ease;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  .modal {
    padding: 16px;
  }
  
  .modal__content {
    width: 100%;
    max-height: 90vh;
    border-radius: 20px;
  }
  
  .modal--app-download .modal__content {
    width: 90%;
    height: auto;
    max-height: auto;
  }

  /* Playlist header responsive */
  .playlist-header {
    margin: 12px;
    padding: 16px;
  }

  .header-image,
  .everything-icon {
    width: 100px;
    height: 125px;
  }

  .everything-icon img {
    width: 50px;
  }

  .playlist-title {
    font-size: 20px;
  }

  .playlist-description {
    font-size: 14px;
  }

  .playlist-meta {
    font-size: 12px;
  }
}

/* Page Layouts */
.profile-page {
  min-height: 100vh;
  background: #DEE63D;
  display: flex;
  justify-content: center;
}

.playlist-page {
  min-height: 100vh;
  background: #DEE63D;
  color: #22221B;
}

.mobile-container {
  width: 100%;
  max-width: 430px;
  background: transparent;
  min-height: 100vh;
  padding-top: 40px;
}

.profile-header {
  padding: 16px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 0 16px 16px 16px;
}

.playlist-header {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 16px;
}

.header-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.header-image {
  width: 120px;
  height: 150px;
  border-radius: 20px;
  overflow: hidden;
}

.header-image img,
.header-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.header-text {
  width: 100%;
  text-align: center;
}

.playlist-title {
  margin: 0 0 4px 0;
  color: #22221B !important;
  font-size: 24px;
  font-weight: 600;
}

.playlist-description {
  margin: 0 0 4px 0;
  color: #22221B !important;
  font-size: 16px;
  opacity: 0.7;
}

.playlist-meta {
  margin: 4px 0 0 0;
  color: #22221B !important;
  font-size: 14px;
  opacity: 0.5;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-details {
  flex: 1;
}

.profile-name {
  margin: 0;
  color: #22221B !important;
}

.profile-username {
  margin: 0;
  color: #22221B !important;
  opacity: 0.7;
}

.profile-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.playlists-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.playlist-page {
  min-height: 100vh;
  background: #DEE63D;
  display: flex;
  justify-content: center;
}

.playlist-content {
  overflow-y: auto;
}

.playlist-header {
  padding: 16px;
}

.header-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.header-image {
  width: 120px;
  aspect-ratio: 4/5;
  background: #C8C8B0;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-text {
  flex: 1;
}

.playlist-title {
  margin: 0 0 8px 0;
  color: #171712;
}

.playlist-description {
  margin: 0;
  color: #50503F;
}

.playlist-meta {
  color: #50503F;
}

/* Everything Playlist Icon */
.everything-icon {
  width: 120px;
  height: 150px;
  background: #DEE63D;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.everything-icon img {
  width: 70px;
  height: auto;
  object-fit: contain;
}

/* Playlist Tabs */
.playlist-tabs {
  display: flex;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 0 16px 16px 16px;
  padding: 8px;
}

.playlist-tabs .tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: 400 14px/20px Inter, sans-serif;
  color: #50503F;
  transition: color 0.2s ease;
  border-bottom: 2px solid transparent;
}

.playlist-tabs .tab-item--active {
  color: #171712;
  border-bottom: 2px solid #171712;
}

.playlist-tabs .tab-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* App Download Modal */
.modal--app-download .modal__content {
  max-width: 350px;
  width: 90%;
  max-height: auto;
  padding: 0;
}

.app-download-modal {
  position: relative;
  padding: 24px;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.modal__close:hover {
  background: #EDEDE8;
}

.modal__close svg {
  fill: #50503F;
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.modal__title {
  margin: 0;
  color: #171712;
}

.modal__description {
  margin: 0;
  color: #50503F;
  line-height: 1.5;
}

/* Recommendation Detail */
.recommendation-detail {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#recommendationModal .modal__content {
  background: #FFFFFF;
}

.recommendation-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.recommendation-image {
  position: relative;
  flex: 1;
  aspect-ratio: 4/5;
  background: #EDEDE8;
  border-radius: 20px;
  overflow: hidden;
}

.recommendation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: #EDEDE8;
  border-radius: 12px;
  font: 400 14px/20px Inter, sans-serif;
  color: #171712;
  min-height: 44px;
}

.stat svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.stat--ctr {
  background: #C8C8B0;
}

.recommendation-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.recommendation-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recommendation-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 400 14px/22px Inter, sans-serif;
  color: #22221B !important;
  opacity: 0.7;
  text-decoration: none;
}

.recommendation-link svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.recommendation-title {
  margin: 0;
  color: #22221B !important;
}

.recommendation-description {
  margin: 0;
  color: #22221B !important;
  opacity: 0.8;
}

.recommendation-footer {
  margin-top: auto;
}

/* Skeleton Loading States */
.skeleton {
  background: #FFFFFF; /* Plain white background, no animation */
}

.skeleton-text {
  height: 1em;
  border-radius: 4px;
}

.skeleton-title {
  height: 1.2em;
  border-radius: 4px;
  width: 60%;
}

.skeleton-avatar {
  border-radius: 12px;
}

.skeleton-card {
  border-radius: 20px;
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .profile-header {
    padding: 16px;
  }
  
  .profile-info {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  
  .profile-details {
    flex: 1;
  }
  
  .recommendation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .playlist-header {
    padding: 16px;
  }
  
  .playlist-header-component {
    padding: 16px;
    gap: 16px;
  }
  
  .playlist-header-image {
    width: 120px;
    height: 150px;
  }
  
  .playlist-header-title {
    font-size: 32px;
  }
  
  .playlist-header-description {
    font-size: 16px;
  }
  
  .profile-section-component {
    padding: 12px 16px;
    margin: 0 16px 16px 16px;
  }
  
  .profile-section-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  
  .profile-section-avatar-fallback {
    font-size: 12px;
  }
  
  .header-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  
  .header-image {
    width: 200px;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.p-lg { padding: 16px; }
.mb-lg { margin-bottom: 16px; }

/* Header Component */
.app-header {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  background: #FFFFFF;
  border-bottom: 1px solid #E4E4DD;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 24px;
  line-height: 1.45; /* 145% */
  letter-spacing: -0.48px; /* -2% of 24px */
  color: #171712;
  margin: 0;
}

/* Sign Up Button */
.signup-btn {
  min-width: 89px;
  height: 47px;
  background-color: #DEE63D;
  border: none;
  border-radius: 20px;
  padding: 12px 16px;
  font: 400 16px/1.45 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.signup-btn:hover {
  opacity: 0.9;
}

.signup-btn:active {
  opacity: 0.8;
}

/* Profile Header Component */
.profile-header-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px 20px 20px;
  gap: 24px;
}

.profile-avatar {
  width: 160px;
  height: 160px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  background: #EDEDE8;
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DEE63D;
  color: #171712;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 64px;
  line-height: 1;
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.profile-display-name {
  font: 600 40px/1.2 Inter, sans-serif;
  letter-spacing: -1%;
  color: #171712;
  margin: 0;
}

.profile-username {
  font: 400 18px/1.4 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.55; /* 55% opacity as shown in design */
  margin: 0;
}

/* Playlist Card Component */
.playlist-card {
  max-width: 361px;
  height: 216px;
  background: #EDEDE8;
  border-radius: 32px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.playlist-card:hover {
  opacity: 0.9;
}

.playlist-card-content {
  display: flex;
  height: 100%;
  padding: 8px 8px 8px 16px;
  gap: 16px;
}

.playlist-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  gap: 4px;
}

.playlist-card-count {
  font-size: 14px;
  color: #50503F;
  margin-bottom: 4px;
}

.playlist-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #171712;
  margin: 0;
  line-height: 1.2;
}

.playlist-card-description {
  font-size: 14px;
  color: #50503F;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-card-image {
  width: 160px;
  height: 200px;
  border-radius: 24px;
  overflow: hidden;
  background: #EDEDE8;
  flex-shrink: 0;
}

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

.playlist-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8C8B0;
  color: #C8C8B0;
  font-size: 14px;
}

.playlist-card-image--everything {
  background: #DEE63D;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist-card-image--everything .playlist-card-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Footer Component */
.app-footer {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  background: #FFFFFF;
  border-top: 1px solid #E4E4DD;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.footer-logo-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 24px;
  line-height: 1.45; /* 145% */
  letter-spacing: -0.48px; /* -2% of 24px */
  color: #171712;
  margin: 0;
}

.footer-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-btn {
  background: none;
  border: none;
  font: 400 16px/1.45 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.55; /* 55% opacity as shown in design */
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.footer-btn:hover {
  opacity: 0.7;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-social-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-social-icon:hover {
  opacity: 0.7;
}

/* Mobile responsive - stack footer elements vertically */
@media (max-width: 768px) {
  .app-footer {
    padding: 40px 32px;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }
  
  .footer-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .footer-social {
    display: flex;
    gap: 16px;
  }
}

/* Profile Section Component */
.profile-section-component {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 32px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 0 16px 16px 16px;
}

.profile-section-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow: hidden;
  background: #C8C8B0;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.profile-section-avatar:hover {
  opacity: 0.8;
}

.profile-section-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-section-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DEE63D;
  color: #171712;
  font-weight: 600;
  font-size: 14px;
}

.profile-section-username {
  font: 400 16px/1.45 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.profile-section-username:hover {
  opacity: 0.9;
}

/* Recommendation Card Component */
.recommendation-card {
  width: 176px;
  height: 284px;
  background: #EDEDE8;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.recommendation-card:hover {
  transform: scale(1.02);
}

.recommendation-card-image {
  width: 160px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #C8C8B0;
  margin: 8px 8px 0 8px;
  position: relative;
}

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

.recommendation-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8C8B0;
  color: #C8C8B0;
  font-size: 14px;
}

.recommendation-card-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  background: #EDEDE8;
  opacity: 0.8;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recommendation-card-link-icon {
  width: 24px;
  height: 24px;
}

.recommendation-card-save-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 60px;
  height: 27px;
  background: #EDEDE8;
  opacity: 0.8;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
}

.recommendation-card-bookmark-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.recommendation-card-save-count {
  font: 400 14px/20px Inter, sans-serif;
  color: #171712;
  line-height: 1;
}

.recommendation-card-content {
  padding: 16px 8px 8px 8px;
}

.recommendation-card-title {
  font: 400 16px/1.45 Inter, sans-serif;
  font-weight: 600;
  color: #171712;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed 8px Gap Grid System */
.fixed-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 0;
}

.grid-item {
  flex: 0 0 auto;
}

/* Cards maintain their natural 176px width */
.fixed-grid .grid-item .recommendation-card {
  width: 176px;
}

/* Responsive: adjust side padding based on container width */
@media (min-width: 400px) {
  .fixed-grid {
    padding: 8px calc((100% - (2 * 176px + 8px)) / 2);
  }
}

@media (min-width: 600px) {
  .fixed-grid {
    padding: 8px calc((100% - (3 * 176px + 16px)) / 2);
  }
}

@media (min-width: 800px) {
  .fixed-grid {
    padding: 8px calc((100% - (4 * 176px + 24px)) / 2);
  }
}

.recommendations-section {
  background: #FFFFFF;
  border-radius: 20px;
  margin: 0 16px 16px 16px;
  overflow: hidden;
}

.recommendations-section-title {
  font: 600 40px/1.2 Inter, sans-serif;
  letter-spacing: -1%;
  color: #171712;
  margin: 0;
  padding: 24px 24px 0 24px;
}

/* Download Modal Component */
.download-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.download-modal--active {
  display: flex;
}

.download-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.download-modal-content {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: #DEE63D;
  border-radius: 32px;
  padding: 40px;
  animation: modal-enter 0.3s ease;
}

.download-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.download-modal-close:hover {
  opacity: 0.8;
}

.download-modal-close-icon {
  width: 20px;
  height: 20px;
}

.download-modal-logo {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
}

.download-modal-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding-top: 40px;
}

/* Home page specific styles */
.home-center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  width: 100vw;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  margin-bottom: -20px;
  background: #DEE63D;
}

.home-center-wrapper .download-modal-body {
  padding-top: 0;
  width: 100%;
  max-width: 500px;
}

.download-modal-title {
  font: 600 40px/1.2 Inter, sans-serif;
  letter-spacing: -1%;
  color: #171712;
  margin: 0;
}

.download-modal-subtitle {
  font: 400 18px/1.4 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.55;
  margin: 0;
}

.download-modal-qr {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
}

.download-modal-qr-image {
  width: 200px;
  height: 200px;
  display: block;
}

.download-modal-store-text {
  font: 400 18px/1.4 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.55;
  margin: 0;
}

.download-modal-app-store {
  height: 60px;
  width: auto;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .download-modal-content {
    padding: 32px 24px;
    margin: 20px;
  }
  
  .download-modal-qr-image {
    width: 160px;
    height: 160px;
  }
  
  .download-modal-title {
    font-size: 32px;
    line-height: 1.2;
  }
  
  /* Hide QR code section on mobile */
  .download-modal-qr,
  .download-modal-subtitle {
    display: none;
  }
}

/* Playlist Header Component */
.playlist-header-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 32px 32px 8px 32px;
}

.playlist-header-image {
  width: 144px;
  height: 180px;
  border-radius: 24px;
  overflow: hidden;
  background: #EDEDE8;
  flex-shrink: 0;
}

.playlist-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-header-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8C8B0;
  color: #C8C8B0;
  font-size: 14px;
}

.playlist-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
}

.playlist-header-title {
  font: 600 40px/1.2 Inter, sans-serif;
  letter-spacing: -1%;
  color: #171712;
  margin: 0;
  /* Responsive width to match recommendation cards layout */
  /* Default: 2 cards wide for mobile */
  max-width: calc(2 * 176px + 8px); /* 360px */
  word-wrap: break-word;
  hyphens: auto;
}

.playlist-header-description {
  font: 400 18px/1.4 Inter, sans-serif;
  letter-spacing: -0.5%;
  color: #171712;
  opacity: 0.55; /* 55% opacity as shown in design */
  margin: 0;
}

/* Everything Playlist Header Styles */
.playlist-header-image--everything {
  background: #DEE63D; /* Lime background */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.playlist-header-image--everything .playlist-header-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Pill Tab Bar Styles */
.pill-tab-bar {
  display: flex;
  background: #EDEDE8; /* Light grey background */
  border-radius: 50px; /* Fully rounded container */
  padding: 4px;
  gap: 2px;
  /* Default: 2 cards wide for mobile */
  width: calc(2 * 176px + 8px); /* 360px */
  margin: 0 auto 16px auto; /* Center the tab bar */
}

/* Responsive tab bar width to match grid breakpoints */
@media (min-width: 480px) {
  .pill-tab-bar {
    /* 3 cards wide */
    width: calc(3 * 176px + 16px); /* 544px */
  }
}

@media (min-width: 720px) {
  .pill-tab-bar {
    /* 4 cards wide */
    width: calc(4 * 176px + 24px); /* 728px */
  }
}

/* Responsive playlist title width to match grid breakpoints */
@media (min-width: 480px) {
  .playlist-header-title {
    /* 3 cards wide */
    max-width: calc(3 * 176px + 16px); /* 544px */
  }
}

@media (min-width: 720px) {
  .playlist-header-title {
    /* 4 cards wide */
    max-width: calc(4 * 176px + 24px); /* 728px */
  }
}

.pill-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px; /* Reduced padding to make narrower */
  background: transparent;
  border: none;
  border-radius: 50px; /* Fully rounded pills */
  cursor: pointer;
  font: 400 14px/1.43 Inter, sans-serif; /* Smaller font size */
  color: #171712;
  transition: all 0.2s ease;
  letter-spacing: 0;
}

.pill-tab--active {
  background: #C8C8B0; /* Darker grey for active state */
  color: #171712;
}

.pill-tab:hover:not(.pill-tab--active) {
  background: rgba(200, 200, 176, 0.3); /* Subtle hover state */
}

/* Page Content */
.page-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Contact Modal Custom Styles (using download modal base) */
.contact-modal-email {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.contact-email-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.contact-email-icon {
  width: 24px;
  height: 24px;
}

.contact-email-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-family: monospace;
}

.contact-copy-btn {
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.contact-copy-btn:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
}