:root {
  --hf-green: #207a45;
  --hf-green-dark: #12552f;
  --hf-green-soft: #ddf3e3;
  --hf-harvest: #e7a52b;
  --hf-paper: #f8f7f1;
  --hf-surface: #fff;
  --hf-text: #162018;
  --hf-muted: #657168;
  --hf-line: #e5ebe5;
}

body.hf-home-v2-active { margin: 0; background: var(--hf-paper); color: var(--hf-text); }
body.hf-home-v2-active > #app { display: none !important; }
body.hf-home-v2-active > #hf-mall-entry { display: none !important; }
body:not(.hf-home-v2-active) > #hf-home-v2 { display: none !important; }

#hf-home-v2 { min-height: 100vh; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
#hf-home-v2 * { box-sizing: border-box; }
#hf-home-v2 a { color: inherit; text-decoration: none; }
#hf-home-v2 button { font: inherit; }
.hf2-service { border: 0; cursor: pointer; }
.hf2-more-sheet[hidden] { display: none; }
.hf2-more-sheet { position: fixed; z-index: 1800; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.hf2-more-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(18, 31, 21, .38); backdrop-filter: blur(3px); }
.hf2-more-panel { position: relative; width: min(620px, 100%); padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -16px 50px rgba(24, 55, 29, .18); }
.hf2-more-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hf2-more-head small { color: var(--hf-green); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.hf2-more-head h2 { margin: 3px 0 0; font-size: 21px; }
.hf2-more-head > button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hf-paper); color: var(--hf-text); font-size: 25px; }
.hf2-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hf2-more-grid a { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 12px; border: 1px solid var(--hf-line); border-radius: 15px; background: #fbfcfa; }
.hf2-more-grid b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--hf-green-soft); font-size: 21px; }
.hf2-more-grid span { font-size: 14px; font-weight: 750; }
.hf2-more-grid small { display: block; margin-top: 3px; color: var(--hf-muted); font-size: 11px; font-weight: 400; }

