* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ios-blue: #007AFF;
  --ios-blue-dark: #0055cc;
  --aqua-teal: #00b4d8;
  --aqua-light: #90e0ef;
  --green-accent: #80ed99;
  --charcoal: #1a1a2e;
  --glass-white: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.4);
}

body {
  font-family: -apple-system, "Helvetica Neue", "SF Pro Display", Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 30%, #0096c7 50%, #023e8a 80%, #0077b6 100%);
  background-attachment: fixed;
}

#bubbles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Floating bubbles */
#bubbles-bg::before,
#bubbles-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: float-bubble 20s ease-in-out infinite;
}

#bubbles-bg::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at 35% 35%, rgba(144,224,239,0.35), rgba(0,180,216,0.1), transparent 70%);
  top: 10%;
  left: -5%;
  animation-delay: 0s;
}

#bubbles-bg::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 35% 35%, rgba(128,237,153,0.25), rgba(0,180,216,0.08), transparent 70%);
  bottom: 5%;
  right: -10%;
  animation-delay: -7s;
  animation-duration: 25s;
}

@keyframes float-bubble {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.05); }
  50% { transform: translate(-20px, -60px) scale(0.95); }
  75% { transform: translate(30px, -20px) scale(1.03); }
}

/* Extra bubbles via box-shadow trick on body */
body::before {
  content: '';
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%);
  top: 50%;
  left: 60%;
  animation: float-bubble 18s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(144,224,239,0.2), transparent 60%);
  top: 20%;
  right: 20%;
  animation: float-bubble 22s ease-in-out infinite;
  animation-delay: -5s;
  pointer-events: none;
  z-index: 0;
}

/* Linen texture background pattern */
.linen-bg {
  background-color: #e8e4df;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0.02) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.015) 2px,
      rgba(0,0,0,0.015) 4px
    );
}

/* iOS 6 glossy button base */
.ios6-btn {
  position: relative;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  color: white;
  font-weight: 600;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.1s ease;
  background: linear-gradient(to bottom, #5ba0e0 0%, #3a7bd5 45%, #2a6bc5 55%, #1a5ab5 100%);
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.ios6-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
  pointer-events: none;
  border-radius: 7px 7px 0 0;
}

.ios6-btn:hover {
  background: linear-gradient(to bottom, #6bb0f0 0%, #4a8be5 45%, #3a7bd5 55%, #2a6bc5 100%);
}

.ios6-btn:active {
  background: linear-gradient(to bottom, #1a5ab5 0%, #2a6bc5 45%, #3a7bd5 55%, #5ba0e0 100%);
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 1px 0 rgba(255,255,255,0.2);
}

.ios6-btn:active::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(255,255,255,0.1));
}

/* iOS 6 nav bar */
.ios6-navbar {
  background: linear-gradient(to bottom, #b0c8e8 0%, #8ab0d8 2%, #5a8ec8 45%, #4a7eb8 50%, #3a6ea8 55%, #2a5e98 100%);
  border-bottom: 1px solid #1a4e88;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35);
  position: relative;
}

.ios6-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.0));
  pointer-events: none;
}

/* Frosted glass panel */
.frosted-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Album art reflection */
.album-reflection {
  transform: scaleY(-1);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 60%);
  filter: blur(2px);
  opacity: 0.5;
}

/* iOS 6 slider track */
.ios6-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #b0b0b0, #d0d0d0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5);
  outline: none;
  cursor: pointer;
}

.ios6-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 45%, #d0d0d0 55%, #c0c0c0 100%);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
}

.ios6-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 45%, #d0d0d0 55%, #c0c0c0 100%);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
}

/* Glossy selection row */
.track-selected {
  background: linear-gradient(to bottom, #5ba0e0 0%, #3a7bd5 45%, #2a6bc5 55%, #1a5ab5 100%) !important;
  color: white !important;
}

.track-selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.0));
  pointer-events: none;
}

/* Drag overlay glow */
.drag-glow {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,180,216,0.5), 0 0 40px rgba(0,180,216,0.2); }
  50% { box-shadow: 0 0 40px rgba(0,180,216,0.8), 0 0 80px rgba(0,180,216,0.4); }
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.marquee-scroll {
  animation: marquee 10s linear infinite;
}

/* Toast slide-down */
@keyframes slide-down {
  0% { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  10% { transform: translateX(-50%) translateY(0); opacity: 1; }
  90% { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

.toast-anim {
  animation: slide-down 3s ease forwards;
}

/* Visualizer bars */
@keyframes viz-bar {
  0%, 100% { height: 10%; }
  50% { height: 80%; }
}

/* Pulsing placeholder */
@keyframes pulse-glow-note {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,180,216,0.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(0,180,216,0.8)); }
}

.pulse-note {
  animation: pulse-glow-note 2s ease-in-out infinite;
}

/* Custom scrollbar */
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

/* Lens flare */
.lens-flare {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
  top: -60px;
  right: -40px;
}

/* Bounce icon */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.bounce-icon {
  animation: bounce-soft 2s ease-in-out infinite;
}

/* Drop zone dash animation */
@keyframes dash-march {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 24; }
}