/* =========================
   CHURCHCREED BRAND SYSTEM
========================= */

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

/* =========================
   COLORS (LOCKED SYSTEM)
========================= */
:root{
  --cc-red:#ff4757;
  --cc-red-light:#ff6b81;
  --cc-bg:#0b0b0b;
  --cc-card:#181818;
  --cc-text:#ffffff;
  --cc-subtext:#bbbbbb;
}

/* =========================
   BODY
========================= */
body{
  background:var(--cc-bg) !important;
  color:var(--cc-text);
  font-family: system-ui, -apple-system, sans-serif;
}

/* =========================
   HEADER
========================= */
.topbar, .navbar{
  background: linear-gradient(90deg,var(--cc-red),var(--cc-red-light)) !important;
}

/* =========================
   TEXT
========================= */
h1,h2,h3{
  color:var(--cc-text);
  font-weight:600;
}

p{
  color:var(--cc-subtext);
}

/* =========================
   LINKS
========================= */
a{
  color:var(--cc-red);
  text-decoration:none;
}

/* =========================
   CARDS (CONSISTENT UI)
========================= */
.song-item,
.ds_card,
.recently-played-item,
.list-item{
  background:var(--cc-card) !important;
  border:1px solid #222;
  border-radius:14px;
  padding:12px;
}

/* =========================
   BUTTONS (UNIFIED STYLE)
========================= */
button,
.btn{
  background: linear-gradient(90deg,var(--cc-red),var(--cc-red-light)) !important;
  border:none;
  border-radius:10px;
  color:#fff !important;
  padding:10px 16px;
  font-weight:500;
}

/* =========================
   PLAY BUTTON
========================= */
button[class*="play"],
.play-btn,
.play_button{
  background:var(--cc-red) !important;
  color:#fff !important;
  border-radius:50%;
}

/* =========================
   VERIFIED BADGE
========================= */
.fa-check,
.fa-check-circle,
svg[class*="check"],
span[class*="verified"]{
  color:var(--cc-red) !important;
  fill:var(--cc-red) !important;
}

/* =========================
   PRO BADGE
========================= */
.pro,
.pro-badge,
.badge-pro{
  background:var(--cc-red) !important;
  color:#fff !important;
  border-radius:6px;
  padding:2px 6px;
  font-size:12px;
}

/* =========================
   INPUTS
========================= */
input, select{
  background:#1b1b1b;
  border:1px solid #222;
  color:#fff;
  border-radius:8px;
  padding:8px;
}

/* =========================
   PLAYER
========================= */
.player,
.music-player{
  background:#111 !important;
  border-top:1px solid #222;
}

/* PROGRESS BAR */
.progress-bar{
  background:var(--cc-red) !important;
}

/* =========================
   REMOVE BAD COLORS
========================= */
[style*="yellow"],
[style*="orange"],
[style*="gold"]{
  background:var(--cc-card) !important;
  color:#fff !important;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar{
  width:6px;
}
::-webkit-scrollbar-thumb{
  background:var(--cc-red);
  border-radius:10px;
}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){
  .song-item{
    margin-bottom:10px;
  }
}