:root{
    --bg: #0F0E13;
    --surface: #17151D;
    --surface-2: #1F1C27;
    --line: #2C2833;
    --amber: #F2B33D;
    --amber-dim: #7A5A22;
    --red: #E8483C;
    --text: #F4F0E6;
    --text-muted: #9C97A8;
    --text-faint: #635E70;
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  }
  :root:not([data-theme="light"]){ color-scheme: dark; }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg: #F3F1EA; --surface: #FFFFFF; --surface-2: #EAE6DC; --line: #DDD8CB;
      --amber-dim: #F2B33D; --text: #201D28; --text-muted: #635E70; --text-faint: #948F9F;
    }
  }
  :root[data-theme="light"]{
    --bg: #F3F1EA; --surface: #FFFFFF; --surface-2: #EAE6DC; --line: #DDD8CB;
    --text: #201D28; --text-muted: #635E70; --text-faint: #948F9F;
  }

  *{ box-sizing: border-box; }
  html, body{ margin:0; padding:0; }
  body{
    background: var(--bg); color: var(--text); font-family: var(--font-body);
    line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: 84px;
  }
  ::selection{ background: var(--amber); color: #201908; }
  a{ color: inherit; }
  button{ font-family: inherit; cursor: pointer; }
  .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  img{ display:block; max-width:100%; }

  /* ---------- HEADER ---------- */
  header{ position: sticky; top:0; z-index: 40; backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: 1120px; margin:0 auto; gap: 20px; }
  .logo{ font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--red); display:inline-block; }
  nav.main-nav{ display:flex; gap: 22px; font-size:14px; color:var(--text-muted); flex:1; }
  nav.main-nav a{ text-decoration:none; white-space:nowrap; }
  nav.main-nav a:hover{ color: var(--text); }
  .search-box{
    flex:1; max-width:360px; background: var(--surface); border:1px solid var(--line);
    border-radius: 20px; padding: 8px 14px; font-size:13px; color: var(--text-faint); display:flex; align-items:center; gap:8px;
  }
  .header-actions{ display:flex; gap:10px; align-items:center; flex-shrink:0; }
  @media (max-width: 900px){ nav.main-nav, .search-box{ display:none; } }

  .hamburger{ display:none; background:none; border:none; color: var(--text); padding:4px; flex-shrink:0; }
  .hamburger svg{ width:22px; height:22px; }
  @media (max-width: 900px){ .hamburger{ display:flex; } }

  .slide-menu{
    width: min(78vw, 300px); height:100%; background: var(--surface); border-right:1px solid var(--line);
    padding: 18px; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
  }
  .slide-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .slide-link{ padding:13px 6px; font-size:15px; color: var(--text); text-decoration:none; border-bottom:1px solid var(--line); }
  .slide-divider{ height:10px; }

  .btn{ border:none; border-radius: var(--radius-s); padding: 9px 16px; font-size: 14px; font-weight: 600; transition: transform .12s ease, background .15s ease; }
  .btn:active{ transform: scale(0.97); }
  .btn-red{ background: var(--red); color:#fff; }
  .btn-red:hover{ background:#ff5c4e; }
  .btn-amber{ background: var(--amber); color:#201908; }
  .btn-amber:hover{ background:#ffc561; }
  .btn-ghost{ background: transparent; color: var(--text); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color: var(--text-faint); }
  .btn-sm{ padding:6px 12px; font-size:13px; }

  /* ---------- HERO ---------- */
  .hero{ padding: 48px 0 36px; border-bottom: 1px solid var(--line); }
  .eyebrow{ font-size: 13px; color: var(--red); font-weight:700; margin-bottom:12px; letter-spacing: 0.01em; }
  h1.hero-title{ font-family: var(--font-display); font-size: clamp(30px, 5vw, 50px); line-height: 1.04; letter-spacing:-0.02em; font-weight: 800; margin: 0 0 16px; max-width: 16ch; }
  h1.hero-title-big{ max-width:none; margin: 0 auto 30px; font-size: clamp(34px, 7vw, 64px); text-transform: uppercase; }
  .hero-search{
    display:flex; align-items:center; gap:10px; max-width:620px; margin: 0 auto 22px;
    background: var(--surface); border:1px solid var(--line); border-radius: 30px; padding: 8px 8px 8px 20px;
  }
  .hs-icon{ font-size:15px; flex-shrink:0; opacity:0.6; }
  .hero-search input{ flex:1; background:none; border:none; outline:none; color: var(--text); font-size:14px; font-family:inherit; min-width:0; }
  .hero-search input::placeholder{ color: var(--text-faint); }
  .hs-btn{ flex-shrink:0; border-radius:22px; padding:11px 22px; }
  @media (max-width:560px){ .hs-icon{ display:none; } .hero-search{ padding:6px 6px 6px 14px; } .hs-btn{ padding:10px 16px; } }
  .hero-sub{ color: var(--text-muted); font-size:15.5px; max-width: 52ch; margin-bottom: 24px; }
  .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .hero-payment-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; font-size:12.5px; color: var(--text-faint); flex-wrap:wrap; }
  .pay-tag{ background: var(--surface); border:1px solid var(--line); padding:4px 10px; border-radius:6px; font-weight:700; color: var(--text-muted); font-size:11.5px; }

  /* ---------- GENRE TILES ---------- */
  .genre-strip{ padding: 28px 0; border-bottom: 1px solid var(--line); overflow-x:auto; }
  .genre-row{ display:flex; gap:12px; }
  .genre-tile{
    flex-shrink:0; width: 132px; height: 76px; border-radius: var(--radius-m);
    display:flex; align-items:flex-end; padding: 12px; font-weight:700; font-size:14px; color:#fff;
    position:relative; overflow:hidden;
  }
  .genre-tile span{ position:relative; z-index:2; }
  .genre-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(160deg, var(--g1), var(--g2)); opacity:0.92; }

  /* ---------- SECTIONS ---------- */
  .section{ padding: 44px 0; border-bottom: 1px solid var(--line); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 22px; gap: 16px; flex-wrap:wrap; }
  h2.section-title{ font-family: var(--font-display); font-size: 24px; font-weight:700; margin:0; letter-spacing:-0.01em; }
  .section-sub{ color: var(--text-muted); font-size:13.5px; margin-top:4px; }
  .see-more{ font-size:13px; color: var(--text-muted); text-decoration:none; font-weight:600; }

  .filters{ display:flex; gap:8px; flex-wrap:wrap; }
  .filter-chip{ background: var(--surface); border:1px solid var(--line); color: var(--text-muted); padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight:500; }
  .filter-chip.active{ background: var(--red); color:#fff; border-color: var(--red); }
  .filter-chip-btn{ display:flex; align-items:center; gap:6px; font-family:inherit; cursor:pointer; }

  /* ---------- FILTER PANEL ---------- */
  .filter-panel{
    background: var(--surface); width: min(420px, 100vw); height:100%; margin-left:auto;
    display:flex; flex-direction:column; border-left:1px solid var(--line);
  }
  .fp-header{ display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .fp-header h3{ font-family: var(--font-display); font-size:18px; margin:0; }
  .fp-body{ flex:1; overflow-y:auto; padding: 4px 20px; }
  .fp-row{ border-bottom:1px solid var(--line); }
  .fp-row summary{
    list-style:none; display:flex; justify-content:space-between; align-items:center;
    padding: 16px 2px; font-weight:600; font-size:14.5px; cursor:pointer;
  }
  .fp-row summary::-webkit-details-marker{ display:none; }
  .fp-row summary .chev{ transition: transform .15s ease; color: var(--text-faint); }
  .fp-row[open] summary .chev{ transform: rotate(180deg); }
  .fp-content{ padding: 0 2px 16px; display:flex; flex-wrap:wrap; gap:8px; }
  .fp-pill{ border:1px solid var(--line); background: var(--bg); color: var(--text-muted); font-size:12.5px; padding:7px 12px; border-radius:16px; }
  .fp-pill.selected{ background: var(--red); border-color: var(--red); color:#fff; }
  .fp-range{ display:flex; align-items:center; gap:10px; width:100%; }
  .fp-range input[type="number"]{ width:80px; background: var(--bg); border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:6px; font-size:13px; font-family:inherit; }
  .fp-footer{ padding: 14px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex-shrink:0; }

  /* ---------- BEAT GRID CARDS (BeatStars-inspired) ---------- */
  .beat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 980px){ .beat-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px){ .beat-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; } }

  .beat-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; }
  .art{
    aspect-ratio: 1/1; position:relative; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(150deg, var(--g1), var(--g2));
  }
  .art .vinyl{ width:46%; height:46%; opacity:0.9; }
  .art .price-badge{
    position:absolute; top:10px; right:10px; background: rgba(10,9,13,0.75); color:#fff;
    font-size:12px; font-weight:700; padding:4px 9px; border-radius:14px;
  }
  .art .play-overlay{
    position:absolute; inset:0; background: rgba(8,7,11,0); display:flex; align-items:center; justify-content:center;
    transition: background .15s ease;
  }
  .beat-card:hover .play-overlay{ background: rgba(8,7,11,0.35); }
  .art .play-btn{
    width:44px; height:44px; border-radius:50%; background:#fff; border:none;
    display:flex; align-items:center; justify-content:center; opacity:0; transform: scale(0.85);
    transition: opacity .15s ease, transform .15s ease;
  }
  .beat-card:hover .play-btn, .art .play-btn.is-playing{ opacity:1; transform: scale(1); }
  .art .play-btn svg{ width:16px; height:16px; }

  .card-body{ padding: 12px 12px 14px; }
  .card-title{ font-size:14px; font-weight:700; line-height:1.3; margin-bottom:3px; }
  .card-artist{ font-size:12.5px; color: var(--text-muted); display:flex; align-items:center; gap:4px; margin-bottom:9px; }
  .verified{ color: var(--amber); font-size:11px; }
  .verified-badge{ display:inline-flex; vertical-align:middle; margin-left:3px; width:14px; height:14px; flex-shrink:0; }
  .verified-badge svg{ width:100%; height:100%; }
  .card-tags{ display:flex; gap:5px; flex-wrap:wrap; }
  .mini-tag{ font-size:10.5px; color: var(--text-faint); background: var(--surface-2); padding:2px 7px; border-radius:8px; }
  .card-actions{ display:flex; gap:6px; margin-top:10px; }
  .buy-link{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; background: var(--surface-2); border:1px solid var(--line); color: var(--text); font-size:12px; font-weight:700; padding:8px 6px; border-radius: var(--radius-s); }
  .buy-link:hover{ background: var(--red); border-color: var(--red); color:#fff; }
  .buy-link svg{ width:12px; height:12px; }
  .free-dl{ flex-shrink:0; width:34px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--line); color: var(--text-muted); border-radius: var(--radius-s); }
  .free-dl:hover{ border-color: var(--text-faint); color: var(--text); }
  .free-dl svg{ width:14px; height:14px; }
  .license-option{ border:1px solid var(--line); border-radius: var(--radius-s); padding:12px 14px; margin-bottom:10px; cursor:pointer; }
  .license-option.selected{ border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
  .license-top{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; }
  .license-price{ color: var(--red); }
  .license-desc{ font-size:12px; color: var(--text-faint); margin-top:4px; }

  /* ---------- HOW IT WORKS ---------- */
  .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
  @media (max-width: 760px){ .steps{ grid-template-columns: 1fr; } }
  .step{ border-left: 2px solid var(--red); padding-left:16px; }
  .step-title{ font-weight:700; font-size:15px; margin-bottom:6px; }
  .step-desc{ font-size:13.5px; color:var(--text-muted); }

  /* ---------- PRODUCER CTA ---------- */
  .producer-cta{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items:center;
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding: 36px; }
  @media (max-width: 760px){ .producer-cta{ grid-template-columns:1fr; } }

  /* ---------- PRODUCER DIRECTORY (Producerfury-inspired: clean, minimal, whitespace) ---------- */
  .producer-directory{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px){ .producer-directory{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px){ .producer-directory{ grid-template-columns: 1fr; } }
  .pd-card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m);
    padding: 24px; display:flex; flex-direction:column; gap:14px; transition: border-color .15s ease;
  }
  .pd-card:hover{ border-color: var(--text-faint); }
  .pd-top{ display:flex; align-items:center; gap:14px; }
  .pd-avatar{ width:52px; height:52px; border-radius:50%; flex-shrink:0; background: linear-gradient(150deg, var(--g1), var(--g2)); }
  .pd-name{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:5px; }
  .pd-loc{ font-size:12.5px; color: var(--text-faint); margin-top:3px; display:flex; align-items:center; gap:4px; }
  .pd-promoted{ font-size:10.5px; font-weight:700; color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); padding:3px 8px; border-radius:10px; align-self:flex-start; }
  .pd-pro-tag{ font-size:10.5px; font-weight:700; color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); padding:3px 8px; border-radius:10px; align-self:flex-start; }
  .pd-stats{ display:flex; gap:18px; font-size:12.5px; color: var(--text-muted); padding-top:12px; border-top:1px solid var(--line); }
  .pd-stats b{ color: var(--text); }
  .pd-connect{ margin-top:2px; }
  .producer-cta h3{ font-family: var(--font-display); font-size: 22px; margin:0 0 10px; font-weight:800; }
  .producer-cta p{ color: var(--text-muted); font-size: 14px; margin:0 0 20px; max-width:44ch; }
  .mini-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--text-muted); }
  .mini-list li{ display:flex; gap:8px; align-items:flex-start; }
  .mini-list .check{ color: var(--red); flex-shrink:0; }
  .stat-block{ display:flex; gap:22px; }
  .stat-num{ font-family: var(--font-display); font-size:26px; font-weight:800; }
  .stat-label{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }

  .verify-preview{ background: var(--bg); border:1px solid var(--line); border-radius: var(--radius-m); padding:16px; margin-bottom:16px; }
  .vp-row{ display:flex; align-items:center; gap:12px; }
  .vp-avatar{ width:44px; height:44px; border-radius:50%; background: linear-gradient(150deg,#E8483C,#7A2C22); flex-shrink:0; }
  .vp-name{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:5px; }
  .vp-sub{ font-size:12px; color: var(--text-faint); margin-top:2px; }
  .vp-status{ font-size:12px; color: var(--amber); margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .verified-badge-lg{ display:inline-flex; width:16px; height:16px; }
  .verified-badge-lg svg{ width:100%; height:100%; }
  .verify-note{ font-size:12px; color: var(--text-faint); background: var(--bg); border:1px dashed var(--line); border-radius: var(--radius-s); padding:10px 12px; margin-bottom:6px; line-height:1.5; }
  .commission-note{ font-size:12px; color: var(--text-muted); background: var(--bg); border:1px solid var(--line); border-radius: var(--radius-s); padding:10px 12px; margin-bottom:10px; line-height:1.5; }
  .commission-note b{ color: var(--amber); }

  footer{ padding: 40px 0 32px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--line); }
  .footer-tagline{ font-size:13px; color: var(--text-faint); margin-top:8px; max-width:32ch; }
  .social-grid{ display:grid; grid-template-columns: repeat(4, 44px); gap:8px; }
  @media (max-width:480px){ .social-grid{ grid-template-columns: repeat(4, 40px); } }
  .social-icon{
    width:44px; height:44px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center;
    color: var(--text-muted); text-decoration:none;
  }
  .social-icon svg{ width:18px; height:18px; }
  .social-icon:hover{ border-color: var(--sc, var(--text-faint)); color: var(--sc, var(--text)); }
  .footer-legal{ display:flex; gap:20px; flex-wrap:wrap; padding: 20px 0; font-size:12.5px; }
  .footer-legal a{ color: var(--text-faint); text-decoration:none; }
  .footer-legal a:hover{ color: var(--text-muted); }
  .footer-bottom{ font-size:12px; color: var(--text-faint); text-align:center; padding-top:8px; }

  /* ---------- PERSISTENT BOTTOM PLAYER (BeatStars-style) ---------- */
  .player-bar{
    position: fixed; left:0; right:0; bottom:0; z-index:60;
    background: var(--surface); border-top:1px solid var(--line);
    padding: 10px 16px; display:flex; align-items:center; gap:14px;
    transform: translateY(100%); transition: transform .25s ease;
  }
  .player-bar.visible{ transform: translateY(0); }
  .pb-art{ width:40px; height:40px; border-radius:6px; flex-shrink:0; background: linear-gradient(150deg, var(--g1,#E8483C), var(--g2,#7A2C22)); }
  .pb-meta{ min-width:0; flex-shrink:0; width: 130px; }
  .pb-title{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pb-artist{ font-size:11.5px; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pb-controls{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .pb-play{ width:34px; height:34px; border-radius:50%; background: var(--red); border:none; display:flex; align-items:center; justify-content:center; }
  .pb-play svg{ width:12px; height:12px; }
  .pb-icon-btn{ background:none; border:none; color: var(--text-faint); font-size:15px; }
  .pb-progress{ flex:1; display:flex; align-items:center; gap:8px; min-width:80px; }
  .pb-time{ font-size:10.5px; color: var(--text-faint); width:32px; flex-shrink:0; }
  .pb-time.end{ text-align:right; }
  .pb-bar{ flex:1; height:3px; background: var(--line); border-radius:2px; overflow:hidden; }
  .pb-bar-fill{ height:100%; width: 35%; background: var(--red); }
  .pb-buy{ flex-shrink:0; }
  @media (max-width: 640px){ .pb-meta{ width:80px; } .pb-progress{ display:none; } }

  /* ---------- MODAL ---------- */
  .overlay{ position: fixed; inset:0; background: rgba(5,4,8,0.7); display:none; align-items:center; justify-content:center; z-index:100; padding: 20px; }
  .overlay.open{ display:flex; }
  .modal{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); max-width: 420px; width:100%; padding: 26px; max-height: 86vh; overflow-y:auto; position:relative; }
  .modal h3{ font-family: var(--font-display); font-size:20px; margin:0 0 6px; font-weight:800;}
  .modal .sub{ font-size:13px; color:var(--text-muted); margin-bottom:18px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; }
  .field input, .field select{ width:100%; background: var(--bg); border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius: var(--radius-s); font-size:14px; font-family:inherit; }
  .modal-actions{ display:flex; gap:10px; margin-top:20px; }
  .close-x{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--text-faint); font-size:20px; line-height:1; padding:4px; }
  .qr-box{ background: var(--bg); border:1px dashed var(--line); border-radius: var(--radius-s); padding: 20px; text-align:center; margin: 12px 0 4px; }
  .qr-box .qr-glyph{ font-size: 64px; line-height:1; }
  .qr-box .qr-note{ font-size:12px; color:var(--text-faint); margin-top:8px; }
  .license-agree{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color: var(--text-muted); margin: 14px 0 4px; cursor:pointer; }
  .license-agree input{ margin-top:2px; flex-shrink:0; }
  .license-agree a{ color: var(--amber); text-decoration:none; font-weight:600; }
  .license-terms{ font-size:12.5px; color: var(--text-muted); line-height:1.6; max-height:340px; overflow-y:auto; }
  .license-terms p{ margin: 0 0 12px; }
  .license-terms b{ color: var(--text); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .theme-toggle{ background:none; border:1px solid var(--line); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color: var(--text-muted); font-size:15px; flex-shrink:0; }

  .social-row{ display:flex; flex-direction:column; gap:9px; margin-bottom: 16px; }
  .btn-social{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; background: var(--bg); border:1px solid var(--line); color: var(--text);
    padding:10px 12px; border-radius: var(--radius-s); font-size:13.5px; font-weight:600;
  }
  .btn-social:hover{ border-color: var(--text-faint); }
  .or-divider{ display:flex; align-items:center; gap:10px; margin: 4px 0 16px; color: var(--text-faint); font-size:12px; }
  .or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background: var(--line); }
  .modal-footnote{ text-align:center; font-size:12.5px; color: var(--text-faint); margin-top:14px; }
  .modal-footnote a{ color: var(--red); font-weight:600; text-decoration:none; }