/* ============================================================
   八象气数 · 完整样式表 v1.0
   ============================================================ */

/* ========== 主题变量 ========== */
:root, [data-theme="dark"] {
  --bg:#0E0E0E;--surface:#181818;--surface-2:#222;--surface-3:#2A2A2A;
  --border:#333;--text:#fff;--text-2:#B0B0B0;--text-3:#707070;
  --shadow:#000;--grid-line:rgba(255,255,255,0.06);
  --wx-mu:#52B788;--wx-huo:#D62828;--wx-tu:#E9B44C;
  --wx-jin:#C9A96E;--wx-shui:#4A7BA7;
  --red:#FF3B30;--yellow:#FFCC00;--blue:#0A84FF;--green:#34C759;--orange:#FF9500;--purple:#BF5AF2;
  --zang:#2D6A4F;--sheng:#52B788;--yang:#E9B44C;--cheng:#C9A96E;
  --po:#8B8B8B;--bian:#D62828;--hao:#8B6F47;--liu:#4A7BA7;
  --node-zero:#8E8E93;--node-five:#E9B44C;
}
[data-theme="light"] {
  --bg:#F2EFE8;--surface:#fff;--surface-2:#E8E4DC;--surface-3:#DDD8CE;
  --border:#1A1A1A;--text:#0E0E0E;--text-2:#4A4A4A;--text-3:#888;
  --shadow:#1A1A1A;--grid-line:rgba(0,0,0,0.08);
  --wx-mu:#1A8C3A;--wx-huo:#C81E1E;--wx-tu:#D19B00;
  --wx-jin:#A88B4A;--wx-shui:#1A5A8A;
  --red:#E00000;--yellow:#E6B800;--blue:#0055CC;--green:#1A8C3A;--orange:#E07000;--purple:#8B3FD9;
  --zang:#0E5C25;--sheng:#1A8C3A;--yang:#D19B00;--cheng:#A88B4A;
  --po:#5A5A5A;--bian:#C81E1E;--hao:#6B4F2A;--liu:#1A5A8A;
  --node-zero:#666;--node-five:#D19B00;
}

/* ========== 重置 ========== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Helvetica Neue','Arial','Noto Sans SC','PingFang SC',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;transition:background .4s,color .4s;font-weight:500;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;z-index:0}
h1,h2,h3,h4,h5{font-weight:900;letter-spacing:-.02em;line-height:1.1}

/* ========== 导航 ========== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);border-bottom:3px solid var(--border)}
nav .inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 2rem}
nav .logo{display:flex;align-items:center;gap:.8rem;font-size:1.1rem;font-weight:900;letter-spacing:.15em}
nav .logo .mark{width:28px;height:28px;background:var(--red);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;font-weight:900}
nav .logo span{color:var(--text-3);font-size:.65rem;letter-spacing:.2em;font-weight:700}
nav ul{display:flex;gap:.3rem;list-style:none}
nav a{color:var(--text);text-decoration:none;font-size:.78rem;letter-spacing:.1em;font-weight:800;padding:.5rem .9rem;border:2px solid transparent;transition:all .2s;text-transform:uppercase}
nav a:hover,nav a.active{background:var(--text);color:var(--bg)}
.theme-toggle{background:transparent;border:3px solid var(--border);width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text);transition:all .2s;margin-left:1rem;position:relative;overflow:hidden;flex-shrink:0}
.theme-toggle:hover{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:all .4s}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme="light"] .theme-toggle .icon-sun{opacity:0;transform:rotate(90deg) scale(.5)}
[data-theme="light"] .theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}

/* ========== Hero ========== */
#hero{position:relative;z-index:1;padding:8rem 2rem 3rem;text-align:center;overflow:hidden}
#hero .badge{display:inline-block;background:var(--red);color:#fff;font-size:.65rem;font-weight:900;letter-spacing:.3em;padding:.35rem .9rem;border:3px solid var(--border);margin-bottom:1.2rem;text-transform:uppercase}
#hero h1{font-size:clamp(2.5rem,8vw,5.5rem);letter-spacing:-.04em;font-weight:900;line-height:.9;margin-bottom:1rem}
#hero h1 .accent{display:inline-block;background:var(--yellow);color:#0E0E0E;padding:0 .1em;border:3px solid var(--border);transform:rotate(-2deg);margin:0 .05em}
#hero h1 .accent.blue{background:var(--blue);color:#fff;transform:rotate(1deg)}
#hero .sub{font-size:clamp(.8rem,1.4vw,1rem);color:var(--text-2);font-weight:700;letter-spacing:.4em;text-transform:uppercase}

/* ========== Section ========== */
section{position:relative;z-index:1;padding:5rem 2rem}
.container{max-width:1400px;margin:0 auto}
.section-head{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:3px solid var(--border)}
.section-head .num{font-size:clamp(2.5rem,6vw,4rem);font-weight:900;line-height:.9;letter-spacing:-.04em;font-family:'SF Mono',monospace}
.section-head .title-wrap h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.05em;margin-bottom:.3rem;text-transform:uppercase}
.section-head .title-wrap p{font-size:.8rem;color:var(--text-2);letter-spacing:.2em;font-weight:700;text-transform:uppercase}

