/* roulang page: index */
:root {
			--color-bg: #F6F2E9;
			--color-surface: #FFFDF8;
			--color-ink: #182B25;
			--color-muted: #5D6E68;
			--color-forest: #0A241E;
			--color-pine: #134F3D;
			--color-jade: #268F73;
			--color-gold: #E9A23B;
			--color-gold-light: #F1B45B;
			--color-line: rgba(19, 79, 61, .14);
			--shadow-card: 0 10px 30px rgba(10, 36, 30, .06);
			--shadow-card-hover: 0 18px 44px rgba(10, 36, 30, .12);
			--radius-card: 18px;
			--radius-hero: 26px;
			--radius-pill: 999px;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		html {
			scroll-padding-top: 130px;
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			background: var(--color-bg);
			color: var(--color-ink);
			font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
			font-size: 16px;
			line-height: 1.8;
			-webkit-font-smoothing: antialiased;
		}

		body.modal-open {
			padding-right: 0 !important;
		}

		img {
			max-width: 100%;
			display: block;
		}

		a {
			color: var(--color-jade);
			text-decoration: none;
			transition: color .2s ease;
		}

		a:hover {
			color: #1d725a;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-weight: 700;
			line-height: 1.3;
			color: var(--color-ink);
			margin: 0 0 .5em;
		}

		p {
			margin-top: 0;
			margin-bottom: 1rem;
		}

		button {
			font-family: inherit;
		}

		a:focus-visible,
		button:focus-visible,
		input:focus-visible {
			outline: 3px solid rgba(233, 162, 59, .55);
			outline-offset: 3px;
			border-radius: 10px;
		}

		.skip-link {
			position: fixed;
			left: -999px;
			top: 14px;
			z-index: 1090;
			background: var(--color-gold);
			color: var(--color-forest);
			padding: 8px 16px;
			border-radius: var(--radius-pill);
		}

		.skip-link:focus {
			left: 12px;
		}

		.container {
			max-width: 1200px;
		}

		.section {
			padding-top: 6.5rem;
			padding-bottom: 6.5rem;
		}

		.section-head {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 24px;
			margin-bottom: 44px;
		}

		.section-head-copy {
			max-width: 780px;
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-size: .875rem;
			font-weight: 700;
			letter-spacing: .08em;
			color: var(--color-jade);
			margin-bottom: 10px;
		}

		.eyebrow::before {
			content: "";
			width: 28px;
			height: 2px;
			background: var(--color-gold);
			border-radius: var(--radius-pill);
			display: inline-block;
			flex: none;
		}

		.section-title {
			font-size: clamp(1.55rem, 2.5vw, 1.85rem);
			font-weight: 700;
			margin-bottom: 5px;
		}

		.section-sub {
			color: var(--color-muted);
			font-size: .95rem;
			margin: 0;
		}

		.section-more {
			flex: none;
			color: var(--color-jade);
			background: none;
			border: 0;
			padding: 10px 0;
			font-size: .9rem;
			font-weight: 600;
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}

		.section-more i {
			transition: transform .25s ease;
		}

		.section-more:hover {
			color: var(--color-forest);
		}

		.section-more:hover i {
			transform: translateX(4px);
		}

		.site-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1040;
			padding: 14px 14px 0;
			pointer-events: none;
		}

		.site-header .container-dock {
			max-width: 1080px;
			margin-left: auto;
			margin-right: auto;
			pointer-events: none;
		}

		.dock-shell {
			position: relative;
			pointer-events: auto;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			gap: 10px;
			min-height: 64px;
			padding: 7px 9px 7px 18px;
			background: rgba(10, 36, 30, .9);
			border: 1px solid rgba(255, 253, 248, .14);
			border-radius: var(--radius-pill);
			box-shadow: 0 16px 42px rgba(10, 36, 30, .22);
			backdrop-filter: blur(14px);
		}

		.dock-brand {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: #fff;
			white-space: nowrap;
		}

		.dock-brand:hover {
			color: #fff;
		}

		.dock-brand-icon {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background: var(--color-gold);
			color: var(--color-forest);
			flex: none;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 1.25rem;
			box-shadow: 0 4px 12px rgba(233, 162, 59, .4);
		}

		.dock-brand-text {
			font-weight: 700;
			font-size: 1.05rem;
			letter-spacing: .01em;
			color: #fff;
		}

		.dock-nav {
			display: flex;
			align-items: center;
			gap: 2px;
			margin-left: auto;
		}

		.dock-nav a {
			display: inline-block;
			color: rgba(255, 253, 248, .78);
			font-size: .88rem;
			font-weight: 600;
			line-height: 1;
			padding: 11px 14px;
			border-radius: var(--radius-pill);
			white-space: nowrap;
			transition: background .2s ease, color .2s ease;
		}

		.dock-nav a:hover {
			color: #fff;
			background: rgba(255, 253, 248, .12);
		}

		.dock-nav a.active {
			color: #fff;
			background: rgba(255, 253, 248, .16);
		}

		.dock-nav a.active::after {
			content: "";
			display: block;
			width: 16px;
			height: 2px;
			border-radius: var(--radius-pill);
			background: var(--color-gold);
			margin: 7px auto 0;
		}

		.dock-tools {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: none;
			margin-left: 2px;
		}

		.dock-icon-btn {
			width: 38px;
			height: 38px;
			border-radius: 50%;
			border: 1px solid rgba(255, 253, 248, .18);
			background: rgba(255, 253, 248, .08);
			color: #fff;
			font-size: 1rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			transition: background .2s ease, color .2s ease, border-color .2s ease;
		}

		.dock-icon-btn:hover {
			background: rgba(255, 253, 248, .18);
			color: var(--color-gold-light);
			border-color: rgba(233, 162, 59, .55);
		}

		.btn {
			border-radius: var(--radius-pill);
			font-weight: 700;
			line-height: 1.2;
			transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
		}

		.btn-gold {
			background: var(--color-gold);
			border: 1px solid var(--color-gold);
			color: var(--color-forest);
			padding: 10px 24px;
			box-shadow: 0 8px 20px rgba(233, 162, 59, .2);
		}

		.btn-gold:hover,
		.btn-gold:focus {
			background: var(--color-gold-light);
			border-color: var(--color-gold-light);
			color: var(--color-forest);
			box-shadow: 0 10px 26px rgba(241, 180, 91, .3);
			transform: translateY(-1px);
		}

		.btn-line-light {
			background: transparent;
			border: 1px solid rgba(255, 253, 248, .72);
			color: #fff;
			padding: 10px 24px;
		}

		.btn-line-light:hover,
		.btn-line-light:focus {
			background: rgba(255, 253, 248, .14);
			border-color: #fff;
			color: #fff;
			transform: translateY(-1px);
		}

		.btn-line-dark {
			background: transparent;
			border: 1px solid rgba(19, 79, 61, .65);
			color: var(--color-pine);
			padding: 10px 24px;
		}

		.btn-line-dark:hover,
		.btn-line-dark:focus {
			border-color: var(--color-pine);
			color: var(--color-pine);
			background: rgba(19, 79, 61, .06);
		}

		.dock-burger {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background: rgba(255, 253, 248, .08);
			border: 1px solid rgba(255, 253, 248, .2);
			color: #fff;
			align-items: center;
			justify-content: center;
			font-size: 1.32rem;
			display: none;
			padding: 0;
		}

		.dock-burger:hover,
		.dock-burger:focus {
			background: rgba(255, 253, 248, .18);
			color: #fff;
		}

		.dock-search {
			position: absolute;
			right: 132px;
			top: 50%;
			transform: translateY(-50%) translateX(8px);
			background: #fff;
			border-radius: var(--radius-pill);
			box-shadow: 0 12px 34px rgba(10, 36, 30, .2);
			padding: 4px;
			display: flex;
			align-items: center;
			gap: 4px;
			opacity: 0;
			pointer-events: none;
			transition: opacity .24s ease, transform .24s ease;
			max-width: 280px;
			width: 250px;
		}

		.dock-search.is-open {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(-50%) translateX(0);
		}

		.dock-search input {
			border: 0;
			outline: none;
			background: none;
			color: var(--color-ink);
			font-size: .88rem;
			padding: 8px 8px 8px 14px;
			width: 100%;
			min-width: 0;
		}

		.dock-search button {
			border: 0;
			background: var(--color-forest);
			color: #fff;
			border-radius: 50%;
			width: 36px;
			height: 36px;
			flex: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.dock-mobile {
			margin-top: 10px;
			padding: 16px;
			background: rgba(10, 36, 30, .97);
			border: 1px solid rgba(255, 253, 248, .18);
			border-radius: 26px;
			backdrop-filter: blur(16px);
			pointer-events: auto;
			box-shadow: 0 20px 50px rgba(10, 36, 30, .28);
		}

		.dock-mobile a {
			display: block;
			color: rgba(255, 253, 248, .86);
			font-weight: 600;
			padding: 12px 14px;
			border-radius: 16px;
			font-size: .95rem;
		}

		.dock-mobile a:hover,
		.dock-mobile a.active {
			color: #fff;
			background: rgba(255, 253, 248, .12);
		}

		.dock-mobile form {
			display: flex;
			gap: 8px;
			padding: 8px 0 12px;
			border-bottom: 1px solid rgba(255, 253, 248, .1);
			margin-bottom: 12px;
		}

		.dock-mobile input {
			width: 100%;
			background: rgba(255, 253, 248, .1);
			border: 1px solid rgba(255, 253, 248, .16);
			color: #fff;
			border-radius: var(--radius-pill);
			padding: 8px 14px;
			font-size: .9rem;
			outline: none;
		}

		.dock-mobile input::placeholder {
			color: rgba(255, 253, 248, .55);
		}

		.dock-mobile .btn-gold {
			border: 0;
			font-size: .88rem;
			padding: 8px 18px;
		}

		.hero-section {
			position: relative;
			min-height: 92vh;
			display: flex;
			align-items: center;
			overflow: hidden;
			background: var(--color-forest);
			padding-top: 130px;
			padding-bottom: 96px;
		}

		.hero-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
		}

		.hero-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(90deg, rgba(10, 36, 30, .95) 0%, rgba(10, 36, 30, .82) 43%, rgba(10, 36, 30, .38) 100%);
		}

		.hero-inner {
			position: relative;
			z-index: 2;
			color: #fff;
			padding-top: 28px;
			padding-bottom: 28px;
		}

		.hero-pretitle {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--color-gold-light);
			font-size: .88rem;
			font-weight: 700;
			letter-spacing: .12em;
			margin-bottom: 18px;
		}

		.hero-pretitle::before {
			content: "";
			width: 32px;
			height: 2px;
			background: var(--color-gold);
			border-radius: var(--radius-pill);
		}

		.hero-title {
			font-size: clamp(2.15rem, 5vw, 3.3rem);
			line-height: 1.18;
			color: #fff;
			max-width: 740px;
			margin-bottom: 20px;
		}

		.hero-title-sub {
			display: block;
			font-size: clamp(1.1rem, 2vw, 1.45rem);
			font-weight: 600;
			margin-top: 12px;
			color: rgba(255, 253, 248, .88);
		}

		.hero-lead {
			max-width: 650px;
			color: rgba(255, 253, 248, .82);
			font-size: clamp(1rem, 2vw, 1.12rem);
			margin-bottom: 26px;
		}

		.hero-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-bottom: 34px;
		}

		.hero-footnote {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.hero-footnote li {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: rgba(255, 253, 248, .12);
			color: rgba(255, 253, 248, .9);
			border: 1px solid rgba(255, 253, 248, .16);
			border-radius: var(--radius-pill);
			padding: 6px 16px;
			font-size: .82rem;
			font-weight: 600;
			backdrop-filter: blur(8px);
		}

		.hero-footnote i {
			color: var(--color-gold);
		}

		.catalog-section {
			background: var(--color-bg);
		}

		.catalog-grid {
			display: grid;
			grid-template-columns: 7fr 5fr;
			grid-auto-rows: minmax(220px, auto);
			gap: 22px;
		}

		.catalog-card {
			display: block;
			background: var(--color-surface);
			border-radius: var(--radius-card);
			box-shadow: var(--shadow-card);
			overflow: hidden;
			position: relative;
			border: 0;
			transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
			text-decoration: none;
			color: var(--color-ink);
		}

		.catalog-card:hover {
			text-decoration: none;
			color: var(--color-ink);
			transform: translateY(-6px);
			box-shadow: var(--shadow-card-hover);
		}

		.catalog-card--feature {
			grid-column: 1;
			grid-row: 1 / span 2;
			display: flex;
			flex-direction: column;
			background: var(--color-surface);
			min-height: 100%;
		}

		.feature-cover {
			position: relative;
			overflow: hidden;
			flex: 1 1 auto;
			min-height: 220px;
			background: var(--color-forest);
		}

		.feature-cover img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform .45s ease;
		}

		.catalog-card:hover .feature-cover img {
			transform: scale(1.04);
		}

		.feature-cover::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(10, 36, 30, .08) 55%, rgba(10, 36, 30, .82) 100%);
		}

		.feature-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			padding: 26px;
		}

		.feature-content .cat-number {
			position: absolute;
			top: -54px;
			right: 0;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: rgba(255, 253, 248, .18);
			backdrop-filter: blur(8px);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 1.15rem;
		}

		.feature-content .cat-label {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--color-gold-light);
			font-size: .82rem;
			font-weight: 800;
			letter-spacing: .06em;
			margin-bottom: 8px;
		}

		.feature-content h3 {
			color: #fff;
			font-size: clamp(1.25rem, 2.5vw, 1.6rem);
			margin: 0 0 8px;
		}

		.feature-content p {
			color: rgba(255, 253, 248, .82);
			font-size: .92rem;
			margin-bottom: 16px;
			max-width: 94%;
		}

		.feature-content .cat-enter {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: rgba(255, 253, 248, .14);
			border: 1px solid rgba(255, 253, 248, .2);
			color: #fff;
			padding: 7px 16px;
			border-radius: var(--radius-pill);
			font-size: .85rem;
			font-weight: 600;
			transition: background .25s ease, border-color .25s ease;
		}

		.catalog-card:hover .cat-enter {
			background: var(--color-gold);
			border-color: var(--color-gold);
			color: var(--color-forest);
		}

		.catalog-card--split {
			grid-column: 2;
			display: flex;
			align-items: stretch;
			padding: 18px;
			gap: 16px;
			min-height: 100%;
			background: var(--color-surface);
		}

		.catalog-card--split .split-thumb {
			width: 118px;
			flex: none;
			border-radius: 16px;
			overflow: hidden;
			background: var(--color-bg);
			min-height: 160px;
		}

		.catalog-card--split .split-thumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.split-body {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			min-width: 0;
			padding: 4px 2px 4px 0;
		}

		.split-body .cat-number {
			font-size: .75rem;
			font-weight: 800;
			letter-spacing: .06em;
			color: #8DA49B;
		}

		.split-body h3 {
			font-size: 1.12rem;
			margin: 4px 0 6px;
			line-height: 1.4;
		}

		.split-body .split-desc {
			font-size: .85rem;
			color: var(--color-muted);
			line-height: 1.6;
			margin: 0 0 12px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.split-enter {
			margin-top: auto;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--color-jade);
			font-size: .85rem;
			font-weight: 700;
		}

		.catalog-card:hover .split-enter {
			color: var(--color-forest);
		}

		.latest-section {
			background: #F1EBDF;
			border-top: 1px solid rgba(19, 79, 61, .05);
			border-bottom: 1px solid rgba(19, 79, 61, .05);
		}

		.latest-cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 22px;
		}

		.latest-card {
			background: var(--color-surface);
			border-radius: var(--radius-card);
			box-shadow: var(--shadow-card);
			overflow: hidden;
			transition: transform .25s ease, box-shadow .25s ease;
		}

		.latest-card:hover {
			transform: translateY(-5px);
			box-shadow: var(--shadow-card-hover);
		}

		.latest-card--feature {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		}

		.latest-cover {
			position: relative;
			overflow: hidden;
			min-height: 260px;
		}

		.latest-cover img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform .45s ease;
		}

		.latest-card:hover .latest-cover img {
			transform: scale(1.05);
		}

		.latest-body {
			padding: 22px 28px 26px;
		}

		.latest-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;
			font-size: .78rem;
			font-weight: 600;
			margin-bottom: 12px;
		}

		.latest-tag {
			display: inline-flex;
			align-items: center;
			background: rgba(38, 143, 115, .1);
			color: var(--color-pine);
			border-radius: var(--radius-pill);
			padding: 4px 11px;
			font-size: .76rem;
			font-weight: 700;
			line-height: 1.4;
		}

		.latest-date {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: var(--color-muted);
			font-weight: 500;
		}

		.latest-body h3 {
			font-size: 1.18rem;
			line-height: 1.45;
			margin-bottom: 8px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.latest-body h3 a {
			color: var(--color-ink);
		}

		.latest-body h3 a:hover {
			color: var(--color-jade);
		}

		.latest-summary {
			color: var(--color-muted);
			font-size: .9rem;
			line-height: 1.7;
			margin-bottom: 16px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.latest-read {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			font-size: .88rem;
			font-weight: 700;
			color: var(--color-jade);
		}

		.latest-card:hover .latest-read i {
			transform: translateX(4px);
		}

		.latest-read i {
			transition: transform .25s ease;
		}

		.latest-card--compact {
			padding: 26px;
			min-height: 190px;
			display: block;
		}

		.latest-card--compact .latest-meta {
			margin-bottom: 10px;
		}

		.latest-card--compact h3 {
			font-size: 1rem;
			line-height: 1.4;
			margin-bottom: 6px;
		}

		.latest-card--compact .latest-summary {
			margin-bottom: 10px;
		}

		.empty-state {
			grid-column: 1 / -1;
			background: var(--color-surface);
			border-radius: var(--radius-card);
			padding: 48px 30px;
			text-align: center;
			color: var(--color-muted);
			box-shadow: var(--shadow-card);
		}

		.empty-state i {
			font-size: 2rem;
			color: var(--color-gold);
			margin-bottom: 12px;
		}

		.empty-state p {
			margin: 0;
			font-weight: 600;
		}

		.related-section {
			background: var(--color-bg);
		}

		.related-grid {
			display: grid;
			grid-template-columns: 1.2fr .8fr;
			gap: 26px;
			align-items: start;
		}

		.related-main {
			background: var(--color-surface);
			border-radius: var(--radius-card);
			box-shadow: var(--shadow-card);
			padding: 30px;
			position: relative;
			overflow: hidden;
		}

		.related-main::before {
			content: "";
			position: absolute;
			right: -40px;
			top: -40px;
			width: 160px;
			height: 160px;
			border-radius: 50%;
			background: rgba(38, 143, 115, .07);
		}

		.related-main h3 {
			font-size: 1.22rem;
			margin-bottom: 10px;
		}

		.related-main p {
			color: var(--color-muted);
			margin-bottom: 18px;
		}

		.related-pills {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 22px;
		}

		.related-pills a {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: rgba(38, 143, 115, .09);
			border: 1px solid rgba(38, 143, 115, .14);
			color: var(--color-pine);
			border-radius: var(--radius-pill);
			padding: 8px 15px;
			font-size: .85rem;
			font-weight: 600;
			transition: background .2s ease, color .2s ease, transform .2s ease;
		}

		.related-pills a:hover {
			background: var(--color-forest);
			color: #fff;
			transform: translateY(-2px);
		}

		.related-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.faq-card {
			background: var(--color-surface);
			border-radius: var(--radius-card);
			box-shadow: var(--shadow-card);
			padding: 24px 28px;
		}

		.faq-card-title {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 1rem;
			font-weight: 700;
			margin-bottom: 16px;
		}

		.faq-card-title i {
			color: var(--color-gold);
			font-size: 1.2rem;
		}

		.accordion {
			--bs-accordion-border-width: 0;
			--bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.accordion-item {
			background: transparent;
			border: 1px solid var(--color-line);
			border-radius: 16px !important;
			overflow: hidden;
		}

		.accordion-button {
			background: transparent;
			color: var(--color-ink);
			font-size: .92rem;
			font-weight: 600;
			box-shadow: none;
			padding: 14px 16px;
			line-height: 1.5;
			border-radius: 0;
			outline: none;
		}

		.accordion-button:not(.collapsed) {
			background: rgba(38, 143, 115, .08);
			color: var(--color-pine);
		}

		.accordion-button::after {
			width: 26px;
			height: 26px;
			background-size: 50%;
			border-radius: 50%;
			background-color: rgba(19, 79, 61, .15);
			background-position: center;
			transition: transform .3s ease, background-color .3s ease;
		}

		.accordion-button:not(.collapsed)::after {
			background-color: var(--color-gold);
		}

		.accordion-body {
			color: var(--color-muted);
			font-size: .88rem;
			padding: 2px 16px 16px;
		}

		.cta-section {
			position: relative;
			overflow: hidden;
			padding: 6.5rem 0;
			background: var(--color-forest);
		}

		.cta-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
		}

		.cta-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(120deg, rgba(10, 36, 30, .95), rgba(10, 36, 30, .84) 50%, rgba(19, 79, 61, .74));
		}

		.cta-inner {
			position: relative;
			z-index: 2;
			text-align: center;
			max-width: 720px;
			margin: 0 auto;
			color: #fff;
		}

		.cta-inner .eyebrow {
			color: var(--color-gold-light);
			justify-content: center;
		}

		.cta-inner .eyebrow::before {
			background: var(--color-gold-light);
		}

		.cta-title {
			color: #fff;
			font-size: clamp(1.6rem, 3.4vw, 2.2rem);
			margin-bottom: 14px;
		}

		.cta-copy {
			color: rgba(255, 253, 248, .82);
			margin-bottom: 26px;
		}

		.cta-actions {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 14px;
		}

		.site-footer {
			background: var(--color-forest);
			color: rgba(255, 253, 248, .75);
			padding: 58px 0 28px;
			border-top: 1px solid rgba(255, 253, 248, .08);
		}

		.footer-grid {
			display: grid;
			grid-template-columns: 1.4fr 1fr 1fr;
			gap: 40px;
			margin-bottom: 46px;
		}

		.footer-brand {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			gap: 12px;
		}

		.footer-brand-name {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			font-size: 1.1rem;
			font-weight: 700;
			color: #fff;
		}

		.footer-brand-name .bi {
			color: var(--color-gold);
		}

		.footer-brand p {
			color: rgba(255, 253, 248, .68);
			font-size: .9rem;
			max-width: 320px;
			margin: 0;
		}

		.footer-title {
			color: rgba(255, 253, 248, .95);
			font-size: .95rem;
			font-weight: 700;
			margin: 4px 0 18px;
			position: relative;
			padding-bottom: 10px;
		}

		.footer-title::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 26px;
			height: 2px;
			background: var(--color-gold);
			border-radius: var(--radius-pill);
		}

		.footer-links {
			display: flex;
			flex-direction: column;
			gap: 10px;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.footer-links a {
			color: rgba(255, 253, 248, .74);
			font-size: .9rem;
		}

		.footer-links a:hover {
			color: var(--color-gold-light);
		}

		.footer-bottom {
			border-top: 1px solid rgba(255, 253, 248, .14);
			padding-top: 22px;
			display: flex;
			flex-wrap: wrap;
			gap: 8px 24px;
			justify-content: space-between;
			font-size: .78rem;
			color: rgba(255, 253, 248, .55);
		}

		.footer-bottom a {
			color: rgba(255, 253, 248, .7);
		}

		.mini-toast {
			position: fixed;
			left: 50%;
			bottom: 24px;
			transform: translateX(-50%) translateY(20px);
			background: var(--color-forest);
			color: #fff;
			font-size: .88rem;
			padding: 11px 20px;
			border-radius: var(--radius-pill);
			box-shadow: 0 12px 34px rgba(10, 36, 30, .28);
			opacity: 0;
			pointer-events: none;
			transition: opacity .3s ease, transform .3s ease;
			z-index: 1100;
		}

		.mini-toast.is-show {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		@media (max-width: 1199.98px) {
			.dock-shell {
				max-width: 1060px;
			}

			.dock-nav {
				gap: 0;
			}

			.dock-nav a {
				padding: 10px 9px;
				font-size: .8rem;
			}

			.dock-brand-text {
				font-size: .98rem;
			}
		}

		@media (max-width: 991.98px) {
			.site-header {
				padding: 12px 10px 0;
			}

			.dock-shell {
				min-height: 58px;
				padding: 6px 7px 6px 15px;
			}

			.dock-nav {
				display: none !important;
			}

			.dock-search-toggle {
				display: inline-flex;
			}

			.dock-burger {
				display: inline-flex;
			}

			.dock-search {
				display: none;
			}

			.hero-section {
				padding-top: 112px;
				min-height: auto;
			}

			.section {
				padding-top: 4.6rem;
				padding-bottom: 4.6rem;
			}

			.catalog-grid {
				grid-template-columns: 1fr;
				grid-auto-rows: auto !important;
			}

			.catalog-card--feature {
				grid-column: auto;
				grid-row: auto;
				min-height: 330px;
			}

			.catalog-card--split {
				grid-column: auto;
			}

			.latest-card--feature {
				grid-template-columns: 1fr;
			}

			.latest-cover {
				min-height: 220px;
			}

			.related-grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 767.98px) {
			.dock-brand-text {
				font-size: .92rem;
			}

			.dock-brand-icon {
				width: 30px;
				height: 30px;
				font-size: 1.05rem;
			}

			.dock-tools {
				gap: 5px;
			}

			.dock-cta-btn {
				display: none;
			}

			.hero-section {
				padding-top: 108px;
				padding-bottom: 64px;
			}

			.hero-title {
				font-size: clamp(1.75rem, 6vw, 2.4rem);
			}

			.hero-lead {
				font-size: .98rem;
			}

			.hero-actions .btn {
				width: 100%;
				text-align: center;
			}

			.section-head {
				flex-direction: column;
				align-items: flex-start;
				gap: 14px;
			}

			.latest-cards {
				grid-template-columns: 1fr;
			}

			.latest-card--feature {
				grid-column: auto;
			}

			.latest-card--compact {
				min-height: 0;
			}

			.latest-body {
				padding: 20px;
			}

			.feature-cover {
				min-height: 220px;
			}

			.feature-content {
				padding: 20px;
			}

			.catalog-card--split {
				flex-direction: column;
			}

			.catalog-card--split .split-thumb {
				width: 100%;
				height: 180px;
			}

			.related-main,
			.faq-card {
				padding: 22px;
			}

			.site-footer {
				padding-top: 44px;
			}

			.footer-grid {
				grid-template-columns: 1fr;
				gap: 32px;
			}

			.cta-section {
				padding: 4.6rem 0;
			}
		}

		@media (max-width: 575.98px) {
			.site-header {
				padding: 10px 8px 0;
			}

			.dock-shell {
				border-radius: 30px;
			}

			.dock-brand-icon {
				display: none;
			}

			.dock-brand-text {
				font-size: .86rem;
			}

			.hero-section {
				padding-top: 100px;
				padding-bottom: 48px;
			}

			.hero-inner {
				padding-top: 14px;
			}

			.hero-footnote li {
				padding: 5px 10px;
				font-size: .75rem;
			}

			.feature-content p {
				font-size: .86rem;
			}

			.feature-content h3 {
				font-size: 1.15rem;
			}

			.latest-card--feature .latest-body {
				padding: 18px;
			}

			.latest-body h3 {
				font-size: 1.02rem;
			}

			.faq-card {
				padding: 18px;
			}

			.related-main {
				padding: 20px;
			}
		}

/* roulang page: article */
:root {
            --color-bg: #F6F2E9;
            --color-surface: #FFFDF8;
            --color-ink: #182B25;
            --color-muted: #5D6E68;
            --color-forest: #0A241E;
            --color-pine: #134F3D;
            --color-jade: #268F73;
            --color-gold: #E9A23B;
            --color-gold-light: #F1B45B;
            --color-line: rgba(19, 79, 61, 0.14);
            --dark-ink: rgba(255, 253, 248, 0.72);
            --radius-card: 18px;
            --radius-hero: 26px;
            --shadow-card: 0 10px 30px rgba(10, 36, 30, 0.06);
            --shadow-hover: 0 18px 44px rgba(10, 36, 30, 0.12);
            --container-w: 1200px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
            background: var(--color-bg);
            color: var(--color-ink);
            line-height: 1.8;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }
        a {
            text-decoration: none;
            color: var(--color-jade);
            transition: color .25s ease;
        }
        a:hover {
            color: var(--color-pine);
        }
        img {
            max-width: 100%;
        }
        button,
        input {
            font-family: inherit;
        }
        .container {
            max-width: var(--container-w);
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }
        .catalog-container {
            max-width: 1160px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        /* ============ Dock 导航 ============ */
        .dock-wrapper {
            position: relative;
            z-index: 100;
            padding-top: 16px;
            width: 100%;
        }
        .dock-navbar {
            background: rgba(10, 36, 30, 0.92);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-radius: 999px;
            max-width: 1060px;
            margin: 0 auto;
            padding: 10px 22px 10px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 14px 44px rgba(10, 36, 30, 0.26);
            border: 1px solid rgba(255, 255, 255, 0.08);
            min-height: 68px;
        }
        .dock-brand {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-surface);
            letter-spacing: 0.01em;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .dock-brand i {
            color: var(--color-gold);
            font-size: 1.2rem;
        }
        .dock-brand .brand-sub {
            color: rgba(255, 253, 248, 0.58);
            font-weight: 400;
            font-size: 0.78rem;
            margin-left: 2px;
        }
        .dock-nav {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        .dock-nav a {
            color: rgba(255, 253, 248, 0.82);
            font-size: 0.9rem;
            font-weight: 500;
            padding: 8px 14px;
            border-radius: 999px;
            transition: background .25s ease, color .25s ease;
            position: relative;
            letter-spacing: 0.02em;
        }
        .dock-nav a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }
        .dock-nav a.active {
            color: #fff;
        }
        .dock-nav a.active::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--color-gold);
            border-radius: 50%;
        }
        .dock-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dock-search-item {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 999px;
            padding: 2px 4px 2px 14px;
            height: 38px;
        }
        .dock-search-item input {
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: 0.84rem;
            width: 130px;
            transition: width .3s ease;
        }
        .dock-search-item input::placeholder {
            color: rgba(255, 253, 248, 0.5);
        }
        .dock-search-item input:focus {
            width: 180px;
        }
        .dock-search-btn {
            background: var(--color-gold);
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-forest);
            font-size: 0.8rem;
            cursor: pointer;
            transition: background .2s ease, transform .2s ease;
        }
        .dock-search-btn:hover {
            background: var(--color-gold-light);
            transform: scale(1.05);
        }
        .dock-toggle {
            display: none;
            background: rgba(255, 255, 255, 0.12);
            border: none;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }
        .dock-mobile-menu {
            display: none;
            background: rgba(10, 36, 30, 0.96);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-radius: 28px;
            max-width: 1060px;
            margin: 10px auto 0;
            padding: 20px 28px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 18px 48px rgba(10, 36, 30, 0.3);
        }
        .dock-mobile-menu.open {
            display: block;
        }
        .dock-mobile-menu a {
            display: block;
            color: rgba(255, 253, 248, 0.85);
            padding: 12px 10px;
            border-radius: 14px;
            font-size: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .dock-mobile-menu a:last-child {
            border-bottom: none;
        }
        .dock-mobile-menu a.active {
            color: var(--color-gold);
            background: rgba(255, 255, 255, 0.06);
        }

        /* ============ 文章页 ============ */
        .page-hero {
            background: var(--color-forest);
            padding: 36px 0 20px;
            margin-top: 16px;
            border-radius: 28px;
            position: relative;
        }
        .page-hero .page-hero-inner {
            max-width: 860px;
            margin: 0 auto;
            padding: 12px 28px;
            text-align: center;
        }
        .hero-badge-line {
            display: flex;
            justify-content: center;
            gap: 12px;
            align-items: center;
            margin-bottom: 14px;
        }
        .hero-dot {
            width: 6px;
            height: 6px;
            background: var(--color-gold);
            border-radius: 50%;
        }
        .hero-brand {
            font-size: 1rem;
            color: var(--color-gold);
            font-weight: 500;
            letter-spacing: .06em;
        }

        /* 面包屑 */
        .breadcrumb-bar {
            padding: 28px 0 10px;
        }
        .breadcrumb-bar .breadcrumb-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
            font-size: 0.84rem;
            color: var(--color-muted);
            list-style: none;
        }
        .breadcrumb-list li {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .breadcrumb-list li+li::before {
            content: '/';
            color: rgba(93, 110, 104, 0.5);
        }
        .breadcrumb-list a {
            color: var(--color-pine);
            font-weight: 500;
        }
        .breadcrumb-list a:hover {
            color: var(--color-gold);
        }
        .breadcrumb-list .current {
            color: var(--color-muted);
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 文章主区域 */
        .article-main {
            padding: 20px 0 40px;
        }
        .article-card-wrap {
            max-width: 900px;
            margin: 0 auto;
        }
        .article-head {
            text-align: center;
            padding: 26px 30px 28px;
            background: var(--color-surface);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
        }
        .article-category-tag {
            display: inline-block;
            background: rgba(38, 143, 115, .12);
            color: var(--color-pine);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: 999px;
            letter-spacing: .05em;
            margin-bottom: 16px;
        }
        .article-title {
            font-size: clamp(1.75rem, 3vw, 2.3rem);
            font-weight: 700;
            color: var(--color-forest);
            line-height: 1.4;
            letter-spacing: .01em;
            margin-bottom: 16px;
        }
        .article-meta {
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            font-size: 0.86rem;
            color: var(--color-muted);
        }
        .article-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .article-meta i {
            color: var(--color-jade);
            font-size: 0.9rem;
        }
        .article-reading {
            max-width: 780px;
            margin: 0 auto;
            background: var(--color-surface);
            border-radius: var(--radius-card);
            padding: 44px 36px;
            box-shadow: var(--shadow-card);
            margin-top: 24px;
        }
        .article-content {
            font-size: 1rem;
            line-height: 1.9;
            color: #24332C;
        }
        .article-content p {
            margin-bottom: 1.8rem;
        }
        .article-content h2 {
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--color-forest);
            margin: 2.2rem 0 1rem;
            padding-bottom: 0.4em;
            border-bottom: 2px solid rgba(233, 162, 59, .2);
        }
        .article-content h3 {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--color-pine);
            margin: 1.6rem 0 .8rem;
        }
        .article-content img {
            border-radius: 18px;
            width: 100%;
            height: auto;
            margin: 1.5rem 0;
        }
        .article-content blockquote {
            border-left: 4px solid var(--color-gold);
            background: rgba(233, 162, 59, 0.08);
            padding: 14px 20px;
            border-radius: 0 14px 14px 0;
            margin: 1.6rem 0;
            color: var(--color-pine);
        }
        .article-content a {
            color: var(--color-jade);
            font-weight: 500;
        }
        .article-content a:hover {
            text-decoration: underline;
        }
        .article-content ul,
        .article-content ol {
            padding-left: 1.4em;
            margin-bottom: 1.6rem;
        }
        .article-content ul li,
        .article-content ol li {
            margin-bottom: .5rem;
        }

        /* 正文工具条 */
        .article-toolbar {
            max-width: 780px;
            margin: 22px auto 0;
            padding: 0 36px;
            background: var(--color-surface);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
        }
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 20px 0;
            border-bottom: 1px solid var(--color-line);
        }
        .tag-list .tag-item {
            background: rgba(38, 143, 115, .1);
            color: var(--color-pine);
            border-radius: 999px;
            padding: 4px 14px;
            font-size: .8rem;
        }
        .article-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            flex-wrap: wrap;
            gap: 12px;
        }
        .btn-save,
        .btn-share {
            border-radius: 999px;
            padding: 8px 18px;
            font-size: .85rem;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            transition: all .2s ease;
        }
        .btn-save {
            background: var(--color-pine);
            color: #fff;
        }
        .btn-save:hover {
            background: var(--color-forest);
        }
        .btn-share {
            background: rgba(233, 162, 59, .15);
            color: #8a5a13;
        }
        .btn-share:hover {
            background: var(--color-gold);
            color: var(--color-forest);
        }
        .prev-next {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .prev-next a {
            background: rgba(19, 79, 61, .08);
            border-radius: 999px;
            padding: 6px 14px;
            font-size: .84rem;
            color: var(--color-pine);
            font-weight: 500;
        }
        .prev-next a:hover {
            background: var(--color-pine);
            color: #fff;
        }

        /* 无内容状态 */
        .not-found-box {
            max-width: 780px;
            margin: 40px auto;
            background: var(--color-surface);
            border-radius: var(--radius-card);
            padding: 70px 30px;
            text-align: center;
            box-shadow: var(--shadow-card);
        }
        .nf-icon {
            font-size: 3.6rem;
            color: rgba(19, 79, 61, .3);
            margin-bottom: 16px;
        }
        .nf-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-pine);
            margin-bottom: 12px;
        }
        .nf-text {
            color: var(--color-muted);
            margin-bottom: 24px;
        }
        .btn-primary-custom {
            background: var(--color-gold);
            border-radius: 999px;
            color: var(--color-forest);
            border: none;
            padding: 10px 28px;
            font-weight: 600;
            font-size: .92rem;
            transition: background .2s ease, transform .2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-primary-custom:hover {
            background: var(--color-gold-light);
            color: var(--color-forest);
            transform: translateY(-2px);
        }

        /* 相关推荐 */
        .related-section {
            padding: 50px 0 50px;
            max-width: 900px;
            margin: 0 auto;
        }
        .related-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 28px;
        }
        .related-eyebrow {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .eyebrow-line {
            width: 28px;
            height: 2px;
            background: var(--color-gold);
        }
        .eyebrow-text {
            font-size: .82rem;
            color: var(--color-jade);
            font-weight: 600;
            letter-spacing: .08em;
        }
        .related-title {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--color-forest);
            margin-top: 4px;
        }
        .related-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }
        .related-card {
            background: var(--color-surface);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: transform .3s ease, box-shadow .3s ease;
            display: flex;
            flex-direction: column;
        }
        .related-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
        .related-card .card-cover {
            height: 160px;
            overflow: hidden;
            background: var(--color-pine);
            position: relative;
        }
        .related-card .card-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }
        .related-card:hover .card-cover img {
            transform: scale(1.03);
        }
        .related-card-body {
            padding: 20px 22px 22px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .related-card-tag {
            font-size: .75rem;
            background: rgba(38, 143, 115, .1);
            color: var(--color-pine);
            padding: 2px 12px;
            border-radius: 999px;
            align-self: flex-start;
            margin-bottom: 10px;
        }
        .related-card-title {
            font-size: 1.08rem;
            font-weight: 600;
            color: var(--color-forest);
            line-height: 1.5;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .related-card-title a {
            color: var(--color-forest);
        }
        .related-card-title a:hover {
            color: var(--color-pine);
        }
        .related-card-desc {
            font-size: .85rem;
            color: var(--color-muted);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.7;
            flex: 1;
        }
        .related-card-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            font-size: .78rem;
            color: var(--color-muted);
        }
        .back-catalog {
            margin-top: 32px;
            text-align: center;
        }
        .back-catalog a {
            color: var(--color-jade);
            font-size: .9rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }
        .back-catalog a:hover {
            color: var(--color-pine);
        }

        /* ============ 页脚 ============ */
        .site-footer {
            background: var(--color-forest);
            padding: 60px 0 30px;
            border-radius: 32px 32px 0 0;
            margin-top: 60px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 36px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }
        .footer-brand-name {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #FFFDF8;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 14px;
            letter-spacing: .02em;
        }
        .footer-brand-name i {
            color: var(--color-gold);
            font-size: 1.4rem;
        }
        .footer-brand p {
            color: var(--dark-ink);
            font-size: .88rem;
            line-height: 1.8;
            max-width: 360px;
        }
        .footer-title {
            color: #fff;
            font-size: .95rem;
            font-weight: 600;
            margin-bottom: 16px;
            position: relative;
            padding-bottom: 8px;
        }
        .footer-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 24px;
            height: 2px;
            background: var(--color-gold);
        }
        .footer-links {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-links a {
            color: var(--dark-ink);
            font-size: .88rem;
            transition: color .2s ease, padding-left .2s ease;
        }
        .footer-links a:hover {
            color: var(--color-gold);
            padding-left: 4px;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            padding-top: 24px;
            color: rgba(255, 253, 248, 0.45);
            font-size: .78rem;
        }

        /* Bootstrap 覆写 */
        .btn,
        .form-control,
        .form-select {
            border-radius: 10px;
        }

        /* ============ 响应式 ============ */
        @media (max-width: 991px) {
            .dock-nav {
                display: none;
            }
            .dock-toggle {
                display: flex;
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px;
            }
        }
        @media (max-width: 767px) {
            .dock-brand .brand-sub {
                display: none;
            }
            .dock-search-item {
                display: none;
            }
            .dock-navbar {
                padding: 8px 16px 8px 20px;
                min-height: 60px;
            }
            .related-cards {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .article-reading {
                padding: 30px 20px;
            }
            .article-toolbar {
                padding: 0 20px;
            }
            .breadcrumb-bar {
                padding: 20px 0 6px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
        }
        @media (max-width: 575px) {
            .container,
            .catalog-container {
                padding-left: 18px;
                padding-right: 18px;
            }
            .dock-wrapper {
                padding-top: 12px;
            }
            .dock-navbar {
                border-radius: 40px;
            }
            .article-head {
                padding: 24px 18px;
            }
            .article-meta {
                flex-direction: column;
                gap: 6px;
            }
            .article-actions {
                flex-direction: column;
                align-items: flex-start;
            }
            .prev-next {
                width: 100%;
            }
            .related-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }

/* roulang page: category1 */
:root {
			--color-bg: #F6F2E9;
			--color-surface: #FFFDF8;
			--color-ink: #182B25;
			--color-muted: #5D6E68;
			--color-forest: #0A241E;
			--color-pine: #134F3D;
			--color-jade: #268F73;
			--color-gold: #E9A23B;
			--color-gold-hover: #F1B45B;
			--color-line: rgba(19, 79, 61, 0.14);
			--color-white-soft: rgba(255, 253, 248, 0.72);
			--shadow-card: 0 10px 30px rgba(10, 36, 30, 0.06);
			--shadow-card-hover: 0 18px 44px rgba(10, 36, 30, 0.12);
			--font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			font-family: var(--font-sans);
			background: var(--color-bg);
			color: var(--color-ink);
			line-height: 1.8;
			font-size: 16px;
			-webkit-font-smoothing: antialiased;
			overflow-x: hidden;
		}

		img {
			max-width: 100%;
			display: block;
		}

		a {
			color: var(--color-jade);
			text-decoration: none;
			transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
		}

		button,
		input {
			font-family: inherit;
		}

		button:focus-visible,
		a:focus-visible,
		input:focus-visible {
			outline: 3px solid rgba(38, 143, 115, 0.4);
			outline-offset: 3px;
		}

		.container {
			max-width: 1200px;
			padding-left: 24px;
			padding-right: 24px;
		}

		.section-pad {
			padding-top: 88px;
			padding-bottom: 96px;
		}

		.section-head {
			margin-bottom: 34px;
		}

		.section-head h2,
		.section-head p {
			margin: 0;
		}

		.section-head h2 {
			font-size: clamp(1.65rem, 3vw, 2.15rem);
			font-weight: 700;
			color: var(--color-forest);
			margin-top: 8px;
			margin-bottom: 10px;
			letter-spacing: .5px;
		}

		.section-head .lead {
			color: var(--color-muted);
			max-width: 760px;
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--color-jade);
			font-size: .9rem;
			font-weight: 600;
			letter-spacing: 1px;
		}

		.eyebrow::before {
			content: "";
			width: 28px;
			height: 2px;
			background: var(--color-gold);
			border-radius: 2px;
		}

		.eyebrow-light {
			color: var(--color-gold-hover);
		}

		.more-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-weight: 600;
			color: var(--color-pine);
			white-space: nowrap;
		}

		.more-link i {
			transition: transform .25s ease;
		}

		.more-link:hover {
			color: var(--color-jade);
		}

		.more-link:hover i {
			transform: translateX(4px);
		}

		.btn-main,
		.btn-line,
		.btn-ghost {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			border-radius: 999px;
			font-weight: 600;
			line-height: 1;
			border: 1px solid transparent;
			padding: 12px 24px;
			transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease, border-color .25s ease;
		}

		.btn-main {
			background: var(--color-gold);
			color: var(--color-forest);
			box-shadow: 0 12px 30px rgba(233, 162, 59, 0.24);
		}

		.btn-main:hover {
			background: var(--color-gold-hover);
			color: var(--color-forest);
			transform: translateY(-2px);
			box-shadow: 0 16px 34px rgba(233, 162, 59, 0.32);
		}

		.btn-line {
			border-color: rgba(255, 253, 248, 0.82);
			color: #fff;
			background: transparent;
		}

		.btn-line:hover {
			background: rgba(255, 253, 248, 0.12);
			color: #fff;
			border-color: #fff;
			transform: translateY(-2px);
		}

		.btn-ghost {
			border-color: var(--color-pine);
			color: var(--color-pine);
		}

		.btn-ghost:hover {
			background: var(--color-forest);
			color: #fff;
			border-color: var(--color-forest);
		}

		.site-dock {
			position: fixed;
			top: 16px;
			left: 0;
			right: 0;
			z-index: 1080;
			padding: 0 16px;
		}

		.dock-shell {
			max-width: 1060px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 8px 10px 8px 14px;
			background: rgba(10, 36, 30, 0.92);
			border: 1px solid rgba(255, 253, 248, 0.06);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			border-radius: 999px;
			box-shadow: 0 18px 44px rgba(10, 36, 30, 0.24);
		}

		.dock-logo {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			white-space: nowrap;
			flex-shrink: 0;
		}

		.logo-glyph {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			flex: 0 0 40px;
			border-radius: 50%;
			background: var(--color-gold);
			color: var(--color-forest);
			font-size: 1.2rem;
		}

		.logo-copy {
			color: #fff;
			font-weight: 700;
			font-size: 1.05rem;
			letter-spacing: .4px;
		}

		.dock-links {
			display: flex;
			align-items: center;
			gap: 2px;
			margin-left: auto;
		}

		.dock-links a {
			position: relative;
			display: inline-flex;
			align-items: center;
			padding: 9px 14px;
			border-radius: 999px;
			font-size: .88rem;
			font-weight: 500;
			color: rgba(255, 253, 248, 0.74);
			white-space: nowrap;
		}

		.dock-links a:hover {
			color: #fff;
			background: rgba(255, 253, 248, 0.09);
		}

		.dock-links .active {
			background: rgba(255, 253, 248, 0.13);
			color: #fff;
		}

		.dock-links .active::after {
			content: "";
			position: absolute;
			left: 50%;
			bottom: 5px;
			width: 12px;
			height: 2px;
			border-radius: 2px;
			background: var(--color-gold);
			transform: translateX(-50%);
		}

		.dock-tools {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			flex-shrink: 0;
		}

		.btn-dock {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			padding: 9px 15px;
			border-radius: 999px;
			background: var(--color-gold);
			color: var(--color-forest);
			font-size: .85rem;
			font-weight: 600;
			white-space: nowrap;
		}

		.btn-dock:hover {
			background: var(--color-gold-hover);
			color: var(--color-forest);
		}

		.dock-burger {
			display: none;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background: rgba(255, 253, 248, 0.1);
			color: #fff;
			font-size: 1.35rem;
		}

		.dock-mobile {
			position: absolute;
			left: 16px;
			right: 16px;
			top: calc(100% + 10px);
			display: none;
			max-width: 1060px;
			margin: 0 auto;
			padding: 14px;
			border-radius: 24px;
			background: rgba(10, 36, 30, 0.97);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			box-shadow: 0 18px 44px rgba(10, 36, 30, 0.28);
		}

		.mobile-nav {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		.mobile-nav a {
			padding: 12px 14px;
			border-radius: 14px;
			color: rgba(255, 253, 248, 0.82);
			font-weight: 500;
		}

		.mobile-nav a:hover,
		.mobile-nav a.active {
			background: rgba(255, 253, 248, 0.1);
			color: #fff;
		}

		.site-dock.is-open .dock-mobile {
			display: block;
		}

		.banner-section {
			position: relative;
			padding: 168px 0 74px;
			background-image: url('/assets/images/backpic/back-1.png');
			background-position: center;
			background-size: cover;
			background-color: var(--color-forest);
		}

		.banner-section::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(100deg, rgba(10, 36, 30, 0.95) 0%, rgba(19, 79, 61, 0.83) 52%, rgba(10, 36, 30, 0.5) 100%);
		}

		.banner-inner {
			position: relative;
			z-index: 2;
		}

		.crumb {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;
			font-size: .86rem;
			color: rgba(255, 253, 248, 0.6);
			margin-bottom: 32px;
		}

		.crumb a {
			color: rgba(255, 253, 248, 0.78);
			font-weight: 500;
		}

		.crumb a:hover {
			color: var(--color-gold-hover);
		}

		.banner-title {
			color: #fff;
			font-size: clamp(2rem, 4.6vw, 3.3rem);
			line-height: 1.25;
			font-weight: 700;
			max-width: 12em;
			margin: 12px 0 18px;
		}

		.banner-title span {
			color: var(--color-gold);
		}

		.banner-sub {
			max-width: 680px;
			color: rgba(255, 253, 248, 0.82);
			font-size: 1.05rem;
			margin-bottom: 28px;
		}

		.banner-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-bottom: 34px;
		}

		.banner-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		.banner-tags span {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 7px 14px;
			border-radius: 999px;
			background: rgba(255, 253, 248, 0.1);
			border: 1px solid rgba(255, 253, 248, 0.14);
			color: rgba(255, 253, 248, 0.82);
			font-size: .84rem;
		}

		.banner-tags span::before {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--color-gold);
		}

		.directory-section {
			background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
		}

		.dir-lead {
			color: var(--color-muted);
			max-width: 760px;
		}

		.directory-list {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin-top: 8px;
		}

		.dir-row {
			display: flex;
			align-items: center;
			gap: 20px;
			width: 100%;
			padding: 24px 26px;
			border-radius: 18px;
			background: var(--color-surface);
			border: 1px solid rgba(19, 79, 61, 0.07);
			box-shadow: var(--shadow-card);
			transition: transform .25s ease, box-shadow .25s ease;
		}

		.dir-row:hover {
			transform: translateY(-4px);
			box-shadow: var(--shadow-card-hover);
		}

		.dir-index {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 auto;
			width: 92px;
			height: 92px;
			border-radius: 18px;
			background: var(--color-forest);
			color: #fff;
			font-size: 1.9rem;
			font-weight: 700;
			letter-spacing: 0.5px;
			font-variant-numeric: tabular-nums;
		}

		.dir-body {
			flex: 1 1 auto;
			min-width: 0;
		}

		.dir-body h3 {
			font-size: 1.18rem;
			font-weight: 700;
			color: var(--color-forest);
			margin: 0 0 6px;
			letter-spacing: .4px;
		}

		.dir-body p {
			color: var(--color-muted);
			font-size: .95rem;
			margin: 0;
			line-height: 1.75;
			max-width: 880px;
		}

		.dir-arrow {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			border: 1px solid rgba(19, 79, 61, 0.16);
			color: var(--color-pine);
			font-size: 1.1rem;
			background: rgba(255, 253, 248, 0.6);
		}

		.dir-row:hover .dir-arrow {
			background: var(--color-gold);
			border-color: var(--color-gold);
			color: var(--color-forest);
			transform: translateX(4px);
		}

		.route-section {
			background: var(--color-surface);
		}

		.route-card {
			border-radius: 28px;
			background: var(--color-surface);
			border: 1px solid rgba(19, 79, 61, 0.08);
			box-shadow: var(--shadow-card);
			overflow: hidden;
		}

		.route-grid {
			display: grid;
			grid-template-columns: 1.05fr .95fr;
			min-height: 440px;
		}

		.route-copy {
			padding: clamp(28px, 5vw, 58px);
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.route-copy h2 {
			font-size: clamp(1.55rem, 2.8vw, 2.15rem);
			color: var(--color-forest);
			font-weight: 700;
			margin: 8px 0 12px;
		}

		.route-lead {
			color: var(--color-muted);
			margin-bottom: 24px;
		}

		.route-steps {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
		}

		.route-steps li {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			padding: 13px 0;
			border-bottom: 1px dashed rgba(19, 79, 61, 0.16);
		}

		.route-steps li:last-child {
			border-bottom: 0;
		}

		.step-dot {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			flex: 0 0 34px;
			border-radius: 50%;
			background: var(--color-pine);
			color: #fff;
			font-weight: 700;
			font-size: .88rem;
		}

		.route-steps strong {
			color: var(--color-forest);
			font-size: 1rem;
			display: block;
		}

		.route-steps p {
			color: var(--color-muted);
			margin: 4px 0 0;
			font-size: .9rem;
			line-height: 1.65;
		}

		.route-media {
			position: relative;
			min-height: 320px;
			height: 100%;
			overflow: hidden;
		}

		.route-media img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			inset: 0;
		}

		.route-media::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(10, 36, 30, 0) 55%, rgba(10, 36, 30, 0.72) 100%);
		}

		.media-note {
			position: absolute;
			left: 22px;
			bottom: 20px;
			z-index: 2;
			margin: 0;
			color: rgba(255, 253, 248, 0.88);
			font-size: .9rem;
		}

		.tips-section {
			background: linear-gradient(125deg, var(--color-forest) 0%, #103A2D 58%, #145039 100%);
		}

		.tips-section h2 {
			color: #fff;
			font-size: clamp(1.5rem, 2.8vw, 2.1rem);
			font-weight: 700;
			margin: 10px 0 14px;
			line-height: 1.35;
		}

		.tips-section .tips-lead {
			color: var(--color-white-soft);
			max-width: 620px;
			margin-bottom: 22px;
		}

		.tips-grid {
			display: grid;
			grid-template-columns: .95fr 1.05fr;
			gap: 42px;
			align-items: center;
		}

		.tips-media {
			position: relative;
			border-radius: 26px;
			overflow: hidden;
			box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
		}

		.tips-media img {
			width: 100%;
			aspect-ratio: 4 / 3;
			object-fit: cover;
		}

		.tips-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			gap: 14px;
		}

		.tips-list li {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 12px 6px;
			border-bottom: 1px solid rgba(255, 253, 248, 0.1);
			color: rgba(255, 253, 248, 0.86);
			font-size: .98rem;
		}

		.tips-list li:last-child {
			border-bottom: 0;
		}

		.tips-list i {
			color: var(--color-gold);
			font-size: 1.2rem;
			line-height: 1.4;
		}

		.faq-section {
			background: var(--color-bg);
		}

		.faq-wrap {
			max-width: 900px;
			margin: 0 auto;
		}

		.faq-accent {
			margin-bottom: 24px;
			text-align: center;
		}

		.faq-accent .eyebrow::before {
			display: none;
		}

		.faq-accent .eyebrow {
			justify-content: center;
		}

		.faq-accent h2 {
			margin: 8px 0 12px;
			color: var(--color-forest);
			font-weight: 700;
		}

		.faq-accent p {
			color: var(--color-muted);
			margin: 0;
		}

		.faq-list {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.faq-item {
			background: var(--color-surface);
			border: 1px solid rgba(19, 79, 61, 0.08);
			border-radius: 18px;
			box-shadow: var(--shadow-card);
			overflow: hidden;
		}

		.faq-item .accordion-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			gap: 16px;
			padding: 19px 22px;
			background: var(--color-surface);
			color: var(--color-forest);
			font-weight: 600;
			font-size: 1rem;
			border: 0;
			box-shadow: none;
			border-radius: 18px;
			transition: background .2s ease;
		}

		.faq-item .accordion-button::after {
			display: none;
		}

		.faq-item .accordion-button:not(.collapsed) {
			color: var(--color-pine);
			border-radius: 18px 18px 0 0;
		}

		.faq-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			flex: 0 0 32px;
			border-radius: 50%;
			border: 1px solid rgba(19, 79, 61, 0.2);
			color: var(--color-pine);
			font-size: 1.05rem;
			line-height: 1;
			transition: transform .3s ease, background .25s ease, color .25s ease;
		}

		.faq-item .accordion-button:not(.collapsed) .faq-icon {
			transform: rotate(45deg);
			background: var(--color-gold);
			border-color: var(--color-gold);
			color: var(--color-forest);
		}

		.faq-item .accordion-body {
			padding: 0 22px 20px;
			color: var(--color-muted);
			font-size: .96rem;
			border-top: 1px solid rgba(19, 79, 61, 0.06);
			margin-top: 0;
		}

		.cta-section {
			position: relative;
			background:
				radial-gradient(circle at 85% 15%, rgba(233, 162, 59, 0.16), transparent 30%),
				linear-gradient(130deg, #071C17 0%, #0A241E 52%, #134F3D 100%);
			color: #fff;
			border-top: 1px solid rgba(255, 253, 248, 0.07);
		}

		.cta-inner {
			position: relative;
			max-width: 900px;
			margin: 0 auto;
			text-align: center;
			background: rgba(255, 253, 248, 0.04);
			border: 1px solid rgba(255, 253, 248, 0.12);
			border-radius: 30px;
			padding: clamp(32px, 5vw, 60px);
			overflow: hidden;
		}

		.cta-inner::before {
			content: "\F4A5";
			font-family: "bootstrap-icons";
			position: absolute;
			right: -24px;
			bottom: -24px;
			font-size: 8rem;
			opacity: .05;
			transform: rotate(-12deg);
			line-height: 1;
		}

		.cta-kicker {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--color-gold);
			font-weight: 600;
			font-size: .9rem;
			margin-bottom: 8px;
		}

		.cta-kicker::before {
			content: "";
			width: 24px;
			height: 2px;
			background: var(--color-gold);
		}

		.cta-inner h2 {
			color: #fff;
			font-weight: 700;
			font-size: clamp(1.75rem, 3.4vw, 2.6rem);
			line-height: 1.32;
			margin: 10px auto 14px;
			max-width: 14em;
		}

		.cta-inner p {
			color: var(--color-white-soft);
			margin: 0 auto 28px;
			max-width: 620px;
		}

		.cta-actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 14px;
			position: relative;
			z-index: 2;
		}

		.site-footer {
			background: #071B16;
			color: rgba(255, 253, 248, 0.72);
			padding-top: 66px;
			padding-bottom: 30px;
		}

		.footer-grid {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr;
			gap: 44px;
		}

		.footer-brand-name {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: #fff;
			font-size: 1.14rem;
			font-weight: 700;
		}

		.footer-brand-name i {
			color: var(--color-gold);
		}

		.footer-brand p {
			margin: 14px 0 0;
			max-width: 400px;
			color: rgba(255, 253, 248, 0.62);
			font-size: .94rem;
		}

		.footer-title {
			color: #fff;
			font-weight: 600;
			font-size: .95rem;
			margin-bottom: 15px;
		}

		.footer-links {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 9px;
		}

		.footer-links a {
			color: rgba(255, 253, 248, 0.62);
			font-size: .93rem;
		}

		.footer-links a:hover {
			color: var(--color-gold-hover);
		}

		.footer-bottom {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			border-top: 1px solid rgba(255, 253, 248, 0.1);
			margin-top: 48px;
			padding-top: 22px;
			font-size: .85rem;
			color: rgba(255, 253, 248, 0.46);
		}

		.toast-tip {
			position: fixed;
			left: 50%;
			bottom: 30px;
			z-index: 1100;
			transform: translateX(-50%) translateY(20px);
			min-width: 240px;
			max-width: calc(100% - 40px);
			padding: 12px 20px;
			border-radius: 999px;
			background: #fff;
			color: var(--color-forest);
			box-shadow: 0 16px 40px rgba(10, 36, 30, 0.2);
			font-size: .92rem;
			text-align: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
		}

		.toast-tip.show {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
		}

		@media (max-width: 991.98px) {
			.dock-links {
				display: none;
			}

			.dock-burger {
				display: inline-flex;
			}

			.dock-cta-label {
				display: none;
			}

			.btn-dock {
				padding: 10px 13px;
			}
		}

		@media (max-width: 767.98px) {
			.section-pad {
				padding-top: 56px;
				padding-bottom: 62px;
			}

			.dock-shell {
				border-radius: 30px;
				padding: 8px 8px 8px 10px;
			}

			.logo-glyph {
				width: 36px;
				height: 36px;
				flex-basis: 36px;
				font-size: 1.05rem;
			}

			.logo-copy {
				font-size: .94rem;
			}

			.dock-tools {
				gap: 4px;
			}

			.btn-dock {
				width: 42px;
				padding: 0;
				justify-content: center;
			}

			.dir-row {
				flex-wrap: wrap;
				gap: 16px;
				padding: 18px;
			}

			.dir-index {
				width: 70px;
				height: 70px;
				font-size: 1.6rem;
				border-radius: 16px;
			}

			.route-grid {
				grid-template-columns: 1fr;
			}

			.route-media {
				position: relative;
				min-height: 260px;
				order: -1;
			}

			.tips-grid {
				grid-template-columns: 1fr;
				gap: 26px;
			}

			.footer-grid {
				grid-template-columns: 1fr;
				gap: 34px;
			}

			.footer-bottom {
				flex-direction: column;
				align-items: flex-start;
			}
		}

		@media (max-width: 575.98px) {
			body {
				font-size: 15px;
			}

			.container {
				padding-left: 18px;
				padding-right: 18px;
			}

			.site-dock {
				padding: 0 8px;
				top: 10px;
			}

			.dock-shell {
				padding: 6px 6px 6px 8px;
				border-radius: 24px;
			}

			.logo-glyph {
				width: 34px;
				height: 34px;
				flex-basis: 34px;
			}

			.logo-copy {
				font-size: .88rem;
			}

			.dock-logo {
				gap: 6px;
			}

			.btn-dock {
				width: 38px;
				height: 38px;
				font-size: 1rem;
			}

			.dock-burger {
				width: 38px;
				height: 38px;
				font-size: 1.3rem;
			}

			.banner-section {
				padding: 130px 0 52px;
			}

			.banner-title {
				font-size: clamp(1.72rem, 7vw, 2.3rem);
			}

			.banner-actions .btn-main,
			.banner-actions .btn-line {
				width: 100%;
			}

			.dir-row {
				flex-direction: column;
				align-items: flex-start;
			}

			.dir-index {
				width: 58px;
				height: 58px;
				font-size: 1.4rem;
				border-radius: 14px;
			}

			.dir-arrow {
				position: absolute;
				right: 14px;
				top: 22px;
			}

			.route-copy {
				padding: 24px 20px;
			}

			.route-media {
				min-height: 200px;
			}

			.tips-list li {
				font-size: .92rem;
			}

			.faq-item .accordion-button {
				padding: 15px 15px;
				font-size: .95rem;
			}

			.faq-item .accordion-body {
				padding: 0 15px 17px;
				font-size: .92rem;
			}

			.cta-actions .btn-main,
			.cta-actions .btn-line {
				width: 100%;
			}
		}

