.ad-player{ display:flex; gap:16px; align-items:stretch; padding:16px; border-radius:16px; border:1px solid #bdbdbd; max-width:900px; margin:14px auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 10px rgba(0,0,0,.12); position:relative; }
.ad-player:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,0), rgba(0,0,0,.08)); pointer-events:none; border-radius:16px; }
.ad-brushed{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.06) 1px 2px), linear-gradient(180deg, #d9d9d9, #c9c9c9); }
.ad-left{ display:flex; align-items:center; }
.ad-cover{ width:256px; height:256px; border-radius:12px; border:1px solid rgba(0,0,0,.18); box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.6); object-fit:cover; }
.ad-center{ flex:1; display:flex; flex-direction:column; gap:10px; }
.ad-bars{ width:100%; background:transparent; display:block; background-image: linear-gradient(black, #555555); border-radius: 10px; }
.ad-led{
  background: radial-gradient(circle at 50% -40%, rgb(1 55 115), rgba(0, 0, 0, .7)); 
  border: 2px solid rgb(83 173 247 / 50%);
  border-radius: 10px;
  padding: 10px 12px;
  color: #8fd3ff;
  text-shadow: 0 0 6px rgba(0, 160, 255, .8), 0 0 16px rgba(0, 120, 255, .55);
  display: flex; 
  align-items: center;
  justify-content: space-between;
  font-family: "Courier New", monospace;
}
.ad-track-title{ font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%; }
.ad-time{ font-size:14px; opacity:.9; }
.ad-scrub{ width:100%; -webkit-appearance:none; background:linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.1)); height:8px; border-radius:999px; border:1px solid rgba(0,0,0,.2); }
.ad-scrub::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fefefe; border:1px solid #888; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ad-scrub::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fefefe; border:1px solid #888; }
.ad-controls{ display:flex; gap:10px; }
.ad-btn{ border:1px solid #9c9c9c; background: linear-gradient(#fefefe,#dcdcdc); border-radius:10px; padding:8px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.15); cursor:pointer; font-size:16px; transition: all 0.25s ease; }
.ad-btn:hover{ background: linear-gradient(#ffffff, #e6e6e6); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(0,150,255,0.6), 0 2px 8px rgba(0,0,0,.25); transform: translateY(-1px); }
.ad-btn:active{ transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.ad-play.is-playing{ background: linear-gradient(#aaffaa,#66cc66); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 10px rgba(0,200,80,0.6); }


/* Version tag bottom-right */
.ad-version{
  position:absolute;
  right:10px;
  bottom:10px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color:#666;
  opacity:.9;
  user-select:none;
  pointer-events:none;
}