/* ============================================================
   前台「智能页面导览」· 每个页面一句简短介绍
   完全独立的命名空间（pi-），不改动站内任何既有布局
   ============================================================ */
:is(#hnPageIntro, .pi-demo){
  --pi-accent:#8E2D22; --pi-gold:#C8A96A; --pi-paper:#FFFDF8;
  --pi-ink:#2B2622; --pi-sub:#8A7C6A; --pi-line:rgba(200,169,106,.34);
  --pi-w:340px; --pi-fs:14px; --pi-r:14px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
:is(#hnPageIntro, .pi-demo) *{ box-sizing:border-box }
:is(#hnPageIntro, .pi-demo) button{ font-family:inherit }

#hnPageIntro{
  /* 避开页头搜索框 / 咨询热线 / 导航条，落在内容区上方 */
  position:fixed; top:196px; right:24px; z-index:88; width:var(--pi-w);
  opacity:0; transform:translate(var(--pi-tx,0),-14px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,1.3,.4,1);
  pointer-events:none;
}
#hnPageIntro[hidden]{ display:none !important }
#hnPageIntro.is-in{ opacity:1; transform:translate(var(--pi-tx,0),0); pointer-events:auto }
#hnPageIntro.is-out{ opacity:0; transform:translate(var(--pi-tx,0),-12px); pointer-events:none }
#hnPageIntro[data-anim="0"]{ transition:none }
#hnPageIntro[data-pos="left"]{ left:24px; right:auto }
#hnPageIntro[data-pos="center"]{ left:50%; right:auto; --pi-tx:-50% }

/* 顶部轻提示：更窄更扁 */
#hnPageIntro[data-mode="toast"]{
  top:16px; left:50%; right:auto; --pi-tx:-50%;
  width:min(560px,calc(100vw - 24px));
}
#hnPageIntro[data-mode="toast"] .pi-card{ padding:10px 14px }
#hnPageIntro[data-mode="toast"] .pi-intro{ margin-top:5px }

/* 顶部横条：通栏、内部居中 */
#hnPageIntro[data-mode="bar"]{
  top:0; left:0; right:0; width:100%; --pi-tx:0; --pi-r:0;
}
#hnPageIntro[data-mode="bar"] .pi-card{
  border-radius:0; border-left:0; border-right:0; border-top:0;
  box-shadow:0 6px 18px rgba(52,35,20,.09);
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:14px; padding:9px 20px;
}
#hnPageIntro[data-mode="bar"] .pi-head{ flex:none }
#hnPageIntro[data-mode="bar"] .pi-intro{ margin:0; flex:1; min-width:0 }
#hnPageIntro[data-mode="bar"] .pi-foot{ margin:0; padding:0; border:0; flex:none }

