/* ============================================================
AI不眠 — 组件层
主题 owns 所有 .b-* 基础组件。插件 CSS 在此基础上加 modifier。
============================================================ */
/* ============================================================
按钮 (.b-button)
触屏最小 44×44。modifier: --primary --accent --ghost --large --small
============================================================ */
.b-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 44px;
min-width: 44px;
padding: 0 var(--s-5);
border: 1px solid var(--line-strong);
border-radius: var(--r-3);
background: var(--bg-0);
color: var(--ink-1);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
user-select: none;
transition:
background var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease),
transform var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease);
text-decoration: none;
white-space: nowrap;
}
.b-button:hover {
background: var(--bg-2);
border-color: var(--line-strong);
color: var(--ink-0);
text-decoration: none;
}
.b-button:active { transform: translateY(1px); }
.b-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.b-button:disabled, .b-button[aria-disabled="true"] {
opacity: 0.5; cursor: not-allowed; transform: none;
}
.b-button--primary {
background: var(--btn-primary-bg); /* 实心底白字恒达 AA：亮 #6d4dff / 暗 #6d4dff（暗色 --brand=#836aff 白字仅 3.84 → 用专用 btn token） */
border-color: var(--btn-primary-bg);
color: #fff;
box-shadow: 0 2px 8px rgba(109, 77, 255, 0.25);
}
.b-button--primary:hover {
background: var(--btn-primary-bg-h);
border-color: var(--btn-primary-bg-h);
color: #fff;
box-shadow: 0 4px 14px rgba(109, 77, 255, 0.35);
}
.b-button--ghost {
background: transparent;
border-color: var(--line-strong);
color: var(--ink-1);
}
.b-button--ghost:hover {
background: var(--bg-2);
border-color: var(--ink-3);
color: var(--ink-0);
}
/* 〔续46〕危险操作按钮（账号注销）—— 描边红、悬停填充，克制不喧宾夺主。 */
.b-button--danger {
background: transparent;
border-color: #d9534f;
color: #d9534f;
}
.b-button--danger:hover {
background: #d9534f;
border-color: #d9534f;
color: #fff;
}
/* 账户「注销」区块的轻量排版。 */
.b-delete-account ul { margin: 8px 0 12px; padding-left: 20px; line-height: 1.7; }
.b-delete-account__confirm { margin: 12px 0; }
.b-button--link {
background: transparent;
border-color: transparent;
color: var(--brand);
padding: 0 var(--s-2);
min-height: auto;
min-width: auto;
}
.b-button--link:hover { background: transparent; color: var(--brand-600); }
.b-button--large { min-height: 48px; padding: 0 var(--s-7); font-size: 15px; border-radius: var(--r-4); }
.b-button--small { min-height: 36px; padding: 0 var(--s-3); font-size: 13px; border-radius: var(--r-2); }
.b-button--block { width: 100%; }
/* ============================================================
输入控件
============================================================ */
.b-input {
width: 100%;
min-height: 44px;
padding: var(--s-3) var(--s-4);
background: var(--bg-0);
color: var(--ink-1);
border: 1px solid var(--field-border);
border-radius: var(--r-3);
font-size: 14px;
line-height: 1.5;
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
/* iOS Safari 在 input font-size < 16px 时聚焦自动放大整页(无障碍特性,但破坏布局).
官方解法:移动端把 input 字号锁到 ≥ 16px。仅 ≤ 768px 触发,桌面保留 14px 设计紧凑度。
refs: css-tricks.com / defensivecss.dev / Rick Strahl Weblog 一致结论 */
@media (max-width: 768px) {
.b-input { font-size: 16px; }
/* small variant 也要,否则触发同样问题 */
}
.b-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-50);
}
.b-input::placeholder { color: var(--ink-4); }
/* 搜索 input 带前导图标 */
.b-search {
position: relative;
display: flex;
align-items: center;
}
.b-search__icon {
position: absolute;
left: var(--s-4);
width: 18px; height: 18px;
color: var(--ink-3);
pointer-events: none;
}
.b-search .b-input { padding-left: 44px; }
/* 搜索框常驻高亮：默认就显示「聚焦选中」的品牌边框 + 光晕（用户要搜索框醒目、不必点进去才亮）。
与 .b-input:focus 同款，故聚焦时视觉不变；仅作用于搜索框，不影响其它输入框。 */
.b-search .b-input {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-50);
}
/* ============================================================
卡片 (.b-card)
============================================================ */
.b-card {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--r-3);
overflow: hidden;
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
position: relative;
}
/* .b-card:hover 的位移/阴影副作用已移到文件底部 @media (hover: hover) 块,
触屏设备不应用,避免 tap 后 hover 状态粘住. */
.b-card__link {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.b-card__link:hover { color: inherit; text-decoration: none; }
.b-card__thumb-wrap {
position: relative;
aspect-ratio: 1 / 1; /* 〔续27〕16:10 → 正方形框（与首页 hero 中栏 .b-hero__w-thumb 一致）；〔续63·站长定〕上传任意比例都收、img contain「完整放进」，非方图露本条 --bg-2 底色 */
background: var(--bg-2);
overflow: hidden;
}
.b-card__thumb {
width: 100%; height: 100%;
object-fit: contain;
transition: transform var(--dur-2) var(--ease);
}
/* 〔续63·站长定〕作品封面「完整放进正方形」：不裁剪、不拒绝——用户传任何比例的封面，按原比例整张放进正方形 thumb-wrap，
非正方形图四周留白处露出 wrap 底色（--bg-2）。故 object-fit 由 cover 改 contain。thumb-wrap 仍 aspect-ratio:1/1（卡片保持正方形）。
仍须 !important 压过 WC 归档页自带的 `.woocommerce img{height:auto}`(特异性 0,1,1)，锁住 width/height:100% 让 contain 在正方形内生效。
（承前续29 曾因 WC 干扰致「图缩成一条」的是布局塌陷、非此处 contain；此处 contain 有 width/height:100% 兜住、不塌陷。） */
.b-card__thumb-wrap img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; }
/* .b-card:hover .b-card__thumb 的缩放副作用同样移到 @media (hover: hover) 块 */
.b-card__thumb-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--ink-4); font-size: 28px;
}
/* 付费「即将开放」缩略图角标（决策 1：付费购买上线前的状态标识，收付通上线后自动不渲染）。
半透明深底 + 白字 = 覆盖在封面图上的遮罩惯例（与亮/暗主题无关、对图片恒可读，同 .b-badge--solved 的 rgba 用法）。 */
.b-card__soon {
position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 2;
padding: 2px var(--s-2); border-radius: var(--r-pill);
background: rgba(0, 0, 0, .6); color: #fff;
font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .02em;
pointer-events: none;
}
.b-card__body {
padding: var(--s-4);
display: flex; flex-direction: column;
gap: var(--s-1); /* 续19 极限收紧：标题↔meta 间距 --s-2→--s-1 */
flex: 1;
}
.b-card__title {
font-size: 15px;
font-weight: 400;
line-height: 1.3; /* 续19 极限收紧：1.45→1.3，两行标题更紧、1 行标题预留空更小 */
color: var(--ink-0);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.3em * 2); /* 预留两行（=对齐基准），随 line-height 同步收紧 */
overflow-wrap: anywhere; /* V3.12: 长 URL / 英文长词 / CJK 拼合 不许撑爆卡片 */
word-break: break-word; /* 兼容旧 webkit */
}
.b-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-1); /* 续19: 头像↔价格 间距（PC+移动统一为同一排布局） */
/* 续19: 原 margin-top:auto 把 meta 沉到卡底——卡片被网格拉等高后，剩余空当全堆成
标题↔作者的大留白；且免费/付费 meta 行数不同（付费多「已售」行）→ 沉底对齐时作者被顶得
左右参差。改为紧跟定高标题（标题已 line-clamp:2 + min-height 2 行）→ 全卡作者落同一 Y、
跨卡对齐，标题↔作者间距收紧。代价：内容少的卡空当移到卡底。 续19 极限：padding-top 归 0、靠 body gap(--s-1) 兜最小间距。 */
padding-top: 0;
font-size: 13px;
color: var(--ink-3);
}
.b-card__author {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-width: 0;
flex-shrink: 0; /* 续19: 只剩头像、不缩（PC+移动统一） */
}
.b-card__author img {
width: 22px; height: 22px;
border-radius: var(--r-pill);
flex-shrink: 0;
}
/* 老内核钉高（0.4.747·X112·机制见 .b-avatar 处注释）：与上条 width 同值。 */
.woocommerce .b-card__author img, .woocommerce-page .b-card__author img { height: 22px; }
.b-card__author span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.b-card__verified { flex-shrink: 0; overflow: visible; color: var(--brand); font-size: 11px; font-weight: 700; line-height: 1; }
/* 续19: 卡片只显作者头像、不显用户名（PC+移动，用户拍板）。✓实名徽章无名时孤立 → 一并隐；
头像 img 的 alt=作者名 保留（a11y/SEO 仍有名）；详情页/店铺页仍展示名+✓。 */
.b-card__author > span { display: none; }
.b-card__stats {
/* 续19: 价格(左,紧贴头像右) ↔ 已售(右) 一排——PC+移动统一（用户「统一为移动端这样」）。
占满头像后剩余宽、不换行；价格 order:-1 移到最左 + margin-right:auto 把已售推到最右；
价格 flex-shrink:0 永不被裁（守旧「¥99→¥9」红线）；评分隐藏(见下)。 */
display: inline-flex;
flex: 1;
flex-wrap: nowrap;
column-gap: var(--s-2);
align-items: baseline;
color: var(--ink-3);
min-width: 0;
}
.b-card__stats > span {
display: inline-flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.b-card__stats > .b-card__price { order: -1; margin-right: auto; flex-shrink: 0; }
/* 评分(★)作第三元素在窄卡会把已售挤出右缘裁掉(实测溢 16px)→ 卡上隐评分、详情页仍展示评分。
选择器 (0,2,0) 须压过 .b-card__stats > span{inline-flex}(0,1,1) 才生效。 */
.b-card__stats > .b-card__rating { display: none; }
/* 价格 span 同带 .b-card__stat 类、会被 .b-card__stat + ...::before 命中带「·」→ 压掉。 */
.b-card__stats > .b-card__stat.b-card__price::before { content: none; }
.b-card__price {
font-weight: 700;
color: var(--price);
font-size: 14px;
}
/* 形态修饰：免费价标用成功绿、与付费价（accent）区分（card-work.php 输出 --free/--paid 修饰类）。 */
.b-card__price--free { color: var(--success-strong); } /* 亮色 ≥5:1（原 --success #16a34a≈3.30 不达 AA；暗色 --success-strong=#34d399 on 暗底仍达标） */
/* 窄屏 2 列卡：单行 meta（作者 ↔ 数据 space-between）在 ~140-168px 卡身放不下 →
作者被 .b-card__stats(flex-shrink:0) 挤成 0 宽不可见、有评分的卡数据行更撑破被 .b-card{overflow:hidden} 裁掉价格(¥99→¥9)。
≤640 改两行（作者一行 + 数据一行，各占满卡宽）：作者名可见(截断)、数据放不下则换行而非裁切 → 价格永不被裁。修 UI 深审 win02 F-1（影响全站 .b-works-grid）。 */
@media (max-width: 640px) {
.b-card__title { font-size: 13px; } /* 移动端标题小一圈（15→13px），一屏多露几个卡片；line-clamp:2 + min-height(em) 同步缩 */
}
/* meta 两行制扩域到 ≤1024（续8 PC 收尾）：641–1024 平板 3 列卡 ~200-230px，单行
「作者 ↔ ★评分·已售·价格」与 ≤640 同根的两个病都在——作者被 flex-shrink:0 的 stats
挤没、stats 换行后行首悬「·」→ 同一套两行制（作者行 + 数据行 + 价格独占行）覆盖到
3 列网格上限；≥1025 桌面 5 列（续23 拍板 4→5，卡 ~183-280px）——作者名已续19 拍板全局隐藏只留头像、
价格 flex-shrink:0 防裁，单行 meta 实测（续63 GPT 核查 UI-06·1025/1100/1200 三档）不溢出，保持原版式。 */
@media (max-width: 1024px) {
/* 续19: 卡片 meta 同排布局(头像+价格+已售)已提升为全宽通用(见上方 base，PC+移动统一)。
此处只留窄卡专属修：头像+价+已售 在窄卡(~143px)放不下最长组合(头像22+¥99+已售640≈147)→
卡身左右内距 16→12 给 8px、已售不渗右内距；纵向不变。PC 卡宽(~280px)不需要、仍 --s-4。 */
.b-card__body { padding-left: var(--s-3); padding-right: var(--s-3); }
}
/* 卡片右上角 badge */
.b-card__badges {
position: absolute;
top: var(--s-3);
left: var(--s-3);
/* max-width = 卡片宽 − 左缩进：角标尽量排 1 行(窄卡片三枚 ~143px 仍能塞进单行)；
真放不下时由 flex-wrap 整枚换行(配合 .b-badge 的 nowrap+flex-shrink:0，绝不逐字断行)，不溢出卡片。 */
max-width: calc(100% - var(--s-3));
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
z-index: 2;
}
.b-badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 var(--s-2);
border-radius: var(--r-2);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: rgba(0, 0, 0, 0.72);
white-space: nowrap; /* 角标文字永不换行:"付费"/"免费" 整体保持一行,不在窄卡片里逐字断开 */
flex-shrink: 0; /* 角标不被压缩(否则窄卡片里被挤窄 → 文字换行) */
/* V3.10: backdrop-filter 删除 — 个别国产浏览器 ghost 渲染源 */
}
.b-badge--free { background: rgba(20, 118, 56, 0.95); } /* 白字 ≈5.0:1（原 rgba(22,163,74,.92)≈3.30 不达 AA；同 .b-badge--solved 加深手法、明暗皆深底白字、不随主题翻=过封面图恒可读） */
.b-badge--paid { background: rgba(109, 77, 255, 0.92); }
.b-badge--tested { background: rgba(6, 95, 70, 0.95); } /* 「平台实测」绿标（s11 机制①）：深祖母绿区别于 --free 草绿，白字 ≈6:1、明暗恒可读 */
.b-badge--first { background: rgba(146, 64, 14, 0.95); } /* 「首发」徽章（s11 机制⑤）：深琥珀（amber-800），白字 ≈5:1、明暗恒可读 */
/* HOT / NEW 徽章渐变（徽章叠在封面图上、白字须明暗两主题恒可读 → 用主题无关字面量、不随明暗翻，同 .b-badge--free/--solved 手法）:
两停均加深到白字 ≥4.3:1（原 HOT #ff5b8e/--accent#ff8a4c≈2.3-2.9、NEW --success#16a34a/#0ea5b7≈3.0 偏低）;
HOT 保留暖粉→橙身份、NEW 保留绿→青身份。可能未来用 color-mix 重做。 */
.b-badge--hot { background: linear-gradient(135deg, #d6336c, #c2410c); }
.b-badge--new { background: linear-gradient(135deg, #15803d, #0e7490); }
/* 卖家信誉徽章（Core reputation 引擎·档位=守信/优质/金牌·最低档不渲染）：
token 配色（三对都是设计好的「strong on 50」组合）→ 亮/手动暗/系统暗三态自适应；
用在 详情创作者卡 / 创作者卡 / 店铺头（店铺头由 dokan-store.css 放大一号）。 */
.b-rep-chip {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
vertical-align: middle;
}
.b-rep-chip--trusty { background: var(--bg-2); color: var(--ink-1); }
.b-rep-chip--fine { background: var(--brand-50); color: var(--brand); }
.b-rep-chip--gold { background: var(--warning-50); color: var(--warning-strong); }
.b-rep-chip__ic { display: inline-flex; margin-right: 3px; }
.b-rep-chip__ic svg { width: 12px; height: 12px; }
a.b-rep-chip { text-decoration: none; }
a.b-rep-chip:hover { filter: brightness(0.96); }
/* DSR 三排星（天猫店铺评分式·共享渲染器 bumian_theme_dsr_rows_html）：
店铺页信誉档案面板 + 详情页卖家卡两处同款；星条=灰底星上盖按均分宽度裁切的金星。 */
.b-dsr { list-style: none; margin: 0; padding: 0; }
.b-dsr__row { display: flex; align-items: center; gap: var(--s-2); padding: 3px 0; font-size: 13px; }
.b-dsr__label { flex: 0 0 4.5em; color: var(--ink-2); }
.b-dsr__stars { position: relative; display: inline-block; line-height: 1; font-size: 15px; letter-spacing: 1px; }
.b-dsr__base { color: var(--line-strong); }
.b-dsr__fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--gold); }
.b-dsr__num { font-weight: 700; color: var(--ink-0); font-variant-numeric: tabular-nums; }
/* 同行对比箭头（照天猫红涨绿跌的国内习惯；颜色即语义、不借 danger/success 语义 token 名） */
.b-dsr__cmp { font-size: 11px; line-height: 1; }
.b-dsr__cmp--up { color: #d6336c; }
.b-dsr__cmp--down { color: #15803d; }
.b-dsr__cmp--flat { color: var(--ink-4); }
.b-dsr__note { margin: var(--s-2) 0 0; font-size: 12px; color: var(--ink-3); }
.b-dsr__num--na { font-weight: 600; font-size: 12px; color: var(--ink-4); }
/* ============================================================
作品网格 (.b-works-grid) — 插件 shortcode 复用
🔒 LOCKED #5 (DESIGN-LOCKED.md): 作品卡尺寸契约
.b-works-grid 即全站作品卡网格的 master 基准(断点 + 列数 + gap)
原因: 用户红线 — 全站作品卡(任何视口 / 任何位置 / 任何形态)视觉网格统一
适用: 首页 / archive / taxonomy / search / author / 任何作品列表
〔垃圾代码排查批〕首页 8 大类板块(.b-categories)已删,旧「两网格互相同步」
契约随之收敛为本规则单一 master
新作品卡显示必须用 .b-works-grid,不许另起 class
============================================================ */
.b-works-grid {
display: grid;
/* 桌面 ≥1025: 5 列(续23 2026-06-19 用户拍板由 4 → 5)
平板 ≤1024: 3 列
手机 ≤640: 2 列 + gap 缩
极窄屏 ≤360: 保持 2 列(不再降到 1 列)
grid item 默认 min-width: auto,作品卡内 ![]()
min-content 是图片自然宽,
必须用 minmax(0, 1fr) 防 Grid Blowout (Chris Coyier / Ahmad Shadeed 文档) */
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--s-4);
}
@media (max-width: 1024px) {
.b-works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.b-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
}
/* 〔续39〕「相关推荐」rail（分类/搜索/首页 AI 推荐，.b-rail--recommend）≥641(平板/桌面) 收口到 5 = 一整行、
不留 5+1 拖尾单卡；≤640(移动) 不裁剪 → 取满 6（2 列 ×3 行）。与首页 .b-rail 收口同口径，但本规则全局加载
故分类/搜索页(未载 front-page.css)也生效。仅作用于 --recommend rail，不动「大家在看/新人新作」等其它 rail。 */
@media (min-width: 641px) {
.b-rail--recommend .b-works-grid > *:nth-child(n+6) { display: none; }
}
/* ============================================================
关注按钮 (.b-follow-btn) — 创作者关注
自包含组件（不依赖 .b-detail / .b-acct 作用域的 .b-btn），详情页创作者卡 +
Dokan 店铺头共用；全令牌、明暗自动翻。〔续26 用户反馈二次〕**关注钮不刻意加高亮**：与同排「收藏 / TA 的店铺」
的 ghost 钮（透明底、无边框、中性字）完全一致——透明底 + 透明边 + `--ink-2`，hover 才浮出 `--bg-2`；
.is-following=更淡的 `--ink-3`（已完成观感）。全站所有关注钮共用本组件、一处改全改。见 inc/follow.php / assets/js/follow.js。
============================================================ */
.b-follow-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 44px; /* 触控 ≥44（DESIGN-LOCKED §9）。原 32px；--lg 的 40px 也被 min-height 提到 44。修 UI 深审 win06 F1。 */
padding: 0 var(--s-4);
border: 1px solid transparent; /* 〔续26〕无可见边框（与 ghost 收藏钮一致、不刻意高亮）；留 1px 透明保持等高 */
border-radius: var(--r-2);
background: transparent; /* 〔续26〕透明底=和「收藏」同背景 */
color: var(--ink-2); /* 中性字、非品牌色（不抢眼） */
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.b-follow-btn:hover { background: var(--bg-2); border-color: transparent; color: var(--ink-0); }
.b-follow-btn.is-following {
background: transparent;
border-color: transparent;
color: var(--ink-3);
}
.b-follow-btn.is-following:hover { background: var(--bg-2); border-color: transparent; color: var(--ink-1); }
.b-follow-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
/* 大号（店铺头） */
.b-follow-btn--lg { height: 40px; padding: 0 var(--s-6); font-size: 14px; border-radius: var(--r-3); }
/* 〔续27 矢量图标〕关注钮内静态图标 span：默认 plus（关注），.is-following 切到 check（已关注）。
旧版 +/✓ 是 文字前缀(普通钮) 或 ::before content(详情卡)；现统一为按钮内 SVG span，JS 只改 .b-follow-btn__txt
文字、图标 plus↔check 纯 CSS 跟随状态切换（移动端 textContent 不再抹掉图标）。 */
.b-follow-btn__ic { display: inline-flex; align-items: center; }
.b-follow-btn__ic--on { display: none; }
.b-follow-btn.is-following .b-follow-btn__ic--add { display: none; }
.b-follow-btn.is-following .b-follow-btn__ic--on { display: inline-flex; }
/* 〔续26〕勋章图标 .b-badge-ic —— 线条矢量图标 + 按 group 彩色实底圆（白图标，与分类图标同审美）。
尺寸默认 1.5em（随父字号），各处可加自家 class 覆盖（如 b-badge-item__icon）；#fff=恒定身份色上白前景（house style）。 */
.b-badge-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #c99a3f; color: #fff; vertical-align: -0.35em; flex: 0 0 auto; }
.b-badge-ic .b-ic { width: 64%; height: 64%; }
/* 〔美化 2026-07-04·站长选 B 暖金奖章〕勋章图标圆底统一金铜色，不再按 group 绿/蓝/紫/橙/红各异——
原饱和原色圆与米黄胶囊撞色、显土。原分组色留档备恢复：start=var(--success)绿 milestone=var(--info)蓝
streak=var(--brand-solid)紫 quality=var(--warning)橙 social=var(--danger)红。 */
.b-badge-ic--start,
.b-badge-ic--milestone,
.b-badge-ic--streak,
.b-badge-ic--quality,
.b-badge-ic--social { background: #c99a3f; }
/* 暗色：金铜提亮一档，暗底上更精神（白图标对比不变）。 */
[data-theme="dark"] .b-badge-ic { background: #d4a24a; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .b-badge-ic { background: #d4a24a; }
}
/* ============================================================
空态 (.b-empty-state) — 无数据也要"像有数据一样美"
============================================================ */
.b-empty-state {
padding: var(--s-6) var(--s-5); /* 批46:通用空态内距 48→24 */
text-align: center;
background: var(--bg-0);
border: 1px dashed var(--line-strong);
border-radius: var(--r-4);
}
.b-empty-state__icon {
font-size: 40px;
margin-bottom: var(--s-3);
opacity: 0.85;
}
.b-empty-state__title {
font-size: 16px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 var(--s-2);
}
.b-empty-state__text {
color: var(--ink-3);
font-size: 14px;
margin: 0 0 var(--s-4);
}
/* ============================================================
分页 — WP 原生 nav.pagination
============================================================ */
/* —— WP 原生分页（the_posts_pagination → nav.pagination .nav-links，现用于搜索结果作品段）——
续8 审查 O2：原先裸文字链接 9×20px（触控不达标），与商店 .woocommerce-pagination 盒状
分页两套观感 → 对齐成同款盒状胶囊（40px 高、当前页品牌底白字）。 */
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.nav-links .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; min-height: 40px; padding: 0 var(--s-3);
border: 1px solid var(--line-strong); border-radius: var(--r-2);
background: var(--bg-0); color: var(--ink-1);
font-size: 14px; text-decoration: none;
}
.nav-links a.page-numbers:hover { background: var(--bg-2); color: var(--brand); }
.nav-links .page-numbers.current { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: #fff; font-weight: 700; }
.nav-links .page-numbers.dots { border: 0; background: transparent; min-width: auto; color: var(--ink-3); }
.nav-links .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ============================================================
头像
============================================================ */
.b-avatar {
display: inline-block;
width: 32px; height: 32px;
border-radius: var(--r-pill);
background: var(--bg-3);
object-fit: cover;
vertical-align: middle;
}
/* 老内核钉高（0.4.747·X112）：WC 页 `.woocommerce img/.woocommerce-page img{height:auto}`(0,1,1)
压过上条单类高度(0,1,0)；新内核由 base.css aspect-ratio 回正，老内核（vivo/X5 等不认
aspect-ratio）按源图比例塌成椭圆（个人中心资料卡实测 96×52）→ 镜像 WC 选择器优先级(0,2,1)
把高度按本组件 width 同值钉死。数值须与上条 width 一字不差（改任一侧同步另一侧）。 */
.woocommerce img.b-avatar, .woocommerce-page img.b-avatar { height: 32px; }
/* ============================================================
V3.3 触屏 sticky-hover 守护
触摸设备 (hover:none) tap 后 :hover 状态会粘住,
下面把所有"位移/缩放/阴影提升"类的 hover 副作用包裹到
"真正有指针 hover 能力"的设备,触屏上跳过.
============================================================ */
@media (hover: hover) and (pointer: fine) {
.b-card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-2);
border-color: var(--line-strong);
}
/* .b-card:hover .b-card__thumb 的缩放副作用同样移到 @media (hover: hover) 块 */
}
@media (hover: none) {
/* 关掉桌面 :hover 副作用,触屏 tap 不留 ghost 残影 */
.b-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.b-card:hover .b-card__thumb { transform: none; }
}
/* V3.6: :active 缩放副作用守护 —
.b-button:active 的 translateY(1px) 在桌面是好反馈,
触屏 tap 完成后状态会保留几百毫秒,长按拖动选择文字时尤其讨厌。
把它收到 hover-capable 设备,触屏不应用。 */
@media not (hover: hover) {
.b-button:active { transform: none; }
}
/* ============================================================
面包屑（列表 / 归档 / 搜索 / 榜单页通用；详情页用 .b-detail__crumbs 同视觉）
============================================================ */
.b-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-3); font-size: 12.5px; color: var(--ink-3); }
.b-crumbs a { color: var(--ink-3); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.b-crumbs a:hover { color: var(--brand); }
.b-crumbs__sep { color: var(--ink-4); }
/* ============================================================
404 页（站点级，全站加载）
迁自 front-page.css —— 那里只在首页 enqueue，会让 404 裸渲染。
============================================================ */
.b-404 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 60vh; /* 垂直居中：内容不再挤在页顶留大白（GitHub/Stripe 式 404） */
padding-top: var(--s-10);
padding-bottom: var(--s-10);
}
.b-404__code {
font-size: 72px;
font-weight: 800;
background: linear-gradient(120deg, var(--brand), var(--accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
margin-bottom: var(--s-4);
}
.b-404__title {
font-size: 24px;
margin-bottom: var(--s-3);
}
.b-404__text {
color: var(--ink-3);
max-width: 46ch;
margin: 0 auto var(--s-6);
}
.b-404__search {
display: flex;
gap: var(--s-2);
justify-content: center;
max-width: 460px;
margin: 0 auto var(--s-6);
}
.b-404__search-input {
flex: 1 1 auto;
min-width: 0;
height: 44px;
padding: 0 var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--bg-0);
color: var(--ink-0);
font-size: 15px;
}
.b-404__search-input:focus {
outline: none;
border-color: var(--brand);
}
.b-404__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-3);
justify-content: center;
}
.b-404__links a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px; /* 触控 ≥44（DESIGN-LOCKED §9）。原 ~41px。修 UI 深审 win10 F-1。 */
padding: 8px 16px;
border-radius: var(--r-pill);
background: var(--bg-1);
border: 1px solid var(--line);
color: var(--ink-1);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.b-404__links a:hover {
border-color: var(--brand);
color: var(--brand);
}
/* ============================================================
跨页复用的卡片部件（站点级，全站加载）
迁自 front-page.css / qa.css —— 这些部件出现在 商店/分类/搜索/账户/店铺/首页问答区
等不加载那两个单页样式表的页面，放回全站加载的 components.css 才不掉色 / 掉分隔符。
============================================================ */
/* —— 作品卡：单条 stat + 中点分隔 + 评分金色 + 收藏/已售（迁自 front-page.css）—— */
.b-card__stat {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
.b-card__stat + .b-card__stat::before,
.b-card__stat + .b-card__price::before {
content: "·";
margin: 0 6px;
color: var(--ink-4);
font-weight: 700;
}
.b-card__stats > .b-card__stat ~ .b-card__price { font-weight: 700; }
.b-card__rating { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-card__rating > span[aria-hidden] { font-size: 13px; line-height: 1; margin-right: 1px; }
.b-card__fav, .b-card__sold { color: var(--ink-3); }
/* —— 问答卡：解决状态徽章 + 分类 chip + 回答数（迁自 qa.css，首页问答区也复用）—— */
.b-badge--solved { background: rgba(20, 118, 56, 0.95); } /* 加深(原 #16a34a≈3.3:1)→白字 ≈5.0:1（明暗皆深底白字、不随主题翻=自包含） */
.b-badge--unsolved { background: rgba(180, 83, 9, 0.95); } /* 加深(原 #d97706≈2.9:1)→白字 ≈4.6:1 */
/* 亮色达 AA（原 --success≈3.30） */
/* ============================================================
内容举报：入口按钮 + 模态框（详情页 + 问答页等共用 → 放全站 components，
避免锁在 woocommerce.css 致问答单页举报弹窗裸样式 = 404同类）。
详情页版位见 woocommerce.css .b-detail__report；问答页版位见 qa.css .b-qa-report。
============================================================ */
.b-report-trigger {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 5px;
margin: var(--s-5) auto 0; /* 批46:举报触发外距 32→20 */
padding: 0;
border: 0;
background: none;
color: var(--ink-4);
font-size: 12px;
cursor: pointer;
transition: color var(--dur-1) var(--ease);
}
.b-report-trigger:hover { color: var(--danger); }
.b-report-trigger__icon { font-size: 12px; line-height: 1; }
.b-report-dialog {
width: min(440px, calc(100vw - 32px));
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-4);
background: var(--bg-0);
color: var(--ink-1);
box-shadow: var(--sh-3);
}
.b-report-dialog::backdrop {
background: rgba(20, 20, 36, 0.5);
}
.b-report-form {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin: 0;
padding: var(--s-6);
}
.b-report-form__title { margin: 0 0 var(--s-1); font-size: 18px; font-weight: 800; color: var(--ink-0); }
.b-report-form__label { margin-bottom: -4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.b-report-form__select,
.b-report-form__textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--r-3);
background: var(--bg-1);
color: var(--ink-0);
font: inherit;
font-size: 14px;
}
.b-report-form__select:focus,
.b-report-form__textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-50);
outline: none;
}
.b-report-form__textarea { min-height: 72px; resize: vertical; }
.b-report-form__guest { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.b-report-form__msg { margin: 0; min-height: 18px; font-size: 13px; }
.b-report-form__msg.is-ok { color: var(--success-strong); }
.b-report-form__msg.is-err { color: var(--danger-strong); }
.b-report-form__actions { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); }
.b-report-form__actions .b-button--ghost {
background: var(--bg-2);
color: var(--ink-1);
box-shadow: none;
}
.b-report-form__actions .b-button--ghost:hover { background: var(--bg-3); }
/* ============================================================
创作者打赏（路径A·收款码弹层）—— 详情页/店铺页打赏按钮 +