/* =========================================================================
 * components.css — 组件层
 * 依赖：tokens.css, base.css
 * 所有组件仅使用 var(--token)
 * ====================================================================== */

/* =========================================================================
 * 1. 磨砂卡片（渐变柔光边框）
 * ====================================================================== */
.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  box-shadow: var(--sh-2);
  padding: var(--sp-6);
}
/* 渐变柔光边框：用 mask 只留 1px 描边 */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-hair);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card--flush { padding: 0; }
.card--tight { padding: var(--sp-4) var(--sp-5); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.card__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--c-xuanhei);
  display: flex; align-items: center; gap: var(--sp-2);
}
.card__title::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-liujin), var(--c-liujin-deep));
  flex: none;
}
.card__hint { font-size: var(--fs-12); color: var(--tx-tertiary); }
.card__desc { font-size: var(--fs-12); color: var(--tx-tertiary); margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-5); }

/* =========================================================================
 * 2. 按钮
 * ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-ctrl);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

/* 主按钮：黛青实底 */
.btn--primary {
  background: linear-gradient(140deg, var(--c-daiqing), var(--c-daiqing-deep));
  color: var(--tx-inverse);
  box-shadow: var(--sh-2);
}
.btn--primary:hover:not(:disabled) { box-shadow: var(--sh-3); }

/* 强调按钮：鎏金 */
.btn--gold {
  background: linear-gradient(140deg, var(--c-liujin-soft), var(--c-liujin));
  color: #46350f;
  box-shadow: var(--sh-1);
}
.btn--gold:hover:not(:disabled) { box-shadow: var(--sh-2); }

/* 次级按钮：描边 */
.btn--ghost {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--line-soft);
  color: var(--tx-secondary);
}
.btn--ghost:hover:not(:disabled) { background: #fff; border-color: var(--line-strong); color: var(--c-xuanhei); }

/* 纯文字按钮 */
.btn--text {
  height: auto;
  padding: var(--sp-1) var(--sp-2);
  color: var(--tx-tertiary);
  font-weight: var(--fw-normal);
}
.btn--text:hover:not(:disabled) { color: var(--c-daiqing); }

/* 危险（删除） */
.btn--danger { color: var(--c-ji); }
.btn--danger:hover:not(:disabled) { background: rgba(168, 68, 58, 0.08); }

/* 尺寸 */
.btn--sm { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-12); border-radius: var(--r-xs); }
.btn--lg { height: 40px; padding: 0 var(--sp-6); font-size: var(--fs-14); }
.btn--block { width: 100%; }

/* =========================================================================
 * 3. 表单控件
 * ====================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field__label {
  font-size: var(--fs-12);
  color: var(--tx-secondary);
  letter-spacing: var(--ls-base);
  display: flex; align-items: center; gap: var(--sp-2);
}
.field__label-req { color: var(--c-ji); }
.field__hint { font-size: var(--fs-11); color: var(--tx-tertiary); }
.field__error { font-size: var(--fs-11); color: var(--c-ji); }

.input, .select, .textarea {
  height: var(--h-ctrl);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-13);
  color: var(--c-xuanhei);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  width: 100%;
  min-width: 0;
}
.input::placeholder, .textarea::placeholder { color: var(--tx-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-liujin);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}
.textarea {
  height: auto;
  min-height: 72px;
  padding: var(--sp-3);
  line-height: var(--lh-base);
  resize: vertical;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8a92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  cursor: pointer;
}

/* 数字/等宽输入 */
.input--mono { font-family: var(--ff-mono); letter-spacing: 0.02em; }

/* 表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ---------- 分段切换（农历/公历、性别） ---------- */
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  border: 1px solid var(--line-hair);
  height: var(--h-ctrl);
  width: 100%;
}
.seg__btn {
  flex: 1;
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
  color: var(--tx-secondary);
  transition: all var(--dur-fast) var(--ease-out);
  padding: 0 var(--sp-3);
  white-space: nowrap;
}
.seg__btn:hover { color: var(--c-xuanhei); }
.seg__btn[aria-pressed="true"] {
  background: #fff;
  color: var(--c-daiqing-deep);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-1);
}