/* ========== 测算输入区 ========== */
.calc-box{max-width:900px;margin:0 auto}
.calc-input-wrap{position:relative;margin-bottom:1rem}
.calc-input-wrap input{width:100%;padding:1.6rem 1.5rem;background:var(--surface);border:4px solid var(--border);color:var(--text);font-size:1.6rem;letter-spacing:.3em;font-family:'SF Mono',monospace;outline:none;transition:all .2s;text-align:center;font-weight:900}
.calc-input-wrap input:focus{background:var(--yellow);color:#0E0E0E;box-shadow:8px 8px 0 var(--shadow);transform:translate(-4px,-4px)}
.calc-input-wrap input::placeholder{color:var(--text-3);font-size:.9rem;font-family:inherit;font-weight:700}
.calc-length{text-align:center;color:var(--text-3);font-size:.72rem;margin-bottom:1rem;letter-spacing:.2em;font-weight:900;font-family:'SF Mono',monospace}
.calc-btn{display:block;width:100%;padding:1.4rem;background:var(--red);color:#fff;border:4px solid var(--border);font-size:1.1rem;letter-spacing:.5em;font-weight:900;cursor:pointer;transition:all .2s;font-family:inherit;text-transform:uppercase}
.calc-btn:hover{background:var(--yellow);color:#0E0E0E;transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--shadow)}
.calc-hint{text-align:center;color:var(--text-3);font-size:.75rem;margin-top:1rem;letter-spacing:.1em;font-weight:700;line-height:1.8}

/* ============================================================
   结果区 · 8 层结构
   ============================================================ */
#result{display:none;margin-top:3rem}
#result.show{display:block;animation:fadeUp .5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 第 0 层：输入回显 ---------- */
.echo-bar{
  display:grid;grid-template-columns:1fr auto auto auto;gap:1rem;align-items:center;
  padding:1rem 1.2rem;background:var(--surface);border:3px solid var(--border);
  margin-bottom:1.5rem;flex-wrap:wrap;
}
.echo-input{font-family:'SF Mono',monospace;font-size:1rem;font-weight:900;color:var(--text);letter-spacing:.05em;word-break:break-all}
.echo-stat{font-size:.72rem;color:var(--text-3);letter-spacing:.1em;font-weight:800;padding:.3rem .7rem;background:var(--surface-2);border:2px solid var(--border)}
@media(max-width:700px){
  .echo-bar{grid-template-columns:1fr;gap:.5rem}
}

/* ---------- 第 1 层：核心概览 ---------- */
.overview-block{
  background:var(--surface);border:3px solid var(--border);
  padding:1.8rem;margin-bottom:1.2rem;
}
.overview-verdict{text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:2px solid var(--border)}
.overview-verdict .ov-text{font-size:clamp(2rem,5vw,3rem);letter-spacing:.1em;font-weight:900;margin-bottom:.4rem}
.overview-verdict .ov-desc{color:var(--text-2);font-size:.85rem;letter-spacing:.15em;font-weight:700}
.overview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:600px){.overview-stats{grid-template-columns:1fr}}
.ov-stat{padding:1rem;background:var(--surface-2);border:2px solid var(--border);text-align:center}
.ov-stat-label{font-size:.65rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase;margin-bottom:.4rem}
.ov-stat-value{font-size:1.1rem;font-weight:900;letter-spacing:.05em}
.overview-sentence{padding:1.2rem 1.4rem;background:var(--surface-2);border-left:8px solid var(--yellow);border-top:2px solid var(--border);border-right:2px solid var(--border);border-bottom:2px solid var(--border)}
.overview-sentence .os-label{font-size:.65rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.overview-sentence .os-text{font-size:1.05rem;font-weight:900;line-height:1.7;letter-spacing:.05em}

/* ---------- 通用层标题 ---------- */
.layer-title{
  font-size:.75rem;color:var(--bg);background:var(--text);font-weight:900;
  letter-spacing:.25em;margin:2rem 0 1rem;padding:.6rem 1rem;
  text-align:center;text-transform:uppercase;border:3px solid var(--border);
}

/* ---------- 第 2 层：切段卡片 ---------- */
.segments-row{
  display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.5rem;
  scroll-snap-type:x mandatory;
}
.segments-row::-webkit-scrollbar{height:6px}
.segments-row::-webkit-scrollbar-track{background:var(--surface-2)}
.segments-row::-webkit-scrollbar-thumb{background:var(--border)}
.seg-chip{
  flex:0 0 auto;min-width:140px;scroll-snap-align:start;
  background:var(--surface);border:3px solid var(--border);
  border-top:8px solid var(--cc,var(--text));padding:.8rem .9rem;
  transition:all .2s;
}
.seg-chip:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
.seg-idx{font-size:.55rem;font-weight:900;color:var(--text-3);letter-spacing:.1em;margin-bottom:.4rem;font-family:'SF Mono',monospace}
.seg-pair{font-family:'SF Mono',monospace;font-size:1.6rem;font-weight:900;line-height:1;color:var(--cc,var(--text));margin-bottom:.3rem}
.seg-qi{font-size:.7rem;font-weight:900;color:var(--text);margin-bottom:.2rem}
.seg-gua{font-size:.65rem;color:var(--text-2);font-weight:700;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:900;margin-bottom:.4rem}
.seg-wx{font-family:'SF Mono',monospace;color:var(--text-2)}
.seg-dir.in{color:var(--green)}
.seg-dir.out{color:var(--orange)}
.seg-stars{font-size:.65rem;color:var(--yellow);letter-spacing:.02em;font-family:'SF Mono',monospace}

/* ---------- 第 3 层：气机流动图 ---------- */
.relations-flow{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1rem;background:var(--surface);border:3px solid var(--border);
}
.rel-item{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;padding:.5rem .8rem;background:var(--surface-2);border:2px solid var(--border)}
@media(max-width:600px){.rel-item{grid-template-columns:1fr;gap:.4rem;text-align:center}}
.rel-node{text-align:center}
.rn-pair{font-family:'SF Mono',monospace;font-size:1.2rem;font-weight:900;line-height:1;margin-bottom:.2rem}
.rn-wx{font-size:.65rem;color:var(--text-3);font-weight:800;letter-spacing:.05em}
.rel-arrow{text-align:center;min-width:80px}
.ra-symbol{font-size:1rem;font-weight:900;line-height:1;margin-bottom:.2rem}
.ra-label{font-size:.62rem;font-weight:800;letter-spacing:.05em;color:var(--text-3)}
.rel-empty{text-align:center;color:var(--text-3);font-size:.8rem;font-weight:700;padding:1rem}

/* ---------- 第 4 层：阶段划分 ---------- */
.stages-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;
}
.stage-card{
  padding:1rem;background:var(--surface);border:3px solid var(--border);
  border-top:8px solid var(--cc,var(--text));text-align:center;
}
.sc-name{font-family:'SF Mono',monospace;font-size:1.6rem;font-weight:900;color:var(--cc,var(--text));line-height:1;margin-bottom:.4rem}
.sc-segs{font-family:'SF Mono',monospace;font-size:.85rem;font-weight:900;color:var(--text);margin-bottom:.4rem;letter-spacing:.05em}
.sc-qi{font-size:.75rem;font-weight:800;color:var(--text-2);margin-bottom:.3rem}
.sc-count{font-size:.65rem;color:var(--text-3);font-weight:700;letter-spacing:.08em}

/* ---------- 第 5 层：完整叙事 ---------- */
.narrative-body{
  display:flex;flex-direction:column;gap:1rem;
}
.narrative-act{
  padding:1.2rem 1.4rem;background:var(--surface);
  border:3px solid var(--border);border-left:8px solid var(--cc,var(--text));
}
.na-header{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:2px solid var(--border)}
.na-idx{font-size:.7rem;font-weight:900;color:var(--text-3);letter-spacing:.2em;text-transform:uppercase}
.na-name{font-family:'SF Mono',monospace;font-size:1.1rem;font-weight:900;color:var(--cc,var(--text))}
.na-segs{font-family:'SF Mono',monospace;font-size:.8rem;font-weight:900;color:var(--text-2);margin-left:auto;letter-spacing:.05em}
.na-desc{font-size:.85rem;color:var(--text-2);line-height:1.9;letter-spacing:.02em}
.narrative-summary{
  margin-top:.8rem;padding:1.4rem;background:var(--surface-2);
  border:3px solid var(--border);border-left:8px solid var(--yellow);
}
.ns-label{font-size:.65rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.ns-text{font-size:1.05rem;font-weight:900;line-height:1.7;letter-spacing:.05em}

/* ---------- 第 6 层：性格 + 行动 ---------- */
.personality-body{display:flex;flex-direction:column;gap:.8rem}
.personality-card{
  padding:1.2rem 1.4rem;background:var(--surface);
  border:3px solid var(--border);border-left:8px solid var(--purple);
}
.pc-label{font-size:.65rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.pc-text{font-size:.88rem;color:var(--text-2);line-height:2;letter-spacing:.02em}
.pc-text strong{color:var(--text);font-weight:900}

/* ---------- 第 7 层：8 生活面 ---------- */
.life-body{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
}
@media(max-width:700px){.life-body{grid-template-columns:1fr}}
.life-card{
  padding:1rem 1.2rem;background:var(--surface);
  border:3px solid var(--border);border-left:8px solid var(--blue);
}
.lc-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.lc-icon{font-size:1.2rem}
.lc-name{font-size:.75rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase}
.lc-text{font-size:.85rem;color:var(--text-2);line-height:1.85;letter-spacing:.02em}

/* ---------- 第 8 层：能量走势图 ---------- */
.energy-chart-section{margin-top:2rem;padding:1.6rem;background:var(--surface);border:3px solid var(--border)}
.energy-chart-section h3{font-size:1.05rem;letter-spacing:.22em;margin-bottom:1rem;text-align:center;padding-bottom:.8rem;border-bottom:3px solid var(--border);text-transform:uppercase;font-weight:900}
.chart-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:1.4rem;margin-bottom:1rem;font-size:.72rem;font-weight:800;color:var(--text-2);letter-spacing:.08em}
.chart-legend span{display:flex;align-items:center;gap:.4rem}
.chart-legend i{display:inline-block;width:14px;height:14px;border:2px solid var(--border)}
.chart-wrap{position:relative;width:100%;background:var(--surface-2);border:2px solid var(--border);padding:.5rem;overflow:hidden}
#energyChart{display:block;width:100%}
.chart-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.2rem}
@media(max-width:700px){.chart-summary{grid-template-columns:1fr 1fr}}
.chart-stat{padding:.8rem 1rem;background:var(--surface-2);border:2px solid var(--border);display:flex;flex-direction:column;gap:.2rem}
.chart-stat .stat-label{font-size:.62rem;color:var(--text-3);letter-spacing:.2em;font-weight:900;text-transform:uppercase}
.chart-stat .stat-value{font-size:1rem;font-weight:900;font-family:'SF Mono',monospace}

/* ---------- 第 8 层：关键提醒 ---------- */
.reminder-section{margin-top:2rem;padding:1.6rem;background:var(--surface);border:3px solid var(--border);border-left:12px solid var(--yellow)}
.reminder-section h3{font-size:1.05rem;letter-spacing:.22em;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:3px solid var(--border);text-transform:uppercase;font-weight:900}
.reminder-item{font-size:.85rem;color:var(--text-2);line-height:2;letter-spacing:.02em;padding:.3rem 0}
.reminder-item strong{color:var(--text);font-weight:900}

/* ========== 主矩阵 ========== */
.matrix-wrap{background:var(--surface);border:3px solid var(--border);padding:1rem;overflow-x:auto}
.matrix{display:grid;grid-template-columns:40px repeat(8,minmax(56px,1fr));gap:3px;min-width:560px}
.matrix .corner{background:var(--text);color:var(--bg);font-size:.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;font-family:'SF Mono',monospace;padding:.5rem 0;text-align:center;line-height:1.1}
.matrix .header{background:var(--surface-3);color:var(--text);font-size:.95rem;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'SF Mono',monospace;padding:.4rem 0;border:2px solid var(--border);line-height:1.1}
.matrix .header .h-trigram{font-size:.6rem;color:var(--text-3);font-weight:700}
.matrix .header .h-digit{font-size:.95rem;font-weight:900}
.matrix .cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem .1rem;background:var(--surface-2);border:2px solid var(--border);cursor:pointer;transition:all .12s;font-family:inherit;color:var(--text);font-weight:900}
.matrix .cell:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--shadow);z-index:1}
.matrix .cell .mc-pair{font-family:'SF Mono',monospace;font-size:.9rem;font-weight:900;line-height:1}
.matrix .cell .mc-gua{font-size:.55rem;font-weight:900;margin-top:.15rem;line-height:1;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.matrix .cell.qi-zang{background:color-mix(in srgb,var(--zang) 22%,var(--surface-2));border-color:var(--zang)}
.matrix .cell.qi-sheng{background:color-mix(in srgb,var(--sheng) 24%,var(--surface-2));border-color:var(--sheng)}
.matrix .cell.qi-yang{background:color-mix(in srgb,var(--yang) 24%,var(--surface-2));border-color:var(--yang)}
.matrix .cell.qi-cheng{background:color-mix(in srgb,var(--cheng) 24%,var(--surface-2));border-color:var(--cheng)}
.matrix .cell.qi-po{background:color-mix(in srgb,var(--po) 24%,var(--surface-2));border-color:var(--po)}
.matrix .cell.qi-bian{background:color-mix(in srgb,var(--bian) 24%,var(--surface-2));border-color:var(--bian)}
.matrix .cell.qi-hao{background:color-mix(in srgb,var(--hao) 24%,var(--surface-2));border-color:var(--hao)}
.matrix .cell.qi-liu{background:color-mix(in srgb,var(--liu) 24%,var(--surface-2));border-color:var(--liu)}
.matrix-legend{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem;padding:.9rem 1rem;background:var(--surface-2);border:2px solid var(--border);font-size:.68rem;font-weight:900}
.matrix-legend .lg-item{display:flex;align-items:center;gap:.4rem}
.matrix-legend .lg-swatch{width:14px;height:14px;border:2px solid var(--border)}
.matrix-caption{margin-top:.8rem;font-size:.75rem;color:var(--text-3);text-align:center;font-weight:700;letter-spacing:.05em;line-height:1.7}
.matrix-caption strong{color:var(--text)}

/* ========== 组合通用 ========== */
.combo-section{margin-top:2rem;padding:1.6rem;background:var(--surface);border:3px solid var(--border)}
.combo-section h3{font-size:1.05rem;letter-spacing:.2em;margin-bottom:1.2rem;text-transform:uppercase;font-weight:900;padding-bottom:.6rem;border-bottom:2px solid var(--border)}
.combo-note{font-size:.78rem;color:var(--text-3);margin-bottom:1rem;padding:.7rem 1rem;background:var(--surface-2);border:2px solid var(--border);border-left:6px solid var(--blue);line-height:1.7}
.combo-note strong{color:var(--text);font-weight:900}
.combo-pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:end;margin-bottom:1.5rem}
.combo-pickers.three{grid-template-columns:1fr 1fr 1fr}
.combo-picker label{display:block;font-size:.7rem;color:var(--text-3);letter-spacing:.2em;font-weight:900;margin-bottom:.4rem;text-transform:uppercase}
.combo-picker select{width:100%;padding:.9rem 1rem;background:var(--surface-2);border:3px solid var(--border);color:var(--text);font-family:'SF Mono',monospace;font-size:1rem;font-weight:900;cursor:pointer;outline:none}
.combo-picker select:focus{border-color:var(--yellow)}
.combo-btn{display:block;width:100%;padding:1rem;background:var(--blue);color:#fff;border:4px solid var(--border);font-size:.95rem;letter-spacing:.4em;font-weight:900;cursor:pointer;transition:all .2s;font-family:inherit;text-transform:uppercase;margin-bottom:1.5rem}
.combo-btn:hover{background:var(--yellow);color:#0E0E0E;transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--shadow)}
.combo-result{display:none}
.combo-result.show{display:block;animation:fadeUp .4s}
.combo-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-bottom:1.2rem}
.combo-card{padding:1.2rem;background:var(--surface-2);border:3px solid var(--border);border-top:8px solid var(--cc,var(--text));text-align:center}
.combo-card .cc-pair{font-family:'SF Mono',monospace;font-size:2rem;font-weight:900;line-height:1;margin-bottom:.4rem;color:var(--cc,var(--text))}
.combo-card .cc-name{font-size:.95rem;font-weight:900;margin-bottom:.3rem}
.combo-card .cc-gua{font-size:.75rem;color:var(--text-2);margin-bottom:.5rem;letter-spacing:.1em;font-weight:700;line-height:1.5}
.combo-card .cc-desc{font-size:.75rem;color:var(--text-3);line-height:1.7}
.combo-mid{display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:900;color:var(--text-3)}
.combo-analysis{padding:1.4rem;background:var(--surface-2);border:3px solid var(--border);border-left:12px solid var(--yellow)}
.combo-analysis h4{font-size:.85rem;letter-spacing:.2em;font-weight:900;margin-bottom:.8rem;text-transform:uppercase;color:var(--text-3)}
.combo-analysis .ca-flow{font-family:'SF Mono',monospace;font-size:1rem;font-weight:900;margin-bottom:1rem;letter-spacing:.1em}
.combo-analysis .ca-text{font-size:.85rem;color:var(--text-2);line-height:2}
.combo-analysis .ca-text strong{color:var(--text);font-weight:900}
.combo-analysis .tag{display:inline-block;padding:.1rem .4rem;border:2px solid var(--border);background:var(--surface);font-weight:900;font-size:.75rem;margin:0 .2rem}
.gua-transition{margin-top:1rem;padding:1rem 1.2rem;background:var(--surface);border:3px solid var(--border);border-left:6px solid var(--blue)}
.gua-transition .gt-title{font-size:.7rem;color:var(--text-3);letter-spacing:.2em;font-weight:900;margin-bottom:.6rem;text-transform:uppercase}
.gua-transition .gt-flow{font-size:1.1rem;font-weight:900;letter-spacing:.12em;margin-bottom:.8rem;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.gua-transition .gt-flow .gua{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border:2px solid var(--border);background:var(--surface-2);font-size:.95rem}
.gua-transition .gt-text{font-size:.82rem;color:var(--text-2);line-height:1.9}
.gua-transition .gt-text strong{color:var(--text);font-weight:900}

/* ========== 组合矩阵（8×8 64卦选择器） ========== */
.combo-matrix-wrap{background:var(--surface-2);border:3px solid var(--border);padding:.8rem;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem}
.combo-matrix{display:grid;grid-template-columns:34px repeat(8,minmax(56px,1fr));gap:3px;min-width:560px}
.combo-matrix .cm-corner{background:var(--text);color:var(--bg);font-size:.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;font-family:'SF Mono',monospace;padding:.4rem 0;text-align:center;line-height:1.1}
.combo-matrix .cm-header{background:var(--surface-3);color:var(--text);font-size:.9rem;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'SF Mono',monospace;padding:.35rem 0;border:2px solid var(--border);line-height:1.1}
.combo-matrix .cm-header .cm-tri{font-size:.55rem;color:var(--text-3);font-weight:700}
.combo-matrix .cm-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem .1rem;background:var(--surface-2);border:2px solid var(--border);cursor:pointer;transition:all .12s;font-family:inherit;color:var(--text);font-weight:900;min-height:44px;user-select:none}
.combo-matrix .cm-cell:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--shadow);z-index:1}
.combo-matrix .cm-cell .cm-pair{font-family:'SF Mono',monospace;font-size:.85rem;font-weight:900;line-height:1}
.combo-matrix .cm-cell .cm-gua{font-size:.5rem;font-weight:900;margin-top:3px;line-height:1;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.combo-matrix .cm-cell.qi-zang{background:color-mix(in srgb,var(--zang) 22%,var(--surface-2));border-color:var(--zang)}
.combo-matrix .cm-cell.qi-sheng{background:color-mix(in srgb,var(--sheng) 24%,var(--surface-2));border-color:var(--sheng)}
.combo-matrix .cm-cell.qi-yang{background:color-mix(in srgb,var(--yang) 24%,var(--surface-2));border-color:var(--yang)}
.combo-matrix .cm-cell.qi-cheng{background:color-mix(in srgb,var(--cheng) 24%,var(--surface-2));border-color:var(--cheng)}
.combo-matrix .cm-cell.qi-po{background:color-mix(in srgb,var(--po) 24%,var(--surface-2));border-color:var(--po)}
.combo-matrix .cm-cell.qi-bian{background:color-mix(in srgb,var(--bian) 24%,var(--surface-2));border-color:var(--bian)}
.combo-matrix .cm-cell.qi-hao{background:color-mix(in srgb,var(--hao) 24%,var(--surface-2));border-color:var(--hao)}
.combo-matrix .cm-cell.qi-liu{background:color-mix(in srgb,var(--liu) 24%,var(--surface-2));border-color:var(--liu)}
.combo-matrix .cm-cell.selected-1{background:var(--yellow) !important;color:#0E0E0E !important;border-color:var(--border) !important;border-width:3px !important;transform:scale(1.06);z-index:2}
.combo-matrix .cm-cell.selected-1 .cm-gua{color:#0E0E0E}
.combo-matrix .cm-cell.selected-2{background:var(--blue) !important;color:#fff !important;border-color:var(--border) !important;border-width:3px !important;transform:scale(1.06);z-index:2}
.combo-matrix .cm-cell.selected-2 .cm-gua{color:#fff}
.combo-matrix .cm-cell.disabled{opacity:.2;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}
.combo-matrix .cm-cell.disabled:hover{transform:none;box-shadow:none}
.combo-pick-hint{text-align:center;padding:.8rem 1rem;background:var(--surface-2);border:2px solid var(--border);border-left:6px solid var(--yellow);font-size:.85rem;font-weight:900;letter-spacing:.05em;margin-bottom:1rem;color:var(--text);transition:border-left-color .2s}
.combo-pick-hint.has-one{border-left-color:var(--yellow)}
.combo-pick-hint.has-two{border-left-color:var(--green)}

/* ========== 组合弹窗 ========== */
.combo-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:1100;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
.combo-modal-overlay.show{display:flex}
.combo-modal-content{background:var(--bg);border:4px solid var(--border);max-width:900px;width:100%;position:relative;animation:modalIn .2s}
.combo-modal-close{position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;background:var(--red);color:#fff;border:3px solid var(--border);font-size:1.3rem;font-weight:900;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.combo-modal-close:hover{background:var(--yellow);color:#0E0E0E;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--shadow)}
.combo-modal-header{padding:2rem 1.5rem 1.2rem;border-bottom:3px solid var(--border);text-align:center}
.combo-modal-header .cmh-title{font-size:.7rem;color:var(--text-3);letter-spacing:.3em;font-weight:900;text-transform:uppercase;margin-bottom:1rem}
.combo-title-eq{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.2rem;padding:.8rem 1rem;background:var(--surface-2);border:3px solid var(--border);font-family:'SF Mono',monospace;font-size:1.6rem;font-weight:900;letter-spacing:.05em}
.combo-title-eq .cte-part{padding:.2rem .6rem;border:2px solid currentColor;background:var(--surface)}
.combo-title-eq .cte-plus,.combo-title-eq .cte-eq{color:var(--text-3);font-size:1.2rem}
.combo-title-eq .cte-result{padding:.2rem .8rem;background:var(--yellow);color:#0E0E0E;border:3px solid var(--border);letter-spacing:.1em}
.combo-modal-header .cmh-flow{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap}
.combo-modal-header .cmh-card{padding:.8rem 1.2rem;border:3px solid var(--border);border-top:8px solid var(--cc,var(--text));background:var(--surface-2);min-width:130px}
.combo-modal-header .cmh-card .cmhc-pair{font-family:'SF Mono',monospace;font-size:1.6rem;font-weight:900;line-height:1;color:var(--cc,var(--text));margin-bottom:.2rem}
.combo-modal-header .cmh-card .cmhc-gua{font-size:.75rem;color:var(--text-2);font-weight:800;letter-spacing:.05em;margin-bottom:.3rem}
.combo-modal-header .cmh-card .cmhc-qi{font-size:.7rem;color:var(--text-3);font-weight:700}
.combo-modal-header .cmh-arrow{font-size:1.6rem;font-weight:900;color:var(--text-3)}
.combo-modal-body{padding:1.5rem}
.combo-modal-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:2px solid var(--border)}
.combo-modal-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.combo-modal-section h4{font-size:.85rem;letter-spacing:.2em;font-weight:900;text-transform:uppercase;color:var(--text-3);margin-bottom:.8rem}
.combo-modal-section .cms-text{font-size:.88rem;color:var(--text-2);line-height:2}
.combo-modal-section .cms-text strong{color:var(--text);font-weight:900}
.combo-modal-section .cms-text .hl{display:inline-block;padding:.1rem .4rem;background:var(--yellow);color:#0E0E0E;font-weight:900;border:2px solid var(--border);margin:0 .1rem}
.combo-modal-section .cms-tag{display:inline-block;padding:.15rem .5rem;border:2px solid var(--border);background:var(--surface-2);font-weight:900;font-size:.75rem;margin:0 .2rem}
.combo-stage{padding:1.2rem;background:var(--surface-2);border:3px solid var(--border);border-left:8px solid var(--sc,var(--text));margin-bottom:1rem}
.combo-stage .cs-title{font-size:.75rem;color:var(--text-3);letter-spacing:.2em;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.combo-stage .cs-head{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:.6rem}
.combo-stage .cs-head .cs-pair{color:var(--sc,var(--text));font-family:'SF Mono',monospace}
.combo-stage .cs-body{font-size:.85rem;color:var(--text-2);line-height:1.9}
.combo-stage .cs-body strong{color:var(--text);font-weight:900}

/* ========== 0/5 节点 ========== */
.node-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.node-block{padding:1rem 1.1rem;background:var(--surface-2);border:2px solid var(--border);border-left:6px solid var(--nc,var(--text))}
.node-block h4{font-size:.9rem;font-weight:900;margin-bottom:.5rem;color:var(--nc,var(--text))}
.node-block p{font-size:.82rem;color:var(--text-2);line-height:1.8}
.node-block strong{color:var(--text);font-weight:900}
.node-pairs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.node-pair-card{padding:1rem;background:var(--surface-2);border:2px solid var(--border);border-top:6px solid var(--nc,var(--text))}
.node-pair-card .np-pair{font-family:'SF Mono',monospace;font-size:1.4rem;font-weight:900;margin-bottom:.3rem;color:var(--nc,var(--text))}
.node-pair-card .np-name{font-size:.85rem;font-weight:900;margin-bottom:.4rem}
.node-pair-card .np-desc{font-size:.75rem;color:var(--text-2);line-height:1.7}

/* ========== 关于 ========== */
.about-content{max-width:800px;margin:0 auto}
.about-content p{color:var(--text-2);font-size:.9rem;line-height:2;margin-bottom:1.2rem}
.about-content .quote{font-size:1.05rem;line-height:1.9;padding:1.6rem;border:3px solid var(--border);background:var(--surface);margin:2rem 0;font-weight:900}
.about-content .quote .k{display:inline-block;padding:0 .4rem;margin:0 .1rem;color:#fff}
[data-theme="dark"] .about-content .quote .k{color:#0E0E0E}

footer{position:relative;z-index:1;text-align:center;padding:3rem 2rem;border-top:3px solid var(--border);background:var(--text);color:var(--bg);font-size:.78rem;font-weight:900;letter-spacing:.25em;text-transform:uppercase}
footer .foot-sub{display:block;margin-top:.5rem;font-size:.65rem;opacity:.6}

/* ========== 数字详情模态框 ========== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);z-index:1000;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.modal-overlay.show{display:flex}
.modal-content{background:var(--bg);border:4px solid var(--border);max-width:640px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .2s}
@keyframes modalIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{position:absolute;top:.6rem;right:.6rem;width:36px;height:36px;background:var(--red);color:#fff;border:3px solid var(--border);font-size:1.2rem;font-weight:900;cursor:pointer;z-index:1}
.modal-close:hover{background:var(--yellow);color:#0E0E0E;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--shadow)}
.modal-header{padding:1.8rem 1.5rem 1.2rem;border-top:12px solid var(--c,var(--text));border-bottom:3px solid var(--border);text-align:center}
.modal-pair{font-family:'SF Mono',monospace;font-size:3rem;font-weight:900;line-height:1;color:var(--c,var(--text));margin-bottom:.4rem}
.modal-qi{font-size:1.2rem;font-weight:900;letter-spacing:.08em;margin-bottom:.2rem}
.modal-gua{font-size:1.5rem;font-weight:900;color:var(--c,var(--text));margin:.5rem 0 .3rem;letter-spacing:.15em}
.modal-gua-desc{font-size:.8rem;color:var(--text-2);line-height:1.7;margin-top:.4rem}
.modal-magnitude{font-size:.95rem;font-weight:900;letter-spacing:.15em;color:var(--c,var(--text));margin-top:.6rem;padding:.3rem .8rem;border:2px solid var(--c,var(--text));display:inline-block}
.modal-beidou{font-size:.75rem;color:var(--text-3);letter-spacing:.18em;font-weight:800;text-transform:uppercase;margin-top:.3rem}
.modal-body{padding:1.2rem 1.5rem 1.5rem}
.modal-row{padding:.85rem 0;border-bottom:2px solid var(--border)}
.modal-row:last-child{border-bottom:none}
.modal-label{font-size:.65rem;color:var(--text-3);letter-spacing:.22em;font-weight:900;text-transform:uppercase;margin-bottom:.45rem}
.modal-value{font-size:.9rem;font-weight:600;line-height:1.8}
.modal-sub{font-size:.78rem;color:var(--text-2);line-height:1.8;margin-top:.4rem}
.modal-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.modal-tags span{font-size:.7rem;padding:.18rem .55rem;border:2px solid var(--border);background:var(--surface-2);font-weight:800}

/* ========== 滚动显现 ========== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ========== 响应式 ========== */
@media(max-width:900px){
  nav ul{display:none}
  nav .inner{padding:0 1.2rem}
  section{padding:3.5rem 1.2rem}
  #hero{padding:7rem 1.2rem 2rem}
  .matrix{grid-template-columns:32px repeat(8,minmax(46px,1fr))}
  .matrix .cell .mc-pair{font-size:.75rem}
  .matrix .cell .mc-gua{font-size:.5rem}
}
@media(max-width:700px){
  .combo-pickers,.combo-pickers.three{grid-template-columns:1fr}
  .combo-mid{transform:rotate(90deg)}
  .node-grid{grid-template-columns:1fr}
  .node-pairs-grid{grid-template-columns:1fr 1fr}
  .combo-flow{grid-template-columns:1fr}
  .combo-modal-header .cmh-flow{flex-direction:column}
  .combo-modal-header .cmh-arrow{transform:rotate(90deg)}
  .combo-matrix{grid-template-columns:30px repeat(8,minmax(44px,1fr));min-width:0}
  .combo-matrix .cm-cell .cm-pair{font-size:.72rem}
  .combo-matrix .cm-cell .cm-gua{font-size:.45rem}
  .combo-title-eq{font-size:1.2rem;gap:.4rem}
}

/* ===== 节点卡片（seg-chip 的 node 变体） ===== */
.seg-chip.node-chip {
  border-top-style: dashed;
}
.seg-chip.node-chip .seg-pair {
  color: var(--cc, var(--text-3));
}
.seg-chip.node-chip .seg-qi {
  color: var(--cc, var(--text-2));
  font-weight: 900;
}

/* ===== 节点插入关系（rel-item 的 node 变体） ===== */
.rel-item.node-rel {
  background: color-mix(in srgb, var(--text-3) 8%, var(--surface-2));
  border-style: dashed;
}

/* ===== 生活面增强 ===== */
.life-card .lc-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lc-base {
  font-size: 0.85rem;
  line-height: 1.8;
}
.lc-base strong {
  color: var(--text);
  font-weight: 900;
}
.lc-stages {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--text-2);
}
.ls-stage {
  display: inline-block;
  padding: 0.1rem 0;
}
.ls-stage strong {
  color: var(--text);
  font-weight: 900;
  margin-right: 0.3rem;
  padding: 0 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ls-stage.node-stage {
  color: var(--text-3);
  font-style: italic;
}

/* ===== 完整叙事 · Bullet List ===== */
.narrative-act .na-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.narrative-act .na-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.narrative-act .na-list li:last-child {
  border-bottom: none;
}
.narrative-act .na-list .nl-label {
  flex: 0 0 3.5rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-top: 0.25rem;
  border-left: 3px solid var(--cc, var(--text));
  padding-left: 0.5rem;
}
.narrative-act .na-list .nl-strong {
  color: var(--text);
  font-weight: 900;
}
.narrative-act .na-list li > span:not(.nl-label):not(.nl-strong) {
  flex: 1;
}

/* 移动端：label 换行 */
@media (max-width: 600px) {
  .narrative-act .na-list li {
    flex-direction: column;
    gap: 0.2rem;
  }
  .narrative-act .na-list .nl-label {
    flex: none;
    padding-top: 0;
  }
}

/* ===== 完整叙事 · 大屏 3 列布局 ===== */
.narrative-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .narrative-body {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .narrative-body {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 一句话核心：跨所有列 */
.narrative-body .narrative-summary {
  grid-column: 1 / -1;
}

/* 幕卡片内部微调：让 3 列时更紧凑 */
@media (min-width: 1200px) {
  .narrative-act {
    padding: 1rem 1.1rem;
  }
  .narrative-act .na-header {
    gap: 0.5rem;
  }
  .narrative-act .na-segs {
    font-size: 0.72rem;
  }
  .narrative-act .na-list li {
    font-size: 0.82rem;
    padding: 0.4rem 0;
  }
  .narrative-act .na-list .nl-label {
    flex: 0 0 3rem;
    font-size: 0.62rem;
  }
}
/* ===== 数字详情弹窗 · 8 生活面网格 ===== */
.modal-life-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
@media (max-width: 500px) {
  .modal-life-grid {
    grid-template-columns: 1fr;
  }
}
.modal-life-item {
  padding: 0.6rem 0.7rem;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-left: 6px solid var(--blue);
}
.mli-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}
.mli-icon {
  font-size: 0.9rem;
}
.mli-name {
  font-size: 0.62rem;
  color: var(--text-3);
  letter-spacing: 0.15em;
  font-weight: 900;
  text-transform: uppercase;
}
.mli-text {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ===== 组合弹窗 · 两卦对比 ===== */
.combo-compare-section {
  margin-top: 1rem;
  padding: 1.2rem;
  background: var(--surface-2);
  border: 3px solid var(--border);
  border-left: 6px solid var(--purple);
}
.combo-compare-section h4 {
  font-size: .85rem;
  letter-spacing: .2em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .8rem;
}
.combo-personality-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 700px) {
  .combo-personality-grid { grid-template-columns: 1fr; }
}
.combo-personality-cell {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: 6px solid var(--cc, var(--text));
}
.combo-personality-cell .cpc-pair {
  font-family: 'SF Mono', monospace;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--cc, var(--text));
  margin-bottom: .3rem;
}
.combo-personality-cell .cpc-gua {
  font-size: .7rem;
  color: var(--text-3);
  letter-spacing: .1em;
  font-weight: 800;
  margin-bottom: .6rem;
}
.combo-personality-cell .cpc-personality {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.9;
}
.combo-personality-cell .cpc-personality strong {
  color: var(--text);
  font-weight: 900;
}
.combo-personality-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-3);
  font-weight: 900;
}
@media (max-width: 700px) {
  .combo-personality-mid { transform: rotate(90deg); }
}

/* 两卦 8 生活面对比表 */
.combo-life-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  border: 2px solid var(--border);
  background: var(--surface);
}
.combo-life-table th {
  padding: .6rem .7rem;
  background: var(--surface-3);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 2px solid var(--border);
  border-right: 2px solid var(--border);
  text-align: left;
}
.combo-life-table th:last-child { border-right: none; }
.combo-life-table th.col-a { color: var(--color-a, var(--text)); }
.combo-life-table th.col-b { color: var(--color-b, var(--text)); }
.combo-life-table td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--border);
  border-right: 2px solid var(--border);
  color: var(--text-2);
  line-height: 1.75;
  vertical-align: top;
}
.combo-life-table td:last-child { border-right: none; }
.combo-life-table tr:last-child td { border-bottom: none; }
.combo-life-table td:first-child {
  background: var(--surface-2);
  font-weight: 900;
  color: var(--text);
  font-size: .75rem;
  letter-spacing: .05em;
  min-width: 4rem;
}
@media (max-width: 700px) {
  .combo-life-table { font-size: .72rem; }
  .combo-life-table th, .combo-life-table td { padding: .5rem .5rem; }
}

/* ===== 移动端细节优化 ===== */
@media (max-width: 500px) {
  /* 第 0 层：回显条更紧凑 */
  .echo-bar { padding: .7rem .9rem; }
  .echo-input { font-size: .85rem; }
  .echo-stat { font-size: .65rem; padding: .25rem .55rem; }

  /* 第 1 层：核心概览 */
  .overview-block { padding: 1.2rem; }
  .overview-verdict .ov-text { font-size: 1.8rem; }
  .ov-stat { padding: .8rem .6rem; }
  .ov-stat-value { font-size: .95rem; }
  .overview-sentence .os-text { font-size: .92rem; }

  /* 第 2 层：切段卡片更小 */
  .seg-chip { min-width: 120px; padding: .6rem .7rem; }
  .seg-pair { font-size: 1.3rem; }

  /* 第 5 层：叙事 Bullet 排版 */
  .narrative-act { padding: 1rem; }
  .na-header { gap: .5rem; }
  .na-name { font-size: 1rem; }
  .na-segs { font-size: .7rem; margin-left: 0; width: 100%; }

  /* 第 7 层：生活面文字 */
  .life-card { padding: .9rem 1rem; }
  .lc-text { font-size: .82rem; }

  /* 提醒 */
  .reminder-section { padding: 1.2rem; }
  .reminder-item { font-size: .8rem; }

  /* 弹窗 8 生活面 */
  .modal-life-grid { grid-template-columns: 1fr; }
  .modal-life-item { padding: .55rem .65rem; }
  .mli-text { font-size: .7rem; }

  /* 组合弹窗表格 */
  .combo-life-table td:first-child { font-size: .68rem; min-width: 3rem; }
  .combo-life-table td { font-size: .72rem; padding: .5rem .4rem; }
}