/* roulang page: category2 */
:root {
            --color-bg: #F6F2E9;
            --color-surface: #FFFDF8;
            --color-ink: #182B25;
            --color-muted: #5D6E68;
            --color-forest: #0A241E;
            --color-pine: #134F3D;
            --color-jade: #268F73;
            --color-gold: #E9A23B;
            --color-gold-hover: #F1B45B;
            --color-line: rgba(19, 79, 61, 0.14);
            --shadow-card: 0 10px 30px rgba(10, 36, 30, 0.06);
            --shadow-lift: 0 18px 44px rgba(10, 36, 30, 0.12);
            --radius-card: 18px;
            --radius-panel: 28px;
            --radius-pill: 999px;
            --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--color-bg);
            color: var(--color-ink);
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        a:hover {
            color: var(--color-jade);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--color-ink);
            font-weight: 700;
            line-height: 1.35;
            margin: 0 0 .5em;
        }

        p {
            margin: 0 0 1em;
        }

        .container {
            max-width: 1200px;
            padding-left: 24px;
            padding-right: 24px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: var(--radius-pill) !important;
            font-weight: 600;
            font-size: .95rem;
            padding: .62rem 1.45rem;
            border: 1px solid transparent;
            transition: all .25s ease;
        }

        .btn-gold {
            background: var(--color-gold);
            color: var(--color-forest) !important;
            border-color: var(--color-gold);
        }

        .btn-gold:hover {
            background: var(--color-gold-hover);
            border-color: var(--color-gold-hover);
            box-shadow: 0 8px 20px rgba(233, 162, 59, .26);
            transform: translateY(-2px);
        }

        .btn-ghost-light {
            background: transparent;
            color: #FFFDF8 !important;
            border-color: rgba(255, 253, 248, .72);
        }

        .btn-ghost-light:hover {
            background: rgba(255, 253, 248, .14);
            border-color: #FFFDF8;
            color: #FFFDF8 !important;
        }

        .btn-ghost-dark {
            background: transparent;
            color: var(--color-pine) !important;
            border-color: rgba(19, 79, 61, .46);
        }

        .btn-ghost-dark:hover {
            background: rgba(19, 79, 61, .08);
            border-color: var(--color-pine);
            color: var(--color-pine) !important;
        }

        .btn:focus-visible,
        .dock-toggle:focus-visible,
        a:focus-visible {
            outline: 3px solid rgba(233, 162, 59, .55);
            outline-offset: 3px;
        }

        .section-space {
            padding: 76px 0;
        }

        .section-space-sm {
            padding: 52px 0;
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 38px;
            flex-wrap: wrap;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--color-jade);
            font-size: .875rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: .04em;
        }

        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 28px;
            height: 4px;
            border-radius: var(--radius-pill);
            background: var(--color-gold);
        }

        .section-title {
            font-size: clamp(1.6rem, 3vw, 2.05rem);
            margin-bottom: .35em;
        }

        .section-desc {
            color: var(--color-muted);
            max-width: 680px;
            margin: 0;
        }

        .more-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--color-jade);
            font-weight: 600;
            font-size: .9rem;
        }

        .more-link i {
            transition: transform .2s ease;
        }

        .more-link:hover i {
            transform: translateX(4px);
        }

        .tag-pill {
            display: inline-block;
            background: rgba(38, 143, 115, .14);
            color: var(--color-pine);
            font-size: .78rem;
            font-weight: 600;
            padding: .25rem .8rem;
            border-radius: var(--radius-pill);
            line-height: 1.6;
        }

        .mark-soft {
            background: rgba(233, 162, 59, .16);
        }

        /* 浮动 Dock 导航 */
        .site-header {
            position: sticky;
            top: 10px;
            z-index: 1040;
            padding: 0 14px;
        }

        .dock-bar {
            max-width: 1060px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(10, 36, 30, .92);
            border: 1px solid rgba(255, 253, 248, .12);
            border-radius: var(--radius-pill);
            padding: 9px 16px 9px 18px;
            box-shadow: 0 18px 48px rgba(10, 36, 30, .22);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .dock-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #FFFDF8;
            padding-right: 6px;
        }

        .dock-brand:hover {
            color: var(--color-gold-hover);
        }

        .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(233, 162, 59, .18);
            color: var(--color-gold);
            font-size: 1.05rem;
            flex: 0 0 auto;
        }

        .brand-line {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            justify-content: center;
        }

        .brand-main {
            font-weight: 700;
            font-size: 1rem;
            color: #FFFDF8;
            letter-spacing: .01em;
            white-space: nowrap;
        }

        .brand-sub {
            font-size: .7rem;
            color: rgba(255, 253, 248, .55);
            letter-spacing: .08em;
        }

        .dock-links {
            display: flex;
            gap: 2px;
            margin: 0 auto;
            align-items: center;
        }

        .dock-link {
            padding: .4rem .98rem;
            color: rgba(255, 253, 248, .72);
            font-size: .9rem;
            font-weight: 500;
            border-radius: var(--radius-pill);
            line-height: 1.5;
            white-space: nowrap;
        }

        .dock-link:hover {
            background: rgba(255, 253, 248, .1);
            color: #FFFDF8;
        }

        .dock-link.active {
            background: rgba(233, 162, 59, .18);
            color: #FFF3D6;
        }

        .dock-search {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .dock-search .search-input {
            width: 168px;
            padding: .44rem 1rem .44rem 2.45rem;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 253, 248, .18);
            background: rgba(255, 253, 248, .1);
            color: #FFFDF8;
            font-size: .85rem;
            transition: width .25s ease, border-color .25s ease;
        }

        .dock-search .search-input::placeholder {
            color: rgba(255, 253, 248, .55);
        }

        .dock-search .search-input:focus {
            width: 210px;
            outline: none;
            border-color: rgba(233, 162, 59, .8);
            background: rgba(255, 253, 248, .18);
        }

        .dock-search .search-btn {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: 0;
            color: rgba(255, 253, 248, .7);
            padding: 2px;
            font-size: .9rem;
            line-height: 1;
        }

        .dock-cta {
            background: var(--color-gold);
            color: var(--color-forest) !important;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: .85rem;
            padding: .52rem 1.2rem;
            white-space: nowrap;
        }

        .dock-cta:hover {
            background: var(--color-gold-hover);
            color: var(--color-forest) !important;
            box-shadow: 0 6px 18px rgba(233, 162, 59, .3);
        }

        .dock-toggle {
            display: none;
            width: 42px;
            height: 42px;
            justify-content: center;
            align-items: center;
            background: rgba(255, 253, 248, .12);
            border: 1px solid rgba(255, 253, 248, .15);
            border-radius: 50%;
            color: #FFFDF8;
            font-size: 1.2rem;
            padding: 0;
        }

        .dock-toggle:hover {
            background: rgba(255, 253, 248, .2);
            color: var(--color-gold-hover);
        }

        .mobile-dock {
            max-width: 1060px;
            margin: -8px auto 0;
            background: rgba(10, 36, 30, .97);
            border: 1px solid rgba(255, 253, 248, .1);
            border-radius: 0 0 22px 22px;
            padding: 24px 24px 22px;
            color: #FFFDF8;
            box-shadow: 0 20px 40px rgba(10, 36, 30, .25);
        }

        .mobile-dock-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px 24px;
        }

        .mobile-dock-grid a {
            display: block;
            color: rgba(255, 253, 248, .85);
            padding: 9px 6px;
            border-radius: 12px;
            font-weight: 600;
            font-size: .95rem;
        }

        .mobile-dock-grid a:hover,
        .mobile-dock-grid a.active {
            color: var(--color-gold-hover);
            background: rgba(233, 162, 59, .12);
        }

        @media (min-width: 992px) {
            .mobile-dock {
                display: none !important;
            }
        }

        @media (max-width: 991.98px) {
            .dock-links {
                display: none;
            }

            .dock-toggle {
                display: inline-flex;
            }

            .dock-search .search-input {
                width: 140px;
            }

            .dock-search .search-input:focus {
                width: 160px;
            }

            .dock-cta {
                display: inline-flex;
            }
        }

        @media (max-width: 575.98px) {
            .dock-bar {
                padding-left: 12px;
                padding-right: 12px;
                gap: 6px;
            }

            .brand-sub {
                display: none;
            }

            .brand-main {
                font-size: .9rem;
            }

            .brand-icon {
                width: 30px;
                height: 30px;
            }

            .dock-search .search-input {
                width: 30px;
                padding-left: 1.5rem;
                border-color: transparent;
                background: transparent;
                cursor: pointer;
                opacity: .8;
            }

            .dock-search .search-btn {
                left: 8px;
            }

            .dock-search .search-input::placeholder {
                color: transparent;
            }

            .dock-cta {
                display: none;
            }
        }

        /* 页脚 */
        .site-footer {
            background: var(--color-forest);
            color: rgba(255, 253, 248, .78);
            padding: 68px 0 0;
            margin-top: 26px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr .9fr .85fr;
            gap: 40px;
            padding-bottom: 48px;
        }

        .footer-brand-name {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #FFFDF8;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 12px;
        }

        .footer-brand-name i {
            color: var(--color-gold);
            font-size: 1.25rem;
        }

        .footer-brand-name:hover {
            color: var(--color-gold-hover);
        }

        .footer-brand p {
            color: rgba(255, 253, 248, .62);
            font-size: .92rem;
            margin: 0;
            max-width: 360px;
        }

        .footer-title {
            color: #FFFDF8;
            font-weight: 600;
            margin-bottom: 18px;
            font-size: .95rem;
            letter-spacing: .03em;
        }

        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 11px;
        }

        .footer-links a {
            color: rgba(255, 253, 248, .68);
            font-size: .92rem;
        }

        .footer-links a:hover {
            color: var(--color-gold-hover);
            padding-left: 3px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 253, 248, .14);
            padding: 22px 0;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: .85rem;
            color: rgba(255, 253, 248, .5);
        }

        @media (max-width: 991.98px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 34px;
            }
        }

        @media (max-width: 575.98px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }
        }

        /* Hero */
        .hero-section {
            padding-top: 26px;
        }

        .hero-panel {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            color: #FFFDF8;
            padding: 70px 62px;
            background:
                linear-gradient(108deg, rgba(10, 36, 30, .96) 0%, rgba(19, 79, 61, .9) 52%, rgba(38, 143, 115, .38) 100%),
                url('/assets/images/backpic/back-1.png') center center / cover;
            box-shadow: var(--shadow-lift);
        }

        .breadcrumb-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: .82rem;
            color: rgba(255, 253, 248, .6);
            margin-bottom: 34px;
            position: relative;
            z-index: 2;
        }

        .breadcrumb-nav a {
            color: rgba(255, 253, 248, .72);
        }

        .breadcrumb-nav a:hover {
            color: var(--color-gold-hover);
        }

        .breadcrumb-nav .breadcrumb-dot {
            color: rgba(255, 253, 248, .35);
        }

        .breadcrumb-nav .cur {
            color: rgba(255, 253, 248, .95);
        }

        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
            gap: 48px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-title {
            color: #FFFDF8;
            font-size: clamp(2rem, 4.2vw, 3.25rem);
            line-height: 1.18;
            margin: 0 0 16px;
            font-weight: 700;
        }

        .hero-title .hero-cat {
            color: var(--color-gold-hover);
            display: block;
            font-size: .72em;
            letter-spacing: .04em;
        }

        .hero-lead {
            font-size: 1.05rem;
            color: rgba(255, 253, 248, .82);
            max-width: 520px;
            margin-bottom: 24px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .hero-note {
            background: rgba(255, 253, 248, .1);
            border: 1px solid rgba(255, 253, 248, .16);
            border-radius: 22px;
            padding: 24px 26px;
        }

        .hero-note h2 {
            color: #FFFDF8;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-note h2 i {
            color: var(--color-gold);
        }

        .hero-note ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .hero-note li {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            color: rgba(255, 253, 248, .82);
            font-size: .9rem;
            padding: 5px 0;
        }

        .hero-note li i {
            color: var(--color-gold);
            margin-top: 6px;
        }

        .hero-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 30px;
        }

        .hero-strip span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 253, 248, .1);
            border: 1px solid rgba(255, 253, 248, .14);
            border-radius: var(--radius-pill);
            padding: .25rem .95rem;
            color: rgba(255, 253, 248, .82);
            font-size: .82rem;
        }

        @media (max-width: 991.98px) {
            .hero-panel {
                padding: 46px 36px;
                border-radius: 24px;
            }

            .hero-layout {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        @media (max-width: 575.98px) {
            .hero-panel {
                padding: 34px 22px;
                border-radius: 20px;
            }

            .breadcrumb-nav {
                margin-bottom: 24px;
            }
        }

        /* 分类引导卡片 */
        .bridge-wrap {
            background: transparent;
        }

        .bridge-cards {
            display: grid;
            grid-template-columns: 1.1fr .9fr .9fr;
            gap: 22px;
        }

        .bridge-card {
            border-radius: var(--radius-panel);
            background: var(--color-surface);
            border: 1px solid rgba(19, 79, 61, .07);
            padding: 30px 28px;
            box-shadow: var(--shadow-card);
            transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
            position: relative;
            min-height: 230px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .bridge-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lift);
            border-color: rgba(38, 143, 115, .32);
        }

        .bridge-card.feature-card {
            background: var(--color-forest);
            border-color: transparent;
            color: rgba(255, 253, 248, .76);
        }

        .bridge-card.feature-card h3 {
            color: #FFFDF8;
        }

        .bridge-card .bridge-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .bridge-card .num {
            color: var(--color-jade);
            font-weight: 700;
            font-size: 1.3rem;
            letter-spacing: .06em;
        }

        .bridge-card.feature-card .num {
            color: var(--color-gold);
        }

        .bridge-card .icon-badge {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            background: rgba(38, 143, 115, .14);
            color: var(--color-jade);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .bridge-card.feature-card .icon-badge {
            background: rgba(233, 162, 59, .18);
            color: var(--color-gold);
        }

        .bridge-card h3 {
            font-size: 1.22rem;
            margin-bottom: 8px;
        }

        .bridge-card p {
            color: var(--color-muted);
            font-size: .92rem;
            margin: 0 0 20px;
        }

        .bridge-card.feature-card p {
            color: rgba(255, 253, 248, .7);
        }

        .bridge-more {
            font-weight: 600;
            color: var(--color-jade);
            font-size: .88rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .bridge-card.feature-card .bridge-more {
            color: var(--color-gold-hover);
        }

        .bridge-more i {
            transition: transform .2s ease;
        }

        .bridge-card:hover .bridge-more i {
            transform: translateX(5px);
        }

        @media (max-width: 991.98px) {
            .bridge-cards {
                grid-template-columns: 1fr 1fr;
            }

            .bridge-card:first-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 575.98px) {
            .bridge-cards {
                grid-template-columns: 1fr;
            }

            .bridge-card:first-child {
                grid-column: auto;
            }
        }

        /* FAQ 列表型横卡 */
        .faq-section {
            background: linear-gradient(180deg, rgba(38, 143, 115, .04), rgba(38, 143, 115, .01) 100%);
        }

        .faq-listbox {
            max-width: 1060px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .faq-card {
            background: var(--color-surface);
            border: 1px solid rgba(19, 79, 61, .07);
            border-radius: 22px;
            box-shadow: var(--shadow-card);
            display: grid;
            grid-template-columns: 300px minmax(0, 1fr);
            gap: 0;
            overflow: hidden;
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .faq-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lift);
        }

        .faq-media {
            position: relative;
            overflow: hidden;
            min-height: 205px;
            display: block;
            background: var(--color-pine);
        }

        .faq-media img {
            width: 100%;
            height: 100%;
            min-height: 205px;
            object-fit: cover;
            transition: transform .45s ease;
        }

        .faq-card:hover .faq-media img {
            transform: scale(1.04);
        }

        .faq-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(10, 36, 30, 0) 45%, rgba(10, 36, 30, .33) 100%);
        }

        .faq-rank {
            position: absolute;
            left: 14px;
            top: 14px;
            z-index: 2;
            background: rgba(10, 36, 30, .8);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 253, 248, .18);
            color: #FFFDF8;
            border-radius: var(--radius-pill);
            font-size: .78rem;
            font-weight: 700;
            padding: .2rem .85rem;
            letter-spacing: .04em;
        }

        .faq-content {
            padding: 28px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .faq-kicker {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            font-size: .8rem;
            color: var(--color-muted);
            margin-bottom: 8px;
        }

        .faq-dot {
            width: 3px;
            height: 3px;
            background: rgba(19, 79, 61, .35);
            border-radius: 50%;
        }

        .faq-card h3 {
            font-size: 1.24rem;
            margin-bottom: 8px;
        }

        .faq-content .faq-answer {
            color: var(--color-muted);
            font-size: .95rem;
            margin: 0;
            line-height: 1.8;
        }

        .faq-extra {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 16px;
        }

        .faq-extra .guide-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--color-jade);
            font-weight: 600;
            font-size: .9rem;
        }

        .faq-extra .guide-link:hover {
            color: var(--color-pine);
        }

        .faq-extra .guide-link i {
            transition: transform .2s;
        }

        .faq-extra .guide-link:hover i {
            transform: translateX(4px);
        }

        @media (max-width: 767.98px) {
            .faq-card {
                grid-template-columns: 1fr;
            }

            .faq-media {
                min-height: 0;
                height: 210px;
            }

            .faq-media img {
                height: 210px;
                min-height: 0;
            }

            .faq-content {
                padding: 20px 20px 22px;
            }
        }

        /* 自查流程 */
        .stage-panel {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(104deg, rgba(10, 36, 30, .95), rgba(19, 79, 61, .78)),
                url('/assets/images/backpic/back-2.webp') center center / cover;
            border-radius: var(--radius-panel);
            padding: 54px 52px;
            color: rgba(255, 253, 248, .8);
        }

        .stage-panel .eyebrow {
            color: var(--color-gold-hover);
        }

        .stage-panel .section-title,
        .stage-panel .section-desc {
            color: #FFFDF8;
        }

        .stage-panel .section-desc {
            color: rgba(255, 253, 248, .72);
        }

        .stage-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 42px;
        }

        .stage-item {
            background: rgba(255, 253, 248, .09);
            border: 1px solid rgba(255, 253, 248, .14);
            border-radius: 18px;
            padding: 22px 20px 20px;
            transition: background .25s ease, transform .25s ease;
        }

        .stage-item:hover {
            background: rgba(255, 253, 248, .16);
            transform: translateY(-4px);
        }

        .stage-num {
            color: var(--color-gold);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: .06em;
            margin-bottom: 12px;
        }

        .stage-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #FFFDF8;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 6px;
        }

        .stage-item p {
            color: rgba(255, 253, 248, .68);
            font-size: .82rem;
            margin: 0;
            line-height: 1.7;
        }

        @media (max-width: 991.98px) {
            .stage-panel {
                padding: 40px 30px;
            }

            .stage-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575.98px) {
            .stage-panel {
                padding: 32px 20px;
                border-radius: 22px;
            }

            .stage-grid {
                grid-template-columns: 1fr;
                margin-top: 30px;
            }
        }

        /* 底部 CTA */
        .final-cta {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(106deg, rgba(10, 36, 30, .95), rgba(19, 79, 61, .88)),
                url('/assets/images/backpic/back-3.png') center center / cover;
            border-radius: var(--radius-panel);
            text-align: center;
            color: #FFFDF8;
            padding: 64px 40px;
        }

        .final-cta .small-cta-title {
            color: var(--color-gold-hover);
            font-weight: 600;
            margin-bottom: 10px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .final-cta h2 {
            color: #FFFDF8;
            font-size: clamp(1.5rem, 2.8vw, 2.2rem);
            margin: 0 auto 12px;
            max-width: 700px;
        }

        .final-cta p {
            color: rgba(255, 253, 248, .72);
            margin: 0 auto 28px;
            max-width: 640px;
        }

        .cta-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 13px;
        }

        .cta-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 24px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 253, 248, .16);
            font-size: .88rem;
        }

        .cta-links a {
            color: rgba(255, 253, 248, .76);
        }

        .cta-links a:hover {
            color: var(--color-gold-hover);
        }

        @media (max-width: 767.98px) {
            .final-cta {
                padding: 44px 22px;
                border-radius: 24px;
            }
        }

        button.plain-action {
            background: transparent;
            border: 0;
            padding: 0;
            font-family: inherit;
            cursor: pointer;
            line-height: inherit;
            color: inherit;
        }

