/* User-facing horizontal ranking list. Loaded after style.css to override legacy 3-column cards. */
html body .webhard-rank-section .webhard-rank-grid{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:100%!important;
  margin:0 0 28px!important;
  padding:0!important;
  border:1px solid #e5ded5!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#fff!important;
}
html body .webhard-rank-grid > .rank-list-card{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(460px,1.65fr) minmax(250px,.8fr) 190px!important;
  align-items:center!important;
  gap:24px!important;
  min-height:132px!important;
  padding:18px 22px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid #e9e3dc!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body .webhard-rank-grid > .rank-list-card:last-child{border-bottom:0!important}
html body .webhard-rank-grid > .rank-list-card:hover{background:#fffdf9!important;transform:none!important}
html body .rank-list-card .rank-left-zone{
  display:grid!important;
  grid-template-columns:64px 92px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-width:0!important;
}
html body .rank-list-card .rank-badge-wrap{width:64px!important;text-align:center!important}
html body .rank-list-card .rank-circle{
  position:relative!important;width:50px!important;height:50px!important;margin:0 auto!important;
  border-radius:999px!important;display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,#13a9ee,#087fc5)!important;color:#fff!important;
  border:3px solid #fff!important;outline:1px solid rgba(2,132,199,.24)!important;
  box-shadow:0 6px 16px rgba(14,165,233,.25)!important;
}
html body .rank-list-card .rank-circle b{font-size:20px!important;line-height:1!important;color:#fff!important}
html body .rank-list-card .rank-circle.rank-top-1{background:linear-gradient(145deg,#ffdc4d,#f1aa00)!important;outline-color:rgba(241,170,0,.3)!important;box-shadow:0 7px 17px rgba(241,170,0,.32)!important}
html body .rank-list-card .rank-circle.rank-top-2{background:linear-gradient(145deg,#d9dde2,#8b9198)!important;outline-color:rgba(139,145,152,.3)!important}
html body .rank-list-card .rank-circle.rank-top-3{background:linear-gradient(145deg,#f28b3c,#bf4c11)!important;outline-color:rgba(191,76,17,.28)!important}
html body .rank-list-card .rank-crown{position:absolute!important;top:-24px!important;left:50%!important;transform:translateX(-50%)!important;font-size:22px!important;color:#f4b000!important;line-height:1!important}
html body .rank-list-card .rank-move{display:block!important;margin-top:7px!important;font-size:12px!important;font-weight:950!important;line-height:1!important}
html body .rank-list-card .rank-logo-box{
  width:92px!important;height:82px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  padding:10px!important;border:1px solid #e3ddd4!important;border-radius:12px!important;background:#fff!important;overflow:hidden!important;
}
html body .rank-list-card .rank-logo-box img{display:block!important;max-width:100%!important;max-height:58px!important;width:auto!important;height:auto!important;object-fit:contain!important}
html body .rank-list-card .rank-logo-box strong{font-size:12px!important;line-height:1.35!important;text-align:center!important;word-break:keep-all!important}
html body .rank-list-card .rank-summary{min-width:0!important}
html body .rank-list-card .rank-summary>strong{display:block!important;margin:0 0 8px!important;font-size:20px!important;line-height:1.2!important;font-weight:950!important;color:#08162b!important;white-space:normal!important;word-break:keep-all!important}
html body .rank-list-card .rank-summary p{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;margin:0!important;color:#43536a!important;font-size:14px!important;line-height:1.65!important;word-break:keep-all!important}
html body .rank-list-card .rank-benefit-zone{min-width:0!important;padding:0!important}
html body .rank-list-card .rank-benefit-zone strong{display:block!important;margin:0 0 7px!important;color:#f28a00!important;font-size:17px!important;line-height:1.35!important;font-weight:950!important;word-break:keep-all!important}
html body .rank-list-card .rank-benefit-zone span{display:block!important;color:#9aa4b2!important;font-size:12px!important;font-weight:750!important}
html body .rank-list-card .rank-actions-zone{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;white-space:nowrap!important}
html body .rank-list-card .rank-detail-btn,html body .rank-list-card .rank-direct-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;padding:0 15px!important;border-radius:9px!important;font-size:14px!important;font-weight:950!important;text-decoration:none!important;white-space:nowrap!important}
html body .rank-list-card .rank-detail-btn{background:#fff!important;color:#171717!important;border:1px solid #ddd4c9!important}
html body .rank-list-card .rank-direct-btn{background:#111!important;color:#fff!important;border:1px solid #111!important}
@media(max-width:980px){
 html body .webhard-rank-grid > .rank-list-card{grid-template-columns:minmax(0,1fr) 170px!important;gap:18px!important}
 html body .rank-list-card .rank-benefit-zone{grid-column:1!important;padding-left:174px!important}
 html body .rank-list-card .rank-actions-zone{grid-column:2!important;grid-row:1/3!important}
}
@media(max-width:700px){
 html body .webhard-rank-grid > .rank-list-card{display:block!important;padding:18px!important;min-height:0!important}
 html body .rank-list-card .rank-left-zone{grid-template-columns:54px 74px minmax(0,1fr)!important;gap:11px!important}
 html body .rank-list-card .rank-logo-box{width:74px!important;height:68px!important;padding:8px!important}
 html body .rank-list-card .rank-logo-box img{max-height:48px!important}
 html body .rank-list-card .rank-circle{width:44px!important;height:44px!important}
 html body .rank-list-card .rank-circle b{font-size:18px!important}
 html body .rank-list-card .rank-summary>strong{font-size:17px!important}
 html body .rank-list-card .rank-summary p{font-size:13px!important}
 html body .rank-list-card .rank-benefit-zone{padding:14px 0 0!important;margin-top:14px!important;border-top:1px dashed #e5e7eb!important}
 html body .rank-list-card .rank-actions-zone{margin-top:15px!important;justify-content:flex-end!important}
}

/* Ranking guide panels shown above and below the horizontal list */
html body .rank-auto-guide{
  margin:18px 0 18px;padding:18px 20px;border:1px solid #cdddfd;border-radius:12px;
  background:linear-gradient(135deg,#f9fbff 0%,#ffffff 100%);box-shadow:0 6px 22px rgba(37,99,235,.05);
}
html body .rank-auto-guide-title{display:flex;align-items:center;gap:8px;margin-bottom:9px;color:#2458c7;font-size:16px;font-weight:950}
html body .rank-guide-gear{font-size:18px}
html body .rank-auto-guide ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
html body .rank-auto-guide li{display:flex;align-items:flex-start;gap:9px;color:#34445c;font-size:13px;line-height:1.55}
html body .rank-guide-icon{flex:0 0 20px;width:20px;height:20px;display:inline-grid;place-items:center;border-radius:999px;color:#fff;font-size:11px;font-weight:950;margin-top:1px}
html body .rank-guide-icon.up{background:#13b877} html body .rank-guide-icon.save{background:#6f8df7} html body .rank-guide-icon.info{background:#f59e0b}
html body .up-text{color:#0aa46e!important;font-weight:900} html body .down-text{color:#ef315a!important;font-weight:900}
html body .rank-bottom-guide{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 6px;border:1px solid #f0d6a6;border-radius:12px;
  background:linear-gradient(135deg,#fffdf7 0%,#fff 100%);overflow:hidden;
}
html body .rank-bottom-guide-item{padding:18px 20px;min-width:0}
html body .rank-bottom-guide-item+ .rank-bottom-guide-item{border-left:1px solid #eadfcd}
html body .rank-bottom-guide-item strong{display:block;margin-bottom:9px;color:#9a5b00;font-size:14px;font-weight:950}
html body .rank-bottom-guide-item p{margin:3px 0;color:#6d7480;font-size:12px;line-height:1.55}
@media(max-width:700px){
 html body .rank-bottom-guide{grid-template-columns:1fr}
 html body .rank-bottom-guide-item+ .rank-bottom-guide-item{border-left:0;border-top:1px solid #eadfcd}
 html body .rank-auto-guide{padding:15px}
}

/* Click based daily refresh: four-column help panel and countdown */
html body .rank-bottom-guide{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body .rank-countdown-item{background:#16171b;color:#fff}
html body .rank-countdown-item strong{color:#dbe4ff!important}
html body .rank-countdown-item p{color:#aeb7c8!important}
html body .rank-countdown-clock{display:flex;align-items:center;gap:11px;margin:2px 0 9px}
html body .rank-countdown-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#2a2c32;color:#fff;font-size:23px;font-weight:900}
html body .rank-countdown-time{color:#fff;font-size:25px;line-height:1;font-weight:950;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media(max-width:980px){html body .rank-bottom-guide{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .rank-bottom-guide-item:nth-child(3){border-left:0!important;border-top:1px solid #eadfcd}}
@media(max-width:700px){html body .rank-bottom-guide{grid-template-columns:1fr!important}html body .rank-bottom-guide-item+ .rank-bottom-guide-item{border-left:0!important;border-top:1px solid #eadfcd!important}}