/* ---------- 开关 ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  width: 34px; height: 19px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--line-soft);
  transition: background var(--dur-base) var(--ease-out);
}
.switch__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--c-daiqing); }
.switch input:checked + .switch__track::after { transform: translateX(15px); }
.switch__text { font-size: var(--fs-13); color: var(--tx-secondary); }

/* =========================================================================
 * 4. 标签 / 状态
 * ====================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: currentColor; }

.tag--ok    { color: var(--c-ok);      background: rgba(74, 124, 89, 0.09);   border-color: rgba(74, 124, 89, 0.22); }
.tag--warn  { color: var(--c-warn);    background: rgba(184, 134, 59, 0.10);  border-color: rgba(184, 134, 59, 0.26); }
.tag--fail  { color: var(--c-ji);      background: rgba(168, 68, 58, 0.09);   border-color: rgba(168, 68, 58, 0.24); }
.tag--idle  { color: var(--tx-tertiary); background: var(--bg-inset);         border-color: var(--line-hair); }
.tag--gold  { color: var(--tx-gold);   background: rgba(201, 169, 97, 0.13); border-color: var(--line-gold); }
.tag--plain { color: var(--tx-secondary); background: rgba(255,255,255,0.6); border-color: var(--line-hair); }

/* 关键词高亮 */
.kw {
  font-weight: var(--fw-medium);
  color: var(--c-xuanhei);
  background: linear-gradient(180deg, transparent 62%, rgba(201, 169, 97, 0.30) 62%);
  padding: 0 1px;
}
.kw--ji    { color: var(--c-ji);    background: linear-gradient(180deg, transparent 62%, rgba(168, 68, 58, 0.16) 62%); }
.kw--xiong { color: var(--c-xiong); background: linear-gradient(180deg, transparent 62%, rgba(92, 107, 115, 0.18) 62%); }
.kw--good  { color: var(--c-ok);    background: linear-gradient(180deg, transparent 62%, rgba(74, 124, 89, 0.16) 62%); }

/* =========================================================================
 * 5. 排盘表 / 数据展示
 * ====================================================================== */
/* 四柱盘 */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.pillar {
  border-radius: var(--r-md);
  border: 1px solid var(--line-hair);
  background: rgba(255, 255, 255, 0.5);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pillar:hover { border-color: var(--line-gold); box-shadow: var(--sh-1); }
.pillar--day { border-color: var(--line-gold); background: rgba(201, 169, 97, 0.06); }
.pillar__label {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  color: var(--tx-tertiary);
}
.pillar__gan, .pillar__zhi {
  font-family: var(--ff-serif);
  font-size: var(--fs-28);
  line-height: 1.1;
  color: var(--c-xuanhei);
  font-weight: var(--fw-semibold);
}
.pillar__wuxing { font-size: var(--fs-11); color: var(--tx-tertiary); letter-spacing: var(--ls-base); }
.pillar__shishen {
  font-size: var(--fs-12);
  color: var(--c-daiqing);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line-hair);
}
.pillar__cang {
  font-size: var(--fs-11);
  color: var(--tx-tertiary);
  font-family: var(--ff-serif);
  letter-spacing: var(--ls-base);
}

/* 数据行（键值对） */
.kv { display: flex; flex-direction: column; gap: 0; }
.kv__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--line-hair);
  font-size: var(--fs-13);
  align-items: baseline;
}
.kv__row:last-child { border-bottom: none; }
.kv__k { color: var(--tx-tertiary); font-size: var(--fs-12); }
.kv__v { color: var(--c-xuanhei); min-width: 0; }

/* 数据卡网格 */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-3);
}
.metric {
  border-radius: var(--r-md);
  border: 1px solid var(--line-hair);
  background: rgba(255, 255, 255, 0.46);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.metric__k { font-size: var(--fs-11); letter-spacing: var(--ls-wide); color: var(--tx-tertiary); }
.metric__v {
  font-family: var(--ff-serif);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-xuanhei);
  line-height: var(--lh-tight);
}
.metric__sub { font-size: var(--fs-11); color: var(--tx-tertiary); }

/* 五行条形 */
.wuxing-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.wxbar { display: grid; grid-template-columns: 34px 1fr 46px; gap: var(--sp-3); align-items: center; }
.wxbar__name { font-family: var(--ff-serif); font-size: var(--fs-14); color: var(--c-xuanhei); }
.wxbar__track { height: 7px; border-radius: var(--r-full); background: var(--bg-inset); overflow: hidden; }
.wxbar__fill { height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out); }
.wxbar__val { font-family: var(--ff-mono); font-size: var(--fs-11); color: var(--tx-tertiary); text-align: right; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--tx-tertiary);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px dashed var(--line-hair);
  color: var(--c-xuanhei);
  vertical-align: top;
}
.table tbody tr:hover { background: var(--bg-inset); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--ff-mono); font-size: var(--fs-12); color: var(--tx-secondary); }

