:root{
  --bg:#151515;
  --txt:#ffffff;
  --gold:#F7BA32;
  --gold-light:#ffdc92;
  --purple:#a23fbc;
  --red:#c01313;
  --link:#a23fbc;
  --input-bg:#001538;
  --input-border:#18649aba;
  --tbl-border:#032640;
}

*{box-sizing:border-box}
body{
  margin:0;padding:10px;
  background: rgba(0,0,0,0);
  color:var(--txt);
  font-family:"tahoma ms",Tahoma,Arial,sans-serif;
  font-size:14px;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--gold-light)}

.panel-top{
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.panel-middle{
  background: rgba(0,0,0,0.6);
  color:var(--gold);
  padding:10px 15px;
}
.panel-bottom{
  background: rgba(0,0,0,0.6);
}

.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tab{
  font-family:"tahoma ms",Tahoma,Arial,sans-serif;
  font-size:15px;color:var(--gold);text-align:center;
  padding:6px 14px;border-radius:25px;
  background:rgba(51,51,51,0.8);text-decoration:none;display:inline-block;
}
.tab:hover,.tab.active{color:#fff;background:rgba(68,68,68,1)}

.search-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.textbox{
  font-family:"tahoma ms",Tahoma,Arial,sans-serif;font-size:15px;color:#fff;
  background:var(--input-bg);border:2px solid var(--input-border);
  padding:5px 10px;flex:1;min-width:120px;
}
.button{
  font-family:"tahoma ms",Tahoma,Arial,sans-serif;font-size:14px;color:#fff;
  background:#000;border:2px solid #c5c5c5;padding:5px 14px;cursor:pointer;
}
.button:hover{border-color:var(--gold);color:var(--gold)}
a.button{text-decoration:none;display:inline-block}

.song-list{margin-top:4px}
.song-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--tbl-border);
  cursor:pointer;transition:background .15s;
}
.song-item:hover{background:rgba(255,220,146,0.05)}
.song-item.current{
  border-left:3px solid var(--purple);
  padding-left:7px;background:rgba(162,63,188,0.08);
}
.cover-thumb{
  width:40px;height:40px;object-fit:cover;
  border:1px solid #ccc;border-radius:3px;flex-shrink:0;display:block;
}
.song-item:hover .cover-thumb{border-color:var(--gold)}
.song-info{flex:1;min-width:0;overflow:hidden}
.song-title{
  color:#fff;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-artist{
  color:var(--gold);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-meta{text-align:right;flex-shrink:0}
.time{color:#aaa;font-size:12px;display:block}
.live-badge{
  display:inline-block;background:var(--red);color:#fff;
  font-size:10px;font-weight:bold;padding:2px 6px;border-radius:10px;
  margin-top:2px;text-transform:uppercase;
}

.pagination{
  display:flex;justify-content:center;align-items:center;
  gap:6px;margin-top:12px;flex-wrap:wrap;
}
.page-info{color:#aaa;font-size:12px;width:100%;text-align:center;margin-bottom:4px}
.page-btn{
  color:var(--gold);padding:4px 12px;border-radius:25px;
  background:rgba(51,51,51,0.8);text-decoration:none;font-size:13px;
}
.page-btn:hover,.page-btn.active{color:#fff;background:rgba(68,68,68,1)}

#modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(21,21,21,0.93);
  z-index:9999;
  justify-content:center;
  align-items:flex-start;
  padding:10px;
  overflow-y:auto;
}
#modal-panel{
  width:100%;max-width:420px;max-height:90vh;
  display:flex;flex-direction:column;
  animation:modalIn .25s ease-out;
}
@keyframes modalIn{
  from{opacity:0;transform:scale(0.92)}
  to{opacity:1;transform:scale(1)}
}
#modal-close{
  position:absolute;top:14px;right:14px;
  background:transparent;border:none;color:#fff;
  font-size:22px;cursor:pointer;z-index:10;
  text-shadow:0 0 4px #000;line-height:1;
}
#modal-cover{
  display:block;max-width:170px;max-height:170px;
  margin:0 auto 10px;border:1px solid #ccc;border-radius:4px;
}
#modal-title{
  color:#fff;font-size:17px;font-weight:bold;
  text-align:center;margin-bottom:3px;word-break:break-word;
}
#modal-artist{
  color:var(--gold);font-size:15px;
  text-align:center;margin-bottom:10px;word-break:break-word;
}
#modal-details{margin-bottom:8px}
.detail-row{
  display:flex;justify-content:space-between;
  padding:5px 0;border-bottom:1px solid var(--tbl-border);
  font-size:14px;gap:10px;
}
.detail-label{color:#aaa;flex-shrink:0}
.detail-value{color:var(--gold-light);text-align:right;word-break:break-word}
.no-details{color:#aaa;font-style:italic;text-align:center;margin:10px 0}
#modal-links{
  text-align:center;margin-top:8px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
}
.ext-link{
  display:inline-block;color:var(--gold);font-size:13px;
  padding:7px 14px;border-radius:25px;background:rgba(51,51,51,0.8);
  text-decoration:none;border:1px solid transparent;
}
.ext-link:hover{color:#fff;background:rgba(68,68,68,1);border-color:#c5c5c5}

.detail-audio{
  margin: 0 0 14px 0;
  text-align: center;
}
.detail-audio audio{
  width: 100%;
  max-width: 340px;
  height: 40px;
}

.explicit-badge{
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.ext-link.deezer-link{
  border-color: var(--purple);
  color: #d49ae6;
}
.ext-link.deezer-link:hover{
  background: var(--purple);
  color: #fff;
  border-color: #fff;
}

#modal-cover{
  display: block;
  max-width: 220px;
  max-height: 220px;
  margin: 0 auto 12px auto;
  border: 1px solid #555;
  border-radius: 4px;
}

.detail-section{
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #121212;
}

.detail-section-title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: var(--light-blue);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
}

.detail-audio{
  text-align: center;
}
.detail-audio audio{
  width: 100%;
  max-width: 380px;
  height: 40px;
}

.explicit-badge{
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  vertical-align: middle;
}

.detail-artist-thumb{
  width: 40px;
  height: 40px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid #444;
}

.detail-tech .detail-value,
.detail-section .detail-value a{
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #ddd;
}
.detail-section .detail-value a{
  color: var(--light-blue);
  text-decoration: underline;
}
.detail-section .detail-value a:hover{
  color: #fff;
}

.ext-link.deezer-link{
  border-color: var(--purple);
  color: #d49ae6;
}
.ext-link.deezer-link:hover{
  background: var(--purple);
  color: #fff;
  border-color: #fff;
}

.detail-value{
  word-break: break-all;
}

#modal-box{
  max-width: 520px;
  width: 92%;
  margin-top: 20px;
  margin-bottom: 20px; 
}

