/* Modern UI + dark mode */
:root {
  --apg-bg: #ffffff;
  --apg-card: #ffffff;
  --apg-muted: #6b7280;
  --apg-border: #e5e7eb;
  --apg-accent: #2563eb;
  --apg-accent-2: #4f46e5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --apg-bg: #0b1020;
    --apg-card: #0f172a;
    --apg-muted: #9ca3af;
    --apg-border: #1f2937;
    --apg-accent: #60a5fa;
    --apg-accent-2: #818cf8;
  }
}
.apg-grid { display:grid; gap:20px; }
.apg-cols-1 { grid-template-columns: 1fr; }
.apg-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.apg-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.apg-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.apg-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.apg-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

.apg-card { border:1px solid var(--apg-border); border-radius:16px; overflow:hidden; background:var(--apg-card);
  box-shadow:0 10px 20px rgba(2,8,23,.08); display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease; }
.apg-card:hover { transform: translateY(-2px); box-shadow:0 16px 28px rgba(2,8,23,.12); }

.apg-thumb { position:relative; }
.apg-thumb img, .apg-thumb--placeholder { width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  background:linear-gradient(135deg, #e5e7eb, #f3f4f6); }
.apg-title { position:absolute; left:12px; bottom:12px; padding:6px 10px; background:rgba(0,0,0,.55);
  color:#fff; border-radius:10px; font-weight:700; font-size:14px; letter-spacing:.2px; }

.apg-player { padding:14px; display:flex; flex-direction:column; gap:10px; }
.apg-controls { display:flex; gap:10px; align-items:center; }
.apg-controls button { border:1px solid var(--apg-border); background:linear-gradient(180deg, #fff, #f8fafc);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:600; transition: background .15s ease, transform .05s ease; }
.apg-controls button:hover { background:#f3f4f6; }
.apg-controls button:active { transform:scale(.98); }

.apg-now { display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.apg-track-title { font-weight:600; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apg-time { color:var(--apg-muted); font-variant-numeric: tabular-nums; font-size:12px; }

.apg-progress { position:relative; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; cursor:pointer; }
.apg-progress__bar { position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg, var(--apg-accent), var(--apg-accent-2)); }

.apg-volume { display:flex; align-items:center; gap:8px; }
.apg-vol { width:90px; }

/* Tracklist as buttons */
.apg-tracklist { margin:0; padding-left:0; list-style:none; }
.apg-tracklist li { padding:0; border-bottom:1px dashed var(--apg-border); }
.apg-tracklist li:last-child { border-bottom:none; }

.apg-trackbtn {
  width:100%; display:flex; align-items:center; gap:12px;
  padding:10px 12px; background:transparent; border:1px solid transparent;
  cursor:pointer; text-align:left; border-radius:10px;
  transition: background .15s ease, border-color .15s ease, transform .04s ease;
}
.apg-trackbtn:hover { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); }
.apg-trackbtn:active { transform: scale(.99); }

.apg-ico {
  width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  background: linear-gradient(180deg, #fff, #f3f4f6);
  border:1px solid var(--apg-border); box-shadow: 0 1px 1px rgba(0,0,0,.04);
  flex: 0 0 28px;
}
.apg-ico svg { width:14px; height:14px; display:block; }

.apg-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.apg-viz { display:flex; align-items:flex-end; gap:3px; margin-left:auto; height:14px; opacity:.6; }
.apg-viz span { width:3px; background: var(--apg-accent); border-radius:2px; animation: apg-bounce 0.9s infinite ease-in-out; }
.apg-viz span:nth-child(2){ animation-delay:.15s; }
.apg-viz span:nth-child(3){ animation-delay:.30s; }
@keyframes apg-bounce { 0%,100%{height:4px;} 50%{height:14px;} }

.apg-tracklist li.is-active .apg-trackbtn { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); }
.apg-tracklist li.is-active .apg-ico { background: linear-gradient(180deg, #eef2ff, #e0e7ff); border-color: rgba(79,70,229,.45); }

/* Responsive */
@media (max-width: 640px) {
  .apg-grid { grid-template-columns: 1fr !important; }
  .apg-now { margin-left:0; }
  .apg-vol { width:70px; }
}