/* ============================================================
   通玄 · 问路页 start.css（st- 前缀）
   观星（暗夜蓝金）基调；袖中天由 theme-xiu token 自动适配，
   文件末尾集中少量 [data-theme="xiu"] 覆写。
   ============================================================ */

.st-hero { min-height: 46vh; }
.st-main { padding-bottom: 90px; }
.st-main .container { max-width: 980px; }

/* ---------------- 面包屑 ---------------- */
.st-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
  font-size: 13.5px;
}
.st-crumb-seg {
  padding: 6px 14px;
  border: 1px solid rgba(150, 114, 58, 0.4);
  border-radius: 999px;
  background: rgba(250, 247, 239, 0.75);
  color: var(--gold-700);
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.st-crumb-seg:hover:not(.is-here) { border-color: var(--gold-600); transform: translateY(-1px); }
.st-crumb-seg.is-here {
  color: var(--paper-ink);
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: #241a08;
  cursor: default;
}
.st-crumb-sep { color: var(--paper-ink-soft); }

/* ---------------- Step 1 · 意图三卡 ---------------- */
.st-intents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.st-intent {
  position: relative;
  padding: 30px 26px 26px;
  text-align: left;
  border: 1px solid rgba(44, 42, 36, 0.16);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper-50), var(--paper-100));
  box-shadow: 0 10px 26px rgba(44, 42, 36, 0.07);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.st-intent:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(44, 42, 36, 0.13); }
.st-intent-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 700;
  color: var(--gold-300);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(13, 20, 38, 0.35);
}
.st-intent-name {
  display: block;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--paper-ink);
}
.st-intent-ask {
  margin: 10px 0 0;
  font-size: 13.5px; line-height: 1.9;
  color: var(--paper-ink-soft);
  min-height: 3.6em;
}
.st-intent-eg {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(44, 42, 36, 0.14);
  font-size: 12px; line-height: 1.8; letter-spacing: 0.02em;
  color: var(--paper-ink-soft);
  opacity: 0.9;
}
.st-intent-go {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--gold-700);
  font-weight: 600;
}
.st-intent:hover .st-intent-go { text-decoration: underline; }

/* 动态节点自管入场（勿用 .reveal —— 动态插入不被 common.js IO 观察）。
   防御铁则：不设隐藏基线、无 fill —— 动画冻结/不支持时元素保持自然可见，
   最坏只是没有入场动画，绝不出现内容消失（2026-07-24 空白卡事故的教训）。 */
.st-in { animation: stIn 0.55s var(--ease-out); }
@keyframes stIn { from { opacity: 0; transform: translateY(12px); } }
.st-step.st-enter { animation: stStepIn 0.4s var(--ease-out); }
@keyframes stStepIn { from { opacity: 0; } }

/* 轻带（Step1 底部三链） */
.st-aside {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  font-size: 13px;
}
.st-aside a { color: var(--paper-ink-soft); transition: color 0.2s; }
.st-aside a:hover { color: var(--gold-700); }

/* ---------------- Step 2 · 场景卡 ---------------- */
.st-scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.st-scene {
  padding: 18px 22px;
  text-align: left;
  border: 1px solid rgba(44, 42, 36, 0.16);
  border-left: 3px solid rgba(150, 114, 58, 0.5);
  border-radius: var(--radius-md);
  background: rgba(250, 247, 239, 0.8);
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}
.st-scene:hover {
  transform: translateY(-3px);
  border-left-color: var(--gold-500);
  box-shadow: 0 10px 24px rgba(44, 42, 36, 0.1);
}
.st-scene b {
  display: block;
  font-family: var(--font-serif);
  font-size: 16.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--paper-ink);
}
.st-scene i {
  display: block; font-style: normal;
  margin-top: 5px;
  font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--paper-ink-soft);
}
.st-scene-art {
  display: block;
  margin-top: 9px;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--gold-700);
  font-weight: 600;
  opacity: 0.85;
}
.st-scene:hover .st-scene-art { opacity: 1; }

/* Step3 回路 */
.st-rec-back {
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--paper-ink-soft);
}
.st-back-link {
  padding: 6px 4px;
  color: var(--gold-700);
  font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s;
}
.st-back-link:hover { color: var(--paper-ink); text-decoration: underline; }

/* ---------------- Step 3 · 推荐 ---------------- */
.st-rec-main {
  display: block;
  padding: 26px 28px 24px;
  border: 1px solid rgba(150, 114, 58, 0.4);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(212, 175, 106, 0.12), transparent 55%),
    linear-gradient(180deg, var(--paper-50), var(--paper-100));
  box-shadow: 0 14px 34px rgba(44, 42, 36, 0.1);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.st-rec-main:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(44, 42, 36, 0.16); }
