/* ============================================================================
   ViViJob 改版新增样式
   独立文件，不修改原有 style.css / media.css，便于回退与对比。
   在页面中放在 style.css、media.css 之后引入，以便覆盖。
   ============================================================================ */

/* ---------- 品牌字标 ----------
   原 logo 是 images/logo.png，图上写的是 "AirDoes"，无法直接改。
   过渡期用文字字标顶替；拿到 ViViJob 正式 logo 图后，把 layout.js 里的
   .brand-text 换回 <img> 即可。 */
.logo .brand-text {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: #fa8600;
    letter-spacing: .5px;
    line-height: 1;
    white-space: nowrap;
}

/* 当前页导航高亮。原先靠每个页面写一段
   .nav_box .nav1 dl dd:nth-of-type(N) h1 {color:#fa8600}，
   改成由 layout.js 按当前文件名加 .nav-current，不必每页硬编码序号。 */
.nav_box .nav1 dl dd h1.nav-current { color: #fa8600; }

/* 导航图标（用户 2026-09-18，18px 品牌橙 SVG 一套五个：左三 + 右二）。
   h1 本身是 flex + align-items:center，垂直居中由容器管，这里只管间距。
   选择器写 .nav 而不是 .nav1：右侧 Post a Request / Offer Services 也用。 */
.nav_box .nav h1 .nav-flash { flex-shrink: 0; margin-right: 5px; }

/* ---------- 首页 Hero ---------- */
/* 下边距 44 -> 20（用户 2026-09-18：Two ways 标题上方空白太高）。
   hero 的大标题已删、只剩两行文字，44px 的底部留白撑不起也不需要。 */
.vj-hero { background: #fff; padding: 56px 0 20px; }
.vj-hero .eyebrow {
    font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: #fa8600; margin-bottom: 14px;
}
.vj-hero h2 {
    font-size: 34px; line-height: 1.25; font-weight: 700;
    color: #1d1d1f; margin-bottom: 16px; max-width: 900px;
}
.vj-hero .lead {
    /* 头句六调（用户 2026-09-18 定稿方向）：字体恢复 18px/600 近黑
       （灰色常规体「还没有最初好看」），底下垫一条柔和浅黄高亮；
       不限宽、不拉词距 —— 写到最右边才自然换行。 */
    font-size: 14px; font-weight: 400; line-height: 1.6; color: #1d1d1f;
    /* 定稿（用户 2026-09-18 三轮往复后）：框线与下方内容左边界齐平
       （无负边距），框内文字保留 16px 内缩不顶线。 */
    background: #fff8e6; padding: 10px 16px; border-radius: 6px;
}

/* ---------- 两条路径 / 特性卡片 ---------- */
/* 顶部内边距 44 -> 14：灰底区块自己的 44px 顶空是「Two ways」标题上方
   那块灰色空白的主体（用户 2026-09-18 点名去掉） */
.vj-paths { padding: 14px 0 8px; background: #fafafa; }
.vj-paths .section-intro { max-width: 900px; margin-bottom: 28px; }
.vj-paths .section-intro h3 {
    font-size: 24px; font-weight: 700; color: #1d1d1f; margin-bottom: 10px;
}
/* 15 -> 14：与全站正文档一致（用户 2026-09-18 首页字阶对齐） */
.vj-paths .section-intro p { font-size: 14px; line-height: 1.7; color: #4a4a4f; }

.vj-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.vj-card {
    flex: 1 1 260px; background: #fff; border: 1px solid #e8e8ea;
    border-radius: 8px; padding: 20px 18px;
}
.vj-card h4 {
    font-size: 15px; font-weight: 700; color: #1d1d1f;
    margin-bottom: 10px; line-height: 1.4;
}
.vj-card p { font-size: 14px; line-height: 1.65; color: #55555b; }

/* ---------- 首页字阶对齐（用户 2026-09-18：首页字体要与其他页一致，
   「图片里面的字」= Featured 卡片，正文竟是 18px、标题 20px）----------
   全站标准：13 辅助 / 14 正文 / 16 卡题 / 20-24 区题。
   .index_bar2 的旧值来自 style.css（1.8rem 正文 / 2rem 标题），
   这里同选择器后加载覆盖。 */
.index_bar2 .title { font-size: 22px; font-weight: 700; }

/* 「Featured Product Customization Services」上方空白太大（用户 2026-09-18）：
   实测净空 60px 全部来自 .indexBars 的 margin:6rem 0（style.css:206）。
   只改本页这一处的顶部间距 —— .indexBars 是全站共用类（tasks/skills 等
   页头也在用），不能整体改。上移 1cm≈38px：60 -> 22。 */
.index_bar2a.indexBars { margin-top: 22px; }

/* Featured 卡片一行 5 个（用户 2026-09-19，共 60 条）——
   只改 .index_bar2a（首页专属类），不动 .index_bar2 本身：
   这个基础类还被 postTasks/tasks/skilld/listSkills/search 等页复用，
   全局改列数会连累它们的卡片布局。
   4 列 -> 5 列沿用 skills.html 「一行 5 张」同一套算法：
   5×18.4% + 4×2% = 100%。style.css 的 nth-of-type(4n) 清零第 4 张的
   右边距，5 列下要先还原、只在第 5 张清零，否则第 4/5 张会紧贴。 */
.index_bar2a ul li {
    width: 18.4%;
}
.index_bar2a ul li:nth-of-type(4n) {
    margin-right: 2%;
}
.index_bar2a ul li:nth-of-type(5n) {
    margin-right: 0;
}

.index_bar2 ul li h3 {
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.45;
}

.index_bar2 ul li p {
    font-size: 14px !important;
    line-height: 1.65;
}

.index_bar2 ul li p strong {
    font-size: 14px;
    font-weight: 600;
}

.index_bar2 .more {
    font-size: 14px;
}

/* 「See more」按钮改造（用户 2026-09-18：太短、不专业）：
   文案改 Browse All Services；蓝色 #2b98ff 是老站遗留，全站主色是橙，
   悬停原本就变橙 —— 蓝转橙的悬停像换了个按钮。改为常态橙、悬停加深。
   宽度不再写死 140px，由内容 + 内边距撑开。 */
.index_bar2 .more {
    background: #fa8600;
    /* ★ 不能写 width:auto：.more 是块级 flex，auto 会铺满整行（实测 1585px）。
       fit-content 才是「由内容撑开」。 */
    width: fit-content;
    min-width: 220px;
    padding: 11px 34px;
    box-sizing: border-box;
    font-weight: 600;
}
.index_bar2 a:hover .more,
.index_bar2 .more:hover {
    background: #e07700;
}

/* 首页搜索按钮 20px -> 15px：全站按钮 14-16，一个 20px 粗体按钮比区题还抢 */
.vj-search .ss button {
    font-size: 15px;
    font-weight: 600;
}

/* ---------- 搜索模块 ---------- */
.vj-search { padding: 40px 0 8px; }
.vj-search h3 { font-size: 22px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px; }
.vj-search .field-label { font-size: 14px; color: #4a4a4f; margin-bottom: 10px; }
/* ★ 搜索框与它的标签之间原来空了 60px：.index_ser 自带 margin-top:60px，
   与标签的 10px 下边距合并后取大的那个，所以标签那 10px 完全没起作用。
   用户 2026-09-17 要求收窄约 0.8cm（≈30px）——
   这里只收 .vj-search 里的那一个，不动全站的 .index_ser（其他页面还在用）。
   减少的 30px 会让下方所有栏目整体上移同样距离（文档流自然结果，无须逐个调）。 */
/* margin-top 30 -> 16（用户 2026-09-18 二调：标签与搜索框再近一点）；
   margin-bottom 60 -> 37 -> 0（用户 2026-09-18 三调：缩 0.6cm 后「还是很高」，
   索性清零 —— 到「Browse by…」的净空只剩 .vj-search 下 8 + .vj-cats 上 8 = 16px） */
.vj-search .index_ser { margin-top: 16px; margin-bottom: 0; }

/* ---------- 热门品类 ---------- */
.vj-cats { padding: 8px 0 44px; }
/* 两组导语（本条 + 下面的 .svc-intro）：用户 2026-09-17 要求加黑加粗。
   它们是两组内容各自的题头，不是说明性小字，做成半粗后层级才立得住。 */
.vj-cats .cats-intro {
    font-size: 14px;
    font-weight: 600;
    color: var(--vj-ink);
    margin-bottom: 14px;
}

/* ---------- 一级品类：等宽栅格，不再用胶囊（2026-09-17 改） ----------
   原来是 21 个胶囊自由折行，末行留一大块空、边缘参差，像一堵墙。
   改成等宽多列栅格：20 个产品品类正好分 4 列 × 5 行 / 5 列 × 4 行，
   两种列数都能排成完整矩形，没有孤项。
   auto-fill + minmax 让窄屏自动降列，不必写 media query。 */
.vj-cats .cat-list {
    display: grid;
    /* 250 -> 210（用户 2026-09-18：一行多放一个）——
       1440 宽下 250 只排得下 5 列（5×250+4×28=1362），210 恰好 6 列
       （6×210+5×28=1400 ≤ 1440）；1fr 让各列均分余量，右缘抵到边界线。 */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0 28px;
}

.vj-cats .cat-list a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--vj-ink);
}

.vj-cats .cat-list a:hover {
    color: #fa8600;
    text-decoration: underline;
}

/* 栅格里的「View all 20 →」—— 它占第 10 格，让 9 个品类 + 它凑成完整两行。
   与 Remote Services 那条尾链同色同字号，两组的「收起—展开」是同一个语汇。 */
.vj-cats .cat-list a.cat-all {
    color: #fa8600;
    white-space: nowrap;
}

/* ---------- 首页 Remote Services 组（2026-09-17）----------
   Remote Services 下有 23 个二级分类，全部平铺会把首页撑爆。只露 8 个主推项，
   余下的走「View all 23」。它与上方产品组是并列的两组，结构刻意做成一样：
   一句导语 + 一排条目。条目用纯文字 + 间隔点，与上面的栅格区分开。 */
/* ★ 必须显式写：浏览器默认的 [hidden]{display:none} 属于 UA 样式表，
   任何作者样式都压得过它 —— 只要写了 display 非 none，hidden 就形同虚设。 */
.vj-cats .cats-svc[hidden] { display: none; }

.vj-cats .cats-svc {
    /* 分隔线上下要等距。实测早先是上 17 / 下 33 —— 线贴着上面的内容、
       离它真正分隔的内容反而远，读起来像上一块的下边框而不是分隔线。 */
    /* 20/26 -> 8/14（用户 2026-09-18：导语上方太宽，整段砍半）。
       线上方实际是 8（栅格尾行内边距）+ 8 = 16，与线下 14 仍大致等距。 */
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #ededf0;
}

.vj-cats .cats-svc .svc-intro {
    /* 与 .cats-intro 同一档，两组导语必须长得一样，并列关系才成立 */
    font-size: 14px;
    font-weight: 600;
    color: var(--vj-ink);
    margin: 0 0 12px;
}

.vj-cats .cats-sub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* 列间距 32：粗体分组头与首个分类的间距必须明显大于分类彼此之间的 24px，
       否则「Remote Services AI Services」会连读成一个词组。
       给到 32 是为了留余量 —— 24 只是持平，全靠「中间没有分隔点」在撑。 */
    gap: 4px 32px;
}

.vj-cats .cats-sub .sub-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--vj-ink);
}

/* 2026-09-18 改栅格（用户：Remote Services 也是放两行）——
   原来是一行文字流 + 间隔点，现改成与上方产品组同款的等宽栅格，
   8 个主推项 + View all 自动排成两行，两组的视觉语言完全一致。
   （旧的文字流方案与间隔点注释见 git/备份，.sep 已隐藏） */
.vj-cats .cats-sub .sub-links {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0 28px;
}

.vj-cats .cats-sub .sub-links a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--vj-ink);
}

