:root {
  --bg: #f4f2ec; --surface: #ffffff; --surface-2: #faf8f3; --ink: #1c1e23; --muted: #6a6e77; --line: #e2ddd2;
  --accent: #24486e; --accent-ink: #ffffff; --warn: #a15c07; --danger: #b3261e; --ok: #1f7a4d;
  --wood: #2f8a57; --fire: #cf4f36; --earth: #b07d23; --metal: #6f7b8c; --water: #2c68b8;
  --wood-bg: #e6f3eb; --fire-bg: #fbe9e5; --earth-bg: #f7efdd; --metal-bg: #eceff3; --water-bg: #e5eefa;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #171a20; --surface-2: #1c2027; --ink: #e9e6df; --muted: #9aa0aa; --line: #2a2f38;
    --accent: #8db7e6; --accent-ink: #0f1115; --warn: #e2a14a; --danger: #ff8a80; --ok: #6fd3a0;
    --wood: #5fc48c; --fire: #f07c62; --earth: #e2b35c; --metal: #b4bfcd; --water: #6ea6f0;
    --wood-bg: #16271e; --fire-bg: #2c1915; --earth-bg: #2a2214; --metal-bg: #1f242c; --water-bg: #142033;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a20; --surface-2: #1c2027; --ink: #e9e6df; --muted: #9aa0aa; --line: #2a2f38;
  --accent: #8db7e6; --accent-ink: #0f1115; --wood: #5fc48c; --fire: #f07c62; --earth: #e2b35c; --metal: #b4bfcd; --water: #6ea6f0;
  --wood-bg: #16271e; --fire-bg: #2c1915; --earth-bg: #2a2214; --metal-bg: #1f242c; --water-bg: #142033;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: .01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; margin-top: 1.4em; }
p { margin: .5em 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.warn { color: var(--warn); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; }
.brand-tile { width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); position: relative; display: grid; place-items: center; font-family: var(--serif); }
.brand-tile small { position: absolute; top: 2px; left: 4px; font-size: 9px; font-family: var(--mono); }
.brand-tile b { font-size: 20px; }
.brand-name { font-weight: 700; display: flex; flex-direction: column; line-height: 1.1; }
.brand-name em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--muted); letter-spacing: .2em; text-transform: uppercase; }
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }

main { max-width: 1080px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 32px) 48px; }
main.wide { max-width: 1320px; }
.foot { border-top: 1px solid var(--line); padding: 20px clamp(16px, 4vw, 40px); font-size: .85rem; color: var(--muted); text-align: center; }

.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: .6em 1.3em; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.small { padding: .35em .9em; font-size: .9rem; }