/* =========================================================================
 * 6. 结果分层排版
 * 标题 → 核心总结 → 详细解读 → 运势分析 → 专属建议
 * ====================================================================== */
.result { display: flex; flex-direction: column; gap: var(--sp-5); }

.rsec { display: flex; flex-direction: column; gap: var(--sp-3); }
.rsec__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wider);
  color: var(--c-liujin-deep);
}
.rsec__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), transparent);
}
.rsec__body {
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--tx-primary);
}
.rsec__body p + p { margin-top: var(--sp-3); }
.rsec__body strong { color: var(--c-xuanhei); font-weight: var(--fw-semibold); }

/* 核心总结（第一层） */
.rsum {
  border-radius: var(--r-md);
  border: 1px solid var(--line-gold);
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.09), rgba(47, 79, 95, 0.045));
  padding: var(--sp-5);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--c-xuanhei);
}

/* 关键词条（3-5 个核心特质） */
.kwlist { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kwlist__item {
  display: inline-flex; align-items: center;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  background: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-12);
  color: var(--tx-gold);
  letter-spacing: var(--ls-base);
}

/* 断语对照条 */
.saying {
  border-left: 2px solid var(--line-gold);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  font-family: var(--ff-serif);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--c-xuanhei);
  letter-spacing: var(--ls-base);
}
.saying__src { display: block; margin-top: var(--sp-1); font-family: var(--ff-sans); font-size: var(--fs-11); color: var(--tx-tertiary); letter-spacing: var(--ls-base); }

/* 建议条目 */
.tips { display: flex; flex-direction: column; gap: var(--sp-3); }
.tip {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--tx-primary);
}
.tip__mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-11);
  font-family: var(--ff-mono);
  background: rgba(201, 169, 97, 0.16);
  color: var(--tx-gold);
  flex: none;
  margin-top: 1px;
}
.tip__title { font-weight: var(--fw-medium); color: var(--c-xuanhei); }
.tip__desc { color: var(--tx-secondary); font-size: var(--fs-12); }

/* =========================================================================
 * 7. 档案（命盘）列表
 * ====================================================================== */
.archive { display: flex; flex-direction: column; gap: var(--sp-2); }
.archive__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-hair);
  background: rgba(255, 255, 255, 0.44);
  transition: all var(--dur-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}
.archive__item:hover { border-color: var(--line-soft); background: #fff; }
.archive__item.is-active {
  border-color: var(--line-gold);
  background: rgba(201, 169, 97, 0.07);
  box-shadow: var(--sh-1);
}
.archive__avatar {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--ff-serif);
  font-size: var(--fs-14);
  background: linear-gradient(140deg, var(--c-daiqing-soft), var(--c-daiqing));
  color: var(--c-liujin-soft);
}
.archive__body { flex: 1; min-width: 0; }
.archive__name {
  font-size: var(--fs-13);
  color: var(--c-xuanhei);
  font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive__meta {
  font-size: var(--fs-11);
  color: var(--tx-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--ff-mono);
}
.archive__act { flex: none; display: flex; gap: var(--sp-1); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.archive__item:hover .archive__act { opacity: 1; }

/* 空状态 */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--tx-tertiary);
}
.empty__mark {
  font-family: var(--ff-serif);
  font-size: var(--fs-28);
  color: var(--line-strong);
  line-height: 1;
}
.empty__text { font-size: var(--fs-13); }
.empty__sub { font-size: var(--fs-12); color: var(--tx-tertiary); max-width: 44ch; line-height: var(--lh-base); }

/* =========================================================================
 * 8. 分区 Tab（结果 / 提问）
 * ====================================================================== */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line-hair);
  margin-bottom: var(--sp-5);
}
.tabs__btn {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-13);
  color: var(--tx-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
  margin-bottom: -1px;
}
.tabs__btn:hover { color: var(--c-xuanhei); }
.tabs__btn[aria-selected="true"] { color: var(--c-daiqing-deep); font-weight: var(--fw-medium); }
.tabs__btn[aria-selected="true"]::after {
  content: "";
  position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--c-liujin), var(--c-liujin-deep));
}
.tabpane { display: none; }
.tabpane.is-active { display: block; }

/* =========================================================================
 * 9. 提问（对话）
 * ====================================================================== */
