:root {
  --bg: #C46A4A;
  --text: #FFE9D6;
  --card: #A44A2F;
  --comment: #D99682;
  --button: #8C3F27;
}

body.dark {
  --bg: #8C3F27;
  --text: #FFE9D6;
  --card: #A44A2F;
  --comment: #B35A3A;
  --button: #5E2A1F;
}

/* BASE */
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* SONG LIST CONTAINER (SPACING FIX YOU ASKED ABOUT) */
#songContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* HEADER */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* SEARCH */
#searchBox {
  width: 100%;
  padding: 12px;
  margin: 20px 0;

  font-size: 16px;
  border-radius: 6px;

  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--text);
}

/* SONG CARD */
.song {
  background: var(--card);
  padding: 15px;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  width: 100%;
  box-sizing: border-box;

  /* SAFE FOR IOS */
  position: relative;
  overflow: visible;
}

/* 🔥 CRITICAL AUDIO FIX FOR IPHONE */
audio {
  width: 100%;
  height: 44px; /* forces visible control bar */
  display: block;

  position: relative;
  z-index: 5;

  opacity: 1 !important;
  visibility: visible !important;

  background: transparent;

  -webkit-appearance: none;
  appearance: none;
}

/* DONATE BUTTONS */
.donate-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payButton {
  display: block;
  width: 100%;
  padding: 14px;

  background: var(--button);
  color: var(--text);

  text-align: center;
  text-decoration: none;

  border-radius: 6px;
  font-size: 16px;
}

/* COMMENTS */
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment {
  background: var(--comment);
  padding: 8px;
  border-radius: 6px;
}

.commentBox {
  width: 100%;
  padding: 10px;

  font-size: 16px;

  border-radius: 6px;
  border: 1px solid #B35A3A;

  background: rgba(255,255,255,0.1);
  color: var(--text);
}

/* TOUCH OPTIMIZATION */
audio,
button,
input,
textarea,
a {
  touch-action: manipulation;
}

/* MOBILE */
@media (max-width: 768px) {
  body {
    padding: 15px;
  }
}