/* ============================================================
   孝享到家 · H5 设计令牌（暖棕褐主题 · 对标参考 App 版式）
   配色：棕褐渐变顶栏 + 深棕红强调 + 暖米白底 + 白底大圆角卡
   全部色值取自参考截图与 assets/img 插画素材主色（见 scripts/extract-palette.ps1）：
     奶油底 #FBF7EB/#FDF5EA · 赤陶 #D37050/#C46141 · 深棕 #A25E42/#853F2D · 暖棕 #B18568
   ============================================================ */
:root {
  /* —— 主色：棕（素材主棕 / 参考按钮棕） —— */
  --xx-primary: #9A6B44;
  --xx-primary-deep: #7E5334;
  --xx-primary-soft: #F7EFE4;
  --xx-primary-light: #E9D8C3;

  /* —— 强调色：深棕红（参考深棕红 / 素材深赤陶） —— */
  --xx-accent: #A03A2A;
  --xx-accent-deep: #8B2E22;
  --xx-accent-soft: #FBEDE7;
  /* —— 亮赤陶（插画主色，用于小色块/图标） —— */
  --xx-terracotta: #C46141;
  --xx-terracotta-2: #D37050;

  --xx-ink: #2F231A;
  --xx-ink-2: #4A3728;

  --xx-gold: #B8862F;
  --xx-gold-light: #E0BC72;
  --xx-gold-soft: #FAF1DE;

  --xx-success: #1F7A52;
  --xx-success-soft: #E3F1EA;
  --xx-warn: #B4791A;
  --xx-warn-soft: #FBF0DC;
  --xx-danger: #A63A2B;
  --xx-danger-soft: #F9E7E3;
  --xx-info: #3B6A97;
  --xx-info-soft: #E7EFF6;

  --xx-text: #2B2019;
  --xx-text-2: #6B584A;
  --xx-text-3: #9C8778;
  --xx-bg: #F7F2EC;
  --xx-bg-2: #F1E7DA;
  --xx-card: #FFFFFF;
  --xx-line: #EEE3D6;
  --xx-line-strong: #DFCCB8;

  /* —— 渐变 —— */
  --xx-grad-brand: linear-gradient(135deg, #BC8E6B 0%, #9A6B44 52%, #7E5334 100%);
  --xx-grad-brand-soft: linear-gradient(135deg, #FAF4EB 0%, #EFE0CD 100%);
  --xx-grad-accent: linear-gradient(135deg, #AC4632 0%, #8B2E22 100%);
  --xx-grad-dark: linear-gradient(150deg, #4A3527 0%, #33241A 62%, #251A12 100%);
  --xx-grad-gold: linear-gradient(135deg, #DCB87C 0%, #B8862F 100%);
  --xx-grad-glass: linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 100%);
  /* 顶栏：棕褐渐变（参考截图取色） */
  --xx-grad-top: linear-gradient(180deg, #B48A6E 0%, #A87C5E 58%, #9A7053 100%);
  /* 米金卡（右半推荐卡） */
  --xx-grad-sand: linear-gradient(135deg, #EEDFC8 0%, #DCC09A 100%);

  --xx-fs-hero: 30px;
  --xx-fs-xxl: 25px;
  --xx-fs-xl: 20px;
  --xx-fs-lg: 18px;
  --xx-fs-md: 16px;
  --xx-fs-sm: 14px;
  --xx-fs-xs: 12px;

  --xx-fw-normal: 400;
  --xx-fw-medium: 500;
  --xx-fw-bold: 700;
  --xx-fw-heavy: 800;

  --xx-gap-xs: 4px;
  --xx-gap-sm: 8px;
  --xx-gap: 12px;
  --xx-gap-lg: 16px;
  --xx-gap-xl: 22px;
  --xx-gap-2xl: 30px;

  --xx-r-xs: 6px;
  --xx-r-sm: 8px;
  --xx-r: 12px;
  --xx-r-lg: 16px;
  --xx-r-xl: 20px;
  --xx-r-pill: 999px;

  --xx-border: 1px solid rgba(140, 98, 57, .12);
  --xx-border-strong: 1px solid rgba(140, 98, 57, .26);

  --xx-shadow-xs: 0 1px 4px rgba(74, 48, 28, .05);
  --xx-shadow-sm: 0 2px 8px rgba(74, 48, 28, .06);
  --xx-shadow: 0 4px 14px rgba(74, 48, 28, .07), 0 1px 3px rgba(74, 48, 28, .04);
  --xx-shadow-lg: 0 10px 26px rgba(74, 48, 28, .10), 0 2px 6px rgba(74, 48, 28, .05);
  --xx-shadow-brand: 0 6px 15px rgba(140, 98, 57, .26);

  --xx-ease: cubic-bezier(.22, .61, .36, 1);
  --xx-dur: .22s;

  --xx-tabbar-h: 62px;
  --xx-maxw: 520px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #E9DFD3;
  color: var(--xx-text);
  font-size: var(--xx-fs-md);
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: var(--xx-primary); text-decoration: none; }

/* ============================================================
   通用组件
   ============================================================ */
.card {
  background: var(--xx-card);
  border-radius: var(--xx-r-lg);
  border: var(--xx-border);
  box-shadow: var(--xx-shadow);
  padding: var(--xx-gap-lg);
  margin-bottom: var(--xx-gap);
}
.card-flat {
  background: var(--xx-card);
  border-radius: var(--xx-r);
  box-shadow: var(--xx-shadow-sm);
  padding: var(--xx-gap);
  margin-bottom: var(--xx-gap-sm);
}
.glass {
  background: var(--xx-grad-glass);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--xx-r-lg);
  box-shadow: var(--xx-shadow-lg);
}
.hero {
  position: relative;
  overflow: hidden;
  background: var(--xx-grad-dark);
  border-radius: var(--xx-r-xl);
  padding: var(--xx-gap-xl) var(--xx-gap-lg);
  box-shadow: var(--xx-shadow-lg);
  color: #fff;
  margin-bottom: var(--xx-gap);
}
.hero::after {
  content: "";
  position: absolute;
  top: -70px; right: -55px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 188, 114, .30) 0%, rgba(224, 188, 114, 0) 68%);
}
.hero-title { display: block; font-size: var(--xx-fs-xxl); font-weight: var(--xx-fw-heavy); letter-spacing: .5px; }
.hero-sub { display: block; margin-top: 3px; font-size: var(--xx-fs-sm); color: rgba(255,255,255,.75); }
.hero-brand { display: block; font-size: 27px; font-weight: var(--xx-fw-heavy); letter-spacing: 2px; color: #fff; }

.section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--xx-fs-xl); font-weight: var(--xx-fw-heavy); color: var(--xx-text);
  margin-bottom: var(--xx-gap);
}
.section-title::before {
  content: ""; width: 4px; height: 18px;
  background: var(--xx-grad-brand); border-radius: var(--xx-r-pill); margin-right: var(--xx-gap-sm);
}
.more { font-size: var(--xx-fs-sm); color: var(--xx-text-2); font-weight: var(--xx-fw-normal); }

.btn {
  display: flex; align-items: center; justify-content: center;
  height: 48px; border-radius: var(--xx-r-pill);
  font-size: var(--xx-fs-lg); font-weight: var(--xx-fw-bold); letter-spacing: 1px;
  transition: transform var(--xx-dur) var(--xx-ease), opacity var(--xx-dur) var(--xx-ease);
  width: 100%;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--xx-grad-brand); color: #fff; box-shadow: var(--xx-shadow-brand); }
.btn-accent { background: var(--xx-grad-accent); color: #fff; box-shadow: 0 6px 15px rgba(154, 59, 44, .26); }
.btn-ghost { background: var(--xx-primary-soft); color: var(--xx-primary); border: 1px solid var(--xx-primary-light); }
.btn-line { background: #fff; color: var(--xx-text-2); border: 1px solid var(--xx-line-strong); }
.btn-gold { background: var(--xx-grad-gold); color: #fff; box-shadow: 0 6px 14px rgba(184,134,47,.28); }
.btn-danger { background: var(--xx-danger); color: #fff; box-shadow: 0 5px 12px rgba(166,58,43,.22); }
.btn-disabled { background: #E4D8C9 !important; color: #fff !important; box-shadow: none !important; }
.btn-sm { height: 36px; font-size: var(--xx-fs-md); padding: 0 18px; width: auto; letter-spacing: 0; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--xx-r-pill);
  font-size: var(--xx-fs-sm); font-weight: var(--xx-fw-bold);
  background: var(--xx-primary-soft); color: var(--xx-primary);
  border: 1px solid rgba(140,98,57,.16);
}
.tag-success { background: var(--xx-success-soft); color: var(--xx-success); border-color: rgba(31,122,82,.16); }
.tag-warn { background: var(--xx-warn-soft); color: #8A5B0D; border-color: rgba(180,121,26,.20); }
.tag-danger { background: var(--xx-danger-soft); color: var(--xx-danger); border-color: rgba(166,58,43,.16); }
.tag-info { background: var(--xx-info-soft); color: var(--xx-info); border-color: rgba(59,106,151,.16); }
.tag-gray { background: #F2EAE0; color: var(--xx-text-2); border-color: var(--xx-line); }
.tag-gold { background: var(--xx-gold-soft); color: #7E5B0D; border-color: rgba(184,134,47,.24); }

.money { font-size: var(--xx-fs-hero); font-weight: var(--xx-fw-heavy); color: var(--xx-accent); font-family: "DIN Alternate", -apple-system, sans-serif; }
.money-unit { font-size: var(--xx-fs-md); font-weight: var(--xx-fw-bold); }
.money-sm { font-size: var(--xx-fs-xl); }

.list-item {
  display: flex; align-items: center;
  background: var(--xx-card); border-radius: var(--xx-r);
  border: var(--xx-border); box-shadow: var(--xx-shadow-sm);
  padding: var(--xx-gap); margin-bottom: var(--xx-gap-sm);
  transition: transform var(--xx-dur) var(--xx-ease);
}
.list-item:active { transform: scale(.99); }
.list-title { display: block; font-size: var(--xx-fs-lg); font-weight: var(--xx-fw-bold); }
.list-desc { display: block; font-size: var(--xx-fs-sm); color: var(--xx-text-2); margin-top: 1px; }
.list-arrow { font-size: 26px; line-height: 1; color: var(--xx-text-3); margin-left: var(--xx-gap-sm); }

.icon-badge {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--xx-grad-brand-soft);
  border: 1px solid rgba(140,98,57,.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-badge-lg { width: 58px; height: 58px; border-radius: 17px; }
.icon-badge-sm { width: 36px; height: 36px; border-radius: 11px; }
.icon-badge-dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }

.stat { flex: 1; text-align: center; padding: var(--xx-gap-sm) 0; }
.stat-num { display: block; font-size: 21px; font-weight: var(--xx-fw-heavy); color: var(--xx-accent); font-family: "DIN Alternate", -apple-system, sans-serif; }
.stat-label { display: block; font-size: var(--xx-fs-xs); color: var(--xx-text-2); margin-top: 2px; }

.field { margin-bottom: var(--xx-gap); }
.label { display: block; font-size: var(--xx-fs-md); font-weight: var(--xx-fw-bold); margin-bottom: var(--xx-gap-sm); }
.input {
  width: 100%; height: 46px; font-size: var(--xx-fs-lg);
  background: var(--xx-bg); border: 1px solid transparent; border-radius: var(--xx-r-sm);
  padding: 0 var(--xx-gap); outline: none;
}
.input:focus { border-color: var(--xx-primary); background: #fff; }
select.input { appearance: none; -webkit-appearance: none; }
textarea.input { height: auto; min-height: 84px; padding: 10px var(--xx-gap); width: 100%; resize: vertical; }

.empty { padding: 60px 0; text-align: center; color: var(--xx-text-2); font-size: var(--xx-fs-md); }
.empty-icon {
  width: 64px; height: 64px; margin: 0 auto var(--xx-gap);
  border-radius: 50%; background: var(--xx-grad-brand-soft);
  border: 1px solid rgba(140,98,57,.10);
  display: flex; align-items: center; justify-content: center;
}

.divider { height: 1px; background: var(--xx-line); margin: var(--xx-gap) 0; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.flex1 { flex: 1; min-width: 0; }
.muted { color: var(--xx-text-2); }
.small { font-size: var(--xx-fs-sm); }
.xsmall { font-size: var(--xx-fs-xs); }
.bold { font-weight: var(--xx-fw-bold); }
.right { text-align: right; }
.center { text-align: center; }
.press { transition: transform var(--xx-dur) var(--xx-ease); }
.press:active { transform: scale(.98); }