/* 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){
/* 移动端以左右滑动为主：九个榜竖着堆是一条很长的页面，
用户要看第 7 个市场得滚过前面六个。改成横向 snap 轮播，
一次一个市场，滑动就是切换。 */
.market-stack{
display:flex;
grid-template-columns:none;
gap:10px;
overflow-x:auto;
overscroll-behavior-x:contain; /* 滑到头不要把整页往后带 */
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* 左右各留一点，让卡片停下时不贴死边 */
padding-inline:14px;
margin-inline:-14px;
scroll-padding-inline:14px;
}
.market-stack::-webkit-scrollbar{display:none}
.six-market-board{
/* 88% 而不是 100%：露出下一张的边，用户一眼看出还能往右滑。
满宽的话看起来就是一个静止的卡片，没人会去试。 */
flex:0 0 88%;
scroll-snap-align:center;
scroll-snap-stop:always; /* 一次只过一个市场，不会滑飞 */
}
}
/* ── 移动端市场切换条 ───────────────────────────────────────
和横滑是同一个状态的两种操作方式：点标签会滚到对应的榜，
手动滑动也会把标签同步过去。两者不同步的话，标签就是在说谎。 */
.mkt-tabs{display:none}
@media (max-width:900px){
.mkt-tabs{
display:flex;gap:7px;overflow-x:auto;padding:2px 14px 10px;margin:10px -14px 0;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.mkt-tabs::-webkit-scrollbar{display:none}
.mkt-tab{
flex:0 0 auto;border:1px solid #e8e1db;background:#fff;border-radius:999px;
padding:8px 15px;font-size:13.5px;font-weight:650;color:#5b544e;
font-family:inherit;cursor:pointer;white-space:nowrap;scroll-snap-align:start;
transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.mkt-tab[aria-selected="true"]{
border-color:#ffc9a3;background:#fff3ea;color:#c2410c;
}
}
.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 名没有上一名，模板整块不渲染。 */
/* 桌面端跟认领按钮同一套：悬停才出现，避免每一行都在喊你付钱 */
/* ── 窄屏 ──────────────────────────────────────────────── */
@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}
}
/* ── 暗色：与首页其余部分同一口径 ─────────────────────────── */
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}
/* ── 榜内行：收紧留白 ────────────────────────────────────────
之前一行 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 才出现会让每一行在鼠标经过时跳一下高度。 */
/* ── 行高：Re-bid 提示不许换行 ──────────────────────────────
实测 .rank-opportunity 高 65px，因为 flex-wrap:wrap 把「+$42 → #3」和
按钮折成了两层，把整行撑到 178px。锁成一行后回到 ~28px。 */
.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}
/* ── 名称 / @账号 必须能选中（用于复制）──────────────────────
每一行上面盖着一个 `` 绝对定位透明链接（整行可点）。
它把文字挡住了：实测 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}
.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 输出 ♛。
♛ 字符在多数字体下太细，和稿子的实心王冠不像，所以把字号归零、
改用 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;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* +$X → #N：黑色实心胶囊（稿子） */
/* 抢占此位：橙色描边（稿子） */
.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，特异性压过末尾那段，
会让普通行的「抢占此位」永远显示 —— 所以必须从这条里摘掉，不能只在后面加规则。 */
/* ── 平台角标：贴在头像右下角 ──────────────────────────────── */
.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;
}
}
/* ── 卡片内的按钮必须浮在 .stretch 之上 ────────────────────────
每张榜单卡都盖着一个 铺满整卡（z-index:1），
点卡片任意位置就跳去对方网站。按钮默认 position:static / z-index:auto，
整个被压在它下面 —— 视觉上按钮在那儿，点下去却是跳转，
而且 onclick 里的 stopPropagation 根本轮不到执行。
实测：elementFromPoint 打在按钮正中央，返回的不是按钮。 */
.six-market-board .grab-btn, .six-market-board .topbid-chip, .six-market-board .tt-go{
position:relative;
z-index:3;
}
/* ── 首页「蓝V朋友」一排 ──────────────────────────────────
横向可滑，窄屏不换行也不挤扁：一排头像的信息密度就在于「一眼扫过去」，
换行之后就变成一个方阵，读法完全不同了。 */
.vc-friends{margin:22px 0 6px}
.vc-friends-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.vc-friends-sub{margin:5px 0 0;font-size:13px;color:#9a918a}
.vc-friends-sub b{color:#1479ce;font-weight:750;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 排尾的加入卡：一排真人后面跟一个入口，比页面顶上再放一颗按钮更顺手 */
.vc-friend-join{justify-content:center;border-style:dashed;border-color:#c9e2f7;
background:linear-gradient(150deg,#f4faff,#fff)}
.vc-friend-join:hover{border-color:#1479ce}
.vc-friend-join .vc-friend-name{color:#0f6fff}
.vc-join-plus{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
background:#eef6fd;border:1px solid #c9e2f7;color:#1479ce;font-size:24px;font-weight:400;
line-height:1;flex:none}
.vc-friends-head h2{margin:0;font-family:var(--font-display,Georgia,serif);font-weight:400;
font-size:clamp(21px,2.1vw,26px);letter-spacing:-.018em;line-height:1.15}
.vc-friends-more{font-size:13px;font-weight:600;color:#df5700;white-space:nowrap}
.vc-friends-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.vc-friends-row::-webkit-scrollbar{display:none}
.vc-friend{flex:0 0 auto;width:132px;display:flex;flex-direction:column;align-items:center;
gap:6px;padding:16px 10px 14px;border:1px solid #ece4dc;border-radius:16px;background:#fff;
text-align:center;scroll-snap-align:start;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.vc-friend:hover{transform:translateY(-2px);border-color:#f2c9ab;
box-shadow:0 14px 30px -18px rgba(54,37,24,.5)}
.vc-friend-ava{width:56px;height:56px;border-radius:50%;overflow:hidden;background:#f4f1ee;
border:1px solid #ece4dc;flex:none}
.vc-friend-ava img{width:100%;height:100%;object-fit:cover;display:block}
.vc-friend-name{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.015em;
line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-chk{width:13px;height:13px;vertical-align:-2px;margin-left:3px;color:#1d9bf0}
.vc-friend-at{display:block;font-size:12px;color:#9a918a;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-friend-fo{display:block;font-size:11.5px;color:#b5aca4;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media(max-width:560px){ .vc-friend{width:116px;padding:13px 8px 12px} }
/* ── X 认证徽标（全站唯一一套样式，配合 _vbadge.html 那个宏）──
之前 .verified 有三份互相覆盖的定义，首页 X 榜画出来是文字 ✓、
朋友那排是真徽标，同一屏两种画法。这里另起 class，不去动那三份旧规则
（改它们会牵动别的地方），旧规则会随 ✓ 一起自然废弃。 */
.vbadge{display:inline-block;vertical-align:-.14em;margin-inline-start:4px;flex:none}
.x-chk{color:#1d9bf0}