.drp-wrapper { max-width: 900px; margin: 20px auto; background:#0b0b0b; color:#f5f5f5; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; border:1px solid #191919; }
.drp-header{ padding:14px 18px; background: linear-gradient(90deg, #111, #1a1a1a); border-bottom:1px solid #1f1f1f; }
.drp-header h3{ margin:0; font-size:18px; letter-spacing:.5px; text-transform:uppercase; color:#ff2a2a; }

.drp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
@media(max-width: 680px){ .drp-grid{ grid-template-columns:1fr; } }

.drp-station{ display:flex; gap:14px; align-items:center; background:#121212; border:1px solid #202020; border-radius:14px; padding:12px; position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.drp-station:hover{ transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.35); border-color:#2a2a2a; }

.drp-logo{ width:68px; height:68px; border-radius:12px; background:#0f0f0f; object-fit:contain; border:1px solid #222; display:block; }
.drp-logo--placeholder{ display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:1px; color:#a1a1a1; }

.drp-meta{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drp-title{ font-size:16px; font-weight:700; color:#ececec; }

.drp-controls{ display:flex; gap:10px; }
.drp-btn{ display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; padding:10px 16px; cursor:pointer; background:#ff2a2a; color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.6px; box-shadow:0 6px 14px rgba(255, 42, 42, 0.35); transition: transform .1s ease, box-shadow .2s ease, background .2s ease; }
.drp-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 18px rgba(255, 42, 42, 0.4); }
.drp-btn[aria-pressed="true"]{ background:#cf1111; }

.drp-icon{ width:0;height:0;border-style:solid; }
.drp-icon--play{ border-width:8px 0 8px 12px; border-color: transparent transparent transparent #fff; }
.drp-icon--pause{ width:12px; height:12px; border:none; display:inline-block; background: linear-gradient(90deg, #fff 0 40%, transparent 40% 60%, #fff 60% 100%); }

.drp-note{ padding:6px 16px 16px; font-size:12px; color:#a9a9a9; }