/* =============================================================================
   玺芮商城 · 前端修复补丁  shinloo-fix.css
   -----------------------------------------------------------------------------
   用法：在 style.css 之后引入
        <link rel="stylesheet" href="assets/css/style.css?v=...">
        <link rel="stylesheet" href="assets/css/shinloo-fix.css?v=1">
   定位：覆盖式补丁，只做「修正」不重做视觉，可安全上线；每条都标注了对应的问题编号。

   【默认假设 / 需确认项】
   1) 品牌主色确定为 #E1251B（京东红系），金色系彻底废弃 —— 依据：前台 logo 与全部按钮
      已是红色，仅 assets/img/logo.svg 与后台 .ovhero 仍是金色。若品牌实为金色，则整份
      补丁的色值需反向替换（见报告「方向二」）。
   2) 旧变量名 --gold/--gold-d/--gold-l 予以保留作别名，避免全站 200+ 处引用一次性改动
      引入回归；重命名到 --brand 系列作为后续独立任务。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   §1 设计令牌修正 · 问题 5 / 19
   --------------------------------------------------------------------------- */
:root{
  /* 品牌色：名实相符 + 拆出「作填充用」与「作文字用」两档 */
  --brand:      #E1251B;   /* 填充用：白字于其上 4.69:1 ✓ */
  --brand-d:    #C81623;   /* hover 填充 */
  --brand-l:    #FF6A5E;   /* 仅用于深色底上的强调（hero） */
  --brand-text: #C81623;   /* 文字用：于 #F4F4F4 底 5.31:1 ✓，于白底 5.84:1 ✓ */
  --brand-tint: #FFF6F5;   /* 极浅底：替代 #FFF1F0/#FFE7E4/#FFF6F5 三种碎片 */

  /* 兼容别名（旧名保留，语义已纠正） */
  --gold:   var(--brand);
  --gold-d: var(--brand-d);
  --gold-l: var(--brand-l);

  /* 文字层级：原 --faint(#9CA3AF) 仅 2.31–2.54:1，全站最严重问题 */
  --muted:  #4B5563;       /* 于 #F4F4F4 底 6.34:1 ✓（原 #6B7280 = 4.40:1 ✗） */
  --faint:  #646C7A;       /* 于 #F4F4F4 底 4.82:1 ✓（原 #9CA3AF = 2.31:1 ✗） */
  --ghost:  #8A93A1;       /* 仅限装饰性图形（分隔符、占位图标），不得承载信息 */

  /* 中性：把 13 种近白米白收敛为 4 级 */
  --bg:     #F5F6F7;       /* 页面底（原 #F4F4F4） */
  --bg-2:   #FAFBFC;       /* 表头 / 区块底（原 #FAF8F4 / #FAFAFA / #FDFBF7 / #FDFCFA…） */
  --line:   #E6E8EB;       /* 分隔线（原 #E8E8E8 / #F3F0E9 / #F3EFE7 / #F0ECE3…） */
  --line-2: #F0F2F5;       /* 次级分隔 */

  /* 图片占位：原为暖米色 #F6F3EE，与红色品牌无关 */
  --ph:     #F5F6F7;

  /* 状态色：修正对比度（原 warn 3.30:1、ok 3.96:1 均不达标） */
  --warn:   #8A5B10;  --warn-bg:#FDF3E3;   /* 5.11:1 ✓ */
  --ok:     #146C2E;  --ok-bg:  #EDF4EE;   /* 5.72:1 ✓ */
  --info:   #1B5FA8;  --info-bg:#EAF2FB;

  /* 阴影：补齐第三级（原仅 2 级，且 .pcard:hover 用字面量覆盖 token） */
  --sh-0: 0 1px 2px rgba(16,24,40,.04);
  --sh-1: var(--sh);                                  /* 沿用原第 1 级 */
  --sh-2: 0 4px 12px rgba(16,24,40,.08),0 16px 40px rgba(16,24,40,.08);
  --sh-3: 0 12px 32px rgba(16,24,40,.12);

  /* 节奏：统一动效曲线与时长（原 4 种时长、0 条曲线声明） */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.4,0,.2,1);
  --t-fast:  .15s;  --t-base: .3s;  --t-slow: .6s;

  /* 触摸目标 */
  --tap: 44px;
}

