/* 大千记 H5 · 设计系统 v2
   承接 v1（参考 awesome-design-md 中 Airbnb 设计系统，按适老化上调字号与热区），
   本版修掉 v1 暴露的两个问题：
   1) 宫格副说明被单行裁掉 → 允许两行，卡片等高，不再出现“自动认出照片上…”的半句；
   2) 四宫格图标各用一套淡蓝/淡琥珀/淡绿底色 → 统一成米白底 + 深绿图标，
      功能靠图标形状区分，不靠四种颜色，回到“主色 + 一个强调色”的克制口径。 */

:root {
  --radius-card: 14px;
  --radius-btn: 8px;
  --hairline: #ece7dd;
  --hairline-soft: #f2eee6;
  --ink: #23231f;
  --body-text: #3d3b36;
  --muted: #6f6c65;
  --surface: #ffffff;
  --surface-soft: #FAF8F4;
  --green: #2f4a42;
  --gold: #c98a2d;
  --shadow-1: 0 0 0 1px rgba(35, 35, 31, 0.03), 0 2px 6px rgba(35, 35, 31, 0.04), 0 6px 14px rgba(35, 35, 31, 0.05);
}

body { font-size: 16px; line-height: 1.6; color: var(--body-text); -webkit-font-smoothing: antialiased; }

h1, h2, .page-title, .gm-h, .gh-h { font-size: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--ink) !important; }
h3, .card-title, .gm-card .t, .sb-h { font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.card-sub, .gh-s, .gm-note, .sb-sub, .deliver-item .caption { font-size: 14px !important; line-height: 1.65 !important; color: var(--muted) !important; }

/* 卡片：统一圆角 / 细描边 / 单一阴影 */
.card, .tile, .deliver-item, .sb-card, .gm-card, .mc-card, .pf-pcell {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--hairline) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.card { padding: 18px !important; }
.card + .card, .card + .deliver-item { margin-top: 14px !important; }
.deliver-item { padding: 16px !important; }
.deliver-item + .deliver-item { margin-top: 12px !important; }

/* 宫格：等高、两行说明、图标统一底色 */
.tile {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 150px !important;
}
.tile-ico, .t-ico, .ico, .gm-item .ic {
  width: 44px !important; height: 44px !important;
  border-radius: 10px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #f3efe4 !important;
  color: var(--green) !important;
}
.tile-ico.ico-blue, .tile-ico.ico-gold, .tile-ico.ico-green, .tile-ico.ico-violet,
.t-ico.ico-blue, .t-ico.ico-gold, .t-ico.ico-green, .t-ico.ico-violet {
  background: #f3efe4 !important;
  color: var(--green) !important;
}
.tile-ico svg, .t-ico svg { width: 22px !important; height: 22px !important; color: var(--green) !important; }
.tile-t { font-size: 17px !important; font-weight: 600 !important; margin-top: 12px !important; color: var(--ink) !important; }
.tile-s {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
}

/* 按钮：卡内 8 圆角 48 高；主 CTA 保留胶囊 */
.btn, .dl-btn, .btn-sm, .btn-ghost, .btn-outline, .btn-share {
  border-radius: var(--radius-btn) !important;
  min-height: 44px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.btn-primary, .dl-btn, .deliver-item .btn-ghost { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-outline, .deliver-item .btn-outline, .btn-ghost { background: var(--surface) !important; border: 1px solid var(--green) !important; color: var(--green) !important; }
.btn-share { background: var(--surface-soft) !important; border: 1px solid var(--hairline) !important; color: var(--muted) !important; }
button.talk, .talk, .btn-gold {
  border-radius: 999px !important;
  min-height: 56px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
button.talk, .talk { background: var(--green) !important; color: #fff !important; }
.btn-gold { background: var(--gold) !important; color: #fff !important; }

/* 列表行：靠留白与细线分区 */
.gm-item {
  min-height: 60px !important;
  padding: 14px 4px !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  background: transparent !important;
  font-size: 16px !important;
}
.gm-item + .gm-item { margin-top: 0 !important; }
.gm-item:last-child { border-bottom: 0 !important; }
.gm-go { color: #b9b4a8 !important; font-size: 18px !important; }

/* 页面骨架 */
.page, .content, .gm, .home, .gh, .case-page, main.content {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.gh > *, .home > *, .gm > * { margin-top: 14px !important; }
.gh > *:first-child, .home > *:first-child, .gm > *:first-child { margin-top: 0 !important; }

/* 底部导航：白底细线，选中只换颜色 */
#app > nav, .tabbar, .bottom-nav, .tab-bar, nav.tabs {
  background: var(--surface) !important;
  border-top: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}

/* 唯一一档浮动阴影留给主 CTA */
button.talk, .btn-primary.big { box-shadow: var(--shadow-1) !important; }

/* 按钮里的图标不再套米白底座（曾把绿底按钮切成一块白方块） */
.btn .t-ico, .btn .ico, button .t-ico, button .ico, .dl-btn .t-ico, .deliver-item .btn-ghost .t-ico {
  width: 20px !important; height: 20px !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: inherit !important;
}
.btn svg, button.btn svg, .dl-btn svg { width: 18px !important; height: 18px !important; }
.card .btn { white-space: nowrap !important; }

/* 我的页行项目图标：和首页宫格同一种米白底 + 深绿图标 */
.gm-ic {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: #f3efe4 !important;
  color: #2f4a42 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.gm-ic svg { width: 20px !important; height: 20px !important; color: #2f4a42 !important; }
/* 卡内金色按钮与绿色按钮同一圆角，不再一边胶囊一边直角 */
.card .btn-gold { border-radius: 8px !important; }

/* 卡内按钮统一纯文字：图标本来只在部分按钮里有，留着就一边有一边没有 */
.card .btn .t-ico, .card .btn .ico { display: none !important; }