<!--
============================================================
Snippet 2 / 3 — HCT Itinerary: CSS
============================================================
WPCode 设置：
- Code Type: CSS Snippet（用 WPCode 的 CSS 类型，会自动包 <style> 标签，
  如果你的 WPCode 版本只有 "HTML Snippet"，就把下面内容整段包在
  <style>...</style> 里，作为 HTML Snippet 使用）
- Insertion: Page Specific → 只勾选 China Itinerary Planner 这一页
- Location: Header（Insert in Head）
- 启用状态: Active

改样式只改这一个文件，不要动 HTML 结构文件。

⚠️ 重要：HTML 结构的最外层容器必须有 id="hctApp"
  例如：<div id="hctApp" class="hct-app"> ... </div>
  如果你的 HTML 最外层用的是别的 id，请把下面所有 #hctApp 替换成你实际的 id，
  否则这份 CSS 无法生效。
============================================================
-->

<style>
#hctApp {
  --hct-bg: #f7f3ea;
  --hct-surface: #fffdf9;
  --hct-line: #e6ddcb;
  --hct-line-strong: #d8cdb4;

  --hct-text: #201c15;
  --hct-muted: #706a5c;
  --hct-faint: #a49c8b;

  --hct-accent: #b4233c;
  --hct-accent-deep: #8d1a30;
  --hct-accent-soft: #f7e8eb;

  --hct-dark: #201c15;

  --hct-radius-sm: 10px;
  --hct-radius-md: 16px;
  --hct-radius-lg: 22px;

  --hct-font-display: "Fraunces", Georgia, serif;
  --hct-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#hctApp, #hctApp * { box-sizing: border-box !important; }

#hctApp {
  font-family: var(--hct-font-body) !important;
  color: var(--hct-text) !important;
  background: var(--hct-bg) !important;
  line-height: 1.5 !important;
}

#hctApp p, #hctApp div, #hctApp span, #hctApp label,
#hctApp button, #hctApp select, #hctApp input, #hctApp h1,
#hctApp h2, #hctApp h3, #hctApp a, #hctApp li {
  font-family: var(--hct-font-body) !important;
}

/* ---------- Critical: view/step switching ---------- */
#hctApp .hct-view { display: none !important; padding: 48px 20px 72px !important; }
#hctApp .hct-view.is-active { display: block !important; }

#hctApp .hct-step { display: none !important; }
#hctApp .hct-step.is-active { display: block !important; }

#hctApp .hct-shell { max-width: 720px !important; margin: 0 auto !important; }
#hctApp .hct-shell--wide { max-width: 1160px !important; }

#hctApp .hct-intro { max-width: 620px !important; margin: 0 auto 28px !important; }
#hctApp .hct-kicker {
  display: inline-block !important; margin-bottom: 14px !important; padding: 7px 13px !important;
  border: 1px solid var(--hct-line-strong) !important; border-radius: 999px !important;
  background: rgba(255,255,255,0.6) !important; color: #7a7161 !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .09em !important; text-transform: uppercase !important;
}
#hctApp .hct-h1 {
  margin: 0 0 12px !important; font-family: var(--hct-font-display) !important; font-weight: 600 !important;
  font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.06 !important; letter-spacing: -.02em !important;
  color: var(--hct-text) !important;
}
#hctApp .hct-lead { margin: 0 !important; color: var(--hct-muted) !important; font-size: 16px !important; line-height: 1.65 !important; }

#hctApp .hct-card {
  background: var(--hct-surface) !important; border: 1px solid var(--hct-line) !important;
  border-radius: var(--hct-radius-lg) !important; padding: 30px !important;
  box-shadow: 0 10px 28px rgba(32,28,21,.05) !important;
}

#hctApp .hct-step-label {
  display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important;
  color: var(--hct-faint) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
}
#hctApp .hct-step-label::before { content: "" !important; width: 22px !important; height: 1px !important; background: var(--hct-line-strong) !important; }

#hctApp .hct-h2 {
  margin: 0 0 8px !important; font-family: var(--hct-font-display) !important; font-weight: 600 !important;
  font-size: clamp(22px, 3vw, 28px) !important; line-height: 1.12 !important; color: var(--hct-text) !important;
}
#hctApp .hct-sub { margin: 0 0 22px !important; color: var(--hct-muted) !important; font-size: 14.5px !important; line-height: 1.65 !important; max-width: 520px !important; }

