/* ============================================================================
   智游大别山 · 全站 UI 统一标准 v2  (ui.css)
   ----------------------------------------------------------------------------
   定位：全站唯一「设计系统基线层」。nginx 注入到对客页面 </head>，
        排在 mobile.css 之前（先基线、后移动端微调）。

   v2 修订（2026-09-11）：v1 曾整体重定义 .page-hd / .back-bar / .hd / .tabs，
   结果把板块页的「杂志封面 hero」压扁（.page-icon / .page-count 的绝对定位被
   position:relative 覆盖、170px 顶部留白被 padding 覆盖）。

   ★ 立标铁律（v2 起永久执行）：
     本文件**只统一视觉属性**（颜色 / 圆角 / 间距 / 阴影 / 字号 / 字重 / 过渡），
     **绝不声明** display / position / float / width / min-height / padding 这类
     布局属性 —— 除非该属性在所有页面族里语义完全一致。
     页面族各有的 bespoke hero（板块页杂志封面、资讯页页头、游客圈顶栏）
     一律**不由本文件接管**，只保证它们的色系落到品牌绿。

   组织：
     0. 设计令牌（唯一真源）
     1. 全站基线
     2. 留白节奏
     3. 卡片
     4. 标签 / 胶囊 / 徽章
     5. 按钮
     6. 详情页（文章）
     7. 历史组件并轨层（琥珀金 / 奶油米黄 → 品牌绿）
     8. 资讯页并轨（zx-* 分类杂色 → 品牌绿阶）
     9. 桌面端留白
    10. 打印
   ========================================================================== */

/* ==================== 0. 设计令牌（唯一真源） ==================== */
:root{
  /* 品牌主色阶 —— 大别山绿 */
  --c-brand-900:#0f3d12;
  --c-brand-800:#15521a;
  --c-brand-700:#1a5c1a;   /* 主色 */
  --c-brand-600:#206b20;
  --c-brand-500:#2d8a2d;   /* 亮色 */
  --c-brand-400:#4caf50;
  --c-brand-300:#8cc98c;
  --c-brand-100:#e8f5e8;
  --c-brand-50:#f2f8f2;
  --c-brand-line:#dcebdc;

  /* 中性色阶 */
  --c-ink:#1f2b21;
  --c-ink-2:#4a5a4f;
  --c-ink-3:#8a9a90;
  --c-line:#e8efe8;
  --c-bg:#f4f7f4;
  --c-surface:#ffffff;
  --c-surface-2:#fafcfa;

  /* 点缀色（克制使用） */
  --c-gold:#d9a441;        /* 唯一暖色点缀：预警 / 招聘等"注意"语义 */
  --c-red:#c8102e;         /* 价格 / 强调 */

  /* 语义色（站内不引入外来色系，语义色直接映射到品牌色阶） */
  --c-success:#2d8a2d;     /* = brand-500 */
  --c-warning:#d9a441;     /* = gold */
  --c-danger:#c8102e;      /* = red */
  --c-info:#1a5c1a;        /* = brand-700 */

  /* 渐变（只允许 3 种） */
  --g-brand:linear-gradient(135deg,#15521a 0%,#1a5c1a 48%,#2d8a2d 100%);
  --g-brand-soft:linear-gradient(135deg,#e8f5e8,#dcecda);
  --g-brand-bar:linear-gradient(180deg,#2d8a2d,#8cc98c);

  /* 圆角 —— 全站只允许 4 档 */
  --r-xs:10px;
  --r-sm:14px;
  --r-lg:20px;
  --r-pill:999px;

  /* 字号 —— 全站只允许 6 档（禁半像素） */
  --fs-1:12px;
  --fs-2:13px;
  --fs-3:15px;
  --fs-4:17px;
  --fs-5:20px;
  --fs-6:26px;

  /* 间距 —— 8px 栅格 */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px;
  --sp-page:14px;

  /* 层级 */
  --z-drawer:900; --z-mask:1000; --z-modal:1010; --z-toast:2000; --z-tabbar:10000;

  /* 阴影 —— 全站只允许 2 档 */
  --sh-1:0 2px 10px rgba(20,60,20,.06);
  --sh-2:0 10px 28px rgba(20,60,20,.12);

  /* 动效 */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t:.24s;

  --read-w:720px;
}

/* 兼容别名 —— 历史页面 / 内联样式引用过的旧变量名。
   盘点实测：站内有 83 个变量被定义、79 个被引用，但有若干"引用了却从未定义"
   的变量名（--shadow / --article / --appmsg …），导致这些属性整条失效。
   统一在此补定义，让旧引用自动落到标准令牌上（相当于一次静默并轨）。 */
:root{
  --shadow:var(--sh-2);
  --shadow-sm:var(--sh-1);
  --radius:var(--r-sm);
  --border-radius:var(--r-sm);
  --radius-sm:var(--r-xs);
  --radius-lg:var(--r-lg);
  --primary-color:var(--c-brand-700);
  --primary:var(--c-brand-700);
  --main-color:var(--c-brand-700);
  --theme-color:var(--c-brand-700);
  --brand-color:var(--c-brand-700);
  --accent-color:var(--c-brand-500);
  --text-color:var(--c-ink);
  --text-color-2:var(--c-ink-2);
  --text-color-3:var(--c-ink-3);
  --text-main:var(--c-ink);
  --text-sub:var(--c-ink-2);
  --text-light:var(--c-ink-3);
  --border-color:var(--c-line);
  --bg-color:var(--c-bg);
  --bg-main:var(--c-bg);
  --card-bg:var(--c-surface);
  --surface:var(--c-surface);
  --success:var(--c-success);
  --warning:var(--c-warning);
  --danger:var(--c-danger);
  --error:var(--c-danger);
}

/* ==================== 1. 全站基线 ==================== */
*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.7;
}

img,video,iframe,canvas,svg{max-width:100%}

a{color:var(--c-brand-700)}

:focus-visible{outline:2px solid var(--c-brand-500);outline-offset:2px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--c-brand-100);color:var(--c-brand-800)}

*{scrollbar-width:thin;scrollbar-color:var(--c-brand-300) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--c-brand-300);border-radius:var(--r-pill)}
*::-webkit-scrollbar-thumb:hover{background:var(--c-brand-500)}

/* ==================== 2. 留白节奏 ==================== */
.list{padding:var(--sp-4) var(--sp-page) var(--sp-7)}
.list > *:last-child{margin-bottom:0}

.hs-sec{
  display:flex;align-items:center;gap:var(--sp-3);
  margin:var(--sp-6) 2px var(--sp-2);
  font-size:var(--fs-4);font-weight:800;color:var(--c-brand-700);
}
.hs-sec::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--g-brand-bar)}
.hs-sec span{font-size:var(--fs-1);color:var(--c-ink-3);font-weight:400}

.pagination{padding:var(--sp-5) var(--sp-3) var(--sp-2);text-align:center;
  font-size:var(--fs-2);color:var(--c-ink-3)}