.hf2-shell { width: min(100%, 1180px); margin: 0 auto; padding: 0 16px 104px; }
.hf2-appbar { height: 58px; display: flex; align-items: center; justify-content: space-between; }
.hf2-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--hf-green-dark); }
.hf2-brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 12px; background: var(--hf-green-soft); color: var(--hf-green); }
.hf2-icon-btn { width: 44px; height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--hf-text); display: grid; place-items: center; cursor: pointer; position: relative; }
.hf2-icon-btn::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #df3f38; position: absolute; right: 8px; top: 8px; border: 2px solid var(--hf-paper); }
.hf2-icon { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.hf2-banner { min-height: 152px; padding: 24px 22px; border-radius: 20px; overflow: hidden; position: relative; display: flex; align-items: center; background: #244d2c url('/farm-banner-v1.png') center/cover no-repeat; color: #fff; box-shadow: 0 8px 26px rgba(28, 65, 38, .12); }
.hf2-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,49,25,.82) 0%, rgba(15,62,31,.62) 42%, rgba(15,62,31,.05) 72%); }
.hf2-banner-content { position: relative; z-index: 1; width: min(64%, 560px); }
.hf2-banner h1 { margin: 0 0 6px; font-size: clamp(24px, 5.8vw, 36px); line-height: 1.18; letter-spacing: -.02em; }
.hf2-banner p { margin: 0 0 16px; font-size: 14px; opacity: .92; }
.hf2-banner-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--hf-green-dark) !important; font-weight: 700; }
.hf2-dots { position: absolute; z-index: 1; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.hf2-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.52); }
.hf2-dot.is-active { width: 18px; border-radius: 99px; background: #fff; }

.hf2-greeting { margin: 20px 2px 12px; font-size: 19px; font-weight: 750; }
.hf2-greeting span { color: var(--hf-green); }
.hf2-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hf2-service { min-width: 0; min-height: 92px; padding: 13px 6px 10px; border: 1px solid rgba(32,122,69,.08); border-radius: 17px; background: var(--hf-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 5px 18px rgba(22,32,24,.04); font-size: 14px; font-weight: 650; }
.hf2-service-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--hf-green-soft); color: var(--hf-green); }
.hf2-service:nth-child(2) .hf2-service-icon { background: #eaf1ff; color: #4779c8; }
.hf2-service:nth-child(3) .hf2-service-icon { background: #fff1d4; color: #c77a12; }
.hf2-service:nth-child(4) .hf2-service-icon { background: #edf0f4; color: #647180; }

.hf2-section { margin-top: 16px; padding: 17px; border: 1px solid rgba(32,122,69,.07); border-radius: 20px; background: var(--hf-surface); box-shadow: 0 6px 20px rgba(22,32,24,.035); }
.hf2-section-head { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hf2-section-title { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 18px; }
.hf2-title-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--hf-green-soft); color: var(--hf-green); }
.hf2-more { min-height: 44px; display: inline-flex; align-items: center; gap: 3px; padding: 0 4px 0 12px; color: var(--hf-muted) !important; font-size: 13px; }

.hf2-child { display: grid; grid-template-columns: 112px 1fr; gap: 15px; align-items: center; }
.hf2-child-visual { min-height: 104px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#dff5dd,#fff0c9); }
.hf2-child-visual svg { width: 72px; height: 72px; }
.hf2-child strong { display: block; margin-bottom: 6px; font-size: 18px; }
.hf2-child strong b { color: var(--hf-green); font-size: 27px; }
.hf2-child p { margin: 0 0 12px; color: var(--hf-muted); font-size: 13px; }
.hf2-small-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--hf-green); color: #fff !important; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; }

.hf2-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.hf2-activity { overflow: hidden; border: 1px solid var(--hf-line); border-radius: 15px; background: #fff; }
.hf2-activity-visual { aspect-ratio: 16/8; padding: 10px; display: flex; align-items: flex-start; background: linear-gradient(135deg,#d8f2df,#fff0bd); }
.hf2-activity:nth-child(2) .hf2-activity-visual { background: linear-gradient(135deg,#fff0bf,#e8f5dd); }
.hf2-status { padding: 4px 8px; border-radius: 99px; background: #ef7657; color: #fff; font-size: 11px; font-weight: 700; }
.hf2-activity:nth-child(2) .hf2-status { background: #3f86d9; }
.hf2-activity-body { padding: 12px; }
.hf2-activity h3 { margin: 0 0 6px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf2-activity-meta { color: var(--hf-muted); font-size: 12px; line-height: 1.5; }

.hf2-order { min-height: 74px; display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; }
.hf2-order-visual { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: #edf7ed; color: var(--hf-green); }
.hf2-order strong { display: block; margin-bottom: 5px; font-size: 15px; }
.hf2-order p { margin: 0; color: var(--hf-muted); font-size: 12px; line-height: 1.5; }
.hf2-order-state { padding: 5px 9px; border-radius: 99px; background: var(--hf-green-soft); color: var(--hf-green-dark); font-size: 12px; font-weight: 700; }

.hf2-empty { padding: 20px 10px; text-align: center; color: var(--hf-muted); font-size: 14px; }
.hf2-skeleton { min-height: 86px; border-radius: 14px; background: linear-gradient(90deg,#f0f2ef 25%,#fafbf9 38%,#f0f2ef 63%); background-size: 400% 100%; animation: hf2-shimmer 1.3s infinite; }
@keyframes hf2-shimmer { to { background-position: -100% 0; } }

.hf2-bottom { position: fixed; z-index: 920; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,1180px); min-height: calc(67px + env(safe-area-inset-bottom)); padding: 7px max(12px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.94); border-top: 1px solid var(--hf-line); backdrop-filter: blur(16px); box-shadow: 0 -8px 24px rgba(22,32,24,.06); }
.hf2-nav { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #66716a !important; font-size: 11px; font-weight: 650; }
.hf2-nav.is-active { color: var(--hf-green) !important; }
.hf2-nav .hf2-icon { width: 22px; height: 22px; }

@media (max-width: 359px) {
  .hf2-shell { padding-inline: 12px; }
  .hf2-banner { padding: 20px 16px; }
  .hf2-banner-content { width: 72%; }
  .hf2-services { gap: 7px; }
  .hf2-service { font-size: 12px; }
  .hf2-activity-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .hf2-shell { padding-inline: 28px; }
  .hf2-appbar { height: 70px; }
  .hf2-banner { min-height: 250px; padding: 42px; border-radius: 26px; }
  .hf2-main-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
  .hf2-section { margin-top: 18px; }
  .hf2-bottom { width: auto; left: auto; right: 32px; bottom: 22px; transform: none; grid-template-columns: repeat(4,86px); min-height: 64px; padding: 6px 10px; border: 1px solid var(--hf-line); border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) { .hf2-skeleton { animation: none; } }