:root{
  --bg:#C40001; --card:#a30001; --muted:#f5f5f5; --border:#ff6b6b; --accent:#ffffff; --accent-2:#ffe3e3; --text:#ffffff;
}
.md-rs-wrap{color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:18px; position:relative; overflow:hidden}
.md-rs-header{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.md-rs-title{font-size:22px; font-weight:800; letter-spacing:.3px; color:#fff}
.md-rs-search{margin-left:auto; border-radius:12px; padding:10px 14px; border:1px solid #fff; background:rgba(255,255,255,0.1); color:#fff; min-width:220px; width:auto}
.md-rs-tabs{display:flex; gap:8px; width:100%; flex-wrap:wrap}
.md-rs-tab{border:1px solid #fff; background:transparent; color:#fff; padding:6px 12px; border-radius:999px; cursor:pointer; font-size:13px}
.md-rs-tab.active{background:rgba(255,255,255,0.15)}
.md-rs-favtoggle{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #fff; border-radius:999px;}
.md-rs-favtoggle input{accent-color:#ffffff; transform:scale(1.1)}
.md-rs-filters{display:flex; align-items:center; gap:10px; margin:6px 0 10px 0}
.md-rs-countrywrap select{border:1px solid #fff; background:transparent; color:#fff; border-radius:10px; padding:6px 10px}
.md-rs-countrywrap option{color:#000}
.md-rs-empty{background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; padding:10px 12px; border-radius:10px; margin:6px 0 10px 0}
.md-rs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.md-rs-card{background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.35); border-radius:18px; overflow:hidden; position:relative; box-shadow:0 10px 28px rgba(0,0,0,0.25)}
.md-rs-card .thumb{height:140px; background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; overflow:hidden}
.md-rs-card img{width:100%; height:100%; object-fit:cover}
.md-rs-card .meta{padding:12px 12px 14px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.md-rs-name{font-weight:800; font-size:14px; letter-spacing:.1px}
.md-rs-actions{display:flex; align-items:center; gap:8px}
.md-rs-fav{border:none; background:transparent; color:#fff; font-size:18px; cursor:pointer; line-height:1}
.md-rs-playbtn{background:#ffffff; color:#C40001; border:2px solid #ffffff; cursor:pointer; border-radius:12px; padding:10px 16px; font-weight:800; font-size:14px; box-shadow:0 6px 14px rgba(0,0,0,0.25); transition:transform .15s, box-shadow .15s}
.md-rs-playbtn:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,0.35); background:#fff}
.md-rs-mini-player{position:sticky; bottom:0; left:0; right:0; margin-top:16px; background:rgba(0,0,0,0.18); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.3); border-radius:16px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.md-rs-mini-meta{display:flex; align-items:center; gap:12px}
.md-rs-mini-image{width:44px; height:44px; border-radius:10px; background:#121826; border:1px solid rgba(255,255,255,0.3); overflow:hidden}
.md-rs-mini-image img{width:100%; height:100%; object-fit:cover}
.md-rs-mini-name{font-weight:700}
.md-rs-mini-status{color:var(--muted); font-size:12px}
.md-rs-mini-controls{display:flex; align-items:center; gap:10px}
.md-rs-btn{border:1px solid #ffffff; background:transparent; color:#ffffff; padding:8px 12px; border-radius:10px; cursor:pointer;}
.md-rs-btn:hover{background:rgba(255,255,255,0.2)}
#md-rs-vol{width:130px}
@media (max-width:640px){ .md-rs-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} #md-rs-vol{width:90px} }
@media (max-width:480px){ .md-rs-grid{grid-template-columns:1fr 1fr} .md-rs-search{min-width:100%; width:100%} .md-rs-mini-player{flex-wrap:wrap} }

.md-rs-country-badge{display:inline-block; margin-top:4px; font-size:11px; padding:2px 6px; border:1px solid rgba(255,255,255,0.6); border-radius:999px; opacity:.95}
.md-rs-header .md-rs-filters{display:inline-flex; margin:0 0 0 8px; align-items:center}

/* Fallback grid (visible only if JS fails to initialize) */
.md-rs-fallback .md-rs-playbtn{display:none}
.md-rs-fallback audio{background:rgba(255,255,255,0.1); border-radius:8px}

.md-rs-card.playing{border-color:#ffffff; box-shadow:0 0 0 2px rgba(255,255,255,0.6), 0 10px 28px rgba(0,0,0,0.35)}
.md-rs-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.6)}
.md-rs-pill .eq{display:inline-flex; gap:2px; align-items:flex-end; height:10px}
.md-rs-pill .eq i{display:inline-block; width:2px; height:6px; background:#fff; animation:mdrsEQ 1s infinite ease-in-out}
.md-rs-pill .eq i:nth-child(2){animation-delay:.15s}
.md-rs-pill .eq i:nth-child(3){animation-delay:.3s}
@keyframes mdrsEQ{0%{height:4px} 50%{height:10px} 100%{height:4px}}

.md-rs-pill.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:4px 10px;border-radius:999px;background:#e60000;color:#fff;font-weight:700;
  text-transform:uppercase;animation:mdrsBlink 1s infinite}
.md-rs-pill.live .dot{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block}
@keyframes mdrsBlink{0%,50%,100%{opacity:1}25%,75%{opacity:.5}}

.md-rs-pill.pause{display:inline-flex;align-items:center;font-size:12px;
  padding:4px 10px;border-radius:999px;background:#666;color:#fff;
  font-weight:700;text-transform:uppercase;opacity:0.85}

.md-rs-card{position:relative}
.md-rs-badge{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;display:inline-flex;
  align-items:center;gap:4px}
.md-rs-badge.live{background:#e60000;color:#fff;animation:blink 1s infinite}
.md-rs-badge.live .dot{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block}
.md-rs-badge.pause{background:#666;color:#fff;opacity:.9}
@keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:.5}}