/* ============ 赛博命理研究所 · 暗色赛博玄学主题 ============ */
:root {
  --bg: #090c17;
  --bg2: #0e1223;
  --card: #141a30;
  --card2: #1a2140;
  --line: #262f52;
  --txt: #e9ecf8;
  --sub: #96a0c6;
  --acc: #a78bfa;
  --acc2: #7c6cf0;
  --gold: #f0c674;
  --pink: #f38ba0;
  --cyan: #7dd3fc;
  --green: #6ee7a0;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性兜底：防止被 display 覆盖（如 .report 的 flex） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124, 108, 240, .14), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(240, 198, 116, .07), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

#app { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- 顶栏 ---------- */
.topbar { text-align: center; padding: 26px 0 18px; }
.logo {
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(120deg, var(--acc), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-mark { -webkit-text-fill-color: var(--gold); }
.logo-sub { font-size: 11.5px; color: var(--sub); letter-spacing: 3px; margin-top: 4px; text-transform: uppercase; }

/* ---------- 聊天区 ---------- */
.chat-wrap { max-width: 560px; margin: 0 auto; }
.chat { display: flex; flex-direction: column; gap: 14px; }
.chat-footer { text-align: center; font-size: 11px; color: #5a6488; padding: 26px 0 8px; letter-spacing: .5px; }

.msg-row { display: flex; gap: 10px; animation: fadeUp .45s ease both; }
.msg-row.user { justify-content: flex-end; }
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2350, #1a2140); border: 1px solid var(--line);
  font-size: 16px;
}
.bubble {
  max-width: 82%; padding: 11px 15px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  white-space: pre-wrap; word-break: break-word;
}
.msg-row.user .bubble {
  background: linear-gradient(135deg, var(--acc2), #5748c8);
  border-color: rgba(167, 139, 250, .4); border-bottom-right-radius: 4px;
}
.bubble b { color: var(--gold); font-weight: 600; }
.bubble .hl { color: var(--acc); font-weight: 600; }
.bubble .mini { display: block; font-size: 12px; color: var(--sub); margin-top: 6px; }

/* 聊天内卡片（表单等） */
.chat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; animation: fadeUp .45s ease both;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.chat-card .card-title { font-size: 13px; color: var(--sub); letter-spacing: 1px; margin-bottom: 12px; }

/* 打字动画 */
.typing-row { display: flex; gap: 10px; }
.typing-bubble { display: inline-flex; align-items: center; gap: 6px; padding: 13px 16px; }
.typing-bubble i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  animation: blink 1.2s infinite;
}
.typing-bubble i:nth-child(2) { animation-delay: .2s; }
.typing-bubble i:nth-child(3) { animation-delay: .4s; }
.spin { display: inline-block; animation: spin 1.6s linear infinite; margin-right: 6px; }

@keyframes blink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 表单 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; color: var(--sub); }
.field input, .field select, textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--txt); padding: 8px 9px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .2s;
}
.field input:focus, .field select:focus, textarea:focus { border-color: var(--acc); }
.field input:disabled { opacity: .35; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

.check-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); margin: 4px 0 12px; cursor: pointer; }
.check-line input { accent-color: var(--acc); width: 15px; height: 15px; cursor: pointer; }

.form-error { color: var(--pink); font-size: 13px; margin-top: 8px; display: none; }
.form-error.show { display: block; }

