:root{
  --rhp-gap:14px;--rhp-gap-lg:18px;
  --rhp-radius:16px;--rhp-radius-lg:22px;
  --rhp-card:#141414;--rhp-elev:#1b1b1b;
  --rhp-text:#f3f3f3;--rhp-dim:#bdbdbd;--rhp-accent:#00e676;
  --rhp-border:1px solid rgba(255,255,255,.06);
}

/* Container & cards */
#rhp-app{display:grid;gap:var(--rhp-gap)}
.rhp-card{background:var(--rhp-card);border-radius:var(--rhp-radius);border:var(--rhp-border);box-shadow:0 2px 12px rgba(0,0,0,.25)}
.rhp-pad{padding:12px}
.rhp-title{padding:8px;color:var(--rhp-text);font-weight:600}
.rhp-meta{padding:0 8px 8px;color:var(--rhp-dim);font-size:.9rem}
.rhp-skeleton,.rhp-error{padding:14px;color:var(--rhp-dim)}

/* HERO */
.rhp-hero{position:relative;overflow:hidden;border-radius:var(--rhp-radius-lg);background:linear-gradient(90deg,#0b0b0b,#141414)}
.rhp-hero-inner{display:grid;gap:10px;padding:18px}
.rhp-hero-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--rhp-dim);font-size:.82rem}
.rhp-hero h1{margin:6px 0 6px;font-size:clamp(24px,4vw,38px)}
.rhp-hero p{margin:0 0 10px;color:var(--rhp-dim)}
.rhp-hero .rhp-btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--rhp-accent);color:#000;text-decoration:none}
.rhp-hero .rhp-btn.secondary{background:#000;color:#fff;border:var(--rhp-border)}

/* TOP BAND */
.rhp-topband{display:grid;gap:var(--rhp-gap)}
.rhp-now{background:var(--rhp-card);border:var(--rhp-border);border-radius:var(--rhp-radius);padding:12px}
.rhp-charts-mini{background:var(--rhp-elev);border:var(--rhp-border);border-radius:var(--rhp-radius);padding:12px}
.rhp-charts-mini ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rhp-charts-mini li{display:flex;gap:8px;align-items:center}
.rhp-charts-mini img{width:42px;height:42px;object-fit:cover;border-radius:8px;border:var(--rhp-border)}
.rhp-charts-mini .ti{flex:1}
.rhp-charts-mini .rk{opacity:.7;font-size:.9rem}

/* GRID LAYOUT */
@media(min-width:960px){
  .rhp-homegrid{
    display:grid;gap:var(--rhp-gap-lg);
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "hero  top"
      "mixes mixes"
      "artists artists"
      "releases releases"
      "videos videos"
      "events events"
      "news news"
      "photos photos"
      "support support"
      "shop shop"
      "sponsors sponsors";
  }
  .rhp-hero{grid-area:hero}
  .rhp-topband{grid-area:top}
  #rhp-slot-new-mixes{grid-area:mixes}
  #rhp-slot-trending-artists{grid-area:artists}
  #rhp-slot-new-releases{grid-area:releases}
  #rhp-slot-new-videos{grid-area:videos}
  #rhp-slot-upcoming-events{grid-area:events}
  #rhp-slot-news{grid-area:news}
  #rhp-photos{grid-area:photos}
  #rhp-slot-support{grid-area:support}
  #rhp-slot-shop{grid-area:shop}
  #rhp-slot-sponsors{grid-area:sponsors}
}

/* Rails */
.rhp-rail{background:var(--rhp-card);border:var(--rhp-border);border-radius:var(--rhp-radius);padding:12px}
.rhp-rail h3{margin:6px 0 10px}
.rhp-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.rhp-grid{grid-template-columns:repeat(4,1fr)}}
.rhp-card img{display:block;width:100%;height:auto;border-bottom:var(--rhp-border)}

/* Photos gallery */
.rhp-photos-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
@media(min-width:720px){.rhp-photos-grid{grid-template-columns:repeat(6,1fr)}}
.rhp-photos-grid img{width:100%;height:auto;border-radius:10px;border:var(--rhp-border)}

/* Player + Bottom nav */
#rhp-player-host{position:fixed;left:12px;right:12px;bottom:70px;background:#141414;border-radius:12px;border:var(--rhp-border);padding:8px}
.rhp-bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(20,20,20,.98);backdrop-filter:blur(10px);border-top:var(--rhp-border)}
.rhp-bottom-nav .rhp-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px 12px;text-align:center}
.rhp-bottom-nav a{color:var(--rhp-text);text-decoration:none;font-size:.9rem}
.rhp-spacer-player{height:66px}
.rhp-spacer-nav{height:64px}

/* Hide sections when empty */
.rhp-hidden{display:none!important}