/* ============================================================
   前台商城 · iOS 液态玻璃（复用会员中心 _glass.css 令牌，日夜自适应）
   仅样式层：布局栅格沿用 bootstrap；组件类与旧版一致，行为不变。
   ============================================================ */

/* ---------- 基底 / 背景 ---------- */
/* 默认背景 = 纯净纯白，暗色主题给中性深灰。
   模板里只在「后台填了非默认背景图」时才输出 inline background-image，见
   Index/Header.html、Common/Header.html、Authentication/Header.html 的 body 标签。
   这样既保留了后台换背景图的能力，又不给默认状态挂 229KB 的花哨图片。 */
html {
    background-color: #ffffff;
}

body.uc-body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    color: var(--uc-ink);
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
    background-color: #14171c;
}

:root[data-theme="dark"] body.uc-body {
    background-color: #14171c;
}

body.uc-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .24) 42%, rgba(255, 255, 255, .42) 100%);
}

:root[data-theme="dark"] body.uc-body::before {
    background: linear-gradient(180deg, rgba(8, 10, 16, .54) 0, rgba(8, 10, 16, .46) 42%, rgba(8, 10, 16, .62) 100%);
}

/* 只给「内容容器」定位以压在 ::before 遮罩之上；绝不用 `body.uc-body > *`——
   那会把 position:fixed 的抽屉/遮罩/全局加载层一起改成 relative，令其错位/失效。 */
.uc-topbar,
#pjax-container,
body.uc-body > footer {
    position: relative;
}

/* 主体宽度对齐老手村（www.laoshoucun.com）：
   实测老手村首页内容容器 `.lsc-home .wrap` = max-width 1200px、卡片左右各距视口 120px。
   本主题的 .container 自带 12px 内边距，所以这里写 1224 = 12 + 1200 + 12，
   让**卡片实际内容区**正好 1200px、左右边缘落在 120px —— 与老手村逐像素对齐。
 
   ⛔ 别再改回 1180：那样卡片只有 1156px，比老手村窄 44px。
   顶栏 `.uc-topbar__inner` 同为 1200，两条左边缘才对得齐。 */
.container {
    max-width: 1224px;
}

main.container {
    padding-top: 22px;
    padding-bottom: 48px;
}

a {
    text-decoration: none;
}

/* ---------- 悬浮胶囊导航 ---------- */
.uc-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    /* 左右 12px = .container 同款内边距：窄屏（<1232px）时顶栏与内容卡片左右边缘才不会差 4px；
       宽屏时两者都由 max-width:1200px 定宽，本来就对齐 */
    padding: 14px 12px 4px;
}

/* 顶栏内层与主体同宽（1200）：这样顶栏胶囊左右边缘正好压在内容卡片边缘上。
   老手村顶栏本身略宽（1236 + 18px 内边距，内容也是 1200），我们直接取 1200 更干净。 */
.uc-topbar__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.shop-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 14px;
    /* 圆角从 999px（胶囊）收成 16px（玻璃卡片同款 --glass-radius）——
 */
    border-radius: 16px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-hi);
}

.shop-brand {
    display: flex;
    align-items: center;
    gap: 9px;
 /* 不伸缩、不占位 → 菜单栏紧随其后靠左（：
       「首页啊，这样菜单是不是要靠近 logo」，菜单不再居中） */
    flex: 0 0 auto;
    min-width: 0;
    color: var(--uc-ink);
    font-weight: 700;
    font-size: 16px;
    padding-right: 4px;
}

.shop-brand img {
 /* 指令：「logo，稍微宽点，高点」→ 30×30 改 36×36；
       随即「logo再稍微大点」→ 36×36 再改 **40×40**（圆角同步 9→10→11 保持比例）。
       源图是 256×256（www/favicon.ico 实为 PNG，只是扩展名叫 .ico），放大不会糊。
       顶栏高 60px，40 的 logo 上下各留 10px（手机顶栏 56px ⇒ 上下各 8px），不撑高。
       ⛔ 宽高必须同步改：这是正方形图标，只改一边会把它拉变形（object-fit:cover 会裁切）。
       ⛔ 别超 44px：顶栏 60/手机 56，再大就要顶高顶栏（闸门 check-nav-brand-size.sh 只卡下限 32）。 */
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
}

.shop-brand__name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-nav__list {
    display: flex;
    align-items: center;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
 /* 靠左贴住 logo。
 ⛔ 夜从 `flex: 0 0 auto` 改成 `0 1 auto`：
       给菜单图标加了 26px 容器后整条菜单宽了 57px（558→615），实测登录态
       （用户名 + 余额 + 头像 ≈ 259px）在 1013px 顶栏宽度下才装得下 —— 硬撑会把右侧区
       顶出顶栏（960px 时右边缘到 1016，而 nav 只到 948）。
       现在允许收缩 + 横向滚动：空间够时表现与原来完全一致（basis auto），
       空间不够时菜单自己横滑，右侧区永远待在顶栏里。 */
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
 /* 与 logo 的间距（：「跟logo 的间隔稍等拉开点。靠的太近了」
       → 随即又「菜单离logo距离再远点」）。
       这段距离 ≈ .shop-brand padding-right(4) + 本 margin-left ⇒ 实测
       logo 右缘 → 第 1 个菜单项左缘：4px ⇒ 14px ⇒ **24px** ⇒ **现 22px = 实测 32px**。
       ⛔ 要调就只调这一个值（probe-nav-align.js 的 gapBrandToMenu 直接量它）。
       ⚠️ 这个值每加 1px，整条顶栏需求宽度也 +1px —— 加完必须跑 probe-nav-align.js
          看 hasHScroll，并跑 probe-brand-menu-size.js 在 **881px**（紧邻 880 断点）看菜单有没有被裁。 */
    margin-left: 22px;
}

.shop-nav__list::-webkit-scrollbar {
    display: none;
}

.shop-nav__list > li {
    display: flex;
    /* ⛔ 坑 33：列表可收缩后，子项若默认可收缩会被压扁、文字换行成竖排 */
    flex: 0 0 auto;
}

/* 菜单横向溢出提示：
   菜单可收缩后，窄窗口下会被裁成"半截菜单"，没有提示就像坏了。
   下面这套渐隐**只在真溢出时**生效 —— 由 Header.html 的 syncNavFade() 按
   scrollWidth/clientWidth 与 scrollLeft 挂 is-fade-l / is-fade-r / is-fade-both，
   不溢出时一个 class 都不挂（不溢出还遮右边 = 把最后一项啃掉）。
   ⛔ 别改成无条件 mask（改前手机端就是无条件的，宽一点的手机屏会误遮）。
   ⛔ 渐隐宽度用 --nav-fade-w（JS 按实际溢出量给，封顶 22px）：只溢出 8px 却糊 22px，
      最后一项还是被啃掉一截。 */
.shop-nav__list.is-fade-r {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--nav-fade-w, 22px)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--nav-fade-w, 22px)), transparent 100%);
}

.shop-nav__list.is-fade-l {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-w, 22px), #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-w, 22px), #000 100%);
}

.shop-nav__list.is-fade-both {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-w, 22px), #000 calc(100% - var(--nav-fade-w, 22px)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-w, 22px), #000 calc(100% - var(--nav-fade-w, 22px)), transparent 100%);
}

.shop-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    /* 跟顶栏一起收圆角（10px），不再用 999px 药丸 —— 顶栏已不是胶囊，药丸会显得跳 */
    border-radius: 10px;
    color: var(--uc-ink-med);
 /* ⇒ 14 → 15px。
       ⛔ 手机端是**另一处**（文件末尾 @media ≤880px 段），改这里不影响手机，
          两处必须一起改（或都别改），否则两端字号不一致（同步闸门见 probe-brand-menu-size.js）。 */
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .16s, color .16s;
}

/* -------- 菜单图标「26px 浅色圆角底 + 同色图标」小方块 ---------- */
/* ⛔⛔ **已停用**：明确「手机版和电脑版菜单栏，前面不要图标」
   ⇒ Header.html 里 5 个菜单项的 <i> 已**全部删除**，本段规则现在**匹配不到任何元素**。
 ⛔ 别再因为「看着有点杂乱」就把图标加回来 —— 要的是**压根没有图标**
 下面这套"加容器统一样式"是当时的误判（他要的是去掉，不是统一）。
   ✅ 本段**故意保留**：将来若要回退，只在 Header.html 的菜单项里把 <i> 补回去即可，
      样式不用重写（手机端 / 深色主题的覆盖块下面都有，同理保留）。
 原设计说明（存档）
   实测根因（探针 probe-nav-icons.js）：5 个图标先前是"裸"的，FontAwesome 各图标
   实际渲染宽度 11 / 15 / 15 / 15 / 17px 不等（极差 6px），而图标与文字的 gap 是固定 6px
   ⇒ 图标到文字的距离忽远忽近，五个排一起就成了"杂乱"。
   处理：给图标一个固定 26px 宽的容器 + 淡色圆底，用"框"把形状/重量差异统一掉；
   底色与图标色都从 --tool-accent 派生 ⇒ 同时跟工具页页头 /「全部工具」卡片图标
   （rgba(accent,.12) 底 + accent 图标）变成同一套视觉语言，上下呼应。
   ⛔ 别写死颜色：--tool-accent 只挂在有 data-tool 的项上，「首页」项自动回落到主色。
   ⛔⛔ 选择器必须带 `.shop-nav__list` 前缀（实测踩坑 39）：`_.css` 里有
      `.fa-duotone.fa-regular, .fadr { color: inherit }` —— 特异性 (0,2,0)，
      而 `.shop-nav__item i` 只有 (0,1,1) ⇒ 图标 color 被它按成"继承"，继承到父级的
      --uc-ink-med 灰色，底是彩的、图标却是灰的。（旧写法 `.shop-nav__item[data-tool] i`
      是 (0,2,1) 才恰好压得住；简化时必须补回同等或更高的特异性。） */
.shop-nav__list .shop-nav__item i,
.shop-nav__list .shop-nav__item .nav-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    background: rgba(var(--tool-accent, var(--md-primary-rgb)), .12);
    color: rgb(var(--tool-accent, var(--md-primary-rgb)));
    transition: background .16s;
}

.shop-nav__list .shop-nav__item:hover i {
    background: rgba(var(--tool-accent, var(--md-primary-rgb)), .20);
}

.shop-nav__item:hover {
    color: var(--uc-ink);
    background: rgba(var(--md-primary-rgb), .08);
}

/* 当前页高亮「改淡」：
   原来是实心深墨底（#1f2733）+ 白字 + 投影，视觉上是一块黑疙瘩；
   现在改成淡底 + 深字 + 一圈极淡描边 —— 仍然一眼看得出当前页，但不抢镜 */
.shop-nav__item.active {
    color: var(--uc-ink);
    background: rgba(var(--md-primary-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--md-primary-rgb), .16);
}

/* 搜索 */
.shop-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 6px;
}

.shop-search__box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--uc-field-bg);
    border: 1px solid var(--glass-border-soft);
    color: var(--uc-ink-med);
    transition: border-color .16s, box-shadow .16s;
}

.shop-search__box:focus-within {
    border-color: var(--uc-focus);
    box-shadow: 0 0 0 3px rgba(var(--uc-focus-rgb), .18);
}

.shop-search__box i {
    font-size: 15px;
    flex: 0 0 auto;
}

.shop-search__box input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--uc-ink);
    font-size: 14px;
}

.shop-search__box input::placeholder {
    color: var(--uc-ink-dis);
}

.shop-nav__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
 /* 菜单改为靠左后，右侧按钮用 margin-left:auto 顶到最右；
       原来那套「与 .shop-brand 对称的 1fr」是为了让菜单居中，已不需要 */
    flex: 0 0 auto;
    margin-left: auto;
}

/* 圆形工具按钮（主题 / 语言 / 铃铛） */
.shop-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--uc-ink-med);
    background: transparent;
    transition: background .16s, color .16s;
}

.shop-icon-btn:hover {
    color: var(--uc-ink);
    background: rgba(var(--md-primary-rgb), .1);
}

.shop-icon-btn .material-icons-outlined {
    font-size: 21px;
}

.shop-icon-btn i {
    font-size: 17px;
}

/* 语言下拉 */
.shop-lang {
    position: relative;
}

.shop-lang__menu,
.shop-user__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 176px;
    padding: 8px;
    border-radius: 16px;
    /* 菜单要不透明，否则背后的面板/背景会透出来把选项冲淡（iOS 菜单是磨砂但可读的实底） */
    background: rgba(252, 252, 253, 0.97);
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 320;
}

:root[data-theme="dark"] .shop-lang__menu,
:root[data-theme="dark"] .shop-user__menu {
    background: rgba(32, 36, 45, 0.97);
}

.shop-lang.is-open .shop-lang__menu,
.shop-user.is-open .shop-user__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shop-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--uc-ink);
    font-size: 13.5px;
    cursor: pointer;
}

.shop-menu__item i,
.shop-menu__item .material-icons-outlined {
    font-size: 18px;
    color: var(--uc-ink-dis);
}

.shop-menu__item:hover {
    background: rgba(var(--md-primary-rgb), .1);
}

.shop-menu__item.is-danger {
    color: #e05656;
}

.shop-menu__item.is-danger i {
    color: #e05656;
}

.shop-menu__sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--glass-border-soft);
}

/* 用户胶囊 */
.shop-user {
    position: relative;
}

.shop-user__btn {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 6px 0 14px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(var(--md-primary-rgb), .06);
    color: var(--uc-ink);
    transition: background .16s;
}

.shop-user__btn:hover {
    background: rgba(var(--md-primary-rgb), .12);
}

.shop-user__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.shop-user__name {
    font-size: 13px;
    font-weight: 600;
}

.shop-user__balance {
    font-size: 11px;
    color: var(--uc-ink-dis);
}

.shop-user__balance b {
    color: #1fa971;
    font-weight: 600;
}

.shop-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.shop-auth {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .16s;
}

.shop-btn--ghost {
    color: var(--uc-ink-med);
    border-color: var(--glass-border);
    background: transparent;
}

.shop-btn--ghost:hover {
    color: var(--uc-ink);
    border-color: var(--uc-focus);
}

.shop-btn--primary {
    color: var(--md-on-primary);
    background: var(--md-primary);
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .28);
}

.shop-btn--primary:hover {
    filter: brightness(1.06);
}

/* 汉堡 + 抽屉（窄屏 / 溢出时收起） */
.shop-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-primary-deep);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.shop-burger .material-icons-outlined {
    font-size: 24px;
}

.shop-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 82%;
    max-width: 320px;
    padding: 18px 14px;
    overflow-y: auto;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    border-right: 1px solid var(--glass-border);
    transform: translateX(-104%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    display: none;
}

.shop-drawer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: var(--uc-ink);
    padding: 6px 8px 16px;
}

.shop-drawer__brand img {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.shop-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    color: var(--uc-ink);
    font-size: 14.5px;
    font-weight: 500;
}

.shop-drawer__link i {
    font-size: 18px;
    color: var(--uc-ink-dis);
    width: 20px;
    text-align: center;
}

.shop-drawer__link.active {
    background: rgba(var(--md-primary-rgb), .14);
    color: var(--uc-primary-deep);
}