.vj-cats .cats-sub .sub-links a:hover {
    color: #fa8600;
    text-decoration: underline;
}

/* ★ 间隔点必须藏掉：改成栅格后每个 .sep span 会自己占一个格子，
   点会散落在各列里（2026-09-18 改栅格时处理） */
.vj-cats .cats-sub .sub-links .sep { display: none; }

/* ★ 必须写成 .sub-links a.sub-all：它现在是 .sub-links 的子元素，
   上面那条 .sub-links a{color:var(--vj-ink)} 权重 (0,3,1) 会压掉 (0,3,0)，
   橙色就没了。加上标签选择器凑到 (0,4,0) 才赢得回来。 */
.vj-cats .cats-sub .sub-links a.sub-all {
    /* 栅格化后它自己占一格（与产品组的 .cat-all 同款），52px 左移距已撤 ——
       橙色 + 箭头本身就能与普通分类区分。字号跟条目一致 14px。 */
    font-size: 14px;
    color: #fa8600;
    white-space: nowrap;
}

.vj-cats .cats-sub .sub-links a.sub-all:hover { text-decoration: underline; }

/* ---------- 角色与付款常驻披露 ----------
   规格要求：每次加载都显示，不是只给首次访问者看。 */
/* ---------- 顶部导航：Kogan 式悬浮条（用户 2026-09-16 指定） ----------
   - 离页面顶部约 1cm（38px）
   - 导航条本体比正文宽：1800（正文仍是 1440，只放宽这一条）
   - 圆角悬浮卡片，与页脚的 Upwork 卡片首尾呼应
   注意：不能加 overflow:hidden，头像/用户区的下拉会被圆角裁掉。
   只写在 vivijob.css —— 8 个未改版旧页面不加载本文件，不受影响。 */
