body[data-theme="light"]::before {
  background: linear-gradient(180deg, #edf0f5 0%, #f5f7fa 100%) !important;
}

/* 紫微标准排盘依据台与十二宫档案 · 2026.07.31-2 */
.zw-engine-ledger {
  position:relative;
  margin:0 0 26px;
  overflow:hidden;
  padding:26px;
  border:1px solid rgba(213,181,94,.3);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 8%,rgba(100,72,139,.19),transparent 28%),
    linear-gradient(135deg,rgba(17,31,40,.98),rgba(7,13,21,.98));
  box-shadow:0 24px 55px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025);
}
.zw-engine-ledger::before {
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:linear-gradient(rgba(219,188,98,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(219,188,98,.07) 1px,transparent 1px);
  background-size:42px 42px;
  content:"";
  pointer-events:none;
  mask-image:linear-gradient(90deg,#000,transparent 62%);
}
.zw-engine-ledger__head {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.zw-engine-ledger__head small {
  display:block;
  margin-bottom:7px;
  color:#d4b85f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.zw-engine-ledger__head h4 {
  margin:0;
  color:#f2ede2;
  font:700 clamp(20px,2.3vw,29px)/1.35 "STSong","Songti SC",serif;
  letter-spacing:.06em;
}
.zw-engine-ledger__head button {
  flex:none;
  padding:10px 16px;
  border:1px solid rgba(224,194,107,.38);
  border-radius:999px;
  background:rgba(214,177,73,.08);
  color:#e7cc7b;
  font:700 12px/1.2 "Microsoft YaHei UI","PingFang SC",sans-serif;
  cursor:pointer;
}
.zw-engine-ledger__head button:hover {
  border-color:rgba(234,207,128,.72);
  background:rgba(214,177,73,.15);
  transform:translateY(-1px);
}
.zw-engine-ledger__grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.zw-engine-ledger__grid article {
  min-width:0;
  padding:15px 14px;
  border:1px solid rgba(150,176,174,.15);
  border-radius:16px;
  background:rgba(2,10,16,.62);
}
.zw-engine-ledger__grid i {
  display:block;
  margin-bottom:12px;
  color:#b89943;
  font:700 10px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.12em;
}
.zw-engine-ledger__grid strong,.zw-engine-ledger__grid span { display:block; }
.zw-engine-ledger__grid strong {
  color:#e9e5dc;
  font-size:13px;
}
.zw-engine-ledger__grid span {
  margin-top:6px;
  color:#829597;
  font-size:11px;
  line-height:1.65;
}
.zw-engine-ledger > p {
  position:relative;
  z-index:1;
  margin:18px 0 0;
  color:#87999b;
  font-size:11px;
  line-height:1.8;
}
.zw-engine-ledger > p a {
  margin-left:8px;
  color:#d2b565;
  text-decoration:none;
}
.zw-engine-mini {
  width:max-content;
  margin:9px auto 0;
  padding:4px 9px;
  border:1px solid rgba(220,190,99,.24);
  border-radius:999px;
  color:#bda35b;
  font-size:9px;
  letter-spacing:.08em;
}
.zw-palace-archive {
  position:relative;
  margin:28px 0;
  overflow:hidden;
  padding:30px;
  border:1px solid rgba(213,181,94,.32);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 0,rgba(68,130,126,.14),transparent 30%),
    radial-gradient(circle at 92% 8%,rgba(116,77,151,.14),transparent 31%),
    linear-gradient(145deg,rgba(13,28,37,.98),rgba(5,13,21,.99));
  box-shadow:0 28px 65px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
}
.zw-palace-archive::before {
  position:absolute;
  top:-130px;
  right:-110px;
  width:360px;
  height:360px;
  border:1px solid rgba(215,183,95,.12);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(215,183,95,.025),0 0 0 86px rgba(215,183,95,.018);
  content:"";
  pointer-events:none;
}
.zw-palace-archive__head {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
}
.zw-palace-archive__head small {
  display:block;
  color:#d4b75e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
.zw-palace-archive__head h4 {
  margin:8px 0 6px;
  color:#f1ede4;
  font:700 clamp(23px,2.7vw,34px)/1.35 "STSong","Songti SC",serif;
  letter-spacing:.055em;
}
.zw-palace-archive__head p {
  max-width:690px;
  margin:0;
  color:#839598;
  font-size:12px;
  line-height:1.8;
}
.zw-palace-archive__head > span {
  flex:none;
  padding:10px 14px;
  border:1px solid rgba(218,187,99,.25);
  border-radius:14px;
  background:rgba(7,15,22,.65);
  color:#8fa0a2;
  font-size:10px;
  letter-spacing:.05em;
}
.zw-palace-archive__head > span b {
  margin-right:5px;
  color:#ebcf79;
  font:700 24px/1 Georgia,serif;
}
.zw-palace-archive__tabs {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-top:25px;
}
.zw-palace-archive__tabs button {
  min-width:0;
  padding:12px 8px 10px;
  border:1px solid rgba(145,171,171,.14);
  border-radius:13px;
  background:rgba(2,9,15,.62);
  color:#93a3a5;
  cursor:pointer;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.zw-palace-archive__tabs button:hover {
  border-color:rgba(220,190,101,.32);
  color:#e6dfcf;
  transform:translateY(-1px);
}
.zw-palace-archive__tabs button.is-active {
  border-color:rgba(230,199,111,.58);
  background:linear-gradient(140deg,rgba(209,173,72,.2),rgba(15,33,39,.82));
  color:#f0d783;
  box-shadow:0 9px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);
}
.zw-palace-archive__tabs b,.zw-palace-archive__tabs small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.zw-palace-archive__tabs b { font-size:12px;letter-spacing:.08em; }
.zw-palace-archive__tabs small { margin-top:5px;color:#657b80;font-size:9px; }
.zw-palace-archive__tabs .is-active small { color:#b8aa77; }
.zw-palace-archive__panels {
  position:relative;
  z-index:1;
  min-height:302px;
  margin-top:11px;
}
.zw-palace-archive__panels > article {
  min-height:302px;
  padding:24px;
  border:1px solid rgba(165,188,183,.16);
  border-radius:20px;
  background:
    linear-gradient(125deg,rgba(18,39,45,.76),rgba(3,11,17,.84)),
    radial-gradient(circle at 82% 0,rgba(206,172,75,.08),transparent 34%);
  animation:zwArchiveReveal .34s ease both;
}
.zw-palace-archive__panels > article[hidden] { display:none; }
@keyframes zwArchiveReveal {
  from { opacity:0;transform:translateY(7px);filter:blur(2px); }
  to { opacity:1;transform:none;filter:none; }
}
.zw-palace-archive__panels header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(218,186,97,.14);
}
.zw-palace-archive__panels header small {
  display:block;
  color:#718589;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}
.zw-palace-archive__panels h5 {
  margin:6px 0 0;
  color:#ede8dc;
  font:700 24px/1.25 "STSong","Songti SC",serif;
  letter-spacing:.08em;
}
.zw-palace-archive__panels h5 em {
  display:inline-block;
  margin-left:10px;
  padding:4px 7px;
  border:1px solid rgba(112,188,157,.28);
  border-radius:999px;
  color:#8dc8af;
  font:normal 700 9px/1 "Microsoft YaHei UI",sans-serif;
  letter-spacing:.06em;
  vertical-align:middle;
}
.zw-palace-archive__panels header > span {
  flex:none;
  color:#d9c27c;
  font:700 13px/1.4 "Microsoft YaHei UI",sans-serif;
  text-align:right;
}
.zw-palace-archive__panels header > span b {
  display:block;
  color:#667b80;
  font-size:8px;
  letter-spacing:.14em;
}
.zw-palace-archive__grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:16px;
}
.zw-palace-archive__grid > section {
  min-width:0;
  padding:15px;
  border:1px solid rgba(143,170,170,.12);
  border-radius:14px;
  background:rgba(2,9,14,.45);
}
.zw-palace-archive__grid > section > small {
  display:block;
  margin-bottom:10px;
  color:#8b9d9f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}
.zw-palace-archive__grid p {
  margin:0;
  color:#aab5b4;
  font-size:10px;
  line-height:1.85;
}
.zw-palace-archive__grid p b { margin-right:4px;color:#d1b760; }
.zw-palace-archive__stars { display:flex;flex-wrap:wrap;gap:6px; }
.zw-palace-archive__star {
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:6px 8px;
  border:1px solid rgba(216,185,97,.18);
  border-radius:9px;
  background:rgba(211,177,79,.055);
}
.zw-palace-archive__star b { color:#e2d7b5;font-size:11px; }
.zw-palace-archive__star small { color:#8b7a50;font-size:8px; }
.zw-palace-archive__empty { color:#71868a;font-size:10px;line-height:1.7; }
.zw-palace-archive__ages { margin-top:5px!important;color:#71868a!important; }
.zw-palace-archive__panels footer {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin-top:13px;
  padding:13px 15px;
  border-left:2px solid rgba(217,185,95,.55);
  background:linear-gradient(90deg,rgba(209,174,77,.08),transparent);
}
.zw-palace-archive__panels footer span { color:#d1b55f;font-size:9px;font-weight:800;letter-spacing:.12em; }
.zw-palace-archive__panels footer p { margin:0;color:#9ba9a8;font-size:10px;line-height:1.75; }
.pro-chart-audit {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:7px 18px;
  align-items:center;
  margin:14px 0 0;
  padding:13px 16px;
  border:1px solid rgba(126,193,169,.2);
  border-radius:15px;
  background:linear-gradient(100deg,rgba(70,150,125,.09),rgba(6,15,22,.66));
}
.pro-chart-audit span {
  color:#8fd5b9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.pro-chart-audit span i {
  width:6px;
  height:6px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#79caa8;
  box-shadow:0 0 10px rgba(121,202,168,.45);
}
.pro-chart-audit b {
  color:#d8e2de;
  font-size:11px;
  text-align:right;
}
.pro-chart-audit small {
  grid-column:1/-1;
  color:#73888b;
  font-size:10px;
  line-height:1.65;
}
@media(max-width:760px) {
  .zw-engine-ledger { padding:20px 16px;border-radius:19px; }
  .zw-engine-ledger__head { align-items:flex-start; }
  .zw-engine-ledger__head button { padding:9px 11px; }
  .zw-engine-ledger__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zw-palace-archive { padding:22px 16px;border-radius:21px; }
  .zw-palace-archive__head { align-items:flex-start; }
  .zw-palace-archive__head > span { padding:8px 10px; }
  .zw-palace-archive__tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .zw-palace-archive__panels,.zw-palace-archive__panels > article { min-height:0; }
  .zw-palace-archive__panels > article { padding:18px 14px; }
  .zw-palace-archive__grid { grid-template-columns:1fr; }
  .pro-chart-audit { grid-template-columns:1fr; }
  .pro-chart-audit b { text-align:left; }
  .pro-chart-audit small { grid-column:auto; }
}
@media(max-width:430px) {
  .zw-engine-ledger__head { display:block; }
  .zw-engine-ledger__head button { width:100%;margin-top:15px; }
  .zw-engine-ledger__grid { grid-template-columns:1fr; }
  .zw-palace-archive__head { display:block; }
  .zw-palace-archive__head > span { display:inline-block;margin-top:14px; }
  .zw-palace-archive__tabs {
    display:flex;
    margin-right:-16px;
    margin-left:-16px;
    overflow-x:auto;
    padding:0 16px 7px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .zw-palace-archive__tabs::-webkit-scrollbar { display:none; }
  .zw-palace-archive__tabs button { width:92px;flex:0 0 92px;scroll-snap-align:center; }
  .zw-palace-archive__panels header { align-items:flex-start; }
  .zw-palace-archive__panels h5 { font-size:21px; }
  .zw-palace-archive__panels footer { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .zw-palace-archive__panels > article { animation-duration:.01ms!important; }
  .zw-palace-archive__tabs button { transition-duration:.01ms!important; }
}
body[data-theme="light"]::after { display: none !important; }

body[data-theme="light"] header h1 {
  color: #1a2332 !important;
  -webkit-text-fill-color: #1a2332 !important;
  background: none !important;
}
body[data-theme="light"] header .subtitle { color: #7a8a9c !important; }
body[data-theme="light"] header .header-ornament { background: #2c6faa !important; }

/* 导航 */
body[data-theme="light"] .nav-item { color: #7a8a9c !important; border-color: rgba(26,35,50,0.08) !important; }
body[data-theme="light"] .nav-item:hover { color: #2c6faa !important; background: rgba(44,111,170,0.04) !important; }
body[data-theme="light"] .nav-item.active { color: #fff !important; background: #2c6faa !important; border-color: #2c6faa !important; }
body[data-theme="light"] .nav-more { color: #7a8a9c !important; border-color: rgba(26,35,50,0.1) !important; }

/* 所有卡片：白底+淡阴影 */
body[data-theme="light"] .top-nav,
body[data-theme="light"] .today-glance,
body[data-theme="light"] .daily-fortune-card,
body[data-theme="light"] .decision-card,
body[data-theme="light"] .start-paipan-entry,
body[data-theme="light"] .feature-grid,
body[data-theme="light"] .feature-entry,
body[data-theme="light"] .input-panel,
body[data-theme="light"] .strength-panel,
body[data-theme="light"] .liuqin-panel,
body[data-theme="light"] .analysis-card,
body[data-theme="light"] .accordion-section.open,
body[data-theme="light"] .tg-item,
body[data-theme="light"] .dayun-card,
body[data-theme="light"] .title-card,
body[data-theme="light"] .verdict-banner,
body[data-theme="light"] .layer-head,
body[data-theme="light"] .summary-card,
body[data-theme="light"] .three-q-card .tq-section,
body[data-theme="light"] .fate-id-card,
body[data-theme="light"] .celeb-match,
body[data-theme="light"] .share-bar,
body[data-theme="light"] .next-actions,
body[data-theme="light"] .zodiac-card,
body[data-theme="light"] .qm-cell,
body[data-theme="light"] .paywall-card,
body[data-theme="light"] .pricing-card,
body[data-theme="light"] #result,
body[data-theme="light"] #ziweiResult,
body[data-theme="light"] #zodiacResult {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: rgba(26,35,50,0.08) !important;
  box-shadow: 0 1px 3px rgba(26,35,50,0.04), 0 4px 12px rgba(26,35,50,0.03) !important;
  color: #1a2332;
}

/* 速看数值 */
body[data-theme="light"] .tg-value { text-shadow: none !important; }
body[data-theme="light"] .tg-item:nth-child(1) .tg-value { color: #1a8a5c !important; }
body[data-theme="light"] .tg-item:nth-child(2) .tg-value { color: #c0392b !important; }
body[data-theme="light"] .tg-item:nth-child(3) .tg-value { color: #9a7020 !important; }
body[data-theme="light"] .tg-item:nth-child(4) .tg-value { color: #6d28d9 !important; }
body[data-theme="light"] .tg-item { border-bottom-color: transparent !important; }
body[data-theme="light"] .tg-item:nth-child(1) { border-bottom-color: rgba(26,138,92,0.2) !important; }
body[data-theme="light"] .tg-item:nth-child(2) { border-bottom-color: rgba(192,57,43,0.2) !important; }
body[data-theme="light"] .tg-item:nth-child(3) { border-bottom-color: rgba(154,112,32,0.2) !important; }
body[data-theme="light"] .tg-item:nth-child(4) { border-bottom-color: rgba(109,40,217,0.2) !important; }

/* 按钮 */
body[data-theme="light"] .btn-calculate,
body[data-theme="light"] .start-paipan-btn {
  background: #2c6faa !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(44,111,170,0.2) !important;
}
body[data-theme="light"] .btn-calculate:hover,
body[data-theme="light"] .start-paipan-btn:hover {
  background: #245d90 !important;
}
body[data-theme="light"] .today-btn { border-color: rgba(26,35,50,0.12) !important; color: #3d4f63 !important; background: #f5f7fa !important; }

/* 输入框 */
body[data-theme="light"] .input-group input,
body[data-theme="light"] .input-group select {
  background: #f5f7fa !important;
  border-color: rgba(26,35,50,0.1) !important;
  color: #1a2332 !important;
}
body[data-theme="light"] .input-group input:focus,
body[data-theme="light"] .input-group select:focus {
  border-color: #2c6faa !important;
  box-shadow: 0 0 0 2px rgba(44,111,170,0.1) !important;
}
body[data-theme="light"] .quick-input { background: #f5f7fa !important; border-color: rgba(26,35,50,0.1) !important; color: #1a2332 !important; }

/* 文字颜色 */
body[data-theme="light"] .st-k { color: #7a8a9c !important; }
body[data-theme="light"] .st-v { color: #3d4f63 !important; }
body[data-theme="light"] .rel-intro { color: #7a8a9c !important; }
body[data-theme="light"] .st-concl { color: #7a8a9c !important; border-top-color: rgba(26,35,50,0.06) !important; }
body[data-theme="light"] .panel-title { color: #7a8a9c !important; }
body[data-theme="light"] .section-title { color: #7a8a9c !important; }
body[data-theme="light"] .accordion-title { color: #3d4f63 !important; }
body[data-theme="light"] .accordion-section.open .accordion-title { color: #2c6faa !important; }

/* 命格卡片 */
body[data-theme="light"] .vs-num, body[data-theme="light"] .tc-name { color: #2c6faa !important; text-shadow: none !important; }
body[data-theme="light"] .verdict-tag { color: #6d28d9 !important; }
body[data-theme="light"] .dfc-advice { background: rgba(44,111,170,0.06) !important; color: #2c6faa !important; }
body[data-theme="light"] .dfc-personal { color: #1a8a5c !important; }
body[data-theme="light"] .dfc-level { color: #9a7020 !important; }
body[data-theme="light"] .dfc-poem { color: #1a2332 !important; border-color: rgba(26,35,50,0.06) !important; }

/* 顶部边框色 */
body[data-theme="light"] .today-glance { border-top: 2px solid rgba(26,138,92,0.3) !important; }
body[data-theme="light"] .daily-fortune-card { border-top: 2px solid rgba(154,112,32,0.3) !important; }
body[data-theme="light"] .decision-card { border-top: 2px solid rgba(44,111,170,0.3) !important; }
body[data-theme="light"] .summary-card { border-left-color: #2c6faa !important; }

/* 功能入口 */
body[data-theme="light"] .feature-entry .fe-name { color: #1a2332 !important; }
body[data-theme="light"] .feature-entry .fe-desc { color: #7a8a9c !important; }
body[data-theme="light"] .feature-entry:hover { background: #f5f7fa !important; border-color: rgba(44,111,170,0.15) !important; }

/* 装饰元素 */
body[data-theme="light"] .today-glance::before,
body[data-theme="light"] .daily-fortune-card::before,
body[data-theme="light"] .decision-card::before { color: rgba(44,111,170,0.08) !important; }

/* 合规 */
body[data-theme="light"] .compliance-banner { background: #f5f7fa !important; border-color: rgba(26,35,50,0.06) !important; color: #7a8a9c !important; }

/* 付费墙 */
body[data-theme="light"] .paywall-card { background-image: none !important; background-color: #fff !important; border-color: rgba(44,111,170,0.15) !important; }
body[data-theme="light"] .pw-plan { background: #f5f7fa !important; }
body[data-theme="light"] .pw-btn { background: #2c6faa !important; color: #fff !important; }
body[data-theme="light"] .pw-btn-vip { background: linear-gradient(135deg, #6d28d9, #5b21b6) !important; }

/* ===== 全局可读性修复：提高文字对比度 ===== */

/* 默认深色主题：正文和次级文字提亮 */
.st-v, .analysis-row .ar-value, .tq-a, .dfc-poem, .dc-reason,
.accordion-title, .fe-name, .fid-val, .cm-trait, .verdict-title,
.pw-desc, .pw-plan-features, .pc-features, .pf-item {
  color: #ddd8e8 !important;
}
.st-k, .ar-label, .tg-label, .dfc-header, .dc-question, .dc-day,
.rel-intro, .st-concl, .fid-label, .cm-footer, .dfc-footer,
.hook-copy, .panel-title, .tg-title, .pw-blur-hint, .pw-guarantee {
  color: #9a92aa !important;
}
/* 主标题和重要文字确保白色 */
header h1, .tc-name, .result-name, .fid-title, .cm-name,
.verdict-title, .pw-title, .pricing-title, .pc-name, .pf-title,
.tq-q, .fe-name, .fsim-title, .lt-title, .fdn-title {
  color: #f4f0fa !important;
}
/* 数值和强调保持金色但确保可见 */
.vs-num, .tg-value, .pw-price-num, .pc-num {
  color: #e8c060 !important;
}

/* ===== 宣纸主题可读性 ===== */
body[data-theme="paper"] .st-v,
body[data-theme="paper"] .tq-a,
body[data-theme="paper"] .dfc-poem,
body[data-theme="paper"] .dc-reason,
body[data-theme="paper"] .accordion-title {
  color: #3a2e22 !important;
}
body[data-theme="paper"] .st-k,
body[data-theme="paper"] .rel-intro,
body[data-theme="paper"] .st-concl {
  color: #6a5a48 !important;
}

/* ===== 玄黑主题可读性 ===== */
body[data-theme="dark"] .st-v,
body[data-theme="dark"] .tq-a,
body[data-theme="dark"] .dfc-poem,
body[data-theme="dark"] .dc-reason {
  color: #e8e8e8 !important;
}
body[data-theme="dark"] .st-k,
body[data-theme="dark"] .rel-intro,
body[data-theme="dark"] .st-concl {
  color: #999 !important;
}

/* ===== 深海主题可读性 ===== */
body[data-theme="mystic"] .st-v,
body[data-theme="mystic"] .tq-a,
body[data-theme="mystic"] .dfc-poem,
body[data-theme="mystic"] .dc-reason {
  color: #d0e8f0 !important;
}
body[data-theme="mystic"] .st-k,
body[data-theme="mystic"] .rel-intro,
body[data-theme="mystic"] .st-concl {
  color: #7a9ab0 !important;
}

/* ===== 各板块专属设计图片 ===== */

/* --- 八字排盘：古典书卷纹理 --- */
#viewSingle > header {
  background-image: url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.82) !important;
  min-height: 140px !important; display: flex; align-items: center; justify-content: center;
}

/* --- 紫微斗数：紫色星盘 --- */
#viewZiwei > header {
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.78) !important;
  min-height: 140px !important;
}
#viewZiwei .input-panel {
  background-image: url('https://images.unsplash.com/photo-1532968961962-8a0cb3a2d4f0?w=600&q=35&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.92) !important;
}

/* --- 星座占星：十二宫星图 --- */
#viewZodiac > header {
  background-image: url('https://images.unsplash.com/photo-1505506874110-6a7a69069a08?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.76) !important;
  min-height: 140px !important;
}
#viewZodiac .input-panel {
  background-image: url('https://images.unsplash.com/photo-1465101162946-4377e57745c3?w=600&q=35&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.91) !important;
}

/* --- 合婚：浪漫双星 --- */
#viewMatch > header {
  background-image: url('https://images.unsplash.com/photo-1518568814500-bf0f8d125f46?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.8) !important;
  min-height: 140px !important;
}
#viewMatch .input-panel {
  background-image: url('https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=600&q=35&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.91) !important;
}

/* --- 奇门遁甲：古罗盘 --- */
#viewQimen > header {
  background-image: url('https://images.unsplash.com/photo-1509228627152-72ae9ae6848d?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.78) !important;
  min-height: 140px !important;
}
#viewQimen .input-panel {
  background-image: url('https://images.unsplash.com/photo-1507400492013-162706c8c05e?w=600&q=35&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.92) !important;
}

/* --- 姓名学：毛笔书法 --- */
#viewNaming > header {
  background-image: url('https://images.unsplash.com/photo-1455885661740-29cbf08a42fa?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.8) !important;
  min-height: 140px !important;
}
#viewNaming .input-panel {
  background-image: url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=600&q=35&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.92) !important;
}

/* --- 塔罗牌：神秘烛光与牌面 --- */
#viewTarot > header {
  background-image: url('https://images.unsplash.com/photo-1600429991827-5224817554f8?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.75) !important;
  min-height: 140px !important;
}

/* --- 风水：山水意境 --- */
#viewFengshui > header {
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.72) !important;
  min-height: 140px !important;
}

/* --- 六壬：古籍竹简 --- */
#viewLiuren > header {
  background-image: url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.8) !important;
  min-height: 140px !important;
}

/* --- 生肖：传统年画风 --- */
#viewShengxiao > header {
  background-image: url('https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.78) !important;
  min-height: 140px !important;
}

/* --- 每日一卦：太极八卦 --- */
#viewGua > header {
  background-image: url('https://images.unsplash.com/photo-1507400492013-162706c8c05e?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.8) !important;
  min-height: 140px !important;
}

/* --- 择日：日历天文 --- */
#viewDate > header {
  background-image: url('https://images.unsplash.com/photo-1506784365847-bbad939e9335?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.8) !important;
  min-height: 140px !important;
}

/* --- 我的命盘：个人星空 --- */
#viewSaved > header {
  background-image: url('https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=1000&q=50&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.78) !important;
  min-height: 140px !important;
}

/* --- 所有板块header统一样式 --- */
[id^="view"] > header {
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
[id^="view"] > header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--bg, #0d0815));
  pointer-events: none;
}
[id^="view"] > header h1,
[id^="view"] > header .subtitle,
[id^="view"] > header .header-ornament {
  position: relative; z-index: 2;
}

/* --- 功能入口卡片各自背景 --- */
.feature-entry:nth-child(1) {
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=300&q=30&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.88) !important;
}
.feature-entry:nth-child(2) {
  background-image: url('https://images.unsplash.com/photo-1505506874110-6a7a69069a08?w=300&q=30&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.88) !important;
}
.feature-entry:nth-child(3) {
  background-image: url('https://images.unsplash.com/photo-1509228627152-72ae9ae6848d?w=300&q=30&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.88) !important;
}
.feature-entry:nth-child(4) {
  background-image: url('https://images.unsplash.com/photo-1518568814500-bf0f8d125f46?w=300&q=30&auto=format') !important;
  background-size: cover; background-position: center; background-blend-mode: overlay;
  background-color: rgba(13,8,21,0.88) !important;
}

/* --- 日间主题关闭图片 --- */
body[data-theme="light"] [id^="view"] > header,
body[data-theme="light"] .feature-entry,
body[data-theme="paper"] [id^="view"] > header,
body[data-theme="paper"] .feature-entry {
  background-image: none !important;
  min-height: auto !important;
}
body[data-theme="light"] [id^="view"] > header::after,
body[data-theme="paper"] [id^="view"] > header::after { display: none; }

/* 付费墙策略调整：让免费用户看到更多内容后再拦 */
/* 付费墙移到"命书总论"之前而非"深度分析"之前 */
/* 深度分析面板前3个(性格/六亲/日主强弱)对免费用户可见 */
.paywall-card { order: 90 !important; }

/* 空板块引导 */
[id^="view"] > .input-panel::before {
  content: attr(data-guide);
  display: block; text-align: center; font-size: 0.76rem;
  color: var(--ink-faint, #7a7088); margin-bottom: 14px;
  line-height: 1.6; opacity: 0.8;
}

/* 付费内容模糊预览 */
.paywall-card + .accordion-section,
.paywall-card + .strength-panel {
  position: relative; max-height: 120px; overflow: hidden;
}
.paywall-card + .accordion-section::after,
.paywall-card + .strength-panel::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg, #0d0815));
  pointer-events: none;
}

/* 板块loading提示 */
[id$="Result"]:empty::before {
  content: '点击上方按钮开始分析...';
  display: block; text-align: center; padding: 40px 0;
  font-size: 0.82rem; color: var(--ink-faint, #7a7088);
  letter-spacing: 0.1em;
}

/* 主导航只显示前3个tab+更多 */
.top-nav > .nav-item:nth-child(n+4) { display: none; }
.top-nav > .nav-more { display: inline-block; }
/* overflow中全部显示 */
.nav-overflow .nav-item { display: inline-block !important; }

/* 板块切换：瞬间跳转而非滚动 */
html { scroll-behavior: auto !important; }

/* ===== 多页面感：每个板块完全独立 ===== */

/* 隐藏所有非当前视图（确保干净） */
[id^="view"][style*="display: none"],
[id^="view"][style*="display:none"] {
  display: none !important;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

/* 当前视图：独占全屏，像一个独立页面 */
[id^="view"]:not([style*="display: none"]):not([style*="display:none"]) {
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 切换时有一个极短的淡入（模拟页面加载） */
[id^="view"] {
  animation: pageIn 0.2s ease;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* 导航条固定在顶部（像网站顶栏） */
.top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  margin: 0 -40px !important;
  padding: 12px 40px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background-color: rgba(13,8,21,0.85) !important;
}

/* 首页独有内容在其他页面完全不可见 */
body.view-active .today-glance,
body.view-active #dailyFortuneSlot,
body.view-active .decision-card,
body.view-active .start-paipan-entry,
body.view-active .feature-grid,
body.view-active > .container > header,
body.view-active .intro-hook {
  display: none !important;
}

/* 每个板块自带header作为"页面标题" */
[id^="view"] > header {
  margin-top: 16px !important;
}

/* 板块之间用URL hash区分（视觉辅助：地址栏变化） */

/* 主题切换不要遮挡内容 */
.theme-switch { bottom: 36px !important; }

/* 日间主题下导航条 */
body[data-theme="light"] .top-nav {
  background-color: rgba(245,247,250,0.9) !important;
  border-bottom: 1px solid rgba(26,35,50,0.06) !important;
}
body[data-theme="paper"] .top-nav {
  background-color: rgba(245,236,217,0.9) !important;
}

/* ===========================================================
   移动端完整适配（375px-768px）
   测试设备：iPhone SE(375) / iPhone 14(390) / 安卓(360-412)
   =========================================================== */

@media (max-width: 768px) {
  /* 容器 */
  .container { padding: 0 16px !important; max-width: 100% !important; }

  /* 导航：横向滚动，不换行 */
  .top-nav {
    padding: 10px 12px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 0 !important;
  }
  .nav-item { padding: 7px 14px !important; font-size: 0.78rem !important; flex-shrink: 0 !important; }
  .nav-more { padding: 7px 12px !important; font-size: 0.78rem !important; }
  .nav-overflow { padding: 6px 16px !important; gap: 6px !important; }

  /* 标题 */
  header { padding: 28px 0 12px !important; }
  header h1 { font-size: 1.6rem !important; letter-spacing: 0.3em !important; }
  header .subtitle { font-size: 0.78rem !important; }
  [id^="view"] > header { min-height: 100px !important; margin-bottom: 14px !important; border-radius: 12px !important; }

  /* 今日速看 */
  .today-glance { padding: 14px 12px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
  .tg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .tg-item { padding: 10px 6px !important; }
  .tg-value { font-size: 0.95rem !important; }

  /* 命运签 */
  .daily-fortune-card { padding: 18px 14px !important; border-radius: 12px !important; }
  .dfc-poem { font-size: 0.92rem !important; line-height: 2 !important; }

  /* 决策助手 */
  .decision-card { padding: 16px 14px !important; border-radius: 12px !important; }
  .dc-verdict { font-size: 1.6rem !important; }

  /* 功能入口 */
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .feature-entry { padding: 18px 10px !important; border-radius: 12px !important; }
  .fe-icon { font-size: 1.6rem !important; }
  .fe-name { font-size: 0.82rem !important; }

  /* 输入面板 */
  .input-panel { padding: 16px 14px !important; border-radius: 12px !important; }
  .input-row { gap: 8px !important; }
  .input-group { flex: 1 1 auto; min-width: 0; }
  .input-group input, .input-group select {
    width: 100% !important; min-width: 0 !important;
    padding: 10px 8px !important; font-size: 16px !important; /* 防iOS缩放 */
  }
  .input-group label { font-size: 0.72rem !important; min-width: 20px; }
  #year { width: 100% !important; }
  .btn-calculate { width: 100% !important; padding: 12px !important; margin-top: 8px !important; font-size: 0.88rem !important; }
  .today-btn { width: 100% !important; padding: 10px !important; margin-top: 6px !important; }
  .quick-input { font-size: 14px !important; padding: 10px 12px !important; }
  .panel-title { font-size: 0.66rem !important; }
  .cal-toggle { margin-bottom: 12px !important; }
  .cal-tab { padding: 7px 14px !important; font-size: 0.78rem !important; }

  /* 排盘结果 */
  #result { padding: 14px !important; border-radius: 14px !important; }
  .summary-card { padding: 14px 16px !important; }
  .sc-line { font-size: 0.82rem !important; }
  .title-card { padding: 20px 14px !important; }
  .tc-name { font-size: 1.2rem !important; }
  .verdict-banner { flex-direction: column !important; text-align: center !important; padding: 16px !important; gap: 10px !important; }
  .vs-num { font-size: 1.8rem !important; }

  /* 三问卡 */
  .tq-section { padding: 14px !important; }
  .tq-q { font-size: 0.84rem !important; }
  .tq-a { font-size: 0.8rem !important; }

  /* 大运轨道 */
  .dayun-track { gap: 6px !important; }
  .dayun-card { min-width: 62px !important; padding: 8px 6px !important; }
  .dayun-range { font-size: 0.8rem !important; }
  .dayun-age { font-size: 0.62rem !important; }

  /* 分析面板 */
  .strength-panel, .liuqin-panel, .analysis-card { padding: 14px !important; border-radius: 10px !important; }
  .strength-panel h4, .liuqin-panel h4, .analysis-card h4 { font-size: 0.78rem !important; }
  .st-row { padding: 7px 0 !important; flex-wrap: wrap; }
  .st-k { width: 3.5em !important; font-size: 0.72rem !important; flex-shrink: 0; }
  .st-v { font-size: 0.78rem !important; flex: 1; min-width: 0; }
  .rel-intro { font-size: 0.72rem !important; }

  /* 命格身份证 */
  .fate-id-card { padding: 18px 14px !important; max-width: 100% !important; }
  .fid-title { font-size: 1.1rem !important; }
  .fid-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }

  /* 手风琴 */
  .accordion-head { padding: 10px 0 !important; }
  .accordion-title { font-size: 0.76rem !important; }
  .accordion-section.open { padding: 0 10px !important; }

  /* 紫微九宫 */
  .zw-grid { font-size: 0.68rem !important; gap: 2px !important; }
  .zw-pal { padding: 6px 4px !important; }
  .zw-star { font-size: 0.72rem !important; }

  /* 奇门九宫 */
  .qm-grid { gap: 3px !important; }
  .qm-cell { padding: 8px 4px !important; font-size: 0.68rem !important; }

  /* 幸运转盘 */
  #luckyWheel2 canvas { width: 180px !important; height: 180px !important; }

  /* 分享栏 */
  .share-btns { flex-wrap: wrap !important; }
  .share-btn, .sc-btn { flex: 1 1 45% !important; text-align: center !important; font-size: 0.72rem !important; padding: 8px 10px !important; }

  /* 付费墙 */
  .pw-plans { flex-direction: column !important; }
  .pw-plan { max-width: 100% !important; }

  /* 定价页 */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* 浮动按钮 */
  .fab-group { bottom: 40px !important; right: 12px !important; }
  .fab-btn { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }

  /* 合规提示 */
  .compliance-banner { font-size: 0.56rem !important; padding: 5px 8px !important; }

  /* 主题切换 */
  .theme-switch { bottom: 42px !important; left: 8px !important; }
  .theme-dot { width: 12px !important; height: 12px !important; }

  /* 模拟器 */
  .fsim-compare { flex-direction: column !important; }
  .fsim-slider-row { flex-direction: column !important; gap: 6px !important; }
  .fsim-label { text-align: center !important; min-width: auto !important; }

  /* 星座卡 */
  .zodiac-card { padding: 12px !important; }
  .zod-sym { font-size: 1.8rem !important; }

  /* 层组 */
  .layer-head { padding: 10px 12px !important; border-radius: 10px !important; }

  /* 防止iOS键盘弹起时页面异常 */
  input:focus, select:focus { transform: translateZ(0); }

  /* 图片容器不溢出 */
  .fortune-chart-wrap { overflow-x: scroll !important; }
  .fortune-chart-wrap canvas { min-width: 500px !important; }
  .lt-scroll canvas { min-width: 500px !important; }
}

/* === 超小屏(iPhone SE 375px) === */
@media (max-width: 380px) {
  header h1 { font-size: 1.4rem !important; letter-spacing: 0.2em !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .tg-grid { grid-template-columns: 1fr 1fr !important; }
  .nav-item { padding: 6px 10px !important; font-size: 0.72rem !important; }
  .dc-verdict { font-size: 1.4rem !important; }
  .btn-calculate { font-size: 0.82rem !important; }
}

/* ===== 板块独立呈现 ===== */
body.view-active .intro-hook,
body.view-active .today-glance,
body.view-active #dailyFortuneSlot,
body.view-active .decision-card,
body.view-active .start-paipan-entry,
body.view-active .feature-grid,
body.view-active > .container > header { display: none !important; }
[id^="view"]:not([style*="display: none"]):not([style*="display:none"]) { min-height: 100vh; }
[id^="view"] > header { min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 16px; margin-bottom: 20px; position: relative; overflow: hidden; }
.top-nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background-color: rgba(13,8,21,0.85); border-radius: 0; padding: 12px 16px; }
html { scroll-behavior: auto; }
[id^="view"][style*="display: none"],[id^="view"][style*="display:none"]{display:none!important;height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:none!important;visibility:hidden!important;position:absolute!important;}
[id^="view"][hidden]{display:none!important;height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important;visibility:hidden!important;position:absolute!important;inset:auto!important;}
#luckyWheel,.wx-quiz,[id*="wheel"]{display:none!important}

/* ===== 板块严格分界 + 层次感 ===== */
[id^="view"] > header {
  min-height: 160px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border-radius: 0;
  margin: 0 -32px 0;
  padding: 48px 32px;
  border-bottom: 1px solid rgba(212,168,83,0.15);
  position: relative;
}
[id^="view"] > header::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(13,8,21,1));
  pointer-events: none;
}
[id^="view"] > header h1 { font-size: 2rem; letter-spacing: 0.5em; }
[id^="view"] .input-panel {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 28px;
}
.result, #ziweiResult, #zodiacResult, #qimenResult, #tarotResult, #namingResult, #fengshuiResult, #liurenResult {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(212,168,83,0.1);
}
body.view-active #viewSingle{display:none!important}body.view-ziwei #viewZiwei{display:block!important}body.view-zodiac #viewZodiac{display:block!important}

/* ===== 内容层次感 ===== */
.strength-panel,.liuqin-panel,.analysis-card{margin-bottom:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);padding:20px;background:rgba(255,255,255,0.02)}
.strength-panel h4,.liuqin-panel h4,.analysis-card h4{font-size:0.84rem;color:#d4a853;border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:10px;margin-bottom:14px}
.layer-group{margin-top:20px;border:1px solid rgba(255,255,255,0.04);border-radius:14px;overflow:hidden}
.layer-head{padding:14px 18px;background:rgba(255,255,255,0.025);cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.layer-title{font-size:0.86rem;color:#f2eff6}
.layer-sub{font-size:0.72rem;color:#7a7088}
.dayun-track{padding:12px 0}
.dayun-card{border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:10px 8px;background:rgba(255,255,255,0.02)}
.dayun-card:hover{border-color:rgba(212,168,83,0.2);transform:translateY(-2px)}

/* ===== 付费墙醒目样式 ===== */
.pay-wall{position:relative;z-index:10;margin:32px -20px!important;padding:40px 24px!important;border-left:none!important;border-right:none!important;border-radius:0!important}
.pay-wall.tier1{background:linear-gradient(180deg,rgba(13,8,21,0),rgba(212,168,83,0.08) 20%,rgba(212,168,83,0.08) 80%,rgba(13,8,21,0))!important;border-top:1px solid rgba(212,168,83,0.3)!important;border-bottom:1px solid rgba(212,168,83,0.3)!important}
.pay-wall.tier2{background:linear-gradient(180deg,rgba(13,8,21,0),rgba(139,108,199,0.08) 20%,rgba(139,108,199,0.08) 80%,rgba(13,8,21,0))!important;border-top:1px solid rgba(139,108,199,0.3)!important;border-bottom:1px solid rgba(139,108,199,0.3)!important}
.pay-wall.tier3{background:linear-gradient(180deg,rgba(13,8,21,0),rgba(212,168,83,0.12) 20%,rgba(212,168,83,0.12) 80%,rgba(13,8,21,0))!important;border-top:2px solid rgba(212,168,83,0.4)!important;border-bottom:2px solid rgba(212,168,83,0.4)!important}
.pay-wall::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;background:linear-gradient(to bottom,transparent,rgba(13,8,21,0.8));pointer-events:none}
.pay-wall::after{content:"";position:absolute;bottom:-20px;left:0;right:0;height:20px;background:linear-gradient(to top,transparent,rgba(13,8,21,0.8));pointer-events:none}
.paywall,.paywall-section,[id*="paywallSlot"]{display:none!important}
#viewZodiac .input-panel~.input-panel,#viewZodiac #zpResult,#viewZodiac .input-panel~div:not(#zodiacResult){display:none!important}#viewZodiac #zodiacResult{display:block!important}

/* ===== 高端视觉：真实图片 + 微动画 ===== */
[id^="view"] > header{background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.78)}
#viewSingle > header{background-image:url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=900&q=50&auto=format)}
#viewZiwei > header{background-image:url(https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=900&q=50&auto=format)}
#viewZodiac > header{background-image:url(https://images.unsplash.com/photo-1505506874110-6a7a69069a08?w=900&q=50&auto=format)}
#viewMatch > header{background-image:url(https://images.unsplash.com/photo-1518568814500-bf0f8d125f46?w=900&q=50&auto=format)}
#viewQimen > header{background-image:url(https://images.unsplash.com/photo-1509228627152-72ae9ae6848d?w=900&q=50&auto=format)}
#viewNaming > header{background-image:url(https://images.unsplash.com/photo-1455885661740-29cbf08a42fa?w=900&q=50&auto=format)}
#viewTarot > header{background-image:url(https://images.unsplash.com/photo-1600429991827-5224817554f8?w=900&q=50&auto=format)}
#viewFengshui > header{background-image:url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&q=50&auto=format)}
#viewLiuren > header{background-image:url(../images/features/liuren.webp)}
#viewShengxiao > header{background-image:url(https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=900&q=50&auto=format)}
#viewGua > header{background-image:url(https://images.unsplash.com/photo-1507400492013-162706c8c05e?w=900&q=50&auto=format)}
#viewDate > header{background-image:url(https://images.unsplash.com/photo-1506784365847-bbad939e9335?w=900&q=50&auto=format)}
#viewSaved > header{background-image:url(https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=900&q=50&auto=format)}
[id^="view"] > header h1{text-shadow:0 2px 20px rgba(0,0,0,0.5);position:relative;z-index:2}
[id^="view"] > header .subtitle{text-shadow:0 1px 10px rgba(0,0,0,0.5);position:relative;z-index:2}
[id^="view"] > header .header-ornament{position:relative;z-index:2}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.3;background-image:radial-gradient(1px 1px at 15% 25%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 50% 60%,rgba(212,168,83,0.3),transparent),radial-gradient(1.5px 1.5px at 80% 20%,rgba(139,108,199,0.35),transparent),radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,0.25),transparent),radial-gradient(1px 1px at 70% 45%,rgba(212,168,83,0.2),transparent)}
.input-panel{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top-nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ===== 付费墙内容预览 ===== */
.pay-wall{position:relative}
.pay-wall .pw-preview{margin-top:18px;text-align:left;padding:16px;background:rgba(255,255,255,0.02);border-radius:10px;border:1px solid rgba(255,255,255,0.04)}
.pay-wall .pw-preview-title{font-size:0.76rem;color:#d4a853;margin-bottom:10px;letter-spacing:0.1em}
.pay-wall .pw-preview-list{list-style:none;padding:0}
.pay-wall .pw-preview-list li{font-size:0.78rem;color:#b8b0c8;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;gap:8px}
.pay-wall .pw-preview-list li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pay-wall.tier1 .pw-preview-list li::before{background:#d4a853}
.pay-wall.tier2 .pw-preview-list li::before{background:#8b6cc7}
.pay-wall.tier3 .pw-preview-list li::before{background:#d4a853}
.pay-wall .pw-sample{margin-top:12px;padding:12px;background:rgba(212,168,83,0.04);border-radius:8px;font-size:0.76rem;color:#7a7088;line-height:1.7;font-style:italic;border-left:2px solid rgba(212,168,83,0.3)}

/* ===== 结果区/卡片星空底图 ===== */
#result,#ziweiResult,#zodiacResult{background-image:url(https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=1200&q=40&auto=format);background-size:cover;background-position:center;background-attachment:fixed;background-blend-mode:overlay;background-color:rgba(13,8,21,0.94);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,0.03)}
.strength-panel,.liuqin-panel{background-image:url(https://images.unsplash.com/photo-1475274047050-1d0c0975c63e?w=600&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.94)}
.analysis-card{background-image:url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=600&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.94)}
.dayun-card{background-image:url(https://images.unsplash.com/photo-1475274047050-1d0c0975c63e?w=300&q=25&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.9)}
.input-panel{background-image:url(https://images.unsplash.com/photo-1505506874110-6a7a69069a08?w=800&q=35&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.92)}
.zodiac-card{background-image:url(https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=400&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.9);border-radius:12px}
.zw-grid{background-image:url(https://images.unsplash.com/photo-1465101162946-4377e57745c3?w=800&q=35&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.88);border-radius:14px;padding:12px}
.zw-pal{background-color:rgba(13,8,21,0.85);border:1px solid rgba(139,108,199,0.08)}
.bullet-card{background-image:url(https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?w=400&q=25&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.92);border-radius:10px}
.layer-head{background-image:url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=800&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.9);border-radius:12px}
.qm-grid{background-image:url(https://images.unsplash.com/photo-1509228627152-72ae9ae6848d?w=600&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.88);border-radius:14px;padding:10px}
.qm-cell{background-color:rgba(13,8,21,0.8);backdrop-filter:blur(4px)}
.share-bar{background-image:url(https://images.unsplash.com/photo-1504333638930-c8787321eee0?w=600&q=30&auto=format);background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.92);border-radius:12px;padding:16px}

/* ===== 装饰图片 ===== */
#viewSingle > header::before{content:"";position:absolute;inset:0;background:url(https://images.unsplash.com/photo-1543722530-d2c3201371e7?w=1200&q=60&auto=format) center/cover;opacity:0.15;z-index:0}
.pay-wall.tier1::before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:url(https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=200&q=40&auto=format) center/cover;border-radius:0 14px 0 60px;opacity:0.2;pointer-events:none}
.pay-wall.tier2::before{content:"";position:absolute;top:0;right:0;width:140px;height:140px;background:url(https://images.unsplash.com/photo-1543722530-d2c3201371e7?w=200&q=40&auto=format) center/cover;border-radius:0 14px 0 70px;opacity:0.15;pointer-events:none}
.pay-wall.tier3::before{content:"";position:absolute;top:0;right:0;width:160px;height:160px;background:url(https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?w=200&q=40&auto=format) center/cover;border-radius:0 14px 0 80px;opacity:0.2;pointer-events:none}
.today-glance::before{content:"";position:absolute;top:10px;right:10px;width:60px;height:60px;background:url(https://images.unsplash.com/photo-1532968961962-8a0cb3a2d4f0?w=100&q=40&auto=format) center/cover;border-radius:50%;opacity:0.2;pointer-events:none}
.today-glance{position:relative;overflow:hidden}

/* ===== 星空粒子动画（替代视频） ===== */
@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:0.4}50%{opacity:0.8}100%{transform:translateY(-100vh) scale(0.5);opacity:0}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,108,199,0.1) 0%,transparent 55%),radial-gradient(circle at 50% 50%,#110c1e 0%,#0d0815 70%)}
[id^="view"] > header .header-ornament::after{content:"";position:absolute;width:4px;height:4px;background:#d4a853;border-radius:50%;box-shadow:20px -30px 0 #fff,60px -10px 0 rgba(139,108,199,0.6),-30px -50px 0 rgba(212,168,83,0.5),80px -40px 0 rgba(255,255,255,0.4),-60px -20px 0 rgba(139,108,199,0.4);animation:floatUp 8s linear infinite;opacity:0.5}

/* ===== 视频背景容器 ===== */
.video-bg{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:inherit}
.video-bg video{width:100%;height:100%;object-fit:cover;opacity:0.25}
[id^="view"] > header{position:relative;overflow:hidden}
[id^="view"] > header>*{position:relative;z-index:2}

/* ===== 星空粒子动画（替代视频，零流量） ===== */
@keyframes starFloat{0%{transform:translateY(0)}100%{transform:translateY(-200px)}}
@keyframes starTwinkle{0%,100%{opacity:0.3}50%{opacity:1}}
@keyframes nebulaDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
[id^="view"] > header::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,0.6),transparent),radial-gradient(1.5px 1.5px at 30% 60%,rgba(212,168,83,0.5),transparent),radial-gradient(1px 1px at 50% 10%,rgba(255,255,255,0.5),transparent),radial-gradient(2px 2px at 70% 40%,rgba(139,108,199,0.4),transparent),radial-gradient(1px 1px at 90% 70%,rgba(255,255,255,0.4),transparent),radial-gradient(1.5px 1.5px at 20% 80%,rgba(212,168,83,0.3),transparent),radial-gradient(1px 1px at 60% 90%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 80% 30%,rgba(139,108,199,0.5),transparent);animation:starFloat 20s linear infinite;background-size:100% 400px}
[id^="view"] > header::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(139,108,199,0.05),transparent 40%,rgba(212,168,83,0.03),transparent 70%);background-size:200% 200%;animation:nebulaDrift 15s ease infinite}
.video-bg{display:none!important}

/* TEST ANIMATION */
@keyframes testGlow{0%,100%{box-shadow:0 0 5px #d4a853}50%{box-shadow:0 0 20px #d4a853,0 0 40px rgba(212,168,83,0.3)}}
.header-ornament{animation:testGlow 3s ease-in-out infinite!important}


.header-ornament{width:60px!important;height:3px!important;animation:testGlow 2s ease-in-out infinite!important;background:#d4a853!important}
[id^="view"] > header h1{animation:titleColor 4s ease infinite!important}
@keyframes titleColor{0%,100%{color:#f2eff6}50%{color:#d4a853}}



/* ============================================================
   板块独立化 (2026-07-02)：卡片外壳 + 专属配色 + 进入动画
   目标：切换板块时每个都是清晰独立、自成一体的区域
   ============================================================ */

/* 1) 每个板块包成一张独立卡片 */
.container > main > [id^="view"]:not([style*="display: none"]):not([style*="display:none"]) {
  position: relative;
  background: linear-gradient(165deg, rgba(22,28,42,0.55), rgba(14,18,28,0.75));
  border: 1px solid rgba(180,200,220,0.10);
  border-radius: 18px;
  padding: 8px 22px 34px;
  margin: 10px 0 40px;
  box-shadow: 0 18px 48px -22px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: panelEnter 0.42s cubic-bezier(0.22,0.61,0.36,1);
}

/* 2) 顶部专属强调色条：一眼分辨当前板块 */
.container > main > [id^="view"]:not([style*="display: none"]):not([style*="display:none"])::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: var(--panel-accent, linear-gradient(90deg, var(--gold), var(--gold-light)));
  opacity: 0.9;
}

/* 3) 进入动画：轻微上滑 + 渐显 */
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 4) 各板块专属强调色（顶部色条 + 边框微光） */
#viewSingle    { --panel-accent: linear-gradient(90deg,#c7a96b,#f0d27a); }
#viewZiwei     { --panel-accent: linear-gradient(90deg,#7b42b8,#b072e6); }
#viewZodiac    { --panel-accent: linear-gradient(90deg,#2980b9,#5bb8e6); }
#viewMatch     { --panel-accent: linear-gradient(90deg,#c0392b,#e88a7e); }
#viewShengxiao { --panel-accent: linear-gradient(90deg,#d98a2b,#f4c56a); }
#viewGua       { --panel-accent: linear-gradient(90deg,#4a7c59,#8fce9c); }
#viewQimen     { --panel-accent: linear-gradient(90deg,#5c6bc0,#9fa8e0); }
#viewNaming    { --panel-accent: linear-gradient(90deg,#00897b,#5fd0c0); }
#viewTarot     { --panel-accent: linear-gradient(90deg,#8e44ad,#c88ee0); }
#viewFengshui  { --panel-accent: linear-gradient(90deg,#2e7d5b,#79c7a0); }
#viewLiuren    { --panel-accent: linear-gradient(90deg,#b8860b,#e6c35c); }
#viewDate      { --panel-accent: linear-gradient(90deg,#c75b54,#e89a94); }
#viewSaved     { --panel-accent: linear-gradient(90deg,#27ae60,#6cd89a); }
#viewMbti      { --panel-accent: linear-gradient(90deg,#5c6bc0,#9fa8e0); }
#viewCeshi     { --panel-accent: linear-gradient(90deg,#e0533a,#ff8a6c); }
#viewYuanfen   { --panel-accent: linear-gradient(90deg,#e05a8a,#ff9ac0); }
#viewCheckin   { --panel-accent: linear-gradient(90deg,#27ae60,#6cd89a); }
#viewDict      { --panel-accent: linear-gradient(90deg,#7a8a99,#b0c0d0); }

/* 5) 板块标题底部细线呼应专属色 */
.container > main > [id^="view"] > header {
  border-bottom: 1px solid rgba(180,200,220,0.12) !important;
  position: relative;
}
.container > main > [id^="view"] > header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 2px; border-radius: 2px;
  background: var(--panel-accent, var(--gold));
  opacity: 0.75;
}

/* 6) 移动端收窄卡片内边距，避免拥挤 */
@media (max-width: 640px) {
  .container > main > [id^="view"]:not([style*="display: none"]):not([style*="display:none"]) {
    padding: 6px 12px 24px;
    border-radius: 14px;
    margin: 8px 0 28px;
  }
}
/* ===== 板块独立化 结束 ===== */



/* ============================================================
   首屏精简 (2026-07-02)：让主内容区(含生日输入框)靠前，
   今日速览/决策卡/hero 等每日运势内容移到主内容之后。
   纯 CSS 用 flex order 重排，不改 HTML/JS，可 git 回退。
   ============================================================ */
.container { display: flex; flex-direction: column; }

/* 兜底：未显式指定的子元素(如JS动态插入的)排到较后 */
.container > * { order: 9; }

/* 显式排序：导航/合规最前，main(含标题+输入框)紧随，运势类内容其后 */
.container > .top-nav           { order: 1; }
.container > .nav-overflow      { order: 2; }
.container > .compliance-banner { order: 3; }
.container > header             { order: 4; }
.container > main               { order: 5; }
.container > .today-glance      { order: 6; }
.container > .decision-card     { order: 7; }
.container > .ink-line          { order: 8; }
.container > .hero              { order: 8; }
/* 主题切换/隐私弹窗为 fixed 定位，不受 flex 顺序影响 */

/* 标题与输入面板之间收紧间距 */
#viewSingle > header { margin-bottom: 14px !important; }
/* ===== 首屏精简 结束 ===== */


/* ============================================================
   设计升级 (2026-07-02)：思源宋体+马善政楷体 + 鎏金质感 + 精修排版
   纯样式增强，不改功能。字体在 index.html 引入。可 git 回退。
   ============================================================ */

/* 1) 字体族绑定：标题用书法体，正文标题用思源宋体 */
:root {
  --font-serif: "Source Han Serif SC", "Songti SC", STSong, "SimSun", serif;
  --font-brush: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", serif;
}

/* 2) 主标题：书法体（全主题统一换字体） */
header h1 {
  font-family: var(--font-brush) !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
}
/* 深色主题：鎏金渐变 + 微光（排除两个浅色主题，覆盖历史遗留纯色规则） */
body:not([data-theme="paper"]):not([data-theme="light"]):not([data-theme="day"]) header h1 {
  background: linear-gradient(105deg,#b8935a 0%,#f0d9a0 38%,#fff4d8 50%,#f0d9a0 62%,#b8935a 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(199,169,107,0.28));
}
/* 首页主标题下的极细鎏金分隔线（只作用首页 header，用高特异性覆盖 content:none） */
.container > header { position: relative; }
.container > header::after {
  content: "" !important; display: block !important;
  width: 64px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* 3) 称号卡精修：hairline 边框 + 多层柔和阴影（字体已由CDN加载,自动生效） */
.title-card {
  border: 1px solid rgba(230,207,151,0.30) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -28px rgba(199,169,107,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.title-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.tc-rarity { font-family: var(--font-serif) !important; font-weight: 700 !important; }

/* 4) 输入面板/卡片：统一精致度——柔和圆角 + hairline + 层次阴影 */
.input-panel {
  border-radius: 16px !important;
  border: 1px solid rgba(199,169,107,0.14) !important;
  box-shadow: 0 16px 44px -26px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* 5) 板块标题(section-title/panel-title)用思源宋体,更考究 */
.panel-title, .section-title {
  font-family: var(--font-serif) !important;
  letter-spacing: 0.2em !important;
}

/* 6) 开始测评主按钮：鎏金质感提升 */
.btn-calculate {
  font-family: var(--font-serif) !important;
  letter-spacing: 0.15em !important;
}
/* ===== 设计升级 结束 ===== */


/* ============================================================
   日间主题(light)修复 (2026-07-02)
   诊断：原 light 已有一套蓝白浅色规则(nav/标题/强调=靛蓝#2c6faa)，
   但缺失背景层变量 --paper/--panel-bg/--input-bg/--title-bg/--bg-core/
   --bg-glow，导致背景与卡片错乱、白天看着难受。
   方案：补全这些背景变量为「清爽蓝白」体系，与原有蓝调元素自洽，
   得到干净、护眼、明亮的日间阅读主题。白底柔和不刺眼、对比充足。
   ============================================================ */
body[data-theme="light"] {
  /* 背景层：柔和冷白，非纯白（纯白反光刺眼）*/
  --paper: #f4f6fa;
  --paper-dark: #ffffff;
  --paper-darker: #e9edf3;
  /* 文字：深蓝灰，护眼且对比充足 */
  --ink: #1a2332;
  --ink-light: #3d4f63;
  --ink-faint: #6b7a8d;
  /* 强调色：延续原靛蓝体系 */
  --vermilion: #c0392b;
  --vermilion-light: #6a120e;
  --vermilion-dim: rgba(192,57,43,0.08);
  --gold: #2c6faa;
  --gold-light: #1c4f7c;
  --gold-dim: rgba(44,111,170,0.08);
  --jade: #1a8a5c;
  --jade-light: #28a06e;
  --jade-dim: rgba(26,138,92,0.10);
  --line: rgba(26,35,50,0.10);
  --line-soft: rgba(26,35,50,0.05);
  --mu-color: #1a7a42; --huo-color: #c0392b; --tu-color: #9a7020;
  --jin-color: #4a5a70; --shui-color: #2c6faa;
  /* 复合变量：补全，卡片/输入/标题用干净的白与浅灰层次 */
  --panel-bg: linear-gradient(160deg, #ffffff, #f4f6fa);
  --input-bg: #ffffff;
  --title-bg: linear-gradient(160deg, #ffffff, #eef2f7);
  --bg-core1: #f4f6fa; --bg-core2: #e9edf3;
  --bg-glow1: rgba(44,111,170,0.05); --bg-glow2: rgba(61,142,212,0.04); --bg-glow3: rgba(26,138,92,0.03);
  background: #f4f6fa !important;
  color: #1a2332 !important;
}

/* ===== 测算页沉浸式主题主视觉 ===== */
.calculator-visual {
  --visual-accent: #d6b76a;
  position: relative;
  min-height: 250px;
  margin: 4px 0 28px;
  overflow: hidden;
  border: 1px solid rgba(214, 183, 106, 0.42);
  border-radius: 18px;
  background: #0a121e;
  box-shadow: 0 24px 60px rgba(2, 8, 17, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  isolation: isolate;
}

.calculator-visual::before,
.calculator-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.calculator-visual::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 11, 20, 0.93) 0%, rgba(5, 11, 20, 0.68) 42%, rgba(5, 11, 20, 0.12) 75%),
    linear-gradient(0deg, rgba(5, 11, 20, 0.72) 0%, transparent 56%);
}

.calculator-visual::after {
  width: 150px;
  height: 150px;
  top: -76px;
  right: -42px;
  border: 1px solid rgba(239, 208, 128, 0.36);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(239, 208, 128, 0.04), 0 0 0 36px rgba(239, 208, 128, 0.025);
}

.calculator-visual img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(0.92) contrast(1.06) brightness(0.78);
  transform: scale(1.015);
  transition: transform 800ms ease, filter 800ms ease;
}

.calculator-visual:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.06) brightness(0.86);
}

.calculator-visual figcaption {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 5vw, 58px);
  bottom: clamp(24px, 4vw, 44px);
  display: flex;
  max-width: 620px;
  flex-direction: column;
  align-items: flex-start;
  color: #f7f0df;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}

.calculator-visual__eyebrow {
  margin-bottom: 12px;
  color: var(--visual-accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.calculator-visual strong {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: clamp(1.55rem, 3.5vw, 2.55rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.calculator-visual small {
  margin-top: 12px;
  color: rgba(242, 239, 230, 0.76);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.calculator-visual--ziwei { --visual-accent: #d8b8ff; }
.calculator-visual--zodiac { --visual-accent: #9ecbff; }
.calculator-visual--qimen { --visual-accent: #e3c57b; }

#viewSingle,
#viewZiwei,
#viewZodiac,
#viewQimen {
  --calculator-accent: #d6b76a;
  --calculator-glow: rgba(214, 183, 106, 0.14);
}

#viewZiwei { --calculator-accent: #c8a5ec; --calculator-glow: rgba(155, 103, 214, 0.16); }
#viewZodiac { --calculator-accent: #8bbcea; --calculator-glow: rgba(73, 143, 205, 0.16); }
#viewQimen { --calculator-accent: #d7b45d; --calculator-glow: rgba(187, 145, 63, 0.16); }

#viewSingle > .input-panel,
#viewZiwei > .input-panel,
#viewZodiac > .input-panel,
#viewQimen > .input-panel {
  border-top-color: color-mix(in srgb, var(--calculator-accent) 52%, transparent);
  box-shadow: 0 18px 45px var(--calculator-glow), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

@media (max-width: 680px) {
  .calculator-visual {
    min-height: 210px;
    margin: 2px 0 20px;
    border-radius: 14px;
  }

  .calculator-visual::before {
    background: linear-gradient(0deg, rgba(5, 11, 20, 0.94) 0%, rgba(5, 11, 20, 0.42) 78%, rgba(5, 11, 20, 0.18) 100%);
  }

  .calculator-visual figcaption {
    right: 20px;
    bottom: 20px;
    left: 20px;
  }

  .calculator-visual__eyebrow {
    margin-bottom: 8px;
    font-size: 0.68rem;
  }

  .calculator-visual strong {
    font-size: clamp(1.28rem, 6vw, 1.65rem);
    letter-spacing: 0.04em;
  }

  .calculator-visual small {
    margin-top: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-visual img { transition: none; }
  .calculator-visual:hover img { transform: scale(1.015); }
}

/* 桌面端采用简洁系统光标，交互与输入状态保持清晰。 */
@media (hover: hover) and (pointer: fine) {
  html,
  body {
    cursor: auto !important;
  }

  a,
  button,
  summary,
  select,
  label[for],
  [role="button"],
  [data-view],
  [data-enter-view] {
    cursor: pointer !important;
  }

  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  [contenteditable="true"] {
    cursor: text !important;
  }
}
/* 背景光晕层：日间用极淡的冷白渐变，避免深色残留 */
body[data-theme="light"]::before {
  background: linear-gradient(180deg, #eef2f7 0%, #f4f6fa 60%, #f4f6fa 100%) !important;
  opacity: 1 !important;
}
body[data-theme="light"]::after { display: none !important; }
/* 标题书法体在白底保持深蓝灰清晰可读（覆盖鎏金规则已由:not排除，此处保险） */
body[data-theme="light"] header h1 {
  background: none !important;
  -webkit-text-fill-color: #1a2332 !important;
  color: #1a2332 !important;
  filter: none !important;
}
/* 称号卡在日间：白底 + 蓝调边框，去掉深色渐变 */
body[data-theme="light"] .title-card {
  background: linear-gradient(160deg, #ffffff, #f4f6fa) !important;
  border-color: rgba(44,111,170,0.25) !important;
  box-shadow: 0 16px 40px -24px rgba(44,111,170,0.35) !important;
}
body[data-theme="light"] .tc-name {
  background: none !important;
  -webkit-text-fill-color: #2c6faa !important;
  color: #2c6faa !important;
}
/* ===== 日间主题修复 结束 ===== */

/* ===== 风水板块内容增强（2026-07-04） ===== */
.fs-sec { margin: 18px 0; }
.fs-sec-t { font-size: 0.92rem; color: var(--gold-light, #e0c078); font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line, rgba(255,255,255,0.08)); }
.fs-p { font-size: 0.86rem; line-height: 1.9; color: var(--ink-light, #b8b0c8); margin: 0; }
.fs-zone { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line, rgba(255,255,255,0.06)); }
.fs-zone:last-child { border-bottom: none; }
.fs-zone-k { flex: 0 0 auto; width: 3.2em; font-size: 0.84rem; color: var(--gold, #d4a853); font-weight: 600; letter-spacing: 2px; }
.fs-zone-v { flex: 1; font-size: 0.82rem; line-height: 1.8; color: var(--ink-light, #b8b0c8); }

/* ===== 姓名学五格逐格详解（2026-07-04） ===== */
.nm-ge { padding: 12px 0; border-bottom: 1px dashed var(--line, rgba(255,255,255,0.06)); }
.nm-ge:last-of-type { border-bottom: none; }
.nm-ge-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nm-ge-name { font-size: 0.9rem; color: var(--gold, #d4a853); font-weight: 600; letter-spacing: 2px; }
.nm-ge-num { font-size: 0.78rem; color: var(--ink-light, #b8b0c8); }
.nm-ge-jx { font-size: 0.82rem; font-weight: 600; margin-left: auto; }
.nm-ge-role { font-size: 0.76rem; line-height: 1.7; color: var(--ink-faint, #8a8296); margin-top: 5px; }
.nm-ge-desc { font-size: 0.82rem; line-height: 1.85; color: var(--ink-light, #b8b0c8); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--gold-dim, rgba(212,168,83,0.3)); }
.nm-sancai { margin-top: 16px; padding: 14px; background: var(--gold-dim, rgba(212,168,83,0.08)); border-radius: 8px; }
.nm-sancai-hd { font-size: 0.88rem; color: var(--gold-light, #e0c078); font-weight: 600; letter-spacing: 1px; margin-bottom: 6px; }

/* ===== 快捷输入框·精致金色调（2026-07-04） ===== */
.quick-input-row { text-align: center !important; margin-top: 14px !important; }
.quick-input {
  width: 100% !important; max-width: 400px !important;
  padding: 11px 18px !important;
  background: linear-gradient(180deg, var(--gold-dim), rgba(0,0,0,0)) !important;
  border: 1px solid var(--gold-dim) !important;
  border-radius: 22px !important;
  color: var(--gold-light) !important;
  font-size: 0.85rem !important; letter-spacing: 0.5px !important;
  text-align: center !important;
  box-shadow: inset 0 0 12px rgba(199,169,107,0.06), 0 1px 3px rgba(0,0,0,0.15) !important;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s !important;
}
.quick-input::placeholder {
  color: var(--gold) !important; opacity: 0.62 !important;
  font-size: 0.78rem !important; letter-spacing: 0.3px !important;
}
.quick-input:hover {
  border-color: rgba(199,169,107,0.45) !important;
}
.quick-input:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, var(--gold-dim), rgba(0,0,0,0)) !important;
  box-shadow: 0 0 0 3px var(--gold-dim), 0 0 14px rgba(199,169,107,0.25), inset 0 0 10px rgba(199,169,107,0.08) !important;
  color: var(--gold-light) !important;
}

/* 暖宣纸(浅色)主题下的快捷输入框：浅底金边深字，保证对比度 */
body[data-theme="light"] .quick-input {
  background: linear-gradient(180deg, rgba(199,169,107,0.10), rgba(255,255,255,0.4)) !important;
  border-color: rgba(199,169,107,0.5) !important;
  color: #7a5c1e !important;
}
body[data-theme="light"] .quick-input::placeholder { color: #a07d38 !important; opacity: 0.8 !important; }
body[data-theme="light"] .quick-input:focus {
  border-color: #b5924a !important;
  box-shadow: 0 0 0 3px rgba(199,169,107,0.2), 0 0 12px rgba(199,169,107,0.3) !important;
  color: #6b4e15 !important;
}

/* ===== 星座流年·大运（2026-07-04） ===== */
.zy-transit { margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line, rgba(255,255,255,0.08)); background: rgba(255,255,255,0.02); }
.zy-jup { border-left: 3px solid #e0c078; }
.zy-sat { border-left: 3px solid #6ea8d8; }
.zy-t-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.zy-t-star { font-size: 0.9rem; font-weight: 600; color: var(--gold-light, #e0c078); letter-spacing: 1px; }
.zy-t-loc { font-size: 0.74rem; color: var(--ink-faint, #8a8296); }
.zy-t-body { font-size: 0.84rem; line-height: 1.9; color: var(--ink-light, #b8b0c8); }

/* ===== 星座流月运势网格（2026-07-04） ===== */
.zm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.zm-cell { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,0.07)); background: rgba(255,255,255,0.018); position: relative; }
.zm-cell.zm-now { box-shadow: 0 0 0 1.5px var(--gold, #d4a853); }
.zm-good { border-left: 3px solid #6cc08a; }
.zm-ok   { border-left: 3px solid #e0c078; }
.zm-mid  { border-left: 3px solid #8a8296; }
.zm-bad  { border-left: 3px solid #e07a6e; }
.zm-mo { font-size: 0.8rem; font-weight: 600; color: var(--ink, #f2eff6); }
.zm-nowtag { font-size: 0.62rem; color: var(--gold, #d4a853); border: 1px solid var(--gold-dim, rgba(212,168,83,0.4)); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.zm-star { font-size: 0.76rem; color: var(--gold-light, #e0c078); letter-spacing: 2px; margin: 4px 0 2px; }
.zm-tag { font-size: 0.76rem; color: var(--ink, #f2eff6); font-weight: 500; margin-bottom: 4px; }
.zm-txt { font-size: 0.72rem; line-height: 1.7; color: var(--ink-faint, #9a92a6); }
@media (max-width: 480px) { .zm-grid { grid-template-columns: 1fr; } }

/* ===== SVG 本命星盘轮盘图（2026-07-04） ===== */
.natal-wheel-wrap { display: block; text-align: center; margin: 14px auto 4px; }
.natal-wheel { display: inline-block; width: 340px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
.natal-wheel text { font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif; }

/* ===== 星座配对深化（2026-07-04） ===== */
.zp-dims { margin: 14px 0; }
.zp-dim { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.zp-dim-k { flex: 0 0 auto; width: 4.5em; font-size: 0.76rem; color: var(--ink-light, #b8b0c8); }
.zp-dim-bar { flex: 1; height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.zp-dim-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold, #d4a853), var(--gold-light, #e6cf97)); border-radius: 4px; }
.zp-dim-v { flex: 0 0 auto; width: 2em; text-align: right; font-size: 0.76rem; color: var(--gold-light, #e6cf97); }
.zp-advice { margin: 12px 0; padding: 12px 14px; background: var(--gold-dim, rgba(212,168,83,0.08)); border-radius: 10px; font-size: 0.82rem; line-height: 1.85; color: var(--ink-light, #b8b0c8); }
.zp-advice-t { display: block; color: var(--gold-light, #e6cf97); font-weight: 600; margin-bottom: 5px; font-size: 0.84rem; }

/* ===== 星座配对速查图谱（2026-07-04） ===== */
.zmc-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line, rgba(255,255,255,0.06)); }
.zmc-row:last-of-type { border-bottom: none; }
.zmc-k { flex: 0 0 auto; width: 7.5em; font-size: 0.78rem; font-weight: 600; color: var(--ink-light, #b8b0c8); }
.zmc-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.zmc-chip { font-size: 0.74rem; padding: 3px 9px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line, rgba(255,255,255,0.08)); color: var(--ink, #f2eff6); }
.zmc-best .zmc-chip { border-color: rgba(230,207,151,0.4); }
.zmc-opp .zmc-chip { border-color: rgba(224,122,110,0.4); }
.zmc-neu .zmc-chip { border-color: rgba(138,130,150,0.35); }

/* ===== 太阳月亮上升三合一人格画像（2026-07-04） ===== */
.tri-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.tri-cell { flex: 1; min-width: 140px; padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--line, rgba(255,255,255,0.08)); }
.tri-t { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gold-light, #e6cf97); margin-bottom: 5px; }
.tri-d { display: block; font-size: 0.76rem; line-height: 1.7; color: var(--ink-light, #b8b0c8); }
.tri-story { margin: 12px 0; padding: 14px 16px; background: var(--gold-dim, rgba(212,168,83,0.07)); border-radius: 10px; font-size: 0.85rem; line-height: 2; color: var(--ink-light, #c4bcd0); }

/* ===== 专业星盘面板·醒目高亮（2026-07-04） ===== */
.natal-highlight {
  border: 1px solid var(--gold-dim, rgba(212,168,83,0.35)) !important;
  background: linear-gradient(180deg, rgba(199,169,107,0.06), rgba(0,0,0,0)) !important;
  box-shadow: 0 0 18px rgba(199,169,107,0.08) !important;
}
.natal-btn-hl {
  background: linear-gradient(135deg, var(--gold, #d4a853), var(--gold-light, #e6cf97)) !important;
  color: #2a2015 !important; font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(199,169,107,0.3) !important;
}
.natal-btn-hl:hover { filter: brightness(1.08); }

/* ===== 塔罗牌阵视图（2026-07-04） ===== */
.tarot-spread-pick { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; max-width: 420px; margin: 0 auto; }
.tsp-btn { padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line,rgba(255,255,255,0.1)); background: rgba(255,255,255,0.02); color: var(--ink-light,#b8b0c8); font-size: 0.82rem; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.tsp-btn span { font-size: 0.62rem; color: var(--ink-faint,#8a8296); }
.tsp-btn.active { border-color: var(--gold,#d4a853); background: var(--gold-dim,rgba(212,168,83,0.12)); color: var(--gold-light,#e6cf97); }
.tsp-btn.active span { color: var(--gold,#d4a853); }

.tarot-draw-stage { display: grid; justify-items: center; gap: 9px; margin-top: 16px; }
.tarot-draw-stage > p { margin: 0; color: var(--ink-faint,#9b92a8); font-size: 0.68rem; letter-spacing: 0.4px; }
.tarot-deck-preview { position: relative; width: 62px; height: 93px; margin: 0 0 4px; filter: drop-shadow(0 14px 18px rgba(4,3,12,0.48)); }
.tarot-deck-preview img, .tarot-deck-card { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid rgba(234,201,119,0.7); border-radius: 7px; object-fit: cover; }
.tarot-deck-preview img { z-index: 3; animation: tarotDeckBreathe 3.8s ease-in-out infinite; }
.tarot-deck-card { z-index: 1; background: linear-gradient(150deg,#2d1f4f,#0e0b20); }
.tarot-deck-card--left { transform: translateX(-8px) rotate(-8deg); }
.tarot-deck-card--right { transform: translateX(8px) rotate(8deg); }
@keyframes tarotDeckBreathe { 0%,100% { transform: translateY(0); box-shadow: 0 0 8px rgba(213,173,84,0.18); } 50% { transform: translateY(-4px); box-shadow: 0 0 24px rgba(213,173,84,0.48); } }

#tarotDrawBtn { position: relative; min-width: 180px; overflow: hidden; box-shadow: 0 0 16px rgba(199,169,107,0.25); transition: box-shadow .25s ease, transform .25s ease, opacity .25s ease; }
#tarotDrawBtn:hover { box-shadow: 0 0 28px rgba(199,169,107,0.48); transform: translateY(-1px); }
#tarotDrawBtn.is-shuffling { cursor: wait; opacity: .82; }
#tarotDrawBtn.is-shuffling span { display: inline-block; animation: tarotButtonSpin 1.1s linear infinite; }
@keyframes tarotButtonSpin { to { transform: rotate(360deg); } }

.tarot-panel { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 16px; padding: 28px 30px; border: 1px solid rgba(218,181,95,0.25); border-radius: 18px; background: radial-gradient(circle at 50% 20%,rgba(90,63,132,0.25),transparent 38%),linear-gradient(155deg,rgba(27,21,43,0.98),rgba(10,9,20,0.99)); box-shadow: inset 0 1px 0 rgba(255,244,205,0.05),0 24px 50px rgba(3,2,10,0.26); }
.tarot-panel::before { content: ''; position: absolute; z-index: -1; top: -90px; left: 50%; width: 440px; height: 220px; transform: translateX(-50%); background: radial-gradient(ellipse,rgba(224,185,94,0.22),rgba(102,72,154,0.10) 42%,transparent 72%); pointer-events: none; }
.tarot-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: radial-gradient(circle,rgba(246,219,151,.72) 0 1px,transparent 1.5px); background-size: 47px 47px; background-position: 8px 14px; mask-image: linear-gradient(to bottom,#000,transparent 68%); pointer-events: none; }
.tarot-panel .tarot-hd { position: relative; z-index: 1; text-align: center; }
.tarot-panel .tarot-hd h4 { margin-bottom: 5px; color: #f4e7bd; letter-spacing: 4px; text-shadow: 0 0 22px rgba(224,185,94,.28); }
.tarot-panel .tarot-intro { margin: 4px 0 8px; color: #bdb5ca; font-size: 0.78rem; line-height: 1.8; }
.tarot-ritual-status { display: flex; min-height: 30px; align-items: center; justify-content: center; gap: 10px; margin: 10px auto 2px; color: #dbc27f; font-size: .7rem; letter-spacing: 1.6px; }
.tarot-ritual-orbit { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(225,190,105,.42); border-radius: 50%; box-shadow: 0 0 16px rgba(225,190,105,.2); animation: tarotOrbit 2.4s linear infinite; }
@keyframes tarotOrbit { to { transform: rotate(360deg); } }

/* 高清牌面与“洗牌—落牌—依次开牌”动画 */
.tarot-panel .tarot-cards { display: flex; justify-content: center; gap: clamp(16px,3vw,28px); flex-wrap: wrap; margin: 20px 0 24px; perspective: 1400px; }
.tarot-panel .tarot-card-slot { display: flex; width: 176px; max-width: 31%; flex-direction: column; align-items: center; }
.tarot-panel .tarot-pos { margin-bottom: 9px; color: #ead69b; font-size: .74rem; font-weight: 600; letter-spacing: 2px; text-shadow: 0 0 10px rgba(218,179,87,.32); }
.tarot-panel .tarot-slot-meaning { min-height: 3.1em; margin-top: 10px; color: #9e96aa; font-size: .68rem; line-height: 1.55; text-align: center; }
.tarot-panel .tarot-card { width: 156px; height: 234px; opacity: 0; perspective: 1400px; transform: translateZ(0); transform-origin: 50% 110%; transition: transform .32s cubic-bezier(.2,.7,.2,1),filter .32s ease; animation: tarotCardDeal .88s cubic-bezier(.18,.84,.22,1) var(--deal-delay) forwards; will-change: transform,opacity; }
.tarot-panel .tarot-cards-1 .tarot-card { width: 184px; height: 276px; }
@keyframes tarotCardDeal { 0% { opacity: 0; transform: translate3d(var(--deal-x),-64px,0) scale(.68) rotate(var(--deal-angle)); } 72% { opacity: 1; transform: translate3d(0,5px,0) scale(1.018); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); } }
.tarot-panel .tarot-card-inner { position: relative; width: 100%; height: 100%; transform: translateZ(0) rotateY(0); transform-style: preserve-3d; will-change: transform; }
.tarot-panel.is-revealing .tarot-card-inner { animation: tarotCardFlip 1.08s cubic-bezier(.22,.7,.18,1) var(--reveal-delay) forwards; }
.tarot-panel.is-revealed .tarot-card-inner { transform: rotateY(180deg); }
@keyframes tarotCardFlip { 0% { transform: translate3d(0,0,0) rotateY(0) scale(1); } 28% { transform: translate3d(0,-3px,0) rotateY(36deg) scale(1.012); } 50% { transform: translate3d(0,-7px,0) rotateY(90deg) scale(1.035); } 74% { transform: translate3d(0,-3px,0) rotateY(151deg) scale(1.014); } 100% { transform: translate3d(0,0,0) rotateY(180deg) scale(1); } }
.tarot-panel.is-revealed .tarot-card:hover { transform: translateY(-7px) scale(1.025); filter: drop-shadow(0 12px 18px rgba(211,173,86,.24)); }
.tarot-panel .tarot-card-back,.tarot-panel .tarot-card-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(235,203,124,.85); border-radius: 13px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 0 0 4px rgba(10,8,22,.52),0 10px 26px rgba(2,1,8,.45); }
.tarot-panel .tarot-card-back { z-index: 2; opacity: 1; background: #120d27; }
.tarot-panel .tarot-card-back::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(246,218,144,.38); border-radius: 9px; box-shadow: inset 0 0 18px rgba(219,177,78,.16); }
.tarot-panel .tarot-card-back img,.tarot-panel .tc-art-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarot-panel .tarot-card-face { z-index: 1; padding: 0; opacity: 0; transform: rotateY(180deg); background: #100c20; }
.tarot-panel.is-revealing .tarot-card-back { animation: tarotBackHide 1.08s cubic-bezier(.3,0,.7,1) var(--reveal-delay) forwards; }
.tarot-panel.is-revealing .tarot-card-face { animation: tarotFaceShow 1.08s cubic-bezier(.3,0,.7,1) var(--reveal-delay) forwards; }
.tarot-panel.is-revealed .tarot-card-back { z-index: 1; opacity: 0; visibility: hidden; }
.tarot-panel.is-revealed .tarot-card-face { z-index: 2; opacity: 1; visibility: visible; }
@keyframes tarotBackHide { 0%,38% { opacity: 1; } 50% { opacity: .18; } 62%,100% { opacity: 0; } }
@keyframes tarotFaceShow { 0%,38% { opacity: 0; } 50% { opacity: .18; } 62%,100% { opacity: 1; } }
.tarot-panel .tc-face-content { position: absolute; inset: 0; transform-origin: 50% 50%; }
.tarot-panel .tarot-card.reversed .tc-face-content { transform: rotate(180deg); }
.tarot-panel .tc-art-image { position: absolute; inset: 0; transform: scale(1.035); }
.tarot-panel .tc-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border-radius: 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.tarot-panel .tc-symbol { opacity: .72; filter: drop-shadow(0 0 2px rgba(8,5,18,.9)); }
.tarot-panel .tarot-card-face::after { content: ''; position: absolute; z-index: 2; top: -65%; left: -85%; width: 48%; height: 230%; transform: rotate(24deg); background: linear-gradient(90deg,transparent,rgba(255,242,196,.5),transparent); pointer-events: none; }
.tarot-panel.is-revealing .tarot-card-face::after,.tarot-panel.is-revealed .tarot-card-face::after { animation: tarotCardShine 1.25s ease-out calc(var(--reveal-delay) + .28s) both; }
@keyframes tarotCardShine { from { left: -85%; opacity: 0; } 28% { opacity: 1; } to { left: 155%; opacity: 0; } }
.tarot-panel .tarot-card-face .tc-ori { position: absolute; z-index: 4; top: 7px; right: 7px; padding: 2px 7px; border: 1px solid rgba(225,191,108,.5); border-radius: 999px; background: rgba(8,7,17,.78); color: #ead69b; font-size: .58rem; letter-spacing: 1px; backdrop-filter: blur(6px); }
.tarot-panel .tarot-card.reversed .tarot-card-face { border-color: rgba(220,126,118,.9); box-shadow: inset 0 0 0 4px rgba(41,10,25,.38),0 10px 26px rgba(2,1,8,.45),0 0 19px rgba(220,126,118,.16); }
.tarot-panel .tarot-card.reversed .tc-ori { border-color: rgba(228,140,130,.62); color: #f1aaa1; }

/* 解读在最后一张牌打开后显现，避免动画期间文字抢焦点。 */
.tarot-panel .tarot-readings,.tarot-panel .tarot-summary,.tarot-panel > .st-concl { opacity: 0; transform: translateY(12px); }
.tarot-panel.is-revealed .tarot-readings { animation: tarotReadingIn .65s ease .15s forwards; }
.tarot-panel.is-revealed .tarot-summary { animation: tarotReadingIn .65s ease .34s forwards; }
.tarot-panel.is-revealed > .st-concl { animation: tarotReadingIn .65s ease .5s forwards; }
@keyframes tarotReadingIn { to { opacity: 1; transform: none; } }
.tarot-panel .tarot-readings { margin: 18px 0; }
.tarot-panel .tarot-reading { padding: 13px 0; border-bottom: 1px dashed rgba(226,200,137,.14); }
.tarot-panel .tarot-reading:last-child { border-bottom: none; }
.tarot-panel .tarot-reading-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.tarot-panel .tr-pos { color: #ead69b; font-size: .84rem; font-weight: 600; letter-spacing: 1px; }
.tarot-panel .tr-card { color: #aaa2b6; font-size: .74rem; }
.tarot-panel .tarot-reading-body { color: #c9c2d2; font-size: .84rem; line-height: 1.9; }
.tarot-panel .tarot-summary { margin: 14px 0; padding: 16px 18px; border: 1px solid rgba(224,185,94,.14); border-radius: 12px; background: linear-gradient(135deg,rgba(212,168,83,.11),rgba(101,71,145,.09)); }
.tarot-panel .tarot-summary-t { margin-bottom: 7px; color: #ead69b; font-size: .88rem; font-weight: 600; }
.tarot-panel .tarot-summary-body { color: #c9c2d2; font-size: .84rem; line-height: 1.95; }
#tarotSpreadResult .tarot-panel { animation: tarotPanelIn .48s ease; }
@keyframes tarotPanelIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
  .tarot-panel { padding: 22px 13px; border-radius: 14px; }
  .tarot-panel .tarot-cards { gap: 12px 7px; }
  .tarot-panel .tarot-card-slot { width: calc(33.333% - 6px); max-width: none; }
  .tarot-panel .tarot-card { width: min(116px,27vw); height: min(174px,40.5vw); }
  .tarot-panel .tarot-cards-1 .tarot-card { width: 168px; height: 252px; }
  .tarot-panel .tarot-pos { font-size: .67rem; letter-spacing: 1px; }
  .tarot-panel .tarot-slot-meaning { font-size: .61rem; }
  .tarot-panel .tc-symbol { opacity: .66; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-deck-preview img,.tarot-ritual-orbit,#tarotDrawBtn.is-shuffling span,.tarot-panel,.tarot-panel .tarot-card,.tarot-panel.is-revealing .tarot-card-inner,.tarot-panel.is-revealing .tarot-card-back,.tarot-panel.is-revealing .tarot-card-face,.tarot-panel.is-revealing .tarot-card-face::after,.tarot-panel.is-revealed .tarot-card-face::after,.tarot-panel.is-revealed .tarot-readings,.tarot-panel.is-revealed .tarot-summary,.tarot-panel.is-revealed > .st-concl { animation: none !important; }
  .tarot-panel .tarot-card { opacity: 1; }
  .tarot-panel.is-revealing .tarot-card-inner,.tarot-panel.is-revealed .tarot-card-inner { transform: rotateY(180deg); }
  .tarot-panel.is-revealing .tarot-card-back,.tarot-panel.is-revealed .tarot-card-back { opacity: 0; visibility: hidden; }
  .tarot-panel.is-revealing .tarot-card-face,.tarot-panel.is-revealed .tarot-card-face { opacity: 1; visibility: visible; }
  .tarot-panel.is-revealed .tarot-readings,.tarot-panel.is-revealed .tarot-summary,.tarot-panel.is-revealed > .st-concl { opacity: 1; transform: none; }
}

/* ===== 六壬分事项断语（2026-07-04） ===== */
.liuren-topic { margin: 14px 0; padding: 14px 16px; background: var(--gold-dim, rgba(212,168,83,0.09)); border-radius: 10px; border-left: 3px solid var(--gold, #d4a853); }
.liuren-topic-hd { font-size: 0.86rem; font-weight: 600; color: var(--gold-light, #e6cf97); margin-bottom: 7px; }
.liuren-topic-body { font-size: 0.85rem; line-height: 1.95; color: var(--ink-light, #b8b0c8); }

/* 2026.08.14-2 六神各自的场景配色：六壬结果不再只有一种画面基调。
   每个课神一套主色与场景纹理，起课后由 data-liuren-shen 切换。 */
#liurenResult .liuren-course {
  --lr-accent: #d4a853;
  --lr-accent-soft: rgba(212,168,83,.14);
  --lr-scene: linear-gradient(135deg, rgba(212,168,83,.16), rgba(4,10,17,.04));
}
#liurenResult .liuren-course[data-liuren-shen="大安"] {
  --lr-accent: #7fb98a;
  --lr-accent-soft: rgba(127,185,138,.15);
  --lr-scene: radial-gradient(120% 140% at 12% 12%, rgba(127,185,138,.22), transparent 62%), linear-gradient(135deg, rgba(58,104,73,.18), rgba(4,14,10,.05));
}
#liurenResult .liuren-course[data-liuren-shen="留连"] {
  --lr-accent: #c9a86a;
  --lr-accent-soft: rgba(201,168,106,.14);
  --lr-scene: radial-gradient(140% 130% at 78% 20%, rgba(160,132,74,.2), transparent 60%), linear-gradient(120deg, rgba(92,78,48,.2), rgba(14,12,7,.05));
}
#liurenResult .liuren-course[data-liuren-shen="速喜"] {
  --lr-accent: #f08a72;
  --lr-accent-soft: rgba(240,138,114,.16);
  --lr-scene: radial-gradient(120% 150% at 20% 80%, rgba(226,102,78,.24), transparent 60%), linear-gradient(140deg, rgba(150,58,42,.2), rgba(20,8,6,.05));
}
#liurenResult .liuren-course[data-liuren-shen="赤口"] {
  --lr-accent: #b8c4cc;
  --lr-accent-soft: rgba(184,196,204,.14);
  --lr-scene: radial-gradient(130% 130% at 84% 74%, rgba(150,170,184,.2), transparent 58%), linear-gradient(125deg, rgba(74,88,98,.2), rgba(8,12,15,.05));
}
#liurenResult .liuren-course[data-liuren-shen="小吉"] {
  --lr-accent: #78b7d6;
  --lr-accent-soft: rgba(120,183,214,.15);
  --lr-scene: radial-gradient(125% 145% at 16% 26%, rgba(94,158,196,.22), transparent 60%), linear-gradient(135deg, rgba(44,92,120,.2), rgba(5,12,18,.05));
}
#liurenResult .liuren-course[data-liuren-shen="空亡"] {
  --lr-accent: #a79ec4;
  --lr-accent-soft: rgba(167,158,196,.13);
  --lr-scene: radial-gradient(150% 150% at 50% 8%, rgba(126,116,158,.2), transparent 62%), linear-gradient(150deg, rgba(58,52,80,.2), rgba(8,7,14,.05));
}

#liurenResult .liuren-scene {
  position: relative;
  overflow: hidden;
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(212,168,83,.3);
  border-color: var(--lr-accent);
  border-radius: 16px;
  background-image: var(--lr-scene);
  background-color: rgba(6,12,18,.28);
}
#liurenResult .liuren-scene::after {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lr-accent), transparent);
  opacity: .75;
  content: "";
}
#liurenResult .liuren-scene__glyph {
  display: block;
  color: var(--lr-accent);
  font-family: var(--font-serif, serif);
  font-size: 2.1rem;
  letter-spacing: .22em;
  line-height: 1.25;
}
#liurenResult .liuren-scene__mood {
  display: block;
  margin-top: 4px;
  color: var(--ink-light, #c3bcd2);
  font-size: .82rem;
  letter-spacing: .05em;
}
#liurenResult .liuren-course .liuren-topic {
  background: var(--lr-accent-soft);
  border-left-color: var(--lr-accent);
}
#liurenResult .liuren-course .liuren-topic-hd { color: var(--lr-accent); }

/* 三格课盘跟随各自课神着色，月课、日课、时课不再同色。 */
#liurenResult .liuren-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 16px 0; }
#liurenResult .liuren-card {
  position: relative;
  flex: 1;
  min-width: 140px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(212,168,83,.32);
  border-color: var(--lr-card-accent, rgba(212,168,83,.32));
  border-radius: 12px;
  background-image: var(--lr-card-scene, none);
  background-color: var(--bg-surface, rgba(255,255,255,.025));
  text-align: center;
}
#liurenResult .liuren-card.is-main { border-width: 2px; }
/* 2026.08.20-4 · 小六壬六神课盘 v3：横向呈现六神顺布、月日时三课与五行方位。 */
#liurenResult .liuren-card__art {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid color-mix(in srgb, var(--lr-card-accent) 32%, transparent);
  opacity: .96;
  filter: saturate(.96) contrast(1.08) brightness(.94);
  transform: scale(1.002);
  transform-origin: center;
  transition: transform .5s ease, filter .5s ease, opacity .5s ease;
  box-shadow: inset 0 -18px 24px rgba(3,10,16,.2);
}
#liurenResult .liuren-card:hover .liuren-card__art {
  opacity: 1;
  filter: saturate(1.04) contrast(1.1) brightness(1.02);
  transform: scale(1.025);
}
#liurenResult .liuren-card__body { padding: 11px 12px 13px; }
#liurenResult .liuren-card__label { color: var(--text-3, #8b8199); font-size: .68rem; letter-spacing: .1em; }
#liurenResult .liuren-card__name { margin: 6px 0; color: var(--lr-card-accent, #f2eff6); font-family: var(--font-serif, serif); font-size: 1.32rem; letter-spacing: .1em; }
#liurenResult .liuren-card__meta { color: var(--text-2, #b8b0c8); font-size: .74rem; }

/* ===== 择日黄历卡片增强（2026-07-04） ===== */
.date-card .dc-hl { font-size: 0.72rem; line-height: 1.65; color: var(--ink-light, #b8b0c8); margin-top: 5px; text-align: left; }
.date-card .dc-yi, .date-card .dc-ji { display: inline-block; width: 1.4em; text-align: center; border-radius: 4px; font-size: 0.66rem; margin-right: 5px; font-weight: 600; }
.date-card .dc-yi { background: rgba(108,192,138,0.18); color: #6cc08a; }
.date-card .dc-ji { background: rgba(224,122,110,0.18); color: #e07a6e; }
.date-card .dc-meta { font-size: 0.64rem; color: var(--ink-faint, #8a8296); margin-top: 6px; line-height: 1.6; text-align: left; }

/* ===== 奇门方位应用建议（2026-07-04） ===== */
.qm-fang { margin: 10px 0; padding: 12px 14px; border-radius: 10px; }
.qm-fang-topic { background: var(--gold-dim, rgba(212,168,83,0.1)); border-left: 3px solid var(--gold, #d4a853); }
.qm-fang-hd { font-size: 0.82rem; font-weight: 600; color: var(--gold-light, #e6cf97); margin-bottom: 6px; }
.qm-fang-dir { font-size: 1.3rem; color: var(--gold-light, #e6cf97); font-weight: 700; letter-spacing: 2px; }
.qm-fang-dir span { font-size: 0.7rem; color: var(--ink-faint, #8a8296); font-weight: 400; letter-spacing: 0; }
.qm-fang-use { font-size: 0.8rem; line-height: 1.8; color: var(--ink-light, #b8b0c8); margin-top: 5px; }
.qm-fang-list { margin: 8px 0; }
.qm-fang-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line, rgba(255,255,255,0.06)); }
.qm-fang-row:last-child { border-bottom: none; }
.qm-fang-d { flex: 0 0 auto; width: 3em; font-size: 0.86rem; font-weight: 600; color: var(--gold, #d4a853); }
.qm-fang-m { flex: 0 0 auto; width: 3.5em; font-size: 0.78rem; color: #6cc08a; }
.qm-fang-u { flex: 1; font-size: 0.74rem; color: var(--ink-light, #b8b0c8); line-height: 1.6; }

/* ===== 风水流年九宫飞星（2026-07-04） ===== */
.fs-fx-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; max-width: 300px; margin: 14px auto; }
.fs-fx-cell { padding: 8px 4px; border-radius: 8px; text-align: center; border: 1px solid var(--line,rgba(255,255,255,0.08)); }
.fx-dir { font-size: 0.64rem; color: var(--ink-faint,#8a8296); }
.fx-star { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.fx-name { font-size: 0.6rem; color: var(--ink-light,#b8b0c8); }
.fx-daji { background: rgba(212,168,83,0.2); border-color: var(--gold,#d4a853); }
.fx-daji .fx-star { color: #f0d98a; }
.fx-ji { background: rgba(108,192,138,0.12); }
.fx-ji .fx-star { color: #6cc08a; }
.fx-ping .fx-star { color: var(--ink-light,#b8b0c8); }
.fx-xiong { background: rgba(224,122,110,0.1); }
.fx-xiong .fx-star { color: #e0a04a; }
.fx-daxiong { background: rgba(224,122,110,0.2); border-color: #e07a6e; }
.fx-daxiong .fx-star { color: #e07a6e; }
.fx-center { opacity: 0.7; }
.fs-fx-key { margin: 14px 0; }
.fx-key-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line,rgba(255,255,255,0.06)); }
.fx-key-row:last-child { border-bottom: none; }
.fx-key-lbl { flex: 0 0 auto; width: 7em; font-size: 0.78rem; font-weight: 600; color: var(--gold-light,#e6cf97); }
.fx-key-dir { flex: 0 0 auto; width: 2.8em; font-size: 0.82rem; font-weight: 700; color: var(--gold,#d4a853); }
.fx-key-txt { flex: 1; font-size: 0.72rem; line-height: 1.65; color: var(--ink-light,#b8b0c8); }
.fs-fx-personal { margin: 12px 0; padding: 12px 14px; background: var(--gold-dim,rgba(212,168,83,0.08)); border-radius: 10px; font-size: 0.8rem; line-height: 1.85; color: var(--ink-light,#b8b0c8); }

/* ===== 智能起名推荐（2026-07-04） ===== */
.nmg-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 14px 0; }
.nmg-card { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--line,rgba(255,255,255,0.08)); text-align: center; }
.nmg-name { font-size: 1.4rem; font-weight: 700; color: var(--gold-light,#e6cf97); letter-spacing: 2px; font-family: serif; }
.nmg-meaning { font-size: 0.7rem; color: var(--ink-light,#b8b0c8); margin: 6px 0; line-height: 1.6; }
.nmg-shuli { font-size: 0.66rem; color: var(--ink-faint,#8a8296); }
.nmg-ji { color: #6cc08a; margin-left: 4px; }
@media (max-width:480px){ .nmg-list { grid-template-columns: 1fr; } }

/* ===== 顶部导航·惊艳改造（2026-07-04） ===== */
.top-nav {
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(18,12,30,0.92), rgba(13,8,21,0.82)) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(199,169,107,0.18) !important;
  position: relative !important;
}
/* 顶栏底部一条金色流光细线 */
.top-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,169,107,0.55), rgba(240,210,122,0.9), rgba(199,169,107,0.55), transparent);
  opacity: 0.7;
}
/* 导航项：精致玻璃胶囊 + 悬停上浮微光 */
.nav-item {
  padding: 8px 20px !important;
  border-radius: 22px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  border: 1px solid rgba(199,169,107,0.16) !important;
  color: #cfc8dc !important;
  background: rgba(255,255,255,0.02) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
}
.nav-item:hover {
  color: #f2e6c0 !important;
  border-color: rgba(199,169,107,0.55) !important;
  background: rgba(199,169,107,0.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(199,169,107,0.15) !important;
}
/* 激活态：金色流光渐变 + 发光（取代突兀红色） */
.nav-item.active {
  color: #1a1206 !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #f0d98a, #d4a853 55%, #c7912e) !important;
  border-color: rgba(240,210,122,0.8) !important;
  box-shadow: 0 0 16px rgba(212,168,83,0.45), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: none !important;
}
.nav-item.active:hover { transform: translateY(-1px) !important; box-shadow: 0 0 20px rgba(212,168,83,0.6), 0 4px 12px rgba(0,0,0,0.35) !important; }
/* "更多"按钮：与导航项一致的精致玻璃，去掉廉价虚线 */
.nav-more {
  padding: 8px 18px !important;
  border-radius: 22px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  border: 1px solid rgba(199,169,107,0.28) !important;
  background: rgba(199,169,107,0.05) !important;
  color: #cfc8dc !important;
  transition: all 0.28s ease !important;
}
.nav-more:hover, .nav-more[aria-expanded="true"] {
  color: #f2e6c0 !important;
  border-color: rgba(199,169,107,0.6) !important;
  background: rgba(199,169,107,0.12) !important;
}
/* 下拉板块：柔和展开 + 玻璃底 */
.nav-overflow.show {
  animation: navDrop 0.32s cubic-bezier(0.2,0.8,0.3,1) !important;
  background: linear-gradient(180deg, rgba(18,12,30,0.7), transparent) !important;
  border-radius: 0 0 14px 14px !important;
  margin: 0 -40px !important;
  padding: 12px 40px 10px !important;
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 浅色/宣纸主题下的导航适配（覆盖上面的深色玻璃，保证可读与协调） */
body[data-theme="light"] .top-nav, body[data-theme="paper"] .top-nav {
  background: linear-gradient(180deg, rgba(250,247,240,0.95), rgba(245,240,230,0.85)) !important;
  box-shadow: 0 2px 16px rgba(120,100,60,0.1), inset 0 -1px 0 rgba(199,169,107,0.3) !important;
}
body[data-theme="light"] .nav-item, body[data-theme="paper"] .nav-item {
  color: #7a5c30 !important; border-color: rgba(199,169,107,0.3) !important; background: rgba(199,169,107,0.05) !important;
}
body[data-theme="light"] .nav-item:hover, body[data-theme="paper"] .nav-item:hover {
  color: #5a3e1a !important; background: rgba(199,169,107,0.14) !important; border-color: rgba(199,169,107,0.55) !important;
}
body[data-theme="light"] .nav-item.active, body[data-theme="paper"] .nav-item.active {
  color: #3a2810 !important; background: linear-gradient(135deg,#f0d98a,#d4a853) !important; border-color: #c7912e !important;
}
body[data-theme="light"] .nav-more, body[data-theme="paper"] .nav-more {
  color: #7a5c30 !important; border-color: rgba(199,169,107,0.4) !important; background: rgba(199,169,107,0.06) !important;
}

/* ===== 首页星图入口（2026-07-04） ===== */
.starmap-entry { margin: 20px 0 28px; padding: 18px 12px 10px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(42,33,66,0.35), rgba(13,8,21,0.15)); border: 1px solid rgba(199,169,107,0.12); }
.sme-title { text-align: center; color: var(--gold-light,#e6cf97); font-size: 1.05rem; letter-spacing: 4px; font-family: serif; }
.sme-sub { text-align: center; color: var(--ink-faint,#8a8296); font-size: 0.72rem; margin-top: 5px; letter-spacing: 1px; }
.starmap-nav { width: 100%; max-width: 660px; margin: 6px auto 0; }
.starmap-nav svg { width: 100%; height: auto; overflow: visible; }
.sm-star .sm-core { transition: r .3s, fill .3s; }
.sm-star .sm-halo { transition: opacity .4s; }
.sm-star text { transition: fill .3s; }
.sm-star:hover .sm-core { r: 5.5; fill: #f7e9b0; }
.sm-star:hover .sm-halo { opacity: 1; animation: smBreath 2s ease-in-out infinite; }
.sm-star:hover text { fill: #f2e6c0; font-weight: 600; }
@keyframes smBreath { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* ===== 折中方案：首页只显示星图入口，隐藏顶部横条；内页反之（2026-07-04） ===== */
body.view-single .top-nav { display: none !important; }
body.view-single .nav-overflow { display: none !important; }
/* 星图入口仅首页显示 */
.starmap-entry { display: none; }
body.view-single .starmap-entry { display: block; }

/* ===== 门户态重构：星图=首页大厅，测评平级为一颗星（2026-07-04 覆盖旧规则） ===== */
/* 门户态(首页大厅)：显示 hero + 星图，隐藏横条、所有功能内容 */
body.portal .top-nav { display: none !important; }
body.portal .nav-overflow { display: none !important; }
body.portal .starmap-entry { display: block !important; }
body.portal #mainContent > [id^="view"] { display: none !important; }  /* 门户态隐藏所有功能板块 */
body.portal .hero { display: block !important; }
body.portal .today-glance { display: block !important; }
/* 功能态(点星进入后)：隐藏星图和hero，显示横条 */
body:not(.portal) .starmap-entry { display: none !important; }
body:not(.portal) .hero { display: none !important; }
body:not(.portal) .today-glance { display: none !important; }
body:not(.portal) .top-nav { display: flex !important; }
/* 顶部标题在门户态是大标题，功能态缩小可点击回门户 */
body:not(.portal) header h1 { cursor: pointer; }
body.portal header h1 { cursor: default; }
/* 覆盖之前 view-single 把星图塞进测评的旧规则 */
body.view-single .top-nav { display: flex !important; }
.starmap-entry { display: none; }

/* ===== 门户态·星图成为第一屏主角（2026-07-04 v2） ===== */
/* 门户态：隐藏今日速览和hero引导块，让星图独占舞台 */
body.portal .today-glance { display: none !important; }
body.portal .hero { display: none !important; }
body.portal header { margin-bottom: 4px !important; }
body.portal header .subtitle { display: none !important; }
/* 星图容器：占满视口、垂直居中、放大 */
body.portal .starmap-entry {
  display: flex !important; flex-direction: column; justify-content: center; align-items: center;
  min-height: calc(100vh - 130px); margin: 0 auto; padding: 10px 0 30px;
  background: radial-gradient(ellipse at 50% 45%, rgba(42,33,66,0.45), rgba(13,8,21,0.05) 70%);
  border: none;
}
body.portal .sme-title { font-size: 1.5rem !important; letter-spacing: 6px; margin-bottom: 4px; }
body.portal .sme-sub { font-size: 0.82rem !important; margin-bottom: 18px; }
body.portal .starmap-nav { max-width: 760px !important; width: 96% !important; }
/* 星图星辰、字号在门户态放大更舒展 */
body.portal .sm-star text { font-size: 13px; }

/* ===== 星图放大 v3（2026-07-04）===== */
body.portal .starmap-entry { min-height: calc(100vh - 100px) !important; padding: 0 !important; }
body.portal .starmap-nav { max-width: 1000px !important; width: 100% !important; }
body.portal .starmap-nav svg { width: 100% !important; height: auto !important; }
body.portal .sme-title { font-size: 1.7rem !important; letter-spacing: 8px; }
body.portal .sme-sub { font-size: 0.9rem !important; margin-bottom: 24px; }

/* ===== 星图·活的星空发光效果 v4（2026-07-04）===== */
.sm-pulse { animation: smPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes smPulse { 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:.85; transform:scale(1.25);} }
.sm-ray { animation: smTwinkle 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes smTwinkle { 0%,100%{ opacity:.5; transform:scale(.9) rotate(0deg);} 50%{ opacity:1; transform:scale(1.15) rotate(15deg);} }
.sm-core { filter: drop-shadow(0 0 5px rgba(255,235,160,.9)); transition: r .3s; }
.sm-star:hover .sm-pulse { opacity:1 !important; transform:scale(1.5) !important; animation:none; }
.sm-star:hover .sm-core { r: 9; }
.sm-star:hover text { fill:#fff6d8 !important; font-weight:600; }
.sm-star text { transition: fill .3s; }

/* ===== 星图整体上移（2026-07-04）===== */
body.portal .starmap-entry {
  justify-content: flex-start !important;
  min-height: auto !important;
  padding-top: 4px !important;
  margin-top: -8px !important;
}

/* ===== 星图置顶后的排布微调（2026-07-04）===== */
body.portal header .subtitle { display: block !important; }
body.portal header { margin-top: 8px !important; margin-bottom: 8px !important; }
body.portal .starmap-entry { margin-top: 0 !important; padding-top: 10px !important; }

/* ===== 星图导航暗示强化（2026-07-04）===== */
/* 可点圆环：缓慢旋转的虚线圈，像按钮边界，暗示可点 */
.sm-ring { transform-box: fill-box; transform-origin: center; animation: smRingSpin 12s linear infinite; transition: stroke .3s, r .3s, stroke-width .3s; }
@keyframes smRingSpin { to { transform: rotate(360deg); } }
.sm-enter { transition: opacity .3s; pointer-events: none; }
/* 悬停：圆环变亮加粗、放大，显示"进入→"，星核放大 */
.sm-star:hover .sm-ring { stroke: #f0d98a; stroke-width: 1.8; r: 19; stroke-dasharray: none; }
.sm-star:hover .sm-enter { opacity: 1; }
.sm-star:hover .sm-pulse { opacity: 1 !important; transform: scale(1.5) !important; animation: none; }
.sm-star:hover .sm-core { r: 9; }
.sm-star:hover .sm-name { fill: #fff6d8 !important; font-weight: 600; }
/* 副标题做成一枚醒目的提示胶囊 */
body.portal .sme-sub {
  display: inline-block; padding: 5px 16px; border-radius: 16px;
  background: rgba(240,210,122,0.1); border: 1px solid rgba(240,210,122,0.3);
  color: var(--gold-light,#e6cf97) !important; animation: smHintBreath 2.5s ease-in-out infinite;
}
@keyframes smHintBreath { 0%,100%{ box-shadow: 0 0 0 rgba(240,210,122,0); } 50%{ box-shadow: 0 0 14px rgba(240,210,122,0.3); } }

/* ===== 星图更大更醒目 v5（2026-07-04）===== */
body.portal .starmap-nav { max-width: 1200px !important; width: 100% !important; }
/* 容器留白收窄，把空间让给星图 */
.container { max-width: 1260px !important; }
body.portal .starmap-entry { padding: 6px 0 20px !important; }
/* 星辰核、名字、光圈整体再放大一档 */
body.portal .sm-core { r: 8; filter: drop-shadow(0 0 8px rgba(255,235,160,1)) !important; }
body.portal .sm-name { font-size: 21px !important; }
body.portal .sm-pulse { animation-duration: 2.4s !important; }
/* 连线加亮 */
body.portal .starmap-nav line { stroke-width: 2.4 !important; }

/* ===== 生肖动物SVG图（2026-07-04）===== */
.sx-emoji .sx-svg { width: 82px; height: 82px; display: block; filter: drop-shadow(0 0 10px rgba(230,207,151,0.35)); }

/* ===== 星座形象SVG图（2026-07-04）===== */
.zod-sym .zod-svg { width: 72px; height: 72px; display: block; filter: drop-shadow(0 0 12px currentColor); }

/* ===== 修复功能页内容短时的大片空白（2026-07-04）===== */
/* 去掉 view 的强制满屏高度，改为自适应内容 */
[id^="view"]:not([style*="display: none"]):not([style*="display:none"]) { min-height: auto !important; padding-bottom: 40px !important; }

/* ===== 去掉板块标题的持续闪烁动画（2026-07-04）===== */
[id^="view"] > header h1 { animation: none !important; color: var(--gold-light, #e6cf97) !important; }

/* ===== 浅色主题可读性修复（2026-07-11）===== */
body[data-theme="light"],
body[data-theme="day"] {
  --paper: #f4f7fb !important;
  --paper-dark: #ffffff !important;
  --paper-darker: #e8eef5 !important;
  --ink: #142033 !important;
  --ink-light: #34495f !important;
  --ink-faint: #52677d !important;
  --gold: #1f5f9f !important;
  --gold-light: #2f73b7 !important;
  --line: rgba(20,32,51,0.18) !important;
  --line-soft: rgba(20,32,51,0.10) !important;
  background: #f4f7fb !important;
  color: #142033 !important;
}
body[data-theme="light"] header h1,
body[data-theme="day"] header h1,
body[data-theme="light"] [id^="view"] > header h1,
body[data-theme="day"] [id^="view"] > header h1 {
  color: #142033 !important;
  -webkit-text-fill-color: #142033 !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}
body[data-theme="light"] header .subtitle,
body[data-theme="day"] header .subtitle,
body[data-theme="light"] .input-group label,
body[data-theme="day"] .input-group label,
body[data-theme="light"] .st-k,
body[data-theme="day"] .st-k,
body[data-theme="light"] .rel-intro,
body[data-theme="day"] .rel-intro,
body[data-theme="light"] .st-concl,
body[data-theme="day"] .st-concl,
body[data-theme="light"] .feature-entry .fe-desc,
body[data-theme="day"] .feature-entry .fe-desc,
body[data-theme="light"] .tg-label,
body[data-theme="day"] .tg-label,
body[data-theme="light"] .dayun-note,
body[data-theme="day"] .dayun-note,
body[data-theme="light"] .ar-label,
body[data-theme="day"] .ar-label,
body[data-theme="light"] .advanced-summary-hint,
body[data-theme="day"] .advanced-summary-hint,
body[data-theme="light"] .advanced-input-note,
body[data-theme="day"] .advanced-input-note {
  color: #52677d !important;
  opacity: 1 !important;
}
body[data-theme="light"] .panel-title,
body[data-theme="day"] .panel-title { color: #34495f !important; opacity: 1 !important; }
body[data-theme="light"] .section-title,
body[data-theme="day"] .section-title { color: #285f91 !important; opacity: 1 !important; }
body[data-theme="light"] input::placeholder,
body[data-theme="day"] input::placeholder { color: #65798e !important; opacity: 1 !important; }
body[data-theme="light"] .top-nav,
body[data-theme="day"] .top-nav {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(20,32,51,0.12) !important;
  box-shadow: 0 2px 14px rgba(20,32,51,0.08) !important;
}
body[data-theme="light"] .nav-item,
body[data-theme="day"] .nav-item,
body[data-theme="light"] .nav-more,
body[data-theme="day"] .nav-more {
  color: #40566e !important;
  background: #f7f9fc !important;
  border-color: rgba(20,32,51,0.16) !important;
}
body[data-theme="light"] .nav-item.active,
body[data-theme="day"] .nav-item.active {
  color: #ffffff !important;
  background: #1f5f9f !important;
  border-color: #1f5f9f !important;
  box-shadow: 0 2px 10px rgba(31,95,159,0.22) !important;
}
body[data-theme="light"] .advanced-inputs,
body[data-theme="day"] .advanced-inputs {
  background: #f8fafc !important;
  border-color: rgba(20,32,51,0.14) !important;
}
body[data-theme="light"] .advanced-inputs summary,
body[data-theme="day"] .advanced-inputs summary { color: #34495f !important; }
body[data-theme="light"] .compliance-banner,
body[data-theme="day"] .compliance-banner {
  color: #52677d !important;
  background: rgba(244,247,251,0.97) !important;
  opacity: 1 !important;
}
body[data-theme="light"] .input-panel,
body[data-theme="day"] .input-panel,
body[data-theme="light"] .container > header,
body[data-theme="day"] .container > header,
body[data-theme="light"] [id^="view"] > header,
body[data-theme="day"] [id^="view"] > header {
  background-image: none !important;
  background-color: #ffffff !important;
  background-blend-mode: normal !important;
}
body[data-theme="light"] [id^="view"] > header::before,
body[data-theme="light"] [id^="view"] > header::after,
body[data-theme="day"] [id^="view"] > header::before,
body[data-theme="day"] [id^="view"] > header::after {
  display: none !important;
  animation: none !important;
}
body[data-theme="light"] .header-ornament,
body[data-theme="day"] .header-ornament {
  background: #1f5f9f !important;
  animation: none !important;
  box-shadow: none !important;
}
body[data-theme="light"] #viewSingle,
body[data-theme="day"] #viewSingle {
  background: #e9eff6 !important;
  border-color: rgba(20,32,51,0.12) !important;
  box-shadow: 0 12px 32px -22px rgba(20,32,51,0.35) !important;
}

/* 日间清雅由用户主动切换后启用，确保表单与浮动主题控件始终清晰可见。 */
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .quick-input {
  background-color: #f7f9fc !important;
  border-color: rgba(20,32,51,0.18) !important;
  color: #142033 !important;
  -webkit-text-fill-color: #142033 !important;
  opacity: 1 !important;
}
body[data-theme="light"] select option {
  background: #ffffff !important;
  color: #142033 !important;
}
body[data-theme="light"] .cal-tab {
  background: #f7f9fc !important;
  border-color: rgba(20,32,51,0.18) !important;
  color: #40566e !important;
}
body[data-theme="light"] .cal-tab.active {
  background: #1f5f9f !important;
  border-color: #1f5f9f !important;
  color: #ffffff !important;
}
body[data-theme="light"] .theme-switch {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(20,32,51,0.14) !important;
  box-shadow: 0 8px 26px rgba(20,32,51,0.14) !important;
}
body[data-theme="light"] .theme-label,
body[data-theme="light"] .theme-name,
body[data-theme="light"] #placeholder {
  color: #40566e !important;
  opacity: 1 !important;
}

/* ===== 东方美学星图：与传统文化图鉴统一视觉（2026-07-12）===== */
body.portal .starmap-entry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100% !important;
  margin: 26px 0 34px !important;
  padding: 30px 34px 28px !important;
  border: 1px solid rgba(199,169,107,0.28) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(199,169,107,0.14), transparent 36%),
    linear-gradient(145deg, #172333 0%, #101b29 56%, #0b1521 100%) !important;
  box-shadow: 0 22px 55px rgba(5,12,20,0.24), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
body.portal .starmap-entry::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,20,31,0.74), rgba(10,20,31,0.9)),
    url('../images/tradition/ancient-observatory.webp') center 46% / cover no-repeat;
  opacity: 0.44;
  content: "";
}
body.portal .starmap-entry::after {
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(234,211,156,0.08);
  border-radius: 17px;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(234,211,156,0.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 26%, rgba(234,211,156,0.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 78%, rgba(234,211,156,0.24) 0 1px, transparent 1.5px);
  content: "";
  pointer-events: none;
}
body.portal .starmap-entry > * { position: relative; z-index: 1; }
body.portal .sme-title {
  margin: 0 0 8px !important;
  color: #f2efe6 !important;
  font-family: var(--font-serif, "Songti SC", serif) !important;
  font-size: clamp(1.35rem,2.4vw,1.9rem) !important;
  font-weight: 600;
  letter-spacing: 0.28em !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5), 0 0 20px rgba(199,169,107,0.12);
  -webkit-text-fill-color: #f2efe6 !important;
}
body.portal .sme-sub {
  margin: 0 auto 18px !important;
  padding: 6px 18px !important;
  border: 1px solid rgba(199,169,107,0.3) !important;
  border-radius: 999px !important;
  background: rgba(10,20,31,0.64) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  color: #d9c38e !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  animation: none !important;
}
body.portal .starmap-nav {
  width: min(100%,1000px) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 18px 24px 8px;
  border: 1px solid rgba(199,169,107,0.14);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(199,169,107,0.095), transparent 54%),
    linear-gradient(180deg, rgba(8,17,28,0.6), rgba(8,17,28,0.28));
  box-shadow: inset 0 0 42px rgba(0,0,0,0.22);
}
body.portal .starmap-nav svg { display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22)); }
body.portal .sm-name {
  fill: #ead39c !important;
  font-family: var(--font-serif, "Songti SC", serif) !important;
  font-size: 19px !important;
  font-weight: 600;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
}
body.portal .sm-enter { fill: #f4dfaa !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8)); }
body.portal .sm-ring { stroke: rgba(234,211,156,0.5) !important; }
body.portal .sm-core { filter: drop-shadow(0 0 9px rgba(255,221,135,0.95)) !important; }
body.portal .starmap-nav line { opacity: 0.8; stroke-width: 1.8 !important; }

@media (max-width: 640px) {
  body.portal .starmap-entry {
    margin: 16px 0 24px !important;
    padding: 22px 12px 18px !important;
    border-radius: 18px !important;
  }
  body.portal .starmap-entry::after { inset: 7px; border-radius: 13px; }
  body.portal .sme-title { font-size: 1.2rem !important; letter-spacing: 0.2em !important; }
  body.portal .sme-sub { margin-bottom: 12px !important; padding: 5px 12px !important; font-size: 0.68rem !important; }
  body.portal .starmap-nav { padding: 10px 2px 2px; border-radius: 14px; }
  body.portal .sm-name { font-size: 17px !important; }
}

/* ===== 全站字体清晰度提升：正文易读，书法标题保持原设计 ===== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif !important;
  font-synthesis: none;
}

body {
  font-weight: 400;
  line-height: 1.75;
}

header .subtitle,
[id^="view"] > header .subtitle {
  color: var(--ink-light) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.75 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.panel-title,
.section-title {
  color: var(--ink-light) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.75 !important;
  opacity: 1 !important;
}

.input-group label,
.advanced-summary-title,
.tg-label,
.ar-label,
.pt-label {
  color: var(--ink-light) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.nav-item,
.nav-more {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

.st-v,
.tq-a,
.rel-intro,
.analysis-row .ar-value,
.accordion-title,
.feature-entry .fe-desc,
.dayun-note,
.advanced-summary-hint,
.advanced-input-note {
  font-size: max(0.82rem, 13px) !important;
  line-height: 1.85 !important;
  opacity: 1 !important;
}

.calculator-visual small {
  color: rgba(248, 242, 228, 0.9) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.theme-label,
.theme-name {
  color: var(--ink-light) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.compliance-banner {
  color: var(--ink-faint) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  opacity: 0.9 !important;
}

body[data-theme="dark"] {
  --ink-light: #e2d8c8;
  --ink-faint: #b3a795;
}

@media (max-width: 680px) {
  header .subtitle,
  [id^="view"] > header .subtitle { font-size: 0.84rem !important; }
  .panel-title,
  .section-title { font-size: 0.76rem !important; letter-spacing: 0.14em !important; }
  .input-group label { font-size: 0.76rem !important; }
  .st-k { font-size: 0.76rem !important; }
  .st-v,
  .tq-a,
  .rel-intro { font-size: 0.82rem !important; }
  .compliance-banner { font-size: 0.64rem !important; line-height: 1.65 !important; }
}

/* ===== 清晰简洁字体系统：全站统一现代中文无衬线 ===== */
:root {
  --font-ui: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-literary: var(--font-ui);
  --font-calligraphy: var(--font-ui);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

header h1,
[id^="view"] > header h1,
.calculator-visual strong,
.hero-tagline,
.tc-name,
.pcov-name {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-synthesis: none;
}

.panel-title,
.section-title,
.strength-panel h4,
.liuqin-panel h4,
.analysis-card h4,
.deep-report h4,
.rel-panel h4,
.layer-title,
.accordion-title,
.zw-c-title,
.zod-name {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-synthesis: none;
}

.panel-title,
.section-title,
.strength-panel h4,
.liuqin-panel h4,
.analysis-card h4 {
  letter-spacing: 0.1em !important;
}

.nav-item,
.nav-more,
.btn-calculate,
.today-btn,
.cal-tab,
.input-group label,
.theme-label,
.theme-name {
  font-family: var(--font-ui) !important;
}

input,
select,
.vs-num,
.match-score-num,
.pc-num,
.pw-price-num {
  font-variant-numeric: tabular-nums;
}

.pillar-gan,
.pillar-zhi,
.pillar-hidden,
.pillar-zodiac,
.dayun-pillars,
.mcc-pillars,
.sc-pillars,
.zw-star,
.zw-gong,
.zw-gz,
.qm-cell,
.zod-meta,
.st-k {
  font-family: var(--font-ui) !important;
  font-synthesis: none;
}

.pillar-gan,
.pillar-zhi,
.dayun-pillars,
.mcc-pillars,
.sc-pillars {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.zw-star,
.zw-gong,
.qm-cell,
.zod-meta,
.st-k {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* 奇门九宫：取消细仿宋，放大核心信息并统一行距。 */
.qm-cell,
.qm-cell * {
  font-family: var(--font-ui) !important;
  text-shadow: none !important;
}
.qm-cell { font-size: 0.82rem !important; line-height: 1.55 !important; }
.qm-shen,
.qm-gong { font-size: 0.72rem !important; font-weight: 500 !important; }
.qm-xing,
.qm-men { font-size: 0.84rem !important; font-weight: 600 !important; }
.qm-tian,
.qm-di { font-size: 0.8rem !important; font-weight: 500 !important; }

/* 紫微宫格：星曜突出，宫名与干支保持清楚但不过度装饰。 */
.zw-star,
.zw-aux,
.zw-gong,
.zw-gz,
.zw-c-row,
.zw-c-sihua {
  font-family: var(--font-ui) !important;
  text-shadow: none !important;
}
.zw-star { font-size: 0.84rem !important; font-weight: 600 !important; }
.zw-aux { font-size: 0.72rem !important; font-weight: 500 !important; }
.zw-gong { font-size: 0.74rem !important; font-weight: 600 !important; }
.zw-gz { font-size: 0.68rem !important; font-weight: 500 !important; }

/* 八字与星座数据同样采用简洁黑体，避免不同板块字形跳变。 */
.pillar-gan,
.pillar-zhi,
.pillar-hidden,
.pillar-zodiac,
.dayun-pillars,
.zod-name,
.zod-meta {
  font-family: var(--font-ui) !important;
}

#viewSingle .panel-title,
#viewSingle .section-title { color: #ddc68f !important; }
#viewZiwei .panel-title,
#viewZiwei .section-title,
#viewZiwei .strength-panel h4 { color: #d8bff0 !important; }
#viewZodiac .panel-title,
#viewZodiac .section-title,
#viewZodiac .strength-panel h4 { color: #b7d7f4 !important; }
#viewQimen .panel-title,
#viewQimen .section-title,
#viewQimen .strength-panel h4 { color: #e0c681 !important; }

body[data-theme="light"] #viewSingle .panel-title,
body[data-theme="light"] #viewSingle .section-title { color: #755a25 !important; }
body[data-theme="light"] #viewZiwei .panel-title,
body[data-theme="light"] #viewZiwei .section-title,
body[data-theme="light"] #viewZiwei .strength-panel h4 { color: #68428d !important; }
body[data-theme="light"] #viewZodiac .panel-title,
body[data-theme="light"] #viewZodiac .section-title,
body[data-theme="light"] #viewZodiac .strength-panel h4 { color: #285f91 !important; }
body[data-theme="light"] #viewQimen .panel-title,
body[data-theme="light"] #viewQimen .section-title,
body[data-theme="light"] #viewQimen .strength-panel h4 { color: #74571d !important; }

@media (max-width: 680px) {
  .panel-title,
  .section-title { letter-spacing: 0.08em !important; }
  .pillar-gan,
  .pillar-zhi,
  .dayun-pillars { letter-spacing: 0.03em !important; }
  .qm-cell { font-size: 0.74rem !important; line-height: 1.5 !important; }
  .qm-shen,
  .qm-gong { font-size: 0.66rem !important; }
  .qm-xing,
  .qm-men { font-size: 0.76rem !important; }
  .qm-tian,
  .qm-di { font-size: 0.72rem !important; }
  .zw-star { font-size: 0.76rem !important; }
  .zw-aux { font-size: 0.66rem !important; }
  .zw-gong { font-size: 0.68rem !important; }
  .zw-gz { font-size: 0.62rem !important; }
}

/* ==============================================================
   紫微 / 星座 / 奇门完整报告：统一阅读层级与长文排版
   ============================================================== */
.complete-report {
  margin-top: 22px;
  color: var(--ink);
}

.complete-report h4,
.complete-report h5,
.complete-report b,
.complete-report span,
.complete-report li {
  font-family: var(--font-ui) !important;
  font-synthesis: none;
}

.complete-report-head {
  margin: 0 0 14px;
  padding: 24px 26px;
  border: 1px solid rgba(214, 181, 105, 0.2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 12%, rgba(214, 181, 105, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(22, 29, 43, 0.96), rgba(12, 17, 27, 0.96));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.complete-report-head > span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.complete-report-head h4 {
  margin: 0 0 10px;
  color: var(--ink-bright);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.complete-report-head p,
.report-lead p,
.report-dimension-card p,
.report-note,
.report-timeline span,
.report-planet-list span,
.report-glossary span,
.report-signal-grid p,
.report-actions li {
  font-family: var(--font-ui) !important;
  line-height: 1.9;
}

.complete-report-head p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.report-visual {
  --report-accent: #d7b66d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(250px, 38vw, 390px);
  margin: 14px 0;
  border: 1px solid color-mix(in srgb, var(--report-accent) 32%, transparent);
  border-radius: 16px;
  background: #0b111b;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.report-visual::before,
.report-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.report-visual::before {
  background:
    linear-gradient(90deg, rgba(5, 9, 16, 0.78) 0%, rgba(5, 9, 16, 0.22) 58%, rgba(5, 9, 16, 0.08) 100%),
    linear-gradient(0deg, rgba(5, 9, 16, 0.78) 0%, transparent 58%);
}

.report-visual::after {
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--report-accent) 18%, transparent);
  border-radius: 11px;
}

.report-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}

.report-visual:hover img {
  transform: scale(1.025);
  filter: saturate(1.02) contrast(1.04);
}

.report-visual figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 720px;
  padding: 28px 30px 27px;
  color: #f8f3e8;
}

.report-visual__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--report-accent);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
}

.report-visual strong {
  display: block;
  color: #fffaf0;
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.report-visual p {
  max-width: 620px;
  margin: 9px 0 0;
  color: rgba(245, 241, 232, 0.82);
  font-family: var(--font-ui) !important;
  font-size: 0.76rem;
  line-height: 1.78;
}

.report-visual__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.report-visual__tags span {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--report-accent) 38%, transparent);
  border-radius: 999px;
  background: rgba(4, 8, 14, 0.42);
  color: color-mix(in srgb, var(--report-accent) 84%, white);
  font-size: 0.63rem;
  backdrop-filter: blur(6px);
}

.report-visual--bazi { --report-accent: #e0bd72; }
.report-visual--ziwei { --report-accent: #d5b4f2; }
.report-visual--zodiac { --report-accent: #a9d2f7; }
.report-visual--qimen { --report-accent: #dfc06f; }

.report-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(214, 181, 105, 0.12);
}

.report-tools > span {
  margin-right: auto;
  color: var(--ink-faint);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.report-tools button {
  padding: 7px 12px;
  border: 1px solid rgba(214, 181, 105, 0.24);
  border-radius: 999px;
  background: rgba(214, 181, 105, 0.07);
  color: var(--gold-light);
  font-family: var(--font-ui) !important;
  font-size: 0.68rem;
  cursor: pointer !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.report-tools button:hover,
.report-tools button[aria-pressed="true"] {
  border-color: rgba(214, 181, 105, 0.55);
  background: rgba(214, 181, 105, 0.15);
}

.report-tools button:active { transform: translateY(1px); }

.report-lead {
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(214, 181, 105, 0.055);
}

.report-lead > b {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-light);
  font-size: 0.94rem;
}

.report-lead p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.report-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.report-summary-strip span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(214, 181, 105, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.55;
  text-align: center;
}

.complete-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.complete-report-grid.compact {
  margin-bottom: 0;
}

.report-dimension-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(214, 181, 105, 0.15);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 58%),
    rgba(11, 16, 26, 0.62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.report-disclosure[open] {
  border-color: rgba(214, 181, 105, 0.34);
  background:
    linear-gradient(145deg, rgba(214, 181, 105, 0.055), transparent 60%),
    rgba(11, 16, 26, 0.78);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.report-disclosure summary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 16px 17px;
  list-style: none;
  cursor: pointer !important;
  user-select: none;
}

.report-disclosure summary::-webkit-details-marker { display: none; }

.report-disclosure summary:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -3px;
  border-radius: 12px;
}

.report-card-head {
  display: block;
  min-width: 0;
}

.report-card-title {
  display: block;
  color: var(--ink-bright);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.5;
}

.report-toggle-hint {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--gold-light);
  font-size: 0.66rem;
  white-space: nowrap;
}

.report-toggle-hint i {
  display: inline-block;
  font-style: normal;
  font-size: 0.88rem;
  transition: transform 180ms ease;
}

.report-toggle-hint .when-open { display: none; }
.report-disclosure[open] .report-toggle-hint .when-open { display: inline; }
.report-disclosure[open] .report-toggle-hint .when-closed { display: none; }
.report-disclosure[open] .report-toggle-hint i { transform: rotate(180deg); }

.report-detail {
  padding: 0 17px 16px;
  border-top: 1px solid rgba(214, 181, 105, 0.1);
  animation: report-detail-in 180ms ease both;
}

.report-detail > p { padding-top: 13px; }

@keyframes report-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.report-dimension-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(214, 181, 105, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.report-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-dim);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.report-dimension-card h5 {
  margin: 0 0 8px;
  color: var(--ink-bright);
  font-size: 0.9rem;
  font-weight: 650;
}

.report-dimension-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.76rem;
}

.report-note {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(214, 181, 105, 0.11);
  color: var(--gold-light);
  font-size: 0.7rem;
}

.report-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.report-timeline > div,
.report-planet-list > div,
.report-glossary > div {
  padding: 13px;
  border: 1px solid rgba(214, 181, 105, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.024);
}

.report-timeline b,
.report-planet-list b,
.report-glossary b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-light);
  font-size: 0.75rem;
}

.report-timeline span,
.report-planet-list span,
.report-glossary span {
  display: block;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.report-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.report-actions > div {
  padding: 14px;
  border-radius: 10px;
  background: rgba(214, 181, 105, 0.045);
}

.report-actions b {
  color: var(--gold-light);
  font-size: 0.78rem;
}

.report-actions ul {
  margin: 8px 0 0;
  padding-left: 1.15em;
}

.report-actions li {
  margin: 4px 0;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.report-meter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.report-meter-grid > div {
  position: relative;
  overflow: hidden;
  padding: 10px 11px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}

.report-meter-grid span,
.report-meter-grid b {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
}

.report-meter-grid b { float: right; color: var(--gold-light); }
.report-meter-grid i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-light));
}

.report-planet-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.report-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-signal-grid > div {
  padding: 15px;
  border-radius: 11px;
}

.report-signal-grid b { font-size: 0.8rem; }
.report-signal-grid p,
.report-signal-grid li { color: var(--ink-muted); font-size: 0.71rem; }
.report-signal-grid ul { margin: 8px 0 0; padding-left: 1.15em; }
.signal-good { border: 1px solid rgba(95, 175, 143, 0.2); background: rgba(95, 175, 143, 0.055); }
.signal-good b { color: var(--jade-light); }
.signal-risk { border: 1px solid rgba(198, 96, 83, 0.2); background: rgba(198, 96, 83, 0.055); }
.signal-risk b { color: var(--vermilion-light); }

.report-glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-theme="light"] .complete-report-head {
  background:
    radial-gradient(circle at 86% 12%, rgba(132, 94, 28, 0.09), transparent 34%),
    linear-gradient(135deg, #f7f3ea, #eee7da);
  box-shadow: 0 12px 32px rgba(74, 58, 34, 0.08);
}

body[data-theme="light"] .report-visual {
  box-shadow: 0 14px 36px rgba(47, 38, 25, 0.13);
}

body[data-theme="light"] .report-dimension-card,
body[data-theme="light"] .report-timeline > div,
body[data-theme="light"] .report-planet-list > div,
body[data-theme="light"] .report-glossary > div,
body[data-theme="light"] .report-summary-strip span,
body[data-theme="light"] .report-meter-grid > div {
  background-color: rgba(255, 255, 255, 0.62);
}

body[data-theme="light"] .report-disclosure[open] {
  background-color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 760px) {
  .complete-report-head { padding: 20px 18px; }
  .report-visual { height: 250px; border-radius: 13px; }
  .report-visual::before {
    background: linear-gradient(0deg, rgba(5, 9, 16, 0.88) 0%, rgba(5, 9, 16, 0.24) 74%, rgba(5, 9, 16, 0.08) 100%);
  }
  .report-visual figcaption { padding: 22px 19px 20px; }
  .report-visual p { font-size: 0.7rem; line-height: 1.65; }
  .report-visual__tags { margin-top: 10px; }
  .report-tools { flex-wrap: wrap; }
  .report-tools > span { flex-basis: 100%; }
  .report-disclosure summary { min-height: 72px; padding: 14px; }
  .report-toggle-hint .when-closed,
  .report-toggle-hint .when-open { display: none !important; }
  .report-detail { padding: 0 14px 14px; }
  .report-dimension-card::after { display: none; }
  .complete-report-grid,
  .report-signal-grid,
  .report-glossary { grid-template-columns: 1fr; }
  .report-summary-strip,
  .report-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-timeline,
  .report-actions,
  .report-planet-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .report-visual img { transition: none; }
  .report-visual:hover img { transform: none; }
}

/* ===== 次级功能专题图与使用导读 ===== */
.feature-visual {
  position: relative;
  min-height: 320px;
  margin: 22px 0 16px;
  overflow: hidden;
  border: 1px solid rgba(214, 177, 92, 0.24);
  border-radius: 18px;
  background: #101722;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  isolation: isolate;
}
.feature-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 11, 18, 0.92) 0%, rgba(7, 11, 18, 0.6) 42%, rgba(7, 11, 18, 0.14) 72%, rgba(7, 11, 18, 0.42) 100%), linear-gradient(0deg, rgba(7, 11, 18, 0.42), transparent 56%);
  box-shadow: inset 0 0 0 1px rgba(255, 239, 197, 0.06);
}
.feature-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 0.8s ease, filter 0.8s ease;
}
.feature-visual:hover img { transform: scale(1.025); filter: saturate(1.03) contrast(1.06); }
.feature-visual figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 320px;
  max-width: 560px;
  padding: 54px 52px 46px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: #f5f1e8;
}
.feature-visual__eyebrow { color: #e4c875; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; }
.feature-visual strong { margin: 10px 0 9px; color: #fffaf0; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.4; letter-spacing: 0.04em; }
.feature-visual small { color: rgba(240, 237, 226, 0.78); font-size: 0.8rem; line-height: 1.75; letter-spacing: 0.06em; }

/* 长内容视觉章节：在排盘输入与深度结果之间形成安静的画面停顿 */
.interpretive-scene {
  --scene-accent: #d9bd72;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.7fr);
  min-height: 330px;
  margin: 20px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 32%, rgba(255,255,255,0.08));
  border-radius: 22px;
  background: #08111b;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255,255,255,0.025);
  isolation: isolate;
}
.interpretive-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 42%, rgba(6, 12, 20, 0.36) 63%, rgba(6, 12, 20, 0.96) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 35%, rgba(0,0,0,0.2));
}
.interpretive-scene::after {
  content: "";
  position: absolute;
  inset: 15px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(226, 196, 116, 0.13);
  border-radius: 14px;
}
.interpretive-scene img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(1.04);
  transition: transform 900ms cubic-bezier(.2,.72,.2,1), filter 500ms ease;
}
.interpretive-scene:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.06); }
.interpretive-scene figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: 45px 38px 42px 14px;
}
.interpretive-scene__number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 52%, transparent);
  border-radius: 50%;
  color: var(--scene-accent);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1rem;
  box-shadow: 0 0 22px color-mix(in srgb, var(--scene-accent) 12%, transparent);
}
.interpretive-scene p {
  margin: 0 0 13px;
  color: var(--scene-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.interpretive-scene strong {
  color: #fffaf0;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(1.28rem, 2.15vw, 1.82rem);
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0.035em;
  text-wrap: balance;
}
.interpretive-scene small {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}
.interpretive-scene small i {
  padding: 6px 9px;
  border: 1px solid rgba(226, 196, 116, 0.18);
  border-radius: 999px;
  color: rgba(245, 238, 222, 0.72);
  background: rgba(255,255,255,0.025);
  font-size: 0.63rem;
  font-style: normal;
  letter-spacing: 0.06em;
}
.interpretive-scene--reverse { grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.55fr); }
.interpretive-scene--reverse img { order: 2; }
.interpretive-scene--reverse figcaption { order: 1; padding: 45px 14px 42px 38px; }
.interpretive-scene--reverse::before {
  background:
    linear-gradient(270deg, transparent 42%, rgba(6, 12, 20, 0.36) 63%, rgba(6, 12, 20, 0.96) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 35%, rgba(0,0,0,0.2));
}
.interpretive-scene--ziwei { --scene-accent: #d7b7f6; }
.interpretive-scene--zodiac { --scene-accent: #9fc9ef; }
.interpretive-scene--qimen { --scene-accent: #e4c574; }

@media (max-width: 720px) {
  .interpretive-scene,
  .interpretive-scene--reverse {
    grid-template-columns: 1fr;
    min-height: 430px;
    margin: 16px 0;
    border-radius: 16px;
  }
  .interpretive-scene::before,
  .interpretive-scene--reverse::before {
    background: linear-gradient(0deg, rgba(5,10,17,0.98) 0%, rgba(5,10,17,0.84) 32%, rgba(5,10,17,0.08) 70%);
  }
  .interpretive-scene img,
  .interpretive-scene--reverse img {
    order: 1;
    min-height: 430px;
    grid-area: 1 / 1;
  }
  .interpretive-scene figcaption,
  .interpretive-scene--reverse figcaption {
    order: 2;
    grid-area: 1 / 1;
    align-self: end;
    padding: 28px 26px 30px;
  }
  .interpretive-scene__number { width: 34px; height: 34px; margin-bottom: 12px; }
  .interpretive-scene p { margin-bottom: 8px; }
  .interpretive-scene small { margin-top: 14px; }
}

.feature-guide {
  margin: 0 0 22px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 34, 47, 0.9), rgba(12, 17, 25, 0.92));
}
.feature-guide__head { margin-bottom: 16px; text-align: center; }
.feature-guide__head h2 { margin: 0 0 7px; color: var(--ink); font-size: 1.05rem; letter-spacing: 0.08em; }
.feature-guide__head p { max-width: 760px; margin: 0 auto; color: var(--ink-light); font-size: 0.78rem; line-height: 1.85; }
.feature-guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feature-guide__item { padding: 14px 15px; border: 1px solid rgba(215, 181, 100, 0.13); border-radius: 11px; background: rgba(255, 255, 255, 0.025); }
.feature-guide__item b { display: block; margin-bottom: 6px; color: var(--gold-light); font-size: 0.78rem; letter-spacing: 0.08em; }
.feature-guide__item span { display: block; color: var(--ink-light); font-size: 0.73rem; line-height: 1.75; }
body[data-theme="light"] .feature-guide { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(244,239,226,0.96)); }
body[data-theme="light"] .feature-guide__item { background: rgba(151, 111, 37, 0.04); }

@media (max-width: 720px) {
  .feature-visual { min-height: 260px; margin-top: 16px; border-radius: 14px; }
  .feature-visual::after { background: linear-gradient(0deg, rgba(7,11,18,0.96) 0%, rgba(7,11,18,0.68) 55%, rgba(7,11,18,0.16) 100%); }
  .feature-visual figcaption { min-height: 260px; max-width: none; padding: 30px 24px 26px; justify-content: flex-end; }
  .feature-visual strong { font-size: 1.35rem; }
  .feature-guide { padding: 18px 16px; }
  .feature-guide__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-visual img { transition: none; }
  .feature-visual:hover img { transform: none; }
}

/* ===== 顶部功能导航：星轨玉带（2026-07-13） ===== */
.top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  isolation: isolate;
  align-items: center !important;
  gap: 8px !important;
  min-height: 62px;
  margin: 0 -40px !important;
  padding: 11px 40px !important;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background:
    radial-gradient(circle at 8% 5%, rgba(223, 186, 91, 0.13), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(98, 83, 164, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(20, 24, 34, 0.97), rgba(8, 12, 19, 0.95)) !important;
  border-top: 1px solid rgba(237, 205, 126, 0.08) !important;
  border-bottom: 1px solid rgba(224, 186, 93, 0.34) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 225, 151, 0.06) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}
.top-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.52;
  background-image:
    radial-gradient(circle at 5% 32%, rgba(255, 236, 177, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 68%, rgba(255, 236, 177, 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 34%, rgba(185, 202, 255, 0.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 96% 66%, rgba(255, 236, 177, 0.5) 0 1px, transparent 1.5px);
}
.top-nav::after {
  content: '';
  position: absolute;
  right: 30px;
  bottom: 0;
  left: 30px;
  height: 1px;
  pointer-events: none;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, rgba(210, 168, 71, 0.55), rgba(255, 226, 153, 0.95), rgba(210, 168, 71, 0.55), transparent);
  box-shadow: 0 0 12px rgba(227, 184, 79, 0.32);
}
.top-nav .nav-item,
.top-nav .nav-more,
.nav-overflow .nav-item {
  position: relative !important;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 17px !important;
  border: 1px solid rgba(229, 203, 139, 0.17) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  color: #e4dfd4 !important;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.top-nav .nav-item:hover,
.top-nav .nav-more:hover,
.nav-overflow .nav-item:hover {
  transform: translateY(-1px) !important;
  color: #fff4d5 !important;
  border-color: rgba(235, 198, 104, 0.58) !important;
  background: linear-gradient(180deg, rgba(220, 181, 86, 0.16), rgba(220, 181, 86, 0.06)) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), 0 0 16px rgba(211, 169, 70, 0.1) !important;
}
.top-nav .nav-item.active,
.nav-overflow .nav-item.active {
  color: #201607 !important;
  border-color: rgba(255, 226, 146, 0.84) !important;
  background: linear-gradient(135deg, #f5df99 0%, #d9ad4c 52%, #b77a20 100%) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 219, 0.72), 0 0 20px rgba(213, 166, 57, 0.35), 0 5px 14px rgba(0, 0, 0, 0.22) !important;
}
.top-nav .nav-item[data-mark]::before,
.nav-overflow .nav-item[data-mark]::before {
  content: attr(data-mark);
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  flex: 0 0 20px;
  border: 1px solid rgba(232, 199, 116, 0.28);
  border-radius: 50%;
  color: #dfc882;
  background: rgba(218, 178, 79, 0.08);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}
.top-nav .nav-item.active[data-mark]::before,
.nav-overflow .nav-item.active[data-mark]::before {
  color: #5b3608;
  border-color: rgba(91, 54, 8, 0.25);
  background: rgba(255, 250, 223, 0.35);
}
.nav-home__star {
  color: #f2cf72;
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(236, 194, 87, 0.5));
}
.top-nav .nav-more {
  cursor: pointer;
  color: #eee7d8 !important;
  border-color: rgba(232, 202, 125, 0.34) !important;
  background: linear-gradient(180deg, rgba(218, 178, 79, 0.1), rgba(218, 178, 79, 0.03)) !important;
}
.nav-more__chevron {
  width: 7px;
  height: 7px;
  margin: -4px 1px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.24s ease, margin 0.24s ease;
}
.nav-more[aria-expanded="true"] .nav-more__chevron {
  margin-top: 4px;
  transform: rotate(225deg);
}
.top-nav .nav-more[aria-expanded="true"] {
  color: #fff0c3 !important;
  border-color: rgba(243, 207, 112, 0.72) !important;
  background: linear-gradient(180deg, rgba(218, 178, 79, 0.22), rgba(218, 178, 79, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 245, 205, 0.08), 0 0 18px rgba(213, 166, 57, 0.16) !important;
}
body:is(.view-match, .view-saved, .view-shengxiao, .view-gua, .view-date, .view-qimen, .view-naming, .view-tarot, .view-fengshui, .view-liuren) .nav-more::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #efc862;
  box-shadow: 0 0 9px rgba(239, 200, 98, 0.82);
}
.top-nav .nav-item:focus-visible,
.top-nav .nav-more:focus-visible,
.nav-overflow .nav-item:focus-visible {
  outline: 2px solid #f0cc72 !important;
  outline-offset: 3px;
}

.nav-overflow {
  position: sticky !important;
  top: 62px;
  z-index: 119;
  margin: 0 -40px !important;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-overflow.show {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 -40px 14px !important;
  padding: 11px 40px 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: none;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 0, rgba(214, 171, 67, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(14, 18, 27, 0.97), rgba(8, 12, 19, 0.93)) !important;
  border: 1px solid rgba(224, 186, 93, 0.16) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 235, 183, 0.035) !important;
  animation: navTrayReveal 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both !important;
}
.nav-overflow.show::before {
  content: '更多术数 · 功能直达';
  grid-column: 1 / -1;
  display: block;
  padding: 2px 0 3px;
  color: #b9ad94;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
}
.nav-overflow .nav-item {
  width: 100%;
  min-width: 0;
}
@keyframes navTrayReveal {
  from { opacity: 0; transform: translateY(-7px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body[data-theme="light"] .top-nav,
body[data-theme="paper"] .top-nav {
  background:
    radial-gradient(circle at 10% 0, rgba(183, 130, 32, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(239, 232, 215, 0.96)) !important;
  border-color: rgba(137, 91, 23, 0.25) !important;
  box-shadow: 0 9px 25px rgba(95, 68, 28, 0.13), inset 0 -1px 0 rgba(153, 103, 30, 0.1) !important;
}
body[data-theme="light"] .top-nav .nav-item,
body[data-theme="paper"] .top-nav .nav-item,
body[data-theme="light"] .top-nav .nav-more,
body[data-theme="paper"] .top-nav .nav-more,
body[data-theme="light"] .nav-overflow .nav-item,
body[data-theme="paper"] .nav-overflow .nav-item {
  color: #604b2d !important;
  border-color: rgba(136, 93, 28, 0.22) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  text-shadow: none;
}
body[data-theme="light"] .nav-overflow.show,
body[data-theme="paper"] .nav-overflow.show {
  background: linear-gradient(180deg, rgba(248, 244, 233, 0.98), rgba(235, 226, 207, 0.97)) !important;
  border-color: rgba(137, 91, 23, 0.2) !important;
  box-shadow: 0 16px 28px rgba(95, 68, 28, 0.12) !important;
}
body[data-theme="light"] .top-nav .nav-item.active,
body[data-theme="paper"] .top-nav .nav-item.active,
body[data-theme="light"] .nav-overflow .nav-item.active,
body[data-theme="paper"] .nav-overflow .nav-item.active {
  color: #2e1c08 !important;
  background: linear-gradient(135deg, #f5df99, #d5a844 58%, #b97f25) !important;
}

@media (max-width: 768px) {
  .top-nav {
    min-height: 58px;
    margin: 0 -16px !important;
    padding: 9px 16px !important;
    gap: 7px !important;
  }
  .top-nav .nav-item,
  .top-nav .nav-more {
    min-height: 40px;
    padding: 7px 14px !important;
  }
  .nav-overflow.show {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -16px 12px !important;
    padding: 10px 16px 14px !important;
    border-radius: 0 0 15px 15px !important;
  }
  .nav-overflow { top: 58px; }
  .nav-overflow .nav-item { min-height: 42px; padding: 8px 10px !important; }
}

@media (max-width: 390px) {
  .nav-overflow.show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-nav .nav-item,
  .top-nav .nav-more { padding: 7px 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overflow.show { animation: none !important; }
  .nav-more__chevron { transition: none; }
}

/* ===== 顶部功能导航：墨玉天枢（2026-07-15） ===== */
.container > .top-nav-shell { order: 1; }
.top-nav-shell {
  position: sticky;
  top: 0;
  z-index: 140;
  isolation: isolate;
  margin: 0 -40px 18px;
  overflow: hidden;
  background-color: #0c1117;
  background-image:
    radial-gradient(circle at 10% -40%, rgba(191, 137, 48, 0.18), transparent 34%),
    radial-gradient(circle at 86% -20%, rgba(78, 92, 128, 0.16), transparent 32%),
    linear-gradient(110deg, #0a0f14, #10151c 52%, #080c11);
  border-top: 1px solid rgba(224, 190, 111, 0.08);
  border-bottom: 1px solid rgba(205, 157, 62, 0.38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 223, 144, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.top-nav-shell::before,
.top-nav-shell::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 94px;
  height: 38px;
  pointer-events: none;
  opacity: 0.62;
}
.top-nav-shell::before {
  top: 0;
  left: 0;
  border-top: 1px solid rgba(227, 188, 101, 0.34);
  border-left: 1px solid rgba(227, 188, 101, 0.22);
  background: linear-gradient(135deg, rgba(213, 163, 65, 0.08), transparent 55%);
}
.top-nav-shell::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid rgba(227, 188, 101, 0.22);
  border-bottom: 1px solid rgba(227, 188, 101, 0.34);
  background: linear-gradient(315deg, rgba(213, 163, 65, 0.08), transparent 55%);
}
.top-nav-shell__bar {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 26px;
  padding: 10px 40px;
  box-sizing: border-box;
  background-image:
    radial-gradient(circle at 31% 26%, rgba(255, 230, 164, 0.44) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 70%, rgba(155, 175, 220, 0.32) 0 1px, transparent 1.5px),
    linear-gradient(90deg, transparent 0 18%, rgba(222, 184, 95, 0.1) 18.1%, transparent 18.2%);
}
.top-nav-brand {
  display: flex;
  min-width: 176px;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.top-nav-brand__seal {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #f1d9a0;
  border: 1px solid rgba(230, 190, 110, 0.5);
  border-radius: 8px 3px 8px 3px;
  background: linear-gradient(145deg, #8d3028, #5e1d1a);
  box-shadow: inset 0 0 0 2px rgba(255, 219, 156, 0.08), 0 4px 14px rgba(74, 15, 12, 0.4);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1.22rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transform: none;
}
.top-nav-brand__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: nowrap;
}
.top-nav-brand__copy strong {
  color: #f0e7d4;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 2px;
}
.top-nav-brand__copy small {
  color: #b0a694;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1px;
}

.top-nav-shell .top-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  gap: 9px !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.top-nav-shell .top-nav::before,
.top-nav-shell .top-nav::after { display: none !important; }
.top-nav-shell .top-nav .nav-item,
.top-nav-shell .top-nav .nav-more,
.top-nav-shell .nav-overflow .nav-item {
  position: relative !important;
  display: inline-flex;
  min-width: 108px;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 13px !important;
  overflow: hidden;
  border: 1px solid rgba(215, 188, 128, 0.14) !important;
  border-radius: 10px !important;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)) !important;
  color: #ddd7cc !important;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
  text-align: left;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 14px rgba(0, 0, 0, 0.12) !important;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}
.top-nav-shell .top-nav .nav-item[data-mark]::before,
.top-nav-shell .nav-overflow .nav-item[data-mark]::before { content: none !important; display: none !important; }
.nav-item__seal {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 28px;
  color: #d9c38e;
  border: 1px solid rgba(217, 184, 105, 0.3);
  border-radius: 7px 3px 7px 3px;
  background: linear-gradient(145deg, rgba(194, 146, 57, 0.16), rgba(194, 146, 57, 0.04));
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 233, 180, 0.025);
}
.nav-item__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  white-space: nowrap;
}
.nav-item__copy strong {
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 1px;
}
.nav-item__copy small {
  color: #aaa196;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.5px;
  transition: color 0.22s ease;
}
.top-nav-shell .top-nav .nav-item:hover,
.top-nav-shell .top-nav .nav-more:hover,
.top-nav-shell .nav-overflow .nav-item:hover {
  transform: none !important;
  border-color: rgba(222, 183, 91, 0.46) !important;
  background: linear-gradient(150deg, rgba(205, 157, 64, 0.13), rgba(255, 255, 255, 0.022)) !important;
  color: #fff0c8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 233, 177, 0.06), 0 7px 19px rgba(0, 0, 0, 0.22) !important;
}
.top-nav-shell .nav-item:hover .nav-item__copy small,
.top-nav-shell .nav-more:hover .nav-item__copy small { color: #b7a98b; }
.top-nav-shell .top-nav .nav-item.active,
.top-nav-shell .nav-overflow .nav-item.active {
  color: #fff2cc !important;
  border-color: rgba(230, 189, 94, 0.7) !important;
  background:
    radial-gradient(circle at 25% 0, rgba(242, 201, 104, 0.16), transparent 48%),
    linear-gradient(145deg, rgba(101, 73, 25, 0.62), rgba(35, 27, 17, 0.86)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 231, 170, 0.12), inset 0 -2px 0 rgba(219, 169, 64, 0.5), 0 0 20px rgba(184, 129, 34, 0.15) !important;
}
.top-nav-shell .nav-item.active .nav-item__seal {
  color: #3b2407;
  border-color: #e4bd68;
  background: linear-gradient(145deg, #f2d88f, #bd8129);
  box-shadow: inset 0 1px 0 rgba(255, 249, 218, 0.55), 0 0 11px rgba(215, 166, 67, 0.24);
}
.top-nav-shell .nav-item.active .nav-item__copy small { color: #c9b88f; }
.top-nav-shell .top-nav .nav-more {
  cursor: pointer;
  border-color: rgba(213, 170, 77, 0.28) !important;
  background: linear-gradient(145deg, rgba(180, 127, 33, 0.13), rgba(255, 255, 255, 0.014)) !important;
}
.top-nav-shell .top-nav .nav-more[aria-expanded="true"] {
  color: #fff1c8 !important;
  border-color: rgba(233, 192, 99, 0.74) !important;
  background: linear-gradient(145deg, rgba(112, 78, 22, 0.68), rgba(37, 28, 17, 0.9)) !important;
  box-shadow: inset 0 -2px 0 rgba(224, 174, 66, 0.55), 0 0 22px rgba(184, 129, 34, 0.15) !important;
}
.top-nav-shell .nav-more__chevron {
  width: 7px;
  height: 7px;
  margin: -4px 0 0 auto;
  flex: 0 0 7px;
  color: #cdb575;
}

.top-nav-shell .nav-overflow {
  position: static !important;
  top: auto !important;
  z-index: auto;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.top-nav-shell .nav-overflow.show {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px !important;
  margin: 0 !important;
  padding: 13px 40px 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: none;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 0, rgba(191, 137, 47, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(12, 17, 23, 0.98), rgba(7, 11, 15, 0.99)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(219, 177, 82, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 228, 164, 0.025) !important;
  animation: inkJadeTray 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both !important;
}
.top-nav-shell .nav-overflow.show::before { content: none !important; display: none !important; }
.nav-overflow__head {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 13px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(215, 176, 86, 0.12);
}
.nav-overflow__head span {
  color: #e1c47f;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 2px;
}
.nav-overflow__head small {
  color: #a29a8e;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.5px;
}
.top-nav-shell .nav-overflow .nav-item {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 9px 13px !important;
}

/* 2026.08.05-3 · 常规页面不再嵌套滚动；仅极矮屏菜单保留明确的独立滚动 */
@media (max-height: 600px) {
  .top-nav-shell .nav-overflow.show {
    max-height: calc(100vh - 76px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(224, 190, 101, .48) rgba(130, 145, 149, .08);
    scrollbar-width: thin;
  }
  .top-nav-shell .nav-overflow.show::-webkit-scrollbar { width: 6px; }
  .top-nav-shell .nav-overflow.show::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(#d7b85f, #557f75);
  }
  .top-nav-shell .nav-overflow.show .nav-overflow__head::after {
    margin-left: auto;
    color: #8e9c9d;
    font-size: 10px;
    letter-spacing: .08em;
    content: "此菜单可上下滚动";
  }
}
@keyframes inkJadeTray {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

body.portal .top-nav-shell { display: none !important; }
body:not(.portal) .top-nav-shell { display: block !important; }

/* 双层架构的最终隔离线：主页只显示入口，经典测算只显示旧版功能壳。 */
body.classic-shell .starmap-entry,
body.classic-shell > .container > header,
body.classic-shell .today-glance,
body.classic-shell .hero,
body.classic-shell .ink-line,
body.classic-shell .seo-topic-entry,
body.classic-shell .tradition-gallery { display: none !important; }
body.classic-shell .top-nav-shell { display: block !important; }
body.classic-shell #mainContent > [id^="view"],
body.classic-shell #viewSingle > #inputPanel {
  scroll-margin-top: 102px;
}
@media (max-width: 680px) {
  body.classic-shell .compliance-banner {
    position: static !important;
    order: 99 !important;
    width: calc(100% - 24px) !important;
    margin: 26px 12px 4px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(216, 183, 111, .14) !important;
    border-radius: 13px !important;
    background: rgba(7, 15, 22, .72) !important;
    font-size: .62rem !important;
    line-height: 1.7 !important;
    opacity: .86 !important;
  }
}
body.classic-shell .top-nav { display: flex !important; }
body.classic-shell #mainContent > [id^="view"][hidden] { display: none !important; }
body.classic-shell #mainContent > [id^="view"].is-active-view { display: block !important; }
body.portal #mainContent > [id^="view"] { display: none !important; }

.report-conversion-bridge {
  --bridge-accent: #d9bd72;
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  margin: 28px 0 10px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 34%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--bridge-accent) 13%, transparent), transparent 18rem),
    linear-gradient(145deg, rgba(20, 31, 40, .98), rgba(7, 15, 23, .98));
  box-shadow: 0 20px 48px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.035);
}
.report-conversion-bridge--ziwei { --bridge-accent: #c2a3e6; }
.report-conversion-bridge--zodiac { --bridge-accent: #8fc7ea; }
.report-conversion-bridge::after {
  position: absolute;
  right: -45px;
  top: -75px;
  width: 185px;
  height: 185px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 26px color-mix(in srgb, var(--bridge-accent) 2%, transparent);
  pointer-events: none;
  content: "";
}
.report-conversion-bridge__seal {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 46%, transparent);
  border-radius: 19px 19px 19px 5px;
  background: color-mix(in srgb, var(--bridge-accent) 9%, transparent);
  color: var(--bridge-accent);
  font: 600 1.3rem "STKaiti","KaiTi",serif;
}
.report-conversion-bridge__copy { position: relative; z-index: 1; min-width: 0; }
.report-conversion-bridge__copy>small { color: var(--bridge-accent); font-size: .58rem; font-weight: 600; letter-spacing: .12em; }
.report-conversion-bridge__copy h3 { margin: 5px 0 7px; color: #f0ede5; font: 600 1.18rem/1.45 "STZhongsong","Microsoft YaHei UI",sans-serif; }
.report-conversion-bridge__copy p { margin: 0; color: #95a5a8; font-size: .66rem; line-height: 1.75; }
.report-conversion-bridge__copy>div { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; }
.report-conversion-bridge__copy>div span { color: #71858a; font-size: .54rem; }
.report-conversion-bridge__button {
  position: relative;
  z-index: 1;
  min-width: 216px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 62%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bridge-accent) 22%, transparent), rgba(255,255,255,.025));
  color: #f2dfaa;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bridge-accent) 12%, transparent);
  transition: transform .2s, border-color .2s, background .2s;
}
.report-conversion-bridge__button:hover { transform: translateY(-2px); border-color: var(--bridge-accent); background: color-mix(in srgb, var(--bridge-accent) 18%, rgba(255,255,255,.04)); }

@media (max-width: 720px) {
  .report-conversion-bridge { grid-template-columns: 50px 1fr; gap: 14px; padding: 19px 16px; }
  .report-conversion-bridge__seal { width: 50px; height: 50px; border-radius: 15px 15px 15px 4px; }
  .report-conversion-bridge__copy h3 { font-size: 1rem; }
  .report-conversion-bridge__copy>div { display: grid; gap: 4px; }
  .report-conversion-bridge__button { grid-column: 1 / -1; width: 100%; min-width: 0; }
}

/* ===== 2026.07.16-27 · 消费者路径精简 ===== */
.consumer-assurance {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 20px 0 18px;
  border: 1px solid rgba(216,183,111,.16);
  border-radius: 15px;
  background: rgba(4,12,18,.24);
  overflow: hidden;
}
.consumer-assurance>span { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 1px 9px; min-width: 0; padding: 13px 14px; }
.consumer-assurance>span+span { border-left: 1px solid rgba(216,183,111,.12); }
.consumer-assurance b { grid-row: 1 / 3; align-self: center; color: rgba(216,183,111,.6); font: 500 .67rem/1 "Times New Roman",serif; }
.consumer-assurance strong { color: #dfe4df; font-size: .67rem; font-weight: 600; }
.consumer-assurance small { color: #718287; font-size: .52rem; line-height: 1.45; }
.seo-topic-card--recommended { position: relative; border-color: rgba(216,183,111,.36); box-shadow: 0 16px 42px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025); }
.seo-topic-card__badge { position: absolute; z-index: 4; top: 10px; left: 10px; padding: 5px 9px; border: 1px solid rgba(240,207,129,.42); border-radius: 999px; background: rgba(7,15,22,.82); color: #ead28d; font-size: .5rem; font-weight: 700; letter-spacing: .1em; backdrop-filter: blur(8px); }
.btn-calculate[aria-busy="true"] { cursor: wait; filter: saturate(.75); opacity: .88; }

.result-extras { margin: 18px 0; border: 1px solid rgba(216,183,111,.16); border-radius: 16px; background: rgba(7,15,22,.42); overflow: hidden; }
.result-extras__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border: 0; background: linear-gradient(100deg,rgba(216,183,111,.07),transparent 62%); color: #edf0eb; text-align: left; cursor: pointer; }
.result-extras__toggle span { display: grid; gap: 3px; }
.result-extras__toggle small { color: #c9aa62; font-size: .52rem; font-weight: 600; letter-spacing: .13em; }
.result-extras__toggle strong { font-size: .72rem; font-weight: 600; }
.result-extras__toggle i { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(216,183,111,.28); border-radius: 50%; color: #d8b76f; font-size: 1rem; font-style: normal; }
.result-extras__toggle:hover { background-color: rgba(216,183,111,.04); }
.result-extras__body { padding: 0 16px 16px; }
.result-extras__body[hidden] { display: none !important; }

/* 旧版演示价格不再参与正式消费者路径。 */
#result>.paywall-card,.pricing-page { display: none !important; }
.unified-report-entry { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 18px; margin: 22px 0; padding: 20px; border: 1px solid rgba(216,183,111,.24); border-radius: 18px; background: radial-gradient(circle at 95% 10%,rgba(216,183,111,.1),transparent 18rem),rgba(9,20,28,.72); }
.unified-report-entry__seal { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(216,183,111,.38); border-radius: 15px 15px 15px 5px; color: #e4c878; font: 1rem "STKaiti",serif; }
.unified-report-entry small { color: #bda25f; font-size: .53rem; letter-spacing: .13em; }
.unified-report-entry h3 { margin: 4px 0 6px; color: #eef0eb; font-size: 1rem; }
.unified-report-entry p { margin: 0; color: #839399; font-size: .62rem; line-height: 1.7; }
.unified-report-entry a { min-width: 164px; padding: 12px 16px; border: 1px solid rgba(216,183,111,.38); border-radius: 999px; color: #e6ce89; font-size: .64rem; font-weight: 600; text-align: center; text-decoration: none; }
.unified-report-entry a:hover { background: rgba(216,183,111,.09); }

@media (max-width:760px) {
  .consumer-assurance { grid-template-columns: 1fr 1fr; }
  .consumer-assurance>span:nth-child(3) { border-left: 0; border-top: 1px solid rgba(216,183,111,.12); }
  .consumer-assurance>span:nth-child(4) { border-top: 1px solid rgba(216,183,111,.12); }
  .unified-report-entry { grid-template-columns: 46px 1fr; padding: 17px; }
  .unified-report-entry__seal { width: 44px; height: 44px; }
  .unified-report-entry a { grid-column: 1 / -1; width: 100%; }
}

body[data-theme="light"] .top-nav-shell,
body[data-theme="paper"] .top-nav-shell {
  background:
    radial-gradient(circle at 10% -35%, rgba(165, 105, 22, 0.13), transparent 34%),
    linear-gradient(110deg, rgba(253, 250, 242, 0.985), rgba(239, 231, 213, 0.98)) !important;
  border-color: rgba(139, 92, 25, 0.3) !important;
  box-shadow: 0 12px 30px rgba(95, 65, 23, 0.14), inset 0 -1px 0 rgba(129, 82, 19, 0.08) !important;
}
body[data-theme="light"] .top-nav-brand__copy strong,
body[data-theme="paper"] .top-nav-brand__copy strong { color: #49351d; }
body[data-theme="light"] .top-nav-brand__copy small,
body[data-theme="paper"] .top-nav-brand__copy small { color: #887658; }
body[data-theme="light"] .top-nav-shell .top-nav .nav-item,
body[data-theme="paper"] .top-nav-shell .top-nav .nav-item,
body[data-theme="light"] .top-nav-shell .top-nav .nav-more,
body[data-theme="paper"] .top-nav-shell .top-nav .nav-more,
body[data-theme="light"] .top-nav-shell .nav-overflow .nav-item,
body[data-theme="paper"] .top-nav-shell .nav-overflow .nav-item {
  color: #57452f !important;
  border-color: rgba(126, 84, 27, 0.2) !important;
  background: rgba(255, 255, 255, 0.38) !important;
}
body[data-theme="light"] .top-nav-shell .nav-item__copy small,
body[data-theme="paper"] .top-nav-shell .nav-item__copy small { color: #8f816d; }
body[data-theme="light"] .top-nav-shell .nav-overflow.show,
body[data-theme="paper"] .top-nav-shell .nav-overflow.show {
  background: linear-gradient(180deg, rgba(246, 240, 226, 0.99), rgba(235, 225, 204, 0.99)) !important;
  border-top-color: rgba(137, 91, 23, 0.2) !important;
}
body[data-theme="light"] .top-nav-shell .nav-item.active,
body[data-theme="paper"] .top-nav-shell .nav-item.active {
  color: #342207 !important;
  border-color: rgba(161, 106, 23, 0.62) !important;
  background: linear-gradient(145deg, rgba(223, 183, 102, 0.55), rgba(250, 242, 215, 0.82)) !important;
}

@media (max-width: 900px) {
  .top-nav-shell__bar { gap: 14px; }
  .top-nav-brand { min-width: 150px; }
  .top-nav-brand__copy small { display: none; }
  .top-nav-shell .top-nav .nav-item,
  .top-nav-shell .top-nav .nav-more { min-width: 96px; }
}

@media (max-width: 768px) {
  .top-nav-shell {
    margin: 0 -16px 14px;
    border-radius: 0;
  }
  .top-nav-shell__bar {
    min-height: 60px;
    gap: 0;
    padding: 8px 12px;
  }
  .top-nav-brand { display: none; }
  .top-nav-shell .top-nav { gap: 6px !important; }
  .top-nav-shell .top-nav .nav-item,
  .top-nav-shell .top-nav .nav-more {
    min-width: 76px;
    min-height: 44px;
    gap: 7px;
    padding: 6px 9px !important;
  }
  .top-nav-shell .top-nav .nav-item__seal,
  .top-nav-shell .top-nav .nav-more .nav-item__seal {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 6px 2px 6px 2px;
  }
  .top-nav-shell .top-nav .nav-item__copy small,
  .top-nav-shell .top-nav .nav-more .nav-item__copy small { display: none; }
  .top-nav-shell .top-nav .nav-item__copy strong,
  .top-nav-shell .top-nav .nav-more .nav-item__copy strong { font-size: 13px; line-height: 16px; }
  .top-nav-shell .nav-overflow.show {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 11px 14px 15px !important;
  }
  .nav-overflow__head { padding-bottom: 7px; }
  .nav-overflow__head small { display: none; }
}

@media (max-width: 430px) {
  .top-nav-shell .nav-overflow.show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-nav-shell .nav-overflow .nav-item { min-height: 56px; }
}

@media print {
  .top-nav-shell { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav-shell .nav-overflow.show { animation: none !important; }
}

/* ===== 2026.07.17-28 · 全站本地东方视觉与消费者反馈 ===== */
#viewSingle { --local-section-art: url('../images/topics/bazi-hero.webp'); }
#viewZiwei { --local-section-art: url('../images/topics/ziwei-hero.webp'); }
#viewZodiac { --local-section-art: url('../images/topics/zodiac-hero.webp'); }
#viewMatch { --local-section-art: url('../images/features/match.webp'); }
#viewSaved { --local-section-art: url('../images/features/saved.webp'); }
#viewShengxiao { --local-section-art: url('../images/features/shengxiao.webp'); }
#viewGua { --local-section-art: url('../images/features/gua.webp'); }
#viewDate { --local-section-art: url('../images/features/date.webp'); }
#viewQimen { --local-section-art: url('../images/topics/qimen-hero.webp'); }
#viewNaming { --local-section-art: url('../images/features/naming.webp'); }
#viewTarot { --local-section-art: url('../images/features/tarot.webp'); }
#viewFengshui { --local-section-art: url('../images/features/fengshui.webp'); }
#viewLiuren { --local-section-art: url('../images/features/liuren.webp'); }

body.classic-shell #mainContent>[id^="view"]>header {
  background-image: linear-gradient(90deg,rgba(5,12,18,.9),rgba(5,12,18,.6),rgba(5,12,18,.86)),var(--local-section-art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
}
body.classic-shell #mainContent>[id^="view"] .input-panel {
  background-image: linear-gradient(145deg,rgba(8,16,24,.95),rgba(12,16,27,.88)),var(--local-section-art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
}
body.classic-shell .layer-head {
  background-image: linear-gradient(100deg,rgba(8,15,23,.94),rgba(13,16,25,.86)),url('../images/topics/bazi-hero.webp') !important;
  background-size: cover !important;
  background-position: 50% 45% !important;
}
#result { background-image: linear-gradient(rgba(8,10,18,.94),rgba(7,11,17,.95)),url('../images/reports/bazi-report.webp') !important; background-attachment: scroll !important; }
#ziweiResult { background-image: linear-gradient(rgba(8,10,18,.94),rgba(8,11,20,.96)),url('../images/reports/ziwei-report.webp') !important; background-attachment: scroll !important; }
#zodiacResult { background-image: linear-gradient(rgba(8,12,19,.94),rgba(8,12,20,.96)),url('../images/reports/zodiac-report.webp') !important; background-attachment: scroll !important; }
#qimenResult { background-image: linear-gradient(rgba(8,12,18,.94),rgba(7,12,18,.96)),url('../images/reports/qimen-report.webp') !important; background-size: cover !important; background-position: center !important; }
#shengxiaoResult { background-image: linear-gradient(rgba(8,14,19,.94),rgba(8,14,20,.96)),url('../images/features/shengxiao.webp') !important; background-size: cover !important; }
#guaResult { background-image: linear-gradient(rgba(8,14,18,.94),rgba(8,13,20,.96)),url('../images/features/gua.webp') !important; background-size: cover !important; }
#dateResult { background-image: linear-gradient(rgba(8,14,18,.94),rgba(8,13,20,.96)),url('../images/features/date.webp') !important; background-size: cover !important; }
#savedList { background-image: linear-gradient(rgba(8,14,19,.94),rgba(8,14,20,.96)),url('../images/features/saved.webp') !important; background-size: cover !important; }
.decision-card { background-image: linear-gradient(rgba(8,14,19,.92),rgba(8,14,20,.96)),url('../images/topics/bazi-hero.webp') !important; background-size: cover !important; }
.daily-fortune-card { background-image: linear-gradient(rgba(8,14,19,.92),rgba(8,14,20,.96)),url('../images/features/date.webp') !important; background-size: cover !important; }

#result .summary-card,
#result .title-card,
#result .verdict-banner,
#result .zhaxin-hook,
#result .four-pillars,
#result .ten-gods-full,
#result .dayun-card,
#result .fortune-chart-section,
#result .accordion-section,
#result .bullet-cards,
#result .bullet-card,
#result .deep-table,
#result .analysis-card,
#result .strength-panel,
#result .liuqin-panel,
#result .next-actions {
  background-image: linear-gradient(145deg,rgba(8,12,19,.94),rgba(9,12,19,.9)),url('../images/reports/bazi-report.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: scroll !important;
}
#viewZiwei .zw-grid,
#viewZiwei .zw-pal,
#viewZiwei .zw-center {
  background-image: linear-gradient(145deg,rgba(9,11,22,.94),rgba(11,10,22,.9)),url('../images/reports/ziwei-report.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}
#viewZodiac .zodiac-card,
#viewZodiac .bullet-cards,
#viewZodiac .bullet-card {
  background-image: linear-gradient(145deg,rgba(8,13,21,.94),rgba(8,11,20,.91)),url('../images/reports/zodiac-report.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}

.feature-prereq { max-width: 760px; margin: 18px auto; padding: 28px; border: 1px solid rgba(216,183,111,.23); border-radius: 18px; background: radial-gradient(circle at 90% 0,rgba(216,183,111,.1),transparent 18rem),rgba(8,17,24,.9); text-align: center; }
.feature-prereq>span { color: #bea65f; font-size: .56rem; font-weight: 700; letter-spacing: .12em; }
.feature-prereq h3 { margin: 8px 0; color: #eff1ec; font-size: 1.05rem; }
.feature-prereq p { max-width: 580px; margin: 0 auto 18px; color: #83959a; font-size: .67rem; line-height: 1.8; }
.feature-prereq__button { display: inline-flex !important; width: auto !important; min-width: 220px; align-items: center; justify-content: center; text-decoration: none; }

@media (max-width:430px) {
  .top-nav-shell .top-nav .nav-item,
  .top-nav-shell .top-nav .nav-more { min-width: 0; flex: 1 1 0; padding: 5px 4px !important; }
  .top-nav-shell .top-nav .nav-item__copy strong,
  .top-nav-shell .top-nav .nav-more .nav-item__copy strong { font-size: 12px; }
  .feature-prereq { padding: 22px 17px; }
  .feature-prereq__button { width: 100% !important; min-width: 0; }
}

/* ===== 2026.07.17-29 · 轻量星图导航与首屏信息层级 ===== */
body.portal .starmap-entry {
  width: 100%;
  max-width: 1180px;
  min-height: 0 !important;
  margin: 10px auto 30px !important;
  padding: 28px 28px 22px !important;
  border: 1px solid rgba(211, 180, 105, .24) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(7, 17, 27, .7), rgba(5, 13, 21, .94)),
    radial-gradient(circle at 50% 38%, rgba(150, 119, 189, .15), transparent 43%),
    url('../images/tradition/ancient-observatory.webp') center 54% / cover no-repeat !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035);
  overflow: hidden;
}
body.portal .starmap-entry::before {
  background: linear-gradient(115deg, rgba(230, 202, 132, .1), transparent 30%, rgba(139, 114, 179, .09) 72%, transparent) !important;
}
body.portal .sme-eyebrow {
  margin-bottom: 7px;
  color: #c5a85f;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
}
body.portal .sme-title {
  margin: 0 !important;
  color: #f1eee4 !important;
  font: 600 clamp(1.25rem, 2.2vw, 1.85rem)/1.35 "STZhongsong", "Songti SC", "Microsoft YaHei UI", serif !important;
  letter-spacing: clamp(.22em, .75vw, .48em) !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
body.portal .sme-sub {
  margin: 10px auto 15px !important;
  padding: 7px 17px !important;
  border-color: rgba(214, 181, 100, .26) !important;
  background: rgba(6, 15, 23, .64) !important;
  color: #d7c48e !important;
  font-size: .64rem !important;
  letter-spacing: .04em !important;
  animation: none !important;
  backdrop-filter: blur(9px);
}
body.portal .sme-guide {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 auto 5px;
}
body.portal .sme-guide>span {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(205, 177, 111, .14);
  border-radius: 12px;
  background: rgba(6, 15, 24, .56);
  backdrop-filter: blur(8px);
}
body.portal .sme-guide i {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(219, 188, 112, .35);
  border-radius: 10px 10px 10px 3px;
  color: #dfc272;
  font: normal 600 .72rem "STKaiti", "KaiTi", serif;
}
body.portal .sme-guide b { color: #e4e5df; font-size: .62rem; font-weight: 600; }
body.portal .sme-guide small { overflow: hidden; color: #75898f; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
body.portal .starmap-nav {
  width: min(940px, 100%) !important;
  max-width: none !important;
  margin: 2px auto 0 !important;
  padding: 7px 12px 2px !important;
  border: 1px solid rgba(213, 181, 105, .14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(3, 12, 20, .5), rgba(3, 10, 18, .76));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 18px 44px rgba(0, 0, 0, .24);
}
body.portal .starmap-nav svg { width: 100% !important; height: auto !important; display: block; }
.sm-loading { fill: #9d8d69; font: 600 14px "Microsoft YaHei UI", sans-serif; letter-spacing: .16em; }
.sm-sky { fill: #d6d8df; }
.sm-orbits { fill: none; stroke: rgba(188, 161, 102, .14); stroke-width: 1; stroke-dasharray: 3 8; }
.sm-lines line { stroke: url(#smLine); stroke-width: 1.15 !important; }
.sm-centre circle { fill: rgba(8, 17, 27, .82); stroke: rgba(218, 187, 111, .36); stroke-width: 1; filter: url(#smGlow); }
.sm-centre text { fill: #e3c976; font: 600 15px "STZhongsong", "Songti SC", serif; letter-spacing: .14em; text-anchor: middle; }
.sm-centre .sm-centre-sub { fill: #75898e; font: 500 7px "Microsoft YaHei UI", sans-serif; letter-spacing: .08em; }
.sm-star { cursor: pointer; outline: none; }
.sm-star .sm-hit { fill: transparent; }
.sm-star .sm-ring { fill: rgba(255, 255, 255, .008); stroke: rgba(218, 188, 116, .42); stroke-width: 1.1; stroke-dasharray: 4 5; }
.sm-star--core .sm-ring { stroke: rgba(218, 188, 116, .75); stroke-width: 1.5; }
.sm-star .sm-ray { fill: rgba(248, 224, 157, .7); }
.sm-star .sm-name { fill: #edf0eb; font: 600 17px "STZhongsong", "Songti SC", "Microsoft YaHei UI", serif; letter-spacing: .1em; }
.sm-star .sm-note { fill: #71858c; font: 500 7.5px "Microsoft YaHei UI", sans-serif; letter-spacing: .06em; }
.sm-star .sm-enter { fill: #ebce79; font: 600 8px "Microsoft YaHei UI", sans-serif; opacity: 0; transition: opacity .2s; }
.sm-star:hover .sm-enter,
.sm-star:focus-visible .sm-enter { opacity: 1; }
.sm-star:hover .sm-ring,
.sm-star:focus-visible .sm-ring { stroke: #f0d486; stroke-width: 2; stroke-dasharray: none; }
.sm-star:focus-visible .sm-hit { fill: rgba(225, 194, 116, .08); stroke: rgba(240, 212, 134, .45); stroke-width: 1; }
.sm-star:hover .sm-name,
.sm-star:focus-visible .sm-name { fill: #fff5d3 !important; }
body.portal .sme-foot {
  width: min(880px, 100%);
  display: flex;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin: 11px auto 0;
  color: #6f8389;
  font-size: .5rem;
}
body.portal .sme-foot span::before { margin-right: 6px; color: #bfa45d; content: "◇"; }

body[data-theme="light"].portal .starmap-entry,
body[data-theme="paper"].portal .starmap-entry {
  background:
    linear-gradient(180deg, rgba(250, 247, 239, .78), rgba(237, 229, 210, .94)),
    url('../images/tradition/ancient-observatory.webp') center 54% / cover no-repeat !important;
  border-color: rgba(126, 83, 24, .24) !important;
}
body[data-theme="light"].portal .sme-title,
body[data-theme="paper"].portal .sme-title { color: #382814 !important; text-shadow: none; }
body[data-theme="light"].portal .sme-guide>span,
body[data-theme="paper"].portal .sme-guide>span,
body[data-theme="light"].portal .starmap-nav,
body[data-theme="paper"].portal .starmap-nav { background: rgba(250, 247, 238, .76); border-color: rgba(126, 83, 24, .18); }
body[data-theme="light"].portal .sme-guide b,
body[data-theme="paper"].portal .sme-guide b,
body[data-theme="light"].portal .sm-star .sm-name,
body[data-theme="paper"].portal .sm-star .sm-name { color: #49341b; fill: #49341b; }

@media (max-width: 720px) {
  body.portal .starmap-entry { margin: 4px auto 20px !important; padding: 22px 12px 17px !important; border-radius: 20px !important; }
  body.portal .sme-title { letter-spacing: .2em !important; }
  body.portal .sme-sub { width: auto; max-width: calc(100% - 12px); font-size: .58rem !important; line-height: 1.6; }
  body.portal .sme-guide { gap: 5px; }
  body.portal .sme-guide>span { display: flex; justify-content: center; gap: 6px; padding: 8px 5px; text-align: center; }
  body.portal .sme-guide i { width: 25px; height: 25px; flex: 0 0 25px; }
  body.portal .sme-guide small { display: none; }
  body.portal .sme-guide b { font-size: .54rem; }
  body.portal .starmap-nav { padding: 3px !important; border-radius: 14px; }
  body.portal .sme-foot { gap: 5px 12px; font-size: .46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-pulse, .sm-ray, .sm-ring { animation: none !important; }
}

/* ===== 2026.07.17-30 · 首页进入独立测算的到场过渡 ===== */
body.classic-shell.entering-from-home::after {
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(216,183,111,.13), transparent 18rem),
    radial-gradient(circle at 24% 28%, rgba(240,217,149,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, rgba(240,217,149,.55) 0 1px, transparent 2px),
    #071018;
  background-size: auto, 190px 190px, 260px 260px, auto;
  animation: calculatorCurtainOut .86s .12s cubic-bezier(.22,1,.36,1) both;
  content: "";
}
body.classic-shell.entering-from-home .top-nav-shell,
body.classic-shell.entering-from-home #mainContent {
  animation: calculatorContentArrive .72s .24s cubic-bezier(.22,1,.36,1) both;
}
@keyframes calculatorCurtainOut { from { opacity: 1; clip-path: circle(145% at 50% 50%); } to { opacity: 0; clip-path: circle(0 at 50% 50%); } }
@keyframes calculatorContentArrive { from { opacity: 0; transform: translateY(16px) scale(.992); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.classic-shell.entering-from-home::after,
  body.classic-shell.entering-from-home .top-nav-shell,
  body.classic-shell.entering-from-home #mainContent { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ===== 2026.07.17-32 · 付费报告进入专业测算中心 ===== */
.professional-arrival { display: none; }
body.classic-shell.entering-from-paid .professional-arrival {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(216,183,111,.16), transparent 20rem),
    radial-gradient(circle at 18% 24%, rgba(240,217,149,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 20%, rgba(142,198,195,.52) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 78%, rgba(240,217,149,.42) 0 1px, transparent 2px),
    #061019;
  background-size: auto, 210px 210px, 270px 270px, 190px 190px, auto;
  animation: professionalArrivalLeave 1.55s .08s cubic-bezier(.76,0,.24,1) both;
}
.professional-arrival__orbit { position: absolute; left: 50%; top: 46%; width: min(66vw,680px); aspect-ratio: 1; border: 1px solid rgba(240,217,149,.26); border-radius: 50%; box-shadow: inset 0 0 80px rgba(216,183,111,.025),0 0 0 52px rgba(216,183,111,.016),0 0 0 104px rgba(216,183,111,.007); transform: translate(-50%,-50%); animation: professionalOrbit 13s linear infinite; }
.professional-arrival__orbit::before,.professional-arrival__orbit::after { position: absolute; inset: 14%; border: 1px dashed rgba(121,184,168,.28); border-radius: 50%; content:""; }.professional-arrival__orbit::after{inset:31%;border-style:solid;border-color:rgba(240,217,149,.2)}
.professional-arrival__orbit i { position: absolute; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(240,217,149,.43); border-radius: 15px 15px 15px 5px; background: rgba(7,17,25,.84); color: #ecd58f; font: 600 .85rem "STKaiti","KaiTi",serif; font-style: normal; box-shadow: 0 0 24px rgba(216,183,111,.08); }
.professional-arrival__orbit i:nth-child(1){left:8%;top:23%}.professional-arrival__orbit i:nth-child(2){right:8%;top:23%}.professional-arrival__orbit i:nth-child(3){left:11%;bottom:18%}.professional-arrival__orbit i:nth-child(4){right:11%;bottom:18%}
.professional-arrival__orbit b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border: 1px solid rgba(240,217,149,.75); border-radius: 50%; background: radial-gradient(circle,#f1d88e 0 3px,rgba(216,183,111,.25) 4px,rgba(6,16,24,.88) 72%); box-shadow: 0 0 38px 10px rgba(216,183,111,.14); transform: translate(-50%,-50%); }
.professional-arrival__copy { position: relative; z-index: 2; padding: 36px 48px; text-align: center; animation: professionalCopyIn .58s .12s cubic-bezier(.22,1,.36,1) both; }
.professional-arrival__copy small { color: #d6b75f; font-size: .64rem; font-weight: 700; letter-spacing: .2em; }
.professional-arrival__copy strong { display: block; margin: 8px 0 10px; color: #f2e9d1; font: 600 clamp(1.9rem,4.5vw,3.2rem)/1.35 "STZhongsong","Microsoft YaHei UI",sans-serif; letter-spacing: .08em; text-shadow: 0 5px 30px rgba(0,0,0,.35); }
.professional-arrival__copy p { margin: 0; color: #9baba9; font-size: .72rem; letter-spacing: .15em; }
body.classic-shell.entering-from-paid .top-nav-shell,
body.classic-shell.entering-from-paid #mainContent { animation: calculatorContentArrive .82s .8s cubic-bezier(.22,1,.36,1) both; }
body.classic-shell.entering-from-paid .top-nav-brand { animation: professionalBrandGlow 1.3s 1.1s ease-out both; }
@keyframes professionalArrivalLeave { 0%,58%{opacity:1;clip-path:circle(145% at 50% 50%)} 100%{opacity:0;clip-path:circle(0 at 50% 50%)} }
@keyframes professionalOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes professionalCopyIn { from { opacity:0;transform:translateY(18px) scale(.97);filter:blur(7px) } to { opacity:1;transform:none;filter:blur(0) } }
@keyframes professionalBrandGlow { from { filter:drop-shadow(0 0 18px rgba(240,217,149,.7)); } to { filter:none; } }
@media (max-width:720px) {
  .professional-arrival__orbit{width:88vw}.professional-arrival__copy{padding:24px 18px}.professional-arrival__copy strong{font-size:1.75rem}.professional-arrival__copy p{font-size:.56rem;line-height:1.8}.professional-arrival__orbit i{width:38px;height:38px}
}
@media (prefers-reduced-motion: reduce) {
  body.classic-shell.entering-from-paid .professional-arrival,
  body.classic-shell.entering-from-paid .top-nav-shell,
  body.classic-shell.entering-from-paid #mainContent,
  body.classic-shell.entering-from-paid .top-nav-brand { animation-duration:.01ms!important;animation-delay:0s!important; }
}

/* ===== 2026.07.17-33 · 完整测算中心启动大厅 ===== */
.professional-center-lobby { display: none; }
body.classic-shell:not(.professional-lobby-dismissed).entering-from-home .professional-center-lobby,
body.classic-shell:not(.professional-lobby-dismissed).entering-from-paid .professional-center-lobby {
  display: block;
  position: relative;
  z-index: 12;
  order: 2;
  overflow: hidden;
  margin: 22px 0 42px;
  border: 1px solid rgba(227,191,107,.4);
  border-radius: 30px;
  background: #07121b;
  box-shadow: 0 32px 90px rgba(0,0,0,.46),0 0 55px rgba(216,183,111,.05),inset 0 1px rgba(255,255,255,.04);
  animation: professionalLobbyIn .9s .38s cubic-bezier(.22,1,.36,1) both;
}
.professional-center-lobby.is-leaving { animation: professionalLobbyOut .42s cubic-bezier(.65,0,.35,1) both !important; }
.professional-center-lobby__hero { position: relative; min-height: 535px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); overflow: hidden; border-bottom: 1px solid rgba(216,183,111,.18); background: linear-gradient(90deg,rgba(5,14,22,.97) 0%,rgba(5,14,22,.9) 48%,rgba(5,14,22,.36) 76%,rgba(5,14,22,.68) 100%),url("../images/topics/bazi-hero.webp") center/cover; }
.professional-center-lobby__hero::before { position: absolute; inset: 0; opacity: .48; pointer-events: none; background-image: radial-gradient(circle at 13% 20%,rgba(240,217,149,.75) 0 1px,transparent 2px),radial-gradient(circle at 31% 76%,rgba(121,184,168,.52) 0 1px,transparent 2px),radial-gradient(circle at 74% 16%,rgba(240,217,149,.62) 0 1px,transparent 2px); background-size: 190px 190px,240px 240px,280px 280px; content:""; }
.professional-center-lobby__copy { position: relative; z-index: 2; display: flex; justify-content: center; flex-direction: column; padding: 62px 28px 58px 62px; }
.professional-center-lobby__badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; padding: 7px 12px; border: 1px solid rgba(240,217,149,.38); border-radius: 999px; background: rgba(216,183,111,.08); color: #e7d18e; font-size: .57rem; font-weight: 700; letter-spacing: .08em; }
.professional-center-lobby__badge i { width: 6px; height: 6px; border-radius: 50%; background: #8dd0b9; box-shadow: 0 0 13px 3px rgba(141,208,185,.35); animation: professionalStatusPulse 2s ease-in-out infinite; }
.professional-center-lobby__copy > p { margin: 0; color: #d5b75e; font-size: .62rem; font-weight: 700; letter-spacing: .18em; }
.professional-center-lobby__copy h2 { max-width: 690px; margin: 10px 0 18px; color: #f2efe7; font: 600 clamp(2.5rem,4.4vw,4rem)/1.17 "STZhongsong","Microsoft YaHei UI",sans-serif; letter-spacing: .015em; text-shadow: 0 8px 40px rgba(0,0,0,.45); }
.professional-center-lobby__copy h2 em { display: block; color: #ead080; font-style: normal; }
.professional-center-lobby__copy > strong { max-width: 700px; color: #aab7b7; font-size: .78rem; font-weight: 400; line-height: 2; }
.professional-center-lobby__stats { width: min(590px,100%); display: grid; grid-template-columns: repeat(3,1fr); margin-top: 27px; border-block: 1px solid rgba(216,183,111,.15); }
.professional-center-lobby__stats > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 15px 18px; }.professional-center-lobby__stats>span+span{border-left:1px solid rgba(216,183,111,.12)}
.professional-center-lobby__stats b { color: #f0d37d; font: 500 1.7rem "Times New Roman",serif; }.professional-center-lobby__stats small{color:#87999c;font-size:.55rem;line-height:1.5}
.professional-center-lobby__actions { display: flex; align-items: center; gap: 11px; margin-top: 27px; }
.professional-center-lobby__actions button { min-height: 52px; padding: 12px 21px; border: 1px solid rgba(216,183,111,.26); border-radius: 999px; background: rgba(255,255,255,.025); color: #b6c3c0; font-size: .68rem; font-weight: 600; }
.professional-center-lobby__actions button:first-child { min-width: 230px; border-color: #efd483; background: linear-gradient(135deg,#e3c673,#ae8537); color: #10171b; box-shadow: 0 15px 36px rgba(185,140,48,.22),inset 0 1px rgba(255,255,255,.38); }
.professional-center-lobby__actions button:hover,.professional-center-lobby__actions button:focus-visible { outline: 0; transform: translateY(-2px); }.professional-center-lobby__actions i{margin-left:8px;font-style:normal}.professional-center-lobby__actions span{margin-left:8px;color:#d8bd6f}
.professional-center-lobby__instrument { position: relative; z-index: 1; min-height: 535px; }
.professional-center-lobby__rings { position: absolute; left: 50%; top: 50%; width: min(34vw,430px); aspect-ratio: 1; border: 1px solid rgba(240,217,149,.3); border-radius: 50%; box-shadow: inset 0 0 65px rgba(216,183,111,.04),0 0 0 34px rgba(216,183,111,.02),0 0 0 68px rgba(216,183,111,.009),0 25px 80px rgba(0,0,0,.34); transform: translate(-50%,-50%); animation: professionalLobbyOrbit 24s linear infinite; }
.professional-center-lobby__rings::before,.professional-center-lobby__rings::after { position: absolute; inset: 14%; border: 1px dashed rgba(121,184,168,.33); border-radius: 50%; content:""; }.professional-center-lobby__rings::after{inset:31%;border-style:solid;border-color:rgba(240,217,149,.28)}
.professional-center-lobby__rings > i { position: absolute; left: 50%; top: 50%; width: 86%; height: 38%; border: 1px solid rgba(216,183,111,.13); border-radius: 50%; transform: translate(-50%,-50%) rotate(calc(var(--ring-index,0) * 60deg)); }.professional-center-lobby__rings>i:nth-child(1){--ring-index:0}.professional-center-lobby__rings>i:nth-child(2){--ring-index:1}.professional-center-lobby__rings>i:nth-child(3){--ring-index:2}
.professional-center-lobby__rings > b { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid rgba(240,217,149,.62); border-radius: 24px 24px 24px 8px; background: radial-gradient(circle,rgba(216,183,111,.18),rgba(5,15,23,.9)); color: #efd58c; font: 600 1.45rem "STKaiti","KaiTi",serif; box-shadow: 0 0 45px rgba(216,183,111,.18),inset 0 0 28px rgba(216,183,111,.08); transform: translate(-50%,-50%) rotate(calc(var(--professional-orbit-counter,0deg))); }
.professional-center-lobby__instrument > span { position: absolute; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(240,217,149,.44); border-radius: 22px 22px 22px 7px; background: rgba(5,15,23,.78); color: #efd58c; font: 600 1rem "STKaiti","KaiTi",serif; box-shadow: 0 15px 35px rgba(0,0,0,.3),inset 0 0 24px rgba(216,183,111,.06); backdrop-filter: blur(10px); }
.professional-center-lobby__instrument > span small { margin-top: 4px; color: #8d9d9e; font: 500 .48rem "Microsoft YaHei UI",sans-serif; }.professional-center-lobby__instrument .is-bazi{left:7%;top:13%}.professional-center-lobby__instrument .is-ziwei{right:7%;top:19%}.professional-center-lobby__instrument .is-zodiac{left:11%;bottom:12%}.professional-center-lobby__instrument .is-qimen{right:9%;bottom:16%}
.professional-engine-ledger { display:grid; grid-template-columns:minmax(220px,.78fr) minmax(0,2fr); gap:26px; padding:25px 30px; border-bottom:1px solid rgba(216,183,111,.16); background:linear-gradient(120deg,rgba(14,29,38,.98),rgba(6,15,23,.98)); }
.professional-engine-ledger__intro small,.professional-engine-ledger__intro strong,.professional-engine-ledger__intro span { display:block; }
.professional-engine-ledger__intro small { color:#d3b65e; font-size:.48rem; font-weight:700; letter-spacing:.15em; }
.professional-engine-ledger__intro strong { margin:8px 0 7px; color:#eee9dd; font:600 1.06rem/1.4 "STZhongsong","Microsoft YaHei UI",sans-serif; }
.professional-engine-ledger__intro span { max-width:410px; color:#849799; font-size:.54rem; line-height:1.7; }
.professional-engine-ledger__items { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.professional-engine-ledger__items>span { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:10px; padding:12px; border:1px solid rgba(149,175,173,.14); border-radius:14px; background:rgba(2,10,16,.56); }
.professional-engine-ledger__items i { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(219,188,100,.35); border-radius:11px 11px 11px 4px; color:#e2c66f; font:normal 600 .65rem "STKaiti","KaiTi",serif; }
.professional-engine-ledger__items b { overflow:hidden; color:#e6e5de; font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.professional-engine-ledger__items small { overflow:hidden; color:#71868a; font-size:.43rem; text-overflow:ellipsis; white-space:nowrap; }
.professional-engine-ledger>a { grid-column:1/-1; width:max-content; color:#bca45f; font-size:.47rem; text-decoration:none; }
.professional-engine-ledger>a:hover { color:#efd27d; }
.professional-center-lobby__portals { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 1px; background: rgba(216,183,111,.12); }
.professional-center-lobby__portals > button { position: relative; min-width: 0; min-height: 235px; overflow: hidden; padding: 0; border: 0; background: #08141e; color: inherit; text-align: left; }
.professional-center-lobby__portals img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.45); transition: transform .65s ease,filter .45s ease; }
.professional-center-lobby__portals > button::after { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,13,20,.98),rgba(5,13,20,.2) 76%); content:""; }
.professional-center-lobby__portals button:hover img,.professional-center-lobby__portals button:focus-visible img { filter: saturate(1) brightness(.65); transform: scale(1.055); }.professional-center-lobby__portals button:focus-visible{z-index:2;outline:2px solid #e6c66f;outline-offset:-2px}
.professional-center-lobby__portals button > span { position: absolute; z-index: 2; left: 22px; right: 18px; bottom: 23px; display: flex; flex-direction: column; }.professional-center-lobby__portals span small{color:#d2b75f;font-size:.48rem;font-weight:700;letter-spacing:.14em}.professional-center-lobby__portals span b{margin:5px 0 4px;color:#f1ece1;font:600 1.05rem "STZhongsong","Microsoft YaHei UI",sans-serif}.professional-center-lobby__portals span em{color:#849598;font-size:.52rem;font-style:normal}.professional-center-lobby__portals button>i{position:absolute;z-index:2;right:18px;top:17px;color:#e6cc80;font-size:.5rem;font-style:normal;opacity:.72}
.professional-center-lobby__skip { width: 100%; padding: 13px; border: 0; border-top: 1px solid rgba(216,183,111,.13); background: #07121b; color: #778b8f; font-size: .56rem; letter-spacing: .06em; }
.professional-center-lobby__skip:hover { color: #e0c675; }
@keyframes professionalLobbyIn { from { opacity:0;transform:translateY(28px) scale(.985);filter:blur(7px) } to { opacity:1;transform:none;filter:blur(0) } }
@keyframes professionalLobbyOut { to { opacity:0;transform:translateY(-18px) scale(.99);filter:blur(4px) } }
@keyframes professionalLobbyOrbit { to { transform:translate(-50%,-50%) rotate(360deg) } }
@keyframes professionalStatusPulse { 0%,100%{opacity:.45;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
@media (max-width:980px) {
  .professional-center-lobby__hero{grid-template-columns:1fr;min-height:820px}.professional-center-lobby__copy{padding:52px 44px 300px}.professional-center-lobby__instrument{position:absolute;left:0;right:0;bottom:0;min-height:320px}.professional-center-lobby__rings{width:300px}.professional-center-lobby__instrument>span{width:58px;height:58px}.professional-center-lobby__instrument .is-bazi{left:20%;top:10%}.professional-center-lobby__instrument .is-ziwei{right:20%;top:14%}.professional-center-lobby__instrument .is-zodiac{left:23%;bottom:10%}.professional-center-lobby__instrument .is-qimen{right:22%;bottom:12%}.professional-engine-ledger{grid-template-columns:1fr;padding:24px}.professional-engine-ledger__items{grid-template-columns:1fr 1fr}.professional-center-lobby__portals{grid-template-columns:1fr 1fr}
}
@media (max-width:720px) {
  body.classic-shell:not(.professional-lobby-dismissed).entering-from-home .professional-center-lobby,body.classic-shell:not(.professional-lobby-dismissed).entering-from-paid .professional-center-lobby{margin:12px 0 28px;border-radius:22px}.professional-center-lobby__hero{min-height:780px}.professional-center-lobby__copy{padding:34px 20px 300px}.professional-center-lobby__badge{font-size:.48rem}.professional-center-lobby__copy h2{font-size:2.15rem}.professional-center-lobby__copy>strong{font-size:.68rem}.professional-center-lobby__stats>span{grid-template-columns:1fr;padding:12px 7px;text-align:center}.professional-center-lobby__stats b{font-size:1.4rem}.professional-center-lobby__stats small{font-size:.46rem}.professional-center-lobby__actions{align-items:stretch;flex-direction:column}.professional-center-lobby__actions button{width:100%}.professional-center-lobby__instrument .is-bazi{left:6%}.professional-center-lobby__instrument .is-ziwei{right:6%}.professional-center-lobby__instrument .is-zodiac{left:8%}.professional-center-lobby__instrument .is-qimen{right:8%}.professional-engine-ledger{padding:20px 16px}.professional-engine-ledger__items{grid-template-columns:1fr}.professional-center-lobby__portals{grid-template-columns:1fr}.professional-center-lobby__portals>button{min-height:215px}
}
@media (prefers-reduced-motion:reduce) {
  .professional-center-lobby,.professional-center-lobby.is-leaving,.professional-center-lobby__rings,.professional-center-lobby__badge i{animation-duration:.01ms!important;animation-delay:0s!important}
}

/* ===== 2026.07.19-7 · 完整测算中心清晰字体与语义色层级 ===== */
body.classic-shell {
  --read-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --read-text: #f2f0e9;
  --read-secondary: #c2cdcb;
  --read-muted: #9cacae;
  --read-gold: #f0d27e;
  --read-jade: #86dfbc;
  --read-coral: #f29a87;
  --read-amber: #e9bd69;
  --read-blue: #9bc9ef;
  font-family: var(--read-sans) !important;
  font-size: 17px;
  line-height: 1.8;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
body.classic-shell button,
body.classic-shell input,
body.classic-shell select,
body.classic-shell textarea,
body.classic-shell h1,
body.classic-shell h2,
body.classic-shell h3,
body.classic-shell h4,
body.classic-shell h5,
body.classic-shell h6 {
  font-family: var(--read-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* 启动大厅：所有信息均保持在舒适阅读下限之上。 */
body.classic-shell .professional-center-lobby__badge { font-size: 12.5px; line-height: 1.45; }
body.classic-shell .professional-center-lobby__copy > p { color: var(--read-gold); font-size: 13.5px; line-height: 1.6; }
body.classic-shell .professional-center-lobby__copy h2 { font-family: var(--read-sans) !important; font-weight: 720; letter-spacing: -.018em; }
body.classic-shell .professional-center-lobby__copy h2 em { color: var(--read-gold); }
body.classic-shell .professional-center-lobby__copy > strong { color: var(--read-secondary); font-size: 16px; font-weight: 500; line-height: 1.9; }
body.classic-shell .professional-center-lobby__stats small { color: var(--read-secondary); font-size: 13px; font-weight: 500; }
body.classic-shell .professional-center-lobby__actions button { font-size: 15px; line-height: 1.4; }
body.classic-shell .professional-center-lobby__instrument > span { font-family: var(--read-sans) !important; font-weight: 700; }
body.classic-shell .professional-center-lobby__instrument > span small { color: var(--read-secondary); font: 600 11.5px/1.35 var(--read-sans); }
body.classic-shell .professional-center-lobby__portals span small { color: var(--read-gold); font-size: 11.5px; }
body.classic-shell .professional-center-lobby__portals span b { color: var(--read-text); font: 700 19px/1.45 var(--read-sans); }
body.classic-shell .professional-center-lobby__portals span em { color: var(--read-secondary); font-size: 13.5px; line-height: 1.55; }
body.classic-shell .professional-center-lobby__portals button > i { color: var(--read-gold); font-size: 12px; }
body.classic-shell .professional-center-lobby__skip { color: var(--read-muted); font-size: 13.5px; font-weight: 600; }

/* 顶部导航：标题与说明不再依靠过小字号制造层级。 */
body.classic-shell .top-nav-brand__copy strong { font-size: 17px; line-height: 1.35; }
body.classic-shell .top-nav-brand__copy small { color: var(--read-secondary); font-size: 12.5px; line-height: 1.45; }
body.classic-shell .nav-item__seal { font-family: var(--read-sans); font-size: 14px; }
body.classic-shell .nav-item__copy strong { font-size: 15.5px; line-height: 1.35; }
body.classic-shell .nav-item__copy small,
body.classic-shell .nav-overflow__head small { color: var(--read-secondary); font-size: 12.5px; line-height: 1.4; }
body.classic-shell .nav-overflow__head span { color: var(--read-gold); font-size: 16px; }

/* 十三板块各有识别色；核心标题、当前选项与重点结论共同继承。 */
#viewSingle { --view-accent: #efd17c; }
#viewZiwei { --view-accent: #cbb3ef; }
#viewZodiac { --view-accent: #9dcff2; }
#viewMatch { --view-accent: #f0a9bd; }
#viewSaved { --view-accent: #9ab8e8; }
#viewShengxiao { --view-accent: #8ed5a3; }
#viewGua { --view-accent: #e8bd73; }
#viewDate { --view-accent: #8fd3d1; }
#viewQimen { --view-accent: #8bd5b9; }
#viewNaming { --view-accent: #d6a8d7; }
#viewTarot { --view-accent: #bba9ec; }
#viewFengshui { --view-accent: #7ecbc3; }
#viewLiuren { --view-accent: #8dbfe4; }

body.classic-shell #mainContent > [id^="view"] { color: var(--read-text); }
body.classic-shell #mainContent > [id^="view"] > header h1,
body.classic-shell #mainContent > [id^="view"] .panel-title,
body.classic-shell #mainContent > [id^="view"] .section-title,
body.classic-shell #mainContent > [id^="view"] .strength-panel > h4,
body.classic-shell #mainContent > [id^="view"] .analysis-card > h4,
body.classic-shell #mainContent > [id^="view"] .accordion-title {
  color: var(--view-accent, var(--read-gold)) !important;
}
body.classic-shell #mainContent > [id^="view"] > header h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 720; line-height: 1.35; letter-spacing: .1em; }
body.classic-shell #mainContent > [id^="view"] > header .subtitle { color: var(--read-secondary) !important; font-size: 16px !important; line-height: 1.8; }

/* 表单、说明与长报告统一使用清晰黑体和更宽松的行距。 */
body.classic-shell .calculator-visual__eyebrow { color: var(--view-accent, var(--read-gold)); font-size: 13.5px; font-weight: 700; }
body.classic-shell .calculator-visual strong { color: var(--read-text); font: 720 clamp(24px, 2.5vw, 34px)/1.45 var(--read-sans) !important; letter-spacing: .02em; }
body.classic-shell .calculator-visual small { color: var(--read-secondary); font-size: 14px; font-weight: 500; }
body.classic-shell #mainContent .panel-title { font-size: 19px !important; font-weight: 720 !important; line-height: 1.5; letter-spacing: .12em; }
body.classic-shell #mainContent .cal-tab,
body.classic-shell #mainContent .btn-calculate,
body.classic-shell #mainContent .today-btn { font-size: 15px !important; font-weight: 650; }
body.classic-shell #mainContent .cal-tab.active { color: var(--view-accent, var(--read-gold)) !important; }
body.classic-shell #mainContent .input-group label { color: var(--read-text); font-size: 15px !important; font-weight: 650; }
body.classic-shell #mainContent input,
body.classic-shell #mainContent select,
body.classic-shell #mainContent textarea { color: var(--read-text); font-size: 16px !important; line-height: 1.45; }
body.classic-shell #mainContent .advanced-summary-title { color: var(--view-accent, var(--read-gold)); font-size: 15.5px; font-weight: 700; }
body.classic-shell #mainContent .advanced-summary-hint { color: var(--read-secondary); font-size: 13.5px; }
body.classic-shell #mainContent .advanced-input-note,
body.classic-shell #mainContent .rel-intro { color: var(--read-secondary); font-size: 14.5px !important; line-height: 1.85; }

body.classic-shell #mainContent > [id^="view"] p,
body.classic-shell #mainContent > [id^="view"] li,
body.classic-shell #mainContent > [id^="view"] dd,
body.classic-shell #mainContent > [id^="view"] dt { font-family: var(--read-sans); font-size: 15.5px !important; line-height: 1.85 !important; }
body.classic-shell #mainContent > [id^="view"] small { font-family: var(--read-sans); font-size: 13px !important; line-height: 1.6; }
body.classic-shell #mainContent > [id^="view"] table,
body.classic-shell #mainContent > [id^="view"] th,
body.classic-shell #mainContent > [id^="view"] td { font-family: var(--read-sans); font-size: 14px !important; line-height: 1.65; }
body.classic-shell #mainContent .st-k { color: var(--read-muted); font-size: 14px !important; }
body.classic-shell #mainContent .st-v { color: var(--read-text); font-size: 15px !important; line-height: 1.8; }
body.classic-shell #mainContent .report-detail,
body.classic-shell #mainContent .accordion-body,
body.classic-shell #mainContent .bullet-card,
body.classic-shell #mainContent .analysis-card { color: var(--read-secondary); }
body.classic-shell #mainContent .report-note,
body.classic-shell #mainContent .ge-warn { color: var(--read-amber) !important; font-size: 14px !important; line-height: 1.75; }
body.classic-shell #mainContent .report-summary-strip span:nth-child(3n+1) { color: var(--read-gold); }
body.classic-shell #mainContent .report-summary-strip span:nth-child(3n+2) { color: var(--read-jade); }
body.classic-shell #mainContent .report-summary-strip span:nth-child(3n) { color: var(--read-blue); }
body.classic-shell #mainContent .report-dimension-card:nth-of-type(3n+1) summary strong { color: var(--read-gold); }
body.classic-shell #mainContent .report-dimension-card:nth-of-type(3n+2) summary strong { color: var(--read-jade); }
body.classic-shell #mainContent .report-dimension-card:nth-of-type(3n) summary strong { color: var(--read-blue); }

/* 吉、提醒、压力三类信息使用稳定语义色，而非只依赖图标。 */
body.classic-shell #mainContent .st-v.st-pos,
body.classic-shell #mainContent .lkd-good .lkd-star,
body.classic-shell #mainContent .lkm-good .lkm-tag,
body.classic-shell #mainContent .zw-br.br-good,
body.classic-shell #mainContent .zm-good,
body.classic-shell #mainContent .sx-pr-good .sx-prk,
body.classic-shell #mainContent .daily-badge.good,
body.classic-shell #mainContent .daily-badge.super { color: var(--read-jade) !important; }
body.classic-shell #mainContent .st-v.st-neg,
body.classic-shell #mainContent .lkd-bad .lkd-star,
body.classic-shell #mainContent .lkm-bad .lkm-tag,
body.classic-shell #mainContent .zw-br.br-weak,
body.classic-shell #mainContent .zm-bad,
body.classic-shell #mainContent .sx-pr-bad .sx-prk,
body.classic-shell #mainContent .daily-badge.poor { color: var(--read-coral) !important; }
body.classic-shell #mainContent .sx-pr-warn .sx-prk,
body.classic-shell #mainContent .daily-badge.avg { color: var(--read-amber) !important; }
body.classic-shell #mainContent p strong,
body.classic-shell #mainContent li strong,
body.classic-shell #mainContent .st-v b { color: var(--view-accent, var(--read-gold)); font-weight: 720; }

body[data-theme="light"].classic-shell,
body[data-theme="paper"].classic-shell {
  --read-text: #302719;
  --read-secondary: #5e513c;
  --read-muted: #76684f;
  --read-gold: #8b641d;
  --read-jade: #257255;
  --read-coral: #a43e32;
  --read-amber: #8b5e16;
  --read-blue: #315f89;
}

@media (max-width: 720px) {
  body.classic-shell { font-size: 16px; }
  body.classic-shell .professional-center-lobby__badge { font-size: 12px; }
  body.classic-shell .professional-center-lobby__copy h2 { font-size: clamp(32px, 10vw, 42px); }
  body.classic-shell .professional-center-lobby__copy > strong { font-size: 15px; line-height: 1.85; }
  body.classic-shell .professional-center-lobby__stats small { font-size: 12px; }
  body.classic-shell .professional-center-lobby__portals span b { font-size: 18px; }
  body.classic-shell .professional-center-lobby__portals span em { font-size: 13px; }
  body.classic-shell .nav-item__copy strong,
  body.classic-shell .top-nav-shell .top-nav .nav-item__copy strong,
  body.classic-shell .top-nav-shell .top-nav .nav-more .nav-item__copy strong { font-size: 14.5px; line-height: 1.35; }
  body.classic-shell #mainContent .panel-title { font-size: 17px !important; }
  body.classic-shell #mainContent > [id^="view"] p,
  body.classic-shell #mainContent > [id^="view"] li { font-size: 15px !important; }
}

/* 2026.08.13-1 · 免费初见后的完整测算专注模式 */
.brand-copy-journey,.nav-journey-secondary,.journey-focus-intro { display: none; }
body.classic-shell.completing-journey .brand-copy-default { display: none; }
body.classic-shell.completing-journey .brand-copy-journey { display: inline; }
body.classic-shell.completing-journey .nav-core-secondary { display: none !important; }
body.classic-shell.completing-journey .nav-journey-secondary { display: inline-flex !important; }
body.classic-shell.completing-journey .top-nav-shell .top-nav { justify-content: flex-end; overflow: visible !important; }
body.classic-shell.completing-journey .top-nav-shell .top-nav .nav-item,
body.classic-shell.completing-journey .top-nav-shell .top-nav .nav-more { min-width: 112px; }
body.classic-shell.completing-journey .nav-overflow__head span::after { content: " · 可随时切换"; }
body.classic-shell.completing-journey #themeSwitch { display: none !important; }
body.classic-shell.completing-journey #ambientMusicToggle { top: 86px; width: 46px; min-height: 46px; grid-template-columns: 1fr; padding: 4px; border-radius: 14px 14px 14px 5px; opacity: .72; }
body.classic-shell.completing-journey #ambientMusicToggle:hover,
body.classic-shell.completing-journey #ambientMusicToggle:focus-visible,
body.classic-shell.completing-journey #ambientMusicToggle.is-playing { opacity: 1; }
body.classic-shell.completing-journey #ambientMusicToggle .ambient-soundscape__seal { width: 34px; height: 34px; margin: auto; }
body.classic-shell.completing-journey #ambientMusicToggle .ambient-soundscape__copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.classic-shell.completing-journey #ambientVolumePanel { top: 138px; }
body.classic-shell.completing-journey .journey-focus-intro { display: block; order: 0; margin: 10px 0 16px; padding: 22px 24px; border: 1px solid rgba(112,199,174,.28); border-radius: 18px; background: linear-gradient(120deg,rgba(55,145,124,.13),rgba(8,19,27,.9) 68%); box-shadow: inset 0 1px rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.17); }
body.classic-shell.completing-journey .journey-focus-intro span { display: block; color: #76bda9; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
body.classic-shell.completing-journey .journey-focus-intro strong { display: block; margin-top: 6px; color: #e5ece8; font-size: 19px; font-weight: 700; line-height: 1.5; }
body.classic-shell.completing-journey .journey-focus-intro p { margin: 5px 0 0; color: #8ba09f; font-size: 13px; line-height: 1.7; }
body.classic-shell.completing-journey #viewSingle > .calculator-visual { display: none !important; }
body.classic-shell.completing-journey #viewSingle > .bazi-journey { order: 1; }
body.classic-shell.completing-journey #viewSingle > #inputPanel { order: 2; }
body.classic-shell.completing-journey #viewSingle > .journey-focus-intro { order: 0; }

@media (max-width: 768px) {
  body.classic-shell.completing-journey .top-nav-shell .top-nav { justify-content: stretch; }
  body.classic-shell.completing-journey .top-nav-shell .top-nav .nav-item,
  body.classic-shell.completing-journey .top-nav-shell .top-nav .nav-more { min-width: 0; flex: 1 1 0; }
  body.classic-shell.completing-journey .journey-focus-intro { margin: 4px 0 12px; padding: 18px 17px; }
  body.classic-shell.completing-journey .journey-focus-intro strong { font-size: 17px; }
  body.classic-shell.completing-journey #ambientMusicToggle { top: 70px; right: 8px; }
  body.classic-shell.completing-journey #ambientVolumePanel { top: 122px; }
}

/* ========================================================================== 
   八字主流程层级 · 2026.07.27-1
   先填写 → 再生成 → 后阅读；核验与黄历降为辅助参考。
   ========================================================================== */
body.classic-shell #viewSingle {
  display: flex !important;
  flex-direction: column;
}
body.classic-shell #viewSingle > .calculator-visual { order: 0; }
body.classic-shell #viewSingle > .bazi-journey { order: 1; }
body.classic-shell #viewSingle > #inputPanel { order: 2; }
body.classic-shell #viewSingle > .interpretive-scene--bazi { order: 3; }
body.classic-shell #viewSingle > #placeholder,
body.classic-shell #viewSingle > .ritual-loader,
body.classic-shell #viewSingle > .skeleton-loading { order: 4; }
body.classic-shell #viewSingle > #result { order: 5; }
body.classic-shell #viewSingle > .bazi-reference-tools { order: 6; }

body.classic-shell #viewSingle .bazi-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(980px, calc(100% - 40px));
  margin: 26px auto 18px;
  padding: 12px;
  border: 1px solid rgba(222, 190, 105, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -40%, rgba(218, 183, 91, .13), transparent 52%),
    linear-gradient(135deg, rgba(15, 29, 39, .97), rgba(7, 15, 23, .98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  overflow: hidden;
}
body.classic-shell #viewSingle .bazi-journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 16px 20px;
  color: #83939a;
}
body.classic-shell #viewSingle .bazi-journey__step + .bazi-journey__step {
  border-left: 1px solid rgba(215, 187, 107, .14);
}
body.classic-shell #viewSingle .bazi-journey__step i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(156, 170, 174, .22);
  border-radius: 15px;
  color: #718188;
  background: rgba(4, 11, 18, .58);
  font: 700 12px/1 var(--read-sans);
  letter-spacing: .08em;
  font-style: normal;
}
body.classic-shell #viewSingle .bazi-journey__step b {
  overflow: hidden;
  color: #aeb9b9;
  font: 700 15px/1.45 var(--read-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-journey__step small {
  overflow: hidden;
  margin-top: 3px;
  color: #66777d;
  font-size: 12px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-journey__step.is-active {
  border-radius: 15px;
  background: linear-gradient(115deg, rgba(209, 169, 62, .15), rgba(79, 124, 112, .08));
  box-shadow: inset 0 0 0 1px rgba(229, 198, 112, .14);
}
body.classic-shell #viewSingle .bazi-journey__step.is-active i {
  border-color: rgba(233, 199, 105, .66);
  color: #061018;
  background: linear-gradient(145deg, #f0d784, #b98b25);
  box-shadow: 0 8px 22px rgba(196, 146, 30, .18);
}
body.classic-shell #viewSingle .bazi-journey__step.is-active b { color: #f4ead1; }
body.classic-shell #viewSingle .bazi-journey__step.is-active small { color: #c8b985; }
body.classic-shell #viewSingle .bazi-journey__step.is-complete i {
  border-color: rgba(101, 187, 151, .44);
  color: #a1e0c3;
  background: rgba(47, 117, 91, .18);
}
body.classic-shell #viewSingle .bazi-journey__step.is-complete i::after {
  content: "✓";
  position: absolute;
  margin: 30px 0 0 31px;
  color: #8fd4b5;
  font-size: 11px;
}

body.classic-shell #viewSingle > #inputPanel {
  position: relative;
  display: block !important;
  width: min(980px, calc(100% - 40px));
  margin: 0 auto 22px !important;
  padding: 34px 36px 30px !important;
  border: 1px solid rgba(220, 188, 100, .3) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(8, 18, 27, .98) 0%, rgba(8, 18, 27, .94) 55%, rgba(8, 18, 27, .88) 100%),
    url("../images/topics/bazi-hero.webp") center 38% / cover no-repeat !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .025);
  overflow: hidden;
}
body.classic-shell #viewSingle > #inputPanel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(223, 191, 104, .08);
  border-radius: 50%;
  transform: translate(35%, -48%);
  pointer-events: none;
}
body.classic-shell #viewSingle .bazi-form-heading {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-bottom: 22px;
  text-align: left;
}
body.classic-shell #viewSingle .bazi-form-heading > span,
body.classic-shell #viewSingle .bazi-result-stage > span,
body.classic-shell #viewSingle .bazi-reference-tools__head > span,
body.classic-shell #viewSingle .bazi-awaiting > span {
  display: block;
  margin-bottom: 8px;
  color: #d7b75c;
  font: 760 11px/1.4 var(--read-sans);
  letter-spacing: .16em;
}
body.classic-shell #viewSingle .bazi-form-heading h2 {
  margin: 0;
  color: #f5f0e6;
  font: 760 clamp(24px, 3vw, 34px)/1.3 var(--read-sans);
  letter-spacing: .01em;
}
body.classic-shell #viewSingle .bazi-form-heading p {
  margin: 9px 0 0;
  color: #9eabad;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
body.classic-shell #viewSingle #inputPanel .cal-toggle {
  position: relative;
  z-index: 1;
  justify-content: flex-start !important;
  gap: 8px;
  margin: 0 0 18px !important;
}
body.classic-shell #viewSingle #inputPanel .cal-tab {
  min-width: 112px;
  height: 42px;
  border-radius: 13px;
  font-family: var(--read-sans);
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .08em;
}
body.classic-shell #viewSingle #inputPanel .input-row {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(132px, 1.25fr) repeat(4, minmax(94px, 1fr));
  gap: 15px 12px !important;
  align-items: end !important;
  justify-content: stretch !important;
}
body.classic-shell #viewSingle #inputPanel .input-group {
  display: grid;
  gap: 8px;
  min-width: 0 !important;
}
body.classic-shell #viewSingle #inputPanel .input-group label {
  margin: 0 2px;
  color: #b7c2c1;
  font: 680 13px/1.35 var(--read-sans);
}
body.classic-shell #viewSingle #inputPanel .input-group input:not([type="checkbox"]),
body.classic-shell #viewSingle #inputPanel .input-group select {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(145, 165, 169, .22) !important;
  border-radius: 14px !important;
  background: rgba(4, 12, 19, .86) !important;
  color: #f0eee8 !important;
  font-family: var(--read-sans) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
body.classic-shell #viewSingle #inputPanel .input-group input:focus,
body.classic-shell #viewSingle #inputPanel .input-group select:focus {
  border-color: rgba(223, 191, 101, .7) !important;
  box-shadow: 0 0 0 3px rgba(220, 184, 83, .1) !important;
}
body.classic-shell #viewSingle #inputPanel .btn-calculate {
  grid-column: 1 / 5;
  min-height: 54px;
  margin: 2px 0 0 !important;
  border: 1px solid #e2c365 !important;
  border-radius: 15px !important;
  background: linear-gradient(100deg, #e3c875, #bd902c) !important;
  color: #09131a !important;
  font: 800 16px/1.2 var(--read-sans) !important;
  letter-spacing: .08em;
  box-shadow: 0 10px 28px rgba(187, 138, 29, .2) !important;
}
body.classic-shell #viewSingle #inputPanel .today-btn {
  grid-column: 5;
  min-height: 54px;
  margin: 2px 0 0 !important;
  border: 1px solid rgba(218, 190, 111, .3) !important;
  border-radius: 15px !important;
  background: rgba(15, 28, 36, .94) !important;
  color: #d9ca9b !important;
  font: 700 14px/1.2 var(--read-sans) !important;
  letter-spacing: .04em;
}
body.classic-shell #viewSingle #inputPanel .advanced-inputs {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  border-top: 1px solid rgba(204, 181, 113, .13);
}
body.classic-shell #viewSingle #inputPanel .quick-input-row {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-top: 16px !important;
}
body.classic-shell #viewSingle #inputPanel .quick-input {
  width: 100% !important;
  min-height: 46px;
  border: 1px dashed rgba(218, 187, 101, .23) !important;
  border-radius: 13px !important;
  background: rgba(195, 151, 43, .055) !important;
  color: #c9bc90 !important;
  font-size: 13px !important;
  text-align: center;
}

body.classic-shell #viewSingle .bazi-awaiting {
  display: grid !important;
  justify-items: center;
  width: min(900px, calc(100% - 64px));
  margin: 18px auto 34px;
  padding: 38px 26px;
  border: 1px dashed rgba(216, 184, 93, .24);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(13, 27, 37, .68), rgba(7, 15, 22, .82));
  text-align: center;
}
body.classic-shell #viewSingle .bazi-awaiting[hidden] { display: none !important; }
body.classic-shell #viewSingle .bazi-awaiting strong {
  color: #ebe6da;
  font: 730 clamp(20px, 2.7vw, 28px)/1.45 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-awaiting small {
  margin-top: 10px;
  color: #8d9c9f;
  font-size: 14px !important;
}

body.classic-shell #viewSingle .bazi-result-stage {
  margin: 0 0 22px;
  padding: 25px 28px;
  border: 1px solid rgba(220, 188, 100, .32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0, rgba(218, 182, 86, .15), transparent 36%),
    linear-gradient(135deg, rgba(19, 38, 48, .96), rgba(8, 18, 26, .98));
}
body.classic-shell #viewSingle .bazi-result-stage > strong {
  display: block;
  color: #f1ecdf;
  font: 750 clamp(21px, 2.8vw, 30px)/1.4 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-result-stage > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
body.classic-shell #viewSingle .bazi-result-stage i {
  padding: 12px 14px;
  border: 1px solid rgba(215, 187, 108, .16);
  border-radius: 12px;
  background: rgba(4, 12, 18, .48);
  color: #c7d0ce;
  font: 650 13px/1.5 var(--read-sans);
  font-style: normal;
  text-align: center;
}

body.classic-shell #viewSingle .bazi-reference-tools {
  width: min(980px, calc(100% - 40px));
  margin: 34px auto 12px;
  padding: 24px;
  border: 1px solid rgba(144, 161, 164, .16);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12, 25, 34, .72), rgba(7, 15, 22, .82));
}
body.classic-shell #viewSingle .bazi-reference-tools__head {
  padding: 3px 4px 20px;
  border-bottom: 1px solid rgba(158, 171, 172, .1);
}
body.classic-shell #viewSingle .bazi-reference-tools__head h2 {
  margin: 0;
  color: #d9ded9;
  font: 720 21px/1.4 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-reference-tools__head p {
  margin: 7px 0 0;
  color: #7f9094;
  font-size: 13px !important;
}
body.classic-shell #viewSingle .bazi-reference-tools > .input-panel.layer-group {
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(152, 169, 172, .14) !important;
  border-radius: 15px !important;
  background: rgba(5, 13, 20, .54) !important;
  box-shadow: none !important;
}
body.classic-shell #viewSingle .bazi-reference-tools > .layer-group.collapsed .layer-body {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
body.classic-shell #viewSingle .bazi-reference-tools .layer-head {
  min-height: 64px;
  padding: 15px 19px;
}
body.classic-shell #viewSingle .bazi-reference-tools .panel-title {
  color: #c3ccca !important;
  font-family: var(--read-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
body.classic-shell #viewSingle .bazi-reference-tools .layer-arrow { color: #c5a84e; }
body.classic-shell #viewSingle .bazi-reference-tools .layer-body { padding-inline: 18px; }

body[data-theme="light"].classic-shell #viewSingle .bazi-journey,
body[data-theme="paper"].classic-shell #viewSingle .bazi-journey,
body[data-theme="light"].classic-shell #viewSingle > #inputPanel,
body[data-theme="paper"].classic-shell #viewSingle > #inputPanel {
  border-color: rgba(120, 88, 31, .27) !important;
  background: linear-gradient(135deg, rgba(249, 246, 236, .98), rgba(239, 232, 214, .98)) !important;
}
body[data-theme="light"].classic-shell #viewSingle .bazi-form-heading h2,
body[data-theme="paper"].classic-shell #viewSingle .bazi-form-heading h2,
body[data-theme="light"].classic-shell #viewSingle .bazi-journey__step.is-active b,
body[data-theme="paper"].classic-shell #viewSingle .bazi-journey__step.is-active b { color: #352a1a; }
body[data-theme="light"].classic-shell #viewSingle .bazi-form-heading p,
body[data-theme="paper"].classic-shell #viewSingle .bazi-form-heading p { color: #695e4c; }
body[data-theme="light"].classic-shell #viewSingle #inputPanel .input-group input:not([type="checkbox"]),
body[data-theme="light"].classic-shell #viewSingle #inputPanel .input-group select,
body[data-theme="paper"].classic-shell #viewSingle #inputPanel .input-group input:not([type="checkbox"]),
body[data-theme="paper"].classic-shell #viewSingle #inputPanel .input-group select {
  border-color: rgba(91, 70, 36, .22) !important;
  background: rgba(255, 253, 247, .88) !important;
  color: #302719 !important;
}

@media (max-width: 720px) {
  body.classic-shell #viewSingle .bazi-journey {
    width: calc(100% - 24px);
    margin: 18px auto 14px;
    padding: 8px;
    border-radius: 18px;
  }
  body.classic-shell #viewSingle .bazi-journey__step {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 5px;
    padding: 11px 5px;
    text-align: center;
  }
  body.classic-shell #viewSingle .bazi-journey__step i {
    grid-row: auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 10px;
  }
  body.classic-shell #viewSingle .bazi-journey__step b {
    width: 100%;
    font-size: 12.5px;
  }
  body.classic-shell #viewSingle .bazi-journey__step small { display: none; }
  body.classic-shell #viewSingle .bazi-journey__step.is-complete i::after {
    margin: 23px 0 0 25px;
    font-size: 9px;
  }
  body.classic-shell #viewSingle > #inputPanel {
    width: calc(100% - 24px);
    padding: 26px 18px 22px !important;
    border-radius: 20px !important;
  }
  body.classic-shell #viewSingle .bazi-form-heading { margin-bottom: 18px; }
  body.classic-shell #viewSingle .bazi-form-heading h2 { font-size: 25px; }
  body.classic-shell #viewSingle .bazi-form-heading p { font-size: 13.5px !important; }
  body.classic-shell #viewSingle #inputPanel .cal-tab {
    min-width: 0;
    flex: 1;
  }
  body.classic-shell #viewSingle #inputPanel .input-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 13px 10px !important;
  }
  body.classic-shell #viewSingle #inputPanel .input-group:first-child { grid-column: 1 / -1; }
  body.classic-shell #viewSingle #inputPanel .btn-calculate,
  body.classic-shell #viewSingle #inputPanel .today-btn { grid-column: 1 / -1; }
  body.classic-shell #viewSingle #inputPanel .today-btn {
    min-height: 46px;
    margin-top: -3px !important;
  }
  body.classic-shell #viewSingle .bazi-awaiting {
    width: calc(100% - 38px);
    margin-top: 10px;
    padding: 30px 20px;
  }
  body.classic-shell #viewSingle .bazi-awaiting strong { font-size: 20px; }
  body.classic-shell #viewSingle .bazi-result-stage { padding: 22px 18px; }
  body.classic-shell #viewSingle .bazi-result-stage > div { grid-template-columns: 1fr; }
  body.classic-shell #viewSingle .bazi-reference-tools {
    width: calc(100% - 24px);
    margin-top: 26px;
    padding: 17px;
  }
  body.classic-shell #viewSingle .bazi-reference-tools__head h2 { font-size: 19px; }
}

/* ==========================================================================
   八字命盘核心主视觉 · 2026.07.27-2
   四柱从折叠详情提升为结果区第一视觉，日主列为阅读焦点。
   ========================================================================== */
body.classic-shell #viewSingle .bazi-core-chart {
  position: relative;
  scroll-margin-top: 108px;
  margin: 22px 0 30px;
  padding: clamp(22px, 3.2vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(232, 202, 119, .38);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 12%, rgba(221, 181, 73, .16), transparent 26%),
    radial-gradient(circle at 12% 92%, rgba(56, 129, 111, .12), transparent 28%),
    linear-gradient(112deg, rgba(7, 17, 25, .985), rgba(14, 28, 37, .965)),
    url("../images/topics/bazi-hero.webp") center / cover no-repeat;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .04),
    inset 0 0 70px rgba(219, 177, 63, .035);
  isolation: isolate;
}
body.classic-shell #viewSingle .bazi-core-chart::before,
body.classic-shell #viewSingle .bazi-core-chart::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(225, 193, 105, .1);
  border-radius: 50%;
  pointer-events: none;
}
body.classic-shell #viewSingle .bazi-core-chart::before {
  top: -210px;
  right: -90px;
  width: 470px;
  height: 470px;
  box-shadow: 0 0 0 42px rgba(222, 185, 84, .018), 0 0 0 96px rgba(222, 185, 84, .012);
}
body.classic-shell #viewSingle .bazi-core-chart::after {
  bottom: -180px;
  left: -150px;
  width: 350px;
  height: 350px;
  border-color: rgba(99, 181, 151, .08);
}
/* 旧版全局 header 强制规则覆盖修复 · 2026.07.27-3 */
body.classic-shell #viewSingle .bazi-core-chart__head {
  position: relative;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 0 !important;
  margin-bottom: 28px;
  padding: 0 0 25px !important;
  border-bottom: 1px solid rgba(224, 192, 104, .16);
  text-align: left !important;
}
body.classic-shell #viewSingle .bazi-core-chart__seal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 72px;
  border: 1px solid rgba(235, 204, 117, .62);
  border-radius: 22px 22px 22px 7px;
  background:
    linear-gradient(145deg, rgba(221, 183, 76, .17), rgba(124, 81, 24, .05)),
    rgba(5, 13, 20, .68);
  color: #f2d982;
  font: 700 28px/1 var(--read-serif);
  text-shadow: 0 0 22px rgba(238, 202, 104, .35);
  box-shadow: inset 0 0 24px rgba(215, 171, 57, .08), 0 12px 32px rgba(0, 0, 0, .2);
}
body.classic-shell #viewSingle .bazi-core-chart__copy > span {
  display: block;
  margin-bottom: 7px;
  color: #d9b95d;
  font: 760 11px/1.4 var(--read-sans);
  letter-spacing: .18em;
}
body.classic-shell #viewSingle .bazi-core-chart__copy h2 {
  margin: 0;
  color: #f4eee1;
  font: 760 clamp(25px, 3.4vw, 38px)/1.28 var(--read-sans);
  letter-spacing: .015em;
}
body.classic-shell #viewSingle .bazi-core-chart__copy p {
  max-width: 710px;
  margin: 9px 0 0;
  color: #9dacac;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
body.classic-shell #viewSingle .bazi-core-chart__focus {
  display: grid;
  justify-items: center;
  min-width: 78px;
  padding: 12px 16px;
  border: 1px solid rgba(227, 194, 101, .3);
  border-radius: 15px;
  background: rgba(203, 157, 43, .08);
}
body.classic-shell #viewSingle .bazi-core-chart__focus b {
  color: #f0d274;
  font: 760 15px/1.3 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-core-chart__focus small {
  margin-top: 3px;
  color: #8f9a98;
  font-size: 10px !important;
  letter-spacing: .12em;
}
body.classic-shell #viewSingle .bazi-core-chart__frame {
  position: relative;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(223, 190, 99, .2);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(4, 11, 17, .94), rgba(8, 16, 23, .86)),
    radial-gradient(circle at center, rgba(209, 164, 46, .07), transparent 58%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015), inset 0 0 48px rgba(0, 0, 0, .28);
}
body.classic-shell #viewSingle .bazi-core-chart__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e4c263, transparent);
  box-shadow: 0 0 16px rgba(230, 196, 99, .35);
}
body.classic-shell #viewSingle .bazi-core-chart__guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 12px 74px;
}
body.classic-shell #viewSingle .bazi-core-chart__guide span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid rgba(147, 165, 166, .11);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}
body.classic-shell #viewSingle .bazi-core-chart__guide i {
  color: #c5a956;
  font: 700 13px/1 var(--read-serif);
  font-style: normal;
}
body.classic-shell #viewSingle .bazi-core-chart__guide b {
  overflow: hidden;
  color: #849497;
  font: 650 11px/1.3 var(--read-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-core-chart__guide .is-focus {
  border-color: rgba(229, 194, 98, .26);
  background: linear-gradient(110deg, rgba(210, 167, 54, .11), rgba(111, 83, 30, .04));
}
body.classic-shell #viewSingle .bazi-core-chart__guide .is-focus i,
body.classic-shell #viewSingle .bazi-core-chart__guide .is-focus b { color: #ecd17c; }

body.classic-shell #viewSingle .bazi-core-chart .four-pillars,
body.classic-shell #viewSingle .bazi-core-chart .pro-chart {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(218, 188, 104, .19) !important;
  border-radius: 16px !important;
  background: rgba(2, 8, 13, .76) !important;
  background-image: none !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .02) !important;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-row {
  position: relative;
  grid-template-columns: 72px repeat(4, minmax(0, 1fr));
  min-height: 54px;
  border-color: rgba(158, 170, 169, .1);
  transition: background .22s ease;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-row:hover { background: rgba(218, 183, 84, .035); }
body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel {
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 7px 5px;
  border-color: rgba(158, 170, 169, .1);
  background: rgba(210, 175, 80, .045);
}
body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel b {
  color: #b8c1bd;
  font: 670 12px/1.25 var(--read-sans);
  letter-spacing: .06em;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel small {
  color: #586a70;
  font: 700 7px/1 var(--read-sans) !important;
  letter-spacing: .12em;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-cell {
  position: relative;
  min-width: 0;
  padding: 11px 8px;
  border-color: rgba(158, 170, 169, .09);
}
body.classic-shell #viewSingle .bazi-core-chart .pc-head {
  min-height: 72px;
  background: linear-gradient(90deg, rgba(190, 143, 32, .075), rgba(255, 255, 255, .014), rgba(190, 143, 32, .075));
}
body.classic-shell #viewSingle .bazi-core-chart .pc-col-head {
  display: grid;
  place-content: center;
  gap: 5px;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-col-head b {
  color: #e3c361;
  font: 750 16px/1.2 var(--read-sans);
  letter-spacing: .08em;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-col-head small {
  color: #6f7f82;
  font: 700 8px/1 var(--read-sans) !important;
  letter-spacing: .16em;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-corner b {
  color: #dfc46f;
  font-family: var(--read-serif);
  font-size: 15px;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-row-stem,
body.classic-shell #viewSingle .bazi-core-chart .pc-row-branch { min-height: 94px; }
body.classic-shell #viewSingle .bazi-core-chart .pc-row-stem .pc-cell,
body.classic-shell #viewSingle .bazi-core-chart .pc-row-branch .pc-cell { padding-block: 17px; }
body.classic-shell #viewSingle .bazi-core-chart .pc-big {
  font-family: var(--read-serif) !important;
  font-size: clamp(40px, 5.2vw, 58px) !important;
  font-weight: 730 !important;
  line-height: 1 !important;
  text-shadow: 0 0 22px currentColor !important;
  filter: saturate(.96);
}
body.classic-shell #viewSingle .bazi-core-chart .pc-small {
  color: #c7ceca;
  font-family: var(--read-sans) !important;
  font-size: 13px !important;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-cang-cell {
  align-items: stretch;
  gap: 5px;
  padding: 12px 9px;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-cang {
  justify-content: center;
  gap: 5px;
  min-height: 22px;
  font-family: var(--read-sans);
  font-size: 12px;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-cang i { color: #7f8e90; }
body.classic-shell #viewSingle .bazi-core-chart .pc-ss-cell span {
  color: #d6bb65;
  font-family: var(--read-sans);
  font-size: 11px;
  line-height: 1.55;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-pillar-cell.is-daymaster {
  background:
    linear-gradient(180deg, rgba(226, 189, 85, .085), rgba(226, 189, 85, .025)) !important;
  box-shadow: inset 1px 0 rgba(235, 204, 117, .17), inset -1px 0 rgba(235, 204, 117, .17);
}
body.classic-shell #viewSingle .bazi-core-chart .pc-col-head.is-daymaster::after {
  content: "命主";
  position: absolute;
  top: 6px;
  right: 7px;
  padding: 3px 5px;
  border: 1px solid rgba(239, 205, 111, .24);
  border-radius: 999px;
  color: #f0d57d;
  background: rgba(205, 159, 39, .1);
  font: 700 8px/1 var(--read-sans);
  letter-spacing: .06em;
}
body.classic-shell #viewSingle .bazi-core-chart__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
body.classic-shell #viewSingle .bazi-core-chart__foot span {
  position: relative;
  padding: 10px 12px 10px 30px;
  border: 1px solid rgba(144, 162, 163, .11);
  border-radius: 11px;
  background: rgba(255, 255, 255, .018);
  color: #92a09f;
  font: 650 12px/1.4 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-core-chart__foot span::before {
  content: "✦";
  position: absolute;
  left: 12px;
  color: #d1b357;
  font-size: 9px;
}
body.classic-shell #viewSingle .result.show .bazi-core-chart {
  animation: baziCoreReveal .72s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes baziCoreReveal {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: none; }
}

body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart {
  border-color: rgba(115, 82, 27, .28);
  background:
    radial-gradient(circle at 84% 10%, rgba(181, 128, 26, .13), transparent 28%),
    linear-gradient(135deg, rgba(251, 247, 235, .99), rgba(235, 226, 204, .98));
  box-shadow: 0 26px 60px rgba(83, 60, 22, .13), inset 0 1px rgba(255, 255, 255, .7);
}
body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart__copy h2,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart__copy h2 { color: #302516; }
body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart__copy p,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart__copy p { color: #675b47; }
body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart__frame,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart__frame { background: rgba(255, 252, 242, .78); }
body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart .four-pillars,
body[data-theme="light"].classic-shell #viewSingle .bazi-core-chart .pro-chart,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart .four-pillars,
body[data-theme="paper"].classic-shell #viewSingle .bazi-core-chart .pro-chart {
  border-color: rgba(99, 75, 35, .16) !important;
  background: rgba(253, 249, 237, .88) !important;
}

@media (max-width: 720px) {
  body.classic-shell #viewSingle .bazi-core-chart {
    margin: 16px 0 24px;
    padding: 20px 12px 16px;
    border-radius: 22px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__head {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    margin: 0 6px 20px;
    padding: 0 0 18px !important;
  }
  body.classic-shell #viewSingle .bazi-core-chart__seal {
    width: 50px;
    height: 58px;
    border-radius: 17px 17px 17px 6px;
    font-size: 22px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__copy > span { font-size: 9px; }
  body.classic-shell #viewSingle .bazi-core-chart__copy h2 { font-size: 23px; }
  body.classic-shell #viewSingle .bazi-core-chart__copy p {
    margin-top: 7px;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }
  body.classic-shell #viewSingle .bazi-core-chart__focus { display: none; }
  body.classic-shell #viewSingle .bazi-core-chart__frame {
    padding: 7px;
    border-radius: 16px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__guide {
    gap: 4px;
    margin: 2px 0 7px 43px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__guide span {
    gap: 3px;
    padding: 6px 2px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__guide i { font-size: 10px; }
  body.classic-shell #viewSingle .bazi-core-chart__guide b { font-size: 8px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-row {
    grid-template-columns: 42px repeat(4, minmax(0, 1fr));
    min-height: 45px;
  }
  body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel { padding: 5px 2px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel b { font-size: 10px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-rowlabel small { display: none; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-cell { padding: 8px 2px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-head { min-height: 58px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-col-head b { font-size: 12px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-col-head small { font-size: 6px !important; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-row-stem,
  body.classic-shell #viewSingle .bazi-core-chart .pc-row-branch { min-height: 73px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-big { font-size: 32px !important; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-small { font-size: 10px !important; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-cang {
    display: grid;
    gap: 1px;
    font-size: 9px;
  }
  body.classic-shell #viewSingle .bazi-core-chart .pc-ss-cell span { font-size: 8px; }
  body.classic-shell #viewSingle .bazi-core-chart .pc-col-head.is-daymaster::after {
    top: 3px;
    right: 3px;
    padding: 2px 3px;
    font-size: 6px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__foot {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 11px 2px 0;
  }
  body.classic-shell #viewSingle .bazi-core-chart__foot span {
    padding: 8px 10px 8px 28px;
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.classic-shell #viewSingle .result.show .bazi-core-chart { animation: none; }
}

/* ==========================================================================
   命盘总览台与连续导读系统 · 2026.07.28-1
   把排盘状态、四柱主盘、三步读盘路径和命书目录收束为同一专业工作台。
   ========================================================================== */
body.classic-shell #viewSingle .bazi-core-chart {
  --bazi-gold: #d8bb6a;
  --bazi-gold-bright: #f0d98d;
  --bazi-ivory: #f1eee5;
  --bazi-ink: #071119;
  --bazi-panel: rgba(7, 16, 23, .9);
  --bazi-line: rgba(221, 193, 111, .2);
  --bazi-muted: #92a3a6;
  padding: clamp(20px, 3vw, 36px);
  overflow: clip;
  border-color: rgba(220, 193, 113, .3);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(8, 18, 26, .9), rgba(6, 14, 20, .985) 44%, rgba(9, 21, 27, .98)),
    url("../images/topics/bazi-hero.webp") center 8% / cover no-repeat;
  box-shadow:
    0 38px 90px rgba(0, 0, 0, .44),
    inset 0 1px rgba(255, 255, 255, .045),
    inset 0 0 0 1px rgba(8, 11, 12, .35);
}
body.classic-shell #viewSingle .bazi-core-chart::before {
  top: -255px;
  right: -115px;
  width: 540px;
  height: 540px;
  border-color: rgba(224, 197, 117, .09);
  box-shadow:
    0 0 0 58px rgba(222, 185, 84, .014),
    0 0 0 128px rgba(222, 185, 84, .009);
}
body.classic-shell #viewSingle .bazi-core-chart::after {
  bottom: -260px;
  left: -210px;
  width: 500px;
  height: 500px;
  border-color: rgba(105, 176, 155, .075);
}

body.classic-shell #viewSingle .bazi-result-stage {
  position: relative;
  scroll-margin-top: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: -5px 0 25px;
  padding: 11px 14px !important;
  border: 1px solid rgba(176, 197, 191, .13);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(71, 126, 109, .1), transparent 45%),
    rgba(3, 10, 15, .52);
  color: var(--bazi-muted);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}
body.classic-shell #viewSingle .bazi-result-stage::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222, 194, 111, .32), transparent);
}
body.classic-shell #viewSingle .bazi-result-stage__signal {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #b9d3c7;
  font: 700 11px/1.3 var(--read-sans);
  letter-spacing: .08em;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-result-stage__signal i {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: #75b99c;
  box-shadow: 0 0 0 4px rgba(117, 185, 156, .1), 0 0 12px rgba(117, 185, 156, .35);
}
body.classic-shell #viewSingle .bazi-result-stage strong {
  overflow: hidden;
  color: #d8ded8;
  font: 650 12px/1.45 var(--read-sans);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-result-stage small {
  color: #75878b;
  font: 620 10px/1.4 var(--read-sans) !important;
  letter-spacing: .06em;
  white-space: nowrap;
}

body.classic-shell #viewSingle .bazi-core-chart__head {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 21px;
  margin: 0 4px 25px;
  padding: 0 0 24px !important;
}
body.classic-shell #viewSingle .bazi-core-chart__seal {
  width: 66px;
  height: 76px;
  border-color: rgba(235, 204, 117, .48);
  border-radius: 22px 22px 22px 8px;
  background:
    radial-gradient(circle at 42% 32%, rgba(242, 214, 136, .16), transparent 40%),
    linear-gradient(145deg, rgba(199, 164, 65, .14), rgba(38, 35, 24, .04)),
    rgba(4, 12, 17, .7);
  color: var(--bazi-gold-bright);
  text-shadow: none;
  box-shadow: inset 0 0 28px rgba(209, 168, 59, .055), 0 15px 30px rgba(0, 0, 0, .22);
}
body.classic-shell #viewSingle .bazi-core-chart__copy > span {
  margin-bottom: 8px;
  color: var(--bazi-gold);
  letter-spacing: .2em;
}
body.classic-shell #viewSingle .bazi-core-chart__copy h2 {
  max-width: 790px;
  color: var(--bazi-ivory);
  font-size: clamp(26px, 3.3vw, 39px);
  font-weight: 740;
  letter-spacing: .01em;
}
body.classic-shell #viewSingle .bazi-core-chart__copy p {
  max-width: 760px;
  color: #9eabad;
  font-size: 13.5px !important;
}
body.classic-shell #viewSingle .bazi-core-chart__focus {
  min-width: 92px;
  padding: 13px 17px;
  border-color: rgba(225, 193, 105, .26);
  border-radius: 14px 14px 14px 5px;
  background:
    linear-gradient(145deg, rgba(211, 173, 65, .1), transparent),
    rgba(5, 13, 18, .68);
}

body.classic-shell #viewSingle .bazi-core-chart__frame {
  padding: 13px;
  border-color: rgba(225, 197, 116, .24);
  border-radius: 23px;
  background:
    linear-gradient(180deg, rgba(9, 18, 24, .93), rgba(3, 10, 15, .96)),
    radial-gradient(circle at 50% 40%, rgba(209, 164, 46, .055), transparent 55%);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .26),
    inset 0 0 0 1px rgba(255, 255, 255, .018);
}
body.classic-shell #viewSingle .bazi-core-chart__frame::before {
  left: 9%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(236, 205, 117, .88), transparent);
}
body.classic-shell #viewSingle .bazi-core-chart__guide span {
  padding-block: 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .014);
}
body.classic-shell #viewSingle .bazi-core-chart .four-pillars,
body.classic-shell #viewSingle .bazi-core-chart .pro-chart {
  border-color: rgba(217, 190, 111, .16) !important;
  border-radius: 17px !important;
  background: rgba(2, 8, 12, .83) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .018), 0 22px 48px rgba(0, 0, 0, .2) !important;
}
body.classic-shell #viewSingle .bazi-core-chart .pc-big {
  letter-spacing: -.03em;
  text-shadow:
    0 0 10px color-mix(in srgb, currentColor 34%, transparent),
    0 2px 12px rgba(0, 0, 0, .72) !important;
  filter: saturate(.82) brightness(.98);
}
@supports not (color: color-mix(in srgb, white, black)) {
  body.classic-shell #viewSingle .bazi-core-chart .pc-big {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .72) !important;
  }
}
body.classic-shell #viewSingle .bazi-core-chart .pc-row-stem .pc-cell,
body.classic-shell #viewSingle .bazi-core-chart .pc-row-branch .pc-cell {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .009), transparent);
}
body.classic-shell #viewSingle .bazi-core-chart .pc-pillar-cell.is-daymaster {
  background:
    linear-gradient(180deg, rgba(222, 189, 96, .075), rgba(222, 189, 96, .018)) !important;
}

body.classic-shell #viewSingle .bazi-reading-map {
  position: relative;
  margin-top: 24px;
  padding: clamp(20px, 2.5vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(211, 185, 108, .18);
  border-radius: 23px;
  background:
    linear-gradient(105deg, rgba(15, 31, 38, .87), rgba(6, 14, 20, .94)),
    radial-gradient(circle at 15% 15%, rgba(97, 162, 139, .08), transparent 31%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
body.classic-shell #viewSingle .bazi-reading-map::before {
  content: "读";
  position: absolute;
  top: -27px;
  right: 18px;
  color: rgba(224, 197, 118, .035);
  font: 760 150px/1 var(--read-serif);
  pointer-events: none;
}
body.classic-shell #viewSingle .bazi-reading-map__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
  gap: 5px 30px;
  align-items: end;
  padding-bottom: 20px;
}
body.classic-shell #viewSingle .bazi-reading-map__head > span {
  grid-column: 1;
  color: var(--bazi-gold);
  font: 760 10px/1.3 var(--read-sans);
  letter-spacing: .18em;
}
body.classic-shell #viewSingle .bazi-reading-map__head strong {
  grid-column: 1;
  color: #f0ece2;
  font: 735 clamp(19px, 2.3vw, 28px)/1.35 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-reading-map__head p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(219, 190, 109, .18);
  color: #8fa0a3;
  font: 520 12px/1.75 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-reading-map__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.classic-shell #viewSingle .bazi-reading-map__steps::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 16.7%;
  left: 16.7%;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 184, 98, .08), rgba(214, 184, 98, .4), rgba(214, 184, 98, .08));
}
body.classic-shell #viewSingle .bazi-reading-map__steps li { min-width: 0; }
body.classic-shell #viewSingle .bazi-reading-map__steps a {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 112px;
  padding: 17px;
  border: 1px solid rgba(156, 176, 175, .13);
  border-radius: 17px;
  background: rgba(3, 10, 15, .58);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.classic-shell #viewSingle .bazi-reading-map__steps a:hover,
body.classic-shell #viewSingle .bazi-reading-map__steps a:focus-visible {
  border-color: rgba(224, 193, 105, .4);
  background: rgba(16, 29, 34, .88);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
  outline: none;
}
body.classic-shell #viewSingle .bazi-reading-map__steps li.is-current a {
  border-color: rgba(226, 195, 107, .4);
  background:
    linear-gradient(125deg, rgba(208, 170, 62, .13), transparent 63%),
    rgba(5, 14, 19, .82);
  box-shadow: inset 3px 0 rgba(227, 195, 105, .7);
}
body.classic-shell #viewSingle .bazi-reading-map__number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(218, 188, 101, .35);
  border-radius: 50%;
  background: #0a161d;
  color: var(--bazi-gold-bright);
  font: 740 13px/1 var(--read-sans);
  letter-spacing: .08em;
  box-shadow: 0 0 0 6px rgba(5, 14, 19, .88);
}
body.classic-shell #viewSingle .bazi-reading-map__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
body.classic-shell #viewSingle .bazi-reading-map__copy small {
  color: #7e9395;
  font: 700 8px/1.3 var(--read-sans) !important;
  letter-spacing: .12em;
}
body.classic-shell #viewSingle .bazi-reading-map__copy b {
  color: #ece8df;
  font: 720 15px/1.4 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-reading-map__copy em {
  overflow: hidden;
  color: #7f9093;
  font: 520 10.5px/1.45 var(--read-sans);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle .bazi-reading-map__steps a > i {
  grid-column: 1 / -1;
  justify-self: end;
  color: #718488;
  font: 650 9px/1 var(--read-sans);
  font-style: normal;
  letter-spacing: .06em;
}
body.classic-shell #viewSingle .bazi-reading-map__steps li.is-current a > i {
  color: var(--bazi-gold);
}

body.classic-shell #viewSingle .bazi-report-index {
  display: grid;
  grid-template-columns: minmax(185px, .28fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 14px;
  padding: 20px;
  border: 1px solid rgba(154, 177, 176, .13);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(211, 174, 68, .06), transparent 36%),
    rgba(3, 10, 15, .58);
}
body.classic-shell #viewSingle .bazi-report-index__head {
  display: grid;
  align-content: center;
  gap: 5px;
  padding-right: 18px;
  border-right: 1px solid rgba(218, 188, 104, .15);
}
body.classic-shell #viewSingle .bazi-report-index__head span {
  color: var(--bazi-gold);
  font: 760 9px/1.4 var(--read-sans);
  letter-spacing: .16em;
}
body.classic-shell #viewSingle .bazi-report-index__head strong {
  color: #e9e5dc;
  font: 720 16px/1.45 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-report-index__head small {
  color: #718487;
  font: 520 10px/1.55 var(--read-sans) !important;
}
body.classic-shell #viewSingle .bazi-report-index .result-toc {
  position: static !important;
  z-index: auto;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.classic-shell #viewSingle .bazi-report-index .result-toc:empty::before {
  content: "完成排盘后自动生成章节索引";
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: #687b7f;
  font: 560 11px/1.5 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-report-index .result-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 43px;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(147, 168, 168, .11) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .018) !important;
  color: #aab6b5 !important;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
body.classic-shell #viewSingle .bazi-report-index .result-toc a:hover,
body.classic-shell #viewSingle .bazi-report-index .result-toc a:focus-visible {
  border-color: rgba(223, 191, 102, .38) !important;
  background: rgba(208, 168, 58, .08) !important;
  color: #eee8d9 !important;
  outline: none;
}
body.classic-shell #viewSingle .result-toc__index {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: rgba(211, 174, 65, .08);
  color: var(--bazi-gold);
  font: 740 8px/1 var(--read-sans);
  letter-spacing: .06em;
}
body.classic-shell #viewSingle .bazi-report-index .result-toc b {
  overflow: hidden;
  font: 620 10px/1.3 var(--read-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.classic-shell #viewSingle #layerChart,
body.classic-shell #viewSingle #layerDeep {
  scroll-margin-top: 116px;
}

body[data-theme="light"].classic-shell #viewSingle .bazi-result-stage,
body[data-theme="paper"].classic-shell #viewSingle .bazi-result-stage,
body[data-theme="light"].classic-shell #viewSingle .bazi-reading-map,
body[data-theme="paper"].classic-shell #viewSingle .bazi-reading-map,
body[data-theme="light"].classic-shell #viewSingle .bazi-report-index,
body[data-theme="paper"].classic-shell #viewSingle .bazi-report-index {
  border-color: rgba(102, 75, 34, .16);
  background: rgba(255, 251, 239, .76);
}
body[data-theme="light"].classic-shell #viewSingle .bazi-reading-map__head strong,
body[data-theme="paper"].classic-shell #viewSingle .bazi-reading-map__head strong,
body[data-theme="light"].classic-shell #viewSingle .bazi-report-index__head strong,
body[data-theme="paper"].classic-shell #viewSingle .bazi-report-index__head strong { color: #342817; }
body[data-theme="light"].classic-shell #viewSingle .bazi-reading-map__steps a,
body[data-theme="paper"].classic-shell #viewSingle .bazi-reading-map__steps a,
body[data-theme="light"].classic-shell #viewSingle .bazi-report-index .result-toc a,
body[data-theme="paper"].classic-shell #viewSingle .bazi-report-index .result-toc a {
  border-color: rgba(95, 72, 37, .13) !important;
  background: rgba(255, 255, 255, .56) !important;
}
body[data-theme="light"].classic-shell #viewSingle .bazi-reading-map__copy b,
body[data-theme="paper"].classic-shell #viewSingle .bazi-reading-map__copy b { color: #3a2c1a; }
body[data-theme="light"].classic-shell #viewSingle .bazi-reading-map__number,
body[data-theme="paper"].classic-shell #viewSingle .bazi-reading-map__number {
  background: #f8f1df;
  box-shadow: 0 0 0 6px rgba(249, 243, 226, .9);
}

@media (max-width: 900px) {
  body.classic-shell #viewSingle .bazi-result-stage {
    grid-template-columns: auto 1fr;
  }
  body.classic-shell #viewSingle .bazi-result-stage small { display: none; }
  body.classic-shell #viewSingle .bazi-reading-map__head {
    grid-template-columns: 1fr;
  }
  body.classic-shell #viewSingle .bazi-reading-map__head p {
    grid-column: 1;
    grid-row: auto;
    margin-top: 5px;
    padding: 0;
    border: 0;
  }
  body.classic-shell #viewSingle .bazi-reading-map__steps {
    grid-template-columns: 1fr;
  }
  body.classic-shell #viewSingle .bazi-reading-map__steps::before {
    top: 24px;
    bottom: 24px;
    left: 24px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(214, 184, 98, .08), rgba(214, 184, 98, .4), rgba(214, 184, 98, .08));
  }
  body.classic-shell #viewSingle .bazi-reading-map__steps a {
    min-height: 94px;
  }
  body.classic-shell #viewSingle .bazi-report-index {
    grid-template-columns: 1fr;
  }
  body.classic-shell #viewSingle .bazi-report-index__head {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(218, 188, 104, .15);
  }
  body.classic-shell #viewSingle .bazi-report-index .result-toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.classic-shell #viewSingle .bazi-core-chart {
    margin-inline: -3px;
    padding: 12px 10px 14px;
    border-radius: 22px;
  }
  body.classic-shell #viewSingle .bazi-result-stage {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0 1px 18px;
    padding: 10px 11px !important;
  }
  body.classic-shell #viewSingle .bazi-result-stage strong {
    text-align: left;
    white-space: normal;
  }
  body.classic-shell #viewSingle .bazi-core-chart__head {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    margin: 0 4px 17px;
    padding-bottom: 16px !important;
  }
  body.classic-shell #viewSingle .bazi-core-chart__seal {
    width: 48px;
    height: 56px;
    border-radius: 16px 16px 16px 6px;
    font-size: 21px;
  }
  body.classic-shell #viewSingle .bazi-core-chart__copy h2 { font-size: 22px; }
  body.classic-shell #viewSingle .bazi-core-chart__copy p {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }
  body.classic-shell #viewSingle .bazi-core-chart__frame {
    padding: 6px;
    border-radius: 16px;
  }
  body.classic-shell #viewSingle .bazi-reading-map {
    margin-top: 14px;
    padding: 17px 12px 13px;
    border-radius: 17px;
  }
  body.classic-shell #viewSingle .bazi-reading-map__head {
    padding: 0 4px 15px;
  }
  body.classic-shell #viewSingle .bazi-reading-map__head strong { font-size: 18px; }
  body.classic-shell #viewSingle .bazi-reading-map__head p { font-size: 11px; }
  body.classic-shell #viewSingle .bazi-reading-map__steps { gap: 7px; }
  body.classic-shell #viewSingle .bazi-reading-map__steps a {
    grid-template-columns: 39px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 76px;
    padding: 11px;
    border-radius: 13px;
  }
  body.classic-shell #viewSingle .bazi-reading-map__steps::before { left: 30px; }
  body.classic-shell #viewSingle .bazi-reading-map__number {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 4px rgba(5, 14, 19, .88);
  }
  body.classic-shell #viewSingle .bazi-reading-map__copy b { font-size: 13px; }
  body.classic-shell #viewSingle .bazi-reading-map__copy em { font-size: 9px; }
  body.classic-shell #viewSingle .bazi-reading-map__steps a > i {
    grid-column: auto;
    font-size: 8px;
  }
  body.classic-shell #viewSingle .bazi-report-index {
    gap: 13px;
    margin-top: 9px;
    padding: 14px 12px;
    border-radius: 15px;
  }
  body.classic-shell #viewSingle .bazi-report-index .result-toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body.classic-shell #viewSingle .bazi-report-index .result-toc a {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 39px;
    padding: 6px !important;
  }
  body.classic-shell #viewSingle .result-toc__index {
    width: 23px;
    height: 23px;
  }
  body.classic-shell #viewSingle .bazi-report-index .result-toc b { font-size: 9px; }
}

@media (max-width: 420px) {
  body.classic-shell #viewSingle .bazi-reading-map__steps a {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  body.classic-shell #viewSingle .bazi-reading-map__steps a > i {
    display: none;
  }
  body.classic-shell #viewSingle .bazi-report-index .result-toc {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.classic-shell #viewSingle .bazi-reading-map__steps a {
    transition: none;
  }
  body.classic-shell #viewSingle .bazi-result-stage__signal i {
    animation: none;
  }
}

/* ==========================================================================
   2026.07.31-3 · 正式测算专业分析工作台
   正式页不再出现二次免费预览；详细分析使用清晰入口、白话术语与可展开目录。
   ========================================================================== */
body.classic-shell .report-conversion-bridge {
  display: none !important;
}

body.classic-shell #viewSingle .bazi-analysis-hub {
  position: relative;
  margin: 26px 0 18px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(224, 193, 103, .27);
  border-radius: 25px;
  background:
    radial-gradient(circle at 88% 10%, rgba(223, 185, 76, .12), transparent 26%),
    radial-gradient(circle at 8% 90%, rgba(70, 143, 128, .09), transparent 27%),
    linear-gradient(135deg, rgba(12, 28, 35, .98), rgba(4, 12, 18, .99));
  box-shadow: 0 24px 62px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035);
}
body.classic-shell #viewSingle .bazi-analysis-hub::after {
  position: absolute;
  top: -46px;
  right: -26px;
  width: 178px;
  height: 178px;
  border: 1px solid rgba(229, 196, 104, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(229, 196, 104, .025), 0 0 0 58px rgba(229, 196, 104, .018);
  content: "";
  pointer-events: none;
}
body.classic-shell #viewSingle .bazi-analysis-hub__head {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
body.classic-shell #viewSingle .bazi-analysis-hub__eyebrow {
  color: #d9b95e;
  font: 760 10px/1.4 var(--read-sans);
  letter-spacing: .17em;
}
body.classic-shell #viewSingle .bazi-analysis-hub__head h3 {
  margin: 8px 0 7px;
  color: #f2eee4;
  font: 750 clamp(23px, 3vw, 34px)/1.25 var(--read-sans);
  letter-spacing: -.02em;
}
body.classic-shell #viewSingle .bazi-analysis-hub__head p {
  max-width: 680px;
  margin: 0;
  color: #9babad;
  font: 520 13px/1.8 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 22px;
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes button {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(154, 178, 177, .17);
  border-radius: 18px;
  background: rgba(1, 8, 12, .58);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes button.is-recommended {
  border-color: rgba(224, 193, 103, .42);
  background:
    linear-gradient(125deg, rgba(213, 174, 59, .14), transparent 68%),
    rgba(3, 12, 17, .82);
  box-shadow: inset 3px 0 rgba(229, 195, 97, .72);
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes button:hover,
body.classic-shell #viewSingle .bazi-analysis-hub__routes button:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(230, 199, 111, .54);
  background-color: rgba(14, 29, 34, .94);
  box-shadow: 0 17px 38px rgba(0, 0, 0, .24);
  outline: none;
}
body.classic-shell #viewSingle .bazi-analysis-hub__number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(222, 190, 101, .38);
  border-radius: 16px 16px 16px 5px;
  background: rgba(219, 180, 65, .07);
  color: #e5c771;
  font: 760 12px/1 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes button > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes small {
  color: #c4a654;
  font: 740 9px/1.3 var(--read-sans);
  letter-spacing: .1em;
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes strong {
  color: #eef0e9;
  font: 720 16px/1.45 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes em {
  color: #819396;
  font: 510 11px/1.6 var(--read-sans);
  font-style: normal;
}
body.classic-shell #viewSingle .bazi-analysis-hub__routes button > i {
  grid-column: 1 / -1;
  justify-self: end;
  color: #d6b75e;
  font: 680 10px/1 var(--read-sans);
  font-style: normal;
}
body.classic-shell #viewSingle .bazi-analysis-hub__legend {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(141, 168, 167, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
body.classic-shell #viewSingle .bazi-analysis-hub__legend span {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  background: rgba(1, 8, 12, .4);
}
body.classic-shell #viewSingle .bazi-analysis-hub__legend b {
  color: #dcc170;
  font: 700 11px/1.3 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-analysis-hub__legend em {
  color: #829397;
  font: 500 9px/1.55 var(--read-sans);
  font-style: normal;
}

body.classic-shell #viewSingle .bazi-professional-layer {
  margin-top: 18px !important;
  border: 1px solid rgba(177, 195, 188, .16) !important;
  border-radius: 20px !important;
  background: rgba(5, 14, 20, .72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-head {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 15px;
  min-height: 88px;
  padding: 17px 20px !important;
  border-bottom: 1px solid rgba(217, 188, 100, .1);
  background:
    radial-gradient(circle at 88% 0, rgba(216, 177, 67, .07), transparent 25%),
    linear-gradient(100deg, rgba(9, 24, 31, .99), rgba(5, 13, 19, .99)) !important;
}
body.classic-shell #viewSingle .bazi-professional-layer.collapsed .layer-head {
  border-bottom-color: transparent;
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  align-self: center;
  border: 1px solid rgba(225, 193, 100, .36);
  border-radius: 15px 15px 15px 5px;
  background: rgba(216, 177, 67, .07);
  color: #e2c36c;
  font: 750 11px/1 var(--read-sans);
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-title {
  align-self: end;
  color: #f0ede5 !important;
  font: 730 clamp(16px, 2vw, 21px)/1.35 var(--read-sans) !important;
  letter-spacing: 0 !important;
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-sub {
  color: #829598 !important;
  font: 520 11px/1.55 var(--read-sans) !important;
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #d8b95f;
}
body.classic-shell #viewSingle .bazi-professional-layer .layer-body {
  padding-inline: clamp(14px, 2.4vw, 24px) !important;
}
body.classic-shell #viewSingle .professional-language-guide {
  margin: 2px 0 20px;
  padding: 20px;
  border: 1px solid rgba(216, 184, 91, .2);
  border-radius: 17px;
  background:
    linear-gradient(110deg, rgba(210, 171, 57, .08), transparent 48%),
    rgba(4, 12, 17, .72);
}
body.classic-shell #viewSingle .professional-language-guide > strong {
  color: #eddfb3;
  font: 720 15px/1.4 var(--read-sans);
}
body.classic-shell #viewSingle .professional-language-guide > p {
  margin: 7px 0 14px;
  color: #98a8a9;
  font: 520 12px/1.8 var(--read-sans);
}
body.classic-shell #viewSingle .professional-language-guide > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
body.classic-shell #viewSingle .professional-language-guide span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(151, 175, 173, .12);
  border-radius: 12px;
  background: rgba(0, 7, 11, .42);
}
body.classic-shell #viewSingle .professional-language-guide b {
  color: #d9bd6b;
  font: 700 11px/1.35 var(--read-sans);
}
body.classic-shell #viewSingle .professional-language-guide em {
  color: #849699;
  font: 500 10px/1.65 var(--read-sans);
  font-style: normal;
}

body.classic-shell #viewSingle #result .zh-head {
  font: 720 16px/1.55 var(--read-sans) !important;
  letter-spacing: 0 !important;
}
body.classic-shell #viewSingle #result .zh-item,
body.classic-shell #viewSingle #result .verdict-desc,
body.classic-shell #viewSingle .bazi-professional-layer .rel-intro,
body.classic-shell #viewSingle .bazi-professional-layer .st-v,
body.classic-shell #viewSingle .bazi-professional-layer .th-desc,
body.classic-shell #viewSingle .bazi-professional-layer .ge-desc {
  font-size: 13px !important;
  line-height: 1.85 !important;
}
body.classic-shell #viewSingle #result .zh-foot {
  color: #7e9093 !important;
  font-size: 10px !important;
  line-height: 1.7 !important;
}

body[data-theme="light"].classic-shell #viewSingle .bazi-analysis-hub,
body[data-theme="paper"].classic-shell #viewSingle .bazi-analysis-hub,
body[data-theme="light"].classic-shell #viewSingle .bazi-professional-layer,
body[data-theme="paper"].classic-shell #viewSingle .bazi-professional-layer {
  border-color: rgba(116, 84, 34, .2) !important;
  background: rgba(255, 251, 240, .88);
}
body[data-theme="light"].classic-shell #viewSingle .bazi-analysis-hub__head h3,
body[data-theme="paper"].classic-shell #viewSingle .bazi-analysis-hub__head h3,
body[data-theme="light"].classic-shell #viewSingle .bazi-analysis-hub__routes strong,
body[data-theme="paper"].classic-shell #viewSingle .bazi-analysis-hub__routes strong {
  color: #332817;
}

@media (max-width: 820px) {
  body.classic-shell #viewSingle .bazi-analysis-hub__routes,
  body.classic-shell #viewSingle .professional-language-guide > div {
    grid-template-columns: 1fr;
  }
  body.classic-shell #viewSingle .bazi-analysis-hub__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.classic-shell #viewSingle .bazi-analysis-hub {
    padding: 19px 13px;
    border-radius: 19px;
  }
  body.classic-shell #viewSingle .bazi-analysis-hub__head h3 { font-size: 22px; }
  body.classic-shell #viewSingle .bazi-analysis-hub__head p { font-size: 12px; }
  body.classic-shell #viewSingle .bazi-analysis-hub__routes button {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 116px;
    padding: 14px 12px;
  }
  body.classic-shell #viewSingle .bazi-analysis-hub__number {
    width: 40px;
    height: 40px;
    border-radius: 13px 13px 13px 4px;
  }
  body.classic-shell #viewSingle .bazi-analysis-hub__routes strong { font-size: 14px; }
  body.classic-shell #viewSingle .bazi-analysis-hub__legend {
    grid-template-columns: 1fr;
  }
  body.classic-shell #viewSingle .bazi-professional-layer .layer-head {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 3px 11px;
    padding: 14px 12px !important;
  }
  body.classic-shell #viewSingle .bazi-professional-layer .layer-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px 13px 13px 4px;
  }
  body.classic-shell #viewSingle .bazi-professional-layer .layer-title { font-size: 15px !important; }
  body.classic-shell #viewSingle .bazi-professional-layer .layer-sub { font-size: 9.5px !important; }
  body.classic-shell #viewSingle .professional-language-guide { padding: 15px 12px; }
}

/* ==========================================================================
   辅助工具与图像去重系统 · 2026.07.30-2
   重点场景保留独立主视觉；表单、折叠标题与密集数据卡回归安静的材质层。
   ========================================================================== */
body.classic-shell #mainContent > [id^="view"] .input-panel {
  background-image:
    radial-gradient(circle at 88% 4%, rgba(220, 190, 104, .035), transparent 28%),
    linear-gradient(145deg, rgba(8, 17, 25, .97), rgba(8, 14, 22, .985)) !important;
}

body.classic-shell .layer-head {
  background-image:
    linear-gradient(90deg, rgba(6, 14, 21, .98), rgba(12, 20, 28, .94)) !important;
  background-size: auto !important;
  background-position: initial !important;
}

#result .summary-card,
#result .title-card,
#result .verdict-banner,
#result .zhaxin-hook,
#result .four-pillars,
#result .ten-gods-full,
#result .dayun-card,
#result .fortune-chart-section,
#result .accordion-section,
#result .bullet-cards,
#result .bullet-card,
#result .deep-table,
#result .analysis-card,
#result .strength-panel,
#result .liuqin-panel,
#result .next-actions {
  background-image:
    radial-gradient(circle at 94% 5%, rgba(218, 183, 84, .035), transparent 24%),
    linear-gradient(145deg, rgba(7, 13, 20, .975), rgba(10, 15, 22, .965)) !important;
  background-size: auto !important;
}

body.classic-shell #viewSingle .bazi-core-chart {
  background:
    linear-gradient(180deg, rgba(8, 18, 26, .88), rgba(6, 14, 20, .97) 44%, rgba(9, 21, 27, .99)),
    url("../images/immersive/bazi-core-matrix-v2.webp") center 46% / cover no-repeat;
}

.professional-center-lobby__hero {
  background:
    linear-gradient(90deg, rgba(5, 14, 22, .97) 0%, rgba(5, 14, 22, .9) 44%, rgba(5, 14, 22, .3) 74%, rgba(5, 14, 22, .72) 100%),
    url("../images/reports/trinity-observatory-v2.webp") center / cover no-repeat;
}

body.classic-shell #viewSingle .bazi-reference-tools {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  box-sizing: border-box;
  margin: 40px auto 16px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(218, 189, 105, .24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(214, 177, 76, .08), transparent 26%),
    linear-gradient(145deg, rgba(9, 21, 29, .96), rgba(6, 14, 21, .985));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .28),
    inset 0 1px rgba(255, 255, 255, .035);
}

body.classic-shell #viewSingle .bazi-reference-tools__head {
  position: relative;
  display: flex;
  min-height: 190px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 28px 32px 27px;
  overflow: hidden;
  border: 1px solid rgba(224, 195, 111, .18);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(5, 13, 20, .97) 0%, rgba(5, 13, 20, .83) 48%, rgba(5, 13, 20, .24) 100%),
    url("../images/features/bazi-reference-archive-v2.webp") center 54% / cover no-repeat;
  box-shadow: inset 0 -72px 90px rgba(2, 7, 11, .32);
}

body.classic-shell #viewSingle .bazi-reference-tools__head::after {
  position: absolute;
  inset: auto 32px 20px auto;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(225, 196, 111, .26);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(225, 196, 111, .035);
  content: "";
  pointer-events: none;
}

body.classic-shell #viewSingle .bazi-reference-tools__head > span,
body.classic-shell #viewSingle .bazi-reference-tools__head h2,
body.classic-shell #viewSingle .bazi-reference-tools__head p {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

body.classic-shell #viewSingle .bazi-reference-tools__head > span {
  margin-bottom: 8px;
  color: #e3c76f;
  font-size: 10px;
  letter-spacing: .2em;
}

body.classic-shell #viewSingle .bazi-reference-tools__head h2 {
  color: #f2eee4;
  font: 760 clamp(22px, 2.8vw, 30px)/1.35 var(--read-sans);
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

body.classic-shell #viewSingle .bazi-reference-tools__head p {
  margin-top: 8px;
  color: #b4c0bf;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body.classic-shell #viewSingle .bazi-reference-tools > .input-panel.layer-group {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 10px 0 0 !important;
  overflow: hidden;
  border-color: rgba(218, 188, 101, .16) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(100deg, rgba(5, 13, 20, .98), rgba(11, 21, 29, .965)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .02) !important;
}

body.classic-shell #viewSingle .bazi-reference-tools > .input-panel.layer-group:not(.collapsed) {
  border-color: rgba(226, 198, 115, .34) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .19), inset 3px 0 #bfa04e !important;
}

body.classic-shell #viewSingle .bazi-reference-tools .layer-head {
  min-height: 76px;
  box-sizing: border-box;
  padding: 13px 18px;
  background:
    linear-gradient(90deg, rgba(5, 13, 20, .99), rgba(12, 22, 30, .95)) !important;
}

body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(226, 198, 115, .34);
  border-radius: 14px 14px 14px 4px;
  background: linear-gradient(145deg, rgba(218, 184, 89, .16), rgba(15, 26, 32, .9));
  color: #edcf77;
  font: 650 15px/1 "STKaiti", "KaiTi", serif;
  font-style: normal;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

body.classic-shell #viewSingle .bazi-reference-tools .panel-title {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #e8e6de !important;
  font-family: var(--read-sans) !important;
  font-size: 16px !important;
  font-weight: 730 !important;
  line-height: 1.25 !important;
  letter-spacing: .015em !important;
}

body.classic-shell #viewSingle .bazi-reference-tools .panel-title::before,
body.classic-shell #viewSingle .bazi-reference-tools .panel-title::after {
  display: none !important;
  content: none !important;
}

body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy small {
  display: block;
  color: #7f9194;
  font: 520 11px/1.3 var(--read-sans);
  letter-spacing: .04em;
}

body.classic-shell #viewSingle .bazi-reference-tools .layer-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid rgba(223, 193, 108, .25);
  border-radius: 50%;
  background: rgba(213, 180, 88, .055);
  color: #d8b85e;
  transition: transform .24s ease, background .24s ease;
}

body.classic-shell #viewSingle .bazi-reference-tools > .layer-group:not(.collapsed) .layer-arrow {
  background: rgba(213, 180, 88, .14);
  transform: rotate(180deg);
}

body.classic-shell #viewSingle .bazi-reference-tools .layer-body {
  box-sizing: border-box;
  padding-inline: 20px;
}

@media (max-width: 680px) {
  body.classic-shell #viewSingle .bazi-reference-tools {
    width: calc(100% - 20px);
    margin-top: 26px;
    padding: 10px;
    border-radius: 21px;
  }

  body.classic-shell #viewSingle .bazi-reference-tools__head {
    min-height: 174px;
    padding: 22px 20px;
    border-radius: 15px;
    background-position: 60% center;
  }

  body.classic-shell #viewSingle .bazi-reference-tools__head::after { display: none; }
  body.classic-shell #viewSingle .bazi-reference-tools__head h2 { font-size: 21px; }
  body.classic-shell #viewSingle .bazi-reference-tools__head p {
    max-width: 86%;
    font-size: 11px !important;
  }

  body.classic-shell #viewSingle .bazi-reference-tools .layer-head {
    height: 76px;
    min-height: 76px;
    padding: 11px 12px;
  }

  body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy {
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 10px;
  }

  body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy > i {
    width: 36px;
    height: 36px;
    border-radius: 12px 12px 12px 4px;
    font-size: 13px;
  }

  body.classic-shell #viewSingle .bazi-reference-tools .panel-title {
    overflow: hidden;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.classic-shell #viewSingle .bazi-reference-tools .reference-tool-copy small {
    overflow: hidden;
    font-size: 8.5px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 2026.07.31-4 · 正式测算分章阅读 */
body.classic-shell #result.is-segmented {
  --reader-panel-height: min(720px, calc(100vh - 232px));
  position: relative;
}

body.classic-shell #result.is-segmented [hidden] { display: none !important; }

body.classic-shell #result.is-segmented .bazi-chapter-reader {
  position: sticky;
  top: 74px;
  z-index: 38;
  margin: 0 0 18px;
  padding: 18px 20px 13px;
  overflow: hidden;
  border: 1px solid rgba(219, 188, 101, .34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 0, rgba(213, 177, 76, .14), transparent 32%),
    linear-gradient(135deg, rgba(15, 29, 38, .97), rgba(5, 13, 20, .985));
  box-shadow: 0 22px 64px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px 20px;
  margin: 0 3px 14px;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > span {
  color: #d9b95d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong {
  color: #f0ede4;
  font-size: 16px;
  letter-spacing: .04em;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > small {
  color: #829398;
  font-size: 11px;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  padding: 10px 9px;
  border: 1px solid rgba(145, 166, 169, .14);
  border-radius: 14px;
  background: rgba(3, 10, 16, .58);
  color: #8d9b9e;
  text-align: left;
  cursor: pointer;
  transition: border-color .24s ease, background .24s ease, transform .24s ease, box-shadow .24s ease;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:hover,
body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:focus-visible {
  border-color: rgba(226, 195, 107, .48);
  transform: translateY(-2px);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active {
  border-color: rgba(234, 204, 119, .62);
  background: linear-gradient(135deg, rgba(205, 168, 66, .2), rgba(46, 85, 77, .16));
  box-shadow: inset 0 0 22px rgba(219, 182, 79, .07), 0 8px 24px rgba(0, 0, 0, .18);
  color: #f0e8d3;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button > span {
  grid-row: 1 / 3;
  width: 30px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(222, 191, 103, .28);
  border-radius: 11px 11px 11px 4px;
  background: rgba(4, 13, 19, .72);
  color: #d7bb67;
  font: 800 10px/1 "Times New Roman", serif;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button > b {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button > small {
  overflow: hidden;
  color: #697c81;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active > small { color: #b4a778; }

body.classic-shell #result.is-segmented .bazi-chapter-reader__progress {
  height: 2px;
  margin: 12px 3px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(139, 159, 161, .12);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__progress i {
  width: 16.666%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #9b7227, #edcf73, #68a58e);
  box-shadow: 0 0 14px rgba(222, 190, 100, .45);
  transition: width .36s cubic-bezier(.22, .8, .22, 1);
}

body.classic-shell #result.is-segmented .bazi-reader-panel,
body.classic-shell #result.is-segmented .bazi-deep-segment {
  min-height: 380px;
  animation: bazi-reader-panel-in .38s cubic-bezier(.22, .8, .22, 1) both;
}

body.classic-shell #result.is-segmented .bazi-reader-panel--overview,
body.classic-shell #result.is-segmented #layerChart,
body.classic-shell #result.is-segmented .bazi-deep-segment,
body.classic-shell #result.is-segmented .bazi-reader-panel--tools {
  max-height: none;
  padding-right: 0;
  overflow: visible;
  overscroll-behavior: auto;
}

body.classic-shell #result.is-segmented .bazi-reading-map,
body.classic-shell #result.is-segmented .bazi-report-index,
body.classic-shell #result.is-segmented .bazi-analysis-hub { display: none !important; }

body.classic-shell #result.is-segmented .bazi-reader-shell > .layer-head,
body.classic-shell #result.is-segmented #layerChart > .layer-head { display: none !important; }

body.classic-shell #result.is-segmented .bazi-reader-shell,
body.classic-shell #result.is-segmented #layerChart {
  margin-top: 0;
  border-radius: 24px;
}

body.classic-shell #result.is-segmented .bazi-reader-shell .layer-body,
body.classic-shell #result.is-segmented #layerChart .layer-body { display: block !important; }

body.classic-shell #result.is-segmented .bazi-reader-footer {
  position: sticky;
  bottom: 12px;
  z-index: 36;
  display: grid;
  grid-template-columns: 132px 1fr 132px;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 10px;
  border: 1px solid rgba(216, 185, 98, .28);
  border-radius: 20px;
  background: rgba(6, 16, 23, .94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px);
}

body.classic-shell #result.is-segmented .bazi-reader-footer > button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(220, 190, 104, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(207, 170, 68, .13), rgba(15, 35, 42, .78));
  color: #e7ce82;
  cursor: pointer;
}

body.classic-shell #result.is-segmented .bazi-reader-footer > button:disabled {
  opacity: .28;
  cursor: default;
}

body.classic-shell #result.is-segmented .bazi-reader-footer > div {
  min-width: 0;
  text-align: center;
}

body.classic-shell #result.is-segmented .bazi-reader-footer > div > small,
body.classic-shell #result.is-segmented .bazi-reader-footer > div > strong,
body.classic-shell #result.is-segmented .bazi-reader-footer > div > span { display: block; }

body.classic-shell #result.is-segmented .bazi-reader-footer > div > small {
  color: #6f8287;
  font-size: 9px;
  letter-spacing: .16em;
}

body.classic-shell #result.is-segmented .bazi-reader-footer > div > strong {
  margin-top: 4px;
  color: #f0eadc;
  font-size: 14px;
}

body.classic-shell #result.is-segmented .bazi-reader-footer > div > span {
  margin-top: 3px;
  overflow: hidden;
  color: #829397;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes bazi-reader-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(.994); }
  to { opacity: 1; transform: none; }
}

body[data-theme="light"].classic-shell #result.is-segmented .bazi-chapter-reader,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-chapter-reader,
body[data-theme="light"].classic-shell #result.is-segmented .bazi-reader-footer,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-reader-footer { background: rgba(248, 246, 239, .96); }

body[data-theme="light"].classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong,
body[data-theme="light"].classic-shell #result.is-segmented .bazi-reader-footer > div > strong,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-reader-footer > div > strong { color: #26363b; }

@media (max-width: 900px) {
  body.classic-shell #result.is-segmented { --reader-panel-height: none; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader {
    top: 62px;
    margin-right: -4px;
    margin-left: -4px;
    padding: 14px 12px 10px;
    border-radius: 18px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__intro {
    display: block;
    margin: 0 3px 10px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > small { display: none; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-bottom: 2px;
    overflow: visible;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button {
    min-width: 0;
    grid-template-columns: 25px 1fr;
    padding: 8px 7px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button > span {
    width: 25px;
    height: 32px;
  }
  body.classic-shell #result.is-segmented .bazi-reader-panel--overview,
  body.classic-shell #result.is-segmented #layerChart,
  body.classic-shell #result.is-segmented .bazi-deep-segment,
  body.classic-shell #result.is-segmented .bazi-reader-panel--tools {
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }
  body.classic-shell #result.is-segmented .bazi-reader-footer {
    bottom: 8px;
    grid-template-columns: 76px 1fr 76px;
    gap: 7px;
    padding: 7px;
    border-radius: 16px;
  }
  body.classic-shell #result.is-segmented .bazi-reader-footer > button { min-height: 42px; }
  body.classic-shell #result.is-segmented .bazi-reader-footer > button small,
  body.classic-shell #result.is-segmented .bazi-reader-footer > div > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.classic-shell #result.is-segmented .bazi-reader-panel,
  body.classic-shell #result.is-segmented .bazi-deep-segment { animation: none; }
}

@media print {
  body.classic-shell #result.is-segmented [data-reader-panel][hidden],
  body.classic-shell #result.is-segmented [data-reader-deep][hidden],
  body.classic-shell #result.is-segmented .bazi-reader-shell[hidden] { display: block !important; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader,
  body.classic-shell #result.is-segmented .bazi-reader-footer { display: none !important; }
  body.classic-shell #result.is-segmented .bazi-reader-panel,
  body.classic-shell #result.is-segmented .bazi-deep-segment {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* 2026.08.02-10 · 中宽画布、现代字体与六色章节系统 */
body.classic-shell.view-single {
  overflow-x: hidden !important;
  overflow-x: clip !important;
}

body.classic-shell.view-single > .container {
  width: min(1480px, 100%);
  max-width: 1480px !important;
  box-sizing: border-box;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: clamp(16px, 2vw, 30px) !important;
  padding-left: clamp(16px, 2vw, 30px) !important;
  overflow: visible !important;
}

body.classic-shell.view-single #mainContent,
body.classic-shell.view-single #viewSingle {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
  overflow: visible !important;
}

@media (min-width: 821px) {
  body.classic-shell #viewSingle > #result.is-segmented {
    position: static;
    left: auto;
    width: min(1420px, 100%) !important;
    max-width: 1420px !important;
    box-sizing: border-box;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: clamp(16px, 1.45vw, 24px) !important;
    transform: none;
    border-radius: 32px !important;
  }
}

body.classic-shell #result.is-segmented .bazi-reader-workspace {
  --reader-ui-font: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --reader-accent: #e1c36f;
  --reader-accent-rgb: 225, 195, 111;
  width: 100%;
  display: grid;
  grid-template-columns: clamp(292px, 22vw, 316px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin: 8px 0 26px;
  font-family: var(--reader-ui-font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="overview"] { --reader-accent: #e1c36f; --reader-accent-rgb: 225, 195, 111; }
body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="structure"] { --reader-accent: #62c6b8; --reader-accent-rgb: 98, 198, 184; }
body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="balance"] { --reader-accent: #e88773; --reader-accent-rgb: 232, 135, 115; }
body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="timeline"] { --reader-accent: #6fa8df; --reader-accent-rgb: 111, 168, 223; }
body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="details"] { --reader-accent: #b58ad8; --reader-accent-rgb: 181, 138, 216; }
body.classic-shell #result.is-segmented .bazi-reader-workspace[data-active-chapter="tools"] { --reader-accent: #80bc8e; --reader-accent-rgb: 128, 188, 142; }

body.classic-shell #result.is-segmented .bazi-reader-workspace__rail {
  position: sticky;
  top: var(--reader-sticky-offset, 88px);
  z-index: 35;
  min-width: 0;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader {
  position: relative;
  top: auto;
  margin: 0;
  overflow: hidden;
  padding: 25px 18px 20px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0, rgba(216, 181, 78, .17), transparent 29%),
    linear-gradient(155deg, rgba(16, 31, 40, .985), rgba(5, 13, 20, .995));
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro {
  display: block;
  margin: 0 3px 20px;
  padding: 0 2px 18px;
  border-bottom: 1px solid rgba(220, 189, 102, .16);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > span,
body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong,
body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > small { display: block; }

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > span {
  color: #daba62;
  font-size: 10px;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong {
  margin-top: 9px;
  color: #f4efe4;
  font-size: 22px;
  font-weight: 780;
  line-height: 1.4;
  letter-spacing: -.025em;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > small {
  margin-top: 9px;
  color: #8fa0a3;
  font-size: 12px;
  line-height: 1.7;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button {
  --card-accent: #e1c36f;
  --card-accent-rgb: 225, 195, 111;
  position: relative;
  min-height: 88px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 16px;
  grid-template-rows: 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 11px;
  border-radius: 19px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .018), transparent 55%),
    rgba(3, 11, 17, .64);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:nth-child(2) { --card-accent: #62c6b8; --card-accent-rgb: 98, 198, 184; }
body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:nth-child(3) { --card-accent: #e88773; --card-accent-rgb: 232, 135, 115; }
body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:nth-child(4) { --card-accent: #6fa8df; --card-accent-rgb: 111, 168, 223; }
body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:nth-child(5) { --card-accent: #b58ad8; --card-accent-rgb: 181, 138, 216; }
body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button:nth-child(6) { --card-accent: #80bc8e; --card-accent-rgb: 128, 188, 142; }

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  content: "";
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active {
  border-color: rgba(var(--card-accent-rgb), .58);
  background:
    linear-gradient(100deg, rgba(var(--card-accent-rgb), .18), rgba(var(--card-accent-rgb), .045) 68%),
    rgba(5, 14, 20, .9);
  transform: translateX(4px);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active::before {
  background: var(--card-accent);
  box-shadow: 0 0 14px rgba(var(--card-accent-rgb), .58);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__number {
  grid-row: auto;
  width: 44px !important;
  height: 54px !important;
  border-radius: 16px 16px 16px 6px !important;
  font-size: 11px !important;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__copy {
  grid-row: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  display: block;
  place-items: initial !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > small,
body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > b,
body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > em { display: block; }

body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > small {
  color: var(--card-accent);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > b {
  margin-top: 5px;
  overflow: visible;
  color: #e9e6de;
  font-size: 14.5px;
  font-weight: 720;
  line-height: 1.48;
  letter-spacing: -.01em;
  white-space: normal;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__copy > em {
  margin-top: 5px;
  overflow: hidden;
  color: #7f9295;
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button > i {
  color: #816f3b;
  font-size: 15px;
  font-style: normal;
  transition: transform .2s ease, color .2s ease;
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active > i {
  color: var(--card-accent);
  transform: translateX(2px);
}

body.classic-shell #result.is-segmented .bazi-chapter-reader__progress { margin-top: 18px; }

body.classic-shell #result.is-segmented .bazi-chapter-reader__hint {
  margin: 0 2px 14px;
}

body.classic-shell #result.is-segmented .bazi-reader-workspace__stage {
  min-width: 0;
  min-height: calc(100vh - 96px);
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--reader-accent-rgb), .3);
  border-radius: 32px;
  background:
    radial-gradient(circle at 96% 0, rgba(var(--reader-accent-rgb), .12), transparent 30%),
    linear-gradient(155deg, rgba(10, 23, 31, .98), rgba(4, 11, 17, .995));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
}

body.classic-shell #result.is-segmented .bazi-reader-stage__head {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: center !important;
  justify-content: stretch !important;
  flex-direction: initial !important;
  margin: 0 !important;
  padding: 22px 24px 20px !important;
  border: 1px solid rgba(var(--reader-accent-rgb), .28);
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 0, rgba(var(--reader-accent-rgb), .15), transparent 40%),
    linear-gradient(115deg, rgba(var(--reader-accent-rgb), .1), rgba(21, 54, 61, .08));
  text-align: left !important;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__chapter {
  width: 76px;
  height: 86px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(var(--reader-accent-rgb), .52);
  border-radius: 23px 23px 23px 7px;
  background: rgba(3, 12, 18, .72);
  text-align: center;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > span,
body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > small { display: block; }

body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > span {
  color: var(--reader-accent);
  font: 780 22px/1 var(--reader-ui-font);
}

body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > small {
  max-width: 62px;
  margin-top: 8px;
  color: #9ba6a4;
  font-size: 10px;
  line-height: 1.3;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__copy > span {
  color: var(--reader-accent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__copy h2 {
  margin: 7px 0 0;
  color: #f4f0e7;
  font-size: clamp(25px, 2.05vw, 32px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -.035em;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__copy p {
  margin: 8px 0 0;
  color: #97a7a8;
  font-size: 13px;
  line-height: 1.75;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__focus {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -3px;
}

body.classic-shell #result.is-segmented .bazi-reader-stage__focus span {
  padding: 6px 11px;
  border: 1px solid rgba(var(--reader-accent-rgb), .26);
  border-radius: 999px;
  background: rgba(3, 12, 18, .52);
  color: var(--reader-accent);
  font-size: 10px;
}

body.classic-shell #result.is-segmented .bazi-reader-panel--overview,
body.classic-shell #result.is-segmented #layerChart,
body.classic-shell #result.is-segmented .bazi-deep-segment,
body.classic-shell #result.is-segmented .bazi-reader-panel--tools {
  min-height: max(520px, calc(100vh - 330px));
  max-height: none;
  margin-top: 16px;
  padding: 17px;
  border: 1px solid rgba(139, 164, 164, .16);
  border-radius: 22px;
  background: rgba(2, 9, 14, .5);
}

body.classic-shell #result.is-segmented .bazi-reader-shell {
  margin-top: 16px;
  border: 0;
  background: transparent;
}

body.classic-shell #result.is-segmented .bazi-reader-shell .layer-body { padding: 0 !important; }

body.classic-shell #result.is-segmented #layerChart .layer-body {
  display: grid !important;
  max-height: none !important;
  gap: 18px;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
}

body.classic-shell #result.is-segmented #layerChart.is-active.collapsed .layer-body,
body.classic-shell #result.is-segmented #layerChart.is-active .layer-body {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

body.classic-shell #result.is-segmented #layerChart #bazigouzao,
body.classic-shell #result.is-segmented #layerChart #tenGods,
body.classic-shell #result.is-segmented #layerChart .wuxing-panel {
  border: 1px solid rgba(218, 187, 100, .15);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(8, 17, 24, .96), rgba(5, 12, 18, .98));
}

body.classic-shell #result.is-segmented .is-active .reveal,
body.classic-shell #result.is-segmented .is-active.reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.classic-shell #result.is-segmented .bazi-reader-footer {
  position: relative;
  bottom: auto;
  z-index: 2;
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(3, 12, 18, .78);
  box-shadow: none;
}

body[data-theme="light"].classic-shell #result.is-segmented .bazi-reader-workspace__stage,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-reader-workspace__stage,
body[data-theme="light"].classic-shell #result.is-segmented .bazi-chapter-reader,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-chapter-reader {
  border-color: rgba(96, 72, 35, .18);
  background: rgba(248, 246, 239, .97);
}

body[data-theme="light"].classic-shell #result.is-segmented .bazi-reader-stage__copy h2,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-reader-stage__copy h2,
body[data-theme="light"].classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong,
body[data-theme="paper"].classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong { color: #2c342f; }

@media (max-width: 1050px) {
  body.classic-shell #result.is-segmented .bazi-reader-workspace {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 14px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader { padding: 20px 14px 16px; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button {
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 12px 10px;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__number {
    width: 42px !important;
    height: 50px !important;
  }
}

@media (max-width: 820px) {
  body.classic-shell #viewSingle > #result.is-segmented {
    position: static;
    left: auto;
    width: 100% !important;
    max-width: 100% !important;
    transform: none;
  }
  body.classic-shell #result.is-segmented .bazi-reader-workspace {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.classic-shell #result.is-segmented .bazi-reader-workspace__rail { position: static; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader { padding: 18px 15px 14px; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__intro { margin-bottom: 13px; padding-bottom: 13px; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__intro > strong { font-size: 18px; }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button {
    min-width: 218px;
    min-height: 84px;
    scroll-snap-align: start;
  }
  body.classic-shell #result.is-segmented .bazi-chapter-reader__tabs button.is-active { transform: none; }
  body.classic-shell #result.is-segmented .bazi-reader-workspace__stage { min-height: 0; padding: 12px; border-radius: 23px; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 13px;
    padding: 17px 14px;
  }
  body.classic-shell #result.is-segmented .bazi-reader-stage__chapter { width: 58px; height: 68px; border-radius: 17px 17px 17px 6px; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > span { font-size: 17px; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__chapter > small { display: none; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__copy h2 { font-size: 20px; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__copy p { font-size: 11px; }
  body.classic-shell #result.is-segmented .bazi-reader-stage__focus { grid-column: 1 / -1; }
  body.classic-shell #result.is-segmented .bazi-reader-panel--overview,
  body.classic-shell #result.is-segmented #layerChart,
  body.classic-shell #result.is-segmented .bazi-deep-segment,
  body.classic-shell #result.is-segmented .bazi-reader-panel--tools {
    min-height: 360px;
    max-height: none;
    margin-top: 12px;
    padding: 10px;
    overflow: visible;
  }
}

@media print {
  body.classic-shell #result.is-segmented .bazi-reader-workspace { display: block; }
  body.classic-shell #result.is-segmented .bazi-reader-workspace__rail,
  body.classic-shell #result.is-segmented .bazi-reader-stage__head { display: none !important; }
  body.classic-shell #result.is-segmented .bazi-reader-workspace__stage { padding: 0; border: 0; box-shadow: none; }
}

/* 2026.08.02-10 · 紫微 / 星座六章阅读工作台 */
body.classic-shell #viewZiwei,
body.classic-shell #viewZodiac {
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

body.classic-shell #ziweiResult.is-peer-segmented,
body.classic-shell #zodiacResult.is-peer-segmented {
  position: relative;
  left: 50%;
  width: min(1420px, calc(100vw - 40px));
  max-width: none;
  margin: 28px 0 0;
  padding: 0 !important;
  transform: translateX(-50%);
  border: 0 !important;
  border-radius: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.classic-shell .peer-reader-workspace {
  --peer-accent: #d8bc72;
  --peer-accent-rgb: 216, 188, 114;
  display: grid;
  grid-template-columns: clamp(286px, 22vw, 316px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  color: #dfe6e3;
}

body.classic-shell .peer-reader-workspace--ziwei { --peer-brand-rgb: 155, 120, 205; }
body.classic-shell .peer-reader-workspace--zodiac { --peer-brand-rgb: 83, 157, 210; }
body.classic-shell .peer-reader-workspace[data-active-chapter="palaces"],
body.classic-shell .peer-reader-workspace[data-active-chapter="structure"] { --peer-accent: #77c8bd; --peer-accent-rgb: 119, 200, 189; }
body.classic-shell .peer-reader-workspace--ziwei[data-active-chapter="structure"],
body.classic-shell .peer-reader-workspace--zodiac[data-active-chapter="relationships"] { --peer-accent: #dc8b9c; --peer-accent-rgb: 220, 139, 156; }
body.classic-shell .peer-reader-workspace[data-active-chapter="life"] { --peer-accent: #77aee2; --peer-accent-rgb: 119, 174, 226; }
body.classic-shell .peer-reader-workspace[data-active-chapter="timeline"] { --peer-accent: #b58bd8; --peer-accent-rgb: 181, 139, 216; }
body.classic-shell .peer-reader-workspace[data-active-chapter="tools"] { --peer-accent: #82c29a; --peer-accent-rgb: 130, 194, 154; }

body.classic-shell .peer-reader-workspace__rail {
  position: sticky;
  top: var(--reader-sticky-offset, 88px);
  z-index: 8;
  min-width: 0;
}

body.classic-shell .peer-reader-workspace__rail > p {
  margin: 0 3px 14px;
}

body.classic-shell .peer-reader-workspace__rail {
  overflow: hidden;
  padding: 25px 18px 20px;
  border: 1px solid rgba(var(--peer-brand-rgb), .24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0, rgba(var(--peer-brand-rgb), .2), transparent 30%),
    linear-gradient(155deg, rgba(16, 31, 40, .985), rgba(5, 13, 20, .995));
  box-shadow: 0 25px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
}

body.classic-shell .peer-reader-intro {
  margin: 0 3px 20px;
  padding: 0 2px 18px;
  border-bottom: 1px solid rgba(var(--peer-brand-rgb), .2);
}

body.classic-shell .peer-reader-intro > span,
body.classic-shell .peer-reader-intro > strong,
body.classic-shell .peer-reader-intro > small { display: block; }

body.classic-shell .peer-reader-intro > span {
  color: #d9bf75;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
}

body.classic-shell .peer-reader-intro > strong {
  margin-top: 9px;
  color: #f4efe4;
  font-size: 22px;
  font-weight: 780;
  line-height: 1.4;
  letter-spacing: -.025em;
}

body.classic-shell .peer-reader-intro > small {
  margin-top: 9px;
  color: #8fa0a3;
  font-size: 12px;
  line-height: 1.7;
}

body.classic-shell .peer-reader-tabs { display: grid; gap: 10px; }

body.classic-shell .peer-reader-tabs button {
  --card-accent: #e1c36f;
  --card-accent-rgb: 225, 195, 111;
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 11px;
  overflow: hidden;
  border: 1px solid rgba(145, 165, 168, .13);
  border-radius: 19px;
  background: linear-gradient(105deg, rgba(255, 255, 255, .018), transparent 55%), rgba(3, 11, 17, .64);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

body.classic-shell .peer-reader-tabs button:nth-child(2) { --card-accent: #70c7bb; --card-accent-rgb: 112, 199, 187; }
body.classic-shell .peer-reader-tabs button:nth-child(3) { --card-accent: #dc8b9c; --card-accent-rgb: 220, 139, 156; }
body.classic-shell .peer-reader-tabs button:nth-child(4) { --card-accent: #77aee2; --card-accent-rgb: 119, 174, 226; }
body.classic-shell .peer-reader-tabs button:nth-child(5) { --card-accent: #b58bd8; --card-accent-rgb: 181, 139, 216; }
body.classic-shell .peer-reader-tabs button:nth-child(6) { --card-accent: #82c29a; --card-accent-rgb: 130, 194, 154; }

body.classic-shell .peer-reader-tabs button::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  content: "";
}

body.classic-shell .peer-reader-tabs button.is-active {
  border-color: rgba(var(--card-accent-rgb), .58);
  background: linear-gradient(100deg, rgba(var(--card-accent-rgb), .18), rgba(var(--card-accent-rgb), .045) 68%), rgba(5, 14, 20, .9);
  transform: translateX(4px);
}

body.classic-shell .peer-reader-tabs button.is-active::before {
  background: var(--card-accent);
  box-shadow: 0 0 14px rgba(var(--card-accent-rgb), .58);
}

body.classic-shell .peer-reader-tabs button > i {
  width: 44px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--card-accent-rgb), .34);
  border-radius: 16px 16px 16px 6px;
  background: rgba(var(--card-accent-rgb), .07);
  color: var(--card-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
}

body.classic-shell .peer-reader-tabs button > span { min-width: 0; }
body.classic-shell .peer-reader-tabs button > span > small,
body.classic-shell .peer-reader-tabs button > span > b,
body.classic-shell .peer-reader-tabs button > span > em { display: block; }
body.classic-shell .peer-reader-tabs button > span > small { color: var(--card-accent); font-size: 10.5px; font-weight: 750; letter-spacing: .1em; }
body.classic-shell .peer-reader-tabs button > span > b { margin-top: 5px; color: #e9e6de; font-size: 14.5px; font-weight: 720; line-height: 1.48; }
body.classic-shell .peer-reader-tabs button > span > em { margin-top: 5px; overflow: hidden; color: #7f9295; font-size: 10.5px; font-style: normal; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.classic-shell .peer-reader-tabs button > u { color: #6f633c; font-size: 15px; text-decoration: none; transition: transform .2s ease, color .2s ease; }
body.classic-shell .peer-reader-tabs button.is-active > u { color: var(--card-accent); transform: translateX(2px); }

body.classic-shell .peer-reader-progress {
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(145, 164, 167, .12);
}
body.classic-shell .peer-reader-progress i { display: block; width: 16.66%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #daba62, var(--peer-accent)); box-shadow: 0 0 14px rgba(var(--peer-accent-rgb), .42); transition: width .3s ease; }

body.classic-shell .peer-reader-workspace__stage {
  min-width: 0;
  min-height: calc(100vh - 96px);
  padding: 20px;
  overflow: visible;
  border: 1px solid rgba(139, 164, 164, .18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 96% 0, rgba(var(--peer-accent-rgb), .045), transparent 27%),
    linear-gradient(155deg, rgba(8, 19, 26, .99), rgba(3, 10, 16, .998));
  box-shadow: 0 24px 68px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025);
}

body.classic-shell .peer-reader-stage__head {
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 15px;
  align-items: center !important;
  justify-content: stretch !important;
  flex-direction: initial !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  border: 1px solid rgba(139, 164, 164, .16);
  border-radius: 20px;
  background: linear-gradient(115deg, rgba(18, 39, 45, .48), rgba(5, 15, 21, .62));
  text-align: left !important;
}

body.classic-shell .peer-reader-stage__chapter {
  width: 62px;
  height: 68px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(var(--peer-accent-rgb), .38);
  border-radius: 18px 18px 18px 6px;
  background: rgba(3, 12, 18, .64);
  text-align: center;
}
body.classic-shell .peer-reader-stage__chapter > span,
body.classic-shell .peer-reader-stage__chapter > small { display: block; }
body.classic-shell .peer-reader-stage__chapter > span { color: var(--peer-accent); font-size: 19px; font-weight: 780; line-height: 1; }
body.classic-shell .peer-reader-stage__chapter > small { max-width: 54px; margin-top: 6px; color: #9ba6a4; font-size: 9px; line-height: 1.3; }
body.classic-shell .peer-reader-stage__copy > span { color: var(--peer-accent); font-size: 9px; font-weight: 760; letter-spacing: .11em; }
body.classic-shell .peer-reader-stage__copy h2 { margin: 5px 0 0; color: #f2f0e9; font-size: clamp(22px, 1.75vw, 28px); font-weight: 780; line-height: 1.32; letter-spacing: -.03em; }
body.classic-shell .peer-reader-stage__copy p { margin: 5px 0 0; color: #8da0a2; font-size: 11.5px; line-height: 1.65; }
body.classic-shell .peer-reader-stage__focus { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -3px; }
body.classic-shell .peer-reader-stage__focus span { padding: 5px 10px; border: 1px solid rgba(var(--peer-accent-rgb), .2); border-radius: 999px; background: rgba(3, 12, 18, .42); color: #b9b8aa; font-size: 9px; }

body.classic-shell .peer-reader-panel {
  min-height: max(520px, calc(100vh - 330px));
  max-height: none;
  margin-top: 16px;
  padding: 17px;
  overflow: visible;
  border: 1px solid rgba(139, 164, 164, .16);
  border-radius: 22px;
  background: rgba(2, 9, 14, .66);
}

body.classic-shell .peer-reader-core-chart {
  position: relative;
  margin: 0 0 18px !important;
  overflow: hidden;
  border: 1px solid rgba(216, 188, 114, .2);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(9, 23, 31, .94), rgba(2, 9, 15, .98));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
}
body.classic-shell .peer-reader-core-chart--ziwei { padding: 2px; }
body.classic-shell .peer-reader-core-chart--zodiac { padding: clamp(14px, 2vw, 24px); }
body.classic-shell .peer-reader-core-chart__label { display: grid; gap: 5px; margin: 0 0 15px; padding: 0 2px 13px; border-bottom: 1px solid rgba(139, 164, 164, .14); }
body.classic-shell .peer-reader-core-chart__label small { color: #c9b36d; font-size: 9px; font-weight: 760; letter-spacing: .13em; }
body.classic-shell .peer-reader-core-chart__label strong { color: #eff1ec; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4; }
body.classic-shell .peer-reader-core-chart__label span { color: #7f9497; font-size: 10px; }
body.classic-shell .peer-reader-core-chart--zodiac > .liuqin-panel { margin: 0; border: 0; background: transparent; box-shadow: none; }
body.classic-shell .peer-reader-core-chart--zodiac .natal-wheel { width: min(470px, 100%); }

body.classic-shell .peer-reader-support {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(139, 164, 164, .12);
  border-radius: 17px;
  background: rgba(3, 11, 17, .45);
}
body.classic-shell .peer-reader-support > summary {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 15px;
  color: #849699;
  cursor: pointer;
  list-style: none;
}
body.classic-shell .peer-reader-support > summary::-webkit-details-marker { display: none; }
body.classic-shell .peer-reader-support > summary span,
body.classic-shell .peer-reader-support > summary small,
body.classic-shell .peer-reader-support > summary b { display: block; }
body.classic-shell .peer-reader-support > summary small { color: #6f8184; font-size: 8px; font-weight: 720; letter-spacing: .12em; }
body.classic-shell .peer-reader-support > summary b { margin-top: 4px; color: #9ba9a8; font-size: 11px; font-weight: 650; }
body.classic-shell .peer-reader-support > summary i { color: #8f824f; font-size: 17px; font-style: normal; transition: transform .2s ease; }
body.classic-shell .peer-reader-support[open] > summary i { transform: rotate(45deg); }
body.classic-shell .peer-reader-support__body { padding: 0 10px 10px; }
body.classic-shell .peer-reader-support__body .reading-evidence-chain,
body.classic-shell .peer-reader-support__body .reading-question-starter,
body.classic-shell .peer-reader-support__body .reading-verification-passport,
body.classic-shell .peer-reader-support__body .reading-resonance-feedback { opacity: .84; }

/* 2026.08.05-2 · 单一滚动上下文：页面滚动，左侧只负责章节定位 */
body.classic-shell .reader-scroll-ownership {
  min-height: 48px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(var(--reader-accent-rgb, var(--peer-accent-rgb, 218, 190, 105)), .22);
  border-radius: 15px;
  background: linear-gradient(105deg, rgba(var(--reader-accent-rgb, var(--peer-accent-rgb, 218, 190, 105)), .09), rgba(3, 12, 18, .56));
  color: #8fa2a4;
  line-height: 1.45;
}

body.classic-shell .reader-scroll-ownership > i {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--reader-accent-rgb, var(--peer-accent-rgb, 218, 190, 105)), .32);
  border-radius: 10px;
  background: rgba(3, 12, 18, .72);
  color: var(--reader-accent, var(--peer-accent, #daba62));
  font-size: 13px;
  font-style: normal;
}

body.classic-shell .reader-scroll-ownership > span,
body.classic-shell .reader-scroll-ownership b,
body.classic-shell .reader-scroll-ownership small { display: block; }
body.classic-shell .reader-scroll-ownership > span { min-width: 0; }
body.classic-shell .reader-scroll-ownership b { color: #dfe5e1; font-size: 10.5px; font-weight: 750; }
body.classic-shell .reader-scroll-ownership small { margin-top: 2px; color: #75888b; font-size: 9px; }

body.classic-shell #result.is-segmented .bazi-reader-workspace__stage,
body.classic-shell .peer-reader-workspace__stage { scroll-margin-top: var(--reader-sticky-offset, 88px); }

/* 2026.08.05-2 · 开源项目精华转化为消费者可读的判断链 */
body.classic-shell .reading-evidence-chain {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr) 18px);
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(139,164,164,.15);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(5,16,23,.82),rgba(12,28,35,.72));
}
body.classic-shell .reading-evidence-chain > div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:center;min-width:0}
body.classic-shell .reading-evidence-chain > div:last-of-type{grid-column:auto}.reading-evidence-chain > em:last-of-type{display:none}
body.classic-shell .reading-evidence-chain i{width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(218,190,105,.3);border-radius:9px;color:#dbc36f;font:700 9px/1 Georgia,serif;font-style:normal}
body.classic-shell .reading-evidence-chain span{display:grid;gap:2px;min-width:0}
body.classic-shell .reading-evidence-chain b{color:#dfe5e1;font-size:11px;font-weight:720}
body.classic-shell .reading-evidence-chain small{overflow:hidden;color:#7f9295;font-size:9px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
body.classic-shell .reading-evidence-chain em{color:rgba(218,190,105,.42);font-size:11px;font-style:normal;text-align:center}
@media(max-width:900px){body.classic-shell .reading-evidence-chain{grid-template-columns:1fr 1fr;gap:8px}body.classic-shell .reading-evidence-chain em{display:none}body.classic-shell .reading-evidence-chain > div{padding:8px;border-radius:12px;background:rgba(255,255,255,.025)}}
@media(max-width:520px){body.classic-shell .reading-evidence-chain{grid-template-columns:1fr;padding:10px}body.classic-shell .reading-evidence-chain small{white-space:normal}}
body.classic-shell .reading-question-starter{display:grid;grid-template-columns:minmax(210px,1.25fr) repeat(4,minmax(120px,1fr));gap:8px;align-items:stretch;margin-top:10px;padding:10px;border:1px solid rgba(139,164,164,.14);border-radius:18px;background:rgba(3,12,18,.72)}
body.classic-shell .reading-question-starter>span{display:grid;align-content:center;gap:3px;padding:5px 9px}body.classic-shell .reading-question-starter>span small{color:#bca85f;font-size:8px;font-weight:750;letter-spacing:.12em}body.classic-shell .reading-question-starter>span b{color:#dfe5e1;font-size:12px}
body.classic-shell .reading-question-starter button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:9px 11px;border:1px solid rgba(218,190,105,.18);border-radius:13px;background:rgba(218,190,105,.04);color:#aebcba;font:650 10px/1.45 var(--reader-ui-font);cursor:pointer;transition:.2s ease}
body.classic-shell .reading-question-starter button:hover,body.classic-shell .reading-question-starter button:focus-visible{border-color:rgba(218,190,105,.5);background:rgba(218,190,105,.1);color:#f0dfaa;transform:translateY(-1px)}body.classic-shell .reading-question-starter button i{color:#d9bd68;font-style:normal}
body.classic-shell .reading-verification-passport{margin-top:10px;border:1px solid rgba(115,193,177,.16);border-radius:16px;background:rgba(7,24,29,.62)}body.classic-shell .reading-verification-passport summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;color:#b9cbc6;cursor:pointer;list-style:none}body.classic-shell .reading-verification-passport summary::-webkit-details-marker{display:none}body.classic-shell .reading-verification-passport summary span{font-size:11px;font-weight:700}body.classic-shell .reading-verification-passport summary small{color:#738b8b;font-size:9px}
body.classic-shell .reading-verification-passport>div{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:7px;padding:0 13px 13px}body.classic-shell .reading-verification-passport>div>*{padding:10px;border-radius:10px;background:rgba(255,255,255,.025);color:#849795;font-size:9px;line-height:1.5}body.classic-shell .reading-verification-passport>div>b{color:#d7c270;font-size:10px}
@media(max-width:1080px){body.classic-shell .reading-question-starter{grid-template-columns:1fr 1fr}body.classic-shell .reading-question-starter>span{grid-column:1/-1}body.classic-shell .reading-verification-passport>div{grid-template-columns:1fr 1fr}}
@media(max-width:520px){body.classic-shell .reading-question-starter{grid-template-columns:1fr}body.classic-shell .reading-question-starter>span{grid-column:auto}body.classic-shell .reading-verification-passport summary{align-items:flex-start;flex-direction:column}body.classic-shell .reading-verification-passport>div{grid-template-columns:1fr}}
body.classic-shell .reading-resonance-feedback{display:grid;grid-template-columns:minmax(250px,1fr) auto;gap:12px;align-items:center;margin-top:10px;padding:14px 16px;border:1px solid rgba(181,139,216,.17);border-radius:17px;background:linear-gradient(100deg,rgba(42,24,55,.24),rgba(5,17,23,.72))}
body.classic-shell .reading-resonance-feedback>span{display:grid;gap:3px}body.classic-shell .reading-resonance-feedback>span small{color:#b992d6;font-size:8px;font-weight:750;letter-spacing:.13em}body.classic-shell .reading-resonance-feedback>span b{color:#e5e7e1;font-size:12px}body.classic-shell .reading-resonance-feedback>span em{color:#748689;font-size:9px;font-style:normal}
body.classic-shell .reading-resonance-feedback>div{display:flex;gap:7px}body.classic-shell .reading-resonance-feedback button{min-height:36px;padding:7px 12px;border:1px solid rgba(185,146,214,.22);border-radius:999px;background:rgba(181,139,216,.04);color:#9faeac;font:650 9px/1 var(--reader-ui-font);cursor:pointer}body.classic-shell .reading-resonance-feedback button:hover,body.classic-shell .reading-resonance-feedback button:focus-visible,body.classic-shell .reading-resonance-feedback button.is-active{border-color:rgba(211,177,236,.6);background:rgba(181,139,216,.15);color:#eadcf4}
body.classic-shell .reading-resonance-feedback>p{grid-column:1/-1;margin:0;color:#83ad9d;font-size:9px}
@media(max-width:720px){body.classic-shell .reading-resonance-feedback{grid-template-columns:1fr}body.classic-shell .reading-resonance-feedback>div{display:grid;grid-template-columns:repeat(3,1fr)}body.classic-shell .reading-resonance-feedback button{padding:7px 5px}}
body.classic-shell .peer-reader-panel[hidden] { display: none !important; }
body.classic-shell .peer-reader-panel > :first-child { margin-top: 0 !important; }
body.classic-shell .peer-reader-panel > :last-child { margin-bottom: 0 !important; }
body.classic-shell .peer-reader-panel .strength-panel,
body.classic-shell .peer-reader-panel .liuqin-panel,
body.classic-shell .peer-reader-panel .complete-report { margin-right: 0; margin-left: 0; }
body.classic-shell .peer-reader-panel .strength-panel h4,
body.classic-shell .peer-reader-panel .liuqin-panel h4 { color: var(--peer-accent); }
body.classic-shell .peer-reader-panel.is-active .reveal,
body.classic-shell .peer-reader-panel.is-active.reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; }

body.classic-shell .peer-reader-empty {
  min-height: 430px;
  display: grid;
  place-content: center;
  padding: 36px;
  text-align: center;
}
body.classic-shell .peer-reader-empty span { color: var(--peer-accent); font-size: 10px; font-weight: 760; letter-spacing: .14em; }
body.classic-shell .peer-reader-empty strong { margin-top: 12px; color: #edf0e9; font-size: 24px; }
body.classic-shell .peer-reader-empty p { max-width: 420px; margin: 12px auto 0; color: #829397; font-size: 13px; line-height: 1.75; }

body.classic-shell .peer-reader-footer {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(var(--peer-accent-rgb), .2);
  border-radius: 18px;
  background: rgba(3, 12, 18, .78);
}
body.classic-shell .peer-reader-footer button { height: 54px; display: flex; gap: 10px; align-items: center; justify-content: center; border: 1px solid rgba(var(--peer-accent-rgb), .25); border-radius: 14px; background: rgba(var(--peer-accent-rgb), .07); color: var(--peer-accent); cursor: pointer; }
body.classic-shell .peer-reader-footer button:disabled { opacity: .28; cursor: default; }
body.classic-shell .peer-reader-footer button small { font-size: 11px; }
body.classic-shell .peer-reader-footer > div { min-width: 0; text-align: center; }
body.classic-shell .peer-reader-footer > div > small,
body.classic-shell .peer-reader-footer > div > strong,
body.classic-shell .peer-reader-footer > div > span { display: block; }
body.classic-shell .peer-reader-footer > div > small { color: #718489; font-size: 9px; letter-spacing: .1em; }
body.classic-shell .peer-reader-footer > div > strong { margin-top: 4px; color: #e8e4db; font-size: 12.5px; }
body.classic-shell .peer-reader-footer > div > span { margin-top: 3px; overflow: hidden; color: #72858a; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

body.classic-shell .peer-tool-hero {
  padding: 34px;
  border: 1px solid rgba(var(--peer-accent-rgb), .25);
  border-radius: 23px;
  background: radial-gradient(circle at 92% 0, rgba(var(--peer-accent-rgb), .16), transparent 36%), linear-gradient(135deg, rgba(20, 41, 49, .9), rgba(5, 14, 21, .96));
}
body.classic-shell .peer-tool-hero span { color: var(--peer-accent); font-size: 10px; font-weight: 760; letter-spacing: .12em; }
body.classic-shell .peer-tool-hero h3 { margin: 10px 0 0; color: #f1eee7; font-size: clamp(22px, 2vw, 30px); line-height: 1.38; }
body.classic-shell .peer-tool-hero p { max-width: 680px; margin: 10px 0 0; color: #93a4a5; font-size: 13px; line-height: 1.8; }
body.classic-shell .peer-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
body.classic-shell .peer-tool-grid button { min-height: 150px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 20px; border: 1px solid rgba(var(--peer-accent-rgb), .2); border-radius: 20px; background: linear-gradient(145deg, rgba(var(--peer-accent-rgb), .08), rgba(3, 11, 17, .82)); color: inherit; text-align: left; cursor: pointer; }
body.classic-shell .peer-tool-grid button:hover { border-color: rgba(var(--peer-accent-rgb), .5); transform: translateY(-2px); }
body.classic-shell .peer-tool-grid i { width: 42px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(var(--peer-accent-rgb), .35); border-radius: 14px 14px 14px 5px; color: var(--peer-accent); font-size: 11px; font-style: normal; }
body.classic-shell .peer-tool-grid b,
body.classic-shell .peer-tool-grid small { display: block; }
body.classic-shell .peer-tool-grid b { color: #e8e7e0; font-size: 14px; }
body.classic-shell .peer-tool-grid small { margin-top: 7px; color: #7d9094; font-size: 10.5px; line-height: 1.55; }
body.classic-shell .peer-tool-grid em { color: var(--peer-accent); font-style: normal; }
body.classic-shell .peer-tool-note { margin-top: 14px; padding: 22px 24px; border: 1px solid rgba(145, 165, 168, .14); border-radius: 18px; background: rgba(3, 11, 17, .68); }
body.classic-shell .peer-tool-note b { color: #cfd8d4; font-size: 12px; }
body.classic-shell .peer-tool-note p { margin: 8px 0 0; color: #7b8e92; font-size: 11px; line-height: 1.7; }

body[data-theme="light"].classic-shell .peer-reader-workspace__rail,
body[data-theme="paper"].classic-shell .peer-reader-workspace__rail,
body[data-theme="light"].classic-shell .peer-reader-workspace__stage,
body[data-theme="paper"].classic-shell .peer-reader-workspace__stage { border-color: rgba(96, 72, 35, .18); background: rgba(248, 246, 239, .98); }
body[data-theme="light"].classic-shell .peer-reader-intro > strong,
body[data-theme="paper"].classic-shell .peer-reader-intro > strong,
body[data-theme="light"].classic-shell .peer-reader-stage__copy h2,
body[data-theme="paper"].classic-shell .peer-reader-stage__copy h2 { color: #2c342f; }

@media (max-width: 1050px) {
  body.classic-shell .peer-reader-workspace { grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }
  body.classic-shell .peer-reader-workspace__rail { padding: 20px 14px 16px; }
  body.classic-shell .peer-reader-tabs button { grid-template-columns: 42px minmax(0, 1fr) 14px; gap: 10px; padding: 12px 10px; }
  body.classic-shell .peer-reader-tabs button > i { width: 42px; height: 50px; }
  body.classic-shell .peer-tool-grid { grid-template-columns: 1fr; }
  body.classic-shell .peer-tool-grid button { min-height: 92px; }
}

@media (max-width: 820px) {
  body.classic-shell #viewZiwei,
  body.classic-shell #viewZodiac { width: 100%; }
  body.classic-shell #ziweiResult.is-peer-segmented,
  body.classic-shell #zodiacResult.is-peer-segmented { position: static; left: auto; width: 100%; margin-top: 20px; transform: none; }
  body.classic-shell .peer-reader-workspace { grid-template-columns: 1fr; gap: 14px; }
  body.classic-shell .peer-reader-workspace__rail { position: static; padding: 18px 15px 14px; }
  body.classic-shell .peer-reader-intro { margin-bottom: 13px; padding-bottom: 13px; }
  body.classic-shell .peer-reader-intro > strong { font-size: 18px; }
  body.classic-shell .peer-reader-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; overflow: visible; }
  body.classic-shell .peer-reader-tabs button { min-width: 0; min-height: 84px; }
  body.classic-shell .peer-reader-tabs button.is-active { transform: none; }
  body.classic-shell .peer-reader-workspace__stage { min-height: 0; padding: 12px; border-radius: 23px; }
  body.classic-shell .peer-reader-stage__head { grid-template-columns: 58px minmax(0, 1fr); gap: 13px; padding: 17px 14px; }
  body.classic-shell .peer-reader-stage__chapter { width: 58px; height: 68px; border-radius: 17px 17px 17px 6px; }
  body.classic-shell .peer-reader-stage__chapter > span { font-size: 17px; }
  body.classic-shell .peer-reader-stage__chapter > small { display: none; }
  body.classic-shell .peer-reader-stage__copy h2 { font-size: 20px; }
  body.classic-shell .peer-reader-stage__copy p { font-size: 11px; }
  body.classic-shell .peer-reader-stage__focus { grid-column: 1 / -1; }
  body.classic-shell .peer-reader-panel { min-height: 360px; max-height: none; margin-top: 12px; padding: 10px; overflow: visible; }
  body.classic-shell .peer-reader-footer { grid-template-columns: 82px minmax(0, 1fr) 82px; padding: 9px; }
  body.classic-shell .peer-tool-hero { padding: 25px 20px; }
  body.classic-shell .peer-reader-support > summary { min-height: 52px; padding: 10px 12px; }
}

@media (max-width: 520px) {
  body.classic-shell .peer-reader-workspace__stage { padding: 8px; }
  body.classic-shell .peer-reader-stage__head { grid-template-columns: 50px minmax(0, 1fr); }
  body.classic-shell .peer-reader-stage__chapter { width: 50px; height: 60px; }
  body.classic-shell .peer-reader-stage__copy h2 { font-size: 18px; }
  body.classic-shell .peer-reader-footer > div > span { display: none; }
  body.classic-shell .peer-reader-footer { grid-template-columns: 72px minmax(0, 1fr) 72px; }
  body.classic-shell .peer-tool-grid button { grid-template-columns: 38px minmax(0, 1fr) 14px; padding: 17px 14px; }
  body.classic-shell .peer-reader-tabs { grid-template-columns: 1fr; }
}

@media print {
  body.classic-shell .peer-reader-workspace { display: block; }
  body.classic-shell .peer-reader-workspace__rail,
  body.classic-shell .peer-reader-stage__head,
  body.classic-shell .peer-reader-footer,
  body.classic-shell .peer-reader-support { display: none !important; }
  body.classic-shell .peer-reader-workspace__stage,
  body.classic-shell .peer-reader-panel { max-height: none; padding: 0; overflow: visible; border: 0; box-shadow: none; }
  body.classic-shell .peer-reader-panel[hidden] { display: block !important; page-break-before: always; }
}
/* 2026.08.05-2 · 出生信息从免费初见接续到完整测算 */
.journey-profile-bridge {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  gap: 15px;
  align-items: center;
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(112,199,174,.32);
  border-radius: 18px;
  background: linear-gradient(120deg,rgba(55,145,124,.15),rgba(8,19,27,.88) 66%);
  box-shadow: inset 0 1px rgba(255,255,255,.035),0 16px 36px rgba(0,0,0,.18);
}
.journey-profile-bridge[hidden] { display: none; }
.journey-profile-bridge__seal { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(112,199,174,.48); border-radius: 14px; background: rgba(112,199,174,.08); color: #9cd7c7; font-size: 18px; }
.journey-profile-bridge small,.journey-profile-bridge strong,.journey-profile-bridge p { display: block; margin: 0; }
.journey-profile-bridge small { color: #76bda9; font-size: .62rem; font-weight: 650; letter-spacing: .1em; }
.journey-profile-bridge strong { margin-top: 4px; color: #e2ece8; font-size: .82rem; font-weight: 650; }
.journey-profile-bridge p { margin-top: 3px; color: #7f9898; font-size: .64rem; line-height: 1.6; }
.journey-profile-bridge button { padding: 9px 13px; border: 1px solid rgba(112,199,174,.25); border-radius: 999px; background: rgba(0,0,0,.12); color: #9ab8b3; font-size: .62rem; cursor: pointer; }
@media (max-width:720px) {
  .journey-profile-bridge { grid-template-columns: 42px 1fr; padding: 14px; }
  .journey-profile-bridge button { grid-column: 2; justify-self: start; }
}

/* 2026.08.05-5 · 星座四主题独立插画与舒适阅读配色 */
#viewZodiac .zodiac-insight-cards {
  padding: 12px !important;
  gap: 16px;
  border: 1px solid rgba(142,163,184,.14) !important;
  background: linear-gradient(145deg,rgba(6,14,23,.94),rgba(9,13,24,.98)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03),0 24px 60px rgba(0,0,0,.2);
}
#viewZodiac .zodiac-insight-cards .bullet-card {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  overflow: hidden;
  padding: 24px 25px !important;
  border: 1px solid rgba(169,188,207,.18) !important;
  border-top-width: 1px !important;
  border-radius: 18px !important;
  background-color: #07111d !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center right !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045),0 18px 42px rgba(0,0,0,.22) !important;
}
#viewZodiac .zodiac-insight-cards .bullet-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgba(4,10,18,.98) 0%,rgba(5,11,20,.94) 43%,rgba(5,11,20,.52) 68%,rgba(5,11,20,.12) 100%);
  content: "";
  pointer-events: none;
}
#viewZodiac .zodiac-insight-cards .bullet-card::after {
  top: auto;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--zodiac-card-accent),transparent);
  opacity: .72;
}
#viewZodiac .zodiac-insight-cards .bullet-card > * { position: relative; z-index: 1; max-width: 68%; }
#viewZodiac .zodiac-insight-cards .bullet-card h5 {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 15px;
  background: none;
  color: #edf2f3;
  font-size: .96rem;
  font-weight: 720;
  letter-spacing: .08em;
  -webkit-text-fill-color: currentColor;
}
#viewZodiac .zodiac-insight-cards .bullet-card h5 span {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border: 1px solid color-mix(in srgb,var(--zodiac-card-accent) 58%,transparent);
  border-radius: 9px 9px 9px 3px;
  background: color-mix(in srgb,var(--zodiac-card-accent) 11%,transparent);
  color: var(--zodiac-card-accent);
  font-size: .7rem;
}
#viewZodiac .zodiac-insight-cards .bc-ul li {
  color: #c7d1d3 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.72);
  border-color: rgba(185,201,211,.1);
}
#viewZodiac .zodiac-insight-cards .bc-ul li::before { color: var(--zodiac-card-accent); }
#viewZodiac .zodiac-insight-cards .bullet-card--personality {
  --zodiac-card-accent: #72bfe9;
  background-image: url('../images/reports/zodiac-personality-v2.webp') !important;
  background-position: right 58% !important;
}
#viewZodiac .zodiac-insight-cards .bullet-card--love {
  --zodiac-card-accent: #d3a9dc;
  background-image: url('../images/reports/zodiac-love-v2.webp') !important;
  background-position: right 48% !important;
}
#viewZodiac .zodiac-insight-cards .bullet-card--career {
  --zodiac-card-accent: #79c8c3;
  background-image: url('../images/reports/zodiac-career-v2.webp') !important;
  background-position: right 74% !important;
}
#viewZodiac .zodiac-insight-cards .bullet-card--wealth {
  --zodiac-card-accent: #a8c987;
  background-image: url('../images/reports/zodiac-wealth-v2.webp') !important;
  background-position: right 63% !important;
}
@media (max-width:720px) {
  #viewZodiac .zodiac-insight-cards { padding: 8px !important; gap: 10px; }
  #viewZodiac .zodiac-insight-cards .bullet-card { min-height: 230px; padding: 21px 19px !important; background-position: 64% center !important; }
  #viewZodiac .zodiac-insight-cards .bullet-card::before { background: linear-gradient(90deg,rgba(4,10,18,.98),rgba(5,11,20,.9) 62%,rgba(5,11,20,.48)); }
  #viewZodiac .zodiac-insight-cards .bullet-card > * { max-width: 82%; }
}

/* 2026.08.13-1 · 四术六章长卷：每章拥有独立画面，并与阅读进度同步 */
.reading-chapter-mural {
  position: relative;
  min-height: 150px;
  aspect-ratio: 3.2 / 1;
  max-height: 340px;
  overflow: hidden;
  margin: 14px 0 16px;
  border: 1px solid rgba(210, 180, 101, .25);
  border-radius: 22px;
  background-color: #07121d;
  background-repeat: no-repeat;
  background-position: center, center 42%;
  background-size: 100% 100%, cover;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 22px 55px rgba(0,0,0,.24);
  transition: border-color .35s ease;
}
.reading-chapter-mural::before {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(var(--chapter-mural-position, 0%) * .8333);
  width: 16.6667%;
  border-right: 1px solid rgba(226,196,119,.42);
  border-left: 1px solid rgba(226,196,119,.42);
  box-shadow: 0 0 0 9999px rgba(4,10,17,.62), inset 0 0 42px rgba(4,10,17,.35);
  transition: left .64s cubic-bezier(.22,.8,.22,1);
  content: "";
}
.reading-chapter-mural::after {
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,196,119,.7), transparent);
  content: "";
}
.reading-chapter-mural--bazi { background-image: linear-gradient(90deg,rgba(4,10,17,.12),rgba(4,10,17,.03)), url('../images/chapters/bazi-six-scenes-v1.webp'); }
.reading-chapter-mural--ziwei { background-image: linear-gradient(90deg,rgba(4,10,17,.12),rgba(4,10,17,.03)), url('../images/chapters/ziwei-six-scenes-v1.webp'); }
.reading-chapter-mural--zodiac { background-image: linear-gradient(90deg,rgba(4,10,17,.12),rgba(4,10,17,.03)), url('../images/chapters/zodiac-six-scenes-v1.webp'); }
.reading-chapter-mural figcaption {
  position: absolute;
  z-index: 2;
  inset: auto auto 25px 25px;
  display: flex;
  max-width: min(72%, 430px);
  flex-direction: column;
  gap: 6px;
  padding: 11px 16px 12px;
  border: 1px solid rgba(215,184,99,.26);
  border-radius: 14px;
  background: rgba(4,10,17,.78);
  backdrop-filter: blur(3px);
}
.reading-chapter-mural figcaption span { color: #ecd28f; font-size: .72rem; font-weight: 750; letter-spacing: .16em; }
.reading-chapter-mural figcaption strong { color: #f3eee3; font-family: "STSong", "Songti SC", serif; font-size: clamp(1.28rem, 2vw, 1.72rem); font-weight: 700; letter-spacing: .08em; text-shadow: 0 2px 18px rgba(0,0,0,.75); }
.reading-chapter-mural figcaption small { width: max-content; padding: 4px 9px; border: 1px solid rgba(218,186,100,.34); border-radius: 999px; background: rgba(4,10,17,.62); color: #d6e0e1; font-size: .72rem; letter-spacing: .12em; }

.chapter-mural-gallery {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(215,184,99,.25);
  border-radius: 23px;
  background: linear-gradient(145deg,rgba(10,22,29,.98),rgba(4,11,18,.98));
  box-shadow: 0 24px 60px rgba(0,0,0,.23);
}
.chapter-mural-gallery__head { display: grid; gap: 5px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(210,180,101,.14); }
.chapter-mural-gallery__head span { color: #d9b85e; font-size: .62rem; font-weight: 750; letter-spacing: .17em; }
.chapter-mural-gallery__head strong { color: #f1ece0; font-family: "STSong", "Songti SC", serif; font-size: 1.24rem; letter-spacing: .08em; }
.chapter-mural-gallery__head small { color: #819295; font-size: .66rem; }
.chapter-mural-gallery__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(211,179,91,.12); }
.chapter-mural-gallery__grid article { position: relative; min-height: 176px; aspect-ratio: 1 / 1.4; max-height: 300px; overflow: hidden; background: #07121b; }
.chapter-mural-gallery__grid article i { position: absolute; inset: 0; background-image: url('../images/chapters/qimen-six-scenes-v1.webp'); background-repeat: no-repeat; background-position: var(--mural-position,0%) center; background-size: 600% auto; transition: transform .65s cubic-bezier(.22,.8,.22,1), filter .35s ease; }
.chapter-mural-gallery__grid article::after { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(3,9,15,.93),rgba(3,9,15,.05) 72%); content:""; }
.chapter-mural-gallery__grid article span { position:absolute; z-index:2; right:16px; bottom:15px; left:16px; display:flex; align-items:end; justify-content:space-between; gap:10px; }
.chapter-mural-gallery__grid article small { color:#ecd28f; font-size:.72rem; font-weight:700; letter-spacing:.14em; }
.chapter-mural-gallery__grid article b { color:#f4f0e6; font-size:.9rem; font-weight:650; letter-spacing:.07em; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.chapter-mural-gallery__grid article:hover i { transform: scale(1.045); filter: saturate(1.08) brightness(1.05); }

@media (max-width: 720px) {
  .reading-chapter-mural { min-height: 132px; aspect-ratio: 2.4 / 1; margin: 10px 0 12px; border-radius: 17px; }
  .reading-chapter-mural figcaption { inset: auto 13px 13px 13px; max-width: none; padding: 9px 13px 10px; }
  .reading-chapter-mural figcaption strong { font-size: 1.16rem; }
  .chapter-mural-gallery__head { padding: 18px 17px 15px; }
  .chapter-mural-gallery__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chapter-mural-gallery__grid article { min-height: 142px; aspect-ratio: 1 / 1.32; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-chapter-mural, .chapter-mural-gallery__grid article i { transition: none; }
}

/* 2026.08.15-1 · 小六壬水月课境：以同一幅专属课盘图串联起课与结果，移除重复书库背景。 */
body.classic-shell[data-theme="dark"] #viewLiuren {
  --liuren-water: #071725;
  --liuren-water-deep: #040d17;
  --liuren-moon: #9ed3ec;
  position: relative;
  isolation: isolate;
  padding-bottom: 42px;
  background-color: var(--liuren-water-deep);
  background-image:
    repeating-linear-gradient(164deg, transparent 0 82px, rgba(135,198,229,.027) 83px 84px),
    linear-gradient(180deg, rgba(7,22,36,.08), rgba(4,13,23,.92) 62%, #040d17);
  box-shadow: inset 0 1px rgba(158,211,236,.08), inset 0 -80px 120px rgba(0,0,0,.18);
}
body.classic-shell[data-theme="dark"] #viewLiuren::before {
  position: absolute;
  z-index: -1;
  top: 420px;
  right: 0;
  left: 0;
  height: 980px;
  background-image: linear-gradient(180deg, rgba(4,13,23,.34), rgba(4,13,23,.9)), url('../images/features/liuren.webp');
  background-repeat: no-repeat;
  background-position: center, center top;
  background-size: 100% 100%, min(1600px, 132vw) auto;
  opacity: .17;
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
}
body.classic-shell[data-theme="dark"] #viewLiuren .feature-guide {
  border-color: rgba(142,199,228,.2);
  background: linear-gradient(145deg, rgba(9,27,42,.82), rgba(5,16,27,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 20px 45px rgba(0,0,0,.18);
}
body.classic-shell[data-theme="dark"] #viewLiuren .feature-guide__item {
  border-color: rgba(143,198,226,.13);
  background: linear-gradient(145deg, rgba(11,31,46,.72), rgba(6,18,30,.78));
}
body.classic-shell[data-theme="dark"] #viewLiuren .input-panel {
  overflow: hidden;
  border-color: rgba(151,207,234,.24) !important;
  background-color: #071522 !important;
  background-image: linear-gradient(110deg, rgba(5,16,27,.98), rgba(5,18,30,.91) 54%, rgba(8,27,41,.76)), url('../images/features/liuren.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center, center 54% !important;
  background-size: cover !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 58px rgba(0,0,0,.24) !important;
}
body.classic-shell[data-theme="dark"] #viewLiuren .input-panel::after {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,213,239,.72), rgba(222,190,112,.48), transparent);
  content: "";
  pointer-events: none;
}
body.classic-shell[data-theme="dark"] #liurenResult {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 30px;
  padding: clamp(14px, 2.2vw, 26px);
  border: 1px solid rgba(148,204,233,.24);
  border-radius: 24px;
  background-color: #050f1a;
  background-image: linear-gradient(180deg, rgba(4,14,24,.56), rgba(4,13,22,.9) 48%, rgba(4,11,19,.97)), url('../images/features/liuren.webp');
  background-repeat: no-repeat;
  background-position: center, center top;
  background-size: 100% 100%, 1500px auto;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 30px 72px rgba(0,0,0,.28);
}
body.classic-shell[data-theme="dark"] #liurenResult:empty { display: none; }
body.classic-shell[data-theme="dark"] #liurenResult::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: repeating-linear-gradient(168deg, transparent 0 68px, rgba(136,200,232,.035) 69px 70px);
  content: "";
  pointer-events: none;
}
body.classic-shell[data-theme="dark"] #liurenResult .strength-panel {
  position: relative;
  z-index: 1;
  border-color: rgba(153,207,234,.18) !important;
  background-color: rgba(5,15,25,.78) !important;
  background-image: linear-gradient(145deg, rgba(8,25,39,.9), rgba(5,15,26,.84)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 18px 44px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(12px);
}
body.classic-shell[data-theme="dark"] #liurenResult .strength-panel + .strength-panel { margin-top: 18px; }
body.classic-shell[data-theme="dark"] #liurenResult .liuren-course {
  background-image: var(--lr-scene), linear-gradient(145deg, rgba(8,25,39,.9), rgba(5,15,26,.84)) !important;
}
body.classic-shell[data-theme="dark"] #liurenResult .liuren-scene {
  border-color: color-mix(in srgb, var(--lr-accent) 72%, rgba(151,207,234,.26));
  background-color: rgba(4,14,23,.7);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 32px rgba(0,0,0,.16);
}
body.classic-shell[data-theme="dark"] #liurenResult .liuren-card {
  background-color: rgba(5,17,28,.8);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 26px rgba(0,0,0,.15);
}
body.classic-shell[data-theme="dark"] #liurenResult .liuren-card.is-main .liuren-card__art { opacity: 1; }

@media (max-width: 720px) {
  body.classic-shell[data-theme="dark"] #viewLiuren { padding-bottom: 28px; }
  body.classic-shell[data-theme="dark"] #viewLiuren::before { top: 330px; height: 760px; background-size: 100% 100%, 1120px auto; }
  body.classic-shell[data-theme="dark"] #viewLiuren .input-panel { background-position: center, 58% center !important; }
  body.classic-shell[data-theme="dark"] #liurenResult { margin-top: 22px; padding: 11px; border-radius: 18px; background-size: 100% 100%, 1080px auto; }
  body.classic-shell[data-theme="dark"] #liurenResult .strength-panel { padding: 18px 15px; }
  body.classic-shell[data-theme="dark"] #liurenResult .liuren-card__art { height: 126px; object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  #liurenResult .liuren-card__art { transition: none; }
  #liurenResult .liuren-card:hover .liuren-card__art { transform: scale(1.002); }
}