/*!
 * 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-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-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: (--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
    }

    .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 {
    .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
    }

    .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
    }

    .table {
        display: table
    }

    .w-full {
        width: 100%
    }

    .flex-1 {
        flex: 1
    }

    .flex-shrink {
        flex-shrink: 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)))
    }

    .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)
    }

    .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-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-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)
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .underline {
        text-decoration-line: underline
    }

    .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,)
    }

    .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,)
    }

    .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)
    }

    .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;
        transform: translate(-50%,-50%)scale(.9)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%)scale(1)
    }
}

@keyframes modalSlideOut {
    0% {
        opacity: 1;
        transform: translate(-50%,-50%)scale(1)
    }

    to {
        opacity: 0;
        transform: translate(-50%,-50%)scale(.9)
    }
}

@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: 1rem;
    display: grid
}

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

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

.xun-layout-wrapper.xun-sidebar-left .xun-layout-sidebar {
    order: -1
}

.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: 1rem;
    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 {
        order: 0
    }

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

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

@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: (--color-bg-layout,#ffffff)
}

.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%)
}

.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;
    padding: 0 20px;
    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 {
        height:56px;
        padding: 0 16px
    }

    .xun-logo a {
        font-size: 18px
    }

    .xun-logo img,.xun-logo-img {
        height: 32px
    }

    .xun-logo {
        min-width: 80px
    }
}

@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-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: 1rem 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;
    padding: 0 1rem
}

.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:1rem 0
    }

    .xun-slider-container {
        padding: 0 .75rem
    }

    .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: .75rem;
    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: .75rem;
    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: .75rem;
    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;
    padding: 0 1rem
}

.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 .75rem
    }

    .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: 1rem 0
}

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: 1rem;
    margin: 0 auto;
    padding: 0 1rem;
    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 {
    order: -1
}

.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: 1rem
}

.xun-single-header {
    padding: 1rem 1.5rem 0
}

.xun-single-title {
    color: var(--color-text);
    margin: 0 0 1rem;
    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-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: 1.25rem 1.5rem
}

.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-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 {
    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-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: 1rem;
    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: 1rem;
    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)
}

@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 {
        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: 1rem .75rem
    }

    .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 {
    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 {
    order: -1
}

.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 {
        order: 0
    }

    .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-vip-section {
    padding: 2rem 0
}

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

.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;
    margin: 0;
    font-size: .875rem
}

.xun-vip-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    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:1.5rem 0
    }

    .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: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    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: 1rem;
    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-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: 1rem;
    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-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: 1.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);
    column-gap: 1rem;
    display: block!important
}

.xun-posts-waterfall .xun-post-card {
    break-inside: avoid;
    width: 100%;
    margin-bottom: 1.25rem;
    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: .75rem;
        margin-bottom: 1rem
    }

    .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: 1rem;
        grid-template-columns: repeat(var(--mobile-columns,2),1fr)!important
    }

    .xun-posts-section .xun-posts-waterfall .xun-posts-grid {
        column-gap: 1rem;
        column-count: var(--mobile-columns,2)!important
    }

    .xun-posts-section .xun-posts-waterfall .xun-post-card {
        margin-bottom: 1rem
    }

    .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: column
    }

    .xun-posts-section .xun-posts-list .xun-post-thumb {
        width: 100%
    }

    .xun-posts-section .xun-posts-list .xun-post-content {
        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: 1.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;
    padding: 0 1rem
}

@media(max-width: 768px) {
    .xun-custom-code-section .xun-posts-container {
        padding:0 .75rem
    }
}

.xun-fonts-container {
    box-sizing: border-box;
    padding: 0 1rem
}

@media(max-width: 768px) {
    .xun-fonts-container {
        padding:0 .75rem
    }
}

.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;
    padding: 0 1rem
}

.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-direction: column;
    gap: .25rem;
    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);
    margin: 0;
    padding-left: .75rem;
    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 .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: 2rem 0
}

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

.xun-featured-cats-header {
    border-bottom: 1px solid var(--color-border-secondary,#e5e5e5);
    justify-content: space-between;
    align-items: center;
    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);
    margin: 0;
    font-size: .875rem
}

.xun-featured-cats-grid {
    grid-template-columns: repeat(var(--featured-cats-count,4),1fr);
    gap: 1rem;
    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 0
    }

    .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;
    max-width: 600px;
    margin: 0 0 1rem;
    font-size: .95rem
}

.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: 1rem;
    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: 1rem;
    display: grid
}

.xun-community-main {
    flex-direction: column;
    gap: 1rem;
    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: 1rem;
    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-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 {
    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: .75rem;
    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-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 {
        flex-flow: column;
        gap: .5rem
    }

    .xun-community-cats-nav .xun-subcat-item {
        flex-shrink: 0;
        padding-left: 1rem
    }

    .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 {
        justify-content: space-between
    }

    .xun-forum-sort {
        flex: 1
    }

    .xun-forum-sort-item {
        flex: 1;
        justify-content: center;
        padding: .375rem .5rem;
        font-size: .75rem
    }

    .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-inner {
    background-color: var(--color-fill-tertiary);
    border-radius: var(--xun-radius,8px);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    display: flex
}

.xun-footer-copyright {
    color: var(--color-text-secondary);
    font-size: .875rem
}

.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-inner {
        text-align: center;
        flex-direction: column;
        gap: .5rem
    }

    .xun-footer-copyright {
        font-size: .6875rem
    }

    .xun-footer-beian {
        justify-content: center;
        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-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-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-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-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 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 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-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 {
    justify-content: center;
    gap: .75rem;
    display: flex
}

.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-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-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: var(--xun-primary,var(--color-primary));
    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%;
    padding: 3px;
    display: block
}

.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-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 .xun-download-btns>:not(:first-child) {
        display: none
    }

    .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: 1rem;
    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: 1rem;
        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: 1rem;
        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: 1rem
}

.xun-dashboard-overview-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    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: 1rem;
    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: 1rem;
        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: 1rem;
        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-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: 1rem;
    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: .75rem;
    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: 1rem;
    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: 1rem;
        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: 1rem;
    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:1rem
    }

    .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-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-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-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-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: 1rem;
    display: flex
}

.xun-user-follow-list {
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
    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: 1rem;
    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:1rem
    }

    .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: 1rem;
    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: 1rem;
    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: 1rem;
    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:1rem
    }

    .xun-user-membership-header {
        padding: 1rem
    }

    .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: 1rem;
    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: 1rem;
    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: 1rem;
    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:1rem
    }

    .xun-user-level-header {
        padding: 1rem
    }

    .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: 1rem;
    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: 1rem;
    padding: .875rem 1.25rem;
    display: flex
}

.xun-user-order-info {
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    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-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-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-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
}

@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: 1rem;
        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
    }
}

@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
    }
}

@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: 1rem;
    display: flex
}

.xun-user-downloads-list {
    flex-direction: column;
    gap: .75rem;
    display: flex
}

.xun-user-download-item {
    gap: 1rem;
    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: 1rem
    }

    .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: 1rem;
    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: 1rem;
    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:.75rem
    }

    .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-full {
    justify-content: center;
    width: 100%
}

.js-xun-purchase-paid {
    justify-content: center;
    align-items: center;
    gap: .5rem;
    display: inline-flex;
    position: relative
}

.js-xun-purchase-paid .xun-paid-reading-btn-spinner {
    flex-shrink: 0;
    display: none
}

.js-xun-purchase-paid .xun-paid-reading-btn-loading {
    display: none
}

.js-xun-purchase-paid.is-loading {
    pointer-events: none;
    opacity: .8
}

.js-xun-purchase-paid.is-loading .xun-paid-reading-btn-spinner {
    display: inline-flex
}

.js-xun-purchase-paid.is-loading .xun-paid-reading-btn-text {
    display: none
}

.js-xun-purchase-paid.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-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-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-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: 2rem 0
}

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

.xun-coupon-header {
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    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:1.5rem 0
    }

    .xun-coupon-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        margin-bottom: 1rem
    }

    .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: 1.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-user-tickets {
    flex-direction: column;
    gap: 1rem;
    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: 1rem;
        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: 1rem;
    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:.75rem
    }

    .xun-distribution-overview-grid {
        grid-template-columns: repeat(2,1fr);
        gap: .75rem
    }

    .xun-dist-card {
        padding: 1rem
    }

    .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-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-ease {
    syntax: "*";
    inherits: false
}