/* =============================================================
   般果 OFC 助手 · 共享样式表 base.css  v2（世界级视觉体系）
   适用：企业微信 H5 / 移动端单页应用
   原则：全部颜色取自般果 logo 色系（橙 #F39800 / 金 #F8B62D / 绿 #22AC38 / 黄绿 #8FC31F）
   用法：页面 <link rel="stylesheet" href="/base.css">
   ============================================================= */

/* ---------- 1. 设计 Token ---------- */
:root {
  /* 品牌 */
  --brand:            #F39800;
  --brand-deep:       #E08600;
  --brand-gold:       #F8B62D;
  --brand-green:      #22AC38;
  --brand-green-deep: #1B8A2D;
  --brand-lime:       #8FC31F;
  --brand-lime-deep:  #6E9C12;

  /* 底与面 */
  --bg:        #FFF6EC;   /* 暖奶油页底 */
  --surface:   #FFFFFF;   /* 卡片面 */
  --surface-2: #FFFDF9;   /* 次级面（卡片内嵌） */
  --input-bg:  #FDFBF6;   /* 输入框底 */

  /* 文字（暖墨） */
  --ink:        #3A2415;
  --ink-2:      #5C4A38;
  --ink-muted:  #8A7B66;
  --ink-subtle: #A79A85;

  /* 描边 / 分隔 */
  --border:      #F5EBDC;
  --border-2:    #F0EADC;
  --border-warm: #F5EAD7;

  /* 语义色 */
  --success: #22AC38;
  --danger:  #E5484D;
  --warn:    #D98E04;

  /* 浅色标签底 */
  --tint-orange: #FFF3E2;
  --tint-green:  #E9F7EB;
  --tint-lime:   #F3F9E0;
  --tint-gold:   #FFF7E0;

  /* 圆角 */
  --r-card:   24px;
  --r-card-s: 20px;
  --r-btn:    14px;
  --r-input:  12px;
  --r-pill:   999px;

  /* 间距（8px 栅格） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --page-x: 16px;   /* 页面左右边距 */

  /* 阴影（暖调，带品牌微光） */
  --sh-card:    0 1px 2px rgba(42,37,29,.04), 0 6px 20px rgba(243,152,0,.07);
  --sh-card-lg: 0 12px 32px -6px rgba(140,82,13,.08);
  --sh-brand:   0 8px 18px rgba(243,152,0,.30);
  --sh-green:   0 6px 14px rgba(34,172,56,.28);
  --sh-float:   0 12px 28px -4px rgba(140,82,13,.14);

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #F39800 0%, #F8B62D 100%);
  --grad-green: linear-gradient(135deg, #1B8A2D 0%, #8FC31F 100%);
  --grad-bar:   linear-gradient(90deg,  #F39800 0%, #8FC31F 100%);

  /* 动效 */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* 安全区 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p { margin: 0; }

/* ---------- 3. 页面容器 ---------- */
.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding: 0 0 calc(96px + var(--safe-b)); /* 预留悬浮 Tab 栏空间 */
  overflow-x: hidden;
}
.page { padding: 0 var(--page-x); }

/* ---------- 4. 导航栏（子页面统一） ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  padding-top: var(--safe-t);
  background: var(--bg);
}
.navbar .nav-title {
  font-size: 17px; font-weight: 700; color: var(--ink);
  flex: 1; text-align: center;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-warm);
  flex-shrink: 0;
}
.icon-btn:active { transform: scale(.94); }

/* ---------- 5. 品牌渐变头图 ---------- */
.hero {
  position: relative;
  padding: 0 24px 48px 24px;
  padding-top: calc(var(--safe-t) + 20px);
  background: var(--grad-brand);
  color: #fff;
  overflow: hidden;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.hero.is-compact { padding-bottom: 20px; }
.hero.is-green   { background: var(--grad-green); }
/* 装饰光斑 */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.12); pointer-events: none;
}
.hero::before { width: 180px; height: 180px; right: -50px; top: -70px; }
.hero::after  { width: 120px; height: 120px; left: -50px; bottom: -50px; background: rgba(255,255,255,.09); }
.hero > * { position: relative; z-index: 1; }

.hero-brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.logo-chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  background: #fff; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(140,82,13,.15);
}
.logo-chip img { height: 40px; width: auto; }
.hero-greeting { font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 4px; }
.hero-title    { font-size: 22px; font-weight: 800; line-height: 1.25; }
.hero-sub      { font-size: 12px; font-weight: 500; opacity: .88; }
.hero-note     { font-size: 13px; opacity: .9; }
.avatar-chip {
  width: 34px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-size: 14px; font-weight: 600;
}