header {
    margin: 38px auto 0;
    width: calc(100% - 32px);
    max-width: 1800px;
    border-radius: 8px;
    /* ★ 2026-09-17 去掉投影。原来是 box-shadow: 0 10px 18px -10px rgba(0,0,0,.10)。
       用户反馈「个人中心导航栏有隐藏的下框，首页没有」，查下来不是会员页多画了线，
       而是**首页把阴影盖住了**：header 没有 position，首页紧跟其后的 .vj-hero 是
       不透明白底（background:#fff + 56px 上内边距），按文档顺序在 header 之后绘制，
       正好糊住阴影那 16 行；会员页的 .personals 容器是透明的，阴影就透出来了。
       实测 users 页 y=114 处 RGB(243,243,243)，首页同一行是纯白 255。
       既然首页那种「无下框」才是用户要的效果，索性整条去掉，全站一致 ——
       靠层叠顺序碰巧看不见，不算样式统一。
       ★ 若日后要恢复投影，必须同时给 header 加 position:relative; z-index:1，
         否则又会变成「有的页看得见、有的页看不见」。 */
    box-shadow: none;
}
/* 条内内容铺满整条（.nav_box 挂着 .w_all，会被收到 1440，这里放开） */
header .w_all {
    width: 100%; max-width: none;
    padding: 0 28px; box-sizing: border-box;
}
@media (max-width: 768px) {
    header { margin: 8px auto 0; width: calc(100% - 16px); }
    header .w_all { padding: 0 14px; }
}

/* ---------- tasks 页品类侧栏（用户 2026-09-16：间隔与字号收小） ----------
   罪魁是 style.css:435 .boxFlex .left_link p a { font-size:2rem; margin-bottom:2rem }
   —— 20px 字 + 每项 20px 下边距。页内的规则特异度不够压不住它，
   这里用同特异度（本文件后加载）覆盖。 */
