/*
 * 样例页专用样式（夜空之镜）。
 *
 * 刻意不复用 /styles.css：四份付费样例是从生产机取回的自包含 HTML，各带一套内联样式（纸面亮色，
 * 与付费报告一致，不改）。这里只补「统一横幅 + 索引页 + 免费档样例」三块，自带一份令牌副本
 * （值取自 docs/superpowers/specs/2026-09-07-night-sky-ui-design.md §2.1），与站内主样式表解耦。
 */

:root {
  --sky-900: #070B1A;
  --sky-800: #0D1330;
  --gold: #E8B04B;
  --gold-soft: #F3D48A;
  --gold-dim: rgba(232, 176, 75, .35);
  --ink: #E9E4D8;
  --ink-muted: #9A9BB0;
  --star: #F5F1E6;
  --glass: rgba(21, 29, 64, .55);
  --hairline: rgba(233, 228, 216, .1);
  --glow-1: 0 0 6px rgba(232, 176, 75, .35);
  --glow-2: 0 0 14px rgba(232, 176, 75, .55);
  --glow-3: 0 0 28px rgba(232, 176, 75, .7), 0 0 60px rgba(232, 176, 75, .25);
  --radius-card: 20px;
  --radius-pill: 999px;
  --font-display: Georgia, "Songti SC", "SimSun", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 统一横幅（注入到每份样例顶部；付费样例正文是纸面，横幅是一条夜色） ---------- */

.sample-banner {
  background: var(--sky-900);
  border-bottom: 1px solid var(--gold-dim);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.8;
  padding: 14px 20px;
  margin: 0 0 8px;
  text-align: center;
}

.sample-banner-text { margin: 0 0 8px; font-weight: 600; }

.sample-banner-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  align-items: center;
}

.sample-banner a { color: var(--gold-soft); text-decoration: none; font-size: 13px; }
.sample-banner a:hover { text-decoration: underline; }

.sample-banner-buy {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1A1406 !important;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-weight: 600;
  box-shadow: var(--glow-1);
}

/* ---------- 页面骨架（索引页与免费档样例共用） ---------- */

body.sample-page {
  margin: 0;
  padding: 0 0 72px;
  background: var(--sky-900);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.9;
}
body.sample-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 28%, rgba(232, 176, 75, .10), transparent 70%),
    radial-gradient(50% 42% at 12% 78%, rgba(127, 166, 255, .09), transparent 70%),
    var(--sky-900);
}

.sample-sheet { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.sample-head { padding: 32px 0 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 24px; }

.sample-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--gold-soft);
}

.sample-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--star);
}

.sample-lede { margin: 0; color: var(--ink-muted); font-size: 15px; }

.sample-block { margin: 0 0 34px; }

.sample-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--star);
}

.sample-note { font-size: 13px; color: var(--ink-muted); margin: 0 0 16px; }

.sample-caption { font-size: 13px; color: var(--ink-muted); text-align: center; margin: 10px 0 0; }

.sample-next { font-size: 13.5px; color: var(--ink-muted); margin: 0; }
.sample-next a { color: var(--gold-soft); }

.sample-foot { border-top: 1px solid var(--hairline); padding-top: 20px; font-size: 13px; color: var(--ink-muted); }
.sample-foot a { color: var(--gold-soft); }

/* ---------- 索引页：四档阶梯 ---------- */

.tier-list { display: grid; gap: 18px; margin: 0 0 34px; }

.tier-card {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 24px 22px;
}

.tier-card-featured {
  background: linear-gradient(170deg, rgba(232, 176, 75, .13), rgba(21, 29, 64, .6));
  border-color: var(--gold-dim);
  box-shadow: var(--glow-3);
}

.tier-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0 0 6px;
}

.tier-name { font-family: var(--font-display); font-size: 24px; margin: 0; font-weight: 500; color: var(--star); }

.tier-price {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gold-soft);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}

.tier-positioning { margin: 0 0 14px; font-size: 14px; color: var(--ink-muted); }

.tier-scale {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: rgba(7, 11, 26, .5);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 14px;
}

.tier-contains { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; color: var(--ink-muted); }
.tier-contains li { margin-bottom: 4px; }

.tier-links { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0; }

.tier-view {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1A1406;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--glow-1);
}

.tier-buy { color: var(--gold-soft); font-size: 13.5px; text-decoration: none; }
.tier-buy:hover, .tier-view:hover { text-decoration: underline; }

/* ---------- 免费档样例：星盘图 / 五星 / 方向 / 数据表 ---------- */

.wheel-figure { margin: 18px 0 34px; }

.wheel-holder {
  border-radius: 50%;
  padding: 10px;
  background: radial-gradient(circle, rgba(21, 29, 64, .9) 0%, rgba(13, 19, 48, .7) 58%, transparent 74%);
  box-shadow: var(--glow-3);
}

.wheel-holder svg { display: block; width: 100%; height: auto; }

.five-list { display: grid; gap: 12px; }

.star-card {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px 18px;
}

.star-head { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; }
.star-planet { font-family: var(--font-display); font-size: 20px; color: var(--star); }

.star-sign {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold-soft);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

.star-text { margin: 0; font-size: 14px; line-height: 1.85; }

.dir-list { display: grid; gap: 12px; margin-bottom: 18px; }

.dir-card {
  background: linear-gradient(160deg, rgba(232, 176, 75, .12), rgba(21, 29, 64, .55));
  border: 1px solid var(--gold-dim);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--glow-2);
}

.dir-index { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--gold-soft); }

.dir-question {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 4.2vw, 23px);
  line-height: 1.5;
  margin: 8px 0 12px;
  color: var(--star);
}

.dir-reasons { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }

.facts-body {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 14px 18px;
}

.facts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.facts-table th { text-align: left; color: var(--ink-muted); font-weight: 500; border-bottom: 1px solid var(--hairline); padding: 6px 4px; }
.facts-table td { padding: 6px 4px; border-bottom: 1px solid var(--hairline); }
.facts-heading { font-size: 14px; margin: 14px 0 8px; color: var(--ink); }
.facts-line { font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; }
.facts-aspects { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-muted); }
.facts-receipt { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.facts-receipt dt { font-weight: 500; color: var(--ink); }
.facts-receipt dd { margin: 0; }
.outline-list { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-muted); }
.outline-list li { margin: 6px 0; }
.outline-list strong { color: var(--ink); font-weight: 500; }
.outline-placements { display: block; font-size: 13px; }

/* 不让最后一行只剩一个字（Le）：段落按 pretty 断行，标题按 balance */
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.nowrap { white-space: nowrap; }