.hks-charts-page{
  width:min(1220px,92vw);
  margin:auto;
  padding:64px 0 88px;
}
.charts-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.charts-hero{
  display:grid;
  grid-template-columns:1fr minmax(320px,440px);
  gap:24px;
  align-items:end;
  border:1px solid rgba(255,255,255,.12);
  border-radius:36px;
  padding:30px;
  background:
    radial-gradient(circle at 20% 20%,rgba(0,229,255,.18),transparent 28%),
    radial-gradient(circle at 80% 10%,rgba(102,255,102,.14),transparent 24%),
    rgba(4,8,22,.74);
  backdrop-filter:blur(22px);
  box-shadow:0 34px 120px rgba(0,0,0,.32);
}
.charts-hero h1{
  font-size:clamp(3.2rem,8vw,7rem);
  line-height:.86;
  margin:.2rem 0;
  letter-spacing:-.07em;
}
.charts-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.charts-stats div{
  border:1px solid var(--hk-line);
  border-radius:22px;
  padding:16px;
  background:rgba(0,0,0,.2);
}
.charts-stats strong{
  display:block;
  color:var(--hk-lime);
  font-size:2rem;
  line-height:1;
}
.charts-stats span,
.charts-muted{
  color:var(--hk-muted);
}
.charts-section{
  margin:24px 0;
  border:1px solid var(--hk-line);
  border-radius:30px;
  padding:22px;
  background:rgba(4,8,22,.72);
  backdrop-filter:blur(20px);
}
.charts-section.compact{
  margin:0;
}
.charts-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:16px;
}
.charts-section-head h2{
  margin:.2rem 0;
}
.charts-section-head span{
  color:var(--hk-muted);
  font-size:.9rem;
}
.charts-song-list{
  display:grid;
  gap:12px;
}
.chart-song-row{
  display:grid;
  grid-template-columns:74px 92px 1fr minmax(210px,280px);
  align-items:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:12px;
  background:rgba(0,0,0,.2);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.chart-song-row:hover{
  transform:translateY(-2px);
  border-color:rgba(102,255,102,.32);
  background:rgba(102,255,102,.05);
}
.chart-rank{
  font-size:1.5rem;
  font-weight:950;
  color:var(--hk-lime);
  text-align:center;
}
.rank-1 .chart-rank,
.rank-2 .chart-rank,
.rank-3 .chart-rank{
  color:#041018;
  background:linear-gradient(135deg,var(--hk-cyan),var(--hk-lime));
  border-radius:18px;
  padding:12px 6px;
}
.chart-cover{
  width:92px;
  height:92px;
  border-radius:20px;
  overflow:hidden;
  display:block;
  background:rgba(0,0,0,.25);
}
.chart-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chart-main h3{
  margin:0 0 4px;
}
.chart-main h3 a{
  color:white;
}
.chart-main p{
  color:var(--hk-muted);
  margin:0 0 8px;
}
.chart-main p a{
  color:var(--hk-cyan);
}
.chart-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chart-tags span{
  border:1px solid rgba(0,229,255,.2);
  border-radius:999px;
  padding:5px 8px;
  color:var(--hk-muted);
  background:rgba(0,229,255,.05);
}
.chart-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.chart-metrics span,
.chart-metrics strong{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:8px 10px;
  background:rgba(0,0,0,.2);
  color:var(--hk-muted);
}
.chart-metrics strong{
  grid-column:1 / -1;
  color:var(--hk-lime);
}
.charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:24px 0;
}
.artist-chart-list,
.genre-bars{
  display:grid;
  gap:10px;
}
.artist-chart-list a{
  display:grid;
  grid-template-columns:52px 56px 1fr auto;
  gap:12px;
  align-items:center;
  color:white;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:10px;
  background:rgba(0,0,0,.18);
}
.artist-chart-list span{
  color:var(--hk-lime);
  font-weight:950;
}
.artist-chart-list img{
  width:56px;
  height:56px;
  border-radius:18px;
  object-fit:cover;
}
.artist-chart-list small{
  color:var(--hk-muted);
}
.genre-bars div{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:12px;
  background:rgba(0,0,0,.18);
}
.genre-bars i{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:var(--w);
  background:linear-gradient(90deg,var(--hk-cyan),var(--hk-lime));
}
.charts-empty{
  border:1px dashed rgba(102,255,102,.26);
  border-radius:30px;
  padding:26px;
  margin:24px 0;
  background:rgba(102,255,102,.04);
}
@media(max-width:980px){
  .charts-hero,
  .charts-grid{
    grid-template-columns:1fr;
  }
  .chart-song-row{
    grid-template-columns:58px 80px 1fr;
  }
  .chart-metrics{
    grid-column:3;
    grid-template-columns:repeat(4,auto);
    justify-content:start;
  }
  .chart-metrics strong{
    grid-column:auto;
  }
}
@media(max-width:680px){
  .hks-charts-page{
    width:94vw;
    padding-top:36px;
  }
  .charts-hero{
    padding:20px;
    border-radius:28px;
  }
  .charts-stats{
    grid-template-columns:1fr 1fr;
  }
  .charts-section{
    padding:16px;
    border-radius:24px;
  }
  .charts-section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .chart-song-row{
    grid-template-columns:46px 70px 1fr;
    gap:10px;
    border-radius:20px;
  }
  .chart-rank{
    font-size:1rem;
  }
  .chart-cover{
    width:70px;
    height:70px;
    border-radius:16px;
  }
  .chart-metrics{
    grid-column:1 / -1;
    grid-template-columns:repeat(2,1fr);
  }
  .artist-chart-list a{
    grid-template-columns:42px 48px 1fr;
  }
  .artist-chart-list small{
    grid-column:3;
  }
}