/* ==================== 3. 卡片 ==================== */
.card{
  position:relative;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  padding:var(--sp-4);
  margin-bottom:var(--sp-3);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
/* 左侧 4px 品牌绿装饰条 —— 全站卡片统一识别符号
   （position:absolute 使其不参与任何 flex 布局，零结构影响） */
.card::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;
  border-radius:0 4px 4px 0;
  background:var(--g-brand-bar);
  opacity:.9;
  transition:width var(--t) var(--ease), background var(--t) var(--ease);
}
.card:hover{box-shadow:var(--sh-2);border-color:var(--c-brand-line)}
.card:hover::before{width:6px;background:linear-gradient(180deg,var(--c-brand-700),var(--c-brand-400))}

.card-hd{gap:var(--sp-3);margin-bottom:var(--sp-3)}
.card .num{
  border-radius:50%;
  background:var(--g-brand-soft);color:var(--c-brand-600);
  font-weight:800;
  box-shadow:inset 0 0 0 1px var(--c-brand-line);
}
.card .title{font-weight:800;color:var(--c-brand-800)}
.card .loc{color:var(--c-ink-3)}
.card .tags{gap:7px;margin-bottom:var(--sp-3)}
.card .meta{
  color:var(--c-ink-2);
  margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-xs);
}
.card .desc{color:var(--c-ink-2)}
.card .card-img{border-radius:var(--r-sm);transition:transform .45s var(--ease)}
.card:hover .card-img{transform:scale(1.03)}
.card .card-cta{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:var(--sp-3);padding:7px 15px;
  background:var(--c-brand-50);color:var(--c-brand-600);
  border:1px solid var(--c-brand-line);border-radius:var(--r-pill);
  font-size:var(--fs-2);font-weight:700;text-decoration:none;
  transition:all var(--t) var(--ease);
}
.card:hover .card-cta{background:var(--g-brand);color:#fff;border-color:transparent}

/* ==================== 4. 标签 / 胶囊 / 徽章 ==================== */
.tag{
  display:inline-block;
  padding:4px 12px;
  background:var(--c-brand-50);
  color:var(--c-brand-600);
  border:1px solid var(--c-brand-line);
  border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.3px;
  line-height:1.5;
}

/* 通用胶囊（筛选片 / 选项卡） */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 16px;
  border-radius:var(--r-pill);
  background:var(--c-brand-50);
  color:var(--c-brand-600);
  border:1px solid var(--c-brand-line);
  font-size:var(--fs-2);font-weight:600;
  white-space:nowrap;cursor:pointer;
  transition:all .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip.on{background:var(--g-brand);color:#fff;border-color:transparent;
  box-shadow:0 3px 12px rgba(26,92,26,.28)}

/* 分类徽章：统一品牌绿，类目差异由文字表达 */
.sec-badge{background:var(--c-brand-500)!important;color:#fff!important}

/* ==================== 5. 按钮 ==================== */
.btn,.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:12px 26px;
  background:var(--g-brand);color:#fff;
  border:none;border-radius:var(--r-pill);
  font-size:var(--fs-3);font-weight:700;letter-spacing:.5px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(26,92,26,.26);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active,.cta-btn:active{transform:translateY(1px) scale(.99);box-shadow:0 3px 10px rgba(26,92,26,.24)}

.btn-ghost,.cta-out{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:12px 24px;
  background:var(--c-surface);color:var(--c-brand-700);
  border:1.5px solid var(--c-brand-line);border-radius:var(--r-pill);
  font-size:var(--fs-3);font-weight:700;text-decoration:none;cursor:pointer;
  transition:all .2s var(--ease);
}
.btn-ghost:active,.cta-out:active{background:var(--c-brand-50);border-color:var(--c-brand-300)}

.expand-btn{
  display:inline-block;margin-top:var(--sp-1);padding:2px 0;
  background:none;border:none;color:var(--c-brand-500);
  font-size:var(--fs-2);font-weight:600;letter-spacing:.4px;cursor:pointer;
  transition:opacity .2s var(--ease);
}
.expand-btn:active{opacity:.6}

/* ==================== 6. 详情页（文章） ==================== */
.detail-hero{background:var(--c-brand-700)}
.detail-hero::after{background:linear-gradient(to top, rgba(0,0,0,.6), transparent 52%)}
.detail-content{padding:var(--sp-4) var(--sp-page) var(--sp-2)}
.detail-title{
  font-weight:800;color:var(--c-brand-800);
  line-height:1.45;letter-spacing:.2px;
}
.detail-loc,.detail-meta{color:var(--c-ink-3)}
.detail-tags{gap:var(--sp-1)}
.detail-section-title{
  font-weight:800;color:var(--c-brand-700);
  padding-left:var(--sp-3);line-height:1.4;
}
.detail-section-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:16px;border-radius:3px;background:var(--g-brand-bar);
}
.detail-content p{color:var(--c-ink-2);line-height:1.9}

.info-row{border-bottom:1px dashed var(--c-line);padding:10px 0}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--c-ink-3)}
.info-value{color:var(--c-ink);font-weight:600}

.related-card{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--sp-3);margin-bottom:var(--sp-2);
  box-shadow:var(--sh-1);transition:all var(--t) var(--ease);
}
.related-card:hover{box-shadow:var(--sh-2);border-color:var(--c-brand-line)}
.related-title{font-weight:700;color:var(--c-brand-700)}
.related-loc,.related-info{color:var(--c-ink-3)}
.related-num{
  background:var(--c-brand-50);color:var(--c-brand-600);
  border-radius:var(--r-pill);font-weight:800;
}

/* ============================================================================
   7. 历史组件并轨层（琥珀金 / 奶油米黄 → 品牌绿）
   ----------------------------------------------------------------------------
   背景：2026-09-08 有人在板块页上叠了一套「琥珀金 + 奶油米黄」调色板
        （.mg-pick / .mg-ofc / .closing / .page-lead），与品牌绿同屏 →
        正是"大杂烩、拼凑感"的根因。生成器（gen_site.py / gen_zixun.py /
        home_sections.js）已同步修正；本层让**存量页面立即并轨**，不必等部署。

   这里集中用 !important 是刻意的：存量页把颜色写在各页内联 <style> 里，
   只有 !important 才能在不改 4000+ 页面的前提下一次性拉回统一标准。
   ========================================================================== */

/* --- 编辑精选横滑（.mg-pick-*）--- */
.mg-pick-bar{background:var(--g-brand-bar)!important}
.mg-pick-title{color:var(--c-brand-700)!important}
.mg-pick-note{color:var(--c-ink-3)!important}
.mg-pick-item{background:var(--c-surface)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-sm)!important;box-shadow:var(--sh-1)!important}
.mg-pick-ph{background-color:var(--c-brand-100)!important}
.mg-pick-rank{background:var(--g-brand)!important;border-radius:var(--r-xs)!important;
  font-family:inherit!important;box-shadow:0 2px 6px rgba(20,60,20,.28)!important}