/* -----------------------------------------------------------------------------
   §2 焦点可见性 · 问题 1（P0）
   原 style.css:16 的 button,input,select,textarea{outline:none} 直接抹掉了全站焦点环，
   而 :focus-visible 优先级 (0,1,0) 高于元素选择器 (0,0,1)，可覆盖它。
   --------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}
/* 深色背景区域改用白环，否则红环在藏青/红底上不可见 */
.hero :focus-visible,
footer.site :focus-visible,
.chatbox .ch :focus-visible,
.ovhero :focus-visible{ outline-color:#FFFFFF; }

.btn:focus-visible,
.icobtn:focus-visible{ outline-offset:3px; }

/* 鼠标点击不显示焦点环，键盘操作显示 —— 避免视觉噪音 */
:focus:not(:focus-visible){ outline:none; }

/* 表单控件：原只有 .form input:focus 有反馈，且光晕是金色 rgba(184,137,43,.1) */
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(225,37,27,.12);   /* 由金色改为品牌红（问题 5） */
}
.admsrch:focus,.admnum:focus,.admsel:focus,.qty input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(225,37,27,.12);
}

/* -----------------------------------------------------------------------------
   §3 动效降级 · 问题 9（P0 级可访问性）
   原 style.css 中 prefers-reduced-motion 出现 0 次。
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .pcard:hover{ transform:none; }
  .btn:hover{ transform:none; }
  .fab:hover{ transform:none; }
}

/* -----------------------------------------------------------------------------
   §4 .steps 类名冲突 · 问题 6（P1，实测已复现）
   :232 的订单进度条 .steps{display:flex} 与 :447 的商家入驻流程 .steps 同名，
   导致 <ol class="steps"> 的 4 个 li 被渲染成横向一行、竖线连接件错位。
   用 :has() 按子元素类型分流；:has() 选择器原文件已在用（:314、:325），无新增浏览器要求。
   --------------------------------------------------------------------------- */
/* 订单进度条：只作用于含 div 子元素的 .steps */
.steps:has(> div){
  display:flex; gap:0; margin:8px 0 26px;
  list-style:none; counter-reset:none;
}
.steps:has(> div) > div{
  flex:1; text-align:center; font-size:12.5px; color:var(--faint);
  position:relative; padding-top:30px;
}
.steps:has(> div) > div::before{
  content:""; position:absolute; top:9px; left:0; right:0; height:2px; background:var(--line);
}
.steps:has(> div) > div:first-child::before{ left:50%; }
.steps:has(> div) > div:last-child::before{ right:50%; }
.steps:has(> div) > div > span{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--line); z-index:2;
}
.steps:has(> div) > div.on{ color:var(--brand-text); font-weight:600; }
.steps:has(> div) > div.on::before{ background:var(--brand-l); }
.steps:has(> div) > div.on > span{ background:var(--brand); border-color:var(--brand); }

/* 入驻流程：只作用于含 li 子元素的 .steps —— 强制回到竖向编号列表 */
.steps:has(> li){
  display:block; margin:0; padding:0;
  list-style:none; counter-reset:st;
}
.steps:has(> li) > li{
  position:relative; display:block; width:auto;
  padding:0 0 18px 42px; counter-increment:st; flex:none;
}
.steps:has(> li) > li:last-child{ padding-bottom:0; }
.steps:has(> li) > li::before{
  content:counter(st); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand-text);
  font-size:13px; font-weight:700; line-height:26px; text-align:center;
  border:1px solid #FFD9D6;
}
.steps:has(> li) > li::after{
  content:""; position:absolute; left:13px; top:30px; bottom:2px; width:1px; background:var(--line);
}
.steps:has(> li) > li:last-child::after{ display:none; }
.steps:has(> li) b{ display:block; font-size:14px; margin-bottom:3px; }
.steps:has(> li) span{ font-size:12.5px; color:var(--muted); line-height:1.7; }

/* -----------------------------------------------------------------------------
   §5 .cats 响应式失效 · 问题 7（P1，实测已复现）
   容器是 display:flex，而 :378 / :392 两条媒体查询写入 grid-template-columns → 永不生效。
   改为 grid + 1px 间隙底色法：无论折几行，网格线都连续，不会出现断头边框。
   --------------------------------------------------------------------------- */