.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow); margin-bottom: 20px; }
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.alert { background: var(--fire-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); padding: .7em 1em; border-radius: 8px; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=date], .form input[type=time] { font: inherit; font-weight: 400; padding: .6em .8em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); width: 100%; }
.form input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
.radio-row { border: 0; padding: 0; margin: 0; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.radio-row legend { font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.radio-row label { display: flex; gap: 6px; font-weight: 400; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.place { position: relative; }
.suggest { position: absolute; top: 74px; left: 0; right: 0; z-index: 5; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.suggest li { padding: .45em .7em; border-radius: 6px; cursor: pointer; font-weight: 400; }
.suggest li:hover, .suggest li.active { background: var(--surface-2); }
.suggest li small { color: var(--muted); margin-left: 6px; }

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 24px 0 32px; }
.eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .08em; font-size: .85rem; margin: 0 0 .5em; }
.lead { font-size: 1.05rem; color: var(--muted); }
.cta { margin-top: 1.2em; display: flex; gap: 10px; flex-wrap: wrap; }
.tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.three > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

.tile { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.tile .z { position: absolute; top: 4px; left: 6px; font: 600 .7rem var(--mono); color: var(--muted); }
.tile b { font: 700 clamp(1.2rem, 3vw, 1.8rem) var(--sans); letter-spacing: -.02em; }
.tile span { font-size: .75rem; color: var(--muted); }
.tile i { position: absolute; top: 4px; right: 6px; font-style: normal; font-family: var(--serif); font-size: .8rem; }
.tile.big { width: 132px; flex: none; }
.tile.big b { font-size: 3rem; }
.phase-木 { border-color: var(--wood); background: var(--wood-bg); } .phase-木 b, .phase-木 i { color: var(--wood); }
.phase-火 { border-color: var(--fire); background: var(--fire-bg); } .phase-火 b, .phase-火 i { color: var(--fire); }
.phase-土 { border-color: var(--earth); background: var(--earth-bg); } .phase-土 b, .phase-土 i { color: var(--earth); }
.phase-金 { border-color: var(--metal); background: var(--metal-bg); } .phase-金 b, .phase-金 i { color: var(--metal); }
.phase-水 { border-color: var(--water); background: var(--water-bg); } .phase-水 b, .phase-水 i { color: var(--water); }

.report-list { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 8px; }
.report-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.report-item a { display: grid; color: var(--ink); text-decoration: none; }
.report-item a span { color: var(--muted); font-size: .88rem; }
.report-item time { color: var(--muted); font-size: .8rem; font-family: var(--mono); }
.pill { font-size: .78rem; padding: .15em .7em; border-radius: 999px; background: var(--metal-bg); color: var(--metal); white-space: nowrap; }
.pill.done, .report-item.saved .pill { background: var(--wood-bg); color: var(--wood); }
.pill.failed { background: var(--fire-bg); color: var(--fire); }

.steps { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: 8px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px 120px 1fr; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); counter-increment: s; }
.steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--line); color: var(--ink); }
.steps li.active { color: var(--ink); } .steps li.active::before { background: var(--earth); color: #fff; animation: pulse 1s infinite alternate; }
.steps li.done { color: var(--ink); } .steps li.done::before { content: "✓"; background: var(--ok); color: #fff; }
.steps li span { font-size: .85rem; }
@keyframes pulse { to { opacity: .45; } }

/* report */
.report-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
.toc nav { position: sticky; top: 84px; display: grid; gap: 2px; font-size: .9rem; }
.toc a { color: var(--muted); padding: 4px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.report-head { margin-bottom: 18px; }
.report-head .sub { color: var(--muted); }
.levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.levels span { font-size: .8rem; padding: .3em .8em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.levels em { font-style: normal; font-weight: 700; margin-right: .4em; color: var(--accent); }
.levels .mock { border-color: var(--warn); }
.levels .mock em { color: var(--warn); }
.save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line); }
.save-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.save-form input { font: inherit; padding: .45em .8em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); min-width: 220px; }
.saved-mark { color: var(--ok); font-weight: 600; }
.lead-panel { border-left: 4px solid var(--accent); font-size: 1.02rem; }
.panel h2 { padding-bottom: .4em; border-bottom: 1px solid var(--line); }

.pillars { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 14px; }
.pillars th, .pillars td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.pillars thead th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.pillars tbody th { color: var(--muted); font-weight: 500; font-size: .85rem; text-align: left; width: 56px; }
.pillars tr.gz td b { font: 700 1.9rem var(--serif); }
.pillars tr.gz td small { display: block; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.pillars td.ph-wood b { color: var(--wood); } .pillars td.ph-fire b { color: var(--fire); } .pillars td.ph-earth b { color: var(--earth); } .pillars td.ph-metal b { color: var(--metal); } .pillars td.ph-water b { color: var(--water); }
.pillars sub { font-size: .7em; color: var(--muted); }
.ph-text-wood { color: var(--wood); } .ph-text-fire { color: var(--fire); } .ph-text-earth { color: var(--earth); } .ph-text-metal { color: var(--metal); } .ph-text-water { color: var(--water); }
.time-chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.time-chain div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: grid; }
.time-chain em { font-style: normal; font-size: .75rem; color: var(--muted); }
.time-chain b { font-family: var(--mono); font-size: .88rem; font-weight: 600; }
.notes { margin: 6px 0; padding-left: 1.2em; color: var(--warn); font-size: .9rem; }
.dayun-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 10px; }
.dayun-strip div { text-align: center; background: var(--surface-2); border-radius: 8px; padding: 6px; display: grid; }
.dayun-strip b { font: 700 1.1rem var(--serif); }
.dayun-strip span, .dayun-strip small { font-size: .75rem; color: var(--muted); }