.mg-pick-name{color:var(--c-brand-800)!important}
.mg-pick-loc{color:var(--c-ink-3)!important}
.mg-pick-rc{color:var(--c-brand-500)!important}

/* --- 页头导语 + 纯色页头 --- */
.page-lead{border-left:3px solid var(--c-brand-400)!important}
.page-hd.mg-plain{background:var(--g-brand)!important}
.page-hd.mg-plain::after{background:none!important}

/* --- 官方直达横滑（.mg-ofc-*，home_sections.js）--- */
.mg-ofc-bar{background:var(--g-brand-bar)!important}
.mg-ofc-title{color:var(--c-brand-700)!important}
.mg-ofc-note{color:var(--c-ink-3)!important}
.mg-ofc-card{background:var(--c-surface)!important;border:1px solid var(--c-line)!important;
  border-top:3px solid var(--c-brand-500)!important;border-radius:var(--r-sm)!important;
  box-shadow:var(--sh-1)!important}
.mg-ofc-name{color:var(--c-brand-800)!important}
.mg-ofc-sub{color:var(--c-ink-3)!important}
.mg-ofc-go{color:var(--c-brand-500)!important}

/* --- 刊尾封底（.closing*，奶油米黄 → 品牌浅绿）--- */
.closing{background:var(--c-brand-50)!important;border-top:1px solid var(--c-brand-line)!important;
  border-bottom:1px solid var(--c-line)!important}
/* 刊尾封底不再显示大字水印（2026-09-11 老板令：「最下面的英文字母乱搞」）——
   生成器源头已同步删除，本层负责让存量页面立即生效。 */
.closing::before{content:none!important}
.closing .pag-btn{background:var(--g-brand)!important;
  box-shadow:0 3px 10px rgba(26,92,26,.22)!important;border-radius:var(--r-pill)!important}
.closing .pag-info{color:var(--c-brand-500)!important}
.closing-rule{background:linear-gradient(90deg,rgba(45,138,45,0),rgba(45,138,45,.85),rgba(45,138,45,0))!important}
.closing-vol{color:var(--c-brand-700)!important}
.closing-greet{color:var(--c-brand-800)!important}
.closing .cta-btn{background:var(--g-brand)!important;box-shadow:0 6px 18px rgba(26,92,26,.3)!important}
.closing .qr-box{border:1.5px solid var(--c-brand-line)!important;
  box-shadow:0 4px 18px rgba(26,92,26,.10)!important}
.closing .qr-tip{color:var(--c-brand-500)!important}
.closing .ft{background:transparent!important;border-top:1px solid var(--c-brand-line)!important;
  color:var(--c-ink-2)!important}
.closing .ft-brand{color:var(--c-brand-700)!important}
.closing .ft-slogan{color:var(--c-ink-2)!important}

/* --- 详情页 CTA --- */
.detail-cta .cta-btn{background:var(--g-brand)!important;box-shadow:0 6px 18px rgba(26,92,26,.28)!important}

/* ============================================================================
   8. 资讯页并轨（zx-*）
   ----------------------------------------------------------------------------
   原按类目给 #d32f2f 红 / #3949ab 靛 / #00897b 青 / #5a6b7b 灰蓝 / #f57c00 橙，
   五个互不相干的色相同屏 → 显乱。改为**品牌绿单色阶**（深浅区分类目）+
   唯一暖色点缀（--c-gold 用于"预警 / 招聘"这类需注意的语义）。
   ========================================================================== */
.zx-card.shishi .zx-cat{background:var(--c-brand-700)!important}
.zx-card.zhengwu .zx-cat{background:var(--c-brand-500)!important}
.zx-card.dongtai .zx-cat{background:var(--c-brand-400)!important}
.zx-card.warn .zx-cat{background:var(--c-gold)!important}

.zx-card.shishi{border-left-color:var(--c-brand-700)!important}
.zx-card.zhengwu{border-left-color:var(--c-brand-500)!important}
.zx-card.dongtai{border-left-color:var(--c-brand-400)!important}
.zx-card.warn{border-left-color:var(--c-gold)!important}

/* 招聘徽章 / 分享按钮 橙红 → 品牌绿 */
.rc-badge{background:var(--c-gold)!important}
.rc-share{color:var(--c-brand-600)!important}

/* tab 计数气泡：原为 rgba(255,255,255,.35) 白底 → 白底上看不见数字，只飘个数
   改为浅绿底 + 品牌绿字，尺寸加大到 18px 可读 */
