/* AIBID V59 — 每市场独立全宽榜（six-market-board）+ Re-bid 提示。
   取自设计稿的结构与比例，但**字号按线上尺度重算**：稿子是缩小稿，
   里面的 6.8px / 7.5px 正文在真实页面上不可读，照抄等于交一个看不清的页面。
   保留行内既有的全部功能（跳转、点击数、认领、推文卡片），只换容器与排布。 */

/* ── 榜单容器：从并排改成纵向堆叠，每个市场一张全宽卡 ────────── */
/* 八个市场放一起：宽屏 3 列。有几个市场就铺几个，格子数不写死。
   容器同时加宽到 1420px —— 还按 1180px 的话，3 列每列只剩 385px，
   卡片里「徽章+logo(114) + 正文 + 金额+按钮」会挤到换行。 */
.market-stack{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:1420px;margin:14px auto 0;min-width:0;
  align-items:start;
}
@media(max-width:1240px){
  .market-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .market-stack{grid-template-columns:1fr;gap:10px}
}
.six-market-board{
  background:#fff;border:1px solid #e9e2dc;border-radius:16px;
  padding:16px 16px 10px;min-width:0;overflow:hidden;
  box-shadow:0 8px 24px rgba(35,28,22,.035);
  scroll-margin-top:90px;
}