#hctApp .hct-field { margin-bottom: 22px !important; }
#hctApp .hct-field:last-of-type { margin-bottom: 0 !important; }
#hctApp .hct-label { display: block !important; margin-bottom: 9px !important; font-size: 13px !important; font-weight: 600 !important; color: #574f42 !important; }

#hctApp .hct-city-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
#hctApp .hct-city-box {
  display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 13px !important;
  border: 1px solid var(--hct-line) !important; border-radius: var(--hct-radius-sm) !important;
  background: rgba(255,255,255,.7) !important; cursor: pointer !important; text-align: left !important;
  transition: border-color .15s ease, background .15s ease !important;
}
#hctApp .hct-city-box:hover { border-color: var(--hct-line-strong) !important; background: #fff !important; }
#hctApp .hct-city-box.is-active { border-color: rgba(180,35,60,.25) !important; background: var(--hct-accent-soft) !important; }
#hctApp .hct-city-emoji { font-size: 18px !important; flex-shrink: 0 !important; }
#hctApp .hct-city-text { display: flex !important; flex-direction: column !important; line-height: 1.3 !important; }
#hctApp .hct-city-en { font-size: 14px !important; font-weight: 600 !important; }
#hctApp .hct-city-cn { font-size: 11.5px !important; color: var(--hct-faint) !important; }
#hctApp .hct-city-box.is-active .hct-city-en { color: var(--hct-accent-deep) !important; }

#hctApp .hct-range { width: 100% !important; accent-color: var(--hct-accent) !important; }
#hctApp .hct-range-readout { margin-top: 8px !important; font-size: 14px !important; color: var(--hct-muted) !important; }
#hctApp .hct-range-readout span#hctDaysVal { font-family: var(--hct-font-display) !important; font-size: 20px !important; color: var(--hct-text) !important; }
#hctApp .hct-range-hint { color: var(--hct-faint) !important; font-size: 12.5px !important; }

#hctApp .hct-pill-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
#hctApp .hct-pill {
  display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important;
  padding: 9px 14px !important; border: 1px solid var(--hct-line) !important; border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important; color: #4a443a !important; font-size: 13.5px !important; cursor: pointer !important;
  line-height: 1.3 !important;
}
#hctApp .hct-pill-sub { font-size: 10.5px !important; color: var(--hct-faint) !important; }
#hctApp .hct-pill:hover { border-color: var(--hct-line-strong) !important; background: #fff !important; }
#hctApp .hct-pill.is-active { border-color: rgba(180,35,60,.2) !important; background: var(--hct-accent-soft) !important; color: var(--hct-accent-deep) !important; }
#hctApp .hct-pill.is-active .hct-pill-sub { color: #b06a79 !important; }

#hctApp .hct-select {
  width: 100% !important; padding: 12px 13px !important; border: 1px solid var(--hct-line) !important;
  border-radius: var(--hct-radius-sm) !important; background: rgba(255,255,255,.75) !important; font-size: 14.5px !important;
}
#hctApp .hct-checkbox-row { display: flex !important; align-items: flex-start !important; gap: 9px !important; font-size: 13.5px !important; line-height: 1.6 !important; cursor: pointer !important; }
#hctApp .hct-checkbox-row input { margin-top: 3px !important; accent-color: var(--hct-accent) !important; }

#hctApp .hct-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin-top: 26px !important; }

#hctApp .hct-btn {
  appearance: none !important; border: none !important; cursor: pointer !important; padding: 12px 20px !important;
  border-radius: 999px !important; font-family: var(--hct-font-body) !important; font-size: 13.5px !important; font-weight: 700 !important;
}
#hctApp .hct-btn--primary { background: var(--hct-accent) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(180,35,60,.14) !important; }
#hctApp .hct-btn--primary:hover { background: var(--hct-accent-deep) !important; }
#hctApp .hct-btn--primary:disabled { background: #d8cdb4 !important; cursor: not-allowed !important; box-shadow