.zx-badge{
  min-width:18px!important;height:18px!important;border-radius:var(--r-pill)!important;
  font-size:10px!important;font-weight:700!important;
  background:var(--c-brand-100)!important;color:var(--c-brand-700)!important;
}
.zx-badge.red-badge{background:var(--c-gold)!important;color:#fff!important}
.zx-tab.on .zx-badge{background:#fff!important;color:var(--c-brand-600)!important}
.zx-tab.on .zx-badge.red-badge{background:#fff!important;color:var(--c-brand-600)!important}

/* ==================== 9. 桌面端留白 ==================== */
@media (min-width:769px){
  .list,.feed,.detail-content{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .card{padding:var(--sp-5);margin-bottom:var(--sp-4)}
}

/* ==================== 10. 打印 & 动效偏好 ==================== */
@media print{
  .m-tabbar,.chat-fab,.login-fab,.to-top,.back-bar{display:none!important}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================================
   11. 断点口径（唯一）
   ----------------------------------------------------------------------------
   CSS 变量无法用于 @media，故以注释固化为口径：任何页面新增断点只能从这四档取。
       sm  640px   大屏手机横屏 / 小平板
       md  768px   平板竖屏   ← 站内「移动 / 桌面」分界线，mobile.css 用这条
       lg  1024px  平板横屏 / 小笔记本
       xl  1280px  桌面
   ========================================================================== */

/* ============================================================================
   12. 可复用基础组件层（.ui-* 命名空间）
   ----------------------------------------------------------------------------
   与页面既有类名**零冲突**（全站现有 class 无一以 ui- 开头）。
   新页面 / 新模块一律用这一层；老页面按类目逐个迁移，不一次性重写。

   每个组件都覆盖「默认 / hover / active / disabled / loading」五种状态，
   以及「空 / 加载 / 错误」三种数据状态 —— 这是"体验断裂"的解药。
   ========================================================================== */

/* ---------- 12.1 按钮 ---------- */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:44px;padding:0 var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:inherit;font-size:var(--fs-3);font-weight:700;letter-spacing:.4px;
  line-height:1;white-space:nowrap;text-decoration:none;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),box-shadow .2s var(--ease),
             transform .12s var(--ease),opacity .2s var(--ease);
}
.ui-btn:active{transform:translateY(1px) scale(.99)}
.ui-btn:focus-visible{outline:2px solid var(--c-brand-500);outline-offset:2px}

/* 变体：primary（默认） */
.ui-btn,.ui-btn--primary{
  background:var(--g-brand);color:#fff;
  box-shadow:0 6px 18px rgba(26,92,26,.26);
}
.ui-btn:hover,.ui-btn--primary:hover{box-shadow:0 8px 22px rgba(26,92,26,.32)}
/* 变体：secondary（描边） */
.ui-btn--secondary{
  background:var(--c-surface);color:var(--c-brand-700);
  border-color:var(--c-brand-line);box-shadow:none;
}
.ui-btn--secondary:hover{background:var(--c-brand-50);border-color:var(--c-brand-300)}
/* 变体：ghost（无框） */
.ui-btn--ghost{
  background:transparent;color:var(--c-brand-700);border-color:transparent;box-shadow:none;
}
.ui-btn--ghost:hover{background:var(--c-brand-50)}
/* 变体：danger */
.ui-btn--danger{
  background:var(--c-danger);color:#fff;box-shadow:0 6px 18px rgba(200,16,46,.22);
}
.ui-btn--danger:hover{box-shadow:0 8px 22px rgba(200,16,46,.3)}
/* 变体：warning */
.ui-btn--warning{
  background:var(--c-warning);color:#fff;box-shadow:0 6px 18px rgba(217,164,65,.24);
}
/* 变体：block */
.ui-btn--block{display:flex;width:100%}

/* 尺寸 */
.ui-btn--sm{height:34px;padding:0 var(--sp-3);font-size:var(--fs-2)}
.ui-btn--lg{height:52px;padding:0 var(--sp-7);font-size:var(--fs-4)}

/* 状态：禁用 */
.ui-btn:disabled,.ui-btn[aria-disabled="true"],.ui-btn.is-disabled{
  background:var(--c-brand-100);color:var(--c-ink-3);border-color:transparent;
  box-shadow:none;cursor:not-allowed;transform:none;opacity:.75;
}
/* 状态：加载中（文字左侧出现转圈，并锁交互） */
.ui-btn.is-loading{pointer-events:none;opacity:.85}
.ui-btn.is-loading::before{
  content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:uiSpin .7s linear infinite;
}
.ui-btn--secondary.is-loading::before,.ui-btn--ghost.is-loading::before{
  border-color:var(--c-brand-300);border-top-color:var(--c-brand-700);
}
@keyframes uiSpin{to{transform:rotate(360deg)}}
.ui-spinner{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;
  border:2px solid var(--c-brand-300);border-top-color:var(--c-brand-700);
  animation:uiSpin .7s linear infinite;
}

/* ---------- 12.2 表单 ---------- */
.ui-field{margin-bottom:var(--sp-4)}
.ui-label{
  display:block;margin-bottom:var(--sp-2);
  font-size:var(--fs-2);font-weight:700;color:var(--c-ink);
  letter-spacing:.2px;
}
/* 必填标识 */
.ui-req::after{content:"*";color:var(--c-danger);margin-left:3px;font-weight:800}

.ui-input,.ui-select,.ui-textarea{
  display:block;width:100%;
  padding:12px var(--sp-4);
  background:var(--c-surface);color:var(--c-ink);
  border:1.5px solid var(--c-line);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-3);line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.ui-textarea{min-height:104px;resize:vertical}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--c-ink-3)}
.ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--c-brand-300)}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{
  outline:none;border-color:var(--c-brand-500);
  box-shadow:0 0 0 3px rgba(45,138,45,.14);
}
.ui-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a9a90' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}
/* 状态：错误 / 禁用 */
.ui-input.is-error,.ui-select.is-error,.ui-textarea.is-error{
  border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(200,16,46,.10);
}
.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{
  background:var(--c-brand-50);color:var(--c-ink-3);cursor:not-allowed;
}
.ui-help{margin-top:6px;font-size:var(--fs-1);color:var(--c-ink-3)}
.ui-err{margin-top:6px;font-size:var(--fs-1);color:var(--c-danger);font-weight:600}
.ui-err:empty,.ui-help:empty{display:none}

/* 勾选 / 单选 */
.ui-check,.ui-radio{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:6px 0;font-size:var(--fs-3);color:var(--c-ink);cursor:pointer;
}
.ui-check input,.ui-radio input{
  flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--c-brand-500);cursor:pointer;
}

/* ---------- 12.3 弹层：遮罩 / 弹窗 / 抽屉 / 提示 ---------- */
.ui-mask{
  position:fixed;inset:0;z-index:var(--z-mask);
  background:rgba(15,40,18,.48);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
}
.ui-modal{
  position:relative;z-index:var(--z-modal);
  width:100%;max-width:420px;max-height:86vh;overflow:auto;
  background:var(--c-surface);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:0 24px 64px rgba(10,30,12,.28);
}
.ui-modal-title{font-size:var(--fs-4);font-weight:800;color:var(--c-brand-800);margin-bottom:var(--sp-2)}
.ui-modal-body{font-size:var(--fs-3);color:var(--c-ink-2);line-height:1.8}
.ui-modal-foot{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.ui-modal-foot .ui-btn{flex:1}

.ui-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-drawer);
  background:var(--c-surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(10,30,12,.2);
  max-height:82vh;overflow:auto;
}

.ui-toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);
  z-index:var(--z-toast);
  max-width:82vw;padding:10px 18px;
  background:rgba(21,82,26,.94);color:#fff;
  border-radius:var(--r-pill);font-size:var(--fs-2);font-weight:600;
  box-shadow:0 10px 30px rgba(10,30,12,.3);
  animation:uiToastIn .22s var(--ease);
}
.ui-toast--error{background:rgba(200,16,46,.95)}
.ui-toast--warn{background:rgba(217,164,65,.97)}
@keyframes uiToastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 12.4 数据状态：加载 / 空 / 错误 ---------- */
.ui-skeleton{
  background:linear-gradient(90deg,var(--c-brand-50) 25%,var(--c-brand-100) 37%,var(--c-brand-50) 63%);
  background-size:400% 100%;border-radius:var(--r-xs);
  animation:uiShimmer 1.4s ease infinite;
}
@keyframes uiShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ui-skeleton--text{height:14px;margin-bottom:var(--sp-2)}
.ui-skeleton--title{height:20px;width:62%;margin-bottom:var(--sp-3)}
.ui-skeleton--card{height:104px;border-radius:var(--r-sm)}

