/* ============================================================================
   FreshStar · 组件层  3-components（内容寻址卷 <stem>.<md5前8>.css，R213.0b 起）   （R211 Stage 5 · 2026-10-16）
   ============================================================================
   定位（CLAUDE.md 三层令牌体系第三层 + 前端铁律 6/7）：
     ① 收编历史内联块 —— 原先散在 fs_shell.php / head.php / order.php 里
        以 <style> 输出的组件样式，全部迁到本文件（单一真源）。
     ② fsc-* 组件库 —— 高内聚 BEM 组件样式，供 views/components/ 的新组件使用；
        只消费 1-tokens 令牌，不写死颜色间距。

   ⚠ 本文件整体**非分层**（没有 @layer）：
     站内 50+ 历史卷都是未分层的，而「未分层永远胜过分层」——
     迁入的规则必须保持与之前内联时相同的层叠效力（内联 <style> 也是非分层）。
     这不是风格选择，是层叠语义要求。

   迁移对账（来源 → 本文件对应段）：
     · fs_shell.php  fs_shell_boot() 的 [data-fs-inframe] 隐藏段
     · fs_shell.php  fs_terms_bottom() 的 #fs-terms-css 段
     · fs_shell.php  fs_appbar_account() 的 #fs-acc-css 段
     · index/head.php 的 #fs-frame-pad 段（入 frame 补上边距）
     · index/order.php / login.php / home/10_head.php 的 #fsl-style 段（加载器）
       以及 cashier/pay/passwd/run/runorder/userinfo/gongdan1 的 font-smoothing
       冗余副本（后者已由 2-base 的 :where(body) 统一接管，直接删除）。
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   §1  fs-loader 加载器（原 order/login/home 三页共用的 #fsl-style 内联块）
   —— 首屏浮层样式。外置后仍为渲染阻塞加载（<link> 在 head），首帧即生效，
      「秒加载」前提不变。
   ═══════════════════════════════════════════════════════════════════════════ */