.shop-drawer__shade {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(20, 22, 30, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
    display: none;
}

body.shop-drawer-open .shop-drawer {
    transform: translateX(0);
}

body.shop-drawer-open .shop-drawer__shade {
    opacity: 1;
    visibility: visible;
}

/* 收起模式：窄屏或内容放不下时（英文长标签），收进汉堡抽屉 */
html.shop-compact .shop-nav__list,
html.shop-compact .shop-search,
html.shop-compact .shop-auth {
    display: none !important;
}

html.shop-compact .shop-burger {
    display: inline-flex;
}

html.shop-compact .shop-drawer,
html.shop-compact .shop-drawer__shade {
    display: block;
}

html.shop-compact .shop-nav__right {
    margin-left: auto;
}

/* ---------- 面板（公告 / 购买 等） ---------- */
.panel {
    position: relative;
 /* 圆角 20 → 14：「这个背景区块也难看，还有极速（极其）圆角」。
       20px 落在 1180px 宽的白卡上确实过圆。与 .faka-entry 同步（两张卡上下相邻，必须一致）。
       ⛔ .panel 是全站共用（首页 3 块 + 商品详情 / 订单查询 / 工具页），这里一改全站同步。 */
    border-radius: 14px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-hi);
    overflow: hidden;
}

.panel + .panel {
    margin-top: 18px;
}

/* 订单查询页：结果/无结果/加载面板包在这些容器里，不是「订单查询」面板的相邻兄弟，
   吃不到上面的 `.panel + .panel` 间距，会和上面面板贴在一起。给容器补同样的顶距。 */
.order-results,
.no-results,
.loading-state {
    margin-top: 18px;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
 /* 「这个背景区块也难看」→ 采用「标题条 + 内容分离」：
       标题不再是裸挂在卡片里的一行，而是带浅色底 + 底边线的一条通栏，与内容区切开。
       ⛔ .panel-header 全站共用（首页 3 块 / 商品详情 / 订单查询 / 工具页），一改全站同步。
       ⛔ 背景色走 --md-primary-rgb 混色，明暗两套主题自动翻转，别写死。 */
    padding: 12px 20px;
    background: rgba(var(--md-primary-rgb), .05);
    border-bottom: 1px solid var(--glass-border-soft);
}

.panel-header .icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-primary-deep);
    font-size: 15px;
}

.panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--uc-ink);
}

.panel-body {
    padding: 16px 20px 20px;
    color: var(--uc-ink-med);
    line-height: 1.8;
    font-size: 14px;
}

.panel-body img {
    max-width: 100%;
    border-radius: 12px;
}

/* ---------- 分类 Chip ---------- */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* 「这个分类显示效果真是巨丑无比，还有其它没有选中的分类
   感觉跟没有一样」→ 整段重做。两个病根（浅色主题下最明显）：
     ① **未选中**：底色 `--uc-field-bg` = rgba(255,255,255,.55)、边框
        `--glass-border-soft` = rgba(255,255,255,.40) —— 在白色玻璃卡片上
        「白叠白」，胶囊边界完全消失；字色又是 `--uc-ink-med`（中灰）⇒
        整排看起来像没渲染出来。
     ② **选中**：`background: var(--md-primary)`，而本站主色是 **#1f2733（近黑）**
        ⇒ 36px 高的纯黑胶囊 + 一圈投影，夹在一排浅色小胶囊中间又重又闷。
   现在：未选中给**看得见的中性描边 + 深字**（--uc-ink）；选中改成
   **主色淡底 + 主色实边 + 深字加粗**，不再铺实底。
   ⛔ 颜色一律写 rgba(var(--md-primary-rgb), α)：浅色下 rgb=31,39,51（深），
      深色下 rgb=232,234,237（浅），两套主题自动成立 —— 别写死色值，
      也别引 var(--md-primary-hover)（本站根本没有这个变量，写了整条声明失效）。
   ⛔ 高度从 36 → 33px、padding 14 → 15px：桌面稍微收精神一点；
      手机端另有一档更小的覆盖，见下方 ≤768px 段。 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 33px;
    padding: 0 15px;
 /* 原 999px 全圆角（胶囊形）
       改成 6px 小圆角矩形（近乎方角，但边缘不割手）。⛔ 别改回 999px。 */
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--uc-ink);
    background: var(--uc-field-bg);
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    cursor: pointer;
    transition: color .16s, background-color .16s, border-color .16s;
    white-space: nowrap;
}

.chip:hover {
    color: var(--uc-ink);
    background: rgba(var(--md-primary-rgb), .06);
    border-color: rgba(var(--md-primary-rgb), .30);
}

/* 选中态：淡底 + 实边 + 加粗。⛔ 故意不用实底主色（近黑），那是「巨丑」的来源。 */
.chip.is-primary {
    color: var(--uc-ink);
    background: rgba(var(--md-primary-rgb), .12);
    border-color: rgba(var(--md-primary-rgb), .55);
    font-weight: 600;
    box-shadow: none;
}

/* 分类首字母徽标。
 原来这里读分类的 icon 字段当背景图，而该字段被填成了 /favicon.ico
   （站点 logo），缩进 18px 小方块又糊又花。改为分类名首字（模板里 truncate:1 取），
   不再引用 icon 字段；后台那个图标字段对首页分类 chip 不再生效。
   ⛔ 颜色全部走主题变量，别写死色值（浅色/深色两套主题共用这一段）。 */
.chip .chip-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-ink);
    transition: background-color .16s, color .16s;
}

.chip:hover .chip-icon {
    background: rgba(var(--md-primary-rgb), .16);
}

/* ⛔ 必须写在 .chip:hover 之后：两者特异性同为 (0,3,0)，后写的才赢。
   底色用 md-on-primary 半透明，白底主题=白字透白、深色主题=深字透深，两套主题都读得清。 */
.chip.is-primary .chip-icon {
    background: color-mix(in srgb, var(--md-on-primary) 22%, transparent);
    color: var(--md-on-primary);
}

/* 单分类时的「标题右侧小徽章」。
 「这个分类放这里还是很难看」→ 选「A+B 组合」：
   分类 ≤1 个时它没得可切，独占一行纯属占位，缩成标题行右侧的小徽章（.panel-header 内）。
   ⛔ 它仍是 <a class="switch-category chip ...">，index.js 照常能取到初始分类。
   ⛔ margin-left:auto 负责把它推到标题行最右（.panel-header 是 flex）。
   尺寸比正常 chip 小一圈（28px/12px），选中态不铺满主色、只留淡底，避免抢标题。 */
.panel-header .chip--badge {
    margin-left: auto;
    height: 28px;
    padding: 0 11px;
    gap: 6px;
    font-size: 12px;
 /* 与普通 chip 统一为 6px 小圆角 */
    border-radius: 6px;
    background: rgba(var(--md-primary-rgb), .08);
    border-color: transparent;
    color: var(--uc-ink-med);
    box-shadow: none;
    /* 唯一分类时它没得可切 ⇒ 视觉上当「静态铭牌」处理，不给手型光标、不做 hover 反馈
       （真给回手的错觉，点了却什么都没变，反而显得坏）。它仍是 <a>，JS 兜底照常能取到 data-id。 */
    cursor: default;
}

.panel-header .chip--badge .chip-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 10px;
    background: rgba(var(--md-primary-rgb), .12);
    color: var(--uc-ink);
}

.panel-header .chip--badge.is-primary .chip-icon {
    background: rgba(var(--md-primary-rgb), .16);
    color: var(--uc-primary-deep);
}

/* 选中态（唯一分类必然是 primary）：只做「略深一点点的淡底 + 深字」，
   不再用 md-primary 实底，否则一个小徽章顶着一块黑，比原来还突兀。
   ⛔ 必须写在 .chip.is-primary 之后（特异性 .panel-header .chip--badge.is-primary (0,3,0)
   高于 .chip.is-primary (0,2,0)，本可不管顺序；但为防日后合并样式，仍放后面）。 */
.panel-header .chip--badge.is-primary {
    background: rgba(var(--md-primary-rgb), .12);
    color: var(--uc-primary-deep);
    border-color: transparent;
    box-shadow: none;
}

/* 静态铭牌：不做 hover 反馈（它没得可切，给反馈=骗人）。 */
.panel-header .chip--badge:hover {
    background: rgba(var(--md-primary-rgb), .08);
    border-color: transparent;
    color: var(--uc-ink-med);
}

.panel-header .chip--badge.is-primary:hover {
    background: rgba(var(--md-primary-rgb), .12);
    color: var(--uc-primary-deep);
}

/* 手机端分类胶囊—— 「这个手机版的分类显示，也是巨丑无比」。
   三个成因：① 首字母方块徽标每个吃掉 25px（18 宽 + 7 gap）→ 已从模板摘掉 DOM；
   ② `.uc-main`(20px) + `.panel-body`(20px) 两层横向内边距叠起来，390px 屏上
      内容区只剩 ~308px，5 个胶囊被迫折成 3 行；③ 胶囊本体 36px 高偏笨。
   ⇒ 这里在手机端把首页「账号购买」这块的内边距和胶囊尺寸收一档。
   ⛔⛔ 只限定 `.faka-goods`（首页账号购买块的专属钩子）：**绝不能直接改
   `.panel-body` / `.panel-header` 本体** —— 那是商品详情 / 订单查询 / 工具页共用的，
   改一处会漫到全站。`faka-goods` 这个类动不得（见模板注释）。
   ⛔ 选择器特异性 (0,2,0) 高于基础 `.chip` (0,1,0)，无论顺序都赢。 */
@media (max-width: 768px) {
    .faka-goods .panel-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .faka-goods .panel-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .faka-goods .chip-list {
        gap: 7px;
        margin-bottom: 13px;
    }

    .faka-goods .chip {
        height: 30px;
        padding: 0 12px;
        font-size: 12.5px;
    }
}

/* ---------- 商品网格 ----------
   小卡密集：手机 2 列、平板 3 列、桌面 5 列，卡片 1fr 铺满整行、列间距 10px。 */
.item-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    /* bootstrap `.row` 自带 -.5gutter 的负左右外边距（本靠 cell padding 抵销）。
       下面清掉 cell padding 后，这负边距会让最左/右的卡片凸出容器、与上方分类不对齐——一并归零。 */
    margin-left: 0;
    margin-right: 0;
}

/* .item-list 带了 bootstrap 的 `row` class，格子会吃到 `.row>*` 的左右 gutter padding
   （calc(var(--bs-gutter-x)*.5)），这才是商品卡「左右间距偏大」的真凶。强制清零，
   卡片之间只留上面的 grid gap；配合上面 margin 归零，最左卡片即与分类/标题左缘对齐。 */
.item-list > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .item-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .item-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .item-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.item-list .item-message {
    grid-column: 1 / -1;
    color: var(--uc-ink-dis);
    font-size: 14px;
    padding: 18px 4px;
}

.item-card-cell {
    display: block;
    color: inherit;
}

.acg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    box-shadow: 0 4px 16px rgba(31, 45, 70, .07);
    overflow: hidden;
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s, border-color .18s;
}

.item-card-cell:hover .acg-card {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-lg);
    border-color: var(--glass-border);
}

.acg-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: rgba(var(--md-primary-rgb), .06);
}

.acg-card > .acg-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 6px 11px 8px;
    gap: 4px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.goods-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.28;
    color: var(--uc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stat-row {
    display: flex;
    align-items: baseline;
    margin-top: auto;
}

.price {
    color: #f0435f;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.price .unit {
    font-size: 12px;
    margin-right: 1px;
}

:root[data-theme="dark"] .price {
    color: #ff8095;
}

.stat-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--uc-ink-dis);
}

.meta {
    font-size: 11px;
    color: var(--uc-ink-dis);
}

/* 徽章 */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
}

.badge-soft-primary {
    color: #4c7ef0;
    background: rgba(76, 126, 240, .14);
}

.badge-soft-success {
    color: #1fa971;
    background: rgba(31, 169, 113, .14);
}

.badge-soft-danger {
    color: #e5484d;
    background: rgba(229, 72, 77, .14);
}

.badge-soft-muted {
    color: var(--uc-ink-dis);
    background: rgba(125, 125, 135, .16);
}

.badge-soft-warning {
    color: #d98a00;
    background: rgba(217, 138, 0, .16);
}

.badge-soft-info {
    color: #4c96e0;
    background: rgba(76, 150, 224, .16);
}

