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

    :root {
      --bg-gradient: linear-gradient(145deg, #f9f5ff 0%, #e8e0f5 100%);
      --surface: rgba(255, 255, 255, 0.75);
      --surface-2: rgba(255, 255, 255, 0.5);
      --text-primary: #1a1025;
      --text-secondary: #3e2c4f;
      --accent: #9b4de6;
      --accent-soft: #c59bf2;
      --card-bg: rgba(255, 255, 255, 0.7);
      --border-light: rgba(255, 255, 255, 0.5);
      --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1), 0 4px 18px rgba(0, 0, 0, 0.05);
      --player-bg: rgba(255, 255, 255, 0.85);
      --nav-bg: rgba(255, 255, 255, 0.6);
      --icon-color: #2d1b3a;
      --transition: all 0.25s ease;
      --glow: 0 0 20px rgba(155, 77, 230, 0.3);
    }

    body.dark {
      --bg-gradient: linear-gradient(145deg, #0f0b17 0%, #1e1629 100%);
      --surface: rgba(20, 15, 30, 0.8);
      --surface-2: rgba(30, 22, 45, 0.7);
      --text-primary: #f0eaff;
      --text-secondary: #cbbae3;
      --accent: #b87aff;
      --accent-soft: #9f5be0;
      --card-bg: rgba(35, 25, 50, 0.8);
      --border-light: rgba(255, 255, 255, 0.08);
      --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.3);
      --player-bg: rgba(25, 18, 38, 0.9);
      --nav-bg: rgba(20, 12, 30, 0.7);
      --icon-color: #d6c2f0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-gradient);
      color: var(--text-primary);
      min-height: 100vh;
      backdrop-filter: blur(10px);
      transition: background 0.4s, color 0.2s;
      padding-bottom: 100px;
      position: relative;
    }

    /* animated background elements (home page) */
    .bg-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      opacity: 0.4;
      animation: floatBlob 20s infinite alternate ease-in-out;
    }

    .blob1 {
      width: 500px;
      height: 500px;
      background: #c58af5;
      top: -100px;
      left: -100px;
    }
    .blob2 {
      width: 450px;
      height: 450px;
      background: #9b7bff;
      bottom: -50px;
      right: -80px;
      animation-duration: 26s;
    }
    .blob3 {
      width: 350px;
      height: 350px;
      background: #e9b6ff;
      top: 40%;
      left: 60%;
      animation-duration: 18s;
    }

    @keyframes floatBlob {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(30px, 40px) scale(1.1); }
    }

    /* layout */
    .app-wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px 30px;
    }

    /* navigation */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 28px;
      background: var(--nav-bg);
      backdrop-filter: blur(12px);
      border-radius: 60px;
      margin-bottom: 30px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      transition: var(--transition);
    }

    .logo {
      font-weight: 700;
      font-size: 1.8rem;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--accent), #c68aff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav-links {
      display: flex;
      gap: 12px;
    }

    .nav-link {
      padding: 10px 22px;
      border-radius: 40px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: var(--transition);
      border: 1px solid transparent;
      background: transparent;
      font-size: 1rem;
      backdrop-filter: blur(4px);
    }

    .nav-link i {
      margin-right: 8px;
    }

    .nav-link:hover {
      background: var(--surface-2);
      color: var(--text-primary);
    }

    .nav-link.active {
      background: var(--accent);
      color: white;
      box-shadow: var(--glow);
    }

    .theme-toggle {
      background: var(--surface);
      border: none;
      border-radius: 40px;
      padding: 10px 16px;
      cursor: pointer;
      color: var(--icon-color);
      font-size: 1.2rem;
      transition: var(--transition);
      border: 1px solid var(--border-light);
    }

    /* pages */
    .page {
      display: none;
      animation: fadeSlide 0.4s ease;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeSlide {
      0% { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* home page */
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 30px 0;
      flex-wrap: wrap;
    }

    .hero-content {
      flex: 1 1 300px;
    }

    .hero h1 {
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 20px;
      background: linear-gradient(to right, var(--text-primary), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      font-size: 1.2rem;
      color: var(--text-secondary);
      margin-bottom: 30px;
    }

    .animated-badge {
      display: inline-block;
      padding: 12px 28px;
      background: var(--surface);
      border-radius: 60px;
      font-weight: 600;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      animation: pulseGlow 3s infinite;
      backdrop-filter: blur(8px);
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 10px var(--accent-soft); }
      50% { box-shadow: 0 0 25px var(--accent); }
    }

    .hero-visual {
      flex: 1 1 300px;
      display: flex;
      justify-content: center;
      position: relative;
    }

    .vinyl-animation {
      width: 280px;
      height: 280px;
      background: radial-gradient(circle at 30% 30%, #3a2a4a, #110b1a);
      border-radius: 50%;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 0 30px #2a1c3a;
      animation: spin 12s linear infinite;
      border: 6px solid var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vinyl-label {
      width: 80px;
      height: 80px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: inset 0 0 10px #fff3;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .featured {
      margin-top: 50px;
    }

    .section-title {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 24px;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 24px;
    }

    .music-card {
      background: var(--card-bg);
      backdrop-filter: blur(12px);
      border-radius: 28px;
      padding: 20px 18px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .music-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 28px 40px -12px rgba(0,0,0,0.2);
    }

    /* library page */
    .library-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .search-bar {
      background: var(--surface);
      border-radius: 60px;
      padding: 8px 20px;
      display: flex;
      align-items: center;
      border: 1px solid var(--border-light);
    }

    .search-bar i {
      color: var(--text-secondary);
    }

    .search-bar input {
      background: transparent;
      border: none;
      padding: 10px 15px;
      font-size: 1rem;
      color: var(--text-primary);
      outline: none;
      width: 240px;
    }

    .song-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 10px;
    }

    .song-row {
      background: var(--card-bg);
      backdrop-filter: blur(8px);
      border-radius: 24px;
      padding: 16px 20px;
      transition: var(--transition);
      border: 1px solid var(--border-light);
    }

    .song-row td {
      padding: 12px 16px;
    }

    .song-actions button {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 1.2rem;
      margin: 0 6px;
      cursor: pointer;
      transition: var(--transition);
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .song-actions button:hover {
      background: var(--surface-2);
      color: var(--accent);
    }

    /* player bar */
    .player-bar {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 1200px;
      background: var(--player-bg);
      backdrop-filter: blur(16px);
      border-radius: 60px;
      padding: 12px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      z-index: 100;
    }

    .now-playing {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .player-controls {
      display: flex;
      gap: 15px;
    }

    .player-controls button {
      background: var(--surface);
      border: none;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      font-size: 1.3rem;
      color: var(--text-primary);
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }

    /* profile page */
    .profile-container {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
    }

    .profile-card {
      flex: 2;
      background: var(--card-bg);
      border-radius: 36px;
      padding: 30px;
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-light);
    }

    .info-card {
      flex: 1;
      background: var(--card-bg);
      border-radius: 36px;
      padding: 30px;
      backdrop-filter: blur(12px);
    }

    .playlist-section {
      margin-top: 30px;
    }

    .playlist-item {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      border-bottom: 1px solid var(--border-light);
    }

    .btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 40px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    /* utility */
    .text-accent { color: var(--accent); }
    i { margin-right: 6px; }