.btn-primary {
  background: linear-gradient(135deg, var(--acc2), #5748c8); color: #fff;
  border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px;
  font-family: inherit; cursor: pointer; font-weight: 600;
  transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 20px rgba(124, 108, 240, .35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(124, 108, 240, .5); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: transparent; color: var(--sub); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--txt); border-color: var(--acc); }
.link-btn { background: none; border: none; color: var(--acc); font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }

/* 选项按钮 */
.option-card {
  display: block; width: 100%; text-align: left; margin-bottom: 9px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--txt); padding: 12px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.option-card:hover { border-color: var(--acc); background: #1c2444; transform: translateX(3px); }
.option-card .opt-key { color: var(--gold); font-weight: 700; margin-right: 8px; }

/* 答题进度条 */
.qprog { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.qprog i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 2px; transition: width .3s; }

/* MBTI 自报类型选择器 */
.mbti-pick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mp-dim { display: flex; align-items: center; gap: 8px; }
.mp-label { flex: 1; font-size: 12.5px; color: var(--sub); }
.mp-btn {
  width: 46px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--sub); font-size: 16px; font-family: var(--mono);
  font-weight: 700; cursor: pointer; transition: all .15s;
}
.mp-btn:hover { border-color: var(--acc); color: var(--txt); }
.mp-btn.on {
  background: linear-gradient(135deg, var(--acc2), #5748c8); color: #fff;
  border-color: transparent; box-shadow: 0 4px 14px rgba(124, 108, 240, .4);
}

/* ---------- 四柱展示 ---------- */
.pillar-strip { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.pz {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; text-align: center; min-width: 74px;
}
.pz .gz { font-size: 21px; font-weight: 700; letter-spacing: 3px; font-family: var(--mono); }
.pz .ss { font-size: 11px; color: var(--acc); margin-top: 3px; }
.pz .ny { font-size: 10px; color: #5a6488; margin-top: 1px; }
.pz .gz .day { color: var(--gold); }

/* ---------- 故事采集卡 ---------- */
.story-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.story-tab {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--sub); padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: all .15s; position: relative;
}
.story-tab.active { border-color: var(--acc); color: var(--txt); background: #241f4a; }
.story-tab.done::after { content: '✓'; color: var(--green); margin-left: 5px; font-size: 11px; }
.story-hint { font-size: 12.5px; color: var(--sub); margin-bottom: 8px; }
textarea#storyText {
  width: 100%; min-height: 110px; resize: vertical; border-radius: 12px; line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}
textarea#storyText.voice-focus {
  border-color: var(--pink); box-shadow: 0 0 0 3px rgba(243, 139, 160, .12);
}

/* ---------- 语音输入 ---------- */
.voice-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mic-btn {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: 17px; cursor: pointer; position: relative;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.mic-btn:hover { border-color: var(--acc); box-shadow: 0 0 14px rgba(167, 139, 250, .3); }
.mic-btn.rec {
  background: linear-gradient(135deg, #e8556b, #f38ba0); border-color: transparent; color: #fff;
  animation: micPulse 1.6s ease-out infinite;
}
/* 引擎加载中：转圈态 */
.mic-btn.loading {
  background: linear-gradient(135deg, #2a2350, #1a2140); color: var(--gold);
  cursor: wait; animation: none;
}
.mic-btn.loading .spin { color: var(--gold); }
/* 听写指引气泡 */
.voice-live.guide {
  background: rgba(240, 198, 116, .07); border-color: rgba(240, 198, 116, .3);
  color: #eddbac; line-height: 1.9;
}
.voice-live.guide .live-dot { background: var(--gold); }
.voice-live.guide .live-wave i { background: var(--gold); }
.voice-live.guide b { color: var(--gold); font-weight: 700; }
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 139, 160, .55); }
  100% { box-shadow: 0 0 0 14px rgba(243, 139, 160, 0); }
}
.mic-off {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  border: 1px dashed var(--line); background: transparent; color: #5a6488;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.voice-tip { font-size: 12px; color: #5a6488; }
.voice-tip b { color: var(--acc); font-weight: 600; }

.voice-live {
  display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 12px;
  background: rgba(243, 139, 160, .08); border: 1px solid rgba(243, 139, 160, .3);
  border-radius: 10px; font-size: 13px; color: #f3b8c4;
}
.live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--pink); animation: blink 1.1s infinite; }
.live-wave { display: flex; align-items: center; gap: 2.5px; height: 16px; flex: 0 0 auto; }
.live-wave i { width: 2.5px; border-radius: 2px; background: var(--pink); animation: wave .9s ease-in-out infinite; }
.live-wave i:nth-child(1) { height: 6px; }
.live-wave i:nth-child(2) { height: 12px; animation-delay: .15s; }
.live-wave i:nth-child(3) { height: 16px; animation-delay: .3s; }
.live-wave i:nth-child(4) { height: 10px; animation-delay: .45s; }
.live-wave i:nth-child(5) { height: 5px; animation-delay: .6s; }
@keyframes wave { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
#stLiveText { word-break: break-all; opacity: .95; }

.story-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #5a6488; }
.story-progress { display: flex; gap: 4px; }
.story-progress i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); }
.story-progress i.on { background: var(--green); }
.story-actions { display: flex; gap: 10px; margin-top: 12px; }

/* 信号摘要气泡 */
.signal-box { border-left: 3px solid var(--acc); padding-left: 12px; margin-top: 4px; }
.signal-rows { font-size: 13px; color: var(--sub); }
.signal-rows b { color: var(--txt); font-weight: 600; }
.shift-item { display: flex; gap: 8px; align-items: baseline; }
.shift-arrow { font-family: var(--mono); font-size: 12px; }
.up { color: var(--green); } .down { color: var(--pink); } .flat { color: var(--sub); }