.core-card { display: flex; gap: 20px; align-items: flex-start; }
.core-text { flex: 1; min-width: 0; }
.core-text h3 { margin-top: 0; }
.core-text h3 small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: 4px; }
.layer-block { margin: 10px 0; }
.layer-block ul { margin: 4px 0; padding-left: 1.2em; }
.layer { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1em .6em; border-radius: 4px; margin-right: 6px; vertical-align: 1px; letter-spacing: .04em; }
.l-fact { background: var(--water-bg); color: var(--water); }
.l-analogy { background: color-mix(in srgb, #7b4bb7 14%, transparent); color: #7b4bb7; }
.l-classic { background: var(--earth-bg); color: var(--earth); }
.l-rule { background: var(--metal-bg); color: var(--metal); }
.l-mock { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

blockquote.classic { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--earth); background: var(--surface-2); border-radius: 0 8px 8px 0; }
blockquote.classic p { font-family: var(--serif); margin: 0 0 4px; font-size: 1.02rem; }
.cite { font-size: .8rem; }
.classic-text { font-family: var(--serif); margin: 4px 0; }
.pid { font-size: .72rem; color: var(--muted); }

.phase-bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 8px 0 10px; }
.phase-bar .seg { display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.seg.ph-wood { background: var(--wood); } .seg.ph-fire { background: var(--fire); } .seg.ph-earth { background: var(--earth); } .seg.ph-metal { background: var(--metal); } .seg.ph-water { background: var(--water); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: baseline; gap: 4px; padding: .2em .65em; border-radius: 999px; font-size: .82rem; border: 1px solid var(--line); background: var(--surface-2); }
.chip b { font-family: var(--sans); }
.chip em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: .75rem; }
.chip.mini { padding: 0 .5em; font-weight: 700; }
.chip.ph-wood { border-color: var(--wood); color: var(--wood); } .chip.ph-fire { border-color: var(--fire); color: var(--fire); } .chip.ph-earth { border-color: var(--earth); color: var(--earth); } .chip.ph-metal { border-color: var(--metal); color: var(--metal); } .chip.ph-water { border-color: var(--water); color: var(--water); }
.signature b { font-family: var(--mono); font-size: 1.15rem; letter-spacing: .05em; }

.viz { width: 100%; height: auto; display: block; margin: 8px 0; }
.viz text { fill: var(--ink); font-family: var(--sans); }
.viz .t-z { font: 600 11px var(--mono); fill: var(--muted); }
.viz .t-sym { font-size: 34px; font-weight: 700; }
.viz .t-node { font-size: 13px; font-weight: 700; }
.viz .t-small { font-size: 11px; fill: var(--muted); }
.viz .t-tiny { font-size: 10px; fill: var(--muted); }
.viz .axis { stroke: var(--line); stroke-width: 1.5; }
.viz .edge { stroke-linecap: round; opacity: .55; }
.viz .node { stroke-width: 2; }
.viz .core-tile { stroke-width: 2.5; }
.ph-wood.edge, .ph-wood.node, .ph-wood.core-tile { stroke: var(--wood); } .ph-wood.node, .ph-wood.core-tile { fill: var(--wood-bg); }
.ph-fire.edge, .ph-fire.node, .ph-fire.core-tile { stroke: var(--fire); } .ph-fire.node, .ph-fire.core-tile { fill: var(--fire-bg); }
.ph-earth.edge, .ph-earth.node, .ph-earth.core-tile { stroke: var(--earth); } .ph-earth.node, .ph-earth.core-tile { fill: var(--earth-bg); }
.ph-metal.edge, .ph-metal.node, .ph-metal.core-tile { stroke: var(--metal); } .ph-metal.node, .ph-metal.core-tile { fill: var(--metal-bg); }
.ph-water.edge, .ph-water.node, .ph-water.core-tile { stroke: var(--water); } .ph-water.node, .ph-water.core-tile { fill: var(--water-bg); }
.viz .bar.pos { fill: var(--wood); } .viz .bar.neg { fill: var(--fire); } .viz .bar.neu { fill: var(--metal); }
.viz .bar.disputed { opacity: .55; }

.table-scroll { overflow-x: auto; }
table.matrix, table.stages, table.claims, table.cards { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.matrix th, table.matrix td, table.stages th, table.stages td, table.claims th, table.claims td, table.cards th, table.cards td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.matrix thead th, table.stages thead th, table.claims thead th, table.cards thead th { font-size: .8rem; color: var(--muted); font-weight: 600; }
table.matrix tbody th { font: 700 1.2rem var(--serif); white-space: nowrap; }
table.matrix tbody th small { font: 500 .72rem var(--mono); color: var(--muted); margin-left: 6px; }
table.matrix tbody th.ph-wood { color: var(--wood); } table.matrix tbody th.ph-fire { color: var(--fire); } table.matrix tbody th.ph-earth { color: var(--earth); } table.matrix tbody th.ph-metal { color: var(--metal); } table.matrix tbody th.ph-water { color: var(--water); }
.stance { display: inline-block; font-size: .78rem; font-weight: 700; padding: .05em .5em; border-radius: 4px; margin: 1px 3px 1px 0; }
.stance.pos { background: var(--wood-bg); color: var(--wood); } .stance.neg { background: var(--fire-bg); color: var(--fire); } .stance.neu { background: var(--metal-bg); color: var(--metal); }
.status { display: inline-block; font-size: .78rem; font-weight: 700; padding: .15em .7em; border-radius: 999px; white-space: nowrap; }
.status.s3 { background: var(--ok); color: #fff; } .status.s2 { background: var(--wood-bg); color: var(--wood); border: 1px solid var(--wood); }
.status.s1 { background: var(--metal-bg); color: var(--metal); } .status.sx { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border: 1px solid var(--warn); }
.status.s0 { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.trend { font-size: .8rem; font-weight: 700; } .trend.pos { color: var(--wood); } .trend.neg { color: var(--fire); } .trend.neu { color: var(--metal); }
.cond { display: inline-block; font-size: .72rem; font-weight: 700; padding: 0 .45em; border-radius: 4px; background: var(--metal-bg); color: var(--metal); }
.cond.yes { background: var(--wood-bg); color: var(--wood); } .cond.no { background: var(--fire-bg); color: var(--fire); } .cond.timed { background: var(--water-bg); color: var(--water); }
tr.ap-no td { opacity: .6; }
tr.off td { opacity: .55; }

details.ev-details, details.sensitive { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--surface-2); }
details > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
details.sensitive summary { color: var(--warn); }
details.sensitive.inline { display: inline-block; margin: 2px 4px; padding: 0 8px; border-radius: 8px; vertical-align: top; max-width: 100%; }
details.sensitive.inline > summary { padding: 2px 0; font-weight: 500; font-size: .9em; }
blockquote.classic details.sensitive { margin: 4px 0; }
ul.evidence { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; }
ul.evidence li { padding: 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
ul.evidence li.dup { opacity: .7; border-style: dashed; }
.ev-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; }
.tag { font-size: .72rem; padding: .05em .55em; border-radius: 4px; background: var(--metal-bg); color: var(--muted); }
.tag.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.tag.time { background: var(--water-bg); color: var(--water); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.topic-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); }
.topic-card h4 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.mock-panel { border-color: var(--warn); border-style: dashed; }
.ai-text p { font-size: .98rem; }
.method { margin-bottom: 14px; }
.cite-list { padding-left: 1.4em; display: grid; gap: 12px; }
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.source { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); }
.source ul { padding-left: 1.1em; margin: 4px 0; }
.disclaimers { margin-top: 14px; padding-left: 1.2em; color: var(--muted); font-size: .9rem; }

.pt-wrap { overflow-x: auto; }
.pt-grid { display: grid; grid-template-columns: repeat(18, minmax(38px, 1fr)); grid-template-rows: repeat(7, auto) 10px repeat(2, auto); gap: 3px; min-width: 760px; }
.pt-cell { position: relative; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 3px 3px; display: grid; justify-items: center; line-height: 1.1; min-height: 46px; }
.pt-cell small { justify-self: start; font: 9px var(--mono); color: var(--muted); }
.pt-cell b { font-size: .88rem; }
.pt-cell span { font-size: .62rem; color: var(--muted); }
.pt-cell i { position: absolute; top: 1px; right: 3px; font-style: normal; font-family: var(--serif); font-size: .62rem; }
.pt-cell.placeholder { opacity: .6; }
.pt-cell.cat-alkali { background: color-mix(in srgb, #e57373 10%, var(--surface-2)); } .pt-cell.cat-alkaline { background: color-mix(in srgb, #ffb74d 10%, var(--surface-2)); }
.pt-cell.cat-transition { background: color-mix(in srgb, #90a4ae 10%, var(--surface-2)); } .pt-cell.cat-post { background: color-mix(in srgb, #81c784 9%, var(--surface-2)); }
.pt-cell.cat-metalloid { background: color-mix(in srgb, #4db6ac 11%, var(--surface-2)); } .pt-cell.cat-nonmetal { background: color-mix(in srgb, #64b5f6 11%, var(--surface-2)); }
.pt-cell.cat-halogen { background: color-mix(in srgb, #ba68c8 11%, var(--surface-2)); } .pt-cell.cat-noble { background: color-mix(in srgb, #7986cb 12%, var(--surface-2)); }
.pt-cell.cat-lanthanide { background: color-mix(in srgb, #f06292 9%, var(--surface-2)); } .pt-cell.cat-actinide { background: color-mix(in srgb, #a1887f 10%, var(--surface-2)); }
.pt-cell.mapped { border-width: 2px; }
.pt-cell.mapped.ph-wood { border-color: var(--wood); } .pt-cell.mapped.ph-fire { border-color: var(--fire); } .pt-cell.mapped.ph-earth { border-color: var(--earth); } .pt-cell.mapped.ph-metal { border-color: var(--metal); } .pt-cell.mapped.ph-water { border-color: var(--water); }
.pt-cell.need { box-shadow: 0 0 0 2px var(--ok); } .pt-cell.excess { box-shadow: 0 0 0 2px var(--danger); }
.pt-cell.core { background: var(--accent); } .pt-cell.core b, .pt-cell.core span, .pt-cell.core small, .pt-cell.core i { color: var(--accent-ink); }
.legend { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--line); vertical-align: -2px; margin-right: 3px; }
.lg.core { background: var(--accent); border-color: var(--accent); } .lg.mapped { border-color: var(--earth); } .lg.need { box-shadow: 0 0 0 2px var(--ok); } .lg.excess { box-shadow: 0 0 0 2px var(--danger); }

@media (max-width: 960px) {
  .report-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .hero { grid-template-columns: 1fr; }
  .time-chain { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .three { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .core-card { flex-direction: column; }
  .report-item { grid-template-columns: 1fr auto; }
  .report-item time { display: none; }
  .steps li { grid-template-columns: 28px 1fr; }
  .steps li span { grid-column: 2; }
  .topbar nav { gap: 10px; font-size: .9rem; }
  .brand-name em { display: none; }
}
.viz.network { max-width: 600px; margin: 8px auto; }
.viz.timeline { max-width: 960px; }
.linklike.danger { color: var(--danger); }
.keyfacts { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kf { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kf em { font-style: normal; font-size: .75rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.kf-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.core-kf { flex-direction: row; align-items: center; gap: 12px; }
.core-kf .tile { width: 72px; flex: none; }
.core-kf > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.core-kf b { font-size: 1.1rem; }
.core-kf span { font-size: .85rem; color: var(--muted); }
.mono { font-family: var(--mono); }
@media (max-width: 1100px) { .keyfacts { grid-template-columns: repeat(2, 1fr); } .core-kf { grid-column: 1 / -1; } }
@media (max-width: 520px) { .keyfacts { grid-template-columns: 1fr; } }

.report, .panel { min-width: 0; }
.levels span { max-width: 100%; }

/* ---- v2 report ---- */
.report-layout.single { grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin: 0 auto; }
.version-banner { background: var(--earth-bg); border: 1px solid var(--earth); color: var(--ink); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: .92rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tabs { display: flex; gap: 6px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.tab { padding: 8px 16px; border-radius: 8px 8px 0 0; color: var(--muted); border: 1px solid transparent; border-bottom: 0; text-decoration: none !important; font-weight: 600; }
.tab.active { color: var(--accent); background: var(--surface); border-color: var(--line); margin-bottom: -1px; }
.diff-panel { border-left: 4px solid var(--warn); }
.diff-panel ul { margin: 6px 0; padding-left: 1.2em; }
.ef-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ef-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ef-col h4 { margin: 0 0 8px; font-size: .95rem; }
.ef-item { margin-bottom: 10px; }
.ef-item p { margin: 4px 0 0; }
.finding-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.finding { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.finding h4 { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.finding h4 small, .judgment h3 small { color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: 4px; }
.finding p { margin: 2px 0; }
.dir { font-size: .85rem; }
.dir-正面 { color: var(--wood); } .dir-负面 { color: var(--fire); } .dir-分歧 { color: var(--warn); } .dir-中性 { color: var(--metal); }
.ai-line { font-size: .92rem; border-left: 3px solid var(--accent); padding-left: 8px; }
.judgment { border-top: 1px solid var(--line); padding: 14px 0; }
.judgment h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jfields { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 8px 0; font-size: .9rem; }
.jfields dt { color: var(--muted); }
.jfields dd { margin: 0; }
.indep { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.indep span { font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.indep em { font-style: normal; color: var(--accent); font-weight: 700; margin-right: 6px; }
.notes-list { margin: 4px 0 8px; padding-left: 1.2em; }
.tag.ok { background: var(--wood-bg); color: var(--wood); }
.tag.risk { background: color-mix(in srgb, #7b4bb7 12%, transparent); color: #7b4bb7; }
.l-real { background: var(--wood-bg); color: var(--wood); }
.levels .real { border-color: var(--wood); } .levels .real em { color: var(--wood); }
.stage-list { display: grid; gap: 6px; margin-top: 8px; }
.stage-row { display: grid; grid-template-columns: 64px 180px 90px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.stage-row b { font-family: var(--serif); font-size: 1.05rem; }
.howto ul { padding-left: 1.2em; }
@media (max-width: 760px) {
  .ef-grid { grid-template-columns: 1fr; }
  .stage-row { grid-template-columns: 56px 1fr; }
  .stage-row .small { grid-column: 1 / -1; }
  .jfields { grid-template-columns: 1fr; }
}

/* ---------- ELEMENT-03：紫微斗数、七政四余、跨体系比较 ---------- */
.fam { color: var(--muted); }
.rel { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); }
.rel-ok { background: var(--wood-bg); color: var(--wood); border-color: transparent; }
.rel-ok2 { background: var(--water-bg); color: var(--water); border-color: transparent; }
.rel-warn { background: var(--fire-bg); color: var(--fire); border-color: transparent; }
.rel-muted { color: var(--muted); }
.rel-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
table.cross td { vertical-align: top; min-width: 120px; }
.claims-list { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 8px; }
.claims-list li { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; }
.cap { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface-2); font-size: .88rem; }
.cap ul { margin: 6px 0 0; padding-left: 18px; }
.cap-done b { color: var(--ok); } .cap-rule b { color: var(--water); } .cap-no b { color: var(--warn); }
dl.cfg { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .86rem; margin: 8px 0 12px; }
dl.cfg dt { color: var(--muted); } dl.cfg dd { margin: 0; }
.zw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(110px, auto); gap: 4px; margin: 10px 0 16px; }
.zw-cell { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); font-size: .86rem; overflow-wrap: anywhere; }
.zw-cell.ming { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.zw-head { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; }
.zw-major { display: inline-block; margin-right: 6px; font-weight: 700; color: var(--accent); }
.zw-major small { font-weight: 400; color: var(--muted); margin-left: 1px; }
.zw-major em { font-style: normal; font-size: .75rem; color: var(--fire); margin-left: 2px; }
.zw-center { grid-column: 2 / span 2; grid-row: 2 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; padding: 8px; }
table.qz-bodies tr.off td { opacity: .6; }
@media (max-width: 760px) {
  .cap-grid { grid-template-columns: 1fr; }
  .zw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zw-center { grid-column: 1 / -1; grid-row: auto; order: -1; }
}

/* ---------- ELEMENT-04：首页、表单、个人中心 ---------- */
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.25; margin: .2em 0 .5em; letter-spacing: -.01em; }
.hero-visual { display: grid; gap: 8px; }
.systems-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 28px; }
.sys-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); position: relative; }
.sys-card h3 { margin: .4em 0 .3em; }
.sys-card p { margin: .3em 0; color: var(--muted); font-size: .95rem; }
.sys-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-family: var(--serif); font-size: 1.2rem; }
.sys-num { color: var(--ink) !important; }
.sys-num b { font-size: 1.35rem; color: var(--accent); }
.strip-note { grid-column: 1 / -1; margin: 0; text-align: center; }
.report-preview h2, .principles h2 { margin: 1.2em 0 .6em; }
.preview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.preview-grid > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.preview-grid h4 { margin: .6em 0 .3em; }
.preview-grid p { margin: 0; font-size: .9rem; color: var(--muted); }
.pv-icon { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; font-weight: 700; font-family: var(--serif); }
.pv-el { background: var(--metal-bg); color: var(--metal); }
.pv-sys { background: var(--water-bg); color: var(--water); }
.pv-diff { background: var(--fire-bg); color: var(--fire); }
.pv-stage { background: var(--earth-bg); color: var(--earth); }
.pv-src { background: var(--wood-bg); color: var(--wood); }
.principles ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.principles li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: .95rem; }
.steps-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 8px; counter-reset: s; }
.steps-flow > div { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.steps-flow b { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.center-cta { text-align: center; margin: 18px 0 8px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form select { font: inherit; font-weight: 400; padding: .55em .6em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); width: 100%; }
.form .check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; font-size: .9rem; margin-top: 4px; }
.form .check-line { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.form .hint { margin: -6px 0 0; }
.form legend small { font-weight: 400; color: var(--muted); }
.btn.wide { width: 100%; padding: .8em 1.3em; font-size: 1.05rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.danger { background: var(--danger); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.inline-form { display: inline; }
.notice { background: var(--wood-bg); color: var(--wood); border: 1px solid color-mix(in srgb, var(--wood) 30%, transparent); padding: .7em 1em; border-radius: 8px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.account h2 { font-size: 1.05rem; margin: 1.4em 0 .5em; }
.danger-title { color: var(--danger); }
.danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius); padding: 14px; }
@media (max-width: 900px) {
  .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .systems-strip, .principles ul, .preview-grid, .steps-flow, .row3 { grid-template-columns: 1fr; }
}

/* ---------- ELEMENT-04：报告概要（导引、分部标签、元素族） ---------- */
.kicker { margin: 0 0 .2em; font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.guide { border-left: 4px solid var(--accent); }
.guide-points { margin: .4em 0 .8em; padding-left: 1.2em; }
.guide-points li { margin: .3em 0; }
.guide-ai { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.guide-ai p { margin: .5em 0 0; }
.notice-warn { background: var(--earth-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-left: 4px solid var(--warn); padding: .7em 1em; border-radius: 8px; margin: 10px 0; }
.el-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.el-families > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.el-families h4 { margin: 0 0 6px; font-size: .9rem; }
.claims-list li.claim-weak { opacity: .78; }
.save-bar .linklike { margin-right: 4px; }
@media (max-width: 640px) {
  .el-families { grid-template-columns: 1fr; }
}

/* ---------- 打印 / 存为 PDF ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --shadow: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .foot, .tabs, .save-bar form, .save-bar button, .save-bar a, .no-print { display: none !important; }
  .panel, .sys-card, .finding { box-shadow: none; break-inside: avoid-page; }
  .panel { border: 1px solid #ccc; }
  a { color: inherit; text-decoration: none; }
  a.cite::after { content: none; }
  .table-scroll { overflow: visible; }
  details > summary { list-style: none; font-weight: 600; }
}
.cal-lunar { display: grid; gap: 8px; }

/* ---------- ELEMENT-05：条款页、条款提示、反馈 ---------- */
.legal { max-width: 860px; margin: 0 auto; }
.legal h2 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.legal li { margin: .3em 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; }
.terms-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px; background: var(--earth-bg); border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font-size: .92rem; }
.foot-links a { color: inherit; }
.form .consent { align-items: flex-start; font-weight: 400; font-size: .9rem; line-height: 1.6; }
.form .consent input { margin-top: .35em; }
.feedback .check-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0; }
.feedback .check-grid legend, .feedback .radio-row legend { font-weight: 600; margin-bottom: 4px; }
.feedback textarea { font: inherit; width: 100%; padding: .55em .7em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.feedback h2 small { font-size: .8rem; font-weight: 400; color: var(--muted); }
@media print { .feedback, .terms-banner { display: none !important; } }