.charts-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.charts-tabs a{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:10px 13px;
  background:rgba(0,0,0,.2);
  color:var(--hk-muted);
  font-weight:850;
}
.charts-tabs a.active{
  color:#041018;
  border-color:transparent;
  background:linear-gradient(135deg,var(--hk-cyan),var(--hk-lime));
  box-shadow:0 0 38px rgba(102,255,102,.16);
}
.charts-date-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.charts-date-form label{
  display:grid;
  gap:6px;
  color:var(--hk-muted);
  font-size:.9rem;
}
.charts-date-form select{
  min-width:260px;
  border:1px solid var(--hk-line);
  border-radius:16px;
  padding:11px 12px;
  background:rgba(4,8,22,.86);
  color:white;
}
.charts-notice{
  border:1px solid rgba(255,211,101,.32);
  border-radius:22px;
  padding:14px 16px;
  margin:18px 0;
  background:rgba(255,211,101,.07);
  color:#ffe7a3;
}
.chart-move{
  font-weight:950;
  text-align:center;
}
.chart-move.move-up{
  color:var(--hk-lime);
  border-color:rgba(102,255,102,.28);
  background:rgba(102,255,102,.07);
}
.chart-move.move-down{
  color:#ff8ca3;
  border-color:rgba(255,91,124,.28);
  background:rgba(255,91,124,.07);
}
.chart-move.move-new{
  color:var(--hk-cyan);
  border-color:rgba(0,229,255,.28);
  background:rgba(0,229,255,.07);
}
.chart-move.move-same{
  color:var(--hk-muted);
}
.chart-move.move-week{
  color:#ffe7a3;
  border-color:rgba(255,211,101,.28);
  background:rgba(255,211,101,.07);
}
.charts-admin-hint{
  margin-top:18px;
  border:1px solid rgba(102,255,102,.18);
  border-radius:18px;
  padding:13px;
  background:rgba(102,255,102,.04);
}
.charts-admin-hint p{
  color:var(--hk-muted);
}
.charts-admin-hint code{
  color:var(--hk-lime);
}
@media(max-width:680px){
  .charts-tabs a{
    flex:1 1 auto;
    text-align:center;
  }
  .charts-date-form select{
    min-width:0;
    width:100%;
  }
}