/* ==========================================================================
   Hot ranking ranking.css
   Desktop 1081-1920 / Mobile <1080 -- replicates Figma node 624:1454 / 624:2638
   ========================================================================== */

/* Page outer spacing */
.rank-page {padding: 28px 0 116px;}

/* Breadcrumb */
.breadcrumb {
  font-size: 16px; color: var(--t-400); margin-bottom: 30px;
}
.breadcrumb .cur { color: var(--t-800); }

/* Generic white panel card */
.rk-panel {
  background: var(--bg-white); border-radius: var(--r-card);
  padding: 28px;
}

/* Small heading + description */
.rk-title { font-weight: 700; font-size: 20px; color: #111; line-height: 1.2; }
.rk-desc {font-size: 16px;color: var(--t-400);margin-top: 10px;}

/* ====================== Tab switch (Hottest this week / New this month / All-time list) ====================== */
.rk-tabs {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-soft); border-radius: 27.5px; padding: 6px;
  margin-top: 22px;
}
.rk-tab {
  font-family: var(--font-mi); font-size: 16px; color: #908d93;
  background: transparent; border-radius: 90px;
  padding: 10.5px 19px; line-height: 1; white-space: nowrap; transition: all .15s;
}
.rk-tab.active { background: var(--orange); color: #fff; }
.rk-tab:not(.active):hover { color: var(--orange); }

/* ====================== Ranking table ====================== */
.rk-table {
  margin-top: 22px; background: var(--bg-soft);
  border-radius: var(--r-card); overflow: hidden;
}
.rk-thead, .rk-trow {
  display: grid;
  grid-template-columns: 1fr 3fr 1.4fr 1.2fr 1.5fr 2.4fr;   /* 平台加宽，下载/评分收窄靠近 */
  align-items: center; padding: 0 54px;
}
.rk-thead {
  background: var(--orange); color: #fff; height: 64px;
  font-weight: 700; font-size: 20px;
}
.rk-trow {
  height: 74px; border-bottom: 1px solid rgba(161,161,161,.2);
}
.rk-trow:last-child { border-bottom: none; }
.rk-hide { display: none; }   /* 非当前榜单(Tab)的行默认隐藏 */

/* Rank number */
.rk-rank { font-weight: 700; font-size: 20px; }
.rk-rank.r1 { color: var(--rank-1); }
.rk-rank.r2 { color: var(--rank-2); }
.rk-rank.r3 { color: var(--rank-3); }
.rk-rank.rx { color: var(--rank-x); }

/* Platform cell (icon + name) */
.rk-plat { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.rk-plat-ico {
  width: 48px; height: 48px; border: 1px solid #e8e8e8; border-radius: 8px;
  overflow: hidden; flex-shrink: 0;
}
.rk-plat-ico img { width: 100%; height: 100%; object-fit: cover; }
.rk-plat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rk-plat-name { font-weight: 500; font-size: 20px; color: var(--t-800); line-height: 1.2; }

/* Weekly downloads (icon + number) */
.rk-dl { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; color: var(--t-500); }
.dl-ico {
  width: 18px; height: 22px; flex-shrink: 0; background: #1296db;
  -webkit-mask: url('../img/ranking/ranking-dl.svg') center / contain no-repeat;
  mask: url('../img/ranking/ranking-dl.svg') center / contain no-repeat;
}

/* Rating (star + number) */
.rk-score { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; color: var(--t-500); }
.rk-star {
  width: 18px; height: 18px; flex-shrink: 0; background: #ffbb01;
  -webkit-mask: url('../img/ranking/ranking-star-icon.svg') center / contain no-repeat;
  mask: url('../img/ranking/ranking-star-icon.svg') center / contain no-repeat;
}

/* Trend chip */
.rk-trend { display: flex; }
.trend-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 54px; height: 31px; border-radius: 19px;
  font-family: var(--font-sc); font-size: 14px; line-height: 1;
}
.trend-chip.up { background: #e6f4ea; color: #3a9c44; }
.trend-chip.down { background: #fce4e4; color: #bb3333; }
.trend-chip.new { background: #e7e7e7; color: #686868; }
.trend-chip .arr { font-size: 15px; line-height: 1; font-weight: 700; }

/* Action buttons */
.rk-act { display: inline-flex; align-items: center; gap: 10px; }
.rk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mi); font-size: 16px; border-radius: var(--r-pill);
  padding: 11px 20px; white-space: nowrap; transition: all .18s ease;
}
.rk-btn.solid { background: var(--orange); color: #fff; }
.rk-btn.solid:hover { filter: brightness(1.06); }
.rk-btn.outline { border: 1px solid var(--orange); color: var(--orange); }
.rk-btn.outline:hover { background: var(--orange); color: #fff; }

/* ====================== Middle two columns (Fastest rising platforms / User reputation list) ====================== */
.rk-duo {display: grid;grid-template-columns: 1fr 1fr;gap: 24px;margin-top: 20px;}

/* Fastest rising platforms */
.rk-fast .rk-title { margin-bottom: 0; }
.fast-chart {
  position: relative; overflow: hidden;
  background: var(--bg-soft); border-radius: var(--r-sm);
  height: 150px; margin-top: 18px;
}
.trend-spark { position: absolute; inset: 0; width: 100%; height: 100%; }
.trend-line { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-area { fill: var(--orange); opacity: .1; }
.fast-chart span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 14px; color: var(--t-400); }
.fast-list { margin-top: 16px; }
.fast-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; border-bottom: 1px solid rgba(161,161,161,.2);
}
.fast-row:last-child { border-bottom: none; }
.fast-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 20px; color: var(--t-800); }
.fast-pct { font-size: 20px; color: #3a9c44; }

/* User reputation list */
.rep-sub { font-size: 16px; color: var(--t-400); margin-top: 11px; }
.rep-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.rep-row {
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto auto;   /* 名称 | 评分 | 标签：评分/标签对齐成列 */
  align-items: center;
  gap: 24px;
  padding: 0 74px 0 23px;
}
.rep-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 20px; color: var(--t-800); min-width: 0; overflow: hidden; white-space: nowrap; }
.flag-icon { width: 18px; height: 14px; object-fit: cover; flex-shrink: 0; }
.rep-score { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; color: var(--t-500); flex-shrink: 0; }
.rep-tag { font-size: 16px; color: var(--t-500); white-space: nowrap; }

/* ====================== Search by investment need ====================== */
.rk-need { margin-top: 20px; }
.rk-need .rk-title { margin-bottom: 0; }

/* Segmented control */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: 100px;
  padding: 2px;
  margin-top: 33px;
}
/* 展开：放开宽度上限，优先铺成一行（覆盖桌面端 max-width:520px） */
.segmented.is-open { max-width: 100%; }
/* 展开后实测真的换成多行时，才把药丸圆角(100px)改成圆角矩形，避免高盒子+药丸+active 色不伦不类 */
.segmented.is-multi { border-radius: 16px; padding: 4px; }
.seg-btn {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;                       /* 不收缩：放不下就换行 → 折叠触发「更多」 */
  width: clamp(72px, 18vw, 116px);      /* 固定宽度：每个按钮形状统一 */
  font-family: var(--font-sc); font-size: 16px; color: var(--rank-x);
  letter-spacing: -0.08px; padding: 14px 6px; border-radius: 66px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all .15s;
}
.seg-btn.active { background: var(--orange); color: #fff; }
.seg-btn:not(.active):hover { color: var(--orange); }
.seg-toggle { color: var(--orange); }   /* 「更多 N ▾ / 收起 ▲」折叠开关 */

/* Need result card */
.need-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 29px;margin-top: 22px;}
.need-card {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30.73px 35px 35.98px;
}
.need-ico {
  width: 84px; height: 84px; border: 1px solid var(--line-1); border-radius: var(--r-sm);
  overflow: hidden;
}
.need-ico img { width: 100%; height: 100%; object-fit: cover; }
.need-name { font-weight: 700; font-size: 20px; color: var(--t-700); margin-top: 19px; }
.need-card .dl-btn { margin-top: 18px; align-self: stretch; font-size: 20px; }

/* Risk notice */
.rk-risk {
  text-align: center;
  font-size: 14px;
  color: var(--t-400);
  margin-top: 70px;
}

/* ==========================================================================
   Responsive -- mobile (<1080)  -- matches Figma mobile 624:2638
   ========================================================================== */
@media (max-width: 1080px) {
  .rank-page {padding: clamp(18px, 4.72vw, 51px) 0 clamp(41px, 10.93vw, 118px);}
  .breadcrumb {font-size: clamp(10px, 2.59vw, 28px);margin-bottom: clamp(17px, 4.54vw, 49px);}

  .rk-panel {padding: clamp(19px, 5.09vw, 55px) clamp(8px, 2.13vw, 23px) clamp(12px, 3.24vw, 35px);border-radius: var(--r-card);}
  .rk-title {font-size: clamp(15px, 3.89vw, 42px);}
  .rk-desc { font-size: 11px; margin-top: 7px; line-height: 1.42; }

  /* Tabs */
  .rk-tabs { margin-top: 14px; padding: 3px; gap: 3px; }
  .rk-tab { font-size: 12px; padding: 7px 12px; }

  /* Table: 6 columns fit one screen on mobile (no platform icon, download/details side by side), matching mobile design 624:2638 */
  .rk-table { margin-top: 14px; border-radius: 14px; }
  .rk-thead, .rk-trow {
    grid-template-columns: 26px minmax(46px,1fr) 60px 44px 40px 96px;
    padding: 0 9px; gap: 3px;
  }
  .rk-thead { height: 38px; font-size: 10px; }
  .rk-thead span:last-child { text-align: center; }
  .rk-trow { height: 54px; }
  .rk-rank { font-size: 11px; }
  .rk-plat-ico { display: none; }   /* no platform icon on mobile */
  .rk-plat { min-width: 0; }
  .rk-plat-info { min-width: 0; }
  .rk-plat-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-dl { font-size: 11px; gap: 4px; }
  .dl-ico { width: 12px; height: 15px; }
  .rk-score { font-size: 11px; gap: 3px; color: var(--t-500); }   /* 显示真实评分（原 font-size:0 + 写死 ::after 4.9/4.8 已移除） */
  .rk-star { width: 12px; height: 12px; }
  .trend-chip { min-width: 38px; height: 22px; font-size: 10px; }
  .trend-chip .arr { font-size: 11px; }
  .rk-act { flex-direction: row; gap: 4px; align-items: center; }   /* download/details side by side */
  .rk-btn { font-size: 10px; padding: 5px 0; flex: 1 1 0; }

  /* Two columns stacked */
  .rk-duo {grid-template-columns: 1fr;gap: 12px;margin-top: clamp(10px, 2.78vw, 30px);}

  /* Fastest rising & reputation list -- adjust each one's padding separately, without affecting the other rk-panel */
  .rk-fast {padding: clamp(16px, 4.38vw, 47.32px) clamp(21px, 5.7vw, 61.58px) clamp(14px, 3.7vw, 40px) clamp(20px, 5.46vw, 59px);}
  .rk-rep  {padding: clamp(17px, 4.57vw, 49.32px) clamp(17px, 4.44vw, 48px) clamp(15px, 3.98vw, 43px);}
  .fast-chart {height: clamp(120px, 32.13vw, 346.96px);margin-top: clamp(11px, 3.02vw, 32.64px);border-rad: clamp(7px, 1.89vw, 20.41px);}
  .fast-chart span { font-size: 12px; }
  .fast-list {margin-top: clamp(16px, 4.27vw, 46.08px);}
  .fast-row { height: 40px; }
  .fast-name, .fast-pct {font-size: clamp(13px, 3.33vw, 36px);}
  .fast-name { gap: 4px; }
  .rep-sub {font-size: clamp(10px, 2.59vw, 28px);margin-top: clamp(2px, 0.66vw, 7.12px);}
  .rep-list {gap: clamp(8px, 2.13vw, 23px);margin-top: clamp(16px, 4.31vw, 46.56px);}
  .rep-row { height: 51px; gap: 10px; padding: 0 12px; }
  .rep-name {font-size: clamp(13px, 3.33vw, 36px);gap: 4px;}
  .rep-name .flag-icon { width: 12px; height: 11px; }
  .fast-name .flag-icon { width: 12px; height: 10px; }
  .rep-score {font-size: clamp(10px, 2.59vw, 28px);gap: 4px;}
  .rep-tag {font-size: clamp(10px, 2.59vw, 28px);}

  /* Need section */
  .rk-need {margin-top: clamp(7px, 1.94vw, 21px);background: #f5f5f5;}
  .segmented {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: clamp(9px, 2.41vw, 26px);
  }
  .seg-btn { font-size: 11px; padding: 9px 6px; }
  .need-grid {grid-template-columns: repeat(2, 1fr);gap: clamp(13px, 3.52vw, 38px);margin-top: clamp(12px, 3.24vw, 35px);}
  .need-card {padding: clamp(17px, 4.63vw, 50px) clamp(23px, 6.02vw, 65px) clamp(19px, 5.19vw, 56px);}
  .need-ico { width: 64px; height: 64px; }
  .need-name {font-size: clamp(13px, 3.33vw, 36px);margin-top: clamp(5px, 1.43vw, 15.41px);}
  .need-card .dl-btn {font-size: clamp(10px, 2.59vw, 28px);padding: 7px 10px;margin-top: clamp(5px, 1.46vw, 15.72px);border-radius: clamp(31px, 8.25vw, 89.08px);}

  .rk-risk {font-size: clamp(7px, 1.85vw, 20px);margin-top: clamp(37px, 9.91vw, 107px);line-height: 1.4;}
}

@media (max-width: 560px) {
  /* Narrower phones (<=360): compress the other columns, keep platform name intact, still 6 columns on one screen + download/details side by side */
  .rk-thead, .rk-trow { grid-template-columns: 20px minmax(52px,1fr) 46px 34px 30px 72px; padding: 0 6px; gap: 2px; }
  .rk-thead { font-size: 9px; }
  .rk-trow { height: 50px; }
  .rk-rank { font-size: 11px; }
  .rk-plat-name { font-size: 10px; }
  .rk-dl { font-size: 9.5px; gap: 3px; }
  .rk-score { font-size: 9.5px; gap: 3px; }   /* 显示真实评分（原 font-size:0 隐藏 + 写死 ::after 已移除） */
  .dl-ico { width: 11px; height: 13px; }
  .rk-star { width: 11px; height: 11px; }
  .trend-chip { min-width: 28px; height: 19px; font-size: 8.5px; }
  .rk-btn { font-size: 9px; padding: 4px 0; }
  .seg-btn {font-size: clamp(10px, 2.59vw, 28px);padding: 8px 6px;}
}

@media (min-width: 1081px) {
  .rank-page {padding-top: 28px;padding-bottom: 116px;}
  .rk-panel {padding: 36px 36px 57.84px;}
  .rank-page > .rk-panel:first-of-type { padding-bottom: 64px; }
  .rk-tabs {margin-top: 31px;}
  .rk-table {margin-top: 33.67px;}
  .rk-thead { height: 80px; }
  .rk-trow { height: 88px; }
  .rk-duo {margin-top: 24px;}
  .rk-duo .rk-panel {padding: 29px 36px 19px;}
  .fast-chart { height: 190px; }
  .fast-row { height: 62px; }
  .rep-list {gap: 18px;margin-top: 28px;}
  .rep-row { height: 68px; }
  .rk-need {margin-top: 24px;padding: 56px 35px 50px 38px;}
  .need-grid {margin-top: 50px;}

  /* 分段筛选：桌面固定一行并限制宽度（约 4–5 个按钮），超出收进「更多」，不再长到占满整行 */
  .segmented { max-width: 520px; }

  /* 平台名过长时截断(…) + 与"本周下载"列留间距，避免挤在一起 */
  .rk-plat { min-width: 0; padding-right: 24px; }
  .rk-plat-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}