.tab-nav{
  display: flex;
  gap: 2px;
  margin: 0 14px 12px 14px;   
  border-bottom: 1px solid #444;
}

.tab-btn{
  flex: 1 1 auto;
  background: #1a1a1a;
  color: #888;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 7px 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all .12s ease;
}

.tab-btn:hover{
  background: #252525;
  color: #ccc;
}

.tab-btn.active{
  background: #2a2a2a;
  color: var(--light-blue);
  border-color: #555;
  border-bottom: 2px solid var(--blue);
  position: relative;
  top: 1px;
}


.tab-content{
  padding: 0 14px;
  min-height: 140px;
}

.tab-panel{
  display: none;
  animation: fadeIn .2s ease;
}

.tab-panel.active{
  display: block;
}

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


.tab-cover-xl{
  display: block;
  max-width: 220px;
  max-height: 220px;
  margin: 12px auto 4px auto;
  border: 1px solid #444;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.tab-artist-thumb{
  width: 36px;
  height: 36px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid #444;
}


.detail-audio{
  text-align: center;
  margin-bottom: 6px;
}
.detail-audio audio{
  width: 100%;
  max-width: 380px;
  height: 40px;
}

.detail-hint{
  font-size: 10px;
  color: #777;
  text-align: center;
  margin-bottom: 10px;
}


.explicit-badge{
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  vertical-align: middle;
}


.ext-link.deezer-link{
  display: inline-block;
  margin-top: 10px;
  border-color: var(--purple);
  color: #d49ae6;
}
.ext-link.deezer-link:hover{
  background: var(--purple);
  color: #fff;
  border-color: #fff;
}

.deezer-widget-wrap{
  margin: 12px 0 6px 0;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  overflow: hidden;
  background: #181818;  
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
}

.deezer-widget-wrap iframe{
  display: block;
  width: 100%;
  height: 200px;        
  border: 0;
}
.deezer-widget-wrap{
  margin: 12px 0 6px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  overflow: hidden;
  background: #181818;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.deezer-widget-wrap iframe{
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
}

.play-count{
  display:inline-block;
  background:rgba(247,186,50,0.12);
  color:var(--gold);
  font-size:11px;
  font-weight:bold;
  padding:3px 8px;
  border-radius:10px;
  border:1px solid rgba(247,186,50,0.25);
  margin-top:4px;
  white-space:nowrap;
  line-height:1;
  vertical-align:middle;
}

.song-item.current .play-count{
  background:rgba(247,186,50,0.2);
  border-color:rgba(247,186,50,0.4);
  color:#ffdc92;
}

.modal-play-count{
  text-align:center;
  color:var(--gold);
  font-size:13px;
  font-weight:bold;
  margin:4px 0 10px 0;
}

.modal-play-count::before{
  content:"🔥 ";
}