/* ============================================================
   古树名木·数字守护 —— 全站样式
   ============================================================ */

:root {
  --green-900: #123c2b;
  --green-800: #1c5138;
  --green-700: #2f6b4f;
  --green-500: #5a9b6e;
  --green-300: #a9cbb3;
  --green-100: #e7f0e9;
  --cream: #f7f4ec;
  --paper: #fffdf7;
  --ink: #2b2b2b;
  --ink-soft: #5c5c52;
  --gold: #c9943b;
  --orange: #e07a3f;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(18, 60, 43, 0.10);
  --shadow-soft: 0 4px 14px rgba(18, 60, 43, 0.07);
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --font-serif-latin: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--green-700); text-decoration: none; }

/* ============================================================
   下拉刷新指示器（手机下拉 / 电脑鼠标下拉）
   ============================================================ */
.ptr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding-top: 8px;
  background: linear-gradient(180deg, #eef4e8 0%, rgba(238, 244, 232, 0.95) 70%, rgba(238, 244, 232, 0) 100%);
  color: var(--green-800);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  opacity: 0;
}
.ptr.is-visible { opacity: 1; }
.ptr__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ptr[data-state="ready"] .ptr__icon { transform: rotate(180deg); }
.ptr[data-state="loading"] .ptr__icon { animation: ptr-spin 0.9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* 页面顶部禁用手势回弹（避免与下拉指示器叠加） */
html, body { overscroll-behavior-y: none; }

/* ============================================================
   加载动画 —— 树木图标生长
   （树干向上生长 → 树叶逐片长出 → 城市虚影渐显）
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 35%, #2c6148 0%, #17432f 55%, #0f2f21 100%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; }

/* 「本次会话已经进入过网站」→ 不再播入场动画。
   由 index.html <head> 的内联脚本（读 sessionStorage）在首屏绘制前给 <html> 加类，
   所以不会出现「先闪一下动画再收起」。从详情页返回上一级即走这条路径。 */
.no-entrance .loader { display: none !important; }

/* 徽标 + 外圈加载环的容器（尺寸也写了一遍内联样式作为兜底：见 site/index.html） */
.loader__badge {
  position: relative;
  display: block;
  width: 400px;
  height: 400px;
  width: min(93.33vw, 400px);   /* = 徽标 min(70vw,300px) 的 4/3，小屏比例不变 */
  height: min(93.33vw, 400px);
}

/* 外圈加载圆环：一段约 60° 的弧绕徽标匀速转动，整圈同时做「呼吸」缩放 */
.loader__ring {
  transform-origin: 50% 50%;
  animation: ring-pulse 1.7s ease-in-out infinite;
}
.loader__ring-arc {
  transform-box: fill-box;      /* 以弧自身的包围盒中心为旋转轴 → 正好是圆心 */
  transform-origin: center;
  animation: ring-spin 1.8s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-pulse {
  0%, 100% { transform: scale(0.93); opacity: 0.70; }
  50%      { transform: scale(1.05); opacity: 1; }
}
/* 动效减弱：不转也不呼吸（loader 仍按原逻辑短暂停留后收起） */
@media (prefers-reduced-motion: reduce) {
  .loader__ring,
  .loader__ring-arc { animation: none; }
}

/* 圆形徽标舞台：按图标实测的圆环（圆心 663,627.5、外半径 594，图幅 1280）
   裁掉圆环之外的白角，使徽标落在深绿底上。
   圆百分比在正方形元素上正好等于 直径/边长，故 46.41% = 594/1280。
   居中用 left/top 50% + translate(-50%,-50%)，与内联样式一致（双保险）。 */
.loader__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  width: min(70vw, 300px);   /* 不支持 min() 的老浏览器回落到上一行的 300px */
  height: min(70vw, 300px);
  clip-path: circle(46.41% at 51.8% 49.02%);
  -webkit-clip-path: circle(46.41% at 51.8% 49.02%);
}
.loader__canvas,
.loader__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* 最终帧 = 原图 JPEG 由 <img> 直接渲染（不经过 canvas），
   所以「最终原图一模一样」是构造上保证的，且不受合成舍入误差影响。
   它的淡出/淡回由 loader-anim.js 以内联样式控制。 */

.loader__title {
  position: relative;
  z-index: 1;
  margin: 6px 0 0;
  color: #eef7ef;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 6px;
  opacity: 0;
  animation: fade-in 0.8s ease 0.8s forwards;
}
.loader__sub {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(238, 247, 239, 0.65);
  font-size: 13px;
  letter-spacing: 3px;
  opacity: 0;
  animation: fade-in 0.8s ease 1s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

/* ============================================================
   布局
   ============================================================ */
.app { display: block; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   首页 hero
   ============================================================ */
.hero {
  background:
    linear-gradient(180deg, rgba(15, 47, 33, 0.55), rgba(15, 47, 33, 0.75)),
    linear-gradient(120deg, #1c5138, #2f6b4f);
  color: #f2f7f3;
  padding: 72px 20px 64px;
  text-align: center;
}
.hero__title {
  margin: 0;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 8px;
  white-space: nowrap;
}
.hero__subtitle {
  margin: 14px 0 0;
  font-size: clamp(14px, 2vw, 17px);
  letter-spacing: 2px;
  opacity: 0.85;
}
/* 手机端：标题字号与字距收缩，保证「古树名木·数字守护」一行放下 */
@media (max-width: 620px) {
  .hero__title {
    font-size: clamp(20px, 6.2vw, 26px);
    letter-spacing: 4px;
  }
  .hero__subtitle {
    font-size: 13.5px;
    letter-spacing: 1px;
    line-height: 1.7;
  }
}

/* ============================================================
   区块标题
   ============================================================ */
.section-title {
  margin: 44px 0 22px;
  font-size: 24px;
  font-weight: 700;
  color: var(--green-800);
  letter-spacing: 2px;
  position: relative;
  padding-left: 16px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(var(--green-500), var(--gold));
}

/* ============================================================
   项目简介
   ============================================================ */
.about {
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}
.about__text {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.about__text:last-child { margin-bottom: 0; }

/* ============================================================
   古树卡片网格
   ============================================================ */
.tree-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.search-box {
  position: relative;
  flex: 1 1 280px;
  max-width: 520px;
}
.search-box__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green-500);
  pointer-events: none;
}
.search-box__input {
  width: 100%;
  padding: 11px 76px 11px 38px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fbf9f1;
  border: 1.5px solid #ddd6c2;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box__input:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(90, 155, 110, 0.18);
  background: #fff;
}
.search-box__input::placeholder { color: #a39c86; }
.search-box__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #e4ddc8;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.search-box__clear:hover { background: var(--green-300); color: var(--green-900); }

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  padding: 7px 16px;
  font-size: 13px;
  font-family: inherit;
  color: var(--green-800);
  background: var(--green-100);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter-chip:hover { background: #d7e8dc; }
.filter-chip.is-active {
  background: var(--green-700);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(47, 107, 79, 0.3);
}
.tree-toolbar__count {
  margin: 0 0 0 auto;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 翻页控件 */
.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.pager__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  color: var(--green-800);
  background: var(--green-100);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.pager__btn:hover:not(:disabled) { background: var(--green-700); color: #fff; }
.pager__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pager__info {
  min-width: 52px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* 页码数字 */
.pager__nums {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pager__num {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  color: var(--green-800);
  background: var(--paper);
  border: 1px solid #d8d0ba;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pager__num:hover { background: var(--green-100); border-color: var(--green-500); }
.pager__num.is-current {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
  cursor: default;
}
.pager__dots {
  min-width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  user-select: none;
}
.pager--bottom {
  justify-content: center;
  margin: 26px 0 6px;
  padding: 14px 0;
  border-top: 1px solid #e8e2d2;
}
.pager__btn--wide { padding: 0 20px; }

.search-empty {
  margin: 26px 0;
  padding: 44px 20px;
  text-align: center;
  background: var(--paper);
  border: 1px dashed #d8d0ba;
  border-radius: var(--radius);
}
.search-empty__icon { margin: 0 0 6px; font-size: 30px; }
.search-empty__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--ink); }
.search-empty__sub { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.tree-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tree-card {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 128px;
}
.tree-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* 左侧正方形图片 */
.tree-card__img {
  position: relative;
  width: 128px;
  height: 128px;
  align-self: center;
  flex-shrink: 0;
  background: #dfe9e0;
}
.tree-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* 竖构图树木优先显示树冠顶部，避免树顶被裁 */
}

/* 图片右上角：植物名称（保留样式以兼容，当前由文字区标题替代不再生成） */
.tree-card__name {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  background: rgba(15, 47, 33, 0.82);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 1px;
}
/* 图片右下角：小字介绍 */
.tree-card__badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  background: rgba(255, 253, 247, 0.92);
  color: var(--green-800);
  font-size: 11px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  gap: 6px;
}
.tree-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.tree-card__latin {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 13px;
  color: var(--green-700);
}
.tree-card__meta {
  font-size: 12px;
  color: var(--ink-soft);
}
.tree-card__desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tree-card__cta {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange);
}

/* ============================================================
   详情页
   ============================================================ */
.tree-hero {
  background: linear-gradient(120deg, #1c5138, #2f6b4f);
  color: #f2f7f3;
  padding: 42px 20px 40px;
  text-align: center;
}
.tree-hero__back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(242, 247, 243, 0.8);
  letter-spacing: 1px;
}
.tree-hero__back:hover { color: #fff; }
.tree-hero__num {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.tree-hero h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 4px;
}
.tree-hero .latin {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 22px);
  color: #d6ecd9;
}

.tree-main { max-width: 880px; margin: 0 auto; padding: 0 20px 60px; }

/* 图片墙 */
.photo-wall {
  display: grid;
  gap: 16px;
  margin: 30px 0;
}
.photo-wall--2 { grid-template-columns: 1fr 1fr; }
.photo-wall figure {
  margin: 0;
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
/* 照片完整展示：contain 不裁切（鸟头/树顶完整可见），浅色衬底更美观 */
.photo-wall img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  background: linear-gradient(180deg, #f2efe4 0%, #e9e4d4 100%);
  padding: 10px;
}
.photo-wall figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

/* 信息卡 */
.info-card {
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-soft);
  margin: 26px 0;
}
.info-card h2 {
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--green-800);
  letter-spacing: 2px;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.info-grid .item { display: flex; flex-direction: column; }
.info-grid .k {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.info-grid .v { font-size: 15.5px; font-weight: 500; }
.info-grid .v .latin {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
}
.info-grid .full { grid-column: 1 / -1; }

/* 通用区块 */
.tree-section {
  margin: 30px 0;
  padding: 24px 26px;
  background: var(--paper);
  border: 1px solid #e8e2d2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.tree-section h2 {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--green-800);
  letter-spacing: 2px;
}
.tree-section h3 {
  margin: 18px 0 8px;
  font-size: 16px;
  color: var(--green-700);
}
.tree-section p { margin: 0 0 12px; color: var(--ink-soft); }
.tree-section p:last-child { margin-bottom: 0; }
.section-lead {
  font-size: 14px;
  color: var(--ink-soft);
  opacity: 0.9;
}

/* 拉丁名通用 */
.latin {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-weight: 700;
}

/* 科属：中间空一格、不加粗 */
.keshu { letter-spacing: 1px; }

/* 诗词 / 文学：雅致字体 */
.verse {
  margin: 0 0 10px;
  font-family: var(--font-kai);
  font-size: 17px;
  color: #4a4638;
  line-height: 1.9;
}
.verse .src { font-size: 13px; color: #8a8268; }

/* 飞鸟 */
.bird-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.bird-row figure {
  margin: 0;
  background: #f4f1e7;
  border-radius: 12px;
  overflow: hidden;
}
.bird-row img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  background: linear-gradient(180deg, #f2efe4 0%, #e9e4d4 100%);
  padding: 8px;
}
.bird-row figcaption {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.bird-row figcaption .latin { font-size: 12px; }
.bird-row__ph {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #f2efe4 0%, #e9e4d4 100%);
}

/* 交通方式：箭头流程 */
.route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}
.route .step {
  background: var(--green-100);
  color: var(--green-800);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}
.route .arrow {
  color: var(--orange);
  font-size: 20px;
  font-weight: 700;
}

/* 按钮 */
.btn-ar {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 26px;
  background: linear-gradient(120deg, var(--orange), #c96a2e);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 2px;
  box-shadow: 0 6px 16px rgba(224, 122, 63, 0.35);
  transition: transform 0.2s ease;
}
.btn-ar:hover { transform: translateY(-2px); color: #fff; }

/* 二维码操作按钮组 */
.qr-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.btn-ar--sm {
  margin-top: 0;
  padding: 10px 18px;
  font-size: 13.5px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
  border: 0;
}
.btn-ar--ghost {
  background: transparent;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  box-shadow: none;
}
.btn-ar--ghost:hover { background: rgba(224, 122, 63, 0.08); color: var(--orange); }
.qr-tip {
  margin: 10px 0 0;
  min-height: 20px;
  font-size: 13px;
  color: var(--green-700);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.qr-tip.is-show { opacity: 1; }

/* 3D 数字分身：预留 */
.model-slot {
  margin-top: 12px;
  border: 2px dashed var(--green-300);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-soft);
  background: #f2f7f0;
}
.model-slot .tip { font-size: 14px; }
.model-slot .soon {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--green-700);
  background: var(--green-100);
  padding: 3px 12px;
  border-radius: 999px;
}

/* 二维码 */
.qr-box {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.qr-box .qr-canvas-wrap {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  line-height: 0;
}
.qr-box .qr-hint { font-size: 13.5px; color: var(--ink-soft); max-width: 300px; }

/* ============================================================
   页脚
   ============================================================ */
.footer {
  text-align: center;
  padding: 34px 20px;
  color: #8a8466;
  font-size: 13px;
  background: #ece6d6;
}
.footer > p {
  margin: 0;
}
.footer > p:first-child {
  margin-bottom: 14px;
}
.footer__icp {
  margin-top: 5px !important;
}
.footer__icp a {
  color: #8a8466;
  text-decoration: none;
}
.footer__icp a:hover {
  text-decoration: underline;
}
.footer__badge {
  display: inline-block;   /* 覆盖全局 img{display:block}，保证与备案号同行紧贴 */
  width: 16px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 4px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
  .tree-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .tree-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* 手机：一行两棵，卡片上下结构等比缩小 */
  .tree-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tree-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
    border-radius: 12px;
  }
  .tree-card__img {
    width: 100%;
    height: 120px;
    align-self: auto;
  }
  .tree-card__body {
    padding: 10px 12px 12px;
    gap: 4px;
  }
  .tree-card__title { font-size: 15px; }
  .tree-card__latin { font-size: 11px; }
  .tree-card__meta { font-size: 11px; }
  .tree-card__desc {
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .tree-card__cta { font-size: 11.5px; }
  .tree-card__badge {
    bottom: 6px;
    right: 6px;
    font-size: 10px;
    padding: 2px 6px;
    max-width: calc(100% - 12px);
  }
  .tree-card__img3d {
    top: 6px;
    left: 6px;
    font-size: 10px;
    padding: 2px 8px;
  }
  .tree-card__imgph { font-size: 12px; }

  /* 搜索筛选工具栏：紧凑单列 */
  .tree-toolbar { padding: 12px 14px; gap: 10px 12px; }
  .search-box { flex-basis: 100%; max-width: none; }
  .search-box__input { font-size: 14px; padding: 10px 60px 10px 36px; }
  .tree-toolbar__count { margin-left: auto; font-size: 12px; }
  .pager { margin-left: auto; gap: 6px; }
  .pager__btn { min-width: 32px; height: 32px; padding: 0 10px; font-size: 14px; }
  .pager__num { min-width: 30px; height: 30px; font-size: 13px; }
  .pager--bottom { margin: 20px 0 4px; }

  .info-grid { grid-template-columns: 1fr; }
  .info-grid .item { flex-direction: row; align-items: baseline; gap: 10px; }
  .info-grid .k { width: 92px; flex-shrink: 0; font-size: 12px; }
  .info-grid .v { font-size: 14.5px; }
  .info-grid .full { grid-column: 1 / -1; }
  .photo-wall--2 { grid-template-columns: 1fr; }
  .bird-row { grid-template-columns: 1fr; }
  .photo-wall img { height: 240px; }
  .bird-row img { height: 200px; }
  .hero { padding: 52px 20px 46px; }
  .tree-hero { padding: 30px 16px 26px; }
  .tree-hero__num { font-size: 11.5px; padding: 3px 10px; letter-spacing: 1px; }
  .tree-hero h1 { font-size: clamp(26px, 8vw, 34px); }
}

/* ============================================================
   3D 高斯粒子舞台（详情页顶部）
   ============================================================ */
.gs-stage {
  background:
    radial-gradient(130% 150% at 50% 0%, #1c5138 0%, #17432f 45%, #0f2f21 100%);
  padding: 26px 20px 34px;
}

.gs-stage__head {
  max-width: 1180px;
  margin: 0 auto 14px;
  text-align: left;
}
.gs-stage__title {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-left: 16px;
  color: #eef7ef;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
}
.gs-stage__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(#9ed8a8, #c9943b);
}
.gs-stage__sub {
  margin: 8px 0 0;
  color: rgba(238, 247, 239, 0.75);
  font-size: 13px;
  letter-spacing: 1px;
}
.gs-stage__sub strong { color: #9ed8a8; }
.gs-stage__orient {
  display: inline-block;
  margin: 8px 0 0 14px;
  padding: 3px 12px;
  font-size: 12px;
  color: #c9943b;
  border: 1px solid rgba(201, 148, 59, 0.55);
  border-radius: 20px;
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.2s, color 0.2s;
}
.gs-stage__orient:hover { background: #c9943b; color: #122019; }

/* 画质切换器（低/中/高） */
.gs-quality {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(10, 30, 20, 0.72);
  border: 1px solid rgba(158, 216, 168, 0.25);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}
.gs-quality__label {
  font-size: 11px;
  color: rgba(238, 247, 239, 0.7);
  margin-right: 2px;
  letter-spacing: 1px;
}
.gs-quality__btn {
  border: 0;
  background: transparent;
  color: rgba(238, 247, 239, 0.75);
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gs-quality__btn:hover { background: rgba(201, 148, 59, 0.25); color: #ffd98a; }
.gs-quality__btn.active {
  background: #c9943b;
  color: #122019;
  font-weight: 700;
}

.gs-frame-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  height: clamp(420px, 62vh, 660px);
  border-radius: 18px;
  overflow: hidden;
  background: #123c2b;
  border: 1px solid rgba(158, 216, 168, 0.22);
  box-shadow: 0 18px 50px rgba(7, 25, 17, 0.55);
}

.gs-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #123c2b;
  filter: blur(10px);
  transition: filter 1.1s ease;
}
.gs-stage.is-loaded .gs-frame { filter: blur(0); }

/* 粒子凝聚开场遮罩 */
.gs-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(circle at 50% 45%, rgba(23, 67, 47, 0.2) 0%, rgba(15, 47, 33, 0.55) 100%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
  pointer-events: auto;
}
.gs-stage.is-loaded .gs-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.gs-intro__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #eef7ef;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-shadow: 0 2px 14px rgba(7, 25, 17, 0.6);
}
.gs-intro__sub {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(238, 247, 239, 0.75);
  font-size: 13px;
  letter-spacing: 2px;
}
.gs-intro__pct { color: #9ed8a8; font-weight: 700; }

/* 漂浮粒子（模拟高斯粒子从模糊到凝聚） */
.gs-intro__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gs-p {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #e8f8ec 0%, #9ed8a8 45%, rgba(158, 216, 168, 0) 72%);
  opacity: 0;
  animation: gs-rise var(--t) ease-in var(--d) infinite;
}
@keyframes gs-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(calc(-1 * var(--h))) scale(1.2); opacity: 0; }
}

/* 底部操作提示 */
.gs-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.8s ease;
}
.gs-stage.is-loaded .gs-hint { opacity: 1; }
.gs-hint span {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(15, 47, 33, 0.62);
  color: rgba(238, 247, 239, 0.88);
  font-size: 12px;
  letter-spacing: 1px;
  backdrop-filter: blur(2px);
}

/* 待完成占位：详情页 3D 舞台 */
.gs-frame-wrap--todo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(130% 150% at 50% 0%, #245a40 0%, #1a4530 55%, #102f21 100%);
}
.gs-frame-wrap--todo .model-slot {
  margin: 0;
  border-color: rgba(201, 148, 59, 0.5);
  background: rgba(255, 253, 247, 0.06);
  color: rgba(238, 247, 239, 0.85);
}
.gs-frame-wrap--todo .model-slot .soon {
  color: #ffd98a;
  background: rgba(201, 148, 59, 0.18);
}

/* 首页卡片 3D 徽章 */
.tree-card__img3d {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(120deg, #5a9b6e, #2f6b4f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(18, 60, 43, 0.35);
}
.tree-card__img3d::after { content: "3D 分身"; }

/* 待完成徽章：无 3D 模型的古树 */
.tree-card__img3d--todo {
  background: linear-gradient(120deg, #c9943b, #b07a24);
  box-shadow: 0 2px 8px rgba(150, 105, 30, 0.35);
}
.tree-card__img3d--todo::after { content: "待完成"; }

/* 无缩略图时的占位 */
.tree-card__imgph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f3f0e3, #e8e2cf);
  color: #9a937a;
  font-size: 13px;
  letter-spacing: 2px;
  border: 1px dashed #d8d0ba;
}

/* 动效减弱偏好 */
@media (prefers-reduced-motion: reduce) {
  .gs-p { display: none; }
  .gs-intro, .gs-frame { transition: none; }
}

@media (max-width: 620px) {
  .gs-stage { padding: 20px 12px 26px; }
  /* 手机 3D 舞台不要占满首屏：降到 40vh 左右，留出下滑空间 */
  .gs-frame-wrap { height: 40vh; min-height: 300px; max-height: 420px; }
  .gs-stage__title { font-size: 19px; letter-spacing: 2px; }
  .gs-stage__sub { font-size: 12px; }
  .gs-hint { bottom: 8px; gap: 8px; }
  .gs-hint span { font-size: 11px; padding: 3px 9px; }
  .gs-quality { top: 8px; right: 8px; padding: 4px 6px; }
  .gs-quality__btn { font-size: 11px; padding: 2px 8px; }

  /* 二维码区域：纵向紧凑 */
  .qr-box { flex-direction: column; align-items: flex-start; gap: 12px; }
  .qr-box .qr-hint { max-width: none; }
  .qr-actions { flex-direction: column; align-items: stretch; }
  .btn-ar--sm { text-align: center; }

  /* 备案两行：手机端紧凑居中，图标略缩小 */
  .footer { padding: 28px 14px 30px; }
  .footer > p:first-child { margin-bottom: 12px; font-size: 12.5px; }
  .footer__icp { font-size: 12px; }
  .footer__badge { width: 14px; height: 16px; vertical-align: -3px; margin-right: 3px; }
}