/* ---------- 6. 区块标题 ---------- */
.section-title {
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin: 22px 8px 12px;
}

/* ---------- 7. 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--sh-card);
}
.card.is-floating { box-shadow: var(--sh-card-lg); }
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.card-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.card-body  { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.divider    { height: 1px; background: var(--border-2); margin: 4px 0; }

/* 渐变主卡（当前驻场仓 / 关键数据） */
.card-gradient {
  background: var(--grad-brand);
  border: 0;
  border-radius: var(--r-card);
  padding: 20px;
  color: #fff;
  box-shadow: var(--sh-brand);
}
.card-gradient .cg-label { font-size: 11px; opacity: .85; }
.card-gradient .cg-title { font-size: 22px; font-weight: 800; }
.card-gradient .cg-text  { font-size: 12px; opacity: .92; }

/* AI 草案卡（金色描边，区别于普通卡） */
.card-ai {
  background: #FFFCF5;
  border: 1.5px solid rgba(248,182,45,.85);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--sh-card);
}

/* ---------- 8. 按钮 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 18px;
  border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-success { background: var(--brand-green); color: #fff; box-shadow: var(--sh-green); }
.btn-ghost   { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--border-warm); }
.btn-outline-brand {
  background: var(--surface); color: var(--brand-deep);
  border: 1px solid var(--border-warm); font-weight: 600;
}
.btn-lg { height: 52px; font-size: 15px; border-radius: 16px; }
.btn-sm { height: 40px; font-size: 13px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-group { display: flex; gap: 10px; }
.btn-group > .btn { flex: 1; }

/* 圆形图标按钮（录音 / 发送） */
.fab {
  width: 50px; height: 50px; border-radius: 25px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); box-shadow: var(--sh-brand);
  transition: transform .12s var(--ease);
}
.fab:active { transform: scale(.94); }

/* ---------- 9. 徽章 / 胶囊 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.4;
}
.badge-green  { background: var(--tint-green);  color: var(--brand-green-deep); }
.badge-orange { background: var(--tint-orange); color: var(--brand-deep); }
.badge-gold   { background: var(--tint-gold);   color: var(--warn); }
.badge-lime   { background: var(--tint-lime);   color: var(--brand-lime-deep); }
.badge-danger { background: #FDECEC;            color: var(--danger); }
.badge-gray   { background: var(--border-2);    color: var(--ink-muted); }

.dot-live {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(34,172,56,.18);
}

/* 筛选胶囊（横向滚动） */
.chip-row {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 0;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border-warm);
  transition: all .15s var(--ease);
}
.chip.is-active {
  background: var(--brand); color: #fff; border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(243,152,0,.30);
}

/* 标签（小） */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 500;
}
.tag-orange { background: var(--tint-orange); color: var(--brand-deep); }
.tag-green  { background: var(--tint-green);  color: var(--brand-green-deep); }
.tag-gold   { background: var(--tint-gold);   color: var(--warn); }
.tag-lime   { background: var(--tint-lime);   color: var(--brand-lime-deep); }

/* ---------- 10. 数据组 ---------- */
.stats { display: flex; justify-content: space-between; }
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.stat-value.is-orange { color: var(--brand-deep); }
.stat-value.is-green  { color: var(--brand-green-deep); }
.stat-value.is-ink    { color: var(--ink); }
.stat-label { font-size: 11px; color: var(--ink-muted); }

/* 超大数字（打卡 12/20） */
.num-huge { font-size: 64px; font-weight: 800; color: var(--brand-green-deep); line-height: 1; }
.num-denom { font-size: 20px; font-weight: 600; color: var(--ink-subtle); }

/* ---------- 11. 进度 ---------- */
.progress {
  height: 8px; border-radius: var(--r-pill);
  background: #FFF0DC; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--grad-bar);
  transition: width .5s var(--ease);
}
.progress-fill.on-dark { background: rgba(255,255,255,.95); }
.progress.on-dark { background: rgba(255,255,255,.22); }
.progress-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-muted); margin-top: 6px;
}
.progress-labels .pct { font-weight: 700; color: var(--brand-deep); }

/* 20 天点阵 */
.dots { display: flex; justify-content: space-between; align-items: center; }
.dots .d { width: 13px; height: 13px; border-radius: 7px; background: var(--border-2); }
.dots .d.is-done   { background: var(--brand-green); }
.dots .d.is-today  { width: 17px; height: 17px; border-radius: 9px;
                     background: var(--brand-gold);
                     box-shadow: 0 0 0 4px rgba(248,182,45,.35); }
