
/* ONLINE RADIO HIT — unified chart component */
.home-chart-section{position:relative;overflow:visible}
.home-chart-section:before{content:"";position:absolute;left:0;right:0;top:42px;bottom:0;z-index:-1;border-radius:40px;background:linear-gradient(135deg,rgba(112,76,255,.08),rgba(255,61,129,.06))}
.chart-hero{padding:58px 7vw 72px;min-width:0;overflow:visible}
.chart-hero>.kicker{display:block;width:max-content;margin:0 0 8px}
.chart-hero>h1{margin:0 0 24px;font-size:clamp(48px,6vw,76px);line-height:.92;letter-spacing:-.055em;color:var(--hit-ink,var(--ink))}
.chart-intro{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:0;margin:0 0 24px;padding:28px 30px;border:1px solid var(--hit-line,rgba(216,184,148,.35));border-radius:26px;background:var(--hit-surface,rgba(255,253,250,.96));box-shadow:var(--shadow-soft)}
.chart-intro>div{min-width:0;flex:1 1 auto}.chart-intro p{max-width:760px;margin:0;color:var(--hit-muted,var(--muted));font-size:16px;line-height:1.55}
.chart-badge{flex:0 0 76px;width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#806c5e,#c99088);color:#fff!important;font-size:10px;line-height:1;font-weight:1000;letter-spacing:.1em;text-align:center;box-shadow:0 10px 24px rgba(93,70,55,.16)}
.home-chart-section .chart-intro{margin-bottom:28px}.home-chart-section .chart-intro>span{flex:0 0 82px;width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:#6b594e;color:#fff!important;font-size:9px;line-height:.85;letter-spacing:.12em;font-weight:1000}.home-chart-section .chart-intro b{font-size:27px;letter-spacing:-.06em}
.chart-stage{margin-top:24px;padding:10px;border:1px solid var(--hit-line,rgba(216,184,148,.32));border-radius:28px;background:rgba(255,255,255,.68);box-shadow:var(--shadow-soft);overflow:visible}
.chart-list{display:grid;gap:8px;border:0}
.chart-row{position:relative;display:grid;grid-template-columns:56px 72px minmax(0,1fr) 190px;align-items:center;gap:16px;min-width:0;min-height:92px;padding:10px 12px;border:1px solid rgba(54,47,43,.09);border-radius:18px;background:rgba(255,255,255,.9);color:var(--hit-ink,var(--ink));transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.chart-row:hover{transform:translateY(-2px);background:#fff;border-color:rgba(200,143,139,.35);box-shadow:0 12px 28px rgba(55,42,34,.09)}.chart-row>*{min-width:0}
.chart-row .rank{display:grid;place-items:center;width:46px;height:46px;margin:0 auto;border-radius:50%;background:linear-gradient(145deg,#f2e5dc,#fff);color:var(--hit-muted,#806c5e);font-size:17px;line-height:1;font-weight:1000}
.chart-row:first-child .rank{background:linear-gradient(145deg,#806c5e,#c99088);color:#fff;box-shadow:0 8px 18px rgba(93,70,55,.15)}
.chart-cover{width:72px;height:72px;border-radius:17px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#806c5e,#c99088);color:#fff;font-weight:1000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 20px rgba(93,70,55,.11)}.chart-cover img{display:block;width:100%;height:100%;object-fit:cover}
.chart-row>div:nth-child(3){min-width:0}.chart-row>div:nth-child(3)>strong{display:block;font-size:17px;line-height:1.2;overflow-wrap:anywhere}.chart-row>div:nth-child(3)>p{margin:5px 0 0;color:var(--hit-muted,var(--muted));font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.chart-row .chart-actions{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:7px}.chart-actions a{display:inline-flex;align-items:center;min-height:28px;padding:2px 0;color:var(--hit-link,#8b5b00);font-size:11px;font-weight:900;overflow-wrap:anywhere}
.chart-row .chart-row-action{display:flex;justify-content:center;align-items:center;min-width:0;width:100%}.chart-row .mini-play{position:relative;display:grid;place-items:center;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;margin:0!important;padding:0!important;border:1px solid #cfe2ff!important;border-radius:50%!important;background:linear-gradient(135deg,#f5faff,#eaf3ff)!important;color:transparent!important;font-size:0!important;line-height:1!important;box-shadow:0 7px 18px rgba(20,112,230,.11)!important;cursor:pointer;touch-action:manipulation;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.chart-row .mini-play:before{content:"";display:block;width:0;height:0;margin:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid #0878ee;transform:translateX(1px)}.chart-row .mini-play.is-current:before,.chart-row .mini-play[aria-pressed="true"]:before{width:4px;height:14px;margin:0;border:0;border-radius:1px;background:#0878ee;box-shadow:6px 0 0 #0878ee;transform:none}
.chart-row .mini-play:hover{transform:scale(1.06);background:linear-gradient(135deg,#eaf3ff,#dcecff)!important;box-shadow:0 11px 24px rgba(20,112,230,.16)!important}
.chart-row .mini-play:focus-visible{outline:3px solid rgba(20,120,237,.22);outline-offset:3px}.chart-row .chart-row-action .orh-track-player{display:flex;align-items:center;justify-content:center;width:100%;min-width:0}.chart-row .chart-row-action audio{display:none}
.chart-note{margin-top:18px;padding:15px 19px;border:1px solid var(--hit-line,rgba(216,184,148,.3));border-radius:17px;background:linear-gradient(135deg,#faf3ee,#f7eef2);color:var(--hit-muted,var(--muted));font-size:13px;line-height:1.5}
.artist-chart-stage{margin-top:36px}.artist-chart-stage .chart-intro{margin-bottom:14px}.artist-chart-stage .chart-intro h2{margin:9px 0 0;color:var(--hit-ink,var(--ink));font-size:clamp(30px,4vw,48px);line-height:.98;letter-spacing:-.045em}.artist-chart-stage .chart-intro p{margin-top:7px}
.artist-chart-row{display:grid;grid-template-columns:56px 64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 18px;margin-bottom:9px;border:1px solid rgba(190,143,56,.2);border-radius:18px;background:rgba(255,255,255,.82)}.artist-chart-cover{display:block;width:64px;height:64px;border-radius:16px;overflow:hidden;background:#eee8e3;text-decoration:none}.artist-chart-cover img{display:block;width:100%;height:100%;object-fit:cover}.artist-chart-cover span{display:grid;place-items:center;width:100%;height:100%;font-size:24px;font-weight:900;color:#a77b2d}.artist-chart-rank{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f2e5dc;color:#a77b2d;font-size:17px;font-weight:1000}.artist-chart-name{min-width:0;font-size:18px;font-weight:900}.artist-chart-name a{color:inherit;text-decoration:none}.artist-chart-meta{margin-top:4px;color:var(--hit-muted,var(--muted));font-size:12px}.artist-chart-badge{padding:8px 11px;border-radius:999px;background:#a77b2d;color:#fff;font-size:10px;font-weight:900;letter-spacing:.06em}.artist-chart-empty{padding:24px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(75,64,56,.09);color:var(--hit-muted,var(--muted))}
@media(max-width:700px){.chart-hero{padding-top:42px;padding-bottom:48px}.chart-hero>h1{font-size:clamp(42px,12vw,58px);margin-bottom:18px}.chart-intro{align-items:center;padding:22px 20px;gap:18px}.chart-intro p{font-size:15px}.chart-badge{flex-basis:62px;width:62px;height:62px}.home-chart-section .chart-intro>span{flex-basis:68px;width:68px;height:68px}.chart-stage{margin-top:18px;padding:7px;border-radius:22px}.chart-list{gap:6px}.chart-row{grid-template-columns:40px 54px minmax(0,1fr)!important;gap:9px!important;min-height:76px;padding:9px 7px}.chart-row .chart-row-action{grid-column:2/-1;justify-content:flex-start;padding-top:2px}.chart-row>.orh-listen-button{width:120px!important;min-width:120px!important;max-width:120px!important;height:42px!important;min-height:42px!important;padding:0 12px!important;font-size:13px!important}.chart-row .rank{width:34px;height:34px;font-size:14px}.chart-cover{width:54px;height:54px;border-radius:14px}.chart-row>div:nth-child(3)>strong{font-size:14px}.chart-row>div:nth-child(3)>p{font-size:12px}.chart-row .mini-play{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important}.chart-row .chart-actions{gap:2px 10px}.chart-actions a{font-size:10px}.artist-chart-row{grid-template-columns:44px 56px minmax(0,1fr);gap:10px}.artist-chart-cover{width:56px;height:56px;border-radius:14px}.artist-chart-badge{grid-column:2;justify-self:start}}
@media(max-width:520px){.chart-intro{align-items:flex-start;padding:20px 17px}.chart-badge{flex-basis:56px;width:56px;height:56px;font-size:9px}.home-chart-section .chart-intro>span{flex-basis:62px;width:62px;height:62px}.chart-row{grid-template-columns:34px 50px minmax(0,1fr)!important;gap:8px!important;padding:9px 5px}.chart-row .chart-row-action{grid-column:2/-1;justify-content:flex-start;padding-top:2px}.chart-row>.orh-listen-button{width:112px!important;min-width:112px!important;max-width:112px!important;height:40px!important;min-height:40px!important;padding:0 10px!important;font-size:12px!important}.chart-row .rank{width:31px;height:31px;font-size:13px}.chart-cover{width:50px;height:50px}.chart-row>div:nth-child(3)>strong{font-size:13px}.chart-row>div:nth-child(3)>p{font-size:11px}.chart-row .mini-play{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}.chart-row .mini-play:before{font-size:11px}.chart-row .mini-play.is-current:before,.chart-row .mini-play[aria-pressed="true"]:before{font-size:13px}.artist-chart-stage{margin-top:28px}}
@media(max-width:520px){.artist-chart-row{grid-template-columns:44px 56px minmax(0,1fr)!important;gap:10px!important}.artist-chart-badge{grid-column:2/-1!important;justify-self:start!important;width:auto!important;min-width:104px!important;box-sizing:border-box!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;padding:9px 14px!important}}@media(prefers-reduced-motion:reduce){.chart-row,.chart-row .mini-play{transition:none}}


/* MOBILE CHART LISTEN — compact right-aligned action */
@media(max-width:520px){
  .chart-row .chart-row-action{
    justify-content:flex-end!important;
  }
  .chart-row .chart-row-action .orh-track-player{
    width:auto!important;
    justify-content:flex-end!important;
    margin-left:auto!important;
  }
  .chart-row .chart-row-action .orh-listen-button,
  .chart-row .chart-row-action .orh-track-player button[data-track-play]{
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    min-height:40px!important;
    height:40px!important;
    margin-left:auto!important;
    margin-right:0!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
}
@media(max-width:380px){
  .chart-row .chart-row-action .orh-listen-button,
  .chart-row .chart-row-action .orh-track-player button[data-track-play]{
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
  }
}

/* MOBILE CHART LISTEN BUTTON — final container alignment */
@media(max-width:520px){
  .chart-row .chart-row-action{
    width:100%!important;
    justify-content:flex-end!important;
    align-items:center!important;
  }
  .chart-row .chart-row-action .orh-track-player{
    width:100%!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    margin-left:0!important;
  }
  .chart-row .chart-row-action .orh-listen-button,
  .chart-row .chart-row-action .orh-track-player button[data-track-play]{
    flex:0 0 104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
}
@media(max-width:380px){
  .chart-row .chart-row-action .orh-listen-button,
  .chart-row .chart-row-action .orh-track-player button[data-track-play]{
    flex-basis:96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
  }
}

/* MOBILE HOME CHART — align the real player container to the right */
@media(max-width:520px){
  .orh-chart-row{
    display:grid!important;
    grid-template-columns:34px 50px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }
  .orh-chart-row > .orh-track-player{
    grid-column:2/-1!important;
    justify-self:stretch!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-top:2px!important;
  }
  .orh-chart-row > .orh-track-player .orh-listen-button,
  .orh-chart-row > .orh-track-player button[data-track-play]{
    flex:0 0 104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    min-height:40px!important;
    height:40px!important;
    margin-left:auto!important;
    margin-right:0!important;
    padding:0 10px!important;
  }
}
@media(max-width:380px){
  .orh-chart-row > .orh-track-player .orh-listen-button,
  .orh-chart-row > .orh-track-player button[data-track-play]{
    flex-basis:96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
  }
}

/* Weekly listener chart: clear periods, movement and touch-friendly voting. */
.orh-chart-period{display:flex;flex-direction:column;gap:8px;margin:24px 0;padding:20px 24px;border:1px solid #ded8f2;border-radius:18px;background:#faf8ff;color:#30274b}
.orh-chart-period span,.orh-chart-movement{font-size:12px;line-height:1.6;color:#625a72}.orh-chart-movement{margin-top:10px}
.chart-row .chart-row-action{flex-direction:column;align-items:stretch;gap:12px;min-width:0}
.orh-vote-wrap{display:flex;flex-direction:column;gap:7px;min-width:0}.orh-vote-wrap [role="status"]{font-size:11px;line-height:1.5;color:#625a72;max-width:220px}
body main .orh-chart-vote{min-height:44px;padding:10px 16px;border:1px solid #b4a3e1;border-radius:14px;background:#f5f0ff;color:#4c32a1;font-family:inherit;font-weight:600;font-size:12px;line-height:1.4;cursor:pointer;white-space:normal;overflow-wrap:normal;word-break:normal}
body main .orh-chart-vote:disabled{opacity:.65;cursor:default}.orh-chart-vote:focus-visible{outline:3px solid #9b7ce0;outline-offset:3px}
body main [data-orh-design="premium"] .orh-chart-vote{border-color:#ba8a35;background:linear-gradient(115deg,#eed18a,#fff2ce,#e5be6c);color:#513b13}
.orh-chart-rules{margin-top:28px;padding:22px 24px;border:1px solid #ded8f2;border-radius:18px;background:#fff}.orh-chart-rules summary{cursor:pointer;font-weight:600;color:#372650}.orh-chart-rules p{font-size:14px;line-height:1.8;margin:18px 0 0}
.orh-chart-challengers{margin-top:48px}.orh-chart-candidate{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid #e7e0f0}.orh-chart-candidate a{color:#30274b;font-weight:600}.orh-chart-candidate p{font-size:13px;margin:6px 0 0}
@media(max-width:700px){.orh-chart-period,.orh-chart-rules{padding:18px}.chart-row .chart-row-action{align-items:stretch!important}.chart-row .chart-row-action>.orh-track-player{justify-content:flex-end!important;width:100%!important}.chart-row .orh-vote-wrap{align-items:flex-end}.orh-chart-vote{max-width:100%}.orh-chart-candidate{align-items:stretch;flex-direction:column;gap:12px}.orh-chart-candidate .orh-vote-wrap{align-items:flex-start}}

.orh-current-week{font-size:10px;line-height:1.5;color:#6b617b;max-width:220px;text-align:right}
