/* ============================================================
全局字号放大层 — 整体阅读尺度 +1 级
============================================================ */
:root {
/* base 17px(原 14-15px),所有依赖 rem 的组件自动放大 */
--global-font-scale: 1.14;
}
html {
font-size: 17px;
}
body.app-default,
body.app-default .text-gray-900,
body.app-default .text-gray-800,
body.app-default .text-gray-700,
body.app-default .text-gray-600,
body.app-default p,
body.app-default li,
body.app-default td,
body.app-default th,
body.app-default span,
body.app-default div {
font-size: inherit;
}
body.app-default {
font-size: 17px;
line-height: 1.75;
}
/* 标题层级整体放大 */
body.app-default h1, body.app-default .h1 { font-size: 2.6rem !important; line-height: 1.3; }
body.app-default h2, body.app-default .h2 { font-size: 2.1rem !important; line-height: 1.35; }
body.app-default h3, body.app-default .h3 { font-size: 1.75rem !important; line-height: 1.4; }
body.app-default h4, body.app-default .h4 { font-size: 1.45rem !important; line-height: 1.45; }
body.app-default h5, body.app-default .h5 { font-size: 1.25rem !important; line-height: 1.5; }
body.app-default h6, body.app-default .h6 { font-size: 1.1rem !important; line-height: 1.55; }
/* 正文段落 / 列表 / 卡片 */
body.app-default p,
body.app-default li,
body.app-default .card-body,
body.app-default .text-gray-700,
body.app-default .text-gray-800,
body.app-default .text-gray-900 {
font-size: 1.05rem;
}
/* 报告文案区块整体加大 */
.report-section,
.report-section p,
.report-section li,
.report-subsection,
.report-action,
.report-warning,
.report-summary,
._asec-body,
._asec p,
._asec li,
.uhc-body,
.onepage-card,
.health-card,
.score-index-card,
.resonance-card,
.trust-card,
.consultant-card,
.testimonial-card,
.plan90-card {
font-size: 1.05rem;
}
/* 按钮 / 表单元素稍大 */
body.app-default .btn { font-size: 1rem; padding: 0.7rem 1.3rem; }
body.app-default .btn-sm { font-size: 0.9rem; padding: 0.5rem 0.95rem; }
body.app-default .btn-lg { font-size: 1.15rem; padding: 0.9rem 1.7rem; }
/* 表格略大 */
body.app-default table { font-size: 1rem; }
body.app-default .table th { font-size: 1rem; }
body.app-default .table td { font-size: 1rem; }
/* Bootstrap utility 字号同步 */
body.app-default .fs-1 { font-size: 2.3rem !important; }
body.app-default .fs-2 { font-size: 1.85rem !important; }
body.app-default .fs-3 { font-size: 1.55rem !important; }
body.app-default .fs-4 { font-size: 1.3rem !important; }
body.app-default .fs-5 { font-size: 1.15rem !important; }
body.app-default .fs-6 { font-size: 1.05rem !important; }
body.app-default .fs-7 { font-size: 0.95rem !important; }
body.app-default .fs-8 { font-size: 0.88rem !important; }
/* 移动端缩回一档,避免溢出 */
@media (max-width: 768px) {
html { font-size: 15.5px; }
body.app-default { font-size: 15.5px; line-height: 1.7; }
body.app-default h1, body.app-default .h1 { font-size: 2rem !important; }
body.app-default h2, body.app-default .h2 { font-size: 1.7rem !important; }
body.app-default h3, body.app-default .h3 { font-size: 1.45rem !important; }
body.app-default h4, body.app-default .h4 { font-size: 1.25rem !important; }
body.app-default h5, body.app-default .h5 { font-size: 1.12rem !important; }
}
@media (max-width: 480px) {
html { font-size: 14.5px; }
body.app-default { font-size: 14.5px; }
}
.rusheng-bg{
background-image: url("../img/background.png");
background-size: cover;
background-position: center;
}
.rusheng-logo{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fadeIn 5s;
width:250px;
}
.map-cang-row{
padding:0px;
}
.map-cang-row:last-child{
border-right:1px solid;
}
.map-cang-row table{
width:100%;
height:80px;
}
.map-cang-row table tr td{
text-align:center;
border: 1px solid black;
width: 33%;
font-size:12px;
font-family: 'Noto Sans SC', sans-serif;
}
.map-cang-row table tr td:last-child{
border-right:0;
}
.simple_gene_map tr td{
font-family: 'Noto Sans SC', sans-serif;
}
.liunian_dayun_table{
display:inline-block;
}
.liunian_dayun_table tr td{
font-family: 'Noto Sans SC', sans-serif;
}
.gene-chart{
height:130px;
width:130px;
display:inline-block;
font-family: 'Noto Sans SC', sans-serif;
vertical-align:top;
margin-top:15px
}
.five_gene_map tr td{
font-family: 'Noto Sans SC', sans-serif;
}
.five_gene_map{
margin:0 auto;
}
.five_gene_map .h-200px{
width:85px;
}
.five-gong-wei{
opacity : 0.9;
z-index:10;
padding-top:10px;
position:absolute;
color:black;
font-size:24px;
background:white;
text-align:center;
font-weight:bold;
visibility:hidden;
}
.five-shi-shen{
opacity : 0.9;
z-index:10;
position:absolute;
color:black;
font-size:18px;
background:white;
text-align:center;
font-weight:bold;
display: flex;
justify-content: center;
align-items: center;
visibility:hidden;
}
.energy_adjust{
margin:0 auto;
display:inline;
}
.energy_adjust tr td{
padding:5px 10px;
border:2px solid white;
}
.energy_adjust tr th{
padding:5px 10px;
border:2px solid white;
}
.energy_improve tr td{
background:#e5ffe5;
}
.energy_improve tr th{
background:#e5ffe5;
}
.energy_avoid tr td{
background:lavenderblush;
}
.energy_avoid tr th{
background:lavenderblush;
}
.energy_dedicate tr td{
background:#FFDEAD;
}
.energy_dedicate tr th{
background:#FFDEAD;
}
.energy_replenish tr td{
background:#F0FFFF;
}
.energy_replenish tr th{
background:#F0FFFF;
}
@media (min-width: 576px) {
.map-cang-row table tr td{
font-size:16px;
}
.five_gene_map .h-200px{
width:125px;
}
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* ========= V2 视觉升级:五德人格基因图 ========= */
/* 五行渐变底色 */
.bg-wuxing-mu { background: linear-gradient(135deg, #C8F8C8 0%, #66CC66 100%); }
.bg-wuxing-huo { background: linear-gradient(135deg, #FFD0D0 0%, #FF6B6B 100%); }
.bg-wuxing-tu { background: linear-gradient(135deg, #FFE9C0 0%, #D2A560 100%); }
.bg-wuxing-jin { background: linear-gradient(135deg, #F0F0F0 0%, #B8B8B8 100%); }
.bg-wuxing-shui { background: linear-gradient(135deg, #C8E8F0 0%, #4682B4 100%); }
.text-wuxing-mu { color: #2E7D32; }
.text-wuxing-huo { color: #C62828; }
.text-wuxing-tu { color: #8B6914; }
.text-wuxing-jin { color: #424242; }
.text-wuxing-shui { color: #1565C0; }
/* 顶部 流年/大运 双卡 */
.year-cycle-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 600px;
margin: 0 auto 30px;
}
.year-cycle-card {
background: white;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.year-cycle-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}
.year-cycle-card .ycc-header {
padding: 14px 20px;
color: white;
font-weight: 700;
font-size: 18px;
text-align: center;
letter-spacing: 2px;
}
.year-cycle-card .ycc-header.liu-nian { background: linear-gradient(90deg, #FF6B6B, #FF8E53); }
.year-cycle-card .ycc-header.da-yun { background: linear-gradient(90deg, #4A90E2, #1B84FF); }
.year-cycle-card .ycc-meta {
padding: 16px 20px 8px;
text-align: center;
color: #6c757d;
font-size: 13px;
}
.year-cycle-card .ycc-meta strong {
display: block;
color: #1F2937;
font-size: 28px;
line-height: 1;
margin: 4px 0;
}
.year-cycle-card .ycc-pillar {
display: flex;
justify-content: center;
gap: 8px;
padding: 12px 20px 20px;
}
.year-cycle-card .ycc-cell {
width: 70px;
border-radius: 10px;
overflow: hidden;
text-align: center;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.year-cycle-card .ycc-cell .gz {
font-size: 30px;
font-weight: 700;
padding: 8px 0 4px;
background: white;
}
.year-cycle-card .ycc-cell .wx {
font-size: 13px;
padding: 4px 0 6px;
color: white;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* 四柱图重设计 — 4 列卡片 */
.bazi-pillar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.bazi-pillar {
background: white;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: transform 0.2s;
position: relative;
}
.bazi-pillar:hover { transform: translateY(-2px); }
.bazi-pillar.is-day {
box-shadow: 0 0 0 3px #66CC66, 0 8px 24px rgba(102, 204, 102, 0.3);
}
.bazi-pillar.is-day::before {
content: '元神';
position: absolute;
top: 8px;
right: -28px;
background: #2E7D32;
color: white;
padding: 3px 32px;
font-size: 10px;
transform: rotate(45deg);
font-weight: 700;
letter-spacing: 1px;
z-index: 2;
}
.bazi-pillar .bp-head {
padding: 8px;
text-align: center;
background: #F8F9FA;
color: #6c757d;
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
}
.bazi-pillar .bp-stem,
.bazi-pillar .bp-branch {
text-align: center;
padding: 12px 8px;
}
.bazi-pillar .bp-stem .char,
.bazi-pillar .bp-branch .char {
font-size: 42px;
font-weight: 700;
line-height: 1;
}
.bazi-pillar .bp-stem .label,
.bazi-pillar .bp-branch .label {
font-size: 12px;
color: white;
background: rgba(0, 0, 0, 0.25);
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
margin-top: 6px;
font-weight: 600;
}
.bazi-pillar .bp-hidden {
display: flex;
background: #FAFBFC;
border-top: 1px solid #E5E7EB;
padding: 2px;
gap: 2px;
}
.bazi-pillar .bp-hidden .h-cell {
flex: 1;
padding: 8px 2px 7px;
text-align: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.4);
border: 1px solid transparent;
border-radius: 8px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
/* 可点击的藏干 cell - 悬停效果 */
.bazi-pillar .bp-hidden button.h-cell:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(180, 113, 72, 0.4);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 6px 16px rgba(45, 36, 24, 0.12);
z-index: 2;
}
.bazi-pillar .bp-hidden button.h-cell::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 2px;
background: rgba(180, 113, 72, 0.25);
border-radius: 1px;
transition: width 0.2s, background 0.2s;
}
.bazi-pillar .bp-hidden button.h-cell:hover::after {
width: 16px;
background: #B47148;
}
/* 日主本身 — 不可点击,有特殊样式 */
.bazi-pillar .bp-hidden .h-cell-self {
background: linear-gradient(135deg, rgba(102, 204, 102, 0.18), rgba(102, 204, 102, 0.08)) !important;
border-color: rgba(102, 204, 102, 0.4);
cursor: default;
}
.bazi-pillar .bp-hidden .h-cell-self::after { display: none; }
.bazi-pillar .bp-hidden .h-stem {
font-size: 17px;
font-weight: 800;
line-height: 1.1;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
letter-spacing: 1px;
}
.bazi-pillar .bp-hidden .h-god {
font-size: 9.5px;
color: rgba(0, 0, 0, 0.55);
font-weight: 700;
letter-spacing: 1px;
margin-top: 3px;
}
.bazi-pillar .bp-hidden button.h-cell:hover .h-god {
color: #B47148;
}
/* 顶部十神标签:点击触发模态框 */
.bazi-pillar .bp-head .bp-god-tag {
background: linear-gradient(135deg, rgba(180, 113, 72, 0.18), rgba(180, 113, 72, 0.1));
color: #8C5230;
font-size: 10.5px;
padding: 2px 10px;
border-radius: 12px;
margin-left: 6px;
font-weight: 700;
letter-spacing: 1px;
border: 1px solid rgba(180, 113, 72, 0.25);
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.bazi-pillar .bp-head .bp-god-tag.clickable:hover {
background: linear-gradient(135deg, #B47148, #8C5230);
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(180, 113, 72, 0.3);
border-color: transparent;
}
/* 十神判读口诀小卡 */
.shishen-cheatsheet {
background: linear-gradient(135deg, rgba(63, 79, 63, 0.06), rgba(180, 113, 72, 0.06));
border: 1px solid rgba(180, 113, 72, 0.18);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 24px;
}
.shishen-cheatsheet .cs-title {
font-weight: 700;
color: #3F4F3F;
font-size: 15px;
letter-spacing: 1px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.shishen-cheatsheet .cs-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 4px 0;
font-size: 14px;
color: #2D2418;
}
.shishen-cheatsheet .cs-label {
background: #3F4F3F;
color: #F5EDE0;
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
min-width: 50px;
text-align: center;
}
.shishen-cheatsheet .cs-value {
color: #2D2418;
font-weight: 500;
}
.shishen-cheatsheet .cs-traps {
display: inline-flex;
gap: 4px;
margin-left: auto;
}
.shishen-cheatsheet .cs-trap-chip {
background: rgba(202, 138, 4, 0.16);
color: #92660B;
padding: 2px 8px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: help;
}
@media (max-width: 576px) {
.shishen-cheatsheet .cs-row { flex-direction: column; align-items: flex-start; }
.shishen-cheatsheet .cs-traps { margin-left: 0; }
}
/* 五宫位 v2 — 精致版 */
.palace-grid {
display: grid;
grid-template-columns: 1fr 1.45fr 1fr;
gap: 16px;
max-width: 540px;
margin: 0 auto;
padding: 8px;
}
.palace-col-side { display: flex; flex-direction: column; gap: 16px; }
.palace-cell {
border-radius: 22px;
padding: 20px 14px 16px;
text-align: center;
color: #1F2937;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 24px rgba(45, 36, 24, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.palace-cell::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 2px;
background: rgba(180, 113, 72, 0.35);
border-radius: 2px;
}
.palace-cell:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 16px 40px rgba(45, 36, 24, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.palace-cell .pc-elem {
font-size: 52px;
font-weight: 800;
line-height: 1;
margin-top: 8px;
letter-spacing: 2px;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.5),
0 2px 8px rgba(0, 0, 0, 0.06);
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
}
.palace-cell .pc-shen {
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
margin-top: 10px;
font-weight: 600;
letter-spacing: 3px;
}
.palace-cell .pc-type {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
border-radius: 20px;
margin-top: 10px;
color: white;
letter-spacing: 1px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.palace-cell .pc-count {
margin-top: 8px;
font-size: 10px;
color: rgba(0, 0, 0, 0.4);
font-weight: 600;
letter-spacing: 1px;
}
.palace-cell.is-strong .pc-type { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.palace-cell.is-weak .pc-type { background: linear-gradient(135deg, #6B7280, #4B5563); }
.palace-cell.is-empty .pc-type { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.palace-cell.is-ideal .pc-type { background: linear-gradient(135deg, #059669, #047857); }
/* 左上 / 右上角:流年/大运挂牌 */
.palace-corner {
position: absolute;
top: -14px;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 10px 8px;
border-radius: 14px;
color: white;
font-family: 'Noto Sans SC', sans-serif;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
z-index: 5;
line-height: 1.05;
min-width: 50px;
cursor: help;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* 挂牌的小绳子顶点 */
.palace-corner::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: rgba(180, 113, 72, 0.55);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.palace-corner:hover {
transform: scale(1.1) translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.14),
0 10px 24px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.palace-corner.corner-tl { left: -12px; }
.palace-corner.corner-tr { right: -12px; }
.palace-corner .pcr-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
opacity: 0.95;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.palace-corner .pcr-stem {
font-size: 24px;
font-weight: 800;
margin: 2px 0 1px;
line-height: 1;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.15),
0 2px 4px rgba(0, 0, 0, 0.25);
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
letter-spacing: 1px;
}
.palace-corner .pcr-god {
font-size: 10px;
font-weight: 700;
background: rgba(255, 255, 255, 0.25);
padding: 1px 7px;
border-radius: 8px;
margin-top: 2px;
letter-spacing: 1px;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(4px);
}
/* ========= 宫位里的 2 个十神计数 chip(精致版)========= */
.palace-cell .pc-gods {
display: flex;
gap: 8px;
margin-top: 14px;
padding: 0 4px;
justify-content: center;
}
.palace-cell .pc-god-chip {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 6px 6px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
border: 1px solid rgba(180, 113, 72, 0.15);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 12px rgba(45, 36, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
font-family: inherit;
}
/* 点击提示:右上角 i */
.palace-cell .pc-god-chip::after {
content: 'ⓘ';
position: absolute;
top: 3px;
right: 5px;
font-size: 9px;
color: rgba(180, 113, 72, 0.45);
transition: color 0.2s, transform 0.2s;
}
.palace-cell .pc-god-chip:hover::after {
color: #B47148;
transform: scale(1.2);
}
.palace-cell .pc-god-chip:hover {
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 20px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(180, 113, 72, 0.3);
}
.palace-cell .pc-god-chip.is-zero {
opacity: 0.45;
background: rgba(255, 255, 255, 0.35);
}
.palace-cell .pc-god-chip .pcg-count {
font-size: 22px;
font-weight: 800;
line-height: 1;
color: #3F4F3F;
letter-spacing: -1px;
background: none;
width: auto;
height: auto;
border-radius: 0;
display: block;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.palace-cell .pc-god-chip .pcg-name {
font-size: 10px;
font-weight: 700;
color: #6B5D4A;
letter-spacing: 1.5px;
margin-top: 2px;
}
.palace-cell .pc-god-chip.is-zero .pcg-count {
color: rgba(0, 0, 0, 0.2);
}
.palace-cell .pc-god-chip.is-zero .pcg-name {
color: rgba(0, 0, 0, 0.3);
}
/* 中央宫位 chip — 古铜金主题 */
.palace-center .pc-gods-center {
display: flex;
gap: 10px;
margin-top: 18px;
padding: 0 4px;
}
.palace-center .pc-god-chip {
flex: 1;
padding: 10px 8px 8px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.85));
border: 1px solid rgba(180, 113, 72, 0.2);
box-shadow:
0 1px 2px rgba(180, 113, 72, 0.06),
0 6px 16px rgba(180, 113, 72, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.palace-center .pc-god-chip .pcg-count {
font-size: 28px;
color: #B47148;
font-weight: 800;
background: linear-gradient(180deg, #C9897A 0%, #8C5230 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.palace-center .pc-god-chip .pcg-name {
font-size: 11px;
color: #8C5230;
font-weight: 700;
letter-spacing: 2px;
}
.palace-center .pc-god-chip.is-zero { opacity: 0.4; }
.palace-center .pc-god-chip.is-zero .pcg-count { -webkit-text-fill-color: rgba(0, 0, 0, 0.18); }
.palace-center .pc-god-chip.is-zero .pcg-name { color: rgba(0, 0, 0, 0.3); }
/* ========= 十神人格大全 ========= */
.ten-god-gallery {
margin-top: 24px;
padding: 20px;
background: linear-gradient(135deg, rgba(63, 79, 63, 0.04), rgba(180, 113, 72, 0.04));
border-radius: 14px;
border: 1px solid rgba(180, 113, 72, 0.15);
animation: fadeIn 0.3s ease-out;
}
.tgg-intro {
text-align: center;
color: #2D2418;
font-size: 14px;
margin-bottom: 18px;
padding: 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 10px;
}
.tgg-intro strong { color: #3F4F3F; letter-spacing: 1px; }
.tgg-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 768px) {
.tgg-grid { grid-template-columns: 1fr; }
}
.tgg-card {
background: rgba(252, 248, 240, 0.95);
border: 1px solid rgba(180, 113, 72, 0.12);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 14px rgba(45, 36, 24, 0.06);
transition: transform 0.2s, box-shadow 0.2s;
}
.tgg-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(45, 36, 24, 0.12);
}
.tgg-card.is-mine {
border: 2px solid #B47148;
box-shadow: 0 6px 28px rgba(180, 113, 72, 0.25);
}
.tgg-card-head {
color: white;
padding: 10px 14px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.tgg-head-left { display: flex; align-items: center; gap: 10px; }
.tgg-code {
background: rgba(255, 255, 255, 0.25);
padding: 3px 9px;
border-radius: 14px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
.tgg-name {
font-size: 18px;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tgg-head-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tgg-cat {
background: rgba(255, 255, 255, 0.18);
padding: 2px 8px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
}
.tgg-mine-tag {
padding: 2px 8px;
border-radius: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
}
.tgg-mine-tag.tag-ext { background: #F59E0B; color: white; }
.tgg-mine-tag.tag-int { background: #A855F7; color: white; }
.tgg-card-body { padding: 14px 16px; }
.tgg-short {
font-size: 13px;
color: #6B5D4A;
font-style: italic;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(180, 113, 72, 0.2);
}
.tgg-traits { margin-bottom: 12px; }
.tgg-trait {
display: flex;
gap: 10px;
margin-bottom: 8px;
align-items: flex-start;
}
.tgg-trait-num {
background: #3F4F3F;
color: #F5EDE0;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
flex-shrink: 0;
}
.tgg-trait-title {
font-weight: 700;
color: #B47148;
font-size: 13px;
margin-bottom: 2px;
}
.tgg-trait-detail {
font-size: 12px;
color: #2D2418;
line-height: 1.55;
}
.tgg-summary {
background: rgba(63, 79, 63, 0.08);
border-left: 3px solid #3F4F3F;
padding: 10px 12px;
border-radius: 0 8px 8px 0;
font-size: 12.5px;
color: #2D2418;
line-height: 1.6;
}
.tgg-summary-label {
background: #3F4F3F;
color: #F5EDE0;
font-size: 10px;
padding: 1px 7px;
border-radius: 8px;
margin-right: 6px;
font-weight: 700;
letter-spacing: 1px;
}
/* 中央理想宫 — 主角光环 */
.palace-center {
border-radius: 28px;
padding: 36px 20px 24px;
text-align: center;
background:
radial-gradient(at 50% 0%, rgba(255, 255, 255, 1), rgba(252, 248, 240, 0.95) 60%),
linear-gradient(135deg, #ffffff, #fefce8);
border: 1px solid rgba(180, 113, 72, 0.25);
box-shadow:
0 0 0 2px rgba(180, 113, 72, 0.18),
0 0 0 8px rgba(180, 113, 72, 0.06),
0 16px 48px rgba(180, 113, 72, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(180, 113, 72, 0.06);
animation: ideal-glow 3s ease-in-out infinite;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: visible;
}
.palace-center::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, transparent, #B47148, transparent);
border-radius: 3px;
}
.palace-center::after {
content: '◆';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
color: rgba(180, 113, 72, 0.5);
font-size: 10px;
}
@keyframes ideal-glow {
0%, 100% {
box-shadow:
0 0 0 2px rgba(180, 113, 72, 0.18),
0 0 0 8px rgba(180, 113, 72, 0.06),
0 16px 48px rgba(180, 113, 72, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(180, 113, 72, 0.06);
}
50% {
box-shadow:
0 0 0 3px rgba(180, 113, 72, 0.25),
0 0 0 12px rgba(180, 113, 72, 0.03),
0 20px 60px rgba(180, 113, 72, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(180, 113, 72, 0.08);
}
}
.palace-center .pc-elem-big {
font-size: 84px;
font-weight: 800;
line-height: 0.95;
margin: 8px 0 4px;
letter-spacing: 4px;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.6),
0 4px 16px rgba(0, 0, 0, 0.08);
background: linear-gradient(180deg, currentColor 0%, currentColor 70%, rgba(180, 113, 72, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.palace-center .pc-shen-big {
font-size: 12px;
color: #8C7A60;
margin-top: 12px;
margin-bottom: 4px;
letter-spacing: 4px;
font-weight: 600;
}
.palace-center .pc-type-big {
font-size: 14px;
font-weight: 800;
color: #B47148;
margin-top: 12px;
letter-spacing: 4px;
text-shadow: 0 1px 2px rgba(180, 113, 72, 0.15);
}
.palace-center .pc-count-big {
font-size: 10px;
color: rgba(0, 0, 0, 0.35);
margin-top: 8px;
letter-spacing: 2px;
font-weight: 600;
}
/* 大运 section 标题区 */
.dayun-section-head {
text-align: center;
margin-bottom: 18px;
}
.dayun-section-head .dsh-title {
font-family: var(--font-serif, 'Noto Serif SC', serif);
font-size: 20px;
color: #1F2937;
letter-spacing: 4px;
margin: 0;
font-weight: 600;
}
.dayun-section-head .dsh-meta {
font-size: 12px;
color: #9CA3AF;
letter-spacing: 2px;
margin-top: 4px;
}
.dayun-section-head .dsh-current {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 6px 16px;
background: linear-gradient(135deg, rgba(27,132,255,0.08), rgba(37,99,235,0.04));
border: 1px solid rgba(27,132,255,0.25);
border-radius: 999px;
font-size: 13px;
}
.dayun-section-head .dsh-current-tag {
background: linear-gradient(135deg, #1B84FF, #2563EB);
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 2px;
font-weight: 700;
}
.dayun-section-head .dsh-current-age {
color: #1F2937;
font-weight: 700;
letter-spacing: 1px;
}
.dayun-section-head .dsh-current-gz {
font-family: var(--font-wenkai, 'LXGW WenKai TC', serif);
color: #1B84FF;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
}
/* 大运 timeline — 留出顶部空间给「当前」徽章 */
.dayun-timeline {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 8px;
margin-top: 24px;
padding-top: 22px;
overflow: visible;
}
.dayun-card {
background: white;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
overflow: visible;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.dayun-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* === 当前大运:多层视觉强调 === */
.dayun-card.is-current {
box-shadow:
0 0 0 3px #1B84FF,
0 0 0 8px rgba(27, 132, 255, 0.18),
0 12px 32px rgba(27, 132, 255, 0.35);
transform: translateY(-6px) scale(1.04);
z-index: 5;
animation: cycle-pulse 2.4s ease-in-out infinite;
}
.dayun-card.is-current::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 14px;
background: linear-gradient(135deg, #1B84FF, #60A5FA, #1B84FF);
background-size: 200% 200%;
z-index: -1;
animation: cycle-shimmer 3s linear infinite;
}
@keyframes cycle-pulse {
0%, 100% {
box-shadow:
0 0 0 3px #1B84FF,
0 0 0 8px rgba(27, 132, 255, 0.18),
0 12px 32px rgba(27, 132, 255, 0.35);
}
50% {
box-shadow:
0 0 0 4px #1B84FF,
0 0 0 14px rgba(27, 132, 255, 0.1),
0 18px 42px rgba(27, 132, 255, 0.45);
}
}
@keyframes cycle-shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.dayun-card .dc-age {
background: linear-gradient(90deg, #DCFCE7, #BBF7D0);
text-align: center;
padding: 6px 0;
font-weight: 700;
color: #15803D;
font-size: 14px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.dayun-card.is-current .dc-age {
background: linear-gradient(135deg, #1B84FF, #2563EB);
color: white;
font-size: 16px;
padding: 8px 0;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.dayun-card .dc-stem,
.dayun-card .dc-branch {
text-align: center;
padding: 10px 4px;
font-size: 22px;
font-weight: 700;
}
.dayun-card.is-current .dc-stem,
.dayun-card.is-current .dc-branch {
font-size: 26px;
padding: 12px 4px;
}
.dayun-card .dc-stem-elem,
.dayun-card .dc-branch-elem {
text-align: center;
padding: 4px 0;
font-size: 12px;
color: white;
font-weight: 600;
}
.dayun-card.is-current .dc-stem-elem,
.dayun-card.is-current .dc-branch-elem {
padding: 6px 0;
font-size: 13px;
letter-spacing: 1px;
}
.dayun-card.is-current .dc-branch-elem {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* 「当前」徽章 — 飘在卡片上方,带小三角指针 */
.dayun-card .dc-current-badge {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #DC2626, #F97316);
color: white;
font-size: 12px;
padding: 4px 12px;
border-radius: 14px;
font-weight: 800;
letter-spacing: 3px;
text-indent: 3px;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
white-space: nowrap;
z-index: 6;
animation: badge-bounce 2s ease-in-out infinite;
}
.dayun-card .dc-current-badge::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #DC2626;
box-shadow: 2px 2px 4px rgba(220, 38, 38, 0.3);
}
@keyframes badge-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
/* 响应式 */
@media (max-width: 768px) {
.year-cycle-cards { grid-template-columns: 1fr; }
.bazi-pillar-grid { grid-template-columns: repeat(2, 1fr); }
.dayun-timeline { grid-template-columns: repeat(3, 1fr); }
.bazi-pillar .bp-stem .char,
.bazi-pillar .bp-branch .char { font-size: 32px; }
}
/* ========= 全站背景:Aesop 大师工坊风(暖灰 + 深绿 + 古铜)========= */
/* 后台所有页面共用,登录页用 rusheng-bg 不受影响 */
body.app-default {
background:
radial-gradient(at 8% 5%, #8B9D80 0%, transparent 35%), /* 左上 苔藓绿 */
radial-gradient(at 95% 8%, #C9897A 0%, transparent 32%), /* 右上 古铜霜 */
radial-gradient(at 22% 92%, #B47148 0%, transparent 35%), /* 左下 老赭色 */
radial-gradient(at 82% 78%, #9A9159 0%, transparent 30%), /* 右下 苔金 */
linear-gradient(135deg, #F5EDE0 0%, #E8DDD0 50%, #DDD0BD 100%);
background-attachment: fixed;
min-height: 100vh;
color: #2D2418;
}
/* 工具栏标题 / 页脚 / 文字保持深沉墨色 */
body.app-default .page-heading,
body.app-default #kt_app_toolbar h1,
body.app-default .text-gray-900,
body.app-default .app-footer .text-gray-900,
body.app-default .app-footer a {
color: #2D2418 !important;
}
body.app-default .app-footer .text-muted,
body.app-default #kt_app_toolbar .text-muted {
color: #6B5D4A !important;
}
/* 主内容区透明,让背景透出来 */
body.app-default #kt_app_main,
body.app-default .app-main,
body.app-default #kt_app_content,
body.app-default .app-content,
body.app-default #kt_app_toolbar,
body.app-default .app-toolbar {
background: transparent !important;
}
/* 顶部 header 暖玻璃磨砂 */
body.app-default #kt_app_header {
background: rgba(245, 237, 224, 0.7) !important;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(180, 113, 72, 0.15);
}
/* ========= 侧边栏:精致版 ========= */
body.app-default #kt_app_sidebar {
background:
linear-gradient(180deg, rgba(245, 237, 224, 0.85) 0%, rgba(232, 221, 208, 0.82) 100%) !important;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-right: 1px solid rgba(180, 113, 72, 0.18);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
}
/* logo 区 — 加底部装饰线 */
body.app-default #kt_app_sidebar_logo {
padding: 22px 22px 18px !important;
border-bottom: 1px solid rgba(180, 113, 72, 0.12);
position: relative;
}
body.app-default #kt_app_sidebar_logo::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: linear-gradient(90deg, transparent, #B47148, transparent);
border-radius: 2px;
}
/* 分组小标题 */
body.app-default #kt_app_sidebar .menu-section {
font-size: 9.5px;
font-weight: 800;
color: #B47148;
letter-spacing: 5px;
text-transform: uppercase;
padding: 18px 14px 8px;
opacity: 0.85;
display: flex;
align-items: center;
gap: 8px;
}
body.app-default #kt_app_sidebar .menu-section::before,
body.app-default #kt_app_sidebar .menu-section::after {
content: '';
flex: 1;
height: 1px;
background: rgba(180, 113, 72, 0.22);
}
body.app-default #kt_app_sidebar .menu-section:first-child {
padding-top: 14px;
}
/* 菜单项 — 默认态 */
body.app-default #kt_app_sidebar .menu-item {
margin: 3px 6px;
}
body.app-default #kt_app_sidebar .menu-link {
color: #6B5D4A !important;
padding: 11px 14px !important;
border-radius: 12px !important;
font-weight: 600 !important;
letter-spacing: 1px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid transparent;
}
/* hover 态 */
body.app-default #kt_app_sidebar .menu-link:hover {
color: #2D2418 !important;
background: linear-gradient(90deg, rgba(63, 79, 63, 0.08), rgba(63, 79, 63, 0.02)) !important;
transform: translateX(3px);
}
body.app-default #kt_app_sidebar .menu-link:hover .menu-icon i {
color: #3F4F3F !important;
transform: scale(1.08);
}
/* active 态 — 焦点态 */
body.app-default #kt_app_sidebar .menu-link.Active {
color: #2D2418 !important;
background: linear-gradient(135deg, rgba(180, 113, 72, 0.15) 0%, rgba(180, 113, 72, 0.04) 100%) !important;
border: 1px solid rgba(180, 113, 72, 0.22);
box-shadow:
0 1px 2px rgba(180, 113, 72, 0.08),
0 4px 12px rgba(180, 113, 72, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
font-weight: 800 !important;
}
body.app-default #kt_app_sidebar .menu-link.Active::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 22px;
background: linear-gradient(180deg, #C9897A, #B47148);
border-radius: 2px;
box-shadow: 0 0 12px rgba(180, 113, 72, 0.55);
}
/* 图标 */
body.app-default #kt_app_sidebar .menu-icon {
width: 24px;
margin-right: 8px;
transition: all 0.25s;
}
body.app-default #kt_app_sidebar .menu-icon i {
color: #5C7A5A !important;
transition: all 0.25s;
font-size: 18px !important;
}
body.app-default #kt_app_sidebar .menu-link.Active .menu-icon i {
color: #B47148 !important;
transform: scale(1.1);
text-shadow: 0 0 16px rgba(180, 113, 72, 0.4);
}
/* 菜单标题字 */
body.app-default #kt_app_sidebar .menu-title {
font-size: 14px;
letter-spacing: 1.5px;
}
/* ===== 底部 footer 卡 ===== */
.app-sidebar-footer {
margin: 12px;
padding: 12px 14px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(252, 248, 240, 0.45));
border: 1px solid rgba(180, 113, 72, 0.18);
border-radius: 14px;
display: flex;
align-items: center;
gap: 10px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 16px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
}
.app-sidebar-footer .asf-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
background: #B47148;
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 6px rgba(180, 113, 72, 0.25);
flex-shrink: 0;
}
.app-sidebar-footer .asf-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-sidebar-footer .asf-info {
flex: 1;
min-width: 0;
}
.app-sidebar-footer .asf-name {
font-size: 13px;
font-weight: 800;
color: #2D2418;
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-sidebar-footer .asf-role {
font-size: 10px;
color: #8C7A60;
font-weight: 600;
letter-spacing: 1px;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-sidebar-footer .asf-logout {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #B47148;
background: rgba(180, 113, 72, 0.08);
transition: all 0.2s;
flex-shrink: 0;
}
.app-sidebar-footer .asf-logout:hover {
background: linear-gradient(135deg, #B47148, #8C5230);
color: white;
transform: rotate(-8deg) scale(1.05);
box-shadow: 0 4px 12px rgba(180, 113, 72, 0.35);
}
/* 页脚 footer 也透明化 */
body.app-default #kt_app_footer,
body.app-default .app-footer {
background: transparent !important;
}
/* 所有卡片 — 暖白瓷质 + 柔阴影 */
body.app-default .card {
background: rgba(252, 248, 240, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(180, 113, 72, 0.12);
box-shadow: 0 6px 28px rgba(45, 36, 24, 0.08);
border-radius: 14px;
transition: box-shadow 0.2s, transform 0.2s;
}
body.app-default .card:hover {
box-shadow: 0 10px 40px rgba(45, 36, 24, 0.14);
}
/* Aesop 风:主按钮换深绿系 */
body.app-default .btn-primary {
background: linear-gradient(135deg, #3F4F3F 0%, #2D3A2D 100%) !important;
border: 0 !important;
color: #F5EDE0 !important;
box-shadow: 0 4px 12px rgba(63, 79, 63, 0.25);
letter-spacing: 1px;
}
body.app-default .btn-primary:hover {
background: linear-gradient(135deg, #2D3A2D 0%, #1F2A1F 100%) !important;
box-shadow: 0 6px 18px rgba(63, 79, 63, 0.35);
}
/* 副按钮古铜系 */
body.app-default .btn-light-primary {
background: rgba(180, 113, 72, 0.12) !important;
color: #B47148 !important;
border: 0 !important;
}
body.app-default .btn-light-primary:hover {
background: rgba(180, 113, 72, 0.2) !important;
color: #8C5230 !important;
}
/* 链接颜色统一为深绿 */
body.app-default a:not(.menu-link):not(.btn) {
color: #3F4F3F;
}
body.app-default a:not(.menu-link):not(.btn):hover {
color: #B47148;
}
/* ========= 深度报告页样式 ========= */
.report-cover {
border: 2px solid rgba(180, 113, 72, 0.18) !important;
box-shadow: 0 8px 36px rgba(45, 36, 24, 0.12) !important;
}
.report-cover .py-12 { padding-top: 60px; padding-bottom: 60px; }
.report-section .card-header {
background: linear-gradient(90deg, rgba(63, 79, 63, 0.06), transparent);
border-bottom: 1px solid rgba(180, 113, 72, 0.12);
}
.report-section .card-title .card-label {
letter-spacing: 1px;
}
.report-sub {
padding: 16px 20px;
background: rgba(252, 248, 240, 0.55);
border-left: 3px solid #3F4F3F;
border-radius: 8px;
margin-bottom: 14px;
}
.report-subhead {
font-weight: 700;
color: #B47148;
font-size: 16px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.report-body {
color: #2D2418;
font-size: 15px;
line-height: 1.7;
}
.report-action {
background: linear-gradient(135deg, rgba(63, 79, 63, 0.08), rgba(154, 145, 89, 0.08));
border: 1px solid rgba(63, 79, 63, 0.15);
border-radius: 12px;
padding: 18px 22px;
margin-top: 24px;
}
.report-action-head {
font-weight: 700;
color: #3F4F3F;
font-size: 15px;
letter-spacing: 1px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.report-action-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.report-action-list li {
position: relative;
padding: 6px 0 6px 24px;
color: #2D2418;
font-size: 14px;
line-height: 1.6;
}
.report-action-list li::before {
content: '◆';
position: absolute;
left: 0;
color: #B47148;
font-size: 10px;
top: 10px;
}
.report-warning {
background: rgba(202, 138, 4, 0.08);
border: 1px solid rgba(202, 138, 4, 0.2);
border-radius: 10px;
padding: 12px 16px;
color: #92660B;
font-size: 14px;
display: flex;
align-items: center;
}
/* 终章总结 */
.report-summary .summary-row {
display: flex;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px dashed rgba(180, 113, 72, 0.18);
}
.report-summary .summary-row:last-child { border-bottom: 0; }
.report-summary .summary-label {
flex: 0 0 130px;
font-weight: 700;
color: #3F4F3F;
font-size: 15px;
letter-spacing: 1px;
}
.report-summary .summary-value {
flex: 1;
color: #2D2418;
font-size: 15px;
line-height: 1.65;
}
/* 7 天计划网格 */
.seven-day-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
}
.seven-day-card {
background: linear-gradient(180deg, #FCF8F0, #F5EDE0);
border: 1px solid rgba(180, 113, 72, 0.15);
border-radius: 12px;
padding: 14px 12px;
transition: transform 0.2s, box-shadow 0.2s;
}
.seven-day-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(45, 36, 24, 0.12);
}
.seven-day-card .sd-day {
background: #3F4F3F;
color: #F5EDE0;
display: inline-block;
padding: 3px 10px;
border-radius: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 8px;
}
.seven-day-card .sd-title {
font-weight: 700;
color: #B47148;
font-size: 14px;
margin-bottom: 8px;
}
.seven-day-card .sd-task {
color: #2D2418;
font-size: 12px;
line-height: 1.5;
margin-bottom: 8px;
}
.seven-day-card .sd-q {
color: #6B5D4A;
font-size: 11px;
line-height: 1.5;
font-style: italic;
border-top: 1px dashed rgba(180, 113, 72, 0.2);
padding-top: 6px;
}
@media (max-width: 992px) {
.seven-day-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
.seven-day-grid { grid-template-columns: repeat(2, 1fr); }
.report-summary .summary-row { flex-direction: column; }
.report-summary .summary-label { flex: none; margin-bottom: 6px; }
}
/* ========= 十神详情模态框 ========= */
.god-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 15, 20, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.god-modal-overlay.is-open {
background: rgba(15, 15, 20, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 1;
pointer-events: auto;
}
.god-modal {
background: linear-gradient(180deg, #FCF8F0, #F5EDE0);
width: 100%;
max-width: 560px;
max-height: 88vh;
overflow-y: auto;
border-radius: 24px;
box-shadow:
0 0 0 1px rgba(180, 113, 72, 0.15),
0 24px 80px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: scale(0.92) translateY(20px);
opacity: 0;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.god-modal-overlay.is-open .god-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
.god-modal-close {
position: absolute;
top: 16px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
backdrop-filter: blur(8px);
font-weight: 300;
}
.god-modal-close:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.1) rotate(90deg);
}
.god-modal-header {
padding: 32px 28px 24px;
color: white;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.god-modal-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
.gm-code {
background: rgba(255, 255, 255, 0.25);
padding: 4px 14px;
border-radius: 16px;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6px);
}
.gm-name {
font-size: 40px;
font-weight: 800;
letter-spacing: 4px;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
line-height: 1.1;
}
.gm-cat {
font-size: 12px;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 3px 12px;
border-radius: 12px;
letter-spacing: 1px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.god-modal-body {
padding: 24px 28px 32px;
}
.gm-short {
text-align: center;
font-size: 15px;
color: #6B5D4A;
font-style: italic;
margin-bottom: 22px;
padding: 14px 18px;
background: rgba(180, 113, 72, 0.08);
border-radius: 12px;
line-height: 1.6;
}
.gm-traits { margin-bottom: 20px; }
.gm-trait {
display: flex;
gap: 14px;
padding: 14px 0;
align-items: flex-start;
border-bottom: 1px dashed rgba(180, 113, 72, 0.15);
}
.gm-trait:last-child { border-bottom: 0; }
.gm-trait-num {
background: linear-gradient(135deg, #3F4F3F, #2D3A2D);
color: #F5EDE0;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(63, 79, 63, 0.3);
}
.gm-trait-title {
font-weight: 800;
color: #B47148;
font-size: 15px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.gm-trait-detail {
font-size: 13.5px;
color: #2D2418;
line-height: 1.7;
}
.gm-summary {
background: linear-gradient(135deg, rgba(63, 79, 63, 0.08), rgba(180, 113, 72, 0.08));
border-left: 4px solid #3F4F3F;
padding: 16px 18px;
border-radius: 0 12px 12px 0;
font-size: 13.5px;
color: #2D2418;
line-height: 1.75;
margin-top: 20px;
}
.gm-summary-label {
background: #3F4F3F;
color: #F5EDE0;
font-size: 10px;
padding: 3px 10px;
border-radius: 10px;
margin-right: 8px;
font-weight: 800;
letter-spacing: 3px;
vertical-align: middle;
display: inline-block;
}
.gm-mine {
margin-top: 20px;
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.gm-tag {
padding: 5px 14px;
border-radius: 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.gm-tag.tag-ext { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; }
.gm-tag.tag-int { background: linear-gradient(135deg, #A855F7, #7C3AED); color: white; }
.gm-tag.tag-count { background: rgba(63, 79, 63, 0.12); color: #3F4F3F; }
@media (max-width: 576px) {
.gm-name { font-size: 32px; }
.god-modal-header { padding: 26px 20px 20px; }
.god-modal-body { padding: 20px; }
}
/* ========= 调频法 4 卡精致版 ========= */
.freq-section-title {
text-align: center;
margin: 40px 0 24px;
color: #2D2418;
font-weight: 800;
letter-spacing: 4px;
font-size: 22px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.freq-section-title::before,
.freq-section-title::after {
content: '';
display: inline-block;
width: 28px;
height: 1px;
background: linear-gradient(90deg, transparent, #B47148, transparent);
}
.freq-section-title .fst-sub {
font-size: 11px;
color: #8C7A60;
font-weight: 500;
letter-spacing: 1px;
}
.freq-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 40px;
}
@media (max-width: 992px) {
.freq-cards-grid { grid-template-columns: 1fr; }
}
.freq-card {
background: linear-gradient(180deg, #FCF8F0, #F5EDE0);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 28px rgba(45, 36, 24, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(180, 113, 72, 0.12);
}
.freq-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 16px 44px rgba(45, 36, 24, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* ===== Header ===== */
.freq-header {
padding: 22px 24px;
display: flex;
align-items: center;
gap: 16px;
position: relative;
color: #2D2418;
border-bottom: 1px solid rgba(180, 113, 72, 0.08);
}
.freq-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: rgba(180, 113, 72, 0.4);
border-radius: 2px;
}
.fh-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #2D2418;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
flex-shrink: 0;
}
.fh-text { flex: 1; }
.fh-name {
font-size: 20px;
font-weight: 800;
letter-spacing: 3px;
color: #2D2418;
line-height: 1.1;
}
.fh-sub {
font-size: 11px;
color: rgba(0, 0, 0, 0.45);
margin-top: 4px;
letter-spacing: 1px;
font-weight: 500;
}
/* ===== Hero 五行 ===== */
.freq-hero {
padding: 24px 24px 20px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.fh-elem {
width: 88px;
height: 88px;
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
0 12px 28px rgba(0, 0, 0, 0.12),
inset 0 2px 0 rgba(255, 255, 255, 0.25);
flex-shrink: 0;
transition: transform 0.3s;
}
.freq-card:hover .fh-elem {
transform: scale(1.05) rotate(-3deg);
}
.fhe-char {
font-size: 44px;
font-weight: 800;
line-height: 1;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
letter-spacing: 2px;
}
.fhe-de {
font-size: 13px;
font-weight: 700;
margin-top: 4px;
background: rgba(255, 255, 255, 0.25);
padding: 2px 10px;
border-radius: 10px;
letter-spacing: 2px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.fh-elem-meta {
flex: 1;
}
.fhm-cat {
font-size: 10px;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 3px;
font-weight: 700;
margin-bottom: 4px;
}
.fhm-val {
font-size: 18px;
font-weight: 800;
color: #2D2418;
letter-spacing: 2px;
}
/* ===== Body 分组 ===== */
.freq-body {
padding: 16px 20px 24px;
}
.fb-group {
margin-bottom: 18px;
}
.fb-group:last-child { margin-bottom: 0; }
.fb-group-title {
font-size: 10px;
font-weight: 800;
letter-spacing: 4px;
color: #B47148;
text-transform: uppercase;
margin-bottom: 10px;
padding-left: 8px;
border-left: 3px solid #B47148;
line-height: 1;
}
.fb-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.fb-cell {
background: rgba(255, 255, 255, 0.7);
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(180, 113, 72, 0.08);
transition: all 0.2s;
}
.fb-cell:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(180, 113, 72, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(45, 36, 24, 0.06);
}
.fbc-label {
font-size: 11px;
color: rgba(0, 0, 0, 0.5);
font-weight: 600;
letter-spacing: 2px;
}
.fbc-value {
font-size: 14px;
color: #2D2418;
font-weight: 700;
letter-spacing: 1px;
}
/* ===== 颜色色板 ===== */
.fb-color-row {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255, 255, 255, 0.7);
border-radius: 12px;
padding: 12px 14px;
border: 1px solid rgba(180, 113, 72, 0.08);
}
.fbc-swatch {
width: 48px;
height: 48px;
border-radius: 12px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.fbc-color-name {
font-size: 15px;
font-weight: 700;
color: #2D2418;
letter-spacing: 2px;
}
@media (max-width: 576px) {
.freq-header { padding: 18px; }
.fh-name { font-size: 18px; letter-spacing: 2px; }
.freq-hero { padding: 18px; gap: 14px; }
.fh-elem { width: 72px; height: 72px; }
.fhe-char { font-size: 36px; }
.freq-body { padding: 14px 16px 20px; }
.fb-grid { grid-template-columns: 1fr; }
}
/* ====================================================== */
/* ====== 视觉报告页全面美化(Sections 0-9)============== */
/* ====================================================== */
/* ========= 顶部用户头部卡 ========= */
body.app-default .card.mb-5.mb-xl-10:first-of-type {
border-radius: 24px !important;
overflow: hidden;
position: relative;
}
body.app-default .card.mb-5.mb-xl-10:first-of-type::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #B47148, #D4A464, #B47148, transparent);
}
/* 头部 4 个四柱徽章 — 重新设计 */
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 248, 240, 0.7)) !important;
border: 1px solid rgba(180, 113, 72, 0.18);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 12px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-radius: 16px !important;
padding: 12px 16px !important;
min-width: 88px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column:hover {
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 20px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(180, 113, 72, 0.32);
}
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column .text-muted {
font-size: 9px !important;
color: #8C7A60 !important;
letter-spacing: 3px !important;
font-weight: 700;
margin-bottom: 4px;
}
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column .fs-3 {
font-size: 26px !important;
font-weight: 800 !important;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif !important;
color: #2D2418 !important;
letter-spacing: 2px;
line-height: 1 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 三得标识 — 更精致 */
body.app-default .card-body .d-flex.gap-2.mt-3 img {
height: 60px !important;
transition: all 0.3s;
filter: drop-shadow(0 2px 6px rgba(45, 36, 24, 0.15));
}
body.app-default .card-body .d-flex.gap-2.mt-3 img:hover {
transform: translateY(-3px) scale(1.05);
filter: drop-shadow(0 6px 12px rgba(45, 36, 24, 0.25));
}
/* 头像 ring 装饰 */
body.app-default .symbol.symbol-100px.symbol-lg-160px {
position: relative;
}
body.app-default .symbol.symbol-100px.symbol-lg-160px::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: linear-gradient(135deg, #B47148, #C9897A, #B47148);
z-index: -1;
opacity: 0.7;
}
body.app-default .symbol.symbol-100px.symbol-lg-160px img {
border: 4px solid rgba(252, 248, 240, 1);
border-radius: 50%;
box-shadow: 0 4px 16px rgba(45, 36, 24, 0.12);
}
/* 姓名 typography */
body.app-default .text-gray-900.fs-2.fw-bold {
font-size: 32px !important;
letter-spacing: 2px !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #2D2418 0%, #6B5D4A 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
/* ========= 所有 card 章节统一头部修饰 ========= */
body.app-default .card .card-header {
padding-top: 24px !important;
padding-bottom: 16px !important;
position: relative;
border-bottom: 1px solid rgba(180, 113, 72, 0.08);
}
body.app-default .card .card-header .card-label.fw-bold.text-gray-900 {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: 3px;
color: #2D2418 !important;
position: relative;
padding-left: 14px;
display: inline-block;
}
body.app-default .card .card-header .card-label.fw-bold.text-gray-900::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 22px;
background: linear-gradient(180deg, #C9897A, #B47148);
border-radius: 2px;
box-shadow: 0 0 8px rgba(180, 113, 72, 0.35);
}
/* ========= 元神特质卡(Section 2)优化 ========= */
body.app-default .card-body p {
line-height: 1.85;
margin-bottom: 14px;
}
body.app-default .card-body p > b {
color: #B47148;
font-weight: 800;
letter-spacing: 1px;
}
/* 警告/缺点提示 */
body.app-default .notice.bg-light-warning {
border-radius: 12px !important;
border: 1px solid rgba(202, 138, 4, 0.25) !important;
background: linear-gradient(135deg, rgba(254, 243, 199, 0.55), rgba(254, 243, 199, 0.25)) !important;
padding: 14px 18px !important;
box-shadow: 0 1px 3px rgba(202, 138, 4, 0.08);
}
body.app-default .notice.bg-light-warning .text-gray-700,
body.app-default .notice.bg-light-warning .text-gray-900 {
font-size: 14px;
line-height: 1.65;
}
body.app-default .notice.bg-light-warning b { color: #92660B; font-weight: 800; }
/* 总结/star 提示 */
body.app-default .notice.bg-light-primary {
border-radius: 12px !important;
border: 1px solid rgba(63, 79, 63, 0.2) !important;
background: linear-gradient(135deg, rgba(63, 79, 63, 0.08), rgba(180, 113, 72, 0.06)) !important;
padding: 16px 20px !important;
box-shadow: 0 1px 3px rgba(63, 79, 63, 0.06);
}
body.app-default .notice.bg-light-primary .text-gray-900 {
line-height: 1.75;
color: #2D2418 !important;
}
body.app-default .notice.bg-light-primary b { color: #3F4F3F; font-weight: 800; letter-spacing: 1px; }
/* ========= 元神分析长文(Section 3)优化 ========= */
/* 3 段交替排列的 .row */
body.app-default #kt_app_content_container > .card .row.g-5.g-xl-10 {
align-items: center;
background: rgba(252, 248, 240, 0.35);
border-radius: 16px;
padding: 12px;
margin-bottom: 24px !important;
border: 1px solid rgba(180, 113, 72, 0.08);
transition: all 0.3s;
}
body.app-default #kt_app_content_container > .card .row.g-5.g-xl-10:hover {
background: rgba(252, 248, 240, 0.6);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45, 36, 24, 0.08);
}
/* 图片做圆角 */
body.app-default .card-body img[src*="img/analysis/"],
body.app-default .card-body img[src*="img/gene-map/"][src*=".jpg"] {
border-radius: 14px;
box-shadow:
0 4px 14px rgba(45, 36, 24, 0.15),
0 8px 24px rgba(45, 36, 24, 0.1);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.app-default .card-body img[src*="img/analysis/"]:hover {
transform: scale(1.02);
}
/* 段落 b 加粗标题 */
body.app-default .card-body div[style*="font-size:16px"] > b,
body.app-default .card-body div[style*="display:flex"] b {
color: #2D2418;
font-size: 17px;
font-weight: 800;
letter-spacing: 1px;
display: block;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 2px solid rgba(180, 113, 72, 0.25);
}
/* ========= 元神心性卡(Section 1)的图片背景治理 ========= */
body.app-default .card-body.bgi-no-repeat.bgi-size-cover {
border-radius: 12px;
margin: 6px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
position: relative;
overflow: hidden;
}
body.app-default .card-body.bgi-no-repeat.bgi-size-cover::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
pointer-events: none;
}
/* ========= 元神型态详表(Section 3 底部的绿表)========= */
body.app-default .card-body div.rounded[style*="max-width:800px"] {
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.05),
0 8px 28px rgba(45, 36, 24, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
border-radius: 16px !important;
padding: 8px;
background: linear-gradient(180deg, #FCF8F0 0%, #F5EDE0 100%) !important;
border: 1px solid rgba(180, 113, 72, 0.18) !important;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table {
border-spacing: 4px;
border-collapse: separate;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr td {
border: 0 !important;
padding: 10px 14px !important;
transition: background 0.2s;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr:first-child td {
background: transparent !important;
}
/* 左侧标签列 */
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr td:first-child {
background: linear-gradient(135deg, rgba(63, 79, 63, 0.12), rgba(63, 79, 63, 0.06)) !important;
border-radius: 10px;
font-weight: 800;
color: #3F4F3F !important;
letter-spacing: 3px;
text-align: center;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr td:not(:first-child):not([colspan]) {
background: rgba(255, 255, 255, 0.75) !important;
border-radius: 10px;
color: #2D2418 !important;
line-height: 1.75;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr:hover td:not(:first-child):not([colspan]) {
background: rgba(255, 255, 255, 0.95) !important;
}
/* 顶部图标 + 徽章 */
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr:first-child img {
filter: drop-shadow(0 4px 10px rgba(45, 36, 24, 0.15));
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr:first-child .badge {
font-size: 16px !important;
padding: 10px 22px !important;
border-radius: 14px !important;
letter-spacing: 2px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ========= 外在/内在人格双圆(Section 4+5)优化 ========= */
body.app-default .card-body[style*="text-align:center"] .symbol.symbol-100px.symbol-circle {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
body.app-default .card-body[style*="text-align:center"] .symbol.symbol-100px.symbol-circle:hover {
transform: translateY(-3px) scale(1.05);
}
body.app-default .card-body[style*="text-align:center"] .symbol.symbol-100px.symbol-circle .symbol-label {
border-radius: 50%;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.18),
0 12px 32px rgba(0, 0, 0, 0.12),
inset 0 2px 0 rgba(255, 255, 255, 0.25);
border: 2px solid rgba(255, 255, 255, 0.25);
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-size: 28px !important;
letter-spacing: 2px;
}
/* 之间的连接装饰 */
body.app-default .card-body[style*="text-align:center"] .text-center:first-child {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
body.app-default .card-body[style*="text-align:center"] .text-center:first-child::after {
display: none;
}
body.app-default .card-body[style*="text-align:center"] .text-center.pt-5 {
margin-top: 18px !important;
padding: 12px 16px;
background: rgba(252, 248, 240, 0.55);
border-radius: 12px;
border-left: 3px solid #B47148;
text-align: left !important;
}
body.app-default .card-body[style*="text-align:center"] .text-center.pt-5 .text-gray-900.fs-4 {
font-size: 14px !important;
color: #2D2418 !important;
line-height: 1.6;
letter-spacing: 0.5px;
}
/* ========= 外在/内在人格分析(Section 6+8)优化 ========= */
body.app-default .card .card-body > div > p[style*="b"] + p,
body.app-default .card .card-body > div[style*="font-size:16px"] > p {
padding: 12px 16px;
background: rgba(252, 248, 240, 0.5);
border-radius: 10px;
margin-bottom: 10px;
border-left: 3px solid rgba(180, 113, 72, 0.35);
transition: all 0.2s;
}
body.app-default .card .card-body > div[style*="font-size:16px"] > p:hover {
background: rgba(252, 248, 240, 0.85);
border-left-color: #B47148;
transform: translateX(2px);
}
body.app-default .card .card-body > div[style*="font-size:16px"] > p > b {
color: #2D2418;
font-size: 15.5px;
font-weight: 800;
letter-spacing: 1px;
display: block;
margin-bottom: 4px;
}
/* ========= 五行能量分布(Section 3 类)========= */
body.app-default .progress {
border-radius: 12px !important;
overflow: hidden;
background: rgba(45, 36, 24, 0.04) !important;
box-shadow: inset 0 1px 2px rgba(45, 36, 24, 0.06);
}
body.app-default .progress .progress-bar {
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 4px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========= 造运报告 — 奢侈手记版 ========= */
/* ===== 封面 ===== */
.action-cover {
border: 1px solid rgba(180, 113, 72, 0.2) !important;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 16px 60px rgba(180, 113, 72, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
background: linear-gradient(180deg, #FCF8F0 0%, #F5EDE0 100%) !important;
position: relative;
overflow: hidden;
border-radius: 28px !important;
}
.action-cover::before {
content: '';
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 2px;
background: linear-gradient(90deg, transparent, #B47148, #D4A464, #B47148, transparent);
}
.action-cover::after {
content: '◆';
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
color: rgba(180, 113, 72, 0.4);
font-size: 14px;
}
.action-cover .py-12 { padding: 70px 24px 56px !important; }
.action-cover .card-body { position: relative; }
.action-cover .card-body::before {
content: '';
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: rgba(180, 113, 72, 0.5);
letter-spacing: 8px;
font-weight: 700;
}
.action-cover .fs-3 {
font-size: 13px !important;
color: #B47148 !important;
letter-spacing: 8px !important;
font-weight: 700;
text-transform: uppercase;
}
.action-cover .fs-2hx {
font-size: 56px !important;
margin: 14px 0 16px !important;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif !important;
letter-spacing: 6px !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
line-height: 1.15;
}
.action-cover .fs-5 {
font-size: 13px !important;
color: #6B5D4A !important;
letter-spacing: 4px !important;
margin-top: 16px !important;
padding: 8px 24px;
display: inline-block;
border-top: 1px solid rgba(180, 113, 72, 0.2);
border-bottom: 1px solid rgba(180, 113, 72, 0.2);
background: rgba(255, 255, 255, 0.45);
}
/* ===== 章节卡片 — 顺序编号水印 ===== */
.action-section {
border-radius: 22px !important;
overflow: hidden;
border: 1px solid rgba(180, 113, 72, 0.15) !important;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 12px 36px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
position: relative;
}
.action-section .card-header {
background: linear-gradient(90deg, rgba(180, 113, 72, 0.08) 0%, transparent 60%) !important;
border-bottom: 1px solid rgba(180, 113, 72, 0.12);
padding: 26px 28px 18px !important;
position: relative;
}
.action-section .card-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 28px;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #B47148, #D4A464);
border-radius: 2px;
}
.action-section .card-header .card-label {
font-size: 20px !important;
letter-spacing: 4px !important;
padding-left: 0 !important;
}
.action-section .card-header .card-label::before { display: none !important; }
.action-section .card-body {
padding: 28px 32px 32px !important;
}
/* ===== 04 大标题(十二大造运系统)===== */
.action-section-title {
text-align: center;
margin: 44px 0 28px;
color: #2D2418;
font-weight: 800;
letter-spacing: 6px;
font-size: 24px;
position: relative;
padding: 16px 0;
}
.action-section-title::before,
.action-section-title::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, #B47148, transparent);
}
.action-section-title::before { top: 0; }
.action-section-title::after { bottom: 0; }
/* ===== 01 开场 — 致客户的信 ===== */
.action-opening {
font-size: 16px;
line-height: 2;
color: #2D2418;
padding: 32px 40px;
background:
linear-gradient(135deg, rgba(180, 113, 72, 0.04), rgba(63, 79, 63, 0.04)),
rgba(252, 248, 240, 0.6);
border-radius: 14px;
letter-spacing: 0.6px;
position: relative;
text-align: justify;
}
.action-opening::before {
content: '"';
position: absolute;
top: 4px;
left: 16px;
font-size: 80px;
color: rgba(180, 113, 72, 0.15);
font-family: 'Georgia', serif;
line-height: 1;
font-weight: 700;
}
.action-opening::after {
content: '"';
position: absolute;
bottom: -32px;
right: 16px;
font-size: 80px;
color: rgba(180, 113, 72, 0.15);
font-family: 'Georgia', serif;
line-height: 1;
font-weight: 700;
}
@media (max-width: 576px) {
.action-opening { padding: 24px 20px; font-size: 14.5px; }
}
/* ===== 02 核心结构 grid ===== */
.core-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 768px) { .core-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .core-grid { grid-template-columns: 1fr; } }
.cg-cell {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 248, 240, 0.75));
border: 1px solid rgba(180, 113, 72, 0.14);
border-radius: 14px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.cg-cell::before {
content: '';
position: absolute;
top: 14px;
left: 0;
width: 3px;
height: 14px;
background: linear-gradient(180deg, #C9897A, #B47148);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 0.2s;
}
.cg-cell:hover {
transform: translateY(-2px);
border-color: rgba(180, 113, 72, 0.28);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 22px rgba(45, 36, 24, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.cg-cell:hover::before { opacity: 1; }
.cg-label {
font-size: 10px;
color: #B47148;
font-weight: 800;
letter-spacing: 3px;
}
.cg-value {
font-size: 15px;
font-weight: 800;
color: #2D2418;
letter-spacing: 0.5px;
}
.cg-yong { color: #3F4F3F; font-size: 22px; font-family: 'Ma Shan Zheng', serif; letter-spacing: 4px; }
.cg-xi { color: #1565C0; font-size: 22px; font-family: 'Ma Shan Zheng', serif; letter-spacing: 4px; }
.cg-ji { color: #C62828; font-size: 22px; font-family: 'Ma Shan Zheng', serif; letter-spacing: 4px; }
.cg-chou { color: #92660B; font-size: 22px; font-family: 'Ma Shan Zheng', serif; letter-spacing: 4px; }
/* ===== 03 优先 3 大系统 — 奖牌设计 ===== */
.top3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 768px) { .top3-grid { grid-template-columns: 1fr; } }
.top3-card {
background: linear-gradient(180deg, #FCF8F0 0%, #F5EDE0 100%);
border-radius: 20px;
padding: 24px 22px;
border: 1px solid rgba(180, 113, 72, 0.18);
position: relative;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 18px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.top3-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--rank-color, #B47148);
}
.top3-card::after {
content: attr(data-rank);
position: absolute;
top: 18px;
right: 18px;
font-size: 88px;
font-weight: 900;
color: rgba(180, 113, 72, 0.06);
line-height: 1;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
letter-spacing: -4px;
}
.top3-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 16px 42px rgba(45, 36, 24, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.top3-rank-1 { --rank-color: linear-gradient(90deg, #C62828, #B91C1C); }
.top3-rank-2 { --rank-color: linear-gradient(90deg, #B47148, #D4A464); }
.top3-rank-3 { --rank-color: linear-gradient(90deg, #8B9D80, #5C7A5A); }
.top3-rank-1 { position: relative; }
.top3-rank-1::before { background: linear-gradient(90deg, #C62828, #B91C1C); }
.top3-rank-2::before { background: linear-gradient(90deg, #B47148, #D4A464); }
.top3-rank-3::before { background: linear-gradient(90deg, #8B9D80, #5C7A5A); }
.t3-rank-badge {
background: linear-gradient(135deg, rgba(180, 113, 72, 0.18), rgba(180, 113, 72, 0.08));
color: #8C5230;
font-size: 10px;
font-weight: 800;
padding: 5px 14px;
border-radius: 14px;
letter-spacing: 3px;
display: inline-block;
margin-bottom: 14px;
border: 1px solid rgba(180, 113, 72, 0.25);
position: relative;
z-index: 2;
}
.t3-name {
font-size: 26px;
font-weight: 800;
color: #2D2418;
letter-spacing: 3px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(180, 113, 72, 0.22);
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
position: relative;
z-index: 2;
}
.t3-reason, .t3-risk, .t3-reward {
font-size: 13px;
line-height: 1.7;
color: #2D2418;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
.t3-l {
display: inline-block;
background: linear-gradient(135deg, #3F4F3F, #2D3A2D);
color: #F5EDE0;
font-size: 10px;
padding: 2px 10px;
border-radius: 10px;
font-weight: 800;
letter-spacing: 2px;
margin-right: 8px;
box-shadow: 0 2px 4px rgba(63, 79, 63, 0.25);
}
/* ===== 04 十二大系统卡片 ===== */
.action-sys {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.action-sys::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #B47148, #D4A464, #B47148, transparent);
z-index: 1;
opacity: 0.6;
}
.action-sys:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 20px 50px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.action-sys .card-header .card-label {
font-size: 22px !important;
background: linear-gradient(135deg, #2D2418 0%, #B47148 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 4px !important;
}
.sys-core {
background: linear-gradient(135deg, rgba(180, 113, 72, 0.08), rgba(180, 113, 72, 0.02));
border-left: 4px solid #B47148;
padding: 18px 24px;
border-radius: 0 12px 12px 0;
font-size: 14.5px;
color: #2D2418;
line-height: 1.85;
margin-bottom: 22px;
font-style: italic;
letter-spacing: 0.5px;
position: relative;
}
.sys-core::before {
content: '"';
position: absolute;
top: 4px;
left: 12px;
font-size: 40px;
color: rgba(180, 113, 72, 0.25);
font-family: 'Georgia', serif;
line-height: 1;
}
.sys-subs { display: grid; gap: 10px; margin-bottom: 16px; }
.sys-sub {
background: rgba(252, 248, 240, 0.5);
border: 1px solid rgba(180, 113, 72, 0.1);
border-radius: 10px;
padding: 12px 16px;
transition: all 0.2s;
}
.sys-sub:hover { background: rgba(252, 248, 240, 0.85); border-color: rgba(180, 113, 72, 0.2); }
.ss-h {
font-weight: 800;
color: #B47148;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.ss-b {
font-size: 13.5px;
color: #2D2418;
line-height: 1.7;
}
.sys-actions {
background: linear-gradient(135deg, rgba(63, 79, 63, 0.08), rgba(154, 145, 89, 0.06));
border: 1px solid rgba(63, 79, 63, 0.15);
border-radius: 12px;
padding: 16px 20px;
}
.sa-head {
font-weight: 800;
color: #3F4F3F;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.sys-actions ul {
list-style: none;
padding-left: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 16px;
}
@media (max-width: 576px) { .sys-actions ul { grid-template-columns: 1fr; } }
.sys-actions li {
position: relative;
padding: 4px 0 4px 22px;
font-size: 13px;
color: #2D2418;
line-height: 1.55;
}
.sys-actions li::before {
content: '✓';
position: absolute;
left: 0;
top: 4px;
color: #3F4F3F;
font-weight: 800;
font-size: 13px;
}
.sys-risk {
margin-top: 14px;
padding: 10px 14px;
background: rgba(202, 138, 4, 0.08);
border: 1px solid rgba(202, 138, 4, 0.2);
border-radius: 10px;
font-size: 13px;
color: #92660B;
display: flex;
align-items: flex-start;
}
/* 九宫飞星 — 3×3 方位盘 */
.flying-stars { margin-top: 28px; }
.flying-stars .fs-title {
font-weight: 800;
color: #2D2418;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 16px;
padding-left: 12px;
border-left: 3px solid var(--c-jade-500, #5C8A6E);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.flying-stars .fs-subtitle {
font-size: 11px;
color: var(--c-ink-500, #5B6473);
font-weight: 600;
letter-spacing: 1px;
background: rgba(92, 138, 110, 0.08);
padding: 3px 12px;
border-radius: 12px;
border: 1px solid rgba(92, 138, 110, 0.2);
}
/* ===== 3×3 方位盘 ===== */
.fs-3x3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 760px;
margin: 0 auto;
padding: 14px;
background: linear-gradient(135deg, rgba(247, 249, 250, 0.6), rgba(255, 255, 255, 0.4));
border-radius: 18px;
border: 1px solid var(--c-ink-100, #EBEEF2);
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.03),
0 6px 18px rgba(20, 24, 29, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
position: relative;
}
/* 罗盘装饰圈(可选)*/
.fs-3x3::before {
content: 'S 南';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 12px;
font-size: 10px;
font-weight: 800;
color: var(--c-accent, #C8473E);
letter-spacing: 2px;
}
.fs-3x3::after {
content: 'N 北';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 12px;
font-size: 10px;
font-weight: 800;
color: var(--c-jade-700, #355A42);
letter-spacing: 2px;
}
.fs3-cell {
background: linear-gradient(180deg, white, #FAFBFC);
border: 1px solid var(--c-ink-100, #EBEEF2);
border-radius: 12px;
padding: 12px 10px 10px;
text-align: center;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: help;
position: relative;
overflow: hidden;
min-height: 130px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.fs3-cell:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 8px 22px rgba(20, 24, 29, 0.12);
z-index: 2;
}
/* 顶部小色条 — 吉 / 凶 */
.fs3-cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
}
.fs3-cell.is-good::before {
background: linear-gradient(90deg, var(--c-jade-400, #7CAB8E), var(--c-jade-600, #4A7359));
}
.fs3-cell.is-bad::before {
background: linear-gradient(90deg, var(--c-accent, #C8473E), #A03830);
}
/* 中宫 — 主角光环 */
.fs3-cell.is-center {
background:
radial-gradient(at 50% 0%, rgba(184, 149, 64, 0.18), transparent 60%),
linear-gradient(180deg, #FFFEF7, #FAF6E8);
border: 2px solid rgba(184, 149, 64, 0.45);
box-shadow:
0 0 0 4px rgba(184, 149, 64, 0.1),
0 8px 24px rgba(184, 149, 64, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
animation: fs3-pulse 3s ease-in-out infinite;
}
@keyframes fs3-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(184, 149, 64, 0.1), 0 8px 24px rgba(184, 149, 64, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
50% { box-shadow: 0 0 0 7px rgba(184, 149, 64, 0.06), 0 12px 32px rgba(184, 149, 64, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
}
.fs3-cell.is-center::before {
background: linear-gradient(90deg, var(--c-gold-400, #D4AF50), var(--c-gold-600, #97772E));
height: 4px;
}
/* 内容 */
.fs3-pos {
font-size: 11px;
font-weight: 800;
color: var(--c-ink-500, #5B6473);
letter-spacing: 4px;
margin-bottom: 4px;
}
.fs3-cell.is-center .fs3-pos {
color: var(--c-gold-600, #97772E);
font-size: 12px;
}
.fs3-num {
font-size: 28px;
font-weight: 900;
line-height: 1;
color: var(--c-ink-900, #14181D);
font-family: 'Inter', sans-serif;
margin: 2px 0;
}
.fs3-cell.is-good .fs3-num {
background: linear-gradient(180deg, var(--c-jade-500, #5C8A6E), var(--c-jade-700, #355A42));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fs3-cell.is-bad .fs3-num {
background: linear-gradient(180deg, var(--c-accent, #C8473E), #A03830);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fs3-cell.is-center .fs3-num {
font-size: 36px;
background: linear-gradient(180deg, var(--c-gold-400, #D4AF50), var(--c-gold-600, #97772E));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 8px rgba(184, 149, 64, 0.2);
}
.fs3-name {
font-size: 11px;
font-weight: 700;
color: var(--c-ink-700, #2F3741);
letter-spacing: 2px;
margin-bottom: 6px;
}
.fs3-y {
font-size: 10px;
color: var(--c-jade-600, #4A7359);
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.fs3-cell.is-bad .fs3-y { color: var(--c-accent, #C8473E); }
.fs3-tip {
font-size: 10px;
color: var(--c-ink-400, #7E8896);
line-height: 1.4;
margin-top: 2px;
padding: 0 4px;
}
/* legend */
.fs-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin-top: 14px;
flex-wrap: wrap;
font-size: 11px;
color: var(--c-ink-500, #5B6473);
}
.fs-legend-item { font-weight: 700; letter-spacing: 1px; }
.fs-legend-item.is-good { color: var(--c-jade-600, #4A7359); }
.fs-legend-item.is-bad { color: var(--c-accent, #C8473E); }
.fs-legend-note { font-size: 10px; color: var(--c-ink-400, #7E8896); }
@media (max-width: 576px) {
.fs-3x3 { gap: 6px; padding: 10px; }
.fs3-cell { min-height: 100px; padding: 8px 4px; }
.fs3-num { font-size: 22px; }
.fs3-cell.is-center .fs3-num { font-size: 28px; }
.fs3-tip { font-size: 9px; }
}
/* ===== 05 21 天计划 — 三阶段时间轴 ===== */
.plan21-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
position: relative;
}
@media (max-width: 768px) { .plan21-grid { grid-template-columns: 1fr; } }
.plan21-stage {
background: linear-gradient(180deg, #FCF8F0, #F5EDE0);
border-radius: 20px;
padding: 28px 24px;
border: 1px solid rgba(180, 113, 72, 0.15);
position: relative;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 18px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
overflow: hidden;
}
.plan21-stage::after {
content: attr(data-stage);
position: absolute;
top: 20px;
right: 20px;
font-size: 78px;
font-weight: 900;
color: rgba(180, 113, 72, 0.06);
line-height: 1;
letter-spacing: -4px;
}
.plan21-stage:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 16px 38px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.plan21-stage::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
}
.stage-1::before { background: linear-gradient(90deg, #8B9D80, #5C7A5A); }
.stage-2::before { background: linear-gradient(90deg, #B47148, #D4A464); }
.stage-3::before { background: linear-gradient(90deg, #C62828, #B91C1C); }
.ps-stage-num {
display: inline-block;
background: linear-gradient(135deg, #3F4F3F, #2D3A2D);
color: #F5EDE0;
padding: 4px 14px;
border-radius: 14px;
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
margin-bottom: 14px;
box-shadow: 0 2px 6px rgba(63, 79, 63, 0.3);
position: relative;
z-index: 2;
}
.ps-title {
font-weight: 800;
color: #2D2418;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.ps-goal {
color: #B47148;
font-size: 12px;
margin-bottom: 12px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(180, 113, 72, 0.2);
}
.ps-items { list-style: none; padding: 0; margin: 0; }
.ps-items li {
position: relative;
padding: 5px 0 5px 22px;
font-size: 12.5px;
color: #2D2418;
line-height: 1.55;
}
.ps-items li::before {
content: '◆';
position: absolute;
left: 4px;
color: #B47148;
font-size: 9px;
top: 9px;
}
/* ===== 06 49 天 7 周期 ===== */
.plan49-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 992px) { .plan49-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .plan49-grid { grid-template-columns: 1fr; } }
.plan49-cell {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 248, 240, 0.75));
border-radius: 16px;
padding: 20px 18px;
border: 1px solid rgba(180, 113, 72, 0.14);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.03),
0 4px 12px rgba(45, 36, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.plan49-cell:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 12px 28px rgba(45, 36, 24, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(180, 113, 72, 0.3);
}
.p49-num {
width: 38px;
height: 38px;
background: linear-gradient(135deg, #C9897A 0%, #B47148 50%, #8C5230 100%);
color: #F5EDE0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 15px;
margin-bottom: 12px;
box-shadow:
0 2px 4px rgba(180, 113, 72, 0.25),
0 4px 12px rgba(180, 113, 72, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.p49-title {
font-weight: 800;
color: #2D2418;
font-size: 13px;
margin-bottom: 8px;
letter-spacing: 1px;
}
.p49-items { list-style: none; padding: 0; margin: 0; }
.p49-items li {
padding: 3px 0;
font-size: 12px;
color: #6B5D4A;
line-height: 1.55;
}
.p49-items li::before { content: '·'; margin-right: 6px; color: #B47148; font-weight: 800; }
/* ===== 07 年度策略 — 英雄板块 ===== */
.annual-hero {
background:
radial-gradient(at 0% 0%, rgba(180, 113, 72, 0.35), transparent 50%),
radial-gradient(at 100% 100%, rgba(212, 164, 100, 0.25), transparent 50%),
linear-gradient(135deg, #3F4F3F 0%, #2D3A2D 50%, #1F2A1F 100%);
color: #F5EDE0;
border-radius: 22px;
padding: 40px 32px;
text-align: center;
margin-bottom: 24px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 16px 48px rgba(63, 79, 63, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.annual-hero::before {
content: '';
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 164, 100, 0.55), transparent);
}
.annual-hero::after {
content: '◆';
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
color: rgba(212, 164, 100, 0.55);
font-size: 11px;
}
.ah-year {
font-size: 56px;
font-weight: 900;
letter-spacing: 8px;
line-height: 1;
background: linear-gradient(180deg, #F5EDE0 0%, #D4A464 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Inter', sans-serif;
}
.ah-gz {
font-size: 32px;
margin-top: 12px;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
letter-spacing: 8px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
color: #FCF8F0;
}
.ah-theme {
font-size: 13px;
margin-top: 18px;
background: rgba(212, 164, 100, 0.2);
display: inline-block;
padding: 6px 22px;
border-radius: 18px;
letter-spacing: 5px;
font-weight: 700;
border: 1px solid rgba(212, 164, 100, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-transform: uppercase;
}
.annual-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 768px) { .annual-cols { grid-template-columns: 1fr; } }
.ac-col {
border-radius: 12px;
padding: 16px 18px;
background: rgba(252, 248, 240, 0.6);
}
.ac-good { border-left: 4px solid #059669; background: rgba(5, 150, 105, 0.04); }
.ac-bad { border-left: 4px solid #DC2626; background: rgba(220, 38, 38, 0.04); }
.ac-do { border-left: 4px solid #3F4F3F; background: rgba(63, 79, 63, 0.04); }
.ac-avoid { border-left: 4px solid #92660B; background: rgba(146, 102, 11, 0.04); }
.ac-head {
font-weight: 800;
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.ac-good .ac-head { color: #059669; }
.ac-bad .ac-head { color: #DC2626; }
.ac-do .ac-head { color: #3F4F3F; }
.ac-avoid .ac-head { color: #92660B; }
.ac-col ul { list-style: none; padding: 0; margin: 0; }
.ac-col li {
padding: 4px 0 4px 18px;
position: relative;
font-size: 12.5px;
line-height: 1.6;
color: #2D2418;
}
.ac-col li::before {
content: '◆';
position: absolute;
left: 0;
top: 5px;
font-size: 9px;
color: currentColor;
opacity: 0.7;
}
.ac-good li::before { color: #059669; }
.ac-bad li::before { color: #DC2626; }
.ac-do li::before { color: #3F4F3F; }
.ac-avoid li::before { color: #92660B; }
.annual-env {
margin-top: 16px;
padding: 14px 18px;
background: rgba(180, 113, 72, 0.06);
border: 1px solid rgba(180, 113, 72, 0.18);
border-radius: 10px;
font-size: 13px;
color: #2D2418;
line-height: 1.7;
}
.annual-env strong { color: #B47148; }
/* 08 痛点警示 */
.risk-intro {
text-align: center;
font-style: italic;
color: #6B5D4A;
font-size: 14px;
padding: 12px 16px;
background: rgba(202, 138, 4, 0.08);
border-radius: 10px;
margin-bottom: 18px;
line-height: 1.7;
}
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 768px) { .risk-grid { grid-template-columns: 1fr; } }
.risk-cell {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), rgba(146, 102, 11, 0.04));
border: 1px solid rgba(202, 138, 4, 0.18);
border-radius: 12px;
padding: 14px 18px;
transition: all 0.25s;
}
.risk-cell:hover { transform: translateX(3px); border-color: rgba(202, 138, 4, 0.35); }
.rc-if {
font-weight: 800;
color: #92660B;
font-size: 13.5px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.rc-then {
font-size: 12.5px;
color: #2D2418;
line-height: 1.7;
}
/* ===== 09 最终总结 — 信函封笺 ===== */
.action-final {
background:
radial-gradient(at 100% 0%, rgba(212, 164, 100, 0.15), transparent 50%),
radial-gradient(at 0% 100%, rgba(180, 113, 72, 0.1), transparent 50%),
linear-gradient(135deg, #FCF8F0, #F5EDE0) !important;
border: 1px solid rgba(180, 113, 72, 0.3) !important;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 20px 60px rgba(180, 113, 72, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
position: relative;
overflow: hidden;
}
.action-final::before {
content: '';
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 1px;
background: linear-gradient(90deg, transparent, #B47148, #D4A464, #B47148, transparent);
}
.action-final::after {
content: '◆';
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
color: rgba(180, 113, 72, 0.5);
font-size: 12px;
}
.action-final .card-body { padding: 48px 56px 56px !important; }
.final-text {
font-size: 16px;
line-height: 2.1;
color: #2D2418;
letter-spacing: 0.7px;
padding: 16px 0;
text-align: justify;
position: relative;
}
.final-text::first-letter {
font-size: 48px;
font-family: 'Ma Shan Zheng', serif;
font-weight: 800;
color: #B47148;
float: left;
line-height: 1;
margin: 4px 8px 0 0;
padding: 0 4px;
text-shadow: 0 2px 6px rgba(180, 113, 72, 0.15);
}
@media (max-width: 576px) {
.action-final .card-body { padding: 32px 24px !important; }
.final-text { font-size: 14.5px; line-height: 1.95; }
.final-text::first-letter { font-size: 36px; }
}
/* ====================================================== */
/* ====== 列表页全面美化(staff/appuser/map_*)============= */
/* ====================================================== */
/* 工具栏 / 页面标题 */
body.app-default .page-heading {
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: 4px !important;
color: #2D2418 !important;
position: relative;
padding-left: 18px;
}
body.app-default .page-heading::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 26px;
background: linear-gradient(180deg, #C9897A, #B47148);
border-radius: 3px;
box-shadow: 0 0 12px rgba(180, 113, 72, 0.4);
}
/* ===== 列表 card 容器 ===== */
body.app-default #kt_app_content_container > .card {
border-radius: 22px !important;
overflow: hidden;
border: 1px solid rgba(180, 113, 72, 0.15) !important;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 12px 36px rgba(45, 36, 24, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
background: linear-gradient(180deg, #FCF8F0 0%, #F5EDE0 100%) !important;
}
/* 卡头部 — 搜索 + 新增按钮 */
body.app-default .card-header.border-0.pt-6 {
padding: 28px 32px 18px !important;
flex-wrap: wrap;
gap: 16px;
border-bottom: 1px solid rgba(180, 113, 72, 0.1);
}
/* 搜索框 */
body.app-default input.form-control.form-control-solid[data-staff-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-appuser-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-map-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-mapadd-listing-table-filter] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 248, 240, 0.85)) !important;
border: 1px solid rgba(180, 113, 72, 0.2) !important;
border-radius: 14px !important;
padding: 12px 16px 12px 44px !important;
font-size: 14px !important;
width: 300px !important;
letter-spacing: 1px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.25s;
}
body.app-default input.form-control.form-control-solid[data-staff-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-appuser-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-map-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-mapadd-listing-table-filter]:focus {
background: rgba(255, 255, 255, 1) !important;
border-color: rgba(180, 113, 72, 0.45) !important;
box-shadow:
0 0 0 4px rgba(180, 113, 72, 0.1),
0 4px 12px rgba(45, 36, 24, 0.06);
}
body.app-default .card-title .ki-magnifier {
color: #B47148 !important;
font-size: 16px !important;
margin-left: 16px !important;
}
/* 添加新 X 按钮 */
body.app-default .card-toolbar .btn.btn-md.btn-flex.btn-light-primary {
background: linear-gradient(135deg, #3F4F3F 0%, #2D3A2D 100%) !important;
color: #F5EDE0 !important;
border: 0 !important;
border-radius: 14px !important;
padding: 12px 22px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 2px;
box-shadow:
0 1px 2px rgba(63, 79, 63, 0.1),
0 6px 18px rgba(63, 79, 63, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.app-default .card-toolbar .btn.btn-md.btn-flex.btn-light-primary:hover {
background: linear-gradient(135deg, #2D3A2D, #1F2A1F) !important;
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(63, 79, 63, 0.1),
0 10px 26px rgba(63, 79, 63, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.app-default .card-toolbar .btn.btn-md.btn-flex.btn-light-primary i {
color: #F5EDE0 !important;
margin-right: 6px;
}
/* ===== 表头 ===== */
body.app-default .card-body.pt-0 {
padding: 0 32px 28px !important;
}
body.app-default table.table thead tr {
background: linear-gradient(90deg, rgba(180, 113, 72, 0.08), rgba(180, 113, 72, 0.02));
border: 0;
}
body.app-default table.table thead tr th {
color: #B47148 !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 4px !important;
text-transform: uppercase;
padding: 18px 14px !important;
border-bottom: 1px solid rgba(180, 113, 72, 0.18) !important;
border-top: 0 !important;
}
/* ===== 表行 ===== */
body.app-default table.table tbody tr {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px dashed rgba(180, 113, 72, 0.12);
}
body.app-default table.table tbody tr:last-child { border-bottom: 0; }
body.app-default table.table tbody tr:hover {
background: rgba(180, 113, 72, 0.04) !important;
transform: translateX(2px);
}
body.app-default table.table tbody tr td {
padding: 18px 14px !important;
color: #2D2418 !important;
font-size: 14px !important;
vertical-align: middle;
border: 0 !important;
}
/* 电邮 — 单等宽字体 */
body.app-default table.table tbody tr td:first-child {
font-weight: 600;
color: #6B5D4A !important;
letter-spacing: 0.5px;
}
/* 姓名 — 加粗 */
body.app-default table.table tbody tr td:nth-child(2) {
font-weight: 700;
color: #2D2418 !important;
font-size: 15px !important;
}
/* ===== 状态 badge 升级 ===== */
body.app-default .badge.badge-light-success {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(5, 150, 105, 0.08)) !important;
color: #047857 !important;
border: 1px solid rgba(5, 150, 105, 0.22);
font-weight: 800 !important;
font-size: 11px !important;
padding: 6px 14px !important;
border-radius: 14px !important;
letter-spacing: 2px;
box-shadow: 0 1px 2px rgba(5, 150, 105, 0.08);
}
body.app-default .badge.badge-light-danger {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.06)) !important;
color: #B91C1C !important;
border: 1px solid rgba(220, 38, 38, 0.22);
font-weight: 800 !important;
font-size: 11px !important;
padding: 6px 14px !important;
border-radius: 14px !important;
letter-spacing: 2px;
}
/* ===== 操作按钮组 ===== */
body.app-default table.table tbody td .d-flex {
gap: 4px;
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(180, 113, 72, 0.12) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
margin-right: 0 !important;
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary:hover {
background: linear-gradient(135deg, #B47148, #8C5230) !important;
border-color: transparent !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(180, 113, 72, 0.35);
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary i {
color: #6B5D4A !important;
font-size: 16px !important;
transition: color 0.2s;
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary:hover i {
color: #F5EDE0 !important;
}
/* ===== DataTables 分页 + 信息 ===== */
body.app-default .dataTables_wrapper {
margin-top: 8px;
}
body.app-default .dataTables_info {
color: #6B5D4A !important;
font-size: 12px !important;
letter-spacing: 1px;
padding: 16px 0 0 !important;
}
body.app-default .dataTables_paginate {
padding: 12px 0 0 !important;
}
body.app-default .dataTables_paginate .paginate_button {
background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(180, 113, 72, 0.15) !important;
border-radius: 10px !important;
padding: 6px 14px !important;
font-weight: 700 !important;
font-size: 13px !important;
color: #6B5D4A !important;
margin: 0 3px !important;
transition: all 0.2s;
min-width: 36px;
text-align: center;
}
body.app-default .dataTables_paginate .paginate_button:hover {
background: rgba(180, 113, 72, 0.1) !important;
border-color: rgba(180, 113, 72, 0.3) !important;
color: #B47148 !important;
transform: translateY(-1px);
}
body.app-default .dataTables_paginate .paginate_button.current,
body.app-default .dataTables_paginate .paginate_button.current:hover {
background: linear-gradient(135deg, #B47148, #8C5230) !important;
color: #F5EDE0 !important;
border-color: transparent !important;
box-shadow: 0 4px 12px rgba(180, 113, 72, 0.35);
}
body.app-default .dataTables_paginate .paginate_button.disabled,
body.app-default .dataTables_paginate .paginate_button.disabled:hover {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* ===== 空状态 ===== */
body.app-default .dataTables_empty {
padding: 48px 24px !important;
text-align: center !important;
color: #8C7A60 !important;
font-size: 14px !important;
letter-spacing: 2px;
}
/* 响应式 */
@media (max-width: 768px) {
body.app-default .card-header.border-0.pt-6 { padding: 20px !important; }
body.app-default .card-body.pt-0 { padding: 0 16px 20px !important; }
body.app-default input.form-control.form-control-solid[data-staff-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-appuser-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-map-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-mapadd-listing-table-filter] {
width: 100% !important;
}
body.app-default table.table tbody tr td { padding: 14px 8px !important; font-size: 13px !important; }
}
/* ====================================================== */
/* ========= 🎨 主题:青瓷(Celadon Theme)v2 ============= */
/* ========= 完全覆盖之前的 Aesop 暖色,改冷色玉绿系 ===== */
/* ====================================================== */
:root {
/* 主色板 */
--c-jade-50: #F0F5F2;
--c-jade-100: #DDE9E1;
--c-jade-200: #B8D2C2;
--c-jade-400: #7CAB8E;
--c-jade-500: #5C8A6E; /* 主玉色 */
--c-jade-600: #4A7359;
--c-jade-700: #355A42;
--c-jade-900: #1F2A1F;
--c-gold-300: #E2C679;
--c-gold-400: #D4AF50;
--c-gold-500: #B89540; /* 鎏金 */
--c-gold-600: #97772E;
--c-ink-900: #14181D; /* 浓墨 */
--c-ink-700: #2F3741;
--c-ink-500: #5B6473;
--c-ink-400: #7E8896;
--c-ink-200: #D8DEE5;
--c-ink-100: #EBEEF2;
--c-paper-50: #F7F9FA; /* 月白 */
--c-paper-100:#FAFBFC;
--c-paper-200:#FFFFFF;
--c-accent: #C8473E; /* 朱砂(罕用,关键 CTA)*/
}
/* ===== 整站冷调背景 ===== */
body.app-default {
background:
radial-gradient(at 8% 5%, rgba(124, 171, 142, 0.18) 0%, transparent 30%),
radial-gradient(at 95% 8%, rgba(184, 210, 194, 0.20) 0%, transparent 32%),
radial-gradient(at 22% 92%, rgba(212, 175, 80, 0.10) 0%, transparent 35%),
radial-gradient(at 82% 78%, rgba(124, 171, 142, 0.10) 0%, transparent 30%),
linear-gradient(135deg, #F7F9FA 0%, #EFF3F1 50%, #F5F7F5 100%) !important;
color: var(--c-ink-900) !important;
}
/* 工具栏文字回墨色 */
body.app-default .page-heading,
body.app-default #kt_app_toolbar h1,
body.app-default .text-gray-900 {
color: var(--c-ink-900) !important;
}
body.app-default .page-heading::before {
background: linear-gradient(180deg, var(--c-jade-400), var(--c-jade-600)) !important;
box-shadow: 0 0 12px rgba(92, 138, 110, 0.45) !important;
}
body.app-default .app-footer .text-gray-900,
body.app-default .app-footer a { color: var(--c-ink-700) !important; }
body.app-default .app-footer .text-muted { color: var(--c-ink-400) !important; }
/* ===== 顶部 header — 玻璃磨砂月白 ===== */
body.app-default #kt_app_header {
background: rgba(247, 249, 250, 0.75) !important;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--c-ink-100) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* ===== 侧边栏 — 月白磨砂 ===== */
body.app-default #kt_app_sidebar {
background: rgba(250, 251, 252, 0.85) !important;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border-right: 1px solid var(--c-ink-100) !important;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
body.app-default #kt_app_sidebar_logo {
border-bottom: 1px solid var(--c-ink-100) !important;
}
body.app-default #kt_app_sidebar_logo::after {
background: linear-gradient(90deg, transparent, var(--c-jade-500), transparent) !important;
}
body.app-default #kt_app_sidebar .menu-section {
color: var(--c-jade-600) !important;
}
body.app-default #kt_app_sidebar .menu-section::before,
body.app-default #kt_app_sidebar .menu-section::after {
background: rgba(124, 171, 142, 0.25) !important;
}
body.app-default #kt_app_sidebar .menu-link {
color: var(--c-ink-500) !important;
}
body.app-default #kt_app_sidebar .menu-link:hover {
background: linear-gradient(90deg, rgba(92, 138, 110, 0.08), rgba(92, 138, 110, 0.02)) !important;
color: var(--c-ink-900) !important;
}
body.app-default #kt_app_sidebar .menu-link.Active {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.14) 0%, rgba(92, 138, 110, 0.04) 100%) !important;
border: 1px solid rgba(92, 138, 110, 0.25) !important;
color: var(--c-ink-900) !important;
box-shadow:
0 1px 2px rgba(92, 138, 110, 0.08),
0 4px 12px rgba(92, 138, 110, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.app-default #kt_app_sidebar .menu-link.Active::before {
background: linear-gradient(180deg, var(--c-jade-400), var(--c-jade-600)) !important;
box-shadow: 0 0 12px rgba(92, 138, 110, 0.55) !important;
}
body.app-default #kt_app_sidebar .menu-icon i {
color: var(--c-jade-500) !important;
}
body.app-default #kt_app_sidebar .menu-link.Active .menu-icon i {
color: var(--c-gold-500) !important;
text-shadow: 0 0 16px rgba(184, 149, 64, 0.4) !important;
}
/* 侧边栏底部 footer */
.app-sidebar-footer {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(247, 249, 250, 0.55)) !important;
border: 1px solid rgba(92, 138, 110, 0.18) !important;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 6px 16px rgba(20, 24, 29, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.app-sidebar-footer .asf-avatar {
background: var(--c-jade-500) !important;
}
.app-sidebar-footer .asf-name { color: var(--c-ink-900) !important; }
.app-sidebar-footer .asf-role { color: var(--c-ink-400) !important; }
.app-sidebar-footer .asf-logout {
color: var(--c-jade-600) !important;
background: rgba(92, 138, 110, 0.08) !important;
}
.app-sidebar-footer .asf-logout:hover {
background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(92, 138, 110, 0.35) !important;
}
/* ===== 所有 card — 月白 + 细致阴影 ===== */
body.app-default .card {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--c-ink-100) !important;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 8px 28px rgba(20, 24, 29, 0.06) !important;
border-radius: 18px !important;
transition: box-shadow 0.25s, transform 0.25s;
}
body.app-default .card:hover {
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.05),
0 16px 40px rgba(20, 24, 29, 0.1) !important;
}
/* ===== 主按钮 — 玉绿 ===== */
body.app-default .btn-primary {
background: linear-gradient(135deg, var(--c-jade-500) 0%, var(--c-jade-700) 100%) !important;
color: white !important;
border: 0 !important;
box-shadow: 0 4px 14px rgba(92, 138, 110, 0.3) !important;
letter-spacing: 1.5px;
font-weight: 700;
}
body.app-default .btn-primary:hover {
background: linear-gradient(135deg, var(--c-jade-600), var(--c-jade-900)) !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(92, 138, 110, 0.4) !important;
}
/* 副按钮 — 玉绿浅 */
body.app-default .btn-light-primary {
background: rgba(92, 138, 110, 0.1) !important;
color: var(--c-jade-600) !important;
border: 1px solid rgba(92, 138, 110, 0.15) !important;
font-weight: 600;
}
body.app-default .btn-light-primary:hover {
background: rgba(92, 138, 110, 0.18) !important;
color: var(--c-jade-700) !important;
border-color: rgba(92, 138, 110, 0.3) !important;
}
/* ===== 链接 ===== */
body.app-default a:not(.menu-link):not(.btn) { color: var(--c-jade-600); }
body.app-default a:not(.menu-link):not(.btn):hover { color: var(--c-gold-500); }
/* ===== 列表页 — 月白卡片 + 玉绿 accent ===== */
body.app-default #kt_app_content_container > .card {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid var(--c-ink-100) !important;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 12px 36px rgba(20, 24, 29, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
body.app-default .card-header.border-0.pt-6 {
border-bottom: 1px solid var(--c-ink-100) !important;
}
/* 搜索框 */
body.app-default input.form-control.form-control-solid[data-staff-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-appuser-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-map-listing-table-filter],
body.app-default input.form-control.form-control-solid[data-mapadd-listing-table-filter] {
background: rgba(247, 249, 250, 0.7) !important;
border: 1px solid var(--c-ink-200) !important;
color: var(--c-ink-900) !important;
}
body.app-default input.form-control.form-control-solid[data-staff-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-appuser-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-map-listing-table-filter]:focus,
body.app-default input.form-control.form-control-solid[data-mapadd-listing-table-filter]:focus {
background: white !important;
border-color: var(--c-jade-400) !important;
box-shadow:
0 0 0 4px rgba(124, 171, 142, 0.12),
0 4px 12px rgba(20, 24, 29, 0.06) !important;
}
body.app-default .card-title .ki-magnifier { color: var(--c-jade-500) !important; }
/* 添加按钮 */
body.app-default .card-toolbar .btn.btn-md.btn-flex.btn-light-primary {
background: linear-gradient(135deg, var(--c-jade-500) 0%, var(--c-jade-700) 100%) !important;
color: white !important;
box-shadow:
0 1px 2px rgba(92, 138, 110, 0.1),
0 6px 18px rgba(92, 138, 110, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.app-default .card-toolbar .btn.btn-md.btn-flex.btn-light-primary:hover {
background: linear-gradient(135deg, var(--c-jade-600), var(--c-jade-900)) !important;
box-shadow:
0 1px 2px rgba(92, 138, 110, 0.1),
0 10px 26px rgba(92, 138, 110, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
/* 表头 */
body.app-default table.table thead tr {
background: linear-gradient(90deg, rgba(92, 138, 110, 0.08), rgba(92, 138, 110, 0.02)) !important;
}
body.app-default table.table thead tr th {
color: var(--c-jade-600) !important;
border-bottom: 1px solid rgba(92, 138, 110, 0.2) !important;
}
/* 表行 */
body.app-default table.table tbody tr {
border-bottom: 1px dashed var(--c-ink-100) !important;
}
body.app-default table.table tbody tr:hover {
background: rgba(92, 138, 110, 0.04) !important;
}
body.app-default table.table tbody tr td:first-child { color: var(--c-ink-500) !important; }
body.app-default table.table tbody tr td:nth-child(2) { color: var(--c-ink-900) !important; }
/* 状态 badge — 活跃改玉绿色,停止保持红 */
body.app-default .badge.badge-light-success {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.18), rgba(92, 138, 110, 0.1)) !important;
color: var(--c-jade-700) !important;
border: 1px solid rgba(92, 138, 110, 0.28) !important;
}
/* 操作按钮 */
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary {
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid var(--c-ink-100) !important;
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary:hover {
background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important;
border-color: transparent !important;
box-shadow: 0 4px 12px rgba(92, 138, 110, 0.35) !important;
}
body.app-default table.table tbody td .btn.btn-icon.btn-active-light-primary i {
color: var(--c-ink-500) !important;
}
/* 分页 */
body.app-default .dataTables_paginate .paginate_button {
background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid var(--c-ink-100) !important;
color: var(--c-ink-500) !important;
}
body.app-default .dataTables_paginate .paginate_button:hover {
background: rgba(92, 138, 110, 0.1) !important;
border-color: rgba(92, 138, 110, 0.3) !important;
color: var(--c-jade-600) !important;
}
body.app-default .dataTables_paginate .paginate_button.current,
body.app-default .dataTables_paginate .paginate_button.current:hover {
background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(92, 138, 110, 0.35) !important;
}
body.app-default .dataTables_info { color: var(--c-ink-500) !important; }
/* ===== 报告页(知命 / 造运)— 章节卡 jade accent ===== */
body.app-default .card .card-header .card-label.fw-bold.text-gray-900 {
color: var(--c-ink-900) !important;
}
body.app-default .card .card-header .card-label.fw-bold.text-gray-900::before {
background: linear-gradient(180deg, var(--c-jade-400), var(--c-jade-600)) !important;
box-shadow: 0 0 8px rgba(92, 138, 110, 0.35) !important;
}
/* 报告子段 — 月白 + 玉绿 accent */
.report-sub {
background: rgba(247, 249, 250, 0.7) !important;
border-left: 3px solid var(--c-jade-500) !important;
}
.report-subhead { color: var(--c-jade-600) !important; }
.report-action {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.08), rgba(212, 175, 80, 0.06)) !important;
border: 1px solid rgba(92, 138, 110, 0.18) !important;
}
.report-action-head { color: var(--c-jade-700) !important; }
.report-action-list li::before { color: var(--c-gold-500) !important; }
.report-summary .summary-label { color: var(--c-jade-700) !important; }
.report-summary .summary-row { border-bottom: 1px dashed var(--c-ink-100) !important; }
/* 7 天卡片 */
.seven-day-card {
background: linear-gradient(180deg, white, var(--c-jade-50)) !important;
border: 1px solid var(--c-ink-100) !important;
}
.seven-day-card .sd-day { background: var(--c-jade-600) !important; color: white !important; }
.seven-day-card .sd-title { color: var(--c-jade-600) !important; }
/* ===== 造运报告 jade 重涂 ===== */
.action-cover { background: linear-gradient(180deg, white 0%, var(--c-paper-50) 100%) !important; border: 1px solid var(--c-ink-100) !important; }
.action-cover::before { background: linear-gradient(90deg, transparent, var(--c-jade-500), var(--c-gold-400), var(--c-jade-500), transparent) !important; }
.action-cover::after { color: rgba(184, 149, 64, 0.55) !important; }
.action-cover .fs-3 { color: var(--c-jade-600) !important; }
.action-cover .fs-2hx {
background: linear-gradient(135deg, var(--c-ink-900) 0%, var(--c-jade-600) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.action-cover .fs-5 {
color: var(--c-ink-500) !important;
border-color: rgba(92, 138, 110, 0.25) !important;
background: rgba(247, 249, 250, 0.7) !important;
}
.action-section .card-header { background: linear-gradient(90deg, rgba(92, 138, 110, 0.08), transparent) !important; border-bottom: 1px solid var(--c-ink-100) !important; }
.action-section .card-header::after { background: linear-gradient(90deg, var(--c-jade-500), var(--c-gold-400)) !important; }
.action-section-title { color: var(--c-ink-900) !important; }
.action-section-title::before,
.action-section-title::after { background: linear-gradient(90deg, transparent, var(--c-jade-500), transparent) !important; }
.action-opening { background: linear-gradient(135deg, rgba(92, 138, 110, 0.05), rgba(212, 175, 80, 0.04)), rgba(255, 255, 255, 0.6) !important; }
.action-opening::before, .action-opening::after { color: rgba(92, 138, 110, 0.18) !important; }
.cg-cell { background: linear-gradient(180deg, white, var(--c-jade-50)) !important; border: 1px solid var(--c-ink-100) !important; }
.cg-cell::before { background: linear-gradient(180deg, var(--c-jade-400), var(--c-jade-600)) !important; }
.cg-label { color: var(--c-jade-600) !important; }
.top3-card { background: linear-gradient(180deg, white, var(--c-paper-50)) !important; border: 1px solid var(--c-ink-100) !important; }
.top3-card::after { color: rgba(92, 138, 110, 0.08) !important; }
.top3-rank-1::before { background: linear-gradient(90deg, var(--c-accent), #A03830) !important; }
.top3-rank-2::before { background: linear-gradient(90deg, var(--c-gold-400), var(--c-gold-600)) !important; }
.top3-rank-3::before { background: linear-gradient(90deg, var(--c-jade-400), var(--c-jade-600)) !important; }
.t3-rank-badge { background: linear-gradient(135deg, rgba(92, 138, 110, 0.16), rgba(92, 138, 110, 0.06)) !important; color: var(--c-jade-700) !important; border: 1px solid rgba(92, 138, 110, 0.25) !important; }
.t3-l { background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important; }
.action-sys::before { background: linear-gradient(90deg, transparent, var(--c-jade-500), var(--c-gold-400), var(--c-jade-500), transparent) !important; }
.action-sys .card-header .card-label {
background: linear-gradient(135deg, var(--c-ink-900) 0%, var(--c-jade-600) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.sys-core { background: linear-gradient(135deg, rgba(92, 138, 110, 0.08), rgba(92, 138, 110, 0.02)) !important; border-left: 4px solid var(--c-jade-500) !important; }
.sys-core::before { color: rgba(92, 138, 110, 0.25) !important; }
.sys-sub { background: rgba(247, 249, 250, 0.55) !important; border: 1px solid var(--c-ink-100) !important; }
.sys-sub:hover { background: rgba(247, 249, 250, 0.95) !important; border-color: rgba(92, 138, 110, 0.18) !important; }
.ss-h { color: var(--c-jade-600) !important; }
.sys-actions { background: linear-gradient(135deg, rgba(92, 138, 110, 0.08), rgba(212, 175, 80, 0.05)) !important; border: 1px solid rgba(92, 138, 110, 0.18) !important; }
.sa-head { color: var(--c-jade-700) !important; }
.sys-actions li::before { color: var(--c-jade-600) !important; }
.flying-stars .fs-title { color: var(--c-jade-700) !important; border-left: 3px solid var(--c-jade-500) !important; }
.flying-stars .fs-cell { background: rgba(247, 249, 250, 0.6) !important; border: 1px solid var(--c-ink-100) !important; }
.flying-stars .fs-code { background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important; }
.flying-stars .fs-body strong { color: var(--c-jade-600) !important; }
.plan21-stage { background: linear-gradient(180deg, white, var(--c-jade-50)) !important; border: 1px solid var(--c-ink-100) !important; }
.plan21-stage::after { color: rgba(92, 138, 110, 0.08) !important; }
.stage-1::before { background: linear-gradient(90deg, var(--c-jade-400), var(--c-jade-600)) !important; }
.stage-2::before { background: linear-gradient(90deg, var(--c-gold-400), var(--c-gold-600)) !important; }
.stage-3::before { background: linear-gradient(90deg, var(--c-accent), #A03830) !important; }
.ps-stage-num { background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important; }
.ps-goal { color: var(--c-jade-600) !important; border-bottom: 1px dashed rgba(92, 138, 110, 0.22) !important; }
.ps-items li::before { color: var(--c-jade-500) !important; }
.plan49-cell { background: linear-gradient(180deg, white, var(--c-paper-50)) !important; border: 1px solid var(--c-ink-100) !important; }
.p49-num { background: linear-gradient(135deg, var(--c-gold-300), var(--c-gold-500)) !important; }
.p49-items li::before { color: var(--c-jade-500) !important; }
.annual-hero {
background:
radial-gradient(at 0% 0%, rgba(212, 175, 80, 0.35), transparent 50%),
radial-gradient(at 100% 100%, rgba(124, 171, 142, 0.25), transparent 50%),
linear-gradient(135deg, var(--c-jade-700) 0%, var(--c-jade-900) 50%, var(--c-ink-900) 100%) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 16px 48px rgba(31, 42, 31, 0.4) !important;
}
.annual-hero::before { background: linear-gradient(90deg, transparent, rgba(226, 198, 121, 0.55), transparent) !important; }
.annual-hero::after { color: rgba(226, 198, 121, 0.55) !important; }
.ah-year { background: linear-gradient(180deg, white 0%, var(--c-gold-400) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ah-theme { background: rgba(212, 175, 80, 0.22) !important; border: 1px solid rgba(212, 175, 80, 0.4) !important; }
.ac-good { border-left: 4px solid var(--c-jade-600) !important; background: rgba(92, 138, 110, 0.05) !important; }
.ac-bad { border-left: 4px solid var(--c-accent) !important; background: rgba(200, 71, 62, 0.05) !important; }
.ac-do { border-left: 4px solid var(--c-jade-700) !important; background: rgba(53, 90, 66, 0.05) !important; }
.ac-avoid { border-left: 4px solid var(--c-gold-600) !important; background: rgba(151, 119, 46, 0.05) !important; }
.ac-good .ac-head { color: var(--c-jade-700) !important; }
.ac-bad .ac-head { color: var(--c-accent) !important; }
.ac-do .ac-head { color: var(--c-jade-700) !important; }
.ac-avoid .ac-head { color: var(--c-gold-600) !important; }
.annual-env { background: rgba(92, 138, 110, 0.06) !important; border: 1px solid rgba(92, 138, 110, 0.2) !important; }
.annual-env strong { color: var(--c-jade-700) !important; }
.risk-intro { background: rgba(200, 71, 62, 0.06) !important; color: var(--c-ink-700) !important; }
.risk-cell { background: linear-gradient(135deg, rgba(200, 71, 62, 0.04), rgba(151, 119, 46, 0.04)) !important; border: 1px solid rgba(200, 71, 62, 0.2) !important; }
.rc-if { color: var(--c-accent) !important; }
.action-final {
background:
radial-gradient(at 100% 0%, rgba(212, 175, 80, 0.15), transparent 50%),
radial-gradient(at 0% 100%, rgba(92, 138, 110, 0.1), transparent 50%),
linear-gradient(135deg, white, var(--c-jade-50)) !important;
border: 1px solid rgba(92, 138, 110, 0.25) !important;
box-shadow: 0 12px 36px rgba(92, 138, 110, 0.15) !important;
}
.action-final::before { background: linear-gradient(90deg, transparent, var(--c-jade-500), var(--c-gold-400), var(--c-jade-500), transparent) !important; }
.action-final::after { color: rgba(92, 138, 110, 0.5) !important; }
.final-text::first-letter { color: var(--c-jade-600) !important; }
/* ===== 五行能量/四柱徽章/四宫位 — 保留五行色,只改边框 ===== */
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 250, 0.75)) !important;
border: 1px solid var(--c-ink-100) !important;
}
body.app-default .badge.badge-light-primary.p-3.d-flex.flex-column .text-muted {
color: var(--c-jade-600) !important;
}
/* 头像 ring */
body.app-default .symbol.symbol-100px.symbol-lg-160px::before {
background: linear-gradient(135deg, var(--c-jade-400), var(--c-gold-400), var(--c-jade-400)) !important;
}
/* 报告封面 */
.report-cover {
border: 2px solid rgba(92, 138, 110, 0.2) !important;
box-shadow: 0 8px 36px rgba(92, 138, 110, 0.12) !important;
}
/* 报告章节 — 子标题色 */
body.app-default .card-body p > b { color: var(--c-jade-600) !important; }
/* 警告/总结 chip 重涂 */
body.app-default .notice.bg-light-primary {
border: 1px solid rgba(92, 138, 110, 0.22) !important;
background: linear-gradient(135deg, rgba(92, 138, 110, 0.08), rgba(212, 175, 80, 0.06)) !important;
}
body.app-default .notice.bg-light-primary b { color: var(--c-jade-700) !important; }
/* 元神型态详表 */
body.app-default .card-body div.rounded[style*="max-width:800px"] {
background: linear-gradient(180deg, white 0%, var(--c-paper-50) 100%) !important;
border: 1px solid var(--c-ink-100) !important;
}
body.app-default .card-body div.rounded[style*="max-width:800px"] table tr td:first-child {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.14), rgba(92, 138, 110, 0.06)) !important;
color: var(--c-jade-700) !important;
}
/* 双圆人格中间描述 */
body.app-default .card-body[style*="text-align:center"] .text-center.pt-5 {
background: rgba(247, 249, 250, 0.7) !important;
border-left: 3px solid var(--c-jade-500) !important;
}
/* 外/内人格分析段落 */
body.app-default .card .card-body > div[style*="font-size:16px"] > p {
background: rgba(247, 249, 250, 0.65) !important;
border-left: 3px solid rgba(92, 138, 110, 0.4) !important;
}
body.app-default .card .card-body > div[style*="font-size:16px"] > p:hover {
background: rgba(247, 249, 250, 0.95) !important;
border-left-color: var(--c-jade-500) !important;
}
/* 调频法表头 — 用 jade 主色 + 多角彩头(保留 4 类区分)*/
.freq-card { background: linear-gradient(180deg, white, var(--c-paper-50)) !important; border: 1px solid var(--c-ink-100) !important; }
.freq-header { border-bottom: 1px solid var(--c-ink-100) !important; }
.freq-header::after { background: rgba(92, 138, 110, 0.4) !important; }
.fb-group-title { color: var(--c-jade-600) !important; border-left: 3px solid var(--c-jade-500) !important; }
.fb-cell { background: rgba(247, 249, 250, 0.6) !important; border: 1px solid var(--c-ink-100) !important; }
.fb-cell:hover { background: white !important; border-color: rgba(92, 138, 110, 0.22) !important; }
.fb-color-row { background: rgba(247, 249, 250, 0.6) !important; border: 1px solid var(--c-ink-100) !important; }
/* 十神判读小卡 */
.shishen-cheatsheet {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.07), rgba(212, 175, 80, 0.05)) !important;
border: 1px solid rgba(92, 138, 110, 0.2) !important;
}
.shishen-cheatsheet .cs-title { color: var(--c-jade-700) !important; }
.shishen-cheatsheet .cs-label { background: var(--c-jade-700) !important; }
/* 十神详情模态框 */
.god-modal { background: linear-gradient(180deg, white, var(--c-paper-50)) !important; box-shadow: 0 0 0 1px var(--c-ink-100), 0 24px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; }
.gm-trait-num { background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700)) !important; box-shadow: 0 2px 6px rgba(92, 138, 110, 0.3) !important; }
.gm-trait-title { color: var(--c-jade-600) !important; }
.gm-summary { background: linear-gradient(135deg, rgba(92, 138, 110, 0.08), rgba(212, 175, 80, 0.06)) !important; border-left: 4px solid var(--c-jade-500) !important; }
.gm-summary-label { background: var(--c-jade-700) !important; }
/* ====================================================== */
/* ========= 私人定制名片(报告页头部 hero card)========= */
/* ====================================================== */
.user-hero-card {
background:
radial-gradient(at 0% 0%, rgba(124, 171, 142, 0.12), transparent 50%),
radial-gradient(at 100% 100%, rgba(212, 175, 80, 0.1), transparent 50%),
linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
border: 1px solid var(--c-ink-100);
border-radius: 24px;
margin-bottom: 28px;
padding: 36px 40px;
position: relative;
overflow: hidden;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 16px 48px rgba(20, 24, 29, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* 顶部金线 */
.user-hero-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--c-jade-500), var(--c-gold-400), var(--c-jade-500), transparent);
opacity: 0.7;
}
/* 装饰背景纹路 — 极淡 */
.user-hero-card .uhc-bg-deco {
position: absolute;
top: -40px;
right: -40px;
width: 240px;
height: 240px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(92, 138, 110, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.user-hero-card::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 175, 80, 0.06) 0%, transparent 60%);
pointer-events: none;
}
/* 右上角印章 */
.uhc-seal {
position: absolute;
top: 20px;
right: 24px;
background: linear-gradient(135deg, var(--c-gold-400), var(--c-gold-600));
color: white;
font-size: 10px;
font-weight: 800;
letter-spacing: 3px;
padding: 5px 14px;
border-radius: 14px;
box-shadow:
0 2px 6px rgba(184, 149, 64, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
z-index: 2;
}
/* 主体 layout */
.uhc-body {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.uhc-left {
display: flex;
align-items: center;
gap: 28px;
flex: 1;
min-width: 280px;
}
/* ===== 头像 + 双层环 ===== */
.uhc-avatar-wrap {
position: relative;
width: 120px;
height: 120px;
flex-shrink: 0;
}
.uhc-avatar-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--c-jade-500),
var(--c-gold-400),
var(--c-jade-600),
var(--c-gold-500),
var(--c-jade-500)
);
animation: ring-rotate 18s linear infinite;
opacity: 0.75;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
.uhc-avatar {
position: absolute;
inset: 4px;
border-radius: 50%;
overflow: hidden;
background: white;
border: 3px solid white;
box-shadow:
0 4px 14px rgba(20, 24, 29, 0.1),
0 8px 24px rgba(20, 24, 29, 0.08);
}
.uhc-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uhc-avatar-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-gold-400);
border: 2px solid white;
box-shadow: 0 2px 4px rgba(184, 149, 64, 0.4);
z-index: 2;
}
.uhc-avatar-dot-tl { top: 4px; left: 4px; }
.uhc-avatar-dot-br { bottom: 4px; right: 4px; background: var(--c-jade-500); }
/* ===== 信息区 ===== */
.uhc-info { flex: 1; min-width: 0; }
.uhc-tag {
display: inline-block;
background: linear-gradient(135deg, rgba(184, 149, 64, 0.15), rgba(184, 149, 64, 0.05));
color: var(--c-gold-600);
font-size: 10px;
font-weight: 800;
letter-spacing: 4px;
padding: 4px 12px;
border-radius: 12px;
border: 1px solid rgba(184, 149, 64, 0.25);
margin-bottom: 10px;
}
.uhc-name {
font-size: 38px;
font-weight: 800;
letter-spacing: 4px;
color: var(--c-ink-900);
margin: 0 0 12px 0;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
line-height: 1.1;
background: linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-jade-700) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 2px rgba(20, 24, 29, 0.05);
}
.uhc-meta {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 16px;
color: var(--c-ink-500);
font-size: 13px;
font-weight: 600;
}
.uhc-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
letter-spacing: 0.5px;
}
.uhc-meta-item i {
color: var(--c-jade-500);
}
.uhc-meta-dot {
color: var(--c-ink-200);
font-weight: 800;
}
/* ===== 4 柱徽章 — 升级 ===== */
.uhc-pillars {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.uhc-pillar {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(180deg, white, var(--c-paper-50));
border: 1px solid var(--c-ink-100);
border-radius: 14px;
padding: 10px 16px 12px;
min-width: 72px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.03),
0 4px 12px rgba(20, 24, 29, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
}
.uhc-pillar:hover {
transform: translateY(-3px);
border-color: rgba(92, 138, 110, 0.3);
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 8px 20px rgba(92, 138, 110, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.uhc-pillar.is-day {
background: linear-gradient(180deg, rgba(124, 171, 142, 0.12), rgba(92, 138, 110, 0.04));
border-color: rgba(92, 138, 110, 0.4);
box-shadow:
0 1px 2px rgba(92, 138, 110, 0.08),
0 6px 18px rgba(92, 138, 110, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.uhc-pillar.is-day::after {
content: '';
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 3px;
background: linear-gradient(90deg, var(--c-jade-500), var(--c-jade-700));
border-radius: 0 0 3px 3px;
}
.uhc-pillar-label {
font-size: 10px;
font-weight: 700;
color: var(--c-jade-600);
letter-spacing: 2px;
margin-bottom: 3px;
}
.uhc-pillar.is-day .uhc-pillar-label {
color: var(--c-jade-700);
}
.uhc-pillar-gz {
font-size: 22px;
font-weight: 800;
color: var(--c-ink-900);
letter-spacing: 1px;
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
line-height: 1;
}
/* ===== 右侧操作按钮 ===== */
.uhc-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.uhc-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 20px 10px;
background: linear-gradient(180deg, white, var(--c-paper-50));
border: 1px solid var(--c-ink-100);
border-radius: 14px;
color: var(--c-ink-700);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 76px;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
font-family: inherit;
}
.uhc-btn:hover {
background: linear-gradient(135deg, var(--c-jade-500), var(--c-jade-700));
color: white !important;
border-color: transparent;
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(92, 138, 110, 0.1),
0 8px 18px rgba(92, 138, 110, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
text-decoration: none;
}
.uhc-btn i { color: var(--c-jade-500); transition: color 0.2s; font-size: 18px !important; }
.uhc-btn:hover i { color: white; }
.uhc-btn span { font-size: 12px; }
/* 响应式 */
@media (max-width: 768px) {
.user-hero-card { padding: 28px 24px; }
.uhc-name { font-size: 30px; letter-spacing: 3px; }
.uhc-avatar-wrap { width: 90px; height: 90px; }
.uhc-left { gap: 20px; }
.uhc-pillar { min-width: 60px; padding: 8px 12px 10px; }
.uhc-pillar-gz { font-size: 18px; }
.uhc-seal { top: 14px; right: 14px; font-size: 9px; padding: 4px 10px; }
.uhc-actions { width: 100%; }
.uhc-btn { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
.uhc-body { flex-direction: column; align-items: stretch; }
.uhc-actions { justify-content: space-between; }
}
/* ====================================================== */
/* ====== 造运报告 — 视觉魔法 v2(水墨/印章/金沙)========= */
/* ====================================================== */
/* ===== 全屏漂浮金沙(只在造运报告页可见)===== */
.floating-gold-sand {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.fgs-dot {
position: absolute;
left: var(--x);
top: var(--y);
width: 4px;
height: 4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 175, 80, 0.85), rgba(184, 149, 64, 0.1));
box-shadow: 0 0 10px rgba(212, 175, 80, 0.6);
animation: fgs-twinkle var(--s, 4s) ease-in-out infinite;
animation-delay: var(--d, 0s);
opacity: 0;
}
@keyframes fgs-twinkle {
0%, 100% { opacity: 0; transform: scale(0.6) translate(0, 0); }
50% { opacity: 0.8; transform: scale(1.4) translate(4px, -8px); }
}
/* ===== 水墨纹理底层(极淡云纹)===== */
.action-page-ink-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
background-image:
radial-gradient(at 20% 30%, rgba(92, 138, 110, 0.04) 0%, transparent 35%),
radial-gradient(at 80% 70%, rgba(184, 149, 64, 0.04) 0%, transparent 35%),
radial-gradient(at 50% 50%, rgba(180, 113, 72, 0.025) 0%, transparent 40%);
}
/* 内容确保在装饰之上 */
#kt_app_content_container { position: relative; z-index: 2; }
/* ===== 水墨笔触章节分隔 ===== */
.ink-divider {
position: relative;
z-index: 2;
margin: 56px auto 32px;
text-align: center;
max-width: 720px;
padding: 0 20px;
}
.ink-divider svg {
display: block;
width: 100%;
max-width: 600px;
height: 30px;
margin: 0 auto;
filter: drop-shadow(0 1px 2px rgba(180, 113, 72, 0.18));
}
.ink-divider-label {
display: inline-block;
margin-top: 8px;
font-family: 'Noto Serif SC', 'Ma Shan Zheng', serif;
font-size: 13px;
font-weight: 700;
color: var(--c-ink-500, #5B6473);
letter-spacing: 8px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
padding: 4px 18px;
border-radius: 14px;
border: 1px solid rgba(180, 113, 72, 0.15);
}
/* ===== 动态金边 — Hero 封面 ===== */
.action-hero-cover {
background-clip: padding-box;
}
.action-hero-cover::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 28px;
padding: 1px;
background: linear-gradient(135deg,
rgba(212, 175, 80, 0.65) 0%,
rgba(92, 138, 110, 0.4) 25%,
rgba(212, 175, 80, 0.65) 50%,
rgba(180, 113, 72, 0.45) 75%,
rgba(212, 175, 80, 0.65) 100%);
background-size: 300% 300%;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: gold-border-flow 12s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes gold-border-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===== 动态金边 — Final 总结卡 ===== */
.action-final {
position: relative;
}
.action-final::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 18px;
padding: 1.5px;
background: linear-gradient(135deg,
rgba(212, 175, 80, 0.5) 0%,
rgba(92, 138, 110, 0.3) 33%,
rgba(180, 113, 72, 0.4) 66%,
rgba(212, 175, 80, 0.5) 100%);
background-size: 200% 200%;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: gold-border-flow 14s linear infinite;
pointer-events: none;
z-index: 1;
}
/* ===== 红色印章 + 报告元信息 ===== */
.final-seal-row {
margin-top: 40px;
padding-top: 32px;
border-top: 1px dashed rgba(180, 113, 72, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.final-seal {
width: 100px;
height: 100px;
background:
radial-gradient(circle, rgba(200, 71, 62, 0.95), rgba(160, 56, 48, 1));
border: 3px solid #A03830;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-6deg);
box-shadow:
0 4px 14px rgba(200, 71, 62, 0.4),
inset 0 0 0 2px rgba(255, 255, 255, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
flex-shrink: 0;
transition: transform 0.3s;
}
.final-seal:hover { transform: rotate(0deg) scale(1.05); }
.final-seal::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 8px;
}
.final-seal .fs-text {
color: #FFFEF7;
font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
font-size: 18px;
font-weight: 900;
letter-spacing: 2px;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.18),
0 0 4px rgba(0, 0, 0, 0.18);
text-align: center;
line-height: 1.2;
}
.final-seal-meta { flex: 1; min-width: 200px; }
.fsm-line {
font-size: 12px;
color: var(--c-ink-500, #5B6473);
letter-spacing: 2px;
line-height: 1.9;
font-family: 'Noto Serif SC', serif;
}
.fsm-line::before {
content: '·';
color: var(--c-gold-500, #B89540);
font-weight: 800;
margin-right: 4px;
}
/* ===== Drop cap 升级 ===== */
.final-text {
text-indent: 1em;
}
.final-text::first-letter {
font-size: 58px !important;
line-height: 0.9 !important;
margin: 2px 8px 0 0 !important;
background: linear-gradient(180deg, #B89540, #97772E);
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow: none !important;
}
/* 第一段后的段落首字也用 drop cap */
.action-opening::first-letter {
font-size: 52px;
font-family: 'Ma Shan Zheng', serif;
font-weight: 800;
float: left;
line-height: 0.9;
margin: 4px 8px 0 0;
color: var(--c-jade-600, #4A7359);
background: linear-gradient(180deg, #5C8A6E, #355A42);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ===== Top3 / 计划卡的 stagger 升级 ===== */
.top3-grid .top3-card.reveal-on-scroll { transform: translateY(36px); }
.top3-grid .top3-card.reveal-on-scroll.is-visible { transform: translateY(0); }
/* ===== 章节卡入场后的 subtle gold shine 扫光(只在视口内首次)===== */
.action-section.is-visible::before {
animation: gold-shine 1.8s ease-out 0.3s 1;
}
@keyframes gold-shine {
0% { opacity: 0; transform: translateX(-50%); }
50% { opacity: 1.5; }
100% { opacity: 1; transform: translateX(0); }
}
/* ===== 卡片悬停增加微 3D ===== */
.action-section, .top3-card, .plan21-stage, .plan49-cell {
transform-style: preserve-3d;
perspective: 1000px;
}
.action-section:hover {
transform: translateY(-3px) rotateX(0.3deg);
}
/* ===== 响应式 ===== */
@media (max-width: 768px) {
.final-seal { width: 80px; height: 80px; }
.final-seal .fs-text { font-size: 15px; }
.ink-divider svg { height: 22px; }
.ink-divider-label { font-size: 11px; letter-spacing: 5px; padding: 3px 12px; }
}
/* ====================================================== */
/* ====== 造运报告 — 视觉魔法升级(图 / 动画 / 字)========= */
/* ====================================================== */
/* ===== 字体栈升级 ===== */
.action-hero-cover,
.action-section .card-header .card-label,
.t3-name,
.tgd-name,
.uhc-name,
.ahc-title {
font-feature-settings: "palt", "kern";
}
/* ===== 滚动入场动画 ===== */
.reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll.action-sys.is-visible {
transition-duration: 0.85s;
}
/* ===== 封面 hero(替代旧 action-cover)===== */
.action-hero-cover {
position: relative;
border-radius: 28px;
margin-bottom: 32px;
padding: 80px 40px 70px;
overflow: hidden;
background: linear-gradient(135deg, #0F1A14 0%, #1F2A1F 50%, #14181D 100%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 24px 60px rgba(20, 24, 29, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: white;
text-align: center;
}
.ahc-bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.32;
filter: blur(2px) saturate(110%);
animation: ahc-bg-pan 28s ease-in-out infinite;
}
@keyframes ahc-bg-pan {
0%, 100% { transform: scale(1.08) translate(0, 0); }
50% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.ahc-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(at 50% 50%, rgba(15, 26, 20, 0.15), rgba(15, 26, 20, 0.85)),
linear-gradient(180deg, rgba(15, 26, 20, 0.3) 0%, rgba(15, 26, 20, 0.8) 100%);
}
.ahc-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 80, 0.7), transparent);
}
.ahc-line-top { top: 36px; }
.ahc-line-bottom { bottom: 36px; }
/* 漂浮粒子 */
.ahc-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.ahc-p {
position: absolute;
left: var(--x);
top: var(--y);
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(226, 198, 121, 0.85), rgba(184, 149, 64, 0.2));
box-shadow: 0 0 12px rgba(226, 198, 121, 0.55);
animation: ahc-float 6s ease-in-out infinite;
animation-delay: var(--d, 0s);
opacity: 0.6;
}
@keyframes ahc-float {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
50% { transform: translate(15px, -20px) scale(1.4); opacity: 0.95; }
}
.ahc-content { position: relative; z-index: 2; }
.ahc-eyebrow {
font-size: 11px;
color: rgba(212, 175, 80, 0.9);
letter-spacing: 8px;
font-weight: 700;
margin-bottom: 24px;
text-transform: uppercase;
animation: fadeIn 1s 0.2s both;
}
.ahc-title {
margin: 0 0 32px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
flex-wrap: wrap;
line-height: 1.1;
animation: fadeIn 1.2s 0.4s both;
}
.ahc-t-1, .ahc-t-2 {
font-family: 'Noto Serif SC', 'Ma Shan Zheng', serif;
font-size: 60px;
font-weight: 900;
letter-spacing: 6px;
background: linear-gradient(180deg, #FFFEF7 0%, #E2C679 50%, #B89540 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 4px 24px rgba(212, 175, 80, 0.25);
}
.ahc-t-divider {
color: rgba(212, 175, 80, 0.7);
font-size: 18px;
margin-top: -10px;
}
.ahc-subtitle {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
animation: fadeIn 1s 0.6s both;
}
.ahc-stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.ahc-stat-n {
font-family: 'Inter', sans-serif;
font-size: 38px;
font-weight: 900;
line-height: 1;
background: linear-gradient(180deg, #FFFEF7 0%, #D4AF50 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
}
.ahc-stat-l {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 3px;
font-weight: 600;
}
.ahc-stat-dot {
color: rgba(212, 175, 80, 0.55);
font-weight: 800;
}
.ahc-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
animation: fadeIn 1s 0.8s both;
padding: 10px 22px;
background: rgba(212, 175, 80, 0.08);
border: 1px solid rgba(212, 175, 80, 0.18);
border-radius: 16px;
display: inline-flex;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ahc-meta-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 2px;
font-weight: 600;
}
.ahc-meta-dot {
color: rgba(212, 175, 80, 0.45);
font-weight: 800;
}
@media (max-width: 768px) {
.action-hero-cover { padding: 56px 24px 50px; }
.ahc-t-1, .ahc-t-2 { font-size: 38px; letter-spacing: 4px; }
.ahc-stat-n { font-size: 28px; }
.ahc-eyebrow { letter-spacing: 4px; font-size: 10px; }
}
/* ===== 12 系统卡 — 头部图标 + 数字水印 ===== */
.action-sys {
position: relative;
overflow: hidden;
}
.action-sys::after {
content: attr(data-sys-num);
position: absolute;
bottom: -30px;
right: -20px;
font-size: 200px;
font-weight: 900;
color: rgba(92, 138, 110, 0.04);
line-height: 0.85;
font-family: 'Inter', sans-serif;
pointer-events: none;
letter-spacing: -8px;
}
.sys-color-jade::after { color: rgba(92, 138, 110, 0.05); }
.sys-color-gold::after { color: rgba(184, 149, 64, 0.05); }
.sys-color-rose::after { color: rgba(200, 71, 62, 0.04); }
.sys-header-flex {
display: flex;
align-items: center;
gap: 14px;
}
.sys-icon-circle {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 6px 16px rgba(92, 138, 110, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
color: white;
}
.sys-color-jade .sys-icon-circle { background: linear-gradient(135deg, #7CAB8E, #355A42); box-shadow: 0 6px 16px rgba(92, 138, 110, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.sys-color-gold .sys-icon-circle { background: linear-gradient(135deg, #D4AF50, #97772E); box-shadow: 0 6px 16px rgba(184, 149, 64, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.sys-color-rose .sys-icon-circle { background: linear-gradient(135deg, #E99089, #C8473E); box-shadow: 0 6px 16px rgba(200, 71, 62, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.action-sys.sys-color-jade::before { background: linear-gradient(90deg, transparent, #5C8A6E, #D4AF50, #5C8A6E, transparent) !important; }
.action-sys.sys-color-gold::before { background: linear-gradient(90deg, transparent, #D4AF50, #B89540, #D4AF50, transparent) !important; }
.action-sys.sys-color-rose::before { background: linear-gradient(90deg, transparent, #C8473E, #D4AF50, #C8473E, transparent) !important; }
/* 旧 action-cover 不再用,但保留兼容 */
.action-cover { display: none; }
/* ===== top3 卡片入场动画 ===== */
.top3-card.reveal-on-scroll { transition-delay: 0s; }
.top3-grid .top3-card.reveal-on-scroll:nth-child(2) { transition-delay: 0.12s; }
.top3-grid .top3-card.reveal-on-scroll:nth-child(3) { transition-delay: 0.24s; }
/* ===== 21 天 + 49 天 sequential delay ===== */
.plan21-grid .plan21-stage.reveal-on-scroll:nth-child(1) { transition-delay: 0s; }
.plan21-grid .plan21-stage.reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.plan21-grid .plan21-stage.reveal-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.plan49-grid .plan49-cell.reveal-on-scroll:nth-child(n) { transition-delay: calc((var(--idx, 0) * 0.07s)); }
/* 平滑滚动 */
html { scroll-behavior: smooth; }
/* ===== 标题字体升级:Noto Serif SC 当衬线 ===== */
body.app-default .page-heading,
.action-section .card-header .card-label,
.uhc-tag,
.action-section-title {
font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
}
.t3-name, .tgd-name {
font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
}
/* ========= 五行能量视觉总览 ========= */
.elements-overview {
margin-top: 18px;
padding: 22px 24px;
background: linear-gradient(135deg, rgba(92, 138, 110, 0.05), rgba(184, 149, 64, 0.04));
border: 1px solid rgba(92, 138, 110, 0.18);
border-radius: 16px;
}
.eo-head {
font-size: 12px;
font-weight: 800;
color: var(--c-jade-700, #355A42);
letter-spacing: 4px;
margin-bottom: 16px;
padding-left: 10px;
border-left: 3px solid var(--c-jade-500, #5C8A6E);
font-family: 'Noto Serif SC', serif;
}
.eo-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 576px) { .eo-row { grid-template-columns: repeat(2, 1fr); } }
.eo-cell {
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--c-ink-100, #EBEEF2);
border-radius: 14px;
padding: 16px 12px 12px;
text-align: center;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.eo-cell:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(20, 24, 29, 0.04),
0 8px 22px rgba(20, 24, 29, 0.1);
}
.eo-cell.is-self {
background: linear-gradient(180deg, rgba(184, 149, 64, 0.12), rgba(184, 149, 64, 0.04));
border-color: rgba(184, 149, 64, 0.4);
box-shadow:
0 0 0 3px rgba(184, 149, 64, 0.1),
0 6px 20px rgba(184, 149, 64, 0.2);
}
.eo-cell.is-yong {
border-color: rgba(92, 138, 110, 0.4);
background: linear-gradient(180deg, rgba(92, 138, 110, 0.1), rgba(92, 138, 110, 0.03));
}
.eo-cell.is-ji {
border-color: rgba(200, 71, 62, 0.3);
background: linear-gradient(180deg, rgba(200, 71, 62, 0.06), rgba(200, 71, 62, 0.02));
opacity: 0.85;
}
.eo-icon {
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(45, 36, 24, 0.15));
transition: transform 0.3s;
margin-bottom: 6px;
}
.eo-cell:hover .eo-icon { transform: scale(1.1) rotate(-6deg); }
.eo-name {
font-size: 20px;
font-weight: 800;
font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
color: var(--c-ink-900, #14181D);
letter-spacing: 2px;
line-height: 1;
margin-bottom: 10px;
}
.eo-bar {
width: 100%;
height: 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.06);
overflow: hidden;
margin-bottom: 8px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.eo-bar-fill {
height: 100%;
width: var(--p, 0%);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.eo-val {
font-size: 14px;
font-weight: 800;
color: var(--c-ink-700, #2F3741);
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.eo-tag {
position: absolute;
top: -8px;
right: -4px;
background: var(--c-gold-500, #B89540);
color: white;
font-size: 9px;
font-weight: 800;
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 1px;
box-shadow: 0 2px 6px rgba(184, 149, 64, 0.35);
}
.eo-tag.is-yong-tag { background: var(--c-jade-600, #4A7359); }
.eo-tag.is-ji-tag { background: var(--c-accent, #C8473E); }
/* ========= sys-sub 加图标版 ========= */
.sys-sub-with-icon {
display: flex !important;
align-items: flex-start;
gap: 14px;
}
.ss-icon {
width: 44px;
height: 44px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(45, 36, 24, 0.12));
transition: transform 0.3s;
margin-top: 2px;
}
.sys-sub-with-icon:hover .ss-icon { transform: scale(1.08) rotate(-6deg); }
.ss-content { flex: 1; min-width: 0; }
.sub-elem-mu { border-left-color: #66CC66 !important; }
.sub-elem-huo { border-left-color: #FF6B6B !important; }
.sub-elem-tu { border-left-color: #D2A560 !important; }
.sub-elem-jin { border-left-color: #888 !important; }
.sub-elem-shui { border-left-color: #4682B4 !important; }
/* ========= 主导十神卡背景图 ========= */
.tgd-card-with-bg {
position: relative;
overflow: hidden;
}
.tgd-card-with-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--bg-img);
background-size: cover;
background-position: right center;
opacity: 0.08;
mask-image: linear-gradient(90deg, transparent 50%, black 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 50%, black 100%);
pointer-events: none;
}
.tgd-card-with-bg > * { position: relative; z-index: 1; }
/* ========= 02 主导十神详解 ========= */
.top-gods-detail {
margin-top: 18px;
padding: 20px 22px;
background: linear-gradient(135deg, rgba(92, 138, 110, 0.06), rgba(184, 149, 64, 0.04));
border: 1px solid rgba(92, 138, 110, 0.2);
border-radius: 14px;
}
.tgd-head {
font-size: 12px;
font-weight: 800;
color: var(--c-jade-700, #355A42);
letter-spacing: 4px;
margin-bottom: 14px;
padding-left: 10px;
border-left: 3px solid var(--c-jade-500, #5C8A6E);
}
.tgd-card {
background: linear-gradient(180deg, white, rgba(247, 249, 250, 0.7));
border: 1px solid var(--c-ink-100, #EBEEF2);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
transition: all 0.2s;
}
.tgd-card:last-child { margin-bottom: 0; }
.tgd-card:hover {
border-color: rgba(92, 138, 110, 0.3);
box-shadow: 0 6px 18px rgba(92, 138, 110, 0.1);
transform: translateY(-1px);
}
.tgd-name {
font-size: 22px;
font-weight: 800;
color: var(--c-ink-900, #14181D);
font-family: 'Ma Shan Zheng', 'Noto Sans SC', serif;
letter-spacing: 2px;
margin-bottom: 4px;
background: linear-gradient(135deg, var(--c-ink-900, #14181D), var(--c-jade-600, #4A7359));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tgd-lang {
font-size: 12px;
color: var(--c-ink-500, #5B6473);
letter-spacing: 1px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(92, 138, 110, 0.18);
}
.tgd-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 768px) { .tgd-grid { grid-template-columns: 1fr; } }
.tgd-block {
padding: 12px 14px;
border-radius: 10px;
font-size: 12.5px;
line-height: 1.7;
color: var(--c-ink-700, #2F3741);
display: flex;
flex-direction: column;
gap: 6px;
}
.tgd-talent { background: rgba(92, 138, 110, 0.08); border-left: 3px solid var(--c-jade-500, #5C8A6E); }
.tgd-pain { background: rgba(200, 71, 62, 0.06); border-left: 3px solid var(--c-accent, #C8473E); }
.tgd-transform { background: rgba(184, 149, 64, 0.08); border-left: 3px solid var(--c-gold-500, #B89540); }
.tgd-tag {
font-size: 10px;
font-weight: 800;
letter-spacing: 3px;
padding: 2px 8px;
border-radius: 8px;
align-self: flex-start;
color: white;
}
.tgd-talent .tgd-tag { background: var(--c-jade-600, #4A7359); }
.tgd-pain .tgd-tag { background: var(--c-accent, #C8473E); }
.tgd-transform .tgd-tag { background: var(--c-gold-600, #97772E); }
/* ========= 02 平衡解读 grid ========= */
.balance-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 768px) { .balance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .balance-grid { grid-template-columns: 1fr; } }
.bg-cell {
background: linear-gradient(135deg, rgba(92, 138, 110, 0.06), rgba(124, 171, 142, 0.02));
border: 1px solid rgba(92, 138, 110, 0.18);
border-radius: 12px;
padding: 14px 16px;
border-left: 4px solid var(--c-jade-500, #5C8A6E);
transition: all 0.2s;
}
.bg-cell:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(92, 138, 110, 0.12);
border-color: rgba(92, 138, 110, 0.35);
}
.bg-label {
font-size: 10px;
color: var(--c-jade-600, #4A7359);
font-weight: 800;
letter-spacing: 3px;
margin-bottom: 6px;
}
.bg-value {
font-size: 13px;
color: var(--c-ink-900, #14181D);
font-weight: 600;
line-height: 1.6;
}
/* ========= 02 财库与财富模式卡 ========= */
.wealth-mode-card {
margin-top: 18px;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(184, 149, 64, 0.08), rgba(92, 138, 110, 0.05));
border: 1px solid rgba(184, 149, 64, 0.25);
border-radius: 14px;
display: flex;
align-items: center;
gap: 16px;
box-shadow:
0 1px 2px rgba(184, 149, 64, 0.06),
0 4px 16px rgba(184, 149, 64, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
position: relative;
overflow: hidden;
}
.wealth-mode-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--c-gold-400, #D4AF50), var(--c-gold-600, #97772E));
}
.wmc-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-gold-400, #D4AF50), var(--c-gold-600, #97772E));
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(184, 149, 64, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.wmc-info { flex: 1; }
.wmc-label {
font-size: 10px;
font-weight: 800;
color: var(--c-gold-600, #97772E);
letter-spacing: 4px;
margin-bottom: 4px;
}
.wmc-mode {
font-size: 15px;
font-weight: 800;
color: var(--c-ink-900, #14181D);
letter-spacing: 1px;
margin-bottom: 4px;
}
.wmc-how {
font-size: 13px;
color: var(--c-ink-500, #5B6473);
letter-spacing: 0.5px;
}
/* ========= 睡眠宣言 ========= */
.sys-declaration {
margin-top: 16px;
padding: 18px 22px;
background:
radial-gradient(at 0% 0%, rgba(92, 138, 110, 0.1), transparent 60%),
linear-gradient(135deg, rgba(124, 171, 142, 0.08), rgba(92, 138, 110, 0.04));
border: 1px solid rgba(92, 138, 110, 0.22);
border-radius: 14px;
}
.sd-head {
font-weight: 800;
color: var(--c-jade-700, #355A42);
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 12px;
display: flex;
align-items: center;
}
.sd-body { display: flex; flex-direction: column; gap: 6px; }
.sd-line {
font-size: 14px;
color: var(--c-ink-700, #2F3741);
line-height: 1.8;
font-style: italic;
padding-left: 18px;
position: relative;
letter-spacing: 0.5px;
}
.sd-line::before {
content: '"';
position: absolute;
left: 0;
top: -4px;
color: var(--c-jade-500, #5C8A6E);
font-size: 24px;
font-family: Georgia, serif;
line-height: 1;
}
/* ========= 信念重编 ========= */
.sys-belief {
margin-top: 16px;
padding: 20px 22px;
background: linear-gradient(135deg, rgba(184, 149, 64, 0.06), rgba(92, 138, 110, 0.04));
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 14px;
}
.sb-head {
font-weight: 800;
color: var(--c-gold-600, #97772E);
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 14px;
display: flex;
align-items: center;
}
.sb-grid { display: flex; flex-direction: column; gap: 10px; }
.sb-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid var(--c-ink-100, #EBEEF2);
transition: all 0.2s;
}
.sb-row:hover {
background: white;
border-color: rgba(184, 149, 64, 0.3);
transform: translateX(2px);
}
@media (max-width: 576px) {
.sb-row { grid-template-columns: 1fr; gap: 4px; text-align: center; }
}
.sb-old {
font-size: 13px;
color: var(--c-ink-400, #7E8896);
text-decoration: line-through;
text-decoration-color: rgba(200, 71, 62, 0.4);
font-style: italic;
}
.sb-arrow {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-gold-400, #D4AF50), var(--c-gold-600, #97772E));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
box-shadow: 0 2px 6px rgba(184, 149, 64, 0.3);
flex-shrink: 0;
margin: 0 auto;
}
.sb-new {
font-size: 13.5px;
color: var(--c-jade-700, #355A42);
font-weight: 700;
letter-spacing: 0.5px;
}
/* 打印样式 */
@media print {
body.app-default { background: white !important; }
body.app-default #kt_app_header,
body.app-default #kt_app_sidebar,
body.app-default #kt_app_footer,
body.app-default #kt_app_toolbar { display: none !important; }
body.app-default #kt_app_main { margin: 0 !important; }
body.app-default .card {
background: white !important;
box-shadow: none !important;
border: 1px solid #ccc !important;
page-break-inside: avoid;
}
body.app-default .btn,
.d-flex.justify-content-end { display: none !important; }
}
/* 仪表盘统计卡 hover lift */
body.app-default .card.h-xl-100:hover {
transform: translateY(-2px);
}
/* 表格行 hover */
body.app-default .table tbody tr {
transition: background-color 0.15s;
}
body.app-default .table tbody tr:hover {
background-color: rgba(27, 132, 255, 0.04) !important;
}
/* 用户头部卡片在背景上加柔光晕 */
body.app-default .card.mb-5.mb-xl-10:first-of-type {
box-shadow: 0 8px 40px rgba(20, 30, 60, 0.08);
}
/* ================================================================ */
/* 造运报告 · 视觉升级 v4(系统横幅 / 八卦飞星 / 时间轴 / 印章纹理) */
/* ================================================================ */
/* ===== 1. 系统卡顶部横幅 ===== */
.action-sys { overflow: hidden; }
.action-sys > .card-header { display: none; }
.sys-banner {
position: relative;
height: 140px;
background: linear-gradient(135deg, #1F2A24 0%, #2C3E37 100%);
background-image: var(--banner-img);
background-size: cover;
background-position: center;
overflow: hidden;
border-bottom: 1px solid rgba(184, 149, 64, 0.35);
}
.sys-banner .sb-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(20, 24, 29, 0.45) 0%, rgba(20, 24, 29, 0.82) 100%),
linear-gradient(180deg, rgba(20, 24, 29, 0.35) 0%, rgba(20, 24, 29, 0.75) 100%);
}
.sys-banner-mu .sb-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(28,60,40,0.45) 0%, rgba(20,40,30,0.85) 100%), linear-gradient(180deg, rgba(20,40,30,0.4) 0%, rgba(20,40,30,0.75) 100%); }
.sys-banner-huo .sb-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(80,30,30,0.45) 0%, rgba(50,20,20,0.85) 100%), linear-gradient(180deg, rgba(50,20,20,0.4) 0%, rgba(50,20,20,0.75) 100%); }
.sys-banner-tu .sb-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(80,60,30,0.45) 0%, rgba(50,38,20,0.85) 100%), linear-gradient(180deg, rgba(60,45,25,0.4) 0%, rgba(50,38,20,0.75) 100%); }
.sys-banner-jin .sb-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(55,55,65,0.45) 0%, rgba(35,38,48,0.85) 100%), linear-gradient(180deg, rgba(40,42,52,0.4) 0%, rgba(35,38,48,0.75) 100%); }
.sys-banner-shui .sb-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(25,50,75,0.45) 0%, rgba(15,35,55,0.85) 100%), linear-gradient(180deg, rgba(20,40,60,0.4) 0%, rgba(15,35,55,0.75) 100%); }
.sb-num-mark {
position: absolute;
right: 28px; top: 18px;
font: 700 64px/1 'Inter','Cormorant Garamond',serif;
color: rgba(184, 149, 64, 0.32);
letter-spacing: -2px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
z-index: 1;
}
.sb-meta {
position: relative; z-index: 2;
padding: 24px 36px 24px 110px; /* 左侧留出图标空间 110px */
display: flex; flex-direction: column; gap: 6px;
min-height: 140px;
justify-content: center;
}
.sb-eyebrow {
font: 500 11px/1.6 'Inter',sans-serif;
letter-spacing: 0.35em;
color: rgba(184, 149, 64, 0.92);
text-transform: uppercase;
}
.sb-icon-circle {
position: absolute;
left: 36px; top: 50%;
transform: translateY(-50%);
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #F4F1E9 0%, #E8E0CC 100%);
border: 2px solid #B89540;
box-shadow: 0 6px 20px rgba(184, 149, 64, 0.35), inset 0 1px 0 rgba(255,255,255,0.6);
display: flex; align-items: center; justify-content: center;
color: #6B5635;
z-index: 3;
}
.sb-title {
font: 700 22px/1.4 'Noto Serif SC','Ma Shan Zheng',serif;
color: #F4F1E9;
margin: 4px 0 0;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
letter-spacing: 0.04em;
max-width: 100%;
}
.sb-corner {
position: absolute;
width: 24px; height: 24px;
border: 1.5px solid rgba(184, 149, 64, 0.75);
z-index: 2;
}
.sb-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.sb-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.sb-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.sb-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.action-sys > .card-body { padding-top: 28px !important; }
/* ===== 2. 八卦飞星盘 ===== */
.fs-3x3-bagua { position: relative; padding: 28px; }
.fs-bagua-ring { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fs-bg-corner {
position: absolute;
font-size: 20px;
color: rgba(184, 149, 64, 0.4);
text-shadow: 0 0 8px rgba(184, 149, 64, 0.2);
}
.fs-bg-corner.fs-bg-tl { top: 6px; left: 6px; }
.fs-bg-corner.fs-bg-tr { top: 6px; right: 6px; }
.fs-bg-corner.fs-bg-bl { bottom: 6px; left: 6px; }
.fs-bg-corner.fs-bg-br { bottom: 6px; right: 6px; }
.fs3-bagua {
display: flex; align-items: center; justify-content: center;
gap: 4px; margin-bottom: 4px; padding-bottom: 4px;
border-bottom: 1px dashed rgba(184, 149, 64, 0.25);
}
.fs3-bg-symbol {
font-size: 16px; line-height: 1;
color: #B89540;
font-family: 'PingFang SC','Noto Sans SC',sans-serif;
}
.fs3-bg-name {
font: 500 10px/1 'Noto Serif SC',serif;
color: #6B5635;
letter-spacing: 0.1em;
}
.fs3-cell.is-good .fs3-bg-symbol { color: #5C8A6E; }
.fs3-cell.is-good .fs3-bg-name { color: #3E6249; }
.fs3-cell.is-bad .fs3-bg-symbol { color: #C8473E; }
.fs3-cell.is-bad .fs3-bg-name { color: #8A332D; }
.fs3-cell.is-center .fs3-bg-symbol {
color: #B89540;
animation: bagua-rotate 18s linear infinite;
display: inline-block;
}
@keyframes bagua-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* ===== 3. 时间轴 · 21 天 ===== */
.plan21-timeline {
position: relative;
margin: 8px 4px 32px;
padding: 0 6%;
}
.p21-track {
position: relative;
height: 70px;
display: flex; align-items: center; justify-content: space-between;
}
.p21-line {
position: absolute;
left: 8%; right: 8%; top: 50%;
height: 2px;
background: linear-gradient(90deg,
rgba(184, 149, 64, 0) 0%,
rgba(184, 149, 64, 0.65) 15%,
rgba(184, 149, 64, 0.85) 50%,
rgba(184, 149, 64, 0.65) 85%,
rgba(184, 149, 64, 0) 100%);
transform: translateY(-50%);
}
.p21-node {
position: relative;
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #F4F1E9 0%, #E8E0CC 100%);
border: 2px solid #B89540;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #6B5635;
box-shadow: 0 4px 16px rgba(184, 149, 64, 0.3), inset 0 1px 2px rgba(255,255,255,0.5);
z-index: 2;
transition: transform 0.4s ease;
}
.p21-node:hover { transform: scale(1.08); }
.p21-node i { font-size: 20px; line-height: 1; color: #B89540; }
.p21-node-num {
position: absolute; top: -8px; right: -8px;
width: 24px; height: 24px;
border-radius: 50%;
background: #5C8A6E;
color: #fff;
font: 700 12px/24px 'Inter',sans-serif;
text-align: center;
border: 2px solid #F4F1E9;
}
.plan21-stage { position: relative; padding-top: 28px !important; margin-top: 18px; }
.ps-icon-circle {
position: absolute;
top: -18px; left: 50%;
transform: translateX(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #5C8A6E 0%, #3E6249 100%);
color: #F4F1E9;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(92, 138, 110, 0.4);
z-index: 2;
}
/* ===== 4. 时间轴 · 49 天(7 周期)===== */
.plan49-timeline { position: relative; }
.p49-line {
position: absolute;
left: 0; right: 0; top: 40px;
height: 2px;
background: repeating-linear-gradient(90deg,
rgba(184, 149, 64, 0.4) 0 8px,
transparent 8px 16px);
z-index: 0;
}
.plan49-timeline .plan49-cell { position: relative; z-index: 1; padding-top: 14px; }
.p49-node {
position: relative;
width: 56px; height: 56px;
margin: 0 auto 12px;
border-radius: 50%;
background: linear-gradient(135deg, #F4F1E9 0%, #E8E0CC 100%);
border: 2px solid #5C8A6E;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(92, 138, 110, 0.28), inset 0 1px 2px rgba(255,255,255,0.5);
}
.p49-node i { font-size: 22px; line-height: 1; color: #5C8A6E; }
.p49-node .p49-num {
position: absolute; top: -6px; right: -6px;
width: 22px; height: 22px;
border-radius: 50%;
background: #B89540;
color: #fff;
font: 700 11px/22px 'Inter',sans-serif;
text-align: center;
border: 2px solid #F4F1E9;
}
/* ===== 5. 印章云纹背景 ===== */
.final-body-textured { position: relative; overflow: hidden; }
.final-bg-pattern {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.55;
}
.final-body-textured > *:not(.final-bg-pattern) {
position: relative; z-index: 1;
}
.action-final .final-seal-row {
background: rgba(244, 241, 233, 0.6);
backdrop-filter: blur(2px);
border: 1px solid rgba(184, 149, 64, 0.3);
border-radius: 8px;
padding: 28px;
margin-top: 32px;
box-shadow: 0 4px 24px rgba(184, 149, 64, 0.12);
}
@media (max-width: 768px) {
.sb-num-mark { font-size: 44px; right: 16px; }
.sb-meta { padding: 20px 18px 20px 84px; min-height: 120px; }
.sb-title { font-size: 17px; max-width: 100%; }
.sb-icon-circle { left: 18px; width: 50px; height: 50px; }
.action-sys > .card-body { padding-top: 24px !important; }
.p21-node { width: 48px; height: 48px; }
.p21-node i { font-size: 16px; }
.plan21-timeline { padding: 0 2%; }
.p49-node { width: 44px; height: 44px; }
.p49-node i { font-size: 18px; }
.fs3-bg-symbol { font-size: 13px; }
.fs3-bg-name { font-size: 9px; }
}
/* ================================================================ */
/* 全局浮层(Pass 1):TOC 目录 / 进度条 / 暗色 / 骨架屏 */
/* ================================================================ */
/* ===== 顶部滚动进度条 ===== */
#mp-scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(184, 149, 64, 0.08);
z-index: 9999;
pointer-events: none;
}
#mp-scroll-progress-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, #B89540 0%, #5C8A6E 50%, #C8473E 100%);
box-shadow: 0 0 8px rgba(184, 149, 64, 0.6);
transition: width 0.06s linear;
}
/* ===== 暗色模式切换按钮 ===== */
#mp-theme-toggle {
position: fixed;
right: 18px; bottom: 18px;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(184, 149, 64, 0.4);
background: linear-gradient(135deg, #F4F1E9, #E8E0CC);
color: #6B5635;
box-shadow: 0 4px 14px rgba(20, 24, 29, 0.18);
z-index: 9998;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s ease, background 0.3s ease;
}
#mp-theme-toggle:hover { transform: scale(1.08) rotate(15deg); }
#mp-theme-toggle .mp-icon-sun { display: none; font-size: 20px; color: #FFC857; }
#mp-theme-toggle .mp-icon-moon { display: inline-block; font-size: 18px; }
[data-theme="dark"] #mp-theme-toggle {
background: linear-gradient(135deg, #2C3540, #1B2128);
color: #F4F1E9;
border-color: rgba(255, 200, 87, 0.4);
}
[data-theme="dark"] #mp-theme-toggle .mp-icon-sun { display: inline-block; }
[data-theme="dark"] #mp-theme-toggle .mp-icon-moon { display: none; }
/* ===== TOC 目录浮窗 ===== */
#mp-toc {
position: fixed;
right: 18px; top: 100px;
width: 240px;
max-height: calc(100vh - 200px);
background: rgba(244, 241, 233, 0.96);
backdrop-filter: blur(12px);
border: 1px solid rgba(184, 149, 64, 0.3);
border-radius: 12px;
box-shadow: 0 12px 36px rgba(20, 24, 29, 0.12);
z-index: 9997;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
transform: translateX(0);
opacity: 1;
}
#mp-toc.mp-toc-hidden {
transform: translateX(calc(100% + 30px));
opacity: 0;
pointer-events: none;
}
#mp-toc .mp-toc-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid rgba(184, 149, 64, 0.2);
font: 600 13px/1 'Noto Serif SC', serif;
color: #6B5635;
background: linear-gradient(180deg, rgba(184, 149, 64, 0.08) 0%, transparent 100%);
letter-spacing: 0.1em;
}
#mp-toc .mp-toc-head i { color: #B89540; }
#mp-toc .mp-toc-head span { flex: 1; }
#mp-toc-close {
border: none; background: none;
width: 24px; height: 24px;
border-radius: 50%;
color: #8A7A55;
font: 600 18px/1 sans-serif;
cursor: pointer;
transition: background 0.2s;
}
#mp-toc-close:hover { background: rgba(184, 149, 64, 0.15); }
#mp-toc-list {
list-style: none;
margin: 0; padding: 8px 0;
overflow-y: auto;
flex: 1;
}
#mp-toc-list li {
margin: 0;
border-left: 2px solid transparent;
transition: border-color 0.25s, background 0.25s;
}
#mp-toc-list li a {
display: block;
padding: 7px 16px;
font: 500 12px/1.5 'Noto Sans SC', sans-serif;
color: #4A4035;
text-decoration: none;
transition: color 0.2s, padding 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#mp-toc-list li:hover { background: rgba(184, 149, 64, 0.08); }
#mp-toc-list li:hover a { color: #6B5635; }
#mp-toc-list li.is-active {
border-left-color: #B89540;
background: linear-gradient(90deg, rgba(184, 149, 64, 0.12) 0%, transparent 100%);
}
#mp-toc-list li.is-active a {
color: #6B5635;
font-weight: 600;
padding-left: 22px;
}
/* TOC FAB 按钮 */
#mp-toc-fab {
position: fixed;
right: 18px; bottom: 78px;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(184, 149, 64, 0.4);
background: linear-gradient(135deg, #5C8A6E, #3E6249);
color: #F4F1E9;
box-shadow: 0 4px 14px rgba(92, 138, 110, 0.35);
z-index: 9998;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s ease;
}
#mp-toc-fab:hover { transform: scale(1.08); }
/* 移动端:TOC 全宽抽屉 */
@media (max-width: 991px) {
#mp-toc {
right: 12px; left: 12px; top: 70px;
width: auto; max-width: 360px; margin-left: auto;
}
#mp-theme-toggle, #mp-toc-fab {
width: 42px; height: 42px;
right: 12px;
}
#mp-toc-fab { bottom: 66px; }
}
/* ===== 图片骨架屏 ===== */
.mp-img-loading {
background:
linear-gradient(90deg,
rgba(184, 149, 64, 0.06) 0%,
rgba(184, 149, 64, 0.16) 50%,
rgba(184, 149, 64, 0.06) 100%);
background-size: 200% 100%;
animation: mp-skel-shimmer 1.4s ease-in-out infinite;
min-height: 40px;
}
@keyframes mp-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===== 暗色模式样式 ===== */
[data-theme="dark"] body,
[data-theme="dark"] body.app-default {
background: linear-gradient(135deg, #0F1418 0%, #1B2128 50%, #14181D 100%) !important;
color: #C8C5BE !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .action-section {
background: rgba(28, 35, 42, 0.92) !important;
border-color: rgba(184, 149, 64, 0.18) !important;
color: #C8C5BE !important;
}
[data-theme="dark"] .card-title, [data-theme="dark"] .card-label,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
color: #E8E0CC !important;
}
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 { color: #E8E0CC !important; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 { color: #A8A39A !important; }
[data-theme="dark"] .text-muted { color: #8A8478 !important; }
[data-theme="dark"] .menu-link { color: #C8C5BE !important; }
[data-theme="dark"] .menu-link:hover { background: rgba(184, 149, 64, 0.12) !important; }
[data-theme="dark"] .menu-link.Active,
[data-theme="dark"] .menu-link.active {
background: rgba(92, 138, 110, 0.22) !important;
color: #E8E0CC !important;
}
[data-theme="dark"] .app-sidebar {
background: rgba(15, 20, 24, 0.96) !important;
border-right: 1px solid rgba(184, 149, 64, 0.12) !important;
}
[data-theme="dark"] .app-header {
background: rgba(15, 20, 24, 0.92) !important;
border-bottom: 1px solid rgba(184, 149, 64, 0.12) !important;
}
[data-theme="dark"] .app-footer { background: transparent !important; }
[data-theme="dark"] .uhc-name { color: #E8E0CC !important; }
[data-theme="dark"] .uhc-meta-item { color: #C8C5BE !important; }
[data-theme="dark"] .uhc-pillar { background: rgba(28, 35, 42, 0.7) !important; border-color: rgba(184, 149, 64, 0.25) !important; }
[data-theme="dark"] .uhc-pillar-gz { color: #E8E0CC !important; }
[data-theme="dark"] .uhc-pillar.is-day .uhc-pillar-gz { color: #FFC857 !important; }
[data-theme="dark"] #mp-toc {
background: rgba(20, 26, 32, 0.96) !important;
border-color: rgba(184, 149, 64, 0.25) !important;
}
[data-theme="dark"] #mp-toc .mp-toc-head,
[data-theme="dark"] #mp-toc-list li a { color: #E8E0CC !important; }
[data-theme="dark"] #mp-toc-list li:hover { background: rgba(184, 149, 64, 0.12) !important; }
[data-theme="dark"] #mp-toc-list li.is-active {
background: linear-gradient(90deg, rgba(184, 149, 64, 0.18) 0%, transparent 100%) !important;
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
background: rgba(28, 35, 42, 0.7) !important;
border-color: rgba(184, 149, 64, 0.2) !important;
color: #E8E0CC !important;
}
[data-theme="dark"] .table { color: #C8C5BE !important; }
[data-theme="dark"] .table th { background: rgba(28, 35, 42, 0.7) !important; color: #E8E0CC !important; }
[data-theme="dark"] .table tbody tr:hover { background: rgba(184, 149, 64, 0.06) !important; }
[data-theme="dark"] .core-grid .cg-cell,
[data-theme="dark"] .balance-grid .bg-cell,
[data-theme="dark"] .eo-cell,
[data-theme="dark"] .top3-card,
[data-theme="dark"] .plan21-stage,
[data-theme="dark"] .plan49-cell,
[data-theme="dark"] .fs3-cell,
[data-theme="dark"] .sys-sub,
[data-theme="dark"] .annual-cols .ac-col,
[data-theme="dark"] .risk-cell {
background: rgba(28, 35, 42, 0.78) !important;
border-color: rgba(184, 149, 64, 0.22) !important;
color: #C8C5BE !important;
}
[data-theme="dark"] .annual-env,
[data-theme="dark"] .balance-grid .bg-cell .bg-value,
[data-theme="dark"] .core-grid .cg-cell .cg-value,
[data-theme="dark"] .ps-title, [data-theme="dark"] .ps-goal,
[data-theme="dark"] .p49-title { color: #E8E0CC !important; }
[data-theme="dark"] .wealth-mode-card {
background: rgba(28, 35, 42, 0.85) !important;
border-color: rgba(184, 149, 64, 0.3) !important;
}
[data-theme="dark"] .wmc-mode, [data-theme="dark"] .wmc-how { color: #E8E0CC !important; }
[data-theme="dark"] .action-page-ink-bg { opacity: 0.06 !important; }
/* 打印模式:隐藏浮层 */
@media print {
#mp-scroll-progress, #mp-theme-toggle, #mp-toc, #mp-toc-fab,
.floating-gold-sand, .action-page-ink-bg { display: none !important; }
body, body.app-default { background: #fff !important; }
.card, .action-section { box-shadow: none !important; break-inside: avoid; }
}
/* ================================================================ */
/* Pass 2:命盘进阶(神煞 / 纳音 / 刑冲合害 / 空亡)*/
/* ================================================================ */
.advanced-card .adv-block { margin-bottom: 28px; }
.advanced-card .adv-block:last-child { margin-bottom: 0; }
.adv-block-title {
display: flex; align-items: center;
font: 600 16px/1.4 'Noto Serif SC', serif;
color: #6B5635;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(184, 149, 64, 0.2);
letter-spacing: 0.05em;
}
.adv-block-title i { color: #B89540; }
.adv-empty { color: #8A8478; font-size: 13px; padding: 16px; background: rgba(184, 149, 64, 0.04); border-radius: 8px; }
/* 纳音四柱 */
.nayin-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nayin-cell {
text-align: center;
padding: 18px 12px;
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 10px;
background: linear-gradient(180deg, rgba(244, 241, 233, 0.6) 0%, rgba(232, 224, 204, 0.4) 100%);
transition: transform 0.3s, box-shadow 0.3s;
}
.nayin-cell:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(184, 149, 64, 0.18); }
.nayin-cell.is-day {
background: linear-gradient(180deg, #5C8A6E 0%, #3E6249 100%);
color: #F4F1E9;
border-color: rgba(184, 149, 64, 0.45);
}
.nyc-label { font: 500 11px/1 'Noto Sans SC',sans-serif; letter-spacing: 0.2em; color: #8A7A55; margin-bottom: 8px; }
.nayin-cell.is-day .nyc-label { color: rgba(244, 241, 233, 0.75); }
.nyc-gz { font: 700 26px/1 'Ma Shan Zheng','Noto Serif SC',serif; color: #1F2A24; margin-bottom: 8px; letter-spacing: 0.05em; }
.nayin-cell.is-day .nyc-gz { color: #F4F1E9; }
.nyc-nayin {
font: 600 13px/1.4 'Noto Serif SC',serif;
color: #B89540;
background: rgba(184, 149, 64, 0.1);
padding: 4px 8px;
border-radius: 12px;
display: inline-block;
letter-spacing: 0.08em;
}
.nayin-cell.is-day .nyc-nayin { background: rgba(244, 241, 233, 0.18); color: #F4F1E9; }
/* 神煞卡片 */
.shensha-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.shensha-card {
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 10px;
padding: 14px 16px;
background: rgba(244, 241, 233, 0.55);
transition: transform 0.25s, box-shadow 0.25s;
position: relative;
overflow: hidden;
}
.shensha-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.shensha-card.ss-good { background: linear-gradient(120deg, rgba(92, 138, 110, 0.08) 0%, rgba(244, 241, 233, 0.55) 100%); }
.shensha-card.ss-good::before { background: #5C8A6E; }
.shensha-card.ss-bad { background: linear-gradient(120deg, rgba(200, 71, 62, 0.08) 0%, rgba(244, 241, 233, 0.55) 100%); }
.shensha-card.ss-bad::before { background: #C8473E; }
.shensha-card.ss-mid::before { background: #B89540; }
.shensha-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(184, 149, 64, 0.18); }
.ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ss-name { font: 700 16px/1.2 'Noto Serif SC',serif; color: #1F2A24; letter-spacing: 0.04em; }
.ss-attr {
font: 600 10px/1 'Noto Sans SC',sans-serif;
padding: 3px 8px;
border-radius: 10px;
background: rgba(184, 149, 64, 0.15);
color: #6B5635;
}
.ss-good .ss-attr { background: rgba(92, 138, 110, 0.18); color: #3E6249; }
.ss-bad .ss-attr { background: rgba(200, 71, 62, 0.18); color: #8A332D; }
.ss-zhi { font: 500 12px/1.3 'Noto Sans SC',sans-serif; color: #B89540; margin-bottom: 6px; }
.ss-desc { font: 400 12px/1.55 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 刑冲合害 */
.relations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.rel-cell {
padding: 12px 14px;
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 10px;
background: rgba(244, 241, 233, 0.5);
}
.rel-good { background: linear-gradient(135deg, rgba(92, 138, 110, 0.08) 0%, rgba(244, 241, 233, 0.5) 100%); border-color: rgba(92, 138, 110, 0.3); }
.rel-bad { background: linear-gradient(135deg, rgba(200, 71, 62, 0.08) 0%, rgba(244, 241, 233, 0.5) 100%); border-color: rgba(200, 71, 62, 0.3); }
.rel-mid { background: linear-gradient(135deg, rgba(184, 149, 64, 0.08) 0%, rgba(244, 241, 233, 0.5) 100%); }
.rel-h { font: 700 14px/1 'Noto Serif SC',serif; margin-bottom: 6px; color: #1F2A24; letter-spacing: 0.05em; }
.rel-good .rel-h { color: #3E6249; }
.rel-bad .rel-h { color: #8A332D; }
.rel-desc { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; margin-bottom: 8px; }
.rel-hits { display: flex; flex-wrap: wrap; gap: 4px; }
.rel-tag {
font: 500 11px/1.4 'Noto Sans SC',sans-serif;
padding: 2px 8px;
background: rgba(184, 149, 64, 0.16);
color: #6B5635;
border-radius: 8px;
}
.rel-good .rel-tag { background: rgba(92, 138, 110, 0.2); color: #3E6249; }
.rel-bad .rel-tag { background: rgba(200, 71, 62, 0.2); color: #8A332D; }
.rel-none { font: 500 11px/1.4 'Noto Sans SC',sans-serif; color: #A8A39A; }
/* 空亡 */
.kongwang-card {
background: linear-gradient(135deg, rgba(184, 149, 64, 0.08) 0%, rgba(244, 241, 233, 0.6) 100%);
border: 1px solid rgba(184, 149, 64, 0.25);
border-radius: 10px;
padding: 16px 20px;
}
.kw-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.kw-line:last-child { margin-bottom: 0; }
.kw-label { font: 600 13px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.05em; }
.kw-tag { font: 600 14px/1 'Ma Shan Zheng',serif; padding: 6px 12px; background: rgba(184, 149, 64, 0.18); color: #6B5635; border-radius: 16px; }
.kw-hit { padding: 8px 0; border-top: 1px dashed rgba(184, 149, 64, 0.3); margin-top: 8px; padding-top: 12px; }
.kw-hit-tag {
font: 600 13px/1 'Noto Serif SC',serif;
padding: 6px 12px;
background: rgba(200, 71, 62, 0.18);
color: #8A332D;
border-radius: 16px;
}
.kw-tip { font: 400 12px/1.5 'Noto Sans SC',sans-serif; color: #8A7A55; margin-top: 8px; }
.kw-no { font: 500 12px/1.4 'Noto Sans SC',sans-serif; color: #5C8A6E; }
@media (max-width: 768px) {
.nayin-row { grid-template-columns: repeat(2, 1fr); }
.shensha-grid { grid-template-columns: 1fr; }
}
/* 暗色模式适配 */
[data-theme="dark"] .nayin-cell:not(.is-day) { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .nyc-gz { color: #E8E0CC !important; }
[data-theme="dark"] .shensha-card { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .ss-name { color: #E8E0CC !important; }
[data-theme="dark"] .ss-desc { color: #C8C5BE !important; }
[data-theme="dark"] .rel-cell { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .kongwang-card { background: rgba(28, 35, 42, 0.7) !important; }
/* ================================================================ */
/* Pass 3:大运十年图谱 + 流月十二月 + 合盘入口 */
/* ================================================================ */
.dayun-graph { margin-bottom: 36px; }
.dyg-axis {
display: flex; justify-content: space-between;
font: 500 11px/1 'Noto Sans SC',sans-serif;
color: #8A7A55;
letter-spacing: 0.2em;
margin-bottom: 6px;
}
.dyg-track {
display: flex;
gap: 4px;
background: linear-gradient(90deg, rgba(184, 149, 64, 0.04) 0%, rgba(244, 241, 233, 0.5) 100%);
border-radius: 12px;
padding: 8px;
border: 1px solid rgba(184, 149, 64, 0.18);
}
.dyg-bar {
flex: 1; min-width: 0;
position: relative;
height: 110px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
transition: transform 0.3s, box-shadow 0.3s;
cursor: default;
}
.dyg-bar:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(20, 24, 29, 0.18); z-index: 2; }
.dyg-bar.is-past .dyg-bar-fill {
position: absolute; inset: 0;
background: rgba(20, 24, 29, 0.55);
backdrop-filter: grayscale(0.6);
}
.dyg-bar.is-future .dyg-bar-fill {
position: absolute; inset: 0;
background: rgba(244, 241, 233, 0.42);
}
.dyg-bar.is-current {
transform: scaleY(1.08);
box-shadow: 0 0 0 2px #B89540, 0 8px 28px rgba(184, 149, 64, 0.45);
z-index: 3;
}
.dyg-bar.is-current .dyg-bar-fill {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(184, 149, 64, 0.1) 0%, transparent 100%);
animation: dyg-pulse 2.4s ease-in-out infinite;
}
@keyframes dyg-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.dyg-bar-meta {
position: relative;
z-index: 2;
height: 100%;
padding: 8px 6px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center;
color: #F4F1E9;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.dyg-bar.is-future .dyg-bar-meta { color: #4A4035; text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
.dyg-age { font: 500 10px/1.3 'Inter',sans-serif; opacity: 0.85; }
.dyg-gz { font: 700 22px/1 'Ma Shan Zheng','Noto Serif SC',serif; margin: 4px 0; letter-spacing: 0.05em; }
.dyg-year { font: 400 10px/1 'Inter',sans-serif; opacity: 0.75; margin-bottom: 6px; }
.dyg-tag {
font: 700 10px/1 'Noto Sans SC',sans-serif;
padding: 3px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
color: #B89540;
letter-spacing: 0.1em;
}
.dyg-tag-past, .dyg-tag-fut {
font: 500 9px/1 'Noto Sans SC',sans-serif;
padding: 2px 6px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.9);
}
.dyg-bar.is-future .dyg-tag-fut { background: rgba(184, 149, 64, 0.2); color: #6B5635; }
/* 流月 */
.liuyue-h5 {
margin: 24px 0 16px;
font: 600 16px/1.4 'Noto Serif SC', serif;
color: #6B5635;
text-align: center;
letter-spacing: 0.08em;
}
.liuyue-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 6px;
}
.ly-cell {
position: relative;
text-align: center;
padding: 10px 4px 8px;
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(244, 241, 233, 0.55) 0%, rgba(232, 224, 204, 0.35) 100%);
transition: transform 0.25s, box-shadow 0.25s;
}
.ly-cell::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, var(--ly-g1) 0%, var(--ly-g2) 100%);
}
.ly-cell:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(184, 149, 64, 0.22); }
.ly-cell.is-now {
background: linear-gradient(180deg, rgba(184, 149, 64, 0.18) 0%, rgba(244, 241, 233, 0.55) 100%);
border-color: #B89540;
box-shadow: 0 4px 14px rgba(184, 149, 64, 0.3);
}
.ly-month { font: 600 12px/1.2 'Noto Serif SC',serif; color: #6B5635; }
.ly-gz { font: 700 14px/1.2 'Ma Shan Zheng',serif; color: #1F2A24; margin: 4px 0; }
.ly-elems { display: flex; gap: 3px; justify-content: center; }
.ly-e {
font: 600 9px/1 'Noto Sans SC',sans-serif;
padding: 2px 5px;
border-radius: 6px;
}
.ly-now-tag {
position: absolute;
top: -8px; right: -4px;
font: 700 9px/1 'Noto Sans SC',sans-serif;
background: #B89540;
color: #fff;
padding: 3px 6px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(184, 149, 64, 0.4);
}
@media (max-width: 992px) {
.dyg-bar { height: 90px; }
.dyg-gz { font-size: 18px; }
.liuyue-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 576px) {
.dyg-track { padding: 4px; }
.dyg-bar { height: 80px; }
.dyg-gz { font-size: 14px; }
.dyg-age, .dyg-year { font-size: 8px; }
.liuyue-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 合盘入口 CTA */
.hepan-cta {
display: flex; align-items: center; gap: 16px;
margin-top: 28px;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(92, 138, 110, 0.1) 0%, rgba(184, 149, 64, 0.08) 100%);
border: 1px solid rgba(184, 149, 64, 0.28);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.hepan-cta::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(184, 149, 64, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.hepan-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #5C8A6E, #3E6249);
color: #F4F1E9;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hepan-info { flex: 1; }
.hepan-title { font: 700 15px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 4px; letter-spacing: 0.05em; }
.hepan-desc { font: 400 12px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
.hepan-btn {
background: linear-gradient(135deg, #B89540, #8A7A55) !important;
border: none !important;
color: #F4F1E9 !important;
font-weight: 600 !important;
box-shadow: 0 3px 10px rgba(184, 149, 64, 0.3);
}
.hepan-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(184, 149, 64, 0.45); }
[data-theme="dark"] .dyg-track { background: rgba(28, 35, 42, 0.5) !important; }
[data-theme="dark"] .ly-cell:not(.is-now) { background: rgba(28, 35, 42, 0.65) !important; }
[data-theme="dark"] .ly-gz { color: #E8E0CC !important; }
[data-theme="dark"] .hepan-cta { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .hepan-title { color: #E8E0CC !important; }
/* ===== 双人合盘页 ===== */
.hepan-form {
display: flex; align-items: end; gap: 16px;
padding: 20px;
background: rgba(244, 241, 233, 0.55);
border: 1px solid rgba(184, 149, 64, 0.2);
border-radius: 12px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.hpf-col { flex: 1; min-width: 200px; }
.hpf-col label { display: block; font: 500 12px/1.4 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 6px; letter-spacing: 0.1em; }
.hpf-col select {
width: 100%; padding: 9px 12px;
border: 1px solid rgba(184, 149, 64, 0.3);
border-radius: 8px;
font: 500 13px/1.4 'Noto Sans SC',sans-serif;
background: rgba(255, 255, 255, 0.7);
color: #1F2A24;
}
.hpf-vs {
align-self: center;
font: 700 26px/1 'Ma Shan Zheng',serif;
color: #B89540;
margin-top: 20px;
}
.hpf-go { align-self: end; height: 41px; }
.hp-cards {
display: grid;
grid-template-columns: 1fr 200px 1fr;
gap: 16px;
align-items: stretch;
margin-bottom: 24px;
}
.hp-card {
padding: 18px 20px;
background: linear-gradient(180deg, rgba(244, 241, 233, 0.7) 0%, rgba(232, 224, 204, 0.5) 100%);
border: 1px solid rgba(184, 149, 64, 0.22);
border-radius: 12px;
}
.hp-name { font: 700 18px/1 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; letter-spacing: 0.05em; }
.hp-meta { font: 400 11px/1.4 'Noto Sans SC',sans-serif; color: #8A7A55; margin-bottom: 10px; }
.hp-bz { font: 700 17px/1 'Ma Shan Zheng',serif; color: #B89540; margin-bottom: 14px; letter-spacing: 0.08em; }
.hp-row { display: flex; justify-content: space-between; font: 500 12px/1.4 'Noto Sans SC',sans-serif; color: #6B5635; padding: 4px 0; border-top: 1px dashed rgba(184, 149, 64, 0.18); }
.hp-row:first-of-type { border-top: none; }
.hp-yong { color: #5C8A6E; font-weight: 600; }
.hp-ji { color: #C8473E; font-weight: 600; }
.hp-center {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 20px;
}
.hp-ring { width: 140px; height: 140px; }
.hp-score-num {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -65%);
font: 700 38px/1 'Inter',sans-serif;
color: #1F2A24;
}
.hp-score-label {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, 20%);
font: 500 10px/1 'Noto Sans SC',sans-serif;
color: #8A7A55;
letter-spacing: 0.2em;
}
.hp-grade {
margin-top: 8px;
padding: 5px 14px;
border-radius: 14px;
font: 700 12px/1 'Noto Serif SC',serif;
letter-spacing: 0.1em;
}
.hp-summary {
padding: 14px 20px;
background: rgba(184, 149, 64, 0.06);
border-left: 4px solid #B89540;
border-radius: 0 8px 8px 0;
font: 500 14px/1.6 'Noto Serif SC',serif;
color: #6B5635;
margin-bottom: 24px;
}
.hp-notes { display: flex; flex-direction: column; gap: 8px; }
.hp-notes-h { font: 600 14px/1 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 6px; letter-spacing: 0.05em; }
.hp-note {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 14px;
border-radius: 8px;
font: 400 13px/1.5 'Noto Sans SC',sans-serif;
}
.hp-note.hp-good { background: rgba(92, 138, 110, 0.1); color: #3E6249; }
.hp-note.hp-good i { color: #5C8A6E; }
.hp-note.hp-bad { background: rgba(200, 71, 62, 0.1); color: #8A332D; }
.hp-note.hp-bad i { color: #C8473E; }
.hp-note.hp-mid { background: rgba(184, 149, 64, 0.1); color: #6B5635; }
.hp-note.hp-mid i { color: #B89540; }
.hp-empty { padding: 32px; text-align: center; color: #8A8478; font-size: 14px; }
@media (max-width: 768px) {
.hp-cards { grid-template-columns: 1fr; }
.hp-center { order: 1; }
}
[data-theme="dark"] .hepan-form, [data-theme="dark"] .hp-card { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .hpf-col select { background: rgba(28, 35, 42, 0.7) !important; color: #E8E0CC !important; }
[data-theme="dark"] .hp-name { color: #E8E0CC !important; }
[data-theme="dark"] .hp-score-num { color: #E8E0CC !important; }
/* ================================================================ */
/* 双人合盘 V2 — 深度匹配版 */
/* ================================================================ */
.hepan-page-v2 { background: rgba(255,255,255,0.85); border-radius: 16px; }
.hepan-page-v2 .hp-page-head { border-bottom: 1px solid rgba(184,149,64,0.18); }
.hepan-page-v2 .hp-page-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 1.85rem;
letter-spacing: 4px;
color: #2D2418;
}
/* === 表单卡(选 A B + 关系 + Top3)=== */
.hp-form-card {
background: linear-gradient(135deg, rgba(245,237,224,0.9), rgba(232,221,208,0.85));
border: 1px solid rgba(184,149,64,0.25);
border-radius: 14px;
padding: 24px;
margin-bottom: 28px;
}
.hepan-form-v2 { display: flex; flex-direction: column; gap: 18px; }
.hpfv-row { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.hpfv-col { flex: 1; min-width: 220px; }
.hpfv-lbl {
display: block;
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 12px;
color: #6B5635;
letter-spacing: 0.18em;
margin-bottom: 6px;
font-weight: 600;
}
.hpfv-sel {
width: 100%;
padding: 10px 14px;
border: 1.5px solid rgba(184,149,64,0.35);
border-radius: 10px;
background: white;
font-size: 15px;
font-family: inherit;
color: #2D2418;
}
.hpfv-sel:focus { outline: none; border-color: #B89540; box-shadow: 0 0 0 3px rgba(184,149,64,0.18); }
.hpfv-vs {
font-size: 28px;
color: #B89540;
padding: 0 4px 6px;
align-self: end;
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
}
.hpfv-rel { align-items: center; gap: 16px; }
.hpfv-rels { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.hpfv-rel-opt {
display: inline-flex;
align-items: center;
padding: 8px 14px;
background: white;
border: 1.5px solid rgba(184,149,64,0.25);
border-radius: 999px;
font-size: 13px;
color: #6B5635;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 1px;
user-select: none;
position: relative;
}
/* 隐藏 input 但保留可访问性 + 让 label 包裹整个 click 区域 */
.hpfv-rel-opt input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
inset: 0;
margin: 0;
cursor: pointer;
z-index: 1;
}
.hpfv-rel-opt:hover { border-color: #B89540; color: #2D2418; background: rgba(184,149,64,0.05); }
/* 选中态:同时支持 PHP 渲染的 .active 与 CSS :has() 即时反馈 */
.hpfv-rel-opt.active,
.hpfv-rel-opt:has(input:checked) {
background: linear-gradient(135deg, #B89540, #D2AC55);
color: white;
border-color: #B89540;
box-shadow: 0 4px 12px rgba(184,149,64,0.35);
font-weight: 600;
}
.hpfv-buttons { gap: 0; }
.hpfv-go {
height: 44px;
padding: 0 22px;
font-size: 14px;
letter-spacing: 2px;
background: linear-gradient(135deg, #6B5635, #8A6F44);
color: white;
border: none;
}
.hp-error {
margin-top: 14px;
padding: 12px 16px;
background: rgba(200,71,62,0.08);
border-left: 3px solid #C8473E;
color: #C8473E;
border-radius: 8px;
font-size: 14px;
}
/* === Top 3 推荐 === */
.hp-top3 { margin-bottom: 32px; }
.hp-top3-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 16px;
}
.hp-top3-card {
position: relative;
padding: 20px 18px;
background: white;
border: 1.5px solid rgba(184,149,64,0.25);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: all 0.2s;
text-align: center;
}
.hp-top3-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(184,149,64,0.25); border-color: #B89540; }
.hp-top3-rank {
position: absolute; top: -10px; left: 14px;
background: linear-gradient(135deg, #B89540, #D2AC55);
color: white; font-size: 12px; font-weight: 700;
padding: 3px 10px; border-radius: 999px; letter-spacing: 1px;
}
.hp-top3-name { font-family: var(--font-serif,'Noto Serif SC',serif); font-size: 17px; font-weight: 600; color: #2D2418; margin: 4px 0; }
.hp-top3-meta { font-size: 12px; color: #8A8478; margin-bottom: 12px; letter-spacing: 1px; }
.hp-top3-score { font-family: 'DM Serif Display', serif; font-size: 44px; line-height: 1; font-weight: 400; margin-bottom: 6px; }
.hp-top3-grade { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
/* === Summary Band: 双人卡 + 中心 score === */
.hp-summary-band {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
margin-bottom: 24px;
padding: 28px;
background: linear-gradient(135deg, rgba(245,237,224,0.6), rgba(232,221,208,0.5));
border-radius: 16px;
border: 1px solid rgba(184,149,64,0.2);
}
.hp-person-card {
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 14px;
padding: 20px 22px;
position: relative;
}
.hpp-rel-tag {
position: absolute; top: -10px; left: 20px;
background: #B89540; color: white;
font-size: 11px; padding: 3px 10px; border-radius: 999px;
letter-spacing: 2px; font-weight: 700;
}
.hpp-name {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 22px; font-weight: 700; color: #2D2418;
margin: 4px 0;
}
.hpp-meta { font-size: 12px; color: #6B5635; letter-spacing: 1px; margin-bottom: 12px; }
.hpp-bazi {
display: flex; gap: 6px; margin-bottom: 14px;
}
.hpp-pillar {
flex: 1;
text-align: center;
padding: 8px 4px;
background: rgba(184,149,64,0.08);
border: 1px solid rgba(184,149,64,0.2);
border-radius: 8px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 18px;
font-weight: 700;
color: #2D2418;
}
.hpp-pillar.hpp-day { background: linear-gradient(135deg, #B8954022, #D2AC5511); border-color: #B89540; }
.hpp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hpp-tag {
padding: 3px 10px;
background: rgba(184,149,64,0.1);
border-radius: 999px;
font-size: 12px;
color: #6B5635;
}
.hp-center-v2 {
position: relative;
width: 200px; height: 240px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hp-ring-big { width: 200px; height: 200px; }
.hp-center-score {
position: absolute;
top: 60px;
font-family: 'DM Serif Display', serif;
font-size: 64px;
color: #2D2418;
line-height: 1;
}
.hp-center-lbl {
position: absolute;
top: 138px;
font-size: 12px;
color: #6B5635;
letter-spacing: 4px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hp-center-grade {
margin-top: 200px;
padding: 4px 16px;
border-radius: 999px;
border: 1.5px solid;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
}
.hp-center-rel {
margin-top: 6px;
font-size: 11px;
color: #8A8478;
letter-spacing: 2px;
}
.hp-summary-text {
margin: 0 0 32px;
padding: 14px 18px;
background: rgba(184,149,64,0.06);
border-left: 4px solid;
border-radius: 0 10px 10px 0;
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 16px;
color: #2D2418;
letter-spacing: 1px;
}
/* === Section 通用 === */
.hp-section { margin-bottom: 36px; }
.hp-section-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(184,149,64,0.2);
flex-wrap: wrap;
}
.hp-section-icon {
font-size: 22px;
color: #B89540;
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
}
.hp-section-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 20px;
font-weight: 700;
color: #2D2418;
letter-spacing: 2px;
}
.hp-section-sub {
font-size: 12px;
color: #8A8478;
letter-spacing: 1px;
}
/* === 雷达图 === */
.hp-radar-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.hp-radar-svg { width: 100%; max-width: 460px; height: auto; }
.hp-dim-bars { display: flex; flex-direction: column; gap: 10px; max-width: 600px; margin: 0 auto; }
.hp-dim-row { display: grid; grid-template-columns: 140px 1fr 40px; gap: 12px; align-items: center; }
.hp-dim-lbl { font-family: var(--font-serif,'Noto Serif SC',serif); font-size: 14px; color: #2D2418; font-weight: 600; letter-spacing: 1px; }
.hp-dim-track { height: 12px; background: rgba(184,149,64,0.12); border-radius: 999px; overflow: hidden; }
.hp-dim-fill { height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.hp-dim-val { font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 700; text-align: right; }
/* === 评分明细(可折叠)=== */
.hp-breakdown {
margin-top: 24px;
background: rgba(245,237,224,0.4);
border: 1px solid rgba(184,149,64,0.25);
border-radius: 12px;
padding: 0;
overflow: hidden;
}
.hp-breakdown-h {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px;
cursor: pointer;
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px;
font-weight: 600;
color: #2D2418;
letter-spacing: 1px;
list-style: none;
user-select: none;
transition: background 0.2s;
}
.hp-breakdown-h::-webkit-details-marker { display: none; }
.hp-breakdown-h:hover { background: rgba(184,149,64,0.06); }
.hp-breakdown-icon {
font-size: 18px; color: #B89540;
}
.hp-breakdown-hint {
margin-left: auto;
font-size: 12px;
color: #8A8478;
letter-spacing: 0.5px;
font-weight: 400;
transition: transform 0.2s;
}
.hp-breakdown[open] .hp-breakdown-hint { transform: rotate(180deg); }
.hp-breakdown-body {
padding: 14px 20px 20px;
border-top: 1px dashed rgba(184,149,64,0.2);
background: white;
}
.hp-breakdown-intro {
padding: 10px 14px;
margin-bottom: 16px;
background: rgba(184,149,64,0.08);
border-left: 3px solid #B89540;
border-radius: 0 8px 8px 0;
font-size: 13px;
line-height: 1.7;
color: #2D2418;
}
.hp-breakdown-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.hp-bd-card {
border: 1px solid rgba(184,149,64,0.18);
border-radius: 10px;
overflow: hidden;
background: white;
}
.hp-bd-card-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hp-bd-name { font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.hp-bd-score { font-family: 'DM Serif Display', serif; font-size: 24px; font-weight: 700; }
.hp-bd-formula {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 14px;
border-bottom: 1px dashed rgba(184,149,64,0.15);
font-size: 12px;
align-items: center;
}
.hp-bd-base, .hp-bd-pos, .hp-bd-neg, .hp-bd-final {
padding: 2px 8px;
border-radius: 6px;
font-weight: 700;
font-family: 'DM Serif Display', serif;
}
.hp-bd-base { background: rgba(184,149,64,0.1); color: #6B5635; }
.hp-bd-pos { background: rgba(92,138,110,0.15); color: #5C8A6E; }
.hp-bd-neg { background: rgba(200,71,62,0.12); color: #C8473E; }
.hp-bd-eq { color: #8A8478; padding: 0 4px; }
.hp-bd-final { font-size: 14px; }
.hp-bd-list { list-style: none; padding: 8px 14px 12px; margin: 0; }
.hp-bd-item {
display: flex; align-items: baseline; gap: 10px;
padding: 4px 0;
font-size: 13px;
line-height: 1.6;
border-bottom: 1px dotted rgba(184,149,64,0.1);
}
.hp-bd-item:last-child { border-bottom: none; }
.hp-bd-delta {
flex: 0 0 40px;
font-family: 'DM Serif Display', serif;
font-weight: 700;
text-align: center;
font-size: 14px;
}
.hp-bd-good .hp-bd-delta { color: #5C8A6E; }
.hp-bd-bad .hp-bd-delta { color: #C8473E; }
.hp-bd-reason { color: #2D2418; flex: 1; }
.hp-bd-none {
padding: 12px 0;
color: #8A8478;
font-size: 13px;
font-style: italic;
text-align: center;
}
/* === 相处密码 vs 雷区 === */
.hp-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp-pair-col {
padding: 20px 22px;
border-radius: 14px;
border: 1.5px solid;
}
.hp-pair-pos { background: linear-gradient(135deg, rgba(92,138,110,0.08), rgba(124,168,130,0.04)); border-color: rgba(92,138,110,0.35); }
.hp-pair-neg { background: linear-gradient(135deg, rgba(200,71,62,0.06), rgba(138,51,45,0.03)); border-color: rgba(200,71,62,0.35); }
.hp-pair-head {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 16px; font-weight: 700; letter-spacing: 2px;
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed currentColor; opacity: 0.95;
}
.hp-pair-pos .hp-pair-head { color: #5C8A6E; }
.hp-pair-neg .hp-pair-head { color: #C8473E; }
.hp-pair-icon { font-size: 20px; margin-right: 6px; }
.hp-pair-list { list-style: none; padding: 0; margin: 0; }
.hp-pair-list li {
position: relative;
padding: 8px 0 8px 22px;
font-size: 14px; line-height: 1.7;
color: #2D2418;
border-bottom: 1px dashed rgba(184,149,64,0.15);
}
.hp-pair-list li:last-child { border-bottom: none; }
.hp-pair-pos .hp-pair-list li::before { content: '✓'; position: absolute; left: 0; color: #5C8A6E; font-weight: 700; }
.hp-pair-neg .hp-pair-list li::before { content: '✕'; position: absolute; left: 0; color: #C8473E; font-weight: 700; }
/* === 具体行动 === */
.hp-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.hp-action-card {
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-left: 4px solid;
border-radius: 10px;
padding: 16px 18px;
}
.hp-action-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
}
.hp-action-text { font-size: 14px; line-height: 1.7; color: #2D2418; }
/* === 共振 === */
.hp-reson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp-reson-card {
padding: 18px 22px;
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 12px;
position: relative;
}
.hp-reson-lbl { font-size: 13px; color: #6B5635; letter-spacing: 1px; font-weight: 600; margin-bottom: 10px; font-family: var(--font-serif,'Noto Serif SC',serif); }
.hp-reson-bar { height: 14px; background: rgba(184,149,64,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.hp-reson-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, #B89540, #D2AC55);
transition: width 0.8s ease;
}
.hp-reson-val {
position: absolute; top: 14px; right: 22px;
font-family: 'DM Serif Display', serif; font-size: 36px; line-height: 1; color: #B89540;
}
.hp-reson-meta { font-size: 12px; color: #8A8478; letter-spacing: 0.5px; line-height: 1.7; }
/* === 神煞 === */
.hp-sha-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hp-sha-card {
padding: 18px 14px;
background: white;
border: 1.5px solid rgba(184,149,64,0.18);
border-radius: 12px;
text-align: center;
opacity: 0.45;
transition: all 0.3s;
}
.hp-sha-card.has { opacity: 1; border-color: #B89540; box-shadow: 0 4px 14px rgba(184,149,64,0.18); }
.hp-sha-card.has.good { border-color: #5C8A6E; }
.hp-sha-card.has.bad { border-color: #C8473E; }
.hp-sha-icon { font-size: 28px; color: #B89540; }
.hp-sha-card.has.good .hp-sha-icon { color: #5C8A6E; }
.hp-sha-card.has.bad .hp-sha-icon { color: #C8473E; }
.hp-sha-name {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 14px; font-weight: 600; color: #2D2418; margin: 6px 0 10px;
letter-spacing: 1px;
}
.hp-sha-status { display: flex; justify-content: center; gap: 6px; }
.hp-sha-flag {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(184,149,64,0.1);
color: #8A8478;
font-size: 11px; font-weight: 700;
}
.hp-sha-flag.on { background: #B89540; color: white; }
.hp-sha-card.has.good .hp-sha-flag.on { background: #5C8A6E; }
.hp-sha-card.has.bad .hp-sha-flag.on { background: #C8473E; }
/* === 详细注释 === */
.hp-notes-v2 { display: flex; flex-direction: column; gap: 18px; }
.hp-notes-grp {
padding: 16px 20px;
border-radius: 12px;
border: 1px solid;
}
.hp-notes-good { background: rgba(92,138,110,0.04); border-color: rgba(92,138,110,0.3); }
.hp-notes-mid-grp { background: rgba(184,149,64,0.04); border-color: rgba(184,149,64,0.3); }
.hp-notes-bad { background: rgba(200,71,62,0.04); border-color: rgba(200,71,62,0.3); }
.hp-notes-grp-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 14px; font-weight: 700; letter-spacing: 2px;
margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed currentColor;
}
.hp-notes-good .hp-notes-grp-h { color: #5C8A6E; }
.hp-notes-mid-grp .hp-notes-grp-h { color: #B89540; }
.hp-notes-bad .hp-notes-grp-h { color: #C8473E; }
.hp-note {
padding: 6px 0; font-size: 14px; line-height: 1.7; color: #2D2418;
border-bottom: 1px dashed rgba(184,149,64,0.12);
}
.hp-note:last-child { border-bottom: none; }
/* === 底部按钮 === */
.hp-bottom-actions {
display: flex; gap: 12px;
justify-content: center;
margin-top: 36px; padding-top: 24px;
border-top: 1px solid rgba(184,149,64,0.2);
flex-wrap: wrap;
}
/* === 历史记录 === */
.hp-history { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(184,149,64,0.2); }
.hp-history-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.hp-history-row {
display: grid;
grid-template-columns: 2fr 1fr 80px 90px 130px;
gap: 12px;
align-items: center;
padding: 12px 16px;
background: white;
border: 1px solid rgba(184,149,64,0.15);
border-radius: 10px;
text-decoration: none; color: inherit;
transition: all 0.2s;
}
.hp-history-row:hover { border-color: #B89540; background: rgba(184,149,64,0.04); }
.hp-history-pair { font-family: var(--font-serif,'Noto Serif SC',serif); font-weight: 600; color: #2D2418; }
.hp-history-rel { font-size: 12px; color: #6B5635; letter-spacing: 1px; }
.hp-history-score { font-family: 'DM Serif Display', serif; font-size: 24px; font-weight: 700; text-align: center; }
.hp-history-grade { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; letter-spacing: 1px; }
.hp-history-time { font-size: 11px; color: #8A8478; text-align: right; letter-spacing: 0.5px; }
/* === 移动响应式 === */
@media (max-width: 768px) {
.hepan-page-v2 .hp-page-title { font-size: 1.4rem !important; letter-spacing: 2px !important; }
.hp-form-card { padding: 16px !important; }
.hpfv-row { gap: 10px !important; }
.hpfv-col { min-width: 100% !important; flex: 100% !important; }
.hpfv-vs { display: none !important; }
.hpfv-rels { gap: 6px !important; }
.hpfv-rel-opt { font-size: 12px !important; padding: 6px 12px !important; }
.hp-top3-grid { grid-template-columns: 1fr !important; }
.hp-summary-band { grid-template-columns: 1fr !important; padding: 16px !important; gap: 16px !important; }
.hp-center-v2 { order: -1; margin: 0 auto; }
.hp-pair-grid { grid-template-columns: 1fr !important; }
.hp-reson-grid { grid-template-columns: 1fr !important; }
.hp-sha-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hp-actions-grid { grid-template-columns: 1fr !important; }
.hp-dim-row { grid-template-columns: 110px 1fr 36px !important; gap: 8px !important; }
.hp-dim-lbl { font-size: 12px !important; }
.hp-history-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.hp-history-time, .hp-history-rel { text-align: left !important; }
.hp-bottom-actions .btn { width: 100% !important; }
.hpp-name { font-size: 18px !important; }
.hpp-pillar { font-size: 14px !important; padding: 6px 2px !important; }
.hp-center-score { font-size: 50px !important; top: 50px !important; }
.hp-center-v2 { width: 180px; height: 220px; }
.hp-ring-big { width: 180px; height: 180px; }
.hp-radar-svg { max-width: 100% !important; }
.hp-section-title { font-size: 16px !important; letter-spacing: 1px !important; }
}
@media (max-width: 480px) {
.hp-sha-grid { grid-template-columns: 1fr 1fr !important; }
.hpfv-rels { flex-direction: column; }
.hpfv-rel-opt { width: 100%; text-align: center; }
}
/* === 配偶星画像 === */
.hp-spouse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp-spouse-card {
padding: 20px 22px;
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 12px;
}
.hp-spouse-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px dashed rgba(184,149,64,0.25);
}
.hp-spouse-tag {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px; font-weight: 700; color: #2D2418; letter-spacing: 2px;
}
.hp-spouse-gender {
font-size: 11px; color: #8A8478; letter-spacing: 1px;
background: rgba(184,149,64,0.1); padding: 3px 10px; border-radius: 999px;
}
.hp-spouse-expect { font-size: 14px; color: #6B5635; margin-bottom: 8px; }
.hp-spouse-expect strong { color: #B89540; letter-spacing: 1px; }
.hp-spouse-profile {
margin-bottom: 12px; padding: 10px 14px;
background: rgba(184,149,64,0.06);
border-radius: 8px;
font-size: 13px; color: #2D2418; line-height: 1.7;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
}
.hp-spouse-actual { font-size: 13px; color: #2D2418; line-height: 1.8; }
.hp-spouse-hit { display: inline-block; margin-left: 8px; padding: 2px 10px; background: #5C8A6E22; color: #5C8A6E; border-radius: 999px; font-weight: 700; font-size: 12px; }
.hp-spouse-miss { display: inline-block; margin-left: 8px; padding: 2px 10px; background: #B8954022; color: #B89540; border-radius: 999px; font-size: 12px; }
/* === 五行能量重叠 === */
.hp-merge-chart { background: white; border: 1px solid rgba(184,149,64,0.2); border-radius: 12px; padding: 20px 24px; }
.hp-merge-row {
display: grid;
grid-template-columns: 50px 1fr 80px;
gap: 16px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed rgba(184,149,64,0.12);
}
.hp-merge-row:last-child { border-bottom: none; }
.hp-merge-lbl {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 24px;
font-weight: 700;
text-align: center;
}
.hp-merge-bars { display: flex; flex-direction: column; gap: 4px; }
.hp-merge-bar {
position: relative;
height: 16px;
background: rgba(184,149,64,0.06);
border-radius: 999px;
overflow: hidden;
}
.hp-merge-fill {
height: 100%;
border-radius: 999px;
transition: width 0.8s ease;
}
.hp-merge-val {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
font-weight: 700;
color: #2D2418;
letter-spacing: 0.5px;
text-shadow: 0 0 4px white;
}
.hp-merge-sum {
font-family: 'DM Serif Display', serif;
font-size: 22px;
font-weight: 700;
text-align: right;
}
.hp-merge-note {
margin-top: 14px; padding: 14px 18px;
background: rgba(92,138,110,0.05);
border-left: 3px solid #5C8A6E;
border-radius: 0 10px 10px 0;
}
.hp-merge-note-line {
font-size: 14px; color: #2D2418; line-height: 1.8;
}
.hp-merge-tag {
display: inline-block;
padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 700;
margin-right: 8px; letter-spacing: 1px;
}
/* === 同居环境推荐 === */
.hp-env-good { margin-bottom: 22px; }
.hp-env-grp-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px; font-weight: 700; letter-spacing: 2px;
margin-bottom: 12px;
color: #5C8A6E;
}
.hp-env-bad .hp-env-grp-h { color: #C8473E; }
.hp-env-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.hp-env-card {
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
}
.hp-env-card.is-shared {
border: 2px solid #5C8A6E;
box-shadow: 0 6px 18px rgba(92,138,110,0.18);
}
.hp-env-card-head {
padding: 14px 18px;
color: white;
display: flex; justify-content: space-between; align-items: center;
}
.hp-env-wx {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 26px;
font-weight: 700;
letter-spacing: 4px;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.hp-env-shared-tag {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.hp-env-card-body { padding: 16px 18px; }
.hp-env-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px dashed rgba(184,149,64,0.12);
font-size: 13px;
line-height: 1.6;
}
.hp-env-item:last-child { border-bottom: none; }
.hp-env-item-lbl {
flex: 0 0 70px;
font-size: 11px;
color: #6B5635;
letter-spacing: 1px;
font-weight: 600;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hp-env-item-val { color: #2D2418; flex: 1; }
.hp-env-color-chips { display: inline-flex; align-items: center; gap: 6px; }
.hp-env-color-chip {
display: inline-block;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.hp-env-avoid-list { display: flex; flex-direction: column; gap: 8px; }
.hp-env-avoid-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: rgba(200,71,62,0.04);
border-left: 3px solid #C8473E;
border-radius: 0 8px 8px 0;
font-size: 13px; line-height: 1.6;
color: #2D2418;
}
.hp-env-avoid-wx {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 18px;
font-weight: 700;
padding: 4px 12px;
border-radius: 8px;
letter-spacing: 2px;
}
/* === 移动响应 === */
@media (max-width: 768px) {
.hp-spouse-grid { grid-template-columns: 1fr !important; }
.hp-merge-row { grid-template-columns: 40px 1fr 60px !important; gap: 10px !important; }
.hp-merge-lbl { font-size: 20px !important; }
.hp-merge-sum { font-size: 18px !important; }
.hp-env-cards { grid-template-columns: 1fr !important; }
}
/* ================================================================ */
/* 双人关系造运系统报告(16 章深度版)— map_hepan_report.php */
/* 视觉系统 v2 · Aesop 高端精装本风格 */
/* ================================================================ */
:root {
/* 主色调 — 古铜 / 暖灰 / 墨色 */
--hpr-bronze: #B89540;
--hpr-bronze-d: #8A6F44;
--hpr-bronze-l: #D2AC55;
--hpr-bronze-xl: #E8D5A0;
--hpr-paper: #F5EDE0;
--hpr-paper-d: #E8DDD0;
--hpr-ink: #2D2418;
--hpr-ink-l: #6B5635;
--hpr-ink-xl: #8A8478;
--hpr-good: #5C8A6E;
--hpr-good-l: #7CA882;
--hpr-bad: #C8473E;
--hpr-bad-d: #8A332D;
--hpr-warn: #D8964A;
--hpr-cool: #4A5D6B;
--hpr-seal-red: #C8473E;
}
.hpr-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 32px 20px 80px;
font-family: var(--font-serif, 'Noto Serif SC', serif);
color: var(--hpr-ink);
position: relative;
}
/* 内容 fade-in 动画 */
.hpr-chapter,
.hpr-cover,
.hpr-toc {
animation: hprFadeUp 0.6s ease-out backwards;
}
@keyframes hprFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hpr-chapter:nth-child(2) { animation-delay: 0.05s; }
.hpr-chapter:nth-child(3) { animation-delay: 0.1s; }
.hpr-chapter:nth-child(4) { animation-delay: 0.15s; }
/* === 封面 — 精装本式 === */
.hpr-cover {
text-align: center;
padding: 110px 32px 80px;
background:
radial-gradient(ellipse at top, rgba(184,149,64,0.08) 0%, transparent 55%),
radial-gradient(ellipse at bottom, rgba(184,149,64,0.06) 0%, transparent 50%),
linear-gradient(180deg, rgba(245,237,224,0.95), rgba(232,221,208,0.92));
border-radius: 20px;
margin-bottom: 48px;
position: relative;
overflow: hidden;
box-shadow:
0 1px 2px rgba(184,149,64,0.1),
0 12px 32px rgba(184,149,64,0.12),
inset 0 0 0 1px rgba(184,149,64,0.3);
}
/* 云纹背景 SVG */
.hpr-cover-pattern {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
}
/* 内描金双边框 */
.hpr-cover::before {
content: '';
position: absolute;
top: 18px; left: 18px; right: 18px; bottom: 18px;
border: 1.5px solid rgba(184,149,64,0.3);
border-radius: 14px;
pointer-events: none;
z-index: 1;
}
.hpr-cover::after {
content: '';
position: absolute;
top: 28px; left: 28px; right: 28px; bottom: 28px;
border: 0.5px solid rgba(184,149,64,0.18);
border-radius: 10px;
pointer-events: none;
z-index: 1;
}
/* 四角唐草纹 SVG */
.hpr-corner-tl, .hpr-corner-tr, .hpr-corner-bl, .hpr-corner-br {
position: absolute;
width: 70px; height: 70px;
z-index: 2;
pointer-events: none;
}
.hpr-corner-tl { top: 24px; left: 24px; }
.hpr-corner-tr { top: 24px; right: 24px; transform: scaleX(-1); }
.hpr-corner-bl { bottom: 24px; left: 24px; transform: scaleY(-1); }
.hpr-corner-br { bottom: 24px; right: 24px; transform: scale(-1, -1); }
/* 顶部八卦小符 */
.hpr-cover-bagua {
position: absolute;
top: 56px; left: 50%;
transform: translateX(-50%);
width: 44px; height: 44px;
z-index: 2;
animation: baguaSlowRotate 60s linear infinite;
}
@keyframes baguaSlowRotate {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
/* 让封面内容浮在背景之上 */
.hpr-cover > *:not(.hpr-cover-pattern) {
position: relative;
z-index: 3;
}
.hpr-cover-title {
font-family: var(--font-serif, 'Noto Serif SC', serif);
font-size: 3.2rem;
color: var(--hpr-ink);
letter-spacing: 12px;
line-height: 1.25;
font-weight: 700;
text-indent: 12px; /* 补偿字间距 */
margin: 0;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.hpr-cover-subtitle {
font-family: 'DM Serif Display', 'Cormorant Garamond', serif;
font-size: 13px;
color: var(--hpr-bronze-d);
letter-spacing: 6px;
margin-top: 14px;
font-style: italic;
text-transform: uppercase;
}
.hpr-cover-divider,
.hpr-cover-bottom-divider {
width: 240px;
height: 24px;
margin: 32px auto;
}
.hpr-cover-divider svg,
.hpr-cover-bottom-divider svg {
width: 100%; height: 100%;
}
.hpr-cover-bottom-divider {
margin: 28px auto 0;
}
/* 元信息卡 */
.hpr-cover-meta-card {
display: inline-block;
margin: 32px auto 0;
padding: 18px 32px;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(184,149,64,0.3);
border-radius: 12px;
backdrop-filter: blur(4px);
min-width: 320px;
text-align: left;
}
.hpr-cover-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px dashed rgba(184,149,64,0.18);
}
.hpr-cover-meta-row:last-child { border-bottom: none; }
.hpr-cover-meta-lbl {
font-size: 11px;
color: var(--hpr-ink-l);
letter-spacing: 3px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hpr-cover-meta-val {
font-size: 14px;
color: var(--hpr-ink);
font-weight: 600;
letter-spacing: 1px;
}
.hpr-cover-pair {
display: flex; align-items: center; justify-content: center;
gap: 40px;
margin: 32px 0 18px;
}
.hpr-cover-name {
font-family: var(--font-wenkai, 'LXGW WenKai TC', serif);
font-size: 40px;
font-weight: 700;
color: var(--hpr-ink);
letter-spacing: 6px;
position: relative;
padding: 0 12px;
}
.hpr-cover-name::before,
.hpr-cover-name::after {
content: '';
position: absolute;
width: 28px; height: 1px;
background: var(--hpr-bronze);
top: 50%;
opacity: 0.5;
}
.hpr-cover-name::before { right: 100%; }
.hpr-cover-name::after { left: 100%; }
.hpr-cover-cross {
font-size: 32px;
color: var(--hpr-bronze);
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
opacity: 0.85;
}
.hpr-cover-meta {
font-size: 13px;
color: var(--hpr-ink-l);
letter-spacing: 4px;
margin-top: 14px;
line-height: 2;
}
.hpr-cover-date {
font-size: 11px;
color: var(--hpr-ink-xl);
letter-spacing: 3px;
margin-top: 6px;
font-family: 'Inter', sans-serif;
}
.hpr-cover-actions {
margin-top: 44px;
display: flex; gap: 14px; justify-content: center;
}
/* === 目录 === */
.hpr-toc {
padding: 32px 40px;
background: white;
border: 1px solid rgba(184,149,64,0.18);
border-radius: 16px;
margin-bottom: 48px;
box-shadow: 0 4px 18px rgba(184,149,64,0.06);
position: relative;
}
.hpr-toc::before {
content: '目 录';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--hpr-paper);
padding: 0 18px;
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
font-size: 13px;
color: var(--hpr-bronze);
letter-spacing: 8px;
}
.hpr-toc-h {
display: none; /* 用 ::before 替代 */
}
.hpr-toc-list {
columns: 2;
column-gap: 40px;
list-style: none;
padding: 0;
margin: 0;
counter-reset: hprtoc;
}
.hpr-toc-list li {
counter-increment: hprtoc;
padding: 9px 0;
font-size: 14px;
break-inside: avoid;
border-bottom: 1px dotted rgba(184,149,64,0.18);
position: relative;
transition: padding 0.2s;
}
.hpr-toc-list li:last-child,
.hpr-toc-list li:nth-last-child(2) { border-bottom: none; }
.hpr-toc-list li::before {
content: counter(hprtoc, cjk-decimal);
color: var(--hpr-bronze);
font-weight: 700;
margin-right: 12px;
font-family: var(--font-serif,'Noto Serif SC',serif);
display: inline-block;
min-width: 22px;
}
.hpr-toc-list li:hover { padding-left: 8px; }
.hpr-toc-list a {
color: var(--hpr-ink);
text-decoration: none;
transition: color 0.2s;
letter-spacing: 0.5px;
}
.hpr-toc-list li:hover a { color: var(--hpr-bronze); }
/* === 章节通用 === */
.hpr-chapter {
margin-bottom: 56px;
padding: 48px 48px 40px;
background:
/* 角落唐草纹 4 角 */
url("data:image/svg+xml;utf8,") left top no-repeat,
url("data:image/svg+xml;utf8,") right top no-repeat,
url("data:image/svg+xml;utf8,") left bottom no-repeat,
url("data:image/svg+xml;utf8,") right bottom no-repeat,
white;
background-size: 42px 42px, 42px 42px, 42px 42px, 42px 42px, auto;
border: 1px solid rgba(184,149,64,0.15);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(184,149,64,0.2),
0 4px 18px rgba(184,149,64,0.05),
0 18px 50px rgba(45,36,24,0.04);
scroll-margin-top: 80px;
position: relative;
overflow: hidden;
}
/* 章节顶部金线 */
.hpr-chapter::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--hpr-bronze) 20%, var(--hpr-bronze-l) 50%, var(--hpr-bronze) 80%, transparent);
opacity: 0.7;
z-index: 2;
}
/* 章节右下淡水印 */
.hpr-chapter::after {
content: '';
position: absolute;
right: 24px; bottom: 48px;
width: 110px; height: 110px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
/* 章节间分隔花 — JS 注入 */
.hpr-chapter-sep {
width: 100%;
height: 36px;
margin: 8px 0;
display: flex;
justify-content: center;
align-items: center;
animation: hprFadeUp 0.8s ease-out backwards;
}
.hpr-chapter-sep svg {
width: 320px; height: 30px;
}
.hpr-ch-h {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 36px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(184,149,64,0.15);
position: relative;
z-index: 1;
}
.hpr-ch-h::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 80px;
height: 2px;
background: var(--hpr-bronze);
}
/* 章节专属 emblem 图腾 */
.hpr-ch-emblem {
flex-shrink: 0;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%),
linear-gradient(135deg, var(--hpr-paper), var(--hpr-paper-d));
border: 1.5px solid var(--hpr-bronze);
border-radius: 50%;
font-size: 22px;
color: var(--hpr-bronze);
box-shadow:
0 4px 12px rgba(184,149,64,0.2),
inset 0 0 0 2px rgba(255,255,255,0.5),
inset 0 -2px 4px rgba(184,149,64,0.15);
position: relative;
transition: transform 0.3s;
}
.hpr-ch-emblem:hover { transform: rotate(15deg); }
.hpr-ch-emblem::before {
content: '';
position: absolute;
inset: -6px;
border: 1px dashed rgba(184,149,64,0.35);
border-radius: 50%;
pointer-events: none;
animation: emblemSpin 30s linear infinite;
}
@keyframes emblemSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hpr-ch-num {
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
font-size: 38px;
color: var(--hpr-bronze);
letter-spacing: 0;
line-height: 1;
flex-shrink: 0;
background: linear-gradient(135deg, var(--hpr-bronze), var(--hpr-bronze-l));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(184,149,64,0.15);
}
.hpr-ch-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 1.9rem;
font-weight: 700;
color: var(--hpr-ink);
letter-spacing: 4px;
line-height: 1.3;
flex: 1;
}
/* 章节标题右侧装饰 — 中式回纹简化 */
.hpr-ch-deco {
flex-shrink: 0;
width: 100px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
}
/* === Ch1 总评 === */
.hpr-total-card {
display: grid;
grid-template-columns: 240px 1fr;
gap: 36px;
align-items: center;
padding: 36px 40px;
background: linear-gradient(135deg, rgba(245,237,224,0.7), rgba(232,221,208,0.5));
border-radius: 16px;
margin-bottom: 28px;
border: 1px solid rgba(184,149,64,0.18);
position: relative;
overflow: hidden;
}
.hpr-total-card::before {
content: '';
position: absolute;
top: -50%; right: -20%;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(184,149,64,0.08), transparent 70%);
pointer-events: none;
}
.hpr-total-score-block {
text-align: center;
position: relative;
padding: 24px 12px;
background: white;
border-radius: 14px;
border: 1px solid rgba(184,149,64,0.2);
box-shadow: 0 4px 14px rgba(184,149,64,0.08);
}
.hpr-total-score {
font-family: 'DM Serif Display', serif;
font-size: 96px;
line-height: 1;
font-weight: 400;
text-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.hpr-total-lbl {
font-size: 11px;
color: var(--hpr-ink-l);
letter-spacing: 5px;
margin-top: 8px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hpr-total-grade {
display: inline-block;
margin-top: 14px;
padding: 6px 18px;
border-radius: 999px;
border: 1.5px solid;
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
}
.hpr-total-rel {
margin-top: 10px;
font-size: 11px;
color: var(--hpr-ink-xl);
letter-spacing: 3px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hpr-positioning {
font-size: 17px;
line-height: 2;
color: var(--hpr-ink);
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
margin-bottom: 18px;
letter-spacing: 0.5px;
text-indent: 2em;
}
.hpr-grade-desc {
padding: 14px 20px;
background: rgba(184,149,64,0.06);
border-left: 3px solid var(--hpr-bronze);
border-radius: 0 10px 10px 0;
font-size: 15px;
color: var(--hpr-ink-l);
letter-spacing: 2px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-style: italic;
}
.hpr-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 18px 0;
}
.hpr-good-card,
.hpr-bad-card {
padding: 18px 20px;
border-radius: 12px;
border: 1.5px solid;
}
.hpr-good-card { background: rgba(92,138,110,0.05); border-color: rgba(92,138,110,0.3); }
.hpr-bad-card { background: rgba(200,71,62,0.05); border-color: rgba(200,71,62,0.3); }
.hpr-good-h, .hpr-bad-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px dashed currentColor;
}
.hpr-good-h { color: #5C8A6E; }
.hpr-bad-h { color: #C8473E; }
.hpr-good-card ul, .hpr-bad-card ul {
list-style: none; padding: 0; margin: 0;
}
.hpr-good-card li, .hpr-bad-card li {
padding: 6px 0 6px 22px;
font-size: 14px;
line-height: 1.7;
position: relative;
border-bottom: 1px dashed rgba(184,149,64,0.12);
}
.hpr-good-card li:last-child, .hpr-bad-card li:last-child { border-bottom: none; }
.hpr-good-card li::before { content: '✓'; position: absolute; left: 0; color: #5C8A6E; font-weight: 700; }
.hpr-bad-card li::before { content: '✕'; position: absolute; left: 0; color: #C8473E; font-weight: 700; }
.hpr-potential {
margin-top: 18px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(184,149,64,0.06), rgba(210,172,85,0.04));
border-left: 4px solid #B89540;
border-radius: 0 12px 12px 0;
}
.hpr-potential-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px; font-weight: 700; color: #B89540;
letter-spacing: 2px; margin-bottom: 6px;
}
.hpr-potential-text { font-size: 14px; line-height: 1.8; color: #2D2418; }
/* === Ch2 一句话 — 印章式引文 === */
.hpr-oneliner {
padding: 56px 40px;
background:
radial-gradient(ellipse at center, rgba(184,149,64,0.05), transparent 70%),
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, rgba(245,237,224,0.5), rgba(232,221,208,0.3));
background-size: auto, 80px 80px, auto;
border-radius: 16px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 22px;
line-height: 2.2;
color: var(--hpr-ink);
text-align: center;
letter-spacing: 3px;
font-weight: 500;
position: relative;
margin: 16px 0;
border: 1px solid rgba(184,149,64,0.2);
}
/* 引号装饰 */
.hpr-oneliner::before,
.hpr-oneliner::after {
font-family: 'DM Serif Display', serif;
font-size: 80px;
color: var(--hpr-bronze);
opacity: 0.45;
position: absolute;
line-height: 1;
}
.hpr-oneliner::before { content: '"'; top: 14px; left: 32px; }
.hpr-oneliner::after { content: '"'; bottom: -10px; right: 32px; }
/* === 表格通用 — 轻量优雅 === */
.hpr-table-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid rgba(184,149,64,0.15);
background:
url("data:image/svg+xml;utf8,") repeat-x bottom,
white;
background-size: 20px 20px, auto;
position: relative;
}
.hpr-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.75;
background: white;
}
.hpr-table thead th {
background: rgba(184,149,64,0.08);
color: var(--hpr-ink-l);
padding: 14px 18px;
text-align: left;
font-family: var(--font-serif,'Noto Serif SC',serif);
font-weight: 600;
letter-spacing: 2px;
font-size: 12px;
text-transform: uppercase;
border-bottom: 2px solid var(--hpr-bronze);
}
.hpr-table tbody td {
padding: 14px 18px;
border-bottom: 1px solid rgba(184,149,64,0.08);
vertical-align: top;
transition: background 0.15s;
}
.hpr-table tbody tr:last-child td { border-bottom: none; }
.hpr-table tbody tr:hover td { background: rgba(184,149,64,0.04); }
.hpr-cell-lbl { font-weight: 700; color: var(--hpr-bronze-d); letter-spacing: 1px; white-space: nowrap; font-family: var(--font-serif,'Noto Serif SC',serif); }
.hpr-cell-code { font-weight: 700; color: var(--hpr-bronze); font-family: var(--font-wenkai,'LXGW WenKai TC',serif); }
.hpr-cell-source { color: var(--hpr-ink-l); font-style: italic; font-size: 13px; }
.hpr-cell-meaning { color: var(--hpr-ink); }
.hpr-cell-amplify { color: var(--hpr-good); font-weight: 500; }
.hpr-cell-unfixed { color: var(--hpr-bad); font-size: 13px; }
.hpr-cell-solution { color: var(--hpr-good); font-weight: 600; }
.hpr-row-good td { background: rgba(92,138,110,0.04) !important; }
.hpr-row-bad td { background: rgba(200,71,62,0.04) !important; }
/* === Ch4 七维度卡 — 精致独立卡 === */
.hpr-dim-cards { display: flex; flex-direction: column; gap: 24px; }
.hpr-dim-card {
border: 1px solid rgba(184,149,64,0.15);
border-radius: 14px;
overflow: hidden;
background: white;
box-shadow: 0 2px 12px rgba(184,149,64,0.05);
transition: transform 0.25s, box-shadow 0.25s;
}
.hpr-dim-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(184,149,64,0.12);
}
.hpr-dim-head {
display: flex; justify-content: space-between; align-items: center;
padding: 22px 28px;
background: linear-gradient(90deg, rgba(245,237,224,0.4), rgba(232,221,208,0.2));
border-bottom: 1px solid rgba(184,149,64,0.1);
}
.hpr-dim-name {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 20px; font-weight: 700; color: var(--hpr-ink);
letter-spacing: 3px;
}
.hpr-dim-score-block { display: flex; align-items: baseline; gap: 14px; }
.hpr-dim-score {
font-family: 'DM Serif Display', serif;
font-size: 48px; line-height: 1; font-weight: 400;
text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.hpr-dim-level {
padding: 5px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.hpr-dim-body {
padding: 8px 28px 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 28px;
}
.hpr-dim-row {
padding: 16px 0;
border-bottom: 1px dashed rgba(184,149,64,0.15);
}
.hpr-dim-row:nth-last-child(-n+2) { border-bottom: none; }
.hpr-dim-row.hpr-dim-reality,
.hpr-dim-row.hpr-dim-improve,
.hpr-dim-row.hpr-dim-potential { grid-column: 1 / -1; }
.hpr-dim-row-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 12px; font-weight: 700; letter-spacing: 3px;
color: var(--hpr-ink-l); margin-bottom: 10px;
text-transform: uppercase;
}
.hpr-dim-pos .hpr-dim-row-h { color: var(--hpr-good); }
.hpr-dim-neg .hpr-dim-row-h { color: var(--hpr-bad); }
.hpr-dim-reality .hpr-dim-row-h { color: var(--hpr-cool); }
.hpr-dim-improve .hpr-dim-row-h { color: var(--hpr-bronze); }
.hpr-dim-potential .hpr-dim-row-h { color: var(--hpr-good-l); }
.hpr-dim-row ul { list-style: none; padding: 0; margin: 0; }
.hpr-dim-row li { padding: 6px 0; font-size: 13px; line-height: 1.8; color: var(--hpr-ink); }
.hpr-delta-pos {
color: var(--hpr-good);
font-weight: 700;
font-family: 'DM Serif Display', serif;
font-size: 16px;
margin-right: 8px;
display: inline-block;
min-width: 30px;
}
.hpr-delta-neg {
color: var(--hpr-bad);
font-weight: 700;
font-family: 'DM Serif Display', serif;
font-size: 16px;
margin-right: 8px;
display: inline-block;
min-width: 30px;
}
.hpr-dim-text {
font-size: 14px;
line-height: 1.9;
color: var(--hpr-ink);
padding: 8px 14px;
background: rgba(184,149,64,0.04);
border-radius: 8px;
border-left: 2px solid currentColor;
}
.hpr-dim-reality .hpr-dim-text { border-left-color: var(--hpr-cool); }
.hpr-dim-improve .hpr-dim-text { border-left-color: var(--hpr-bronze); }
.hpr-dim-potential .hpr-dim-text { border-left-color: var(--hpr-good-l); }
/* === Ch8 机制卡 — 精装编号卡 === */
.hpr-mech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 16px;
}
.hpr-mech-card {
display: flex;
gap: 18px;
padding: 22px 24px;
background: white;
border: 1px solid rgba(184,149,64,0.15);
border-radius: 14px;
transition: all 0.25s;
position: relative;
overflow: hidden;
}
.hpr-mech-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--hpr-bronze-l), var(--hpr-bronze));
transition: width 0.25s;
}
.hpr-mech-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(184,149,64,0.15);
border-color: var(--hpr-bronze);
}
.hpr-mech-card:hover::before { width: 8px; }
.hpr-mech-num {
flex-shrink: 0;
width: 48px; height: 48px;
background: linear-gradient(135deg, var(--hpr-bronze), var(--hpr-bronze-l));
color: white;
font-family: 'DM Serif Display', serif;
font-size: 26px; font-weight: 400;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow:
0 4px 12px rgba(184,149,64,0.3),
inset 0 2px 4px rgba(255,255,255,0.2);
}
.hpr-mech-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 16px; font-weight: 700; color: var(--hpr-ink);
margin-bottom: 6px; letter-spacing: 2px;
}
.hpr-mech-detail {
font-size: 13px; line-height: 1.8; color: var(--hpr-ink-l);
}
.hpr-callout {
margin-top: 28px;
padding: 22px 28px;
background:
radial-gradient(ellipse at center, rgba(255,255,255,0.1), transparent 70%),
linear-gradient(135deg, var(--hpr-bronze), var(--hpr-bronze-d));
color: white;
border-radius: 14px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 17px;
line-height: 2;
text-align: center;
letter-spacing: 2px;
box-shadow:
0 8px 24px rgba(184,149,64,0.3),
inset 0 0 0 1px rgba(255,255,255,0.15);
position: relative;
}
.hpr-callout::before,
.hpr-callout::after {
content: '◆';
position: absolute;
color: rgba(255,255,255,0.4);
font-size: 14px;
top: 50%;
transform: translateY(-50%);
}
.hpr-callout::before { left: 18px; }
.hpr-callout::after { right: 18px; }
/* === Ch9 SOP === */
.hpr-sop-block {
margin-bottom: 20px;
padding: 20px 24px;
background: rgba(245,237,224,0.5);
border-radius: 12px;
border: 1px solid rgba(184,149,64,0.2);
}
.hpr-sop-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 16px;
font-weight: 700;
color: #B89540;
letter-spacing: 2px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(184,149,64,0.3);
}
.hpr-sop-list {
margin: 0; padding-left: 28px;
}
.hpr-sop-list li {
padding: 6px 0;
font-size: 14px;
line-height: 1.7;
color: #2D2418;
}
/* === Ch10 五行造运 === */
.hpr-sub-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 16px; font-weight: 700;
letter-spacing: 2px;
margin: 18px 0 12px;
padding: 8px 14px;
background: rgba(184,149,64,0.06);
border-left: 3px solid #B89540;
border-radius: 0 8px 8px 0;
}
.hpr-wx-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.hpr-wx-card {
padding: 18px;
background: white;
border: 1.5px solid rgba(92,138,110,0.35);
border-radius: 12px;
text-align: center;
}
.hpr-wx-char {
width: 60px; height: 60px;
margin: 0 auto 12px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 30px; font-weight: 700;
color: white;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.hpr-wx-meaning {
font-size: 13px; line-height: 1.7; color: #2D2418;
margin-bottom: 10px;
}
.hpr-wx-dir {
font-size: 12px; color: #6B5635; letter-spacing: 1px;
padding: 6px 12px;
background: rgba(184,149,64,0.08);
border-radius: 999px; display: inline-block;
}
.hpr-wx-avoid-card {
padding: 18px 22px;
background: rgba(200,71,62,0.04);
border-left: 4px solid #C8473E;
border-radius: 0 12px 12px 0;
margin-bottom: 14px;
}
.hpr-wx-avoid-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
}
.hpr-wx-avoid-char {
padding: 6px 14px;
border-radius: 8px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 20px; font-weight: 700;
}
.hpr-wx-avoid-meaning { font-size: 13px; color: #6B5635; }
.hpr-wx-risk {
padding: 10px 14px;
background: rgba(200,71,62,0.08);
border-radius: 8px;
font-size: 13px; line-height: 1.7;
color: #2D2418;
margin-bottom: 10px;
}
.hpr-wx-avoid-list-h {
font-size: 12px;
font-weight: 700;
color: #C8473E;
letter-spacing: 1px;
margin-bottom: 4px;
}
.hpr-wx-avoid-list {
margin: 0; padding-left: 24px;
font-size: 13px; line-height: 1.7;
}
/* === Ch11 环境表 === */
.hpr-note {
margin-top: 14px;
padding: 12px 16px;
background: rgba(184,149,64,0.06);
border-left: 3px solid #B89540;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #6B5635;
line-height: 1.7;
}
/* === Ch12 共振 === */
.hpr-reson-card {
padding: 16px 20px;
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 12px;
position: relative;
}
.hpr-reson-lbl { font-size: 13px; color: #6B5635; letter-spacing: 1px; margin-bottom: 10px; font-weight: 600; }
.hpr-reson-bar { height: 14px; background: rgba(184,149,64,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.hpr-reson-fill { height: 100%; background: linear-gradient(90deg, #B89540, #D2AC55); border-radius: 999px; }
.hpr-reson-val {
position: absolute; top: 12px; right: 18px;
font-family: 'DM Serif Display', serif;
font-size: 32px; line-height: 1; color: #B89540;
font-weight: 700;
}
/* === Ch13 预警灯 — 红绿灯式 === */
.hpr-warning-grid { display: flex; flex-direction: column; gap: 12px; }
.hpr-warning-card {
display: flex; align-items: center; gap: 20px;
padding: 18px 24px;
background: white;
border-radius: 12px;
border: 1px solid rgba(184,149,64,0.12);
transition: all 0.2s;
}
.hpr-warning-card:hover {
transform: translateX(4px);
box-shadow: 0 6px 18px rgba(184,149,64,0.1);
}
.hpr-warning-light {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
color: white;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
font-size: 22px;
font-weight: 700;
box-shadow:
0 4px 14px rgba(0,0,0,0.15),
inset 0 -3px 6px rgba(0,0,0,0.2),
inset 0 3px 6px rgba(255,255,255,0.25);
position: relative;
animation: lightPulse 2.4s ease-in-out infinite;
}
.hpr-warning-light::before {
content: '';
position: absolute;
top: 8px; left: 12px;
width: 14px; height: 8px;
background: rgba(255,255,255,0.4);
border-radius: 50%;
filter: blur(2px);
}
@keyframes lightPulse {
0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.15), inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 3px 6px rgba(255,255,255,0.25); }
50% { box-shadow: 0 4px 22px currentColor, inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 3px 6px rgba(255,255,255,0.3); }
}
.hpr-warning-signal {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px; font-weight: 700; color: var(--hpr-ink);
margin-bottom: 6px; letter-spacing: 1px;
}
.hpr-warning-action {
font-size: 13px; color: var(--hpr-ink-l); line-height: 1.7;
}
/* === Ch14 30 天 === */
.hpr-30d-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.hpr-30d-card {
padding: 18px 20px;
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 12px;
}
.hpr-30d-head {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px;
font-weight: 700;
color: #B89540;
letter-spacing: 2px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(184,149,64,0.2);
}
.hpr-30d-tasks {
list-style: none; padding: 0; margin: 0;
}
.hpr-30d-tasks li {
padding: 6px 0 6px 22px;
font-size: 13px;
line-height: 1.7;
position: relative;
border-bottom: 1px dashed rgba(184,149,64,0.1);
}
.hpr-30d-tasks li:last-child { border-bottom: none; }
.hpr-30d-tasks li::before {
content: '☐';
position: absolute; left: 0;
color: #B89540;
}
/* === Ch15 90 天复盘 — 笔记本式 === */
.hpr-90d-list {
display: flex; flex-direction: column; gap: 0;
background:
repeating-linear-gradient(
transparent,
transparent 56px,
rgba(184,149,64,0.08) 56px,
rgba(184,149,64,0.08) 57px
);
padding: 4px 0;
border-radius: 12px;
border: 1px solid rgba(184,149,64,0.15);
background-color: white;
}
.hpr-90d-item {
display: grid;
grid-template-columns: 50px 1fr 50px;
gap: 16px;
align-items: center;
padding: 14px 22px;
transition: all 0.2s;
cursor: pointer;
}
.hpr-90d-item:hover { background: rgba(184,149,64,0.04); }
.hpr-90d-num {
width: 36px; height: 36px;
background: white;
color: var(--hpr-bronze);
border: 1.5px solid var(--hpr-bronze);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'DM Serif Display', serif;
font-size: 17px;
font-weight: 700;
}
.hpr-90d-text {
font-size: 14px;
color: var(--hpr-ink);
line-height: 1.7;
letter-spacing: 0.5px;
}
.hpr-90d-check {
text-align: center;
color: var(--hpr-bronze);
font-size: 26px;
transition: all 0.2s;
}
.hpr-90d-item:hover .hpr-90d-check { color: var(--hpr-good); transform: scale(1.15); }
/* === Ch16 终章 === */
.hpr-final {
background: linear-gradient(135deg, rgba(245,237,224,0.8), rgba(232,221,208,0.7));
position: relative;
overflow: hidden;
}
.hpr-final-text {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 16px;
line-height: 2.1;
color: #2D2418;
margin-bottom: 24px;
padding: 18px 22px;
background: rgba(255,255,255,0.6);
border-radius: 12px;
border-left: 4px solid #B89540;
}
.hpr-final-next-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px;
color: #B89540;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 8px;
}
.hpr-final-next ul {
list-style: none; padding: 0; margin: 0;
}
.hpr-final-next li {
padding: 6px 0;
font-size: 14px;
color: #2D2418;
line-height: 1.7;
}
.hpr-final-seal {
display: flex; align-items: center; gap: 32px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px dashed rgba(184,149,64,0.3);
position: relative;
}
/* 传统朱红方印 */
.hpr-seal {
width: 110px; height: 110px;
background:
radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.15), transparent 50%),
linear-gradient(135deg, #D4524A 0%, #C8473E 50%, #A03A33 100%);
color: white;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
box-shadow:
0 0 0 2px rgba(200,71,62,0.18),
0 6px 22px rgba(200,71,62,0.35),
inset 0 0 0 4px rgba(255,255,255,0.18),
inset 0 0 0 5px rgba(160,58,51,0.4);
flex-shrink: 0;
transform: rotate(-4deg);
position: relative;
transition: transform 0.3s;
}
.hpr-seal:hover { transform: rotate(-2deg) scale(1.05); }
.hpr-seal::before {
/* 印章纹理 */
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 3px;
}
.hpr-seal span {
font-family: var(--font-seal,'ZCOOL QingKe HuangYou',serif);
font-size: 22px;
text-align: center;
letter-spacing: 3px;
line-height: 1.4;
font-weight: 700;
text-shadow: 0 1px 1px rgba(0,0,0,0.18);
position: relative;
z-index: 1;
}
.hpr-seal-meta {
font-size: 12px;
color: var(--hpr-ink-l);
line-height: 2.1;
letter-spacing: 1.5px;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hpr-seal-meta div:first-child {
color: var(--hpr-bronze);
font-weight: 700;
font-family: 'DM Serif Display', serif;
letter-spacing: 2px;
font-size: 13px;
}
/* === 底部按钮 === */
.hpr-bottom-actions {
margin-top: 48px;
display: flex; gap: 14px; justify-content: center;
padding: 24px;
background: rgba(184,149,64,0.04);
border-radius: 14px;
border: 1px dashed rgba(184,149,64,0.25);
}
/* ================================================================ */
/* 18 章升级 · 新增组件:本章结论 / 花晶专章 / 合规章 */
/* ================================================================ */
/* === 本章结论 banner === */
.hpr-conclusion {
display: flex;
align-items: flex-start;
gap: 14px;
margin: -16px 0 28px;
padding: 14px 20px;
background: linear-gradient(135deg, rgba(184,149,64,0.08), rgba(210,172,85,0.04));
border-left: 4px solid var(--hpr-bronze);
border-radius: 0 12px 12px 0;
position: relative;
z-index: 1;
}
.hpr-conclusion::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("data:image/svg+xml;utf8,") repeat;
background-size: 60px 60px;
pointer-events: none;
border-radius: inherit;
}
.hpr-conclusion-tag {
flex-shrink: 0;
padding: 4px 12px;
background: linear-gradient(135deg, var(--hpr-bronze), var(--hpr-bronze-l));
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
font-family: var(--font-serif,'Noto Serif SC',serif);
box-shadow: 0 2px 6px rgba(184,149,64,0.3);
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
white-space: nowrap;
z-index: 2;
position: relative;
}
.hpr-conclusion-text {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 15px;
line-height: 1.85;
color: var(--hpr-ink);
letter-spacing: 0.5px;
z-index: 2;
position: relative;
}
/* === Ch11 宇威花晶专章 === */
.hpr-flower-chapter {
background:
url("data:image/svg+xml;utf8,") repeat,
white !important;
background-size: 100px 100px, auto !important;
border-color: rgba(138,111,185,0.3) !important;
}
.hpr-flower-chapter::before {
background: linear-gradient(90deg, transparent, #8A6FB9 20%, #C9897A 50%, #B89540 80%, transparent) !important;
opacity: 0.85 !important;
height: 4px !important;
}
.hpr-flower-intro {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 16px;
line-height: 2;
color: var(--hpr-ink);
padding: 20px 24px;
background: linear-gradient(135deg, rgba(138,111,185,0.04), rgba(184,149,64,0.02));
border-radius: 12px;
margin-bottom: 24px;
border: 1px solid rgba(138,111,185,0.15);
}
.hpr-flower-balance {
padding: 12px 16px;
background: rgba(216,150,74,0.08);
border-left: 3px solid var(--hpr-warn);
border-radius: 0 8px 8px 0;
font-size: 14px;
color: var(--hpr-ink);
margin: 16px 0 24px;
line-height: 1.8;
}
/* 5 花晶卡 */
.hpr-flower-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.hpr-flower-card {
background: white;
border: 1.5px solid rgba(184,149,64,0.15);
border-radius: 14px;
overflow: hidden;
transition: all 0.25s;
position: relative;
}
.hpr-flower-card.is-primary {
border-color: var(--fc-color);
box-shadow: 0 8px 24px color-mix(in srgb, var(--fc-color) 25%, transparent);
transform: translateY(-2px);
}
.hpr-flower-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.hpr-flower-head {
padding: 18px 22px;
background: linear-gradient(135deg, var(--fc-color), color-mix(in srgb, var(--fc-color) 80%, white));
color: white;
position: relative;
}
.hpr-flower-cn {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 22px;
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.hpr-flower-en {
font-family: 'DM Serif Display','Cormorant Garamond',serif;
font-size: 12px;
letter-spacing: 4px;
opacity: 0.85;
margin-top: 4px;
font-style: italic;
text-transform: uppercase;
}
.hpr-flower-tag {
position: absolute;
top: 14px; right: 14px;
padding: 3px 10px;
background: rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.hpr-flower-body { padding: 14px 22px 18px; }
.hpr-flower-row {
display: flex;
gap: 12px;
padding: 8px 0;
border-bottom: 1px dashed rgba(184,149,64,0.15);
font-size: 13px;
line-height: 1.7;
}
.hpr-flower-row:last-child { border-bottom: none; }
.hpr-flower-lbl {
flex: 0 0 64px;
font-size: 11px;
color: var(--hpr-ink-l);
letter-spacing: 2px;
font-weight: 600;
font-family: var(--font-serif,'Noto Serif SC',serif);
}
.hpr-flower-val { color: var(--hpr-ink); flex: 1; }
.hpr-flower-use { color: var(--hpr-bronze-d); font-style: italic; font-size: 12px; }
/* 4 大组合卡 */
.hpr-combo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.hpr-combo-card {
background: white;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 14px;
padding: 20px 22px;
position: relative;
transition: all 0.25s;
}
.hpr-combo-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(184,149,64,0.12);
}
.hpr-combo-num {
position: absolute;
top: 16px; right: 18px;
font-family: 'DM Serif Display', serif;
font-size: 26px;
color: var(--hpr-bronze-l);
opacity: 0.5;
}
.hpr-combo-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 17px;
font-weight: 700;
color: var(--hpr-ink);
letter-spacing: 2px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(184,149,64,0.25);
}
.hpr-combo-pair {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.hpr-combo-item {
padding: 6px 14px;
border-radius: 999px;
border: 1.5px solid;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.hpr-combo-plus {
color: var(--hpr-bronze);
font-size: 18px;
font-weight: 700;
}
.hpr-combo-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-size: 13px;
line-height: 1.7;
}
.hpr-combo-lbl {
flex: 0 0 64px;
font-size: 11px;
color: var(--hpr-ink-l);
letter-spacing: 2px;
font-weight: 600;
}
.hpr-combo-val { color: var(--hpr-ink); }
.hpr-combo-purpose {
margin-top: 12px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(184,149,64,0.08), rgba(210,172,85,0.04));
border-radius: 8px;
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 13px;
color: var(--hpr-ink-l);
line-height: 1.8;
font-style: italic;
}
/* 3 分钟仪式 */
.hpr-ritual-flow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-top: 16px;
}
.hpr-ritual-step {
display: flex;
gap: 16px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(138,111,185,0.05), rgba(184,149,64,0.03));
border: 1px solid rgba(138,111,185,0.2);
border-radius: 12px;
}
.hpr-ritual-num {
flex-shrink: 0;
width: 36px; height: 36px;
background: linear-gradient(135deg, #8A6FB9, #B89540);
color: white;
font-family: 'DM Serif Display', serif;
font-size: 18px;
font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(138,111,185,0.3);
}
.hpr-ritual-title {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 14px;
font-weight: 700;
color: var(--hpr-ink);
letter-spacing: 2px;
margin-bottom: 4px;
}
.hpr-ritual-detail {
font-size: 13px;
color: var(--hpr-ink-l);
line-height: 1.7;
}
/* === Ch13 大运 · 年度花晶建议 === */
.hpr-flower-year-tip {
margin-top: 18px;
padding: 14px 20px;
background: linear-gradient(135deg, rgba(138,111,185,0.08), rgba(184,149,64,0.04));
border: 1px solid rgba(138,111,185,0.25);
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.hpr-flower-year-tag {
flex-shrink: 0;
padding: 4px 12px;
background: linear-gradient(135deg, #8A6FB9, #B89540);
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
white-space: nowrap;
}
.hpr-flower-year-text {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 14px;
line-height: 1.8;
color: var(--hpr-ink);
}
/* === Ch14 预警灯花晶 === */
.hpr-warning-flower {
margin-top: 6px;
padding: 4px 10px;
background: rgba(138,111,185,0.08);
border-radius: 6px;
font-size: 11px;
color: #8A6FB9;
letter-spacing: 1px;
display: inline-block;
}
/* === Ch15 30day 花晶 + daily === */
.hpr-30d-flower {
margin-bottom: 10px;
padding: 6px 10px;
background: rgba(138,111,185,0.08);
color: #6E5599;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
}
.hpr-30d-daily {
margin-top: 12px;
padding: 10px 12px;
background: rgba(184,149,64,0.06);
border-left: 3px solid var(--hpr-bronze);
border-radius: 0 8px 8px 0;
}
.hpr-30d-daily-lbl {
display: block;
font-size: 10px;
color: var(--hpr-bronze-d);
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 4px;
}
.hpr-30d-daily-text {
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
font-size: 13px;
color: var(--hpr-ink);
line-height: 1.7;
font-style: italic;
}
/* === Ch18 合规章 === */
.hpr-compliance-chapter {
background: rgba(248, 246, 240, 0.6) !important;
}
.hpr-compliance-chapter::before {
background: linear-gradient(90deg, transparent, var(--hpr-cool), transparent) !important;
}
.hpr-compliance-section {
padding: 18px 22px;
background: white;
border: 1px solid rgba(184,149,64,0.15);
border-radius: 12px;
margin-bottom: 14px;
}
.hpr-compliance-h {
font-family: var(--font-serif,'Noto Serif SC',serif);
font-size: 15px;
font-weight: 700;
color: var(--hpr-cool);
letter-spacing: 2px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(74,93,107,0.25);
}
.hpr-compliance-text {
font-size: 14px;
line-height: 1.9;
color: var(--hpr-ink);
font-family: var(--font-wenkai,'LXGW WenKai TC',serif);
}
.hpr-compliance-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hpr-compliance-allow,
.hpr-compliance-forbid {
padding: 14px 16px;
border-radius: 10px;
}
.hpr-compliance-allow {
background: rgba(92,138,110,0.06);
border: 1px solid rgba(92,138,110,0.2);
}
.hpr-compliance-forbid {
background: rgba(200,71,62,0.05);
border: 1px solid rgba(200,71,62,0.2);
}
.hpr-compliance-col-h {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px dashed currentColor;
}
.hpr-compliance-allow .hpr-compliance-col-h { color: var(--hpr-good); }
.hpr-compliance-forbid .hpr-compliance-col-h { color: var(--hpr-bad); }
.hpr-compliance-allow ul,
.hpr-compliance-forbid ul {
list-style: none;
padding: 0;
margin: 0;
}
.hpr-compliance-allow li,
.hpr-compliance-forbid li {
padding: 4px 0 4px 18px;
font-size: 12px;
line-height: 1.7;
color: var(--hpr-ink);
position: relative;
}
.hpr-compliance-allow li::before { content: '✓'; position: absolute; left: 0; color: var(--hpr-good); font-weight: 700; }
.hpr-compliance-forbid li::before { content: '✕'; position: absolute; left: 0; color: var(--hpr-bad); font-weight: 700; }
/* === 全局打印样式 === */
@media print {
body, body.app-default {
background: white !important;
color: var(--hpr-ink) !important;
}
.hpr-wrap { max-width: 100%; padding: 0; }
.hpr-cover {
page-break-after: always;
box-shadow: none !important;
margin: 0 0 24px;
}
.hpr-toc { page-break-after: always; }
.hpr-chapter {
page-break-inside: avoid;
box-shadow: none !important;
border: 1px solid rgba(184,149,64,0.25);
}
.hpr-chapter:nth-child(3n) { page-break-after: auto; }
.hpr-actions, .hpr-bottom-actions { display: none !important; }
.hpr-table { font-size: 11px; }
.hpr-table thead th { background: rgba(184,149,64,0.15) !important; }
}
/* === 移动响应 === */
@media (max-width: 768px) {
.hpr-wrap { padding: 16px 12px 60px; }
.hpr-cover { padding: 48px 18px 36px; }
.hpr-cover-title { font-size: 1.8rem; letter-spacing: 5px; text-indent: 5px; }
.hpr-cover-subtitle { font-size: 10px; letter-spacing: 3px; }
.hpr-cover-name { font-size: 26px; letter-spacing: 3px; padding: 0 6px; }
.hpr-cover-name::before, .hpr-cover-name::after { width: 16px; }
.hpr-cover-pair { gap: 22px; }
.hpr-toc { padding: 22px 20px; }
.hpr-toc-list { columns: 1; }
.hpr-chapter { padding: 26px 18px 22px; margin-bottom: 32px; }
.hpr-ch-title { font-size: 1.3rem; letter-spacing: 2px; }
.hpr-ch-num { font-size: 28px; }
.hpr-ch-h { gap: 14px; margin-bottom: 24px; }
.hpr-total-card { grid-template-columns: 1fr !important; gap: 18px !important; padding: 22px !important; }
.hpr-total-score { font-size: 72px; }
.hpr-positioning { font-size: 15px; line-height: 1.9; }
.hpr-2col { grid-template-columns: 1fr !important; }
.hpr-table { font-size: 12px; }
.hpr-table thead th { padding: 10px 12px; font-size: 11px; letter-spacing: 1px; }
.hpr-table tbody td { padding: 10px 12px; }
.hpr-oneliner { font-size: 16px; padding: 28px 22px; letter-spacing: 1.5px; line-height: 2; }
.hpr-oneliner::before, .hpr-oneliner::after { font-size: 44px; }
.hpr-mech-grid { grid-template-columns: 1fr !important; }
.hpr-wx-cards { grid-template-columns: 1fr !important; }
.hpr-30d-grid { grid-template-columns: 1fr !important; }
.hpr-final-seal { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hpr-dim-body { grid-template-columns: 1fr !important; }
.hpr-dim-head { padding: 16px 18px; }
.hpr-dim-name { font-size: 16px; letter-spacing: 2px; }
.hpr-dim-score { font-size: 36px; }
.hpr-bottom-actions { flex-direction: column; padding: 16px; }
.hpr-bottom-actions .btn { width: 100%; }
}
/* ================================================================ */
/* Section 05 · 第三代宇威花晶 × FRS 频率重编 */
/* ================================================================ */
/* 五频颜色基调 */
:root {
--fc-aura: #8A6FB9; /* 紫 */
--fc-conscious: #4A7AA9; /* 蓝 */
--fc-emotion: #5C8A6E; /* 绿 */
--fc-attraction: #E08A4A; /* 橙 */
--fc-abundance: #C9A04A; /* 金黄 */
}
/* 系统卡内的花晶 chip */
.sys-fc {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(184,149,64,0.08) 0%, rgba(92,138,110,0.06) 100%);
border: 1px dashed rgba(184,149,64,0.32);
border-radius: 10px;
}
.sys-fc i { color: #B89540; }
.sys-fc-label { font: 600 12px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.1em; margin-right: 4px; }
.sys-fc-chip {
font: 600 11px/1 'Noto Sans SC',sans-serif;
padding: 5px 10px;
border-radius: 12px;
color: #fff;
background: #8A8478;
box-shadow: 0 2px 6px rgba(20,24,29,0.12);
}
.sys-fc-chip.fc-chip-aura { background: var(--fc-aura); }
.sys-fc-chip.fc-chip-consciousness { background: var(--fc-conscious); }
.sys-fc-chip.fc-chip-emotion { background: var(--fc-emotion); }
.sys-fc-chip.fc-chip-attraction { background: var(--fc-attraction); }
.sys-fc-chip.fc-chip-abundance { background: var(--fc-abundance); }
/* 主体 fc-section */
.fc-section { border: 1px solid rgba(184,149,64,0.28); overflow: hidden; }
.fc-section .card-header { background: linear-gradient(135deg, rgba(138,111,185,0.08) 0%, rgba(201,160,74,0.08) 100%); }
.fc-intro {
text-align: center;
padding: 20px 0 24px;
border-bottom: 1px dashed rgba(184,149,64,0.25);
margin-bottom: 24px;
}
.fc-intro-tag {
font: 700 11px/1 'Inter',sans-serif;
letter-spacing: 0.5em;
color: #B89540;
margin-bottom: 8px;
}
.fc-intro-line {
font: 500 13px/1.6 'Noto Serif SC',serif;
color: #6B5635;
letter-spacing: 0.05em;
}
/* FRS 六步格子 */
.fc-frs-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-bottom: 28px;
}
.fc-frs-cell {
text-align: center;
padding: 14px 8px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: linear-gradient(180deg, rgba(244,241,233,0.6) 0%, rgba(232,224,204,0.4) 100%);
transition: transform 0.25s, box-shadow 0.25s;
}
.fc-frs-cell:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(184,149,64,0.2); }
.fc-frs-en { font: 700 11px/1 'Inter',sans-serif; color: #B89540; letter-spacing: 0.15em; }
.fc-frs-cn { font: 700 18px/1.2 'Noto Serif SC',serif; color: #1F2A24; margin: 6px 0 4px; }
.fc-frs-desc { font: 400 10px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
/* 主频 + 辅助 block */
.fc-block {
position: relative;
margin-bottom: 18px;
padding: 20px 24px;
border: 1px solid rgba(184,149,64,0.25);
border-radius: 12px;
background: linear-gradient(135deg, rgba(244,241,233,0.7) 0%, rgba(232,224,204,0.4) 100%);
overflow: hidden;
}
.fc-block::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--fc-tone, #B89540);
}
.fc-tone-aura { --fc-tone: var(--fc-aura); }
.fc-tone-consciousness { --fc-tone: var(--fc-conscious); }
.fc-tone-emotion { --fc-tone: var(--fc-emotion); }
.fc-tone-attraction { --fc-tone: var(--fc-attraction); }
.fc-tone-abundance { --fc-tone: var(--fc-abundance); }
.fc-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fc-tag {
font: 700 10px/1 'Noto Sans SC',sans-serif;
padding: 5px 12px;
border-radius: 12px;
background: var(--fc-tone);
color: #fff;
letter-spacing: 0.2em;
}
.fc-tag-aux { background: #8A7A55; }
.fc-name { font: 700 20px/1.2 'Noto Serif SC',serif; color: #1F2A24; letter-spacing: 0.05em; }
.fc-reason { font: 400 13px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; margin-bottom: 14px; padding: 10px 14px; background: rgba(255,255,255,0.5); border-radius: 8px; }
.fc-meta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fc-meta-item { padding: 8px 12px; background: rgba(255,255,255,0.55); border-radius: 8px; font: 500 12px/1.4 'Noto Sans SC',sans-serif; }
.fc-l { display: block; font: 600 10px/1 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.2em; margin-bottom: 4px; }
.fc-price { color: var(--fc-tone); font-weight: 700; }
.fc-price s { color: #8A8478; font-weight: 400; margin-left: 6px; }
.fc-usage { margin-top: 14px; padding: 14px 18px; background: rgba(184,149,64,0.06); border-radius: 8px; }
.fc-usage-h { font: 600 12px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.2em; margin-bottom: 10px; }
.fc-usage ol { padding-left: 20px; margin: 0; font: 400 12px/1.8 'Noto Sans SC',sans-serif; color: #4A4035; }
.fc-affirm { margin-top: 14px; padding: 16px 20px; background: linear-gradient(135deg, var(--fc-tone) 0%, rgba(20,24,29,0.85) 100%); border-radius: 8px; color: #F4F1E9; }
.fc-affirm-h { font: 600 11px/1 'Noto Sans SC',sans-serif; letter-spacing: 0.3em; opacity: 0.85; margin-bottom: 8px; }
.fc-affirm-body { font: 500 13px/1.8 'Noto Serif SC',serif; letter-spacing: 0.04em; }
.fc-aux-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.fc-aux { padding: 14px 18px; }
.fc-aux .fc-name { font-size: 16px; }
/* 五频组合 CTA */
.fc-bundle {
display: flex; align-items: center; gap: 16px;
padding: 18px 24px;
margin-bottom: 28px;
background: linear-gradient(135deg, rgba(184,149,64,0.12) 0%, rgba(92,138,110,0.08) 100%);
border: 1px solid rgba(184,149,64,0.35);
border-radius: 12px;
}
.fc-bundle.is-recommend { background: linear-gradient(135deg, rgba(184,149,64,0.22) 0%, rgba(200,71,62,0.08) 100%); border-color: rgba(184,149,64,0.55); box-shadow: 0 6px 20px rgba(184,149,64,0.18); }
.fc-bundle i { color: #B89540; flex-shrink: 0; }
.fc-bundle-h { font: 700 15px/1 'Noto Serif SC',serif; color: #1F2A24; letter-spacing: 0.05em; margin-bottom: 6px; }
.fc-bundle-desc { font: 400 13px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; margin-bottom: 6px; }
.fc-bundle-price { font: 600 13px 'Inter',sans-serif; color: #C9A04A; }
.fc-bundle-price s { color: #8A8478; font-weight: 400; margin-left: 6px; }
/* 21 天 / 49 天 plan */
.fc-plan-h { font: 700 16px/1.4 'Noto Serif SC',serif; color: #6B5635; margin: 24px 0 14px; letter-spacing: 0.06em; display: flex; align-items: center; }
.fc-plan-h i { color: #B89540; }
.fc-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.fc-plan-cell { position: relative; padding: 18px 18px 14px; border: 1px solid rgba(184,149,64,0.22); border-radius: 10px; background: linear-gradient(180deg, rgba(244,241,233,0.7) 0%, rgba(232,224,204,0.4) 100%); }
.fc-plan-num { position: absolute; top: -14px; left: 16px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #B89540, #8A7A55); color: #fff; font: 700 14px/30px 'Inter',sans-serif; text-align: center; box-shadow: 0 3px 10px rgba(184,149,64,0.4); }
.fc-plan-stage { font: 700 15px/1 'Noto Serif SC',serif; color: #1F2A24; margin: 4px 0; }
.fc-plan-days { font: 500 11px/1 'Inter',sans-serif; color: #8A7A55; letter-spacing: 0.1em; margin-bottom: 10px; }
.fc-plan-item { font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; padding: 5px 0; border-top: 1px dashed rgba(184,149,64,0.15); }
.fcp-l { display: inline-block; min-width: 40px; font: 600 10px 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.2em; margin-right: 6px; }
.fc-plan-ask { color: #B89540; font-style: italic; }
.fc-49-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.fc-49-cell { text-align: center; padding: 12px 6px; border: 1px solid rgba(184,149,64,0.2); border-radius: 8px; background: rgba(244,241,233,0.55); }
.fc-49-cell:nth-child(1) { border-top: 3px solid var(--fc-aura); }
.fc-49-cell:nth-child(2) { border-top: 3px solid var(--fc-abundance); }
.fc-49-cell:nth-child(3) { border-top: 3px solid var(--fc-emotion); }
.fc-49-cell:nth-child(4) { border-top: 3px solid var(--fc-attraction); }
.fc-49-cell:nth-child(5) { border-top: 3px solid var(--fc-abundance); }
.fc-49-cell:nth-child(6) { border-top: 3px solid var(--fc-conscious); }
.fc-49-cell:nth-child(7) { border-top: 3px solid #B89540; }
.fc-49-w { font: 600 11px/1.3 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 4px; }
.fc-49-fc { font: 700 12px/1.2 'Inter',sans-serif; color: #1F2A24; margin: 4px 0; }
.fc-49-t { font: 400 10px/1.4 'Noto Sans SC',sans-serif; color: #6B5635; }
/* 价目表 */
.fc-price-h { font: 700 16px/1 'Noto Serif SC',serif; color: #6B5635; margin: 28px 0 14px; letter-spacing: 0.05em; display: flex; align-items: center; }
.fc-price-table { width: 100%; border-collapse: collapse; font: 500 13px/1.5 'Noto Sans SC',sans-serif; }
.fc-price-table th { background: linear-gradient(135deg, #B89540, #8A7A55); color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; letter-spacing: 0.05em; }
.fc-price-table th:nth-child(1) { border-radius: 8px 0 0 0; }
.fc-price-table th:last-child { border-radius: 0 8px 0 0; text-align: center; }
.fc-price-table td { padding: 10px 12px; border-bottom: 1px solid rgba(184,149,64,0.15); }
.fcpt-row:hover { background: rgba(184,149,64,0.05); }
.fcpt-now { color: #C8473E; font-weight: 700; font-size: 14px; }
.fcpt-save { color: #5C8A6E; font-weight: 600; }
.fcpt-disc { display: inline-block; padding: 3px 8px; border-radius: 10px; background: var(--fc-tone, #B89540); color: #fff; font-size: 11px; font-weight: 600; }
.fcpt-bundle { background: linear-gradient(135deg, rgba(184,149,64,0.1) 0%, rgba(200,71,62,0.06) 100%); }
.fcpt-bundle td { font-weight: 600; }
/* 合规提醒 */
.fc-compliance {
display: flex; align-items: flex-start; gap: 10px;
margin-top: 28px;
padding: 14px 18px;
background: rgba(200,71,62,0.06);
border-left: 3px solid #C8473E;
border-radius: 0 8px 8px 0;
font: 400 11px/1.7 'Noto Sans SC',sans-serif;
color: #6B5635;
}
.fc-compliance i { color: #C8473E; flex-shrink: 0; margin-top: 2px; }
/* 响应式 */
@media (max-width: 992px) {
.fc-frs-grid { grid-template-columns: repeat(3, 1fr); }
.fc-plan-grid { grid-template-columns: 1fr; }
.fc-49-grid { grid-template-columns: repeat(4, 1fr); }
.fc-aux-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
.fc-frs-grid { grid-template-columns: 1fr 1fr; }
.fc-49-grid { grid-template-columns: 1fr 1fr; }
.fc-price-table { font-size: 11px; }
.fc-price-table th, .fc-price-table td { padding: 6px 4px; }
}
/* 暗色 */
[data-theme="dark"] .fc-block { background: rgba(28,35,42,0.75) !important; }
[data-theme="dark"] .fc-name, [data-theme="dark"] .fc-bundle-h { color: #E8E0CC !important; }
[data-theme="dark"] .fc-frs-cell { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .fc-frs-cn { color: #E8E0CC !important; }
[data-theme="dark"] .fc-49-cell { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .fc-49-fc { color: #E8E0CC !important; }
[data-theme="dark"] .fc-plan-cell { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .fc-reason, [data-theme="dark"] .fc-meta-item, [data-theme="dark"] .fc-usage { background: rgba(20,26,32,0.6) !important; color: #C8C5BE !important; }
/* AI 个性化叙事块(GPT-4o 增强标识) */
.ai-narrative {
position: relative;
margin-bottom: 22px;
padding: 18px 22px 18px 26px;
background: linear-gradient(135deg, rgba(184, 149, 64, 0.06) 0%, rgba(92, 138, 110, 0.06) 100%);
border: 1px solid rgba(184, 149, 64, 0.25);
border-radius: 10px;
overflow: hidden;
}
.ai-narrative::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #B89540 0%, #5C8A6E 50%, #4A7AA9 100%);
}
.ai-narrative-tag {
display: inline-flex; align-items: center;
font: 700 10px/1 'Inter','Noto Sans SC',sans-serif;
color: #6B5635;
letter-spacing: 0.25em;
margin-bottom: 10px;
padding: 4px 10px;
background: rgba(184, 149, 64, 0.12);
border-radius: 12px;
text-transform: uppercase;
}
.ai-narrative-tag i { color: #B89540; }
.ai-narrative-body {
font: 400 14px/1.85 'Noto Serif SC',serif;
color: #2C3540;
letter-spacing: 0.02em;
}
.ai-narrative-final {
background: linear-gradient(135deg, rgba(184, 149, 64, 0.12) 0%, rgba(200, 71, 62, 0.06) 100%);
border-color: rgba(184, 149, 64, 0.4);
box-shadow: 0 4px 20px rgba(184, 149, 64, 0.12);
}
.ai-narrative-final .ai-narrative-body {
font-size: 15px;
line-height: 1.9;
}
[data-theme="dark"] .ai-narrative { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .ai-narrative-body { color: #E8E0CC !important; }
/* ================================================================ */
/* V3 升级 — 造运地图 / AI 陪跑 / 复合子板块 / 合规声明 */
/* ================================================================ */
/* 04 客户专属造运地图 */
.zaoyun-map-card { background: linear-gradient(135deg, rgba(184,149,64,0.04) 0%, rgba(92,138,110,0.04) 100%); }
.zm-intro {
text-align: center;
font: 500 14px/1.6 'Noto Serif SC',serif;
color: #6B5635;
margin-bottom: 22px;
padding: 12px 18px;
background: rgba(184,149,64,0.08);
border-radius: 10px;
}
.zm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.zm-cell {
position: relative;
padding: 18px 20px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 12px;
background: linear-gradient(180deg, rgba(244,241,233,0.65) 0%, rgba(232,224,204,0.4) 100%);
overflow: hidden;
}
.zm-cell::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
}
.zm-behavior::before { background: #B89540; }
.zm-emotion::before { background: #C8473E; }
.zm-env::before { background: #5C8A6E; }
.zm-career::before { background: #4A7AA9; }
.zm-relation::before { background: #8A6FB9; }
.zm-h { font: 700 16px/1.2 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; letter-spacing: 0.05em; display: flex; align-items: center; }
.zm-h i { color: #B89540; }
.zm-sub { font: 500 11px/1 'Noto Sans SC',sans-serif; color: #8A7A55; letter-spacing: 0.2em; margin-bottom: 12px; }
.zm-list { padding-left: 18px; margin: 0; font: 400 13px/1.8 'Noto Sans SC',sans-serif; color: #4A4035; }
.zm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.zm-tag { font: 600 11px/1 'Noto Sans SC',sans-serif; padding: 4px 10px; border-radius: 12px; background: #C8473E22; color: #8A332D; }
.zm-healing { font: 500 12px/1.6 'Noto Serif SC',serif; color: #6B5635; padding: 8px 12px; background: rgba(255,255,255,0.55); border-radius: 8px; }
.zm-env-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.zm-env-l { font: 700 11px/1 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 6px; letter-spacing: 0.1em; }
.zm-env-good { font: 500 11px/1.5 'Noto Sans SC',sans-serif; color: #3E6249; padding: 2px 0; }
.zm-env-bad { font: 500 11px/1.5 'Noto Sans SC',sans-serif; color: #8A332D; padding: 2px 0; }
.zm-env-extra { font: 500 11px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; padding: 8px 0 0; border-top: 1px dashed rgba(184,149,64,0.2); }
.zm-career-mode { font: 700 17px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin: 6px 0; }
.zm-career-god { font: 500 12px/1 'Noto Sans SC',sans-serif; color: #4A7AA9; }
/* 系统复合子板块(每系统 4 个 sub-blocks)*/
.sys-compound-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
margin: 14px 0 20px;
padding: 14px;
background: linear-gradient(135deg, rgba(184,149,64,0.06) 0%, rgba(92,138,110,0.04) 100%);
border: 1px dashed rgba(184,149,64,0.25);
border-radius: 10px;
}
.sys-compound-cell {
position: relative;
padding: 12px 14px;
background: rgba(255,255,255,0.55);
border-radius: 8px;
transition: transform 0.25s, box-shadow 0.25s;
}
.sys-compound-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(184,149,64,0.18); }
.scc-num { position: absolute; top: 8px; right: 10px; font: 700 11px/1 'Inter',sans-serif; color: rgba(184,149,64,0.4); letter-spacing: 0.05em; }
.scc-name { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 4px; padding-right: 24px; }
.scc-desc { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
/* 10 AI 陪跑机制 */
.ai-followup-card { background: linear-gradient(135deg, rgba(74,122,169,0.06) 0%, rgba(184,149,64,0.04) 100%); }
.af-intro {
font: 500 14px/1.7 'Noto Serif SC',serif;
color: #6B5635;
padding: 14px 18px;
background: rgba(74,122,169,0.08);
border-left: 3px solid #4A7AA9;
border-radius: 0 8px 8px 0;
margin-bottom: 22px;
}
.af-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.af-cell { padding: 18px 20px; border: 1px solid rgba(184,149,64,0.22); border-radius: 10px; background: rgba(244,241,233,0.6); }
.af-daily { border-top: 3px solid #E08A4A; }
.af-weekly { border-top: 3px solid #5C8A6E; }
.af-monthly { border-top: 3px solid #4A7AA9; }
.af-h { font: 700 14px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 12px; display: flex; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.af-h i { color: #B89540; }
.af-cell ol { padding-left: 22px; margin: 0; font: 400 12px/1.85 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 13 合规声明 */
.compliance-card { background: rgba(200,71,62,0.04); border: 1px solid rgba(200,71,62,0.2); }
.compliance-body {
font: 400 13px/1.85 'Noto Serif SC',serif;
color: #6B5635;
padding: 16px 20px;
background: rgba(255,255,255,0.6);
border-radius: 8px;
}
@media (max-width: 768px) {
.af-grid { grid-template-columns: 1fr; }
.zm-env-row { grid-template-columns: 1fr; }
}
[data-theme="dark"] .zm-cell, [data-theme="dark"] .af-cell, [data-theme="dark"] .compliance-body { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .zm-career-mode, [data-theme="dark"] .zm-h { color: #E8E0CC !important; }
[data-theme="dark"] .sys-compound-cell { background: rgba(28,35,42,0.55) !important; }
[data-theme="dark"] .scc-name { color: #E8E0CC !important; }
/* ================================================================ */
/* V4 升级 — 五行画像 / 五德人格 / 反复问题 / 它如何解决 / 服务路径 */
/* ================================================================ */
/* 03 五行基因画像 */
.fp-intro { font: 500 13px/1.6 'Noto Serif SC',serif; color: #6B5635; padding: 12px 18px; background: rgba(184,149,64,0.08); border-radius: 8px; margin-bottom: 18px; }
.fp-cell {
position: relative;
margin-bottom: 14px;
padding: 16px 18px 16px 22px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: rgba(244,241,233,0.6);
overflow: hidden;
}
.fp-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.fp-elem-mu::before { background: #66CC66; }
.fp-elem-huo::before { background: #FF6B6B; }
.fp-elem-tu::before { background: #D2A560; }
.fp-elem-jin::before { background: #999; }
.fp-elem-shui::before { background: #4682B4; }
.fp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fp-icon { width: 38px; height: 38px; border-radius: 50%; }
.fp-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-name { font: 700 22px/1 'Ma Shan Zheng','Noto Serif SC',serif; color: #1F2A24; }
.fp-theme { font: 500 12px/1 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.1em; }
.fp-state { font: 700 11px/1 'Noto Sans SC',sans-serif; padding: 4px 10px; border-radius: 10px; letter-spacing: 0.15em; }
.fp-state.fp-strong { background: #C8473E22; color: #8A332D; }
.fp-state.fp-weak { background: #4A7AA922; color: #2C4F73; }
.fp-state.fp-balanced { background: #5C8A6E22; color: #3E6249; }
.fp-val { font: 500 11px/1 'Inter',sans-serif; color: #8A7A55; margin-left: auto; }
.fp-row { display: flex; gap: 12px; padding: 6px 0; font: 400 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; border-top: 1px dashed rgba(184,149,64,0.15); }
.fp-row:first-of-type { border-top: none; }
.fp-l { flex-shrink: 0; width: 70px; font: 600 11px/1.7 'Noto Serif SC',serif; color: #8A7A55; }
.fp-issue { color: #8A332D; }
.fp-next-3 { margin-top: 10px; padding: 12px 14px; background: rgba(255,255,255,0.6); border-radius: 8px; }
.fp-n-h { font: 700 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.2em; margin-bottom: 8px; }
.fp-next-3 ol { padding-left: 18px; margin: 0; font: 500 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 04 五德人格 */
.wude-main {
display: flex; align-items: center; gap: 22px;
padding: 20px 24px;
margin-bottom: 24px;
background: linear-gradient(135deg, rgba(184,149,64,0.12) 0%, rgba(92,138,110,0.06) 100%);
border: 1px solid rgba(184,149,64,0.32);
border-radius: 12px;
}
.wude-main-de {
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #B89540, #8A7A55);
color: #F4F1E9;
display: flex; align-items: center; justify-content: center;
font: 700 38px/1 'Ma Shan Zheng',serif;
box-shadow: 0 6px 20px rgba(184,149,64,0.3);
flex-shrink: 0;
}
.wude-main-info { flex: 1; }
.wd-l { font: 600 11px/1 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.2em; margin-bottom: 4px; }
.wd-meaning { font: 600 15px/1.4 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 8px; }
.wd-row { font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; padding: 3px 0; }
.wd-tag { display: inline-block; padding: 2px 8px; border-radius: 8px; font: 600 10px/1 'Noto Sans SC',sans-serif; margin-right: 6px; letter-spacing: 0.1em; }
.wd-yang { background: #5C8A6E22; color: #3E6249; }
.wd-yin { background: #C8473E22; color: #8A332D; }
.wude-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.wude-col { padding: 14px 16px; border: 1px solid rgba(184,149,64,0.2); border-radius: 10px; background: rgba(244,241,233,0.55); }
.wude-h { font: 700 13px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.1em; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.wd-item { font: 500 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; padding: 4px 0; }
.wd-empty { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #8A8478; padding: 4px 0; }
.wude-direction { font: 600 13px/1.5 'Noto Serif SC',serif; color: #B89540; padding: 12px 18px; background: rgba(184,149,64,0.1); border-radius: 8px; display: flex; align-items: center; }
.wude-direction i { color: #B89540; }
/* 05 反复卡住的问题 */
.rp-intro { font: 500 13px/1.7 'Noto Serif SC',serif; color: #8A332D; padding: 12px 18px; background: rgba(200,71,62,0.07); border-left: 3px solid #C8473E; border-radius: 0 8px 8px 0; margin-bottom: 18px; }
.rp-cell {
position: relative;
margin-bottom: 14px;
padding: 18px 20px 14px 70px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: linear-gradient(135deg, rgba(244,241,233,0.7) 0%, rgba(232,224,204,0.4) 100%);
}
.rp-num {
position: absolute;
left: 18px; top: 18px;
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #C8473E, #8A332D);
color: #fff;
font: 700 16px/40px 'Inter',sans-serif;
text-align: center;
box-shadow: 0 3px 10px rgba(200,71,62,0.3);
}
.rp-name { font: 700 16px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 10px; }
.rp-row { display: flex; gap: 10px; padding: 4px 0; font: 400 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; border-top: 1px dashed rgba(184,149,64,0.15); }
.rp-row:first-of-type { border-top: none; }
.rp-l { flex-shrink: 0; width: 72px; font: 600 11px/1.7 'Noto Serif SC',serif; color: #8A7A55; }
.rp-risk { color: #8A332D; }
.rp-entry { color: #3E6249; font-weight: 600; }
.rp-entry .rp-l { color: #5C8A6E; }
/* 09 它如何解决 */
.hs-intro {
font: 500 14px/1.7 'Noto Serif SC',serif;
color: #6B5635;
padding: 16px 22px;
background: linear-gradient(135deg, rgba(184,149,64,0.1) 0%, rgba(92,138,110,0.08) 100%);
border-radius: 10px;
margin-bottom: 22px;
text-align: center;
}
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.hs-cell {
position: relative;
padding: 18px 18px 16px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: rgba(244,241,233,0.6);
transition: transform 0.3s, box-shadow 0.3s;
}
.hs-cell:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(184,149,64,0.2); }
.hs-num {
position: absolute; top: -12px; left: 18px;
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #B89540, #8A7A55);
color: #fff;
font: 700 13px/32px 'Inter',sans-serif;
text-align: center;
box-shadow: 0 3px 10px rgba(184,149,64,0.35);
}
.hs-name { font: 700 14px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin: 6px 0 8px; }
.hs-desc { font: 400 11px/1.6 'Noto Sans SC',sans-serif; color: #6B5635; }
.hs-principle {
text-align: center;
padding: 16px 20px;
background: linear-gradient(135deg, #B89540 0%, #8A7A55 100%);
color: #F4F1E9;
border-radius: 10px;
font: 700 15px/1 'Noto Serif SC',serif;
letter-spacing: 0.15em;
box-shadow: 0 6px 20px rgba(184,149,64,0.28);
}
/* 15 下一阶段服务路径 */
.ns-intro { font: 500 14px/1.7 'Noto Serif SC',serif; color: #6B5635; padding: 14px 20px; background: rgba(74,122,169,0.08); border-left: 3px solid #4A7AA9; border-radius: 0 8px 8px 0; margin-bottom: 22px; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ns-cell {
position: relative;
padding: 14px 16px 14px 56px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: linear-gradient(135deg, rgba(244,241,233,0.7) 0%, rgba(232,224,204,0.4) 100%);
transition: transform 0.25s;
}
.ns-cell:hover { transform: translateX(4px); }
.ns-num {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #4A7AA9, #2C4F73);
color: #fff;
font: 700 13px/32px 'Inter',sans-serif;
text-align: center;
}
.ns-name { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 4px; }
.ns-desc { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
.ns-closing {
text-align: center;
padding: 14px 20px;
background: rgba(184,149,64,0.1);
border-radius: 10px;
font: 600 13px/1.6 'Noto Serif SC',serif;
color: #6B5635;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.hs-grid { grid-template-columns: 1fr 1fr; }
.wude-grid { grid-template-columns: 1fr; }
.fp-title-row { gap: 8px; }
}
[data-theme="dark"] .fp-cell, [data-theme="dark"] .rp-cell, [data-theme="dark"] .hs-cell, [data-theme="dark"] .ns-cell, [data-theme="dark"] .wude-col { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .fp-name, [data-theme="dark"] .rp-name, [data-theme="dark"] .hs-name, [data-theme="dark"] .ns-name, [data-theme="dark"] .wd-meaning { color: #E8E0CC !important; }
[data-theme="dark"] .fp-next-3, [data-theme="dark"] .ns-closing { background: rgba(20,26,32,0.5) !important; }
/* ================================================================ */
/* V5 升级 — 十神行为模式 + 6 个深度专章 */
/* ================================================================ */
/* 04 十神行为模式 */
.tgb-intro { font: 500 13px/1.7 'Noto Serif SC',serif; color: #6B5635; padding: 12px 18px; background: rgba(74,122,169,0.08); border-left: 3px solid #4A7AA9; border-radius: 0 8px 8px 0; margin-bottom: 18px; }
.tgb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tgb-cell {
position: relative;
padding: 14px 16px;
border: 1px solid rgba(184,149,64,0.22);
border-radius: 10px;
background: rgba(244,241,233,0.6);
border-left: 4px solid #B89540;
}
.tgb-cell.tgb-level-强 { border-left-color: #C8473E; background: linear-gradient(135deg, rgba(200,71,62,0.05) 0%, rgba(244,241,233,0.6) 100%); }
.tgb-cell.tgb-level-中 { border-left-color: #B89540; }
.tgb-cell.tgb-level-弱 { border-left-color: #5C8A6E; }
.tgb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.tgb-name { font: 700 17px/1 'Noto Serif SC',serif; color: #1F2A24; flex: 1; }
.tgb-count { font: 600 11px/1 'Inter',sans-serif; color: #8A7A55; }
.tgb-lv { font: 600 10px/1 'Noto Sans SC',sans-serif; padding: 3px 8px; border-radius: 10px; background: rgba(184,149,64,0.18); color: #6B5635; letter-spacing: 0.1em; }
.tgb-row { display: flex; gap: 8px; padding: 4px 0; font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
.tgb-l { flex-shrink: 0; width: 64px; font: 600 11px/1.6 'Noto Serif SC',serif; color: #8A7A55; }
.tgb-bad { color: #8A332D; }
.tgb-fix { color: #3E6249; }
.tgb-fix .tgb-l { color: #5C8A6E; }
.tgb-missing { padding: 10px 14px; background: rgba(184,149,64,0.06); border-radius: 8px; font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #6B5635; margin-bottom: 18px; }
.tgb-m-l { font-weight: 700; color: #B89540; margin-right: 8px; }
.tgb-next-3, .deep-next-3 { padding: 14px 18px; background: rgba(184,149,64,0.08); border-left: 3px solid #B89540; border-radius: 0 8px 8px 0; }
.tgb-n-h, .deep-n-h { font: 700 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.25em; margin-bottom: 10px; }
.tgb-next-3 ol, .deep-next-3 ol { padding-left: 20px; margin: 0; font: 500 13px/1.85 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 6 深度专章共用 */
.deep-card {
border: 1px solid rgba(184,149,64,0.25);
}
.deep-wealth { background: linear-gradient(135deg, rgba(201,160,74,0.04) 0%, rgba(244,241,233,0.4) 100%); }
.deep-emotion { background: linear-gradient(135deg, rgba(200,71,62,0.04) 0%, rgba(244,241,233,0.4) 100%); }
.deep-relation { background: linear-gradient(135deg, rgba(138,111,185,0.05) 0%, rgba(244,241,233,0.4) 100%); }
.deep-career { background: linear-gradient(135deg, rgba(74,122,169,0.04) 0%, rgba(244,241,233,0.4) 100%); }
.deep-env { background: linear-gradient(135deg, rgba(92,138,110,0.04) 0%, rgba(244,241,233,0.4) 100%); }
.deep-behavior { background: linear-gradient(135deg, rgba(184,149,64,0.06) 0%, rgba(244,241,233,0.4) 100%); }
.deep-opening {
font: 500 14px/1.7 'Noto Serif SC',serif;
color: #4A4035;
padding: 16px 22px;
background: rgba(255,255,255,0.55);
border-radius: 10px;
margin-bottom: 22px;
}
.deep-row {
display: flex;
gap: 14px;
padding: 10px 14px;
margin-bottom: 10px;
background: rgba(255,255,255,0.45);
border-radius: 8px;
}
.deep-l { flex-shrink: 0; width: 90px; font: 700 12px/1.6 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.05em; }
.deep-val { flex: 1; font: 500 13px/1.7 'Noto Sans SC',sans-serif; color: #1F2A24; }
.deep-good { color: #3E6249; font-weight: 600; }
.deep-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.deep-tag { font: 500 11px/1.4 'Noto Sans SC',sans-serif; padding: 4px 10px; border-radius: 12px; background: rgba(184,149,64,0.14); color: #6B5635; }
.deep-tag-bad { background: rgba(200,71,62,0.14); color: #8A332D; }
.deep-list-block { margin-bottom: 18px; padding: 14px 18px; background: rgba(255,255,255,0.55); border-radius: 10px; }
.deep-list-block.deep-good-block { background: rgba(92,138,110,0.07); border-left: 3px solid #5C8A6E; }
.deep-list-h { font: 700 13px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.08em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.deep-list-block ul { padding-left: 20px; margin: 0; font: 500 13px/1.85 'Noto Sans SC',sans-serif; color: #4A4035; }
/* EGS 8 层 */
.egs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.egs-cell { padding: 10px 14px; background: rgba(244,241,233,0.7); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; border-left: 3px solid #C8473E; }
.egs-n { font: 700 11px/1 'Inter',sans-serif; color: #C8473E; letter-spacing: 0.1em; }
.egs-name { font: 700 13px/1.2 'Noto Serif SC',serif; color: #1F2A24; }
.egs-q { font: 400 12px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
/* 环境深度 — 四吉四凶 + 三场景 */
.env-fav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.env-col { padding: 12px 16px; background: rgba(255,255,255,0.55); border-radius: 10px; }
.env-h { font: 700 12px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.1em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.env-line { font: 500 12px/1.7 'Noto Sans SC',sans-serif; padding: 3px 0; }
.env-line.env-good { color: #3E6249; }
.env-line.env-bad { color: #8A332D; }
.env-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.env-tri-cell { padding: 12px 14px; background: rgba(255,255,255,0.55); border-radius: 10px; border-top: 3px solid #5C8A6E; }
.env-tri-h { font: 700 13px/1 'Noto Serif SC',serif; color: #3E6249; margin-bottom: 8px; }
.env-tri-cell ul { padding-left: 18px; margin: 0; font: 400 11px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 行为语言 — 停止 vs 建立 双栏 */
.bl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.bl-col { padding: 12px 16px; border-radius: 10px; }
.bl-stop { background: rgba(200,71,62,0.06); border-left: 3px solid #C8473E; }
.bl-build { background: rgba(92,138,110,0.06); border-left: 3px solid #5C8A6E; }
.bl-h { font: 700 12px/1 'Noto Serif SC',serif; margin-bottom: 8px; letter-spacing: 0.05em; }
.bl-stop .bl-h { color: #8A332D; }
.bl-build .bl-h { color: #3E6249; }
.bl-col ul { padding-left: 18px; margin: 0; font: 500 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; }
.bl-affirm { padding: 8px 12px; background: rgba(184,149,64,0.06); border-radius: 8px; font: 500 13px/1.6 'Noto Serif SC',serif; color: #4A4035; margin: 6px 0; }
.bl-time { display: inline-block; min-width: 50px; font: 700 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.1em; margin-right: 8px; }
@media (max-width: 768px) {
.env-fav-row, .env-tri, .bl-row { grid-template-columns: 1fr; }
}
[data-theme="dark"] .deep-opening, [data-theme="dark"] .deep-row, [data-theme="dark"] .deep-list-block, [data-theme="dark"] .env-col, [data-theme="dark"] .env-tri-cell { background: rgba(28,35,42,0.65) !important; }
[data-theme="dark"] .tgb-cell { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .deep-val { color: #E8E0CC !important; }
/* ================================================================ */
/* 11 情绪深度专章 · 增强版 */
/* ================================================================ */
.emo-pattern {
padding: 18px 22px;
margin-bottom: 20px;
background: linear-gradient(135deg, rgba(200,71,62,0.08) 0%, rgba(184,149,64,0.06) 100%);
border: 1px solid rgba(200,71,62,0.25);
border-radius: 12px;
}
.emo-p-label { font: 700 11px/1 'Noto Serif SC',serif; color: #8A332D; letter-spacing: 0.25em; margin-bottom: 6px; }
.emo-p-val { font: 700 18px/1.4 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 12px; }
.emo-key-sentence { font: 600 14px/1.7 'Noto Serif SC',serif; color: #6B5635; padding: 10px 16px; background: rgba(255,255,255,0.55); border-radius: 8px; text-align: center; letter-spacing: 0.02em; }
.emo-six-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.emo-six-cell {
padding: 14px 16px;
background: rgba(255,255,255,0.55);
border-radius: 10px;
border-left: 4px solid #C8473E;
transition: transform 0.25s, box-shadow 0.25s;
}
.emo-six-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(200,71,62,0.18); }
.emo-six-head { font: 700 14px/1.3 'Noto Serif SC',serif; color: #8A332D; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(200,71,62,0.2); display: flex; align-items: center; }
.emo-six-head i { color: #C8473E; }
.emo-six-row { display: flex; gap: 8px; padding: 4px 0; font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
.emo-six-l { flex-shrink: 0; width: 50px; font: 600 11px/1.6 'Noto Serif SC',serif; color: #8A332D; }
.emo-six-empty { font: 500 13px/1.7 'Noto Sans SC',sans-serif; color: #5C8A6E; padding: 14px 18px; background: rgba(92,138,110,0.07); border-radius: 8px; margin-bottom: 18px; }
.emo-inner-child {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(138,111,185,0.1) 0%, rgba(200,71,62,0.06) 100%);
border: 1px solid rgba(138,111,185,0.3);
border-radius: 12px;
}
.emo-inner-child i { color: #8A6FB9; }
.emo-ic-h { font: 700 12px/1 'Noto Serif SC',serif; color: #6B4E8C; letter-spacing: 0.2em; margin-bottom: 6px; }
.emo-ic-val { font: 700 16px/1.4 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 4px; }
.emo-ic-tip { font: 400 12px/1.5 'Noto Sans SC',sans-serif; color: #6B4E8C; }
.emo-meditation {
margin-bottom: 18px;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(74,122,169,0.08) 0%, rgba(92,138,110,0.06) 100%);
border: 1px solid rgba(74,122,169,0.25);
border-radius: 12px;
}
.emo-med-head { font: 700 14px/1.3 'Noto Serif SC',serif; color: #2C4F73; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(74,122,169,0.25); display: flex; align-items: center; }
.emo-med-head i { color: #4A7AA9; }
.emo-med-steps { padding-left: 22px; margin: 0; font: 500 13px/1.85 'Noto Sans SC',sans-serif; color: #4A4035; }
.emo-med-steps li { padding: 3px 0; }
.emo-lang-table { width: 100%; border-collapse: collapse; font: 500 12px/1.6 'Noto Sans SC',sans-serif; }
.emo-lang-table th { background: linear-gradient(135deg, #B89540, #8A7A55); color: #fff; padding: 8px 10px; text-align: center; font-weight: 600; letter-spacing: 0.05em; }
.emo-lang-table th:nth-child(2) { width: 30px; }
.emo-lang-table td { padding: 8px 12px; border-bottom: 1px dashed rgba(184,149,64,0.15); }
.emo-lang-old { background: rgba(200,71,62,0.06); color: #8A332D; }
.emo-lang-new { background: rgba(92,138,110,0.06); color: #3E6249; font-weight: 600; }
.emo-lang-arr { text-align: center; color: #B89540; font-weight: 700; }
.emo-daily-log {
margin-bottom: 18px;
padding: 18px 22px;
background: rgba(184,149,64,0.06);
border: 1px dashed rgba(184,149,64,0.3);
border-radius: 10px;
}
.emo-dl-h { font: 700 13px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.1em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.emo-daily-log ol { padding-left: 22px; margin: 0; font: 500 13px/1.95 'Noto Serif SC',serif; color: #4A4035; }
.emo-daily-log ol li { padding: 2px 0; }
@media (max-width: 768px) {
.emo-six-grid { grid-template-columns: 1fr; }
.emo-lang-table { font-size: 11px; }
.emo-lang-table th, .emo-lang-table td { padding: 5px 6px; }
}
[data-theme="dark"] .emo-pattern, [data-theme="dark"] .emo-six-cell, [data-theme="dark"] .emo-meditation, [data-theme="dark"] .emo-daily-log, [data-theme="dark"] .emo-key-sentence { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .emo-p-val, [data-theme="dark"] .emo-ic-val { color: #E8E0CC !important; }
/* ================================================================ */
/* 12 系统下 · 情绪系统 V6 增强 */
/* ================================================================ */
.sys-block-h {
font: 700 14px/1.3 'Noto Serif SC',serif;
color: #6B5635;
margin: 22px 0 12px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(184,149,64,0.25);
display: flex; align-items: center;
letter-spacing: 0.06em;
}
.sys-block-h i { color: #B89540; }
.sys-egs-block { margin-bottom: 18px; }
.egs-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.egs-detail-cell {
padding: 12px 14px;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 8px;
background: linear-gradient(135deg, rgba(200,71,62,0.04) 0%, rgba(244,241,233,0.6) 100%);
border-left: 3px solid #C8473E;
}
.egs-d-num { font: 700 10px/1 'Inter',sans-serif; color: #C8473E; letter-spacing: 0.2em; }
.egs-d-name { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin: 4px 0 6px; }
.egs-d-core { font: 500 12px/1.5 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 6px; }
.egs-d-eg { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #8A7A55; padding: 6px 8px; background: rgba(184,149,64,0.06); border-radius: 6px; }
.egs-d-eg-l { font: 600 10px/1 'Noto Serif SC',serif; color: #B89540; margin-right: 6px; letter-spacing: 0.1em; }
.five-emo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 18px; }
.five-emo-cell {
padding: 14px 16px;
border: 1px solid rgba(184,149,64,0.2);
border-radius: 10px;
background: rgba(244,241,233,0.55);
border-top: 4px solid #B89540;
}
.five-emo-mu { border-top-color: #66CC66; background: linear-gradient(135deg, rgba(102,204,102,0.05) 0%, rgba(244,241,233,0.55) 100%); }
.five-emo-huo { border-top-color: #FF6B6B; background: linear-gradient(135deg, rgba(255,107,107,0.05) 0%, rgba(244,241,233,0.55) 100%); }
.five-emo-tu { border-top-color: #D2A560; background: linear-gradient(135deg, rgba(210,165,96,0.05) 0%, rgba(244,241,233,0.55) 100%); }
.five-emo-jin { border-top-color: #999; background: linear-gradient(135deg, rgba(153,153,153,0.05) 0%, rgba(244,241,233,0.55) 100%); }
.five-emo-shui { border-top-color: #4682B4; background: linear-gradient(135deg, rgba(70,130,180,0.05) 0%, rgba(244,241,233,0.55) 100%); }
.fe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.18); }
.fe-w { font: 700 22px/1 'Ma Shan Zheng',serif; color: #1F2A24; }
.fe-emo { font: 600 13px/1.3 'Noto Serif SC',serif; color: #8A332D; }
.fe-row { display: flex; gap: 8px; padding: 4px 0; font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
.fe-l { flex-shrink: 0; width: 64px; font: 600 11px/1.6 'Noto Serif SC',serif; color: #8A7A55; }
.fe-good { color: #3E6249; font-weight: 600; }
.fe-fc { color: #B89540; font-weight: 600; }
.ic-current { padding: 10px 16px; background: rgba(138,111,185,0.1); border-left: 3px solid #8A6FB9; border-radius: 0 8px 8px 0; margin-bottom: 12px; font: 500 13px/1.6 'Noto Serif SC',serif; }
.ic-cur-l { font-weight: 700; color: #6B4E8C; margin-right: 8px; }
.ic-cur-v { color: #1F2A24; font-weight: 700; font-size: 14px; }
.ic-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ic-type-cell { position: relative; padding: 12px 14px; border: 1px solid rgba(184,149,64,0.18); border-radius: 8px; background: rgba(244,241,233,0.5); transition: transform 0.25s, box-shadow 0.25s; }
.ic-type-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(184,149,64,0.15); }
.ic-type-cell.ic-yours { border: 2px solid #8A6FB9; background: linear-gradient(135deg, rgba(138,111,185,0.08) 0%, rgba(244,241,233,0.5) 100%); box-shadow: 0 4px 14px rgba(138,111,185,0.18); }
.ic-t-name { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; }
.ic-yours .ic-t-name { color: #6B4E8C; }
.ic-t-desc { font: 400 11px/1.6 'Noto Sans SC',sans-serif; color: #6B5635; }
.ic-t-flag { position: absolute; top: 8px; right: 10px; font: 700 9px/1 'Noto Serif SC',serif; color: #8A6FB9; letter-spacing: 0.15em; padding: 3px 6px; background: rgba(138,111,185,0.15); border-radius: 6px; }
.ic-soothe-block { padding: 14px 18px; background: linear-gradient(135deg, rgba(138,111,185,0.06) 0%, rgba(200,71,62,0.04) 100%); border-radius: 10px; margin-bottom: 18px; }
.ic-soothe-h { font: 700 12px/1 'Noto Serif SC',serif; color: #6B4E8C; letter-spacing: 0.1em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(138,111,185,0.2); }
.ic-soothe-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-soothe-line { font: 500 13px/1.5 'Noto Serif SC',serif; padding: 5px 12px; background: rgba(255,255,255,0.55); border-radius: 14px; color: #4A4035; letter-spacing: 0.02em; }
@media (max-width: 768px) {
.egs-detail-grid { grid-template-columns: 1fr; }
.five-emo-grid { grid-template-columns: 1fr; }
.ic-types-grid { grid-template-columns: 1fr; }
}
[data-theme="dark"] .egs-detail-cell, [data-theme="dark"] .five-emo-cell, [data-theme="dark"] .ic-type-cell, [data-theme="dark"] .ic-soothe-block { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .egs-d-name, [data-theme="dark"] .fe-w, [data-theme="dark"] .ic-t-name, [data-theme="dark"] .ic-cur-v, [data-theme="dark"] .ic-soothe-line { color: #E8E0CC !important; }
/* ================================================================ */
/* V7 — 12 系统通用 deep extras 样式 */
/* ================================================================ */
/* 五行方位色物对照(环境) */
.ext-five-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ext-fwx { padding: 12px 14px; border: 1px solid rgba(184,149,64,0.2); border-radius: 10px; background: rgba(244,241,233,0.55); border-top: 4px solid #B89540; }
.ext-fwx-mu { border-top-color: #66CC66; }
.ext-fwx-huo { border-top-color: #FF6B6B; }
.ext-fwx-tu { border-top-color: #D2A560; }
.ext-fwx-jin { border-top-color: #999; }
.ext-fwx-shui { border-top-color: #4682B4; }
.ext-fwx-w { font: 700 22px/1 'Ma Shan Zheng',serif; color: #1F2A24; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.ext-fwx-row { display: flex; gap: 8px; padding: 3px 0; font: 400 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
.ext-l { flex-shrink: 0; width: 40px; font: 600 11px/1.6 'Noto Serif SC',serif; color: #8A7A55; }
/* 通用编号列表 */
.ext-numbered { padding-left: 22px; margin: 8px 0 18px; font: 500 13px/1.95 'Noto Serif SC',serif; color: #4A4035; }
.ext-numbered li { padding: 3px 0; }
/* 通用列表 */
.ext-list { padding-left: 22px; margin: 8px 0 18px; font: 500 13px/1.85 'Noto Sans SC',sans-serif; color: #4A4035; }
.ext-list li { padding: 3px 0; }
.ext-list-good { color: #3E6249; }
/* 通用 pair grid(键值卡片网格)*/
.ext-pair-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 18px; }
.ext-pair-cell { padding: 10px 14px; background: rgba(244,241,233,0.55); border-radius: 8px; border-left: 3px solid #B89540; display: flex; flex-direction: column; gap: 4px; transition: transform 0.25s; }
.ext-pair-cell:hover { transform: translateX(2px); }
.ext-pair-k { font: 700 12px/1.3 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.08em; }
.ext-pair-v { font: 500 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
/* 通用表格 */
.ext-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font: 500 12px/1.6 'Noto Sans SC',sans-serif; }
.ext-table th { background: linear-gradient(135deg, #B89540, #8A7A55); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; letter-spacing: 0.05em; }
.ext-table th:first-child { border-radius: 8px 0 0 0; }
.ext-table th:last-child { border-radius: 0 8px 0 0; }
.ext-table td { padding: 8px 12px; border-bottom: 1px dashed rgba(184,149,64,0.15); }
.ext-table tr:hover td { background: rgba(184,149,64,0.04); }
.ext-td-time { color: #B89540; font-weight: 700; white-space: nowrap; }
.ext-td-mid { font-weight: 700; color: #1F2A24; }
.ext-td-good { color: #3E6249; font-weight: 600; }
.ext-td-bad { color: #8A332D; }
/* 通用 quote block(话术 / 宣告)*/
.ext-quote-block { padding: 14px 18px; background: linear-gradient(135deg, rgba(184,149,64,0.06) 0%, rgba(92,138,110,0.04) 100%); border-radius: 10px; margin-bottom: 18px; }
.ext-quote { padding: 8px 14px; background: rgba(255,255,255,0.55); border-left: 3px solid #B89540; border-radius: 0 8px 8px 0; margin: 6px 0; font: 500 13px/1.7 'Noto Serif SC',serif; color: #4A4035; }
.ext-time { display: inline-block; min-width: 60px; font: 700 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.1em; margin-right: 8px; }
/* 通用 chip row */
.ext-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ext-chip { padding: 6px 12px; background: rgba(184,149,64,0.14); color: #6B5635; border-radius: 14px; font: 600 11px/1.4 'Noto Sans SC',sans-serif; }
.ext-chip-bad { background: rgba(200,71,62,0.14); color: #8A332D; }
.ext-chip-bad-row { background: rgba(200,71,62,0.04); padding: 14px; border-radius: 10px; border: 1px dashed rgba(200,71,62,0.25); }
/* 通用 callout */
.ext-callout { padding: 12px 18px; background: linear-gradient(135deg, rgba(74,122,169,0.08) 0%, rgba(184,149,64,0.06) 100%); border-left: 3px solid #4A7AA9; border-radius: 0 10px 10px 0; font: 600 13px/1.6 'Noto Serif SC',serif; color: #2C4F73; margin-bottom: 18px; display: flex; align-items: center; }
.ext-callout i { color: #4A7AA9; }
/* 通用 tag */
.ext-tag { display: inline-block; padding: 3px 10px; background: rgba(184,149,64,0.18); color: #6B5635; border-radius: 10px; font: 600 11px/1 'Noto Sans SC',sans-serif; margin-left: 6px; }
/* 通用 tri row(早/午/晚 三栏)*/
.ext-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ext-tri-c { padding: 12px 14px; background: rgba(244,241,233,0.55); border-radius: 10px; border-top: 3px solid #B89540; }
.ext-tri-c:nth-child(1) { border-top-color: #E08A4A; }
.ext-tri-c:nth-child(2) { border-top-color: #B89540; }
.ext-tri-c:nth-child(3) { border-top-color: #4A7AA9; }
.ext-tri-h { font: 700 13px/1 'Noto Serif SC',serif; color: #6B5635; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(184,149,64,0.2); }
.ext-tri-c ul { padding-left: 18px; margin: 0; font: 500 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; }
@media (max-width: 768px) {
.ext-five-grid, .ext-pair-grid, .ext-tri { grid-template-columns: 1fr; }
.ext-table { font-size: 11px; }
.ext-table th, .ext-table td { padding: 5px 8px; }
}
[data-theme="dark"] .ext-fwx, [data-theme="dark"] .ext-pair-cell, [data-theme="dark"] .ext-quote, [data-theme="dark"] .ext-tri-c { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .ext-fwx-w, [data-theme="dark"] .ext-pair-k, [data-theme="dark"] .ext-td-mid { color: #E8E0CC !important; }
/* 简短报告按钮(蓝绿渐变)*/
.uhc-btn.uhc-btn-summary {
background: linear-gradient(135deg, #4A7AA9 0%, #5C8A6E 100%) !important;
color: #F4F1E9 !important;
border-color: #4A7AA9 !important;
}
.uhc-btn.uhc-btn-summary i,
.uhc-btn.uhc-btn-summary span { color: #F4F1E9 !important; }
.uhc-btn.uhc-btn-summary:hover {
background: linear-gradient(135deg, #5C8FC0 0%, #6CA180 100%) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(74, 122, 169, 0.4) !important;
}
/* PDF 导出按钮(金 + 暖)*/
.uhc-btn.uhc-btn-pdf {
background: linear-gradient(135deg, #B89540 0%, #8A7A55 100%) !important;
color: #F4F1E9 !important;
border-color: #8A7A55 !important;
}
.uhc-btn.uhc-btn-pdf i,
.uhc-btn.uhc-btn-pdf span { color: #F4F1E9 !important; }
.uhc-btn.uhc-btn-pdf:hover {
background: linear-gradient(135deg, #D4A84A 0%, #B89540 100%) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(184, 149, 64, 0.4) !important;
}
/* ================================================================ */
/* 简短结论报告(5 页)*/
/* ================================================================ */
.summary-page { max-width: 900px; margin: 0 auto; }
.sm-page {
position: relative;
background: linear-gradient(180deg, #FBF8F0 0%, #F4EFE0 100%);
padding: 50px 60px;
margin-bottom: 24px;
border: 1px solid rgba(184, 149, 64, 0.25);
border-radius: 10px;
min-height: 1100px;
box-shadow: 0 6px 28px rgba(20, 24, 29, 0.1);
page-break-after: always;
page-break-inside: avoid;
}
.sm-page:last-child { page-break-after: auto; }
/* === Page 1 · 封面 === */
.sm-cover {
background: linear-gradient(135deg, #1F2A24 0%, #2C3540 100%);
color: #F4F1E9;
padding-top: 100px;
}
.sm-cover-deco {
position: absolute;
top: 0; left: 0; right: 0; height: 8px;
background: linear-gradient(90deg, #B89540 0%, #5C8A6E 50%, #C8473E 100%);
}
.sm-cover-eyebrow { font: 600 11px/1 'Inter',sans-serif; letter-spacing: 0.4em; color: #B89540; text-align: center; margin-bottom: 12px; }
.sm-cover-title { font: 700 42px/1.2 'Noto Serif SC','Ma Shan Zheng',serif; color: #F4F1E9; text-align: center; letter-spacing: 0.1em; margin-bottom: 8px; }
.sm-cover-subtitle { font: 500 16px/1.4 'Noto Serif SC',serif; color: #B89540; text-align: center; margin-bottom: 40px; letter-spacing: 0.2em; }
.sm-cover-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #B89540 50%, transparent 100%); margin: 0 auto 40px; max-width: 280px; }
.sm-cover-info { max-width: 450px; margin: 0 auto 40px; }
.sm-ci-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(184,149,64,0.25); font: 500 14px/1.4 'Noto Serif SC',serif; }
.sm-ci-l { color: #B89540; letter-spacing: 0.15em; }
.sm-ci-v { color: #F4F1E9; font-weight: 600; }
.sm-bz-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 480px; margin: 0 auto 32px; }
.sm-bz { text-align: center; padding: 14px 8px; background: rgba(244,241,233,0.08); border: 1px solid rgba(184,149,64,0.3); border-radius: 8px; }
.sm-bz-day { background: rgba(184,149,64,0.18); border-color: #B89540; }
.sm-bz-l { font: 500 10px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.2em; margin-bottom: 6px; }
.sm-bz-v { font: 700 22px/1 'Ma Shan Zheng',serif; color: #F4F1E9; letter-spacing: 0.05em; }
.sm-core-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 600px; margin: 0 auto 28px; }
.sm-core-cell { padding: 10px 12px; background: rgba(244,241,233,0.07); border-radius: 6px; text-align: center; }
.sm-core-l { font: 500 10px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.15em; margin-bottom: 4px; }
.sm-core-v { font: 700 14px/1.3 'Noto Serif SC',serif; color: #F4F1E9; }
.sm-core-big { font-size: 18px; }
.sm-core-good { color: #5C8A6E; }
.sm-core-bad { color: #E08A7A; }
.sm-elements { max-width: 600px; margin: 0 auto; }
.sm-section-l { font: 600 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.2em; margin-bottom: 14px; text-align: center; }
.sm-elem-row { display: grid; grid-template-columns: 24px 20px 1fr 40px; align-items: center; gap: 10px; padding: 5px 0; }
.sm-elem-i { width: 22px; height: 22px; border-radius: 50%; }
.sm-elem-n { font: 700 14px/1 'Ma Shan Zheng',serif; color: #F4F1E9; }
.sm-elem-bar { height: 8px; background: rgba(244,241,233,0.1); border-radius: 4px; overflow: hidden; }
.sm-elem-fill { height: 100%; border-radius: 4px; }
.sm-elem-v { font: 500 11px/1 'Inter',sans-serif; color: rgba(244,241,233,0.85); text-align: right; }
/* === 通用 内页样式 === */
.sm-h { font: 700 17px/1.4 'Noto Serif SC',serif; color: #1F2A24; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px solid #B89540; letter-spacing: 0.05em; }
.sm-h-2 { margin-top: 32px; }
.sm-opening, .sm-final { font: 500 14px/1.95 'Noto Serif SC',serif; color: #2C3540; padding: 16px 20px; background: rgba(184,149,64,0.06); border-left: 3px solid #B89540; border-radius: 0 8px 8px 0; }
.sm-rp { display: flex; gap: 14px; margin-bottom: 16px; padding: 14px 18px; background: rgba(255,255,255,0.55); border-radius: 8px; border-left: 3px solid #C8473E; }
.sm-rp-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #C8473E, #8A332D); color: #fff; font: 700 14px/36px 'Inter',sans-serif; text-align: center; }
.sm-rp-body { flex: 1; }
.sm-rp-name { font: 700 14px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; }
.sm-rp-line { font: 500 12px/1.7 'Noto Sans SC',sans-serif; color: #4A4035; padding: 2px 0; }
.sm-rp-line strong { color: #8A7A55; margin-right: 6px; font-weight: 700; }
.sm-rp-entry { color: #3E6249; font-weight: 600; }
.sm-priority-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.sm-prio { padding: 14px 18px; background: rgba(255,255,255,0.55); border-radius: 8px; border-left: 4px solid #B89540; }
.sm-prio-rank { font: 700 11px/1 'Noto Serif SC',serif; color: #B89540; letter-spacing: 0.2em; margin-bottom: 4px; }
.sm-prio-name { font: 700 16px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 8px; }
.sm-prio-r { font: 500 12px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; padding: 3px 0; }
.sm-prio-r strong { color: #8A7A55; margin-right: 6px; }
.sm-prio-bad strong { color: #C8473E; }
.sm-prio-good strong { color: #5C8A6E; }
.sm-prio-bad { color: #8A332D; }
.sm-prio-good { color: #3E6249; }
.sm-map-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sm-map-cell { padding: 12px 14px; background: rgba(255,255,255,0.55); border-radius: 8px; border-top: 3px solid #B89540; }
.sm-map-1 { border-top-color: #B89540; }
.sm-map-2 { border-top-color: #C8473E; }
.sm-map-3 { border-top-color: #4A7AA9; }
.sm-map-h { font: 700 12px/1 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.1em; margin-bottom: 8px; }
.sm-map-cell ul { padding-left: 16px; margin: 0; font: 500 11px/1.6 'Noto Sans SC',sans-serif; color: #4A4035; }
.sm-map-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.sm-map-tag { padding: 2px 8px; background: rgba(200,71,62,0.16); color: #8A332D; border-radius: 8px; font: 500 10px/1.4 'Noto Sans SC',sans-serif; }
.sm-map-tip { font: 500 11px/1.5 'Noto Sans SC',sans-serif; color: #3E6249; }
.sm-map-mode { font: 700 13px/1.4 'Noto Serif SC',serif; color: #2C4F73; }
.sm-fc { margin-bottom: 18px; }
.sm-fc-card { padding: 18px 22px; background: rgba(255,255,255,0.55); border-radius: 10px; border-left: 4px solid #B89540; margin-bottom: 12px; }
.sm-fc-tone-aura { border-left-color: #8A6FB9; }
.sm-fc-tone-consciousness { border-left-color: #4A7AA9; }
.sm-fc-tone-emotion { border-left-color: #5C8A6E; }
.sm-fc-tone-attraction { border-left-color: #E08A4A; }
.sm-fc-tone-abundance { border-left-color: #C9A04A; }
.sm-fc-tag { display: inline-block; padding: 4px 10px; background: #B89540; color: #fff; border-radius: 10px; font: 700 10px/1 'Noto Sans SC',sans-serif; letter-spacing: 0.15em; margin-bottom: 8px; }
.sm-fc-name { font: 700 18px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 8px; }
.sm-fc-meta { display: flex; gap: 16px; font: 500 12px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; margin-bottom: 12px; }
.sm-fc-meta s { color: #8A8478; }
.sm-fc-affirm { font: 500 13px/1.8 'Noto Serif SC',serif; color: #4A4035; padding: 12px 16px; background: rgba(184,149,64,0.08); border-radius: 8px; }
.sm-fc-aux { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: rgba(255,255,255,0.4); border-radius: 8px; }
.sm-fc-aux-l { font: 600 11px/1 'Noto Serif SC',serif; color: #8A7A55; letter-spacing: 0.15em; }
.sm-fc-aux-chip { padding: 4px 10px; background: rgba(184,149,64,0.16); color: #6B5635; border-radius: 10px; font: 500 12px/1.4 'Noto Sans SC',sans-serif; }
.sm-21 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sm-21-cell { padding: 14px 16px; background: rgba(255,255,255,0.55); border-radius: 8px; border-top: 3px solid #B89540; }
.sm-21-n { font: 700 11px/1 'Inter',sans-serif; color: #B89540; letter-spacing: 0.15em; margin-bottom: 6px; }
.sm-21-t { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; }
.sm-21-g { font: 500 11px/1.6 'Noto Sans SC',sans-serif; color: #6B5635; }
/* 完整报告 25 章 目录预览 */
.sm-toc-intro {
font: 500 12px/1.7 'Noto Serif SC',serif;
color: #4A4035;
padding: 12px 16px;
background: rgba(184,149,64,0.08);
border-left: 3px solid #B89540;
border-radius: 0 6px 6px 0;
margin-bottom: 14px;
}
.sm-toc-intro strong { color: #B89540; font-weight: 700; }
.sm-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sm-toc-group {
padding: 12px 14px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(184,149,64,0.18);
border-radius: 8px;
page-break-inside: avoid;
}
.sm-toc-g-h {
display: flex; align-items: center; gap: 8px;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px dashed rgba(184,149,64,0.25);
}
.sm-toc-g-icon { font-size: 16px; }
.sm-toc-g-name { font: 700 11px/1.3 'Noto Serif SC',serif; color: #6B5635; letter-spacing: 0.08em; }
.sm-toc-list { display: flex; flex-direction: column; gap: 3px; }
.sm-toc-row {
display: flex; align-items: baseline; gap: 8px;
padding: 3px 6px;
border-radius: 4px;
transition: background 0.2s;
}
.sm-toc-row:hover { background: rgba(184,149,64,0.06); }
.sm-toc-n {
flex-shrink: 0;
font: 700 10px/1.4 'Inter',sans-serif;
color: #B89540;
letter-spacing: 0.05em;
min-width: 22px;
}
.sm-toc-name {
font: 500 11px/1.5 'Noto Sans SC',sans-serif;
color: #4A4035;
}
.sm-toc-cta {
text-align: center;
padding: 12px 18px;
background: linear-gradient(135deg, #B89540 0%, #8A7A55 100%);
color: #F4F1E9;
border-radius: 8px;
font: 700 12px/1.5 'Noto Serif SC',serif;
letter-spacing: 0.05em;
box-shadow: 0 4px 14px rgba(184,149,64,0.25);
}
@media print {
.sm-toc { grid-template-columns: 1fr 1fr; }
.sm-toc-group { background: #fff !important; }
}
[data-theme="dark"] .sm-toc-group { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .sm-toc-name { color: #C8C5BE !important; }
/* ================================================================ */
/* V8 — 信任层 + 一页总览 + 共鸣页 + 健康 + 评分 + 90天 + 见证 + 顾问 */
/* ================================================================ */
/* 报告生成依据(信任层)— 精致版 */
.trust-card {
background: linear-gradient(135deg, #F4F1E9 0%, #FBF8F0 100%) !important;
border: 1px solid rgba(74,122,169,0.25) !important;
box-shadow: 0 6px 24px rgba(20,24,29,0.06);
position: relative;
overflow: hidden;
}
.trust-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #4A7AA9 0%, #B89540 50%, #5C8A6E 100%);
}
.trust-opening {
font: 500 14px/1.85 var(--font-wenkai);
color: #2C4F73;
padding: 18px 24px;
background: linear-gradient(135deg, rgba(74,122,169,0.08) 0%, rgba(184,149,64,0.04) 100%);
border-left: 4px solid #4A7AA9;
border-radius: 0 10px 10px 0;
margin-bottom: 22px;
letter-spacing: 0.02em;
}
.trust-chain { margin-bottom: 22px; }
.trust-row {
display: grid;
grid-template-columns: 60px 120px 1fr;
gap: 14px;
padding: 12px 18px;
background: rgba(255,255,255,0.7);
border-radius: 8px;
margin-bottom: 6px;
align-items: center;
border-left: 3px solid transparent;
transition: all 0.25s ease;
}
.trust-row:hover {
background: rgba(255,255,255,0.95);
border-left-color: #4A7AA9;
transform: translateX(3px);
}
.trust-n {
font: 700 12px/1 var(--font-mono);
color: #4A7AA9;
letter-spacing: 0.12em;
background: linear-gradient(135deg, rgba(74,122,169,0.12) 0%, rgba(74,122,169,0.06) 100%);
padding: 6px 8px;
border-radius: 6px;
text-align: center;
}
.trust-name { font: 700 13px/1.3 var(--font-serif); color: #1F2A24; letter-spacing: 0.04em; }
.trust-detail { font: 400 12px/1.7 var(--font-sans); color: #4A4035; }
.trust-notes {
padding: 16px 20px;
background: linear-gradient(135deg, rgba(184,149,64,0.08) 0%, rgba(184,149,64,0.04) 100%);
border-radius: 10px;
border: 1px dashed rgba(184,149,64,0.25);
}
.trust-note { font: 400 12px/1.8 var(--font-sans); color: #6B5635; padding: 6px 0; }
.trust-note strong { color: #B89540; font-weight: 700; }
.trust-boundary { padding-top: 10px; margin-top: 10px; border-top: 1px dashed rgba(184,149,64,0.3); }
.trust-boundary strong { color: #C8473E; }
/* ================================================================ */
/* 一页式总览(命片版) · 精致设计 */
/* ================================================================ */
.onepage-card {
position: relative;
background:
radial-gradient(ellipse at top right, rgba(184,149,64,0.10) 0%, transparent 60%),
radial-gradient(ellipse at bottom left, rgba(92,138,110,0.08) 0%, transparent 60%),
linear-gradient(180deg, #FBF8F0 0%, #F4EFE0 100%) !important;
border: 1px solid rgba(184,149,64,0.3) !important;
box-shadow: 0 12px 40px rgba(20,24,29,0.08), inset 0 0 0 1px rgba(255,255,255,0.6) !important;
overflow: hidden;
}
.onepage-card::before, .onepage-card::after {
content: ''; position: absolute;
width: 80px; height: 80px;
border: 1.5px solid #B89540;
z-index: 1;
pointer-events: none;
}
.onepage-card::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.onepage-card::after { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.op-deco {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #5C8A6E 0%, #B89540 50%, #C8473E 100%);
z-index: 2;
}
.op-subtitle {
text-align: center;
font: 500 13px/1.6 var(--font-wenkai);
color: #8A7A55;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px dashed rgba(184,149,64,0.3);
letter-spacing: 0.04em;
}
.onepage-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.op-cell {
position: relative;
padding: 16px 18px 16px 56px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(184,149,64,0.18);
border-radius: 10px;
box-shadow: 0 3px 12px rgba(184,149,64,0.08);
min-height: 76px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
opacity: 0;
animation: opFadeIn 0.6s ease forwards;
}
@keyframes opFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.op-cell:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(184,149,64,0.18);
}
.op-cell-bg {
position: absolute;
inset: 0;
opacity: 0.04;
background-image: radial-gradient(circle at 80% 50%, currentColor 0%, transparent 60%);
pointer-events: none;
}
.op-icon {
position: absolute;
left: 18px; top: 50%;
transform: translateY(-50%);
color: var(--op-color, #B89540);
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(184,149,64,0.18);
font-size: 14px !important;
}
.op-l {
font: 700 10px/1 var(--font-mono) !important;
color: var(--op-color, #B89540) !important;
letter-spacing: 0.25em;
margin-bottom: 6px;
text-transform: uppercase;
opacity: 0.85;
}
.op-v {
font: 700 14px/1.45 var(--font-serif) !important;
color: #1F2A24;
letter-spacing: 0.02em;
word-break: break-word;
}
/* 类别颜色 */
.op-cell.op-cat-core { --op-color: #B89540; border-left: 3px solid #B89540; }
.op-cell.op-cat-good { --op-color: #5C8A6E; border-left: 3px solid #5C8A6E; }
.op-cell.op-cat-bad { --op-color: #C8473E; border-left: 3px solid #C8473E; }
.op-cell.op-cat-env { --op-color: #8A6FB9; border-left: 3px solid #8A6FB9; }
.op-cell.op-cat-adv { --op-color: #3E6249; border-left: 3px solid #3E6249; }
.op-cell.op-cat-pri1 { --op-color: #C8473E; border-left: 3px solid #C8473E; background: linear-gradient(135deg, rgba(200,71,62,0.04) 0%, rgba(255,255,255,0.85) 60%); }
.op-cell.op-cat-pri2 { --op-color: #B89540; border-left: 3px solid #B89540; background: linear-gradient(135deg, rgba(184,149,64,0.04) 0%, rgba(255,255,255,0.85) 60%); }
.op-cell.op-cat-pri3 { --op-color: #5C8A6E; border-left: 3px solid #5C8A6E; background: linear-gradient(135deg, rgba(92,138,110,0.04) 0%, rgba(255,255,255,0.85) 60%); }
.op-cell.op-cat-action { --op-color: #4A7AA9; border-left: 3px solid #4A7AA9; }
.op-cell.op-cat-fc { --op-color: #C9A04A; border-left: 3px solid #C9A04A; }
.op-footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed rgba(184,149,64,0.3);
font: 500 11px/1 var(--font-mono);
color: #8A7A55;
letter-spacing: 0.15em;
}
.op-stamp { font-family: var(--font-seal); letter-spacing: 0.2em; color: #B89540; }
/* 移动响应 */
@media (max-width: 992px) {
.onepage-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
.onepage-grid { grid-template-columns: 1fr; }
.onepage-card::before, .onepage-card::after { width: 50px; height: 50px; }
.op-footer { flex-direction: column; gap: 4px; align-items: flex-start; }
}
[data-theme="dark"] .onepage-card { background: linear-gradient(180deg, #1B2128 0%, #14181D 100%) !important; }
[data-theme="dark"] .op-cell { background: rgba(28,35,42,0.85) !important; }
[data-theme="dark"] .op-v { color: #E8E0CC !important; }
[data-theme="dark"] .op-icon { background: rgba(40,48,56,0.95) !important; }
/* 客户共鸣页 · 精致版 */
.resonance-card {
background:
radial-gradient(circle at top right, rgba(200,71,62,0.06) 0%, transparent 50%),
linear-gradient(180deg, #FBF8F0 0%, #F7F2E5 100%) !important;
border: 1px solid rgba(200,71,62,0.22) !important;
box-shadow: 0 8px 28px rgba(200,71,62,0.06);
position: relative;
overflow: hidden;
}
.resonance-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #C8473E 30%, #B89540 70%, transparent 100%);
}
.resonance-intro {
font: 600 14px/1.7 var(--font-wenkai);
color: #8A332D;
padding: 16px 22px;
background: linear-gradient(135deg, rgba(200,71,62,0.08) 0%, rgba(184,149,64,0.04) 100%);
border-left: 4px solid #C8473E;
border-radius: 0 10px 10px 0;
margin-bottom: 18px;
letter-spacing: 0.03em;
}
.resonance-list { margin-bottom: 22px; }
.rz-row {
display: flex; align-items: flex-start; gap: 16px;
padding: 14px 20px;
background: rgba(255,255,255,0.75);
border-radius: 10px;
margin-bottom: 8px;
border: 1px solid rgba(184,149,64,0.12);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(184,149,64,0.04);
}
.rz-row:hover {
transform: translateX(6px);
background: rgba(255,255,255,0.95);
border-color: #C8473E;
box-shadow: 0 4px 16px rgba(200,71,62,0.12);
}
.rz-n {
flex-shrink: 0;
font: 700 14px/1.4 var(--font-mono);
color: #fff;
min-width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #C8473E 0%, #8A332D 100%);
text-align: center;
line-height: 30px;
box-shadow: 0 3px 10px rgba(200,71,62,0.3);
}
.rz-text {
font: 500 14px/1.85 var(--font-wenkai);
color: #2C3540;
letter-spacing: 0.02em;
padding-top: 3px;
}
.resonance-cta {
text-align: center;
padding: 18px 24px;
background: linear-gradient(135deg, #C8473E 0%, #8A332D 100%);
color: #F4F1E9;
border-radius: 12px;
font: 700 15px/1.6 var(--font-serif);
letter-spacing: 0.08em;
box-shadow: 0 10px 30px rgba(200,71,62,0.35);
position: relative;
overflow: hidden;
}
.resonance-cta::before {
content: '';
position: absolute;
inset: 1px;
border: 1px solid rgba(244,241,233,0.3);
border-radius: 11px;
pointer-events: none;
}
/* 健康系统 第 13 大 */
.health-card { border-left: 4px solid #5C8A6E; }
.health-compliance { padding: 12px 16px; background: rgba(200,71,62,0.05); border-left: 2px solid #C8473E; border-radius: 0 4px 4px 0; font: 400 11px/1.7 var(--font-sans); color: #8A7A55; margin: 18px 0; }
/* 造运指数评分表 */
.score-index-card { background: linear-gradient(135deg, rgba(184,149,64,0.04) 0%, rgba(74,122,169,0.04) 100%); }
.score-intro { font: 500 13px/1.7 var(--font-wenkai); color: #6B5635; padding: 12px 16px; background: rgba(184,149,64,0.07); border-radius: 8px; margin-bottom: 14px; }
.score-table th { font-size: 11px; }
.score-bar-cell { min-width: 120px; }
.score-bar-wrap { position: relative; background: rgba(184,149,64,0.1); border-radius: 12px; overflow: hidden; height: 22px; display: flex; align-items: center; padding: 0 8px; }
.score-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 12px; transition: width 0.6s; }
.score-num { position: relative; z-index: 1; font: 700 12px/1 var(--font-mono); color: #1F2A24; }
.pri-tag { display: inline-block; padding: 3px 10px; border-radius: 10px; font: 700 10px/1 var(--font-sans); letter-spacing: 0.1em; }
.pri-high { background: rgba(200,71,62,0.18); color: #8A332D; }
.pri-mid { background: rgba(184,149,64,0.18); color: #6B5635; }
.score-note { font: 400 11px/1.6 var(--font-sans); color: #8A7A55; padding: 10px 14px; background: rgba(184,149,64,0.04); border-radius: 6px; margin-top: 12px; }
/* 90 天计划 */
.plan90-card { border-left: 4px solid #4A7AA9; }
.p90-month { padding: 16px 20px; margin-bottom: 12px; background: rgba(255,255,255,0.55); border-radius: 10px; border-left: 4px solid #4A7AA9; }
.p90-month:nth-child(2) { border-left-color: #5C8A6E; }
.p90-month:nth-child(3) { border-left-color: #B89540; }
.p90-month:nth-child(4) { border-left-color: #C8473E; }
.p90-m-h { font: 700 15px/1.3 var(--font-serif); color: #1F2A24; margin-bottom: 6px; }
.p90-m-focus { font: 500 12px/1.5 var(--font-sans); color: #4A7AA9; margin-bottom: 10px; }
.p90-m-focus strong { color: #2C4F73; }
.p90-m-list { padding-left: 22px; margin: 0; font: 500 13px/1.8 var(--font-sans); color: #4A4035; }
.p90-closing { text-align: center; padding: 14px 20px; background: linear-gradient(135deg, #4A7AA9 0%, #5C8A6E 100%); color: #F4F1E9; border-radius: 10px; font: 700 13px/1.5 var(--font-serif); margin-top: 12px; }
/* 客户见证 */
.testimonial-card { background: linear-gradient(135deg, rgba(92,138,110,0.04) 0%, rgba(184,149,64,0.04) 100%); }
.tm-opening { font: 500 13px/1.7 var(--font-wenkai); color: #6B5635; padding: 12px 16px; background: rgba(92,138,110,0.07); border-left: 3px solid #5C8A6E; border-radius: 0 8px 8px 0; margin-bottom: 16px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tm-cell { padding: 14px 18px; background: rgba(255,255,255,0.55); border-radius: 10px; border-top: 3px solid #5C8A6E; }
.tm-type { font: 700 12px/1 var(--font-serif); color: #3E6249; letter-spacing: 0.05em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(92,138,110,0.25); }
.tm-desc { font: 400 12px/1.7 var(--font-wenkai); color: #4A4035; }
.tm-note { font: 400 11px/1.6 var(--font-sans); color: #8A7A55; padding: 10px 14px; background: rgba(184,149,64,0.05); border-radius: 6px; }
/* 顾问话术 */
.consultant-card { background: linear-gradient(135deg, rgba(74,122,169,0.04) 0%, rgba(138,111,185,0.04) 100%); border: 2px dashed rgba(74,122,169,0.25); }
.cs-flow { margin-bottom: 22px; }
.cs-step { display: flex; gap: 14px; padding: 12px 16px; background: rgba(255,255,255,0.55); border-radius: 8px; margin-bottom: 8px; }
.cs-step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4A7AA9, #2C4F73); color: #fff; font: 700 14px/32px var(--font-mono); text-align: center; }
.cs-step-body { flex: 1; }
.cs-step-title { font: 700 13px/1.3 var(--font-serif); color: #1F2A24; margin-bottom: 4px; }
.cs-step-script { font: 500 13px/1.7 var(--font-wenkai); color: #2C4F73; padding: 8px 12px; background: rgba(74,122,169,0.06); border-radius: 6px; }
.cs-demo-h { font: 700 12px/1 var(--font-serif); color: #6B5635; margin: 18px 0 8px; letter-spacing: 0.1em; }
.cs-demo-pitch { font: 500 14px/1.95 var(--font-wenkai); color: #4A4035; padding: 18px 22px; background: linear-gradient(135deg, rgba(184,149,64,0.08) 0%, rgba(74,122,169,0.06) 100%); border-radius: 10px; }
@media (max-width: 768px) {
.onepage-grid { grid-template-columns: 1fr 1fr; }
.trust-row { grid-template-columns: 36px 1fr; }
.trust-detail { grid-column: 2; padding-top: 4px; }
.tm-grid { grid-template-columns: 1fr; }
}
[data-theme="dark"] .trust-row, [data-theme="dark"] .op-cell, [data-theme="dark"] .rz-row,
[data-theme="dark"] .p90-month, [data-theme="dark"] .tm-cell, [data-theme="dark"] .cs-step,
[data-theme="dark"] .cs-demo-pitch { background: rgba(28,35,42,0.7) !important; }
[data-theme="dark"] .op-v, [data-theme="dark"] .trust-name, [data-theme="dark"] .rz-text,
[data-theme="dark"] .tm-desc, [data-theme="dark"] .cs-step-title, [data-theme="dark"] .p90-m-h { color: #E8E0CC !important; }
/* ================================================================ */
/* V8 — 整体字体 + 符号 全局优化 */
/* ================================================================ */
/* 字体栈变量 */
:root {
/* 中文衬线 — 报告主标题 + 引文 */
--font-serif: 'Noto Serif SC', 'LXGW WenKai TC', 'Source Han Serif SC', 'Songti SC', serif;
/* 中文无衬线 — UI + 正文 */
--font-sans: 'PingFang SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
/* 毛笔风 — 四柱 / 章节阶段编号 / 印章 */
--font-brush: 'Ma Shan Zheng', 'LXGW WenKai TC', 'STKaiti', '楷体', serif;
/* 文楷优雅风 — 引言 / 总结 / 宣告 */
--font-wenkai: 'LXGW WenKai TC', 'STKaiti', 'KaiTi', serif;
/* 印章风 — 标签 + Logo */
--font-seal: 'ZCOOL QingKe HuangYou', 'LXGW WenKai TC', serif;
/* 古风手写 — 装饰用 */
--font-longcang: 'Long Cang', 'ZCOOL XiaoWei', cursive;
/* 西文衬线 — 数字 + 拉丁标语 */
--font-display: 'DM Serif Display', 'Cormorant Garamond', 'Times New Roman', serif;
/* 西文无衬线 — UI 数字 / Tabular */
--font-mono: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
}
/* 全局基础字体规范 */
body, html {
font-family: var(--font-sans);
font-feature-settings: 'kern' 1, 'liga' 1, 'palt' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* 所有数字 Tabular 对齐(避免数字跳动)*/
.fs-bz-v, .uhc-pillar-gz, .ahc-stat-n, .nyc-gz, .fp-val, .ext-td-time,
.dyg-age, .dyg-year, .dyg-gz, .ly-gz, .p21-node-num, .p49-num,
.score-num, .hp-score-num, .scc-num, .hs-num, .ns-num, .ic-soothe-line,
.sm-bz-v, .sm-toc-n, .sm-page-num, .egs-d-num, .rp-num, .tgb-count,
.dwc-val, .dr-val, .fc-frs-en, .fcpt-now, .fcpt-save,
.fp-n-h, .deep-n-h, .tgb-n-h {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* 提升标题字重一致性 */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); letter-spacing: 0.02em; }
/* 章节大标题(report-section / action-section)*/
.card-label.fw-bold {
font-family: var(--font-serif) !important;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.45;
}
/* 引文 + 开场白 + 总结 用文楷优雅体 */
.opening, .action-opening, .final-text, .ai-narrative-body,
.sm-opening, .sm-final, .deep-opening,
.report-warning, .ahc-eyebrow,
.fc-affirm-body, .ic-soothe-line, .ext-quote, .bl-affirm,
.emo-key-sentence, .ns-closing, .hs-principle,
.fc-intro-line, .ic-soothe-block {
font-family: var(--font-wenkai), var(--font-serif);
letter-spacing: 0.04em;
line-height: 1.95;
}
/* 印章 + 大标题数字 */
.final-seal, .sm-seal,
.uhc-pillar-gz, .nyc-gz, .sb-eyebrow,
.fp-name, .fe-w, .dwc-name, .ext-fwx-w,
.dyg-gz, .ly-gz {
font-family: var(--font-brush);
letter-spacing: 0.05em;
}
/* 西文标签(EYEBROW 类) */
.ahc-eyebrow, .sb-eyebrow, .uhc-tag,
.sm-cover-eyebrow, .fc-intro-tag,
.tgb-n-h, .deep-n-h, .fp-n-h, .af-h i + span,
.zm-sub, .pat-label, .fc-frs-en,
.ext-l, .fe-l, .deep-l, .fp-l, .rp-l, .tgb-l, .emo-six-l,
.summary-label, .nyc-label,
.cg-label, .bg-label {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* 中文短语标签(letter-spacing 不要太大)*/
.sb-title, .fp-theme, .pat-name, .fc-name, .ext-pair-k,
.deep-list-h, .sm-h, .tgb-name, .rp-name, .emo-p-val {
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 0.05em;
}
/* 印章风 - Logo + 大字标 */
.fs-text, .sm-seal { font-family: var(--font-brush) !important; }
.sm-cover-title { font-family: var(--font-serif), var(--font-display) !important; letter-spacing: 0.18em; }
.ahc-title, .ahc-t-1, .ahc-t-2 { font-family: var(--font-serif), var(--font-display); letter-spacing: 0.08em; }
/* 数字超大字号(stat-n / score-num)更优雅西文衬线 */
.ahc-stat-n, .hp-score-num, .uhc-cover-num,
.score-num { font-family: var(--font-display), var(--font-serif); font-style: normal; letter-spacing: -0.02em; }
/* 段落基础正文 */
p, li, td, .sub-body, .ss-b, .body, .sys-core, .core,
.report-body, .summary-value, .sm-rp-line, .sm-prio-r {
font-family: var(--font-sans);
line-height: 1.85;
letter-spacing: 0.015em;
}
/* 中文标点优化(全角紧凑)*/
.opening, .final-text, .ai-narrative-body,
.sm-opening, .sm-final, .deep-opening, .ext-quote,
.report-body, p, li {
text-justify: inter-ideograph;
word-break: keep-all;
}
/* 全局符号 · 统一为细圆点 */
.dot-sep,
.uhc-meta-dot, .ahc-stat-dot, .uhc-meta-item,
.zm-sub, .fe-emo, .fp-theme {
/* 使用 ·(U+00B7 中点)系统已经在用,微调:*/
font-feature-settings: 'kern' 1, 'palt' 1;
}
/* 装饰花纹分隔(可应用到任何卡片头部前面)*/
.sm-h::before, .deep-list-h::before {
/* 不强加,但可手动添加 */
}
/* 表情符号尺寸调小 + 垂直对齐 */
.sm-toc-g-icon, .deep-card .ki-solid + span,
.sys-block-h i, .deep-list-h i {
font-size: 0.95em;
vertical-align: -0.05em;
line-height: 1;
}
/* hyperlink 优化 */
a { font-variant-numeric: tabular-nums; }
/* 印章「儒圣 知命 造运」更老练 */
.final-seal .fs-text {
font-family: 'ZCOOL QingKe HuangYou', var(--font-brush) !important;
letter-spacing: 0.05em;
line-height: 1.15;
}
/* 移动端字号微调 */
@media (max-width: 768px) {
body { font-size: 14px; }
.card-label.fw-bold { font-size: 18px !important; }
.ahc-title { font-size: 22px !important; }
.sm-cover-title { font-size: 26px !important; }
}
/* 打印模式下字体确保清晰 */
@media print {
body { font-family: var(--font-serif) !important; font-size: 12pt; -webkit-print-color-adjust: exact; }
h1, h2, h3, h4 { font-family: var(--font-serif) !important; letter-spacing: 0.04em; }
.opening, .action-opening, .final-text, .sm-opening, .sm-final {
font-family: var(--font-wenkai), var(--font-serif) !important;
line-height: 1.85; font-size: 11pt;
}
}
.sm-ns { background: rgba(255,255,255,0.55); border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; }
.sm-ns-row { display: grid; grid-template-columns: 30px 1fr 2fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(184,149,64,0.18); font: 500 12px/1.5 'Noto Sans SC',sans-serif; }
.sm-ns-row:last-child { border-bottom: none; }
.sm-ns-n { font: 700 13px/1 'Inter',sans-serif; color: #B89540; text-align: center; }
.sm-ns-name { font: 700 13px/1.3 'Noto Serif SC',serif; color: #1F2A24; }
.sm-ns-d { color: #6B5635; }
.sm-seal-row { display: flex; align-items: center; gap: 20px; padding: 18px; background: rgba(184,149,64,0.06); border: 1px dashed rgba(184,149,64,0.3); border-radius: 8px; margin-bottom: 18px; }
.sm-seal { width: 70px; height: 70px; background: linear-gradient(135deg, #C8473E, #8A332D); color: #F4F1E9; display: flex; align-items: center; justify-content: center; font: 700 13px/1.2 'Ma Shan Zheng',serif; text-align: center; border-radius: 6px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(200,71,62,0.3); }
.sm-seal-info { font: 500 12px/1.8 'Noto Serif SC',serif; color: #6B5635; }
.sm-compliance { font: 400 11px/1.7 'Noto Sans SC',sans-serif; color: #8A7A55; padding: 12px 16px; background: rgba(200,71,62,0.04); border-left: 2px solid #C8473E; border-radius: 0 4px 4px 0; }
.sm-page-num { position: absolute; bottom: 24px; right: 60px; font: 500 11px/1 'Inter',sans-serif; color: #B89540; letter-spacing: 0.2em; }
.sm-cover .sm-page-num { color: #B89540; }
/* 简短报告专属打印优化 */
@media print {
.summary-page { max-width: none; }
.sm-page {
margin: 0;
padding: 24mm 22mm;
min-height: 0;
height: 297mm;
box-shadow: none;
border-radius: 0;
border: none;
page-break-after: always;
page-break-inside: avoid;
}
.sm-page-num { bottom: 14mm; right: 22mm; }
}
@media (max-width: 768px) {
.sm-page { padding: 30px 24px; }
.sm-cover-title { font-size: 28px; }
.sm-bz-row { grid-template-columns: repeat(2, 1fr); }
.sm-core-row, .sm-map-row, .sm-21 { grid-template-columns: 1fr; }
}
[data-theme="dark"] .sm-page:not(.sm-cover) { background: linear-gradient(180deg, #1B2128 0%, #14181D 100%) !important; }
[data-theme="dark"] .sm-h, [data-theme="dark"] .sm-rp-name, [data-theme="dark"] .sm-prio-name, [data-theme="dark"] .sm-fc-name, [data-theme="dark"] .sm-ns-name, [data-theme="dark"] .sm-21-t { color: #E8E0CC !important; }
[data-theme="dark"] .sm-rp, [data-theme="dark"] .sm-prio, [data-theme="dark"] .sm-map-cell, [data-theme="dark"] .sm-fc-card, [data-theme="dark"] .sm-21-cell, [data-theme="dark"] .sm-ns { background: rgba(28,35,42,0.7) !important; }
/* ===== Dashboard 进阶卡 ===== */
.dash-wx-row { display: flex; flex-direction: column; gap: 14px; }
.dash-wx-cell { display: grid; grid-template-columns: 30px 1fr 100px; align-items: center; gap: 14px; }
.dwc-name { font: 700 22px/1 'Ma Shan Zheng',serif; text-align: center; }
.dwc-bar { height: 12px; background: rgba(184, 149, 64, 0.08); border-radius: 6px; overflow: hidden; }
.dwc-fill { height: 100%; border-radius: 6px; transition: width 0.6s; }
.dwc-val { font: 500 12px/1 'Noto Sans SC',sans-serif; color: #6B5635; text-align: right; }
.dash-audit-row {
display: grid; grid-template-columns: 1fr 1fr 1fr auto;
gap: 6px;
padding: 6px 0;
border-bottom: 1px dashed rgba(184, 149, 64, 0.15);
font: 500 11px/1.4 'Noto Sans SC',sans-serif;
}
.dar-act { color: #B89540; font-weight: 600; }
.dar-tgt { color: #6B5635; }
.dar-by { font-size: 10px; }
.dar-ts { text-align: right; font-size: 9px; }
/* 报告快照 */
.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.snap-card { border: 1px solid rgba(184, 149, 64, 0.22); border-radius: 10px; padding: 14px; background: rgba(244, 241, 233, 0.6); }
.snap-head { display: flex; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(184, 149, 64, 0.2); }
.snap-type { font: 700 12px/1 'Noto Serif SC',serif; padding: 4px 8px; border-radius: 8px; background: #B89540; color: #fff; }
.snap-no { font: 600 11px/1 'Inter',sans-serif; color: #8A7A55; }
.snap-row { font: 500 12px/1.4 'Noto Sans SC',sans-serif; color: #4A4035; margin: 3px 0; }
.snap-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(184, 149, 64, 0.15); font-size: 10px; }
.tag-cell { cursor: pointer; display: inline-block; min-width: 60px; padding: 2px 4px; border-radius: 6px; transition: background 0.2s; }
.tag-cell:hover { background: rgba(184, 149, 64, 0.08); }
[data-theme="dark"] .dwc-bar { background: rgba(184, 149, 64, 0.12) !important; }
[data-theme="dark"] .snap-card { background: rgba(28, 35, 42, 0.7) !important; }
/* 出生年代分布 */
.decade-row { display: grid; grid-template-columns: 50px 1fr 35px; gap: 10px; align-items: center; margin-bottom: 8px; font: 500 12px/1 'Inter',sans-serif; color: #6B5635; }
.dr-bar { height: 10px; background: rgba(184, 149, 64, 0.1); border-radius: 5px; overflow: hidden; }
.dr-fill { height: 100%; background: linear-gradient(90deg, #B89540, #5C8A6E); border-radius: 5px; }
.dr-val { text-align: right; color: #1F2A24; font-weight: 600; }
[data-theme="dark"] .dr-bar { background: rgba(184, 149, 64, 0.15) !important; }
[data-theme="dark"] .dr-val { color: #E8E0CC !important; }
/* 格局 / 调候 / 合化 */
.pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pat-cell { padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(184, 149, 64, 0.22); background: linear-gradient(135deg, rgba(244, 241, 233, 0.7) 0%, rgba(232, 224, 204, 0.4) 100%); position: relative; overflow: hidden; }
.pat-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #B89540; }
.pat-main::before { background: #5C8A6E; }
.pat-tiao::before { background: #C8473E; }
.pat-he::before { background: #B89540; }
.pat-solar::before { background: #4A7AA9; }
.pat-label { font: 600 10px/1 'Noto Sans SC',sans-serif; color: #8A7A55; letter-spacing: 0.25em; margin-bottom: 6px; }
.pat-name { font: 700 18px/1.2 'Noto Serif SC',serif; color: #1F2A24; margin-bottom: 6px; }
.pat-main .pat-name { color: #3E6249; }
.pat-tiao .pat-name { color: #8A332D; }
.pat-reason { font: 400 11px/1.5 'Noto Sans SC',sans-serif; color: #6B5635; }
.pat-he-line { font: 500 13px/1.5 'Noto Serif SC',serif; color: #6B5635; }
[data-theme="dark"] .pat-cell { background: rgba(28, 35, 42, 0.7) !important; }
[data-theme="dark"] .pat-name { color: #E8E0CC !important; }
[data-theme="dark"] .pat-reason { color: #C8C5BE !important; }
/* ===== 响应式微调(Pass F)===== */
@media (max-width: 768px) {
.core-grid { grid-template-columns: 1fr 1fr !important; }
.balance-grid { grid-template-columns: 1fr !important; }
.annual-cols { grid-template-columns: 1fr !important; }
.top3-grid { grid-template-columns: 1fr !important; }
.plan21-grid { grid-template-columns: 1fr !important; }
.plan49-grid { grid-template-columns: 1fr 1fr !important; }
.risk-grid { grid-template-columns: 1fr !important; }
.uhc-pillars { gap: 4px !important; }
.uhc-pillar { padding: 6px 8px !important; }
.uhc-pillar-gz { font-size: 16px !important; }
.ahc-title { font-size: 20px !important; }
.ahc-subtitle { flex-wrap: wrap; font-size: 11px !important; }
.pattern-grid { grid-template-columns: 1fr !important; }
.shensha-grid { grid-template-columns: 1fr !important; }
.relations-grid { grid-template-columns: 1fr 1fr !important; }
.nayin-row { grid-template-columns: 1fr 1fr !important; }
.liuyue-grid { grid-template-columns: repeat(3, 1fr) !important; }
.dash-wx-cell { grid-template-columns: 24px 1fr 70px !important; gap: 8px !important; }
.batch-summary-table { font-size: 11px !important; }
.batch-summary-table th, .batch-summary-table td { padding: 6px 4px !important; }
table.dataTable { display: block; overflow-x: auto; }
.card-toolbar { flex-wrap: wrap !important; gap: 4px; }
.card-toolbar .btn { font-size: 12px !important; padding: 4px 8px !important; }
}
@media (max-width: 480px) {
.liuyue-grid { grid-template-columns: 1fr 1fr !important; }
.plan49-grid { grid-template-columns: 1fr !important; }
.relations-grid { grid-template-columns: 1fr !important; }
.hp-cards { grid-template-columns: 1fr !important; }
.uhc-body { flex-direction: column !important; }
.uhc-actions { flex-direction: row !important; justify-content: center !important; }
}
/* ================================================================ */
/* 移动端 UI 完整优化 V2 — 全报告手机适配 */
/* ================================================================ */
@media (max-width: 768px) {
/* === 全局间距收紧 === */
body { font-size: 14px; }
.card { margin-bottom: 14px !important; }
.card-body { padding: 14px !important; }
.card-header { padding: 14px 14px 0 !important; }
.card-label.fw-bold,
.card-label.fs-2 { font-size: 16px !important; line-height: 1.5; }
.container-xxl, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
.app-container { padding: 0 6px !important; }
/* === 顶部用户名片 (uhc) 紧凑 === */
.user-hero-card { padding: 16px 14px !important; margin: 0 4px 14px !important; }
.uhc-body { gap: 12px !important; }
.uhc-avatar { width: 64px !important; height: 64px !important; }
.uhc-name { font-size: 20px !important; }
.uhc-tag { font-size: 10px !important; letter-spacing: 0.2em !important; }
.uhc-meta { font-size: 11px !important; flex-wrap: wrap; gap: 4px; }
.uhc-pillars { gap: 6px !important; margin-top: 10px; }
.uhc-pillar { padding: 6px 8px !important; flex: 1; min-width: 60px; }
.uhc-pillar-label { font-size: 10px !important; }
.uhc-pillar-gz { font-size: 15px !important; }
.uhc-actions { gap: 6px !important; flex-wrap: wrap !important; }
.uhc-btn { padding: 8px 12px !important; min-width: 0; flex: 1 1 calc(50% - 6px); }
.uhc-btn i { font-size: 14px !important; }
.uhc-btn span { font-size: 11px !important; }
/* === Hero 封面 (ahc) 紧凑 === */
.action-hero-cover { min-height: 220px !important; padding: 30px 16px !important; }
.ahc-eyebrow { font-size: 9px !important; letter-spacing: 0.25em !important; }
.ahc-title { font-size: 22px !important; }
.ahc-t-1, .ahc-t-2 { font-size: 22px !important; }
.ahc-t-divider { font-size: 14px !important; margin: 0 6px; }
.ahc-subtitle { font-size: 10px !important; gap: 6px !important; flex-wrap: wrap; }
.ahc-stat-n { font-size: 22px !important; }
.ahc-stat-l { font-size: 9px !important; }
.ahc-meta { font-size: 11px !important; flex-wrap: wrap; gap: 6px; }
/* === 命盘四柱图 (map_personal_view) 紧凑 === */
.bz-row, [class*="bp-stem"] { flex-wrap: wrap !important; }
table.bz-table { font-size: 12px !important; }
table.bz-table th, table.bz-table td { padding: 4px 6px !important; }
.bp-stem .char, .bp-branch .char { font-size: 22px !important; }
.bp-stem .label, .bp-branch .label { font-size: 10px !important; padding: 1px 6px !important; }
.bp-pos-tag { font-size: 9px !important; }
/* 顶部 大运/流年 徽章 */
[class*="liunian"], [class*="dayun"] {
font-size: 11px !important;
}
/* 八字底部柱组 — 强制 2 列 stack */
.row.g-3 > [class*="col-"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
/* === 五宫格 (5 palaces) — 强制 3 列 === */
.palace-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
}
.palace-cell {
padding: 8px 4px !important;
font-size: 11px !important;
min-height: 120px !important;
}
.palace-cell .palace-elem-big {
font-size: 28px !important;
}
.palace-cell .palace-name {
font-size: 11px !important;
}
.palace-cell .palace-count {
font-size: 18px !important;
}
.palace-chip {
font-size: 9px !important;
padding: 1px 4px !important;
}
/* 流年 / 大运 浮于宫位上的徽章 */
.palace-floating-badge {
font-size: 9px !important;
padding: 2px 4px !important;
max-width: 36px;
}
/* === 一页式总览 命片 === */
.onepage-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.op-cell { padding: 12px 14px 12px 50px !important; min-height: 64px !important; }
.op-icon { left: 14px !important; width: 26px !important; height: 26px !important; font-size: 13px !important; }
.op-l { font-size: 9px !important; letter-spacing: 0.18em !important; }
.op-v { font-size: 13px !important; }
.onepage-card::before, .onepage-card::after { width: 40px !important; height: 40px !important; }
.op-subtitle { font-size: 11px !important; padding-bottom: 12px !important; margin-bottom: 14px !important; }
.op-footer { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; font-size: 9px !important; }
/* === 共鸣页 === */
.rz-row { padding: 10px 14px !important; gap: 10px !important; }
.rz-n { min-width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 11px !important; }
.rz-text { font-size: 13px !important; }
.resonance-cta { font-size: 13px !important; padding: 14px 16px !important; }
/* === 信任层 === */
.trust-row { grid-template-columns: 36px 1fr !important; gap: 8px !important; padding: 10px 12px !important; }
.trust-detail { grid-column: 1 / -1 !important; padding-top: 4px !important; font-size: 11px !important; }
.trust-n { font-size: 10px !important; padding: 4px 6px !important; }
.trust-name { font-size: 12px !important; }
/* === 12 系统卡 banner === */
.sys-banner { height: 110px !important; }
.sb-num-mark { font-size: 36px !important; right: 12px !important; top: 12px !important; }
.sb-meta { padding: 16px 14px 16px 78px !important; min-height: 110px !important; }
.sb-icon-circle { left: 14px !important; width: 48px !important; height: 48px !important; }
.sb-icon-circle i { font-size: 18px !important; }
.sb-eyebrow { font-size: 9px !important; letter-spacing: 0.25em !important; }
.sb-title { font-size: 15px !important; }
.sb-corner { width: 16px !important; height: 16px !important; }
/* 系统 core text */
.sys-core { font-size: 13px !important; padding: 12px 14px !important; }
.sys-subs { gap: 8px !important; }
.sys-sub { padding: 10px 14px !important; gap: 8px !important; }
.sys-sub .ss-icon { width: 32px !important; height: 32px !important; }
.ss-h { font-size: 13px !important; }
.ss-b { font-size: 12px !important; line-height: 1.65 !important; }
.sys-actions, .sys-risk, .sys-fc { font-size: 11px !important; padding: 10px 12px !important; }
.sys-compound-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 10px !important; }
.sys-compound-cell { padding: 10px 12px !important; }
.scc-name { font-size: 12px !important; padding-right: 20px !important; }
.scc-desc { font-size: 10px !important; }
/* 系统通用 deep extras */
.ext-table { font-size: 11px !important; }
.ext-table th, .ext-table td { padding: 6px 6px !important; }
.ext-numbered, .ext-list { font-size: 12px !important; padding-left: 18px !important; }
.ext-pair-grid, .ext-five-grid, .ext-tri { grid-template-columns: 1fr !important; gap: 8px !important; }
.sys-block-h { font-size: 13px !important; margin: 16px 0 10px !important; }
/* === 评分表 === */
.score-table th, .score-table td { padding: 5px 4px !important; font-size: 10px !important; }
.score-bar-wrap { height: 18px !important; }
.score-num { font-size: 10px !important; }
.pri-tag { font-size: 8px !important; padding: 2px 6px !important; }
/* === 大运 9 柱 timeline === */
.dayun-timeline { gap: 4px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 8px !important; padding-top: 24px !important; }
.dayun-card { min-width: 60px !important; padding: 6px 4px !important; font-size: 10px !important; }
.dayun-card.is-current { transform: translateY(-4px) scale(1.06) !important; }
.dayun-card.is-current .dc-age { font-size: 14px !important; padding: 6px 0 !important; }
.dayun-card.is-current .dc-stem,
.dayun-card.is-current .dc-branch { font-size: 22px !important; }
.dayun-card .dc-current-badge { font-size: 10px !important; padding: 3px 8px !important; top: -16px !important; letter-spacing: 2px !important; }
.dyg-track { gap: 2px !important; padding: 4px !important; }
.dyg-bar { height: 72px !important; }
.dyg-gz { font-size: 14px !important; }
.dyg-age, .dyg-year { font-size: 8px !important; }
.dyg-tag, .dyg-tag-past, .dyg-tag-fut { font-size: 8px !important; padding: 2px 4px !important; }
/* === Annual hero === */
.annual-hero { padding: 16px !important; }
.ah-year { font-size: 32px !important; }
.ah-gz { font-size: 18px !important; }
.ah-theme { font-size: 13px !important; }
.annual-cols { grid-template-columns: 1fr !important; }
/* === 21 天 / 49 天 / 90 天 === */
.plan21-grid { grid-template-columns: 1fr !important; }
.p21-track { display: none !important; } /* 时间轴在手机隐藏 */
.ps-icon-circle { display: none !important; }
.plan21-stage { padding-top: 14px !important; }
.plan49-grid { grid-template-columns: 1fr !important; }
.fc-49-grid { grid-template-columns: 1fr 1fr !important; }
.fc-plan-grid { grid-template-columns: 1fr !important; }
.p90-month { padding: 12px 14px !important; }
.p90-m-h { font-size: 13px !important; }
/* === 花晶系统 === */
.fc-frs-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.fc-frs-cell { padding: 10px 6px !important; }
.fc-frs-en { font-size: 9px !important; }
.fc-frs-cn { font-size: 14px !important; }
.fc-frs-desc { font-size: 9px !important; }
.fc-name { font-size: 16px !important; }
.fc-meta-row { grid-template-columns: 1fr !important; gap: 6px !important; }
.fc-aux-grid { grid-template-columns: 1fr !important; }
.fc-price-table { font-size: 10px !important; }
.fc-price-table th, .fc-price-table td { padding: 5px 4px !important; }
/* === 流月 12 月 === */
.liuyue-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
.ly-cell { padding: 6px 3px !important; }
.ly-month { font-size: 10px !important; }
.ly-gz { font-size: 11px !important; }
.ly-e { font-size: 8px !important; }
/* === 飞星 3x3 === */
.fs-3x3 { gap: 4px !important; padding: 12px !important; }
.fs3-cell { padding: 6px 4px !important; min-height: 80px !important; }
.fs3-num { font-size: 22px !important; }
.fs3-pos, .fs3-name, .fs3-y, .fs3-tip { font-size: 8px !important; }
.fs3-bg-symbol { font-size: 12px !important; }
.fs3-bg-name { font-size: 8px !important; }
/* === 9 飞星 / 八宅相关 === */
.zm-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
.zm-cell { padding: 14px 16px !important; }
.zm-env-row { grid-template-columns: 1fr !important; gap: 6px !important; }
/* === 反复 5 问题 === */
.rp-cell { padding: 14px 16px 12px 60px !important; }
.rp-num { width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 13px !important; left: 14px !important; top: 14px !important; }
.rp-name { font-size: 14px !important; }
.rp-row { font-size: 11px !important; gap: 6px !important; }
.rp-l { width: 60px !important; font-size: 10px !important; }
/* === 五行画像 === */
.fp-cell { padding: 14px 14px 14px 18px !important; }
.fp-title-row { gap: 6px !important; flex-wrap: wrap; }
.fp-name { font-size: 18px !important; }
.fp-theme { font-size: 11px !important; }
.fp-state { font-size: 9px !important; padding: 3px 7px !important; }
.fp-val { font-size: 10px !important; width: 100%; margin-left: 0 !important; }
/* === 十神行为模式 === */
.tgb-grid { grid-template-columns: 1fr !important; }
.tgb-cell { padding: 12px 14px !important; }
/* === 5 五行情绪 / EGS 8 层 === */
.five-emo-grid, .egs-detail-grid { grid-template-columns: 1fr !important; }
.five-emo-cell, .egs-detail-cell { padding: 12px 14px !important; }
.fe-w { font-size: 18px !important; }
/* === 内在小孩 === */
.ic-types-grid { grid-template-columns: 1fr !important; }
/* === 六大深度专章 === */
.deep-card { font-size: 13px; }
.deep-opening { font-size: 13px !important; padding: 14px 16px !important; }
.deep-row { flex-direction: column !important; gap: 4px !important; padding: 10px 12px !important; }
.deep-l { width: 100% !important; }
/* === AI 陪跑 / 服务路径 / 见证 === */
.af-grid { grid-template-columns: 1fr !important; }
.ns-grid { grid-template-columns: 1fr !important; }
.ns-cell { padding: 12px 14px 12px 50px !important; }
.tm-grid { grid-template-columns: 1fr !important; }
/* === 顾问话术 === */
.cs-step { padding: 10px 12px !important; gap: 10px !important; }
.cs-step-num { width: 28px !important; height: 28px !important; line-height: 28px !important; font-size: 12px !important; }
.cs-step-title { font-size: 12px !important; }
.cs-step-script { font-size: 12px !important; padding: 6px 10px !important; }
.cs-demo-pitch { font-size: 13px !important; padding: 14px 16px !important; }
/* === 最终印章 === */
.final-seal-row { flex-direction: column !important; gap: 12px !important; padding: 16px !important; align-items: center !important; }
.final-seal { width: 90px !important; height: 90px !important; font-size: 12px !important; }
.final-seal-meta { text-align: center !important; font-size: 11px !important; }
/* === Hide 浮窗 in print === */
.floating-gold-sand .fgs-dot { display: none; }
#mp-toc { width: calc(100% - 16px) !important; right: 8px !important; left: 8px !important; max-width: none !important; top: 60px !important; }
#mp-toc-fab, #mp-theme-toggle { width: 40px !important; height: 40px !important; right: 8px !important; }
#mp-toc-fab { bottom: 56px !important; }
/* === 底部按钮组 — flex wrap === */
.d-flex.justify-content-end .btn { font-size: 11px !important; padding: 6px 10px !important; flex: 1 1 calc(50% - 4px); }
/* 表格统一允许水平滚动 */
table:not(.bz-table):not(.score-table) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
}
/* === 超小屏 (<= 480px) 极致压缩 === */
@media (max-width: 480px) {
.ahc-title { font-size: 18px !important; letter-spacing: 0.04em !important; }
.uhc-name { font-size: 18px !important; }
.card-label.fw-bold, .card-label.fs-2 { font-size: 14px !important; }
.palace-grid { gap: 4px !important; }
.palace-cell { padding: 6px 3px !important; min-height: 100px !important; }
.palace-cell .palace-elem-big { font-size: 22px !important; }
.uhc-btn { flex: 1 1 100% !important; }
.d-flex.justify-content-end .btn { flex: 1 1 100%; }
.fc-49-grid { grid-template-columns: 1fr !important; }
.liuyue-grid { grid-template-columns: 1fr 1fr !important; }
/* 四柱表格更紧 */
.bp-stem .char, .bp-branch .char { font-size: 18px !important; }
/* TOC 强制隐藏(屏幕太小)*/
#mp-toc { display: none !important; }
}
/* === 触摸优化 — 所有按钮最小 44px 触摸区域 === */
@media (hover: none) and (pointer: coarse) {
.btn, .uhc-btn, button, a.btn,
.palace-cell, .ic-type-cell, .op-cell, .rz-row {
min-height: 44px;
}
.btn:hover, .uhc-btn:hover { transform: none !important; }
}