.ui-empty,.ui-error{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);padding:var(--sp-8) var(--sp-5);text-align:center;
}
.ui-empty-ico,.ui-error-ico{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:var(--r-lg);font-size:28px;
  background:var(--c-brand-50);box-shadow:inset 0 0 0 1px var(--c-brand-line);
}
.ui-empty-t,.ui-error-t{font-size:var(--fs-4);font-weight:700;color:var(--c-ink-2)}
.ui-empty-s,.ui-error-s{font-size:var(--fs-2);color:var(--c-ink-3);max-width:26em;line-height:1.7}
.ui-error .ui-error-ico{background:#fdf0ee;box-shadow:inset 0 0 0 1px #f4d5cf}
.ui-error .ui-error-t{color:#a2432f}

/* ---------- 12.5 工具类 ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ui-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.ui-row{display:flex;align-items:center;gap:var(--sp-3)}
.ui-row--between{justify-content:space-between}
.ui-clamp-1,.ui-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ui-clamp-1{-webkit-line-clamp:1}
.ui-clamp-2{-webkit-line-clamp:2}

/* ============================================================================
   13. 基础组件层（续）—— 表单组 / 选项卡 / 卡片 / 徽章 / 单元格 / 开关 / 进度 / 步骤
   ----------------------------------------------------------------------------
   与第 12 节同一口径：全部 .ui- 命名空间，只新增、不覆盖既有页面类。
   ========================================================================== */

/* ---------- 13.1 表单组（Form / FormItem） ---------- */
.ui-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.ui-form-item{display:flex;flex-direction:column;gap:6px}
.ui-label{display:flex;align-items:center;gap:4px;font-size:var(--fs-2);font-weight:700;color:var(--c-ink-2)}
.ui-req::after{content:"*";color:var(--c-danger);font-weight:700;line-height:1}
.ui-help{font-size:var(--fs-1);color:var(--c-ink-3);line-height:1.6}
.ui-err{display:none;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--c-danger);line-height:1.6}
.ui-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;background:var(--c-danger);color:#fff;
  font-size:9px;font-weight:800;flex:0 0 auto}
.ui-form-item.is-error .ui-err{display:flex}
.ui-input,.ui-select,.ui-textarea{
  width:100%;padding:12px var(--sp-4);
  font-size:var(--fs-3);font-family:inherit;color:var(--c-ink);
  background:var(--c-surface);border:1.5px solid var(--c-line);
  border-radius:var(--r-sm);outline:none;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.ui-textarea{min-height:104px;resize:vertical;line-height:1.7}
.ui-select{background-image:linear-gradient(45deg,transparent 50%,var(--c-ink-3) 50%),
  linear-gradient(135deg,var(--c-ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--c-ink-3)}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{
  border-color:var(--c-brand-500);box-shadow:0 0 0 3px rgba(45,138,45,.14)}
.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled,.ui-input.is-disabled{
  background:var(--c-brand-50);color:var(--c-ink-3);cursor:not-allowed}
.ui-input.is-error,.ui-select.is-error,.ui-textarea.is-error{border-color:var(--c-danger)}
.ui-input.is-error:focus,.ui-textarea.is-error:focus{box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.ui-form-item--inline{flex-direction:row;align-items:center;gap:var(--sp-3)}
.ui-form-item--inline .ui-label{flex:0 0 84px}

/* ---------- 13.2 勾选 / 单选 ---------- */
.ui-check,.ui-radio{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-3);color:var(--c-ink-2);cursor:pointer;line-height:1.5}
.ui-check input,.ui-radio input{width:18px;height:18px;margin:0;
  accent-color:var(--c-brand-500);cursor:pointer;flex:0 0 auto}
.ui-check-group,.ui-radio-group{display:flex;flex-wrap:wrap;gap:var(--sp-4)}

/* ---------- 13.3 可选中胶囊（筛选 chip） ---------- */
.ui-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:32px;padding:0 var(--sp-4);
  font-size:var(--fs-2);font-weight:600;color:var(--c-brand-700);
  background:var(--c-brand-50);border:1px solid var(--c-brand-line);
  border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.ui-chip.is-active{background:var(--g-brand);color:#fff;border-color:transparent}
.ui-chip.is-disabled{opacity:.45;cursor:not-allowed}

/* ---------- 13.4 选项卡 ---------- */
.ui-tabs{display:flex;gap:var(--sp-2);padding:var(--sp-1);
  background:var(--c-brand-50);border-radius:var(--r-pill);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 var(--sp-4);border:0;background:transparent;
  font-size:var(--fs-2);font-weight:700;color:var(--c-brand-700);
  border-radius:var(--r-pill);cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.ui-tab.is-active{background:var(--c-surface);color:var(--c-brand-800);box-shadow:var(--sh-1)}
.ui-tab:disabled{color:var(--c-ink-3);cursor:not-allowed}
.ui-tab-line{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--c-line);
  overflow-x:auto;scrollbar-width:none}
.ui-tab-line::-webkit-scrollbar{display:none}
.ui-tab-line .ui-tab{flex:0 0 auto;height:42px;padding:0;border-radius:0;
  background:none;box-shadow:none;position:relative;color:var(--c-ink-3)}
.ui-tab-line .ui-tab.is-active{color:var(--c-brand-800)}
.ui-tab-line .ui-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2.5px;background:var(--g-brand);border-radius:var(--r-pill)}

/* ---------- 13.5 卡片 ---------- */
.ui-card{background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);box-shadow:var(--sh-1);overflow:hidden}
.ui-card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.ui-card-hd-t{font-size:var(--fs-4);font-weight:800;color:var(--c-brand-800)}
.ui-card-hd-x{font-size:var(--fs-1);color:var(--c-ink-3);text-decoration:none}
.ui-card-bd{padding:var(--sp-2) var(--sp-4) var(--sp-4);font-size:var(--fs-3);
  color:var(--c-ink-2);line-height:1.75}
.ui-card-ft{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--c-line);background:var(--c-surface-2)}

/* ---------- 13.6 徽章 / 标记 ---------- */
.ui-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--c-red);color:#fff;font-size:11px;font-weight:800;line-height:1}
.ui-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--c-brand-100);color:var(--c-brand-700);
  font-size:var(--fs-1);font-weight:700;white-space:nowrap}
.ui-pill--gold{background:#fdf6e6;color:#8a6415}
.ui-pill--red{background:#fdeef1;color:var(--c-red)}
.ui-pill--gray{background:var(--c-bg);color:var(--c-ink-3)}
.ui-pill--line{background:transparent;border:1px solid var(--c-brand-line);color:var(--c-brand-700)}

/* ---------- 13.7 单元格列表 ---------- */
.ui-cells{background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);overflow:hidden}
.ui-cell{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);font-size:var(--fs-3);color:var(--c-ink);
  text-decoration:none;border-bottom:1px solid var(--c-line);
  transition:background var(--t) var(--ease)}
.ui-cell:last-child{border-bottom:0}
.ui-cell:active{background:var(--c-brand-50)}
.ui-cell-t{flex:1 1 auto;min-width:0}
.ui-cell-x{flex:0 0 auto;font-size:var(--fs-2);color:var(--c-ink-3)}
.ui-cell-arrow::after{content:"";flex:0 0 auto;width:7px;height:7px;
  border-right:1.6px solid var(--c-ink-3);border-bottom:1.6px solid var(--c-ink-3);
  transform:rotate(-45deg);margin-left:2px}

/* ---------- 13.8 开关 ---------- */
.ui-switch{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:var(--fs-3)}
.ui-switch input{position:absolute;opacity:0;width:0;height:0}
.ui-switch-t{position:relative;width:46px;height:27px;border-radius:var(--r-pill);
  background:var(--c-line);transition:background var(--t) var(--ease);flex:0 0 auto}