/* ---------- 卡片 ---------- */
.pi-card{
  position:relative; background:var(--pi-paper); border:1px solid var(--pi-line);
  border-radius:var(--pi-r); padding:13px 15px 12px;
  box-shadow:0 14px 36px rgba(52,35,20,.15);
}
.pi-card::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--pi-gold),var(--pi-accent)); opacity:.85 }
.pi-head{ display:flex; align-items:center; gap:9px }
.pi-icon{ font-size:19px; line-height:1; flex:none }
.pi-titles{ display:flex; flex-direction:column; min-width:0; gap:1px }
.pi-kicker{ font-size:10.5px; letter-spacing:1.6px; color:var(--pi-sub); line-height:1.3 }
.pi-title{ font-size:14.5px; font-weight:700; color:var(--pi-accent); letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pi-speak,.pi-close{
  width:23px; height:23px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:rgba(120,100,70,.09); color:var(--pi-sub); font-size:12px; line-height:1; padding:0;
  transition:background .18s,color .18s,transform .18s;
}
.pi-speak{ margin-left:auto; font-size:11px }
.pi-speak:hover,.pi-close:hover{ background:var(--pi-accent); color:#fff; transform:scale(1.08) }
.pi-close{ font-size:16px }
.pi-intro{ margin:9px 0 0; font-size:var(--pi-fs); line-height:1.78;
  color:var(--pi-ink); letter-spacing:.2px; word-break:break-word }
.pi-foot{ margin-top:11px; padding-top:9px; border-top:1px dashed var(--pi-line);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pi-links{ display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0 }
.pi-links a{ font-size:11px; text-decoration:none; color:var(--pi-sub); padding:3px 8px;
  border-radius:99px; background:rgba(200,169,106,.12); border:1px solid transparent;
  white-space:nowrap; transition:.18s }
.pi-links a:hover{ color:var(--pi-accent); border-color:var(--pi-line) }
.pi-acts{ display:flex; gap:6px; align-items:center; flex:none }
.pi-ask,.pi-more{ font-size:11px; text-decoration:none; padding:5px 10px; border-radius:99px;
  cursor:pointer; white-space:nowrap; transition:.18s }
.pi-ask{ border:1px solid var(--pi-line); background:transparent; color:var(--pi-accent) }
.pi-ask:hover{ background:rgba(200,169,106,.16) }
.pi-more{ background:var(--pi-accent); color:#fff; border:1px solid var(--pi-accent) }
.pi-more:hover{ filter:brightness(1.12) }

/* ---------- 主题 ---------- */
:is(#hnPageIntro, .pi-demo)[data-theme="tech"]{
  --pi-accent:#1674A6; --pi-gold:#3FC4EE; --pi-paper:linear-gradient(160deg,#FFFFFF,#F3FAFF);
  --pi-ink:#1B2A38; --pi-sub:#7C90A2; --pi-line:rgba(48,158,205,.3) }
:is(#hnPageIntro, .pi-demo)[data-theme="tech"] .pi-links a{ background:rgba(35,160,215,.11) }
:is(#hnPageIntro, .pi-demo)[data-theme="jade"]{
  --pi-accent:#2F6350; --pi-gold:#7FAE90; --pi-paper:#F8FCF9; --pi-line:rgba(47,99,80,.26) }
:is(#hnPageIntro, .pi-demo)[data-theme="night"]{
  --pi-accent:#D9C49A; --pi-gold:#B79A63; --pi-paper:#22262E; --pi-ink:#F1ECE2;
  --pi-sub:#A9A296; --pi-line:rgba(183,154,99,.32) }
:is(#hnPageIntro, .pi-demo)[data-theme="night"] .pi-links a{ background:rgba(183,154,99,.14) }
:is(#hnPageIntro, .pi-demo)[data-theme="night"] .pi-speak,
:is(#hnPageIntro, .pi-demo)[data-theme="night"] .pi-close{ background:rgba(255,255,255,.1); color:#D8CBB2 }
:is(#hnPageIntro, .pi-demo)[data-theme="night"] .pi-more{ color:#22262E }
:is(#hnPageIntro, .pi-demo)[data-theme="plain"]{
  --pi-accent:#3B3B3B; --pi-gold:#B9B9B9; --pi-paper:#FFFFFF; --pi-line:rgba(0,0,0,.1) }

/* ---------- 后台实时预览 ---------- */
.pi-demo{ position:relative; top:auto; right:auto; left:auto; bottom:auto;
  width:100%; max-width:420px; margin:0 auto; opacity:1; transform:none; display:block }
.pi-demo .pi-speak,.pi-demo .pi-close,.pi-demo .pi-ask,.pi-demo .pi-more,
.pi-demo .pi-links a{ pointer-events:none }
.pi-demo-wrap{ position:relative; padding:18px; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#F7F3E9,#EFE6D3); border:1px solid #E3D3AE }
.pi-demo-wrap::after{ content:"前台效果预览"; position:absolute; top:8px; left:12px;
  font-size:11px; letter-spacing:1px; color:#9A8762 }
/* 后台预览里也能看出四种形态的差异 */
.pi-demo[data-mode="toast"] .pi-card{ padding:9px 13px }
.pi-demo[data-mode="toast"] .pi-intro{ margin-top:5px }
.pi-demo[data-mode="bar"] .pi-card{ display:flex; align-items:center; gap:10px; border-radius:0 }
.pi-demo[data-mode="bar"] .pi-intro{ margin:0; flex:1 }
.pi-demo[data-mode="bar"] .pi-foot{ margin:0; padding:0; border:0 }
.pi-demo[data-mode="guide"]{ opacity:.42; filter:grayscale(.6) }

/* ---------- 响应式 ---------- */
@media (max-width:767px){
  #hnPageIntro{ top:12px; left:12px; right:12px; width:auto; --pi-tx:0 }
  #hnPageIntro[data-pos="center"]{ left:12px; --pi-tx:0 }
  #hnPageIntro[data-mode="toast"]{ top:10px; left:10px; right:10px; width:auto; --pi-tx:0 }
  .pi-card{ padding:10px 12px }
  .pi-intro{ font-size:calc(var(--pi-fs) - 1px) }
  /* 手机端更紧凑：相关链接收起，只保留介绍与两个按钮 */
  #hnPageIntro .pi-links{ display:none }
  #hnPageIntro .pi-foot{ margin-top:8px; padding-top:7px }
  #hnPageIntro .pi-ask,#hnPageIntro .pi-more{ font-size:10.5px; padding:4px 9px }
  #hnPageIntro[data-mode="bar"] .pi-card{ flex-wrap:wrap; gap:6px; padding:8px 12px }
  #hnPageIntro[data-mode="bar"] .pi-foot{ display:none }
  .pi-links a{ font-size:10.5px }
}
@media (prefers-reduced-motion:reduce){
  #hnPageIntro{ transition:opacity .2s ease }
  #hnPageIntro.is-in,#hnPageIntro.is-out{ transform:translate(var(--pi-tx,0),0) }
}
@media print{ #hnPageIntro{ display:none !important } }