/* 案例页（/sample-report.html、/sample-report-en.html）独立访问时的样式。
*
* 这两个文件是 fetch 进 SPA 的正文片段，正常情况下样式来自 index.html。
* 但它们的 URL 是公开可访问的，被直接打开时既没有 charset 也没有样式，
* 会渲染成乱码 + 全无格式。所以外面套一层完整 HTML 并引这个文件。
*
* 下面这一段是从 index.html 抄来的同一批规则（报告头部、四柱、五行条、
* 关键结论、正文段落）。改 index.html 里对应规则时这里要同步，否则
* 「直接访问」和「站内弹层」会长得不一样。
*/
:root {
--gold: #E2C07B;
--gold-dim: rgba(226, 192, 123, 0.12);
--text: #EBE5D9;
--text-dim: rgba(235, 229, 217, 0.48);
--jade: #5A9E8F;
--fire: #C4554D;
--bg-deep: #06030f;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-deep);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
line-height: 1.95;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 72px; }
.top {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-bottom: 14px; margin-bottom: 36px;
border-bottom: 0.5px solid rgba(201, 169, 110, 0.18);
font-size: 13px; color: var(--text-dim);
}
.top a { color: var(--gold); text-decoration: none; }
.top a:hover { text-decoration: underline; }
/* ── 正文（与 index.html 的 .sample-report-content 一致）── */
.sample-report-content { text-align: left; max-width: 720px; margin: 0 auto; }
.sample-report-content p { margin: 0 0 1.1em; line-height: 1.95; color: rgba(232, 224, 213, 0.88); font-size: 16px; letter-spacing: 0.5px; }
.sample-report-content p strong { color: var(--gold); font-weight: 600; }
.sample-report-content h3.sample-section-title { font-size: 16px; color: var(--gold); margin: 2em 0 0.8em; letter-spacing: 2px; font-weight: 600; }
.sample-divider { border: none; border-top: 0.5px solid rgba(201, 169, 110, 0.15); margin: 2em 0; }
/* ── 报告头部 ── */
.report-header { text-align: center; margin-bottom: 48px; padding-bottom: 40px; border-bottom: 0.5px solid rgba(201, 169, 110, 0.1); }
.report-header .report-name { font-size: 28px; color: var(--text); letter-spacing: 4px; margin-bottom: 8px; }
.report-header .report-meta { font-size: 12px; color: var(--text-dim); letter-spacing: 2px; }
.report-header .report-tier { display: inline-block; margin-top: 16px; font-size: 10px; letter-spacing: 3px; color: var(--gold); padding: 4px 16px; border: 0.5px solid var(--gold-dim); }
/* ── 四柱 ── */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pillar { text-align: center; padding: 24px 12px 16px; background: rgba(201, 169, 110, 0.04); border: 0.5px solid rgba(201, 169, 110, 0.12); }
.pillar.day-pillar { border-color: var(--gold); background: rgba(201, 169, 110, 0.08); }
.pillar .label { font-size: 10px; letter-spacing: 3px; color: var(--text-dim); margin-bottom: 10px; }
.pillar .stem { font-size: 32px; color: var(--gold); letter-spacing: 2px; font-weight: 600; }
.pillar .branch { font-size: 15px; color: var(--text-dim); margin-top: 4px; letter-spacing: 2px; }
.pillar .god-badge { font-size: 10px; color: var(--gold); letter-spacing: 1px; margin-top: 8px; opacity: 0.7; }
.pillar .element-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.element-wood { background: var(--jade); }
.element-fire { background: var(--fire); }
.element-earth { background: var(--gold); }
.element-metal { background: #D4C9A3; }
.element-water { background: #6B8DBF; }
/* ── 五行条 ── */
.wuxing-bars { display: flex; gap: 8px; align-items: flex-end; justify-content: center; height: 80px; margin: 24px 0 8px; }
.wx-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 60px; }
.wx-bar { width: 100%; border-radius: 2px 2px 0 0; min-height: 4px; max-height: 64px; }
.wx-bar.wood { background: var(--jade); }
.wx-bar.fire { background: var(--fire); }
.wx-bar.earth { background: var(--gold); }
.wx-bar.metal { background: #D4C9A3; }
.wx-bar.water { background: #6B8DBF; }
.wx-label { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
/* ── 关键结论 ── */
.key-findings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 40px; }
.key-finding { text-align: center; padding: 14px 8px; background: rgba(201, 169, 110, 0.03); border: 0.5px solid rgba(201, 169, 110, 0.08); }
.key-finding .kf-label { font-size: 9px; letter-spacing: 3px; color: var(--text-dim); margin-bottom: 6px; }
.key-finding .kf-value { font-size: 14px; color: var(--gold); letter-spacing: 2px; }
/* ── 页脚 ── */
.foot {
margin-top: 56px; padding-top: 22px;
border-top: 0.5px solid rgba(201, 169, 110, 0.18);
font-size: 14px; color: var(--text-dim); text-align: center;
}
.foot a { color: var(--gold); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
/* ── 手机端：正文与 index.html 的手机端规则保持一致（16px 正文下限）── */
@media (max-width: 768px) {
.wrap { padding: 20px 16px 56px; }
.sample-report-content p { font-size: 16px; }
.sample-report-content h3.sample-section-title { font-size: 16px; }
.pillars { grid-template-columns: 1fr 1fr; }
.key-findings { grid-template-columns: repeat(2, 1fr); }
.report-header .report-name { font-size: 22px; letter-spacing: 2px; }
}
/* ===== SAMPLE CASE V2 START ===== */
.sample-chart{
--ink:#F2EFE8;
--ink-mid:rgba(242,239,232,.62);
--ink-faint:rgba(242,239,232,.46);
--line:rgba(255,255,255,.10);
--surface:#131118;
--cinnabar:#E2C07B;
--cinnabar-deep:#F5DFA3;
--cinnabar-soft:rgba(226,192,123,.12);
--wx-wood:#5A9E8F;
--wx-fire:#C4554D;
--wx-earth:#C9A96E;
--wx-metal:#B9B4A8;
--wx-water:#6B8DBF;
--font-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",Georgia,serif;
--s-1:4px; --s-2:8px; --s-3:12px; --s-5:20px;
--t-xs:12px; --t-sm:14px; --t-md:16px; --t-xl:26px;
--r-1:8px;
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring-soft:cubic-bezier(.34,1.56,.64,1);
--dur-view:.6s;
margin:22px 0 6px;
padding:16px;
background:rgba(255,255,255,.02);
border:0.5px solid rgba(201,169,110,.18);
border-radius:12px;
}
.sample-chart .wx-bar > i { transition: transform .75s var(--ease-spring-soft); }
.sample-chart .wx-row:nth-child(1) .wx-bar > i { transition-delay: 0.02s; }
.sample-chart .wx-row:nth-child(2) .wx-bar > i { transition-delay: 0.09s; }
.sample-chart .wx-row:nth-child(3) .wx-bar > i { transition-delay: 0.16s; }
.sample-chart .wx-row:nth-child(4) .wx-bar > i { transition-delay: 0.23s; }
.sample-chart .wx-row:nth-child(5) .wx-bar > i { transition-delay: 0.3s; }
.sample-chart .wx-row { display: grid; grid-template-columns: 1.4em 1fr 2em; gap: var(--s-3); align-items: center; padding: var(--s-1) 0; font-size: var(--t-sm); }
.sample-chart .wx-name { font-family: var(--font-serif); }
.sample-chart .wx-bar { height: 5px; background: var(--line); border-radius: var(--r-1); overflow: hidden; }
.sample-chart .wx-bar > i { display: block; height: 100%; border-radius: var(--r-1); transform-origin: left center; transition: transform var(--dur-view) var(--ease-out); }
.sample-chart .wx-num { text-align: right; font-size: var(--t-xs); color: var(--ink-mid); }
.sample-chart .csec { margin-bottom: var(--s-5); }
.sample-chart .csec:last-child { margin-bottom: 0px; }
.sample-chart .csec-t { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.sample-chart .ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sample-chart .ptable col.c-label { width: 3.2em; }
.sample-chart .ptable th, .sample-chart .ptable td { text-align: center; padding: var(--s-2) 2px; font-size: var(--t-sm); vertical-align: middle; }
.sample-chart .ptable thead th { font-size: var(--t-xs); font-weight: 400; color: var(--ink-faint); padding-bottom: var(--s-1); }
.sample-chart .ptable tbody th { text-align: left; font-weight: 400; font-size: var(--t-xs); color: var(--ink-faint); padding-right: var(--s-2); }
.sample-chart .ptable td { word-break: break-word; line-height: 1.5; }
.sample-chart .ptable .wxel { font-size: var(--t-xs); color: var(--ink-mid); }
.sample-chart .ptable tbody tr + tr td, .sample-chart .ptable tbody tr + tr th { border-top: 1px solid var(--line); }
.sample-chart .ptable .pglyph td { padding: var(--s-2) 2px; }
.sample-chart .ptable .pglyph .g { display: block; font-family: var(--font-serif); font-size: var(--t-xl); line-height: 1.3; }
.sample-chart .wxdot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.sample-chart .wxlist { padding-top: var(--s-1); }
.sample-chart .wx-row { display: grid; grid-template-columns: 1.6em 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-1) 0; font-size: var(--t-sm); }
.sample-chart .wx-num { font-size: var(--t-xs); color: var(--ink-mid); text-align: right; white-space: nowrap; }
.sample-chart .dl { margin: 0px; }
.sample-chart .dl-row { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.sample-chart .dl-row:last-child { border-bottom: 0px; }
.sample-chart .dl-row dt { flex: 0 0 4.6em; color: var(--ink-faint); font-size: var(--t-xs); }
.sample-chart .dl-row dd { margin: 0px; flex: 1 1 0%; min-width: 0px; word-break: break-word; }
.sample-chart .luck-head { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: var(--s-3); }
.sample-chart .luck-head b { color: var(--ink); font-weight: 600; }
.sample-chart .luck-scroll { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; scroll-snap-type: x; mask-image: linear-gradient(to right, rgb(0, 0, 0) 0px, rgb(0, 0, 0) calc(100% - 24px), transparent 100%); }
.sample-chart .luck-scroll::-webkit-scrollbar { display: none; }
.sample-chart .luck-cell { flex: 0 0 auto; scroll-snap-align: start; min-width: 68px; padding: var(--s-2) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); text-align: center; }
.sample-chart .luck-cell.on { border-color: var(--cinnabar); background: var(--cinnabar-soft); box-shadow: rgba(142, 36, 28, 0.14) 0px 3px 10px; }
.sample-chart .luck-cell .lgz { font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.3; }
.sample-chart .luck-cell.on .lgz { color: var(--cinnabar-deep); }
.sample-chart .luck-cell .lage { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 2px; }
.sample-chart .luck-cell .lgod { font-size: var(--t-xs); color: var(--ink-mid); margin-top: 1px; }
.sample-chart .luck-hint { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--ink-faint); }
.sample-chart .ln-list { display: grid; gap: var(--s-2); }
.sample-chart .ln-row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); font-size: var(--t-sm); }
.sample-chart .ln-y { color: var(--ink-faint); font-size: var(--t-xs); }
.sample-chart .ln-gz { font-family: var(--font-serif); font-size: var(--t-md); }
.sample-chart .ln-god { margin-left: auto; font-size: var(--t-xs); color: var(--ink-mid); }
.case-lead{
text-align:left;font-size:13px;line-height:1.9;color:var(--text-dim);
letter-spacing:1px;margin:0 0 6px;
}
.case-chat-head{
text-align:center;margin:8px 0 26px;padding-top:12px;
border-top:0.5px solid rgba(201,169,110,.15);
}
.case-chat-kicker{font-size:11px;letter-spacing:3px;color:var(--gold);opacity:.75;margin-bottom:10px;}
.case-chat-title{font-size:20px;color:var(--text);letter-spacing:2px;font-weight:500;margin:0 0 10px;line-height:1.6;}
.case-chat-sub{font-size:13px;color:var(--text-dim);line-height:1.9;margin:0;}
.chat-mode{
display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;
font-size:10px;letter-spacing:1px;color:var(--gold);
border:0.5px solid rgba(201,169,110,.3);background:rgba(201,169,110,.08);
vertical-align:middle;
}
.chat-demo{max-width:680px;margin:0 auto;text-align:left;}
.chat-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;}
.chat-row.me{flex-direction:row-reverse;}
.chat-ava{
flex:0 0 34px;width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:600;
background:rgba(255,255,255,.06);color:var(--text-dim);
border:0.5px solid rgba(201,169,110,.2);
}
.chat-row:not(.me) .chat-ava{background:var(--gold);color:#16102c;border-color:transparent;}
.chat-body{max-width:82%;}
.chat-row.me .chat-body{text-align:right;}
.chat-who{font-size:10px;letter-spacing:2px;color:var(--text-dim);opacity:.7;margin-bottom:5px;}
.chat-bubble{
display:inline-block;text-align:left;
padding:12px 14px;border-radius:12px;
font-size:15px;line-height:1.9;letter-spacing:.3px;
background:rgba(255,255,255,.04);
border:0.5px solid rgba(201,169,110,.14);
color:rgba(235,229,217,.92);
}
.chat-row.me .chat-bubble{
background:rgba(201,169,110,.12);
border-color:rgba(201,169,110,.28);
color:var(--text);
}
.chat-demo-note{
text-align:center;font-size:11px;color:var(--text-dim);opacity:.7;
line-height:1.9;margin:26px 0 0;
}
@media (max-width:768px){
.sample-chart{padding:12px;}
.case-chat-title{font-size:18px;}
.chat-body{max-width:86%;}
.chat-bubble{font-size:14.5px;padding:11px 12px;}
}
/* ===== SAMPLE CASE V2 END ===== */
/* 独立访问时的两段跳转 */
.sample-jump{display:flex;justify-content:center;align-items:center;gap:12px;margin:-6px 0 26px;font-size:12px;letter-spacing:2px;}
.sample-jump a{color:var(--gold);text-decoration:none;border-bottom:0.5px solid rgba(201,169,110,.3);padding-bottom:3px;}
.sample-jump span{color:var(--text-dim);opacity:.5;}