.ui-switch-t::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform var(--t) var(--ease)}
.ui-switch input:checked + .ui-switch-t{background:var(--c-brand-500)}
.ui-switch input:checked + .ui-switch-t::after{transform:translateX(19px)}
.ui-switch input:focus-visible + .ui-switch-t{box-shadow:0 0 0 3px rgba(45,138,45,.2)}

/* ---------- 13.9 进度 ---------- */
.ui-progress{height:8px;border-radius:var(--r-pill);background:var(--c-brand-100);overflow:hidden}
.ui-progress-i{height:100%;border-radius:var(--r-pill);background:var(--g-brand);
  transition:width .4s var(--ease)}

/* ---------- 13.10 步骤 ---------- */
.ui-steps{display:flex;align-items:center;gap:var(--sp-2)}
.ui-step{display:flex;align-items:center;gap:6px;font-size:var(--fs-2);
  font-weight:700;color:var(--c-ink-3);white-space:nowrap}
.ui-step-n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--c-brand-100);
  color:var(--c-brand-700);font-size:var(--fs-1);font-weight:800;flex:0 0 auto}
.ui-step.is-active{color:var(--c-brand-800)}
.ui-step.is-active .ui-step-n{background:var(--g-brand);color:#fff}
.ui-step.is-done .ui-step-n{background:var(--c-brand-500);color:#fff}
.ui-step-sep{flex:1 1 auto;height:1.5px;background:var(--c-line);min-width:12px}

/* ---------- 13.11 分隔线 / 头像 ---------- */
.ui-divider{height:1px;background:var(--c-line);border:0;margin:var(--sp-5) 0}
.ui-divider--text{display:flex;align-items:center;gap:var(--sp-3);height:auto;
  background:none;font-size:var(--fs-1);color:var(--c-ink-3)}
.ui-divider--text::before,.ui-divider--text::after{content:"";flex:1 1 auto;
  height:1px;background:var(--c-line)}
.ui-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--c-brand-100);color:var(--c-brand-700);
  font-size:var(--fs-3);font-weight:800}
.ui-avatar img{width:100%;height:100%;object-fit:cover}
.ui-avatar--sm{width:30px;height:30px;font-size:var(--fs-1)}
.ui-avatar--lg{width:56px;height:56px;font-size:var(--fs-5)}

/* ---------- 13.12 底部动作面板 ---------- */
.ui-actionsheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-drawer);
  background:var(--c-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(10,30,12,.2);animation:uiToastIn .22s var(--ease)}
.ui-actionsheet-item{display:block;width:100%;padding:15px var(--sp-5);border:0;
  background:none;font-family:inherit;font-size:var(--fs-3);font-weight:600;
  color:var(--c-ink);text-align:center;cursor:pointer}
.ui-actionsheet-item:active{background:var(--c-brand-50)}
.ui-actionsheet-item--danger{color:var(--c-danger)}
.ui-actionsheet-sep{height:6px;background:var(--c-bg)}
.ui-actionsheet-cancel{color:var(--c-ink-3)}

/* ============================================================================
   14. 反馈组件样式（配合 ui.js：toast / loading / 表单错误）
   ========================================================================== */
.ui-loading{position:fixed;inset:0;z-index:var(--z-toast);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.ui-loading-box{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-6);background:rgba(21,52,24,.92);border-radius:var(--r-sm);
  box-shadow:0 12px 36px rgba(10,30,12,.3)}
.ui-spin{width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.28);border-top-color:#8cc98c;
  animation:uiSpin .7s linear infinite}
.ui-loading-t{font-size:var(--fs-2);font-weight:600;color:#e8f5e8}
/* toast 入场动画由 12.3 的 uiToastIn 承担，此处仅补多行与层级约束 */
.ui-toast{z-index:var(--z-toast)}
.ui-toast--info{background:rgba(21,82,26,.94)}
@media (prefers-reduced-motion:reduce){
  .ui-spin,.ui-skeleton,.ui-toast,.ui-actionsheet{animation:none!important}
}

/* ============================================================================
   15. 基础组件层（续 II）—— 表格 / 分页 / 气泡提示 / 下拉菜单 / 面包屑 / 状态提示条
   ----------------------------------------------------------------------------
   覆盖要求：默认·悬停·点击·禁用·加载；错误·成功·警告；移动端表现。
   ========================================================================== */

/* ---------- 15.1 表格 ---------- */
.ui-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-surface)}
.ui-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:var(--fs-3)}
.ui-table th{padding:11px var(--sp-4);text-align:left;white-space:nowrap;
  background:var(--c-brand-50);color:var(--c-brand-800);
  font-size:var(--fs-2);font-weight:800;border-bottom:1px solid var(--c-brand-line)}
.ui-table td{padding:12px var(--sp-4);color:var(--c-ink-2);vertical-align:middle;
  border-bottom:1px solid var(--c-line)}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background var(--t) var(--ease)}
.ui-table tbody tr:hover{background:var(--c-surface-2)}
.ui-table tbody tr.is-selected{background:var(--c-brand-50)}
.ui-table--striped tbody tr:nth-child(even){background:var(--c-surface-2)}
.ui-table--sm th,.ui-table--sm td{padding:8px var(--sp-3)}
.ui-table-num{text-align:right;font-variant-numeric:tabular-nums}
.ui-table-ops{text-align:right;white-space:nowrap}
.ui-table-sort{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.ui-table-sort::after{content:"";width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--c-ink-3);transition:border-color var(--t) var(--ease)}
.ui-table-sort:hover::after{border-top-color:var(--c-brand-500)}
.ui-table-sort.is-asc::after{border-top:0;border-bottom:5px solid var(--c-brand-500)}
.ui-table-sort.is-desc::after{border-top-color:var(--c-brand-500)}
.ui-table-empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--c-ink-3);font-size:var(--fs-2)}
/* 移动端：整表降级为卡片列表（加 .ui-table--cards） */
@media (max-width:640px){
  .ui-table--cards .ui-table-wrap,.ui-table--cards.ui-table-wrap{border:0;overflow:visible}
  .ui-table--cards .ui-table{min-width:0;display:block}
  .ui-table--cards .ui-table thead{display:none}
  .ui-table--cards .ui-table tbody,.ui-table--cards .ui-table tr,.ui-table--cards .ui-table td{display:block;width:100%}
  .ui-table--cards .ui-table tr{background:var(--c-surface);border:1px solid var(--c-line);
    border-radius:var(--r-sm);box-shadow:var(--sh-1);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
  .ui-table--cards .ui-table tr:hover{background:var(--c-surface)}
  .ui-table--cards .ui-table td{border:0;padding:5px 0;display:flex;gap:var(--sp-3);justify-content:space-between}
  .ui-table--cards .ui-table td::before{content:attr(data-th);flex:0 0 auto;
    font-size:var(--fs-2);font-weight:800;color:var(--c-brand-800)}
  .ui-table--cards .ui-table td:first-child{padding-bottom:8px;margin-bottom:6px;border-bottom:1px dashed var(--c-line)}
  .ui-table--cards .ui-table-ops{justify-content:flex-end}
}

/* ---------- 15.2 分页 ---------- */
.ui-pagination{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;margin:var(--sp-5) 0}
.ui-page-item{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 11px;border-radius:var(--r-pill);
  border:1px solid var(--c-line);background:var(--c-surface);
  color:var(--c-ink-2);font-size:var(--fs-2);font-weight:700;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:background var(--t) var(--ease),
  color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.ui-page-item:hover{background:var(--c-brand-50);color:var(--c-brand-800);border-color:var(--c-brand-line)}
.ui-page-item:active{transform:translateY(1px)}
.ui-page-item.is-active{background:var(--g-brand);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(26,92,26,.26)}
.ui-page-item:disabled,.ui-page-item.is-disabled{background:var(--c-surface);
  color:var(--c-ink-3);border-color:var(--c-line);cursor:not-allowed;opacity:.6;box-shadow:none}
.ui-page-item.is-loading{color:transparent;position:relative}
.ui-page-item.is-loading::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--c-brand-line);border-top-color:var(--c-brand-500);animation:uiSpin .7s linear infinite}
.ui-page-dots{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:36px;color:var(--c-ink-3);font-weight:800;letter-spacing:1px}
.ui-page-info{width:100%;text-align:center;font-size:var(--fs-1);color:var(--c-ink-3);margin-top:4px}
.ui-page-size{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--c-ink-3)}
.ui-page-jump{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--c-ink-3)}
.ui-page-jump input{width:52px;height:32px;text-align:center;border:1px solid var(--c-line);
  border-radius:var(--r-pill);font-family:inherit;font-size:var(--fs-2);color:var(--c-ink);outline:none}