/* roulang page: category3 */
:root {
			--bg: #F6F2E9;
			--surface: #FFFDF8;
			--ink: #182B25;
			--muted: #5D6E68;
			--forest: #0A241E;
			--pine: #134F3D;
			--jade: #268F73;
			--gold: #E9A23B;
			--gold-hover: #F1B45B;
			--line: rgba(19, 79, 61, 0.14);
			--dim-on-dark: rgba(255, 253, 248, 0.72);
			--shadow-soft: 0 10px 30px rgba(10, 36, 30, 0.06);
			--shadow-strong: 0 18px 44px rgba(10, 36, 30, 0.12);
			--radius-card: 18px;
			--radius-large: 28px;
			--font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			background: var(--bg);
			color: var(--ink);
			font-family: var(--font-family);
			font-size: 16px;
			line-height: 1.8;
			-webkit-font-smoothing: antialiased;
		}

		img {
			max-width: 100%;
			display: block;
		}

		ul,
		ol {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		a {
			color: var(--jade);
			text-decoration: none;
			transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
		}

		a:hover {
			color: var(--pine);
		}

		button,
		input {
			font-family: var(--font-family);
		}

		p {
			margin: 0;
		}

		.container {
			max-width: 1200px;
		}

		.section {
			padding: 80px 0;
		}

		a:focus-visible,
		button:focus-visible {
			outline: 3px solid rgba(233, 162, 59, 0.55);
			outline-offset: 3px;
			border-radius: 8px;
		}

		.btn {
			border-radius: 999px;
			font-weight: 600;
			line-height: 1.6;
			padding: 10px 24px;
			transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
		}

		.btn-gold {
			background-color: var(--gold);
			color: var(--forest);
			border: 1px solid var(--gold);
		}

		.btn-gold:hover,
		.btn-gold:focus,
		.btn-gold:active {
			background-color: var(--gold-hover);
			border-color: var(--gold-hover);
			color: var(--forest);
			box-shadow: 0 12px 26px rgba(233, 162, 59, 0.24);
			transform: translateY(-2px);
		}

		.btn-ghost-light {
			background: transparent;
			color: #fff;
			border: 1px solid rgba(255, 255, 255, 0.85);
		}

		.btn-ghost-light:hover,
		.btn-ghost-light:focus {
			background: rgba(255, 255, 255, 0.12);
			color: #fff;
			border-color: #fff;
		}

		.btn-ghost-green {
			background: transparent;
			color: var(--pine);
			border: 1px solid var(--pine);
		}

		.btn-ghost-green:hover,
		.btn-ghost-green:focus {
			background: var(--pine);
			color: #fff;
		}

		.site-header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1030;
			padding-top: 18px;
		}

		.dock-shell {
			max-width: 1120px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.dock-nav {
			background: rgba(10, 36, 30, 0.94);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			border-radius: 999px;
			box-shadow: 0 18px 40px rgba(10, 36, 30, 0.22);
			padding: 6px;
		}

		.brand-logo {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			color: #fff;
			font-size: 1.07rem;
			font-weight: 700;
			letter-spacing: 0.02em;
			line-height: 1.4;
			text-decoration: none;
			padding: 7px 12px;
			margin-left: 4px;
			border-radius: 999px;
		}

		.brand-logo i {
			color: var(--gold);
			font-size: 1.45rem;
		}

		.brand-logo:hover,
		.brand-logo:focus {
			color: var(--gold-hover);
		}

		.dock-nav .navbar-toggler {
			border: 0;
			color: #fff;
			background: transparent;
			font-size: 1.45rem;
			line-height: 1;
			padding: .3rem .55rem;
			border-radius: 12px;
			box-shadow: none;
		}

		.dock-nav .navbar-toggler:hover {
			background: rgba(255, 255, 255, 0.1);
		}

		.dock-links {
			align-items: center;
			gap: .2rem;
		}

		.dock-links .dock-link {
			color: var(--dim-on-dark);
			font-size: .96rem;
			font-weight: 500;
			text-decoration: none;
			padding: .42rem 1.05rem;
			border-radius: 999px;
			transition: color .25s ease, background-color .25s ease;
		}

		.dock-links .dock-link:hover {
			color: #fff;
			background: rgba(255, 255, 255, 0.1);
		}

		.dock-links .dock-link.active {
			background: rgba(233, 162, 59, 0.18);
			color: var(--gold);
		}

		.dock-cta {
			padding: 2px 6px 2px 8px;
		}

		.page-hero {
			position: relative;
			padding: 190px 0 96px;
			color: #fff;
			background:
				linear-gradient(118deg, rgba(10, 36, 30, 0.94) 0%, rgba(19, 79, 61, 0.8) 46%, rgba(10, 36, 30, 0.58) 100%),
				url('/assets/images/backpic/back-2.webp') center center / cover no-repeat;
		}

		.page-hero::after {
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 30%;
			height: 5px;
			background: linear-gradient(90deg, transparent, var(--gold));
			opacity: .75;
			pointer-events: none;
		}

		.hero-content {
			max-width: 720px;
		}

		.hero-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: .9rem;
			font-weight: 600;
			letter-spacing: .08em;
			color: var(--gold);
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 999px;
			padding: 6px 15px;
			margin-bottom: 18px;
		}

		.hero-eyebrow i {
			color: var(--gold);
		}

		.hero-content .display-1 {
			font-size: clamp(2.2rem, 5vw, 3.4rem);
			font-weight: 700;
			line-height: 1.18;
			letter-spacing: .01em;
			margin-bottom: 16px;
		}

		.hero-subtitle {
			font-size: clamp(1rem, 1.7vw, 1.2rem);
			color: var(--dim-on-dark);
			max-width: 620px;
			margin-bottom: 32px;
			line-height: 1.8;
		}

		.hero-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-bottom: 28px;
		}

		.hero-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		.hero-tag {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			background: rgba(19, 79, 61, 0.55);
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 999px;
			padding: 6px 14px;
			color: var(--dim-on-dark);
			font-size: .86rem;
			line-height: 1.6;
		}

		.section-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--jade);
			font-size: .86rem;
			font-weight: 600;
			letter-spacing: .15em;
			margin-bottom: 8px;
		}

		.section-eyebrow::before {
			content: "";
			display: inline-block;
			width: 28px;
			height: 2px;
			background: var(--gold);
			border-radius: 2px;
		}

		.section-title {
			font-size: clamp(1.6rem, 3vw, 2.05rem);
			font-weight: 700;
			line-height: 1.4;
			color: var(--ink);
			margin: 0 0 12px;
		}

		.section-sub {
			color: var(--muted);
			font-size: 1rem;
			max-width: 640px;
			line-height: 1.85;
			margin-bottom: 0;
		}

		.guide-section {
			background: var(--surface);
			border-bottom: 1px solid var(--line);
		}

		.guide-wrap {
			background: #FFF9F0;
			border: 1px solid rgba(233, 162, 59, 0.25);
			border-radius: var(--radius-large);
			padding: 38px 36px;
			box-shadow: var(--shadow-soft);
			margin-top: 64px;
		}

		.guide-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16px;
			margin-top: 26px;
		}

		.guide-item {
			background: var(--surface);
			border: 1px solid var(--line);
			border-radius: var(--radius-card);
			padding: 20px 20px;
			transition: box-shadow .25s ease, transform .25s ease;
		}

		.guide-item:hover {
			box-shadow: var(--shadow-strong);
			transform: translateY(-3px);
		}

		.guide-item .guide-num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: var(--gold);
			color: var(--forest);
			font-weight: 700;
			font-size: .8rem;
			margin-bottom: 10px;
		}

		.guide-item h3 {
			font-size: 1.02rem;
			font-weight: 600;
			margin: 0 0 6px;
			color: var(--ink);
		}

		.guide-item p {
			color: var(--muted);
			font-size: .9rem;
			line-height: 1.7;
		}

		.faq-stack {
			margin-top: 46px;
		}

		.faq-card-h {
			background: var(--surface);
			border-radius: 22px;
			box-shadow: var(--shadow-soft);
			margin-bottom: 26px;
			overflow: hidden;
			transition: box-shadow .25s ease, transform .25s ease;
		}

		.faq-card-h:hover {
			box-shadow: var(--shadow-strong);
			transform: translateY(-3px);
		}

		.faq-card-h.active {
			border: 1px solid rgba(233, 162, 59, 0.4);
			box-shadow: var(--shadow-strong);
		}

		.faq-row {
			overflow: hidden;
		}

		.q-media {
			overflow: hidden;
			height: 100%;
			min-height: 230px;
			background: var(--pine);
		}

		.q-media img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform .6s ease;
		}

		.faq-card-h:hover .q-media img {
			transform: scale(1.03);
		}

		.q-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 30px 32px 30px 30px;
			height: 100%;
		}

		.q-tax {
			display: flex;
			align-items: center;
			gap: 14px;
			margin-bottom: 12px;
		}

		.badge-soft {
			display: inline-flex;
			align-items: center;
			background: rgba(38, 143, 115, 0.12);
			color: var(--pine);
			border-radius: 999px;
			padding: 3px 12px;
			font-size: .78rem;
			font-weight: 600;
			letter-spacing: .04em;
		}

		.q-idx {
			color: var(--muted);
			font-size: .8rem;
			letter-spacing: .06em;
		}

		.q-title-btn {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			width: 100%;
			background: none;
			border: 0;
			padding: 0;
			text-align: left;
		}

		.q-num {
			flex: 0 0 34px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 34px;
			border-radius: 50%;
			background: rgba(19, 79, 61, 0.08);
			color: var(--pine);
			font-weight: 700;
			font-size: .82rem;
		}

		.q-title-text {
			flex: 1;
			color: var(--ink);
			font-size: 1.08rem;
			font-weight: 600;
			line-height: 1.65;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.q-expand {
			flex: 0 0 34px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			border-radius: 50%;
			border: 1px solid var(--line);
			color: var(--pine);
			font-size: 1.15rem;
			line-height: 1;
			transition: all .3s ease;
		}

		.faq-card-h.active .q-expand {
			background: var(--gold);
			border-color: var(--gold);
			color: var(--forest);
			transform: rotate(45deg);
		}

		.q-summary {
			color: var(--muted);
			font-size: .91rem;
			line-height: 1.8;
			margin-top: 12px;
			margin-left: 48px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.q-answer-border {
			border-bottom: 1px solid var(--line);
		}

		.q-answer-inner {
			background: #FBF7EE;
			border-top: 1px solid rgba(19, 79, 61, 0.1);
			padding: 24px 32px 30px;
			color: #34473F;
			font-size: .96rem;
			line-height: 1.9;
		}

		.related-panel {
			background: var(--forest);
			border-radius: var(--radius-large);
			padding: 56px 48px;
			color: #fff;
			position: relative;
			overflow: hidden;
			margin-top: 40px;
		}

		.related-panel::before {
			content: "";
			position: absolute;
			right: -60px;
			top: -60px;
			width: 220px;
			height: 220px;
			background: rgba(38, 143, 115, 0.15);
			border-radius: 50%;
			pointer-events: none;
		}

		.related-panel h2 {
			font-size: 1.65rem;
			font-weight: 700;
			margin-bottom: 14px;
		}

		.related-panel p {
			color: var(--dim-on-dark);
			max-width: 620px;
			margin-bottom: 0;
		}

		.cta-panel {
			background: var(--forest);
			border-radius: var(--radius-large);
			padding: 64px 48px;
			position: relative;
			overflow: hidden;
		}

		.cta-panel::before {
			content: "";
			position: absolute;
			left: -40px;
			bottom: -80px;
			width: 300px;
			height: 300px;
			background: rgba(233, 162, 59, 0.12);
			border-radius: 50%;
			pointer-events: none;
		}

		.cta-panel .btn {
			position: relative;
			z-index: 1;
		}

		.site-footer {
			background: var(--forest);
			color: rgba(255, 253, 248, 0.72);
			padding: 64px 0 30px;
			margin-top: 90px;
		}

		.footer-grid {
			display: grid;
			grid-template-columns: 1.4fr .8fr .8fr;
			gap: 48px;
			margin-bottom: 38px;
		}

		.footer-brand-name {
			display: flex;
			align-items: center;
			gap: 8px;
			color: #fff;
			font-weight: 700;
			font-size: 1.18rem;
			margin-bottom: 12px;
		}

		.footer-brand-name i {
			color: var(--gold);
		}

		.footer-brand p {
			color: var(--dim-on-dark);
			line-height: 1.8;
			margin: 0;
			font-size: .96rem;
		}

		.footer-title {
			font-size: 1rem;
			font-weight: 600;
			color: #fff;
			margin-bottom: 16px;
		}

		.footer-links li {
			margin-bottom: 9px;
		}

		.footer-links a {
			color: rgba(255, 253, 248, 0.7);
			text-decoration: none;
			line-height: 1.8;
		}

		.footer-links a:hover {
			color: var(--gold);
		}

		.footer-bottom {
			border-top: 1px solid rgba(255, 253, 248, 0.14);
			padding-top: 22px;
			display: flex;
			justify-content: space-between;
			gap: 12px;
			flex-wrap: wrap;
			font-size: .88rem;
			color: rgba(255, 253, 248, 0.6);
		}

		@media (max-width: 1199.98px) {
			.dock-links {
				gap: .05rem;
			}
			.dock-links .dock-link {
				font-size: .88rem;
				padding: .4rem .7rem;
			}
		}

		@media (max-width: 991.98px) {
			.dock-nav {
				border-radius: 24px;
				padding: 4px 8px;
			}
			.dock-nav .navbar-collapse {
				padding: 8px 4px 12px;
			}
			.dock-links {
				align-items: stretch;
				padding: 4px 8px;
			}
			.dock-links .dock-link {
				display: block;
				padding: .65rem 1.2rem;
				border-radius: 16px;
				margin-bottom: 4px;
			}
			.dock-cta {
				padding: 6px 10px;
			}
			.guide-wrap {
				margin-top: 0;
			}
			.guide-list {
				grid-template-columns: 1fr;
			}
			.faq-rubric {
				margin-bottom: 28px;
			}
			.q-content {
				padding: 26px 24px 26px 24px;
			}
			.q-summary {
				margin-left: 0;
			}
			.footer-grid {
				grid-template-columns: 1fr 1fr;
				gap: 40px;
			}
		}

		@media (max-width: 767.98px) {
			.section {
				padding: 60px 0;
			}
			.page-hero {
				padding: 150px 0 64px;
			}
			.hero-actions .btn {
				width: 100%;
			}
			.q-media {
				min-height: 210px;
				height: 210px;
			}
			.q-media img {
				object-position: center;
			}
			.related-panel,
			.cta-panel {
				padding: 42px 22px;
				border-radius: 22px;
			}
			.cta-panel .btn {
				width: 100%;
			}
			.footer-grid {
				grid-template-columns: 1fr;
				gap: 34px;
				margin-bottom: 26px;
			}
		}

		@media (max-width: 575.98px) {
			.dock-shell {
				padding: 0 16px;
			}
			.dock-nav {
				padding: 2px;
			}
			.brand-logo {
				font-size: .9rem;
				padding: 7px 10px;
			}
			.page-hero {
				background-position: 60% center;
			}
			.hero-content .display-1 {
				font-size: 2.1rem;
			}
			.hero-subtitle {
				font-size: 1rem;
			}
		}