.legend { display: flex; gap: 14px; font-size: 10px; color: var(--ink-muted); }
.legend .lg { display: flex; align-items: center; gap: 5px; }
.legend .swatch { width: 8px; height: 8px; border-radius: 4px; }

/* ---------- 12. 宫格磁贴 ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--r-card-s);
  background: var(--surface);
  border: 1px solid var(--border-warm);
  box-shadow: var(--sh-card);
  transition: transform .12s var(--ease);
}
.tile:active { transform: scale(.97); }
.tile-icon {
  width: 42px; height: 42px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tile-icon.orange { background: var(--tint-orange); }
.tile-icon.green  { background: var(--tint-green); }
.tile-icon.gold   { background: var(--tint-gold); }
.tile-icon.lime   { background: var(--tint-lime); }
.tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.tile-sub   { font-size: 11px; color: var(--ink-muted); }

/* ---------- 13. 列表项 / 任务卡 ---------- */
.list { display: flex; flex-direction: column; gap: 12px; }
.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0;
}
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.list-row.is-done .lr-title { color: var(--ink-subtle); text-decoration: line-through; }
.list-row .lr-meta { font-size: 11px; color: var(--ink-subtle); }

.task-card { padding: 16px; }
.task-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.priority-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.priority-dot.high    { background: var(--danger); }
.priority-dot.mid     { background: var(--brand); }
.priority-dot.done    { background: var(--brand-green); }
.task-title { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.task-time  { font-size: 11px; color: var(--ink-subtle); }
.task-desc  { font-size: 12px; color: var(--ink-muted); line-height: 1.6; }
.tag-row    { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* 复选框 */
.checkbox {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.6px solid #DECFB8; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.checkbox.is-checked { background: var(--brand-green); border-color: var(--brand-green); }

/* ---------- 14. 四要素标签 ---------- */
.factor { display: flex; gap: 10px; align-items: flex-start; }
.factor-key {
  width: 44px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.factor-key.k1 { background: var(--tint-orange); color: var(--brand-deep); }
.factor-key.k2 { background: var(--tint-lime);   color: var(--brand-lime-deep); }
.factor-key.k3 { background: var(--tint-green);  color: var(--brand-green-deep); }
.factor-key.k4 { background: var(--tint-gold);   color: var(--warn); }
.factor-text { font-size: 13px; color: var(--ink); line-height: 1.6; flex: 1; }

/* ---------- 15. 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.field {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-input);
  transition: all .15s var(--ease);
}
.field.is-focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(243,152,0,.14);
}
.field input, .field select {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink);
}
.field input::placeholder { color: var(--ink-subtle); }
.field .caret { flex-shrink: 0; color: var(--ink-subtle); }
.textarea {
  width: 100%; min-height: 84px; padding: 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-input);
  font-size: 13px; line-height: 1.7; resize: none; outline: 0;
}
.textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(243,152,0,.14); }
.note-line { display: flex; gap: 6px; font-size: 11px; color: var(--ink-subtle); line-height: 1.6; }

/* ---------- 16. 对话（随身顾问） ---------- */
.chat { padding: 12px 0 8px; }
.msg { display: flex; gap: 8px; margin-bottom: 16px; }
.msg.from-user { justify-content: flex-end; }
.bubble-user {
  max-width: 78%;
  padding: 12px 14px;
  background: var(--brand); color: #fff;
  border-radius: 18px;
  font-size: 13px; line-height: 1.6;
  box-shadow: 0 6px 14px rgba(243,152,0,.25);
}
.bubble-ai {
  flex: 1; min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-warm);
  border-radius: 18px;
  box-shadow: var(--sh-card);
}
.bubble-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.bubble-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.bubble-body { font-size: 13px; color: var(--ink); line-height: 1.7; }
.bubble-src  { display: flex; align-items: center; gap: 5px; margin-top: 8px;
               font-size: 10px; color: var(--ink-subtle); }
.avatar-ai {
  width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand);
  color: #fff; font-size: 12px; font-weight: 700;
}
.quick-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick {
  flex-shrink: 0; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-warm);
  font-size: 12px; color: var(--ink-2);
}
.quick:active { transform: scale(.96); }

/* 输入栏 */
.composer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + var(--safe-b));
  width: min(430px, 100% - 32px);
  display: flex; align-items: center; gap: 10px;
  z-index: 60;
}
.composer-input {
  flex: 1; height: 50px; display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: var(--surface); border-radius: 25px;
  border: 1px solid var(--border-warm);
  box-shadow: 0 8px 20px rgba(140,82,13,.06);
}
.composer-input input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink);
}
.composer-input input::placeholder { color: var(--ink-subtle); }