#fsl{position:fixed;inset:0;z-index:var(--z-loading);background:rgba(10,31,60,.44);display:flex;align-items:center;justify-content:center;opacity:1;will-change:opacity;transition:opacity var(--fs-t-slow, 320ms) var(--fs-ease, cubic-bezier(.23,1,.32,1)),visibility 0s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* 收口后彻底离开合成层：全屏 backdrop-filter 不再常驻（移动端明显省帧） */
#fsl.off{opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--fs-t-slow, 320ms) var(--fs-ease, cubic-bezier(.23,1,.32,1)),visibility 0s linear var(--fs-t-slow, 320ms)}
#fsl-card{width:280px;max-width:86vw;background:#fff;border-radius:14px;padding:22px 26px 18px;box-shadow:0 10px 32px rgba(10,31,60,.20);font-family:'FS Num',-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;transition:transform var(--fs-t-slow, 320ms) var(--fs-ease, cubic-bezier(.23,1,.32,1)),opacity var(--fs-t-slow, 320ms) var(--fs-ease, cubic-bezier(.23,1,.32,1))}
/* 交接：浮层淡出时卡片轻微上浮，与页面内容入场形成接力 */
#fsl.off #fsl-card{transform:translateY(-8px) scale(.986);opacity:.55}
#fsl-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-0)}
#fsl-brand .fsl-mark{width:34px;height:34px;border-radius:9px;object-fit:contain;border:1px solid var(--fs-line,#DFE7F0)}
#fsl-brand .fsl-word{height:15px;object-fit:contain;display:block}
#fsl-step{margin-top:14px;font-size:14px;color:var(--c-text);min-height:22px;display:flex;align-items:center;gap:10px}
#fsl-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--c-brand);border-top-color:transparent;animation:fslspin .7s linear infinite;flex:none}
#fsl-bar{margin-top:14px;height:8px;border-radius:4px;background:#EDF2F8;overflow:hidden}
#fsl-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--c-brand),var(--c-cta));border-radius:4px;transition:transform var(--fs-t-mid, 240ms) var(--fs-ease, cubic-bezier(.23,1,.32,1));will-change:transform}
#fsl-pct{margin-top:var(--s-1);font-size:12px;color:#5B7086;display:flex;justify-content:space-between}
#fsl-log{margin-top:14px;border-top:1px solid #EDF2F8;padding-top:var(--s-2);height:104px;overflow:hidden;font-size:12px;line-height:2;color:#5B7086}
#fsl-log .d,#fsl-log .a,#fsl-log .p{position:relative;display:inline-block;flex:none;width:12px;height:12px;margin-right:var(--s-1);vertical-align:-1px}
#fsl-log .d::before{content:"";position:absolute;left:1px;top:3px;width:8px;height:4px;border-left:2px solid var(--c-cta);border-bottom:2px solid var(--c-cta);transform:rotate(-45deg)}
#fsl-log .a::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--c-brand)}
#fsl-log .p::before{content:"";position:absolute;inset:2.5px;border-radius:50%;border:1.5px solid #B9C6D4}
#fsl-log .t{float:right;color:#9AAABB}
#fsl-slow{margin-top:var(--s-1);font-size:12px;color:#A06A00;min-height:0}
@keyframes fslspin{to{transform:rotate(360deg)}}
/* —— 动画衔接（2026-09-08 v1.2）：加载卡片入场 + 浮层退场时页面内容入场 —— */
#fsl:not(.off) #fsl-card{animation:fslcardin var(--fs-t-slow, 320ms) cubic-bezier(.23,1,.32,1) backwards}
@keyframes fslcardin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* 浮层收口（html.fs-ready 由脚本在隐藏瞬间挂上）与内容淡入上移同步进行，形成交接 */
html.fs-ready #login1,html.fs-ready .grid,html.fs-ready #order .panel{animation:fsin var(--fs-t-slow, 320ms) cubic-bezier(.23,1,.32,1) backwards}
@keyframes fsin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#fsl:not(.off) #fsl-card,html.fs-ready #login1,html.fs-ready .grid,html.fs-ready #order .panel{animation:none}}
@media print{#fsl,#fsl-toast{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   §2  外壳内联块收编（原 fs_shell.php 三处 + head.php 一处）
   ═══════════════════════════════════════════════════════════════════════════ */

/* 2.1 iframe 内隐藏外壳顶/底栏（fs_shell_boot 原内联段；老浏览器不做 Sec-Fetch 判定时的兜底） */
[data-fs-inframe] .appbar,[data-fs-inframe] .dhead,[data-fs-inframe] .dfoot,[data-fs-inframe] .tabbar,[data-fs-inframe] .dh-nav{display:none!important;}

/* 2.2 使用条款入口块（fs_terms_bottom 原 #fs-terms-css） */
.fterms{margin-top:var(--s-6,24px);padding:var(--s-3,14px) var(--sp-gutter,16px);
  background:var(--c-bg,#F5F8FC);border-top:1px solid var(--c-line,#E4EBF3);
  text-align:center;font-size:var(--t-xs,12px);line-height:1.8;color:var(--c-text-3,#6E8399)}
.fterms a{color:var(--c-brand,#1657D9);text-decoration:none}
.fterms a:hover{text-decoration:underline}

/* 2.3 移动端顶栏账户入口（fs_appbar_account 原 #fs-acc-css） */
/* 图标按钮：去掉实心绿底，顶栏在移动端只保留「搜索」一个主色动作 */
.ab-acc-wrap{position:relative;flex:0 0 auto}
/* rework115：账户按钮 40×40，热区撑到 44×44（视觉不变）。 */
.ab-acc{position:relative}
.ab-acc::after{content:"";position:absolute;inset:-2px;border-radius:999px}

.ab-acc{
  width:40px;height:40px;border-radius:999px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:var(--fs-on-dark,#EAF2FB);
  border:1px solid rgba(255,255,255,.18);
  transition:background var(--fs-t-fast,160ms) var(--fs-ease,cubic-bezier(.23,1,.32,1)),
             transform var(--fs-t-fast,160ms) var(--fs-ease,cubic-bezier(.23,1,.32,1));
}
.ab-acc svg{width:19px;height:19px}
.ab-acc:hover{background:rgba(255,255,255,.2)}
.ab-acc:active{transform:scale(.94)}
.ab-acc.on{background:var(--fs-cta,var(--c-cta));border-color:transparent;color:#fff}
.ab-acc-pop{
  position:absolute;right:0;top:calc(100% + 10px);z-index:var(--z-float);
  min-width:228px;padding:7px;
  background:#fff;border:1px solid var(--fs-line,var(--c-line));border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(10,31,60,.28);
  transform-origin:top right;
  animation:fsAccIn 180ms var(--fs-ease,cubic-bezier(.23,1,.32,1));
}
.ab-acc-pop[hidden]{display:none}
@keyframes fsAccIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.acc-i{
  display:flex;align-items:center;gap:11px;
  padding:11px var(--s-2);border-radius:10px;text-decoration:none;
  font-size:14px;color:var(--fs-text,var(--c-text));
  transition:background var(--fs-t-fast,160ms) var(--fs-ease,cubic-bezier(.23,1,.32,1));
}
.acc-i:hover{background:var(--fs-hover,#FAFCFE)}
.acc-i:active{background:var(--fs-line-2,#EFF4FA)}
.acc-i .ac-ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,87,217,.07);color:var(--fs-primary,var(--c-brand));
}
.acc-i .ac-ic svg{width:16px;height:16px}
.acc-i b{font-weight:600}
.acc-i i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--fs-text-3,var(--c-text-3));margin-top:2px}
.acc-i.primary{background:linear-gradient(135deg,var(--fs-cta-btn-1,#0E8467),var(--fs-cta-btn-2,#0A6B4B));color:#fff}
.acc-i.primary .ac-ic{background:rgba(255,255,255,.18);color:#fff}
.acc-i.primary i{color:rgba(255,255,255,.82)}
.acc-i.primary:hover{filter:brightness(1.06)}
.acc-sep{height:1px;margin:6px var(--s-1);background:var(--fs-line-2,#EFF4FA)}
@media (prefers-reduced-motion:reduce){.ab-acc-pop{animation:none}}

/* 2.4 后台框架 iframe 内的正文上边距（head.php 原 #fs-frame-pad） */
html.fs-inframe body{padding-top:var(--s-3)}

/* 2.5 移动端底栏指示器（fs_shell_bottom 原以 style="" 输出 --tb-n 与 translateX，
       改为 data-attr 驱动 —— 纯 CSS 映射，无 JS、无内联样式。）
   `.tb-ind` 宽度用 var(--tb-n,4)（fs-shell 卷），这里按 data 属性供给变量；
   transform 按 data-idx 直查表（底栏为固定 5 项，向后兼容 2~5）。 */
.tb-in[data-tb-n="2"]{--tb-n:2}
.tb-in[data-tb-n="3"]{--tb-n:3}
.tb-in[data-tb-n="4"]{--tb-n:4}
.tb-in[data-tb-n="5"]{--tb-n:5}
.tb-in[data-tb-n="6"]{--tb-n:6}
.tb-ind[data-idx="0"]{transform:translateX(0%)}
.tb-ind[data-idx="1"]{transform:translateX(100%)}
.tb-ind[data-idx="2"]{transform:translateX(200%)}
.tb-ind[data-idx="3"]{transform:translateX(300%)}
.tb-ind[data-idx="4"]{transform:translateX(400%)}
.tb-ind[data-idx="5"]{transform:translateX(500%)}

/* ═══════════════════════════════════════════════════════════════════════════
   §3  fsc-* 组件库（views/components/ 的皮肤；只消费 1-tokens 令牌）
   BEM 约定：.fsc-block__element--modifier；新组件一律在此追加，禁止写回页内
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3.1 商品图/媒体防崩容器（铁律 7：aspect-ratio + object-fit + 占位兜底） */
.fsc-thumb{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--fsc-ratio, 1 / 1);
  background:var(--c-fill);border-radius:var(--r-2);
}
.fsc-thumb__img{width:100%;height:100%;object-fit:cover;display:block}
.fsc-thumb__ph{width:100%;height:100%;object-fit:contain;display:block;padding:12%;opacity:.5}

/* 3.2 商品卡片（商城列表） */
.fsc-card{
  display:flex;flex-direction:column;gap:var(--s-2);
  background:var(--c-card);border-radius:var(--r-3);
  padding:var(--rhythm-card, var(--s-3));
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fsc-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.fsc-card__title{
  font-size:var(--t-md);font-weight:600;color:var(--c-text);line-height:var(--lh-tight);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fsc-card__price{font-size:var(--t-lg);font-weight:700;color:var(--c-cta);font-variant-numeric:tabular-nums}
.fsc-card__price .yen{font-size:var(--t-xs);margin-right:1px}

/* 3.3 状态徽章（status-badge 组件的默认皮肤；语义 → 修饰符） */
.fsc-badge{
  display:inline-flex;align-items:center;gap:4px;
  height:22px;padding:0 9px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:600;line-height:1;
}
.fsc-badge--ok{background:rgba(0,180,42,.10);color:var(--c-success)}
.fsc-badge--bad{background:rgba(245,63,63,.10);color:var(--c-danger)}
.fsc-badge--warn{background:rgba(255,125,0,.12);color:var(--c-warning)}
.fsc-badge--info{background:var(--c-brand-weak);color:var(--c-brand)}
.fsc-badge--muted{background:var(--c-fill);color:var(--c-text-2)}
.fsc-badge--ld{background:var(--c-fill);color:var(--c-text-3)}

/* 3.4 骨架屏（empty-skeleton 组件的默认皮肤） */
.fsc-skel{
  display:block;height:14px;border-radius:6px;
  background:linear-gradient(90deg,var(--c-fill) 25%,var(--c-fill-2) 37%,var(--c-fill) 63%);
  background-size:400% 100%;animation:fscSkel 1.4s ease infinite;
}
.fsc-skel--line{height:12px;margin-bottom:var(--s-1)}
.fsc-skel--w70{width:70%}
.fsc-skel--w50{width:50%}
@keyframes fscSkel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.fsc-skel{animation:none}}

/* 3.5 空状态（empty-skeleton 组件的默认皮肤） */
.fsc-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding:var(--s-7) var(--s-3);color:var(--c-text-3);
  font-size:var(--t-sm);text-align:center;line-height:var(--lh-loose);
}
.fsc-empty svg{color:var(--c-text-4)}

/* 3.6 表单字段单元（dynamic-form 组件的默认皮肤） */
.fsc-field{display:block}
.fsc-field__label{display:flex;align-items:center;gap:var(--s-1);font-size:var(--t-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--s-1)}
.fsc-field__label i{font-style:normal;font-size:var(--t-xs);font-weight:400;color:var(--c-danger)}
.fsc-field__hint{display:block;margin-top:var(--s-1);font-size:var(--t-xs);color:var(--c-text-3);line-height:1.6}
.fsc-field__hint.bad{color:var(--c-danger)}

/* 3.7 按钮（新组件的按钮皮肤；历史页仍用自己的卷内样式） */
.fsc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--ctl-h);padding:0 var(--s-4);border-radius:var(--r-2);
  font-size:var(--t-md);font-weight:600;cursor:pointer;
  transition:filter var(--dur-fast) linear, transform var(--dur-fast) var(--ease), opacity var(--dur-fast) linear;
}
.fsc-btn:active{transform:scale(.98)}
.fsc-btn--cta{background:var(--c-cta);color:#fff}
.fsc-btn--cta:hover{filter:brightness(1.06)}
.fsc-btn--brand{background:var(--c-brand);color:#fff}
.fsc-btn--ghost{background:var(--c-fill);color:var(--c-text-2)}
.fsc-btn[disabled],.fsc-btn.is-busy{opacity:.55;cursor:not-allowed}
.fsc-btn.is-busy{pointer-events:none}

/* 3.8 弹窗/抽屉容器（modal-drawer 组件的默认皮肤） */
.fsc-modal{
  position:fixed;inset:0;z-index:var(--z-getmask);
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,31,60,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.fsc-modal__box{
  width:280px;max-width:86vw;background:#fff;border-radius:var(--r-3);
  padding:22px 26px 18px;box-shadow:var(--sh-3);
  animation:fscModalIn var(--dur-slow) var(--ease);
}
.fsc-modal__ti{font-size:var(--t-md);font-weight:600;color:var(--c-text);min-height:22px}
.fsc-modal__sub{margin-top:var(--s-1);font-size:var(--t-xs);color:var(--c-text-3)}
.fsc-modal__bar{margin-top:14px;height:8px;border-radius:4px;background:var(--c-fill);overflow:hidden}
.fsc-modal__bar > i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--c-brand),var(--c-cta));border-radius:4px;transition:transform var(--dur-slow) var(--ease)}
.fsc-modal__pct{margin-top:var(--s-1);font-size:var(--t-xs);color:var(--c-text-3);text-align:right;font-variant-numeric:tabular-nums}
.fsc-modal__orb{display:flex;gap:6px;justify-content:center;margin-bottom:var(--s-2)}
.fsc-modal__orb > i{width:10px;height:10px;border-radius:50%;background:var(--c-brand-weak-2);animation:fscOrb 1s ease-in-out infinite}
.fsc-modal__orb > i:nth-child(2){animation-delay:.16s}
.fsc-modal__orb > i:nth-child(3){animation-delay:.32s}
@keyframes fscOrb{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
@keyframes fscModalIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fsc-modal__box{animation:none}.fsc-modal__orb > i{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   §4  legacy 后台页：原 [style*=] 属性选择器的等价类（R211 Stage 5 清洗配套）
   ---------------------------------------------------------------------------
   背景：fs-admin-u 卷用 `#charge [style*="color:red"]` 这类**属性选择器**给内联色
   重新裁决了生效色。本轮把内联 style= 换成类名后，属性选择器不再命中 —— 这里
   以类名把**同一组生效色**钉死（取值逐一取自 fs-admin-u 卷，逐像素对等）。
   ═══════════════════════════════════════════════════════════════════════════ */
#charge .u-ink{color:var(--c-text)!important}
#charge .u-ink-red{color:#9E2B2B!important}
#charge .u-ink-green{color:#0B7A55!important}
#gdlist .u-ink-red{color:#9E2B2B!important}
#gdlist .u-ink-dodge{color:var(--t2,#3D5064)!important}

/* ─────────────────────────────────────────────────────────────────────────
   §5  历史页级等价类（R211 Stage 5 内联清洗配套；选择器全部页级/唯一类名，
       不与其它页冲突。取值 = 原内联值逐字对等。）
   ───────────────────────────────────────────────────────────────────────── */
/* pay.php */
.pay-query-btn{background:linear-gradient(135deg,var(--fs-primary),#1A6BC4)!important;box-shadow:0 4px 12px rgba(22,87,217,.26)!important}
.pay-ic-a{background:#1678FF}
.pay-ic-q{background:#12B7F5}
.pay-ic-w{background:#09BB07}
.pay-tip-ctr{text-align:center!important;margin:4px 0 10px!important}
.pay-typebtn-cancel{justify-content:center!important;color:var(--fs-text-3)!important}
/* cqq.php */
.cqq-row{display:flex!important;align-items:center!important;gap:10px!important}
.cqq-flex1{flex:1!important}
.cqq-acts{display:flex!important;justify-content:space-around!important;margin-top:24px!important}
.cqq-col{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important}
.cqq-col-mt{margin-top:16px!important}
/* gongdan.php */
.gd-select-sm{height:26px!important;padding:0 24px 0 8px!important}
/* kcid.php / paylist.php 三列筛选条 */
.flt--3col{grid-template-columns:180px minmax(0,1fr) auto!important}
.kcid-td{max-width:520px!important;word-break:break-all!important}
/* mzsm.php */
.mz-h--legacy{font-size:19px!important;margin:4px 2px 14px!important}
/* task.php */
.task-prebox{max-height:340px!important;overflow:auto!important}
.task-pre{white-space:pre-wrap!important;font-size:11px!important;line-height:1.6!important;margin:0!important}
/* login.php 弹层内联（JS 模板串） */
.lg-cap-box{padding:14px 18px 6px}
.lg-cap-in{width:100%;box-sizing:border-box;margin-bottom:12px}
.lg-cap-row{display:flex;align-items:center;gap:8px;height:46px;background:#F2F6FB;border-radius:6px;padding:0 10px}
.lg-cap-in2{flex:1;min-width:0}
.lg-cap-q{cursor:pointer;user-select:none;color:#0D8F7A;font-weight:500;white-space:nowrap;letter-spacing:1px}
/* home 部分页 */
.hm-thumb-ph{display:flex!important;align-items:center!important;justify-content:center!important;background:var(--fs-line-2)!important;color:var(--fs-text-2)!important;font-size:16px!important}
.gd-empty-ic{margin:0 auto 12px!important;display:block!important}
/* add_pl.php */
.pl-ta{height:120px!important}
/* home.php 控制台（JS 模板串） */
.hp-note-pop{padding:15px 20px;text-align:justify;line-height:22px;border-bottom:1px solid #e2e2e2;background-color:#2f4056;color:#ffffff}
.hp-note-t{text-align:center;margin-bottom:20px;font-weight:bold;border-bottom:1px solid #718fb5;padding-bottom:5px}
.hp-note-b{font-size:12px}
.hp-note-ts{float:right;right:1px;font-size:12px;color:#b1b3b9;margin-top:1px}


/* ============================================================================
   R220（2026-10-17）· S2 移动端全局层：跨会话共享单元（协调契约 v1.1 Milestone-0）
   ----------------------------------------------------------------------------
   ① .fs-stickybar —— 底部常驻操作条共享单元（根类名即接口，内部结构自由）。
      几何与下单页既有 .obb 逐值一致（经线上验证的形态固化为共享件）：
      仅移动端形态生效（html.fs-mobile）；.show 控制滑入/滑出。
      S1（下单页金额条）/ S3（首页双 CTA / 查单动作条）新做常驻条时引用本单元，
      不各自重建；既有 .obb 可继续服役，收尾平移。
   ② .tap-44 —— 44px 触控热区工具类（不改观感）。
      用法：<button class="原类名 tap-44">。对「已是绝对定位」的控件
      （如 .fld-clr）只取 ::after 效果同样成立。热区尺寸取自 --tap-min（1-tokens），
      与站内 .ab-login::after 同法。
   ============================================================================ */
html.fs-mobile .fs-stickybar{position:fixed;left:10px;right:10px;bottom:var(--sticky-bottom, calc(var(--tabbar-h, 60px) + env(safe-area-inset-bottom, 0px) + 10px));z-index:var(--z-bar);display:flex;align-items:center;gap:var(--sticky-gap, 10px);background:#fff;border:1px solid var(--fs-line);border-radius:14px;box-shadow:0 10px 30px rgba(10,31,60,.18);padding:10px var(--s-2);transform:translateY(calc(100% + 32px));transition:transform var(--fs-t-slow, 320ms) var(--fs-ease, cubic-bezier(.23,1,.32,1));pointer-events:none}
html.fs-mobile .fs-stickybar.show{transform:none;pointer-events:auto}
html.fs-mobile .fs-stickybar .fs-stickybar-go{flex:0 0 auto;min-height:var(--tap-min, 44px);padding:0 var(--s-3);white-space:nowrap;border:none;border-radius:12px;background:linear-gradient(135deg,var(--fs-cta-btn-1,#0E8467),var(--fs-cta-btn-2,#0A6B4B));color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform var(--fs-t-fast, 160ms) var(--fs-ease, cubic-bezier(.23,1,.32,1)),opacity var(--fs-t-fast, 160ms) var(--fs-ease, cubic-bezier(.23,1,.32,1))}
html.fs-mobile .fs-stickybar .fs-stickybar-go:active{transform:scale(.97)}
html.fs-mobile .fs-stickybar .fs-stickybar-go:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion:reduce){html.fs-mobile .fs-stickybar{transition:none}}
.tap-44{position:relative}
.tap-44::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,var(--tap-min, 44px));height:max(100%,var(--tap-min, 44px))}

/* ═══════════════════════════════════════════════════════════════════════════
   R228 · 全站 UI 标准化补齐层（2026-10-17）
   为「旧后台框架的散装标记 → fsc-* 语义组件」迁移提供统一落点。
   纪律：只消费 1-tokens 令牌，不写死颜色/间距/圆角/阴影/层级/字号。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① 工具类：内联样式禁令的出口（原散落 style='color:#…' 一律改这里） */
.u-hl{color:var(--c-danger)}
.u-warn{color:var(--c-warning)}
.u-ok{color:var(--c-success)}
.u-muted{color:var(--c-text-2)}
.u-tnum{font-variant-numeric:tabular-nums}
.u-clamp-1,.u-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.u-clamp-1{-webkit-line-clamp:1}
.u-clamp-2{-webkit-line-clamp:2}

/* ② 12 栏栅格：替代旧框架的 row / col-* 行列体系 */
.fsc-row{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}
.fsc-row--tight{gap:var(--s-2)}
.fsc-col,.fsc-col--full{grid-column:span 12;min-width:0}
.fsc-col--half{grid-column:span 6;min-width:0}
.fsc-col--third{grid-column:span 4;min-width:0}
.fsc-col--quarter{grid-column:span 3;min-width:0}
@media (max-width:820px){.fsc-col--half,.fsc-col--third,.fsc-col--quarter{grid-column:span 12}}

/* ③ 表单网格：替代旧框架竖排堆叠的表单项 */
.fsc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4)}
.fsc-form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fsc-form-grid__full{grid-column:1/-1}
@media (max-width:820px){.fsc-form-grid,.fsc-form-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ④ 富文本说明块：替代旧框架的大段说明文字容器 */
.fsc-prose{color:var(--c-text-2);font-size:var(--t-md);line-height:var(--lh-loose)}
.fsc-prose :where(p,ul,ol,dl,blockquote,pre,table){margin:0 0 var(--s-3)}
.fsc-prose :where(p,ul,ol,dl):last-child{margin-bottom:0}
.fsc-prose :where(ul,ol){padding-left:var(--s-5)}
.fsc-prose :where(h1,h2,h3,h4){margin:var(--s-4) 0 var(--s-2);color:var(--c-text);font-size:var(--t-lg);line-height:var(--lh-tight)}
.fsc-prose :where(h1,h2,h3,h4):first-child{margin-top:0}
.fsc-prose :where(code,kbd){padding:1px var(--s-0);border-radius:var(--r-1);background:var(--c-fill);font-size:var(--t-sm)}
.fsc-prose :where(a){color:var(--c-brand);text-decoration:none}
.fsc-prose :where(a:hover){text-decoration:underline}
.fsc-prose :where(img){max-width:100%;height:auto;border-radius:var(--r-2)}

/* ⑤ 提示块：替代旧框架的引用块 / 灰底说明条 */
.fsc-callout{display:block;padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);border-left:3px solid var(--c-brand);border-radius:var(--r-2);background:var(--c-card);color:var(--c-text-2);font-size:var(--t-md);line-height:var(--lh-base)}
.fsc-callout>:first-child{margin-top:0}
.fsc-callout>:last-child{margin-bottom:0}
.fsc-callout--ok{border-left-color:var(--c-success)}
.fsc-callout--warn{border-left-color:var(--c-warning)}
.fsc-callout--danger{border-left-color:var(--c-danger)}

/* ⑥ 时间线：替代旧框架的竖排时间轴 */
.fsc-timeline{position:relative;margin:0;padding:0 0 0 var(--s-4);list-style:none}
.fsc-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;border-radius:var(--r-full);background:var(--c-line)}
.fsc-timeline__item{position:relative;padding:0 0 var(--s-4) var(--s-4)}
.fsc-timeline__item:last-child{padding-bottom:0}
.fsc-timeline__item::before{content:"";position:absolute;left:calc(-1 * var(--s-4) + 1px);top:5px;width:10px;height:10px;border:2px solid var(--c-brand);border-radius:var(--r-full);background:var(--c-card);box-sizing:border-box}
.fsc-timeline__item--ok::before{border-color:var(--c-success)}
.fsc-timeline__item--warn::before{border-color:var(--c-warning)}
.fsc-timeline__time{display:block;margin-top:var(--s-0);color:var(--c-text-3);font-size:var(--t-xs);font-variant-numeric:tabular-nums}

/* ⑦ 纵向节奏助手：后台子页与卡片流的统一留白 */
.fsc-stack{display:flex;flex-direction:column;gap:var(--s-3)}
.fsc-stack--lg{gap:var(--s-5)}

/* ═══════════════════════════════════════════════════════════════════════════
   §1.1 请求提示弹窗（#fsl-toast）—— R255 CSP 收紧的配套迁移
   原由 fs/fs-loader.js 运行时 document.createElement('style') 注入；
   CSP 收紧为 style-src 'self' 后被浏览器拦截（控制台报 2 条 inline style 违规），
   迁入本卷：渲染阻塞加载、首帧即生效，比脚本注入更早，且可被浏览器缓存。
   ═══════════════════════════════════════════════════════════════════════════ */
#fsl-toast{position:fixed;left:50%;top:18px;z-index:var(--z-loading-toast, 2147483002);display:flex;align-items:center;gap:9px;
padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.97);border:1px solid var(--c-line);
box-shadow:0 6px 22px rgba(10,31,60,.14);color:var(--c-text);font-size:13px;font-weight:600;line-height:1;
pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-6px) scale(.97);
transition:opacity var(--fs-t-fast,160ms) var(--fs-ease,cubic-bezier(.23,1,.32,1)),
transform var(--fs-t-mid,240ms) var(--fs-ease,cubic-bezier(.23,1,.32,1)),visibility 0s linear var(--fs-t-fast,160ms)}
#fsl-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
transition:opacity var(--fs-t-fast,160ms) var(--fs-ease,cubic-bezier(.23,1,.32,1)),
transform var(--fs-t-mid,240ms) var(--fs-ease,cubic-bezier(.23,1,.32,1))}
#fsl-toast .sp{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(22,87,217,.22);border-top-color:var(--c-brand);animation:fslspin .7s linear infinite}
#fsl-toast .tx{white-space:nowrap}
#fsl-toast .n{flex:none;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#EDF2F8;color:#5B7086;font-size:var(--t-xs);font-weight:600;display:none;align-items:center;justify-content:center}
#fsl-toast.many .n{display:flex}
@media (prefers-reduced-motion:reduce){#fsl-toast{transition:none}}

/* ── §1.2 一键复制（.fs-copyable / .fs-copy-toast）—— R255 同上迁移
   原由 fs/fs-copy.js 注入（该脚本在 cashier/order 等页按需加载）。 ── */
.fs-copyable{cursor:pointer;font-style:normal}
.fs-copyable:focus-visible{outline:2px solid #1657D9;outline-offset:2px;border-radius:3px}
.fs-copyable:hover{text-decoration:underline dotted}
.fs-copy-toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
background:#17324B;color:#fff;font-size:13px;padding:8px 16px;border-radius:999px;z-index:99999;
opacity:0;transition:opacity .18s ease;pointer-events:none;box-shadow:0 6px 20px rgba(23,50,75,.25)}
.fs-copy-toast.show{opacity:1}