.acg-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.acg-tag--red { color: #e5484d; background: rgba(229, 72, 77, .14); }
.acg-tag--blue { color: #4c7ef0; background: rgba(76, 126, 240, .14); }
.acg-tag--green { color: #1fa971; background: rgba(31, 169, 113, .14); }
.acg-tag--orange { color: #d98a00; background: rgba(217, 138, 0, .16); }
.acg-tag--purple { color: #8b5cf6; background: rgba(139, 92, 246, .16); }

.shared-button {
    cursor: pointer;
    transition: filter .15s;
}

.shared-button:hover {
    filter: brightness(1.1);
}

/* 售罄：整卡叠一层深色遮罩压暗。
   契约：用 ::after 盖（z-index 2），不要再退回「降 opacity」——降不透明度是往卡片上混白底，
   视觉上会发白变浅；要「更深」只能往卡片上叠深色，方向相反。 */
.acg-card.soldout {
    filter: grayscale(.35);
}

.acg-card.soldout::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(15, 20, 30, .40);
    pointer-events: none;
    z-index: 2;
}

.item-card-cell:has(.soldout) {
    cursor: not-allowed;
}

.soldout-ribbon {
    position: absolute;
    z-index: 3; /* 必须高于 .acg-card.soldout::after(2)，否则缎带被遮罩压暗 */
    top: 10px;
    right: -30px;
    transform: rotate(45deg);
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 34px;
    box-shadow: 0 4px 12px rgba(229, 72, 77, .4);
}

/* ---------- 商品详情页 ---------- */
.acg-cover {
    border-radius: 18px;
    overflow: hidden;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
}

.item-cover {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
}

.item-detail .panel-body :is(h1, h2, h3, h4, h5, h6) {
    color: var(--uc-ink);
}

h4 {
    color: var(--uc-ink);
    font-weight: 700;
}

.abacus .price {
    font-size: 26px;
}

.sku-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sku {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--uc-ink-med);
    background: var(--uc-field-bg);
    border: 1px solid var(--glass-border-soft);
    cursor: pointer;
    transition: all .16s;
}

.sku:hover {
    border-color: var(--uc-focus);
    color: var(--uc-ink);
}

.sku.is-primary {
    color: var(--md-on-primary);
    background: var(--md-primary);
    border-color: transparent;
}

.badge-money {
    font-size: 12px;
    opacity: .85;
}

.optional-card {
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px dashed var(--glass-border);
    background: var(--uc-field-bg);
    color: var(--uc-ink-med);
    cursor: pointer;
    font-size: 13.5px;
}

.optional-card:hover {
    border-color: var(--uc-focus);
    color: var(--uc-ink);
}

/* 数量 */
.qty-group {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    border-radius: 12px;
    overflow: hidden;
    /* ⛔ 不能用 `var(--glass-border)` —— 浅色主题下它是 `rgba(255,255,255,.85)`（白），
       压在白色输入框上 = **购买数量那一组完全看不到边框**（和查询密码输入框同一个坑，
 见「商品参数」那次点名的 `references/04` 坑 69）。
       `.22` 的半透明主色在深浅两主题都是「看得见的发丝线」。 */
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    background: var(--uc-field-bg);
}

.qty-group .change-num-sub,
.qty-group .change-num-add {
    width: 38px;
    border: 0;
    background: transparent;
    color: var(--uc-ink-med);
    font-size: 16px;
    cursor: pointer;
}

.qty-group .change-num-sub:hover,
.qty-group .change-num-add:hover {
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-ink);
}

.qty-group .form-control {
    width: 66px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

/* 付款方式 */
/* ⛔ 描边不用 var(--glass-border-soft)：浅色主题下它是白色（rgba(255,255,255,.40)），
   压在浅底上等于没有边框（与坑 69 同源）。统一走主色低透明度。 */
.cash-pay {
    /* ⛔⛔ 支付区 CTA 专用色。
       别用 var(--md-primary) —— 那是玻璃主题的「近黑石板 #1f2733」，按钮/选中态全变黑。
       这里对齐站内已有的强调色：.price 的玫红 #f0435f（dark 用 #ff8095），
       价格、成交播报、支付按钮三处同色，整页才是一套。 */
    --cta: #f0435f;                 /* 文字 / 描边 / 图标（跟随主题明暗） */
    --cta-rgb: 240, 67, 95;
    --cta-a: #f0435f;               /* CTA 按钮渐变起 —— ⛔ 与 --cta 分开：
    --cta-b: #d92b4a;                  深色主题下 --cta 要提亮成 #ff8095 才看得清，
                                       但按钮底若跟着变浅，白字就压不住了（对比度 <3:1）。 */
    border-radius: 14px;
    background: var(--uc-field-bg);
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    margin-top: 14px;               /* 与上方「购买数量」拉开，别贴在一起 */
}

:root[data-theme="dark"] .cash-pay {
    --cta: #ff8095;
    --cta-rgb: 255, 128, 149;
    --cta-a: #e0334d;               /* dark 下按钮压深一档，白字对比 ~4.5:1 */
    --cta-b: #b81f38;
}

/* ---------- 下单卡上段：购买数量（左标签 / 右步进器）----------
   与下面「支付方式」用一条发丝线分隔。
   ⛔ 发丝线别写 var(--glass-border-soft)：浅色主题下它是白色，等于没有线（坑 69 同族）。
   ⛔ 也别写死 rgba(31,45,70,.08) —— 白底上混出 #EDEEF0，1px 线截图/缩放后看不见，
      和参数卡那条是同一个坑（见 references/04 坑 69 / 坑 87）。
      统一 rgba(var(--md-primary-rgb), .22)，与参数卡「参数↔查询密码」分组线同口径。 */
.cash-pay__qty,
.cash-pay__captcha {
    display: flex;
    align-items: center;
    /* ⛔ 左对齐相邻，别写 space-between —— 那会把步进器甩到卡片最右边、
       和「购买数量」四个字隔开一大片空。 */
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgba(var(--md-primary-rgb), .22);
}

:root[data-theme="dark"] .cash-pay__qty,
:root[data-theme="dark"] .cash-pay__captcha {
    border-bottom-color: rgba(255, 255, 255, .10);
}

/* 行标签：与 .cash-pay__label / .form-label 同号同色，三行才是一组 */
.cash-pay__qty-k {
    margin: 0;
    color: var(--uc-ink-med);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* 人机验证只在 trade_captcha=1 的商品出现；父级已是 flex，这里只定宽度 */
.cash-pay__captcha .captcha-group {
    width: 100%;
    max-width: 240px;
}

.pay-list {
    display: grid;
    /* ⛔ 用 auto-fit 不是 auto-fill：auto-fill 会保留空轨道，
 两条渠道时按三列算、右侧留一大片空白（截图可见）；
       auto-fit 会把空轨道折叠，两条就各占一半、一条就占满。 */
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 10px;
}

.pay-list > * {
    cursor: pointer;
}

/* ---------- 表单 / 输入（玻璃化，覆盖 bootstrap 默认） ---------- */
.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--uc-ink-med);
    font-size: 13px;
    font-weight: 500;
}

/* 变量都来自 _glass.css。秋叶原 / 西雅图 / 旧版纽约也加载这份文件却没有 _glass.css：
   不给回退值的话，变量失效 + !important 会把它们的输入框边框和底色整个吃掉 */
.form-control {
    height: 40px;
    border-radius: 11px;
    background: var(--uc-field-bg, transparent) !important;
    /* ⛔ 描边**不能**用 `--glass-border` —— 浅色主题下它是 `rgba(255,255,255,.85)`（白），
 压在纯白页面上等于「输入框没有边框」。直接指出：
       「查询密码输入框怎么没有边框」。下面那个 `rgba(128,128,128,.42)` 兜底才是原意，
       但变量已定义 ⇒ 兜底永不生效。
       正解 = 显式中性半透明（与分类 chip 描边同一口径），深浅两主题都看得见。 */
    border: 1px solid rgba(var(--md-primary-rgb), .22) !important;
    color: var(--uc-ink, inherit) !important;
    box-shadow: none !important;
    transition: border-color .16s, box-shadow .16s;
}

textarea.form-control {
    height: auto;
}

.form-control::placeholder {
    color: var(--uc-ink-dis, rgba(128, 128, 128, .9)) !important;
}

/* ⛔ 
   浏览器原生行为是「**输入第一个字符**才隐藏 placeholder」，光获得焦点不会消失
   —— 之前 placeholder 里塞了一整句说明（「设置查询密码：领取账号 / 找回订单都靠它…」），
   点进去那一大坨还在，看着像"预填好的值"。
   正解 = 纯 CSS：**获得焦点时把 placeholder 变透明**（不用 JS，也不会影响提交值）。 */
.form-control:focus::placeholder {
    color: transparent !important;
}

.form-control:focus {
    border-color: var(--uc-focus, currentColor) !important;
    box-shadow: 0 0 0 3px rgba(var(--uc-focus-rgb, 128, 128, 128), .18) !important;
}

.captcha-img {
    border-radius: 10px;
    cursor: pointer;
    height: 40px;
}

/* 图形验证码：输入框 + 验证码图合成一个玻璃控件——验证码做成嵌在框内右侧的白色小卡片
   （验证码笔画是深色，需要常亮底色，暗色模式也读得清），不再是两个分离的圆角盒子。
   作用域限定在 .captcha-group，不影响查单页等其它 input-group。 */
.captcha-group {
    display: flex;
    align-items: center;
    height: 40px;
    padding-right: 5px;
    border-radius: 11px;
    /* ⛔ 原来是 `var(--glass-border, rgba(128,128,128,.42))`：变量**有定义**（浅色=白），
       兜底永不生效 ⇒ 开了「人机验证」的商品这组框会**没有边框**。同坑 69，别退回。 */
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    background: var(--uc-field-bg, transparent);
    overflow: hidden;
    transition: border-color .16s, box-shadow .16s;
}

.captcha-group:focus-within {
    border-color: var(--uc-focus, currentColor);
    box-shadow: 0 0 0 3px rgba(var(--uc-focus-rgb, 128, 128, 128), .18);
}

/* 输入框交出自己的边框/圆角/底色，由外层容器统一呈现 */
.captcha-group .captcha-input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.captcha-group .input-group-append {
    display: flex;
    align-items: center;
    margin: 0;
}

/* 验证码图：框内白底小卡片，去掉 Bootstrap input-group-text 的灰底/边框/内距 */
.captcha-group .captcha-img {
    display: block;
    height: 30px;
    width: auto;
    padding: 0 5px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 8, 30, .14), inset 0 0 0 1px rgba(10, 8, 30, .06);
    cursor: pointer;
}

.btn-search-query {
    height: 40px;
    padding: 0 22px;
    white-space: nowrap;
    border-radius: 12px;
    border: 0;
    color: var(--md-on-primary);
    background: var(--md-primary);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .28);
}

.btn-search-query:hover {
    filter: brightness(1.06);
    color: var(--md-on-primary);
}

/* 查询页文字 */
.text-muted {
    color: var(--uc-ink-dis) !important;
}

.no-results h6,
.no-results p,
.loading-state p {
    color: var(--uc-ink-dis) !important;
}

/* ---------- 页脚 ---------- */
footer {
    text-align: center;
    padding: 26px 16px 34px;
    color: var(--uc-ink-dis);
    font-size: 12.5px;
}

footer a {
    color: var(--uc-ink-med);
}

/* ---------- 加载遮罩（沿用） ---------- */
.net-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

/* ============================================================
   补齐：JS 动态渲染的组件（付款方式 / 订单查询结果 / 卡密展示）
   —— 这些类由 item.js、query.js 注入，重写样式时要一并玻璃化
   ============================================================ */

/* ---------- 付款方式（item 页 .pay-list .pay） ---------- */
.pay-list .pay {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    /* ⛔ 高度对齐同排邻居：查询密码输入框 / 「购买数量」输入组都是 40px。
       渠道原来 43px（比输入框高 3px，整块看着「一边高一边低」）。 */
    min-height: 40px;
    padding: 7px 12px;
    border-radius: 12px;
    /* ⛔ 底色改成 transparent：原来是 --glass-bg-soft（半透明白）⇒ 白块叠在
       .cash-pay 的浅灰底上，两个渠道像两张贴纸。
       让卡片底色直接透出来，选中态再上色，层次才干净。 */
    background: transparent;
    /* ⛔ 同上：--glass-border-soft 在浅色主题下是白的，渠道按钮会「没有边」。 */
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    color: var(--uc-ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .16s;
}

.pay-list .pay img {
    /* 25px → 20px：图标比文字大一圈显得笨重 */
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.pay-list .pay span {
    color: var(--uc-ink);
}

/* ⛔ 变量一律带 fallback（--cta* 定义在 .cash-pay 上）：.pay-list 在别的页面若不在
   .cash-pay 里，无 fallback 会让整条声明解析失败、hover 直接没反应。 */
.pay-list .pay:hover {
    border-color: rgba(var(--cta-rgb, 240, 67, 95), .40);
    background: rgba(var(--cta-rgb, 240, 67, 95), .06);
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow);
}

.pay-list .pay.selected {
    border-color: transparent;
    background: var(--md-primary);
}

.pay-list .pay.selected span {
    color: var(--md-on-primary);
}

/* ---------- 订单查询结果（query.js .order-item） ---------- */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-item {
    border-radius: 16px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    padding: 18px 20px;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}

.order-item:hover {
    box-shadow: var(--glass-shadow-lg);
    border-color: var(--glass-border);
}

.order-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.order-left {
    flex: 1 1 auto;
    min-width: 0;
}

.order-right {
    flex: 0 0 auto;
    text-align: right;
}

.order-status {
    margin-bottom: 10px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.status-pending,
.status-waiting-shipment {
    color: #d98a00;
    background: rgba(217, 138, 0, .15);
}

.status-paid,
.status-completed,
.status-shipped {
    color: #1fa971;
    background: rgba(31, 169, 113, .15);
}

.status-cancelled {
    color: #e5484d;
    background: rgba(229, 72, 77, .15);
}

.order-basic {
    font-size: 13px;
    color: var(--uc-ink-med);
    line-height: 2;
}

.order-no {
    font-weight: 600;
    color: var(--uc-ink);
}

.payment-dst .payment-method {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
}

.payment-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
}

.order-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.amount-label {
    font-size: 12px;
    color: var(--uc-ink-dis);
}

.amount-value {
    font-size: 20px;
    font-weight: 700;
    color: #f0435f;
    line-height: 1.1;
}

:root[data-theme="dark"] .amount-value {
    color: #ff8095;
}

.goods-section {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border-soft);
}

.goods-thumb {
    flex: 0 0 auto;
}

.goods-image {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(var(--md-primary-rgb), .06);
}

.goods-details {
    flex: 1 1 auto;
    min-width: 0;
}

.goods-name {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--uc-ink);
}

.goods-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.goods-sku {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

/* ---------- 卡密 / 发货区块（已付款订单） ---------- */
.card-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border-soft);
}

.card-title.shipment-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.shipment-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--uc-ink);
}

.shipment-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

.shipment-waiting,
.shipment-pending {
    color: #d98a00;
    background: rgba(217, 138, 0, .16);
}

.shipment-paid,
.shipment-shipped {
    color: #1fa971;
    background: rgba(31, 169, 113, .15);
}

.card-content-no-password {
    margin-top: 6px;
}

.card-display {
    white-space: pre-line;
    word-break: break-all;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--uc-field-bg);
    border: 1px solid var(--glass-border-soft);
    color: var(--uc-ink);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
}

.password-form .input-group,
.card-password-section .input-group {
    display: flex;
    gap: 8px;
}

.card-loading .loading-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    color: var(--uc-ink-med);
    font-size: 13px;
}

/* ---------- 通用主按钮（查看卡密 / 复制 等） ---------- */
.btn-primary,
.view-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: var(--md-on-primary);
    background: var(--md-primary);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .28);
    white-space: nowrap;
}

.btn-primary:hover,
.view-card-btn:hover {
    filter: brightness(1.06);
    color: var(--md-on-primary);
}

/* ---------- 批发价格表 ---------- */
.wholesale-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 12px;
    overflow: hidden;
}

.wholesale-table th,
.wholesale-table td {
    padding: 8px 14px;
    border: 1px solid var(--glass-border-soft);
    color: var(--uc-ink-med);
    text-align: center;
}

.wholesale-table th {
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--uc-ink);
    font-weight: 600;
}

/* ---------- 杂项 ---------- */
.acg-tag--cyan { color: #0891b2; background: rgba(8, 145, 178, .14); }
.acg-tag--gray { color: var(--uc-ink-dis); background: rgba(125, 125, 135, .16); }
.acg-tag--pink { color: #ec4899; background: rgba(236, 72, 153, .14); }

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--uc-ink);
}

.muted {
    color: var(--uc-ink-dis);
}

/* ---------- 全局加载转圈（Loading 组件 .chahuo-ring）玻璃化 ---------- */
/* 仅覆写 CSS 变量 + 给卡片加磨砂，不动核心 loading.js 结构；日夜自适应 */
:root[data-theme] {
    --chahuo-ring-card: var(--glass-bg-strong);
    --chahuo-ring-color: var(--uc-focus);
    --chahuo-ring-rgb: var(--uc-focus-rgb);
    --chahuo-ring-track: rgba(125, 125, 135, .22);
    --chahuo-ring-overlay: rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] {
    --chahuo-ring-overlay: rgba(8, 10, 16, .34);
}

.chahuo-ring-overlay .chahuo-ring {
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg) !important;
}

/* 无商品的分类：置灰 + 不可点击 */
.chip.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--uc-ink-dis);
    background: rgba(125, 125, 135, .1);
    border-color: transparent;
    filter: grayscale(1);
}


/* ---------- 商品详情右栏精修（小而精致，不放大） ---------- */
.item-buy > h4 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0 0 9px;
}

.item-buy .abacus {
    margin: 0 !important;
    min-height: 0;
}

.item-buy .abacus .price {
    font-size: 22px;
    font-weight: 700;
}

.item-buy .abacus .price .unit {
    font-size: 13px;
    font-weight: 700;
    margin-right: 1px;
}

/* 价格与分隔线之间不要太空 */
.buy-divider {
    height: 1px;
    background: var(--glass-border-soft);
    margin: 10px 0 14px;
}

.item-buy form.vstack {
    gap: 12px;
}

.item-buy .form-label {
    font-size: 12.5px;
    margin-bottom: 6px;
}

.cash-pay {
    padding: 11px 13px;
}

/* ⛔ 原来这里有 `.cash-pay > label`（元素选择器，特异性 0,1,1）——它会**永远压过**
   后面文件末尾那条 `.cash-pay__label`（0,1,0），导致标题字号/字重/颜色写了不生效（隐性冲突）。
   已删除，标题样式统一收口到 `.cash-pay__label`。 */

/* ---------- 自选卡密弹窗（自助选号）精修 ---------- */
/* 1) 标题小一点 */
.layui-layer-title {
    font-size: 15px !important;
    height: 40px !important;
    line-height: 40px !important;
}

.layui-layer-title i,
.layui-layer-title .fa-duotone {
    font-size: 15px !important;
}