.tasks .left_link p { margin: 0; }
.tasks .left_link p a {
    font-size: 14px;
    line-height: 1.35;
    color: #4a4a4f;
    padding: 7px 12px;
    margin-bottom: 2px;
    border-radius: 6px;
}
.tasks .left_link p a:hover { background: #f5f5f7; color: #1d1d1f; }
.tasks .left_link p.active a { background: #fff4e8; color: #fa8600; font-weight: 600; }

/* --- 品类手风琴下拉（用户 2026-09-16：侧栏要有下拉子分类） --- */
.tasks .left_link .cat-group p a { position: relative; padding-right: 28px; }
/* 右侧小箭头：收起时朝下，展开后转成朝上 */
.tasks .left_link .cat-group p a::after {
    content: ''; position: absolute; right: 13px; top: 50%;
    width: 7px; height: 7px;
    border-right: 1.5px solid #9a9aa0; border-bottom: 1.5px solid #9a9aa0;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .15s ease;
}
.tasks .left_link .cat-group.open p a::after {
    transform: translateY(-30%) rotate(225deg);
}
.tasks .left_link .sub-list { display: none; }
.tasks .left_link .cat-group.open .sub-list { display: block; padding: 1px 0 6px; }
.tasks .left_link .sub-item {
    display: block;
    font-size: 13px; line-height: 1.35; color: #1d1d1f;
    padding: 5px 12px 5px 26px;
    margin-bottom: 1px; border-radius: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tasks .left_link .sub-item:hover { background: #f5f5f7; color: #1d1d1f; }
.tasks .left_link .sub-item.active { background: #fff4e8; color: #fa8600; font-weight: 600; }

/* --- 侧栏第二段：Remote Services Category（用户 2026-09-17）---
   ★ 这段用了 .sub-list 的样式，但不在 .cat-group 里 —— 上面第 258 行
     .sub-list{display:none} 是手风琴的收起态，会把它一起藏掉，必须显式放开。 */
.tasks .left_link .sub-list.rs-list { display: block; padding: 1px 0 6px; }
/* 上面那些 .sub-item 缩进 26px 是因为头上有一个部门行；这一段没有部门行，
   缩进就该与顶层条目对齐，否则看着像挂在空气上。 */
.tasks .left_link .rs-list .sub-item { padding-left: 12px; }
/* 与上一段拉开，并用一条细线说明这是并列的另一类。
   ★ sticky（用户 2026-09-18：「Remote Services Category 这几个字固定住」）：
     侧栏是 overflow-y:auto 的滚动容器，标题原来跟着 23 个条目一起滚走 ——
     滚到下面就不知道自己在看哪一组了。吸顶后滚动时始终可见。
     必须给实底：sticky 的元素悬在列表上方，透明底会看见字从底下穿过。 */
/* ★ 两个分组标题（Door Delivery Goods / Remote Services）都两头吸住
   （用户 2026-09-18：Door Delivery 也要和 Remote Services 一样的效果）。
   top 和 bottom 一起给：只给 top 时，展开手风琴组仍会把下方内容往下推、
   收起又弹回来。两头都夹住后 —— 标题的自然位置在视口下方就吸底、
   上方就吸顶，手风琴开合、滚动，它都定在侧栏边缘不动，而且永远可见。
   必须给实底，否则条目文字会从吸住的标题底下穿过。
   两个标题都吸顶时按 DOM 顺序后者盖前者（分组标题的常规 sticky 行为）。 */
.tasks .left_link .sidebar-title {
    position: sticky;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: 6px;
}

.tasks .left_link .sidebar-title-2 {
    z-index: 3;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ededf0;
}

/* 用户 2026-09-16：黄条不要通栏，宽度要与正文一致 —— 改为盒式提示条 */
.vj-notice {
    background: #fff8f0; border: 1px solid #f3dcc2; border-radius: 8px;
    width: 98%; max-width: var(--page-max-width, 1440px);
    margin: 24px auto; padding: 16px 24px; box-sizing: border-box;
}
/* 里面的 .w_all 不再需要二次收窄（否则框内又缩一层） */
.vj-notice .w_all { width: 100%; max-width: none; }
/* max-width 1000 删掉 + 两端对齐（用户 2026-09-18：左右先铺满行）——
   原来 1440 的框里文字 1000px 就断行，右边空出一大截，像没排满 */
.vj-notice p { font-size: 13px; line-height: 1.75; color: #5a4a36; text-align: justify; }
/* ★ font-size 必须显式跟随段落：style.css 的 * { font-size: 1.8rem } 直选命中
   <strong>，13px 的段落里嵌一截 18px 棕色粗体，像渲染坏了（2026-09-18 审计）。
   强调只用字重和颜色，不用字号。 */
.vj-notice strong { color: #8a5a1a; font-size: inherit; }

/* ---------- 页脚 ----------
   样式参照 upwork.com 2026-09 线上实测（design token 解出的值，非目测）：
   - 悬浮圆角卡片：不通栏，四周留边距 + 8px 圆角（--radius-4x），浮在页面底部
   - 背景 --up-black #181818；链接纯白小字，平时无下划线、hover 才加
   - 栏目标题是弱化灰、不加粗（和链接的视觉主次对调，标题退后、链接站前）
   - 分隔线 #333（--gray-25）；底部一条：© 在左、法律链接横排在右
   卡片本体可以比正文宽。用户 2026-09-16：底部与顶部导航条同宽 —— 统一 1800 */
.site-footer {
    background: #181818;
    color: #fff;
    margin: 32px auto 12px;
    width: calc(100% - 32px);
    max-width: 1800px;
    border-radius: 8px;
    overflow: hidden;
    /* 用户 2026-09-16：黑色区域太高，整体压掉约一半。各段内边距都收紧 */
    padding: 18px 0 10px;
    /* 子树字号的继承起点（.site-footer * 让所有后代改走继承） */
    font-size: 14px;
}
/* ★ 三个全局规则会毒到页脚，必须整体掰回：
   1) style.css:22  * { font-size:1.8rem; color:#333 } —— 直接命中每个后代元素，
      按容器设的小字号/白色只赢在继承层、管不到它们（黑底上 #333 ≈ 隐形）；
   2) style.css:421 footer p { padding:3rem 0; text-align:center; border-top:… }
      —— 每个 <p> 白吃 60px 高度 + 居中 + 顶边线，是黑色区域偏高的真正元凶。
   做法：让页脚子树全部改走继承，再由下面的具体规则各自定字号颜色。 */
.site-footer * { color: inherit; font-size: inherit; }
.site-footer p { padding: 0; text-align: left; border-top: 0; }
/* ★ 层级修正（2026-09-17）：原来列标题是 #a5a5a5、链接是 #fff ——
   标题比它管的内容还淡，扫一眼分不出组。正过来：标题白、链接退一档。 */
.site-footer a { color: #c9c9c9; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 0 0 12px;
}
.site-footer .footer-col h4 {
    font-size: 12px; font-weight: 600; color: #fff;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-col li { margin-bottom: 3px; font-size: 13px; line-height: 1.4; }
/* Policies 有 7 条，是最高的一栏，拆成两列排。
   用 CSS columns 而不是 grid：grid 的行高会跨列同步，
   "Buyer-Provider Service Terms" 折两行时，同一行的 "Platform Terms"
   底下会被撑出一整行空白（用户 2026-09-16 反馈的那个空行）。
   columns 两列各自独立排版，没有行同步。 */
.site-footer .footer-col ul.two-col {
    display: block; column-count: 2; column-gap: 14px;
}
.site-footer .footer-col ul.two-col li { break-inside: avoid; }

.site-footer .footer-contact p {
    font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; text-align: left;
}
.site-footer .footer-note { color: #a5a5a5; font-size: 11.5px; line-height: 1.5; }
.site-footer .footer-note a { color: #fff; }

/* .footer-legal 已删除 —— 双路径披露全文移入 Platform Terms（2026-09-16），
   暂存 docs/改版规格/法律披露文本.md */

/* 底部条：© 左、法律链接右（Upwork 的 bottom bar 布局） */
.site-footer .footer-bottom {
    border-top: 1px solid #333;
    padding: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
}
.site-footer .footer-bottom p { font-size: 12px; color: #a5a5a5; margin: 0; }
.site-footer .footer-bottom ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 24px;
}
.site-footer .footer-bottom li { font-size: 12px; }
.site-footer .footer-bottom li a { color: #a5a5a5; }
.site-footer .footer-bottom li a:hover { color: #fff; }

@media (max-width: 900px) {
    .site-footer .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .site-footer { width: calc(100% - 16px); margin-bottom: 8px; }
    .site-footer .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================================
   Get it Made（自营商品目录 P42）与商品详情（P43）
   ============================================================================ */

.vj-cat-hero { background: #fff; padding: 40px 0 24px; }
.vj-cat-hero h2 { font-size: 28px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px; }
/* 头句六调（与首页 .vj-hero .lead 同一套）：18px/600 近黑 + 柔和浅黄垫底，
   不限宽不拉词距，自然换行。 */
.vj-cat-hero .tagline {
    font-size: 14px; font-weight: 400; line-height: 1.6; color: #1d1d1f; margin-bottom: 16px;
    /* 定稿：框线齐平内容边界、文字内缩 16 不顶线（同 .vj-hero .lead） */
    background: #fff8e6; padding: 10px 16px; border-radius: 6px;
}

/* 保障承诺条 */
.vj-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vj-trust span {
    font-size: 12px; color: #1a7f4b; background: #eaf7f0;
    border: 1px solid #cfe9db; border-radius: 4px; padding: 4px 10px;
}

/* 目录搜索 */
.vj-cat-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vj-cat-search input {
    flex: 1 1 320px; height: 42px; padding: 0 14px;
    border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
}
.vj-cat-search .btn-primary {
    height: 42px; padding: 0 22px; border: 0; border-radius: 4px;
    background: #fa8600; color: #fff; font-size: 14px; cursor: pointer;
}
.vj-cat-search .btn-ghost {
    height: 42px; padding: 0 18px; line-height: 40px;
    border: 1px solid #ddd; border-radius: 4px;
    background: #fff; color: #333; font-size: 14px;
}

/* 品类 chips */
.vj-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 6px; }
.vj-chips a {
    font-size: 13px; padding: 6px 13px; border: 1px solid #e0e0e3;
    border-radius: 999px; background: #fff; color: #333;
}
.vj-chips a.on, .vj-chips a:hover { border-color: #fa8600; color: #fa8600; }

/* 2026-09-19：Remote Services（跳 Find Agents，非本页筛选项）与
   「… N more」（原地展开剩余品类）两种特殊 chip，用实心橙底与普通
   筛选 chip 区分开，避免用户以为点了能在本页筛出 Remote 商品。 */
.vj-chips .chip-remote {
    background: #fff4e8; border-color: #fddcae; color: #b8650a; font-weight: 600;
}
.vj-chips .chip-remote:hover { background: #fa8600; border-color: #fa8600; color: #fff; }
.vj-chips .chip-more {
    background: #f4f4f5; border-style: dashed; color: #6b6b70; font-weight: 600;
}
.vj-chips .chip-more:hover { border-color: #fa8600; color: #fa8600; background: #fff8ec; }

/* 商品卡片网格 */
.vj-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 18px 0 8px; }
.vj-prod {
    flex: 1 1 230px; max-width: 300px; background: #fff;
    border: 1px solid #e8e8ea; border-radius: 8px; overflow: hidden;
    display: flex; flex-direction: column;
}
.vj-prod .thumb {
    height: 150px; background: #f2f2f4; display: flex;
    align-items: center; justify-content: center;
    color: #2b2b31; font-size: 12px;
}

/* ============================================================================
   字阶与文字配色（2026-09-17）
   用户反馈「读起来费劲，小的太小」。实测 alibaba.com 的排版后定案 ——
   问题主因不是字号，是**颜色太淡 + 字号种类太多**：

     · 阿里巴巴全站只有 4 种字号（12/14/16/20），其中 14 与 12 承担 80–90% 的正文；
       层级主要靠**字重与颜色**拉开，不靠字号。字间距全站为 0。
     · 文字只有两档颜色：#222（对比度 15.9:1）与 #767676（4.54:1，正好卡在
       AA 底线），中间没有「不深不浅」的灰。这种二元对比让密集信息可扫读。
     · 我们原先有 10 种字号（12/12.5/13/13.5/14/15/16/17/18/20），
       且 #8a8a90 只有 3.5:1、#a5a5ad 只有 2.6:1 —— 都低于可读性底线，
       小字再叠低对比，就是「费劲」的真正来源。

   本站定案（英文正文比阿里的数字型信息更需要行距，故底线抬到 13px）：
     13px/20  辅助信息（最小，不再有 12 / 12.5）
     14px/22  正文
     16px/24  卡题与小节标题
     20px/28  页题
   颜色两档 + 一档专用弱化：
     --vj-ink   #1d1d1f  主文字（16:1）
     --vj-ink-2 #5f5f68  次要文字（6.6:1）
     --vj-ink-3 #75757e  仅用于确实该退后的标签（4.6:1，不再更淡）
   强调色按用途固定，不随手换（这是「不花花绿绿」的关键）：
     --vj-accent #fa8600 品牌与主操作 · --vj-money #1a7f4b 已结算金额
     --vj-warn   #9a5b00 等待中 · --vj-danger #b3261e 错误与取消
   ============================================================================ */
:root {
    --vj-ink: #1d1d1f;
    /* ★ 2026-09-17 用户要求：把最小字号的文字统一标黑，实地比较是否更清晰。
       这两档原本是 #5f5f68(6.6:1) 与 #75757e(4.6:1)，现在都压到与正文同色。
       —— 回退办法：把下面两行改回注释里的原值即可，其余代码一律不用动。
          --vj-ink-2: #5f5f68;   （次要文字）
          --vj-ink-3: #75757e;   （最淡一档）
       全站辅助文字都走这两个变量，所以改这里等于一次性切换整站。 */
    --vj-ink-2: #1d1d1f;
    --vj-ink-3: #2b2b31;
    --vj-accent: #fa8600;
    --vj-money: #1a7f4b;
    --vj-warn: #9a5b00;
    --vj-danger: #b3261e;
}

/* ---- 卡片以外的辅助文字：统一抬到 13px 并加深浅灰 ----
   卡片体系内的数值已在下方 .vj-qpage 区块按新字阶直接定稿，
   这里只收拢卡片之外的零散辅助文字，避免再出现 12px + 低对比的组合。 */
.personals .op-meta,
.personals .op-fine,
.personals .msg-state .sub,
.conversation-list-item .rr .message-time,
.conversation-list-item .rr .message-preview,
.conversation-list-item .peer-line,
.saved-card p.when,
.saved-card p.svc,
.savedby-card p.svc,
.savedby-card p.dt,
.od .fine,
.ordersPlaced .op-meta,
.ordersPlaced .op-amt p.b,
.ordersPlaced .op-act p,
.ordersPlaced .op-empty p.sub {
    font-size: 13px !important;
    line-height: 20px !important;
    color: var(--vj-ink-2) !important;
}
.personals .badge,
.ordersPlaced .op-stages span,
.od .od-stages span {
    font-size: 13px !important;
    line-height: 18px !important;
}
.ordersPlaced .op-title,
.saved-card .body h4,
.conversation-list-item .rr .conversation-title {
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--vj-ink) !important;
}
.personals .op-sub, .mySupplies .txt p, .od p { line-height: 22px !important; }
.ordersPlaced .op-amt p.a, .od .q-amount {
    font-size: 20px !important; line-height: 28px !important; color: var(--vj-ink) !important;
}
.od .q-amount.settled { color: var(--vj-money) !important; }
/* 全站不使用字间距（阿里实测 2126 个元素无一例外为 normal） */
.personals, .vj-qpage, .od { letter-spacing: normal; }

/* ============================================================================
   会员中心：为晚到的内容预留一屏高度
   （用户 2026-09-17：Order Center 第 2~6 个按钮点击后还是会弹动）

   ★ 这次弹动的既不是滚动条也不是侧栏 —— 实测滚动位置全程稳定在 57px、
     侧栏条目一像素没动。动的是**页脚**。
     这几页（myPostedTasks / ordersPlaced / received / mySupplies / quotationList）
     的右栏内容全靠 AJAX 填充，实测文档高度 927 -> 1169 -> 1499，涨了近 570px：
     点进去时右栏还空着，页脚就贴在内容下面、正好落在视野里；
     两三百毫秒后卡片到达，把页脚往下顶了两三百像素 —— 那一下就是「弹」。

   垫一屏高度后，首屏底部不再是页脚，晚到的内容在视野之外生长，看不见位移。
   代价是内容极少的页面，页脚前会多一段空白 —— 比页脚当着面跳一下好。
   ============================================================================ */
.personals {
    min-height: 100vh;
    box-sizing: border-box;
}

/* ============================================================================
   会员中心侧栏：消除点击/悬停时的抖动（用户 2026-09-17 反馈「晃动、闪动」）
   三个成因，全部是「状态改变了几何」：
     ① style.css:1159  a:hover dd { font-weight: bold } —— 变粗即变宽，整行在动
     ② style.css:1166  a.active dd { border-left:3px; padding-left:17px }
        而未选中是 padding-left:10px/20px —— 点击瞬间整项横移
     ③ style.css:1124/1227 transition: all —— 把上面的几何变化做成了动画，
        于是「跳」变成看得见的「滑」
   解法：几何在所有状态下恒定 —— 3px 左边框常驻（未选中透明）、内边距固定、
   字重固定，只让颜色与背景过渡。选中态靠颜色+底色+左边框区分，不靠尺寸。
   ============================================================================ */
.personals .left_link dl dd {
    border-left: 3px solid transparent !important;
    padding-left: 13px !important;
    font-weight: 400 !important;
    /* 只过渡颜色，绝不过渡任何影响布局的属性 */
    transition: color .15s linear, background-color .15s linear !important;
}
.personals .left_link dl a:hover dd {
    color: #fa8600 !important;
    background-color: rgba(250, 134, 0, .06) !important;
    /* ★ 不加粗：加粗会改变行宽，就是「晃动」的直接来源 */
    font-weight: 400 !important;
}
.personals .left_link a.active dd,
.personals .left_link a.nav-active dd,
.personals .left_link a.nav-hover dd,
.personals .left_link dl dd.active {
    color: #fa8600 !important;
    background-color: rgba(250, 134, 0, .10) !important;
    border-left-color: #fa8600 !important;
    /* 与未选中完全相同的内边距与字重 —— 切换时零位移 */
    padding-left: 13px !important;
    font-weight: 400 !important;
}
/* dt（分组标题）本来就不该有交互效果 */
.personals .left_link dl dt { transition: none !important; }

/* ---------- 会员中心侧栏统一字阶（2026-09-17，全部 .personals 页生效） ----------
   style.css 的旧标准是 dt 2rem(20px) / dd 1.8rem(18px)，比正文 14px 大两圈，
   侧栏喧宾夺主。统一收到：组标题 15/600、条目 14，间距同步收紧。
   本文件后于 style.css 加载，同选择器靠顺序取胜；
   间距三项须带 !important —— style.css 1189/1208 的防收缩块用 !important
   锁了 padding 与 margin-bottom（font-size 未锁，故 15px 无须 !important）。 */
.personals .left_link dl {
    /* 组与组之间（2026-09-17 由 14px 放宽到 20px，与条目间距拉开层级） */
    margin-bottom: 20px !important;
}

.personals .left_link dl dt {
    font-size: 15px;
    padding: 8px 0 8px 10px !important;
    margin-bottom: 8px !important;
}

.personals .left_link dl dd {
    font-size: 14px;
    /* 条目之间：相邻 dd 的上下外边距会合并，所以实际行距 = 9px（原 6px） */
    margin: 9px 0;
    line-height: 1.5;
    /* ★ 标黑：style.css:1124 给的是 #6e6e6e，实测对比度仅 5.1，
       而同页正文已是 16.8 —— 并排看侧栏发糊。这里改跟正文同色。
       不加 !important：上方 hover/active 的橙色规则带 !important，必须让它们赢。 */
    color: var(--vj-ink);
}

/* ============================================================================
   报价卡片（myPostedTasks 买家侧 / received 代理侧）—— 唯一定义
   2026-09-17：两页原本各存一份 CSS，结果必然漂移 —— 实测卡片宽度差 223px、
   卡间距差 4px、同一个「View progress」按钮两页高度差 2px。两页是同一件事的
   两面，必须共用一份样式，这里就是那一份；页面内不要再写 .q-* 规则。
   ★ 页面 <style> 在本文件之后加载，同特异度下会赢 —— 所以页内的重复块已删除。
   ============================================================================ */

/* 一页之内所有区块共享同一条右缘：内容区、tab 栏、分页器、卡片 */
.vj-qpage .tab-bar,
.vj-qpage .tab-intro,
.vj-qpage #myTaskList,
.vj-qpage #myQuoteList,
.vj-qpage #mySentList,
.vj-qpage .pagination-wrapper {
    max-width: 980px;
}

.vj-qpage .tab-bar {
    display: flex !important;
    align-items: flex-end;
    gap: 4px !important;
    border-bottom: 1px solid #e8e8ea;
    margin-bottom: 4px;
}

.vj-qpage .tab-btn {
    position: relative; display: inline-block;
    padding: 0 18px; line-height: 42px;
    font-size: 16px; color: var(--vj-ink-2); cursor: pointer; text-decoration: none;
    transition: color .2s;
}
.vj-qpage .tab-btn:hover { color: #fa8600; }
/* ★ 不给 active 加粗：加粗会让该 tab 变宽，切换时后面的 tab 横向跳 4px。
   用颜色 + 下方橙线区分已经足够。 */
.vj-qpage .tab-btn.active { color: #1d1d1f; }
.vj-qpage .tab-btn::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: #fa8600;
    transform: translateX(-50%); transition: width .3s ease;
}
.vj-qpage .tab-btn.active::after { width: 100%; }

.vj-qpage .tab-intro {
    font-size: 14px !important; color: var(--vj-ink-2);
    line-height: 22px !important; margin: 14px 0 6px;
}

.vj-qpage #myTaskList,
.vj-qpage #myQuoteList,
.vj-qpage #mySentList {
    display: flex; flex-direction: column;
    gap: 12px; padding: 12px 0;
}

.vj-qpage .task-item {
    display: block !important;
    padding: 16px 18px !important;
    border-radius: 8px !important;
    border: 1px solid #e8e8ea !important;
    background: #fff;
    transition: box-shadow .2s ease;
}
.vj-qpage .task-item:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }

.vj-qpage .q-main { display: flex; align-items: flex-start; gap: 14px; }

/* ★ box-sizing 必须写：默认 content-box 下 44px + 2px 边框 = 46px，
   正文左缘因此比动作行右移 2px，两条左缘差一点点、看着就是没对齐。 */
.vj-qpage .q-avatar {
    flex: 0 0 44px; width: 44px; height: 44px; box-sizing: border-box;
    border-radius: 50%; object-fit: cover;
    border: 1px solid #eee; background: #f5f5f7;
}

.vj-qpage .q-body { flex: 1 1 auto; min-width: 0; }

.vj-qpage .task-item .q-title {
    font-size: 16px !important; font-weight: 600; color: var(--vj-ink);
    margin: 0 0 4px; line-height: 24px !important; cursor: pointer;
}
.vj-qpage .task-item .q-title:hover { color: #fa8600; }

.vj-qpage .task-item .q-meta {
    font-size: 13px !important; color: var(--vj-ink-2);
    margin: 0 0 8px; line-height: 20px !important;
}
/* ★ 没有这条，<b> 会被 style.css 的 * { font-size:1.8rem } 命中 —— 实测对方
   名字渲染成 18px，比 15px 的卡题还大，视觉主次完全颠倒。 */
.vj-qpage .task-item .q-meta b {
    font-size: 13px !important; font-weight: 600; color: var(--vj-ink);
}

.vj-qpage .q-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.vj-qpage .q-money { flex: 0 0 auto; text-align: right; padding-left: 12px; }
.vj-qpage .task-item .q-amount {
    font-size: 20px !important; font-weight: 700; color: var(--vj-ink);
    margin: 0; line-height: 28px !important; white-space: nowrap;
}
/* 金额只有在「钱已经动过」时才用绿色；预算与他人报价是中性信息 */
.vj-qpage .task-item .q-amount.settled { color: var(--vj-money); }
.vj-qpage .task-item .q-amount.muted {
    color: var(--vj-ink-3); font-weight: 500; font-size: 16px !important;
}
.vj-qpage .task-item .q-amount-label {
    font-size: 13px !important; line-height: 20px !important;
    color: var(--vj-ink-2); margin: 2px 0 0; white-space: nowrap;
}

/* ★ 动作行必须与正文左缘对齐：头像 44 + gap 14 = 58px。
   原先动作行贴着卡片内边距，比上方文字左缘靠左 58px，是最扎眼的错位。 */
.vj-qpage .q-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 14px 0 0 58px; padding-top: 12px;
    border-top: 1px solid #f2f2f4;
}
@media (max-width: 720px) {
    .vj-qpage .q-main { flex-wrap: wrap; }
    .vj-qpage .q-money { text-align: left; padding-left: 58px; }
    .vj-qpage .q-actions { margin-left: 0; }
}

/* ---- 按钮：两种treatment，不是五种 ----
   默认一律次要（白底描边）；只有真正推进流程的动作才是主按钮（橙）。
   原先所有按钮都吃 .btn-primary 的橙色渐变，一张卡三个橙按钮，等于没有主次。 */
.vj-qpage .q-actions .btn-primary,
.vj-qpage .q-actions .btn-under-title,
.vj-qpage .q-actions a.btn-primary,
.vj-qpage .q-actions button.btn-primary {
    background: #fff !important;
    color: #1d1d1f !important;
    border: 1px solid #d9d9de !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    /* ★ <button> 默认不继承 font-family（走浏览器默认 Arial），而 <a>/<span> 继承页面字体。
       同一句文案因此宽度不同、按钮列左缘参差 —— 必须显式继承。 */
    font-family: inherit !important;
    padding: 0 14px !important;
    height: 34px !important;
    /* ★ 同上：不写 box-sizing 的话 <a> 是 content-box（32+2 边框 = 34px），
       <button> 多半已被 reset 成 border-box（32px）—— 同一行里两种高度并存。 */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease;
}
.vj-qpage .q-actions .btn-primary:hover { border-color: #b9b9c0 !important; background: #fafafa !important; }

/* 主按钮：推进流程的那一个 */
.vj-qpage .q-actions .pay-task,
.vj-qpage .q-actions .make-offer-btn,
.vj-qpage .q-actions .worker-confirm,
.vj-qpage .q-actions .confirm-quote-btn,
.vj-qpage .q-actions .send-results,
.vj-qpage .q-actions .review-task,
.vj-qpage .q-actions .requote-btn:not([disabled]) {
    background: #fa8600 !important;
    color: #fff !important;
    border-color: #fa8600 !important;
    font-weight: 600 !important;
}
.vj-qpage .q-actions .pay-task:hover,
.vj-qpage .q-actions .make-offer-btn:hover,
.vj-qpage .q-actions .worker-confirm:hover,
.vj-qpage .q-actions .confirm-quote-btn:hover,
.vj-qpage .q-actions .send-results:hover,
.vj-qpage .q-actions .review-task:hover,
.vj-qpage .q-actions .requote-btn:not([disabled]):hover {
    background: #e87a00 !important; border-color: #e87a00 !important;
}

/* 禁用态：原来是橙底 opacity .5 —— 白字压在浅褐底上几乎读不出来 */
.vj-qpage .q-actions .btn-primary[disabled],
.vj-qpage .q-actions .btn-primary:disabled,
.vj-qpage .q-actions .btn-under-title-disabled {
    background: #f4f4f6 !important;
    color: #2b2b31 !important;
    border-color: #ebebee !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    filter: none !important;
    font-weight: 500 !important;
}
.vj-qpage .q-actions .btn-under-title-disabled {
    border: 1px solid #ebebee; border-radius: 6px; box-sizing: border-box;
    font-size: 13px; font-weight: 500; line-height: 1;
    padding: 0 14px; height: 34px; display: inline-flex; align-items: center;
}

/* 更多菜单：由圆形改成与按钮同高的方角，和旁边的按钮成一套 */
.vj-qpage .q-actions .more-actions-btn {
    width: 34px !important; height: 34px !important; box-sizing: border-box !important;
    border-radius: 6px !important;
    border: 1px solid #d9d9de !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    color: #1d1d1f !important;
}
.vj-qpage .q-actions .more-actions-btn:hover { background: #fafafa !important; }

/* 徽章：去掉 capitalize（源文案本来就是句首大写，capitalize 会把
   「Cancelled by you」变成「Cancelled By You」，同一句话两种写法） */
.vj-qpage .status-tag {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

/* 终态说明（已取消等）：与徽章同级，不要喧宾夺主 */
.vj-qpage .q-actions .q-final {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px !important; color: var(--vj-danger); margin-right: 4px;
}

/* 付款徽章：两页同状态必须同色。未付用琥珀（等待），不用红（错误）。 */
.vj-qpage .status-tag.status-paid {
    background: #eaf7f0 !important; color: #1a7f4b !important;
}
.vj-qpage .status-tag.status-unpaid {
    background: #fff8ec !important; color: #7a5a22 !important;
}

/* 更多菜单的图标与同行按钮文字同色，否则显得发虚 */
.vj-qpage .q-actions .more-actions-btn svg { color: #1d1d1f; }

.vj-qpage .q-empty {
    border: 1px dashed #e2e2e6; background: #fafafa; border-radius: 8px;
    padding: 34px 22px; text-align: center; max-width: 980px;
}
.vj-qpage .q-empty p { font-size: 16px !important; line-height: 24px !important; color: var(--vj-ink); margin: 0 0 6px; }
.vj-qpage .q-empty p.sub { font-size: 14px !important; line-height: 22px !important; color: var(--vj-ink-2); margin: 0; }

/* 正式配图（2026-09-17 内容置换）：缩略图为 <img>，满幅裁切 */
.vj-prod img.thumb {
    width: 100%; height: 150px; object-fit: cover; display: block;
}

.vj-pd-media img.main {
    width: 100%; height: 280px; object-fit: cover;
    border-radius: 8px; display: block;
}
.vj-prod .body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.vj-prod h4 { font-size: 14px; font-weight: 700; color: #1d1d1f; line-height: 1.4; margin-bottom: 8px; }
.vj-prod .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vj-prod .tag-cat {
    font-size: 11px; color: #3a5d9a; background: #eef3fb;
    border-radius: 3px; padding: 3px 7px;
}
.vj-prod .tag-self {
    font-size: 11px; color: #1a7f4b; background: #eaf7f0;
    border-radius: 3px; padding: 3px 7px;
}
.vj-prod .custom { font-size: 12px; color: #1d1d1f; line-height: 1.5; margin-bottom: 10px; }
.vj-prod .nums { font-size: 12.5px; color: #333; line-height: 1.6; margin-bottom: 12px; }
.vj-prod .nums strong { color: #fa8600; font-size: 14px; }
.vj-prod .acts { margin-top: auto; display: flex; gap: 8px; }
.vj-prod .acts a {
    flex: 1; text-align: center; font-size: 12.5px; padding: 8px 0; border-radius: 4px;
}
.vj-prod .acts .primary { background: #fa8600; color: #fff; }
.vj-prod .acts .ghost { border: 1px solid #ddd; color: #333; }

/* 目录兜底条 */
.vj-fallback {
    margin: 24px 0 40px; padding: 18px; background: #fafafa;
    border: 1px dashed #dcdce0; border-radius: 6px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.vj-fallback p { font-size: 14px; color: #4a4a4f; }
.vj-fallback a {
    font-size: 13.5px; padding: 9px 18px; border-radius: 4px;
    background: #fa8600; color: #fff;
}

/* ---------- 商品详情 ---------- */
.vj-crumb { font-size: 12.5px; color: #1d1d1f; padding: 18px 0 0; }
.vj-crumb a { color: #1d1d1f; }

.vj-pd-top { display: flex; flex-wrap: wrap; gap: 26px; padding: 18px 0 28px; }
.vj-pd-media { flex: 1 1 320px; max-width: 420px; }
.vj-pd-media .main {
    height: 260px; background: #f2f2f4; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #2b2b31; font-size: 13px;
}
.vj-pd-info { flex: 1 1 380px; }
.vj-pd-info h2 { font-size: 24px; font-weight: 700; color: #1d1d1f; margin-bottom: 10px; }
.vj-pd-info .keynums { font-size: 14px; color: #333; line-height: 1.9; margin: 12px 0 14px; }
.vj-pd-info .keynums strong { color: #fa8600; }
.vj-pd-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.vj-pd-acts a { font-size: 14px; padding: 11px 22px; border-radius: 4px; }
.vj-pd-acts .primary { background: #fa8600; color: #fff; }
.vj-pd-acts .ghost { border: 1px solid #ddd; color: #333; }

/* 详情 tabs —— 注意：这里的 tab 切换的是同一个产品的不同信息面，
   不是像旧 Skill 详情页那样切换成另一个对象（框架图标注的最大语义变化）。 */
.vj-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e8e8ea; }
.vj-tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 11px 14px; font-size: 13.5px; color: #55555b; cursor: pointer;
}
.vj-tabs button.on { color: #fa8600; border-bottom-color: #fa8600; font-weight: 600; }
.vj-panel { display: none; padding: 20px 0 8px; }
.vj-panel.on { display: block; }

.vj-spec { width: 100%; border-collapse: collapse; max-width: 760px; }
.vj-spec th, .vj-spec td {
    text-align: left; font-size: 13.5px; padding: 9px 12px;
    border-bottom: 1px solid #eee; vertical-align: top;
}
.vj-spec th { width: 150px; color: #1d1d1f; font-weight: 600; }

.vj-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vj-stages span {
    font-size: 12px; background: #f4f4f6; border-radius: 4px;
    padding: 6px 11px; color: #44444a;
}

.vj-seller {
    margin: 22px 0 8px; padding: 14px 16px; background: #fff8f0;
    border: 1px solid #f3dcc2; border-radius: 6px;
}
.vj-seller p { font-size: 13px; line-height: 1.7; color: #5a4a36; }

@media (max-width: 768px) {
    .vj-prod { flex: 1 1 100%; max-width: none; }
    .vj-pd-media { max-width: none; }
    .vj-hero { padding: 36px 0 28px; }
    .vj-hero h2 { font-size: 24px; }
    .vj-card { flex: 1 1 100%; }
    .site-footer .footer-cols { gap: 24px; padding: 28px 0 20px; }
}