/* ============================================================
   pc-pages-qinggan.css —— 鹰盾情感 · 情感挽回 PC 内页 3D 主题
   源稿：emotion-rescue/pc-love.html（冰山 / 蜂巢心结 / 五阶梯 / 认知翻转卡 / 时间线）
   主题色：青绿 #0f4c47 + 墨绿 #021816
   ============================================================ */

/* ===== 页面主题变量（覆盖 .pg 默认） ===== */
.pg-qinggan {
  --ink: #021816;
  --ink-2: #0f4c47;
  --ink-deep: #010a09;
  --accent: #0f4c47;
  --accent-2: #2a7a72;
  --accent-deep: #072b27;
  --gold: #d9b45b;
  --gold-2: #a8842f;
  --bg: #f4f8f7;
  --bg-2: #e7f0ee;
  --body: #2e3f3c;
  --muted: #4c635f;
  --muted-2: #7d918d;
  --edge: #d6e4e1;
  --chip: #e2f4ef;
}

/* ===== 模块一：冰山 ===== */
.pg-qinggan-iceberg { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.pg-qinggan-iceberg__stage { position: relative; perspective: 1400px; }
.pg-qinggan-iceberg__back { position: absolute; inset: 0; transform: translate(24px, 24px); border-radius: 36px; background: var(--bg-2); }
.pg-qinggan-iceberg__card {
  position: relative; height: 480px; border-radius: 36px; overflow: hidden; border: 4px solid #fff;
  background: linear-gradient(to bottom, #eaf6f4, #d9efeb);
  transform: rotateY(8deg) rotateX(4deg); box-shadow: 0 50px 70px -24px rgba(2, 24, 22, .6);
}
.pg-qinggan-iceberg__sea { position: absolute; left: 0; right: 0; top: 33%; bottom: 0;
  background: linear-gradient(to bottom, var(--accent-2), var(--accent) 50%, var(--ink-deep)); }
.pg-qinggan-iceberg__waterline { position: absolute; left: 0; right: 0; top: 33%; height: 2px; background: rgba(255, 255, 255, .6); filter: blur(2px); }
.pg-qinggan-iceberg__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-qinggan-iceberg__tag { position: absolute; border-radius: 16px; background: #fff; padding: 10px 16px; font-size: 14px; font-weight: 700; box-shadow: 0 5px 0 var(--edge); }
.pg-qinggan-iceberg__tag--t1 { left: 32px; top: 32px; }
.pg-qinggan-iceberg__tag--t2 { right: 32px; top: 80px; }
.pg-qinggan-iceberg__line { position: absolute; left: 32px; top: 35%; font-size: 12px; letter-spacing: .2em; font-weight: 700; color: rgba(255, 255, 255, .8); }
.pg-qinggan-iceberg__deep {
  position: absolute; border-radius: 16px; background: rgba(255, 255, 255, .15); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .3); padding: 12px 20px; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
}
.pg-qinggan-iceberg__deep--1 { left: 40px; top: 48%; }
.pg-qinggan-iceberg__deep--2 { right: 40px; top: 63%; }
.pg-qinggan-iceberg__deep--3 { left: 56px; bottom: 32px; }
.pg-qinggan-iceberg__deep b { display: block; font-size: 16px; font-weight: 900; }
.pg-qinggan-iceberg__deep span { font-size: 12px; color: #b7e8e1; }
.pg-qinggan-iceberg__p { margin-top: 20px; font-size: 16px; line-height: 2; color: var(--body); }
.pg-qinggan-iceberg__cards { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-qinggan-iceberg__card-item { border-radius: 20px; background: #fff; padding: 20px; box-shadow: 0 7px 0 var(--edge); }
.pg-qinggan-iceberg__card-item--gold { box-shadow: 0 7px 0 #f0dca6; }
.pg-qinggan-iceberg__ico { font-size: 30px; line-height: 1; }
.pg-qinggan-iceberg__card-item h3 { margin: 12px 0 0; font-size: 15px; font-weight: 900; color: var(--ink); }
.pg-qinggan-iceberg__card-item p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ===== 模块二：蜂巢心结（深色） ===== */
.pg-qinggan-knot { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ink-deep), var(--accent)); }
.pg-qinggan-knot::before { content: ''; position: absolute; right: -80px; bottom: -80px; width: 384px; height: 384px; border-radius: 50%;
  background: var(--accent-2); opacity: .2; filter: blur(64px); }
.pg-qinggan-knot .pg-eyebrow { color: var(--gold); }
.pg-qinggan-knot .pg-h2 { color: #fff; }
.pg-qinggan-knot .pg-head__num { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #3b2a06; box-shadow: 0 6px 0 #8a6208; }
.pg-qinggan-knot__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pg-qinggan-knot__lead { margin: 16px 0 0; font-size: 15px; color: rgba(225, 244, 240, .8); }
.pg-qinggan-knot__comb { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.pg-qinggan-knot__row { display: flex; gap: 12px; }
.pg-qinggan-knot__row--mid { margin-top: -32px; }
.pg-qinggan-knot__cell { position: relative; width: 140px; height: 158px; border: none; background: transparent; cursor: pointer; padding: 0; transition: transform .3s; }
.pg-qinggan-knot__cell .pg-qinggan-knot__shadow { position: absolute; inset: 0; transform: translateY(9px); background: var(--ink-deep);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pg-qinggan-knot__cell .pg-qinggan-knot__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #7fc9c0, var(--accent-2)); color: #fff;
}
.pg-qinggan-knot__cell--gold .pg-qinggan-knot__face { background: linear-gradient(135deg, #f3dd9a, var(--gold)); color: #422006; }
.pg-qinggan-knot__cell.is-up { transform: translateY(-8px); }
.pg-qinggan-knot__ico { font-size: 36px; line-height: 1; }
.pg-qinggan-knot__cellname { margin-top: 6px; font-size: 16px; font-weight: 900; }
.pg-qinggan-knot__panelwrap { position: relative; perspective: 1400px; }
.pg-qinggan-knot__panelback { position: absolute; inset: 0; transform: translate(20px, 20px); border-radius: 32px; background: rgba(217, 180, 91, .4); }
.pg-qinggan-knot__panel { position: relative; border-radius: 32px; overflow: hidden; background: #fff; color: var(--ink);
  transform: rotateY(-8deg) rotateX(4deg); box-shadow: 0 12px 0 var(--edge), 0 50px 70px -20px rgba(0, 0, 0, .6); }
.pg-qinggan-knot__panelph { height: 240px; background: linear-gradient(135deg, #eaf6f4, var(--bg-2)); overflow: hidden; }
.pg-qinggan-knot__panelph img { width: 100%; height: 100%; object-fit: cover; }
.pg-qinggan-knot__panelbody { padding: 32px; }
.pg-qinggan-knot__paneltitle { font-size: 22px; font-weight: 900; margin: 0; }
.pg-qinggan-knot__paneldesc { margin: 12px 0 0; font-size: 15px; line-height: 2; color: var(--body); }

/* ===== 模块三：五阶梯 ===== */
.pg-qinggan-steps__lead { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.pg-qinggan-steps__grid { margin-top: 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.pg-qinggan-steps__bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; height: 340px; padding-right: 16px; }
.pg-qinggan-steps__bar { position: relative; flex: 1; border-radius: 20px 20px 0 0; border: none; cursor: pointer; font-size: 16px; font-weight: 900; transition: all .3s; }
.pg-qinggan-steps__bar .pg-qinggan-steps__emoji { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 30px; }
.pg-qinggan-steps__bar--1 { height: 30%; background: linear-gradient(to bottom, #bfe6df, var(--accent-2)); color: var(--ink);
  box-shadow: 2px 2px 0 var(--accent), 4px 4px 0 var(--accent), 6px 6px 0 var(--accent), 8px 8px 0 var(--accent), 10px 10px 0 var(--accent); }
.pg-qinggan-steps__bar--2 { height: 45%; background: linear-gradient(to bottom, #7fc9c0, var(--accent-2)); color: #fff;
  box-shadow: 2px 2px 0 var(--accent), 4px 4px 0 var(--accent), 6px 6px 0 var(--accent), 8px 8px 0 var(--accent), 10px 10px 0 var(--accent); }
.pg-qinggan-steps__bar--3 { height: 60%; background: linear-gradient(to bottom, var(--accent-2), var(--accent)); color: #fff;
  box-shadow: 2px 2px 0 var(--accent-deep), 4px 4px 0 var(--accent-deep), 6px 6px 0 var(--accent-deep), 8px 8px 0 var(--accent-deep), 10px 10px 0 var(--accent-deep); }
.pg-qinggan-steps__bar--4 { height: 76%; background: linear-gradient(to bottom, var(--accent), var(--accent-deep)); color: #fff;
  box-shadow: 2px 2px 0 var(--ink-deep), 4px 4px 0 var(--ink-deep), 6px 6px 0 var(--ink-deep), 8px 8px 0 var(--ink-deep), 10px 10px 0 var(--ink-deep); }
.pg-qinggan-steps__bar--5 { height: 92%; background: linear-gradient(to bottom, #e8cf8a, var(--gold)); color: #422006;
  box-shadow: 2px 2px 0 #a8842f, 4px 4px 0 #a8842f, 6px 6px 0 #a8842f, 8px 8px 0 #a8842f, 10px 10px 0 #a8842f; }
.pg-qinggan-steps__bar.is-on { outline: 4px solid var(--gold); outline-offset: 2px; }
.pg-qinggan-steps__base { height: 20px; margin-top: 12px; border-radius: 999px; background: rgba(2, 24, 22, .1); }
.pg-qinggan-steps__panelwrap { position: relative; perspective: 1400px; }
.pg-qinggan-steps__panelback { position: absolute; inset: 0; transform: translate(20px, 20px); border-radius: 30px; background: var(--bg-2); }
.pg-qinggan-steps__panel { position: relative; border-radius: 30px; overflow: hidden; background: #fff;
  transform: rotateY(-6deg); box-shadow: 0 40px 60px -20px rgba(2, 24, 22, .5); }
.pg-qinggan-steps__panelph { height: 180px; background: linear-gradient(135deg, #eaf6f4, var(--bg-2)); overflow: hidden; }
.pg-qinggan-steps__panelph img { width: 100%; height: 100%; object-fit: cover; }
.pg-qinggan-steps__panelbody { padding: 32px; }
.pg-qinggan-steps__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-qinggan-steps__paneltitle { font-size: 22px; font-weight: 900; margin: 0; color: var(--ink); }
.pg-qinggan-steps__paneltime { font-size: 12px; font-weight: 700; border-radius: 999px; background: #f3dd9a; color: #8a6208; padding: 4px 12px; white-space: nowrap; }
.pg-qinggan-steps__paneldesc { margin: 12px 0 0; font-size: 15px; line-height: 2; color: var(--body); }

/* ===== 模块四：认知翻转卡 ===== */
.pg-qinggan-flip { background: linear-gradient(to bottom, #fbf6e8, var(--bg)); }
.pg-qinggan-flip .pg-eyebrow { color: var(--gold-2); }
.pg-qinggan-flip .pg-head__num { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #3b2a06; box-shadow: 0 6px 0 #8a6208; }
.pg-qinggan-flip__lead { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.pg-qinggan-flip__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pg-qinggan-flip__card { height: 260px; perspective: 1100px; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.pg-qinggan-flip__inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.pg-qinggan-flip__card.is-flip .pg-qinggan-flip__inner { transform: rotateY(180deg); }
.pg-qinggan-flip__face { position: absolute; inset: 0; border-radius: 26px; padding: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pg-qinggan-flip__front { background: var(--ink-2); color: #fff; box-shadow: 0 10px 0 var(--ink-deep), 0 26px 36px -12px rgba(0, 0, 0, .5); }
.pg-qinggan-flip__back { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; transform: rotateY(180deg); box-shadow: 0 10px 0 var(--accent-deep); }
.pg-qinggan-flip__icon { font-size: 34px; line-height: 1; }
.pg-qinggan-flip__front .pg-qinggan-flip__icon { opacity: .7; }
.pg-qinggan-flip__back .pg-qinggan-flip__icon { color: var(--gold); }
.pg-qinggan-flip__text { margin: 16px 0 0; font-size: 17px; font-weight: 700; line-height: 1.8; }
.pg-qinggan-flip__hint { position: absolute; bottom: 20px; right: 24px; font-size: 12px; opacity: .6; }

/* ===== 模块五：时间线 ===== */
.pg-qinggan-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pg-qinggan-story__stage { position: relative; height: 460px; perspective: 1400px; }
.pg-qinggan-story__back { position: absolute; right: 0; top: 0; width: 82%; height: 78%; border-radius: 30px; background: #f0dca6; transform: rotateY(12deg) translateZ(-60px); }
.pg-qinggan-story__img {
  position: absolute; left: 0; bottom: 0; width: 88%; height: 82%; border-radius: 30px; overflow: hidden; border: 4px solid #fff;
  background: linear-gradient(135deg, #eaf6f4, var(--bg-2)); transform: rotateY(10deg) rotateX(4deg);
  box-shadow: -16px 24px 0 -4px var(--accent-2), 0 50px 70px -24px rgba(2, 24, 22, .6);
}
.pg-qinggan-story__img img { width: 100%; height: 100%; object-fit: cover; }
.pg-qinggan-story__note { margin: 8px 0 0; font-size: 13px; color: var(--accent-2); }
.pg-qinggan-story__timeline { position: relative; margin-top: 32px; padding-left: 40px; }
.pg-qinggan-story__line { position: absolute; left: 14px; top: 4px; bottom: 4px; width: 6px; border-radius: 999px;
  background: linear-gradient(to bottom, #cbd5d1, var(--accent-2) 50%, var(--gold)); }
.pg-qinggan-story__item { position: relative; }
.pg-qinggan-story__item + .pg-qinggan-story__item { margin-top: 28px; }
.pg-qinggan-story__dot { position: absolute; left: -40px; top: 2px; width: 32px; height: 32px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); }
.pg-qinggan-story__dot--1 { background: #cbd5d1; }
.pg-qinggan-story__dot--2 { background: var(--accent-2); }
.pg-qinggan-story__dot--3 { background: var(--gold); }
.pg-qinggan-story__when { font-size: 16px; font-weight: 900; color: #6b7b78; }
.pg-qinggan-story__when--2 { color: var(--accent-2); }
.pg-qinggan-story__when--3 { color: var(--gold-2); }
.pg-qinggan-story__text { margin: 4px 0 0; font-size: 15px; color: var(--body); line-height: 1.75; }
.pg-qinggan-story__more { margin-top: 32px; display: inline-flex; align-items: center; gap: 8px; border-radius: 16px;
  background: #fff; color: var(--accent); font-size: 15px; font-weight: 700; padding: 12px 24px; text-decoration: none;
  box-shadow: 0 6px 0 var(--edge); transition: transform .15s; }
.pg-qinggan-story__more:hover { transform: translateY(-2px); color: var(--accent); }