/* 2) 搜索浮动标签要盖住输入框描边（前台未加载 _glass.js 的 fieldset notch，
   _glass.css 把标签背景设成透明会让描边穿过标签，这里补回实底背景形成缺口） */
:root[data-theme] .table-search .mui-sf__label {
    background: #fff !important;
    padding: 0 6px !important;
}

/* -------- 一句话介绍（晚：已从顶栏移到首页「提货码 / 订单查询」卡片） ---------- */
/* 核心卖点：橘黄突出，**不加粗**（font-weight 400）。
   ⛔ 别把 font-weight 写回 750，也别动颜色（#f57c00 / 暗色 #ffa940）。
   ⛔ 桌面端与手机端共用这一条（无断点覆盖）⇒ 两端自动一致，别给手机端单开覆盖。
   ⚠️ 首页 Index.html 内联 <style> 里还留了一份同值声明（body.is-home .shop-slogan）——
      那只是为绕开线上 index.css 的 12h 强缓存，两份取值必须一致，改这里记得同步改那边。
   文案分两段放同一行：桌面段 = home_slogan（完整），手机段 = home_slogan_mobile（短版），
   纯 CSS 按屏宽互换 —— 见下方 768 断点，不会有「先挤后跳」的闪动。
 ⛔ 顶栏里已经没有这句了，现在只有首页卡片在用。 */
.shop-slogan {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    margin: 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #f57c00;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片内实例：卡片是纵向 flex、宽度充足，这里去掉顶栏那一套「伸缩 / 截断 / 左右外边距」 */
.faka-entry__slogan {
    flex: 0 0 auto;
    margin: 3px 0 1px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.shop-slogan__full {
    display: inline;
}

/* 手机短版：桌面端不显示 */
.shop-slogan__short {
    display: none;
}

:root[data-theme="dark"] .shop-slogan {
    color: #ffa940;
}

/* -------- 顶栏右侧「账号批发」按钮（由「收藏本站」改造） ----------
 ⛔⛔ （截图红箭头指此按钮）：「这个账号批发，默认背景区块也去了
      前面图标你加个颜色啊」
   ⇒ ① **默认态去掉药丸底 + 描边**（只剩图标 + 文字，底改由 hover 才出）
      ② **图标单独上琥珀金**（批发 / 店铺语义），跟 4 个工具色（蓝 / 橙 / 紫 / 绿）拉开
 ⛔ 别把 `border` / `background` 写回默认态 —— 要的就是「没有背景区块」。
      旧值（回退用）：`border: 1px solid rgba(var(--md-primary-rgb), .22)`
                      `background: rgba(var(--md-primary-rgb), .08)`  hover `.16`
                      `Header.html.bak.*_fav-nobg` / `index.css.bak.*_fav-nobg` 是改前整份。
   ⛔ padding 故意保留 0 16px：去掉底之后**按钮宽度与文字位置都不动**，
 只让默认态的方块消失。 */
.shop-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--uc-primary-deep);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s, transform .16s;
}

/* 悬停才给一层淡底做反馈（原来是"默认就有底"）。 */
.shop-fav:hover {
    background: rgba(var(--md-primary-rgb), .08);
    transform: translateY(-1px);
}

/* 图标上色：琥珀金 217,119,6 —— 与 sms 蓝 / mail 橙 / token 紫 / recharge 绿都不撞。
   要换色只改这两个值（浅色 / 深色各一个）。
   ⛔⛔ 选择器必须是 `i.fa-duotone`（两个类 ⇒ 特异性 0,2,1），**不能**只写 `.shop-fav i`（0,1,1）：
   `assets/common/css/_.css` 里 FontAwesome 自带一条
       `.fa-duotone.fa-regular, .fadr { color: inherit }`   ← 特异性 0,2,0
   会把它**静默压掉** —— 规则在样式表里、解析也正常、`cssRules` 里查得到，
 就是 computed color 一直等于按钮文字色（实测踩过，探针跑就报 ② false）。
   （坑 53 记的就是这一条；同一家族根因见坑 35「@media 不增加特异性」。
     判据：闸门 `scripts/check-fav-btn.sh` + 探针 `scripts/probe-fav-btn.js`。）
   另：本图标 `--fa-primary-color` 为空 ⇒ duotone 伪元素走 currentColor，
       所以**只改 i 的 color 就够**，不用单独喂 FA 变量。 */
.shop-fav i.fa-duotone {
    color: #d97706;
}

:root[data-theme="dark"] .shop-fav i.fa-duotone {
    color: #fbbf24;
}

/* 字号这条没被 FA 压（FA 不动 font-size），所以留在低特异性选择器上即可。 */
.shop-fav i {
    font-size: 15px;
}

/* ---------- 首页：成交播报（提货码区块下方）---------- */
.faka-sold .panel-header {
    position: relative;
}

/* 页头那枚 30px 图标上色（玫红）—— 。
   ⛔ .panel-header .icon 是**全站共用**（`(0,2,0)`，底 rgba(--md-primary-rgb,.1) + 色 --uc-primary-deep
   ⇒ 因为主题色是 #1f2733 所以全站都是黑白的）；本选择器 `(0,3,0)` 只覆盖成交播报这一块，
   不去动其它页面 —— 要给别的块上色照抄这一条即可（改色只改这两个值）。 */
.faka-sold .panel-header .icon {
    background: rgba(225, 29, 72, .12);
    color: #e11d48;
}

:root[data-theme="dark"] .faka-sold .panel-header .icon {
    background: rgba(251, 113, 133, .18);
    color: #fb7185;
}

/* 「账号购买」页头图标上色（靛蓝）—— ：
   「看首页这个账号购买，前面的图标还是黑白的。其他的提货码呀和那个成交播报都是彩色的。」
   ⛔ 与「成交播报」那条是**同一套做法**（照抄即可，改色只改这两个值）；
     与已有各色都不撞：提货码青 `#0d9488` · 成交播报玫红 `#e11d48` · 账号批发琥珀 `#d97706`
     · 4 个工具色（蓝/橙/紫/绿）。
   ⛔⛔ 选择器必须带 `.faka-goods` 专属类 —— 裸 `.panel` 是**全站共用**（商品详情 / 订单查询 /
     工具页都在用），写成 `.panel .panel-header .icon` 会把那三处一起染蓝。
     该类挂在 `Index.html` 的 `<div class="panel faka-goods">` 上（⛔ 别删）。 */
.faka-goods .panel-header .icon {
    background: rgba(79, 70, 229, .12);
    color: #4f46e5;
}

:root[data-theme="dark"] .faka-goods .panel-header .icon {
    background: rgba(129, 140, 248, .18);
    color: #818cf8;
}

.faka-sold__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #12b76a;
}

.faka-sold__live i {
    font-size: 8px;
    animation: faka-sold-pulse 1.6s ease-in-out infinite;
}

@keyframes faka-sold-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }
}

/* 3 行视口（3 × 36px）—— 每行一条**独立的横向无缝跑马灯**
 定死：「成交播报不是左右滚动嘛？？？另外电脑端，你一行就显示一列？」
   ⇒ 桌面 / 手机统一 3 行，**行内左右滚**，一行并排多条 —— 不是竖排向上滚！ */
.faka-sold__viewport {
    height: 108px;
    overflow: hidden;
}

.faka-sold__track {
    display: flex;
    flex-direction: column;
}

/* 一行 = 一条横向跑马灯：内容复制一份，整体左移 -50% 正好接回开头 */
.faka-sold__row {
    display: flex;
    align-items: center;
    flex: 0 0 36px;
    height: 36px;
    width: max-content;
    white-space: nowrap;
}

.faka-sold__row.is-roll {
    animation: faka-sold-roll var(--sold-duration, 30s) linear infinite;
}

.faka-sold__row.is-roll:hover {
    animation-play-state: paused;
}

.faka-sold__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 36px;
    font-size: 13px;
    color: var(--uc-ink-med);
}

/* 列与列之间的分隔点 */
.faka-sold__item::after {
    content: '';
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin: 0 22px;
    border-radius: 50%;
    background: rgba(var(--md-primary-rgb), .35);
}

.faka-sold__time {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--uc-ink-dis);
}

.faka-sold__name {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--uc-ink);
}

.faka-sold__act {
    flex: 0 0 auto;
}

.faka-sold__goods {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--uc-primary-deep);
}

@keyframes faka-sold-roll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faka-sold__row.is-roll {
        animation: none;
    }
}

/* ---------- 客服浮标（全站右下角）---------- */
.cs-float {
    position: fixed;
 /* 
       原来是 right:20px —— 死贴屏幕边。主体只有 1200px 居中，屏幕越宽浮标离主体越远
       （实测 1920 宽：浮标右边缘比主体右边缘靠右 340px；1440 宽也差 100px）。
       现在：浮标整体落在**主体右侧的空白里、紧挨主体右边缘**（间隙 10px），不遮内容。
       · 主体内容区右边缘距视口右 ≈ (100vw - 1200) / 2（.container 1224 减去左右各 12 内边距）
       · 再往左让出「浮标自身宽度 92 + 间隙 10」⇒ 浮标的左边缘正好贴在主体右边缘外 10px
       · 视口不够宽（外侧放不下浮标）时，max() 回落 20px 贴屏幕边，避免跑出屏幕
 ⛔ 别再写成固定小 px；⚠️ 若浮标文案加长/缩小，同步改这里的 102。 */
    right: max(20px, calc((100vw - 1200px) / 2 - 102px));
 /* 
       原来 bottom:26px —— 贴着浏览器底缘，底部还有下载栏/任务栏时特别挤。
       抬到 88px（≈ 一个浮标按钮高度 + 呼吸位），明显离开底缘。
       ⛔ 手机端另有 bottom:18px 的覆盖（≤768px），不受这里影响。
       ⚠️ 要「再高一点 / 再低一点」只改这个数字。 */
    bottom: 88px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cs-float__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--uc-primary, #6d5efc), var(--uc-primary-deep, #5a4bd6));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--md-primary-rgb), .35);
    transition: transform .16s, box-shadow .16s;
}

.cs-float__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--md-primary-rgb), .45);
}

.cs-float__btn i {
    font-size: 17px;
}

.cs-card {
    /* 252 → 268：给「微信号 + 复制」这一行多留 ~16px，常见长度（≤16 字符）能一行放下不折行 */
    width: 268px;
    padding: 14px;
    border-radius: 18px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
    animation: cs-card-in .18s ease;
}

.cs-card[hidden] {
    display: none;
}

@keyframes cs-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--uc-ink);
}

.cs-card__close {
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--uc-ink-med);
    cursor: pointer;
}

/* 
   原来 width:100% ⇒ 实测渲染 238×230，左右到卡片内边缘各只剩 1px（探针 gapLeft/gapRight 都是 1）。
   现在封顶 200px + margin:0 auto 居中（左右各留 ~20px），并用 aspect-ratio 收成正方
   （源图是 255×246 非正方，contain 后上下各留 ~3.5px 白边，与卡片白底融为一体）。
   ⛔ 卡片宽度 268px 不动 —— 它是「微信号 + 复制」这一行不折行的基准。 */
.cs-card__qr {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}

.cs-card__wx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(var(--md-primary-rgb), .08);
}

/* 「微信号」四个字独占一行 —— 把整行宽度让给下面的号码，
   否则「标签 + 号码 + 复制按钮」挤在一行，稍长的号（如 douhan_kefu_demo）必然折行 */
.cs-card__wx-label {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--uc-ink-med);
}

.cs-card__wx-id {
    flex: 1 1 auto;
    min-width: 0;
    /* 微信号整体不含空格，长号（如 douhan_kefu_demo）在 228px 卡片里会被省略号吃掉，
       这里改成允许断行，保证完整可见 —— 只影响显示，复制拿到的始终是原值 */
    word-break: break-all;
    line-height: 1.35;
    font-size: 13.5px;
    color: var(--uc-ink);
}

.cs-card__copy {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--md-primary-rgb), .16);
    color: var(--uc-primary-deep);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cs-card__tip {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--uc-ink-med);
}

/* ---------- 首页：提货码 / 订单查询（单框原地查询）---------- */
.faka-entry {
    display: block;
 /* 「电脑端上下巨量高点，手机端不变」→ 上下由 18/20 提到 32/32（左右保持 20）。
       ⛔ 手机端由文件末尾 @media (max-width:768px) 里写死的 .faka-entry{padding:16px} 接管，
       这里改多大都不影响手机（改完照例跑 scripts/check-css-override.py）。 */
    padding: 32px 20px 32px;
    margin-bottom: 18px;
 /* 与 .panel 同步 20 → 14（两张卡上下相邻，圆角必须一致，否则一眼看出错位）。 */
    border-radius: 14px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-hi);
}

.faka-entry__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.faka-entry__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
 /* （截图，箭头指图标）：「这个图标才是的啊」——
       原来写的是 rgba(var(--md-primary-rgb), .12) + var(--uc-primary-deep)，
       ⛔ 而本站 --md-primary 本身就是 #1f2733（近黑）、--uc-primary-deep = #0d1219，
       「跟主题色走」= 底是灰的、图标是黑的 ⇒ 看着就是"黑白的"，且不报错不警告。
       现改青蓝（teal）：提货码/领卡密 = 收件入口。与 4 个工具色 + 账号批发琥珀都不撞。
       ⛔ dark 单独提亮（.12 的深色底落在深玻璃上几乎看不见）。 */
    background: rgba(13, 148, 136, .12);
    color: #0d9488;
    font-size: 20px;
}

:root[data-theme="dark"] .faka-entry__icon {
    background: rgba(45, 212, 191, .18);
    color: #2dd4bf;
}

.faka-entry__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.faka-entry__title {
 /* 
       ⇒ 16px → 15px，与 .panel-title 逐字一致（同 700 字重）。
       ⛔ 这两个数值是配对的，闸门 scripts/check-home-icons.sh 直接比对，别只改一边。 */
    font-size: 15px;
    font-weight: 700;
    color: var(--uc-ink);
    line-height: 1.4;
}

/* 取货方式说明（标题/一句话介绍下面那行灰字）。
   ⚠️ 本条 CSS 故意留着，但 **DOM 已从 Index.html 摘除** —— 恢复只需往首页模板的标题/标语块里
      补回一个 .faka-entry__desc 的 span，样式无需重写；原文文案见技能 references/06 §40。
   ⇒ 线上看不到这行字属预期，别当成样式没生效。
   DOM 在 Index.html 里位于标语块之后、标语 if 块之外（标语留空时它仍在）。
   margin-top 给一句话介绍留一点呼吸（标语自身下边距只有 1px）。 */
.faka-entry__desc {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--uc-ink-med);
    line-height: 1.5;
}

/* 输入框 + 按钮 */
.faka-form {
    display: flex;
    gap: 10px;
}

.faka-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
 /* 
       原来是 14px。工具页早已收方到 4px（`.tool-page .tool-form .faka-form__input`），
 首页这套是基础类、当时没跟着改 ⇒ 看到两边不一致。
       ⛔ 直接改基础类 = 首页与工具页**自动统一**，别再给首页单开作用域覆盖
          （工具页那条 4px 覆盖保留，作显式声明 + 防回退）。 */
    border-radius: 4px;
    border: 1px solid rgba(var(--md-primary-rgb), .2);
    background: rgba(255, 255, 255, .78);
    color: var(--uc-ink);
    font-size: 14.5px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.faka-form__input::placeholder {
    color: var(--uc-ink-med);
    opacity: .75;
}

.faka-form__input:focus {
    border-color: rgba(var(--md-primary-rgb), .6);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .14);
}