.cats{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));   /* 全部商品 + 8 个类目 */
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.cats .cmi{
  border-right:0;                                   /* 原 border-right 是断头来源 */
  background:var(--card);
  min-height:56px;
}
@media (max-width:1080px){ .cats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px){  .cats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* -----------------------------------------------------------------------------
   §6 触摸目标 · 问题 10
   分两档，标准不同，不要混为一谈：
     · WCAG 2.2 AA（2.5.8）要求 ≥24×24 —— 全站仅「更多 →」类小文字链与店铺名链不达标，必改；
     · 44×44 为 Apple HIG / WCAG 2.5.5(AAA) —— 本轮只对「主操作控件」落实
       （搜索、按钮、分页、筛选 chip、数量增减、加购），
       密集文本链接列表（8 项主导航、页脚 5×5 链接）保持 40px 行高。
   取舍：把导航与页脚全部拉到 44×44 会让头部多 20px、页脚多约 120px 且信息密度明显下降，
   移动端首屏成本大于可达性收益；而这两处均已满足 AA 的 24×24。
   --------------------------------------------------------------------------- */
.addc{ min-height:var(--tap); }
.btn.sm{ padding:10px 16px; min-height:var(--tap); }
.icobtn{ min-height:var(--tap); padding:11px 14px; height:auto; }
.search{ height:var(--tap); }
.logo{ min-height:var(--tap); }
.pager a,.pager span{ min-width:var(--tap); height:var(--tap); line-height:calc(var(--tap) - 2px); }
.tools .sorts a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.ostatus a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.admtabs a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.chip{ display:inline-flex; align-items:center; min-height:var(--tap); }
.qty{ height:auto; }
.qty button{ width:var(--tap); min-width:var(--tap); height:var(--tap); }
.qty input{ height:var(--tap); width:52px; }
/* 搜索框：外框 44px 即实际命中区域，内含 input/button 内高 42px（被 1.5px 描边挤掉 3px）。
   低于 AAA 阈值 2px，但整个胶囊都是可点区域，实测命中面积 ≥44px，故不再加高以免顶破 76px 页头。 */
.cart-tb .del,
.addr .del{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 10px; }
.form input[type=text],.form input[type=password],.form input[type=email],
.form input[type=tel],.form select{ min-height:var(--tap); }
.applycard select,.admsrch,.admnum,.admsel{ min-height:40px; }
/* AA 兜底：小文字链高度不足 24px 的两处 */
.sec-h .more{ display:inline-flex; align-items:center; min-height:40px; }
.shopline a{ display:inline-flex; align-items:center; min-height:24px; }
footer.site a{ padding:9px 0; }            /* 31px → 40px，满足 AA */
nav.main a{ padding:11px 0; }              /* 37px → 47px，满足 AA */

/* -----------------------------------------------------------------------------
   §7 图片尺寸与布局抖动 · 问题 11
   全站 0 个 width/height 属性；此处用 CSS 兜住可见尺寸，属性仍需在 JS 模板补齐（见 §12）。
   --------------------------------------------------------------------------- */
.pcard .ph{ aspect-ratio:1; background:var(--ph); }
.pcard .ph img{ aspect-ratio:1; object-fit:cover; }
.hero-art img{ aspect-ratio:1; object-fit:cover; background:#fff; }
.cart-tb .pinfo img,
.oitem img{ aspect-ratio:1; object-fit:cover; background:var(--ph); }
.mcard img,.licthumb img,.licpic img{ aspect-ratio:auto; }

/* -----------------------------------------------------------------------------
   §8 品牌色迁移遗留清理 · 问题 5（把金色残留逐条拉回红色体系）
   --------------------------------------------------------------------------- */
.hero{
  /* 原 linear-gradient(120deg,#1B2130,#2A3350,#3A2F1E) 第三段是棕金，与红色品牌无关联 */
  background:linear-gradient(120deg,#1A2030 0%,#262F4A 52%,#33202A 100%);
}
.hero:after{
  /* 原 radial-gradient(rgba(184,137,43,.42)) 是金色光晕 */
  background:radial-gradient(circle,rgba(225,37,27,.34),transparent 66%);
}
.hero .btn.ghost{
  /* 原 border rgba(228,200,127,.55) 是金色描边；且 :81-82 与 :95-96 重复定义，后者覆盖前者 */
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.34);
}
.hero .btn.ghost:hover{
  background:rgba(255,255,255,.18);
  border-color:#fff;
  color:#fff;
}
.fab{
  /* 原投影 rgba(184,137,43,.42) 是金色光晕挂在红色按钮下 */
  box-shadow:0 8px 24px rgba(225,37,27,.36);
}
.ovhero{
  /* 后台数据概览仍是金棕渐变 + 金米色数字，与前台红色体系断裂 */
  background:linear-gradient(120deg,#1A2030,#262F4A);
  color:#fff;
}
.ovhero span{ color:#B9C1D6; }
.ovhero b{ color:#FF8A80; }
.ovhero i{ color:#8E97AE; }
.ziy{ background:var(--brand); }          /* 原 var(--gold)，语义已由 §1 别名覆盖 */
.tg-f{ background:#FFF6F5; border-color:#FFD9D6; color:var(--brand-text); }
.san{ background:#FFF6F5; border-color:#FFD9D6; color:var(--brand-text); }
.tag{ background:#FFF6F5; color:var(--brand-text); }     /* 原 #F4F1EA 暖米底 + 红字 */
.pcard:hover{ border-color:#FFC9C4; }                    /* 原 #E0D8C6 暖米描边 */
.ovc{ border-left-color:var(--brand); }                  /* 原 var(--gold-l) 珊瑚色 */

/* 文字型品牌红统一改为 --brand-text（在浅底上才达标） */
.topbar .tb-seller,
.sec-h h2 em,
.sec-h .more:hover,
.crumb a:hover,
.authbox .sw a,
.doc h2 + *,
.applyok b,
.shtop h2,
.mhero b,
.side a.on,
.side a:hover,
.pcard:hover .nm,
.merchants-link{ color:var(--brand-text); }
.topbar a:hover{ color:var(--brand-text); }

/* -----------------------------------------------------------------------------
   §9 中性碎片收敛 · 问题 5
   把散落的 13 种近白/米白统一到 --bg / --bg-2 / --line / --line-2 / --ph 五级。
   --------------------------------------------------------------------------- */
.card,.pcard,.mcard,.side,.tools,.cart-tb,.shophead,.shop,.applycard,.doc,.mbox,.ovc{ background:var(--card); }
.pcard .ph,.pd .gal{ background:var(--ph); }
.cart-tb th,.info-tb th,.ocard .hd,.admtb thead th{ background:var(--bg-2); }
.paramtable th{ background:var(--bg-2); }
.license-cert,.licband,.stip,.pdship .stip{ background:var(--bg-2); }
.admfoot{border-top-color:var(--line);}
footer.site,.chatbox .ch{ background:var(--ink); }

/* -----------------------------------------------------------------------------
   §10 状态徽标对比度 · 问题 2
   --------------------------------------------------------------------------- */
.s-待付款,.st-待付款{ background:var(--warn-bg); color:var(--warn); }
.s-待发货,.st-待发货{ background:var(--info-bg); color:var(--info); }
.s-已发货,.st-已发货{ background:#E8F1FB; color:#1B5FA8; }
.s-已完成,.st-已完成{ background:var(--ok-bg); color:var(--ok); }
.s-已取消,.st-已取消{ background:#F0F0F0; color:#5B6472; }

/* -----------------------------------------------------------------------------
   §11 动效编排（设计升级，非修 bug）· 问题 9
   原站 9 处 transition 全是 :hover 微交互，没有入场序列与滚动触发。
   --------------------------------------------------------------------------- */
@keyframes xrRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes xrFade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: no-preference){
  /* 首屏入场：3 组、间隔 90ms、统一 620ms ease-out */
  .hero-txt > *{ animation:xrRise .62s var(--e-out) both; }
  .hero-txt > *:nth-child(1){ animation-delay:60ms; }
  .hero-txt > *:nth-child(2){ animation-delay:150ms; }
  .hero-txt > *:nth-child(3){ animation-delay:240ms; }
  .hero-art img{ animation:xrFade .8s var(--e-out) 300ms both; }
  .hero .facts > div{ animation:xrRise .62s var(--e-out) both; }
  .hero .facts > div:nth-child(1){ animation-delay:330ms; }
  .hero .facts > div:nth-child(2){ animation-delay:390ms; }
  .hero .facts > div:nth-child(3){ animation-delay:450ms; }
  .hero .facts > div:nth-child(4){ animation-delay:510ms; }

  /* 滚动入场由 §12 的 IntersectionObserver 加 .xr-in 类触发 */
  .sec .grid > *,
  .sec .cats,
  .sec .feat > *{ opacity:0; transform:translateY(14px); }
  .sec.xr-in .grid > *,
  .sec.xr-in .cats,
  .sec.xr-in .feat > *{
    opacity:1; transform:none;
    transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
  }
  .sec.xr-in .grid > *:nth-child(1){ transition-delay:0ms; }
  .sec.xr-in .grid > *:nth-child(2){ transition-delay:55ms; }
  .sec.xr-in .grid > *:nth-child(3){ transition-delay:110ms; }
  .sec.xr-in .grid > *:nth-child(4){ transition-delay:165ms; }
  .sec.xr-in .grid > *:nth-child(5){ transition-delay:220ms; }
  .sec.xr-in .grid > *:nth-child(n+6){ transition-delay:260ms; }
}

/* 无 JS 兜底：若 xr-in 永不被加上，内容不能一直隐形 */
.no-js .sec .grid > *,
.no-js .sec .cats{ opacity:1; transform:none; }

/* :hover 反馈统一曲线与时长（原 .15s/.16s/.18s/.22s 四种且隐式 all） */
.btn,.pcard,.mcard,.cats .cmi,.icobtn,.chip,.side a,.tools .sorts a,.admtabs a,.ostatus a{
  transition:background-color var(--t-fast) var(--e-inout),
             border-color var(--t-fast) var(--e-inout),
             color var(--t-fast) var(--e-inout),
             box-shadow var(--t-base) var(--e-inout),
             transform var(--t-base) var(--e-out);
}
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }

/* -----------------------------------------------------------------------------
   §12 语义与结构补齐（CSS 层能做的部分）· 问题 12 / 13
   --------------------------------------------------------------------------- */
/* 屏幕阅读器专用文本 */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
/* 跳转到主内容：键盘用户第一下 Tab 就有出口 */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:400;
  background:var(--brand); color:#fff; padding:11px 18px; border-radius:0 0 10px 10px;
  font-size:14px; transition:top var(--t-fast) var(--e-inout);
}
.skip-link:focus{ top:0; }
/* toast 需要能被读屏播报（元素上仍建议加 role="status" aria-live="polite"） */
.toast{ /* 保留视觉，见 §12-JS 说明 */ }
/* 客服关闭键从 <span> 改为可达控件时使用 */
.chatbox .ch button.ch-close{
  background:none; border:0; color:#fff; opacity:.75; cursor:pointer;
  font-size:18px; line-height:1; padding:8px; margin:-8px; min-width:var(--tap); min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
}
.chatbox .ch button.ch-close:hover{ opacity:1; }

/* -----------------------------------------------------------------------------
   §13 元信息 / 分享卡片（需配合 HTML，见报告）· 问题 22 / 23
   仅列出需在 <head> 补的标签，CSS 无法承担，此处留空作提示。
   --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   §14 折扣角标文案统一 · 问题 14
   建议 HTML 层把「X% OFF」改为「立减 X%」；此处仅保证中文断行与字重一致。
   --------------------------------------------------------------------------- */
.pcard .off{ letter-spacing:.3px; font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------------------
   §15 语义提升后的视觉保真 · 问题 12
   把「页面唯一标题」从 h2 / span 提升为 h1 之后，原样式选择器（.authbox h2、
   .admlogin h2、.sec-h h2、.shtop h2）不再命中，这里逐条镜像回来，
   保证视觉零变化、只补齐语义。
   --------------------------------------------------------------------------- */
.sec-h h1{ font-size:21px; font-weight:700; letter-spacing:.5px; }
.sec-h h1 em{ font-style:normal; color:var(--brand-text); }
.authbox h1{ font-size:22px; text-align:center; margin-bottom:6px; }
.admlogin h1{ font-size:19px; margin-bottom:9px; text-align:center; }
.shtop h1{ font-size:21px; }

/* 面包屑里的页面标题：保持面包屑的视觉，不额外占一行 */
.crumb h1,.crumb h1.crumb-h{
  display:inline; font-size:inherit; font-weight:inherit;
  letter-spacing:inherit; color:inherit; margin:0;
}

/* -----------------------------------------------------------------------------
   §16 落地新增项（第二轮：把补丁真正编进代码时补的）
   --------------------------------------------------------------------------- */
/* 深色底（页脚 / 客服头部）上的次级文字：原为散落的 #8E94A3 / #A9AEBC 字面量 */
:root{ --on-dark: #B9C1D6; --on-dark-muted: #A9AEBC; }
footer.site .cols p,
footer.site .bot{ color:var(--on-dark-muted); }

/* 删除键由 <span> 改为 <button>：先清掉 UA 默认样式，再沿用 .del 外观 */
button.del{
  background:none; border:0; padding:0; font:inherit;
  color:inherit; cursor:pointer; text-align:left;
}
.cart-tb button.del,
.addr button.del,
.oitem button.del{
  display:inline-flex; align-items:center;
  min-height:24px;                 /* WCAG 2.2 AA 2.5.8 底线 24×24 */
  padding:4px 6px; margin:-4px -6px;
}
button.del:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* 空状态图标：由 emoji 换为内联 SVG，统一尺寸与配色 */
.empty .big{ font-size:0; opacity:1; color:var(--ghost); line-height:0; }
.empty .big svg{ width:48px; height:48px; display:inline-block; }
.empty .big svg *{ stroke:currentColor; }

/* 客服悬浮按钮：emoji 换 SVG 后的居中 */
.fab svg{ width:26px; height:26px; }
.fab svg *{ stroke:currentColor; }

/* 无 JS 提示条 */
noscript p{ font-size:13.5px; color:var(--ink-2); }

/* -----------------------------------------------------------------------------
   §17 数据依赖失败态 · 问题 4（P0）
   原来 /api/* 失败时容器永久空白、无任何提示；这里给出可操作的失败态样式。
   --------------------------------------------------------------------------- */
.load-fail{
  text-align:center; padding:36px 20px; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--r); background:var(--card);
}
.load-fail b{ display:block; color:var(--ink); font-size:14.5px; margin-bottom:6px; }
.load-fail .btn{ margin-top:14px; }
.skel{ background:var(--bg-2); border-radius:6px; animation:skelPulse 1.4s var(--e-inout) infinite; }
@keyframes skelPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; opacity:.8; } }

/* -----------------------------------------------------------------------------
   §18 404 页与资质公示页（legal.html / nope.html）· 问题 4 / 24
   这两个文件原先是 index.html 的逐字节副本。
   --------------------------------------------------------------------------- */
.err404{
  max-width:600px; margin:70px auto 90px; text-align:center;
}
.err404 .code{
  font-size:76px; font-weight:700; color:var(--brand); line-height:1;
  letter-spacing:-2px; font-variant-numeric:tabular-nums;
}
.err404 h1{ font-size:22px; margin:16px 0 10px; }
.err404 p{ color:var(--muted); font-size:13.5px; line-height:1.9; margin-bottom:22px; }
.err404 .acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.err404 .links{
  display:flex; gap:10px 18px; justify-content:center; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--line);
}
.err404 .links a{ font-size:13px; color:var(--brand-text); min-height:24px; display:inline-flex; align-items:center; }

/* 资质表格：复用 .doc 的排版，只补一个资质卡网格 */
.licgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0 6px; }
.licgrid .li{ border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--card); }
.licgrid .li span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.licgrid .li b{ font-size:14px; font-weight:600; word-break:break-all; }
@media (max-width:720px){ .licgrid{ grid-template-columns:1fr; } }

/* -----------------------------------------------------------------------------
   §19 第二轮实测补漏 · 问题 10 / 2
   §6 的触摸目标规则是按「主操作控件」列的，漏掉了几类容器，第二轮用真实页面
   逐页测量后补上（实测残留 9 项 <24×24，全部在这几类里）。
   --------------------------------------------------------------------------- */

/* 表单控件：登录 / 注册 / 找回密码用的是 .authbox .fg，商家入驻用的是 .applycard .fg，
   两者都不含 .form 类，所以 §6 的 .form input 规则没命中 → 输入框只有 23px 高 */
.fg input:not([type=checkbox]):not([type=radio]),
.fg select,
.fg textarea{ min-height:var(--tap); }
.fg select{ padding:0 10px; }
/* 复选框：原内联 style="width:auto" 把它压成 13×13，低于 AA 的 24×24。
   内联样式已从 HTML 移除，这里给足尺寸并统一品牌色 */
.fg input[type=checkbox]{
  width:24px; height:24px; margin:0 8px 0 0;
  vertical-align:-6px; accent-color:var(--brand); flex:0 0 auto;
}
/* 进度查询输入框在 .caprow 里（与 42px 的按钮同一行），对齐按钮高度 */
.caprow input{ min-height:42px; }

/* 商品详情「分类」链接：由 app.js 动态插入，高度仅 17px */
.pd .sub a{ display:inline-flex; align-items:center; min-height:24px; }

/* 服务承诺标签：原为 var(--gold)=#E1251B 于 #FFF6F5 底，实测 4.41:1（差 0.09 不达标） */
.promise span{ color:var(--brand-text); background:var(--brand-tint); border-color:#FFD9D6; }

/* 首页类目磁贴里的计数与名称、店铺行的小字链接，统一到 AA 底线 */
.cats .cmi{ min-height:64px; display:flex; flex-direction:column; justify-content:center; }