/* ---------- 报告 ---------- */
.report { display: flex; flex-direction: column; gap: 16px; animation: fadeUp .5s ease both; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.card-title { font-size: 14px; font-weight: 600; letter-spacing: 1px; margin-bottom: 14px; }
.card-title::before { content: '◆ '; color: var(--gold); font-size: 11px; }
.card-sub { font-size: 12px; color: var(--sub); font-weight: 400; margin-left: 8px; }

/* hero */
.report-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #1a2140 0%, #211a45 55%, #2a2350 100%); }
.hero-kicker { font-size: 12px; color: var(--acc); letter-spacing: 3px; }
.hero-type { font-size: 54px; font-weight: 800; letter-spacing: 6px; font-family: var(--mono);
  background: linear-gradient(120deg, var(--acc), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.15; }
.hero-nick { font-size: 16px; color: var(--gold); font-weight: 600; }
.hero-line { font-size: 13.5px; color: var(--sub); margin-top: 6px; max-width: 460px; display: flex; flex-direction: column; gap: 3px; }
.hero-line .ol-line { display: block; line-height: 1.6; }
.hero-line .ol-line:first-child { color: #c6cde6; }           /* ① 基座人格画像：稍亮 */
.hero-line .ol-dim { color: #7a86ad; font-size: 12.5px; }     /* ③ 命盘对照：弱化为注脚 */
.hero-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.chip { font-size: 12px; padding: 3px 11px; border-radius: 999px; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); color: #cbbcff; }
/* chips 分组：第一行客观命盘实测（紫），第二行主观故事标签（金） */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-row-label { font-size: 10.5px; color: #5a6488; letter-spacing: 1px; flex: 0 0 auto; margin-right: 2px; }
.chip-row-story .chip { background: rgba(240, 198, 116, .09); border-color: rgba(240, 198, 116, .32); color: #eddbac; }
.conf-ring {
  width: 128px; height: 128px; border-radius: 50%; flex: 0 0 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--acc) 60%, #232a44 0);
  position: relative;
}
.conf-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #171d36; }
.conf-ring span { position: relative; font-size: 27px; font-weight: 800; font-family: var(--mono); color: var(--txt); }
.conf-ring i { position: relative; font-style: normal; font-size: 10.5px; color: var(--sub); }

/* 四柱卡 */
.pillars { display: flex; gap: 10px; justify-content: space-between; }
.pz-lg {
  flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 8px; text-align: center; position: relative;
}
.pz-lg .col-name { font-size: 11px; color: var(--sub); letter-spacing: 2px; }
.pz-lg .gz { font-size: 24px; font-weight: 700; font-family: var(--mono); letter-spacing: 4px; margin: 3px 0; }
.pz-lg.day .gz { color: var(--gold); }
.pz-lg .ss { font-size: 12px; color: var(--acc); }
.pz-lg .ny { font-size: 10.5px; color: #5a6488; margin-top: 2px; }
.pan-meta { font-size: 12.5px; color: var(--sub); margin-top: 14px; line-height: 2; }
.pan-meta b { color: var(--txt); }

/* 拔河条：头部一行（维度码 + 全名 + 结果），轨道占满整行，方向由头部与标记表达 */
.dim-list { display: flex; flex-direction: column; gap: 20px; }
.dim-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.dim-code { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--acc); letter-spacing: 1px; }
.dim-full { font-size: 13.5px; font-weight: 600; color: var(--txt); white-space: nowrap; letter-spacing: .5px; }
.dim-result { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--sub); white-space: nowrap; }
.dim-result b { font-size: 15px; color: var(--acc); margin: 0 2px 0 5px; font-weight: 700; }
.dim-result small { font-size: 10.5px; margin-left: 7px; letter-spacing: .5px; }
.tug-track { position: relative; height: 38px; margin-top: 1px; }
.tug-zone { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.tug-rail {
  position: absolute; top: 17px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), #3a4270 48%, #3a4270 52%, var(--acc2));
}
.tug-mid { position: absolute; top: 11px; left: 50%; width: 1px; height: 16px; background: #3a4270; }
.tug-marker { position: absolute; top: 9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-family: var(--mono); }
.tug-prior { background: #232a44; border: 2px solid var(--sub); color: var(--sub); z-index: 2; }
.tug-final { background: linear-gradient(135deg, var(--acc2), #5748c8); border: 2px solid #fff2; color: #fff; z-index: 3;
  box-shadow: 0 0 14px rgba(124, 108, 240, .6); }
.tug-story {
  top: 6px; width: 8px; height: 26px; margin-left: -4px; border-radius: 3px;
  background: var(--pink); opacity: .85; z-index: 1;
}
.tug-legend { display: flex; gap: 18px; margin-top: 16px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.tug-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dot-prior { background: #232a44; border: 2px solid var(--sub); }
.dot-final { background: var(--acc2); }
.dot-story { background: var(--pink); }

/* 卡片高亮总结条：每张报告卡顶部的一句话讲透 */
.card-hl {
  margin: 0 0 13px; padding: 9px 13px;
  background: linear-gradient(90deg, rgba(240, 198, 116, .12), rgba(240, 198, 116, .02) 85%);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  font-size: 13px; line-height: 1.7; color: #d8def2;
}
.card-hl b { color: var(--gold); font-weight: 700; }
.card-hl .hl-mark { color: var(--gold); margin-right: 5px; font-size: 12.5px; }

/* ---------- 生活现状登记卡（查户口环节） ---------- */
.ls-sec { margin-bottom: 13px; }
.ls-sec-t { font-size: 12.5px; color: var(--sub); margin-bottom: 7px; letter-spacing: .5px; }
.ls-sec-t b { color: var(--txt); font-size: 13px; }
.ls-req { font-size: 10.5px; color: var(--gold); border: 1px solid rgba(240, 198, 116, .4); border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: 1px; }
.ls-req.opt { color: var(--sub); border-color: var(--line); }
.ls-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ls-opt {
  font-size: 12.5px; color: var(--sub); cursor: pointer; user-select: none;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; transition: all .18s;
}
.ls-opt:hover { border-color: var(--acc); color: var(--txt); }
.ls-opt.on { background: rgba(124, 108, 240, .16); border-color: var(--acc); color: var(--txt); font-weight: 600; }

/* 图表 */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart { height: 300px; }
.chart-card .card-title { margin-bottom: 4px; }

/* 故事印证 */
.echo-list { display: flex; flex-direction: column; gap: 11px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.echo-item {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; font-size: 13px;
}
.echo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.echo-name { font-weight: 700; font-size: 13.5px; }
.echo-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; letter-spacing: 1px; }
.echo-badge.strong { background: rgba(240, 198, 116, .14); color: var(--gold); border: 1px solid rgba(240, 198, 116, .35); }
.echo-badge.growing { background: rgba(125, 211, 252, .12); color: var(--cyan); border: 1px solid rgba(125, 211, 252, .3); }
.echo-badge.compensate { background: rgba(243, 139, 160, .12); color: var(--pink); border: 1px solid rgba(243, 139, 160, .3); }
.echo-desc { color: var(--sub); font-size: 12.5px; }
.echo-quotes { margin: 7px 0 2px; padding: 7px 10px 7px 12px; border-left: 2px solid rgba(167, 139, 250, .45); background: rgba(124, 108, 240, .07); border-radius: 0 8px 8px 0; }
.echo-quote { font-size: 12.5px; color: #c6cde6; line-height: 1.65; }
.echo-quote + .echo-quote { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(38, 47, 82, .8); }
.echo-quote-cat { display: inline-block; font-size: 10.5px; color: var(--acc); background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); border-radius: 999px; padding: 0 7px; margin-right: 6px; vertical-align: 1px; letter-spacing: .5px; }
.echo-src { font-size: 11px; color: #5a6488; margin-top: 3px; }

/* 一生小传（抒情收官长文案 · 信笺风） */
.epic-card {
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(167, 139, 250, .10), transparent 70%),
    radial-gradient(500px 220px at 90% 100%, rgba(124, 108, 240, .08), transparent 70%),
    linear-gradient(160deg, #151b36 0%, #171d3d 60%, #1a1f45 100%);
  position: relative; overflow: hidden;
}
.epic-card::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(167, 139, 250, .14);
  border-radius: 14px; pointer-events: none;
}
.epic-body { display: flex; flex-direction: column; gap: 4px; position: relative; }
.epic-p {
  font-size: 14.5px; line-height: 2.15; color: #cdd4ec; text-align: justify;
  padding: 10px 2px; letter-spacing: .2px;
}
.epic-p b { color: var(--acc); font-weight: 700; padding: 0 1px; }
.epic-first::first-letter {
  font-size: 34px; font-weight: 700; color: var(--acc);
  float: left; line-height: 1.1; padding: 2px 8px 0 0;
  text-shadow: 0 0 18px rgba(167, 139, 250, .45);
}
.epic-quote {
  margin: 8px 6px 8px 26px; padding: 10px 16px; position: relative;
  font-size: 14px; line-height: 1.95; color: #dfe4f8; font-style: italic;
  background: rgba(167, 139, 250, .07); border-radius: 0 12px 12px 0;
  border-left: 2px solid var(--acc);
}
.epic-quote span { display: block; font-size: 11px; font-style: normal; color: #7a86ad; margin-top: 4px; }
.epic-end {
  margin-top: 10px; padding-top: 16px; border-top: 1px dashed rgba(167, 139, 250, .22);
  color: #dfe4f8; font-weight: 500;
}
.epic-sign {
  text-align: right; font-size: 12.5px; color: #7a86ad; margin-top: 14px;
  letter-spacing: 1.5px;
}
@media (max-width: 720px) {
  .epic-p { font-size: 13.8px; line-height: 2.05; text-align: left; }
  .epic-quote { margin-left: 10px; }
}

/* JSON */
.json-card summary { cursor: pointer; font-size: 13px; color: var(--sub); }
.json-card summary:hover { color: var(--acc); }
.json-card pre {
  margin-top: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; font-size: 12px; line-height: 1.6; overflow-x: auto; max-height: 340px;
  font-family: var(--mono); color: #b6c2e8;
}

.report-actions { display: flex; justify-content: center; gap: 14px; }
.report-footer { text-align: center; font-size: 11.5px; color: #5a6488; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--card2); border: 1px solid var(--acc); color: var(--txt);
  padding: 10px 22px; border-radius: 999px; font-size: 13px; opacity: 0;
  pointer-events: none; transition: all .3s; z-index: 99;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 64 型 hero：人物形象 ---------- */
.report-hero .hero-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.type-avatar {
  position: relative; width: 106px; height: 106px; flex: 0 0 106px;
  display: flex; align-items: center; justify-content: center;
}
.ta-ring { position: absolute; inset: 0; border-radius: 27px; opacity: .25; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.ta-face {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 47px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}
/* 专属人像：图片铺满圆角方框（object-fit 裁切为头像）；emoji 为缺图兜底 */
.ta-face .ta-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 27px; display: block;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 6px 20px rgba(0, 0, 0, .5);
  filter: saturate(1.04);
}
.ta-role {
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 10px; color: var(--txt); letter-spacing: .8px; white-space: nowrap;
  background: rgba(14, 18, 35, .86); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 2px 10px; backdrop-filter: blur(6px);
}
.ta-spark { position: absolute; color: var(--gold); font-size: 12px; z-index: 3; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
.ta-aura {
  position: absolute; width: 25px; height: 25px; border-radius: 50%; z-index: 4;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--bg2); border: 1.5px solid; cursor: default;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.ta-aura.a1 { top: -7px; left: -7px; }
.ta-aura.a2 { bottom: -7px; right: -7px; }
.type-suffix { font-size: .48em; letter-spacing: 1px; margin-left: 2px; background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
.nick-sub { font-size: 13px; color: var(--sub); font-weight: 400; margin-left: 4px; }

/* ---------- 64 型解读卡 ---------- */
.sub64-row { display: flex; flex-direction: column; gap: 12px; }
.s64-item { display: flex; gap: 14px; align-items: flex-start; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.s64-face {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: rgba(255, 255, 255, .03); border: 1px solid;
}
.s64-body { flex: 1; min-width: 0; }
.s64-name { font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s64-name b { font-family: var(--mono); font-size: 20px; }
.s64-en { font-size: 11px; color: #5a6488; letter-spacing: .5px; font-weight: 400; }
.s64-p { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--sub); }
.s64-desc { font-size: 12.5px; color: var(--sub); margin: 5px 0 8px; line-height: 1.65; }
.s64-bar { display: flex; align-items: center; gap: 8px; }
.s64-bar span { font-family: var(--mono); font-size: 12px; color: #5a6488; }
.s64-bar .bar { flex: 1; height: 6px; border-radius: 3px; background: #232a44; overflow: hidden; }
.s64-bar .bar i { display: block; height: 100%; border-radius: 3px; transition: width .8s ease; }
.sub64-foot { font-size: 11px; color: #5a6488; margin-top: 12px; line-height: 1.7; }

/* ---------- 五行体质报告 ---------- */
.wxr-list { display: flex; flex-direction: column; gap: 10px; }
.wxr-item { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.wxr-item.self { border-color: rgba(240, 198, 116, .45); }
.wxr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wxr-el { font-size: 17px; font-weight: 700; }
.wxr-hf { font-size: 11.5px; color: #5a6488; font-family: var(--mono); letter-spacing: 1px; }
.wxr-badge { font-size: 10px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub); }
.wxr-badge.self { color: var(--gold); border-color: rgba(240, 198, 116, .4); }
.wxr-badge.yong { color: var(--green); border-color: rgba(110, 231, 160, .4); }
.wxr-badge.lv-strong { color: #ff9d7a; border-color: rgba(255, 157, 122, .4); }
.wxr-badge.lv-mid { color: var(--cyan); border-color: rgba(125, 211, 252, .4); }
.wxr-badge.lv-weak { color: var(--sub); }
.wxr-pct { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--txt); font-weight: 700; }
.wxr-bar { height: 5px; border-radius: 3px; background: #232a44; overflow: hidden; margin: 7px 0; }
.wxr-bar i { display: block; height: 100%; border-radius: 3px; transition: width .8s ease; }
.wxr-desc { font-size: 12.5px; color: #c6cde6; line-height: 1.65; }
.wxr-meta { font-size: 11px; color: #5a6488; margin-top: 5px; letter-spacing: .3px; }
.wxr-foot { font-size: 11px; color: #5a6488; margin-top: 12px; line-height: 1.7; }

/* ---------- 十神强度排行（横向柱条 × 白话解读，两图合一） ---------- */
.ssp-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.ssp-item { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; }
.ssp-item.top { border-color: rgba(240, 198, 116, .45); }
.ssp-head { display: flex; align-items: center; gap: 8px; }
.ssp-name { font-size: 13.5px; font-weight: 700; }
.ssp-badge { font-size: 10px; color: var(--gold); border: 1px solid rgba(240, 198, 116, .4); padding: 1px 8px; border-radius: 999px; }
.ssp-pct { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--sub); }
.ssp-bar { height: 6px; border-radius: 3px; background: #232a44; overflow: hidden; margin: 7px 0 6px; }
.ssp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5b6bc0, #7c6cf0); border-radius: 3px; transition: width .8s ease; }
.ssp-item.top .ssp-bar i { background: linear-gradient(90deg, #d9a441, var(--gold)); }
.ssp-desc { font-size: 12px; color: var(--sub); line-height: 1.55; }

/* ---- 十神档位标签：偏强 / 中和 / 偏弱 / 缺席 ---- */
.ssp-lv {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px; letter-spacing: .5px;
  border: 1px solid var(--line); color: var(--sub); background: transparent;
}
.ssp-item.lv-strong .ssp-lv { color: #e8927c; border-color: rgba(232, 146, 124, .45); background: rgba(232, 146, 124, .08); }
.ssp-item.lv-mid .ssp-lv { color: var(--acc); border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .08); }
.ssp-item.lv-weak .ssp-lv, .ssp-item.lv-void .ssp-lv { color: #5a6488; border-color: #333c60; }

/* ---- 多了 / 少了 对照行：默认整行收暗，命中的 .hit 点亮 ---- */
.ssp-impact { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.imp-row {
  display: flex; gap: 7px; align-items: baseline; font-size: 11.5px; line-height: 1.5;
  color: #5f688c; padding: 3px 7px; border-radius: 7px; border-left: 2px solid transparent;
  transition: background .2s, color .2s;
}
.imp-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #6b7396; border: 1px solid #333c60; border-radius: 4px; padding: 0 5px;
  transform: translateY(-1px);
}
.imp-tx { flex: 1; }
/* 命中态：加亮左边框 + 提升文字亮度 */
.imp-row.hit { color: #b9c2e0; background: rgba(124, 108, 240, .07); border-left-color: var(--acc); }
.imp-row.hit .imp-tag { color: var(--acc); border-color: rgba(167, 139, 250, .5); }
.imp-row.plus.hit { background: rgba(240, 198, 116, .07); border-left-color: var(--gold); }
.imp-row.plus.hit .imp-tag { color: var(--gold); border-color: rgba(240, 198, 116, .5); }
.imp-row.minus.hit { background: rgba(122, 184, 255, .06); border-left-color: #7ab8ff; }
.imp-row.minus.hit .imp-tag { color: #7ab8ff; border-color: rgba(122, 184, 255, .45); }
.imp-row.midline.hit { border-left-color: var(--green); }
.imp-row.midline.hit .imp-tag { color: var(--green); border-color: rgba(110, 231, 160, .45); }
/* 缺席的十神：整卡更暗，条不渲染 */
.ssp-item.lv-void .ssp-desc { color: #4a5474; }
.ssp-item.lv-void .imp-row.minus.hit { background: rgba(122, 184, 255, .05); }
@media (max-width: 720px) {
  .imp-row { font-size: 11px; padding: 3px 6px; }
  .ssp-lv { font-size: 10px; padding: 1px 6px; }
}

/* ---------- 维度驱动因子 ---------- */
.dim-list { gap: 16px; }
.dim-unit { display: flex; flex-direction: column; gap: 5px; }
.dim-unit.ext .dim-code { color: var(--acc2); }
.dim-drivers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-left: 4px; }
.dim-drivers .drv {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; font-size: 11px; color: var(--sub);
}
.dim-drivers .drv i { font-style: normal; font-family: var(--mono); font-size: 10.5px; }
.dim-drivers .drv.wx i { color: var(--cyan); }
.dim-drivers .drv.ss i { color: var(--acc); }

/* ---------- 本年运势规划 ---------- */
.fy-head { display: flex; gap: 18px; align-items: center; }
.fy-gz {
  font-size: 36px; font-weight: 800; font-family: var(--mono); letter-spacing: 5px;
  background: linear-gradient(120deg, var(--gold), #e8556b); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: flex; flex-direction: column; line-height: 1.1; flex: 0 0 auto; text-align: center;
}
.fy-gz small { font-size: 10.5px; letter-spacing: 1px; color: var(--sub); -webkit-text-fill-color: var(--sub); margin-top: 2px; }
.fy-main { flex: 1; min-width: 0; }
.fy-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(240, 198, 116, .1); border: 1px solid rgba(240, 198, 116, .35);
  padding: 2px 12px; border-radius: 999px; letter-spacing: 2px;
}
.fy-meta { font-size: 13px; color: #c6cde6; margin-top: 7px; line-height: 1.7; }
.fy-meta b { color: var(--gold); }
.fy-hint {
  display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--sub); line-height: 1.65;
}
.fy-hint b { color: var(--gold); font-weight: 600; }
.fy-notes { font-size: 12px; color: var(--sub); margin-top: 7px; line-height: 1.75; }
.fy-score { flex: 0 0 96px; text-align: center; }
.fy-score-num { font-size: 36px; font-weight: 800; font-family: var(--mono); line-height: 1.1; }
.fy-score-bar { height: 6px; border-radius: 3px; background: #232a44; overflow: hidden; margin: 8px 0 5px; }
.fy-score-bar i { display: block; height: 100%; border-radius: 3px; transition: width 1s ease; background: var(--gold); }
.fy-score-label { font-size: 10.5px; color: #5a6488; letter-spacing: 1px; }
/* 出生卡：历法说明行（公历/农历口径提示） */
.cal-tip { font-size: 11px; color: #5a6488; margin: -4px 0 10px; letter-spacing: .3px; }
/* ---- 分析报告 / 建议策略 双栏 ---- */
.fy-report { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.fy-rblock { background: rgba(122, 162, 247, .05); border: 1px solid rgba(122, 162, 247, .22); border-radius: 12px; padding: 12px 14px; }
.fy-rblock-s { background: rgba(240, 198, 116, .05); border-color: rgba(240, 198, 116, .28); }
.fy-rt { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--acc); margin-bottom: 8px; }
.fy-rblock-s .fy-rt { color: var(--gold); }
.fy-rt-ic { font-size: 13px; }
.fy-rb { font-size: 12.5px; color: #c6cde6; line-height: 1.8; }
.fy-rb p { margin: 0 0 8px; }
.fy-rb p:last-child { margin-bottom: 0; }
.fy-rb b { color: var(--gold); }
/* ---- 流年卦象（易经）---- */
.fy-bagua { display: flex; gap: 16px; align-items: center; margin-top: 12px; border: 1px solid rgba(122, 162, 247, .25); border-radius: 12px; padding: 13px 15px; background: linear-gradient(135deg, rgba(122, 162, 247, .08), rgba(167, 139, 250, .04)); }
.bg-sym { font-size: 44px; line-height: 1; color: #7aa2f7; flex: 0 0 auto; text-shadow: 0 0 20px rgba(122, 162, 247, .5); }
.bg-main { flex: 1; min-width: 0; }
.bg-title { font-size: 11px; color: #5a6488; letter-spacing: 1px; margin-bottom: 4px; }
.bg-name { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.bg-name b { font-size: 15px; color: #c0caf5; letter-spacing: 1px; }
.bg-name span { font-size: 11px; color: var(--sub); }
.bg-quotes { margin-top: 7px; font-size: 12px; color: #9aa5ce; line-height: 1.75; }
.bg-quotes b { color: #7aa2f7; font-weight: 600; margin-right: 4px; }
.bg-plain { margin-top: 7px; font-size: 12.5px; color: #c6cde6; line-height: 1.7; }
.bg-zhi { margin-top: 7px; font-size: 12.5px; color: var(--gold); line-height: 1.7; }
.fy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.fy-block { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.fy-bt { font-size: 12px; font-weight: 700; color: var(--acc); letter-spacing: 2px; margin-bottom: 6px; }
.fy-bb { font-size: 12.5px; color: #c6cde6; line-height: 1.7; }
.fy-lucky {
  display: flex; flex-direction: column; gap: 9px; margin-top: 14px;
  background: rgba(167, 139, 250, .05); border: 1px solid rgba(167, 139, 250, .18);
  border-radius: 12px; padding: 12px 14px;
}
.fy-lrow { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.7; }
.fy-k { flex: 0 0 62px; color: var(--acc); font-weight: 600; }
.fy-v { color: #c6cde6; flex: 1; }
.fy-v b { color: var(--gold); }
.fy-cdot { display: inline-flex; align-items: center; gap: 5px; margin-right: 13px; white-space: nowrap; }
.fy-cdot i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255, 255, 255, .25); }
.fy-watch { margin-top: 14px; background: rgba(243, 139, 160, .06); border: 1px solid rgba(243, 139, 160, .25); border-radius: 12px; padding: 12px 14px; }
.fy-wt { font-size: 12px; font-weight: 700; color: var(--pink); letter-spacing: 2px; margin-bottom: 6px; }
.fy-ww { font-size: 12.5px; color: #e8c3cc; line-height: 1.75; }
.fy-ww b { color: var(--pink); }
.fy-foot { font-size: 11px; color: #5a6488; margin-top: 12px; line-height: 1.7; }

/* ---------- 人生大运规划 ---------- */
.dy-intro { font-size: 13px; color: #c6cde6; line-height: 1.8; margin-bottom: 14px; }
.dy-intro b { color: var(--gold); }
.dy-list { display: flex; flex-direction: column; gap: 12px; }
.dy-item { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.dy-item.current { border-left-color: var(--gold); background: linear-gradient(135deg, rgba(240, 198, 116, .06), var(--bg2) 60%); }
.dy-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dy-gz { font-size: 21px; font-weight: 800; font-family: var(--mono); letter-spacing: 3px; }
.dy-years { font-family: var(--mono); font-size: 12.5px; color: var(--sub); }
.dy-age { font-size: 11.5px; color: #5a6488; }
.dy-now { font-size: 10.5px; color: var(--gold); border: 1px solid rgba(240, 198, 116, .45); padding: 1px 9px; border-radius: 999px; letter-spacing: 1px; }
.dy-idx { font-size: 10.5px; color: var(--sub); border: 1px solid var(--line); padding: 1px 9px; border-radius: 999px; letter-spacing: 1px; }
.dy-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.dy-half { font-size: 12.5px; color: #c6cde6; line-height: 1.7; background: rgba(255, 255, 255, .02); border-radius: 9px; padding: 9px 11px; }
.dy-half .dy-h { display: block; font-size: 11px; color: var(--sub); margin-bottom: 3px; letter-spacing: .5px; }
.dy-half b { color: var(--gold); margin-right: 6px; }
/* 每半场的分析 / 策略细节 */
.dy-ana, .dy-str { margin-top: 7px; font-size: 11.5px; color: #9aa5ce; line-height: 1.75; }
.dy-ana i, .dy-str i {
  font-style: normal; display: inline-block; font-size: 10px; letter-spacing: 1px;
  padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px;
}
.dy-ana i { background: rgba(122, 162, 247, .14); color: #7aa2f7; }
.dy-str i { background: rgba(240, 198, 116, .14); color: var(--gold); }
.dy-str { color: #cdb98a; }
/* 每局大运的卦象徽标与卦象条 */
.dy-bg { font-size: 11px; color: #7aa2f7; border: 1px solid rgba(122, 162, 247, .35); border-radius: 999px; padding: 1px 9px; }
.dy-bagua {
  margin-top: 9px; font-size: 11.5px; color: #9aa5ce; line-height: 1.75;
  background: linear-gradient(135deg, rgba(122, 162, 247, .07), rgba(255, 255, 255, .01));
  border: 1px solid rgba(122, 162, 247, .2); border-radius: 9px; padding: 8px 11px;
}
.dy-bagua b { color: #c0caf5; }
.dy-bagua .dy-bg-zhi { color: var(--gold); }
.dy-mile { font-size: 12px; color: var(--sub); margin-top: 8px; }
.dy-keys-wrap { margin-top: 16px; }
.dy-keys-title { font-size: 12.5px; color: var(--sub); letter-spacing: 1px; margin-bottom: 9px; }
.dy-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.dy-key { display: inline-flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; }
.dy-key b { color: var(--txt); font-family: var(--mono); }
.dy-kgz { font-family: var(--mono); color: var(--sub); }
.dy-kage { font-size: 11px; color: #5a6488; }
.dy-ktag { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; }
.dy-ktag.t-变动 { color: var(--pink); border: 1px solid rgba(243, 139, 160, .4); }
.dy-ktag.t-桃花 { color: #f3b8c4; border: 1px solid rgba(243, 139, 160, .4); background: rgba(243, 139, 160, .08); }
.dy-ktag.t-顺年 { color: var(--green); border: 1px solid rgba(110, 231, 160, .4); }

/* ---------- 64 型后缀选择分隔 ---------- */
.mp-sep { margin: 10px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mp-sep span { font-size: 11px; color: #5a6488; letter-spacing: .5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .report-hero { flex-direction: column-reverse; text-align: center; }
  .hero-chips { align-items: center; }
  .chip-row { justify-content: center; }
  .hero-line { max-width: none; align-items: center; }
  .form-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-type { font-size: 42px; }
  .pillars { flex-wrap: wrap; }
  .pz-lg { min-width: 72px; }
  .tug-zone { left: 0; right: 0; }
  .dim-head { flex-wrap: wrap; gap: 6px 10px; }
  .report-hero .hero-left { flex-direction: column; gap: 14px; }
  .type-avatar { width: 94px; height: 94px; flex: 0 0 94px; }
  .ta-face { font-size: 41px; }
  .ta-face .ta-img { border-radius: 24px; }
  .ta-role { font-size: 9.5px; padding: 2px 8px; }
  .ta-aura { width: 23px; height: 23px; font-size: 11px; }
  .s64-p { margin-left: 0; }
  .dim-drivers { padding-left: 0; }
  .fy-head { flex-direction: column; text-align: center; }
  .fy-gz { flex-direction: row; align-items: baseline; gap: 8px; }
  .fy-score { flex: 0 0 auto; }
  .fy-report { grid-template-columns: 1fr; }
  .fy-bagua { flex-direction: column; text-align: center; }
  .fy-grid { grid-template-columns: 1fr; }
  .dy-halves { grid-template-columns: 1fr; }
}

/* ============ 满意度评价 + PDF 导出 ============ */
.fb-card {
  background:
    radial-gradient(500px 200px at 85% 0%, rgba(240, 198, 116, .07), transparent 70%),
    radial-gradient(500px 220px at 10% 100%, rgba(167, 139, 250, .08), transparent 70%),
    linear-gradient(160deg, #141a30 0%, #1a2040 100%);
}
.fb-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fb-stars { display: inline-flex; gap: 6px; }
.fb-star {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: #4a5578; font-size: 22px; line-height: 1;
  cursor: pointer; font-family: inherit; padding: 0;
  transition: all .18s;
}
.fb-star:hover { transform: translateY(-3px) scale(1.08); border-color: var(--gold); color: var(--gold);
  box-shadow: 0 6px 18px rgba(240, 198, 116, .25); }
/* 悬停预览：同级及之前的星星一起点亮 */
.fb-star.lit, .fb-stars:hover .fb-star.lit { color: var(--gold); }
.fb-star.on {
  background: linear-gradient(135deg, #f0c674, #e8a94f); border-color: transparent; color: #221a08;
  box-shadow: 0 6px 20px rgba(240, 198, 116, .4);
}
.fb-label { font-size: 14px; color: var(--sub); min-width: 130px; }
.fb-label b { color: var(--gold); font-weight: 700; font-size: 15px; }
.fb-thanks {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(240, 198, 116, .08); border: 1px solid rgba(240, 198, 116, .28);
  font-size: 13px; color: #eddbac; line-height: 1.8;
  animation: fadeUp .4s ease both;
}
.fb-thanks b { color: var(--gold); }
.fb-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.fb-export-btn { padding: 12px 26px; font-size: 15px; letter-spacing: 1px; }
.fb-export-btn:disabled { opacity: .5; cursor: wait; }
.fb-tip { font-size: 12px; color: #5a6488; }
.fb-tip.busy { color: var(--acc); }
@media (max-width: 720px) {
  .fb-star { width: 40px; height: 40px; font-size: 20px; }
  .fb-label { min-width: 100%; }
  .fb-actions { flex-direction: column; align-items: stretch; }
  .fb-export-btn { width: 100%; }
  .fb-tip { text-align: center; }
}

/* ---------- PDF 导出模式：规避 html2canvas 不支持的 CSS 特效 ----------
 * html2canvas 不支持 background-clip:text（渐变文字会消失）与 conic-gradient（置信环会错乱）
 * 拍摄瞬间挂上 .pdf-mode，用纯色/线性渐变降级，拍完即摘 */
.pdf-mode .hero-type,
.pdf-mode .fy-gz {
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #c9a86a !important;
}
.pdf-mode .hero-type { color: #b9a0f5 !important; }
.pdf-mode .type-suffix { -webkit-text-fill-color: #c9a86a !important; }
.pdf-mode .conf-ring { background: linear-gradient(135deg, #7c6cf0, #a78bfa) !important; }
.pdf-mode .fb-card, .pdf-mode .report-actions, .pdf-mode .report-footer { display: none !important; }
.pdf-mode .edit-banner { display: none !important; }
.pdf-mode .ta-spark { display: none !important; }
.pdf-mode [hidden] { display: none !important; }

/* ================= 报告文案编辑模式 ================= */
/* 置顶横幅：编辑中常驻提醒 */
.edit-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  text-align: center; font-size: 12px; padding: 8px 12px;
  background: rgba(30, 26, 58, .92);
  border-bottom: 1px solid rgba(167, 139, 250, .35);
  color: #cfcaef; letter-spacing: .4px; backdrop-filter: blur(6px);
}
/* 可编辑元素：默认去掉浏览器自带轮廓 */
[contenteditable="true"] { outline: none; }
/* 悬停提示「这块可以点」 */
.report.edit-mode [contenteditable="true"]:hover {
  outline: 1px dashed rgba(167, 139, 250, .55);
  outline-offset: 2px; cursor: text;
  background: rgba(167, 139, 250, .06); border-radius: 3px;
}
/* 聚焦编辑中 */
.report.edit-mode [contenteditable="true"]:focus {
  outline: 1px solid var(--acc); outline-offset: 2px;
  background: rgba(167, 139, 250, .09); border-radius: 3px;
}
/* 已自定义过的文案：留个小标记，好认出哪些是改过的 */
.report [data-ek].edited-mark { position: relative; }
.report [data-ek].edited-mark::after {
  content: '✎'; position: absolute; top: -7px; right: -4px;
  font-size: 9px; color: rgba(167, 139, 250, .8);
  pointer-events: none;
}
/* 编辑开关激活态 */
#btnEdit.editing {
  background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(124, 108, 240, .18));
  border-color: rgba(167, 139, 250, .6); color: #d6cbf8;
}
@media (max-width: 720px) {
  .report-actions { flex-wrap: wrap; gap: 8px; }
  .edit-banner { font-size: 11px; padding: 6px 10px; }
}