.faka-form__btn {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 26px;
    border: 0;
    /* 与上面 .faka-form__input 同步收方到 4px —— 两者必须一致，否则并排时会一个方一个圆 */
    border-radius: 4px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .26);
    transition: filter .16s ease, transform .16s ease;
}

.faka-form__btn:hover {
    filter: brightness(1.06);
}

.faka-form__btn:active {
    transform: translateY(1px);
}

:root[data-theme="dark"] .faka-form__input {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] .faka-form__input:focus {
    background: rgba(255, 255, 255, .12);
}

/* 结果面板 */
.faka-result {
    margin-bottom: 18px;
}

.faka-result__close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--uc-ink-med);
    font-size: 16px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.faka-result__close:hover {
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-primary-deep);
}

.faka-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--uc-ink-med);
}

.faka-state--error {
    color: var(--md-error);
}

.faka-state--empty {
    color: var(--uc-ink-med);
}

.faka-secret__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--uc-ink-med);
    margin-bottom: 8px;
}

.faka-secret__text {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(var(--md-primary-rgb), .07);
    border: 1px dashed rgba(var(--md-primary-rgb), .35);
    color: var(--uc-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

.faka-copy-btn {
    margin-top: 12px;
}

/* 订单卡片 */
.faka-order {
    padding: 16px;
    border-radius: 16px;
    background: rgba(var(--md-primary-rgb), .05);
    border: 1px solid rgba(var(--md-primary-rgb), .14);
}

.faka-order + .faka-order {
    margin-top: 12px;
}

.faka-order__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.faka-order__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.faka-order__status.is-paid {
    background: rgba(var(--md-success-rgb), .14);
    color: var(--md-success);
}

.faka-order__status.is-pending {
    background: rgba(var(--md-warning-rgb), .16);
    color: var(--md-warning);
}

.faka-order__amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--uc-ink);
}

.faka-order__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--uc-ink-med);
}

.faka-order__no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.faka-order__goods {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(var(--md-primary-rgb), .2);
}

.faka-order__thumb {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.faka-order__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--uc-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.faka-order__num {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--uc-ink-med);
}

.faka-order__card {
    margin-top: 12px;
}

.faka-order__card-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uc-ink-med);
    margin-bottom: 8px;
}

.faka-order__pass {
    display: flex;
    gap: 8px;
}

.faka-order__card .faka-secret__text {
    font-size: 13.5px;
}

.faka-order__card-loading {
    margin-top: 8px;
    font-size: 13px;
    color: var(--uc-ink-med);
}

@media (max-width: 768px) {
    /* 顶栏相关规则（.shop-nav / .shop-brand__name / .shop-nav__list / .shop-nav__item / .shop-fav）
       已上移到**文件末尾**的 @media (max-width: 880px) 段 —— 避免同一个选择器在两处定义、以后只改一处。 */

 /* 标语：已从顶栏移到首页「提货码 / 订单查询」卡片，手机端 / 桌面端两段文案互换 ——
       ≤768px 藏 .shop-slogan__full、显 .shop-slogan__short。
    ⚠️ `home_slogan_mobile` 留空时 `.shop-slogan__short` 回落渲染完整版 ⇒ 手机与桌面文案一致
       （本站当前就是这个配置，即手机端也显示完整那句）。
    ⛔ 这两条别删：搬移顶栏规则时曾被连带删掉（`.shop-fav` 块在它们**后面**，
       非贪婪匹配把中间内容一起吃掉了）⇒ 手机端当场多出一截文案。 */
    .shop-slogan__full {
        display: none;
    }

    .shop-slogan__short {
        display: inline;
    }

    .faka-entry {
        padding: 16px;
    }

    .faka-form {
        flex-wrap: wrap;
    }

    .faka-form__input {
        flex: 1 1 100%;
    }

    .faka-form__btn {
        flex: 1 1 100%;
        padding: 0 18px;
    }

    /* 手机端：客服浮标只留图标，卡片收窄 */
    .cs-float {
        right: 14px;
        bottom: 18px;
    }
    .cs-float__btn {
        width: 46px;
        height: 46px;
        padding: 0;
    }

    .cs-float__label {
        display: none;
    }

    .cs-card {
        width: 248px;
    }

    /* 手机端卡片收窄到 248（内容区 220）⇒ 二维码跟着收到 184，左右留白才与桌面端一致（≈18px） */
    .cs-card__qr {
        max-width: 184px;
    }
}

/* ---------- 收藏本站：全浏览器 / 全设备引导弹窗 ----------
   说明：浏览器不允许 JS 直接写书签，所以这里给的是「网址 + 二维码 + 本机专属步骤」，
   桌面端照快捷键、手机端照菜单点，任何浏览器 / 任何设备都能收藏。 */
.fav-mask {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 20, 30, .46);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: fav-mask-in .16s ease;
}

.fav-mask[hidden] {
    display: none;
}

@keyframes fav-mask-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fav-dlg {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 396px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: var(--glass-bg-strong, #fff);
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    box-shadow: var(--glass-hi), var(--glass-shadow-lg);
    animation: fav-dlg-in .2s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes fav-dlg-in {
    from { opacity: 0; transform: translateY(14px) scale(.965); }
    to { opacity: 1; transform: none; }
}

.fav-dlg__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 12px;
}

.fav-dlg__head b {
    font-size: 16px;
    font-weight: 750;
    color: var(--uc-ink);
}

.fav-dlg__head i {
    font-size: 17px;
    color: #f2b230;
}

.fav-dlg__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uc-ink-dis);
    font-size: 17px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.fav-dlg__close:hover {
    background: rgba(var(--md-primary-rgb), .1);
    color: var(--uc-ink);
}

.fav-dlg__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 18px 18px;
    -webkit-overflow-scrolling: touch;
}

.fav-dlg__url {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border: 1px solid rgba(var(--md-primary-rgb), .16);
    border-radius: 13px;
    background: var(--uc-field-bg, rgba(255, 255, 255, .6));
}

.fav-dlg__url input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--uc-ink);
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fav-dlg__copy {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.fav-dlg__copy:active {
    transform: scale(.97);
}

.fav-dlg__steps {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: fav-step;
}

.fav-dlg__steps li {
    position: relative;
    padding: 5px 0 5px 30px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--uc-ink-med);
}

.fav-dlg__steps li::before {
    counter-increment: fav-step;
    content: counter(fav-step);
    position: absolute;
    top: 6px;
    left: 0;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(var(--md-primary-rgb), .12);
    color: var(--uc-primary-deep);
    font-size: 11px;
    font-weight: 750;
}

.fav-dlg__steps kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid rgba(var(--md-primary-rgb), .24);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--uc-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
}

.fav-dlg__tip {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--uc-ink-dis);
}

.fav-dlg__fail {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 11px;
    background: rgba(240, 150, 40, .12);
    color: #b26a00;
    font-size: 12px;
    line-height: 1.6;
}

.fav-dlg__fail[hidden] {
    display: none;
}

/* ---------- 收藏弹窗底部：客服微信区（二维码 + 微信号一键复制） ----------
   数据与右下角客服浮标同源（都来自后台「首页装修 → 客服」），
   二维码 / 微信号都为空时整块不渲染。 */
.fav-dlg__cs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(var(--md-primary-rgb), .22);
}

.fav-dlg__cs[hidden] {
    display: none;
}

.fav-dlg__cs-qr {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    padding: 5px;
    border-radius: 11px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 5px 16px rgba(31, 45, 70, .12);
}

.fav-dlg__cs-qr[hidden] {
    display: none;
}

.fav-dlg__cs-info {
    flex: 1 1 auto;
    min-width: 0;
}

.fav-dlg__cs-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 750;
    color: var(--uc-ink);
}

.fav-dlg__cs-title i {
    color: var(--uc-primary-deep);
}

.fav-dlg__cs-wx {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.fav-dlg__cs-wx[hidden] {
    display: none;
}

.fav-dlg__cs-id {
    flex: 1 1 auto;
    min-width: 0;
    /* 同 .cs-card__wx-id：微信号是一整串无空格文本，长号会被省略号截断 → 允许断行完整显示 */
    word-break: break-all;
    line-height: 1.3;
    color: var(--md-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: .3px;
    -webkit-user-select: all;
    user-select: all;
}

.fav-dlg__cs-copy {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.fav-dlg__cs-copy:active {
    transform: scale(.96);
}

.fav-dlg__cs-tip {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--uc-ink-dis);
}

.fav-dlg__cs-tip[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .fav-mask {
        align-items: flex-end;
        padding: 0;
    }

    .fav-dlg {
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 88vh;
    }

    .fav-dlg__cs-qr {
        width: 76px;
        height: 76px;
    }
}

/* -------- 工具箱（顶栏菜单 /tools/* 落地页）· 晚新增 ---------- */
.tool-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--uc-ink-med);
}

.tool-hint code {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--uc-primary-deep);
    font-size: 12.5px;
    word-break: break-all;
}

/* 结果展示区（**常驻**）—— 新增
 对照 lurentool.cn/token 的「这里也是显示不一样，我们上下布局，下面应该留空，给显示位置」
   ⇒ 保持我们自己的上下布局（输入在上 / 结果在下），但下面这块**固定占位**：
     未查询时是留白空态（图标 + 一行大字 + 一行小字提示），不是 display:none 的塌陷块。
   ⛔ 空态文案写在 Tool.html + Tools::TOOLS['*']['t_empty']，这里只管样式。
   ⛔ 别把 .tool-result 设成 flex 居中 —— 有结果时 .tool-out / .tool-note 会被拉伸变形。 */
.tool-result {
    margin: 0;
}

.tool-empty {
    padding: 68px 16px;
    text-align: center;
}

.tool-empty__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: rgba(var(--tool-accent, var(--md-primary-rgb)), .12);
    color: rgb(var(--tool-accent, var(--md-primary-rgb)));
    font-size: 29px;
}

.tool-empty__t {
    margin: 16px 0 7px;
    font-size: 17px;
    font-weight: 700;
    color: var(--uc-ink);
}

.tool-empty__s {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--uc-ink-med);
}

.tool-empty__s code {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--uc-primary-deep);
    font-size: 13.5px;
    word-break: break-all;
}

@media (max-width: 768px) {
    .tool-empty {
        padding: 48px 12px;
    }

    .tool-empty__ico {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .tool-empty__t {
        font-size: 16px;
    }
}

/* -------- 工具页（v3 修正）· 只改"形态"，**不放大控件** ----------
 否掉 v2 的整体放大：
     「你把有的输入框以前挺好的，你给我加高干嘛呀？就比如说邮件取件，手机验证码」
     「还把那查询按钮弄得贼大，还是圆角，那人家是方角是吧？哎，还弄成圆角了，就很难看」
   实测对标（headless 1440，scripts/probe-luren-4pages.js）—— 人家 lurentool.cn 四个工具页：
     · 单行输入 40px 高；按钮 186x40；**圆角一律 4px（方角）**，字 14px / 字重 500
     · ⭐ **只有「充值检测」是 textarea（157px 高）**，其余三个都是单行
说的「输入框高度是不一样的」= **按工具形态给控件**，不是拉齐成一个高度
   ⇒ v3 定稿：
     ① 单行输入框与按钮**回到站点基础值**（46px / 14.5px）—— 撤销 v2 的 54px / 16px
     ② 圆角收成 **4px**（对齐人家的方角）
     ③ 多行工具（充值检测）单独用 textarea，`tool-input--multi` 给足高度
   ⛔ 仍全部挂 .tool-page 作用域 —— `.faka-form__input` / `.faka-form__btn` 同时被
     首页提货码框、查单框使用，改基础值会连带改动已验收页面（坑 58）。
   ⛔ 改完必须跑首页探针复核：`.panel-title` 仍 15px、提货码输入框仍 46px。 */
.tool-page .panel-header {
    padding: 14px 20px;
}

.tool-page .panel-header .icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 17px;
}

.tool-page .panel-title {
    font-size: 17px;
}

.tool-page .panel-body {
    font-size: 14.5px;
}

/* 工具页控件尺寸（收紧）。
 「手机版，这些按钮的高度和里面文字是不是太大了，不协调啊。。。电脑版也是。。。
             手机验证码、邮件取件、换最新 token、充值检测，这几个菜单栏，你都检查下」

   实测问题（probe-tool-sizes.js，四个工具页 × 桌面 1440 / 手机 390 全部一致）：
     · 输入框 46px / 字 14.5px、按钮 46px / 字 14.5px / **字重 600**
     · 而同一张卡片里说明 14.5px、格式提示 13px、步进器数字 15px
一行两大块 46px 的实心块压在小字之间，视觉上「又高又重」，就是说的不协调。

 对齐基准：
     单行输入 40px 高 · 按钮 40px · 字 14px · 字重 500
   ⇒ 本页把**输入框与按钮成对降到 40px / 14px**，按钮字重 600 → 500（去掉「字很大」的观感）。
   ⛔ 为什么连输入框一起降：它俩是同一行的一对，只降按钮会变成「框高、按钮矮」的新不协调。
   ⛔ 为什么只挂 .tool-page：`.faka-form__input` / `.faka-form__btn` 同时被首页提货码框、
     查单框使用（坑 58）。改基础值会连带改动已验收页面 —— 首页/查单仍是 46px，
 若要一起降再单独发话。 */
.tool-page .tool-form .faka-form__input,
.tool-page .tool-form .faka-form__btn {
    border-radius: 4px;
    height: 40px;
    font-size: 14px;
    padding: 0 22px;
}

.tool-page .tool-form .faka-form__btn {
    /* 字重从基础类的 600 降到 500 —— 同字号下 600 会「显大显重」 */
    font-weight: 500;
}

/* ⭐ 多行工具（= 充值检测）：textarea 撑满整行、给足高度、可竖向拖拽。
   这就是"四个工具页输入框高度不一样"的落点 —— 只有它用得到这段；另外三个单行工具不受影响。 */
.tool-page .tool-form .tool-input--multi {
    flex: 1 1 100%;
    height: auto;
    min-height: 140px;
    padding: 12px 16px;
    line-height: 1.7;
    resize: vertical;
    font-family: inherit;
}

.tool-page .tool-hint {
    font-size: 13px;
}

.tool-page .tool-hint code {
    font-size: 13px;
}

.tool-page .tool-qty__label {
    font-size: 14px;
}

.tool-page .tool-qty__val {
    /* 原来是 15px —— 比同一行的输入框（14px）还大，缩到 14 与控件齐平 */
    font-size: 14px;
}

.tool-out {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--uc-field-bg);
    border: 1px solid var(--glass-border-soft);
    color: var(--uc-ink);
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

.tool-note {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    border: 1px dashed rgba(var(--md-primary-rgb), .35);
    background: rgba(var(--md-primary-rgb), .06);
    color: var(--uc-ink);
}

.tool-note b {
    display: block;
    margin-bottom: 4px;
}

/* 全部工具：4 张卡片（布局参考 lurentool.cn 的工具站） */
/* -------- 工具识别色：4 个售后工具各自的颜色 · 新增 ---------- */
/* 
   处理方式：**三处统一上色** —— ① 顶栏菜单图标 ② 工具页页头图标 ③「全部工具」卡片图标。
   全部挂在同一个 data-tool 上，用 RGB 三通道变量 --tool-accent：
   一处定义色，淡底 / 图标色 / 描边 / 投影都能按透明度派生，加点新颜色只改这一处。
   ⛔ 别把颜色写进 HTML 或散落到各选择器里 —— 那样改一次要动三处。 */
