*{box-sizing:border-box}html,body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#ececeb;color:#111}a{text-decoration:none;color:inherit}
.site-header{height:70px;background:#08090c;border-bottom:3px solid #73070B;color:#fff}.header-inner{height:100%;max-width:1420px;margin:auto;display:flex;align-items:center;gap:34px;padding:0 24px}.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:25px}.logo-mark{background:#73070B;padding:14px 12px;font-size:14px}.main-nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:700;flex-wrap:wrap}.main-nav a.active,.main-nav a:hover{color:#73070B}
.artist-hero{width:100%;margin:0;padding:0;line-height:0;background:#08090c;border-bottom:3px solid #73070B;overflow:hidden}.artist-hero img{display:block;width:100%;height:auto;margin:0}
.artists-page{padding:18px 22px 60px;max-width:1500px;margin:auto}.filter-row{display:grid;grid-template-columns:2fr 1fr 1fr 1.15fr;gap:12px;margin-bottom:18px}.search-box{position:relative}.search-box input,.filter-row select,.mini-controls input,.mini-controls select,.side-panel select{width:100%;height:46px;background:#101116;border:1px solid #333740;color:#fff;padding:0 14px;font-size:15px}.search-box span{position:absolute;right:16px;top:11px;color:#fff;font-size:22px}
.directory-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px}.section-head,.all-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.section-head h2,.all-head h2{font-size:18px}.text-btn{border:0;background:none;color:#73070B;font-weight:900;font-size:16px;cursor:pointer}
.featured-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;min-height:260px}.artist-card{background:#fff;border:1px solid #d3d3d3;box-shadow:0 2px 8px #00000010;overflow:hidden;border-radius:4px}.artist-photo{height:190px;background:#15171d center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;font-weight:900}.play-badge{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:#111b;display:grid;place-items:center;color:#fff}.artist-info{padding:12px}.artist-name{font-weight:900;font-size:16px}.verified{color:#73070B}.artist-meta{font-size:12px;line-height:1.65;color:#444}.artist-stats{margin-top:8px;font-size:12px;font-weight:700;display:flex;gap:15px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 26px}.benefits article{min-height:96px;background:#101116;color:#fff;border:1px solid #343740;border-top:3px solid #73070B;padding:14px;display:flex;gap:13px;align-items:flex-start}.benefit-icon{font-size:31px;color:#73070B;min-width:38px}.benefits strong{font-size:13px}.benefits p{font-size:11px;line-height:1.4;color:#c6c8ce;margin:5px 0 0}
.mini-controls{display:grid;grid-template-columns:250px 180px;gap:8px}.artist-table-wrap{border:1px solid #c9c9c9;background:#fff}.artist-table{width:100%;border-collapse:collapse}.artist-table th{background:#0c0d11;color:#fff;font-size:10px;text-align:left;padding:12px}.artist-table td{border-top:1px solid #ddd;padding:11px 12px;font-size:12px}.artist-cell{display:flex;align-items:center;gap:10px;font-weight:800}.avatar{width:42px;height:42px;border-radius:4px;background:#181a20 center/cover no-repeat;color:#fff;display:grid;place-items:center}.view-btn{display:inline-block;background:#73070B;color:#fff;font-weight:800;padding:9px 14px}.empty-state{padding:30px;text-align:center;background:#fff;border:1px solid #ddd}
.artist-sidebar{display:flex;flex-direction:column;gap:14px}.side-panel{background:#f7f7f6;border:1px solid #c8c8c8;padding:15px}.side-panel h3{font-size:13px;margin:0 0 12px}.side-link{width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;font-size:14px;cursor:pointer}.side-link.active{background:#73070B;color:#fff}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #c9c9c9;background:#fff;padding:8px 11px;cursor:pointer}.chip.active{background:#73070B;color:#fff;border-color:#73070B}.join-panel h3{color:#73070B}.join-panel p{font-size:12px;line-height:1.5}.join-btn{display:block;text-align:center;background:#73070B;color:#fff;padding:13px;font-size:18px;font-weight:900}
.site-footer{border-top:3px solid #73070B;background:#08090c;color:#fff;min-height:95px;padding:25px 28px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.site-footer div{display:flex;flex-direction:column}.site-footer span{color:#b8bdc8}.site-footer nav{display:flex;gap:20px}
@media(max-width:1100px){.featured-grid{grid-template-columns:repeat(3,1fr)}.benefits{grid-template-columns:repeat(2,1fr)}.main-nav{gap:12px}.directory-grid{grid-template-columns:1fr}.artist-sidebar{display:grid;grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.site-header{height:auto}.header-inner{padding:12px;align-items:flex-start}.main-nav{font-size:11px}.filter-row{grid-template-columns:1fr}.featured-grid{grid-template-columns:repeat(2,1fr)}.benefits{grid-template-columns:1fr}.artist-sidebar{grid-template-columns:1fr}.mini-controls{grid-template-columns:1fr}.all-head{align-items:flex-start;flex-direction:column}.artist-table th:nth-child(2),.artist-table td:nth-child(2),.artist-table th:nth-child(3),.artist-table td:nth-child(3){display:none}}


/* ARTISTS V2 — followers + play button correction */
.play-badge{
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  width:36px !important;
  height:36px !important;
  border:1px solid #fff !important;
  border-radius:0 !important;
  background:#101116 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  overflow:hidden !important;
  line-height:1 !important;
  padding:0 !important;
}
.play-badge::before,
.play-badge::after{
  content:none !important;
  display:none !important;
}
.play-triangle{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1 !important;
  transform:none !important;
}
.artist-stats{
  display:flex !important;
  gap:16px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  font-size:11px !important;
}
.artist-stats span{
  white-space:nowrap !important;
}
.artist-table th,
.artist-table td{
  vertical-align:middle !important;
}


/* Artist directory red/black theme completion */
.browse-panel .active,
.browse-list .active,
.genre-buttons .active,
.artist-cta a,
.artist-cta button,
.artist-table .view-profile,
.featured-heading a {
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  border-color:#73070B !important;
  color:#fff !important;
}


/* =========================================================
   ARTISTS DIRECTORY — FINAL RED/BLACK CONSISTENCY PASS
   Uses the approved OSBeats red-to-black treatment without
   changing the Artists page layout or functionality.
   ========================================================= */
:root{
  --artists-redblack:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%);
  --artists-redblack-hover:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%);
}

/* Browse active state */
.artist-sidebar .side-link.active{
  background:var(--artists-redblack) !important;
  background-color:#73070B !important;
  border:1px solid #73070B !important;
  color:#fff !important;
}

/* Genre active chip */
.artist-sidebar .chip.active{
  background:var(--artists-redblack) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Join Now CTA */
.artist-sidebar .join-btn{
  background:var(--artists-redblack) !important;
  background-color:#73070B !important;
  border:1px solid #73070B !important;
  color:#fff !important;
}

.artist-sidebar .join-btn:hover{
  background:var(--artists-redblack-hover) !important;
  border-color:#920A10 !important;
}

/* View Profile actions */
.artist-table .view-btn{
  background:var(--artists-redblack) !important;
  background-color:#73070B !important;
  border:1px solid #73070B !important;
  color:#fff !important;
}

.artist-table .view-btn:hover{
  background:var(--artists-redblack-hover) !important;
  border-color:#920A10 !important;
}

/* Featured Artists "View All" stays a text action, but uses the
   approved visible OSBeats red instead of a mismatched shade. */
.section-head .text-btn{
  color:#73070B !important;
}

/* Keep selected labels readable. */
.artist-sidebar .side-link.active *,
.artist-sidebar .chip.active *,
.artist-sidebar .join-btn *,
.artist-table .view-btn *{
  color:#fff !important;
}

/* Subtle hover treatment for inactive browse/filter choices. */
.artist-sidebar .side-link:not(.active):hover,
.artist-sidebar .chip:not(.active):hover{
  border-color:#73070B !important;
  color:#73070B !important;
}


/* =========================================================
   ARTIST DIRECTORY — FILTER DATA / VERIFIED BADGE FIX
   ========================================================= */

/* Location is now a searchable/typeable filter rather than a closed select. */
.filter-row > input#locationFilter,
.artist-sidebar input#sideLocation{
  width:100% !important;
  height:46px !important;
  background:#101116 !important;
  border:1px solid #333740 !important;
  color:#fff !important;
  padding:0 14px !important;
  font-size:15px !important;
  font-family:inherit !important;
  outline:none !important;
}

.artist-sidebar input#sideLocation{
  height:46px !important;
}

.filter-row > input#locationFilter:focus,
.artist-sidebar input#sideLocation:focus{
  border-color:#73070B !important;
}

.filter-row > input#locationFilter::placeholder,
.artist-sidebar input#sideLocation::placeholder{
  color:#fff !important;
  opacity:1 !important;
}

/* The old red dot is removed. Verified accounts use an actual check badge. */
.artist-verified-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:15px !important;
  height:15px !important;
  margin-left:3px !important;
  border-radius:50% !important;
  background:linear-gradient(105deg,#69060A 0%,#78070B 45%,#450408 75%,#100F12 100%) !important;
  border:1px solid #73070B !important;
  color:#fff !important;
  font-size:9px !important;
  font-weight:900 !important;
  line-height:1 !important;
  vertical-align:middle !important;
}

.artist-name,
.artist-cell > span:last-child{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}