/*!
 * Xun Theme Styles
 * Built with Tailwind CSS
 * 
 * @package Xun
 * @author June
 * @link https://www.xuntheme.com
 */
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties {
	@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

		*,
		:before,
		:after,
		::backdrop {
			--tw-rotate-x: initial;
			--tw-rotate-y: initial;
			--tw-rotate-z: initial;
			--tw-skew-x: initial;
			--tw-skew-y: initial;
			--tw-space-y-reverse: 0;
			--tw-border-style: solid;
			--tw-font-weight: initial;
			--tw-ordinal: initial;
			--tw-slashed-zero: initial;
			--tw-numeric-figure: initial;
			--tw-numeric-spacing: initial;
			--tw-numeric-fraction: initial;
			--tw-shadow: 0 0 #0000;
			--tw-shadow-color: initial;
			--tw-shadow-alpha: 100%;
			--tw-inset-shadow: 0 0 #0000;
			--tw-inset-shadow-color: initial;
			--tw-inset-shadow-alpha: 100%;
			--tw-ring-color: initial;
			--tw-ring-shadow: 0 0 #0000;
			--tw-inset-ring-color: initial;
			--tw-inset-ring-shadow: 0 0 #0000;
			--tw-ring-inset: initial;
			--tw-ring-offset-width: 0px;
			--tw-ring-offset-color: #fff;
			--tw-ring-offset-shadow: 0 0 #0000;
			--tw-outline-style: solid;
			--tw-blur: initial;
			--tw-brightness: initial;
			--tw-contrast: initial;
			--tw-grayscale: initial;
			--tw-hue-rotate: initial;
			--tw-invert: initial;
			--tw-opacity: initial;
			--tw-saturate: initial;
			--tw-sepia: initial;
			--tw-drop-shadow: initial;
			--tw-drop-shadow-color: initial;
			--tw-drop-shadow-alpha: 100%;
			--tw-drop-shadow-size: initial;
			--tw-backdrop-blur: initial;
			--tw-backdrop-brightness: initial;
			--tw-backdrop-contrast: initial;
			--tw-backdrop-grayscale: initial;
			--tw-backdrop-hue-rotate: initial;
			--tw-backdrop-invert: initial;
			--tw-backdrop-opacity: initial;
			--tw-backdrop-saturate: initial;
			--tw-backdrop-sepia: initial;
			--tw-ease: initial
		}
	}
}

@layer theme {

	:root,
	:host {
		--font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
		--font-mono: "JetBrains Mono", "Fira Code", monospace;
		--color-red-500: oklch(63.7% .237 25.331);
		--color-blue-500: oklch(62.3% .214 259.815);
		--color-gray-100: oklch(96.7% .003 264.542);
		--color-gray-200: oklch(92.8% .006 264.531);
		--color-gray-300: oklch(87.2% .01 258.338);
		--color-gray-700: oklch(37.3% .034 259.733);
		--color-gray-900: oklch(21% .034 264.665);
		--color-neutral-50: oklch(98.5% 0 0);
		--color-neutral-100: oklch(96.5% 0 0);
		--color-neutral-200: oklch(92% 0 0);
		--color-neutral-300: oklch(87% 0 0);
		--color-neutral-400: oklch(70% 0 0);
		--color-neutral-500: oklch(55% 0 0);
		--color-neutral-600: oklch(45% 0 0);
		--color-neutral-700: oklch(35% 0 0);
		--color-neutral-800: oklch(25% 0 0);
		--color-neutral-900: oklch(15% 0 0);
		--color-neutral-950: oklch(10% 0 0);
		--color-white: #fff;
		--spacing: .25rem;
		--breakpoint-lg: 64rem;
		--breakpoint-xl: 80rem;
		--text-sm: .875rem;
		--text-sm--line-height: calc(1.25/.875);
		--text-2xl: 1.5rem;
		--text-2xl--line-height: calc(2/1.5);
		--text-3xl: 1.875rem;
		--text-3xl--line-height: 1.2;
		--font-weight-medium: 500;
		--font-weight-bold: 700;
		--radius-sm: .375rem;
		--radius-md: .5rem;
		--radius-lg: .75rem;
		--radius-xl: 1rem;
		--shadow-xs: 0 1px 2px #0000000d;
		--shadow-sm: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
		--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
		--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
		--ease-in: cubic-bezier(.4, 0, 1, 1);
		--ease-out: cubic-bezier(0, 0, .2, 1);
		--ease-in-out: cubic-bezier(.4, 0, .2, 1);
		--animate-spin: spin 1s linear infinite;
		--default-transition-duration: .15s;
		--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		--default-font-family: var(--font-sans);
		--default-mono-font-family: var(--font-mono);
		--color-primary-bg: oklch(97% .02 255);
		--color-primary-bg-hover: oklch(90% .06 255);
		--color-primary-border: oklch(82% .1 255);
		--color-primary-border-hover: oklch(74% .14 255);
		--color-primary-hover: oklch(66% .18 258);
		--color-primary: oklch(56.5% .22 260);
		--color-primary-active: oklch(48% .2 262);
		--color-primary-text-hover: oklch(66% .18 258);
		--color-primary-text: oklch(56.5% .22 260);
		--color-primary-text-active: oklch(48% .2 262);
		--color-success-bg: oklch(98% .03 145);
		--color-success-bg-hover: oklch(95% .08 140);
		--color-success-border: oklch(90% .13 135);
		--color-success-border-hover: oklch(84% .17 135);
		--color-success-hover: oklch(84% .17 135);
		--color-success: oklch(72% .19 142);
		--color-success-active: oklch(60% .17 145);
		--color-success-text-hover: oklch(78% .18 138);
		--color-success-text: oklch(72% .19 142);
		--color-success-text-active: oklch(60% .17 145);
		--color-warning-bg: oklch(99% .03 95);
		--color-warning-bg-hover: oklch(96% .08 95);
		--color-warning-border: oklch(93% .12 92);
		--color-warning-border-hover: oklch(89% .15 88);
		--color-warning-hover: oklch(89% .15 88);
		--color-warning: oklch(79% .17 75);
		--color-warning-active: oklch(66% .16 65);
		--color-warning-text-hover: oklch(85% .16 82);
		--color-warning-text: oklch(79% .17 75);
		--color-warning-text-active: oklch(66% .16 65);
		--color-error-bg: oklch(97.5% .015 20);
		--color-error-bg-hover: oklch(97% .018 20);
		--color-error-border: oklch(90% .06 20);
		--color-error-border-hover: oklch(82% .12 22);
		--color-error-hover: oklch(72% .18 22);
		--color-error: oklch(65% .23 25);
		--color-error-active: oklch(55% .2 22);
		--color-error-text-hover: oklch(72% .18 22);
		--color-error-text: oklch(65% .23 25);
		--color-error-text-active: oklch(55% .2 22);
		--color-info: oklch(56.5% .22 260);
		--color-info-bg: oklch(97% .02 255);
		--color-info-border: oklch(82% .1 255);
		--color-link: oklch(56.5% .22 260);
		--color-link-hover: oklch(74% .14 255);
		--color-link-active: oklch(48% .2 262);
		--color-text: oklch(0% 0 0/.88);
		--color-text-secondary: oklch(0% 0 0/.65);
		--color-text-tertiary: oklch(0% 0 0/.45);
		--color-text-quaternary: oklch(0% 0 0/.25);
		--color-border: oklch(87% 0 0);
		--color-border-secondary: oklch(95% 0 0);
		--color-fill: oklch(0% 0 0/.15);
		--color-fill-secondary: oklch(0% 0 0/.06);
		--color-fill-tertiary: oklch(0% 0 0/.04);
		--color-fill-quaternary: oklch(0% 0 0/.02);
		--color-bg-container: oklch(100% 0 0);
		--color-bg-elevated: oklch(100% 0 0);
		--color-bg-layout: oklch(96.5% 0 0);
		--color-bg-spotlight: oklch(0% 0 0/.85);
		--color-bg-mask: oklch(0% 0 0/.45);
		--color-secondary: oklch(72% .19 142);
		--color-secondary-dark: oklch(60% .17 145);
		--color-accent: oklch(79% .17 75);
		--color-accent-dark: oklch(66% .16 65);
		--breakpoint-3xl: 120rem;
		--font-display: "Inter", "PingFang SC", sans-serif;
		--ease-fluid: cubic-bezier(.3, 0, 0, 1);
		--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);
		--ease-smooth: cubic-bezier(.4, 0, .2, 1);
		--shadow-card: 0 2px 8px -2px #0000001a, 0 4px 16px -4px #0000001a;
		--shadow-card-hover: 0 8px 24px #0000001f;
		--shadow-dropdown: 0 4px 12px -2px #0000001f, 0 8px 24px -4px #00000014;
		--shadow-modal: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
		--radius-full: 9999px;
		--space-sm: .5rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--xun-code-block-bg: var(--color-neutral-900);
		--xun-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		--xun-select-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
	}
}

@layer base {

	*,
	:after,
	:before,
	::backdrop {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0
	}

	::file-selector-button {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0
	}

	html,
	:host {
		-webkit-text-size-adjust: 100%;
		tab-size: 4;
		line-height: 1.5;
		font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
		font-feature-settings: var(--default-font-feature-settings, normal);
		font-variation-settings: var(--default-font-variation-settings, normal);
		-webkit-tap-highlight-color: transparent
	}

	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px
	}

	abbr:where([title]) {
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit
	}

	a {
		color: inherit;
		-webkit-text-decoration: inherit;
		text-decoration: inherit
	}

	b,
	strong {
		font-weight: bolder
	}

	code,
	kbd,
	samp,
	pre {
		font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
		font-feature-settings: var(--default-mono-font-feature-settings, normal);
		font-variation-settings: var(--default-mono-font-variation-settings, normal);
		font-size: 1em
	}

	small {
		font-size: 80%
	}

	sub,
	sup {
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0;
		position: relative
	}

	sub {
		bottom: -.25em
	}

	sup {
		top: -.5em
	}

	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse
	}

	:-moz-focusring {
		outline: auto
	}

	progress {
		vertical-align: baseline
	}

	summary {
		display: list-item
	}

	ol,
	ul,
	menu {
		list-style: none
	}

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		vertical-align: middle;
		display: block
	}

	img,
	video {
		max-width: 100%;
		height: auto
	}

	button,
	input,
	select,
	optgroup,
	textarea {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 0
	}

	::file-selector-button {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 0
	}

	:where(select:is([multiple], [size])) optgroup {
		font-weight: bolder
	}

	:where(select:is([multiple], [size])) optgroup option {
		padding-inline-start: 20px
	}

	::file-selector-button {
		margin-inline-end: 4px
	}

	::placeholder {
		opacity: 1
	}

	@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
		::placeholder {
			color: currentColor
		}

		@supports (color:color-mix(in lab, red, red)) {
			::placeholder {
				color: color-mix(in oklab, currentcolor 50%, transparent)
			}
		}
	}

	textarea {
		resize: vertical
	}

	::-webkit-search-decoration {
		-webkit-appearance: none
	}

	::-webkit-date-and-time-value {
		min-height: 1lh;
		text-align: inherit
	}

	::-webkit-datetime-edit {
		display: inline-flex
	}

	::-webkit-datetime-edit-fields-wrapper {
		padding: 0
	}

	::-webkit-datetime-edit {
		padding-block: 0
	}

	::-webkit-datetime-edit-year-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-month-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-day-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-hour-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-minute-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-second-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-millisecond-field {
		padding-block: 0
	}

	::-webkit-datetime-edit-meridiem-field {
		padding-block: 0
	}

	::-webkit-calendar-picker-indicator {
		line-height: 1
	}

	:-moz-ui-invalid {
		box-shadow: none
	}

	button,
	input:where([type=button], [type=reset], [type=submit]) {
		-webkit-appearance: button;
		appearance: button
	}

	::file-selector-button {
		-webkit-appearance: button;
		appearance: button
	}

	::-webkit-inner-spin-button {
		height: auto
	}

	::-webkit-outer-spin-button {
		height: auto
	}

	[hidden]:where(:not([hidden=until-found])) {
		display: none !important
	}

	@media(prefers-color-scheme:dark) {
		:root:not(.light) {
			--page-bg: oklch(15% 0 0);
			--text-primary: oklch(100% 0 0/.85);
			--text-secondary: oklch(100% 0 0/.65);
			--text-muted: oklch(100% 0 0/.45);
			--color-bg-container: oklch(18% 0 0);
			--color-bg-elevated: oklch(22% 0 0);
			--color-bg-layout: oklch(12% 0 0);
			--color-bg-spotlight: oklch(100% 0 0/.85);
			--color-bg-mask: oklch(0% 0 0/.65);
			--color-text: oklch(100% 0 0/.85);
			--color-text-secondary: oklch(100% 0 0/.65);
			--color-text-tertiary: oklch(100% 0 0/.45);
			--color-text-quaternary: oklch(100% 0 0/.25);
			--color-border: oklch(30% 0 0);
			--color-border-secondary: oklch(22% 0 0);
			--color-fill: oklch(100% 0 0/.18);
			--color-fill-secondary: oklch(100% 0 0/.12);
			--color-fill-tertiary: oklch(100% 0 0/.08);
			--color-fill-quaternary: oklch(100% 0 0/.04);
			--color-neutral-50: oklch(10% 0 0);
			--color-neutral-100: oklch(15% 0 0);
			--color-neutral-200: oklch(20% 0 0);
			--color-neutral-300: oklch(25% 0 0);
			--color-neutral-400: oklch(35% 0 0);
			--color-neutral-500: oklch(50% 0 0);
			--color-neutral-600: oklch(60% 0 0);
			--color-neutral-700: oklch(70% 0 0);
			--color-neutral-800: oklch(80% 0 0);
			--color-neutral-900: oklch(90% 0 0);
			--color-neutral-950: oklch(95% 0 0);
			--color-primary-bg: oklch(22% .06 260);
			--color-primary-bg-hover: oklch(28% .08 260);
			--color-success-bg: oklch(20% .05 145);
			--color-success-bg-hover: oklch(25% .07 145);
			--color-warning-bg: oklch(22% .05 75);
			--color-warning-bg-hover: oklch(28% .07 75);
			--color-error-bg: oklch(20% .04 25);
			--color-error-bg-hover: oklch(25% .06 25);
			--shadow-xs: 0 1px 2px #00000059;
			--shadow-sm: 0 2px 8px -2px #00000059;
			--shadow-card: 0 2px 8px -2px #00000059;
			--shadow-card-hover: 0 8px 24px #00000080;
			--shadow-dropdown: 0 4px 12px #0006;
			--shadow-modal: 0 20px 25px -5px #00000080, 0 10px 10px -5px #00000059;
			--xun-code-block-bg: var(--color-neutral-800);
			--xun-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
			--xun-select-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
		}
	}

	.dark {
		--page-bg: oklch(15% 0 0);
		--text-primary: oklch(100% 0 0/.85);
		--text-secondary: oklch(100% 0 0/.65);
		--text-muted: oklch(100% 0 0/.45);
		--color-bg-container: oklch(18% 0 0);
		--color-bg-elevated: oklch(22% 0 0);
		--color-bg-layout: oklch(12% 0 0);
		--color-bg-spotlight: oklch(100% 0 0/.85);
		--color-bg-mask: oklch(0% 0 0/.65);
		--color-text: oklch(100% 0 0/.85);
		--color-text-secondary: oklch(100% 0 0/.65);
		--color-text-tertiary: oklch(100% 0 0/.45);
		--color-text-quaternary: oklch(100% 0 0/.25);
		--color-border: oklch(30% 0 0);
		--color-border-secondary: oklch(22% 0 0);
		--color-fill: oklch(100% 0 0/.18);
		--color-fill-secondary: oklch(100% 0 0/.12);
		--color-fill-tertiary: oklch(100% 0 0/.08);
		--color-fill-quaternary: oklch(100% 0 0/.04);
		--color-neutral-50: oklch(10% 0 0);
		--color-neutral-100: oklch(15% 0 0);
		--color-neutral-200: oklch(20% 0 0);
		--color-neutral-300: oklch(25% 0 0);
		--color-neutral-400: oklch(35% 0 0);
		--color-neutral-500: oklch(50% 0 0);
		--color-neutral-600: oklch(60% 0 0);
		--color-neutral-700: oklch(70% 0 0);
		--color-neutral-800: oklch(80% 0 0);
		--color-neutral-900: oklch(90% 0 0);
		--color-neutral-950: oklch(95% 0 0);
		--color-primary-bg: oklch(22% .06 260);
		--color-primary-bg-hover: oklch(28% .08 260);
		--color-success-bg: oklch(20% .05 145);
		--color-success-bg-hover: oklch(25% .07 145);
		--color-warning-bg: oklch(22% .05 75);
		--color-warning-bg-hover: oklch(28% .07 75);
		--color-error-bg: oklch(20% .04 25);
		--color-error-bg-hover: oklch(25% .06 25);
		--shadow-xs: 0 1px 2px #00000059;
		--shadow-sm: 0 2px 8px -2px #00000059;
		--shadow-card: 0 2px 8px -2px #00000059;
		--shadow-card-hover: 0 8px 24px #00000080;
		--shadow-dropdown: 0 4px 12px #0006;
		--shadow-modal: 0 20px 25px -5px #00000080, 0 10px 10px -5px #00000059;
		--xun-code-block-bg: var(--color-neutral-800);
		--xun-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		--xun-select-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
	}

	.light,
	:root {
		--page-bg: var(--color-neutral-50);
		--text-primary: var(--color-neutral-900);
		--text-secondary: var(--color-neutral-600);
		--text-muted: var(--color-neutral-400)
	}

	html {
		scroll-behavior: smooth;
		overflow-x: clip
	}

	body {
		font-family: var(--font-sans);
		background-color: var(--page-bg);
		color: var(--text-primary);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		max-width: 100vw;
		line-height: 1.6;
		overflow-x: clip
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-display);
		color: var(--text-primary);
		font-weight: 600;
		line-height: 1.3
	}

	h1 {
		font-size: 2.25rem
	}

	h2 {
		font-size: 1.875rem
	}

	h3 {
		font-size: 1.5rem
	}

	h4 {
		font-size: 1.25rem
	}

	h5 {
		font-size: 1.125rem
	}

	h6 {
		font-size: 1rem
	}

	p {
		color: var(--text-secondary);
		margin-bottom: 1rem
	}

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

	a:hover {
		color: var(--color-primary-active)
	}

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

	input,
	textarea,
	select,
	button {
		font-family: inherit;
		font-size: inherit
	}

	.alignwide {
		max-width: calc(100% + 4rem);
		margin-inline: -2rem
	}

	.alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw)
	}

	.aligncenter {
		margin-inline: auto;
		display: block
	}

	::selection {
		background-color: var(--color-primary);
		color: #fff
	}

	::-webkit-scrollbar {
		width: 8px;
		height: 8px
	}

	::-webkit-scrollbar-track {
		background: 0 0
	}

	::-webkit-scrollbar-thumb {
		background: var(--color-neutral-300);
		border-radius: 4px;
		transition: background .2s
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--color-neutral-400)
	}

	::-webkit-scrollbar-corner {
		background: 0 0
	}

	* {
		scrollbar-width: thin;
		scrollbar-color: var(--color-neutral-300)transparent
	}
}

@layer components {
	@media(prefers-color-scheme:dark) {
		:root:not(.light) .card-glass {
			background: rgba(255, 255, 255, .08);
			border-color: rgba(255, 255, 255, .1)
		}

		:root:not(.light) .input {
			background-color: var(--color-bg-container);
			border-color: var(--color-border);
			color: var(--text-primary)
		}

		:root:not(.light) .input::placeholder {
			color: var(--text-muted)
		}

		:root:not(.light) .glass {
			background: rgba(255, 255, 255, .08);
			border-color: rgba(255, 255, 255, .1)
		}

		:root:not(.light) .glass-card {
			background: rgba(255, 255, 255, .1);
			border-color: rgba(255, 255, 255, .15)
		}

		:root:not(.light) .badge {
			background-color: var(--color-neutral-200);
			color: var(--color-neutral-800)
		}

		:root:not(.light) .divider,
		:root:not(.light) .divider-vertical {
			background-color: var(--color-border)
		}

		:root:not(.light) .avatar {
			background-color: var(--color-neutral-300);
			color: var(--color-neutral-700)
		}

		:root:not(.light) .btn-ghost {
			color: var(--color-neutral-800)
		}

		:root:not(.light) .btn-ghost:hover {
			background-color: var(--color-neutral-200)
		}
	}

	.dark .card-glass {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .1)
	}

	.dark .input {
		background-color: var(--color-bg-container);
		border-color: var(--color-border);
		color: var(--text-primary)
	}

	.dark .input::placeholder {
		color: var(--text-muted)
	}

	.dark .glass {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .1)
	}

	.dark .glass-card {
		background: rgba(255, 255, 255, .1);
		border-color: rgba(255, 255, 255, .15)
	}

	.dark .badge {
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-800)
	}

	.dark .divider,
	.dark .divider-vertical {
		background-color: var(--color-border)
	}

	.dark .avatar {
		background-color: var(--color-neutral-300);
		color: var(--color-neutral-700)
	}

	.dark .btn-ghost {
		color: var(--color-neutral-800)
	}

	.dark .btn-ghost:hover {
		background-color: var(--color-neutral-200)
	}

	@media(prefers-color-scheme:dark) {
		:root:not(.light) ::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, .2)
		}

		:root:not(.light) ::-webkit-scrollbar-thumb:hover {
			background: rgba(255, 255, 255, .3)
		}

		:root:not(.light) * {
			scrollbar-color: #fff3 transparent
		}
	}

	.dark ::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, .2)
	}

	.dark ::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, .3)
	}

	.dark * {
		scrollbar-color: #fff3 transparent
	}

	.animate-fade-in {
		animation: fadeIn .3s var(--ease-smooth)
	}

	.animate-slide-up {
		animation: slideUp .3s var(--ease-smooth)
	}

	.animate-scale-in {
		animation: scaleIn .2s var(--ease-bounce)
	}

	.animate-pulse-soft {
		animation: 2s infinite pulseSoft
	}

	.animate-spin {
		animation: 1s linear infinite spin
	}

	.xun-user-center,
	.xun-author-page {
		background: var(--color-bg-layout);
		min-height: calc(100vh - 64px);
		padding-bottom: 2rem
	}

	.xun-user-container,
	.xun-author-container {
		max-width: var(--xun-container-width, 1200px);
		margin: 0 auto;
		padding: 0 1rem
	}

	.xun-user-hero,
	.xun-author-hero {
		background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), var(--xun-primary);
		width: 100%;
		margin-bottom: 1rem;
		padding-bottom: 2.5rem;
		position: relative;
		overflow: hidden
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {

		.xun-user-hero,
		.xun-author-hero {
			background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
		}

		@supports (color:color-mix(in lab, red, red)) {

			.xun-user-hero,
			.xun-author-hero {
				background: linear-gradient(135deg, var(--xun-primary)0%, color-mix(in srgb, var(--xun-primary)70%, #000)100%)
			}
		}
	}

	.xun-user-hero--transparent,
	.xun-author-hero--transparent {
		margin-top: -64px;
		padding-top: calc(64px + 2.5rem)
	}

	.xun-user-hero--transparent .xun-user-hero-content,
	.xun-author-hero--transparent .xun-author-hero-content {
		padding-top: 2.5rem
	}

	.xun-user-hero-inner,
	.xun-author-hero-inner {
		z-index: 1;
		max-width: var(--xun-container-width, 1200px);
		margin: 0 auto;
		padding: 2.5rem 1rem 1rem;
		position: relative
	}

	.xun-user-hero-bg,
	.xun-author-hero-bg {
		pointer-events: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden
	}

	.xun-user-hero-pattern,
	.xun-author-hero-pattern {
		background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0) 70%);
		width: 60%;
		height: 200%;
		animation: 20s ease-in-out infinite xunHeroFloat;
		position: absolute;
		top: -50%;
		right: -20%
	}

	.xun-user-hero-content,
	.xun-author-hero-content {
		z-index: 1;
		justify-content: space-between;
		gap: 1.5rem;
		display: flex;
		position: relative
	}

	.xun-user-hero-left,
	.xun-author-hero-left {
		align-items: center;
		gap: 1.25rem;
		display: flex
	}

	.xun-user-hero-avatar,
	.xun-author-hero-avatar {
		flex-shrink: 0;
		width: 72px;
		height: 72px;
		position: relative
	}

	.xun-user-hero-avatar img,
	.xun-author-hero-avatar img {
		object-fit: cover;
		aspect-ratio: 1;
		background: rgba(255, 255, 255, .1);
		border: 3px solid #ffffff40;
		border-radius: 50%;
		width: 100%;
		height: 100%
	}

	.xun-user-info,
	.xun-author-hero-info {
		flex-direction: column;
		gap: .375rem;
		display: flex
	}

	.xun-user-name,
	.xun-author-hero-name {
		color: #fff;
		margin: 0;
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.3
	}

	.glass {
		-webkit-backdrop-filter: blur(12px)saturate(180%);
		background: rgba(255, 255, 255, .7);
		border: 1px solid #ffffff4d
	}

	.glass-light {
		-webkit-backdrop-filter: blur(8px)saturate(150%);
		background: rgba(255, 255, 255, .5);
		border: 1px solid #fff3
	}

	.glass-dark {
		-webkit-backdrop-filter: blur(12px)saturate(180%);
		color: #fff;
		background: rgba(0, 0, 0, .5);
		border: 1px solid #ffffff1a
	}

	.glass-primary {
		-webkit-backdrop-filter: blur(12px)saturate(180%);
		background: rgba(59, 130, 246, .15);
		border: 1px solid #3b82f633
	}

	.glass-card {
		-webkit-backdrop-filter: blur(20px)saturate(200%);
		border-radius: calc(var(--xun-radius, 8px) + 4px);
		box-shadow: var(--shadow-card);
		background: rgba(255, 255, 255, .8);
		border: 1px solid #fff6
	}

	.btn {
		border-radius: var(--xun-radius, 8px);
		cursor: pointer;
		border: none;
		outline: none;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		font-weight: 500;
		text-decoration: none;
		transition: all .2s;
		display: inline-flex;
		position: relative;
		overflow: hidden
	}

	.btn:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px
	}

	.btn:disabled {
		opacity: .5;
		cursor: not-allowed
	}

	.btn-ripple {
		pointer-events: none;
		background: rgba(255, 255, 255, .5);
		border-radius: 50%;
		animation: 1.2s cubic-bezier(.2, 0, .2, 1) forwards rippleEffect;
		position: absolute;
		transform: scale(0)
	}

	.btn-xs {
		border-radius: calc(var(--xun-radius, 8px) - 2px);
		padding: .25rem .5rem;
		font-size: .75rem
	}

	.btn-sm {
		padding: .375rem .75rem;
		font-size: .875rem
	}

	.btn-md {
		padding: .5rem 1rem;
		font-size: .875rem
	}

	.btn-lg {
		padding: .75rem 1.5rem;
		font-size: 1rem
	}

	.btn-xl {
		border-radius: calc(var(--xun-radius, 8px) + 4px);
		padding: 1rem 2rem;
		font-size: 1.125rem
	}

	.btn-primary {
		background-color: var(--xun-primary, var(--color-primary));
		color: #fff
	}

	.btn-primary:hover {
		background-color: var(--xun-primary-hover, var(--color-primary-active))
	}

	.btn-primary:active {
		background-color: var(--xun-primary-active, oklch(43% .19 264))
	}

	.btn-secondary {
		background-color: var(--xun-secondary, var(--color-secondary));
		color: #fff
	}

	.btn-secondary:hover {
		background-color: var(--xun-secondary-hover, var(--color-secondary-dark))
	}

	.btn-secondary:active {
		background-color: var(--xun-secondary-active, var(--color-success-active))
	}

	.btn-accent {
		background-color: var(--color-accent);
		color: #fff
	}

	.btn-accent:hover {
		background-color: var(--color-accent-dark)
	}

	.btn-accent:active {
		background-color: var(--color-warning-active)
	}

	.btn-success {
		background-color: var(--color-success);
		color: #fff
	}

	.btn-success:hover {
		background-color: var(--color-success-active)
	}

	.btn-success:active {
		background-color: #017f31
	}

	.btn-warning {
		background-color: var(--color-warning);
		color: var(--color-neutral-900)
	}

	.btn-warning:hover {
		background-color: var(--color-warning-active)
	}

	.btn-warning:active {
		background-color: #b36300;
		background-color: oklch(58% .14 60)
	}

	.btn-error {
		background-color: var(--color-error);
		color: #fff
	}

	.btn-error:hover {
		background-color: var(--color-error-active)
	}

	.btn-error:active {
		background-color: #ac1730
	}

	.btn-outline {
		border: 1px solid var(--color-primary);
		color: var(--color-primary);
		background-color: rgba(0, 0, 0, 0)
	}

	.btn-outline:hover {
		background-color: var(--color-primary);
		color: #fff
	}

	.btn-outline:active {
		background-color: var(--color-primary-active)
	}

	.btn-ghost {
		color: var(--color-neutral-700);
		background-color: rgba(0, 0, 0, 0)
	}

	.btn-ghost:hover {
		background-color: var(--color-neutral-100)
	}

	.btn-ghost:active {
		background-color: var(--color-neutral-200)
	}

	.btn-ghost .btn-ripple {
		background: rgba(0, 0, 0, .1)
	}

	.btn-glass {
		-webkit-backdrop-filter: blur(8px);
		color: #fff;
		background: rgba(255, 255, 255, .2);
		border: 1px solid #ffffff4d
	}

	.btn-glass:hover {
		background: rgba(255, 255, 255, .3)
	}

	.btn-glass:active {
		background: rgba(255, 255, 255, .4)
	}

	.btn-text {
		color: var(--color-primary);
		background-color: rgba(0, 0, 0, 0);
		padding-inline: .25rem
	}

	.btn-text:hover {
		color: var(--color-primary-active)
	}

	.btn-text:active {
		color: #1541b6
	}

	.btn-text .btn-ripple {
		background: radial-gradient(circle, var(--color-primary-bg-hover)0%, var(--color-primary-bg)40%, transparent 70%)
	}

	.btn-link {
		color: var(--color-link);
		text-underline-offset: 2px;
		background-color: rgba(0, 0, 0, 0);
		text-decoration: underline
	}

	.btn-link:before {
		display: none
	}

	.btn-link:hover {
		color: var(--color-link-hover)
	}

	.btn-link:active {
		color: var(--color-link-active)
	}

	.btn-close {
		width: 2rem;
		height: 2rem;
		color: var(--color-text-tertiary);
		border-radius: calc(var(--xun-radius, 8px) - 2px);
		cursor: pointer;
		background: 0 0;
		border: none;
		justify-content: center;
		align-items: center;
		padding: 0;
		transition: all .2s;
		display: flex
	}

	.btn-close:hover {
		color: var(--color-text);
		background-color: var(--color-fill-tertiary)
	}

	.btn-close-sm {
		width: 1.5rem;
		height: 1.5rem
	}

	.btn-loading {
		pointer-events: none;
		position: relative
	}

	.btn-spinner,
	.xun-btn-loading {
		display: none
	}

	.btn-loading .btn-spinner,
	.btn-loading .xun-btn-loading {
		align-items: center;
		display: inline-flex
	}

	.card {
		background-color: var(--color-bg-container);
		border-radius: var(--xun-radius, 8px);
		box-shadow: var(--shadow-card);
		overflow: hidden
	}

	.card-radius-sm {
		border-radius: var(--xun-radius-sm, 6px)
	}

	.card-radius-lg {
		border-radius: var(--xun-radius-lg, 12px)
	}

	.card-shadow-xs {
		box-shadow: var(--shadow-xs)
	}

	.card-shadow-sm {
		box-shadow: var(--shadow-sm)
	}

	.card-shadow-none {
		box-shadow: none
	}

	.card-overflow-visible {
		overflow: visible
	}

	.card-sm {
		padding: var(--space-sm)
	}

	.card-md {
		padding: var(--space-md)
	}

	.card-lg {
		padding: var(--space-lg)
	}

	.card-hover {
		transition: all .3s var(--ease-smooth)
	}

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

	.card-hover-shadow {
		transition: box-shadow .2s var(--ease-smooth)
	}

	.card-hover-shadow:hover {
		box-shadow: var(--shadow-card-hover, var(--shadow-dropdown))
	}

	.card-glass {
		-webkit-backdrop-filter: blur(16px)saturate(180%);
		border-radius: calc(var(--xun-radius, 8px) + 4px);
		background: rgba(255, 255, 255, .7);
		border: 1px solid #ffffff4d
	}

	.card-bordered {
		border: 1px solid var(--color-border-secondary);
		box-shadow: none
	}

	.card-outline {
		border: 1px solid var(--color-border-secondary)
	}

	.input {
		border: 1px solid var(--color-border);
		border-radius: var(--xun-radius, 8px);
		background: var(--color-bg-container);
		width: 100%;
		color: var(--color-text);
		outline: none;
		padding: .5rem .75rem;
		font-size: .875rem;
		transition: border-color .2s
	}

	.input:focus {
		border-color: var(--xun-primary, var(--color-primary))
	}

	.input::placeholder {
		color: var(--color-neutral-400)
	}

	.input:disabled {
		background-color: var(--color-neutral-100);
		cursor: not-allowed
	}

	.input-sm {
		padding: .375rem .5rem;
		font-size: .75rem
	}

	.input-lg {
		padding: .75rem 1rem;
		font-size: 1rem
	}

	.input-glass {
		-webkit-backdrop-filter: blur(8px);
		background: rgba(255, 255, 255, .5);
		border: 1px solid #ffffff4d
	}

	.input-glass:focus {
		background: rgba(255, 255, 255, .7);
		border-color: rgba(255, 255, 255, .5)
	}

	.input-focus:focus,
	.textarea-focus:focus {
		border-color: var(--xun-primary, var(--color-primary));
		box-shadow: 0 0 0 3px var(--color-primary-bg)
	}

	.field-invalid,
	.input-invalid,
	.xun-field-invalid,
	.has-error,
	input.has-error,
	textarea.has-error,
	select.has-error {
		border-color: var(--color-error) !important
	}

	.field-invalid:focus,
	.input-invalid:focus,
	.xun-field-invalid:focus,
	.has-error:focus,
	input.has-error:focus,
	textarea.has-error:focus,
	select.has-error:focus {
		border-color: var(--color-error) !important;
		box-shadow: 0 0 0 3px var(--color-error-bg, #ef44441a) !important
	}

	.field-error,
	.xun-field-error {
		color: var(--color-error);
		margin-top: .25rem;
		font-size: .75rem;
		line-height: 1.25rem;
		display: none
	}

	.field-error:not(:empty),
	.xun-field-error:not(:empty) {
		display: block
	}

	.badge {
		border-radius: var(--radius-full);
		background-color: var(--color-neutral-100);
		color: var(--color-neutral-700);
		align-items: center;
		padding: .125rem .5rem;
		font-size: .75rem;
		font-weight: 500;
		display: inline-flex
	}

	.badge-primary {
		background-color: var(--color-primary);
		color: #fff
	}

	.badge-secondary {
		background-color: var(--color-secondary);
		color: #fff
	}

	.badge-success {
		background-color: var(--color-success);
		color: #fff
	}

	.badge-warning {
		background-color: var(--color-warning);
		color: var(--color-neutral-900)
	}

	.badge-error {
		background-color: var(--color-error);
		color: #fff
	}

	.badge-outline {
		background-color: rgba(0, 0, 0, 0);
		border: 1px solid
	}

	.avatar {
		border-radius: var(--radius-full);
		background-color: var(--color-neutral-200);
		color: var(--color-neutral-600);
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		display: inline-flex;
		overflow: hidden
	}

	.avatar-xs {
		width: 1.5rem;
		height: 1.5rem;
		font-size: .625rem
	}

	.avatar-sm {
		width: 2rem;
		height: 2rem;
		font-size: .75rem
	}

	.avatar-md {
		width: 2.5rem;
		height: 2.5rem;
		font-size: .875rem
	}

	.avatar-lg {
		width: 3rem;
		height: 3rem;
		font-size: 1rem
	}

	.avatar-xl {
		width: 4rem;
		height: 4rem;
		font-size: 1.25rem
	}

	.divider {
		background-color: var(--color-neutral-200);
		width: 100%;
		height: 1px;
		margin: var(--space-md)0
	}

	.divider-vertical {
		background-color: var(--color-neutral-200);
		width: 1px;
		height: 100%;
		margin: 0 var(--space-md)
	}

	.xun-select {
		min-width: 120px;
		display: inline-block;
		position: relative
	}

	.xun-select.xun-select-full {
		width: 100%;
		display: block
	}

	.xun-select-sm {
		--xun-select-font-size: .8125rem;
		--xun-select-padding-y: .5rem;
		--xun-select-padding-x: .75rem
	}

	.xun-select-subtle {
		--xun-select-bg: var(--color-fill-quaternary);
		--xun-select-bg-hover: var(--color-fill-tertiary);
		--xun-select-option-hover-bg: var(--color-fill-quaternary)
	}

	.xun-select-trigger {
		padding: var(--xun-select-padding-y, .625rem)var(--xun-select-padding-x, .875rem);
		font-size: var(--xun-select-font-size, .875rem);
		color: var(--color-text);
		background: var(--xun-select-bg, var(--color-fill-secondary));
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius, 8px);
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		justify-content: space-between;
		align-items: center;
		gap: .5rem;
		transition: all .2s;
		display: flex
	}

	.xun-select-trigger:hover {
		background: var(--xun-select-bg-hover, var(--color-fill-tertiary))
	}

	.xun-select.is-open .xun-select-trigger {
		background: var(--xun-select-bg-open, var(--color-bg-elevated));
		border-color: var(--xun-primary, var(--color-primary));
		box-shadow: 0 0 0 3px var(--color-primary-bg)
	}

	.xun-select-value {
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
		overflow: hidden
	}

	.xun-select-arrow {
		width: 12px;
		height: 12px;
		color: var(--color-text-tertiary);
		flex-shrink: 0;
		transition: transform .2s
	}

	.xun-select.is-open .xun-select-arrow {
		transform: rotate(180deg)
	}

	.xun-select-dropdown {
		z-index: 100;
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: var(--xun-radius, 8px);
		min-width: 100%;
		max-height: 240px;
		box-shadow: var(--shadow-dropdown, 0 4px 12px #00000026);
		opacity: 0;
		visibility: hidden;
		transition: all .2s;
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		overflow-y: auto;
		transform: translateY(-8px)
	}

	.xun-select.is-open .xun-select-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0)
	}

	.xun-select-options {
		padding: .375rem
	}

	.xun-select-option {
		font-size: var(--xun-select-font-size, .875rem);
		color: var(--color-text-secondary);
		border-radius: var(--xun-radius-sm, 6px);
		cursor: pointer;
		align-items: center;
		padding: .5rem .75rem;
		transition: all .15s;
		display: flex
	}

	.xun-select-option:hover {
		background: var(--xun-select-option-hover-bg, var(--color-fill-secondary));
		color: var(--color-text)
	}

	.xun-select-option.is-selected {
		background: var(--color-primary-bg);
		color: var(--xun-primary, var(--color-primary));
		font-weight: 500
	}

	.xun-select-option.is-selected:after {
		content: "";
		background-image: var(--xun-select-check-icon);
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		width: 12px;
		height: 12px;
		margin-left: auto;
		display: inline-block
	}

	.xun-select select {
		display: none
	}

	.xun-search-form {
		width: 100%
	}

	.xun-search-input-wrap,
	.xun-search-input-wrapper {
		align-items: center;
		display: flex;
		overflow: hidden
	}

	.xun-search-input {
		background: 0 0;
		border: none;
		outline: none;
		flex: 1;
		min-width: 0
	}

	.xun-search-input::-webkit-search-cancel-button {
		-webkit-appearance: none;
		display: none
	}

	.xun-search-input::-webkit-search-decoration {
		-webkit-appearance: none;
		display: none
	}

	.xun-search-input::-webkit-search-results-button {
		-webkit-appearance: none;
		display: none
	}

	.xun-search-input::-webkit-search-results-decoration {
		-webkit-appearance: none;
		display: none
	}

	.xun-banner-search {
		margin-bottom: 24px
	}

	.xun-banner-search .xun-search-input-wrap {
		background: var(--color-bg-container);
		border-radius: 50px;
		transition: box-shadow .3s;
		box-shadow: 0 8px 32px rgba(0, 0, 0, .15)
	}

	.xun-banner-search .xun-search-input-wrap:focus-within {
		box-shadow: 0 8px 40px rgba(0, 0, 0, .2)
	}

	.xun-banner-search .xun-search-input {
		height: 52px;
		color: var(--color-text);
		padding: 0 24px;
		font-size: 16px
	}

	.xun-banner-search .xun-search-input::placeholder {
		color: var(--color-text-tertiary, #999)
	}

	.xun-banner-search .xun-search-clear {
		width: 28px;
		height: 28px;
		color: var(--color-text-tertiary, #999);
		cursor: pointer;
		background: 0 0;
		border: none;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		margin-right: 4px;
		transition: all .2s;
		display: none
	}

	.xun-banner-search .xun-search-clear:hover {
		background: var(--color-fill-tertiary, #0000000f);
		color: var(--color-text-secondary, #666)
	}

	.xun-banner-search .xun-search-btn {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		border-radius: 50px;
		height: 44px;
		margin: 4px;
		padding: 0 24px;
		font-size: 15px
	}

	.xun-banner-search .xun-search-btn svg {
		width: 18px;
		height: 18px
	}

	.xun-banner-search .xun-search-btn--ai {
		background: var(--color-primary, #3b82f6);
		color: #fff;
		border: none
	}

	.xun-banner-search .xun-search-btn--ai:hover {
		background: var(--color-primary-hover, #2563eb)
	}

	.xun-banner-search .xun-search-btn--ai .xun-ai-icon {
		width: 18px;
		height: 18px
	}

	.xun-banner-search .xun-search-btn--ai .xun-ai-icon path {
		stroke: #fff
	}

	.xun-search-form--inline .xun-search-input-wrapper {
		background: var(--color-bg-container);
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius, 8px);
		transition: border-color .2s, box-shadow .2s
	}

	.xun-search-form--inline .xun-search-input-wrapper:focus-within {
		border-color: var(--xun-primary, var(--color-primary));
		box-shadow: 0 0 0 3px var(--color-primary-bg)
	}

	.xun-search-form--inline .xun-search-input {
		height: 44px;
		color: var(--color-text);
		padding: 0 1rem;
		font-size: .9375rem
	}

	.xun-search-form--inline .xun-search-input::placeholder {
		color: var(--color-text-tertiary, #999)
	}

	.xun-search-form--inline .xun-search-btn {
		border-radius: 0;
		flex-shrink: 0;
		gap: .375rem;
		height: 44px
	}

	.xun-search-form--inline .xun-search-btn span {
		display: none
	}

	.mask {
		background-color: var(--color-bg-mask);
		z-index: 1000;
		animation: .2s ease-out maskFadeIn;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}

	.mask.closing {
		animation: .2s ease-out forwards maskFadeOut
	}

	.mask-light {
		background-color: rgba(0, 0, 0, .25)
	}

	.mask-dark {
		background-color: rgba(0, 0, 0, .65)
	}

	.mask-blur {
		-webkit-backdrop-filter: blur(4px)
	}

	.panel-header,
	.modal-header,
	.drawer-header {
		border-bottom: 1px solid var(--color-border-secondary);
		flex-shrink: 0;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 1.5rem;
		display: flex
	}

	.panel-title,
	.modal-title,
	.drawer-title {
		color: var(--color-text);
		margin: 0;
		font-size: 1rem;
		font-weight: 600
	}

	.modal-title {
		font-size: 1.125rem
	}

	.panel-close,
	.modal-close,
	.drawer-close {
		width: 2rem;
		height: 2rem;
		color: var(--color-text-tertiary);
		border-radius: calc(var(--xun-radius, 8px) - 2px);
		cursor: pointer;
		background: 0 0;
		border: none;
		justify-content: center;
		align-items: center;
		padding: 0;
		transition: all .2s;
		display: flex
	}

	.panel-close:hover,
	.modal-close:hover,
	.drawer-close:hover {
		color: var(--color-text);
		background-color: var(--color-fill-tertiary)
	}

	.panel-body,
	.modal-body,
	.drawer-body {
		flex: 1;
		padding: 1.5rem;
		overflow-y: auto
	}

	.panel-footer,
	.modal-footer,
	.drawer-footer {
		border-top: 1px solid var(--color-border-secondary);
		flex-shrink: 0;
		justify-content: flex-end;
		align-items: center;
		gap: .75rem;
		padding: 1rem 1.5rem;
		display: flex
	}

	.modal {
		z-index: 1001;
		background-color: var(--color-bg-container);
		border-radius: var(--xun-radius, 8px);
		width: 90%;
		max-width: 500px;
		max-height: 85vh;
		box-shadow: var(--shadow-modal);
		animation: modalSlideIn .25s var(--ease-smooth);
		flex-direction: column;
		display: flex;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%)
	}

	.modal.closing {
		animation: .2s ease-out forwards modalSlideOut
	}

	.modal-sm {
		max-width: 400px
	}

	.modal-lg {
		max-width: 720px
	}

	.modal-xl {
		max-width: 960px
	}

	.modal-full {
		width: 95%;
		max-width: 95%;
		height: 90vh;
		max-height: 90vh
	}

	.modal .modal-footer .btn {
		box-sizing: border-box;
		height: 2.4rem;
		min-height: 2.4rem;
		padding-block: 0;
		line-height: 1;
		transition-property: background-color, color, box-shadow, border-color, opacity, transform;
		transform: translateY(0)
	}

	.modal .modal-footer .btn:hover,
	.modal .modal-footer .btn:active {
		transform: translateY(0)
	}

	.message-container {
		z-index: 10001;
		pointer-events: none;
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		display: flex;
		position: fixed;
		top: 1rem;
		left: 50%;
		transform: translate(-50%)
	}

	.message {
		background-color: var(--color-bg-container);
		border-radius: var(--xun-radius, 8px);
		box-shadow: var(--shadow-dropdown);
		color: var(--color-text);
		animation: messageSlideIn .3s var(--ease-smooth);
		pointer-events: auto;
		align-items: center;
		gap: .5rem;
		padding: .625rem 1rem;
		font-size: .875rem;
		display: inline-flex
	}

	.message.closing {
		animation: .2s ease-out forwards messageSlideOut
	}

	.message-icon {
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 1.25rem;
		height: 1.25rem;
		display: flex
	}

	.message-success,
	.message-success .message-icon {
		color: var(--color-success)
	}

	.message-error,
	.message-error .message-icon {
		color: var(--color-error)
	}

	.message-warning {
		color: var(--color-warning-text)
	}

	.message-warning .message-icon {
		color: var(--color-warning)
	}

	.message-info,
	.message-info .message-icon,
	.message-loading .message-icon {
		color: var(--color-primary)
	}

	.message-loading .message-spinner {
		animation: 1s linear infinite spin
	}

	.drawer {
		z-index: 1001;
		background-color: var(--color-bg-container);
		box-shadow: var(--shadow-modal);
		flex-direction: column;
		display: flex;
		position: fixed
	}

	.drawer-right {
		width: 378px;
		max-width: 100%;
		height: 100%;
		animation: drawerSlideInRight .3s var(--ease-smooth);
		top: 0;
		right: 0
	}

	.drawer-right.closing {
		animation: .25s ease-out forwards drawerSlideOutRight
	}

	.drawer-left {
		width: 378px;
		max-width: 100%;
		height: 100%;
		animation: drawerSlideInLeft .3s var(--ease-smooth);
		top: 0;
		left: 0
	}

	.drawer-left.closing {
		animation: .25s ease-out forwards drawerSlideOutLeft
	}

	.drawer-bottom {
		border-radius: calc(var(--xun-radius, 8px) + 4px)calc(var(--xun-radius, 8px) + 4px)0 0;
		height: auto;
		max-height: 80vh;
		animation: drawerSlideInBottom .3s var(--ease-smooth);
		bottom: 0;
		left: 0;
		right: 0
	}

	.drawer-bottom.closing {
		animation: .25s ease-out forwards drawerSlideOutBottom
	}

	.drawer-top {
		border-radius: 0 0 calc(var(--xun-radius, 8px) + 4px)calc(var(--xun-radius, 8px) + 4px);
		height: auto;
		max-height: 80vh;
		animation: drawerSlideInTop .3s var(--ease-smooth);
		top: 0;
		left: 0;
		right: 0
	}

	.drawer-top.closing {
		animation: .25s ease-out forwards drawerSlideOutTop
	}

	.drawer-left.drawer-sm,
	.drawer-right.drawer-sm {
		width: 300px
	}

	.drawer-left.drawer-lg,
	.drawer-right.drawer-lg {
		width: 520px
	}

	.drawer-left.drawer-xl,
	.drawer-right.drawer-xl {
		width: 720px
	}

	.drawer-top.drawer-sm,
	.drawer-bottom.drawer-sm {
		max-height: 30vh
	}

	.drawer-top.drawer-lg,
	.drawer-bottom.drawer-lg {
		max-height: 60vh
	}

	.drawer-top.drawer-xl,
	.drawer-bottom.drawer-xl {
		max-height: 80vh
	}

	.bottom-sheet-overlay {
		z-index: 1100;
		opacity: 0;
		pointer-events: none;
		background: 0 0;
		transition: opacity .3s, background .3s;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}

	.bottom-sheet-overlay.active {
		opacity: 1;
		pointer-events: auto;
		background: rgba(0, 0, 0, .5)
	}

	.bottom-sheet-overlay.closing {
		opacity: 0;
		background: 0 0
	}

	.bottom-sheet {
		z-index: 1101;
		background: #f5f5f5;
		background: var(--color-bg-layout, var(--color-bg-container));
		border-radius: calc(var(--xun-radius, 8px) + 8px)calc(var(--xun-radius, 8px) + 8px)0 0;
		max-height: calc(100vh - 60px);
		transition: transform .3s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1));
		will-change: transform;
		flex-direction: column;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		transform: translateY(100%);
		box-shadow: 0 -4px 32px rgba(0, 0, 0, .15)
	}

	.bottom-sheet.active {
		transform: translateY(0)
	}

	.bottom-sheet.closing {
		transform: translateY(100%)
	}

	.bottom-sheet-header {
		z-index: 1;
		background: inherit;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		padding: 12px 16px;
		display: flex;
		position: relative
	}

	.bottom-sheet-handle {
		background: var(--color-fill-tertiary);
		border-radius: 2px;
		width: 36px;
		height: 4px;
		transition: background .2s
	}

	.bottom-sheet-header:hover .bottom-sheet-handle {
		background: var(--color-fill-secondary)
	}

	.bottom-sheet-header {
		cursor: grab;
		-webkit-user-select: none;
		user-select: none
	}

	.bottom-sheet-header:active {
		cursor: grabbing
	}

	.bottom-sheet-close {
		background: var(--color-fill-quaternary);
		width: 36px;
		height: 36px;
		color: var(--color-text-tertiary);
		cursor: pointer;
		z-index: 10;
		border: none;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		transition: all .2s;
		display: flex;
		position: absolute;
		top: 8px;
		right: 12px;
		transform: none
	}

	.bottom-sheet-close:hover {
		background: var(--color-fill-tertiary);
		color: var(--color-text-secondary)
	}

	.bottom-sheet-close:active {
		transform: scale(.95)
	}

	.bottom-sheet-scroll {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		min-height: 0;
		overflow: hidden auto
	}

	.bottom-sheet-loading {
		color: var(--color-text-tertiary);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 12px;
		padding: 60px 20px;
		font-size: 14px;
		display: flex
	}

	.bottom-sheet-spinner {
		color: var(--color-primary)
	}

	.bottom-sheet-content {
		min-height: 200px
	}

	.bottom-sheet-content .xun-single,
	.bottom-sheet-content .xun-page {
		padding-top: 0
	}

	.bottom-sheet-content .xun-single-header {
		margin-top: 0
	}

	.bottom-sheet-content .xun-single-container,
	.bottom-sheet-content .xun-page-container {
		gap: 1rem
	}

	.bottom-sheet-content .xun-container,
	.bottom-sheet-content .xun-single-container,
	.bottom-sheet-content .xun-page-container {
		max-width: var(--xun-container-width, 1200px);
		margin: 0 auto;
		padding: 0 1rem
	}

	.bottom-sheet-content .xun-single-sidebar,
	.bottom-sheet-content .xun-page-sidebar {
		padding-top: 0;
		position: static
	}

	@media(max-width:768px) {
		.bottom-sheet {
			border-radius: calc(var(--xun-radius, 8px) + 4px)calc(var(--xun-radius, 8px) + 4px)0 0;
			max-height: calc(100vh - 40px)
		}

		.bottom-sheet-header {
			cursor: grab;
			touch-action: none;
			padding: 10px 12px
		}

		.bottom-sheet-header:active {
			cursor: grabbing
		}

		.bottom-sheet-close {
			display: none
		}

		.bottom-sheet-handle {
			width: 48px;
			height: 5px
		}

		.bottom-sheet-content .xun-container {
			padding: 0 16px 32px
		}
	}

	@supports (height:100dvh) {
		.bottom-sheet {
			max-height: calc(100dvh - 60px)
		}

		@media(max-width:768px) {
			.bottom-sheet {
				max-height: calc(100dvh - 40px)
			}
		}
	}

	.dark .bottom-sheet-overlay.active {
		background: var(--color-bg-mask, #000000a6)
	}

	.dark .bottom-sheet {
		background: #141414;
		background: var(--color-bg-layout);
		box-shadow: 0 -4px 32px rgba(0, 0, 0, .5)
	}

	.dark .bottom-sheet-handle {
		background: var(--color-fill-tertiary)
	}

	.dark .bottom-sheet-header:hover .bottom-sheet-handle {
		background: var(--color-fill-secondary)
	}

	.dark .bottom-sheet-close {
		background: var(--color-fill-quaternary);
		color: var(--color-text-tertiary)
	}

	.dark .bottom-sheet-close:hover {
		background: var(--color-fill-tertiary);
		color: var(--color-text-secondary)
	}

	.dark .bottom-sheet-loading {
		color: var(--color-text-tertiary)
	}

	.dark .bottom-sheet-spinner {
		color: var(--color-primary)
	}

	.dark .bottom-sheet-scroll::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, .2)
	}

	.dark .bottom-sheet-scroll::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, .3)
	}

	@media(prefers-color-scheme:dark) {
		:root:not(.light) .bottom-sheet-overlay.active {
			background: var(--color-bg-mask, #000000a6)
		}

		:root:not(.light) .bottom-sheet {
			background: var(--color-bg-layout);
			box-shadow: 0 -4px 32px rgba(0, 0, 0, .5)
		}

		:root:not(.light) .bottom-sheet-handle {
			background: var(--color-fill-tertiary)
		}

		:root:not(.light) .bottom-sheet-header:hover .bottom-sheet-handle {
			background: var(--color-fill-secondary)
		}

		:root:not(.light) .bottom-sheet-close {
			background: var(--color-fill-quaternary);
			color: var(--color-text-tertiary)
		}

		:root:not(.light) .bottom-sheet-close:hover {
			background: var(--color-fill-tertiary);
			color: var(--color-text-secondary)
		}

		:root:not(.light) .bottom-sheet-loading {
			color: var(--color-text-tertiary)
		}

		:root:not(.light) .bottom-sheet-spinner {
			color: var(--color-primary)
		}

		:root:not(.light) .bottom-sheet-scroll::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, .2)
		}

		:root:not(.light) .bottom-sheet-scroll::-webkit-scrollbar-thumb:hover {
			background: rgba(255, 255, 255, .3)
		}
	}

	@media(prefers-reduced-motion:reduce) {

		.bottom-sheet,
		.bottom-sheet-overlay {
			transition: none
		}
	}

	.checkbox {
		color: var(--color-text-secondary);
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		align-items: center;
		gap: .5rem;
		font-size: .875rem;
		display: inline-flex
	}

	.checkbox:hover {
		color: var(--color-text)
	}

	.checkbox input {
		opacity: 0;
		width: 0;
		height: 0;
		position: absolute
	}

	.checkbox-box {
		border: 1px solid var(--color-border);
		background: var(--color-bg-container);
		border-radius: 4px;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		transition: all .2s;
		display: flex;
		position: relative
	}

	.checkbox:hover .checkbox-box {
		border-color: var(--xun-primary, var(--color-primary))
	}

	.checkbox input:checked+.checkbox-box {
		background: var(--xun-primary, var(--color-primary));
		border-color: var(--xun-primary, var(--color-primary))
	}

	.checkbox-box svg {
		color: #fff;
		opacity: 0;
		width: 12px;
		height: 12px;
		transition: all .15s;
		transform: scale(.5)
	}

	.checkbox input:checked+.checkbox-box svg {
		opacity: 1;
		transform: scale(1)
	}

	.checkbox input:focus-visible+.checkbox-box {
		outline: 2px solid var(--xun-primary, var(--color-primary));
		outline-offset: 2px
	}

	.checkbox input:disabled+.checkbox-box {
		opacity: .5;
		cursor: not-allowed
	}

	.checkbox:has(input:disabled) {
		cursor: not-allowed;
		opacity: .5
	}

	.checkbox-sm .checkbox-box {
		width: 14px;
		height: 14px
	}

	.checkbox-sm .checkbox-box svg {
		width: 10px;
		height: 10px
	}

	.checkbox-lg .checkbox-box {
		width: 20px;
		height: 20px
	}

	.checkbox-lg .checkbox-box svg {
		width: 14px;
		height: 14px
	}

	@media(prefers-color-scheme:dark) {
		:root:not(.light) .checkbox-box {
			background: var(--color-fill-quaternary);
			border-color: var(--color-border-secondary)
		}
	}

	.dark .checkbox-box {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary)
	}

	article.xun-single-software {
		background: var(--color-bg-layout);
		padding: 0
	}

	.xun-software-hero {
		background: var(--color-bg-layout);
		border-bottom: none;
		padding: 2.75rem 0 3.25rem;
		position: relative;
		overflow: hidden
	}

	.xun-software-hero:after {
		content: "";
		background: linear-gradient(to bottom, transparent, var(--color-bg-layout));
		pointer-events: none;
		height: 140px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0
	}

	.xun-software-hero--transparent {
		margin-top: -64px;
		padding-top: calc(64px + 4rem)
	}

	.xun-software-hero-bg {
		pointer-events: none;
		opacity: .95;
		background: radial-gradient(900px at 15% 10%, rgba(22, 119, 255, .18), rgba(0, 0, 0, 0) 60%), radial-gradient(700px at 85% 25%, rgba(82, 196, 26, .12), rgba(0, 0, 0, 0) 55%), radial-gradient(600px at 70% 90%, rgba(250, 173, 20, .1), rgba(0, 0, 0, 0) 55%);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		.xun-software-hero-bg {
			background: radial-gradient(900px circle at 15% 10%, var(--xun-primary, oklch(56.5% .22 260))0%, transparent 60%), radial-gradient(700px circle at 85% 25%, var(--xun-secondary, oklch(72% .19 142))0%, transparent 55%), radial-gradient(600px circle at 70% 90%, #f8a8001f 0%, transparent 55%)
		}

		@supports (color:color-mix(in lab, red, red)) {
			.xun-software-hero-bg {
				background: radial-gradient(900px circle at 15% 10%, color-mix(in srgb, var(--xun-primary, var(--color-primary))22%, transparent)0%, transparent 60%), radial-gradient(700px circle at 85% 25%, color-mix(in srgb, var(--xun-secondary, var(--color-secondary))16%, transparent)0%, transparent 55%), radial-gradient(600px circle at 70% 90%, color-mix(in srgb, var(--color-warning)12%, transparent)0%, transparent 55%)
			}
		}
	}

	.xun-software-hero-inner {
		z-index: 1;
		max-width: var(--xun-container-width, 1200px);
		margin: 0 auto;
		padding: 0 1rem;
		position: relative
	}

	.xun-software-breadcrumb {
		justify-content: center;
		margin-bottom: 1.5rem
	}

	.xun-software-hero--centered .xun-software-hero-content {
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		display: flex
	}

	.xun-software-hero-icon {
		background: 0 0;
		border-radius: 24px;
		width: 120px;
		height: 120px;
		overflow: hidden
	}

	.xun-software-hero-icon-img {
		object-fit: cover;
		width: 100%;
		height: 100%
	}

	.xun-software-hero-icon-placeholder {
		width: 100%;
		height: 100%;
		color: var(--color-text-quaternary);
		background: var(--color-fill-tertiary);
		justify-content: center;
		align-items: center;
		display: flex
	}

	.xun-software-hero-title {
		letter-spacing: -.01em;
		color: var(--color-text);
		margin: 0;
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.3
	}

	.xun-software-hero-desc {
		max-width: 600px;
		color: var(--color-text-secondary);
		margin: 0;
		font-size: .9375rem;
		line-height: 1.6
	}

	.xun-software-hero--centered .xun-software-hero-actions {
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		margin-top: .5rem;
		display: flex
	}

	.xun-software-hero--centered .xun-download-hero-btns {
		flex-wrap: wrap;
		justify-content: center;
		gap: .75rem;
		display: flex
	}

	.xun-software-hero--centered .xun-download-hero-price {
		text-align: center;
		margin-right: 0
	}

	.xun-software-hero--centered .xun-download-hero-price:empty {
		display: none
	}

	.xun-software-hero-meta {
		border-top: 1px solid var(--color-border-secondary);
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: .5rem 1rem;
		margin-top: .75rem;
		padding-top: .75rem;
		display: flex
	}

	.xun-software-hero-meta-item {
		color: var(--color-text-tertiary);
		align-items: center;
		gap: .375rem;
		font-size: .8125rem;
		display: inline-flex
	}

	.xun-software-hero-meta-item svg {
		opacity: .7;
		flex-shrink: 0
	}

	.xun-software-hero-meta-attr {
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius-sm, 4px);
		-webkit-backdrop-filter: blur(8px);
		background: rgba(255, 255, 255, .5);
		padding: .25rem .5rem
	}

	.xun-software-hero-social {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		margin-top: .75rem;
		display: flex
	}

	.xun-software-action-trigger {
		display: inline-flex;
		position: relative
	}

	.xun-software-hero-social .xun-single-actions-right {
		margin-left: 0
	}

	.xun-software-hero-social .xun-single-share-label {
		display: none
	}

	.xun-software-hero-social .xun-single-share-btns {
		gap: .5rem
	}

	.xun-single-software .xun-single-container {
		z-index: 2;
		margin-top: -2.25rem;
		padding-top: 0;
		padding-bottom: 1.5rem;
		position: relative
	}

	.xun-single-software .xun-single-container.xun-sidebar-left .xun-single-sidebar-cell {
		order: -1
	}

	.xun-single-software .xun-software-section.card,
	.xun-single-software .xun-single-sidebar .widget {
		border: 1px solid var(--color-border-secondary);
		box-shadow: var(--shadow-xs)
	}

	.xun-single-software .xun-single-main>.xun-software-section.card:first-child,
	.xun-single-software .xun-single-sidebar .widget:first-child {
		border-top-left-radius: calc(var(--xun-radius, 8px) + 6px);
		border-top-right-radius: calc(var(--xun-radius, 8px) + 6px)
	}

	.xun-software-section {
		margin-bottom: 1rem
	}

	.xun-software-section-head {
		border-bottom: 1px solid var(--color-border-secondary);
		justify-content: space-between;
		align-items: center;
		gap: .75rem;
		padding: 1rem 1.25rem;
		display: flex
	}

	.xun-software-section-title {
		align-items: center;
		gap: .5rem;
		min-width: 0;
		display: flex
	}

	.xun-software-section-title h2 {
		color: var(--color-text);
		margin: 0;
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.2
	}

	.xun-software-empty {
		color: var(--color-text-tertiary);
		padding: 1rem 1.25rem;
		font-size: .9375rem
	}

	.xun-software-download-grid {
		grid-template-columns: 1fr 320px;
		gap: 1.25rem;
		padding: 1.25rem;
		display: grid
	}

	.xun-software-download-side {
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius, 8px);
		background: var(--color-fill-quaternary);
		padding: 1rem
	}

	.xun-software-side-title {
		color: var(--color-text);
		margin: 0 0 .75rem;
		font-size: .9375rem;
		font-weight: 700
	}

	.xun-software-specs {
		gap: .5rem;
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid
	}

	.xun-software-spec {
		border-radius: var(--xun-radius-sm, 6px);
		background: rgba(255, 255, 255, .6);
		border: 1px solid #0000000f;
		justify-content: space-between;
		align-items: flex-start;
		gap: .75rem;
		padding: .5rem .625rem;
		display: flex
	}

	.xun-software-spec-label {
		color: var(--color-text-tertiary);
		white-space: nowrap;
		font-size: .8125rem
	}

	.xun-software-spec-value {
		color: var(--color-text-secondary);
		text-align: right;
		word-break: break-word;
		font-size: .8125rem
	}

	.xun-software-spec-empty {
		color: var(--color-text-tertiary);
		border: 1px dashed var(--color-border-secondary);
		background: 0 0
	}

	.xun-software-footer {
		border-top: none;
		padding-top: 0
	}

	.xun-software-comments-body {
		padding: 1.25rem
	}

	@media(max-width:768px) {
		.xun-software-hero {
			padding: 2rem 0 2.5rem
		}

		.xun-software-hero--transparent {
			margin-top: -56px;
			padding-top: calc(56px + 3rem)
		}

		.xun-software-hero:after {
			height: 110px
		}

		.xun-single-software .xun-single-container {
			margin-top: -1.25rem
		}

		.xun-software-hero-icon {
			border-radius: 20px;
			width: 96px;
			height: 96px
		}

		.xun-software-hero-title {
			font-size: 1.375rem
		}

		.xun-software-hero-desc {
			font-size: .875rem
		}

		.xun-software-hero-meta {
			gap: .375rem .75rem
		}

		.xun-software-hero-meta-item {
			font-size: .75rem
		}

		.xun-software-download-grid {
			grid-template-columns: 1fr;
			padding: 1rem
		}

		.xun-software-section-head,
		.xun-software-empty {
			padding: .875rem 1rem
		}

		.xun-software-comments-body {
			padding: 1rem
		}
	}

	.xun-ai-summary-wrap {
		margin: .75rem 0 1rem
	}

	.xun-ai-summary {
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border-secondary);
		background: var(--color-fill-tertiary);
		padding: .875rem 1rem;
		position: relative;
		overflow: hidden
	}

	.xun-ai-summary__icon-wrap {
		opacity: .85;
		width: 1.5rem;
		height: 1.5rem;
		transition: opacity .2s;
		position: absolute;
		top: .75rem;
		right: .875rem
	}

	.xun-ai-summary__icon-wrap:hover {
		opacity: 1
	}

	.xun-ai-summary__icon {
		width: 100%;
		height: 100%;
		display: block
	}

	.xun-ai-summary__label {
		color: var(--color-text);
		align-items: center;
		gap: .5rem;
		margin: 0 0 .5rem;
		font-size: .8125rem;
		font-weight: 600;
		display: inline-flex
	}

	.xun-ai-summary__label:before {
		content: "AI";
		background: var(--color-primary);
		color: rgba(255, 255, 255, .92);
		border-radius: .5rem;
		justify-content: center;
		align-items: center;
		width: 1.375rem;
		height: 1.375rem;
		font-size: .75rem;
		line-height: 1;
		display: inline-flex
	}

	.xun-ai-summary__text {
		color: var(--color-text-secondary);
		word-break: break-word;
		margin: 0;
		font-size: .9375rem;
		line-height: 1.8
	}

	.xun-ai-summary-divider {
		border: 0;
		border-top: 1px solid var(--color-border-secondary);
		margin: 1.125rem 0
	}

	.xun-ai-summary__cursor {
		vertical-align: -2px;
		opacity: .85;
		background: currentColor;
		width: 2px;
		height: 1em;
		margin-left: 2px;
		animation: 1s step-end infinite xun-ai-summary-cursor;
		display: inline-block
	}

	.xun-ai-summary--done .xun-ai-summary__cursor,
	.xun-ai-summary--loading .xun-ai-summary__cursor {
		display: none
	}

	.xun-ai-summary--typing .xun-ai-summary__cursor {
		display: inline-block
	}

	.xun-ai-summary--loading .xun-ai-summary__text {
		color: var(--color-text-tertiary)
	}

	.xun-ai-summary__dots {
		vertical-align: middle;
		align-items: center;
		gap: 3px;
		margin-left: 4px;
		display: inline-flex
	}

	.xun-ai-summary__dots:before,
	.xun-ai-summary__dots:after,
	.xun-ai-summary__dots span {
		content: "";
		background: var(--color-primary);
		border-radius: 50%;
		width: 4px;
		height: 4px;
		animation: 1.4s ease-in-out infinite xun-ai-summary-pulse;
		display: inline-block
	}

	.xun-ai-summary__dots:after {
		animation-delay: .2s
	}

	.xun-ai-summary__dots span {
		animation-delay: .4s
	}

	.xun-ai-summary--loading:after {
		content: "";
		animation: xun-ai-summary-shimmer 1.6s var(--ease-smooth)infinite;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .1) 45%, rgba(0, 0, 0, 0) 85%);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform: translate(-100%)
	}

	@media(prefers-color-scheme:dark) {
		:root:not(.light) .xun-ai-summary--loading:after {
			background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .06) 45%, rgba(0, 0, 0, 0) 85%)
		}
	}

	.dark .xun-ai-summary--loading:after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .06) 45%, rgba(0, 0, 0, 0) 85%)
	}

	.xun-ai-summary--typing .xun-ai-summary__dots {
		display: none
	}

	@keyframes xun-ai-summary-cursor {

		0%,
		49% {
			opacity: 1
		}

		50%,
		to {
			opacity: 0
		}
	}

	@keyframes xun-ai-summary-pulse {

		0%,
		to {
			opacity: .3;
			transform: scale(.8)
		}

		50% {
			opacity: 1;
			transform: scale(1)
		}
	}

	@keyframes xun-ai-summary-shimmer {
		0% {
			transform: translate(-100%)
		}

		to {
			transform: translate(100%)
		}
	}

	.xun-ai-search-wrap {
		margin: 0 0 1.25rem
	}

	.xun-ai-search {
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--radius-xl);
		background: var(--color-fill-tertiary);
		padding: 1rem;
		overflow: hidden
	}

	.xun-ai-search__header {
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		margin-bottom: .5rem;
		display: flex
	}

	.xun-ai-search__label {
		color: var(--color-text);
		align-items: center;
		gap: .5rem;
		margin: 0;
		font-size: .875rem;
		font-weight: 600;
		display: inline-flex
	}

	.xun-ai-search__label:before {
		content: "AI";
		background: var(--color-primary);
		color: rgba(255, 255, 255, .92);
		border-radius: .5rem;
		justify-content: center;
		align-items: center;
		width: 1.5rem;
		height: 1.5rem;
		font-size: .75rem;
		line-height: 1;
		display: inline-flex
	}

	.xun-ai-search__meta {
		color: var(--color-text-tertiary, #999);
		text-align: right;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: .5rem;
		margin: 0;
		font-size: .8125rem;
		display: flex
	}

	.xun-ai-search__answer {
		color: var(--color-text-secondary);
		word-break: break-word;
		white-space: pre-wrap;
		margin: 0;
		font-size: .9375rem;
		line-height: 1.85
	}

	.xun-ai-search__sources {
		margin-top: .875rem
	}

	.xun-ai-search__sources-title {
		color: var(--color-text);
		margin: 0 0 .5rem;
		font-size: .8125rem;
		font-weight: 600
	}

	.xun-ai-search__sources-list {
		margin: 0;
		padding-left: 1.25rem
	}

	.xun-ai-search__source {
		margin: 0 0 .75rem
	}

	.xun-ai-search__source-head {
		flex-wrap: wrap;
		align-items: center;
		gap: .5rem;
		display: flex
	}

	.xun-ai-search__source-type {
		background: var(--color-bg-container);
		border: 1px solid var(--color-border-secondary);
		color: var(--color-text-tertiary);
		border-radius: 999px;
		align-items: center;
		padding: .125rem .5rem;
		font-size: .75rem;
		line-height: 1.2;
		display: inline-flex
	}

	.xun-ai-search__source-link {
		color: var(--color-primary);
		font-weight: 600;
		text-decoration: none
	}

	.xun-ai-search__source-link:hover {
		text-decoration: underline
	}

	.xun-ai-search__source-text {
		color: var(--color-text);
		font-weight: 600
	}

	.xun-ai-search__source-excerpt {
		color: var(--color-text-tertiary);
		margin: .25rem 0 0;
		font-size: .8125rem;
		line-height: 1.7
	}

	.xun-ai-search--loading .xun-ai-search__answer {
		color: var(--color-text-tertiary)
	}

	.xun-ai-search--error {
		border-color: var(--color-error-border, #ef44444d);
		background: var(--color-error-bg, #ef444414)
	}

	.xun-ai-search-modal .xun-modal-container {
		width: 100%;
		max-width: 960px;
		margin: 1rem;
		max-height: none !important;
		overflow: visible !important
	}

	.xun-ai-search-modal .xun-modal-content {
		background: var(--color-bg-container);
		border-radius: var(--xun-radius-lg, 12px);
		box-shadow: var(--shadow-modal);
		flex-direction: column;
		max-height: calc(100vh - 2rem);
		display: flex;
		overflow: hidden
	}

	.xun-ai-search-modal .xun-modal-header {
		border-bottom: 1px solid var(--color-border-secondary);
		justify-content: space-between;
		align-items: center;
		padding: 1.25rem 1.5rem;
		display: flex
	}

	.xun-ai-search-modal .xun-modal-title {
		color: var(--color-text);
		margin: 0;
		font-size: 1.125rem;
		font-weight: 600
	}

	.xun-ai-search-modal .xun-modal-close {
		width: 32px;
		height: 32px;
		color: var(--color-text-tertiary);
		border-radius: var(--xun-radius, 8px);
		cursor: pointer;
		background: 0 0;
		border: none;
		justify-content: center;
		align-items: center;
		padding: 0;
		transition: all .2s;
		display: flex;
		position: static;
		top: auto;
		right: auto
	}

	.xun-ai-search-modal .xun-modal-close:hover {
		color: var(--color-text);
		background: var(--color-fill-secondary)
	}

	.xun-ai-search-modal .xun-modal-body {
		min-height: 0;
		padding: 1.5rem;
		overflow-y: auto
	}

	.xun-ai-search-modal .xun-modal-footer {
		border-top: 1px solid var(--color-border-secondary);
		justify-content: flex-end;
		gap: .75rem;
		padding: 1rem 1.5rem;
		display: flex
	}

	.xun-ai-search-modal__wrap {
		flex-direction: column;
		gap: 1rem;
		display: flex
	}

	.xun-ai-search-modal__top {
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		display: flex
	}

	.xun-ai-search-modal__query {
		color: var(--color-text-secondary);
		flex-wrap: wrap;
		align-items: center;
		gap: .5rem;
		font-size: .875rem;
		display: flex
	}

	.xun-ai-search-modal__query-label {
		background: var(--color-fill-tertiary);
		border: 1px solid var(--color-border-secondary);
		color: var(--color-text-tertiary);
		border-radius: 999px;
		align-items: center;
		padding: .25rem .5rem;
		font-size: .75rem;
		line-height: 1;
		display: inline-flex
	}

	.xun-ai-search-modal__query-text {
		color: var(--color-text);
		font-weight: 600
	}

	.xun-ai-search-modal__status {
		color: var(--color-text-tertiary);
		align-items: center;
		gap: .5rem;
		font-size: .875rem;
		display: inline-flex
	}

	.xun-ai-search-modal__spinner {
		color: var(--xun-primary, var(--color-primary));
		flex-shrink: 0
	}

	.xun-ai-search-modal__answer-card {
		background: var(--color-fill-tertiary)
	}

	.xun-ai-search-modal__answer-title {
		color: var(--color-text);
		margin-bottom: .5rem;
		font-size: .875rem;
		font-weight: 700
	}

	.xun-ai-search-modal__answer {
		white-space: pre-wrap;
		word-break: break-word;
		color: var(--color-text-secondary);
		min-height: 3.25rem;
		font-size: .9375rem;
		line-height: 1.9
	}

	.xun-ai-search-modal__results-title {
		color: var(--color-text);
		margin-bottom: .5rem;
		font-size: .875rem;
		font-weight: 700
	}

	.xun-ai-search-modal__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .875rem;
		display: grid
	}

	@media(max-width:1024px) {
		.xun-ai-search-modal__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr))
		}
	}

	@media(max-width:640px) {
		.xun-ai-search-modal__grid {
			grid-template-columns: 1fr
		}
	}

	.xun-ai-search-modal__card {
		color: inherit;
		gap: .75rem;
		padding: .875rem;
		text-decoration: none;
		display: flex
	}

	.xun-ai-search-modal__thumb {
		border-radius: calc(var(--xun-radius, 8px) - 2px);
		background: var(--color-fill-tertiary);
		flex: none;
		width: 80px;
		height: 80px;
		position: relative;
		overflow: hidden
	}

	.xun-ai-search-modal__img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		display: block
	}

	.xun-ai-search-modal__img-placeholder {
		background: linear-gradient(135deg, var(--color-fill-tertiary), var(--color-fill-quaternary));
		width: 100%;
		height: 100%
	}

	.xun-ai-search-modal__card-body {
		flex-direction: column;
		flex: 1;
		gap: .35rem;
		min-width: 0;
		display: flex
	}

	.xun-ai-search-modal__card-meta,
	.xun-ai-search-modal__badge {
		display: none
	}

	.xun-ai-search-modal__card-title {
		color: var(--color-text);
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: .9375rem;
		font-weight: 700;
		line-height: 1.3;
		display: -webkit-box;
		overflow: hidden
	}

	.xun-ai-search-modal__card-excerpt {
		background: var(--color-fill-quaternary, #f5f5f5);
		border-radius: var(--xun-radius-sm, 4px);
		margin-top: .25rem;
		padding: .375rem .5rem
	}

	.xun-ai-search-modal__card-excerpt-text {
		color: var(--color-text-secondary);
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: .8125rem;
		line-height: 1.5;
		display: -webkit-box;
		overflow: hidden
	}

	.xun-ai-search-modal__empty {
		color: var(--color-text-tertiary);
		border: 1px dashed var(--color-border-secondary);
		text-align: center;
		border-radius: 16px;
		grid-column: 1/-1;
		padding: 1rem
	}

	@media(max-width:640px) {

		.xun-ai-search-modal .xun-modal-header,
		.xun-ai-search-modal .xun-modal-body {
			padding: 1rem
		}

		.xun-ai-search-modal .xun-modal-footer {
			padding: .75rem 1rem
		}
	}
}

@layer utilities {
	.collapse {
		visibility: collapse
	}

	.visible {
		visibility: visible
	}

	.absolute {
		position: absolute
	}

	.fixed {
		position: fixed
	}

	.relative {
		position: relative
	}

	.static {
		position: static
	}

	.sticky {
		position: sticky
	}

	.col-12 {
		grid-column: 12
	}

	.container {
		width: 100%
	}

	@media(min-width:40rem) {
		.container {
			max-width: 40rem
		}
	}

	@media(min-width:48rem) {
		.container {
			max-width: 48rem
		}
	}

	@media(min-width:64rem) {
		.container {
			max-width: 64rem
		}
	}

	@media(min-width:80rem) {
		.container {
			max-width: 80rem
		}
	}

	@media(min-width:96rem) {
		.container {
			max-width: 96rem
		}
	}

	@media(min-width:120rem) {
		.container {
			max-width: 120rem
		}
	}

	.m-20 {
		margin: calc(var(--spacing)*20)
	}

	.m-30 {
		margin: calc(var(--spacing)*30)
	}

	.mx-20 {
		margin-inline: calc(var(--spacing)*20)
	}

	.mx-30 {
		margin-inline: calc(var(--spacing)*30)
	}

	.my-5 {
		margin-block: calc(var(--spacing)*5)
	}

	.my-20 {
		margin-block: calc(var(--spacing)*20)
	}

	.my-30 {
		margin-block: calc(var(--spacing)*30)
	}

	.mt-2 {
		margin-top: calc(var(--spacing)*2)
	}

	.mt-4 {
		margin-top: calc(var(--spacing)*4)
	}

	.mt-20 {
		margin-top: calc(var(--spacing)*20)
	}

	.mt-30 {
		margin-top: calc(var(--spacing)*30)
	}

	.mb-0 {
		margin-bottom: calc(var(--spacing)*0)
	}

	.mb-1 {
		margin-bottom: calc(var(--spacing)*1)
	}

	.mb-4 {
		margin-bottom: calc(var(--spacing)*4)
	}

	.mb-20 {
		margin-bottom: calc(var(--spacing)*20)
	}

	.mb-30 {
		margin-bottom: calc(var(--spacing)*30)
	}

	.\!flex {
		display: flex !important
	}

	.block {
		display: block
	}

	.contents {
		display: contents
	}

	.flex {
		display: flex
	}

	.flex\! {
		display: flex !important
	}

	.grid {
		display: grid
	}

	.hidden {
		display: none
	}

	.inline {
		display: inline
	}

	.inline-block {
		display: inline-block
	}

	.inline-flex {
		display: inline-flex
	}

	.inline-grid {
		display: inline-grid
	}

	.inline-table {
		display: inline-table
	}

	.list-item {
		display: list-item
	}

	.table {
		display: table
	}

	.table-caption {
		display: table-caption
	}

	.table-cell {
		display: table-cell
	}

	.table-column {
		display: table-column
	}

	.table-column-group {
		display: table-column-group
	}

	.table-footer-group {
		display: table-footer-group
	}

	.table-header-group {
		display: table-header-group
	}

	.table-row {
		display: table-row
	}

	.table-row-group {
		display: table-row-group
	}

	.w-full {
		width: 100%
	}

	.flex-1 {
		flex: 1
	}

	.flex-shrink {
		flex-shrink: 1
	}

	.flex-grow {
		flex-grow: 1
	}

	.border-collapse {
		border-collapse: collapse
	}

	.transform {
		transform: var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )
	}

	.animate-spin {
		animation: var(--animate-spin)
	}

	.resize {
		resize: both
	}

	.resize-y {
		resize: vertical
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.flex-col {
		flex-direction: column
	}

	.flex-wrap {
		flex-wrap: wrap
	}

	.items-center {
		align-items: center
	}

	.items-end {
		align-items: flex-end
	}

	.items-start {
		align-items: flex-start
	}

	.justify-around {
		justify-content: space-around
	}

	.justify-between {
		justify-content: space-between
	}

	.justify-center {
		justify-content: center
	}

	.justify-end {
		justify-content: flex-end
	}

	.gap-1 {
		gap: calc(var(--spacing)*1)
	}

	.gap-1\.5 {
		gap: calc(var(--spacing)*1.5)
	}

	.gap-3 {
		gap: calc(var(--spacing)*3)
	}

	.gap-4 {
		gap: calc(var(--spacing)*4)
	}

	:where(.space-y-6>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))
	}

	.self-end {
		align-self: flex-end
	}

	.self-start {
		align-self: flex-start
	}

	.border {
		border-style: var(--tw-border-style);
		border-width: 1px
	}

	.border-gray-200 {
		border-color: var(--color-gray-200)
	}

	.bg-\(--brand-color\) {
		background-color: var(--brand-color)
	}

	.bg-\[--brand-color\] {
		background-color: --brand-color
	}

	.bg-primary {
		background-color: var(--color-primary)
	}

	.bg-red-500 {
		background-color: var(--color-red-500)
	}

	.bg-red-500\! {
		background-color: var(--color-red-500) !important
	}

	.bg-white {
		background-color: var(--color-white)
	}

	.mask-repeat {
		-webkit-mask-repeat: repeat;
		mask-repeat: repeat
	}

	.p-20 {
		padding: calc(var(--spacing)*20)
	}

	.p-30 {
		padding: calc(var(--spacing)*30)
	}

	.px-4 {
		padding-inline: calc(var(--spacing)*4)
	}

	.px-20 {
		padding-inline: calc(var(--spacing)*20)
	}

	.px-30 {
		padding-inline: calc(var(--spacing)*30)
	}

	.py-2 {
		padding-block: calc(var(--spacing)*2)
	}

	.py-5 {
		padding-block: calc(var(--spacing)*5)
	}

	.py-20 {
		padding-block: calc(var(--spacing)*20)
	}

	.py-30 {
		padding-block: calc(var(--spacing)*30)
	}

	.pt-5 {
		padding-top: calc(var(--spacing)*5)
	}

	.text-center {
		text-align: center
	}

	.text-justify {
		text-align: justify
	}

	.text-left {
		text-align: left
	}

	.text-right {
		text-align: right
	}

	.font-display {
		font-family: var(--font-display)
	}

	.text-2xl {
		font-size: var(--text-2xl);
		line-height: var(--tw-leading, var(--text-2xl--line-height))
	}

	.text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--tw-leading, var(--text-3xl--line-height))
	}

	.text-sm {
		font-size: var(--text-sm);
		line-height: var(--tw-leading, var(--text-sm--line-height))
	}

	.font-bold {
		--tw-font-weight: var(--font-weight-bold);
		font-weight: var(--font-weight-bold)
	}

	.font-medium {
		--tw-font-weight: var(--font-weight-medium);
		font-weight: var(--font-weight-medium)
	}

	.text-wrap {
		text-wrap: wrap
	}

	.break-all {
		word-break: break-all
	}

	.text-ellipsis {
		text-overflow: ellipsis
	}

	.text-gray-700 {
		color: var(--color-gray-700)
	}

	.text-gray-900 {
		color: var(--color-gray-900)
	}

	.text-success {
		color: var(--color-success)
	}

	.text-white {
		color: var(--color-white)
	}

	.capitalize {
		text-transform: capitalize
	}

	.lowercase {
		text-transform: lowercase
	}

	.uppercase {
		text-transform: uppercase
	}

	.italic {
		font-style: italic
	}

	.ordinal {
		--tw-ordinal: ordinal;
		font-variant-numeric: var(--tw-ordinal, )var(--tw-slashed-zero, )var(--tw-numeric-figure, )var(--tw-numeric-spacing, )var(--tw-numeric-fraction, )
	}

	.line-through {
		text-decoration-line: line-through
	}

	.overline {
		text-decoration-line: overline
	}

	.underline {
		text-decoration-line: underline
	}

	.antialiased {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale
	}

	.subpixel-antialiased {
		-webkit-font-smoothing: auto;
		-moz-osx-font-smoothing: auto
	}

	.shadow {
		--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.shadow-md {
		--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.shadow-sm {
		--tw-shadow: 0 1px 3px var(--tw-shadow-color, #0000001a), 0 1px 2px var(--tw-shadow-color, #0000000f);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.shadow-xs {
		--tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000000d);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.ring {
		--tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.ring-3 {
		--tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}

	.ring-blue-500 {
		--tw-ring-color: var(--color-blue-500)
	}

	.outline {
		outline-style: var(--tw-outline-style);
		outline-width: 1px
	}

	.blur {
		--tw-blur: blur(8px);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.drop-shadow {
		--tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a))drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
		--tw-drop-shadow: drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.grayscale {
		--tw-grayscale: grayscale(100%);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.invert {
		--tw-invert: invert(100%);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.sepia {
		--tw-sepia: sepia(100%);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.filter {
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}

	.backdrop-filter {
		-webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
		backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
	}

	.transition {
		transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}

	.ease-in {
		--tw-ease: var(--ease-in);
		transition-timing-function: var(--ease-in)
	}

	.ease-in-out {
		--tw-ease: var(--ease-in-out);
		transition-timing-function: var(--ease-in-out)
	}

	.ease-out {
		--tw-ease: var(--ease-out);
		transition-timing-function: var(--ease-out)
	}

	.\[artifact\:ArchitectureDecision\] {
		artifact: ArchitectureDecision
	}

	.\[artifact\:ImplementationPlan\] {
		artifact: ImplementationPlan
	}

	.\[artifact\:PatchSummary\] {
		artifact: PatchSummary
	}

	.backface-hidden {
		backface-visibility: hidden
	}

	@supports (grid:var(--tw)) {
		.supports-grid\:grid {
			display: grid
		}
	}

	@media(min-width:40rem) {
		.sm\:px-6 {
			padding-inline: calc(var(--spacing)*6)
		}
	}

	@media(min-width:48rem) {
		.md\:grid-cols-4 {
			grid-template-columns: repeat(4, minmax(0, 1fr))
		}

		.md\:px-8 {
			padding-inline: calc(var(--spacing)*8)
		}
	}

	@media(min-width:64rem) {
		.lg\:max-w-screen-lg {
			max-width: var(--breakpoint-lg)
		}
	}

	@media(min-width:80rem) {
		.xl\:max-w-screen-xl {
			max-width: var(--breakpoint-xl)
		}
	}

	@media(min-width:120rem) {
		.\33xl\:max-w-screen-3xl {
			max-width: var(--breakpoint-3xl)
		}

		.\33xl\:grid-cols-6 {
			grid-template-columns: repeat(6, minmax(0, 1fr))
		}
	}

	.dark\:bg-gray-900:where(.dark, .dark *) {
		background-color: var(--color-gray-900)
	}

	.dark\:text-gray-100:where(.dark, .dark *) {
		color: var(--color-gray-100)
	}

	.dark\:text-gray-300:where(.dark, .dark *) {
		color: var(--color-gray-300)
	}

	.dark\:text-white:where(.dark, .dark *) {
		color: var(--color-white)
	}

	.container-narrow {
		max-width: 65ch;
		margin-inline: auto
	}

	.container-wide {
		max-width: calc(var(--xun-container-width, 1200px) + 200px);
		padding-inline: var(--space-md);
		margin-inline: auto
	}

	.container-main {
		max-width: var(--xun-container-width, 1200px);
		padding-inline: var(--space-md);
		margin-inline: auto
	}

	.text-balance {
		text-wrap: balance
	}

	.text-gradient {
		background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text
	}

	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none
	}

	.scrollbar-hide::-webkit-scrollbar {
		display: none
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes scaleIn {
	0% {
		opacity: 0;
		transform: scale(.95)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes pulseSoft {

	0%,
	to {
		opacity: 1
	}

	50% {
		opacity: .7
	}
}

@keyframes rippleEffect {
	0% {
		opacity: .4;
		transform: scale(0)
	}

	50% {
		opacity: .4
	}

	to {
		opacity: 0;
		transform: scale(4)
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes maskFadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes maskFadeOut {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes modalSlideIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes modalSlideOut {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes messageSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-100%)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes messageSlideOut {
	0% {
		opacity: 1;
		transform: translateY(0)
	}

	to {
		opacity: 0;
		transform: translateY(-100%)
	}
}

@keyframes drawerSlideInRight {
	0% {
		transform: translate(100%)
	}

	to {
		transform: translate(0)
	}
}

@keyframes drawerSlideOutRight {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(100%)
	}
}

@keyframes drawerSlideInLeft {
	0% {
		transform: translate(-100%)
	}

	to {
		transform: translate(0)
	}
}

@keyframes drawerSlideOutLeft {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(-100%)
	}
}

@keyframes drawerSlideInBottom {
	0% {
		transform: translateY(100%)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes drawerSlideOutBottom {
	0% {
		transform: translateY(0)
	}

	to {
		transform: translateY(100%)
	}
}

@keyframes drawerSlideInTop {
	0% {
		transform: translateY(-100%)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes drawerSlideOutTop {
	0% {
		transform: translateY(0)
	}

	to {
		transform: translateY(-100%)
	}
}

@keyframes spaProgress {
	0% {
		width: 0%
	}

	50% {
		width: 70%
	}

	to {
		width: 90%
	}
}

.spa-loader {
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translate(-50%)translateY(1rem)
}

.spa-loader.active {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%)translateY(0)
}

.spa-loader-content {
	color: var(--color-text);
	background-color: var(--color-bg-container);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--color-border-secondary);
	box-shadow: var(--shadow-modal);
	border-radius: 2rem;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.spa-loader-content {
		background-color: rgba(255, 255, 255, .95)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.spa-loader-content {
			background-color: color-mix(in srgb, var(--color-bg-container)95%, transparent)
		}
	}
}

.spa-loader-spinner {
	color: var(--xun-primary, var(--color-primary));
	flex-shrink: 0
}

@media(max-width:768px) {
	.spa-loader {
		bottom: 5rem
	}
}

::view-transition-old(root) {
	mix-blend-mode: normal;
	animation: none
}

::view-transition-new(root) {
	mix-blend-mode: normal;
	animation: none
}

html.dark-to-light::view-transition-old(root) {
	z-index: 999
}

html.dark-to-light::view-transition-new(root) {
	z-index: 1
}

.xun-layout-wrapper {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr;
	margin: 0 auto;
	padding: .5rem;
	display: grid
}

.xun-layout-wrapper.xun-has-sidebar,
.xun-layout-wrapper.xun-sidebar-right {
	grid-template-columns: 1fr var(--xun-sidebar-width, 300px);
	gap: .5rem
}

.xun-layout-wrapper.xun-sidebar-left {
	grid-template-columns: var(--xun-sidebar-width, 300px)1fr;
	gap: .5rem
}

.xun-layout-wrapper.xun-sidebar-left .xun-layout-sidebar-cell {
	grid-area: 1/1
}

.xun-layout-wrapper.xun-sidebar-left .xun-layout-content {
	grid-area: 1/2
}

.xun-layout-wrapper.xun-no-sidebar {
	grid-template-columns: 1fr
}

.xun-layout-content,
.xun-layout-sidebar {
	min-width: 0
}

.xun-layout-sidebar-cell {
	align-self: stretch
}

.xun-layout-sidebar.xun-sidebar {
	height: fit-content;
	padding-top: var(--sidebar-padding-top, 2rem);
	flex-direction: column;
	gap: .5rem;
	transition: padding-top .3s, top .3s;
	display: flex;
	position: sticky;
	top: 80px
}

@media(max-width:1024px) {

	.xun-layout-wrapper,
	.xun-layout-wrapper.xun-has-sidebar,
	.xun-layout-wrapper.xun-sidebar-right,
	.xun-layout-wrapper.xun-sidebar-left {
		grid-template-columns: 1fr
	}

	.xun-layout-wrapper.xun-sidebar-left .xun-layout-sidebar-cell,
	.xun-layout-wrapper.xun-sidebar-left .xun-layout-content {
		grid-area: auto
	}

	.xun-layout-sidebar.xun-sidebar {
		position: static
	}
}

@media(max-width:768px) {
	.xun-layout-wrapper {
		gap: .5rem;
		padding: .5rem
	}
}

@keyframes xunHeroFloat {

	0%,
	to {
		transform: translateY(0)rotate(0)
	}

	50% {
		transform: translateY(-20px)rotate(5deg)
	}
}

@media(max-width:767px) {

	.xun-user-hero--transparent,
	.xun-author-hero--transparent {
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-user-hero--transparent .xun-user-hero-content,
	.xun-author-hero--transparent .xun-author-hero-content {
		padding-top: 2rem
	}
}

@media screen and (max-width:768px) {

	input[type=text],
	input[type=email],
	input[type=password],
	input[type=number],
	input[type=tel],
	input[type=url],
	input[type=search],
	input[type=date],
	input[type=time],
	input[type=datetime-local],
	textarea,
	select,
	.input {
		font-size: 16px !important
	}
}

@media(min-width:480px) {
	.xun-search-form--inline .xun-search-btn span {
		display: inline
	}
}

@media(max-width:768px) {
	.xun-banner-search .xun-search-input {
		height: 48px;
		padding: 0 20px;
		font-size: 15px
	}

	.xun-banner-search .xun-search-btn {
		height: 40px;
		margin: 4px;
		padding: 0 16px;
		font-size: 14px
	}

	.xun-banner-search .xun-search-btn svg,
	.xun-banner-search .xun-search-btn--ai .xun-ai-icon {
		width: 16px;
		height: 16px
	}
}

.bottom-sheet-open .mask {
	z-index: 1200
}

#spa-progress {
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	height: 3px;
	transition: opacity .2s;
	position: fixed;
	top: 0;
	left: 0;
	right: 0
}

#spa-progress.active {
	opacity: 1
}

#spa-progress.done .spa-progress-bar {
	width: 100% !important
}

.spa-progress-bar {
	background: linear-gradient(90deg, var(--xun-primary, var(--color-primary)), var(--color-primary-hover));
	height: 100%;
	box-shadow: 0 0 10px var(--xun-primary, var(--color-primary));
	transform-origin: 0;
	animation: 2s ease-in-out infinite spaProgress
}

#main,
main,
.site-main {
	background-color: var(--color-bg-layout, #f5f5f5)
}

.bottom-sheet-open .modal {
	z-index: 1201
}

.bottom-sheet-content .xun-single-sidebar,
.bottom-sheet-content .xun-page-sidebar {
	position: sticky;
	top: 16px
}

.xun-has-breadcrumbs .bottom-sheet-content .xun-single-sidebar,
.xun-has-breadcrumbs .bottom-sheet-content .xun-page-sidebar {
	--sidebar-padding-top: 32px;
	padding-top: var(--sidebar-padding-top)
}

.xun-no-breadcrumbs .bottom-sheet-content .xun-single-sidebar,
.xun-no-breadcrumbs .bottom-sheet-content .xun-page-sidebar {
	padding-top: 0
}

.xun-page {
	flex-direction: column;
	min-height: 100vh;
	display: flex
}

.xun-content {
	flex: 1
}

.xun-header {
	z-index: 50;
	background: #fff;
	transition: transform .3s, background-color .3s, box-shadow .3s;
	position: sticky;
	top: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

.xun-header--scroll-hide.is-hidden {
	transform: translateY(-100%)
}

@media(max-width:767px) {
	.xun-header.is-drawer-hidden {
		pointer-events: none;
		transform: translateY(-100%)
	}
}

.xun-header--fixed {
	padding-right: var(--scrollbar-width, 0px);
	position: fixed;
	left: 0;
	right: 0
}

.xun-header--transparent {
	padding-right: var(--scrollbar-width, 0px);
	position: fixed;
	left: 0;
	right: 0;
	box-shadow: none !important;
	background: 0 0 !important
}

.xun-header.xun-header--transparent.is-scrolled {
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important
}

.xun-header--transparent .xun-logo a,
.xun-header--transparent .xun-logo-text,
.xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
.xun-header--transparent .xun-action-btn {
	color: rgba(255, 255, 255, .9)
}

.xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
.xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: #fff
}

.xun-header--transparent .xun-nav-submenu .xun-nav-link {
	color: var(--color-text-secondary)
}

.xun-header--transparent .xun-nav-submenu .xun-nav-link:hover,
.xun-header--transparent .xun-nav-submenu .xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

.xun-header--transparent .xun-action-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.xun-header--transparent .xun-menu-toggle {
	color: rgba(255, 255, 255, .9)
}

.xun-header--transparent .xun-menu-toggle:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.xun-header--transparent .xun-logo-img.xun-logo-light {
	display: none
}

.xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: block
}

.xun-header--transparent .xun-auth-btn-header {
	color: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .3)
}

.xun-header--transparent .xun-auth-btn-header:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .5)
}

.xun-header--transparent .xun-user-avatar {
	border-color: rgba(255, 255, 255, .3)
}

.xun-header--transparent .xun-language-btn {
	color: rgba(255, 255, 255, .9)
}

.xun-header--transparent .xun-language-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.xun-header--transparent.is-scrolled .xun-logo a,
.xun-header--transparent.is-scrolled .xun-logo-text,
.xun-header--transparent.is-scrolled>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
.xun-header--transparent.is-scrolled .xun-action-btn {
	color: var(--color-text-secondary)
}

.xun-header--transparent.is-scrolled>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
.xun-header--transparent.is-scrolled>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

.xun-header--transparent.is-scrolled .xun-action-btn:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

.xun-header--transparent.is-scrolled .xun-menu-toggle {
	color: var(--color-text-secondary)
}

.xun-header--transparent.is-scrolled .xun-menu-toggle:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

.xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-light {
	display: block
}

.xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-dark {
	display: none
}

.xun-header--transparent.is-scrolled .xun-auth-btn-header {
	color: var(--color-text);
	border-color: var(--color-border)
}

.xun-header--transparent.is-scrolled .xun-auth-btn-header:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: 0 0
}

.xun-header--transparent.is-scrolled .xun-user-avatar {
	border-color: var(--color-border-secondary)
}

.xun-header--transparent.is-scrolled .xun-language-btn {
	color: var(--color-text-secondary)
}

.xun-header--transparent.is-scrolled .xun-language-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

body.bottom-sheet-open .xun-header.xun-header--transparent {
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important
}

body.bottom-sheet-open .xun-header--transparent .xun-logo a,
body.bottom-sheet-open .xun-header--transparent .xun-logo-text,
body.bottom-sheet-open .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
body.bottom-sheet-open .xun-header--transparent .xun-action-btn {
	color: var(--color-text-secondary)
}

body.bottom-sheet-open .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
body.bottom-sheet-open .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

body.bottom-sheet-open .xun-header--transparent .xun-action-btn:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.bottom-sheet-open .xun-header--transparent .xun-menu-toggle {
	color: var(--color-text-secondary)
}

body.bottom-sheet-open .xun-header--transparent .xun-menu-toggle:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: block
}

body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: none
}

body.bottom-sheet-open .xun-header--transparent .xun-auth-btn-header {
	color: var(--color-text);
	border-color: var(--color-border)
}

body.bottom-sheet-open .xun-header--transparent .xun-auth-btn-header:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: 0 0
}

body.bottom-sheet-open .xun-header--transparent .xun-user-avatar {
	border-color: var(--color-border-secondary)
}

body.bottom-sheet-open .xun-header--transparent .xun-language-btn {
	color: var(--color-text-secondary)
}

body.bottom-sheet-open .xun-header--transparent .xun-language-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

body.has-transparent-header .xun-content,
body.has-fixed-header .xun-content {
	padding-top: 64px
}

body.has-transparent-header.has-hero-area .xun-content {
	padding-top: 0
}

@media(max-width:767px) {

	body.has-transparent-header .xun-content,
	body.has-fixed-header .xun-content {
		padding-top: 56px
	}

	body.has-transparent-header.has-hero-area .xun-content {
		padding-top: 0
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-header.xun-header--transparent.is-scrolled {
		background: var(--color-bg-container, #1f1f1f) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
	}

	:root:not(.light) .xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) .xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-dark {
		display: block
	}
}

.dark .xun-header.xun-header--transparent.is-scrolled {
	background: var(--color-bg-container, #1f1f1f) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
}

.dark .xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-light {
	display: none
}

.dark .xun-header--transparent.is-scrolled .xun-logo-img.xun-logo-dark {
	display: block
}

@media(prefers-color-scheme:dark) {

	:root:not(.light).bottom-sheet-open .xun-header.xun-header--transparent,
	:root:not(.light) body.bottom-sheet-open .xun-header.xun-header--transparent {
		background: var(--color-bg-container, #1f1f1f) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
	}

	:root:not(.light).bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-light,
	:root:not(.light) body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light).bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-dark,
	:root:not(.light) body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}
}

body.bottom-sheet-open.dark .xun-header.xun-header--transparent,
.dark body.bottom-sheet-open .xun-header.xun-header--transparent {
	background: var(--color-bg-container, #1f1f1f) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
}

body.bottom-sheet-open.dark .xun-header--transparent .xun-logo-img.xun-logo-light,
.dark body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: none
}

body.bottom-sheet-open.dark .xun-header--transparent .xun-logo-img.xun-logo-dark,
.dark body.bottom-sheet-open .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: block
}

.xun-header-inner {
	height: 64px;
	max-width: var(--xun-container-width, 1200px);
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	display: flex
}

@media(min-width:768px) {
	body.xun-header-menu-align-left .xun-header-inner {
		justify-content: flex-start
	}

	body.xun-header-menu-align-left .xun-nav {
		margin-left: 32px
	}

	body.xun-header-menu-align-left .xun-header-actions {
		margin-left: auto
	}

	body.xun-header-menu-align-right .xun-header-inner {
		justify-content: flex-start
	}

	body.xun-header-menu-align-right .xun-nav {
		margin-left: auto
	}

	body.xun-header-menu-align-right .xun-header-actions {
		margin-left: 12px
	}
}

.xun-logo {
	flex-shrink: 0;
	min-width: 120px
}

.xun-logo a {
	color: var(--color-text);
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: color .2s;
	display: flex
}

.xun-logo a:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-logo img {
	width: auto;
	height: 40px
}

.xun-logo-link {
	align-items: center;
	gap: 6px;
	display: inline-flex
}

.xun-logo-img {
	width: auto;
	min-width: 1px;
	height: 40px;
	display: block
}

.xun-logo-img.xun-logo-dark {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) .xun-logo-img.xun-logo-dark {
		display: block
	}
}

.dark .xun-logo-img.xun-logo-light {
	display: none
}

.dark .xun-logo-img.xun-logo-dark {
	display: block
}

.xun-logo-text {
	color: var(--color-text);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-logo-text {
		color: #f5f5f5
	}
}

.dark .xun-logo-text {
	color: #f5f5f5
}

.xun-nav {
	display: none
}

.xun-nav-list {
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-nav-item {
	position: relative
}

.xun-nav-link {
	color: var(--color-text-secondary);
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s;
	display: flex
}

.xun-menu-icon {
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	line-height: 1;
	transition: color .2s;
	display: inline-flex
}

.xun-menu-icon iconify-icon {
	width: 1em;
	height: 1em;
	display: block
}

.xun-nav-link .screen-reader-text {
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden
}

.xun-nav-link:hover,
.xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

.xun-nav-arrow {
	width: 16px;
	height: 16px;
	transition: transform .2s
}

.xun-nav-item:hover>.xun-nav-link>.xun-nav-arrow {
	transform: rotate(180deg)
}

.xun-nav-submenu {
	border-radius: var(--xun-radius, 8px);
	opacity: 0;
	visibility: hidden;
	background: #fff;
	min-width: 160px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	transition: all .2s;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12)
}

.xun-nav-item:hover>.xun-nav-submenu {
	opacity: 1;
	visibility: visible
}

.xun-nav-submenu .xun-nav-link {
	white-space: nowrap;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: 14px;
	display: flex
}

.xun-nav-submenu .xun-nav-link:hover {
	background: var(--color-bg-layout)
}

.xun-nav-submenu .xun-nav-submenu {
	top: -8px;
	left: 100%;
	transform: translate(0)
}

.xun-nav-arrow-sub {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-left: auto
}

.xun-header-actions {
	align-items: center;
	gap: 8px;
	display: flex
}

.xun-header-actions #header-search-toggle {
	order: 10
}

.xun-header-actions #theme-toggle {
	order: 20
}

.xun-header-actions .xun-notice-menu {
	order: 30
}

.xun-header-actions .xun-auth-buttons,
.xun-header-actions .xun-user-menu {
	order: 40
}

.xun-action-btn {
	border-radius: var(--xun-radius, 8px);
	width: 36px;
	height: 36px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-action-btn:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

.xun-action-btn svg {
	width: 20px;
	height: 20px
}

.xun-notice-menu,
.xun-notice-btn {
	position: relative
}

.xun-notice-badge {
	background: var(--xun-danger, #ef4444);
	color: #fff;
	text-align: center;
	min-width: 16px;
	height: 16px;
	box-shadow: 0 0 0 2px var(--color-bg-header, var(--color-bg));
	border-radius: 999px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	position: absolute;
	top: 2px;
	right: 2px
}

.xun-notice-dropdown {
	z-index: 100;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	opacity: 0;
	visibility: hidden;
	transform-origin: 100% 0;
	width: 320px;
	max-width: 85vw;
	transition: all .2s cubic-bezier(.16, 1, .3, 1);
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	overflow: hidden;
	transform: translateY(-8px)scale(.98);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .15)
}

.xun-notice-dropdown:before {
	content: "";
	height: .75rem;
	position: absolute;
	top: -.75rem;
	left: 0;
	right: 0
}

.xun-notice-menu.is-open .xun-notice-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)scale(1)
}

.xun-notice-menu.is-closing .xun-notice-dropdown {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px)scale(.98)
}

.xun-notice-header {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .75rem .875rem;
	display: flex
}

.xun-notice-actions {
	align-items: center;
	gap: .5rem;
	display: inline-flex
}

.xun-notice-title {
	color: var(--color-text);
	font-size: .9375rem;
	font-weight: 600
}

.xun-notice-mark-read,
.xun-notice-clear {
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 6px;
	padding: .25rem .5rem;
	font-size: .75rem;
	transition: all .2s
}

.xun-notice-mark-read:hover,
.xun-notice-clear:hover {
	color: var(--color-text);
	background: var(--color-bg-layout)
}

.xun-notice-list {
	max-height: 320px;
	overflow-y: auto
}

.xun-notice-loading,
.xun-notice-empty {
	text-align: center;
	color: var(--color-text-tertiary);
	padding: 1rem;
	font-size: .875rem
}

.xun-notice-item {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	background: var(--color-bg-elevated);
	gap: .75rem;
	padding: .75rem .875rem;
	text-decoration: none;
	transition: background .2s;
	display: flex
}

.xun-notice-item:last-child {
	border-bottom: none
}

.xun-notice-item:hover {
	background: var(--color-bg-layout)
}

.xun-notice-item.is-unread {
	background: var(--color-primary-bg, #3b82f614)
}

.xun-notice-avatar {
	background: var(--color-bg-layout);
	border-radius: 999px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	display: inline-flex;
	overflow: hidden
}

.xun-notice-avatar img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-notice-avatar-icon {
	background: var(--color-text-tertiary);
	border-radius: 50%;
	width: 14px;
	height: 14px
}

.xun-notice-body {
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-notice-text {
	color: var(--color-text);
	font-size: .875rem;
	line-height: 1.4
}

.xun-notice-time {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-icon-sun {
	display: block
}

.xun-icon-moon {
	display: none
}

@media(prefers-color-scheme:light) {
	:root:not(.dark) .xun-icon-sun {
		display: block !important
	}

	:root:not(.dark) .xun-icon-moon {
		display: none !important
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-icon-sun {
		display: none !important
	}

	:root:not(.light) .xun-icon-moon {
		display: block !important
	}
}

.light .xun-icon-sun {
	display: block !important
}

.light .xun-icon-moon,
.dark .xun-icon-sun {
	display: none !important
}

.dark .xun-icon-moon {
	display: block !important
}

.xun-menu-toggle {
	border-radius: var(--xun-radius, 8px);
	width: 40px;
	height: 40px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-menu-toggle:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

.xun-menu-toggle svg {
	width: 24px;
	height: 24px
}

.xun-mobile-menu {
	display: none !important
}

@media(min-width:768px) {
	.xun-nav {
		display: block
	}

	.xun-menu-toggle {
		display: none
	}
}

@media(max-width:767px) {
	.xun-header-inner {
		justify-content: space-between;
		gap: 12px;
		height: 56px;
		padding: 0 16px
	}

	.xun-logo a {
		font-size: 18px
	}

	.xun-logo img,
	.xun-logo-img {
		height: 30px
	}

	.xun-logo {
		align-items: center;
		min-width: 0;
		max-width: calc(100% - 172px);
		display: flex
	}

	.xun-logo-link,
	.xun-logo-text,
	.custom-logo-link {
		max-width: 100%
	}

	.xun-header-actions {
		flex-shrink: 0;
		gap: 6px;
		margin-left: auto
	}

	.xun-shop-cart-btn {
		display: none !important
	}

	#mobile-menu-toggle {
		order: 99
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-header {
		background: var(--color-bg-container);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3)
	}

	:root:not(.light) .xun-nav-submenu {
		background: var(--color-bg-container);
		box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
	}

	:root:not(.light) .xun-nav-submenu .xun-nav-link:hover,
	:root:not(.light) :is(.xun-action-btn, .xun-menu-toggle):hover {
		background: var(--color-bg-layout)
	}
}

.dark .xun-header {
	background: var(--color-bg-container);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3)
}

.dark .xun-nav-submenu {
	background: var(--color-bg-container);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

.dark .xun-nav-submenu .xun-nav-link:hover,
.dark :is(.xun-action-btn, .xun-menu-toggle):hover {
	background: var(--color-bg-layout)
}

.xun-mobile-drawer-menu {
	flex-direction: column;
	height: 100%;
	padding: 0;
	display: flex
}

.xun-mobile-drawer-logo-wrap,
.xun-mobile-drawer-logo-wrap .xun-logo-link,
.xun-mobile-drawer-logo-wrap .custom-logo-link {
	align-items: center;
	max-width: 160px;
	display: inline-flex
}

.xun-mobile-drawer-logo-wrap .xun-logo-img,
.xun-mobile-drawer-logo-wrap .custom-logo {
	width: auto;
	max-width: 100%;
	height: 34px;
	display: block
}

.xun-mobile-drawer-logo-wrap .xun-logo-img.xun-logo-dark {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-mobile-drawer-logo-wrap .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) .xun-mobile-drawer-logo-wrap .xun-logo-img.xun-logo-dark {
		display: block
	}
}

.dark .xun-mobile-drawer-logo-wrap .xun-logo-img.xun-logo-light {
	display: none
}

.dark .xun-mobile-drawer-logo-wrap .xun-logo-img.xun-logo-dark {
	display: block
}

.drawer-left .drawer-header {
	padding-right: .875rem
}

.drawer-left .drawer-title {
	flex: 1;
	align-items: center;
	min-width: 0;
	display: flex
}

.drawer-left .drawer-title .xun-logo-text {
	color: var(--color-text);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none
}

.xun-mobile-drawer-menu .xun-mobile-menu-inner {
	flex: 1;
	padding: 0;
	overflow-y: auto
}

.xun-mobile-drawer-menu .xun-mobile-nav-list {
	margin: 0;
	padding: 0;
	list-style: none
}

.xun-mobile-drawer-menu .xun-mobile-nav-item {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	width: 100%
}

.xun-mobile-drawer-menu .xun-mobile-nav-item:last-child {
	border-bottom: none
}

.xun-mobile-nav-row {
	align-items: center;
	width: 100%;
	display: flex
}

.xun-mobile-drawer-menu .xun-mobile-nav-link {
	color: var(--color-text, #333);
	flex: 1;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s, background-color .2s;
	display: flex
}

.xun-mobile-drawer-menu .xun-menu-icon {
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	line-height: 1;
	display: inline-flex
}

.xun-mobile-drawer-menu .xun-mobile-nav-link .screen-reader-text {
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden
}

.xun-mobile-drawer-menu .xun-mobile-nav-link:hover {
	color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg, #1677ff0d)
}

.xun-mobile-drawer-menu .xun-mobile-nav-item.current-menu-item>.xun-mobile-nav-row {
	background-color: var(--color-primary-bg, #1677ff0d)
}

.xun-mobile-drawer-menu .xun-mobile-nav-item.current-menu-item>.xun-mobile-nav-row>.xun-mobile-nav-link {
	color: var(--xun-primary, var(--color-primary));
	background-color: rgba(0, 0, 0, 0)
}

.xun-mobile-submenu-toggle {
	width: 48px;
	height: 48px;
	color: var(--color-text-tertiary, #999);
	cursor: pointer;
	background: 0 0;
	border: none;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-mobile-submenu-toggle:hover {
	color: var(--color-text, #333);
	background-color: var(--color-fill-secondary, #0000000a)
}

.xun-mobile-arrow {
	width: 18px;
	height: 18px;
	transition: transform .3s
}

.xun-mobile-nav-item.is-open>.xun-mobile-nav-row>.xun-mobile-submenu-toggle .xun-mobile-arrow {
	transform: rotate(180deg)
}

.xun-mobile-drawer-menu .xun-mobile-submenu {
	background-color: var(--color-bg-layout, #f5f5f5);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: none;
	overflow: hidden
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-item,
.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-row {
	width: 100%
}

.xun-mobile-nav-item.is-open>.xun-mobile-submenu {
	animation: .3s slideDown;
	display: block
}

@keyframes slideDown {
	0% {
		opacity: 0;
		max-height: 0
	}

	to {
		opacity: 1;
		max-height: 500px
	}
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-link {
	color: var(--color-text-secondary, #666);
	padding: 12px 16px 12px 32px;
	font-size: 14px;
	font-weight: 400
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-link:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-submenu {
	background-color: var(--color-fill-tertiary, #00000005)
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-submenu .xun-mobile-nav-link {
	color: var(--color-text-tertiary, #999);
	padding-left: 48px;
	font-size: 13px
}

.xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-submenu .xun-mobile-submenu .xun-mobile-nav-link {
	padding-left: 64px
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-nav-item {
		border-bottom-color: var(--color-border, #303030)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-nav-link {
		color: var(--color-text, #e5e5e5)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-nav-link:hover {
		background-color: var(--color-primary-bg, #1677ff26)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-submenu {
		background-color: var(--color-bg-layout, #141414)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-link {
		color: var(--color-text-secondary, #a3a3a3)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-submenu {
		background-color: var(--color-fill-tertiary, #ffffff0a)
	}

	:root:not(.light) .xun-mobile-submenu-toggle {
		color: var(--color-text-tertiary, #666)
	}

	:root:not(.light) .xun-mobile-submenu-toggle:hover {
		color: var(--color-text, #e5e5e5);
		background-color: var(--color-fill-secondary, #ffffff14)
	}
}

.dark .xun-mobile-drawer-menu .xun-mobile-nav-item {
	border-bottom-color: var(--color-border, #303030)
}

.dark .xun-mobile-drawer-menu .xun-mobile-nav-link {
	color: var(--color-text, #e5e5e5)
}

.dark .xun-mobile-drawer-menu .xun-mobile-nav-link:hover {
	background-color: var(--color-primary-bg, #1677ff26)
}

.dark .xun-mobile-drawer-menu .xun-mobile-submenu {
	background-color: var(--color-bg-layout, #141414)
}

.dark .xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-nav-link {
	color: var(--color-text-secondary, #a3a3a3)
}

.dark .xun-mobile-drawer-menu .xun-mobile-submenu .xun-mobile-submenu {
	background-color: var(--color-fill-tertiary, #ffffff0a)
}

.dark .xun-mobile-submenu-toggle {
	color: var(--color-text-tertiary, #666)
}

.dark .xun-mobile-submenu-toggle:hover {
	color: var(--color-text, #e5e5e5);
	background-color: var(--color-fill-secondary, #ffffff14)
}

.xun-search-drawer-form {
	padding: 20px 0
}

.xun-search-drawer-input {
	gap: 12px;
	max-width: 600px;
	margin: 0 auto;
	display: flex
}

.xun-search-drawer-input input {
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	height: 48px;
	color: var(--color-text);
	outline: none;
	flex: 1;
	padding: 0 20px;
	font-size: 16px;
	transition: border-color .2s
}

.xun-search-drawer-input input:focus {
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-search-drawer-input input::placeholder {
	color: var(--color-text-tertiary)
}

.xun-search-drawer-input input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none
}

.xun-search-drawer-input input::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none
}

.xun-search-drawer-input input::-webkit-search-results-button {
	-webkit-appearance: none;
	display: none
}

.xun-search-drawer-input input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none
}

.xun-search-drawer-btn {
	flex-shrink: 0;
	gap: 6px;
	height: 48px;
	padding: 0 24px;
	font-size: 15px
}

.xun-mobile-drawer-menu .xun-mobile-user-section {
	border-top: 1px solid var(--color-border-secondary, #f0f0f0);
	background: var(--color-bg-elevated, #fff);
	margin-top: auto
}

.xun-mobile-user-card {
	background: var(--color-fill-quaternary, #00000005);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .75rem;
	padding: .75rem;
	text-decoration: none;
	transition: background-color .2s;
	display: flex
}

.xun-mobile-user-card:hover {
	background: var(--color-fill-tertiary, #0000000a)
}

.xun-mobile-user-avatar {
	object-fit: cover;
	border: 2px solid var(--color-border-secondary, #f0f0f0);
	border-radius: 50%;
	flex-shrink: 0;
	width: 44px;
	height: 44px
}

.xun-mobile-user-info {
	flex-direction: column;
	flex: 1;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-mobile-user-name {
	color: var(--color-text, #333);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .9375rem;
	font-weight: 600;
	overflow: hidden
}

.xun-mobile-user-meta {
	color: var(--color-text-tertiary, #999);
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	display: flex
}

.xun-mobile-user-vip {
	--vip-color: #6b7280;
	background: var(--vip-color);
	color: #fff;
	border-radius: 4px;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500
}

.xun-mobile-user-vip.is-vip {
	background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-mobile-user-vip.is-vip {
		background: linear-gradient(135deg, var(--vip-color)0%, color-mix(in srgb, var(--vip-color)70%, #000)100%)
	}
}

@supports not (background:color-mix(in srgb, red 50%, blue)) {
	.xun-mobile-user-vip.is-vip {
		background: var(--vip-color)
	}
}

.xun-mobile-user-balance {
	color: var(--color-text-secondary, #666);
	font-weight: 500
}

.xun-mobile-user-arrow {
	color: var(--color-text-quaternary, #bbb);
	flex-shrink: 0;
	transition: transform .2s
}

.xun-mobile-user-card:hover .xun-mobile-user-arrow {
	color: var(--color-text-tertiary, #999);
	transform: translate(2px)
}

.xun-mobile-auth-section {
	justify-content: center;
	align-items: center;
	padding: 0;
	display: flex
}

.xun-mobile-auth-buttons {
	gap: .5rem;
	width: 100%;
	display: flex
}

.xun-mobile-auth-btn {
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	text-align: center;
	border: none;
	flex: 1;
	padding: .625rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s
}

.xun-mobile-auth-btn--primary {
	background: var(--xun-primary, #1677ff);
	color: #fff
}

.xun-mobile-auth-btn--primary:hover {
	background: var(--xun-primary-hover, #4096ff)
}

.xun-mobile-auth-btn--secondary {
	background: var(--color-fill-secondary, #0000000f);
	color: var(--color-text, #333)
}

.xun-mobile-auth-btn--secondary:hover {
	background: var(--color-fill-tertiary, #0000000a)
}

.xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn {
	width: 100%;
	color: var(--color-text-tertiary, #999);
	border: 1px solid var(--color-border-secondary, #f0f0f0);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
	padding: .625rem;
	font-size: .8125rem;
	font-weight: 500;
	transition: all .2s;
	display: flex
}

.xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn:hover {
	color: #ef4444;
	background: #fef2f2;
	border-color: #fecaca
}

.xun-mobile-logout-btn svg {
	flex-shrink: 0
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-user-section {
		border-top-color: var(--color-border, #303030);
		background: var(--color-bg-elevated, #1f1f1f)
	}

	:root:not(.light) :is(.xun-mobile-user-card, .xun-mobile-auth-section) {
		background: var(--color-fill-quaternary, #ffffff0a)
	}

	:root:not(.light) .xun-mobile-user-card:hover {
		background: var(--color-fill-tertiary, #ffffff14)
	}

	:root:not(.light) .xun-mobile-user-avatar {
		border-color: var(--color-border, #303030)
	}

	:root:not(.light) :is(.xun-mobile-user-name, .xun-mobile-auth-title) {
		color: var(--color-text, #e5e5e5)
	}

	:root:not(.light) .xun-mobile-auth-btn--secondary {
		background: var(--color-fill-secondary, #ffffff14);
		color: var(--color-text, #e5e5e5)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn {
		color: var(--color-text-tertiary, #666);
		border-color: var(--color-border, #303030)
	}

	:root:not(.light) .xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn:hover {
		color: #f87171;
		background: rgba(239, 68, 68, .1);
		border-color: rgba(239, 68, 68, .3)
	}
}

.dark .xun-mobile-drawer-menu .xun-mobile-user-section {
	border-top-color: var(--color-border, #303030);
	background: var(--color-bg-elevated, #1f1f1f)
}

.dark :is(.xun-mobile-user-card, .xun-mobile-auth-section) {
	background: var(--color-fill-quaternary, #ffffff0a)
}

.dark .xun-mobile-user-card:hover {
	background: var(--color-fill-tertiary, #ffffff14)
}

.dark .xun-mobile-user-avatar {
	border-color: var(--color-border, #303030)
}

.dark :is(.xun-mobile-user-name, .xun-mobile-auth-title) {
	color: var(--color-text, #e5e5e5)
}

.dark .xun-mobile-auth-btn--secondary {
	background: var(--color-fill-secondary, #ffffff14);
	color: var(--color-text, #e5e5e5)
}

.dark .xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn {
	color: var(--color-text-tertiary, #666);
	border-color: var(--color-border, #303030)
}

.dark .xun-mobile-drawer-menu .xun-mobile-user-section .xun-mobile-logout-btn:hover {
	color: #f87171;
	background: rgba(239, 68, 68, .1);
	border-color: rgba(239, 68, 68, .3)
}

.xun-banner {
	background-color: #1a1a2e;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 320px;
	display: flex;
	position: relative
}

.xun-banner:not([style*=background-image]) {
	background-color: var(--xun-primary, #1677ff)
}

.xun-banner-fullscreen {
	min-height: calc(100vh - 64px)
}

.xun-banner-transparent-header {
	--header-height: 64px;
	padding-top: 64px
}

.xun-banner-transparent-header.xun-banner-fullscreen {
	min-height: 100vh
}

@media(max-width:767px) {
	.xun-banner-fullscreen {
		min-height: calc(100vh - 56px)
	}

	.xun-banner-transparent-header {
		--header-height: 56px;
		padding-top: 56px
	}

	.xun-banner-transparent-header.xun-banner-fullscreen {
		min-height: 100vh
	}

	.xun-banner-fullscreen .xun-banner-content {
		padding-top: calc(4vh + 37.76px);
		padding-bottom: 40px
	}

	.xun-banner-transparent-header.xun-banner-fullscreen .xun-banner-content {
		padding-top: calc(4vh + 40px);
		padding-bottom: 40px
	}
}

.xun-banner-video {
	overflow: hidden
}

.xun-banner-video-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden
}

.xun-banner-video-player {
	object-fit: cover;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-banner-video .xun-banner-overlay {
	z-index: 1
}

.xun-banner-video .xun-banner-content {
	z-index: 2
}

.xun-banner-overlay {
	background: rgba(0, 0, 0, .4);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-banner-content {
	z-index: 1;
	width: 100%;
	max-width: min(680px, calc(var(--xun-container-width, 1200px) - 40px));
	text-align: center;
	padding: calc(var(--banner-height, 320px)*.04 + 40px)20px 40px;
	box-sizing: border-box;
	flex-direction: column;
	flex: 1;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	display: flex;
	position: relative
}

.xun-banner-content>* {
	width: 100%
}

.xun-banner-transparent-header .xun-banner-content {
	padding-top: calc((var(--banner-height, 320px) + var(--header-height, 64px))*.04 + 40px);
	padding-bottom: 40px
}

.xun-banner-fullscreen .xun-banner-content {
	padding-top: calc(4vh + 37.44px);
	padding-bottom: 40px
}

.xun-banner-transparent-header.xun-banner-fullscreen .xun-banner-content {
	padding-top: calc(4vh + 40px);
	padding-bottom: 40px
}

.xun-banner-header {
	margin-bottom: 28px
}

.xun-banner-title {
	color: #fff;
	text-shadow: 0 2px 8px #0000004d;
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3
}

.xun-banner-subtitle {
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 1px 4px #0003;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.5
}

@media(max-width:768px) {
	.xun-banner-header {
		margin-bottom: 20px
	}

	.xun-banner-title {
		font-size: 26px
	}

	.xun-banner-subtitle {
		margin-top: 8px;
		font-size: 14px
	}
}

@media(max-width:480px) {
	.xun-banner-title {
		font-size: 22px
	}

	.xun-banner-subtitle {
		font-size: 13px
	}
}

.xun-banner-keywords {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: flex
}

.xun-keywords-label {
	color: rgba(255, 255, 255, .8);
	font-size: 14px
}

.xun-keyword-tag {
	color: #fff;
	background: rgba(255, 255, 255, .2);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	text-decoration: none;
	transition: all .2s;
	display: inline-block
}

.xun-keyword-tag:hover {
	color: var(--xun-primary, #1677ff);
	background: #fff
}

@media(max-width:768px) {
	.xun-banner {
		min-height: 260px
	}

	.xun-banner-content {
		padding: 40px 16px
	}

	.xun-banner-keywords {
		gap: 6px
	}

	.xun-keywords-label {
		font-size: 13px
	}

	.xun-keyword-tag {
		padding: 5px 12px;
		font-size: 12px
	}
}

.dark .xun-banner {
	background-color: #0d0d1a
}

.dark .xun-banner:not([style*=background-image]) {
	background-color: var(--xun-primary, #1677ff)
}

.dark .xun-banner-overlay {
	background: rgba(0, 0, 0, .6)
}

.dark .xun-keyword-tag {
	background: rgba(255, 255, 255, .15)
}

.dark .xun-keyword-tag:hover {
	color: #fff;
	background: var(--xun-primary, #1677ff)
}

.xun-empty-home {
	background: var(--color-bg-layout);
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 40px 20px;
	display: flex
}

.xun-empty-content {
	text-align: center;
	max-width: 400px;
	margin: 0 auto
}

.xun-empty-icon svg {
	width: 48px;
	height: 48px;
	color: var(--color-text-quaternary);
	margin: 0 auto
}

.xun-empty-title {
	color: var(--color-text-secondary);
	margin-top: 16px;
	font-size: 18px;
	font-weight: 500
}

.xun-empty-desc {
	color: var(--color-text-tertiary);
	margin-top: 8px;
	margin-bottom: 20px;
	font-size: 14px
}

.xun-empty-content .btn svg {
	width: 16px;
	height: 16px
}

.dark .xun-empty-home {
	background: var(--color-bg-layout, #141414)
}

.xun-banner-quick-links {
	z-index: 2;
	width: 100%;
	max-width: var(--xun-container-width, 1200px);
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 16px;
	margin: 0 auto;
	padding: 0 20px 40px;
	display: flex;
	position: relative
}

.xun-quick-link-card {
	-webkit-backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, .15);
	border: 1px solid #fff3;
	border-radius: 12px;
	align-items: center;
	gap: 12px;
	min-width: 140px;
	padding: 14px 20px;
	text-decoration: none;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	display: flex
}

.xun-quick-link-card:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .3)
}

.xun-quick-link-icon {
	border-radius: 10px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	display: flex;
	overflow: hidden
}

.xun-quick-link-icon img {
	object-fit: contain;
	width: 100%;
	height: 100%
}

.xun-quick-link-info {
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	display: flex
}

.xun-quick-link-title {
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden
}

.xun-quick-link-desc {
	color: rgba(255, 255, 255, .75);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	line-height: 1.3;
	overflow: hidden
}

@media(max-width:992px) {
	.xun-banner-quick-links {
		gap: 12px;
		padding: 0 16px 32px
	}

	.xun-quick-link-card {
		gap: 10px;
		min-width: 120px;
		padding: 12px 16px
	}

	.xun-quick-link-icon {
		width: 40px;
		height: 40px
	}

	.xun-quick-link-icon img {
		width: 24px;
		height: 24px
	}

	.xun-quick-link-title {
		font-size: 13px
	}

	.xun-quick-link-desc {
		font-size: 11px
	}
}

@media(max-width:768px) {
	.xun-banner-quick-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		padding: 0 16px 24px
	}

	.xun-quick-link-card {
		text-align: center;
		flex-direction: column;
		flex: 0 0 calc(33.333% - 6px);
		gap: 8px;
		min-width: auto;
		max-width: calc(33.333% - 6px);
		padding: 14px 12px
	}

	.xun-quick-link-icon {
		border-radius: 12px;
		width: 44px;
		height: 44px
	}

	.xun-quick-link-icon img {
		width: 26px;
		height: 26px
	}

	.xun-quick-link-info {
		align-items: center
	}

	.xun-quick-link-title {
		font-size: 12px
	}

	.xun-quick-link-desc {
		display: none
	}
}

@media(max-width:480px) {
	.xun-banner-quick-links {
		gap: 6px;
		padding: 0 12px 20px
	}

	.xun-quick-link-card {
		flex: 0 0 calc(33.333% - 4px);
		max-width: calc(33.333% - 4px);
		padding: 12px 10px
	}

	.xun-quick-link-icon {
		border-radius: 10px;
		width: 38px;
		height: 38px
	}

	.xun-quick-link-icon img {
		width: 22px;
		height: 22px
	}

	.xun-quick-link-title {
		font-size: 11px
	}
}

.dark .xun-quick-link-card {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .15)
}

.dark .xun-quick-link-card:hover {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .2)
}

.dark .xun-quick-link-title {
	color: #fff
}

.dark .xun-quick-link-desc {
	color: rgba(255, 255, 255, .65)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-banner {
		background-color: #0d0d1a
	}

	:root:not(.light) .xun-banner:not([style*=background-image]) {
		background-color: var(--xun-primary, #1677ff)
	}

	:root:not(.light) .xun-banner-overlay {
		background: rgba(0, 0, 0, .6)
	}

	:root:not(.light) .xun-keyword-tag {
		background: rgba(255, 255, 255, .15)
	}

	:root:not(.light) .xun-keyword-tag:hover {
		color: #fff;
		background: var(--xun-primary, #1677ff)
	}

	:root:not(.light) .xun-empty-home {
		background: var(--color-bg-layout, #141414)
	}

	:root:not(.light) .xun-quick-link-card {
		background: rgba(255, 255, 255, .1);
		border-color: rgba(255, 255, 255, .15)
	}

	:root:not(.light) .xun-quick-link-card:hover {
		background: rgba(255, 255, 255, .15);
		border-color: rgba(255, 255, 255, .2)
	}

	:root:not(.light) .xun-quick-link-title {
		color: #fff
	}

	:root:not(.light) .xun-quick-link-desc {
		color: rgba(255, 255, 255, .65)
	}
}

.xun-slider-section {
	padding: .5rem 0
}

.xun-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none
}

.xun-slider-image {
	color: rgba(0, 0, 0, 0);
	font-size: 0
}

.xun-slider-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-slider-fullwidth .xun-slider-container {
	max-width: none;
	padding: 0
}

.xun-slider-fullwidth .xun-slider {
	border-radius: 0
}

.xun-slider-section.xun-slider-fullwidth {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw)
}

.xun-slider {
	position: relative
}

.xun-slider .swiper-wrapper {
	transition-property: transform;
	display: flex
}

.xun-slider .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: auto
}

.xun-slider-item {
	height: var(--slider-height, 400px);
	background: var(--color-bg-layout);
	position: relative;
	overflow: hidden
}

.xun-slider-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .4s
}

.xun-slider-link:hover .xun-slider-image {
	transform: scale(1.03)
}

.xun-slider-content {
	color: #fff;
	opacity: 0;
	z-index: 5;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3), rgba(0, 0, 0, .6));
	padding: 4rem 1.5rem 1.5rem;
	transition: opacity .3s, transform .3s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(20px)
}

.xun-slider:hover .xun-slider-content {
	opacity: 1;
	transform: translateY(0)
}

.xun-slider-title {
	color: #fff;
	text-shadow: 0 1px 3px #00000080;
	margin: 0 0 .5rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-slider-desc {
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 2px #00000080;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6
}

.xun-slider-link {
	color: inherit;
	text-decoration: none;
	display: block
}

.xun-slider .swiper-button-prev,
.xun-slider .swiper-button-next {
	color: #fff;
	opacity: 0;
	z-index: 10;
	cursor: pointer;
	background: rgba(0, 0, 0, .35);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 0;
	transition: opacity .3s, background-color .3s, transform .2s;
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.xun-slider .swiper-button-prev {
	left: 1rem
}

.xun-slider .swiper-button-next {
	right: 1rem
}

.xun-slider .swiper-button-prev:after,
.xun-slider .swiper-button-next:after {
	color: #fff;
	font-family: swiper-icons;
	font-size: .875rem;
	font-weight: 600
}

.xun-slider .swiper-button-prev:after {
	content: "prev"
}

.xun-slider .swiper-button-next:after {
	content: "next"
}

.xun-slider:hover .swiper-button-prev,
.xun-slider:hover .swiper-button-next {
	opacity: 1
}

.xun-slider .swiper-button-prev:hover,
.xun-slider .swiper-button-next:hover {
	background: rgba(0, 0, 0, .5);
	transform: translateY(-50%)scale(1.05)
}

.xun-slider .swiper-button-disabled {
	cursor: not-allowed;
	opacity: .3 !important
}

.xun-slider .swiper-pagination {
	text-align: center;
	z-index: 10;
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0
}

.xun-slider .swiper-pagination-bullet {
	opacity: 1;
	cursor: pointer;
	background: rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: .5rem;
	height: .5rem;
	margin: 0 .25rem;
	transition: all .3s;
	display: inline-block
}

.xun-slider .swiper-pagination-bullet-active {
	background: #fff;
	border-radius: .25rem;
	width: 1.25rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-slider {
		box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
	}

	:root:not(.light) .xun-slider-item {
		background: var(--color-bg-container)
	}
}

.dark .xun-slider {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.dark .xun-slider-item {
	background: var(--color-bg-container)
}

@media(max-width:768px) {
	.xun-slider-section {
		padding: .5rem 0
	}

	.xun-slider-container,
	.xun-slider-fullwidth .xun-slider-container {
		padding: 0
	}

	.xun-slider-item {
		height: var(--slider-height-mobile, var(--slider-height, 400px));
		min-height: unset
	}

	.xun-slider-image {
		object-fit: contain;
		aspect-ratio: auto;
		width: 100%;
		height: 100%
	}

	.xun-slider-content {
		display: none
	}

	.xun-slider .swiper-button-prev,
	.xun-slider .swiper-button-next {
		opacity: 1;
		width: 2rem;
		height: 2rem
	}

	.xun-slider .swiper-button-prev {
		left: .5rem
	}

	.xun-slider .swiper-button-next {
		right: .5rem
	}

	.xun-slider .swiper-button-prev:after,
	.xun-slider .swiper-button-next:after {
		font-size: .625rem
	}
}

@media(max-width:480px) {
	.xun-slider-title {
		font-size: 1rem
	}
}

.xun-slider-with-recommend .xun-slider-wrapper {
	gap: .5rem;
	display: grid
}

.xun-slider-recommend-side .xun-slider-wrapper {
	grid-template-columns: 1fr 320px
}

.xun-slider-recommend-grid .xun-slider-wrapper {
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 320px
}

.xun-slider-main {
	min-width: 0
}

.xun-slider-with-recommend .xun-slider-item {
	height: var(--slider-height, 400px)
}

.xun-slider-recommend {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-slider-recommend-side .xun-slider-recommend {
	height: var(--slider-height, 400px)
}

.xun-slider-recommend-grid .xun-slider-recommend {
	display: contents
}

.xun-slider-recommend-side-items {
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	display: flex
}

.xun-slider-recommend-side .xun-slider-recommend-side-items {
	height: 100%
}

.xun-slider-recommend-side .xun-slider-recommend-item {
	min-height: 0;
	height: calc((var(--slider-height, 400px) - .75rem)/2);
	flex: 1
}

.xun-slider-recommend-grid .xun-slider-recommend-side-items {
	height: var(--slider-height, 400px);
	flex-direction: column;
	grid-area: 1/2;
	gap: .5rem;
	display: flex
}

.xun-slider-recommend-grid .xun-slider-recommend-side-items .xun-slider-recommend-item {
	min-height: 0;
	height: calc((var(--slider-height, 400px) - .75rem)/2);
	flex: 1
}

.xun-slider-recommend-bottom-items {
	grid-area: 2/1/auto/-1;
	gap: .5rem;
	display: grid
}

.xun-slider-recommend-bottom-items[data-count="1"] {
	grid-template-columns: 1fr
}

.xun-slider-recommend-bottom-items[data-count="2"] {
	grid-template-columns: repeat(2, 1fr)
}

.xun-slider-recommend-bottom-items[data-count="3"] {
	grid-template-columns: repeat(3, 1fr)
}

.xun-slider-recommend-bottom-items[data-count="4"] {
	grid-template-columns: repeat(3, 1fr) 320px
}

@media(max-width:1024px) {
	.xun-slider-recommend-bottom-items[data-count="4"] {
		grid-template-columns: repeat(3, 1fr) 260px
	}
}

.xun-slider-recommend-bottom-items:not([data-count]) {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.xun-slider-recommend-item {
	flex: 1;
	min-height: 0;
	transition: transform .3s, box-shadow .3s;
	position: relative
}

.xun-slider-recommend-item:hover {
	box-shadow: var(--shadow-card-hover, 0 8px 24px #0000001f);
	transform: translateY(-2px)
}

.xun-slider-recommend-link {
	height: 100%;
	color: inherit;
	flex-direction: column;
	text-decoration: none;
	display: flex
}

.xun-slider-recommend-thumb {
	flex: 1;
	width: 100%;
	min-height: 0;
	position: relative;
	overflow: hidden
}

.xun-slider-recommend-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .4s
}

.xun-slider-recommend-link:hover .xun-slider-recommend-image {
	transform: scale(1.05)
}

.xun-slider-recommend-info {
	color: #fff;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .7));
	padding: 2.5rem .875rem .875rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-slider-recommend-title {
	color: #fff;
	-webkit-line-clamp: 2;
	text-shadow: 0 1px 2px #00000080;
	-webkit-box-orient: vertical;
	margin: 0 0 .25rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	overflow: hidden
}

.xun-slider-recommend-desc {
	color: rgba(255, 255, 255, .85);
	-webkit-line-clamp: 2;
	text-shadow: 0 1px 2px #00000080;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-slider-recommend-item-small {
	flex: none;
	height: 180px
}

.xun-slider-recommend-item-small .xun-slider-recommend-thumb {
	height: 100%
}

.xun-slider-recommend-item-small .xun-slider-recommend-info {
	padding: 1.5rem .75rem .625rem
}

.xun-slider-recommend-item-small .xun-slider-recommend-title {
	-webkit-line-clamp: 1;
	font-size: .875rem
}

.xun-slider-recommend-item-small .xun-slider-recommend-desc {
	display: none
}

.xun-slider-recommend-item:before {
	content: "推荐";
	color: #fff;
	background: var(--color-primary, #3b82f6);
	z-index: 5;
	border-radius: .25rem;
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	position: absolute;
	top: .5rem;
	left: .5rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-slider-recommend-item {
		background: var(--color-bg-container);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
	}
}

.dark .xun-slider-recommend-item {
	background: var(--color-bg-container);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

@media(max-width:1024px) {

	.xun-slider-recommend-side .xun-slider-wrapper,
	.xun-slider-recommend-grid .xun-slider-wrapper {
		grid-template-columns: 1fr 260px
	}
}

@media(max-width:768px) {
	.xun-slider-with-recommend .xun-slider-wrapper {
		display: block
	}

	.xun-slider-recommend-side .xun-slider-wrapper,
	.xun-slider-recommend-grid .xun-slider-wrapper {
		grid-template-columns: 1fr
	}

	.xun-slider-with-recommend .xun-slider-item {
		height: auto
	}

	.xun-slider-recommend,
	.xun-slider-recommend-side-items,
	.xun-slider-recommend-bottom-items {
		display: none !important
	}
}

.xun-parallax-slider-section {
	padding: 1rem 0
}

.xun-parallax-slider-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-parallax-slider {
	position: relative;
	overflow: hidden
}

.xun-parallax-slider .swiper-slide {
	backface-visibility: hidden;
	transform-style: preserve-3d;
	overflow: hidden
}

.xun-parallax-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none
}

.xun-parallax-slider .swiper-wrapper {
	transition-property: transform;
	display: flex
}

.xun-parallax-slider .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: auto
}

.xun-parallax-slide {
	height: var(--parallax-height, 500px);
	background: var(--color-bg-layout);
	position: relative;
	overflow: hidden
}

.xun-parallax-layer {
	z-index: 1;
	will-change: transform;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-parallax-bg {
	z-index: 1;
	top: -5%;
	right: -5%;
	bottom: -5%;
	left: -5%
}

.xun-parallax-image {
	object-fit: cover;
	color: rgba(0, 0, 0, 0);
	width: 100%;
	height: 100%;
	font-size: 0
}

.xun-parallax-layer2 {
	z-index: 2
}

.xun-parallax-layer1 {
	z-index: 3
}

.xun-parallax-layer-image {
	object-fit: contain;
	object-position: center center;
	width: 100%;
	height: 100%
}

.xun-parallax-slide-link {
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	display: block
}

.xun-parallax-slider .swiper-button-prev,
.xun-parallax-slider .swiper-button-next {
	color: #fff;
	opacity: 0;
	z-index: 10;
	cursor: pointer;
	background: rgba(0, 0, 0, .35);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: 0;
	transition: opacity .3s, background-color .3s, transform .2s;
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.xun-parallax-slider .swiper-button-prev {
	left: 1.5rem
}

.xun-parallax-slider .swiper-button-next {
	right: 1.5rem
}

.xun-parallax-slider .swiper-button-prev:after,
.xun-parallax-slider .swiper-button-next:after {
	color: #fff;
	font-family: swiper-icons;
	font-size: 1rem;
	font-weight: 600
}

.xun-parallax-slider .swiper-button-prev:after {
	content: "prev"
}

.xun-parallax-slider .swiper-button-next:after {
	content: "next"
}

.xun-parallax-slider:hover .swiper-button-prev,
.xun-parallax-slider:hover .swiper-button-next {
	opacity: 1
}

.xun-parallax-slider .swiper-button-prev:hover,
.xun-parallax-slider .swiper-button-next:hover {
	background: rgba(0, 0, 0, .5);
	transform: translateY(-50%)scale(1.05)
}

.xun-parallax-slider .swiper-pagination {
	text-align: center;
	z-index: 10;
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	right: 0
}

.xun-parallax-slider .swiper-pagination-bullet {
	opacity: 1;
	cursor: pointer;
	background: rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: .5rem;
	height: .5rem;
	margin: 0 .375rem;
	transition: all .3s;
	display: inline-block
}

.xun-parallax-slider .swiper-pagination-bullet-active {
	background: #fff;
	border-radius: .25rem;
	width: 1.5rem
}

.xun-parallax-slider-wrapper {
	display: block
}

.xun-parallax-with-recommend .xun-parallax-slider-wrapper {
	gap: .75rem;
	display: grid
}

.xun-parallax-recommend-side .xun-parallax-slider-wrapper {
	grid-template-columns: 1fr 320px
}

.xun-parallax-recommend-grid .xun-parallax-slider-wrapper {
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 320px
}

.xun-parallax-slider-main {
	min-width: 0
}

.xun-parallax-recommend {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-parallax-recommend-side .xun-parallax-recommend {
	height: var(--parallax-height, 500px)
}

.xun-parallax-recommend-grid .xun-parallax-recommend {
	display: contents
}

.xun-parallax-recommend-side-items {
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	display: flex
}

.xun-parallax-recommend-side .xun-parallax-recommend-item {
	min-height: 0;
	height: calc((var(--parallax-height, 500px) - .75rem)/2);
	flex: 1
}

.xun-parallax-recommend-grid .xun-parallax-recommend-side-items {
	height: var(--parallax-height, 500px);
	flex-direction: column;
	grid-area: 1/2;
	gap: .75rem;
	display: flex
}

.xun-parallax-recommend-grid .xun-parallax-recommend-side-items .xun-parallax-recommend-item {
	min-height: 0;
	height: calc((var(--parallax-height, 500px) - .75rem)/2);
	flex: 1
}

.xun-parallax-recommend-bottom-items {
	grid-area: 2/1/auto/-1;
	gap: .75rem;
	display: grid
}

.xun-parallax-recommend-bottom-items[data-count="1"] {
	grid-template-columns: 1fr
}

.xun-parallax-recommend-bottom-items[data-count="2"] {
	grid-template-columns: repeat(2, 1fr)
}

.xun-parallax-recommend-bottom-items[data-count="3"] {
	grid-template-columns: repeat(3, 1fr)
}

.xun-parallax-recommend-bottom-items[data-count="4"] {
	grid-template-columns: repeat(3, 1fr) 320px
}

.xun-parallax-recommend-bottom-items:not([data-count]) {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.xun-parallax-recommend-item {
	flex: 1;
	min-height: 0;
	transition: transform .3s, box-shadow .3s;
	position: relative;
	overflow: hidden
}

.xun-parallax-recommend-item:hover {
	box-shadow: var(--shadow-card-hover, 0 8px 24px #0000001f);
	transform: translateY(-2px)
}

.xun-parallax-recommend-link {
	height: 100%;
	color: inherit;
	flex-direction: column;
	text-decoration: none;
	display: flex
}

.xun-parallax-recommend-thumb {
	flex: 1;
	width: 100%;
	min-height: 0;
	position: relative;
	overflow: hidden
}

.xun-parallax-recommend-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .4s
}

.xun-parallax-recommend-link:hover .xun-parallax-recommend-image {
	transform: scale(1.05)
}

.xun-parallax-recommend-info {
	color: #fff;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .7));
	padding: 2.5rem .875rem .875rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-parallax-recommend-title {
	color: #fff;
	-webkit-line-clamp: 2;
	text-shadow: 0 1px 2px #00000080;
	-webkit-box-orient: vertical;
	margin: 0 0 .25rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	overflow: hidden
}

.xun-parallax-recommend-desc {
	color: rgba(255, 255, 255, .85);
	-webkit-line-clamp: 2;
	text-shadow: 0 1px 2px #00000080;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-parallax-recommend-item-small {
	flex: none;
	height: 180px
}

.xun-parallax-recommend-item-small .xun-parallax-recommend-thumb {
	height: 100%
}

.xun-parallax-recommend-item-small .xun-parallax-recommend-info {
	padding: 1.5rem .75rem .625rem
}

.xun-parallax-recommend-item-small .xun-parallax-recommend-title {
	-webkit-line-clamp: 1;
	font-size: .875rem
}

.xun-parallax-recommend-item-small .xun-parallax-recommend-desc {
	display: none
}

.xun-parallax-recommend-item:before {
	content: "推荐";
	color: #fff;
	background: var(--color-primary, #3b82f6);
	z-index: 5;
	border-radius: .25rem;
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	position: absolute;
	top: .5rem;
	left: .5rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-parallax-slider {
		box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
	}

	:root:not(.light) .xun-parallax-slide {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-parallax-recommend-item {
		background: var(--color-bg-container);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
	}
}

.dark .xun-parallax-slider {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.dark .xun-parallax-slide {
	background: var(--color-bg-container)
}

.dark .xun-parallax-recommend-item {
	background: var(--color-bg-container);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

@media(max-width:1024px) {
	.xun-parallax-title {
		font-size: 2rem
	}

	.xun-parallax-content {
		max-width: 500px
	}

	.xun-parallax-recommend-side .xun-parallax-slider-wrapper,
	.xun-parallax-recommend-grid .xun-parallax-slider-wrapper {
		grid-template-columns: 1fr 260px
	}

	.xun-parallax-recommend-bottom-items[data-count="4"] {
		grid-template-columns: repeat(3, 1fr) 260px
	}
}

@media(max-width:768px) {
	.xun-parallax-slider-section {
		padding: .75rem 0
	}

	.xun-parallax-slider-container {
		padding: 0
	}

	.xun-parallax-with-recommend .xun-parallax-slider-wrapper {
		display: block
	}

	.xun-parallax-recommend-side .xun-parallax-slider-wrapper,
	.xun-parallax-recommend-grid .xun-parallax-slider-wrapper {
		grid-template-columns: 1fr
	}

	.xun-parallax-slide {
		height: var(--parallax-height-mobile, calc(var(--parallax-height, 500px)*.6));
		min-height: 200px
	}

	.xun-parallax-recommend,
	.xun-parallax-recommend-side-items,
	.xun-parallax-recommend-bottom-items {
		display: none !important
	}

	.xun-parallax-content {
		max-width: 90%;
		padding: 1.5rem
	}

	.xun-parallax-title {
		font-size: 1.5rem
	}

	.xun-parallax-subtitle {
		font-size: .8125rem
	}

	.xun-parallax-desc {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: .875rem;
		display: -webkit-box;
		overflow: hidden
	}

	.xun-parallax-button {
		padding: .625rem 1.25rem;
		font-size: .875rem
	}

	.xun-parallax-position-top-left,
	.xun-parallax-position-top-center,
	.xun-parallax-position-top-right {
		top: 1rem
	}

	.xun-parallax-position-bottom-left,
	.xun-parallax-position-bottom-center,
	.xun-parallax-position-bottom-right {
		bottom: 1rem
	}

	.xun-parallax-position-top-left,
	.xun-parallax-position-middle-left,
	.xun-parallax-position-bottom-left {
		left: 1rem
	}

	.xun-parallax-position-top-right,
	.xun-parallax-position-middle-right,
	.xun-parallax-position-bottom-right {
		right: 1rem
	}

	.xun-parallax-slider .swiper-button-prev,
	.xun-parallax-slider .swiper-button-next {
		opacity: 1;
		width: 2.5rem;
		height: 2.5rem
	}

	.xun-parallax-slider .swiper-button-prev {
		left: .75rem
	}

	.xun-parallax-slider .swiper-button-next {
		right: .75rem
	}

	.xun-parallax-slider .swiper-button-prev:after,
	.xun-parallax-slider .swiper-button-next:after {
		font-size: .75rem
	}
}

@media(max-width:480px) {
	.xun-parallax-title {
		font-size: 1.25rem
	}

	.xun-parallax-subtitle {
		font-size: .75rem
	}

	.xun-parallax-desc {
		display: none
	}
}

article.xun-single {
	padding: .5rem 0 1rem
}

article.xun-single.xun-post-font-enabled .xun-single-title,
article.xun-single.xun-post-font-enabled .xun-single-content {
	font-family: var(--xun-post-font-family, system-ui), -apple-system, "Segoe UI", Arial, sans-serif
}

.xun-breadcrumb {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-bottom: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-breadcrumb a {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color .2s
}

.xun-breadcrumb a:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-breadcrumb-sep {
	color: var(--color-text-quaternary)
}

.xun-breadcrumb-current {
	color: var(--color-text-tertiary);
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden
}

.xun-single-container {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr;
	align-items: start;
	gap: .5rem;
	margin: 0 auto;
	padding: 0 .5rem;
	display: grid
}

.xun-single-container.xun-sidebar-right {
	grid-template-columns: 1fr var(--xun-sidebar-width, 300px)
}

.xun-single-container.xun-sidebar-left {
	grid-template-columns: var(--xun-sidebar-width, 300px)1fr
}

.xun-single-container.xun-sidebar-left .xun-single-sidebar-cell {
	grid-area: 1/1
}

.xun-single-container.xun-sidebar-left .xun-single-main {
	grid-area: 1/2
}

.xun-single-container.xun-no-sidebar {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr
}

.xun-single-main {
	min-width: 0
}

.xun-single-card {
	margin-bottom: .5rem
}

.xun-single-header {
	padding: 1rem 1rem 0
}

.xun-single-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4
}

.xun-single-meta {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding-bottom: .75rem;
	font-size: .875rem;
	display: flex
}

.xun-single-meta-left {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-single-meta-right {
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-single-meta .xun-avatar-wrap--verified .xun-avatar-verified-badge {
	box-sizing: border-box;
	width: .875rem;
	height: .875rem;
	box-shadow: none;
	border: none;
	outline: none;
	bottom: -.26rem;
	right: -.06rem
}

.xun-single-meta .xun-avatar-wrap--verified .xun-avatar-verified-badge svg {
	width: .625rem;
	height: .625rem
}

.xun-single-meta .xun-avatar-wrap--verified .xun-avatar-verified-badge .xun-verification-icon {
	filter: none
}

.xun-single-cats {
	flex-wrap: wrap;
	gap: .375rem;
	display: flex
}

.xun-single-cat {
	color: var(--xun-primary, var(--color-primary));
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none
}

.xun-single-cat:hover {
	color: var(--color-primary-hover)
}

.xun-single-meta-sep {
	color: var(--color-text-quaternary)
}

.xun-single-views,
.xun-single-comments-count {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-single-views svg,
.xun-single-comments-count svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-single-content {
	color: var(--color-text);
	overflow-wrap: anywhere;
	word-break: break-word;
	padding: 1rem
}

.xun-single-content p {
	color: inherit;
	line-height: 1.8
}

.xun-single-content p:last-child {
	margin-bottom: 0
}

.xun-single-content h2 {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text);
	margin: 1.5rem 0 .75rem;
	padding-bottom: .5rem;
	font-size: 1.375rem
}

.xun-single-content h2:first-child {
	margin-top: 0
}

.xun-single-content h3 {
	color: var(--color-text);
	margin: 1.25rem 0 .625rem;
	font-size: 1.125rem
}

.xun-single-content h4 {
	color: var(--color-text);
	margin: 1rem 0 .5rem;
	font-size: 1rem
}

.xun-single-content img {
	border-radius: var(--xun-radius-sm, 4px);
	max-width: 100%;
	height: auto;
	margin: .75rem 0
}

.xun-single-content a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-single-content a:hover {
	text-decoration: underline
}

.xun-single-content ul,
.xun-single-content ol {
	margin: .75rem 0;
	padding-left: 1.5rem
}

.xun-single-content li {
	color: inherit;
	margin-bottom: .375rem;
	line-height: 1.7
}

.xun-single-content blockquote {
	border-left: 4px solid var(--xun-primary, var(--color-primary));
	background: var(--color-fill-quaternary);
	border-radius: 0 var(--xun-radius-sm, 4px)var(--xun-radius-sm, 4px)0;
	margin: 1rem 0;
	padding: .75rem 1rem
}

.xun-single-content blockquote p:last-child {
	margin-bottom: 0
}

.xun-single-content pre {
	background: var(--xun-code-block-bg, var(--color-neutral-900));
	border-radius: var(--xun-radius, 8px);
	overflow-wrap: normal;
	word-break: normal;
	margin: 1rem 0;
	padding: 1rem;
	overflow-x: auto
}

.xun-single-content code {
	font-family: var(--font-mono);
	font-size: .875em
}

.xun-single-content pre code {
	color: var(--color-neutral-100)
}

.xun-single-content :not(pre)>code {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius-sm, 4px);
	color: var(--color-error);
	padding: .125rem .375rem
}

.xun-single-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0
}

.xun-single-content th,
.xun-single-content td {
	border: 1px solid var(--color-border-secondary);
	text-align: left;
	padding: .5rem .75rem
}

.xun-single-content th {
	background: var(--color-fill-quaternary);
	font-weight: 600
}

.xun-single-footer {
	border-top: 1px solid var(--color-border-secondary);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.5rem;
	display: flex
}

.xun-single-tags {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-single-tags-label {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	font-weight: 500;
	display: flex
}

.xun-single-tags-list {
	flex-wrap: wrap;
	gap: .375rem;
	display: flex
}

.xun-single-tag {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .125rem .5rem;
	font-size: .75rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-single-tag:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-single-actions {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	width: 100%;
	display: flex
}

.xun-single-actions-left {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-single-actions-right {
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	display: flex
}

.xun-post-action-btn {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	align-items: center;
	gap: .375rem;
	padding: .5rem .875rem;
	font-size: .875rem;
	transition: all .2s;
	display: inline-flex
}

.xun-post-action-btn:hover,
.xun-post-action-btn.is-active {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-post-action-btn.is-active svg {
	fill: currentColor
}

.xun-like-btn .xun-like-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
	transition: all .3s
}

.xun-like-btn:hover .xun-like-icon {
	stroke: #ef4444
}

.xun-like-btn.is-active {
	color: #ef4444;
	background: #fef2f2;
	border-color: #fecaca
}

.xun-like-btn.is-active .xun-like-icon {
	fill: #ef4444;
	stroke: #ef4444;
	animation: .3s like-pop
}

@keyframes like-pop {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.2)
	}

	to {
		transform: scale(1)
	}
}

.xun-favorite-btn .xun-favorite-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
	transition: all .3s
}

.xun-favorite-btn:hover .xun-favorite-icon {
	stroke: #f59e0b
}

.xun-favorite-btn.is-active {
	color: #f59e0b;
	background: #fffbeb;
	border-color: #fde68a
}

.xun-favorite-btn.is-active .xun-favorite-icon {
	fill: #f59e0b;
	stroke: #f59e0b;
	animation: .3s favorite-pop
}

@keyframes favorite-pop {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.2)
	}

	to {
		transform: scale(1)
	}
}

.xun-post-action-btn:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-action-count {
	font-variant-numeric: tabular-nums
}

.xun-reward-btn {
	color: var(--color-warning);
	border-color: var(--color-warning);
	background: var(--color-warning-bg)
}

.xun-reward-btn:hover {
	color: #fff;
	background: var(--color-warning);
	border-color: var(--color-warning)
}

.xun-reward-avatars-wrapper {
	align-items: center;
	gap: .375rem;
	margin-right: auto;
	display: inline-flex
}

.xun-reward-avatars-label {
	display: none
}

.xun-reward-avatars {
	align-items: center;
	margin-left: -.125rem;
	display: inline-flex;
	overflow: visible
}

.xun-reward-avatars.is-empty,
.xun-reward-avatars-wrapper:has(.xun-reward-avatars.is-empty) {
	display: none
}

.xun-reward-avatar,
.xun-reward-more {
	border: 2px solid var(--color-bg-container);
	background: var(--color-fill-secondary);
	border-radius: 50%;
	flex: none;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	transition: transform .15s, box-shadow .15s;
	display: inline-flex;
	position: relative
}

.xun-reward-avatar {
	cursor: default
}

.xun-reward-avatar img {
	object-fit: cover;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	display: block
}

.xun-reward-avatar+.xun-reward-avatar,
.xun-reward-avatar+.xun-reward-more,
.xun-reward-more+.xun-reward-avatar,
.xun-reward-more+.xun-reward-more {
	margin-left: -10px
}

.xun-reward-avatar:hover,
.xun-reward-more:hover {
	box-shadow: var(--shadow-xs);
	transform: translateY(-1px);
	z-index: 10 !important
}

.xun-tooltip-trigger {
	position: relative
}

.xun-tooltip {
	z-index: 50;
	color: #fff;
	background-color: var(--color-neutral-800, #1f2937);
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	padding: .375rem .625rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	transition: opacity .15s, visibility .15s, transform .15s;
	position: absolute;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1)
}

.xun-tooltip:before {
	content: "";
	border: 5px solid #0000;
	position: absolute
}

.xun-tooltip-top {
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%)translateY(4px)
}

.xun-tooltip-top:before {
	border-top-color: var(--color-neutral-800, #1f2937);
	top: 100%;
	left: 50%;
	transform: translate(-50%)
}

.xun-tooltip-bottom {
	top: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%)translateY(-4px)
}

.xun-tooltip-bottom:before {
	border-bottom-color: var(--color-neutral-800, #1f2937);
	bottom: 100%;
	left: 50%;
	transform: translate(-50%)
}

.xun-tooltip-left {
	top: 50%;
	right: calc(100% + 8px);
	transform: translateY(-50%)translate(4px)
}

.xun-tooltip-left:before {
	border-left-color: var(--color-neutral-800, #1f2937);
	top: 50%;
	left: 100%;
	transform: translateY(-50%)
}

.xun-tooltip-right {
	top: 50%;
	left: calc(100% + 8px);
	transform: translateY(-50%)translate(-4px)
}

.xun-tooltip-right:before {
	border-right-color: var(--color-neutral-800, #1f2937);
	top: 50%;
	right: 100%;
	transform: translateY(-50%)
}

.xun-tooltip-trigger:hover .xun-tooltip {
	opacity: 1;
	visibility: visible
}

.xun-tooltip-trigger:hover .xun-tooltip-top,
.xun-tooltip-trigger:hover .xun-tooltip-bottom {
	transform: translate(-50%)translateY(0)
}

.xun-tooltip-trigger:hover .xun-tooltip-left,
.xun-tooltip-trigger:hover .xun-tooltip-right {
	transform: translateY(-50%)translate(0)
}

.xun-reward-avatar .xun-tooltip,
.xun-reward-more .xun-tooltip {
	padding: .25rem .5rem;
	font-size: .6875rem
}

.dark .xun-tooltip {
	background-color: var(--color-neutral-700, #374151)
}

.dark .xun-tooltip-top:before {
	border-top-color: var(--color-neutral-700, #374151)
}

.dark .xun-tooltip-bottom:before {
	border-bottom-color: var(--color-neutral-700, #374151)
}

.dark .xun-tooltip-left:before {
	border-left-color: var(--color-neutral-700, #374151)
}

.dark .xun-tooltip-right:before {
	border-right-color: var(--color-neutral-700, #374151)
}

.xun-reward-more {
	border: 2px solid var(--color-bg-container);
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	cursor: pointer;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1
}

.xun-single-copyright {
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	margin-top: 1.5rem;
	padding: 1rem 1rem .75rem
}

.xun-single-copyright-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 600
}

.xun-single-copyright-text {
	color: var(--color-text-secondary);
	font-size: .9rem;
	line-height: 1.7
}

.xun-single-copyright-text p {
	margin: 0 0 .35rem
}

.xun-single-share {
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	display: flex
}

.xun-single-share-label {
	color: var(--color-text-secondary);
	font-size: .875rem
}

.xun-single-share-btns {
	gap: .375rem;
	display: flex
}

.xun-share-btn {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-share-btn:hover {
	color: #fff
}

.xun-share-poster-trigger {
	display: inline-flex
}

.xun-share-poster-btn {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, oklch(56.5% .22 260))
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-btn {
		border-color: color-mix(in srgb, var(--xun-primary, var(--color-primary))24%, var(--color-border-secondary))
	}
}

.xun-share-poster-btn {
	background: var(--xun-primary, oklch(56.5% .22 260))
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-btn {
		background: color-mix(in srgb, var(--xun-primary, var(--color-primary))8%, var(--color-fill-quaternary))
	}
}

.xun-share-poster-btn:hover {
	color: #fff;
	background: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-share-weibo:hover {
	background: #e6162d
}

.xun-share-wechat:hover {
	background: #07c160
}

.xun-share-qq:hover {
	background: #12b7f5
}

.xun-share-qzone:hover {
	color: #333;
	background: #fece00
}

.xun-share-douban:hover {
	background: #072
}

.xun-share-copy:hover,
.xun-share-poster:hover {
	background: var(--xun-primary, var(--color-primary))
}

.xun-share-wechat-modal {
	flex-direction: column;
	align-items: center;
	padding: 1rem 0;
	display: flex
}

.xun-share-wechat-qrcode {
	border-radius: var(--xun-radius, 8px);
	background: #fff;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	display: flex;
	overflow: hidden
}

.xun-share-wechat-qrcode img {
	max-width: 100%;
	height: auto
}

.xun-share-wechat-tip {
	color: var(--color-text-secondary);
	margin: 1rem 0 0;
	font-size: .875rem
}

.xun-share-poster-panel {
	z-index: 1002;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-share-poster-shell {
	animation: modalSlideIn .25s var(--ease-smooth);
	flex-direction: column;
	align-items: center;
	gap: .875rem;
	display: flex
}

.xun-share-poster-panel.closing .xun-share-poster-shell {
	animation: .2s ease-out forwards modalSlideOut
}

.xun-share-poster-card {
	background: linear-gradient(180deg, #fff 0%, var(--color-bg-elevated)100%);
	border: 1px solid var(--color-border-secondary);
	border-radius: 24px;
	width: min(100%, 420px);
	position: relative;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .12)
}

.xun-share-poster-close {
	z-index: 2;
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
	background: rgba(15, 23, 42, .32);
	border: none;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	transition: background .2s, transform .2s;
	display: inline-flex;
	position: absolute;
	top: .875rem;
	right: .875rem
}

.xun-share-poster-close:hover {
	background: rgba(15, 23, 42, .48);
	transform: scale(1.04)
}

.xun-share-poster-cover {
	aspect-ratio: 1.2;
	background: linear-gradient(135deg, var(--xun-primary, oklch(56.5% .22 260)), #dddddd52);
	position: relative
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-cover {
		background: linear-gradient(135deg, color-mix(in srgb, var(--xun-primary, var(--color-primary))18%, #fff), color-mix(in srgb, var(--color-fill-secondary)72%, #fff))
	}
}

.xun-share-poster-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block
}

.xun-share-poster-cover.is-placeholder {
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-share-poster-cover.is-placeholder span {
	color: #fff;
	background: linear-gradient(135deg, var(--xun-primary, var(--color-primary)), var(--xun-primary, oklch(56.5% .22 260)));
	border-radius: 28px;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 88px;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-cover.is-placeholder span {
		background: linear-gradient(135deg, var(--xun-primary, var(--color-primary)), color-mix(in srgb, var(--xun-primary, var(--color-primary))70%, #111827))
	}
}

.xun-share-poster-cover.is-placeholder span {
	letter-spacing: .06em;
	font-size: 2.25rem;
	font-weight: 700;
	box-shadow: 0 18px 36px rgba(22, 119, 255, .26)
}

.xun-share-poster-content {
	padding: 1.5rem 1.5rem 1.125rem
}

.xun-share-poster-badge {
	min-height: 28px;
	color: var(--xun-primary, var(--color-primary));
	background: var(--xun-primary, oklch(56.5% .22 260));
	border-radius: 999px;
	align-items: center;
	padding: 0 .875rem;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-badge {
		background: color-mix(in srgb, var(--xun-primary, var(--color-primary))10%, #fff)
	}
}

.xun-share-poster-badge {
	letter-spacing: .04em;
	font-size: .75rem;
	font-weight: 600
}

.xun-share-poster-title {
	color: var(--color-text);
	letter-spacing: -.02em;
	margin: .9rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.35
}

.xun-share-poster-desc {
	color: var(--color-text-secondary);
	margin: .85rem 0 0;
	font-size: .95rem;
	line-height: 1.8
}

.xun-share-poster-footer {
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(200, 200, 200, .227));
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-share-poster-footer {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), color-mix(in srgb, var(--color-fill-secondary)82%, #fff))
	}
}

.xun-share-poster-meta {
	flex: 1;
	min-width: 0
}

.xun-share-poster-site {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: 700
}

.xun-share-poster-submeta {
	color: var(--color-text-tertiary);
	margin-top: .35rem;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-share-poster-qrcode-box {
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-share-poster-qrcode {
	background: #fff;
	border-radius: 20px;
	justify-content: center;
	align-items: center;
	width: 112px;
	height: 112px;
	padding: .5rem;
	display: flex;
	box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 12px 28px rgba(15, 23, 42, .08)
}

.xun-share-poster-qrcode canvas,
.xun-share-poster-qrcode img {
	border-radius: 12px;
	width: 100%;
	height: 100%;
	display: block
}

.xun-share-poster-qrcode-loading,
.xun-share-poster-qrcode-error {
	width: 100%;
	height: 100%;
	color: var(--color-text-secondary);
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: .75rem;
	display: flex
}

.xun-share-poster-qrcode-text {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	font-size: .75rem
}

.xun-share-poster-tip {
	color: var(--color-text-tertiary);
	text-align: center;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-share-poster-actions {
	justify-content: center;
	width: 100%;
	display: flex
}

.xun-share-poster-download {
	min-width: 160px
}

.dark .xun-share-poster-card,
body.dark .xun-share-poster-card {
	background: linear-gradient(180deg, #fff 0%, var(--color-fill-secondary)100%)
}

@supports (color:color-mix(in lab, red, red)) {

	.dark .xun-share-poster-card,
	body.dark .xun-share-poster-card {
		background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated)88%, #fff)0%, var(--color-fill-secondary)100%)
	}
}

.dark .xun-share-poster-card,
body.dark .xun-share-poster-card {
	border-color: var(--color-border);
	box-shadow: 0 28px 70px rgba(0, 0, 0, .32)
}

.dark .xun-share-poster-cover,
body.dark .xun-share-poster-cover {
	background: linear-gradient(135deg, var(--xun-primary, oklch(56.5% .22 260)), #0b112036)
}

@supports (color:color-mix(in lab, red, red)) {

	.dark .xun-share-poster-cover,
	body.dark .xun-share-poster-cover {
		background: linear-gradient(135deg, color-mix(in srgb, var(--xun-primary, var(--color-primary))20%, #0f172a), color-mix(in srgb, var(--color-fill-secondary)84%, #0f172a))
	}
}

.dark .xun-share-poster-badge,
body.dark .xun-share-poster-badge {
	background: var(--xun-primary, oklch(56.5% .22 260))
}

@supports (color:color-mix(in lab, red, red)) {

	.dark .xun-share-poster-badge,
	body.dark .xun-share-poster-badge {
		background: color-mix(in srgb, var(--xun-primary, var(--color-primary))18%, transparent)
	}
}

.dark .xun-share-poster-footer,
body.dark .xun-share-poster-footer {
	background: linear-gradient(rgba(15, 23, 42, 0), rgba(9, 14, 25, .133))
}

@supports (color:color-mix(in lab, red, red)) {

	.dark .xun-share-poster-footer,
	body.dark .xun-share-poster-footer {
		background: linear-gradient(180deg, rgba(15, 23, 42, 0), color-mix(in srgb, var(--color-fill-secondary)92%, #0f172a))
	}
}

@media(max-width:640px) {
	.xun-share-poster-panel {
		align-items: flex-start;
		padding: 1rem;
		overflow-y: auto
	}

	.xun-share-poster-card {
		border-radius: 20px;
		width: 100%
	}

	.xun-share-poster-content {
		padding: 1.125rem 1.125rem .875rem
	}

	.xun-share-poster-title {
		font-size: 1.25rem
	}

	.xun-share-poster-desc {
		font-size: .875rem
	}

	.xun-share-poster-footer {
		flex-direction: column;
		align-items: stretch;
		padding: 1rem 1.125rem 1.125rem
	}

	.xun-share-poster-qrcode-box {
		flex-direction: row;
		justify-content: space-between
	}

	.xun-share-poster-qrcode {
		border-radius: 18px;
		width: 92px;
		height: 92px
	}

	.xun-share-poster-download {
		width: 100%
	}
}

.xun-single-custom-before,
.xun-single-custom-after {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: 1rem 1.5rem
}

.xun-single-custom-after {
	border-bottom: none;
	border-top: 1px solid var(--color-border-secondary)
}

@media(max-width:768px) {

	.xun-single-custom-before,
	.xun-single-custom-after {
		padding: 1rem
	}
}

.xun-single-nav {
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	margin-bottom: .5rem;
	display: grid
}

.xun-single-nav-item {
	flex-direction: column;
	gap: .25rem;
	padding: .75rem 1rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-single-nav-item:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px)
}

.xun-single-nav-date {
	color: var(--color-text-quaternary);
	font-size: .75rem
}

.xun-single-nav-empty {
	opacity: .6;
	pointer-events: none;
	cursor: not-allowed
}

.xun-single-nav-empty .xun-single-nav-title {
	color: var(--color-text-tertiary)
}

.xun-single-nav-label {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: flex
}

.xun-single-nav-prev .xun-single-nav-label {
	justify-content: flex-start
}

.xun-single-nav-next .xun-single-nav-label {
	justify-content: flex-end
}

.xun-single-nav-title {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: .875rem;
	font-weight: 500;
	display: -webkit-box;
	overflow: hidden
}

.xun-single-nav-item:hover .xun-single-nav-title {
	color: var(--xun-primary, var(--color-primary))
}

.xun-single-nav-next {
	text-align: right
}

.xun-single-comments {
	padding: 1.25rem 1.5rem
}

.xun-single-sidebar-cell {
	align-self: stretch
}

.xun-single-sidebar {
	flex-direction: column;
	gap: .5rem;
	height: fit-content;
	transition: padding-top .3s, top .3s;
	display: flex;
	position: sticky;
	top: 80px
}

.xun-has-breadcrumbs .xun-single-sidebar {
	padding-top: var(--sidebar-padding-top, 2rem)
}

.xun-single-container .xun-single-sidebar {
	--sidebar-padding-top: 0px !important;
	padding-top: 0 !important;
	top: .5rem !important
}

@media(max-width:1024px) {

	.xun-single-container,
	.xun-single-container.xun-sidebar-right,
	.xun-single-container.xun-sidebar-left {
		grid-template-columns: 1fr
	}

	.xun-single-container.xun-sidebar-left .xun-single-sidebar-cell,
	.xun-single-container.xun-sidebar-left .xun-single-main {
		grid-area: auto
	}

	.xun-single-container.xun-sidebar-left .xun-single-sidebar-cell {
		order: 0
	}

	.xun-single-sidebar {
		position: static
	}
}

@media(min-width:769px)and (max-width:1024px) {
	article.type-xun_bbs .xun-single-container.xun-sidebar-right {
		grid-template-columns: 1fr var(--xun-sidebar-width, 300px)
	}

	article.type-xun_bbs .xun-single-container.xun-sidebar-left {
		grid-template-columns: var(--xun-sidebar-width, 300px)1fr
	}

	article.type-xun_bbs .xun-single-sidebar {
		position: sticky
	}
}

@media(max-width:768px) {
	article.xun-single {
		padding: .75rem 0
	}

	.xun-single-container {
		gap: 1rem;
		padding: 0 .25rem
	}

	.xun-single-header {
		padding: 1rem .75rem
	}

	.xun-single-title {
		font-size: 1.25rem
	}

	.xun-single-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem
	}

	.xun-single-meta-left {
		flex-wrap: wrap
	}

	.xun-single-meta-right {
		flex-wrap: wrap;
		gap: .5rem 1rem
	}

	.xun-single-content {
		padding: .6rem
	}

	.xun-single-footer {
		flex-direction: column;
		align-items: flex-start;
		padding: 1rem .75rem
	}

	.xun-single-actions {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-single-actions-left {
		flex-wrap: wrap;
		row-gap: .5rem
	}

	.xun-reward-avatars-wrapper {
		align-items: center;
		gap: .5rem;
		width: 100%;
		display: flex
	}

	.xun-reward-avatars-label {
		color: var(--color-text-secondary);
		white-space: nowrap;
		font-size: .875rem;
		display: inline-flex
	}

	.xun-reward-avatars,
	.xun-single-actions-right,
	.xun-single-share {
		margin-left: 0
	}

	.xun-single-nav {
		grid-template-columns: 1fr;
		gap: .5rem
	}

	.xun-single-nav-next {
		text-align: left
	}

	.xun-single-nav-next .xun-single-nav-label {
		justify-content: flex-start
	}

	.xun-single-comments,
	.xun-single-copyright {
		padding: 1rem .75rem
	}
}

.xun-lightbox {
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	justify-content: center;
	align-items: center;
	transition: opacity .3s, visibility .3s;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-lightbox.is-active {
	opacity: 1;
	visibility: visible
}

.xun-lightbox.is-closing {
	opacity: 0
}

.xun-lightbox-overlay {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, .92);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-lightbox-container {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 4rem 1rem;
	display: flex;
	position: relative
}

.xun-lightbox-content {
	justify-content: center;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	position: relative
}

.xun-lightbox-img {
	object-fit: contain;
	cursor: zoom-in;
	-webkit-user-select: none;
	user-select: none;
	border-radius: 4px;
	max-width: 90vw;
	max-height: calc(100vh - 10rem)
}

.xun-lightbox-loading {
	color: #fff;
	justify-content: center;
	align-items: center;
	display: none;
	position: absolute
}

.xun-lightbox-loading .animate-spin {
	animation: 1s linear infinite spin
}

.xun-lightbox-toolbar {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	background: rgba(0, 0, 0, .5);
	border-radius: 8px;
	align-items: center;
	gap: .25rem;
	padding: .375rem;
	transition: opacity .2s;
	display: flex;
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translate(-50%)
}

.xun-lightbox:hover .xun-lightbox-toolbar,
.xun-lightbox:focus-within .xun-lightbox-toolbar {
	opacity: 1
}

.xun-lightbox-btn {
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	transition: all .2s;
	display: flex
}

.xun-lightbox-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.xun-lightbox-btn:disabled {
	opacity: .4;
	cursor: not-allowed
}

.xun-lightbox-divider {
	background: rgba(255, 255, 255, .2);
	width: 1px;
	height: 20px;
	margin: 0 .25rem
}

.xun-lightbox-close {
	color: #fff;
	cursor: pointer;
	opacity: 0;
	background: rgba(255, 255, 255, .1);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	transition: all .2s;
	display: flex;
	position: absolute;
	top: 1rem;
	right: 1rem
}

.xun-lightbox:hover .xun-lightbox-close,
.xun-lightbox:focus-within .xun-lightbox-close {
	opacity: 1
}

.xun-lightbox-close:hover {
	background: rgba(255, 255, 255, .2);
	transform: rotate(90deg)
}

.xun-lightbox-prev,
.xun-lightbox-next {
	color: #fff;
	cursor: pointer;
	opacity: 0;
	background: rgba(255, 255, 255, .1);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	transition: all .2s;
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.xun-lightbox:hover .xun-lightbox-prev,
.xun-lightbox:hover .xun-lightbox-next,
.xun-lightbox:focus-within .xun-lightbox-prev,
.xun-lightbox:focus-within .xun-lightbox-next {
	opacity: 1
}

.xun-lightbox-prev:hover,
.xun-lightbox-next:hover {
	background: rgba(255, 255, 255, .2);
	transform: translateY(-50%)scale(1.1)
}

.xun-lightbox-prev:active,
.xun-lightbox-next:active {
	transform: translateY(-50%)scale(.95)
}

.xun-lightbox-prev {
	left: 1.5rem
}

.xun-lightbox-next {
	right: 1.5rem
}

.xun-lightbox-footer {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	max-width: 80%;
	display: flex;
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%)
}

.xun-lightbox-counter {
	color: rgba(255, 255, 255, .7);
	font-variant-numeric: tabular-nums;
	font-size: .875rem
}

.xun-lightbox-caption {
	color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, .5);
	border-radius: 6px;
	padding: .5rem 1rem;
	font-size: .875rem;
	line-height: 1.5;
	display: none
}

.xun-single-content img {
	cursor: zoom-in
}

@media(max-width:768px) {
	.xun-lightbox-container {
		padding: 3rem .5rem
	}

	.xun-lightbox-img {
		max-height: calc(100vh - 8rem)
	}

	.xun-lightbox-toolbar {
		padding: .25rem;
		top: auto;
		bottom: 4rem
	}

	.xun-lightbox-btn {
		width: 32px;
		height: 32px
	}

	.xun-lightbox-close {
		opacity: 1;
		width: 40px;
		height: 40px;
		top: .75rem;
		right: .75rem
	}

	.xun-lightbox-prev,
	.xun-lightbox-next {
		opacity: 1;
		width: 40px;
		height: 40px
	}

	.xun-lightbox-prev {
		left: .5rem
	}

	.xun-lightbox-next {
		right: .5rem
	}

	.xun-lightbox-footer {
		bottom: .75rem
	}
}

.xun-reward-panel {
	flex-direction: column;
	gap: 20px;
	display: flex
}

.xun-reward-tip {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: 14px
}

.xun-reward-amounts {
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	display: grid
}

.xun-reward-amount-btn {
	height: 44px;
	color: var(--color-text);
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	transition: border-color .2s, background-color .2s, color .2s;
	display: flex;
	position: relative
}

.xun-reward-amount-btn:hover {
	border-color: var(--color-primary-border);
	background-color: var(--color-fill-quaternary)
}

.xun-reward-amount-btn.is-active {
	border-color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg);
	color: var(--xun-primary, var(--color-primary))
}

.xun-reward-custom {
	text-align: left
}

.xun-reward-custom-label {
	color: var(--color-text);
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
	display: block
}

.xun-reward-custom-input {
	width: 100%;
	height: 44px;
	color: var(--color-text);
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	padding: 0 12px;
	font-size: 14px;
	transition: border-color .2s, box-shadow .2s
}

.xun-reward-custom-input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-reward-custom-input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-reward-custom-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-reward-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-reward-custom-input[type=number] {
	-moz-appearance: textfield
}

.xun-reward-actions {
	gap: 12px;
	padding-top: 4px;
	display: flex
}

.xun-reward-actions .btn {
	height: 44px;
	box-shadow: none;
	border: 1px solid #0000;
	flex: 1;
	padding: 0 20px;
	transition: background-color .2s, color .2s, border-color .2s;
	transform: translateZ(0)
}

.xun-reward-actions .btn:hover {
	box-shadow: none;
	transform: translateZ(0)
}

.xun-reward-actions .btn-ghost {
	background-color: var(--color-fill-tertiary);
	color: var(--color-text-secondary)
}

.xun-reward-actions .btn-ghost:hover {
	background-color: var(--color-fill-secondary)
}

@media(max-width:480px) {
	.xun-reward-amounts {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px
	}

	.xun-reward-amount-btn {
		height: 40px;
		padding: 0 8px;
		font-size: 13px
	}

	.xun-reward-custom-input {
		height: 40px
	}

	.xun-reward-actions {
		flex-direction: column
	}
}

.xun-reward-list-loading,
.xun-reward-list-empty {
	color: var(--color-text-tertiary);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 40px 16px;
	font-size: 14px;
	display: flex
}

.xun-reward-list {
	flex-direction: column;
	gap: 8px;
	display: flex
}

.xun-reward-list-item {
	background-color: var(--color-fill-quaternary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	align-items: center;
	gap: 12px;
	padding: 12px;
	transition: background-color .15s;
	display: flex
}

.xun-reward-list-item:hover {
	background-color: var(--color-fill-tertiary)
}

.xun-reward-list-avatar {
	object-fit: cover;
	border: 2px solid var(--color-bg-container);
	width: 40px;
	height: 40px;
	box-shadow: var(--shadow-xs);
	border-radius: 50%;
	flex-shrink: 0
}

.xun-reward-list-info {
	flex: 1;
	min-width: 0
}

.xun-reward-list-name {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 500;
	overflow: hidden
}

.xun-reward-list-meta {
	color: var(--color-text-quaternary);
	font-size: 12px
}

.xun-reward-list-amount {
	color: var(--color-warning);
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600
}

.xun-reward-list-footer {
	justify-content: center;
	margin-top: 12px;
	display: flex
}

.xun-reward-list-footer .btn {
	min-width: 120px
}

.xun-font-ai-summary-wrap {
	padding: 1.25rem 1.5rem 0
}

@media(max-width:768px) {
	.xun-font-ai-summary-wrap {
		padding: 1rem .75rem 0
	}
}

.xun-single-font .xun-font-preview {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: 1rem 1.5rem
}

.xun-font-preview-head {
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-font-preview-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	display: inline-flex
}

.xun-font-preview-title svg {
	opacity: .8
}

.xun-font-preview-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	display: inline-flex
}

.xun-font-preview-family {
	color: var(--color-text-secondary);
	font-weight: 600
}

.xun-font-preview-notice {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
	color: var(--color-text-secondary);
	background: rgba(250, 173, 20, .08);
	align-items: flex-start;
	gap: .5rem;
	margin-top: .75rem;
	padding: .625rem .75rem;
	font-size: .8125rem;
	line-height: 1.5;
	display: flex
}

.xun-font-preview-notice svg {
	opacity: .85;
	flex-shrink: 0;
	margin-top: .125rem
}

.xun-font-preview-controls {
	margin-top: .75rem
}

.xun-font-preview-label {
	color: var(--color-text-tertiary);
	margin-bottom: .5rem;
	font-size: .8125rem;
	display: inline-block
}

.xun-font-preview-input-row {
	align-items: flex-start;
	gap: .75rem;
	display: flex
}

.xun-font-preview-input {
	resize: vertical;
	flex: 1;
	min-height: 2.5rem
}

.xun-font-preview-source {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-font-preview-source-label {
	color: var(--color-text-tertiary)
}

.xun-font-preview-source-value a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-font-preview-source-value a:hover {
	color: var(--color-primary-hover)
}

.xun-font-preview-source-sep {
	color: var(--color-text-quaternary);
	margin: 0 .25rem
}

.xun-font-preview-tip {
	color: var(--color-text-tertiary);
	margin-top: .75rem;
	font-size: .8125rem
}

.xun-font-preview-grid {
	grid-template-columns: 1fr;
	gap: .75rem;
	margin-top: 1rem;
	display: grid
}

.xun-font-sample {
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	padding: .875rem
}

.xun-font-sample-meta {
	color: var(--color-text-tertiary);
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-bottom: .5rem;
	font-size: .75rem;
	display: flex
}

.xun-font-sample-text {
	font-family: var(--xun-post-font-family, system-ui), -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--color-text);
	word-break: break-word;
	font-variant-east-asian: ruby;
	font-feature-settings: "ruby" 1;
	font-size: 1.125rem;
	line-height: 1.6
}

@media(max-width:640px) {
	.xun-single-font .xun-font-preview {
		padding: .875rem 1rem
	}

	.xun-font-preview-input-row {
		flex-direction: column
	}
}

@media(min-width:768px) {
	.xun-font-preview-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(min-width:1100px) {
	.xun-font-preview-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

.xun-download-card {
	margin-bottom: 1rem
}

.xun-download-hero {
	border-bottom: 1px solid var(--color-border-secondary);
	grid-template-columns: 240px 1fr;
	gap: 1.5rem;
	padding: 1.5rem;
	display: grid
}

.xun-download-hero-thumb {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-fill-tertiary);
	flex-shrink: 0;
	width: 240px;
	height: 180px;
	overflow: hidden
}

.xun-download-hero-img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-download-hero-placeholder {
	width: 100%;
	height: 100%;
	color: var(--color-text-quaternary);
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-download-hero-info {
	flex-direction: column;
	min-width: 0;
	display: flex
}

.xun-download-hero-header {
	align-items: flex-start;
	gap: .75rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-download-hero-title {
	color: var(--color-text);
	flex: 1;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.4
}

.xun-download-badge {
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	flex-shrink: 0;
	align-items: center;
	padding: .25rem .625rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-download-badge-free {
	color: var(--color-success);
	background: rgba(82, 196, 26, .12)
}

.xun-download-badge-paid {
	color: var(--color-error);
	background: rgba(255, 77, 79, .12)
}

.xun-download-badge-vip_free,
.xun-download-badge-vip_only,
.xun-download-badge-vip_discount,
.xun-download-badge-vip_exclusive,
.xun-download-badge-vip_exclusive_only,
.xun-download-badge-permanent {
	color: var(--color-warning);
	background: rgba(250, 173, 20, .12)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-download-badge-free {
		background: rgba(81, 193, 72, .12)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-download-badge-free {
			background: color-mix(in srgb, var(--color-success)12%, transparent)
		}
	}

	.xun-download-badge-paid {
		background: rgba(253, 57, 63, .12)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-download-badge-paid {
			background: color-mix(in srgb, var(--color-error)12%, transparent)
		}
	}

	.xun-download-badge-vip_free,
	.xun-download-badge-vip_only,
	.xun-download-badge-vip_discount,
	.xun-download-badge-vip_exclusive,
	.xun-download-badge-vip_exclusive_only,
	.xun-download-badge-permanent {
		background: rgba(248, 168, 0, .12)
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-download-badge-vip_free,
		.xun-download-badge-vip_only,
		.xun-download-badge-vip_discount,
		.xun-download-badge-vip_exclusive,
		.xun-download-badge-vip_exclusive_only,
		.xun-download-badge-permanent {
			background: color-mix(in srgb, var(--color-warning)12%, transparent)
		}
	}
}

.xun-download-hero-attrs {
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-download-hero-attr {
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	display: flex
}

.xun-download-hero-attr-label {
	color: var(--color-text-tertiary)
}

.xun-download-hero-attr-label:after {
	content: "："
}

.xun-download-hero-attr-value {
	color: var(--color-text-secondary);
	font-weight: 500
}

.xun-download-hero-attr-value a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-download-hero-attr-value a:hover {
	text-decoration: underline
}

.xun-download-hero-actions {
	border-top: 1px solid var(--color-border-secondary);
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	display: flex
}

.xun-download-hero-price {
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	display: flex
}

.xun-download-hero-price-main {
	align-items: baseline;
	gap: .5rem;
	display: flex
}

.xun-download-hero-price-note {
	border-top: 1px solid var(--color-border-secondary);
	width: 100%;
	padding-top: .5rem
}

.xun-download-hero-price .xun-download-price-current {
	color: var(--color-error);
	font-size: 1.5rem;
	font-weight: 700
}

.xun-download-hero-price .xun-download-price-original {
	color: var(--color-text-quaternary);
	font-size: .875rem;
	text-decoration: line-through
}

.xun-download-hero-price .xun-download-price-or {
	color: var(--color-text-quaternary);
	margin: 0 .25rem;
	font-size: .75rem
}

.xun-download-hero-price .xun-download-price-points {
	color: var(--color-error);
	font-weight: 600
}

.xun-download-hero-price .xun-download-price-free {
	color: var(--color-success);
	font-size: 1.25rem;
	font-weight: 600
}

.xun-download-discount {
	color: var(--color-error);
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(255, 77, 79, .1);
	align-items: center;
	padding: .125rem .375rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-download-discount {
		background: rgba(253, 57, 63, .1)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-download-discount {
			background: color-mix(in srgb, var(--color-error)10%, transparent)
		}
	}
}

.xun-download-hero-btns {
	white-space: nowrap;
	flex-wrap: nowrap;
	gap: .5rem;
	margin-left: auto;
	display: flex;
	overflow-x: auto
}

.xun-download-hero-btns .btn {
	white-space: nowrap
}

.xun-download-hero-btns .xun-download-separator-inline {
	color: var(--color-text-quaternary);
	align-items: center;
	padding: 0 .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-download-tabs {
	border-bottom: 1px solid var(--color-border-secondary)
}

.xun-download-tabs-nav {
	gap: 0;
	display: flex;
	position: relative
}

.xun-download-tabs-btn {
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .5rem;
	padding: 1rem 1.25rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: color .2s;
	display: inline-flex;
	position: relative
}

.xun-download-tabs-btn:after {
	content: "";
	background: 0 0;
	border-radius: 1px;
	height: 2px;
	transition: background .2s;
	position: absolute;
	bottom: 0;
	left: 1.25rem;
	right: 1.25rem
}

.xun-download-tabs-btn:hover {
	color: var(--color-text)
}

.xun-download-tabs-btn.is-active {
	color: var(--xun-primary, var(--color-primary))
}

.xun-download-tabs-btn.is-active:after {
	background: var(--xun-primary, var(--color-primary))
}

.xun-download-tabs-btn svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-download-tabs-btn.is-active svg {
	opacity: 1
}

.xun-download-tabs-count {
	min-width: 1.25rem;
	height: 1.25rem;
	color: var(--color-text-tertiary);
	background: var(--color-fill-tertiary);
	border-radius: 9999px;
	justify-content: center;
	align-items: center;
	padding: 0 .375rem;
	font-size: .75rem;
	font-style: normal;
	font-weight: 500;
	display: inline-flex
}

.xun-download-tabs-btn.is-active .xun-download-tabs-count {
	color: var(--xun-primary, var(--color-primary));
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-download-tabs-btn.is-active .xun-download-tabs-count {
		background: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-download-tabs-btn.is-active .xun-download-tabs-count {
			background: color-mix(in srgb, var(--xun-primary, var(--color-primary))15%, transparent)
		}
	}
}

.xun-download-tabs-content {
	padding: 0
}

.xun-download-tabs-panel {
	display: none
}

.xun-download-tabs-panel.is-active {
	display: block
}

.xun-download-tabs-panel .xun-single-content {
	padding: 1rem
}

.xun-download-tabs-panel .xun-single-footer {
	padding: 1rem 1.5rem
}

.xun-download-comments {
	padding: 1.5rem
}

.xun-download-copyright {
	border: none;
	border-top: 1px solid var(--color-border-secondary);
	background: 0 0;
	border-radius: 0;
	margin: 0;
	padding: 1rem 1.5rem
}

@media(max-width:768px) {
	.xun-download-copyright {
		padding: 1rem
	}

	.xun-download-hero {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem
	}

	.xun-download-hero-thumb {
		width: 100%;
		height: 180px
	}

	.xun-download-hero-header {
		flex-direction: column;
		gap: .5rem
	}

	.xun-download-hero-title {
		font-size: 1.125rem
	}

	.xun-download-hero-attrs {
		gap: .375rem 1rem
	}

	.xun-download-hero-attr {
		font-size: .75rem
	}

	.xun-download-hero-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-download-hero-btns {
		white-space: normal;
		flex-wrap: wrap;
		width: 100%;
		margin-left: 0;
		overflow-x: visible
	}

	.xun-download-hero-btns .btn {
		white-space: normal;
		flex: 100%;
		width: 100%
	}

	.xun-download-tabs-btn {
		padding: .75rem 1rem;
		font-size: .875rem
	}

	.xun-download-tabs-panel .xun-single-content,
	.xun-download-comments,
	.xun-download-tabs-panel .xun-single-footer {
		padding: 1rem
	}
}

.xun-software-copyright-trigger {
	display: inline-flex
}

.xun-software-copyright-trigger .xun-tooltip.xun-software-copyright-tip {
	text-align: left;
	width: max-content;
	padding: .75rem 1rem;
	font-size: .8125rem;
	line-height: 1.6;
	white-space: normal !important;
	max-width: 520px !important
}

.xun-share-dropdown {
	align-items: center;
	gap: .5rem;
	display: inline-flex;
	position: relative
}

.xun-share-trigger {
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.xun-share-trigger .xun-share-icon {
	transition: transform .2s
}

.xun-share-dropdown:hover .xun-share-trigger .xun-share-icon {
	transform: scale(1.1)
}

.xun-share-dropdown-menu {
	background: var(--color-bg-elevated, #fff);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown, 0 4px 12px #00000026);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 50;
	align-items: center;
	gap: .375rem;
	padding: .5rem;
	transition: opacity .2s, visibility .2s, transform .2s;
	display: flex;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%)translateY(4px)
}

.xun-share-dropdown:after {
	content: "";
	background: 0 0;
	height: 12px;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0
}

.xun-share-dropdown-menu:before {
	content: "";
	border: 7px solid #0000;
	border-bottom-color: var(--color-border-secondary);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%)
}

.xun-share-dropdown-menu:after {
	content: "";
	border: 6px solid #0000;
	border-bottom-color: var(--color-bg-elevated, #fff);
	margin-bottom: -1px;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%)
}

.xun-share-dropdown:hover .xun-share-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%)translateY(0)
}

.xun-share-dropdown-menu.xun-single-share-btns {
	gap: .375rem
}

.xun-share-dropdown-item.xun-share-btn {
	border-radius: var(--xun-radius-sm, 4px);
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	background: 0 0;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-share-dropdown-item.xun-share-btn:hover {
	color: #fff
}

.xun-share-dropdown-item.xun-share-wechat:hover {
	background: #07c160
}

.xun-share-dropdown-item.xun-share-weibo:hover {
	background: #e6162d
}

.xun-share-dropdown-item.xun-share-qq:hover {
	background: #12b7f5
}

.xun-share-dropdown-item.xun-share-qzone:hover {
	color: #333;
	background: #fece00
}

.xun-share-dropdown-item.xun-share-douban:hover {
	background: #072
}

.xun-share-dropdown-item.xun-share-copy:hover {
	background: var(--xun-primary, var(--color-primary))
}

@media(max-width:768px) {
	.xun-software-copyright-tip {
		max-width: 220px;
		font-size: .6875rem
	}

	.xun-share-dropdown-menu {
		padding: .25rem
	}

	.xun-share-dropdown-item {
		width: 28px;
		height: 28px
	}
}

.xun-comment-modal .xun-modal-container {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	transition: transform .2s;
	display: flex;
	transform: scale(.95)translateY(-10px)
}

.xun-comment-modal.is-active .xun-modal-container {
	transform: scale(1)translateY(0)
}

.xun-comment-modal .xun-modal-header {
	border-bottom: 1px solid var(--color-border-secondary);
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px)var(--xun-radius, 8px)0 0;
	flex-shrink: 0;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	display: flex
}

.xun-comment-modal .xun-modal-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	display: flex
}

.xun-comment-modal .xun-modal-title svg {
	color: var(--color-text-secondary)
}

.xun-comment-modal .xun-modal-close {
	border-radius: var(--xun-radius-sm, 4px);
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex;
	position: static
}

.xun-comment-modal .xun-modal-close:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text)
}

.xun-comment-modal .xun-modal-body {
	background: var(--color-bg-container);
	border-radius: 0 0 var(--xun-radius, 8px)var(--xun-radius, 8px);
	flex: 1;
	overflow-y: auto
}

.xun-comment-modal .xun-comments {
	padding: 0
}

.xun-comment-modal .xun-comments-title {
	display: none
}

.xun-comment-modal .xun-comment-form-wrap {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: 1rem 1.5rem
}

.xun-comment-modal .xun-comment-list {
	margin: 0;
	padding: 1rem 1.5rem;
	list-style: none
}

.xun-comment-modal .xun-comments-pagination {
	border-top: 1px solid var(--color-border-secondary);
	padding: 1rem 1.5rem
}

.xun-comment-modal .xun-comment-login-actions .btn {
	backface-visibility: hidden
}

.xun-comment-modal .xun-comment-login-actions .btn-primary {
	border: 1px solid var(--xun-primary, var(--color-primary))
}

.xun-comment-modal .xun-comment-login-actions .btn-primary:hover {
	border-color: var(--xun-primary-hover, var(--color-primary-active))
}

@media(max-width:768px) {
	.xun-comment-modal .xun-modal-container {
		border-radius: var(--xun-radius, 8px)var(--xun-radius, 8px)0 0;
		max-width: 100%;
		max-height: 85vh;
		margin: auto .5rem 0
	}

	.xun-comment-modal .xun-modal-header {
		padding: 1rem
	}

	.xun-comment-modal .xun-modal-title {
		font-size: 1rem
	}

	.xun-comment-modal .xun-comment-form-wrap,
	.xun-comment-modal .xun-comment-list,
	.xun-comment-modal .xun-comments-pagination {
		padding: 1rem
	}
}

body.xun-software-page .xun-header--transparent .xun-logo a,
body.xun-software-page .xun-header--transparent .xun-logo-text,
body.xun-software-page .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
body.xun-software-page .xun-header--transparent .xun-action-btn {
	color: var(--color-text-secondary)
}

body.xun-software-page .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
body.xun-software-page .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

body.xun-software-page .xun-header--transparent .xun-action-btn:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.xun-software-page .xun-header--transparent .xun-menu-toggle {
	color: var(--color-text-secondary)
}

body.xun-software-page .xun-header--transparent .xun-menu-toggle:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: block
}

body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}
}

.dark body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: none
}

.dark body.xun-software-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: block
}

body.xun-software-page .xun-header--transparent .xun-auth-btn-header {
	color: var(--color-text);
	border-color: var(--color-border)
}

body.xun-software-page .xun-header--transparent .xun-auth-btn-header:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: 0 0
}

body.xun-software-page .xun-header--transparent .xun-user-avatar {
	border-color: var(--color-border-secondary)
}

body.xun-software-page .xun-header--transparent .xun-language-btn {
	color: var(--color-text-secondary)
}

body.xun-software-page .xun-header--transparent .xun-language-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-software-hero-meta-attr {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .12)
	}

	:root:not(.light) .xun-software-spec {
		background: rgba(255, 255, 255, .05);
		border-color: rgba(255, 255, 255, .08)
	}
}

.dark .xun-software-hero-meta-attr {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .12)
}

.dark .xun-software-spec {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .08)
}

article.xun-page {
	padding: 1rem 0
}

.xun-page-container {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid
}

.xun-page-container.xun-sidebar-right {
	grid-template-columns: 1fr var(--xun-sidebar-width, 300px)
}

.xun-page-container.xun-sidebar-left {
	grid-template-columns: var(--xun-sidebar-width, 300px)1fr
}

.xun-page-container.xun-sidebar-left .xun-page-sidebar-cell {
	grid-area: 1/1
}

.xun-page-container.xun-sidebar-left .xun-page-main {
	grid-area: 1/2
}

.xun-page-container.xun-no-sidebar {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr
}

.xun-page-main {
	min-width: 0
}

.xun-page-card {
	margin-bottom: 1rem
}

.xun-page-thumbnail {
	width: 100%;
	max-height: 400px;
	position: relative;
	overflow: hidden
}

.xun-page-featured-image {
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block
}

.xun-page-header {
	padding: 1.5rem 1.5rem 0
}

.xun-page-thumbnail+.xun-page-header {
	padding-top: 1.5rem
}

.xun-page-title {
	color: var(--color-text);
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.4
}

.xun-page-content {
	padding: 1.25rem 1.5rem 1.5rem
}

.xun-page-content p {
	color: var(--color-text-secondary);
	margin-bottom: 1.25rem;
	line-height: 1.8
}

.xun-page-content p:last-child {
	margin-bottom: 0
}

.xun-page-content h2 {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text);
	margin: 1.5rem 0 .75rem;
	padding-bottom: .5rem;
	font-size: 1.375rem
}

.xun-page-content h2:first-child {
	margin-top: 0
}

.xun-page-content h3 {
	color: var(--color-text);
	margin: 1.25rem 0 .625rem;
	font-size: 1.125rem
}

.xun-page-content h4 {
	color: var(--color-text);
	margin: 1rem 0 .5rem;
	font-size: 1rem
}

.xun-page-content img {
	border-radius: var(--xun-radius-sm, 4px);
	max-width: 100%;
	height: auto;
	margin: .75rem 0
}

.xun-page-content a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-page-content a:hover {
	text-decoration: underline
}

.xun-page-content ul,
.xun-page-content ol {
	margin: .75rem 0;
	padding-left: 1.5rem
}

.xun-page-content li {
	color: var(--color-text-secondary);
	margin-bottom: .375rem;
	line-height: 1.7
}

.xun-page-content blockquote {
	border-left: 4px solid var(--xun-primary, var(--color-primary));
	background: var(--color-fill-quaternary);
	border-radius: 0 var(--xun-radius-sm, 4px)var(--xun-radius-sm, 4px)0;
	margin: 1rem 0;
	padding: .75rem 1rem
}

.xun-page-content blockquote p:last-child {
	margin-bottom: 0
}

.xun-page-content pre {
	background: var(--xun-code-block-bg, var(--color-neutral-900));
	border-radius: var(--xun-radius, 8px);
	margin: 1rem 0;
	padding: 1rem;
	overflow-x: auto
}

.xun-page-content code {
	font-family: var(--font-mono);
	font-size: .875em
}

.xun-page-content pre code {
	color: var(--color-neutral-100)
}

.xun-page-content :not(pre)>code {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius-sm, 4px);
	color: var(--color-error);
	padding: .125rem .375rem
}

.xun-page-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0
}

.xun-page-content th,
.xun-page-content td {
	border: 1px solid var(--color-border-secondary);
	text-align: left;
	padding: .5rem .75rem
}

.xun-page-content th {
	background: var(--color-fill-quaternary);
	font-weight: 600
}

.xun-page-links {
	border-top: 1px solid var(--color-border-secondary);
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	display: flex
}

.xun-page-links-title {
	color: var(--color-text-secondary);
	margin-right: .5rem;
	font-size: .875rem;
	font-weight: 500
}

.xun-page-link {
	min-width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	justify-content: center;
	align-items: center;
	padding: 0 .625rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-page-link:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-page-links>span>.xun-page-link {
	color: #fff;
	background: var(--xun-primary, var(--color-primary))
}

.xun-page-comments {
	padding: 1.25rem 1.5rem
}

.xun-page-sidebar-cell {
	align-self: stretch
}

.xun-page-sidebar {
	height: fit-content;
	padding-top: var(--sidebar-padding-top, 2rem);
	flex-direction: column;
	gap: 1rem;
	transition: padding-top .3s, top .3s;
	display: flex;
	position: sticky;
	top: 80px
}

@media(max-width:1024px) {

	.xun-page-container,
	.xun-page-container.xun-sidebar-right,
	.xun-page-container.xun-sidebar-left {
		grid-template-columns: 1fr
	}

	.xun-page-container.xun-sidebar-left .xun-page-sidebar-cell,
	.xun-page-container.xun-sidebar-left .xun-page-main {
		grid-area: auto
	}

	.xun-page-sidebar {
		position: static
	}
}

@media(max-width:768px) {
	article.xun-page {
		padding: .75rem 0
	}

	.xun-page-container {
		gap: 1rem
	}

	.xun-page-thumbnail {
		max-height: 250px
	}

	.xun-page-header {
		padding: 1rem 1rem 0
	}

	.xun-page-title {
		font-size: 1.375rem
	}

	.xun-page-content,
	.xun-page-comments {
		padding: 1rem
	}
}

.xun-page-template {
	padding: 1rem 0
}

.xun-page-template-container {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid
}

.xun-page-template-container.xun-sidebar-right {
	grid-template-columns: 1fr var(--xun-sidebar-width, 300px)
}

.xun-page-template-container.xun-sidebar-left {
	grid-template-columns: var(--xun-sidebar-width, 300px)1fr
}

.xun-page-template-container.xun-sidebar-left .xun-page-sidebar {
	order: -1
}

.xun-page-template-container.xun-no-sidebar {
	max-width: var(--xun-container-width, 1200px);
	grid-template-columns: 1fr
}

.xun-page-template .xun-page-sidebar {
	height: fit-content;
	padding-top: var(--sidebar-padding-top, 2rem);
	flex-direction: column;
	gap: 1rem;
	transition: padding-top .3s, top .3s;
	display: flex;
	position: sticky;
	top: 80px
}

.xun-page-template .xun-page-sidebar .widget {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-card);
	padding: 1rem 1.25rem
}

.xun-page-template .xun-page-sidebar .widget-title {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text);
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	font-size: 1rem;
	font-weight: 600
}

@media(max-width:1024px) {

	.xun-page-template-container,
	.xun-page-template-container.xun-sidebar-right,
	.xun-page-template-container.xun-sidebar-left {
		grid-template-columns: 1fr
	}

	.xun-page-template-container.xun-sidebar-left .xun-page-sidebar {
		order: 0
	}

	.xun-page-template .xun-page-sidebar {
		position: static
	}
}

@media(max-width:768px) {
	.xun-page-template {
		padding: .75rem 0
	}

	.xun-page-template-container {
		gap: 1rem
	}

	.xun-page-template .xun-page-header {
		padding: 1rem 1rem 0
	}

	.xun-page-template .xun-page-title {
		font-size: 1.375rem
	}

	.xun-page-template .xun-page-content,
	.xun-page-template .xun-page-comments {
		padding: 1rem
	}

	.xun-page-template .xun-page-sidebar .widget {
		padding: .875rem 1rem
	}
}

.xun-tags-page {
	padding: 0
}

.xun-tags-container {
	max-width: var(--xun-container-width, 1200px);
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem
}

.xun-tags-page-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--xun-primary, #3b82f6);
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 2.5rem;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tags-page-header {
		background: linear-gradient(135deg, var(--xun-primary, #3b82f6)0%, var(--xun-primary, #3b82f6)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-header {
			background: linear-gradient(135deg, var(--xun-primary, #3b82f6)0%, color-mix(in srgb, var(--xun-primary, #3b82f6)80%, #000)100%)
		}
	}
}

.xun-tags-page-info {
	z-index: 1;
	color: #fff;
	text-align: center;
	padding: 2.5rem 2rem 1rem;
	position: relative
}

.xun-tags-page-header--transparent {
	--header-height: 64px;
	margin-top: -64px;
	padding-top: calc(64px + 2.5rem)
}

.xun-tags-page-header--transparent .xun-tags-page-info {
	padding-top: 2.5rem
}

@media(max-width:767px) {
	.xun-tags-page-header--transparent {
		--header-height: 56px;
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-tags-page-header--transparent .xun-tags-page-info {
		padding-top: 2rem
	}
}

.site-main>.xun-tags-page-header+.xun-tags-page {
	padding-top: 0
}

.xun-tags-page-icon {
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	display: inline-flex
}

.xun-tags-page-icon svg {
	color: #fff;
	width: 24px;
	height: 24px
}

.xun-tags-page-title {
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-tags-page-desc {
	color: #fff;
	margin: 0;
	font-size: .95rem
}

.xun-tags-page-desc strong {
	font-weight: 700
}

.xun-tags-page-card {
	margin-bottom: 1rem;
	padding: 1.5rem
}

.xun-tags-page-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .75rem;
	display: grid
}

.xun-tags-page-item {
	background: var(--color-fill-tertiary);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 6px);
	color: var(--color-text);
	align-items: center;
	gap: .625rem;
	padding: .875rem 1rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-tags-page-item:hover {
	background: var(--color-bg-container);
	border-color: var(--tag-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12)
}

.xun-tags-page-item-icon {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	width: 32px;
	height: 32px;
	color: var(--tag-color);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	transition: all .2s;
	display: flex
}

.xun-tags-page-item:hover .xun-tags-page-item-icon {
	background: var(--tag-color);
	color: #fff
}

.xun-tags-page-item-name {
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-size: .9375rem;
	font-weight: 500;
	transition: color .2s;
	overflow: hidden
}

.xun-tags-page-item:hover .xun-tags-page-item-name {
	color: var(--tag-color)
}

.xun-tags-page-item-count {
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: 9999px;
	flex-shrink: 0;
	padding: .25rem .5rem;
	font-size: .8125rem;
	transition: all .2s
}

.xun-tags-page-item:hover .xun-tags-page-item-count {
	background: var(--color-fill-secondary);
	color: var(--tag-color)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tags-page-item:hover {
		background: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-item:hover {
			background: color-mix(in srgb, var(--tag-color)10%, transparent)
		}
	}

	.xun-tags-page-item:hover {
		border-color: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-item:hover {
			border-color: color-mix(in srgb, var(--tag-color)30%, transparent)
		}
	}

	.xun-tags-page-item:hover {
		box-shadow: 0 4px 12px var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-item:hover {
			box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-color)20%, transparent)
		}
	}

	.xun-tags-page-item-icon {
		background: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-item-icon {
			background: color-mix(in srgb, var(--tag-color)15%, transparent)
		}
	}

	.xun-tags-page-item:hover .xun-tags-page-item-count {
		background: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-page-item:hover .xun-tags-page-item-count {
			background: color-mix(in srgb, var(--tag-color)15%, transparent)
		}
	}
}

.xun-tags-page-item-arrow {
	color: var(--color-text-quaternary);
	opacity: 0;
	align-items: center;
	transition: all .2s;
	display: flex;
	transform: translate(-4px)
}

.xun-tags-page-item:hover .xun-tags-page-item-arrow {
	opacity: 1;
	color: var(--tag-color);
	transform: translate(0)
}

.xun-tags-page-empty {
	text-align: center;
	padding: 4rem 2rem
}

.xun-tags-page-empty-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem
}

.xun-tags-page-empty-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-tags-page-empty-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .9375rem
}

@media(max-width:768px) {
	.xun-tags-page-header {
		padding-bottom: 2rem
	}

	.xun-tags-page-info {
		padding: 2rem 1.5rem 1rem
	}

	.xun-tags-page-icon {
		width: 48px;
		height: 48px
	}

	.xun-tags-page-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-tags-page-title {
		font-size: 1.25rem
	}

	.xun-tags-page-desc {
		font-size: .875rem
	}

	.xun-tags-page-card {
		padding: 1rem
	}

	.xun-tags-page-grid {
		grid-template-columns: 1fr;
		gap: .5rem
	}

	.xun-tags-page-item {
		padding: .75rem
	}

	.xun-tags-page-item-icon {
		width: 28px;
		height: 28px
	}

	.xun-tags-page-item-icon svg {
		width: 14px;
		height: 14px
	}

	.xun-tags-page-item-name {
		font-size: .875rem
	}

	.xun-tags-page-item-count {
		padding: .125rem .375rem;
		font-size: .75rem
	}

	.xun-tags-page-empty {
		padding: 3rem 1.5rem
	}
}

@media(min-width:769px)and (max-width:1024px) {
	.xun-tags-page-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

.xun-page-spin-wheel.has-transparent-header .xun-content {
	padding-top: 0
}

body.xun-page-spin-wheel .xun-header--transparent .xun-logo a,
body.xun-page-spin-wheel .xun-header--transparent .xun-logo-text,
body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn {
	color: var(--color-text-secondary)
}

body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: var(--xun-primary, var(--color-primary))
}

body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle {
	color: var(--color-text-secondary)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle:hover {
	background: var(--color-bg-layout);
	color: var(--color-text)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: block
}

body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}
}

body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header {
	color: var(--color-text);
	border-color: var(--color-border)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: 0 0
}

body.xun-page-spin-wheel .xun-header--transparent .xun-user-avatar {
	border-color: var(--color-border-secondary)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn {
	color: var(--color-text-secondary)
}

body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-spin-wheel-page {
	background: radial-gradient(1200px 600px at 15% 0, #fff4e6, #fffaf3 45%, #f8fafc);
	min-height: 100vh
}

.xun-spin-body {
	padding: 96px 16px 1px
}

.xun-spin-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 20px
}

.xun-spin-wheel {
	--wheel-size: min(380px, 88vw);
	--label-radius: calc(var(--wheel-size)*.34);
	width: min(380px, 88vw);
	height: min(380px, 88vw);
	margin: 0 auto 30px;
	position: relative
}

.xun-spin-wheel__inner {
	background: var(--wheel-bg, conic-gradient(from -90deg, #f97316 0% 12.5%, #facc15 12.5% 25%, #22c55e 25% 37.5%, #14b8a6 37.5% 50%, #38bdf8 50% 62.5%, #fb7185 62.5% 75%, #f59e0b 75% 87.5%, #34d399 87.5% 100%));
	width: 100%;
	height: 100%;
	box-shadow: none;
	will-change: transform;
	border: 14px solid #fff;
	border-radius: 50%;
	transition: transform 4.2s cubic-bezier(.2, .7, .2, 1);
	position: relative;
	overflow: hidden
}

.xun-spin-wheel__inner.is-idle {
	transition: none
}

.xun-spin-wheel__labels {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-spin-wheel__label {
	width: 96px;
	transform: translate(-50%, -50%)rotate(var(--angle))translateY(calc(-1*var(--label-radius)));
	transform-origin: 50%;
	text-align: center;
	color: #111827;
	text-shadow: none;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.2;
	position: absolute;
	top: 50%;
	left: 50%
}

.xun-spin-wheel__label span {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	white-space: normal;
	word-break: break-all;
	background: rgba(255, 255, 255, .65);
	border-radius: 999px;
	max-width: 100%;
	padding: 6px 8px;
	display: inline-block
}

.xun-spin-wheel__center {
	width: 88px;
	height: 88px;
	box-shadow: none;
	background: radial-gradient(circle at 30% 30%, #fff, #fde68a 40%, #f59e0b, #d97706);
	border: 10px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-spin-wheel__pointer {
	width: 26px;
	height: 26px;
	box-shadow: none;
	background: #111827;
	border-radius: 6px;
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translate(-50%)
}

.xun-spin-wheel__pointer span {
	border-top: 18px solid #111827;
	border-left: 10px solid #0000;
	border-right: 10px solid #0000;
	width: 0;
	height: 0;
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translate(-50%)
}

.xun-spin-actions {
	text-align: center
}

.xun-spin-actions .btn {
	border-radius: 14px;
	padding: 12px 30px;
	font-weight: 600
}

.xun-spin-actions .btn.is-loading .xun-spin-btn-text,
.xun-spin-actions .btn:not(.is-loading) .xun-spin-btn-loading {
	display: none
}

.xun-spin-wheel__result {
	color: #0f172a;
	min-height: 1.2em;
	margin-top: 16px;
	font-size: .95rem
}

.xun-spin-status {
	color: #b91c1c;
	background: #fef2f2;
	border-radius: 999px;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-weight: 600;
	display: inline-flex
}

.xun-spin-meta {
	color: #64748b;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	font-size: .85rem;
	display: flex
}

.xun-spin-meta__item {
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 6px 12px
}

.xun-spin-content {
	color: #475569;
	border-top: 1px dashed #0f172a1f;
	margin-top: 30px;
	padding-top: 22px;
	line-height: 1.8
}

.xun-spin-activity {
	padding: 0 16px 72px
}

.xun-spin-activity__inner {
	max-width: 960px;
	margin: 0 auto
}

.xun-spin-activity__title {
	color: #0f172a;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: .95rem;
	font-weight: 600;
	display: flex
}

.xun-spin-activity__title:before {
	content: "";
	background: #f97316;
	border-radius: 999px;
	width: 6px;
	height: 6px
}

.xun-spin-activity__viewport {
	background: rgba(255, 255, 255, .75);
	border: 1px solid #0f172a14;
	border-radius: 14px;
	height: 44px;
	padding: 10px 14px;
	position: relative;
	overflow: hidden
}

.xun-spin-activity__list {
	will-change: transform;
	flex-direction: column;
	gap: 10px;
	display: flex;
	transform: translateZ(0)
}

.xun-spin-activity__list.is-animated {
	animation: xun-spin-activity-scroll var(--scroll-duration, 18s)linear infinite
}

.xun-spin-activity__viewport:hover .xun-spin-activity__list {
	animation-play-state: paused
}

.xun-spin-activity__item {
	color: #475569;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .85rem;
	overflow: hidden
}

.xun-spin-activity__name {
	color: #0f172a;
	margin-right: 4px;
	font-weight: 600
}

.xun-spin-activity__time {
	color: #94a3b8;
	margin: 0 6px
}

.xun-spin-activity__prize {
	color: #0f172a;
	margin-left: 4px;
	font-weight: 600
}

@keyframes xun-spin-activity-scroll {
	0% {
		transform: translateY(0)
	}

	to {
		transform: translateY(-50%)
	}
}

@media(max-width:640px) {
	.xun-spin-body {
		padding: 80px 16px 64px
	}

	.xun-spin-activity {
		padding: 0 16px 56px
	}

	.xun-spin-activity__viewport {
		height: 48px
	}

	.xun-spin-activity__item {
		font-size: .8rem
	}

	.xun-spin-wheel {
		--wheel-size: min(320px, 88vw);
		--label-radius: calc(var(--wheel-size)*.34);
		width: min(320px, 88vw);
		height: min(320px, 88vw)
	}

	.xun-spin-wheel__label {
		width: 86px;
		font-size: .74rem
	}

	.xun-spin-wheel__center {
		width: 72px;
		height: 72px
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-spin-wheel-page {
		background: var(--color-bg-layout)
	}

	:root:not(.light) .xun-spin-wrap {
		border: 0
	}

	:root:not(.light) .xun-spin-wheel__inner {
		box-shadow: none;
		border-color: rgba(255, 255, 255, .9)
	}

	:root:not(.light) .xun-spin-wheel__label {
		color: #0f172a;
		text-shadow: none
	}

	:root:not(.light) .xun-spin-wheel__label span {
		color: #0f172a;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(255, 255, 255, .8);
		border: 0
	}

	:root:not(.light) .xun-spin-wheel__center {
		box-shadow: none;
		background: radial-gradient(circle at 30% 30%, #fff, #fde68a 40%, #f59e0b, #d97706);
		border-color: rgba(255, 255, 255, .95)
	}

	:root:not(.light) .xun-spin-wheel__pointer {
		box-shadow: none;
		background: #111827
	}

	:root:not(.light) .xun-spin-wheel__pointer span {
		border-top-color: #111827
	}

	:root:not(.light) .xun-spin-wheel__result {
		color: var(--color-text)
	}

	:root:not(.light) .xun-spin-status {
		background: var(--color-error-bg);
		color: #fca5a5
	}

	:root:not(.light) .xun-spin-meta {
		color: var(--color-text-secondary)
	}

	:root:not(.light) .xun-spin-meta__item {
		color: var(--color-text-secondary);
		background: rgba(255, 255, 255, .08);
		border: 1px solid #ffffff1f
	}

	:root:not(.light) .xun-spin-content {
		border-top-color: var(--color-border);
		color: var(--color-text-secondary)
	}

	:root:not(.light) .xun-spin-activity__title {
		color: var(--color-text)
	}

	:root:not(.light) .xun-spin-activity__viewport {
		background: rgba(255, 255, 255, .05);
		border-color: rgba(255, 255, 255, .12)
	}

	:root:not(.light) .xun-spin-activity__item {
		color: var(--color-text-secondary)
	}

	:root:not(.light) .xun-spin-activity__name,
	:root:not(.light) .xun-spin-activity__prize {
		color: var(--color-text)
	}

	:root:not(.light) .xun-spin-activity__time {
		color: var(--color-text-tertiary)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo a,
	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo-text,
	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn {
		color: rgba(255, 255, 255, .9)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
		color: #fff
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn:hover {
		color: #fff;
		background: rgba(255, 255, 255, .15)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle {
		color: rgba(255, 255, 255, .9)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle:hover {
		color: #fff;
		background: rgba(255, 255, 255, .15)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header {
		color: rgba(255, 255, 255, .9);
		border-color: rgba(255, 255, 255, .3)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header:hover {
		color: #fff;
		background: rgba(255, 255, 255, .1);
		border-color: rgba(255, 255, 255, .5)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-user-avatar {
		border-color: rgba(255, 255, 255, .3)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn {
		color: rgba(255, 255, 255, .9)
	}

	:root:not(.light) body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn:hover {
		color: #fff;
		background: rgba(255, 255, 255, .15)
	}
}

.dark .xun-spin-wheel-page {
	background: var(--color-bg-layout)
}

.dark .xun-spin-wrap {
	border: 0
}

.dark .xun-spin-wheel__inner {
	box-shadow: none;
	border-color: rgba(255, 255, 255, .9)
}

.dark .xun-spin-wheel__label {
	color: #0f172a;
	text-shadow: none
}

.dark .xun-spin-wheel__label span {
	color: #0f172a;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(255, 255, 255, .8);
	border: 0
}

.dark .xun-spin-wheel__center {
	box-shadow: none;
	background: radial-gradient(circle at 30% 30%, #fff, #fde68a 40%, #f59e0b, #d97706);
	border-color: rgba(255, 255, 255, .95)
}

.dark .xun-spin-wheel__pointer {
	box-shadow: none;
	background: #111827
}

.dark .xun-spin-wheel__pointer span {
	border-top-color: #111827
}

.dark .xun-spin-wheel__result {
	color: var(--color-text)
}

.dark .xun-spin-status {
	background: var(--color-error-bg);
	color: #fca5a5
}

.dark .xun-spin-meta {
	color: var(--color-text-secondary)
}

.dark .xun-spin-meta__item {
	color: var(--color-text-secondary);
	background: rgba(255, 255, 255, .08);
	border: 1px solid #ffffff1f
}

.dark .xun-spin-content {
	border-top-color: var(--color-border);
	color: var(--color-text-secondary)
}

.dark .xun-spin-activity__title {
	color: var(--color-text)
}

.dark .xun-spin-activity__viewport {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12)
}

.dark .xun-spin-activity__item {
	color: var(--color-text-secondary)
}

.dark .xun-spin-activity__name,
.dark .xun-spin-activity__prize {
	color: var(--color-text)
}

.dark .xun-spin-activity__time {
	color: var(--color-text-tertiary)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-logo a,
.dark body.xun-page-spin-wheel .xun-header--transparent .xun-logo-text,
.dark body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link,
.dark body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn {
	color: rgba(255, 255, 255, .9)
}

.dark body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item>.xun-nav-link:hover,
.dark body.xun-page-spin-wheel .xun-header--transparent>.xun-header-inner>.xun-nav>.xun-nav-list>.xun-nav-item.current-menu-item>.xun-nav-link {
	color: #fff
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-action-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle {
	color: rgba(255, 255, 255, .9)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-menu-toggle:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-light {
	display: none
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-logo-img.xun-logo-dark {
	display: block
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header {
	color: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .3)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-auth-btn-header:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .5)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-user-avatar {
	border-color: rgba(255, 255, 255, .3)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn {
	color: rgba(255, 255, 255, .9)
}

.dark body.xun-page-spin-wheel .xun-header--transparent .xun-language-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .15)
}

.xun-vip-section {
	padding: 1rem 0
}

.xun-vip-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-vip-header {
	border-bottom: 1px solid #e5e5e5;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	display: flex
}

.xun-vip-title {
	color: #171717;
	margin: 0;
	padding-left: .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative
}

.xun-vip-title:before {
	content: "";
	background: var(--xun-primary, #1677ff);
	border-radius: 2px;
	width: 3px;
	height: 1.25rem;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-vip-subtitle {
	color: #737373;
	text-align: right;
	margin: 0 0 0 auto;
	font-size: .875rem
}

.xun-vip-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	display: grid
}

.xun-vip-grid.is-count-3 {
	grid-template-columns: repeat(3, 1fr)
}

.xun-vip-card {
	border-radius: var(--xun-radius, 8px);
	background: #fff;
	border: 1px solid #e5e5e5;
	transition: all .3s;
	position: relative;
	overflow: hidden
}

.xun-vip-card:hover {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-card-inner {
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	display: flex
}

.xun-vip-card-top {
	text-align: center;
	border-bottom: 1px dashed #e5e5e5;
	margin-bottom: 1rem;
	padding-bottom: 1rem
}

.xun-vip-level {
	color: var(--vip-color, var(--xun-primary, #1677ff));
	background: rgba(22, 119, 255, .1);
	border-radius: 9999px;
	margin-bottom: .5rem;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-level {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-level {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))10%, transparent)
		}
	}
}

.xun-vip-name {
	color: #262626;
	margin: 0 0 .25rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-vip-duration {
	color: #737373;
	font-size: .75rem
}

.xun-vip-price-area {
	text-align: center;
	margin-bottom: 1rem
}

.xun-vip-price {
	color: var(--vip-color, var(--xun-primary, #1677ff));
	justify-content: center;
	align-items: baseline;
	gap: .125rem;
	margin-bottom: .25rem;
	font-weight: 700;
	display: flex
}

.xun-vip-currency {
	font-size: 1rem
}

.xun-vip-amount {
	font-size: 2.25rem;
	line-height: 1
}

.xun-vip-original-price {
	color: #a3a3a3;
	font-size: .75rem;
	text-decoration: line-through
}

.xun-vip-downloads {
	color: #525252;
	border-radius: var(--xun-radius-sm, 4px);
	background: #f5f5f5;
	justify-content: center;
	align-items: center;
	gap: .25rem;
	margin: 0 auto 1rem;
	padding: .375rem .75rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-vip-downloads svg {
	color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-features {
	flex: 1;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none
}

.xun-vip-feature {
	color: #525252;
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	font-size: .8125rem;
	display: flex
}

.xun-vip-feature svg {
	width: 16px;
	height: 16px;
	color: var(--feature-color, #52c41a);
	flex-shrink: 0
}

.xun-vip-btn {
	text-align: center;
	width: 100%;
	color: var(--vip-color, var(--xun-primary, #1677ff));
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: #f0f7ff;
	border: 1px solid #1677ff33;
	padding: .625rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s;
	display: block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-btn {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-btn {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))8%, transparent)
		}
	}

	.xun-vip-btn {
		border: 1px solid var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-btn {
			border: 1px solid color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))20%, transparent)
		}
	}
}

.xun-vip-btn:hover {
	color: #fff;
	background: var(--vip-color, var(--xun-primary, #1677ff));
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-card.is-recommended {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-card.is-recommended .xun-vip-btn:not(:disabled):not(.is-disabled) {
	color: #fff;
	background: var(--vip-color, var(--xun-primary, #1677ff));
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-card.is-recommended .xun-vip-btn:hover:not(:disabled):not(.is-disabled) {
	background: #1260cc
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-card.is-recommended .xun-vip-btn:hover:not(:disabled):not(.is-disabled) {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-card.is-recommended .xun-vip-btn:hover:not(:disabled):not(.is-disabled) {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))85%, #000)
		}
	}
}

.xun-vip-card.is-recommended .xun-vip-btn:disabled,
.xun-vip-card.is-recommended .xun-vip-btn.is-disabled {
	color: var(--vip-color, var(--xun-primary, #1677ff));
	background: #f0f7ff;
	border-color: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {

	.xun-vip-card.is-recommended .xun-vip-btn:disabled,
	.xun-vip-card.is-recommended .xun-vip-btn.is-disabled {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-vip-card.is-recommended .xun-vip-btn:disabled,
		.xun-vip-card.is-recommended .xun-vip-btn.is-disabled {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))8%, transparent)
		}
	}

	.xun-vip-card.is-recommended .xun-vip-btn:disabled,
	.xun-vip-card.is-recommended .xun-vip-btn.is-disabled {
		border-color: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-vip-card.is-recommended .xun-vip-btn:disabled,
		.xun-vip-card.is-recommended .xun-vip-btn.is-disabled {
			border-color: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))20%, transparent)
		}
	}
}

.xun-vip-recommend-tag {
	color: #fff;
	background: var(--vip-color, var(--xun-primary, #1677ff));
	border-radius: 0 calc(var(--xun-radius, 8px) - 1px)0 var(--xun-radius, 8px);
	z-index: 1;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	position: absolute;
	top: 0;
	right: 0
}

.xun-vip-current-tag {
	color: #fff;
	background: var(--color-success, #52c41a);
	border-radius: var(--xun-radius-sm, 4px);
	z-index: 1;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	position: absolute;
	top: 12px;
	left: 12px
}

.xun-vip-upgrade-tag {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	z-index: 1;
	background: linear-gradient(135deg, #ff6b6b, orange);
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	position: absolute;
	top: 12px;
	left: 12px
}

.xun-vip-savings {
	color: var(--color-success, #52c41a);
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(82, 196, 26, .1);
	justify-content: center;
	align-items: center;
	gap: .25rem;
	margin-top: .375rem;
	padding: .25rem .5rem;
	font-size: .6875rem;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-savings {
		background: rgba(81, 193, 72, .1)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-savings {
			background: color-mix(in srgb, var(--color-success, #52c41a)10%, transparent)
		}
	}
}

.xun-vip-card.is-current {
	border-color: var(--color-success, #52c41a)
}

.xun-vip-card.is-current .xun-vip-btn {
	color: var(--color-success, #52c41a);
	background: rgba(82, 196, 26, .08);
	border-color: rgba(82, 196, 26, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-card.is-current .xun-vip-btn {
		background: rgba(81, 193, 72, .08)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-card.is-current .xun-vip-btn {
			background: color-mix(in srgb, var(--color-success, #52c41a)8%, transparent)
		}
	}

	.xun-vip-card.is-current .xun-vip-btn {
		border-color: rgba(81, 193, 72, .2)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-card.is-current .xun-vip-btn {
			border-color: color-mix(in srgb, var(--color-success, #52c41a)20%, transparent)
		}
	}
}

.xun-vip-card.is-upgradable .xun-vip-price.is-upgrade-price {
	color: #ff6b6b
}

.xun-vip-card.is-disabled {
	opacity: .65
}

.xun-vip-card.is-disabled:hover {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-btn:disabled,
.xun-vip-btn.is-disabled {
	cursor: not-allowed;
	opacity: .6
}

.xun-vip-btn:disabled:hover,
.xun-vip-btn.is-disabled:hover {
	color: var(--vip-color, var(--xun-primary, #1677ff));
	background: #f0f7ff;
	border-color: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {

	.xun-vip-btn:disabled:hover,
	.xun-vip-btn.is-disabled:hover {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-vip-btn:disabled:hover,
		.xun-vip-btn.is-disabled:hover {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))8%, transparent)
		}
	}

	.xun-vip-btn:disabled:hover,
	.xun-vip-btn.is-disabled:hover {
		border-color: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-vip-btn:disabled:hover,
		.xun-vip-btn.is-disabled:hover {
			border-color: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))20%, transparent)
		}
	}
}

.xun-vip-btn.is-upgrade {
	color: #fff;
	background: var(--vip-color, var(--xun-primary, #1677ff));
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.xun-vip-btn.is-upgrade:hover:not(:disabled) {
	background: #1260cc
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-vip-btn.is-upgrade:hover:not(:disabled) {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-vip-btn.is-upgrade:hover:not(:disabled) {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))85%, #000)
		}
	}
}

@media(max-width:1024px) {
	.xun-vip-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-vip-grid.is-count-3 .xun-vip-card:last-child {
		grid-column: 1/-1
	}
}

@media(max-width:768px) {
	.xun-vip-section {
		padding: 1rem .5rem
	}

	.xun-vip-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem;
		margin-bottom: 1rem
	}

	.xun-vip-title {
		font-size: 1.125rem
	}

	.xun-vip-subtitle {
		padding-left: .75rem;
		font-size: .8125rem
	}
}

@media(max-width:640px) {
	.xun-vip-grid {
		grid-template-columns: 1fr;
		gap: .75rem
	}

	.xun-vip-card-inner {
		padding: 1rem
	}

	.xun-vip-amount {
		font-size: 2rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-vip-header {
		border-bottom-color: #404040
	}

	:root:not(.light) .xun-vip-title {
		color: #f5f5f5
	}

	:root:not(.light) .xun-vip-subtitle {
		color: #a3a3a3
	}

	:root:not(.light) .xun-vip-card {
		background: var(--color-bg-container);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-vip-card:hover {
		border-color: var(--vip-color, var(--xun-primary, #1677ff))
	}

	:root:not(.light) .xun-vip-card-top {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-vip-name {
		color: #f5f5f5
	}

	:root:not(.light) .xun-vip-duration {
		color: #a3a3a3
	}

	:root:not(.light) .xun-vip-downloads {
		background: var(--color-fill-secondary);
		color: var(--color-text-secondary)
	}

	:root:not(.light) .xun-vip-feature {
		color: #d4d4d4
	}

	:root:not(.light) .xun-vip-original-price {
		color: #737373
	}

	:root:not(.light) .xun-vip-btn {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-vip-card.is-recommended {
		border-color: var(--vip-color, var(--xun-primary, #1677ff))
	}

	:root:not(.light) .xun-vip-card.is-current {
		border-color: var(--color-success, #52c41a)
	}

	:root:not(.light) .xun-vip-card.is-disabled {
		opacity: .5
	}

	:root:not(.light) .xun-vip-card.is-disabled:hover {
		border-color: var(--vip-color, var(--xun-primary, #1677ff))
	}

	:root:not(.light) .xun-vip-savings {
		background: var(--color-success-bg)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-vip-btn {
			background: var(--vip-color, var(--xun-primary, #1677ff))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-vip-btn {
				background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))15%, transparent)
			}
		}

		:root:not(.light) .xun-vip-savings {
			background: rgba(81, 193, 72, .15)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-vip-savings {
				background: color-mix(in srgb, var(--color-success, #52c41a)15%, transparent)
			}
		}
	}
}

.dark .xun-vip-header {
	border-bottom-color: #404040
}

.dark .xun-vip-title {
	color: #f5f5f5
}

.dark .xun-vip-subtitle {
	color: #a3a3a3
}

.dark .xun-vip-card {
	background: var(--color-bg-container);
	border-color: var(--color-border)
}

.dark .xun-vip-card:hover {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.dark .xun-vip-card-top {
	border-bottom-color: var(--color-border)
}

.dark .xun-vip-name {
	color: #f5f5f5
}

.dark .xun-vip-duration {
	color: #a3a3a3
}

.dark .xun-vip-downloads {
	background: var(--color-fill-secondary);
	color: var(--color-text-secondary)
}

.dark .xun-vip-feature {
	color: #d4d4d4
}

.dark .xun-vip-original-price {
	color: #737373
}

.dark .xun-vip-btn {
	background: var(--color-fill-secondary)
}

.dark .xun-vip-card.is-recommended {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.dark .xun-vip-card.is-current {
	border-color: var(--color-success, #52c41a)
}

.dark .xun-vip-card.is-disabled {
	opacity: .5
}

.dark .xun-vip-card.is-disabled:hover {
	border-color: var(--vip-color, var(--xun-primary, #1677ff))
}

.dark .xun-vip-savings {
	background: var(--color-success-bg)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-vip-btn {
		background: var(--vip-color, var(--xun-primary, #1677ff))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-vip-btn {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary, #1677ff))15%, transparent)
		}
	}

	.dark .xun-vip-savings {
		background: rgba(81, 193, 72, .15)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-vip-savings {
			background: color-mix(in srgb, var(--color-success, #52c41a)15%, transparent)
		}
	}
}

.xun-membership-page {
	background: var(--color-bg-layout);
	min-height: 100vh
}

body.xun-page-membership.has-transparent-header .xun-content {
	padding-top: 0
}

.xun-membership-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), var(--xun-primary);
	width: 100%;
	padding: 6rem 0;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-membership-hero {
		background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-membership-hero {
			background: linear-gradient(135deg, var(--xun-primary)0%, color-mix(in srgb, var(--xun-primary)70%, #000)100%)
		}
	}
}

.xun-membership-hero--transparent {
	margin-top: -64px;
	padding-top: calc(64px + 6rem)
}

.xun-membership-hero-bg {
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden
}

.xun-membership-hero-pattern {
	background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0) 70%);
	width: 60%;
	height: 200%;
	animation: 20s ease-in-out infinite xunHeroFloat;
	position: absolute;
	top: -50%;
	right: -20%
}

.xun-membership-hero-inner {
	z-index: 1;
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem;
	position: relative
}

.xun-membership-hero-content {
	text-align: center
}

.xun-membership-badge {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	background: rgba(255, 255, 255, .15);
	border-radius: 2rem;
	align-items: center;
	gap: .375rem;
	margin-bottom: 1.5rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-membership-title {
	color: #fff;
	margin: 0 0 1rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-membership-subtitle {
	color: rgba(255, 255, 255, .85);
	max-width: 500px;
	margin: 0 auto;
	font-size: 1.125rem
}

.xun-membership-user-status {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .15);
	border: 1px solid #fff3;
	border-radius: .75rem;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding: .75rem 1.25rem;
	display: inline-flex
}

.xun-membership-status-badge {
	color: #fff;
	align-items: center;
	gap: .375rem;
	font-weight: 600;
	display: inline-flex
}

.xun-membership-status-time {
	color: rgba(255, 255, 255, .8);
	font-size: .875rem
}

.xun-membership-packages {
	z-index: 2;
	margin-top: -3rem;
	padding-bottom: 3rem;
	position: relative
}

.xun-membership-section-header {
	text-align: center;
	margin-bottom: 2.5rem
}

.xun-membership-section-title {
	color: var(--color-text, #171717);
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 700
}

.xun-membership-section-desc {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .9375rem
}

.xun-membership-benefits {
	background: var(--color-bg-container, #fff);
	padding: 4rem 0
}

.xun-membership-benefits-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	display: grid
}

.xun-membership-benefit-card {
	text-align: center;
	padding: 1.5rem;
	transition: all .3s
}

.xun-membership-benefit-card:hover {
	transform: translateY(-4px)
}

.xun-membership-benefit-icon {
	width: 3.5rem;
	height: 3.5rem;
	color: var(--xun-primary, #1677ff);
	background: rgba(22, 119, 255, .1);
	border-radius: .75rem;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1rem;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-membership-benefit-icon {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-membership-benefit-icon {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, transparent)
		}
	}
}

.xun-membership-benefit-title {
	color: var(--color-text, #171717);
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-membership-benefit-desc {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .875rem;
	line-height: 1.6
}

.xun-membership-faq {
	background: var(--color-bg-layout, #f5f5f5);
	padding: 4rem 0
}

.xun-membership-faq-list {
	flex-direction: column;
	gap: .75rem;
	max-width: 800px;
	margin: 0 auto;
	display: flex
}

.xun-membership-faq-item {
	overflow: hidden
}

.xun-membership-faq-question {
	cursor: pointer;
	color: var(--color-text, #171717);
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: background .2s;
	display: flex
}

.xun-membership-faq-question:hover {
	background: var(--color-fill-quaternary, #fafafa)
}

.xun-membership-faq-icon {
	color: var(--color-text-tertiary, #a3a3a3);
	flex-shrink: 0;
	transition: transform .3s
}

.xun-membership-faq-item.active .xun-membership-faq-icon {
	transform: rotate(180deg)
}

.xun-membership-faq-answer {
	color: var(--color-text-secondary, #525252);
	max-height: 0;
	padding: 0 1.25rem;
	font-size: .875rem;
	line-height: 1.7;
	transition: max-height .3s, padding .3s;
	overflow: hidden
}

.xun-membership-faq-item.active .xun-membership-faq-answer {
	padding: 0 1.25rem 1rem
}

.xun-membership-cta {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), var(--xun-primary);
	text-align: center;
	padding: 4rem 0
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-membership-cta {
		background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-membership-cta {
			background: linear-gradient(135deg, var(--xun-primary)0%, color-mix(in srgb, var(--xun-primary)70%, #000)100%)
		}
	}
}

.xun-membership-cta-content {
	max-width: 500px;
	margin: 0 auto
}

.xun-membership-cta-title {
	color: #fff;
	margin: 0 0 .75rem;
	font-size: 1.75rem;
	font-weight: 700
}

.xun-membership-cta-desc {
	color: rgba(255, 255, 255, .85);
	margin: 0 0 1.5rem;
	font-size: 1rem
}

.xun-membership-cta-btn {
	align-items: center;
	gap: .5rem;
	display: inline-flex
}

@media(max-width:1024px) {
	.xun-membership-benefits-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:768px) {
	.xun-membership-hero {
		padding: 3rem 0 5rem
	}

	.xun-membership-hero--transparent {
		margin-top: -56px;
		padding-top: calc(56px + 3rem)
	}

	.xun-membership-title {
		font-size: 1.75rem
	}

	.xun-membership-subtitle {
		font-size: 1rem
	}

	.xun-membership-packages {
		margin-top: -2rem
	}

	.xun-membership-benefits,
	.xun-membership-faq,
	.xun-membership-cta {
		padding: 3rem 0
	}

	.xun-membership-benefits-grid {
		grid-template-columns: 1fr;
		gap: 1rem
	}

	.xun-membership-benefit-card {
		text-align: left;
		align-items: center;
		gap: 1rem;
		padding: 1rem;
		display: flex
	}

	.xun-membership-benefit-icon {
		flex-shrink: 0;
		margin: 0
	}

	.xun-membership-section-title {
		font-size: 1.25rem
	}

	.xun-membership-cta-title {
		font-size: 1.5rem
	}
}

.dark .xun-membership-benefits {
	background: var(--color-bg-container)
}

.dark .xun-membership-faq {
	background: var(--color-bg-layout)
}

.dark .xun-membership-section-title,
.dark .xun-membership-benefit-title,
.dark .xun-membership-faq-question {
	color: var(--color-text)
}

.dark .xun-membership-faq-question:hover {
	background: var(--color-fill-secondary)
}

.xun-posts-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-posts-section .xun-posts-block {
	width: 100%;
	display: block !important
}

.xun-posts-section .xun-posts-block:last-child {
	margin-bottom: 0
}

.xun-posts-section .xun-posts-block>.xun-posts-header,
.xun-posts-section .xun-posts-block>.xun-posts-grid,
.xun-posts-section .xun-posts-block>.xun-posts-footer {
	display: revert
}

.xun-posts-section .xun-posts-header {
	border-bottom: 1px solid var(--color-border-secondary, #e5e5e5);
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: .5rem;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
	display: flex !important
}

.xun-posts-title {
	color: var(--color-text, #171717);
	margin: 0;
	padding-left: .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative
}

.xun-posts-title:before {
	content: "";
	background: var(--xun-primary, #1677ff);
	border-radius: 2px;
	width: 3px;
	height: 1.25rem;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-posts-more-link {
	color: var(--color-text-tertiary, #737373);
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-posts-more-link:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-posts-category-tabs {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-category-tab {
	color: var(--color-text-tertiary, #737373);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	white-space: nowrap;
	background: 0 0;
	border: 1px solid #0000;
	padding: .375rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-category-tab:hover {
	color: var(--xun-primary, #1677ff);
	background: var(--color-primary-bg)
}

.xun-category-tab.active {
	color: var(--xun-primary, #1677ff);
	background: var(--color-primary-bg-hover);
	border-color: rgba(22, 119, 255, .25)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-category-tab.active {
		border-color: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-category-tab.active {
			border-color: color-mix(in srgb, var(--xun-primary, #1677ff)25%, transparent)
		}
	}
}

.xun-category-tab-hidden {
	opacity: 0;
	max-width: 0;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
	transition: max-width .3s, padding .3s, margin .3s, opacity .3s, transform .3s;
	overflow: hidden;
	transform: scale(.8)
}

.xun-posts-category-tabs.expanded .xun-category-tab-hidden {
	opacity: 1;
	max-width: 200px;
	margin-left: 0;
	padding-left: .875rem;
	padding-right: .875rem;
	transform: scale(1)
}

.xun-category-more-btn {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-category-more-btn .xun-more-icon {
	transition: transform .3s
}

.xun-posts-category-tabs.expanded .xun-category-more-btn .xun-more-icon {
	transform: rotate(180deg)
}

.xun-posts-grid {
	transition: opacity .3s
}

.xun-posts-block.switching .xun-posts-grid {
	opacity: 0
}

.xun-posts-block.switched .xun-posts-grid {
	animation: .4s forwards fadeIn
}

.xun-posts-block.loading .xun-posts-grid {
	opacity: .5;
	pointer-events: none
}

.xun-posts-block.loading .xun-category-tab {
	pointer-events: none
}

.xun-posts-section .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 4), 1fr);
	gap: .5rem;
	width: 100%;
	transition: gap .3s;
	display: grid !important
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-thumb {
	--xun-thumb-border-width: 6px
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-content {
	padding: .875rem
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-card-title {
	font-size: .875rem
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt {
	margin-bottom: .5rem;
	padding: .375rem .5rem
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-meta {
	font-size: .6875rem
}

.xun-posts-block[style*="--pc-columns: 4"] .xun-post-avatar img {
	width: 20px;
	height: 20px
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-thumb {
	--xun-thumb-border-width: 5px
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-content {
	padding: .75rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-card-title {
	font-size: .8125rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-excerpt {
	margin-bottom: .375rem;
	padding: .25rem .375rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-excerpt-text {
	font-size: .6875rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-meta {
	gap: .25rem;
	font-size: .625rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-meta-right {
	gap: .5rem
}

.xun-posts-block[style*="--pc-columns: 5"] .xun-post-tag {
	font-size: .625rem
}

.xun-posts-block[style*="--pc-columns: 6"],
.xun-posts-block[style*="--pc-columns: 7"],
.xun-posts-block[style*="--pc-columns: 8"] {
	--card-scale: .85
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-thumb,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-thumb,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-thumb {
	--xun-thumb-border-width: 4px
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-content,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-content,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-content {
	padding: .625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-card-title,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-card-title,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-card-title {
	font-size: .75rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-excerpt,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-excerpt,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-excerpt {
	margin-bottom: .375rem;
	padding: .25rem .375rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-excerpt-text,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-excerpt-text,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-excerpt-text {
	font-size: .625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-meta,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-meta,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-meta {
	gap: .25rem;
	font-size: .5625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-avatar img,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-avatar img,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-avatar img {
	width: 16px;
	height: 16px
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-meta-right,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-meta-right,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-meta-right {
	gap: .375rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-tag,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-tag,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-tag {
	font-size: .5625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-cat,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-cat,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-cat,
.xun-posts-block[style*="--pc-columns: 6"] .xun-post-resource-tag,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-resource-tag,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-resource-tag {
	padding: .125rem .375rem;
	font-size: .625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-post-stat,
.xun-posts-block[style*="--pc-columns: 7"] .xun-post-stat,
.xun-posts-block[style*="--pc-columns: 8"] .xun-post-stat {
	padding: .125rem .375rem;
	font-size: .5625rem
}

.xun-posts-block[style*="--pc-columns: 6"] .xun-resource-badge,
.xun-posts-block[style*="--pc-columns: 7"] .xun-resource-badge,
.xun-posts-block[style*="--pc-columns: 8"] .xun-resource-badge {
	padding: .125rem .5rem;
	font-size: .5625rem
}

.xun-posts-download.xun-posts-block[style*="--pc-columns: 4"] .xun-post-content,
.xun-posts-download.xun-posts-block[style*="--pc-columns: 5"] .xun-post-content,
.xun-posts-download.xun-posts-block[style*="--pc-columns: 6"] .xun-post-content,
.xun-posts-download.xun-posts-block[style*="--pc-columns: 7"] .xun-post-content,
.xun-posts-download.xun-posts-block[style*="--pc-columns: 8"] .xun-post-content {
	padding: .1rem .75rem .875rem
}

.xun-post-card:not(.card) {
	background: var(--color-bg-container, #fff);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-xs);
	overflow: hidden
}

.xun-post-card-link {
	height: 100%;
	color: inherit;
	flex-direction: column;
	text-decoration: none;
	display: flex
}

.xun-post-thumb {
	aspect-ratio: var(--thumb-ratio, 16/10);
	background: var(--color-fill-quaternary, #f5f5f5);
	border: var(--xun-thumb-border-width, 8px)solid var(--color-bg-container, #fff);
	border-radius: var(--xun-radius, 8px);
	position: relative;
	overflow: hidden
}

.xun-post-thumb img {
	object-fit: cover;
	object-position: var(--xun-image-crop-position, center top);
	border-radius: var(--xun-radius, 8px);
	width: 100%;
	height: 100%
}

.xun-post-cat {
	color: #fff;
	background: var(--xun-primary, #1677ff);
	border-radius: var(--xun-radius-sm, 4px);
	opacity: 0;
	padding: .25rem .5rem;
	font-size: .75rem;
	transition: opacity .3s, transform .3s;
	position: absolute;
	top: .5rem;
	left: .5rem;
	transform: translateY(-5px)
}

.xun-post-card:hover .xun-post-cat {
	opacity: 1;
	transform: translateY(0)
}

.xun-post-resource-tag {
	color: #fff;
	background: var(--xun-secondary, #52c41a);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .25rem .5rem;
	font-size: .75rem;
	position: absolute;
	top: .5rem;
	right: .5rem
}

.xun-post-thumb-stats {
	opacity: 0;
	align-items: center;
	gap: .5rem;
	transition: opacity .3s, transform .3s;
	display: flex;
	position: absolute;
	top: .5rem;
	right: .5rem;
	transform: translateY(-5px)
}

.xun-post-card:hover .xun-post-thumb-stats {
	opacity: 1;
	transform: translateY(0)
}

.xun-post-stat {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background: rgba(0, 0, 0, .6);
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	font-size: .6875rem;
	display: inline-flex
}

.xun-post-stat svg {
	flex-shrink: 0
}

.xun-post-thumb:has(.xun-post-resource-tag) .xun-post-thumb-stats {
	top: 2.25rem
}

.xun-post-content {
	flex-direction: column;
	flex: 1;
	padding: 1rem;
	display: flex
}

.xun-post-card-title {
	color: var(--color-text, #262626);
	-webkit-line-clamp: var(--pc-title-lines, 2);
	-webkit-box-orient: vertical;
	margin: 0 0 .5rem;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-post-card:hover .xun-post-card-title {
	color: var(--xun-primary, #1677ff)
}

.xun-post-excerpt {
	background: var(--color-fill-quaternary, #f5f5f5);
	border-radius: var(--xun-radius-sm, 4px);
	margin: 0 0 .75rem;
	padding: .5rem .625rem
}

.xun-post-excerpt-text {
	color: var(--color-text-secondary, #525252);
	-webkit-line-clamp: var(--pc-desc-lines, 2);
	-webkit-box-orient: vertical;
	font-size: .8125rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-posts-block[style*="--pc-desc-lines: 0"] .xun-post-excerpt {
	display: none
}

.xun-post-tags {
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem;
	display: flex;
	overflow: hidden
}

.xun-post-tag {
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .75rem;
	font-weight: 500;
	transition: opacity .2s;
	display: inline-block;
	overflow: hidden
}

.xun-post-card:hover .xun-post-tag {
	opacity: .8
}

.xun-post-meta {
	color: var(--color-text-quaternary, #a3a3a3);
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	font-size: .75rem;
	display: flex
}

.xun-post-meta-left {
	flex-direction: row;
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-post-meta-right {
	flex-direction: row;
	flex: 1;
	justify-content: flex-end;
	align-items: center;
	gap: .75rem;
	min-width: 0;
	display: flex;
	overflow: hidden
}

.xun-post-avatar {
	align-items: center;
	display: flex
}

.xun-post-avatar img {
	border-radius: 50%;
	width: 24px;
	height: 24px
}

.xun-post-author {
	color: var(--color-text-secondary, #525252)
}

.xun-post-views,
.xun-post-comments {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-post-views svg,
.xun-post-comments svg {
	flex-shrink: 0
}

.xun-post-date {
	color: var(--color-text-quaternary, #a3a3a3);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-post-date svg {
	flex-shrink: 0
}

.xun-posts-section .xun-posts-footer {
	clear: both;
	justify-content: center;
	width: 100%;
	margin-top: .5rem;
	display: flex !important
}

.xun-load-more-btn {
	min-width: 140px;
	color: var(--color-text-secondary, #525252);
	background: var(--color-fill-quaternary, #f5f5f5);
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	padding: .625rem 1.5rem;
	font-size: .875rem;
	transition: all .2s;
	display: inline-flex
}

.xun-load-more-btn:hover {
	color: var(--xun-primary, #1677ff);
	border-color: var(--xun-primary, #1677ff);
	background: #f0f7ff
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-load-more-btn:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-load-more-btn:hover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)5%, var(--color-bg-container, #fff))
		}
	}
}

.xun-load-more-btn:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-load-more-loading {
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-load-more-loading .xun-spinner {
	flex-shrink: 0
}

.xun-infinite-scroll {
	min-height: 60px
}

.xun-infinite-trigger {
	justify-content: center;
	align-items: center;
	padding: 1rem 0;
	display: flex
}

.xun-infinite-loading {
	color: var(--color-text-tertiary, #737373);
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	display: flex
}

.xun-infinite-loading .xun-spinner {
	color: var(--xun-primary, #1677ff)
}

.xun-infinite-end {
	color: var(--color-text-quaternary, #a3a3a3);
	justify-content: center;
	align-items: center;
	font-size: .875rem;
	display: flex
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card {
	position: relative;
	overflow: hidden
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card-link {
	display: block;
	position: relative
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-thumb {
	border-radius: var(--xun-radius, 8px);
	border: none;
	display: block
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-thumb img {
	border-radius: 0;
	width: 100%;
	display: block
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-content {
	opacity: 0;
	z-index: 10;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .8));
	padding: 1rem;
	transition: opacity .3s, transform .3s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(10px)
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card:hover .xun-post-content {
	opacity: 1;
	transform: translateY(0)
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card-title {
	color: #fff;
	text-shadow: 0 1px 2px #0000004d;
	margin-bottom: .5rem
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card:hover .xun-post-card-title {
	color: #fff
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-excerpt {
	background: 0 0;
	margin-bottom: .5rem;
	padding: 0
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-excerpt-text {
	color: rgba(255, 255, 255, .85)
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-meta {
	color: rgba(255, 255, 255, .7)
}

:is(.xun-posts-image, .xun-posts-waterfall) .xun-post-author {
	color: rgba(255, 255, 255, .85)
}

.xun-posts-image .xun-post-thumb {
	aspect-ratio: var(--thumb-ratio, 16/9);
	width: 100%;
	overflow: hidden
}

.xun-posts-image .xun-post-thumb img {
	object-fit: cover;
	object-position: var(--xun-image-crop-position, center top);
	height: 100%
}

.xun-posts-image .xun-post-card-title {
	font-size: 1rem
}

.xun-posts-image .xun-post-excerpt-text {
	font-size: .8125rem
}

.xun-image-title-hidden.xun-posts-image .xun-post-card-title {
	margin: 0;
	display: none
}

.xun-image-title-static.xun-posts-image .xun-post-content {
	opacity: 1;
	pointer-events: auto;
	background: 0 0;
	position: static;
	transform: none
}

.xun-posts-image .xun-post-content.xun-post-content-title-only {
	background: 0 0
}

.xun-image-title-static.xun-posts-image .xun-post-card:hover .xun-post-content {
	opacity: 1;
	transform: none
}

.xun-image-title-static.xun-posts-image .xun-post-card-title {
	color: var(--color-text, #262626);
	text-shadow: none
}

.xun-image-title-static.xun-posts-image .xun-post-card:hover .xun-post-card-title {
	color: var(--color-text, #262626)
}

.xun-image-title-static.xun-posts-image .xun-post-excerpt-text,
.xun-image-title-static.xun-posts-image .xun-post-meta {
	color: var(--color-text-secondary, #525252)
}

.xun-posts-download {
	--xun-download-cover-size: 80px;
	--xun-download-cover-radius: 18px
}

.xun-posts-download .xun-post-card-link {
	align-items: center
}

.xun-posts-download .xun-post-thumb-download {
	width: var(--xun-download-cover-size);
	height: var(--xun-download-cover-size);
	aspect-ratio: 1;
	border-radius: var(--xun-download-cover-radius);
	background: 0 0;
	margin: 1rem auto 0;
	overflow: hidden
}

.xun-posts-download .xun-post-thumb-download-img {
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	width: 100%;
	height: 100%
}

.xun-posts-download .xun-post-content {
	text-align: center;
	align-items: center;
	width: 100%;
	padding: .1rem 1rem 1rem
}

.xun-posts-download .xun-post-card-title {
	margin-bottom: .5rem;
	font-size: .875rem
}

.xun-posts-download .xun-post-download-attrs {
	flex-wrap: wrap;
	justify-content: center;
	gap: .375rem .5rem;
	display: flex
}

.xun-posts-download .xun-post-download-attr {
	color: var(--color-text-tertiary, #737373);
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius-sm, 4px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, .5);
	align-items: center;
	padding: .25rem .5rem;
	font-size: .75rem;
	display: inline-flex
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-posts-download .xun-post-download-attr {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .12)
	}
}

.dark .xun-posts-download .xun-post-download-attr {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .12)
}

.xun-posts-list .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 1), 1fr);
	gap: 1rem
}

.xun-posts-list .xun-post-card-link {
	flex-direction: row;
	align-items: stretch;
	display: flex
}

.xun-posts-list .xun-post-thumb {
	width: 200px;
	aspect-ratio: var(--thumb-ratio, 16/10);
	flex-shrink: 0;
	align-self: flex-start
}

.xun-posts-list .xun-post-content {
	flex-direction: column;
	flex: 1;
	justify-content: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-posts-list .xun-post-card-title {
	margin-bottom: .5rem;
	font-size: 1rem
}

.xun-posts-list .xun-post-excerpt {
	margin-bottom: .75rem
}

.xun-posts-list-card .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 2), 1fr);
	gap: .5rem
}

.xun-posts-list-card .xun-post-card {
	margin-top: 2.5rem;
	position: relative
}

.xun-posts-list-card .xun-post-card-link {
	flex-direction: row;
	align-items: stretch;
	gap: 1.25rem;
	min-height: 180px;
	padding: 1rem;
	display: flex
}

.xun-posts-list-card .xun-post-thumb {
	aspect-ratio: 3/4;
	border-radius: var(--xun-radius, 8px);
	width: 180px;
	box-shadow: var(--shadow-dropdown);
	border: none;
	flex-shrink: 0;
	margin-top: -3.5rem;
	overflow: hidden
}

.xun-posts-list-card .xun-post-thumb img {
	object-fit: cover;
	object-position: var(--xun-image-crop-position, center top);
	border-radius: var(--xun-radius, 8px);
	width: 100%;
	height: 100%
}

.xun-posts-list-card .xun-post-content {
	flex-direction: column;
	flex: 1;
	min-height: 100%;
	padding: 0;
	display: flex
}

.xun-posts-list-card .xun-post-card-title {
	-webkit-line-clamp: var(--pc-title-lines, 2);
	-webkit-box-orient: vertical;
	margin-bottom: .5rem;
	font-size: 1rem;
	font-weight: 600;
	display: -webkit-box;
	overflow: hidden
}

.xun-posts-list-card .xun-post-excerpt {
	background: 0 0;
	flex: 1;
	margin-top: .5rem;
	margin-bottom: .75rem;
	padding: 0
}

.xun-posts-list-card .xun-post-excerpt-text {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: var(--pc-desc-lines, 2);
	-webkit-box-orient: vertical;
	font-size: .8125rem;
	display: -webkit-box;
	overflow: hidden
}

.xun-posts-list-card .xun-post-meta {
	border-top: 1px solid var(--color-border-secondary, #f0f0f0);
	flex-shrink: 0;
	margin-top: auto;
	padding-top: .5rem
}

.xun-posts-list-card .xun-post-meta-left {
	gap: .375rem
}

.xun-posts-list-card .xun-post-avatar img {
	width: 20px;
	height: 20px
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 2"] .xun-post-thumb {
	width: 180px
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 2"] .xun-post-content {
	padding: .875rem 1rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 2"] .xun-post-card-title {
	font-size: .9375rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-thumb,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-thumb {
	width: 140px
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-content,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-content {
	padding: .75rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-card-title,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-card-title {
	margin-bottom: .375rem;
	font-size: .875rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-excerpt,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt {
	margin-bottom: .5rem;
	padding: .375rem .5rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-excerpt-text,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-meta,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-meta {
	font-size: .6875rem
}

.xun-posts-list.xun-posts-block[style*="--pc-columns: 3"] .xun-post-avatar img,
.xun-posts-list.xun-posts-block[style*="--pc-columns: 4"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-card {
	margin-top: 2rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-card-link {
	gap: 1rem;
	min-height: 150px;
	padding: .875rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-thumb {
	width: 140px;
	margin-top: -2.75rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-card-title {
	font-size: .9375rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-meta {
	font-size: .6875rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 3"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"],
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"],
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] {
	--list-card-scale: .8
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-posts-grid,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-posts-grid,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-posts-grid {
	gap: 1rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-card,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-card,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-card {
	margin-top: 1.5rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-card-link,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-card-link,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-card-link {
	gap: .75rem;
	min-height: 120px;
	padding: .75rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-thumb,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-thumb,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-thumb {
	width: 100px;
	margin-top: -2rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-card-title,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-card-title,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-card-title {
	margin-bottom: .375rem;
	font-size: .8125rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-excerpt,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-excerpt {
	margin-top: .25rem;
	margin-bottom: .5rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-excerpt-text,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-excerpt-text,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-excerpt-text {
	font-size: .6875rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-meta,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-meta,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-meta {
	padding-top: .375rem;
	font-size: .625rem
}

.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 4"] .xun-post-avatar img,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 5"] .xun-post-avatar img,
.xun-posts-list-card.xun-posts-block[style*="--pc-columns: 6"] .xun-post-avatar img {
	width: 16px;
	height: 16px
}

.xun-posts-list-card .xun-post-cat,
.xun-posts-list-card .xun-post-thumb-stats,
.xun-posts-list-card .xun-post-resource-tag {
	display: none
}

.xun-posts-text .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 1), 1fr);
	gap: .75rem
}

.xun-posts-text .xun-post-card-link {
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-posts-text .xun-post-content {
	flex-direction: column;
	flex: 1;
	gap: .5rem;
	padding: 0;
	display: flex
}

.xun-posts-text .xun-post-card-title {
	color: var(--color-text, #262626);
	-webkit-line-clamp: var(--pc-title-lines, 2);
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-posts-text .xun-post-card:hover .xun-post-card-title {
	color: var(--xun-primary, #3b82f6)
}

.xun-posts-text .xun-post-excerpt {
	background: 0 0;
	border-radius: 0;
	margin: 0;
	padding: 0
}

.xun-posts-text .xun-post-excerpt-text {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: var(--pc-desc-lines, 2);
	-webkit-box-orient: vertical;
	font-size: .875rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-posts-text .xun-post-meta {
	border-top: 1px solid var(--color-border-secondary, #f0f0f0);
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: .5rem;
	display: flex
}

.xun-posts-text .xun-post-meta-left {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-posts-text .xun-post-meta-right {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-posts-text .xun-post-avatar img {
	width: 20px;
	height: 20px
}

.xun-posts-text .xun-post-author {
	color: var(--color-text-secondary, #525252);
	font-size: .8125rem
}

.xun-posts-text .xun-post-views,
.xun-posts-text .xun-post-comments {
	color: var(--color-text-tertiary, #a3a3a3);
	font-size: .75rem
}

.xun-posts-waterfall .xun-posts-grid {
	column-count: var(--pc-columns, 4);
	display: block !important
}

.xun-posts-waterfall .xun-post-card {
	break-inside: avoid;
	width: 100%;
	margin-bottom: .5rem;
	display: block
}

.xun-posts-waterfall .xun-post-thumb {
	aspect-ratio: auto;
	position: relative
}

.xun-posts-waterfall .xun-post-thumb img {
	height: auto
}

.xun-posts-waterfall .xun-post-card-title {
	font-size: .9375rem
}

.xun-posts-waterfall .xun-post-excerpt-text {
	font-size: .75rem
}

@media(max-width:1024px) {
	.xun-posts-list .xun-post-thumb {
		width: 180px
	}
}

@media(max-width:768px) {
	.xun-posts-section .xun-posts-block {
		margin-bottom: 2rem
	}

	.xun-posts-section .xun-posts-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		margin-bottom: .5rem
	}

	.xun-posts-section .xun-posts-title {
		font-size: 1.125rem
	}

	.xun-posts-download {
		--xun-download-cover-size: 64px;
		--xun-download-cover-radius: 16px
	}

	.xun-posts-download .xun-post-content {
		padding: .625rem .75rem .875rem
	}

	.xun-posts-download .xun-post-download-attr {
		font-size: .6875rem
	}

	.xun-posts-section .xun-posts-category-tabs {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		flex-wrap: nowrap;
		width: 100%;
		margin-right: -1rem;
		padding-bottom: .25rem;
		padding-right: 1rem;
		position: relative;
		overflow-x: auto
	}

	.xun-posts-section .xun-posts-category-tabs::-webkit-scrollbar {
		display: none
	}

	.xun-posts-section .xun-category-tab-hidden {
		opacity: 1;
		max-width: 200px;
		margin-left: 0;
		padding-left: .75rem;
		padding-right: .75rem;
		transform: scale(1)
	}

	.xun-posts-section .xun-category-more-btn {
		display: none
	}

	.xun-posts-section .xun-category-tab {
		flex-shrink: 0;
		padding: .25rem .75rem;
		font-size: .8125rem
	}

	.xun-posts-section .xun-posts-grid {
		gap: .5rem;
		grid-template-columns: repeat(var(--mobile-columns, 2), 1fr) !important
	}

	.xun-posts-section .xun-posts-waterfall .xun-posts-grid {
		column-gap: .5rem;
		column-count: var(--mobile-columns, 2) !important
	}

	.xun-posts-section .xun-posts-waterfall .xun-post-card {
		margin-bottom: .5rem
	}

	.xun-posts-section .xun-post-content {
		padding: .75rem
	}

	.xun-posts-section .xun-post-card-title {
		-webkit-line-clamp: var(--mobile-title-lines, 2);
		font-size: .875rem
	}

	.xun-posts-section .xun-post-excerpt-text {
		-webkit-line-clamp: var(--mobile-desc-lines, 2);
		font-size: .75rem
	}

	.xun-posts-section .xun-posts-block[style*="--mobile-desc-lines: 0"] .xun-post-excerpt {
		display: none
	}

	.xun-posts-section .xun-post-meta {
		gap: .375rem;
		font-size: .6875rem
	}

	.xun-posts-section .xun-post-meta-left {
		flex-shrink: 0
	}

	.xun-posts-section .xun-post-meta-right {
		flex: 1;
		min-width: 0;
		overflow: hidden
	}

	.xun-posts-section .xun-post-tags {
		max-width: 100%;
		overflow: hidden
	}

	.xun-posts-section .xun-post-tag {
		text-overflow: ellipsis;
		max-width: 5rem;
		overflow: hidden
	}

	.xun-posts-section .xun-post-avatar img {
		flex-shrink: 0;
		width: 20px;
		height: 20px
	}

	.xun-posts-section .xun-posts-list .xun-post-card-link {
		flex-direction: row;
		align-items: stretch
	}

	.xun-posts-section .xun-posts-list .xun-post-thumb {
		width: 40vw;
		min-width: 120px;
		max-width: 180px
	}

	.xun-posts-section .xun-posts-list .xun-post-content {
		min-width: 0;
		padding: .75rem
	}

	.xun-posts-section .xun-posts-list .xun-posts-grid {
		grid-template-columns: repeat(var(--mobile-columns, 1), 1fr) !important
	}

	.xun-posts-section .xun-posts-list-card .xun-posts-grid {
		gap: .5rem;
		grid-template-columns: 1fr !important
	}

	.xun-posts-section .xun-posts-list-card .xun-post-card {
		margin-top: 2.5rem
	}

	.xun-posts-section .xun-posts-list-card .xun-post-card-link {
		gap: 1rem;
		min-height: 160px;
		padding: 1rem
	}

	.xun-posts-section .xun-posts-list-card .xun-post-thumb {
		width: 140px;
		margin-top: -3rem
	}

	.xun-posts-section .xun-posts-list-card .xun-post-card-title {
		-webkit-line-clamp: var(--mobile-title-lines, 2);
		font-size: .9375rem
	}

	.xun-posts-section .xun-posts-list-card .xun-post-excerpt-text {
		-webkit-line-clamp: var(--mobile-desc-lines, 2);
		font-size: .75rem
	}

	.xun-posts-section :is(.xun-posts-image, .xun-posts-waterfall) .xun-post-content {
		opacity: 1;
		padding: .5rem;
		transform: translateY(0)
	}

	.xun-posts-section :is(.xun-posts-image, .xun-posts-waterfall) .xun-post-card-title {
		-webkit-line-clamp: 1;
		margin-bottom: .25rem;
		font-size: .8125rem
	}

	.xun-posts-section :is(.xun-posts-image, .xun-posts-waterfall) .xun-post-meta-right {
		display: none
	}

	.xun-posts-section .xun-posts-image .xun-post-meta {
		flex-wrap: wrap;
		gap: .25rem
	}

	.xun-posts-section .xun-posts-text .xun-posts-grid {
		gap: .5rem;
		grid-template-columns: repeat(var(--mobile-columns, 1), 1fr) !important
	}

	.xun-posts-section .xun-posts-text .xun-post-card-link {
		padding: .875rem 1rem
	}

	.xun-posts-section .xun-posts-text .xun-post-card-title {
		-webkit-line-clamp: var(--mobile-title-lines, 2);
		font-size: .9375rem
	}

	.xun-posts-section .xun-posts-text .xun-post-excerpt-text {
		-webkit-line-clamp: var(--mobile-desc-lines, 2);
		font-size: .8125rem
	}

	.xun-posts-section .xun-posts-text .xun-post-meta {
		padding-top: .375rem
	}
}

@media(max-width:480px) {
	.xun-posts-grid {
		gap: .75rem
	}

	.xun-post-cat,
	.xun-post-resource-tag {
		padding: .125rem .375rem;
		font-size: .625rem
	}
}

.xun-post-thumb[style*="--xun-thumb-border-width: 0"] {
	border: none
}

.xun-post-thumb[class*=xun-cover-style-]:after {
	content: "";
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
	transition: opacity .3s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-post-card:hover .xun-post-thumb[class*=xun-cover-style-]:after {
	opacity: 1
}

.xun-cover-style-gradient-blue:after {
	background: linear-gradient(135deg, rgba(59, 130, 246, .3), rgba(37, 99, 235, .4))
}

.xun-cover-style-gradient-purple:after {
	background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(124, 58, 237, .4))
}

.xun-cover-style-gradient-orange:after {
	background: linear-gradient(135deg, rgba(249, 115, 22, .3), rgba(234, 88, 12, .4))
}

.xun-cover-style-gradient-green:after {
	background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(22, 163, 74, .4))
}

.xun-cover-style-gradient-pink:after {
	background: linear-gradient(135deg, rgba(236, 72, 153, .3), rgba(219, 39, 119, .4))
}

.xun-cover-style-gradient-cyan:after {
	background: linear-gradient(135deg, rgba(6, 182, 212, .3), rgba(8, 145, 178, .4))
}

.xun-cover-style-duotone-blue:after {
	mix-blend-mode: color;
	background: linear-gradient(90deg, rgba(30, 64, 175, .4), rgba(59, 130, 246, .3))
}

.xun-cover-style-duotone-purple:after {
	mix-blend-mode: color;
	background: linear-gradient(90deg, rgba(88, 28, 135, .4), rgba(168, 85, 247, .3))
}

.xun-cover-style-duotone-warm:after {
	mix-blend-mode: color;
	background: linear-gradient(90deg, rgba(194, 65, 12, .4), rgba(251, 191, 36, .3))
}

.xun-cover-style-vintage img {
	transition: filter .3s
}

.xun-post-card:hover .xun-cover-style-vintage img {
	filter: sepia(.3)contrast(1.1)brightness(.95)
}

.xun-cover-style-cool img {
	transition: filter .3s
}

.xun-post-card:hover .xun-cover-style-cool img {
	filter: saturate(.8)hue-rotate(10deg)brightness(1.05)
}

.xun-cover-style-warm img {
	transition: filter .3s
}

.xun-post-card:hover .xun-cover-style-warm img {
	filter: saturate(1.2)sepia(.1)brightness(1.05)
}

.xun-post-thumb[class*=xun-cover-style-] .xun-post-cat,
.xun-post-thumb[class*=xun-cover-style-] .xun-post-thumb-stats,
.xun-post-thumb[class*=xun-cover-style-] .xun-post-resource-tag,
.xun-post-thumb[class*=xun-cover-style-] .xun-cover-preview {
	z-index: 2
}

@media(max-width:768px) {
	.xun-post-thumb[class*=xun-cover-style-]:after {
		opacity: .5
	}
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-card,
.xun-image-overlay-enabled.xun-posts-image .xun-post-thumb {
	position: relative
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-thumb:before {
	content: "";
	z-index: 5;
	pointer-events: none;
	border-radius: inherit;
	background: 0 0;
	transition: background .3s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-card:hover .xun-post-thumb:before {
	background: rgba(0, 0, 0, .3)
}

.xun-image-device-tag {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 10;
	opacity: 1;
	background: rgba(0, 0, 0, .5);
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	font-size: .6875rem;
	font-weight: 500;
	transition: opacity .3s, transform .3s;
	display: inline-flex;
	position: absolute;
	top: .5rem;
	left: .5rem
}

.xun-image-device-tag svg {
	flex-shrink: 0
}

.xun-image-favorite-btn {
	cursor: pointer;
	z-index: 15;
	opacity: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background: rgba(0, 0, 0, .4);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	transition: all .3s;
	display: flex;
	position: absolute;
	top: .5rem;
	right: .5rem;
	transform: scale(.8)
}

.xun-image-favorite-btn svg {
	color: #fff;
	min-width: 18px;
	min-height: 18px;
	transition: all .2s;
	width: 18px !important;
	height: 18px !important
}

.xun-image-favorite-btn:hover {
	background: rgba(239, 68, 68, .9) !important;
	transform: scale(1.1) !important
}

.xun-image-favorite-btn:hover svg {
	color: #fff;
	fill: #fff
}

.xun-image-favorite-btn.is-active {
	background: rgba(239, 68, 68, .9);
	opacity: 1 !important;
	transform: scale(1) !important
}

.xun-image-favorite-btn.is-active svg {
	color: #fff;
	fill: #fff
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-card:hover .xun-image-favorite-btn {
	opacity: 1;
	transform: scale(1)
}

.xun-image-download-btn {
	z-index: 15;
	opacity: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
	background: rgba(0, 0, 0, .4);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	transition: all .3s;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)scale(.8)
}

.xun-image-download-btn svg {
	color: #fff
}

.xun-image-download-btn:hover {
	background: var(--xun-primary, #1677ff)
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-card:hover .xun-image-download-btn {
	opacity: 1;
	transform: translate(-50%, -50%)scale(1)
}

.xun-image-dimensions {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 10;
	opacity: 1;
	letter-spacing: .025em;
	background: rgba(0, 0, 0, .6);
	padding: .25rem .5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: .6875rem;
	font-weight: 500;
	transition: opacity .3s;
	position: absolute;
	bottom: .5rem;
	right: .5rem
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-content {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-card:hover .xun-post-content {
	opacity: 0
}

.xun-image-overlay-enabled.xun-posts-image .xun-post-cat,
.xun-image-overlay-enabled.xun-posts-image .xun-post-thumb-stats,
.xun-image-overlay-enabled.xun-posts-image .xun-post-resource-tag {
	display: none
}

@media(max-width:768px) {

	.xun-image-overlay-enabled.xun-posts-image .xun-image-device-tag,
	.xun-image-overlay-enabled.xun-posts-image .xun-image-dimensions {
		opacity: 1
	}

	.xun-image-overlay-enabled.xun-posts-image .xun-image-favorite-btn {
		opacity: 1;
		width: 38px;
		height: 38px;
		transform: scale(1)
	}

	.xun-image-overlay-enabled.xun-posts-image .xun-image-favorite-btn svg {
		min-width: 18px;
		min-height: 18px;
		width: 18px !important;
		height: 18px !important
	}

	.xun-image-overlay-enabled.xun-posts-image .xun-image-download-btn {
		display: none
	}

	.xun-image-overlay-enabled.xun-posts-image .xun-image-device-tag,
	.xun-image-overlay-enabled.xun-posts-image .xun-image-dimensions {
		padding: .125rem .375rem;
		font-size: .625rem
	}
}

.xun-resource-badge {
	color: #fff;
	border-radius: var(--xun-radius, 8px)0 var(--xun-radius-sm, 4px)0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	white-space: nowrap;
	z-index: 10;
	text-overflow: ellipsis;
	letter-spacing: .02em;
	opacity: 1;
	background: rgba(0, 0, 0, .65);
	align-items: center;
	max-width: calc(100% - 1rem);
	padding: .25rem .625rem;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.4;
	transition: opacity .3s;
	display: inline-flex;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden
}

.xun-post-card:hover .xun-resource-badge {
	opacity: 0
}

.xun-resource-badge-free {
	background: linear-gradient(135deg, rgba(34, 197, 94, .9), rgba(22, 163, 74, .9))
}

.xun-resource-badge-paid {
	background: linear-gradient(135deg, rgba(239, 68, 68, .9), rgba(220, 38, 38, .9))
}

.xun-resource-badge-vip_free,
.xun-resource-badge-vip_only,
.xun-resource-badge-permanent {
	background: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(217, 119, 6, .95))
}

.xun-resource-badge-vip_discount {
	background: linear-gradient(135deg, rgba(139, 92, 246, .9), rgba(109, 40, 217, .9))
}

.xun-resource-badge-vip_exclusive,
.xun-resource-badge-vip_exclusive_only {
	background: linear-gradient(135deg, rgba(236, 72, 153, .9), rgba(190, 24, 93, .9))
}

.xun-image-overlay-enabled .xun-resource-badge {
	top: 0;
	left: 0
}

.xun-posts-list-card .xun-resource-badge {
	display: none
}

@media(max-width:768px) {
	.xun-resource-badge {
		padding: .1875rem .5rem;
		font-size: .625rem;
		top: 0;
		left: 0
	}
}

.xun-custom-code-section .xun-posts-container {
	box-sizing: border-box
}

.xun-custom-code-section .xun-posts-code-content {
	min-width: 0;
	max-width: 100%
}

.xun-custom-code-section .xun-posts-code-content>* {
	max-width: 100%
}

.xun-fonts-container {
	box-sizing: border-box
}

.xun-fonts-section .xun-font-thumb,
.xun-posts-font .xun-font-thumb {
	background: var(--color-fill-quaternary, #f5f5f5);
	aspect-ratio: auto
}

.xun-fonts-section .xun-font-thumb-inner,
.xun-posts-font .xun-font-thumb-inner {
	flex-direction: column;
	gap: .5rem;
	padding: .625rem;
	display: flex;
	position: relative
}

.xun-fonts-section .xun-font-thumb-head,
.xun-posts-font .xun-font-thumb-head {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
	background: rgba(255, 255, 255, .78);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .375rem .5rem;
	display: flex
}

.xun-fonts-section .xun-font-thumb-family,
.xun-posts-font .xun-font-thumb-family {
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-size: .8125rem;
	font-weight: 600;
	overflow: hidden
}

.xun-fonts-section .xun-font-thumb-family-empty,
.xun-posts-font .xun-font-thumb-family-empty {
	opacity: .75
}

.xun-fonts-section .xun-font-thumb-badge,
.xun-posts-font .xun-font-thumb-badge {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-fonts-section .xun-font-thumb-samples,
.xun-posts-font .xun-font-thumb-samples {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	display: grid
}

.xun-fonts-section .xun-font-thumb-sample,
.xun-posts-font .xun-font-thumb-sample {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
	background: rgba(255, 255, 255, .7);
	min-width: 0;
	padding: .375rem .5rem;
	overflow: hidden
}

.xun-fonts-section .xun-font-thumb-sample-meta,
.xun-posts-font .xun-font-thumb-sample-meta {
	color: var(--color-text-tertiary);
	margin-bottom: .125rem;
	font-size: .75rem
}

.xun-fonts-section .xun-font-thumb-sample-text,
.xun-posts-font .xun-font-thumb-sample-text {
	font-family: var(--xun-post-font-family, system-ui), -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .8125rem;
	line-height: 1.35;
	overflow: hidden
}

.dark .xun-fonts-section .xun-post-card,
body.dark .xun-fonts-section .xun-post-card {
	border: 1px solid var(--color-bg-layout);
	box-shadow: none
}

.dark .xun-fonts-section .xun-font-thumb,
body.dark .xun-fonts-section .xun-font-thumb,
.dark .xun-posts-font .xun-font-thumb,
body.dark .xun-posts-font .xun-font-thumb {
	background: var(--color-bg-layout)
}

.dark .xun-fonts-section .xun-font-thumb-head,
body.dark .xun-fonts-section .xun-font-thumb-head,
.dark .xun-posts-font .xun-font-thumb-head,
body.dark .xun-posts-font .xun-font-thumb-head,
.dark .xun-fonts-section .xun-font-thumb-sample,
body.dark .xun-fonts-section .xun-font-thumb-sample,
.dark .xun-posts-font .xun-font-thumb-sample,
body.dark .xun-posts-font .xun-font-thumb-sample {
	background: var(--color-fill-quaternary);
	border-color: var(--color-bg-layout)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-fonts-section .xun-post-card {
		border: 1px solid var(--color-bg-layout);
		box-shadow: none
	}

	:root:not(.light) .xun-fonts-section .xun-font-thumb,
	:root:not(.light) .xun-posts-font .xun-font-thumb {
		background: var(--color-bg-layout)
	}

	:root:not(.light) .xun-fonts-section .xun-font-thumb-head,
	:root:not(.light) .xun-posts-font .xun-font-thumb-head,
	:root:not(.light) .xun-fonts-section .xun-font-thumb-sample,
	:root:not(.light) .xun-posts-font .xun-font-thumb-sample {
		background: var(--color-fill-quaternary);
		border-color: var(--color-bg-layout)
	}
}

.xun-featured-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-featured-header {
	border-bottom: 1px solid var(--color-border-secondary, #e5e5e5);
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	display: flex
}

.xun-featured-header-left {
	flex-wrap: wrap;
	flex: 1;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-featured-title {
	color: var(--color-text, #171717);
	margin: 0;
	padding-left: .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative
}

.xun-featured-title:before {
	content: "";
	background: var(--xun-primary, #1677ff);
	border-radius: 2px;
	width: 3px;
	height: 1.25rem;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-featured-subtitle {
	color: var(--color-text-tertiary, #737373);
	text-align: right;
	margin: 0 0 0 auto;
	padding-left: 0;
	font-size: .875rem
}

.xun-featured-header-right {
	align-items: center;
	display: flex
}

.xun-featured-more-link {
	color: var(--color-text-tertiary, #737373);
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-featured-more-link:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-featured-more-link svg {
	transition: transform .2s
}

.xun-featured-more-link:hover svg {
	transform: translate(3px)
}

.xun-featured-footer {
	justify-content: center;
	margin-top: 1.5rem;
	display: flex
}

.xun-featured-more-btn {
	color: var(--color-text-secondary, #525252);
	background: var(--color-fill-quaternary, #f5f5f5);
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	padding: .625rem 1.5rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-featured-more-btn:hover {
	color: var(--xun-primary, #1677ff);
	border-color: var(--xun-primary, #1677ff);
	background: #f0f7ff
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-featured-more-btn:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-featured-more-btn:hover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)5%, var(--color-bg-container, #fff))
		}
	}
}

.xun-featured-more-btn svg {
	transition: transform .2s
}

.xun-featured-more-btn:hover svg {
	transform: translate(3px)
}

.xun-featured-carousel {
	position: relative
}

.xun-featured-swiper {
	padding: .5rem 0;
	position: relative;
	overflow: hidden
}

.xun-featured-swiper .swiper-slide {
	height: auto
}

.xun-featured-swiper .xun-post-card,
.xun-featured-swiper .xun-post-card-link {
	height: 100%
}

.xun-featured-swiper .swiper-button-prev,
.xun-featured-swiper .swiper-button-next {
	background: var(--color-bg-container, #fff);
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-text-secondary, #525252);
	box-shadow: var(--shadow-sm);
	opacity: 0;
	z-index: 10;
	cursor: pointer;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin-top: 0;
	transition: opacity .3s, background-color .3s, transform .2s, color .2s;
	display: flex;
	position: absolute;
	top: 35%;
	transform: translateY(-50%)
}

.xun-featured-swiper[data-marquee=true] .swiper-button-prev,
.xun-featured-swiper[data-marquee=true] .swiper-button-next {
	display: none !important
}

.xun-featured-swiper .swiper-button-prev {
	left: .5rem
}

.xun-featured-swiper .swiper-button-next {
	right: .5rem
}

.xun-featured-swiper .swiper-button-prev:after,
.xun-featured-swiper .swiper-button-next:after {
	font-family: swiper-icons;
	font-size: .75rem;
	font-weight: 600
}

.xun-featured-swiper .swiper-button-prev:after {
	content: "prev"
}

.xun-featured-swiper .swiper-button-next:after {
	content: "next"
}

.xun-featured-swiper:hover .swiper-button-prev,
.xun-featured-swiper:hover .swiper-button-next {
	opacity: 1
}

.xun-featured-swiper .swiper-button-prev:hover,
.xun-featured-swiper .swiper-button-next:hover {
	background: var(--xun-primary, #1677ff);
	color: #fff;
	transform: translateY(-50%)scale(1.05)
}

.xun-featured-swiper .swiper-button-disabled {
	cursor: not-allowed;
	opacity: .3 !important
}

.xun-featured-swiper .swiper-button-disabled:hover {
	background: var(--color-bg-container, #fff);
	color: var(--color-text-secondary, #525252);
	transform: translateY(-50%)
}

.xun-featured-swiper .swiper-pagination {
	text-align: center;
	margin-top: 1rem;
	position: relative;
	bottom: auto
}

.xun-featured-swiper .swiper-pagination-bullet {
	background: var(--color-fill-secondary, #d4d4d4);
	opacity: 1;
	width: 8px;
	height: 8px;
	transition: all .2s
}

.xun-featured-swiper .swiper-pagination-bullet-active {
	background: var(--xun-primary, #1677ff);
	border-radius: 4px;
	width: 24px
}

@media(max-width:768px) {
	.xun-featured-section {
		padding-left: .5rem;
		padding-right: .5rem
	}

	.xun-featured-section .xun-featured-header.xun-posts-header {
		grid-template-rows: auto auto;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: .25rem .5rem;
		flex-direction: unset !important;
		display: grid !important
	}

	.xun-featured-section .xun-featured-header-left {
		display: contents
	}

	.xun-featured-section .xun-featured-title {
		grid-area: 1/1;
		font-size: 1.125rem
	}

	.xun-featured-section .xun-featured-subtitle {
		grid-area: 2/1/auto/-1;
		font-size: .8125rem
	}

	.xun-featured-section .xun-featured-header-right {
		grid-area: 1/2;
		justify-self: end
	}

	.xun-featured-swiper .swiper-button-prev,
	.xun-featured-swiper .swiper-button-next {
		opacity: 1;
		width: 2rem;
		height: 2rem
	}

	.xun-featured-swiper .swiper-button-prev:after,
	.xun-featured-swiper .swiper-button-next:after {
		font-size: .625rem
	}
}

@media(max-width:480px) {
	.xun-featured-more-btn {
		justify-content: center;
		width: 100%
	}
}

.xun-featured-cats-section {
	padding: .5rem 0
}

.xun-featured-cats-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-featured-cats-header {
	border-bottom: 1px solid var(--color-border-secondary, #e5e5e5);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	display: flex
}

.xun-featured-cats-title {
	color: var(--color-text, #171717);
	margin: 0;
	padding-left: .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative
}

.xun-featured-cats-title:before {
	content: "";
	background: var(--xun-primary, #1677ff);
	border-radius: 2px;
	width: 3px;
	height: 1.25rem;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-featured-cats-subtitle {
	color: var(--color-text-tertiary, #737373);
	text-align: right;
	margin: 0 0 0 auto;
	font-size: .875rem
}

.xun-featured-cats-grid {
	grid-template-columns: repeat(var(--featured-cats-count, 4), 1fr);
	gap: .5rem;
	display: grid
}

@media(min-width:1024px) {
	.xun-featured-cats-grid[style*="--featured-cats-count: 1"] {
		grid-template-columns: 1fr;
		max-width: 300px
	}

	.xun-featured-cats-grid[style*="--featured-cats-count: 2"] {
		grid-template-columns: repeat(2, 1fr);
		max-width: 620px
	}

	.xun-featured-cats-grid[style*="--featured-cats-count: 3"] {
		grid-template-columns: repeat(3, 1fr);
		max-width: 940px
	}
}

.xun-featured-cat-card {
	flex-direction: column;
	height: 100%;
	display: flex
}

.xun-featured-cat-card:not(.card) {
	background: var(--color-bg-container, #fff);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-xs);
	overflow: hidden
}

.xun-featured-cat-header {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	padding: 1rem
}

.xun-featured-cat-title-wrap {
	align-items: center;
	gap: .5rem;
	margin-bottom: .5rem;
	display: flex
}

.xun-featured-cat-title {
	color: var(--color-text, #171717);
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden
}

.xun-featured-cat-desc {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-featured-cat-posts {
	flex: 1;
	padding: .5rem 0
}

.xun-featured-cat-post-item {
	color: inherit;
	align-items: center;
	gap: .75rem;
	padding: .625rem 1rem;
	text-decoration: none;
	transition: background-color .2s;
	display: flex
}

.xun-featured-cat-post-serial {
	width: 20px;
	height: 20px;
	color: var(--color-text-quaternary, #a3a3a3);
	background: var(--color-fill-tertiary, #f5f5f5);
	border-radius: var(--xun-radius-sm, 4px);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	font-size: .75rem;
	font-weight: 600;
	display: inline-flex
}

.xun-featured-cat-post-item:first-child .xun-featured-cat-post-serial {
	color: #fff;
	background: #f43f5e
}

.xun-featured-cat-post-item:nth-child(2) .xun-featured-cat-post-serial {
	color: #fff;
	background: #f97316
}

.xun-featured-cat-post-item:nth-child(3) .xun-featured-cat-post-serial {
	color: #fff;
	background: #eab308
}

.xun-featured-cat-post-item:hover {
	background-color: rgba(22, 119, 255, .08)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-featured-cat-post-item:hover {
		background-color: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-featured-cat-post-item:hover {
			background-color: color-mix(in srgb, var(--xun-primary, #1677ff)8%, transparent)
		}
	}
}

.xun-featured-cat-post-item:hover .xun-featured-cat-post-title {
	color: var(--xun-primary, #1677ff)
}

.xun-featured-cat-post-thumb {
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-fill-tertiary, #f5f5f5);
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden
}

.xun-featured-cat-post-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-featured-cat-post-info {
	flex-direction: column;
	flex: 1;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-featured-cat-post-title {
	color: var(--color-text, #262626);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-featured-cat-post-tags {
	flex-wrap: wrap;
	gap: .375rem;
	display: flex
}

.xun-featured-cat-post-tag {
	color: var(--color-text-tertiary, #737373);
	background: var(--color-fill-tertiary, #f5f5f5);
	border-radius: 2px;
	padding: .125rem .375rem;
	font-size: .6875rem;
	line-height: 1.4;
	display: inline-block
}

.xun-featured-cat-empty {
	color: var(--color-text-quaternary, #a3a3a3);
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	font-size: .875rem;
	display: flex
}

.xun-featured-cat-empty p {
	margin: 0
}

.xun-featured-cat-footer {
	border-top: 1px solid var(--color-border-secondary, #f0f0f0);
	margin-top: auto;
	padding: .75rem 1rem
}

.xun-featured-cat-more-btn {
	width: 100%;
	color: var(--xun-primary, #1677ff);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: #f0f7ff;
	border: none;
	justify-content: center;
	align-items: center;
	gap: .25rem;
	padding: .5rem 1rem;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-featured-cat-more-btn {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-featured-cat-more-btn {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)8%, var(--color-bg-container))
		}
	}
}

.xun-featured-cat-more-btn:hover {
	background: #e0efff
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-featured-cat-more-btn:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-featured-cat-more-btn:hover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)12%, var(--color-bg-container))
		}
	}
}

.xun-featured-cat-more-btn svg {
	flex-shrink: 0;
	transition: transform .2s
}

.xun-featured-cat-more-btn:hover svg {
	transform: translate(2px)
}

@media(max-width:1024px) {
	.xun-featured-cats-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-featured-cats-grid[style*="--featured-cats-count: 1"] {
		grid-template-columns: 1fr;
		max-width: none
	}
}

@media(max-width:768px) {
	.xun-featured-cats-section {
		padding: 1.5rem .5rem
	}

	.xun-featured-cats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .75rem
	}

	.xun-featured-cat-header {
		padding: .75rem
	}

	.xun-featured-cat-title {
		font-size: .9375rem
	}

	.xun-featured-cat-desc {
		-webkit-line-clamp: 1;
		font-size: .75rem
	}

	.xun-featured-cat-post-item {
		gap: .5rem;
		padding: .5rem .75rem
	}

	.xun-featured-cat-post-thumb {
		width: 40px;
		height: 40px
	}

	.xun-featured-cat-post-title {
		-webkit-line-clamp: 1;
		font-size: .8125rem
	}

	.xun-featured-cat-post-tags {
		display: none
	}

	.xun-featured-cat-footer {
		padding: .5rem .75rem
	}

	.xun-featured-cat-more-btn {
		padding: .375rem .75rem;
		font-size: .75rem
	}
}

@media(max-width:480px) {
	.xun-featured-cats-grid {
		grid-template-columns: 1fr
	}

	.xun-featured-cat-card {
		flex-flow: wrap
	}

	.xun-featured-cat-header {
		border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
		width: 100%
	}

	.xun-featured-cat-posts,
	.xun-featured-cat-footer {
		width: 100%
	}
}

.xun-category-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--cat-color, var(--xun-primary));
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 2.5rem;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-category-header {
		background: linear-gradient(135deg, var(--cat-color, var(--xun-primary))0%, var(--cat-color, var(--xun-primary))100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-category-header {
			background: linear-gradient(135deg, var(--cat-color, var(--xun-primary))0%, color-mix(in srgb, var(--cat-color, var(--xun-primary))80%, #000)100%)
		}
	}
}

.xun-category-cover {
	z-index: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-category-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-category-cover-overlay {
	background: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3));
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-category-info {
	z-index: 1;
	color: #fff;
	text-align: center;
	padding: 2.5rem 2rem 1rem;
	position: relative
}

.xun-hero-waves {
	pointer-events: none;
	width: 100%;
	height: 80px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden
}

.xun-hero-wave {
	transform-origin: bottom;
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-size: 25% 100%;
	width: 400%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0
}

.xun-hero-wave--1 {
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
	animation: 20s linear infinite heroWaveMove
}

.xun-hero-wave--2 {
	z-index: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.35'/%3E%3C/svg%3E");
	animation: 15s linear -5s infinite heroWaveMove
}

.xun-hero-wave--3 {
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E");
	animation: 10s linear -2s infinite heroWaveMove
}

@keyframes heroWaveMove {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(-25%)
	}
}

.xun-category-info.has-cover {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	display: flex
}

.xun-category-icon {
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	display: inline-flex
}

.xun-category-title {
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-category-desc {
	color: #fff;
	text-align: center;
	max-width: 600px;
	margin: 0 auto 1rem;
	font-size: .95rem;
	line-height: 1.6
}

.xun-category-meta {
	color: #fff;
	font-size: .875rem
}

.xun-category-count {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-subcats-nav {
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
	display: flex
}

.xun-subcat-item {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius-sm, 6px);
	align-items: center;
	gap: .375rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-subcat-item:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-subcat-item.active {
	color: #fff;
	background: var(--xun-primary)
}

.xun-subcat-count {
	background: rgba(0, 0, 0, .1);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .375rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-subcat-item.active .xun-subcat-count {
	background: rgba(255, 255, 255, .2)
}

.xun-archive-header {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	display: flex
}

.xun-archive-title .page-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-pagination {
	justify-content: center;
	margin-top: 2rem;
	display: flex
}

.xun-pagination .screen-reader-text {
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden
}

.xun-pagination .nav-links {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-pagination .page-numbers {
	min-width: 2.25rem;
	height: 2.25rem;
	color: var(--color-text-secondary);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	justify-content: center;
	align-items: center;
	padding: 0 .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-pagination .page-numbers:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-pagination .page-numbers.current {
	color: #fff;
	background: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-category-header--transparent {
	--header-height: 64px;
	margin-top: -64px;
	padding-top: calc(64px + 2.5rem)
}

.xun-category-header--transparent .xun-category-info {
	padding-top: 2.5rem
}

@media(max-width:767px) {
	.xun-category-header--transparent {
		--header-height: 56px;
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-category-header--transparent .xun-category-info {
		padding-top: 2rem
	}
}

.site-main>.xun-category-header+.xun-layout-wrapper {
	padding-top: 0
}

.xun-posts-section .xun-archive-posts {
	display: block !important
}

.xun-posts-section .xun-archive-posts .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 4), 1fr);
	gap: .5rem;
	width: 100%;
	display: grid !important
}

.xun-posts-section .xun-archive-posts .xun-posts-grid>.xun-no-posts {
	grid-column: 1/-1
}

.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-posts-grid>.xun-no-posts {
	column-span: all;
	width: 100%
}

.xun-posts-section .xun-archive-posts.xun-posts-list .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 1), 1fr);
	gap: 1rem
}

.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-posts-grid {
	column-count: var(--pc-columns, 4);
	column-gap: 1.25rem;
	display: block !important
}

@media(max-width:768px) {
	.xun-posts-section .xun-archive-posts .xun-posts-grid {
		gap: .75rem;
		grid-template-columns: repeat(var(--mobile-columns, 2), 1fr) !important
	}

	.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-posts-grid {
		column-gap: .75rem;
		column-count: var(--mobile-columns, 2) !important
	}

	.xun-posts-section .xun-archive-posts.xun-posts-list .xun-posts-grid {
		grid-template-columns: repeat(var(--mobile-columns, 1), 1fr) !important
	}

	.xun-posts-section .xun-archive-posts.xun-posts-image .xun-post-content {
		opacity: 1;
		padding: .5rem;
		transform: translateY(0)
	}

	.xun-posts-section .xun-archive-posts.xun-posts-image .xun-post-card-title {
		-webkit-line-clamp: 1;
		margin-bottom: .25rem;
		font-size: .8125rem
	}

	.xun-posts-section .xun-archive-posts.xun-posts-image .xun-post-meta-right {
		display: none
	}

	.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-post-content {
		opacity: 1;
		padding: .5rem;
		transform: translateY(0)
	}

	.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-post-card-title {
		-webkit-line-clamp: 1;
		margin-bottom: .25rem;
		font-size: .8125rem
	}

	.xun-posts-section .xun-archive-posts.xun-posts-waterfall .xun-post-meta-right {
		display: none
	}
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-thumb {
	--xun-thumb-border-width: 6px
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-content {
	padding: .875rem
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-card-title {
	font-size: .875rem
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-excerpt {
	margin-bottom: .5rem;
	padding: .375rem .5rem
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-meta {
	font-size: .6875rem
}

.xun-archive-posts[style*="--pc-columns: 4"] .xun-post-avatar img {
	width: 20px;
	height: 20px
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-thumb {
	--xun-thumb-border-width: 5px
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-content {
	padding: .75rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-card-title {
	font-size: .8125rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-excerpt {
	margin-bottom: .375rem;
	padding: .25rem .375rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-excerpt-text {
	font-size: .6875rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-meta {
	gap: .25rem;
	font-size: .625rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-meta-right {
	gap: .5rem
}

.xun-archive-posts[style*="--pc-columns: 5"] .xun-post-tag {
	font-size: .625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-thumb,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-thumb,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-thumb {
	--xun-thumb-border-width: 4px
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-content,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-content,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-content {
	padding: .625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-card-title,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-card-title,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-card-title {
	font-size: .75rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-excerpt,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-excerpt,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-excerpt {
	margin-bottom: .375rem;
	padding: .25rem .375rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-excerpt-text,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-excerpt-text,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-excerpt-text {
	font-size: .625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-meta,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-meta,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-meta {
	gap: .25rem;
	font-size: .5625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-avatar img,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-avatar img,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-avatar img {
	width: 16px;
	height: 16px
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-meta-right,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-meta-right,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-meta-right {
	gap: .375rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-tag,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-tag,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-tag {
	font-size: .5625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-cat,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-cat,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-cat,
.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-resource-tag,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-resource-tag,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-resource-tag {
	padding: .125rem .375rem;
	font-size: .625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-post-stat,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-post-stat,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-post-stat {
	padding: .125rem .375rem;
	font-size: .5625rem
}

.xun-archive-posts[style*="--pc-columns: 6"] .xun-resource-badge,
.xun-archive-posts[style*="--pc-columns: 7"] .xun-resource-badge,
.xun-archive-posts[style*="--pc-columns: 8"] .xun-resource-badge {
	padding: .125rem .5rem;
	font-size: .5625rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 2"] .xun-post-thumb {
	width: 180px
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 2"] .xun-post-content {
	padding: .875rem 1rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 2"] .xun-post-card-title {
	font-size: .9375rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-thumb,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-thumb {
	width: 140px
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-content,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-content {
	padding: .75rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-card-title,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-card-title {
	margin-bottom: .375rem;
	font-size: .875rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-excerpt,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-excerpt {
	margin-bottom: .5rem;
	padding: .375rem .5rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-excerpt-text,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-meta,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-meta {
	font-size: .6875rem
}

.xun-archive-posts.xun-posts-list[style*="--pc-columns: 3"] .xun-post-avatar img,
.xun-archive-posts.xun-posts-list[style*="--pc-columns: 4"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-card {
	margin-top: 2rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-card-link {
	gap: 1rem;
	min-height: 150px;
	padding: .875rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-thumb {
	width: 140px;
	margin-top: -2.75rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-card-title {
	font-size: .9375rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-excerpt-text {
	font-size: .75rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-meta {
	font-size: .6875rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 3"] .xun-post-avatar img {
	width: 18px;
	height: 18px
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-posts-grid,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-posts-grid,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-posts-grid {
	gap: 1rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-card,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-card,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-card {
	margin-top: 1.5rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-card-link,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-card-link,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-card-link {
	gap: .75rem;
	min-height: 120px;
	padding: .75rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-thumb,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-thumb,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-thumb {
	width: 100px;
	margin-top: -2rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-card-title,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-card-title,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-card-title {
	margin-bottom: .375rem;
	font-size: .8125rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-excerpt,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-excerpt,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-excerpt {
	margin-top: .25rem;
	margin-bottom: .5rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-excerpt-text,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-excerpt-text,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-excerpt-text {
	font-size: .6875rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-meta,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-meta,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-meta {
	padding-top: .375rem;
	font-size: .625rem
}

.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 4"] .xun-post-avatar img,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 5"] .xun-post-avatar img,
.xun-archive-posts.xun-posts-list-card[style*="--pc-columns: 6"] .xun-post-avatar img {
	width: 16px;
	height: 16px
}

.xun-pagination .page-numbers.dots {
	background: 0 0;
	border: none
}

.xun-pagination .prev,
.xun-pagination .next {
	padding: 0 .5rem
}

.xun-no-posts {
	text-align: center;
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-sm);
	padding: 4rem 2rem
}

.xun-no-posts-icon {
	color: var(--color-text-tertiary);
	justify-content: center;
	margin-bottom: 1.5rem;
	display: flex
}

.xun-no-posts-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-no-posts-desc {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .95rem
}

@media(max-width:768px) {
	.xun-category-info {
		padding: 2rem 1.5rem
	}

	.xun-category-title {
		font-size: 1.5rem
	}

	.xun-category-icon {
		width: 48px;
		height: 48px;
		font-size: 1.25rem
	}

	.xun-subcats-nav {
		gap: .375rem;
		padding: .75rem
	}

	.xun-subcat-item {
		padding: .375rem .75rem;
		font-size: .8125rem
	}

	.xun-archive-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem
	}

	.xun-pagination .page-numbers {
		min-width: 2rem;
		height: 2rem;
		padding: 0 .5rem;
		font-size: .8125rem
	}

	.xun-no-posts {
		padding: 3rem 1.5rem
	}
}

.xun-archive-filter-wrapper {
	z-index: 10;
	margin-top: -1rem;
	margin-bottom: 0;
	position: relative
}

.xun-archive-filter {
	margin-bottom: 1rem
}

.xun-archive-filter-wrapper .xun-archive-filter {
	margin-bottom: 0
}

.xun-archive-filter-inner {
	padding: 1rem
}

.xun-filter-tabs,
.xun-filter-cats {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-filter-group {
	align-items: flex-start;
	gap: .75rem;
	display: flex
}

.xun-filter-label {
	color: var(--color-text-secondary);
	flex-shrink: 0;
	padding: .375rem 0;
	font-size: .875rem;
	font-weight: 500
}

.xun-filter-items {
	flex-wrap: wrap;
	flex: 1;
	gap: .5rem;
	display: flex
}

.xun-filter-items--scrollable {
	scrollbar-width: thin;
	scrollbar-color: var(--color-border)transparent;
	flex-wrap: nowrap;
	padding-bottom: .25rem;
	overflow-x: auto
}

.xun-filter-items--scrollable::-webkit-scrollbar {
	height: 4px
}

.xun-filter-items--scrollable::-webkit-scrollbar-track {
	background: 0 0
}

.xun-filter-items--scrollable::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 2px
}

.xun-filter-item {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius-sm, 6px);
	white-space: nowrap;
	cursor: pointer;
	align-items: center;
	gap: .25rem;
	padding: .375rem .75rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-filter-item:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-filter-item.active {
	color: #fff;
	background: var(--xun-primary, var(--color-primary))
}

.xun-filter-count {
	background: rgba(0, 0, 0, .1);
	border-radius: 8px;
	justify-content: center;
	align-items: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 .25rem;
	font-size: .6875rem;
	display: inline-flex
}

.xun-filter-item.active .xun-filter-count {
	background: rgba(255, 255, 255, .2)
}

.xun-archive-filter--loading {
	pointer-events: none;
	position: relative
}

.xun-archive-filter--loading:after {
	content: "";
	background: rgba(255, 255, 255, .7);
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

@media(max-width:768px) {
	.xun-archive-filter-wrapper {
		margin-top: -.5rem;
		margin-bottom: 1rem
	}

	.xun-archive-filter-inner {
		padding: .75rem
	}

	.xun-filter-tabs,
	.xun-filter-cats {
		gap: .5rem
	}

	.xun-filter-group {
		flex-direction: column;
		gap: .375rem
	}

	.xun-filter-label {
		min-width: auto;
		padding: 0
	}

	.xun-filter-items {
		width: 100%
	}

	.xun-filter-item {
		padding: .3125rem .625rem;
		font-size: .75rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-hero-wave--1 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.5'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-hero-wave--2 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.35'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-hero-wave--3 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.2'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-category-header {
		background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), var(--cat-color, var(--xun-primary))
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-category-header {
			background: linear-gradient(135deg, var(--cat-color, var(--xun-primary))0%, var(--cat-color, var(--xun-primary))100%)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-category-header {
				background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--xun-primary))80%, #000), color-mix(in srgb, var(--cat-color, var(--xun-primary))50%, #000))
			}
		}
	}
}

.dark .xun-hero-wave--1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.5'/%3E%3C/svg%3E")
}

.dark .xun-hero-wave--2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.35'/%3E%3C/svg%3E")
}

.dark .xun-hero-wave--3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.2'/%3E%3C/svg%3E")
}

.dark .xun-category-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), var(--cat-color, var(--xun-primary))
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-category-header {
		background: linear-gradient(135deg, var(--cat-color, var(--xun-primary))0%, var(--cat-color, var(--xun-primary))100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-category-header {
			background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--xun-primary))80%, #000), color-mix(in srgb, var(--cat-color, var(--xun-primary))50%, #000))
		}
	}
}

.xun-community-layout.xun-community-forum {
	grid-template-columns: minmax(200px, 240px) 1fr;
	align-items: start;
	gap: .5rem;
	display: grid
}

.xun-community-main {
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-community-slider-section {
	padding-top: 0
}

.xun-community-slider-section .xun-slider-container {
	max-width: 100%;
	padding: 0
}

.xun-community-sidebar {
	flex-direction: column;
	gap: .5rem;
	height: fit-content;
	transition: top .3s;
	display: flex;
	position: sticky;
	top: 80px
}

.xun-community-cats-header {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	display: flex
}

.xun-community-cats-title {
	color: var(--color-text, #262626);
	border-bottom: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-community-cats-create-btn {
	white-space: nowrap;
	flex-shrink: 0
}

.xun-community-cats-nav {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-community-home-header {
	gap: 1rem
}

.xun-community-home-section .xun-community-cats-nav {
	grid-template-columns: repeat(var(--xun-community-boards-columns, 2), minmax(0, 1fr));
	gap: .75rem;
	display: grid
}

.xun-community-home-section .xun-community-board-card {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary, #f0f0f0);
	background: var(--color-bg-container, #fff);
	color: inherit;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1.125rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-community-home-section .xun-community-board-card:hover {
	background: var(--color-primary-bg, #1677ff14);
	border-color: var(--color-primary-border, #1677ff4d)
}

.xun-community-board-card__title {
	color: var(--color-text, #171717);
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	display: flex
}

.xun-community-board-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden
}

.xun-community-board-badge {
	border-radius: var(--radius-full, 999px);
	background: var(--color-fill-tertiary, #f5f5f5);
	color: var(--color-text-tertiary, #737373);
	padding: .15rem .5rem;
	font-size: .75rem;
	font-weight: 500
}

.xun-community-board-card__desc {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-community-board-card__meta {
	color: var(--color-text-quaternary, #a3a3a3);
	justify-content: space-between;
	align-items: center;
	font-size: .75rem;
	display: flex
}

.xun-community-board-enter {
	color: var(--xun-primary, #1677ff)
}

.xun-community-create-board-actions {
	align-items: center
}

.xun-community-create-board-actions .btn {
	box-sizing: border-box;
	height: 2.375rem;
	min-height: 2.375rem;
	padding-block: 0;
	line-height: 1;
	transition-property: background-color, color, box-shadow, border-color, opacity
}

.xun-community-create-board-modal .xun-auth-modal {
	width: 440px;
	max-width: 92vw
}

.xun-community-cats-nav .xun-community-cat-link {
	width: 100%;
	padding-left: calc(1rem + var(--cat-depth, 0)*.75rem);
	justify-content: space-between
}

.xun-community-cats-nav .xun-community-cat-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden
}

.xun-community-stats-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-community-stats-item {
	background: var(--color-fill-quaternary, #fafafa);
	border-radius: var(--radius-sm, 6px);
	justify-content: space-between;
	align-items: center;
	padding: .5rem 1rem;
	display: flex
}

.xun-community-stats-label {
	color: var(--color-text-secondary, #525252);
	font-size: .875rem
}

.xun-community-stats-value {
	color: var(--color-text, #262626);
	font-size: .875rem;
	font-weight: 600
}

.xun-community-post-badges {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-community-cat-badge {
	border-radius: var(--xun-radius-full);
	background: var(--color-primary-bg, #3b82f61f);
	color: var(--xun-primary, var(--color-primary, #3b82f6));
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.5;
	display: inline-flex
}

.xun-forum-list-header {
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-forum-list-title h2 {
	color: var(--color-text, #262626);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-forum-list-desc {
	color: var(--color-text-tertiary, #737373);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-community-access-actions {
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 1.25rem;
	display: flex
}

.xun-community-access-actions .btn {
	justify-content: center;
	min-width: 6.5rem
}

.xun-community-access-tip {
	color: var(--color-text-tertiary, #737373);
	margin: .75rem 0 0;
	font-size: .875rem
}

.xun-forum-list-actions,
.xun-forum-list-cta {
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-community-board-card {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-community-board-title {
	color: var(--color-text, #262626);
	margin: 0;
	font-size: .95rem;
	font-weight: 600
}

.xun-community-board-content {
	color: var(--color-text-secondary, #525252);
	font-size: .875rem;
	line-height: 1.7
}

.xun-community-board-content p {
	margin: 0 0 .5rem
}

.xun-community-discover-group+.xun-community-discover-group {
	border-top: 1px dashed var(--color-border-secondary, #f0f0f0);
	margin-top: .875rem;
	padding-top: .75rem
}

.xun-community-discover-title {
	color: var(--color-text, #262626);
	align-items: center;
	gap: .375rem;
	margin: 0 0 .625rem;
	font-size: .8125rem;
	font-weight: 600;
	display: flex
}

.xun-community-discover-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px
}

.xun-community-discover-icon--hot {
	color: #ef4444
}

.xun-community-discover-icon--featured {
	color: #f59e0b
}

.xun-community-discover-icon--reply {
	color: #3b82f6
}

.xun-community-discover-list {
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-community-discover-item {
	border-radius: var(--radius-sm, 4px);
	align-items: center;
	gap: .5rem;
	padding: .375rem 0;
	transition: background .15s;
	display: flex
}

.xun-community-discover-item:hover {
	background: var(--color-fill-quaternary, #fafafa);
	margin-inline: -.375rem;
	padding-inline: .375rem
}

.xun-community-discover-rank {
	width: 18px;
	height: 18px;
	color: var(--color-text-tertiary, #737373);
	background: var(--color-fill-quaternary, #f5f5f5);
	border-radius: var(--radius-sm, 4px);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	display: inline-flex
}

.xun-community-discover-rank--top {
	color: #fff;
	background: linear-gradient(135deg, #f59e0b, #ef4444)
}

.xun-community-discover-item[data-rank="1"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #fbbf24, #f59e0b)
}

.xun-community-discover-item[data-rank="2"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #94a3b8, #64748b)
}

.xun-community-discover-item[data-rank="3"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #d97706, #b45309)
}

.xun-community-discover-link {
	min-width: 0;
	color: var(--color-text-secondary, #525252);
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-size: .8125rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s;
	overflow: hidden
}

.xun-community-discover-item:hover .xun-community-discover-link {
	color: var(--xun-primary, var(--color-primary, #3b82f6))
}

.xun-community-discover-empty {
	color: var(--color-text-quaternary, #8c8c8c);
	padding: .5rem 0;
	font-size: .75rem
}

.xun-community-active-authors .xun-community-cats-title {
	align-items: center;
	gap: .375rem;
	display: flex
}

.xun-community-discover-icon--author {
	color: #10b981
}

.xun-community-author-list {
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-community-author-item {
	border-radius: var(--radius-sm, 4px);
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	transition: background .15s;
	display: flex
}

.xun-community-author-item:hover {
	background: var(--color-fill-quaternary, #fafafa);
	margin-inline: -.375rem;
	padding-inline: .375rem
}

.xun-community-author-item[data-rank="1"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #fbbf24, #f59e0b)
}

.xun-community-author-item[data-rank="2"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #94a3b8, #64748b)
}

.xun-community-author-item[data-rank="3"] .xun-community-discover-rank--top {
	background: linear-gradient(135deg, #d97706, #b45309)
}

.xun-community-author-link {
	min-width: 0;
	color: inherit;
	flex: 1;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	display: flex
}

.xun-community-author-link img {
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
	width: 28px;
	height: 28px
}

.xun-community-author-name {
	min-width: 0;
	color: var(--color-text-secondary, #525252);
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-size: .8125rem;
	font-weight: 500;
	transition: color .15s;
	overflow: hidden
}

.xun-community-author-item:hover .xun-community-author-name {
	color: var(--xun-primary, var(--color-primary, #3b82f6))
}

.xun-community-author-count {
	color: #fff;
	background: var(--xun-primary, var(--color-primary, #3b82f6));
	border-radius: var(--radius-full, 9999px);
	white-space: nowrap;
	flex-shrink: 0;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500
}

.xun-community-discover-author {
	color: var(--color-text-secondary, #525252);
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	text-decoration: none;
	display: flex
}

.xun-community-discover-author-name {
	font-weight: 500
}

.xun-community-discover-author-count {
	color: var(--color-text-quaternary, #8c8c8c);
	margin-left: auto;
	font-size: .75rem
}

.xun-community-follow-empty {
	text-align: center;
	padding: 2rem 1.5rem
}

.xun-community-follow-empty-icon {
	color: var(--color-text-tertiary, #737373);
	justify-content: center;
	align-items: center;
	margin-bottom: .75rem;
	display: flex
}

.xun-community-follow-empty-icon svg {
	display: block
}

.xun-community-follow-empty-title {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-community-follow-empty-desc {
	color: var(--color-text-secondary, #525252);
	margin: 0;
	font-size: .875rem
}

.xun-community-follow-empty-actions {
	justify-content: center;
	gap: .75rem;
	margin-top: 1rem;
	display: flex
}

.xun-bbs-follow-btn {
	white-space: nowrap
}

.xun-bbs-follow-btn.xun-bbs-following {
	border-color: var(--color-border-secondary, #e5e7eb)
}

.xun-forum-sort {
	background: var(--color-fill-quaternary, #fafafa);
	border-radius: var(--radius-md, 8px);
	align-items: center;
	gap: .25rem;
	padding: .25rem;
	display: flex
}

.xun-forum-sort-item {
	color: var(--color-text-secondary, #525252);
	border-radius: var(--radius-sm, 6px);
	align-items: center;
	gap: .25rem;
	padding: .375rem .75rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-forum-sort-item:hover {
	color: var(--xun-primary, #3b82f6);
	background: var(--color-bg-container, #fff)
}

.xun-forum-sort-item.active {
	color: var(--xun-primary, #3b82f6);
	background: var(--color-bg-container, #fff);
	box-shadow: var(--shadow-xs);
	font-weight: 500
}

.xun-forum-publish-btn {
	flex-shrink: 0
}

.xun-forum-list {
	flex-direction: column;
	gap: 0;
	display: flex;
	overflow: hidden
}

.xun-community-home-section .xun-forum-list {
	grid-template-columns: repeat(var(--xun-community-posts-columns, 1), minmax(0, 1fr));
	gap: .5rem;
	display: grid
}

.xun-community-home-section .xun-forum-post-card {
	border-bottom: none;
	border: 1px solid var(--color-border-secondary, #f0f0f0);
	border-radius: var(--radius-md, 8px);
	background: var(--color-bg-container, #fff);
	overflow: hidden
}

.xun-community-home-section .xun-forum-post-link {
	padding: 1rem 1.25rem
}

@media(max-width:768px) {
	.xun-community-home-section .xun-community-cats-nav {
		grid-template-columns: repeat(var(--xun-community-boards-columns-mobile, 2), minmax(0, 1fr))
	}

	.xun-community-home-section .xun-forum-list {
		grid-template-columns: repeat(var(--xun-community-posts-columns-mobile, 1), minmax(0, 1fr))
	}
}

.xun-forum-post-card {
	border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
	transition: background .2s;
	position: relative
}

.xun-forum-post-card:last-child {
	border-bottom: none
}

.xun-forum-post-card:hover {
	background: var(--color-fill-quaternary, #fafafa)
}

.xun-forum-post-link {
	color: inherit;
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	display: block
}

.xun-forum-post-body {
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-forum-post-avatar {
	flex-shrink: 0;
	position: relative
}

.xun-forum-post-avatar img {
	object-fit: cover;
	border-radius: 50%;
	width: 44px;
	height: 44px
}

.xun-forum-post-content {
	flex-direction: column;
	flex: 1;
	gap: .375rem;
	min-width: 0;
	display: flex
}

.xun-forum-post-meta {
	color: var(--color-text-quaternary, #a3a3a3);
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	display: flex
}

.xun-forum-post-meta-sep {
	color: var(--color-text-quaternary, #d4d4d4)
}

.xun-forum-post-author {
	color: var(--color-text-secondary, #525252);
	font-weight: 500
}

.xun-forum-post-level-badge {
	color: var(--level-color, var(--xun-primary, #3b82f6));
	background: var(--level-bg-color, #3b82f626);
	border-radius: var(--radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .625rem;
	font-weight: 500;
	display: inline-flex
}

.xun-forum-post-vip-badge {
	color: var(--vip-color, #f59e0b);
	background: var(--vip-bg-color, #f59e0b26);
	border-radius: var(--radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	gap: .25rem;
	padding: .125rem .375rem;
	font-size: .625rem;
	font-weight: 500;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-forum-post-level-badge {
		background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-forum-post-level-badge {
			background: var(--level-bg-color, color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))15%, #fff))
		}
	}

	.xun-forum-post-vip-badge {
		background: var(--vip-bg-color, var(--vip-color, #f59e0b))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-forum-post-vip-badge {
			background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)15%, #fff))
		}
	}
}

.xun-forum-post-vip-badge svg {
	flex-shrink: 0
}

.xun-forum-post-level-badge.xun-level-badge--icon {
	background: 0 0;
	border: none;
	padding: 0
}

.xun-forum-post-level-badge.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 16px;
	max-height: 18px;
	display: block
}

.xun-forum-post-time,
.xun-forum-post-views {
	color: var(--color-text-quaternary, #a3a3a3)
}

.xun-forum-post-title {
	color: var(--color-text, #262626);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-forum-post-card:hover .xun-forum-post-title {
	color: var(--xun-primary, #3b82f6)
}

.xun-forum-post-excerpt {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .875rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-forum-post-footer {
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: .375rem;
	display: flex
}

.xun-forum-post-footer-left {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-forum-post-footer-right {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-forum-post-cat {
	color: var(--xun-primary, #3b82f6);
	background: var(--color-primary-bg, #3b82f61a);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	white-space: nowrap;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-forum-post-cat:hover {
	background: var(--color-primary-bg-hover, #3b82f626)
}

.xun-forum-post-tag {
	border-radius: var(--radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-forum-post-tag--paid {
	color: var(--color-error, #ef4444);
	background: var(--color-error-bg, #ef44441a)
}

.xun-forum-post-tag--vip_free,
.xun-forum-post-tag--vip_only,
.xun-forum-post-tag--permanent {
	color: var(--color-warning-text, #d97706);
	background: var(--color-warning-bg, #f59e0b1a)
}

.xun-forum-post-tag--vip_discount {
	color: #8b5cf6;
	background: rgba(139, 92, 246, .1)
}

.xun-forum-post-tag--vip_exclusive,
.xun-forum-post-tag--vip_exclusive_only {
	color: #ec4899;
	background: rgba(236, 72, 153, .1)
}

.xun-forum-post-badges {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-right: .5rem;
	display: inline-flex
}

.xun-forum-post-badges--single {
	margin-bottom: .5rem;
	margin-right: 0
}

.xun-forum-post-badge {
	border-radius: var(--radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 600;
	display: inline-flex
}

.xun-forum-post-badge--pinned {
	color: var(--color-info, #3b82f6);
	background: var(--color-primary-bg, #3b82f61a)
}

.xun-forum-post-badge--featured {
	color: #f59e0b;
	background: rgba(245, 158, 11, .12)
}

.xun-forum-post-badge--locked {
	color: var(--color-error, #ef4444);
	background: var(--color-error-bg, #ef44441a)
}

.xun-forum-post-stat {
	color: var(--color-text-tertiary, #737373);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-forum-post-stat svg {
	color: var(--color-text-quaternary, #a3a3a3)
}

.xun-forum-post-stat span {
	font-weight: 500
}

@media(max-width:1024px) {
	.xun-community-layout.xun-community-forum {
		grid-template-columns: 200px 1fr
	}
}

@media(max-width:768px) {
	.xun-community-slider-section {
		--slider-height-mobile: clamp(180px, 56vw, 260px)
	}

	.xun-community-slider-section .xun-slider-item {
		height: var(--slider-height-mobile)
	}

	.xun-community-slider-section .xun-slider-image {
		object-fit: cover
	}

	.xun-community-slider-section .swiper-button-prev,
	.xun-community-slider-section .swiper-button-next {
		display: none
	}

	.xun-community-slider-section .swiper-pagination {
		bottom: .5rem
	}

	.xun-community-layout.xun-community-forum {
		grid-template-columns: 1fr
	}

	.xun-community-sidebar {
		flex-direction: column;
		order: -1;
		gap: .75rem;
		position: static;
		overflow: visible
	}

	.xun-community-sidebar>* {
		width: 100%
	}

	.xun-community-cats {
		flex-shrink: 0;
		min-width: 0
	}

	.xun-community-cats-header {
		display: none
	}

	.xun-community-cats-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .5rem;
		display: grid
	}

	.xun-community-cats-nav .xun-subcat-item {
		flex-shrink: 0;
		justify-content: space-between;
		padding: .5rem
	}

	.xun-community-cats-nav .xun-community-cat-link {
		width: 100%;
		padding-left: .75rem
	}

	.xun-community-stats,
	.xun-community-discover,
	.xun-community-active-authors {
		display: none
	}

	.xun-forum-list-header {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		padding: .875rem 1rem
	}

	.xun-forum-list-actions {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: .5rem
	}

	.xun-forum-sort {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex: auto;
		min-width: 0;
		overflow-x: auto
	}

	.xun-forum-sort::-webkit-scrollbar {
		display: none
	}

	.xun-forum-list-cta {
		white-space: nowrap;
		flex: none;
		align-items: center;
		gap: .5rem;
		display: flex
	}

	.xun-forum-sort-item {
		white-space: nowrap;
		flex: none;
		justify-content: center;
		padding: .375rem .5rem;
		font-size: .75rem
	}

	.xun-forum-search-btn,
	.xun-forum-publish-btn,
	.xun-bbs-follow-btn {
		white-space: nowrap;
		flex: none
	}

	.xun-forum-list-actions--term {
		grid-template-rows: auto auto;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: .5rem;
		display: grid
	}

	.xun-forum-list-actions--term .xun-forum-sort {
		grid-area: 2/1;
		align-self: end
	}

	.xun-forum-list-actions--term .xun-forum-list-cta {
		grid-area: 1/2/span 2;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		place-items: center end;
		gap: .5rem;
		display: grid
	}

	.xun-forum-list-actions--term .xun-bbs-follow-btn {
		grid-area: 1/1/auto/-1;
		justify-self: end
	}

	.xun-forum-list-actions--term .xun-forum-search-btn {
		grid-area: 2/1
	}

	.xun-forum-list-actions--term .xun-forum-publish-btn {
		grid-area: 2/2
	}

	.xun-forum-post-link {
		padding: 1rem
	}

	.xun-forum-post-avatar img {
		width: 36px;
		height: 36px
	}

	.xun-forum-post-title {
		font-size: .9375rem
	}

	.xun-forum-post-excerpt {
		-webkit-line-clamp: 2;
		font-size: .8125rem
	}

	.xun-forum-post-meta {
		font-size: .75rem
	}

	.xun-forum-post-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem
	}

	.xun-forum-post-footer-right {
		justify-content: flex-start;
		width: 100%
	}
}

@media(max-width:480px) {
	.xun-forum-list-header {
		padding: .75rem
	}

	.xun-forum-post-link {
		padding: .875rem
	}

	.xun-forum-post-body {
		gap: .75rem
	}

	.xun-forum-post-avatar img {
		width: 32px;
		height: 32px
	}

	.xun-forum-post-title {
		font-size: .875rem
	}

	.xun-forum-sort-item svg {
		display: none
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
		color: var(--color-text-secondary, #a1a1aa);
		box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .7)
	}

	:root:not(.light) .xun-forum-post-card:hover {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-forum-post-level-badge {
		background: var(--level-bg-color, #3b82f60f)
	}

	:root:not(.light) .xun-forum-post-vip-badge {
		background: var(--vip-bg-color, #f59e0b33)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
			color: var(--level-color, var(--xun-primary, #3b82f6))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
				color: color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))45%, var(--color-text-secondary, #a1a1aa))
			}
		}

		:root:not(.light) .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
			box-shadow: none
		}

		:root:not(.light) .xun-forum-post-level-badge {
			background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-forum-post-level-badge {
				background: color-mix(in srgb, var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))12%, var(--color-bg-elevated, #1f1f1f))
			}
		}

		:root:not(.light) .xun-forum-post-vip-badge {
			background: var(--vip-bg-color, var(--vip-color, #f59e0b))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-forum-post-vip-badge {
				background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)20%, var(--color-bg-elevated, #2a2a2a)))
			}
		}
	}
}

.dark .xun-forum-post-card:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-forum-post-level-badge {
	background: var(--level-bg-color, #3b82f60f)
}

.dark .xun-forum-post-vip-badge {
	background: var(--vip-bg-color, #f59e0b33)
}

.dark .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
	color: var(--color-text-secondary, #a1a1aa);
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .7)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
		color: var(--level-color, var(--xun-primary, #3b82f6))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
			color: color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))45%, var(--color-text-secondary, #a1a1aa))
		}
	}

	.dark .xun-forum-post-level-badge:not(.xun-level-badge--icon) {
		box-shadow: none
	}

	.dark .xun-forum-post-level-badge {
		background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-forum-post-level-badge {
			background: color-mix(in srgb, var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))12%, var(--color-bg-elevated, #1f1f1f))
		}
	}

	.dark .xun-forum-post-vip-badge {
		background: var(--vip-bg-color, var(--vip-color, #f59e0b))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-forum-post-vip-badge {
			background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)20%, var(--color-bg-elevated, #2a2a2a)))
		}
	}
}

.xun-special-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--special-color, #3b82f6);
	justify-content: center;
	align-items: center;
	min-height: 280px;
	padding: 3rem 1rem 4rem;
	display: flex;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-special-header {
		background: linear-gradient(135deg, var(--special-color, #3b82f6)0%, var(--special-color, #3b82f6)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-special-header {
			background: linear-gradient(135deg, var(--special-color, #3b82f6)0%, color-mix(in srgb, var(--special-color, #3b82f6)80%, #000)100%)
		}
	}
}

.xun-special-header--transparent {
	--header-height: 64px;
	padding-top: calc(var(--header-height) + 3rem);
	margin-top: 0
}

body.has-transparent-header:not(.has-hero-area) .xun-special-header--transparent {
	margin-top: calc(-1*var(--header-height))
}

.xun-special-cover {
	z-index: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-special-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-special-cover-overlay {
	background: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4));
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-special-info {
	z-index: 1;
	text-align: center;
	color: #fff;
	max-width: 800px;
	position: relative
}

.xun-special-info.has-cover {
	text-shadow: 0 2px 4px #0003
}

.xun-special-badge {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, .2);
	border-radius: 2rem;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1rem;
	padding: .375rem .875rem;
	display: inline-flex
}

.xun-special-icon {
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: .875rem;
	display: flex
}

.xun-special-label {
	font-size: .875rem;
	font-weight: 500
}

.xun-special-title {
	color: #fff;
	margin: 0 0 .75rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-special-subtitle {
	opacity: .9;
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.125rem
}

.xun-special-desc {
	opacity: .85;
	color: #fff;
	margin: 0 0 1rem;
	font-size: .9375rem;
	line-height: 1.6
}

.xun-special-meta {
	justify-content: center;
	align-items: center;
	gap: 1rem;
	font-size: .875rem;
	display: flex
}

.xun-special-status {
	border-radius: 2rem;
	align-items: center;
	padding: .25rem .75rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-special-status--ongoing {
	color: #86efac;
	background: rgba(34, 197, 94, .2)
}

.xun-special-status--completed {
	color: #93c5fd;
	background: rgba(59, 130, 246, .2)
}

.xun-special-status--paused {
	color: #fde047;
	background: rgba(234, 179, 8, .2)
}

.xun-special-count {
	opacity: .9
}

.xun-specials-page-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--xun-primary, #3b82f6);
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 2.5rem;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-specials-page-header {
		background: linear-gradient(135deg, var(--xun-primary, #3b82f6)0%, var(--xun-primary, #3b82f6)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-specials-page-header {
			background: linear-gradient(135deg, var(--xun-primary, #3b82f6)0%, color-mix(in srgb, var(--xun-primary, #3b82f6)80%, #000)100%)
		}
	}
}

.xun-specials-page-info {
	z-index: 1;
	color: #fff;
	text-align: center;
	position: relative
}

.xun-specials-page-header--transparent {
	--header-height: 64px;
	margin-top: -64px;
	padding-top: calc(64px + 2.5rem)
}

.xun-specials-page-header--transparent .xun-specials-page-info {
	padding-top: 2.5rem
}

.site-main>.xun-specials-page-header+.xun-specials-page {
	padding-top: 0
}

.xun-specials-page-icon {
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	display: inline-flex
}

.xun-specials-page-icon svg {
	color: #fff;
	width: 24px;
	height: 24px
}

.xun-specials-page-text {
	max-width: 600px;
	margin: 0 auto
}

.xun-specials-page-title {
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-specials-page-desc {
	color: #fff;
	margin: 0;
	font-size: .95rem
}

.xun-specials-page-desc strong {
	font-weight: 700
}

.xun-specials-page-card {
	margin-bottom: 1rem;
	padding: 1.5rem
}

.xun-specials-page-empty {
	text-align: center;
	padding: 4rem 2rem
}

.xun-specials-page-empty-icon {
	background: var(--color-fill-tertiary, #f5f5f5);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	margin-bottom: 1.5rem;
	display: inline-flex
}

.xun-specials-page-empty-icon svg {
	width: 40px;
	height: 40px;
	color: var(--color-text-quaternary, #a3a3a3)
}

.xun-specials-page-empty-title {
	color: var(--color-text, #171717);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-specials-page-empty-desc {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .875rem
}

.xun-specials-page {
	padding: 2rem 0
}

.xun-specials-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem
}

.xun-specials-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	display: grid
}

.xun-special-card {
	background: var(--color-bg-container, #fff);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-sm);
	flex-direction: column;
	transition: transform .3s, box-shadow .3s;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-special-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px)
}

.xun-special-card-cover {
	aspect-ratio: 16/9;
	position: relative;
	overflow: hidden
}

.xun-special-card-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s
}

.xun-special-card:hover .xun-special-card-cover img {
	transform: scale(1.05)
}

.xun-special-card-overlay {
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	padding: 2rem 1rem 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-special-card-badge {
	background: var(--special-color, #3b82f6);
	color: #fff;
	border-radius: 4px;
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-special-card-content {
	flex: 1;
	padding: 1rem
}

.xun-special-card-title {
	color: var(--color-text, #171717);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-special-card-title a {
	color: inherit;
	text-decoration: none
}

.xun-special-card-title a:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-special-card-excerpt {
	color: var(--color-text-secondary, #525252);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .875rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-special-card-footer {
	border-top: 1px solid var(--color-border-secondary, #f0f0f0);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-special-card-meta {
	color: var(--color-text-tertiary, #737373);
	align-items: center;
	gap: 1rem;
	font-size: .8125rem;
	display: flex
}

.xun-special-card-status {
	border-radius: 2rem;
	padding: .125rem .5rem;
	font-size: .75rem
}

.xun-special-card-status--ongoing {
	color: #16a34a;
	background: rgba(34, 197, 94, .15)
}

.xun-special-card-status--completed {
	color: #2563eb;
	background: rgba(59, 130, 246, .15)
}

.xun-special-card-status--paused {
	color: #ca8a04;
	background: rgba(234, 179, 8, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-special-card-status--ongoing {
		background: rgba(34, 197, 94, .15)
	}

	.xun-special-card-status--completed {
		background: rgba(59, 130, 246, .15)
	}

	.xun-special-card-status--paused {
		background: rgba(234, 179, 8, .15)
	}
}

.xun-post-specials {
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1rem;
	display: flex
}

.xun-post-special-tag {
	color: var(--xun-primary, #1677ff);
	background: rgba(22, 119, 255, .1);
	border-radius: 4px;
	align-items: center;
	gap: .25rem;
	padding: .25rem .625rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: background .2s;
	display: inline-flex
}

.xun-post-special-tag:hover {
	background: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-post-special-tag {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-post-special-tag {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, transparent)
		}
	}

	.xun-post-special-tag:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-post-special-tag:hover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)20%, transparent)
		}
	}
}

.xun-post-special-tag i {
	font-size: .75rem
}

@media(max-width:1024px) {
	.xun-specials-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:768px) {
	.xun-special-header {
		min-height: 220px;
		padding: 2rem 1rem 3rem
	}

	.xun-special-header--transparent {
		--header-height: 56px;
		padding-top: calc(var(--header-height) + 2rem);
		margin-top: 0
	}

	body.has-transparent-header:not(.has-hero-area) .xun-special-header--transparent {
		margin-top: calc(-1*var(--header-height))
	}

	.xun-special-title {
		font-size: 1.5rem
	}

	.xun-special-subtitle {
		font-size: 1rem
	}

	.xun-special-desc {
		font-size: .875rem
	}

	.xun-specials-grid {
		grid-template-columns: 1fr;
		gap: 1rem
	}

	.xun-special-card-cover {
		aspect-ratio: 2
	}

	.xun-specials-page-header {
		padding-bottom: 2rem
	}

	.xun-specials-page-header--transparent {
		--header-height: 56px;
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-specials-page-header--transparent .xun-specials-page-info {
		padding-top: 2rem
	}

	.xun-specials-page-info {
		padding: 2rem 1.5rem 1rem
	}

	.xun-specials-page-icon {
		width: 48px;
		height: 48px
	}

	.xun-specials-page-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-specials-page-title {
		font-size: 1.25rem
	}

	.xun-specials-page-desc {
		font-size: .875rem
	}

	.xun-specials-page-card {
		padding: 1rem
	}

	.xun-specials-page-empty {
		padding: 3rem 1.5rem
	}
}

@media(max-width:480px) {
	.xun-special-header {
		min-height: 180px;
		padding: 1.5rem 1rem 2.5rem
	}

	.xun-special-badge {
		padding: .25rem .625rem
	}

	.xun-special-title {
		font-size: 1.25rem
	}

	.xun-special-meta {
		flex-wrap: wrap;
		gap: .5rem
	}
}

.xun-search-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--search-color, var(--xun-primary));
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 2.5rem;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-search-header {
		background: linear-gradient(135deg, var(--search-color, var(--xun-primary))0%, var(--search-color, var(--xun-primary))100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-search-header {
			background: linear-gradient(135deg, var(--search-color, var(--xun-primary))0%, color-mix(in srgb, var(--search-color, var(--xun-primary))80%, #000)100%)
		}
	}
}

.xun-search-info {
	z-index: 1;
	color: #fff;
	text-align: center;
	padding: 2.5rem 2rem 1rem;
	position: relative
}

.xun-search-icon {
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	display: inline-flex
}

.xun-search-icon svg {
	opacity: .9
}

.xun-search-title {
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-search-keyword {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(255, 255, 255, .2);
	padding: .125rem .5rem
}

.xun-search-meta {
	color: rgba(255, 255, 255, .85);
	font-size: .875rem
}

.xun-search-count strong {
	color: #fff;
	font-weight: 600
}

.xun-search-header--transparent {
	--header-height: 64px;
	margin-top: -64px;
	padding-top: calc(64px + 2.5rem)
}

.xun-search-header--transparent .xun-search-info {
	padding-top: 2.5rem
}

@media(max-width:767px) {
	.xun-search-header--transparent {
		--header-height: 56px;
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-search-header--transparent .xun-search-info {
		padding-top: 2rem
	}
}

.site-main>.xun-search-header+.xun-layout-wrapper {
	padding-top: 0
}

.xun-search-posts {
	display: block !important
}

.xun-search-posts .xun-posts-grid {
	grid-template-columns: repeat(var(--pc-columns, 4), 1fr);
	gap: 1rem;
	width: 100%;
	display: grid !important
}

@media(max-width:768px) {
	.xun-search-posts .xun-posts-grid {
		gap: .75rem;
		grid-template-columns: repeat(var(--mobile-columns, 2), 1fr) !important
	}
}

.xun-search-highlight {
	background: linear-gradient(to bottom, transparent 60%, rgba(var(--xun-primary-rgb, 22, 119, 255), .3)60%);
	color: var(--xun-primary, #1677ff);
	border-radius: 2px;
	padding: 0 .125rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-search-highlight {
		background: linear-gradient(to bottom, transparent 60%, rgba(var(--xun-primary-rgb, 22, 119, 255), .4)60%)
	}
}

.dark .xun-search-highlight {
	background: linear-gradient(to bottom, transparent 60%, rgba(var(--xun-primary-rgb, 22, 119, 255), .4)60%)
}

.xun-search-suggestions {
	background: var(--color-bg-layout);
	border-radius: var(--xun-radius, 8px);
	text-align: left;
	max-width: 400px;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem
}

.xun-search-suggestions-title {
	color: var(--color-text);
	margin: 0 0 .75rem;
	font-size: .9375rem;
	font-weight: 600
}

.xun-search-suggestions-list {
	margin: 0;
	padding: 0 0 0 1.25rem;
	list-style: outside
}

.xun-search-suggestions-list li {
	color: var(--color-text-secondary);
	margin-bottom: .5rem;
	font-size: .875rem;
	line-height: 1.5
}

.xun-search-suggestions-list li:last-child {
	margin-bottom: 0
}

.xun-search-retry {
	max-width: 400px;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto
}

@media(max-width:768px) {
	.xun-search-info {
		padding: 2rem 1.5rem
	}

	.xun-search-icon {
		width: 48px;
		height: 48px;
		font-size: 1.25rem
	}

	.xun-search-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-search-title {
		font-size: 1.5rem
	}

	.xun-search-suggestions {
		padding: 1.25rem
	}
}

.xun-stats {
	background-color: #262626;
	padding: 4rem 0;
	position: relative
}

.xun-stats.has-bg {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover
}

.xun-stats-overlay {
	z-index: 0;
	background: rgba(0, 0, 0, .6);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-stats-container {
	z-index: 1;
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem;
	position: relative
}

.xun-stats-grid {
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	display: flex
}

.xun-stats-item {
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	gap: .75rem;
	min-width: 120px;
	padding: 1rem 1.5rem;
	display: flex
}

.xun-stats-icon {
	background-color: rgba(22, 119, 255, .2);
	border-radius: 50%;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 3.5rem;
	height: 3.5rem;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-stats-icon {
		background-color: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-stats-icon {
			background-color: color-mix(in srgb, var(--xun-primary, #1677ff)20%, transparent)
		}
	}
}

.xun-stats-icon svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--xun-primary, #1677ff)
}

.xun-stats-content {
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-stats-value {
	color: #f5f5f5;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1
}

.xun-stats-label {
	color: #a3a3a3;
	font-size: .875rem
}

.xun-stats-cta {
	flex-direction: column;
	align-items: center;
	margin-top: 2.5rem;
	display: flex
}

.xun-stats-cta-desc {
	color: #d4d4d4;
	text-align: center;
	margin-bottom: 1.25rem;
	font-size: 1.25rem
}

.xun-stats-buttons {
	justify-content: center;
	align-items: center;
	gap: 1rem;
	display: flex
}

@media(max-width:1024px) {
	.xun-stats-grid {
		gap: 1.5rem
	}

	.xun-stats-item {
		padding: 1rem 1.5rem
	}
}

@media(max-width:768px) {
	.xun-stats-grid {
		flex-wrap: nowrap;
		justify-content: space-evenly;
		gap: .5rem
	}

	.xun-stats-item {
		flex: 1;
		min-width: auto;
		padding: .75rem .5rem
	}

	.xun-stats-icon {
		width: 2.75rem;
		height: 2.75rem
	}

	.xun-stats-icon svg {
		width: 1.375rem;
		height: 1.375rem
	}

	.xun-stats-value {
		font-size: 1.5rem
	}

	.xun-stats-label {
		font-size: .75rem
	}
}

@media(max-width:640px) {
	.xun-stats {
		padding: 2.5rem 0
	}

	.xun-stats-container {
		padding: 0 .5rem
	}

	.xun-stats-grid {
		flex-wrap: nowrap;
		justify-content: space-evenly;
		gap: .25rem
	}

	.xun-stats-item {
		flex: 1;
		gap: .5rem;
		min-width: auto;
		padding: .5rem .25rem
	}

	.xun-stats-icon {
		width: 2.25rem;
		height: 2.25rem
	}

	.xun-stats-icon svg {
		width: 1.125rem;
		height: 1.125rem
	}

	.xun-stats-value {
		font-size: 1.25rem
	}

	.xun-stats-label {
		white-space: nowrap;
		font-size: .625rem
	}

	.xun-stats-cta {
		margin-top: 1.5rem
	}

	.xun-stats-cta-desc {
		margin-bottom: 1rem;
		font-size: 1rem
	}

	.xun-stats-buttons {
		gap: .75rem
	}
}

@media(max-width:480px) {
	.xun-stats {
		padding: 2rem 0
	}

	.xun-stats-container {
		padding: 0 .25rem
	}

	.xun-stats-grid {
		gap: 0
	}

	.xun-stats-item {
		gap: .375rem;
		padding: .25rem
	}

	.xun-stats-icon {
		width: 2rem;
		height: 2rem
	}

	.xun-stats-icon svg {
		width: 1rem;
		height: 1rem
	}

	.xun-stats-value {
		font-size: 1.125rem
	}

	.xun-stats-label {
		font-size: .5625rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-stats {
		background-color: #171717
	}
}

.dark .xun-stats {
	background-color: #171717
}

.xun-footer {
	background-color: var(--color-fill-tertiary);
	border-top: 1px solid var(--color-border-secondary);
	color: var(--color-text-secondary);
	margin-top: 0;
	position: relative
}

.xun-footer-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem
}

.xun-footer-links {
	padding: 2.5rem 0 2rem
}

.xun-footer-links-grid {
	grid-template-columns: 1.5fr repeat(4, 1fr) auto;
	gap: 1.5rem;
	display: grid
}

.xun-footer-links-grid[data-columns="1"] {
	grid-template-columns: 1.5fr 1fr auto
}

.xun-footer-links-grid[data-columns="2"] {
	grid-template-columns: 1.5fr repeat(2, 1fr) auto
}

.xun-footer-links-grid[data-columns="3"] {
	grid-template-columns: 1.5fr repeat(3, 1fr) auto
}

.xun-footer-links-grid[data-columns="4"] {
	grid-template-columns: 1.5fr repeat(4, 1fr) auto
}

.xun-footer-links-grid[data-columns="5"] {
	grid-template-columns: 1.5fr repeat(5, 1fr) auto
}

.xun-footer-links-grid[data-columns="6"] {
	grid-template-columns: 1.5fr repeat(6, 1fr) auto
}

.xun-footer-links-grid[data-columns="0"] {
	grid-template-columns: 1.5fr auto
}

.xun-footer-links-col {
	min-width: 0
}

.xun-footer-brand-col {
	grid-column: 1;
	padding-right: 1rem
}

.xun-footer-brand-logo {
	margin-bottom: .75rem
}

.xun-footer-brand-logo img {
	width: auto;
	max-height: 48px
}

.xun-footer-brand-logo .logo-dark {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-footer-brand-logo .logo-light {
		display: none
	}

	:root:not(.light) .xun-footer-brand-logo .logo-dark {
		display: block
	}
}

.dark .xun-footer-brand-logo .logo-light,
html.dark .xun-footer-brand-logo .logo-light {
	display: none
}

.dark .xun-footer-brand-logo .logo-dark,
html.dark .xun-footer-brand-logo .logo-dark {
	display: block
}

.xun-footer-brand-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-footer-brand-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-footer-contact-col {
	grid-column: -1
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col)) {
	grid-template-columns: repeat(4, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="1"] {
	grid-template-columns: 1fr auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="2"] {
	grid-template-columns: repeat(2, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="3"] {
	grid-template-columns: repeat(3, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="5"] {
	grid-template-columns: repeat(5, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="6"] {
	grid-template-columns: repeat(6, 1fr) auto
}

.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="0"] {
	grid-template-columns: auto
}

.xun-footer-links-title {
	color: var(--color-text);
	margin-bottom: 1rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-footer-links-list {
	flex-direction: column;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-footer-links-list li a {
	color: var(--color-text-tertiary);
	font-size: .875rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-block
}

.xun-footer-links-list li a:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-footer-contact {
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-footer-contact-item {
	flex-direction: column;
	flex: 1;
	align-items: center;
	gap: .375rem;
	max-width: 100px;
	display: flex
}

.xun-footer-contact-item:only-child {
	max-width: 120px
}

.xun-footer-contact-item:only-child .xun-footer-contact-qrcode {
	width: 100px;
	height: 100px
}

.xun-footer-contact-item:first-child:nth-last-child(2),
.xun-footer-contact-item:first-child:nth-last-child(2)~.xun-footer-contact-item {
	max-width: 100px
}

.xun-footer-contact-item:first-child:nth-last-child(2) .xun-footer-contact-qrcode,
.xun-footer-contact-item:first-child:nth-last-child(2)~.xun-footer-contact-item .xun-footer-contact-qrcode {
	width: 80px;
	height: 80px
}

.xun-footer-contact-item:first-child:nth-last-child(3),
.xun-footer-contact-item:first-child:nth-last-child(3)~.xun-footer-contact-item {
	max-width: 90px
}

.xun-footer-contact-item:first-child:nth-last-child(3) .xun-footer-contact-qrcode,
.xun-footer-contact-item:first-child:nth-last-child(3)~.xun-footer-contact-item .xun-footer-contact-qrcode {
	width: 72px;
	height: 72px
}

.xun-footer-contact-qrcode {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-elevated);
	width: 72px;
	height: 72px;
	padding: 4px;
	transition: width .2s, height .2s;
	overflow: hidden
}

.xun-footer-contact-qrcode img {
	object-fit: cover;
	border-radius: calc(var(--xun-radius, 8px) - 4px);
	width: 100%;
	height: 100%
}

.xun-footer-contact-label {
	color: var(--color-text-tertiary);
	text-align: center;
	white-space: nowrap;
	font-size: .75rem
}

.xun-footer-bottom {
	padding: 1.5rem 0
}

.xun-footer-bottom-card {
	background-color: var(--color-fill-tertiary);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem 1.5rem
}

.xun-footer-bottom-inner {
	background: 0 0;
	border-radius: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	padding: 0;
	display: flex
}

.xun-footer-copyright {
	color: var(--color-text-secondary);
	font-size: .875rem
}

.xun-footer-meta-card {
	border-top: 1px solid var(--color-border-secondary);
	background: 0 0;
	border-radius: 0;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: .75rem;
	padding: .75rem 0 0;
	display: flex
}

.xun-footer-meta-card.is-alone {
	border-top: 0;
	margin-top: 0;
	padding-top: 0
}

.xun-footer-beian {
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	display: flex
}

.xun-footer-friends {
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-footer-friends-title {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	font-size: .8125rem
}

.xun-footer-friends-list {
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	display: inline-flex
}

.xun-footer-friend-link {
	color: var(--color-text-tertiary);
	align-items: center;
	font-size: .8125rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-footer-friend-link:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-footer-sitemap,
.xun-footer-icp,
.xun-footer-police,
.xun-footer-query-stats {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-footer-sitemap:hover,
.xun-footer-icp:hover,
.xun-footer-police:hover {
	color: var(--xun-primary, #1677ff)
}

.xun-footer-police img {
	width: 1rem;
	height: 1rem
}

@media(max-width:1024px) {
	.xun-footer-links-grid {
		grid-template-columns: 1.2fr repeat(4, 1fr) auto;
		gap: 1rem
	}

	.xun-footer-links-grid[data-columns="1"] {
		grid-template-columns: 1.2fr 1fr auto
	}

	.xun-footer-links-grid[data-columns="2"] {
		grid-template-columns: 1.2fr repeat(2, 1fr) auto
	}

	.xun-footer-links-grid[data-columns="3"] {
		grid-template-columns: 1.2fr repeat(3, 1fr) auto
	}

	.xun-footer-links-grid[data-columns="5"] {
		grid-template-columns: 1.2fr repeat(5, 1fr) auto
	}

	.xun-footer-links-grid[data-columns="6"] {
		grid-template-columns: 1.2fr repeat(6, 1fr) auto
	}

	.xun-footer-links-grid[data-columns="0"] {
		grid-template-columns: 1.2fr auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col)) {
		grid-template-columns: repeat(4, 1fr) auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="1"] {
		grid-template-columns: 1fr auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="2"] {
		grid-template-columns: repeat(2, 1fr) auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="3"] {
		grid-template-columns: repeat(3, 1fr) auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="5"] {
		grid-template-columns: repeat(5, 1fr) auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="6"] {
		grid-template-columns: repeat(6, 1fr) auto
	}

	.xun-footer-links-grid:not(:has(.xun-footer-brand-col))[data-columns="0"] {
		grid-template-columns: auto
	}

	.xun-footer-brand-logo img {
		max-height: 40px
	}

	.xun-footer-brand-title {
		font-size: 1rem
	}

	.xun-footer-brand-desc {
		font-size: .75rem
	}

	.xun-footer-links-title {
		font-size: .9375rem
	}

	.xun-footer-links-list li a {
		font-size: .8125rem
	}

	.xun-footer-contact-qrcode {
		width: 64px;
		height: 64px
	}
}

@media(max-width:768px) {
	.xun-footer-links-col.hide-on-mobile {
		display: none !important
	}

	.xun-footer-links {
		padding: 1.5rem 0 1.25rem
	}

	.xun-footer-links-grid {
		grid-template-columns: 1fr;
		gap: 1rem
	}

	.xun-footer-brand-col {
		display: none
	}

	.xun-footer-links-col:not(.xun-footer-contact-col):not(.xun-footer-brand-col) {
		vertical-align: top;
		width: calc(50% - .5rem);
		display: inline-block
	}

	.xun-footer-contact-col {
		border-top: 1px solid var(--color-fill-tertiary);
		grid-column: 1;
		margin-top: .5rem;
		padding-top: 1rem
	}

	.xun-footer-contact-col .xun-footer-links-title {
		text-align: center
	}

	.xun-footer-contact {
		justify-content: center
	}

	.xun-footer-links-title {
		margin-bottom: .5rem;
		font-size: .8125rem
	}

	.xun-footer-links-list {
		gap: .375rem
	}

	.xun-footer-links-list li a {
		font-size: .75rem
	}

	.xun-footer-contact {
		gap: .75rem
	}

	.xun-footer-contact-qrcode {
		width: 56px;
		height: 56px
	}

	.xun-footer-contact-label {
		font-size: .6875rem
	}

	.xun-footer-bottom {
		padding: 1rem 0
	}

	.xun-footer-copyright {
		font-size: .75rem
	}

	.xun-footer-sitemap,
	.xun-footer-icp,
	.xun-footer-police,
	.xun-footer-query-stats {
		font-size: .6875rem
	}
}

@media(max-width:640px) {
	.xun-footer-container {
		padding: 0 .5rem
	}

	.xun-footer-links {
		padding: 1.25rem 0 1rem
	}

	.xun-footer-links-grid {
		flex-wrap: wrap;
		justify-content: center;
		gap: .5rem 0;
		display: flex
	}

	.xun-footer-links-col:not(.xun-footer-contact-col):not(.xun-footer-brand-col) {
		text-align: center;
		box-sizing: border-box;
		width: 25%;
		display: block
	}

	.xun-footer-contact-col {
		text-align: center;
		width: 100%;
		margin-top: .5rem
	}

	.xun-footer-contact-col .xun-footer-links-title {
		text-align: center
	}

	.xun-footer-contact {
		justify-content: center
	}

	.xun-footer-links-title {
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		margin-bottom: .375rem;
		font-size: .75rem;
		overflow: hidden
	}

	.xun-footer-links-list {
		gap: .25rem
	}

	.xun-footer-links-list li a {
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: .6875rem;
		line-height: 1.4;
		display: block;
		overflow: hidden
	}

	.xun-footer-contact-qrcode {
		width: 52px;
		height: 52px
	}

	.xun-footer-contact-label {
		font-size: .625rem
	}

	.xun-footer-bottom {
		padding: .75rem 0
	}

	.xun-footer-bottom-card {
		padding: .875rem 1rem
	}

	.xun-footer-bottom-inner {
		text-align: left;
		justify-content: flex-start;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-footer-meta-card {
		text-align: left;
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding-top: .75rem
	}

	.xun-footer-meta-card.is-alone {
		border-top: 0;
		margin-top: 0;
		padding-top: 0
	}

	.xun-footer-copyright {
		font-size: .6875rem
	}

	.xun-footer-beian {
		justify-content: flex-start;
		gap: .5rem
	}

	.xun-footer-sitemap,
	.xun-footer-icp,
	.xun-footer-police,
	.xun-footer-query-stats {
		font-size: .625rem
	}

	.xun-footer-police img {
		width: .75rem;
		height: .75rem
	}
}

@media(max-width:375px) {
	.xun-footer-links-grid {
		gap: .5rem .125rem
	}

	.xun-footer-links-title {
		font-size: .6875rem
	}

	.xun-footer-links-list li a {
		font-size: .625rem
	}
}

.xun-quick-menu {
	right: calc(1rem + var(--scrollbar-width, 0px));
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	flex-direction: column;
	gap: .5rem;
	transition: opacity .3s, visibility .3s, transform .3s;
	display: flex;
	position: fixed;
	bottom: 2.5rem;
	transform: translateY(20px)
}

.xun-quick-menu.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.xun-quick-menu-item {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	width: 40px;
	height: 40px;
	box-shadow: var(--shadow-card);
	cursor: pointer;
	color: var(--color-text-secondary);
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex;
	position: relative
}

.xun-quick-menu-item:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px)
}

.xun-quick-menu-item:focus-visible {
	outline: 2px solid var(--xun-primary, #1677ff);
	outline-offset: 2px
}

.xun-quick-menu-item svg {
	width: 18px;
	height: 18px;
	transition: color .2s
}

.xun-quick-menu-icon {
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.xun-quick-menu-icon svg,
.xun-quick-menu-icon img {
	display: block
}

.xun-quick-menu-icon i {
	line-height: 1
}

.xun-quick-menu-custom {
	min-width: 40px;
	min-height: 40px;
	color: inherit;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	display: flex;
	position: relative
}

.xun-quick-menu-vip {
	color: #fff;
	background: linear-gradient(135deg, #f59e0b, #d97706)
}

.xun-quick-menu-vip:hover {
	color: #fff;
	background: linear-gradient(135deg, #fbbf24, #f59e0b)
}

.xun-quick-menu-wechat:hover {
	color: #fff;
	background: #07c160
}

.xun-quick-menu-qq {
	cursor: pointer
}

.xun-quick-menu-qq:hover {
	color: #fff;
	background: #12b7f5
}

.xun-quick-menu-top:hover {
	background: var(--xun-primary, #1677ff);
	color: #fff
}

.xun-quick-menu-popup {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 10;
	min-width: 180px;
	padding: 1rem;
	transition: all .2s;
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	transform: translateY(-50%)
}

.xun-quick-menu-popup:before {
	content: "";
	width: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -16px
}

.xun-quick-menu-item.has-popup:hover .xun-quick-menu-popup,
.xun-quick-menu-popup:hover {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.xun-quick-menu-popup-arrow {
	background: var(--color-bg-elevated);
	width: 12px;
	height: 12px;
	box-shadow: var(--shadow-xs);
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%)rotate(45deg)
}

.xun-quick-menu-popup-content {
	z-index: 1;
	position: relative
}

.xun-quick-menu-qrcode {
	background: var(--color-fill-tertiary);
	border-radius: 8px;
	width: 150px;
	height: 150px;
	margin: 0 auto .75rem;
	overflow: hidden
}

.xun-quick-menu-qrcode img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-quick-menu-id {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	white-space: nowrap;
	border-radius: 6px;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	padding: .5rem;
	font-size: .8125rem;
	display: flex
}

.xun-quick-menu-label {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-quick-menu-value {
	color: var(--color-text);
	flex-shrink: 0;
	font-weight: 500
}

.xun-quick-menu-copy {
	cursor: pointer;
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-quick-menu-copy:hover {
	background: var(--color-fill-secondary);
	color: var(--xun-primary, #1677ff)
}

.xun-quick-menu-copy.copied {
	color: #10b981
}

@media(max-width:768px) {
	.xun-quick-menu {
		right: calc(.75rem + var(--scrollbar-width, 0px));
		gap: .375rem;
		bottom: 2rem
	}

	.xun-quick-menu-item {
		width: 36px;
		height: 36px
	}

	.xun-quick-menu-item svg {
		width: 16px;
		height: 16px
	}

	.xun-quick-menu-popup {
		min-width: 150px;
		padding: .75rem;
		right: calc(100% + 8px)
	}

	.xun-quick-menu-qrcode {
		width: 110px;
		height: 110px
	}

	.xun-quick-menu-id {
		padding: .375rem;
		font-size: .75rem
	}
}

@media(max-width:640px) {
	.xun-quick-menu {
		right: calc(.5rem + var(--scrollbar-width, 0px));
		bottom: 1.5rem
	}

	.xun-quick-menu-item {
		width: 34px;
		height: 34px
	}

	.xun-quick-menu-item svg {
		width: 14px;
		height: 14px
	}

	.xun-quick-menu-qrcode {
		width: 100px;
		height: 100px
	}
}

.xun-mobile-bottom-bar {
	display: none
}

@media(max-width:767px) {
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px))
	}

	.xun-mobile-bottom-bar {
		z-index: 45;
		height: calc(58px + env(safe-area-inset-bottom, 0px));
		padding: 4px 10px env(safe-area-inset-bottom, 0px);
		background: rgba(255, 255, 255, .92);
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-bottom-bar {
			background: color-mix(in srgb, var(--color-bg-container)92%, transparent)
		}
	}

	.xun-mobile-bottom-bar {
		border-top: 1px solid var(--color-border-secondary);
		-webkit-backdrop-filter: blur(16px);
		overflow: hidden
	}

	.xun-mobile-bottom-bar__panel {
		align-items: end;
		gap: 2px;
		transition: transform .25s, opacity .25s;
		display: grid;
		position: absolute;
		top: 4px;
		left: 10px;
		right: 10px
	}

	.xun-mobile-bottom-bar__panel--nav {
		grid-template-columns: repeat(var(--xun-mobile-bottom-nav-columns, 5), minmax(0, 1fr));
		opacity: 1;
		transform: translateY(0)
	}

	.xun-mobile-bottom-bar__panel--quick {
		grid-template-columns: repeat(var(--xun-mobile-bottom-quick-columns, 4), minmax(0, 1fr));
		opacity: 0;
		transform: translateY(100%)
	}

	.xun-mobile-bottom-bar.is-quick-mode .xun-mobile-bottom-bar__panel--nav {
		opacity: 0;
		transform: translateY(-100%)
	}

	.xun-mobile-bottom-bar.is-quick-mode .xun-mobile-bottom-bar__panel--quick {
		opacity: 1;
		transform: translateY(0)
	}

	.xun-mobile-bottom-bar__item {
		min-height: 48px;
		color: var(--color-text-tertiary);
		cursor: pointer;
		background: 0 0;
		border: none;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3px;
		padding: 2px 0;
		text-decoration: none;
		transition: color .2s, background-color .2s, transform .2s;
		display: flex;
		position: relative
	}

	.xun-mobile-bottom-bar__item:before {
		content: "";
		z-index: 0;
		background: 0 0;
		border-radius: 10px;
		transition: background-color .2s, opacity .2s;
		position: absolute;
		top: 2px;
		right: 8px;
		bottom: 1px;
		left: 8px
	}

	.xun-mobile-bottom-bar__item>* {
		z-index: 1;
		position: relative
	}

	.xun-mobile-bottom-bar__item:hover,
	.xun-mobile-bottom-bar__item:focus-visible,
	.xun-mobile-bottom-bar__item.is-active {
		color: var(--xun-primary, var(--color-primary))
	}

	.xun-mobile-bottom-bar__item:hover:before,
	.xun-mobile-bottom-bar__item:focus-visible:before,
	.xun-mobile-bottom-bar__item.is-active:before {
		background: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {

		.xun-mobile-bottom-bar__item:hover:before,
		.xun-mobile-bottom-bar__item:focus-visible:before,
		.xun-mobile-bottom-bar__item.is-active:before {
			background: color-mix(in srgb, var(--xun-primary, var(--color-primary))10%, transparent)
		}
	}

	.xun-mobile-bottom-bar__item--placeholder {
		visibility: hidden;
		pointer-events: none
	}

	.xun-mobile-bottom-bar__icon {
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		display: inline-flex;
		position: relative
	}

	.xun-mobile-bottom-bar__icon svg {
		width: 18px;
		height: 18px
	}

	.xun-mobile-bottom-bar__label {
		white-space: nowrap;
		font-size: 9px;
		font-weight: 500;
		line-height: 1
	}

	.xun-mobile-bottom-bar__item--center {
		transform: translateY(-6px)
	}

	.xun-mobile-bottom-bar__plus {
		background: linear-gradient(135deg, var(--xun-primary, var(--color-primary)), var(--xun-primary, oklch(56.5% .22 260)));
		justify-content: center;
		align-items: center;
		width: 36px;
		height: 36px;
		display: inline-flex
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-bottom-bar__plus {
			background: linear-gradient(135deg, var(--xun-primary, var(--color-primary)), color-mix(in srgb, var(--xun-primary, var(--color-primary))68%, #fff))
		}
	}

	.xun-mobile-bottom-bar__plus {
		color: #fff;
		box-shadow: 0 10px 22px -12px var(--xun-primary, oklch(56.5% .22 260));
		border-radius: 999px
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-bottom-bar__plus {
			box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--xun-primary, var(--color-primary))55%, transparent)
		}
	}

	.xun-mobile-bottom-bar__plus svg {
		width: 20px;
		height: 20px
	}

	.xun-mobile-bottom-bar__badge {
		background: var(--xun-danger, #ef4444);
		color: #fff;
		text-align: center;
		border-radius: 999px;
		min-width: 14px;
		height: 14px;
		padding: 0 3px;
		font-size: 9px;
		font-weight: 600;
		line-height: 14px;
		position: absolute;
		top: -2px;
		right: -8px
	}

	.xun-mobile-bottom-bar__badge.is-empty {
		display: none
	}

	.xun-mobile-bottom-bar__item--quick:before {
		left: 10px;
		right: 10px
	}

	.xun-mobile-bottom-bar__item--quick-vip {
		color: #d97706
	}

	.xun-mobile-bottom-bar__item--post-action {
		width: 100%
	}

	.xun-mobile-bottom-bar__item.xun-post-action-btn {
		background: 0 0;
		border: none;
		border-radius: 10px;
		gap: 3px;
		min-height: 48px;
		padding: 2px 0
	}

	.xun-mobile-bottom-bar__item .xun-action-count,
	:is(.single-post, .single-xun_bbs) .xun-single-footer .xun-single-actions,
	:is(.single-post, .single-xun_bbs) .xun-single-main>.xun-single-comments,
	.single-post .xun-single-content>.xun-mobile-download-bar,
	.single-post .xun-single-download .xun-download-card {
		display: none !important
	}

	.xun-mobile-post-comments-sheet,
	.xun-mobile-post-download-sheet {
		padding: 0
	}

	.xun-mobile-post-drawer-slot {
		min-height: 1px
	}

	.xun-mobile-post-comments-sheet .xun-single-comments {
		box-shadow: none;
		background: 0 0;
		border: 0;
		margin: 0;
		padding: 0;
		display: block !important
	}

	.xun-mobile-post-comments-sheet .xun-comments-title {
		margin-bottom: 1rem
	}

	.xun-mobile-post-download-sheet .xun-mobile-download-bar {
		margin-top: 0;
		display: block !important
	}

	.xun-mobile-post-download-sheet .xun-mobile-download-bar-inner {
		box-shadow: none;
		background: 0 0;
		border: 0;
		border-radius: 0;
		padding: 0
	}

	.xun-shop-cart-btn,
	.xun-mobile-home-link,
	.xun-quick-menu {
		display: none !important
	}

	.xun-mobile-bottom-sheet-list {
		flex-direction: column;
		gap: 10px;
		display: flex
	}

	.xun-mobile-bottom-sheet-item,
	.xun-mobile-bottom-sheet-contact-card {
		color: var(--color-text);
		background: var(--color-fill-quaternary);
		border-radius: 14px;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		text-decoration: none;
		transition: background-color .2s, color .2s;
		display: flex
	}

	.xun-mobile-bottom-sheet-item:hover {
		background: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-bottom-sheet-item:hover {
			background: color-mix(in srgb, var(--xun-primary, var(--color-primary))10%, var(--color-fill-quaternary))
		}
	}

	.xun-mobile-bottom-sheet-item:hover {
		color: var(--xun-primary, var(--color-primary))
	}

	.xun-mobile-bottom-sheet-item.is-active {
		color: var(--xun-primary, var(--color-primary));
		background: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-bottom-sheet-item.is-active {
			background: color-mix(in srgb, var(--xun-primary, var(--color-primary))10%, var(--color-fill-quaternary))
		}
	}

	.xun-mobile-bottom-sheet-item--action {
		justify-content: flex-start
	}

	.xun-mobile-bottom-sheet-item__icon {
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		display: inline-flex
	}

	.xun-mobile-bottom-sheet-item__icon svg {
		width: 20px;
		height: 20px
	}

	.xun-mobile-bottom-sheet-item__text {
		flex: 1;
		min-width: 0;
		font-size: 14px;
		font-weight: 500
	}

	.xun-mobile-bottom-sheet-item__meta {
		color: var(--color-text-tertiary);
		font-size: 12px
	}

	.xun-mobile-bottom-sheet-contact-card {
		flex-direction: column;
		align-items: stretch
	}

	.xun-mobile-bottom-sheet-contact-card__qrcode {
		border-radius: 12px;
		width: 180px;
		max-width: 100%;
		margin: 0 auto;
		overflow: hidden
	}

	.xun-mobile-bottom-sheet-contact-card__qrcode img {
		width: 100%;
		height: auto;
		display: block
	}

	.xun-mobile-bottom-sheet-contact-card__row {
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		display: flex
	}

	.xun-mobile-bottom-sheet-contact-card__label {
		color: var(--color-text-tertiary);
		font-size: 12px
	}

	.xun-mobile-bottom-sheet-contact-card__value {
		color: var(--color-text);
		font-size: 14px;
		font-weight: 600
	}

	.xun-mobile-navigation-search-sheet .xun-search-form {
		flex-direction: column;
		gap: 1rem;
		display: flex
	}

	.xun-mobile-navigation-search-sheet .xun-search-input-wrap {
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		min-width: 0;
		display: flex
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-search-input-wrap {
		background: var(--color-bg-container);
		border-radius: 50px;
		gap: .5rem;
		padding-right: 0;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .08)
	}

	.xun-mobile-navigation-search-sheet .xun-search-input {
		min-width: 0;
		height: 48px;
		color: var(--color-text);
		flex: auto;
		padding: 0 1rem;
		font-size: 15px
	}

	.xun-mobile-navigation-search-sheet .xun-search-btn {
		white-space: nowrap;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		flex: none;
		width: auto;
		min-width: 84px;
		height: 40px;
		padding: 0 1rem;
		margin: 0 !important
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engines {
		justify-content: flex-start;
		gap: .5rem;
		margin-top: 0
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine {
		display: inline-flex
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine span {
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius, 8px);
		background: var(--color-fill-quaternary);
		min-width: 68px;
		color: var(--color-text-secondary);
		-webkit-backdrop-filter: none;
		box-shadow: none;
		padding: .5rem .875rem
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine input:checked+span {
		border-color: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine input:checked+span {
			border-color: color-mix(in srgb, var(--xun-primary, var(--color-primary))28%, transparent)
		}
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine input:checked+span {
		background: var(--color-primary-bg);
		color: var(--xun-primary, var(--color-primary));
		box-shadow: 0 6px 18px rgba(22, 119, 255, .12)
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine:hover span {
		color: var(--xun-primary, var(--color-primary));
		border-color: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine:hover span {
			border-color: color-mix(in srgb, var(--xun-primary, var(--color-primary))20%, var(--color-border-secondary))
		}
	}

	.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine:hover span {
		background: var(--xun-primary, oklch(56.5% .22 260))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-mobile-navigation-search-sheet .xun-navigation-banner-engine:hover span {
			background: color-mix(in srgb, var(--xun-primary, var(--color-primary))8%, var(--color-fill-quaternary))
		}
	}

	.xun-mobile-navigation-share-sheet .xun-share-dropdown-menu.xun-single-share-btns {
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: 0 0;
		border: 0;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: .625rem;
		padding: 0;
		display: grid;
		position: static;
		top: auto;
		left: auto;
		transform: none
	}

	.xun-mobile-navigation-share-sheet .xun-share-dropdown-menu.xun-single-share-btns:before,
	.xun-mobile-navigation-share-sheet .xun-share-dropdown-menu.xun-single-share-btns:after {
		display: none
	}

	.xun-mobile-navigation-share-sheet .xun-share-btn {
		background: var(--color-fill-quaternary);
		width: 100%;
		height: 48px;
		color: var(--color-text-secondary);
		border-radius: 14px
	}
}

.xun-comments {
	margin-top: 0
}

.xun-comments-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	display: flex
}

.xun-comments-title svg {
	color: var(--color-text-tertiary)
}

.xun-comment-list {
	margin: 0;
	padding: 0;
	list-style: none
}

.xun-comment {
	border-bottom: 1px solid var(--color-border-secondary);
	margin-bottom: 1rem;
	padding-bottom: 1rem
}

.xun-comment:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0
}

.xun-comment .children {
	margin: 1rem 0 0 2.5rem;
	padding: 0;
	list-style: none
}

.xun-comment .children .xun-comment {
	margin-bottom: .75rem;
	padding-bottom: .75rem
}

.xun-comment-body {
	flex-direction: column;
	gap: .625rem;
	display: flex
}

.xun-comment-header {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-comment-avatar {
	flex-shrink: 0
}

.xun-comment-avatar .xun-avatar {
	object-fit: cover;
	border-radius: 50%;
	width: 40px;
	height: 40px
}

.xun-comment .children .xun-comment-avatar .xun-avatar {
	width: 32px;
	height: 32px
}

.xun-comment-meta {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem .5rem;
	display: flex
}

.xun-comment-author {
	color: var(--color-text);
	font-weight: 500
}

.xun-comment-author a {
	color: inherit;
	text-decoration: none
}

.xun-comment-author a:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-comment-badge {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .0625rem .375rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-comment-purchase-badge {
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .125rem .4375rem;
	font-size: .625rem;
	font-weight: 600;
	line-height: 1;
	display: inline-flex
}

.xun-comment-purchase-badge.is-purchased {
	color: var(--color-success, #16a34a);
	background: #eaf8e9
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-comment-purchase-badge.is-purchased {
		background: color-mix(in srgb, var(--color-success, #16a34a)12%, #fff)
	}
}

.xun-comment-purchase-badge.is-unpurchased {
	color: var(--color-text-tertiary, #737373);
	background: var(--color-fill-quaternary, #0000000a)
}

.xun-comment-level-badge {
	color: var(--level-color, var(--xun-primary, #3b82f6));
	background: var(--level-bg-color, #3b82f626);
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .625rem;
	font-weight: 500;
	display: inline-flex
}

.xun-comment-vip-badge {
	color: var(--vip-color, #f59e0b);
	background: var(--vip-bg-color, #f59e0b26);
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	gap: .1875rem;
	padding: .125rem .375rem;
	font-size: .625rem;
	font-weight: 500;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-comment-level-badge {
		background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-comment-level-badge {
			background: var(--level-bg-color, color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))15%, #fff))
		}
	}

	.xun-comment-vip-badge {
		background: var(--vip-bg-color, var(--vip-color, #f59e0b))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-comment-vip-badge {
			background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)15%, #fff))
		}
	}
}

.xun-comment-vip-badge svg {
	flex-shrink: 0
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-comment-level-badge:not(.xun-level-badge--icon) {
		color: var(--color-text-secondary, #a1a1aa);
		box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .7)
	}

	:root:not(.light) .xun-comment-level-badge {
		background: var(--level-bg-color, #3b82f60f)
	}

	:root:not(.light) .xun-comment-vip-badge {
		background: var(--vip-bg-color, #f59e0b33)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-comment-level-badge:not(.xun-level-badge--icon) {
			color: var(--level-color, var(--xun-primary, #3b82f6))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-comment-level-badge:not(.xun-level-badge--icon) {
				color: color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))45%, var(--color-text-secondary, #a1a1aa))
			}
		}

		:root:not(.light) .xun-comment-level-badge:not(.xun-level-badge--icon) {
			box-shadow: none
		}

		:root:not(.light) .xun-comment-level-badge {
			background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-comment-level-badge {
				background: color-mix(in srgb, var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))12%, var(--color-bg-elevated, #1f1f1f))
			}
		}

		:root:not(.light) .xun-comment-vip-badge {
			background: var(--vip-bg-color, var(--vip-color, #f59e0b))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-comment-vip-badge {
				background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)20%, var(--color-bg-elevated, #2a2a2a)))
			}
		}
	}
}

.dark .xun-comment-level-badge {
	background: var(--level-bg-color, #3b82f60f)
}

.dark .xun-comment-vip-badge {
	background: var(--vip-bg-color, #f59e0b33)
}

.dark .xun-comment-level-badge:not(.xun-level-badge--icon) {
	color: var(--color-text-secondary, #a1a1aa);
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .7)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-comment-level-badge:not(.xun-level-badge--icon) {
		color: var(--level-color, var(--xun-primary, #3b82f6))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-comment-level-badge:not(.xun-level-badge--icon) {
			color: color-mix(in srgb, var(--level-color, var(--xun-primary, #3b82f6))45%, var(--color-text-secondary, #a1a1aa))
		}
	}

	.dark .xun-comment-level-badge:not(.xun-level-badge--icon) {
		box-shadow: none
	}

	.dark .xun-comment-level-badge {
		background: var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-comment-level-badge {
			background: color-mix(in srgb, var(--level-bg-color, var(--level-color, var(--xun-primary, #3b82f6)))12%, var(--color-bg-elevated, #1f1f1f))
		}
	}

	.dark .xun-comment-vip-badge {
		background: var(--vip-bg-color, var(--vip-color, #f59e0b))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-comment-vip-badge {
			background: var(--vip-bg-color, color-mix(in srgb, var(--vip-color, #f59e0b)20%, var(--color-bg-elevated, #2a2a2a)))
		}
	}
}

.xun-comment-level-badge.xun-level-badge--icon {
	background: 0 0;
	border: none;
	padding: 0
}

.xun-comment-level-badge.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 16px;
	max-height: 18px;
	display: block
}

.xun-comment-time {
	color: var(--color-text-quaternary);
	font-size: .8125rem
}

.xun-comment-shop-rating {
	color: #d97706;
	letter-spacing: .08em;
	background: #fef1dd;
	border-radius: 999px;
	align-items: center;
	min-height: 1.45rem;
	padding: 0 .5rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-comment-content {
	color: var(--color-text-secondary);
	padding-left: 3.25rem;
	font-size: .9375rem;
	line-height: 1.7
}

.xun-comment .children .xun-comment-content {
	padding-left: 2.5rem
}

.xun-comment-text {
	display: inline
}

.xun-comment-text p {
	margin: 0;
	display: inline
}

.xun-comment-text p:not(:last-child):after {
	content: " "
}

.xun-comment-awaiting {
	color: var(--color-warning);
	background: var(--color-warning-bg);
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	gap: .25rem;
	margin-bottom: .5rem;
	padding: .375rem .625rem;
	font-size: .8125rem;
	display: flex
}

.xun-comment-reply-btn {
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	margin-left: .75rem;
	padding: 0;
	font-size: .8125rem;
	transition: color .2s;
	display: inline
}

.xun-comment-reply-btn:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-inline-reply-form {
	opacity: 0;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows .3s, opacity .3s, margin-top .3s;
	display: grid
}

.xun-inline-reply-form>.xun-inline-reply-inner {
	overflow: hidden
}

.xun-inline-reply-form.is-visible {
	opacity: 1;
	grid-template-rows: 1fr;
	margin-top: .75rem
}

.xun-inline-reply-form.is-visible>.xun-inline-reply-inner {
	overflow: visible
}

.xun-inline-reply-inner {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	padding: .875rem
}

.xun-inline-reply-header {
	justify-content: space-between;
	align-items: center;
	margin-bottom: .75rem;
	display: flex
}

.xun-inline-reply-to {
	color: var(--color-text-secondary);
	font-size: .8125rem
}

.xun-inline-reply-to strong {
	color: var(--color-text)
}

.xun-inline-reply-cancel {
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-inline-reply-cancel:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-inline-reply-form .xun-comment-field {
	margin-bottom: 0
}

.xun-inline-reply-form .xun-comment-editor {
	position: relative
}

.xun-inline-reply-textarea {
	width: 100%;
	min-height: 80px;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	resize: vertical;
	outline: none;
	padding: .625rem .875rem 2.5rem;
	font-size: .9375rem;
	line-height: 1.6;
	transition: border-color .2s, box-shadow .2s
}

.xun-inline-reply-textarea:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-inline-reply-textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-inline-reply-form .xun-comment-tools {
	position: absolute;
	bottom: .5rem;
	right: .5rem
}

.xun-inline-reply-actions {
	justify-content: flex-end;
	margin-top: .75rem;
	display: flex
}

.xun-inline-reply-submit {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-inline-reply-submit .xun-btn-loading {
	align-items: center;
	display: inline-flex
}

.xun-comments-pagination {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: center;
	gap: .25rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	display: flex
}

.xun-comments-pagination a,
.xun-comments-pagination span {
	min-width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	justify-content: center;
	align-items: center;
	padding: 0 .5rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-comments-pagination a:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-comments-pagination .current {
	color: #fff;
	background: var(--xun-primary, var(--color-primary))
}

.xun-comments-closed {
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	gap: .375rem;
	padding: 1rem;
	font-size: .875rem;
	display: flex
}

.xun-comment-form-wrap {
	border-bottom: 1px solid var(--color-border-secondary);
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem
}

.xun-comment-form .comment-reply-title {
	color: var(--color-text);
	align-items: center;
	gap: .75rem;
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	display: flex
}

.xun-comment-form .comment-reply-title small {
	font-size: .8125rem;
	font-weight: 400
}

.xun-comment-form .comment-reply-title small a {
	color: var(--color-text-tertiary);
	text-decoration: none
}

.xun-comment-form .comment-reply-title small a:hover {
	color: var(--color-error)
}

.xun-comment-form .comment-form-comment,
.xun-comment-field {
	margin-bottom: 1rem
}

.xun-comment-form label {
	color: var(--color-text-secondary);
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
	display: block
}

.xun-comment-form label .required {
	color: var(--color-error)
}

.xun-comment-form input[type=text],
.xun-comment-form input[type=email],
.xun-comment-form input[type=url],
.xun-comment-form select,
.xun-comment-form textarea {
	width: 100%;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	padding: .625rem .875rem;
	font-size: .9375rem;
	transition: border-color .2s, box-shadow .2s
}

.xun-comment-form input:focus,
.xun-comment-form select:focus,
.xun-comment-form textarea:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-comment-form input::placeholder,
.xun-comment-form textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-comment-form textarea {
	resize: vertical;
	min-height: 100px
}

.xun-comment-field-rating {
	margin-bottom: .875rem
}

.xun-comment-rating-stars {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	display: flex
}

.xun-comment-field-rating input[type=hidden] {
	display: none
}

.xun-comment-rating-star {
	color: var(--color-text-quaternary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: color .2s;
	display: inline-flex
}

.xun-comment-rating-star svg {
	width: 18px;
	height: 18px;
	display: block
}

.xun-comment-rating-star.is-active,
.xun-comment-rating-star:hover {
	color: #f59e0b
}

.xun-comment-rating-text {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-comment-editor {
	position: relative
}

.xun-comment-tools {
	align-items: center;
	gap: .125rem;
	display: flex;
	position: absolute;
	bottom: .5rem;
	right: .5rem
}

.xun-comment-tool {
	width: 28px;
	height: 28px;
	color: var(--color-text-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-comment-tool:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-comment-tool:disabled {
	opacity: .5;
	cursor: not-allowed
}

.xun-emoji-picker {
	z-index: 100;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	max-height: 200px;
	box-shadow: var(--shadow-dropdown);
	grid-template-columns: repeat(10, 28px);
	gap: .25rem;
	padding: .5rem;
	display: grid;
	position: absolute;
	bottom: calc(100% + .25rem);
	right: 0;
	overflow: hidden auto
}

.xun-emoji-item {
	cursor: pointer;
	border-radius: var(--xun-radius-sm, 4px);
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 1.125rem;
	transition: background .15s;
	display: flex
}

.xun-emoji-item:hover {
	background: var(--color-fill-secondary)
}

.xun-comment-form .comment-form-author,
.xun-comment-form .comment-form-email,
.xun-comment-form .comment-form-url {
	vertical-align: top;
	width: calc(33.333% - .667rem);
	margin-right: 1rem;
	display: inline-block
}

.xun-comment-form .comment-form-url {
	margin-right: 0
}

.xun-comment-form .form-submit {
	justify-content: flex-end;
	margin: 1.25rem 0 0;
	display: flex
}

.xun-comment-user-info {
	margin-bottom: 1rem
}

.xun-comment-logged-in {
	background: var(--color-fill-quaternary);
	border-radius: 2rem;
	align-items: center;
	gap: .625rem;
	padding: .5rem .875rem .5rem .5rem;
	display: inline-flex
}

.xun-comment-user-avatar {
	object-fit: cover;
	border: 2px solid var(--color-bg-elevated);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.xun-comment-user-name {
	color: var(--color-text);
	font-size: .8125rem;
	font-weight: 500
}

.xun-comment-avatar-placeholder {
	background: var(--color-fill-tertiary)
}

.xun-comment-guest .xun-comment-user-name {
	color: var(--color-text-tertiary)
}

.xun-guest-field {
	transition: opacity .2s, height .2s
}

.xun-comment-form-locked {
	min-height: 200px;
	position: relative
}

.xun-comment-login-notice {
	z-index: 10;
	-webkit-backdrop-filter: blur(16px)saturate(180%);
	backdrop-filter: blur(16px)saturate(180%);
	border-radius: var(--xun-radius, 8px);
	background: rgba(255, 255, 255, .7);
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-comment-login-notice {
		background: rgba(30, 30, 30, .7)
	}
}

.dark .xun-comment-login-notice {
	background: rgba(30, 30, 30, .7)
}

.xun-comment-login-content {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	display: flex
}

.xun-comment-login-icon {
	color: var(--color-text-tertiary);
	justify-content: center;
	align-items: center;
	margin-bottom: .5rem;
	display: flex
}

.xun-comment-login-icon svg {
	width: 32px;
	height: 32px
}

.xun-comment-login-text {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .9375rem
}

.xun-comment-login-actions {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-comment-content.no-avatar,
.xun-comment .children .xun-comment-content.no-avatar {
	padding-left: 0
}

@media(max-width:768px) {
	.xun-comment .children {
		margin-left: 1.5rem
	}

	.xun-comment-avatar .xun-avatar {
		width: 36px;
		height: 36px
	}

	.xun-comment .children .xun-comment-avatar .xun-avatar {
		width: 28px;
		height: 28px
	}

	.xun-comment-content {
		padding-left: 2.75rem
	}

	.xun-comment .children .xun-comment-content {
		padding-left: 2.25rem
	}

	.xun-comment-form .comment-form-author,
	.xun-comment-form .comment-form-email,
	.xun-comment-form .comment-form-url {
		width: 100%;
		margin-right: 0;
		display: block
	}
}

.xun-comment-image-preview {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .75rem;
	padding: .75rem;
	display: flex
}

.xun-comment-image-item {
	border-radius: var(--xun-radius-sm, 4px);
	width: 80px;
	height: 80px;
	position: relative;
	overflow: hidden
}

.xun-comment-image-item img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-comment-image-remove {
	color: #fff;
	cursor: pointer;
	opacity: 0;
	background: rgba(0, 0, 0, .6);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	transition: opacity .2s;
	display: flex;
	position: absolute;
	top: 4px;
	right: 4px
}

.xun-comment-image-item:hover .xun-comment-image-remove {
	opacity: 1
}

.xun-comment-image-remove:hover {
	background: rgba(0, 0, 0, .8)
}

.xun-comment-content img.xun-comment-image {
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	max-width: 100%;
	max-height: 300px;
	margin-top: .75rem;
	transition: transform .2s;
	display: block
}

.xun-comment-content img.xun-comment-image:hover {
	transform: scale(1.02)
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-comment-form input,
	:root:not(.light) .xun-comment-form textarea {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary)
	}
}

.dark .xun-comment-form input,
.dark .xun-comment-form textarea {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary)
}

.xun-post-thumb {
	background: var(--color-bg-secondary, #e5e7eb);
	position: relative;
	overflow: hidden
}

.xun-posts-waterfall .xun-post-thumb:has(.xun-lazyload[data-src]),
.xun-posts-waterfall .xun-post-thumb:has(.xun-lazyload-blur) {
	min-height: 200px
}

.xun-lazyload[data-src] {
	opacity: 0;
	transition: opacity .3s
}

.xun-lazyload.xun-lazyloading {
	opacity: .5
}

.xun-lazyload-blur {
	opacity: 1;
	transition: opacity .3s
}

.xun-post-card {
	isolation: isolate;
	position: relative
}

.xun-post-card .xun-post-card-link {
	transition: filter .35s ease-out
}

.xun-post-card:has(.xun-lazyload[data-src]) .xun-post-card-link,
.xun-post-card:has(.xun-lazyload-blur) .xun-post-card-link {
	filter: blur(20px)
}

.xun-post-card:has(.xun-lazyloading) .xun-post-card-link {
	filter: blur(10px)
}

.xun-post-card:has(.xun-lazyloaded) .xun-post-card-link {
	filter: blur()
}

.xun-lazyloaded {
	opacity: 1
}

.xun-post-thumb:has(.xun-lazyloaded) {
	background: 0 0
}

.xun-posts-waterfall .xun-post-thumb:has(.xun-lazyloaded) {
	min-height: auto
}

.xun-slider .xun-lazyload[data-src],
.xun-slider .xun-lazyload-blur,
.xun-slider img.no-lazyload {
	opacity: 1;
	filter: none !important;
	transform: none !important
}

.xun-slider .xun-post-card:has(.xun-lazyload[data-src]) .xun-post-card-link,
.xun-slider .xun-post-card:has(.xun-lazyload-blur) .xun-post-card-link {
	filter: none !important
}

.xun-lazyload-wrapper {
	background: var(--color-bg-secondary, #e5e7eb);
	position: relative;
	overflow: hidden
}

.xun-lazyload-wrapper.is-loaded {
	background: 0 0
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-post-thumb,
	:root:not(.light) .xun-lazyload-wrapper {
		background: var(--color-bg-tertiary, #374151)
	}
}

.dark .xun-post-thumb,
.dark .xun-lazyload-wrapper {
	background: var(--color-bg-tertiary, #374151)
}

.xun-modal {
	z-index: 1200;
	opacity: 0;
	justify-content: center;
	align-items: center;
	transition: opacity .2s;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-modal.is-active {
	opacity: 1
}

.xun-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	animation: .2s ease-out maskFadeIn;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-modal:not(.is-active) .xun-modal-overlay {
	animation: .2s ease-out forwards maskFadeOut
}

.xun-modal-container {
	z-index: 1;
	max-height: 90vh;
	position: relative;
	overflow-y: auto
}

.xun-modal-content {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-modal);
	transition: transform .2s;
	position: relative;
	transform: scale(.95)translateY(-10px)
}

.xun-modal.is-active .xun-modal-content {
	transform: scale(1)translateY(0)
}

.xun-modal-close {
	position: absolute;
	top: .75rem;
	right: .75rem
}

.xun-auth-buttons {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-auth-btn-header {
	color: var(--color-text);
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	padding: .375rem .875rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s
}

.xun-auth-btn-header:hover {
	background: var(--color-fill-secondary)
}

.xun-auth-loading-modal {
	z-index: 1200;
	justify-content: center;
	align-items: center;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-auth-loading-modal .xun-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-auth-loading-content {
	z-index: 1;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 3rem;
	display: flex;
	position: relative
}

.xun-auth-loading-spinner {
	width: 40px;
	height: 40px;
	color: var(--xun-primary, var(--color-primary))
}

.xun-auth-loading-text {
	color: var(--color-text-secondary);
	font-size: .9375rem
}

@media(max-width:768px) {

	.xun-auth-buttons,
	.xun-user-menu {
		display: none
	}
}

.xun-oauth-bridge-page {
	min-height: calc(100vh - var(--header-height, 64px));
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	display: flex
}

.xun-oauth-bridge-content {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 320px;
	display: flex
}

.xun-oauth-bridge-icon {
	background: var(--color-primary-bg);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	display: flex
}

.xun-oauth-bridge-spinner {
	width: 28px;
	height: 28px;
	color: var(--xun-primary, var(--color-primary))
}

.xun-oauth-bridge-icon.is-success {
	background: rgba(34, 197, 94, .1)
}

.xun-oauth-bridge-icon.is-success svg {
	color: #22c55e
}

.xun-oauth-bridge-icon.is-error {
	background: rgba(239, 68, 68, .1)
}

.xun-oauth-bridge-icon.is-error svg {
	color: #ef4444
}

.xun-oauth-bridge-texts {
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-oauth-bridge-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5
}

.xun-oauth-bridge-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem;
	line-height: 1.6
}

.xun-oauth-bridge-noscript {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-top: .5rem;
	padding: .75rem 1rem;
	font-size: .8125rem;
	line-height: 1.5
}

@media(max-width:480px) {
	.xun-oauth-bridge-page {
		padding: 3rem 1rem
	}

	.xun-oauth-bridge-icon {
		width: 56px;
		height: 56px
	}

	.xun-oauth-bridge-spinner {
		width: 24px;
		height: 24px
	}

	.xun-oauth-bridge-title {
		font-size: 1rem
	}

	.xun-oauth-bridge-desc {
		font-size: .8125rem
	}
}

.xun-user-menu {
	position: relative
}

.xun-user-btn {
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: opacity .2s;
	display: flex
}

.xun-user-btn:hover {
	opacity: .8
}

.xun-user-avatar {
	object-fit: cover;
	border-radius: 50%;
	width: 32px;
	height: 32px
}

.xun-user-dropdown {
	z-index: 100;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	opacity: 0;
	visibility: hidden;
	transform-origin: 100% 0;
	border: none;
	min-width: 280px;
	transition: all .2s cubic-bezier(.16, 1, .3, 1);
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	transform: translateY(-8px)scale(.95);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .15)
}

.xun-user-dropdown:before {
	content: "";
	height: .75rem;
	position: absolute;
	top: -.75rem;
	left: 0;
	right: 0
}

.xun-user-menu.is-open .xun-user-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)scale(1)
}

.xun-user-menu.is-closing .xun-user-dropdown {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px)scale(.95)
}

.xun-user-card {
	background: var(--color-bg-elevated);
	padding: .75rem
}

.xun-user-card-link {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .75rem;
	padding: .75rem;
	text-decoration: none;
	display: flex;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.xun-user-card-avatar {
	object-fit: cover;
	border: 2px solid var(--color-bg);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.xun-user-card-info {
	flex-direction: column;
	flex: 1;
	gap: .125rem;
	min-width: 0;
	display: flex
}

.xun-user-card-name {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .9375rem;
	font-weight: 600;
	overflow: hidden
}

.xun-user-card-email {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .75rem;
	overflow: hidden
}

.xun-user-card-arrow {
	color: var(--color-text-quaternary);
	transition: transform .2s
}

.xun-user-card-link:hover .xun-user-card-arrow {
	color: var(--color-text-tertiary);
	transform: translate(2px)
}

.xun-user-stats {
	background: var(--color-fill-quaternary);
	border-bottom: 1px solid var(--color-border-secondary);
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
	padding: .75rem;
	display: grid
}

.xun-user-stat-item {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-elevated);
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .625rem .25rem;
	text-decoration: none;
	display: flex
}

.xun-user-stat-value {
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2
}

.xun-user-stat-label {
	color: var(--color-text-tertiary);
	font-size: .6875rem;
	font-weight: 500
}

.xun-user-stat-item--vip {
	--vip-color: #f59e0b
}

.xun-user-stat-item--vip .xun-user-stat-value {
	color: var(--vip-color)
}

.xun-user-stat-item--vip.is-vip .xun-user-stat-value {
	background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-user-stat-item--vip.is-vip .xun-user-stat-value {
		background: linear-gradient(135deg, var(--vip-color)0%, color-mix(in srgb, var(--vip-color)70%, #000)100%)
	}
}

.xun-user-stat-item--vip.is-vip .xun-user-stat-value {
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text
}

@supports not (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-stat-item--vip.is-vip .xun-user-stat-value {
		background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text
	}
}

.xun-user-stat-item--vip.is-vip {
	position: relative
}

.xun-user-stat-item--vip.is-vip:before {
	content: "";
	border-radius: var(--xun-radius, 8px);
	background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%);
	padding: 1px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-user-stat-item--vip.is-vip:before {
		background: linear-gradient(135deg, var(--vip-color)0%, color-mix(in srgb, var(--vip-color)80%, #000)100%)
	}
}

.xun-user-stat-item--vip.is-vip:before {
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
	-webkit-mask-position: 0 0, 0 0;
	-webkit-mask-size: auto, auto;
	-webkit-mask-repeat: repeat, repeat;
	-webkit-mask-clip: content-box, border-box;
	-webkit-mask-origin: content-box, border-box;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	-webkit-mask-source-type: auto, auto;
	mask-mode: match-source, match-source
}

@supports not (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-stat-item--vip.is-vip:before {
		background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
	}
}

.xun-user-menu-items {
	padding: .5rem
}

.xun-user-menu-item {
	width: 100%;
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .625rem;
	padding: .625rem .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-user-menu-item svg {
	color: var(--color-text-tertiary);
	flex-shrink: 0;
	transition: color .2s
}

.xun-user-menu-item:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary)
}

.xun-user-menu-item:hover svg {
	color: var(--color-text-secondary)
}

.xun-user-menu-item--danger:hover {
	color: #ef4444;
	background: #fef2f2
}

.xun-user-menu-item--danger:hover svg {
	color: #ef4444
}

.xun-auth-modal {
	width: 380px;
	max-width: 90vw;
	padding: 0;
	display: flex;
	overflow: hidden
}

.xun-auth-modal-wide {
	width: 760px
}

.xun-auth-intro {
	color: #fff;
	flex-direction: column;
	flex: 1;
	justify-content: space-between;
	min-width: 0;
	padding: 2rem 1.75rem;
	display: flex
}

.xun-auth-modal-wide .xun-auth-main {
	flex: 1;
	min-width: 0
}

.xun-auth-intro-header {
	margin-bottom: 1.5rem
}

.xun-auth-intro-title {
	color: #fff;
	text-shadow: 0 1px 3px #00000026;
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 700
}

.xun-auth-intro-desc {
	color: rgba(255, 255, 255, .85);
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6
}

.xun-auth-intro-content {
	flex-direction: column;
	gap: 1.25rem;
	display: flex
}

.xun-auth-intro-item {
	align-items: flex-start;
	gap: .875rem;
	display: flex
}

.xun-auth-intro-icon {
	background: rgba(255, 255, 255, .2);
	border-radius: 8px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	font-size: 1.125rem;
	display: flex
}

.xun-auth-intro-icon iconify-icon {
	width: 1.125rem;
	height: 1.125rem
}

.xun-auth-intro-text h4 {
	color: #fff;
	margin: 0 0 .25rem;
	font-size: .9375rem;
	font-weight: 600
}

.xun-auth-intro-text p {
	color: rgba(255, 255, 255, .8);
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5
}

.xun-auth-main {
	flex: 1;
	padding: 1.5rem 1.75rem
}

.xun-auth-modal:not(.xun-auth-modal-wide) {
	padding: 0
}

.xun-auth-modal:not(.xun-auth-modal-wide) .xun-auth-main {
	width: 100%
}

.xun-auth-header {
	text-align: center;
	margin-bottom: 1rem
}

.xun-auth-title {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-auth-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-auth-footer {
	border-top: 1px solid var(--color-border-secondary);
	color: var(--color-text-tertiary);
	justify-content: center;
	align-items: center;
	gap: .25rem;
	margin-top: 1rem;
	padding-top: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-auth-switch {
	color: var(--xun-primary, var(--color-primary));
	cursor: pointer;
	background: 0 0;
	border: none;
	padding: 0;
	font-size: .8125rem;
	font-weight: 500
}

.xun-auth-switch:hover {
	opacity: .8
}

.xun-auth-form {
	flex-direction: column;
	gap: .625rem;
	display: flex
}

.xun-auth-field {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-auth-field label {
	color: var(--color-text-secondary);
	font-size: .75rem;
	font-weight: 500
}

.xun-auth-field input {
	width: 100%;
	height: 2.375rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 6px);
	transition: all .2s var(--ease-smooth);
	outline: none;
	padding: 0 .75rem;
	font-size: .8125rem
}

.xun-auth-field input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-auth-field input::placeholder {
	color: var(--color-text-quaternary);
	font-size: .8125rem
}

.xun-password-wrap {
	position: relative
}

.xun-password-wrap input {
	padding-right: 2.75rem
}

.xun-password-toggle:hover {
	color: var(--color-text-secondary)
}

.xun-auth-options {
	justify-content: space-between;
	align-items: center;
	margin-top: .125rem;
	display: flex
}

.xun-auth-link {
	color: var(--xun-primary, var(--color-primary));
	font-size: .8125rem;
	text-decoration: none
}

.xun-auth-link:hover {
	opacity: .8
}

.xun-auth-submit {
	width: 100%;
	height: 2.375rem;
	margin-top: .25rem;
	font-size: .875rem
}

.xun-auth-submit .xun-btn-loading {
	justify-content: center;
	align-items: center;
	gap: .375rem;
	display: none
}

.xun-auth-submit.is-loading .xun-btn-text {
	display: none
}

.xun-auth-submit.is-loading .xun-btn-loading {
	display: flex
}

.xun-code-wrap {
	gap: .5rem;
	display: flex
}

.xun-code-wrap input {
	flex: 1
}

.xun-send-code,
.xun-get-invite-code {
	white-space: nowrap;
	flex-shrink: 0
}

.xun-send-code:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-get-invite-code {
	height: 2.375rem;
	line-height: 1;
	text-decoration: none
}

.xun-auth-social {
	margin-top: 1rem
}

.xun-auth-social-divider {
	color: var(--color-text-quaternary);
	align-items: center;
	gap: .75rem;
	margin-bottom: .875rem;
	font-size: .75rem;
	display: flex
}

.xun-auth-social-divider:before,
.xun-auth-social-divider:after {
	content: "";
	background: var(--color-border-secondary);
	flex: 1;
	height: 1px
}

.xun-auth-social-buttons {
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	display: flex
}

.xun-auth-social {
	z-index: 10021;
	position: relative
}

.xun-social-btn {
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	border-style: solid;
	border-width: 1px;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	height: 2.25rem;
	padding: 0 1rem;
	font-size: .8125rem;
	font-weight: 500;
	transition: all .2s;
	display: flex
}

.xun-social-btn svg {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem
}

.xun-social-provider-icon {
	color: #fff;
	background: currentColor;
	border-radius: 999px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 1.125rem;
	height: 1.125rem;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex
}

.xun-social-provider-icon--more {
	color: currentColor;
	background: 0 0;
	font-size: 1rem
}

.xun-social-qq {
	color: #12b7f5;
	border-color: #12b7f5
}

.xun-social-qq:hover {
	color: #fff;
	background: #12b7f5;
	border-color: #12b7f5
}

:is(.xun-social-wechat, .xun-social-wechat-mp) {
	color: #07c160;
	border-color: #07c160
}

:is(.xun-social-wechat, .xun-social-wechat-mp):hover {
	color: #fff;
	background: #07c160;
	border-color: #07c160
}

.xun-social-alipay {
	color: #1677ff;
	border-color: #1677ff
}

.xun-social-alipay:hover {
	color: #fff;
	background: #1677ff;
	border-color: #1677ff
}

.xun-social-sina {
	color: #e6162d;
	border-color: #e6162d
}

.xun-social-sina:hover {
	color: #fff;
	background: #e6162d;
	border-color: #e6162d
}

.xun-social-google {
	color: #4285f4;
	border-color: #4285f4
}

.xun-social-google:hover {
	color: #fff;
	background: #4285f4;
	border-color: #4285f4
}

.xun-social-wework {
	color: #0089ff;
	border-color: #0089ff
}

.xun-social-wework:hover {
	color: #fff;
	background: #0089ff;
	border-color: #0089ff
}

.xun-social-twitter {
	color: #111827;
	border-color: #111827
}

.xun-social-twitter:hover {
	color: #fff;
	background: #111827;
	border-color: #111827
}

.xun-social-twitter svg {
	width: 1rem;
	height: 1rem
}

.xun-social-gitee {
	color: #c71d23;
	border-color: #c71d23
}

.xun-social-gitee:hover {
	color: #fff;
	background: #c71d23;
	border-color: #c71d23
}

.xun-social-github {
	color: #24292f;
	border-color: #24292f
}

.xun-social-github:hover {
	color: #fff;
	background: #24292f;
	border-color: #24292f
}

.xun-social-baidu {
	color: #2f54eb;
	border-color: #2f54eb
}

.xun-social-baidu:hover {
	color: #fff;
	background: #2f54eb;
	border-color: #2f54eb
}

.xun-social-huawei {
	color: #d32029;
	border-color: #d32029
}

.xun-social-huawei:hover {
	color: #fff;
	background: #d32029;
	border-color: #d32029
}

.xun-social-xiaomi {
	color: #ff6900;
	border-color: #ff6900
}

.xun-social-xiaomi:hover {
	color: #fff;
	background: #ff6900;
	border-color: #ff6900
}

.xun-social-douyin {
	color: #111827;
	border-color: #111827
}

.xun-social-douyin:hover {
	color: #fff;
	background: #111827;
	border-color: #111827
}

.xun-social-bilibili {
	color: #fb7299;
	border-color: #fb7299
}

.xun-social-bilibili:hover {
	color: #fff;
	background: #fb7299;
	border-color: #fb7299
}

.xun-social-dingtalk {
	color: #2468f2;
	border-color: #2468f2
}

.xun-social-dingtalk:hover {
	color: #fff;
	background: #2468f2;
	border-color: #2468f2
}

.xun-auth-social-more-entry {
	text-align: center;
	z-index: 10022;
	margin-top: .875rem;
	position: relative
}

.xun-auth-social-more-link {
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .375rem;
	padding: 0;
	font-size: .875rem;
	font-weight: 500;
	transition: color .2s, opacity .2s;
	display: inline-flex
}

.xun-auth-social-more-link:hover {
	color: var(--color-text)
}

.xun-auth-social-more-arrow {
	justify-content: center;
	align-items: center;
	line-height: 1;
	display: inline-flex
}

.xun-auth-social-more-arrow svg {
	width: .875rem;
	height: .875rem;
	transition: transform .2s
}

.xun-auth-social-more-entry.is-open .xun-auth-social-more-arrow svg {
	transform: rotate(180deg)
}

.xun-auth-social-popover {
	z-index: 10020;
	width: min(360px, 100vw - 2rem);
	position: absolute;
	bottom: calc(100% + .45rem);
	left: 50%;
	transform: translate(-50%)
}

.xun-auth-social-popover-panel {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: none;
	opacity: 0;
	padding: 1rem;
	transition: opacity .22s, transform .22s;
	transform: translateY(10px)scale(.98)
}

.xun-auth-social-popover.is-active .xun-auth-social-popover-panel {
	opacity: 1;
	transform: translateY(0)scale(1)
}

.xun-auth-social-popover-header {
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-bottom: .875rem;
	display: flex
}

.xun-auth-social-popover-title {
	color: var(--color-text);
	font-size: .9375rem;
	font-weight: 600
}

.xun-auth-social-popover-close {
	width: 2rem;
	height: 2rem;
	color: var(--color-text-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	box-shadow: none;
	background: 0 0;
	border: none;
	position: static
}

.xun-auth-social-popover-close:hover {
	color: var(--color-text);
	background-color: var(--color-fill-tertiary)
}

.xun-auth-social-popover-list {
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	gap: .75rem;
	display: grid
}

.xun-social-btn-popover {
	width: auto;
	min-width: 8rem
}

.xun-auth-social-popover.is-active .xun-social-btn-popover {
	animation: none
}

@media(max-width:480px) {
	.xun-auth-social-popover {
		width: min(340px, 100vw - 1.5rem)
	}

	.xun-auth-social-popover-list {
		gap: .625rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-auth-social-popover .xun-social-btn-popover:is(.xun-social-twitter, .xun-social-github, .xun-social-douyin) {
		color: #e5e7eb;
		background: rgba(255, 255, 255, .04);
		border-color: rgba(229, 231, 235, .28)
	}

	:root:not(.light) .xun-auth-social-popover .xun-social-btn-popover:is(.xun-social-twitter, .xun-social-github, .xun-social-douyin):hover {
		color: #111827;
		background: #e5e7eb;
		border-color: #e5e7eb
	}
}

.dark .xun-auth-social-popover .xun-social-btn-popover:is(.xun-social-twitter, .xun-social-github, .xun-social-douyin) {
	color: #e5e7eb;
	background: rgba(255, 255, 255, .04);
	border-color: rgba(229, 231, 235, .28)
}

.dark .xun-auth-social-popover .xun-social-btn-popover:is(.xun-social-twitter, .xun-social-github, .xun-social-douyin):hover {
	color: #111827;
	background: #e5e7eb;
	border-color: #e5e7eb
}

.xun-wechat-qrcode-modal {
	z-index: 1201;
	opacity: 0;
	justify-content: center;
	align-items: center;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-wechat-qrcode-modal.is-active {
	opacity: 1
}

.xun-wechat-qrcode-modal.is-closing {
	opacity: 0;
	transition: opacity .25s cubic-bezier(.4, 0, 1, 1)
}

.xun-wechat-qrcode-modal .xun-modal-overlay {
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1)
}

.xun-wechat-qrcode-modal.is-closing .xun-modal-overlay {
	opacity: 0
}

.xun-wechat-qrcode-content {
	z-index: 1;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	width: 340px;
	max-width: calc(100vw - 2rem);
	box-shadow: var(--shadow-modal);
	text-align: center;
	opacity: 0;
	box-sizing: border-box;
	padding: 1.5rem;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1);
	position: relative;
	transform: scale(.9)translateY(20px)
}

.xun-wechat-qrcode-modal.is-active .xun-wechat-qrcode-content {
	opacity: 1;
	transform: scale(1)translateY(0)
}

.xun-wechat-qrcode-modal.is-closing .xun-wechat-qrcode-content {
	opacity: 0;
	transition: transform .25s cubic-bezier(.4, 0, 1, 1), opacity .2s cubic-bezier(.4, 0, 1, 1);
	transform: scale(.95)translateY(-10px)
}

.xun-wechat-qrcode-header {
	margin-bottom: 1rem
}

.xun-wechat-qrcode-title {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-wechat-qrcode-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-wechat-qrcode-image {
	border-radius: var(--xun-radius, 8px);
	background: #fff;
	width: 200px;
	height: 200px;
	margin: 0 auto 1rem;
	position: relative;
	overflow: hidden
}

.xun-wechat-qrcode-image img {
	object-fit: contain;
	width: 100%;
	height: 100%
}

.xun-wechat-qrcode-image.is-loading:after {
	content: "";
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .4), rgba(0, 0, 0, 0));
	animation: 1.5s infinite shimmer;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

@keyframes shimmer {
	0% {
		transform: translate(-100%)
	}

	to {
		transform: translate(100%)
	}
}

.xun-wechat-qrcode-status {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	gap: .5rem;
	padding: .625rem 1rem;
	font-size: .8125rem;
	display: flex
}

.xun-wechat-qrcode-status svg {
	flex-shrink: 0
}

.xun-wechat-qrcode-status.is-success {
	color: #07c160;
	background: rgba(7, 193, 96, .1)
}

.xun-wechat-qrcode-status.is-error {
	color: #ef4444;
	background: rgba(239, 68, 68, .1)
}

.xun-wechat-qrcode-status.is-expired {
	color: #f59e0b;
	background: rgba(245, 158, 11, .1)
}

.xun-wechat-qrcode-refresh {
	color: var(--xun-primary, var(--color-primary));
	border: 1px solid var(--xun-primary, var(--color-primary));
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	margin-top: .75rem;
	padding: .5rem 1rem;
	font-size: .8125rem;
	transition: all .2s
}

.xun-wechat-qrcode-refresh:hover {
	color: #fff;
	background: var(--xun-primary, var(--color-primary))
}

.xun-wechat-qrcode-tip {
	border-top: 1px solid var(--color-border-secondary);
	color: var(--color-text-quaternary);
	word-break: break-word;
	margin-top: 1rem;
	padding-top: 1rem;
	font-size: .6875rem;
	line-height: 1.6
}

.xun-wechat-qrcode-tip strong {
	color: var(--color-text-tertiary);
	font-weight: 500
}

.xun-wechat-code-input {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	box-sizing: border-box;
	margin-top: 1rem;
	padding: .875rem
}

.xun-wechat-code-hint {
	color: var(--color-text-secondary);
	word-break: break-word;
	margin: 0 0 .75rem;
	font-size: .8125rem;
	line-height: 1.5
}

.xun-wechat-code-form {
	box-sizing: border-box;
	gap: .5rem;
	width: 100%;
	display: flex
}

.xun-wechat-code-field {
	letter-spacing: .1em;
	text-align: center;
	width: 100%;
	min-width: 0;
	height: 2.5rem;
	color: var(--color-text);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	box-sizing: border-box;
	outline: none;
	flex: 1;
	padding: 0 .75rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: all .2s
}

.xun-wechat-code-field:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-wechat-code-field::placeholder {
	letter-spacing: normal;
	color: var(--color-text-quaternary);
	font-size: .75rem;
	font-weight: 400
}

.xun-wechat-code-submit {
	color: #fff;
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
	background: #07c160;
	border: none;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	height: 2.5rem;
	padding: 0 1rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-wechat-code-submit:hover:not(:disabled) {
	background: #06ae56
}

.xun-wechat-code-submit:disabled {
	opacity: .7;
	cursor: not-allowed
}

.xun-wechat-code-submit .xun-spinner {
	flex-shrink: 0;
	width: 14px;
	height: 14px
}

.xun-wechat-code-error {
	color: #ef4444;
	margin: .5rem 0 0;
	font-size: .75rem
}

.xun-auth-agreement {
	color: var(--color-text-quaternary);
	text-align: center;
	margin: .75rem 0 0;
	font-size: .6875rem;
	line-height: 1.5
}

.xun-auth-agreement a {
	color: var(--color-text-tertiary);
	text-decoration: none
}

.xun-auth-agreement a:hover {
	color: var(--xun-primary, var(--color-primary))
}

@media(max-width:640px) {
	.xun-auth-modal-wide {
		width: 380px
	}

	.xun-auth-intro {
		display: none
	}

	.xun-auth-modal-wide .xun-modal-close {
		color: var(--color-text-tertiary)
	}
}

.xun-auth-modal-wide .xun-modal-close {
	z-index: 10;
	color: var(--color-text-tertiary)
}

.xun-auth-modal-wide .xun-modal-close:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary)
}

.xun-email-bind-modal {
	z-index: 1202;
	opacity: 0;
	justify-content: center;
	align-items: center;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-email-bind-modal.is-active {
	opacity: 1
}

.xun-email-bind-modal .xun-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-email-bind-content {
	z-index: 1;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	width: 400px;
	max-width: calc(100vw - 2rem);
	box-shadow: var(--shadow-modal);
	opacity: 0;
	padding: 2rem;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1);
	position: relative;
	transform: scale(.9)translateY(20px)
}

.xun-email-bind-modal.is-active .xun-email-bind-content {
	opacity: 1;
	transform: scale(1)translateY(0)
}

.xun-email-bind-icon {
	background: linear-gradient(135deg, var(--color-primary-bg)0%, var(--color-primary-bg-hover)100%);
	width: 64px;
	height: 64px;
	color: var(--xun-primary, var(--color-primary));
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1.25rem;
	display: flex
}

.xun-email-bind-icon svg {
	width: 32px;
	height: 32px
}

.xun-email-bind-header {
	text-align: center;
	margin-bottom: 1.5rem
}

.xun-email-bind-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-email-bind-desc {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .875rem;
	line-height: 1.6
}

.xun-email-bind-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-email-bind-field {
	flex-direction: column;
	gap: .375rem;
	display: flex
}

.xun-email-bind-field label {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	font-weight: 500
}

.xun-email-bind-field input {
	width: 100%;
	height: 2.75rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	transition: all .2s var(--ease-smooth);
	outline: none;
	padding: 0 1rem;
	font-size: .9375rem
}

.xun-email-bind-field input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-email-bind-field input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-email-bind-code-wrap {
	gap: .75rem;
	display: flex
}

.xun-email-bind-code-wrap input {
	flex: 1;
	min-width: 0
}

.xun-email-bind-send-code {
	white-space: nowrap;
	height: 2.75rem;
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	flex-shrink: 0;
	padding: 0 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s
}

.xun-email-bind-send-code:hover:not(:disabled) {
	background: var(--color-primary-bg-hover)
}

.xun-email-bind-send-code:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-email-bind-submit {
	color: #fff;
	background: var(--xun-primary, var(--color-primary));
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	width: 100%;
	height: 2.75rem;
	margin-top: .5rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: all .2s
}

.xun-email-bind-submit:hover:not(:disabled) {
	opacity: .9
}

.xun-email-bind-submit:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-email-bind-submit .xun-btn-loading {
	justify-content: center;
	align-items: center;
	gap: .5rem;
	display: none
}

.xun-email-bind-submit.is-loading .xun-btn-text {
	display: none
}

.xun-email-bind-submit.is-loading .xun-btn-loading {
	display: flex
}

@media(max-width:480px) {
	.xun-email-bind-content {
		padding: 1.5rem
	}

	.xun-email-bind-icon {
		width: 56px;
		height: 56px
	}

	.xun-email-bind-icon svg {
		width: 28px;
		height: 28px
	}

	.xun-email-bind-title {
		font-size: 1.125rem
	}

	.xun-email-bind-code-wrap {
		flex-direction: column
	}

	.xun-email-bind-send-code {
		width: 100%
	}
}

.xun-captcha-field {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-captcha-field>label {
	color: var(--color-text-secondary);
	font-size: .75rem;
	font-weight: 500
}

.xun-captcha-container {
	position: relative
}

.xun-captcha-loading {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	z-index: 10;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-captcha-loading svg {
	color: var(--color-text-tertiary)
}

.xun-captcha-image-wrap {
	align-items: stretch;
	gap: .5rem;
	display: flex
}

.xun-captcha-image-wrap .xun-captcha-input {
	letter-spacing: .1em;
	min-width: 0;
	height: 2.375rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 6px);
	transition: all .2s var(--ease-smooth);
	outline: none;
	flex: 1;
	padding: 0 .75rem;
	font-size: .875rem;
	font-weight: 500
}

.xun-captcha-image-wrap .xun-captcha-input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-captcha-image-wrap .xun-captcha-input::placeholder {
	letter-spacing: normal;
	color: var(--color-text-quaternary);
	font-size: .8125rem;
	font-weight: 400
}

.xun-captcha-image {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	flex-shrink: 0;
	width: 100px;
	height: 2.375rem;
	transition: opacity .2s;
	position: relative;
	overflow: hidden
}

.xun-captcha-image:hover {
	opacity: .85
}

.xun-captcha-image img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-captcha-slider-wrap {
	-webkit-user-select: none;
	user-select: none;
	position: relative
}

.xun-captcha-slider-bg {
	aspect-ratio: 280/150;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	opacity: 0;
	width: 100%;
	max-height: 0;
	margin-bottom: 0;
	transition: max-height .3s, opacity .3s, margin-bottom .3s;
	position: relative;
	overflow: hidden
}

.xun-captcha-slider-wrap.is-dragging .xun-captcha-slider-bg {
	opacity: 1;
	max-height: 200px;
	margin-bottom: .5rem
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-bg {
	opacity: 0;
	max-height: 0;
	margin-bottom: 0
}

.xun-captcha-slider-background {
	object-fit: fill;
	width: 100%;
	height: 100%;
	display: block
}

.xun-captcha-slider-piece {
	aspect-ratio: 1;
	pointer-events: none;
	z-index: 5;
	width: 14.286%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-captcha-slider-track {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	height: 2.5rem;
	position: relative;
	overflow: hidden
}

.xun-captcha-slider-track:before {
	content: "";
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(59, 130, 246, .1) 30%, rgba(59, 130, 246, .2), rgba(59, 130, 246, .1) 70%, rgba(0, 0, 0, 0));
	width: 100%;
	height: 100%;
	animation: 3s ease-in-out infinite sliderShine;
	position: absolute;
	top: 0;
	left: -100%
}

@keyframes sliderShine {
	0% {
		left: -100%
	}

	to {
		left: 100%
	}
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-track:before {
	opacity: 0;
	animation: none
}

.xun-captcha-slider-hint {
	color: var(--color-text-quaternary);
	pointer-events: none;
	white-space: nowrap;
	font-size: .8125rem;
	transition: color .2s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-captcha-slider-btn {
	background: var(--color-bg-elevated);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: grab;
	z-index: 1;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: calc(100% - 4px);
	transition: transform .3s, background-color .2s;
	display: flex;
	position: absolute;
	top: 2px;
	left: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.xun-captcha-slider-btn:active {
	cursor: grabbing
}

.xun-captcha-slider-btn svg {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-text-tertiary);
	transition: color .2s
}

.xun-captcha-slider-btn:hover svg {
	color: var(--color-text-secondary)
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-track {
	background: rgba(16, 185, 129, .1);
	border-color: #10b981
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-btn {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-btn svg {
	color: #fff
}

.xun-captcha-slider-wrap.is-verified .xun-captcha-slider-hint {
	color: #10b981;
	font-weight: 500
}

.xun-captcha-smart-wrap {
	-webkit-user-select: none;
	user-select: none;
	position: relative
}

.xun-captcha-smart-track {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	height: 2.5rem;
	transition: all .2s;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-captcha-smart-track:hover {
	border-color: var(--color-border-secondary);
	background: var(--color-fill-tertiary)
}

.xun-captcha-smart-hint {
	color: var(--color-text-quaternary);
	pointer-events: none;
	white-space: nowrap;
	align-items: center;
	font-size: .8125rem;
	transition: color .2s;
	display: flex
}

.xun-captcha-smart-text-before,
.xun-captcha-smart-text-after {
	transition: color .2s
}

.xun-captcha-smart-pulse {
	width: .375rem;
	height: .375rem;
	margin: 0 .25rem;
	display: inline-block;
	position: relative
}

.xun-captcha-smart-pulse:before,
.xun-captcha-smart-pulse:after {
	content: "";
	background: var(--xun-primary, var(--color-primary));
	opacity: 0;
	border-radius: 50%;
	width: .375rem;
	height: .375rem;
	animation: 2s ease-out infinite smartCaptchaPulse;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)scale(.5)
}

.xun-captcha-smart-pulse:after {
	animation-delay: 1s
}

@keyframes smartCaptchaPulse {
	0% {
		opacity: .8;
		transform: translate(-50%, -50%)scale(.4)
	}

	to {
		opacity: 0;
		transform: translate(-50%, -50%)scale(6)
	}
}

.xun-captcha-smart-wrap.is-checking .xun-captcha-smart-track {
	pointer-events: none
}

.xun-captcha-smart-wrap.is-checking .xun-captcha-smart-pulse {
	animation: 1s linear infinite smartCaptchaSpin
}

.xun-captcha-smart-wrap.is-checking .xun-captcha-smart-pulse:before,
.xun-captcha-smart-wrap.is-checking .xun-captcha-smart-pulse:after {
	opacity: 0;
	animation: none
}

@keyframes smartCaptchaSpin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-captcha-smart-wrap.is-verified .xun-captcha-smart-track {
	pointer-events: none;
	background: rgba(16, 185, 129, .1);
	border-color: #10b981
}

.xun-captcha-smart-wrap.is-verified .xun-captcha-smart-pulse {
	display: none
}

.xun-captcha-smart-wrap.is-verified .xun-captcha-smart-hint {
	color: #10b981;
	font-weight: 500
}

.xun-captcha-smart-wrap.is-verified .xun-captcha-smart-text-before,
.xun-captcha-smart-wrap.is-verified .xun-captcha-smart-text-after {
	color: #10b981
}

.xun-captcha-geetest-wrap {
	background: var(--xun-geetest-bg, transparent);
	border: var(--xun-geetest-border, none);
	border-radius: var(--xun-geetest-radius, 0);
	width: 100%;
	min-height: 2.5rem;
	padding: var(--xun-geetest-padding, 0);
	justify-content: flex-start;
	align-items: center;
	display: flex
}

.xun-captcha-geetest {
	width: 100%;
	max-width: var(--xun-geetest-max-width, 100%)
}

.xun-captcha-geetest,
.xun-captcha-geetest * {
	box-sizing: border-box
}

.xun-captcha-geetest>* {
	display: block;
	width: 100% !important;
	max-width: 100% !important
}

.xun-captcha-geetest iframe,
.xun-captcha-geetest-wrap .geetest_captcha,
.xun-captcha-geetest-wrap .geetest_popup_wrap,
.xun-captcha-geetest-wrap .geetest_captcha .geetest_holder,
.xun-captcha-geetest-wrap .geetest_popup_wrap .geetest_holder {
	width: 100% !important;
	max-width: 100% !important
}

.xun-captcha-geetest-wrap .geetest_holder svg,
.xun-captcha-geetest-wrap .geetest_holder img {
	display: block
}

.xun-captcha-click-popup {
	opacity: 0;
	visibility: hidden;
	z-index: 10000;
	background: rgba(0, 0, 0, .5);
	justify-content: center;
	align-items: center;
	transition: all .3s;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-captcha-click-popup.is-visible {
	opacity: 1;
	visibility: visible
}

.xun-captcha-click-popup-content {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	width: 320px;
	max-width: 90vw;
	transition: transform .3s;
	overflow: hidden;
	transform: scale(.9);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .2)
}

.xun-captcha-click-popup.is-visible .xun-captcha-click-popup-content {
	transform: scale(1)
}

.xun-captcha-click-popup-header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-captcha-click-popup-header .xun-captcha-click-hint {
	color: var(--color-text);
	margin: 0;
	font-size: .875rem;
	font-weight: 500
}

.xun-captcha-click-popup-close {
	border-radius: var(--xun-radius-sm, 6px);
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-captcha-click-popup-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text-secondary)
}

.xun-captcha-slider-popup {
	opacity: 0;
	visibility: hidden;
	z-index: 10000;
	background: rgba(0, 0, 0, .5);
	justify-content: center;
	align-items: center;
	transition: all .3s;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-captcha-slider-popup.is-visible {
	opacity: 1;
	visibility: visible
}

.xun-captcha-slider-popup-content {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	width: 360px;
	max-width: 92vw;
	transition: transform .3s;
	overflow: hidden;
	transform: scale(.9);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .2)
}

.xun-captcha-slider-popup.is-visible .xun-captcha-slider-popup-content {
	transform: scale(1)
}

.xun-captcha-slider-popup-header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-captcha-slider-popup-hint {
	color: var(--color-text);
	margin: 0;
	font-size: .875rem;
	font-weight: 500
}

.xun-captcha-slider-popup-close {
	border-radius: var(--xun-radius-sm, 6px);
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-captcha-slider-popup-close:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text-secondary)
}

.xun-captcha-slider-popup-body {
	padding: 1rem
}

.xun-captcha-slider-popup .xun-captcha-slider-bg {
	opacity: 1;
	max-height: 220px;
	margin-bottom: .5rem
}

.xun-captcha-slider-popup-footer {
	border-top: 1px solid var(--color-border);
	justify-content: flex-end;
	gap: .5rem;
	padding: .75rem 1rem;
	display: flex
}

.xun-captcha-click-popup .xun-captcha-click-image {
	background: var(--color-fill-quaternary);
	width: 100%;
	min-height: 150px;
	display: block;
	position: relative
}

.xun-captcha-click-popup .xun-captcha-click-image img {
	cursor: crosshair;
	width: 100%;
	height: auto;
	min-height: 150px;
	display: block
}

.xun-captcha-click-marks {
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-captcha-click-marker {
	color: #fff;
	background: var(--xun-primary, var(--color-primary));
	pointer-events: none;
	border: 2px solid #fff;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -.75rem;
	margin-left: -.75rem;
	font-size: .75rem;
	font-weight: 600;
	animation: .2s ease-out captchaMarkerPop;
	display: flex;
	position: absolute;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
}

@keyframes captchaMarkerPop {
	0% {
		opacity: 0;
		transform: scale(0)
	}

	50% {
		transform: scale(1.2)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.xun-captcha-click-popup-footer {
	border-top: 1px solid var(--color-border);
	justify-content: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-captcha-refresh-btn {
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	border: none;
	padding: .375rem .75rem;
	font-size: .75rem;
	transition: all .2s
}

.xun-captcha-refresh-btn:hover {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary)
}

.xun-captcha-field.has-error .xun-captcha-input,
.xun-captcha-field.has-error .xun-captcha-slider-track,
.xun-captcha-field.has-error .xun-captcha-smart-track {
	border-color: #ef4444
}

.xun-captcha-error {
	color: #ef4444;
	margin-top: .25rem;
	font-size: .75rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-captcha-image-wrap .xun-captcha-input {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-captcha-image {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-captcha-slider-track {
		background: var(--color-fill-tertiary);
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-captcha-slider-btn {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-captcha-smart-track {
		background: var(--color-fill-tertiary);
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-captcha-click-popup-content,
	:root:not(.light) .xun-captcha-slider-popup-content {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-captcha-click-popup .xun-captcha-click-image,
	:root:not(.light) .xun-captcha-refresh-btn {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-captcha-refresh-btn:hover {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-captcha-image-wrap .xun-captcha-input {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary)
}

.dark .xun-captcha-image {
	background: var(--color-fill-tertiary)
}

.dark .xun-captcha-slider-track {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border-secondary)
}

.dark .xun-captcha-slider-btn {
	background: var(--color-bg-container)
}

.dark .xun-captcha-smart-track {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border-secondary)
}

.dark .xun-captcha-click-popup-content,
.dark .xun-captcha-slider-popup-content {
	background: var(--color-bg-container)
}

.dark .xun-captcha-click-popup .xun-captcha-click-image,
.dark .xun-captcha-refresh-btn {
	background: var(--color-fill-tertiary)
}

.dark .xun-captcha-refresh-btn:hover {
	background: var(--color-fill-secondary)
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget {
	background-color: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-card);
	padding: 1rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget-title,
.xun-widget-title {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text);
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget ul {
	margin: 0;
	padding: 0;
	list-style: none
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget ul li {
	border-bottom: 1px solid var(--color-border-secondary);
	color: var(--color-text-secondary);
	padding: .5rem 0;
	font-size: .875rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget ul li a {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color .2s
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget ul li a:hover {
	color: var(--xun-primary, var(--color-primary))
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_search .search-form {
	gap: .5rem;
	display: flex
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_search .search-field {
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-fill-tertiary);
	color: var(--color-text);
	outline: none;
	flex: 1;
	padding: .5rem .75rem;
	font-size: .875rem;
	transition: border-color .2s
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_search .search-field:focus {
	border-color: var(--xun-primary, var(--color-primary))
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_search .search-submit {
	color: #fff;
	background: var(--xun-primary, var(--color-primary));
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	border: none;
	padding: .5rem 1rem;
	font-size: .875rem;
	transition: opacity .2s
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_search .search-submit:hover {
	opacity: .9
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar table {
	border-collapse: collapse;
	width: 100%;
	font-size: .8125rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar caption {
	color: var(--color-text);
	margin-bottom: .5rem;
	font-weight: 500
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar :is(th, td) {
	text-align: center;
	padding: .375rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar th {
	color: var(--color-text-tertiary);
	font-weight: 500
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar td {
	color: var(--color-text-secondary)
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar td a {
	color: #fff;
	font-weight: 500;
	display: block
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_calendar #today {
	background: var(--xun-primary, var(--color-primary));
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px)
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_tag_cloud .tagcloud {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_tag_cloud .tagcloud a {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .25rem .625rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-block;
	font-size: .8125rem !important
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_tag_cloud .tagcloud a:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_text .textwidget {
	color: var(--color-text-secondary);
	font-size: .875rem;
	line-height: 1.7
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_text .textwidget p {
	margin: 0 0 .75rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_text .textwidget p:last-child {
	margin-bottom: 0
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) :is(.widget_recent_entries, .widget_recent_comments) ul li {
	flex-direction: column;
	gap: .125rem;
	display: flex
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_recent_entries .post-date {
	color: var(--color-text-quaternary);
	font-size: .75rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget select {
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-fill-tertiary);
	width: 100%;
	color: var(--color-text);
	outline: none;
	padding: .5rem .75rem;
	font-size: .875rem
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget select:focus {
	border-color: var(--xun-primary, var(--color-primary))
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_rss .rss-date {
	color: var(--color-text-quaternary);
	margin-top: .25rem;
	font-size: .75rem;
	display: block
}

:is(.xun-single-sidebar, .xun-page-sidebar, .xun-sidebar) .widget_rss .rssSummary {
	color: var(--color-text-tertiary);
	margin-top: .25rem;
	font-size: .8125rem
}

.xun-widget-author {
	overflow: hidden;
	padding: 0 !important
}

.xun-author-cover {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	height: 80px
}

.xun-author-header {
	z-index: 1;
	justify-content: center;
	margin-top: -40px;
	margin-bottom: .75rem;
	display: flex;
	position: relative
}

.xun-author-no-cover .xun-author-header {
	margin-top: 1rem
}

.xun-author-avatar-link {
	background: var(--color-bg-container);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	padding: 3px;
	line-height: 0;
	display: inline-flex
}

.xun-author-avatar-shell {
	flex: 0 0 80px;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	line-height: 0;
	display: inline-flex;
	position: relative
}

.xun-author-avatar {
	object-fit: cover;
	border: 3px solid var(--color-bg-container);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.xun-author-avatar-link:hover .xun-author-avatar {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.xun-author-avatar-shell .xun-avatar-verified-badge {
	border: 2px solid var(--color-bg-container);
	box-sizing: content-box;
	bottom: -.05rem;
	right: .25rem;
	transform: none
}

.xun-author-info {
	text-align: center;
	margin-bottom: 1rem;
	padding: 0 1.25rem
}

.xun-author-name {
	color: var(--color-text);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s;
	display: block
}

.xun-author-name:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-author-bio {
	color: var(--color-text-tertiary);
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: .5rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-author-stats {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	grid-template-columns: repeat(4, 1fr);
	gap: .25rem;
	margin: 0 .75rem .75rem;
	padding: .875rem 1rem;
	display: grid
}

.xun-author-stat {
	flex-direction: column;
	align-items: center;
	gap: .125rem;
	display: flex
}

.xun-author-stat-value {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2
}

.xun-author-stat-label {
	color: var(--color-text-quaternary);
	font-size: .6875rem
}

.xun-author-action {
	padding: .875rem 1.25rem 1.25rem
}

.xun-author-action .xun-follow-btn {
	justify-content: center;
	width: 100%
}

.xun-follow-btn.xun-following {
	border: 1px solid var(--color-border)
}

.xun-follow-btn.xun-following:hover .xun-follow-text {
	display: none
}

.xun-follow-btn.xun-following:hover .xun-unfollow-text {
	color: var(--color-error);
	display: inline !important
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-author-stats {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-author-stats {
	background: var(--color-fill-tertiary)
}

.xun-widget-community-user .xun-community-user-card {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-widget-community-user .xun-community-user-header {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-widget-community-user .xun-community-user-avatar {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: 50%;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: block;
	overflow: hidden
}

.xun-widget-community-user .xun-community-user-avatar img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-widget-community-user .xun-community-user-info {
	flex: 1;
	min-width: 0
}

.xun-widget-community-user .xun-community-user-name {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	display: block
}

.xun-widget-community-user .xun-community-user-name:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-widget-community-user .xun-community-user-meta {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .35rem;
	font-size: .75rem;
	display: flex
}

.xun-widget-community-user .xun-user-badges {
	justify-content: flex-start;
	margin-top: .35rem
}

.xun-widget-community-user .xun-community-user-meta-item {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-widget-community-user .xun-community-user-bio {
	color: var(--color-text-secondary);
	margin: .5rem 0 0;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-widget-community-user .xun-community-user-stats {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	padding: .75rem;
	display: grid
}

.xun-widget-community-user .xun-community-user-stat {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: .125rem;
	display: flex
}

.xun-widget-community-user .xun-community-user-stat-value {
	color: var(--color-text);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2
}

.xun-widget-community-user .xun-community-user-stat-label {
	color: var(--color-text-quaternary);
	font-size: .6875rem
}

.xun-widget-community-user .xun-community-user-actions {
	gap: .5rem;
	display: flex
}

.xun-widget-community-user .xun-community-user-actions .btn {
	flex: 1;
	justify-content: center
}

.xun-widget-community-user .xun-community-user-guest {
	text-align: center;
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	padding: .75rem
}

.xun-widget-community-user .xun-community-user-guest-title {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: .95rem;
	font-weight: 600
}

.xun-widget-community-user .xun-community-user-guest-desc {
	color: var(--color-text-secondary);
	margin: .25rem 0 .75rem;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-widget-community-user .xun-community-user-guest-actions {
	gap: .5rem;
	display: flex
}

.xun-widget-community-user .xun-community-user-guest-actions .btn {
	flex: 1;
	justify-content: center
}

@media(max-width:480px) {
	.xun-widget-community-user .xun-community-user-stats {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-widget-community-user .xun-community-user-actions,
	.xun-widget-community-user .xun-community-user-guest-actions {
		flex-direction: column
	}

	.xun-widget-community-user .xun-community-user-actions .btn,
	.xun-widget-community-user .xun-community-user-guest-actions .btn {
		width: 100%
	}
}

.xun-related-posts-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-related-post-item {
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	gap: .75rem;
	padding: .5rem;
	text-decoration: none;
	transition: background-color .2s;
	display: flex
}

.xun-related-post-item:hover {
	background-color: var(--color-fill-quaternary)
}

.xun-related-post-thumb {
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-fill-quaternary);
	flex-shrink: 0;
	width: 64px;
	height: 48px;
	overflow: hidden
}

.xun-related-post-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s
}

.xun-related-post-item:hover .xun-related-post-thumb img {
	transform: scale(1.05)
}

.xun-related-post-info {
	flex: 1;
	min-width: 0
}

.xun-related-post-title {
	color: var(--color-text);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.5;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-related-post-item:not(.has-thumb) .xun-related-post-title {
	-webkit-line-clamp: 1;
	line-clamp: 1
}

.xun-related-post-item:hover .xun-related-post-title {
	color: var(--xun-primary, var(--color-primary))
}

.xun-related-post-meta {
	color: var(--color-text-quaternary);
	align-items: center;
	gap: .75rem;
	margin-top: .25rem;
	font-size: .75rem;
	display: flex
}

.xun-related-post-views {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-related-post-views svg {
	opacity: .7;
	flex-shrink: 0
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-related-post-item:hover {
		background-color: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-related-post-thumb {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-related-post-item:hover {
	background-color: var(--color-fill-tertiary)
}

.dark .xun-related-post-thumb {
	background: var(--color-fill-tertiary)
}

.xun-tags-list {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-tag-item {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	gap: .25rem;
	padding: .25rem .625rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-tag-item:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-tag-name {
	line-height: 1.4
}

.xun-tag-count {
	color: var(--color-text-quaternary);
	background: var(--color-bg-container);
	border-radius: 10px;
	padding: 0 .375rem;
	font-size: .75rem;
	line-height: 1.4
}

.xun-tag-item:hover .xun-tag-count {
	color: var(--xun-primary, var(--color-primary))
}

.xun-tag-item.xun-tag-colorful {
	color: var(--tag-color);
	border: 1px solid var(--tag-color);
	background: #fff
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tag-item.xun-tag-colorful {
		background: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tag-item.xun-tag-colorful {
			background: color-mix(in srgb, var(--tag-color)10%, transparent)
		}
	}

	.xun-tag-item.xun-tag-colorful {
		border: 1px solid var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tag-item.xun-tag-colorful {
			border: 1px solid color-mix(in srgb, var(--tag-color)20%, transparent)
		}
	}
}

.xun-tag-item.xun-tag-colorful:hover {
	color: #fff;
	background: var(--tag-color);
	border-color: var(--tag-color)
}

.xun-tag-item.xun-tag-colorful .xun-tag-count {
	color: var(--tag-color);
	background: rgba(255, 255, 255, .8)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tag-item.xun-tag-colorful .xun-tag-count {
		background: var(--tag-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tag-item.xun-tag-colorful .xun-tag-count {
			background: color-mix(in srgb, var(--tag-color)15%, var(--color-bg-container))
		}
	}
}

.xun-tag-item.xun-tag-colorful:hover .xun-tag-count {
	color: #fff;
	background: rgba(255, 255, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tag-item.xun-tag-colorful:hover .xun-tag-count {
		background: #fff
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tag-item.xun-tag-colorful:hover .xun-tag-count {
			background: color-mix(in srgb, #fff 20%, var(--tag-color))
		}
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-tag-item {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-tag-item:hover {
		background: var(--color-primary-bg)
	}

	:root:not(.light) .xun-tag-count {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-tag-item.xun-tag-colorful {
		background: rgba(0, 0, 0, .3)
	}

	:root:not(.light) .xun-tag-item.xun-tag-colorful .xun-tag-count {
		background: rgba(0, 0, 0, .4)
	}
}

.dark .xun-tag-item {
	background: var(--color-fill-tertiary)
}

.dark .xun-tag-item:hover {
	background: var(--color-primary-bg)
}

.dark .xun-tag-count {
	background: var(--color-fill-secondary)
}

.dark .xun-tag-item.xun-tag-colorful {
	background: rgba(0, 0, 0, .3)
}

.dark .xun-tag-item.xun-tag-colorful .xun-tag-count {
	background: rgba(0, 0, 0, .4)
}

.xun-html-content {
	color: var(--color-text-secondary);
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-size: .875rem;
	line-height: 1.7
}

.xun-html-content p {
	margin: 0 0 .75rem
}

.xun-html-content p:last-child {
	margin-bottom: 0
}

.xun-html-content a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-html-content a:hover {
	text-decoration: underline
}

.xun-html-content img {
	border-radius: var(--xun-radius-sm, 4px);
	max-width: 100%;
	height: auto
}

.xun-html-content ul,
.xun-html-content ol {
	margin: .5rem 0;
	padding-left: 1.25rem
}

.xun-html-content li {
	margin-bottom: .25rem
}

.xun-widget-download .xun-widget-title {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-download-badge {
	border-radius: 9999px;
	margin-left: auto;
	padding: .125rem .5rem;
	font-size: .6875rem;
	font-weight: 500
}

.xun-download-badge-free {
	background: var(--color-success-bg);
	color: var(--color-success)
}

.xun-download-badge-paid {
	background: var(--color-warning-bg);
	color: var(--color-warning)
}

.xun-download-badge-vip_free,
.xun-download-badge-vip_only,
.xun-download-badge-vip_exclusive,
.xun-download-badge-vip_exclusive_only,
.xun-download-badge-permanent {
	background: var(--color-primary-bg);
	color: var(--xun-primary, var(--color-primary))
}

.xun-download-badge-vip_discount {
	background: var(--color-error-bg);
	color: var(--color-error)
}

.xun-download-attrs {
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none
}

.xun-download-attr {
	border-bottom: 1px solid var(--color-border-secondary);
	align-items: center;
	padding: .375rem 0;
	font-size: .8125rem;
	display: flex
}

.xun-download-attr-price {
	flex-direction: column;
	align-items: flex-start
}

.xun-download-attr-price.has-note {
	border-bottom: none;
	padding-bottom: 0
}

.xun-download-attr-note {
	border-top: 1px solid var(--color-border-secondary);
	border-bottom: none;
	padding-top: .5rem
}

.xun-download-price-row {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-download-attr:last-child {
	border-bottom: none
}

.xun-download-attr-label {
	color: var(--color-text-tertiary)
}

.xun-download-attr-value {
	color: var(--color-text);
	font-size: .8125rem;
	font-weight: 500
}

.xun-download-price-original {
	color: var(--color-text-quaternary);
	margin-right: .375rem;
	text-decoration: line-through
}

.xun-download-price-current {
	color: var(--color-error);
	font-weight: 600
}

.xun-download-price-or {
	color: var(--color-text-quaternary);
	margin: 0 .25rem;
	font-size: .75rem
}

.xun-download-price-points {
	color: var(--color-error);
	font-weight: 600
}

.xun-download-price-free {
	color: var(--color-success);
	font-weight: 500
}

.xun-download-discount {
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-error-bg);
	color: var(--color-error);
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500
}

.xun-download-notice {
	color: var(--color-text-tertiary);
	margin: 0 0 .75rem;
	font-size: .8125rem
}

.xun-download-custom-notice {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .75rem;
	line-height: 1.6
}

.xun-download-custom-notice a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-download-custom-notice a:hover {
	text-decoration: underline
}

.xun-download-actions {
	border-top: 1px solid var(--color-border-secondary);
	margin-top: .75rem;
	padding-top: .75rem
}

.xun-download-btns {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-download-btns .btn {
	justify-content: center;
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-download-btns .btn svg {
	flex-shrink: 0
}

.xun-download-separator {
	width: 100%;
	color: var(--color-text-quaternary);
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	display: flex
}

.xun-download-separator:before,
.xun-download-separator:after {
	content: "";
	background: var(--color-border-secondary);
	flex: 1;
	height: 1px
}

.xun-download-btn-full {
	justify-content: center;
	width: 100%;
	height: 2.375rem;
	padding: 0 1rem;
	font-size: .875rem
}

.xun-download-demo-link {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none;
	transition: color .2s
}

.xun-download-demo-link:hover {
	text-decoration: underline
}

.xun-download-code {
	font-size: .6875rem;
	font-family: var(--font-mono);
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(255, 255, 255, .2);
	padding: .125rem .375rem
}

.xun-download-password {
	background: var(--color-warning-bg);
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	padding: .5rem .75rem;
	display: flex
}

.xun-download-password-label {
	color: var(--color-warning);
	font-size: .75rem
}

.xun-download-password-value {
	font-size: .8125rem;
	font-family: var(--font-mono);
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-sm, 4px);
	color: var(--color-text);
	flex: 1;
	padding: .125rem .375rem
}

.xun-download-copy {
	border-radius: var(--xun-radius-sm, 4px);
	color: var(--color-warning);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: .25rem;
	transition: background-color .2s;
	display: flex
}

.xun-download-copy:hover {
	background: rgba(0, 0, 0, .1)
}

.xun-download-copy.copied {
	color: var(--color-success)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-download-attrs {
		background: 0 0
	}

	:root:not(.light) .xun-download-password {
		background: var(--color-warning-bg)
	}

	:root:not(.light) .xun-download-copy:hover {
		background: rgba(255, 255, 255, .1)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-download-password {
			background: rgba(248, 168, 0, .15)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-download-password {
				background: color-mix(in srgb, var(--color-warning)15%, transparent)
			}
		}
	}
}

.dark .xun-download-attrs {
	background: 0 0
}

.dark .xun-download-password {
	background: var(--color-warning-bg)
}

.dark .xun-download-copy:hover {
	background: rgba(255, 255, 255, .1)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-download-password {
		background: rgba(248, 168, 0, .15)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-download-password {
			background: color-mix(in srgb, var(--color-warning)15%, transparent)
		}
	}
}

.xun-download-tip {
	color: var(--color-text-quaternary);
	justify-content: center;
	align-items: center;
	margin: .75rem 0 0;
	font-size: .75rem;
	display: flex
}

.js-xun-get-download .xun-download-btn-spinner,
.js-xun-get-download .xun-download-btn-loading,
.js-xun-get-download.is-loading .xun-download-btn-icon,
.js-xun-get-download.is-loading .xun-download-btn-text {
	display: none
}

.js-xun-get-download.is-loading .xun-download-btn-spinner {
	display: block
}

.js-xun-get-download.is-loading .xun-download-btn-loading {
	display: inline
}

.xun-download-modal {
	width: 400px;
	max-width: 90vw
}

.xun-download-modal .xun-download-modal-header {
	border-bottom: 1px solid var(--color-border-secondary);
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	display: flex
}

.xun-download-modal-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	display: flex
}

.xun-download-modal-title svg {
	color: var(--xun-primary, var(--color-primary));
	flex-shrink: 0
}

.xun-download-modal .xun-download-modal-close {
	width: 2rem;
	height: 2rem;
	color: var(--color-text-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-download-modal .xun-download-modal-close:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-download-modal-body {
	flex: 1;
	padding: 1.25rem 1.5rem;
	overflow-y: auto
}

.xun-download-modal-section {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: 1rem;
	margin-bottom: .875rem;
	padding: 1rem;
	transition: border-color .2s;
	display: flex
}

.xun-download-modal-section:last-child {
	margin-bottom: 0
}

.xun-download-modal-section:hover {
	border-color: var(--color-border)
}

.xun-download-modal-icon {
	border-radius: var(--xun-radius-sm, 6px);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	display: flex
}

.xun-download-modal-section:not(.xun-download-modal-section-code) .xun-download-modal-icon {
	background: var(--color-warning-bg);
	color: var(--color-warning)
}

.xun-download-modal-section-code .xun-download-modal-icon {
	background: var(--color-primary-bg);
	color: var(--xun-primary, var(--color-primary))
}

.xun-download-modal-info {
	flex: 1;
	min-width: 0
}

.xun-download-modal-label {
	color: var(--color-text-tertiary);
	margin-bottom: .25rem;
	font-size: .75rem;
	font-weight: 500;
	display: block
}

.xun-download-modal-value {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-download-modal-code {
	font-size: .9375rem;
	font-weight: 600;
	font-family: var(--font-mono);
	letter-spacing: .5px;
	color: var(--color-text);
	word-break: break-all;
	background: 0 0;
	flex: 1;
	padding: 0
}

.xun-download-modal-copy {
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius-sm, 6px);
	background: var(--color-bg-container);
	width: 36px;
	height: 36px;
	color: var(--color-text-secondary);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-download-modal-copy:hover {
	color: var(--xun-primary, var(--color-primary));
	border-color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-download-modal-copy.copied {
	color: var(--color-success);
	border-color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-download-modal-footer {
	border-top: 1px solid var(--color-border-secondary);
	background: var(--color-fill-quaternary);
	border-radius: 0 0 var(--xun-radius, 8px)var(--xun-radius, 8px);
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.5rem;
	display: flex
}

.xun-download-modal-footer .xun-download-modal-cancel {
	flex: 1
}

.xun-download-modal-footer .xun-download-modal-go {
	flex: 2
}

.xun-download-modal-footer .btn {
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-download-modal-footer .btn svg {
	flex-shrink: 0
}

.xun-download-modal-go {
	background: var(--xun-primary, var(--color-primary));
	color: #fff;
	border: none
}

.xun-download-modal-go:hover {
	background: var(--color-primary-hover)
}

.xun-download-modal-go:active {
	background: var(--color-primary-active)
}

.xun-download-modal-empty {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	display: flex
}

@media(max-width:480px) {
	.xun-download-modal {
		width: 100%;
		max-width: calc(100vw - 2rem)
	}

	.xun-download-modal .xun-download-modal-header {
		padding: 1rem 1.25rem
	}

	.xun-download-modal-title {
		font-size: .9375rem
	}

	.xun-download-modal-title span {
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 200px;
		overflow: hidden
	}

	.xun-download-modal-body {
		padding: 1rem 1.25rem
	}

	.xun-download-modal-section {
		gap: .75rem;
		padding: .875rem
	}

	.xun-download-modal-icon {
		width: 36px;
		height: 36px
	}

	.xun-download-modal-icon svg {
		width: 18px;
		height: 18px
	}

	.xun-download-modal-code {
		font-size: .875rem
	}

	.xun-download-modal-copy {
		width: 32px;
		height: 32px
	}

	.xun-download-modal-footer {
		flex-direction: column;
		padding: .875rem 1.25rem
	}

	.xun-download-modal-footer .btn {
		width: 100%;
		height: 2.625rem
	}

	.xun-download-modal-footer .xun-download-modal-cancel,
	.xun-download-modal-footer .xun-download-modal-go {
		flex: none
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-download-modal-section {
		background: var(--color-fill-tertiary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-download-modal-section:hover {
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-download-modal-copy {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-download-modal-footer {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-download-modal-section {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border)
}

.dark .xun-download-modal-section:hover {
	border-color: var(--color-border-secondary)
}

.dark .xun-download-modal-copy {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-download-modal-footer {
	background: var(--color-fill-tertiary)
}

.xun-widget-comments-list {
	flex-direction: column;
	gap: 0;
	display: flex
}

.xun-widget-comment-item {
	border-radius: var(--xun-radius-sm, 4px);
	flex-direction: column;
	gap: 0;
	padding: .5rem;
	transition: background-color .2s;
	display: flex
}

.xun-widget-comment-item:hover {
	background-color: var(--color-fill-quaternary)
}

.xun-widget-comment-main {
	align-items: flex-start;
	gap: .625rem;
	display: flex
}

.xun-widget-comment-avatar {
	background: var(--color-fill-quaternary);
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden
}

.xun-widget-comment-avatar img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s
}

.xun-widget-comment-item:hover .xun-widget-comment-avatar img {
	transform: scale(1.05)
}

.xun-widget-comment-body {
	flex: 1;
	min-width: 0
}

.xun-widget-comment-header {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .125rem;
	display: flex
}

.xun-widget-comment-author {
	color: var(--color-text);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4
}

.xun-widget-comment-date {
	color: var(--color-text-quaternary);
	font-size: .6875rem;
	line-height: 1.4
}

.xun-widget-comment-excerpt {
	color: var(--color-text-secondary);
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: .25rem;
	font-size: .8125rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-widget-comment-excerpt:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-widget-comment-post {
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: .375rem;
	padding: .25rem .5rem;
	font-size: .75rem;
	text-decoration: none;
	transition: all .2s;
	display: block;
	overflow: hidden
}

.xun-widget-comment-post:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-widget-comment-item:not(.has-avatar) {
	padding-left: .375rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-widget-comment-item:hover {
		background-color: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-widget-comment-avatar {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-widget-comment-item:hover {
	background-color: var(--color-fill-tertiary)
}

.dark .xun-widget-comment-avatar {
	background: var(--color-fill-tertiary)
}

.xun-toc {
	display: none
}

.xun-toc.has-toc {
	display: block
}

.xun-toc-content {
	scrollbar-width: thin;
	scrollbar-color: var(--color-border-secondary)transparent;
	max-height: 400px;
	overflow-y: auto
}

.xun-toc-content::-webkit-scrollbar {
	width: 4px
}

.xun-toc-content::-webkit-scrollbar-track {
	background: 0 0
}

.xun-toc-content::-webkit-scrollbar-thumb {
	background: var(--color-border-secondary);
	border-radius: 2px
}

.xun-toc-content::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-quaternary)
}

.xun-toc-list {
	margin: 0;
	padding: 0;
	list-style: none
}

.xun-toc-item {
	margin: 0;
	padding: 0;
	position: relative
}

.xun-toc-link {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius-sm, 4px);
	align-items: baseline;
	gap: .5rem;
	padding: .5rem .75rem;
	font-size: .875rem;
	line-height: 1.5;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-toc-link:hover {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-fill-quaternary)
}

.xun-toc-link.is-active {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg);
	font-weight: 500
}

.xun-toc-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	overflow: hidden
}

.xun-toc-number {
	min-width: 1.5rem;
	color: var(--color-text-tertiary);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	font-size: .8125rem;
	font-weight: 500
}

.xun-toc-link.is-active .xun-toc-number {
	color: var(--xun-primary, var(--color-primary))
}

.xun-toc-level-2 .xun-toc-link {
	padding-left: .75rem
}

.xun-toc-level-3 .xun-toc-link {
	padding-left: 1.5rem;
	font-size: .8125rem
}

.xun-toc-level-4 .xun-toc-link {
	color: var(--color-text-tertiary);
	padding-left: 2.25rem;
	font-size: .8125rem
}

.xun-toc-level-4 .xun-toc-link:hover,
.xun-toc-level-4 .xun-toc-link.is-active {
	color: var(--xun-primary, var(--color-primary))
}

.xun-toc-level-5 .xun-toc-link {
	color: var(--color-text-tertiary);
	padding-left: 3rem;
	font-size: .75rem
}

.xun-toc-level-6 .xun-toc-link {
	color: var(--color-text-quaternary);
	padding-left: 3.75rem;
	font-size: .75rem
}

.xun-toc[data-style=minimal] .xun-toc-link {
	background: 0 0;
	border-radius: 0;
	padding: .375rem 0
}

.xun-toc[data-style=minimal] .xun-toc-link:hover,
.xun-toc[data-style=minimal] .xun-toc-link.is-active {
	background: 0 0
}

.xun-toc[data-style=minimal] .xun-toc-level-2 .xun-toc-link {
	padding-left: 0
}

.xun-toc[data-style=minimal] .xun-toc-level-3 .xun-toc-link {
	padding-left: 1rem
}

.xun-toc[data-style=minimal] .xun-toc-level-4 .xun-toc-link {
	padding-left: 2rem
}

.xun-toc[data-style=minimal] .xun-toc-level-5 .xun-toc-link {
	padding-left: 3rem
}

.xun-toc[data-style=minimal] .xun-toc-level-6 .xun-toc-link {
	padding-left: 4rem
}

.xun-toc[data-style=line] .xun-toc-content {
	border-left: 2px solid var(--color-border-secondary)
}

.xun-toc[data-style=line] .xun-toc-link {
	background: 0 0;
	border-left: 2px solid #0000;
	border-radius: 0;
	margin-left: -2px;
	padding: .375rem 0 .375rem 1rem;
	position: relative
}

.xun-toc[data-style=line] .xun-toc-link:hover {
	border-left-color: var(--color-border);
	background: 0 0
}

.xun-toc[data-style=line] .xun-toc-link.is-active {
	border-left-color: var(--xun-primary, var(--color-primary));
	background: 0 0
}

.xun-toc[data-style=line] .xun-toc-level-2 .xun-toc-link {
	padding-left: 1rem
}

.xun-toc[data-style=line] .xun-toc-level-3 .xun-toc-link {
	padding-left: 1.75rem
}

.xun-toc[data-style=line] .xun-toc-level-4 .xun-toc-link {
	padding-left: 2.5rem
}

.xun-toc[data-style=line] .xun-toc-level-5 .xun-toc-link {
	padding-left: 3.25rem
}

.xun-toc[data-style=line] .xun-toc-level-6 .xun-toc-link {
	padding-left: 4rem
}

.xun-toc[data-style=dot] .xun-toc-link {
	background: 0 0;
	border-radius: 0;
	padding: .375rem 0 .375rem 1.25rem;
	position: relative
}

.xun-toc[data-style=dot] .xun-toc-link:before {
	content: "";
	background: var(--color-border-secondary);
	border-radius: 50%;
	width: 6px;
	height: 6px;
	transition: all .2s;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-toc[data-style=dot] .xun-toc-link:hover {
	background: 0 0
}

.xun-toc[data-style=dot] .xun-toc-link:hover:before {
	background: var(--color-text-tertiary)
}

.xun-toc[data-style=dot] .xun-toc-link.is-active {
	background: 0 0
}

.xun-toc[data-style=dot] .xun-toc-link.is-active:before {
	background: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-toc[data-style=dot] .xun-toc-level-2 .xun-toc-link {
	padding-left: 1.25rem
}

.xun-toc[data-style=dot] .xun-toc-level-3 .xun-toc-link {
	padding-left: 2rem
}

.xun-toc[data-style=dot] .xun-toc-level-3 .xun-toc-link:before {
	width: 5px;
	height: 5px;
	left: .75rem
}

.xun-toc[data-style=dot] .xun-toc-level-4 .xun-toc-link {
	padding-left: 2.75rem
}

.xun-toc[data-style=dot] .xun-toc-level-4 .xun-toc-link:before {
	width: 4px;
	height: 4px;
	left: 1.5rem
}

.xun-toc[data-style=dot] .xun-toc-level-5 .xun-toc-link {
	padding-left: 3.5rem
}

.xun-toc[data-style=dot] .xun-toc-level-5 .xun-toc-link:before {
	width: 4px;
	height: 4px;
	left: 2.25rem
}

.xun-toc[data-style=dot] .xun-toc-level-6 .xun-toc-link {
	padding-left: 4.25rem
}

.xun-toc[data-style=dot] .xun-toc-level-6 .xun-toc-link:before {
	width: 4px;
	height: 4px;
	left: 3rem
}

.xun-toc[data-style=card] .xun-toc-item {
	margin-bottom: .25rem
}

.xun-toc[data-style=card] .xun-toc-item:last-child {
	margin-bottom: 0
}

.xun-toc[data-style=card] .xun-toc-link {
	background: var(--color-fill-quaternary);
	border: 1px solid #0000;
	padding: .625rem .875rem
}

.xun-toc[data-style=card] .xun-toc-link:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border-secondary)
}

.xun-toc[data-style=card] .xun-toc-link.is-active {
	background: var(--color-primary-bg);
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-toc[data-style=card] .xun-toc-level-2 .xun-toc-link {
	padding-left: .875rem
}

.xun-toc[data-style=card] .xun-toc-level-3 .xun-toc-link {
	margin-left: .75rem;
	padding-left: .875rem
}

.xun-toc[data-style=card] .xun-toc-level-4 .xun-toc-link {
	margin-left: 1.5rem;
	padding-left: .875rem
}

.xun-toc[data-style=card] .xun-toc-level-5 .xun-toc-link {
	margin-left: 2.25rem;
	padding-left: .875rem
}

.xun-toc[data-style=card] .xun-toc-level-6 .xun-toc-link {
	margin-left: 3rem;
	padding-left: .875rem
}

.xun-toc-empty {
	text-align: center;
	color: var(--color-text-tertiary);
	padding: .5rem 0;
	font-size: .8125rem
}

@media(max-width:768px) {
	.xun-toc-content {
		max-height: 300px
	}

	.xun-toc-link {
		padding: .5rem .75rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-toc[data-style=card] .xun-toc-link {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-toc[data-style=card] .xun-toc-link:hover {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-toc[data-style=card] .xun-toc-link {
	background: var(--color-fill-tertiary)
}

.dark .xun-toc[data-style=card] .xun-toc-link:hover {
	background: var(--color-fill-secondary)
}

.xun-announcement-list {
	margin: 0;
	padding: 0;
	list-style: none
}

.xun-announcement-item {
	border-bottom: 1px solid var(--color-border-secondary);
	align-items: flex-start;
	gap: .5rem;
	padding: .5rem 0;
	display: flex
}

.xun-announcement-item:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.xun-announcement-icon {
	width: 20px;
	height: 20px;
	color: var(--xun-primary, var(--color-primary));
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	margin-top: .125rem;
	display: flex
}

.xun-announcement-icon svg {
	width: 14px;
	height: 14px
}

.xun-announcement-content {
	flex: 1;
	min-width: 0
}

.xun-announcement-title {
	color: var(--color-text-secondary);
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	font-size: .875rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s;
	display: block;
	overflow: hidden
}

.xun-announcement-title:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-announcement-date {
	color: var(--color-text-quaternary);
	margin-top: .125rem;
	font-size: .75rem;
	display: block
}

.xun-announcement-widget--card .xun-announcement-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	border: none;
	margin-bottom: .5rem;
	padding: .625rem;
	transition: background-color .2s
}

.xun-announcement-widget--card .xun-announcement-item:last-child {
	margin-bottom: 0
}

.xun-announcement-widget--card .xun-announcement-item:hover {
	background: var(--color-fill-tertiary)
}

.xun-announcement-widget--minimal .xun-announcement-item {
	border-bottom: none;
	padding: .375rem 0
}

.xun-announcement-widget--minimal .xun-announcement-icon {
	display: none
}

.xun-announcement-widget--minimal .xun-announcement-title {
	padding-left: .75rem;
	position: relative
}

.xun-announcement-widget--minimal .xun-announcement-title:before {
	content: "";
	background: var(--color-text-quaternary);
	border-radius: 50%;
	width: 4px;
	height: 4px;
	transition: background-color .2s;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-announcement-widget--minimal .xun-announcement-title:hover:before {
	background: var(--xun-primary, var(--color-primary))
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-announcement-widget--card .xun-announcement-item {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-announcement-widget--card .xun-announcement-item:hover {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-announcement-widget--card .xun-announcement-item {
	background: var(--color-fill-tertiary)
}

.dark .xun-announcement-widget--card .xun-announcement-item:hover {
	background: var(--color-fill-secondary)
}

@media(max-width:768px) {
	body.xun-mobile-widgets-disabled :is(.xun-single-sidebar-cell, .xun-single-sidebar, .xun-page-sidebar-cell, .xun-page-sidebar, .xun-layout-sidebar-cell, .xun-layout-sidebar, .xun-sidebar, .widget-area) {
		display: none !important
	}
}

.xun-mobile-download-bar {
	display: none
}

@media(max-width:768px) {
	.xun-mobile-download-bar {
		margin-top: 1.25rem;
		display: block
	}

	.xun-mobile-download-bar-inner {
		background: var(--color-bg-container);
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--xun-radius, 8px);
		box-shadow: var(--shadow-card);
		padding: 1rem
	}

	.xun-mobile-download-bar-header {
		justify-content: space-between;
		align-items: center;
		margin-bottom: .75rem;
		display: flex
	}

	.xun-mobile-download-bar-title {
		color: var(--color-text);
		font-size: .9375rem;
		font-weight: 600
	}

	.xun-mobile-download-bar .xun-download-badge {
		border-radius: var(--xun-radius-sm, 4px);
		white-space: nowrap;
		flex-shrink: 0;
		align-items: center;
		padding: .25rem .5rem;
		font-size: .6875rem;
		font-weight: 500;
		display: inline-flex
	}

	.xun-mobile-download-bar-attrs {
		border-bottom: 1px solid var(--color-border-secondary);
		flex-wrap: wrap;
		gap: .5rem 1rem;
		margin-bottom: .875rem;
		padding-bottom: .875rem;
		font-size: .8125rem;
		display: flex
	}

	.xun-mobile-download-bar-attr {
		align-items: center;
		gap: .25rem;
		display: flex
	}

	.xun-mobile-download-bar-attr-label {
		color: var(--color-text-tertiary)
	}

	.xun-mobile-download-bar-attr-value {
		color: var(--color-text-secondary);
		font-weight: 500
	}

	.xun-mobile-download-bar-footer {
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		display: flex
	}

	.xun-mobile-download-bar-price {
		align-items: baseline;
		gap: .375rem;
		display: flex
	}

	.xun-mobile-download-bar-price-current {
		color: var(--color-error);
		font-size: 1.25rem;
		font-weight: 700
	}

	.xun-mobile-download-bar-price-original {
		color: var(--color-text-quaternary);
		font-size: .8125rem;
		text-decoration: line-through
	}

	.xun-mobile-download-bar-price-free {
		color: var(--color-success);
		font-size: 1rem;
		font-weight: 600
	}

	.xun-mobile-download-bar-discount {
		border-radius: var(--xun-radius-sm, 4px);
		color: var(--color-error);
		background: rgba(255, 77, 79, .1);
		margin-left: .25rem;
		padding: .125rem .375rem;
		font-size: .6875rem;
		font-weight: 500
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		.xun-mobile-download-bar-discount {
			background: rgba(253, 57, 63, .1)
		}

		@supports (color:color-mix(in lab, red, red)) {
			.xun-mobile-download-bar-discount {
				background: color-mix(in srgb, var(--color-error)10%, transparent)
			}
		}
	}

	.xun-mobile-download-bar .xun-download-content {
		flex-shrink: 0
	}

	.xun-mobile-download-bar .xun-download-actions {
		background: 0 0;
		border: 0;
		margin: 0;
		padding: 0
	}

	.xun-mobile-download-bar :is(.xun-download-notice, .xun-download-tip) {
		display: none !important
	}

	.xun-mobile-download-bar .xun-download-btns {
		align-items: center;
		gap: .5rem;
		display: flex
	}

	.xun-mobile-download-bar-inner.has-multiple-buttons .xun-mobile-download-bar-footer {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem
	}

	.xun-mobile-download-bar-inner.has-multiple-buttons .xun-download-content {
		flex-shrink: 1;
		width: 100%
	}

	.xun-mobile-download-bar-inner.has-multiple-buttons .xun-download-btns {
		flex-direction: column;
		align-items: stretch
	}

	.xun-mobile-download-bar-inner.has-multiple-buttons .btn {
		width: 100%
	}

	.xun-mobile-download-bar .xun-download-btn-full {
		width: auto
	}

	.xun-mobile-download-bar .btn {
		white-space: nowrap;
		border-radius: var(--xun-radius, 8px);
		cursor: pointer;
		border: none;
		outline: none;
		justify-content: center;
		align-items: center;
		gap: .375rem;
		padding: .5rem 1rem;
		font-size: .875rem;
		font-weight: 500;
		text-decoration: none;
		transition: all .2s;
		display: inline-flex
	}

	.xun-mobile-download-bar .btn-primary {
		background-color: var(--xun-primary, var(--color-primary));
		color: #fff
	}

	.xun-mobile-download-bar .btn-primary:hover,
	.xun-mobile-download-bar .btn-primary:active {
		background-color: var(--xun-primary-hover, var(--color-primary-active))
	}

	.xun-mobile-download-bar .btn-outline {
		border: 1px solid var(--color-border-secondary);
		color: var(--color-text-secondary);
		background-color: rgba(0, 0, 0, 0)
	}

	.xun-mobile-download-bar .btn-outline:disabled {
		opacity: .5;
		cursor: not-allowed
	}

	.xun-mobile-download-bar-inner.no-attrs .xun-mobile-download-bar-footer {
		margin-top: 0
	}

	.xun-mobile-download-bar-inner.no-attrs .xun-mobile-download-bar-header {
		margin-bottom: .875rem
	}
}

.xun-user-hero {
	background: 0 0
}

.xun-user-hero-bg {
	background-color: var(--xun-user-hero-bg-color, var(--xun-primary));
	background-image: var(--xun-user-hero-bg-image, none);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover
}

.xun-user-hero--has-image .xun-user-hero-bg {
	background-color: rgba(0, 0, 0, 0)
}

.xun-user-hero--has-image .xun-user-hero-bg:after {
	content: "";
	pointer-events: none;
	background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .45));
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.dark .xun-user-hero-bg:before {
	content: "";
	pointer-events: none;
	background: rgba(0, 0, 0, .35);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-hero-bg:before {
		content: "";
		pointer-events: none;
		background: rgba(0, 0, 0, .35);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}
}

.xun-user-hero-content {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem
}

.xun-user-hero-left {
	flex-direction: column;
	align-items: center;
	gap: .75rem
}

.xun-user-info {
	text-align: center;
	align-items: center
}

.xun-avatar-edit-btn {
	color: #fff;
	cursor: pointer;
	z-index: 2;
	background: rgba(0, 0, 0, .5);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	transition: background .2s;
	display: flex;
	position: absolute;
	bottom: 0;
	right: 0
}

.xun-avatar-edit-btn:hover {
	background: rgba(0, 0, 0, .7)
}

.xun-avatar-edit-btn svg {
	flex-shrink: 0;
	width: 12px;
	height: 12px
}

.xun-user-badges {
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	margin-top: .5rem;
	display: flex
}

.xun-user-hero .xun-user-level-badge,
.xun-user-hero .xun-user-vip-badge {
	box-sizing: border-box;
	color: #fff;
	white-space: nowrap;
	vertical-align: top;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	height: 22px;
	margin: 0;
	padding: 0 8px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	line-height: 22px;
	text-decoration: none;
	display: inline-flex;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.xun-user-hero .xun-user-level-badge {
	--badge-color: var(--level-color, var(--xun-primary));
	background: linear-gradient(135deg, var(--badge-color)0%, var(--badge-color)100%)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-hero .xun-user-level-badge {
		background: linear-gradient(135deg, var(--badge-color)0%, var(--badge-color)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-hero .xun-user-level-badge {
			background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color)85%, #fff)0%, var(--badge-color)100%)
		}
	}
}

.xun-user-hero .xun-user-vip-badge {
	--vip-color: var(--xun-primary);
	background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-hero .xun-user-vip-badge {
		background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-hero .xun-user-vip-badge {
			background: linear-gradient(135deg, color-mix(in srgb, var(--vip-color)85%, #fff)0%, var(--vip-color)100%)
		}
	}
}

.xun-user-hero .xun-level-badge--icon {
	box-shadow: none;
	background: 0 0;
	border: none;
	height: auto;
	padding: 0
}

.xun-user-hero .xun-user-uid-badge {
	box-sizing: border-box;
	color: #d4af37;
	white-space: nowrap;
	vertical-align: top;
	text-shadow: 0 1px 2px #0000004d;
	background: linear-gradient(135deg, #1a1a1a, #2d2d2d, #1a1a1a);
	border: 1px solid #d4af374d;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	height: 22px;
	margin: 0;
	padding: 0 10px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	display: inline-flex;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .05)
}

.xun-level-badge--icon {
	box-shadow: none;
	vertical-align: middle;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	display: inline-flex
}

.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	vertical-align: middle;
	width: auto;
	height: 18px;
	max-height: 22px;
	display: block
}

.xun-user-hero .xun-level-badge--icon .xun-level-icon,
.xun-author-hero .xun-level-badge--icon .xun-level-icon {
	height: 22px;
	max-height: 26px
}

.xun-comment-level-badge.xun-level-badge--icon .xun-level-icon,
.xun-forum-post-level-badge.xun-level-badge--icon .xun-level-icon {
	height: 16px;
	max-height: 18px
}

.xun-user-hero .xun-user-points-badge {
	box-sizing: border-box;
	color: #fff;
	white-space: nowrap;
	vertical-align: top;
	background: linear-gradient(135deg, #f5a623, #f7931e, #e8860c);
	border: none;
	border-radius: 4px;
	align-items: center;
	gap: 4px;
	height: 22px;
	margin: 0;
	padding: 0 10px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 22px;
	text-decoration: none;
	display: inline-flex;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .2)
}

.xun-user-hero .xun-user-points-badge svg {
	flex-shrink: 0;
	width: 12px;
	height: 12px
}

.xun-user-meta {
	color: rgba(255, 255, 255, .75);
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0;
	font-size: .8125rem;
	display: flex
}

.xun-user-meta span {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-user-hero-tools {
	z-index: 2;
	align-items: center;
	gap: .5rem;
	display: flex;
	position: absolute;
	top: 1.25rem;
	right: 1rem
}

.xun-user-hero .xun-user-bg-action.btn-outline {
	white-space: nowrap;
	color: #fff;
	text-shadow: 0 1px 2px #00000059;
	background: 0 0;
	border-color: rgba(255, 255, 255, .95)
}

.xun-user-hero .xun-user-bg-action.btn-outline:hover,
.xun-user-hero .xun-user-bg-action.btn-outline:focus {
	color: #fff;
	background: rgba(255, 255, 255, .22);
	border-color: #fff
}

.xun-user-hero .xun-user-bg-action.btn-outline[data-has-bg="1"] {
	color: #fff;
	background: 0 0;
	border-color: #ef4444
}

.xun-user-hero .xun-user-bg-action.btn-outline[data-has-bg="1"]:hover,
.xun-user-hero .xun-user-bg-action.btn-outline[data-has-bg="1"]:focus {
	color: #fff;
	background: rgba(239, 68, 68, .9);
	border-color: #ef4444
}

.xun-user-hero .xun-user-bg-action .btn-text {
	color: #fff
}

.xun-user-hero .xun-user-bg-action[data-has-bg="1"] .btn-text {
	color: #ef4444
}

.xun-user-hero .xun-user-bg-action:hover .btn-text,
.xun-user-hero .xun-user-bg-action:focus .btn-text,
.xun-user-hero .xun-user-bg-action[data-has-bg="1"]:hover .btn-text,
.xun-user-hero .xun-user-bg-action[data-has-bg="1"]:focus .btn-text {
	color: #fff
}

.xun-user-email:after {
	content: "";
	background: rgba(255, 255, 255, .4);
	border-radius: 50%;
	width: 3px;
	height: 3px;
	margin-left: .5rem;
	display: inline-block
}

.xun-user-hero-right {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-user-level-card {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--xun-radius, 8px);
	background: rgba(255, 255, 255, .15);
	border: 1px solid #ffffff1a;
	align-items: center;
	gap: .75rem;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-level-icon {
	color: #fff;
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	display: flex
}

.xun-user-level-info {
	flex-direction: column;
	gap: .125rem;
	display: flex
}

.xun-user-level-name {
	color: #fff;
	font-size: .9375rem;
	font-weight: 600
}

.xun-user-level-expires {
	color: rgba(255, 255, 255, .7);
	font-size: .75rem
}

.xun-user-hero-level {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--xun-radius, 8px);
	color: #fff;
	background: rgba(255, 255, 255, .15);
	border: 1px solid #ffffff1a;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-user-hero-level:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .2)
}

.xun-user-hero-level-icon {
	width: 24px;
	height: 24px;
	color: var(--level-color, #fff);
	background: rgba(22, 119, 255, .3);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-hero-level-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-hero-level-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))30%, transparent)
		}
	}
}

.xun-user-hero-level-icon img {
	object-fit: contain;
	width: 16px;
	height: 16px
}

.xun-user-hero-level-icon svg {
	width: 14px;
	height: 14px
}

.xun-user-hero-level-name {
	color: #fff;
	font-size: .8125rem;
	font-weight: 500
}

.xun-checkin-btn {
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .375rem;
	padding: .5rem 1rem;
	font-size: .8125rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-checkin-btn svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px
}

.xun-checkin-btn-icon {
	flex-shrink: 0
}

.xun-checkin-btn-spinner {
	flex-shrink: 0;
	animation: 1s linear infinite xun-checkin-spin;
	display: none
}

@keyframes xun-checkin-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-checkin-btn.is-checked {
	color: rgba(255, 255, 255, .7);
	cursor: default;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .2)
}

.xun-checkin-btn.is-checked:hover {
	background: rgba(255, 255, 255, .1)
}

.xun-checkin-btn.is-loading {
	pointer-events: none
}

.xun-checkin-btn.is-loading .xun-checkin-btn-icon {
	display: none
}

.xun-checkin-btn.is-loading .xun-checkin-btn-spinner {
	display: block
}

.xun-user-body {
	grid-template-columns: 240px 1fr;
	gap: .5rem;
	display: grid
}

.xun-user-sidebar {
	height: fit-content;
	transition: top .3s;
	position: sticky;
	top: 80px
}

.xun-user-sidebar-menu {
	flex-direction: column;
	gap: .25rem;
	padding: .5rem;
	display: flex
}

.xun-user-sidebar-item {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	text-align: left;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .625rem;
	width: 100%;
	padding: .75rem .875rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-user-sidebar-item:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary)
}

.xun-user-sidebar-item.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	font-weight: 500
}

.xun-user-sidebar-item svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-sidebar-item.is-active svg {
	opacity: 1
}

.xun-user-sidebar-divider {
	background: var(--color-border-secondary);
	height: 1px;
	margin: .5rem 0
}

.xun-user-logout {
	color: var(--color-error)
}

.xun-user-logout:hover {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-sidebar-group {
	flex-direction: column;
	display: flex
}

.xun-user-sidebar-group-header {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	text-align: left;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .625rem;
	width: 100%;
	padding: .75rem .875rem;
	font-size: .875rem;
	transition: all .2s;
	display: flex
}

.xun-user-sidebar-group-header:hover {
	color: var(--color-text);
	background: var(--color-fill-quaternary)
}

.xun-user-sidebar-group-header svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-sidebar-group-title {
	flex: 1;
	align-items: center;
	gap: .625rem;
	display: flex
}

.xun-user-sidebar-group-arrow {
	width: 16px;
	height: 16px;
	color: var(--color-text-quaternary);
	flex-shrink: 0;
	margin-left: auto;
	transition: transform .2s
}

.xun-user-sidebar-group.is-expanded .xun-user-sidebar-group-arrow {
	transform: rotate(180deg)
}

.xun-user-sidebar-group.is-expanded .xun-user-sidebar-group-header {
	color: var(--color-text)
}

.xun-user-sidebar-group-children {
	will-change: max-height;
	max-height: 0;
	padding-left: .5rem;
	transition: max-height .25s ease-out;
	display: block;
	overflow: hidden
}

.xun-user-sidebar-child {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	align-items: center;
	gap: .5rem;
	margin-top: .125rem;
	padding: .625rem .875rem .625rem 1.75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex;
	position: relative
}

.xun-user-sidebar-child:first-child {
	margin-top: .25rem
}

.xun-user-sidebar-child svg {
	display: none
}

.xun-user-sidebar-child:before {
	content: "";
	background: var(--color-text-quaternary);
	border-radius: 50%;
	width: 5px;
	height: 5px;
	transition: all .2s;
	position: absolute;
	top: 50%;
	left: .875rem;
	transform: translateY(-50%)
}

.xun-user-sidebar-child:hover {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary)
}

.xun-user-sidebar-child:hover:before {
	background: var(--color-text-tertiary)
}

.xun-user-sidebar-child.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	font-weight: 500
}

.xun-user-sidebar-child.is-active:before {
	background: var(--xun-primary);
	width: 6px;
	height: 6px
}

.xun-user-main {
	min-width: 0
}

@media(max-width:768px) {
	.xun-user-center {
		padding-bottom: 1.5rem
	}

	.xun-user-container {
		padding: 0 1rem
	}

	.xun-user-hero {
		margin-bottom: .5rem;
		padding: 1.5rem 0 1.25rem
	}

	.xun-user-hero--transparent {
		padding-top: calc(56px + 1.5rem)
	}

	.xun-user-hero-inner {
		padding: 0 1rem
	}

	.xun-user-hero-content {
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		display: flex
	}

	.xun-user-hero-left {
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		display: flex
	}

	.xun-user-hero-avatar {
		flex-shrink: 0;
		width: 56px;
		height: 56px
	}

	.xun-user-hero-avatar img {
		border-width: 2px
	}

	.xun-user-info {
		flex-direction: column;
		align-items: center;
		gap: .25rem;
		display: flex
	}

	.xun-user-name {
		font-size: 1.125rem;
		line-height: 1.3
	}

	.xun-user-meta {
		flex-direction: column;
		align-items: center;
		gap: .25rem;
		margin-top: .125rem;
		font-size: .75rem
	}

	.xun-user-hero-tools {
		right: .75rem
	}

	.xun-user-hero:not(.xun-user-hero--transparent) .xun-user-hero-tools {
		top: calc(56px + .5rem)
	}

	.xun-user-hero--transparent .xun-user-hero-tools {
		top: 2rem
	}

	.xun-user-hero-tools .btn {
		padding: .375rem .625rem;
		font-size: .75rem
	}

	.xun-user-email:after {
		display: none
	}

	.xun-user-badges {
		justify-content: center;
		gap: .375rem;
		width: 100%;
		margin-top: .25rem
	}

	.xun-user-hero-right {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		width: 100%;
		display: flex
	}

	.xun-user-hero-right .btn {
		white-space: nowrap;
		box-sizing: border-box;
		flex-shrink: 0
	}

	.xun-user-vip-badge {
		padding: .0625rem .375rem;
		font-size: .5rem
	}

	.xun-user-level-card {
		padding: .5rem .75rem
	}

	.xun-user-level-icon {
		width: 28px;
		height: 28px
	}

	.xun-user-level-icon svg {
		width: 14px;
		height: 14px
	}

	.xun-user-level-name {
		font-size: .8125rem
	}

	.xun-user-level-expires {
		font-size: .625rem
	}

	.xun-user-body {
		flex-direction: column;
		gap: .5rem;
		display: flex
	}

	.xun-user-sidebar {
		order: -1;
		width: 100%;
		position: static
	}

	.xun-user-sidebar-menu {
		border-radius: var(--xun-radius, 8px);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-flow: row;
		gap: .375rem;
		padding: .5rem;
		display: flex;
		overflow-x: auto
	}

	.xun-user-sidebar-menu::-webkit-scrollbar {
		display: none
	}

	.xun-user-sidebar-item {
		white-space: nowrap;
		border-radius: var(--xun-radius-sm, 6px);
		flex: none;
		justify-content: center;
		align-items: center;
		gap: .375rem;
		width: auto;
		padding: .5rem .875rem;
		font-size: .8125rem;
		display: inline-flex
	}

	.xun-user-sidebar-item span {
		display: inline
	}

	.xun-user-sidebar-item svg {
		flex-shrink: 0;
		width: 16px;
		height: 16px
	}

	.xun-user-sidebar-divider {
		display: none
	}

	.xun-user-logout {
		margin-left: 0
	}

	.xun-user-sidebar-group {
		flex-direction: row;
		flex-shrink: 0
	}

	.xun-user-sidebar-group-header {
		display: none
	}

	.xun-user-sidebar-group-children {
		flex-direction: row;
		gap: .375rem;
		padding-left: 0;
		overflow: visible;
		max-height: none !important;
		display: flex !important
	}

	.xun-user-sidebar-child {
		white-space: nowrap;
		flex: none;
		margin-top: 0;
		padding: .5rem .875rem
	}

	.xun-user-sidebar-child:first-child {
		margin-top: 0
	}

	.xun-user-sidebar-child:before {
		display: none
	}

	.xun-user-sidebar-child svg {
		opacity: .7;
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		display: block
	}

	.xun-user-sidebar-child.is-active svg {
		opacity: 1
	}

	.xun-user-sidebar-group+.xun-user-sidebar-group:before,
	.xun-user-sidebar-item+.xun-user-sidebar-group:before,
	.xun-user-sidebar-group+.xun-user-sidebar-item:before {
		content: "";
		background: var(--color-border-secondary);
		flex-shrink: 0;
		align-self: center;
		width: 1px;
		height: 20px;
		margin: 0 .25rem;
		display: block
	}

	.xun-user-main {
		width: 100%
	}
}

@media(max-width:480px) {
	.xun-user-container {
		padding: 0 .75rem
	}

	.xun-user-hero {
		padding: 1rem 0
	}

	.xun-user-hero--transparent {
		padding-top: calc(56px + 1rem)
	}

	.xun-user-hero-inner {
		padding: 0 .75rem
	}

	.xun-user-hero-avatar {
		width: 44px;
		height: 44px
	}

	.xun-user-name {
		font-size: 1rem
	}

	.xun-user-hero-right {
		gap: .375rem
	}

	.xun-user-hero-right .btn {
		padding: .4375rem .625rem;
		font-size: .75rem
	}

	.xun-user-meta {
		font-size: .6875rem
	}

	.xun-user-sidebar-menu {
		gap: .25rem;
		padding: .375rem
	}

	.xun-user-sidebar-item {
		gap: .25rem;
		padding: .4375rem .625rem;
		font-size: .75rem
	}

	.xun-user-sidebar-item svg {
		width: 14px;
		height: 14px
	}
}

.dark .xun-user-center {
	background: var(--color-bg-layout)
}

.dark .xun-user-hero {
	background: 0 0
}

.dark .xun-user-sidebar-group-header:hover,
.dark .xun-user-sidebar-child:hover {
	background: var(--color-fill-secondary)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-hero {
		background: 0 0
	}

	:root:not(.light) .xun-user-center {
		background: var(--color-bg-layout)
	}

	:root:not(.light) .xun-user-sidebar-group-header:hover,
	:root:not(.light) .xun-user-sidebar-child:hover {
		background: var(--color-fill-secondary)
	}
}

.xun-dashboard-overview {
	margin-bottom: .5rem
}

.xun-dashboard-overview-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	display: grid
}

.xun-overview-card {
	flex-direction: column;
	padding: 1.25rem;
	display: flex
}

.xun-overview-card-header {
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	display: flex
}

.xun-overview-card-icon {
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	display: flex
}

.xun-overview-balance .xun-overview-card-icon {
	color: #52c41a;
	background: rgba(82, 196, 26, .12)
}

.xun-overview-downloads .xun-overview-card-icon {
	color: #1890ff;
	background: rgba(24, 144, 255, .12)
}

.xun-overview-remaining .xun-overview-card-icon {
	color: #722ed1;
	background: rgba(114, 46, 209, .12)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-overview-balance .xun-overview-card-icon {
		background: rgba(82, 196, 26, .12)
	}

	.xun-overview-downloads .xun-overview-card-icon {
		background: rgba(24, 144, 255, .12)
	}

	.xun-overview-remaining .xun-overview-card-icon {
		background: rgba(114, 46, 209, .12)
	}
}

.xun-overview-card-label {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-overview-card-body {
	align-items: baseline;
	gap: .25rem;
	margin-bottom: .5rem;
	display: flex
}

.xun-overview-card-value {
	color: var(--color-text);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-overview-currency {
	margin-right: .125rem;
	font-size: 1rem;
	font-weight: 500
}

.xun-overview-card-unit {
	color: var(--color-text-tertiary);
	font-size: .875rem;
	font-weight: 400
}

.xun-overview-card-footer {
	margin-top: auto;
	padding-top: .5rem
}

.xun-overview-card-link {
	color: var(--xun-primary);
	align-items: center;
	gap: .25rem;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: gap .2s;
	display: inline-flex
}

.xun-overview-card-link:hover {
	gap: .5rem
}

.xun-overview-card-hint {
	color: var(--color-text-quaternary);
	font-size: .75rem
}

.xun-dashboard-main {
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	display: grid
}

.xun-dashboard-section-header {
	margin-bottom: 1rem
}

.xun-dashboard-section-title {
	color: var(--color-text);
	margin: 0;
	font-size: .9375rem;
	font-weight: 600
}

.xun-dashboard-stats {
	padding: 1.25rem
}

.xun-dashboard-stats-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-stat-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .75rem;
	padding: .75rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

a.xun-stat-item:hover {
	background: var(--color-fill-tertiary)
}

.xun-stat-item-icon {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	display: flex
}

.xun-stat-posts {
	color: var(--xun-primary)
}

.xun-stat-comments {
	color: #13c2c2
}

.xun-stat-favorites {
	color: #faad14
}

.xun-stat-following {
	color: #1890ff
}

.xun-stat-followers {
	color: #eb2f96
}

.xun-stat-item-info {
	flex: 1;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
	display: flex
}

.xun-stat-item-label {
	color: var(--color-text-secondary);
	font-size: .875rem
}

.xun-stat-item-value {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: 600
}

.xun-stat-item-arrow {
	color: var(--color-text-quaternary);
	flex-shrink: 0;
	transition: transform .2s
}

a.xun-stat-item:hover .xun-stat-item-arrow {
	color: var(--color-text-tertiary);
	transform: translate(2px)
}

.xun-dashboard-quick-actions {
	padding: 1.25rem
}

.xun-dashboard-actions-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
	display: grid
}

.xun-quick-action {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	flex-direction: column;
	align-items: center;
	gap: .625rem;
	padding: 1.25rem 1rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-quick-action:hover {
	background: var(--color-fill-tertiary);
	transform: translateY(-2px)
}

.xun-quick-action-icon {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	transition: all .2s;
	display: flex
}

.xun-action-profile {
	color: var(--xun-primary)
}

.xun-action-downloads {
	color: #1890ff
}

.xun-action-orders {
	color: #52c41a
}

.xun-action-settings {
	color: #8c8c8c
}

.xun-action-upgrade {
	color: #fff;
	background: linear-gradient(135deg, #ff9500, #ff5e00)
}

.xun-quick-action:hover .xun-quick-action-icon {
	transform: scale(1.05)
}

.xun-quick-action-label {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	transition: color .2s
}

.xun-quick-action:hover .xun-quick-action-label {
	color: var(--color-text)
}

.xun-action-vip .xun-quick-action-label {
	color: #ff6b00;
	font-weight: 500
}

.xun-quick-action.xun-action-vip {
	flex-direction: row;
	grid-column: span 2;
	justify-content: center;
	gap: .75rem
}

@media(max-width:1024px) {
	.xun-dashboard-overview-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.xun-dashboard-main {
		grid-template-columns: 1fr
	}
}

@media(max-width:768px) {
	.xun-dashboard {
		flex-direction: column;
		gap: .5rem;
		display: flex
	}

	.xun-dashboard-overview {
		margin-bottom: 0
	}

	.xun-dashboard-overview-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: .5rem;
		display: grid
	}

	.xun-overview-card {
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: .375rem;
		padding: .875rem .5rem;
		display: flex
	}

	.xun-overview-card-header {
		flex-direction: column;
		align-items: center;
		gap: .375rem;
		margin-bottom: 0;
		display: flex
	}

	.xun-overview-card-icon {
		width: 32px;
		height: 32px
	}

	.xun-overview-card-icon svg {
		width: 16px;
		height: 16px
	}

	.xun-overview-card-label {
		color: var(--color-text-tertiary);
		font-size: .6875rem
	}

	.xun-overview-card-body {
		justify-content: center;
		align-items: baseline;
		margin-bottom: 0;
		display: flex
	}

	.xun-overview-card-value {
		font-size: 1.125rem
	}

	.xun-overview-currency {
		font-size: .75rem
	}

	.xun-overview-card-unit {
		font-size: .625rem
	}

	.xun-overview-card-footer {
		display: none
	}

	.xun-dashboard-main {
		flex-direction: column;
		gap: .5rem;
		display: flex
	}

	.xun-dashboard-section-header {
		margin-bottom: .75rem
	}

	.xun-dashboard-section-title {
		font-size: .9375rem
	}

	.xun-dashboard-stats,
	.xun-dashboard-quick-actions {
		border-radius: var(--xun-radius, 8px);
		padding: 1rem
	}

	.xun-dashboard-stats-list {
		flex-direction: column;
		gap: .5rem;
		display: flex
	}

	.xun-stat-item {
		align-items: center;
		gap: .75rem;
		padding: .75rem;
		display: flex
	}

	.xun-stat-item-icon {
		width: 36px;
		height: 36px
	}

	.xun-stat-item-icon svg {
		width: 18px;
		height: 18px
	}

	.xun-stat-item-info {
		flex: 1;
		justify-content: space-between;
		align-items: center;
		display: flex
	}

	.xun-stat-item-label {
		font-size: .875rem
	}

	.xun-stat-item-value {
		font-size: 1rem;
		font-weight: 600
	}

	.xun-stat-item-arrow {
		flex-shrink: 0
	}

	.xun-stat-item-arrow svg {
		width: 16px;
		height: 16px
	}

	.xun-dashboard-actions-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: .625rem;
		display: grid
	}

	.xun-quick-action {
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		padding: 1rem .5rem;
		display: flex
	}

	.xun-quick-action-icon {
		width: 40px;
		height: 40px
	}

	.xun-quick-action-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-quick-action-label {
		text-align: center;
		font-size: .75rem
	}
}

@media(max-width:480px) {
	.xun-dashboard-overview-grid {
		gap: .375rem
	}

	.xun-overview-card {
		gap: .25rem;
		padding: .75rem .25rem
	}

	.xun-overview-card-icon {
		width: 28px;
		height: 28px
	}

	.xun-overview-card-icon svg {
		width: 14px;
		height: 14px
	}

	.xun-overview-card-label {
		font-size: .625rem
	}

	.xun-overview-card-value {
		font-size: 1rem
	}

	.xun-overview-currency {
		font-size: .6875rem
	}

	.xun-overview-card-unit {
		font-size: .5625rem
	}

	.xun-dashboard-stats,
	.xun-dashboard-quick-actions {
		padding: .875rem
	}

	.xun-stat-item {
		gap: .625rem;
		padding: .625rem
	}

	.xun-stat-item-icon {
		width: 32px;
		height: 32px
	}

	.xun-stat-item-icon svg {
		width: 16px;
		height: 16px
	}

	.xun-stat-item-label {
		font-size: .8125rem
	}

	.xun-stat-item-value {
		font-size: .9375rem
	}

	.xun-dashboard-actions-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .5rem
	}

	.xun-quick-action {
		gap: .375rem;
		padding: .875rem .5rem
	}

	.xun-quick-action-icon {
		width: 36px;
		height: 36px
	}

	.xun-quick-action-icon svg {
		width: 18px;
		height: 18px
	}

	.xun-quick-action-label {
		font-size: .6875rem
	}
}

.dark .xun-stat-item,
.dark .xun-quick-action {
	background: var(--color-fill-secondary)
}

.dark .xun-stat-item-icon,
.dark .xun-quick-action-icon,
.dark a.xun-stat-item:hover,
.dark .xun-quick-action:hover {
	background: var(--color-fill-tertiary)
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-stat-item,
	:root:not(.light) .xun-quick-action {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-stat-item-icon,
	:root:not(.light) .xun-quick-action-icon,
	:root:not(.light) a.xun-stat-item:hover,
	:root:not(.light) .xun-quick-action:hover {
		background: var(--color-fill-tertiary)
	}
}

.xun-profile {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-profile-section-header {
	padding: 1.25rem 1.5rem 0
}

.xun-profile-section-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-profile-section-desc {
	color: var(--color-text-tertiary);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-profile-section-body {
	padding: 1.25rem 1.5rem 1.5rem
}

.xun-profile-fields {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	display: grid
}

.xun-profile-field {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-profile-field-full {
	grid-column: 1/-1
}

.xun-profile-label {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	font-weight: 500;
	display: flex
}

.xun-profile-label-icon {
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	display: flex
}

.xun-profile-label-icon.xun-social-wechat {
	color: #07c160
}

.xun-profile-label-icon.xun-social-qq {
	color: #12b7f5
}

.xun-profile-label-icon.xun-social-weibo {
	color: #e6162d
}

.xun-profile-label-icon.xun-social-github {
	color: var(--color-text)
}

.xun-profile-required {
	color: var(--color-error)
}

.xun-profile-input-wrap {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-profile-input,
.xun-profile-textarea {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	padding: .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-profile-input:focus,
.xun-profile-textarea:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-profile-input:disabled {
	color: var(--color-text-tertiary);
	background: var(--color-fill-tertiary);
	cursor: not-allowed
}

.xun-profile-input::placeholder,
.xun-profile-textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-profile-textarea {
	resize: vertical;
	min-height: 100px;
	line-height: 1.6
}

.xun-profile-textarea-footer {
	justify-content: space-between;
	align-items: center;
	display: flex
}

.xun-profile-char-count {
	color: var(--color-text-quaternary);
	font-size: .75rem
}

.xun-profile-field-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .75rem
}

.xun-profile-bg {
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-profile-bg-preview {
	border-radius: var(--xun-radius, 8px);
	border: 1px dashed var(--color-border-secondary);
	background: var(--color-fill-tertiary);
	width: 240px;
	height: 84px;
	color: var(--color-text-tertiary);
	text-align: center;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
	align-items: center;
	font-size: .75rem;
	display: flex
}

.xun-profile-bg-preview.has-image {
	color: rgba(0, 0, 0, 0);
	border-style: solid
}

.xun-profile-bg-placeholder {
	padding: 0 .5rem
}

.xun-profile-bg-actions {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-profile-actions {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	display: flex
}

.xun-profile-actions-right {
	border-top: none;
	padding-top: 0
}

.xun-profile-actions .btn {
	min-width: 120px;
	font-size: .875rem;
	font-weight: 500
}

.xun-profile-actions .btn.btn-loading .btn-label {
	display: none
}

.xun-profile-actions .btn .btn-spinner {
	align-items: center;
	gap: .5rem;
	display: none
}

.xun-profile-actions .btn.btn-loading .btn-spinner {
	display: inline-flex !important;
	position: static !important;
	inset: auto !important
}

.xun-profile-actions .btn .btn-spinner svg {
	flex-shrink: 0
}

.xun-profile-actions .btn .btn-loading-text {
	color: inherit;
	font-size: .875rem
}

.xun-social-bind-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	display: grid
}

.xun-social-bind-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	transition: background-color .2s;
	display: flex
}

.xun-social-bind-item:hover {
	background: var(--color-fill-tertiary)
}

.xun-social-bind-info {
	align-items: center;
	gap: .875rem;
	display: flex
}

.xun-social-bind-icon {
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	transition: all .2s;
	display: flex
}

.xun-social-bind-icon.xun-social-wechat {
	color: #07c160;
	background: rgba(7, 193, 96, .1)
}

.xun-social-bind-icon.xun-social-qq {
	color: #12b7f5;
	background: rgba(18, 183, 245, .1)
}

.xun-social-bind-icon.xun-social-alipay {
	color: #1677ff;
	background: rgba(22, 119, 255, .12)
}

.xun-social-bind-icon.xun-social-sina {
	color: #e6162d;
	background: rgba(230, 22, 45, .12)
}

.xun-social-bind-icon.xun-social-google {
	color: #4285f4;
	background: rgba(66, 133, 244, .12)
}

.xun-social-bind-icon.xun-social-wework {
	color: #0089ff;
	background: rgba(0, 137, 255, .12)
}

.xun-social-bind-icon.xun-social-twitter {
	color: #111827;
	background: rgba(17, 24, 39, .08)
}

.xun-social-bind-icon svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px
}

.xun-social-bind-icon.xun-social-twitter svg {
	width: 18px;
	height: 18px
}

.xun-social-bind-icon.xun-social-gitee {
	color: #c71d23;
	background: rgba(199, 29, 35, .12)
}

.xun-social-bind-icon.xun-social-github {
	color: #24292f;
	background: rgba(36, 41, 47, .12)
}

.xun-social-bind-icon.xun-social-baidu {
	color: #2f54eb;
	background: rgba(47, 84, 235, .12)
}

.xun-social-bind-icon.xun-social-huawei {
	color: #d32029;
	background: rgba(211, 32, 41, .12)
}

.xun-social-bind-icon.xun-social-xiaomi {
	color: #ff6900;
	background: rgba(255, 105, 0, .12)
}

.xun-social-bind-icon.xun-social-douyin {
	color: #111827;
	background: rgba(17, 24, 39, .08)
}

.xun-social-bind-icon.xun-social-bilibili {
	color: #fb7299;
	background: rgba(251, 114, 153, .12)
}

.xun-social-bind-icon.xun-social-dingtalk {
	color: #2468f2;
	background: rgba(36, 104, 242, .12)
}

.xun-social-bind-text {
	flex-direction: column;
	gap: .125rem;
	display: flex
}

.xun-social-bind-name {
	color: var(--color-text);
	font-size: .9375rem;
	font-weight: 500
}

.xun-social-bind-status {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-social-bind-status.is-bound {
	color: var(--color-success)
}

.xun-social-bind-action {
	flex-shrink: 0
}

.xun-social-bind-btn {
	border-color: var(--color-border);
	color: var(--color-text-secondary)
}

.xun-social-bind-btn:hover {
	border-color: var(--xun-primary, var(--color-primary));
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-social-unbind-btn {
	color: var(--color-text-tertiary)
}

.xun-social-unbind-btn:hover {
	color: var(--color-error);
	background: var(--color-error-bg)
}

@media(max-width:768px) {
	.xun-profile-section-header {
		padding: 1rem 1rem 0
	}

	.xun-profile-section-body {
		padding: 1rem
	}

	.xun-profile-fields {
		grid-template-columns: 1fr;
		gap: 1rem
	}

	.xun-social-bind-grid {
		grid-template-columns: 1fr
	}

	.xun-profile-actions {
		margin-top: 1rem;
		padding-top: 1rem
	}

	.xun-profile-actions .btn {
		width: 100%
	}

	.xun-profile-bg {
		flex-direction: column;
		align-items: stretch
	}

	.xun-profile-bg-preview {
		width: 100%;
		height: 140px
	}
}

.dark .xun-profile-input,
.dark .xun-profile-textarea {
	background: var(--color-fill-secondary)
}

.dark .xun-profile-input:focus,
.dark .xun-profile-textarea:focus {
	background: var(--color-bg-elevated)
}

.dark .xun-profile-input:disabled {
	background: var(--color-fill-tertiary)
}

.dark .xun-profile-actions {
	background: var(--color-bg-container)
}

.xun-profile-email-row {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-profile-email-row .xun-profile-input,
.xun-profile-email-row .input {
	flex: 1;
	min-width: 0
}

.xun-profile-email-row .btn {
	flex-shrink: 0
}

.xun-change-email-btn {
	white-space: nowrap
}

#xun-change-email-modal {
	z-index: 1000;
	justify-content: center;
	align-items: center;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden
}

#xun-change-email-modal.is-active {
	display: flex
}

#xun-change-email-modal .xun-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	animation: .2s ease-out maskFadeIn;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

#xun-change-email-modal:not(.is-active) .xun-modal-overlay {
	animation: .2s ease-out forwards maskFadeOut
}

#xun-change-email-modal .xun-modal-container {
	z-index: 1;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 2rem);
	margin: 1rem;
	position: relative;
	overflow: hidden
}

#xun-change-email-modal .xun-modal-content {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal, 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a);
	opacity: 0;
	transition: transform .2s, opacity .2s;
	overflow: hidden;
	transform: translateY(20px)
}

#xun-change-email-modal.is-active .xun-modal-content {
	opacity: 1;
	transform: translateY(0)
}

#xun-change-email-modal .xun-modal-header {
	border-bottom: 1px solid var(--color-border-secondary);
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	display: flex
}

#xun-change-email-modal .xun-modal-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

#xun-change-email-modal .xun-modal-close {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

#xun-change-email-modal .xun-modal-close:hover {
	color: var(--color-text);
	background: var(--color-fill-secondary)
}

#xun-change-email-modal .xun-modal-body {
	padding: 1.5rem
}

#xun-change-email-modal .xun-modal-footer {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	gap: .75rem;
	padding: 1rem 1.5rem;
	display: flex
}

#xun-change-email-modal .xun-modal-footer .btn {
	min-width: 100px
}

.xun-change-email-form {
	flex-direction: column;
	gap: 1.25rem;
	display: flex
}

.xun-change-email-form .xun-form-field {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-change-email-form .xun-form-label {
	color: var(--color-text-secondary);
	font-size: .875rem;
	font-weight: 500
}

.xun-change-email-form .xun-form-required {
	color: var(--color-error)
}

.xun-change-email-form .xun-form-input-wrap {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-change-email-form .xun-form-input,
.xun-change-email-form .input {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	padding: .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-change-email-form .xun-form-input:focus,
.xun-change-email-form .input:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-change-email-form .xun-form-input:disabled,
.xun-change-email-form .input:disabled {
	color: var(--color-text-tertiary);
	background: var(--color-fill-tertiary);
	cursor: not-allowed
}

.xun-change-email-form .xun-form-hint {
	color: var(--color-text-quaternary);
	margin: .25rem 0 0;
	font-size: .75rem
}

.xun-form-input-with-btn {
	align-items: stretch;
	gap: .5rem;
	flex-direction: row !important;
	display: flex !important
}

.xun-form-input-with-btn .xun-form-input,
.xun-form-input-with-btn .input {
	flex: 1;
	min-width: 0
}

.xun-form-input-with-btn .btn,
.xun-form-input-with-btn .xun-send-code-btn {
	white-space: nowrap;
	box-sizing: border-box;
	flex-shrink: 0;
	min-width: 100px;
	height: calc(1.25rem + 1.25em + 2px);
	padding: 0 1rem;
	font-size: .875rem;
	line-height: 1.25
}

.dark #xun-change-email-modal .xun-modal-content {
	background: var(--color-bg-elevated)
}

.dark .xun-change-email-form .xun-form-input {
	background: var(--color-fill-secondary)
}

.dark .xun-change-email-form .xun-form-input:focus {
	background: var(--color-bg-container)
}

@media(max-width:480px) {
	#xun-change-email-modal .xun-modal-container {
		max-width: 100%;
		margin: .5rem
	}

	#xun-change-email-modal .xun-modal-header,
	#xun-change-email-modal .xun-modal-body {
		padding: 1rem
	}

	#xun-change-email-modal .xun-modal-footer {
		flex-direction: column;
		padding: 1rem
	}

	#xun-change-email-modal .xun-modal-footer .btn {
		width: 100%
	}

	.xun-form-input-with-btn .btn,
	.xun-form-input-with-btn .xun-send-code-btn {
		min-width: 88px;
		padding: 0 .75rem;
		font-size: .8125rem
	}

	.xun-profile-email-row {
		flex-direction: column;
		align-items: stretch
	}

	.xun-profile-email-row .btn {
		text-align: center
	}
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-profile-input,
	:root:not(.light) .xun-profile-textarea {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-profile-input:focus,
	:root:not(.light) .xun-profile-textarea:focus {
		background: var(--color-bg-elevated)
	}

	:root:not(.light) .xun-profile-input:disabled {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-profile-actions {
		background: var(--color-bg-container)
	}

	:root:not(.light) #xun-change-email-modal .xun-modal-content {
		background: var(--color-bg-elevated)
	}

	:root:not(.light) .xun-change-email-form .xun-form-input {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-change-email-form .xun-form-input:focus {
		background: var(--color-bg-container)
	}
}

.xun-user-posts,
.xun-user-favorites {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-posts-header {
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	display: flex
}

.xun-user-posts-title-wrap {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-user-posts-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-posts-total {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-user-posts-actions {
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-user-posts-header .btn {
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-user-posts-tabs {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: .5rem;
	padding: .75rem 1rem;
	display: flex;
	overflow-x: auto
}

.xun-user-posts-tabs::-webkit-scrollbar {
	display: none
}

.xun-user-posts-tab {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	white-space: nowrap;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-user-posts-tab:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-user-posts-tab.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	font-weight: 500
}

.xun-user-posts-tab-count {
	background: rgba(0, 0, 0, .06);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .375rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-posts-tab.is-active .xun-user-posts-tab-count {
	background: var(--xun-primary);
	color: #fff
}

.xun-user-posts-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-post-item {
	gap: 1rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-post-thumb {
	border-radius: var(--xun-radius, 8px);
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	overflow: hidden
}

.xun-user-post-thumb a {
	width: 100%;
	height: 100%;
	display: block
}

.xun-user-post-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-user-post-content {
	flex: 1;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-user-post-main {
	flex-direction: column;
	flex: 1;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-user-post-title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5
}

.xun-user-post-title a {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-decoration: none;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-user-post-title a:hover {
	color: var(--xun-primary)
}

.xun-user-post-meta {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-post-meta>span {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-post-status {
	border-radius: var(--xun-radius-sm, 4px);
	background: var(--color-fill-tertiary);
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500
}

.xun-user-post-status.is-publish {
	color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-user-post-status.is-draft {
	color: var(--color-warning);
	background: var(--color-warning-bg)
}

.xun-user-post-status.is-pending {
	color: #1890ff;
	background: rgba(24, 144, 255, .1)
}

.xun-user-post-status.is-private {
	color: var(--color-text-tertiary);
	background: var(--color-fill-tertiary)
}

.xun-user-post-cat {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .125rem .5rem;
	font-size: .75rem
}

.xun-user-post-actions {
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-user-post-action {
	width: 36px;
	height: 36px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-user-post-action:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-post-action.xun-user-post-delete:hover {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-posts-pagination {
	justify-content: center;
	padding: 1rem;
	display: flex
}

.xun-user-posts-pagination .page-numbers {
	min-width: 2.25rem;
	height: 2.25rem;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	justify-content: center;
	align-items: center;
	margin: 0 .25rem;
	padding: 0 .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-user-posts-pagination .page-numbers:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-posts-pagination .page-numbers.current {
	color: #fff;
	background: var(--xun-primary)
}

.xun-user-posts-pagination .page-numbers.dots {
	background: 0 0
}

.xun-user-posts-pagination .prev,
.xun-user-posts-pagination .next {
	padding: 0 .5rem
}

.xun-user-posts-empty {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-user-posts-empty-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem
}

.xun-user-posts-empty-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-posts-empty-desc {
	color: var(--color-text-tertiary);
	margin: 0 0 1.5rem;
	font-size: .875rem
}

.xun-user-posts-empty .btn {
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-delete-confirm {
	text-align: center;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem;
	display: flex
}

.xun-delete-confirm-icon {
	color: var(--color-warning);
	margin-bottom: 1rem
}

.xun-delete-confirm-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-delete-confirm-desc {
	color: var(--color-text-tertiary);
	margin: 0 0 1.5rem;
	font-size: .875rem
}

.xun-delete-confirm-actions {
	justify-content: center;
	gap: .75rem;
	width: 100%;
	display: flex
}

.xun-delete-confirm-actions .btn {
	min-width: 100px
}

.xun-user-likes {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-post-author {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-post-likes {
	color: var(--color-error);
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-like-remove:hover {
	color: var(--color-error) !important;
	background: var(--color-error-bg) !important
}

@media(max-width:768px) {
	.xun-user-posts-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding: 1rem
	}

	.xun-user-posts-header .btn {
		justify-content: center;
		width: 100%
	}

	.xun-user-posts-tabs {
		gap: .375rem;
		padding: .5rem
	}

	.xun-user-posts-tab {
		padding: .4375rem .75rem;
		font-size: .8125rem
	}

	.xun-user-post-item {
		flex-direction: column;
		gap: .75rem;
		padding: 1rem
	}

	.xun-user-post-thumb {
		width: 100%;
		height: 160px
	}

	.xun-user-post-content {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-user-post-main {
		width: 100%
	}

	.xun-user-post-title {
		font-size: .9375rem
	}

	.xun-user-post-title a {
		-webkit-line-clamp: 2
	}

	.xun-user-post-meta {
		gap: .5rem;
		font-size: .75rem
	}

	.xun-user-post-actions {
		border-top: 1px solid var(--color-border-secondary);
		justify-content: flex-end;
		width: 100%;
		padding-top: .75rem
	}

	.xun-user-posts-pagination .page-numbers {
		min-width: 2rem;
		height: 2rem;
		padding: 0 .5rem;
		font-size: .8125rem
	}

	.xun-user-posts-empty {
		padding: 3rem 1.5rem
	}

	.xun-user-posts-empty-icon svg {
		width: 48px;
		height: 48px
	}

	.xun-delete-confirm {
		padding: 1.5rem 1rem
	}

	.xun-delete-confirm-actions {
		flex-direction: column
	}

	.xun-delete-confirm-actions .btn {
		width: 100%
	}
}

@media(max-width:480px) {
	.xun-user-post-thumb {
		height: 140px
	}

	.xun-user-post-meta {
		flex-wrap: wrap
	}

	.xun-user-post-date,
	.xun-user-post-views,
	.xun-user-post-comments {
		display: none
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-posts-tab {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-posts-tab:hover {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-user-posts-tab-count {
		background: rgba(255, 255, 255, .1)
	}

	:root:not(.light) .xun-user-post-action {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-post-action:hover {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-user-posts-pagination .page-numbers {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-posts-pagination .page-numbers:hover {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-user-posts-tab {
	background: var(--color-fill-secondary)
}

.dark .xun-user-posts-tab:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-posts-tab-count {
	background: rgba(255, 255, 255, .1)
}

.dark .xun-user-post-action {
	background: var(--color-fill-secondary)
}

.dark .xun-user-post-action:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-posts-pagination .page-numbers {
	background: var(--color-fill-secondary)
}

.dark .xun-user-posts-pagination .page-numbers:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-likes .xun-user-post-item {
	background: var(--color-bg-container)
}

.xun-user-comments,
.xun-user-comments-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-comment-item {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	flex-direction: column;
	gap: .75rem;
	padding: 1.25rem;
	transition: box-shadow .2s;
	display: flex
}

.xun-user-comment-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
}

.xun-user-comment-header {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1rem;
	display: flex
}

.xun-user-comment-meta {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-user-comment-status {
	border-radius: calc(var(--xun-radius, 8px) - 4px);
	align-items: center;
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-user-comment-status.is-approved {
	color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-user-comment-status.is-pending {
	color: var(--color-warning);
	background: var(--color-warning-bg)
}

.xun-user-comment-status.is-spam {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-comment-status.is-trash {
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary)
}

.xun-user-comment-date {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-comment-post {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-comment-post svg {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-user-comment-post-link {
	color: var(--color-text-secondary);
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 300px;
	text-decoration: none;
	transition: color .2s;
	overflow: hidden
}

.xun-user-comment-post-link:hover {
	color: var(--color-primary)
}

.xun-user-comment-reply-to {
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: calc(var(--xun-radius, 8px) - 4px);
	border-left: 3px solid var(--color-border);
	align-items: flex-start;
	gap: .375rem;
	padding: .625rem .875rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-comment-reply-label {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-user-comment-reply-author {
	color: var(--color-text-secondary);
	flex-shrink: 0;
	font-weight: 500
}

.xun-user-comment-reply-content {
	color: var(--color-text-tertiary);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.xun-user-comment-content {
	color: var(--color-text);
	font-size: .9375rem;
	line-height: 1.6
}

.xun-user-comment-content p {
	margin: 0
}

.xun-user-comment-content p+p {
	margin-top: .5rem
}

.xun-user-comment-actions {
	border-top: 1px solid var(--color-border-secondary);
	align-items: center;
	gap: .5rem;
	padding-top: .5rem;
	display: flex
}

@media(max-width:768px) {
	.xun-user-comment-header {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-user-comment-post-link {
		max-width: 200px
	}
}

@media(max-width:480px) {
	.xun-user-comment-item {
		padding: .5rem
	}

	.xun-user-comment-meta {
		flex-wrap: wrap
	}

	.xun-user-comment-post-link {
		max-width: 150px
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-comment-item {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-user-comment-reply-to {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-user-comment-item {
	background: var(--color-bg-container)
}

.dark .xun-user-comment-reply-to {
	background: var(--color-fill-tertiary)
}

.xun-user-settings {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-settings-subnav {
	flex-wrap: wrap;
	gap: .5rem;
	padding: .75rem;
	display: flex
}

.xun-settings-subnav-item {
	background: var(--color-fill-quaternary);
	min-height: 2.5rem;
	color: var(--color-text-secondary);
	border: 1px solid #0000;
	border-radius: 999px;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-settings-subnav-item.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-color: var(--xun-primary)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-settings-subnav-item.is-active {
		border-color: color-mix(in srgb, var(--xun-primary)18%, transparent)
	}
}

.xun-settings-subnav-badge {
	min-width: 1.375rem;
	height: 1.375rem;
	color: inherit;
	background: rgba(0, 0, 0, .08);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: 0 .375rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-settings-panel {
	flex-direction: column;
	gap: 1rem;
	display: none
}

.xun-settings-panel.is-active {
	display: flex
}

.xun-settings-section-header {
	border-bottom: 1px solid var(--color-border-secondary);
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	display: flex
}

.xun-settings-section-icon {
	background: var(--color-primary-bg);
	width: 40px;
	height: 40px;
	color: var(--xun-primary);
	border-radius: var(--xun-radius, 8px);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-settings-section-info {
	flex: 1;
	min-width: 0
}

.xun-settings-section-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-settings-section-desc {
	color: var(--color-text-tertiary);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-settings-section-body {
	padding: 1.5rem
}

.xun-settings-address-book {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-settings-address-toolbar {
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-settings-address-toolbar-info {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-settings-address-toolbar-info strong {
	color: var(--color-text);
	font-size: .9375rem
}

.xun-settings-address-toolbar-info p {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-settings-address-list {
	gap: .75rem;
	display: grid
}

.xun-settings-address-empty {
	border: 1px dashed var(--color-border-secondary);
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-fill-quinary, #00000004);
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2rem 1.25rem;
	display: flex
}

.xun-settings-address-empty.is-hidden {
	display: none
}

.xun-settings-address-empty strong {
	color: var(--color-text)
}

.xun-settings-address-empty p {
	max-width: 28rem;
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-settings-address-empty-icon {
	background: var(--color-primary-bg);
	width: 3rem;
	height: 3rem;
	color: var(--xun-primary);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.xun-settings-form {
	flex-direction: column;
	gap: 1.25rem;
	display: flex
}

.xun-settings-field {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-settings-label {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	font-weight: 500;
	display: flex
}

.xun-settings-required {
	color: var(--color-error)
}

.xun-settings-input-wrap {
	flex-direction: column;
	gap: .25rem;
	display: flex;
	position: relative
}

.xun-settings-input {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	padding: .625rem 2.75rem .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-settings-input:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-settings-input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-settings-field-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .75rem
}

.xun-password-toggle {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex;
	position: absolute;
	top: 50%;
	right: .75rem;
	transform: translateY(-50%)
}

.xun-password-toggle:hover {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary)
}

.xun-settings-actions {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	margin-top: .5rem;
	padding-top: 1.25rem;
	display: flex
}

.xun-settings-actions .btn {
	min-width: 120px;
	font-size: .875rem;
	font-weight: 500
}

.xun-settings-actions .btn.btn-loading .btn-label {
	display: none
}

.xun-settings-actions .btn .btn-spinner {
	align-items: center;
	gap: .5rem;
	display: none
}

.xun-settings-actions .btn.btn-loading .btn-spinner {
	display: inline-flex !important;
	position: static !important;
	inset: auto !important
}

.xun-settings-actions .btn .btn-spinner svg {
	flex-shrink: 0
}

.xun-settings-actions .btn .btn-loading-text {
	color: inherit;
	font-size: .875rem
}

.xun-settings-toggle-list {
	flex-direction: column;
	gap: 0;
	display: flex
}

.xun-settings-toggle-item {
	border-bottom: 1px solid var(--color-border-secondary);
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	display: flex
}

.xun-settings-toggle-item:first-child {
	padding-top: 0
}

.xun-settings-toggle-item:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.xun-settings-toggle-info {
	flex-direction: column;
	flex: 1;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-settings-toggle-label {
	color: var(--color-text);
	font-size: .9375rem;
	font-weight: 500
}

.xun-settings-toggle-desc {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-toggle {
	cursor: pointer;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	display: inline-flex;
	position: relative
}

.xun-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute
}

.xun-toggle-slider {
	background: var(--color-fill-tertiary);
	border-radius: 12px;
	transition: all .2s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-toggle-slider:before {
	content: "";
	background: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	transition: all .2s;
	position: absolute;
	top: 2px;
	left: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.xun-toggle input:checked+.xun-toggle-slider {
	background: var(--xun-primary)
}

.xun-toggle input:checked+.xun-toggle-slider:before {
	transform: translate(20px)
}

.xun-toggle input:focus+.xun-toggle-slider {
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-settings-danger .xun-settings-section-icon {
	background: var(--color-error-bg);
	color: var(--color-error)
}

.xun-settings-danger-item {
	background: var(--color-error-bg);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #ff4d4f33;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-settings-danger-item {
		border: 1px solid #fd393f33
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-settings-danger-item {
			border: 1px solid color-mix(in srgb, var(--color-error)20%, transparent)
		}
	}
}

.xun-settings-danger-info {
	flex: 1;
	min-width: 0
}

.xun-settings-danger-title {
	color: var(--color-error);
	margin: 0;
	font-size: .9375rem;
	font-weight: 600
}

.xun-settings-danger-desc {
	color: var(--color-text-secondary);
	margin: .375rem 0 0;
	font-size: .8125rem;
	line-height: 1.5
}

.btn-danger {
	color: var(--color-error);
	border-color: var(--color-error)
}

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

.xun-delete-account-confirm {
	text-align: center;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem;
	display: flex
}

.xun-delete-account-confirm-icon {
	color: var(--color-error);
	margin-bottom: 1rem
}

.xun-delete-account-confirm-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-delete-account-confirm-desc {
	color: var(--color-text-tertiary);
	margin: 0 0 1.5rem;
	font-size: .875rem;
	line-height: 1.6
}

.xun-delete-account-confirm-input {
	width: 100%;
	margin-bottom: 1.5rem
}

.xun-delete-account-confirm-input input,
.xun-delete-account-confirm input.input {
	text-align: center;
	letter-spacing: .5em;
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	padding: .625rem 2rem;
	font-size: 1rem;
	transition: all .2s
}

.xun-delete-account-confirm-input input:focus,
.xun-delete-account-confirm input.input:focus {
	background: var(--color-bg-container);
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px var(--color-error-bg);
	outline: none
}

.xun-delete-account-confirm-input input::placeholder,
.xun-delete-account-confirm input.input::placeholder {
	color: var(--color-text-quaternary);
	letter-spacing: normal
}

.xun-delete-account-confirm-hint {
	color: var(--color-text-quaternary);
	margin: .5rem 0 0;
	font-size: .75rem
}

.xun-delete-account-confirm-actions {
	justify-content: center;
	gap: .75rem;
	width: 100%;
	display: flex
}

.xun-delete-account-confirm-actions .btn {
	min-width: 100px
}

@media(max-width:768px) {
	.xun-settings-subnav {
		padding: .625rem
	}

	.xun-settings-subnav-item {
		flex: calc(50% - .25rem);
		justify-content: center
	}

	.xun-settings-section-header,
	.xun-settings-section-body {
		padding: 1rem
	}

	.xun-settings-section-icon {
		width: 36px;
		height: 36px
	}

	.xun-settings-section-icon svg {
		width: 18px;
		height: 18px
	}

	.xun-settings-actions {
		margin-top: .25rem;
		padding-top: 1rem
	}

	.xun-settings-actions .btn {
		width: 100%
	}

	.xun-settings-danger-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem
	}

	.xun-settings-danger-item .btn {
		width: 100%
	}

	.xun-settings-address-toolbar {
		flex-direction: column;
		align-items: stretch
	}

	.xun-delete-account-confirm {
		padding: 1.5rem 1rem
	}

	.xun-delete-account-confirm-actions {
		flex-direction: column
	}

	.xun-delete-account-confirm-actions .btn {
		width: 100%
	}
}

.dark .xun-settings-input {
	background: var(--color-fill-secondary)
}

.dark .xun-settings-input:focus {
	background: var(--color-bg-elevated)
}

.dark .xun-toggle-slider {
	background: var(--color-fill-secondary)
}

.dark .xun-toggle-slider:before {
	background: var(--color-text-quaternary)
}

.dark .xun-toggle input:checked+.xun-toggle-slider:before {
	background: #fff
}

.dark .xun-settings-danger-item {
	background: var(--color-error-bg)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-settings-danger-item {
		background: rgba(253, 57, 63, .1)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-settings-danger-item {
			background: color-mix(in srgb, var(--color-error)10%, transparent)
		}
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-settings-input {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-settings-input:focus {
		background: var(--color-bg-elevated)
	}

	:root:not(.light) .xun-toggle-slider {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-toggle-slider:before {
		background: var(--color-text-quaternary)
	}

	:root:not(.light) .xun-toggle input:checked+.xun-toggle-slider:before {
		background: #fff
	}

	:root:not(.light) .xun-settings-danger-item {
		background: var(--color-error-bg)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-settings-danger-item {
			background: rgba(253, 57, 63, .1)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-settings-danger-item {
				background: color-mix(in srgb, var(--color-error)10%, transparent)
			}
		}
	}
}

.xun-user-following {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-follow-list {
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
	display: grid
}

.xun-user-follow-item {
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	display: flex
}

.xun-user-follow-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	position: relative
}

.xun-user-follow-avatar img {
	object-fit: cover;
	background: var(--color-fill-quaternary);
	border-radius: 50%;
	width: 100%;
	height: 100%
}

.xun-user-follow-avatar .xun-user-vip-badge-sm {
	color: #fff;
	background: var(--xun-primary);
	white-space: nowrap;
	border-radius: 9999px;
	padding: .0625rem .375rem;
	font-size: .5rem;
	font-weight: 600;
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translate(-50%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
}

.xun-user-follow-info {
	flex-direction: column;
	flex: 1;
	gap: .375rem;
	min-width: 0;
	display: flex
}

.xun-user-follow-name {
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden
}

.xun-user-follow-desc {
	color: var(--color-text-tertiary);
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	overflow: hidden
}

.xun-user-follow-stats {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-user-follow-stat {
	color: var(--color-text-quaternary);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-follow-stat svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-follow-actions {
	flex-shrink: 0
}

.xun-user-unfollow-btn {
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	align-items: center;
	gap: .375rem;
	padding: .5rem .875rem;
	font-size: .8125rem;
	transition: all .2s;
	display: inline-flex
}

.xun-user-unfollow-btn:hover {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-unfollow-btn svg {
	flex-shrink: 0
}

@media(max-width:1024px) {
	.xun-user-follow-list {
		grid-template-columns: 1fr
	}
}

@media(max-width:768px) {
	.xun-user-follow-item {
		gap: .875rem;
		padding: 1rem
	}

	.xun-user-follow-avatar {
		width: 48px;
		height: 48px
	}

	.xun-user-follow-name {
		font-size: .875rem
	}

	.xun-user-follow-desc {
		font-size: .75rem
	}

	.xun-user-follow-stats {
		gap: .5rem
	}

	.xun-user-follow-stat {
		font-size: .6875rem
	}

	.xun-user-unfollow-btn {
		padding: .4375rem .75rem;
		font-size: .75rem
	}

	.xun-user-unfollow-btn span {
		display: none
	}
}

@media(max-width:480px) {
	.xun-user-follow-item {
		gap: .75rem;
		padding: .875rem
	}

	.xun-user-follow-avatar {
		width: 44px;
		height: 44px
	}

	.xun-user-follow-stats {
		flex-wrap: wrap
	}
}

.dark .xun-user-unfollow-btn {
	background: var(--color-fill-secondary)
}

.dark .xun-user-unfollow-btn:hover {
	background: var(--color-error-bg)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-unfollow-btn {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-unfollow-btn:hover {
		background: var(--color-error-bg)
	}
}

.xun-user-subscriptions {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-subscriptions-section {
	padding: 1.25rem
}

.xun-user-subscriptions-section-header {
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-user-subscriptions-section-title {
	color: var(--color-text, #262626);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-user-subscriptions-count {
	color: var(--color-text-tertiary, #737373);
	font-size: .8125rem
}

.xun-user-subscription-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-user-subscription-item {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary, #f0f0f0);
	background: var(--color-bg-container, #fff);
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-subscription-main {
	flex-direction: column;
	flex: 1;
	gap: .35rem;
	min-width: 0;
	display: flex
}

.xun-user-subscription-title {
	color: var(--color-text, #262626);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none
}

.xun-user-subscription-title:hover {
	color: var(--xun-primary, var(--color-primary, #3b82f6))
}

.xun-user-subscription-desc {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .8125rem
}

.xun-user-subscription-meta {
	color: var(--color-text-quaternary, #8c8c8c);
	font-size: .75rem
}

.xun-user-subscription-actions {
	flex-shrink: 0
}

.xun-user-subscription-empty {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-fill-quaternary, #fafafa);
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	display: flex
}

.xun-user-subscription-empty p {
	color: var(--color-text-secondary, #525252);
	margin: 0;
	font-size: .875rem
}

@media(max-width:768px) {
	.xun-user-subscriptions-section {
		padding: .5rem
	}

	.xun-user-subscription-item {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-user-subscription-actions {
		width: 100%
	}

	.xun-user-subscription-actions .btn {
		justify-content: center;
		width: 100%
	}

	.xun-user-subscription-empty {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-user-subscription-empty .btn {
		justify-content: center;
		width: 100%
	}
}

.xun-user-membership {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-membership-header {
	padding: 1.25rem 1.5rem
}

.xun-user-membership-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-membership-subtitle {
	color: var(--color-text-tertiary);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-user-membership-disabled {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-user-membership-disabled-icon {
	color: var(--color-warning);
	margin-bottom: 1rem
}

.xun-user-membership-disabled-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-membership-disabled-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-user-membership-status {
	margin-bottom: .5rem
}

.xun-user-membership-status-card {
	padding: 1.5rem;
	position: relative
}

.xun-user-membership-status-header {
	border-bottom: 1px dashed var(--color-border-secondary);
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	display: flex
}

.xun-user-membership-status-icon {
	background: var(--color-fill-quaternary);
	width: 56px;
	height: 56px;
	color: var(--color-text-tertiary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
	color: var(--vip-color, var(--xun-primary));
	background: rgba(22, 119, 255, .12)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))12%, transparent)
		}
	}
}

.xun-user-membership-status-info {
	flex: 1;
	min-width: 0
}

.xun-user-membership-level {
	color: var(--vip-color, var(--xun-primary));
	background: rgba(22, 119, 255, .1);
	border-radius: 9999px;
	margin-bottom: .375rem;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-level {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-level {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-membership-name {
	color: var(--color-text);
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-user-membership-status-card.is-vip .xun-user-membership-name {
	color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-status-details {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	display: grid
}

.xun-user-membership-detail-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-membership-detail-label {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-membership-detail-label svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-membership-detail-value {
	color: var(--color-text);
	font-size: .875rem;
	font-weight: 600
}

.xun-user-membership-detail-value.is-exhausted {
	color: var(--color-error)
}

.xun-user-membership-status-tip {
	color: var(--color-text-secondary);
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	padding: .75rem 1rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-membership-status-tip svg {
	color: var(--xun-primary);
	flex-shrink: 0
}

.xun-user-membership-packages {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-membership-packages-header {
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-membership-packages-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-user-membership-packages-subtitle {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-user-membership-packages-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	display: grid
}

.xun-user-membership-package {
	transition: all .3s;
	position: relative
}

.xun-user-membership-package:hover {
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package-tag {
	color: #fff;
	background: var(--vip-color, var(--xun-primary));
	border-radius: 0 calc(var(--xun-radius-lg, 12px) - 1px)0 var(--xun-radius, 8px);
	z-index: 1;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	position: absolute;
	top: 0;
	right: 0
}

.xun-user-membership-package-current {
	color: #fff;
	background: var(--color-success);
	border-radius: var(--xun-radius-sm, 4px);
	z-index: 1;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	position: absolute;
	top: 12px;
	left: 12px
}

.xun-user-membership-package-upgrade-tag {
	color: #fff;
	border-radius: var(--xun-radius-sm, 4px);
	z-index: 1;
	background: linear-gradient(135deg, #ff6b6b, orange);
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	position: absolute;
	top: 12px;
	left: 12px
}

.xun-user-membership-package-inner {
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	display: flex
}

.xun-user-membership-package-top {
	text-align: center;
	border-bottom: 1px dashed var(--color-border-secondary);
	margin-bottom: 1rem;
	padding-bottom: 1rem
}

.xun-user-membership-package-level {
	color: var(--vip-color, var(--xun-primary));
	background: rgba(22, 119, 255, .1);
	border-radius: 9999px;
	margin-bottom: .5rem;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-package-level {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-package-level {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-membership-package-name {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-membership-package-duration {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-user-membership-package-price-area {
	text-align: center;
	margin-bottom: 1rem
}

.xun-user-membership-package-price {
	color: var(--vip-color, var(--xun-primary));
	justify-content: center;
	align-items: baseline;
	gap: .125rem;
	margin-bottom: .25rem;
	font-weight: 700;
	display: flex
}

.xun-user-membership-package-currency {
	font-size: 1rem
}

.xun-user-membership-package-amount {
	font-size: 2rem;
	line-height: 1
}

.xun-user-membership-package-original {
	color: var(--color-text-quaternary);
	font-size: .75rem;
	text-decoration: line-through
}

.xun-user-membership-package-savings {
	color: var(--color-success);
	background: var(--color-success-bg);
	border-radius: var(--xun-radius-sm, 4px);
	justify-content: center;
	align-items: center;
	margin-top: .375rem;
	padding: .25rem .5rem;
	font-size: .6875rem;
	display: inline-flex
}

.xun-user-membership-package-downloads {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	justify-content: center;
	align-items: center;
	gap: .25rem;
	margin: 0 auto 1rem;
	padding: .375rem .75rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-membership-package-downloads svg {
	color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package-desc {
	color: var(--color-text-tertiary);
	text-align: center;
	margin: 0 0 1rem;
	font-size: .8125rem;
	line-height: 1.5
}

.xun-user-membership-package-features {
	flex: 1;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none
}

.xun-user-membership-package-feature {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	font-size: .8125rem;
	display: flex
}

.xun-user-membership-package-feature svg {
	color: var(--feature-color, var(--color-success));
	flex-shrink: 0
}

.xun-user-membership-package-btn {
	text-align: center;
	width: 100%;
	color: var(--vip-color, var(--xun-primary));
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: rgba(22, 119, 255, .08);
	border: 1px solid #1677ff33;
	padding: .625rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-package-btn {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-package-btn {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))8%, transparent)
		}
	}

	.xun-user-membership-package-btn {
		border-color: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-package-btn {
			border-color: color-mix(in srgb, var(--vip-color, var(--xun-primary))20%, transparent)
		}
	}
}

.xun-user-membership-package-btn:hover:not(:disabled) {
	color: #fff;
	background: var(--vip-color, var(--xun-primary));
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package-btn:disabled {
	cursor: not-allowed;
	opacity: .6
}

.xun-user-membership-package-btn.is-current {
	color: var(--color-success);
	background: var(--color-success-bg);
	border-color: var(--color-success)
}

.xun-user-membership-package.is-recommended {
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package.is-recommended .xun-user-membership-package-btn {
	color: #fff;
	background: var(--vip-color, var(--xun-primary));
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package.is-recommended .xun-user-membership-package-btn:hover:not(:disabled) {
	background: var(--vip-color, var(--xun-primary));
	filter: brightness(.85)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-package.is-recommended .xun-user-membership-package-btn:hover:not(:disabled) {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-package.is-recommended .xun-user-membership-package-btn:hover:not(:disabled) {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))85%, #000)
		}
	}

	.xun-user-membership-package.is-recommended .xun-user-membership-package-btn:hover:not(:disabled) {
		filter: none
	}
}

.xun-user-membership-package.is-current {
	border-color: var(--color-success)
}

.xun-user-membership-package.is-upgradable .xun-user-membership-package-price.is-upgrade-price {
	color: #ff6b6b
}

.xun-user-membership-package.is-disabled {
	opacity: .65
}

.xun-user-membership-package.is-disabled:hover {
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package-btn.is-upgrade {
	color: #fff;
	background: var(--vip-color, var(--xun-primary));
	border-color: var(--vip-color, var(--xun-primary))
}

.xun-user-membership-package-btn.is-upgrade:hover:not(:disabled) {
	background: var(--vip-color, var(--xun-primary));
	filter: brightness(.85)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-membership-package-btn.is-upgrade:hover:not(:disabled) {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-membership-package-btn.is-upgrade:hover:not(:disabled) {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))85%, #000)
		}
	}

	.xun-user-membership-package-btn.is-upgrade:hover:not(:disabled) {
		filter: none
	}
}

.xun-user-membership-empty {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-user-membership-empty-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem
}

.xun-user-membership-empty-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-membership-empty-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

@media(max-width:1024px) {
	.xun-user-membership-packages-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:768px) {
	.xun-user-membership {
		gap: .5rem
	}

	.xun-user-membership-header {
		padding: .5rem
	}

	.xun-user-membership-title {
		font-size: 1rem
	}

	.xun-user-membership-status-card {
		padding: 1.25rem
	}

	.xun-user-membership-status-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem
	}

	.xun-user-membership-status-icon {
		width: 48px;
		height: 48px
	}

	.xun-user-membership-status-icon svg {
		width: 24px;
		height: 24px
	}

	.xun-user-membership-name {
		font-size: 1.125rem
	}

	.xun-user-membership-status-details {
		grid-template-columns: 1fr;
		gap: .75rem
	}

	.xun-user-membership-detail-item {
		padding: .625rem .875rem
	}

	.xun-user-membership-packages-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem;
		padding: 1rem
	}

	.xun-user-membership-packages-grid {
		grid-template-columns: 1fr
	}

	.xun-user-membership-package-inner {
		padding: 1rem
	}

	.xun-user-membership-package-amount {
		font-size: 1.75rem
	}

	.xun-user-membership-disabled,
	.xun-user-membership-empty {
		padding: 3rem 1.5rem
	}

	.xun-user-membership-disabled-icon svg,
	.xun-user-membership-empty-icon svg {
		width: 48px;
		height: 48px
	}
}

@media(max-width:480px) {
	.xun-user-membership-status-card {
		padding: 1rem
	}

	.xun-user-membership-status-icon {
		width: 44px;
		height: 44px
	}

	.xun-user-membership-status-icon svg {
		width: 22px;
		height: 22px
	}

	.xun-user-membership-level {
		font-size: .5625rem
	}

	.xun-user-membership-name {
		font-size: 1rem
	}

	.xun-user-membership-detail-label {
		font-size: .75rem
	}

	.xun-user-membership-detail-value {
		font-size: .8125rem
	}

	.xun-user-membership-status-tip {
		padding: .625rem .875rem;
		font-size: .75rem
	}

	.xun-user-membership-package-name {
		font-size: 1rem
	}

	.xun-user-membership-package-amount {
		font-size: 1.5rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-membership-status-card {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-user-membership-status-header {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-user-membership-status-icon {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
		background: rgba(22, 119, 255, .2)
	}

	:root:not(.light) .xun-user-membership-detail-item {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-membership-status-tip {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-user-membership-package {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-user-membership-package:hover {
		border-color: var(--vip-color, var(--xun-primary))
	}

	:root:not(.light) .xun-user-membership-package-top {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-user-membership-package-downloads {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-membership-package-btn {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-user-membership-package.is-recommended {
		border-color: var(--vip-color, var(--xun-primary))
	}

	:root:not(.light) .xun-user-membership-package.is-current {
		border-color: var(--color-success)
	}

	:root:not(.light) .xun-user-membership-package.is-disabled {
		opacity: .5
	}

	:root:not(.light) .xun-user-membership-package.is-disabled:hover {
		border-color: var(--vip-color, var(--xun-primary))
	}

	:root:not(.light) .xun-user-membership-package-savings {
		background: rgba(34, 197, 94, .15)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
			background: var(--vip-color, var(--xun-primary))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
				background: color-mix(in srgb, var(--vip-color, var(--xun-primary))20%, transparent)
			}
		}

		:root:not(.light) .xun-user-membership-status-tip {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-membership-status-tip {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-membership-package-btn {
			background: var(--vip-color, var(--xun-primary))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-membership-package-btn {
				background: color-mix(in srgb, var(--vip-color, var(--xun-primary))15%, transparent)
			}
		}

		:root:not(.light) .xun-user-membership-package-savings {
			background: rgba(81, 193, 72, .15)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-membership-package-savings {
				background: color-mix(in srgb, var(--color-success)15%, transparent)
			}
		}
	}
}

.dark .xun-user-membership-status-card {
	border-color: var(--color-border)
}

.dark .xun-user-membership-status-header {
	border-bottom-color: var(--color-border)
}

.dark .xun-user-membership-status-icon {
	background: var(--color-fill-secondary)
}

.dark .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
	background: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-membership-status-card.is-vip .xun-user-membership-status-icon {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))20%, transparent)
		}
	}
}

.dark .xun-user-membership-detail-item {
	background: var(--color-fill-secondary)
}

.dark .xun-user-membership-status-tip {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-membership-status-tip {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-membership-status-tip {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

.dark .xun-user-membership-package {
	border-color: var(--color-border)
}

.dark .xun-user-membership-package:hover {
	border-color: var(--vip-color, var(--xun-primary))
}

.dark .xun-user-membership-package-top {
	border-bottom-color: var(--color-border)
}

.dark .xun-user-membership-package-downloads {
	background: var(--color-fill-secondary)
}

.dark .xun-user-membership-package-btn {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-membership-package-btn {
		background: var(--vip-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-membership-package-btn {
			background: color-mix(in srgb, var(--vip-color, var(--xun-primary))15%, transparent)
		}
	}
}

.dark .xun-user-membership-package.is-recommended {
	border-color: var(--vip-color, var(--xun-primary))
}

.dark .xun-user-membership-package.is-current {
	border-color: var(--color-success)
}

.dark .xun-user-membership-package.is-disabled {
	opacity: .5
}

.dark .xun-user-membership-package.is-disabled:hover {
	border-color: var(--vip-color, var(--xun-primary))
}

.dark .xun-user-membership-package-savings {
	background: rgba(34, 197, 94, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-membership-package-savings {
		background: rgba(81, 193, 72, .15)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-membership-package-savings {
			background: color-mix(in srgb, var(--color-success)15%, transparent)
		}
	}
}

.xun-user-level {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-level-header {
	padding: 1.25rem 1.5rem
}

.xun-user-level-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-level-subtitle {
	color: var(--color-text-tertiary);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-user-level-disabled {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-user-level-disabled-icon {
	color: var(--color-warning);
	margin-bottom: 1rem
}

.xun-user-level-disabled-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-level-disabled-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-user-level-status {
	margin-bottom: .5rem
}

.xun-user-level-status-card {
	border: 1px solid var(--color-border-secondary);
	padding: 1.5rem;
	position: relative
}

.xun-user-level-status-header {
	border-bottom: 1px dashed var(--color-border-secondary);
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	display: flex
}

.xun-user-level-status-icon {
	width: 56px;
	height: 56px;
	color: var(--level-color, var(--xun-primary));
	background: rgba(22, 119, 255, .12);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-status-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-status-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))12%, transparent)
		}
	}
}

.xun-user-level-icon-img {
	object-fit: contain;
	width: 36px;
	height: 36px
}

.xun-user-level-status-info {
	flex: 1;
	min-width: 0
}

.xun-user-level-badge {
	color: var(--level-color, var(--xun-primary));
	background: rgba(22, 119, 255, .1);
	border-radius: 9999px;
	margin-bottom: .375rem;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-badge {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-badge {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-level-name {
	color: var(--level-color, var(--xun-primary));
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-user-level-status-details {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.25rem;
	display: grid
}

.xun-user-level-detail-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-level-detail-label {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-level-detail-label svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-level-detail-value {
	color: var(--color-text);
	font-size: .875rem;
	font-weight: 600
}

.xun-user-level-points {
	color: var(--level-color, var(--xun-primary))
}

.xun-user-level-need-points {
	color: var(--color-warning)
}

.xun-user-level-progress-wrap {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem
}

.xun-user-level-progress-header {
	justify-content: space-between;
	align-items: center;
	margin-bottom: .5rem;
	display: flex
}

.xun-user-level-progress-label {
	color: var(--color-text-secondary);
	font-size: .8125rem
}

.xun-user-level-progress-percent {
	color: var(--level-color, var(--xun-primary));
	font-size: .875rem;
	font-weight: 600
}

.xun-user-level-progress {
	background: var(--color-fill-tertiary);
	border-radius: 4px;
	height: 8px;
	overflow: hidden
}

.xun-user-level-progress-bar {
	background: linear-gradient(90deg, var(--level-color, var(--xun-primary)), var(--level-color, var(--xun-primary)));
	border-radius: 4px;
	height: 100%;
	transition: width .3s
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-progress-bar {
		background: linear-gradient(90deg, var(--level-color, var(--xun-primary)), var(--level-color, var(--xun-primary)))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-progress-bar {
			background: linear-gradient(90deg, var(--level-color, var(--xun-primary)), color-mix(in srgb, var(--level-color, var(--xun-primary))70%, #fff))
		}
	}
}

.xun-user-level-progress-footer {
	color: var(--color-text-quaternary);
	justify-content: space-between;
	align-items: center;
	margin-top: .375rem;
	font-size: .75rem;
	display: flex
}

.xun-user-level-max-tip {
	color: var(--level-color, var(--xun-primary));
	border-radius: var(--xun-radius, 8px);
	background: rgba(22, 119, 255, .1);
	justify-content: center;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-max-tip {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-max-tip {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-level-max-tip svg {
	flex-shrink: 0
}

.xun-user-level-list {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-level-list-header {
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-level-list-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-user-level-list-subtitle {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-user-level-list-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .5rem;
	display: grid
}

.xun-user-level-item {
	border: 1px solid var(--color-border-secondary);
	text-align: center;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 1rem;
	transition: all .3s;
	display: flex;
	position: relative
}

.xun-user-level-item:hover {
	border-color: var(--level-color, var(--color-border));
	box-shadow: 0 4px 20px rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-item:hover {
		box-shadow: 0 4px 20px var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-item:hover {
			box-shadow: 0 4px 20px color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
		}
	}
}

.xun-user-level-item.is-current {
	border-color: var(--level-color, var(--xun-primary));
	box-shadow: 0 4px 20px rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-item.is-current {
		box-shadow: 0 4px 20px var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-item.is-current {
			box-shadow: 0 4px 20px color-mix(in srgb, var(--level-color, var(--xun-primary))20%, transparent)
		}
	}
}

.xun-user-level-item.is-achieved:not(.is-current) {
	opacity: .85
}

.xun-user-level-item-current {
	color: #fff;
	background: var(--level-color, var(--xun-primary));
	border-radius: var(--xun-radius-sm, 4px);
	z-index: 1;
	align-items: center;
	padding: .25rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1;
	display: inline-flex;
	position: absolute;
	top: 10px;
	right: 10px
}

.xun-user-level-item-icon {
	width: 56px;
	height: 56px;
	color: var(--level-color, var(--xun-primary));
	background: rgba(22, 119, 255, .1);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin-bottom: .75rem;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-item-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-item-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-level-item-icon img {
	object-fit: contain;
	width: 32px;
	height: 32px
}

.xun-user-level-item.is-achieved .xun-user-level-item-icon {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-item.is-achieved .xun-user-level-item-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-item.is-achieved .xun-user-level-item-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
		}
	}
}

.xun-user-level-item-info {
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-user-level-item-badge {
	color: var(--level-color, var(--xun-primary));
	background: rgba(22, 119, 255, .1);
	border-radius: 9999px;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-level-item-badge {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-level-item-badge {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))10%, transparent)
		}
	}
}

.xun-user-level-item-name {
	color: var(--color-text);
	margin: .25rem 0 0;
	font-size: .9375rem;
	font-weight: 600
}

.xun-user-level-item.is-current .xun-user-level-item-name {
	color: var(--level-color, var(--xun-primary))
}

.xun-user-level-item-points {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-user-level-item-status {
	background: var(--color-success);
	color: #fff;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: 26px;
	display: flex;
	position: absolute;
	top: 12px;
	left: 12px;
	overflow: visible
}

.xun-user-level-item-status--locked {
	background: var(--color-fill-secondary);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border-secondary);
	box-shadow: none
}

.xun-user-level-item-status--locked svg {
	width: 16px;
	height: 16px;
	display: block
}

.xun-user-level-tips-header {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: 1rem 1.25rem
}

.xun-user-level-tips-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-user-level-tips-content {
	padding: 1rem 1.25rem
}

.xun-user-level-tips-list {
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid
}

.xun-user-level-tips-list li {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-size: .875rem;
	display: flex
}

.xun-user-level-tips-list li svg {
	color: var(--color-success);
	flex-shrink: 0
}

@media(max-width:1024px) {
	.xun-user-level-list-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(max-width:768px) {
	.xun-user-level {
		gap: .5rem
	}

	.xun-user-level-header {
		padding: .5rem
	}

	.xun-user-level-title {
		font-size: 1rem
	}

	.xun-user-level-status-card {
		padding: 1.25rem
	}

	.xun-user-level-status-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem
	}

	.xun-user-level-status-icon {
		width: 48px;
		height: 48px
	}

	.xun-user-level-status-icon svg {
		width: 24px;
		height: 24px
	}

	.xun-user-level-icon-img {
		width: 28px;
		height: 28px
	}

	.xun-user-level-name {
		font-size: 1.125rem
	}

	.xun-user-level-status-details {
		grid-template-columns: 1fr;
		gap: .75rem
	}

	.xun-user-level-detail-item {
		padding: .625rem .875rem
	}

	.xun-user-level-list-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem;
		padding: 1rem
	}

	.xun-user-level-list-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-user-level-item {
		padding: 1.25rem .75rem
	}

	.xun-user-level-item-icon {
		width: 48px;
		height: 48px
	}

	.xun-user-level-item-icon img {
		width: 28px;
		height: 28px
	}

	.xun-user-level-item-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-user-level-item-name {
		font-size: .875rem
	}

	.xun-user-level-tips-list {
		grid-template-columns: 1fr
	}

	.xun-user-level-disabled {
		padding: 3rem 1.5rem
	}

	.xun-user-level-disabled-icon svg {
		width: 48px;
		height: 48px
	}
}

@media(max-width:480px) {
	.xun-user-level-status-card {
		padding: 1rem
	}

	.xun-user-level-status-icon {
		width: 44px;
		height: 44px
	}

	.xun-user-level-status-icon svg {
		width: 22px;
		height: 22px
	}

	.xun-user-level-badge {
		font-size: .5625rem
	}

	.xun-user-level-name {
		font-size: 1rem
	}

	.xun-user-level-detail-label {
		font-size: .75rem
	}

	.xun-user-level-detail-value {
		font-size: .8125rem
	}

	.xun-user-level-progress-wrap {
		padding: .875rem
	}

	.xun-user-level-list-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .75rem
	}

	.xun-user-level-item {
		padding: 1rem .5rem
	}

	.xun-user-level-item-icon {
		width: 40px;
		height: 40px;
		margin-bottom: .5rem
	}

	.xun-user-level-item-icon img {
		width: 24px;
		height: 24px
	}

	.xun-user-level-item-badge {
		padding: .0625rem .375rem;
		font-size: .5625rem
	}

	.xun-user-level-item-name {
		font-size: .8125rem
	}

	.xun-user-level-item-points {
		font-size: .6875rem
	}

	.xun-user-level-item-current {
		padding: .0625rem .375rem;
		font-size: .5625rem;
		top: 8px;
		right: 8px
	}

	.xun-user-level-item-status {
		width: 20px;
		height: 20px;
		top: 8px;
		left: 8px
	}

	.xun-user-level-item-status svg {
		width: 12px;
		height: 12px
	}

	.xun-user-level-tips-header,
	.xun-user-level-tips-content {
		padding: .875rem 1rem
	}

	.xun-user-level-tips-list li {
		padding: .625rem .875rem;
		font-size: .8125rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-level-status-card {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-user-level-status-header {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-user-level-status-icon {
		background: rgba(22, 119, 255, .2)
	}

	:root:not(.light) .xun-user-level-detail-item,
	:root:not(.light) .xun-user-level-progress-wrap {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-level-progress {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-user-level-max-tip {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-user-level-item {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-user-level-item:hover,
	:root:not(.light) .xun-user-level-item.is-current {
		border-color: var(--level-color, var(--xun-primary))
	}

	:root:not(.light) .xun-user-level-item-icon {
		background: rgba(22, 119, 255, .15)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-user-level-status-icon {
			background: var(--level-color, var(--xun-primary))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-level-status-icon {
				background: color-mix(in srgb, var(--level-color, var(--xun-primary))20%, transparent)
			}
		}

		:root:not(.light) .xun-user-level-max-tip {
			background: var(--level-color, var(--xun-primary))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-level-max-tip {
				background: color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
			}
		}

		:root:not(.light) .xun-user-level-item-icon {
			background: var(--level-color, var(--xun-primary))
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-level-item-icon {
				background: color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
			}
		}
	}

	:root:not(.light) .xun-user-level-tips-header {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-user-level-tips-list li {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-user-level-status-card {
	border-color: var(--color-border)
}

.dark .xun-user-level-status-header {
	border-bottom-color: var(--color-border)
}

.dark .xun-user-level-status-icon {
	background: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-level-status-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-level-status-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))20%, transparent)
		}
	}
}

.dark .xun-user-level-detail-item,
.dark .xun-user-level-progress-wrap {
	background: var(--color-fill-secondary)
}

.dark .xun-user-level-progress {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-level-max-tip {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-level-max-tip {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-level-max-tip {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
		}
	}
}

.dark .xun-user-level-item {
	border-color: var(--color-border)
}

.dark .xun-user-level-item:hover,
.dark .xun-user-level-item.is-current {
	border-color: var(--level-color, var(--xun-primary))
}

.dark .xun-user-level-item-icon {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-level-item-icon {
		background: var(--level-color, var(--xun-primary))
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-level-item-icon {
			background: color-mix(in srgb, var(--level-color, var(--xun-primary))15%, transparent)
		}
	}
}

.dark .xun-user-level-tips-header {
	border-bottom-color: var(--color-border)
}

.dark .xun-user-level-tips-list li {
	background: var(--color-fill-secondary)
}

.xun-user-orders {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-orders-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-user-order-item {
	flex-direction: column;
	display: flex
}

.xun-user-order-header {
	border-bottom: 1px solid var(--color-border-secondary);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .875rem 1.25rem;
	display: flex
}

.xun-user-order-info {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-user-order-no {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	font-weight: 500;
	font-family: var(--font-mono, monospace);
	align-items: center;
	gap: .375rem;
	line-height: 1;
	display: inline-flex
}

.xun-user-order-no svg {
	width: 14px;
	height: 14px;
	color: var(--color-text-tertiary);
	vertical-align: middle;
	flex-shrink: 0
}

.xun-user-order-date {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-order-date svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-order-status {
	border-radius: var(--xun-radius-sm, 4px);
	white-space: nowrap;
	align-items: center;
	padding: .25rem .625rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-user-order-status.is-pending {
	color: var(--color-warning);
	background: var(--color-warning-bg)
}

.xun-user-order-status.is-paid {
	color: #1890ff;
	background: rgba(24, 144, 255, .1)
}

.xun-user-order-status.is-completed {
	color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-user-order-status.is-cancelled {
	color: var(--color-text-tertiary);
	background: var(--color-fill-tertiary)
}

.xun-user-order-status.is-refunded {
	color: #722ed1;
	background: rgba(114, 46, 209, .1)
}

.xun-user-order-status.is-failed {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-order-body {
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-order-product {
	flex: 1;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-user-order-product-icon {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	width: 48px;
	height: 48px;
	color: var(--color-text-tertiary);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-user-order-product-icon svg {
	width: 24px;
	height: 24px
}

.xun-user-order-item[data-order-type=vip] .xun-user-order-product-icon {
	color: #ff9500;
	background: linear-gradient(135deg, rgba(255, 149, 0, .1), rgba(255, 94, 0, .1))
}

.xun-user-order-item[data-order-type=download] .xun-user-order-product-icon {
	color: #1890ff;
	background: rgba(24, 144, 255, .1)
}

.xun-user-order-item[data-order-type=recharge] .xun-user-order-product-icon {
	color: #52c41a;
	background: rgba(82, 196, 26, .1)
}

.xun-user-order-item[data-order-type=paid_post] .xun-user-order-product-icon {
	color: #722ed1;
	background: rgba(114, 46, 209, .1)
}

.xun-user-order-product-info {
	flex-direction: column;
	flex: 1;
	gap: .375rem;
	min-width: 0;
	display: flex
}

.xun-user-order-product-name {
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden
}

.xun-user-order-product-name a {
	color: inherit;
	text-decoration: none;
	transition: color .2s
}

.xun-user-order-product-name a:hover {
	color: var(--xun-primary)
}

.xun-user-order-product-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	display: flex
}

.xun-user-order-product-meta--detail {
	flex-wrap: nowrap;
	min-width: 0
}

.xun-user-order-inline-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
	overflow: hidden
}

.xun-user-order-product-meta--detail .xun-user-order-type {
	flex-shrink: 0
}

.xun-user-order-type {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	padding: .125rem .5rem;
	display: inline-flex
}

.xun-user-order-pay-method {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-order-pay-method svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px
}

.xun-user-order-pay-method svg[viewBox="0 0 24 24"]:first-child {
	color: inherit
}

.xun-user-order-copy {
	min-width: 0;
	max-width: 100%;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: 0 0;
	border: none;
	flex: auto;
	align-items: center;
	padding: 0;
	transition: color .2s;
	display: inline-flex;
	overflow: hidden
}

.xun-user-order-copy-label {
	flex-shrink: 0
}

.xun-user-order-copy-value {
	border-radius: calc(var(--xun-radius-sm, 4px) + 1px);
	color: rgba(120, 82, 16, .92);
	white-space: nowrap;
	text-overflow: ellipsis;
	background: linear-gradient(135deg, rgba(244, 198, 88, .24), rgba(255, 248, 224, .96) 48%, rgba(244, 198, 88, .18)), repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 9px, rgba(190, 145, 42, .12) 9px, rgba(190, 145, 42, .12) 18px);
	min-width: 0;
	padding: .1875rem .5rem;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(190, 145, 42, .18), inset 0 1px rgba(255, 255, 255, .65)
}

.xun-user-order-copy:hover {
	color: var(--xun-primary)
}

.xun-user-order-copy:hover .xun-user-order-copy-value {
	box-shadow: inset 0 0 0 1px rgba(190, 145, 42, .22), inset 0 1px rgba(255, 255, 255, .82), 0 0 0 1px rgba(244, 198, 88, .08)
}

.xun-user-order-amount {
	flex-direction: column;
	flex-shrink: 0;
	align-items: flex-end;
	gap: .125rem;
	display: flex
}

.xun-user-order-original-price {
	color: var(--color-text-quaternary);
	font-size: .75rem;
	text-decoration: line-through
}

.xun-user-order-price {
	color: var(--color-text);
	font-size: 1.125rem;
	font-weight: 600
}

.xun-user-order-footer {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	display: flex
}

.xun-user-order-footer .btn {
	min-width: 80px
}

.xun-user-order-status-chip {
	cursor: default;
	pointer-events: none
}

.xun-user-order-status-chip:hover,
.xun-user-order-status-chip:active {
	color: var(--color-text-secondary);
	background: 0 0
}

.xun-order-delivery-btn,
.xun-order-review-btn {
	min-width: 96px
}

.xun-user-order-footer .btn-ghost {
	color: var(--color-text-secondary)
}

.xun-user-order-footer .btn-ghost:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-order-cancel-btn:hover {
	color: var(--color-error) !important;
	background: var(--color-error-bg) !important
}

.xun-order-tracking-modal,
.xun-shop-order-review-modal {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-order-tracking-summary {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding: .875rem 1rem;
	display: flex
}

.xun-order-tracking-status {
	border-radius: var(--xun-radius-sm, 4px);
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	align-items: center;
	padding: .25rem .625rem;
	font-size: .75rem;
	font-weight: 600;
	display: inline-flex
}

.xun-order-tracking-synced {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-order-tracking-list {
	flex-direction: column;
	gap: .875rem;
	display: flex
}

.xun-order-tracking-shipment {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem
}

.xun-order-tracking-head {
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
	margin-bottom: .5rem;
	display: flex
}

.xun-order-tracking-head strong {
	color: var(--color-text);
	margin-bottom: .25rem;
	font-size: .9375rem;
	display: block
}

.xun-order-tracking-head span,
.xun-order-tracking-head em {
	color: var(--color-text-tertiary);
	font-size: .75rem;
	font-style: normal
}

.xun-order-tracking-remark {
	color: var(--color-text-secondary);
	margin: 0 0 .625rem;
	font-size: .8125rem
}

.xun-order-tracking-link {
	color: var(--xun-primary);
	align-items: center;
	margin-bottom: .75rem;
	font-size: .8125rem;
	text-decoration: none;
	display: inline-flex
}

.xun-order-tracking-link:hover {
	text-decoration: underline
}

.xun-order-tracking-timeline {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-order-tracking-item {
	gap: .875rem;
	display: flex
}

.xun-order-tracking-item-time {
	color: var(--color-text-tertiary);
	flex: 0 0 120px;
	font-size: .75rem
}

.xun-order-tracking-item-main {
	flex: 1;
	padding-left: 1rem;
	position: relative
}

.xun-order-tracking-item-main:before {
	content: "";
	background: var(--xun-primary);
	border-radius: 999px;
	width: .5rem;
	height: .5rem;
	position: absolute;
	top: .35rem;
	left: 0
}

.xun-order-tracking-item-main strong {
	color: var(--color-text);
	margin-bottom: .25rem;
	font-size: .8125rem;
	display: block
}

.xun-order-tracking-item-main p {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-order-tracking-item-main span {
	color: var(--color-text-tertiary);
	margin-top: .25rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-order-tracking-empty {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-order-review-targets {
	gap: .75rem;
	display: grid
}

.xun-order-review-target {
	text-align: left;
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	cursor: pointer;
	align-items: center;
	gap: .875rem;
	width: 100%;
	padding: .875rem 1rem;
	transition: border-color .2s, background .2s;
	display: flex
}

.xun-order-review-target.is-active {
	border-color: var(--xun-primary)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-order-review-target.is-active {
		border-color: color-mix(in srgb, var(--xun-primary)28%, transparent)
	}
}

.xun-order-review-target.is-active {
	background: var(--xun-primary)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-order-review-target.is-active {
		background: color-mix(in srgb, var(--xun-primary)6%, var(--color-bg-container))
	}
}

.xun-order-review-target.is-disabled {
	opacity: .72
}

.xun-order-review-target-thumb {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	flex: 0 0 54px;
	justify-content: center;
	align-items: center;
	width: 54px;
	height: 54px;
	display: flex;
	overflow: hidden
}

.xun-order-review-target-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-order-review-target-main {
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-order-review-target-main strong {
	color: var(--color-text);
	font-size: .875rem
}

.xun-order-review-target-main span,
.xun-order-review-target-main em {
	color: var(--color-text-tertiary);
	font-size: .75rem;
	font-style: normal
}

.xun-order-review-current {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .875rem;
	padding: .875rem 1rem;
	display: flex
}

.xun-order-review-current img {
	border-radius: var(--xun-radius, 8px);
	object-fit: cover;
	width: 56px;
	height: 56px
}

.xun-order-review-current-main {
	flex-direction: column;
	gap: .25rem;
	display: flex
}

.xun-order-review-current-main strong {
	color: var(--color-text);
	font-size: .9375rem
}

.xun-order-review-current-main span {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-order-review-current-tip {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .8125rem
}

.xun-order-review-current-tip.is-disabled {
	color: var(--color-warning)
}

.xun-shop-order-review-form .xun-comment-field {
	margin-bottom: 1rem
}

.xun-shop-order-review-form label {
	color: var(--color-text-secondary);
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
	display: block
}

.xun-shop-order-review-form label .required {
	color: var(--color-error)
}

.xun-shop-order-review-form input[type=text],
.xun-shop-order-review-form input[type=email],
.xun-shop-order-review-form input[type=url],
.xun-shop-order-review-form select,
.xun-shop-order-review-form textarea {
	width: 100%;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	padding: .625rem .875rem;
	font-size: .9375rem;
	transition: border-color .2s, box-shadow .2s
}

.xun-shop-order-review-form input[type=text]:focus,
.xun-shop-order-review-form input[type=email]:focus,
.xun-shop-order-review-form input[type=url]:focus,
.xun-shop-order-review-form select:focus,
.xun-shop-order-review-form textarea:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-shop-order-review-form input[type=text]::placeholder,
.xun-shop-order-review-form input[type=email]::placeholder,
.xun-shop-order-review-form input[type=url]::placeholder,
.xun-shop-order-review-form textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-shop-order-review-form textarea {
	resize: vertical;
	min-height: 100px
}

.xun-shop-order-review-form .xun-comment-editor {
	position: relative
}

.xun-shop-order-review-form .xun-comment-field-rating {
	margin-bottom: .875rem
}

.xun-shop-order-review-form .xun-comment-field-rating input[type=hidden] {
	display: none
}

.xun-shop-order-review-form .xun-comment-rating-stars {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	display: flex
}

.xun-shop-order-review-form .xun-comment-rating-star {
	box-shadow: none;
	color: var(--color-text-quaternary);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: color .2s;
	display: inline-flex
}

.xun-shop-order-review-form .xun-comment-rating-star svg {
	width: 18px;
	height: 18px;
	display: block
}

.xun-shop-order-review-form .xun-comment-rating-star.is-active,
.xun-shop-order-review-form .xun-comment-rating-star:hover,
.xun-shop-order-review-form .xun-comment-rating-star:focus-visible {
	color: #f59e0b
}

.xun-shop-order-review-form .xun-comment-rating-star:focus-visible {
	outline: none
}

.xun-shop-order-review-form .xun-comment-rating-text {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-order-review-actions {
	justify-content: flex-end;
	gap: .625rem;
	display: flex
}

@media(max-width:768px) {
	.xun-user-order-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding: .75rem 1rem
	}

	.xun-user-order-info {
		justify-content: space-between;
		width: 100%
	}

	.xun-user-order-status {
		position: absolute;
		top: .75rem;
		right: 1rem
	}

	.xun-user-order-item {
		position: relative
	}

	.xun-user-order-body {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding: 1rem
	}

	.xun-user-order-product {
		width: 100%
	}

	.xun-user-order-product-icon {
		width: 44px;
		height: 44px
	}

	.xun-user-order-product-icon svg {
		width: 22px;
		height: 22px
	}

	.xun-user-order-product-name {
		white-space: normal;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: .875rem;
		display: -webkit-box
	}

	.xun-user-order-amount {
		border-top: 1px dashed var(--color-border-secondary);
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: .5rem;
		width: 100%;
		padding-top: .75rem
	}

	.xun-user-order-original-price {
		order: 2
	}

	.xun-user-order-price {
		font-size: 1rem
	}

	.xun-user-order-footer {
		padding: .625rem 1rem
	}

	.xun-user-order-footer .btn {
		flex: 1;
		min-width: auto
	}

	.xun-order-tracking-summary,
	.xun-order-tracking-head,
	.xun-order-review-current {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-order-tracking-item {
		flex-direction: column;
		gap: .375rem
	}

	.xun-order-tracking-item-time {
		flex-basis: auto
	}

	.xun-order-review-actions {
		flex-direction: column
	}

	.xun-order-review-actions .btn {
		width: 100%
	}
}

@media(max-width:480px) {
	.xun-user-order-info {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem
	}

	.xun-user-order-no {
		font-size: .75rem
	}

	.xun-user-order-date {
		font-size: .6875rem
	}

	.xun-user-order-product-icon {
		width: 40px;
		height: 40px
	}

	.xun-user-order-product-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-user-order-product-meta {
		flex-wrap: wrap;
		gap: .5rem
	}

	.xun-user-order-product-meta--detail {
		flex-wrap: nowrap;
		width: 100%
	}

	.xun-user-order-inline-text {
		flex: 0 auto
	}

	.xun-user-order-copy {
		width: auto
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-order-product-icon {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-order-type {
		background: var(--color-fill-tertiary)
	}
}

.dark .xun-user-order-product-icon {
	background: var(--color-fill-secondary)
}

.dark .xun-user-order-type {
	background: var(--color-fill-tertiary)
}

.xun-order-cancel-confirm {
	text-align: center;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem;
	display: flex
}

.xun-order-cancel-confirm-icon {
	color: var(--color-warning);
	margin-bottom: 1rem
}

.xun-order-cancel-confirm-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-order-cancel-confirm-desc {
	color: var(--color-text-tertiary);
	margin: 0 0 1.5rem;
	font-size: .875rem
}

.xun-order-cancel-confirm-actions {
	justify-content: center;
	gap: .75rem;
	width: 100%;
	display: flex
}

.xun-order-cancel-confirm-actions .btn {
	min-width: 100px
}

@media(max-width:480px) {
	.xun-order-cancel-confirm {
		padding: 1.5rem 1rem
	}

	.xun-order-cancel-confirm-actions {
		flex-direction: column
	}

	.xun-order-cancel-confirm-actions .btn {
		width: 100%
	}
}

.xun-user-downloads {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-downloads-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-user-download-item {
	gap: .5rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-download-thumb {
	border-radius: var(--xun-radius, 8px);
	flex-shrink: 0;
	width: 100px;
	height: 70px;
	overflow: hidden
}

.xun-user-download-thumb a {
	width: 100%;
	height: 100%;
	display: block
}

.xun-user-download-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-user-download-content {
	flex: 1;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-user-download-main {
	flex-direction: column;
	flex: 1;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-user-download-title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5
}

.xun-user-download-title a {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-decoration: none;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-user-download-title a:hover {
	color: var(--xun-primary)
}

.xun-user-download-meta {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-download-meta>span {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-download-cat {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .125rem .5rem;
	font-size: .75rem
}

.xun-user-download-permission {
	color: #ff9500;
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(255, 149, 0, .1);
	align-items: center;
	gap: .25rem;
	padding: .125rem .5rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-download-permission svg {
	flex-shrink: 0
}

.xun-user-download-meta svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-user-download-password {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	margin-top: .25rem;
	padding: .5rem .75rem;
	font-size: .8125rem;
	display: inline-flex
}

.xun-user-download-password-label {
	color: var(--color-text-tertiary)
}

.xun-user-download-password-value {
	font-size: .8125rem;
	font-family: var(--font-mono, monospace);
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .125rem .5rem
}

.xun-copy-btn {
	width: 28px;
	height: 28px;
	color: var(--color-text-tertiary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: inline-flex
}

.xun-copy-btn:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-copy-btn.is-copied {
	color: var(--color-success)
}

.xun-user-download-actions {
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-user-download-actions .btn {
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-user-download-actions .btn svg {
	flex-shrink: 0
}

@media(max-width:768px) {
	.xun-user-download-item {
		flex-direction: column;
		gap: .75rem;
		padding: .5rem
	}

	.xun-user-download-thumb {
		width: 100%;
		height: 140px
	}

	.xun-user-download-content {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-user-download-main {
		width: 100%
	}

	.xun-user-download-title {
		font-size: .9375rem
	}

	.xun-user-download-title a {
		-webkit-line-clamp: 2
	}

	.xun-user-download-meta {
		gap: .5rem;
		font-size: .75rem
	}

	.xun-user-download-password {
		flex-wrap: wrap;
		width: 100%
	}

	.xun-user-download-actions {
		border-top: 1px solid var(--color-border-secondary);
		justify-content: flex-end;
		width: 100%;
		padding-top: .75rem
	}

	.xun-user-download-actions .btn {
		flex: 1
	}
}

@media(max-width:480px) {
	.xun-user-download-thumb {
		height: 120px
	}

	.xun-user-download-meta {
		flex-wrap: wrap
	}

	.xun-user-download-date,
	.xun-user-download-count {
		display: none
	}

	.xun-user-download-password {
		padding: .375rem .625rem;
		font-size: .75rem
	}

	.xun-user-download-password-value {
		font-size: .75rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-download-password {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-download-password-value {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-copy-btn:hover {
		background: var(--color-fill-tertiary)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-user-download-password-value {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-download-password-value {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}
	}
}

.dark .xun-user-download-password {
	background: var(--color-fill-secondary)
}

.dark .xun-user-download-password-value {
	background: rgba(22, 119, 255, .15)
}

.dark .xun-copy-btn:hover {
	background: var(--color-fill-tertiary)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-download-password-value {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-download-password-value {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

.xun-user-download-link-name {
	color: #1890ff;
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(24, 144, 255, .1);
	align-items: center;
	gap: .25rem;
	padding: .125rem .5rem;
	font-size: .75rem;
	display: inline-flex
}

.xun-user-download-link-name svg {
	opacity: .8;
	flex-shrink: 0
}

.xun-user-download-title-deleted {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .5rem;
	display: inline-flex
}

.xun-user-download-deleted-badge {
	color: var(--color-error);
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(255, 77, 79, .1);
	align-items: center;
	padding: .125rem .375rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-user-download-action {
	width: 36px;
	height: 36px;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	transition: all .2s;
	display: inline-flex
}

.xun-user-download-action:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-posts-header .xun-user-downloads-stats {
	align-items: center;
	gap: 1rem;
	margin-bottom: 0;
	display: flex
}

.xun-user-downloads-stat {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-user-downloads-stat .xun-user-downloads-stat-label {
	color: var(--color-text-tertiary);
	margin-bottom: 0
}

.xun-user-downloads-stat .xun-user-downloads-stat-value {
	color: var(--xun-primary);
	align-items: center;
	gap: .125rem;
	font-weight: 600;
	display: inline-flex
}

.xun-user-downloads-stat-limit {
	color: var(--color-text-tertiary);
	font-weight: 400
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-user-download-link-name {
		background: rgba(24, 144, 255, .15)
	}

	:root:not(.light) .xun-user-download-deleted-badge {
		background: rgba(255, 77, 79, .15)
	}

	:root:not(.light) .xun-user-download-action {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-user-download-action:hover {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-user-downloads-stat {
		background: var(--color-fill-secondary)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-user-download-action:hover {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-download-action:hover {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}
	}
}

.dark .xun-user-download-link-name {
	background: rgba(24, 144, 255, .15)
}

.dark .xun-user-download-deleted-badge {
	background: rgba(255, 77, 79, .15)
}

.dark .xun-user-download-action {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-download-action:hover {
	background: rgba(22, 119, 255, .15)
}

.dark .xun-user-downloads-stat {
	background: var(--color-fill-secondary)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-user-download-action:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-download-action:hover {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

@media(max-width:768px) {
	.xun-user-posts-header .xun-user-downloads-stats {
		width: 100%;
		margin-top: .75rem
	}

	.xun-user-downloads-stat {
		flex: 1;
		justify-content: center
	}
}

@media(max-width:480px) {
	.xun-user-download-link-name {
		padding: .0625rem .375rem;
		font-size: .6875rem
	}

	.xun-user-download-action {
		width: 32px;
		height: 32px
	}

	.xun-user-download-action svg {
		width: 16px;
		height: 16px
	}
}

.xun-user-coupons {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-coupons-filters {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-coupons-status-filter {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-user-coupons-status-btn {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius, 8px);
	transition: all .3s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1));
	white-space: nowrap;
	background: 0 0;
	align-items: center;
	gap: .25rem;
	padding: .375rem .75rem;
	font-size: .8125rem;
	display: inline-flex
}

.xun-user-coupons-status-btn:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-coupons-status-btn.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	font-weight: 500
}

.xun-user-coupons-status-btn span {
	opacity: .7;
	font-size: .75rem
}

.xun-user-coupons-list {
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	display: grid
}

.xun-user-coupon-item {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	flex-direction: column;
	transition: box-shadow .2s;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-user-coupon-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
}

.xun-user-coupon-item.is-used,
.xun-user-coupon-item.is-expired {
	opacity: .6
}

.xun-user-coupon-header {
	border-bottom: 1px solid var(--color-border-secondary);
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	display: flex
}

.xun-user-coupon-info {
	flex-direction: column;
	flex: 1;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-user-coupon-code {
	color: var(--color-text);
	align-items: center;
	gap: .375rem;
	font-family: SF Mono, Monaco, Inconsolata, Fira Code, monospace;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-user-coupon-code svg {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-user-coupon-copy-btn {
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	border: none;
	justify-content: center;
	align-items: center;
	margin-left: .25rem;
	padding: 0;
	transition: all .2s;
	display: inline-flex
}

.xun-user-coupon-copy-btn svg {
	width: 14px;
	height: 14px
}

.xun-user-coupon-copy-btn:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-coupon-date {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .6875rem;
	display: inline-flex
}

.xun-user-coupon-date svg {
	flex-shrink: 0;
	width: 12px;
	height: 12px
}

.xun-user-coupon-status {
	white-space: nowrap;
	border-radius: 9999px;
	flex-shrink: 0;
	align-items: center;
	padding: .1875rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-flex
}

.xun-user-coupon-status.is-unused {
	color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-user-coupon-status.is-used {
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary)
}

.xun-user-coupon-status.is-expired {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-user-coupon-body {
	flex-direction: column;
	flex: 1;
	gap: .75rem;
	padding: 1rem;
	display: flex
}

.xun-user-coupon-main {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-user-coupon-icon {
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius, 8px);
	width: 44px;
	height: 44px;
	color: var(--xun-primary);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-user-coupon-icon svg {
	width: 22px;
	height: 22px
}

.xun-user-coupon-detail {
	flex: 1;
	min-width: 0
}

.xun-user-coupon-value {
	color: var(--xun-primary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-user-coupon-meta {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-top: .25rem;
	display: flex
}

.xun-user-coupon-type {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-radius: 9999px;
	align-items: center;
	padding: .125rem .375rem;
	font-size: .625rem;
	font-weight: 500;
	display: inline-flex
}

.xun-user-coupon-condition {
	color: var(--color-text-tertiary);
	font-size: .6875rem
}

.xun-user-coupon-expire {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .6875rem;
	display: inline-flex
}

.xun-user-coupon-expire svg {
	flex-shrink: 0;
	width: 12px;
	height: 12px
}

.xun-user-coupon-footer {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	padding: .625rem 1rem;
	display: flex
}

.xun-user-coupon-tip {
	color: var(--color-text-tertiary);
	font-size: .6875rem
}

@media(max-width:1024px) {
	.xun-user-coupons-list {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:768px) {
	.xun-user-coupons {
		gap: .5rem
	}

	.xun-user-coupons-filters {
		padding: .625rem .875rem
	}

	.xun-user-coupons-status-btn {
		padding: .25rem .5rem;
		font-size: .75rem
	}

	.xun-user-coupons-list {
		grid-template-columns: repeat(2, 1fr);
		gap: .75rem
	}

	.xun-user-coupon-header {
		padding: .625rem .75rem
	}

	.xun-user-coupon-code {
		font-size: .6875rem
	}

	.xun-user-coupon-body {
		gap: .5rem;
		padding: .75rem
	}

	.xun-user-coupon-icon {
		width: 36px;
		height: 36px
	}

	.xun-user-coupon-icon svg {
		width: 18px;
		height: 18px
	}

	.xun-user-coupon-value {
		font-size: 1rem
	}

	.xun-user-coupon-footer {
		padding: .5rem .75rem
	}
}

@media(max-width:640px) {
	.xun-user-coupons-list {
		grid-template-columns: 1fr
	}
}

@media(max-width:480px) {
	.xun-user-coupon-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .375rem
	}

	.xun-user-coupon-footer {
		flex-direction: column;
		align-items: stretch
	}

	.xun-user-coupon-footer .btn {
		justify-content: center;
		width: 100%
	}

	.xun-user-coupon-tip {
		text-align: center
	}
}

.dark .xun-user-coupons-filters,
.dark .xun-user-coupon-item {
	background: var(--color-bg-container)
}

.dark .xun-user-coupon-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.dark .xun-user-coupons-status-btn:hover,
.dark .xun-user-coupons-status-btn.is-active {
	background: var(--color-primary-bg)
}

.dark .xun-user-coupon-header,
.dark .xun-user-coupon-footer {
	border-color: var(--color-border)
}

.dark .xun-user-coupon-copy-btn {
	background: var(--color-fill-tertiary)
}

.dark .xun-user-coupon-copy-btn:hover,
.dark .xun-user-coupon-icon,
.dark .xun-user-coupon-type {
	background: var(--color-primary-bg)
}

.dark .xun-user-coupon-status.is-unused {
	background: var(--color-success-bg)
}

.dark .xun-user-coupon-status.is-used {
	background: var(--color-fill-secondary)
}

.dark .xun-user-coupon-status.is-expired {
	background: var(--color-error-bg)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {

	.dark .xun-user-coupons-status-btn:hover,
	.dark .xun-user-coupons-status-btn.is-active {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {

		.dark .xun-user-coupons-status-btn:hover,
		.dark .xun-user-coupons-status-btn.is-active {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-user-coupon-copy-btn:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-coupon-copy-btn:hover {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-user-coupon-icon {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-coupon-icon {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-user-coupon-type {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-coupon-type {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-user-coupon-status.is-unused {
		background: rgba(81, 193, 72, .15)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-coupon-status.is-unused {
			background: color-mix(in srgb, var(--color-success)15%, transparent)
		}
	}

	.dark .xun-user-coupon-status.is-expired {
		background: rgba(253, 57, 63, .15)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-user-coupon-status.is-expired {
			background: color-mix(in srgb, var(--color-error)15%, transparent)
		}
	}
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-user-coupons-filters,
	:root:not(.light) .xun-user-coupon-item {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-user-coupon-item:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
	}

	:root:not(.light) .xun-user-coupons-status-btn:hover,
	:root:not(.light) .xun-user-coupons-status-btn.is-active {
		background: var(--color-primary-bg)
	}

	:root:not(.light) .xun-user-coupon-header,
	:root:not(.light) .xun-user-coupon-footer {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-user-coupon-copy-btn {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-user-coupon-copy-btn:hover,
	:root:not(.light) .xun-user-coupon-icon,
	:root:not(.light) .xun-user-coupon-type {
		background: var(--color-primary-bg)
	}

	:root:not(.light) .xun-user-coupon-status.is-unused {
		background: var(--color-success-bg)
	}

	:root:not(.light) .xun-user-coupon-status.is-used {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-user-coupon-status.is-expired {
		background: var(--color-error-bg)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {

		:root:not(.light) .xun-user-coupons-status-btn:hover,
		:root:not(.light) .xun-user-coupons-status-btn.is-active {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {

			:root:not(.light) .xun-user-coupons-status-btn:hover,
			:root:not(.light) .xun-user-coupons-status-btn.is-active {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-coupon-copy-btn:hover {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-coupon-copy-btn:hover {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-coupon-icon {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-coupon-icon {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-coupon-type {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-coupon-type {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-coupon-status.is-unused {
			background: rgba(81, 193, 72, .15)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-coupon-status.is-unused {
				background: color-mix(in srgb, var(--color-success)15%, transparent)
			}
		}

		:root:not(.light) .xun-user-coupon-status.is-expired {
			background: rgba(253, 57, 63, .15)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-user-coupon-status.is-expired {
				background: color-mix(in srgb, var(--color-error)15%, transparent)
			}
		}
	}
}

#xun-claim-coupon-confirm-btn.btn-loading .btn-label {
	display: none
}

#xun-claim-coupon-confirm-btn .btn-spinner {
	align-items: center;
	gap: .375rem;
	display: none
}

#xun-claim-coupon-confirm-btn.btn-loading .btn-spinner {
	display: inline-flex
}

.xun-coupon-use-modal .modal-body {
	padding: 1.5rem
}

.xun-coupon-use-info {
	text-align: center
}

.xun-coupon-use-tip {
	color: var(--color-text);
	margin: 0 0 1rem;
	font-size: .9375rem;
	line-height: 1.5
}

.xun-coupon-use-detail {
	background-color: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	padding: 1rem;
	display: flex
}

.xun-coupon-use-type {
	color: var(--color-text-secondary);
	background-color: var(--color-fill-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	padding: .25rem .5rem;
	font-size: .875rem
}

.xun-coupon-use-value {
	color: var(--color-primary);
	font-size: 1.25rem;
	font-weight: 600
}

.xun-coupon-use-code {
	font-size: .8125rem;
	font-family: var(--font-mono, monospace);
	color: var(--color-text-tertiary);
	letter-spacing: .05em;
	margin: 0
}

#xun-coupon-use-confirm-btn.btn-loading .btn-label {
	display: none
}

#xun-coupon-use-confirm-btn .btn-loading-content {
	align-items: center;
	gap: .375rem;
	display: none
}

#xun-coupon-use-confirm-btn.btn-loading .btn-loading-content {
	display: inline-flex
}

.xun-claim-coupon-modal .modal-body {
	padding: 1.5rem
}

.xun-claim-coupon-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-claim-coupon-desc {
	color: var(--color-text-secondary);
	text-align: center;
	margin: 0;
	font-size: .875rem
}

.xun-claim-coupon-input-wrap {
	align-items: center;
	display: flex;
	position: relative
}

.xun-claim-coupon-input {
	letter-spacing: .05em;
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	padding: .625rem 1rem .625rem 2.75rem;
	font-family: SF Mono, Monaco, Inconsolata, Fira Code, monospace;
	font-size: .875rem;
	transition: all .2s
}

.xun-claim-coupon-input:focus {
	border-color: var(--xun-primary);
	background: var(--color-bg-container);
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-claim-coupon-input::placeholder {
	color: var(--color-text-quaternary);
	letter-spacing: normal;
	font-family: inherit
}

.xun-claim-coupon-input-icon {
	color: var(--color-text-tertiary);
	pointer-events: none;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	left: .875rem
}

.xun-claim-coupon-input-icon svg {
	width: 18px;
	height: 18px
}

.xun-claim-coupon-hint {
	color: var(--color-text-tertiary);
	text-align: center;
	margin: 0;
	font-size: .75rem
}

.dark .xun-claim-coupon-input {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border)
}

.dark .xun-claim-coupon-input:focus {
	background: var(--color-bg-elevated);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-claim-coupon-input:focus {
		box-shadow: 0 0 0 3px var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-claim-coupon-input:focus {
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-claim-coupon-input {
		background: var(--color-fill-tertiary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-claim-coupon-input:focus {
		background: var(--color-bg-elevated);
		border-color: var(--xun-primary);
		box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-claim-coupon-input:focus {
			box-shadow: 0 0 0 3px var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-claim-coupon-input:focus {
				box-shadow: 0 0 0 3px color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}
	}
}

@media(max-width:480px) {
	.xun-claim-coupon-modal .modal-body {
		padding: 1rem
	}

	.xun-claim-coupon-input {
		padding: .5rem .75rem .5rem 2.25rem;
		font-size: .8125rem
	}

	.xun-claim-coupon-input-icon {
		left: .625rem
	}

	.xun-claim-coupon-input-icon svg {
		width: 16px;
		height: 16px
	}
}

.xun-user-coupon-transfer-btn {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-user-coupon-transfer-btn svg {
	width: 14px;
	height: 14px
}

.xun-user-coupon-transfer-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed
}

.xun-coupon-transfer-modal .modal-body {
	padding: 1.5rem
}

.xun-transfer-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-transfer-desc {
	color: var(--color-text-secondary);
	text-align: center;
	margin: 0;
	font-size: .875rem
}

.xun-transfer-input-wrap {
	align-items: center;
	display: flex;
	position: relative
}

.xun-transfer-input {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	outline: none;
	padding: .625rem 1rem .625rem 2.75rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-transfer-input:focus {
	border-color: var(--xun-primary);
	background: var(--color-bg-container);
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-transfer-input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-transfer-input-icon {
	color: var(--color-text-tertiary);
	pointer-events: none;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	left: .875rem
}

.xun-transfer-input-icon svg {
	width: 18px;
	height: 18px
}

.xun-transfer-coupon-info {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	display: flex
}

.xun-transfer-coupon-type {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	padding: .125rem .375rem;
	font-size: .75rem
}

.xun-transfer-coupon-value {
	color: var(--xun-primary);
	font-size: 1rem;
	font-weight: 600
}

.xun-transfer-coupon-code {
	color: var(--color-text-tertiary);
	letter-spacing: .05em;
	font-family: SF Mono, Monaco, Inconsolata, Fira Code, monospace;
	font-size: .75rem
}

.xun-transfer-hint {
	color: var(--color-text-tertiary);
	justify-content: center;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-size: .75rem;
	display: flex
}

.xun-transfer-hint svg {
	color: var(--color-warning);
	flex-shrink: 0
}

.xun-coupon-transfer-confirm-modal .modal-body {
	padding: 1.5rem
}

.xun-transfer-confirm-content {
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-transfer-confirm-icon {
	background: var(--color-primary-bg);
	width: 72px;
	height: 72px;
	color: var(--xun-primary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-transfer-confirm-icon svg {
	width: 36px;
	height: 36px
}

.xun-transfer-confirm-title {
	color: var(--color-text);
	text-align: center;
	margin: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-transfer-confirm-info {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	width: 100%;
	padding: 1rem
}

.xun-transfer-confirm-row {
	justify-content: space-between;
	align-items: center;
	padding: .5rem 0;
	display: flex
}

.xun-transfer-confirm-row:not(:last-child) {
	border-bottom: 1px solid var(--color-border-secondary)
}

.xun-transfer-confirm-label {
	color: var(--color-text-secondary);
	font-size: .875rem
}

.xun-transfer-confirm-value {
	color: var(--color-text);
	font-size: .875rem;
	font-weight: 500
}

.xun-transfer-confirm-warning {
	color: var(--color-warning);
	text-align: center;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-size: .75rem;
	display: flex
}

.xun-transfer-confirm-warning svg {
	flex-shrink: 0
}

#xun-transfer-next-btn.btn-loading .btn-label {
	display: none
}

#xun-transfer-next-btn .btn-spinner {
	align-items: center;
	gap: .375rem;
	display: none
}

#xun-transfer-next-btn.btn-loading .btn-spinner {
	display: inline-flex
}

#xun-transfer-confirm-btn.btn-loading .btn-label {
	display: none
}

#xun-transfer-confirm-btn .btn-spinner {
	align-items: center;
	gap: .375rem;
	display: none
}

#xun-transfer-confirm-btn.btn-loading .btn-spinner {
	display: inline-flex
}

.xun-claim-coupon-modal .modal-footer .btn,
.xun-coupon-transfer-modal .modal-footer .btn,
.xun-coupon-transfer-confirm-modal .modal-footer .btn,
.xun-claim-coupon-modal .modal-footer .btn:hover,
.xun-coupon-transfer-modal .modal-footer .btn:hover,
.xun-coupon-transfer-confirm-modal .modal-footer .btn:hover {
	transform: translateY(0)
}

.dark .xun-transfer-input {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border)
}

.dark .xun-transfer-input:focus {
	background: var(--color-bg-elevated);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
}

.dark .xun-transfer-coupon-info,
.dark .xun-transfer-confirm-info {
	background: var(--color-fill-tertiary)
}

.dark .xun-transfer-coupon-type {
	background: var(--color-fill-secondary)
}

.dark .xun-transfer-confirm-icon {
	background: rgba(22, 119, 255, .15)
}

.dark .xun-transfer-confirm-row:not(:last-child) {
	border-color: var(--color-border)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-transfer-input:focus {
		box-shadow: 0 0 0 3px var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-transfer-input:focus {
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-transfer-confirm-icon {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-transfer-confirm-icon {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-transfer-input {
		background: var(--color-fill-tertiary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-transfer-input:focus {
		background: var(--color-bg-elevated);
		border-color: var(--xun-primary);
		box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-transfer-coupon-info,
	:root:not(.light) .xun-transfer-confirm-info {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-transfer-coupon-type {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-transfer-confirm-icon {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-transfer-confirm-row:not(:last-child) {
		border-color: var(--color-border)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-transfer-input:focus {
			box-shadow: 0 0 0 3px var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-transfer-input:focus {
				box-shadow: 0 0 0 3px color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-transfer-confirm-icon {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-transfer-confirm-icon {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}
	}
}

@media(max-width:480px) {

	.xun-coupon-transfer-modal .modal-body,
	.xun-coupon-transfer-confirm-modal .modal-body {
		padding: 1rem
	}

	.xun-transfer-input {
		padding: .5rem .75rem .5rem 2.25rem;
		font-size: .8125rem
	}

	.xun-transfer-input-icon {
		left: .625rem
	}

	.xun-transfer-input-icon svg {
		width: 16px;
		height: 16px
	}

	.xun-transfer-confirm-icon {
		width: 56px;
		height: 56px
	}

	.xun-transfer-confirm-icon svg {
		width: 28px;
		height: 28px
	}

	.xun-transfer-confirm-info {
		padding: .75rem
	}

	.xun-transfer-confirm-row {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem
	}
}

.xun-author-container {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-author-hero-content {
	align-items: center
}

.xun-author-hero-meta {
	color: rgba(255, 255, 255, .8);
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	font-size: .8125rem;
	display: flex
}

.xun-author-hero-bio {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	max-width: 300px;
	display: -webkit-box;
	overflow: hidden
}

.xun-author-hero-join {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-author-hero-join svg {
	opacity: .8;
	flex-shrink: 0
}

.xun-author-hero-badges {
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .25rem;
	display: flex
}

.xun-author-level-badge,
.xun-author-vip-badge {
	white-space: nowrap;
	border-radius: 9999px;
	align-items: center;
	padding: .125rem .5rem;
	font-size: .6875rem;
	font-weight: 600;
	display: inline-flex
}

.xun-author-level-badge {
	--badge-color: var(--level-color, var(--xun-primary));
	color: var(--badge-color);
	background: rgba(255, 255, 255, .9)
}

.xun-author-vip-badge {
	--vip-color: var(--xun-primary);
	color: #fff;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), var(--vip-color)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-author-vip-badge {
		background: linear-gradient(135deg, var(--vip-color)0%, var(--vip-color)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-author-vip-badge {
			background: linear-gradient(135deg, var(--vip-color)0%, color-mix(in srgb, var(--vip-color)70%, #000)100%)
		}
	}
}

.xun-author-level-badge.xun-level-badge--icon {
	background: 0 0;
	border: none;
	padding: 0
}

.xun-author-level-badge.xun-level-badge--icon .xun-level-icon {
	object-fit: contain;
	width: auto;
	height: 20px;
	max-height: 24px;
	display: block
}

.xun-author-hero-right,
.xun-author-hero-stats {
	align-items: center;
	gap: 1.5rem;
	display: flex
}

.xun-author-hero-stat {
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-author-hero-stat-value {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1
}

.xun-author-hero-stat-label {
	color: rgba(255, 255, 255, .7);
	font-size: .75rem
}

.xun-author-follow-btn {
	min-width: 90px
}

.xun-author-follow-btn .xun-follow-text,
.xun-author-follow-btn .xun-unfollow-text {
	align-items: center;
	gap: .375rem;
	display: inline-flex
}

.xun-author-follow-btn.xun-following:hover .xun-follow-text {
	display: none
}

.xun-author-follow-btn.xun-following:hover .xun-unfollow-text {
	display: inline-flex !important
}

.xun-author-hero-waves {
	pointer-events: none;
	width: 100%;
	height: 80px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden
}

.xun-author-hero-wave {
	transform-origin: bottom;
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-size: 25% 100%;
	width: 400%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0
}

.xun-author-hero-wave--1 {
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
	animation: 20s linear infinite authorWaveMove
}

.xun-author-hero-wave--2 {
	z-index: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.35'/%3E%3C/svg%3E");
	animation: 15s linear -5s infinite authorWaveMove
}

.xun-author-hero-wave--3 {
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E");
	animation: 10s linear -2s infinite authorWaveMove
}

@keyframes authorWaveMove {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(-25%)
	}
}

.xun-author-tabs {
	gap: .5rem;
	padding: .75rem 1rem;
	display: flex
}

.xun-author-tab {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .5rem;
	padding: .625rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-author-tab:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-author-tab.is-active {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-author-tab svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-author-tab.is-active svg {
	opacity: 1
}

.xun-author-tab-count {
	background: rgba(0, 0, 0, .06);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	min-width: 1.5rem;
	height: 1.25rem;
	padding: 0 .375rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-author-tab.is-active .xun-author-tab-count {
	background: var(--xun-primary);
	color: #fff
}

.xun-author-content {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-author-posts-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-author-post-item {
	gap: 1rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-author-post-thumb {
	border-radius: var(--xun-radius, 8px);
	flex-shrink: 0;
	width: 160px;
	height: 100px;
	overflow: hidden
}

.xun-author-post-thumb a {
	width: 100%;
	height: 100%;
	display: block
}

.xun-author-post-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s
}

.xun-author-post-item:hover .xun-author-post-thumb img {
	transform: scale(1.05)
}

.xun-author-post-content {
	flex-direction: column;
	flex: 1;
	justify-content: center;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-author-post-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5
}

.xun-author-post-title a {
	color: var(--color-text);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-decoration: none;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-author-post-title a:hover {
	color: var(--xun-primary)
}

.xun-author-post-meta {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	font-size: .8125rem;
	display: flex
}

.xun-author-post-meta>span {
	align-items: center;
	gap: .25rem;
	display: inline-flex
}

.xun-author-post-cat {
	color: var(--xun-primary);
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius-sm, 4px);
	padding: .125rem .5rem;
	font-size: .75rem
}

.xun-author-comments-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-author-comment-item {
	flex-direction: column;
	gap: .75rem;
	padding: 1.25rem;
	display: flex
}

.xun-author-comment-header {
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-author-comment-date {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .8125rem;
	display: inline-flex
}

.xun-author-comment-post {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-author-comment-post:hover {
	color: var(--xun-primary)
}

.xun-author-comment-post svg {
	opacity: .7;
	flex-shrink: 0
}

.xun-author-comment-content {
	color: var(--color-text);
	font-size: .9375rem;
	line-height: 1.6
}

.xun-author-comment-content p {
	margin: 0
}

.xun-author-comment-content p+p {
	margin-top: .5rem
}

.xun-author-comment-action {
	border-top: 1px solid var(--color-border-secondary);
	padding-top: .5rem
}

.xun-author-comment-link {
	color: var(--xun-primary);
	align-items: center;
	gap: .25rem;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: gap .2s;
	display: inline-flex
}

.xun-author-comment-link:hover {
	gap: .5rem
}

.xun-author-pagination {
	justify-content: center;
	padding: 1rem;
	display: flex
}

.xun-author-pagination .page-numbers {
	min-width: 2.25rem;
	height: 2.25rem;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	justify-content: center;
	align-items: center;
	margin: 0 .25rem;
	padding: 0 .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-author-pagination .page-numbers:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-author-pagination .page-numbers.current {
	color: #fff;
	background: var(--xun-primary)
}

.xun-author-pagination .page-numbers.dots {
	background: 0 0
}

.xun-author-pagination .prev,
.xun-author-pagination .next {
	padding: 0 .5rem
}

.xun-author-empty {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-author-empty-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem
}

.xun-author-empty-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-author-empty-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

@media(max-width:768px) {
	.xun-author-page {
		padding-bottom: 1.5rem
	}

	.xun-author-container {
		padding: 0 1rem
	}

	.xun-author-hero {
		padding: 1.5rem 0 3rem
	}

	.xun-author-hero--transparent {
		padding-top: calc(56px + 1.5rem)
	}

	.xun-author-hero-inner {
		padding: 0 1rem
	}

	.xun-author-hero-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem
	}

	.xun-author-hero-left {
		width: 100%
	}

	.xun-author-hero-avatar {
		width: 56px;
		height: 56px
	}

	.xun-author-hero-avatar img {
		border-width: 2px
	}

	.xun-author-hero-name {
		font-size: 1.125rem
	}

	.xun-author-hero-meta {
		gap: .5rem;
		font-size: .75rem
	}

	.xun-author-hero-bio {
		max-width: 200px
	}

	.xun-author-hero-right {
		justify-content: space-between;
		width: 100%
	}

	.xun-author-hero-stats {
		gap: 1rem
	}

	.xun-author-hero-stat-value {
		font-size: 1rem
	}

	.xun-author-hero-stat-label {
		font-size: .6875rem
	}

	.xun-author-tabs {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: .375rem;
		padding: .5rem;
		overflow-x: auto
	}

	.xun-author-tabs::-webkit-scrollbar {
		display: none
	}

	.xun-author-tab {
		flex: none;
		padding: .5rem 1rem;
		font-size: .8125rem
	}

	.xun-author-post-item {
		flex-direction: column;
		gap: .75rem;
		padding: 1rem
	}

	.xun-author-post-thumb {
		width: 100%;
		height: 180px
	}

	.xun-author-post-title {
		font-size: .9375rem
	}

	.xun-author-post-meta {
		gap: .5rem;
		font-size: .75rem
	}

	.xun-author-comment-item {
		padding: 1rem
	}

	.xun-author-pagination .page-numbers {
		min-width: 2rem;
		height: 2rem;
		padding: 0 .5rem;
		font-size: .8125rem
	}

	.xun-author-empty {
		padding: 3rem 1.5rem
	}

	.xun-author-empty-icon svg {
		width: 48px;
		height: 48px
	}
}

@media(max-width:480px) {
	.xun-author-hero {
		padding: 1rem 0 2.5rem
	}

	.xun-author-hero--transparent {
		padding-top: calc(56px + 1rem)
	}

	.xun-author-hero-inner {
		padding: 0 .75rem
	}

	.xun-author-hero-avatar {
		width: 48px;
		height: 48px
	}

	.xun-author-hero-name {
		font-size: 1rem
	}

	.xun-author-hero-bio {
		display: none
	}

	.xun-author-hero-badges {
		margin-top: .125rem
	}

	.xun-author-level-badge,
	.xun-author-vip-badge {
		padding: .0625rem .375rem;
		font-size: .625rem
	}

	.xun-author-post-thumb {
		height: 150px
	}

	.xun-author-post-meta .xun-author-post-views,
	.xun-author-post-meta .xun-author-post-comments {
		display: none
	}
}

.dark .xun-author-page {
	background: var(--color-bg-layout)
}

.dark .xun-author-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), var(--xun-primary)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-author-hero {
		background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-author-hero {
			background: linear-gradient(135deg, color-mix(in srgb, var(--xun-primary)80%, #000), color-mix(in srgb, var(--xun-primary)50%, #000))
		}
	}
}

.dark .xun-author-hero-wave--1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.5'/%3E%3C/svg%3E")
}

.dark .xun-author-hero-wave--2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.35'/%3E%3C/svg%3E")
}

.dark .xun-author-hero-wave--3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.2'/%3E%3C/svg%3E")
}

.dark .xun-author-tab {
	background: var(--color-fill-secondary)
}

.dark .xun-author-tab:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-author-tab-count {
	background: rgba(255, 255, 255, .1)
}

.dark .xun-author-pagination .page-numbers {
	background: var(--color-fill-secondary)
}

.dark .xun-author-pagination .page-numbers:hover {
	background: var(--color-fill-tertiary)
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-author-page {
		background: var(--color-bg-layout)
	}

	:root:not(.light) .xun-author-hero {
		background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), var(--xun-primary)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-author-hero {
			background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-author-hero {
				background: linear-gradient(135deg, color-mix(in srgb, var(--xun-primary)80%, #000), color-mix(in srgb, var(--xun-primary)50%, #000))
			}
		}
	}

	:root:not(.light) .xun-author-hero-wave--1 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 0 500 50 Q750 100 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.5'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-author-hero-wave--2 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 5 500 50 Q750 95 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.35'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-author-hero-wave--3 {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q250 15 500 50 Q750 85 1000 50 L1000 100 L0 100 Z' fill='%23121212' fill-opacity='0.2'/%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-author-tab {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-author-tab:hover {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-author-tab-count {
		background: rgba(255, 255, 255, .1)
	}

	:root:not(.light) .xun-author-pagination .page-numbers {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-author-pagination .page-numbers:hover {
		background: var(--color-fill-tertiary)
	}
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
	background: 0 0 !important
}

code[class*=language-],
pre[class*=language-] {
	color: #d4d4d4;
	text-shadow: none
}

.xun-code-wrapper {
	border-radius: var(--xun-radius, 8px);
	background: #1e1e1e;
	margin: 1.5rem 0;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1)
}

.xun-code-header {
	background: #2d2d2d;
	border-bottom: 1px solid #3d3d3d;
	justify-content: space-between;
	align-items: center;
	padding: .625rem 1rem;
	display: flex
}

.xun-code-header-left {
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-code-header-right {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-code-dots {
	align-items: center;
	gap: 6px;
	display: flex
}

.xun-code-dots span {
	border-radius: 50%;
	width: 12px;
	height: 12px
}

.xun-code-dots span:first-child {
	background: #ff5f56
}

.xun-code-dots span:nth-child(2) {
	background: #ffbd2e
}

.xun-code-dots span:nth-child(3) {
	background: #27c93f
}

.xun-code-filename {
	color: #a0a0a0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
	font-size: .8125rem
}

.xun-code-lang {
	color: gray;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: rgba(255, 255, 255, .05);
	border-radius: 4px;
	padding: .125rem .5rem;
	font-size: .75rem
}

.xun-code-copy,
.xun-code-toggle {
	color: gray;
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-code-copy:hover,
.xun-code-toggle:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1)
}

.xun-code-copy.copied {
	color: #27c93f
}

.xun-code-copy svg,
.xun-code-toggle svg {
	width: 16px;
	height: 16px
}

.xun-code-wrapper pre {
	tab-size: 4;
	background: #1e1e1e;
	margin: 0;
	padding: 1rem;
	font-size: .875rem;
	line-height: 1.6;
	overflow-x: auto
}

.xun-code-wrapper pre code {
	font-family: JetBrains Mono, Fira Code, Consolas, Monaco, Courier New, monospace;
	font-size: inherit;
	line-height: inherit;
	color: #d4d4d4;
	white-space: pre;
	word-wrap: normal;
	background: 0 0;
	border: none;
	border-radius: 0;
	padding: 0;
	display: block
}

.xun-code-wrapper pre.collapsed {
	max-height: 300px;
	position: relative;
	overflow: hidden
}

.xun-code-wrapper pre.collapsed:after {
	content: "";
	pointer-events: none;
	background: linear-gradient(rgba(0, 0, 0, 0), #1e1e1e);
	height: 60px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-code-wrapper pre[class*=language-].line-numbers {
	padding-left: 3.8em
}

.xun-code-wrapper .line-numbers-rows {
	border-right-color: rgba(255, 255, 255, .05);
	top: 1rem
}

.xun-code-wrapper .line-numbers-rows>span:before {
	color: #606060
}

.line-highlight {
	background: rgba(255, 255, 255, .05);
	margin: 0 -1rem;
	padding: 0 1rem;
	display: block
}

.xun-code-wrapper .token.comment,
.xun-code-wrapper .token.prolog,
.xun-code-wrapper .token.doctype,
.xun-code-wrapper .token.cdata {
	color: #5c6370;
	font-style: italic
}

.xun-code-wrapper .token.punctuation {
	color: #abb2bf
}

.xun-code-wrapper .token.tag,
.xun-code-wrapper .token.deleted {
	color: #e06c75
}

.xun-code-wrapper .token.attr-name,
.xun-code-wrapper .token.property,
.xun-code-wrapper .token.boolean,
.xun-code-wrapper .token.number,
.xun-code-wrapper .token.constant {
	color: #d19a66
}

.xun-code-wrapper .token.symbol {
	color: #56b6c2
}

.xun-code-wrapper .token.string,
.xun-code-wrapper .token.char,
.xun-code-wrapper .token.attr-value,
.xun-code-wrapper .token.inserted,
.xun-code-wrapper .token.selector {
	color: #98c379
}

.xun-code-wrapper .token.builtin,
.xun-code-wrapper .token.operator,
.xun-code-wrapper .token.entity,
.xun-code-wrapper .token.url {
	color: #56b6c2
}

.xun-code-wrapper .language-css .token.string,
.xun-code-wrapper .style .token.string {
	color: #98c379
}

.xun-code-wrapper .token.keyword,
.xun-code-wrapper .token.atrule {
	color: #c678dd
}

.xun-code-wrapper .token.function {
	color: #61afef
}

.xun-code-wrapper .token.class-name {
	color: #e5c07b
}

.xun-code-wrapper .token.regex {
	color: #e06c75
}

.xun-code-wrapper .token.important {
	color: #e06c75;
	font-weight: 700
}

.xun-code-wrapper .token.variable {
	color: #e06c75
}

.xun-code-wrapper .token.bold {
	font-weight: 700
}

.xun-code-wrapper .token.italic {
	font-style: italic
}

.xun-code-wrapper .token.entity {
	cursor: help
}

.xun-code-wrapper .token.namespace {
	color: #4ec9b0
}

.xun-code-wrapper .token.tag .token.punctuation {
	color: #abb2bf
}

.xun-code-wrapper .language-php .token.variable {
	color: #e06c75
}

.xun-code-wrapper .language-php .token.keyword {
	color: #c678dd
}

.xun-code-wrapper .language-php .token.function {
	color: #61afef
}

.xun-code-wrapper .language-php .token.class-name {
	color: #e5c07b
}

.xun-code-wrapper .language-javascript .token.keyword,
.xun-code-wrapper .language-typescript .token.keyword {
	color: #c678dd
}

.xun-code-wrapper .language-javascript .token.function,
.xun-code-wrapper .language-typescript .token.function {
	color: #61afef
}

.xun-code-wrapper .language-javascript .token.string,
.xun-code-wrapper .language-typescript .token.string {
	color: #98c379
}

.xun-code-wrapper .language-javascript .token.number,
.xun-code-wrapper .language-typescript .token.number {
	color: #d19a66
}

.xun-code-wrapper .language-css .token.property {
	color: #56b6c2
}

.xun-code-wrapper .language-css .token.selector {
	color: #e06c75
}

.xun-code-wrapper .language-css .token.function {
	color: #61afef
}

.xun-code-wrapper .language-markup .token.tag {
	color: #e06c75
}

.xun-code-wrapper .language-markup .token.attr-name {
	color: #d19a66
}

.xun-code-wrapper .language-markup .token.attr-value {
	color: #98c379
}

.xun-code-wrapper .language-json .token.property {
	color: #e06c75
}

.xun-code-wrapper .language-json .token.string {
	color: #98c379
}

.xun-code-wrapper .language-json .token.number,
.xun-code-wrapper .language-json .token.boolean {
	color: #d19a66
}

.xun-code-wrapper .language-sql .token.keyword {
	color: #c678dd
}

.xun-code-wrapper .language-sql .token.function,
.xun-code-wrapper .language-bash .token.function {
	color: #61afef
}

.xun-code-wrapper .language-bash .token.variable {
	color: #e06c75
}

.xun-code-wrapper .language-python .token.keyword {
	color: #c678dd
}

.xun-code-wrapper .language-python .token.builtin,
.xun-code-wrapper .language-python .token.decorator {
	color: #e5c07b
}

@media(max-width:640px) {
	.xun-code-wrapper pre {
		padding: .75rem;
		font-size: .8125rem
	}

	.xun-code-header {
		padding: .5rem .75rem
	}

	.xun-code-dots span {
		width: 10px;
		height: 10px
	}

	.xun-code-filename {
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120px;
		font-size: .75rem;
		overflow: hidden
	}

	.xun-code-lang {
		font-size: .6875rem
	}

	.xun-code-wrapper pre.line-numbers {
		padding-left: 2.75rem
	}

	.line-numbers-rows {
		width: 2.25rem;
		font-size: .8125rem
	}
}

.xun-single-content code:not([class*=language-]),
.entry-content code:not([class*=language-]) {
	background: var(--color-fill-tertiary);
	color: var(--color-text);
	word-break: break-word;
	border-radius: 4px;
	margin: 0 .125rem;
	padding: .125rem .375rem;
	font-family: JetBrains Mono, Fira Code, Consolas, Monaco, Courier New, monospace;
	font-size: .875em
}

.wp-block-code {
	border-radius: var(--xun-radius, 8px);
	margin: 1.5rem 0;
	overflow: hidden
}

.wp-block-code pre {
	background: #1e1e1e;
	margin: 0;
	padding: 1rem;
	overflow-x: auto
}

.wp-block-code code {
	color: #d4d4d4;
	font-family: JetBrains Mono, Fira Code, Consolas, Monaco, Courier New, monospace;
	font-size: .875rem;
	line-height: 1.6
}

.xun-alert {
	border-radius: var(--xun-radius, 8px);
	transition: all .3s var(--ease-smooth, ease);
	align-items: flex-start;
	gap: .875rem;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	font-size: .9375rem;
	line-height: 1.7;
	display: flex;
	position: relative
}

.xun-alert.has-border {
	border-radius: 0 var(--xun-radius, 8px)var(--xun-radius, 8px)0;
	border-left: 4px solid
}

.xun-alert.has-outline {
	border: 1px solid;
	background: 0 0 !important
}

.xun-alert.is-filled {
	color: #fff !important
}

.xun-alert.is-filled .xun-alert-content {
	opacity: .95
}

.xun-alert-icon {
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 22px;
	height: 22px;
	margin-top: .0625rem;
	display: flex
}

.xun-alert-icon svg {
	fill: currentColor;
	width: 100%;
	height: 100%
}

.xun-alert-body {
	flex: 1;
	min-width: 0
}

.xun-alert-title {
	margin-bottom: .375rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5
}

.xun-alert-content {
	opacity: .9
}

.xun-alert-content p:first-child {
	margin-top: 0
}

.xun-alert-content p:last-child {
	margin-bottom: 0
}

.xun-alert-content a {
	color: inherit;
	text-underline-offset: 2px;
	text-decoration: underline
}

.xun-alert-content a:hover {
	opacity: .8
}

.xun-alert-content code {
	border-radius: var(--xun-radius-sm, 4px);
	background: rgba(0, 0, 0, .1);
	padding: .125rem .375rem;
	font-size: .875em
}

.xun-alert-info {
	background: var(--color-info-bg, oklch(97% .02 255));
	color: var(--color-info, oklch(56.5% .22 260))
}

.xun-alert-info.has-border {
	border-left-color: var(--color-primary, oklch(56.5% .22 260))
}

.xun-alert-info.has-outline {
	border-color: var(--color-info-border, oklch(82% .1 255));
	color: var(--color-info, oklch(56.5% .22 260))
}

.xun-alert-info.is-filled {
	background: var(--color-primary, oklch(56.5% .22 260))
}

.xun-alert-success {
	background: var(--color-success-bg, oklch(98% .03 145));
	color: var(--color-success-text, oklch(72% .19 142))
}

.xun-alert-success.has-border {
	border-left-color: var(--color-success, oklch(72% .19 142))
}

.xun-alert-success.has-outline {
	border-color: var(--color-success-border, oklch(90% .13 135));
	color: var(--color-success-text, oklch(72% .19 142))
}

.xun-alert-success.is-filled {
	background: var(--color-success, oklch(72% .19 142))
}

.xun-alert-warning {
	background: var(--color-warning-bg, oklch(99% .03 95));
	color: var(--color-warning-text, oklch(79% .17 75))
}

.xun-alert-warning.has-border {
	border-left-color: var(--color-warning, oklch(79% .17 75))
}

.xun-alert-warning.has-outline {
	border-color: var(--color-warning-border, oklch(93% .12 92));
	color: var(--color-warning-text, oklch(79% .17 75))
}

.xun-alert-warning.is-filled {
	background: var(--color-warning, oklch(79% .17 75))
}

.xun-alert-error,
.xun-alert-danger {
	background: var(--color-error-bg, oklch(97.5% .015 20));
	color: var(--color-error-text, oklch(65% .23 25))
}

.xun-alert-error.has-border,
.xun-alert-danger.has-border {
	border-left-color: var(--color-error, oklch(65% .23 25))
}

.xun-alert-error.has-outline,
.xun-alert-danger.has-outline {
	border-color: var(--color-error-border, oklch(90% .06 20));
	color: var(--color-error-text, oklch(65% .23 25))
}

.xun-alert-error.is-filled,
.xun-alert-danger.is-filled {
	background: var(--color-error, oklch(65% .23 25))
}

.xun-alert-note {
	color: #773ac1;
	background: #f7f3ff;
	background: oklch(97% .02 300)
}

.xun-alert-note.has-border {
	border-left-color: #9754ed
}

.xun-alert-note.has-outline {
	border-color: #d6c1ff;
	border-color: oklch(85% .1 300)
}

.xun-alert-note.is-filled {
	background: #9754ed
}

.xun-alert-tip {
	color: #007373;
	color: oklch(50% .12 195);
	background: #e7faf9
}

.xun-alert-tip.has-border {
	border-left-color: #009394;
	border-left-color: oklch(60% .14 195)
}

.xun-alert-tip.has-outline {
	border-color: #8ddfde
}

.xun-alert-tip.is-filled {
	background: #009394;
	background: oklch(60% .14 195)
}

.xun-alert-important {
	color: #bf2a82;
	background: #fff1f7;
	background: oklch(97% .02 350)
}

.xun-alert-important.has-border {
	border-left-color: #e942a2
}

.xun-alert-important.has-outline {
	border-color: #ffb4d7;
	border-color: oklch(85% .1 350)
}

.xun-alert-important.is-filled {
	background: #e942a2
}

.xun-alert-quote {
	background: var(--color-neutral-100, oklch(96.5% 0 0));
	color: var(--color-neutral-600, oklch(45% 0 0))
}

.xun-alert-quote.has-border {
	border-left-color: var(--color-neutral-400, oklch(70% 0 0))
}

.xun-alert-quote.has-outline {
	border-color: var(--color-neutral-300, oklch(87% 0 0))
}

.xun-alert-quote.is-filled {
	background: var(--color-neutral-600, oklch(45% 0 0))
}

.xun-alert-question {
	color: #4a51c7;
	background: #f2f5ff;
	background: oklch(97% .02 275)
}

.xun-alert-question.has-border {
	border-left-color: #555de3
}

.xun-alert-question.has-outline {
	border-color: #bfcbff;
	border-color: oklch(85% .1 275)
}

.xun-alert-question.is-filled {
	background: #555de3
}

.xun-alert-example {
	color: #925000;
	color: oklch(50% .12 60);
	background: #fff3e9;
	background: oklch(97% .02 60)
}

.xun-alert-example.has-border {
	border-left-color: #a75c00;
	border-left-color: oklch(55% .14 60)
}

.xun-alert-example.has-outline {
	border-color: #f5c299
}

.xun-alert-example.is-filled {
	background: #a75c00;
	background: oklch(55% .14 60)
}

.xun-alert-update {
	color: #005b88;
	color: oklch(45% .15 240);
	background: #ecf7ff;
	background: oklch(97% .02 240)
}

.xun-alert-update.has-border {
	border-left-color: #006a9d;
	border-left-color: oklch(50% .18 240)
}

.xun-alert-update.has-outline {
	border-color: #9ed5fd
}

.xun-alert-update.is-filled {
	background: #006a9d;
	background: oklch(50% .18 240)
}

.xun-alert-deprecated {
	color: #484848;
	background: #eee
}

.xun-alert-deprecated.has-border {
	border-left-color: #636363
}

.xun-alert-deprecated.has-outline {
	border-color: #bebebe
}

.xun-alert-deprecated.is-filled {
	background: #636363
}

.xun-alert[style*=--alert-color] {
	background: var(--color-fill-tertiary, #0000000a);
	color: var(--alert-color)
}

.xun-alert[style*=--alert-color].has-border {
	border-left-color: var(--alert-color)
}

.xun-alert[style*=--alert-color].has-outline {
	border-color: currentColor
}

.xun-alert[style*=--alert-color].is-filled {
	background: var(--alert-color);
	color: #fff
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-alert[style*=--alert-color] {
		background: var(--alert-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-alert[style*=--alert-color] {
			background: color-mix(in oklch, var(--alert-color)12%, white)
		}
	}

	.xun-alert[style*=--alert-color].has-outline {
		border-color: var(--alert-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-alert[style*=--alert-color].has-outline {
			border-color: color-mix(in oklch, var(--alert-color)30%, white)
		}
	}
}

.xun-alert-sm {
	gap: .625rem;
	padding: .75rem 1rem;
	font-size: .875rem
}

.xun-alert-sm .xun-alert-icon {
	width: 18px;
	height: 18px
}

.xun-alert-sm .xun-alert-title {
	font-size: .9375rem
}

.xun-alert-lg {
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	font-size: 1rem
}

.xun-alert-lg .xun-alert-icon {
	width: 26px;
	height: 26px
}

.xun-alert-lg .xun-alert-title {
	font-size: 1.125rem
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-alert-info {
		background: var(--color-primary-bg);
		color: #7daeff;
		color: oklch(75% .15 260)
	}

	:root:not(.light) .xun-alert-success {
		background: var(--color-success-bg);
		color: #7ccf73
	}

	:root:not(.light) .xun-alert-warning {
		background: var(--color-warning-bg);
		color: #f9b64f
	}

	:root:not(.light) .xun-alert-error,
	:root:not(.light) .xun-alert-danger {
		background: var(--color-error-bg);
		color: #ff847d;
		color: oklch(75% .18 25)
	}

	:root:not(.light) .xun-alert-note {
		background: var(--color-bg-elevated);
		color: #bd96fe
	}

	:root:not(.light) .xun-alert-tip {
		background: var(--color-bg-elevated);
		color: #53c2c1
	}

	:root:not(.light) .xun-alert-important {
		background: var(--color-bg-elevated);
		color: #fe8dc5
	}

	:root:not(.light) .xun-alert-quote {
		color: #9e9e9e;
		background: #222
	}

	:root:not(.light) .xun-alert-question {
		background: var(--color-bg-elevated);
		color: #96a7ff;
		color: oklch(75% .14 275)
	}

	:root:not(.light) .xun-alert-example {
		background: var(--color-bg-elevated);
		color: #dd9f6b
	}

	:root:not(.light) .xun-alert-update {
		background: var(--color-bg-elevated);
		color: #55aee8
	}

	:root:not(.light) .xun-alert-deprecated {
		color: #8f8f8f;
		background: #222
	}

	:root:not(.light) .xun-alert[style*=--alert-color] {
		background: var(--color-bg-elevated)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-alert-info {
			background: #152337
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-alert-info {
				background: color-mix(in oklch, var(--color-primary, oklch(56.5% .22 260))15%, oklch(20% 0 0))
			}
		}

		:root:not(.light) .xun-alert-success {
			background: #1f301d
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-alert-success {
				background: color-mix(in oklch, var(--color-success, oklch(72% .19 142))15%, oklch(20% 0 0))
			}
		}

		:root:not(.light) .xun-alert-warning {
			background: #382c13
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-alert-warning {
				background: color-mix(in oklch, var(--color-warning, oklch(79% .17 75))15%, oklch(20% 0 0))
			}
		}

		:root:not(.light) .xun-alert-error,
		:root:not(.light) .xun-alert-danger {
			background: #391b1c
		}

		@supports (color:color-mix(in lab, red, red)) {

			:root:not(.light) .xun-alert-error,
			:root:not(.light) .xun-alert-danger {
				background: color-mix(in oklch, var(--color-error, oklch(65% .23 25))15%, oklch(20% 0 0))
			}
		}

		:root:not(.light) .xun-alert-note {
			background: #301d26
		}

		:root:not(.light) .xun-alert-tip {
			background: #2b2028
		}

		:root:not(.light) .xun-alert-important {
			background: #331f26
		}

		:root:not(.light) .xun-alert-question {
			background: #2d1c25
		}

		:root:not(.light) .xun-alert-example {
			background: #2b1e20
		}

		:root:not(.light) .xun-alert-update {
			background: #2a1b24
		}

		:root:not(.light) .xun-alert[style*=--alert-color] {
			background: var(--alert-color)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-alert[style*=--alert-color] {
				background: color-mix(in oklch, var(--alert-color)15%, oklch(20% 0 0))
			}
		}
	}

	:root:not(.light) .xun-alert .xun-alert-content code {
		background: rgba(255, 255, 255, .1)
	}
}

.dark .xun-alert-info {
	background: var(--color-primary-bg);
	color: #7daeff;
	color: oklch(75% .15 260)
}

.dark .xun-alert-success {
	background: var(--color-success-bg);
	color: #7ccf73
}

.dark .xun-alert-warning {
	background: var(--color-warning-bg);
	color: #f9b64f
}

.dark .xun-alert-error,
.dark .xun-alert-danger {
	background: var(--color-error-bg);
	color: #ff847d;
	color: oklch(75% .18 25)
}

.dark .xun-alert-note {
	background: var(--color-bg-elevated);
	color: #bd96fe
}

.dark .xun-alert-tip {
	background: var(--color-bg-elevated);
	color: #53c2c1
}

.dark .xun-alert-important {
	background: var(--color-bg-elevated);
	color: #fe8dc5
}

.dark .xun-alert-quote {
	color: #9e9e9e;
	background: #222
}

.dark .xun-alert-question {
	background: var(--color-bg-elevated);
	color: #96a7ff;
	color: oklch(75% .14 275)
}

.dark .xun-alert-example {
	background: var(--color-bg-elevated);
	color: #dd9f6b
}

.dark .xun-alert-update {
	background: var(--color-bg-elevated);
	color: #55aee8
}

.dark .xun-alert-deprecated {
	color: #8f8f8f;
	background: #222
}

.dark .xun-alert[style*=--alert-color] {
	background: var(--color-bg-elevated)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-alert-info {
		background: #152337
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-alert-info {
			background: color-mix(in oklch, var(--color-primary, oklch(56.5% .22 260))15%, oklch(20% 0 0))
		}
	}

	.dark .xun-alert-success {
		background: #1f301d
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-alert-success {
			background: color-mix(in oklch, var(--color-success, oklch(72% .19 142))15%, oklch(20% 0 0))
		}
	}

	.dark .xun-alert-warning {
		background: #382c13
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-alert-warning {
			background: color-mix(in oklch, var(--color-warning, oklch(79% .17 75))15%, oklch(20% 0 0))
		}
	}

	.dark .xun-alert-error,
	.dark .xun-alert-danger {
		background: #391b1c
	}

	@supports (color:color-mix(in lab, red, red)) {

		.dark .xun-alert-error,
		.dark .xun-alert-danger {
			background: color-mix(in oklch, var(--color-error, oklch(65% .23 25))15%, oklch(20% 0 0))
		}
	}

	.dark .xun-alert-note {
		background: #301d26
	}

	.dark .xun-alert-tip {
		background: #2b2028
	}

	.dark .xun-alert-important {
		background: #331f26
	}

	.dark .xun-alert-question {
		background: #2d1c25
	}

	.dark .xun-alert-example {
		background: #2b1e20
	}

	.dark .xun-alert-update {
		background: #2a1b24
	}

	.dark .xun-alert[style*=--alert-color] {
		background: var(--alert-color)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-alert[style*=--alert-color] {
			background: color-mix(in oklch, var(--alert-color)15%, oklch(20% 0 0))
		}
	}
}

.dark .xun-alert .xun-alert-content code {
	background: rgba(255, 255, 255, .1)
}

@media(max-width:768px) {
	.xun-alert {
		gap: .75rem;
		margin: 1.25rem 0;
		padding: .875rem 1rem;
		font-size: .875rem
	}

	.xun-alert-icon {
		width: 20px;
		height: 20px
	}

	.xun-alert-title {
		font-size: .9375rem
	}

	.xun-alert-lg {
		padding: 1rem 1.25rem;
		font-size: .9375rem
	}
}

.xun-timeline {
	--timeline-color: #3b82f6;
	--timeline-line-width: 2px;
	--timeline-marker-size: 12px;
	--timeline-spacing: 24px;
	padding-left: calc(var(--timeline-marker-size) + 20px);
	position: relative
}

@supports (color:oklch(60% .2 250)) {
	.xun-timeline {
		--timeline-color: oklch(60% .2 250)
	}
}

.xun-timeline:before {
	content: "";
	left: calc(var(--timeline-marker-size)/2 - var(--timeline-line-width)/2);
	width: var(--timeline-line-width);
	background: var(--timeline-color);
	opacity: .3;
	border-radius: var(--timeline-line-width);
	position: absolute;
	top: 0;
	bottom: 0
}

.xun-timeline-item {
	padding-bottom: var(--timeline-spacing);
	position: relative
}

.xun-timeline-item:last-child {
	padding-bottom: 0
}

.xun-timeline-item__marker {
	left: calc(-1*(var(--timeline-marker-size) + 20px));
	width: var(--timeline-marker-size);
	height: var(--timeline-marker-size);
	background: var(--color-bg-base);
	z-index: 1;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 4px
}

.xun-timeline-item__icon {
	font-size: calc(var(--timeline-marker-size) - 2px);
	color: var(--timeline-color);
	line-height: 1
}

.xun-timeline-item__icon--number {
	font-size: calc(var(--timeline-marker-size) - 4px);
	background: var(--timeline-color);
	color: #fff;
	width: var(--timeline-marker-size);
	height: var(--timeline-marker-size);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	display: flex
}

.xun-timeline-item__content {
	min-height: var(--timeline-marker-size)
}

.xun-timeline-item__date {
	color: var(--timeline-color);
	margin-bottom: 4px;
	font-size: .8125rem;
	font-weight: 500
}

.xun-timeline-item__title {
	color: var(--color-text-primary);
	margin-bottom: 6px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-timeline-item__text {
	color: var(--color-text-secondary);
	font-size: .9375rem;
	line-height: 1.6
}

.xun-timeline--primary {
	--timeline-color: #3b82f6
}

.xun-timeline--success {
	--timeline-color: #22c55e
}

.xun-timeline--warning {
	--timeline-color: #f59e0b
}

.xun-timeline--error {
	--timeline-color: #ef4444
}

.xun-timeline--info {
	--timeline-color: #06b6d4
}

.xun-timeline--purple {
	--timeline-color: #8b5cf6
}

.xun-timeline--pink {
	--timeline-color: #ec4899
}

.xun-timeline--gray {
	--timeline-color: #6b7280
}

@supports (color:oklch(60% .2 250)) {
	.xun-timeline--primary {
		--timeline-color: oklch(60% .2 250)
	}

	.xun-timeline--success {
		--timeline-color: oklch(65% .2 145)
	}

	.xun-timeline--warning {
		--timeline-color: oklch(75% .18 75)
	}

	.xun-timeline--error {
		--timeline-color: oklch(60% .22 25)
	}

	.xun-timeline--info {
		--timeline-color: oklch(70% .15 200)
	}

	.xun-timeline--purple {
		--timeline-color: oklch(55% .22 290)
	}

	.xun-timeline--pink {
		--timeline-color: oklch(65% .22 350)
	}

	.xun-timeline--gray {
		--timeline-color: oklch(55% .02 250)
	}
}

.xun-timeline--alternate {
	max-width: 100%;
	padding-left: 0
}

.xun-timeline--alternate:before {
	left: 50%;
	transform: translate(-50%)
}

.xun-timeline--alternate .xun-timeline-item {
	width: 50%;
	padding-right: calc(var(--timeline-marker-size) + 20px);
	text-align: right;
	padding-left: 0
}

.xun-timeline--alternate .xun-timeline-item:nth-child(2n) {
	padding-right: 0;
	padding-left: calc(var(--timeline-marker-size) + 20px);
	text-align: left;
	margin-left: 50%
}

.xun-timeline--alternate .xun-timeline-item__marker {
	left: auto;
	right: calc(-1*var(--timeline-marker-size)/2 - 1px)
}

.xun-timeline--alternate .xun-timeline-item:nth-child(2n) .xun-timeline-item__marker {
	right: auto;
	left: calc(-1*var(--timeline-marker-size)/2 - 1px)
}

@media(max-width:640px) {
	.xun-timeline--alternate {
		padding-left: calc(var(--timeline-marker-size) + 20px)
	}

	.xun-timeline--alternate:before {
		left: calc(var(--timeline-marker-size)/2 - var(--timeline-line-width)/2);
		transform: none
	}

	.xun-timeline--alternate .xun-timeline-item,
	.xun-timeline--alternate .xun-timeline-item:nth-child(2n) {
		text-align: left;
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0
	}

	.xun-timeline--alternate .xun-timeline-item__marker,
	.xun-timeline--alternate .xun-timeline-item:nth-child(2n) .xun-timeline-item__marker {
		left: calc(-1*(var(--timeline-marker-size) + 20px));
		right: auto
	}
}

.xun-timeline--compact {
	--timeline-marker-size: 10px;
	--timeline-spacing: 16px
}

.xun-timeline--compact .xun-timeline-item__date {
	font-size: .75rem
}

.xun-timeline--compact .xun-timeline-item__title {
	margin-bottom: 4px;
	font-size: .9375rem
}

.xun-timeline--compact .xun-timeline-item__text {
	font-size: .875rem
}

.xun-timeline--card .xun-timeline-item__content {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-primary);
	border-radius: 12px;
	padding: 16px;
	transition: box-shadow .2s, transform .2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

@supports (color:oklch(0% 0 0)) {
	.xun-timeline--card .xun-timeline-item__content {
		box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
	}
}

.xun-timeline--card .xun-timeline-item__content:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

@supports (color:oklch(0% 0 0)) {
	.xun-timeline--card .xun-timeline-item__content:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
	}
}

.xun-timeline--card .xun-timeline-item__content:before {
	content: "";
	border-top: 8px solid #0000;
	border-bottom: 8px solid #0000;
	border-right: 8px solid var(--color-border-primary);
	width: 0;
	height: 0;
	position: absolute;
	top: 8px;
	left: -8px
}

.xun-timeline--card .xun-timeline-item__content:after {
	content: "";
	border-top: 7px solid #0000;
	border-bottom: 7px solid #0000;
	border-right: 7px solid var(--color-bg-elevated);
	width: 0;
	height: 0;
	position: absolute;
	top: 9px;
	left: -6px
}

.xun-timeline--card .xun-timeline-item {
	position: relative
}

:root.dark .xun-timeline--primary {
	--timeline-color: #60a5fa
}

:root.dark .xun-timeline--success {
	--timeline-color: #4ade80
}

:root.dark .xun-timeline--warning {
	--timeline-color: #fbbf24
}

:root.dark .xun-timeline--error {
	--timeline-color: #f87171
}

:root.dark .xun-timeline--info {
	--timeline-color: #22d3ee
}

:root.dark .xun-timeline--purple {
	--timeline-color: #a78bfa
}

:root.dark .xun-timeline--pink {
	--timeline-color: #f472b6
}

:root.dark .xun-timeline--gray {
	--timeline-color: #9ca3af
}

:root.dark .xun-timeline-item__icon--number {
	color: #1a1a1a
}

:root.dark .xun-timeline--card .xun-timeline-item__content {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

:root.dark .xun-timeline--card .xun-timeline-item__content:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

@supports (color:oklch(60% .2 250)) {
	:root.dark .xun-timeline--primary {
		--timeline-color: oklch(70% .18 250)
	}

	:root.dark .xun-timeline--success {
		--timeline-color: oklch(72% .18 145)
	}

	:root.dark .xun-timeline--warning {
		--timeline-color: oklch(78% .16 75)
	}

	:root.dark .xun-timeline--error {
		--timeline-color: oklch(68% .2 25)
	}

	:root.dark .xun-timeline--info {
		--timeline-color: oklch(75% .14 200)
	}

	:root.dark .xun-timeline--purple {
		--timeline-color: oklch(65% .2 290)
	}

	:root.dark .xun-timeline--pink {
		--timeline-color: oklch(70% .2 350)
	}

	:root.dark .xun-timeline--gray {
		--timeline-color: oklch(65% .02 250)
	}

	:root.dark .xun-timeline-item__icon--number {
		color: #0b0b0b
	}

	:root.dark .xun-timeline--card .xun-timeline-item__content {
		box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
	}

	:root.dark .xun-timeline--card .xun-timeline-item__content:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
	}
}

.xun-timeline-item {
	opacity: 0;
	animation: .5s forwards timeline-fade-in
}

.xun-timeline-item:first-child {
	animation-delay: .1s
}

.xun-timeline-item:nth-child(2) {
	animation-delay: .2s
}

.xun-timeline-item:nth-child(3) {
	animation-delay: .3s
}

.xun-timeline-item:nth-child(4) {
	animation-delay: .4s
}

.xun-timeline-item:nth-child(5) {
	animation-delay: .5s
}

.xun-timeline-item:nth-child(6) {
	animation-delay: .6s
}

.xun-timeline-item:nth-child(7) {
	animation-delay: .7s
}

.xun-timeline-item:nth-child(8) {
	animation-delay: .8s
}

.xun-timeline-item:nth-child(9) {
	animation-delay: .9s
}

.xun-timeline-item:nth-child(10) {
	animation-delay: 1s
}

@keyframes timeline-fade-in {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@media(prefers-reduced-motion:reduce) {
	.xun-timeline-item {
		opacity: 1;
		animation: none
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-timeline--primary {
		--timeline-color: #60a5fa
	}

	:root:not(.light) .xun-timeline--success {
		--timeline-color: #4ade80
	}

	:root:not(.light) .xun-timeline--warning {
		--timeline-color: #fbbf24
	}

	:root:not(.light) .xun-timeline--error {
		--timeline-color: #f87171
	}

	:root:not(.light) .xun-timeline--info {
		--timeline-color: #22d3ee
	}

	:root:not(.light) .xun-timeline--purple {
		--timeline-color: #a78bfa
	}

	:root:not(.light) .xun-timeline--pink {
		--timeline-color: #f472b6
	}

	:root:not(.light) .xun-timeline--gray {
		--timeline-color: #9ca3af
	}

	:root:not(.light) .xun-timeline-item__icon--number {
		color: #1a1a1a
	}

	:root:not(.light) .xun-timeline--card .xun-timeline-item__content {
		box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
	}

	:root:not(.light) .xun-timeline--card .xun-timeline-item__content:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
	}

	@supports (color:oklch(60% .2 250)) {
		:root:not(.light) .xun-timeline--primary {
			--timeline-color: oklch(70% .18 250)
		}

		:root:not(.light) .xun-timeline--success {
			--timeline-color: oklch(72% .18 145)
		}

		:root:not(.light) .xun-timeline--warning {
			--timeline-color: oklch(78% .16 75)
		}

		:root:not(.light) .xun-timeline--error {
			--timeline-color: oklch(68% .2 25)
		}

		:root:not(.light) .xun-timeline--info {
			--timeline-color: oklch(75% .14 200)
		}

		:root:not(.light) .xun-timeline--purple {
			--timeline-color: oklch(65% .2 290)
		}

		:root:not(.light) .xun-timeline--pink {
			--timeline-color: oklch(70% .2 350)
		}

		:root:not(.light) .xun-timeline--gray {
			--timeline-color: oklch(65% .02 250)
		}

		:root:not(.light) .xun-timeline-item__icon--number {
			color: #0b0b0b
		}

		:root:not(.light) .xun-timeline--card .xun-timeline-item__content {
			box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
		}

		:root:not(.light) .xun-timeline--card .xun-timeline-item__content:hover {
			box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
		}
	}
}

.xun-audio-player {
	background: linear-gradient(135deg, var(--color-fill-quaternary)0%, var(--color-fill-tertiary)100%);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 12px);
	box-sizing: border-box;
	flex-direction: column;
	gap: .5rem;
	max-width: 100%;
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	display: flex;
	position: relative;
	overflow: visible
}

.xun-audio-player:before {
	content: "";
	background: radial-gradient(circle, var(--xun-primary, var(--color-primary))0%, transparent 70%);
	opacity: .05;
	pointer-events: none;
	width: 120px;
	height: 120px;
	position: absolute;
	top: -30%;
	right: 5%
}

@media(max-width:480px) {
	.xun-audio-player:before {
		display: none
	}
}

.xun-audio-header {
	justify-content: center;
	align-items: center;
	gap: .75rem;
	padding-bottom: .5rem;
	display: flex
}

.xun-audio-cover {
	object-fit: cover;
	background: var(--color-fill-secondary);
	border-radius: 6px;
	flex-shrink: 0;
	width: 40px;
	height: 40px
}

.xun-audio-meta {
	text-align: center
}

.xun-audio-title {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden
}

.xun-audio-artist {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: .75rem;
	overflow: hidden
}

.xun-audio-player-main {
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-audio-play-btn {
	background: linear-gradient(135deg, var(--xun-primary, var(--color-primary))0%, var(--color-primary-hover)100%);
	color: #fff;
	cursor: pointer;
	width: 48px;
	height: 48px;
	box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 59, 130, 246), .3);
	border: none;
	border-radius: 50%;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	display: flex;
	position: relative
}

.xun-audio-play-btn:hover {
	box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 59, 130, 246), .4);
	transform: scale(1.05)
}

.xun-audio-play-btn:active {
	transform: scale(.98)
}

.xun-audio-play-btn svg {
	width: 20px;
	height: 20px;
	transition: transform .2s
}

.xun-audio-play-btn .xun-audio-icon-pause,
.xun-audio-player.is-playing .xun-audio-play-btn .xun-audio-icon-play {
	display: none
}

.xun-audio-player.is-playing .xun-audio-play-btn .xun-audio-icon-pause {
	display: block
}

.xun-audio-player.is-loading .xun-audio-play-btn {
	pointer-events: none
}

.xun-audio-play-btn .xun-audio-icon-loading {
	animation: 1s linear infinite xun-audio-spin;
	display: none
}

.xun-audio-player.is-loading .xun-audio-play-btn .xun-audio-icon-play,
.xun-audio-player.is-loading .xun-audio-play-btn .xun-audio-icon-pause {
	display: none
}

.xun-audio-player.is-loading .xun-audio-play-btn .xun-audio-icon-loading {
	display: block
}

@keyframes xun-audio-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-audio-progress-wrapper {
	flex-direction: column;
	flex: 1;
	gap: .25rem;
	min-width: 0;
	display: flex
}

.xun-audio-waveform {
	cursor: pointer;
	border-radius: 4px;
	align-items: center;
	gap: 1px;
	height: 48px;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-audio-waveform-bar {
	flex: 1;
	justify-content: center;
	align-items: center;
	height: 100%;
	display: flex
}

.xun-audio-waveform-bar span {
	background: var(--color-border);
	border-radius: 1px;
	width: 100%;
	max-width: 2px;
	min-height: 3px;
	transition: background .15s
}

.xun-audio-waveform-bar.is-played span,
.xun-audio-waveform-bar.is-current span {
	background: var(--xun-primary, var(--color-primary))
}

.xun-audio-waveform.is-loading {
	position: relative
}

.xun-audio-waveform-loading {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-secondary);
	box-shadow: var(--shadow-sm);
	z-index: 5;
	border-radius: 6px;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-audio-waveform-loading span {
	color: var(--color-text-secondary);
	white-space: nowrap;
	font-size: .75rem;
	background: 0 0 !important;
	border-radius: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: auto !important
}

.xun-audio-waveform-loading:before {
	content: "";
	border: 2px solid var(--color-border);
	border-top-color: var(--xun-primary, var(--color-primary));
	border-radius: 50%;
	width: 14px;
	height: 14px;
	animation: .8s linear infinite xun-audio-spin
}

.xun-audio-progress {
	background: var(--color-fill-secondary);
	cursor: pointer;
	border-radius: 3px;
	height: 6px;
	position: relative;
	overflow: hidden
}

.xun-audio-progress-bar {
	background: linear-gradient(90deg, var(--xun-primary, var(--color-primary))0%, var(--color-primary-hover)100%);
	border-radius: 3px;
	height: 100%;
	transition: width .1s linear;
	position: absolute;
	top: 0;
	left: 0
}

.xun-audio-progress-handle {
	border: 2px solid var(--xun-primary, var(--color-primary));
	pointer-events: none;
	background: #fff;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	transition: transform .2s;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%)scale(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

.xun-audio-progress:hover .xun-audio-progress-handle,
.xun-audio-progress.is-dragging .xun-audio-progress-handle {
	transform: translate(-50%, -50%)scale(1)
}

.xun-audio-progress-buffer {
	background: var(--color-fill-tertiary);
	pointer-events: none;
	border-radius: 3px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-audio-time {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-tertiary);
	justify-content: space-between;
	font-size: .75rem;
	display: flex
}

.xun-audio-time-current {
	color: var(--color-text-secondary)
}

.xun-audio-controls {
	align-items: flex-start;
	gap: .75rem;
	padding-top: .5rem;
	display: flex
}

.xun-audio-volume {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-audio-volume-btn {
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	transition: all .2s;
	display: flex
}

.xun-audio-volume-btn:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text)
}

.xun-audio-volume-btn svg {
	width: 18px;
	height: 18px
}

.xun-audio-volume-btn .xun-audio-icon-volume-muted,
.xun-audio-player.is-muted .xun-audio-volume-btn .xun-audio-icon-volume {
	display: none
}

.xun-audio-player.is-muted .xun-audio-volume-btn .xun-audio-icon-volume-muted {
	display: block
}

.xun-audio-volume-slider {
	background: var(--color-fill-secondary);
	cursor: pointer;
	border-radius: 2px;
	width: 80px;
	height: 4px;
	position: relative;
	overflow: hidden
}

.xun-audio-volume-level {
	background: var(--xun-primary, var(--color-primary));
	border-radius: 2px;
	height: 100%;
	transition: width .1s;
	position: absolute;
	top: 0;
	left: 0
}

.xun-audio-speed {
	z-index: 10;
	position: relative
}

.xun-audio-speed-btn {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border-secondary);
	min-width: 40px;
	height: 28px;
	color: var(--color-text-secondary);
	cursor: pointer;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	padding: 0 .5rem;
	font-size: .75rem;
	font-weight: 500;
	transition: all .2s;
	display: flex
}

.xun-audio-speed-btn:hover {
	background: var(--color-fill-secondary);
	border-color: var(--xun-primary, var(--color-primary));
	color: var(--xun-primary, var(--color-primary))
}

.xun-audio-speed-menu {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-secondary);
	min-width: 60px;
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	z-index: 100;
	border-radius: 8px;
	flex-direction: column;
	padding: .375rem;
	transition: all .2s;
	display: flex;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%)scale(.95)
}

.xun-audio-speed-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%)scale(1)
}

.xun-audio-speed-option {
	color: var(--color-text-secondary);
	cursor: pointer;
	text-align: center;
	background: 0 0;
	border: none;
	border-radius: 4px;
	padding: .375rem .5rem;
	font-size: .75rem;
	transition: all .15s
}

.xun-audio-speed-option:hover {
	background: var(--color-fill-secondary);
	color: var(--color-text)
}

.xun-audio-speed-option.is-active {
	background: var(--color-primary-bg);
	color: var(--xun-primary, var(--color-primary));
	font-weight: 500
}

.xun-audio-download {
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	transition: all .2s;
	display: flex
}

.xun-audio-download:hover {
	background: var(--color-fill-secondary);
	color: var(--xun-primary, var(--color-primary))
}

.xun-audio-download svg {
	width: 18px;
	height: 18px
}

.xun-audio-player.is-error .xun-audio-play-btn {
	background: var(--color-error);
	box-shadow: 0 4px 12px rgba(239, 68, 68, .3)
}

.xun-audio-error {
	background: var(--color-error-bg);
	color: var(--color-error);
	border-radius: 6px;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	font-size: .8125rem;
	display: none
}

.xun-audio-player.is-error .xun-audio-error {
	display: flex
}

.xun-audio-error svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px
}

.xun-audio-player.xun-audio-mini {
	padding: .75rem 1rem
}

.xun-audio-player.xun-audio-mini .xun-audio-play-btn {
	width: 36px;
	height: 36px
}

.xun-audio-player.xun-audio-mini .xun-audio-play-btn svg {
	width: 16px;
	height: 16px
}

.xun-audio-player.xun-audio-mini .xun-audio-waveform {
	height: 36px
}

.xun-audio-player.xun-audio-mini .xun-audio-controls {
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-audio-player {
		background: linear-gradient(135deg, var(--color-fill-secondary)0%, var(--color-fill-tertiary)100%)
	}

	:root:not(.light) .xun-audio-player:before {
		opacity: .08
	}

	:root:not(.light) .xun-audio-progress-handle,
	:root:not(.light) .xun-audio-speed-menu {
		background: var(--color-bg-container)
	}
}

.dark .xun-audio-player {
	background: linear-gradient(135deg, var(--color-fill-secondary)0%, var(--color-fill-tertiary)100%)
}

.dark .xun-audio-player:before {
	opacity: .08
}

.dark .xun-audio-progress-handle,
.dark .xun-audio-speed-menu {
	background: var(--color-bg-container)
}

@media(max-width:768px) {
	.xun-audio-player {
		padding: .875rem 1rem
	}

	.xun-audio-player-main {
		gap: .75rem
	}

	.xun-audio-play-btn {
		width: 42px;
		height: 42px
	}

	.xun-audio-waveform {
		height: 40px
	}

	.xun-audio-waveform-bar span {
		max-width: 3px
	}

	.xun-audio-controls {
		gap: .5rem;
		padding-top: .25rem
	}

	.xun-audio-volume-slider {
		width: 60px
	}

	.xun-audio-header {
		flex-wrap: wrap
	}
}

@media(max-width:480px) {
	.xun-audio-player {
		padding: .75rem
	}

	.xun-audio-player-main {
		flex-wrap: wrap;
		gap: .5rem
	}

	.xun-audio-play-btn {
		width: 40px;
		height: 40px
	}

	.xun-audio-play-btn svg {
		width: 18px;
		height: 18px
	}

	.xun-audio-waveform {
		height: 36px
	}

	.xun-audio-waveform-bar span {
		max-width: 4px
	}

	.xun-audio-progress-wrapper {
		order: 2;
		width: 100%
	}

	.xun-audio-controls {
		order: 1;
		width: auto;
		padding-top: 0
	}

	.xun-audio-volume-slider,
	.xun-audio-speed {
		display: none
	}

	.xun-audio-time {
		font-size: .6875rem
	}

	.xun-audio-title {
		font-size: .8125rem
	}
}

@media(max-width:360px) {
	.xun-audio-player {
		padding: .625rem
	}

	.xun-audio-play-btn {
		width: 36px;
		height: 36px
	}

	.xun-audio-waveform {
		height: 32px
	}

	.xun-audio-volume {
		display: none
	}
}

@keyframes xun-audio-pulse {

	0%,
	to {
		transform: scale(1)
	}

	50% {
		transform: scale(1.05)
	}
}

.xun-audio-player.is-playing .xun-audio-play-btn {
	animation: 2s ease-in-out infinite xun-audio-pulse
}

.xun-video-player {
	border-radius: var(--xun-radius, 12px);
	box-sizing: border-box;
	aspect-ratio: 16/9;
	background: #000;
	flex-direction: column;
	max-width: 100%;
	margin: 1.25rem 0;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-video-player video {
	object-fit: contain;
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-poster {
	object-fit: cover;
	z-index: 2;
	width: 100%;
	height: 100%;
	transition: opacity .3s;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-player.is-playing .xun-video-poster,
.xun-video-player.has-started .xun-video-poster {
	opacity: 0;
	pointer-events: none
}

.xun-video-play-overlay {
	z-index: 5;
	cursor: pointer;
	background: rgba(0, 0, 0, .2);
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	transition: background .3s;
	display: flex;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-player.is-playing .xun-video-play-overlay {
	opacity: 0;
	pointer-events: none
}

.xun-video-player:hover .xun-video-play-overlay {
	background: rgba(0, 0, 0, .3)
}

.xun-video-play-large {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	cursor: pointer;
	background: rgba(0, 0, 0, .5);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 72px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	display: flex
}

.xun-video-play-large:hover {
	background: rgba(0, 0, 0, .7);
	transform: scale(1.1)
}

.xun-video-play-large:active {
	transform: scale(.95)
}

.xun-video-play-large svg {
	width: 32px;
	height: 32px;
	margin-left: 4px
}

.xun-video-controls {
	z-index: 10;
	opacity: 0;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .8));
	flex-direction: column;
	padding: 0;
	transition: all .3s;
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(10px)
}

.xun-video-player:hover .xun-video-controls,
.xun-video-player.show-controls .xun-video-controls {
	opacity: 1;
	transform: translateY(0)
}

.xun-video-progress-wrapper {
	cursor: pointer;
	padding: .75rem 1rem .5rem;
	position: relative
}

.xun-video-progress {
	background: rgba(255, 255, 255, .3);
	border-radius: 2px;
	height: 4px;
	transition: height .15s;
	position: relative;
	overflow: visible
}

.xun-video-progress-wrapper:hover .xun-video-progress {
	height: 6px
}

.xun-video-progress-buffer {
	pointer-events: none;
	background: rgba(255, 255, 255, .4);
	border-radius: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-progress-bar {
	background: var(--xun-primary, var(--color-primary));
	border-radius: 2px;
	height: 100%;
	transition: width .1s linear;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-progress-handle {
	pointer-events: none;
	background: #fff;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	transition: transform .15s;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%)scale(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.xun-video-progress-wrapper:hover .xun-video-progress-handle,
.xun-video-progress.is-dragging .xun-video-progress-handle {
	transform: translate(-50%, -50%)scale(1)
}

.xun-video-progress-tooltip {
	font-variant-numeric: tabular-nums;
	color: #fff;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: rgba(0, 0, 0, .85);
	border-radius: 4px;
	padding: .25rem .5rem;
	font-size: .75rem;
	transition: all .15s;
	position: absolute;
	bottom: calc(100% + 8px);
	transform: translate(-50%)
}

.xun-video-progress-wrapper:hover .xun-video-progress-tooltip {
	opacity: 1;
	visibility: visible
}

.xun-video-controls-bar {
	align-items: center;
	gap: .25rem;
	padding: .5rem .75rem .75rem;
	display: flex
}

.xun-video-controls-left {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-video-controls-right {
	align-items: center;
	gap: .25rem;
	margin-left: auto;
	display: flex
}

.xun-video-btn {
	color: #fff;
	cursor: pointer;
	opacity: .9;
	background: 0 0;
	border: none;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	transition: all .2s;
	display: flex
}

.xun-video-btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .15)
}

.xun-video-btn:active {
	transform: scale(.95)
}

.xun-video-btn svg {
	width: 20px;
	height: 20px
}

.xun-video-play-btn .xun-video-icon-pause,
.xun-video-player.is-playing .xun-video-play-btn .xun-video-icon-play {
	display: none
}

.xun-video-player.is-playing .xun-video-play-btn .xun-video-icon-pause {
	display: block
}

.xun-video-time {
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
	align-items: center;
	gap: .25rem;
	padding: 0 .5rem;
	font-size: .8125rem;
	display: flex
}

.xun-video-time-separator {
	opacity: .6
}

.xun-video-volume {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-video-volume-btn .xun-video-icon-volume-muted,
.xun-video-volume-btn .xun-video-icon-volume-low,
.xun-video-player.is-muted .xun-video-volume-btn .xun-video-icon-volume {
	display: none
}

.xun-video-player.is-muted .xun-video-volume-btn .xun-video-icon-volume-muted {
	display: block
}

.xun-video-player.is-low-volume .xun-video-volume-btn .xun-video-icon-volume {
	display: none
}

.xun-video-player.is-low-volume .xun-video-volume-btn .xun-video-icon-volume-low {
	display: block
}

.xun-video-volume-slider {
	cursor: pointer;
	opacity: 0;
	background: rgba(255, 255, 255, .3);
	border-radius: 2px;
	width: 0;
	height: 4px;
	transition: all .2s;
	position: relative;
	overflow: hidden
}

.xun-video-volume:hover .xun-video-volume-slider {
	opacity: 1;
	width: 60px
}

.xun-video-volume-level {
	background: #fff;
	border-radius: 2px;
	height: 100%;
	transition: width .1s;
	position: absolute;
	top: 0;
	left: 0
}

.xun-video-speed {
	position: relative
}

.xun-video-speed-btn {
	color: rgba(255, 255, 255, .9);
	cursor: pointer;
	background: rgba(255, 255, 255, .1);
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 28px;
	padding: 0 .5rem;
	font-size: .75rem;
	font-weight: 500;
	transition: all .2s;
	display: flex
}

.xun-video-speed-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .2)
}

.xun-video-speed-menu {
	opacity: 0;
	visibility: hidden;
	z-index: 20;
	background: rgba(28, 28, 28, .95);
	border: 1px solid #ffffff1a;
	border-radius: 8px;
	flex-direction: column;
	min-width: 60px;
	padding: .375rem;
	transition: all .2s;
	display: flex;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%)scale(.95);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .4)
}

.xun-video-speed-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%)scale(1)
}

.xun-video-speed-option {
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	text-align: center;
	background: 0 0;
	border: none;
	border-radius: 4px;
	padding: .375rem .5rem;
	font-size: .75rem;
	transition: all .15s
}

.xun-video-speed-option:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1)
}

.xun-video-speed-option.is-active {
	background: var(--xun-primary, var(--color-primary));
	color: #fff;
	font-weight: 500
}

.xun-video-pip-btn {
	display: none
}

@supports (picture-in-picture:auto) {
	.xun-video-pip-btn {
		display: flex
	}
}

.xun-video-fullscreen-btn .xun-video-icon-exit-fullscreen,
.xun-video-player.is-fullscreen .xun-video-fullscreen-btn .xun-video-icon-fullscreen {
	display: none
}

.xun-video-player.is-fullscreen .xun-video-fullscreen-btn .xun-video-icon-exit-fullscreen {
	display: block
}

.xun-video-player.is-fullscreen {
	z-index: 9999;
	aspect-ratio: auto;
	border-radius: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0
}

.xun-video-player.is-fullscreen video {
	object-fit: contain
}

.xun-video-loading {
	z-index: 6;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-video-player.is-loading .xun-video-loading {
	display: block
}

.xun-video-player.is-loading .xun-video-play-overlay {
	display: none
}

.xun-video-loading-spinner {
	border: 3px solid #ffffff4d;
	border-top-color: #fff;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	animation: .8s linear infinite xun-video-spin
}

@keyframes xun-video-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-video-error {
	text-align: center;
	z-index: 6;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 1.5rem;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.xun-video-player.is-error .xun-video-error {
	display: flex
}

.xun-video-player.is-error .xun-video-play-overlay {
	display: none
}

.xun-video-error-icon {
	color: rgba(255, 255, 255, .6);
	width: 48px;
	height: 48px
}

.xun-video-error-text {
	color: rgba(255, 255, 255, .8);
	font-size: .875rem
}

.xun-video-error-retry {
	color: #fff;
	cursor: pointer;
	background: rgba(255, 255, 255, .15);
	border: 1px solid #fff3;
	border-radius: 6px;
	padding: .5rem 1rem;
	font-size: .8125rem;
	transition: all .2s
}

.xun-video-error-retry:hover {
	background: rgba(255, 255, 255, .25)
}

.xun-video-title {
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: 8;
	opacity: 0;
	background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
	padding: 1rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: all .3s;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	transform: translateY(-10px)
}

.xun-video-player:hover .xun-video-title,
.xun-video-player.show-controls .xun-video-title {
	opacity: 1;
	transform: translateY(0)
}

.xun-video-seek-indicator {
	opacity: 0;
	visibility: hidden;
	z-index: 15;
	background: rgba(0, 0, 0, .7);
	border-radius: 8px;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .75rem 1rem;
	transition: all .2s;
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.xun-video-seek-indicator.is-visible {
	opacity: 1;
	visibility: visible
}

.xun-video-seek-indicator.seek-backward {
	left: 15%
}

.xun-video-seek-indicator.seek-forward {
	right: 15%
}

.xun-video-seek-indicator svg {
	color: #fff;
	width: 24px;
	height: 24px
}

.xun-video-seek-indicator span {
	color: #fff;
	font-size: .75rem
}

@media(max-width:768px) {
	.xun-video-play-large {
		width: 60px;
		height: 60px
	}

	.xun-video-play-large svg {
		width: 28px;
		height: 28px
	}

	.xun-video-controls-bar {
		padding: .375rem .5rem .5rem
	}

	.xun-video-btn {
		width: 32px;
		height: 32px
	}

	.xun-video-btn svg {
		width: 18px;
		height: 18px
	}

	.xun-video-time {
		padding: 0 .25rem;
		font-size: .75rem
	}

	.xun-video-volume-slider,
	.xun-video-speed {
		display: none
	}

	.xun-video-progress-wrapper {
		padding: .5rem .75rem .375rem
	}
}

@media(max-width:480px) {
	.xun-video-play-large {
		width: 52px;
		height: 52px
	}

	.xun-video-play-large svg {
		width: 24px;
		height: 24px;
		margin-left: 3px
	}

	.xun-video-controls-bar {
		gap: 0;
		padding: .25rem .375rem .375rem
	}

	.xun-video-btn {
		width: 28px;
		height: 28px
	}

	.xun-video-btn svg {
		width: 16px;
		height: 16px
	}

	.xun-video-time {
		font-size: .6875rem
	}

	.xun-video-pip-btn {
		display: none
	}

	.xun-video-title {
		padding: .75rem;
		font-size: .8125rem
	}
}

@media(hover:none)and (pointer:coarse) {

	.xun-video-controls,
	.xun-video-title {
		opacity: 1;
		transform: translateY(0)
	}

	.xun-video-progress {
		height: 6px
	}

	.xun-video-progress-handle {
		width: 16px;
		height: 16px;
		transform: translate(-50%, -50%)scale(1)
	}
}

.xun-video-btn:focus-visible,
.xun-video-speed-btn:focus-visible,
.xun-video-speed-option:focus-visible {
	outline: 2px solid var(--xun-primary, var(--color-primary));
	outline-offset: 2px
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-video-player {
		border: 1px solid #ffffff1a
	}
}

.dark .xun-video-player {
	border: 1px solid #ffffff1a
}

.xun-cover-preview {
	z-index: 10;
	pointer-events: none;
	opacity: 1;
	justify-content: center;
	align-items: center;
	transition: opacity .3s;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-cover-preview-icon {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	pointer-events: auto;
	cursor: pointer;
	z-index: 2;
	background: rgba(0, 0, 0, .5);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	transition: all .3s;
	display: flex;
	position: absolute
}

.xun-cover-preview-icon svg {
	width: 22px;
	height: 22px;
	transition: transform .2s
}

.xun-cover-preview-icon:hover {
	background: rgba(0, 0, 0, .7);
	transform: scale(1.1)
}

.xun-cover-preview-icon:hover svg {
	transform: scale(1.1)
}

.xun-cover-audio-preview .xun-cover-preview-icon {
	background: rgba(0, 0, 0, .5)
}

.xun-cover-audio-preview .xun-cover-preview-icon:hover {
	background: rgba(0, 0, 0, .7)
}

.xun-cover-video-preview .xun-cover-preview-icon {
	background: rgba(0, 0, 0, .5)
}

.xun-cover-video-preview .xun-cover-preview-icon:hover {
	background: rgba(0, 0, 0, .7)
}

.xun-cover-preview-player {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	background: rgba(0, 0, 0, .7);
	justify-content: center;
	align-items: center;
	transition: all .3s;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-cover-preview.is-playing .xun-cover-preview-player {
	opacity: 1;
	visibility: visible
}

.xun-cover-preview.is-playing .xun-cover-preview-icon {
	opacity: 0;
	visibility: hidden
}

.xun-cover-audio-wave {
	justify-content: center;
	align-items: center;
	gap: 4px;
	height: 40px;
	display: flex
}

.xun-cover-audio-wave span {
	background: var(--xun-primary, #3b82f6);
	border-radius: 2px;
	width: 4px;
	height: 100%;
	animation: 1s ease-in-out infinite xun-audio-wave;
	display: block
}

.xun-cover-audio-wave span:first-child {
	height: 60%;
	animation-delay: 0s
}

.xun-cover-audio-wave span:nth-child(2) {
	height: 80%;
	animation-delay: .1s
}

.xun-cover-audio-wave span:nth-child(3) {
	height: 100%;
	animation-delay: .2s
}

.xun-cover-audio-wave span:nth-child(4) {
	height: 70%;
	animation-delay: .3s
}

.xun-cover-audio-wave span:nth-child(5) {
	height: 50%;
	animation-delay: .4s
}

@keyframes xun-audio-wave {

	0%,
	to {
		transform: scaleY(.5)
	}

	50% {
		transform: scaleY(1)
	}
}

.xun-cover-video-preview .xun-cover-preview-player video {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-cover-preview.is-loading .xun-cover-preview-icon:after {
	content: "";
	border: 2px solid #0000;
	border-top-color: #fff;
	border-radius: 50%;
	animation: .8s linear infinite xun-spin;
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px
}

@keyframes xun-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-cover-preview.is-playing .xun-cover-preview-icon svg {
	display: none
}

.xun-cover-preview.is-playing .xun-cover-preview-icon:before {
	content: "";
	background: #fff;
	width: 16px;
	height: 16px;
	display: flex;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 4h4v16H6V4zm8 0h4v16h-4V4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 4h4v16H6V4zm8 0h4v16h-4V4z'/%3E%3C/svg%3E");
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat
}

@media(max-width:768px) {
	.xun-cover-preview-icon {
		width: 40px;
		height: 40px
	}

	.xun-cover-preview-icon svg {
		width: 18px;
		height: 18px
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-cover-preview-icon {
		background: rgba(0, 0, 0, .6)
	}

	:root:not(.light) .xun-cover-preview-icon:hover {
		background: rgba(0, 0, 0, .8)
	}

	:root:not(.light) .xun-cover-preview-player {
		background: rgba(0, 0, 0, .85)
	}
}

.dark .xun-cover-preview-icon {
	background: rgba(0, 0, 0, .6)
}

.dark .xun-cover-preview-icon:hover {
	background: rgba(0, 0, 0, .8)
}

.dark .xun-cover-preview-player {
	background: rgba(0, 0, 0, .85)
}

.xun-posts-cards .xun-cover-preview-icon,
.xun-posts-image .xun-cover-preview-icon {
	width: 44px;
	height: 44px
}

.xun-posts-cards .xun-cover-preview-icon svg,
.xun-posts-image .xun-cover-preview-icon svg {
	width: 18px;
	height: 18px
}

.xun-posts-list .xun-cover-preview-icon {
	width: 36px;
	height: 36px
}

.xun-posts-list .xun-cover-preview-icon svg {
	width: 16px;
	height: 16px
}

.xun-posts-waterfall .xun-cover-preview-icon {
	width: 48px;
	height: 48px
}

.xun-cover-preview.is-disabled {
	display: none
}

.xun-paid-reading {
	margin: 1.5rem 0 1rem;
	position: relative
}

.xun-paid-reading+p {
	margin-top: 0
}

.xun-paid-reading-header {
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-paid-reading-header:before,
.xun-paid-reading-header:after {
	content: "";
	background: var(--xun-border-color);
	flex: 1;
	height: 1px
}

.xun-paid-reading-title {
	color: var(--xun-text-secondary);
	white-space: nowrap;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.5
}

.xun-paid-reading-badge {
	border-radius: var(--xun-radius-full);
	color: #d97706;
	white-space: nowrap;
	background: rgba(245, 158, 11, .15);
	justify-content: center;
	align-items: center;
	padding: .125rem .5rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.5;
	display: inline-flex
}

.xun-paid-reading-badge-paid {
	color: #dc2626;
	background: rgba(239, 68, 68, .15)
}

.xun-paid-reading-badge-vip_free,
.xun-paid-reading-badge-vip_only,
.xun-paid-reading-badge-vip_exclusive,
.xun-paid-reading-badge-vip_exclusive_only {
	color: #d97706;
	background: rgba(245, 158, 11, .15)
}

.xun-paid-reading-badge-permanent {
	color: #7c3aed;
	background: rgba(139, 92, 246, .15)
}

.xun-paid-reading-badge-vip_discount {
	color: #059669;
	background: rgba(16, 185, 129, .15)
}

.xun-paid-reading-content {
	position: relative
}

.xun-paid-reading-preview {
	margin-bottom: 0;
	line-height: 1.8
}

.xun-paid-reading-preview p {
	color: inherit;
	margin: 0 0 1em
}

.xun-paid-reading-preview p:last-child {
	margin-bottom: 0
}

.xun-paid-reading-loading {
	color: var(--xun-text-secondary);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	padding: 2rem 1rem;
	display: flex
}

.xun-paid-reading-spinner {
	border: 2px solid var(--xun-border-color);
	border-top-color: var(--xun-primary);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: .8s linear infinite xun-spin
}

.xun-paid-reading-body {
	background: rgba(var(--xun-primary-rgb, 99, 102, 241), .02);
	border-radius: var(--xun-radius-lg);
	border: 2px dashed rgba(var(--xun-primary-rgb, 99, 102, 241), .3);
	padding: 1rem 1.25rem;
	line-height: 1.8
}

.xun-paid-reading-body p {
	color: inherit
}

.xun-paid-reading-body p:first-child {
	margin-top: 0
}

.xun-paid-reading-body p:last-child {
	margin-bottom: 0
}

.xun-paid-reading-locked {
	border-radius: var(--xun-radius-lg);
	background: rgba(239, 68, 68, .02);
	border: 2px dashed #ef44444d;
	min-height: 200px;
	position: relative;
	overflow: hidden
}

.xun-paid-reading-mask {
	max-height: 120px;
	padding: 1.5rem;
	position: relative;
	overflow: hidden
}

.xun-paid-reading-mask:after {
	content: "";
	background: linear-gradient(to bottom, transparent 0%, var(--xun-bg-secondary)100%);
	pointer-events: none;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-paid-reading-blur-text {
	color: var(--xun-text-tertiary);
	filter: blur(4px);
	-webkit-user-select: none;
	user-select: none;
	word-break: break-all;
	font-size: .875rem;
	line-height: 2
}

.xun-paid-reading-overlay {
	-webkit-backdrop-filter: blur(12px)saturate(180%);
	background-color: rgba(247, 247, 247, .59);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-paid-reading-lock-icon {
	color: var(--xun-text-tertiary);
	justify-content: center;
	align-items: center;
	display: flex
}

.xun-paid-reading-lock-icon svg {
	width: 32px;
	height: 32px
}

.xun-paid-reading-actions {
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 320px;
	display: flex
}

.xun-paid-reading-notice {
	color: var(--xun-text-secondary);
	text-align: center;
	margin: 0;
	font-size: .875rem;
	text-decoration: none
}

.xun-paid-reading-actions>.xun-paid-reading-badge {
	margin-bottom: 1rem
}

.xun-paid-reading-btns a.btn {
	text-decoration: none
}

.xun-paid-reading-btns a.btn-primary {
	color: #fff
}

.xun-paid-reading-btns a.btn-ghost {
	text-decoration: none
}

.xun-paid-reading-price {
	align-items: baseline;
	gap: .5rem;
	display: flex
}

.xun-paid-reading-price-original {
	color: var(--xun-text-tertiary);
	font-size: .875rem;
	text-decoration: line-through
}

.xun-paid-reading-price-current {
	color: var(--xun-danger);
	font-size: 1.5rem;
	font-weight: 700
}

.xun-paid-reading-discount {
	background: var(--xun-danger);
	color: #fff;
	border-radius: var(--xun-radius-sm);
	align-items: center;
	padding: .125rem .375rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-paid-reading-btns {
	flex-direction: column;
	gap: .75rem;
	width: 100%;
	display: flex
}

.xun-paid-reading .btn {
	font-family: var(--font-sans);
	line-height: 1.5
}

.xun-paid-reading-btn-full {
	justify-content: center;
	width: 100%
}

.js-xun-purchase-paid,
.js-xun-purchase-access-points {
	justify-content: center;
	align-items: center;
	gap: .5rem;
	display: inline-flex;
	position: relative
}

.js-xun-purchase-paid .xun-paid-reading-btn-spinner,
.js-xun-purchase-access-points .xun-paid-reading-btn-spinner {
	flex-shrink: 0;
	display: none
}

.js-xun-purchase-paid .xun-paid-reading-btn-loading,
.js-xun-purchase-access-points .xun-paid-reading-btn-loading {
	display: none
}

.js-xun-purchase-paid.is-loading,
.js-xun-purchase-access-points.is-loading {
	pointer-events: none;
	opacity: .8
}

.js-xun-purchase-paid.is-loading .xun-paid-reading-btn-spinner,
.js-xun-purchase-access-points.is-loading .xun-paid-reading-btn-spinner {
	display: inline-flex
}

.js-xun-purchase-paid.is-loading .xun-paid-reading-btn-text,
.js-xun-purchase-access-points.is-loading .xun-paid-reading-btn-text {
	display: none
}

.js-xun-purchase-paid.is-loading .xun-paid-reading-btn-loading,
.js-xun-purchase-access-points.is-loading .xun-paid-reading-btn-loading {
	display: inline
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-paid-reading-body {
		background: rgba(var(--xun-primary-rgb, 99, 102, 241), .05);
		border-color: rgba(var(--xun-primary-rgb, 99, 102, 241), .4)
	}

	:root:not(.light) .xun-paid-reading-locked {
		background: rgba(239, 68, 68, .05);
		border-color: rgba(239, 68, 68, .4)
	}

	:root:not(.light) .xun-paid-reading-mask:after {
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(30, 30, 30, .95))
	}

	:root:not(.light) .xun-paid-reading-overlay {
		background-color: rgba(30, 30, 30, .59)
	}
}

.dark .xun-paid-reading-body {
	background: rgba(var(--xun-primary-rgb, 99, 102, 241), .05);
	border-color: rgba(var(--xun-primary-rgb, 99, 102, 241), .4)
}

.dark .xun-paid-reading-locked {
	background: rgba(239, 68, 68, .05);
	border-color: rgba(239, 68, 68, .4)
}

.dark .xun-paid-reading-mask:after {
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(30, 30, 30, .95))
}

.dark .xun-paid-reading-overlay {
	background-color: rgba(30, 30, 30, .59)
}

@media(max-width:640px) {
	.xun-paid-reading-header {
		gap: .75rem
	}

	.xun-paid-reading-title {
		font-size: .8125rem
	}

	.xun-paid-reading-badge {
		padding: .125rem .375rem;
		font-size: .6875rem
	}

	.xun-paid-reading-locked {
		padding: 1.25rem
	}

	.xun-paid-reading-lock-icon svg {
		width: 24px;
		height: 24px
	}

	.xun-paid-reading-price-current {
		font-size: 1.25rem
	}
}

.xun-paid-reading-body {
	animation: .3s ease-out xun-content-fade-in
}

@keyframes xun-content-fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.xun-post-access-region.is-refreshing {
	opacity: .72;
	transition: opacity .2s
}

.xun-go-redirect {
	padding: 2rem 1rem
}

body.xun-go-redirect-page .xun-submit-page {
	flex: 1;
	justify-content: center;
	align-items: center;
	min-height: 0;
	padding: 1rem 0 0;
	display: flex
}

body.xun-go-redirect-page .xun-footer-bottom {
	padding-top: 0
}

body.xun-go-redirect-page .xun-content,
body.xun-go-redirect-page .site-main {
	flex-direction: column;
	display: flex
}

body.xun-go-redirect-page .site-main {
	flex: 1
}

body.xun-go-redirect-page .xun-submit-container {
	width: 100%
}

.xun-go-redirect-card {
	text-align: center;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem
}

.xun-go-redirect-icon {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-primary-bg);
	width: 4rem;
	height: 4rem;
	color: var(--xun-primary, var(--color-primary));
	justify-content: center;
	align-items: center;
	margin: 0 auto 1rem;
	display: flex
}

.xun-go-redirect-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.5rem
}

.xun-go-redirect-desc {
	max-width: 42rem;
	color: var(--color-text-secondary);
	margin: .875rem auto 0;
	line-height: 1.75
}

.xun-go-redirect-actions {
	justify-content: center;
	align-items: center;
	gap: .875rem;
	margin-top: 1.5rem;
	display: flex
}

.xun-go-redirect-btn {
	min-width: 9rem
}

.xun-go-redirect-tip {
	color: var(--color-text-tertiary);
	margin: 1rem 0 0;
	font-size: .875rem
}

@media(max-width:640px) {
	.xun-go-redirect {
		padding: 1.25rem .875rem
	}

	.xun-go-redirect-card {
		padding: 1.5rem 1.25rem
	}

	.xun-go-redirect-title {
		font-size: 1.25rem
	}

	.xun-go-redirect-actions {
		gap: .625rem
	}

	.xun-go-redirect-btn {
		flex: 1 1 0;
		min-width: 0
	}
}

.xun-shipping-address-card {
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-bg-container, #fff);
	flex-direction: column;
	gap: .75rem;
	padding: 1rem;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	display: flex
}

.xun-shipping-address-card.is-selected {
	border-color: var(--xun-primary, #2563eb);
	box-shadow: 0 0 0 3px var(--color-primary-bg, #2563eb1f)
}

.xun-shipping-address-card.is-compact {
	cursor: pointer;
	padding: .875rem
}

.xun-shipping-address-card__header {
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
	display: flex
}

.xun-shipping-address-card__meta {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-shipping-address-card__meta strong {
	color: var(--color-text, #171717);
	font-size: .9375rem
}

.xun-shipping-address-card__meta span {
	color: var(--color-text-tertiary, #737373);
	font-size: .8125rem
}

.xun-shipping-address-card__badges {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .375rem;
	display: flex
}

.xun-shipping-address-card__badge {
	background: var(--color-fill-quaternary, #f5f5f5);
	min-height: 1.5rem;
	color: var(--color-text-secondary, #525252);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: .125rem .5rem;
	font-size: .75rem;
	line-height: 1.2;
	display: inline-flex
}

.xun-shipping-address-card__badge--primary,
.xun-shipping-address-card__badge--selected {
	background: var(--color-primary-bg, #2563eb1f);
	color: var(--xun-primary, #2563eb)
}

.xun-shipping-address-card__address {
	color: var(--color-text-secondary, #404040);
	margin: 0;
	font-size: .875rem;
	line-height: 1.7
}

.xun-shipping-address-card__actions {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-address-action-danger {
	color: var(--color-error, #ef4444)
}

.xun-shipping-address-form {
	flex-direction: column;
	gap: 1.25rem;
	display: flex
}

.xun-shipping-address-form__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	display: grid
}

.xun-shipping-address-form__item {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-shipping-address-form__item--full {
	grid-column: 1/-1
}

.xun-shipping-address-form .xun-settings-input-wrap {
	gap: 0
}

.xun-shipping-address-form .xun-settings-input,
.xun-shipping-address-form .input {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	padding: .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-shipping-address-form .xun-settings-input:focus,
.xun-shipping-address-form .input:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-shipping-address-form .xun-settings-input::placeholder,
.xun-shipping-address-form .input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-shipping-address-form__textarea {
	resize: vertical;
	min-height: 6.75rem;
	padding-top: .75rem;
	padding-bottom: .75rem
}

.xun-shipping-address-form__default {
	color: var(--color-text-secondary, #525252);
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	display: inline-flex
}

.xun-shipping-address-form__default input {
	width: 1rem;
	height: 1rem
}

@media(max-width:640px) {
	.xun-shipping-address-card__header {
		flex-direction: column
	}

	.xun-shipping-address-card__badges {
		justify-content: flex-start
	}

	.xun-shipping-address-form__grid {
		grid-template-columns: 1fr
	}
}

.xun-shop-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem
}

.xun-home-shop-section .xun-shop-container {
	padding: 0
}

.xun-shop-archive {
	padding: .5rem 0 1.5rem
}

.xun-home-shop-section {
	padding-bottom: 1.5rem
}

.xun-shop-home-sections {
	gap: .5rem;
	display: grid
}

.xun-shop-home-filters {
	gap: .75rem;
	margin-bottom: .5rem;
	padding: .5rem;
	display: grid
}

.xun-shop-home-filter-tabs {
	margin-bottom: 0
}

.xun-shop-home-display {
	padding: .5rem
}

.xun-shop-home-display.xun-home-shop-section {
	padding-bottom: 1rem
}

.xun-home-shop-section .xun-home-shop-header {
	margin-bottom: 1rem
}

.xun-home-shop-section .xun-featured-header-left {
	flex-flow: wrap;
	align-items: center;
	gap: 1rem
}

.xun-home-shop-section .xun-featured-subtitle {
	padding-left: 0
}

.xun-shop-slider-wrap {
	margin-bottom: .5rem;
	padding-top: 0;
	padding-bottom: 0
}

.xun-shop-slider-wrap--fullwidth {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 1rem
}

.xun-shop-slider-wrap--fullwidth .xun-shop-container {
	max-width: none;
	padding: 0
}

.xun-shop-slider {
	position: relative;
	overflow: hidden
}

.xun-shop-slider-item {
	height: var(--slider-height, var(--xun-shop-slider-height, 360px));
	background: var(--color-bg-layout);
	position: relative;
	overflow: hidden
}

.xun-shop-slider-item img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .4s
}

.xun-shop-slider-content {
	color: #fff;
	opacity: 0;
	z-index: 5;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3), rgba(0, 0, 0, .6));
	padding: 4rem 1.5rem 1.5rem;
	transition: opacity .3s, transform .3s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(20px)
}

.xun-shop-slider-link {
	color: inherit;
	text-decoration: none;
	display: block
}

.xun-shop-slider:hover .xun-shop-slider-content {
	opacity: 1;
	transform: translateY(0)
}

.xun-shop-slider-content h3 {
	color: #fff;
	text-shadow: 0 1px 3px #00000080;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-shop-slider-content p {
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 2px #00000080;
	margin: .25rem 0 0;
	font-size: .9375rem;
	line-height: 1.6
}

.xun-shop-category-tabs {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	display: flex
}

.xun-shop-category-tab {
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container, #fff);
	color: var(--color-text-secondary, #525252);
	cursor: pointer;
	border: 1px solid #0000;
	align-items: center;
	padding: .375rem .875rem;
	text-decoration: none;
	transition: all .2s;
	display: inline-flex
}

.xun-shop-category-tab:hover,
.xun-shop-category-tab.is-active {
	color: var(--xun-primary, #1677ff);
	border-color: var(--xun-primary, #1677ff)
}

@supports (color:color-mix(in lab, red, red)) {

	.xun-shop-category-tab:hover,
	.xun-shop-category-tab.is-active {
		border-color: color-mix(in srgb, var(--xun-primary, #1677ff)25%, transparent)
	}
}

.xun-shop-category-tab:hover,
.xun-shop-category-tab.is-active {
	background: var(--xun-primary, #1677ff)
}

@supports (color:color-mix(in lab, red, red)) {

	.xun-shop-category-tab:hover,
	.xun-shop-category-tab.is-active {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, var(--color-bg-container, #fff))
	}
}

.xun-shop-grid {
	grid-template-columns: repeat(var(--xun-shop-grid-columns, 3), minmax(0, 1fr));
	gap: .75rem;
	display: grid
}

.xun-shop-card {
	flex-direction: column;
	display: flex;
	overflow: hidden
}

.xun-shop-card-media {
	position: relative
}

.xun-shop-card-link {
	color: inherit;
	text-decoration: none
}

.xun-shop-card-thumb {
	aspect-ratio: var(--xun-shop-thumb-ratio, 1/1);
	background: var(--color-bg-layout, #f5f5f5);
	position: relative;
	overflow: hidden
}

.xun-shop-card-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s
}

.xun-shop-card:hover .xun-shop-card-thumb img {
	transform: scale(1.04)
}

.xun-shop-card-thumb-placeholder {
	background: linear-gradient(135deg, var(--color-bg-layout, #f5f5f5), var(--color-bg-container, #fff));
	width: 100%;
	height: 100%
}

.xun-shop-card-promo-banner {
	z-index: 2;
	color: #fff;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(239, 68, 68, .96), rgba(249, 115, 22, .92));
	border-radius: 0;
	justify-content: space-between;
	align-items: center;
	gap: .625rem;
	min-height: 2rem;
	padding: 0 .75rem;
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.xun-shop-card-promo-banner-label {
	letter-spacing: .02em;
	white-space: nowrap;
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1
}

.xun-shop-card-promo-banner strong {
	white-space: nowrap;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1
}

.xun-shop-favorite-btn .xun-action-count {
	font-size: .75rem
}

.xun-shop-card-body {
	padding: .5rem
}

.xun-shop-card-title {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-shop-card-summary {
	color: var(--color-text-tertiary, #737373);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: .5rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden
}

.xun-shop-card-price {
	align-items: baseline;
	gap: .375rem;
	display: flex
}

.xun-shop-card-price-current {
	color: var(--xun-primary, #1677ff);
	font-size: 1rem;
	font-weight: 700
}

.xun-shop-card-price-original {
	color: var(--color-text-quaternary, #a3a3a3);
	font-size: .8125rem;
	text-decoration: line-through
}

.xun-shop-card-metrics {
	color: var(--color-text-tertiary, #737373);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: .625rem;
	font-size: .75rem;
	display: grid
}

.xun-shop-card-metric {
	align-items: center;
	gap: .25rem;
	min-width: 0;
	display: inline-flex
}

.xun-shop-card-metric strong {
	color: var(--color-text-secondary, #525252);
	font-weight: 600
}

.xun-shop-card-metric--views {
	grid-column: 1;
	justify-self: start
}

.xun-shop-card-metric--stock {
	grid-column: 2;
	justify-self: center
}

.xun-shop-card-metric--sales {
	grid-column: 3;
	justify-self: end
}

.xun-shop-card-actions {
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding: 0 .5rem .5rem;
	display: flex
}

.xun-shop-card-actions-price {
	min-width: 0
}

.xun-shop-card-actions .btn {
	flex: none
}

.xun-shop-buy-label--compact {
	display: none
}

.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:5"] .xun-shop-card-actions,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 5"] .xun-shop-card-actions,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:6"] .xun-shop-card-actions,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 6"] .xun-shop-card-actions {
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: .5rem
}

.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:5"] .xun-shop-card-price,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 5"] .xun-shop-card-price,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:6"] .xun-shop-card-price,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 6"] .xun-shop-card-price {
	flex-wrap: wrap;
	row-gap: .125rem
}

.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:5"] .xun-shop-card-actions .btn,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 5"] .xun-shop-card-actions .btn,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns:6"] .xun-shop-card-actions .btn,
.xun-shop[data-xun-shop-archive][style*="--xun-shop-grid-columns: 6"] .xun-shop-card-actions .btn {
	justify-content: center;
	width: 100%
}

.xun-shop-empty {
	text-align: center;
	color: var(--color-text-tertiary, #737373);
	grid-column: 1/-1;
	padding: 2rem 1rem
}

.xun-shop-single {
	padding: .5rem 0 1.5rem
}

.xun-shop-single-main {
	grid-template-columns: minmax(280px, 1fr) minmax(340px, 1fr);
	gap: 1rem;
	padding: .5rem;
	display: grid
}

.xun-shop-single-summary {
	flex-direction: column;
	min-width: 0;
	display: flex
}

.xun-shop-single-gallery-stage {
	aspect-ratio: 1;
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-layout, #f5f5f5);
	position: relative;
	overflow: hidden
}

.xun-shop-single-gallery img {
	border-radius: inherit;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block
}

.xun-shop-single-gallery [data-shop-main-image] {
	opacity: 1;
	transition: opacity .32s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)), transform .42s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1));
	will-change: opacity, transform;
	transform: scale(1)
}

.xun-shop-single-gallery [data-shop-main-image].is-switching {
	opacity: .14;
	transform: scale(1.02)
}

.xun-shop-single-gallery-empty {
	aspect-ratio: 1;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--color-bg-layout, #f5f5f5), var(--color-bg-container, #fff));
	width: 100%
}

.xun-shop-gallery-nav {
	z-index: 2;
	border: 1px solid #f0f0f0;
	justify-content: center;
	align-items: center;
	width: 2.15rem;
	height: 2.15rem;
	margin-top: 0;
	display: inline-flex;
	position: absolute;
	top: 50%
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-gallery-nav {
		border: 1px solid color-mix(in srgb, var(--color-border-secondary, #e5e5e5)88%, #fff)
	}
}

.xun-shop-gallery-nav {
	color: var(--color-text-secondary, #525252);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .24s ease, transform .28s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)), box-shadow .24s ease, visibility .24s ease;
	background: rgba(255, 255, 255, .94);
	border-radius: 999px;
	transform: translateY(-50%)scale(1);
	box-shadow: 0 10px 24px rgba(15, 23, 42, .12)
}

.xun-shop-gallery-nav svg {
	display: block
}

.xun-shop-gallery-nav:hover {
	color: var(--xun-primary, #1677ff);
	background: #fff
}

.xun-shop-gallery-nav-prev {
	left: .625rem
}

.xun-shop-gallery-nav-next {
	right: .625rem
}

@media(hover:hover) {
	.xun-shop-single-gallery-stage.has-navigation .xun-shop-gallery-nav {
		opacity: 0;
		visibility: hidden;
		pointer-events: none
	}

	.xun-shop-single-gallery-stage.has-navigation .xun-shop-gallery-nav-prev {
		transform: translate(-.35rem, -50%)scale(.92)
	}

	.xun-shop-single-gallery-stage.has-navigation .xun-shop-gallery-nav-next {
		transform: translate(.35rem, -50%)scale(.92)
	}

	.xun-shop-single-gallery-stage.has-navigation:hover .xun-shop-gallery-nav,
	.xun-shop-single-gallery-stage.has-navigation:focus-within .xun-shop-gallery-nav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(-50%)scale(1)
	}
}

.xun-shop-product-attributes-wrap {
	margin-top: .875rem;
	padding: 0 2.35rem;
	position: relative
}

.xun-shop-product-attributes-wrap:not(.has-navigation) {
	padding-left: 0;
	padding-right: 0
}

.xun-shop-single-thumbs {
	display: none
}

.xun-shop-thumb {
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	padding: 0;
	overflow: hidden
}

.xun-shop-thumb.is-active {
	border-color: var(--xun-primary, #1677ff)
}

.xun-shop-thumb img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	display: block
}

.xun-shop-single-title {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: clamp(1.35rem, 1.15rem + .75vw, 1.85rem);
	line-height: 1.24
}

.xun-shop-single-excerpt {
	color: var(--color-text-secondary, #525252);
	overflow-wrap: anywhere;
	max-width: 68ch;
	margin: 0;
	line-height: 1.6
}

.xun-shop-single-excerpt:empty {
	display: none
}

.xun-shop-single-header-top {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: flex-start;
	gap: .875rem 1rem;
	display: grid
}

.xun-shop-single-heading {
	flex-direction: column;
	gap: .375rem;
	min-width: 0;
	display: flex
}

.xun-shop-single-header {
	flex-direction: column;
	gap: .625rem;
	display: flex
}

.xun-shop-promo-tags {
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-top: .5rem;
	display: flex
}

.xun-shop-promo-tag {
	background: var(--xun-shop-promo-tag-bg, var(--xun-primary, #1677ff));
	color: #fff;
	white-space: nowrap;
	border-radius: 999px;
	place-items: center;
	min-height: 1.4rem;
	padding: .05rem .55rem 0;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	display: inline-grid
}

.xun-shop-single-meta {
	flex-wrap: nowrap;
	flex: none;
	justify-content: flex-end;
	place-self: start end;
	align-items: flex-start;
	gap: .375rem;
	width: max-content;
	min-width: max-content;
	max-width: 100%;
	margin-left: auto;
	display: flex
}

.xun-shop-single-meta>* {
	max-width: 100%
}

.xun-shop-single-meta-chip,
.xun-shop-single-meta-item {
	background: var(--color-bg-layout, #f5f5f5);
	min-height: 1.5rem;
	color: var(--color-text-secondary, #525252);
	white-space: nowrap;
	border-radius: 999px;
	align-items: center;
	gap: .25rem;
	padding: 0 .5rem;
	font-size: .6875rem;
	line-height: 1;
	text-decoration: none;
	display: inline-flex
}

.xun-shop-single-meta-chip {
	color: var(--xun-primary, #1677ff)
}

.xun-shop-single-meta-item strong {
	color: var(--color-text, #171717)
}

.xun-shop-promo-banner {
	border: 1px solid var(--xun-shop-promo-banner-accent, var(--xun-primary, #1677ff));
	margin-top: 0;
	padding: .875rem 1rem
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-promo-banner {
		border: 1px solid color-mix(in srgb, var(--xun-shop-promo-banner-accent, var(--xun-primary, #1677ff))18%, transparent)
	}
}

.xun-shop-promo-banner {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: linear-gradient(135deg, var(--xun-shop-promo-banner-accent, var(--xun-primary, #1677ff)), #fff3e4)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-promo-banner {
		background: linear-gradient(135deg, color-mix(in srgb, var(--xun-shop-promo-banner-accent, var(--xun-primary, #1677ff))12%, #fff), #fff3e4)
	}
}

.xun-shop-promo-banner {
	color: var(--xun-shop-promo-banner-text, var(--color-text, #171717));
	box-shadow: 0 14px 32px rgba(15, 23, 42, .06)
}

.xun-shop-promo-banner>:first-child {
	margin-top: 0
}

.xun-shop-promo-banner>:last-child {
	margin-bottom: 0
}

.xun-shop-promo-banner p {
	margin: 0;
	line-height: 1.7
}

.xun-shop-promo-banner a {
	color: inherit
}

.xun-shop-single-price,
.xun-shop-single-sku,
.xun-shop-single-qty {
	margin-top: .5rem
}

.xun-shop-single-sku>h3,
.xun-shop-single-qty>h3 {
	color: var(--color-text-secondary, #525252);
	margin: 0 0 .625rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35
}

.xun-shop-purchase-limit-note {
	color: var(--color-text-tertiary, #737373);
	margin: .5rem 0 0;
	font-size: .8125rem;
	line-height: 1.45
}

.xun-shop-purchase-limit-note.is-limit-hit {
	color: var(--xun-error, #ff4d4f)
}

.xun-shop-single-price {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-shop-price-current {
	color: var(--xun-primary, #1677ff);
	font-size: 1.625rem;
	font-weight: 700
}

.xun-shop-price-current.is-hidden {
	display: none
}

.xun-shop-price-original {
	color: var(--color-text-quaternary, #a3a3a3);
	text-decoration: line-through
}

.xun-shop-price-original.is-hidden {
	display: none
}

.xun-shop-stock {
	color: var(--color-text-tertiary, #737373);
	font-size: .875rem
}

.xun-shop-points-price {
	color: #b45309;
	background: #fef3e2;
	border-radius: 999px;
	align-items: center;
	gap: .375rem;
	padding: .35rem .625rem;
	font-size: .75rem;
	font-weight: 600;
	display: inline-flex
}

.xun-shop-points-price.is-hidden {
	display: none
}

.xun-shop-points-price strong {
	color: inherit;
	font-weight: 700
}

.xun-shop-points-only-badge {
	min-height: 1.25rem;
	color: inherit;
	background: rgba(180, 83, 9, .14);
	border-radius: 999px;
	align-items: center;
	padding: 0 .4rem;
	font-size: .6875rem;
	font-weight: 700;
	display: inline-flex
}

.xun-shop-points-only-badge.is-hidden {
	display: none
}

.xun-shop-discount-countdown {
	background: var(--xun-primary, #1677ff);
	border-radius: 999px;
	align-items: center;
	gap: .3rem;
	min-height: 1.7rem;
	padding: 0 .6rem;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-discount-countdown {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, #fff)
	}
}

.xun-shop-discount-countdown {
	color: var(--xun-primary, #1677ff);
	white-space: nowrap;
	font-size: .75rem;
	font-weight: 500
}

.xun-shop-discount-countdown.is-hidden {
	display: none
}

.xun-shop-discount-countdown-label {
	opacity: .8;
	color: inherit
}

.xun-shop-discount-countdown strong {
	color: inherit;
	font-size: .8125rem;
	font-weight: 700
}

.xun-shop-sku-options {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-shop-sku-option {
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	background: var(--color-bg-container, #fff);
	cursor: pointer;
	text-align: left;
	align-items: center;
	gap: .625rem;
	padding: .375rem .75rem;
	display: inline-flex
}

.xun-shop-sku-option.is-active {
	border-color: var(--xun-primary, #1677ff);
	background: var(--xun-primary, #1677ff)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-sku-option.is-active {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, var(--color-bg-container, #fff))
	}
}

.xun-shop-sku-option.is-disabled,
.xun-shop-sku-option:disabled {
	color: var(--color-text-quaternary, #a3a3a3);
	background: var(--color-fill-quaternary, #f5f5f5);
	border-color: var(--color-border-secondary, #e5e5e5);
	cursor: not-allowed;
	box-shadow: none;
	opacity: .72
}

.xun-shop-sku-option-media {
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	background: var(--color-fill-quaternary, #f5f5f5);
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	overflow: hidden
}

.xun-shop-sku-option-media img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-shop-sku-option-text {
	min-width: 0;
	line-height: 1.4
}

.xun-shop-sku-option-state {
	color: var(--color-text-quaternary, #a3a3a3);
	margin-left: .125rem;
	font-size: .75rem
}

.xun-shop-sku-current {
	color: var(--color-text-tertiary, #737373);
	margin: .5rem 0 0
}

.xun-shop-sku-extra-list {
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .625rem;
	display: flex
}

.xun-shop-sku-tip {
	border: 1px solid #f1f1f1;
	align-items: center;
	gap: .375rem;
	min-height: 1.7rem;
	margin: 0;
	padding: .32rem .6rem;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-sku-tip {
		border: 1px solid color-mix(in srgb, var(--color-border-secondary, #e5e5e5)86%, #fff)
	}
}

.xun-shop-sku-tip {
	background: #feffff;
	border-radius: 999px
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-sku-tip {
		background: color-mix(in srgb, var(--color-bg-container, #fff)92%, #f8fafc)
	}
}

.xun-shop-sku-tip {
	color: var(--color-text-secondary, #525252);
	font-size: .75rem;
	line-height: 1.2
}

.xun-shop-sku-tip-icon {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--xun-primary, #1677ff);
	background: var(--xun-primary, #1677ff);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-sku-tip-icon {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)12%, #fff)
	}
}

.xun-shop-sku-tip-icon {
	flex: none
}

.xun-shop-sku-tip-text {
	word-break: break-word;
	align-items: center;
	min-width: 0;
	display: inline-flex
}

[data-shop-sku-points-tip] .xun-shop-sku-tip-icon {
	color: #d97706;
	background: #fef1dd
}

[data-shop-sku-express-tip] .xun-shop-sku-tip-icon {
	color: #2563eb;
	background: #e4eefe
}

[data-shop-sku-shipping-tip] .xun-shop-sku-tip-icon {
	color: #0f766e;
	background: #def5f3
}

[data-shop-sku-reward-tip] .xun-shop-sku-tip-icon {
	color: #c2410c;
	background: #feeee0
}

.xun-shop-sku-tip.is-hidden {
	display: none
}

.xun-shop-product-attributes {
	background: #fff;
	border-radius: 14px;
	padding: 0;
	overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-product-attributes {
		background: color-mix(in srgb, var(--color-bg-container, #fff)96%, #f8fafc)
	}
}

.xun-shop-product-attributes .swiper-wrapper {
	align-items: stretch
}

.xun-shop-product-attributes .xun-shop-product-attribute-slide {
	flex: none;
	max-width: none;
	height: auto;
	width: auto !important
}

.xun-shop-product-attribute {
	min-width: 106px;
	min-height: 64px;
	box-shadow: none;
	text-align: center;
	background: 0 0;
	border: 0;
	border-radius: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .28rem;
	width: auto;
	padding: .7rem;
	display: flex;
	position: relative
}

.xun-shop-product-attribute-slide:not(:last-child) .xun-shop-product-attribute:after {
	content: "";
	background: rgba(238, 238, 238, .92);
	width: 1px;
	height: 2rem;
	position: absolute;
	top: 50%;
	right: 0
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-product-attribute-slide:not(:last-child) .xun-shop-product-attribute:after {
		background: color-mix(in srgb, var(--color-border-secondary, #e5e5e5)92%, transparent)
	}
}

.xun-shop-product-attribute-slide:not(:last-child) .xun-shop-product-attribute:after {
	transform: translateY(-50%)
}

.xun-shop-product-attribute-head {
	justify-content: center;
	align-items: center;
	gap: .3rem;
	width: 100%;
	min-width: 0;
	display: inline-flex
}

.xun-shop-product-attribute-icon {
	width: 1rem;
	height: 1rem;
	color: var(--color-text-quaternary, #a3a3a3);
	background: 0 0;
	flex: none;
	justify-content: center;
	align-items: center;
	display: none
}

.xun-shop-product-attribute-label {
	color: var(--color-text-tertiary, #8c8c8c);
	white-space: nowrap;
	text-align: center;
	flex: 0 auto;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.15
}

.xun-shop-product-attribute-value {
	color: var(--color-text, #171717);
	word-break: break-word;
	text-align: center;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3
}

.xun-shop-product-attributes-nav {
	z-index: 2;
	border: 1px solid #f0f0f0;
	justify-content: center;
	align-items: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-top: -.95rem;
	display: inline-flex;
	position: absolute;
	top: 50%
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-product-attributes-nav {
		border: 1px solid color-mix(in srgb, var(--color-border-secondary, #e5e5e5)88%, #fff)
	}
}

.xun-shop-product-attributes-nav {
	color: var(--color-text-secondary, #525252);
	cursor: pointer;
	background: rgba(255, 255, 255, .96);
	border-radius: 999px;
	transition: opacity .2s, color .2s, border-color .2s;
	box-shadow: 0 8px 18px rgba(15, 23, 42, .08)
}

.xun-shop-product-attributes-nav svg {
	color: currentColor;
	width: 1rem;
	height: 1rem;
	display: block
}

.xun-shop-product-attributes-nav:hover {
	background: rgba(255, 255, 255, .96)
}

.xun-shop-product-attributes-nav-prev {
	left: 0
}

.xun-shop-product-attributes-nav-next {
	right: 0
}

.xun-shop-product-attributes-nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-shop-gallery-nav {
		border-color: rgba(212, 212, 212, .84)
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-gallery-nav {
			border-color: color-mix(in srgb, var(--color-border, #3f3f46)84%, transparent)
		}
	}

	:root:not(.light) .xun-shop-gallery-nav {
		background: #fff
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-gallery-nav {
			background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
		}
	}

	:root:not(.light) .xun-shop-gallery-nav {
		color: var(--color-text, #ffffffeb);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
	}

	:root:not(.light) .xun-shop-gallery-nav:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-gallery-nav:hover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)18%, var(--color-bg-elevated, #27272a))
		}
	}

	:root:not(.light) .xun-shop-gallery-nav:hover {
		color: #fff
	}

	:root:not(.light) .xun-shop-product-attributes-nav {
		border-color: rgba(212, 212, 212, .84)
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-product-attributes-nav {
			border-color: color-mix(in srgb, var(--color-border, #3f3f46)84%, transparent)
		}
	}

	:root:not(.light) .xun-shop-product-attributes-nav {
		background: #fff
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-product-attributes-nav {
			background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
		}
	}

	:root:not(.light) .xun-shop-product-attributes-nav {
		color: var(--color-text, #ffffffeb);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
	}

	:root:not(.light) .xun-shop-product-attributes-nav:hover {
		background: #fff
	}

	@supports (color:color-mix(in lab, red, red)) {
		:root:not(.light) .xun-shop-product-attributes-nav:hover {
			background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
		}
	}
}

.dark .xun-shop-gallery-nav {
	border-color: rgba(212, 212, 212, .84)
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-gallery-nav {
		border-color: color-mix(in srgb, var(--color-border, #3f3f46)84%, transparent)
	}
}

.dark .xun-shop-gallery-nav {
	background: #fff
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-gallery-nav {
		background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
	}
}

.dark .xun-shop-gallery-nav {
	color: var(--color-text, #ffffffeb);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
}

.dark .xun-shop-gallery-nav:hover {
	background: var(--xun-primary, #1677ff)
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-gallery-nav:hover {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)18%, var(--color-bg-elevated, #27272a))
	}
}

.dark .xun-shop-gallery-nav:hover {
	color: #fff
}

.dark .xun-shop-product-attributes-nav {
	border-color: rgba(212, 212, 212, .84)
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-product-attributes-nav {
		border-color: color-mix(in srgb, var(--color-border, #3f3f46)84%, transparent)
	}
}

.dark .xun-shop-product-attributes-nav {
	background: #fff
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-product-attributes-nav {
		background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
	}
}

.dark .xun-shop-product-attributes-nav {
	color: var(--color-text, #ffffffeb);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
}

.dark .xun-shop-product-attributes-nav:hover {
	background: #fff
}

@supports (color:color-mix(in lab, red, red)) {
	.dark .xun-shop-product-attributes-nav:hover {
		background: color-mix(in srgb, var(--color-bg-elevated, #27272a)92%, #fff 8%)
	}
}

.xun-shop-qty-control {
	background: var(--color-bg-body, var(--color-bg-layout, #f5f5f5));
	box-shadow: none;
	border: 0;
	border-radius: 5px;
	align-items: center;
	gap: .3rem;
	padding: 0;
	display: inline-flex
}

.xun-shop-qty-btn {
	width: 2rem;
	height: 2rem;
	color: var(--color-text-secondary, #525252);
	cursor: pointer;
	background: 0 0;
	border: 0;
	border-radius: 5px;
	justify-content: center;
	align-items: center;
	transition: border-color .2s, color .2s;
	display: inline-flex
}

.xun-shop-qty-btn:hover {
	color: var(--color-text-secondary, #525252);
	background: 0 0
}

.xun-shop-qty-btn svg {
	display: block
}

.xun-shop-qty-input {
	text-align: center;
	background: var(--color-bg-body, var(--color-bg-layout, #f5f5f5));
	width: 2.75rem;
	height: 2rem;
	color: var(--color-text, #171717);
	-webkit-appearance: textfield;
	appearance: textfield;
	border: 0;
	font-size: .9375rem;
	font-weight: 600
}

.xun-shop-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-shop-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-shop-single-actions {
	flex-wrap: wrap;
	gap: .625rem;
	padding-top: .5rem;
	display: flex
}

.xun-shop-single-actions>* {
	flex: 1 1 0
}

.xun-shop-action-btn--favorite {
	flex: none;
	align-self: flex-start;
	width: auto;
	min-width: 0;
	padding-inline: .85rem
}

.xun-shop-action-btn.is-hidden {
	display: none
}

.xun-shop-action-btn.is-limit-hit {
	opacity: .62;
	cursor: not-allowed
}

body.post-type-archive-xun_shop_product .xun-layout-wrapper.xun-no-sidebar,
body.tax-xun_shop_category .xun-layout-wrapper.xun-no-sidebar {
	padding-top: 0
}

.xun-shop-favorite-btn {
	justify-content: center
}

.xun-shop-action-btn--cart {
	background: #fdecec;
	border-color: rgba(239, 68, 68, .28)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-action-btn--cart {
		background: color-mix(in srgb, #ef4444 10%, var(--color-bg-container, #fff))
	}
}

.xun-shop-action-btn--cart {
	color: #dc2626
}

.xun-shop-action-btn--cart:hover {
	background: #fde5e5;
	border-color: rgba(239, 68, 68, .4)
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-action-btn--cart:hover {
		background: color-mix(in srgb, #ef4444 14%, var(--color-bg-container, #fff))
	}
}

.xun-shop-action-btn--cart:hover {
	color: #b91c1c
}

.xun-shop-single-detail {
	margin-top: .75rem;
	padding: 0;
	overflow: hidden
}

.xun-shop-detail-tabs-nav {
	display: flex;
	overflow-x: auto
}

.xun-shop-detail-tab {
	font-weight: 600
}

.xun-shop-detail-panels {
	padding: 0
}

.xun-shop-detail-panel {
	padding: .5rem;
	display: block
}

.xun-shop-detail-panel[hidden] {
	display: none !important
}

.xun-shop-detail-panel>:first-child {
	margin-top: 0
}

.xun-shop-detail-panel>:last-child {
	margin-bottom: 0
}

.xun-shop-comments .xun-comments {
	padding: 0
}

.xun-shop-comments .xun-comments-title {
	margin-top: 0
}

.xun-shop-single-detail .xun-download-tabs-nav {
	padding-inline: 0
}

.xun-shop-single-detail .xun-download-tabs-btn {
	padding-block: .95rem
}

.xun-shop-after-sales-tags {
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .875rem;
	display: flex
}

.xun-shop-after-sales-tag {
	background: var(--xun-primary, #1677ff);
	border-radius: 999px;
	align-items: center;
	min-height: 1.9rem;
	padding: 0 .75rem;
	display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
	.xun-shop-after-sales-tag {
		background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, var(--color-bg-container, #fff))
	}
}

.xun-shop-after-sales-tag {
	color: var(--xun-primary, #1677ff);
	font-size: .8125rem;
	font-weight: 600
}

.xun-shop-after-sales-content {
	color: var(--color-text-secondary, #525252)
}

.xun-shop-cart-trigger,
.xun-shop-cart-btn {
	position: relative
}

.xun-shop-cart-badge {
	background: var(--color-error, #f5222d);
	color: #fff;
	text-align: center;
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	line-height: 16px;
	position: absolute;
	top: -4px;
	right: -4px
}

.xun-shop-cart-badge.is-empty {
	display: none
}

.xun-shop-pagination-wrap {
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	display: flex
}

.xun-shop-load-more-btn {
	min-width: 11rem
}

.xun-shop-pagination-state {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .8125rem
}

.xun-shop-cart {
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	display: flex
}

.xun-shop-cart-header,
.xun-shop-cart-footer {
	justify-content: space-between;
	align-items: center;
	gap: .625rem;
	display: flex
}

.xun-shop-cart-list-wrap {
	flex: auto;
	min-height: 0;
	margin-top: .75rem;
	overflow-y: auto
}

.xun-shop-cart-list {
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-shop-cart-item {
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .625rem;
	display: flex
}

.xun-shop-cart-item-cover,
.xun-shop-checkout-item-cover {
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	background: var(--color-fill-quaternary, #f5f5f5);
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	overflow: hidden
}

.xun-shop-cart-item-cover img,
.xun-shop-checkout-item-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-shop-cart-item-main,
.xun-shop-checkout-item-main {
	flex: 1;
	min-width: 0
}

.xun-shop-cart-item-title {
	color: inherit;
	font-weight: 600;
	text-decoration: none
}

.xun-shop-cart-item-meta {
	color: var(--color-text-tertiary, #737373);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-shop-cart-item-side {
	text-align: right
}

.xun-shop-cart-empty {
	border: 1px dashed var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	text-align: center;
	color: var(--color-text-tertiary, #737373);
	padding: 1rem
}

.xun-shop-cart-footer {
	background: var(--color-bg-container, #fff);
	margin-top: auto;
	padding-top: .875rem
}

.xun-shop-checkout {
	padding: 1rem 0 1.5rem
}

.xun-shop-checkout-header {
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .75rem;
	display: flex
}

.xun-shop-checkout-title {
	margin: 0;
	font-size: 1.5rem
}

.xun-shop-checkout-subtitle {
	color: var(--color-text-tertiary, #737373);
	margin: .5rem 0 0;
	font-size: .9375rem
}

.xun-shop-checkout-action-btn {
	white-space: nowrap;
	box-sizing: border-box;
	border-radius: .625rem;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	min-height: 2.375rem;
	padding: .625rem .95rem;
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	display: inline-flex
}

.xun-shop-checkout-layout {
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
	gap: .75rem;
	display: grid
}

.xun-shop-checkout-items,
.xun-shop-checkout-shipping,
.xun-shop-checkout-contact,
.xun-shop-checkout-summary {
	padding: 1rem
}

.xun-shop-checkout-card-title {
	margin: 0;
	font-size: 1rem
}

.xun-shop-checkout-list {
	flex-direction: column;
	gap: .5rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
	display: flex
}

.xun-shop-checkout-item {
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .625rem;
	display: flex
}

.xun-shop-checkout-item-main strong {
	font-size: .9375rem;
	display: block
}

.xun-shop-checkout-item-main p {
	color: var(--color-text-tertiary, #737373);
	margin: .25rem 0 0;
	font-size: .8125rem
}

.xun-shop-checkout-empty {
	border: 1px dashed var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	text-align: center;
	color: var(--color-text-tertiary, #737373);
	margin-top: .75rem;
	padding: 1rem
}

.xun-shop-checkout-side {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-shop-checkout-tip {
	color: var(--color-text-tertiary, #737373);
	margin: .5rem 0 0;
	font-size: .8125rem
}

.xun-shop-checkout-shipping-head {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-shop-checkout-contact-head {
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-shop-checkout-shipping-empty,
.xun-shop-checkout-auth-state {
	border: 1px dashed var(--color-border-secondary, #e5e5e5);
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-top: .875rem;
	padding: 1.5rem 1rem;
	display: flex
}

.xun-shop-checkout-shipping-empty.is-hidden,
.xun-shop-checkout-address-list.is-hidden,
.xun-shop-checkout-address-current.is-hidden,
.xun-shop-checkout-auth-state.is-hidden,
.xun-shop-checkout-contact-form.is-hidden {
	display: none
}

.xun-shop-checkout-shipping-empty strong {
	color: var(--color-text, #171717)
}

.xun-shop-checkout-shipping-empty p,
.xun-shop-checkout-auth-state p {
	color: var(--color-text-tertiary, #737373);
	margin: 0;
	font-size: .875rem
}

.xun-shop-checkout-auth-state strong {
	color: var(--color-text, #171717)
}

.xun-shop-checkout-shipping-empty-icon {
	background: var(--color-primary-bg, #2563eb1f);
	width: 3rem;
	height: 3rem;
	color: var(--xun-primary, #2563eb);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.xun-shop-checkout-address-list {
	gap: .625rem;
	margin-top: .875rem;
	display: grid
}

.xun-shop-checkout-address-current {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-fill-quinary, #00000005);
	margin-top: .875rem;
	padding: .875rem 1rem
}

.xun-shop-checkout-address-current__label {
	color: var(--color-text-tertiary, #737373);
	font-size: .75rem
}

.xun-shop-checkout-address-current__content {
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .375rem;
	display: flex
}

.xun-shop-checkout-address-current__content strong {
	color: var(--color-text, #171717)
}

.xun-shop-checkout-address-current__content span,
.xun-shop-checkout-address-current p {
	color: var(--color-text-secondary, #525252);
	font-size: .875rem
}

.xun-shop-checkout-address-current p {
	margin: .375rem 0 0;
	line-height: 1.6
}

.xun-shop-checkout-contact-form {
	margin-top: .875rem
}

.xun-shop-checkout-form-grid {
	grid-template-columns: 1fr 1fr;
	gap: .625rem;
	margin-top: .75rem;
	display: grid
}

.xun-shop-form-item {
	flex-direction: column;
	gap: .375rem;
	display: flex
}

.xun-shop-form-item span {
	color: var(--color-text-secondary, #525252);
	font-size: .8125rem
}

.xun-shop-form-item--full {
	grid-column: 1/-1
}

.xun-input,
.xun-textarea {
	border: 1px solid var(--color-border-secondary, #e5e5e5);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container, #fff);
	width: 100%;
	color: inherit;
	padding: .5rem .625rem
}

.xun-shop-checkout-summary-row {
	justify-content: space-between;
	align-items: center;
	margin-top: .75rem;
	display: flex
}

.xun-shop-checkout-summary-row.is-hidden {
	display: none
}

.xun-shop-checkout-submit {
	width: 100%;
	margin-top: 1rem
}

.xun-shop-success {
	padding: 1rem 0 1.5rem
}

.xun-shop-success-card {
	padding: 1rem
}

.xun-shop-success-card--error {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-shop-success-hero {
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	display: grid
}

.xun-shop-success-hero-icon {
	color: #16a34a;
	background: rgba(34, 197, 94, .12);
	border-radius: 999px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 3.5rem;
	height: 3.5rem;
	display: inline-flex
}

.xun-shop-success-hero-icon.is-warning {
	color: #d97706;
	background: rgba(245, 158, 11, .14)
}

.xun-shop-success-hero-icon.is-error {
	color: #dc2626;
	background: rgba(239, 68, 68, .12)
}

.xun-shop-success-hero-copy {
	min-width: 0
}

.xun-shop-success-title {
	margin: 0;
	font-size: 1.5rem
}

.xun-shop-success-subtitle {
	color: var(--color-text-tertiary, #737373);
	margin: .45rem 0 0;
	font-size: .9375rem;
	line-height: 1.7
}

.xun-shop-success-actions {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .625rem;
	display: flex
}

.xun-shop-success-layout {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: .75rem;
	margin-top: 1rem;
	display: grid
}

.xun-shop-success-section {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-fill-quinary, #00000005);
	padding: 1rem
}

.xun-shop-success-section-title {
	margin: 0;
	font-size: 1rem
}

.xun-shop-success-meta-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .625rem;
	margin-top: .875rem;
	display: grid
}

.xun-shop-success-meta-item {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-bg-container, #fff);
	flex-direction: column;
	gap: .35rem;
	padding: .875rem .95rem;
	display: flex
}

.xun-shop-success-meta-item span {
	color: var(--color-text-tertiary, #737373);
	font-size: .75rem
}

.xun-shop-success-meta-item strong {
	color: var(--color-text, #171717);
	word-break: break-word;
	font-size: .9375rem
}

.xun-shop-success-order-list {
	flex-direction: column;
	gap: .625rem;
	margin-top: .875rem;
	display: flex
}

.xun-shop-success-order-item {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-bg-container, #fff);
	align-items: center;
	gap: .75rem;
	padding: .75rem;
	display: flex
}

.xun-shop-success-order-cover {
	background: var(--color-fill-quinary, #0000000a);
	border-radius: .75rem;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	overflow: hidden
}

.xun-shop-success-order-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block
}

.xun-shop-success-order-main {
	min-width: 0
}

.xun-shop-success-order-name {
	margin: 0;
	font-size: .9375rem
}

.xun-shop-success-order-name a {
	color: inherit;
	text-decoration: none
}

.xun-shop-success-order-meta {
	color: var(--color-text-tertiary, #737373);
	margin: .35rem 0 0;
	font-size: .8125rem
}

.xun-shop-success-deliveries {
	flex-direction: column;
	gap: .75rem;
	margin-top: .875rem;
	display: flex
}

.xun-shop-success-delivery,
.xun-shop-success-empty,
.xun-shop-success-notice,
.xun-shop-success-alert {
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-bg-container, #fff);
	padding: .875rem .95rem
}

.xun-shop-success-delivery-head {
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-bottom: .75rem;
	display: flex
}

.xun-shop-success-delivery-head strong {
	font-size: .9375rem
}

.xun-shop-success-delivery-head span {
	color: var(--color-text-tertiary, #737373);
	font-size: .75rem
}

.xun-shop-success-content-list {
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding-left: 1.1rem;
	display: flex
}

.xun-shop-success-content-item code {
	background: var(--color-fill-quinary, #0000000a);
	color: var(--color-text, #171717);
	font-family: var(--font-family-mono, "JetBrains Mono", "SFMono-Regular", Consolas, monospace);
	white-space: pre-wrap;
	word-break: break-word;
	border-radius: .75rem;
	padding: .625rem .75rem;
	font-size: .8125rem;
	line-height: 1.7;
	display: block
}

.xun-shop-success-delivery-error,
.xun-shop-success-empty p,
.xun-shop-success-notice p,
.xun-shop-success-alert p,
.xun-shop-success-footnote p {
	color: var(--color-text-secondary, #525252);
	margin: 0;
	line-height: 1.7
}

.xun-shop-success-delivery-error,
.xun-shop-success-alert p {
	color: #dc2626
}

.xun-shop-success-notice {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-shop-success-footnote {
	border-top: 1px solid var(--color-border-secondary, #e5e5e5);
	margin-top: 1rem;
	padding-top: 1rem
}

@media(max-width:1200px) {
	.xun-shop-single-main {
		gap: .875rem
	}

	.xun-shop-single-header-top {
		grid-template-columns: 1fr;
		gap: .625rem
	}

	.xun-shop-single-meta {
		flex-wrap: wrap;
		justify-content: flex-start;
		justify-self: stretch;
		width: auto;
		min-width: 0;
		max-width: none;
		margin-left: 0
	}
}

@media(max-width:992px) {
	.xun-home-shop-section .xun-featured-header-left {
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem
	}

	.xun-home-shop-section .xun-featured-subtitle {
		padding-left: .75rem
	}

	.xun-shop-archive>.xun-shop-container,
	.xun-shop-slider-wrap .xun-shop-container,
	.xun-shop-slider-wrap--fullwidth {
		padding: 0
	}

	.xun-shop-grid {
		grid-template-columns: repeat(var(--xun-shop-grid-columns-mobile, 2), minmax(0, 1fr))
	}

	.xun-shop-single-main {
		grid-template-columns: 1fr
	}

	.xun-shop-single-summary {
		gap: .675rem
	}

	.xun-shop-single-header-top {
		grid-template-columns: 1fr;
		gap: .625rem
	}

	.xun-shop-single-meta {
		flex-wrap: wrap;
		justify-content: flex-start;
		justify-self: stretch;
		width: auto;
		min-width: 0;
		max-width: none;
		margin-left: 0
	}

	.xun-shop-checkout-layout {
		grid-template-columns: 1fr
	}

	.xun-shop-success-hero {
		grid-template-columns: auto minmax(0, 1fr)
	}

	.xun-shop-success-actions {
		grid-column: 1/-1;
		justify-content: flex-start
	}

	.xun-shop-success-layout {
		grid-template-columns: 1fr
	}

	.xun-shop-product-attributes-wrap {
		padding-left: 2rem;
		padding-right: 2rem
	}
}

@media(max-width:640px) {

	.xun-shop-container,
	.xun-shop-archive>.xun-shop-container,
	.xun-shop-slider-wrap .xun-shop-container,
	.xun-shop-slider-wrap--fullwidth {
		padding: 0
	}

	.xun-shop-slider-item {
		height: var(--xun-shop-slider-height-mobile, 220px)
	}

	.xun-shop-success-card {
		padding: .875rem
	}

	.xun-shop-success-hero {
		grid-template-columns: 1fr;
		gap: .875rem
	}

	.xun-shop-success-hero-icon {
		width: 3rem;
		height: 3rem
	}

	.xun-shop-success-title {
		font-size: 1.25rem
	}

	.xun-shop-success-actions,
	.xun-shop-success-actions .btn {
		width: 100%
	}

	.xun-shop-success-section {
		padding: .875rem
	}

	.xun-shop-success-meta-grid {
		grid-template-columns: 1fr
	}

	.xun-shop-success-order-item {
		align-items: flex-start
	}

	.xun-shop-grid {
		grid-template-columns: repeat(var(--xun-shop-grid-columns-mobile, 2), minmax(0, 1fr));
		gap: .5rem
	}

	.xun-shop-card-actions {
		justify-content: flex-start;
		align-items: flex-end;
		gap: .5rem
	}

	.xun-shop-card-actions-price {
		flex: 1 1 0;
		min-width: 0
	}

	.xun-shop-card-price {
		flex-wrap: wrap;
		row-gap: .125rem
	}

	.xun-shop-card-actions .btn {
		flex-shrink: 0;
		align-self: flex-end
	}

	.xun-shop-single-main {
		gap: .75rem;
		padding: .375rem
	}

	.xun-shop-single-gallery {
		min-width: 0
	}

	.xun-shop-single-gallery-stage {
		border-radius: 10px
	}

	.xun-shop-single-thumbs {
		display: none
	}

	.xun-shop-single-thumbs::-webkit-scrollbar {
		display: none
	}

	.xun-shop-thumb {
		border-radius: 8px;
		flex: 0 0 clamp(5.2rem, 27vw, 6.4rem)
	}

	.xun-shop-single-summary {
		gap: .625rem
	}

	.xun-shop-single-header {
		gap: .5rem
	}

	.xun-shop-single-title {
		font-size: 1.25rem;
		line-height: 1.28
	}

	.xun-shop-single-excerpt {
		max-width: none;
		font-size: .875rem;
		line-height: 1.65
	}

	.xun-shop-single-meta {
		justify-content: flex-start;
		gap: .3rem
	}

	.xun-shop-single-meta-chip,
	.xun-shop-single-meta-item {
		min-height: 1.4rem;
		padding: 0 .45rem;
		font-size: .6875rem
	}

	.xun-shop-promo-tags {
		gap: .3rem;
		margin-top: .375rem
	}

	.xun-shop-promo-tag {
		min-height: 1.325rem;
		padding: .02rem .5rem 0
	}

	.xun-shop-promo-banner {
		padding: .75rem .875rem
	}

	.xun-shop-single-price {
		align-items: center;
		gap: .4rem
	}

	.xun-shop-price-current {
		font-size: 1.4rem
	}

	.xun-shop-price-original {
		font-size: .8125rem
	}

	.xun-shop-points-price,
	.xun-shop-discount-countdown,
	.xun-shop-sku-tip {
		min-height: 1.6rem;
		font-size: .71875rem
	}

	.xun-shop-sku-options {
		gap: .375rem
	}

	.xun-shop-sku-option {
		gap: .5rem;
		padding: .35rem .625rem
	}

	.xun-shop-sku-option-media {
		width: 2rem;
		height: 2rem
	}

	.xun-shop-sku-extra-list {
		gap: .35rem;
		margin-top: .5rem
	}

	.xun-shop-single-actions {
		flex-flow: wrap;
		align-items: stretch;
		gap: .5rem
	}

	.xun-shop-single-actions>* {
		flex: none
	}

	.xun-shop-single-actions .btn {
		box-sizing: border-box;
		width: auto;
		min-height: 2.625rem;
		padding: .625rem .875rem;
		line-height: 1.2
	}

	.xun-shop-action-btn--favorite {
		flex: 1 0 100%;
		justify-content: center;
		width: 100%
	}

	.xun-shop-action-btn--cart {
		flex: 1 1 0;
		min-width: 0
	}

	.xun-shop-action-btn--buy-now {
		white-space: nowrap;
		flex: none;
		min-width: 5rem;
		padding-inline: .95rem
	}

	.xun-shop-action-btn--cart.is-hidden+.xun-shop-action-btn--buy-now {
		flex: 100%;
		justify-content: center;
		width: 100%
	}

	.xun-shop-buy-btn {
		min-height: 2.125rem;
		padding-inline: .75rem;
		font-size: .8125rem
	}

	.xun-shop-buy-label--default {
		display: none
	}

	.xun-shop-buy-label--compact {
		display: inline
	}

	.xun-shop-detail-panels {
		padding: 0
	}

	.xun-shop-detail-tab {
		min-height: auto;
		padding: .75rem 1rem;
		font-size: .875rem
	}

	.xun-shop-checkout-header {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-shop-checkout-shipping-head {
		flex-direction: column
	}

	.xun-shop-checkout-action-btn {
		align-self: flex-start
	}

	.xun-shop-checkout-form-grid {
		grid-template-columns: 1fr
	}

	.xun-shop-product-attributes-wrap {
		margin-top: .625rem;
		padding-left: 1.55rem;
		padding-right: 1.55rem
	}

	.xun-shop-product-attribute {
		min-width: 88px;
		min-height: 54px;
		padding: .55rem .5rem
	}

	.xun-shop-product-attribute-slide:not(:last-child) .xun-shop-product-attribute:after {
		height: 1.45rem
	}

	.xun-shop-product-attribute-label {
		white-space: normal;
		font-size: .6875rem
	}

	.xun-shop-product-attribute-value {
		font-size: .8125rem
	}

	.xun-shop-product-attributes-nav {
		width: 1.6rem;
		height: 1.6rem;
		margin-top: -.8rem
	}

	.xun-shop-gallery-nav {
		width: 1.75rem;
		height: 1.75rem;
		margin-top: 0
	}

	.xun-shop-checkout-action-btn {
		justify-content: center;
		width: 100%
	}
}

.xun-avatar-modal {
	max-width: 520px;
	animation: avatarModalFadeIn .25s var(--ease-smooth)
}

.xun-avatar-modal.closing {
	animation: avatarModalFadeOut .2s var(--ease-smooth)forwards
}

@keyframes avatarModalFadeIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%)
	}
}

@keyframes avatarModalFadeOut {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%)
	}

	to {
		opacity: 0;
		transform: translate(-50%, -50%)
	}
}

.xun-avatar-modal .modal-body {
	padding: 0
}

.xun-avatar-step {
	padding: 1.5rem
}

.xun-avatar-step-upload {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 280px;
	display: flex
}

.xun-avatar-upload-area {
	border: 2px dashed var(--color-border);
	border-radius: var(--xun-radius-lg, 12px);
	background: var(--color-fill-quaternary);
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 240px;
	padding: 2rem;
	transition: all .2s;
	display: flex
}

.xun-avatar-upload-area:hover {
	border-color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-avatar-upload-area.is-dragover {
	border-color: var(--xun-primary);
	background: var(--color-primary-bg);
	transform: scale(1.02)
}

.xun-avatar-upload-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1rem
}

.xun-avatar-upload-area:hover .xun-avatar-upload-icon {
	color: var(--xun-primary)
}

.xun-avatar-upload-text {
	color: var(--color-text-secondary);
	margin: 0 0 .5rem;
	font-size: .9375rem;
	font-weight: 500
}

.xun-avatar-upload-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .8125rem
}

.xun-avatar-upload-progress {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 240px;
	padding: 2rem;
	display: flex
}

.xun-avatar-upload-progress-bar {
	background: var(--color-fill-tertiary);
	border-radius: 2px;
	width: 200px;
	height: 4px;
	margin-bottom: 1rem;
	overflow: hidden
}

.xun-avatar-upload-progress-fill {
	background: var(--xun-primary);
	border-radius: 2px;
	width: 0;
	height: 100%;
	animation: 1.5s ease-in-out infinite avatarProgressIndeterminate
}

@keyframes avatarProgressIndeterminate {
	0% {
		width: 0;
		margin-left: 0
	}

	50% {
		width: 70%;
		margin-left: 15%
	}

	to {
		width: 0;
		margin-left: 100%
	}
}

.xun-avatar-upload-progress-text {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-avatar-step-crop {
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	min-height: 450px;
	padding: 1.5rem;
	display: flex
}

.xun-avatar-crop-container {
	justify-content: center;
	width: 100%;
	display: flex
}

.xun-avatar-crop-wrapper {
	border-radius: var(--xun-radius, 8px);
	background: #1a1a1a;
	display: inline-block;
	position: relative;
	overflow: visible
}

.xun-avatar-crop-wrapper img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	display: block
}

.xun-avatar-crop-box {
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden
}

.xun-avatar-crop-selection {
	cursor: move;
	pointer-events: auto;
	touch-action: none;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 8px;
	transition: border-color .15s;
	position: absolute;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6)
}

.xun-avatar-crop-selection:hover,
.xun-avatar-crop-selection.is-dragging,
.xun-avatar-crop-selection.is-resizing {
	border-color: var(--xun-primary, #3b82f6)
}

.xun-avatar-crop-resize {
	border: 2px solid var(--xun-primary, #3b82f6);
	cursor: se-resize;
	pointer-events: auto;
	z-index: 10;
	background: #fff;
	border-radius: 3px;
	width: 14px;
	height: 14px;
	transition: transform .15s, box-shadow .15s;
	position: absolute;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3)
}

.xun-avatar-crop-resize:hover {
	transform: scale(1.15);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .4)
}

.xun-avatar-crop-resize-se {
	bottom: 0;
	right: 0;
	transform: translate(50%, 50%)
}

.xun-avatar-crop-resize-se:hover {
	transform: translate(50%, 50%)scale(1.15)
}

.xun-avatar-crop-resize:before,
.xun-avatar-crop-resize:after {
	content: none
}

.xun-avatar-crop-preview {
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	display: flex
}

.xun-avatar-crop-preview-label {
	color: var(--color-text-tertiary);
	order: 1;
	margin: 0;
	font-size: .8125rem
}

.xun-avatar-crop-preview-box {
	background: var(--color-fill-quaternary);
	border: 2px solid var(--color-border);
	border-radius: 50%;
	order: 0;
	width: 80px;
	height: 80px;
	position: relative;
	overflow: hidden
}

.xun-avatar-crop-preview-box img {
	pointer-events: none;
	max-width: none;
	display: block
}

.xun-avatar-modal .modal-footer .btn,
#xun-avatar-save-btn {
	min-width: 100px
}

#xun-avatar-save-btn .btn-loading-content {
	align-items: center;
	gap: .5rem;
	display: none
}

#xun-avatar-save-btn .btn-loading-content svg {
	flex-shrink: 0
}

#xun-avatar-save-btn.btn-loading {
	pointer-events: none
}

#xun-avatar-save-btn.btn-loading .btn-label {
	display: none
}

#xun-avatar-save-btn.btn-loading .btn-loading-content {
	display: inline-flex
}

@media(max-width:768px) {
	.xun-avatar-modal {
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem)
	}

	.xun-avatar-step-crop {
		flex-direction: column;
		gap: 1rem
	}

	.xun-avatar-crop-preview {
		flex-direction: row;
		justify-content: center
	}

	.xun-avatar-crop-preview-box {
		width: 60px;
		height: 60px
	}

	.xun-avatar-upload-area {
		min-height: 200px;
		padding: 1.5rem
	}

	.xun-avatar-upload-icon svg {
		width: 40px;
		height: 40px
	}

	.xun-avatar-upload-text {
		font-size: .875rem
	}

	.xun-avatar-upload-hint {
		font-size: .75rem
	}
}

@media(max-width:480px) {

	.xun-avatar-step,
	.xun-avatar-modal .modal-footer {
		padding: 1rem
	}

	.xun-avatar-modal .modal-footer .btn {
		flex: 1
	}

	.xun-avatar-crop-wrapper {
		max-height: 300px
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-avatar-upload-area {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-avatar-upload-area:hover,
	:root:not(.light) .xun-avatar-upload-area.is-dragover {
		border-color: var(--xun-primary);
		background: rgba(22, 119, 255, .1)
	}

	:root:not(.light) .xun-avatar-crop-wrapper {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-avatar-crop-preview-box {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-avatar-upload-progress-bar {
		background: var(--color-fill-secondary)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {

		:root:not(.light) .xun-avatar-upload-area:hover,
		:root:not(.light) .xun-avatar-upload-area.is-dragover {
			background: var(--xun-primary, #1677ff)
		}

		@supports (color:color-mix(in lab, red, red)) {

			:root:not(.light) .xun-avatar-upload-area:hover,
			:root:not(.light) .xun-avatar-upload-area.is-dragover {
				background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, transparent)
			}
		}
	}
}

.dark .xun-avatar-upload-area {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-avatar-upload-area:hover,
.dark .xun-avatar-upload-area.is-dragover {
	border-color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

.dark .xun-avatar-crop-wrapper {
	background: var(--color-fill-secondary)
}

.dark .xun-avatar-crop-preview-box {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-avatar-upload-progress-bar {
	background: var(--color-fill-secondary)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {

	.dark .xun-avatar-upload-area:hover,
	.dark .xun-avatar-upload-area.is-dragover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {

		.dark .xun-avatar-upload-area:hover,
		.dark .xun-avatar-upload-area.is-dragover {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)10%, transparent)
		}
	}
}

.xun-language-switcher {
	align-items: center;
	display: inline-flex;
	position: relative
}

.xun-language-btn {
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: .5rem;
	align-items: center;
	gap: .375rem;
	padding: .5rem .75rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-language-btn:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-language-btn:focus {
	outline: none
}

.xun-language-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--color-primary-border)
}

.xun-language-btn .xun-language-icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem
}

.xun-language-btn .xun-language-arrow {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	transition: transform .2s
}

.xun-language-switcher.is-open .xun-language-arrow {
	transform: rotate(180deg)
}

.xun-language-btn.is-loading {
	pointer-events: none;
	opacity: .7
}

.xun-language-btn.is-loading .xun-language-icon {
	animation: 1s linear infinite xun-spin
}

.xun-language-dropdown {
	z-index: 100;
	background-color: var(--color-bg-container);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--color-border-secondary);
	min-width: 10rem;
	box-shadow: var(--shadow-modal);
	opacity: 0;
	visibility: hidden;
	border-radius: .75rem;
	padding: .5rem;
	transition: all .2s;
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	transform: translateY(-.5rem)
}

.xun-language-switcher.is-open .xun-language-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-language-dropdown {
		background-color: rgba(255, 255, 255, .95)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-language-dropdown {
			background-color: color-mix(in srgb, var(--color-bg-container)95%, transparent)
		}
	}
}

.xun-language-item {
	width: 100%;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: .5rem;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	padding: .625rem .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .15s;
	display: flex
}

.xun-language-item:hover {
	color: var(--color-text);
	background: var(--color-fill-tertiary)
}

.xun-language-item.is-active {
	color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-language-name {
	white-space: nowrap;
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-language-flag {
	object-fit: cover;
	border-radius: .25rem;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1rem;
	line-height: 1;
	display: inline-flex
}

.xun-language-code {
	text-transform: uppercase;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-language-check {
	width: 1rem;
	height: 1rem;
	color: var(--xun-primary, var(--color-primary));
	flex-shrink: 0
}

.xun-translate-indicator {
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translate(-50%)translateY(1rem)
}

.xun-translate-indicator.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%)translateY(0)
}

.xun-translate-indicator-content {
	color: var(--color-text);
	background-color: var(--color-bg-container);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--color-border-secondary);
	box-shadow: var(--shadow-modal);
	border-radius: 2rem;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-translate-spinner {
	color: var(--xun-primary, var(--color-primary))
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-translate-indicator-content {
		background-color: rgba(255, 255, 255, .95)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-translate-indicator-content {
			background-color: color-mix(in srgb, var(--color-bg-container)95%, transparent)
		}
	}
}

.xun-translated {
	position: relative
}

.xun-translated:after {
	content: "";
	background: var(--color-primary-border);
	opacity: 0;
	border-radius: 1px;
	width: 2px;
	transition: opacity .2s;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -.5rem
}

.xun-translated:hover:after {
	opacity: 1
}

@media(max-width:768px) {
	.xun-language-btn {
		padding: .5rem
	}

	.xun-language-btn .xun-language-text,
	.xun-language-btn .xun-language-arrow {
		display: none
	}

	.xun-language-dropdown {
		min-width: 9rem;
		right: -.5rem
	}

	.xun-translate-indicator {
		bottom: 5rem
	}
}

.xun-language-item.is-active .xun-language-code {
	color: var(--xun-primary, var(--color-primary))
}

.xun-pay-modal {
	z-index: 9999;
	justify-content: center;
	align-items: center;
	animation: .3s xun-pay-fade-in;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-pay-modal--closing {
	animation: .3s forwards xun-pay-fade-out
}

.xun-pay-modal__overlay {
	z-index: auto;
	animation: none;
	position: absolute
}

.bottom-sheet-open .xun-pay-modal {
	z-index: 10000
}

.bottom-sheet-open .xun-pay-modal .xun-pay-modal__overlay {
	z-index: 1
}

.bottom-sheet-open .xun-pay-modal .xun-pay-modal__content {
	z-index: 2
}

.xun-pay-modal__content {
	background-color: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	width: 90%;
	max-width: 400px;
	box-shadow: var(--shadow-modal);
	animation: .3s xun-pay-slide-up;
	position: relative;
	overflow: hidden
}

.xun-pay-modal--closing .xun-pay-modal__content {
	animation: .3s forwards xun-pay-slide-down
}

.xun-pay-modal__header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	display: flex
}

.xun-pay-modal__title {
	color: var(--color-text);
	margin: 0;
	font-size: 18px;
	font-weight: 600
}

.xun-pay-modal__close {
	width: 2rem;
	height: 2rem;
	color: var(--color-text-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-pay-modal__close:hover {
	color: var(--color-text);
	background-color: var(--color-fill-tertiary)
}

.xun-pay-modal__body {
	text-align: center;
	padding: 32px 20px
}

.xun-pay-qrcode {
	background-color: rgba(0, 0, 0, 0);
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	padding: 0;
	display: inline-flex
}

.xun-pay-qrcode img,
.xun-pay-qrcode canvas {
	max-width: 100%;
	max-height: 100%
}

.xun-pay-modal__tip {
	color: var(--color-text);
	margin: 20px 0 8px;
	font-size: 14px
}

.xun-pay-modal__order {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: 12px
}

.xun-pay-modal__footer {
	border-top: 1px solid var(--color-border);
	gap: 12px;
	padding: 16px 20px;
	display: flex
}

.xun-pay-modal__btn {
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	flex: 1;
	justify-content: center;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .2s, color .2s;
	display: inline-flex
}

.xun-pay-modal__btn--cancel {
	background-color: var(--color-fill-tertiary);
	color: var(--color-text-secondary)
}

.xun-pay-modal__btn--cancel:hover {
	background-color: var(--color-fill-secondary)
}

.xun-pay-modal__btn--confirm {
	background-color: var(--xun-primary, var(--color-primary));
	color: #fff
}

.xun-pay-modal__btn--confirm:hover {
	background-color: var(--xun-primary-hover, var(--color-primary-active))
}

.xun-pay-methods {
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	display: grid
}

.xun-pay-method {
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	transition: border-color .2s, background-color .2s;
	display: flex;
	position: relative
}

.xun-pay-method:hover {
	border-color: var(--color-primary-border);
	background-color: var(--color-fill-quaternary)
}

.xun-pay-method--active {
	border-color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg)
}

.xun-pay-method__icon {
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	display: flex
}

.xun-pay-method__icon svg {
	width: 24px;
	height: 24px
}

.xun-pay-method__icon img {
	object-fit: contain;
	width: 24px;
	height: 24px
}

.xun-pay-method__info {
	flex-direction: column;
	flex: 1;
	gap: 2px;
	min-width: 0;
	display: flex
}

.xun-pay-method__title {
	color: var(--color-text);
	white-space: nowrap;
	margin: 0;
	font-size: 14px;
	font-weight: 500
}

.xun-pay-method__desc {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: 12px;
	overflow: hidden
}

.xun-pay-method__balance {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	margin: 0;
	font-size: 12px;
	font-weight: 400
}

.xun-pay-method__balance--insufficient {
	color: var(--color-error)
}

.xun-pay-method__check {
	display: none
}

.xun-pay-method--disabled {
	opacity: .6;
	cursor: not-allowed;
	pointer-events: none
}

.xun-pay-method--disabled:hover {
	border-color: var(--color-border);
	background-color: var(--color-bg-container)
}

.xun-pay-order {
	background-color: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-card);
	padding: 20px
}

.xun-pay-order__header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 16px;
	display: flex
}

.xun-pay-order__title {
	color: var(--color-text);
	margin: 0;
	font-size: 16px;
	font-weight: 600
}

.xun-pay-order__status {
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500
}

.xun-pay-order__status--pending {
	background-color: var(--color-warning-bg);
	color: var(--color-warning)
}

.xun-pay-order__status--paid {
	background-color: var(--color-success-bg);
	color: var(--color-success)
}

.xun-pay-order__status--completed {
	background-color: var(--color-primary-bg);
	color: var(--color-primary)
}

.xun-pay-order__status--cancelled {
	background-color: var(--color-fill-tertiary);
	color: var(--color-text-tertiary)
}

.xun-pay-order__status--refunded {
	background-color: var(--color-error-bg);
	color: var(--color-error)
}

.xun-pay-order__row {
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	display: flex
}

.xun-pay-order__label {
	color: var(--color-text-tertiary);
	font-size: 14px
}

.xun-pay-order__value {
	color: var(--color-text);
	font-size: 14px
}

.xun-pay-order__amount {
	color: var(--color-error);
	font-size: 24px;
	font-weight: 600
}

.xun-pay-order__amount:before {
	content: "¥";
	margin-right: 2px;
	font-size: 16px
}

.xun-pay-order__original {
	color: var(--color-text-tertiary);
	margin-left: 8px;
	font-size: 14px;
	font-weight: 400;
	text-decoration: line-through
}

.xun-pay-btn {
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	display: inline-flex
}

.xun-pay-btn:hover {
	background-color: var(--xun-primary-hover, var(--color-primary-active))
}

.xun-pay-btn:active {
	background-color: var(--xun-primary-active, oklch(43% .19 264))
}

.xun-pay-btn:disabled {
	opacity: .5;
	cursor: not-allowed
}

.xun-pay-btn--loading {
	pointer-events: none
}

.xun-pay-btn__spinner {
	border: 2px solid #ffffff4d;
	border-top-color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	animation: .8s linear infinite xun-pay-spin
}

@keyframes xun-pay-fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes xun-pay-fade-out {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes xun-pay-slide-up {
	0% {
		opacity: 0;
		transform: translateY(20px)scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

@keyframes xun-pay-slide-down {
	0% {
		opacity: 1;
		transform: translateY(0)scale(1)
	}

	to {
		opacity: 0;
		transform: translateY(20px)scale(.95)
	}
}

@keyframes xun-pay-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media(max-width:480px) {
	.xun-pay-modal__content {
		width: 95%;
		max-width: none;
		margin: 0 10px
	}

	.xun-pay-qrcode {
		width: 160px;
		height: 160px
	}

	.xun-pay-modal__footer {
		flex-direction: column
	}

	.xun-pay-modal__btn {
		width: 100%
	}
}

.xun-pay-modal__content--checkout {
	max-width: 420px
}

.xun-pay-modal__content--checkout .xun-pay-modal__body {
	text-align: left;
	padding: 20px
}

.xun-pay-checkout__product {
	background-color: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding: 16px;
	display: flex
}

.xun-pay-checkout__product-icon {
	background: linear-gradient(135deg, var(--xun-primary, var(--color-primary)), var(--xun-primary-hover, var(--color-primary-active)));
	border-radius: var(--xun-radius, 8px);
	color: #fff;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	display: flex
}

.xun-pay-checkout__product-icon svg {
	width: 28px;
	height: 28px
}

.xun-pay-checkout__product-info {
	flex: 1;
	min-width: 0
}

.xun-pay-checkout__product-name {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	overflow: hidden
}

.xun-pay-checkout__product-desc {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: 13px;
	overflow: hidden
}

.xun-pay-checkout__price {
	background-color: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	margin-bottom: 20px;
	padding: 16px
}

.xun-pay-checkout__price-row {
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	display: flex
}

.xun-pay-checkout__price-row:first-child {
	padding-top: 0
}

.xun-pay-checkout__price-row:last-child {
	padding-bottom: 0
}

.xun-pay-checkout__price-row--discount {
	color: var(--color-success)
}

.xun-pay-checkout__price-row--total {
	border-top: 1px dashed var(--color-border);
	margin-top: 8px;
	padding-top: 12px
}

.xun-pay-checkout__price-label {
	color: var(--color-text-secondary);
	font-size: 14px
}

.xun-pay-checkout__price-value {
	color: var(--color-text);
	font-size: 14px
}

.xun-pay-checkout__price-value--discount {
	color: var(--color-success)
}

.xun-pay-checkout__price-value--total {
	color: var(--color-error);
	font-size: 20px;
	font-weight: 600
}

.xun-pay-checkout__coupon {
	margin-bottom: 20px
}

.xun-pay-checkout__coupon-header {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	display: flex
}

.xun-pay-checkout__coupon-label {
	color: var(--color-text);
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	display: flex
}

.xun-pay-checkout__coupon-label svg {
	color: var(--color-warning)
}

.xun-pay-checkout__coupon-count {
	color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg);
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 500
}

.xun-coupon-picker {
	z-index: 10;
	position: relative
}

.xun-coupon-picker__trigger {
	width: 100%;
	height: 44px;
	color: var(--color-text);
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	padding: 0 14px;
	font-size: 14px;
	transition: all .2s;
	display: flex
}

.xun-coupon-picker__trigger:hover {
	border-color: var(--color-primary-border);
	background-color: var(--color-fill-quaternary)
}

.xun-coupon-picker.is-open .xun-coupon-picker__trigger {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-coupon-picker__placeholder {
	color: var(--color-text-tertiary)
}

.xun-coupon-picker__trigger.has-value .xun-coupon-picker__placeholder {
	color: var(--color-text)
}

.xun-coupon-picker__arrow {
	width: 20px;
	height: 20px;
	color: var(--color-text-tertiary);
	justify-content: center;
	align-items: center;
	transition: transform .25s;
	display: flex
}

.xun-coupon-picker.is-open .xun-coupon-picker__arrow {
	transform: rotate(180deg)
}

.xun-coupon-picker__dropdown {
	z-index: 1000;
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	max-height: 240px;
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transform-origin: bottom;
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	right: 0;
	overflow: hidden auto;
	transform: translateY(10px)scale(.98)
}

.xun-coupon-picker.is-open .xun-coupon-picker__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)scale(1)
}

.xun-coupon-picker__loading {
	color: var(--color-text-tertiary);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 40px 16px;
	font-size: 13px;
	display: flex
}

.xun-coupon-picker__loading svg {
	color: var(--xun-primary, var(--color-primary))
}

.xun-coupon-picker__list {
	padding: 8px
}

.xun-coupon-picker__item {
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary);
	align-items: center;
	margin-bottom: 6px;
	padding: 10px 12px;
	transition: all .2s;
	display: flex;
	position: relative
}

.xun-coupon-picker__item:last-child {
	margin-bottom: 0
}

.xun-coupon-picker__item:hover {
	border-color: var(--color-primary-border);
	background-color: var(--color-fill-quaternary)
}

.xun-coupon-picker__item.is-selected {
	border-color: var(--xun-primary, var(--color-primary));
	background: var(--color-primary-bg)
}

.xun-coupon-picker__item--none {
	background: var(--color-fill-quaternary);
	border: 1px dashed var(--color-border);
	margin-bottom: 8px
}

.xun-coupon-picker__item--none:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-border)
}

.xun-coupon-picker__item--none.is-selected {
	background: var(--color-primary-bg);
	border-color: var(--xun-primary, var(--color-primary));
	border-style: solid
}

.xun-coupon-picker__item--none .xun-coupon-picker__item-title {
	color: var(--color-text-secondary);
	font-weight: 400
}

.xun-coupon-picker__item-icon {
	width: 16px;
	height: 16px;
	color: var(--color-error);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	display: flex
}

.xun-coupon-picker__item-icon svg {
	width: 14px;
	height: 14px
}

.xun-coupon-picker__item--none .xun-coupon-picker__item-icon {
	display: none
}

.xun-coupon-picker__item-content {
	flex-direction: column;
	flex: 1;
	gap: 2px;
	min-width: 0;
	display: flex
}

.xun-coupon-picker__item-title {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	font-weight: 500;
	display: block;
	overflow: hidden
}

.xun-coupon-picker__item-desc {
	align-items: center;
	gap: 8px;
	font-size: 12px;
	display: flex
}

.xun-coupon-picker__item-discount {
	color: var(--color-error);
	font-weight: 500
}

.xun-coupon-picker__item-expire {
	color: var(--color-text-quaternary);
	font-size: 11px
}

.xun-coupon-picker__item-check {
	width: 16px;
	height: 16px;
	color: var(--xun-primary, var(--color-primary));
	opacity: 0;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	margin-left: 8px;
	transition: opacity .2s, transform .2s;
	display: flex;
	transform: scale(.8)
}

.xun-coupon-picker__item.is-selected .xun-coupon-picker__item-check {
	opacity: 1;
	transform: scale(1)
}

.xun-coupon-picker__empty {
	color: var(--color-text-quaternary);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 48px 16px;
	font-size: 13px;
	display: flex
}

.xun-coupon-picker__empty svg {
	opacity: .4
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-coupon-picker__item {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-coupon-picker__item:hover {
		background: var(--color-fill-tertiary);
		border-color: var(--color-primary-border)
	}

	:root:not(.light) .xun-coupon-picker__item.is-selected {
		background: var(--color-primary-bg);
		border-color: var(--xun-primary, var(--color-primary))
	}

	:root:not(.light) .xun-coupon-picker__item--none {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) .xun-coupon-picker__item--none:hover {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-coupon-picker__item {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border)
}

.dark .xun-coupon-picker__item:hover {
	background: var(--color-fill-tertiary);
	border-color: var(--color-primary-border)
}

.dark .xun-coupon-picker__item.is-selected {
	background: var(--color-primary-bg);
	border-color: var(--xun-primary, var(--color-primary))
}

.dark .xun-coupon-picker__item--none {
	background: var(--color-fill-tertiary)
}

.dark .xun-coupon-picker__item--none:hover {
	background: var(--color-fill-secondary)
}

@media(max-width:480px) {
	.xun-coupon-picker__item {
		padding: 12px 14px
	}

	.xun-coupon-picker__item-title {
		font-size: 13px
	}

	.xun-coupon-picker__item-desc {
		gap: 8px;
		font-size: 12px
	}

	.xun-coupon-picker__item-expire {
		font-size: 11px
	}

	.xun-coupon-picker__item-check {
		width: 18px;
		height: 18px;
		margin-left: 8px
	}
}

.xun-pay-checkout__coupon-selected {
	background-color: var(--color-success-bg);
	border: 1px solid var(--color-success-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	padding: 10px 12px;
	display: flex
}

.xun-pay-checkout__coupon-selected-info {
	align-items: center;
	gap: 12px;
	display: flex
}

.xun-pay-checkout__coupon-selected-discount {
	color: var(--color-success);
	font-size: 13px;
	font-weight: 500
}

.xun-pay-checkout__coupon-selected-expire {
	color: var(--color-text-tertiary);
	font-size: 12px
}

.xun-pay-checkout__coupon-selected-remove {
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-pay-checkout__coupon-selected-remove:hover {
	color: var(--color-error);
	background-color: var(--color-error-bg)
}

.xun-pay-checkout__coupon-toggle {
	color: var(--xun-primary, var(--color-primary));
	cursor: pointer;
	background: 0 0;
	border: none;
	align-items: center;
	gap: 4px;
	padding: 0;
	font-size: 13px;
	transition: color .2s;
	display: flex
}

.xun-pay-checkout__coupon-toggle:hover {
	color: var(--xun-primary-hover, var(--color-primary-active))
}

.xun-pay-checkout__coupon-toggle svg {
	transition: transform .2s
}

.xun-pay-checkout__coupon-toggle.is-open svg {
	transform: rotate(180deg)
}

.xun-pay-checkout__coupon-input {
	gap: 8px;
	margin-bottom: 8px;
	display: flex
}

.xun-pay-checkout__coupon-field {
	height: 40px;
	color: var(--color-text);
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	outline: none;
	flex: 1;
	padding: 0 12px;
	font-size: 14px;
	transition: border-color .2s
}

.xun-pay-checkout__coupon-field:focus {
	border-color: var(--xun-primary, var(--color-primary))
}

.xun-pay-checkout__coupon-field::placeholder {
	color: var(--color-text-quaternary)
}

.xun-pay-checkout__coupon-apply {
	height: 40px;
	color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	border: none;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .2s
}

.xun-pay-checkout__coupon-apply:hover {
	background-color: var(--color-primary-bg-hover)
}

.xun-pay-checkout__coupon-apply:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-pay-checkout__coupon-result {
	background-color: var(--color-success-bg);
	border: 1px solid var(--color-success-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	display: flex
}

.xun-pay-checkout__coupon-success {
	color: var(--color-success);
	font-size: 13px
}

.xun-pay-checkout__coupon-remove {
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-pay-checkout__coupon-remove:hover {
	color: var(--color-error);
	background-color: var(--color-error-bg)
}

.xun-pay-checkout__coupon-error {
	color: var(--color-error);
	margin: 8px 0 0;
	font-size: 12px
}

.xun-pay-checkout__methods {
	margin-bottom: 0
}

.xun-pay-checkout__methods-title {
	color: var(--color-text);
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 500
}

.xun-pay-checkout__no-methods {
	text-align: center;
	color: var(--color-text-tertiary);
	padding: 24px
}

.xun-pay-method__radio {
	opacity: 0;
	pointer-events: none;
	position: absolute
}

.xun-pay-checkout__methods .xun-pay-method__info {
	flex-direction: column;
	gap: 2px;
	display: flex
}

.xun-pay-checkout__methods .xun-pay-method__title,
.xun-pay-checkout__methods .xun-pay-method__desc {
	margin: 0;
	display: block
}

.xun-pay-modal__content--checkout .xun-pay-modal__footer {
	padding: 16px 20px
}

.xun-pay-btn__text {
	font-size: 14px
}

.xun-pay-btn__amount {
	font-size: 14px;
	font-weight: 600
}

.xun-pay-modal__amount {
	color: var(--color-text-tertiary);
	margin: 8px 0 0;
	font-size: 13px
}

.xun-pay-modal__amount-value {
	color: var(--color-error);
	font-size: 16px;
	font-weight: 600
}

@media(max-width:480px) {
	.xun-pay-modal__content--checkout {
		width: 95%;
		max-width: none
	}

	.xun-pay-checkout__product {
		gap: 12px;
		padding: 12px
	}

	.xun-pay-checkout__product-icon {
		width: 48px;
		height: 48px
	}

	.xun-pay-checkout__product-icon svg {
		width: 24px;
		height: 24px
	}

	.xun-pay-checkout__product-name {
		font-size: 15px
	}

	.xun-pay-checkout__price {
		padding: 12px
	}

	.xun-pay-checkout__price-value--total {
		font-size: 18px
	}

	.xun-pay-methods {
		gap: 8px
	}

	.xun-pay-method {
		gap: 6px;
		padding: 8px 12px
	}

	.xun-pay-method__icon,
	.xun-pay-method__icon svg {
		width: 20px;
		height: 20px
	}

	.xun-pay-method__title {
		font-size: 13px
	}

	.xun-pay-method__balance {
		font-size: 10px
	}
}

.xun-pay-loading-modal {
	z-index: 10000;
	justify-content: center;
	align-items: center;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-pay-loading-modal .xun-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-pay-loading-content {
	z-index: 1;
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 3rem;
	display: flex;
	position: relative
}

.xun-pay-loading-spinner {
	width: 40px;
	height: 40px;
	color: var(--xun-primary, var(--color-primary))
}

.xun-pay-loading-text {
	color: var(--color-text-secondary);
	font-size: .9375rem
}

.xun-balance-recharge-modal {
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	justify-content: center;
	align-items: center;
	transition: opacity .3s, visibility .3s;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-balance-recharge-modal.is-active {
	opacity: 1;
	visibility: visible
}

.xun-balance-recharge-modal.is-closing {
	opacity: 0;
	visibility: hidden
}

.xun-balance-recharge-modal__overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-balance-recharge-modal__container {
	z-index: 1;
	background-color: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	width: 90%;
	max-width: 420px;
	box-shadow: var(--shadow-modal);
	transition: transform .3s;
	position: relative;
	overflow: hidden;
	transform: translateY(20px)scale(.95)
}

.xun-balance-recharge-modal.is-active .xun-balance-recharge-modal__container {
	transform: translateY(0)scale(1)
}

.xun-balance-recharge-modal.is-closing .xun-balance-recharge-modal__container {
	transform: translateY(20px)scale(.95)
}

.xun-balance-recharge-modal .modal-body {
	padding: 20px
}

.xun-balance-recharge-modal .modal-footer {
	gap: 12px
}

.xun-balance-recharge-modal .modal-footer .btn {
	flex: 1
}

.xun-balance-recharge-modal .modal-footer .btn-primary {
	flex: 2
}

.xun-balance-recharge__current {
	background-color: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding: 16px;
	display: flex
}

.xun-balance-recharge__current-label {
	color: var(--color-text-secondary);
	font-size: 14px
}

.xun-balance-recharge__current-value {
	color: var(--color-text);
	font-size: 20px;
	font-weight: 600
}

.xun-balance-recharge__currency {
	margin-right: 2px;
	font-size: 14px;
	font-weight: 500
}

.xun-balance-recharge__limit-info {
	background-color: var(--color-warning-bg);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	color: var(--color-warning-text, var(--color-warning));
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 12px;
	font-size: 13px;
	display: flex
}

.xun-balance-recharge__limit-info svg {
	color: var(--color-warning);
	flex-shrink: 0
}

.xun-balance-recharge__presets {
	margin-bottom: 16px
}

.xun-balance-recharge__label {
	color: var(--color-text);
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
	display: block
}

.xun-balance-recharge__preset-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	display: grid
}

.xun-balance-recharge__preset-btn {
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 12px 8px;
	transition: all .2s;
	display: flex
}

.xun-balance-recharge__preset-btn:hover {
	border-color: var(--color-primary-border);
	background-color: var(--color-fill-quaternary)
}

.xun-balance-recharge__preset-btn.is-active {
	border-color: var(--xun-primary, var(--color-primary));
	background-color: var(--color-primary-bg)
}

.xun-balance-recharge__preset-currency {
	color: var(--color-text-tertiary);
	font-size: 12px
}

.xun-balance-recharge__preset-amount {
	color: var(--color-text);
	font-size: 18px;
	font-weight: 600
}

.xun-balance-recharge__preset-btn.is-active .xun-balance-recharge__preset-currency,
.xun-balance-recharge__preset-btn.is-active .xun-balance-recharge__preset-amount {
	color: var(--xun-primary, var(--color-primary))
}

.xun-balance-recharge__custom {
	margin-bottom: 16px
}

.xun-balance-recharge__input-wrapper {
	align-items: center;
	display: flex;
	position: relative
}

.xun-balance-recharge__input-prefix {
	color: var(--color-text-secondary);
	pointer-events: none;
	font-size: 16px;
	font-weight: 500;
	position: absolute;
	left: 12px
}

.xun-balance-recharge__input {
	width: 100%;
	height: 48px;
	color: var(--color-text);
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	outline: none;
	padding: 0 12px 0 32px;
	font-size: 16px;
	transition: border-color .2s, box-shadow .2s
}

.xun-balance-recharge__input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-balance-recharge__input::placeholder {
	color: var(--color-text-quaternary);
	font-size: 14px
}

.xun-balance-recharge__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-balance-recharge__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

.xun-balance-recharge__input[type=number] {
	-moz-appearance: textfield
}

.xun-balance-recharge__input-hint {
	color: var(--color-text-tertiary);
	margin-top: 6px;
	font-size: 12px
}

.xun-balance-recharge__error {
	color: var(--color-error);
	background-color: var(--color-error-bg);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	margin-top: 8px;
	padding: 8px 12px;
	font-size: 13px;
	display: none
}

.xun-balance-recharge__preview {
	background-color: var(--color-success-bg);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	display: flex
}

.xun-balance-recharge__preview-label {
	color: var(--color-success-text, var(--color-success));
	font-size: 14px
}

.xun-balance-recharge__preview-value {
	color: var(--color-success);
	font-size: 20px;
	font-weight: 600
}

.xun-balance-recharge__submit {
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: flex
}

.xun-balance-recharge__submit-amount {
	font-weight: 600
}

@media(max-width:480px) {
	.xun-balance-recharge-modal__container {
		width: 95%;
		max-width: none
	}

	.xun-balance-recharge__preset-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-balance-recharge__preset-amount {
		font-size: 16px
	}

	.xun-balance-recharge-modal .modal-footer {
		flex-direction: column
	}

	.xun-balance-recharge-modal .modal-footer .btn {
		flex: none;
		width: 100%
	}
}

.xun-verification-badge {
	align-items: center;
	gap: .45rem;
	padding-right: .85rem;
	display: inline-flex
}

.xun-verification-badge__text {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1
}

.xun-verification-icon {
	color: #0f766e;
	flex-shrink: 0
}

.xun-verification-icon.is-company {
	color: #1d4ed8
}

.xun-user-hero .xun-verification-badge,
.xun-author-hero .xun-verification-badge {
	box-sizing: border-box;
	color: rgba(255, 255, 255, .96);
	white-space: nowrap;
	vertical-align: top;
	-webkit-backdrop-filter: blur(10px);
	background: linear-gradient(135deg, rgba(15, 23, 42, .3), rgba(15, 23, 42, .16));
	border: 1px solid #ffffff24;
	border-radius: 4px;
	align-items: center;
	gap: .38rem;
	height: 22px;
	margin: 0;
	padding: 0 10px 0 8px;
	line-height: 20px;
	display: inline-flex;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .18), inset 0 1px rgba(255, 255, 255, .06)
}

.xun-user-hero .xun-verification-badge__text,
.xun-author-hero .xun-verification-badge__text {
	letter-spacing: .01em;
	text-shadow: 0 1px 2px #0000002e;
	font-size: 11px;
	font-weight: 500;
	line-height: 1
}

.xun-user-hero .xun-verification-icon,
.xun-author-hero .xun-verification-icon {
	filter: drop-shadow(0 1px 1px #0f172a29);
	width: 14px;
	height: 14px
}

@supports (background:color-mix(in srgb, red 50%, blue)) {

	.xun-user-hero .xun-verification-badge,
	.xun-author-hero .xun-verification-badge {
		background: linear-gradient(135deg, rgba(15, 23, 42, .28), rgba(15, 23, 42, .14));
		border-color: rgba(255, 255, 255, .14)
	}
}

.xun-avatar-wrap {
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	position: relative
}

.xun-avatar-wrap img {
	display: block
}

.xun-avatar-verified-badge {
	z-index: 2;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	width: 1rem;
	height: 1rem;
	display: inline-flex;
	position: absolute;
	bottom: -.15rem;
	right: -.15rem;
	box-shadow: 0 6px 14px rgba(15, 23, 42, .16)
}

.xun-user-verification-page {
	gap: 1rem;
	display: grid
}

.xun-verification-overview {
	gap: 1rem;
	padding: 1.5rem;
	display: grid
}

.xun-verification-overview__head {
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	display: flex
}

.xun-verification-overview__title {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
	font-weight: 700
}

.xun-verification-overview__desc {
	color: var(--color-text-muted, #6b7280);
	margin: 0
}

.xun-verification-overview__meta {
	color: var(--color-text-muted, #6b7280);
	flex-wrap: wrap;
	gap: .75rem 1rem;
	font-size: .92rem;
	display: flex
}

.xun-verification-overview__note {
	color: #1e3a8a;
	background: rgba(59, 130, 246, .08);
	border-radius: .85rem;
	padding: .9rem 1rem
}

.xun-verification-status {
	border-radius: 999px;
	align-items: center;
	min-height: 2rem;
	padding: .35rem .85rem;
	font-size: .84rem;
	font-weight: 700;
	display: inline-flex
}

.xun-verification-status--none {
	color: #4b5563;
	background: #f3f4f6
}

.xun-verification-status--pending_payment {
	color: #1d4ed8;
	background: rgba(59, 130, 246, .12)
}

.xun-verification-status--pending {
	color: #b45309;
	background: rgba(245, 158, 11, .14)
}

.xun-verification-status--approved {
	color: #047857;
	background: rgba(16, 185, 129, .14)
}

.xun-verification-status--rejected {
	color: #b91c1c;
	background: rgba(239, 68, 68, .14)
}

.xun-verification-form {
	gap: 1.25rem;
	padding: 1.5rem;
	display: grid
}

.xun-verification-form__header {
	gap: .35rem;
	display: grid
}

.xun-verification-form__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700
}

.xun-verification-form__desc {
	color: var(--color-text-muted, #6b7280);
	margin: 0
}

.xun-verification-type-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	display: grid
}

.xun-verification-type-card {
	cursor: pointer;
	display: block;
	position: relative
}

.xun-verification-type-card input {
	opacity: 0;
	pointer-events: none;
	position: absolute
}

.xun-verification-type-card__body {
	border: 1px solid #94a3b847;
	border-radius: 1rem;
	gap: .35rem;
	padding: 1rem 1.1rem;
	transition: border-color .2s, background-color .2s;
	display: grid
}

.xun-verification-type-card.is-active .xun-verification-type-card__body {
	background: rgba(239, 246, 255, .4);
	border-color: rgba(29, 78, 216, .55)
}

.xun-verification-type-card__title {
	font-size: 1rem;
	font-weight: 700
}

.xun-verification-type-card__meta {
	color: var(--color-text-muted, #6b7280);
	font-size: .92rem
}

.xun-verification-field {
	gap: .5rem;
	display: grid
}

.xun-verification-form.is-locked .xun-verification-type-card {
	cursor: default
}

.xun-verification-form.is-locked .xun-verification-type-card__body {
	background: rgba(248, 250, 252, .9)
}

.xun-verification-form.is-locked .xun-profile-input {
	color: #94a3b8;
	cursor: not-allowed;
	background: rgba(248, 250, 252, .96);
	border-color: rgba(226, 232, 240, .95)
}

.xun-verification-credentials {
	background: rgba(248, 250, 252, .72);
	border: 1px solid #94a3b82e;
	border-radius: 1rem;
	gap: 1rem;
	padding: 1rem;
	display: none
}

.xun-verification-credentials.is-active {
	display: grid
}

.xun-verification-credentials__head h4 {
	margin: 0 0 .35rem;
	font-size: 1rem;
	font-weight: 700
}

.xun-verification-credentials__head p {
	color: var(--color-text-muted, #6b7280);
	margin: 0
}

.xun-verification-upload-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	display: grid
}

.xun-verification-upload {
	background: #fff;
	border: 1px dashed #94a3b880;
	border-radius: 1rem;
	gap: .55rem;
	padding: 1rem;
	display: grid
}

.xun-verification-upload__label {
	font-weight: 600
}

.xun-verification-upload__hint,
.xun-verification-upload__preview {
	color: var(--color-text-muted, #6b7280);
	font-size: .88rem
}

.xun-verification-upload__preview {
	color: var(--color-primary, #2563eb)
}

.xun-verification-empty-credential {
	color: var(--color-text-muted, #6b7280)
}

.xun-verification-form__footer {
	justify-content: flex-end;
	display: flex
}

@media(max-width:767px) {
	.xun-verification-overview__head {
		flex-direction: column
	}

	.xun-verification-type-grid,
	.xun-verification-upload-grid {
		grid-template-columns: 1fr
	}
}

.xun-rich-editor {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	flex-direction: column;
	width: 100%;
	transition: border-color .2s;
	display: flex;
	overflow: hidden
}

.xun-rich-editor:focus-within {
	border-color: var(--xun-primary)
}

.xun-rich-editor.has-error {
	border-color: var(--color-error)
}

.xun-editor-toolbar {
	background: var(--color-fill-quaternary);
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
	gap: .25rem;
	padding: .5rem .75rem;
	display: flex
}

.xun-editor-toolbar-row {
	flex-wrap: wrap;
	width: 100%;
	display: flex
}

.xun-editor-toolbar-row.is-secondary {
	border-top: 1px solid var(--color-border-secondary);
	margin-top: .375rem;
	padding-top: .375rem;
	display: none
}

.xun-editor-toolbar.is-expanded .xun-editor-toolbar-row.is-secondary {
	display: flex
}

.xun-editor-expand-btn {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	padding: 0;
	transition: all .15s;
	display: inline-flex
}

.xun-editor-expand-btn:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text-secondary)
}

.xun-editor-expand-btn svg {
	width: 16px;
	height: 16px;
	transition: transform .2s
}

.xun-editor-toolbar.is-expanded .xun-editor-expand-btn svg {
	transform: rotate(180deg)
}

.xun-editor-toolbar-group {
	border-right: 1px solid var(--color-border-secondary);
	gap: .125rem;
	margin-right: .25rem;
	padding-right: .5rem;
	display: flex
}

.xun-editor-toolbar-group:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0
}

.xun-editor-btn {
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .15s;
	display: inline-flex
}

.xun-editor-btn:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text)
}

.xun-editor-btn.is-active {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-editor-btn.is-active {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-editor-btn.is-active {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

.xun-editor-btn:disabled {
	opacity: .5;
	cursor: not-allowed
}

.xun-editor-btn svg {
	width: 18px;
	height: 18px
}

.xun-editor-select {
	position: relative
}

.xun-editor-select-btn {
	min-width: 80px;
	height: 32px;
	color: var(--color-text-secondary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	align-items: center;
	gap: .25rem;
	padding: 0 .5rem;
	font-size: .8125rem;
	transition: all .15s;
	display: inline-flex
}

.xun-editor-select-btn:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text)
}

.xun-editor-select-btn svg {
	width: 14px;
	height: 14px;
	margin-left: auto;
	transition: transform .2s
}

.xun-editor-select.is-open .xun-editor-select-btn svg {
	transform: rotate(180deg)
}

.xun-editor-select-dropdown {
	z-index: 100;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	min-width: 120px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	margin-top: 4px;
	padding: .375rem;
	transition: all .2s;
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateY(-8px)
}

.xun-editor-select.is-open .xun-editor-select-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.xun-editor-select-option {
	width: 100%;
	color: var(--color-text-secondary);
	text-align: left;
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	padding: .5rem .75rem;
	font-size: .875rem;
	transition: all .15s;
	display: block
}

.xun-editor-select-option:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text)
}

.xun-editor-select-option.is-active {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-editor-select-option.is-active {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-editor-select-option.is-active {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-editor-select-option[data-value=h2] {
	font-size: 1.25rem;
	font-weight: 600
}

.xun-editor-select-option[data-value=h3] {
	font-size: 1.125rem;
	font-weight: 600
}

.xun-editor-select-option[data-value=h4] {
	font-size: 1rem;
	font-weight: 600
}

.xun-editor-content {
	min-height: 400px;
	max-height: 600px;
	color: var(--color-text);
	outline: none;
	padding: 1.25rem;
	line-height: 1.75;
	overflow-y: auto
}

.xun-editor-content:empty:before {
	content: attr(data-placeholder);
	color: var(--color-text-quaternary);
	pointer-events: none
}

.xun-editor-content h1 {
	margin: 2rem 0 1rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-editor-content h1:first-child {
	margin-top: 0
}

.xun-editor-content h2 {
	margin: 1.5rem 0 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-editor-content h2:first-child {
	margin-top: 0
}

.xun-editor-content h3 {
	margin: 1.25rem 0 .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-editor-content h3:first-child {
	margin-top: 0
}

.xun-editor-content h4 {
	margin: 1rem 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-editor-content h4:first-child {
	margin-top: 0
}

.xun-editor-content h5 {
	margin: 1rem 0 .5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-editor-content h5:first-child {
	margin-top: 0
}

.xun-editor-content p {
	margin: 0 0 1rem
}

.xun-editor-content p:last-child {
	margin-bottom: 0
}

.xun-editor-content blockquote {
	border-left: 4px solid var(--xun-primary);
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: 0 var(--xun-radius, 8px)var(--xun-radius, 8px)0;
	margin: 1rem 0;
	padding: 1rem 1rem 1rem 1.25rem
}

.xun-editor-content blockquote p:last-child {
	margin-bottom: 0
}

.xun-editor-content pre {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius, 8px);
	font-family: var(--font-mono, monospace);
	white-space: pre-wrap;
	word-wrap: break-word;
	margin: 1rem 0;
	padding: 1rem;
	font-size: .875rem;
	line-height: 1.6;
	overflow-x: auto
}

.xun-editor-content code {
	background: var(--color-fill-tertiary);
	font-family: var(--font-mono, monospace);
	border-radius: 4px;
	padding: .125rem .375rem;
	font-size: .875em
}

.xun-editor-content pre code {
	background: 0 0;
	border-radius: 0;
	padding: 0
}

.xun-editor-content ul {
	margin: 1rem 0;
	padding-left: 1.5rem;
	list-style-type: disc
}

.xun-editor-content ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
	list-style-type: decimal
}

.xun-editor-content li {
	margin: .25rem 0;
	display: list-item
}

.xun-editor-content ul li {
	list-style-type: disc
}

.xun-editor-content ol li {
	list-style-type: decimal
}

.xun-editor-content a {
	color: var(--xun-primary);
	text-decoration: none
}

.xun-editor-content a:hover {
	text-decoration: underline
}

.xun-editor-content img {
	border-radius: var(--xun-radius, 8px);
	max-width: 100%;
	height: auto;
	margin: 1rem 0;
	display: block
}

.xun-editor-content hr {
	border: none;
	border-top: 2px solid var(--color-border);
	margin: 1.5rem 0
}

.xun-editor-modal-wrap {
	z-index: 1000;
	opacity: 0;
	justify-content: center;
	align-items: center;
	transition: opacity .2s;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-editor-modal-wrap.is-active {
	opacity: 1;
	display: flex
}

.xun-editor-modal-overlay {
	background-color: var(--color-bg-mask);
	-webkit-backdrop-filter: blur(4px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-editor-modal {
	z-index: 1;
	background-color: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	width: 90%;
	max-width: 400px;
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	transition: transform .2s;
	display: flex;
	position: relative;
	transform: scale(.95)translateY(-10px)
}

.xun-editor-modal-wrap.is-active .xun-editor-modal {
	transform: scale(1)translateY(0)
}

.xun-editor-modal-header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-editor-modal-header span {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: 600
}

.xun-editor-modal-close {
	width: 28px;
	height: 28px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-size: 1.25rem;
	transition: all .15s;
	display: flex
}

.xun-editor-modal-close:hover {
	background: var(--color-fill-tertiary);
	color: var(--color-text)
}

.xun-editor-modal-body {
	padding: 1.25rem
}

.xun-editor-modal-field {
	margin-bottom: 1rem
}

.xun-editor-modal-field:last-child {
	margin-bottom: 0
}

.xun-editor-modal-field label {
	color: var(--color-text-secondary);
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
	display: block
}

.xun-editor-modal-footer {
	border-top: 1px solid var(--color-border);
	justify-content: flex-end;
	gap: .75rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-editor-color-picker {
	z-index: 1001;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-lg);
	padding: .5rem
}

.xun-editor-color-grid {
	grid-template-columns: repeat(10, 1fr);
	gap: 2px;
	display: grid
}

.xun-editor-color-item {
	cursor: pointer;
	border: 1px solid #0000;
	border-radius: 2px;
	width: 20px;
	height: 20px;
	padding: 0;
	transition: all .15s
}

.xun-editor-color-item:hover {
	z-index: 1;
	transform: scale(1.2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.xun-editor-color-item[data-color="#ffffff"] {
	border-color: var(--color-border)
}

.xun-editor-content table,
.xun-editor-table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0
}

.xun-editor-content table td,
.xun-editor-content table th,
.xun-editor-table td,
.xun-editor-table th {
	border: 1px solid var(--color-border);
	min-width: 60px;
	padding: .5rem .75rem
}

.xun-editor-content table th,
.xun-editor-table th {
	background: var(--color-fill-quaternary);
	font-weight: 600
}

.xun-editor-content table td:focus,
.xun-editor-table td:focus {
	outline: 2px solid var(--xun-primary);
	outline-offset: -2px
}

.xun-editor-uploading {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	color: var(--color-text-secondary);
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	display: inline-flex
}

.xun-editor-uploading svg {
	animation: 1s linear infinite xunEditorSpin
}

@keyframes xunEditorSpin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.xun-editor-video {
	max-width: 100%;
	margin: 1rem auto;
	position: relative
}

.xun-editor-video iframe,
.xun-editor-video video {
	aspect-ratio: 16/9;
	border-radius: var(--xun-radius, 8px);
	background: var(--color-fill-quaternary);
	border: none;
	width: 100%
}

.xun-editor-video video {
	display: block
}

.xun-editor-input-with-suffix {
	align-items: center;
	display: flex
}

.xun-editor-input-with-suffix .input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	flex: 1
}

.xun-editor-input-suffix {
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: 0 var(--xun-radius, 8px)var(--xun-radius, 8px)0;
	height: 40px;
	color: var(--color-text-tertiary);
	border-left: none;
	justify-content: center;
	align-items: center;
	padding: 0 .75rem;
	font-size: .875rem;
	display: flex
}

.dark .xun-editor-input-suffix {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.xun-rich-editor.is-fullscreen {
	z-index: 9999;
	border-radius: 0;
	flex-direction: column;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-rich-editor.is-fullscreen .xun-editor-toolbar {
	border-radius: 0;
	flex-shrink: 0
}

.xun-rich-editor.is-fullscreen .xun-editor-content {
	border-radius: 0;
	flex: 1;
	max-height: none
}

body.xun-editor-fullscreen-active {
	overflow: hidden
}

.xun-rich-editor.is-fullscreen .xun-editor-toolbar {
	background: var(--color-bg-container);
	border-bottom: 1px solid var(--color-border);
	padding: .75rem 1rem
}

.xun-rich-editor.is-fullscreen .xun-editor-content {
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem
}

.xun-rich-editor.is-fullscreen~.xun-editor-link-modal,
.xun-rich-editor.is-fullscreen~.xun-editor-color-picker {
	z-index: 10000
}

@media(max-width:768px) {
	.xun-editor-toolbar {
		padding: .375rem .5rem
	}

	.xun-editor-toolbar-group {
		margin-right: .125rem;
		padding-right: .375rem
	}

	.xun-editor-btn {
		width: 28px;
		height: 28px
	}

	.xun-editor-btn svg {
		width: 16px;
		height: 16px
	}

	.xun-editor-select-btn {
		min-width: 70px;
		height: 28px;
		font-size: .75rem
	}

	.xun-editor-content {
		min-height: 300px;
		padding: 1rem
	}

	.xun-rich-editor.is-fullscreen .xun-editor-content {
		padding: 1rem
	}
}

.dark .xun-rich-editor {
	background: var(--color-bg-container);
	border-color: var(--color-border)
}

.dark .xun-editor-toolbar {
	background: var(--color-fill-secondary);
	border-bottom-color: var(--color-border)
}

.dark .xun-editor-btn:hover,
.dark .xun-editor-select-btn:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-editor-select-dropdown {
	background: var(--color-bg-elevated);
	border-color: var(--color-border)
}

.dark .xun-editor-select-option:hover {
	background: var(--color-fill-tertiary)
}

.dark .xun-editor-content blockquote {
	background: var(--color-fill-secondary)
}

.dark .xun-editor-content pre {
	background: var(--color-fill-tertiary)
}

.dark .xun-editor-content code {
	background: var(--color-fill-secondary)
}

.dark .xun-editor-modal {
	background: var(--color-bg-elevated)
}

.dark .xun-editor-modal-field input {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-editor-modal-field input:focus {
	background: var(--color-bg-container)
}

.dark .xun-editor-color-picker {
	background: var(--color-bg-elevated);
	border-color: var(--color-border)
}

.dark .xun-editor-color-item[data-color="#ffffff"] {
	border-color: var(--color-border-secondary)
}

.dark .xun-editor-content table th,
.dark .xun-editor-table th {
	background: var(--color-fill-secondary)
}

.dark .xun-editor-content table td,
.dark .xun-editor-content table th,
.dark .xun-editor-table td,
.dark .xun-editor-table th {
	border-color: var(--color-border)
}

.dark .xun-rich-editor.is-fullscreen {
	background: var(--color-bg-layout)
}

.dark .xun-rich-editor.is-fullscreen .xun-editor-toolbar,
.dark .xun-rich-editor.is-fullscreen .xun-editor-content {
	background: var(--color-bg-container)
}

.xun-editor-code-modal {
	max-width: 600px
}

.xun-editor-modal-row {
	gap: 1rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-editor-modal-field-half {
	flex: 1;
	margin-bottom: 0
}

.xun-editor-code-content {
	font-family: var(--font-mono, "Consolas", "Monaco", "Courier New", monospace);
	resize: vertical;
	min-height: 200px;
	font-size: .8125rem;
	line-height: 1.6
}

.xun-editor-code-lang {
	width: 100%
}

.xun-editor-content .xun-code-shortcode {
	background: linear-gradient(135deg, var(--color-fill-secondary)0%, var(--color-fill-tertiary)100%);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	font-family: var(--font-mono, monospace);
	white-space: pre-wrap;
	word-wrap: break-word;
	cursor: default;
	margin: 1rem 0;
	padding: 1rem;
	font-size: .8125rem;
	line-height: 1.6;
	position: relative;
	overflow-x: auto
}

.xun-editor-content .xun-code-shortcode:before {
	content: "代码高亮";
	background: var(--xun-primary);
	color: #fff;
	font-size: .6875rem;
	font-family: var(--font-sans);
	border-radius: 0 var(--xun-radius, 8px)0 var(--xun-radius, 8px);
	padding: .25rem .5rem;
	position: absolute;
	top: 0;
	right: 0
}

.dark .xun-editor-content .xun-code-shortcode {
	background: linear-gradient(135deg, var(--color-fill-tertiary)0%, var(--color-fill-secondary)100%);
	border-color: var(--color-border)
}

@media(max-width:640px) {
	.xun-editor-code-modal {
		max-width: 95%
	}

	.xun-editor-modal-row {
		flex-direction: column;
		gap: 0
	}

	.xun-editor-modal-field-half {
		margin-bottom: 1rem
	}
}

.xun-editor-content .xun-paid-shortcode {
	border-radius: var(--xun-radius, 8px);
	font-family: var(--font-mono, monospace);
	white-space: pre-wrap;
	word-wrap: break-word;
	cursor: default;
	color: #92400e;
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	border: 2px dashed #f59e0b;
	margin: 1rem 0;
	padding: 1rem;
	font-size: .8125rem;
	line-height: 1.6;
	position: relative
}

.xun-editor-content .xun-paid-shortcode:before {
	content: "付费内容";
	color: #fff;
	font-size: .6875rem;
	font-family: var(--font-sans);
	border-radius: 0 var(--xun-radius, 8px)0 var(--xun-radius, 8px);
	background: #f59e0b;
	padding: .25rem .5rem;
	position: absolute;
	top: 0;
	right: 0
}

.dark .xun-editor-content .xun-paid-shortcode {
	color: #fcd34d;
	background: linear-gradient(135deg, rgba(245, 158, 11, .2), rgba(245, 158, 11, .1));
	border-color: #f59e0b
}

.xun-submit-page {
	min-height: calc(100vh - 200px);
	padding: 1rem 0
}

.xun-submit-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem
}

.xun-submit-header {
	text-align: center;
	margin-bottom: 2rem
}

.xun-submit-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	display: inline-flex
}

.xun-submit-title svg {
	color: var(--xun-primary)
}

.xun-submit-subtitle {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .9375rem
}

.xun-submit-content {
	width: 100%
}

.xun-submit-login-required {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-submit-login-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1.5rem
}

.xun-submit-login-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 600
}

.xun-submit-login-desc {
	color: var(--color-text-tertiary);
	margin: 0 0 2rem;
	font-size: .9375rem
}

.xun-submit-login-actions {
	gap: 1rem;
	display: flex
}

.xun-submit-no-permission {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 2rem;
	display: flex
}

.xun-submit-no-permission-icon {
	color: var(--color-warning);
	margin-bottom: 1rem
}

.xun-submit-no-permission-title {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-submit-no-permission-desc {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-submit {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-submit-layout {
	grid-template-columns: 1fr 320px;
	align-items: start;
	gap: 1rem;
	display: grid
}

.xun-submit-main {
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-submit-sidebar {
	top: calc(var(--header-height, 60px) + 1rem);
	flex-direction: column;
	gap: 1rem;
	display: flex;
	position: sticky
}

.xun-submit-widget:has(.xun-category-select) {
	overflow: visible
}

.xun-submit-widget:has(.xun-submit-thumbnail-wrap) {
	overflow: hidden
}

.xun-submit-widget-header {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: .875rem 1rem
}

.xun-submit-widget-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	display: flex
}

.xun-submit-widget-title svg {
	color: var(--color-text-tertiary)
}

.xun-submit-widget-title .xun-profile-required {
	color: var(--color-error);
	font-size: .875rem
}

.xun-submit-widget-body {
	padding: 1rem
}

.xun-submit-widget-hint {
	color: var(--color-text-quaternary);
	margin: .5rem 0 0;
	font-size: .75rem
}

.xun-submit-categories-vertical {
	flex-direction: column;
	gap: .375rem;
	max-height: 240px;
	display: flex;
	overflow-y: auto
}

.xun-submit-categories-vertical .xun-submit-category-item {
	width: 100%
}

.xun-submit-categories-vertical .xun-submit-category-label {
	justify-content: flex-start;
	width: 100%
}

.xun-submit-sidebar .xun-submit-thumbnail-preview {
	aspect-ratio: 16/10;
	max-width: 100%
}

.xun-submit-sidebar .xun-submit-thumbnail-wrap {
	width: 100%
}

.xun-tags-input {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	min-height: 40px;
	padding: .375rem .5rem;
	transition: border-color .2s;
	display: flex
}

.xun-tags-input:focus-within {
	border-color: var(--xun-primary)
}

.xun-tags-input-tags {
	flex-wrap: wrap;
	gap: .375rem;
	display: flex
}

.xun-tags-input-tag {
	color: var(--xun-primary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	background: rgba(22, 119, 255, .1);
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	font-size: .8125rem;
	transition: all .2s;
	display: inline-flex
}

.xun-tags-input-tag:hover {
	background: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-tags-input-tag {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-input-tag {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}

	.xun-tags-input-tag:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-tags-input-tag:hover {
			background: color-mix(in srgb, var(--xun-primary)20%, transparent)
		}
	}
}

.xun-tags-input-tag:hover .xun-tags-input-tag-remove {
	opacity: 1
}

.xun-tags-input-tag-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 120px;
	overflow: hidden
}

.xun-tags-input-tag-remove {
	width: 14px;
	height: 14px;
	color: var(--xun-primary);
	opacity: .6;
	justify-content: center;
	align-items: center;
	font-size: .75rem;
	transition: opacity .2s;
	display: flex
}

.xun-tags-input-tag-remove svg {
	width: 12px;
	height: 12px
}

.xun-tags-input-field {
	min-width: 80px;
	height: 28px;
	color: var(--color-text);
	background: 0 0;
	border: none;
	outline: none;
	flex: 1;
	padding: 0 .25rem;
	font-size: .875rem
}

.xun-tags-input-field::placeholder {
	color: var(--color-text-quaternary)
}

.xun-category-select {
	position: relative
}

.xun-category-select-trigger {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	min-height: 40px;
	padding: .375rem .75rem;
	transition: border-color .2s;
	display: flex
}

.xun-category-select-trigger:hover {
	border-color: var(--color-border)
}

.xun-category-select.is-open .xun-category-select-trigger {
	border-color: var(--xun-primary)
}

.xun-category-select-tags {
	flex-wrap: wrap;
	flex: 1;
	gap: .375rem;
	min-width: 0;
	display: flex
}

.xun-category-select-placeholder {
	color: var(--color-text-quaternary);
	font-size: .875rem
}

.xun-category-select-tag {
	color: var(--xun-primary);
	border-radius: var(--xun-radius-sm, 6px);
	background: rgba(22, 119, 255, .1);
	align-items: center;
	gap: .25rem;
	padding: .125rem .5rem;
	font-size: .75rem;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-category-select-tag {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-category-select-tag {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-category-select-tag-remove {
	width: 14px;
	height: 14px;
	color: var(--xun-primary);
	opacity: .6;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	margin-left: .125rem;
	transition: opacity .2s;
	display: flex
}

.xun-category-select-tag-remove:hover {
	opacity: 1
}

.xun-category-select-tag-remove svg {
	width: 10px;
	height: 10px
}

.xun-category-select-arrow {
	color: var(--color-text-tertiary);
	flex-shrink: 0;
	transition: transform .2s
}

.xun-category-select.is-open .xun-category-select-arrow {
	transform: rotate(180deg)
}

.xun-category-select-dropdown {
	z-index: 100;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transition: all .2s;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	transform: translateY(-8px)
}

.xun-category-select.is-open .xun-category-select-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.xun-category-select-search {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: .5rem
}

.xun-category-select-search-input {
	width: 100%;
	height: 32px;
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	border: none;
	outline: none;
	padding: 0 .75rem;
	font-size: .8125rem
}

.xun-category-select-search-input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-category-select-options {
	max-height: 200px;
	padding: .375rem;
	overflow-y: auto
}

.xun-category-select-option {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	align-items: center;
	gap: .5rem;
	padding: .5rem .625rem;
	font-size: .875rem;
	transition: all .15s;
	display: flex
}

.xun-category-select-option:hover {
	background: var(--color-fill-quaternary);
	color: var(--color-text)
}

.xun-category-select-option.is-hidden,
.xun-category-select-option input[type=checkbox] {
	display: none
}

.xun-category-select-checkbox {
	border: 1.5px solid var(--color-border);
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	transition: all .15s;
	display: flex
}

.xun-category-select-checkbox svg {
	opacity: 0;
	color: #fff;
	transition: all .15s;
	transform: scale(.5)
}

.xun-category-select-option input[type=checkbox]:checked+.xun-category-select-checkbox {
	background: var(--xun-primary);
	border-color: var(--xun-primary)
}

.xun-category-select-option input[type=checkbox]:checked+.xun-category-select-checkbox svg {
	opacity: 1;
	transform: scale(1)
}

.xun-category-select-option-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	overflow: hidden
}

.xun-submit-categories {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-submit-category-item {
	cursor: pointer;
	align-items: center;
	display: inline-flex
}

.xun-submit-category-item input[type=checkbox] {
	display: none
}

:is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	align-items: center;
	padding: .375rem .75rem;
	font-size: .875rem;
	transition: all .2s;
	display: inline-flex
}

:is(.xun-submit-category-item, .xun-submit-radio-item, .xun-submit-checkbox-item):hover :is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
	background: var(--color-fill-tertiary);
	color: var(--color-text)
}

.xun-submit-category-item input[type=checkbox]:checked+.xun-submit-category-label {
	color: var(--xun-primary);
	border-color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

.xun-submit-thumbnail-wrap {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-submit-thumbnail-preview {
	aspect-ratio: 16/9;
	background: var(--color-fill-quaternary);
	border: 2px dashed var(--color-border);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 300px;
	transition: all .2s;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-submit-thumbnail-preview:hover {
	border-color: var(--xun-primary);
	background: var(--color-fill-tertiary)
}

.xun-submit-thumbnail-preview>svg {
	color: var(--color-text-quaternary)
}

.xun-submit-thumbnail-preview>span {
	color: var(--color-text-tertiary);
	font-size: .875rem
}

.xun-submit-thumbnail-preview.has-image {
	border-style: solid;
	border-color: var(--color-border)
}

.xun-submit-thumbnail-preview.has-image>svg,
.xun-submit-thumbnail-preview.has-image>span {
	display: none
}

.xun-submit-thumbnail-preview img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-submit-thumbnail-input {
	display: none
}

.xun-submit-thumbnail-remove {
	z-index: 10;
	color: #fff;
	cursor: pointer;
	background: rgba(0, 0, 0, .6);
	border: none;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	transition: all .2s;
	display: none;
	position: absolute;
	top: 8px;
	right: 8px
}

.xun-submit-thumbnail-remove:hover {
	background: rgba(0, 0, 0, .8);
	transform: scale(1.1)
}

.xun-submit-thumbnail-remove svg {
	width: 14px;
	height: 14px
}

.xun-submit-thumbnail-preview.has-image .xun-submit-thumbnail-remove {
	display: flex
}

.xun-submit-content textarea.xun-profile-textarea {
	min-height: 400px;
	font-family: var(--font-mono, monospace);
	resize: vertical;
	line-height: 1.6
}

.xun-profile-field:has(.xun-rich-editor) {
	display: block
}

.xun-submit-content {
	width: 100%;
	display: block !important
}

.xun-submit-content .xun-rich-editor {
	width: 100%
}

.xun-submit-section-collapsible {
	box-shadow: none;
	background: 0 0;
	border-radius: 0;
	overflow: visible
}

.xun-submit-section-collapsible .xun-profile-section-header {
	cursor: default;
	padding: 0
}

.xun-submit-section-collapsible .xun-profile-section-body {
	margin-top: 1rem;
	padding: 0
}

.xun-submit-section-collapsible .xun-profile-section-body>.xun-profile-fields {
	padding: 1.25rem 1.5rem 1.5rem
}

.xun-submit-section-toggle {
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-submit-section-toggle .xun-profile-section-title {
	align-items: center;
	gap: .5rem;
	display: flex
}

.xun-submit-section-toggle .xun-profile-section-title svg {
	color: var(--color-text-tertiary)
}

.xun-submit-section-switch {
	cursor: pointer;
	align-items: center;
	display: inline-flex;
	position: relative
}

.xun-submit-section-switch input {
	display: none
}

.xun-submit-switch-slider {
	background: var(--color-fill-tertiary);
	border-radius: 12px;
	width: 44px;
	height: 24px;
	transition: all .2s;
	position: relative
}

.xun-submit-switch-slider:before {
	content: "";
	background: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	transition: all .2s;
	position: absolute;
	top: 2px;
	left: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.xun-submit-section-switch input:checked+.xun-submit-switch-slider {
	background: var(--xun-primary)
}

.xun-submit-section-switch input:checked+.xun-submit-switch-slider:before {
	transform: translate(20px)
}

.xun-submit-radio-group {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-submit-radio-item {
	cursor: pointer;
	align-items: center;
	display: inline-flex
}

.xun-submit-radio-item input[type=radio] {
	display: none
}

.xun-submit-radio-item input[type=radio]:checked+.xun-submit-radio-label {
	color: var(--xun-primary);
	border-color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

.xun-submit-checkbox-group {
	flex-wrap: wrap;
	gap: .5rem;
	display: flex
}

.xun-submit-checkbox-item {
	cursor: pointer;
	align-items: center;
	display: inline-flex
}

.xun-submit-checkbox-item input[type=checkbox] {
	display: none
}

.xun-submit-checkbox-item input[type=checkbox]:checked+.xun-submit-checkbox-label {
	color: var(--xun-primary);
	border-color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-submit-category-item input[type=checkbox]:checked+.xun-submit-category-label {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-submit-category-item input[type=checkbox]:checked+.xun-submit-category-label {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}

	.xun-submit-radio-item input[type=radio]:checked+.xun-submit-radio-label {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-submit-radio-item input[type=radio]:checked+.xun-submit-radio-label {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}

	.xun-submit-checkbox-item input[type=checkbox]:checked+.xun-submit-checkbox-label {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-submit-checkbox-item input[type=checkbox]:checked+.xun-submit-checkbox-label {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-submit-conditional {
	display: none
}

.xun-submit-conditional.is-visible {
	display: block
}

.xun-submit-input-group {
	align-items: center;
	display: flex
}

.xun-submit-input-group .xun-profile-input,
.xun-submit-input-group .input {
	border: 1px solid var(--color-border);
	background: var(--color-bg-container);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 .75rem
}

.xun-submit-input-group .xun-profile-input:focus,
.xun-submit-input-group .input:focus {
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-submit-input-group .xun-submit-input-suffix {
	height: 40px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border: 1px solid var(--color-border);
	border-radius: 0 var(--xun-radius, 8px)var(--xun-radius, 8px)0;
	border-left: none;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	padding: 0 .75rem;
	font-size: .875rem;
	display: flex
}

.xun-submit-range-wrap {
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-submit-range {
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(to right, var(--xun-primary)0%, var(--xun-primary)var(--range-progress, 50%), var(--color-fill-tertiary)var(--range-progress, 50%), var(--color-fill-tertiary)100%);
	border-radius: 3px;
	outline: none;
	flex: 1;
	height: 6px
}

.xun-submit-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--xun-primary);
	cursor: pointer;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	transition: transform .2s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.xun-submit-range::-webkit-slider-thumb:hover {
	transform: scale(1.1)
}

.xun-submit-range::-moz-range-thumb {
	background: var(--xun-primary);
	cursor: pointer;
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.xun-submit-range-value {
	min-width: 50px;
	color: var(--color-text);
	text-align: right;
	font-size: .875rem;
	font-weight: 500
}

.xun-submit-access-settings .xun-submit-checkbox-group {
	gap: .75rem
}

.xun-submit-access-settings .xun-submit-checkbox-item,
.xun-submit-access-settings .xun-submit-radio-item {
	align-items: flex-start
}

.xun-submit-access-settings .xun-submit-range-wrap {
	width: 100%
}

.xun-submit-repeater,
.xun-submit-repeater-items {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-submit-repeater-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem;
	display: flex
}

.xun-submit-repeater-item-fields {
	flex: 1;
	gap: .75rem;
	display: flex
}

.xun-submit-repeater-item-fields .xun-profile-input {
	flex: 1
}

.xun-submit-repeater-remove {
	border-radius: var(--xun-radius, 8px);
	width: 36px;
	height: 36px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-submit-repeater-remove:hover {
	background: var(--color-error-bg);
	color: var(--color-error)
}

.xun-submit-repeater-add {
	align-self: flex-start
}

.xun-submit-download-link-item {
	flex-direction: column
}

.xun-submit-download-link-item .xun-submit-repeater-item-fields {
	flex-direction: column;
	width: 100%
}

.xun-submit-download-link-item .xun-submit-repeater-remove {
	position: absolute;
	top: .5rem;
	right: .5rem
}

.xun-submit-download-link-item {
	padding-right: 3rem;
	position: relative
}

.xun-submit-download-link-fields {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-submit-download-link-row {
	gap: .75rem;
	display: flex
}

.xun-submit-download-link-row-grid {
	grid-template-columns: 2fr 1fr 1fr;
	gap: .75rem;
	display: grid
}

@media(max-width:1024px) {
	.xun-submit-layout {
		grid-template-columns: 1fr 280px
	}
}

@media(max-width:768px) {
	.xun-submit-page {
		padding: 1.5rem 0
	}

	.xun-submit-header {
		margin-bottom: 1.5rem
	}

	.xun-submit-title {
		font-size: 1.5rem
	}

	.xun-submit-layout {
		grid-template-columns: 1fr
	}

	.xun-submit-sidebar {
		order: -1;
		position: static
	}

	.xun-submit-thumbnail-preview {
		max-width: 100%
	}

	.xun-submit-content textarea.xun-profile-textarea {
		min-height: 300px
	}

	.xun-submit-repeater-item-fields {
		flex-direction: column
	}

	.xun-submit-download-link-row-grid {
		grid-template-columns: 1fr
	}

	.xun-submit-radio-group,
	.xun-submit-checkbox-group {
		gap: .375rem
	}

	.xun-submit-radio-label,
	.xun-submit-checkbox-label,
	.xun-submit-category-label {
		padding: .25rem .625rem;
		font-size: .8125rem
	}

	.xun-submit-login-required {
		padding: 3rem 1.5rem
	}

	.xun-submit-login-actions {
		flex-direction: column;
		width: 100%
	}

	.xun-submit-login-actions .btn {
		width: 100%
	}

	.xun-submit-categories-vertical {
		flex-flow: wrap;
		max-height: none;
		overflow-y: visible
	}

	.xun-submit-categories-vertical .xun-submit-category-item,
	.xun-submit-categories-vertical .xun-submit-category-label {
		width: auto
	}
}

.xun-submit-actions {
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 1.5rem;
	display: flex
}

.xun-submit-actions .btn {
	min-width: 200px
}

.xun-submit-actions .btn .btn-loading {
	justify-content: center;
	align-items: center;
	gap: .5rem;
	display: none
}

.xun-submit-actions .btn .btn-loading svg {
	animation: 1s linear infinite spin
}

.xun-submit-actions .btn.is-loading .btn-label {
	display: none
}

.xun-submit-actions .btn.is-loading .btn-loading {
	display: inline-flex
}

.xun-submit-actions .btn.is-loading {
	pointer-events: none;
	opacity: .8
}

.xun-submit-actions-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .8125rem
}

@media(max-width:480px) {
	.xun-submit-no-permission {
		padding: 3rem 1.5rem
	}

	.xun-submit-no-permission-icon svg {
		width: 40px;
		height: 40px
	}

	.xun-submit-no-permission-title {
		font-size: 1.125rem
	}

	.xun-submit-range-wrap {
		flex-direction: column;
		align-items: stretch;
		gap: .5rem
	}

	.xun-submit-range-value {
		text-align: left
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-submit-thumbnail-preview {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-submit-thumbnail-preview:hover {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) :is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) :is(.xun-submit-category-item, .xun-submit-radio-item, .xun-submit-checkbox-item):hover :is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
		background: var(--color-fill-tertiary)
	}

	:root:not(.light) :is(.xun-submit-switch-slider, .xun-submit-range, .xun-submit-repeater-item) {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-submit-input-suffix {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-submit-repeater-remove:hover {
		background: rgba(255, 77, 79, .15)
	}

	:root:not(.light) .xun-submit-widget-header {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-tags-input {
		background: var(--color-bg-container);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-tags-input-tag {
		background: rgba(22, 119, 255, .2)
	}

	:root:not(.light) .xun-tags-input-tag:hover {
		background: rgba(22, 119, 255, .3)
	}

	:root:not(.light) .xun-tags-input-field {
		color: var(--color-text)
	}

	:root:not(.light) .xun-category-select-trigger {
		background: var(--color-bg-container);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-category-select-dropdown {
		background: var(--color-bg-elevated);
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-category-select-search {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-category-select-search-input {
		background: var(--color-fill-secondary);
		color: var(--color-text)
	}

	:root:not(.light) .xun-category-select-option:hover {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-category-select-checkbox {
		border-color: var(--color-border)
	}

	:root:not(.light) .xun-category-select-tag {
		background: rgba(22, 119, 255, .2)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-tags-input-tag {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-tags-input-tag {
				background: color-mix(in srgb, var(--xun-primary)20%, transparent)
			}
		}

		:root:not(.light) .xun-tags-input-tag:hover {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-tags-input-tag:hover {
				background: color-mix(in srgb, var(--xun-primary)30%, transparent)
			}
		}

		:root:not(.light) .xun-category-select-tag {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-category-select-tag {
				background: color-mix(in srgb, var(--xun-primary)20%, transparent)
			}
		}
	}

	:root:not(.light) .xun-submit-tips-list li {
		border-bottom-color: var(--color-border)
	}
}

.dark .xun-submit-thumbnail-preview {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-submit-thumbnail-preview:hover {
	background: var(--color-fill-tertiary)
}

.dark :is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
	background: var(--color-fill-secondary)
}

.dark :is(.xun-submit-category-item, .xun-submit-radio-item, .xun-submit-checkbox-item):hover :is(.xun-submit-category-label, .xun-submit-radio-label, .xun-submit-checkbox-label) {
	background: var(--color-fill-tertiary)
}

.dark :is(.xun-submit-switch-slider, .xun-submit-range, .xun-submit-repeater-item) {
	background: var(--color-fill-secondary)
}

.dark .xun-submit-input-suffix {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.dark .xun-submit-repeater-remove:hover {
	background: rgba(255, 77, 79, .15)
}

.dark .xun-submit-widget-header {
	border-bottom-color: var(--color-border)
}

.dark .xun-tags-input {
	background: var(--color-bg-container);
	border-color: var(--color-border)
}

.dark .xun-tags-input-tag {
	background: rgba(22, 119, 255, .2)
}

.dark .xun-tags-input-tag:hover {
	background: rgba(22, 119, 255, .3)
}

.dark .xun-tags-input-field {
	color: var(--color-text)
}

.dark .xun-category-select-trigger {
	background: var(--color-bg-container);
	border-color: var(--color-border)
}

.dark .xun-category-select-dropdown {
	background: var(--color-bg-elevated);
	border-color: var(--color-border)
}

.dark .xun-category-select-search {
	border-bottom-color: var(--color-border)
}

.dark .xun-category-select-search-input {
	background: var(--color-fill-secondary);
	color: var(--color-text)
}

.dark .xun-category-select-option:hover {
	background: var(--color-fill-secondary)
}

.dark .xun-category-select-checkbox {
	border-color: var(--color-border)
}

.dark .xun-category-select-tag {
	background: rgba(22, 119, 255, .2)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-tags-input-tag {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-tags-input-tag {
			background: color-mix(in srgb, var(--xun-primary)20%, transparent)
		}
	}

	.dark .xun-tags-input-tag:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-tags-input-tag:hover {
			background: color-mix(in srgb, var(--xun-primary)30%, transparent)
		}
	}

	.dark .xun-category-select-tag {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-category-select-tag {
			background: color-mix(in srgb, var(--xun-primary)20%, transparent)
		}
	}
}

.xun-profile-input.has-error,
.xun-submit input.has-error,
.xun-submit textarea.has-error {
	border-color: var(--color-error) !important
}

.xun-category-select.has-error .xun-category-select-trigger {
	border-color: var(--color-error)
}

.xun-field-error {
	color: var(--color-error);
	margin-top: .375rem;
	font-size: .8125rem;
	line-height: 1.4;
	display: block
}

.xun-field-error:empty {
	display: none
}

.xun-submit-widget-tips .xun-submit-widget-title svg {
	color: var(--xun-primary)
}

.xun-submit-tips-list {
	margin: 0;
	padding: 0;
	list-style: none
}

.xun-submit-tips-list li {
	color: var(--color-text-secondary);
	border-bottom: 1px dashed var(--color-border-secondary);
	padding: .5rem 0 .5rem 1.25rem;
	font-size: .8125rem;
	line-height: 1.5;
	position: relative
}

.xun-submit-tips-list li:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.xun-submit-tips-list li:first-child {
	padding-top: 0
}

.xun-submit-tips-list li:before {
	content: "";
	background: var(--xun-primary);
	border-radius: 50%;
	width: 6px;
	height: 6px;
	position: absolute;
	top: .75rem;
	left: 0
}

.xun-submit-tips-list li:first-child:before {
	top: .25rem
}

.dark .xun-submit-tips-list li {
	border-bottom-color: var(--color-border)
}

.xun-coupon-section {
	padding: .5rem 0
}

.xun-coupon-container {
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto
}

.xun-coupon-header {
	border-bottom: 1px solid #e5e5e5;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
	display: flex
}

.xun-coupon-header-left {
	flex: 1;
	min-width: 0
}

.xun-coupon-title {
	color: #171717;
	margin: 0;
	padding-left: .75rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative
}

.xun-coupon-title:before {
	content: "";
	background: var(--xun-primary, #1677ff);
	border-radius: 2px;
	width: 3px;
	height: 1.25rem;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

.xun-coupon-header-right {
	flex-shrink: 0
}

.xun-coupon-remaining-info {
	color: #525252;
	background: #f5f5f5;
	border-radius: 9999px;
	align-items: center;
	padding: .375rem .75rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-coupon-countdown {
	color: #fff;
	background: var(--xun-primary, #1677ff);
	border-radius: 9999px;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-coupon-countdown-label {
	opacity: .9
}

.xun-coupon-countdown-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600
}

.xun-coupon-grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	display: grid
}

.xun-coupon-card {
	border-radius: var(--xun-radius, 8px);
	background: #fff;
	transition: all .3s;
	position: relative;
	overflow: hidden
}

.xun-coupon-card:hover {
	box-shadow: 0 4px 20px rgba(239, 68, 68, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-coupon-card:hover {
		box-shadow: 0 4px 20px var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-card:hover {
			box-shadow: 0 4px 20px color-mix(in srgb, var(--coupon-color, #ef4444)15%, transparent)
		}
	}
}

.xun-coupon-card-inner {
	align-items: stretch;
	display: flex
}

.xun-coupon-hole {
	background: var(--color-bg-layout);
	z-index: 2;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	position: absolute
}

.xun-coupon-hole--left {
	top: -8px;
	left: 88px
}

.xun-coupon-hole--right {
	bottom: -8px;
	left: 88px
}

.xun-coupon-card-left {
	color: #fff;
	text-align: center;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 96px;
	padding: 1rem .75rem;
	display: flex;
	position: relative
}

.xun-coupon-card-left:after {
	content: "";
	border-right: 1px dashed #ffffff4d;
	width: 0;
	position: absolute;
	top: 8px;
	bottom: 8px;
	right: 0
}

.xun-coupon-card--coupon-discount {
	--coupon-color: #f59e0b
}

.xun-coupon-card--coupon-discount .xun-coupon-card-left {
	background: linear-gradient(135deg, #f59e0b, #d97706)
}

.xun-coupon-card--coupon-amount {
	--coupon-color: #ef4444
}

.xun-coupon-card--coupon-amount .xun-coupon-card-left {
	background: linear-gradient(135deg, #ef4444, #dc2626)
}

.xun-coupon-value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-coupon-condition {
	opacity: .9;
	white-space: nowrap;
	margin-top: .25rem;
	font-size: .625rem
}

.xun-coupon-card-center {
	flex-direction: column;
	flex: 1;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	padding: .75rem 1rem;
	display: flex;
	overflow: hidden
}

.xun-coupon-type-tag {
	white-space: nowrap;
	border-radius: 9999px;
	flex-shrink: 0;
	align-items: center;
	margin-bottom: .375rem;
	padding: .125rem .5rem;
	font-size: .625rem;
	font-weight: 600;
	display: inline-flex
}

.xun-coupon-card--coupon-discount .xun-coupon-type-tag {
	color: #d97706;
	background: rgba(245, 158, 11, .1)
}

.xun-coupon-card--coupon-amount .xun-coupon-type-tag {
	color: #dc2626;
	background: rgba(239, 68, 68, .1)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-coupon-card--coupon-discount .xun-coupon-type-tag {
		background: rgba(245, 158, 11, .1)
	}

	.xun-coupon-card--coupon-amount .xun-coupon-type-tag {
		background: rgba(239, 68, 68, .1)
	}
}

.xun-coupon-card-right {
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	padding: .625rem .75rem;
	display: flex
}

.xun-coupon-card-right .xun-coupon-expire {
	color: #a3a3a3;
	white-space: nowrap;
	margin-top: .125rem;
	font-size: .625rem
}

.xun-coupon-claim-btn {
	min-width: 5rem;
	color: var(--coupon-color, #ef4444);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	white-space: nowrap;
	background: rgba(239, 68, 68, .08);
	border: 1px solid #ef444433;
	justify-content: center;
	align-items: center;
	padding: .5rem 1rem;
	font-size: .8125rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-coupon-claim-btn:hover:not(:disabled):not(.is-disabled) {
	color: #fff;
	background: var(--coupon-color, #ef4444);
	border-color: var(--coupon-color, #ef4444)
}

.xun-coupon-claim-btn:disabled,
.xun-coupon-claim-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed;
	color: #a3a3a3;
	background: #f5f5f5;
	border-color: #e5e5e5
}

.xun-coupon-claim-btn.is-loading {
	pointer-events: none;
	color: var(--coupon-color, #ef4444);
	background: rgba(239, 68, 68, .08);
	border-color: rgba(239, 68, 68, .2);
	gap: .375rem;
	position: relative
}

.xun-coupon-claim-btn__spinner {
	border: 2px solid #ef44444d;
	border-top-color: var(--coupon-color, #ef4444);
	border-radius: 50%;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	animation: .6s linear infinite xun-coupon-spin;
	display: inline-block
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-coupon-claim-btn {
		background: var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-claim-btn {
			background: color-mix(in srgb, var(--coupon-color, #ef4444)8%, transparent)
		}
	}

	.xun-coupon-claim-btn {
		border: 1px solid var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-claim-btn {
			border: 1px solid color-mix(in srgb, var(--coupon-color, #ef4444)20%, transparent)
		}
	}

	.xun-coupon-claim-btn.is-loading {
		background: var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-claim-btn.is-loading {
			background: color-mix(in srgb, var(--coupon-color, #ef4444)8%, transparent)
		}
	}

	.xun-coupon-claim-btn.is-loading {
		border-color: var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-claim-btn.is-loading {
			border-color: color-mix(in srgb, var(--coupon-color, #ef4444)20%, transparent)
		}
	}

	.xun-coupon-claim-btn__spinner {
		border: 2px solid var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-coupon-claim-btn__spinner {
			border: 2px solid color-mix(in srgb, var(--coupon-color, #ef4444)30%, transparent)
		}
	}
}

.xun-coupon-claim-btn__text {
	font-size: .8125rem;
	font-weight: 500
}

@keyframes xun-coupon-spin {
	to {
		transform: rotate(360deg)
	}
}

.xun-coupon-card.is-claimed:hover {
	box-shadow: none;
	transform: none
}

.xun-coupon-refresh-notice {
	text-align: center;
	margin-top: 1.25rem
}

.xun-coupon-refresh-btn {
	color: var(--xun-primary, #1677ff);
	border: 1px solid var(--xun-primary, #1677ff);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-coupon-refresh-btn:hover {
	color: #fff;
	background: var(--xun-primary, #1677ff)
}

.xun-coupon-refresh-btn i {
	transition: transform .3s
}

.xun-coupon-refresh-btn:hover i {
	transform: rotate(180deg)
}

@media(max-width:768px) {
	.xun-coupon-section {
		padding: .5rem 0
	}

	.xun-coupon-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		margin-bottom: .5rem
	}

	.xun-coupon-title {
		font-size: 1.125rem
	}

	.xun-coupon-grid {
		grid-template-columns: 1fr;
		gap: .75rem
	}
}

@media(max-width:480px) {
	.xun-coupon-card-left {
		width: 80px;
		padding: .75rem .5rem
	}

	.xun-coupon-hole--left,
	.xun-coupon-hole--right {
		left: 72px
	}

	.xun-coupon-value {
		font-size: 1.25rem
	}

	.xun-coupon-card-center {
		padding: .5rem .75rem
	}

	.xun-coupon-card-right {
		padding: .5rem
	}

	.xun-coupon-claim-btn {
		padding: .375rem .75rem;
		font-size: .75rem
	}
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-coupon-header {
		border-bottom-color: var(--color-border)
	}

	:root:not(.light) .xun-coupon-title {
		color: var(--color-text)
	}

	:root:not(.light) .xun-coupon-remaining-info {
		background: var(--color-fill-secondary);
		color: var(--color-text-secondary)
	}

	:root:not(.light) .xun-coupon-card {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-coupon-hole {
		background: var(--color-bg-layout)
	}

	:root:not(.light) .xun-coupon-card-left:after {
		border-right-color: rgba(255, 255, 255, .15)
	}

	:root:not(.light) .xun-coupon-expire {
		color: var(--color-text-tertiary)
	}

	:root:not(.light) .xun-coupon-claim-btn {
		background: rgba(239, 68, 68, .15)
	}

	:root:not(.light) .xun-coupon-claim-btn:disabled,
	:root:not(.light) .xun-coupon-claim-btn.is-disabled {
		background: var(--color-fill-secondary);
		border-color: var(--color-border);
		color: var(--color-text-tertiary)
	}

	:root:not(.light) .xun-coupon-refresh-btn {
		border-color: var(--xun-primary, #1677ff)
	}

	:root:not(.light) .xun-coupon-refresh-btn:hover {
		background: var(--xun-primary, #1677ff)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-coupon-claim-btn {
			background: var(--coupon-color, #ef4444)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-coupon-claim-btn {
				background: color-mix(in srgb, var(--coupon-color, #ef4444)15%, transparent)
			}
		}
	}
}

.dark .xun-coupon-header {
	border-bottom-color: var(--color-border)
}

.dark .xun-coupon-title {
	color: var(--color-text)
}

.dark .xun-coupon-remaining-info {
	background: var(--color-fill-secondary);
	color: var(--color-text-secondary)
}

.dark .xun-coupon-card {
	background: var(--color-bg-container)
}

.dark .xun-coupon-hole {
	background: var(--color-bg-layout)
}

.dark .xun-coupon-card-left:after {
	border-right-color: rgba(255, 255, 255, .15)
}

.dark .xun-coupon-expire {
	color: var(--color-text-tertiary)
}

.dark .xun-coupon-claim-btn {
	background: rgba(239, 68, 68, .15)
}

.dark .xun-coupon-claim-btn:disabled,
.dark .xun-coupon-claim-btn.is-disabled {
	background: var(--color-fill-secondary);
	border-color: var(--color-border);
	color: var(--color-text-tertiary)
}

.dark .xun-coupon-refresh-btn {
	border-color: var(--xun-primary, #1677ff)
}

.dark .xun-coupon-refresh-btn:hover {
	background: var(--xun-primary, #1677ff)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-coupon-claim-btn {
		background: var(--coupon-color, #ef4444)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-coupon-claim-btn {
			background: color-mix(in srgb, var(--coupon-color, #ef4444)15%, transparent)
		}
	}
}

.xun-announcement-modal {
	z-index: 9999;
	justify-content: center;
	align-items: center;
	animation: .3s xun-announcement-fade-in;
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-announcement-modal--closing {
	animation: .3s forwards xun-announcement-fade-out
}

.xun-announcement-modal__overlay {
	z-index: auto;
	animation: none;
	position: absolute
}

.xun-announcement-modal__content {
	background-color: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	width: 90%;
	max-width: 480px;
	max-height: 80vh;
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	animation: .3s xun-announcement-slide-up;
	display: flex;
	position: relative;
	overflow: hidden
}

.xun-announcement-modal--closing .xun-announcement-modal__content {
	animation: .3s forwards xun-announcement-slide-down
}

.xun-announcement-modal__header {
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	display: flex
}

.xun-announcement-modal__title {
	color: var(--color-text);
	margin: 0;
	font-size: 18px;
	font-weight: 600
}

.xun-announcement-modal__close {
	width: 2rem;
	height: 2rem;
	color: var(--color-text-tertiary);
	border-radius: calc(var(--xun-radius, 8px) - 2px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all .2s;
	display: flex
}

.xun-announcement-modal__close:hover {
	color: var(--color-text);
	background-color: var(--color-fill-tertiary)
}

.xun-announcement-modal__body {
	color: var(--color-text-secondary);
	flex: 1;
	padding: 20px;
	font-size: 14px;
	line-height: 1.6;
	overflow-y: auto
}

.xun-announcement-modal__body p {
	margin: 0 0 10px
}

.xun-announcement-modal__body p:last-child {
	margin-bottom: 0
}

.xun-announcement-modal__body a {
	color: var(--xun-primary, var(--color-primary));
	text-decoration: none
}

.xun-announcement-modal__body a:hover {
	text-decoration: underline
}

.xun-announcement-modal__footer {
	border-top: 1px solid var(--color-border);
	justify-content: center;
	align-items: center;
	padding: 16px 20px;
	display: flex
}

.xun-announcement-modal__btn {
	color: #fff;
	background-color: var(--xun-primary, var(--color-primary));
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	border: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 44px;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .2s;
	display: inline-flex
}

.xun-announcement-modal__btn:hover {
	background-color: var(--xun-primary-hover, var(--color-primary-active))
}

@keyframes xun-announcement-fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes xun-announcement-fade-out {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes xun-announcement-slide-up {
	0% {
		opacity: 0;
		transform: translateY(20px)scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

@keyframes xun-announcement-slide-down {
	0% {
		opacity: 1;
		transform: translateY(0)scale(1)
	}

	to {
		opacity: 0;
		transform: translateY(20px)scale(.95)
	}
}

@media(max-width:480px) {
	.xun-announcement-modal__content {
		width: 95%;
		max-width: none;
		max-height: 85vh;
		margin: 0 10px
	}

	.xun-announcement-modal__header {
		padding: 14px 16px
	}

	.xun-announcement-modal__title {
		font-size: 16px
	}

	.xun-announcement-modal__body {
		padding: 16px;
		font-size: 13px
	}

	.xun-announcement-modal__footer {
		flex-direction: column;
		gap: 12px;
		padding: 14px 16px
	}

	.xun-announcement-modal__btn {
		width: 100%
	}
}

.xun-announcement-banner {
	z-index: 9998;
	background: linear-gradient(135deg, var(--xun-primary, var(--color-primary))0%, var(--xun-primary-hover, var(--color-primary-active))100%);
	color: #fff;
	will-change: transform;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	position: fixed;
	top: 0;
	left: 0;
	right: 0
}

.xun-announcement-banner--visible {
	transform: translateY(0)
}

.xun-announcement-banner--closing {
	transform: translateY(-100%)
}

.xun-announcement-banner__container {
	max-width: var(--xun-container-width, 1200px);
	align-items: center;
	gap: 12px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex
}

.xun-announcement-banner__icon {
	background-color: rgba(255, 255, 255, .2);
	border-radius: 50%;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	display: flex
}

.xun-announcement-banner__icon svg {
	width: 14px;
	height: 14px
}

.xun-announcement-banner__content {
	flex: 1;
	min-width: 0;
	overflow: hidden
}

.xun-announcement-banner__scroll {
	white-space: nowrap;
	align-items: center;
	gap: 16px;
	animation: 20s linear infinite xun-banner-scroll;
	display: flex
}

.xun-announcement-banner__scroll:hover {
	animation-play-state: paused
}

.xun-announcement-banner__item {
	font-size: 13px;
	line-height: 1.5
}

.xun-announcement-banner__separator {
	opacity: .5
}

.xun-announcement-banner__actions {
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	display: flex
}

.xun-announcement-banner__btn {
	white-space: nowrap;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-announcement-banner__btn--hide {
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .15)
}

.xun-announcement-banner__btn--hide:hover {
	color: #fff;
	background: rgba(255, 255, 255, .25)
}

.xun-announcement-banner__btn--close {
	color: rgba(255, 255, 255, .7);
	background: 0 0
}

.xun-announcement-banner__btn--close:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1)
}

@keyframes xun-banner-scroll {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(-50%)
	}
}

@media(max-width:768px) {
	.xun-announcement-banner__container {
		gap: 10px;
		padding: 8px 16px
	}

	.xun-announcement-banner__icon {
		width: 22px;
		height: 22px
	}

	.xun-announcement-banner__icon svg {
		width: 12px;
		height: 12px
	}

	.xun-announcement-banner__item {
		font-size: 12px
	}

	.xun-announcement-banner__actions {
		gap: 6px
	}

	.xun-announcement-banner__btn {
		padding: 5px 10px;
		font-size: 11px
	}
}

.xun-image-gallery {
	border-radius: var(--xun-radius, 8px);
	margin: .5rem 0;
	display: grid;
	overflow: hidden
}

.xun-gallery-cols-2 {
	grid-template-columns: repeat(2, 1fr)
}

.xun-gallery-cols-3 {
	grid-template-columns: repeat(3, 1fr)
}

.xun-gallery-cols-4 {
	grid-template-columns: repeat(4, 1fr)
}

.xun-gallery-cols-5 {
	grid-template-columns: repeat(5, 1fr)
}

.xun-gallery-cols-6 {
	grid-template-columns: repeat(6, 1fr)
}

.xun-gallery-gap-none {
	gap: 0
}

.xun-gallery-gap-small {
	gap: 4px
}

.xun-gallery-gap-medium {
	gap: 8px
}

.xun-gallery-gap-large {
	gap: 12px
}

.xun-image-gallery .xun-gallery-item {
	background: var(--color-fill-quaternary, #00000005);
	position: relative;
	overflow: hidden
}

.xun-image-gallery .xun-gallery-link {
	width: 100%;
	height: 100%;
	text-decoration: none;
	display: block
}

.xun-image-gallery .xun-gallery-image-wrapper {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden
}

.xun-image-gallery .xun-gallery-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .3s var(--ease-smooth, ease);
	position: absolute;
	top: 0;
	left: 0
}

.xun-gallery-lightbox .xun-gallery-item:hover .xun-gallery-image {
	transform: scale(1.05)
}

.xun-gallery-lightbox .xun-gallery-link {
	cursor: zoom-in
}

.xun-gallery-lightbox .xun-gallery-item:after {
	content: "";
	pointer-events: none;
	background: 0 0;
	transition: background .3s;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-gallery-lightbox .xun-gallery-item:hover:after {
	background: rgba(0, 0, 0, .1)
}

.xun-gallery-lightbox .xun-gallery-item:before {
	content: "";
	opacity: 0;
	z-index: 2;
	pointer-events: none;
	background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 50%/20px no-repeat;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	transition: all .3s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(.8)
}

.xun-gallery-lightbox .xun-gallery-item:hover:before {
	opacity: 1;
	transform: scale(1)
}

.xun-image-gallery.xun-gallery-ratio-auto .xun-gallery-image-wrapper,
.xun-image-gallery.xun-gallery-ratio-square .xun-gallery-image-wrapper {
	padding-bottom: 100%
}

.xun-image-gallery.xun-gallery-ratio-4-3 .xun-gallery-image-wrapper {
	padding-bottom: 75%
}

.xun-image-gallery.xun-gallery-ratio-16-9 .xun-gallery-image-wrapper {
	padding-bottom: 56.25%
}

.xun-image-gallery.xun-gallery-ratio-3-4 .xun-gallery-image-wrapper {
	padding-bottom: 133.33%
}

.xun-image-gallery.xun-gallery-ratio-2-3 .xun-gallery-image-wrapper {
	padding-bottom: 150%
}

.xun-image-gallery.xun-gallery-ratio-9-16 .xun-gallery-image-wrapper {
	padding-bottom: 177.78%
}

.xun-image-gallery.xun-gallery-size-small {
	max-width: 80%
}

.xun-image-gallery.xun-gallery-size-medium,
.xun-image-gallery.xun-gallery-size-large {
	max-width: 100%
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-gallery-item {
		background: var(--color-fill-quaternary, #ffffff0d)
	}

	:root:not(.light) .xun-gallery-lightbox .xun-gallery-item:before {
		background: rgba(0, 0, 0, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 50%/20px no-repeat
	}
}

.dark .xun-gallery-item {
	background: var(--color-fill-quaternary, #ffffff0d)
}

.dark .xun-gallery-lightbox .xun-gallery-item:before {
	background: rgba(0, 0, 0, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 50%/20px no-repeat
}

@media(max-width:1024px) {

	.xun-gallery-cols-6,
	.xun-gallery-cols-5 {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media(max-width:768px) {

	.xun-gallery-cols-6,
	.xun-gallery-cols-5,
	.xun-gallery-cols-4 {
		grid-template-columns: repeat(3, 1fr)
	}

	.xun-gallery-gap-large {
		gap: 8px
	}

	.xun-gallery-gap-medium {
		gap: 6px
	}
}

@media(max-width:480px) {

	.xun-gallery-cols-6,
	.xun-gallery-cols-5,
	.xun-gallery-cols-4,
	.xun-gallery-cols-3 {
		grid-template-columns: repeat(2, 1fr)
	}

	.xun-gallery-gap-large {
		gap: 6px
	}

	.xun-gallery-gap-medium {
		gap: 4px
	}
}

.xun-help-container {
	max-width: var(--xun-container-width, 1200px);
	width: 100%;
	margin: 0 auto;
	padding: 1rem 1rem 2rem
}

.xun-help-header {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), var(--xun-primary);
	width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 2.5rem;
	position: relative;
	overflow: hidden
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-help-header {
		background: linear-gradient(135deg, var(--xun-primary)0%, var(--xun-primary)100%)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-header {
			background: linear-gradient(135deg, var(--xun-primary)0%, color-mix(in srgb, var(--xun-primary)80%, #000)100%)
		}
	}
}

.xun-help-header-content {
	z-index: 1;
	color: #fff;
	text-align: center;
	max-width: var(--xun-container-width, 1200px);
	margin: 0 auto;
	padding: 2.5rem 2rem 1rem;
	position: relative
}

.xun-help-header--transparent {
	--header-height: 64px;
	margin-top: -64px;
	padding-top: calc(64px + 2.5rem)
}

.xun-help-header--transparent .xun-help-header-content {
	padding-top: 2.5rem
}

@media(max-width:767px) {
	.xun-help-header--transparent {
		--header-height: 56px;
		margin-top: -56px;
		padding-top: calc(56px + 2rem)
	}

	.xun-help-header--transparent .xun-help-header-content {
		padding-top: 2rem
	}
}

.site-main>.xun-help-header+.xun-layout-wrapper {
	padding-top: 0
}

.xun-help-title {
	color: #fff;
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3
}

.xun-help-desc {
	opacity: .9;
	color: #fff;
	max-width: 600px;
	margin: 0 auto 1.5rem;
	font-size: .95rem
}

.xun-help-header .xun-banner-search {
	max-width: 500px;
	margin: 0 auto
}

.xun-help-layout {
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 1.5rem;
	display: grid
}

.xun-help-sidebar {
	top: calc(var(--xun-header-height, 60px) + 1rem);
	flex-direction: column;
	gap: 1rem;
	display: flex;
	position: sticky
}

.xun-help-sidebar-card,
.xun-help-item,
.xun-help-article,
.xun-help-nav-post {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius, 8px);
	box-shadow: var(--shadow-sm);
	overflow: hidden
}

.xun-help-sidebar-title {
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border-secondary);
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 1rem;
	font-size: .9375rem;
	font-weight: 600;
	display: flex
}

.xun-help-sidebar-title svg {
	color: var(--color-text-tertiary)
}

.xun-help-nav {
	flex-direction: column;
	gap: .25rem;
	padding: .5rem;
	display: flex
}

.xun-help-nav-item {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	align-items: center;
	gap: .5rem;
	padding: .625rem .75rem;
	font-size: .875rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-help-nav-item:hover {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .08)
}

.xun-help-nav-item.active {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .12);
	font-weight: 500
}

.xun-help-nav-item svg,
.xun-help-nav-item i {
	opacity: .7;
	flex-shrink: 0;
	width: 16px;
	height: 16px
}

.xun-help-nav-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	overflow: hidden
}

.xun-help-nav-count {
	min-width: 22px;
	max-width: 22px;
	color: var(--color-text-tertiary);
	border: 1px solid var(--color-border-secondary);
	box-sizing: border-box;
	background: 0 0;
	border-radius: 50%;
	flex: 0 0 22px;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	display: inline-flex;
	width: 22px !important;
	height: 22px !important
}

.xun-help-nav-item:hover .xun-help-nav-count {
	color: var(--xun-primary);
	border-color: rgba(22, 119, 255, .4)
}

.xun-help-nav-item.active .xun-help-nav-count {
	color: #fff;
	background: var(--xun-primary);
	border-color: var(--xun-primary)
}

.xun-help-related {
	padding: .5rem
}

.xun-help-related-item {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius-sm, 6px);
	align-items: flex-start;
	gap: .5rem;
	padding: .5rem .75rem;
	font-size: .8125rem;
	line-height: 1.4;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-help-related-item:hover {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .08)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-help-nav-item:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-nav-item:hover {
			background: color-mix(in srgb, var(--xun-primary)8%, transparent)
		}
	}

	.xun-help-nav-item.active {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-nav-item.active {
			background: color-mix(in srgb, var(--xun-primary)12%, transparent)
		}
	}

	.xun-help-nav-item:hover .xun-help-nav-count {
		border-color: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-nav-item:hover .xun-help-nav-count {
			border-color: color-mix(in srgb, var(--xun-primary)40%, transparent)
		}
	}

	.xun-help-related-item:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-related-item:hover {
			background: color-mix(in srgb, var(--xun-primary)8%, transparent)
		}
	}
}

.xun-help-related-item svg {
	opacity: .6;
	flex-shrink: 0;
	margin-top: .125rem
}

.xun-help-related-item span {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden
}

.xun-help-main {
	min-width: 0
}

.xun-help-single-content {
	width: 100%
}

.xun-help-main-full {
	max-width: var(--xun-container-width, 1200px);
	width: 100%
}

.xun-help-search-result {
	margin-bottom: 1rem
}

.xun-help-section-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-help-section-title span {
	color: var(--xun-primary)
}

.xun-help-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-help-item {
	transition: all .2s
}

.xun-help-item:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px)
}

.xun-help-item-link {
	color: inherit;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	text-decoration: none;
	display: flex
}

.xun-help-item-icon {
	border-radius: var(--xun-radius-sm, 6px);
	width: 48px;
	height: 48px;
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .1);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-help-item-icon {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-item-icon {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-help-item-content {
	flex: 1;
	min-width: 0
}

.xun-help-item-title {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	margin: 0 0 .25rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	overflow: hidden
}

.xun-help-item:hover .xun-help-item-title {
	color: var(--xun-primary)
}

.xun-help-item-excerpt {
	color: var(--color-text-secondary);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

.xun-help-item-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	display: flex
}

.xun-help-item-cat {
	color: var(--xun-primary);
	border-radius: var(--xun-radius-sm, 6px);
	pointer-events: none;
	background: rgba(22, 119, 255, .1);
	padding: .125rem .5rem
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-help-item-cat {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-item-cat {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-help-item-views {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-help-item-arrow {
	color: var(--color-text-tertiary);
	flex-shrink: 0;
	transition: all .2s
}

.xun-help-item:hover .xun-help-item-arrow {
	color: var(--xun-primary);
	transform: translate(4px)
}

.xun-help-article-header {
	border-bottom: 1px solid var(--color-border-secondary);
	padding: 1.5rem 1.5rem 1rem
}

.xun-help-article-title {
	color: var(--color-text);
	margin: 0 0 .75rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4
}

.xun-help-article-meta {
	color: var(--color-text-tertiary);
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	display: flex
}

.xun-help-article-meta-sep {
	color: var(--color-border-secondary)
}

.xun-help-article-cat {
	color: var(--xun-primary);
	border-radius: var(--xun-radius-sm, 6px);
	background: rgba(22, 119, 255, .1);
	padding: .125rem .5rem;
	text-decoration: none;
	transition: all .2s
}

.xun-help-article-cat:hover {
	background: rgba(22, 119, 255, .2)
}

.xun-help-article-views {
	align-items: center;
	gap: .25rem;
	display: flex
}

.xun-help-article-content {
	padding: 1.5rem
}

.xun-help-article-footer {
	border-top: 1px solid var(--color-border-secondary);
	padding: 1rem 1.5rem 1.5rem
}

.xun-help-feedback {
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	display: flex
}

.xun-help-feedback-label {
	color: var(--color-text-secondary);
	font-size: .875rem
}

.xun-help-feedback-btns {
	gap: .5rem;
	display: flex
}

.xun-help-feedback-btn {
	color: var(--color-text-secondary);
	background: var(--color-fill-tertiary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	border: 1px solid #0000;
	align-items: center;
	gap: .375rem;
	padding: .5rem 1rem;
	font-size: .8125rem;
	transition: all .2s;
	display: inline-flex
}

.xun-help-feedback-btn:hover {
	color: var(--xun-primary);
	border-color: var(--xun-primary);
	background: rgba(22, 119, 255, .1)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-help-article-cat {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-article-cat {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}

	.xun-help-article-cat:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-article-cat:hover {
			background: color-mix(in srgb, var(--xun-primary)20%, transparent)
		}
	}

	.xun-help-feedback-btn:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-help-feedback-btn:hover {
			background: color-mix(in srgb, var(--xun-primary)10%, transparent)
		}
	}
}

.xun-help-feedback-btn.active {
	color: #fff;
	background: var(--xun-primary);
	border-color: var(--xun-primary)
}

.xun-help-updated {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	display: flex
}

.xun-help-nav-posts {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
	display: grid
}

.xun-help-nav-post {
	flex-direction: column;
	gap: .375rem;
	padding: 1rem 1.25rem;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.xun-help-nav-post:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px)
}

.xun-help-nav-post.xun-help-nav-empty {
	opacity: .6;
	pointer-events: none
}

.xun-help-nav-post.xun-help-nav-next {
	text-align: right
}

.xun-help-nav-label {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	display: flex
}

.xun-help-nav-next .xun-help-nav-label {
	justify-content: flex-end
}

.xun-help-nav-title {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	overflow: hidden
}

.xun-help-nav-post:hover .xun-help-nav-title {
	color: var(--xun-primary)
}

@media(max-width:992px) {
	.xun-help-layout {
		grid-template-columns: 220px 1fr;
		gap: 1rem
	}
}

@media(max-width:768px) {
	.xun-help-header-content {
		padding: 2rem 1.5rem 1rem
	}

	.xun-help-title {
		font-size: 1.5rem
	}

	.xun-help-layout {
		grid-template-columns: 1fr
	}

	.xun-help-sidebar {
		order: -1;
		position: static
	}

	.xun-help-sidebar-card {
		display: none
	}

	.xun-help-sidebar-card:first-child {
		display: block
	}

	.xun-help-nav {
		flex-wrap: wrap;
		gap: .5rem;
		padding: .75rem;
		display: flex
	}

	.xun-help-nav-item {
		background: var(--color-fill-tertiary);
		padding: .5rem .75rem
	}

	.xun-help-nav-count {
		display: none
	}

	.xun-help-item-link {
		padding: .875rem 1rem
	}

	.xun-help-item-icon {
		width: 40px;
		height: 40px
	}

	.xun-help-item-icon svg {
		width: 20px;
		height: 20px
	}

	.xun-help-article-header {
		padding: 1.25rem 1rem .875rem
	}

	.xun-help-article-title {
		font-size: 1.25rem
	}

	.xun-help-article-content {
		padding: 1.25rem 1rem
	}

	.xun-help-article-footer {
		padding: .875rem 1rem 1.25rem
	}

	.xun-help-feedback {
		flex-direction: column;
		align-items: flex-start
	}

	.xun-help-nav-posts {
		grid-template-columns: 1fr
	}

	.xun-help-nav-post.xun-help-nav-next {
		text-align: left
	}

	.xun-help-nav-next .xun-help-nav-label {
		justify-content: flex-start
	}
}

.xun-help-search-page {
	padding-bottom: 2rem
}

.xun-help-search-page .xun-posts-section {
	margin-top: 0
}

.xun-help-back {
	text-align: center;
	margin-top: 1.5rem
}

.xun-navigation-page {
	min-width: 0
}

body.xun-navigation-archive-page .xun-content {
	background-color: var(--color-bg-layout, #f5f5f5);
	flex: 1
}

body.xun-navigation-archive-page .site-main {
	background-color: rgba(0, 0, 0, 0)
}

.xun-navigation-banner {
	background: linear-gradient(135deg, rgba(10, 15, 30, .72), rgba(12, 18, 32, .52)), linear-gradient(135deg, #0b1220, #121c31 52%, #17233c);
	position: relative;
	overflow: hidden
}

.xun-navigation-banner .xun-banner-overlay {
	background: linear-gradient(rgba(15, 23, 42, .04), rgba(15, 23, 42, .4)), radial-gradient(circle at 0 0, rgba(255, 255, 255, .08), rgba(0, 0, 0, 0) 24%)
}

.xun-navigation-banner:before,
.xun-navigation-banner:after {
	content: "";
	z-index: 0;
	filter: blur(80px);
	opacity: .65;
	pointer-events: none;
	border-radius: 999px;
	position: absolute;
	inset: auto
}

.xun-navigation-banner:before {
	background: rgba(59, 130, 246, .28);
	width: 18rem;
	height: 18rem;
	top: 2rem;
	left: 8%
}

.xun-navigation-banner:after {
	background: rgba(16, 185, 129, .22);
	width: 16rem;
	height: 16rem;
	bottom: 2rem;
	right: 10%
}

.xun-navigation-banner-content {
	max-width: 920px
}

.xun-navigation-banner-header,
.xun-navigation-banner-search {
	max-width: 760px
}

.xun-navigation-search-input-wrap {
	gap: 0;
	padding-right: .25rem
}

.xun-navigation-banner-search .xun-navigation-search-input-wrap .xun-search-input {
	padding-right: 1rem
}

.xun-navigation-banner-search .xun-navigation-search-input-wrap .xun-search-btn {
	flex-shrink: 0;
	margin: 4px 0 4px 4px
}

.xun-navigation-search-apply-btn {
	color: #7b6242;
	box-shadow: none;
	background: linear-gradient(135deg, #f7f2eb, #efe6da);
	border: 1px solid #e7dccf
}

.xun-navigation-search-apply-btn:hover {
	color: #6c5538;
	background: linear-gradient(135deg, #f2eae0, #e9ddcf);
	border-color: #dccab4
}

.xun-navigation-search-apply-btn:active {
	color: #5b472f;
	box-shadow: none;
	background: linear-gradient(135deg, #eadfce, #e0d1bf);
	border-color: #d2bea5
}

.xun-navigation-banner-engines {
	flex-wrap: wrap;
	justify-content: center;
	gap: .625rem;
	margin-top: 1rem;
	display: flex
}

.xun-navigation-banner-engine {
	display: inline-flex;
	position: relative
}

.xun-navigation-banner-engine input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-navigation-banner-engine span {
	border-radius: var(--xun-radius, 8px);
	color: rgba(255, 255, 255, .78);
	cursor: pointer;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid #ffffff24;
	justify-content: center;
	align-items: center;
	min-width: 76px;
	padding: .5rem .875rem;
	font-size: .875rem;
	transition: all .2s;
	display: inline-flex
}

.xun-navigation-banner-engine input:checked+span {
	color: #fff;
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .24);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .14)
}

.xun-navigation-banner-engines--pill {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid #ffffff1f;
	border-radius: 999px;
	gap: .3125rem;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	padding: .3125rem;
	display: inline-flex;
	box-shadow: inset 0 1px rgba(255, 255, 255, .08)
}

.xun-navigation-banner-engines--pill .xun-navigation-banner-engine span {
	min-width: 0;
	box-shadow: none;
	background: 0 0;
	border: none;
	border-radius: 999px;
	padding: .5rem 1rem
}

.xun-navigation-banner-engines--pill .xun-navigation-banner-engine input:checked+span {
	color: #162033;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 8px 18px rgba(9, 14, 24, .18)
}

.xun-navigation-banner-engines--pill .xun-navigation-banner-engine:hover span {
	color: #fff;
	background: rgba(255, 255, 255, .12)
}

.xun-navigation-banner-engines--pill .xun-navigation-banner-engine input:checked+span:hover {
	color: #162033;
	background: rgba(255, 255, 255, .96)
}

.xun-navigation-banner-keywords {
	max-width: 840px
}

.xun-navigation-anchor-nav {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: .5rem;
	margin-bottom: .5rem;
	padding-bottom: .25rem;
	display: flex;
	overflow-x: auto
}

.xun-navigation-anchor-nav::-webkit-scrollbar {
	display: none
}

.xun-navigation-anchor-link {
	background: var(--color-fill-secondary);
	color: var(--color-text);
	white-space: nowrap;
	border-radius: 980px;
	align-items: center;
	padding: .4375rem .875rem;
	font-size: .8125rem;
	font-weight: 500;
	transition: background .2s, color .2s;
	display: inline-flex
}

.xun-navigation-anchor-link:hover,
.xun-navigation-anchor-link.is-active {
	background: var(--xun-primary, var(--color-primary));
	color: #fff
}

.xun-navigation-anchor-nav--sticky {
	z-index: 40;
	background: var(--color-bg-layout, #f5f5f5);
	padding-top: .5rem;
	padding-bottom: .5rem;
	position: sticky;
	top: 64px
}

@media(max-width:767px) {
	.xun-navigation-anchor-nav--sticky {
		top: 56px
	}
}

.xun-navigation-section {
	margin-top: .5rem
}

.xun-navigation-section:first-child {
	margin-top: 0
}

.xun-navigation-section--recommend,
.xun-navigation-section--recommend .xun-navigation-section-head {
	margin-bottom: .5rem
}

.xun-navigation-recommend-grid {
	grid-template-columns: repeat(var(--pc-columns, 3), minmax(0, 1fr));
	gap: 1rem;
	display: grid
}

.xun-navigation-recommend-card {
	border-radius: calc(var(--xun-radius, 8px) + 8px);
	background: var(--color-bg-container, #fff);
	min-height: 100%;
	box-shadow: var(--shadow-xs);
	border: none;
	flex-direction: column;
	padding: 1rem;
	display: flex
}

.xun-navigation-recommend-card-main {
	text-align: center;
	color: inherit;
	flex-direction: column;
	flex: 1;
	align-items: center;
	gap: .875rem;
	display: flex
}

.xun-navigation-recommend-card-head {
	justify-content: center;
	width: 100%;
	display: flex
}

.xun-navigation-recommend-card-icon {
	background: var(--color-fill-tertiary);
	border-radius: 24%;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	display: flex;
	position: relative;
	overflow: visible;
	box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08)
}

.xun-navigation-recommend-card-body {
	flex-direction: column;
	flex: 1;
	align-items: center;
	gap: .375rem;
	width: 100%;
	display: flex
}

.xun-navigation-recommend-card-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4
}

.xun-navigation-recommend-card-desc {
	color: var(--color-text-tertiary);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.65;
	display: -webkit-box;
	overflow: hidden
}

.xun-navigation-recommend-card-action {
	background: var(--color-fill-secondary);
	width: 100%;
	min-height: 2.5rem;
	color: var(--xun-primary, var(--color-primary));
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 600;
	transition: background .2s, color .2s;
	display: inline-flex
}

.xun-navigation-recommend-card-action:hover {
	background: var(--color-primary-bg)
}

.xun-navigation-section-head {
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	display: flex
}

.xun-navigation-section-title {
	color: var(--color-text);
	letter-spacing: -.01em;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700
}

.xun-navigation-section-more {
	color: var(--xun-primary, var(--color-primary));
	flex-shrink: 0;
	align-items: center;
	gap: .125rem;
	font-size: .875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-navigation-grid {
	grid-template-columns: repeat(var(--pc-columns, 3), minmax(0, 1fr));
	gap: .25rem;
	display: grid
}

.xun-navigation-card {
	border-radius: calc(var(--xun-radius, 8px) + 4px);
	align-items: center;
	gap: .75rem;
	padding: .625rem;
	transition: background .2s;
	display: flex;
	position: relative
}

.xun-navigation-card:hover {
	background: var(--color-fill-quaternary)
}

.xun-navigation-card-link {
	min-width: 0;
	color: inherit;
	flex: 1;
	align-items: center;
	gap: .75rem;
	display: flex
}

.xun-navigation-card-icon {
	background: var(--color-fill-tertiary);
	border-radius: 22.37%;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 3.25rem;
	height: 3.25rem;
	display: flex;
	position: relative;
	overflow: visible;
	box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08)
}

.xun-navigation-card-logo {
	object-fit: cover;
	border-radius: inherit;
	width: 100%;
	height: 100%;
	display: block
}

.xun-navigation-card-initial {
	color: var(--color-text-secondary);
	font-size: 1.25rem;
	font-weight: 700
}

.xun-navigation-card-badge {
	z-index: 2;
	background: var(--xun-navigation-badge-bg, var(--xun-primary, var(--color-primary)));
	color: var(--xun-navigation-badge-color, #fff);
	white-space: nowrap;
	border-radius: 6px;
	padding: .0625rem .3125rem;
	font-size: .5625rem;
	font-weight: 600;
	line-height: 1.5;
	position: absolute;
	top: -.25rem;
	right: -.25rem
}

.xun-navigation-card-info {
	flex: 1;
	min-width: 0
}

.xun-navigation-card-name {
	color: var(--color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	overflow: hidden
}

.xun-navigation-card-desc {
	color: var(--color-text-tertiary);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	margin: .125rem 0 0;
	font-size: .75rem;
	line-height: 1.45;
	display: -webkit-box;
	overflow: hidden
}

.xun-navigation-card-get {
	background: var(--color-fill-secondary);
	min-width: 4rem;
	color: var(--xun-primary, var(--color-primary));
	border-radius: 980px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	padding: .3125rem .75rem;
	font-size: .8125rem;
	font-weight: 600;
	transition: background .2s;
	display: inline-flex
}

.xun-navigation-card-get:hover {
	background: var(--color-primary-bg)
}

.xun-navigation-results {
	margin-top: 1.5rem
}

.xun-navigation-empty,
.xun-navigation-empty-inline {
	border-radius: calc(var(--xun-radius, 8px) + 8px);
	background: var(--color-bg-container);
	text-align: center;
	margin-top: 1.5rem;
	padding: 2rem 1.5rem
}

.xun-navigation-empty-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.25rem
}

.xun-navigation-empty-desc,
.xun-navigation-empty-inline p {
	color: var(--color-text-secondary);
	margin: .75rem 0 0
}

.xun-navigation-apply-actions,
.xun-navigation-apply-success-actions {
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
	display: flex
}

.xun-navigation-apply,
.xun-navigation-apply-success {
	border-radius: calc(var(--xun-radius, 8px) + 8px);
	background: var(--color-bg-container);
	padding: 1.5rem
}

.xun-navigation-apply-head {
	margin-bottom: 1.25rem
}

.xun-navigation-apply-title,
.xun-navigation-apply-success-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.5rem
}

.xun-navigation-apply-desc,
.xun-navigation-apply-success-desc {
	color: var(--color-text-secondary);
	margin: .75rem 0 0;
	line-height: 1.8
}

.xun-navigation-apply-alert {
	border: 1px solid var(--color-error-border);
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-error-bg);
	color: var(--color-error-text, var(--color-error));
	margin-bottom: 1rem;
	padding: .875rem 1rem;
	font-size: .875rem
}

.xun-navigation-apply-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-navigation-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	display: grid
}

.xun-navigation-form-group {
	flex-direction: column;
	gap: .375rem;
	display: flex
}

.xun-navigation-form-label {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	font-weight: 500
}

.xun-form-textarea {
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	background: var(--color-bg-container);
	width: 100%;
	min-height: 108px;
	color: var(--color-text);
	resize: vertical;
	outline: none;
	padding: .875rem 1rem;
	transition: all .2s
}

.xun-form-textarea:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-form-textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-navigation-form-check {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .625rem;
	font-size: .875rem;
	display: inline-flex
}

.xun-navigation-form-check input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--xun-primary, var(--color-primary))
}

.xun-navigation-apply-success {
	text-align: center
}

.xun-navigation-apply-success-icon {
	background: var(--color-success-bg);
	width: 5.5rem;
	height: 5.5rem;
	color: var(--color-success);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1rem;
	display: flex
}

.xun-navigation-apply-modal .xun-modal-container {
	width: 100%;
	max-width: 680px;
	margin: 1rem;
	max-height: none !important;
	overflow: visible !important
}

.xun-navigation-apply-modal .xun-modal-content {
	background: var(--color-bg-container);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-modal);
	flex-direction: column;
	max-height: calc(100vh - 2rem);
	display: flex;
	overflow: hidden
}

.xun-navigation-apply-modal .xun-modal-header {
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-navigation-apply-modal .xun-modal-close {
	position: static;
	top: auto;
	right: auto
}

.xun-navigation-apply-modal .xun-modal-body {
	min-height: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	overflow-y: auto
}

.xun-navigation-apply-modal .xun-navigation-apply,
.xun-navigation-apply-modal .xun-navigation-apply-success {
	box-shadow: none;
	background: 0 0;
	border-radius: 0;
	padding: 0
}

.xun-navigation-apply-modal .xun-navigation-apply-head {
	border: 1px solid var(--color-border-secondary);
	border-radius: calc(var(--xun-radius, 8px) + 4px);
	background: var(--color-fill-tertiary);
	margin-bottom: 1.25rem;
	padding: 1rem 1rem .875rem
}

.xun-navigation-apply-modal .xun-navigation-apply-desc {
	margin-top: .5rem;
	font-size: .875rem;
	line-height: 1.75
}

.xun-navigation-apply-modal .xun-navigation-apply-form {
	gap: 1.125rem
}

.xun-navigation-apply-modal .xun-navigation-form-grid {
	gap: .875rem
}

.xun-navigation-apply-modal .xun-navigation-form-group {
	gap: .5rem
}

.xun-navigation-apply-modal .xun-navigation-form-label {
	color: var(--color-text);
	font-size: .875rem;
	font-weight: 600
}

.xun-navigation-apply-modal .xun-form-input,
.xun-navigation-apply-modal .xun-form-textarea {
	background: var(--color-bg-elevated);
	border-color: var(--color-border-secondary)
}

.xun-navigation-apply-modal .xun-form-input:focus,
.xun-navigation-apply-modal .xun-form-textarea:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-navigation-apply-modal .xun-form-input {
	min-height: 2.75rem
}

.xun-navigation-apply-modal select.xun-form-input {
	-webkit-appearance: none;
	appearance: none;
	background-image: var(--xun-select-arrow-icon);
	background-position: right .875rem center;
	background-repeat: no-repeat;
	background-size: .75rem .75rem;
	padding-right: 2.5rem
}

.xun-navigation-apply-modal .xun-form-textarea {
	min-height: 104px
}

.xun-navigation-apply-modal #navigation-content.xun-form-textarea {
	min-height: 136px;
	line-height: 1.7
}

.xun-navigation-apply-modal .xun-navigation-form-check {
	border: 1px solid var(--color-border-secondary);
	border-radius: calc(var(--xun-radius, 8px) + 2px);
	background: var(--color-fill-tertiary);
	align-items: flex-start;
	gap: .75rem;
	padding: .875rem 1rem;
	line-height: 1.6;
	display: flex
}

.xun-navigation-apply-modal .xun-navigation-form-check input {
	margin-top: .125rem
}

.xun-navigation-apply-modal .xun-navigation-apply-actions,
.xun-navigation-apply-modal .xun-navigation-apply-success-actions {
	justify-content: flex-end;
	margin-top: 0
}

.xun-navigation-apply-modal .xun-navigation-apply-actions .btn,
.xun-navigation-apply-modal .xun-navigation-apply-success-actions .btn {
	min-width: 7rem
}

.xun-navigation-apply-submit {
	width: auto;
	height: auto;
	margin-top: 0
}

.xun-navigation-apply-submit .xun-btn-loading {
	justify-content: center;
	align-items: center;
	gap: .375rem;
	display: none
}

@media(prefers-color-scheme:dark) {
	:root:not(.light) .xun-navigation-apply-modal .xun-modal-content {
		background: var(--color-bg-container);
		border: 1px solid var(--color-border-secondary)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-modal-header {
		border-bottom-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-navigation-apply-head,
	:root:not(.light) .xun-navigation-apply-modal .xun-navigation-form-check {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-form-input,
	:root:not(.light) .xun-navigation-apply-modal .xun-form-textarea {
		background: var(--color-fill-quaternary);
		border-color: var(--color-border-secondary);
		color: var(--color-text)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-form-input::placeholder,
	:root:not(.light) .xun-navigation-apply-modal .xun-form-textarea::placeholder {
		color: var(--color-text-quaternary)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-form-input:focus,
	:root:not(.light) .xun-navigation-apply-modal .xun-form-textarea:focus {
		background: var(--color-bg-elevated);
		border-color: var(--xun-primary, var(--color-primary));
		box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-navigation-apply-modal .xun-modal-close:hover {
		background: var(--color-fill-secondary)
	}
}

.dark .xun-navigation-apply-modal .xun-modal-content,
body.dark .xun-navigation-apply-modal .xun-modal-content {
	background: var(--color-bg-container);
	border: 1px solid var(--color-border-secondary)
}

.dark .xun-navigation-apply-modal .xun-modal-header,
body.dark .xun-navigation-apply-modal .xun-modal-header {
	border-bottom-color: var(--color-border-secondary)
}

.dark .xun-navigation-apply-modal .xun-navigation-apply-head,
body.dark .xun-navigation-apply-modal .xun-navigation-apply-head,
.dark .xun-navigation-apply-modal .xun-navigation-form-check,
body.dark .xun-navigation-apply-modal .xun-navigation-form-check {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary)
}

.dark .xun-navigation-apply-modal .xun-form-input,
body.dark .xun-navigation-apply-modal .xun-form-input,
.dark .xun-navigation-apply-modal .xun-form-textarea,
body.dark .xun-navigation-apply-modal .xun-form-textarea {
	background: var(--color-fill-quaternary);
	border-color: var(--color-border-secondary);
	color: var(--color-text)
}

.dark .xun-navigation-apply-modal .xun-form-input::placeholder,
body.dark .xun-navigation-apply-modal .xun-form-input::placeholder,
.dark .xun-navigation-apply-modal .xun-form-textarea::placeholder,
body.dark .xun-navigation-apply-modal .xun-form-textarea::placeholder {
	color: var(--color-text-quaternary)
}

.dark .xun-navigation-apply-modal .xun-form-input:focus,
body.dark .xun-navigation-apply-modal .xun-form-input:focus,
.dark .xun-navigation-apply-modal .xun-form-textarea:focus,
body.dark .xun-navigation-apply-modal .xun-form-textarea:focus {
	background: var(--color-bg-elevated);
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px rgba(22, 119, 255, .15)
}

.dark .xun-navigation-apply-modal .xun-modal-close:hover,
body.dark .xun-navigation-apply-modal .xun-modal-close:hover {
	background: var(--color-fill-secondary)
}

@media(max-width:768px) {
	body.xun-navigation-archive-page .xun-navigation-banner {
		display: none
	}

	body.xun-navigation-archive-page.has-transparent-header.has-hero-area .xun-content {
		padding-top: 56px
	}

	body.xun-navigation-archive-page .xun-header.xun-header--transparent {
		background: #fff !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important
	}

	body.xun-navigation-archive-page .xun-header--transparent .xun-logo a,
	body.xun-navigation-archive-page .xun-header--transparent .xun-logo-text,
	body.xun-navigation-archive-page .xun-header--transparent .xun-action-btn,
	body.xun-navigation-archive-page .xun-header--transparent .xun-menu-toggle {
		color: var(--color-text-secondary)
	}

	body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: block
	}

	body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: none
	}

	.single-xun_navigation .xun-software-hero-social {
		display: none !important
	}

	.single-xun_navigation .xun-download-hero-actions {
		align-items: center
	}

	.single-xun_navigation .xun-download-hero-btns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .625rem;
		width: min(100%, 320px);
		margin-left: 0;
		display: grid
	}

	.single-xun_navigation .xun-download-hero-btns .btn {
		white-space: nowrap;
		flex: none;
		width: 100%
	}

	.xun-navigation-recommend-grid {
		grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr))
	}

	.xun-navigation-grid {
		grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr))
	}

	.xun-navigation-section-title {
		font-size: 1.25rem
	}

	.xun-navigation-form-grid {
		grid-template-columns: 1fr
	}

	.xun-navigation-banner-engines {
		gap: .5rem
	}

	.xun-navigation-banner-engine span {
		min-width: 70px;
		padding: .45rem .8rem
	}

	.xun-navigation-search-input-wrap {
		padding-right: .1875rem
	}
}

@media(max-width:768px)and (prefers-color-scheme:dark) {
	:root:not(.light) body.xun-navigation-archive-page .xun-header.xun-header--transparent {
		background: var(--color-bg-container) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
	}

	:root:not(.light) body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	:root:not(.light) body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}
}

@media(max-width:768px) {

	.dark body.xun-navigation-archive-page .xun-header.xun-header--transparent,
	body.dark.xun-navigation-archive-page .xun-header.xun-header--transparent {
		background: var(--color-bg-container) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important
	}

	.dark body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-light,
	body.dark.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-light {
		display: none
	}

	.dark body.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-dark,
	body.dark.xun-navigation-archive-page .xun-header--transparent .xun-logo-img.xun-logo-dark {
		display: block
	}
}

@media(max-width:640px) {
	.xun-navigation-recommend-grid {
		gap: .75rem
	}

	.xun-navigation-recommend-card {
		padding: .875rem .75rem
	}

	.xun-navigation-recommend-card-icon {
		width: 3.5rem;
		height: 3.5rem
	}

	.xun-navigation-recommend-card-title {
		font-size: .9375rem
	}

	.xun-navigation-card-icon {
		width: 2.75rem;
		height: 2.75rem
	}

	.xun-navigation-card {
		gap: .625rem;
		padding: .5rem
	}

	.xun-navigation-banner-search .xun-navigation-search-input-wrap {
		padding-right: .125rem
	}

	.xun-navigation-banner-search .xun-navigation-search-input-wrap .xun-search-btn {
		margin-left: .25rem;
		padding: 0 .875rem
	}

	.xun-navigation-apply,
	.xun-navigation-apply-success {
		padding: 1.125rem
	}

	.xun-navigation-apply-modal .xun-modal-body {
		padding: 1rem 1rem 1.25rem
	}

	.xun-navigation-apply-modal .xun-modal-header {
		padding: .875rem 1rem
	}

	.xun-navigation-apply-modal .xun-navigation-apply-head {
		padding: .875rem
	}

	.xun-navigation-apply-modal .xun-navigation-apply-actions,
	.xun-navigation-apply-modal .xun-navigation-apply-success-actions {
		justify-content: stretch
	}

	.xun-navigation-apply-modal .xun-navigation-apply-actions .btn,
	.xun-navigation-apply-modal .xun-navigation-apply-success-actions .btn {
		flex: auto;
		min-width: 0
	}
}

.xun-user-tickets {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-tickets-header {
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	display: flex
}

.xun-user-back-link {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-quaternary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin-right: .5rem;
	transition: all .2s;
	display: inline-flex
}

.xun-user-back-link:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-user-tickets-form-wrap {
	padding: 1.5rem
}

.xun-user-tickets-form {
	flex-direction: column;
	gap: 1.25rem;
	display: flex
}

.xun-user-form-group {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-user-form-row {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	display: grid
}

.xun-user-form-label {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	font-weight: 500;
	display: flex
}

.xun-user-form-required {
	color: var(--color-error)
}

.xun-user-form-input,
.xun-user-form-textarea {
	width: 100%;
	color: var(--color-text);
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	padding: .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-user-form-input:focus,
.xun-user-form-textarea:focus {
	background: var(--color-bg-elevated);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-user-form-select {
	width: 100%;
	color: var(--color-text);
	background-color: var(--color-fill-secondary);
	background-image: var(--xun-select-arrow-icon);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-position: right .75rem center;
	background-repeat: no-repeat;
	background-size: 12px;
	padding: .625rem 2.25rem .625rem .875rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-user-form-select:hover {
	border-color: var(--color-border)
}

.xun-user-form-select:focus {
	background-color: var(--color-bg-elevated);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg);
	outline: none
}

.xun-user-form-select option {
	background: var(--color-bg-container);
	color: var(--color-text);
	padding: .5rem .75rem
}

.xun-user-form-input::placeholder,
.xun-user-form-textarea::placeholder {
	color: var(--color-text-quaternary)
}

.xun-user-form-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .75rem
}

.xun-user-form-actions {
	align-items: center;
	gap: .75rem;
	margin-top: .5rem;
	display: flex
}

.xun-user-form-actions .btn .btn-loading {
	align-items: center;
	gap: .375rem;
	display: none
}

.xun-user-form-actions .btn .btn-loading svg {
	animation: 1s linear infinite spin
}

.xun-user-form-actions .btn.is-loading .btn-label {
	display: none
}

.xun-user-form-actions .btn.is-loading .btn-loading {
	display: inline-flex
}

.xun-user-tickets-list {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-user-ticket-item {
	gap: 1rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-ticket-item-content {
	flex: 1;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	display: flex
}

.xun-user-ticket-item-main {
	flex-direction: column;
	flex: 1;
	gap: .5rem;
	min-width: 0;
	display: flex
}

.xun-user-ticket-item-title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5
}

.xun-user-ticket-item-title a {
	color: var(--color-text);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-decoration: none;
	transition: color .2s;
	display: -webkit-box;
	overflow: hidden
}

.xun-user-ticket-item-title a:hover {
	color: var(--xun-primary)
}

.xun-user-ticket-item-no {
	font-size: .75rem;
	font-family: var(--font-mono, monospace);
	color: var(--color-text-tertiary)
}

.xun-user-ticket-info {
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 1.25rem;
	display: flex
}

.xun-user-ticket-info-item {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	display: inline-flex
}

.xun-user-ticket-info-item svg {
	color: var(--color-text-tertiary)
}

.xun-user-ticket-conversation {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	display: flex
}

.xun-user-ticket-message {
	gap: .75rem;
	display: flex
}

.xun-user-ticket-message-avatar {
	flex-shrink: 0
}

.xun-user-ticket-message-avatar img {
	object-fit: cover;
	border-radius: 50%;
	width: 48px;
	height: 48px
}

.xun-user-ticket-message-content {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius, 8px);
	flex: 1;
	min-width: 0;
	padding: 1rem
}

.xun-user-ticket-message.is-admin .xun-user-ticket-message-content {
	background: rgba(22, 119, 255, .12)
}

.xun-user-ticket-message-header {
	align-items: center;
	gap: .5rem;
	margin-bottom: .5rem;
	display: flex
}

.xun-user-ticket-message-author {
	color: var(--color-text);
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	font-weight: 600;
	display: inline-flex
}

.xun-user-ticket-admin-badge {
	color: var(--xun-primary);
	background: rgba(22, 119, 255, .15);
	border-radius: 9999px;
	align-items: center;
	padding: .125rem .5rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-flex
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-user-ticket-message.is-admin .xun-user-ticket-message-content {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-ticket-message.is-admin .xun-user-ticket-message-content {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)12%, transparent)
		}
	}

	.xun-user-ticket-admin-badge {
		background: var(--xun-primary, #1677ff)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-user-ticket-admin-badge {
			background: color-mix(in srgb, var(--xun-primary, #1677ff)15%, transparent)
		}
	}
}

.xun-user-ticket-message-time {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-user-ticket-message-body {
	color: var(--color-text);
	font-size: .9375rem;
	line-height: 1.7
}

.xun-user-ticket-message-body p {
	margin: 0 0 .75rem
}

.xun-user-ticket-message-body p:last-child {
	margin-bottom: 0
}

.xun-user-ticket-message-body img {
	border-radius: var(--xun-radius, 8px);
	max-width: 100%;
	height: auto
}

.xun-user-ticket-reply-section {
	padding: 1.5rem
}

.xun-user-ticket-reply-title {
	color: var(--color-text);
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-user-ticket-reply-editor {
	margin-bottom: 1rem
}

.xun-user-ticket-reply-editor .xun-rich-editor {
	min-height: 200px
}

.xun-user-ticket-closed-notice {
	background: var(--color-fill-secondary);
	border-radius: var(--xun-radius-lg, 12px);
	color: var(--color-text-secondary);
	align-items: center;
	gap: .5rem;
	padding: 1rem 1.25rem;
	font-size: .875rem;
	display: flex
}

.xun-user-ticket-closed-notice svg {
	color: var(--color-warning);
	flex-shrink: 0
}

@media(max-width:768px) {
	.xun-user-tickets-header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding: 1rem
	}

	.xun-user-tickets-header .btn {
		justify-content: center;
		width: 100%
	}

	.xun-user-form-row {
		grid-template-columns: 1fr
	}

	.xun-user-tickets-form-wrap,
	.xun-user-ticket-item {
		padding: 1rem
	}

	.xun-user-ticket-item-content {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-user-ticket-info {
		flex-direction: column;
		gap: .5rem;
		padding: 1rem
	}

	.xun-user-ticket-conversation {
		padding: 1rem
	}

	.xun-user-ticket-message {
		flex-direction: column
	}

	.xun-user-ticket-message-avatar {
		align-items: center;
		gap: .5rem;
		display: flex
	}

	.xun-user-ticket-message-avatar img {
		width: 36px;
		height: 36px
	}

	.xun-user-ticket-reply-section {
		padding: 1rem
	}

	.xun-user-form-actions {
		flex-direction: column
	}

	.xun-user-form-actions .btn {
		width: 100%
	}
}

@media(max-width:480px) {
	.xun-user-ticket-item-title {
		font-size: .875rem
	}

	.xun-user-ticket-message-content {
		padding: .75rem
	}

	.xun-user-ticket-message-body {
		font-size: .875rem
	}
}

.xun-distribution {
	flex-direction: column;
	gap: .5rem;
	display: flex
}

.xun-distribution-overview {
	margin-bottom: 0
}

.xun-distribution-overview-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	display: grid
}

.xun-dist-card {
	flex-direction: column;
	padding: 1.25rem;
	display: flex
}

.xun-dist-card-header {
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	display: flex
}

.xun-dist-card-icon {
	border-radius: var(--xun-radius, 8px);
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	display: flex
}

.xun-dist-card-commission .xun-dist-card-icon {
	color: #52c41a;
	background: rgba(82, 196, 26, .12)
}

.xun-dist-card-author .xun-dist-card-icon {
	color: #1890ff;
	background: rgba(24, 144, 255, .12)
}

.xun-dist-card-total .xun-dist-card-icon {
	color: #722ed1;
	background: rgba(114, 46, 209, .12)
}

.xun-dist-card-withdrawn .xun-dist-card-icon {
	color: #13c2c2;
	background: rgba(19, 194, 194, .12)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-dist-card-commission .xun-dist-card-icon {
		background: rgba(82, 196, 26, .12)
	}

	.xun-dist-card-author .xun-dist-card-icon {
		background: rgba(24, 144, 255, .12)
	}

	.xun-dist-card-total .xun-dist-card-icon {
		background: rgba(114, 46, 209, .12)
	}

	.xun-dist-card-withdrawn .xun-dist-card-icon {
		background: rgba(19, 194, 194, .12)
	}
}

.xun-dist-card-label {
	color: var(--color-text-tertiary);
	font-size: .8125rem
}

.xun-dist-card-body {
	align-items: baseline;
	gap: .25rem;
	margin-bottom: .5rem;
	display: flex
}

.xun-dist-card-value {
	color: var(--color-text);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-dist-currency {
	margin-right: .125rem;
	font-size: 1rem;
	font-weight: 500
}

.xun-dist-card-footer {
	margin-top: auto;
	padding-top: .5rem
}

.xun-dist-card-hint {
	color: var(--color-text-quaternary);
	font-size: .75rem
}

.xun-dist-withdraw-btn {
	color: var(--xun-primary);
	cursor: pointer;
	background: 0 0;
	border: none;
	align-items: center;
	gap: .25rem;
	padding: 0;
	font-size: .8125rem;
	font-weight: 500;
	transition: gap .2s;
	display: inline-flex
}

.xun-dist-withdraw-btn:hover {
	gap: .5rem
}

.xun-distribution-link {
	padding: 1.25rem
}

.xun-distribution-section-header {
	margin-bottom: 1rem
}

.xun-distribution-section-title {
	color: var(--color-text);
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	display: flex
}

.xun-distribution-section-title svg {
	color: var(--color-text-tertiary)
}

.xun-distribution-link-content {
	flex-direction: column;
	gap: .75rem;
	display: flex
}

.xun-distribution-link-box {
	gap: .5rem;
	display: flex
}

.xun-distribution-link-input {
	color: var(--color-text);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid #0000;
	outline: none;
	flex: 1;
	padding: .75rem 1rem;
	font-size: .875rem;
	transition: all .2s
}

.xun-distribution-link-input:focus {
	background: var(--color-bg-container);
	border-color: var(--xun-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-distribution-copy-btn {
	color: #fff;
	background: var(--xun-primary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	white-space: nowrap;
	border: none;
	align-items: center;
	gap: .375rem;
	padding: .75rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s;
	display: inline-flex
}

.xun-distribution-copy-btn:hover {
	background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), var(--xun-primary)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.xun-distribution-copy-btn:hover {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.xun-distribution-copy-btn:hover {
			background: color-mix(in srgb, var(--xun-primary)85%, #000)
		}
	}
}

.xun-distribution-copy-btn.is-copied {
	background: var(--color-success)
}

.xun-distribution-link-hint {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .8125rem
}

.xun-distribution-stats {
	padding: 1.25rem
}

.xun-distribution-stats-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	display: grid
}

.xun-dist-stat-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	text-align: center;
	flex-direction: column;
	align-items: center;
	padding: 1rem;
	display: flex
}

.xun-dist-stat-item.xun-dist-stat-total {
	background: var(--color-primary-bg)
}

.xun-dist-stat-value {
	color: var(--color-text);
	margin-bottom: .375rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2
}

.xun-dist-stat-item.xun-dist-stat-total .xun-dist-stat-value {
	color: var(--xun-primary)
}

.xun-dist-stat-label {
	color: var(--color-text-secondary);
	flex-direction: column;
	gap: .125rem;
	font-size: .8125rem;
	display: flex
}

.xun-dist-stat-rate {
	color: var(--color-text-quaternary);
	font-size: .6875rem
}

.xun-distribution-tabs-nav {
	background: var(--color-fill-quaternary);
	border-bottom: 1px solid var(--color-border-secondary);
	gap: 0;
	padding: .5rem;
	display: flex
}

.xun-dist-tab-btn {
	color: var(--color-text-secondary);
	border-radius: var(--xun-radius, 8px);
	cursor: pointer;
	background: 0 0;
	border: none;
	flex: 1;
	padding: .625rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	transition: all .2s
}

.xun-dist-tab-btn:hover {
	color: var(--color-text);
	background: var(--color-bg-container)
}

.xun-dist-tab-btn.is-active {
	color: var(--xun-primary);
	background: var(--color-bg-container);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

.xun-dist-tab-content {
	padding: 1.25rem;
	display: none
}

.xun-dist-tab-content.is-active {
	display: block
}

.xun-dist-filter {
	margin-bottom: 1rem
}

.xun-dist-records {
	min-height: 200px
}

.xun-dist-loading {
	color: var(--color-text-tertiary);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	padding: 3rem;
	display: flex
}

.xun-dist-loading svg {
	animation: 1s linear infinite spin
}

.xun-dist-empty {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3rem;
	display: flex
}

.xun-dist-empty-icon {
	color: var(--color-text-quaternary);
	margin-bottom: 1rem
}

.xun-dist-empty-text {
	color: var(--color-text-tertiary);
	margin: 0;
	font-size: .875rem
}

.xun-dist-record-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .75rem;
	padding: 1rem;
	display: flex
}

.xun-dist-record-item:last-child {
	margin-bottom: 0
}

.xun-dist-record-info {
	flex: 1;
	min-width: 0
}

.xun-dist-record-title {
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 0 .25rem;
	font-size: .875rem;
	font-weight: 500;
	overflow: hidden
}

.xun-dist-record-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	display: flex
}

.xun-dist-record-type {
	border-radius: var(--xun-radius-sm, 4px);
	align-items: center;
	padding: .125rem .5rem;
	font-size: .6875rem;
	font-weight: 500;
	display: inline-flex
}

.xun-dist-record-type.is-referral {
	color: #52c41a;
	background: rgba(82, 196, 26, .1)
}

.xun-dist-record-type.is-author {
	color: #1890ff;
	background: rgba(24, 144, 255, .1)
}

.xun-dist-record-amount {
	color: #52c41a;
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 600
}

.xun-dist-withdrawal-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .75rem;
	padding: 1rem;
	display: flex
}

.xun-dist-withdrawal-item:last-child {
	margin-bottom: 0
}

.xun-dist-withdrawal-info {
	flex: 1;
	min-width: 0
}

.xun-dist-withdrawal-amount {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-dist-withdrawal-fee-detail {
	color: var(--color-text-quaternary);
	gap: .75rem;
	margin-bottom: .25rem;
	font-size: .6875rem;
	display: flex
}

.xun-dist-withdrawal-fee-detail span:last-child {
	color: var(--color-error, #ff4d4f)
}

.xun-dist-withdrawal-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	display: flex
}

.xun-dist-withdrawal-status {
	border-radius: var(--xun-radius-sm, 4px);
	flex-shrink: 0;
	align-items: center;
	padding: .25rem .625rem;
	font-size: .75rem;
	font-weight: 500;
	display: inline-flex
}

.xun-dist-withdrawal-status.is-pending {
	color: var(--color-warning);
	background: var(--color-warning-bg)
}

.xun-dist-withdrawal-status.is-approved {
	color: #1890ff;
	background: rgba(24, 144, 255, .1)
}

.xun-dist-withdrawal-status.is-rejected {
	color: var(--color-error);
	background: var(--color-error-bg)
}

.xun-dist-withdrawal-status.is-paid {
	color: var(--color-success);
	background: var(--color-success-bg)
}

.xun-dist-user-item {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: 1rem;
	margin-bottom: .75rem;
	padding: 1rem;
	display: flex
}

.xun-dist-user-item:last-child {
	margin-bottom: 0
}

.xun-dist-user-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	overflow: hidden
}

.xun-dist-user-avatar img {
	object-fit: cover;
	width: 100%;
	height: 100%
}

.xun-dist-user-info {
	flex: 1;
	min-width: 0
}

.xun-dist-user-name {
	color: var(--color-text);
	margin: 0 0 .25rem;
	font-size: .875rem;
	font-weight: 500
}

.xun-dist-user-meta {
	color: var(--color-text-tertiary);
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	display: flex
}

.xun-dist-user-contribution {
	text-align: right;
	flex-shrink: 0
}

.xun-dist-user-contribution-value {
	color: #52c41a;
	font-size: .875rem;
	font-weight: 600
}

.xun-dist-user-contribution-label {
	color: var(--color-text-quaternary);
	font-size: .6875rem
}

.xun-dist-rules-content {
	color: var(--color-text-secondary);
	font-size: .875rem;
	line-height: 1.8
}

.xun-dist-rules-content h4 {
	color: var(--color-text);
	margin: 1.5rem 0 .75rem;
	font-size: 1rem;
	font-weight: 600
}

.xun-dist-rules-content h4:first-child {
	margin-top: 0
}

.xun-dist-rules-content ol,
.xun-dist-rules-content ul {
	margin: 0;
	padding-left: 1.5rem
}

.xun-dist-rules-content li {
	margin-bottom: .5rem
}

.xun-dist-rules-default {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	padding: 1rem
}

.xun-withdrawal-modal {
	z-index: 1000;
	opacity: 0;
	justify-content: center;
	align-items: center;
	transition: opacity .2s;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.xun-withdrawal-modal.is-active {
	opacity: 1
}

.xun-withdrawal-content {
	width: 420px;
	max-width: calc(100vw - 2rem);
	padding: 1.5rem
}

.xun-withdrawal-header {
	text-align: center;
	margin-bottom: 1.25rem
}

.xun-withdrawal-title {
	color: var(--color-text);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600
}

.xun-withdrawal-footer {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: flex-end;
	gap: .75rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	display: flex
}

.xun-withdrawal-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-form-group {
	flex-direction: column;
	gap: .375rem;
	display: flex
}

.xun-form-label {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	font-weight: 500
}

.xun-form-input {
	width: 100%;
	height: 2.5rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	transition: all .2s var(--ease-smooth);
	outline: none;
	padding: 0 .875rem;
	font-size: .875rem
}

.xun-form-input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-primary-bg)
}

.xun-form-input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-form-hint {
	color: var(--color-text-quaternary);
	margin: 0;
	font-size: .75rem
}

.xun-withdrawal-fee-info {
	margin-top: .5rem
}

.xun-withdrawal-fee-details {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 1px solid var(--color-border-secondary);
	padding: .875rem 1rem
}

.xun-withdrawal-fee-row {
	justify-content: space-between;
	align-items: center;
	padding: .375rem 0;
	display: flex
}

.xun-withdrawal-fee-row:not(:last-child) {
	border-bottom: 1px dashed var(--color-border-secondary)
}

.xun-withdrawal-fee-label {
	color: var(--color-text-secondary);
	font-size: .8125rem
}

.xun-withdrawal-fee-value {
	color: var(--color-text);
	font-size: .875rem;
	font-weight: 500
}

.xun-withdrawal-fee-deduct .xun-withdrawal-fee-value {
	color: var(--color-error, #ff4d4f)
}

.xun-withdrawal-fee-actual {
	padding-top: .5rem !important
}

.xun-withdrawal-fee-actual .xun-withdrawal-fee-label {
	color: var(--color-text);
	font-weight: 600
}

.xun-withdrawal-fee-actual .xun-withdrawal-fee-value {
	color: var(--xun-primary);
	font-size: 1rem;
	font-weight: 700
}

.xun-withdrawal-fee-hint {
	color: var(--color-text-quaternary);
	text-align: center;
	margin: .5rem 0 0;
	font-size: .75rem
}

.dark .xun-withdrawal-fee-details {
	background: var(--color-fill-secondary);
	border-color: var(--color-border)
}

.xun-withdrawal-available {
	background: var(--color-primary-bg);
	border-radius: var(--xun-radius, 8px);
	justify-content: space-between;
	align-items: baseline;
	padding: .875rem 1rem;
	display: flex
}

.xun-withdrawal-available-value {
	color: var(--xun-primary);
	font-size: 1.375rem;
	font-weight: 700
}

.xun-withdrawal-available-hint {
	color: var(--color-text-tertiary);
	font-size: .75rem
}

.xun-withdrawal-methods {
	gap: .625rem;
	display: flex
}

.xun-withdrawal-method {
	cursor: pointer;
	flex: 1
}

.xun-withdrawal-method input {
	display: none
}

.xun-withdrawal-method-content {
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius, 8px);
	border: 2px solid #0000;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	padding: .875rem .5rem;
	transition: all .2s;
	display: flex
}

.xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
	background: var(--color-primary-bg);
	border-color: var(--xun-primary)
}

.xun-withdrawal-method-content svg {
	width: 28px;
	height: 28px
}

.xun-withdrawal-method-content span {
	color: var(--color-text-secondary);
	font-size: .8125rem
}

.xun-withdrawal-method input:checked+.xun-withdrawal-method-content span {
	color: var(--xun-primary);
	font-weight: 500
}

.xun-dist-pagination {
	border-top: 1px solid var(--color-border-secondary);
	justify-content: center;
	gap: .375rem;
	margin-top: 1rem;
	padding-top: 1rem;
	display: flex
}

.xun-dist-pagination-btn {
	min-width: 2rem;
	height: 2rem;
	color: var(--color-text-secondary);
	background: var(--color-fill-quaternary);
	border-radius: var(--xun-radius-sm, 6px);
	cursor: pointer;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0 .5rem;
	font-size: .8125rem;
	transition: all .2s;
	display: inline-flex
}

.xun-dist-pagination-btn:hover {
	color: var(--xun-primary);
	background: var(--color-primary-bg)
}

.xun-dist-pagination-btn.is-active {
	color: #fff;
	background: var(--xun-primary)
}

.xun-dist-pagination-btn:disabled {
	opacity: .5;
	cursor: not-allowed
}

@media(max-width:1024px) {

	.xun-distribution-overview-grid,
	.xun-distribution-stats-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:768px) {
	.xun-distribution {
		gap: .5rem
	}

	.xun-distribution-overview-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .5rem
	}

	.xun-dist-card {
		padding: .5rem
	}

	.xun-dist-card-value {
		font-size: 1.375rem
	}

	.xun-distribution-link {
		padding: 1rem
	}

	.xun-distribution-link-box {
		flex-direction: column
	}

	.xun-distribution-copy-btn {
		justify-content: center;
		width: 100%
	}

	.xun-distribution-stats {
		padding: 1rem
	}

	.xun-distribution-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .75rem
	}

	.xun-dist-stat-item {
		padding: .875rem
	}

	.xun-dist-stat-value {
		font-size: 1.25rem
	}

	.xun-distribution-tabs-nav {
		padding: .375rem
	}

	.xun-dist-tab-btn {
		padding: .5rem .75rem;
		font-size: .8125rem
	}

	.xun-dist-tab-content {
		padding: 1rem
	}

	.xun-dist-record-item,
	.xun-dist-withdrawal-item,
	.xun-dist-user-item {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem
	}

	.xun-dist-record-amount,
	.xun-dist-withdrawal-status,
	.xun-dist-user-contribution {
		align-self: flex-end
	}

	.xun-withdrawal-methods {
		flex-direction: column
	}
}

@media(max-width:480px) {
	.xun-distribution-overview-grid {
		grid-template-columns: 1fr 1fr;
		gap: .5rem
	}

	.xun-dist-card {
		padding: .875rem
	}

	.xun-dist-card-icon {
		width: 28px;
		height: 28px
	}

	.xun-dist-card-icon svg {
		width: 16px;
		height: 16px
	}

	.xun-dist-card-label {
		font-size: .75rem
	}

	.xun-dist-card-value {
		font-size: 1.125rem
	}

	.xun-dist-currency {
		font-size: .875rem
	}

	.xun-distribution-stats-grid {
		gap: .5rem
	}

	.xun-dist-stat-item {
		padding: .75rem .5rem
	}

	.xun-dist-stat-value {
		font-size: 1.125rem
	}

	.xun-dist-stat-label {
		font-size: .75rem
	}

	.xun-dist-stat-rate {
		font-size: .625rem
	}
}

.dark .xun-dist-stat-item,
.dark .xun-dist-record-item,
.dark .xun-dist-withdrawal-item,
.dark .xun-dist-user-item {
	background: var(--color-fill-secondary)
}

.dark .xun-dist-stat-item.xun-dist-stat-total {
	background: rgba(22, 119, 255, .15)
}

.dark .xun-distribution-tabs-nav {
	background: var(--color-fill-secondary)
}

.dark .xun-distribution-link-input,
.dark .xun-form-input {
	background: var(--color-fill-secondary);
	border-color: var(--color-border-secondary)
}

.dark .xun-distribution-link-input:focus,
.dark .xun-form-input:focus {
	background: var(--color-bg-elevated)
}

.dark .xun-dist-filter-select {
	background-color: var(--color-fill-secondary);
	border-color: var(--color-border);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
}

.dark .xun-dist-filter-select:focus {
	background-color: var(--color-bg-elevated)
}

.dark .xun-withdrawal-available {
	background: rgba(22, 119, 255, .15)
}

.dark .xun-withdrawal-method-content {
	background: var(--color-fill-secondary)
}

.dark .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
	background: rgba(22, 119, 255, .15)
}

@supports (background:color-mix(in srgb, red 50%, blue)) {
	.dark .xun-dist-stat-item.xun-dist-stat-total {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-dist-stat-item.xun-dist-stat-total {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-withdrawal-available {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-withdrawal-available {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}

	.dark .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
		background: var(--xun-primary)
	}

	@supports (color:color-mix(in lab, red, red)) {
		.dark .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
			background: color-mix(in srgb, var(--xun-primary)15%, transparent)
		}
	}
}

@media(prefers-color-scheme:dark) {

	:root:not(.light) .xun-dist-stat-item,
	:root:not(.light) .xun-dist-record-item,
	:root:not(.light) .xun-dist-withdrawal-item,
	:root:not(.light) .xun-dist-user-item {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-dist-stat-item.xun-dist-stat-total {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-distribution-tabs-nav {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-dist-tab-btn.is-active {
		background: var(--color-bg-container)
	}

	:root:not(.light) .xun-distribution-link-input,
	:root:not(.light) .xun-form-input {
		background: var(--color-fill-secondary);
		border-color: var(--color-border-secondary)
	}

	:root:not(.light) .xun-distribution-link-input:focus,
	:root:not(.light) .xun-form-input:focus {
		background: var(--color-bg-elevated)
	}

	:root:not(.light) .xun-dist-filter-select {
		background-color: var(--color-fill-secondary);
		border-color: var(--color-border);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
	}

	:root:not(.light) .xun-dist-filter-select:focus {
		background-color: var(--color-bg-elevated)
	}

	:root:not(.light) .xun-withdrawal-available {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-withdrawal-method-content {
		background: var(--color-fill-secondary)
	}

	:root:not(.light) .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
		background: rgba(22, 119, 255, .15)
	}

	:root:not(.light) .xun-withdrawal-fee-details {
		background: var(--color-fill-secondary);
		border-color: var(--color-border)
	}

	@supports (background:color-mix(in srgb, red 50%, blue)) {
		:root:not(.light) .xun-dist-stat-item.xun-dist-stat-total {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-dist-stat-item.xun-dist-stat-total {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-withdrawal-available {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-withdrawal-available {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}

		:root:not(.light) .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
			background: var(--xun-primary)
		}

		@supports (color:color-mix(in lab, red, red)) {
			:root:not(.light) .xun-withdrawal-method input:checked+.xun-withdrawal-method-content {
				background: color-mix(in srgb, var(--xun-primary)15%, transparent)
			}
		}
	}
}

.xun-404 {
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 200px);
	padding: 2rem 1rem;
	display: flex
}

.xun-404__container {
	text-align: center;
	width: 100%;
	max-width: 600px
}

.xun-404__illustration {
	margin-bottom: 2rem
}

.xun-404__svg {
	width: 100%;
	max-width: 400px;
	height: auto
}

.xun-404__number {
	font-size: 72px;
	font-weight: 700;
	font-family: var(--font-display, "Inter", sans-serif)
}

.xun-404__stars path {
	animation: 2s ease-in-out infinite twinkle
}

.xun-404__stars path:first-child {
	animation-delay: 0s
}

.xun-404__stars path:nth-child(2) {
	animation-delay: .5s
}

.xun-404__stars path:nth-child(3) {
	animation-delay: 1s
}

.xun-404__stars path:nth-child(4) {
	animation-delay: 1.5s
}

@keyframes twinkle {

	0%,
	to {
		opacity: .3;
		transform: scale(1)
	}

	50% {
		opacity: 1;
		transform: scale(1.1)
	}
}

.xun-404__content {
	margin-bottom: 2.5rem
}

.xun-404__title {
	color: var(--color-text);
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3
}

.xun-404__desc {
	color: var(--color-text-secondary);
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.6
}

.xun-404__actions {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	display: flex
}

.xun-404__actions .btn {
	min-width: 140px
}

.xun-404__actions .btn svg {
	flex-shrink: 0
}

.xun-404__search-label {
	color: var(--color-text-secondary);
	margin: 0 0 1rem;
	font-size: .875rem
}

.xun-404__search-form {
	width: 100%
}

.xun-404__search-input-wrapper {
	background: var(--color-bg-layout);
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--xun-radius, 8px);
	align-items: center;
	gap: .75rem;
	padding: .375rem .5rem .375rem 1rem;
	transition: border-color .2s, box-shadow .2s;
	display: flex
}

.xun-404__search-input-wrapper:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-404__search-icon {
	color: var(--color-text-tertiary);
	flex-shrink: 0
}

.xun-404__search-input {
	min-width: 0;
	color: var(--color-text);
	background: 0 0;
	border: none;
	outline: none;
	flex: 1;
	padding: .5rem 0;
	font-size: .9375rem
}

.xun-404__search-input::placeholder {
	color: var(--color-text-tertiary)
}

.xun-404__search-btn {
	flex-shrink: 0
}

@media(max-width:640px) {
	.xun-404 {
		min-height: calc(100vh - 160px);
		padding: 1.5rem 1rem
	}

	.xun-404__svg {
		max-width: 300px
	}

	.xun-404__number {
		font-size: 56px
	}

	.xun-404__title {
		font-size: 1.5rem
	}

	.xun-404__desc {
		font-size: .9375rem
	}

	.xun-404__actions {
		flex-direction: column
	}

	.xun-404__actions .btn {
		width: 100%
	}

	.xun-404__search {
		padding: 1.25rem
	}

	.xun-404__search-input-wrapper {
		flex-wrap: wrap
	}

	.xun-404__search-btn {
		width: 100%;
		margin-top: .5rem
	}
}

.xun-forgot-password-page {
	min-height: calc(100vh - var(--header-height, 64px));
	background: var(--color-bg);
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	display: flex
}

.xun-forgot-password-container {
	width: 100%;
	max-width: 520px
}

.xun-forgot-password-card {
	background: var(--color-bg-elevated);
	border-radius: var(--xun-radius-lg, 12px);
	box-shadow: var(--shadow-card);
	padding: 2rem
}

.xun-forgot-password-steps {
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
	padding: 0 1rem;
	display: flex
}

.xun-step {
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	display: flex
}

.xun-step-number {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
	background: var(--color-fill-secondary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	font-size: .875rem;
	font-weight: 600;
	transition: all .3s;
	display: flex
}

.xun-step-text {
	color: var(--color-text-tertiary);
	white-space: nowrap;
	font-size: .75rem;
	transition: color .3s
}

.xun-step.is-active .xun-step-number {
	color: #fff;
	background: var(--xun-primary, var(--color-primary))
}

.xun-step.is-active .xun-step-text {
	color: var(--xun-primary, var(--color-primary));
	font-weight: 500
}

.xun-step.is-completed .xun-step-number {
	color: #fff;
	background: var(--color-success)
}

.xun-step.is-completed .xun-step-text {
	color: var(--color-success)
}

.xun-step-line {
	background: var(--color-border-secondary);
	flex: 1;
	height: 2px;
	margin: 0 .75rem 1.25rem;
	transition: background .3s
}

.xun-step-line.is-completed {
	background: var(--color-success)
}

.xun-forgot-password-step {
	animation: .3s fadeIn
}

.xun-forgot-password-header {
	text-align: center;
	margin-bottom: 1.5rem
}

.xun-forgot-password-header h2 {
	color: var(--color-text);
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-forgot-password-header p {
	color: var(--color-text-secondary);
	margin: 0;
	font-size: .875rem;
	line-height: 1.6
}

.xun-forgot-password-form {
	flex-direction: column;
	gap: 1rem;
	display: flex
}

.xun-forgot-field {
	flex-direction: column;
	gap: .375rem;
	display: flex
}

.xun-forgot-field label {
	color: var(--color-text-secondary);
	font-size: .8125rem;
	font-weight: 500
}

.xun-forgot-field input {
	width: 100%;
	height: 2.75rem;
	color: var(--color-text);
	background: var(--color-bg-container);
	border: 1px solid var(--color-border);
	border-radius: var(--xun-radius, 8px);
	transition: all .2s var(--ease-smooth);
	outline: none;
	padding: 0 1rem;
	font-size: .9375rem
}

.xun-forgot-field input:focus {
	border-color: var(--xun-primary, var(--color-primary));
	box-shadow: 0 0 0 3px var(--color-primary-bg)
}

.xun-forgot-field input::placeholder {
	color: var(--color-text-quaternary)
}

.xun-forgot-field-code .xun-code-wrap {
	gap: .75rem;
	display: flex
}

.xun-forgot-field-code .xun-code-wrap input {
	flex: 1;
	min-width: 0
}

.xun-send-forgot-code {
	white-space: nowrap;
	flex-shrink: 0
}

.xun-send-forgot-code:disabled {
	opacity: .6;
	cursor: not-allowed
}

.xun-forgot-field .xun-password-wrap {
	position: relative
}

.xun-forgot-field .xun-password-wrap input {
	padding-right: 2.75rem
}

.xun-forgot-field .xun-password-toggle {
	width: 32px;
	height: 32px;
	color: var(--color-text-quaternary);
	border-radius: var(--xun-radius-sm, 4px);
	cursor: pointer;
	background: 0 0;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: color .2s;
	display: flex;
	position: absolute;
	top: 50%;
	right: .5rem;
	transform: translateY(-50%)
}

.xun-forgot-field .xun-password-toggle:hover {
	color: var(--color-text-secondary)
}

.xun-forgot-submit {
	margin-top: .5rem
}

.xun-forgot-submit .xun-btn-loading {
	justify-content: center;
	align-items: center;
	gap: .5rem;
	display: none
}

.xun-forgot-submit.is-loading .xun-btn-text {
	display: none
}

.xun-forgot-submit.is-loading .xun-btn-loading {
	display: flex
}

.xun-forgot-password-success {
	text-align: center;
	padding: 1rem 0
}

.xun-success-icon {
	width: 80px;
	height: 80px;
	color: var(--color-success);
	background: linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(16, 185, 129, .2));
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1.5rem;
	display: flex
}

.xun-forgot-password-success h2 {
	color: var(--color-text);
	margin: 0 0 .75rem;
	font-size: 1.25rem;
	font-weight: 600
}

.xun-forgot-password-success p {
	color: var(--color-text-secondary);
	margin: 0 0 1.5rem;
	font-size: .875rem;
	line-height: 1.6
}

.xun-forgot-password-footer {
	border-top: 1px solid var(--color-border-secondary);
	text-align: center;
	margin-top: 1.5rem;
	padding-top: 1.5rem
}

.xun-back-to-login {
	color: var(--color-text-secondary);
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex
}

.xun-back-to-login:hover {
	color: var(--xun-primary, var(--color-primary))
}

.xun-back-to-login svg {
	transition: transform .2s
}

.xun-back-to-login:hover svg {
	transform: translate(-2px)
}

@media(max-width:480px) {
	.xun-forgot-password-page {
		min-height: calc(100vh - var(--header-height, 64px));
		align-items: flex-start;
		padding: 2rem 1rem 1rem
	}

	.xun-forgot-password-card {
		padding: 1.5rem
	}

	.xun-forgot-password-steps {
		padding: 0
	}

	.xun-step-text {
		font-size: .6875rem
	}

	.xun-step-number {
		width: 28px;
		height: 28px;
		font-size: .8125rem
	}

	.xun-step-line {
		margin: 0 .5rem 1rem
	}

	.xun-forgot-field-code .xun-code-wrap {
		flex-direction: column
	}

	.xun-send-forgot-code {
		width: 100%
	}
}

@property --tw-rotate-x {
	syntax: "*";
	inherits: false
}

@property --tw-rotate-y {
	syntax: "*";
	inherits: false
}

@property --tw-rotate-z {
	syntax: "*";
	inherits: false
}

@property --tw-skew-x {
	syntax: "*";
	inherits: false
}

@property --tw-skew-y {
	syntax: "*";
	inherits: false
}

@property --tw-space-y-reverse {
	syntax: "*";
	inherits: false;
	initial-value: 0
}

@property --tw-border-style {
	syntax: "*";
	inherits: false;
	initial-value: solid
}

@property --tw-font-weight {
	syntax: "*";
	inherits: false
}

@property --tw-ordinal {
	syntax: "*";
	inherits: false
}

@property --tw-slashed-zero {
	syntax: "*";
	inherits: false
}

@property --tw-numeric-figure {
	syntax: "*";
	inherits: false
}

@property --tw-numeric-spacing {
	syntax: "*";
	inherits: false
}

@property --tw-numeric-fraction {
	syntax: "*";
	inherits: false
}

@property --tw-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}

@property --tw-shadow-color {
	syntax: "*";
	inherits: false
}

@property --tw-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}

@property --tw-inset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
	syntax: "*";
	inherits: false
}

@property --tw-inset-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}

@property --tw-ring-color {
	syntax: "*";
	inherits: false
}

@property --tw-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
	syntax: "*";
	inherits: false
}

@property --tw-inset-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}

@property --tw-ring-inset {
	syntax: "*";
	inherits: false
}

@property --tw-ring-offset-width {
	syntax: "<length>";
	inherits: false;
	initial-value: 0
}

@property --tw-ring-offset-color {
	syntax: "*";
	inherits: false;
	initial-value: #fff
}

@property --tw-ring-offset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}

@property --tw-outline-style {
	syntax: "*";
	inherits: false;
	initial-value: solid
}

@property --tw-blur {
	syntax: "*";
	inherits: false
}

@property --tw-brightness {
	syntax: "*";
	inherits: false
}

@property --tw-contrast {
	syntax: "*";
	inherits: false
}

@property --tw-grayscale {
	syntax: "*";
	inherits: false
}

@property --tw-hue-rotate {
	syntax: "*";
	inherits: false
}

@property --tw-invert {
	syntax: "*";
	inherits: false
}

@property --tw-opacity {
	syntax: "*";
	inherits: false
}

@property --tw-saturate {
	syntax: "*";
	inherits: false
}

@property --tw-sepia {
	syntax: "*";
	inherits: false
}

@property --tw-drop-shadow {
	syntax: "*";
	inherits: false
}

@property --tw-drop-shadow-color {
	syntax: "*";
	inherits: false
}

@property --tw-drop-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}

@property --tw-drop-shadow-size {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-blur {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-brightness {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-contrast {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-grayscale {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-hue-rotate {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-invert {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-opacity {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-saturate {
	syntax: "*";
	inherits: false
}

@property --tw-backdrop-sepia {
	syntax: "*";
	inherits: false
}

@property --tw-ease {
	syntax: "*";
	inherits: false
}