:root{
  --bg:#0a0c14;
  --bg2:#0f1320;
  --panel:#141a2b;
  --panel2:#1b2236;
  --line:rgba(255,255,255,.08);
  --txt:#e9edf6;
  --muted:#8b93a7;
  --brand:#7c5cff;
  --brand2:#21d4fd;
  --gold:#ffd27a;
  --ok:#36d399;
  --danger:#ff5c7c;
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --grad:linear-gradient(120deg,var(--brand),var(--brand2));
}
*{box-sizing:border-box;margin:0;padding:0}
/* 全局防横向溢出：只用 html 的 overflow-x。
   ⚠️ 绝不能在 body 上写 overflow-x:hidden —— body 一旦有一个轴为 hidden，
   另一轴的 visible 会被计算成 auto，body 就变成独立滚动容器，手机端整页无法滚动
   （scrollY 恒为 0，只有 body.scrollTop 能动）。这里用 clip：能裁剪、不建滚动容器。 */
html{overflow-x:hidden}
body{overflow-x:clip;max-width:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(124,92,255,.18),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(33,212,253,.12),transparent 55%),
    var(--bg);
  color:var(--txt);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
/* D2：键盘可达性 —— 统一的焦点环。
   原来全站没有任何 :focus-visible 样式，键盘用户（Tab 导航）
   完全看不出焦点当前落在哪个元素上。
   只对键盘焦点生效（:focus-visible），鼠标点击不会出现难看的描边。 */
:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:6px}
/* 搜索框等有自定义 focus 样式的元素，保留自己的边框高亮即可 */
.search-box:focus-within{outline:none}
.wrap{max-width:none;margin:0;padding:0 clamp(16px,3vw,40px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,12,20,.72);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:18px;height:64px;padding:0 clamp(16px,3vw,40px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:900;box-shadow:0 6px 18px rgba(124,92,255,.45)}
.brand-logo{width:34px;height:34px;object-fit:contain;display:block;flex:0 0 auto;
  filter:drop-shadow(0 4px 12px rgba(33,212,253,.35))}
.cat-nav{display:flex;gap:6px;flex:1;overflow:auto;scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{padding:7px 13px;border-radius:999px;color:var(--muted);font-size:14px;white-space:nowrap;transition:.2s}
.cat-nav a:hover,.cat-nav a.active{color:#fff;background:var(--panel2)}
.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.icon-btn{position:relative;width:42px;height:42px;border-radius:12px;background:var(--panel);
  display:grid;place-items:center;color:var(--txt);transition:.2s;border:1px solid var(--line)}
.icon-btn:hover{background:var(--panel2);transform:translateY(-1px)}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.ghost-btn{padding:9px 14px;border-radius:12px;border:1px solid var(--line);color:var(--muted);font-size:14px}
.ghost-btn:hover{color:#fff;border-color:var(--brand)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:78px 0 56px}
.hero-inner{position:relative;text-align:center}
.hero-glow{position:absolute;inset:-40% 0 auto 0;height:420px;margin:auto;width:720px;
  background:radial-gradient(closest-side,rgba(124,92,255,.35),transparent);filter:blur(30px);z-index:-1}
.hero-title{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-.5px}
.hero-sub{color:var(--muted);margin:16px auto 0;max-width:560px;font-size:16px}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.btn-primary{display:inline-block;padding:13px 26px;border-radius:12px;background:var(--grad);color:#fff;
  font-weight:700;box-shadow:0 10px 30px rgba(124,92,255,.4);transition:.2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(124,92,255,.5)}
.btn-primary.block{display:block;width:100%;text-align:center}
.btn-line{padding:13px 26px;border-radius:12px;border:1px solid var(--line);color:var(--txt);font-weight:600;transition:.2s}
.btn-line:hover{border-color:var(--brand2);color:#fff}
.hero-stats{display:flex;gap:34px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.hero-stats .st{text-align:center}
.hero-stats .num{font-size:26px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .lab{color:var(--muted);font-size:13px}

/* 区块 */
.block{margin-top:42px}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.block-head h2{font-size:22px;font-weight:800}
.more{color:var(--brand2);font-size:14px;font-weight:600}

/* ---- 商品搜索框 ---- */
/* 首页搜索区块：比普通 .block 收紧上边距，避免 hero 之下留白过大 */
.search-block{margin-top:30px}
.search-box{position:relative;display:flex;align-items:center;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:6px 6px 6px 14px;transition:.2s}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.search-ico{display:grid;place-items:center;color:var(--muted);flex:0 0 auto;cursor:pointer;
  width:26px;height:26px;transition:.2s}
.search-box:focus-within .search-ico{color:var(--brand2)}
.search-input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);
  font-size:15px;font-family:inherit;padding:10px 10px 10px 6px;line-height:1.4}
.search-input::placeholder{color:var(--muted)}
/* 去掉 type=search 的原生清除按钮（各浏览器样式不统一） */
.search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-btn{flex:0 0 auto;padding:10px 22px;border-radius:10px;background:var(--grad);color:#fff;
  font-weight:700;font-size:14px;transition:.2s;white-space:nowrap}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,92,255,.4)}
/* 联想下拉 */
.search-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;max-height:360px;overflow-y:auto}
/* C3：联想项从单行省略改为 2 行 clamp。
   站内标题普遍很长（「X 账号 - 墨西哥 | 创建时间: 约 6 年前 | Hotmail 验证 | ...」），
   单行省略会把关键信息全切掉，用户点进去才发现不是自己要的。 */
.sug-item{display:flex;align-items:center;gap:12px;padding:11px 16px;transition:.15s}
.sug-item:hover{background:var(--panel2)}
.sug-name{flex:1;min-width:0;font-size:14px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.sug-price{flex:0 0 auto;color:var(--brand2);font-weight:700;font-size:13px}
.sug-all{display:block;padding:11px 16px;font-size:13px;color:var(--brand2);
  border-top:1px solid var(--line);background:rgba(124,92,255,.06)}
.sug-all:hover{background:var(--panel2)}
.sug-empty{padding:14px 16px;font-size:13px;color:var(--muted)}
/* 热门搜索标签 */
.search-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.search-tags b{color:var(--muted);font-weight:400}
.search-tags a{padding:5px 12px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--line);color:var(--muted);font-size:13px;transition:.2s}
.search-tags a:hover{color:#fff;border-color:var(--brand);background:var(--panel)}
/* 列表页顶部搜索（紧凑版） */
.list-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.search-box.sm{padding:3px 3px 3px 10px;border-radius:10px;width:220px}
.search-box.sm .search-input{font-size:14px;padding:7px 6px 7px 4px}
.search-box.sm .search-ico{width:20px;height:20px}
/* 首页左右布局 + 左侧栏 */
.home-layout{display:grid;grid-template-columns:268px minmax(0,1fr) 300px;gap:22px;padding:24px clamp(16px,3vw,40px) 60px;align-items:start}
/* 三栏内容区最小宽度归零：否则内部 nowrap 文本（如长商品名）会把 1fr 轨道撑破 */
.home-main{min-width:0}
.list-main{min-width:0}
/* 首页三栏 · 左/右栏为贯穿全屏的竖排栏 */
.home-side,.home-right{
  position:sticky;top:88px;align-self:start;height:calc(100vh - 112px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px;display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin}
.home-side::-webkit-scrollbar,.home-right::-webkit-scrollbar{width:6px}
.home-side::-webkit-scrollbar-thumb,.home-right::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.side-card{padding:14px 10px;min-width:0}
/* 分类栏折叠按钮：桌面端不需要（分类栏常驻），只在手机端显示 */
.side-toggle{display:none}
.side-card + .side-card{border-top:1px solid var(--line)}
.side-card h4{font-size:13px;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px}
.side-card h4::before{content:"";width:4px;height:14px;border-radius:3px;background:var(--grad)}
.cat-list{display:flex;flex-direction:column;gap:2px;flex:1}
/* ===== 分类树视觉层级重构（不动 DOM/JS，只调 CSS）=====
   改动前实测问题（桌面 1440 / 深色主题）：
   ① 缩进步长不统一：一级文字 x=59 / 二级 x=80(+21) / 三级 x=96(+16)；
   ② 二三级字号、行高完全相同（13px / 32px），层级分不出；
   ③ 一级圆点按索引循环 6 种随机渐变（app.js 的 DOTS[i%6]），
      颜色和分类语义无关，整栏像贴纸墙；
   ④ 子级圆点被 .cat-children a 的 overflow:hidden 裁掉——
      a::before 定位在 left:-9px（a 盒子之外），overflow:hidden 会把它一起切掉，
      所以整栏只有一级看得到圆点；
   ⑤ 引导线用 var(--line)（深色下 rgba(255,255,255,.08)），几乎看不见；
   ⑥ depth>=2 的容器 ::before 被 display:none，三级像「凭空多出来的列表」。
   重构策略：
     · 缩进：一级文字 29 → 46 → 66 → 86px（步长 17/20/20，视觉均匀）
     · 字号：14.5 → 13.5 → 13 → 12.5，行高同步递减
     · 一级圆点：统一品牌渐变（!important 压过 app.js 的行内 style）
     · 子级圆点：去掉 overflow:hidden 让圆点显形，同时把 a 改成 flex，
       让 .cat-name 的 flex:1 + min-width:0 + ellipsis 继续截断超长分类名
     · 引导线：改用品牌淡紫 rgba(124,92,255,.26)，每级都画、逐级变淡 */
.cat-list a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  color:var(--muted);font-size:14.5px;transition:.2s}
.cat-list a:hover,.cat-list a.active{background:var(--panel2);color:#fff}
/* 一级圆点：统一品牌渐变。app.js 的 catNodeHTML 会给一级圆点写行内
   style="background:<DOTS[i]>",行内样式优先级高于普通选择器，
   必须 !important 才能压过它（不动 JS，纯 CSS 覆盖）。 */
.cat-list a .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--grad) !important;box-shadow:0 0 0 3px rgba(124,92,255,.14)}
.cat-list a.active .dot{box-shadow:0 0 0 3px rgba(124,92,255,.30)}
/* ---- 分类树：一级 + 可展开二级（默认展开） ---- */
.cat-list a .cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-list a .cat-count{flex:0 0 auto;font-size:11px;line-height:1;color:var(--muted);
  background:var(--panel2);border-radius:20px;padding:3px 7px}
.cat-list a .cat-arrow{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;
  font-size:11px;color:var(--muted);border-radius:6px;transition:transform .2s,background .2s,color .2s;cursor:pointer}
.cat-list a .cat-arrow:hover{background:var(--panel2);color:var(--txt)}
.cat-list a .cat-arrow.closed{transform:rotate(-90deg)}
.cat-list a.cat-parent.has-active{background:var(--panel2)}
.cat-list a.cat-parent.has-active .cat-name{color:var(--txt)}
/* 子级容器：缩进 20px 步长。
   引导线 left:15px——实测（1440 视口）一级圆点中心在 x=74
   （一级 a 左边界 59 + a.padL 11 + dot 半径 4），二级容器左边界 59，
   所以引导线必须落在容器内 74-59=15px 处，才与父级圆点严格同轴。 */
.cat-children{display:flex;flex-direction:column;gap:1px;position:relative;
  margin:2px 0 6px;padding-left:20px}
.cat-children::before{content:"";position:absolute;left:15px;top:4px;bottom:4px;width:2px;
  border-radius:2px;background:rgba(124,92,255,.26)}
/* 二级链接：13.5px，行高 33px。
   注意：.home-side 是 height:calc(100vh - 112px) + overflow:auto 的
   sticky 内滚容器（原有设计），整树实测高 1088px 视口下就要滚动，
   所以每级行高都要抠着给——二级 35px 会让树多涨 63px、
   把「海外邮箱/海外节点」两项挤出首屏，这里压到 33px。
   必须是 flex——flex 才能让 .cat-name 的 flex:1+min-width:0
   正确截断超长分类名，同时 .cat-count/.cat-arrow 靠右不被压缩。
   注意：这里**不能**保留 overflow:hidden，否则会连带裁掉溢出的圆点（见下）。
   圆点不再用 left:-11px 的负绝对定位（那正是被 overflow:hidden 切掉、
   且与引导线错位的根因），改成 flex 子项 + 负 margin 拉进 padding 区，
   永远在盒子内、永不与引导线错位。 */
.cat-children a{display:flex;align-items:center;gap:8px;
  padding:6px 10px 6px 11px;border-radius:8px;min-width:0;
  font-size:13.5px;color:var(--muted);transition:.2s}
.cat-children a .cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 子级小圆点：flex 子项，用负 margin 把自己拉到 padding 左侧，
   与父级引导线（left:9px）严格同轴。二级实心圆，三级方点。 */
.cat-children a::before{content:"";flex:0 0 auto;
  width:5px;height:5px;margin-left:-16px;margin-right:11px;border-radius:50%;
  background:rgba(124,92,255,.34);transition:.2s}
.cat-children a:hover{background:var(--panel2);color:var(--txt)}
.cat-children a:hover::before{background:var(--brand2)}
.cat-children a.active{background:var(--panel2);color:var(--txt);font-weight:600}
.cat-children a.active::before{background:var(--brand2);box-shadow:0 0 6px var(--brand2)}
.cat-children.collapsed{display:none}
/* 三级及以上：缩进同样 20px 步长，引导线逐级变淡（层级越深越退后）。
   必须显式写 display:block——线上旧样式表里有
   `.cat-children[data-depth="2"]::before,...{display:none}`，
   特异性与这里相同(0,2,1)，只靠 background 覆盖会输给旧规则。 */
.cat-children[data-depth="2"]{padding-left:20px}
.cat-children[data-depth="3"]{padding-left:20px}
.cat-children[data-depth="4"]{padding-left:20px}
.cat-children[data-depth="2"]::before{display:block;background:rgba(124,92,255,.26)}
.cat-children[data-depth="3"]::before{display:block;background:rgba(124,92,255,.17)}
.cat-children[data-depth="4"]::before{display:block;background:rgba(124,92,255,.11)}
/* 三级及以下的字号再降半档、行高再收，形成 14.5 → 13.5 → 13 → 12.5 的清晰阶梯。
   行高 40 → 33 → 31：.home-side 是内滚容器（见上），
   改动前整树 1224px 已超 1088px 视口，所以这里只加 21px
   （21 个二级各 +1px），不把更多分类挤出首屏。 */
.cat-children[data-depth="2"] a{font-size:13px;padding:6px 10px 6px 11px}
.cat-children[data-depth="3"] a{font-size:12.5px;padding:5px 10px 5px 11px}
.cat-children[data-depth="4"] a{font-size:12.5px;padding:5px 10px 5px 11px}
/* 三级及以下的圆点改小一档，避免和二级圆点等大造成「同级」误读。
   净位移仍保持 -5px（-16+11），与二级圆点、引导线同轴。 */
.cat-children[data-depth="2"] a::before{width:4px;height:4px}
.cat-children[data-depth="3"] a::before{width:4px;height:4px;border-radius:1px}
.cat-children[data-depth="4"] a::before{width:4px;height:4px;border-radius:1px}
.side .cat-list a{display:flex}   /* 商品列表页侧栏复用树结构 */
/* ---- 行式商品列表（图 | 名称+简介 | 库存 | 价格 | 操作） ---- */
.prod-list{display:flex;flex-direction:column;gap:10px}
.prod-list .empty{grid-column:auto}
/* B3：hover 时左侧展开一道品牌色高亮条（::before + scaleY），
   比原来偏弱的边框变色反馈更明确。只在桌面端启用（见 980px 断点内的关闭规则）。 */
.prod-row{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;transition:.2s}
.prod-row::before{content:"";position:absolute;left:0;top:50%;width:3px;height:60%;
  border-radius:0 3px 3px 0;background:var(--grad);
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform .22s ease,opacity .22s ease;opacity:0;pointer-events:none}
.prod-row:hover::before{transform:translateY(-50%) scaleY(1);opacity:1}
.prod-row:hover{border-color:var(--brand2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.prod-row.soldout{opacity:.55}
.row-thumb{flex:0 0 auto;width:72px;height:72px;border-radius:10px;overflow:hidden;
  background:var(--panel2);display:grid;place-items:center}
.row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row-thumb .noimg{font-size:11px;color:var(--muted)}
.row-main{flex:1 1 300px;min-width:0}
/* B1：标题 15→15.5px，让标题成为行内第一视觉焦点 */
.row-name{display:-webkit-box;font-weight:700;font-size:15.5px;line-height:1.4;color:var(--txt);text-decoration:none;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.row-name:hover{color:var(--brand2)}
/* B1：简介 12→12.5px，行高 1.55→1.5，弱化但保持可读 */
.row-intro{margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* B1+B2：库存从「彩色药丸」改为轻量文字形态（去背景/去内边距），
   降低视觉噪音；浅色主题下单独提亮保证对比度（见 light 段）。 */
.row-stock{flex:0 0 auto;font-size:12.5px;color:var(--muted);white-space:nowrap;
  padding:2px 0;letter-spacing:.2px}
/* B1：价格 16→17px，与标题形成清晰的「看什么/看多少钱」两级 */
.row-price{flex:0 0 auto;font-size:17px;font-weight:800;white-space:nowrap;letter-spacing:.2px}
.row-op{flex:0 0 auto;min-width:92px;display:flex;justify-content:flex-end}
.row-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 18px;
  border-radius:10px;background:var(--grad);color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;user-select:none;text-decoration:none;transition:.2s}
.row-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.row-btn.disabled{background:var(--panel2);color:var(--muted);cursor:not-allowed;transform:none}
.row-btn.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
@media(max-width:760px){
  .prod-row{gap:6px 8px;padding:9px 12px;min-width:0}
  /* B3：移动端关闭高亮条（触屏无 hover，避免误触时闪烁） */
  .prod-row::before{display:none}
  .row-thumb{width:52px;height:52px}
  .row-main{flex:1 1 calc(100% - 62px);min-width:0}
  .row-stock,.row-price{font-size:12px}
  /* 第二行：库存可压缩（超长省略），价格+购买按钮靠右且不被挤到第三行 */
  .row-stock{order:1;flex:0 1 auto;min-width:0;padding:3px 0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row-price{order:2;margin-left:auto}
  .row-op{order:3;min-width:0}
  .row-btn{padding:7px 13px;font-size:12px;white-space:nowrap}
}
/* 手机上商品名允许折行（最长可达三行），避免超长英文名撑破布局或全变省略号 */
/* A2：移动端行高压缩 —— 保留 3 行 clamp 语义不变，只收紧行距与间距。
   基线（390px / cat=7 的 77 行同类口径）：行高均 162px。
   压缩项（均不动信息量，标题仍 3 行、简介仍 2 行）：
     · 标题 line-height 1.4 → 1.32
     · 简介 line-height 1.5 → 1.38
     · 简介上 margin-top 4 → 3
     · 760px 段 .prod-row padding 10 → 9、gap 8 → 6
   复算可省 6px（159 → 153）。 */
@media(max-width:680px){
  .row-name{white-space:normal;overflow-wrap:anywhere;word-break:break-word;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    line-height:1.32}
  .row-intro{-webkit-line-clamp:2;overflow-wrap:anywhere;line-height:1.38;margin-top:3px}
}
html[data-theme="light"] .prod-row:hover{box-shadow:0 8px 24px rgba(30,40,70,.12)}
.notice ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.notice li{position:relative;padding-left:16px;font-size:13px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.notice li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.side-contact{display:flex;flex-direction:column;gap:9px}
.side-contact a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line);font-size:14px;color:var(--txt);transition:.2s}
.side-contact a:hover{border-color:var(--brand2);color:#fff}
/* 客服 Telegram 二维码：图片自带透明圆角，不垫底色/描边，
   让面板色直接透出；宽度撑满侧栏卡片 */
.tg-qr{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);text-align:center}
.tg-qr img{display:block;width:100%;height:auto;margin:0 auto 8px;border-radius:14px;transition:.2s}
.tg-qr a:hover img{transform:translateY(-2px);filter:drop-shadow(0 6px 16px rgba(0,0,0,.28))}
.tg-qr-note{font-size:12px;color:var(--muted)}
/* 多个客服二维码之间的分隔 */
.tg-qr + .tg-qr{margin-top:10px;padding-top:12px}
.rank-list{display:flex;flex-direction:column;gap:4px}
.rank-item{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;transition:.2s}
.rank-item:hover{background:var(--panel2)}
.rank-no{width:22px;height:22px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--panel2);color:var(--muted)}
.rank-item.top1 .rank-no{background:linear-gradient(120deg,#ffd27a,#ff8a5c);color:#1a1205}
.rank-item.top2 .rank-no{background:linear-gradient(120deg,#d7e1ff,#9fb4ff);color:#10204a}
.rank-item.top3 .rank-no{background:linear-gradient(120deg,#ffc09a,#ff9a6b);color:#3a1505}
.rank-mid{flex:1;min-width:0}
.rank-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-name:hover{color:#fff}
.rank-price{font-size:12px;color:var(--gold);font-weight:700;margin-top:2px}
.rank-item{min-width:0}

/* 横幅 */
/* C1：高度从定值 160px 改为随视口缩放（手机上 160px 过高）；
   横向滑动加 scroll-snap，一指一屏更顺手 */
.banner-track{display:flex;gap:14px;overflow:auto;scrollbar-width:none;padding-bottom:4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.banner-track::-webkit-scrollbar{display:none}
.banner{position:relative;flex:0 0 auto;width:100%;max-width:560px;
  height:clamp(120px,20vw,160px);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:linear-gradient(120deg,var(--panel2),var(--panel));
  scroll-snap-align:start}
.banner img{width:100%;height:100%;object-fit:cover}
.banner .cap{position:absolute;left:18px;bottom:16px;font-weight:700;
  font-size:clamp(15px,1.6vw,18px);text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* 商品网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
/* grid 子项最小宽度归零：否则长英文/长串商品名会把轨道撑破（移动端错位根因） */
.grid>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.22s;display:flex;flex-direction:column;min-width:0}
.card:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.5);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,var(--panel2),#0e1422);position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .tag{position:absolute;left:10px;top:10px;background:rgba(10,12,20,.7);border:1px solid var(--line);
  color:var(--gold);font-size:12px;padding:3px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.card .body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
/* A3：卡片标题 min-height 从定值 42px 改为按 clamp 行数自然撑开。
   原 42px 是「15px × 1.35 × 2 行 ≈ 40.5」的手算值，
   短标题时下方会留空洞、与同行 meta 不对齐；现在靠 line-height 自然计算。 */
.card .name{font-weight:700;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:break-word}
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:auto;min-width:0}
.price{color:var(--gold);font-weight:800;font-size:18px;white-space:nowrap}
.price small{color:var(--muted);font-weight:600;font-size:12px;margin-right:1px}
.stock{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .buy{padding:9px 0;border-radius:10px;background:var(--panel2);text-align:center;font-weight:700;font-size:14px;transition:.2s}
.card .buy:hover{background:var(--grad);color:#fff}

/* 列表页 */
.list-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:30px 0 60px}
.side{position:sticky;top:84px;align-self:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.side h4{font-size:13px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.side a{display:block;padding:9px 12px;border-radius:10px;color:var(--muted);font-size:14px;transition:.2s}
.side a:hover,.side a.active{background:var(--panel2);color:#fff}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.list-head h2{font-size:22px;min-width:0}
.sort select{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:26px}
.pager button{padding:8px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.pager button.active{background:var(--grad);color:#fff;border:none}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* 详情页 */
.back{display:inline-block;color:var(--muted);margin:24px 0 14px;font-size:14px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding-bottom:60px}
.detail .gallery{background:linear-gradient(135deg,var(--panel2),#0e1422);border-radius:var(--radius);
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.detail .gallery img{max-width:100%;max-height:100%;object-fit:contain}
.detail .info h1{font-size:26px;font-weight:800;line-height:1.35}
.detail .info .dprice{font-size:30px;font-weight:800;color:var(--gold);margin:14px 0}
.detail .info .dstock{color:var(--muted);font-size:14px;margin-bottom:14px}
.detail .info .desc{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px;white-space:pre-wrap}
.skus{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.sku{padding:10px 15px;border-radius:11px;border:1px solid var(--line);background:var(--panel);font-size:14px;transition:.2s}
.sku.active{border-color:var(--brand);background:var(--panel2);color:#fff}
.dbuy{padding:14px 0;border-radius:13px;background:var(--grad);color:#fff;font-weight:800;font-size:16px;text-align:center;box-shadow:0 10px 30px rgba(124,92,255,.4);transition:.2s}
.dbuy:hover{transform:translateY(-2px)}

/* 空态 */
.empty{text-align:center;color:var(--muted);padding:60px 0;grid-column:1/-1}
.empty .big{font-size:46px;margin-bottom:10px}

/* 页脚 */
.footer{border-top:1px solid var(--line);margin-top:60px;background:rgba(15,19,32,.6)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;padding:34px 20px;flex-wrap:wrap}
.foot-note{color:var(--muted);font-size:13px;margin-top:8px}
.foot-contact{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.foot-contact a{padding:9px 14px;border-radius:11px;background:var(--panel);border:1px solid var(--line);font-size:14px;color:var(--txt)}
.foot-contact a:hover{border-color:var(--brand2)}
.foot-copy{color:var(--muted);font-size:12px;text-align:center;padding:16px 20px;border-top:1px solid var(--line)}

/* 页脚信息链接（隐私政策 / 服务条款 / 关于我们 / 备用网址 / 代理合营 / 免责声明） */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;padding:0 20px 24px;font-size:13px}
.foot-links a{color:var(--muted);transition:color .15s}
.foot-links a:hover{color:var(--txt)}
.foot-links a:focus-visible{outline:2px solid var(--brand2);outline-offset:3px;border-radius:4px}

/* 静态信息页 */
/* 让 #app 撑满视口：短内容页（如只有标题的信息页）页脚也会贴底，不再悬在页面中间。
   注意：这里只给 .view 加 flex 伸缩，不改 display，
   否则会覆盖 [hidden] 的 display:none，导致所有视图同时显示。 */
#app{display:flex;flex-direction:column;min-height:100vh}
#app > main.view{flex:1 0 auto}

.page-doc{max-width:860px;padding:4px 0 70px}
.page-title{font-size:26px;margin:0 0 18px;letter-spacing:.5px}
.page-body{font-size:15px;line-height:1.85;color:var(--txt)}
.page-body h2{font-size:18px;margin:26px 0 10px}
.page-body p{margin:0 0 12px}
.page-body ul{margin:0 0 12px;padding-left:22px}
.page-empty{color:var(--muted);font-size:14px;margin:0;padding:32px 0 0;border-top:1px solid var(--line)}
@media (max-width:600px){
  .page-title{font-size:21px}
  .foot-links{gap:8px 18px;font-size:12px;padding-bottom:20px}
}

/* 抽屉/弹窗 */
.drawer-mask,.modal-mask{position:fixed;inset:0;background:rgba(4,6,12,.6);backdrop-filter:blur(3px);z-index:80}
.drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;background:var(--bg2);
  border-left:1px solid var(--line);z-index:90;display:flex;flex-direction:column;box-shadow:var(--shadow)}
/* C2：抽屉头尾适配安全区。头部避让刘海/灵动岛（横屏时右侧也可能有），
   尾部避让 Home 横条，否则「去结算」按钮会被横条压住点不到。 */
.drawer-head{display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 20px 18px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:18px}
.x{font-size:26px;color:var(--muted);line-height:1}
.drawer-body{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.cart-item{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
.cart-item img{width:56px;height:56px;border-radius:9px;object-fit:cover;background:var(--panel2)}
.cart-item .ci-name{font-size:14px;font-weight:600;line-height:1.3}
.cart-item .ci-price{color:var(--gold);font-weight:700;font-size:14px;margin-top:4px}
.cart-item .ci-q{display:flex;align-items:center;gap:8px;margin-top:6px}
.cart-item .ci-q button{width:26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
/* "删除"文字按钮：覆盖上面的 26x26 方框，否则文字溢出错位 */
.cart-item .ci-q .ci-del{width:auto;min-width:26px;height:26px;padding:0 10px;margin-left:auto;border-radius:8px;
  font-size:12px;line-height:1;white-space:nowrap;color:var(--danger);background:var(--panel2);border:1px solid var(--line)}
/* 无图商品占位块，避免 <img src=""> 触发裂图 */
.cart-item .ci-thumb{width:56px;height:56px;flex:0 0 auto;border-radius:9px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.cart-empty{color:var(--muted);text-align:center;padding:40px 0}
/* C2：抽屉底部加安全区内边距，保证「去结算」在 iPhone 上不被 Home 横条遮挡 */
.drawer-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.cart-total{display:flex;justify-content:space-between;margin-bottom:12px;font-size:15px}
.cart-total b{color:var(--gold);font-size:18px}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:95;width:440px;max-width:92vw;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.modal .x{position:absolute;top:12px;right:16px}
.modal h3{margin-bottom:12px}
.modal p{color:var(--muted);font-size:14px;line-height:1.7}
.modal .row{display:flex;gap:10px;margin-top:18px}
.modal .row .btn-primary,.modal .row .btn-line{flex:1;text-align:center}

/* C2：toast 适配 iPhone 底部安全区（Home 横条区）。
   env(safe-area-inset-bottom) 在刘海屏/全面屏 iPhone 上是 34px，
   普通机型是 0；用 max() 保证普通机型仍是原来的 28px。 */
.toast{position:fixed;bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translateX(-50%);z-index:120;background:var(--panel2);
  border:1px solid var(--line);color:#fff;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);font-size:14px;
  max-width:calc(100vw - 32px);text-align:center}

/* 骨架 */
/* A3：定高改 min-height。原 height:300px/520px 是写死的估值，
   与真实内容高度不匹配（真实卡片常 ~270px、详情页常 >600px），
   加载态和真实态之间会「跳一下」。min-height 让骨架至少占住空间，
   又不限制真实内容继续撑高。 */
.skeleton-card{min-height:300px;border-radius:var(--radius);background:linear-gradient(100deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:sh 1.2s infinite}
.skeleton-detail{min-height:520px;border-radius:var(--radius);background:linear-gradient(100deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* D2：尊重系统「减少动态效果」偏好。开了这个设置的用户
   （前庭功能障碍者、低端机省电）不该被无限循环的骨架动画和
   各种 transform 动画骚扰。 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media(max-width:1200px){.home-layout{grid-template-columns:240px minmax(0,1fr)}.home-right{grid-column:1/-1;position:static;height:auto;flex-direction:row;flex-wrap:wrap}.home-right .side-card{flex:1;min-width:240px}.home-right .side-card+.side-card{border-top:none}}
@media(max-width:980px){.detail{grid-template-columns:minmax(0,1fr)}.list-layout{grid-template-columns:minmax(0,1fr)}.side{position:static;display:flex;flex-wrap:wrap;gap:8px}.side h4{width:100%}.side a{display:inline-block}.home-layout{grid-template-columns:minmax(0,1fr);padding:18px 16px 50px}.topbar-inner{padding:0 16px}.home-side,.home-right{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.home-side .side-card,.home-right .side-card{flex:1;min-width:240px}.home-side .side-card+.side-card,.home-right .side-card+.side-card{border-top:none}
  /* 单列后让商品区排最前，否则分类栏/公告栏会把商品挤到首屏之外 */
  .home-layout>.home-main{order:1}.home-layout>.home-side{order:2}.home-layout>.home-right{order:3}
  /* 列表页同问题：14 个一级分类的树会把 154 个商品顶到首屏之外 */
  .list-layout>.list-main{order:1}.list-layout>.side{order:2}
  .list-layout{display:flex;flex-direction:column;gap:16px}}
@media(max-width:680px){
  /* minmax(0,1fr) 才能让两列不被超长商品名撑破（1fr 的隐式下限是 auto） */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat-nav{display:none}.hero{padding:54px 0 38px}.topbar-inner{padding:0 16px}
  .card .body{padding:10px;gap:6px}
  .card .name{font-size:13px;min-height:36px}
  .price{font-size:15px}
  .stock{font-size:11px}
  .brand-name{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-inner{gap:10px}
  .icon-btn{width:36px;height:36px;border-radius:10px}
  .ghost-btn{padding:7px 10px;font-size:12px}
  .top-actions{gap:8px}
  .home-layout{padding:14px 12px 40px}
  .side-card{padding:12px 8px;min-width:0}
  .side-card h4{margin-bottom:8px}
  .block-head h2{font-size:18px}
  /* 手机上首页改成单列后，DOM 顺序会把 14 个分类顶到首屏，热门商品被推到 ~900px 之后。
     用 order 让「主内容」排最前，分类栏移到主内容之后（完整保留、不限高不截断）。 */
  .home-layout>.home-main{order:1}
  .home-layout>.home-side{order:2}
  .home-layout>.home-right{order:3}
  .home-side,.home-right{width:100%}
  .home-side .side-card,.home-right .side-card{flex:1 1 100%;min-width:0}
  /* 手机端分类栏默认收起，只留一行「商品分类 · 展开」，避免五千多像素的分类树压满整页 */
  .home-side .side-card h4{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--txt)}
  .side-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;
    border:1px solid var(--line);background:var(--panel2);color:var(--brand2);
    font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .home-side .cat-list{margin-top:10px}
  .home-side.is-collapsed .cat-list{display:none}
  /* 手机端搜索框：按钮收窄、联想下拉贴满 */
  .search-block{margin-top:22px}
  .search-box{padding:5px 5px 5px 12px;border-radius:12px}
  .search-input{font-size:15px;padding:9px 8px 9px 4px}   /* ≥16px 会触发 iOS 缩放，这里 15px */
  .search-btn{padding:9px 16px;font-size:13px;border-radius:9px}
  .search-tags{gap:6px;margin-top:10px}
  .search-tags a{padding:4px 10px;font-size:12px}
  .search-sug{max-height:300px}
  /* 列表页：搜索框独占一行，标题与排序分列 */
  .list-head{gap:10px}
  .list-tools{width:100%;order:3;gap:8px}
  .search-box.sm{flex:1;width:auto;min-width:0}
  .list-head h2{order:1;flex:1 1 auto}
  .list-tools .sort{margin-left:auto}
}
@media(max-width:400px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .search-btn{padding:9px 12px}
  .search-input::placeholder{font-size:13px}
}

/* A1 修复：390px（iPhone 12~16 全系逻辑宽度）库存被 400px 断点误伤。
   原规则 .row-stock{display:none} 让主流 iPhone 完全看不到「剩余 N」。
   把「彻底隐藏」收到 360px 以内；360~400px 段改为「显示但极小号 + 可压缩」，
   既保库存可见，又不把价格/按钮挤到第三行。 */
@media(max-width:400px) and (min-width:361px){
  .prod-row{gap:6px 8px;padding:10px 12px}
  .row-stock{font-size:11px;letter-spacing:0;max-width:33%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row-price{font-size:13px}
  .row-btn{padding:7px 12px}
}

/* 真超小屏（iPhone SE 等 320~360px）：空间确实不够，才隐藏库存。
   详情页仍可见库存，列表行优先保证按钮对齐。 */
@media(max-width:360px){
  .prod-row{gap:6px 8px;padding:10px}
  .row-thumb{width:48px;height:48px}
  .row-main{flex:1 1 calc(100% - 56px)}
  .row-stock{display:none}
  .row-price{font-size:12px;margin-left:0}
  .row-op{margin-left:auto}
  .row-btn{padding:7px 11px;font-size:12px}
}

/* ===== 白色主题（与深色主题可来回切换，localStorage 记忆） ===== */
:root[data-theme="light"]{
  --bg:#eef1f7;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f0f3f9;
  --line:rgba(20,30,60,.10);
  --txt:#1a2236;
  --muted:#6b7488;
  --gold:#b8800a;
  --ok:#1f9d6b;
  --danger:#e23a5e;
  --shadow:0 10px 40px rgba(20,30,60,.14);
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(124,92,255,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(33,212,253,.08),transparent 55%),
    var(--bg);
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.82)}
/* D1：补齐浅色主题缺失的背景覆盖。
   原来 .footer 用 rgba(15,19,32,.6)（深色半透明），在浅色主题下是一块
   「灰黑色块」压在白色内容区上，视觉割裂；这里改成浅色系。 */
html[data-theme="light"] .footer{background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}
html[data-theme="light"] .drawer-mask,html[data-theme="light"] .modal-mask{background:rgba(20,30,60,.28)}
/* D1：banner / 抽屉 / 弹窗在浅色主题下的底色（原本跟随 --bg2 深色） */
html[data-theme="light"] .banner{background:linear-gradient(120deg,#e6ebf5,#f7f9fc)}
html[data-theme="light"] .drawer{background:var(--bg2)}
html[data-theme="light"] .modal{background:var(--bg2)}
/* B2：浅色主题下库存文字对比度。--muted 在白底上偏灰，
   单独提亮一档，让「剩余 N」在浅色卡片上也清楚。 */
html[data-theme="light"] .row-stock{color:#5b6478}
html[data-theme="light"] .row-intro{color:#5b6478}
html[data-theme="light"] .detail .gallery{background:linear-gradient(135deg,var(--panel2),#e9edf6)}
html[data-theme="light"] .card .thumb{background:linear-gradient(135deg,var(--panel2),#e9edf6)}
html[data-theme="light"] .toast{color:var(--txt);background:var(--panel)}
html[data-theme="light"] .cat-list a:hover{color:var(--brand)}
html[data-theme="light"] .cat-list a.active{color:var(--brand);background:var(--panel2)}
html[data-theme="light"] .cat-list a.cat-parent.has-active .cat-name,
html[data-theme="light"] .cat-children a:hover,
html[data-theme="light"] .cat-children a.active{color:var(--txt)}
/* 分类树浅色主题适配：
   · 子级文字 --muted(#6b7488) 在白底上够用，但层级越深越需要「退后」，
     统一提一档到 #5b6478，与库存/简介的浅色方案一致；
   · 引导线/圆点用品牌淡紫（深色段已是同一套色），浅色下浓度略降，
     避免白底上颜色发脏；
   · 一级圆点光环在白底上加深，否则 3px 光环完全不可见。 */
html[data-theme="light"] .cat-children a{color:#5b6478}
html[data-theme="light"] .cat-children::before,
html[data-theme="light"] .cat-children[data-depth="2"]::before{display:block;background:rgba(124,92,255,.20)}
html[data-theme="light"] .cat-children[data-depth="3"]::before{display:block;background:rgba(124,92,255,.13)}
html[data-theme="light"] .cat-children[data-depth="4"]::before{display:block;background:rgba(124,92,255,.09)}
html[data-theme="light"] .cat-children a::before{background:rgba(124,92,255,.32)}
html[data-theme="light"] .cat-children a:hover::before,
html[data-theme="light"] .cat-children a.active::before{background:var(--brand2)}
html[data-theme="light"] .cat-children a:hover{background:var(--panel2);color:var(--txt)}
html[data-theme="light"] .cat-children a.active{background:var(--panel2);color:var(--txt)}
html[data-theme="light"] .cat-list a .dot{box-shadow:0 0 0 3px rgba(124,92,255,.18)}
html[data-theme="light"] .cat-list a.active .dot{box-shadow:0 0 0 3px rgba(124,92,255,.32)}
html[data-theme="light"] .rank-name:hover{color:var(--brand)}
html[data-theme="light"] .side-contact a:hover{color:var(--txt)}
html[data-theme="light"] .btn-line:hover{color:var(--brand)}
html[data-theme="light"] .sku.active{color:var(--brand)}
html[data-theme="light"] .cat-nav a:hover,html[data-theme="light"] .cat-nav a.active{color:var(--brand)}
html[data-theme="light"] .side a:hover,html[data-theme="light"] .side a.active{color:var(--brand)}

/* ---- 结算弹窗 & 订单支付状态页 ---- */
.pay-inp{width:100%;padding:10px 12px;margin-top:10px;border-radius:10px;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.08);color:inherit;font-size:14px;box-sizing:border-box;outline:none}
.pay-inp:focus{border-color:var(--brand)}
.pay-total{font-size:18px;font-weight:700;margin:10px 0}
.pay-card{max-width:560px;margin:0 auto;background:var(--panel2,rgba(127,127,127,.08));border:1px solid rgba(127,127,127,.18);border-radius:14px;padding:18px}
.pay-status{font-size:20px;font-weight:700;margin-bottom:14px}
.pay-status.wait{color:var(--muted,#888)}
.pay-status.ok{color:#22c55e}
.pay-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(127,127,127,.18);font-size:14px}
.pay-row span{color:var(--muted,#888)}
.pay-row b{word-break:break-all;text-align:right}
.pay-secret{margin-top:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);border-radius:10px;padding:12px}
.pay-secret-t{font-size:12px;color:var(--muted,#888);margin-bottom:6px}
.pay-secret-v{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;word-break:break-all;line-height:1.7}