[data-tool="sms"]      { --tool-accent: 37, 99, 235; }   /* 蓝 · 短信验证码 */
[data-tool="mail"]     { --tool-accent: 234, 88, 12; }   /* 橙 · 邮箱取件（与站点标语橘黄同调） */
[data-tool="token"]    { --tool-accent: 124, 58, 237; }  /* 紫 · 凭证 / Token */
[data-tool="recharge"] { --tool-accent: 5, 150, 105; }   /* 绿 · 通过 / 生效 */

/* 深色主题下这四支色要提亮，否则落在深色卡片上发闷 */
:root[data-theme="dark"] [data-tool="sms"]      { --tool-accent: 96, 165, 250; }
:root[data-theme="dark"] [data-tool="mail"]     { --tool-accent: 251, 146, 60; }
:root[data-theme="dark"] [data-tool="token"]    { --tool-accent: 167, 139, 250; }
:root[data-theme="dark"] [data-tool="recharge"] { --tool-accent: 52, 211, 153; }

/* 深色主题：菜单图标的淡底要更实一点（.12 的亮色落在深色玻璃上几乎看不见） */
:root[data-theme="dark"] .shop-nav__item i,
:root[data-theme="dark"] .shop-nav__item .nav-icon {
    background: rgba(var(--tool-accent, var(--md-primary-rgb)), .20);
}

:root[data-theme="dark"] .shop-nav__item:hover i {
    background: rgba(var(--tool-accent, var(--md-primary-rgb)), .30);
}

/* ① 顶栏菜单图标 —— 图标色与淡底都在文件前部 `.shop-nav__item i` 段统一定义（夜
   改成"26px 圆角底 + 同色图标"小方块），这里不再重复声明颜色。
   「首页」项没有 data-tool → --tool-accent 缺省，自动回落到主色，当视觉锚点。 */

/* ② 工具页页头那枚 30px 图标 */
.panel-header[data-tool] .icon {
    background: rgba(var(--tool-accent), .12);
    color: rgb(var(--tool-accent));
}

/* ③「全部工具」卡片：图标 + hover 描边 + 当前卡高亮，全跟着自己那支色走 */
.tool-card[data-tool] .tool-card__ico {
    background: rgba(var(--tool-accent), .12);
    color: rgb(var(--tool-accent));
}

.tool-card[data-tool]:hover {
    border-color: rgba(var(--tool-accent), .35);
    box-shadow: 0 10px 24px rgba(var(--tool-accent), .12);
}

.tool-card[data-tool].is-current {
    border-color: rgba(var(--tool-accent), .55);
    box-shadow: inset 0 0 0 1px rgba(var(--tool-accent), .35);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid var(--glass-border-soft);
    color: var(--uc-ink);
    transition: transform .16s, border-color .16s, box-shadow .16s;
}

.tool-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--md-primary-rgb), .35);
    box-shadow: 0 10px 24px rgba(var(--md-primary-rgb), .12);
}

.tool-card.is-current {
    border-color: rgba(var(--md-primary-rgb), .55);
    box-shadow: inset 0 0 0 1px rgba(var(--md-primary-rgb), .35);
}

.tool-card__ico {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(var(--md-primary-rgb), .12);
    color: var(--uc-primary-deep);
    font-size: 19px;
}

.tool-card__title {
    font-size: 14.5px;
    font-weight: 700;
}

.tool-card__desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--uc-ink-med);
}

:root[data-theme="dark"] .tool-card {
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 768px) {
    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
 商品详情页 v2 —— 重做
 
   两个病根：
     ① 主图被 object-fit:cover 硬拉 —— DEMO 商品封面是 /favicon.ico（256×256），
        被拉成 565×460 的一团色块；
     ② 官方原版模板里**根本没有购买按钮** —— 付款方式只是个 28px 的小图标，
        买家看不出那是能点的购买入口。
   本区块追加在文件末尾，靠层叠覆盖上方旧规则（旧规则保留，整块删掉即可回退）。
   ⛔ 下单链路一个字没动：购买按钮仍是原来的 .pay-list .pay，data-id 也没变。
   ============================================================ */

/* -------- 1) 主图：正方形容器 ----------
   ⛔ 首页卡片（.acg-thumb）才是 16:9；详情页主图必须回到方形 —— 两处共用 `cover` 一个字段，
      所以首页用整张 16:9（方图居中 + 两侧背景延展），详情页这里用 1:1 容器裁中间方形 = 原方图内容（延展区被裁掉）。
      ⛔ 别改回 align-self:stretch —— 会被拉伸到跟右栏等高，aspect-ratio 直接失效。 */
.acg-cover {
    align-self: flex-start;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--glass-border-soft);
    border-radius: 18px;
    box-sizing: border-box;
}

:root[data-theme="dark"] .acg-cover {
    background: rgba(255, 255, 255, .045);
}

/* 详情页主图：铺满 1:1 容器。
   ✅ 首选：item.js 把 src 换成详情配图（800×800 原始方图，无档位标签）—— 1:1 对 1:1，完美。
   ⚠️ 兜底：若 JS 未执行，容器里还是首页那张 16:9 铺满版封面 —— `fill`（非等比拉伸）会把它
      按 1:1 压回去，正好还原原始方图比例（首页那张 = 方图非等比铺满 16:9，压回来即还原）。
   ⛔ 别写成 cover（会把铺满版左右各裁 22%，「标价即卖价」半边被切）；
 ⛔ 也别写 contain（16:9 塞进 1:1 会上下留白，看着仍是横的长方形 —— 就是嫌这个）。 */
.item-cover {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
    display: block;
}

/* 没填封面时不要留个破图图标 */
.item-cover:not([src]),
.item-cover[src=""] {
    display: none;
}

/* ---------- 2) 右栏信息层次 ---------- */
.item-buy .item-name {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.32;
    letter-spacing: .2px;
    color: var(--uc-ink);
}

.item-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

/* 库存徽标比同级 badge 再实一档（字号 +1.5px / 字重 600 / 底色与描边加深）。
   它是「还剩几件」的决策信息，和普通标签同权重会被淹掉。
   ⛔ 只加这一支，别改 .badge-soft 本体 —— 那个类全站共用（订单状态、卡密标签等）。 */
.item-badges .item-stock {
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 10px;
    background: rgba(31, 169, 113, .18);
    box-shadow: inset 0 0 0 1px rgba(31, 169, 113, .30);
}

:root[data-theme="dark"] .item-badges .item-stock {
    color: #4ee0a0;                 /* 深色下 #1fa971 发闷，提亮一档 */
    background: rgba(78, 224, 160, .16);
    box-shadow: inset 0 0 0 1px rgba(78, 224, 160, .26);
}

.item-price-row.abacus {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.item-buy .abacus .price {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
}

.item-buy .abacus .price .unit {
    font-size: 16px;
    font-weight: 700;
    margin-right: 2px;
}

/* ---------- 3) 购买按钮（核心：把付款方式做成醒目的 CTA） ---------- */
/* 只有一个支付方式时（当前线上就是只有支付宝），整个付款区变成一颗大按钮：
   去掉外框和「付款」小标题，只留按钮本体。JS 会给 .cash-pay 加 .cash-pay--solo。 */
.cash-pay--solo {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.cash-pay--solo .cash-pay__label {
    display: none;
}

.pay-list .pay--solo {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 8px;
    /* ⛔ 高度不是只看 padding：全站继承的 `line-height:1.8` 会把 14px 字撑成 25.2px 行高，
         光减 padding 最多到 47px。必须**显式收 line-height** 才能压到 ~38px。
       ⛔ 圆角保持 14px 不动（全站卡片口径，换个值又是一轮返工）。 */
    padding: 10px 16px;
    line-height: 1.25;
    border-radius: 14px;
    background: var(--md-primary);
    border-color: transparent;
    color: var(--md-on-primary);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(var(--md-primary-rgb), .28);
}

.pay-list .pay--solo img {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
}

.pay-list .pay--solo .pay__cta {
    color: var(--md-on-primary);
    font-weight: 700;
}

.pay-list .pay--solo .pay__via {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 500;
}

/* ⛔ 别用 var(--md-primary-hover)：_glass.css 只定义了 --md-primary，
   没有 -hover 兄弟变量，写它会解析失败、背景回落到旧的浅色 :hover 规则上（按钮会「变白」）。
   用 brightness 滤镜做悬停反馈，明暗主题都不会错。 */
.pay-list .pay--solo:hover {
    background: var(--md-primary);
    border-color: transparent;
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(var(--md-primary-rgb), .34);
}

:root[data-theme="dark"] .pay-list .pay--solo:hover {
    filter: brightness(.92);
}

/* 付款区小标题（文字 = 「支付方式」，由参数区挪来）。
   字号与上方 .form-label（查询密码 / 购买数量）对齐，视觉才是一组。 */
.cash-pay__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    /* 12.5px = 上方 .form-label（购买数量 / 查询密码）同号，两块才是一组 */
    font-size: 12.5px;
    font-weight: 500;
    color: var(--uc-ink-med);
}

.cash-pay__label i {
    /* 小图标跟着品牌色走，给「支付方式」一点视觉引导（原来和文字一样是灰的） */
    color: var(--cta, #f0435f);
    font-size: 14px;
}

/* ---------- 3b) 渠道选中态 + 「立即支付」按钮 ----------
   ⇒ 渠道从「点了直接下单」改成「先选（is-active）再点提交」（JS 在 item.js _SetPayList）。 */
.pay-list .pay.is-active {
    /* ⛔ 选中态跟**顶栏菜单选中**同一套语言（`.shop-nav__item.active`）：
       主色淡底 + 主色描边 + 深墨字。⛔ 别自创颜色 —— 这里试过玫红，与全站不一致。
       描边比菜单的 `.16` 强一档（.45）：菜单是文字块、这里是按钮，太淡会看不出选中。 */
    border-color: rgba(var(--md-primary-rgb), .45);
    background: rgba(var(--md-primary-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--md-primary-rgb), .16);
}

.pay-list .pay.is-active span {
    color: var(--uc-ink);
    font-weight: 600;
}

.cash-pay .pay-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    /* ⛔ 高度必须显式收 line-height：全站继承的 1.8 会把 14px 字撑到 25.2px，
       光减 padding 压不下来（与 .pay--solo 同一个坑）。11px 上下内距 ⇒ 桌面实测 40px，
       与查询密码输入框 / 购买数量组同高。 */
    padding: 11px 16px;
    line-height: 1.25;
    border: 0;
    border-radius: 14px;
    /* ⛔ 原 `var(--md-primary)` = #1f2733 近黑石板。改成品牌玫红渐变（= .price 的色）。 */
    background: linear-gradient(135deg, var(--cta-a, #f0435f), var(--cta-b, #d92b4a));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--cta-rgb, 240, 67, 95), .30);
    transition: filter .16s, transform .16s, box-shadow .16s;
}

.cash-pay .pay-submit i {
    font-size: 15px;
}

.cash-pay .pay-submit:hover {
    /* ⛔ 别用 var(--md-primary-hover)：_glass.css 里没这个变量，写它背景会解析失败、
       回落到旧的浅色 :hover（按钮「变白」）。用 brightness 滤镜，明暗主题都不会错。 */
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(var(--cta-rgb, 240, 67, 95), .36);
}

:root[data-theme="dark"] .cash-pay .pay-submit:hover {
    filter: brightness(1.04);
}

/* ---------- 4) 手机端 ---------- */
@media (max-width: 991.98px) {
    .acg-cover {
        min-height: 220px;
        padding: 12px;
    }
}

@media (max-width: 575.98px) {
    .item-buy .item-name {
        font-size: 19px;
    }

    .item-buy .abacus .price {
        font-size: 27px;
    }

    .item-buy .abacus .price .unit {
        font-size: 15px;
    }

    .pay-list .pay--solo {
        padding: 12px 16px;
        font-size: 15px;
    }

    /* 「立即支付」按钮：手机端抬到 45px，指头好点 */
    .cash-pay .pay-submit {
        padding: 12px 16px;
        font-size: 15px;
    }
}

/* ============================================================
   ⛔ 这一段必须留在文件**末尾**（所有桌面规则之后）。
   因为 @media **不增加特异性**，同一选择器「后写的赢」：
   早前这段放在文件中部（约 559 行）时，.shop-fav 的桌面定义在 1741 行，
   把这里的 display:none 直接覆盖 —— 手机端收藏按钮照旧显示，
   而页面**不报错、其它规则又都正常**，最难查的一类"改了没生效"。
   （.shop-nav / .shop-brand__name / .shop-nav__list / .shop-nav__item 的基础定义
     在 94~155 行，位置靠前，所以只有 .shop-fav 这一个露馅了。）
   ============================================================ */
/* ---------- ≤880px：顶栏切「一行」布局（左 logo 图标 + 菜单横滑） ----------
   ⛔ 这里用 880 而不是跟其它手机规则共用 768 —— 880 是**算出来的**，不是拍的：
   桌面顶栏内容 = 品牌 91 + 间隙 20 + 菜单 558 + 右侧「收藏本站」111 = 780px，
   再加 .shop-nav 的 28px 内边距、.uc-topbar 的 24px 外边距 ⇒ 访客态需要 832px；
   已登录时右侧还多一个头像区（+42px）⇒ 需要 874px。取 880 留余量。
   实测（改前）769px 超容器内宽 65px、800px 超 34px —— 右侧「收藏本站」被顶出玻璃卡，
 即 768~874 这段原本是漏的（旧版断点只到 768）—— 一并补上。 */
@media (max-width: 880px) {
    .shop-user__meta { display: none; }
    .shop-user__btn { padding: 0 4px; }
    .uc-topbar { padding: 10px 12px 2px; }

    /* 顶栏 = 一行。布局参考 lurentool.cn 手机版：实测它的 .topbar = 390×56 一行，
       里面只有 36px 的 .logo 和 nav.nav[overflow-x:auto]，站名文字与收藏按钮都没有。
 「手机版，我看他们菜单，是放顶部的，然后可以左右滑动那种
       然后，去掉收藏按钮。」 */
    .shop-nav {
        flex-wrap: nowrap;
        height: 56px;
        padding: 0 10px;
        /* 与桌面端统一为 16px 圆角 */
        border-radius: 16px;
        gap: 8px;
    }

    /* 只留 logo 图标，店名让位给菜单（5 项横滑需要宽度）—— 与 lurentool.cn 手机版一致。
       要留店名的话把这条去掉即可，菜单可见项会从 ~3 项降到 ~2 项 */
    .shop-brand__name {
        display: none;
    }

    /* 菜单直接在第一行（顶部），占满 logo 右侧剩余宽度并横向滑动。
       右缘渐隐不再写死在这里 —— 改成按需挂 class（.is-fade-r / .is-fade-l / .is-fade-both，
       见文件前部同名规则 + Header.html 的 syncNavFade()），理由同那里。 */
    .shop-nav__list {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
 /* 手机端同样要跟 logo 拉开：
           brand 右内边距(4) + 本值 ⇒ 2px ⇒ 10px ⇒ **现 18px = 实测 26px**（桌面 32 / 手机 26）。
           ⚠️ 手机每加 1px，菜单可视宽度就少 1px（390px 下本来就要横滑，影响很小但要知道）。 */
        margin-left: 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .shop-nav__list::-webkit-scrollbar {
        display: none;
    }

    /* ⛔ 横滑必需：列表在窄屏变成 flex:1 1 auto（宽度受限），子项默认 flex-shrink:1
       会被压扁、文字换行成竖排。必须锁住不收缩。 */
    .shop-nav__list > li {
        flex: 0 0 auto;
    }

    .shop-nav__item {
        height: 34px;
        padding: 0 9px;
 /* 与桌面端同步放大（桌面 15px / 手机 13.5px）—— 「字号有点小」管两端。
           ⛔ 桌面那处在文件前部 198 行附近，两处必须成对改，见 probe-brand-menu-size.js。 */
        font-size: 13.5px;
    }

    /* ⛔ 必须带 .shop-nav__list 前缀：基础段那条 (0,2,1) 会压过 .shop-nav__item i (0,1,1)，
       不带前缀这条字号就静默失效（同坑 39）。
 ⛔ 图标已于停用（见文件前部同名段的「已停用」说明），本条保留待回退。 */
    .shop-nav__list .shop-nav__item i,
    .shop-nav__list .shop-nav__item .nav-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        font-size: 13px;
    }

 /* 去掉「收藏本站」按钮。
       ⛔ 只隐藏、不删 DOM：Header 底部脚本按 id 取 #shopFavBtn（虽然都有判空保护，
       但留着 DOM 更稳，桌面端与收藏弹窗逻辑继续用同一个按钮）。 */
    .shop-fav {
        display: none;
    }
}

/* ============================================================
   成交播报已统一为「竖排 3 行 + 无缝上滚」（桌面 / 手机同形态）
 
   ⇒ 基础样式段（.faka-sold__viewport / __track / __item）本身已经是竖排，
     这里不再需要 ≤768px 的覆盖块；断点分支也已在 sold-notice.js 里一并移除。
   ============================================================ */

/* ============================================================
 工具箱「取件数量」步进器 —— 新增
 
   （截图 = lurentool.cn 的邮箱取件卡片：输入框 / 取件数量 −5+ / 清空+取邮件 三行竖排）

   ⛔ 作用范围：**只有邮箱取件**（`Tools::TOOLS['mail']['t_qty']`）。
      模板侧用 `#{if $t_qty}` 整段包住 —— 另外 3 个工具页的 DOM 与改前逐字一致。
      为什么不给别的一起加：lurentool.cn 实测 sms / token / recharge 三页**都没有**这个控件，
      「取几条」对它们没有语义（取的是"最新的那一条"）。

   ⛔ 布局走 `--panel` 修饰类的理由：直接改 `.faka-form` 会连带改掉首页提货码查询等
      所有用同一个类的地方；修饰类只落在带步进器的那一个表单上。
   ============================================================ */

/* 三行竖排：输入 / 取件数量 / 动作行 */
.faka-form--panel {
    flex-wrap: wrap;
}

.faka-form--panel .faka-form__input {
    flex: 1 1 100%;
}

/* 取件数量：标签 + [− N +] 一组，整行靠左 */
.tool-qty {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-qty__label {
    font-size: 13px;
    color: var(--uc-ink-med);
}

.tool-qty__box {
    display: inline-flex;
    align-items: stretch;
 /* 原来 38px 高 + 12px 圆角 —— 旁边输入框/按钮已是 4px 方角
 这个「12px 圆角」在四个工具页里是唯一的圆控件，说「不协调」有它一份。
       ⇒ 高度 38→36（落在 40px 控件的视觉节奏里）、圆角 12→4（与全站方角口径统一）。 */
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgba(var(--md-primary-rgb), .2);
    background: rgba(255, 255, 255, .78);
    overflow: hidden;
}

.tool-qty__btn {
    width: 38px;
    border: 0;
    background: transparent;
    color: var(--uc-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease;
}

/* ⛔ 悬停反馈只用 brightness/背景色，别写 var(--md-primary-hover) —— 该变量不存在（坑 32） */
.tool-qty__btn:hover:not(:disabled) {
    background: rgba(var(--md-primary-rgb), .08);
}

.tool-qty__btn:disabled {
    color: var(--uc-ink-med);
    opacity: .45;
    cursor: not-allowed;
}

.tool-qty__val {
    width: 56px;
    border: 0;
    border-left: 1px solid rgba(var(--md-primary-rgb), .2);
    border-right: 1px solid rgba(var(--md-primary-rgb), .2);
    background: transparent;
    color: var(--uc-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    outline: none;
}

/* 动作行：清空（次要）+ 取邮件（主按钮），桌面靠左自然宽、手机 50/50 */
.faka-form__actions {
    flex: 1 1 100%;
    display: flex;
    gap: 10px;
}

.faka-form__actions .faka-form__btn {
    flex: 0 0 auto;
    min-width: 132px;
}

.faka-form__btn--ghost {
    background: rgba(255, 255, 255, .78);
    color: var(--uc-ink);
    border: 1px solid rgba(var(--md-primary-rgb), .2);
    box-shadow: none;
}

.faka-form__btn--ghost:hover {
    filter: none;
    background: #fff;
    border-color: rgba(var(--md-primary-rgb), .4);
}

:root[data-theme="dark"] .tool-qty__box,
:root[data-theme="dark"] .faka-form__btn--ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] .tool-qty__val {
    border-left-color: rgba(255, 255, 255, .16);
    border-right-color: rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] .faka-form__btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
}

/* 手机端：两个按钮并排各占一半（比"各占一行"更像参考站；特异性 0,3,0 稳盖 2278 行的 .faka-form__btn） */
@media (max-width: 768px) {
    .faka-form--panel .faka-form__actions .faka-form__btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* -------- 账号批发弹窗（由「收藏本站」弹窗改造）----------
 
   外壳直接复用 .fav-mask / .fav-dlg（遮罩 + 居中 + ≤480px 底部抽屉 + 深色主题都在那套里），
   这里只补内容区样式。⛔ 整块独立，删掉即回退，不动上面任何规则。

   ⛔ 为什么 max-width 要连 ≤480px 一起写：@media 不增加特异性，
   `.fav-dlg{max-width:none}`（手机端抽屉）写在文件中部，会被本块最后的
   `.batch-dlg{max-width:360px}` 在手机上一起吃掉 —— 见 references/04 坑 35。 */
.batch-dlg {
    max-width: 360px;
}

.batch-dlg__lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--uc-ink-med);
}

.batch-dlg__lead[hidden] {
    display: none;
}

/* 
   原来是 flex column 的块级盒、宽度被 .fav-dlg__body 拉满 ⇒ 实测 322×229 横向长方形
   （二维码在里头左右各空 58px、下面还塞着一行「微信扫码加客服」）。
   现在：① 宽度写死 206px（= 二维码 178 + padding 14×2）并 margin:0 auto 居中
        ② 高度同步 206px ⇒ 正方形（padding 由 `14px 14px 12px` 改均匀 14px，
           否则 178+14+12=204 差 2px）
        ③ 「微信扫码加客服」那行**已移出白盒**（见 Header.html）⇒ 白盒 = 纯粹的二维码衬底
   ⛔⛔ 手机端（≤480px）二维码缩到 164 ⇒ 白盒**必须成对**改成 192×192（见本文件后面的
      @media≤480px 段）—— 两个值一起改，只改一个白盒就不再是正方形。
   ⛔ 量这两个数必须在入场动画结束后（.fav-dlg-in 有 scale(.965)，见 04 坑 64）。 */
.batch-dlg__qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* 尺寸写死：206 = 二维码 178 + padding 14×2（手机端镜像成 192 = 164 + 28）。
       ⛔ 量这两个数必须在**入场动画结束之后** —— .fav-dlg-in 起手是 scale(.965)，
          动画没跑完就 getBoundingClientRect() 会读到 199/172 这种"假小"值（见 04 坑 65）。 */
    width: 206px;
    height: 206px;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 45, 70, .12);
}

.batch-dlg__qr-box[hidden] {
    display: none;
}

.batch-dlg__qr {
    display: block;
    width: 178px;
    height: 178px;
    border-radius: 10px;
    object-fit: contain;
}

/* 「微信扫码加客服」：已从白盒里**移出**（白盒要做正方形二维码衬底）
   所以它现在要自己占一行并居中 —— 原来在白盒里靠 align-items:center 居中，
   移出后父级 .fav-dlg__body 是块级流，inline-flex 会靠左 ⇒ 改 flex + width 100% + 居中。 */
.batch-dlg__qr-scan {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 9px 0 0;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uc-ink-med);
}