.six-boardhead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding-bottom:2px}
.six-boardhead h2{font-family:var(--aibid-font);font-size:19px;font-weight:900;letter-spacing:-.03em;margin:0;color:#201c1a}
.six-boardhead p{font-size:12px;font-weight:500;color:#8e867f;margin:4px 0 0}

/* ── 每个榜自己的分类下拉 ─────────────────────────────────── */
/* 分类筛选和榜单标题同一行（标题左、筛选右）。
   原来是标题、副标题、筛选各占一行，八个榜就白白多出十几行高度。
   副标题（「62 件中 4-50 件」之类）已从模板删掉。 */
.board-filter-row{display:flex;justify-content:flex-start;margin:0}
.six-boardhead{
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:12px;
  margin:10px 0 12px!important;
}
.six-boardhead > div:first-child{min-width:0}
.six-boardhead h2{margin:0!important}
@media(max-width:560px){
  /* 窄屏放不下就换行，筛选器占满宽度 */
  .six-boardhead{flex-wrap:wrap}
  .six-boardhead .board-filter-row{width:100%}
  .six-boardhead .board-category-select{width:100%;max-width:none}
}
.board-category-select{
  font-family:var(--aibid-font);
  height:34px;min-width:190px;max-width:280px;
  border:1px solid #e8e1db;border-radius:9px;background:#fff;
  padding:0 30px 0 11px;font-size:12px;font-weight:650;color:#46403b;
  cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23988f88' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
.board-category-select:focus{border-color:#ff6813;box-shadow:0 0 0 2px rgba(255,104,19,.08)}

/* ── Top3 移进榜内 ───────────────────────────────────────── */
.six-top3{margin:0 0 14px!important}
.six-market-board .top3-stack{max-width:none;padding:0}

/* ── Re-bid 提示：+$X → #N ─────────────────────────────────
   数字是真实累计出价算出来的差额（上一名 − 本行 + 1），
   不是估算也不是营销话术。第 1 名没有上一名，模板整块不渲染。 */
.rank-opportunity{
  display:flex;align-items:center;gap:6px;justify-content:flex-end;
  flex-wrap:wrap;margin-top:6px;
}
.rank-opportunity .target{
  font-family:var(--aibid-font);
  border:1px solid #f0d9ca;background:#fff8f3;color:#ff6813;border-radius:8px;
  padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.rank-opportunity .pay{
  font-family:var(--aibid-font);
  border:0;background:#171717;color:#fff;border-radius:8px;
  padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background .14s ease;
}
.rank-opportunity .pay:hover{background:#000}
/* 桌面端跟认领按钮同一套：悬停才出现，避免每一行都在喊你付钱 */
@media(hover:hover){
  .claim-hover .rank-opportunity{opacity:0;transition:opacity .15s}
  .claim-hover:hover .rank-opportunity,
  .product:hover .claim-hover .rank-opportunity{opacity:1}
}
@media(hover:none){.claim-hover .rank-opportunity{opacity:1}}

/* ── 窄屏 ──────────────────────────────────────────────── */
@media(max-width:760px){
  .six-market-board{padding:13px 12px 8px;border-radius:14px}
  .six-boardhead{flex-direction:column;align-items:flex-start;gap:2px}
  .six-boardhead h2{font-size:17px}
  .board-category-select{width:100%;max-width:none}
  .rank-opportunity{justify-content:flex-start}
}

/* ── 暗色：与首页其余部分同一口径 ─────────────────────────── */
body[data-dark="1"] .six-market-board{background:#171412;border-color:#2c2823}
body[data-dark="1"] .six-boardhead h2{color:#efe8e1}
body[data-dark="1"] .board-category-select{background:#1c1916;border-color:#332d27;color:#cfc7bf}
body[data-dark="1"] .rank-opportunity .target{background:#2a1a10;border-color:#5a3a20;color:#ff8a5c}
body[data-dark="1"] .rank-opportunity .pay{background:#3a3430;color:#f0e9e2}

/* ── 榜内行：收紧留白 ────────────────────────────────────────
   之前一行 190px 高，一屏放不下三行。稿子的行是紧凑列表。 */
.six-market-board .product{
  padding:12px 14px!important;
  border-radius:12px!important;
  align-items:center!important;
}
.six-market-board .product h3{font-size:14px!important}
.six-market-board .product p{font-size:12px!important;margin:3px 0 0!important}
.six-market-board .product .meta{font-size:11px!important;margin-top:3px!important}
.six-market-board .claim{align-self:center!important}

/* Re-bid 提示常显，不做 hover 才出现 ——
   它是这一版要推的收入循环入口，藏在 hover 后面等于没做；
   而且 hover 才出现会让每一行在鼠标经过时跳一下高度。 */
.six-market-board .claim-hover .rank-opportunity{opacity:1!important}

/* ── 行高：Re-bid 提示不许换行 ──────────────────────────────
   实测 .rank-opportunity 高 65px，因为 flex-wrap:wrap 把「+$42 → #3」和
   按钮折成了两层，把整行撑到 178px。锁成一行后回到 ~28px。 */
.six-market-board .rank-opportunity{
  flex-wrap:nowrap!important;
  gap:5px!important;margin-top:5px!important;
}
.six-market-board .rank-opportunity .target{padding:4px 7px!important;font-size:10.5px!important}
.six-market-board .rank-opportunity .pay{padding:5px 9px!important;font-size:10.5px!important}
.six-market-board .claim .claim-btn{
  margin-top:5px!important;padding:6px 10px!important;font-size:11px!important;
}
.six-market-board .claim strong{font-size:17px!important}

/* ── #2 那一整套紫色主题 ─────────────────────────────────────
   实测 .top-rank-card.r2 有 4 条规则在上紫色：边框 rgb(184,137,255)、
   背景渐变、::before 光带、以及暗色变体。V49 明确「保持橙色视觉语言，
   不做紫色改版」，而且 #1/#3 都是橙色系，只有 #2 紫，本身也不自洽。
   统一换成中性银灰，金/银/铜三名的层级才读得出来。 */
.six-market-board .top-rank-card.r2{
  border-color:#d9d4cd!important;
  background:linear-gradient(135deg,#fdfcfb,#f4f2ef)!important;
}
.six-market-board .top-rank-card.r2::before{
  background:linear-gradient(#c9c4bd,#a29a92)!important;
}
body[data-dark="1"] .six-market-board .top-rank-card.r2{border-color:#3a352f!important;background:#191614!important}

/* #2 的金额文字也是紫的（inline :: .top-rank-card.r2 .top-price -> #7f45df !important）。
   这是那套紫色 #2 主题的最后一处，一并归到橙色体系。 */
.six-market-board .top-rank-card.r2 .top-price{color:var(--orange,#ff6813)!important}

/* ── 右侧金额列改成按内容自适应 ──────────────────────────────
   实测：claim 列被固定成 92px，而「+$42 → #3 + 提升排名」需要 128px，
   溢出 36px 被 .six-market-board 的 overflow:hidden 裁掉，
   线上看到的是半截「→ #3」。最后一列改 auto，由内容决定宽度。
   .x-full-row 同时也带 .product 类，所以这一条两个榜都覆盖到。 */
.six-market-board .product,
.six-market-board .x-full-row{
  grid-template-columns:38px 46px minmax(0,1fr) auto!important;
}
.six-market-board .claim{min-width:0!important}

/* ── 名称 / @账号 必须能选中（用于复制）──────────────────────
   每一行上面盖着一个 `<a class="stretch">` 绝对定位透明链接（整行可点）。
   它把文字挡住了：实测 elementFromPoint 在产品名位置拿到的是 A.stretch，
   于是名字选不中、复制不了 —— 明明是文字，用起来像张图片。
   把这两处抬到覆盖层之上并显式允许选中；行的其余部分照常可点。 */
.six-market-board .top-copy h3,
.six-market-board .product h3,
.six-market-board .top-copy p,
.six-market-board .product .meta{
  position:relative;z-index:3;
  -webkit-user-select:text;user-select:text;cursor:text;
}


/* ── CONTENT：全平台内容流 ──────────────────────────────────── */
.stream-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.stream-tab{
  font-family:var(--aibid-font);
  border:1px solid #e8e1db;background:#fff;border-radius:999px;
  padding:6px 13px;font-size:12px;font-weight:750;color:#5b544e;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.stream-tab:hover{border-color:#f0d9ca;color:#ff6813}
.stream-tab.active{background:#171717;border-color:#171717;color:#fff}

.content-metrics{display:flex;gap:10px;font-size:11px;font-weight:600;color:#96908a}
/* 竞价信息条：排名与金额来自真实累计出价 */
.content-bid{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-top:9px;border-top:1px solid #f3efeb;margin-top:auto;
}
.content-rank{font-size:11px;font-weight:800;color:#5b544e;
  background:#f6f3f0;border-radius:7px;padding:4px 8px;white-space:nowrap}
.content-amt{font-size:14px;font-weight:850;color:#ff6813;font-variant-numeric:tabular-nums}
.content-up{
  font-family:var(--aibid-font);
  margin-inline-start:auto;border:1px solid #f0d9ca;background:#fff8f3;color:#ff6813;
  border-radius:8px;padding:5px 9px;font-size:11px;font-weight:800;cursor:pointer;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.content-up:hover{background:#ffefe4}
.social-stream .content-more{margin-top:8px;display:inline-block}

body[data-dark="1"] .stream-tab{background:#1a1714;border-color:#2f2a25;color:#cfc7bf}
body[data-dark="1"] .stream-tab.active{background:#ff6813;border-color:#ff6813;color:#fff}
body[data-dark="1"] .content-rank{background:#241f1b;color:#a79e96}
body[data-dark="1"] .content-bid{border-top-color:#2c2823}


/* ══ V60：榜单卡片按设计稿重排 ═══════════════════════════════
   与上一版的差别（逐条对着稿子改的）：
     · 徽章与头像从横排改成竖排，共占左侧一栏
     · 头像加平台角标 —— 八个市场混在一个网格里，光看头像分不出平台
     · 贴文/视频标题改成带边框的白框
     · +$X → #N 从橙色描边改成黑色实心胶囊
     · 抢占按钮从浅橙底改成橙色描边
   ══════════════════════════════════════════════════════ */

/* ── Top3 卡片 ─────────────────────────────────────────────── */
.six-market-board .top-rank-card{
  grid-template-columns:114px minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  gap:4px 14px!important;
  padding:16px 18px!important;
  align-items:start!important;
}
/* 前三名：名次徽章与 logo **横向并排**，王冠单独戴在 logo 顶上（只有 #1 有）。
   徽章本身是纯色渐变方块，不含王冠 —— 上一版把王冠和方块画成一体的 SVG，
   稿子要的是分开的两件。 */
.six-market-board .tr-left{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  position:relative;              /* 王冠要对准右侧 logo，定位上下文必须在这一层 */
}
.six-market-board .tr-left .rank-gem{
  background-image:none!important;
  width:52px!important;height:52px!important;border-radius:15px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;min-width:0!important;flex:0 0 auto;
  position:static!important;      /* 不能是 relative，否则王冠会贴到徽章上而不是 logo */
  box-shadow:none!important;
}
.six-market-board .tr-left .rank-gem > span{
  position:static!important;height:auto!important;display:block!important;
  font-size:17px!important;font-weight:900!important;color:#fff!important;
  line-height:1!important;letter-spacing:-.03em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}
.six-market-board .top-rank-card.r1 .rank-gem{background:linear-gradient(145deg,#f7bf51,#e08c14)!important}
.six-market-board .top-rank-card.r2 .rank-gem{background:linear-gradient(145deg,#eae7e3,#c3beb8)!important}
.six-market-board .top-rank-card.r3 .rank-gem{background:linear-gradient(145deg,#d2925a,#a5642c)!important}
/* 银牌底色浅，白字看不清，单独给深色 */
.six-market-board .top-rank-card.r2 .rank-gem > span{color:#6d665f!important;text-shadow:none!important}

/* 王冠：模板里只有 #1 输出 <span class="crown">♛</span>。
   ♛ 字符在多数字体下太细，和稿子的实心王冠不像，所以把字号归零、
   改用 SVG 当背景 —— 这样不必改模板。
   right:26px = logo 宽度 52 的一半，配合 translateX(50%) 正好对准 logo 中线。 */
.six-market-board .tr-left .rank-gem .crown{
  display:block!important;position:absolute!important;
  top:-15px!important;right:26px!important;left:auto!important;
  transform:translateX(50%)!important;
  width:27px!important;height:20px!important;
  font-size:0!important;color:transparent!important;text-shadow:none!important;
  margin:0!important;z-index:3!important;
  background:url(/static/platform/crown.svg) center/contain no-repeat!important;
}
/* 王冠要探出 logo 顶部，卡片不能裁切 */
.six-market-board .top-rank-card{overflow:visible!important}
/* 头像：圆形 + 右下角平台角标 */
.tr-avatar{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;position:relative;
  background-size:cover;background-position:center;background-color:#f2efec;
  border:1px solid #ece6e1;
}
/* 产品 logo：方形留白，不是头像。和 .tr-avatar 同尺寸同列，但不裁切、不加平台角标 */
.six-market-board .tr-logo{
  width:52px;height:52px;border-radius:15px;flex:0 0 auto;
  background-color:#fff;border:1px solid #ece6e1;
  background-size:70%;background-position:center;background-repeat:no-repeat;
}
.six-market-board .top-copy{grid-column:2;grid-row:1;min-width:0!important;padding-top:2px}
.six-market-board .top-copy h3{font-size:19px!important;font-weight:850!important;white-space:normal!important}
.six-market-board .top-copy p{
  font-size:13px!important;color:#8b837c!important;margin:5px 0 9px!important;
  -webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 贴文 / 视频标题：纯文字，不套框、不占固定高度。
   V60 曾按稿子做成白底带边框的方框，实际看下来那个框把卡片撑得又高又空。
   六榜里这块的样式**只由这里定义** —— home.html 内联那几组
   `#xBoard .top-rank-card .x-top-post`（含 background/border/固定五行高度）
   已经删掉。它们特异性 (1,2,0) 比这里高，留着的话这里怎么写都没用，
   只能删，不能靠堆权重压。
   截断要 -webkit-box + box-orient + overflow 三件套齐全才生效，
   光写 line-clamp 是不起作用的。 */
.six-market-board .x-top-post,
.six-market-board .top-rank-card .x-top-nopost{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;min-height:0!important;max-height:none!important;
  margin-top:7px!important;
  font-size:13.5px!important;line-height:1.5!important;
  color:#3f3934!important;text-decoration:none;
}
.six-market-board .top-copy .meta{font-size:12px!important;margin-top:9px!important;color:#a09992!important}

/* 右上角：TOP BID + 金额 + 抢占 */
.six-market-board .top-price{
  grid-column:3;grid-row:1;
  display:flex!important;flex-direction:column;align-items:flex-end;gap:6px;
  text-align:right!important;padding-top:0!important;white-space:nowrap;
}
/* 旧版 #1 角标是 7px 的绝对定位伪元素（home.html 内联 .top-rank-card.r1:after）。
   新稿把 TOP BID 提成价格上方的胶囊 .topbid-chip，两者同时存在会出现两个 TOP BID。
   只在六榜容器里关掉旧的，其它旧版面（dual-full-board 等）保持原样。 */
.six-market-board .top-rank-card.r1:after{content:none!important}
.topbid-chip{
  background:#fdf0d6;color:#a86a12;border-radius:999px;
  padding:4px 10px;font-size:10.5px;font-weight:850;letter-spacing:.03em;
}
.six-market-board .tp-amt{font-size:22px;font-weight:900;color:#ff6813;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── 列表行 #4+ ─────────────────────────────────────────────── */
.six-market-board .product{align-items:start!important;padding:14px!important}
.six-market-board .x-avatar{
  width:46px!important;height:46px!important;border-radius:50%!important;
  position:relative;background-size:cover;background-position:center;
  border:1px solid #ece6e1;
}
.six-market-board .product h3{font-size:15px!important;font-weight:850!important}
.six-market-board .product .meta{font-size:12px!important;color:#8b837c!important;margin-top:3px!important}
/* 列表行的贴文不加框（稿子里是纯文字），只收字号 */
.six-market-board .product .x-post{background:none!important;border:0!important;padding:6px 0 0!important}
.six-market-board .product .x-post-text{font-size:13.5px!important;color:#3f3934!important;
  -webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.row-clicks{font-size:12px;color:#a09992;margin-top:5px}

.six-market-board .claim{
  display:flex!important;flex-direction:column;align-items:flex-end;gap:7px;
  align-self:center!important;
}
.six-market-board .claim .price-trigger{font-size:17px!important;font-weight:900!important;color:#ff6813!important}
/* +$X → #N：黑色实心胶囊（稿子） */
.six-market-board .claim .up-pill,
.up-pill{
  font-family:var(--aibid-font);
  border:0!important;background:#171717!important;color:#fff!important;border-radius:999px;
  padding:7px 13px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:background .14s;
}
.six-market-board .claim .up-pill:hover,
.up-pill:hover{background:#000!important}
/* 抢占此位：橙色描边（稿子） */
.six-market-board .claim .grab-btn,
.six-market-board .top-price .grab-btn,
.grab-btn{
  font-family:var(--aibid-font);
  border:1px solid #ff8a42!important;background:#fff!important;color:#ff6813!important;border-radius:999px;
  padding:7px 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s;
}
.six-market-board .claim .grab-btn:hover,
.six-market-board .top-price .grab-btn:hover,
.grab-btn:hover{background:#fff5ee!important;border-color:#ff6813!important}
/* up-pill（+$X → #N）常显；grab-btn 改为悬停才出现（见文件末尾的 hover 段）。
   原本这里连 .grab-btn 一起写了 opacity:1!important，特异性压过末尾那段，
   会让普通行的「抢占此位」永远显示 —— 所以必须从这条里摘掉，不能只在后面加规则。 */
.six-market-board .claim-hover .up-pill{opacity:1!important}

/* ── 平台角标：贴在头像右下角 ──────────────────────────────── */
.tr-avatar[data-plat]::after,
.six-market-board .x-avatar[data-plat]::after{
  content:"";position:absolute;right:-2px;bottom:-2px;
  width:20px;height:20px;border-radius:50%;
  /* 这里刻意不用 background 简写。简写会把 background-image 重置成 none，
     而这条选择器 (0,2,0) 比下面按平台设图的 [data-plat="x"]::after (0,1,0) 更高，
     结果就是角标位置在、图没了。八个榜的平台角标一直是空白就是这么来的。 */
  background-color:#fff;
  background-position:center;
  background-size:13px 13px;
  background-repeat:no-repeat;
  box-shadow:0 0 0 2px #fff;
}
.six-market-board .x-avatar[data-plat]::after{width:17px;height:17px;background-size:11px 11px}
[data-plat="youtube"]::after  {background-image:url(/static/platform/badge-youtube.svg)}
[data-plat="x"]::after        {background-image:url(/static/platform/badge-x.svg)}
[data-plat="facebook"]::after {background-image:url(/static/platform/badge-facebook.svg)}
[data-plat="instagram"]::after{background-image:url(/static/platform/badge-instagram.svg)}
[data-plat="tiktok"]::after   {background-image:url(/static/platform/badge-tiktok.svg)}
[data-plat="threads"]::after  {background-image:url(/static/platform/badge-threads.svg)}
[data-plat="linkedin"]::after {background-image:url(/static/platform/badge-linkedin.svg)}

@media(max-width:760px){
  .six-market-board .top-rank-card{grid-template-columns:60px minmax(0,1fr)!important}
  .six-market-board .top-price{grid-column:1/-1!important;grid-row:2!important;
    flex-direction:row!important;align-items:center;justify-content:flex-end}
  .tr-avatar,.six-market-board .tr-logo{width:52px;height:52px}
}
body[data-dark="1"] .six-market-board .x-top-post{color:#d5cdc5!important}
body[data-dark="1"] .grab-btn{background:#1a1714}

/* ── 抢占此位：默认不显示，悬停所在行才出现 ──────────────────
   `@media(hover:hover)` 是必须的：触屏设备没有悬停，不加这层保护
   按钮在手机上会永远不出现 —— 那等于把下单入口删掉了。
   opacity 之外还要 pointer-events，否则透明按钮仍能被点到。 */
@media(hover:hover){
  .six-market-board .grab-btn{
    opacity:0;pointer-events:none;transition:opacity .15s;
  }
  .six-market-board .top-rank-card:hover .grab-btn,
  .six-market-board .product:hover .grab-btn,
  .six-market-board .x-full-row:hover .grab-btn,
  .six-market-board .grab-btn:focus-visible{
    opacity:1;pointer-events:auto;
  }
}

/* ── 三列布局的窄卡适配 ──────────────────────────────────────
   八个市场排成 3 列后每列约 456px，比 2 列时窄了近一半。
   不做下面这些收紧，卡片会挤成：正文列只剩 25px、榜头标题和筛选器换行。 */
@media(min-width:1241px){
  /* 榜单区突破 .wrap 的 1240px 版心。只放宽这一块 ——
     改 .wrap 会连带影响 hero、竞价条、CONTENT 的宽度。 */
  .market-stack{
    max-width:1400px!important;
    width:calc(100vw - 48px)!important;
    margin-left:calc(50% - min(700px, 50vw - 24px))!important;
    margin-right:auto!important;
  }
  .six-market-board .top-rank-card{
    position:relative;
    grid-template-columns:108px minmax(0,1fr) auto!important;
    padding:14px 15px!important;
  }
  .six-market-board .tr-left{gap:8px!important}
  /* 「抢占此位」按钮平时 opacity:0，但仍占着约 148px 宽度，
     把正文列压到 25px。让它脱离文档流钉在卡片右下角，
     金额列就只需容纳 $312 这样的数字。 */
  .six-market-board .top-price{position:static!important}
  .six-market-board .top-price .grab-btn{
    position:absolute!important;top:auto!important;
    right:15px!important;bottom:12px!important;margin:0!important;
    white-space:nowrap;
  }
  /* 标题长的榜（プロダクト ランキング / Instagram）会把筛选器顶到下一行 */
  .six-boardhead h2{
    font-size:16px!important;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .six-boardhead .board-category-select{
    min-width:120px;max-width:150px;flex:0 0 auto;
  }
}

/* ── 窄屏适配：徽章与 logo 改横排后必须一起调 ──────────────────
   V60 把 .tr-left 从竖排改成横排（徽章 52 + 间距 + logo 52 = 114px），
   但窄屏那条老规则第一列还是 60px —— 左栏塞不下就溢出，
   logo 直接压在产品描述上。桌面看不出来，只有真机/移动视口才暴露。 */
@media(max-width:760px){
  .six-market-board .top-rank-card{
    grid-template-columns:86px minmax(0,1fr)!important;   /* 40 + 6 + 40 */
    gap:4px 10px!important;padding:13px 14px!important;
  }
  .six-market-board .tr-left{gap:6px!important}
  .six-market-board .tr-left .rank-gem{
    width:40px!important;height:40px!important;border-radius:12px!important;
  }
  .six-market-board .tr-left .rank-gem > span{font-size:13px!important}
  .six-market-board .tr-avatar,
  .six-market-board .tr-logo{width:40px!important;height:40px!important}
  .six-market-board .tr-logo{border-radius:11px!important}
  /* 王冠对准右侧 logo：logo 40px，中心距左栏右边缘 20px */
  .six-market-board .tr-left .rank-gem .crown{
    width:21px!important;height:16px!important;
    right:20px!important;top:-11px!important;
  }
}