.ui-page-jump input:focus{border-color:var(--c-brand-500);box-shadow:0 0 0 3px rgba(45,138,45,.14)}
@media (max-width:640px){
  .ui-pagination{gap:4px}
  .ui-page-item{min-width:32px;height:32px;padding:0 8px;font-size:var(--fs-1)}
  .ui-page-size,.ui-page-jump{display:none}
}

/* ---------- 15.3 气泡提示 Tooltip ---------- */
.ui-tip{position:relative;display:inline-flex;align-items:center}
.ui-tip-b{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,4px);
  max-width:76vw;padding:6px 11px;border-radius:var(--r-xs);
  background:rgba(21,52,24,.95);color:#fff;font-size:var(--fs-1);font-weight:600;
  line-height:1.5;white-space:nowrap;pointer-events:none;z-index:var(--z-toast);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.ui-tip-b::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:rgba(21,52,24,.95)}
.ui-tip:hover .ui-tip-b,.ui-tip:focus-within .ui-tip-b,.ui-tip.is-open .ui-tip-b{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.ui-tip-b--bottom{top:calc(100% + 9px);bottom:auto}
.ui-tip-b--bottom::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:rgba(21,52,24,.95)}
.ui-tip-b--start{left:0;transform:translate(0,4px)}
.ui-tip-b--start::after{left:18px}
.ui-tip:hover .ui-tip-b--start,.ui-tip.is-open .ui-tip-b--start{transform:translate(0,0)}
/* 触摸端 hover 不可用 → 由 JS 切 .is-open；.ui-tip--tap 提供点击热区 */
@media (hover:none){
  .ui-tip--tap{cursor:pointer;border-bottom:1px dashed var(--c-ink-3)}
}

/* ---------- 15.4 下拉菜单 Dropdown ---------- */
.ui-dd{position:relative;display:inline-block}
.ui-dd-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:156px;
  padding:6px;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);box-shadow:var(--sh-2);z-index:var(--z-drawer);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.ui-dd.is-open .ui-dd-menu{opacity:1;visibility:visible;transform:none}
.ui-dd-menu--left{right:auto;left:0}
.ui-dd-menu--up{top:auto;bottom:calc(100% + 7px);transform:translateY(5px)}
.ui-dd.is-open .ui-dd-menu--up{transform:none}
.ui-dd-item{display:flex;align-items:center;gap:var(--sp-2);padding:9px 12px;
  border-radius:var(--r-xs);font-size:var(--fs-2);font-weight:600;color:var(--c-ink);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.ui-dd-item:hover{background:var(--c-brand-50);color:var(--c-brand-800)}
.ui-dd-item.is-disabled{color:var(--c-ink-3);cursor:not-allowed;background:none}
.ui-dd-item--danger{color:var(--c-danger)}
.ui-dd-item--danger:hover{background:#fdeef1;color:var(--c-danger)}
.ui-dd-item.is-active{background:var(--c-brand-100);color:var(--c-brand-800)}
.ui-dd-sep{height:1px;background:var(--c-line);margin:5px 0}
.ui-dd-hd{padding:7px 12px 5px;font-size:var(--fs-1);font-weight:800;color:var(--c-ink-3)}
@media (max-width:640px){
  .ui-dd-menu{position:fixed;left:var(--sp-4);right:var(--sp-4);top:auto;bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));
    min-width:0;border-radius:var(--r-lg);transform:translateY(8px);padding:var(--sp-2) 0}
  .ui-dd.is-open .ui-dd-menu{transform:none}
  .ui-dd-item{padding:14px var(--sp-5);border-radius:0;justify-content:center}
}

/* ---------- 15.5 面包屑 Breadcrumb ---------- */
.ui-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  font-size:var(--fs-2);color:var(--c-ink-3);line-height:1.6}
.ui-crumb a{color:var(--c-ink-2);text-decoration:none;
  padding:3px 2px;transition:color var(--t) var(--ease)}
