@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap");

.xjf-app {
	--xjf-color-primary-gold: #c9a866;
	--xjf-color-primary-gold-light: #f1ddb0;
	--xjf-color-background: #050b15;
	--xjf-color-background-deep: #02050b;
	--xjf-color-surface: rgba(11, 19, 33, 0.72);
	--xjf-color-surface-strong: rgba(12, 21, 38, 0.9);
	--xjf-color-paper: #f4efe5;
	--xjf-color-paper-soft: #fbf7ef;
	--xjf-color-border: rgba(201, 168, 102, 0.32);
	--xjf-color-border-soft: rgba(255, 255, 255, 0.12);
	--xjf-color-text: #f8f4ec;
	--xjf-color-text-muted: #aab5c5;
	--xjf-color-ink: #17202d;
	--xjf-color-success: #8fd2ad;
	--xjf-color-warning: #e7c276;
	--xjf-color-danger: #df8c86;
	--xjf-font-serif-tc: "Noto Serif TC", "Songti TC", serif;
	--xjf-font-serif-en: "Cormorant Garamond", Georgia, serif;
	--xjf-space-1: 4px;
	--xjf-space-2: 8px;
	--xjf-space-3: 12px;
	--xjf-space-4: 16px;
	--xjf-space-5: 24px;
	--xjf-space-6: 32px;
	--xjf-space-7: 48px;
	--xjf-space-8: 72px;
	--xjf-radius-sm: 8px;
	--xjf-radius-md: 14px;
	--xjf-radius-lg: 22px;
	--xjf-shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.28);
	--xjf-shadow-card: 0 20px 54px rgba(0, 0, 0, 0.34);
	background: var(--xjf-color-background);
	color: var(--xjf-color-text);
	font-family: var(--xjf-font-serif-tc);
	letter-spacing: 0;
	overflow: hidden;
}

.xjf-app * {
	box-sizing: border-box;
}

.xjf-app [hidden] {
	display: none !important;
}