.batch-dlg__qr-scan i {
    font-size: 13px;
    color: var(--uc-primary-deep);
}

/* 微信号：整行宽度让给号码（同 .cs-card__wx 的处理），长号不折半行 */
.batch-dlg__wx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(var(--md-primary-rgb), .08);
}

.batch-dlg__wx[hidden] {
    display: none;
}

.batch-dlg__wx-label {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--uc-ink-med);
}

.batch-dlg__wx-id {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
    line-height: 1.35;
    font-size: 14.5px;
    font-weight: 750;
    letter-spacing: .2px;
    color: var(--md-primary);
    -webkit-user-select: all;
    user-select: all;
}

.batch-dlg__wx-copy {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.batch-dlg__wx-copy:active {
    transform: scale(.96);
}

.batch-dlg__tip {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--uc-ink-dis);
}

.batch-dlg__tip[hidden] {
    display: none;
}

.batch-dlg__empty {
    margin: 0;
    padding: 14px 0 2px;
    text-align: center;
    font-size: 13px;
    color: var(--uc-ink-dis);
}

.batch-dlg__empty[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .batch-dlg {
        max-width: none;
    }

    .batch-dlg__qr {
        width: 164px;
        height: 164px;
    }

    /* 白盒跟着二维码一起收：164 + 14×2 = 192（保持正方形）—— 见上面 .batch-dlg__qr-box 注释 */
    .batch-dlg__qr-box {
        width: 192px;
        height: 192px;
    }
}

/* -------- 页脚（新增：版权 / 网站声明 / ICP备案）----------
   内容来自「后台 → 模板设置」的三个键：copyright / statement / icp，三者都可留空；
 ⛔ 版权行**不再兜底**店铺名（ 「老手村字眼，不要」），留空即不渲染。
   外壳仍用 <footer> 元素（上面 `footer{...}` 那条标签选择器兜底规则不动），
   这里只给 .uc-footer* 加排版。⛔ 整块独立，删掉即回退。
   ⚠️ 手机端底部要额外让位：右下角客服浮标贴边 18px + Home 指示条，
   所以 ≤768px 把 padding-bottom 加大；且手机端**不显示 ICP 备案行**（见下）。 */
.uc-footer {
    padding: 30px 16px 36px;
    text-align: center;
    color: var(--uc-ink-dis);
    font-size: 12.5px;
    line-height: 1.75;
}

.uc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.uc-footer__copy {
    margin: 0;
    color: var(--uc-ink-med);
}

.uc-footer__statement,
.uc-footer__icp {
    margin: 0;
    font-size: 12px;
    /* ⛔ 别用 --uc-ink-dis：它在两套主题下都太浅
       （实测深色 #6b7280 均值 116，与深底 20,23,28 只有 ≈3.7:1；浅色 #8b909e 白底 ≈3.2:1），
       12px 小字加网站声明/备案号这种**要让人看清**的内容，用 --uc-ink-med（深色 162 / 浅色 96）才对。
 ⚠️ 例外：**备案号那一行**明确要更浅，见下面单独那条。 */
    color: var(--uc-ink-med);
}

/* 备案号行**再退一档**。
   用主题自带的「退一档」token --uc-ink-dis（浅色 #8b909e / 深色 #6b7280），⛔ 不另造色值。
   ⇒ 改法就是「页面声明行用 med、备案号行用 dis」，两行的深浅关系一眼可辨。
 ⚠️ 代价（知情取舍）：对比度由 ≈7:1 降到 ≈3.2~3.7:1。这是对**备案号**的明确要求；
      **网站声明行保持 --uc-ink-med 不动**（那条承载取件/隐私告知，要让人看清）。 */
.uc-footer__icp {
    color: var(--uc-ink-dis);
}

.uc-footer__icp a {
    color: inherit;
    text-decoration: none;
}

.uc-footer__icp a:hover {
    color: var(--md-primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .uc-footer {
        /* 62px 时探针实测「浮标(18+46=64px) vs 声明行」仍有 2px 竖向重叠 ⇒ 抬到 72px。
           （浮标底部 18px + 自身 46px = 占掉离底 64px，页脚内边距必须 > 64px。） */
        padding: 24px 14px 72px;
    }

 /* 手机端不显示「ICP备案」那一行。
       桌面端照常显示。⛔ 只藏不删：键还留着，将来要恢复删掉这一条即可。 */
    .uc-footer__icp {
        display: none;
    }
}

/* =============================================================================
 顶部提示（toastr）· 前台皮肤 —— 新增
   -----------------------------------------------------------------------------
 （截图，箭头从「查询」按钮指到屏幕右上角那条红提示）：
     「你看看，你这个我点查询，这个提示跑到哪里去了？」

   实测根因（不是"提示没弹"，是**位置和皮肤都不对**）：
     · 前台 Index 模板（首页 / 商品详情 / 查单 / 工具页 / 提货码页）只加载
       `_.css + _glass.css + index.css + component.css + toastr.min.css`，
       **没有 `md-tokens.css` / `md-components.css`** —— 而"顶部居中 + 液态玻璃 +
       彩色圆形徽章"那套 toast 皮肤恰恰**只写在 md-components.css 里**（内页/用户中心
       走 Common/Header.html，是引了它的）。
     ⇒ 前台主流程的所有提示都退回 **toastr 出厂默认**：
        `top:12px; right:12px`（屏幕右上角）、深红底 `#bd362f`、白字、3px 方角，
        且 `#toast-container` 的 z-index 是 99999999 ⇒ 直接压在吸顶导航（78px）上面。
     实测数据（1440×900，空输入点首页「查询」）：toast 落在 (1128,12) 300×51、
     底 `rgb(189,54,47)`、字 `rgb(255,255,255)`、圆角 3px；提示中心离按钮中心 **202px**。

   本段做什么：把后台那套皮肤搬到前台（视觉与用户中心统一），落点改成
   **吸顶导航正下方留一段呼吸区 + 水平居中**（导航 `.uc-topbar` 桌面 78px / 手机 68px，见探针实测）。
   ⛔ 间隔值会改：桌面 `top:146px`（78 + 68）、手机 `top:116px`（68 + 48）——
      改小会贴上导航、并压住首屏商品标题行；改大则侵入商品参数区。

   ⛔ 两条硬约束：
     ① 颜色变量只能用**前台真的加载了的** —— `--uc-ink` / `--uc-ink-med` / `--md-primary`
        （`_glass.css` 提供）。⛔ 别照抄 md-components 的 `var(--md-on-surface)`：
        它来自 md-tokens.css，前台**没有**这个变量 ⇒ 白玻璃上会落到继承色（白字白底）。
     ② `@keyframes uc-toast-in` 得**一起搬**（原来只在 md-components.css 里）。
   ============================================================================= */

:root[data-theme] #toast-container {
    top: 146px !important;             /* 吸顶导航 78px 下方再留 68px 呼吸区；
                                          改小会贴上导航、并压住首屏商品标题行 */
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
}

:root[data-theme] #toast-container > div {
    width: auto !important;
    min-width: 200px;
    max-width: 460px;
    margin: 0 auto 12px !important;
    padding: 15px 22px 15px 54px !important;
    border-radius: 14px !important;
    background-color: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(17, 24, 39, .06) !important; /* divider-ok: 浮层轮廓靠下面三层投影分界，这 1px 边只是补描 */
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 24px -8px rgba(17, 24, 39, .18),
                0 20px 52px -16px rgba(17, 24, 39, .16) !important;
    opacity: 1 !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 22px 22px !important;
    animation: uc-toast-in .42s cubic-bezier(.16, 1, .3, 1) both;
    transition: box-shadow .2s ease, transform .2s ease;
}

:root[data-theme] #toast-container > div:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(17, 24, 39, .07), 0 16px 32px -8px rgba(17, 24, 39, .24),
                0 28px 64px -16px rgba(17, 24, 39, .2) !important;
}