.ui-crumb a:hover{color:var(--c-brand-700)}
.ui-crumb-sep{color:var(--c-ink-3);opacity:.55;padding:0 3px;user-select:none}
.ui-crumb [aria-current="page"]{color:var(--c-brand-800);font-weight:700;padding:3px 2px}
.ui-crumb--pill a{display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--c-brand-50);border:1px solid var(--c-brand-line)}
.ui-crumb--pill a:hover{background:var(--c-brand-100)}
@media (max-width:640px){
  .ui-crumb{font-size:var(--fs-1);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ui-crumb::-webkit-scrollbar{display:none}
}

/* ---------- 15.6 状态提示条 Alert（info / success / warning / error） ---------- */
.ui-alert{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:12px var(--sp-4);border-radius:var(--r-sm);
  border:1px solid var(--c-brand-line);background:var(--c-brand-50);
  color:var(--c-brand-800);font-size:var(--fs-2);line-height:1.7}
.ui-alert-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;
  background:currentColor;color:#fff}
.ui-alert-b{flex:1 1 auto;min-width:0}
.ui-alert-t{font-weight:800;margin-bottom:2px}
.ui-alert--success{background:#eef8ee;border-color:#cfe9cf;color:#1f6b23}
.ui-alert--warning{background:#fdf8ec;border-color:#f0dfb8;color:#7a5a12}
.ui-alert--error{background:#fdf0f2;border-color:#f2cfd6;color:#8f1226}
.ui-alert--success .ui-alert-ico{background:#2f8b34}
.ui-alert--warning .ui-alert-ico{background:var(--c-gold)}
.ui-alert--error .ui-alert-ico{background:var(--c-danger)}
.ui-alert--flat{border-radius:0;border-left-width:3px}

/* ---------- 15.7 骨架 / 空 / 错误：表格与卡片位补充 ---------- */
.ui-skeleton--row{height:42px;margin-bottom:8px;border-radius:var(--r-xs)}
.ui-skeleton--avatar{width:40px;height:40px;border-radius:50%}

/* ============================================================================
   16. 布局模板（第 4 步）—— 页头 / 页脚 / 侧栏 / 内容区 / 容器 / 12 列栅格
   ----------------------------------------------------------------------------
   移动优先：默认单列满宽；≥768px 起按栅格分栏。
   全部 .ui- 命名空间，不改动任何既有页面布局。
   ========================================================================== */

/* ---------- 16.1 容器：桌面最大 1200px ---------- */
.ui-container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--sp-page)}
@media (min-width:768px){.ui-container{padding:0 var(--sp-6)}}
.ui-container--narrow{max-width:var(--read-w)}      /* 阅读类 720px */
.ui-container--wide{max-width:1440px}                /* 宽屏数据类 */
.ui-container--full{max-width:none}

/* ---------- 16.2 页面骨架：页头 / 内容区 / 页脚 ---------- */
.ui-page{display:flex;flex-direction:column;min-height:100vh}
.ui-page-body{flex:1 1 auto;padding-bottom:var(--sp-7)}

.ui-page-hd{padding:var(--sp-6) 0 var(--sp-5);
  border-bottom:1px solid var(--c-line);margin-bottom:var(--sp-5)}
.ui-page-hd--plain{border-bottom:0;padding-bottom:var(--sp-3)}
.ui-page-hd--bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}
.ui-page-hd-main{min-width:0;flex:1 1 auto}
.ui-page-title{font-size:var(--fs-5);font-weight:800;color:var(--c-brand-800);
  letter-spacing:-.2px;line-height:1.35}
@media (min-width:768px){.ui-page-title{font-size:var(--fs-6)}}
.ui-page-sub{margin-top:5px;font-size:var(--fs-2);color:var(--c-ink-3);line-height:1.65}
.ui-page-actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;flex:0 0 auto}

.ui-page-ft{padding:var(--sp-6) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-top:1px solid var(--c-line);margin-top:var(--sp-7);
  font-size:var(--fs-1);color:var(--c-ink-3);line-height:1.9;text-align:center}
.ui-page-ft a{color:var(--c-ink-2);text-decoration:none}
.ui-page-ft a:hover{color:var(--c-brand-700)}
.ui-page-ft-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-5)}

/* ---------- 16.3 两栏（内容 + 侧栏） ---------- */
.ui-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
@media (min-width:1024px){
  .ui-layout--aside{grid-template-columns:236px minmax(0,1fr)}
  .ui-layout--aside-right{grid-template-columns:minmax(0,1fr) 300px}
}
.ui-main{min-width:0}
.ui-aside{min-width:0}
.ui-aside-nav{display:flex;flex-direction:column;gap:2px;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--sp-2);box-shadow:var(--sh-1)}
.ui-aside-link{display:flex;align-items:center;gap:var(--sp-2);
  padding:10px 12px;border-radius:var(--r-xs);font-size:var(--fs-2);font-weight:600;
  color:var(--c-ink-2);text-decoration:none;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.ui-aside-link:hover{background:var(--c-brand-50);color:var(--c-brand-800)}
.ui-aside-link.is-active{background:var(--g-brand);color:#fff}
.ui-aside-hd{padding:9px 12px 6px;font-size:var(--fs-1);font-weight:800;color:var(--c-ink-3)}
/* 移动端：侧栏折到内容上方（默认已是单列，此处只做间距收口） */
@media (max-width:1023px){
  .ui-aside-nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:var(--sp-2)}
  .ui-aside-nav::-webkit-scrollbar{display:none}
  .ui-aside-link{flex:0 0 auto;white-space:nowrap;border-radius:var(--r-pill)}
  .ui-aside-hd{display:none}
}

/* ---------- 16.4 12 列栅格 ---------- */
.ui-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-4);align-items:start}
.ui-grid--gap-sm{gap:var(--sp-2)}
.ui-grid--gap-lg{gap:var(--sp-6)}
.ui-grid--stretch{align-items:stretch}
.ui-col-1{grid-column:span 1}.ui-col-2{grid-column:span 2}.ui-col-3{grid-column:span 3}
.ui-col-4{grid-column:span 4}.ui-col-5{grid-column:span 5}.ui-col-6{grid-column:span 6}
.ui-col-7{grid-column:span 7}.ui-col-8{grid-column:span 8}.ui-col-9{grid-column:span 9}
.ui-col-10{grid-column:span 10}.ui-col-11{grid-column:span 11}.ui-col-12{grid-column:span 12}
@media (max-width:767px){
  /* 移动端：所有分栏收成整宽，避免挤压 */
  .ui-col-1,.ui-col-2,.ui-col-3,.ui-col-4,.ui-col-5,.ui-col-6,
  .ui-col-7,.ui-col-8,.ui-col-9,.ui-col-10,.ui-col-11{grid-column:span 12}
}
@media (min-width:768px){
  .ui-col-md-3{grid-column:span 3}.ui-col-md-4{grid-column:span 4}
  .ui-col-md-6{grid-column:span 6}.ui-col-md-8{grid-column:span 8}
  .ui-col-md-9{grid-column:span 9}.ui-col-md-12{grid-column:span 12}
}
@media (min-width:1024px){
  .ui-col-lg-3{grid-column:span 3}.ui-col-lg-4{grid-column:span 4}
  .ui-col-lg-6{grid-column:span 6}.ui-col-lg-8{grid-column:span 8}
  .ui-col-lg-9{grid-column:span 9}.ui-col-lg-12{grid-column:span 12}
}

/* ---------- 16.5 区块（页面内小节统一节奏） ---------- */
.ui-section{margin-bottom:var(--sp-7)}
.ui-section:last-child{margin-bottom:0}
.ui-section-hd{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.ui-section-t{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-4);font-weight:800;color:var(--c-brand-800)}
.ui-section-t::before{content:"";width:4px;height:17px;border-radius:3px;
  background:var(--g-brand-bar);flex:0 0 auto}
.ui-section-x{font-size:var(--fs-2);font-weight:700;color:var(--c-brand-600);text-decoration:none}
@media (min-width:768px){
  .ui-section{margin-bottom:var(--sp-8)}
  .ui-section-t{font-size:var(--fs-5)}
}

/* ---------- 16.6 桌面端留白节奏（≥768px 统一） ---------- */
@media (min-width:768px){
  .ui-card-bd{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
  .ui-card-hd{padding:var(--sp-5) var(--sp-5) var(--sp-2)}
  .ui-cell{padding:var(--sp-4) var(--sp-5)}
  .ui-form-item--inline .ui-label{flex-basis:104px}
}