.st-rec-top { display: flex; align-items: center; gap: 14px; }
.st-rec-seal {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 700;
  color: var(--gold-300);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  border-radius: 14px;
}
.st-rec-seal-sm { width: 40px; height: 40px; font-size: 19px; border-radius: 10px; }
.st-rec-tt b {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--paper-ink);
}
.st-rec-tt i {
  display: block; font-style: normal;
  margin-top: 2px;
  font-size: 13.5px; letter-spacing: 0.04em;
  color: var(--gold-700);
  font-weight: 600;
}
.st-rec-top .badge { margin-left: auto; }
.st-rec-why {
  margin: 16px 0 0;
  font-size: 14.5px; line-height: 2;
  color: var(--paper-ink);
}
.st-rec-fits { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.st-fit {
  font-style: normal;
  padding: 4px 13px;
  border: 1px solid rgba(150, 114, 58, 0.4);
  border-radius: 999px;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--gold-700);
  background: rgba(212, 175, 106, 0.08);
}
.st-rec-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(44, 42, 36, 0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.st-rec-price { font-size: 13px; letter-spacing: 0.03em; color: var(--paper-ink-soft); }

.st-rec-alts { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.st-rec-alt, .st-rec-wanshu {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border: 1px solid rgba(44, 42, 36, 0.14);
  border-radius: var(--radius-md);
  background: rgba(250, 247, 239, 0.75);
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}
.st-rec-alt:hover, .st-rec-wanshu:hover { transform: translateY(-2px); border-color: var(--gold-500); }
.st-rec-alt b, .st-rec-wanshu b {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--paper-ink);
}
.st-rec-alt i, .st-rec-wanshu i {
  display: block; font-style: normal;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--paper-ink-soft);
}
.st-rec-alt-go {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12.5px; letter-spacing: 0.05em;
  color: var(--gold-700);
  font-weight: 600;
}
.st-rec-wanshu { margin-top: 14px; border-style: dashed; border-color: rgba(150, 114, 58, 0.45); }

.st-gift {
  margin-top: 30px;
  text-align: center;
  font-size: 13.5px; letter-spacing: 0.04em;
  color: var(--paper-ink-soft);
}
.st-gift b { color: var(--cinnabar); font-family: var(--font-serif); }
.st-gift a { color: var(--gold-700); font-weight: 600; }
.st-gift a:hover { text-decoration: underline; }

/* ---------------- 全部法门目录（arts.html 共用本表） ---------------- */
.st-hero-link { color: var(--gold-400); border-bottom: 1px dashed rgba(212, 175, 106, 0.5); }
.st-hero-link:hover { color: var(--gold-300); }
.st-cat + .st-cat { margin-top: 46px; }
.st-cat-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--paper-ink);
  margin: 0 0 18px;
}
.st-cat-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  font-size: 19px;
  color: var(--gold-300);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  border-radius: 10px;
}
.st-cat-title i {
  font-style: normal; font-weight: 400;
  font-size: 13px; letter-spacing: 0.05em;
  color: var(--paper-ink-soft);
}
.st-dir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.st-dir-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 20px 22px 18px;
  border: 1px solid rgba(44, 42, 36, 0.16);
  border-radius: var(--radius-md);
  background: rgba(250, 247, 239, 0.8);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s, border-color 0.28s;
}
.st-dir-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-500);
  box-shadow: 0 14px 30px rgba(44, 42, 36, 0.12);
}
.st-dir-card .st-rec-seal-sm { margin-bottom: 2px; }
.st-dir-tt b {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--paper-ink);
}
.st-dir-tt i {
  display: block; font-style: normal;
  margin-top: 2px;
  font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--gold-700);
  font-weight: 600;
}
.st-dir-card p {
  margin: 0;
  font-size: 12.5px; line-height: 1.8;
  color: var(--paper-ink-soft);
}
.st-dir-price {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--paper-ink-soft);
  opacity: 0.9;
}
.st-dir-flag { border-style: dashed; border-color: rgba(150, 114, 58, 0.5); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 860px) {
  .st-intents { grid-template-columns: 1fr; }
  .st-intent-ask { min-height: 0; }
}
@media (max-width: 900px) {
  .st-dir { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .st-scenes { grid-template-columns: 1fr; }
  .st-dir { grid-template-columns: 1fr; }
  .st-rec-top { flex-wrap: wrap; }
  .st-rec-top .badge { margin-left: 0; }
  .st-rec-foot { flex-direction: column; align-items: flex-start; }
  .st-rec-foot .btn { width: 100%; text-align: center; }
  .st-rec-alt-go { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .st-crumb-seg { padding-top: 9px; padding-bottom: 9px; }
  .st-scene { padding-top: 20px; padding-bottom: 20px; }
  .st-back-link { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-in { animation: none; opacity: 1; transform: none; }
  .st-step.st-enter { animation: none; }
}

/* ---------------- 袖中天覆写 ---------------- */
[data-theme="xiu"] .st-intent { border-top-color: var(--zi-500, #7f6fae); }
[data-theme="xiu"] .st-intent-seal,
[data-theme="xiu"] .st-rec-seal {
  color: var(--zi-300, #b3a5d6);
  background: linear-gradient(150deg, #3a3354, #241a3a);
}
[data-theme="xiu"] .st-rec-main { border-top-color: var(--zi-500, #7f6fae); }
[data-theme="xiu"] .st-rec-tt i, [data-theme="xiu"] .st-fit,
[data-theme="xiu"] .st-rec-alt-go, [data-theme="xiu"] .st-gift a,
[data-theme="xiu"] .st-intent-go { color: #6b5b96; }
[data-theme="xiu"] .st-fit { border-color: rgba(127, 111, 174, 0.4); background: rgba(127, 111, 174, 0.08); }
[data-theme="xiu"] .st-crumb-seg { color: #6b5b96; border-color: rgba(127, 111, 174, 0.4); }
[data-theme="xiu"] .st-crumb-seg.is-here { background: linear-gradient(135deg, #b3a5d6, #8f7fbd); color: #241a3a; }
[data-theme="xiu"] .st-scene-art, [data-theme="xiu"] .st-back-link { color: #6b5b96; }