.ask { display: flex; flex-direction: column; gap: var(--sp-4); }
.ask__log { display: flex; flex-direction: column; gap: var(--sp-4); }
.ask__turn { display: flex; flex-direction: column; gap: var(--sp-2); }
.ask__who {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  color: var(--tx-tertiary);
}
.ask__q {
  font-size: var(--fs-13);
  color: var(--c-xuanhei);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  background: rgba(47, 79, 95, 0.055);
  border: 1px solid var(--line-hair);
  align-self: flex-start;
  max-width: 80%;
  line-height: var(--lh-base);
}
.ask__a {
  font-size: var(--fs-13);
  color: var(--tx-primary);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--line-gold);
  line-height: var(--lh-loose);
  max-width: 92%;
}
.ask__a .rsec__body { font-size: var(--fs-13); }
.ask__form { display: flex; gap: var(--sp-3); align-items: flex-end; }
.ask__form .textarea { min-height: 44px; max-height: 140px; }
.ask__suggest { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ask__suggest .btn--ghost { height: 26px; font-size: var(--fs-12); border-radius: var(--r-full); color: var(--tx-secondary); }

/* =========================================================================
 * 10. 工具条 / 分隔
 * ====================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.toolbar--end { justify-content: flex-end; }
.toolbar__spacer { flex: 1; }

.hr {
  height: 1px;
  border: none;
  background: var(--grad-divider);
  margin: 0;
}

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm{ display: flex; flex-direction: column; gap: var(--sp-2); }
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.row--wrap { flex-wrap: wrap; }
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

@media (max-width: 1080px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-5 { grid-column: span 6; }
}
@media (max-width: 820px) {
  .card { padding: var(--sp-5); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-8 { grid-column: span 12; }
  .ask__suggest { display: none; }
}

/* 打印 */
@media print {
  .nav, .topbar, .brand, .toolbar { display: none !important; }
  .app { display: block; height: auto; }
  body { overflow: auto; background: #fff; }
  .card { box-shadow: none; background: #fff; }
}

/* =========================================================================
 * v6 玄学风增强层（2026-09-11 · ui-pipeline: taste V3/D3/M2 + uupm Flat 原则）
 * 设计裁决：
 *   · 可读性第一：页面主体保持浅色暖纸白；神秘感由「深玄青氛围带」（导航/顶栏）
 *     与细线玄学纹样承载，暗色绝不铺满全页、绝不进入正文卡片
 *   · 平面四原则：亲密性（rsec 分组卡片化）、对比（金色小标签 vs 深色大正文）、
 *     重复（统一表格/kv/tip 组件）、对齐（统一左对齐栅格）
 *   · 动效：150-250ms 过渡，hover 微光，prefers-reduced-motion 守卫
 * ====================================================================== */

/* ---------- 氛围带：顶栏 + 导航条（深玄青，神秘感载体） ---------- */
.topbar, .nav {
  background: linear-gradient(135deg, #1e3540 0%, #16242e 100%);
  border-color: rgba(201, 169, 97, 0.18);
}
.topbar { box-shadow: 0 1px 0 rgba(201, 169, 97, 0.14); }
.brand { background: transparent; border-right: 1px solid rgba(201, 169, 97, 0.16); }
.brand__mark {
  background: rgba(201, 169, 97, 0.12);
  color: var(--c-liujin);
  box-shadow: 0 0 12px rgba(201, 169, 97, 0.18);
}
.brand__name { color: var(--c-yuebai); text-shadow: 0 0 10px rgba(201, 169, 97, 0.22); }
.castline__empty, .castline__meta, .castline__name { color: #b8c8d2; }
.castline__name { color: var(--c-yuebai); }
.topbar .btn--ghost, .nav .btn--ghost { color: #b8c8d2; border-color: rgba(201, 169, 97, 0.25); }
.topbar .btn--ghost:hover, .nav .btn--ghost:hover { color: var(--c-liujin-soft); border-color: rgba(201, 169, 97, 0.5); }

/* 氛围带内的字色/功能色重定义（保证暗底对比度） */
.topbar, .nav { --tx-tertiary: #9db2c0; --c-ok: #7fc49e; --c-ji: #e08a80; --c-warn: #e2c07f; }
.nav__label { color: rgba(201, 169, 97, 0.75); }
.nav__item { color: #b8c8d2; }
.nav__item:hover { color: var(--c-liujin-soft); background: rgba(201, 169, 97, 0.08); }
.nav__item[aria-current="page"] { color: var(--c-liujin); background: rgba(201, 169, 97, 0.10); }
.nav__item[aria-current="page"]::before { background: linear-gradient(90deg, var(--c-liujin), var(--c-liujin-deep)); }
.nav__idx { color: rgba(184, 200, 210, 0.6); }
.nav__item[aria-current="page"] .nav__idx { color: var(--c-liujin); }
.nav__gua { color: #8fb3c7; }
.nav__item:hover .nav__gua { color: var(--c-liujin-soft); }
.nav__item[aria-current="page"] .nav__gua { color: var(--c-liujin); }
.nav__foot { color: #9db2c0; border-left-color: rgba(201, 169, 97, 0.16); }
.nav__item.is-active { color: var(--c-liujin); }

/* ---------- 页面底纹：暖纸白 + 极淡玄学纹样（角落卦纹 4~5%，不进内容区） ---------- */
body::before {
  background-image:
    /* 角落八卦放射细线（仅左上/右下角，4.5%） */
    repeating-conic-gradient(from 11.25deg at 0% 0%, rgba(47, 79, 95, 0.045) 0deg 1.2deg, transparent 1.2deg 45deg),
    repeating-conic-gradient(from 11.25deg at 100% 100%, rgba(201, 169, 97, 0.05) 0deg 1.2deg, transparent 1.2deg 45deg),
    /* 太极径向微光（两角，极淡） */
    radial-gradient(420px 420px at 0% 0%, rgba(47, 79, 95, 0.05), transparent 70%),
    radial-gradient(420px 420px at 100% 100%, rgba(201, 169, 97, 0.06), transparent 70%),
    /* 回纹网格（保留回滚点意象） */
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(47, 79, 95, 0.022) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(47, 79, 95, 0.022) 23px 24px);
  opacity: 0.75;
}

/* ---------- 卡片：顶部细鎏金线 + 角落卦纹垫底（文字层之下） ---------- */
.card { border-top: 2px solid rgba(201, 169, 97, 0.35); }
.card > * { position: relative; z-index: 1; }
.card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 96px; height: 96px;
  border-bottom-left-radius: var(--r-lg);
  background:
    repeating-conic-gradient(from 11.25deg at 100% 0%,
      rgba(47, 79, 95, 0.05) 0deg 1.2deg, transparent 1.2deg 45deg),
    radial-gradient(circle at 100% 0%, transparent 30%, rgba(201, 169, 97, 0.06) 30.4%, transparent 31.6%);
  pointer-events: none;
}

/* ---------- 四原则 · 对比与亲密性：解读段落重组 ---------- */
/* 段落 = 分组卡片：金色小标签（对比）+ 组内留白收紧、组间留白放大（亲密性） */
.rsec {
  background: rgba(253, 252, 250, 0.6);
  border: 1px solid var(--line-hair);
  border-left: 3px solid rgba(201, 169, 97, 0.45);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.rsec__label {
  font-size: var(--fs-12);
  color: var(--c-liujin-deep);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-hair);
}
.rsec__body { font-size: var(--fs-14); line-height: 1.85; }
.rsec__body p { margin-bottom: var(--sp-3); }
.rsec__body p:last-child { margin-bottom: 0; }

/* 开篇白话框（三句话看懂）：与正式解读形成材质对比 */
.plainbox {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.10), rgba(201, 169, 97, 0.03));
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.plainline { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0 0 var(--sp-3) !important; }
.plainline:last-child { margin-bottom: 0 !important; }
.plainno {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-daiqing);
  color: var(--c-yuebai);
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
}
.plainline { font-size: var(--fs-14); color: var(--tx-primary); line-height: 1.8; }

/* 显著特征网格：重复（统一卡片）+ 对齐（等宽栅格） */
.featgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.featcard {
  background: var(--bg-panel-solid);
  border: 1px solid var(--line-hair);
  border-left: 3px solid var(--c-daiqing);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}
.featcard__t { font-weight: var(--fw-semibold); color: var(--c-daiqing-deep); margin-bottom: var(--sp-2); font-size: var(--fs-13); }
.featcard__d { color: var(--tx-secondary); font-size: var(--fs-13); line-height: 1.8; }

/* ---------- 动效守卫 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- 十二宫强弱推演条（纯数据推导可视化） ---------- */
.strengthbars { margin-top: var(--sp-4); }
.strengthbars .wxbar { margin-bottom: var(--sp-2); }
.featcard__ev {
  font-size: var(--fs-11);
  color: var(--tx-tertiary);
  font-family: var(--ff-mono);
  background: rgba(47, 79, 95, 0.045);
  border-left: 2px solid rgba(201, 169, 97, 0.35);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: var(--sp-2);
}

/* =========================================================================
 * v9 · 首页 Hero Banner（暗色电影感 · 视频底）+ 各分区宣传语
 * 参考规格：全出血视频底 / 底部渐隐 / 左列排版几何 / 入场 stagger / 150-250ms
 * 适配裁决：文案换成本站 slogan（楷体大字）；底部渐隐收进深玄青（衔接下方浅色内容）；
 *          视频加载失败自动回退为深色渐变底，不影响可读性。
 * ====================================================================== */
.hero {
  position: relative;
  height: calc(100vh - var(--h-top) - 44px);
  min-height: 560px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 70% 30%, rgba(42, 112, 184, 0.16), transparent 65%),
    linear-gradient(160deg, #101b26 0%, #05070a 70%);
  margin-bottom: var(--sp-6);
}
.hero__plate {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__video {
  position: absolute;
  left: 50%; top: 0;
  width: calc(1492 * (100% / 1440)); height: 100%;
  min-width: 100%;
  transform: translateX(-50%);
  object-fit: cover;
}
/* 底部渐隐（收进深玄青）+ 侧遮幅，均按参考规格的双渐变结构 */
.hero__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5, 7, 10, 0) 62%, rgba(5, 7, 10, 0.30) 76%,
      rgba(5, 7, 10, 0.66) 88%, rgba(22, 36, 46, 0.94) 97%, rgba(22, 36, 46, 1) 100%),
    linear-gradient(to right,
      rgba(5, 7, 10, 0.82) 0%, rgba(5, 7, 10, 0) 26%,
      rgba(5, 7, 10, 0) 74%, rgba(5, 7, 10, 0.72) 100%);
}
.hero__inner {
  position: absolute;
  left: clamp(var(--sp-6), 5%, 75px);
  right: clamp(var(--sp-6), 5%, 75px);
  bottom: clamp(56px, 12%, 120px);
  z-index: 2;
}
.hero__kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  color: rgba(201, 169, 97, 0.85);
  margin-bottom: var(--sp-4);
}
.hero__headline {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(30px, calc(var(--fs-28) * 1.9), 58px);
  line-height: 1.28;
  color: #fafafa;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  margin: 0 0 var(--sp-5);
}
.hero__headline span { display: block; }
.hero__sub {
  font-size: var(--fs-16);
  line-height: 1.9;
  color: rgba(233, 238, 244, 0.82);
  margin: 0 0 var(--sp-6);
}
.hero__sub span { display: block; }
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero__actions .btn--primary {
  background: #ffffff;
  color: #05070a;
  border-color: transparent;
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
}
.hero__actions .btn--primary:hover { box-shadow: 0 0 26px rgba(255, 255, 255, 0.35); }
.hero__actions .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  border-radius: var(--r-full);
}
.hero__actions .btn--ghost:hover { color: var(--c-liujin); border-color: rgba(201, 169, 97, 0.6); }
.hero__scrollhint {
  position: absolute;
  right: clamp(var(--sp-5), 4%, 60px);
  bottom: var(--sp-5);
  z-index: 2;
  color: rgba(233, 238, 244, 0.55);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__scrollline {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(233, 238, 244, 0.6), transparent);
}
/* 入场 stagger（仅加载一次；尊重减弱动效） */
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero__kicker   { animation: heroRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__headline { animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
.hero__sub      { animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }
.hero__actions  { animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.hero__scrollhint { animation: heroFade 1.1s ease 0.4s both; }
/* 窄屏：文案收窄、视频聚焦人物 */
@media (max-width: 760px) {
  .hero { height: auto; min-height: 480px; }
  .hero__inner { position: relative; left: 0; right: 0; bottom: 0; padding: 120px var(--sp-5) var(--sp-6); }
  .hero__video { width: 100%; left: 0; transform: none; object-position: 43% center; }
  .hero__headline { font-size: 26px; }
  .hero__scrollhint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__kicker, .hero__headline, .hero__sub, .hero__actions, .hero__scrollhint { animation: none !important; opacity: 1 !important; }
}

/* ---------- 各分区宣传语（楷体 · 黛青底鎏金衬） ---------- */
.pagehead__slogan {
  margin-top: var(--sp-2);
  font-family: var(--ff-serif);
  font-size: var(--fs-16);
  color: var(--c-daiqing);
  letter-spacing: 0.06em;
}
.pagehead__slogan::before { content: '〖 '; color: var(--c-liujin-deep); }
.pagehead__slogan::after  { content: ' 〗'; color: var(--c-liujin-deep); }