/* ===== Knowledge Hub – audio.css (dhamma playlists only) ===== */

:root{
  --trackBg:#fff3e0;
  --rangeBg:#e9e9e9;
  --ok:#22c55e;
  --accent2:#f59e0b;
}

body.theme-dark{
  --trackBg: rgba(245,158,11,0.10);
  --rangeBg: rgba(255,255,255,0.10);
  --ok:#34d399;
}

/* Audio card */
.audio-card{
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-left: 5px solid rgba(245,158,11,0.75);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  transition: .2s;
}
body.theme-dark .audio-card{
  background: rgba(255,255,255,0.04);
}
.audio-card.playing{
  border-left-color: rgba(34,197,94,0.9);
  box-shadow: 0 10px 22px rgba(34,197,94,0.10);
}

/* Header row */
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
  cursor: pointer;
  user-select:none;
}

.title-group{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.icon-box{
  width: 38px; height: 38px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--trackBg);
  color: var(--accent2);
  flex:0 0 auto;
  border: 1px solid var(--border);
}

.track-info h3{
  margin:0;
  font-size: 15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-info span{
  font-size: 12px;
  color: var(--muted);
}

/* Player controls */
.player-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.play-btn{
  width: 42px; height: 42px;
  border:none;
  border-radius: 50%;
  background: rgba(245,158,11,0.90);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  flex:0 0 auto;
}
.audio-card.playing .play-btn{ background: rgba(34,197,94,0.95); }
.play-btn:hover{ transform: scale(1.06); }
.play-btn i.fa-play{ margin-left: 2px; }

.progress{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

input[type=range]{
  -webkit-appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background: var(--rangeBg);
  outline:none;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background: rgba(245,158,11,0.95);
}
.audio-card.playing input[type=range]::-webkit-slider-thumb{
  background: rgba(34,197,94,0.95);
}

.time{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}

.hint{
  font-size: 11px;
  color: rgba(0,0,0,0.35);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
body.theme-dark .hint{ color: rgba(255,255,255,0.35); }

/* Loader */
.loader{
  border: 3px solid rgba(255,255,255,0.22);
  border-top: 3px solid var(--accent2);
  border-radius: 50%;
  width: 18px; height: 18px;
  animation: spin 1s linear infinite;
  display:none;
}
body:not(.theme-dark) .loader{
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--accent2);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Mobile tweaks */
@media (max-width:520px){
  .hint{ display:none; }
  .play-btn{ width: 40px; height: 40px; }
}