.xjf-hero {
	align-items: center;
	background:
		radial-gradient(circle at 18% 26%, rgba(201, 168, 102, 0.16), transparent 28%),
		radial-gradient(circle at 80% 18%, rgba(87, 119, 170, 0.18), transparent 26%),
		linear-gradient(145deg, var(--xjf-color-background-deep) 0%, #071428 52%, #030711 100%);
	display: flex;
	isolation: isolate;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

.xjf-hero::before {
	background:
		linear-gradient(90deg, transparent 0 18%, rgba(201, 168, 102, 0.22) 18.2%, transparent 18.4% 100%),
		linear-gradient(0deg, transparent 0 70%, rgba(201, 168, 102, 0.16) 70.15%, transparent 70.3% 100%);
	content: "";
	inset: 0;
	opacity: 0.6;
	position: absolute;
	z-index: -3;
}

.xjf-hero__stars,
.xjf-hero__glow,
.xjf-hero__ink,
.xjf-astrolabe {
	inset: 0;
	position: absolute;
}

.xjf-hero__stars {
	animation: xjf-star-drift 18s ease-in-out infinite alternate;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.5px),
		radial-gradient(circle, rgba(241, 221, 176, 0.92) 0 1px, transparent 1.7px),
		radial-gradient(circle, rgba(180, 202, 238, 0.72) 0 1px, transparent 1.6px);
	background-position: 0 0, 58px 92px, 140px 30px;
	background-size: 140px 140px, 230px 230px, 310px 310px;
	opacity: 0.38;
	z-index: -4;
}

.xjf-hero__glow {
	animation: xjf-light-flow 10s ease-in-out infinite alternate;
	background:
		linear-gradient(115deg, transparent 5%, rgba(241, 221, 176, 0.08) 34%, transparent 55%),
		radial-gradient(circle at 52% 45%, rgba(201, 168, 102, 0.14), transparent 34%);
	filter: blur(2px);
	z-index: -3;
}

.xjf-hero__ink {
	background:
		radial-gradient(ellipse at 75% 70%, rgba(255, 255, 255, 0.08), transparent 34%),
		radial-gradient(ellipse at 18% 74%, rgba(255, 255, 255, 0.06), transparent 28%);
	filter: blur(18px);
	mix-blend-mode: screen;
	opacity: 0.48;
	z-index: -2;
}

.xjf-astrolabe {
	animation: xjf-parallax-float 16s ease-in-out infinite alternate;
	height: min(68vw, 760px);
	inset: auto 4vw 8vh auto;
	opacity: 0.42;
	width: min(68vw, 760px);
	z-index: -1;
}

.xjf-astrolabe::before,
.xjf-astrolabe::after,
.xjf-astrolabe span {
	border: 1px solid rgba(201, 168, 102, 0.34);
	border-radius: 50%;
	content: "";
	position: absolute;
}

.xjf-astrolabe::before {
	inset: 0;
}

.xjf-astrolabe::after {
	inset: 12%;
}

.xjf-astrolabe span:nth-child(1) {
	inset: 24%;
}

.xjf-astrolabe span:nth-child(2) {
	inset: 38%;
}

.xjf-astrolabe span:nth-child(3) {
	background:
		linear-gradient(90deg, transparent 49.8%, rgba(201, 168, 102, 0.3) 50%, transparent 50.2%),
		linear-gradient(0deg, transparent 49.8%, rgba(201, 168, 102, 0.24) 50%, transparent 50.2%);
	border: 0;
	inset: 5%;
}

.xjf-hero__inner {
	margin: 0 auto;
	max-width: 1180px;
	padding: 14vh 28px 12vh;
	position: relative;
	width: 100%;
}

.xjf-kicker,
.xjf-section-label,
.xjf-report-section__eyebrow {
	color: var(--xjf-color-primary-gold-light);
	font-family: var(--xjf-font-serif-en);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 var(--xjf-space-4);
	text-transform: uppercase;
}

.xjf-hero h1 {
	color: var(--xjf-color-text);
	font-size: clamp(64px, 10vw, 150px);
	font-weight: 600;
	line-height: 0.98;
	margin: 0;
	text-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

.xjf-hero__subtitle {
	color: var(--xjf-color-primary-gold-light);
	font-size: clamp(32px, 5.2vw, 76px);
	font-weight: 500;
	line-height: 1.1;
	margin: var(--xjf-space-3) 0 var(--xjf-space-6);
}

.xjf-hero__copy {
	color: #d8dfec;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.9;
	margin: 0 0 var(--xjf-space-7);
	max-width: 760px;
}

.xjf-button,
.xjf-lock button {
	align-items: center;
	background: linear-gradient(135deg, var(--xjf-color-primary-gold-light), var(--xjf-color-primary-gold));
	border: 1px solid rgba(255, 239, 203, 0.55);
	border-radius: var(--xjf-radius-sm);
	box-shadow: 0 14px 34px rgba(201, 168, 102, 0.18);
	color: #07101d;
	cursor: pointer;
	display: inline-flex;
	font: 700 15px/1 var(--xjf-font-serif-tc);
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	text-decoration: none;
	transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.xjf-button:hover,
.xjf-lock button:hover {
	box-shadow: 0 18px 44px rgba(201, 168, 102, 0.28);
	filter: brightness(1.04);
	transform: translateY(-2px);
}

.xjf-button--hero {
	min-height: 56px;
	padding-inline: 34px;
}

.xjf-button--ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--xjf-color-border);
	box-shadow: none;
	color: var(--xjf-color-primary-gold-light);
}

.xjf-button:disabled {
	cursor: not-allowed;
	opacity: 0.48;
	transform: none;
}

.xjf-experience {
	background:
		radial-gradient(circle at 78% 4%, rgba(201, 168, 102, 0.12), transparent 24%),
		linear-gradient(180deg, #050b15 0%, #081324 48%, #050b15 100%);
	padding: clamp(64px, 10vw, 120px) 24px;
	position: relative;
}

.xjf-section-intro,
.xjf-workspace {
	margin: 0 auto;
	max-width: 1180px;
}

.xjf-section-intro {
	margin-bottom: var(--xjf-space-7);
}

.xjf-section-intro h2 {
	color: var(--xjf-color-text);
	font-size: clamp(30px, 4vw, 56px);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 var(--xjf-space-4);
	max-width: 820px;
}

.xjf-section-intro p:not(.xjf-section-label) {
	color: var(--xjf-color-text-muted);
	font-size: 17px;
	line-height: 1.9;
	margin: 0;
	max-width: 720px;
}

.xjf-workspace {
	display: grid;
	gap: var(--xjf-space-6);
	grid-template-columns: 250px minmax(0, 1fr);
}

.xjf-steps {
	backdrop-filter: blur(22px);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	border: 1px solid var(--xjf-color-border);
	border-radius: var(--xjf-radius-lg);
	box-shadow: var(--xjf-shadow-soft);
	display: grid;
	gap: var(--xjf-space-2);
	padding: var(--xjf-space-5);
	position: sticky;
	top: 28px;
}

.xjf-step {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--xjf-radius-md);
	color: var(--xjf-color-text-muted);
	cursor: pointer;
	display: grid;
	gap: var(--xjf-space-1);
	padding: 16px 14px;
	position: relative;
	text-align: left;
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.xjf-step:not(:last-child)::after {
	background: linear-gradient(180deg, rgba(201, 168, 102, 0.4), transparent);
	bottom: -10px;
	content: "";
	height: 12px;
	left: 24px;
	position: absolute;
	width: 1px;
}

.xjf-step span {
	color: var(--xjf-color-primary-gold);
	font-family: var(--xjf-font-serif-en);
	font-size: 24px;
	line-height: 1;
}

.xjf-step strong {
	font-size: 15px;
	font-weight: 600;
}

.xjf-step:hover,
.xjf-step.is-active {
	background: rgba(201, 168, 102, 0.09);
	border-color: rgba(201, 168, 102, 0.4);
	color: var(--xjf-color-text);
	transform: translateX(3px);
}

.xjf-form {
	backdrop-filter: blur(26px);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
		var(--xjf-color-surface);
	border: 1px solid var(--xjf-color-border);
	border-radius: var(--xjf-radius-lg);
	box-shadow: var(--xjf-shadow-card);
	min-height: 580px;
	overflow: hidden;
	padding: clamp(24px, 4vw, 44px);
}

.xjf-form__page {
	display: none;
}

.xjf-form__page.is-active {
	animation: xjf-fade-up 420ms ease both;
	display: block;
}

.xjf-card-head {
	margin-bottom: var(--xjf-space-6);
}

.xjf-card-head h3 {
	color: var(--xjf-color-text);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.xjf-card-head p:not(.xjf-section-label) {
	color: var(--xjf-color-text-muted);
	line-height: 1.9;
	margin: var(--xjf-space-3) 0 0;
}

.xjf-grid {
	display: grid;
	gap: var(--xjf-space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-grid__wide {
	grid-column: 1 / -1;
}

.xjf-app label {
	color: var(--xjf-color-text);
	display: block;
	font-size: 15px;
}

.xjf-app label span {
	display: block;
	font-weight: 600;
	margin-bottom: var(--xjf-space-2);
}

.xjf-app input,
.xjf-app select,
.xjf-app textarea {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--xjf-color-border-soft);
	border-radius: var(--xjf-radius-sm);
	color: var(--xjf-color-text);
	font: 500 16px/1.5 var(--xjf-font-serif-tc);
	min-height: 52px;
	padding: 13px 15px;
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
	width: 100%;
}

.xjf-app textarea {
	line-height: 1.8;
	resize: vertical;
}

.xjf-app select option {
	color: #111827;
}

.xjf-app input::placeholder,
.xjf-app textarea::placeholder {
	color: rgba(248, 244, 236, 0.46);
}

.xjf-app input:focus,
.xjf-app select:focus,
.xjf-app textarea:focus {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--xjf-color-primary-gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 102, 0.16);
	outline: none;
}

.xjf-question-list {
	display: grid;
	gap: var(--xjf-space-4);
}

.xjf-question-card {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(201, 168, 102, 0.22);
	border-radius: var(--xjf-radius-md);
	padding: var(--xjf-space-5);
	transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}

.xjf-question-card:hover {
	background: rgba(255, 255, 255, 0.065);
	border-color: rgba(201, 168, 102, 0.42);
	transform: translateY(-2px);
}

.xjf-question-card small {
	color: var(--xjf-color-text-muted);
	display: block;
	margin-top: var(--xjf-space-2);
	text-align: right;
}

.xjf-app textarea[readonly] {
	background: rgba(201, 168, 102, 0.08);
	border-color: rgba(201, 168, 102, 0.34);
	color: rgba(248, 244, 236, 0.78);
}

.xjf-question-confirm {
	margin-top: var(--xjf-space-3);
	width: 100%;
}

.xjf-question-status {
	color: var(--xjf-color-text-muted);
	display: block;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.02em;
	margin-top: var(--xjf-space-2);
}

.xjf-question-card.is-locked {
	background: rgba(201, 168, 102, 0.07);
	border-color: rgba(201, 168, 102, 0.46);
}

.xjf-confirm {
	display: grid;
	gap: var(--xjf-space-6);
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}

.xjf-confirm dl {
	border: 1px solid var(--xjf-color-border);
	border-radius: var(--xjf-radius-md);
	display: grid;
	grid-template-columns: 140px 1fr;
	margin: 0;
	overflow: hidden;
}

.xjf-confirm dt,
.xjf-confirm dd {
	border-bottom: 1px solid rgba(201, 168, 102, 0.18);
	margin: 0;
	padding: 13px 15px;
}

.xjf-confirm dt {
	background: rgba(201, 168, 102, 0.06);
	color: var(--xjf-color-primary-gold-light);
}

.xjf-confirm dd {
	color: #e8eef9;
}

.xjf-actions {
	align-items: center;
	display: flex;
	gap: var(--xjf-space-3);
	justify-content: flex-end;
	margin-top: var(--xjf-space-6);
}

.xjf-loading {
	align-items: center;
	display: grid;
	gap: var(--xjf-space-7);
	grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr);
	min-height: 500px;
}

.xjf-loading__sky {
	display: grid;
	place-items: center;
}

.xjf-loading__chart {
	animation: xjf-chart-rotate 18s linear infinite;
	aspect-ratio: 1;
	border: 1px solid rgba(201, 168, 102, 0.45);
	border-radius: 50%;
	position: relative;
	width: min(330px, 100%);
}

.xjf-loading__chart::before,
.xjf-loading__chart::after,
.xjf-loading__chart span {
	border: 1px solid rgba(201, 168, 102, 0.32);
	border-radius: 50%;
	content: "";
	position: absolute;
}

.xjf-loading__chart::before {
	inset: 12%;
}

.xjf-loading__chart::after {
	inset: 28%;
}

.xjf-loading__chart span:nth-child(1) {
	inset: 42%;
}

.xjf-loading__chart span:nth-child(2) {
	background:
		linear-gradient(90deg, transparent 49.6%, rgba(201, 168, 102, 0.42) 50%, transparent 50.4%),
		linear-gradient(0deg, transparent 49.6%, rgba(201, 168, 102, 0.36) 50%, transparent 50.4%);
	border: 0;
	inset: 8%;
}

.xjf-loading__chart span:nth-child(3) {
	background: radial-gradient(circle, rgba(241, 221, 176, 0.95) 0 4px, transparent 5px);
	border: 0;
	inset: 0;
}

.xjf-loading__steps {
	display: grid;
	gap: var(--xjf-space-3);
}

.xjf-loading__row {
	align-items: center;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--xjf-radius-md);
	display: grid;
	gap: var(--xjf-space-3);
	grid-template-columns: 18px 1fr auto;
	padding: 17px 18px;
}

.xjf-loading__row i {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.xjf-loading__row p,
.xjf-loading__row strong {
	margin: 0;
}

.xjf-loading__row strong {
	color: var(--xjf-color-text-muted);
	font-size: 13px;
}

.xjf-loading__row.is-active {
	border-color: rgba(201, 168, 102, 0.42);
}

.xjf-loading__row.is-active i {
	animation: xjf-pulse 1s ease-in-out infinite;
	background: var(--xjf-color-warning);
}

.xjf-loading__row.is-complete i {
	background: var(--xjf-color-success);
}

.xjf-loading__row.is-complete strong {
	color: var(--xjf-color-success);
}

.xjf-report {
	background: var(--xjf-color-paper);
	border: 1px solid rgba(201, 168, 102, 0.36);
	border-radius: var(--xjf-radius-lg);
	box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
	color: var(--xjf-color-ink);
	overflow: hidden;
}

.xjf-report__cover {
	background:
		linear-gradient(135deg, rgba(6, 13, 25, 0.96), rgba(13, 31, 55, 0.92)),
		radial-gradient(circle at 82% 22%, rgba(201, 168, 102, 0.18), transparent 30%);
	border-bottom: 1px solid rgba(201, 168, 102, 0.3);
	padding: clamp(28px, 5vw, 58px);
}

.xjf-report__cover h2 {
	color: var(--xjf-color-text);
	font-size: clamp(34px, 5vw, 72px);
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 var(--xjf-space-4);
}

.xjf-report__cover p:not(.xjf-section-label) {
	color: var(--xjf-color-text-muted);
	line-height: 1.9;
	margin: 0;
	max-width: 720px;
}

.xjf-report__body {
	background:
		linear-gradient(90deg, rgba(201, 168, 102, 0.08), transparent 18%, transparent 82%, rgba(201, 168, 102, 0.07)),
		var(--xjf-color-paper-soft);
	padding: clamp(28px, 5vw, 58px);
	position: relative;
}

.xjf-report-section {
	border-bottom: 1px solid rgba(23, 32, 45, 0.12);
	display: grid;
	gap: var(--xjf-space-3);
	padding: 0 0 var(--xjf-space-6);
}

.xjf-report-section + .xjf-report-section {
	padding-top: var(--xjf-space-6);
}

.xjf-report-section__eyebrow {
	color: #9b7737;
	margin-bottom: 0;
}

.xjf-report-section h3 {
	color: #1a2434;
	font-size: clamp(25px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.xjf-report-section p,
.xjf-report-section li {
	color: #374252;
	font-size: 16px;
	line-height: 2;
}

.xjf-report-section p,
.xjf-report-section ul {
	margin: 0;
}

.xjf-report-section ul {
	display: grid;
	gap: var(--xjf-space-2);
	padding-left: 1.2em;
}

.xjf-json-preview {
	background: rgba(23, 32, 45, 0.08);
	border: 1px solid rgba(23, 32, 45, 0.12);
	border-radius: var(--xjf-radius-sm);
	color: #263244;
	font-family: Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: 1.7;
	margin: 0;
	max-height: 360px;
	overflow: auto;
	padding: 16px;
	white-space: pre-wrap;
}

.xjf-pattern-layout {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
}

.xjf-pattern-hero,
.xjf-pattern-panel {
	background:
		linear-gradient(135deg, rgba(151, 114, 54, 0.11), rgba(255, 255, 255, 0.22)),
		rgba(255, 252, 246, 0.72);
	border: 1px solid rgba(151, 114, 54, 0.28);
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba(23, 32, 45, 0.08);
	padding: clamp(18px, 2.5vw, 28px);
}

.xjf-pattern-hero {
	align-content: center;
	display: grid;
	gap: 10px;
	justify-items: start;
	min-height: 220px;
	position: relative;
}

.xjf-pattern-hero::after {
	background: linear-gradient(90deg, rgba(151, 114, 54, 0.6), transparent);
	content: "";
	height: 1px;
	inset: auto 28px 28px 28px;
	position: absolute;
}

.xjf-pattern-hero span,
.xjf-pattern-panel h4 {
	color: #9b7737;
	font-family: var(--xjf-font-serif);
	font-size: 14px;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

.xjf-pattern-hero strong {
	color: #17202d;
	font-family: var(--xjf-font-serif);
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.15;
}

.xjf-pattern-hero small {
	color: #6b7280;
	font-size: 12px;
	letter-spacing: 0;
}

.xjf-pattern-panel {
	display: grid;
	gap: 14px;
}

.xjf-pattern-panel--summary {
	grid-column: 1 / -1;
}

.xjf-pattern-evidence {
	display: grid;
	gap: 0;
}

.xjf-pattern-evidence__row {
	align-items: baseline;
	border-top: 1px solid rgba(23, 32, 45, 0.11);
	display: grid;
	gap: 14px;
	grid-template-columns: 130px minmax(0, 1fr);
	padding: 12px 0;
}

.xjf-pattern-evidence__row span,
.xjf-pattern-muted b {
	color: #8a6a32;
	font-size: 13px;
	font-weight: 600;
}

.xjf-pattern-evidence__row strong {
	color: #17202d;
	font-size: 18px;
	font-weight: 600;
}

.xjf-pattern-tags,
.xjf-pattern-muted {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.xjf-pattern-tags span,
.xjf-pattern-muted span {
	background: rgba(151, 114, 54, 0.09);
	border: 1px solid rgba(151, 114, 54, 0.2);
	border-radius: 999px;
	color: #243044;
	font-size: 13px;
	padding: 5px 10px;
}

.xjf-pattern-muted {
	align-items: center;
	border-top: 1px solid rgba(23, 32, 45, 0.11);
	padding-top: 12px;
}

.xjf-bazi-rule-summary {
	background:
		linear-gradient(90deg, rgba(151, 114, 54, 0.1), transparent 22%, transparent 78%, rgba(151, 114, 54, 0.08)),
		rgba(255, 252, 246, 0.82);
	border: 1px solid rgba(151, 114, 54, 0.24);
	border-radius: 8px;
	display: grid;
	gap: 18px;
	padding: clamp(22px, 3vw, 34px);
}

.xjf-overview-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-overview-card {
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(151, 114, 54, 0.18);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	padding: 18px;
}

.xjf-overview-card h4 {
	color: #8a6a32;
	font-family: var(--xjf-font-serif);
	font-size: 18px;
	margin: 0;
}

.xjf-overview-card p {
	color: #263244;
	font-size: 15px;
	line-height: 1.9;
	margin: 0;
}

.xjf-rule-summary-copy {
	display: grid;
	gap: 12px;
}

.xjf-rule-summary-copy p {
	color: #243044;
	font-family: var(--xjf-font-serif);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 2.05;
	margin: 0;
}

.xjf-rule-summary-limitations {
	border-top: 1px solid rgba(23, 32, 45, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding-top: 14px;
}

.xjf-rule-summary-limitations strong {
	color: #8a6a32;
	font-size: 13px;
	margin-right: 4px;
}

.xjf-rule-summary-limitations span {
	background: rgba(23, 32, 45, 0.06);
	border: 1px solid rgba(23, 32, 45, 0.1);
	border-radius: 999px;
	color: #4a5568;
	font-size: 13px;
	padding: 5px 10px;
}

.xjf-ten-god-layout {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xjf-ten-god-panel {
	background: rgba(255, 252, 246, 0.78);
	border: 1px solid rgba(151, 114, 54, 0.24);
	border-radius: 8px;
	display: grid;
	gap: 14px;
	padding: 18px;
}

.xjf-ten-god-panel h4 {
	color: #8a6a32;
	font-family: var(--xjf-font-serif);
	font-size: 18px;
	margin: 0;
}

.xjf-ten-god-list {
	display: grid;
	gap: 10px;
}

.xjf-ten-god-row {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: 64px minmax(0, 1fr) 28px;
}

.xjf-ten-god-row span,
.xjf-ten-god-row strong {
	color: #263244;
	font-size: 14px;
}

.xjf-ten-god-row i {
	background: rgba(23, 32, 45, 0.08);
	border-radius: 999px;
	display: block;
	height: 7px;
	overflow: hidden;
}

.xjf-ten-god-row b {
	background: linear-gradient(90deg, #9b7737, #d7b56d);
	display: block;
	height: 100%;
	width: var(--xjf-ten-god-bar, 0%);
}

.xjf-shensha-grid {
	background: rgba(255, 252, 246, 0.76);
	border: 1px solid rgba(151, 114, 54, 0.28);
	border-radius: 8px;
	display: grid;
	grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(260px, 1.5fr);
	overflow: hidden;
}

.xjf-shensha-cell {
	align-items: center;
	background: rgba(255, 255, 255, 0.36);
	border-bottom: 1px solid rgba(151, 114, 54, 0.16);
	border-right: 1px solid rgba(151, 114, 54, 0.16);
	color: #263244;
	display: flex;
	font-size: 15px;
	line-height: 1.65;
	min-height: 54px;
	padding: 12px 14px;
}

.xjf-shensha-cell--head {
	background: rgba(151, 114, 54, 0.12);
	color: #7d5d2c;
	font-weight: 700;
}

.xjf-report-section.is-locked {
	max-height: 160px;
	overflow: hidden;
	pointer-events: none;
	position: relative;
	user-select: none;
}

.xjf-report-section.is-locked::after {
	background: linear-gradient(180deg, rgba(251, 247, 239, 0), rgba(251, 247, 239, 0.86) 58%, rgba(251, 247, 239, 1));
	content: "";
	inset: 34px 0 0;
	position: absolute;
}

.xjf-lock {
	align-items: center;
	background: linear-gradient(180deg, rgba(251, 247, 239, 0), rgba(251, 247, 239, 0.9) 34%, rgba(251, 247, 239, 1));
	display: flex;
	inset: auto 0 0;
	justify-content: center;
	min-height: 430px;
	padding: 120px 20px 36px;
	position: absolute;
	text-align: center;
}

.xjf-lock > div {
	backdrop-filter: blur(18px);
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(201, 168, 102, 0.46);
	border-radius: var(--xjf-radius-md);
	box-shadow: 0 24px 64px rgba(22, 20, 14, 0.15);
	padding: 30px;
	width: min(380px, 100%);
}

.xjf-lock p {
	color: #1b2534;
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 var(--xjf-space-2);
}

.xjf-lock strong {
	color: #967236;
	display: block;
	font-family: var(--xjf-font-serif-en);
	font-size: 42px;
	line-height: 1;
	margin-bottom: var(--xjf-space-5);
}

.xjf-lock button {
	width: 100%;
}

.xjf-reveal {
	opacity: 1;
	transform: translateY(0);
}

@keyframes xjf-star-drift {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-28px, 18px, 0);
	}
}

@keyframes xjf-light-flow {
	from {
		opacity: 0.55;
		transform: translateX(-2%);
	}
	to {
		opacity: 0.9;
		transform: translateX(3%);
	}
}

@keyframes xjf-parallax-float {
	from {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	to {
		transform: translate3d(-18px, 24px, 0) rotate(8deg);
	}
}

@keyframes xjf-chart-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes xjf-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes xjf-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(231, 194, 118, 0.36);
	}
	50% {
		box-shadow: 0 0 0 9px rgba(231, 194, 118, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xjf-app *,
	.xjf-app *::before,
	.xjf-app *::after {
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 1080px) {
	.xjf-workspace {
		grid-template-columns: 1fr;
	}

	.xjf-steps {
		grid-template-columns: repeat(4, 1fr);
		position: static;
	}

	.xjf-step:not(:last-child)::after {
		display: none;
	}

	.xjf-step:hover,
	.xjf-step.is-active {
		transform: translateY(-2px);
	}
}

@media (max-width: 820px) {
	.xjf-hero__inner {
		padding: 12vh 20px 10vh;
	}

	.xjf-astrolabe {
		height: 520px;
		inset: auto -180px 6vh auto;
		width: 520px;
	}

	.xjf-experience {
		padding-inline: 16px;
	}

	.xjf-form {
		padding: 24px;
	}

	.xjf-grid,
	.xjf-confirm,
	.xjf-loading {
		grid-template-columns: 1fr;
	}

	.xjf-loading {
		gap: var(--xjf-space-5);
		min-height: auto;
	}

	.xjf-loading__chart {
		width: min(260px, 74vw);
	}
}

@media (max-width: 640px) {
	.xjf-hero {
		min-height: 100svh;
	}

	.xjf-hero__copy {
		max-width: 330px;
	}

	.xjf-steps {
		gap: var(--xjf-space-2);
		grid-template-columns: repeat(2, 1fr);
		padding: var(--xjf-space-3);
	}

	.xjf-step {
		padding: 13px 12px;
	}

	.xjf-confirm dl {
		grid-template-columns: 108px minmax(0, 1fr);
	}

	.xjf-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.xjf-button {
		width: 100%;
	}

	.xjf-report__body {
		padding-bottom: 260px;
	}

	.xjf-pattern-layout {
		grid-template-columns: 1fr;
	}

	.xjf-pattern-hero {
		min-height: 180px;
	}

	.xjf-pattern-evidence__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.xjf-overview-grid,
	.xjf-ten-god-layout {
		grid-template-columns: 1fr;
	}

	.xjf-summary-highlights {
		grid-template-columns: 1fr;
	}

	.xjf-shensha-table {
		overflow-x: auto;
	}

	.xjf-shensha-grid {
		min-width: 720px;
	}

	.xjf-lock {
		min-height: 300px;
		padding-top: 88px;
	}
}

/* V1 report presentation */
.xjf-report {
	background:
		linear-gradient(120deg, rgba(184, 154, 92, 0.08), transparent 18%, transparent 82%, rgba(20, 32, 46, 0.06)),
		var(--xjf-color-paper);
	border-radius: 10px;
}

.xjf-report__cover {
	align-items: center;
	background:
		radial-gradient(circle at 50% 0%, rgba(201, 168, 102, 0.22), transparent 34%),
		linear-gradient(180deg, #f8f1e5 0%, #fbf7ef 100%);
	border-bottom: 1px solid rgba(151, 114, 54, 0.28);
	color: #1a2434;
	display: grid;
	gap: 14px;
	justify-items: center;
	min-height: 360px;
	padding: clamp(52px, 8vw, 96px) clamp(24px, 5vw, 72px);
	position: relative;
	text-align: center;
}

.xjf-report__cover::after,
.xjf-report-brand::after {
	background: linear-gradient(90deg, transparent, rgba(151, 114, 54, 0.68), transparent);
	content: "";
	display: block;
	height: 1px;
	width: min(320px, 70vw);
}

.xjf-report__cover h2 {
	color: #17202d;
	font-size: clamp(42px, 7vw, 92px);
	letter-spacing: 0;
	margin: 0;
}

.xjf-report__cover p:not(.xjf-section-label) {
	color: #967236;
	font-family: var(--xjf-font-serif-en), var(--xjf-font-serif-zh);
	font-size: clamp(22px, 3vw, 38px);
	margin: 0;
}

.xjf-report__cover .xjf-report__principle {
	color: #3b4658;
	font-family: var(--xjf-font-serif-zh);
	font-size: clamp(16px, 2vw, 22px);
	line-height: 1.8;
	max-width: 620px;
}

.xjf-report__body {
	background:
		radial-gradient(circle at 10% 12%, rgba(27, 37, 52, 0.05), transparent 24%),
		linear-gradient(90deg, rgba(151, 114, 54, 0.07), transparent 16%, transparent 84%, rgba(151, 114, 54, 0.06)),
		#fbf7ef;
	padding: clamp(32px, 5vw, 72px);
}

.xjf-report-section {
	border-bottom: 1px solid rgba(151, 114, 54, 0.24);
	gap: clamp(18px, 3vw, 30px);
	padding-bottom: clamp(36px, 6vw, 72px);
}

.xjf-report-section + .xjf-report-section {
	padding-top: clamp(36px, 6vw, 72px);
}

.xjf-report-section__eyebrow {
	color: #9b7737;
	font-family: var(--xjf-font-serif-en), var(--xjf-font-serif-zh);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.xjf-report-section h3 {
	align-items: center;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 46%),
		linear-gradient(135deg, #17202d 0%, #2b241c 100%);
	border: 1px solid rgba(215, 181, 109, 0.78);
	border-radius: 12px;
	box-shadow:
		0 16px 34px rgba(22, 20, 14, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 -1px 0 rgba(0, 0, 0, 0.24);
	color: #fbf1de;
	display: flex;
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 600;
	gap: 14px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	min-height: 54px;
	padding: 10px 20px;
	position: relative;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.xjf-report-section h3::before {
	background: linear-gradient(180deg, #f1d493, #9b7737);
	border-radius: 999px;
	box-shadow: 0 0 16px rgba(215, 181, 109, 0.34);
	content: "";
	display: block;
	height: 28px;
	width: 3px;
}

.xjf-report-brand {
	align-items: center;
	display: grid;
	gap: 16px;
	justify-items: center;
	margin: 0 auto clamp(12px, 3vw, 28px);
	text-align: center;
}

.xjf-report-brand strong {
	color: #17202d;
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 600;
}

.xjf-report-brand span {
	color: #967236;
	font-size: clamp(20px, 3vw, 32px);
}

.xjf-report-index-list,
.xjf-certificate-grid,
.xjf-citation-list,
.xjf-version-grid,
.xjf-snapshot-list {
	display: grid;
	gap: 14px;
}

.xjf-report-index-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-index-row,
.xjf-citation-card,
.xjf-snapshot-card {
	background: rgba(255, 255, 255, 0.54);
	border: 1px solid rgba(151, 114, 54, 0.28);
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(22, 20, 14, 0.05);
	padding: clamp(16px, 2.4vw, 24px);
}

.xjf-index-row {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 56px 1fr;
}

.xjf-index-row span,
.xjf-citation-card code,
.xjf-snapshot-card span {
	color: #9b7737;
	font-family: var(--xjf-font-serif-en), var(--xjf-font-serif-zh);
	font-size: 15px;
	letter-spacing: 0.08em;
}

.xjf-index-row strong,
.xjf-citation-card strong,
.xjf-snapshot-card strong {
	color: #17202d;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 600;
}

.xjf-certificate-grid,
.xjf-version-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-citation-list {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.xjf-citation-card {
	display: grid;
	gap: 10px;
	min-height: 160px;
}

.xjf-citation-card span {
	align-self: end;
	background: rgba(151, 114, 54, 0.1);
	border-radius: 999px;
	color: #7d5d2c;
	display: inline-flex;
	font-size: 13px;
	justify-self: start;
	padding: 6px 10px;
}

.xjf-citation-card small,
.xjf-snapshot-card p {
	color: #6d7480;
	line-height: 1.75;
}

.xjf-snapshot-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xjf-snapshot-card.is-current {
	background: linear-gradient(135deg, rgba(151, 114, 54, 0.14), rgba(255, 255, 255, 0.62));
}

.xjf-summary-grid,
.xjf-mini-card-grid,
.xjf-year-cards {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-summary-highlights {
	background:
		linear-gradient(135deg, rgba(151, 114, 54, 0.12), rgba(255, 255, 255, 0.38)),
		rgba(255, 252, 246, 0.78);
	border: 1px solid rgba(151, 114, 54, 0.32);
	border-radius: 10px;
	box-shadow: 0 18px 42px rgba(22, 20, 14, 0.07);
	display: grid;
	gap: 12px;
	grid-column: 1 / -1;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: clamp(18px, 3vw, 30px);
}

.xjf-summary-highlights h4 {
	color: #8a6a32;
	font-family: var(--xjf-font-serif);
	font-size: 20px;
	grid-column: 1 / -1;
	letter-spacing: 0.08em;
	margin: 0;
}

.xjf-info-card,
.xjf-name-panel,
.xjf-year-card,
.xjf-pdf-note {
	background: rgba(255, 255, 255, 0.54);
	border: 1px solid rgba(151, 114, 54, 0.28);
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(22, 20, 14, 0.06);
	padding: clamp(16px, 2.4vw, 26px);
}

.xjf-info-card span,
.xjf-ratio-row span {
	color: #8a765c;
	display: block;
	font-size: 13px;
	margin-bottom: 8px;
}

.xjf-info-card strong {
	color: #17202d;
	display: block;
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 600;
	line-height: 1.45;
}

.xjf-pillar-grid {
	border: 1px solid rgba(151, 114, 54, 0.32);
	border-radius: 8px;
	display: grid;
	grid-template-columns: minmax(74px, 0.8fr) repeat(4, minmax(0, 1fr));
	overflow: hidden;
}

.xjf-pillar-grid--formal {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.38)),
		radial-gradient(circle at 50% 0%, rgba(151, 114, 54, 0.08), transparent 54%);
	grid-template-columns: minmax(86px, 0.72fr) repeat(4, minmax(116px, 1fr));
}

.xjf-pillar-grid__cell {
	align-items: center;
	background: rgba(255, 255, 255, 0.34);
	border-bottom: 1px solid rgba(151, 114, 54, 0.18);
	border-right: 1px solid rgba(151, 114, 54, 0.18);
	color: #253247;
	display: flex;
	justify-content: center;
	min-height: 58px;
	padding: 12px;
	text-align: center;
}

.xjf-pillar-grid--formal .xjf-pillar-grid__cell {
	align-content: center;
	font-size: 15px;
	line-height: 1.55;
	min-height: 52px;
	padding: 10px 12px;
	white-space: pre-line;
}

.xjf-pillar-grid__head,
.xjf-pillar-grid__label {
	background: rgba(151, 114, 54, 0.1);
	color: #7d5d2c;
	font-weight: 600;
}

.xjf-elements-layout {
	display: grid;
	gap: clamp(20px, 4vw, 42px);
	grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
}

.xjf-element-bars,
.xjf-element-ratios {
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid rgba(151, 114, 54, 0.24);
	border-radius: 8px;
	display: grid;
	gap: 16px;
	padding: clamp(18px, 3vw, 30px);
}

.xjf-element-row {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: 32px 1fr;
}

.xjf-element-row span {
	color: #17202d;
	font-weight: 600;
}

.xjf-element-row i {
	background: rgba(23, 32, 45, 0.08);
	border-radius: 999px;
	display: block;
	height: 12px;
	overflow: hidden;
}

.xjf-element-row b {
	animation: xjf-bar-grow 1200ms var(--xjf-delay, 0ms) cubic-bezier(0.22, 0.61, 0.36, 1) both;
	background: linear-gradient(90deg, #9b7737, #d7b56e);
	display: block;
	height: 100%;
	width: var(--xjf-bar, 0%);
}

.xjf-element-ratios h4,
.xjf-name-panel h4 {
	color: #17202d;
	font-size: 18px;
	margin: 0;
}

.xjf-ratio-row {
	align-items: center;
	border-top: 1px solid rgba(151, 114, 54, 0.16);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 12px;
}

.xjf-ratio-row strong {
	color: #17202d;
	font-weight: 600;
}

.xjf-name-layout {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(260px, 1.05fr) repeat(2, minmax(220px, 0.95fr));
}

.xjf-name-char {
	align-items: center;
	border-top: 1px solid rgba(151, 114, 54, 0.16);
	display: flex;
	justify-content: space-between;
	min-height: 48px;
}

.xjf-name-panel--chars {
	display: grid;
	gap: 10px;
}

.xjf-name-panel--chars .xjf-name-char {
	background: rgba(255, 255, 255, 0.38);
	border: 1px solid rgba(151, 114, 54, 0.15);
	border-radius: 6px;
	padding: 10px 14px;
}

.xjf-name-char strong {
	color: #17202d;
	font-size: 28px;
	font-weight: 500;
}

.xjf-name-char span {
	color: #9b7737;
	font-family: var(--xjf-font-serif-en);
	font-size: 22px;
}

.xjf-soft-note {
	background: rgba(151, 114, 54, 0.08);
	border-left: 2px solid rgba(151, 114, 54, 0.56);
	grid-column: 1 / -1;
	padding: 14px 18px;
}

.xjf-ziwei-board {
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(151, 114, 54, 0.34);
	border-radius: 8px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 980px;
	overflow: hidden;
	width: 100%;
}

.xjf-palace {
	animation: xjf-palace-in 700ms var(--xjf-delay, 0ms) ease both;
	background: rgba(255, 255, 255, 0.36);
	border-bottom: 1px solid rgba(151, 114, 54, 0.2);
	border-right: 1px solid rgba(151, 114, 54, 0.2);
	display: grid;
	gap: 8px;
	padding: clamp(12px, 2vw, 20px);
}

.xjf-palace--formal {
	align-content: start;
	gap: 7px;
	min-height: 170px;
	padding: clamp(10px, 1.35vw, 15px);
}

.xjf-palace.is-life-palace {
	background:
		linear-gradient(180deg, rgba(151, 114, 54, 0.14), rgba(255, 255, 255, 0.42)),
		rgba(151, 114, 54, 0.12);
	box-shadow: inset 0 0 0 2px rgba(151, 114, 54, 0.38);
}

.xjf-palace.is-body-palace {
	box-shadow: inset 0 0 0 1px rgba(151, 114, 54, 0.42);
}

.xjf-palace strong {
	color: #7d5d2c;
	font-size: clamp(17px, 2vw, 24px);
}

.xjf-palace-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.xjf-palace-head span {
	display: inline-flex;
	gap: 4px;
}

.xjf-palace-head b {
	align-items: center;
	background: #9b7737;
	border-radius: 999px;
	color: #fffaf0;
	display: inline-flex;
	font-size: 11px;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.xjf-palace small {
	color: #9b7737;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.xjf-palace-meta,
.xjf-palace-limits {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xjf-palace-limits span {
	background: rgba(151, 114, 54, 0.08);
	border: 1px solid rgba(151, 114, 54, 0.14);
	border-radius: 4px;
	color: #675332;
	font-size: 12px;
	padding: 4px 6px;
}

.xjf-palace-zone {
	border-top: 1px solid rgba(151, 114, 54, 0.14);
	display: grid;
	gap: 4px;
	grid-template-columns: 38px 1fr;
	padding-top: 5px;
}

.xjf-palace-zone em {
	color: #9b7737;
	font-size: 12px;
	font-style: normal;
}

.xjf-palace-zone p {
	color: #253247;
	font-size: 12px;
	line-height: 1.45;
	margin: 0;
}

.xjf-palace span {
	color: #556070;
	font-size: 13px;
}

.xjf-palace-stars {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.xjf-palace-stars span {
	background: rgba(23, 32, 45, 0.06);
	border: 1px solid rgba(151, 114, 54, 0.16);
	border-radius: 999px;
	padding: 4px 8px;
}

.xjf-palace-stars em {
	background: #9b7737;
	border-radius: 999px;
	color: #fffaf0;
	font-style: normal;
	margin-left: 4px;
	padding: 1px 5px;
}

.xjf-palace--center {
	background: radial-gradient(circle, rgba(151, 114, 54, 0.2), transparent 62%);
	grid-column: span 2;
	grid-row: span 2;
	place-items: center;
}

.xjf-palace--center i {
	align-items: center;
	border: 1px solid rgba(151, 114, 54, 0.44);
	border-radius: 999px;
	color: #7d5d2c;
	display: flex;
	font-style: normal;
	justify-content: center;
	line-height: 1.6;
	padding: 14px;
	text-align: center;
	width: min(78%, 220px);
}

.xjf-timeline {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.xjf-timeline__item {
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid rgba(151, 114, 54, 0.22);
	border-radius: 999px;
	color: #596273;
	font-family: var(--xjf-font-serif-en);
	padding: 14px 10px;
	text-align: center;
}

.xjf-timeline__item.is-current {
	background: linear-gradient(135deg, #9b7737, #d7b56e);
	color: #fffaf0;
}

.xjf-year-card {
	max-width: 360px;
}

.xjf-year-card > strong {
	color: #17202d;
	display: block;
	font-family: var(--xjf-font-serif-en);
	font-size: 42px;
	margin-bottom: 18px;
}

.xjf-ai-reading,
.xjf-conclusion {
	display: grid;
	gap: 18px;
}

.xjf-iching-intro,
.xjf-iching-card {
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid rgba(151, 114, 54, 0.22);
	border-radius: 8px;
	padding: clamp(18px, 3vw, 28px);
}

.xjf-iching-intro {
	color: #374252;
	font-size: 17px;
	line-height: 2;
}

.xjf-iching-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xjf-iching-card {
	display: grid;
	gap: 10px;
}

.xjf-iching-card > span {
	color: #9b7737;
	font-family: var(--xjf-font-serif-en), var(--xjf-font-serif-zh);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.xjf-iching-card h4 {
	color: #17202d;
	font-size: 20px;
	margin: 0;
}

.xjf-iching-card p {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin: 0;
}

.xjf-iching-card b {
	color: #8a765c;
	font-weight: 500;
}

.xjf-ai-ritual,
.xjf-question-reading {
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid rgba(151, 114, 54, 0.22);
	border-radius: 8px;
	padding: clamp(18px, 3vw, 28px);
}

.xjf-ai-ritual {
	display: grid;
	gap: 12px;
}

.xjf-ai-ritual div {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(150px, 0.45fr) 1fr;
}

.xjf-ai-ritual i {
	background: repeating-linear-gradient(90deg, rgba(151, 114, 54, 0.6) 0 18px, rgba(151, 114, 54, 0.14) 18px 28px);
	border-radius: 999px;
	display: block;
	height: 9px;
}

.xjf-question-reading h4 {
	color: #7d5d2c;
	font-size: 22px;
	margin: 0 0 16px;
}

.xjf-question-reading h5 {
	color: #17202d;
	font-size: 15px;
	letter-spacing: 0;
	margin: 18px 0 8px;
}

.xjf-question-reading ul {
	margin: 8px 0 0 1.2em;
	padding: 0;
}

.xjf-citation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.xjf-citation-pills span {
	background: rgba(151, 114, 54, 0.1);
	border: 1px solid rgba(151, 114, 54, 0.26);
	border-radius: 999px;
	color: #6f5125;
	font-size: 12px;
	padding: 5px 9px;
}

.xjf-conclusion p,
.xjf-pdf-note p {
	color: #374252;
	font-size: 17px;
	line-height: 2;
	margin: 0;
}

.xjf-pdf-note strong {
	color: #17202d;
	display: block;
	font-size: 22px;
	margin-bottom: 10px;
}

.xjf-admin-debug {
	background: rgba(23, 32, 45, 0.04);
	border: 1px dashed rgba(23, 32, 45, 0.24);
	padding: 24px;
}

@keyframes xjf-bar-grow {
	from { width: 0; }
	to { width: var(--xjf-bar, 0%); }
}

@keyframes xjf-palace-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.xjf-summary-grid,
	.xjf-mini-card-grid,
	.xjf-elements-layout,
	.xjf-name-layout,
	.xjf-year-cards,
	.xjf-report-index-list,
	.xjf-certificate-grid,
	.xjf-citation-list,
	.xjf-version-grid,
	.xjf-snapshot-list,
	.xjf-iching-grid,
	.xjf-timeline {
		grid-template-columns: 1fr;
	}

	.xjf-pillar-grid {
		font-size: 13px;
		grid-template-columns: 58px repeat(4, minmax(58px, 1fr));
		overflow-x: auto;
	}

	.xjf-pillar-grid__cell {
		min-height: 52px;
		padding: 8px;
	}

	.xjf-ziwei-board {
		aspect-ratio: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xjf-ai-ritual div {
		grid-template-columns: 1fr;
	}
}