:root{
      --bg:#0b0f14;
      --panel:#0f1620;
      --border:rgba(255,255,255,.08);
      --text:#e9eef5;
      --muted:rgba(233,238,245,.65);

      /* modern intense red */
      --accent:#ff2d55;
      --accent2:#ff4d00;
    }

    body{ background:var(--bg); color:var(--text); }

    .navbar{ background:rgba(11,15,20,.8); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
    .navbar .nav-link{ color:var(--muted); }
    .navbar .nav-link.active, .navbar .nav-link:hover{ color:var(--text); }
    .brand-dot{ width:10px; height:10px; background:var(--accent); display:inline-block; border-radius:999px; }

    .panel{
      background:#000 !important;
      border:1px solid var(--border);
      border-radius:16px;
    }

    .form-control, .form-select{
      background: rgba(255,255,255,.04);
      border:1px solid var(--border);
      color:var(--text);
      border-radius:14px;
    }
    .form-control:focus, .form-select:focus{
      border-color: rgba(255,45,85,.55);
      box-shadow: 0 0 0 .2rem rgba(255,45,85,.12);
      background: rgba(255,255,255,.05);
      color:var(--text);
    }

    .btn-accent{
      background: linear-gradient(90deg, rgba(255,45,85,.95), rgba(255,77,0,.9));
      border:0;
      color:#12060a;
      font-weight:700;
      border-radius:14px;
    }
    .btn-ghost{
      background: rgba(255,255,255,.04);
      border:1px solid var(--border);
      color:var(--text);
      border-radius:14px;
    }
    .btn-ghost:hover{ border-color: rgba(255,45,85,.35); }

    /* Tracks table */
    .table-dark{
      --bs-table-bg: transparent;
      --bs-table-striped-bg: rgba(255,255,255,.03);
      --bs-table-hover-bg: rgba(255,45,85,.08);
      --bs-table-border-color: var(--border);
      color: var(--text);
    }
    .track-row .actions{ opacity:1 !important; }
    .muted{ color:var(--muted) !important; }

    /* Single bottom player */
    .player{
      position: sticky;
      bottom:0;
      z-index:1030;
      background: rgba(15,22,32,.92);
      backdrop-filter: blur(12px);
      border-top:1px solid var(--border);
    }
    .page-padding{ padding-bottom: 130px; }

    /* Waveform */
    .wave-wrap{
      border:1px solid var(--border);
      border-radius:14px;
      background: rgba(255,255,255,.03);
      padding: 8px 10px;
      min-width: 240px;
      flex: 1 1 auto;
    }
    #waveform{ height: 46px; }
    @media (max-width: 576px){
      .wave-wrap{ min-width: 160px; }
      #waveform{ height: 40px; }
    }

    /* Offcanvas dark */
    .offcanvas{ background: var(--panel); color: var(--text); }
    .offcanvas .btn-close{ filter: invert(1); }

    .price-pill{
      border:1px solid rgba(255,45,85,.25);
      background: rgba(255,45,85,.10);
      border-radius: 999px;
      padding: 2px 10px;
      font-size: .85rem;
      color: var(--text);
      white-space: nowrap;
    }

    /* SVG icons */
    .icon{
      width: 18px;
      height: 18px;
      display: inline-block;
      vertical-align: -0.2em;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-fill{ fill: currentColor; stroke: none; }

    /* Stars */
    .stars{
      display:inline-flex;
      gap:2px;
      align-items:center;
      color: rgba(233,238,245,.35);
    }
    .stars .star{ width:14px; height:14px; }
    .stars .on{ color: var(--accent); }
    .stars .half{ color: rgba(255,45,85,.65); }
    .rating-text{
      font-size: .8rem;
      color: var(--muted);
      margin-left: 6px;
      white-space: nowrap;
    }

    /* Hero image carousel */
    .hero-carousel .carousel-item{
      height: 260px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    @media (max-width: 576px){ .hero-carousel .carousel-item{ height: 210px; } }
    .hero-slide{
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .hero-slide::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.25), rgba(0,0,0,.70));
    }
    .hero-content{
      position:absolute;
      inset:0;
      z-index: 2;
      display:flex;
      align-items:center;
      padding: 18px;
    }
    .hero-badge{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,45,85,.12);
      border: 1px solid rgba(255,45,85,.25);
      color: var(--text);
      font-size: .85rem;
      width: fit-content;
    }
    .carousel-indicators [data-bs-target]{ background-color: rgba(255,255,255,.35); }
    .carousel-indicators .active{ background-color: var(--accent); }

    /* Genre horizontal carousel (snap) */
    .genre-strip{
      display:flex;
      gap:10px;
      overflow:auto;
      padding: 8px 2px 10px;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
    }
    .genre-strip::-webkit-scrollbar{ height: 10px; }
    .genre-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
    .genre-chip{
      flex: 0 0 auto;
      scroll-snap-align: start;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: .92rem;
      display:flex;
      align-items:center;
      gap:8px;
      white-space: nowrap;
      cursor:pointer;
      user-select:none;
    }
    .genre-chip:hover{ border-color: rgba(255,45,85,.35); }
    .genre-chip.active{
      border-color: rgba(255,45,85,.55);
      background: rgba(255,45,85,.12);
    }

    /* Beatport-like footer */
    .bp-footer{
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
      background: #070a0f;
    }
    .bp-footer a{ color: var(--muted); text-decoration: none; }
    .bp-footer a:hover{ color: var(--text); }
    .footer-title{
      font-size: .95rem;
      letter-spacing: .02em;
      color: var(--text);
      margin-bottom: 10px;
      font-weight: 700;
    }
    .footer-link{ display:block; font-size: .9rem; padding: 5px 0; }
    .footer-bottom{
      border-top: 1px solid var(--border);
      margin-top: 16px;
      padding: 14px 0;
      font-size: .85rem;
      color: var(--muted);
    }
    .social-btn{
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--text);
    }
    .social-btn:hover{ border-color: rgba(255,45,85,.35); color: var(--text); }
    .social-btn .icon{ width:18px; height:18px; }