:root{
  --bg:#0d0f12;
  --panel:#0f1116;
  --line:#222633;
  --text:#ffffff;
  --muted:#a6afbf;
  --chip:#171b26;
  --chip-bd:#283044;
  --accent:#ff4f87;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}

/* layout */
.tsvx-container{max-width:1200px;margin:0 auto;padding:20px 16px}
.tsvx-grid{display:flex;flex-direction:column;gap:14px;margin:8px 0 120px}

/* row */
.tsvx-row{display:grid;grid-template-columns:80px 1.2fr 1.8fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.r-left{}
.r-cover{position:relative;width:64px;height:64px;border-radius:14px;overflow:hidden}
.r-cover img{width:100%;height:100%;object-fit:cover;border:1px solid #2a3142;border-radius:14px;display:block}
.r-play{position:absolute;right:6px;bottom:6px;background:transparent;border:0;cursor:pointer}
.r-play img{width:22px;height:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

.r-main{}
.r-title{font-weight:700;color:#fff;text-decoration:none}
.r-title:hover{text-decoration:underline}
.r-artist{font-size:12px;color:var(--muted);margin-top:2px}
.r-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.r-chips li{background:var(--chip);border:1px solid var(--chip-bd);border-radius:999px;color:#d3daea;padding:3px 8px;font-size:11px}

.r-right{display:flex;flex-direction:column;gap:8px}
.r-wave{height:56px;background:#101420;border-radius:10px;overflow:hidden}

.r-actions{display:flex;gap:10px;justify-content:flex-end}
.r-icon{background:transparent;border:0;padding:0;cursor:pointer;line-height:0;display:inline-flex}
.r-icon img{width:20px;height:20px;opacity:.9;transition:transform .15s ease,opacity .15s ease}
.r-icon:hover img{opacity:1;transform:scale(1.07)}
.r-like.loved img{filter:drop-shadow(0 0 0 var(--accent));opacity:1}

/* global player (minimal) */
#tsvx-global{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:rgba(13,15,18,.96);backdrop-filter:saturate(140%) blur(6px);border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:14px;align-items:center}
#tsvx-global.hidden{display:none}
#g-cover{width:44px;height:44px;border-radius:10px;border:1px solid #293042;object-fit:cover}
.g-left{display:flex;gap:10px;align-items:center}
#g-title{font-weight:700}
#g-artist{font-size:12px;color:var(--muted)}
.g-mid{flex:1}
#g-wave{height:52px;background:#101420;border-radius:8px;overflow:hidden}
.g-time{display:flex;gap:8px;color:#9eA6b8;font-size:12px;margin-top:2px}

/* icon buttons (no frame) */
.g-ctrl{display:flex;gap:10px;align-items:center;margin-top:6px}
.g-btn{background:transparent;border:0;padding:0;cursor:pointer;line-height:0}
.g-btn img{width:18px;height:18px;opacity:.9;transition:transform .15s ease,opacity .15s ease}
.g-btn:hover img{opacity:1;transform:scale(1.07)}

/* volume hidden under speaker */
.g-volume{position:relative;display:flex;align-items:center}
#g-volume-range{position:absolute;left:24px;bottom:0;transform:translateY(120%);width:140px;opacity:0;pointer-events:none;transition:opacity .15s ease}
.g-volume:hover #g-volume-range{opacity:1;pointer-events:auto}
#g-volume-range{appearance:none;height:4px;background:#2a3040;border-radius:999px}
#g-volume-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:-5px}
#g-volume-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent)}

.g-right a{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:#fff;text-decoration:none}
.g-right img{width:18px;height:18px}

/* responsive */
@media (max-width:960px){
  .tsvx-row{grid-template-columns:68px 1fr;gap:12px}
  .r-right{grid-column:1 / -1}
}