/* ---------- 17. 评分（反馈卡） ---------- */
.rate-group { display: flex; flex-direction: column; gap: 10px; }
.rate-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.rate-row { display: flex; justify-content: space-between; }
.rate-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--input-bg);
  border: 1px solid var(--border-warm);
  font-size: 14px; font-weight: 500; color: var(--ink-subtle);
  transition: all .15s var(--ease);
}
.rate-btn.is-orange { background: var(--grad-brand); color: #fff; font-weight: 700;
                      border-color: transparent; box-shadow: 0 4px 10px rgba(243,152,0,.30); }
.rate-btn.is-green  { background: var(--brand-green); color: #fff; font-weight: 700;
                      border-color: transparent; box-shadow: var(--sh-green); }
.rate-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-subtle); }

/* ---------- 18. 悬浮 Tab 栏 ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-b));
  width: min(430px, 100% - 42px);
  height: 62px; padding: 4px;
  display: flex; gap: 2px;
  background: var(--surface);
  border-radius: 36px;
  box-shadow: var(--sh-float);
  z-index: 100;
}
.tab {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 30px;
  color: var(--ink-muted);
  font-size: 10px; font-weight: 500;
  transition: all .2s var(--ease);
}
.tab.is-active { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.tab svg { width: 20px; height: 20px; }

/* ---------- 19. 空态 / 提示 ---------- */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-subtle); font-size: 13px; }
.empty .em-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: 12px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + var(--safe-b));
  padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(42,21,13,.92); color: #fff; font-size: 13px;
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.toast.is-show { opacity: 1; }

/* ---------- 20. 动效 ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim { animation: riseIn .35s var(--ease) both; }
.anim-d1 { animation-delay: .04s; }
.anim-d2 { animation-delay: .08s; }
.anim-d3 { animation-delay: .12s; }
.anim-d4 { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- 21. 工具类 ---------- */
.row-b { display: flex; align-items: center; justify-content: space-between; }
.row-c { display: flex; align-items: center; gap: 8px; }
.col   { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.text-muted  { color: var(--ink-muted); }
.text-subtle { color: var(--ink-subtle); }
.text-orange { color: var(--brand-deep); }
.text-green  { color: var(--brand-green-deep); }
.fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; }
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }

/* ---------- 22. 概览卡上浮（压住 hero，首页关键视觉钩子） ---------- */
.pull-up { margin-top: -32px; position: relative; z-index: 5; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-1 { gap: 4px; }

/* ---------- 23. 图标着色与 hero 内圆钮（配合 icons.js 的 currentColor） ---------- */
.tile-icon.orange { color: var(--brand-deep); }
.tile-icon.green  { color: var(--brand-green-deep); }
.tile-icon.gold   { color: var(--warn); }
.tile-icon.lime   { color: var(--brand-lime-deep); }
.hero .icon-btn { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.38); color: #fff; }
.ic-orange { color: var(--brand-deep); }
.ic-green  { color: var(--brand-green-deep); }
.ic-lime   { color: var(--brand-lime-deep); }
.ic-gold   { color: var(--warn); }
.ic-ink    { color: var(--ink); }
.ic-muted  { color: var(--ink-muted); }
.ic-subtle { color: var(--ink-subtle); }
.ic-white  { color: #fff; }
.center .num-huge { display: inline-block; }
.center .num-denom { vertical-align: baseline; }
.jc-center { justify-content: center; }
.legend .swatch.is-green { background: var(--brand-green); }
.legend .swatch.is-gold  { background: var(--brand-gold); }
.legend .swatch.is-mute  { background: var(--border-2); }
.is-hidden { display: none !important; }
.flex-1 { flex: 1; }
.badge.on-dark { background: rgba(255,255,255,.2); color: #fff; }
.empty-sm { padding: 14px 0; text-align: left; }
.avatar-lead {
  width: 36px; height: 36px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600;
}
.avatar-lead.orange { background: var(--brand); }
.avatar-lead.green  { background: var(--brand-green); }
.avatar-lead.gold   { background: var(--brand-gold); color: var(--ink); }
.avatar-lead.lime   { background: var(--brand-lime-deep); }