:root{
  --red:#e31837;
  --red-dark:#b90f2a;
  --black:#090a0d;
  --panel:#101116;
  --off:#ececea;
  --paper:#fffdf9;
  --line:#c9c4bc;
}
*{box-sizing:border-box;border-radius:0!important}
html,body{margin:0;background:var(--off);color:#111;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.site-header{background:#090a0d;color:#fff;border-top:6px solid #284bc2;border-bottom:3px solid var(--red)}
.header-inner{width:min(1180px,92vw);margin:auto;min-height:70px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900}
.logo-mark{width:42px;height:42px;background:var(--red);display:grid;place-items:center;font-size:14px}
.logo-text{color:#fff}
nav{display:flex;gap:20px;font-size:13px;flex-wrap:wrap}
nav a{color:#fff} nav a:hover{color:#ff3656}
.search-hero{height:390px;width:100%;background:linear-gradient(90deg,#050506,#18070c 58%,#3b0712);color:#fff;display:flex;align-items:center}
.search-hero-inner{width:min(1240px,calc(100% - 48px));margin:auto}
.eyebrow{color:#ff3656;font-size:11px;font-weight:900;letter-spacing:1.7px}
.search-hero h1{font-size:48px;margin:8px 0 10px}
.search-hero p{font-size:17px;color:#c9cbd1;margin:0 0 20px}
.hero-search{display:grid;grid-template-columns:1fr 130px;max-width:760px}
.hero-search input{background:#0d0f14;color:#fff;border:1px solid #444954;padding:14px}
.hero-search input::placeholder{color:#969ba5}
.hero-search button{background:var(--red);color:#fff;border:1px solid var(--red);font-weight:900;cursor:pointer}
.hero-search button:hover{background:var(--red-dark)}
.search-wrap{width:min(1180px,92vw);margin:26px auto 70px}
.search-summary{font-size:13px;color:#68645f;margin-bottom:22px}
.result-section{margin-bottom:32px}
.result-section.hidden,.hidden{display:none!important}
.section-head{border-left:5px solid var(--red);background:#101116;color:#fff;padding:13px 15px;margin-bottom:12px}
.section-head h2{margin:4px 0 0;font-size:24px}
.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.artist-card{background:#101116;color:#fff;border:1px solid #292d35}
.artist-cover{height:110px;background:#171922 center/cover no-repeat}
.artist-card-body{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:0 13px 14px}
.artist-avatar{width:64px;height:64px;margin-top:-22px;background:#181b22 center/cover no-repeat;border:3px solid var(--off)}
.artist-card h3{margin:8px 0 4px;font-size:16px}
.artist-card h3 a:hover{color:#ff3656}
.verified{display:inline-grid;place-items:center;width:16px;height:16px;background:#2d7dff;color:#fff;font-size:10px;margin-left:4px}
.artist-meta{font-size:11px;color:#9499a4;line-height:1.45}
.artist-card-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-top:1px solid #292d35;font-size:11px;color:#a5a9b2}
.artist-card-footer a{background:var(--red);color:#fff;padding:8px 10px;font-weight:800}
.track-list{display:grid;gap:8px}
.track-row{display:grid;grid-template-columns:74px 1.5fr 1fr 115px 70px;align-items:center;background:#fff;border:1px solid var(--line)}
.track-cover{width:74px;height:74px;background:#171922 center/contain no-repeat}
.track-info{padding:10px 12px}.track-info h3{margin:0 0 4px}.track-info h3 a:hover,.artist-link:hover{color:var(--red)}
.artist-link{font-size:12px;color:#68645f}.track-meta{font-size:11px;color:#8a867f;margin-top:4px}
.track-stats{font-size:11px;color:#66625d;line-height:1.55}
.track-price{font-weight:900}.track-price small{display:block;color:#8a867f;font-size:10px;font-weight:400}
.track-actions{display:flex;justify-content:center}.track-actions button{background:#111319;color:#fff;border:1px solid #111319;width:38px;height:38px;cursor:pointer}.track-actions button:hover{background:var(--red);border-color:var(--red)}
.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bundle-card{background:#fff;border:1px solid var(--line);padding:16px}.bundle-card h3{margin:0 0 6px}.bundle-card p{color:#6f6b65;font-size:12px;line-height:1.5}.bundle-tracks{font-size:11px;color:#87837c}.bundle-price{font-size:20px;font-weight:900;margin:12px 0}.bundle-card a{display:inline-block;background:var(--red);color:#fff;padding:9px 11px;font-weight:800;font-size:12px}
.sale-tag{background:var(--red);color:#fff;font-size:9px;font-weight:900;padding:3px 5px;margin-left:5px}
.empty{background:#fff;border:1px solid var(--line);padding:35px;text-align:center;color:#6b6761}
.footer{background:#090a0d;color:#fff;border-top:3px solid var(--red)}
.footer-inner{width:min(1180px,92vw);margin:auto;padding:24px 0;display:flex;justify-content:space-between;font-size:13px}.footer span{color:#969aa4}
.player{position:fixed;left:0;right:0;bottom:0;background:#0b0c10f5;color:#fff;border-top:2px solid var(--red);display:grid;grid-template-columns:52px 180px 36px 36px 36px 1fr 110px;gap:10px;align-items:center;padding:9px 18px;z-index:100}
.player.hidden{display:none}.player-cover{width:52px;height:52px;background:#17191f center/contain no-repeat}.player-meta strong,.player-meta span{display:block}.player-meta span{font-size:11px;color:#9296a0;margin-top:4px}.player button{background:#15171d;color:#fff;border:1px solid #3b3f49;height:34px}.player input{accent-color:var(--red)}#timeLabel{font-size:11px;color:#9ea2ac}
@media(max-width:950px){nav{display:none}.artist-grid{grid-template-columns:repeat(2,1fr)}.bundle-grid{grid-template-columns:1fr 1fr}.track-row{grid-template-columns:64px 1fr 60px}.track-stats,.track-price{grid-column:2/3;padding:0 12px 8px}.track-actions{grid-column:3;grid-row:1}}
@media(max-width:620px){.search-hero{height:240px}.search-hero-inner{width:calc(100% - 24px)}.search-hero h1{font-size:38px}.hero-search{grid-template-columns:1fr}.artist-grid,.bundle-grid{grid-template-columns:1fr}.track-row{grid-template-columns:58px 1fr 55px}.track-cover{width:58px;height:58px}.player{grid-template-columns:48px 1fr 34px 34px 34px}.player input,#timeLabel{display:none}}
@media(min-width:621px) and (max-width:900px){.search-hero{height:300px}.search-hero-inner{width:calc(100% - 24px)}}


/* =========================================================
   OSBEATS SEARCH PAGE CUSTOM BANNER + MOCKUP LAYOUT
   ========================================================= */

/* Banner */
.search-hero{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  background:#090a0d !important;
  border-bottom:3px solid #e31837 !important;
  line-height:0 !important;
}

.search-hero img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}

.search-hero-inner{
  display:none !important;
}

/* Page */
.search-wrap{
  width:min(1380px,92vw) !important;
  margin:18px auto 70px !important;
}

/* Toolbar */
.search-toolbar{
  display:grid;
  grid-template-columns:auto minmax(300px,540px) 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:14px;
}

.search-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.search-breadcrumb strong{
  color:#e31837;
}

.search-toolbar-center{
  display:grid;
  grid-template-columns:1fr 44px;
}

.search-toolbar-center input{
  background:#fff;
  color:#111;
  border:1px solid #aaa49c;
  padding:11px 13px;
}

.search-toolbar-center button{
  background:#e31837;
  color:#fff;
  border:1px solid #e31837;
  cursor:pointer;
  font-size:18px;
}

.search-toolbar-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  min-width:0;
}

#searchSummary{
  color:#67635d;
  font-size:11px;
  white-space:nowrap;
}

#searchSort{
  background:#101116;
  color:#fff;
  border:1px solid #343841;
  min-width:145px;
  padding:10px;
}

.search-view-switch{
  display:flex;
  gap:6px;
}

.search-view-btn{
  width:38px;
  height:38px;
  border:1px solid #343841;
  background:#555961;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

.search-view-btn.active{
  background:#e31837;
  border-color:#e31837;
}

/* Main two column layout */
.search-marketplace{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* Filters */
.search-filters{
  background:#101116;
  color:#fff;
  border:1px solid #2e3139;
  padding:17px;
  position:sticky;
  top:14px;
}

.filter-title{
  color:#ff3656;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
  margin-bottom:17px;
}

.search-filter-stack{
  display:grid;
  gap:15px;
}

.search-filter-stack>div{
  display:grid;
  gap:6px;
}

.search-filter-stack label{
  font-size:12px;
  font-weight:700;
}

.search-filter-stack input,
.search-filter-stack select{
  width:100%;
  background:#0c0d11;
  color:#fff;
  border:1px solid #3a3d46;
  padding:11px;
}

.search-filter-primary,
.search-filter-secondary{
  min-height:44px;
  font-weight:800;
  cursor:pointer;
}

.search-filter-primary{
  background:#e31837;
  color:#fff;
  border:1px solid #e31837;
}

.search-filter-secondary{
  background:#101116;
  color:#fff;
  border:1px solid #555a64;
}

/* Result sections */
.search-results-panel{
  display:grid;
  gap:14px;
}

.result-section{
  margin:0 !important;
}

.result-section-head{
  background:#101116;
  color:#fff;
  border-left:5px solid #e31837;
  padding:11px 13px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}

/* Track list */
.track-list{
  display:grid;
  gap:0 !important;
}

.search-track-row{
  display:grid;
  grid-template-columns:90px minmax(280px,1.6fr) 100px 70px 100px 110px 95px;
  align-items:center;
  background:#fff;
  border-bottom:1px solid #d4cfc8;
  color:#111;
  min-height:94px;
}

.search-track-row:nth-child(even){
  background:#f3f1ed;
}

.search-track-row>*{
  padding:10px 11px;
}

.search-track-cover{
  width:70px;
  height:70px;
  overflow:hidden;
  background:#101116;
}

.search-track-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.search-track-main{
  min-width:0;
}

.search-title-line{
  display:flex;
  align-items:center;
  gap:7px;
}

.search-title-line>a{
  color:#111;
  font-size:15px;
  font-weight:900;
}

.search-title-line>a:hover,
.search-artist-link:hover{
  color:#e31837;
}

.search-artist-link{
  display:inline-block;
  color:#e31837;
  font-size:11px;
  font-weight:800;
  margin-top:4px;
}

.search-track-sub{
  color:#77736e;
  font-size:10px;
  margin-top:4px;
}

.heart-btn{
  border:0;
  background:transparent;
  color:#111;
  font-size:18px;
  cursor:pointer;
}

.heart-btn:hover{
  color:#e31837;
}

.waveform-line{
  height:8px;
  margin-top:9px;
  background:
    repeating-linear-gradient(
      90deg,
      #d4d1cc 0 2px,
      transparent 2px 5px
    );
  opacity:.9;
}

.search-col{
  font-size:11px;
}

.search-price{
  text-align:center;
}

.search-price strong{
  display:block;
  color:#e31837;
  font-size:16px;
}

.search-price span{
  display:block;
  color:#77736e;
  font-size:9px;
  margin-top:3px;
}

.search-actions{
  display:flex;
  gap:5px;
  justify-content:center;
}

.search-actions button,
.search-actions a,
.result-view-btn{
  background:#101116;
  color:#fff;
  border:1px solid #101116;
  padding:9px;
  font-size:10px;
  cursor:pointer;
}

.search-actions button:hover,
.search-actions a:hover,
.result-view-btn:hover{
  background:#e31837;
  border-color:#e31837;
}

/* Artist list */
.artist-list{
  display:grid;
}

.artist-result-row{
  display:grid;
  grid-template-columns:70px minmax(260px,1.6fr) 90px 90px 75px;
  align-items:center;
  background:#fff;
  border-bottom:1px solid #d4cfc8;
  min-height:80px;
}

.artist-result-row:nth-child(even){
  background:#f3f1ed;
}

.artist-result-row>*{
  padding:10px 11px;
}

.artist-result-avatar{
  width:54px;
  height:54px;
  background:#101116 center/cover no-repeat;
}

.artist-result-main h3{
  margin:0;
}

.artist-result-main h3 a{
  font-size:14px;
  font-weight:900;
}

.artist-result-meta{
  color:#77736e;
  font-size:10px;
  margin-top:4px;
}

.artist-result-stats{
  text-align:center;
}

.artist-result-stats strong,
.artist-result-stats span{
  display:block;
}

.artist-result-stats strong{
  font-size:15px;
}

.artist-result-stats span{
  color:#77736e;
  font-size:9px;
  margin-top:3px;
}

/* Bundles */
.bundle-list{
  display:grid;
}

.bundle-result-row{
  display:grid;
  grid-template-columns:1fr 120px 75px;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#fff;
  border-bottom:1px solid #d4cfc8;
}

.bundle-result-row:nth-child(even){
  background:#f3f1ed;
}

.bundle-result-row h3{
  margin:0 0 5px;
}

.bundle-result-row p{
  margin:5px 0 0;
  color:#77736e;
  font-size:10px;
}

.bundle-meta{
  color:#77736e;
  font-size:10px;
}

.bundle-price{
  text-align:center;
}

.bundle-price span{
  display:block;
  color:#888;
  text-decoration:line-through;
  font-size:10px;
}

.bundle-price strong{
  color:#e31837;
  font-size:16px;
}

/* Compact mode */
.compact-results .search-track-row{
  min-height:66px;
}

.compact-results .search-track-cover{
  width:48px;
  height:48px;
}

.compact-results .waveform-line,
.compact-results .search-track-sub{
  display:none;
}

.compact-results .artist-result-row{
  min-height:62px;
}

.compact-results .artist-result-avatar{
  width:42px;
  height:42px;
}

/* Remove obsolete card-grid styles from old Search layout */
.artist-grid,
.bundle-grid{
  display:block !important;
}

@media(max-width:1180px){
  .search-toolbar{
    grid-template-columns:auto 1fr;
  }

  .search-toolbar-right{
    grid-column:1/-1;
    justify-content:flex-end;
  }

  .search-track-row{
    grid-template-columns:76px minmax(240px,1.4fr) 85px 65px 85px 100px 85px;
  }
}

@media(max-width:900px){
  .search-marketplace{
    grid-template-columns:1fr;
  }

  .search-filters{
    position:static;
  }

  .search-toolbar{
    grid-template-columns:1fr;
  }

  .search-toolbar-right{
    grid-column:auto;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .search-track-row{
    grid-template-columns:70px 1fr 80px;
  }

  .search-col{
    display:none;
  }

  .search-price{
    grid-column:3;
    grid-row:1;
  }

  .search-actions{
    grid-column:3;
    grid-row:2;
  }

  .artist-result-row{
    grid-template-columns:60px 1fr 75px;
  }

  .artist-result-stats{
    display:none;
  }
}

@media(max-width:620px){
  .search-toolbar-right{
    display:grid;
    grid-template-columns:1fr;
  }

  .search-view-switch{
    display:none;
  }

  .search-track-row{
    grid-template-columns:60px 1fr;
  }

  .search-price,
  .search-actions{
    grid-column:2;
  }

  .artist-result-row{
    grid-template-columns:55px 1fr;
  }

  .artist-result-row .result-view-btn{
    grid-column:2;
    justify-self:start;
  }

  .bundle-result-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   FINAL SEARCH PAGE MOCKUP ALIGNMENT
   ========================================================= */

.search-wrap{
  width:min(1440px,92vw) !important;
  margin:18px auto 70px !important;
}

.search-toolbar{
  display:grid !important;
  grid-template-columns:260px minmax(360px,1fr) auto !important;
  gap:18px !important;
  align-items:center !important;
}

.search-toolbar-center{
  display:grid !important;
  grid-template-columns:1fr 44px !important;
  max-width:none !important;
}

.search-marketplace{
  grid-template-columns:270px minmax(0,1fr) !important;
  gap:16px !important;
}

.search-filters{
  padding:18px !important;
}

.track-list{
  border:1px solid #d4cfc8;
}

.search-track-row{
  grid-template-columns:42px 90px minmax(300px,1.7fr) 105px 70px 100px 110px 128px !important;
  min-height:94px !important;
}

.search-rank{
  color:#e31837;
  font-size:20px;
  font-weight:900;
  text-align:center;
  padding:0 6px !important;
}

.search-track-row>a{
  padding-left:0 !important;
  padding-right:0 !important;
}

.search-track-cover{
  width:78px !important;
  height:78px !important;
}

.search-track-main{
  padding-left:8px !important;
}

.waveform-line{
  height:10px !important;
  margin-top:8px !important;
  background:
    linear-gradient(90deg,#e31837 0 2px,transparent 2px 5px),
    repeating-linear-gradient(
      90deg,
      #d4d1cc 0 2px,
      transparent 2px 5px
    ) !important;
}

.search-actions{
  gap:7px !important;
}

.search-actions button,
.search-actions a{
  width:38px;
  height:38px;
  padding:0 !important;
  display:grid;
  place-items:center;
  font-size:14px !important;
}

.result-section-head{
  display:none !important;
}

.artist-list,
.bundle-list{
  border:1px solid #d4cfc8;
}

.artist-result-row,
.bundle-result-row{
  background:#fff;
}

@media(max-width:1180px){
  .search-toolbar{
    grid-template-columns:1fr !important;
  }

  .search-toolbar-right{
    justify-content:flex-start !important;
  }

  .search-track-row{
    grid-template-columns:40px 72px minmax(230px,1fr) 80px 65px 85px 95px 110px !important;
  }
}

@media(max-width:900px){
  .search-marketplace{
    grid-template-columns:1fr !important;
  }

  .search-track-row{
    grid-template-columns:36px 66px 1fr 90px !important;
  }

  .search-track-row .search-col{
    display:none !important;
  }

  .search-price{
    grid-column:4 !important;
    grid-row:1 !important;
  }

  .search-actions{
    grid-column:4 !important;
    grid-row:2 !important;
  }
}

@media(max-width:620px){
  .search-track-row{
    grid-template-columns:34px 58px 1fr !important;
  }

  .search-price,
  .search-actions{
    grid-column:3 !important;
  }
}


/* =========================================================
   SEARCH RESULT WAVEFORM — MATCH MOCKUP
   Replaces the old vertical bar pattern with an audio waveform.
   ========================================================= */

.waveform-line{
  position:relative !important;
  height:28px !important;
  margin-top:7px !important;
  background:none !important;
  overflow:hidden !important;
  max-width:100% !important;
}

.waveform-svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

.waveform-base{
  fill:none !important;
  stroke:#c9c9c9 !important;
  stroke-width:1.25 !important;
  vector-effect:non-scaling-stroke;
}

.waveform-progress{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#e31837;
  pointer-events:none;
}

/* Compact search view keeps waveform hidden, just like before. */
.compact-results .waveform-line{
  display:none !important;
}


/* =========================================================
   LIVE SEARCH WAVEFORM PROGRESS + SEEKING
   ========================================================= */

.waveform-line{
  cursor:pointer !important;
}

.waveform-progress{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0%;
  background:rgba(227,24,55,.18) !important;
  border-right:3px solid #e31837 !important;
  pointer-events:none !important;
  z-index:2 !important;
  transition:width .08s linear;
}

.waveform-svg{
  position:relative;
  z-index:1;
}


/* =========================================================
   WAVEFORM COLOR-FILL PROGRESS
   Played portion turns red; no vertical progress bar.
   ========================================================= */

.waveform-line{
  position:relative !important;
  height:28px !important;
  overflow:hidden !important;
  background:transparent !important;
}

.waveform-base-svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:1 !important;
}

.waveform-base{
  fill:none !important;
  stroke:#c8c8c8 !important;
  stroke-width:1.35 !important;
  vector-effect:non-scaling-stroke;
}

.waveform-progress{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0%;
  height:100% !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
  transition:width .08s linear;
}

.waveform-active-svg{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100vw !important;
  max-width:none !important;
  height:100% !important;
  z-index:2 !important;
}

/* Keep the red waveform copy the same visual width as the parent waveform. */
.waveform-line .waveform-active-svg{
  width:var(--waveform-full-width, 100%) !important;
}

.waveform-active{
  fill:none !important;
  stroke:#e31837 !important;
  stroke-width:1.55 !important;
  vector-effect:non-scaling-stroke;
}

/* Explicitly remove the previous moving red bar. */
.waveform-progress{
  border-right:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   SEARCH PAGE — APPROVED RED/BLACK CONSISTENCY + READABILITY
   No layout changes.
   ========================================================= */
:root{
  --search-redblack:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%);
  --search-redblack-hover:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%);
}

/* Main search buttons and active view control */
.hero-search button,
.search-toolbar-center button,
.search-filter-primary,
.search-view-btn.active{
  background:var(--search-redblack) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

.hero-search button:hover,
.search-toolbar-center button:hover,
.search-filter-primary:hover,
.search-view-btn.active:hover{
  background:var(--search-redblack-hover) !important;
  border-color:#920A10 !important;
}

/* Filter focus states */
.search-filter-stack input:focus,
.search-filter-stack select:focus,
#searchSort:focus{
  border-color:#73070B !important;
  outline:none !important;
}

/* Result price readability */
.search-price strong{
  color:#fff !important;
}

.search-price span{
  color:#d7dbe2 !important;
}

/* Action buttons stay readable and inherit approved hover treatment */
.search-actions button:hover,
.search-actions a:hover,
.result-view-btn:hover{
  background:var(--search-redblack) !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Section / waveform accents */
.section-head,
.footer,
.player,
.search-hero{
  border-color:#73070B !important;
}

.waveform-active{
  stroke:#73070B !important;
}

/* Verified badge stays visible on the dark search result UI. */
.verified{
  background:linear-gradient(105deg,#69060A 0%,#78070B 45%,#450408 75%,#100F12 100%) !important;
  border:1px solid #73070B !important;
  color:#fff !important;
}