/* 中性玻璃面 + 深浅墨字（前台用 --uc-ink，见文件头 ①） */
:root[data-theme] #toast-container .toast-title {
    color: var(--uc-ink) !important;
    font-weight: 700 !important;
    font-size: 14px;
}

:root[data-theme] #toast-container .toast-message {
    color: var(--uc-ink) !important;
    font-size: 14.5px;
    font-weight: 600 !important;
    letter-spacing: .01em;
    line-height: 1.4;
}

/* 进度条：细、圆、低调 */
:root[data-theme] #toast-container .toast-progress {
    background: var(--md-primary) !important;
    opacity: .45;
    height: 3px !important;
    border-radius: 999px;
    margin: 6px 6px 0;
}

/* 彩色圆形图标徽章（替掉 toastr 默认的白色图标；固定 hex，浅/暗面都清晰） */
:root[data-theme] #toast-container > .toast,
:root[data-theme] #toast-container > .toast-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233b82f6'/%3E%3Cpath d='M12 10.8v6.6' stroke='white' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='1.35' fill='white'/%3E%3C/svg%3E") !important;
}

:root[data-theme] #toast-container > .toast-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322a95b'/%3E%3Cpath d='M6.6 12.5l3.2 3.2L17 7.9' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

:root[data-theme] #toast-container > .toast-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e5484d'/%3E%3Cpath d='M8.3 8.3l7.4 7.4M15.7 8.3l-7.4 7.4' stroke='white' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

:root[data-theme] #toast-container > .toast-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f0a81e'/%3E%3Cpath d='M12 6.6v7.2' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.35' fill='white'/%3E%3C/svg%3E") !important;
}

/* 暗色玻璃面 */
:root[data-theme="dark"] #toast-container > div {
    background-color: rgba(28, 32, 41, .9) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -8px rgba(0, 0, 0, .5),
                0 20px 52px -16px rgba(0, 0, 0, .42) !important;
}

@keyframes uc-toast-in {
    from { opacity: 0; transform: translateY(-16px) scale(.93); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    :root[data-theme] #toast-container {
        top: 116px !important;         /* 手机吸顶导航 68px + 48px；改小会贴上导航 */
    }

    :root[data-theme] #toast-container > div {
        min-width: 0;
        max-width: calc(100vw - 28px);
        padding: 13px 16px 13px 48px !important;
        background-position: 15px center !important;
    }
}

/* ============================================================
 商品详情页「商品参数」区 —— 定
 「详情页，这边的参数应该是：官网直登 √或X，高级模型支持
             使用有效期 XX-XX天，超额奖励 随机（或无，默认随机），
             支付默认 支付宝或微信……**然后，才是查询密码**。」
   位置：价格分隔线下方、查询密码上方（模板 Index/Item.html 里固定在那儿，别挪）。
   数据：acg_commodity.specs（JSON [{k,v}]）→ Model\Commodity::parseSpecs → 主题拿数组。
   ⛔ 纯展示。不参与下单、不参与库存价格计算；没配参数的旧商品整块不输出。
   ============================================================ */
/* ⛔ 查询密码与商品参数共用一个外框：
   ⇒ 卡片形态从「列表（ul）自己带框」改成「外层容器带框」，
      参数行与查询密码共用同一个框，中间靠 .item-specs__list + .item-specs__query 的发丝线分开。
   ⛔ 外框色不要写 `var(--glass-border-soft)` —— 浅色下是 rgba(255,255,255,.40)（白），
      白底上硬边完全隐形（坑 69 同源）。统一半透明主色。 */
.item-specs {
    margin: 2px 0 14px;
    padding: 3px 13px;
    border: 1px solid rgba(var(--md-primary-rgb), .22);
    border-radius: 14px;                 /* 与全站卡片圆角一致（卡片 14px / 控件 4px） */
    background: var(--glass-bg-soft);
    box-shadow: 0 4px 16px rgba(31, 45, 70, .06);
}

/* ⛔ 原 `.item-specs:has(.item-specs__query){padding-bottom:12px}` 已删：
   查询密码改成左右布局后，它自带 9px 上下内距，再叠 12px 会让卡底白一大片、上下不对称。
   现在靠 `.item-specs__query` 自己的 padding 平衡（3px 卡内距 + 9px = 与首行同高）。 */

:root[data-theme="dark"] .item-specs {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

/* 列表本身不再承担卡片职责（框/底色/圆角都上移到 .item-specs） */
.item-specs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 查询密码与上面的参数行之间：一条分组线 + 一段呼吸
   ⛔ 用相邻兄弟选择器，只有「确实有参数行」时才画线；旧商品没配 specs 就只有输入框、不出线。
   ⛔ padding-top 交给 .item-specs__query 自己（9px，与参数行同节奏），这里只画线。
   ⛔⛔ 线色**必须** rgba(var(--md-primary-rgb), .22)（与卡片外框同源），
      原来写死 rgba(31,45,70,.08) —— 8% 深色压白底混出 #EDEEF0，1px 线在截图/缩放后
      **完全看不见**，等于没画（见 references/04 坑 69 / 坑 87）。
      同一个坑家里已经栽过 3 次（见 references/04 坑 69），闸门 scripts/check-divider-visible.php。 */
.item-specs__list + .item-specs__query {
    margin-top: 0;
    border-top: 1px solid rgba(var(--md-primary-rgb), .22);
}

:root[data-theme="dark"] .item-specs__list + .item-specs__query {
    border-top-color: rgba(255, 255, 255, .10);
}

/* 查询密码 = 左右布局：
   左列 84px 与参数名 .item-specs__k 完全同宽 ⇒ 竖直看下来「查询密码」四个字
   和上面「官网直登 / 登录 / …」左边缘成一条线；右列输入框占满剩余宽度。
   ⛔ label 别再用 bootstrap 的 `.form-label.mb-1`（.mb-1 是 !important，覆盖不掉），
     模板里已换成 .item-specs__query-k。 */
.item-specs__query {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;                 /* 与 .item-specs__row 的 9px 上下同节奏 */
}

.item-specs__query-k {
    flex: 0 0 84px;                 /* ⛔ 必须与 .item-specs__k 的 flex-basis 一致 */
    margin: 0;
    color: var(--uc-ink-med);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

/*查询密码必填星号：只染色、不加宽（左列 0 0 84px 定宽，加宽会把输入框起点顶偏）*/
.item-specs__req {
    color: #e5484d;
    font-weight: 600;
}

.item-specs__query .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;                   /* 与「购买数量」输入组 / 立即支付按钮同高 */
}

.item-specs__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    /* 14.5px：13px 显得小，一眼扫不清键值 */
    font-size: 14.5px;
    line-height: 1.5;
}

/* 行间发丝线（只在**单列**时可见，≥640px 两列那段会把它关掉）：
   ⛔ 别用 --glass-border-soft —— 浅色下是 rgba(255,255,255,.40)（白），压白底等于没有线。
   ⛔ 也别用写死的深色低透明度 —— 原来 .08 就是"注释写着要看得见、数值却隐形"的反面教材
      （白底上混出 #EDEEF0）。统一 rgba(var(--md-primary-rgb), .16)：比分组线(.22)轻一档。 */
.item-specs__row + .item-specs__row {
    border-top: 1px solid rgba(var(--md-primary-rgb), .16);
}

:root[data-theme="dark"] .item-specs__row + .item-specs__row {
    border-top-color: rgba(255, 255, 255, .10);
}

/* 参数名定宽、值紧跟其右（左对齐）。
   ⛔ 别写成 justify-content:space-between —— 右栏有 430px 宽，值会被甩到最右边，
      中间一整片空白，看着很散（第一版就是这样，已否）。 */
.item-specs__k {
    flex: 0 0 84px;
    color: var(--uc-ink-med);
}

.item-specs__v {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--uc-ink);
    /* ⛔ 值不加粗（原 font-weight:600）。参数卡是「读信息」不是「喊口号」，
       键值同字重反而更清楚。 */
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* √ 绿 / X 红：语义色写死，不跟主题令牌（前台没加载 --md-error 那一套） */
.item-specs__v.is-yes {
    color: #16a34a;
}

.item-specs__v.is-no {
    color: #dc2626;
}

:root[data-theme="dark"] .item-specs__v.is-yes {
    color: #4ade80;
}

:root[data-theme="dark"] .item-specs__v.is-no {
    color: #f87171;
}

/* ============================================================
   商品参数「两列 + 表格网格线」（≥640px）
   为什么两列：单列时每行的「值」紧贴左侧、右侧一整片空白 ——
     实测 /item/3 桌面 1440：列表 539px，而最长的值「邮箱账密」只占 58px
     ⇒ 每行右侧约 445px 空着，五行竖着堆 ~200px 高（卡片被撑长、右半张白）。
     两列后 5 项压成 3 行，竖向省 ~80px，右侧空白由第二列填上。
   ⛔ 断点别再往下调：390px 视口下列表只有 296px，两列每列 138px，
     而「订阅有效期」5 个字就 73px + 值 ⇒ 必挤成换行。**手机走单列**。
   ⛔ 只改 CSS：DOM 仍是 `ul > li`，grid 直接作用在 `ul` 上，模板一行不用动。

   —— 网格线为什么这么写（每条都是「换个写法就坏」）——
   ⛔ 列间距必须归 0：横线是每格的 border-bottom，只有左右两格紧挨时两条底线
     才连成一条完整横线；留 column-gap 就会在间距处断开 ⇒ 又变成两个碎表格。
     留白改由格内 padding 提供，再用 margin: 0 -13px 把首列文字拉回原位
     （不抵消的话整块右移 13px，与上方价格 / 标题的左边缘错位）。
   ⛔ 竖线用 border-left，不用伪元素：间距归 0 后 border 正好落在两格分界处；
     代价是占掉 1px 内容宽 ⇒ padding-left: 12px 补回（12 + 1 = 13）才对称。
   ⛔ 行间兄弟线必须关掉，否则与 border-bottom 叠成双线。
   ⛔ 末行底线必须去掉，且要分两种情形：末项为奇数 = 落单（只关它自己）；
     末项为偶数 = 末行满（关末两项）。⛔ 只写 nth-last-child(-n+2) 是错的
     —— 它会把倒数第二行的底线也关掉，5 项时网格中间会缺一条横线。
   ⛔ 本段 @media 必须写在下面几条顶层规则之后：@media 不加特异性，
     写前面会被同样特异性的顶层规则静默吃掉。
   ⛔ 线色 .16 = 与行间线同档（比卡片外框 / 分组线 .22 轻一档）；
     dark 下单独提亮，否则落进「深色但太淡 = 看不见」的老坑。
   ============================================================ */
@media (min-width: 640px) {
    .item-specs__list {
        /* 网格线色：一处改、横竖两处一起变 */
        --specs-grid: rgba(var(--md-primary-rgb), .16);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0;
        margin: 0 -13px;
    }

    :root[data-theme="dark"] .item-specs__list {
        --specs-grid: rgba(255, 255, 255, .12);
    }

    .item-specs__row {
        padding: 9px 13px;
        border-bottom: 1px solid var(--specs-grid);
    }

    .item-specs__row + .item-specs__row {
        border-top: 0;
    }

    .item-specs__row:nth-child(even) {
        border-left: 1px solid var(--specs-grid);
        padding-left: 12px;
    }

    .item-specs__row:nth-child(odd):last-child,
    .item-specs__row:nth-child(even):last-child,
    .item-specs__row:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }
}

/* ============================================================
   内核 3.8.4 新增块（原样搬来，别删、别与上面的定制段合并）
   来源 = 升级包 kernel/Install/Update/3.8.4/file/assets/user/css/index.css
   内容 = 「卡密文件交付」(.acg-delivery__*) + 卡密弹窗皮肤 (:has(.acg-secret))
   ⛔ 删了交付区/弹窗会掉成裸样式（升级包只带这一份，别处没有）。
   ⛔ 下次再升级仍按「本段在上、新增块在下」的边界重新拼。
   ⛔ 升级只覆盖 index.css 的定制段：基线里有 34 条选择器与升级版同名但声明体
     不同（.panel 圆角 / .chip 高度 / .cash-pay 的 --cta / .form-control 描边 /
     售罄不走 opacity）—— 那些**一律用我们的版本**，别被升级版顶回去。
   ============================================================ */
/* ---------- File-card download rows (acgDelivery, ready.js): query page + purchase dialog ---------- */
body.uc-body {
    --acg-delivery-accent: var(--md-primary);
    --acg-delivery-accent-soft: rgba(var(--md-primary-rgb), .07);
    --acg-delivery-on-accent: var(--md-on-primary);
    --acg-delivery-surface: var(--uc-field-bg);
    --acg-delivery-border: var(--glass-border-soft);
    --acg-delivery-radius: 12px;
    --acg-delivery-success: #1fa971;
}
:root[data-theme="dark"] body.uc-body {
    --acg-delivery-success: #4fd39b;
}
body.uc-body .acg-delivery__file {
    margin: 0;
    line-height: 1.5;
    box-shadow: var(--glass-hi);
}
body.uc-body .acg-delivery__icon {
    box-shadow: inset 0 0 0 1px rgba(var(--md-primary-rgb), .06);
}
body.uc-body .acg-delivery__name {
    color: var(--uc-ink);
}
body.uc-body .acg-delivery__sub,
body.uc-body .acg-delivery__url {
    color: var(--uc-ink-med);
    opacity: 1;
}
body.uc-body .acg-delivery__url {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.uc-body .card-section .acg-delivery__download,
body.uc-body .card-section .acg-delivery__copy {
    min-height: 36px;
    border-radius: 11px;
}
body.uc-body .card-section .acg-delivery__download {
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .22);
}
@media (pointer: coarse) {
    body.uc-body .card-section .acg-delivery__download,
    body.uc-body .card-section .acg-delivery__copy {
        min-height: 40px;
    }
}
body.uc-body .acg-delivery__copy {
    color: var(--uc-ink);
    border-color: rgba(var(--md-primary-rgb), .16);
    background: var(--glass-bg-soft);
}
body.uc-body .acg-delivery__copy:hover {
    background: rgba(var(--md-primary-rgb), .07);
}
body.uc-body .acg-delivery__copy.is-done {
    color: var(--acg-delivery-success);
    border-color: currentColor;
}
body.uc-body .acg-delivery__download:focus-visible,
body.uc-body .acg-delivery__copy:focus-visible {
    outline-color: var(--uc-focus);
}
@media (max-width: 520px) {
    body.uc-body .acg-delivery__file {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 10px;
    }

    body.uc-body .acg-delivery__icon {
        width: 40px;
        height: 40px;
    }

    body.uc-body .acg-delivery__actions {
        grid-column: 2;
    }
}
/* Purchase dialog (treasure.show): glass card that stays readable in dark mode */
body.uc-body .layui-layer-page:has(.acg-secret) {
    color: var(--uc-ink);
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-shadow-lg), var(--glass-hi);
    overflow: hidden;
}
:root[data-theme="dark"] body.uc-body .layui-layer-page:has(.acg-secret) {
    background: rgba(28, 32, 41, .9) !important;
}
body.uc-body .layui-layer-page:has(.acg-secret) .layui-layer-title {
    color: var(--uc-ink);
    font-weight: 600;
    box-shadow: none;
    border-bottom: 1px solid var(--glass-border-soft) !important;
}
body.uc-body .layui-layer-page:has(.acg-secret) .layui-layer-title i {
    color: var(--uc-ink-med);
}
:root[data-theme="dark"] body.uc-body .layui-layer-page:has(.acg-secret) .layui-layer-close {
    filter: invert(1);
}