@charset "UTF-8";

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-cyrillic.C5lxZ8CY.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek-ext.CqjqNYQ-.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-greek.BBVDIX6e.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-vietnamese.BjW4sHH5.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin-ext.4ZJIpNVo.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-roman-latin.Di8DUHzh.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic-ext.r48I6akx.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-cyrillic.By2_1cv3.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek-ext.1u6EdAuj.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-greek.DJ8dCoTZ.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-vietnamese.BSbpV94h.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin-ext.CN1xVJS-.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-italic-latin.C2AdPX0b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Punctuation SC';
  font-weight: 400;
  src: local('PingFang SC Regular'), local('Noto Sans CJK SC'),
    local('Microsoft YaHei');
  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
    U+00B7, U+007E, U+002F;
}

@font-face {
  font-family: 'Punctuation SC';
  font-weight: 500;
  src: local('PingFang SC Medium'), local('Noto Sans CJK SC'),
    local('Microsoft YaHei');
  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
    U+00B7, U+007E, U+002F;
}

@font-face {
  font-family: 'Punctuation SC';
  font-weight: 600;
  src: local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
    local('Microsoft YaHei Bold');
  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
    U+00B7, U+007E, U+002F;
}

@font-face {
  font-family: 'Punctuation SC';
  font-weight: 700;
  src: local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
    local('Microsoft YaHei Bold');
  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
    U+00B7, U+007E, U+002F;
}

/* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --output-file="inter-\3c style>-<subset>.woff2" --flavor=woff2` */
/**
 * Colors: Solid
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-white: #ffffff;
  --vp-c-black: #000000;

  --vp-c-neutral: var(--vp-c-black);
  --vp-c-neutral-inverse: var(--vp-c-white);
}

.dark {
  --vp-c-neutral: var(--vp-c-white);
  --vp-c-neutral-inverse: var(--vp-c-black);
}

/**
 * Colors: Palette
 *
 * The primitive colors used for accent colors. These colors are referenced
 * by functional colors such as "Text", "Background", or "Brand".
 *
 * Each colors have exact same color scale system with 3 levels of solid
 * colors with different brightness, and 1 soft color.
 *
 * - `XXX-1`: The most solid color used mainly for colored text. It must
 *   satisfy the contrast ratio against when used on top of `XXX-soft`.
 *
 * - `XXX-2`: The color used mainly for hover state of the button.
 *
 * - `XXX-3`: The color for solid background, such as bg color of the button.
 *    It must satisfy the contrast ratio with pure white (#ffffff) text on
 *    top of it.
 *
 * - `XXX-soft`: The color used for subtle background such as custom container
 *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
 *    on top of it.
 *
 *    The soft color must be semi transparent alpha channel. This is crucial
 *    because it allows adding multiple "soft" colors on top of each other
 *    to create a accent, such as when having inline code block inside
 *    custom containers.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-gray-1: #dddde3;
  --vp-c-gray-2: #e4e4e9;
  --vp-c-gray-3: #ebebef;
  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);

  --vp-c-indigo-1: #3451b2;
  --vp-c-indigo-2: #3a5ccc;
  --vp-c-indigo-3: #5672cd;
  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);

  --vp-c-purple-1: #6f42c1;
  --vp-c-purple-2: #7e4cc9;
  --vp-c-purple-3: #8e5cd9;
  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);

  --vp-c-green-1: #18794e;
  --vp-c-green-2: #299764;
  --vp-c-green-3: #30a46c;
  --vp-c-green-soft: rgba(16, 185, 129, 0.14);

  --vp-c-yellow-1: #915930;
  --vp-c-yellow-2: #946300;
  --vp-c-yellow-3: #9f6a00;
  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);

  --vp-c-red-1: #b8272c;
  --vp-c-red-2: #d5393e;
  --vp-c-red-3: #e0575b;
  --vp-c-red-soft: rgba(244, 63, 94, 0.14);

  --vp-c-sponsor: #db2777;
}

.dark {
  --vp-c-gray-1: #515c67;
  --vp-c-gray-2: #414853;
  --vp-c-gray-3: #32363f;
  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);

  --vp-c-indigo-1: #a8b1ff;
  --vp-c-indigo-2: #5c73e7;
  --vp-c-indigo-3: #3e63dd;
  --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);

  --vp-c-purple-1: #c8abfa;
  --vp-c-purple-2: #a879e6;
  --vp-c-purple-3: #8e5cd9;
  --vp-c-purple-soft: rgba(159, 122, 234, 0.16);

  --vp-c-green-1: #3dd68c;
  --vp-c-green-2: #30a46c;
  --vp-c-green-3: #298459;
  --vp-c-green-soft: rgba(16, 185, 129, 0.16);

  --vp-c-yellow-1: #f9b44e;
  --vp-c-yellow-2: #da8b17;
  --vp-c-yellow-3: #a46a0a;
  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);

  --vp-c-red-1: #f66f81;
  --vp-c-red-2: #f14158;
  --vp-c-red-3: #b62a3c;
  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
}

/**
 * Colors: Background
 *
 * - `bg`: The bg color used for main screen.
 *
 * - `bg-alt`: The alternative bg color used in places such as "sidebar",
 *   or "code block".
 *
 * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
 *   such as "dialog".
 *
 * - `bg-soft`: The bg color to slightly distinguish some components from
 *   the page. Used for things like "carbon ads" or "table".
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f6f6f7;
}

.dark {
  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-elv: #202127;
  --vp-c-bg-soft: #202127;
}

/**
 * Colors: Borders
 *
 * - `divider`: This is used for separators. This is used to divide sections
 *   within the same components, such as having separator on "h2" heading.
 *
 * - `border`: This is designed for borders on interactive components.
 *   For example this should be used for a button outline.
 *
 * - `gutter`: This is used to divide components in the page. For example
 *   the header and the lest of the page.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-border: #c2c2c4;
  --vp-c-divider: #e2e2e3;
  --vp-c-gutter: #e2e2e3;
}

.dark {
  --vp-c-border: #3c3f44;
  --vp-c-divider: #2e2e32;
  --vp-c-gutter: #000000;
}

/**
 * Colors: Text
 *
 * - `text-1`: Used for primary text.
 *
 * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
 *
 * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-text-1: #3c3c43;
  --vp-c-text-2: #67676c;
  --vp-c-text-3: #929295;
}

.dark {
  --vp-c-text-1: #dfdfd6;
  --vp-c-text-2: #98989f;
  --vp-c-text-3: #6a6a71;
}

/**
 * Colors: Function
 *
 * - `default`: The color used purely for subtle indication without any
 *   special meanings attached to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
 *
 * - `tip`: Used to indicate useful information. The default theme uses the
 *   brand color for this by default.
 *
 * - `warning`: Used to indicate warning to the users. Used in custom
 *   container, badges, etc.
 *
 * - `danger`: Used to show error, or dangerous message to the users. Used
 *   in custom container, badges, etc.
 *
 * To understand the scaling system, refer to "Colors: Palette" section.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);

  --vp-c-brand-1: var(--vp-c-indigo-1);
  --vp-c-brand-2: var(--vp-c-indigo-2);
  --vp-c-brand-3: var(--vp-c-indigo-3);
  --vp-c-brand-soft: var(--vp-c-indigo-soft);

  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
  --vp-c-brand: var(--vp-c-brand-1);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-note-1: var(--vp-c-brand-1);
  --vp-c-note-2: var(--vp-c-brand-2);
  --vp-c-note-3: var(--vp-c-brand-3);
  --vp-c-note-soft: var(--vp-c-brand-soft);

  --vp-c-success-1: var(--vp-c-green-1);
  --vp-c-success-2: var(--vp-c-green-2);
  --vp-c-success-3: var(--vp-c-green-3);
  --vp-c-success-soft: var(--vp-c-green-soft);

  --vp-c-important-1: var(--vp-c-purple-1);
  --vp-c-important-2: var(--vp-c-purple-2);
  --vp-c-important-3: var(--vp-c-purple-3);
  --vp-c-important-soft: var(--vp-c-purple-soft);

  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);

  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);

  --vp-c-caution-1: var(--vp-c-red-1);
  --vp-c-caution-2: var(--vp-c-red-2);
  --vp-c-caution-3: var(--vp-c-red-3);
  --vp-c-caution-soft: var(--vp-c-red-soft);
}

/**
 * Typography
 * -------------------------------------------------------------------------- */

:root {
  --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
    'Liberation Mono', 'Courier New', monospace;
  font-optical-sizing: auto;
}

:root:where(:lang(zh)) {
  --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}

/**
 * Shadows
 * -------------------------------------------------------------------------- */

:root {
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}

/**
 * Z-indexes
 * -------------------------------------------------------------------------- */

:root {
  --vp-z-index-footer: 10;
  --vp-z-index-local-nav: 20;
  --vp-z-index-nav: 30;
  --vp-z-index-layout-top: 40;
  --vp-z-index-backdrop: 50;
  --vp-z-index-sidebar: 60;
}

@media (min-width: 960px) {
  :root {
    --vp-z-index-sidebar: 25;
  }
}

/**
 * Layouts
 * -------------------------------------------------------------------------- */

:root {
  --vp-layout-max-width: 1440px;
}

/**
 * Component: Header Anchor
 * -------------------------------------------------------------------------- */

:root {
  --vp-header-anchor-symbol: '#';
}

/**
 * Component: Code
 * -------------------------------------------------------------------------- */

:root {
  --vp-code-line-height: 1.7;
  --vp-code-font-size: 0.875em;
  --vp-code-color: var(--vp-c-brand-1);
  --vp-code-link-color: var(--vp-c-brand-1);
  --vp-code-link-hover-color: var(--vp-c-brand-2);
  --vp-code-bg: var(--vp-c-default-soft);

  --vp-code-block-color: var(--vp-c-text-2);
  --vp-code-block-bg: var(--vp-c-bg-alt);
  --vp-code-block-divider-color: var(--vp-c-gutter);

  --vp-code-lang-color: var(--vp-c-text-3);

  --vp-code-line-highlight-color: var(--vp-c-default-soft);
  --vp-code-line-number-color: var(--vp-c-text-3);

  --vp-code-line-diff-add-color: var(--vp-c-success-soft);
  --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);

  --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
  --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);

  --vp-code-line-warning-color: var(--vp-c-warning-soft);
  --vp-code-line-error-color: var(--vp-c-danger-soft);

  --vp-code-copy-code-border-color: var(--vp-c-divider);
  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
  --vp-code-copy-code-active-text: var(--vp-c-text-2);
  --vp-code-copy-copied-text-content: 'Copied';

  --vp-code-tab-divider: var(--vp-code-block-divider-color);
  --vp-code-tab-text-color: var(--vp-c-text-2);
  --vp-code-tab-bg: var(--vp-code-block-bg);
  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-text-color: var(--vp-c-text-1);
  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
}

:lang(es),
:lang(pt) {
  --vp-code-copy-copied-text-content: 'Copiado';
}
:lang(fa) {
  --vp-code-copy-copied-text-content: 'کپی شد';
}
:lang(ko) {
  --vp-code-copy-copied-text-content: '복사됨';
}
:lang(ru) {
  --vp-code-copy-copied-text-content: 'Скопировано';
}
:lang(zh) {
  --vp-code-copy-copied-text-content: '已复制';
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);

  --vp-button-alt-border: transparent;
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-bg: var(--vp-c-default-3);
  --vp-button-alt-hover-border: transparent;
  --vp-button-alt-hover-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: var(--vp-c-default-2);
  --vp-button-alt-active-border: transparent;
  --vp-button-alt-active-text: var(--vp-c-text-1);
  --vp-button-alt-active-bg: var(--vp-c-default-1);

  --vp-button-sponsor-border: var(--vp-c-text-2);
  --vp-button-sponsor-text: var(--vp-c-text-2);
  --vp-button-sponsor-bg: transparent;
  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-bg: transparent;
  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
  --vp-button-sponsor-active-bg: transparent;
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-font-size: 14px;
  --vp-custom-block-code-font-size: 13px;

  --vp-custom-block-info-border: transparent;
  --vp-custom-block-info-text: var(--vp-c-text-1);
  --vp-custom-block-info-bg: var(--vp-c-default-soft);
  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-note-border: transparent;
  --vp-custom-block-note-text: var(--vp-c-text-1);
  --vp-custom-block-note-bg: var(--vp-c-default-soft);
  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);

  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);

  --vp-custom-block-important-border: transparent;
  --vp-custom-block-important-text: var(--vp-c-text-1);
  --vp-custom-block-important-bg: var(--vp-c-important-soft);
  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);

  --vp-custom-block-warning-border: transparent;
  --vp-custom-block-warning-text: var(--vp-c-text-1);
  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);

  --vp-custom-block-danger-border: transparent;
  --vp-custom-block-danger-text: var(--vp-c-text-1);
  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);

  --vp-custom-block-caution-border: transparent;
  --vp-custom-block-caution-text: var(--vp-c-text-1);
  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);

  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
}

/**
 * Component: Input
 * -------------------------------------------------------------------------- */

:root {
  --vp-input-border-color: var(--vp-c-border);
  --vp-input-bg-color: var(--vp-c-bg-alt);

  --vp-input-switch-bg-color: var(--vp-c-default-soft);
}

/**
 * Component: Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-nav-height: 64px;
  --vp-nav-bg-color: var(--vp-c-bg);
  --vp-nav-screen-bg-color: var(--vp-c-bg);
  --vp-nav-logo-height: 24px;
}

.hide-nav {
  --vp-nav-height: 0px;
}

.hide-nav .VPSidebar {
  --vp-nav-height: 22px;
}

/**
 * Component: Local Nav
 * -------------------------------------------------------------------------- */

:root {
  --vp-local-nav-bg-color: var(--vp-c-bg);
}

/**
 * Component: Sidebar
 * -------------------------------------------------------------------------- */

:root {
  --vp-sidebar-width: 272px;
  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
}

/**
 * Colors Backdrop
 * -------------------------------------------------------------------------- */

:root {
  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: var(--vp-c-brand-1);
  --vp-home-hero-name-background: transparent;

  --vp-home-hero-image-background-image: none;
  --vp-home-hero-image-filter: none;
}

/**
 * Component: Badge
 * -------------------------------------------------------------------------- */

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-tip-1);
  --vp-badge-tip-bg: var(--vp-c-tip-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

/**
 * Component: Carbon Ads
 * -------------------------------------------------------------------------- */

:root {
  --vp-carbon-ads-text-color: var(--vp-c-text-1);
  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
}

/**
  * Component: Local Search
  * -------------------------------------------------------------------------- */

:root {
  --vp-local-search-bg: var(--vp-c-bg);
  --vp-local-search-result-bg: var(--vp-c-bg);
  --vp-local-search-result-border: var(--vp-c-divider);
  --vp-local-search-result-selected-bg: var(--vp-c-bg);
  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

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

html {
  line-height: 1.4;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

html.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  line-height: 24px;
  font-family: var(--vp-font-family-base);
  font-size: 16px;
  font-weight: 400;
  color: var(--vp-c-text-1);
  background-color: var(--vp-c-bg);
  font-synthesis: style;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
}

p {
  margin: 0;
}

strong,
b {
  font-weight: 600;
}

/**
 * Avoid 300ms click delay on touch devices that support the `touch-action`
 * CSS property.
 *
 * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
 * touch devices and IE Mobile 10-11 DON'T remove the click delay when
 * `<meta name="viewport" content="width=device-width">` is present.
 * However, they DO support removing the click delay via
 * `touch-action: manipulation`.
 *
 * See:
 * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
 * - http://caniuse.com/#feat=css-touch-action
 * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 */
a,
area,
button,
[role='button'],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

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

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

blockquote {
  margin: 0;
}

pre,
code,
kbd,
samp {
  font-family: var(--vp-font-family-mono);
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

figure {
  margin: 0;
}

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

button,
input,
optgroup,
select,
textarea {
  border: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

button {
  padding: 0;
  font-family: inherit;
  background-color: transparent;
  background-image: none;
}

button:enabled,
[role='button']:enabled {
  cursor: pointer;
}

button:focus,
button:focus-visible {
  outline: 1px dotted;
  outline: 4px auto -webkit-focus-ring-color;
}

button:focus:not(:focus-visible) {
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

table {
  border-collapse: collapse;
}

input {
  background-color: transparent;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--vp-c-text-3);
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--vp-c-text-3);
}

input::placeholder,
textarea::placeholder {
  color: var(--vp-c-text-3);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

textarea {
  resize: vertical;
}

select {
  -webkit-appearance: none;
}

fieldset {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
  overflow-wrap: break-word;
}

vite-error-overlay {
  z-index: 9999;
}

mjx-container {
  overflow-x: auto;
}

mjx-container > svg {
  display: inline-block;
  margin: auto;
}
[class^='vpi-'],
[class*=' vpi-'],
.vp-icon {
  width: 1em;
  height: 1em;
}
[class^='vpi-'].bg,
[class*=' vpi-'].bg,
.vp-icon.bg {
  background-size: 100% 100%;
  background-color: transparent;
}
[class^='vpi-']:not(.bg),
[class*=' vpi-']:not(.bg),
.vp-icon:not(.bg) {
  -webkit-mask: var(--icon) no-repeat;
  mask: var(--icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: inherit;
}

/* internal icons - used under ISC from https://lucide.dev/ */
.vpi-align-left {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
}
.vpi-arrow-right,
.vpi-arrow-down,
.vpi-arrow-left,
.vpi-arrow-up {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.vpi-chevron-right,
.vpi-chevron-down,
.vpi-chevron-left,
.vpi-chevron-up {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.vpi-chevron-down,
.vpi-arrow-down {
  /*rtl:ignore*/
  transform: rotate(90deg);
}
.vpi-chevron-left,
.vpi-arrow-left {
  /*rtl:ignore*/
  transform: rotate(180deg);
}
.vpi-chevron-up,
.vpi-arrow-up {
  /*rtl:ignore*/
  transform: rotate(-90deg);
}
.vpi-square-pen {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E");
}
.vpi-plus {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
}
.vpi-sun {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
.vpi-moon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
}
.vpi-more-horizontal {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
}
.vpi-languages {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
}
.vpi-heart {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
.vpi-search {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.vpi-layout-list {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E");
}
.vpi-delete {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E");
}
.vpi-corner-down-left {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
}
:root {
  /* clipboard */
  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
  /* clipboard-copy */
  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.custom-block {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 16px 16px 8px;
  line-height: 24px;
  font-size: var(--vp-custom-block-font-size);
  color: var(--vp-c-text-2);
}

.custom-block.info {
  border-color: var(--vp-custom-block-info-border);
  color: var(--vp-custom-block-info-text);
  background-color: var(--vp-custom-block-info-bg);
}

.custom-block.info a,
.custom-block.info code {
  color: var(--vp-c-brand-1);
}

.custom-block.info a:hover,
.custom-block.info a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.info code {
  background-color: var(--vp-custom-block-info-code-bg);
}

.custom-block.note {
  border-color: var(--vp-custom-block-note-border);
  color: var(--vp-custom-block-note-text);
  background-color: var(--vp-custom-block-note-bg);
}

.custom-block.note a,
.custom-block.note code {
  color: var(--vp-c-brand-1);
}

.custom-block.note a:hover,
.custom-block.note a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.note code {
  background-color: var(--vp-custom-block-note-code-bg);
}

.custom-block.tip {
  border-color: var(--vp-custom-block-tip-border);
  color: var(--vp-custom-block-tip-text);
  background-color: var(--vp-custom-block-tip-bg);
}

.custom-block.tip a,
.custom-block.tip code {
  color: var(--vp-c-tip-1);
}

.custom-block.tip a:hover,
.custom-block.tip a:hover > code {
  color: var(--vp-c-tip-2);
}

.custom-block.tip code {
  background-color: var(--vp-custom-block-tip-code-bg);
}

.custom-block.important {
  border-color: var(--vp-custom-block-important-border);
  color: var(--vp-custom-block-important-text);
  background-color: var(--vp-custom-block-important-bg);
}

.custom-block.important a,
.custom-block.important code {
  color: var(--vp-c-important-1);
}

.custom-block.important a:hover,
.custom-block.important a:hover > code {
  color: var(--vp-c-important-2);
}

.custom-block.important code {
  background-color: var(--vp-custom-block-important-code-bg);
}

.custom-block.warning {
  border-color: var(--vp-custom-block-warning-border);
  color: var(--vp-custom-block-warning-text);
  background-color: var(--vp-custom-block-warning-bg);
}

.custom-block.warning a,
.custom-block.warning code {
  color: var(--vp-c-warning-1);
}

.custom-block.warning a:hover,
.custom-block.warning a:hover > code {
  color: var(--vp-c-warning-2);
}

.custom-block.warning code {
  background-color: var(--vp-custom-block-warning-code-bg);
}

.custom-block.danger {
  border-color: var(--vp-custom-block-danger-border);
  color: var(--vp-custom-block-danger-text);
  background-color: var(--vp-custom-block-danger-bg);
}

.custom-block.danger a,
.custom-block.danger code {
  color: var(--vp-c-danger-1);
}

.custom-block.danger a:hover,
.custom-block.danger a:hover > code {
  color: var(--vp-c-danger-2);
}

.custom-block.danger code {
  background-color: var(--vp-custom-block-danger-code-bg);
}

.custom-block.caution {
  border-color: var(--vp-custom-block-caution-border);
  color: var(--vp-custom-block-caution-text);
  background-color: var(--vp-custom-block-caution-bg);
}

.custom-block.caution a,
.custom-block.caution code {
  color: var(--vp-c-caution-1);
}

.custom-block.caution a:hover,
.custom-block.caution a:hover > code {
  color: var(--vp-c-caution-2);
}

.custom-block.caution code {
  background-color: var(--vp-custom-block-caution-code-bg);
}

.custom-block.details {
  border-color: var(--vp-custom-block-details-border);
  color: var(--vp-custom-block-details-text);
  background-color: var(--vp-custom-block-details-bg);
}

.custom-block.details a {
  color: var(--vp-c-brand-1);
}

.custom-block.details a:hover,
.custom-block.details a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.details code {
  background-color: var(--vp-custom-block-details-code-bg);
}

.custom-block-title {
  font-weight: 600;
}

.custom-block p + p {
  margin: 8px 0;
}

.custom-block.details summary {
  margin: 0 0 8px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.custom-block.details summary + p {
  margin: 8px 0;
}

.custom-block a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.25s;
}

.custom-block a:hover {
  opacity: 0.75;
}

.custom-block code {
  font-size: var(--vp-custom-block-code-font-size);
}

.custom-block.custom-block th,
.custom-block.custom-block blockquote > p {
  font-size: var(--vp-custom-block-font-size);
  color: inherit;
}
.dark .vp-code span {
  color: var(--shiki-dark, inherit);
}

html:not(.dark) .vp-code span {
  color: var(--shiki-light, inherit);
}
.vp-code-group {
  margin-top: 16px;
}

.vp-code-group .tabs {
  position: relative;
  display: flex;
  margin-right: -24px;
  margin-left: -24px;
  padding: 0 12px;
  background-color: var(--vp-code-tab-bg);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
}

@media (min-width: 640px) {
  .vp-code-group .tabs {
    margin-right: 0;
    margin-left: 0;
    border-radius: 8px 8px 0 0;
  }
}

.vp-code-group .tabs input {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.vp-code-group .tabs label {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding: 0 12px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-code-tab-text-color);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s;
}

.vp-code-group .tabs label::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
  content: '';
  background-color: transparent;
  transition: background-color 0.25s;
}

.vp-code-group label:hover {
  color: var(--vp-code-tab-hover-text-color);
}

.vp-code-group input:checked + label {
  color: var(--vp-code-tab-active-text-color);
}

.vp-code-group input:checked + label::after {
  background-color: var(--vp-code-tab-active-bar-color);
}

.vp-code-group div[class*='language-'],
.vp-block {
  display: none;
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.vp-code-group div[class*='language-'].active,
.vp-block.active {
  display: block;
}

.vp-block {
  padding: 20px 24px;
}
/**
 * Headings
 * -------------------------------------------------------------------------- */

.vp-doc h1:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h2:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h3:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h4:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h5:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h6:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: relative;
  font-weight: 600;
  outline: none;
}

.vp-doc h1:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  letter-spacing: -0.02em;
  line-height: 40px;
  font-size: 28px;
}

.vp-doc h2:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 48px 0 16px;
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
  letter-spacing: -0.02em;
  line-height: 32px;
  font-size: 24px;
}

.vp-doc h3:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 32px 0 0;
  letter-spacing: -0.01em;
  line-height: 28px;
  font-size: 20px;
}

.vp-doc h4:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 24px 0 0;
  letter-spacing: -0.01em;
  line-height: 24px;
  font-size: 18px;
}

.vp-doc .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -0.87em;
  font-weight: 500;
  user-select: none;
  opacity: 0;
  text-decoration: none;
  transition:
    color 0.25s,
    opacity 0.25s;
}

.vp-doc .header-anchor:before:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  content: var(--vp-header-anchor-symbol);
}

.vp-doc h1:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h1 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h2:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h2 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h3:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h3 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h4:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h4 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h5:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h5 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h6:hover .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h6 .header-anchor:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  opacity: 1;
}

@media (min-width: 768px) {
  .vp-doc h1:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
    letter-spacing: -0.02em;
    line-height: 40px;
    font-size: 32px;
  }
}

.vp-doc h2 .header-anchor:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  top: 24px;
}

/**
 * Paragraph and inline elements
 * -------------------------------------------------------------------------- */

.vp-doc p:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc summary:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 16px 0;
}

.vp-doc p:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  line-height: 28px;
}

.vp-doc blockquote:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 16px 0;
  border-left: 2px solid var(--vp-c-divider);
  padding-left: 16px;
  transition: border-color 0.5s;
  color: var(--vp-c-text-2);
}

.vp-doc blockquote > p:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 0;
  font-size: 16px;
  transition: color 0.5s;
}

.vp-doc a:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-weight: 500;
  color: var(--vp-c-brand-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:
    color 0.25s,
    opacity 0.25s;
}

.vp-doc a:hover:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  color: var(--vp-c-brand-2);
}

.vp-doc strong:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-weight: 600;
}

/**
 * Lists
 * -------------------------------------------------------------------------- */

.vp-doc ul:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc ol:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  padding-left: 1.25rem;
  margin: 16px 0;
}

.vp-doc ul:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  list-style: disc;
}

.vp-doc ol:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  list-style: decimal;
}

.vp-doc li + li:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin-top: 8px;
}

.vp-doc li > ol:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc li > ul:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 8px 0 0;
}

/**
 * Table
 * -------------------------------------------------------------------------- */

.vp-doc table:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  display: block;
  border-collapse: collapse;
  margin: 20px 0;
  overflow-x: auto;
}

.vp-doc tr:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-c-bg);
  border-top: 1px solid var(--vp-c-divider);
  transition: background-color 0.5s;
}

.vp-doc tr:nth-child(2n):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-c-bg-soft);
}

.vp-doc th:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc td:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  border: 1px solid var(--vp-c-divider);
  padding: 8px 16px;
}

.vp-doc th:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background-color: var(--vp-c-bg-soft);
}

.vp-doc td:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-size: 14px;
}

/**
 * Decorational elements
 * -------------------------------------------------------------------------- */

.vp-doc hr:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--vp-c-divider);
}

/**
 * Custom Block
 * -------------------------------------------------------------------------- */

.vp-doc .custom-block:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 16px 0;
}

.vp-doc .custom-block p:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 8px 0;
  line-height: 24px;
}

.vp-doc .custom-block p:first-child:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 0;
}

.vp-doc .custom-block div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 8px 0;
  border-radius: 8px;
}

.vp-doc .custom-block div[class*='language-'] code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-weight: 400;
  background-color: transparent;
}

.vp-doc .custom-block .vp-code-group .tabs:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

/**
 * Code
 * -------------------------------------------------------------------------- */

/* inline code */
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-color);
}

.vp-doc :not(pre) > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  border-radius: 4px;
  padding: 3px 6px;
  background-color: var(--vp-code-bg);
  transition:
    color 0.25s,
    background-color 0.5s;
}

.vp-doc a > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  color: var(--vp-code-link-color);
}

.vp-doc a:hover > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  color: var(--vp-code-link-hover-color);
}

.vp-doc h1 > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h2 > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h3 > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc h4 > code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  font-size: 0.9em;
}

.vp-doc div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-block:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: relative;
  margin: 16px -24px;
  background-color: var(--vp-code-block-bg);
  overflow-x: auto;
  transition: background-color 0.5s;
}

@media (min-width: 640px) {
  .vp-doc div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
  .vp-block:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
    border-radius: 8px;
    margin: 16px 0;
  }
}

@media (max-width: 639px) {
  .vp-doc li div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
    border-radius: 8px 0 0 8px;
  }
}

.vp-doc div[class*='language-'] + div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc div[class$='-api'] + div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-']:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin-top: -8px;
}

.vp-doc [class*='language-'] pre:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc [class*='language-'] code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  /*rtl:ignore*/
  direction: ltr;
  /*rtl:ignore*/
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.vp-doc [class*='language-'] pre:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 20px 0;
  background: transparent;
  overflow-x: auto;
}

.vp-doc [class*='language-'] code:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  display: block;
  padding: 0 24px;
  width: fit-content;
  min-width: 100%;
  line-height: var(--vp-code-line-height);
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-block-color);
  transition: color 0.5s;
}

.vp-doc [class*='language-'] code .highlighted:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-code-line-highlight-color);
  transition: background-color 0.5s;
  margin: 0 -24px;
  padding: 0 24px;
  width: calc(100% + 2 * 24px);
  display: inline-block;
}

.vp-doc [class*='language-'] code .highlighted.error:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-code-line-error-color);
}

.vp-doc [class*='language-'] code .highlighted.warning:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-code-line-warning-color);
}

.vp-doc [class*='language-'] code .diff:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  transition: background-color 0.5s;
  margin: 0 -24px;
  padding: 0 24px;
  width: calc(100% + 2 * 24px);
  display: inline-block;
}

.vp-doc [class*='language-'] code .diff:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::before {
  position: absolute;
  left: 10px;
}

.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  filter: blur(0.095rem);
  opacity: 0.4;
  transition:
    filter 0.35s,
    opacity 0.35s;
}

.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  opacity: 0.7;
  transition:
    filter 0.35s,
    opacity 0.35s;
}

.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  filter: blur(0);
  opacity: 1;
}

.vp-doc [class*='language-'] code .diff.remove:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-code-line-diff-remove-color);
  opacity: 0.7;
}

.vp-doc [class*='language-'] code .diff.remove:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::before {
  content: '-';
  color: var(--vp-code-line-diff-remove-symbol-color);
}

.vp-doc [class*='language-'] code .diff.add:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  background-color: var(--vp-code-line-diff-add-color);
}

.vp-doc [class*='language-'] code .diff.add:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::before {
  content: '+';
  color: var(--vp-code-line-diff-add-symbol-color);
}

.vp-doc div[class*='language-'].line-numbers-mode:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  /*rtl:ignore*/
  padding-left: 32px;
}

.vp-doc .line-numbers-wrapper:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: absolute;
  top: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: 3;
  /*rtl:ignore*/
  border-right: 1px solid var(--vp-code-block-divider-color);
  padding-top: 20px;
  width: 32px;
  text-align: center;
  font-family: var(--vp-font-family-mono);
  line-height: var(--vp-code-line-height);
  font-size: var(--vp-code-font-size);
  color: var(--vp-code-line-number-color);
  transition:
    border-color 0.5s,
    color 0.5s;
}

.vp-doc [class*='language-'] > button.copy:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  /*rtl:ignore*/
  direction: ltr;
  position: absolute;
  top: 12px;
  /*rtl:ignore*/
  right: 12px;
  z-index: 3;
  border: 1px solid var(--vp-code-copy-code-border-color);
  border-radius: 4px;
  width: 40px;
  height: 40px;
  background-color: var(--vp-code-copy-code-bg);
  opacity: 0;
  cursor: pointer;
  background-image: var(--vp-icon-copy);
  background-position: 50%;
  background-size: 20px;
  background-repeat: no-repeat;
  transition:
    border-color 0.25s,
    background-color 0.25s,
    opacity 0.25s;
}

.vp-doc [class*='language-']:hover > button.copy:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc [class*='language-'] > button.copy:focus:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  opacity: 1;
}

.vp-doc [class*='language-'] > button.copy:hover:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc [class*='language-'] > button.copy.copied:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  border-color: var(--vp-code-copy-code-hover-border-color);
  background-color: var(--vp-code-copy-code-hover-bg);
}

.vp-doc [class*='language-'] > button.copy.copied:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc [class*='language-'] > button.copy:hover.copied:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  /*rtl:ignore*/
  border-radius: 0 4px 4px 0;
  background-color: var(--vp-code-copy-code-hover-bg);
  background-image: var(--vp-icon-copied);
}

.vp-doc [class*='language-'] > button.copy.copied:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::before,
.vp-doc [class*='language-'] > button.copy:hover.copied:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::before {
  position: relative;
  top: -1px;
  /*rtl:ignore*/
  transform: translateX(calc(-100% - 1px));
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--vp-code-copy-code-hover-border-color);
  /*rtl:ignore*/
  border-right: 0;
  /*rtl:ignore*/
  border-radius: 4px 0 0 4px;
  padding: 0 10px;
  width: fit-content;
  height: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-code-copy-code-active-text);
  background-color: var(--vp-code-copy-code-hover-bg);
  white-space: nowrap;
  content: var(--vp-code-copy-copied-text-content);
}

.vp-doc [class*='language-'] > span.lang:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  position: absolute;
  top: 2px;
  /*rtl:ignore*/
  right: 8px;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  color: var(--vp-code-lang-color);
  transition:
    color 0.4s,
    opacity 0.4s;
}

.vp-doc [class*='language-']:hover > button.copy + span.lang:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc [class*='language-'] > button.copy:focus + span.lang:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  opacity: 0;
}

/**
 * Component: Team
 * -------------------------------------------------------------------------- */

.vp-doc .VPTeamMembers:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin-top: 24px;
}

.vp-doc .VPTeamMembers.small.count-1 .container:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 0 !important;
  max-width: calc((100% - 24px) / 2) !important;
}

.vp-doc .VPTeamMembers.small.count-2 .container:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)),
.vp-doc .VPTeamMembers.small.count-3 .container:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  max-width: 100% !important;
}

.vp-doc .VPTeamMembers.medium.count-1 .container:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *)) {
  margin: 0 !important;
  max-width: calc((100% - 24px) / 2) !important;
}

/**
 * External links
 * -------------------------------------------------------------------------- */

/* prettier-ignore */
:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg))):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::after {
  display: inline-block;
  margin-top: -1px;
  margin-left: 4px;
  width: 11px;
  height: 11px;
  background: currentColor;
  color: var(--vp-c-text-3);
  flex-shrink: 0;
  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  /*rtl:raw:transform: scaleX(-1);*/
}

.vp-external-link-icon:not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::after {
  content: '';
}

/* prettier-ignore */
.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg))):not(:where(.example-box, .example-box *, .vp-raw, .vp-raw *))::after {
  content: '';
  color: currentColor;
}
/**
 * VPSponsors styles are defined as global because a new class gets
 * allied in onMounted` hook and we can't use scoped style.
 */
.vp-sponsor {
  border-radius: 16px;
  overflow: hidden;
}

.vp-sponsor.aside {
  border-radius: 12px;
}

.vp-sponsor-section + .vp-sponsor-section {
  margin-top: 4px;
}

.vp-sponsor-tier {
  margin: 0 0 4px !important;
  text-align: center;
  letter-spacing: 1px !important;
  line-height: 24px;
  width: 100%;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background-color: var(--vp-c-bg-soft);
}

.vp-sponsor.normal .vp-sponsor-tier {
  padding: 13px 0 11px;
  font-size: 14px;
}

.vp-sponsor.aside .vp-sponsor-tier {
  padding: 9px 0 7px;
  font-size: 12px;
}

.vp-sponsor-grid + .vp-sponsor-tier {
  margin-top: 4px;
}

.vp-sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vp-sponsor-grid.xmini .vp-sponsor-grid-link {
  height: 64px;
}
.vp-sponsor-grid.xmini .vp-sponsor-grid-image {
  max-width: 64px;
  max-height: 22px;
}

.vp-sponsor-grid.mini .vp-sponsor-grid-link {
  height: 72px;
}
.vp-sponsor-grid.mini .vp-sponsor-grid-image {
  max-width: 96px;
  max-height: 24px;
}

.vp-sponsor-grid.small .vp-sponsor-grid-link {
  height: 96px;
}
.vp-sponsor-grid.small .vp-sponsor-grid-image {
  max-width: 96px;
  max-height: 24px;
}

.vp-sponsor-grid.medium .vp-sponsor-grid-link {
  height: 112px;
}
.vp-sponsor-grid.medium .vp-sponsor-grid-image {
  max-width: 120px;
  max-height: 36px;
}

.vp-sponsor-grid.big .vp-sponsor-grid-link {
  height: 184px;
}
.vp-sponsor-grid.big .vp-sponsor-grid-image {
  max-width: 192px;
  max-height: 56px;
}

.vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item {
  width: calc((100% - 4px) / 2);
}

.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 2) / 3);
}

.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 3) / 4);
}

.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 4) / 5);
}

.vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
  width: calc((100% - 4px * 5) / 6);
}

.vp-sponsor-grid-item {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: background-color 0.25s;
}

.vp-sponsor-grid-item:hover {
  background-color: var(--vp-c-default-soft);
}

.vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
  filter: grayscale(0) invert(0);
}

.vp-sponsor-grid-item.empty:hover {
  background-color: var(--vp-c-bg-soft);
}

.dark .vp-sponsor-grid-item:hover {
  background-color: var(--vp-c-white);
}

.dark .vp-sponsor-grid-item.empty:hover {
  background-color: var(--vp-c-bg-soft);
}

.vp-sponsor-grid-link {
  display: flex;
}

.vp-sponsor-grid-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.vp-sponsor-grid-image {
  max-width: 100%;
  filter: grayscale(1);
  transition: filter 0.25s;
}

.dark .vp-sponsor-grid-image {
  filter: grayscale(1) invert(1);
}

.VPBadge {
  display: inline-block;
  margin-left: 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 10px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
  transform: translateY(-2px);
}
.VPBadge.small {
  padding: 0 6px;
  line-height: 18px;
  font-size: 10px;
  transform: translateY(-8px);
}
.VPDocFooter .VPBadge {
  display: none;
}
.vp-doc h1 > .VPBadge {
  margin-top: 4px;
  vertical-align: top;
}
.vp-doc h2 > .VPBadge {
  margin-top: 3px;
  padding: 0 8px;
  vertical-align: top;
}
.vp-doc h3 > .VPBadge {
  vertical-align: middle;
}
.vp-doc h4 > .VPBadge,
.vp-doc h5 > .VPBadge,
.vp-doc h6 > .VPBadge {
  vertical-align: middle;
  line-height: 18px;
}
.VPBadge.info {
  border-color: var(--vp-badge-info-border);
  color: var(--vp-badge-info-text);
  background-color: var(--vp-badge-info-bg);
}
.VPBadge.tip {
  border-color: var(--vp-badge-tip-border);
  color: var(--vp-badge-tip-text);
  background-color: var(--vp-badge-tip-bg);
}
.VPBadge.warning {
  border-color: var(--vp-badge-warning-border);
  color: var(--vp-badge-warning-text);
  background-color: var(--vp-badge-warning-bg);
}
.VPBadge.danger {
  border-color: var(--vp-badge-danger-border);
  color: var(--vp-badge-danger-text);
  background-color: var(--vp-badge-danger-bg);
}

.VPBackdrop[data-v-1c787689] {
  position: fixed;
  top: 0;
  /*rtl:ignore*/
  right: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-backdrop);
  background: var(--vp-backdrop-bg-color);
  transition: opacity 0.5s;
}
.VPBackdrop.fade-enter-from[data-v-1c787689],
.VPBackdrop.fade-leave-to[data-v-1c787689] {
  opacity: 0;
}
.VPBackdrop.fade-leave-active[data-v-1c787689] {
  transition-duration: .25s;
}
@media (min-width: 1280px) {
.VPBackdrop[data-v-1c787689] {
    display: none;
}
}

.NotFound[data-v-1c20d3c8] {
  padding: 64px 24px 96px;
  text-align: center;
}
@media (min-width: 768px) {
.NotFound[data-v-1c20d3c8] {
    padding: 96px 32px 168px;
}
}
.code[data-v-1c20d3c8] {
  line-height: 64px;
  font-size: 64px;
  font-weight: 600;
}
.title[data-v-1c20d3c8] {
  padding-top: 12px;
  letter-spacing: 2px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 700;
}
.divider[data-v-1c20d3c8] {
  margin: 24px auto 18px;
  width: 64px;
  height: 1px;
  background-color: var(--vp-c-divider);
}
.quote[data-v-1c20d3c8] {
  margin: 0 auto;
  max-width: 256px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.action[data-v-1c20d3c8] {
  padding-top: 20px;
}
.link[data-v-1c20d3c8] {
  display: inline-block;
  border: 1px solid var(--vp-c-brand-1);
  border-radius: 16px;
  padding: 3px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition:
    border-color 0.25s,
    color 0.25s;
}
.link[data-v-1c20d3c8]:hover {
  border-color: var(--vp-c-brand-2);
  color: var(--vp-c-brand-2);
}

.root[data-v-bb5e122a] {
  position: relative;
  z-index: 1;
}
.nested[data-v-bb5e122a] {
  padding-right: 16px;
  padding-left: 16px;
}
.outline-link[data-v-bb5e122a] {
  display: block;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s;
}
.outline-link[data-v-bb5e122a]:hover,
.outline-link.active[data-v-bb5e122a] {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.outline-link.nested[data-v-bb5e122a] {
  padding-left: 13px;
}

.VPDocAsideOutline[data-v-ed60db79] {
  display: none;
}
.VPDocAsideOutline.has-outline[data-v-ed60db79] {
  display: block;
}
.content[data-v-ed60db79] {
  position: relative;
  border-left: 1px solid var(--vp-c-divider);
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
}
.outline-marker[data-v-ed60db79] {
  position: absolute;
  top: 32px;
  left: -1px;
  z-index: 0;
  opacity: 0;
  width: 2px;
  border-radius: 2px;
  height: 18px;
  background-color: var(--vp-c-brand-1);
  transition:
    top 0.25s cubic-bezier(0, 1, 0.5, 1),
    background-color 0.5s,
    opacity 0.25s;
}
.outline-title[data-v-ed60db79] {
  line-height: 32px;
  font-size: 14px;
  font-weight: 600;
}

.VPDocAside[data-v-285a1e42] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.spacer[data-v-285a1e42] {
  flex-grow: 1;
}
.VPDocAside[data-v-285a1e42] .spacer + .VPDocAsideSponsors,
.VPDocAside[data-v-285a1e42] .spacer + .VPDocAsideCarbonAds {
  margin-top: 24px;
}
.VPDocAside[data-v-285a1e42] .VPDocAsideSponsors + .VPDocAsideCarbonAds {
  margin-top: 16px;
}

.VPLastUpdated[data-v-71f6ed12] {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
@media (min-width: 640px) {
.VPLastUpdated[data-v-71f6ed12] {
    line-height: 32px;
    font-size: 14px;
    font-weight: 500;
}
}

.VPDocFooter[data-v-e5aba2f2] {
  margin-top: 64px;
}
.edit-info[data-v-e5aba2f2] {
  padding-bottom: 18px;
}
@media (min-width: 640px) {
.edit-info[data-v-e5aba2f2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
}
}
.edit-link-button[data-v-e5aba2f2] {
  display: flex;
  align-items: center;
  border: 0;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}
.edit-link-button[data-v-e5aba2f2]:hover {
  color: var(--vp-c-brand-2);
}
.edit-link-icon[data-v-e5aba2f2] {
  margin-right: 8px;
}
.prev-next[data-v-e5aba2f2] {
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
  display: grid;
  grid-row-gap: 8px;
}
@media (min-width: 640px) {
.prev-next[data-v-e5aba2f2] {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 16px;
}
}
.pager-link[data-v-e5aba2f2] {
  display: block;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  padding: 11px 16px 13px;
  width: 100%;
  height: 100%;
  transition: border-color 0.25s;
}
.pager-link[data-v-e5aba2f2]:hover {
  border-color: var(--vp-c-brand-1);
}
.pager-link.next[data-v-e5aba2f2] {
  margin-left: auto;
  text-align: right;
}
.desc[data-v-e5aba2f2] {
  display: block;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.title[data-v-e5aba2f2] {
  display: block;
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}

.VPDoc[data-v-aaf8c362] {
  padding: 32px 24px 96px;
  width: 100%;
}
@media (min-width: 768px) {
.VPDoc[data-v-aaf8c362] {
    padding: 48px 32px 128px;
}
}
@media (min-width: 960px) {
.VPDoc[data-v-aaf8c362] {
    padding: 48px 32px 0;
}
.VPDoc:not(.has-sidebar) .container[data-v-aaf8c362] {
    display: flex;
    justify-content: center;
    max-width: 992px;
}
.VPDoc:not(.has-sidebar) .content[data-v-aaf8c362] {
    max-width: 752px;
}
}
@media (min-width: 1280px) {
.VPDoc .container[data-v-aaf8c362] {
    display: flex;
    justify-content: center;
}
.VPDoc .aside[data-v-aaf8c362] {
    display: block;
}
}
@media (min-width: 1440px) {
.VPDoc:not(.has-sidebar) .content[data-v-aaf8c362] {
    max-width: 784px;
}
.VPDoc:not(.has-sidebar) .container[data-v-aaf8c362] {
    max-width: 1104px;
}
}
.container[data-v-aaf8c362] {
  margin: 0 auto;
  width: 100%;
}
.aside[data-v-aaf8c362] {
  position: relative;
  display: none;
  order: 2;
  flex-grow: 1;
  padding-left: 32px;
  width: 100%;
  max-width: 256px;
}
.left-aside[data-v-aaf8c362] {
  order: 1;
  padding-left: unset;
  padding-right: 32px;
}
.aside-container[data-v-aaf8c362] {
  position: fixed;
  top: 0;
  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
  width: 224px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.aside-container[data-v-aaf8c362]::-webkit-scrollbar {
  display: none;
}
.aside-curtain[data-v-aaf8c362] {
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 224px;
  height: 32px;
  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
}
.aside-content[data-v-aaf8c362] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
  padding-bottom: 32px;
}
.content[data-v-aaf8c362] {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 960px) {
.content[data-v-aaf8c362] {
    padding: 0 32px 128px;
}
}
@media (min-width: 1280px) {
.content[data-v-aaf8c362] {
    order: 1;
    margin: 0;
    min-width: 640px;
}
}
.content-container[data-v-aaf8c362] {
  margin: 0 auto;
}
.VPDoc.has-aside .content-container[data-v-aaf8c362] {
  max-width: 688px;
}

.VPButton[data-v-efbbd617] {
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.VPButton[data-v-efbbd617]:active {
  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
}
.VPButton.medium[data-v-efbbd617] {
  border-radius: 20px;
  padding: 0 20px;
  line-height: 38px;
  font-size: 14px;
}
.VPButton.big[data-v-efbbd617] {
  border-radius: 24px;
  padding: 0 24px;
  line-height: 46px;
  font-size: 16px;
}
.VPButton.brand[data-v-efbbd617] {
  border-color: var(--vp-button-brand-border);
  color: var(--vp-button-brand-text);
  background-color: var(--vp-button-brand-bg);
}
.VPButton.brand[data-v-efbbd617]:hover {
  border-color: var(--vp-button-brand-hover-border);
  color: var(--vp-button-brand-hover-text);
  background-color: var(--vp-button-brand-hover-bg);
}
.VPButton.brand[data-v-efbbd617]:active {
  border-color: var(--vp-button-brand-active-border);
  color: var(--vp-button-brand-active-text);
  background-color: var(--vp-button-brand-active-bg);
}
.VPButton.alt[data-v-efbbd617] {
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
.VPButton.alt[data-v-efbbd617]:hover {
  border-color: var(--vp-button-alt-hover-border);
  color: var(--vp-button-alt-hover-text);
  background-color: var(--vp-button-alt-hover-bg);
}
.VPButton.alt[data-v-efbbd617]:active {
  border-color: var(--vp-button-alt-active-border);
  color: var(--vp-button-alt-active-text);
  background-color: var(--vp-button-alt-active-bg);
}
.VPButton.sponsor[data-v-efbbd617] {
  border-color: var(--vp-button-sponsor-border);
  color: var(--vp-button-sponsor-text);
  background-color: var(--vp-button-sponsor-bg);
}
.VPButton.sponsor[data-v-efbbd617]:hover {
  border-color: var(--vp-button-sponsor-hover-border);
  color: var(--vp-button-sponsor-hover-text);
  background-color: var(--vp-button-sponsor-hover-bg);
}
.VPButton.sponsor[data-v-efbbd617]:active {
  border-color: var(--vp-button-sponsor-active-border);
  color: var(--vp-button-sponsor-active-text);
  background-color: var(--vp-button-sponsor-active-bg);
}

html:not(.dark) .VPImage.dark[data-v-e47afdd0] {
  display: none;
}
.dark .VPImage.light[data-v-e47afdd0] {
  display: none;
}

.VPHero[data-v-7ef35d2d] {
  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
}
@media (min-width: 640px) {
.VPHero[data-v-7ef35d2d] {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
}
}
@media (min-width: 960px) {
.VPHero[data-v-7ef35d2d] {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
}
}
.container[data-v-7ef35d2d] {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1152px;
}
@media (min-width: 960px) {
.container[data-v-7ef35d2d] {
    flex-direction: row;
}
}
.main[data-v-7ef35d2d] {
  position: relative;
  z-index: 10;
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
}
.VPHero.has-image .container[data-v-7ef35d2d] {
  text-align: center;
}
@media (min-width: 960px) {
.VPHero.has-image .container[data-v-7ef35d2d] {
    text-align: left;
}
}
@media (min-width: 960px) {
.main[data-v-7ef35d2d] {
    order: 1;
    width: calc((100% / 3) * 2);
}
.VPHero.has-image .main[data-v-7ef35d2d] {
    max-width: 592px;
}
}
.heading[data-v-7ef35d2d] {
  display: flex;
  flex-direction: column;
}
.name[data-v-7ef35d2d],
.text[data-v-7ef35d2d] {
  width: fit-content;
  max-width: 392px;
  letter-spacing: -0.4px;
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
  white-space: pre-wrap;
}
.VPHero.has-image .name[data-v-7ef35d2d],
.VPHero.has-image .text[data-v-7ef35d2d] {
  margin: 0 auto;
}
.name[data-v-7ef35d2d] {
  color: var(--vp-home-hero-name-color);
}
.clip[data-v-7ef35d2d] {
  background: var(--vp-home-hero-name-background);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--vp-home-hero-name-color);
}
@media (min-width: 640px) {
.name[data-v-7ef35d2d],
  .text[data-v-7ef35d2d] {
    max-width: 576px;
    line-height: 56px;
    font-size: 48px;
}
}
@media (min-width: 960px) {
.name[data-v-7ef35d2d],
  .text[data-v-7ef35d2d] {
    line-height: 64px;
    font-size: 56px;
}
.VPHero.has-image .name[data-v-7ef35d2d],
  .VPHero.has-image .text[data-v-7ef35d2d] {
    margin: 0;
}
}
.tagline[data-v-7ef35d2d] {
  padding-top: 8px;
  max-width: 392px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
  white-space: pre-wrap;
  color: var(--vp-c-text-2);
}
.VPHero.has-image .tagline[data-v-7ef35d2d] {
  margin: 0 auto;
}
@media (min-width: 640px) {
.tagline[data-v-7ef35d2d] {
    padding-top: 12px;
    max-width: 576px;
    line-height: 32px;
    font-size: 20px;
}
}
@media (min-width: 960px) {
.tagline[data-v-7ef35d2d] {
    line-height: 36px;
    font-size: 24px;
}
.VPHero.has-image .tagline[data-v-7ef35d2d] {
    margin: 0;
}
}
.actions[data-v-7ef35d2d] {
  display: flex;
  flex-wrap: wrap;
  margin: -6px;
  padding-top: 24px;
}
.VPHero.has-image .actions[data-v-7ef35d2d] {
  justify-content: center;
}
@media (min-width: 640px) {
.actions[data-v-7ef35d2d] {
    padding-top: 32px;
}
}
@media (min-width: 960px) {
.VPHero.has-image .actions[data-v-7ef35d2d] {
    justify-content: flex-start;
}
}
.action[data-v-7ef35d2d] {
  flex-shrink: 0;
  padding: 6px;
}
.image[data-v-7ef35d2d] {
  order: 1;
  margin: -76px -24px -48px;
}
@media (min-width: 640px) {
.image[data-v-7ef35d2d] {
    margin: -108px -24px -48px;
}
}
@media (min-width: 960px) {
.image[data-v-7ef35d2d] {
    flex-grow: 1;
    order: 2;
    margin: 0;
    min-height: 100%;
}
}
.image-container[data-v-7ef35d2d] {
  position: relative;
  margin: 0 auto;
  width: 320px;
  height: 320px;
}
@media (min-width: 640px) {
.image-container[data-v-7ef35d2d] {
    width: 392px;
    height: 392px;
}
}
@media (min-width: 960px) {
.image-container[data-v-7ef35d2d] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /*rtl:ignore*/
    transform: translate(-32px, -32px);
}
}
.image-bg[data-v-7ef35d2d] {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  border-radius: 50%;
  width: 192px;
  height: 192px;
  background-image: var(--vp-home-hero-image-background-image);
  filter: var(--vp-home-hero-image-filter);
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
.image-bg[data-v-7ef35d2d] {
    width: 256px;
    height: 256px;
}
}
@media (min-width: 960px) {
.image-bg[data-v-7ef35d2d] {
    width: 320px;
    height: 320px;
}
}
[data-v-7ef35d2d] .image-src {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  max-width: 192px;
  max-height: 192px;
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
[data-v-7ef35d2d] .image-src {
    max-width: 256px;
    max-height: 256px;
}
}
@media (min-width: 960px) {
[data-v-7ef35d2d] .image-src {
    max-width: 320px;
    max-height: 320px;
}
}

.VPFeature[data-v-9fbc9b77] {
  display: block;
  border: 1px solid var(--vp-c-bg-soft);
  border-radius: 12px;
  height: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: border-color 0.25s, background-color 0.25s;
}
.VPFeature.link[data-v-9fbc9b77]:hover {
  border-color: var(--vp-c-brand-1);
}
.box[data-v-9fbc9b77] {
  display: flex;
  flex-direction: column;
  padding: 24px;
  height: 100%;
}
.box[data-v-9fbc9b77] >  .VPImage {
  margin-bottom: 20px;
}
.icon[data-v-9fbc9b77] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--vp-c-default-soft);
  width: 48px;
  height: 48px;
  font-size: 24px;
  transition: background-color 0.25s;
}
.title[data-v-9fbc9b77] {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
}
.details[data-v-9fbc9b77] {
  flex-grow: 1;
  padding-top: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.link-text[data-v-9fbc9b77] {
  padding-top: 8px;
}
.link-text-value[data-v-9fbc9b77] {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.link-text-icon[data-v-9fbc9b77] {
  margin-left: 6px;
}

.VPFeatures[data-v-30ce51e8] {
  position: relative;
  padding: 0 24px;
}
@media (min-width: 640px) {
.VPFeatures[data-v-30ce51e8] {
    padding: 0 48px;
}
}
@media (min-width: 960px) {
.VPFeatures[data-v-30ce51e8] {
    padding: 0 64px;
}
}
.container[data-v-30ce51e8] {
  margin: 0 auto;
  max-width: 1152px;
}
.items[data-v-30ce51e8] {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
.item[data-v-30ce51e8] {
  padding: 8px;
  width: 100%;
}
@media (min-width: 640px) {
.item.grid-2[data-v-30ce51e8],
  .item.grid-4[data-v-30ce51e8],
  .item.grid-6[data-v-30ce51e8] {
    width: calc(100% / 2);
}
}
@media (min-width: 768px) {
.item.grid-2[data-v-30ce51e8],
  .item.grid-4[data-v-30ce51e8] {
    width: calc(100% / 2);
}
.item.grid-3[data-v-30ce51e8],
  .item.grid-6[data-v-30ce51e8] {
    width: calc(100% / 3);
}
}
@media (min-width: 960px) {
.item.grid-4[data-v-30ce51e8] {
    width: calc(100% / 4);
}
}

.container[data-v-400c66a4] {
  margin: auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
}
@media (min-width: 640px) {
.container[data-v-400c66a4] {
    padding: 0 48px;
}
}
@media (min-width: 960px) {
.container[data-v-400c66a4] {
    width: 100%;
    padding: 0 64px;
}
}
.vp-doc[data-v-400c66a4] .VPHomeSponsors,
.vp-doc[data-v-400c66a4] .VPTeamPage {
  margin-left: var(--vp-offset, calc(50% - 50vw));
  margin-right: var(--vp-offset, calc(50% - 50vw));
}
.vp-doc[data-v-400c66a4] .VPHomeSponsors h2 {
  border-top: none;
  letter-spacing: normal;
}
.vp-doc[data-v-400c66a4] .VPHomeSponsors a,
.vp-doc[data-v-400c66a4] .VPTeamPage a {
  text-decoration: none;
}

.VPHome[data-v-ebdc7540] {
  margin-bottom: 96px;
}
@media (min-width: 768px) {
.VPHome[data-v-ebdc7540] {
    margin-bottom: 128px;
}
}

.VPContent[data-v-6d5b51eb] {
  flex-grow: 1;
  flex-shrink: 0;
  margin: var(--vp-layout-top-height, 0px) auto 0;
  width: 100%;
}
.VPContent.is-home[data-v-6d5b51eb] {
  width: 100%;
  max-width: 100%;
}
.VPContent.has-sidebar[data-v-6d5b51eb] {
  margin: 0;
}
@media (min-width: 960px) {
.VPContent[data-v-6d5b51eb] {
    padding-top: var(--vp-nav-height);
}
.VPContent.has-sidebar[data-v-6d5b51eb] {
    margin: var(--vp-layout-top-height, 0px) 0 0;
    padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPContent.has-sidebar[data-v-6d5b51eb] {
    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}

.VPFooter[data-v-ca278f18] {
  position: relative;
  z-index: var(--vp-z-index-footer);
  border-top: 1px solid var(--vp-c-gutter);
  padding: 32px 24px;
  background-color: var(--vp-c-bg);
}
.VPFooter.has-sidebar[data-v-ca278f18] {
  display: none;
}
.VPFooter[data-v-ca278f18] a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: color 0.25s;
}
.VPFooter[data-v-ca278f18] a:hover {
  color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.VPFooter[data-v-ca278f18] {
    padding: 32px;
}
}
.container[data-v-ca278f18] {
  margin: 0 auto;
  max-width: var(--vp-layout-max-width);
  text-align: center;
}
.message[data-v-ca278f18],
.copyright[data-v-ca278f18] {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.VPLocalNavOutlineDropdown[data-v-c3f165af] {
  padding: 12px 20px 11px;
}
@media (min-width: 960px) {
.VPLocalNavOutlineDropdown[data-v-c3f165af] {
    padding: 12px 36px 11px;
}
}
.VPLocalNavOutlineDropdown button[data-v-c3f165af] {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
  position: relative;
}
.VPLocalNavOutlineDropdown button[data-v-c3f165af]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPLocalNavOutlineDropdown button.open[data-v-c3f165af] {
  color: var(--vp-c-text-1);
}
.icon[data-v-c3f165af] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  font-size: 14px;
  transform: rotate(0)/*rtl:rotate(180deg)*/;
  transition: transform 0.25s;
}
@media (min-width: 960px) {
.VPLocalNavOutlineDropdown button[data-v-c3f165af] {
    font-size: 14px;
}
.icon[data-v-c3f165af] {
    font-size: 16px;
}
}
.open > .icon[data-v-c3f165af] {
  /*rtl:ignore*/
  transform: rotate(90deg);
}
.items[data-v-c3f165af] {
  position: absolute;
  top: 40px;
  right: 16px;
  left: 16px;
  display: grid;
  gap: 1px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background-color: var(--vp-c-gutter);
  max-height: calc(var(--vp-vh, 100vh) - 86px);
  overflow: hidden auto;
  box-shadow: var(--vp-shadow-3);
}
@media (min-width: 960px) {
.items[data-v-c3f165af] {
    right: auto;
    left: calc(var(--vp-sidebar-width) + 32px);
    width: 320px;
}
}
.header[data-v-c3f165af] {
  background-color: var(--vp-c-bg-soft);
}
.top-link[data-v-c3f165af] {
  display: block;
  padding: 0 16px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.outline[data-v-c3f165af] {
  padding: 8px 0;
  background-color: var(--vp-c-bg-soft);
}
.flyout-enter-active[data-v-c3f165af] {
  transition: all 0.2s ease-out;
}
.flyout-leave-active[data-v-c3f165af] {
  transition: all 0.15s ease-in;
}
.flyout-enter-from[data-v-c3f165af],
.flyout-leave-to[data-v-c3f165af] {
  opacity: 0;
  transform: translateY(-16px);
}

.VPLocalNav[data-v-c6ba445c] {
  position: sticky;
  top: 0;
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-local-nav);
  border-bottom: 1px solid var(--vp-c-gutter);
  padding-top: var(--vp-layout-top-height, 0px);
  width: 100%;
  background-color: var(--vp-local-nav-bg-color);
}
.VPLocalNav.fixed[data-v-c6ba445c] {
  position: fixed;
}
@media (min-width: 960px) {
.VPLocalNav[data-v-c6ba445c] {
    top: var(--vp-nav-height);
}
.VPLocalNav.has-sidebar[data-v-c6ba445c] {
    padding-left: var(--vp-sidebar-width);
}
.VPLocalNav.empty[data-v-c6ba445c] {
    display: none;
}
}
@media (min-width: 1280px) {
.VPLocalNav[data-v-c6ba445c] {
    display: none;
}
}
@media (min-width: 1440px) {
.VPLocalNav.has-sidebar[data-v-c6ba445c] {
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
.container[data-v-c6ba445c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu[data-v-c6ba445c] {
  display: flex;
  align-items: center;
  padding: 12px 24px 11px;
  line-height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.menu[data-v-c6ba445c]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
@media (min-width: 768px) {
.menu[data-v-c6ba445c] {
    padding: 0 32px;
}
}
@media (min-width: 960px) {
.menu[data-v-c6ba445c] {
    display: none;
}
}
.menu-icon[data-v-c6ba445c] {
  margin-right: 8px;
  font-size: 14px;
}
.VPOutlineDropdown[data-v-c6ba445c] {
  padding: 12px 24px 11px;
}
@media (min-width: 768px) {
.VPOutlineDropdown[data-v-c6ba445c] {
    padding: 12px 32px 11px;
}
}

.VPSwitch[data-v-dc9d5ae5] {
  position: relative;
  border-radius: 11px;
  display: block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--vp-input-border-color);
  background-color: var(--vp-input-switch-bg-color);
  transition: border-color 0.25s !important;
}
.VPSwitch[data-v-dc9d5ae5]:hover {
  border-color: var(--vp-c-brand-1);
}
.check[data-v-dc9d5ae5] {
  position: absolute;
  top: 1px;
  /*rtl:ignore*/
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--vp-c-neutral-inverse);
  box-shadow: var(--vp-shadow-1);
  transition: transform 0.25s !important;
}
.icon[data-v-dc9d5ae5] {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
}
.icon[data-v-dc9d5ae5] [class^='vpi-'] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  color: var(--vp-c-text-2);
}
.dark .icon[data-v-dc9d5ae5] [class^='vpi-'] {
  color: var(--vp-c-text-1);
  transition: opacity 0.25s !important;
}

.sun[data-v-540071a3] {
  opacity: 1;
}
.moon[data-v-540071a3] {
  opacity: 0;
}
.dark .sun[data-v-540071a3] {
  opacity: 0;
}
.dark .moon[data-v-540071a3] {
  opacity: 1;
}
.dark .VPSwitchAppearance[data-v-540071a3] .check {
  /*rtl:ignore*/
  transform: translateX(18px);
}

.VPNavBarAppearance[data-v-48314ae0] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarAppearance[data-v-48314ae0] {
    display: flex;
    align-items: center;
}
}

.VPMenuGroup + .VPMenuLink[data-v-1747a1d2] {
  margin: 12px -12px 0;
  border-top: 1px solid var(--vp-c-divider);
  padding: 12px 12px 0;
}
.link[data-v-1747a1d2] {
  display: block;
  border-radius: 6px;
  padding: 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  white-space: nowrap;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.link[data-v-1747a1d2]:hover {
  color: var(--vp-c-brand-1);
  background-color: var(--vp-c-default-soft);
}
.link.active[data-v-1747a1d2] {
  color: var(--vp-c-brand-1);
}

.VPMenuGroup[data-v-d681a060] {
  margin: 12px -12px 0;
  border-top: 1px solid var(--vp-c-divider);
  padding: 12px 12px 0;
}
.VPMenuGroup[data-v-d681a060]:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.VPMenuGroup + .VPMenuGroup[data-v-d681a060] {
  margin-top: 12px;
  border-top: 1px solid var(--vp-c-divider);
}
.title[data-v-d681a060] {
  padding: 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  transition: color 0.25s;
}

.VPMenu[data-v-14d48262] {
  border-radius: 12px;
  padding: 12px;
  min-width: 128px;
  border: 1px solid var(--vp-c-divider);
  background-color: var(--vp-c-bg-elv);
  box-shadow: var(--vp-shadow-3);
  transition: background-color 0.5s;
  max-height: calc(100vh - var(--vp-nav-height));
  overflow-y: auto;
}
.VPMenu[data-v-14d48262] .group {
  margin: 0 -12px;
  padding: 0 12px 12px;
}
.VPMenu[data-v-14d48262] .group + .group {
  border-top: 1px solid var(--vp-c-divider);
  padding: 11px 12px 12px;
}
.VPMenu[data-v-14d48262] .group:last-child {
  padding-bottom: 0;
}
.VPMenu[data-v-14d48262] .group + .item {
  border-top: 1px solid var(--vp-c-divider);
  padding: 11px 16px 0;
}
.VPMenu[data-v-14d48262] .item {
  padding: 0 16px;
  white-space: nowrap;
}
.VPMenu[data-v-14d48262] .label {
  flex-grow: 1;
  line-height: 28px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.VPMenu[data-v-14d48262] .action {
  padding-left: 24px;
}

.VPFlyout[data-v-48748be3] {
  position: relative;
}
.VPFlyout[data-v-48748be3]:hover {
  color: var(--vp-c-brand-1);
  transition: color 0.25s;
}
.VPFlyout:hover .text[data-v-48748be3] {
  color: var(--vp-c-text-2);
}
.VPFlyout:hover .icon[data-v-48748be3] {
  fill: var(--vp-c-text-2);
}
.VPFlyout.active .text[data-v-48748be3] {
  color: var(--vp-c-brand-1);
}
.VPFlyout.active:hover .text[data-v-48748be3] {
  color: var(--vp-c-brand-2);
}
.button[aria-expanded="false"] + .menu[data-v-48748be3] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
}
.VPFlyout:hover .menu[data-v-48748be3],
.button[aria-expanded="true"] + .menu[data-v-48748be3] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.button[data-v-48748be3] {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--vp-nav-height);
  color: var(--vp-c-text-1);
  transition: color 0.5s;
}
.text[data-v-48748be3] {
  display: flex;
  align-items: center;
  line-height: var(--vp-nav-height);
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.option-icon[data-v-48748be3] {
  margin-right: 0px;
  font-size: 16px;
}
.text-icon[data-v-48748be3] {
  margin-left: 4px;
  font-size: 14px;
}
.icon[data-v-48748be3] {
  font-size: 20px;
  transition: fill 0.25s;
}
.menu[data-v-48748be3] {
  position: absolute;
  top: calc(var(--vp-nav-height) / 2 + 20px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}

.VPSocialLink[data-v-cd34074a] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.VPSocialLink[data-v-cd34074a]:hover {
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPSocialLink[data-v-cd34074a] >  svg,
.VPSocialLink[data-v-cd34074a] >  [class^="vpi-social-"] {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.VPSocialLinks[data-v-b2601c66] {
  display: flex;
  justify-content: center;
}

.VPNavBarExtra[data-v-a9e9ebf0] {
  display: none;
  margin-right: -12px;
}
@media (min-width: 768px) {
.VPNavBarExtra[data-v-a9e9ebf0] {
    display: block;
}
}
@media (min-width: 1280px) {
.VPNavBarExtra[data-v-a9e9ebf0] {
    display: none;
}
}
.trans-title[data-v-a9e9ebf0] {
  padding: 0 24px 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-c-text-1);
}
.item.appearance[data-v-a9e9ebf0],
.item.social-links[data-v-a9e9ebf0] {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.item.appearance[data-v-a9e9ebf0] {
  min-width: 176px;
}
.appearance-action[data-v-a9e9ebf0] {
  margin-right: -2px;
}
.social-links-list[data-v-a9e9ebf0] {
  margin: -4px -8px;
}

.VPNavBarHamburger[data-v-311a31a1] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: var(--vp-nav-height);
}
@media (min-width: 768px) {
.VPNavBarHamburger[data-v-311a31a1] {
    display: none;
}
}
.container[data-v-311a31a1] {
  position: relative;
  width: 16px;
  height: 14px;
  overflow: hidden;
}
.VPNavBarHamburger:hover .top[data-v-311a31a1]    { top: 0; left: 0; transform: translateX(4px);
}
.VPNavBarHamburger:hover .middle[data-v-311a31a1] { top: 6px; left: 0; transform: translateX(0);
}
.VPNavBarHamburger:hover .bottom[data-v-311a31a1] { top: 12px; left: 0; transform: translateX(8px);
}
.VPNavBarHamburger.active .top[data-v-311a31a1]    { top: 6px; transform: translateX(0) rotate(225deg);
}
.VPNavBarHamburger.active .middle[data-v-311a31a1] { top: 6px; transform: translateX(16px);
}
.VPNavBarHamburger.active .bottom[data-v-311a31a1] { top: 6px; transform: translateX(0) rotate(135deg);
}
.VPNavBarHamburger.active:hover .top[data-v-311a31a1],
.VPNavBarHamburger.active:hover .middle[data-v-311a31a1],
.VPNavBarHamburger.active:hover .bottom[data-v-311a31a1] {
  background-color: var(--vp-c-text-2);
  transition: top .25s, background-color .25s, transform .25s;
}
.top[data-v-311a31a1],
.middle[data-v-311a31a1],
.bottom[data-v-311a31a1] {
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: var(--vp-c-text-1);
  transition: top .25s, background-color .5s, transform .25s;
}
.top[data-v-311a31a1]    { top: 0; left: 0; transform: translateX(0);
}
.middle[data-v-311a31a1] { top: 6px; left: 0; transform: translateX(8px);
}
.bottom[data-v-311a31a1] { top: 12px; left: 0; transform: translateX(4px);
}

.VPNavBarMenuLink[data-v-a8272408] {
  display: flex;
  align-items: center;
  padding: 0 12px;
  line-height: var(--vp-nav-height);
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPNavBarMenuLink.active[data-v-a8272408] {
  color: var(--vp-c-brand-1);
}
.VPNavBarMenuLink[data-v-a8272408]:hover {
  color: var(--vp-c-brand-1);
}

.VPNavBarMenu[data-v-9da7fb6b] {
  display: none;
}
@media (min-width: 768px) {
.VPNavBarMenu[data-v-9da7fb6b] {
    display: flex;
}
}
/*! @docsearch/css 3.8.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translate3d(0,1px,0)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}
[class*='DocSearch'] {
  --docsearch-primary-color: var(--vp-c-brand-1);
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-text-color: var(--vp-c-text-1);
  --docsearch-muted-color: var(--vp-c-text-2);
  --docsearch-searchbox-shadow: none;
  --docsearch-searchbox-background: transparent;
  --docsearch-searchbox-focus-background: transparent;
  --docsearch-key-gradient: transparent;
  --docsearch-key-shadow: none;
  --docsearch-modal-background: var(--vp-c-bg-soft);
  --docsearch-footer-background: var(--vp-c-bg);
}
.dark [class*='DocSearch'] {
  --docsearch-modal-shadow: none;
  --docsearch-footer-shadow: none;
  --docsearch-logo-color: var(--vp-c-text-2);
  --docsearch-hit-background: var(--vp-c-default-soft);
  --docsearch-hit-color: var(--vp-c-text-2);
  --docsearch-hit-shadow: none;
}
.DocSearch-Button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 55px;
  background: transparent;
  transition: border-color 0.25s;
}
.DocSearch-Button:hover {
  background: transparent;
}
.DocSearch-Button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
.DocSearch-Button-Key--pressed {
  transform: none;
  box-shadow: none;
}
.DocSearch-Button:focus:not(:focus-visible) {
  outline: none !important;
}
@media (min-width: 768px) {
.DocSearch-Button {
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 10px 0 12px;
    width: 100%;
    height: 40px;
    background-color: var(--vp-c-bg-alt);
}
.DocSearch-Button:hover {
    border-color: var(--vp-c-brand-1);
    background: var(--vp-c-bg-alt);
}
}
.DocSearch-Button .DocSearch-Button-Container {
  display: flex;
  align-items: center;
}
.DocSearch-Button .DocSearch-Search-Icon {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--vp-c-text-1);
  fill: currentColor;
  transition: color 0.5s;
}
.DocSearch-Button:hover .DocSearch-Search-Icon {
  color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Search-Icon {
    top: 1px;
    margin-right: 8px;
    width: 14px;
    height: 14px;
    color: var(--vp-c-text-2);
}
}
.DocSearch-Button .DocSearch-Button-Placeholder {
  display: none;
  margin-top: 2px;
  padding: 0 16px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  transition: color 0.5s;
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
  color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Placeholder {
    display: inline-block;
}
}
.DocSearch-Button .DocSearch-Button-Keys {
  /*rtl:ignore*/
  direction: ltr;
  display: none;
  min-width: auto;
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Keys {
    display: flex;
    align-items: center;
}
}
.DocSearch-Button .DocSearch-Button-Key {
  display: block;
  margin: 2px 0 0 0;
  border: 1px solid var(--vp-c-divider);
  /*rtl:begin:ignore*/
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding-left: 6px;
  /*rtl:end:ignore*/
  min-width: 0;
  width: auto;
  height: 22px;
  line-height: 22px;
  font-family: var(--vp-font-family-base);
  font-size: 12px;
  font-weight: 500;
  transition: color 0.5s, border-color 0.5s;
}
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
  /*rtl:begin:ignore*/
  border-right: 1px solid var(--vp-c-divider);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding-left: 2px;
  padding-right: 6px;
  /*rtl:end:ignore*/
}
.DocSearch-Button .DocSearch-Button-Key:first-child {
  font-size: 0 !important;
}
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
  content: 'Ctrl';
  font-size: 12px;
  letter-spacing: normal;
  color: var(--docsearch-muted-color);
}
.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
  content: '\2318';
}
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
  display: none;
}
.DocSearch-Search-Icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E");
}

.VPNavBarSearch {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
.VPNavBarSearch {
    flex-grow: 1;
    padding-left: 24px;
}
}
@media (min-width: 960px) {
.VPNavBarSearch {
    padding-left: 32px;
}
}
.dark .DocSearch-Footer {
  border-top: 1px solid var(--vp-c-divider);
}
.DocSearch-Form {
  border: 1px solid var(--vp-c-brand-1);
  background-color: var(--vp-c-white);
}
.dark .DocSearch-Form {
  background-color: var(--vp-c-default-soft);
}
.DocSearch-Screen-Icon > svg {
  margin: auto;
}

.VPNavBarSocialLinks[data-v-c2fa3570] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarSocialLinks[data-v-c2fa3570] {
    display: flex;
    align-items: center;
}
}

.title[data-v-85c59aa9] {
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  width: 100%;
  height: var(--vp-nav-height);
  font-size: 16px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  transition: opacity 0.25s;
}
@media (min-width: 960px) {
.title[data-v-85c59aa9] {
    flex-shrink: 0;
}
.VPNavBarTitle.has-sidebar .title[data-v-85c59aa9] {
    border-bottom-color: var(--vp-c-divider);
}
}
[data-v-85c59aa9] .logo {
  margin-right: 8px;
  height: var(--vp-nav-logo-height);
}

.VPNavBarTranslations[data-v-3d03d1ea] {
  display: none;
}
@media (min-width: 1280px) {
.VPNavBarTranslations[data-v-3d03d1ea] {
    display: flex;
    align-items: center;
}
}
.title[data-v-3d03d1ea] {
  padding: 0 24px 0 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-c-text-1);
}

.VPNavBar[data-v-1f64d6e7] {
  position: relative;
  height: var(--vp-nav-height);
  pointer-events: none;
  white-space: nowrap;
  transition: background-color 0.25s;
}
.VPNavBar.screen-open[data-v-1f64d6e7] {
  transition: none;
  background-color: var(--vp-nav-bg-color);
  border-bottom: 1px solid var(--vp-c-divider);
}
.VPNavBar[data-v-1f64d6e7]:not(.home) {
  background-color: var(--vp-nav-bg-color);
}
@media (min-width: 960px) {
.VPNavBar[data-v-1f64d6e7]:not(.home) {
    background-color: transparent;
}
.VPNavBar[data-v-1f64d6e7]:not(.has-sidebar):not(.home.top) {
    background-color: var(--vp-nav-bg-color);
}
}
.wrapper[data-v-1f64d6e7] {
  padding: 0 8px 0 24px;
}
@media (min-width: 768px) {
.wrapper[data-v-1f64d6e7] {
    padding: 0 32px;
}
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .wrapper[data-v-1f64d6e7] {
    padding: 0;
}
}
.container[data-v-1f64d6e7] {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: calc(var(--vp-layout-max-width) - 64px);
  height: var(--vp-nav-height);
  pointer-events: none;
}
.container > .title[data-v-1f64d6e7],
.container > .content[data-v-1f64d6e7] {
  pointer-events: none;
}
.container[data-v-1f64d6e7] * {
  pointer-events: auto;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .container[data-v-1f64d6e7] {
    max-width: 100%;
}
}
.title[data-v-1f64d6e7] {
  flex-shrink: 0;
  height: calc(var(--vp-nav-height) - 1px);
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .title[data-v-1f64d6e7] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0 32px;
    width: var(--vp-sidebar-width);
    height: var(--vp-nav-height);
    background-color: transparent;
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .title[data-v-1f64d6e7] {
    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
}
}
.content[data-v-1f64d6e7] {
  flex-grow: 1;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .content[data-v-1f64d6e7] {
    position: relative;
    z-index: 1;
    padding-right: 32px;
    padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .content[data-v-1f64d6e7] {
    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
.content-body[data-v-1f64d6e7] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--vp-nav-height);
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNavBar:not(.home.top) .content-body[data-v-1f64d6e7] {
    position: relative;
    background-color: var(--vp-nav-bg-color);
}
.VPNavBar:not(.has-sidebar):not(.home.top) .content-body[data-v-1f64d6e7] {
    background-color: transparent;
}
}
@media (max-width: 767px) {
.content-body[data-v-1f64d6e7] {
    column-gap: 0.5rem;
}
}
.menu + .translations[data-v-1f64d6e7]::before,
.menu + .appearance[data-v-1f64d6e7]::before,
.menu + .social-links[data-v-1f64d6e7]::before,
.translations + .appearance[data-v-1f64d6e7]::before,
.appearance + .social-links[data-v-1f64d6e7]::before {
  margin-right: 8px;
  margin-left: 8px;
  width: 1px;
  height: 24px;
  background-color: var(--vp-c-divider);
  content: "";
}
.menu + .appearance[data-v-1f64d6e7]::before,
.translations + .appearance[data-v-1f64d6e7]::before {
  margin-right: 16px;
}
.appearance + .social-links[data-v-1f64d6e7]::before {
  margin-left: 16px;
}
.social-links[data-v-1f64d6e7] {
  margin-right: -8px;
}
.divider[data-v-1f64d6e7] {
  width: 100%;
  height: 1px;
}
@media (min-width: 960px) {
.VPNavBar.has-sidebar .divider[data-v-1f64d6e7] {
    padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPNavBar.has-sidebar .divider[data-v-1f64d6e7] {
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
.divider-line[data-v-1f64d6e7] {
  width: 100%;
  height: 1px;
  transition: background-color 0.5s;
}
.VPNavBar:not(.home) .divider-line[data-v-1f64d6e7] {
  background-color: var(--vp-c-gutter);
}
@media (min-width: 960px) {
.VPNavBar:not(.home.top) .divider-line[data-v-1f64d6e7] {
    background-color: var(--vp-c-gutter);
}
.VPNavBar:not(.has-sidebar):not(.home.top) .divider[data-v-1f64d6e7] {
    background-color: var(--vp-c-gutter);
}
}

.VPNavScreenAppearance[data-v-315c8685] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 12px 14px 12px 16px;
  background-color: var(--vp-c-bg-soft);
}
.text[data-v-315c8685] {
  line-height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.VPNavScreenMenuLink[data-v-82b21434] {
  display: block;
  border-bottom: 1px solid var(--vp-c-divider);
  padding: 12px 0 11px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition:
    border-color 0.25s,
    color 0.25s;
}
.VPNavScreenMenuLink[data-v-82b21434]:hover {
  color: var(--vp-c-brand-1);
}

.VPNavScreenMenuGroupLink[data-v-c38404ab] {
  display: block;
  margin-left: 12px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.VPNavScreenMenuGroupLink[data-v-c38404ab]:hover {
  color: var(--vp-c-brand-1);
}

.VPNavScreenMenuGroupSection[data-v-77328059] {
  display: block;
}
.title[data-v-77328059] {
  line-height: 32px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-c-text-2);
  transition: color 0.25s;
}

.VPNavScreenMenuGroup[data-v-55999d57] {
  border-bottom: 1px solid var(--vp-c-divider);
  height: 48px;
  overflow: hidden;
  transition: border-color 0.5s;
}
.VPNavScreenMenuGroup .items[data-v-55999d57] {
  visibility: hidden;
}
.VPNavScreenMenuGroup.open .items[data-v-55999d57] {
  visibility: visible;
}
.VPNavScreenMenuGroup.open[data-v-55999d57] {
  padding-bottom: 10px;
  height: auto;
}
.VPNavScreenMenuGroup.open .button[data-v-55999d57] {
  padding-bottom: 6px;
  color: var(--vp-c-brand-1);
}
.VPNavScreenMenuGroup.open .button-icon[data-v-55999d57] {
  /*rtl:ignore*/
  transform: rotate(45deg);
}
.button[data-v-55999d57] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 11px 0;
  width: 100%;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  transition: color 0.25s;
}
.button[data-v-55999d57]:hover {
  color: var(--vp-c-brand-1);
}
.button-icon[data-v-55999d57] {
  transition: transform 0.25s;
}
.group[data-v-55999d57]:first-child {
  padding-top: 0px;
}
.group + .group[data-v-55999d57],
.group + .item[data-v-55999d57] {
  padding-top: 4px;
}

.VPNavScreenTranslations[data-v-3b7bc2d5] {
  height: 24px;
  overflow: hidden;
}
.VPNavScreenTranslations.open[data-v-3b7bc2d5] {
  height: auto;
}
.title[data-v-3b7bc2d5] {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
}
.icon[data-v-3b7bc2d5] {
  font-size: 16px;
}
.icon.lang[data-v-3b7bc2d5] {
  margin-right: 8px;
}
.icon.chevron[data-v-3b7bc2d5] {
  margin-left: 4px;
}
.list[data-v-3b7bc2d5] {
  padding: 4px 0 0 24px;
}
.link[data-v-3b7bc2d5] {
  line-height: 32px;
  font-size: 13px;
  color: var(--vp-c-text-1);
}

.VPNavScreen[data-v-c8f906ae] {
  position: fixed;
  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
  /*rtl:ignore*/
  right: 0;
  bottom: 0;
  /*rtl:ignore*/
  left: 0;
  padding: 0 32px;
  width: 100%;
  background-color: var(--vp-nav-screen-bg-color);
  overflow-y: auto;
  transition: background-color 0.25s;
  pointer-events: auto;
}
.VPNavScreen.fade-enter-active[data-v-c8f906ae],
.VPNavScreen.fade-leave-active[data-v-c8f906ae] {
  transition: opacity 0.25s;
}
.VPNavScreen.fade-enter-active .container[data-v-c8f906ae],
.VPNavScreen.fade-leave-active .container[data-v-c8f906ae] {
  transition: transform 0.25s ease;
}
.VPNavScreen.fade-enter-from[data-v-c8f906ae],
.VPNavScreen.fade-leave-to[data-v-c8f906ae] {
  opacity: 0;
}
.VPNavScreen.fade-enter-from .container[data-v-c8f906ae],
.VPNavScreen.fade-leave-to .container[data-v-c8f906ae] {
  transform: translateY(-8px);
}
@media (min-width: 768px) {
.VPNavScreen[data-v-c8f906ae] {
    display: none;
}
}
.container[data-v-c8f906ae] {
  margin: 0 auto;
  padding: 24px 0 96px;
  max-width: 288px;
}
.menu + .translations[data-v-c8f906ae],
.menu + .appearance[data-v-c8f906ae],
.translations + .appearance[data-v-c8f906ae] {
  margin-top: 24px;
}
.menu + .social-links[data-v-c8f906ae] {
  margin-top: 16px;
}
.appearance + .social-links[data-v-c8f906ae] {
  margin-top: 16px;
}

.VPNav[data-v-5b7dd263] {
  position: relative;
  top: var(--vp-layout-top-height, 0px);
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-nav);
  width: 100%;
  pointer-events: none;
  transition: background-color 0.5s;
}
@media (min-width: 960px) {
.VPNav[data-v-5b7dd263] {
    position: fixed;
}
}

.VPSidebarItem.level-0[data-v-44175a49] {
  padding-bottom: 24px;
}
.VPSidebarItem.collapsed.level-0[data-v-44175a49] {
  padding-bottom: 10px;
}
.item[data-v-44175a49] {
  position: relative;
  display: flex;
  width: 100%;
}
.VPSidebarItem.collapsible > .item[data-v-44175a49] {
  cursor: pointer;
}
.indicator[data-v-44175a49] {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -17px;
  width: 2px;
  border-radius: 2px;
  transition: background-color 0.25s;
}
.VPSidebarItem.level-2.is-active > .item > .indicator[data-v-44175a49],
.VPSidebarItem.level-3.is-active > .item > .indicator[data-v-44175a49],
.VPSidebarItem.level-4.is-active > .item > .indicator[data-v-44175a49],
.VPSidebarItem.level-5.is-active > .item > .indicator[data-v-44175a49] {
  background-color: var(--vp-c-brand-1);
}
.link[data-v-44175a49] {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.text[data-v-44175a49] {
  flex-grow: 1;
  padding: 4px 0;
  line-height: 24px;
  font-size: 14px;
  transition: color 0.25s;
}
.VPSidebarItem.level-0 .text[data-v-44175a49] {
  font-weight: 700;
  color: var(--vp-c-text-1);
}
.VPSidebarItem.level-1 .text[data-v-44175a49],
.VPSidebarItem.level-2 .text[data-v-44175a49],
.VPSidebarItem.level-3 .text[data-v-44175a49],
.VPSidebarItem.level-4 .text[data-v-44175a49],
.VPSidebarItem.level-5 .text[data-v-44175a49] {
  font-weight: 500;
  color: var(--vp-c-text-2);
}
.VPSidebarItem.level-0.is-link > .item > .link:hover .text[data-v-44175a49],
.VPSidebarItem.level-1.is-link > .item > .link:hover .text[data-v-44175a49],
.VPSidebarItem.level-2.is-link > .item > .link:hover .text[data-v-44175a49],
.VPSidebarItem.level-3.is-link > .item > .link:hover .text[data-v-44175a49],
.VPSidebarItem.level-4.is-link > .item > .link:hover .text[data-v-44175a49],
.VPSidebarItem.level-5.is-link > .item > .link:hover .text[data-v-44175a49] {
  color: var(--vp-c-brand-1);
}
.VPSidebarItem.level-0.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-1.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-2.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-3.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-4.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-5.has-active > .item > .text[data-v-44175a49],
.VPSidebarItem.level-0.has-active > .item > .link > .text[data-v-44175a49],
.VPSidebarItem.level-1.has-active > .item > .link > .text[data-v-44175a49],
.VPSidebarItem.level-2.has-active > .item > .link > .text[data-v-44175a49],
.VPSidebarItem.level-3.has-active > .item > .link > .text[data-v-44175a49],
.VPSidebarItem.level-4.has-active > .item > .link > .text[data-v-44175a49],
.VPSidebarItem.level-5.has-active > .item > .link > .text[data-v-44175a49] {
  color: var(--vp-c-text-1);
}
.VPSidebarItem.level-0.is-active > .item .link > .text[data-v-44175a49],
.VPSidebarItem.level-1.is-active > .item .link > .text[data-v-44175a49],
.VPSidebarItem.level-2.is-active > .item .link > .text[data-v-44175a49],
.VPSidebarItem.level-3.is-active > .item .link > .text[data-v-44175a49],
.VPSidebarItem.level-4.is-active > .item .link > .text[data-v-44175a49],
.VPSidebarItem.level-5.is-active > .item .link > .text[data-v-44175a49] {
  color: var(--vp-c-brand-1);
}
.caret[data-v-44175a49] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -7px;
  width: 32px;
  height: 32px;
  color: var(--vp-c-text-3);
  cursor: pointer;
  transition: color 0.25s;
  flex-shrink: 0;
}
.item:hover .caret[data-v-44175a49] {
  color: var(--vp-c-text-2);
}
.item:hover .caret[data-v-44175a49]:hover {
  color: var(--vp-c-text-1);
}
.caret-icon[data-v-44175a49] {
  font-size: 18px;
  /*rtl:ignore*/
  transform: rotate(90deg);
  transition: transform 0.25s;
}
.VPSidebarItem.collapsed .caret-icon[data-v-44175a49] {
  transform: rotate(0)/*rtl:rotate(180deg)*/;
}
.VPSidebarItem.level-1 .items[data-v-44175a49],
.VPSidebarItem.level-2 .items[data-v-44175a49],
.VPSidebarItem.level-3 .items[data-v-44175a49],
.VPSidebarItem.level-4 .items[data-v-44175a49],
.VPSidebarItem.level-5 .items[data-v-44175a49] {
  border-left: 1px solid var(--vp-c-divider);
  padding-left: 16px;
}
.VPSidebarItem.collapsed .items[data-v-44175a49] {
  display: none;
}

.no-transition[data-v-26989c3a] .caret-icon {
  transition: none;
}
.group + .group[data-v-26989c3a] {
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 10px;
}
@media (min-width: 960px) {
.group[data-v-26989c3a] {
    padding-top: 10px;
    width: calc(var(--vp-sidebar-width) - 64px);
}
}

.VPSidebar[data-v-60f336ea] {
  position: fixed;
  top: var(--vp-layout-top-height, 0px);
  bottom: 0;
  left: 0;
  z-index: var(--vp-z-index-sidebar);
  padding: 32px 32px 96px;
  width: calc(100vw - 64px);
  max-width: 320px;
  background-color: var(--vp-sidebar-bg-color);
  opacity: 0;
  box-shadow: var(--vp-c-shadow-3);
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.25s ease;
  overscroll-behavior: contain;
}
.VPSidebar.open[data-v-60f336ea] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.25s,
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.dark .VPSidebar[data-v-60f336ea] {
  box-shadow: var(--vp-shadow-1);
}
@media (min-width: 960px) {
.VPSidebar[data-v-60f336ea] {
    padding-top: var(--vp-nav-height);
    width: var(--vp-sidebar-width);
    max-width: 100%;
    background-color: var(--vp-sidebar-bg-color);
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: translateX(0);
}
}
@media (min-width: 1440px) {
.VPSidebar[data-v-60f336ea] {
    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
}
}
@media (min-width: 960px) {
.curtain[data-v-60f336ea] {
    position: sticky;
    top: -64px;
    left: 0;
    z-index: 1;
    margin-top: calc(var(--vp-nav-height) * -1);
    margin-right: -32px;
    margin-left: -32px;
    height: var(--vp-nav-height);
    background-color: var(--vp-sidebar-bg-color);
}
}
.nav[data-v-60f336ea] {
  outline: 0;
}

.VPSkipLink[data-v-bcf181ad] {
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  z-index: 999;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: var(--vp-c-brand-1);
  box-shadow: var(--vp-shadow-3);
  background-color: var(--vp-c-bg);
}
.VPSkipLink[data-v-bcf181ad]:focus {
  height: auto;
  width: auto;
  clip: auto;
  clip-path: none;
}
@media (min-width: 1280px) {
.VPSkipLink[data-v-bcf181ad] {
    top: 14px;
    left: 16px;
}
}

.Layout[data-v-fb0f6d2c] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

:root {
  --x-color-primary-1: #e8f3ff;
  --x-color-primary-2: #bfdbff;
  --x-color-primary-3: #96c1ff;
  --x-color-primary-4: #6ea4ff;
  --x-color-primary-5: #4584ff;
  --x-color-primary-6: var(--x-color-primary);
  --x-color-primary-7: #003de2;
  --x-color-primary-8: #0028a9;
  --x-color-primary-9: #001770;
  --x-color-success-1: #ebffe8;
  --x-color-success-2: #afffa8;
  --x-color-success-3: #70ff68;
  --x-color-success-4: #2cff29;
  --x-color-success-5: #00e804;
  --x-color-success-6: var(--x-color-success);
  --x-color-success-7: #00950d;
  --x-color-success-8: #008310;
  --x-color-success-9: #007012;
  --x-color-danger-1: #fceeeb;
  --x-color-danger-2: #f7c9c3;
  --x-color-danger-3: #f1a29b;
  --x-color-danger-4: #eb7972;
  --x-color-danger-5: #e64d4a;
  --x-color-danger-6: var(--x-color-danger);
  --x-color-danger-7: #b81a22;
  --x-color-danger-8: #8d141e;
  --x-color-danger-9: #620e18;
  --x-color-strong-1: #fff8e8;
  --x-color-strong-2: #ffe6ba;
  --x-color-strong-3: #ffd28b;
  --x-color-strong-4: #ffbb5d;
  --x-color-strong-5: #ffa02e;
  --x-color-strong-6: var(--x-color-strong);
  --x-color-strong-7: #cf6300;
  --x-color-strong-8: #a04700;
  --x-color-strong-9: #702e00;
  --x-color-warning-1: #fffde8;
  --x-color-warning-2: #fff5ba;
  --x-color-warning-3: #ffeb8b;
  --x-color-warning-4: #ffdd5d;
  --x-color-warning-5: #ffcc2e;
  --x-color-warning-6: var(--x-color-warning);
  --x-color-warning-7: #cf8f00;
  --x-color-warning-8: #a06800;
  --x-color-warning-9: #704500;
}

:root {
  --x-color-primary: rgb(28 97 255 / 100%);
  --x-color-success: rgb(0 168 9 / 100%);
  --x-color-danger: rgb(224 34 37 / 100%);
  --x-color-strong: rgb(255 130 0 / 100%);
  --x-color-warning: rgb(255 184 0 / 100%);
  --x-color-info: rgb(98 98 98 / 100%);
  --x-color-1: rgb(36 41 52 / 100%);
  --x-color-2: rgb(100 107 122 / 100%);
  --x-color-3: rgb(156 166 185 / 100%);
  --x-color-4: rgb(188 196 214 / 100%);
  --x-color-5: rgb(207, 213, 232);
  --x-color-6: rgb(237 241 246 / 100%);
  --x-color-7: rgb(245 247 251 / 100%);
  /*
   * --x-color-white 只用于「彩色底之上的内容」：实色按钮文字、选中态图标、
   * 深色菜单/布局文字。它不随主题翻转，暗色下仍需保持白色。
   * 表面背景请使用 --x-color-bg-surface / --x-color-bg-white，它们会随主题变化。
   */
  --x-color-white: rgb(255 255 255 / 100%);
  /*
   * 恒定黑：与 --x-color-white 对称，用于「饱和度/明度取色面板」的明度渐变
   * （从透明渐变到纯黑）以及色相的锚点。同样不随主题翻转。
   */
  --x-color-black: rgb(0 0 0 / 100%);
  /*
   * 恒定深色：用于「浅色实底之上的文字」（success/warning/strong 的实色按钮）。
   * 与 --x-color-white 对称 —— 二者都不随主题翻转，因为它们的底色固定。
   */
  --x-color-constant-dark: rgb(36 41 52 / 100%);
  /*
   * 实色按钮的底色同样不随主题翻转：它们是强调色块，
   * 暗色下变浅会既失去强调感、又让白字不达标。
   * 这些值由亮色色阶的对应档位固化而来，作为「恒定实色」使用。
   *
   * 注意：danger 不再需要恒定的压暗变体。种子 #e02225 本身白字即达 4.75:1，
   * 实心底直接复用种子、hover/active 用混色表达式（见 button 组件样式）。
   */
  --x-color-constant-neutral-strong: rgb(78 89 105 / 100%);
  --x-color-constant-neutral-strong-hover: rgb(107 119 133 / 100%);
  --x-color-constant-neutral-strong-active: rgb(39 46 59 / 100%);
  --x-color-transparent: transparent;
  --x-color-primary-light-1: var(--x-color-primary-1);
  --x-color-primary-light-2: var(--x-color-primary-light-1);
  --x-color-primary-light-3: var(--x-color-primary-light-1);
  --x-color-success-light-1: var(--x-color-success-1);
  --x-color-danger-light-1: var(--x-color-danger-1);
  --x-color-danger-light-2: var(--x-color-danger-2);
  --x-color-warning-light-1: var(--x-color-warning-1);
  --x-color-bg-2: var(--x-color-7);
  --x-color-bg-5: var(--x-color-7);
  --x-color-bg-white: rgb(255 255 255 / 100%);
  --gray-1: 247, 248, 250;
  --gray-2: 242, 243, 245;
  --gray-3: 229, 230, 235;
  --gray-4: 201, 205, 212;
  --gray-5: 169, 174, 184;
  --gray-6: 134, 144, 156;
  --gray-7: 107, 119, 133;
  --gray-8: 78, 89, 105;
  --gray-9: 39, 46, 59;
  --gray-10: 29, 33, 41;
  --x-color-neutral-1: rgb(var(--gray-1));
  --x-color-neutral-2: rgb(var(--gray-2));
  --x-color-neutral-3: rgb(var(--gray-3));
  --x-color-neutral-4: rgb(var(--gray-4));
  --x-color-neutral-5: rgb(var(--gray-5));
  --x-color-neutral-6: rgb(var(--gray-6));
  --x-color-neutral-7: rgb(var(--gray-7));
  --x-color-neutral-8: rgb(var(--gray-8));
  --x-color-neutral-9: rgb(var(--gray-9));
  --x-color-neutral-10: rgb(var(--gray-10));
  --x-color-fill-1: rgb(248, 248, 248);
  --x-color-fill-2: rgb(245, 245, 245);
  --x-color-fill-3: rgb(242, 243, 245);
  --x-color-fill-4: rgb(210, 210, 210);
  --x-color-fill-5: rgb(199, 199, 199);
  --x-color-fill-6: rgb(175, 175, 175);
  --x-color-text-1: rgb(29, 33, 41);
  --x-color-text-2: rgb(78, 89, 105);
  --x-color-text-3: rgb(134, 144, 156);
  --x-color-text-4: rgb(201, 205, 212);
  /* size */
  --x-size-none: 0;
  --x-size-1: 4px;
  --x-size-2: 8px;
  --x-size-3: 12px;
  --x-size-4: 16px;
  --x-size-5: 20px;
  --x-size-6: 24px;
  --x-size-7: 28px;
  --x-size-8: 32px;
  --x-size-9: 36px;
  --x-size-10: 40px;
  --x-size-11: 44px;
  --x-size-12: 48px;
  --x-size-13: 52px;
  --x-size-14: 56px;
  --x-size-15: 60px;
  --x-size-16: 64px;
  --x-size-17: 68px;
  --x-size-18: 72px;
  --x-size-19: 76px;
  --x-size-20: 80px;
  --x-size-21: 84px;
  --x-size-22: 88px;
  --x-size-23: 92px;
  --x-size-24: 96px;
  --x-size-25: 100px;
  --x-size-26: 104px;
  --x-size-27: 108px;
  --x-size-28: 112px;
  --x-size-29: 116px;
  --x-size-30: 120px;
  --x-size-31: 124px;
  --x-size-32: 128px;
  --x-size-33: 132px;
  --x-size-34: 136px;
  --x-size-35: 140px;
  --x-size-36: 144px;
  --x-size-37: 148px;
  --x-size-38: 152px;
  --x-size-39: 156px;
  --x-size-40: 160px;
  --x-size-41: 164px;
  --x-size-42: 168px;
  --x-size-43: 172px;
  --x-size-44: 176px;
  --x-size-45: 180px;
  --x-size-46: 184px;
  --x-size-47: 188px;
  --x-size-48: 192px;
  --x-size-49: 196px;
  --x-size-50: 200px;
  --x-size-mini: var(--x-size-6);
  --x-size-small: var(--x-size-7);
  --x-size-medium: var(--x-size-8);
  --x-size-default: var(--x-size-8);
  --x-size-large: var(--x-size-9);
  --x-size-huge: var(--x-size-10);
  /* spacing */
  --x-spacing-none: 0;
  --x-spacing-1: 2px;
  --x-spacing-2: 4px;
  --x-spacing-3: 6px;
  --x-spacing-4: 8px;
  --x-spacing-5: 10px;
  --x-spacing-6: 12px;
  --x-spacing-7: 16px;
  --x-spacing-8: 20px;
  --x-spacing-9: 24px;
  --x-spacing-10: 32px;
  --x-spacing-11: 36px;
  --x-spacing-12: 40px;
  --x-spacing-13: 48px;
  --x-spacing-14: 56px;
  --x-spacing-15: 60px;
  --x-spacing-16: 64px;
  --x-spacing-17: 72px;
  --x-spacing-18: 80px;
  --x-spacing-19: 84px;
  --x-spacing-20: 96px;
  --x-spacing-21: 100px;
  --x-spacing-22: 120px;
  /* borderSize */
  --x-border-none: 0;
  --x-border-1: 1px;
  --x-border-2: 2px;
  --x-border-3: 3px;
  --x-border-4: 4px;
  --x-border-5: 5px;
  /* borderStyle */
  --x-border-solid: solid;
  --x-border-dashed: dashed;
  --x-border-dotted: dotted;
  /* radius */
  --x-border-radius: var(--x-border-radius-medium);
  --x-border-radius-none: 0;
  --x-border-radius-small: 2px;
  --x-border-radius-medium: 4px;
  --x-border-radius-large: 8px;
  --x-border-radius-circle: 50%;
  /* fontSize */
  --x-font-size-display-3: 56px;
  --x-font-size-display-2: 48px;
  --x-font-size-display-1: 36px;
  --x-font-size-title-3: 24px;
  --x-font-size-title-2: 20px;
  --x-font-size-title-1: 16px;
  --x-font-size-body-3: 14px;
  --x-font-size-body-2: 13px;
  --x-font-size-body-1: 12px;
  --x-font-size-caption: 12px;
  /* fontWeight */
  --x-font-weight-100: 100;
  --x-font-weight-200: 200;
  --x-font-weight-300: 300;
  --x-font-weight-400: 400;
  --x-font-weight-500: 500;
  --x-font-weight-600: 600;
  --x-font-weight-700: 700;
  --x-font-weight-800: 800;
  --x-font-weight-900: 900;
  --x-transition-duration-1: 0.1s;
  --x-transition-duration-2: 0.2s;
  --x-transition-duration-3: 0.3s;
  --x-transition-duration-4: 0.4s;
  --x-transition-duration-5: 0.5s;
  --x-transition-duration-loading: 1s;
  --x-transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
  --x-transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
  --x-transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);
  --x-transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
  --x-transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);
  --x-line-height-base: 1.5715;
  /* shadow */
  --x-shadow-none: none;
  --x-shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
  --x-shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow1-right-down: 2px 2px 5px rgba(0, 0, 0, 0.1);
  --x-shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);
  --x-shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);
  --x-shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);
  /******** shadow distance *******/
  --x-shadow-distance-none: 0;
  --x-shadow-distance-1: 1px;
  --x-shadow-distance-2: 2px;
  --x-shadow-distance-3: 3px;
  --x-shadow-distance-4: 4px;
}

:root {
  /* DIY Color */
  --x-color-spin-layer-bg: rgba(255, 255, 255, 0.9);
  /*
   * Spin 文案扫光的高光色 = 文案主色向白混合。
   *
   * 混白比例偏低时高光几乎看不出来（实测 42% 时只是轻微提亮），
   * 取 30% 让光带明显但不过曝：亮色下得到浅蓝、暗色下由更亮的
   * primary-7 混白得到更浅的蓝。--x-color-white 在两个主题下都保持白色
   * （它是「彩色底之上的内容色」，暗色不翻转），所以方向都正确，
   * 不需要在 build-theme-dark 里手工覆盖。
   */
  --x-spin-tip-shimmer-color-highlight: color-mix(
    in srgb,
    var(--x-color-primary-text) 30%,
    var(--x-color-white)
  );
  --x-spin-tip-shimmer-duration: 2s;
  /* base */
  --x-font-size: 14px;
  --x-text-color: var(--x-color-1);
  --x-text-color-disabled: var(--x-color-3);
  --x-border-color: var(--x-color-4);
  --x-placeholder-color: var(--x-color-2);
  /* color */
  --x-text-gray: var(--x-color-1);
  --x-text-gray-1: var(--x-color-2);
  --x-text-gray-2: var(--x-color-3);
  /* disabled */
  --x-disabled-color: var(--x-color-3);
  --x-disabled-bgc: rgb(250 251 253 / 100%);
  --x-disabled-bc: rgb(225 228 232 / 100%);
  /* hover */
  --x-hover-bgc: rgb(248 250 255 / 100%);
  --x-hover-color: var(--x-color-primary);
  --x-hover-bc: rgb(188 196 214 / 100%);
  /* field semantic token */
  --x-field-color-bg: var(--x-color-bg-surface);
  --x-field-color-bg-hover: var(--x-color-bg-surface);
  --x-field-color-bg-focus: var(--x-color-bg-surface);
  --x-field-color-bg-disabled: var(--x-disabled-bgc);
  --x-field-color-bg-error: var(--x-color-danger-subtle);
  --x-field-color-bg-error-hover: var(--x-color-danger-2);
  --x-field-color-bg-error-focus: var(--x-color-bg-surface);
  --x-field-color-text: var(--x-color-text-primary);
  --x-field-color-text-disabled: var(--x-color-text-disabled);
  --x-field-color-placeholder: var(--x-color-text-tertiary);
  --x-field-color-affix: var(--x-color-text-tertiary);
  --x-field-color-icon: var(--x-color-text-secondary);
  --x-field-color-border: var(--x-color-border-default);
  --x-field-color-border-hover: var(--x-color-neutral-5);
  --x-field-color-border-focus: var(--x-color-border-focus);
  --x-field-color-border-disabled: var(--x-disabled-bc);
  --x-field-color-border-error: var(--x-color-danger-solid);
  --x-field-color-shadow-focus: var(--x-color-primary-light-2);
  --x-field-size-shadow-focus: var(--x-shadow-distance-none);
  --x-field-border-radius: var(--x-border-radius-medium);
  --x-field-status-success-bg: var(--x-color-success-subtle);
  --x-field-status-success-bg-hover: var(--x-color-success-2);
  --x-field-status-success-bg-focus: var(--x-color-bg-surface);
  --x-field-status-success-border: var(--x-color-transparent);
  --x-field-status-success-border-hover: var(--x-color-transparent);
  --x-field-status-success-border-focus: var(--x-color-success-solid);
  --x-field-status-success-shadow-size-focus: var(--x-shadow-distance-none);
  --x-field-status-success-shadow-color-focus: var(--x-color-success-2);
  /*
   * 校验提示的文字与图标都用状态文字角色（即品牌主色）。
   * 图标原先用 -8 档（压暗），观感发灰且与 Arco 做法不符——
   * Arco 的校验图标就是 -6 档种子（@form-color-tip-icon-text_error: @color-danger-6）。
   * 统一后文字与图标同色，与 Link/Tag/Button 的状态色也一致。
   */
  --x-field-status-success-text: var(--x-color-success-text);
  --x-field-status-success-icon: var(--x-color-success-text);
  --x-field-status-warning-bg: var(--x-color-warning-subtle);
  --x-field-status-warning-bg-hover: var(--x-color-warning-2);
  --x-field-status-warning-bg-focus: var(--x-color-bg-surface);
  --x-field-status-warning-border: var(--x-color-transparent);
  --x-field-status-warning-border-hover: var(--x-color-transparent);
  --x-field-status-warning-border-focus: var(--x-color-warning-solid);
  --x-field-status-warning-shadow-size-focus: var(--x-shadow-distance-none);
  --x-field-status-warning-shadow-color-focus: var(--x-color-warning-2);
  --x-field-status-warning-text: var(--x-color-warning-text);
  --x-field-status-warning-icon: var(--x-color-warning-text);
  --x-field-status-error-bg: var(--x-color-danger-subtle);
  --x-field-status-error-bg-hover: var(--x-color-danger-2);
  --x-field-status-error-bg-focus: var(--x-color-bg-surface);
  --x-field-status-error-border: var(--x-color-transparent);
  --x-field-status-error-border-hover: var(--x-color-transparent);
  --x-field-status-error-border-focus: var(--x-color-danger-solid);
  --x-field-status-error-shadow-size-focus: var(--x-shadow-distance-none);
  --x-field-status-error-shadow-color-focus: var(--x-color-danger-2);
  --x-field-status-error-text: var(--x-color-danger-text);
  --x-field-status-error-icon: var(--x-color-danger-text);
  --x-field-status-validating-bg: var(--x-color-primary-subtle);
  --x-field-status-validating-bg-hover: var(--x-color-primary-2);
  --x-field-status-validating-bg-focus: var(--x-color-bg-surface);
  --x-field-status-validating-border: var(--x-color-transparent);
  --x-field-status-validating-border-hover: var(--x-color-transparent);
  --x-field-status-validating-border-focus: var(--x-color-primary-solid);
  --x-field-status-validating-shadow-size-focus: var(--x-shadow-distance-none);
  --x-field-status-validating-shadow-color-focus: var(--x-color-primary-2);
  --x-field-status-validating-text: var(--x-color-primary-text);
  --x-field-status-validating-icon: var(--x-color-primary-text);
  /* form 基础表单统一颜色 */
  --x-form-bg-color: var(--x-field-color-bg);
  --x-form-bg-color-disabled: var(--x-field-color-bg-disabled);
  --x-form-bg-color-hover: var(--x-field-color-bg-hover);
  --x-form-bg-color-focus: var(--x-field-color-bg-focus);
  --x-form-bg-color-error-focus: var(--x-field-color-bg-error-focus);
  --x-form-text-color: var(--x-field-color-text);
  --x-form-text-color-disabled: var(--x-field-color-text-disabled);
  --x-form-text-color-prefix-suffix: var(--x-field-color-affix);
  --x-form-icon-color: var(--x-field-color-icon);
  --x-form-border-color: var(--x-field-color-border);
  --x-form-border-color-hover: var(--x-field-color-border-hover);
  --x-form-border-color-focus: var(--x-field-color-border-focus);
  --x-form-border-color-disabled: var(--x-field-color-border-disabled);
  --x-form-border-color-error: var(--x-field-color-border-error);
  /* form 基础表单统一属性 */
  --x-form-border-radius: var(--x-field-border-radius);
  /* Input */
  --x-input-border-radius: var(--x-form-border-radius);
  /* select */
  --x-select-color: var(--x-color-primary);
  --x-select-bgc: rgb(248 250 255 / 100%);
  --x-select-bc: var(--x-color-primary);
  --x-color-bg-popup: var(--x-color-bg-white);
  --x-color-menu-light-bg: var(--x-color-bg-white);
  /* focus */
  --x-focus-bc: var(--x-color-primary);
  /* background color */
  --x-bgc: rgb(245 247 251 / 100%);
  /* size */
  --x-fs-small: 12px;
  --x-fs: 14px;
  --x-fs-large: 16px;
  /* split border */
  --x-split-color: rgb(237 241 246 / 100%);
  --x-bc: rgb(237 241 246 / 100%);
  --x-color-dark-bg: #21242c;
  --x-z-index-popup-base: 1000;
  --x-color-menu-dark-bg: var(--x-color-dark-bg);
  --x-color-menu-dark-text: rgba(255, 255, 255, 0.86);
  --x-color-menu-dark-text-secondary: rgba(255, 255, 255, 0.68);
  --x-color-menu-dark-text-disabled: rgba(255, 255, 255, 0.36);
  --x-color-menu-dark-hover: var(--x-color-primary);
  --x-color-menu-dark-submenu-selected-bg: color-mix(in srgb, var(--x-color-primary) 45%, transparent);
  --x-z-index-popup: var(--x-z-index-popup-base);
  --x-trigger-z-index-popup: var(--x-z-index-popup);
  --x-icon-hover-color-bg: var(--x-color-fill-1);
  --x-empty-image-color: var(--x-color-text-4);
  /*
   * 空态默认插画的四层灰阶。取值与原硬编码字面量逐位一致（亮色观感零变化），
   * 暗色对应值由 build-theme-dark 给出——插画由此随主题变化，
   * 不再需要「整体降透明度」的补丁。
   */
  --x-empty-illustration-planes: rgb(245 245 247);
  --x-empty-illustration-mid: rgb(220 224 230);
  --x-empty-illustration-strong: rgb(174 184 194);
  --x-empty-illustration-highlight: rgb(255 255 255);
  --x-layout-trigger-dark-bg: rgba(255, 255, 255, 0.2);
  --x-layout-sidebar-light-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
  /* semantic token */
  /*
   * 按钮组分隔线：用半透明黑跟随按钮底色，而不是固定白色。
   * 固定 50% 白在实色/深色按钮上可见（2.3:1），但在默认灰按钮上只有 1.04:1
   * （按钮组内相邻按钮同色，分隔线是唯一边界提示，看不到就等于没有边界）。
   * 半透明黑在所有底色上都稳定在 1.2~1.3:1，与分割线应有的存在感一致。
   */
  --x-button-group-color-separator: rgb(0 0 0 / 12%);
  --x-color-text-primary: var(--x-color-text-1);
  --x-color-text-secondary: var(--x-color-text-2);
  --x-color-text-tertiary: var(--x-color-text-3);
  --x-color-text-disabled: var(--x-color-text-4);
  --x-color-bg-page: var(--x-color-7);
  --x-color-bg-surface: var(--x-color-bg-white);
  --x-color-bg-subtle: var(--x-color-fill-1);
  --x-color-bg-elevated: var(--x-color-bg-popup);
  --x-color-border-default: var(--x-border-color);
  --x-color-border-subtle: var(--x-color-neutral-3);
  --x-color-border-focus: var(--x-color-primary-6);
  --x-color-overlay-mask: rgb(29 33 41 / 60%);
  --x-color-overlay-tooltip-bg: var(--x-color-neutral-10);
  --x-color-overlay-tooltip-text: var(--x-color-white);
  --x-color-bg-elevated-border: var(--x-color-border-subtle);
  --x-color-text-elevated-title: var(--x-color-text-primary);
  --x-color-text-elevated-body: var(--x-color-text-secondary);
  --x-color-icon-elevated: var(--x-color-text-tertiary);
  --x-color-icon-elevated-hover: var(--x-color-text-primary);
  --x-color-icon-elevated-hover-bg: var(--x-color-fill-3);
  --x-shadow-elevated: var(--x-shadow2-down);
  --x-shadow-modal: var(--x-shadow3-down);
  --x-shadow-drawer: var(--x-shadow3-left);
  /*
   * 浮层阴影：三层叠加（对齐 Ant Design 的 boxShadowSecondary）。
   *
   * 扁平化方向下浮层不再画边框，层次完全由阴影承担，因此单层的
   * --x-shadow2-down（0 4px 10px / 10%）不够——去掉 1px 边框后会显得"贴"在页面上。
   * 三层分别负责：近距投射、贴边描边感、远距扩散。
   * 暗色下阴影会被深底吸收，由生成器改用更高不透明度（见 build-theme-dark）。
   */
  --x-shadow-popover:
    0 6px 16px 0 rgb(0 0 0 / 8%),
    0 3px 6px -4px rgb(0 0 0 / 12%),
    0 9px 28px 8px rgb(0 0 0 / 5%);
  --x-shadow-popover-arrow: var(--x-shadow1-down);
  --x-scrollbar-color-thumb-bg: var(--x-color-fill-5);
  --x-scrollbar-color-thumb-bg-hover: var(--x-color-fill-6);
  --x-scrollbar-color-track-bg: var(--x-color-fill-2);
  --x-scrollbar-color-track-border: var(--x-color-border-subtle);
  --x-timeline-dot-shadow: 0 0 0 1px color-mix(in srgb, var(--x-color-primary-solid) 8%, var(--x-color-transparent));
  --x-timeline-dot-hollow-shadow: 0 0 0 1px color-mix(
      in srgb,
      var(--x-color-primary-solid) 10%,
      var(--x-color-transparent)
    );
  --x-message-color-bg: color-mix(in srgb, var(--x-color-bg-elevated) 94%, var(--x-color-transparent));
  --x-message-color-border: rgb(15 23 42 / 8%);
  --x-message-color-text: var(--x-color-text-elevated-title);
  --x-message-color-close: var(--x-color-text-elevated-body);
  --x-message-color-close-bg-hover: rgb(15 23 42 / 6%);
  --x-message-box-shadow:
    0 14px 40px rgb(15 23 42 / 10%),
    0 4px 12px rgb(15 23 42 / 6%);
  --x-message-color-accent-info: var(--x-color-primary-solid);
  --x-message-color-accent-success: var(--x-color-success-solid);
  --x-message-color-accent-warning: var(--x-color-warning-solid);
  --x-message-color-accent-strong: var(--x-color-strong-solid);
  --x-message-color-accent-error: var(--x-color-danger-solid);
  --x-message-color-accent-loading: var(--x-color-primary-solid);
  --x-message-color-accent-normal: var(--x-color-text-elevated-body);
  --x-message-color-icon-bg-info: var(--x-color-primary-subtle);
  --x-message-color-icon-bg-success: var(--x-color-success-subtle);
  --x-message-color-icon-bg-warning: var(--x-color-warning-subtle);
  --x-message-color-icon-bg-strong: var(--x-color-strong-subtle);
  --x-message-color-icon-bg-error: var(--x-color-danger-subtle);
  --x-message-color-icon-bg-loading: var(--x-color-primary-subtle);
  --x-message-color-icon-bg-normal: var(--x-color-fill-2);
  --x-notification-color-bg: color-mix(in srgb, var(--x-color-bg-elevated) 96%, var(--x-color-transparent));
  --x-notification-color-border: var(--x-message-color-border);
  --x-notification-color-title: var(--x-color-text-elevated-title);
  --x-notification-color-content: var(--x-color-text-elevated-body);
  --x-notification-color-close: var(--x-color-text-elevated-body);
  --x-notification-color-close-bg-hover: var(--x-message-color-close-bg-hover);
  --x-notification-box-shadow:
    0 16px 44px rgb(15 23 42 / 12%),
    0 4px 14px rgb(15 23 42 / 8%);
  --x-notification-color-accent-info: var(--x-color-primary-solid);
  --x-notification-color-accent-success: var(--x-color-success-solid);
  --x-notification-color-accent-warning: var(--x-color-warning-solid);
  --x-notification-color-accent-strong: var(--x-color-strong-solid);
  --x-notification-color-accent-error: var(--x-color-danger-solid);
  --x-notification-color-icon-bg-info: var(--x-color-primary-subtle);
  --x-notification-color-icon-bg-success: var(--x-color-success-subtle);
  --x-notification-color-icon-bg-warning: var(--x-color-warning-subtle);
  --x-notification-color-icon-bg-strong: var(--x-color-strong-subtle);
  --x-notification-color-icon-bg-error: var(--x-color-danger-subtle);
  --x-time-range-selector-color-default: var(--x-color-primary-6);
  --x-time-range-selector-disabled-bg-default: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-color-text-4) 18%, var(--x-color-white)) 0%,
    color-mix(in srgb, var(--x-color-fill-3) 72%, var(--x-color-white)) 100%
  );
  --x-time-range-selector-disabled-border-default: color-mix(
    in srgb,
    var(--x-color-text-3) 28%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-disabled-shadow-default: inset 0 1px 0 rgb(255 255 255 / 62%);
  --x-time-range-selector-block-alternate-bg-default: var(--x-color-transparent);
  --x-time-range-selector-tick-color-default: color-mix(
    in srgb,
    var(--x-color-text-4) 82%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-edge-bg-default: color-mix(
    in srgb,
    var(--x-color-white) 84%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-edge-bg-hover: var(--x-color-bg-surface);
  --x-time-range-selector-label-shadow-default: 0 1px 2px rgba(0, 0, 0, 0.35);
  --x-time-range-selector-grid-border-schedule: var(--x-color-transparent);
  --x-time-range-selector-track-shadow-schedule: inset 0 1px 0 color-mix(in srgb, var(--x-color-bg-white) 82%, var(--x-color-transparent));
  --x-time-range-selector-grid-bg-schedule: var(--x-color-transparent);
  --x-time-range-selector-edge-bg-schedule: color-mix(
    in srgb,
    var(--x-color-white) 92%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-disabled-shadow-schedule: inset 0 1px 0 rgb(255 255 255 / 70%);
  --x-time-range-selector-grid-border-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 48%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-track-bg-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 34%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-track-border-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 18%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-grid-bg-monitor: var(--x-color-bg-white);
  --x-time-range-selector-disabled-bg-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 46%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-disabled-border-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 34%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-tick-color-monitor: color-mix(
    in srgb,
    var(--x-color-text-4) 76%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-edge-bg-monitor: var(--x-time-range-selector-edge-bg-default);
  --x-time-range-selector-edge-shadow-monitor: 0 0 0 1px rgb(255 255 255 / 22%);
  --x-time-range-selector-label-shadow-monitor: 0 1px 1px rgba(0, 0, 0, 0.42);
  --x-time-range-selector-track-bg-compact: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-color-fill-2) 82%, var(--x-color-white)) 0%,
    color-mix(in srgb, var(--x-color-fill-3) 88%, var(--x-color-white)) 100%
  );
  --x-time-range-selector-track-border-compact: var(--x-color-transparent);
  --x-time-range-selector-grid-bg-compact: var(--x-color-bg-white);
  --x-time-range-selector-disabled-bg-compact: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-color-text-4) 18%, var(--x-color-white)) 0%,
    color-mix(in srgb, var(--x-color-fill-3) 82%, var(--x-color-white)) 100%
  );
  --x-time-range-selector-disabled-border-compact: color-mix(
    in srgb,
    var(--x-color-text-3) 24%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-tick-color-compact: color-mix(
    in srgb,
    var(--x-color-text-4) 80%,
    var(--x-color-transparent)
  );
  /* progress component token */
  --x-progress-line-color-loading-shimmer-start: var(--x-color-transparent);
  --x-progress-line-color-loading-shimmer-active: rgba(255, 255, 255, 0.5);
  --x-progress-line-color-loading-shimmer-end: var(--x-color-transparent);
  /* date/time picker component token */
  --x-picker-panel-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  --x-picker-column-scrollbar-thumb-bg: color-mix(
    in srgb,
    var(--x-color-text-4) 65%,
    var(--x-color-transparent)
  );
  --x-shadow-color-fixed-column: rgba(0, 0, 0, 0.18);
  --x-color-primary-subtle: var(--x-color-primary-1);
  --x-color-success-subtle: var(--x-color-success-1);
  --x-color-warning-subtle: var(--x-color-warning-1);
  --x-color-danger-subtle: var(--x-color-danger-1);
  --x-color-strong-subtle: var(--x-color-strong-1);
  /*
   * 弱底交互：悬浮混入按钮文字色 10%、按下 16%（当前仅 Button 消费）。
   *
   * 两个要点：
   * 1. 混的是 --x-color-<family>-button-text（按钮实际显示的文字色），
   *    不是全局正文色。两者缩放比例不同，混错会出现"底色按更深的正文算、
   *    文字按更亮的按钮色显示"，按下态对比度凭空掉一截。
   * 2. 权重经四轮校准：12%/14% 时悬浮与按下明度差只有 0.009（按住看不出变化）；
   *    12%/26% 反馈清晰但偏重；状态文字改用种子色后 8% 又不足 0.025。
   *    最终多数族用 10%/16%（两级 ΔL >= 0.029）。
   * 3. **warning 单独用 25%/40%**：其种子 #ffb800 的明度接近自身浅底 #fffde8，
   *    10% 权重下 ΔL 只有 0.019（看不见反馈），需更高权重才能达到同等的可感知程度。
   *
   * 按下是瞬态（仅按住期间可见），文字对比按瞬态阈值验收（见 check-contrast）。
   * 暗色由生成器配对 -7/-8 档前景，并独立校准 warning 的混色权重。
   */
  --x-color-primary-subtle-hover: color-mix(in srgb, var(--x-color-primary-subtle) 90%, var(--x-color-primary-button-text));
  --x-color-primary-subtle-active: color-mix(in srgb, var(--x-color-primary-subtle) 84%, var(--x-color-primary-button-text));
  --x-color-success-subtle-hover: color-mix(in srgb, var(--x-color-success-subtle) 90%, var(--x-color-success-button-text));
  --x-color-success-subtle-active: color-mix(in srgb, var(--x-color-success-subtle) 84%, var(--x-color-success-button-text));
  --x-color-warning-subtle-hover: color-mix(in srgb, var(--x-color-warning-subtle) 75%, var(--x-color-warning-button-text));
  --x-color-warning-subtle-active: color-mix(in srgb, var(--x-color-warning-subtle) 60%, var(--x-color-warning-button-text));
  --x-color-danger-subtle-hover: color-mix(in srgb, var(--x-color-danger-subtle) 90%, var(--x-color-danger-button-text));
  --x-color-danger-subtle-active: color-mix(in srgb, var(--x-color-danger-subtle) 84%, var(--x-color-danger-button-text));
  --x-color-strong-subtle-hover: color-mix(in srgb, var(--x-color-strong-subtle) 90%, var(--x-color-strong-button-text));
  --x-color-strong-subtle-active: color-mix(in srgb, var(--x-color-strong-subtle) 84%, var(--x-color-strong-button-text));
  /*
   * 实色底恒定（不随主题翻转），交互态用固定表达式：
   * hover 混白 8%、active 混恒定深色 10%。
   * 不使用 -5/-7 档，避免亮暗主题下 hover 方向相反。
   */
  --x-color-primary-solid: var(--x-color-primary-6);
  --x-color-primary-solid-hover: color-mix(in srgb, var(--x-color-primary-solid) 92%, var(--x-color-white));
  --x-color-primary-solid-active: color-mix(in srgb, var(--x-color-primary-solid) 90%, var(--x-color-constant-dark));
  --x-color-success-solid: var(--x-color-success-6);
  --x-color-success-solid-hover: color-mix(in srgb, var(--x-color-success-solid) 92%, var(--x-color-white));
  --x-color-success-solid-active: color-mix(in srgb, var(--x-color-success-solid) 90%, var(--x-color-constant-dark));
  --x-color-warning-solid: var(--x-color-warning-6);
  --x-color-warning-solid-hover: color-mix(in srgb, var(--x-color-warning-solid) 92%, var(--x-color-white));
  --x-color-warning-solid-active: color-mix(in srgb, var(--x-color-warning-solid) 90%, var(--x-color-constant-dark));
  --x-color-danger-solid: var(--x-color-danger-6);
  --x-color-danger-solid-hover: color-mix(in srgb, var(--x-color-danger-solid) 92%, var(--x-color-white));
  --x-color-danger-solid-active: color-mix(in srgb, var(--x-color-danger-solid) 90%, var(--x-color-constant-dark));
  --x-color-strong-solid: var(--x-color-strong-6);
  --x-color-strong-solid-hover: color-mix(in srgb, var(--x-color-strong-solid) 92%, var(--x-color-white));
  --x-color-strong-solid-active: color-mix(in srgb, var(--x-color-strong-solid) 90%, var(--x-color-constant-dark));
  /*
   * 状态文字角色：直接用品牌主色（-6 档种子），与 Arco 的做法一致。
   *
   * 为什么不再压暗：压暗能让文字过 4.5:1，代价是亮色族变成橄榄／暗褐
   * （warning 曾压到 57% → #a87900），与鲜艳的实心按钮、Tag 底形成两套色，
   * 观感发闷。Arco 的选择是"状态文字即主色"，接受自身底上 1.63~3.25 的
   * 对比度，换取一眼可辨的品牌一致性（Arco Link 白底 success 2.78 / warning 2.57，
   * Tag 自身底 lime 1.63 / gold 1.70）。
   *
   * 本库沿用该策略，唯一例外是 warning：种子 #ffb800 是纯黄，白底仅 1.73:1，
   * 连 Arco 的 2.57 都不到，因此压到 82%（#d19700，2.58:1）追平 Arco 基准。
   * 其余四族直接用种子：primary 5.00 / success 3.18 / danger 4.75 / strong 2.49，
   * 均不低于 Arco 同级水平（primary 5.19 / success 2.78 / danger 3.71）。
   *
   * 阈值由 check-contrast 的 ARCO_BASELINE 守护——基准是"不低于 Arco"，
   * 而不是通用的 4.5:1 正文标准。
   *
   * 按钮彩色文字曾与此分离（正文按 4.5:1 调校，用在同色浅底上过深）；
   * 现在两者统一为品牌主色，按钮侧保留别名以兼容既有引用。
   */
  --x-color-primary-text: var(--x-color-primary);
  --x-color-success-text: var(--x-color-success);
  /*
   * warning 用种子本身（与其余四族一致）。
   *
   * 曾为对齐 Arco 基准压到 82%（#d19700），但 Arco 的 warning 是橙色 #ff7d00，
   * 压暗后仍偏暖；本库种子是纯黄 #ffb800，低明度下 sRGB 色域收窄，压暗后
   * 观感转为橄榄/土黄（用户反馈"都变灰了"）。同时 Message/Notification 走
   * -solid（种子）未被压暗，形成"同一语义两套色"。现全库统一为种子。
   */
  --x-color-warning-text: var(--x-color-warning);
  --x-color-danger-text: var(--x-color-danger);
  --x-color-strong-text: var(--x-color-strong);
  --x-color-primary-button-text: var(--x-color-primary-text);
  --x-color-success-button-text: var(--x-color-success-text);
  --x-color-warning-button-text: var(--x-color-warning-text);
  --x-color-danger-button-text: var(--x-color-danger-text);
  --x-color-strong-button-text: var(--x-color-strong-text);
  --x-button-color-bg-default: color-mix(in srgb, var(--x-color-bg-surface) 50%, var(--x-color-fill-2));
  --x-button-color-bg-default-hover: color-mix(in srgb, var(--x-button-color-bg-default) 98%, var(--x-color-black));
  --x-button-color-bg-default-active: color-mix(in srgb, var(--x-button-color-bg-default) 96%, var(--x-color-black));
  --x-button-color-bg-default-solid: rgb(64 64 64);
  --x-button-color-bg-default-solid-hover: color-mix(in srgb, var(--x-button-color-bg-default-solid) 92%, var(--x-color-white));
  --x-button-color-bg-default-solid-active: color-mix(in srgb, var(--x-button-color-bg-default-solid) 90%, var(--x-color-black));
  --x-button-color-bg-default-outline-hover: color-mix(in srgb, var(--x-button-color-text-default) 3%, var(--x-color-transparent));
  --x-button-color-bg-default-outline-active: color-mix(in srgb, var(--x-button-color-text-default) 5%, var(--x-color-transparent));
  --x-button-color-text-default-hover: color-mix(in srgb, var(--x-button-color-text-default) 92%, var(--x-color-black));
  --x-button-color-text-default-active: color-mix(in srgb, var(--x-button-color-text-default) 84%, var(--x-color-black));
  --x-button-color-bg-primary-outline-hover: color-mix(in srgb, var(--x-button-color-text-primary) 3%, var(--x-color-transparent));
  --x-button-color-bg-primary-outline-active: color-mix(in srgb, var(--x-button-color-text-primary) 5%, var(--x-color-transparent));
  --x-button-color-text-primary-hover: color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-black));
  --x-button-color-text-primary-active: color-mix(in srgb, var(--x-button-color-text-primary) 84%, var(--x-color-black));
  --x-button-color-bg-success-outline-hover: color-mix(in srgb, var(--x-button-color-text-success) 3%, var(--x-color-transparent));
  --x-button-color-bg-success-outline-active: color-mix(in srgb, var(--x-button-color-text-success) 5%, var(--x-color-transparent));
  --x-button-color-text-success-hover: color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-black));
  --x-button-color-text-success-active: color-mix(in srgb, var(--x-button-color-text-success) 84%, var(--x-color-black));
  --x-button-color-bg-warning-outline-hover: color-mix(in srgb, var(--x-button-color-text-warning) 3%, var(--x-color-transparent));
  --x-button-color-bg-warning-outline-active: color-mix(in srgb, var(--x-button-color-text-warning) 5%, var(--x-color-transparent));
  --x-button-color-text-warning-hover: color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-black));
  --x-button-color-text-warning-active: color-mix(in srgb, var(--x-button-color-text-warning) 84%, var(--x-color-black));
  --x-button-color-bg-strong-outline-hover: color-mix(in srgb, var(--x-button-color-text-strong) 3%, var(--x-color-transparent));
  --x-button-color-bg-strong-outline-active: color-mix(in srgb, var(--x-button-color-text-strong) 5%, var(--x-color-transparent));
  --x-button-color-text-strong-hover: color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-black));
  --x-button-color-text-strong-active: color-mix(in srgb, var(--x-button-color-text-strong) 84%, var(--x-color-black));
  --x-button-color-bg-danger-outline-hover: color-mix(in srgb, var(--x-button-color-text-danger) 3%, var(--x-color-transparent));
  --x-button-color-bg-danger-outline-active: color-mix(in srgb, var(--x-button-color-text-danger) 5%, var(--x-color-transparent));
  --x-button-color-text-danger-hover: color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-black));
  --x-button-color-text-danger-active: color-mix(in srgb, var(--x-button-color-text-danger) 84%, var(--x-color-black));
  --x-button-color-bg-info-outline-hover: color-mix(in srgb, var(--x-button-color-text-info) 3%, var(--x-color-transparent));
  --x-button-color-bg-info-outline-active: color-mix(in srgb, var(--x-button-color-text-info) 5%, var(--x-color-transparent));
  --x-button-color-text-info-hover: color-mix(in srgb, var(--x-button-color-text-info) 92%, var(--x-color-black));
  --x-button-color-text-info-active: color-mix(in srgb, var(--x-button-color-text-info) 84%, var(--x-color-black));
  /* tag component token */
  --x-tag-color-text-default: var(--x-color-text-primary);
  --x-tag-color-bg-default: var(--x-color-fill-3);
  --x-tag-color-bg-default-hover: var(--x-color-fill-4);
  --x-tag-color-border-default: var(--x-color-fill-4);
  --x-tag-color-border-default-hover: var(--x-color-fill-5);
  --x-tag-color-border-default-bordered: var(--x-color-fill-6);
  --x-tag-color-icon-bg-hover-default: var(--x-color-fill-4);
  --x-tag-custom-color-text: var(--x-color-white);
  --x-tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);
  /*
   * Tag 13 族：文字直接用种子色（对齐 Arco——其 Tag 文字即 -6 档，
   * 自身浅底上最低 1.63:1，换取一眼可辨的品牌色）。
   * hover 底混入本族文字色 16%，让"选中后可悬浮"有可见反馈（ΔL >= 0.029）。
   * 对比下限由 check-contrast 的 Arco 基准守护。
   */
  --x-tag-color-red-seed: rgb(245, 63, 63);
  --x-tag-color-red-text: var(--x-tag-color-red-seed);
  --x-tag-color-red-bg: rgb(255, 236, 232);
  --x-tag-color-red-border: var(--x-color-transparent);
  --x-tag-color-red-border-hover: color-mix(in srgb, var(--x-tag-color-red-bg) 84%, var(--x-tag-color-red-text));
  --x-tag-color-red-icon-bg_hover: rgba(245, 63, 63, 0.16);
  --x-tag-color-orangered-seed: rgb(247, 114, 52);
  --x-tag-color-orangered-text: var(--x-tag-color-orangered-seed);
  --x-tag-color-orangered-bg: rgb(255, 243, 232);
  --x-tag-color-orangered-border: var(--x-color-transparent);
  --x-tag-color-orangered-border-hover: color-mix(in srgb, var(--x-tag-color-orangered-bg) 84%, var(--x-tag-color-orangered-text));
  --x-tag-color-orangered-icon-bg_hover: rgba(247, 114, 52, 0.16);
  --x-tag-color-orange-seed: rgb(255, 125, 0);
  --x-tag-color-orange-text: var(--x-tag-color-orange-seed);
  --x-tag-color-orange-bg: rgb(255, 247, 232);
  --x-tag-color-orange-border: var(--x-color-transparent);
  --x-tag-color-orange-border-hover: color-mix(in srgb, var(--x-tag-color-orange-bg) 84%, var(--x-tag-color-orange-text));
  --x-tag-color-orange-icon-bg_hover: rgba(255, 125, 0, 0.16);
  --x-tag-color-gold-seed: rgb(247, 186, 30);
  --x-tag-color-gold-text: var(--x-tag-color-gold-seed);
  --x-tag-color-gold-bg: rgb(255, 252, 232);
  --x-tag-color-gold-border: var(--x-color-transparent);
  --x-tag-color-gold-border-hover: color-mix(in srgb, var(--x-tag-color-gold-bg) 84%, var(--x-tag-color-gold-text));
  --x-tag-color-gold-icon-bg_hover: rgba(247, 186, 30, 0.18);
  --x-tag-color-lime-seed: rgb(159, 219, 29);
  --x-tag-color-lime-text: var(--x-tag-color-lime-seed);
  --x-tag-color-lime-bg: rgb(252, 255, 232);
  --x-tag-color-lime-border: var(--x-color-transparent);
  --x-tag-color-lime-border-hover: color-mix(in srgb, var(--x-tag-color-lime-bg) 84%, var(--x-tag-color-lime-text));
  --x-tag-color-lime-icon-bg_hover: rgba(159, 219, 29, 0.18);
  --x-tag-color-green-seed: rgb(0, 180, 42);
  --x-tag-color-green-text: var(--x-tag-color-green-seed);
  --x-tag-color-green-bg: rgb(232, 255, 234);
  --x-tag-color-green-border: var(--x-color-transparent);
  --x-tag-color-green-border-hover: color-mix(in srgb, var(--x-tag-color-green-bg) 84%, var(--x-tag-color-green-text));
  --x-tag-color-green-icon-bg_hover: rgba(0, 180, 42, 0.16);
  --x-tag-color-cyan-seed: rgb(20, 201, 201);
  --x-tag-color-cyan-text: var(--x-tag-color-cyan-seed);
  --x-tag-color-cyan-bg: rgb(232, 255, 251);
  --x-tag-color-cyan-border: var(--x-color-transparent);
  --x-tag-color-cyan-border-hover: color-mix(in srgb, var(--x-tag-color-cyan-bg) 84%, var(--x-tag-color-cyan-text));
  --x-tag-color-cyan-icon-bg_hover: rgba(20, 201, 201, 0.16);
  --x-tag-color-blue-seed: rgb(52, 145, 250);
  --x-tag-color-blue-text: var(--x-tag-color-blue-seed);
  --x-tag-color-blue-bg: rgb(232, 247, 255);
  --x-tag-color-blue-border: var(--x-color-transparent);
  --x-tag-color-blue-border-hover: color-mix(in srgb, var(--x-tag-color-blue-bg) 84%, var(--x-tag-color-blue-text));
  --x-tag-color-blue-icon-bg_hover: rgba(52, 145, 250, 0.16);
  --x-tag-color-better-blue-seed: rgb(22, 93, 255);
  --x-tag-color-better-blue-text: var(--x-tag-color-better-blue-seed);
  --x-tag-color-better-blue-bg: var(--x-color-primary-subtle);
  --x-tag-color-better-blue-border: var(--x-color-transparent);
  --x-tag-color-better-blue-border-hover: color-mix(in srgb, var(--x-tag-color-better-blue-bg) 84%, var(--x-tag-color-better-blue-text));
  --x-tag-color-better-blue-icon-bg_hover: rgba(22, 93, 255, 0.16);
  --x-tag-color-purple-seed: rgb(114, 46, 209);
  --x-tag-color-purple-text: var(--x-tag-color-purple-seed);
  --x-tag-color-purple-bg: rgb(245, 232, 255);
  --x-tag-color-purple-border: var(--x-color-transparent);
  --x-tag-color-purple-border-hover: color-mix(in srgb, var(--x-tag-color-purple-bg) 84%, var(--x-tag-color-purple-text));
  --x-tag-color-purple-icon-bg_hover: rgba(114, 46, 209, 0.16);
  --x-tag-color-pink-purple-seed: rgb(217, 26, 217);
  --x-tag-color-pink-purple-text: var(--x-tag-color-pink-purple-seed);
  --x-tag-color-pink-purple-bg: rgb(255, 232, 251);
  --x-tag-color-pink-purple-border: var(--x-color-transparent);
  --x-tag-color-pink-purple-border-hover: color-mix(in srgb, var(--x-tag-color-pink-purple-bg) 84%, var(--x-tag-color-pink-purple-text));
  --x-tag-color-pink-purple-icon-bg_hover: rgba(217, 26, 217, 0.16);
  --x-tag-color-magenta-seed: rgb(245, 49, 157);
  --x-tag-color-magenta-text: var(--x-tag-color-magenta-seed);
  --x-tag-color-magenta-bg: rgb(255, 232, 241);
  --x-tag-color-magenta-border: var(--x-color-transparent);
  --x-tag-color-magenta-border-hover: color-mix(in srgb, var(--x-tag-color-magenta-bg) 84%, var(--x-tag-color-magenta-text));
  --x-tag-color-magenta-icon-bg_hover: rgba(245, 49, 157, 0.16);
  --x-tag-color-gray-text: var(--x-color-text-secondary);
  --x-tag-color-gray-bg: var(--x-color-fill-3);
  --x-tag-color-gray-border: var(--x-color-transparent);
  --x-tag-color-gray-border-hover: var(--x-color-fill-4);
  --x-tag-color-gray-icon-bg_hover: rgba(134, 144, 156, 0.16);
  /*
   * 水印色：canvas 无法解析 CSS 变量，组件在运行时读取该 token 的
   * computed 值再交给 canvas 绘制（见 watermark/controller.ts）。
   * 放在主题层是为了让它能被 runtime 换色与 [data-theme] 覆盖续传。
   */
  --x-watermark-color: rgba(0, 0, 0, 0.15);
  /* image component token */
  --x-image-color-footer-inner-text: var(--x-color-white);
  --x-image-color-footer-inner-bg: rgba(0, 0, 0, 0.5);
  --x-image-color-title-footer-inner-text: var(--x-color-white);
  --x-image-color-description-footer-inner-text: rgba(255, 255, 255, 0.82);
  --x-image-color-footer-outer-text: var(--x-color-text-primary);
  --x-image-color-title-footer-outer-text: var(--x-color-text-secondary);
  --x-image-color-description-footer-outer-text: var(--x-color-text-tertiary);
  --x-image-color-error-text: var(--x-color-text-secondary);
  --x-image-color-error-bg: var(--x-color-fill-2);
  --x-image-color-loader-bg: var(--x-color-fill-1);
  --x-image-color-loader-spin-text: var(--x-color-text-secondary);
  --x-image-preview-color-mask-bg: rgba(0, 0, 0, 0.7);
  --x-image-preview-color-scale-value-text: var(--x-color-white);
  --x-image-preview-color-scale-value-bg: rgba(0, 0, 0, 0.5);
  --x-image-preview-color-toolbar-bg: rgba(29, 33, 41, 0.84);
  --x-image-preview-color-action-text: rgba(255, 255, 255, 0.9);
  --x-image-preview-color-action-bg: var(--x-color-transparent);
  --x-image-preview-color-action-hover-text: var(--x-color-white);
  --x-image-preview-color-action-hover-bg: rgba(255, 255, 255, 0.14);
  --x-image-preview-color-action-disabled-text: rgba(255, 255, 255, 0.4);
  --x-image-preview-color-action-disabled-bg: var(--x-color-transparent);
  --x-image-preview-color-loading-text: var(--x-color-white);
  --x-image-preview-color-loading-bg: var(--x-color-text-tertiary);
  --x-image-preview-color-close-btn-text: var(--x-color-white);
  --x-image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.7);
  --x-image-preview-arrow-color-icon: var(--x-color-white);
  --x-image-preview-arrow-color-bg: rgba(0, 0, 0, 0.5);
  --x-image-preview-arrow-color-bg-hover: rgba(0, 0, 0, 0.7);
  --x-image-preview-arrow-color-icon-disabled: var(--x-color-neutral-5);
  --x-image-preview-arrow-color-bg-disabled: rgba(0, 0, 0, 0.3);
}

.x-time-range-selector {
  --x-time-range-selector-grid-border-default: var(--x-color-border-subtle);
  --x-time-range-selector-grid-shadow-default: inset 0 1px 0 color-mix(in srgb, var(--x-color-bg-white) 88%, var(--x-color-transparent)),
    inset 0 -1px 0
      color-mix(in srgb, var(--x-color-border-default) 68%, var(--x-color-transparent));
  --x-time-range-selector-track-bg-default: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 6%, var(--x-color-bg-white)) 0%,
    color-mix(in srgb, var(--x-color-fill-2) 86%, var(--x-color-bg-white)) 100%
  );
  --x-time-range-selector-track-border-default: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 12%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-track-shadow-default: inset 0 1px 0 color-mix(in srgb, var(--x-color-bg-white) 70%, var(--x-color-transparent));
  --x-time-range-selector-grid-bg-default: linear-gradient(
    180deg,
    var(--x-color-bg-white) 0%,
    color-mix(in srgb, var(--x-color-fill-1) 70%, var(--x-color-bg-white)) 100%
  );
  --x-time-range-selector-range-bg-default: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 72%, var(--x-color-white)) 0%,
    var(--x-time-range-selector-color) 100%
  );
  --x-time-range-selector-range-border-default: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 74%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-range-shadow-default: 0 8px 18px
      color-mix(in srgb, var(--x-time-range-selector-color) 20%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 34%);
  --x-time-range-selector-range-shadow-hover-default: 0 10px 22px
      color-mix(in srgb, var(--x-time-range-selector-color) 25%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 38%);
  --x-time-range-selector-range-shadow-dragging-default: 0 12px 28px
      color-mix(in srgb, var(--x-time-range-selector-color) 32%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  --x-time-range-selector-edge-shadow-default: 0 0 0 1px
    color-mix(in srgb, var(--x-time-range-selector-color) 28%, var(--x-color-transparent));
  --x-time-range-selector-edge-shadow-hover-default: 0 0 0 1px
      color-mix(in srgb, var(--x-time-range-selector-color) 48%, var(--x-color-transparent)),
    0 0 0 4px color-mix(in srgb, var(--x-color-white) 24%, var(--x-color-transparent));
  --x-time-range-selector-track-bg-schedule: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 8%, var(--x-color-bg-white)) 0%,
    color-mix(in srgb, var(--x-time-range-selector-color) 5%, var(--x-color-bg-white)) 100%
  );
  --x-time-range-selector-track-border-schedule: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 14%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-range-bg-schedule: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 62%, var(--x-color-white)) 0%,
    color-mix(in srgb, var(--x-time-range-selector-color) 88%, var(--x-color-neutral-10)) 100%
  );
  --x-time-range-selector-range-border-schedule: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 68%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-range-shadow-schedule: 0 8px 18px
      color-mix(in srgb, var(--x-time-range-selector-color) 18%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 34%);
  --x-time-range-selector-range-shadow-hover-schedule: 0 10px 22px
      color-mix(in srgb, var(--x-time-range-selector-color) 23%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 38%);
  --x-time-range-selector-range-shadow-dragging-schedule: 0 12px 28px
      color-mix(in srgb, var(--x-time-range-selector-color) 30%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  --x-time-range-selector-tick-color-schedule: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 18%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-edge-shadow-schedule: 0 0 0 1px
    color-mix(in srgb, var(--x-time-range-selector-color) 24%, var(--x-color-transparent));
  --x-time-range-selector-edge-shadow-hover-schedule: 0 0 0 1px
      color-mix(in srgb, var(--x-time-range-selector-color) 42%, var(--x-color-transparent)),
    0 0 0 4px color-mix(in srgb, var(--x-color-white) 28%, var(--x-color-transparent));
  --x-time-range-selector-disabled-bg-schedule: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 12%, var(--x-color-bg-white)) 0%,
    color-mix(in srgb, var(--x-time-range-selector-color) 7%, var(--x-color-bg-white)) 100%
  );
  --x-time-range-selector-disabled-border-schedule: color-mix(
    in srgb,
    var(--x-time-range-selector-color) 22%,
    var(--x-color-transparent)
  );
  --x-time-range-selector-range-bg-monitor: var(--x-time-range-selector-range-bg-default);
  --x-time-range-selector-range-border-monitor: var(--x-time-range-selector-range-border-schedule);
  --x-time-range-selector-range-shadow-monitor: 0 8px 18px
      color-mix(in srgb, var(--x-time-range-selector-color) 18%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  --x-time-range-selector-range-shadow-hover-monitor: 0 10px 22px
      color-mix(in srgb, var(--x-time-range-selector-color) 24%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 46%);
  --x-time-range-selector-range-shadow-dragging-monitor: 0 12px 28px
      color-mix(in srgb, var(--x-time-range-selector-color) 30%, var(--x-color-transparent)),
    inset 0 1px 0 rgb(255 255 255 / 50%);
  --x-time-range-selector-edge-shadow-hover-monitor: 0 0 0 1px rgb(255 255 255 / 36%),
    0 0 0 4px
      color-mix(in srgb, var(--x-time-range-selector-color) 18%, var(--x-color-transparent));
  --x-time-range-selector-range-bg-compact: linear-gradient(
    180deg,
    color-mix(in srgb, var(--x-time-range-selector-color) 76%, var(--x-color-white)) 0%,
    color-mix(in srgb, var(--x-time-range-selector-color) 90%, var(--x-color-neutral-10)) 100%
  );
}

.x-fade-in-standard-enter-from,
.x-fade-in-standard-appear-from {
  opacity: 0;
}

.x-fade-in-standard-enter-to,
.x-fade-in-standard-appear-to {
  opacity: 1;
}

.x-fade-in-standard-enter-active,
.x-fade-in-standard-appear-active {
  transition: opacity 0.3s ease;
}

.x-fade-in-standard-leave-from {
  opacity: 1;
}

.x-fade-in-standard-leave-to {
  opacity: 0;
}

.x-fade-in-standard-leave-active {
  transition: opacity 0.3s ease;
}

.x-fade-in-enter-from,
.x-fade-in-appear-from {
  opacity: 0;
}

.x-fade-in-enter-to,
.x-fade-in-appear-to {
  opacity: 1;
}

.x-fade-in-enter-active,
.x-fade-in-appear-active {
  transition: opacity 0.2s ease;
}

.x-fade-in-leave-from {
  opacity: 1;
}

.x-fade-in-leave-to {
  opacity: 0;
}

.x-fade-in-leave-active {
  transition: opacity 0.2s ease;
}

.x-slide-dynamic-origin-enter-from,
.x-slide-dynamic-origin-appear-from {
  transform: scaleY(0.9);
  transform-origin: 0 0;
  opacity: 0;
}

.x-slide-dynamic-origin-enter-to,
.x-slide-dynamic-origin-appear-to {
  transform: scaleY(1);
  transform-origin: 0 0;
  opacity: 1;
}

.x-slide-dynamic-origin-enter-active,
.x-slide-dynamic-origin-appear-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.x-slide-dynamic-origin-leave-from {
  transform: scaleY(1);
  transform-origin: 0 0;
  opacity: 1;
}

.x-slide-dynamic-origin-leave-to {
  transform: scaleY(0.9);
  transform-origin: 0 0;
  opacity: 0;
}

.x-slide-dynamic-origin-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.x-slide-left-enter-from,
.x-slide-left-appear-from {
  transform: translateX(-100%);
}

.x-slide-left-enter-to,
.x-slide-left-appear-to {
  transform: translateX(0);
}

.x-slide-left-enter-active,
.x-slide-left-appear-active {
  transition: transform 0.3s ease;
}

.x-slide-left-leave-from {
  transform: translateX(0);
}

.x-slide-left-leave-to {
  transform: translateX(-100%);
}

.x-slide-left-leave-active {
  transition: transform 0.3s ease;
}

.x-slide-right-enter-from,
.x-slide-right-appear-from {
  transform: translateX(100%);
}

.x-slide-right-enter-to,
.x-slide-right-appear-to {
  transform: translateX(0);
}

.x-slide-right-enter-active,
.x-slide-right-appear-active {
  transition: transform 0.3s ease;
}

.x-slide-right-leave-from {
  transform: translateX(0);
}

.x-slide-right-leave-to {
  transform: translateX(100%);
}

.x-slide-right-leave-active {
  transition: transform 0.3s ease;
}

.x-slide-top-enter-from,
.x-slide-top-appear-from {
  transform: translateY(-100%);
}

.x-slide-top-enter-to,
.x-slide-top-appear-to {
  transform: translateY(0);
}

.x-slide-top-enter-active,
.x-slide-top-appear-active {
  transition: transform 0.3s ease;
}

.x-slide-top-leave-from {
  transform: translateY(0);
}

.x-slide-top-leave-to {
  transform: translateY(-100%);
}

.x-slide-top-leave-active {
  transition: transform 0.3s ease;
}

.x-slide-bottom-enter-from,
.x-slide-bottom-appear-from {
  transform: translateY(100%);
}

.x-slide-bottom-enter-to,
.x-slide-bottom-appear-to {
  transform: translateY(0);
}

.x-slide-bottom-enter-active,
.x-slide-bottom-appear-active {
  transition: transform 0.3s ease;
}

.x-slide-bottom-leave-from {
  transform: translateY(0);
}

.x-slide-bottom-leave-to {
  transform: translateY(100%);
}

.x-slide-bottom-leave-active {
  transition: transform 0.3s ease;
}

.x-zoom-in-enter-from,
.x-zoom-in-appear-from {
  transform: scale(0.5, 0.5);
  opacity: 0;
}

.x-zoom-in-enter-to,
.x-zoom-in-appear-to {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-enter-active,
.x-zoom-in-appear-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.x-zoom-in-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-leave-to {
  transform: scale(0.5, 0.5);
  opacity: 0;
}

.x-zoom-in-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.x-zoom-in-fade-out-enter-from,
.x-zoom-in-fade-out-appear-from {
  transform: scale(0.96, 0.96);
  opacity: 0;
}

.x-zoom-in-fade-out-enter-to,
.x-zoom-in-fade-out-appear-to {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-fade-out-enter-active,
.x-zoom-in-fade-out-appear-active {
  transition: opacity var(--x-transition-duration-2) var(--x-transition-timing-function-standard), transform var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}

.x-zoom-in-fade-out-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-fade-out-leave-to {
  transform: scale(0.98, 0.98);
  opacity: 0;
}

.x-zoom-in-fade-out-leave-active {
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-zoom-in-big-enter-from,
.x-zoom-in-big-appear-from {
  transform: scale(0.5, 0.5);
  opacity: 0;
}

.x-zoom-in-big-enter-to,
.x-zoom-in-big-appear-to {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-big-enter-active,
.x-zoom-in-big-appear-active {
  transition: opacity 0.2s linear, transform 0.2s linear;
}

.x-zoom-in-big-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-big-leave-to {
  transform: scale(0.2, 0.2);
  opacity: 0;
}

.x-zoom-in-big-leave-active {
  transition: opacity 0.2s linear, transform 0.2s linear;
}

.x-zoom-in-left-enter-from,
.x-zoom-in-left-appear-from {
  transform: scale(0.1, 0.1);
  opacity: 0.1;
}

.x-zoom-in-left-enter-to,
.x-zoom-in-left-appear-to {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-left-enter-active,
.x-zoom-in-left-appear-active {
  transform-origin: 0 50%;
  transition: opacity 0.3s linear, transform 0.3s ease-in-out;
}

.x-zoom-in-left-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.x-zoom-in-left-leave-to {
  transform: scale(0.1, 0.1);
  opacity: 0.1;
}

.x-zoom-in-left-leave-active {
  transform-origin: 0 50%;
  transition: opacity 0.3s linear, transform 0.3s ease-in-out;
}

.x-zoom-in-top-enter-from,
.x-zoom-in-top-appear-from {
  transform: scaleY(0.8) translateZ(0);
  opacity: 0;
}

.x-zoom-in-top-enter-to,
.x-zoom-in-top-appear-to {
  transform: scaleY(1) translateZ(0);
  opacity: 1;
}

.x-zoom-in-top-enter-active,
.x-zoom-in-top-appear-active {
  transform-origin: 0 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.x-zoom-in-top-leave-from {
  transform: scaleY(1) translateZ(0);
  opacity: 1;
}

.x-zoom-in-top-leave-to {
  transform: scaleY(0.8) translateZ(0);
  opacity: 0;
}

.x-zoom-in-top-leave-active {
  transform-origin: 0 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.x-zoom-in-bottom-enter-from,
.x-zoom-in-bottom-appear-from {
  transform: scaleY(0.8) translateZ(0);
  opacity: 0;
}

.x-zoom-in-bottom-enter-to,
.x-zoom-in-bottom-appear-to {
  transform: scaleY(1) translateZ(0);
  opacity: 1;
}

.x-zoom-in-bottom-enter-active,
.x-zoom-in-bottom-appear-active {
  transform-origin: 100% 100%;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.x-zoom-in-bottom-leave-from {
  transform: scaleY(1) translateZ(0);
  opacity: 1;
}

.x-zoom-in-bottom-leave-to {
  transform: scaleY(0.8) translateZ(0);
  opacity: 0;
}

.x-zoom-in-bottom-leave-active {
  transform-origin: 100% 100%;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

html[data-theme=dark],
[data-theme=dark] {
  /* 原语 */
  --gray-1: 30, 34, 42;
  --gray-2: 38, 43, 54;
  --gray-3: 50, 56, 70;
  --gray-4: 62, 69, 85;
  --gray-5: 82, 90, 108;
  --gray-6: 110, 118, 134;
  --gray-7: 140, 148, 164;
  --gray-8: 175, 182, 196;
  --gray-9: 205, 210, 220;
  --gray-10: 228, 231, 236;
  --x-color-1: rgb(228 231 236 / 100%);
  --x-color-2: rgb(175 182 196 / 100%);
  --x-color-3: rgb(145 152 168 / 100%);
  --x-color-4: rgb(62 69 85 / 100%);
  --x-color-5: rgb(50 56 70 / 100%);
  --x-color-6: rgb(43 49 61 / 100%);
  --x-color-7: rgb(23 26 32 / 100%);
  --x-color-bg-white: rgb(30 34 42 / 100%);
  --x-color-transparent: transparent;
  --x-color-fill-1: rgb(38 43 54);
  --x-color-fill-2: rgb(43 49 61);
  --x-color-fill-3: rgb(48 54 67);
  --x-color-fill-4: rgb(56 63 78);
  --x-color-fill-5: rgb(66 74 91);
  --x-color-fill-6: rgb(78 87 106);
  --x-color-text-1: rgb(228 231 236);
  --x-color-text-2: rgb(175 182 196);
  --x-color-text-3: rgb(145 152 168);
  --x-color-text-4: rgb(85 92 107);
  /* 暗色色阶（明度阶梯反转） */
  --x-color-primary-1: #000f70;
  --x-color-primary-2: #001892;
  --x-color-primary-3: #0024b5;
  --x-color-primary-4: #0033d7;
  --x-color-primary-5: #0043f9;
  --x-color-primary-6: var(--x-color-primary);
  --x-color-primary-7: #6096ff;
  --x-color-primary-8: #a4c6ff;
  --x-color-primary-9: #e8f1ff;
  --x-color-success-1: #007019;
  --x-color-success-2: #007b17;
  --x-color-success-3: #008715;
  --x-color-success-4: #009212;
  --x-color-success-5: #009d0e;
  --x-color-success-6: var(--x-color-success);
  --x-color-success-7: #13ff18;
  --x-color-success-8: #80ff7e;
  --x-color-success-9: #e9ffe8;
  --x-color-danger-1: #620e1e;
  --x-color-danger-2: #7c1122;
  --x-color-danger-3: #961524;
  --x-color-danger-4: #af1925;
  --x-color-danger-5: #c91c25;
  --x-color-danger-6: var(--x-color-danger);
  --x-color-danger-7: #e96765;
  --x-color-danger-8: #f3aca8;
  --x-color-danger-9: #fceceb;
  --x-color-strong-1: #702600;
  --x-color-strong-2: #8d3500;
  --x-color-strong-3: #a94500;
  --x-color-strong-4: #c65700;
  --x-color-strong-5: #e26c00;
  --x-color-strong-6: var(--x-color-strong);
  --x-color-strong-7: #ffae4d;
  --x-color-strong-8: #ffd59b;
  --x-color-strong-9: #fff6e8;
  --x-color-warning-1: #703e00;
  --x-color-warning-2: #8d5200;
  --x-color-warning-3: #a96900;
  --x-color-warning-4: #c68100;
  --x-color-warning-5: #e29c00;
  --x-color-warning-6: var(--x-color-warning);
  --x-color-warning-7: #ffd44d;
  --x-color-warning-8: #ffea9b;
  --x-color-warning-9: #fffbe8;
  /* 根派生 token（暗色覆盖的完整传递闭包） */
  --x-color-primary-light-1: var(--x-color-primary-1);
  --x-color-primary-light-2: var(--x-color-primary-light-1);
  --x-color-primary-light-3: var(--x-color-primary-light-1);
  --x-color-success-light-1: var(--x-color-success-1);
  --x-color-danger-light-1: var(--x-color-danger-1);
  --x-color-danger-light-2: var(--x-color-danger-2);
  --x-color-warning-light-1: var(--x-color-warning-1);
  --x-color-bg-2: var(--x-color-7);
  --x-color-bg-5: var(--x-color-7);
  --x-color-neutral-1: rgb(var(--gray-1));
  --x-color-neutral-2: rgb(var(--gray-2));
  --x-color-neutral-3: rgb(var(--gray-3));
  --x-color-neutral-4: rgb(var(--gray-4));
  --x-color-neutral-5: rgb(var(--gray-5));
  --x-color-neutral-6: rgb(var(--gray-6));
  --x-color-neutral-7: rgb(var(--gray-7));
  --x-color-neutral-8: rgb(var(--gray-8));
  --x-color-neutral-9: rgb(var(--gray-9));
  --x-color-neutral-10: rgb(var(--gray-10));
  --x-spin-tip-shimmer-color-highlight: color-mix( in srgb, var(--x-color-primary-text) 30%, var(--x-color-white) );
  --x-text-color: var(--x-color-1);
  --x-text-color-disabled: var(--x-color-3);
  --x-border-color: var(--x-color-4);
  --x-text-gray: var(--x-color-1);
  --x-text-gray-1: var(--x-color-2);
  --x-text-gray-2: var(--x-color-3);
  --x-disabled-color: var(--x-color-3);
  --x-field-color-bg: var(--x-color-bg-surface);
  --x-field-color-bg-hover: var(--x-color-bg-surface);
  --x-field-color-bg-focus: var(--x-color-bg-surface);
  --x-field-color-bg-disabled: var(--x-disabled-bgc);
  --x-field-color-bg-error-focus: var(--x-color-bg-surface);
  --x-field-color-text: var(--x-color-text-primary);
  --x-field-color-text-disabled: var(--x-color-text-disabled);
  --x-field-color-placeholder: var(--x-color-text-tertiary);
  --x-field-color-affix: var(--x-color-text-tertiary);
  --x-field-color-icon: var(--x-color-text-secondary);
  --x-field-color-border: var(--x-color-border-default);
  --x-field-color-border-hover: var(--x-color-neutral-5);
  --x-field-color-border-focus: var(--x-color-border-focus);
  --x-field-color-border-disabled: var(--x-disabled-bc);
  --x-field-color-border-error: var(--x-color-danger-solid);
  --x-field-color-shadow-focus: var(--x-color-primary-light-2);
  --x-field-status-success-bg-focus: var(--x-color-bg-surface);
  --x-field-status-success-border: var(--x-color-transparent);
  --x-field-status-success-border-hover: var(--x-color-transparent);
  --x-field-status-success-border-focus: var(--x-color-success-solid);
  --x-field-status-success-shadow-color-focus: var(--x-color-success-2);
  --x-field-status-success-text: var(--x-color-success-text);
  --x-field-status-success-icon: var(--x-color-success-text);
  --x-field-status-warning-bg-focus: var(--x-color-bg-surface);
  --x-field-status-warning-border: var(--x-color-transparent);
  --x-field-status-warning-border-hover: var(--x-color-transparent);
  --x-field-status-warning-border-focus: var(--x-color-warning-solid);
  --x-field-status-warning-shadow-color-focus: var(--x-color-warning-2);
  --x-field-status-warning-text: var(--x-color-warning-text);
  --x-field-status-warning-icon: var(--x-color-warning-text);
  --x-field-status-error-bg-focus: var(--x-color-bg-surface);
  --x-field-status-error-border: var(--x-color-transparent);
  --x-field-status-error-border-hover: var(--x-color-transparent);
  --x-field-status-error-border-focus: var(--x-color-danger-solid);
  --x-field-status-error-shadow-color-focus: var(--x-color-danger-2);
  --x-field-status-error-text: var(--x-color-danger-text);
  --x-field-status-error-icon: var(--x-color-danger-text);
  --x-field-status-validating-bg-focus: var(--x-color-bg-surface);
  --x-field-status-validating-border: var(--x-color-transparent);
  --x-field-status-validating-border-hover: var(--x-color-transparent);
  --x-field-status-validating-border-focus: var(--x-color-primary-solid);
  --x-field-status-validating-shadow-color-focus: var(--x-color-primary-2);
  --x-field-status-validating-text: var(--x-color-primary-text);
  --x-field-status-validating-icon: var(--x-color-primary-text);
  --x-form-bg-color: var(--x-field-color-bg);
  --x-form-bg-color-disabled: var(--x-field-color-bg-disabled);
  --x-form-bg-color-hover: var(--x-field-color-bg-hover);
  --x-form-bg-color-focus: var(--x-field-color-bg-focus);
  --x-form-bg-color-error-focus: var(--x-field-color-bg-error-focus);
  --x-form-text-color: var(--x-field-color-text);
  --x-form-text-color-disabled: var(--x-field-color-text-disabled);
  --x-form-text-color-prefix-suffix: var(--x-field-color-affix);
  --x-form-icon-color: var(--x-field-color-icon);
  --x-form-border-color: var(--x-field-color-border);
  --x-form-border-color-hover: var(--x-field-color-border-hover);
  --x-form-border-color-focus: var(--x-field-color-border-focus);
  --x-form-border-color-disabled: var(--x-field-color-border-disabled);
  --x-form-border-color-error: var(--x-field-color-border-error);
  --x-color-bg-popup: var(--x-color-bg-white);
  --x-color-menu-light-bg: var(--x-color-bg-white);
  --x-icon-hover-color-bg: var(--x-color-fill-1);
  --x-empty-image-color: var(--x-color-text-4);
  --x-color-text-primary: var(--x-color-text-1);
  --x-color-text-secondary: var(--x-color-text-2);
  --x-color-text-tertiary: var(--x-color-text-3);
  --x-color-text-disabled: var(--x-color-text-4);
  --x-color-bg-page: var(--x-color-7);
  --x-color-bg-surface: var(--x-color-bg-white);
  --x-color-bg-subtle: var(--x-color-fill-1);
  --x-color-bg-elevated: var(--x-color-bg-popup);
  --x-color-border-default: var(--x-border-color);
  --x-color-border-subtle: var(--x-color-neutral-3);
  --x-color-border-focus: var(--x-color-primary-6);
  --x-color-overlay-tooltip-bg: var(--x-color-neutral-10);
  --x-color-bg-elevated-border: var(--x-color-border-subtle);
  --x-color-text-elevated-title: var(--x-color-text-primary);
  --x-color-text-elevated-body: var(--x-color-text-secondary);
  --x-color-icon-elevated: var(--x-color-text-tertiary);
  --x-color-icon-elevated-hover: var(--x-color-text-primary);
  --x-color-icon-elevated-hover-bg: var(--x-color-fill-3);
  --x-scrollbar-color-thumb-bg: var(--x-color-fill-5);
  --x-scrollbar-color-thumb-bg-hover: var(--x-color-fill-6);
  --x-scrollbar-color-track-bg: var(--x-color-fill-2);
  --x-scrollbar-color-track-border: var(--x-color-border-subtle);
  --x-timeline-dot-shadow: 0 0 0 1px color-mix(in srgb, var(--x-color-primary-solid) 8%, var(--x-color-transparent));
  --x-timeline-dot-hollow-shadow: 0 0 0 1px color-mix( in srgb, var(--x-color-primary-solid) 10%, var(--x-color-transparent) );
  --x-message-color-bg: color-mix(in srgb, var(--x-color-bg-elevated) 94%, var(--x-color-transparent));
  --x-message-color-text: var(--x-color-text-elevated-title);
  --x-message-color-close: var(--x-color-text-elevated-body);
  --x-message-color-accent-normal: var(--x-color-text-elevated-body);
  --x-message-color-icon-bg-info: var(--x-color-primary-subtle);
  --x-message-color-icon-bg-success: var(--x-color-success-subtle);
  --x-message-color-icon-bg-warning: var(--x-color-warning-subtle);
  --x-message-color-icon-bg-strong: var(--x-color-strong-subtle);
  --x-message-color-icon-bg-error: var(--x-color-danger-subtle);
  --x-message-color-icon-bg-loading: var(--x-color-primary-subtle);
  --x-message-color-icon-bg-normal: var(--x-color-fill-2);
  --x-notification-color-bg: color-mix(in srgb, var(--x-color-bg-elevated) 96%, var(--x-color-transparent));
  --x-notification-color-title: var(--x-color-text-elevated-title);
  --x-notification-color-content: var(--x-color-text-elevated-body);
  --x-notification-color-close: var(--x-color-text-elevated-body);
  --x-notification-color-icon-bg-info: var(--x-color-primary-subtle);
  --x-notification-color-icon-bg-success: var(--x-color-success-subtle);
  --x-notification-color-icon-bg-warning: var(--x-color-warning-subtle);
  --x-notification-color-icon-bg-strong: var(--x-color-strong-subtle);
  --x-notification-color-icon-bg-error: var(--x-color-danger-subtle);
  --x-time-range-selector-color-default: var(--x-color-primary-6);
  --x-time-range-selector-disabled-border-default: color-mix( in srgb, var(--x-color-text-3) 28%, var(--x-color-transparent) );
  --x-time-range-selector-block-alternate-bg-default: var(--x-color-transparent);
  --x-time-range-selector-tick-color-default: color-mix( in srgb, var(--x-color-text-4) 82%, var(--x-color-transparent) );
  --x-time-range-selector-edge-bg-hover: var(--x-color-bg-surface);
  --x-time-range-selector-grid-border-schedule: var(--x-color-transparent);
  --x-time-range-selector-track-shadow-schedule: inset 0 1px 0 color-mix(in srgb, var(--x-color-bg-white) 82%, var(--x-color-transparent));
  --x-time-range-selector-grid-bg-schedule: var(--x-color-transparent);
  --x-time-range-selector-grid-border-monitor: color-mix( in srgb, var(--x-color-text-4) 48%, var(--x-color-transparent) );
  --x-time-range-selector-track-bg-monitor: color-mix( in srgb, var(--x-color-text-4) 34%, var(--x-color-transparent) );
  --x-time-range-selector-track-border-monitor: color-mix( in srgb, var(--x-color-text-4) 18%, var(--x-color-transparent) );
  --x-time-range-selector-grid-bg-monitor: var(--x-color-bg-white);
  --x-time-range-selector-disabled-bg-monitor: color-mix( in srgb, var(--x-color-text-4) 46%, var(--x-color-transparent) );
  --x-time-range-selector-disabled-border-monitor: color-mix( in srgb, var(--x-color-text-4) 34%, var(--x-color-transparent) );
  --x-time-range-selector-tick-color-monitor: color-mix( in srgb, var(--x-color-text-4) 76%, var(--x-color-transparent) );
  --x-time-range-selector-edge-bg-monitor: var(--x-time-range-selector-edge-bg-default);
  --x-time-range-selector-track-border-compact: var(--x-color-transparent);
  --x-time-range-selector-grid-bg-compact: var(--x-color-bg-white);
  --x-time-range-selector-disabled-border-compact: color-mix( in srgb, var(--x-color-text-3) 24%, var(--x-color-transparent) );
  --x-time-range-selector-tick-color-compact: color-mix( in srgb, var(--x-color-text-4) 80%, var(--x-color-transparent) );
  --x-progress-line-color-loading-shimmer-start: var(--x-color-transparent);
  --x-progress-line-color-loading-shimmer-end: var(--x-color-transparent);
  --x-picker-column-scrollbar-thumb-bg: color-mix( in srgb, var(--x-color-text-4) 65%, var(--x-color-transparent) );
  --x-color-primary-subtle-hover: color-mix(in srgb, var(--x-color-primary-subtle) 90%, var(--x-color-primary-button-text));
  --x-color-primary-subtle-active: color-mix(in srgb, var(--x-color-primary-subtle) 84%, var(--x-color-primary-button-text));
  --x-color-success-subtle-hover: color-mix(in srgb, var(--x-color-success-subtle) 90%, var(--x-color-success-button-text));
  --x-color-success-subtle-active: color-mix(in srgb, var(--x-color-success-subtle) 84%, var(--x-color-success-button-text));
  --x-color-danger-subtle-hover: color-mix(in srgb, var(--x-color-danger-subtle) 90%, var(--x-color-danger-button-text));
  --x-color-danger-subtle-active: color-mix(in srgb, var(--x-color-danger-subtle) 84%, var(--x-color-danger-button-text));
  --x-color-strong-subtle-hover: color-mix(in srgb, var(--x-color-strong-subtle) 90%, var(--x-color-strong-button-text));
  --x-color-strong-subtle-active: color-mix(in srgb, var(--x-color-strong-subtle) 84%, var(--x-color-strong-button-text));
  --x-color-primary-solid: var(--x-color-primary-6);
  --x-color-primary-solid-hover: color-mix(in srgb, var(--x-color-primary-solid) 92%, var(--x-color-white));
  --x-color-primary-solid-active: color-mix(in srgb, var(--x-color-primary-solid) 90%, var(--x-color-constant-dark));
  --x-color-success-solid: var(--x-color-success-6);
  --x-color-success-solid-hover: color-mix(in srgb, var(--x-color-success-solid) 92%, var(--x-color-white));
  --x-color-success-solid-active: color-mix(in srgb, var(--x-color-success-solid) 90%, var(--x-color-constant-dark));
  --x-color-warning-solid: var(--x-color-warning-6);
  --x-color-warning-solid-hover: color-mix(in srgb, var(--x-color-warning-solid) 92%, var(--x-color-white));
  --x-color-warning-solid-active: color-mix(in srgb, var(--x-color-warning-solid) 90%, var(--x-color-constant-dark));
  --x-color-danger-solid: var(--x-color-danger-6);
  --x-color-danger-solid-hover: color-mix(in srgb, var(--x-color-danger-solid) 92%, var(--x-color-white));
  --x-color-danger-solid-active: color-mix(in srgb, var(--x-color-danger-solid) 90%, var(--x-color-constant-dark));
  --x-color-strong-solid: var(--x-color-strong-6);
  --x-color-strong-solid-hover: color-mix(in srgb, var(--x-color-strong-solid) 92%, var(--x-color-white));
  --x-color-strong-solid-active: color-mix(in srgb, var(--x-color-strong-solid) 90%, var(--x-color-constant-dark));
  --x-button-color-bg-default-outline-hover: color-mix(in srgb, var(--x-button-color-text-default) 3%, var(--x-color-transparent));
  --x-button-color-bg-default-outline-active: color-mix(in srgb, var(--x-button-color-text-default) 5%, var(--x-color-transparent));
  --x-button-color-bg-primary-outline-hover: color-mix(in srgb, var(--x-button-color-text-primary) 3%, var(--x-color-transparent));
  --x-button-color-bg-primary-outline-active: color-mix(in srgb, var(--x-button-color-text-primary) 5%, var(--x-color-transparent));
  --x-button-color-bg-success-outline-hover: color-mix(in srgb, var(--x-button-color-text-success) 3%, var(--x-color-transparent));
  --x-button-color-bg-success-outline-active: color-mix(in srgb, var(--x-button-color-text-success) 5%, var(--x-color-transparent));
  --x-button-color-bg-warning-outline-hover: color-mix(in srgb, var(--x-button-color-text-warning) 3%, var(--x-color-transparent));
  --x-button-color-bg-warning-outline-active: color-mix(in srgb, var(--x-button-color-text-warning) 5%, var(--x-color-transparent));
  --x-button-color-bg-strong-outline-hover: color-mix(in srgb, var(--x-button-color-text-strong) 3%, var(--x-color-transparent));
  --x-button-color-bg-strong-outline-active: color-mix(in srgb, var(--x-button-color-text-strong) 5%, var(--x-color-transparent));
  --x-button-color-bg-danger-outline-hover: color-mix(in srgb, var(--x-button-color-text-danger) 3%, var(--x-color-transparent));
  --x-button-color-bg-danger-outline-active: color-mix(in srgb, var(--x-button-color-text-danger) 5%, var(--x-color-transparent));
  --x-button-color-bg-info-outline-hover: color-mix(in srgb, var(--x-button-color-text-info) 3%, var(--x-color-transparent));
  --x-button-color-bg-info-outline-active: color-mix(in srgb, var(--x-button-color-text-info) 5%, var(--x-color-transparent));
  --x-tag-color-text-default: var(--x-color-text-primary);
  --x-tag-color-bg-default: var(--x-color-fill-3);
  --x-tag-color-bg-default-hover: var(--x-color-fill-4);
  --x-tag-color-border-default: var(--x-color-fill-4);
  --x-tag-color-border-default-hover: var(--x-color-fill-5);
  --x-tag-color-border-default-bordered: var(--x-color-fill-6);
  --x-tag-color-icon-bg-hover-default: var(--x-color-fill-4);
  --x-tag-color-red-border: var(--x-color-transparent);
  --x-tag-color-orangered-border: var(--x-color-transparent);
  --x-tag-color-orange-border: var(--x-color-transparent);
  --x-tag-color-gold-border: var(--x-color-transparent);
  --x-tag-color-lime-border: var(--x-color-transparent);
  --x-tag-color-green-border: var(--x-color-transparent);
  --x-tag-color-cyan-border: var(--x-color-transparent);
  --x-tag-color-blue-border: var(--x-color-transparent);
  --x-tag-color-better-blue-border: var(--x-color-transparent);
  --x-tag-color-purple-border: var(--x-color-transparent);
  --x-tag-color-pink-purple-border: var(--x-color-transparent);
  --x-tag-color-magenta-border: var(--x-color-transparent);
  --x-tag-color-gray-text: var(--x-color-text-secondary);
  --x-tag-color-gray-bg: var(--x-color-fill-3);
  --x-tag-color-gray-border: var(--x-color-transparent);
  --x-image-color-footer-outer-text: var(--x-color-text-primary);
  --x-image-color-title-footer-outer-text: var(--x-color-text-secondary);
  --x-image-color-description-footer-outer-text: var(--x-color-text-tertiary);
  --x-image-color-error-text: var(--x-color-text-secondary);
  --x-image-color-error-bg: var(--x-color-fill-2);
  --x-image-color-loader-bg: var(--x-color-fill-1);
  --x-image-color-loader-spin-text: var(--x-color-text-secondary);
  --x-image-preview-color-action-bg: var(--x-color-transparent);
  --x-image-preview-color-action-disabled-bg: var(--x-color-transparent);
  --x-image-preview-color-loading-bg: var(--x-color-text-tertiary);
  --x-image-preview-arrow-color-icon-disabled: var(--x-color-neutral-5);
  --x-chart-color-series-1: var(--x-color-primary-solid);
  --x-chart-color-series-2: var(--x-color-success-solid);
  --x-chart-color-series-3: var(--x-color-strong-solid);
  --x-chart-color-series-4: var(--x-color-danger-solid);
  --x-chart-color-series-5: var(--x-color-warning-solid);
  --x-chart-color-axis-text: var(--x-color-text-secondary);
  --x-chart-color-grid-line: var(--x-color-border-subtle);
  --x-chart-color-baseline: var(--x-color-border-default);
  --x-chart-color-active-band: var(--x-color-fill-2);
  --x-chart-color-active-line: var(--x-color-border-default);
  --x-chart-color-point-halo: var(--x-color-bg-surface);
  --x-chart-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);
  --x-chart-color-tooltip-text: var(--x-color-overlay-tooltip-text);
  --x-chart-shadow-tooltip: var(--x-shadow-popover);
  --x-chart-color-legend-text: var(--x-color-text-secondary);
  --x-chart-color-legend-text-hidden: var(--x-color-text-4);
  --x-chart-color-legend-value: var(--x-color-text-4);
  --x-picker-color-shadow_focus: var(--x-field-color-shadow-focus);
  --x-picker-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-picker-color-bg: var(--x-field-color-bg);
  --x-picker-color-bg_hover: var(--x-field-color-bg-hover);
  --x-picker-color-bg_focus: var(--x-field-color-bg-focus);
  --x-picker-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-picker-color-bg_error: var(--x-field-color-bg-error);
  --x-picker-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-picker-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-picker-color-border: var(--x-field-color-border);
  --x-picker-color-border_hover: var(--x-field-color-border-hover);
  --x-picker-color-border_focus: var(--x-field-color-border-focus);
  --x-picker-color-border_disabled: var(--x-field-color-border-disabled);
  --x-picker-color-border_error: var(--x-color-transparent);
  --x-picker-color-border_error_hover: var(--x-color-transparent);
  --x-picker-color-border_error_focus: var(--x-field-color-border-error);
  --x-picker-color-placeholder: var(--x-field-color-placeholder);
  --x-picker-color-placeholder_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-text: var(--x-field-color-text);
  --x-picker-color-text_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-icon: var(--x-field-color-icon);
  --x-picker-color-icon_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-separator: var(--x-field-color-affix);
  --x-picker-color-separator_disabled: var(--x-field-color-text-disabled);
  --x-picker-range-color-bg-input_focus: var(--x-color-fill-2);
  --x-input-color-text_disabled: var(--x-field-color-text-disabled);
  --x-alert-strong-color-bg: var(--x-color-strong-subtle);
  --x-alert-color-text-content-with-title: var(--x-color-text-1);
  --x-button-color-text-default: var(--x-color-text-primary);
  --x-button-color-border-default: var(--x-color-border-default);
  --x-button-color-bg-default-subtle: var(--x-button-color-bg-default);
  --x-button-color-bg-default-subtle-hover: var(--x-button-color-bg-default-hover);
  --x-button-color-bg-default-subtle-active: var(--x-button-color-bg-default-active);
  --x-button-color-wave-default: var(--x-button-color-border-default);
  --x-button-color-wave-primary: var(--x-button-color-bg-primary-solid);
  --x-button-color-wave-success: var(--x-button-color-bg-success-solid);
  --x-button-color-wave-warning: var(--x-button-color-bg-warning-solid);
  --x-button-color-wave-strong: var(--x-button-color-bg-strong-solid);
  --x-button-color-wave-danger: var(--x-button-color-bg-danger-solid);
  --x-button-color-wave-info: var(--x-button-color-text-info);
  --x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);
  --x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);
  --x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);
  --x-button-color-bg-primary-solid: var(--x-color-primary-solid);
  --x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);
  --x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);
  --x-button-color-text-primary: var(--x-color-primary-button-text);
  --x-button-color-border-primary: var(--x-color-primary-solid);
  --x-button-color-bg-success-subtle: var(--x-color-success-subtle);
  --x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);
  --x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);
  --x-button-color-bg-success-solid: var(--x-color-success-solid);
  --x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);
  --x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);
  --x-button-color-text-success: var(--x-color-success-button-text);
  --x-button-color-border-success: var(--x-color-success-solid);
  --x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);
  --x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);
  --x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);
  --x-button-color-bg-warning-solid: var(--x-color-warning-solid);
  --x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);
  --x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);
  --x-button-color-text-warning: var(--x-color-warning-button-text);
  --x-button-color-border-warning: var(--x-color-warning-solid);
  --x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);
  --x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);
  --x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);
  --x-button-color-bg-danger-solid: var(--x-color-danger-solid);
  --x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);
  --x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);
  --x-button-color-text-danger: var(--x-color-danger-button-text);
  --x-button-color-border-danger: var(--x-color-danger-solid);
  --x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);
  --x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);
  --x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);
  --x-button-color-bg-strong-solid: var(--x-color-strong-solid);
  --x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);
  --x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);
  --x-button-color-text-strong: var(--x-color-strong-button-text);
  --x-button-color-border-strong: var(--x-color-strong-solid);
  --x-button-color-bg-info-subtle: var(--x-button-color-bg-default);
  --x-button-color-bg-info-subtle-hover: var(--x-button-color-bg-default-hover);
  --x-button-color-bg-info-subtle-active: var(--x-button-color-bg-default-active);
  --x-button-color-text-info: var(--x-color-text-secondary);
  --x-button-color-border-info: var(--x-color-neutral-5);
  --x-color-picker-panel-bg: var(--x-color-bg-elevated);
  --x-color-picker-panel-shadow: var(--x-shadow-popover);
  --x-color-picker-border: var(--x-color-border-subtle);
  --x-color-picker-color-text: var(--x-color-text-2);
  --x-color-picker-color-text_active: var(--x-color-primary-text);
  --x-color-picker-color-handle-bg: var(--x-color-bg-surface);
  --x-color-picker-color-handle-border: var(--x-color-neutral-5);
  --x-color-picker-color-trigger-bg: var(--x-color-bg-surface);
  --x-color-picker-color-swatch_border: var(--x-color-neutral-4);
  --x-color-picker-color-swatch_active: var(--x-color-primary-text);
  --x-color-picker-checker: var(--x-color-fill-2);
  --x-color-picker-checker-alt: var(--x-color-bg-surface);
  --x-date-picker-panel-bg: var(--x-color-bg-popup);
  --x-date-picker-panel-border: var(--x-color-transparent);
  --x-date-picker-footer-border: var(--x-split-color);
  --x-date-picker-cell-color: var(--x-color-text-2);
  --x-date-picker-cell-color-hover: var(--x-color-text-1);
  --x-date-picker-cell-bg-hover: var(--x-color-fill-1);
  --x-date-picker-cell-bg-range: var(--x-color-primary-light-1);
  --x-date-picker-cell-bg-range-hover: var(--x-color-primary-2);
  --x-date-picker-cell-bg-selected: var(--x-color-primary-6);
  --x-date-picker-cell-color-disabled: var(--x-color-text-4);
  --x-date-picker-cell-color-out-view: var(--x-color-text-4);
  --x-date-picker-confirm-color: var(--x-color-primary-text);
  --x-date-picker-today-color: var(--x-color-primary-text);
  --x-dropdown-color-bg: var(--x-color-bg-popup);
  --x-dropdown-color-border: var(--x-color-transparent);
  --x-dropdown-box-shadow: var(--x-shadow-popover);
  --x-dropdown-option-color-bg_default: var(--x-color-transparent);
  --x-dropdown-option-color-bg_hover: var(--x-color-fill-2);
  --x-dropdown-option-color-bg_selected: var(--x-color-transparent);
  --x-dropdown-option-color-bg_disabled: var(--x-color-transparent);
  --x-dropdown-option-color-text_default: var(--x-color-text-1);
  --x-dropdown-option-color-text_hover: var(--x-color-text-1);
  --x-dropdown-option-color-text_selected: var(--x-color-text-1);
  --x-dropdown-option-color-text_disabled: var(--x-color-text-4);
  --x-dropdown-group-title-color-text: var(--x-color-text-3);
  --x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);
  --x-checkbox-mask-color-bg: var(--x-color-bg-white);
  --x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);
  --x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);
  --x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);
  --x-checkbox-mask-color-border: var(--x-color-fill-3);
  --x-checkbox-mask-color-border_hover: var(--x-color-fill-4);
  --x-checkbox-mask-color-border_checked: var(--x-color-transparent);
  --x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);
  --x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);
  --x-checkbox-color-text: var(--x-color-text-1);
  --x-checkbox-color-text_disabled: var(--x-color-text-4);
  --x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);
  --x-input-number-step-button-color: var(--x-field-color-icon);
  --x-input-number-step-button-color_disabled: var(--x-field-color-text-disabled);
  --x-input-number-step-button-color-border: var(--x-color-border-subtle);
  --x-input-number-step-button-color-bg_default: var(--x-color-fill-2);
  --x-input-number-step-button-color-bg_default_hover: var(--x-color-fill-3);
  --x-input-number-step-button-color-bg_default_active: var(--x-color-fill-4);
  --x-input-number-step-button-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-number-step-button-color-bg_disabled_hover: var(--x-field-color-bg-disabled);
  --x-input-number-step-button-color-bg_disabled_active: var(--x-field-color-bg-disabled);
  --x-input-tag-color-text_default: var(--x-field-color-text);
  --x-input-tag-color-text_error: var(--x-field-color-text);
  --x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);
  --x-input-tag-color-placeholder: var(--x-field-color-placeholder);
  --x-input-tag-color-icon-clear: var(--x-field-color-icon);
  --x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);
  --x-input-tag-color-border_default: var(--x-field-color-border);
  --x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);
  --x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);
  --x-input-tag-color-border_error: var(--x-color-transparent);
  --x-input-tag-color-border_error_hover: var(--x-color-transparent);
  --x-input-tag-color-border_error_focus: var(--x-field-color-border-error);
  --x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);
  --x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);
  --x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);
  --x-input-tag-color-bg_default: var(--x-field-color-bg);
  --x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);
  --x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);
  --x-input-tag-color-bg_error: var(--x-field-color-bg-error);
  --x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);
  --x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);
  --x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-input-tag-tag-color-bg: var(--x-color-bg-2);
  --x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);
  --x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);
  --x-input-tag-tag-color-border: var(--x-color-fill-3);
  --x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);
  --x-input-tag-tag-color-border_focus: var(--x-color-fill-2);
  --x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);
  --x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);
  --x-input-color-bg: var(--x-field-color-bg);
  --x-input-color-bg_hover: var(--x-field-color-bg-hover);
  --x-input-color-bg_focus: var(--x-field-color-bg-focus);
  --x-input-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-color-addon-bg: var(--x-input-color-bg);
  --x-input-color-addon-border: var(--x-color-border-subtle);
  --x-input-color-border_focus: var(--x-field-color-border-focus);
  --x-input-color-shadow_focus: var(--x-field-color-shadow-focus);
  --x-input-color-addon-border_default: var(--x-color-transparent);
  --x-input-color-text: var(--x-field-color-text);
  --x-input-color-placeholder-text: var(--x-field-color-placeholder);
  --x-textarea-color-tip-text: var(--x-color-text-tertiary);
  --x-input-color-bg_error: var(--x-field-color-bg-error);
  --x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-input-color-border_error_focus: var(--x-field-color-border-error);
  --x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-input-border-color: var(--x-field-color-border);
  --x-input-color-border_disabled: var(--x-field-color-border-disabled);
  --x-input-color-border_hover: var(--x-field-color-border-hover);
  --x-input-color-border_error: var(--x-field-color-border-error);
  --x-input-color-border_error_hover: var(--x-color-transparent);
  --x-input-color-prefix-text: var(--x-field-color-affix);
  --x-input-color-suffix-text: var(--x-field-color-affix);
  --x-input-color-tip-text: var(--x-color-text-tertiary);
  --x-input-color-icon-clear: var(--x-field-color-icon);
  --x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);
  --x-search-color-icon: var(--x-field-color-icon);
  --x-password-color-eye-icon: var(--x-color-text-2);
  --x-input-group-color-separator-border: var(--x-color-border-subtle);
  --x-input-feedback-icon-color_success: var(--x-field-status-success-icon);
  --x-input-feedback-icon-color_error: var(--x-field-status-error-icon);
  --x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);
  --x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon);
  --x-radio-color-border: var(--x-color-neutral-3);
  --x-radio-color-border_hover: var(--x-color-neutral-3);
  --x-radio-color-border_disabled: var(--x-color-neutral-3);
  --x-radio-color-bg: var(--x-color-bg-2);
  --x-radio-color-bg_checked: var(--x-color-primary-6);
  --x-radio-color-bg_disabled: var(--x-color-fill-2);
  --x-radio-color-bg_checked_disabled: var(--x-color-primary-light-3);
  --x-radio-color-dot-bg_checked_disabled: var(--x-radio-color-bg_disabled);
  --x-radio-color-text: var(--x-color-text-1);
  --x-radio-color-text_disabled: var(--x-color-text-4);
  --x-radio-color-text_checked_disabled: var(--x-color-text-4);
  --x-radio-mask-bg-color-bg: var(--x-icon-hover-color-bg);
  --x-radio-group-button-color-bg: var(--x-color-fill-2);
  --x-radio-button-color-bg_active: var(--x-color-bg-5);
  --x-radio-button-color-bg_hover: var(--x-radio-button-color-bg_active);
  --x-radio-button-color-text_active: var(--x-color-primary-6);
  --x-radio-button-color-text_hover: var(--x-radio-color-text);
  --x-radio-button-color-bg: var(--x-color-transparent);
  --x-radio-button-color-text: var(--x-color-text-2);
  --x-radio-button-color-bg_disabled: var(--x-color-transparent);
  --x-radio-button-color-text_disabled: var(--x-color-text-4);
  --x-radio-button-color-bg_checked_disabled: var(--x-radio-button-color-bg_active);
  --x-radio-button-color-text_checked_disabled: var(--x-color-primary-light-3);
  --x-radio-button-color-separator-bg: var(--x-color-neutral-3);
  --x-select-popup-color-bg: var(--x-color-bg-elevated);
  --x-select-popup-color-border: var(--x-color-transparent);
  --x-select-popup-box-shadow: var(--x-shadow-popover);
  --x-select-popup-option-color-bg_default: var(--x-color-bg-elevated);
  --x-select-popup-option-color-bg_hover: var(--x-color-fill-2);
  --x-select-popup-option-color-bg_selected: var(--x-color-bg-elevated);
  --x-select-popup-option-color-bg_disabled: var(--x-color-bg-elevated);
  --x-select-popup-option-color-text_default: var(--x-color-text-primary);
  --x-select-popup-option-color-text_hover: var(--x-color-text-primary);
  --x-select-popup-option-color-text_selected: var(--x-color-text-primary);
  --x-select-popup-option-color-text_disabled: var(--x-color-text-disabled);
  --x-select-popup-option-color-highlight-text: var(--x-color-text-primary);
  --x-select-popup-group-title-color-text: var(--x-color-text-tertiary);
  --x-heatmap-color-empty: var(--x-color-fill-2);
  --x-heatmap-color-text: var(--x-color-text-3);
  --x-heatmap-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);
  --x-heatmap-color-tooltip-text: var(--x-color-overlay-tooltip-text);
  --x-heatmap-shadow-tooltip: var(--x-shadow-popover);
  --x-heatmap-color-cell-border: var(--x-color-border-subtle);
  --x-link-color-text: var(--x-color-primary-text);
  --x-link-color-text-success: var(--x-color-success-text);
  --x-link-color-text-warning: var(--x-color-warning-text);
  --x-link-color-text-danger: var(--x-color-danger-text);
  --x-link-color-text-strong: var(--x-color-strong-text);
  --x-link-color-text-disabled: var(--x-color-text-disabled);
  --x-link-color-text-loading: var(--x-color-text-secondary);
  --x-link-color-bg-active: var(--x-color-fill-3);
  --x-link-color-focus: var(--x-color-primary-text);
  --x-link-background-color: var(--x-color-primary-subtle);
  --x-link-success-background-color: var(--x-color-success-subtle);
  --x-link-danger-background-color: var(--x-color-danger-subtle);
  --x-link-warning-background-color: var(--x-color-warning-subtle);
  --x-link-strong-background-color: var(--x-color-strong-subtle);
  --x-menu-color-label-item-selected: var(--x-color-primary-6);
  --x-menu-light-color-bg: var(--x-color-menu-light-bg);
  --x-menu-light-color-bg-item_default: var(--x-menu-light-color-bg);
  --x-menu-light-color-bg-item_hover: var(--x-color-fill-2);
  --x-menu-light-color-bg-item_selected: var(--x-color-fill-2);
  --x-menu-light-color-bg-item_disabled: var(--x-menu-light-color-bg);
  --x-menu-light-color-item_default: var(--x-color-text-2);
  --x-menu-light-color-item_hover: var(--x-color-text-2);
  --x-menu-light-color-item_selected: var(--x-color-primary-6);
  --x-menu-light-color-submenu_selected: var(--x-color-primary-6);
  --x-menu-light-color-bg-submenu_selected: var(--x-color-transparent);
  --x-menu-light-color-bg-submenu_selected_hover: var(--x-color-fill-2);
  --x-menu-light-color-item_disabled: var(--x-color-text-4);
  --x-menu-light-color-icon_default: var(--x-color-text-3);
  --x-menu-light-color-icon_hover: var(--x-color-text-3);
  --x-menu-light-color-icon_selected: var(--x-color-primary-6);
  --x-menu-light-color-icon_disabled: var(--x-color-text-4);
  --x-menu-light-color-group-title: var(--x-color-text-3);
  --x-menu-color-border-popup: var(--x-color-transparent);
  --x-menu-light-color-bg-button: var(--x-color-fill-1);
  --x-menu-light-color-bg-button_hover: var(--x-color-fill-3);
  --x-menu-light-color-button: var(--x-color-text-3);
  --x-menu-dark-color-bg-button: var(--x-color-primary-6);
  --x-menu-dark-color-bg-button_hover: var(--x-color-primary-7);
  --x-menu-pop-button-border-color: var(--x-color-transparent);
  --x-dropdown-dark-option-color-bg_default: var(--x-color-transparent);
  --x-dropdown-dark-option-color-bg_selected: var(--x-color-transparent);
  --x-dropdown-dark-option-color-bg_disabled: var(--x-color-transparent);
  --x-pagination-color-bg-item: var(--x-color-transparent);
  --x-pagination-color-bg-item_active: var(--x-color-primary-light-1);
  --x-pagination-color-bg-item_hover: var(--x-color-fill-1);
  --x-pagination-color-bg-item_disabled: var(--x-color-transparent);
  --x-pagination-color-bg-item_active_disabled: var(--x-color-fill-1);
  --x-pagination-color-item-text: var(--x-color-text-2);
  --x-pagination-color-item-text_hover: var(--x-color-text-2);
  --x-pagination-color-item-text_active: color-mix( in srgb, var(--x-color-primary-text) 96%, var(--x-color-text-1) );
  --x-pagination-color-item-text_disabled: var(--x-color-text-4);
  --x-pagination-color-item-text_active_disabled: var(--x-color-primary-light-3);
  --x-pagination-color-item-border: var(--x-color-transparent);
  --x-pagination-color-item-border_active: var(--x-color-transparent);
  --x-pagination-color-item-border_hover: var(--x-color-transparent);
  --x-pagination-color-item-border_disabled: var(--x-color-transparent);
  --x-pagination-color-item-border_active_disabled: var(--x-color-transparent);
  --x-pagination-color-item-outline_focus: var(--x-color-primary-text);
  --x-pagination-color-icon-arrow: var(--x-color-text-2);
  --x-pagination-color-icon-arrow-bg: var(--x-color-transparent);
  --x-pagination-color-icon-arrow-bg_hover: var(--x-color-fill-1);
  --x-pagination-color-icon-arrow-bg_disabled: var(--x-color-transparent);
  --x-pagination-color-icon-arrow-text_hover: var(--x-color-primary-text);
  --x-pagination-color-icon-arrow-text_disabled: var(--x-color-text-4);
  --x-pagination-simple-color-icon-arrow: var(--x-color-text-2);
  --x-pagination-simple-color-icon-arrow-bg: var(--x-color-transparent);
  --x-pagination-simple-color-icon-arrow-bg_hover: var(--x-color-fill-1);
  --x-pagination-simple-color-icon-arrow-bg_disabled: var(--x-color-transparent);
  --x-pagination-simple-color-icon-arrow-text_hover: var(--x-color-primary-text);
  --x-pagination-simple-color-icon-arrow-text_disabled: var(--x-color-text-4);
  --x-pagination-color-jumper-goto: var(--x-color-text-3);
  --x-pagination-color-text-total: var(--x-color-text-1);
  --x-pie-chart-stroke-segment: var(--x-color-bg-surface);
  --x-table-color-border: var(--x-color-border-subtle);
  --x-table-color-text-header-cell: var(--x-color-text-primary);
  --x-table-color-bg-header-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-header-sorted-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-header-sorted-cell_hover: var(--x-color-fill-2);
  --x-table-color-header-filters-icon: var(--x-color-text-4);
  --x-table-color-header-filters-icon_active: var(--x-color-primary-6);
  --x-table-color-bg-header-filters-icon_hover: var(--x-color-fill-2);
  --x-table-color-text-body-cell: var(--x-color-text-primary);
  --x-table-color-bg-body-cell: var(--x-color-bg-surface);
  --x-table-color-bg-body-sorted-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-body-stripe-row: var(--x-color-bg-subtle);
  --x-table-color-bg-body-row_hover: var(--x-color-bg-subtle);
  --x-table-color-bg-body-row_active_dark: var(--x-color-neutral-2);
  --x-table-color-expand-icon: var(--x-color-text-2);
  --x-table-color-expand-icon-border: var(--x-color-transparent);
  --x-table-color-expand-icon-border_hover: var(--x-color-transparent);
  --x-table-color-expand-icon_hover: var(--x-color-text-1);
  --x-table-color-bg-expand-icon: var(--x-color-fill-2);
  --x-table-color-bg-expand-icon_hover: var(--x-color-fill-3);
  --x-table-color-bg-expand-content: var(--x-color-bg-subtle);
  --x-table-color-bg-expand-content_hover: var(--x-color-bg-subtle);
  --x-table-color-header-sorter-icon: var(--x-color-text-4);
  --x-table-color-header-sorter-icon_next: var(--x-color-text-3);
  --x-table-color-header-sorter-icon_active: var(--x-color-primary-6);
  --x-table-color-bg-filters-popup: var(--x-color-bg-5);
  --x-table-color-border-filters-popup: var(--x-color-neutral-3);
  --x-table-shadow-left: inset 8px 0 8px -8px var(--x-shadow-color-fixed-column);
  --x-table-shadow-right: inset -8px 0 8px -8px var(--x-shadow-color-fixed-column);
  --x-table-color-body-background: var(--x-color-bg-surface);
  --x-table-color-bg-tfoot: var(--x-color-bg-subtle);
  --x-table-filters-icon-bg_hover: var(--x-color-fill-2);
  --x-table-color-border_resizing: var(--x-color-primary-6);
  --x-tabs-color-text: var(--x-color-text-2);
  --x-tabs-color-text-hover: var(--x-color-text-1);
  --x-tabs-color-text-active: var(--x-color-primary-6);
  --x-tabs-color-text-disabled: var(--x-color-text-4);
  --x-tabs-color-border: var(--x-color-neutral-3);
  --x-tabs-color-bg: var(--x-color-bg-white);
  --x-tabs-color-fill: var(--x-color-fill-1);
  --x-tabs-color-fill-hover: var(--x-color-fill-2);
  --x-tabs-color-fill-active: var(--x-color-primary-light-1);
  --x-tabs-color-focus: var(--x-color-primary-6);
  --x-time-picker-panel-bg: var(--x-color-bg-popup);
  --x-time-picker-panel-border: var(--x-color-transparent);
  --x-time-picker-column-border: var(--x-color-transparent);
  --x-time-picker-footer-border: var(--x-split-color);
  --x-time-picker-cell-color: var(--x-color-text-2);
  --x-time-picker-cell-color-hover: var(--x-color-text-1);
  --x-time-picker-cell-bg-hover: var(--x-color-fill-1);
  --x-time-picker-cell-bg-selected: var(--x-color-primary-light-1);
  --x-time-picker-cell-color-selected: var(--x-color-primary-text);
  --x-time-picker-cell-color-disabled: var(--x-color-text-4);
  --x-time-picker-confirm-color: var(--x-color-primary-text);
  --x-time-picker-confirm-bg-hover: var(--x-color-primary-light-1);
  --x-time-picker-now-color: var(--x-color-text-3);
  --x-time-picker-column-scrollbar-thumb-bg: var(--x-picker-column-scrollbar-thumb-bg);
  --x-transfer-border-color: var(--x-color-border-default);
  --x-transfer-header-bg: var(--x-color-fill-1);
  --x-transfer-item-hover-bg: var(--x-color-fill-2);
  --x-tree-select-node-color-bg_hover: var(--x-color-fill-2);
  --x-tree-select-node-color-bg_selected: color-mix( in srgb, var(--x-color-primary) 6%, var(--x-color-bg-elevated) );
  --x-tree-select-node-color-text_disabled: var(--x-color-text-disabled);
  --x-tree-select-node-color-line: var(--x-color-border-default);
  --x-tree-select-switcher-color-icon: var(--x-color-text-3);
  --x-trigger-color-arrow-bg: var(--x-color-menu-light-bg);
  --x-upload-color-text: var(--x-color-text-primary);
  --x-upload-color-icon: var(--x-color-text-tertiary);
  --x-upload-color-tip-text: var(--x-color-text-tertiary);
  --x-upload-color-bg: var(--x-color-fill-1);
  --x-upload-color-bg-hover: var(--x-color-fill-2);
  --x-upload-color-border: var(--x-color-border-default);
  --x-upload-color-thumbnail-bg: var(--x-color-fill-2);
  --x-upload-color-picture-overlay-bg: var(--x-color-overlay-mask);
  /* 手工覆盖（字面量 token，无法由引用关系推导） */
  --x-button-color-text-default-hover: color-mix(in srgb, var(--x-button-color-text-default) 92%, var(--x-color-white));
  --x-button-color-text-default-active: color-mix(in srgb, var(--x-button-color-text-default) 92%, var(--x-color-black));
  --x-button-color-text-primary-hover: color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-white));
  --x-button-color-text-primary-active: color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-black));
  --x-button-color-text-success-hover: color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-white));
  --x-button-color-text-success-active: color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-black));
  --x-button-color-text-warning-hover: color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-white));
  --x-button-color-text-warning-active: color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-black));
  --x-button-color-text-strong-hover: color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-white));
  --x-button-color-text-strong-active: color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-black));
  --x-button-color-text-danger-hover: color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-white));
  --x-button-color-text-danger-active: color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-black));
  --x-button-color-text-info-hover: color-mix(in srgb, var(--x-button-color-text-info) 92%, var(--x-color-white));
  --x-button-color-text-info-active: color-mix(in srgb, var(--x-button-color-text-info) 92%, var(--x-color-black));
  --x-button-color-bg-default: var(--x-color-fill-2);
  --x-button-color-bg-default-hover: color-mix(in srgb, var(--x-button-color-bg-default) 95.5%, var(--x-button-color-text-default));
  --x-button-color-bg-default-active: color-mix(in srgb, var(--x-button-color-bg-default) 91%, var(--x-button-color-text-default));
  --x-color-primary-subtle: #39479f;
  --x-color-success-subtle: #2d733d;
  --x-color-warning-subtle: #7b582d;
  --x-color-strong-subtle: #70432b;
  --x-color-danger-subtle: #4d212a;
  --x-alert-info-color-bg: var(--x-color-primary-subtle);
  --x-alert-success-color-bg: var(--x-color-success-subtle);
  --x-alert-warning-color-bg: var(--x-color-warning-subtle);
  --x-alert-error-color-bg: var(--x-color-danger-subtle);
  --x-alert-info-color-icon: var(--x-color-primary-8);
  --x-alert-color-close-icon: var(--x-color-text-1);
  --x-alert-color-focus-ring: var(--x-color-text-1);
  --x-field-status-success-bg: color-mix(in srgb, var(--x-color-success-subtle) 12%, var(--x-color-bg-surface));
  --x-field-status-success-bg-hover: color-mix(in srgb, var(--x-color-success-subtle) 20%, var(--x-color-bg-surface));
  --x-field-status-warning-bg: color-mix(in srgb, var(--x-color-warning-subtle) 12%, var(--x-color-bg-surface));
  --x-field-status-warning-bg-hover: color-mix(in srgb, var(--x-color-warning-subtle) 20%, var(--x-color-bg-surface));
  --x-field-status-error-bg: color-mix(in srgb, var(--x-color-danger-subtle) 12%, var(--x-color-bg-surface));
  --x-field-status-error-bg-hover: color-mix(in srgb, var(--x-color-danger-subtle) 20%, var(--x-color-bg-surface));
  --x-field-status-validating-bg: color-mix(in srgb, var(--x-color-primary-subtle) 12%, var(--x-color-bg-surface));
  --x-field-status-validating-bg-hover: color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface));
  --x-field-color-bg-error: var(--x-field-status-error-bg);
  --x-field-color-bg-error-hover: var(--x-field-status-error-bg-hover);
  --x-table-color-bg-body-row_active: color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface));
  --x-color-picker-color-mode-bg_active: color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface));
  --x-color-warning-subtle-hover: color-mix(in srgb, var(--x-color-warning-subtle) 90%, var(--x-color-warning-button-text));
  --x-color-warning-subtle-active: color-mix(in srgb, var(--x-color-warning-subtle) 84%, var(--x-color-warning-button-text));
  --x-message-color-accent-info: var(--x-color-primary-text);
  --x-message-color-accent-success: var(--x-color-success-text);
  --x-message-color-accent-warning: var(--x-color-warning-text);
  --x-message-color-accent-strong: var(--x-color-strong-text);
  --x-message-color-accent-error: var(--x-color-danger-text);
  --x-notification-color-accent-info: var(--x-color-primary-text);
  --x-notification-color-accent-success: var(--x-color-success-text);
  --x-notification-color-accent-warning: var(--x-color-warning-text);
  --x-notification-color-accent-strong: var(--x-color-strong-text);
  --x-notification-color-accent-error: var(--x-color-danger-text);
  --x-message-color-accent-loading: var(--x-color-primary-text);
  --x-color-primary-text: var(--x-color-primary-8);
  --x-color-success-text: var(--x-color-success-8);
  --x-color-warning-text: var(--x-color-warning-7);
  --x-color-danger-text: var(--x-color-danger-8);
  --x-color-strong-text: var(--x-color-strong-7);
  --x-color-primary-button-text: var(--x-color-primary-8);
  --x-color-success-button-text: var(--x-color-success-8);
  --x-color-warning-button-text: var(--x-color-warning-7);
  --x-color-danger-button-text: var(--x-color-danger-8);
  --x-color-strong-button-text: var(--x-color-strong-7);
  --x-tag-color-gray-border-hover: var(--x-color-fill-5);
  --x-watermark-color: rgba(255, 255, 255, 0.15);
  --x-shadow-popover: 0 6px 16px 0 rgb(0 0 0 / 45%), 0 3px 6px -4px rgb(0 0 0 / 55%), 0 9px 28px 8px rgb(0 0 0 / 30%);
  --x-color-overlay-tooltip-text: var(--x-color-constant-dark);
  --x-heatmap-color-level-1: var(--x-color-primary-3);
  --x-heatmap-color-level-2: var(--x-color-primary-4);
  --x-heatmap-color-level-3: var(--x-color-primary-5);
  --x-heatmap-color-level-4: var(--x-color-primary-6);
  --x-heatmap-color-level-5: var(--x-color-primary-7);
  --x-color-spin-layer-bg: rgb(30 34 42 / 88%);
  --x-empty-illustration-planes: var(--x-color-neutral-2);
  --x-empty-illustration-mid: var(--x-color-neutral-4);
  --x-empty-illustration-strong: var(--x-color-neutral-6);
  --x-empty-illustration-highlight: var(--x-color-neutral-7);
  --x-select-bgc: var(--x-color-fill-2);
  --x-disabled-bgc: var(--x-color-fill-2);
  --x-disabled-bc: var(--x-color-fill-4);
  --x-placeholder-color: var(--x-color-text-3);
  --x-hover-bgc: var(--x-color-fill-1);
  --x-hover-bc: var(--x-color-fill-5);
  --x-bgc: var(--x-color-bg-page);
  --x-bc: var(--x-color-fill-3);
  --x-split-color: var(--x-color-fill-3);
  --x-shadow-color-fixed-column: rgba(255, 255, 255, 0.18);
  /* 弹层描边与阴影：亮色为深色低透明度，暗色改为亮色低透明度 */
  --x-message-color-border: rgb(255 255 255 / 12%);
  --x-message-color-close-bg-hover: rgb(255 255 255 / 10%);
  --x-message-color-shadow: var(--x-shadow2-down);
  --x-notification-color-border: rgb(255 255 255 / 12%);
  --x-notification-color-close-bg-hover: rgb(255 255 255 / 10%);
  --x-notification-color-shadow: var(--x-shadow3-down);
  /* 遮罩在暗色下加深，避免弹层与背景对比不足 */
  --x-color-overlay-mask: rgb(0 0 0 / 70%);
  --x-tag-color-red-text: var(--x-color-danger-text);
  --x-tag-color-red-bg: var(--x-color-danger-subtle);
  --x-tag-color-red-border-hover: color-mix(in srgb, var(--x-color-danger-subtle) 88%, var(--x-color-danger-text));
  --x-tag-color-red-icon-bg_hover: color-mix(in srgb, var(--x-color-danger-text) 12%, var(--x-color-transparent));
  --x-tag-color-orangered-text: rgb(250 163 123);
  --x-tag-color-orangered-bg: rgb(78 52 44);
  --x-tag-color-orangered-border-hover: rgb(99 65 53);
  --x-tag-color-orangered-icon-bg_hover: rgba(247, 114, 52, 0.22);
  --x-tag-color-orange-text: var(--x-color-strong-text);
  --x-tag-color-orange-bg: var(--x-color-strong-subtle);
  --x-tag-color-orange-border-hover: color-mix(in srgb, var(--x-color-strong-subtle) 88%, var(--x-color-strong-text));
  --x-tag-color-orange-icon-bg_hover: color-mix(in srgb, var(--x-color-strong-text) 12%, var(--x-color-transparent));
  --x-tag-color-gold-text: var(--x-color-warning-text);
  --x-tag-color-gold-bg: var(--x-color-warning-subtle);
  --x-tag-color-gold-border-hover: color-mix(in srgb, var(--x-color-warning-subtle) 88%, var(--x-color-warning-text));
  --x-tag-color-gold-icon-bg_hover: color-mix(in srgb, var(--x-color-warning-text) 12%, var(--x-color-transparent));
  --x-tag-color-lime-text: rgb(193 232 108);
  --x-tag-color-lime-bg: rgb(58 75 39);
  --x-tag-color-lime-border-hover: rgb(74 94 47);
  --x-tag-color-lime-icon-bg_hover: rgba(159, 219, 29, 0.22);
  --x-tag-color-green-text: var(--x-color-success-text);
  --x-tag-color-green-bg: var(--x-color-success-subtle);
  --x-tag-color-green-border-hover: color-mix(in srgb, var(--x-color-success-subtle) 88%, var(--x-color-success-text));
  --x-tag-color-green-icon-bg_hover: color-mix(in srgb, var(--x-color-success-text) 12%, var(--x-color-transparent));
  --x-tag-color-cyan-text: rgb(102 220 220);
  --x-tag-color-cyan-bg: rgb(28 71 77);
  --x-tag-color-cyan-border-hover: rgb(37 89 94);
  --x-tag-color-cyan-icon-bg_hover: rgba(20, 201, 201, 0.22);
  --x-tag-color-blue-text: rgb(123 184 252);
  --x-tag-color-blue-bg: rgb(35 58 88);
  --x-tag-color-blue-border-hover: rgb(46 73 108);
  --x-tag-color-blue-icon-bg_hover: rgba(52, 145, 250, 0.22);
  --x-tag-color-better-blue-text: var(--x-color-primary-text);
  --x-tag-color-better-blue-bg: var(--x-color-primary-subtle);
  --x-tag-color-better-blue-border-hover: color-mix(in srgb, var(--x-color-primary-subtle) 88%, var(--x-color-primary-text));
  --x-tag-color-better-blue-icon-bg_hover: color-mix(in srgb, var(--x-color-primary-text) 12%, var(--x-color-transparent));
  --x-tag-color-purple-text: rgb(201 176 238);
  --x-tag-color-purple-bg: rgb(48 37 79);
  --x-tag-color-purple-border-hover: rgb(66 54 98);
  --x-tag-color-purple-icon-bg_hover: rgba(114, 46, 209, 0.22);
  --x-tag-color-pink-purple-text: rgb(230 106 230);
  --x-tag-color-pink-purple-bg: rgb(71 32 81);
  --x-tag-color-pink-purple-border-hover: rgb(90 41 99);
  --x-tag-color-pink-purple-icon-bg_hover: rgba(217, 26, 217, 0.22);
  --x-tag-color-magenta-text: rgb(249 121 191);
  --x-tag-color-magenta-bg: rgb(77 37 67);
  --x-tag-color-magenta-border-hover: rgb(98 47 82);
  --x-tag-color-magenta-icon-bg_hover: rgba(245, 49, 157, 0.22);
  --x-time-range-selector-disabled-bg-default: linear-gradient( 180deg, color-mix(in srgb, var(--x-color-text-4) 18%, var(--x-color-bg-white)) 0%, color-mix(in srgb, var(--x-color-fill-3) 72%, var(--x-color-bg-white)) 100% );
  --x-time-range-selector-edge-bg-default: color-mix( in srgb, var(--x-color-bg-white) 84%, var(--x-color-transparent) );
  --x-time-range-selector-edge-bg-schedule: color-mix( in srgb, var(--x-color-bg-white) 92%, var(--x-color-transparent) );
  --x-time-range-selector-track-bg-compact: linear-gradient( 180deg, color-mix(in srgb, var(--x-color-fill-2) 82%, var(--x-color-bg-white)) 0%, color-mix(in srgb, var(--x-color-fill-3) 88%, var(--x-color-bg-white)) 100% );
  --x-time-range-selector-disabled-bg-compact: linear-gradient( 180deg, color-mix(in srgb, var(--x-color-text-4) 18%, var(--x-color-bg-white)) 0%, color-mix(in srgb, var(--x-color-fill-3) 82%, var(--x-color-bg-white)) 100% );
}

/* 保留组件自身作用域的刻意暗色调整 */
[data-theme=dark] .x-time-range-selector,
.x-time-range-selector[data-theme=dark] {
  --x-time-range-selector-track-bg-default: linear-gradient( 180deg, color-mix(in srgb, var(--x-time-range-selector-color) 6%, var(--x-color-bg-white)) 0%, color-mix(in srgb, var(--x-color-fill-2) 86%, var(--x-color-bg-white)) 100% );
  --x-time-range-selector-edge-shadow-hover-default: 0 0 0 1px color-mix(in srgb, var(--x-time-range-selector-color) 48%, var(--x-color-transparent)), 0 0 0 4px color-mix(in srgb, var(--x-color-bg-white) 24%, var(--x-color-transparent));
  --x-time-range-selector-edge-shadow-hover-schedule: 0 0 0 1px color-mix(in srgb, var(--x-time-range-selector-color) 42%, var(--x-color-transparent)), 0 0 0 4px color-mix(in srgb, var(--x-color-bg-white) 28%, var(--x-color-transparent));
}

.x-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  color: inherit;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.125em;
  transform: rotate(var(--x-icon-rotate, 0deg));
  transform-origin: center;
}
.x-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
.x-icon svg:not([fill]) {
  fill: currentcolor;
}
.x-icon--raw {
  display: contents;
}
.x-icon--spin-layer {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  animation: x-icon-spin 1s infinite linear;
}
.x-icon-loading-svg {
  animation: animated-loading-rotate 1.5s infinite ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}
.x-icon-loading-svg > .path {
  /*
   * stroke-width 5 是原始值，不要为了「笔画实心」加粗：
   * 加到 7 会让 sw/r 从 0.250 涨到 0.350，观感变成又小又笨重的粗圈。
   *
   * 若确实需要更清晰，正确做法是调半径并同步缩放下面的 dash 参数
   * （见 animation-loading.tsx 的注释），而不是加粗描边。
   */
  stroke-width: 5;
  animation: animated-loading 1.5s infinite ease-in-out;
}
@keyframes animated-loading {
  0% {
    stroke-dasharray: 1, 125;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 95, 31;
    stroke-dashoffset: -31px;
  }
  to {
    stroke-dasharray: 6, 120;
    stroke-dashoffset: -120px;
  }
}
@keyframes animated-loading-rotate {
  to {
    transform: rotate(1turn);
  }
}
@keyframes x-icon-spin {
  to {
    transform: rotate(1turn);
  }
}
.x-icon [opacity~=".1"] {
  opacity: 0.1;
}
.x-icon [opacity~=".2"] {
  opacity: 0.2;
}
.x-icon [opacity~=".3"] {
  opacity: 0.3;
}
.x-icon [opacity~=".4"] {
  opacity: 0.4;
}
.x-icon [opacity~=".5"] {
  opacity: 0.5;
}
.x-icon [opacity~=".6"] {
  opacity: 0.6;
}
.x-icon [opacity~=".7"] {
  opacity: 0.7;
}
.x-icon [opacity~=".8"] {
  opacity: 0.8;
}
.x-icon [opacity~=".9"] {
  opacity: 0.9;
}

/*
 * 降低动态效果：旋转类图标（Spin 图标、Button loading 等）属于持续性动画，
 * 前庭功能障碍用户开启动效降级后应立即呈现静态图形。
 * 只停动画、保留图形，避免加载指示整个消失。
 */
@media (prefers-reduced-motion: reduce) {
  .x-icon--spin-layer,
  .x-icon-loading-svg {
    animation: none;
  }
  .x-icon-loading-svg > .path {
    animation: none;
    stroke-dasharray: 95, 31;
    stroke-dashoffset: 0;
  }
}
/*
 * 当前 block 类名，由 b() 写入，供 is() 拼装状态类。
 *
 * is() 需要输出完整的状态类（`x-<block>-is-<state>`），而 Sass 无法从
 * `&` 反解出 block 部分，只能在这里按 block 作用域记录。
 */
/*
 * 状态类：`x-<block>-is-<state>`。
 *
 * 必须输出**完整类名**而不是 `&.`- 前缀：运行时由 getClassNameMixin().is()
 * 生成的是 `x-heatmap-is-visible`、`x-bar-chart-is-active` 这种全名，
 * 而 `&.-visible` 只能匹配带 `.-visible` 类名的元素 —— 两者永远对不上，
 * 状态样式会静默失效（Heatmap 的提示浮层曾因此一直不可见）。
 */
.x-auto-tooltip {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root {
  /*
   * 图表族共享 token（柱状 / 折线 / 饼图）。
   *
   * 分类色板按系列下标循环取色，引用全局语义色而非写死 hex：
   * 亮/暗主题与 ConfigProvider 换主色时联动；前三位选蓝 / 绿 / 橙，
   * 保证最常用的单系列、双系列、三系列组合互相可区分。
   */
  --x-chart-color-series-1: var(--x-color-primary-solid);
  --x-chart-color-series-2: var(--x-color-success-solid);
  --x-chart-color-series-3: var(--x-color-strong-solid);
  --x-chart-color-series-4: var(--x-color-danger-solid);
  --x-chart-color-series-5: var(--x-color-warning-solid);
  --x-chart-color-series-6: var(--x-color-constant-neutral-strong);
  --x-chart-color-axis-text: var(--x-color-text-secondary);
  --x-chart-color-grid-line: var(--x-color-border-subtle);
  --x-chart-color-baseline: var(--x-color-border-default);
  --x-chart-color-active-band: var(--x-color-fill-2);
  --x-chart-color-active-line: var(--x-color-border-default);
  /* 折线数据点的描边色：与画布同色，让点在网格线上保持清晰 */
  --x-chart-color-point-halo: var(--x-color-bg-surface);
  /*
   * 提示浮层沿用全局 tooltip 的反色语义：亮色主题深底白字，
   * 暗色主题浅底深字（--x-color-overlay-tooltip-text 会在暗色下翻转）。
   */
  --x-chart-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);
  --x-chart-color-tooltip-text: var(--x-color-overlay-tooltip-text);
  --x-chart-shadow-tooltip: var(--x-shadow-popover);
  --x-chart-color-legend-text: var(--x-color-text-secondary);
  --x-chart-color-legend-text-hidden: var(--x-color-text-4);
  --x-chart-color-legend-value: var(--x-color-text-4);
  --x-chart-border-radius-tooltip: var(--x-border-radius-medium);
  --x-chart-spacing-legend: var(--x-spacing-3);
  --x-chart-size-swatch: 8px;
  --x-chart-font-size-caption: var(--x-font-size-caption);
}

/*
 * 图表族共享样式：网格与轴标签、悬浮提示、图例、空态、读屏播报。
 * 柱状 / 折线 / 饼图三张图共用这些类名（x-chart--*），
 * 各自组件样式只保留几何相关的部分。
 */
.x-chart--grid-line {
  stroke: var(--x-chart-color-grid-line);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.x-chart-is-baseline {
  stroke: var(--x-chart-color-baseline);
}

.x-chart--axis-label {
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.x-chart {
  /*
   * 悬浮提示：容器内共享一个节点，位置由各图换算，
   * 不为每个数据点创建独立浮层。
   */
}
.x-chart--tooltip {
  position: absolute;
  z-index: 1;
  min-width: 120px;
  max-width: 280px;
  padding: var(--x-spacing-2) var(--x-spacing-3);
  color: var(--x-chart-color-tooltip-text);
  font-size: var(--x-chart-font-size-caption);
  line-height: 1.5;
  background-color: var(--x-chart-color-tooltip-bg);
  border-radius: var(--x-chart-border-radius-tooltip);
  box-shadow: var(--x-chart-shadow-tooltip);
  pointer-events: none;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-chart-is-visible {
  opacity: 1;
}

.x-chart--tooltip-title {
  font-weight: var(--x-font-weight-500);
  white-space: nowrap;
}

.x-chart--tooltip-list {
  margin-top: var(--x-spacing-1);
}

.x-chart--tooltip-item {
  display: flex;
  gap: var(--x-spacing-1);
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}

.x-chart--tooltip-swatch {
  flex: none;
  width: var(--x-chart-size-swatch);
  height: var(--x-chart-size-swatch);
  margin-right: var(--x-spacing-1);
  border-radius: 2px;
}

.x-chart--tooltip-name {
  flex: 1;
  margin-right: var(--x-spacing-4);
  /* 反色浮层里用透明度分层，避免为两个主题各挑一个中间灰 */
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-chart--tooltip-value {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.x-chart--tooltip-total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--x-spacing-1);
  padding-top: var(--x-spacing-1);
  border-top: 1px solid var(--x-color-border-subtle);
  font-weight: var(--x-font-weight-500);
}

.x-chart--legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-spacing-1) var(--x-chart-spacing-legend);
  margin-top: var(--x-chart-spacing-legend);
}

.x-chart--legend-item {
  display: inline-flex;
  gap: var(--x-spacing-1);
  align-items: center;
  padding: 0;
  color: var(--x-chart-color-legend-text);
  font-size: var(--x-chart-font-size-caption);
  background: none;
  border: 0;
  cursor: pointer;
}
.x-chart--legend-item:hover {
  color: var(--x-color-text-1);
}
.x-chart--legend-item:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.x-chart-is-hidden {
  color: var(--x-chart-color-legend-text-hidden);
}
.x-chart-is-hidden .x-chart--legend-swatch {
  opacity: 0.3;
}

.x-chart--legend-swatch {
  flex: none;
  width: var(--x-chart-size-swatch);
  height: var(--x-chart-size-swatch);
  border-radius: 2px;
}

.x-chart--legend-name {
  white-space: nowrap;
}

.x-chart--legend-value {
  color: var(--x-chart-color-legend-value);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.x-chart--empty {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--x-chart-color-axis-text);
  font-size: var(--x-chart-font-size-caption);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.x-chart {
  /* 键盘导航的读屏播报节点，视觉隐藏但保留在无障碍树中 */
}
.x-chart--live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/********* icon hover *********/
.x-icon-hover {
  position: relative;
  display: inline-block;
  padding: 0;
  color: inherit;
  font: inherit;
  background: var(--x-color-transparent);
  border: 0;
  cursor: pointer;
}
.x-icon-hover:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}
.x-icon-hover .x-icon {
  position: relative;
}
.x-icon-hover::before {
  position: absolute;
  display: block;
  box-sizing: border-box;
  background-color: var(--x-color-transparent);
  border-radius: 50%;
  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
  content: "";
}
.x-icon-hover:hover::before {
  background-color: var(--x-icon-hover-color-bg);
}
.x-icon-hover.x-icon-hover-disabled::before {
  opacity: 0;
}
.x-icon-hover:disabled {
  cursor: not-allowed;
}
.x-icon-hover {
  line-height: 12px;
}
.x-icon-hover::before {
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.x-icon-hover-size-mini {
  line-height: 12px;
}
.x-icon-hover-size-mini::before {
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.x-icon-hover-size-small {
  line-height: 12px;
}
.x-icon-hover-size-small::before {
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.x-icon-hover-size-large {
  line-height: 12px;
}
.x-icon-hover-size-large::before {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
.x-icon-hover-size-huge {
  line-height: 12px;
}
.x-icon-hover-size-huge::before {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

:root {
  --x-input-color-bg: var(--x-field-color-bg);
  --x-input-color-bg_hover: var(--x-field-color-bg-hover);
  --x-input-color-bg_focus: var(--x-field-color-bg-focus);
  --x-input-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-color-addon-bg: var(--x-input-color-bg);
  --x-input-color-addon-border: var(--x-color-border-subtle);
  --x-input-border-addon-separator-width: var(--x-border-1);
  --x-input-color-border_focus: var(--x-field-color-border-focus);
  --x-input-color-shadow_focus: var(--x-field-color-shadow-focus);
  --x-input-size-shadow_focus: var(--x-field-size-shadow-focus);
  --x-input-color-addon-border_default: var(--x-color-transparent);
  --x-input-color-text: var(--x-field-color-text);
  --x-input-color-placeholder-text: var(--x-field-color-placeholder);
  --x-input-color-text_disabled: var(--x-field-color-text-disabled);
  --x-textarea-color-tip-text: var(--x-color-text-tertiary);
  /******** 基础配置项 end *******/
  /******** 高级配置项 *******/
  --x-input-color-bg_error: var(--x-field-color-bg-error);
  --x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-input-color-border_error_focus: var(--x-field-color-border-error);
  --x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);
  --x-input-size-default-height: var(--x-size-default);
  --x-input-size-mini-height: var(--x-size-mini);
  --x-input-size-small-height: var(--x-size-small);
  --x-input-size-large-height: var(--x-size-large);
  --x-input-border-width: var(--x-border-1);
  --x-input-border-color: var(--x-field-color-border);
  --x-input-color-border_disabled: var(--x-field-color-border-disabled);
  --x-input-color-border_hover: var(--x-field-color-border-hover);
  --x-input-color-border_error: var(--x-field-color-border-error);
  --x-input-color-border_error_hover: var(--x-color-transparent);
  --x-input-size-default-font-size: var(--x-font-size-body-3);
  --x-input-size-small-font-size: var(--x-font-size-body-3);
  --x-input-size-large-font-size: var(--x-font-size-body-3);
  --x-input-size-mini-font-size: var(--x-font-size-body-1);
  --x-input-font-tip-size: var(--x-font-size-body-1);
  --x-input-size-mini-icon-suffix-size: var(--x-size-3);
  --x-input-size-small-icon-suffix-size: 14px;
  --x-input-size-default-icon-suffix-size: 14px;
  --x-input-size-large-icon-suffix-size: 14px;
  --x-input-size-mini-icon-addon-size: var(--x-size-3);
  --x-input-size-small-icon-addon-size: 14px;
  --x-input-size-default-icon-addon-size: 14px;
  --x-input-size-large-icon-addon-size: 14px;
  --x-input-size-icon-clear: var(--x-size-3);
  --x-input-color-prefix-text: var(--x-field-color-affix);
  --x-input-color-suffix-text: var(--x-field-color-affix);
  --x-input-color-tip-text: var(--x-color-text-tertiary);
  --x-input-color-icon-clear: var(--x-field-color-icon);
  --x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);
  --x-search-color-icon: var(--x-field-color-icon);
  --x-search-size-icon: 14px;
  --x-input-padding-horizontal: var(--x-spacing-6);
  --x-input-margin-left-clear-btn: var(--x-spacing-6);
  --x-input-spacing-clear-icon-right: var(--x-spacing-4);
  --x-input-padding-word-limit-left: var(--x-spacing-4);
  --x-textarea-padding-horizontal: var(--x-spacing-6);
  --x-textarea-padding-vertical: var(--x-spacing-2);
  --x-textarea-font-size: var(--x-font-size-body-3);
  --x-textarea-font-tip-size: var(--x-font-size-body-1);
  --x-textarea-layout-tip-right: var(--x-spacing-5);
  --x-textarea-layout-tip-bottom: var(--x-spacing-3);
  --x-textarea-size-min-height: var(--x-size-default);
  --x-textarea-size-icon-clear: var(--x-font-size-body-1);
  --x-textarea-layout-top-icon-clear: var(--x-spacing-5);
  --x-password-color-eye-icon: var(--x-color-text-2);
  --x-password-size-eye-icon: var(--x-size-3);
  --x-input-group-border-radius_compact: var(--x-border-radius-small);
  --x-input-group-border-separator-width: var(--x-border-1);
  --x-input-group-color-separator-border: var(--x-color-border-subtle);
  /******** 高级配置项 end *******/
  --x-input-size-medium-height: var(--x-input-size-default-height);
  --x-input-size-medium-font-size: var(--x-input-size-default-font-size);
  --x-input-size-mini-line-height: 1.667;
  --x-input-size-small-line-height: var(--x-line-height-base);
  --x-input-size-medium-line-height: var(--x-line-height-base);
  --x-input-size-large-line-height: var(--x-line-height-base);
  /*
   * 上下 padding：由「高度 token - 2×边框 - line-height × 字号」反算得出，
   * 保证实际渲染高度与 --x-input-size-*-height 一致。
   *
   * 原值（3/4px）未按高度反算，导致 medium 实际 30px（token 32）、
   * large 实际 32px（token 36），与同表单内 InputTag(32/36)、Select(32/36) 错位。
   * 计算式：(height - 2 - lineHeight × fontSize) / 2
   *   mini    (24 - 2 - 1.667×12) / 2 = 1px
   *   small   (28 - 2 - 1.5715×14) / 2 = 2px
   *   medium  (32 - 2 - 1.5715×14) / 2 = 4px
   *   large   (36 - 2 - 1.5715×14) / 2 = 6px
   */
  --x-input-size-mini-padding-up-down: 1px;
  --x-input-size-small-padding-up-down: 2px;
  --x-input-size-medium-padding-up-down: 4px;
  --x-input-size-large-padding-up-down: 6px;
  --x-input-feedback-icon-color_success: var(--x-field-status-success-icon);
  --x-input-feedback-icon-color_error: var(--x-field-status-error-icon);
  --x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);
  --x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon);
}

.x-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 4px 8px;
  color: var(--x-tag-color-text-default);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  vertical-align: middle;
  border: 1px solid var(--x-color-transparent);
  border-radius: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.x-tag .x-icon-hover.x-icon-hover::before {
  width: 14px;
  height: 14px;
}
.x-tag .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-bg-default-hover);
}
.x-tag-selectable {
  cursor: pointer;
  transition: all 0.3s linear;
}
.x-tag-selectable:hover {
  background-color: var(--x-tag-color-bg-default-hover);
  border-color: var(--x-tag-color-border-default-hover);
}

.x-tag-checked {
  background-color: var(--x-tag-color-bg-default);
}

.x-tag-bordered {
  border-color: var(--x-tag-color-border-default-bordered);
}
.x-tag-size-small {
  height: 20px;
  font-size: 12px;
  line-height: 18px;
}
.x-tag-size-medium {
  height: 24px;
  font-size: 12px;
  line-height: 22px;
}
.x-tag-size-large {
  height: 28px;
  font-size: 14px;
  line-height: 26px;
}
.x-tag-hide {
  display: none;
}
.x-tag-loading {
  cursor: default;
}
.x-tag-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-tag-color-red.x-tag-checked {
  color: var(--x-tag-color-red-text);
  background-color: var(--x-tag-color-red-bg);
  border: 1px solid var(--x-tag-color-red-border);
}
.x-tag-color-red.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-red-icon-bg_hover);
}
.x-tag-color-red.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-red-text);
}
.x-tag-color-red.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-red-border-hover);
  border-color: var(--x-tag-color-red-text);
}
.x-tag-color-red.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-red-text);
}
.x-tag-color-orangered.x-tag-checked {
  color: var(--x-tag-color-orangered-text);
  background-color: var(--x-tag-color-orangered-bg);
  border: 1px solid var(--x-tag-color-orangered-border);
}
.x-tag-color-orangered.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-orangered-icon-bg_hover);
}
.x-tag-color-orangered.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-orangered-text);
}
.x-tag-color-orangered.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-orangered-border-hover);
  border-color: var(--x-tag-color-orangered-text);
}
.x-tag-color-orangered.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-orangered-text);
}
.x-tag-color-orange.x-tag-checked {
  color: var(--x-tag-color-orange-text);
  background-color: var(--x-tag-color-orange-bg);
  border: 1px solid var(--x-tag-color-orange-border);
}
.x-tag-color-orange.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-orange-icon-bg_hover);
}
.x-tag-color-orange.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-orange-text);
}
.x-tag-color-orange.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-orange-border-hover);
  border-color: var(--x-tag-color-orange-text);
}
.x-tag-color-orange.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-orange-text);
}
.x-tag-color-gold.x-tag-checked {
  color: var(--x-tag-color-gold-text);
  background-color: var(--x-tag-color-gold-bg);
  border: 1px solid var(--x-tag-color-gold-border);
}
.x-tag-color-gold.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-gold-icon-bg_hover);
}
.x-tag-color-gold.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-gold-text);
}
.x-tag-color-gold.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-gold-border-hover);
  border-color: var(--x-tag-color-gold-text);
}
.x-tag-color-gold.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-gold-text);
}
.x-tag-color-lime.x-tag-checked {
  color: var(--x-tag-color-lime-text);
  background-color: var(--x-tag-color-lime-bg);
  border: 1px solid var(--x-tag-color-lime-border);
}
.x-tag-color-lime.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-lime-icon-bg_hover);
}
.x-tag-color-lime.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-lime-text);
}
.x-tag-color-lime.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-lime-border-hover);
  border-color: var(--x-tag-color-lime-text);
}
.x-tag-color-lime.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-lime-text);
}
.x-tag-color-green.x-tag-checked {
  color: var(--x-tag-color-green-text);
  background-color: var(--x-tag-color-green-bg);
  border: 1px solid var(--x-tag-color-green-border);
}
.x-tag-color-green.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-green-icon-bg_hover);
}
.x-tag-color-green.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-green-text);
}
.x-tag-color-green.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-green-border-hover);
  border-color: var(--x-tag-color-green-text);
}
.x-tag-color-green.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-green-text);
}
.x-tag-color-cyan.x-tag-checked {
  color: var(--x-tag-color-cyan-text);
  background-color: var(--x-tag-color-cyan-bg);
  border: 1px solid var(--x-tag-color-cyan-border);
}
.x-tag-color-cyan.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-cyan-icon-bg_hover);
}
.x-tag-color-cyan.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-cyan-text);
}
.x-tag-color-cyan.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-cyan-border-hover);
  border-color: var(--x-tag-color-cyan-text);
}
.x-tag-color-cyan.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-cyan-text);
}
.x-tag-color-better-blue.x-tag-checked {
  color: var(--x-tag-color-better-blue-text);
  background-color: var(--x-tag-color-better-blue-bg);
  border: 1px solid var(--x-tag-color-better-blue-border);
}
.x-tag-color-better-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-better-blue-icon-bg_hover);
}
.x-tag-color-better-blue.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-better-blue-text);
}
.x-tag-color-better-blue.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-better-blue-border-hover);
  border-color: var(--x-tag-color-better-blue-text);
}
.x-tag-color-better-blue.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-better-blue-text);
}
.x-tag-color-blue.x-tag-checked {
  color: var(--x-tag-color-blue-text);
  background-color: var(--x-tag-color-blue-bg);
  border: 1px solid var(--x-tag-color-blue-border);
}
.x-tag-color-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-blue-icon-bg_hover);
}
.x-tag-color-blue.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-blue-text);
}
.x-tag-color-blue.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-blue-border-hover);
  border-color: var(--x-tag-color-blue-text);
}
.x-tag-color-blue.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-blue-text);
}
.x-tag-color-purple.x-tag-checked {
  color: var(--x-tag-color-purple-text);
  background-color: var(--x-tag-color-purple-bg);
  border: 1px solid var(--x-tag-color-purple-border);
}
.x-tag-color-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-purple-icon-bg_hover);
}
.x-tag-color-purple.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-purple-text);
}
.x-tag-color-purple.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-purple-border-hover);
  border-color: var(--x-tag-color-purple-text);
}
.x-tag-color-purple.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-purple-text);
}
.x-tag-color-pink-purple.x-tag-checked {
  color: var(--x-tag-color-pink-purple-text);
  background-color: var(--x-tag-color-pink-purple-bg);
  border: 1px solid var(--x-tag-color-pink-purple-border);
}
.x-tag-color-pink-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-pink-purple-icon-bg_hover);
}
.x-tag-color-pink-purple.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-pink-purple-text);
}
.x-tag-color-pink-purple.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-pink-purple-border-hover);
  border-color: var(--x-tag-color-pink-purple-text);
}
.x-tag-color-pink-purple.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-pink-purple-text);
}
.x-tag-color-magenta.x-tag-checked {
  color: var(--x-tag-color-magenta-text);
  background-color: var(--x-tag-color-magenta-bg);
  border: 1px solid var(--x-tag-color-magenta-border);
}
.x-tag-color-magenta.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-magenta-icon-bg_hover);
}
.x-tag-color-magenta.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-magenta-text);
}
.x-tag-color-magenta.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-magenta-border-hover);
  border-color: var(--x-tag-color-magenta-text);
}
.x-tag-color-magenta.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-magenta-text);
}
.x-tag-color-gray.x-tag-checked {
  color: var(--x-tag-color-gray-text);
  background-color: var(--x-tag-color-gray-bg);
  border: 1px solid var(--x-tag-color-gray-border);
}
.x-tag-color-gray.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-color-gray-icon-bg_hover);
}
.x-tag-color-gray.x-tag-checked.x-tag-bordered {
  border-color: var(--x-tag-color-gray-text);
}
.x-tag-color-gray.x-tag-checked.x-tag-selectable:hover {
  background-color: var(--x-tag-color-gray-border-hover);
  border-color: var(--x-tag-color-gray-text);
}
.x-tag-color-gray.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-color-gray-text);
}
.x-tag-custom-color.x-tag-checked {
  color: var(--x-tag-custom-color-text);
}
.x-tag-custom-color.x-tag-checked .x-icon-hover.x-icon-hover:hover::before {
  background-color: var(--x-tag-custom-color-icon-bg_hover);
}
.x-tag-custom-color.x-tag-checked .x-tag--close-icon:hover {
  color: var(--x-tag-custom-color-text);
}
.x-tag--close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.x-tag--close-icon > .x-icon,
.x-tag--close-icon > svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.x-tag--close-icon > svg {
  position: relative;
}

.x-tag--icon {
  margin-right: 6px;
  color: currentcolor;
}

.x-tag--loading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
}
.x-tag--loading-icon > .x-icon,
.x-tag--loading-icon > svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}

:root {
  /**********************************************
  * size: mini / small / default / large
  **********************************************/
  --x-input-tag-size-mini-height: var(--x-size-mini);
  --x-input-tag-size-small-height: var(--x-size-small);
  --x-input-tag-size-default-height: var(--x-size-default);
  --x-input-tag-size-large-height: var(--x-size-large);
  --x-input-tag-size-mini-tag-height: var(--x-size-5);
  --x-input-tag-size-small-tag-height: var(--x-size-5);
  --x-input-tag-size-default-tag-height: var(--x-size-6);
  --x-input-tag-size-large-tag-height: var(--x-size-7);
  --x-input-tag-size-mini-tag-height-2px: 18px;
  --x-input-tag-size-small-tag-height-2px: 18px;
  --x-input-tag-size-default-tag-height-2px: 22px;
  --x-input-tag-size-large-tag-height-2px: 26px;
  --x-input-tag-size-mini-padding-top-bottom: 0;
  --x-input-tag-size-small-padding-top-bottom: 2px;
  --x-input-tag-size-default-padding-top-bottom: 2px;
  --x-input-tag-size-large-padding-top-bottom: 2px;
  --x-input-tag-size-mini-font-size: var(--x-font-size-body-1);
  --x-input-tag-size-small-font-size: var(--x-font-size-body-3);
  --x-input-tag-size-default-font-size: var(--x-font-size-body-3);
  --x-input-tag-size-large-font-size: var(--x-font-size-body-3);
  /****************************************************
   * status: default / error / disabled _ (hover / focus)
  ****************************************************/
  --x-input-tag-color-text_default: var(--x-field-color-text);
  --x-input-tag-color-text_error: var(--x-field-color-text);
  --x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);
  --x-input-tag-color-placeholder: var(--x-field-color-placeholder);
  --x-input-tag-color-icon-clear: var(--x-field-color-icon);
  --x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);
  --x-input-tag-color-border_default: var(--x-field-color-border);
  --x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);
  --x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);
  --x-input-tag-color-border_error: var(--x-color-transparent);
  --x-input-tag-color-border_error_hover: var(--x-color-transparent);
  --x-input-tag-color-border_error_focus: var(--x-field-color-border-error);
  --x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);
  --x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);
  --x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);
  --x-input-tag-color-bg_default: var(--x-field-color-bg);
  --x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);
  --x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);
  --x-input-tag-color-bg_error: var(--x-field-color-bg-error);
  --x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);
  --x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);
  --x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-input-tag-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);
  --x-input-tag-size-shadow_default_focus: var(--x-field-size-shadow-focus);
  --x-input-tag-tag-margin-right: var(--x-spacing-2);
  --x-input-tag-tag-margin-vertical: var(--x-spacing-1);
  --x-input-tag-tag-margin-vertical-division-2: 1px;
  --x-input-tag-padding-horizontal: var(--x-spacing-2);
  --x-input-tag-border-radius: var(--x-border-radius-small);
  --x-input-tag-border-width: var(--x-border-1);
  --x-input-tag-size-icon-clear: var(--x-size-3);
  --x-input-tag-size-icon-clear_hover: var(--x-size-5);
  --x-input-tag-tag-font-size: var(--x-font-size-body-1);
  --x-input-tag-tag-color-bg: var(--x-color-bg-2);
  --x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);
  --x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);
  --x-input-tag-tag-color-border: var(--x-color-fill-3);
  --x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);
  --x-input-tag-tag-color-border_focus: var(--x-color-fill-2);
  --x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);
  --x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);
  --x-input-tag-size-medium-height: var(--x-input-tag-size-default-height);
  --x-input-tag-size-medium-tag-height: var(--x-input-tag-size-default-tag-height);
  --x-input-tag-size-medium-tag-height-2px: var(--x-input-tag-size-default-tag-height-2px);
  --x-input-tag-size-medium-padding-top-bottom: var(
    --x-input-tag-size-default-padding-top-bottom
  );
  --x-input-tag-size-medium-font-size: var(--x-input-tag-size-default-font-size);
}

.x-select--view-single .x-select--view-search {
  cursor: text;
}
.x-select--view-single .x-select--view-search .x-select--view--value {
  pointer-events: none;
}
.x-select--view-single {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: var(--x-input-padding-horizontal);
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  font-size: var(--x-input-size-default-font-size);
  background-color: var(--x-input-color-bg);
  border: var(--x-input-border-width) solid var(--x-input-border-color);
  border-radius: var(--x-input-border-radius);
  cursor: text;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-single:hover {
  background-color: var(--x-input-color-bg_hover);
  border-color: var(--x-input-color-border_hover);
}
.x-select--view-single:focus-within, .x-select--view-single.x-select--view-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_focus);
  border-color: var(--x-input-color-border_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus);
}
.x-select--view-single.x-select--view-disabled {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
  cursor: not-allowed;
}
.x-select--view-single.x-select--view-disabled:hover {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
}
.x-select--view-single.x-select--view-disabled .x-select--view--prefix,
.x-select--view-single.x-select--view-disabled .x-select--view--suffix {
  color: inherit;
}
.x-select--view-single.x-select--view-error {
  background-color: var(--x-input-color-bg_error);
  border-color: var(--x-input-color-border_error);
}
.x-select--view-single.x-select--view-error:hover {
  background-color: var(--x-input-color-bg_error_hover);
  border-color: var(--x-input-color-border_error_hover);
}
.x-select--view-single.x-select--view-error:focus-within, .x-select--view-single.x-select--view-error.x-select--view-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_error_focus);
  border-color: var(--x-input-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus);
}
.x-select--view-single .x-select--view--prefix,
.x-select--view-single .x-select--view--suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /*
   * 显式行高：前后缀常用来放文字（「https://」「.com」「状态」等）。
   * 不声明时宿主行高会沿继承链进入控件外壳、改变其高度。
   * 放在共享 mixin 里可同时覆盖 Input（x-input）与 Select（x-select--view）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  user-select: none;
  /*
   * 图标真实结构是 span.x-icon > svg，svg 不是直接子级——
   * 原先的 `> svg` 选择器从不命中，mini 尺寸的图标字号（12px）因此失效，
   * 图标落到继承的 wrapper 字号 14px，与控件文字（12px）不匹配。
   * 同时用显式 width/height 固定尺寸（只设 font-size 会让 .x-icon 的
   * 1em 基准确认后仍受 flex 收缩影响，参见 select-view 的同类修复）。
   */
}
.x-select--view-single .x-select--view--prefix > .x-icon,
.x-select--view-single .x-select--view--suffix > .x-icon {
  width: var(--x-input-size-default-icon-suffix-size);
  height: var(--x-input-size-default-icon-suffix-size);
  font-size: var(--x-input-size-default-icon-suffix-size);
}
.x-select--view-single .x-select--view--prefix > .x-icon > svg,
.x-select--view-single .x-select--view--suffix > .x-icon > svg {
  width: 1em;
  height: 1em;
}
.x-select--view-single .x-select--view--prefix {
  padding-right: var(--x-input-padding-horizontal);
  color: var(--x-input-color-prefix-text);
}
.x-select--view-single .x-select--view--suffix {
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-suffix-text);
}
.x-select--view-single .x-select--view--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-select--view-single .x-select--view--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-select--view-single .x-select--view--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-select--view-single .x-select--view--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-select--view-single .x-select--view--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-select--view-single .x-select--view--clear-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--x-input-margin-left-clear-btn);
  color: var(--x-input-color-icon-clear);
  font-size: var(--x-input-size-icon-clear);
  visibility: hidden;
  cursor: pointer;
  /* 只切 visibility 会瞬间跳变，补 opacity 过渡与其余表单控件一致 */
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-single .x-select--view--clear-btn > svg {
  position: relative;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-single:hover .x-select--view--clear-btn, .x-select--view-single:focus-within .x-select--view--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-select--view-single:not(.x-select--view-focus) .x-select--view-icon-hover:hover::before {
  background-color: var(--x-input-color-icon-clear-bg_hover);
}
.x-select--view-single {
  cursor: pointer;
}
.x-select--view-single .x-select--view--input {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--x-line-height-base);
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: var(--x-color-transparent);
}
.x-select--view-single .x-select--view--input::placeholder {
  color: var(--x-input-color-placeholder-text);
}
.x-select--view-single .x-select--view--input[disabled]::placeholder {
  color: var(--x-input-color-text_disabled);
}
.x-select--view-single .x-select--view--input[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-select--view-single .x-select--view--input {
  align-self: stretch;
}
.x-select--view-single .x-select--view--input-hidden {
  position: absolute;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}
.x-select--view-single .x-select--view--value {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  /*
   * 显式行高：Select / InputTag 等会把文字型 prefix 渲染在 wrapper 内，
   * 不声明就会继承宿主行高，改变外壳高度与文字垂直位置。
   */
  line-height: var(--x-line-height-base);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-select--view-single .x-select--view--value::after {
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  content: ".";
}
.x-select--view-single .x-select--view--value-hidden {
  display: none;
}
.x-select--view-single.x-select--view-size-mini {
  min-height: var(--x-input-size-mini-height);
}
.x-select--view-single.x-select--view-size-mini .x-select--view--input, .x-select--view-single.x-select--view-size-mini .x-select--view--value {
  /* prettier-ignore */
  padding-top: var(--x-input-size-mini-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-mini-padding-up-down);
  font-size: var(--x-input-size-mini-font-size);
  line-height: var(--x-input-size-mini-line-height);
  box-sizing: border-box;
  min-height: calc(var(--x-input-size-mini-height) - 2px);
}
.x-select--view-single.x-select--view-size-small {
  min-height: var(--x-input-size-small-height);
}
.x-select--view-single.x-select--view-size-small .x-select--view--input, .x-select--view-single.x-select--view-size-small .x-select--view--value {
  /* prettier-ignore */
  padding-top: var(--x-input-size-small-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-small-padding-up-down);
  font-size: var(--x-input-size-small-font-size);
  line-height: var(--x-input-size-small-line-height);
  box-sizing: border-box;
  min-height: calc(var(--x-input-size-small-height) - 2px);
}
.x-select--view-single.x-select--view-size-medium {
  min-height: var(--x-input-size-medium-height);
}
.x-select--view-single.x-select--view-size-medium .x-select--view--input, .x-select--view-single.x-select--view-size-medium .x-select--view--value {
  /* prettier-ignore */
  padding-top: var(--x-input-size-medium-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-medium-padding-up-down);
  font-size: var(--x-input-size-medium-font-size);
  line-height: var(--x-input-size-medium-line-height);
  box-sizing: border-box;
  min-height: calc(var(--x-input-size-medium-height) - 2px);
}
.x-select--view-single.x-select--view-size-large {
  min-height: var(--x-input-size-large-height);
}
.x-select--view-single.x-select--view-size-large .x-select--view--input, .x-select--view-single.x-select--view-size-large .x-select--view--value {
  /* prettier-ignore */
  padding-top: var(--x-input-size-large-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-large-padding-up-down);
  font-size: var(--x-input-size-large-font-size);
  line-height: var(--x-input-size-large-line-height);
  box-sizing: border-box;
  min-height: calc(var(--x-input-size-large-height) - 2px);
}
.x-select--view-single .x-select--view--input-area {
  display: grid;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}
.x-select--view-single .x-select--view--input-area > .x-select--view--input,
.x-select--view-single .x-select--view--input-area > .x-select--view--value {
  grid-area: 1/1;
  min-width: 0;
}
.x-select--view-single .x-select--view--input-area > .x-select--view--input-hidden {
  position: relative;
  width: 100%;
  pointer-events: auto;
  cursor: inherit;
}
.x-select--view-single .x-select--view--input-area > .x-select--view--value {
  pointer-events: none;
}
.x-select--view-multiple {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: var(--x-input-padding-horizontal);
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  font-size: var(--x-input-size-default-font-size);
  background-color: var(--x-input-color-bg);
  border: var(--x-input-border-width) solid var(--x-input-border-color);
  border-radius: var(--x-input-border-radius);
  cursor: text;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-multiple:hover {
  background-color: var(--x-input-color-bg_hover);
  border-color: var(--x-input-color-border_hover);
}
.x-select--view-multiple:focus-within, .x-select--view-multiple.x-select--view-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_focus);
  border-color: var(--x-input-color-border_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus);
}
.x-select--view-multiple.x-select--view-disabled {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
  cursor: not-allowed;
}
.x-select--view-multiple.x-select--view-disabled:hover {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--prefix,
.x-select--view-multiple.x-select--view-disabled .x-select--view--suffix {
  color: inherit;
}
.x-select--view-multiple.x-select--view-error {
  background-color: var(--x-input-color-bg_error);
  border-color: var(--x-input-color-border_error);
}
.x-select--view-multiple.x-select--view-error:hover {
  background-color: var(--x-input-color-bg_error_hover);
  border-color: var(--x-input-color-border_error_hover);
}
.x-select--view-multiple.x-select--view-error:focus-within, .x-select--view-multiple.x-select--view-error.x-select--view-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_error_focus);
  border-color: var(--x-input-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus);
}
.x-select--view-multiple .x-select--view--prefix,
.x-select--view-multiple .x-select--view--suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /*
   * 显式行高：前后缀常用来放文字（「https://」「.com」「状态」等）。
   * 不声明时宿主行高会沿继承链进入控件外壳、改变其高度。
   * 放在共享 mixin 里可同时覆盖 Input（x-input）与 Select（x-select--view）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  user-select: none;
  /*
   * 图标真实结构是 span.x-icon > svg，svg 不是直接子级——
   * 原先的 `> svg` 选择器从不命中，mini 尺寸的图标字号（12px）因此失效，
   * 图标落到继承的 wrapper 字号 14px，与控件文字（12px）不匹配。
   * 同时用显式 width/height 固定尺寸（只设 font-size 会让 .x-icon 的
   * 1em 基准确认后仍受 flex 收缩影响，参见 select-view 的同类修复）。
   */
}
.x-select--view-multiple .x-select--view--prefix > .x-icon,
.x-select--view-multiple .x-select--view--suffix > .x-icon {
  width: var(--x-input-size-default-icon-suffix-size);
  height: var(--x-input-size-default-icon-suffix-size);
  font-size: var(--x-input-size-default-icon-suffix-size);
}
.x-select--view-multiple .x-select--view--prefix > .x-icon > svg,
.x-select--view-multiple .x-select--view--suffix > .x-icon > svg {
  width: 1em;
  height: 1em;
}
.x-select--view-multiple .x-select--view--prefix {
  padding-right: var(--x-input-padding-horizontal);
  color: var(--x-input-color-prefix-text);
}
.x-select--view-multiple .x-select--view--suffix {
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-suffix-text);
}
.x-select--view-multiple .x-select--view--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-select--view-multiple .x-select--view--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-select--view-multiple .x-select--view--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-select--view-multiple .x-select--view--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-select--view-multiple .x-select--view--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-select--view-multiple .x-select--view--clear-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--x-input-margin-left-clear-btn);
  color: var(--x-input-color-icon-clear);
  font-size: var(--x-input-size-icon-clear);
  visibility: hidden;
  cursor: pointer;
  /* 只切 visibility 会瞬间跳变，补 opacity 过渡与其余表单控件一致 */
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-multiple .x-select--view--clear-btn > svg {
  position: relative;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-multiple:hover .x-select--view--clear-btn, .x-select--view-multiple:focus-within .x-select--view--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-select--view-multiple:not(.x-select--view-focus) .x-select--view-icon-hover:hover::before {
  background-color: var(--x-input-color-icon-clear-bg_hover);
}
.x-select--view-multiple.x-select--view-has-tag {
  padding-right: var(--x-input-tag-padding-horizontal);
  padding-left: var(--x-input-tag-padding-horizontal);
}
.x-select--view-multiple.x-select--view-has-prefix {
  padding-left: var(--x-input-padding-horizontal);
}
.x-select--view-multiple {
  /*
   * prefix 插槽内部常放文字（如「标签」），必须显式声明行高：
   * 兄弟节点 .x-select--view--inner 设了 line-height: 0，宿主行高也会沿继承链下来，
   * 不声明时 prefix 文字的行高完全取决于外部环境。
   */
}
.x-select--view-multiple .x-select--view--prefix {
  line-height: var(--x-line-height-base);
}
.x-select--view-multiple.x-select--view-has-suffix {
  padding-right: var(--x-input-padding-horizontal);
}
.x-select--view-multiple .x-select--view--inner {
  flex: 1;
  overflow: hidden;
  line-height: 0;
}
.x-select--view-multiple .x-select--view--inner.x-select--view-nowrap {
  display: flex;
  flex-wrap: wrap;
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: var(--x-input-tag-tag-margin-right);
  color: var(--x-input-tag-color-text_default);
  font-size: var(--x-input-tag-tag-font-size);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--x-input-tag-tag-color-bg);
  border-color: var(--x-input-tag-tag-color-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-red {
  color: var(--x-tag-color-red-text);
  background-color: var(--x-tag-color-red-bg);
  border-color: var(--x-tag-color-red-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-red.x-tag-bordered {
  border-color: var(--x-tag-color-red-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-orangered {
  color: var(--x-tag-color-orangered-text);
  background-color: var(--x-tag-color-orangered-bg);
  border-color: var(--x-tag-color-orangered-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-orangered.x-tag-bordered {
  border-color: var(--x-tag-color-orangered-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-orange {
  color: var(--x-tag-color-orange-text);
  background-color: var(--x-tag-color-orange-bg);
  border-color: var(--x-tag-color-orange-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-orange.x-tag-bordered {
  border-color: var(--x-tag-color-orange-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-gold {
  color: var(--x-tag-color-gold-text);
  background-color: var(--x-tag-color-gold-bg);
  border-color: var(--x-tag-color-gold-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-gold.x-tag-bordered {
  border-color: var(--x-tag-color-gold-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-lime {
  color: var(--x-tag-color-lime-text);
  background-color: var(--x-tag-color-lime-bg);
  border-color: var(--x-tag-color-lime-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-lime.x-tag-bordered {
  border-color: var(--x-tag-color-lime-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-green {
  color: var(--x-tag-color-green-text);
  background-color: var(--x-tag-color-green-bg);
  border-color: var(--x-tag-color-green-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-green.x-tag-bordered {
  border-color: var(--x-tag-color-green-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-cyan {
  color: var(--x-tag-color-cyan-text);
  background-color: var(--x-tag-color-cyan-bg);
  border-color: var(--x-tag-color-cyan-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-cyan.x-tag-bordered {
  border-color: var(--x-tag-color-cyan-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-better-blue {
  color: var(--x-tag-color-better-blue-text);
  background-color: var(--x-tag-color-better-blue-bg);
  border-color: var(--x-tag-color-better-blue-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-better-blue.x-tag-bordered {
  border-color: var(--x-tag-color-better-blue-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-blue {
  color: var(--x-tag-color-blue-text);
  background-color: var(--x-tag-color-blue-bg);
  border-color: var(--x-tag-color-blue-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-blue.x-tag-bordered {
  border-color: var(--x-tag-color-blue-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-purple {
  color: var(--x-tag-color-purple-text);
  background-color: var(--x-tag-color-purple-bg);
  border-color: var(--x-tag-color-purple-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-purple.x-tag-bordered {
  border-color: var(--x-tag-color-purple-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-pink-purple {
  color: var(--x-tag-color-pink-purple-text);
  background-color: var(--x-tag-color-pink-purple-bg);
  border-color: var(--x-tag-color-pink-purple-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-pink-purple.x-tag-bordered {
  border-color: var(--x-tag-color-pink-purple-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-magenta {
  color: var(--x-tag-color-magenta-text);
  background-color: var(--x-tag-color-magenta-bg);
  border-color: var(--x-tag-color-magenta-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-magenta.x-tag-bordered {
  border-color: var(--x-tag-color-magenta-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-gray {
  color: var(--x-tag-color-gray-text);
  background-color: var(--x-tag-color-gray-bg);
  border-color: var(--x-tag-color-gray-border);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-color-gray.x-tag-bordered {
  border-color: var(--x-tag-color-gray-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag .x-icon-hover:hover::before {
  background-color: var(--x-input-tag-tag-remove-icon-color-bg);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-custom-color {
  color: var(--x-tag-custom-color-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before {
  background-color: var(--x-tag-custom-color-icon-bg_hover);
}
.x-select--view-multiple .x-select--view--inner.x-select--view-nowrap .x-select--view--tag {
  white-space: nowrap;
  word-break: normal;
}
.x-select--view-multiple .x-select--view--inner .x-select--view--input {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--x-line-height-base);
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: var(--x-color-transparent);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--input::placeholder {
  color: var(--x-input-color-placeholder-text);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--input[disabled]::placeholder {
  color: var(--x-input-color-text_disabled);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--input[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-select--view-multiple .x-select--view--inner .x-select--view--input {
  box-sizing: border-box;
  /*
   * 字号必须显式继承。
   *
   * input-style() 不含 font-size，而 <input> 按 UA 规范不继承父级字体，
   * 因此这个输入框一直渲染在 UA 默认的 13.3333px 上：既与标签字号
   * （12/14px）不一致，也让 .--mirror 的测宽失准（mirror 用正确字号测，
   * 实际输入框用 13.33px 渲染，mini 尺寸下文字会被裁切）。
   */
  font-size: inherit;
}
.x-select--view-multiple .x-select--view--mirror {
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre;
  visibility: hidden;
  pointer-events: none;
}
.x-select--view-multiple.x-select--view-focus .x-select--view--tag {
  background-color: var(--x-input-tag-tag-color-bg_focus);
  border-color: var(--x-input-tag-tag-color-border_focus);
}
.x-select--view-multiple.x-select--view-focus .x-select--view--tag .x-icon-hover:hover::before {
  background-color: var(--x-input-tag-tag-remove-icon-color-bg_focus);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-red {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-orangered {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-orange {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-gold {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-lime {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-green {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-cyan {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-better-blue {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-blue {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-purple {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-pink-purple {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-magenta {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-disabled .x-select--view--tag.x-tag-color-gray {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-select--view-multiple.x-select--view-readonly, .x-select--view-multiple.x-select--view-disabled-input {
  cursor: default;
}
.x-select--view-multiple.x-select--view-size-mini {
  font-size: var(--x-input-tag-size-mini-font-size);
}
.x-select--view-multiple.x-select--view-size-mini .x-select--view--inner {
  padding-top: var(--x-input-tag-size-mini-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-mini-padding-top-bottom);
}
.x-select--view-multiple.x-select--view-size-mini .x-select--view--tag,
.x-select--view-multiple.x-select--view-size-mini .x-select--view--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-mini-tag-height-2px);
  vertical-align: middle;
}
.x-select--view-multiple.x-select--view-size-mini .x-select--view--tag {
  height: auto;
  min-height: var(--x-input-tag-size-mini-tag-height);
}
.x-select--view-multiple.x-select--view-size-mini .x-select--view--input {
  height: var(--x-input-tag-size-mini-tag-height);
}
.x-select--view-multiple.x-select--view-size-medium {
  font-size: var(--x-input-tag-size-medium-font-size);
}
.x-select--view-multiple.x-select--view-size-medium .x-select--view--inner {
  padding-top: var(--x-input-tag-size-medium-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-medium-padding-top-bottom);
}
.x-select--view-multiple.x-select--view-size-medium .x-select--view--tag,
.x-select--view-multiple.x-select--view-size-medium .x-select--view--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-medium-tag-height-2px);
  vertical-align: middle;
}
.x-select--view-multiple.x-select--view-size-medium .x-select--view--tag {
  height: auto;
  min-height: var(--x-input-tag-size-medium-tag-height);
}
.x-select--view-multiple.x-select--view-size-medium .x-select--view--input {
  height: var(--x-input-tag-size-medium-tag-height);
}
.x-select--view-multiple.x-select--view-size-small {
  font-size: var(--x-input-tag-size-small-font-size);
}
.x-select--view-multiple.x-select--view-size-small .x-select--view--inner {
  padding-top: var(--x-input-tag-size-small-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-small-padding-top-bottom);
}
.x-select--view-multiple.x-select--view-size-small .x-select--view--tag,
.x-select--view-multiple.x-select--view-size-small .x-select--view--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-small-tag-height-2px);
  vertical-align: middle;
}
.x-select--view-multiple.x-select--view-size-small .x-select--view--tag {
  height: auto;
  min-height: var(--x-input-tag-size-small-tag-height);
}
.x-select--view-multiple.x-select--view-size-small .x-select--view--input {
  height: var(--x-input-tag-size-small-tag-height);
}
.x-select--view-multiple.x-select--view-size-large {
  font-size: var(--x-input-tag-size-large-font-size);
}
.x-select--view-multiple.x-select--view-size-large .x-select--view--inner {
  padding-top: var(--x-input-tag-size-large-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-large-padding-top-bottom);
}
.x-select--view-multiple.x-select--view-size-large .x-select--view--tag,
.x-select--view-multiple.x-select--view-size-large .x-select--view--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-large-tag-height-2px);
  vertical-align: middle;
}
.x-select--view-multiple.x-select--view-size-large .x-select--view--tag {
  height: auto;
  min-height: var(--x-input-tag-size-large-tag-height);
}
.x-select--view-multiple.x-select--view-size-large .x-select--view--input {
  height: var(--x-input-tag-size-large-tag-height);
}
.x-select--view-multiple.x-select--view-disabled-input {
  cursor: pointer;
}
.x-select--view.x-select--view-borderless {
  background-color: var(--x-color-transparent);
  border-color: var(--x-color-transparent);
  box-shadow: none;
}
.x-select--view--suffix .x-feedback-icon {
  margin-left: 4px;
}
.x-select--view-multiple .x-select--view--suffix {
  margin-left: auto;
}
.x-select--view {
  /*
   * 图标尺寸用显式 width/height：只设 font-size 会让 .x-icon svg 的
   * width（按父级 1em）与 height（按自身字号 1em）解析基准不同，
   * 渲染成非等比矩形、小尺寸下发糊（同 Alert 图标的历史问题）。
   */
}
.x-select--view--clear-btn, .x-select--view--icon {
  display: inline-flex;
  flex: 0 0 var(--x-size-4);
  align-items: center;
  justify-content: center;
  width: var(--x-size-4);
  height: var(--x-size-4);
  /* 外层 .x-icon 与 svg 必须同尺寸：只设 svg 会在 flex 主轴被收缩成非等比矩形 */
}
.x-select--view--clear-btn .x-icon, .x-select--view--icon .x-icon {
  width: var(--x-size-3);
  height: var(--x-size-3);
  font-size: var(--x-size-3);
}
.x-select--view--clear-btn svg, .x-select--view--icon svg {
  display: block;
  width: var(--x-size-3);
  height: var(--x-size-3);
}
.x-select--view {
  /*
   * 箭头随展开翻转。
   *
   * 类名是双横线：模板用 element('arrow-icon') 生成 `x-select--view--arrow-icon`。
   * 原写法 `&-arrow-icon` 编译为 `x-select--view-arrow-icon`（单横线），
   * 与运行时类名不匹配，展开时箭头实际从不翻转。此处同时补上过渡，
   * 避免翻转瞬间跳变。
   */
}
.x-select--view--icon .x-icon {
  transition: transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--view-opened .x-select--view--arrow-icon {
  transform: rotateZ(180deg);
}
.x-select--view--clear-btn {
  cursor: pointer;
}
.x-select--view-single .x-select--view--clear-btn, .x-select--view-multiple .x-select--view--clear-btn {
  visibility: visible;
  opacity: 1;
  margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
  .x-select--view--icon .x-icon {
    transition: none;
  }
}

:root {
  --x-picker-size-mini: var(--x-size-mini);
  --x-picker-size-small: var(--x-size-small);
  --x-picker-size-default: var(--x-size-default);
  --x-picker-size-large: var(--x-size-large);
  --x-picker-size-mini-font-size-text: var(--x-font-size-body-1);
  --x-picker-size-small-font-size-text: var(--x-font-size-body-3);
  --x-picker-size-default-font-size-text: var(--x-font-size-body-3);
  --x-picker-size-large-font-size-text: var(--x-font-size-body-3);
  --x-picker-input-border-radius: var(--x-field-border-radius);
  --x-picker-color-shadow_focus: var(--x-field-color-shadow-focus);
  --x-picker-size-shadow_focus: var(--x-field-size-shadow-focus);
  --x-picker-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);
  --x-picker-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);
  --x-picker-color-bg: var(--x-field-color-bg);
  --x-picker-color-bg_hover: var(--x-field-color-bg-hover);
  --x-picker-color-bg_focus: var(--x-field-color-bg-focus);
  --x-picker-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-picker-color-bg_error: var(--x-field-color-bg-error);
  --x-picker-color-bg_error_hover: var(--x-field-color-bg-error-hover);
  --x-picker-color-bg_error_focus: var(--x-field-color-bg-error-focus);
  --x-picker-color-border: var(--x-field-color-border);
  --x-picker-color-border_hover: var(--x-field-color-border-hover);
  --x-picker-color-border_focus: var(--x-field-color-border-focus);
  --x-picker-color-border_disabled: var(--x-field-color-border-disabled);
  --x-picker-color-border_error: var(--x-color-transparent);
  --x-picker-color-border_error_hover: var(--x-color-transparent);
  --x-picker-color-border_error_focus: var(--x-field-color-border-error);
  --x-picker-color-placeholder: var(--x-field-color-placeholder);
  --x-picker-color-placeholder_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-text: var(--x-field-color-text);
  --x-picker-color-text_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-icon: var(--x-field-color-icon);
  --x-picker-color-icon_disabled: var(--x-field-color-text-disabled);
  --x-picker-color-separator: var(--x-field-color-affix);
  --x-picker-color-separator_disabled: var(--x-field-color-text-disabled);
  --x-picker-range-color-bg-input_focus: var(--x-color-fill-2);
  --x-input-color-text_disabled: var(--x-field-color-text-disabled);
  --x-picker-padding-horizontal: var(--x-spacing-2);
  --x-picker-input-padding-horizontal: calc(
    var(--x-input-padding-horizontal) - var(--x-picker-padding-horizontal)
  );
}

.x-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--x-picker-padding-horizontal) 11px 4px 4px;
  line-height: var(--x-line-height-base);
  background-color: var(--x-picker-color-bg);
  border: 1px solid var(--x-picker-color-border);
  border-radius: var(--x-picker-input-border-radius);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-picker--input {
  display: inline-flex;
  flex: 1;
}
.x-picker input {
  width: 100%;
  padding: 0;
  /* 接线既有 token（= 输入框内边距 12px - 容器内边距 4px = 8px），
     原先写死 8px 导致该 token 定义后从未被引用 */
  padding-left: var(--x-picker-input-padding-horizontal);
  color: var(--x-picker-color-text);
  line-height: var(--x-line-height-base);
  text-align: left;
  background-color: var(--x-color-transparent);
  border: none;
  outline: none;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-picker input::placeholder {
  color: var(--x-picker-color-placeholder);
}
.x-picker input[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-picker-has-prefix {
  padding-left: var(--x-input-padding-horizontal);
}
.x-picker--prefix {
  padding-right: var(--x-picker-padding-horizontal);
  color: var(--x-input-color-prefix-text);
  font-size: var(--x-input-size-default-icon-suffix-size);
}

.x-picker--suffix {
  position: relative;
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: flex-end;
  width: 28px;
  min-width: 28px;
  height: 100%;
  margin-left: 2px;
}
.x-picker--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-picker--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-picker--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-picker--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-picker--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-picker--suffix .x-feedback-icon {
  margin-left: 4px;
}

.x-picker--suffix-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--x-picker-color-icon);
  font-size: 14px;
  line-height: 1;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-picker {
  /*
   * 清除按钮常驻 + 淡入淡出。
   *
   * 原先用 display: none → inline-flex 切换，display 不可过渡，每次移入/移出
   * 都是瞬间跳变，与 Input / Textarea / Select 的渐显不一致。改为常驻元素 +
   * opacity/visibility 过渡；元素绝对定位于 .x-picker--suffix 内，常驻不占布局位。
   */
}
.x-picker .x-picker--clear-icon {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--x-color-text-2);
  font-size: 12px;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-picker:hover {
  background-color: var(--x-picker-color-bg_hover);
  border-color: var(--x-picker-color-border_hover);
}
.x-picker:not(.x-picker-disabled):hover .x-picker--clear-icon, .x-picker:not(.x-picker-disabled):focus-within .x-picker--clear-icon, .x-picker-focused:not(.x-picker-disabled) .x-picker--clear-icon {
  visibility: visible;
  opacity: 1;
}
.x-picker {
  /*
   * 与清除按钮交叉淡化：日/时间图标同步淡出，避免清除按钮淡入时
   * 图标瞬间消失造成的跳变。
   */
}
.x-picker:not(.x-picker-disabled):hover .x-picker--suffix .x-picker--clear-icon + span, .x-picker:not(.x-picker-disabled):focus-within .x-picker--suffix .x-picker--clear-icon + span, .x-picker-focused:not(.x-picker-disabled) .x-picker--suffix .x-picker--clear-icon + span {
  visibility: hidden;
  opacity: 0;
}
.x-picker input[disabled] {
  color: var(--x-picker-color-text_disabled);
  cursor: not-allowed;
}
.x-picker input[disabled]::placeholder {
  color: var(--x-picker-color-placeholder_disabled);
}
.x-picker-error {
  background-color: var(--x-picker-color-bg_error);
  border-color: var(--x-picker-color-border_error);
}
.x-picker-error:hover {
  background-color: var(--x-picker-color-bg_error_hover);
  border-color: var(--x-picker-color-border_error_hover);
}
.x-picker-focused {
  box-shadow: 0 0 0 var(--x-picker-size-shadow_focus) var(--x-picker-color-shadow_focus);
}
.x-picker-focused, .x-picker-focused:hover {
  background-color: var(--x-picker-color-bg_focus);
  border-color: var(--x-picker-color-border_focus);
}
.x-picker {
  /*
   * mm() 内部已拼接 & + '-' + modifier，参数必须传裸 modifier 名。
   * 传 `&-focused` 会生成 `.x-picker-.x-picker -focused...` 无效选择器，
   * 整条规则被浏览器丢弃，导致 error + focus 组合态丢失错误视觉。
   */
}
.x-picker-focused.x-picker-error {
  border-color: var(--x-picker-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-picker-size-shadow_error_focus) var(--x-picker-color-shadow_error_focus);
}

.x-picker-focused .x-picker--input-active input, .x-picker-focused:hover .x-picker--input-active input {
  background: var(--x-picker-range-color-bg-input_focus);
}
.x-picker-disabled, .x-picker-disabled:hover {
  color: var(--x-picker-color-text_disabled);
  background-color: var(--x-picker-color-bg_disabled);
  border-color: var(--x-picker-color-border_disabled);
  cursor: not-allowed;
}
.x-picker-disabled input[disabled], .x-picker-disabled:hover input[disabled] {
  color: var(--x-picker-color-text_disabled);
  cursor: not-allowed;
}
.x-picker-disabled input[disabled]::placeholder, .x-picker-disabled:hover input[disabled]::placeholder {
  color: var(--x-picker-color-placeholder_disabled);
}
.x-picker--separator {
  min-width: 10px;
  padding: 0 8px;
  color: var(--x-picker-color-separator);
}
.x-picker-disabled .x-picker--separator {
  color: var(--x-picker-color-separator_disabled);
}
.x-picker-disabled .x-picker--suffix-icon {
  color: var(--x-picker-color-icon_disabled);
}
.x-picker-size-mini {
  height: var(--x-picker-size-mini);
}
.x-picker-size-mini input {
  font-size: var(--x-picker-size-mini-font-size-text);
}
.x-picker-size-small {
  height: var(--x-picker-size-small);
}
.x-picker-size-small input {
  font-size: var(--x-picker-size-small-font-size-text);
}
.x-picker-size-medium {
  height: var(--x-picker-size-default);
}
.x-picker-size-medium input {
  font-size: var(--x-picker-size-default-font-size-text);
}
.x-picker-size-large {
  height: var(--x-picker-size-large);
}
.x-picker-size-large input {
  font-size: var(--x-picker-size-large-font-size-text);
}

:root {
  --x-alert-info-color-bg: var(--x-color-primary-light-1);
  --x-alert-success-color-bg: var(--x-color-success-light-1);
  --x-alert-warning-color-bg: var(--x-color-warning-light-1);
  --x-alert-strong-color-bg: var(--x-color-strong-subtle);
  --x-alert-error-color-bg: var(--x-color-danger-light-1);
  --x-alert-info-color-icon: var(--x-color-primary-text);
  --x-alert-color-text-content-with-title: var(--x-color-text-1);
  --x-alert-color-close-icon: var(--x-color-text-2);
  --x-alert-color-focus-ring: var(--x-color-primary-text);
}

/*****************************************************
 * type: info / warning / error /success
 *****************************************************/
.x-alert-slide-enter-from,
.x-alert-slide-appear-from {
  max-height: 0;
  opacity: 0;
}

.x-alert-slide-enter-to,
.x-alert-slide-appear-to {
  max-height: 200px;
  opacity: 1;
}

.x-alert-slide-enter-active,
.x-alert-slide-appear-active,
.x-alert-slide-leave-active {
  transition: max-height var(--x-transition-duration-3, 0.3s) ease-in-out, opacity var(--x-transition-duration-2, 0.2s) ease-in-out, padding-top var(--x-transition-duration-3, 0.3s) ease-in-out, padding-bottom var(--x-transition-duration-3, 0.3s) ease-in-out, margin-top var(--x-transition-duration-3, 0.3s) ease-in-out, margin-bottom var(--x-transition-duration-3, 0.3s) ease-in-out;
}

.x-alert-slide-leave-to {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
}

.x-alert {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 15px;
  overflow: hidden;
  font-size: var(--x-font-size-body-3);
  line-height: 1.5715;
  text-align: left;
  border-radius: var(--x-border-radius-medium);
}
.x-alert-with-title {
  align-items: flex-start;
  padding: 15px 15px;
}
.x-alert-center {
  justify-content: center;
}
.x-alert-center .x-alert--body {
  flex: initial;
}
.x-alert-normal {
  --x-alert-color-close-icon: var(--x-color-text-2);
  --x-alert-color-focus-ring: var(--x-color-primary-text);
  background-color: var(--x-color-neutral-2);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-info {
  background-color: var(--x-alert-info-color-bg);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-success {
  background-color: var(--x-alert-success-color-bg);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-warning {
  background-color: var(--x-alert-warning-color-bg);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-error {
  background-color: var(--x-alert-error-color-bg);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-strong {
  background-color: var(--x-alert-strong-color-bg);
  border: var(--x-border-1) solid var(--x-color-transparent);
}
.x-alert-banner {
  border: none;
  border-radius: 0;
}
.x-alert--body {
  position: relative;
  flex: 1;
}
.x-alert--title {
  margin-bottom: var(--x-spacing-2);
  font-weight: var(--x-font-weight-500);
  font-size: var(--x-font-size-title-1);
  line-height: 1.5;
}
.x-alert-normal .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-normal .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-normal.x-alert-with-title .x-alert-normal--content {
  color: var(--x-color-text-2);
}
.x-alert-info .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-info .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-info.x-alert-with-title .x-alert--content {
  color: var(--x-alert-color-text-content-with-title);
}
.x-alert-success .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-success .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-success.x-alert-with-title .x-alert--content {
  color: var(--x-alert-color-text-content-with-title);
}
.x-alert-warning .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-warning .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-warning.x-alert-with-title .x-alert--content {
  color: var(--x-alert-color-text-content-with-title);
}
.x-alert-error .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-error .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-error.x-alert-with-title .x-alert--content {
  color: var(--x-alert-color-text-content-with-title);
}
.x-alert-strong .x-alert--title {
  color: var(--x-color-text-1);
}
.x-alert-strong .x-alert--content {
  color: var(--x-color-text-1);
}
.x-alert-strong.x-alert-with-title .x-alert--content {
  color: var(--x-alert-color-text-content-with-title);
}
.x-alert {
  /*
   * 图标尺寸必须用显式 width/height，不能只设 font-size。
   *
   * 原实现给 svg 设 font-size，而 .x-icon svg 的 width/height 是 1em：
   * width 的 em 按**继承自 .x-icon 的字号**（14px，来自 font-size-body-3）解析，
   * height 的 em 按**svg 自身刚设定的字号**（16/18px）解析，
   * 于是渲染成 14×16 / 14×18 的非等比矩形——48×48 的 viewBox 被横向压扁，
   * 小尺寸下就表现为"图标发糊、看不清"。
   *
   * 同时 .x-icon 已是 inline-flex + align-items:center 的居中容器，
   * 不需要 vertical-align 微调（原有的 -3px/-5px 是补偿错位的手工值）。
   */
}
.x-alert--icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: var(--x-spacing-4);
  /*
   * 图标尺寸必须同时约束外层 .x-icon 与内部 svg。
   *
   * .x-icon 自身是 width/height:1em 的 inline-flex 容器。只给 svg 设尺寸时
   * 会出现两个问题：① em 基准分裂（容器 1em 按 14px 解析、svg 按自身字号解析）；
   * ② svg 作为 flex item 在主轴被收缩回容器宽度，交叉轴却保持内容高度，
   * 最终渲染成 14×16 / 14×18 的矩形——48×48 的 viewBox 被横向压扁，
   * 1x 屏幕下即"图标发糊"。
   */
}
.x-alert--icon .x-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.x-alert-with-title .x-alert--icon .x-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.x-alert {
  /* 带标题时图标与标题首行视觉居中（标题行高大于图标） */
}
.x-alert-with-title .x-alert--icon {
  margin-top: 2px;
}
.x-alert-normal .x-alert--icon svg {
  color: var(--x-color-neutral-4);
}
.x-alert-info .x-alert--icon svg {
  color: var(--x-alert-info-color-icon);
}
.x-alert-success .x-alert--icon svg {
  color: var(--x-color-success-text);
}
.x-alert-warning .x-alert--icon svg {
  color: var(--x-color-warning-text);
}
.x-alert-error .x-alert--icon svg {
  color: var(--x-color-danger-text);
}
.x-alert-strong .x-alert--icon svg {
  color: var(--x-color-strong-text);
}
.x-alert--close-btn {
  top: 4px;
  right: 0;
  box-sizing: border-box;
  margin-left: var(--x-spacing-4);
  padding: 0;
  color: var(--x-alert-color-close-icon);
  font-size: 12px;
  background-color: var(--x-color-transparent);
  border: none;
  outline: none;
  cursor: pointer;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-alert--close-btn:hover {
  color: var(--x-color-text-1);
}
.x-alert--close-btn:focus-visible {
  outline: 2px solid var(--x-alert-color-focus-ring);
  outline-offset: 2px;
}
.x-alert--action + .x-alert--close-btn {
  margin-left: var(--x-spacing-4);
}
.x-alert--action {
  margin-left: var(--x-spacing-4);
}
.x-alert-with-title .x-alert--close-btn {
  margin-top: 0;
  margin-right: 0;
}

:root {
  /*
   * 柱状图专属 token。
   *
   * 分类色板、轴文字、网格线、提示浮层、图例等已提升到图表族共享层
   * （_components/chart/style/var.scss 的 --x-chart-*），
   * 这里只保留柱状图独有的视觉参数。
   */
  --x-bar-chart-border-radius-bar: var(--x-border-radius-small);
}

/*
 * 柱状图几何样式。
 *
 * 网格与轴标签、悬浮提示、图例、空态、读屏播报节点由图表族共享层提供
 * （_components/chart/style/index.scss，类名 x-chart--*）；
 * 这里只保留柱体形状与激活态。
 */
.x-bar-chart {
  position: relative;
  width: 100%;
}
.x-bar-chart--canvas {
  position: relative;
  width: 100%;
}

.x-bar-chart--svg {
  display: block;
  max-width: 100%;
  overflow: visible;
  outline: none;
  cursor: default;
}
.x-bar-chart--svg:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--x-bar-chart-border-radius-bar);
}

.x-bar-chart--active-band {
  fill: var(--x-chart-color-active-band);
  pointer-events: none;
}

.x-bar-chart--bar {
  cursor: pointer;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-bar-chart--bar-shape {
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-bar-chart {
  /*
   * 激活类目之外的柱体整体淡化，让当前类目凸显。
   * 用 opacity 而不是改 fill，避免覆盖业务通过 series[].color 指定的颜色；
   * 选择器限定在画布内，不影响图例色块。
   */
}
.x-bar-chart--canvas:has(.x-bar-chart--bar.x-bar-chart-is-active) .x-bar-chart--bar:not(.x-bar-chart-is-active) .x-bar-chart--bar-shape {
  opacity: 0.45;
}

:root {
  --x-color-picker-color-mode-bg_active: var(--x-color-primary-subtle);
  --x-color-picker-panel-bg: var(--x-color-bg-elevated);
  --x-color-picker-panel-shadow: var(--x-shadow-popover);
  --x-color-picker-border: var(--x-color-border-subtle);
  --x-color-picker-color-text: var(--x-color-text-2);
  --x-color-picker-color-text_active: var(--x-color-primary-text);
  --x-color-picker-color-handle-bg: var(--x-color-bg-surface);
  --x-color-picker-color-handle-border: var(--x-color-neutral-5);
  --x-color-picker-color-trigger-bg: var(--x-color-bg-surface);
  --x-color-picker-color-swatch_border: var(--x-color-neutral-4);
  --x-color-picker-color-swatch_active: var(--x-color-primary-text);
  --x-color-picker-color-swatch-check: var(--x-color-white);
  /* 透明度棋盘格：两色交替，随主题变化 */
  --x-color-picker-checker: var(--x-color-fill-2);
  --x-color-picker-checker-alt: var(--x-color-bg-surface);
  --x-color-picker-border-radius: var(--x-border-radius-medium);
  --x-color-picker-border-radius-swatch: var(--x-border-radius-small);
  --x-color-picker-size-panel-width: 240px;
  --x-color-picker-size-sv-height: 140px;
  --x-color-picker-size-slider-height: 10px;
  --x-color-picker-size-handle: 12px;
  --x-color-picker-size-trigger: var(--x-size-8);
  --x-color-picker-size-trigger-color: var(--x-size-5);
  --x-color-picker-size-swatch: var(--x-size-6);
  --x-color-picker-spacing-panel: var(--x-spacing-4);
  --x-color-picker-spacing-slider: var(--x-spacing-4);
  --x-color-picker-spacing-inputs: var(--x-spacing-3);
  --x-color-picker-spacing-swatches: var(--x-spacing-2);
  --x-color-picker-font-size: var(--x-font-size-body-1);
}

.x-color-picker {
  display: inline-block;
  font-size: var(--x-color-picker-font-size);
}
.x-color-picker.x-color-picker-size-mini {
  --x-color-picker-size-trigger: var(--x-input-size-mini-height);
}
.x-color-picker.x-color-picker-size-small {
  --x-color-picker-size-trigger: var(--x-input-size-small-height);
}
.x-color-picker.x-color-picker-size-medium {
  --x-color-picker-size-trigger: var(--x-input-size-medium-height);
}
.x-color-picker.x-color-picker-size-large {
  --x-color-picker-size-trigger: var(--x-input-size-large-height);
}
.x-color-picker {
  /* 触发器：单色块按钮 */
}
.x-color-picker--trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-color-picker-size-trigger);
  height: var(--x-color-picker-size-trigger);
  padding: 0;
  background-color: var(--x-color-picker-color-trigger-bg);
  border: 1px solid var(--x-color-picker-border);
  border-radius: var(--x-color-picker-border-radius-swatch);
  cursor: pointer;
  transition: border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-color-picker--trigger:hover {
  border-color: var(--x-color-picker-color-text_active);
}
.x-color-picker--trigger:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 1px;
}
.x-color-picker--trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.x-color-picker-error .x-color-picker--trigger {
  border-color: var(--x-color-danger-solid);
}
.x-color-picker {
  /* 带文字标签时的外层容器 */
}
.x-color-picker--trigger-wrapper {
  display: inline-flex;
  gap: var(--x-spacing-2);
  align-items: center;
}

.x-color-picker--trigger-label {
  color: var(--x-color-picker-color-text);
  /* 显式行高：与触发器色块等高对齐时不受宿主行高影响 */
  line-height: var(--x-line-height-base);
}

.x-color-picker--trigger-color {
  display: block;
  width: min(var(--x-color-picker-size-trigger-color), var(--x-color-picker-size-trigger) - 8px);
  height: min(var(--x-color-picker-size-trigger-color), var(--x-color-picker-size-trigger) - 8px);
  border-radius: var(--x-border-radius-small);
}

.x-color-picker {
  /* 面板 */
}
.x-color-picker--panel {
  box-sizing: border-box;
  width: var(--x-color-picker-size-panel-width);
  overflow: hidden;
  color: var(--x-color-picker-color-text);
  background-color: var(--x-color-picker-panel-bg);
  border-radius: var(--x-color-picker-border-radius);
  box-shadow: var(--x-color-picker-panel-shadow);
}

.x-color-picker--panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--x-color-picker-spacing-slider);
  padding: var(--x-color-picker-spacing-panel);
}

.x-color-picker {
  /* 饱和度 / 明度取色区 */
}
.x-color-picker--sv {
  position: relative;
  height: var(--x-color-picker-size-sv-height);
  border-radius: var(--x-color-picker-border-radius-swatch);
  cursor: crosshair;
  touch-action: none;
  /* 拖拽态由组件在元素上直接加状态类 */
}
.x-color-picker--sv.x-color-picker-is-dragging {
  cursor: grabbing;
}
.x-color-picker--sv:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}

.x-color-picker {
  /*
   * 两层渐变叠加：横向「白 → 透明」表达饱和度，
   * 纵向「透明 → 黑」表达明度；底色是当前色相的纯色。
   */
}
.x-color-picker--sv-white {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--x-color-white), var(--x-color-transparent));
  border-radius: inherit;
}

.x-color-picker--sv-black {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--x-color-black), var(--x-color-transparent));
  border-radius: inherit;
}

.x-color-picker--sv-handler {
  position: absolute;
  box-sizing: border-box;
  width: var(--x-color-picker-size-handle);
  height: var(--x-color-picker-size-handle);
  background-color: var(--x-color-picker-color-handle-bg);
  border: 2px solid var(--x-color-picker-color-handle-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--x-color-picker-color-handle-border);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.x-color-picker--sliders {
  display: flex;
  flex-direction: column;
  gap: var(--x-color-picker-spacing-inputs);
}

.x-color-picker {
  /* 色相条 / 透明度条 */
}
.x-color-picker--slider {
  padding: 0;
  cursor: pointer;
  touch-action: none;
}
.x-color-picker--slider:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}

.x-color-picker--slider-track {
  position: relative;
  height: var(--x-color-picker-size-slider-height);
  border-radius: var(--x-border-radius-small);
}

.x-color-picker--slider-handler {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  width: var(--x-color-picker-size-handle);
  height: var(--x-color-picker-size-handle);
  background-color: var(--x-color-picker-color-handle-bg);
  border: 2px solid var(--x-color-picker-color-handle-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--x-color-picker-color-handle-border);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.x-color-picker {
  /* 格式切换 */
}
.x-color-picker--modes {
  display: flex;
  gap: var(--x-spacing-1);
}

.x-color-picker--mode {
  flex: 1;
  padding: var(--x-spacing-1) var(--x-spacing-2);
  color: var(--x-color-picker-color-text);
  font-size: var(--x-color-picker-font-size);
  /* 显式行高：避免继承宿主行高导致格式切换按钮高度随项目变化 */
  line-height: var(--x-line-height-base);
  background-color: var(--x-color-transparent);
  border: none;
  border-radius: var(--x-border-radius-small);
  cursor: pointer;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-color-picker--mode:hover:not(:disabled) {
  background-color: var(--x-color-fill-2);
}
.x-color-picker--mode:disabled {
  cursor: not-allowed;
}
.x-color-picker--mode.x-color-picker-is-active {
  color: var(--x-color-picker-color-text_active);
  background-color: var(--x-color-picker-color-mode-bg_active);
}

.x-color-picker {
  /* 输入区 */
}
.x-color-picker--inputs {
  display: flex;
  gap: var(--x-color-picker-spacing-inputs);
  align-items: center;
}

.x-color-picker--channel {
  flex: 1;
  min-width: 0;
}

.x-color-picker {
  /* 预设色块 */
}
.x-color-picker--swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-color-picker-spacing-swatches);
}

.x-color-picker--swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-color-picker-size-swatch);
  height: var(--x-color-picker-size-swatch);
  padding: 0;
  color: var(--x-color-picker-color-swatch-check);
  border: 1px solid var(--x-color-picker-color-swatch_border);
  border-radius: var(--x-color-picker-border-radius-swatch);
  cursor: pointer;
  transition: transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-color-picker--swatch:hover:not(:disabled) {
  transform: scale(1.1);
}
.x-color-picker--swatch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.x-color-picker--swatch.x-color-picker-is-active {
  box-shadow: 0 0 0 1px var(--x-color-picker-color-swatch_active);
}
.x-color-picker--swatch .x-icon {
  width: var(--x-size-3);
  height: var(--x-size-3);
  font-size: var(--x-size-3);
}

.x-color-picker {
  /* 底部操作区 */
}
.x-color-picker--panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--x-color-picker-spacing-panel);
  padding-top: 0;
}

:root {
  /*
   * 默认/信息灰按钮背景配方由主题层提供：
   * 亮色接近白底并轻微加深，暗色沿用轻微提亮。
   * 避免全局 neutral 灰阶的跨度让按下态过重。
   */
  --x-button-color-text-default: var(--x-color-text-primary);
  --x-button-color-border-default: var(--x-color-border-default);
  --x-button-color-bg-default-subtle: var(--x-button-color-bg-default);
  --x-button-color-bg-default-subtle-hover: var(--x-button-color-bg-default-hover);
  --x-button-color-bg-default-subtle-active: var(--x-button-color-bg-default-active);
  --x-button-color-text-solid-default: var(--x-color-white);
  --x-button-color-wave-default: var(--x-button-color-border-default);
  --x-button-color-wave-primary: var(--x-button-color-bg-primary-solid);
  --x-button-color-wave-success: var(--x-button-color-bg-success-solid);
  --x-button-color-wave-warning: var(--x-button-color-bg-warning-solid);
  --x-button-color-wave-strong: var(--x-button-color-bg-strong-solid);
  --x-button-color-wave-danger: var(--x-button-color-bg-danger-solid);
  --x-button-color-wave-info: var(--x-button-color-text-info);
  --x-button-wave-opacity-weak: 0.12;
  --x-button-wave-opacity-strong: 0.18;
  --x-button-wave-spread: 6px;
  /*
   * 实色按钮统一白字（对齐 Arco/AntD 的通用做法，用户 2026-10-01 确认）。
   * 实心底色恒定不随主题翻转，因此文字也不随主题翻转。
   * 对比度：primary 5.00、danger 4.75 达标；success 3.18 / strong 2.49 /
   * warning 1.73 受品牌种子亮度限制，与参考实现同水平（Arco success 2.78、
   * Arco 橙 2.57、AntD warning 1.90），由 check-contrast 的分层阈值守护。
   */
  --x-button-color-text-solid: var(--x-color-white);
  --x-button-color-text-solid-primary: var(--x-color-white);
  --x-button-color-text-solid-success: var(--x-color-white);
  --x-button-color-text-solid-warning: var(--x-color-white);
  --x-button-color-text-solid-strong: var(--x-color-white);
  --x-button-color-text-solid-danger: var(--x-color-white);
  --x-button-color-text-solid-info: var(--x-color-white);
  /*
   * 彩色文字（subtle / outline / text）使用按钮自己的文字角色
   * --x-button-color-text-<family>（定义见 _styles/theme-light.scss）。
   * 该角色与全局正文角色分离，亮色主题沿用品牌主色，暗色由
   * theme-dark 生成器配对各族可读的亮色档。对比度按 check-contrast 中
   * Arco 同级按钮角色的分层阈值守护。
   */
  --x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);
  --x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);
  --x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);
  --x-button-color-bg-primary-solid: var(--x-color-primary-solid);
  --x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);
  --x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);
  --x-button-color-text-primary: var(--x-color-primary-button-text);
  --x-button-color-border-primary: var(--x-color-primary-solid);
  --x-button-color-bg-success-subtle: var(--x-color-success-subtle);
  --x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);
  --x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);
  --x-button-color-bg-success-solid: var(--x-color-success-solid);
  --x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);
  --x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);
  --x-button-color-text-success: var(--x-color-success-button-text);
  --x-button-color-border-success: var(--x-color-success-solid);
  --x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);
  --x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);
  --x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);
  --x-button-color-bg-warning-solid: var(--x-color-warning-solid);
  --x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);
  --x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);
  --x-button-color-text-warning: var(--x-color-warning-button-text);
  --x-button-color-border-warning: var(--x-color-warning-solid);
  --x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);
  --x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);
  --x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);
  /*
   * danger 实色直接用种子 #e02225（白字 4.75:1 直接达标，无需压暗特例）。
   * 与其他状态一致：底恒定不翻转，hover 混白 8%、active 混恒定深 10%。
   */
  --x-button-color-bg-danger-solid: var(--x-color-danger-solid);
  --x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);
  --x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);
  --x-button-color-text-danger: var(--x-color-danger-button-text);
  --x-button-color-border-danger: var(--x-color-danger-solid);
  --x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);
  --x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);
  --x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);
  --x-button-color-bg-strong-solid: var(--x-color-strong-solid);
  --x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);
  --x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);
  --x-button-color-text-strong: var(--x-color-strong-button-text);
  --x-button-color-border-strong: var(--x-color-strong-solid);
  --x-button-color-bg-info-subtle: var(--x-button-color-bg-default);
  --x-button-color-bg-info-subtle-hover: var(--x-button-color-bg-default-hover);
  --x-button-color-bg-info-subtle-active: var(--x-button-color-bg-default-active);
  --x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);
  --x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);
  --x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);
  --x-button-color-text-info: var(--x-color-text-secondary);
  --x-button-color-border-info: var(--x-color-neutral-5);
}

.x-button {
  --x-button-width: auto;
  --x-button-font-weight: 500;
  --x-button-opacity: 1;
  --x-button-wave-opacity: var(--x-button-wave-opacity-weak);
  --x-button-border-style: solid;
  --x-button-border-color: var(--x-button-color-border-default);
  --x-button-background-color: var(--x-button-color-bg-default);
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-padding: 0 0;
  --x-button-mini-height: var(--x-size-mini);
  --x-button-mini-font-size: 12px;
  --x-button-mini-padding: 0 8px;
  --x-button-mini-border-radius: var(--x-border-radius);
  --x-button-small-height: var(--x-size-small);
  --x-button-small-font-size: 13px;
  --x-button-small-padding: 0 10px;
  --x-button-small-border-radius: var(--x-border-radius);
  --x-button-medium-height: var(--x-size-medium);
  --x-button-medium-font-size: 14px;
  --x-button-medium-padding: 0 14px;
  --x-button-medium-border-radius: var(--x-border-radius);
  --x-button-large-height: var(--x-size-large);
  --x-button-large-font-size: 15px;
  --x-button-large-padding: 0 16px;
  --x-button-large-border-radius: calc(var(--x-border-radius) + 2px);
  --x-button-huge-height: calc(var(--x-size-huge) - 2px);
  --x-button-huge-font-size: 16px;
  --x-button-huge-font-weight: 500;
  --x-button-huge-padding: 0 20px;
  --x-button-huge-border-radius: calc(var(--x-border-radius) + 2px);
}
.x-button {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-hover);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-active);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin: 0;
  border-style: var(--x-button-border-style);
  border-width: 1px;
  border-color: var(--x-button-border-color);
  border-radius: var(--x-button-border-radius);
  padding: var(--x-button-padding);
  width: var(--x-button-width);
  height: var(--x-button-height);
  color: var(--x-button-text-color);
  font-family: inherit;
  font-size: var(--x-button-font-size);
  font-weight: var(--x-button-font-weight);
  /*
   * 行高必须显式声明：否则会继承宿主（如 body）的行高，
   * 导致同一按钮在不同项目里文案垂直位置不一致。实测宿主行高设为 3 时，
   * 按钮内容盒会涨到 42px（按钮本身固定 32px）；设为 1 时只有 14px。
   * Arco 同样在按钮根节点声明 @line-height-base。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  background-color: var(--x-button-background-color);
  opacity: var(--x-button-opacity);
  outline: none;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  box-sizing: border-box;
  appearance: none;
  user-select: none;
  vertical-align: bottom;
  cursor: pointer;
}
.x-button:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
}
.x-button.x-button-mini, .x-button.x-button-small {
  line-height: 1;
}
.x-button > .x-wave {
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--x-button-wave-opacity);
  box-shadow: 0 0 0 0 var(--x-wave-color, currentColor);
  transition: box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease), opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear);
}
.x-button > .x-wave-active {
  opacity: 0;
  box-shadow: 0 0 0 var(--x-button-wave-spread) var(--x-wave-color, currentColor);
}
@media (prefers-reduced-motion: reduce) {
  .x-button {
    transition: none;
  }
  .x-button > .x-wave {
    display: none;
  }
}
.x-button--prefix {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

.x-button--suffix {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
}

.x-button--loading {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .x-button--loading {
    transition: none;
  }
}

.x-button--content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.x-button.x-button-empty-content > .x-button--content {
  display: none;
}
.x-button.x-button-empty-content > .x-button--prefix {
  margin-right: 0;
}
.x-button.x-button-empty-content > .x-button--suffix {
  margin-left: 0;
}
.x-button.x-button-empty-content > .x-button--prefix ~ .x-button--prefix,
.x-button.x-button-empty-content > .x-button--prefix ~ .x-button--suffix {
  margin-left: 4px;
}
.x-button.x-button-appearance-default.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
}
.x-button.x-button-appearance-default.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-default, .x-button.x-button-appearance-default.x-button-color-default:not(:disabled):hover, .x-button.x-button-appearance-default.x-button-color-default:not(:disabled):active {
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-default.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
}
.x-button.x-button-appearance-default.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-primary {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
}
.x-button.x-button-appearance-default.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-success {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
}
.x-button.x-button-appearance-default.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-warning {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
}
.x-button.x-button-appearance-default.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-strong {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
}
.x-button.x-button-appearance-default.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-danger {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
}
.x-button.x-button-appearance-default.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-default.x-button-color-info {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-solid {
  --x-button-wave-opacity: var(--x-button-wave-opacity-strong);
}
.x-button.x-button-appearance-solid.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
  --x-button-wave-color: var(--x-button-color-bg-default-solid);
}
.x-button.x-button-appearance-solid.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-solid-default);
  --x-button-background-color: var(--x-button-color-bg-default-solid);
  --x-button-border-color: var(--x-button-color-bg-default-solid);
}
.x-button.x-button-appearance-solid.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-default);
  --x-button-background-color: var(--x-button-color-bg-default-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-default-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-default);
  --x-button-background-color: var(--x-button-color-bg-default-solid-active);
  --x-button-border-color: var(--x-button-color-bg-default-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
  --x-button-wave-color: var(--x-button-color-bg-primary-solid);
}
.x-button.x-button-appearance-solid.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-solid-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-solid);
  --x-button-border-color: var(--x-button-color-bg-primary-solid);
}
.x-button.x-button-appearance-solid.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-primary-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-solid-active);
  --x-button-border-color: var(--x-button-color-bg-primary-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
  --x-button-wave-color: var(--x-button-color-bg-success-solid);
}
.x-button.x-button-appearance-solid.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-solid-success);
  --x-button-background-color: var(--x-button-color-bg-success-solid);
  --x-button-border-color: var(--x-button-color-bg-success-solid);
}
.x-button.x-button-appearance-solid.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-success);
  --x-button-background-color: var(--x-button-color-bg-success-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-success-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-success);
  --x-button-background-color: var(--x-button-color-bg-success-solid-active);
  --x-button-border-color: var(--x-button-color-bg-success-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
  --x-button-wave-color: var(--x-button-color-bg-warning-solid);
}
.x-button.x-button-appearance-solid.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-solid-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-solid);
  --x-button-border-color: var(--x-button-color-bg-warning-solid);
}
.x-button.x-button-appearance-solid.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-warning-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-solid-active);
  --x-button-border-color: var(--x-button-color-bg-warning-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
  --x-button-wave-color: var(--x-button-color-bg-strong-solid);
}
.x-button.x-button-appearance-solid.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-solid-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-solid);
  --x-button-border-color: var(--x-button-color-bg-strong-solid);
}
.x-button.x-button-appearance-solid.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-strong-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-solid-active);
  --x-button-border-color: var(--x-button-color-bg-strong-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
  --x-button-wave-color: var(--x-button-color-bg-danger-solid);
}
.x-button.x-button-appearance-solid.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-solid-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-solid);
  --x-button-border-color: var(--x-button-color-bg-danger-solid);
}
.x-button.x-button-appearance-solid.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-danger-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-solid-active);
  --x-button-border-color: var(--x-button-color-bg-danger-solid-active);
}
.x-button.x-button-appearance-solid.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
  --x-button-wave-color: var(--x-button-color-bg-info-solid);
}
.x-button.x-button-appearance-solid.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-solid-info);
  --x-button-background-color: var(--x-button-color-bg-info-solid);
  --x-button-border-color: var(--x-button-color-bg-info-solid);
}
.x-button.x-button-appearance-solid.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-solid-info);
  --x-button-background-color: var(--x-button-color-bg-info-solid-hover);
  --x-button-border-color: var(--x-button-color-bg-info-solid-hover);
}
.x-button.x-button-appearance-solid.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-solid-info);
  --x-button-background-color: var(--x-button-color-bg-info-solid-active);
  --x-button-border-color: var(--x-button-color-bg-info-solid-active);
}
.x-button.x-button-appearance-subtle.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
}
.x-button.x-button-appearance-subtle.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-default {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
}
.x-button.x-button-appearance-subtle.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-primary {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
}
.x-button.x-button-appearance-subtle.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-success {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
}
.x-button.x-button-appearance-subtle.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-warning {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
}
.x-button.x-button-appearance-subtle.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-strong {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
}
.x-button.x-button-appearance-subtle.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-danger {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
}
.x-button.x-button-appearance-subtle.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle-hover);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-subtle-active);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-subtle.x-button-color-info {
  --x-button-group-separator-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-outline {
  --x-button-wave-opacity: var(--x-button-wave-opacity-strong);
}
.x-button.x-button-appearance-outline.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-outline.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-outline-hover);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-outline.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-outline-active);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-outline.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-outline.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-outline-hover);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-outline.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-outline-active);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-outline.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-outline.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-outline-hover);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-outline.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-outline-active);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-outline.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-outline.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-outline-hover);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-outline.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-outline-active);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-outline.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-outline.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-outline-hover);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-outline.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-outline-active);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-outline.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-outline.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-outline-hover);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-outline.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-outline-active);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-outline.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
  --x-button-border-style: solid;
}
.x-button.x-button-appearance-outline.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-outline.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-outline-hover);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-outline.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-outline-active);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-dashed {
  --x-button-wave-opacity: var(--x-button-wave-opacity-strong);
}
.x-button.x-button-appearance-dashed.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-dashed.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-outline-hover);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-dashed.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-button-color-bg-default-outline-active);
  --x-button-border-color: var(--x-button-color-border-default);
}
.x-button.x-button-appearance-dashed.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-dashed.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-outline-hover);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-dashed.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-button-color-bg-primary-outline-active);
  --x-button-border-color: var(--x-button-color-border-primary);
}
.x-button.x-button-appearance-dashed.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-dashed.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-outline-hover);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-dashed.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-button-color-bg-success-outline-active);
  --x-button-border-color: var(--x-button-color-border-success);
}
.x-button.x-button-appearance-dashed.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-dashed.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-outline-hover);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-dashed.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-button-color-bg-warning-outline-active);
  --x-button-border-color: var(--x-button-color-border-warning);
}
.x-button.x-button-appearance-dashed.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-dashed.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-outline-hover);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-dashed.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-button-color-bg-strong-outline-active);
  --x-button-border-color: var(--x-button-color-border-strong);
}
.x-button.x-button-appearance-dashed.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-dashed.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-outline-hover);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-dashed.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-button-color-bg-danger-outline-active);
  --x-button-border-color: var(--x-button-color-border-danger);
}
.x-button.x-button-appearance-dashed.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
  --x-button-border-style: dashed;
}
.x-button.x-button-appearance-dashed.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-dashed.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-outline-hover);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-dashed.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-button-color-bg-info-outline-active);
  --x-button-border-color: var(--x-button-color-border-info);
}
.x-button.x-button-appearance-text.x-button-color-default {
  --x-button-wave-color: var(--x-button-color-wave-default);
}
.x-button.x-button-appearance-text.x-button-color-default {
  --x-button-text-color: var(--x-button-color-text-default);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-default:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-default-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-default:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-default-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-primary {
  --x-button-wave-color: var(--x-button-color-wave-primary);
}
.x-button.x-button-appearance-text.x-button-color-primary {
  --x-button-text-color: var(--x-button-color-text-primary);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-primary:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-primary-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-primary:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-primary-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-success {
  --x-button-wave-color: var(--x-button-color-wave-success);
}
.x-button.x-button-appearance-text.x-button-color-success {
  --x-button-text-color: var(--x-button-color-text-success);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-success:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-success-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-success:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-success-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-warning {
  --x-button-wave-color: var(--x-button-color-wave-warning);
}
.x-button.x-button-appearance-text.x-button-color-warning {
  --x-button-text-color: var(--x-button-color-text-warning);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-warning:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-warning-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-warning:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-warning-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-strong {
  --x-button-wave-color: var(--x-button-color-wave-strong);
}
.x-button.x-button-appearance-text.x-button-color-strong {
  --x-button-text-color: var(--x-button-color-text-strong);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-strong:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-strong-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-strong:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-strong-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-danger {
  --x-button-wave-color: var(--x-button-color-wave-danger);
}
.x-button.x-button-appearance-text.x-button-color-danger {
  --x-button-text-color: var(--x-button-color-text-danger);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-danger:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-danger-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-danger:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-danger-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-info {
  --x-button-wave-color: var(--x-button-color-wave-info);
}
.x-button.x-button-appearance-text.x-button-color-info {
  --x-button-text-color: var(--x-button-color-text-info);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-info:not(:disabled):hover {
  --x-button-text-color: var(--x-button-color-text-info-hover);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-appearance-text.x-button-color-info:not(:disabled):active {
  --x-button-text-color: var(--x-button-color-text-info-active);
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
}
.x-button.x-button-hide-border, .x-button.x-button-hide-border:not(:disabled):hover, .x-button.x-button-hide-border:not(:disabled):active {
  border-color: var(--x-color-transparent);
}
.x-button-is-disabled {
  --x-button-opacity: 0.4;
  cursor: not-allowed;
}

.x-button-block {
  display: flex;
  width: 100%;
}

.x-button-loading {
  /*
   * 加载态不降整体透明度。
   *
   * opacity 会把文字与背景同比例混合到宿主底色，使二者对比向 1 收敛；
   * 对"白字 + 浅色实底"（success/warning/strong）伤害最大：
   * warning 白字本身 1.73:1，乘 0.76 后只剩 1.54:1，几乎不可读。
   * 这与 AntD 的做法一致——loading 由 spinner 和交互拦截表达，
   * 不靠降低不透明度。
   * 该约束由 check-contrast 的 loading 检查守护。
   */
  cursor: default;
}

.x-button-loading-fill > .x-button--loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  color: var(--x-button-text-color);
  background-color: var(--x-button-background-color);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .x-button-loading-fill > .x-button--loading {
    transition: none;
  }
}
.x-button-loading-fill.x-button-loading > .x-button--prefix,
.x-button-loading-fill.x-button-loading > .x-button--content,
.x-button-loading-fill.x-button-loading > .x-button--suffix {
  opacity: 0;
}

.x-button-narrow {
  --x-button-mini-padding: 0 0;
  --x-button-small-padding: 0 0;
  --x-button-medium-padding: 0 0;
  --x-button-large-padding: 0 0;
  --x-button-huge-padding: 0 0;
}

.x-button-mini {
  --x-button-height: var(--x-button-mini-height);
  --x-button-font-size: var(--x-button-mini-font-size);
  --x-button-padding: var(--x-button-mini-padding);
  --x-button-border-radius: var(--x-button-mini-border-radius);
}

.x-button-small {
  --x-button-height: var(--x-button-small-height);
  --x-button-font-size: var(--x-button-small-font-size);
  --x-button-padding: var(--x-button-small-padding);
  --x-button-border-radius: var(--x-button-small-border-radius);
}

.x-button-medium {
  --x-button-height: var(--x-button-medium-height);
  --x-button-font-size: var(--x-button-medium-font-size);
  --x-button-padding: var(--x-button-medium-padding);
  --x-button-border-radius: var(--x-button-medium-border-radius);
}

.x-button-large {
  --x-button-height: var(--x-button-large-height);
  --x-button-font-size: var(--x-button-large-font-size);
  --x-button-padding: var(--x-button-large-padding);
  --x-button-border-radius: var(--x-button-large-border-radius);
}

.x-button-huge {
  --x-button-height: var(--x-button-huge-height);
  --x-button-font-size: var(--x-button-huge-font-size);
  --x-button-font-weight: var(--x-button-huge-font-weight);
  --x-button-padding: var(--x-button-huge-padding);
  --x-button-border-radius: var(--x-button-huge-border-radius);
  line-height: 1.5;
}

.x-button-round {
  --x-button-border-radius: 999px;
}

.x-button-square {
  --x-button-border-radius: var(--x-border-radius-none);
}

.x-button.x-button-only-icon {
  --x-button-width: var(--x-button-height);
  --x-button-padding: 0;
}
.x-button-circle {
  --x-button-width: var(--x-button-height);
  --x-button-padding: 0;
  --x-button-border-radius: 100%;
  width: var(--x-button-height);
  height: var(--x-button-height);
}

.x-button-group {
  display: flex;
  width: min-content;
}
.x-button-group > .x-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-button-group > .x-button:not(:first-child) {
  margin-left: -1px;
}
.x-button-group > .x-button:not(:first-child).x-button-has-border {
  border-left-color: var(--x-button-group-separator-color, var(--x-button-group-color-separator));
}
.x-button-group > .x-button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-button-group > .x-button:not(:disabled):hover {
  z-index: 1;
}
.x-button-group > .x-button:focus-visible {
  z-index: 2;
}

:root {
  --x-date-picker-panel-bg: var(--x-color-bg-popup);
  --x-date-picker-panel-border: var(--x-color-transparent);
  --x-date-picker-footer-border: var(--x-split-color);
  --x-date-picker-panel-radius: var(--x-border-radius-medium);
  --x-date-picker-panel-shadow: var(--x-picker-panel-shadow);
  --x-date-picker-panel-width: 280px;
  --x-date-picker-week-panel-width: 320px;
  --x-date-picker-range-width: calc(var(--x-date-picker-panel-width) * 2);
  --x-date-picker-cell-size: 32px;
  /* 日期圆圈尺寸；选中范围带按此高度绘制，使色带与圆圈齐平 */
  --x-date-picker-cell-inner-size: 24px;
  --x-date-picker-cell-gap: 0;
  --x-date-picker-cell-color: var(--x-color-text-2);
  --x-date-picker-cell-color-hover: var(--x-color-text-1);
  --x-date-picker-cell-bg-hover: var(--x-color-fill-1);
  --x-date-picker-cell-bg-range: var(--x-color-primary-light-1);
  /*
   * 范围内悬停：色带加深。
   *
   * 用调色板的 primary-2 而非 --x-color-primary-light-2——后者在
   * palette-aliases 里被别名成 light-1（同值），拿不到更深一档。
   * primary-2 在亮/暗两套调色板里都是相对 light-1 更实的一档
   * （亮色 #bfdbff 更深、暗色 #001892 更亮），符合两种主题的悬停方向。
   */
  --x-date-picker-cell-bg-range-hover: var(--x-color-primary-2);
  --x-date-picker-cell-bg-selected: var(--x-color-primary-6);
  --x-date-picker-cell-color-selected: var(--x-color-white);
  --x-date-picker-cell-color-disabled: var(--x-color-text-4);
  --x-date-picker-cell-color-out-view: var(--x-color-text-4);
  /*
   * 面板正文字号与同类浮层对齐。
   *
   * 原为 body-2（13px），偏离同项目 Select / Dropdown 弹层的 body-3（14px），
   * 也低于 Arco 日期格实测值（14px）。日期格、星期栏、标题统一用该值。
   */
  --x-date-picker-font-size: var(--x-font-size-body-3);
  /* 底部「今天 / 取消 / 确定」为面板主要操作，与正文同级而非更小 */
  --x-date-picker-action-font-size: var(--x-font-size-body-3);
  --x-date-picker-confirm-color: var(--x-color-primary-text);
  --x-date-picker-today-color: var(--x-color-primary-text);
}

.x-date-picker {
  width: 220px;
}
.x-date-picker-range {
  width: 270px;
}
.x-date-picker-datetime {
  width: 390px;
}
.x-date-picker--popup {
  line-height: var(--x-line-height-base);
}

.x-date-picker--panel {
  width: var(--x-date-picker-panel-width);
  overflow: hidden;
  color: var(--x-date-picker-cell-color);
  font-size: var(--x-date-picker-font-size);
  background: var(--x-date-picker-panel-bg);
  border: 1px solid var(--x-date-picker-panel-border);
  border-radius: var(--x-date-picker-panel-radius);
  box-shadow: var(--x-date-picker-panel-shadow);
}

.x-date-picker-mode-week {
  width: var(--x-date-picker-week-panel-width);
}

.x-date-picker--popup-inner {
  overflow: hidden;
  background: var(--x-date-picker-panel-bg);
  border: 1px solid var(--x-date-picker-panel-border);
  border-radius: var(--x-date-picker-panel-radius);
  box-shadow: var(--x-date-picker-panel-shadow);
}

.x-date-picker--panels {
  display: flex;
  gap: 0;
}

.x-date-picker--datetime-body {
  display: flex;
  align-items: stretch;
}
.x-date-picker--datetime-body .x-date-picker--panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.x-date-picker--time-side {
  width: 180px;
  border-left: 1px solid var(--x-date-picker-footer-border);
}
.x-date-picker--time-side .x-time-picker--panel {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.x-date-picker--time-side .x-time-picker--columns {
  width: 100%;
}
.x-date-picker--time-side .x-time-picker--column {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 234px;
}

.x-date-picker--time-title {
  height: 45px;
  color: var(--x-color-text-1);
  font-weight: 500;
  line-height: 45px;
  text-align: center;
  border-bottom: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--range-time-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.x-date-picker--range-time-panel .x-time-picker--panel {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.x-date-picker--range-time-panel .x-time-picker--columns {
  width: 100%;
}
.x-date-picker--range-time-panel .x-time-picker--column {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 196px;
}

.x-date-picker--range-time-column {
  min-width: 0;
}
.x-date-picker--range-time-column + .x-date-picker--range-time-column {
  border-left: 1px solid var(--x-date-picker-footer-border);
}
.x-date-picker--range-time-column {
  /*
   * 当前编辑侧高亮。
   *
   * 模板在 rangePanelMode === 'time' 时会给正在编辑的一侧加
   * `x-date-picker-is-active`（DatePicker.vue 的 focusedIndex），
   * 但此前没有任何样式消费该状态，用户无法分辨正在改开始还是结束时间。
   * 与独立 time-range 面板的 `.x-time-picker-is-active` 保持同一手法。
   */
}
.x-date-picker--range-time-column.x-date-picker-is-active {
  background: var(--x-color-fill-1);
}
.x-date-picker--range-time-column.x-date-picker-is-active .x-date-picker--time-title {
  color: var(--x-color-text-1);
}

.x-date-picker--range-datetime-footer {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr 1fr;
  border-top: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--datetime-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 4px 8px;
  border-top: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--range-datetime-item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: var(--x-color-text-2);
  font: inherit;
  font-size: var(--x-font-size-body-1);
  line-height: 1;
  text-align: center;
  background: var(--x-color-transparent);
  border: none;
  cursor: pointer;
}
.x-date-picker--range-datetime-item + .x-date-picker--range-datetime-item {
  border-left: 1px solid var(--x-date-picker-footer-border);
}
.x-date-picker--range-datetime-item span,
.x-date-picker--range-datetime-item strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-date-picker--range-datetime-item span {
  font-weight: 400;
}
.x-date-picker--range-datetime-item strong {
  color: var(--x-color-text-1);
  font-weight: 400;
}
.x-date-picker--range-datetime-item:hover, .x-date-picker--range-datetime-item.x-date-picker-is-active {
  background: var(--x-color-fill-1);
}

.x-date-picker-popup-range {
  width: var(--x-date-picker-range-width);
}
.x-date-picker-popup-range .x-date-picker--panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.x-date-picker-popup-datetime {
  display: block;
}

.x-date-picker--header {
  display: grid;
  grid-template-columns: 28px 28px 1fr 28px 28px;
  gap: 2px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--header-left {
  grid-template-columns: 28px 28px 1fr;
}

.x-date-picker--header-right {
  grid-template-columns: 1fr 28px 28px;
}

.x-date-picker--header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--x-color-text-2);
  font: inherit;
  background: var(--x-color-transparent);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  /*
   * 图标显式定尺寸。
   *
   * 原先是文本字符 `«` `‹` `›` `»`，字宽随字体回退变化（实测单箭头仅 5px 宽、
   * 双箭头 7.6px），既不统一也不可控。换成 48 线性图标后按 Header 按钮
   * 尺寸档定 14px，与 Input 后缀图标规格一致。
   */
}
.x-date-picker--header-btn > .x-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
.x-date-picker--header-btn:hover, .x-date-picker--header-btn:focus-visible {
  color: var(--x-color-text-1);
  background: var(--x-color-fill-1);
  outline: none;
}

.x-date-picker--header-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 28px;
  color: var(--x-color-text-1);
  font: inherit;
  font-weight: 500;
  background: var(--x-color-transparent);
  border: none;
  border-radius: 3px;
  text-align: center;
}

.x-date-picker--weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 12px 0;
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
  text-align: center;
}
.x-date-picker--weekdays span {
  height: 24px;
  line-height: 24px;
}
.x-date-picker--weekdays.x-date-picker-is-week-mode {
  grid-template-columns: 54px repeat(7, 1fr);
}

.x-date-picker--body {
  display: grid;
  column-gap: var(--x-date-picker-cell-gap);
  row-gap: 2px;
  padding: 8px 12px 10px;
}

.x-date-picker--row {
  display: contents;
}

.x-date-picker--body-date {
  grid-template-columns: repeat(7, 1fr);
  /*
   * 行首/行尾的色带收口。
   *
   * 日模式每一行是一段独立色带，跨行时需要左右收圆角，否则是生硬直角。
   * 不能用 week-start/week-end 类名——那两个类只在 mode="week" 下赋值
   * （见 utils.ts 的 `if (mode === 'week')`）。日模式是固定 7 列网格，
   * 用 :nth-child(7n+1) / :nth-child(7n) 定位行首行尾即可。
   */
}
.x-date-picker--body-date .x-date-picker--cell:nth-child(7n+1)::before {
  border-top-left-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
  border-bottom-left-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
}
.x-date-picker--body-date .x-date-picker--cell:nth-child(7n)::before {
  border-top-right-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
  border-bottom-right-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
}

.x-date-picker--body-week {
  grid-template-columns: 54px repeat(7, 1fr);
  /*
   * 周选择选中态：与「日期范围」共用同一套视觉语言。
   *
   * 基础 ::before 已经是一条与日期圆圈等高（24px）、垂直居中、
   * 两端可收圆角的色带（默认透明，日期范围用它画浅蓝色带）。
   * 这里复用它：选中周填浅蓝、行首行尾收圆角、周标签换成深色作锚点。
   *
   * 原先的实现是整个 32px 格子铺 `cell-bg-selected`（深蓝）+ 白字，
   * 一行下来是一块厚重的实心色块，既与范围选择的语言不一致，
   * 也让相邻周之间难以对比（用户反馈此处观感过重）。
   */
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected {
  color: var(--x-color-text-1);
  background: var(--x-color-transparent);
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::before {
  background: var(--x-date-picker-cell-bg-range);
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected .x-date-picker--cell-inner {
  color: inherit;
  background: var(--x-color-transparent);
}
.x-date-picker--body-week .x-date-picker--cell {
  /* 悬停整周：加深色带，与日期范围的悬停反馈同源 */
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:hover::before, .x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:focus-visible::before {
  background: var(--x-date-picker-cell-bg-range-hover);
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:hover .x-date-picker--cell-inner, .x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:focus-visible .x-date-picker--cell-inner {
  background: var(--x-color-transparent);
}
.x-date-picker--body-week .x-date-picker--cell {
  /* 行首（周标签列）左收口 */
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected::before {
  border-top-left-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
  border-bottom-left-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
}
.x-date-picker--body-week .x-date-picker--cell {
  /* 行尾（该周最后一天）右收口 */
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-end.x-date-picker-is-week-selected::before {
  border-top-right-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
  border-bottom-right-radius: calc(var(--x-date-picker-cell-inner-size) / 2);
}
.x-date-picker--body-week .x-date-picker--cell {
  /*
   * 周标签承担「选中锚点」职责——等价于日期范围两端的深色圆圈，
   * 让选中态在浅色带上依然一眼可辨。
   */
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected {
  color: var(--x-date-picker-cell-color-selected);
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected::before {
  background: var(--x-date-picker-cell-bg-selected);
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected .x-date-picker--cell-inner {
  color: inherit;
}
.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::after {
  opacity: 0;
}

.x-date-picker--body-month {
  grid-template-columns: repeat(3, 1fr);
}
.x-date-picker--body-month .x-date-picker--cell-inner {
  min-width: 48px;
  height: 24px;
  border-radius: 3px;
}

.x-date-picker--body-year {
  grid-template-columns: repeat(3, 1fr);
}
.x-date-picker--body-year .x-date-picker--cell-inner {
  min-width: 48px;
  height: 24px;
  border-radius: 3px;
}

.x-date-picker--body-quarter {
  grid-template-columns: repeat(2, 1fr);
}
.x-date-picker--body-quarter .x-date-picker--cell-inner {
  min-width: 48px;
  height: 24px;
  border-radius: 3px;
}

.x-date-picker--cell-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--x-date-picker-cell-inner-size);
  min-width: var(--x-date-picker-cell-inner-size);
  height: var(--x-date-picker-cell-inner-size);
  padding: 0;
  border-radius: 50%;
}

.x-date-picker--cell-date {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--x-date-picker-cell-size);
}

.x-date-picker--cell-lunar {
  display: none;
  max-width: 38px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--x-color-text-2);
  /* 12px 辅助文字使用 14px 行高，不再用透明度二次降低对比。 */
  font-size: var(--x-font-size-body-1);
  line-height: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x-date-picker--cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--x-date-picker-cell-size);
  padding: 0;
  color: var(--x-date-picker-cell-color);
  font: inherit;
  background: var(--x-color-transparent);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-date-picker--cell::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  z-index: 2;
  width: 4px;
  height: 4px;
  background: var(--x-date-picker-today-color);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  content: "";
  pointer-events: none;
}
.x-date-picker--cell {
  /*
   * 选中范围带。
   *
   * 原先直接给整个格子（36.4×32px）铺浅蓝底，于是有两个视觉问题：
   *   1. 行距只有 2px，多行范围连成一整块实心色块，缺少呼吸感；
   *   2. 起止格的圆角画在格子上，比内部 24px 的圆圈宽出约 6px，
   *      端点与圆圈对不齐，看起来是"色块顶着圆"。
   * 改为用 ::before 画一条与圆圈等高、垂直居中的带：
   *   - 行与行之间自然留出 8px 空隙；
   *   - 起止格从格子中线起收，端点落在圆圈中心之下，视觉上像从圆里长出来。
   */
}
.x-date-picker--cell::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 0;
  height: var(--x-date-picker-cell-inner-size);
  background: var(--x-color-transparent);
  transform: translateY(-50%);
  content: "";
  transition: background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-date-picker--cell:hover, .x-date-picker--cell:focus-visible {
  color: var(--x-date-picker-cell-color-hover);
  outline: none;
}
.x-date-picker--cell:hover .x-date-picker--cell-inner, .x-date-picker--cell:focus-visible .x-date-picker--cell-inner {
  background: var(--x-date-picker-cell-bg-hover);
}
.x-date-picker--cell.x-date-picker-is-today::after {
  opacity: 1;
}
.x-date-picker--cell.x-date-picker-is-in-range, .x-date-picker--cell.x-date-picker-is-range-start, .x-date-picker--cell.x-date-picker-is-range-end, .x-date-picker--cell.x-date-picker-is-in-preview-range, .x-date-picker--cell.x-date-picker-is-preview-range-start, .x-date-picker--cell.x-date-picker-is-preview-range-end {
  color: var(--x-color-text-1);
}
.x-date-picker--cell.x-date-picker-is-in-range::before, .x-date-picker--cell.x-date-picker-is-range-start::before, .x-date-picker--cell.x-date-picker-is-range-end::before, .x-date-picker--cell.x-date-picker-is-in-preview-range::before, .x-date-picker--cell.x-date-picker-is-preview-range-start::before, .x-date-picker--cell.x-date-picker-is-preview-range-end::before {
  background: var(--x-date-picker-cell-bg-range);
}
.x-date-picker--cell {
  /* 起止格：色带从格子中线起收，端点收进圆圈下方 */
}
.x-date-picker--cell.x-date-picker-is-range-start::before, .x-date-picker--cell.x-date-picker-is-preview-range-start::before {
  left: 50%;
}
.x-date-picker--cell.x-date-picker-is-range-end::before, .x-date-picker--cell.x-date-picker-is-preview-range-end::before {
  right: 50%;
}
.x-date-picker--cell {
  /* 单日范围（起止同格）：只留圆圈，不画带 */
}
.x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end::before {
  background: var(--x-color-transparent);
}
.x-date-picker--cell {
  /*
   * 范围内悬停：加深色带，而不是在蓝底上再叠一个灰圆。
   * 起止圈的实心蓝由后面的选中规则维持，此处只兜住内部格。
   */
}
.x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner {
  background: var(--x-color-transparent);
}
.x-date-picker--cell.x-date-picker-is-in-range:hover::before, .x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before, .x-date-picker--cell.x-date-picker-is-range-start:hover::before, .x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before, .x-date-picker--cell.x-date-picker-is-range-end:hover::before, .x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before {
  background: var(--x-date-picker-cell-bg-range-hover);
}
.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner {
  color: var(--x-date-picker-cell-color-selected);
  background: var(--x-date-picker-cell-bg-selected);
}
.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner .x-date-picker--cell-lunar, .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner .x-date-picker--cell-lunar, .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner .x-date-picker--cell-lunar {
  color: inherit;
}
.x-date-picker--cell.x-date-picker-is-selected::after, .x-date-picker--cell.x-date-picker-is-range-start::after, .x-date-picker--cell.x-date-picker-is-range-end::after {
  opacity: 0;
}
.x-date-picker--cell.x-date-picker-is-out-view {
  color: var(--x-date-picker-cell-color-out-view);
}
.x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-inner {
  background: var(--x-color-transparent);
}
.x-date-picker--cell.x-date-picker-is-out-view.x-date-picker-is-today::after {
  opacity: 0;
}
.x-date-picker--cell.x-date-picker-is-week-label {
  color: var(--x-color-text-3);
  cursor: default;
}
.x-date-picker--cell.x-date-picker-is-week-label .x-date-picker--cell-inner {
  width: auto;
  min-width: 50px;
  padding: 0;
  background: var(--x-color-transparent);
  border-radius: 0;
  white-space: nowrap;
}
.x-date-picker--cell.x-date-picker-is-week-start {
  justify-content: center;
}
.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-selected .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-start .x-date-picker--cell-inner, .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-end .x-date-picker--cell-inner {
  margin-left: 0;
}
.x-date-picker--cell {
  /*
   * 周模式的整行高亮由 body-week 段自行实现（格子自身底色 + 格子圆角），
   * 不经过本条 ::before 色带，故此处无需周模式相关规则。
   */
}
.x-date-picker--cell.x-date-picker-is-disabled, .x-date-picker--cell:disabled {
  color: var(--x-date-picker-cell-color-disabled);
  background: var(--x-color-transparent);
  cursor: not-allowed;
}
.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-inner, .x-date-picker--cell:disabled .x-date-picker--cell-inner {
  color: inherit;
  background: var(--x-color-transparent);
}
.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-lunar, .x-date-picker--cell:disabled .x-date-picker--cell-lunar {
  color: var(--x-date-picker-cell-color-disabled);
}
.x-date-picker--cell.x-date-picker-is-disabled::after, .x-date-picker--cell:disabled::after {
  opacity: 0;
}
.x-date-picker--cell.x-date-picker-is-week-label:disabled {
  color: var(--x-color-text-3);
  cursor: default;
}
.x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected:disabled {
  color: var(--x-date-picker-cell-color-selected);
}

.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--weekdays {
  padding-top: 6px;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--body-date {
  column-gap: 0;
  row-gap: 4px;
  padding-top: 6px;
  padding-bottom: 12px;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell {
  flex-direction: column;
  justify-content: flex-start;
  height: calc(var(--x-date-picker-cell-size) + 18px);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::after {
  top: calc(var(--x-date-picker-cell-size) - 7px);
  bottom: auto;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-date {
  width: 100%;
  flex: 0 0 var(--x-date-picker-cell-size);
  height: var(--x-date-picker-cell-size);
  border-radius: 0;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-inner {
  width: var(--x-date-picker-cell-inner-size);
  min-width: var(--x-date-picker-cell-inner-size);
  height: var(--x-date-picker-cell-inner-size);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-lunar {
  display: block;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-lunar {
  color: var(--x-color-text-4);
  opacity: 0.72;
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar {
  /* 范围内部悬停只加深色带；端点保留蓝色圆圈和白字。 */
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner {
  background: var(--x-color-transparent);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover::before,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover::before,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover::before,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before {
  background: var(--x-date-picker-cell-bg-range-hover);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar {
  /*
   * 农历文字位于固定日期区之后；圆圈和色带共用日期区中心，
   * 不随辅助文字、cell 插槽或字号 token 的变化发生垂直错位。
   */
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::before {
  top: calc(var(--x-date-picker-cell-size) / 2);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end {
  background: var(--x-color-transparent);
}
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range .x-date-picker--cell-date,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-date,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-date,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range .x-date-picker--cell-date,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start .x-date-picker--cell-date,
.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end .x-date-picker--cell-date {
  background: var(--x-color-transparent);
}

.x-date-picker--shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--range-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 6px 10px;
  border-top: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--range-shortcuts {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.x-date-picker--shortcut {
  height: 24px;
  padding: 0 8px;
  color: var(--x-color-text-2);
  font: inherit;
  font-size: var(--x-date-picker-action-font-size);
  background: var(--x-color-fill-1);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.x-date-picker--shortcut:hover, .x-date-picker--shortcut:focus-visible {
  color: var(--x-color-primary-text);
  background: var(--x-color-primary-light-1);
  outline: none;
}

.x-date-picker--extra {
  flex: 1 0 100%;
  min-width: 0;
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
}

.x-date-picker--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 4px 8px;
  border-top: 1px solid var(--x-date-picker-footer-border);
}

.x-date-picker--footer-btn {
  min-width: 36px;
  height: 24px;
  padding: 0 8px;
  color: var(--x-color-text-2);
  font: inherit;
  font-size: var(--x-date-picker-action-font-size);
  background: var(--x-color-transparent);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.x-date-picker--footer-btn:hover, .x-date-picker--footer-btn:focus-visible {
  background: var(--x-color-fill-1);
  outline: none;
}
.x-date-picker--footer-btn:disabled {
  color: var(--x-color-text-4);
  background: var(--x-color-transparent);
  cursor: not-allowed;
}

.x-date-picker--today {
  color: var(--x-date-picker-today-color);
}

.x-date-picker--confirm {
  color: var(--x-date-picker-confirm-color);
}

.x-drawer {
  --x-drawer-mask-background-color: var(--x-color-overlay-mask);
  --x-drawer-bg-color: var(--x-color-bg-elevated);
  --x-drawer-icon-color: var(--x-color-icon-elevated);
  --x-drawer-icon-color-dark: var(--x-color-icon-elevated-hover);
  --x-drawer-border-color: var(--x-color-bg-elevated-border);
  --x-drawer-title-color: var(--x-color-text-elevated-title);
  --x-drawer-shadow: var(--x-shadow-drawer);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.x-drawer.is-fixed {
  position: fixed;
}
.x-drawer.is-absolute {
  position: absolute;
}
.x-drawer--mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--x-drawer-mask-background-color);
}

.x-drawer--container {
  position: absolute;
  overflow: auto;
  background-color: var(--x-drawer-bg-color);
  box-shadow: var(--x-drawer-shadow);
  display: flex;
  flex-direction: column;
}
.x-drawer--container.is-right {
  top: 0;
  right: 0;
  bottom: 0;
}
.x-drawer--container.is-left {
  top: 0;
  bottom: 0;
  left: 0;
}
.x-drawer--container.is-top {
  top: 0;
  right: 0;
  left: 0;
}
.x-drawer--container.is-bottom {
  right: 0;
  bottom: 0;
  left: 0;
}

.x-drawer--close-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--x-drawer-icon-color);
  cursor: pointer;
  outline: none;
  transition: transform 0.3s ease;
}
.x-drawer--close-icon:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}
.x-drawer--close-icon:hover {
  color: var(--x-drawer-icon-color-dark);
  transform: rotate(90deg);
}

.x-drawer--header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--x-drawer-border-color);
  padding-left: 20px;
  height: 55px;
  box-sizing: border-box;
  line-height: 55px;
}

.x-drawer--title {
  font-size: 16px;
  font-weight: 500;
  color: var(--x-drawer-title-color);
  line-height: 1;
}

.x-drawer--footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding: 0 20px;
  height: 55px;
  background: var(--x-drawer-bg-color);
  border-top: 1px solid var(--x-drawer-border-color);
  box-sizing: border-box;
}

.x-drawer--body {
  box-sizing: border-box;
  min-height: 0;
}

.x-dialog {
  --x-mask-background-color: var(--x-color-overlay-mask);
  --x-dialog-radius: var(--x-border-radius-large);
  --x-dialog-bg-color: var(--x-color-bg-elevated);
  --x-dialog-text-color: var(--x-color-text-elevated-body);
  --x-dialog-title-color: var(--x-color-text-elevated-title);
  --x-dialog-close-icon-color: var(--x-color-icon-elevated);
  --x-dialog-close-icon-hover-bg: var(--x-color-icon-elevated-hover-bg);
  --x-dialog-close-icon-hover-color: var(--x-color-icon-elevated-hover);
  --x-dialog-shadow: var(--x-shadow-modal);
}

.x-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.x-dialog[style*="display: none"] {
  pointer-events: none;
}
.x-dialog--mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--x-mask-background-color);
}

.x-dialog--wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  text-align: center;
}
.x-dialog--wrapper.is-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-dialog--container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: var(--x-dialog-radius);
  background-color: var(--x-dialog-bg-color);
  box-shadow: var(--x-dialog-shadow);
  transition: all 0.15s;
  outline: none;
}
.x-dialog--container.is-fullscreen {
  display: inline-flex;
  border-radius: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  vertical-align: middle;
}
.x-dialog--container.is-fullscreen .x-dialog--footer {
  margin-top: auto;
}

.x-dialog--header {
  position: relative;
  padding: 25px 48px 0 25px;
  text-align: left;
  box-sizing: border-box;
}
.x-dialog--header-title {
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  color: var(--x-dialog-title-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.x-dialog--header.is-bottom-line {
  border-bottom: 1px solid var(--x-split-color);
  padding-bottom: 20px;
}

.x-dialog--body {
  padding: 15px 25px 15px;
  box-sizing: border-box;
  text-align: left;
}

.x-dialog--content {
  line-height: 1.6;
  color: var(--x-dialog-text-color);
  font-size: 14px;
}

.x-dialog--footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 18px 25px;
}

.x-dialog--close-icon {
  position: absolute;
  top: 22px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--x-border-radius-small);
  appearance: none;
  color: var(--x-dialog-close-icon-color);
  background: var(--x-color-transparent);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.x-dialog--close-icon:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}
.x-dialog--close-icon:hover {
  background-color: var(--x-dialog-close-icon-hover-bg);
  color: var(--x-dialog-close-icon-hover-color);
}

:root {
  /**********************************************
  * Popup Box
  **********************************************/
  --x-dropdown-max-height: var(--x-size-50);
  --x-dropdown-border-radius: var(--x-border-radius-medium);
  --x-dropdown-padding-vertical: var(--x-spacing-2);
  --x-dropdown-font-size: var(--x-font-size-body-3);
  --x-dropdown-color-bg: var(--x-color-bg-popup);
  --x-dropdown-color-border: var(--x-color-transparent);
  --x-dropdown-box-shadow: var(--x-shadow-popover);
  /**********************************************
   * Popup Options
   * status: default / disabled / selected / hover
   **********************************************/
  --x-dropdown-option-height: var(--x-size-9);
  --x-dropdown-option-padding-horizontal: var(--x-spacing-6);
  --x-dropdown-option-font-weight_selected: var(--x-font-weight-500);
  --x-dropdown-option-color-bg_default: var(--x-color-transparent);
  --x-dropdown-option-color-bg_hover: var(--x-color-fill-2);
  --x-dropdown-option-color-bg_selected: var(--x-color-transparent);
  --x-dropdown-option-color-bg_disabled: var(--x-color-transparent);
  --x-dropdown-option-color-text_default: var(--x-color-text-1);
  --x-dropdown-option-color-text_hover: var(--x-color-text-1);
  --x-dropdown-option-color-text_selected: var(--x-color-text-1);
  --x-dropdown-option-color-text_disabled: var(--x-color-text-4);
  --x-dropdown-group-title-height: var(--x-size-5);
  --x-dropdown-group-title-padding-horizontal: var(--x-spacing-6);
  --x-dropdown-group-title-padding-top: var(--x-spacing-4);
  --x-dropdown-group-title-margin-top: var(--x-spacing-4);
  --x-dropdown-group-title-font-size: var(--x-font-size-body-1);
  --x-dropdown-group-title-color-text: var(--x-color-text-3);
  --x-dropdown-margin-left-suffix-icon: var(--x-spacing-6);
}

.x-dropdown {
  box-sizing: border-box;
  padding: var(--x-dropdown-padding-vertical) 0;
  background-color: var(--x-dropdown-color-bg);
  border: 1px solid var(--x-dropdown-color-border);
  border-radius: var(--x-dropdown-border-radius);
  box-shadow: var(--x-dropdown-box-shadow);
}
.x-dropdown--list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.x-dropdown--list--wrapper {
  max-height: var(--x-dropdown-max-height);
  overflow-y: auto;
}

.x-dropdown--option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--x-dropdown-option-padding-horizontal);
  color: var(--x-dropdown-option-color-text_default);
  font-size: var(--x-dropdown-font-size);
  line-height: var(--x-dropdown-option-height);
  text-align: left;
  background-color: var(--x-dropdown-option-color-bg_default);
  cursor: pointer;
}
.x-dropdown--option--content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x-dropdown--option-has-suffix {
  justify-content: space-between;
}
.x-dropdown--option-active, .x-dropdown--option:not(.x-dropdown--option-disabled):hover, .x-dropdown--option:not(.x-dropdown--option-disabled):focus-visible {
  color: var(--x-dropdown-option-color-text_hover);
  background-color: var(--x-dropdown-option-color-bg_hover);
  outline: none;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-dropdown--option-disabled {
  color: var(--x-dropdown-option-color-text_disabled);
  background-color: var(--x-dropdown-option-color-bg_disabled);
  cursor: not-allowed;
}
.x-dropdown--option-icon {
  display: inline-flex;
  margin-right: 8px;
}
.x-dropdown--option--suffix {
  display: flex;
  margin-left: var(--x-dropdown-margin-left-suffix-icon);
}

.x-dropdown--group:first-child .x-dropdown--group--title {
  margin-top: var(--x-dropdown-group-title-margin-top);
}
.x-dropdown--group--title {
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--x-dropdown-group-title-margin-top);
  padding: 0 var(--x-dropdown-group-title-padding-horizontal);
  color: var(--x-dropdown-group-title-color-text);
  font-size: var(--x-dropdown-group-title-font-size);
  line-height: var(--x-dropdown-group-title-height);
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x-dropdown--submenu {
  /*
   * 用 calc 取负：`-$var` 会被 Sass 直译为 `-var(...)`，不是合法 CSS 值，
   * 整条声明被浏览器丢弃，子菜单浮层不会上移。改用 CSS 变量后
   * 业务覆盖 --x-dropdown-padding-vertical 时也能同步生效。
   */
  margin-top: calc(-1 * var(--x-dropdown-padding-vertical));
}
.x-dropdown.x-dropdown-has-footer {
  padding-bottom: 0;
}
.x-dropdown--empty, .x-dropdown--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 160px;
  min-height: 72px;
  padding: var(--x-spacing-4) var(--x-spacing-6);
}
.x-dropdown--loading {
  color: var(--x-color-primary-text);
}
.x-dropdown--loading .x-spin--icon {
  font-size: 22px;
}
.x-dropdown--loading .x-spin--tip {
  margin-top: var(--x-spacing-2);
  font-size: 12px;
}
.x-dropdown--footer {
  border-top: 1px solid var(--x-dropdown-color-border);
}

.x-dropdown--button .x-trigger {
  display: inline-flex;
}

.x-dropdown--button--trigger {
  --x-button-width: var(--x-size-medium);
  min-width: var(--x-size-medium);
}
.x-dropdown--button--trigger .x-button--prefix {
  margin-right: 0;
}
.x-dropdown--button--trigger .x-button--content {
  display: none;
}

.x-empty {
  box-sizing: border-box;
  width: 100%;
  padding: var(--x-spacing-5) 0;
  text-align: center;
}
.x-empty--image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--x-size-20);
  margin-bottom: var(--x-spacing-2);
  color: var(--x-empty-image-color);
  font-size: var(--x-size-20);
  line-height: 1;
}
.x-empty--image .x-icon {
  display: inline-flex;
  font-size: var(--x-size-20);
}
.x-empty--image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  vertical-align: middle;
}

.x-empty--description {
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-3);
  line-height: var(--x-line-height-base);
}

/*
 * 间距变量：引用全局刻度，不再本地重定义。
 *
 * 原实现把 Arco 的 spacing 刻度整体放大后写死（4→8、16→28、20→32），
 * 导致表单行间距 32px、标签到控件 28px —— 约为参考实现的两倍，
 * 用户反馈"Form 间距太大"。现改为引用 base.scss 的 --x-spacing-*，
 * 与 Arco 原始刻度（16/20px）及其它组件保持一致。
 */
/*
 * 表单间距。
 * 各 size 的表单项下边距当前统一取 default 档（medium 20px）——
 * mini/small/large 尚未实现差异化，故只保留一个变量，避免留下
 * "定义了但从未被引用"的死变量误导后续维护。
 */
.x-form--item-status-success .x-input--wrapper:not(.x-input-disabled),
.x-form--item-status-success .x-textarea--wrapper:not(.x-textarea-disabled),
.x-form--item-status-success .x-select--view:not(.x-select--view-disabled),
.x-form--item-status-success .x-picker:not(.x-picker-disabled),
.x-form--item-status-success .x-input-tag:not(.x-input-tag-disabled) {
  background-color: var(--x-field-status-success-bg);
  border-color: var(--x-field-status-success-border);
}
.x-form--item-status-success .x-input--wrapper:not(.x-input-disabled):hover,
.x-form--item-status-success .x-textarea--wrapper:not(.x-textarea-disabled):hover,
.x-form--item-status-success .x-select--view:not(.x-select--view-disabled):hover,
.x-form--item-status-success .x-picker:not(.x-picker-disabled):hover,
.x-form--item-status-success .x-input-tag:not(.x-input-tag-disabled):hover {
  background-color: var(--x-field-status-success-bg-hover);
  border-color: var(--x-field-status-success-border-hover);
}
.x-form--item-status-success .x-input--wrapper:not(.x-input-disabled):focus-within,
.x-form--item-status-success .x-input--wrapper:not(.x-input-disabled).x-input-focus,
.x-form--item-status-success .x-textarea--wrapper:not(.x-textarea-disabled):focus-within,
.x-form--item-status-success .x-textarea--wrapper:not(.x-textarea-disabled).x-textarea-focus,
.x-form--item-status-success .x-select--view:not(.x-select--view-disabled).x-select--view-opened,
.x-form--item-status-success .x-picker:not(.x-picker-disabled):focus-within,
.x-form--item-status-success .x-picker:not(.x-picker-disabled).x-picker-focused,
.x-form--item-status-success .x-input-tag:not(.x-input-tag-disabled).x-input-tag-focus {
  background-color: var(--x-field-status-success-bg-focus);
  border-color: var(--x-field-status-success-border-focus);
  box-shadow: 0 0 0 var(--x-field-status-success-shadow-size-focus) var(--x-field-status-success-shadow-color-focus);
}
.x-form--item-status-success .x-form--item--message-help,
.x-form--item-status-success .x-feedback-icon {
  color: var(--x-field-status-success-text);
}
.x-form--item-status-success .x-feedback-icon {
  color: var(--x-field-status-success-icon);
}

.x-form--item-status-warning .x-input--wrapper:not(.x-input-disabled),
.x-form--item-status-warning .x-textarea--wrapper:not(.x-textarea-disabled),
.x-form--item-status-warning .x-select--view:not(.x-select--view-disabled),
.x-form--item-status-warning .x-picker:not(.x-picker-disabled),
.x-form--item-status-warning .x-input-tag:not(.x-input-tag-disabled) {
  background-color: var(--x-field-status-warning-bg);
  border-color: var(--x-field-status-warning-border);
}
.x-form--item-status-warning .x-input--wrapper:not(.x-input-disabled):hover,
.x-form--item-status-warning .x-textarea--wrapper:not(.x-textarea-disabled):hover,
.x-form--item-status-warning .x-select--view:not(.x-select--view-disabled):hover,
.x-form--item-status-warning .x-picker:not(.x-picker-disabled):hover,
.x-form--item-status-warning .x-input-tag:not(.x-input-tag-disabled):hover {
  background-color: var(--x-field-status-warning-bg-hover);
  border-color: var(--x-field-status-warning-border-hover);
}
.x-form--item-status-warning .x-input--wrapper:not(.x-input-disabled):focus-within,
.x-form--item-status-warning .x-input--wrapper:not(.x-input-disabled).x-input-focus,
.x-form--item-status-warning .x-textarea--wrapper:not(.x-textarea-disabled):focus-within,
.x-form--item-status-warning .x-textarea--wrapper:not(.x-textarea-disabled).x-textarea-focus,
.x-form--item-status-warning .x-select--view:not(.x-select--view-disabled).x-select--view-opened,
.x-form--item-status-warning .x-picker:not(.x-picker-disabled):focus-within,
.x-form--item-status-warning .x-picker:not(.x-picker-disabled).x-picker-focused,
.x-form--item-status-warning .x-input-tag:not(.x-input-tag-disabled).x-input-tag-focus {
  background-color: var(--x-field-status-warning-bg-focus);
  border-color: var(--x-field-status-warning-border-focus);
  box-shadow: 0 0 0 var(--x-field-status-warning-shadow-size-focus) var(--x-field-status-warning-shadow-color-focus);
}
.x-form--item-status-warning .x-form--item--message-help,
.x-form--item-status-warning .x-feedback-icon {
  color: var(--x-field-status-warning-text);
}
.x-form--item-status-warning .x-feedback-icon {
  color: var(--x-field-status-warning-icon);
}

.x-form--item-status-error .x-input--wrapper:not(.x-input-disabled),
.x-form--item-status-error .x-textarea--wrapper:not(.x-textarea-disabled),
.x-form--item-status-error .x-select--view:not(.x-select--view-disabled),
.x-form--item-status-error .x-picker:not(.x-picker-disabled),
.x-form--item-status-error .x-input-tag:not(.x-input-tag-disabled) {
  background-color: var(--x-field-status-error-bg);
  border-color: var(--x-field-status-error-border);
}
.x-form--item-status-error .x-input--wrapper:not(.x-input-disabled):hover,
.x-form--item-status-error .x-textarea--wrapper:not(.x-textarea-disabled):hover,
.x-form--item-status-error .x-select--view:not(.x-select--view-disabled):hover,
.x-form--item-status-error .x-picker:not(.x-picker-disabled):hover,
.x-form--item-status-error .x-input-tag:not(.x-input-tag-disabled):hover {
  background-color: var(--x-field-status-error-bg-hover);
  border-color: var(--x-field-status-error-border-hover);
}
.x-form--item-status-error .x-input--wrapper:not(.x-input-disabled):focus-within,
.x-form--item-status-error .x-input--wrapper:not(.x-input-disabled).x-input-focus,
.x-form--item-status-error .x-textarea--wrapper:not(.x-textarea-disabled):focus-within,
.x-form--item-status-error .x-textarea--wrapper:not(.x-textarea-disabled).x-textarea-focus,
.x-form--item-status-error .x-select--view:not(.x-select--view-disabled).x-select--view-opened,
.x-form--item-status-error .x-picker:not(.x-picker-disabled):focus-within,
.x-form--item-status-error .x-picker:not(.x-picker-disabled).x-picker-focused,
.x-form--item-status-error .x-input-tag:not(.x-input-tag-disabled).x-input-tag-focus {
  background-color: var(--x-field-status-error-bg-focus);
  border-color: var(--x-field-status-error-border-focus);
  box-shadow: 0 0 0 var(--x-field-status-error-shadow-size-focus) var(--x-field-status-error-shadow-color-focus);
}
.x-form--item-status-error .x-form--item--message-help,
.x-form--item-status-error .x-feedback-icon {
  color: var(--x-field-status-error-text);
}
.x-form--item-status-error .x-feedback-icon {
  color: var(--x-field-status-error-icon);
}

.x-form--item-status-validating .x-input--wrapper:not(.x-input-disabled),
.x-form--item-status-validating .x-textarea--wrapper:not(.x-textarea-disabled),
.x-form--item-status-validating .x-select--view:not(.x-select--view-disabled),
.x-form--item-status-validating .x-picker:not(.x-picker-disabled),
.x-form--item-status-validating .x-input-tag:not(.x-input-tag-disabled) {
  background-color: var(--x-field-status-validating-bg);
  border-color: var(--x-field-status-validating-border);
}
.x-form--item-status-validating .x-input--wrapper:not(.x-input-disabled):hover,
.x-form--item-status-validating .x-textarea--wrapper:not(.x-textarea-disabled):hover,
.x-form--item-status-validating .x-select--view:not(.x-select--view-disabled):hover,
.x-form--item-status-validating .x-picker:not(.x-picker-disabled):hover,
.x-form--item-status-validating .x-input-tag:not(.x-input-tag-disabled):hover {
  background-color: var(--x-field-status-validating-bg-hover);
  border-color: var(--x-field-status-validating-border-hover);
}
.x-form--item-status-validating .x-input--wrapper:not(.x-input-disabled):focus-within,
.x-form--item-status-validating .x-input--wrapper:not(.x-input-disabled).x-input-focus,
.x-form--item-status-validating .x-textarea--wrapper:not(.x-textarea-disabled):focus-within,
.x-form--item-status-validating .x-textarea--wrapper:not(.x-textarea-disabled).x-textarea-focus,
.x-form--item-status-validating .x-select--view:not(.x-select--view-disabled).x-select--view-opened,
.x-form--item-status-validating .x-picker:not(.x-picker-disabled):focus-within,
.x-form--item-status-validating .x-picker:not(.x-picker-disabled).x-picker-focused,
.x-form--item-status-validating .x-input-tag:not(.x-input-tag-disabled).x-input-tag-focus {
  background-color: var(--x-field-status-validating-bg-focus);
  border-color: var(--x-field-status-validating-border-focus);
  box-shadow: 0 0 0 var(--x-field-status-validating-shadow-size-focus) var(--x-field-status-validating-shadow-color-focus);
}
.x-form--item-status-validating .x-form--item--message-help,
.x-form--item-status-validating .x-feedback-icon {
  color: var(--x-field-status-validating-text);
}
.x-form--item-status-validating .x-feedback-icon {
  color: var(--x-field-status-validating-icon);
}

.x-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.x-form-layout-inline {
  flex-direction: row;
  flex-wrap: wrap;
}
.x-form-auto-label-width .x-form--item--label-col > .x-form--item--label {
  white-space: nowrap;
}
.x-form-size-mini .x-form--item--label-col {
  line-height: 24px;
}
.x-form-size-mini .x-form--item--label-col > .x-form--item--label {
  font-size: var(--x-font-size-body-1);
}
.x-form-size-mini .x-form--item--content,
.x-form-size-mini .x-form--item--wrapper-col {
  min-height: 24px;
}
.x-form-size-small .x-form--item--label-col {
  line-height: 28px;
}
.x-form-size-small .x-form--item--label-col > .x-form--item--label {
  font-size: var(--x-font-size-body-3);
}
.x-form-size-small .x-form--item--content,
.x-form-size-small .x-form--item--wrapper-col {
  min-height: 28px;
}
.x-form-size-large .x-form--item--label-col {
  line-height: 36px;
}
.x-form-size-large .x-form--item--label-col > .x-form--item--label {
  font-size: var(--x-font-size-body-3);
}
.x-form-size-large .x-form--item--content,
.x-form-size-large .x-form--item--wrapper-col {
  min-height: 36px;
}
.x-form .x-form--item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: var(--x-spacing-8);
}
.x-form .x-form--item-layout-vertical {
  display: block;
}
.x-form .x-form--item-layout-vertical > .x-form--item--label-col {
  justify-content: flex-start;
  margin-bottom: var(--x-spacing-4);
  padding: 0;
  line-height: 1.5715;
  white-space: normal;
}
.x-form .x-form--item-layout-inline {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  margin-right: var(--x-spacing-9);
  margin-bottom: var(--x-spacing-4);
}
.x-form .x-form--item-layout-inline > .x-form--item--label-col,
.x-form .x-form--item-layout-inline > .x-form--item--wrapper-col {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
.x-form .x-form--item-layout-inline > .x-form--item--wrapper-col {
  width: 200px;
}
.x-form .x-form--item-has-message, .x-form .x-form--item-has-help {
  margin-bottom: 0;
}
.x-form .x-form--item--wrapper-col-flex.x-col {
  flex: 1;
}
.x-form .x-form--item-extra {
  margin-top: var(--x-spacing-2);
  color: var(--x-color-text-tertiary);
  font-size: var(--x-font-size-body-1);
  /* 显式行高：与同级的 -message 保持一致，不继承宿主行高 */
  line-height: var(--x-spacing-8);
}
.x-form .x-form--item--message {
  min-height: var(--x-spacing-8);
  color: var(--x-field-status-error-text);
  font-size: var(--x-font-size-body-1);
  line-height: var(--x-spacing-8);
}
.x-form .x-form--item--message-help {
  color: var(--x-color-text-tertiary);
}
.x-form .x-form--item--message + .x-form--item-extra {
  margin-top: 0;
  margin-bottom: var(--x-spacing-2);
}
.x-form .x-form--item--label-col {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  padding-right: var(--x-spacing-7);
  line-height: 32px;
  white-space: nowrap;
}
.x-form .x-form--item--label-col-left {
  justify-content: flex-start;
}
.x-form .x-form--item--label-col > .x-form--item--label {
  max-width: 100%;
  color: var(--x-color-text-secondary);
  font-size: var(--x-font-size-body-3);
  white-space: normal;
}
.x-form .x-form--item--label-col-flex {
  box-sizing: content-box;
}
.x-form .x-form--item--wrapper-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 32px;
}
.x-form .x-form--item--content {
  flex: 1;
  max-width: 100%;
  min-height: 32px;
}
.x-form .x-form--item--content-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.x-form .x-form--item--content-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.x-form .x-slider {
  display: block;
}

.x-form--item--label-required-symbol {
  color: var(--x-color-danger-solid);
  font-size: var(--x-font-size-body-1);
  line-height: 1;
}
.x-form--item--label-required-symbol svg {
  display: inline-block;
  transform: scale(0.5);
}
.x-form--item--label {
  /*
   * label 旁的说明图标：显式尺寸 + 与文字基线对齐。
   *
   * 注意类名用双横线 `--tooltip`：运行时由 getClassNameMixin('form--item--label')
   * 的 element() 生成 `x-form--item--label--tooltip`（element 分隔符是 `--`，
   * 而 modifier 才是 `-`）。此前写成单横线 `&-tooltip`，编译出的
   * `x-form--item--label-tooltip` 与 DOM 不匹配，整段样式（含尺寸）从未生效。
   */
}
.x-form--item--label--tooltip {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: var(--x-spacing-2);
  color: var(--x-color-text-tertiary);
  vertical-align: -2px;
}

.form-blink-enter-from,
.form-blink-appear-from {
  opacity: 0;
}

.form-blink-enter-to,
.form-blink-appear-to {
  opacity: 1;
}

.form-blink-enter-active,
.form-blink-appear-active {
  transition: opacity 0.3s cubic-bezier(0, 0, 1, 1);
  animation: x-form-blink 0.5s cubic-bezier(0, 0, 1, 1);
}

@keyframes x-form-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --x-checkbox-mask-border-width: var(--x-border-2);
  --x-checkbox-mask-border-style: var(--x-border-solid);
  --x-checkbox-mask-border-radius: var(--x-border-radius-small);
  --x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);
  --x-checkbox-mask-color-bg: var(--x-color-bg-white);
  --x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);
  --x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);
  --x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);
  --x-checkbox-mask-color-border: var(--x-color-fill-3);
  --x-checkbox-mask-color-border_hover: var(--x-color-fill-4);
  --x-checkbox-mask-color-border_checked: var(--x-color-transparent);
  --x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);
  --x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);
  --x-checkbox-color-text: var(--x-color-text-1);
  --x-checkbox-color-text_disabled: var(--x-color-text-4);
  --x-checkbox-group-spacing: var(--x-spacing-7);
  --x-checkbox-text-mask-spacing: var(--x-spacing-4);
  --x-checkbox-text-font-size: var(--x-font-size-body-3);
  --x-checkbox-group-size-line-height_vertical: var(--x-size-8);
  --x-checkbox-size-check-icon: var(--x-size-2);
  --x-checkbox-color-check-icon: var(--x-color-white);
  --x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);
  --x-checkbox-color-indeterminate-icon-width: 6px;
  --x-checkbox-color-indeterminate-icon-height: 2px;
  --x-checkbox-color-indeterminate-icon: var(--x-color-white);
}

.x-icon-hover.x-checkbox-icon-hover::before {
  width: 24px;
  height: 24px;
}

.x-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 5px;
  font-size: var(--x-checkbox-text-font-size);
  /*
   * 原来是 line-height: unset，会继承宿主行高（实测宿主 lh=3 时标签盒变高）。
   * 改为显式声明；勾选组垂直模式用更高特异性的选择器单独覆盖行高，二者不冲突。
   */
  line-height: var(--x-line-height-base);
  cursor: pointer;
}
.x-checkbox > input[type=checkbox] {
  position: absolute;
  top: 50%;
  left: 5px;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: inherit;
  opacity: 0;
  transform: translateY(-50%);
}
.x-checkbox:has(> input:focus-visible) {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
  border-radius: var(--x-checkbox-mask-border-radius);
}
.x-checkbox:hover .x-checkbox-icon-hover::before {
  background-color: var(--x-checkbox-mask-bg-color-bg);
}
.x-checkbox--label {
  margin-left: var(--x-checkbox-text-mask-spacing);
  color: var(--x-checkbox-color-text);
}
.x-checkbox-icon {
  position: relative;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: var(--x-checkbox-mask-color-bg);
  border: var(--x-checkbox-mask-border-width) var(--x-checkbox-mask-border-style) var(--x-checkbox-mask-color-border);
  border-radius: var(--x-checkbox-mask-border-radius);
  user-select: none;
}
.x-checkbox-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--x-checkbox-color-indeterminate-icon-width);
  height: var(--x-checkbox-color-indeterminate-icon-height);
  background: var(--x-checkbox-color-indeterminate-icon);
  border-radius: 0.5px;
  transform: translateX(-50%) translateY(-50%) scale(0);
  content: "";
}
.x-checkbox-icon-check {
  position: relative;
  display: block;
  width: var(--x-checkbox-size-check-icon);
  height: 100%;
  margin: 0 auto;
  color: var(--x-checkbox-color-check-icon);
  transform: scale(0);
  transform-origin: center 75%;
}
.x-checkbox:hover .x-checkbox-icon {
  border-color: var(--x-checkbox-mask-color-border_hover);
  transition: border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}
.x-checkbox-checked:hover .x-checkbox-icon, .x-checkbox-indeterminate:hover .x-checkbox-icon {
  transition: transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}
.x-checkbox-checked .x-checkbox-icon {
  background-color: var(--x-checkbox-mask-color-bg_checked);
  border-color: var(--x-checkbox-mask-color-border_checked);
}
.x-checkbox-checked .x-checkbox-icon-check {
  transform: scale(1);
  transition: transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}
.x-checkbox-indeterminate .x-checkbox-icon {
  background-color: var(--x-checkbox-mask-color-bg_checked);
  border-color: var(--x-checkbox-mask-color-border_checked);
}
.x-checkbox-indeterminate .x-checkbox-icon svg {
  transform: scale(0);
}
.x-checkbox-indeterminate .x-checkbox-icon::after {
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}
.x-checkbox.x-checkbox-disabled {
  cursor: not-allowed;
}
.x-checkbox.x-checkbox-disabled .x-checkbox-icon-hover {
  cursor: not-allowed;
}
.x-checkbox-checked:hover .x-checkbox-icon, .x-checkbox-indeterminate:hover .x-checkbox-icon {
  border-color: var(--x-checkbox-mask-color-border_checked);
}
.x-checkbox-disabled .x-checkbox-icon {
  background-color: var(--x-checkbox-mask-color-bg_disabled);
  border-color: var(--x-checkbox-mask-color-border_disabled);
}
.x-checkbox-disabled.x-checkbox-checked .x-checkbox-icon,
.x-checkbox-disabled.x-checkbox-checked:hover .x-checkbox-icon,
.x-checkbox-disabled.x-checkbox-indeterminate .x-checkbox-icon,
.x-checkbox-disabled.x-checkbox-indeterminate:hover .x-checkbox-icon {
  background-color: var(--x-checkbox-mask-color-bg_checked_disabled);
  border-color: var(--x-checkbox-mask-color-border_checked_disabled);
}

.x-checkbox-disabled:hover .x-checkbox-icon-hover::before, .x-checkbox-checked:hover .x-checkbox-icon-hover::before, .x-checkbox-indeterminate:hover .x-checkbox-icon-hover::before {
  background-color: var(--x-color-transparent);
}
.x-checkbox-disabled:hover .x-checkbox-icon {
  border-color: var(--x-checkbox-mask-color-border_disabled);
}
.x-checkbox-disabled .x-checkbox--label {
  color: var(--x-checkbox-color-text_disabled);
}
.x-checkbox-disabled .x-checkbox-icon-check {
  color: var(--x-checkbox-color-check-icon_disabled);
}
.x-checkbox-size-mini {
  padding-left: 4px;
  font-size: var(--x-font-size-body-1);
}
.x-checkbox-size-mini .x-checkbox-icon-hover::before {
  width: 20px;
  height: 20px;
}
.x-checkbox-size-mini .x-checkbox-icon {
  width: 12px;
  height: 12px;
}
.x-checkbox-size-mini .x-checkbox-icon-check {
  width: 8px;
}
.x-checkbox-size-mini > input[type=checkbox] {
  left: 4px;
  width: 12px;
  height: 12px;
}
.x-checkbox-size-small {
  padding-left: 3px;
  font-size: var(--x-font-size-body-3);
}
.x-checkbox-size-small .x-checkbox-icon-hover::before {
  width: 20px;
  height: 20px;
}
.x-checkbox-size-small .x-checkbox-icon {
  width: 14px;
  height: 14px;
}
.x-checkbox-size-small .x-checkbox-icon-check {
  width: 10px;
}
.x-checkbox-size-small > input[type=checkbox] {
  left: 3px;
  width: 14px;
  height: 14px;
}
.x-checkbox-size-medium {
  padding-left: 5px;
  font-size: var(--x-font-size-body-3);
}
.x-checkbox-size-medium .x-checkbox-icon-hover::before {
  width: 24px;
  height: 24px;
}
.x-checkbox-size-medium .x-checkbox-icon {
  width: 14px;
  height: 14px;
}
.x-checkbox-size-medium .x-checkbox-icon-check {
  width: 10px;
}
.x-checkbox-size-medium > input[type=checkbox] {
  left: 5px;
  width: 14px;
  height: 14px;
}
.x-checkbox-size-large {
  padding-left: 6px;
  font-size: var(--x-font-size-body-3);
}
.x-checkbox-size-large .x-checkbox-icon-hover::before {
  width: 28px;
  height: 28px;
}
.x-checkbox-size-large .x-checkbox-icon {
  width: 16px;
  height: 16px;
}
.x-checkbox-size-large .x-checkbox-icon-check {
  width: 12px;
}
.x-checkbox-size-large > input[type=checkbox] {
  left: 6px;
  width: 16px;
  height: 16px;
}

.x-checkbox--group {
  display: inline-block;
}
.x-checkbox--group .x-checkbox {
  margin-right: var(--x-checkbox-group-spacing);
}

.x-checkbox--group-direction-vertical .x-checkbox {
  display: flex;
  margin-right: 0;
  line-height: var(--x-checkbox-group-size-line-height_vertical);
}

.x-input--group {
  display: inline-flex;
  align-items: center;
}
.x-input--group > *:nth-child(n) {
  border-radius: 0;
}
.x-input--group > *:nth-child(n).x-input--outer > :last-child, .x-input--group > *:nth-child(n).x-input--outer > :first-child {
  border-radius: 0;
}
.x-input--group > *:nth-child(n):not(:last-child) {
  position: relative;
  box-sizing: border-box;
}
.x-input--group > *:nth-child(n):first-child, .x-input--group > *:nth-child(n):first-child .x-input--group > *:first-child {
  border-top-left-radius: var(--x-input-group-border-radius_compact);
  border-bottom-left-radius: var(--x-input-group-border-radius_compact);
}
.x-input--group > *:nth-child(n):first-child .x-select--view, .x-input--group > *:nth-child(n):first-child .x-input--group > *:first-child .x-select--view {
  border-top-left-radius: var(--x-input-group-border-radius_compact);
  border-bottom-left-radius: var(--x-input-group-border-radius_compact);
}
.x-input--group > *:nth-child(n):last-child, .x-input--group > *:nth-child(n):last-child .x-input--outer > *:last-child {
  border-top-right-radius: var(--x-input-group-border-radius_compact);
  border-bottom-right-radius: var(--x-input-group-border-radius_compact);
}
.x-input--group > *:nth-child(n):last-child .x-select--view, .x-input--group > *:nth-child(n):last-child .x-input--outer > *:last-child .x-select--view {
  border-top-right-radius: var(--x-input-group-border-radius_compact);
  border-bottom-right-radius: var(--x-input-group-border-radius_compact);
}
.x-input--group > .x-input--wrapper:not(:last-child),
.x-input--group > .x-input--outer:not(:last-child),
.x-input--group > .x-input-tag:not(:last-child),
.x-input--group > .x-select--view:not(:last-child) {
  margin-right: calc(-1 * var(--x-input-group-border-separator-width));
  border-right: var(--x-input-group-border-separator-width) solid var(--x-input-group-color-separator-border);
}
.x-input--group > .x-input--wrapper:not(:last-child):focus-within,
.x-input--group > .x-input--outer:not(:last-child):focus-within,
.x-input--group > .x-input-tag:not(:last-child):focus-within,
.x-input--group > .x-select--view:not(:last-child):focus-within {
  border-right-color: var(--x-input-color-border_focus);
}
.x-input--group > .x-input--wrapper.x-input-error:not(:last-child):focus-within {
  border-right-color: var(--x-input-color-border_error_focus);
}

.x-input--wrapper.x-input-password:not(.x-input-disabled) .x-input--suffix {
  color: var(--x-password-color-eye-icon);
  font-size: var(--x-password-size-eye-icon);
  cursor: pointer;
}

.x-input-search .x-input--append {
  padding: 0;
  border: none;
}
.x-input-search .x-input--suffix {
  color: var(--x-search-color-icon);
  font-size: var(--x-search-size-icon);
}
.x-input-search .x-input-search--btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.size-height-size-mini {
  /* prettier-ignore */
  padding-top: calc(var(--x-input-size-mini-height) - var(--x-input-border-width) * 2 - 1.667 * var(--x-input-size-mini-font-size))/2;
  /* prettier-ignore */
  padding-bottom: calc(var(--x-input-size-mini-height) - var(--x-input-border-width) * 2 - 1.667 * var(--x-input-size-mini-font-size))/2;
}
.size-height-size-small {
  padding-top: 1.9995px;
  padding-bottom: 1.9995px;
  font-size: 14px;
}
.size-height-size-large {
  padding-top: 5.9995px;
  padding-bottom: 5.9995px;
  font-size: 14px;
}

.x-input--wrapper {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: var(--x-input-padding-horizontal);
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  font-size: var(--x-input-size-default-font-size);
  background-color: var(--x-input-color-bg);
  border: var(--x-input-border-width) solid var(--x-input-border-color);
  border-radius: var(--x-input-border-radius);
  cursor: text;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input--wrapper:hover {
  background-color: var(--x-input-color-bg_hover);
  border-color: var(--x-input-color-border_hover);
}
.x-input--wrapper:focus-within, .x-input--wrapper.x-input-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_focus);
  border-color: var(--x-input-color-border_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus);
}
.x-input--wrapper.x-input-disabled {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
  cursor: not-allowed;
}
.x-input--wrapper.x-input-disabled:hover {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
}
.x-input--wrapper.x-input-disabled .x-input--prefix,
.x-input--wrapper.x-input-disabled .x-input--suffix {
  color: inherit;
}
.x-input--wrapper.x-input-error {
  background-color: var(--x-input-color-bg_error);
  border-color: var(--x-input-color-border_error);
}
.x-input--wrapper.x-input-error:hover {
  background-color: var(--x-input-color-bg_error_hover);
  border-color: var(--x-input-color-border_error_hover);
}
.x-input--wrapper.x-input-error:focus-within, .x-input--wrapper.x-input-error.x-input-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_error_focus);
  border-color: var(--x-input-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus);
}
.x-input--wrapper .x-input--prefix,
.x-input--wrapper .x-input--suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /*
   * 显式行高：前后缀常用来放文字（「https://」「.com」「状态」等）。
   * 不声明时宿主行高会沿继承链进入控件外壳、改变其高度。
   * 放在共享 mixin 里可同时覆盖 Input（x-input）与 Select（x-select--view）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  user-select: none;
  /*
   * 图标真实结构是 span.x-icon > svg，svg 不是直接子级——
   * 原先的 `> svg` 选择器从不命中，mini 尺寸的图标字号（12px）因此失效，
   * 图标落到继承的 wrapper 字号 14px，与控件文字（12px）不匹配。
   * 同时用显式 width/height 固定尺寸（只设 font-size 会让 .x-icon 的
   * 1em 基准确认后仍受 flex 收缩影响，参见 select-view 的同类修复）。
   */
}
.x-input--wrapper .x-input--prefix > .x-icon,
.x-input--wrapper .x-input--suffix > .x-icon {
  width: var(--x-input-size-default-icon-suffix-size);
  height: var(--x-input-size-default-icon-suffix-size);
  font-size: var(--x-input-size-default-icon-suffix-size);
}
.x-input--wrapper .x-input--prefix > .x-icon > svg,
.x-input--wrapper .x-input--suffix > .x-icon > svg {
  width: 1em;
  height: 1em;
}
.x-input--wrapper .x-input--prefix {
  padding-right: var(--x-input-padding-horizontal);
  color: var(--x-input-color-prefix-text);
}
.x-input--wrapper .x-input--suffix {
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-suffix-text);
}
.x-input--wrapper .x-input--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-input--wrapper .x-input--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-input--wrapper .x-input--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-input--wrapper .x-input--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-input--wrapper .x-input--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-input--wrapper .x-input--clear-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--x-input-margin-left-clear-btn);
  color: var(--x-input-color-icon-clear);
  font-size: var(--x-input-size-icon-clear);
  visibility: hidden;
  cursor: pointer;
  /* 只切 visibility 会瞬间跳变，补 opacity 过渡与其余表单控件一致 */
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input--wrapper .x-input--clear-btn > svg {
  position: relative;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input--wrapper:hover .x-input--clear-btn, .x-input--wrapper:focus-within .x-input--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-input--wrapper:not(.x-input-focus) .x-input-icon-hover:hover::before {
  background-color: var(--x-input-color-icon-clear-bg_hover);
}
.x-input--wrapper .x-input {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--x-line-height-base);
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: var(--x-color-transparent);
}
.x-input--wrapper .x-input::placeholder {
  color: var(--x-input-color-placeholder-text);
}
.x-input--wrapper .x-input[disabled]::placeholder {
  color: var(--x-input-color-text_disabled);
}
.x-input--wrapper .x-input[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-input--wrapper .x-input {
  flex: 1 1 0;
  width: 0;
}
.x-input--wrapper .x-input.x-input-size-mini {
  /* prettier-ignore */
  padding-top: var(--x-input-size-mini-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-mini-padding-up-down);
  font-size: var(--x-input-size-mini-font-size);
  line-height: var(--x-input-size-mini-line-height);
}
.x-input--wrapper .x-input.x-input-size-small {
  /* prettier-ignore */
  padding-top: var(--x-input-size-small-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-small-padding-up-down);
  font-size: var(--x-input-size-small-font-size);
  line-height: var(--x-input-size-small-line-height);
}
.x-input--wrapper .x-input.x-input-size-medium {
  /* prettier-ignore */
  padding-top: var(--x-input-size-medium-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-medium-padding-up-down);
  font-size: var(--x-input-size-medium-font-size);
  line-height: var(--x-input-size-medium-line-height);
}
.x-input--wrapper .x-input.x-input-size-large {
  /* prettier-ignore */
  padding-top: var(--x-input-size-large-padding-up-down);
  /* prettier-ignore */
  padding-bottom: var(--x-input-size-large-padding-up-down);
  font-size: var(--x-input-size-large-font-size);
  line-height: var(--x-input-size-large-line-height);
}
.x-input--wrapper {
  /*
   * 类名必须是 --word-limit（双横线）。
   * 原写法 `.x-input-word-limit`（单横线）与运行时类名不匹配，
   * 整条规则从未生效——实测该元素拿不到 tip 字样号与颜色，一直是宿主默认值。
   */
}
.x-input--wrapper .x-input--word-limit {
  color: var(--x-input-color-tip-text);
  font-size: var(--x-input-font-tip-size);
  /* 显式行高：字数统计是独立文案块，不继承宿主行高 */
  line-height: var(--x-line-height-base);
}

/*
 * 前缀/后缀里放文字（如「https://」「.com」）时必须有显式行高，
 * 否则宿主行高会沿继承链进入输入框外壳、改变其高度。
 * 这条规则不能放进 .x-input--outer 作用域：无 prepend/append 的输入框
 * 根本没有 --outer 祖先（prefix/suffix 直接挂在 --wrapper 下）。
 */
.x-input--wrapper .x-input--prefix,
.x-input--wrapper .x-input--suffix {
  line-height: var(--x-line-height-base);
}

.x-input--outer {
  display: inline-flex;
  width: 100%;
}
.x-input--outer > .x-input--wrapper {
  border-radius: 0;
}
.x-input--outer > :first-child {
  border-top-left-radius: var(--x-input-border-radius);
  border-bottom-left-radius: var(--x-input-border-radius);
}
.x-input--outer > :last-child {
  border-top-right-radius: var(--x-input-border-radius);
  border-bottom-right-radius: var(--x-input-border-radius);
}
.x-input--outer.x-input--outer-size-mini .x-input--outer {
  font-size: var(--x-input-size-mini-font-size);
}
.x-input--outer.x-input--outer-size-mini .x-input--wrapper .x-input--prefix,
.x-input--outer.x-input--outer-size-mini .x-input--wrapper .x-input--suffix {
  font-size: var(--x-input-size-mini-font-size);
  /* 图标在 .x-icon 内（非直接子级 svg），需命中该层并显式约束尺寸 */
}
.x-input--outer.x-input--outer-size-mini .x-input--wrapper .x-input--prefix > .x-icon,
.x-input--outer.x-input--outer-size-mini .x-input--wrapper .x-input--suffix > .x-icon {
  width: var(--x-input-size-mini-icon-suffix-size);
  height: var(--x-input-size-mini-icon-suffix-size);
  font-size: var(--x-input-size-mini-icon-suffix-size);
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend,
.x-input--outer.x-input--outer-size-mini .x-input--append {
  font-size: var(--x-input-size-mini-font-size);
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend > .x-icon,
.x-input--outer.x-input--outer-size-mini .x-input--append > .x-icon {
  width: var(--x-input-size-mini-icon-addon-size);
  height: var(--x-input-size-mini-icon-addon-size);
  font-size: var(--x-input-size-mini-icon-addon-size);
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
  border-color: var(--x-color-transparent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-mini .x-input--prepend .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer.x-input--outer-size-mini .x-input--append .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
  border-color: var(--x-color-transparent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-input--outer.x-input--outer-size-mini .x-input--append .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
}
.x-input--outer.x-input--outer-size-mini .x-input--append .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-mini .x-input--append .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer.x-input--outer-size-small .x-input--outer {
  font-size: var(--x-input-size-small-font-size);
}
.x-input--outer.x-input--outer-size-small .x-input--wrapper .x-input--prefix,
.x-input--outer.x-input--outer-size-small .x-input--wrapper .x-input--suffix {
  font-size: var(--x-input-size-small-font-size);
  /* 图标在 .x-icon 内（非直接子级 svg），需命中该层并显式约束尺寸 */
}
.x-input--outer.x-input--outer-size-small .x-input--wrapper .x-input--prefix > .x-icon,
.x-input--outer.x-input--outer-size-small .x-input--wrapper .x-input--suffix > .x-icon {
  width: var(--x-input-size-small-icon-suffix-size);
  height: var(--x-input-size-small-icon-suffix-size);
  font-size: var(--x-input-size-small-icon-suffix-size);
}
.x-input--outer.x-input--outer-size-small .x-input--prepend,
.x-input--outer.x-input--outer-size-small .x-input--append {
  font-size: var(--x-input-size-small-font-size);
}
.x-input--outer.x-input--outer-size-small .x-input--prepend > .x-icon,
.x-input--outer.x-input--outer-size-small .x-input--append > .x-icon {
  width: var(--x-input-size-small-icon-addon-size);
  height: var(--x-input-size-small-icon-addon-size);
  font-size: var(--x-input-size-small-icon-addon-size);
}
.x-input--outer.x-input--outer-size-small .x-input--prepend .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
  border-color: var(--x-color-transparent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-input--outer.x-input--outer-size-small .x-input--prepend .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
}
.x-input--outer.x-input--outer-size-small .x-input--prepend .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-small .x-input--prepend .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer.x-input--outer-size-small .x-input--append .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
  border-color: var(--x-color-transparent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-input--outer.x-input--outer-size-small .x-input--append .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
}
.x-input--outer.x-input--outer-size-small .x-input--append .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-small .x-input--append .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer.x-input--outer-size-large .x-input--outer {
  font-size: var(--x-input-size-large-font-size);
}
.x-input--outer.x-input--outer-size-large .x-input--wrapper .x-input--prefix,
.x-input--outer.x-input--outer-size-large .x-input--wrapper .x-input--suffix {
  font-size: var(--x-input-size-large-font-size);
  /* 图标在 .x-icon 内（非直接子级 svg），需命中该层并显式约束尺寸 */
}
.x-input--outer.x-input--outer-size-large .x-input--wrapper .x-input--prefix > .x-icon,
.x-input--outer.x-input--outer-size-large .x-input--wrapper .x-input--suffix > .x-icon {
  width: var(--x-input-size-large-icon-suffix-size);
  height: var(--x-input-size-large-icon-suffix-size);
  font-size: var(--x-input-size-large-icon-suffix-size);
}
.x-input--outer.x-input--outer-size-large .x-input--prepend,
.x-input--outer.x-input--outer-size-large .x-input--append {
  font-size: var(--x-input-size-large-font-size);
}
.x-input--outer.x-input--outer-size-large .x-input--prepend > .x-icon,
.x-input--outer.x-input--outer-size-large .x-input--append > .x-icon {
  width: var(--x-input-size-large-icon-addon-size);
  height: var(--x-input-size-large-icon-addon-size);
  font-size: var(--x-input-size-large-icon-addon-size);
}
.x-input--outer.x-input--outer-size-large .x-input--prepend .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
  border-color: var(--x-color-transparent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-input--outer.x-input--outer-size-large .x-input--prepend .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
}
.x-input--outer.x-input--outer-size-large .x-input--prepend .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-large .x-input--prepend .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer.x-input--outer-size-large .x-input--append .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
  border-color: var(--x-color-transparent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-input--outer.x-input--outer-size-large .x-input--append .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
}
.x-input--outer.x-input--outer-size-large .x-input--append .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--outer.x-input--outer-size-large .x-input--append .x-select.x-select-single .x-select--view {
  height: 100%;
}
.x-input--outer-disabled {
  cursor: not-allowed;
}

.x-input--prepend,
.x-input--append {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  padding: 0 var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  /*
   * 显式行高：这类附属标签自身没有行高时会把宿主行高带进来，
   * 通过 flex 的 align-items: center 把输入框外壳撑高（实测宿主 lh=3 时明显变高）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  background-color: var(--x-input-color-addon-bg);
  border: 1px solid var(--x-input-color-addon-border_default);
  /* 同 prefix/suffix：图标在 .x-icon 内，需命中该层并显式约束尺寸 */
}
.x-input--prepend > .x-icon,
.x-input--append > .x-icon {
  width: var(--x-input-size-default-icon-addon-size);
  height: var(--x-input-size-default-icon-addon-size);
  font-size: var(--x-input-size-default-icon-addon-size);
}

.x-input--prepend {
  border-right: var(--x-input-border-addon-separator-width) solid var(--x-input-color-addon-border);
}
.x-input--prepend .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
  border-color: var(--x-color-transparent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-input--prepend .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -12px;
  margin-left: -13px;
}
.x-input--prepend .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--prepend .x-select.x-select-single .x-select--view {
  height: 100%;
}

.x-input--append {
  border-left: var(--x-input-border-addon-separator-width) solid var(--x-input-color-addon-border);
}
.x-input--append .x-input {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
  border-color: var(--x-color-transparent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-input--append .x-select {
  width: auto;
  height: 100%;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -13px;
  margin-left: -12px;
}
.x-input--append .x-select .x-select--view {
  background-color: inherit;
  border-color: var(--x-color-transparent);
  border-radius: 0;
}
.x-input--append .x-select.x-select-single .x-select--view {
  height: 100%;
}

:root {
  --x-input-number-border-radius: var(--x-input-border-radius);
  --x-input-number-step-layer-border-radius: 1px;
  /*
   * 步进层所在 Input 的高度（用于反算图标尺寸）。
   * 默认 medium，尺寸档位由下方的 size-* 规则覆盖。
   */
  --x-input-number-step-layer-height: var(--x-input-size-default-height);
  --x-input-number-size-mini-step-button-width: var(--x-size-mini);
  --x-input-number-size-small-step-button-width: var(--x-size-small);
  --x-input-number-size-default-step-button-width: var(--x-size-default);
  --x-input-number-size-large-step-button-width: var(--x-size-large);
  --x-input-number-step-button-color: var(--x-field-color-icon);
  --x-input-number-step-button-color_disabled: var(--x-field-color-text-disabled);
  --x-input-number-step-button-color-border: var(--x-color-border-subtle);
  --x-input-number-step-button-color-bg_default: var(--x-color-fill-2);
  --x-input-number-step-button-color-bg_default_hover: var(--x-color-fill-3);
  --x-input-number-step-button-color-bg_default_active: var(--x-color-fill-4);
  --x-input-number-step-button-color-bg_disabled: var(--x-field-color-bg-disabled);
  --x-input-number-step-button-color-bg_disabled_hover: var(--x-field-color-bg-disabled);
  --x-input-number-step-button-color-bg_disabled_active: var(--x-field-color-bg-disabled);
}

.x-input-number {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--x-input-number-border-radius);
}
.x-input-number--step--button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  color: var(--x-input-number-step-button-color);
  background-color: var(--x-input-number-step-button-color-bg_default);
  cursor: pointer;
  user-select: none;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input-number--step--button:hover {
  background-color: var(--x-input-number-step-button-color-bg_default_hover);
  border-color: var(--x-input-number-step-button-color-bg_default_hover);
}
.x-input-number--step--button:active {
  background-color: var(--x-input-number-step-button-color-bg_default_active);
  border-color: var(--x-input-number-step-button-color-bg_default_active);
}
.x-input-number--step--button:disabled, .x-input-number--step--button.x-button-is-disabled, .x-input-number--step--button.x-input-number--step--button-disabled {
  color: var(--x-input-number-step-button-color_disabled);
  background-color: var(--x-input-number-step-button-color-bg_disabled);
  cursor: not-allowed;
}
.x-input-number--step--button:disabled:hover, .x-input-number--step--button:disabled:active, .x-input-number--step--button.x-button-is-disabled:hover, .x-input-number--step--button.x-button-is-disabled:active, .x-input-number--step--button.x-input-number--step--button-disabled:hover, .x-input-number--step--button.x-input-number--step--button-disabled:active {
  background-color: var(--x-input-number-step-button-color-bg_disabled_hover);
  border-color: var(--x-input-number-step-button-color-border);
}
.x-input-number.x-input--wrapper, .x-input-number.x-input--outer {
  position: relative;
}
.x-input-number-prefix, .x-input-number-suffix {
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input-number-mode-embed .x-input-number--step {
  position: absolute;
  top: var(--x-spacing-1);
  right: var(--x-spacing-1);
  bottom: var(--x-spacing-1);
  width: var(--x-spacing-8);
  overflow: hidden;
  border-radius: var(--x-input-number-step-layer-border-radius);
  opacity: 0;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  /*
   * 图标尺寸跟随按钮高度。
   *
   * 步进层绝对定位在 Input 内，层高 = Input 高 - 2×2px，单按钮再占一半：
   *   mini   24px → 20px 层 → 10px 按钮
   *   small  28px → 24px 层 → 12px 按钮
   *   medium 32px → 28px 层 → 14px 按钮
   *   large  36px → 32px 层 → 16px 按钮
   * 原先固定 font-size: 10px，在 mini 下等于按钮高度、且容器 overflow: hidden，
   * 图标会被上下裁切。这里用 calc 按尺寸高度自适应，并让图标居中。
   */
}
.x-input-number-mode-embed .x-input-number--step .x-input-number--step--button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  font-size: calc((var(--x-input-number-step-layer-height) - 4 * var(--x-spacing-1)) / 2);
  line-height: 1;
  border: none;
  border-color: var(--x-input-number-step-button-color-border);
}
.x-input-number-mode-embed .x-input-number--step .x-input-number--step--button > .x-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
.x-input-number-mode-embed .x-input--suffix {
  justify-content: flex-end;
  min-width: 6px;
}
.x-input-number-mode-embed .x-input--suffix-has-feedback {
  min-width: 32px;
}
.x-input-number-mode-embed .x-input--suffix-has-feedback .x-input-number--step {
  right: 30px;
}
.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input--suffix:has(.x-input-number--suffix), .x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input--suffix:has(.x-input-number--suffix) {
  padding-left: var(--x-spacing-2);
}
.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--step, .x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--step {
  opacity: 1;
}
.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--suffix, .x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--suffix {
  opacity: 0;
  pointer-events: none;
}
.x-input-number-mode-embed.x-input--wrapper:not(.x-input-focus) .x-input-number--step--button:not(.x-input-number--step--button-disabled):hover {
  background-color: var(--x-input-number-step-button-color-bg_default_active);
}
.x-input-number-mode-button .x-input {
  /*
   * 只有内容为步进按钮的标签才去掉内边距和边框：按钮自带外观。
   * 用 :has() 限定是必要的——hide-button 下 prepend/append 是业务插槽内容，
   * 需要保留 Input 普通标签的内边距与边框。
   */
}
.x-input-number-mode-button .x-input--prepend:has(.x-input-number--step--button), .x-input-number-mode-button .x-input--append:has(.x-input-number--step--button) {
  padding: 0;
  border: none;
}
.x-input-number-mode-button .x-input {
  /*
   * 按钮高度不写 100%：外层 .x-input--outer 高度由内容决定，
   * 百分比高度在不定高容器里会退化成内容高度，按钮被压成 16px。
   * 这里让按钮用自身尺寸档的高度（与 Input 各尺寸 token 同源），
   * 标签则由 flex stretch 撑到与输入框等高。
   */
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button, .x-input-number-mode-button .x-input--append .x-input-number--step--button {
  width: var(--x-input-number-size-default-step-button-width);
  min-width: var(--x-input-number-size-default-step-button-width);
  color: var(--x-input-number-step-button-color);
  background-color: var(--x-input-number-step-button-color-bg_default);
  border-color: var(--x-input-number-step-button-color-border);
  border-radius: 0;
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-button--prefix, .x-input-number-mode-button .x-input--append .x-input-number--step--button .x-button--prefix {
  margin-right: 0;
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-icon, .x-input-number-mode-button .x-input--append .x-input-number--step--button .x-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.x-input-number-mode-button .x-input {
  /*
   * hover / active 反馈。
   *
   * 上面的按钮规则直接声明了 background-color，特异性 (0,3,0) 高于
   * Button 自身的 `.x-button:not(.is-disabled):hover`（只改 --x-button-background-color
   * 变量，实际声明在 (0,1,0) 的 .x-button 上），因此按钮自带的悬停反馈会失效。
   * 这里用同源的步进按钮色板补回 hover / active。
   */
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):hover, .x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):hover {
  background-color: var(--x-input-number-step-button-color-bg_default_hover);
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):active, .x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):active {
  background-color: var(--x-input-number-step-button-color-bg_default_active);
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button {
  border-right: var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:active) {
  border-right-color: var(--x-input-number-step-button-color-border);
}
.x-input-number-mode-button .x-input--append .x-input-number--step--button {
  border-left: var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-input-number-mode-button .x-input--append .x-input-number--step--button:active) {
  border-left-color: var(--x-input-number-step-button-color-border);
}
.x-input-number-mode-button {
  /*
   * readonly 状态色。
   *
   * 上面的按钮规则是 (0,3,0) 特异性，会盖掉通用的
   * `.x-input-number-readonly .x-input-number--step--button`（(0,2,0)）的禁用色，
   * 导致按钮模式在只读时仍显示正常图标色。这里补回禁用色。
   *
   * disabled 不在此列：按钮是 Button 组件，禁用外观由 x-button-is-disabled
   * 的透明度表达，与 Arco 一致，不能再叠加重色。
   */
}
.x-input-number-mode-button.x-input-number-readonly .x-input--prepend .x-input-number--step--button,
.x-input-number-mode-button.x-input-number-readonly .x-input--append .x-input-number--step--button {
  color: var(--x-input-number-step-button-color_disabled);
  background-color: var(--x-input-number-step-button-color-bg_default);
}
.x-input-number-mode-button.x-input-number-size-mini {
  --x-input-number-step-layer-height: var(--x-input-size-mini-height);
}
.x-input-number-mode-button.x-input-number-size-mini .x-input--prepend .x-input-number--step--button,
.x-input-number-mode-button.x-input-number-size-mini .x-input--append .x-input-number--step--button {
  width: var(--x-input-number-size-mini-step-button-width);
  min-width: var(--x-input-number-size-mini-step-button-width);
}
.x-input-number-mode-button.x-input-number-size-small {
  --x-input-number-step-layer-height: var(--x-input-size-small-height);
}
.x-input-number-mode-button.x-input-number-size-small .x-input--prepend .x-input-number--step--button,
.x-input-number-mode-button.x-input-number-size-small .x-input--append .x-input-number--step--button {
  width: var(--x-input-number-size-small-step-button-width);
  min-width: var(--x-input-number-size-small-step-button-width);
}
.x-input-number-mode-button.x-input-number-size-large {
  --x-input-number-step-layer-height: var(--x-input-size-large-height);
}
.x-input-number-mode-button.x-input-number-size-large .x-input--prepend .x-input-number--step--button,
.x-input-number-mode-button.x-input-number-size-large .x-input--append .x-input-number--step--button {
  width: var(--x-input-number-size-large-step-button-width);
  min-width: var(--x-input-number-size-large-step-button-width);
}
.x-input-number-readonly .x-input-number--step--button {
  color: var(--x-input-number-step-button-color_disabled);
  pointer-events: none;
}

.x-input-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: var(--x-input-padding-horizontal);
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  font-size: var(--x-input-size-default-font-size);
  background-color: var(--x-input-color-bg);
  border: var(--x-input-border-width) solid var(--x-input-border-color);
  border-radius: var(--x-input-border-radius);
  cursor: text;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input-tag:hover {
  background-color: var(--x-input-color-bg_hover);
  border-color: var(--x-input-color-border_hover);
}
.x-input-tag:focus-within, .x-input-tag.x-input-tag-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_focus);
  border-color: var(--x-input-color-border_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus);
}
.x-input-tag.x-input-tag-disabled {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
  cursor: not-allowed;
}
.x-input-tag.x-input-tag-disabled:hover {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--prefix,
.x-input-tag.x-input-tag-disabled .x-input-tag--suffix {
  color: inherit;
}
.x-input-tag.x-input-tag-error {
  background-color: var(--x-input-color-bg_error);
  border-color: var(--x-input-color-border_error);
}
.x-input-tag.x-input-tag-error:hover {
  background-color: var(--x-input-color-bg_error_hover);
  border-color: var(--x-input-color-border_error_hover);
}
.x-input-tag.x-input-tag-error:focus-within, .x-input-tag.x-input-tag-error.x-input-tag-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_error_focus);
  border-color: var(--x-input-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus);
}
.x-input-tag .x-input-tag--prefix,
.x-input-tag .x-input-tag--suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /*
   * 显式行高：前后缀常用来放文字（「https://」「.com」「状态」等）。
   * 不声明时宿主行高会沿继承链进入控件外壳、改变其高度。
   * 放在共享 mixin 里可同时覆盖 Input（x-input）与 Select（x-select--view）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  user-select: none;
  /*
   * 图标真实结构是 span.x-icon > svg，svg 不是直接子级——
   * 原先的 `> svg` 选择器从不命中，mini 尺寸的图标字号（12px）因此失效，
   * 图标落到继承的 wrapper 字号 14px，与控件文字（12px）不匹配。
   * 同时用显式 width/height 固定尺寸（只设 font-size 会让 .x-icon 的
   * 1em 基准确认后仍受 flex 收缩影响，参见 select-view 的同类修复）。
   */
}
.x-input-tag .x-input-tag--prefix > .x-icon,
.x-input-tag .x-input-tag--suffix > .x-icon {
  width: var(--x-input-size-default-icon-suffix-size);
  height: var(--x-input-size-default-icon-suffix-size);
  font-size: var(--x-input-size-default-icon-suffix-size);
}
.x-input-tag .x-input-tag--prefix > .x-icon > svg,
.x-input-tag .x-input-tag--suffix > .x-icon > svg {
  width: 1em;
  height: 1em;
}
.x-input-tag .x-input-tag--prefix {
  padding-right: var(--x-input-padding-horizontal);
  color: var(--x-input-color-prefix-text);
}
.x-input-tag .x-input-tag--suffix {
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-suffix-text);
}
.x-input-tag .x-input-tag--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-input-tag .x-input-tag--clear-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--x-input-margin-left-clear-btn);
  color: var(--x-input-color-icon-clear);
  font-size: var(--x-input-size-icon-clear);
  visibility: hidden;
  cursor: pointer;
  /* 只切 visibility 会瞬间跳变，补 opacity 过渡与其余表单控件一致 */
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input-tag .x-input-tag--clear-btn > svg {
  position: relative;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-input-tag:hover .x-input-tag--clear-btn, .x-input-tag:focus-within .x-input-tag--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-input-tag:not(.x-input-tag-focus) .x-input-tag-icon-hover:hover::before {
  background-color: var(--x-input-color-icon-clear-bg_hover);
}
.x-input-tag.x-input-tag-has-tag {
  padding-right: var(--x-input-tag-padding-horizontal);
  padding-left: var(--x-input-tag-padding-horizontal);
}
.x-input-tag.x-input-tag-has-prefix {
  padding-left: var(--x-input-padding-horizontal);
}
.x-input-tag {
  /*
   * prefix 插槽内部常放文字（如「标签」），必须显式声明行高：
   * 兄弟节点 .x-input-tag--inner 设了 line-height: 0，宿主行高也会沿继承链下来，
   * 不声明时 prefix 文字的行高完全取决于外部环境。
   */
}
.x-input-tag .x-input-tag--prefix {
  line-height: var(--x-line-height-base);
}
.x-input-tag.x-input-tag-has-suffix {
  padding-right: var(--x-input-padding-horizontal);
}
.x-input-tag .x-input-tag--inner {
  flex: 1;
  overflow: hidden;
  line-height: 0;
}
.x-input-tag .x-input-tag--inner.x-input-tag-nowrap {
  display: flex;
  flex-wrap: wrap;
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: var(--x-input-tag-tag-margin-right);
  color: var(--x-input-tag-color-text_default);
  font-size: var(--x-input-tag-tag-font-size);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--x-input-tag-tag-color-bg);
  border-color: var(--x-input-tag-tag-color-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red {
  color: var(--x-tag-color-red-text);
  background-color: var(--x-tag-color-red-bg);
  border-color: var(--x-tag-color-red-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red.x-tag-bordered {
  border-color: var(--x-tag-color-red-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered {
  color: var(--x-tag-color-orangered-text);
  background-color: var(--x-tag-color-orangered-bg);
  border-color: var(--x-tag-color-orangered-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered.x-tag-bordered {
  border-color: var(--x-tag-color-orangered-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange {
  color: var(--x-tag-color-orange-text);
  background-color: var(--x-tag-color-orange-bg);
  border-color: var(--x-tag-color-orange-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange.x-tag-bordered {
  border-color: var(--x-tag-color-orange-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold {
  color: var(--x-tag-color-gold-text);
  background-color: var(--x-tag-color-gold-bg);
  border-color: var(--x-tag-color-gold-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold.x-tag-bordered {
  border-color: var(--x-tag-color-gold-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime {
  color: var(--x-tag-color-lime-text);
  background-color: var(--x-tag-color-lime-bg);
  border-color: var(--x-tag-color-lime-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime.x-tag-bordered {
  border-color: var(--x-tag-color-lime-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green {
  color: var(--x-tag-color-green-text);
  background-color: var(--x-tag-color-green-bg);
  border-color: var(--x-tag-color-green-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green.x-tag-bordered {
  border-color: var(--x-tag-color-green-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan {
  color: var(--x-tag-color-cyan-text);
  background-color: var(--x-tag-color-cyan-bg);
  border-color: var(--x-tag-color-cyan-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan.x-tag-bordered {
  border-color: var(--x-tag-color-cyan-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue {
  color: var(--x-tag-color-better-blue-text);
  background-color: var(--x-tag-color-better-blue-bg);
  border-color: var(--x-tag-color-better-blue-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue.x-tag-bordered {
  border-color: var(--x-tag-color-better-blue-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue {
  color: var(--x-tag-color-blue-text);
  background-color: var(--x-tag-color-blue-bg);
  border-color: var(--x-tag-color-blue-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue.x-tag-bordered {
  border-color: var(--x-tag-color-blue-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple {
  color: var(--x-tag-color-purple-text);
  background-color: var(--x-tag-color-purple-bg);
  border-color: var(--x-tag-color-purple-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple.x-tag-bordered {
  border-color: var(--x-tag-color-purple-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple {
  color: var(--x-tag-color-pink-purple-text);
  background-color: var(--x-tag-color-pink-purple-bg);
  border-color: var(--x-tag-color-pink-purple-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple.x-tag-bordered {
  border-color: var(--x-tag-color-pink-purple-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta {
  color: var(--x-tag-color-magenta-text);
  background-color: var(--x-tag-color-magenta-bg);
  border-color: var(--x-tag-color-magenta-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta.x-tag-bordered {
  border-color: var(--x-tag-color-magenta-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray {
  color: var(--x-tag-color-gray-text);
  background-color: var(--x-tag-color-gray-bg);
  border-color: var(--x-tag-color-gray-border);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray.x-tag-bordered {
  border-color: var(--x-tag-color-gray-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag .x-icon-hover:hover::before {
  background-color: var(--x-input-tag-tag-remove-icon-color-bg);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color {
  color: var(--x-tag-custom-color-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before {
  background-color: var(--x-tag-custom-color-icon-bg_hover);
}
.x-input-tag .x-input-tag--inner.x-input-tag-nowrap .x-input-tag--tag {
  white-space: nowrap;
  word-break: normal;
}
.x-input-tag .x-input-tag--inner .x-input-tag--input {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--x-line-height-base);
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: var(--x-color-transparent);
}
.x-input-tag .x-input-tag--inner .x-input-tag--input::placeholder {
  color: var(--x-input-color-placeholder-text);
}
.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]::placeholder {
  color: var(--x-input-color-text_disabled);
}
.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-input-tag .x-input-tag--inner .x-input-tag--input {
  box-sizing: border-box;
  /*
   * 字号必须显式继承。
   *
   * input-style() 不含 font-size，而 <input> 按 UA 规范不继承父级字体，
   * 因此这个输入框一直渲染在 UA 默认的 13.3333px 上：既与标签字号
   * （12/14px）不一致，也让 .--mirror 的测宽失准（mirror 用正确字号测，
   * 实际输入框用 13.33px 渲染，mini 尺寸下文字会被裁切）。
   */
  font-size: inherit;
}
.x-input-tag .x-input-tag--mirror {
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre;
  visibility: hidden;
  pointer-events: none;
}
.x-input-tag.x-input-tag-focus .x-input-tag--tag {
  background-color: var(--x-input-tag-tag-color-bg_focus);
  border-color: var(--x-input-tag-tag-color-border_focus);
}
.x-input-tag.x-input-tag-focus .x-input-tag--tag .x-icon-hover:hover::before {
  background-color: var(--x-input-tag-tag-remove-icon-color-bg_focus);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-red {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orangered {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orange {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gold {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-lime {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-green {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-cyan {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-better-blue {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-blue {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-purple {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-pink-purple {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-magenta {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gray {
  color: var(--x-input-tag-color-text_disabled);
  background-color: var(--x-input-tag-tag-color-bg_disabled);
  border-color: var(--x-input-tag-tag-color-border_disabled);
}
.x-input-tag.x-input-tag-readonly, .x-input-tag.x-input-tag-disabled-input {
  cursor: default;
}
.x-input-tag.x-input-tag-size-mini {
  font-size: var(--x-input-tag-size-mini-font-size);
}
.x-input-tag.x-input-tag-size-mini .x-input-tag--inner {
  padding-top: var(--x-input-tag-size-mini-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-mini-padding-top-bottom);
}
.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,
.x-input-tag.x-input-tag-size-mini .x-input-tag--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-mini-tag-height-2px);
  vertical-align: middle;
}
.x-input-tag.x-input-tag-size-mini .x-input-tag--tag {
  height: auto;
  min-height: var(--x-input-tag-size-mini-tag-height);
}
.x-input-tag.x-input-tag-size-mini .x-input-tag--input {
  height: var(--x-input-tag-size-mini-tag-height);
}
.x-input-tag.x-input-tag-size-medium {
  font-size: var(--x-input-tag-size-medium-font-size);
}
.x-input-tag.x-input-tag-size-medium .x-input-tag--inner {
  padding-top: var(--x-input-tag-size-medium-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-medium-padding-top-bottom);
}
.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,
.x-input-tag.x-input-tag-size-medium .x-input-tag--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-medium-tag-height-2px);
  vertical-align: middle;
}
.x-input-tag.x-input-tag-size-medium .x-input-tag--tag {
  height: auto;
  min-height: var(--x-input-tag-size-medium-tag-height);
}
.x-input-tag.x-input-tag-size-medium .x-input-tag--input {
  height: var(--x-input-tag-size-medium-tag-height);
}
.x-input-tag.x-input-tag-size-small {
  font-size: var(--x-input-tag-size-small-font-size);
}
.x-input-tag.x-input-tag-size-small .x-input-tag--inner {
  padding-top: var(--x-input-tag-size-small-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-small-padding-top-bottom);
}
.x-input-tag.x-input-tag-size-small .x-input-tag--tag,
.x-input-tag.x-input-tag-size-small .x-input-tag--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-small-tag-height-2px);
  vertical-align: middle;
}
.x-input-tag.x-input-tag-size-small .x-input-tag--tag {
  height: auto;
  min-height: var(--x-input-tag-size-small-tag-height);
}
.x-input-tag.x-input-tag-size-small .x-input-tag--input {
  height: var(--x-input-tag-size-small-tag-height);
}
.x-input-tag.x-input-tag-size-large {
  font-size: var(--x-input-tag-size-large-font-size);
}
.x-input-tag.x-input-tag-size-large .x-input-tag--inner {
  padding-top: var(--x-input-tag-size-large-padding-top-bottom);
  padding-bottom: var(--x-input-tag-size-large-padding-top-bottom);
}
.x-input-tag.x-input-tag-size-large .x-input-tag--tag,
.x-input-tag.x-input-tag-size-large .x-input-tag--input {
  margin-top: var(--x-input-tag-tag-margin-vertical-division-2);
  margin-bottom: var(--x-input-tag-tag-margin-vertical-division-2);
  line-height: var(--x-input-tag-size-large-tag-height-2px);
  vertical-align: middle;
}
.x-input-tag.x-input-tag-size-large .x-input-tag--tag {
  height: auto;
  min-height: var(--x-input-tag-size-large-tag-height);
}
.x-input-tag.x-input-tag-size-large .x-input-tag--input {
  height: var(--x-input-tag-size-large-tag-height);
}

/*
 * 键盘用户无法 hover。焦点在组件内部时同样展示清空按钮，
 * 否则 visibility: hidden 会让它无法被 Tab 聚焦。
 * 只作用于 InputTag，避免影响共用 mixin 的 Select。
 */
.x-input-tag:focus-within .x-input-tag--clear-btn {
  visibility: visible;
  opacity: 1;
}

.input-tag-zoom-enter-from {
  transform: scale(0.5, 0.5);
  opacity: 0;
}

.input-tag-zoom-enter-to {
  transform: scale(1, 1);
  opacity: 1;
}

.input-tag-zoom-enter-active {
  transition: all var(--x-transition-duration-3) var(--x-transition-timing-function-standard);
}

.input-tag-zoom-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.input-tag-zoom-leave-to {
  transform: scale(0.5, 0.5);
  opacity: 0;
}

.input-tag-zoom-leave-active {
  position: absolute;
  transition: all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}

.input-tag-zoom-move {
  transition: all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
}

:root {
  --x-radio-color-border: var(--x-color-neutral-3);
  --x-radio-color-border_hover: var(--x-color-neutral-3);
  --x-radio-color-border_disabled: var(--x-color-neutral-3);
  --x-radio-color-bg: var(--x-color-bg-2);
  --x-radio-color-bg_checked: var(--x-color-primary-6);
  --x-radio-border-radius: var(--x-border-radius-circle);
  --x-radio-color-bg_disabled: var(--x-color-fill-2);
  --x-radio-color-bg_checked_disabled: var(--x-color-primary-light-3);
  --x-radio-color-dot-bg_checked_disabled: var(--x-radio-color-bg_disabled);
  --x-radio-color-text: var(--x-color-text-1);
  --x-radio-color-text_disabled: var(--x-color-text-4);
  --x-radio-color-text_checked_disabled: var(--x-color-text-4);
  --x-radio-font-text-size: var(--x-font-size-body-3);
  --x-radio-font-text-size_large: var(--x-font-size-body-3);
  --x-radio-font-text-size_mini: var(--x-font-size-body-1);
  --x-radio-font-text-size_small: var(--x-font-size-body-3);
  --x-radio-margin-text-left: var(--x-spacing-4);
  --x-radio-mask-bg-color-bg: var(--x-icon-hover-color-bg);
  --x-radio-group-margin-right: var(--x-spacing-8);
  --x-radio-group-button-color-bg: var(--x-color-fill-2);
  --x-radio-button-padding-horizontal: var(--x-spacing-6);
  --x-radio-button-color-bg_active: var(--x-color-bg-5);
  --x-radio-button-color-bg_hover: var(--x-radio-button-color-bg_active);
  --x-radio-button-color-text_active: var(--x-color-primary-6);
  --x-radio-button-font-text-weight_active: var(--x-font-weight-500);
  --x-radio-button-color-text_hover: var(--x-radio-color-text);
  --x-radio-button-border-radius: var(--x-border-radius-small);
  --x-radio-button-bg-border-radius: var(--x-radio-button-border-radius);
  --x-radio-button-color-bg: var(--x-color-transparent);
  --x-radio-button-color-text: var(--x-color-text-2);
  --x-radio-button-color-bg_disabled: var(--x-color-transparent);
  --x-radio-button-color-text_disabled: var(--x-color-text-4);
  --x-radio-button-color-bg_checked_disabled: var(--x-radio-button-color-bg_active);
  --x-radio-button-color-text_checked_disabled: var(--x-color-primary-light-3);
  --x-radio-button-color-separator-bg: var(--x-color-neutral-3);
  --x-radio-button-size-separator-height: 14px;
  --x-radio-group-size-line-height_vertical: var(--x-size-8);
}

.x-radio > input[type=radio],
.x-radio--button > input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
.x-radio > input[type=radio]:focus-visible + .x-radio-icon-hover::before,
.x-radio--button > input[type=radio]:focus-visible + .x-radio-icon-hover::before {
  background-color: var(--x-icon-hover-color-bg);
}

.x-icon-hover.x-radio-icon-hover::before {
  width: 24px;
  height: 24px;
}

.x-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 5px;
  font-size: var(--x-radio-font-text-size);
  /*
   * 原来是 line-height: unset，会把宿主行高直接带进标签文字
   * （实测宿主 lh=3 时标签盒变高、单选框垂直位置随之偏移）。
   * 改为显式声明，容器已用 align-items: center 居中对齐。
   */
  line-height: var(--x-line-height-base);
  cursor: pointer;
}
.x-radio--label {
  margin-left: var(--x-radio-margin-text-left);
  color: var(--x-radio-color-text);
}
.x-radio-icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 2px solid var(--x-radio-color-border);
  border-radius: var(--x-radio-border-radius);
}
.x-radio-icon::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  background-color: var(--x-radio-color-bg);
  border-radius: var(--x-radio-border-radius);
  transform: scale(1);
  transition: transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
  content: "";
}
.x-radio:hover .x-radio-icon {
  border-color: var(--x-radio-color-border_hover);
}
.x-radio-checked .x-radio-icon {
  background-color: var(--x-radio-color-bg_checked);
  border-color: var(--x-radio-color-bg_checked);
}
.x-radio-checked .x-radio-icon::after {
  background-color: var(--x-color-white);
  transform: scale(0.4);
}
.x-radio-checked:hover .x-radio-icon {
  border-color: var(--x-radio-color-bg_checked);
}
.x-radio-disabled {
  cursor: not-allowed;
}
.x-radio-disabled .x-radio-icon-hover {
  cursor: not-allowed;
}
.x-radio-disabled .x-radio--label {
  color: var(--x-radio-color-text_disabled);
}
.x-radio-disabled .x-radio-icon {
  border-color: var(--x-radio-color-border_disabled);
}
.x-radio-disabled .x-radio-icon::after {
  background-color: var(--x-radio-color-bg_disabled);
}
.x-radio-disabled:hover .x-radio-icon {
  border-color: var(--x-radio-color-border_disabled);
}
.x-radio-checked.x-radio-disabled .x-radio-icon, .x-radio-checked.x-radio-disabled:hover .x-radio-icon {
  background-color: var(--x-radio-color-bg_checked_disabled);
  border-color: var(--x-color-transparent);
}
.x-radio-checked.x-radio-disabled .x-radio-icon::after {
  background-color: var(--x-radio-color-dot-bg_checked_disabled);
}
.x-radio-checked.x-radio-disabled .x-radio--label {
  color: var(--x-radio-color-text_checked_disabled);
}

.x-radio:hover .x-radio-icon-hover::before {
  background-color: var(--x-radio-mask-bg-color-bg);
}
.x-radio-size-mini {
  padding-left: 4px;
  font-size: var(--x-radio-font-text-size_mini);
}
.x-radio-size-mini .x-radio-icon-hover::before {
  width: 20px;
  height: 20px;
}
.x-radio-size-mini .x-radio-icon {
  width: 12px;
  height: 12px;
  line-height: 12px;
}
.x-radio-size-mini .x-radio-icon::after {
  width: 8px;
  height: 8px;
}
.x-radio-size-small {
  padding-left: 3px;
  font-size: var(--x-radio-font-text-size_small);
}
.x-radio-size-small .x-radio-icon-hover::before {
  width: 20px;
  height: 20px;
}
.x-radio-size-small .x-radio-icon {
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.x-radio-size-small .x-radio-icon::after {
  width: 10px;
  height: 10px;
}
.x-radio-size-medium {
  padding-left: 5px;
  font-size: var(--x-radio-font-text-size);
}
.x-radio-size-medium .x-radio-icon-hover::before {
  width: 24px;
  height: 24px;
}
.x-radio-size-medium .x-radio-icon {
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.x-radio-size-medium .x-radio-icon::after {
  width: 10px;
  height: 10px;
}
.x-radio-size-large {
  padding-left: 6px;
  font-size: var(--x-radio-font-text-size_large);
}
.x-radio-size-large .x-radio-icon-hover::before {
  width: 28px;
  height: 28px;
}
.x-radio-size-large .x-radio-icon {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.x-radio-size-large .x-radio-icon::after {
  width: 12px;
  height: 12px;
}

.x-radio--group {
  display: inline-block;
  box-sizing: border-box;
}
.x-radio--group .x-radio {
  margin-right: var(--x-radio-group-margin-right);
}
.x-radio--group--button {
  display: inline-flex;
  padding: 1.5px;
  line-height: 26px;
  background-color: var(--x-radio-group-button-color-bg);
  border-radius: var(--x-radio-button-bg-border-radius);
}

.x-radio--button {
  position: relative;
  display: inline-block;
  margin: 1.5px;
  color: var(--x-radio-button-color-text);
  font-size: var(--x-radio-font-text-size);
  line-height: 26px;
  background-color: var(--x-radio-button-color-bg);
  border-radius: var(--x-radio-button-border-radius);
  cursor: pointer;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-radio--button--content {
  position: relative;
  display: block;
  padding: 0 var(--x-radio-button-padding-horizontal);
}
.x-radio--button > input[type=radio]:focus-visible + .x-radio--button--content {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 1px;
  border-radius: var(--x-radio-button-border-radius);
}

.x-radio--button:not(:first-of-type)::before {
  position: absolute;
  top: 50%;
  left: -1.5px;
  display: block;
  width: 1px;
  height: var(--x-radio-button-size-separator-height);
  background-color: var(--x-radio-button-color-separator-bg);
  transform: translateY(-50%);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  content: "";
}
.x-radio--button:hover::before, .x-radio--button:hover + .x-radio--button::before, .x-radio--button.x-radio-checked::before, .x-radio--button.x-radio-checked + .x-radio--button::before {
  opacity: 0;
}
.x-radio--button:hover {
  color: var(--x-radio-button-color-text_hover);
  background-color: var(--x-radio-button-color-bg_hover);
}
.x-radio--button.x-radio-checked {
  color: var(--x-radio-button-color-text_active);
  background-color: var(--x-radio-button-color-bg_active);
}
.x-radio--button.x-radio-disabled {
  color: var(--x-radio-button-color-text_disabled);
  background-color: var(--x-radio-button-color-bg_disabled);
  cursor: not-allowed;
}
.x-radio--button.x-radio-disabled.x-radio-checked {
  color: var(--x-radio-button-color-text_checked_disabled);
  background-color: var(--x-radio-button-color-bg_checked_disabled);
}

.x-radio--group-size-small {
  line-height: 28px;
}
.x-radio--group-size-small.x-radio--group--button,
.x-radio--group-size-small .x-radio--button {
  font-size: var(--x-radio-font-text-size_small);
  line-height: 22px;
}
.x-radio--group-size-large {
  line-height: 36px;
}
.x-radio--group-size-large.x-radio--group--button,
.x-radio--group-size-large .x-radio--button {
  font-size: var(--x-radio-font-text-size_large);
  line-height: 30px;
}
.x-radio--group-size-mini {
  line-height: 24px;
}
.x-radio--group-size-mini.x-radio--group--button,
.x-radio--group-size-mini .x-radio--button {
  font-size: var(--x-radio-font-text-size_mini);
  line-height: 18px;
}

.x-radio--group-direction-vertical .x-radio {
  display: flex;
  margin-right: 0;
  line-height: var(--x-radio-group-size-line-height_vertical);
}

:root {
  /**********************************************
  * Popup Box
  **********************************************/
  --x-select-popup-max-height: var(--x-size-50);
  --x-select-popup-border-radius: var(--x-border-radius-medium);
  --x-select-popup-padding-vertical: var(--x-spacing-2);
  --x-select-popup-font-size: var(--x-font-size-body-3);
  --x-select-popup-color-bg: var(--x-color-bg-elevated);
  --x-select-popup-color-border: var(--x-color-transparent);
  --x-select-popup-box-shadow: var(--x-shadow-popover);
  --x-select-popup-empty-min-height: var(--x-size-14);
  /**********************************************
   * Popup Options
   * status: default / disabled / selected / hover
   **********************************************/
  --x-select-popup-option-height: var(--x-size-9);
  --x-select-popup-option-font-weight_selected: var(--x-font-weight-500);
  --x-select-signal-popup-option-padding-horizontal: var(--x-spacing-6);
  --x-select-multi-popup-option-padding-horizontal: var(--x-spacing-2);
  --x-select-popup-option-color-bg_default: var(--x-color-bg-elevated);
  --x-select-popup-option-color-bg_hover: var(--x-color-fill-2);
  --x-select-popup-option-color-bg_selected: var(--x-color-bg-elevated);
  --x-select-popup-option-color-bg_disabled: var(--x-color-bg-elevated);
  --x-select-popup-option-color-text_default: var(--x-color-text-primary);
  --x-select-popup-option-color-text_hover: var(--x-color-text-primary);
  --x-select-popup-option-color-text_selected: var(--x-color-text-primary);
  --x-select-popup-option-color-text_disabled: var(--x-color-text-disabled);
  --x-select-popup-option-color-highlight-text: var(--x-color-text-primary);
  --x-select-popup-option-font-highlight-weight: var(--x-font-weight-500);
  --x-select-popup-group-title-height: var(--x-size-5);
  --x-select-popup-group-title-padding-horizontal: var(--x-spacing-6);
  --x-select-popup-group-title-padding-top: var(--x-spacing-4);
  --x-select-popup-group-title-font-size: var(--x-font-size-body-1);
  --x-select-popup-group-title-color-text: var(--x-color-text-tertiary);
  --x-dropdown-margin-left-suffix-icon: var(--x-spacing-6);
}

.x-select--dropdown {
  box-sizing: border-box;
  padding: var(--x-select-popup-padding-vertical) 0;
  background-color: var(--x-select-popup-color-bg);
  border: 1px solid var(--x-select-popup-color-border);
  border-radius: var(--x-select-popup-border-radius);
  box-shadow: var(--x-select-popup-box-shadow);
}
.x-select--dropdown--loading, .x-select--dropdown--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--x-select-popup-empty-min-height);
  padding: var(--x-select-popup-padding-vertical) var(--x-select-signal-popup-option-padding-horizontal);
}
.x-select--dropdown--list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.x-select--dropdown--list-wrapper {
  max-height: var(--x-select-popup-max-height);
  overflow-y: auto;
}
.x-select--dropdown .x-select--option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--x-select-popup-option-height);
  padding: 0 var(--x-select-signal-popup-option-padding-horizontal);
  color: var(--x-select-popup-option-color-text_default);
  font-size: var(--x-select-popup-font-size);
  line-height: var(--x-select-popup-option-height);
  text-align: left;
  background-color: var(--x-select-popup-option-color-bg_default);
  cursor: pointer;
}
.x-select--dropdown .x-select--option--content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-select--dropdown .x-select--option--checkbox {
  overflow: hidden;
}
.x-select--dropdown .x-select--option--checkbox .x-checkbox--label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-select--dropdown .x-select--option-has-suffix {
  justify-content: space-between;
}
.x-select--dropdown .x-select--option-selected {
  color: var(--x-select-popup-option-color-text_selected);
  font-weight: var(--x-select-popup-option-font-weight_selected);
  background-color: var(--x-select-popup-option-color-bg_selected);
}
.x-select--dropdown .x-select--option-active, .x-select--dropdown .x-select--option:not(.x-select--dropdown .x-select--option-disabled):hover {
  color: var(--x-select-popup-option-color-text_hover);
  background-color: var(--x-select-popup-option-color-bg_hover);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-select--dropdown .x-select--option-disabled {
  color: var(--x-select-popup-option-color-text_disabled);
  background-color: var(--x-select-popup-option-color-bg_disabled);
  cursor: not-allowed;
}
.x-select--dropdown .x-select--option--icon {
  display: inline-flex;
  margin-right: 8px;
}
.x-select--dropdown .x-select--option--suffix {
  margin-left: var(--x-dropdown-margin-left-suffix-icon);
}
.x-select--dropdown .x-select--option--group--title:first-child {
  margin-top: var(--x-select-popup-group-title-padding-top);
}
.x-select--dropdown .x-select--option--group--title {
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--x-select-popup-group-title-padding-top);
  padding: 0 var(--x-select-popup-group-title-padding-horizontal);
  color: var(--x-select-popup-group-title-color-text);
  font-size: var(--x-select-popup-group-title-font-size);
  line-height: var(--x-select-popup-group-title-height);
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-select--dropdown.x-select--dropdown-has-header {
  padding-top: 0;
}
.x-select--dropdown-header {
  border-bottom: 1px solid var(--x-select-popup-color-border);
}
.x-select--dropdown.x-select--dropdown-has-footer {
  padding-bottom: 0;
}
.x-select--dropdown-footer {
  border-top: 1px solid var(--x-select-popup-color-border);
}

.x-slider {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.x-slider-vertical {
  display: inline-flex;
  align-items: flex-start;
  width: auto;
  min-width: var(--x-size-3)10;
  height: auto;
}
.x-slider-with-marks {
  margin-bottom: var(--x-spacing-9);
  padding: var(--x-spacing-8) var(--x-spacing-8);
}
.x-slider-vertical.x-slider-with-marks {
  margin-bottom: 0;
  padding: 0;
}
.x-slider--track {
  position: relative;
  flex: 1;
  width: 100%;
  height: var(--x-size-3);
  cursor: pointer;
}
.x-slider--track::before {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--x-color-fill-4);
  border-radius: 2px;
  transform: translateY(-50%);
  content: "";
}
.x-slider--track.x-slider--track-vertical {
  width: var(--x-size-3);
  max-width: var(--x-size-3);
  height: 100%;
  min-height: 200px;
  margin-right: 0;
  margin-bottom: calc(var(--x-size-3) / 2);
  margin-top: calc(var(--x-size-3) / 2);
  transform: translateY(0);
}
.x-slider--track.x-slider--track-vertical::before {
  top: unset;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.x-slider--track.x-slider--track-disabled::before {
  background-color: var(--x-color-fill-2);
}
.x-slider--track.x-slider--track-disabled .x-slider--bar {
  background-color: var(--x-color-fill-4);
}
.x-slider--track.x-slider--track-disabled .x-slider--btn {
  cursor: not-allowed;
}
.x-slider--track.x-slider--track-disabled .x-slider--btn::after {
  border-color: var(--x-color-fill-4);
}
.x-slider--track.x-slider--track-disabled .x-slider--dots .x-slider--dot {
  border-color: var(--x-color-fill-2);
}
.x-slider--track.x-slider--track-disabled .x-slider--dots .x-slider--dot-active {
  border-color: var(--x-color-fill-4);
}
.x-slider--track.x-slider--track-disabled .x-slider--ticks .x-slider--tick {
  background: var(--x-color-fill-2);
}
.x-slider--track.x-slider--track-disabled .x-slider--ticks .x-slider--tick-active {
  background: var(--x-color-fill-4);
}
.x-slider--bar {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: var(--x-color-primary-6);
  border-radius: 2px;
  transform: translateY(-50%);
}
.x-slider--track-vertical .x-slider--bar {
  top: unset;
  left: 50%;
  width: 2px;
  height: unset;
  transform: translateX(-50%);
}
.x-slider--btn {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--x-size-3);
  height: var(--x-size-3);
  transform: translateX(-50%);
}
.x-slider--btn::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: var(--x-size-3);
  height: var(--x-size-3);
  background: var(--x-color-bg-2);
  border: var(--x-border-2) solid var(--x-color-primary-6);
  border-radius: 50%;
  transition: all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot);
  content: "";
}
.x-slider--btn.x-slider-active::after, .x-slider--btn:hover::after {
  box-shadow: var(--x-shadow1-down);
  transform: scale(calc(14px / var(--x-size-3)));
}
.x-slider--track-vertical .x-slider--btn {
  top: unset;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}
.x-slider--marks {
  position: absolute;
  top: var(--x-size-3);
  width: 100%;
}
.x-slider--marks .x-slider--mark {
  position: absolute;
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-3);
  line-height: 1;
  transform: translateX(-50%);
  cursor: pointer;
}
.x-slider--track-vertical .x-slider--marks {
  top: 0;
  left: calc(var(--x-size-3) + 3px);
  height: 100%;
}
.x-slider--track-vertical .x-slider--marks .x-slider--mark {
  transform: translateY(50%);
}
.x-slider--dots {
  height: 100%;
}
.x-slider--dots .x-slider--dot--wrapper {
  position: absolute;
  top: 50%;
  font-size: var(--x-font-size-body-1);
  transform: translate(-50%, -50%);
}
.x-slider--track-vertical .x-slider--dots .x-slider--dot--wrapper {
  top: unset;
  left: 50%;
  transform: translate(-50%, 50%);
}
.x-slider--dots .x-slider--dot--wrapper .x-slider--dot {
  box-sizing: border-box;
  width: var(--x-size-2);
  height: var(--x-size-2);
  background-color: var(--x-color-bg-2);
  border: var(--x-border-2) solid var(--x-color-fill-4);
  border-radius: 50%;
}
.x-slider--dots .x-slider--dot--wrapper .x-slider--dot-active {
  border-color: var(--x-color-primary-6);
}
.x-slider--ticks .x-slider--tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 3px;
  margin-top: calc(2px / -2);
  background: var(--x-color-fill-4);
  transform: translate(-50%, -100%);
}
.x-slider--ticks .x-slider--tick-active {
  background: var(--x-color-primary-6);
}
.x-slider-vertical .x-slider--ticks .x-slider--tick {
  top: unset;
  left: 50%;
  width: 3px;
  height: 1px;
  margin-top: unset;
  transform: translate(calc(2px / 2), 50%);
}
.x-slider--input {
  display: flex;
  align-items: center;
  margin-left: var(--x-spacing-8);
}
.x-slider-vertical .x-slider--input {
  margin-left: var(--x-spacing-8);
}
.x-slider-vertical.x-slider .x-slider--input {
  flex-direction: column;
  align-items: center;
}
.x-slider--input > .x-input-number {
  width: var(--x-size-15);
  height: var(--x-size-8);
  overflow: visible;
  line-height: normal;
}
.x-slider--input > .x-input-number input {
  text-align: center;
}
.x-slider--input-hyphens {
  margin: 0 calc((var(--x-size-5) - var(--x-size-2)) / 2);
  width: var(--x-size-2);
  height: 2px;
  background: var(--x-color-neutral-6);
}
.x-slider-vertical .x-slider--input-hyphens {
  width: 2px;
  height: var(--x-size-2);
  margin: calc((var(--x-size-5) - var(--x-size-2)) / 2) 0;
}
.x-slider-size-mini.x-slider-vertical {
  min-width: 20px;
}
.x-slider-size-mini .x-slider--track {
  height: 10px;
}
.x-slider-size-mini .x-slider--track::before {
  height: 2px;
  border-radius: 2px;
}
.x-slider-size-mini .x-slider--track.x-slider--track-vertical {
  width: 10px;
  max-width: 10px;
  margin-top: calc(10px / 2);
  margin-bottom: calc(10px / 2);
}
.x-slider-size-mini .x-slider--track.x-slider--track-vertical::before {
  width: 2px;
  height: 100%;
}
.x-slider-size-mini .x-slider--bar {
  height: 2px;
  border-radius: 2px;
}
.x-slider--track-vertical .x-slider-size-mini .x-slider--bar {
  width: 2px;
}
.x-slider-size-mini .x-slider--btn {
  width: 10px;
  height: 10px;
}
.x-slider-size-mini .x-slider--btn::after {
  width: 10px;
  height: 10px;
}
.x-slider-size-mini .x-slider--btn.x-slider-active::after, .x-slider-size-mini .x-slider--btn:hover::after {
  transform: scale(calc(12px / 10px));
}
.x-slider-size-mini .x-slider--marks {
  top: 10px;
}
.x-slider-size-mini .x-slider--marks .x-slider--mark {
  font-size: var(--x-font-size-body-1);
}
.x-slider--track-vertical .x-slider-size-mini .x-slider--marks {
  left: calc(10px + 3px);
}
.x-slider-size-mini .x-slider--dot {
  width: 6px;
  height: 6px;
}
.x-slider-size-small.x-slider-vertical {
  min-width: 22px;
}
.x-slider-size-small .x-slider--track {
  height: 12px;
}
.x-slider-size-small .x-slider--track::before {
  height: 2px;
  border-radius: 2px;
}
.x-slider-size-small .x-slider--track.x-slider--track-vertical {
  width: 12px;
  max-width: 12px;
  margin-top: calc(12px / 2);
  margin-bottom: calc(12px / 2);
}
.x-slider-size-small .x-slider--track.x-slider--track-vertical::before {
  width: 2px;
  height: 100%;
}
.x-slider-size-small .x-slider--bar {
  height: 2px;
  border-radius: 2px;
}
.x-slider--track-vertical .x-slider-size-small .x-slider--bar {
  width: 2px;
}
.x-slider-size-small .x-slider--btn {
  width: 12px;
  height: 12px;
}
.x-slider-size-small .x-slider--btn::after {
  width: 12px;
  height: 12px;
}
.x-slider-size-small .x-slider--btn.x-slider-active::after, .x-slider-size-small .x-slider--btn:hover::after {
  transform: scale(calc(14px / 12px));
}
.x-slider-size-small .x-slider--marks {
  top: 12px;
}
.x-slider-size-small .x-slider--marks .x-slider--mark {
  font-size: var(--x-font-size-body-1);
}
.x-slider--track-vertical .x-slider-size-small .x-slider--marks {
  left: calc(12px + 3px);
}
.x-slider-size-small .x-slider--dot {
  width: 8px;
  height: 8px;
}
.x-slider-size-medium.x-slider-vertical {
  min-width: 22px;
}
.x-slider-size-medium .x-slider--track {
  height: 12px;
}
.x-slider-size-medium .x-slider--track::before {
  height: 2px;
  border-radius: 2px;
}
.x-slider-size-medium .x-slider--track.x-slider--track-vertical {
  width: 12px;
  max-width: 12px;
  margin-top: calc(12px / 2);
  margin-bottom: calc(12px / 2);
}
.x-slider-size-medium .x-slider--track.x-slider--track-vertical::before {
  width: 2px;
  height: 100%;
}
.x-slider-size-medium .x-slider--bar {
  height: 2px;
  border-radius: 2px;
}
.x-slider--track-vertical .x-slider-size-medium .x-slider--bar {
  width: 2px;
}
.x-slider-size-medium .x-slider--btn {
  width: 12px;
  height: 12px;
}
.x-slider-size-medium .x-slider--btn::after {
  width: 12px;
  height: 12px;
}
.x-slider-size-medium .x-slider--btn.x-slider-active::after, .x-slider-size-medium .x-slider--btn:hover::after {
  transform: scale(calc(14px / 12px));
}
.x-slider-size-medium .x-slider--marks {
  top: 12px;
}
.x-slider-size-medium .x-slider--marks .x-slider--mark {
  font-size: var(--x-font-size-body-3);
}
.x-slider--track-vertical .x-slider-size-medium .x-slider--marks {
  left: calc(12px + 3px);
}
.x-slider-size-medium .x-slider--dot {
  width: 8px;
  height: 8px;
}
.x-slider-size-large.x-slider-vertical {
  min-width: 26px;
}
.x-slider-size-large .x-slider--track {
  height: 16px;
}
.x-slider-size-large .x-slider--track::before {
  height: 4px;
  border-radius: 4px;
}
.x-slider-size-large .x-slider--track.x-slider--track-vertical {
  width: 16px;
  max-width: 16px;
  margin-top: calc(16px / 2);
  margin-bottom: calc(16px / 2);
}
.x-slider-size-large .x-slider--track.x-slider--track-vertical::before {
  width: 4px;
  height: 100%;
}
.x-slider-size-large .x-slider--bar {
  height: 4px;
  border-radius: 4px;
}
.x-slider--track-vertical .x-slider-size-large .x-slider--bar {
  width: 4px;
}
.x-slider-size-large .x-slider--btn {
  width: 16px;
  height: 16px;
}
.x-slider-size-large .x-slider--btn::after {
  width: 16px;
  height: 16px;
}
.x-slider-size-large .x-slider--btn.x-slider-active::after, .x-slider-size-large .x-slider--btn:hover::after {
  transform: scale(calc(18px / 16px));
}
.x-slider-size-large .x-slider--marks {
  top: 16px;
}
.x-slider-size-large .x-slider--marks .x-slider--mark {
  font-size: var(--x-font-size-body-3);
}
.x-slider--track-vertical .x-slider-size-large .x-slider--marks {
  left: calc(16px + 3px);
}
.x-slider-size-large .x-slider--dot {
  width: 10px;
  height: 10px;
}

.x-switch {
  position: relative;
  box-sizing: border-box;
  min-width: var(--x-size-10);
  height: var(--x-size-6);
  padding: 0;
  overflow: hidden;
  line-height: var(--x-size-6);
  vertical-align: middle;
  background-color: var(--x-color-fill-4);
  border: none;
  border-radius: calc(var(--x-size-6) / 2);
  outline: none;
  cursor: pointer;
  transition: background-color var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-switch--handle {
  position: absolute;
  top: calc((var(--x-size-6) - var(--x-size-4)) / 2);
  left: calc((var(--x-size-6) - var(--x-size-4)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x-size-4);
  height: var(--x-size-4);
  color: var(--x-color-text-3);
  font-size: 12px;
  background-color: var(--x-color-white);
  border-radius: 50%;
  transition: all var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-switch--handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.x-switch--handle-icon .x-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.x-switch-checked {
  background-color: var(--x-color-primary);
}
.x-switch-checked .x-switch--handle {
  left: calc(100% - var(--x-size-4) - (var(--x-size-6) - var(--x-size-4)) / 2);
  color: var(--x-color-primary);
}
.x-switch[disabled] .x-switch--handle {
  color: var(--x-color-text-4);
}
.x-switch--text-holder {
  display: inline-block;
  min-width: 1.4em;
  margin: 0 8px 0 calc(var(--x-size-4) + calc((var(--x-size-6) - var(--x-size-4)) / 2) + 6px);
  font-size: var(--x-font-size-caption);
  opacity: 0;
}
.x-switch--text {
  position: absolute;
  top: 0;
  right: 8px;
  left: auto;
  min-width: 1.4em;
  color: var(--x-color-white);
  font-size: var(--x-font-size-caption);
  line-height: inherit;
  text-align: center;
  white-space: nowrap;
}
.x-switch-checked .x-switch--text-holder {
  margin: 0 calc(var(--x-size-4) + calc((var(--x-size-6) - var(--x-size-4)) / 2) + 6px) 0 8px;
}
.x-switch-checked .x-switch--text {
  right: auto;
  left: 8px;
  color: var(--x-color-white);
}
.x-switch[disabled] {
  background-color: var(--x-color-fill-2);
  cursor: not-allowed;
}
.x-switch[disabled] .x-switch--text {
  color: var(--x-color-white);
}
.x-switch[disabled].x-switch-checked {
  background-color: var(--x-color-primary-light-3);
}
.x-switch[disabled].x-switch-checked .x-switch--handle {
  color: var(--x-color-primary-light-3);
}
.x-switch[disabled].x-switch-checked .x-switch--text {
  color: var(--x-color-white);
}
.x-switch-loading {
  background-color: var(--x-color-fill-2);
}
.x-switch-loading .x-switch--handle {
  color: var(--x-color-text-3);
}
.x-switch-loading .x-switch--text {
  color: var(--x-color-white);
}
.x-switch-loading.x-switch-checked {
  background-color: var(--x-color-primary-light-3);
}
.x-switch-loading.x-switch-checked .x-switch--handle {
  color: var(--x-color-primary-light-3);
}
.x-switch-loading.x-switch-checked .x-switch--text {
  color: var(--x-color-primary-light-1);
}
.x-switch-small {
  min-width: var(--x-size-7);
  height: var(--x-size-4);
  line-height: var(--x-size-4);
}
.x-switch-size-mini, .x-switch-size-small {
  min-width: var(--x-size-7);
  height: var(--x-size-4);
  line-height: var(--x-size-4);
}
.x-switch-size-large {
  min-width: 48px;
  height: var(--x-size-7);
  line-height: var(--x-size-7);
  border-radius: calc(var(--x-size-7) / 2);
}
.x-switch-small .x-switch--text-holder, .x-switch-size-mini .x-switch--text-holder, .x-switch-size-small .x-switch--text-holder {
  min-width: 1.4em;
  margin: 0 6px 0 calc(12px + calc((var(--x-size-4) - 12px) / 2) + 4px);
  font-size: var(--x-font-size-caption);
}
.x-switch-small .x-switch--text, .x-switch-size-mini .x-switch--text, .x-switch-size-small .x-switch--text {
  right: 8px;
  left: auto;
  min-width: 1.4em;
  font-size: var(--x-font-size-caption);
}
.x-switch-small.x-switch-checked .x-switch--text-holder, .x-switch-size-mini.x-switch-checked .x-switch--text-holder, .x-switch-size-small.x-switch-checked .x-switch--text-holder {
  margin: 0 calc(12px + calc((var(--x-size-4) - 12px) / 2) + 4px) 0 6px;
}
.x-switch-small.x-switch-checked .x-switch--text, .x-switch-size-mini.x-switch-checked .x-switch--text, .x-switch-size-small.x-switch-checked .x-switch--text {
  right: auto;
  left: 6px;
}
.x-switch-small .x-switch--handle, .x-switch-size-mini .x-switch--handle, .x-switch-size-small .x-switch--handle {
  top: calc((var(--x-size-4) - 12px) / 2);
  left: calc((var(--x-size-4) - 12px) / 2);
  width: 12px;
  height: 12px;
  border-radius: calc(var(--x-size-4) / 2);
}
.x-switch-small .x-switch--handle .x-switch--handle-icon, .x-switch-size-mini .x-switch--handle .x-switch--handle-icon, .x-switch-size-small .x-switch--handle .x-switch--handle-icon {
  transform: translate(-50%, -50%) scale(0.66667);
}
.x-switch-small.x-switch-checked .x-switch--handle, .x-switch-size-mini.x-switch-checked .x-switch--handle, .x-switch-size-small.x-switch-checked .x-switch--handle {
  left: calc(100% - 12px - (var(--x-size-4) - 12px) / 2);
}
.x-switch-size-large .x-switch--handle {
  top: 4px;
  left: 4px;
  width: var(--x-size-5);
  height: var(--x-size-5);
  border-radius: calc(var(--x-size-7) / 2);
}
.x-switch-size-large.x-switch-checked .x-switch--handle {
  left: calc(100% - var(--x-size-5) - 4px);
}

.x-switch-type-round {
  min-width: var(--x-size-10);
  border-radius: var(--x-border-radius-small);
}
.x-switch-type-round .x-switch--handle {
  border-radius: 2px;
}
.x-switch-type-round.x-switch-small, .x-switch-type-round.x-switch-size-mini, .x-switch-type-round.x-switch-size-small {
  min-width: var(--x-size-7);
  height: var(--x-size-4);
  line-height: var(--x-size-4);
  border-radius: 2px;
}
.x-switch-type-round.x-switch-small .x-switch--handle, .x-switch-type-round.x-switch-size-mini .x-switch--handle, .x-switch-type-round.x-switch-size-small .x-switch--handle {
  border-radius: 1px;
}
.x-switch-type-round.x-switch-size-large {
  min-width: 48px;
  height: var(--x-size-7);
  line-height: var(--x-size-7);
}

.x-switch-type-line {
  min-width: var(--x-size-9);
  overflow: unset;
  background-color: var(--x-color-transparent);
}
.x-switch-type-line::after {
  display: block;
  width: 100%;
  height: 6px;
  background-color: var(--x-color-fill-4);
  border-radius: 3px;
  transition: background-color var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
  content: "";
}
.x-switch-type-line .x-switch--handle {
  top: calc((var(--x-size-6) - var(--x-size-5)) / 2);
  left: 0;
  width: var(--x-size-5);
  height: var(--x-size-5);
  background-color: var(--x-color-white);
  border-radius: calc(var(--x-size-5) / 2);
  box-shadow: 0 1px 3px var(--x-color-neutral-6);
}
.x-switch-type-line.x-switch-checked {
  background-color: var(--x-color-transparent);
}
.x-switch-type-line.x-switch-checked::after {
  background-color: var(--x-color-primary);
}
.x-switch-type-line.x-switch-custom-color {
  --custom-color: $x-switch-color-bg_off;
}
.x-switch-type-line.x-switch-custom-color::after {
  background-color: var(--custom-color);
}
.x-switch-type-line.x-switch-custom-color.x-switch-checked {
  --custom-color: $x-switch-color-bg_on;
}
.x-switch-type-line.x-switch-checked .x-switch--handle {
  left: calc(100% - var(--x-size-5));
}
.x-switch-type-line[disabled] {
  background-color: var(--x-color-transparent);
  cursor: not-allowed;
}
.x-switch-type-line[disabled]::after {
  background-color: var(--x-color-fill-2);
}
.x-switch-type-line[disabled].x-switch-checked {
  background-color: var(--x-color-transparent);
}
.x-switch-type-line[disabled].x-switch-checked::after {
  background-color: var(--x-color-primary-light-3);
}
.x-switch-type-line.x-switch-loading {
  background-color: var(--x-color-transparent);
}
.x-switch-type-line.x-switch-loading::after {
  background-color: var(--x-color-fill-2);
}
.x-switch-type-line.x-switch-loading.x-switch-checked {
  background-color: var(--x-color-transparent);
}
.x-switch-type-line.x-switch-loading.x-switch-checked::after {
  background-color: var(--x-color-primary-light-3);
}
.x-switch-type-line.x-switch-small, .x-switch-type-line.x-switch-size-mini, .x-switch-type-line.x-switch-size-small {
  min-width: var(--x-size-7);
  height: var(--x-size-4);
  line-height: var(--x-size-4);
}
.x-switch-type-line.x-switch-small .x-switch--handle, .x-switch-type-line.x-switch-size-mini .x-switch--handle, .x-switch-type-line.x-switch-size-small .x-switch--handle {
  top: calc((var(--x-size-4) - var(--x-size-4)) / 2);
  width: var(--x-size-4);
  height: var(--x-size-4);
  border-radius: calc(var(--x-size-4) / 2);
}
.x-switch-type-line.x-switch-small .x-switch--handle .x-switch--handle-icon, .x-switch-type-line.x-switch-size-mini .x-switch--handle .x-switch--handle-icon, .x-switch-type-line.x-switch-size-small .x-switch--handle .x-switch--handle-icon {
  transform: translate(-50%, -50%) scale(1);
}
.x-switch-type-line.x-switch-small.x-switch-checked .x-switch--handle, .x-switch-type-line.x-switch-size-mini.x-switch-checked .x-switch--handle, .x-switch-type-line.x-switch-size-small.x-switch-checked .x-switch--handle {
  left: calc(100% - var(--x-size-4) - (var(--x-size-4) - var(--x-size-4)) / 2);
}
.x-switch-type-line.x-switch-size-large {
  min-width: 44px;
  height: var(--x-size-7);
  line-height: var(--x-size-7);
}
.x-switch-type-line.x-switch-size-large .x-switch--handle {
  top: 2px;
  width: var(--x-size-6);
  height: var(--x-size-6);
  border-radius: calc(var(--x-size-6) / 2);
}
.x-switch-type-line.x-switch-size-large.x-switch-checked .x-switch--handle {
  left: calc(100% - var(--x-size-6));
}

.x-textarea--wrapper {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: var(--x-input-padding-horizontal);
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-text);
  font-size: var(--x-input-size-default-font-size);
  background-color: var(--x-input-color-bg);
  border: var(--x-input-border-width) solid var(--x-input-border-color);
  border-radius: var(--x-input-border-radius);
  cursor: text;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-textarea--wrapper:hover {
  background-color: var(--x-input-color-bg_hover);
  border-color: var(--x-input-color-border_hover);
}
.x-textarea--wrapper:focus-within, .x-textarea--wrapper.x-textarea-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_focus);
  border-color: var(--x-input-color-border_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus);
}
.x-textarea--wrapper.x-textarea-disabled {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
  cursor: not-allowed;
}
.x-textarea--wrapper.x-textarea-disabled:hover {
  color: var(--x-input-color-text_disabled);
  background-color: var(--x-input-color-bg_disabled);
  border-color: var(--x-input-color-border_disabled);
}
.x-textarea--wrapper.x-textarea-disabled .x-textarea--prefix,
.x-textarea--wrapper.x-textarea-disabled .x-textarea--suffix {
  color: inherit;
}
.x-textarea--wrapper.x-textarea-error {
  background-color: var(--x-input-color-bg_error);
  border-color: var(--x-input-color-border_error);
}
.x-textarea--wrapper.x-textarea-error:hover {
  background-color: var(--x-input-color-bg_error_hover);
  border-color: var(--x-input-color-border_error_hover);
}
.x-textarea--wrapper.x-textarea-error:focus-within, .x-textarea--wrapper.x-textarea-error.x-textarea-focus {
  z-index: 1;
  background-color: var(--x-input-color-bg_error_focus);
  border-color: var(--x-input-color-border_error_focus);
  box-shadow: 0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus);
}
.x-textarea--wrapper .x-textarea--prefix,
.x-textarea--wrapper .x-textarea--suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /*
   * 显式行高：前后缀常用来放文字（「https://」「.com」「状态」等）。
   * 不声明时宿主行高会沿继承链进入控件外壳、改变其高度。
   * 放在共享 mixin 里可同时覆盖 Input（x-input）与 Select（x-select--view）。
   */
  line-height: var(--x-line-height-base);
  white-space: nowrap;
  user-select: none;
  /*
   * 图标真实结构是 span.x-icon > svg，svg 不是直接子级——
   * 原先的 `> svg` 选择器从不命中，mini 尺寸的图标字号（12px）因此失效，
   * 图标落到继承的 wrapper 字号 14px，与控件文字（12px）不匹配。
   * 同时用显式 width/height 固定尺寸（只设 font-size 会让 .x-icon 的
   * 1em 基准确认后仍受 flex 收缩影响，参见 select-view 的同类修复）。
   */
}
.x-textarea--wrapper .x-textarea--prefix > .x-icon,
.x-textarea--wrapper .x-textarea--suffix > .x-icon {
  width: var(--x-input-size-default-icon-suffix-size);
  height: var(--x-input-size-default-icon-suffix-size);
  font-size: var(--x-input-size-default-icon-suffix-size);
}
.x-textarea--wrapper .x-textarea--prefix > .x-icon > svg,
.x-textarea--wrapper .x-textarea--suffix > .x-icon > svg {
  width: 1em;
  height: 1em;
}
.x-textarea--wrapper .x-textarea--prefix {
  padding-right: var(--x-input-padding-horizontal);
  color: var(--x-input-color-prefix-text);
}
.x-textarea--wrapper .x-textarea--suffix {
  padding-left: var(--x-input-padding-horizontal);
  color: var(--x-input-color-suffix-text);
}
.x-textarea--wrapper .x-textarea--suffix .x-feedback-icon {
  display: inline-flex;
}
.x-textarea--wrapper .x-textarea--suffix .x-feedback-icon-status-validating {
  color: var(--x-input-feedback-icon-color_validating);
}
.x-textarea--wrapper .x-textarea--suffix .x-feedback-icon-status-success {
  color: var(--x-input-feedback-icon-color_success);
}
.x-textarea--wrapper .x-textarea--suffix .x-feedback-icon-status-warning {
  color: var(--x-input-feedback-icon-color_warning);
}
.x-textarea--wrapper .x-textarea--suffix .x-feedback-icon-status-error {
  color: var(--x-input-feedback-icon-color_error);
}
.x-textarea--wrapper .x-textarea--clear-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--x-input-margin-left-clear-btn);
  color: var(--x-input-color-icon-clear);
  font-size: var(--x-input-size-icon-clear);
  visibility: hidden;
  cursor: pointer;
  /* 只切 visibility 会瞬间跳变，补 opacity 过渡与其余表单控件一致 */
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-textarea--wrapper .x-textarea--clear-btn > svg {
  position: relative;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-textarea--wrapper:hover .x-textarea--clear-btn, .x-textarea--wrapper:focus-within .x-textarea--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-textarea--wrapper:not(.x-textarea-focus) .x-textarea-icon-hover:hover::before {
  background-color: var(--x-input-color-icon-clear-bg_hover);
}
.x-textarea--wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
}
.x-textarea--wrapper.x-textarea-has-clear .x-textarea {
  padding-right: calc(var(--x-textarea-padding-horizontal) + var(--x-textarea-size-icon-clear) + var(--x-textarea-layout-tip-right));
}
.x-textarea--wrapper.x-textarea-has-word-limit .x-textarea {
  padding-bottom: calc(var(--x-textarea-padding-vertical) + var(--x-textarea-font-tip-size) + var(--x-textarea-layout-tip-bottom));
}
.x-textarea--wrapper .x-textarea--word-limit {
  position: absolute;
  right: var(--x-textarea-layout-tip-right);
  bottom: var(--x-textarea-layout-tip-bottom);
  color: var(--x-textarea-color-tip-text);
  font-size: var(--x-textarea-font-tip-size);
  /*
   * line-height: 1（不是 --x-line-height-base）。
   *
   * 这个计数是绝对定位的，其占位由 padding-bottom 的
   * `padding-vertical + font-tip-size + tip-bottom` 预留；设计上给计数留的高度
   * 正好是一个 font-tip-size（12px）。用标准行高会得到约 18.9px，
   * 超出预留、压到正文最后一行（宿主行高 24px 时实测溢出 8px）。
   * 取 1 让盒高恰好等于 font-size，与预留值一致。
   */
  line-height: 1;
  user-select: none;
}
.x-textarea--wrapper.x-textarea-scroll .x-textarea--word-limit {
  right: calc(var(--x-textarea-layout-tip-right) + 15px);
}
.x-textarea--wrapper {
  /*
   * 清除按钮淡入淡出。
   *
   * 原先靠 hover 时 `display: block` 显示，display 不可过渡，与
   * Input / Select 的渐显不一致；改为常驻元素 + opacity/visibility 过渡。
   */
}
.x-textarea--wrapper .x-textarea--clear-btn {
  position: absolute;
  top: var(--x-textarea-layout-top-icon-clear);
  right: var(--x-textarea-layout-tip-right);
  z-index: 1;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-textarea--wrapper.x-textarea-scroll .x-textarea--clear-btn {
  right: calc(var(--x-textarea-layout-tip-right) + 15px);
}
.x-textarea--wrapper:hover .x-textarea--clear-btn, .x-textarea--wrapper:focus-within .x-textarea--clear-btn {
  visibility: visible;
  opacity: 1;
}
.x-textarea--wrapper .x-textarea--mirror {
  position: absolute;
  visibility: hidden;
}

.x-textarea {
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--x-line-height-base);
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: var(--x-color-transparent);
}
.x-textarea::placeholder {
  color: var(--x-input-color-placeholder-text);
}
.x-textarea[disabled]::placeholder {
  color: var(--x-input-color-text_disabled);
}
.x-textarea[disabled] {
  -webkit-text-fill-color: var(--x-input-color-text_disabled);
}
.x-textarea {
  display: block;
  box-sizing: border-box;
  height: 100%;
  min-height: var(--x-textarea-size-min-height);
  padding: var(--x-textarea-padding-vertical) var(--x-textarea-padding-horizontal);
  font-size: var(--x-textarea-font-size);
  line-height: var(--x-line-height-base);
  vertical-align: top;
  resize: vertical;
}

.x-textarea--wrapper.x-textarea-size-mini .x-textarea {
  min-height: calc(var(--x-size-mini) * 2);
  padding-top: var(--x-input-size-mini-padding-up-down);
  padding-bottom: var(--x-input-size-mini-padding-up-down);
  font-size: var(--x-input-size-mini-font-size);
  line-height: var(--x-input-size-mini-line-height);
}
.x-textarea--wrapper.x-textarea-size-mini .x-textarea--clear-btn {
  top: var(--x-spacing-3);
}

.x-textarea--wrapper.x-textarea-size-small .x-textarea {
  min-height: calc(var(--x-size-small) * 2);
  padding-top: var(--x-input-size-small-padding-up-down);
  padding-bottom: var(--x-input-size-small-padding-up-down);
  font-size: var(--x-input-size-small-font-size);
  line-height: var(--x-input-size-small-line-height);
}
.x-textarea--wrapper.x-textarea-size-small .x-textarea--clear-btn {
  top: var(--x-spacing-4);
}

.x-textarea--wrapper.x-textarea-size-medium .x-textarea {
  min-height: calc(var(--x-size-medium) * 2);
  padding-top: var(--x-input-size-medium-padding-up-down);
  padding-bottom: var(--x-input-size-medium-padding-up-down);
  font-size: var(--x-input-size-medium-font-size);
  line-height: var(--x-input-size-medium-line-height);
}

.x-textarea--wrapper.x-textarea-size-large .x-textarea {
  min-height: calc(var(--x-size-large) * 2);
  padding-top: var(--x-input-size-large-padding-up-down);
  padding-bottom: var(--x-input-size-large-padding-up-down);
  font-size: var(--x-input-size-large-font-size);
  line-height: var(--x-input-size-large-line-height);
}

.x-col {
  box-sizing: border-box;
}
.x-col-1 {
  flex: 0 0 4.1666666667%;
  width: 4.1666666667%;
}
.x-col-2 {
  flex: 0 0 8.3333333333%;
  width: 8.3333333333%;
}
.x-col-3 {
  flex: 0 0 12.5%;
  width: 12.5%;
}
.x-col-4 {
  flex: 0 0 16.6666666667%;
  width: 16.6666666667%;
}
.x-col-5 {
  flex: 0 0 20.8333333333%;
  width: 20.8333333333%;
}
.x-col-6 {
  flex: 0 0 25%;
  width: 25%;
}
.x-col-7 {
  flex: 0 0 29.1666666667%;
  width: 29.1666666667%;
}
.x-col-8 {
  flex: 0 0 33.3333333333%;
  width: 33.3333333333%;
}
.x-col-9 {
  flex: 0 0 37.5%;
  width: 37.5%;
}
.x-col-10 {
  flex: 0 0 41.6666666667%;
  width: 41.6666666667%;
}
.x-col-11 {
  flex: 0 0 45.8333333333%;
  width: 45.8333333333%;
}
.x-col-12 {
  flex: 0 0 50%;
  width: 50%;
}
.x-col-13 {
  flex: 0 0 54.1666666667%;
  width: 54.1666666667%;
}
.x-col-14 {
  flex: 0 0 58.3333333333%;
  width: 58.3333333333%;
}
.x-col-15 {
  flex: 0 0 62.5%;
  width: 62.5%;
}
.x-col-16 {
  flex: 0 0 66.6666666667%;
  width: 66.6666666667%;
}
.x-col-17 {
  flex: 0 0 70.8333333333%;
  width: 70.8333333333%;
}
.x-col-18 {
  flex: 0 0 75%;
  width: 75%;
}
.x-col-19 {
  flex: 0 0 79.1666666667%;
  width: 79.1666666667%;
}
.x-col-20 {
  flex: 0 0 83.3333333333%;
  width: 83.3333333333%;
}
.x-col-21 {
  flex: 0 0 87.5%;
  width: 87.5%;
}
.x-col-22 {
  flex: 0 0 91.6666666667%;
  width: 91.6666666667%;
}
.x-col-23 {
  flex: 0 0 95.8333333333%;
  width: 95.8333333333%;
}
.x-col-24 {
  flex: 0 0 100%;
  width: 100%;
}
.x-col-offset-0 {
  margin-left: 0%;
}
.x-col-offset-1 {
  margin-left: 4.1666666667%;
}
.x-col-offset-2 {
  margin-left: 8.3333333333%;
}
.x-col-offset-3 {
  margin-left: 12.5%;
}
.x-col-offset-4 {
  margin-left: 16.6666666667%;
}
.x-col-offset-5 {
  margin-left: 20.8333333333%;
}
.x-col-offset-6 {
  margin-left: 25%;
}
.x-col-offset-7 {
  margin-left: 29.1666666667%;
}
.x-col-offset-8 {
  margin-left: 33.3333333333%;
}
.x-col-offset-9 {
  margin-left: 37.5%;
}
.x-col-offset-10 {
  margin-left: 41.6666666667%;
}
.x-col-offset-11 {
  margin-left: 45.8333333333%;
}
.x-col-offset-12 {
  margin-left: 50%;
}
.x-col-offset-13 {
  margin-left: 54.1666666667%;
}
.x-col-offset-14 {
  margin-left: 58.3333333333%;
}
.x-col-offset-15 {
  margin-left: 62.5%;
}
.x-col-offset-16 {
  margin-left: 66.6666666667%;
}
.x-col-offset-17 {
  margin-left: 70.8333333333%;
}
.x-col-offset-18 {
  margin-left: 75%;
}
.x-col-offset-19 {
  margin-left: 79.1666666667%;
}
.x-col-offset-20 {
  margin-left: 83.3333333333%;
}
.x-col-offset-21 {
  margin-left: 87.5%;
}
.x-col-offset-22 {
  margin-left: 91.6666666667%;
}
.x-col-offset-23 {
  margin-left: 95.8333333333%;
}
.x-col-order-0 {
  order: 0;
}
.x-col-order-1 {
  order: 1;
}
.x-col-order-2 {
  order: 2;
}
.x-col-order-3 {
  order: 3;
}
.x-col-order-4 {
  order: 4;
}
.x-col-order-5 {
  order: 5;
}
.x-col-order-6 {
  order: 6;
}
.x-col-order-7 {
  order: 7;
}
.x-col-order-8 {
  order: 8;
}
.x-col-order-9 {
  order: 9;
}
.x-col-order-10 {
  order: 10;
}
.x-col-order-11 {
  order: 11;
}
.x-col-order-12 {
  order: 12;
}
.x-col-order-13 {
  order: 13;
}
.x-col-order-14 {
  order: 14;
}
.x-col-order-15 {
  order: 15;
}
.x-col-order-16 {
  order: 16;
}
.x-col-order-17 {
  order: 17;
}
.x-col-order-18 {
  order: 18;
}
.x-col-order-19 {
  order: 19;
}
.x-col-order-20 {
  order: 20;
}
.x-col-order-21 {
  order: 21;
}
.x-col-order-22 {
  order: 22;
}
.x-col-order-23 {
  order: 23;
}
.x-col-order-24 {
  order: 24;
}
.x-col-xs-1 {
  flex: 0 0 4.1666666667%;
  width: 4.1666666667%;
}
.x-col-xs-2 {
  flex: 0 0 8.3333333333%;
  width: 8.3333333333%;
}
.x-col-xs-3 {
  flex: 0 0 12.5%;
  width: 12.5%;
}
.x-col-xs-4 {
  flex: 0 0 16.6666666667%;
  width: 16.6666666667%;
}
.x-col-xs-5 {
  flex: 0 0 20.8333333333%;
  width: 20.8333333333%;
}
.x-col-xs-6 {
  flex: 0 0 25%;
  width: 25%;
}
.x-col-xs-7 {
  flex: 0 0 29.1666666667%;
  width: 29.1666666667%;
}
.x-col-xs-8 {
  flex: 0 0 33.3333333333%;
  width: 33.3333333333%;
}
.x-col-xs-9 {
  flex: 0 0 37.5%;
  width: 37.5%;
}
.x-col-xs-10 {
  flex: 0 0 41.6666666667%;
  width: 41.6666666667%;
}
.x-col-xs-11 {
  flex: 0 0 45.8333333333%;
  width: 45.8333333333%;
}
.x-col-xs-12 {
  flex: 0 0 50%;
  width: 50%;
}
.x-col-xs-13 {
  flex: 0 0 54.1666666667%;
  width: 54.1666666667%;
}
.x-col-xs-14 {
  flex: 0 0 58.3333333333%;
  width: 58.3333333333%;
}
.x-col-xs-15 {
  flex: 0 0 62.5%;
  width: 62.5%;
}
.x-col-xs-16 {
  flex: 0 0 66.6666666667%;
  width: 66.6666666667%;
}
.x-col-xs-17 {
  flex: 0 0 70.8333333333%;
  width: 70.8333333333%;
}
.x-col-xs-18 {
  flex: 0 0 75%;
  width: 75%;
}
.x-col-xs-19 {
  flex: 0 0 79.1666666667%;
  width: 79.1666666667%;
}
.x-col-xs-20 {
  flex: 0 0 83.3333333333%;
  width: 83.3333333333%;
}
.x-col-xs-21 {
  flex: 0 0 87.5%;
  width: 87.5%;
}
.x-col-xs-22 {
  flex: 0 0 91.6666666667%;
  width: 91.6666666667%;
}
.x-col-xs-23 {
  flex: 0 0 95.8333333333%;
  width: 95.8333333333%;
}
.x-col-xs-24 {
  flex: 0 0 100%;
  width: 100%;
}
.x-col-xs-offset-0 {
  margin-left: 0%;
}
.x-col-xs-offset-1 {
  margin-left: 4.1666666667%;
}
.x-col-xs-offset-2 {
  margin-left: 8.3333333333%;
}
.x-col-xs-offset-3 {
  margin-left: 12.5%;
}
.x-col-xs-offset-4 {
  margin-left: 16.6666666667%;
}
.x-col-xs-offset-5 {
  margin-left: 20.8333333333%;
}
.x-col-xs-offset-6 {
  margin-left: 25%;
}
.x-col-xs-offset-7 {
  margin-left: 29.1666666667%;
}
.x-col-xs-offset-8 {
  margin-left: 33.3333333333%;
}
.x-col-xs-offset-9 {
  margin-left: 37.5%;
}
.x-col-xs-offset-10 {
  margin-left: 41.6666666667%;
}
.x-col-xs-offset-11 {
  margin-left: 45.8333333333%;
}
.x-col-xs-offset-12 {
  margin-left: 50%;
}
.x-col-xs-offset-13 {
  margin-left: 54.1666666667%;
}
.x-col-xs-offset-14 {
  margin-left: 58.3333333333%;
}
.x-col-xs-offset-15 {
  margin-left: 62.5%;
}
.x-col-xs-offset-16 {
  margin-left: 66.6666666667%;
}
.x-col-xs-offset-17 {
  margin-left: 70.8333333333%;
}
.x-col-xs-offset-18 {
  margin-left: 75%;
}
.x-col-xs-offset-19 {
  margin-left: 79.1666666667%;
}
.x-col-xs-offset-20 {
  margin-left: 83.3333333333%;
}
.x-col-xs-offset-21 {
  margin-left: 87.5%;
}
.x-col-xs-offset-22 {
  margin-left: 91.6666666667%;
}
.x-col-xs-offset-23 {
  margin-left: 95.8333333333%;
}
.x-col-xs-order-0 {
  order: 0;
}
.x-col-xs-order-1 {
  order: 1;
}
.x-col-xs-order-2 {
  order: 2;
}
.x-col-xs-order-3 {
  order: 3;
}
.x-col-xs-order-4 {
  order: 4;
}
.x-col-xs-order-5 {
  order: 5;
}
.x-col-xs-order-6 {
  order: 6;
}
.x-col-xs-order-7 {
  order: 7;
}
.x-col-xs-order-8 {
  order: 8;
}
.x-col-xs-order-9 {
  order: 9;
}
.x-col-xs-order-10 {
  order: 10;
}
.x-col-xs-order-11 {
  order: 11;
}
.x-col-xs-order-12 {
  order: 12;
}
.x-col-xs-order-13 {
  order: 13;
}
.x-col-xs-order-14 {
  order: 14;
}
.x-col-xs-order-15 {
  order: 15;
}
.x-col-xs-order-16 {
  order: 16;
}
.x-col-xs-order-17 {
  order: 17;
}
.x-col-xs-order-18 {
  order: 18;
}
.x-col-xs-order-19 {
  order: 19;
}
.x-col-xs-order-20 {
  order: 20;
}
.x-col-xs-order-21 {
  order: 21;
}
.x-col-xs-order-22 {
  order: 22;
}
.x-col-xs-order-23 {
  order: 23;
}
.x-col-xs-order-24 {
  order: 24;
}
@media (min-width: 576px) {
  .x-col-sm-1 {
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%;
  }
  .x-col-sm-2 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
  }
  .x-col-sm-3 {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
  .x-col-sm-4 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
  }
  .x-col-sm-5 {
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%;
  }
  .x-col-sm-6 {
    flex: 0 0 25%;
    width: 25%;
  }
  .x-col-sm-7 {
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%;
  }
  .x-col-sm-8 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
  }
  .x-col-sm-9 {
    flex: 0 0 37.5%;
    width: 37.5%;
  }
  .x-col-sm-10 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
  }
  .x-col-sm-11 {
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%;
  }
  .x-col-sm-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .x-col-sm-13 {
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%;
  }
  .x-col-sm-14 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
  }
  .x-col-sm-15 {
    flex: 0 0 62.5%;
    width: 62.5%;
  }
  .x-col-sm-16 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
  }
  .x-col-sm-17 {
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%;
  }
  .x-col-sm-18 {
    flex: 0 0 75%;
    width: 75%;
  }
  .x-col-sm-19 {
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%;
  }
  .x-col-sm-20 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
  }
  .x-col-sm-21 {
    flex: 0 0 87.5%;
    width: 87.5%;
  }
  .x-col-sm-22 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
  }
  .x-col-sm-23 {
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%;
  }
  .x-col-sm-24 {
    flex: 0 0 100%;
    width: 100%;
  }
  .x-col-sm-offset-0 {
    margin-left: 0%;
  }
  .x-col-sm-offset-1 {
    margin-left: 4.1666666667%;
  }
  .x-col-sm-offset-2 {
    margin-left: 8.3333333333%;
  }
  .x-col-sm-offset-3 {
    margin-left: 12.5%;
  }
  .x-col-sm-offset-4 {
    margin-left: 16.6666666667%;
  }
  .x-col-sm-offset-5 {
    margin-left: 20.8333333333%;
  }
  .x-col-sm-offset-6 {
    margin-left: 25%;
  }
  .x-col-sm-offset-7 {
    margin-left: 29.1666666667%;
  }
  .x-col-sm-offset-8 {
    margin-left: 33.3333333333%;
  }
  .x-col-sm-offset-9 {
    margin-left: 37.5%;
  }
  .x-col-sm-offset-10 {
    margin-left: 41.6666666667%;
  }
  .x-col-sm-offset-11 {
    margin-left: 45.8333333333%;
  }
  .x-col-sm-offset-12 {
    margin-left: 50%;
  }
  .x-col-sm-offset-13 {
    margin-left: 54.1666666667%;
  }
  .x-col-sm-offset-14 {
    margin-left: 58.3333333333%;
  }
  .x-col-sm-offset-15 {
    margin-left: 62.5%;
  }
  .x-col-sm-offset-16 {
    margin-left: 66.6666666667%;
  }
  .x-col-sm-offset-17 {
    margin-left: 70.8333333333%;
  }
  .x-col-sm-offset-18 {
    margin-left: 75%;
  }
  .x-col-sm-offset-19 {
    margin-left: 79.1666666667%;
  }
  .x-col-sm-offset-20 {
    margin-left: 83.3333333333%;
  }
  .x-col-sm-offset-21 {
    margin-left: 87.5%;
  }
  .x-col-sm-offset-22 {
    margin-left: 91.6666666667%;
  }
  .x-col-sm-offset-23 {
    margin-left: 95.8333333333%;
  }
  .x-col-sm-order-0 {
    order: 0;
  }
  .x-col-sm-order-1 {
    order: 1;
  }
  .x-col-sm-order-2 {
    order: 2;
  }
  .x-col-sm-order-3 {
    order: 3;
  }
  .x-col-sm-order-4 {
    order: 4;
  }
  .x-col-sm-order-5 {
    order: 5;
  }
  .x-col-sm-order-6 {
    order: 6;
  }
  .x-col-sm-order-7 {
    order: 7;
  }
  .x-col-sm-order-8 {
    order: 8;
  }
  .x-col-sm-order-9 {
    order: 9;
  }
  .x-col-sm-order-10 {
    order: 10;
  }
  .x-col-sm-order-11 {
    order: 11;
  }
  .x-col-sm-order-12 {
    order: 12;
  }
  .x-col-sm-order-13 {
    order: 13;
  }
  .x-col-sm-order-14 {
    order: 14;
  }
  .x-col-sm-order-15 {
    order: 15;
  }
  .x-col-sm-order-16 {
    order: 16;
  }
  .x-col-sm-order-17 {
    order: 17;
  }
  .x-col-sm-order-18 {
    order: 18;
  }
  .x-col-sm-order-19 {
    order: 19;
  }
  .x-col-sm-order-20 {
    order: 20;
  }
  .x-col-sm-order-21 {
    order: 21;
  }
  .x-col-sm-order-22 {
    order: 22;
  }
  .x-col-sm-order-23 {
    order: 23;
  }
  .x-col-sm-order-24 {
    order: 24;
  }
}
@media (min-width: 768px) {
  .x-col-md-1 {
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%;
  }
  .x-col-md-2 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
  }
  .x-col-md-3 {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
  .x-col-md-4 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
  }
  .x-col-md-5 {
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%;
  }
  .x-col-md-6 {
    flex: 0 0 25%;
    width: 25%;
  }
  .x-col-md-7 {
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%;
  }
  .x-col-md-8 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
  }
  .x-col-md-9 {
    flex: 0 0 37.5%;
    width: 37.5%;
  }
  .x-col-md-10 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
  }
  .x-col-md-11 {
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%;
  }
  .x-col-md-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .x-col-md-13 {
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%;
  }
  .x-col-md-14 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
  }
  .x-col-md-15 {
    flex: 0 0 62.5%;
    width: 62.5%;
  }
  .x-col-md-16 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
  }
  .x-col-md-17 {
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%;
  }
  .x-col-md-18 {
    flex: 0 0 75%;
    width: 75%;
  }
  .x-col-md-19 {
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%;
  }
  .x-col-md-20 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
  }
  .x-col-md-21 {
    flex: 0 0 87.5%;
    width: 87.5%;
  }
  .x-col-md-22 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
  }
  .x-col-md-23 {
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%;
  }
  .x-col-md-24 {
    flex: 0 0 100%;
    width: 100%;
  }
  .x-col-md-offset-0 {
    margin-left: 0%;
  }
  .x-col-md-offset-1 {
    margin-left: 4.1666666667%;
  }
  .x-col-md-offset-2 {
    margin-left: 8.3333333333%;
  }
  .x-col-md-offset-3 {
    margin-left: 12.5%;
  }
  .x-col-md-offset-4 {
    margin-left: 16.6666666667%;
  }
  .x-col-md-offset-5 {
    margin-left: 20.8333333333%;
  }
  .x-col-md-offset-6 {
    margin-left: 25%;
  }
  .x-col-md-offset-7 {
    margin-left: 29.1666666667%;
  }
  .x-col-md-offset-8 {
    margin-left: 33.3333333333%;
  }
  .x-col-md-offset-9 {
    margin-left: 37.5%;
  }
  .x-col-md-offset-10 {
    margin-left: 41.6666666667%;
  }
  .x-col-md-offset-11 {
    margin-left: 45.8333333333%;
  }
  .x-col-md-offset-12 {
    margin-left: 50%;
  }
  .x-col-md-offset-13 {
    margin-left: 54.1666666667%;
  }
  .x-col-md-offset-14 {
    margin-left: 58.3333333333%;
  }
  .x-col-md-offset-15 {
    margin-left: 62.5%;
  }
  .x-col-md-offset-16 {
    margin-left: 66.6666666667%;
  }
  .x-col-md-offset-17 {
    margin-left: 70.8333333333%;
  }
  .x-col-md-offset-18 {
    margin-left: 75%;
  }
  .x-col-md-offset-19 {
    margin-left: 79.1666666667%;
  }
  .x-col-md-offset-20 {
    margin-left: 83.3333333333%;
  }
  .x-col-md-offset-21 {
    margin-left: 87.5%;
  }
  .x-col-md-offset-22 {
    margin-left: 91.6666666667%;
  }
  .x-col-md-offset-23 {
    margin-left: 95.8333333333%;
  }
  .x-col-md-order-0 {
    order: 0;
  }
  .x-col-md-order-1 {
    order: 1;
  }
  .x-col-md-order-2 {
    order: 2;
  }
  .x-col-md-order-3 {
    order: 3;
  }
  .x-col-md-order-4 {
    order: 4;
  }
  .x-col-md-order-5 {
    order: 5;
  }
  .x-col-md-order-6 {
    order: 6;
  }
  .x-col-md-order-7 {
    order: 7;
  }
  .x-col-md-order-8 {
    order: 8;
  }
  .x-col-md-order-9 {
    order: 9;
  }
  .x-col-md-order-10 {
    order: 10;
  }
  .x-col-md-order-11 {
    order: 11;
  }
  .x-col-md-order-12 {
    order: 12;
  }
  .x-col-md-order-13 {
    order: 13;
  }
  .x-col-md-order-14 {
    order: 14;
  }
  .x-col-md-order-15 {
    order: 15;
  }
  .x-col-md-order-16 {
    order: 16;
  }
  .x-col-md-order-17 {
    order: 17;
  }
  .x-col-md-order-18 {
    order: 18;
  }
  .x-col-md-order-19 {
    order: 19;
  }
  .x-col-md-order-20 {
    order: 20;
  }
  .x-col-md-order-21 {
    order: 21;
  }
  .x-col-md-order-22 {
    order: 22;
  }
  .x-col-md-order-23 {
    order: 23;
  }
  .x-col-md-order-24 {
    order: 24;
  }
}
@media (min-width: 992px) {
  .x-col-lg-1 {
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%;
  }
  .x-col-lg-2 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
  }
  .x-col-lg-3 {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
  .x-col-lg-4 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
  }
  .x-col-lg-5 {
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%;
  }
  .x-col-lg-6 {
    flex: 0 0 25%;
    width: 25%;
  }
  .x-col-lg-7 {
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%;
  }
  .x-col-lg-8 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
  }
  .x-col-lg-9 {
    flex: 0 0 37.5%;
    width: 37.5%;
  }
  .x-col-lg-10 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
  }
  .x-col-lg-11 {
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%;
  }
  .x-col-lg-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .x-col-lg-13 {
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%;
  }
  .x-col-lg-14 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
  }
  .x-col-lg-15 {
    flex: 0 0 62.5%;
    width: 62.5%;
  }
  .x-col-lg-16 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
  }
  .x-col-lg-17 {
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%;
  }
  .x-col-lg-18 {
    flex: 0 0 75%;
    width: 75%;
  }
  .x-col-lg-19 {
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%;
  }
  .x-col-lg-20 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
  }
  .x-col-lg-21 {
    flex: 0 0 87.5%;
    width: 87.5%;
  }
  .x-col-lg-22 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
  }
  .x-col-lg-23 {
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%;
  }
  .x-col-lg-24 {
    flex: 0 0 100%;
    width: 100%;
  }
  .x-col-lg-offset-0 {
    margin-left: 0%;
  }
  .x-col-lg-offset-1 {
    margin-left: 4.1666666667%;
  }
  .x-col-lg-offset-2 {
    margin-left: 8.3333333333%;
  }
  .x-col-lg-offset-3 {
    margin-left: 12.5%;
  }
  .x-col-lg-offset-4 {
    margin-left: 16.6666666667%;
  }
  .x-col-lg-offset-5 {
    margin-left: 20.8333333333%;
  }
  .x-col-lg-offset-6 {
    margin-left: 25%;
  }
  .x-col-lg-offset-7 {
    margin-left: 29.1666666667%;
  }
  .x-col-lg-offset-8 {
    margin-left: 33.3333333333%;
  }
  .x-col-lg-offset-9 {
    margin-left: 37.5%;
  }
  .x-col-lg-offset-10 {
    margin-left: 41.6666666667%;
  }
  .x-col-lg-offset-11 {
    margin-left: 45.8333333333%;
  }
  .x-col-lg-offset-12 {
    margin-left: 50%;
  }
  .x-col-lg-offset-13 {
    margin-left: 54.1666666667%;
  }
  .x-col-lg-offset-14 {
    margin-left: 58.3333333333%;
  }
  .x-col-lg-offset-15 {
    margin-left: 62.5%;
  }
  .x-col-lg-offset-16 {
    margin-left: 66.6666666667%;
  }
  .x-col-lg-offset-17 {
    margin-left: 70.8333333333%;
  }
  .x-col-lg-offset-18 {
    margin-left: 75%;
  }
  .x-col-lg-offset-19 {
    margin-left: 79.1666666667%;
  }
  .x-col-lg-offset-20 {
    margin-left: 83.3333333333%;
  }
  .x-col-lg-offset-21 {
    margin-left: 87.5%;
  }
  .x-col-lg-offset-22 {
    margin-left: 91.6666666667%;
  }
  .x-col-lg-offset-23 {
    margin-left: 95.8333333333%;
  }
  .x-col-lg-order-0 {
    order: 0;
  }
  .x-col-lg-order-1 {
    order: 1;
  }
  .x-col-lg-order-2 {
    order: 2;
  }
  .x-col-lg-order-3 {
    order: 3;
  }
  .x-col-lg-order-4 {
    order: 4;
  }
  .x-col-lg-order-5 {
    order: 5;
  }
  .x-col-lg-order-6 {
    order: 6;
  }
  .x-col-lg-order-7 {
    order: 7;
  }
  .x-col-lg-order-8 {
    order: 8;
  }
  .x-col-lg-order-9 {
    order: 9;
  }
  .x-col-lg-order-10 {
    order: 10;
  }
  .x-col-lg-order-11 {
    order: 11;
  }
  .x-col-lg-order-12 {
    order: 12;
  }
  .x-col-lg-order-13 {
    order: 13;
  }
  .x-col-lg-order-14 {
    order: 14;
  }
  .x-col-lg-order-15 {
    order: 15;
  }
  .x-col-lg-order-16 {
    order: 16;
  }
  .x-col-lg-order-17 {
    order: 17;
  }
  .x-col-lg-order-18 {
    order: 18;
  }
  .x-col-lg-order-19 {
    order: 19;
  }
  .x-col-lg-order-20 {
    order: 20;
  }
  .x-col-lg-order-21 {
    order: 21;
  }
  .x-col-lg-order-22 {
    order: 22;
  }
  .x-col-lg-order-23 {
    order: 23;
  }
  .x-col-lg-order-24 {
    order: 24;
  }
}
@media (min-width: 1200px) {
  .x-col-xl-1 {
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%;
  }
  .x-col-xl-2 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
  }
  .x-col-xl-3 {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
  .x-col-xl-4 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
  }
  .x-col-xl-5 {
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%;
  }
  .x-col-xl-6 {
    flex: 0 0 25%;
    width: 25%;
  }
  .x-col-xl-7 {
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%;
  }
  .x-col-xl-8 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
  }
  .x-col-xl-9 {
    flex: 0 0 37.5%;
    width: 37.5%;
  }
  .x-col-xl-10 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
  }
  .x-col-xl-11 {
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%;
  }
  .x-col-xl-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .x-col-xl-13 {
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%;
  }
  .x-col-xl-14 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
  }
  .x-col-xl-15 {
    flex: 0 0 62.5%;
    width: 62.5%;
  }
  .x-col-xl-16 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
  }
  .x-col-xl-17 {
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%;
  }
  .x-col-xl-18 {
    flex: 0 0 75%;
    width: 75%;
  }
  .x-col-xl-19 {
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%;
  }
  .x-col-xl-20 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
  }
  .x-col-xl-21 {
    flex: 0 0 87.5%;
    width: 87.5%;
  }
  .x-col-xl-22 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
  }
  .x-col-xl-23 {
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%;
  }
  .x-col-xl-24 {
    flex: 0 0 100%;
    width: 100%;
  }
  .x-col-xl-offset-0 {
    margin-left: 0%;
  }
  .x-col-xl-offset-1 {
    margin-left: 4.1666666667%;
  }
  .x-col-xl-offset-2 {
    margin-left: 8.3333333333%;
  }
  .x-col-xl-offset-3 {
    margin-left: 12.5%;
  }
  .x-col-xl-offset-4 {
    margin-left: 16.6666666667%;
  }
  .x-col-xl-offset-5 {
    margin-left: 20.8333333333%;
  }
  .x-col-xl-offset-6 {
    margin-left: 25%;
  }
  .x-col-xl-offset-7 {
    margin-left: 29.1666666667%;
  }
  .x-col-xl-offset-8 {
    margin-left: 33.3333333333%;
  }
  .x-col-xl-offset-9 {
    margin-left: 37.5%;
  }
  .x-col-xl-offset-10 {
    margin-left: 41.6666666667%;
  }
  .x-col-xl-offset-11 {
    margin-left: 45.8333333333%;
  }
  .x-col-xl-offset-12 {
    margin-left: 50%;
  }
  .x-col-xl-offset-13 {
    margin-left: 54.1666666667%;
  }
  .x-col-xl-offset-14 {
    margin-left: 58.3333333333%;
  }
  .x-col-xl-offset-15 {
    margin-left: 62.5%;
  }
  .x-col-xl-offset-16 {
    margin-left: 66.6666666667%;
  }
  .x-col-xl-offset-17 {
    margin-left: 70.8333333333%;
  }
  .x-col-xl-offset-18 {
    margin-left: 75%;
  }
  .x-col-xl-offset-19 {
    margin-left: 79.1666666667%;
  }
  .x-col-xl-offset-20 {
    margin-left: 83.3333333333%;
  }
  .x-col-xl-offset-21 {
    margin-left: 87.5%;
  }
  .x-col-xl-offset-22 {
    margin-left: 91.6666666667%;
  }
  .x-col-xl-offset-23 {
    margin-left: 95.8333333333%;
  }
  .x-col-xl-order-0 {
    order: 0;
  }
  .x-col-xl-order-1 {
    order: 1;
  }
  .x-col-xl-order-2 {
    order: 2;
  }
  .x-col-xl-order-3 {
    order: 3;
  }
  .x-col-xl-order-4 {
    order: 4;
  }
  .x-col-xl-order-5 {
    order: 5;
  }
  .x-col-xl-order-6 {
    order: 6;
  }
  .x-col-xl-order-7 {
    order: 7;
  }
  .x-col-xl-order-8 {
    order: 8;
  }
  .x-col-xl-order-9 {
    order: 9;
  }
  .x-col-xl-order-10 {
    order: 10;
  }
  .x-col-xl-order-11 {
    order: 11;
  }
  .x-col-xl-order-12 {
    order: 12;
  }
  .x-col-xl-order-13 {
    order: 13;
  }
  .x-col-xl-order-14 {
    order: 14;
  }
  .x-col-xl-order-15 {
    order: 15;
  }
  .x-col-xl-order-16 {
    order: 16;
  }
  .x-col-xl-order-17 {
    order: 17;
  }
  .x-col-xl-order-18 {
    order: 18;
  }
  .x-col-xl-order-19 {
    order: 19;
  }
  .x-col-xl-order-20 {
    order: 20;
  }
  .x-col-xl-order-21 {
    order: 21;
  }
  .x-col-xl-order-22 {
    order: 22;
  }
  .x-col-xl-order-23 {
    order: 23;
  }
  .x-col-xl-order-24 {
    order: 24;
  }
}
@media (min-width: 1600px) {
  .x-col-xxl-1 {
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%;
  }
  .x-col-xxl-2 {
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%;
  }
  .x-col-xxl-3 {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
  .x-col-xxl-4 {
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%;
  }
  .x-col-xxl-5 {
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%;
  }
  .x-col-xxl-6 {
    flex: 0 0 25%;
    width: 25%;
  }
  .x-col-xxl-7 {
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%;
  }
  .x-col-xxl-8 {
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%;
  }
  .x-col-xxl-9 {
    flex: 0 0 37.5%;
    width: 37.5%;
  }
  .x-col-xxl-10 {
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%;
  }
  .x-col-xxl-11 {
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%;
  }
  .x-col-xxl-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .x-col-xxl-13 {
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%;
  }
  .x-col-xxl-14 {
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%;
  }
  .x-col-xxl-15 {
    flex: 0 0 62.5%;
    width: 62.5%;
  }
  .x-col-xxl-16 {
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%;
  }
  .x-col-xxl-17 {
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%;
  }
  .x-col-xxl-18 {
    flex: 0 0 75%;
    width: 75%;
  }
  .x-col-xxl-19 {
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%;
  }
  .x-col-xxl-20 {
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%;
  }
  .x-col-xxl-21 {
    flex: 0 0 87.5%;
    width: 87.5%;
  }
  .x-col-xxl-22 {
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%;
  }
  .x-col-xxl-23 {
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%;
  }
  .x-col-xxl-24 {
    flex: 0 0 100%;
    width: 100%;
  }
  .x-col-xxl-offset-0 {
    margin-left: 0%;
  }
  .x-col-xxl-offset-1 {
    margin-left: 4.1666666667%;
  }
  .x-col-xxl-offset-2 {
    margin-left: 8.3333333333%;
  }
  .x-col-xxl-offset-3 {
    margin-left: 12.5%;
  }
  .x-col-xxl-offset-4 {
    margin-left: 16.6666666667%;
  }
  .x-col-xxl-offset-5 {
    margin-left: 20.8333333333%;
  }
  .x-col-xxl-offset-6 {
    margin-left: 25%;
  }
  .x-col-xxl-offset-7 {
    margin-left: 29.1666666667%;
  }
  .x-col-xxl-offset-8 {
    margin-left: 33.3333333333%;
  }
  .x-col-xxl-offset-9 {
    margin-left: 37.5%;
  }
  .x-col-xxl-offset-10 {
    margin-left: 41.6666666667%;
  }
  .x-col-xxl-offset-11 {
    margin-left: 45.8333333333%;
  }
  .x-col-xxl-offset-12 {
    margin-left: 50%;
  }
  .x-col-xxl-offset-13 {
    margin-left: 54.1666666667%;
  }
  .x-col-xxl-offset-14 {
    margin-left: 58.3333333333%;
  }
  .x-col-xxl-offset-15 {
    margin-left: 62.5%;
  }
  .x-col-xxl-offset-16 {
    margin-left: 66.6666666667%;
  }
  .x-col-xxl-offset-17 {
    margin-left: 70.8333333333%;
  }
  .x-col-xxl-offset-18 {
    margin-left: 75%;
  }
  .x-col-xxl-offset-19 {
    margin-left: 79.1666666667%;
  }
  .x-col-xxl-offset-20 {
    margin-left: 83.3333333333%;
  }
  .x-col-xxl-offset-21 {
    margin-left: 87.5%;
  }
  .x-col-xxl-offset-22 {
    margin-left: 91.6666666667%;
  }
  .x-col-xxl-offset-23 {
    margin-left: 95.8333333333%;
  }
  .x-col-xxl-order-0 {
    order: 0;
  }
  .x-col-xxl-order-1 {
    order: 1;
  }
  .x-col-xxl-order-2 {
    order: 2;
  }
  .x-col-xxl-order-3 {
    order: 3;
  }
  .x-col-xxl-order-4 {
    order: 4;
  }
  .x-col-xxl-order-5 {
    order: 5;
  }
  .x-col-xxl-order-6 {
    order: 6;
  }
  .x-col-xxl-order-7 {
    order: 7;
  }
  .x-col-xxl-order-8 {
    order: 8;
  }
  .x-col-xxl-order-9 {
    order: 9;
  }
  .x-col-xxl-order-10 {
    order: 10;
  }
  .x-col-xxl-order-11 {
    order: 11;
  }
  .x-col-xxl-order-12 {
    order: 12;
  }
  .x-col-xxl-order-13 {
    order: 13;
  }
  .x-col-xxl-order-14 {
    order: 14;
  }
  .x-col-xxl-order-15 {
    order: 15;
  }
  .x-col-xxl-order-16 {
    order: 16;
  }
  .x-col-xxl-order-17 {
    order: 17;
  }
  .x-col-xxl-order-18 {
    order: 18;
  }
  .x-col-xxl-order-19 {
    order: 19;
  }
  .x-col-xxl-order-20 {
    order: 20;
  }
  .x-col-xxl-order-21 {
    order: 21;
  }
  .x-col-xxl-order-22 {
    order: 22;
  }
  .x-col-xxl-order-23 {
    order: 23;
  }
  .x-col-xxl-order-24 {
    order: 24;
  }
}

.x-grid {
  display: grid;
}

.x-row {
  display: flex;
  flex-flow: row wrap;
}
.x-row-nowrap {
  flex-wrap: nowrap;
}
.x-row-align-start {
  align-items: flex-start;
}
.x-row-align-center {
  align-items: center;
}
.x-row-align-end {
  align-items: flex-end;
}
.x-row-justify-start {
  justify-content: flex-start;
}
.x-row-justify-center {
  justify-content: center;
}
.x-row-justify-end {
  justify-content: flex-end;
}
.x-row-justify-space-around {
  justify-content: space-around;
}
.x-row-justify-space-between {
  justify-content: space-between;
}

:root {
  /*
   * 色阶默认值。
   *
   * 引用全局主色阶而非写死 hex：亮/暗主题切换与 ConfigProvider 换主色时
   * 热力图会跟着联动（业务也可用 activeColors 整体覆盖）。
   */
  --x-heatmap-color-level-1: var(--x-color-primary-1);
  --x-heatmap-color-level-2: var(--x-color-primary-2);
  --x-heatmap-color-level-3: var(--x-color-primary-3);
  --x-heatmap-color-level-4: var(--x-color-primary-5);
  --x-heatmap-color-level-5: var(--x-color-primary-6);
  /* 无数据格 / minimumColor 的兜底色 */
  --x-heatmap-color-empty: var(--x-color-fill-2);
  --x-heatmap-color-text: var(--x-color-text-3);
  --x-heatmap-border-radius-cell: var(--x-border-radius-small);
  --x-heatmap-border-radius-tooltip: var(--x-border-radius-medium);
  /*
   * 提示浮层沿用全局 tooltip 的反色语义：亮色主题深底白字，
   * 暗色主题浅底深字（--x-color-overlay-tooltip-text 会在暗色下翻转）。
   */
  --x-heatmap-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);
  --x-heatmap-color-tooltip-text: var(--x-color-overlay-tooltip-text);
  --x-heatmap-shadow-tooltip: var(--x-shadow-popover);
  --x-heatmap-color-cell-border: var(--x-color-border-subtle);
  --x-heatmap-margin-label: var(--x-spacing-1);
  --x-heatmap-spacing-week-label: var(--x-spacing-1);
  --x-heatmap-spacing-indicator: var(--x-spacing-2);
  --x-heatmap-spacing-footer: var(--x-spacing-4);
}

.x-heatmap {
  position: relative;
  display: inline-block;
  color: var(--x-heatmap-color-text);
  font-size: var(--x-font-size-caption);
  --x-heatmap-cell-size: 12px;
  --x-heatmap-cell-gap: var(--x-spacing-1);
}
.x-heatmap--body {
  display: flex;
  align-items: flex-start;
  gap: var(--x-heatmap-margin-label);
}

.x-heatmap {
  /* 星期标签与网格同行高，只显示单数行避免拥挤 */
}
.x-heatmap--week-labels {
  display: grid;
  flex: none;
  grid-auto-flow: column;
  align-items: center;
  padding-top: calc(var(--x-font-size-caption) * 1.5 + var(--x-heatmap-spacing-week-label));
}

.x-heatmap--week-label {
  height: var(--x-heatmap-cell-size);
  margin-bottom: var(--x-heatmap-cell-gap);
  line-height: var(--x-heatmap-cell-size);
  text-align: right;
  white-space: nowrap;
}

.x-heatmap--grid-wrapper {
  position: relative;
  min-width: 0;
}

.x-heatmap {
  /*
   * 月份标签用绝对定位铺在网格上方，按列号定位。
   * 只保留跨列数足够的月份（算法侧过滤），避免窄月标注重叠。
   */
}
.x-heatmap--month-labels {
  display: grid;
  grid-auto-flow: column;
  height: calc(var(--x-font-size-caption) * 1.5);
  margin-bottom: var(--x-heatmap-spacing-week-label);
}

.x-heatmap--month-label {
  grid-row: 1;
  line-height: 1.5;
  white-space: nowrap;
}

.x-heatmap {
  /*
   * 网格是提示浮层的定位基准（position: relative），
   * 因此浮层的 left / top 可以直接用「格子相对网格的偏移」表达，
   * 不必叠加星期标签等外层偏移量。
   *
   * 格子用显式的 grid-row / grid-column 定位（见 cell 规则），
   * 这里**不设** grid-auto-flow：自动填充顺序与语义坐标一旦不一致
   * 就会静默把整块热力图转置（曾因此出现「点 7 月显示 9-30」）。
   */
}
.x-heatmap--grid {
  position: relative;
  display: grid;
  gap: var(--x-heatmap-cell-gap);
}

.x-heatmap--cell {
  width: var(--x-heatmap-cell-size);
  height: var(--x-heatmap-cell-size);
  border-radius: var(--x-heatmap-border-radius-cell);
  cursor: pointer;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear), outline-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-heatmap--cell:hover {
  outline: 1px solid var(--x-heatmap-color-cell-border);
  outline-offset: 1px;
}
.x-heatmap--cell:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 1px;
}
.x-heatmap--cell {
  /* 补齐到整周的首尾格视觉弱化 */
}
.x-heatmap-is-out-of-range {
  opacity: 0.45;
}

.x-heatmap {
  /*
   * 悬浮提示：全网格共享一个节点，由 mousemove 委托更新位置。
   * 若每格一个 Tooltip，371 格会产生同量级的 Trigger 与 ResizeObserver。
   */
}
.x-heatmap--tooltip {
  position: absolute;
  z-index: 1;
  padding: var(--x-spacing-2) var(--x-spacing-4);
  color: var(--x-heatmap-color-tooltip-text);
  font-size: var(--x-font-size-caption);
  line-height: 1.5;
  white-space: nowrap;
  background-color: var(--x-heatmap-color-tooltip-bg);
  border-radius: var(--x-heatmap-border-radius-tooltip);
  box-shadow: var(--x-heatmap-shadow-tooltip);
  pointer-events: none;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-heatmap-is-visible {
  opacity: 1;
}

.x-heatmap--indicator {
  display: flex;
  gap: var(--x-heatmap-spacing-indicator);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--x-heatmap-spacing-indicator);
  line-height: 1;
}

.x-heatmap--indicator-swatch {
  width: var(--x-heatmap-cell-size);
  height: var(--x-heatmap-cell-size);
  border-radius: var(--x-heatmap-border-radius-cell);
}

.x-heatmap--indicator-leading.x-heatmap--indicator-trailing {
  white-space: nowrap;
}

.x-heatmap--footer {
  margin-top: var(--x-heatmap-spacing-footer);
}

.x-heatmap {
  /* 网格是键盘入口，给出与图表族一致的焦点环 */
}
.x-heatmap--grid:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--x-border-radius-small);
}

.x-heatmap {
  /* 键盘读数的读屏播报节点，视觉隐藏但保留在无障碍树中 */
}
.x-heatmap--live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.x-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
}
.x-image--img {
  display: block;
  max-width: 100%;
  vertical-align: middle;
  border-radius: inherit;
}
.x-image--img[role=button] {
  cursor: zoom-in;
}
.x-image--img:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 3px;
}

.x-image--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.x-image--footer {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.x-image--footer--caption {
  flex: 1 1 auto;
  min-width: 0;
  /*
   * 标题与描述都显式声明行高：二者是两行堆叠的文案，
   * 继承宿主行高会让整个 footer 高度与行距失控。
   */
}
.x-image--footer--caption-title {
  font-weight: 400;
  font-size: 13px;
  line-height: var(--x-line-height-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x-image--footer--caption-description {
  font-size: 12px;
  line-height: var(--x-line-height-base);
}

.x-image--footer--extra {
  flex: 0 0 auto;
  padding-left: 12px;
}

.x-image--with-footer-inner .x-image--footer {
  position: absolute;
  bottom: 0;
  left: 0;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--x-image-color-footer-inner-text);
  background: var(--x-image-color-footer-inner-bg);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  pointer-events: none;
}
.x-image--with-footer-inner .x-image--footer--extra {
  pointer-events: auto;
}
.x-image--with-footer-inner .x-image--footer--caption-title {
  color: var(--x-image-color-title-footer-inner-text);
}
.x-image--with-footer-inner .x-image--footer--caption-description {
  color: var(--x-image-color-description-footer-inner-text);
}

.x-image--with-footer-outer .x-image--footer {
  margin-top: 8px;
  color: var(--x-image-color-footer-outer-text);
}
.x-image--with-footer-outer .x-image--footer--caption-title {
  color: var(--x-image-color-title-footer-outer-text);
}
.x-image--with-footer-outer .x-image--footer--caption-description {
  color: var(--x-image-color-description-footer-outer-text);
}

.x-image--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--x-image-color-error-text);
  background-color: var(--x-image-color-error-bg);
  border-radius: inherit;
}
.x-image--error-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  max-height: 100%;
}
.x-image--error-icon > svg {
  width: 100%;
  height: 100%;
}
.x-image--error-alt {
  padding: 8px 16px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.x-image--loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--x-image-color-loader-bg);
  border-radius: inherit;
}
.x-image--loader-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--x-image-color-loader-spin-text);
  font-size: 16px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.x-image--loader-spin-text {
  color: var(--x-image-color-loader-spin-text);
  font-size: 12px;
}

.x-image--loading-error.x-image--with-footer-inner .x-image--error, .x-image--loading.x-image--with-footer-inner .x-image--loader {
  padding-bottom: 40px;
}
.x-image--simple.x-image--with-footer-inner .x-image--footer {
  padding: 12px 16px;
}

.x-image--loading .x-image--img, .x-image--loading-error .x-image--img {
  visibility: hidden;
}

.x-image-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
}
.x-image-preview-hide {
  display: none;
}

.x-image-preview .x-image-preview--mask,
.x-image-preview .x-image-preview--wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.x-image-preview--mask {
  background-color: var(--x-image-preview-color-mask-bg);
}

.x-image-preview--img-container {
  width: 100%;
  height: 100%;
  text-align: center;
}
.x-image-preview--img-container::before {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";
}
.x-image-preview--img-container .x-image-preview--img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  cursor: grab;
  user-select: none;
}
.x-image-preview--img-container .x-image-preview--img.x-image-preview-img-moving {
  cursor: grabbing;
}

.x-image-preview--scale-value {
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--x-image-preview-color-scale-value-text);
  font-size: 14px;
  line-height: initial;
  background-color: var(--x-image-preview-color-scale-value-bg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x-image-preview--toolbar {
  position: absolute;
  bottom: 46px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 4px 16px;
  background-color: var(--x-image-preview-color-toolbar-bg);
  border-radius: 5px;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.x-image-preview .x-image-preview--toolbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--x-image-preview-color-action-text);
  font-size: 14px;
  appearance: none;
  background-color: var(--x-color-transparent);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  flex: none;
}
.x-image-preview .x-image-preview--toolbar-action:hover, .x-image-preview .x-image-preview--toolbar-action:focus-visible {
  color: var(--x-image-preview-color-action-hover-text);
  background-color: var(--x-image-preview-color-action-hover-bg);
}
.x-image-preview .x-image-preview--toolbar-action:focus-visible {
  outline: 2px solid var(--x-color-white);
  outline-offset: 2px;
}
.x-image-preview .x-image-preview--toolbar-action-disabled, .x-image-preview .x-image-preview--toolbar-action-disabled:hover, .x-image-preview .x-image-preview--toolbar-action-disabled:focus-visible {
  color: var(--x-image-preview-color-action-disabled-text);
  background-color: var(--x-image-preview-color-action-disabled-bg);
  cursor: not-allowed;
}

.x-image-preview .x-image-preview--toolbar-action--name {
  padding-right: 8px;
  font-size: 12px;
}

.x-image-preview .x-image-preview--toolbar-action--content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: 1;
}
.x-image-preview .x-image-preview--toolbar-action--content > svg {
  width: 1em;
  height: 1em;
}

.x-image-preview--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--x-image-preview-color-loading-text);
  font-size: 16px;
  background-color: var(--x-image-preview-color-loading-bg);
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x-image-preview--error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 64px);
  padding: 24px;
  color: var(--x-image-preview-color-action-text);
  font-size: 14px;
  text-align: center;
  background: var(--x-image-preview-color-toolbar-bg);
  border-radius: 8px;
}

.x-image-preview--close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--x-image-preview-color-close-btn-text);
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  appearance: none;
  background: var(--x-image-preview-color-close-btn-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.x-image-preview--close-btn:focus-visible {
  outline: 2px solid var(--x-color-white);
  outline-offset: 3px;
}

.x-image-preview--arrow--left {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--x-image-preview-arrow-color-icon);
  appearance: none;
  background-color: var(--x-image-preview-arrow-color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}
.x-image-preview--arrow--left:focus-visible {
  outline: 2px solid var(--x-color-white);
  outline-offset: 3px;
}
.x-image-preview--arrow--left > svg {
  color: var(--x-image-preview-arrow-color-icon);
  font-size: 20px;
}
.x-image-preview--arrow--left:hover {
  background-color: var(--x-image-preview-arrow-color-bg-hover);
}

.x-image-preview--arrow--right {
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--x-image-preview-arrow-color-icon);
  appearance: none;
  background-color: var(--x-image-preview-arrow-color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}
.x-image-preview--arrow--right:focus-visible {
  outline: 2px solid var(--x-color-white);
  outline-offset: 3px;
}
.x-image-preview--arrow--right > svg {
  color: var(--x-image-preview-arrow-color-icon);
  font-size: 20px;
}
.x-image-preview--arrow--right:hover {
  background-color: var(--x-image-preview-arrow-color-bg-hover);
}

.x-image-preview--arrow-disabled, .x-image-preview--arrow-disabled:hover {
  color: var(--x-image-preview-arrow-color-icon-disabled);
  background-color: var(--x-image-preview-arrow-color-bg-disabled);
  cursor: not-allowed;
}
.x-image-preview--arrow-disabled > svg {
  color: var(--x-image-preview-arrow-color-icon-disabled);
}

/** mask 动效 */
.image-fade-enter-from,
.image-fade-leave-to {
  opacity: 0;
}

.image-fade-enter-to,
.image-fade-leave-from {
  opacity: 1;
}

.image-fade-enter-active {
  transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
}

.image-fade-leave-active {
  transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
}

.x-layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.x-layout--sidebar {
  position: relative;
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: var(--x-color-menu-dark-bg);
  transition: width var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-layout--sidebar--children {
  height: 100%;
  overflow: auto;
}
.x-layout--sidebar-collapsed .x-layout--sidebar--children {
  /* width */
}
.x-layout--sidebar-collapsed .x-layout--sidebar--children::-webkit-scrollbar {
  width: 0;
}
.x-layout--sidebar-has-trigger {
  box-sizing: border-box;
  padding-bottom: 48px;
}
.x-layout--sidebar--trigger {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  color: var(--x-color-white);
  background: var(--x-layout-trigger-dark-bg);
  cursor: pointer;
  transition: width var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-layout--sidebar--trigger-light {
  color: var(--x-color-text-1);
  background: var(--x-color-menu-light-bg);
  border-top: 1px solid var(--x-color-bg-5);
}
.x-layout--sidebar-light {
  background: var(--x-color-menu-light-bg);
  box-shadow: var(--x-layout-sidebar-light-shadow);
}
.x-layout--header {
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
}
.x-layout--content {
  flex: 1;
}
.x-layout--footer {
  flex: 0 0 auto;
  margin: 0;
}

.x-layout-has-sidebar {
  flex-direction: row;
}
.x-layout-has-sidebar > .x-layout,
.x-layout-has-sidebar > .x-layout--content {
  overflow-x: hidden;
}

:root {
  /*
   * 折线图专属 token。
   *
   * 分类色板、轴文字、网格线、提示浮层、图例等来自图表族共享层
   * （_components/chart/style/var.scss 的 --x-chart-*），
   * 这里只保留折线与数据点独有的视觉参数。
   */
  --x-line-chart-stroke-width: 2;
  --x-line-chart-area-opacity: 0.16;
  --x-line-chart-size-point: 3;
  --x-line-chart-size-point-active: 4.5;
  --x-line-chart-line-active-width: 1;
}

/*
 * 折线图几何样式。
 *
 * 网格与轴标签、悬浮提示、图例、空态、读屏播报节点由图表族共享层提供
 * （_components/chart/style/index.scss，类名 x-chart--*）。
 */
.x-line-chart {
  position: relative;
  width: 100%;
}
.x-line-chart--canvas {
  position: relative;
  width: 100%;
}

.x-line-chart--svg {
  display: block;
  max-width: 100%;
  overflow: visible;
  outline: none;
  cursor: default;
}
.x-line-chart--svg:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--x-border-radius-small);
}

.x-line-chart--line {
  stroke-width: var(--x-line-chart-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-line-chart--area {
  opacity: var(--x-line-chart-area-opacity);
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-line-chart--point {
  cursor: pointer;
}

.x-line-chart--point-dot {
  /* 与画布同色的描边，让数据点压在网格线上时依然清晰 */
  stroke: var(--x-chart-color-point-halo);
  stroke-width: 1;
  transition: r var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-line-chart--active-line {
  stroke: var(--x-chart-color-active-line);
  stroke-width: var(--x-line-chart-line-active-width);
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.x-line-chart {
  /*
   * 激活类目：含当前读数的系列保持原样，其他系列淡化。
   * 用 opacity 而不是改 stroke，避免覆盖业务通过 series[].color 指定的颜色。
   */
}
.x-line-chart--series {
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}

.x-line-chart--canvas:has(.x-line-chart--series.x-line-chart-is-active) .x-line-chart--series:not(.x-line-chart-is-active) {
  opacity: 0.4;
}

:root {
  --x-link-color-text: var(--x-color-primary-text);
  --x-link-color-text-success: var(--x-color-success-text);
  --x-link-color-text-warning: var(--x-color-warning-text);
  --x-link-color-text-danger: var(--x-color-danger-text);
  --x-link-color-text-strong: var(--x-color-strong-text);
  --x-link-color-text-disabled: var(--x-color-text-disabled);
  --x-link-color-text-loading: var(--x-color-text-secondary);
  --x-link-color-bg-active: var(--x-color-fill-3);
  --x-link-color-focus: var(--x-color-primary-text);
  --x-link-background-color: var(--x-color-primary-subtle);
  --x-link-success-background-color: var(--x-color-success-subtle);
  --x-link-danger-background-color: var(--x-color-danger-subtle);
  --x-link-warning-background-color: var(--x-color-warning-subtle);
  --x-link-strong-background-color: var(--x-color-strong-subtle);
}

.x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px var(--x-spacing-2);
  --x-link-current-color: var(--x-link-color-text);
  --x-link-current-hover-bg: var(--x-link-background-color);
  color: var(--x-link-current-color);
  font-size: var(--x-font-size-body-3);
  line-height: var(--x-line-height-base);
  text-decoration: none;
  background-color: var(--x-color-transparent);
  border-radius: var(--x-border-radius-small);
  cursor: pointer;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):hover {
  background-color: var(--x-link-current-hover-bg);
}
.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):active {
  background-color: var(--x-link-color-bg-active);
  transition: none;
}
.x-link:focus-visible {
  outline: 2px solid var(--x-link-color-focus);
  outline-offset: 2px;
}
.x-link.x-link-hoverless {
  display: inline;
  padding: 0;
}
.x-link-status-success {
  --x-link-current-color: var(--x-link-color-text-success);
  --x-link-current-hover-bg: var(--x-link-success-background-color);
}

.x-link-status-danger {
  --x-link-current-color: var(--x-link-color-text-danger);
  --x-link-current-hover-bg: var(--x-link-danger-background-color);
}

.x-link-status-warning {
  --x-link-current-color: var(--x-link-color-text-warning);
  --x-link-current-hover-bg: var(--x-link-warning-background-color);
}

.x-link-status-strong {
  --x-link-current-color: var(--x-link-color-text-strong);
  --x-link-current-hover-bg: var(--x-link-strong-background-color);
}

.x-link.x-link-disabled {
  color: var(--x-link-color-text-disabled);
  cursor: not-allowed;
}
.x-link.x-link-loading {
  color: var(--x-link-color-text-loading);
  cursor: default;
}
.x-link.x-link-strong {
  font-weight: bolder;
}
.x-link--icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-right: var(--x-spacing-4);
  font-size: var(--x-size-3);
  line-height: 1;
  vertical-align: -0.125em;
}

:root {
  --x-menu-font-size: 14px;
  --x-menu-line-height: var(--x-line-height-base);
  --x-menu-border-radius: var(--x-border-radius-small);
  --x-menu-font-weight-item-selected: var(--x-font-weight-500);
  --x-menu-color-label-item-selected: var(--x-color-primary-6);
  --x-menu-height-label-item-selected: 3px;
  --x-menu-margin-left-item-suffix-icon: var(--x-spacing-3);
  --x-menu-margin-right-item-prefix-icon: var(--x-spacing-7);
  --x-menu-horizontal-margin-right-item-prefix-icon: var(--x-spacing-7);
  --x-menu-item-gap: var(--x-spacing-2);
  --x-menu-item-indent-spacing: var(--x-spacing-8);
  --x-menu-width-collapse-button: var(--x-size-6);
  --x-menu-height-collapse-button: var(--x-size-6);
  --x-menu-border-radius-collapse-button: var(--x-border-radius-small);
  /**********************************************
   * theme: light / dark
   * status: default / disabled / selected / hover
   **********************************************/
  --x-menu-light-color-bg: var(--x-color-menu-light-bg);
  --x-menu-light-color-bg-item_default: var(--x-menu-light-color-bg);
  --x-menu-light-color-bg-item_hover: var(--x-color-fill-2);
  --x-menu-light-color-bg-item_selected: var(--x-color-fill-2);
  --x-menu-light-color-bg-item_disabled: var(--x-menu-light-color-bg);
  --x-menu-light-color-item_default: var(--x-color-text-2);
  --x-menu-light-color-item_hover: var(--x-color-text-2);
  --x-menu-light-color-item_selected: var(--x-color-primary-6);
  --x-menu-light-color-submenu_selected: var(--x-color-primary-6);
  /*
   * 亮色下内联子菜单选中只改文字色、不加底色（与 Arco 一致），
   * 但 index.scss 按主题名拼接引用该底色变量，亮色分支此前落到一个
   * 不存在的变量上，导致该条 background-color 声明被浏览器丢弃。
   * 显式声明为 transparent，语义明确且不再依赖"变量不存在"这种隐式行为。
   */
  --x-menu-light-color-bg-submenu_selected: var(--x-color-transparent);
  --x-menu-light-color-bg-submenu_selected_hover: var(--x-color-fill-2);
  --x-menu-light-color-item_disabled: var(--x-color-text-4);
  --x-menu-light-color-icon_default: var(--x-color-text-3);
  --x-menu-light-color-icon_hover: var(--x-color-text-3);
  --x-menu-light-color-icon_selected: var(--x-color-primary-6);
  --x-menu-light-color-icon_disabled: var(--x-color-text-4);
  --x-menu-light-color-group-title: var(--x-color-text-3);
  --x-menu-dark-color-default: var(--x-color-menu-dark-text);
  --x-menu-dark-color-secondary: var(--x-color-menu-dark-text-secondary);
  --x-menu-dark-color-disabled: var(--x-color-menu-dark-text-disabled);
  --x-menu-dark-color-bg: var(--x-color-menu-dark-bg);
  --x-menu-dark-color-bg-item_default: var(--x-menu-dark-color-bg);
  --x-menu-dark-color-bg-item_hover: var(--x-color-menu-dark-hover);
  --x-menu-dark-color-bg-item_selected: var(--x-color-menu-dark-hover);
  --x-menu-dark-color-bg-item_disabled: var(--x-menu-dark-color-bg);
  --x-menu-dark-color-submenu_selected: var(--x-color-white);
  --x-menu-dark-color-bg-submenu_selected: var(--x-color-menu-dark-submenu-selected-bg);
  --x-menu-dark-color-bg-submenu_selected_hover: var(--x-color-menu-dark-hover);
  --x-menu-dark-color-item_default: var(--x-menu-dark-color-default);
  --x-menu-dark-color-item_hover: var(--x-color-white);
  --x-menu-dark-color-item_selected: var(--x-color-white);
  --x-menu-dark-color-item_disabled: var(--x-menu-dark-color-disabled);
  --x-menu-dark-color-icon_default: var(--x-menu-dark-color-secondary);
  --x-menu-dark-color-icon_hover: var(--x-color-white);
  --x-menu-dark-color-icon_selected: var(--x-color-white);
  --x-menu-dark-color-icon_disabled: var(--x-menu-dark-color-disabled);
  --x-menu-dark-color-group-title: var(--x-menu-dark-color-secondary);
  /*
   * 子菜单浮层边框，仅被浮层三角箭头消费。
   *
   * 扁平化改造把 Dropdown / Popconfirm / Popover / Popup / Select 的浮层边框
   * 统一改为 transparent 后漏改了这里：浮层本体已无边框，箭头却仍描一条
   * 灰色边，视觉上像一枚脱开的灰色小箭头，而不是浮层伸出的尖角。
   * 与其余浮层对齐为 transparent；业务若要加回边框，覆盖该 token 即可。
   */
  --x-menu-color-border-popup: var(--x-color-transparent);
  --x-menu-light-color-bg-button: var(--x-color-fill-1);
  --x-menu-light-color-bg-button_hover: var(--x-color-fill-3);
  --x-menu-light-color-button: var(--x-color-text-3);
  --x-menu-dark-color-bg-button: var(--x-color-primary-6);
  --x-menu-dark-color-bg-button_hover: var(--x-color-primary-7);
  --x-menu-dark-color-button: var(--x-color-white);
  /**********************************************
   * horizontal / vertical
   **********************************************/
  --x-menu-horizontal-padding-vertical: 14px;
  --x-menu-horizontal-padding-horizontal: var(--x-spacing-8);
  --x-menu-horizontal-item-gap: var(--x-spacing-6);
  --x-menu-horizontal-item-height: 30px;
  --x-menu-horizontal-item-padding-horizontal: var(--x-spacing-6);
  --x-menu-vertical-padding-vertical: var(--x-spacing-2);
  --x-menu-vertical-padding-horizontal: var(--x-spacing-4);
  --x-menu-vertical-item-height: 40px;
  --x-menu-vertical-item-padding-horizontal: var(--x-spacing-6);
  /************************************************
   * collapse
   ***********************************************/
  --x-menu-collapse-width: var(--x-size-12);
  --x-menu-collapse-padding-vertical: var(--x-spacing-2);
  --x-menu-collapse-padding-horizontal: var(--x-spacing-2);
  --x-menu-collapse-item-size: calc(
    var(--x-menu-collapse-width) - var(--x-menu-collapse-padding-horizontal) * 2
  );
  /************************************************
   * popButton
   ***********************************************/
  --x-menu-pop-button-size: var(--x-size-10);
  --x-menu-pop-button-margin-bottom: var(--x-spacing-7);
  --x-menu-pop-button-box-shadow: var(--x-shadow2-down);
  --x-menu-pop-button-border-color: var(--x-color-transparent);
  /**********************************************
   * Theme dark in dropdown
   **********************************************/
  --x-dropdown-dark-color-bg: var(--x-color-menu-dark-bg);
  --x-dropdown-dark-color-border: var(--x-dropdown-dark-color-bg);
  --x-dropdown-dark-option-color-bg_default: var(--x-color-transparent);
  --x-dropdown-dark-option-color-bg_hover: var(--x-color-menu-dark-hover);
  --x-dropdown-dark-option-color-bg_selected: var(--x-color-transparent);
  --x-dropdown-dark-option-color-bg_disabled: var(--x-color-transparent);
  --x-dropdown-dark-option-color-text_default: var(--x-menu-dark-color-default);
  --x-dropdown-dark-option-color-text_hover: var(--x-color-white);
  --x-dropdown-dark-option-color-text_selected: var(--x-color-white);
  --x-dropdown-dark-option-color-text_disabled: var(--x-menu-dark-color-disabled);
  --x-dropdown-dark-group-title-color-text: var(--x-menu-dark-color-secondary);
}

@keyframes 'x-menu-selected-item-label-enter' {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.x-menu {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--x-menu-font-size);
  line-height: var(--x-menu-line-height);
  transition: width var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-menu:focus-visible {
  outline: 3px solid var(--x-color-primary-text);
}
.x-menu-indent {
  display: inline-block;
  width: var(--x-menu-item-indent-spacing);
}
.x-menu .x-menu-item,
.x-menu .x-menu-group-title,
.x-menu .x-menu-pop-header,
.x-menu .x-menu-inline-header {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--x-menu-border-radius);
  cursor: pointer;
}
.x-menu .x-menu-item.x-menu-disabled,
.x-menu .x-menu-group-title.x-menu-disabled,
.x-menu .x-menu-pop-header.x-menu-disabled,
.x-menu .x-menu-inline-header.x-menu-disabled {
  cursor: not-allowed;
}
.x-menu .x-menu-item.x-menu-disabled:hover,
.x-menu .x-menu-group-title.x-menu-disabled:hover,
.x-menu .x-menu-pop-header.x-menu-disabled:hover,
.x-menu .x-menu-inline-header.x-menu-disabled:hover {
  color: inherit;
}
.x-menu .x-menu-item.x-menu-selected,
.x-menu .x-menu-group-title.x-menu-selected,
.x-menu .x-menu-pop-header.x-menu-selected,
.x-menu .x-menu-inline-header.x-menu-selected {
  font-weight: var(--x-menu-font-weight-item-selected);
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-menu .x-menu-item.x-menu-selected svg,
.x-menu .x-menu-group-title.x-menu-selected svg,
.x-menu .x-menu-pop-header.x-menu-selected svg,
.x-menu .x-menu-inline-header.x-menu-selected svg {
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-menu .x-menu-item .x-icon,
.x-menu .x-menu-item .x-menu-icon,
.x-menu .x-menu-group-title .x-icon,
.x-menu .x-menu-group-title .x-menu-icon,
.x-menu .x-menu-pop-header .x-icon,
.x-menu .x-menu-pop-header .x-menu-icon,
.x-menu .x-menu-inline-header .x-icon,
.x-menu .x-menu-inline-header .x-menu-icon {
  margin-right: var(--x-menu-margin-right-item-prefix-icon);
}
.x-menu .x-menu-item .x-menu-icon .x-icon,
.x-menu .x-menu-group-title .x-menu-icon .x-icon,
.x-menu .x-menu-pop-header .x-menu-icon .x-icon,
.x-menu .x-menu-inline-header .x-menu-icon .x-icon {
  margin-right: 0;
}
.x-menu .x-menu-item:focus-visible,
.x-menu .x-menu-group-title:focus-visible,
.x-menu .x-menu-pop-header:focus-visible,
.x-menu .x-menu-inline-header:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}
.x-menu-light {
  background-color: var(--x-menu-light-color-bg);
}
.x-menu-light .x-menu-item,
.x-menu-light .x-menu-group-title,
.x-menu-light .x-menu-pop-header,
.x-menu-light .x-menu-inline-header {
  color: var(--x-menu-light-color-item_default);
  background-color: var(--x-menu-light-color-bg-item_default);
}
.x-menu-light .x-menu-item .x-icon,
.x-menu-light .x-menu-item .x-menu-icon,
.x-menu-light .x-menu-group-title .x-icon,
.x-menu-light .x-menu-group-title .x-menu-icon,
.x-menu-light .x-menu-pop-header .x-icon,
.x-menu-light .x-menu-pop-header .x-menu-icon,
.x-menu-light .x-menu-inline-header .x-icon,
.x-menu-light .x-menu-inline-header .x-menu-icon {
  color: var(--x-menu-light-color-icon_default);
}
.x-menu-light .x-menu-item:hover,
.x-menu-light .x-menu-group-title:hover,
.x-menu-light .x-menu-pop-header:hover,
.x-menu-light .x-menu-inline-header:hover {
  color: var(--x-menu-light-color-item_hover);
  background-color: var(--x-menu-light-color-bg-item_hover);
}
.x-menu-light .x-menu-item:hover .x-icon,
.x-menu-light .x-menu-item:hover .x-menu-icon,
.x-menu-light .x-menu-group-title:hover .x-icon,
.x-menu-light .x-menu-group-title:hover .x-menu-icon,
.x-menu-light .x-menu-pop-header:hover .x-icon,
.x-menu-light .x-menu-pop-header:hover .x-menu-icon,
.x-menu-light .x-menu-inline-header:hover .x-icon,
.x-menu-light .x-menu-inline-header:hover .x-menu-icon {
  color: var(--x-menu-light-color-icon_hover);
}
.x-menu-light .x-menu-item.x-menu-selected,
.x-menu-light .x-menu-group-title.x-menu-selected,
.x-menu-light .x-menu-pop-header.x-menu-selected,
.x-menu-light .x-menu-inline-header.x-menu-selected {
  color: var(--x-menu-light-color-item_selected);
}
.x-menu-light .x-menu-item.x-menu-selected .x-icon,
.x-menu-light .x-menu-item.x-menu-selected .x-menu-icon,
.x-menu-light .x-menu-group-title.x-menu-selected .x-icon,
.x-menu-light .x-menu-group-title.x-menu-selected .x-menu-icon,
.x-menu-light .x-menu-pop-header.x-menu-selected .x-icon,
.x-menu-light .x-menu-pop-header.x-menu-selected .x-menu-icon,
.x-menu-light .x-menu-inline-header.x-menu-selected .x-icon,
.x-menu-light .x-menu-inline-header.x-menu-selected .x-menu-icon {
  color: var(--x-menu-light-color-icon_selected);
}
.x-menu-light .x-menu-item.x-menu-disabled,
.x-menu-light .x-menu-group-title.x-menu-disabled,
.x-menu-light .x-menu-pop-header.x-menu-disabled,
.x-menu-light .x-menu-inline-header.x-menu-disabled {
  color: var(--x-menu-light-color-item_disabled);
  background-color: var(--x-menu-light-color-bg-item_disabled);
}
.x-menu-light .x-menu-item.x-menu-disabled .x-icon,
.x-menu-light .x-menu-item.x-menu-disabled .x-menu-icon,
.x-menu-light .x-menu-group-title.x-menu-disabled .x-icon,
.x-menu-light .x-menu-group-title.x-menu-disabled .x-menu-icon,
.x-menu-light .x-menu-pop-header.x-menu-disabled .x-icon,
.x-menu-light .x-menu-pop-header.x-menu-disabled .x-menu-icon,
.x-menu-light .x-menu-inline-header.x-menu-disabled .x-icon,
.x-menu-light .x-menu-inline-header.x-menu-disabled .x-menu-icon {
  color: var(--x-menu-light-color-icon_disabled);
}
.x-menu-light .x-menu-item.x-menu-disabled:hover,
.x-menu-light .x-menu-group-title.x-menu-disabled:hover,
.x-menu-light .x-menu-pop-header.x-menu-disabled:hover,
.x-menu-light .x-menu-inline-header.x-menu-disabled:hover {
  color: var(--x-menu-light-color-item_disabled);
  background-color: var(--x-menu-light-color-bg-item_disabled);
}
.x-menu-light .x-menu-item.x-menu-disabled:hover .x-icon,
.x-menu-light .x-menu-item.x-menu-disabled:hover .x-menu-icon,
.x-menu-light .x-menu-group-title.x-menu-disabled:hover .x-icon,
.x-menu-light .x-menu-group-title.x-menu-disabled:hover .x-menu-icon,
.x-menu-light .x-menu-pop-header.x-menu-disabled:hover .x-icon,
.x-menu-light .x-menu-pop-header.x-menu-disabled:hover .x-menu-icon,
.x-menu-light .x-menu-inline-header.x-menu-disabled:hover .x-icon,
.x-menu-light .x-menu-inline-header.x-menu-disabled:hover .x-menu-icon {
  color: var(--x-menu-light-color-icon_disabled);
}
.x-menu-light .x-menu-item.x-menu-selected {
  background-color: var(--x-menu-light-color-bg-item_selected);
}
.x-menu-light .x-menu-inline-header.x-menu-selected {
  color: var(--x-menu-light-color-submenu_selected);
  background-color: var(--x-menu-light-color-bg-submenu_selected);
}
.x-menu-light .x-menu-inline-header.x-menu-selected .x-icon,
.x-menu-light .x-menu-inline-header.x-menu-selected .x-menu-icon {
  color: var(--x-menu-light-color-submenu_selected);
}
.x-menu-light .x-menu-inline-header.x-menu-selected:hover {
  background-color: var(--x-menu-light-color-bg-submenu_selected_hover);
}
.x-menu-light.x-menu-horizontal .x-menu-item.x-menu-selected,
.x-menu-light.x-menu-horizontal .x-menu-group-title.x-menu-selected,
.x-menu-light.x-menu-horizontal .x-menu-pop-header.x-menu-selected,
.x-menu-light.x-menu-horizontal .x-menu-inline-header.x-menu-selected {
  background: none;
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-menu-light.x-menu-horizontal .x-menu-item.x-menu-selected:hover,
.x-menu-light.x-menu-horizontal .x-menu-group-title.x-menu-selected:hover,
.x-menu-light.x-menu-horizontal .x-menu-pop-header.x-menu-selected:hover,
.x-menu-light.x-menu-horizontal .x-menu-inline-header.x-menu-selected:hover {
  background-color: var(--x-menu-light-color-bg-item_hover);
}
.x-menu-light .x-menu-group-title {
  color: var(--x-menu-light-color-group-title);
  pointer-events: none;
}
.x-menu-light .x-menu-collapse-button {
  color: var(--x-menu-light-color-button);
  background-color: var(--x-menu-light-color-bg-button);
}
.x-menu-light .x-menu-collapse-button:hover {
  background-color: var(--x-menu-light-color-bg-button_hover);
}
.x-menu-dark {
  background-color: var(--x-menu-dark-color-bg);
}
.x-menu-dark .x-menu-item,
.x-menu-dark .x-menu-group-title,
.x-menu-dark .x-menu-pop-header,
.x-menu-dark .x-menu-inline-header {
  color: var(--x-menu-dark-color-item_default);
  background-color: var(--x-menu-dark-color-bg-item_default);
}
.x-menu-dark .x-menu-item .x-icon,
.x-menu-dark .x-menu-item .x-menu-icon,
.x-menu-dark .x-menu-group-title .x-icon,
.x-menu-dark .x-menu-group-title .x-menu-icon,
.x-menu-dark .x-menu-pop-header .x-icon,
.x-menu-dark .x-menu-pop-header .x-menu-icon,
.x-menu-dark .x-menu-inline-header .x-icon,
.x-menu-dark .x-menu-inline-header .x-menu-icon {
  color: var(--x-menu-dark-color-icon_default);
}
.x-menu-dark .x-menu-item:hover,
.x-menu-dark .x-menu-group-title:hover,
.x-menu-dark .x-menu-pop-header:hover,
.x-menu-dark .x-menu-inline-header:hover {
  color: var(--x-menu-dark-color-item_hover);
  background-color: var(--x-menu-dark-color-bg-item_hover);
}
.x-menu-dark .x-menu-item:hover .x-icon,
.x-menu-dark .x-menu-item:hover .x-menu-icon,
.x-menu-dark .x-menu-group-title:hover .x-icon,
.x-menu-dark .x-menu-group-title:hover .x-menu-icon,
.x-menu-dark .x-menu-pop-header:hover .x-icon,
.x-menu-dark .x-menu-pop-header:hover .x-menu-icon,
.x-menu-dark .x-menu-inline-header:hover .x-icon,
.x-menu-dark .x-menu-inline-header:hover .x-menu-icon {
  color: var(--x-menu-dark-color-icon_hover);
}
.x-menu-dark .x-menu-item.x-menu-selected,
.x-menu-dark .x-menu-group-title.x-menu-selected,
.x-menu-dark .x-menu-pop-header.x-menu-selected,
.x-menu-dark .x-menu-inline-header.x-menu-selected {
  color: var(--x-menu-dark-color-item_selected);
}
.x-menu-dark .x-menu-item.x-menu-selected .x-icon,
.x-menu-dark .x-menu-item.x-menu-selected .x-menu-icon,
.x-menu-dark .x-menu-group-title.x-menu-selected .x-icon,
.x-menu-dark .x-menu-group-title.x-menu-selected .x-menu-icon,
.x-menu-dark .x-menu-pop-header.x-menu-selected .x-icon,
.x-menu-dark .x-menu-pop-header.x-menu-selected .x-menu-icon,
.x-menu-dark .x-menu-inline-header.x-menu-selected .x-icon,
.x-menu-dark .x-menu-inline-header.x-menu-selected .x-menu-icon {
  color: var(--x-menu-dark-color-icon_selected);
}
.x-menu-dark .x-menu-item.x-menu-disabled,
.x-menu-dark .x-menu-group-title.x-menu-disabled,
.x-menu-dark .x-menu-pop-header.x-menu-disabled,
.x-menu-dark .x-menu-inline-header.x-menu-disabled {
  color: var(--x-menu-dark-color-item_disabled);
  background-color: var(--x-menu-dark-color-bg-item_disabled);
}
.x-menu-dark .x-menu-item.x-menu-disabled .x-icon,
.x-menu-dark .x-menu-item.x-menu-disabled .x-menu-icon,
.x-menu-dark .x-menu-group-title.x-menu-disabled .x-icon,
.x-menu-dark .x-menu-group-title.x-menu-disabled .x-menu-icon,
.x-menu-dark .x-menu-pop-header.x-menu-disabled .x-icon,
.x-menu-dark .x-menu-pop-header.x-menu-disabled .x-menu-icon,
.x-menu-dark .x-menu-inline-header.x-menu-disabled .x-icon,
.x-menu-dark .x-menu-inline-header.x-menu-disabled .x-menu-icon {
  color: var(--x-menu-dark-color-icon_disabled);
}
.x-menu-dark .x-menu-item.x-menu-disabled:hover,
.x-menu-dark .x-menu-group-title.x-menu-disabled:hover,
.x-menu-dark .x-menu-pop-header.x-menu-disabled:hover,
.x-menu-dark .x-menu-inline-header.x-menu-disabled:hover {
  color: var(--x-menu-dark-color-item_disabled);
  background-color: var(--x-menu-dark-color-bg-item_disabled);
}
.x-menu-dark .x-menu-item.x-menu-disabled:hover .x-icon,
.x-menu-dark .x-menu-item.x-menu-disabled:hover .x-menu-icon,
.x-menu-dark .x-menu-group-title.x-menu-disabled:hover .x-icon,
.x-menu-dark .x-menu-group-title.x-menu-disabled:hover .x-menu-icon,
.x-menu-dark .x-menu-pop-header.x-menu-disabled:hover .x-icon,
.x-menu-dark .x-menu-pop-header.x-menu-disabled:hover .x-menu-icon,
.x-menu-dark .x-menu-inline-header.x-menu-disabled:hover .x-icon,
.x-menu-dark .x-menu-inline-header.x-menu-disabled:hover .x-menu-icon {
  color: var(--x-menu-dark-color-icon_disabled);
}
.x-menu-dark .x-menu-item.x-menu-selected {
  background-color: var(--x-menu-dark-color-bg-item_selected);
}
.x-menu-dark .x-menu-inline-header.x-menu-selected {
  color: var(--x-menu-dark-color-submenu_selected);
  background-color: var(--x-menu-dark-color-bg-submenu_selected);
}
.x-menu-dark .x-menu-inline-header.x-menu-selected .x-icon,
.x-menu-dark .x-menu-inline-header.x-menu-selected .x-menu-icon {
  color: var(--x-menu-dark-color-submenu_selected);
}
.x-menu-dark .x-menu-inline-header.x-menu-selected:hover {
  background-color: var(--x-menu-dark-color-bg-submenu_selected_hover);
}
.x-menu-dark.x-menu-horizontal .x-menu-item.x-menu-selected,
.x-menu-dark.x-menu-horizontal .x-menu-group-title.x-menu-selected,
.x-menu-dark.x-menu-horizontal .x-menu-pop-header.x-menu-selected,
.x-menu-dark.x-menu-horizontal .x-menu-inline-header.x-menu-selected {
  background: none;
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-menu-dark.x-menu-horizontal .x-menu-item.x-menu-selected:hover,
.x-menu-dark.x-menu-horizontal .x-menu-group-title.x-menu-selected:hover,
.x-menu-dark.x-menu-horizontal .x-menu-pop-header.x-menu-selected:hover,
.x-menu-dark.x-menu-horizontal .x-menu-inline-header.x-menu-selected:hover {
  background-color: var(--x-menu-dark-color-bg-item_hover);
}
.x-menu-dark .x-menu-group-title {
  color: var(--x-menu-dark-color-group-title);
  pointer-events: none;
}
.x-menu-dark .x-menu-collapse-button {
  color: var(--x-menu-dark-color-button);
  background-color: var(--x-menu-dark-color-bg-button);
}
.x-menu-dark .x-menu-collapse-button:hover {
  background-color: var(--x-menu-dark-color-bg-button_hover);
}
.x-menu a,
.x-menu a:hover,
.x-menu a:focus,
.x-menu a:active {
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}
.x-menu-scrollbar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.x-menu-scrollbar .x-scrollbar--container {
  height: 100%;
}
.x-menu-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.x-menu-icon-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.x-menu-icon-suffix.is-open .x-icon {
  transform: rotate(180deg);
}
.x-menu-vertical .x-menu-item,
.x-menu-vertical .x-menu-group-title,
.x-menu-vertical .x-menu-pop-header,
.x-menu-vertical .x-menu-inline-header {
  padding: 0 var(--x-menu-vertical-item-padding-horizontal);
  line-height: var(--x-menu-vertical-item-height);
}
.x-menu-vertical .x-menu-item .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-group-title .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-pop-header .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-inline-header .x-menu-icon-suffix .x-icon {
  margin-right: 0;
}
.x-menu-vertical .x-menu-item,
.x-menu-vertical .x-menu-group-title,
.x-menu-vertical .x-menu-pop-header,
.x-menu-vertical .x-menu-inline-header {
  margin-bottom: var(--x-menu-item-gap);
}
.x-menu-vertical .x-menu-item:not(.x-menu-has-icon),
.x-menu-vertical .x-menu-group-title:not(.x-menu-has-icon),
.x-menu-vertical .x-menu-pop-header:not(.x-menu-has-icon),
.x-menu-vertical .x-menu-inline-header:not(.x-menu-has-icon) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-menu-vertical .x-menu-item.x-menu-has-icon,
.x-menu-vertical .x-menu-group-title.x-menu-has-icon,
.x-menu-vertical .x-menu-pop-header.x-menu-has-icon,
.x-menu-vertical .x-menu-inline-header.x-menu-has-icon {
  display: flex;
  align-items: center;
}
.x-menu-vertical .x-menu-item.x-menu-has-icon > .x-menu-indent-list,
.x-menu-vertical .x-menu-item.x-menu-has-icon > .x-menu-icon,
.x-menu-vertical .x-menu-group-title.x-menu-has-icon > .x-menu-indent-list,
.x-menu-vertical .x-menu-group-title.x-menu-has-icon > .x-menu-icon,
.x-menu-vertical .x-menu-pop-header.x-menu-has-icon > .x-menu-indent-list,
.x-menu-vertical .x-menu-pop-header.x-menu-has-icon > .x-menu-icon,
.x-menu-vertical .x-menu-inline-header.x-menu-has-icon > .x-menu-indent-list,
.x-menu-vertical .x-menu-inline-header.x-menu-has-icon > .x-menu-icon {
  flex: none;
}
.x-menu-vertical .x-menu-item.x-menu-has-icon .x-menu-icon,
.x-menu-vertical .x-menu-group-title.x-menu-has-icon .x-menu-icon,
.x-menu-vertical .x-menu-pop-header.x-menu-has-icon .x-menu-icon,
.x-menu-vertical .x-menu-inline-header.x-menu-has-icon .x-menu-icon {
  line-height: 1;
}
.x-menu-vertical .x-menu-item.x-menu-has-icon .x-menu-title,
.x-menu-vertical .x-menu-group-title.x-menu-has-icon .x-menu-title,
.x-menu-vertical .x-menu-pop-header.x-menu-has-icon .x-menu-title,
.x-menu-vertical .x-menu-inline-header.x-menu-has-icon .x-menu-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-menu-vertical .x-menu-item .x-menu-item-inner,
.x-menu-vertical .x-menu-group-title .x-menu-item-inner,
.x-menu-vertical .x-menu-pop-header .x-menu-item-inner,
.x-menu-vertical .x-menu-inline-header .x-menu-item-inner {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.x-menu-vertical .x-menu-item .x-menu-icon-suffix,
.x-menu-vertical .x-menu-group-title .x-menu-icon-suffix,
.x-menu-vertical .x-menu-pop-header .x-menu-icon-suffix,
.x-menu-vertical .x-menu-inline-header .x-menu-icon-suffix {
  position: absolute;
  top: 50%;
  right: var(--x-menu-vertical-item-padding-horizontal);
  display: inline-flex;
  align-items: center;
  transform: translateY(-50%);
}
.x-menu-vertical .x-menu-item .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-group-title .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-pop-header .x-menu-icon-suffix .x-icon,
.x-menu-vertical .x-menu-inline-header .x-menu-icon-suffix .x-icon {
  display: block;
  line-height: 1;
}
.x-menu-vertical .x-menu-inner {
  padding: var(--x-menu-vertical-padding-vertical) var(--x-menu-vertical-padding-horizontal);
}
.x-menu-vertical .x-menu-item.x-menu-item-indented {
  display: flex;
}
.x-menu-vertical .x-menu-pop-header,
.x-menu-vertical .x-menu-inline-header {
  padding-right: 28px;
}
.x-menu-horizontal {
  width: 100%;
  height: auto;
}
.x-menu-horizontal .x-menu-item,
.x-menu-horizontal .x-menu-group-title,
.x-menu-horizontal .x-menu-pop-header,
.x-menu-horizontal .x-menu-inline-header {
  padding: 0 var(--x-menu-horizontal-item-padding-horizontal);
  line-height: var(--x-menu-horizontal-item-height);
}
.x-menu-horizontal .x-menu-item .x-menu-icon-suffix .x-icon,
.x-menu-horizontal .x-menu-group-title .x-menu-icon-suffix .x-icon,
.x-menu-horizontal .x-menu-pop-header .x-menu-icon-suffix .x-icon,
.x-menu-horizontal .x-menu-inline-header .x-menu-icon-suffix .x-icon {
  margin-right: 0;
}
.x-menu-horizontal .x-icon,
.x-menu-horizontal .x-menu-icon {
  margin-right: var(--x-menu-horizontal-margin-right-item-prefix-icon);
}
.x-menu-horizontal .x-menu-icon-suffix {
  margin-left: var(--x-menu-margin-left-item-suffix-icon);
}
.x-menu-horizontal .x-menu-inner {
  display: flex;
  align-items: center;
  padding: var(--x-menu-horizontal-padding-vertical) var(--x-menu-horizontal-padding-horizontal);
}
.x-menu-horizontal .x-menu-item,
.x-menu-horizontal .x-menu-pop {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.x-menu-horizontal .x-menu-item:not(:first-child),
.x-menu-horizontal .x-menu-pop:not(:first-child) {
  margin-left: var(--x-menu-horizontal-item-gap);
}
.x-menu-horizontal .x-menu-pop::after {
  position: absolute;
  /* `- var(...)` 会被直译为 `-var(...)` 非法值导致整条声明失效，用 calc 取负 */
  bottom: calc(-1 * var(--x-menu-horizontal-padding-vertical));
  left: 0;
  width: 100%;
  height: var(--x-menu-horizontal-padding-vertical);
  content: " ";
}
.x-menu-overflow-wrap {
  width: 100%;
  /*
   * 镜像项与隐藏项必须脱离布局流，否则它们照常占位，会把可见的
   * 「...」收纳头挤到第二行（实测 wrap 高度 60px 而非 30px）。
   *
   * 这些节点同时带 `x-menu-pop-header`（item-base 生成
   * `.x-menu .x-menu-pop-header` 的 position: relative，特异性 0,2,0），
   * 所以裸类名（0,1,0）压不过它。这里用直接子选择器达到同为 0,2,0
   * 且位于 item-base 之后，按源码顺序胜出。
   * 注意必须带 `-wrap`：这两个类挂在 wrap 的直接子级上，
   * 写成不存在的祖先类会退化成永不匹配的后代选择器。
   */
}
.x-menu-overflow-wrap > .x-menu-overflow-sub-menu-mirror,
.x-menu-overflow-wrap > .x-menu-overflow-hidden-menu-item {
  position: absolute;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}
.x-menu-selected-label {
  position: absolute;
  right: var(--x-menu-horizontal-item-padding-horizontal);
  bottom: calc(-1 * var(--x-menu-horizontal-padding-vertical));
  left: var(--x-menu-horizontal-item-padding-horizontal);
  height: var(--x-menu-height-label-item-selected);
  background-color: var(--x-menu-color-label-item-selected);
  animation: x-menu-selected-item-label-enter var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-menu-pop-button {
  width: auto;
  background: none;
  box-shadow: none;
}
.x-menu-pop-button.x-menu-collapsed {
  width: auto;
}
.x-menu-pop-button .x-menu-item,
.x-menu-pop-button .x-menu-group-title,
.x-menu-pop-button .x-menu-pop-header,
.x-menu-pop-button .x-menu-inline-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x-menu-pop-button-size);
  height: var(--x-menu-pop-button-size);
  padding: 0;
  margin-bottom: var(--x-menu-pop-button-margin-bottom);
  line-height: var(--x-menu-pop-button-size);
  border: 1px solid var(--x-menu-pop-button-border-color);
  border-radius: 50%;
  box-shadow: var(--x-menu-pop-button-box-shadow);
}
.x-menu-pop-button .x-menu-item .x-menu-icon,
.x-menu-pop-button .x-menu-group-title .x-menu-icon,
.x-menu-pop-button .x-menu-pop-header .x-menu-icon,
.x-menu-pop-button .x-menu-inline-header .x-menu-icon {
  margin-right: 0;
}
.x-menu-collapsed {
  width: var(--x-menu-collapse-width);
}
.x-menu-collapsed .x-menu-inner {
  padding: var(--x-menu-collapse-padding-vertical) var(--x-menu-collapse-padding-horizontal);
}
.x-menu-collapsed .x-menu-icon-suffix {
  display: none;
}
.x-menu-collapsed .x-menu-has-icon > *:not(.x-menu-icon) {
  display: none;
}
.x-menu-collapsed .x-menu-has-icon > .x-menu-icon {
  margin-right: 0;
}
.x-menu-collapsed .x-menu-item .x-icon,
.x-menu-collapsed .x-menu-group-title .x-icon,
.x-menu-collapsed .x-menu-pop-header .x-icon,
.x-menu-collapsed .x-menu-inline-header .x-icon {
  margin-right: 0;
}
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar.x-menu-inner,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-scrollbar--container,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner.x-menu-inner,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-scrollbar--container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-item-tooltip-trigger.x-tooltip,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-item-tooltip-trigger.x-tooltip {
  display: flex;
  justify-content: center;
  width: var(--x-menu-collapse-item-size);
}
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-item,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-pop-header,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-inline-header,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-item,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-pop-header,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-inline-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x-menu-collapse-item-size);
  height: var(--x-menu-vertical-item-height);
  padding: 0;
  line-height: var(--x-menu-vertical-item-height);
}
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-item:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-pop-header:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-inline-header:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-group-title,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-item:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-pop-header:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-inline-header:not(.x-menu-has-icon),
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-group-title {
  overflow: hidden;
  color: var(--x-color-transparent);
  text-indent: -999px;
}
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-item:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-pop-header:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-inline-header:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-scrollbar .x-menu-group-title .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-item:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-pop-header:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-inline-header:not(.x-menu-has-icon) .x-menu-indent-list,
.x-menu-collapsed:not(.x-menu-pop-button) > .x-menu-inner .x-menu-group-title .x-menu-indent-list {
  display: none;
}
.x-menu-collapse-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x-menu-width-collapse-button);
  height: var(--x-menu-height-collapse-button);
  padding: 0;
  border: 0;
  border-radius: var(--x-menu-border-radius-collapse-button);
  cursor: pointer;
}
.x-menu-collapse-button:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
}
.x-menu-has-collapse-button .x-menu-inner {
  padding-bottom: calc(var(--x-menu-vertical-padding-vertical) + var(--x-menu-height-collapse-button) + 16px);
}
.x-menu-inline-content {
  height: auto;
  overflow: hidden;
  transition: height var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-menu-inline-content-hide {
  height: 0;
}
.x-menu-item-tooltip a {
  color: inherit;
  cursor: text;
}
.x-menu-item-tooltip a:hover, .x-menu-item-tooltip a:focus, .x-menu-item-tooltip a:active {
  color: inherit;
}
.x-menu-item-tooltip.x-tooltip--content {
  min-width: 120px;
  padding: var(--x-dropdown-padding-vertical) var(--x-dropdown-option-padding-horizontal);
  color: var(--x-dropdown-option-color-text_default);
  font-size: var(--x-dropdown-font-size);
  line-height: var(--x-dropdown-option-height);
  background-color: var(--x-dropdown-color-bg);
  border: 1px solid var(--x-dropdown-color-border);
  border-radius: var(--x-dropdown-border-radius);
  box-shadow: var(--x-dropdown-box-shadow);
}
.x-menu-item-tooltip-arrow.x-tooltip--popup-arrow {
  background-color: var(--x-dropdown-color-bg);
  border: 1px solid var(--x-dropdown-color-border);
}
.x-menu-pop-trigger.x-trigger--popup[trigger-placement=bl] {
  transform: translateY(var(--x-menu-horizontal-padding-vertical));
}
.x-menu-pop-trigger.x-trigger--popup[trigger-placement=bl] .x-trigger--arrow {
  z-index: 0;
  border-top: 1px solid var(--x-menu-color-border-popup);
  border-left: 1px solid var(--x-menu-color-border-popup);
}
.x-menu-pop-trigger.x-trigger--popup[trigger-placement=rt] {
  transform: translateX(var(--x-menu-vertical-padding-horizontal));
}
.x-menu-pop-trigger.x-trigger--popup[trigger-placement=rt] .x-trigger--arrow {
  z-index: 0;
  border-bottom: 1px solid var(--x-menu-color-border-popup);
  border-left: 1px solid var(--x-menu-color-border-popup);
}
.x-menu-pop-trigger.x-menu-pop-trigger-dark .x-trigger--arrow {
  background-color: var(--x-menu-dark-color-bg);
  border-color: var(--x-menu-dark-color-bg);
}

.x-trigger-menu {
  position: relative;
  box-sizing: border-box;
  max-height: var(--x-dropdown-max-height);
  padding: 0;
  overflow: hidden;
  background-color: var(--x-dropdown-color-bg);
  border: 1px solid var(--x-dropdown-color-border);
  border-radius: var(--x-dropdown-border-radius);
  box-shadow: var(--x-dropdown-box-shadow);
}
.x-trigger-menu .x-trigger-menu-scrollbar,
.x-trigger-menu .x-trigger-menu-inner {
  max-height: inherit;
}
.x-trigger-menu .x-trigger-menu-scrollbar .x-scrollbar--container {
  max-height: inherit;
}
.x-trigger-menu .x-trigger-menu-inner {
  padding: var(--x-dropdown-padding-vertical) 0;
}
.x-trigger-menu-hidden {
  display: none;
}
.x-trigger-menu-item, .x-trigger-menu-pop-header {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: var(--x-dropdown-option-height);
  padding: 0 var(--x-dropdown-option-padding-horizontal);
  color: var(--x-dropdown-option-color-text_default);
  font-size: var(--x-dropdown-font-size);
  line-height: var(--x-dropdown-option-height);
  text-align: left;
  background-color: var(--x-dropdown-option-color-bg_default);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-trigger-menu-item.x-trigger-menu-selected, .x-trigger-menu-pop-header.x-trigger-menu-selected {
  color: var(--x-dropdown-option-color-text_selected);
  font-weight: var(--x-dropdown-option-font-weight_selected);
  background-color: var(--x-dropdown-option-color-bg_selected);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-trigger-menu-item:hover, .x-trigger-menu-pop-header:hover {
  color: var(--x-dropdown-option-color-text_hover);
  background-color: var(--x-dropdown-option-color-bg_hover);
}
.x-trigger-menu-item.x-trigger-menu-disabled, .x-trigger-menu-pop-header.x-trigger-menu-disabled {
  color: var(--x-dropdown-option-color-text_disabled);
  background-color: var(--x-dropdown-option-color-bg_disabled);
  cursor: not-allowed;
}
.x-trigger-menu .x-trigger-menu-has-icon {
  display: flex;
  align-items: center;
}
.x-trigger-menu .x-trigger-menu-has-icon .x-trigger-menu-icon {
  margin-right: 8px;
  line-height: 1;
}
.x-trigger-menu .x-trigger-menu-has-icon > * {
  flex: none;
}
.x-trigger-menu .x-trigger-menu-has-icon .x-trigger-menu-title {
  flex: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-trigger-menu-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.x-trigger-menu-pop-header .x-trigger-menu-icon-suffix {
  display: flex;
  margin-left: var(--x-dropdown-margin-left-suffix-icon);
}
.x-trigger-menu-group:first-child .x-trigger-menu-group-title {
  /* 两个 CSS 变量相减必须包在 calc 里，否则编译出无 calc 的非法减法 */
  padding-top: calc(var(--x-dropdown-group-title-padding-top) - var(--x-dropdown-padding-vertical));
}
.x-trigger-menu-group-title {
  box-sizing: border-box;
  width: 100%;
  padding: var(--x-dropdown-group-title-padding-top) var(--x-dropdown-group-title-padding-horizontal) 0 var(--x-dropdown-group-title-padding-horizontal);
  color: var(--x-dropdown-group-title-color-text);
  font-size: var(--x-dropdown-group-title-font-size);
  line-height: var(--x-dropdown-group-title-height);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-trigger-menu-pop-trigger .x-trigger--arrow {
  display: none;
}
.x-trigger-menu-dark {
  background-color: var(--x-dropdown-dark-color-bg);
  border-color: var(--x-dropdown-dark-color-border);
}
.x-trigger-menu-dark .x-trigger-menu-item,
.x-trigger-menu-dark .x-trigger-menu-pop-header {
  color: var(--x-dropdown-dark-option-color-text_default);
  background-color: var(--x-dropdown-dark-option-color-bg_default);
}
.x-trigger-menu-dark .x-trigger-menu-item.x-trigger-menu-selected,
.x-trigger-menu-dark .x-trigger-menu-pop-header.x-trigger-menu-selected {
  color: var(--x-dropdown-dark-option-color-text_selected);
  background-color: var(--x-dropdown-dark-option-color-bg_selected);
}
.x-trigger-menu-dark .x-trigger-menu-item.x-trigger-menu-selected:hover,
.x-trigger-menu-dark .x-trigger-menu-pop-header.x-trigger-menu-selected:hover {
  color: var(--x-dropdown-dark-option-color-text_selected);
}
.x-trigger-menu-dark .x-trigger-menu-item:hover,
.x-trigger-menu-dark .x-trigger-menu-pop-header:hover {
  color: var(--x-dropdown-dark-option-color-text_hover);
  background-color: var(--x-dropdown-dark-option-color-bg_hover);
}
.x-trigger-menu-dark .x-trigger-menu-item.x-trigger-menu-disabled,
.x-trigger-menu-dark .x-trigger-menu-pop-header.x-trigger-menu-disabled {
  color: var(--x-dropdown-dark-option-color-text_disabled);
  background-color: var(--x-dropdown-dark-option-color-bg_disabled);
}
.x-trigger-menu-dark .x-trigger-menu-group-title {
  color: var(--x-dropdown-dark-group-title-color-text);
}

.x-message-list {
  position: fixed;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px;
  pointer-events: none;
}
.x-message-list-bottom {
  flex-direction: column-reverse;
}

.x-message-list-local {
  position: absolute;
}

.x-message {
  --x-message-current-accent: var(--x-message-color-accent-info);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-info);
  --x-message-border-radius: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: min(680px, 100vw - 32px);
  min-height: 40px;
  margin-bottom: 12px;
  padding: 9px 14px 9px 12px;
  overflow: hidden;
  color: var(--x-message-color-text);
  font-weight: 400;
  background-color: var(--x-message-color-bg);
  border: 1px solid var(--x-message-color-border);
  border-radius: var(--x-message-border-radius);
  box-shadow: var(--x-message-box-shadow);
  pointer-events: auto;
  backdrop-filter: saturate(180%) blur(14px);
  transition: opacity var(--x-transition-duration-2) var(--x-transition-timing-function-linear), transform var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-message--icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  color: var(--x-message-current-accent);
  font-size: 16px;
  background: var(--x-message-current-icon-bg);
  border-radius: 999px;
}

.x-message--content {
  min-width: 0;
  font-size: var(--x-font-size-body-3);
  line-height: var(--x-line-height-base);
  word-break: break-word;
}

.x-message--show-close {
  justify-content: space-between;
}

.x-message--close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  color: var(--x-message-color-close);
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}
.x-message--close-icon::before {
  display: none;
}
.x-message--close-icon:hover {
  background-color: var(--x-message-color-close-bg-hover);
}
.x-message--close-icon .x-icon {
  display: block;
  width: 14px;
  height: 14px;
}

.x-message-success {
  --x-message-current-accent: var(--x-message-color-accent-success);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-success);
}

.x-message-warning {
  --x-message-current-accent: var(--x-message-color-accent-warning);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-warning);
}

.x-message-strong {
  --x-message-current-accent: var(--x-message-color-accent-strong);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-strong);
}

.x-message-error {
  --x-message-current-accent: var(--x-message-color-accent-error);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-error);
}

.x-message-info {
  --x-message-current-accent: var(--x-message-color-accent-info);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-info);
}

.x-message-loading {
  --x-message-current-accent: var(--x-message-color-accent-loading);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-loading);
}

.x-message-normal {
  --x-message-current-accent: var(--x-message-color-accent-normal);
  --x-message-current-icon-bg: var(--x-message-color-icon-bg-normal);
}

.x-message-center {
  justify-content: center;
}

.x-message-fade-enter-from,
.x-message-fade-leave-to {
  opacity: 0;
  transform: translateY(-12px);
}

.x-message-fade-enter-to,
.x-message-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.x-message-fade-enter-active,
.x-message-fade-leave-active,
.x-message-fade-move {
  transition: opacity var(--x-transition-duration-2) var(--x-transition-timing-function-linear), transform var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}

.x-message-fade-leave-active {
  position: absolute;
}

.x-message-box {
  --x-message-box-color-title: var(--x-color-text-elevated-title);
  --x-message-box-color-content: var(--x-color-text-elevated-body);
  /*
   * 图标用状态文字角色而非 solid：solid 是实色按钮底色（不随主题翻转），
   * 直接当图标前景时，亮色下 warning 只有 1.73:1、strong 2.49:1，低于图形 3:1；
   * -text 角色亮暗两主题分别达到 3.89~5.17 / 3.08~11.22。
   */
  --x-message-box-color-icon-warning: var(--x-color-warning-text);
  --x-message-box-color-icon-strong: var(--x-color-strong-text);
  --x-message-box-color-icon-error: var(--x-color-danger-text);
  --x-message-box-color-icon-success: var(--x-color-success-text);
  --x-message-box-color-icon-info: var(--x-color-primary-text);
}
.x-message-box--header {
  padding: 25px 0 10px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-message-box--body {
  padding: 0 25px;
  box-sizing: border-box;
  text-align: center;
}

.x-message-box--footer {
  padding: 15px 0 20px;
  box-sizing: border-box;
}

.x-message-box--icon {
  margin-right: 4px;
}

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

.x-message-box-icon-strong {
  color: var(--x-message-box-color-icon-strong);
}

.x-message-box-icon-error {
  color: var(--x-message-box-color-icon-error);
}

.x-message-box-icon-success {
  color: var(--x-message-box-color-icon-success);
}

.x-message-box-icon-info {
  color: var(--x-message-box-color-icon-info);
}

.x-message-box--title {
  font-size: 18px;
  font-weight: 600;
  color: var(--x-message-box-color-title);
  line-height: 1;
}

.x-message-box--content {
  font-size: 15px;
  font-weight: 400;
  color: var(--x-message-box-color-content);
  line-height: 1.5;
}

.x-message-box--close-icon {
  top: 24px;
  right: 16px;
}

.x-network {
  --x-network-height: 18px;
  --x-network-width: 20px;
  --x-network-signal-width: 3px;
  --x-network-gap: 3px;
  --x-network-color-good: var(--x-color-success-6);
  --x-network-color-medium: var(--x-color-warning-6);
  --x-network-color-poor: var(--x-color-strong-6);
  --x-network-color-offline: var(--x-color-neutral-4);
  --x-network-color-unknown: var(--x-color-neutral-4);
  --x-network-color-inactive: var(--x-color-fill-4);
  --x-network-text-color: var(--x-color-text-2);
  --x-network-metrics-font-size: 10px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--x-network-gap);
  user-select: none;
  vertical-align: middle;
}
.x-network-mini {
  --x-network-width: 13px;
  --x-network-height: 10px;
  --x-network-signal-width: 3px;
  --x-network-gap: 3px;
  --x-network-metrics-font-size: 9px;
}

.x-network-small {
  --x-network-width: 16px;
  --x-network-height: 14px;
  --x-network-signal-width: 4px;
  --x-network-gap: 3px;
}

.x-network-medium {
  --x-network-width: 22px;
  --x-network-height: 16px;
  --x-network-signal-width: 4px;
}

.x-network-large {
  --x-network-width: 28px;
  --x-network-height: 20px;
  --x-network-signal-width: 4px;
  --x-network-metrics-font-size: 11px;
}

.x-network--signal {
  width: var(--x-network-width);
  height: var(--x-network-height);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.x-network--signal--item {
  width: var(--x-network-signal-width);
  flex-shrink: 0;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: var(--x-network-color-inactive);
}
.x-network--signal--item i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--x-network-line-color, var(--x-network-color-inactive));
  transition: background-color 0.2s ease;
}

.x-network--metrics {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1px;
  min-height: var(--x-network-height);
  flex-shrink: 0;
  font-size: var(--x-network-metrics-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.x-network--status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.x-network--latency {
  color: var(--x-color-text-3);
}

.x-network--speed {
  color: var(--x-network-text-color);
  text-align: right;
}

.x-network-status-good {
  --x-network-text-color: var(--x-color-success-text);
}

.x-network-status-medium {
  --x-network-text-color: var(--x-color-warning-text);
}

.x-network-status-poor {
  --x-network-text-color: var(--x-color-strong-text);
}

.x-network-status-offline {
  --x-network-text-color: var(--x-color-text-3);
}

@media (prefers-reduced-motion: reduce) {
  .x-network .x-network--signal--item i {
    transition: none;
  }
}
@media (forced-colors: active) {
  .x-network .x-network--signal--item {
    box-sizing: border-box;
    border: 1px solid GrayText;
    forced-color-adjust: none;
    background: Canvas;
  }
  .x-network .x-network--signal--item i {
    background: Canvas;
  }
  .x-network .x-network--signal--item.x-network-is-active {
    border-color: Highlight;
  }
  .x-network .x-network--signal--item.x-network-is-active i {
    background: Highlight;
  }
}

.x-notification-list {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(360px, 100vw - 32px);
  pointer-events: none;
}
.x-notification-list-top-right {
  right: 20px;
}

.x-notification-list-top-left {
  left: 20px;
}

.x-notification-list-bottom-right {
  right: 20px;
  flex-direction: column-reverse;
}

.x-notification-list-bottom-left {
  left: 20px;
  flex-direction: column-reverse;
}

.x-notification-list-local {
  position: absolute;
}

.x-notification {
  --x-notification-current-accent: var(--x-notification-color-accent-info);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-info);
  --x-notification-border-radius: 8px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  margin-bottom: 12px;
  padding: 16px 44px 16px 16px;
  overflow: hidden;
  color: var(--x-notification-color-content);
  background-color: var(--x-notification-color-bg);
  border: 1px solid var(--x-notification-color-border);
  border-radius: var(--x-notification-border-radius);
  box-shadow: var(--x-notification-box-shadow);
  pointer-events: auto;
  backdrop-filter: saturate(180%) blur(14px);
}
.x-notification--main {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.x-notification--icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: var(--x-notification-current-accent);
  font-size: 18px;
  background: var(--x-notification-current-icon-bg);
  border-radius: 999px;
}

.x-notification--icon-custom {
  color: inherit;
  background: var(--x-color-transparent);
}

.x-notification--content-wrap {
  min-width: 0;
  flex: 1;
}

.x-notification--title {
  color: var(--x-notification-color-title);
  font-weight: 600;
  font-size: var(--x-font-size-title-1);
  line-height: 24px;
  word-break: break-word;
}

.x-notification--message {
  box-sizing: border-box;
  margin-top: 6px;
  color: var(--x-notification-color-content);
  font-weight: 400;
  font-size: var(--x-font-size-body-3);
  line-height: var(--x-line-height-base);
  word-break: break-word;
}

.x-notification--footer {
  margin-top: 12px;
}

.x-notification--close-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--x-notification-color-close);
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-standard), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-standard);
}
.x-notification--close-icon:hover, .x-notification--close-icon:focus-visible {
  background-color: var(--x-notification-color-close-bg-hover);
  outline: none;
}
.x-notification--close-icon .x-icon {
  display: block;
  width: 14px;
  height: 14px;
}

.x-notification-success {
  --x-notification-current-accent: var(--x-notification-color-accent-success);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-success);
}

.x-notification-warning {
  --x-notification-current-accent: var(--x-notification-color-accent-warning);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-warning);
}

.x-notification-strong {
  --x-notification-current-accent: var(--x-notification-color-accent-strong);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-strong);
}

.x-notification-error {
  --x-notification-current-accent: var(--x-notification-color-accent-error);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-error);
}

.x-notification-info {
  --x-notification-current-accent: var(--x-notification-color-accent-info);
  --x-notification-current-icon-bg: var(--x-notification-color-icon-bg-info);
}

.x-notification-slide-right-enter-from {
  opacity: 0;
  transform: translateX(24px);
}

.x-notification-slide-left-enter-from {
  opacity: 0;
  transform: translateX(-24px);
}

.x-notification-slide-right-enter-to,
.x-notification-slide-left-enter-to,
.x-notification-slide-right-leave-from,
.x-notification-slide-left-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.x-notification-slide-right-leave-to {
  opacity: 0;
  transform: translateX(24px);
}

.x-notification-slide-left-leave-to {
  opacity: 0;
  transform: translateX(-24px);
}

.x-notification-slide-right-enter-active,
.x-notification-slide-right-leave-active,
.x-notification-slide-right-move,
.x-notification-slide-left-enter-active,
.x-notification-slide-left-leave-active,
.x-notification-slide-left-move {
  transition: opacity var(--x-transition-duration-2) var(--x-transition-timing-function-linear), transform var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}

.x-notification-slide-right-leave-active,
.x-notification-slide-left-leave-active {
  position: absolute;
}

:root {
  --x-pagination-item-border-radius: var(--x-border-radius-small);
  --x-pagination-item-spacing: var(--x-spacing-4);
  --x-pagination-margin-total-spacing: var(--x-spacing-4);
  --x-pagination-margin-option-left: var(--x-spacing-4);
  --x-pagination-margin-jumper-left: var(--x-spacing-4);
  --x-pagination-size-mini: var(--x-size-mini);
  --x-pagination-size-small: var(--x-size-small);
  --x-pagination-size-default: var(--x-size-default);
  --x-pagination-size-large: var(--x-size-large);
  --x-pagination-padding-horizontal: 8px;
  --x-pagination-size-mini-font-size: var(--x-font-size-body-1);
  --x-pagination-size-small-font-size: var(--x-font-size-body-3);
  --x-pagination-size-default-font-size: var(--x-font-size-body-3);
  --x-pagination-size-large-font-size: var(--x-font-size-body-3);
  --x-pagination-size-icon-arrow-mini: var(--x-size-4);
  --x-pagination-size-icon-arrow-small: 18px;
  --x-pagination-size-icon-arrow-default: var(--x-size-5);
  --x-pagination-size-icon-arrow-large: 22px;
  --x-pagination-size-icon-ellipsis: var(--x-size-4);
  --x-pagination-border-width: var(--x-border-none);
  --x-pagination-color-bg-item: var(--x-color-transparent);
  --x-pagination-color-bg-item_active: var(--x-color-primary-light-1);
  --x-pagination-color-bg-item_hover: var(--x-color-fill-1);
  --x-pagination-color-bg-item_disabled: var(--x-color-transparent);
  --x-pagination-color-bg-item_active_disabled: var(--x-color-fill-1);
  --x-pagination-color-item-text: var(--x-color-text-2);
  --x-pagination-color-item-text_hover: var(--x-color-text-2);
  --x-pagination-color-item-text_active: color-mix(
    in srgb, var(--x-color-primary-text) 96%, var(--x-color-text-1)
  );
  --x-pagination-color-item-text_disabled: var(--x-color-text-4);
  --x-pagination-color-item-text_active_disabled: var(--x-color-primary-light-3);
  --x-pagination-color-item-border: var(--x-color-transparent);
  --x-pagination-color-item-border_active: var(--x-color-transparent);
  --x-pagination-color-item-border_hover: var(--x-color-transparent);
  --x-pagination-color-item-border_disabled: var(--x-color-transparent);
  --x-pagination-color-item-border_active_disabled: var(--x-color-transparent);
  --x-pagination-color-item-outline_focus: var(--x-color-primary-text);
  --x-pagination-color-icon-arrow: var(--x-color-text-2);
  --x-pagination-color-icon-arrow-bg: var(--x-color-transparent);
  --x-pagination-color-icon-arrow-bg_hover: var(--x-color-fill-1);
  --x-pagination-color-icon-arrow-bg_disabled: var(--x-color-transparent);
  --x-pagination-color-icon-arrow-text_hover: var(--x-color-primary-text);
  --x-pagination-color-icon-arrow-text_disabled: var(--x-color-text-4);
  --x-pagination-simple-input-width: var(--x-size-10);
  --x-pagination-simple-color-icon-arrow: var(--x-color-text-2);
  --x-pagination-simple-color-icon-arrow-bg: var(--x-color-transparent);
  --x-pagination-simple-color-icon-arrow-bg_hover: var(--x-color-fill-1);
  --x-pagination-simple-color-icon-arrow-bg_disabled: var(--x-color-transparent);
  --x-pagination-simple-color-icon-arrow-text_hover: var(--x-color-primary-text);
  --x-pagination-simple-color-icon-arrow-text_disabled: var(--x-color-text-4);
  --x-pagination-simple-margin-prev-right: var(--x-spacing-2);
  --x-pagination-simple-margin-next-left: var(--x-spacing-6);
  --x-pagination-simple-margin-separator-left: var(--x-spacing-6);
  --x-pagination-simple-margin-separator-right: var(--x-spacing-6);
  --x-pagination-jumper-input-width: var(--x-size-10);
  --x-pagination-color-jumper-goto: var(--x-color-text-3);
  --x-pagination-color-text-total: var(--x-color-text-1);
}

.x-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  row-gap: var(--x-pagination-item-spacing);
  font-size: var(--x-pagination-size-default-font-size);
}
.x-pagination--list {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  column-gap: var(--x-pagination-item-spacing);
  box-sizing: border-box;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  white-space: nowrap;
  list-style: none;
}
.x-pagination--list > .x-pagination--item {
  margin: 0;
}

.x-pagination--item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 var(--x-pagination-padding-horizontal);
  margin: 0;
  color: var(--x-pagination-color-item-text);
  text-align: center;
  vertical-align: middle;
  list-style: none;
  background-color: var(--x-pagination-color-bg-item);
  border: var(--x-pagination-border-width) solid var(--x-pagination-color-item-border);
  border-radius: var(--x-pagination-item-border-radius);
  outline: 0;
  cursor: pointer;
  user-select: none;
  min-width: var(--x-pagination-size-default);
  height: var(--x-pagination-size-default);
  font-size: var(--x-pagination-size-default-font-size);
  line-height: 1;
}
.x-pagination--item-previous, .x-pagination--item-next {
  font-size: var(--x-pagination-size-icon-arrow-default);
}
.x-pagination--item:hover {
  color: var(--x-pagination-color-item-text_hover);
  background-color: var(--x-pagination-color-bg-item_hover);
  border-color: var(--x-pagination-color-item-border_hover);
}
.x-pagination--item:focus-visible {
  box-shadow: 0 0 0 2px var(--x-pagination-color-item-outline_focus);
}
.x-pagination--item-active, .x-pagination--item-active:hover {
  color: var(--x-pagination-color-item-text_active);
  background-color: var(--x-pagination-color-bg-item_active);
  border-color: var(--x-pagination-color-item-border_active);
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-2) var(--x-transition-timing-function-linear);
}
.x-pagination--item-disabled, .x-pagination--item-disabled:hover {
  color: var(--x-pagination-color-item-text_disabled);
  background-color: var(--x-pagination-color-bg-item_disabled);
  border-color: var(--x-pagination-color-item-border_disabled);
  cursor: not-allowed;
}

.x-pagination--item-previous, .x-pagination--item-next {
  color: var(--x-pagination-color-icon-arrow);
  font-size: var(--x-pagination-size-icon-arrow-default);
  background-color: var(--x-pagination-color-icon-arrow-bg);
}
.x-pagination--item-previous:not(.x-pagination--item-disabled):hover, .x-pagination--item-next:not(.x-pagination--item-disabled):hover {
  color: var(--x-pagination-color-icon-arrow-text_hover);
  background-color: var(--x-pagination-color-icon-arrow-bg_hover);
}
.x-pagination--item-previous svg, .x-pagination--item-next svg {
  display: block;
  width: 1em;
  height: 1em;
}
.x-pagination {
  /*
   * 首/末页箭头禁用色，普通模式。
   *
   * 原写法 `mm(&--item-previous&--item-disabled, ...)` 把含 `&` 的复合选择器
   * 当 modifier 名传入，mixin 内部又拼了一次 `&`，产出
   * `.x-pagination-.x-pagination --item-previous ...` 这类非法选择器被浏览器丢弃；
   * 于是禁用色永远不生效，首/末页箭头仍是正常色，看起来仍可点。
   * 这里直接写复合选择器（两个类在同一元素上）。
   */
}
.x-pagination--item-previous.x-pagination--item-disabled, .x-pagination--item-next.x-pagination--item-disabled {
  color: var(--x-pagination-color-icon-arrow-text_disabled);
  background-color: var(--x-pagination-color-icon-arrow-bg_disabled);
}
.x-pagination {
  /* 省略号：真实类名是 --item-ellipsis，原 `--item--jumper` 是死规则 */
}
.x-pagination--item-ellipsis {
  font-size: var(--x-pagination-size-icon-ellipsis);
}
.x-pagination {
  /*** 快速跳转 ***/
}
.x-pagination--jumper {
  display: flex;
  align-items: center;
  margin-left: var(--x-pagination-margin-jumper-left);
  /*
   * 跳转区所有文案（「跳转至」、简单模式的「/」与总页数）统一字号与行高。
   * 行高必须显式声明：否则继承宿主行高，跳转区会与输入框垂直错位。
   */
}
.x-pagination--jumper > span {
  font-size: var(--x-pagination-size-default-font-size);
  line-height: var(--x-line-height-base);
}
.x-pagination--jumper-text-goto, .x-pagination--jumper--prepend, .x-pagination--jumper--append {
  color: var(--x-pagination-color-jumper-goto);
  white-space: nowrap;
}
.x-pagination--jumper--prepend {
  margin-right: var(--x-pagination-item-spacing);
}
.x-pagination--jumper--append {
  margin-left: var(--x-pagination-item-spacing);
}
.x-pagination--jumper .x-pagination--jumper--input {
  width: var(--x-pagination-jumper-input-width);
  padding-right: 2px;
  padding-left: 2px;
}
.x-pagination--jumper .x-pagination--jumper--input input {
  text-align: center;
}
.x-pagination--options {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: var(--x-pagination-margin-option-left);
  text-align: center;
  vertical-align: middle;
}
.x-pagination--options .x-select--view {
  width: auto;
}

.x-pagination--total {
  display: inline-block;
  height: 100%;
  margin-right: var(--x-pagination-margin-total-spacing);
  color: var(--x-pagination-color-text-total);
  font-size: var(--x-pagination-size-default-font-size);
  font-size: var(--x-pagination-size-default-font-size);
  line-height: var(--x-pagination-size-default);
  white-space: nowrap;
}
.x-pagination--jumper {
  flex: 0 0 auto;
}
.x-pagination--jumper--separator {
  padding: 0 var(--x-pagination-simple-margin-separator-right) 0 var(--x-pagination-simple-margin-separator-left);
}
.x-pagination--jumper--total-page {
  margin-right: calc(var(--x-pagination-simple-margin-next-left) - var(--x-pagination-simple-margin-prev-right));
}
.x-pagination--simple {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.x-pagination--simple > .x-pagination--item {
  margin: 0;
}
.x-pagination--simple .x-pagination--jumper {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0 var(--x-pagination-simple-margin-prev-right);
  color: var(--x-color-text-1);
}
.x-pagination--simple .x-pagination--jumper .x-pagination--jumper--input {
  width: var(--x-pagination-simple-input-width);
  margin-left: 0;
}
.x-pagination--simple .x-pagination--item-previous, .x-pagination--simple .x-pagination--item-next {
  color: var(--x-pagination-simple-color-icon-arrow);
  background-color: var(--x-pagination-simple-color-icon-arrow-bg);
}
.x-pagination--simple .x-pagination--item-previous:not(.x-pagination--item-disabled):hover, .x-pagination--simple .x-pagination--item-next:not(.x-pagination--item-disabled):hover {
  color: var(--x-pagination-simple-color-icon-arrow-text_hover);
  background-color: var(--x-pagination-simple-color-icon-arrow-bg_hover);
}
.x-pagination--simple {
  /*
   * simple 模式下箭头包在 .x-pagination--simple 容器内（Pagination.tsx 的
   * `<span class="x-pagination--simple">`），故用后代选择器；原 mm() 调用
   * 同样编译成非法选择器导致禁用色失效。
   */
}
.x-pagination--simple .x-pagination--item-previous.x-pagination--item-disabled,
.x-pagination--simple .x-pagination--item-next.x-pagination--item-disabled {
  color: var(--x-pagination-simple-color-icon-arrow-text_disabled);
  background-color: var(--x-pagination-simple-color-icon-arrow-bg_disabled);
}
.x-pagination-disabled {
  cursor: not-allowed;
}
.x-pagination-disabled .x-pagination--item, .x-pagination-disabled .x-pagination--item:not(.x-pagination--item-disabled):not(.x-pagination--item-active):hover {
  color: var(--x-pagination-color-item-text_disabled);
  background-color: var(--x-pagination-color-bg-item_disabled);
  border-color: var(--x-pagination-color-item-border_disabled);
  cursor: not-allowed;
}
.x-pagination-disabled .x-pagination--item-active {
  color: var(--x-pagination-color-item-text_active_disabled);
  background-color: var(--x-pagination-color-bg-item_active_disabled);
  border-color: var(--x-pagination-color-item-border_active_disabled);
}

.x-pagination-size-mini .x-pagination--item {
  min-width: var(--x-pagination-size-mini);
  height: var(--x-pagination-size-mini);
  font-size: var(--x-pagination-size-mini-font-size);
  line-height: 1;
}
.x-pagination-size-mini .x-pagination--item-previous, .x-pagination-size-mini .x-pagination--item-next {
  font-size: var(--x-pagination-size-icon-arrow-mini);
}
.x-pagination-size-mini .x-pagination--total {
  font-size: var(--x-pagination-size-mini-font-size);
  line-height: var(--x-pagination-size-mini);
}
.x-pagination-size-mini .x-pagination--options {
  height: var(--x-pagination-size-mini);
  font-size: var(--x-pagination-size-mini-font-size);
  line-height: 0;
}
.x-pagination-size-mini .x-pagination--jumper > span {
  font-size: var(--x-pagination-size-mini-font-size);
}
.x-pagination-size-small .x-pagination--item {
  min-width: var(--x-pagination-size-small);
  height: var(--x-pagination-size-small);
  font-size: var(--x-pagination-size-small-font-size);
  line-height: 1;
}
.x-pagination-size-small .x-pagination--item-previous, .x-pagination-size-small .x-pagination--item-next {
  font-size: var(--x-pagination-size-icon-arrow-small);
}
.x-pagination-size-small .x-pagination--total {
  font-size: var(--x-pagination-size-small-font-size);
  line-height: var(--x-pagination-size-small);
}
.x-pagination-size-small .x-pagination--options {
  height: var(--x-pagination-size-small);
  font-size: var(--x-pagination-size-small-font-size);
  line-height: 0;
}
.x-pagination-size-small .x-pagination--jumper > span {
  font-size: var(--x-pagination-size-small-font-size);
}
.x-pagination-size-large .x-pagination--item {
  min-width: var(--x-pagination-size-large);
  height: var(--x-pagination-size-large);
  font-size: var(--x-pagination-size-large-font-size);
  line-height: 1;
}
.x-pagination-size-large .x-pagination--item-previous, .x-pagination-size-large .x-pagination--item-next {
  font-size: var(--x-pagination-size-icon-arrow-large);
}
.x-pagination-size-large .x-pagination--total {
  font-size: var(--x-pagination-size-large-font-size);
  line-height: var(--x-pagination-size-large);
}
.x-pagination-size-large .x-pagination--options {
  height: var(--x-pagination-size-large);
  font-size: var(--x-pagination-size-large-font-size);
  line-height: 0;
}
.x-pagination-size-large .x-pagination--jumper > span {
  font-size: var(--x-pagination-size-large-font-size);
}

:root {
  /*
   * 饼图 / 环形图专属 token。
   *
   * 分类色板、轴文字、提示浮层、图例等来自图表族共享层
   * （_components/chart/style/var.scss 的 --x-chart-*）。
   */
  --x-pie-chart-segment-opacity: 0.85;
  --x-pie-chart-segment-opacity-active: 1;
  --x-pie-chart-segment-opacity-dimmed: 0.35;
  --x-pie-chart-stroke-segment: var(--x-color-bg-surface);
  --x-pie-chart-stroke-width-segment: 1;
}

/*
 * 饼图 / 环形图几何样式。
 *
 * 提示浮层、图例、空态、读屏播报节点由图表族共享层提供
 * （_components/chart/style/index.scss，类名 x-chart--*）。
 */
.x-pie-chart {
  position: relative;
  width: 100%;
}
.x-pie-chart--canvas {
  position: relative;
  width: 100%;
}

.x-pie-chart--svg {
  display: block;
  max-width: 100%;
  outline: none;
}
.x-pie-chart--svg:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--x-border-radius-small);
}

.x-pie-chart--segment {
  /* 分片之间用画布色描边，缝隙之外再多一层保险，避免抗锯齿留下白边 */
  stroke: var(--x-pie-chart-stroke-segment);
  stroke-width: var(--x-pie-chart-stroke-width-segment);
  cursor: pointer;
  opacity: var(--x-pie-chart-segment-opacity);
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-pie-chart-is-active {
  opacity: var(--x-pie-chart-segment-opacity-active);
}

.x-pie-chart-is-dimmed {
  opacity: var(--x-pie-chart-segment-opacity-dimmed);
}

.x-pie-chart--label {
  user-select: none;
  pointer-events: none;
}

.x-pie-chart--center-value {
  font-weight: var(--x-font-weight-500);
  font-variant-numeric: tabular-nums;
}

.x-pie-chart--center-label {
  user-select: none;
}

.x-popconfirm {
  --x-popconfirm-color-bg: var(--x-color-bg-elevated);
  --x-popconfirm-icon-color: var(--x-color-danger-text);
  --x-popconfirm-color-border: var(--x-color-transparent);
  --x-popconfirm-padding-horizontal: 16px;
  --x-popconfirm-padding-vertical: 12px;
  --x-popconfirm-min-width: 184px;
  --x-popconfirm-max-width: 320px;
  --x-popconfirm-title-gap: 8px;
  --x-popconfirm-title-font-size: var(--x-font-size-body-3, 14px);
  --x-popconfirm-footer-margin-top: 8px;
  --x-popconfirm-shadow: var(--x-shadow-popover);
  --x-popconfirm-arrow-size: 10px;
  --x-popconfirm-arrow-shadow: var(--x-shadow-popover-arrow);
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: var(--x-popconfirm-min-width);
  max-width: var(--x-popconfirm-max-width);
  padding: var(--x-popconfirm-padding-vertical) var(--x-popconfirm-padding-horizontal);
  background-color: var(--x-popconfirm-color-bg);
  border: 1px solid var(--x-popconfirm-color-border);
  border-radius: 8px;
  box-shadow: var(--x-popconfirm-shadow);
  box-sizing: border-box;
  flex-direction: column;
}
.x-popconfirm--content {
  display: flex;
  align-items: center;
  width: 100%;
  line-height: var(--x-line-height-base, 1.5715);
}

.x-popconfirm--title {
  flex-grow: 1;
  min-width: 0;
  margin-left: var(--x-popconfirm-title-gap);
  font-size: var(--x-popconfirm-title-font-size);
  color: var(--x-color-text-elevated-title);
  text-align: left;
  overflow-wrap: break-word;
}

.x-popconfirm--footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--x-popconfirm-footer-margin-top);
}

.x-popconfirm--icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--x-popconfirm-icon-color);
}

.x-popconfirm--popup-arrow {
  --x-popconfirm-color-bg: var(--x-color-bg-elevated);
  --x-popconfirm-arrow-size: 10px;
  --x-popconfirm-arrow-shadow: var(--x-shadow-popover-arrow);
  width: var(--x-popconfirm-arrow-size);
  height: var(--x-popconfirm-arrow-size);
  background-color: var(--x-popconfirm-color-bg);
  border: none;
  box-shadow: var(--x-popconfirm-arrow-shadow);
}
.x-popconfirm--popup-arrow.x-trigger--arrow {
  z-index: 2;
}

.x-popconfirm-warning {
  --x-popconfirm-icon-color: var(--x-color-warning-text);
}

.x-popconfirm-success {
  --x-popconfirm-icon-color: var(--x-color-success-text);
}

.x-popconfirm-primary {
  --x-popconfirm-icon-color: var(--x-color-primary-text);
}

.x-popconfirm-strong {
  --x-popconfirm-icon-color: var(--x-color-strong-text);
}

.x-popconfirm-danger {
  --x-popconfirm-icon-color: var(--x-color-danger-text);
}

.x-popconfirm-info {
  --x-popconfirm-icon-color: var(--x-color-text-secondary);
}

.x-popover {
  --x-popover-color-bg: var(--x-color-bg-elevated);
  --x-popover-color-text: var(--x-color-text-elevated-title);
  --x-popover-color-text-secondary: var(--x-color-text-elevated-body);
  --x-popover-color-border: var(--x-color-transparent);
  --x-popover-radius: var(--x-border-radius-medium);
  --x-popover-shadow: var(--x-shadow-popover);
  --x-popover-padding-y: 10px;
  --x-popover-padding-x: 12px;
  --x-popover-title-margin-bottom: 6px;
  --x-popover-max-width: 320px;
}
.x-popover--content {
  box-sizing: border-box;
  max-width: var(--x-popover-max-width);
  padding: var(--x-popover-padding-y) var(--x-popover-padding-x);
  color: var(--x-popover-color-text-secondary);
  font-size: var(--x-font-size-body-3);
  line-height: 1.5715;
  text-align: left;
  overflow-wrap: break-word;
  background: var(--x-popover-color-bg);
  border: 1px solid var(--x-popover-color-border);
  border-radius: var(--x-popover-radius);
  box-shadow: var(--x-popover-shadow);
}

.x-popover--title {
  margin-bottom: var(--x-popover-title-margin-bottom);
  color: var(--x-popover-color-text);
  font-weight: 600;
  line-height: 1.5;
}

.x-popover--body {
  min-width: 0;
}

.x-popover--arrow {
  background: var(--x-popover-color-bg);
  border-color: var(--x-popover-color-border);
}

.x-popup {
  --x-popup-color-bg: var(--x-color-bg-elevated);
  --x-popup-color-text: var(--x-color-text-elevated-body);
  --x-popup-color-border: var(--x-color-transparent);
  --x-popup-radius: var(--x-border-radius-medium);
  --x-popup-shadow: var(--x-shadow-popover);
  --x-popup-padding: 12px;
  --x-popup-max-width: 320px;
}
.x-popup--content {
  box-sizing: border-box;
  max-width: var(--x-popup-max-width);
  padding: var(--x-popup-padding);
  color: var(--x-popup-color-text);
  font-size: var(--x-font-size-body-3);
  line-height: 1.5715;
  text-align: left;
  overflow-wrap: break-word;
  background: var(--x-popup-color-bg);
  border: 1px solid var(--x-popup-color-border);
  border-radius: var(--x-popup-radius);
  box-shadow: var(--x-popup-shadow);
}

.x-popup--arrow {
  background: var(--x-popup-color-bg);
  border-color: var(--x-popup-color-border);
}

.x-progress {
  position: relative;
  line-height: 1;
  font-size: var(--x-font-size-body-1);
}
.x-progress-type-line, .x-progress-type-steps {
  display: inline-block;
  max-width: 100%;
  width: 100%;
}
.x-progress--line--wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.x-progress--line--text {
  display: inline-flex;
  align-items: center;
  font-size: var(--x-font-size-body-1);
  margin-left: var(--x-spacing-7);
  color: var(--x-color-text-2);
  white-space: nowrap;
  text-align: right;
  flex-grow: 1;
  flex-shrink: 0;
  min-width: var(--x-size-8);
}
.x-progress--line--text .x-icon {
  font-size: 12px;
  margin-left: var(--x-spacing-2);
}

.x-progress--steps--wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.x-progress--steps--text {
  font-size: var(--x-font-size-body-1);
  margin-left: var(--x-spacing-7);
  color: var(--x-color-text-2);
  white-space: nowrap;
  text-align: right;
  flex-grow: 1;
  flex-shrink: 0;
  min-width: var(--x-size-8);
}
.x-progress--steps--text .x-icon {
  font-size: 12px;
  margin-left: var(--x-spacing-2);
}

.x-progress--line {
  background-color: var(--x-color-fill-3);
  border-radius: 100px;
  width: 100%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.x-progress--line--bar {
  height: 100%;
  border-radius: 100px;
  background-color: var(--x-color-primary-6);
  position: relative;
  transition: width 0.6s var(--x-transition-timing-function-standard), background 0.3s var(--x-transition-timing-function-standard);
  max-width: 100%;
}
.x-progress--line--bar-buffer {
  position: absolute;
  background-color: var(--x-color-primary-1);
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0 100px 100px 0;
  max-width: 100%;
  transition: all 0.6s var(--x-transition-timing-function-standard);
}
.x-progress--line--bar-animate::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--x-progress-line-color-loading-shimmer-start) 25%, var(--x-progress-line-color-loading-shimmer-active) 50%, var(--x-progress-line-color-loading-shimmer-end) 75%);
  background-size: 400% 100%;
  animation: x-progress-loading-animation 1.5s var(--x-transition-timing-function-standard) infinite;
}
.x-progress--line--text .x-icon {
  color: var(--x-color-text-2);
}

.x-progress-type-steps.x-progress-size-small {
  width: auto;
}
.x-progress-type-steps.x-progress-size-small .x-progress--steps--item {
  width: 3px;
  flex: unset;
  border-radius: 3px;
}
.x-progress-type-steps.x-progress-size-small .x-progress--steps--item:not(:last-of-type) {
  margin-right: 3px;
}
.x-progress--steps {
  display: flex;
  width: 100%;
}
.x-progress--steps--text {
  margin-left: var(--x-spacing-4);
  min-width: unset;
}
.x-progress--steps--text .x-icon {
  color: var(--x-color-text-2);
}
.x-progress--steps--item {
  height: 100%;
  flex: 1;
  background-color: var(--x-color-fill-3);
  position: relative;
  display: inline-block;
}
.x-progress--steps--item:not(:last-of-type) {
  margin-right: 3px;
}
.x-progress--steps--item:last-of-type {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
.x-progress--steps--item:first-of-type {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
.x-progress--steps--item-active {
  background-color: var(--x-color-primary-6);
}

.x-progress-status-warning .x-progress--line--bar {
  background-color: var(--x-color-warning-6);
}
.x-progress-status-warning .x-progress--steps--item-active {
  background-color: var(--x-color-warning-6);
}
.x-progress-status-warning .x-progress--line--text .x-icon,
.x-progress-status-warning .x-progress--steps--text .x-icon {
  color: var(--x-color-warning-6);
}
.x-progress-status-success .x-progress--line--bar {
  background-color: var(--x-color-success-6);
}
.x-progress-status-success .x-progress--steps--item-active {
  background-color: var(--x-color-success-6);
}
.x-progress-status-success .x-progress--line--text .x-icon,
.x-progress-status-success .x-progress--steps--text .x-icon {
  color: var(--x-color-success-6);
}
.x-progress-status-danger .x-progress--line--bar {
  background-color: var(--x-color-danger-6);
}
.x-progress-status-danger .x-progress--steps--item-active {
  background-color: var(--x-color-danger-6);
}
.x-progress-status-danger .x-progress--line--text .x-icon,
.x-progress-status-danger .x-progress--steps--text .x-icon {
  color: var(--x-color-danger-6);
}

.x-progress-status-strong .x-progress--line--bar {
  background-color: var(--x-color-strong-6);
}
.x-progress-status-strong .x-progress--steps--item-active {
  background-color: var(--x-color-strong-6);
}
.x-progress-status-strong .x-progress--line--text .x-icon,
.x-progress-status-strong .x-progress--steps--text .x-icon {
  color: var(--x-color-strong-6);
}

.x-progress-size-mini .x-progress--line--text {
  font-size: var(--x-font-size-body-1);
  margin-left: var(--x-spacing-7);
}
.x-progress-size-mini .x-progress--line--text .x-icon {
  font-size: 12px;
}

.x-progress-size-small .x-progress--line--text {
  font-size: var(--x-font-size-body-1);
  margin-left: var(--x-spacing-7);
}
.x-progress-size-small .x-progress--line--text .x-icon {
  font-size: 12px;
}

.x-progress-size-large .x-progress--line--text {
  font-size: 16px;
  margin-left: var(--x-spacing-7);
}
.x-progress-size-large .x-progress--line--text .x-icon {
  font-size: 14px;
}

.x-progress-type-circle {
  display: inline-block;
}
.x-progress--circle--wrapper {
  position: relative;
  text-align: center;
  line-height: 1;
  display: inline-block;
  vertical-align: text-bottom;
}
.x-progress--circle--svg {
  transform: rotate(-90deg);
}
.x-progress--circle--text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--x-color-text-3);
  transform: translate(-50%, -50%);
  font-size: var(--x-font-size-body-3);
}
.x-progress--circle--text .x-icon {
  font-size: var(--x-size-4);
  color: var(--x-color-text-2);
}
.x-progress--circle--bg {
  stroke: var(--x-color-fill-3);
}
.x-progress--circle--bar {
  stroke: var(--x-color-primary-6);
  transition: stroke-dashoffset 0.6s var(--x-transition-timing-function-linear) 0s, stroke 0.6s var(--x-transition-timing-function-linear);
}

.x-progress-size-mini .x-progress--circle--bg {
  stroke: var(--x-color-primary-1);
}
.x-progress-size-mini .x-progress--circle--bar {
  stroke: var(--x-color-primary-6);
}
.x-progress-size-mini.x-progress-status-warning .x-progress--circle--bg {
  stroke: var(--x-color-warning-2);
}
.x-progress-size-mini.x-progress-status-danger .x-progress--circle--bg {
  stroke: var(--x-color-danger-1);
}
.x-progress-size-mini.x-progress-status-success .x-progress--circle--bg {
  stroke: var(--x-color-success-2);
}
.x-progress-size-mini .x-progress--circle--wrapper .x-icon-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.x-progress-size-mini .x-progress--circle--text {
  position: static;
  top: unset;
  left: unset;
  transform: unset;
}

.x-progress-size-small .x-progress--circle--text {
  font-size: var(--x-font-size-body-2);
}
.x-progress-size-small .x-progress--circle--text .x-icon {
  font-size: 14px;
}

.x-progress-size-large .x-progress--circle--text {
  font-size: 16px;
}
.x-progress-size-large .x-progress--circle--text .x-icon {
  font-size: var(--x-size-4);
}

.x-progress-status-warning .x-progress--circle--bar {
  stroke: var(--x-color-warning-6);
}
.x-progress-status-warning .x-icon {
  color: var(--x-color-warning-6);
}

.x-progress-status-success .x-progress--circle--bar {
  stroke: var(--x-color-success-6);
}
.x-progress-status-success .x-icon {
  color: var(--x-color-success-6);
}

.x-progress-status-danger .x-progress--circle--bar {
  stroke: var(--x-color-danger-6);
}
.x-progress-status-danger .x-icon {
  color: var(--x-color-danger-6);
}

.x-progress-status-strong .x-progress--circle--bar {
  stroke: var(--x-color-strong-6);
}
.x-progress-status-strong .x-icon {
  color: var(--x-color-strong-6);
}

@keyframes x-progress-loading-animation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes x-rate-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}
.x-rate {
  --x-rate-face-detail-color: var(--x-color-white);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--x-color-fill-4);
  font-size: 24px;
  line-height: 1;
  outline: none;
  user-select: none;
}
.x-rate--character {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: var(--x-color-fill-4);
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-standard), transform var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-rate--character:not(:last-child) {
  margin-right: var(--x-spacing-2);
}
.x-rate--character svg {
  display: block;
  width: 1em;
  height: 1em;
}
.x-rate--character-left, .x-rate--character-right {
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
}
.x-rate--character-left > *, .x-rate--character-right > * {
  flex: 0 0 1em;
  width: 1em;
}
.x-rate--character-left {
  position: absolute;
  top: 0;
  left: 0;
  justify-content: flex-start;
  width: 50%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.x-rate--character-right {
  justify-content: center;
  color: inherit;
}
.x-rate--character-full .x-rate--character-right, .x-rate--character-half .x-rate--character-left {
  color: var(--x-color-warning-6);
}
.x-rate--character-half .x-rate--character-left {
  opacity: 1;
}
.x-rate--character-scale {
  animation: x-rate-scale var(--x-transition-duration-4) var(--x-transition-timing-function-standard);
}
.x-rate:not(.x-rate-disabled):not(.x-rate-readonly) .x-rate--character {
  cursor: pointer;
}
.x-rate:not(.x-rate-disabled):not(.x-rate-readonly) .x-rate--character:hover {
  transform: scale(1.16);
}
.x-rate:focus-visible .x-rate--character-focused {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 2px;
  border-radius: var(--x-border-radius-small);
}
.x-rate-disabled {
  cursor: not-allowed;
}
.x-rate-disabled .x-rate--character {
  color: var(--x-color-fill-5);
  cursor: not-allowed;
}
.x-rate-disabled .x-rate--character-full .x-rate--character-right, .x-rate-disabled .x-rate--character-half .x-rate--character-left {
  color: var(--x-color-fill-6);
}
.x-rate-readonly .x-rate--character {
  cursor: default;
}
.x-rate-grading {
  color: var(--x-color-fill-4);
}

.x-resize-box {
  --x-resize-box-trigger-color-bg: var(--x-color-neutral-3);
  --x-resize-box-trigger-color-bg-hover: var(--x-color-neutral-4);
  --x-resize-box-trigger-color-icon: var(--x-color-text-2);
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}
.x-resize-box,
.x-resize-box * {
  box-sizing: border-box;
}
.x-resize-box-direction-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 6px;
  user-select: none;
}

.x-resize-box-direction-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 6px;
  user-select: none;
}

.x-resize-box-direction-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 6px;
  user-select: none;
}

.x-resize-box-direction-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 6px;
  user-select: none;
}

.x-resize-box--trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--x-resize-box-trigger-color-icon);
  background-color: var(--x-resize-box-trigger-color-bg);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.x-resize-box--trigger:hover {
  background-color: var(--x-resize-box-trigger-color-bg-hover);
}
.x-resize-box--trigger-vertical {
  height: 100%;
  cursor: col-resize;
}
.x-resize-box--trigger-horizontal {
  width: 100%;
  cursor: row-resize;
}
.x-resize-box--trigger-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  color: inherit;
  pointer-events: none;
}
.x-resize-box--trigger-icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentcolor;
}
.x-resize-box--trigger-dots {
  display: grid;
  gap: 2px;
}
.x-resize-box--trigger-dot {
  width: 3px;
  height: 3px;
  background-color: currentcolor;
  border-radius: 50%;
  opacity: 0.7;
}
.x-resize-box--trigger-dots-horizontal {
  grid-template-columns: repeat(3, 3px);
}
.x-resize-box--trigger-dots-vertical {
  grid-template-rows: repeat(3, 3px);
}

.x-scrollbar {
  position: relative;
}
.x-scrollbar--container {
  position: relative;
  scrollbar-width: none;
  overflow: auto;
}
.x-scrollbar--container::-webkit-scrollbar {
  display: none;
}

.x-scrollbar-track {
  position: absolute;
  z-index: 100;
}
.x-scrollbar-track-direction-horizontal {
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 15px;
}
.x-scrollbar-track-direction-vertical {
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 15px;
  height: 100%;
}

.x-scrollbar--thumb {
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.x-scrollbar--thumb--bar {
  width: 100%;
  height: 100%;
  background-color: var(--x-scrollbar-color-thumb-bg);
  border-radius: 6px;
  transition: background-color ease 200ms;
}
.x-scrollbar--thumb:hover .x-scrollbar--thumb--bar, .x-scrollbar--thumb-dragging .x-scrollbar--thumb--bar {
  background-color: var(--x-scrollbar-color-thumb-bg-hover);
}
.x-scrollbar--thumb-direction-horizontal .x-scrollbar--thumb--bar {
  height: 9px;
  margin: 3px 0;
}
.x-scrollbar--thumb-direction-vertical .x-scrollbar--thumb--bar {
  width: 9px;
  margin: 0 3px;
}

.x-scrollbar-type-embed .x-scrollbar--thumb {
  opacity: 0;
  transition: opacity ease 200ms;
}
.x-scrollbar-type-embed .x-scrollbar--thumb-dragging {
  opacity: 0.8;
}
.x-scrollbar-type-embed:hover .x-scrollbar--thumb {
  opacity: 0.8;
}

.x-scrollbar.x-scrollbar-both .x-scrollbar-track-direction-horizontal {
  width: calc(100% - 15px);
}
.x-scrollbar.x-scrollbar-both .x-scrollbar-track-direction-vertical {
  height: calc(100% - 15px);
}
.x-scrollbar-type-track .x-scrollbar-track {
  background-color: var(--x-scrollbar-color-track-bg);
}
.x-scrollbar-type-track .x-scrollbar-track-direction-horizontal {
  border-top: 1px solid var(--x-scrollbar-color-track-border);
  border-bottom: 1px solid var(--x-scrollbar-color-track-border);
}
.x-scrollbar-type-track .x-scrollbar-track-direction-vertical {
  border-right: 1px solid var(--x-scrollbar-color-track-border);
  border-left: 1px solid var(--x-scrollbar-color-track-border);
}
.x-scrollbar-type-track .x-scrollbar--thumb-direction-horizontal {
  margin: -1px 0;
}
.x-scrollbar-type-track .x-scrollbar--thumb-direction-vertical {
  margin: 0 calc(-1px);
}
.x-scrollbar-type-track.x-scrollbar-both .x-scrollbar-track-direction-vertical::after {
  position: absolute;
  right: calc(-1px);
  bottom: calc(-15px);
  display: block;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  background-color: var(--x-scrollbar-color-track-bg);
  border-right: 1px solid var(--x-scrollbar-color-track-border);
  border-bottom: 1px solid var(--x-scrollbar-color-track-border);
  content: "";
}

.x-skeleton--shape {
  width: var(--x-size-12);
  height: var(--x-size-12);
  background-color: var(--x-color-fill-1);
  border-radius: var(--x-border-radius-small);
}
.x-skeleton--shape-circle {
  border-radius: 50%;
}
.x-skeleton--shape-small {
  width: var(--x-size-9);
  height: var(--x-size-9);
}
.x-skeleton--shape-large {
  width: var(--x-size-15);
  height: var(--x-size-15);
}
ul.x-skeleton--line.x-skeleton--line {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none outside none;
}
ul.x-skeleton--line.x-skeleton--line::marker {
  content: none;
}

.x-skeleton--line--row {
  display: block;
  height: var(--x-size-4);
  background-color: var(--x-color-fill-1);
  list-style: none;
}
.x-skeleton--line--row::marker {
  content: none;
}
.x-skeleton-animation .x-skeleton--shape,
.x-skeleton-animation .x-skeleton--line--row {
  background: linear-gradient(90deg, var(--x-color-fill-1) 25%, var(--x-color-fill-3) 37%, var(--x-color-fill-1) 63%);
  background-size: 400% 100%;
  animation: x-skeleton-circle 1.5s var(--x-transition-timing-function-linear) infinite;
}

/*
 * 降低动态效果：流光动画是无限循环的持续动效，前庭功能障碍用户开启
 * 系统「减弱动态效果」后应停止。只停动画，保留渐变静态形态，
 * 占位轮廓不消失。
 */
@media (prefers-reduced-motion: reduce) {
  .x-skeleton-animation .x-skeleton--shape,
  .x-skeleton-animation .x-skeleton--line--row {
    animation: none;
  }
}
@keyframes x-skeleton-circle {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.x-space {
  --x-space-color-split: var(--x-color-text-3);
  display: inline-flex;
  vertical-align: bottom;
}
.x-space--horizontal-center {
  align-items: center;
}
.x-space--horizontal-start {
  align-items: flex-start;
}
.x-space--horizontal-end {
  align-items: flex-end;
}
.x-space--horizontal-baseline {
  align-items: baseline;
}
.x-space--horizontal-space-between {
  justify-content: space-between;
}

.x-space--vertical {
  flex-direction: column;
}
.x-space--vertical-center {
  align-items: center;
}
.x-space--vertical-start {
  align-items: flex-start;
}
.x-space--vertical-end {
  align-items: flex-end;
}
.x-space--vertical-baseline {
  align-items: baseline;
}
.x-space--vertical-space-between {
  justify-content: space-between;
}

.x-space--split {
  color: var(--x-space-color-split, var(--x-color-text-3));
}

.x-space-block {
  display: flex;
}

.x-space-fill {
  display: flex;
  width: 100%;
  /*
   * 项规则必须直接命中子选择器：e() 在此处会生成 `.x-space-fill--item`，
   * 与运行时类名不符，flex: 1 从未生效。
   */
}
.x-space-fill > .x-space--item {
  flex: 1;
  min-width: 0;
}
.x-space-fill {
  /*
   * 垂直 fill：默认 align="center" 会把宽度 100% 的子项收缩成内容宽度，
   * 「撑满父容器」不成立（Arco 垂直方向同样默认拉伸）。间距项改为 flex
   * 容器，控件不再参与行内排版，行高余量不会留在项内。
   */
}
.x-space-fill.x-space--vertical {
  align-items: stretch;
}
.x-space-fill.x-space--vertical > .x-space--item {
  display: flex;
}

.x-dot-loading {
  position: relative;
  display: inline-block;
  width: calc(var(--x-size-3) * 3);
  height: calc(var(--x-size-3) * 3);
  transform-style: preserve-3d;
  perspective: 200px;
  animation: x-spin-rotate-dots 1.5s linear infinite;
}
.x-dot-loading.x-dot-loading-color .x-dot-loading--item:nth-child(1) {
  background-color: var(--x-color-primary-text);
}
.x-dot-loading.x-dot-loading-color .x-dot-loading--item:nth-child(2) {
  background-color: var(--x-color-success-text);
}
.x-dot-loading.x-dot-loading-color .x-dot-loading--item:nth-child(3) {
  background-color: var(--x-color-strong-text);
}
.x-dot-loading.x-dot-loading-color .x-dot-loading--item:nth-child(4) {
  background-color: var(--x-color-warning-text);
}
.x-dot-loading--item {
  position: absolute;
  width: var(--x-size-3);
  height: var(--x-size-3);
  background-color: var(--x-color-primary-text);
  border-radius: var(--x-border-radius-circle);
  animation: x-spin-fade-dots 1.5s var(--x-transition-timing-function-linear) infinite forwards;
}
.x-dot-loading--item:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
.x-dot-loading--item:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation-delay: 0.25s;
}
.x-dot-loading--item:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.5s;
}
.x-dot-loading--item:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation-delay: 0.75s;
}

@keyframes x-spin-rotate-dots {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes x-spin-fade-dots {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
}
.x-spin {
  display: inline-block;
}
.x-spin.x-spin-block {
  display: block;
}
.x-spin-with-tip {
  text-align: center;
}
.x-spin--icon {
  display: inline-flex;
  color: var(--x-color-primary-text);
  font-size: 24px;
}

.x-spin--tip {
  margin-top: var(--x-spacing-3);
  color: var(--x-color-primary-text);
  font-weight: var(--x-font-weight-500);
  font-size: 14px;
  /*
   * 显式声明行高，避免继承宿主（如 body）的行高导致文案高度随项目变化。
   * 每份 Spin 文案都叠一层行高带来的高度差（实测宿主 lh=3 时文案盒会明显变高），
   * 在 mask 里居中时尤其容易偏移。
   */
  line-height: var(--x-line-height-base);
}

.x-spin {
  /*
   * 提示文字扫光：一条比文案色更亮的光带沿文字横向扫过。
   * 由 tipShimmer 开启（根节点带 x-spin-tip-shimmer 修饰类）。
   *
   * background-clip: text 会把背景裁到字形里，所以 color 必须透明；
   * 整个效果包在 @supports 中——若浏览器不支持裁切，文字会保持原色正常显示，
   * 而不是变成一片空白。
   */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .x-spin-tip-shimmer .x-spin--tip {
    color: var(--x-color-transparent);
    background-image: linear-gradient(90deg, var(--x-color-primary-text) 0%, var(--x-color-primary-text) 44%, var(--x-spin-tip-shimmer-color-highlight) 50%, var(--x-color-primary-text) 56%, var(--x-color-primary-text) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: x-spin-tip-shimmer var(--x-spin-tip-shimmer-duration) linear infinite;
  }
}
.x-spin--mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  text-align: center;
  background-color: var(--x-color-spin-layer-bg);
  transition: opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  user-select: none;
}

.x-spin--children {
  position: relative;
}

.x-spin-loading {
  position: relative;
  user-select: none;
}
.x-spin-loading .x-spin--mask--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.x-spin-loading .x-spin--children {
  pointer-events: none;
}

/*
 * 扫光位移。
 *
 * 渐变图宽 300%、光带位于 50%；从 140% 移到 -40% 时，
 * 光带依次经过文字右端 → 中央 → 左端。用百分比位移是为了不依赖文字实际宽度，
 * 文案长度变化时扫光范围自动匹配。
 */
@keyframes x-spin-tip-shimmer {
  0% {
    background-position: 140% 50%;
  }
  100% {
    background-position: -40% 50%;
  }
}
/*
 * 降低动态效果：点状加载的旋转与淡出、文案扫光都属于持续性动画，
 * 前庭功能障碍用户开启动效降级后应立即呈现静态图形。
 * 只停动画，不隐藏内容——否则加载指示会整个消失。
 */
@media (prefers-reduced-motion: reduce) {
  .x-dot-loading,
  .x-dot-loading--item {
    animation: none;
  }
  /*
   * 扫光停住时把背景还原成纯色：只停 animation 的话，光带会停在某个
   * 固定位置（可能正好压在文字上），静止画面里会出现一块突兀的亮斑。
   */
  .x-spin-tip-shimmer .x-spin--tip {
    background-image: none;
    color: var(--x-color-primary-text);
  }
}
.x-steps--item {
  position: relative;
  flex: 1;
  margin-right: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
.x-steps--item:last-child {
  flex: none;
  margin-right: 0;
}
.x-steps--item-active .x-steps--item--title {
  font-weight: var(--x-font-weight-500);
}
.x-steps--item-disabled {
  cursor: not-allowed;
}
.x-steps--item-disabled .x-steps--item--title,
.x-steps--item-disabled .x-steps--item--description {
  color: var(--x-color-text-4);
}
.x-steps--item--node {
  display: inline-block;
  margin-right: 12px;
  min-width: var(--x-size-7);
  min-height: var(--x-size-7);
  font-weight: var(--x-font-weight-500);
  font-size: var(--x-font-size-title-1);
  vertical-align: top;
}
.x-steps--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-size-7);
  height: var(--x-size-7);
  color: var(--x-color-text-2);
  font-size: var(--x-size-4);
  text-align: center;
  background-color: var(--x-color-fill-2);
  border: 1px solid var(--x-color-transparent);
  border-radius: var(--x-border-radius-circle);
}
.x-steps--item-process .x-steps--icon {
  color: var(--x-color-white);
  background-color: var(--x-color-primary-6);
  border-color: var(--x-color-transparent);
}
.x-steps--item-finish .x-steps--icon {
  color: var(--x-color-primary-text);
  background-color: var(--x-color-primary-light-1);
  border-color: var(--x-color-transparent);
}
.x-steps--item-error .x-steps--icon {
  color: var(--x-color-white);
  background-color: var(--x-color-danger-6);
  border-color: var(--x-color-transparent);
}
.x-steps--item-disabled .x-steps--icon {
  color: var(--x-color-text-4);
  background-color: var(--x-color-fill-2);
}
.x-steps--item--title {
  position: relative;
  display: inline-block;
  padding-right: 12px;
  color: var(--x-color-text-2);
  font-size: var(--x-font-size-title-1);
  line-height: var(--x-size-7);
  white-space: nowrap;
}
.x-steps--item-process .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps--item-finish .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps--item-error .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps--item--content {
  display: inline-block;
}
.x-steps--item--description {
  max-width: 140px;
  margin-top: var(--x-spacing-1);
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
  /*
   * 显式行高。description 是多行文案，不声明就会继承宿主行高，
   * 导致行距与整体高度随项目变化；同级的 title 早已声明了行高。
   */
  line-height: var(--x-line-height-base);
  white-space: normal;
}
.x-steps--item-process .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps--item-finish .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps--item-error .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps {
  /*
   * 横向连接线：仅 line（default）模式的水平标签布局需要。
   *
   * 必须显式排除 arrow / navigation / dot / vertical / line-less：这些模式
   * 各自的隐藏规则特异性只有 (0,2,1)~(0,3,1)，低于本规则的 (0,4,1)，
   * `display: none` 覆盖不掉。历史上靠 `!important` 压制，清理后失效，
   * 导致 arrow / navigation / vertical / dot 出现贯穿整页的水平残线
   * （宽度是 5000px 的占位值）。排除条件全部写在根元素上——各模式类名
   * （x-steps-mode-*、x-steps-vertical、x-steps-line-less）与
   * x-steps--label-horizontal 同在 x-steps 根节点。
   */
}
.x-steps--label-horizontal:not(.x-steps-mode-arrow):not(.x-steps-mode-navigation):not(.x-steps-mode-dot):not(.x-steps-vertical):not(.x-steps-line-less) .x-steps--item:not(:last-child) .x-steps--item--title::after {
  position: absolute;
  top: calc((var(--x-size-7) - var(--x-border-1)) / 2);
  left: 100%;
  display: block;
  box-sizing: border-box;
  width: 5000px;
  height: var(--x-border-1);
  background-color: var(--x-color-neutral-3);
  content: "";
}
.x-steps--label-horizontal:not(.x-steps-mode-arrow):not(.x-steps-mode-navigation):not(.x-steps-mode-dot):not(.x-steps-vertical):not(.x-steps-line-less) .x-steps--item-finish:not(:last-child) .x-steps--item--title::after {
  background-color: var(--x-color-primary-6);
}
.x-steps--label-horizontal:not(.x-steps-mode-arrow):not(.x-steps-mode-navigation):not(.x-steps-mode-dot):not(.x-steps-vertical):not(.x-steps-line-less) .x-steps--item-next-error:not(:last-child) .x-steps--item--title::after {
  background-color: var(--x-color-danger-6);
}
.x-steps--item:not(:last-child) .x-steps--item--tail {
  position: absolute;
  top: calc((var(--x-size-7) - var(--x-border-1)) / 2);
  box-sizing: border-box;
  width: 100%;
  height: var(--x-border-1);
}
.x-steps--item:not(:last-child) .x-steps--item--tail::after {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--x-color-neutral-3);
  content: "";
}
.x-steps--item-finish:not(:last-child) .x-steps--item--tail::after {
  background-color: var(--x-color-primary-6);
}
.x-steps--item-next-error:not(:last-child) .x-steps--item--tail::after {
  background-color: var(--x-color-danger-6);
}
.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail {
  top: 0;
  left: calc((var(--x-size-7) - var(--x-border-1)) / 2);
  width: var(--x-border-1);
  height: auto;
  padding: 0;
  bottom: 0;
}
.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail::after {
  position: absolute;
  top: calc(var(--x-size-7) + 6px);
  bottom: 6px;
  left: 0;
  width: var(--x-border-1);
  height: auto;
}
.x-steps-vertical .x-steps--item--node {
  margin-right: 12px;
}
.x-steps-vertical .x-steps--item--content {
  display: inline-block;
}
.x-steps-size-small:not(.x-steps-vertical) .x-steps--item:not(:last-child) .x-steps--item--tail {
  top: calc((var(--x-size-6) - var(--x-border-1)) / 2);
}
.x-steps-size-small.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail {
  left: calc((var(--x-size-6) - var(--x-border-1)) / 2);
}
.x-steps-size-small.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail::after {
  top: calc(var(--x-size-6) + 6px);
}
.x-steps-size-small .x-steps--item--node {
  font-size: var(--x-font-size-body-3);
}
.x-steps-size-small .x-steps--item--title {
  font-size: var(--x-font-size-body-3);
  line-height: var(--x-size-6);
}
.x-steps-size-small .x-steps--item--description {
  font-size: var(--x-font-size-body-1);
}
.x-steps-size-small .x-steps--icon {
  width: var(--x-size-6);
  height: var(--x-size-6);
  font-size: 14px;
  line-height: var(--x-size-6);
}
.x-steps-size-small.x-steps--label-horizontal .x-steps--item:not(:last-child) .x-steps--item--title::after {
  top: calc((var(--x-size-6) - var(--x-border-1)) / 2);
}
.x-steps--label-vertical .x-steps--item {
  overflow: visible;
  text-align: center;
}
.x-steps--label-vertical .x-steps--item--title {
  margin-top: var(--x-spacing-1);
  padding-right: 0;
}
.x-steps--label-vertical .x-steps--item--node {
  display: block;
  margin-left: calc((140px - var(--x-size-7)) / 2);
  text-align: left;
}
.x-steps--label-vertical .x-steps--item--tail {
  left: calc(calc((140px - var(--x-size-7)) / 2) + var(--x-size-7) + 12px);
  padding-right: calc(var(--x-size-7) + 12px);
}
.x-steps--label-vertical.x-steps-size-small .x-steps--item--node {
  margin-left: calc((140px - var(--x-size-6)) / 2);
}
.x-steps--label-vertical.x-steps-size-small .x-steps--item--tail {
  left: calc(calc((140px - var(--x-size-6)) / 2) + var(--x-size-6) + 12px);
  padding-right: calc(var(--x-size-6) + 12px);
}

.x-steps-mode-dot .x-steps--item {
  position: relative;
  flex: 1;
  margin-right: calc(var(--x-size-2) + var(--x-spacing-2) * 2);
  overflow: visible;
  white-space: nowrap;
  text-align: left;
}
.x-steps-mode-dot .x-steps--item:last-child {
  flex: none;
  margin-right: 0;
}
.x-steps-mode-dot .x-steps--item-active .x-steps--item--title {
  font-weight: var(--x-font-weight-500);
}
.x-steps-mode-dot .x-steps--item--node {
  display: inline-block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: var(--x-size-2);
  height: var(--x-size-2);
  background-color: var(--x-color-fill-4);
  border: 1px solid var(--x-color-fill-4);
  border-radius: var(--x-border-radius-circle);
  vertical-align: top;
}
.x-steps-mode-dot .x-steps--item-active .x-steps--item--node {
  width: 10px;
  height: 10px;
}
.x-steps-mode-dot .x-steps--item-process .x-steps--item--node {
  background-color: var(--x-color-primary-6);
  border-color: var(--x-color-primary-6);
}
.x-steps-mode-dot .x-steps--item-finish .x-steps--item--node {
  background-color: var(--x-color-primary-6);
  border-color: var(--x-color-primary-6);
}
.x-steps-mode-dot .x-steps--item-error .x-steps--item--node {
  background-color: var(--x-color-danger-6);
  border-color: var(--x-color-danger-6);
}
.x-steps-mode-dot .x-steps--item-disabled .x-steps--item--node {
  background-color: var(--x-color-fill-2);
  border-color: var(--x-color-fill-3);
}
.x-steps-mode-dot.x-steps-horizontal .x-steps--item--node {
  margin-left: calc((140px - var(--x-size-2)) / 2);
}
.x-steps-mode-dot.x-steps-horizontal .x-steps--item-active .x-steps--item--node {
  margin-top: calc((var(--x-size-2) - 10px) / 2);
  margin-left: calc(calc((140px - var(--x-size-2)) / 2) - (10px - var(--x-size-2)) / 2);
}
.x-steps-mode-dot.x-steps-horizontal .x-steps--item--title::after {
  display: none;
}
.x-steps-mode-dot .x-steps--item--content {
  display: inline-block;
}
.x-steps-mode-dot .x-steps--item--title {
  position: relative;
  display: inline-block;
  margin-top: var(--x-spacing-2);
  color: var(--x-color-text-2);
  font-size: var(--x-font-size-title-1);
}
.x-steps-mode-dot .x-steps--item-process .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps-mode-dot .x-steps--item-finish .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps-mode-dot .x-steps--item-error .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps-mode-dot .x-steps--item--description {
  margin-top: var(--x-spacing-2);
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
  white-space: normal;
}
.x-steps-mode-dot .x-steps--item-process .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps-mode-dot .x-steps--item-finish .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps-mode-dot .x-steps--item-error .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps-mode-dot .x-steps--item:not(:last-child) .x-steps--item--tail {
  position: absolute;
  top: calc((var(--x-size-2) - var(--x-border-1)) / 2);
  left: calc(calc((140px - var(--x-size-2)) / 2) + var(--x-size-2) + var(--x-spacing-2));
  box-sizing: border-box;
  width: 100%;
  height: var(--x-border-1);
  background-color: var(--x-color-neutral-3);
}
.x-steps-mode-dot .x-steps--item-finish:not(:last-child) .x-steps--item--tail {
  background-color: var(--x-color-primary-6);
}
.x-steps-mode-dot .x-steps--item-next-error:not(:last-child) .x-steps--item--tail {
  background-color: var(--x-color-danger-6);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item--node {
  margin-top: var(--x-spacing-4);
  margin-right: var(--x-spacing-7);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item-active .x-steps--item--node {
  margin-top: calc(var(--x-spacing-4) - (10px - var(--x-size-2)) / 2);
  margin-left: calc((var(--x-size-2) - 10px) / 2);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item--content {
  overflow: hidden;
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item--title {
  margin-top: calc(var(--x-spacing-4) + var(--x-size-2) / 2 - var(--x-size-7) / 2);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item--description {
  margin-top: var(--x-spacing-2);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail {
  position: absolute;
  bottom: 0;
  left: calc(var(--x-size-2) / 2);
  box-sizing: border-box;
  width: 1px;
  height: 100%;
  padding-top: calc(var(--x-size-2) + 4px + var(--x-spacing-2));
  padding-bottom: 2px;
  background-color: var(--x-color-transparent);
  transform: translateX(-50%);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item:not(:last-child) .x-steps--item--tail::after {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--x-color-neutral-3);
  content: "";
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item-finish:not(:last-child) .x-steps--item--tail::after {
  background-color: var(--x-color-primary-6);
}
.x-steps-mode-dot.x-steps-vertical .x-steps--item-next-error:not(:last-child) .x-steps--item--tail::after {
  background-color: var(--x-color-danger-6);
}

.x-steps {
  --x-steps-arrow-height: 72px;
  --x-steps-size-arrow: 36px;
}
.x-steps-mode-arrow .x-steps--item {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  height: var(--x-steps-arrow-height);
  overflow: visible;
  white-space: nowrap;
  background-color: var(--x-color-fill-1);
}
.x-steps-mode-arrow .x-steps--item:not(:last-child) {
  margin-right: var(--x-spacing-2);
}
.x-steps-mode-arrow .x-steps--item:not(:first-child)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: var(--x-steps-size-arrow) solid var(--x-color-transparent);
  border-bottom: var(--x-steps-size-arrow) solid var(--x-color-transparent);
  border-left: var(--x-steps-size-arrow) solid var(--x-color-bg-2);
  content: "";
}
.x-steps-mode-arrow .x-steps--item:not(:last-child)::after {
  position: absolute;
  top: 0;
  right: calc(var(--x-steps-size-arrow) * -1);
  z-index: 2;
  display: block;
  width: 0;
  height: 0;
  border-top: var(--x-steps-size-arrow) solid var(--x-color-transparent);
  border-bottom: var(--x-steps-size-arrow) solid var(--x-color-transparent);
  border-left: var(--x-steps-size-arrow) solid var(--x-color-fill-1);
  content: "";
}
.x-steps-mode-arrow .x-steps--item-process {
  background-color: var(--x-color-primary-6);
}
.x-steps-mode-arrow .x-steps--item-process:not(:last-child)::after {
  border-left-color: var(--x-color-primary-6);
}
.x-steps-mode-arrow .x-steps--item-finish {
  background-color: var(--x-color-primary-light-1);
}
.x-steps-mode-arrow .x-steps--item-finish:not(:last-child)::after {
  border-left-color: var(--x-color-primary-light-1);
}
.x-steps-mode-arrow .x-steps--item-error {
  background-color: var(--x-color-danger-6);
}
.x-steps-mode-arrow .x-steps--item-error:not(:last-child)::after {
  border-left-color: var(--x-color-danger-6);
}
.x-steps-mode-arrow .x-steps--item-disabled {
  background-color: var(--x-color-fill-2);
}
.x-steps-mode-arrow .x-steps--item-disabled:not(:last-child)::after {
  border-left-color: var(--x-color-fill-2);
}
.x-steps-mode-arrow .x-steps--item--content {
  display: inline-block;
  box-sizing: border-box;
}
.x-steps-mode-arrow .x-steps--item:first-child .x-steps--item--content {
  padding-left: var(--x-spacing-7);
}
.x-steps-mode-arrow .x-steps--item:not(:first-child) .x-steps--item--content {
  padding-left: calc(var(--x-spacing-7) + var(--x-steps-size-arrow));
}
.x-steps-mode-arrow .x-steps--item--title {
  position: relative;
  display: inline-block;
  color: var(--x-color-text-2);
  font-size: var(--x-font-size-title-1);
  white-space: nowrap;
}
.x-steps-mode-arrow .x-steps--item--title::after {
  display: none;
}
.x-steps-mode-arrow .x-steps--item-process .x-steps--item--title {
  color: var(--x-color-white);
}
.x-steps-mode-arrow .x-steps--item-finish .x-steps--item--title {
  color: var(--x-color-text-1);
}
.x-steps-mode-arrow .x-steps--item-error .x-steps--item--title {
  color: var(--x-color-white);
}
.x-steps-mode-arrow .x-steps--item-active .x-steps--item--title {
  font-weight: var(--x-font-weight-500);
}
.x-steps-mode-arrow .x-steps--item--description {
  max-width: none;
  margin-top: 0;
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
  white-space: nowrap;
}
.x-steps-mode-arrow .x-steps--item-process .x-steps--item--description {
  color: var(--x-color-white);
}
.x-steps-mode-arrow .x-steps--item-finish .x-steps--item--description {
  color: var(--x-color-text-3);
}
.x-steps-mode-arrow .x-steps--item-error .x-steps--item--description {
  color: var(--x-color-white);
}
.x-steps-mode-arrow.x-steps-size-small {
  --x-steps-arrow-height: var(--x-size-10);
  --x-steps-size-arrow: calc(var(--x-size-10) / 2);
}
.x-steps-mode-arrow.x-steps-size-small .x-steps--item--title {
  font-size: var(--x-font-size-body-3);
}
.x-steps-mode-arrow.x-steps-size-small .x-steps--item--description {
  display: none;
}
.x-steps-mode-arrow.x-steps-size-small .x-steps--item:first-child .x-steps--item--content {
  padding-left: var(--x-spacing-8);
}
.x-steps-mode-arrow.x-steps-size-small .x-steps--item:not(:first-child) .x-steps--item--content {
  padding-left: calc(var(--x-spacing-8) + var(--x-size-10) / 2);
}

.x-steps-mode-navigation .x-steps--item--title::after {
  display: none;
}
.x-steps-mode-navigation .x-steps--item {
  position: relative;
  padding-right: var(--x-spacing-5);
  padding-left: var(--x-spacing-8);
  margin-right: var(--x-spacing-10);
}
.x-steps-mode-navigation .x-steps--item:last-child {
  flex: 1;
}
.x-steps-mode-navigation .x-steps--item--content {
  margin-bottom: 20px;
}
.x-steps-mode-navigation .x-steps--item--description {
  padding-right: 20px;
}
.x-steps-mode-navigation .x-steps--item-active .x-steps--item--title {
  color: var(--x-color-primary-text);
  font-weight: var(--x-font-weight-500);
}
.x-steps-mode-navigation .x-steps--item:not(:last-child) .x-steps--item--content::after {
  position: absolute;
  top: var(--x-spacing-5);
  right: 30px;
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--x-color-bg-2);
  border: 2px solid var(--x-color-text-4);
  border-bottom: none;
  border-left: none;
  transform: rotate(45deg);
  content: "";
}

.x-steps {
  display: flex;
}
.x-steps-vertical {
  flex-direction: column;
}
.x-steps-changeable .x-steps--item:not(.x-steps--item-active):not(.x-steps--item-disabled) {
  cursor: pointer;
}
.x-steps-changeable .x-steps--item:not(.x-steps--item-active):not(.x-steps--item-disabled):hover .x-steps--item--title,
.x-steps-changeable .x-steps--item:not(.x-steps--item-active):not(.x-steps--item-disabled):hover .x-steps--item--description {
  color: var(--x-color-primary-text);
}
.x-steps-changeable .x-steps--item:not(.x-steps--item-active):not(.x-steps--item-disabled):focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: 4px;
}
.x-steps-changeable .x-steps--item--title,
.x-steps-changeable .x-steps--item--description {
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-steps-line-less .x-steps--item--tail,
.x-steps-line-less .x-steps--item--title::after {
  display: none;
}
.x-steps-vertical .x-steps--item:not(:last-child) {
  min-height: 90px;
}
.x-steps-vertical .x-steps--item--content {
  vertical-align: top;
}
.x-steps-vertical .x-steps--item--title::after {
  display: none;
}
.x-steps-vertical .x-steps--item--description {
  max-width: none;
}
.x-steps--label-vertical .x-steps--item--content {
  display: block;
  width: 140px;
  text-align: center;
}
.x-steps--label-vertical .x-steps--item--description {
  max-width: none;
}

:root {
  --x-table-fixed-z-index: 10;
  --x-table-header-z-index: 100;
  --x-table-size-default-padding-horizontal: var(--x-spacing-7);
  --x-table-size-default-padding-vertical: 8px;
  --x-table-size-middle-padding-horizontal: var(--x-spacing-7);
  --x-table-size-middle-padding-vertical: 7px;
  --x-table-size-small-padding-horizontal: var(--x-spacing-6);
  --x-table-size-small-padding-vertical: 5px;
  --x-table-size-mini-padding-horizontal: var(--x-spacing-5);
  --x-table-size-mini-padding-vertical: 3px;
  --x-table-size-default-font-size: var(--x-font-size-body-3);
  --x-table-size-middle-font-size: var(--x-font-size-body-3);
  --x-table-size-small-font-size: var(--x-font-size-body-3);
  --x-table-size-mini-font-size: var(--x-font-size-body-1);
  --x-table-size-default-font-header-size: var(--x-font-size-body-3);
  --x-table-size-middle-font-header-size: var(--x-font-size-body-3);
  --x-table-size-small-font-header-size: var(--x-font-size-body-3);
  --x-table-size-mini-font-header-size: var(--x-font-size-body-1);
  --x-table-border-width: var(--x-border-1);
  --x-table-border-style: solid;
  --x-table-size-expand-button: 14px;
  --x-table-spacing-expand-button-margin-right: var(--x-spacing-2);
  --x-table-font-size-expand-button: 12px;
  --x-table-border-radius-expand-button: 2px;
  --x-table-color-border: var(--x-color-border-subtle);
  --x-table-border-radius: 6px;
  --x-table-color-text-header-cell: var(--x-color-text-primary);
  --x-table-color-bg-header-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-header-sorted-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-header-sorted-cell_hover: var(--x-color-fill-2);
  --x-table-color-header-filters-icon: var(--x-color-text-4);
  --x-table-color-header-filters-icon_active: var(--x-color-primary-6);
  --x-table-color-bg-header-filters-icon_hover: var(--x-color-fill-2);
  --x-table-font-size-filters-icon: 14px;
  --x-table-size-filters-width: 32px;
  --x-table-font-weight-header-text: var(--x-font-weight-600);
  --x-table-color-text-body-cell: var(--x-color-text-primary);
  --x-table-color-bg-body-cell: var(--x-color-bg-surface);
  --x-table-color-bg-body-sorted-cell: var(--x-color-bg-subtle);
  --x-table-color-bg-body-stripe-row: var(--x-color-bg-subtle);
  --x-table-color-bg-body-row_hover: var(--x-color-bg-subtle);
  --x-table-color-bg-body-row_active: var(--x-color-primary-subtle);
  --x-table-color-bg-body-row_active_dark: var(--x-color-neutral-2);
  --x-table-color-expand-icon: var(--x-color-text-2);
  --x-table-color-expand-icon-border: var(--x-color-transparent);
  --x-table-color-expand-icon-border_hover: var(--x-color-transparent);
  --x-table-color-expand-icon_hover: var(--x-color-text-1);
  --x-table-color-bg-expand-icon: var(--x-color-fill-2);
  --x-table-color-bg-expand-icon_hover: var(--x-color-fill-3);
  --x-table-color-bg-expand-content: var(--x-color-bg-subtle);
  --x-table-color-bg-expand-content_hover: var(--x-color-bg-subtle);
  --x-table-border-expand-icon-width: var(--x-border-1);
  --x-table-color-header-sorter-icon: var(--x-color-text-4);
  --x-table-color-header-sorter-icon_next: var(--x-color-text-3);
  --x-table-color-header-sorter-icon_active: var(--x-color-primary-6);
  --x-table-spacing-header-sorter-icon-margin-left: var(--x-spacing-3);
  --x-table-size-header-sorter-icon-height: 7px;
  --x-table-size-header-sorter-icon-width: 12px;
  --x-table-font-size-header-sorter-icon: 11px;
  --x-table-position-header-sorter-icon-up-top: -1px;
  --x-table-position-header-sorter-icon-down-top: -2px;
  --x-table-position-header-sorter-icon-left: 0;
  --x-table-color-bg-filters-popup: var(--x-color-bg-5);
  --x-table-color-border-filters-popup: var(--x-color-neutral-3);
  --x-table-popup-min-width: 100px;
  --x-table-popup-max-height: 200px;
  --x-table-popup-border-radius: var(--x-border-radius-medium);
  --x-table-shadow-left: inset 8px 0 8px -8px var(--x-shadow-color-fixed-column);
  --x-table-shadow-right: inset -8px 0 8px -8px var(--x-shadow-color-fixed-column);
  --x-table-size-shadow-wrapper-width: 10px;
  --x-table-spacing-pagination-margin: var(--x-spacing-7);
  --x-table-size-selection-col-width: 40px;
  --x-table-size-expand-icon-col-width: 40px;
  --x-table-size-drag-handle-col-width: 40px;
  --x-table-size-body-min-width: 40px;
  --x-table-color-body-background: var(--x-color-bg-surface);
  --x-table-size-large-padding-horizontal: var(--x-table-size-default-padding-horizontal);
  --x-table-size-large-padding-vertical: var(--x-table-size-default-padding-vertical);
  --x-table-size-large-font-size: var(--x-table-size-default-font-size);
  --x-table-size-large-font-header-size: var(--x-table-size-default-font-header-size);
  --x-table-size-medium-padding-horizontal: var(--x-table-size-middle-padding-horizontal);
  --x-table-size-medium-padding-vertical: var(--x-table-size-middle-padding-vertical);
  --x-table-size-medium-font-size: var(--x-table-size-middle-font-size);
  --x-table-size-medium-font-header-size: var(--x-table-size-middle-font-header-size);
  --x-table-color-bg-tfoot: var(--x-color-bg-subtle);
  --x-table-filters-icon-bg_hover: var(--x-color-fill-2);
  --x-table-color-border_resizing: var(--x-color-primary-6);
}

.x-table--filters--content {
  box-sizing: border-box;
  min-width: var(--x-table-popup-min-width);
  background: var(--x-table-color-bg-filters-popup);
  border: 1px solid var(--x-table-color-border-filters-popup);
  border-radius: var(--x-table-popup-border-radius);
  box-shadow: var(--x-shadow1-down);
}
.x-table--filters--list {
  max-height: var(--x-table-popup-max-height);
  padding: 4px 0;
  overflow-y: auto;
}
.x-table--filters--item {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 32px;
}
.x-table--filters--text {
  width: 100%;
  max-width: 160px;
  height: 34px;
  margin-right: 0;
  padding-left: 10px;
  overflow: hidden;
  line-height: 32px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.x-table--filters--bottom {
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  overflow: hidden;
  line-height: 38px;
  border-top: 1px solid var(--x-table-color-border);
}
.x-table--filters--bottom > *:not(*:last-child) {
  margin-right: 8px;
}

.x-table {
  position: relative;
  isolation: isolate;
  color: var(--x-table-color-text-body-cell);
  font-size: var(--x-table-size-default-font-size);
  line-height: var(--x-line-height-base);
  background: var(--x-table-color-bg-body-cell);
}
.x-table--column-handle {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 1;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}
.x-table--column-handle:focus-visible {
  background-color: var(--x-table-color-border_resizing);
  outline: 2px solid var(--x-color-primary-6);
  outline-offset: -2px;
}
.x-table .x-spin {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.x-table--footer {
  border-radius: 0 0 var(--x-table-border-radius) var(--x-table-border-radius);
}
.x-table-scroll-position-right .x-table-col-fixed-left-last::after, .x-table-scroll-position-middle .x-table-col-fixed-left-last::after {
  box-shadow: var(--x-table-shadow-left);
}
.x-table-scroll-position-left .x-table-col-fixed-right-first::after, .x-table-scroll-position-middle .x-table-col-fixed-right-first::after {
  box-shadow: var(--x-table-shadow-right);
}
.x-table-layout-fixed .x-table--element {
  table-layout: fixed;
}
.x-table .x-table--element {
  display: table;
  width: 100%;
  min-width: 100%;
  margin: 0;
  overflow: visible;
  color: inherit;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.x-table .x-table--element .x-table--tr {
  background-color: var(--x-color-transparent);
  border-top: 0;
}
.x-table .x-table--th {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  color: var(--x-table-color-text-header-cell);
  font-weight: var(--x-table-font-weight-header-text);
  line-height: var(--x-line-height-base);
  text-align: left;
  background-color: var(--x-table-color-bg-header-cell);
  border: 0;
  border-bottom: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
  transition: background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table .x-table--th[colspan] {
  text-align: center;
}
.x-table .x-table--th-align-right {
  text-align: right;
}
.x-table .x-table--th-align-right .x-table--cell-with-sorter {
  justify-content: flex-end;
}
.x-table .x-table--th-align-center {
  text-align: center;
}
.x-table .x-table--th-align-center .x-table--cell-with-sorter {
  justify-content: center;
}
.x-table .x-table--td {
  box-sizing: border-box;
  padding: 0;
  color: var(--x-table-color-text-body-cell);
  line-height: var(--x-line-height-base);
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  background-color: var(--x-table-color-bg-body-cell);
  border: 0;
  border-bottom: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
  transition: background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table .x-table--td-align-right {
  text-align: right;
}
.x-table .x-table--td-align-center {
  text-align: center;
}
.x-table .x-table--td.x-table-drag-handle {
  cursor: move;
}
.x-table--cell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 22px;
}
.x-table--cell-align-left {
  justify-content: flex-start;
  text-align: left;
}
.x-table--cell-align-right {
  justify-content: flex-end;
  text-align: right;
}
.x-table--cell-align-center {
  justify-content: center;
  text-align: center;
}
.x-table-text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-table--td--content {
  display: block;
  width: 100%;
  min-width: 0;
}
.x-table .x-table--th.x-table--col-sorted {
  background-color: var(--x-table-color-bg-header-sorted-cell);
}
.x-table .x-table--td.x-table--col-sorted {
  background-color: var(--x-table-color-bg-body-sorted-cell);
}
.x-table-col-fixed-left, .x-table-col-fixed-right {
  position: sticky;
  z-index: var(--x-table-fixed-z-index);
}
.x-table .x-table--th.x-table-col-fixed-left,
.x-table .x-table--th.x-table-col-fixed-right {
  position: sticky;
}
.x-table-col-fixed-left-last::after, .x-table-col-fixed-right-first::after {
  position: absolute;
  top: 0;
  bottom: var(--x-table-border-width);
  left: 0;
  width: var(--x-table-size-shadow-wrapper-width);
  box-shadow: none;
  transform: translateX(-100%);
  transition: box-shadow var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  content: "";
  pointer-events: none;
}
.x-table-col-fixed-left-last::after {
  right: 0;
  left: unset;
  transform: translateX(100%);
}
.x-table--cell-text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x-table .x-table--expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--x-table-size-expand-button);
  height: var(--x-table-size-expand-button);
  padding: 0;
  color: var(--x-table-color-expand-icon);
  font-size: var(--x-table-font-size-expand-button);
  line-height: var(--x-table-size-expand-button);
  background-color: var(--x-table-color-bg-expand-icon);
  border: var(--x-table-border-expand-icon-width) solid var(--x-table-color-expand-icon-border);
  border-radius: var(--x-table-border-radius-expand-button);
  outline: none;
  cursor: pointer;
  transition: background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table .x-table--expand-btn:hover {
  color: var(--x-table-color-expand-icon_hover);
  background-color: var(--x-table-color-bg-expand-icon_hover);
  border-color: var(--x-table-color-expand-icon-border_hover);
}
.x-table .x-table--expand-btn:focus-visible {
  outline: 2px solid var(--x-color-primary-6);
  outline-offset: 2px;
}
.x-table .x-table--drag-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: inherit;
  background: var(--x-color-transparent);
  border: 0;
  border-radius: var(--x-border-radius-small);
  cursor: grab;
  touch-action: none;
}
.x-table .x-table--drag-button:active {
  cursor: grabbing;
}
.x-table .x-table--drag-button:focus-visible,
.x-table .x-table--tr[tabindex]:focus-visible,
.x-table .x-table--td[tabindex]:focus-visible {
  outline: 2px solid var(--x-color-primary-6);
  outline-offset: -2px;
}
.x-table--cell-expand-icon {
  display: flex;
  align-items: center;
}
.x-table--cell-expand-icon .x-table--cell-inline-icon {
  display: inline-flex;
  margin-right: var(--x-table-spacing-expand-button-margin-right);
}
.x-table--cell-expand-icon .x-table--cell-inline-icon .x-icon-loading {
  color: var(--x-color-primary-text);
}
.x-table--cell-expand-icon-hidden {
  display: inline-block;
  width: var(--x-table-size-expand-button);
  height: var(--x-table-size-expand-button);
  margin-right: var(--x-table-spacing-expand-button-margin-right);
}
.x-table--tr-expand .x-table--td {
  background-color: var(--x-table-color-bg-expand-content);
}
.x-table--cell-fixed-expand {
  position: sticky;
  left: 0;
  box-sizing: border-box;
}
.x-table--tr-expand .x-table--td .x-table .x-table--container {
  border: none;
}
.x-table--tr-expand .x-table--td .x-table .x-table--th {
  border-bottom: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table--tr-expand .x-table--td .x-table .x-table--th,
.x-table--tr-expand .x-table--td .x-table .x-table--td {
  background-color: var(--x-color-transparent);
}
.x-table--tr-expand .x-table--td .x-table .x-table-pagination {
  margin-bottom: var(--x-table-spacing-pagination-margin);
}
.x-table--th.x-table--operation,
.x-table--td.x-table--operation {
  text-align: center;
}

.x-table--th.x-table--operation .x-table--cell,
.x-table--td.x-table--operation .x-table--cell {
  display: flex;
  justify-content: center;
  padding: 0;
}

.x-table--radio, .x-table--checkbox {
  justify-content: center;
}
.x-table--checkbox .x-checkbox, .x-table--radio .x-radio {
  padding-left: 0;
}
.x-table-selection-checkbox-col, .x-table-selection-radio-col {
  width: var(--x-table-size-selection-col-width);
  min-width: var(--x-table-size-selection-col-width);
  max-width: var(--x-table-size-selection-col-width);
}
.x-table-expand-col {
  width: var(--x-table-size-expand-icon-col-width);
  min-width: var(--x-table-size-expand-icon-col-width);
  max-width: var(--x-table-size-expand-icon-col-width);
}
.x-table-drag-handle-col {
  width: var(--x-table-size-drag-handle-col-width);
  min-width: var(--x-table-size-drag-handle-col-width);
  max-width: var(--x-table-size-drag-handle-col-width);
}
.x-table--th {
  transition: background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table--th:focus-visible {
  outline: 2px solid var(--x-color-primary-6);
  outline-offset: -2px;
}
.x-table--cell-with-sorter {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.x-table--cell-with-sorter:hover {
  background-color: var(--x-table-color-bg-header-sorted-cell_hover);
}
.x-table--cell-with-sorter:hover .x-table--sorter--icon .x-icon {
  color: var(--x-table-color-header-sorter-icon_next);
}
.x-table--cell-with-filter {
  display: flex;
  align-items: center;
}
.x-table--cell-next-ascend .x-table--sorter--icon:first-child .x-icon {
  color: var(--x-table-color-header-sorter-icon_next);
}
.x-table--cell-next-descend .x-table--sorter--icon:last-child .x-icon {
  color: var(--x-table-color-header-sorter-icon_next);
}
.x-table--sorter {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: var(--x-table-spacing-header-sorter-icon-margin-left);
  vertical-align: -3px;
}
.x-table--sorter--icon {
  position: relative;
  width: var(--x-table-size-header-sorter-icon-width);
  height: var(--x-table-size-header-sorter-icon-height);
  overflow: hidden;
  line-height: var(--x-table-size-header-sorter-icon-height);
}
.x-table--sorter--icon .x-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--x-table-font-size-header-sorter-icon);
  height: var(--x-table-font-size-header-sorter-icon);
  transform: translate(-50%, -50%);
  color: var(--x-table-color-header-sorter-icon);
  font-size: var(--x-table-font-size-header-sorter-icon);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table--cell-with-sorter .x-table--sorter--icon-active .x-icon, .x-table--cell-with-sorter:hover .x-table--sorter--icon-active .x-icon {
  color: var(--x-table-color-header-sorter-icon_active);
}
.x-table--filters {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x-table-size-filters-width);
  height: 100%;
  line-height: 1;
  vertical-align: 0;
  background-color: var(--x-color-transparent);
  cursor: pointer;
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table--filters:hover, .x-table--filters-open {
  color: var(--x-color-text-2);
  background-color: var(--x-table-color-bg-header-filters-icon_hover);
}
.x-table--filters svg {
  color: var(--x-table-color-header-filters-icon);
  font-size: var(--x-table-font-size-filters-icon);
  transition: all var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-table--filters-active svg {
  color: var(--x-table-color-header-filters-icon_active);
}
.x-table--filters-align-left {
  position: relative;
  width: auto;
  margin-left: var(--x-table-spacing-header-sorter-icon-margin-left);
}
.x-table--filters-align-left svg {
  font-size: var(--x-table-font-size-header-sorter-icon);
}
.x-table--filters-align-left:hover, .x-table--filters-align-left-open {
  background: none;
}
.x-table--filters-align-left:hover::before, .x-table--filters-align-left.x-table--filters-open::before {
  background: var(--x-table-filters-icon-bg_hover);
}
.x-table {
  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
}
.x-table--container {
  position: relative;
  overflow: hidden;
  border-radius: var(--x-table-border-radius);
}
.x-table--header {
  flex-shrink: 0;
  border-radius: var(--x-table-border-radius) var(--x-table-border-radius) 0 0;
}
.x-table--container {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
}
.x-table--container .x-table--content {
  display: flex;
  flex-direction: column;
  width: auto;
  height: 100%;
}
.x-table--container .x-table--content-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.x-table--container::before, .x-table--container::after {
  position: absolute;
  z-index: 1;
  width: var(--x-table-size-shadow-wrapper-width);
  height: 100%;
  box-shadow: none;
  transition: box-shadow var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
  content: "";
  pointer-events: none;
}
.x-table--container::before {
  top: 0;
  left: 0;
  border-top-left-radius: var(--x-table-border-radius);
}
.x-table--container::after {
  top: 0;
  right: 0;
  border-top-right-radius: var(--x-table-border-radius);
}
.x-table--container:not(.x-table-has-fixed-col-left).x-table-scroll-position-right::before, .x-table--container:not(.x-table-has-fixed-col-left).x-table-scroll-position-middle::before {
  box-shadow: var(--x-table-shadow-left);
}
.x-table--container:not(.x-table-has-fixed-col-right).x-table-scroll-position-left::after, .x-table--container:not(.x-table-has-fixed-col-right).x-table-scroll-position-middle::after {
  box-shadow: var(--x-table-shadow-right);
}
.x-table--header {
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: var(--x-table-color-bg-header-cell);
  scrollbar-color: var(--x-color-transparent) var(--x-color-transparent);
}
.x-table--header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--x-table-header-z-index);
}
.x-table:not(.x-table-empty) .x-table--header::-webkit-scrollbar {
  height: 0;
  background-color: var(--x-color-transparent);
}
.x-table-empty .x-table--header {
  overflow-x: auto;
}
.x-table-sticky-header > .x-spin > .x-spin--children > .x-table--container,
.x-table-sticky-header > .x-table--container {
  overflow: visible;
}
.x-table-sticky-header .x-table--content > .x-table--body:last-child,
.x-table-sticky-header .x-table--content > .x-table--tfoot:last-child {
  border-radius: 0 0 var(--x-table-border-radius) var(--x-table-border-radius);
}
.x-table-sticky-header .x-table--body:last-child > .x-scrollbar--container {
  border-radius: inherit;
}
.x-table--body {
  position: relative;
  width: 100%;
  min-height: var(--x-table-size-body-min-width);
  overflow: auto;
  background-color: var(--x-table-color-body-background);
}
.x-table-border .x-table--container {
  border: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table-border .x-table-scroll-y {
  border-bottom: none;
}
.x-table-border .x-table-scroll-y .x-table--body .x-table--tr:last-of-type .x-table--td,
.x-table-border .x-table-scroll-y tfoot .x-table--tr:last-of-type .x-table--td {
  border-bottom: none;
}
.x-table-border .x-table-scroll-y .x-table--body .x-table--tr:last-of-type .x-table--td.x-table-col-fixed-left-last::after, .x-table-border .x-table-scroll-y .x-table--body .x-table--tr:last-of-type .x-table--td.x-table-col-fixed-right-first::after,
.x-table-border .x-table-scroll-y tfoot .x-table--tr:last-of-type .x-table--td.x-table-col-fixed-left-last::after,
.x-table-border .x-table-scroll-y tfoot .x-table--tr:last-of-type .x-table--td.x-table-col-fixed-right-first::after {
  bottom: 0;
}
.x-table-border .x-table--tr .x-table--th {
  border-bottom: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table-border .x-table--footer {
  border: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
  border-top: 0;
}
.x-table-border:not(.x-table-border-cell) .x-table--container {
  border-color: var(--x-table-color-border);
}
.x-table-border-cell .x-table--th,
.x-table-border-cell .x-table--td:not(.x-table--tr-expand) {
  border-right: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table-border-cell .x-table--tr .x-table--th:last-child,
.x-table-border-cell .x-table--tr .x-table--td:last-child {
  border-right: 0;
}
.x-table-border-cell .x-table--th-resizing,
.x-table-border-cell .x-table--td-resizing:not(.x-table--tr-expand) {
  border-right-color: var(--x-table-color-border_resizing);
}
.x-table-border-header-cell .x-table--th {
  border-right: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
  border-bottom: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table-border-header-cell .x-table--th-resizing,
.x-table-border-header-cell .x-table--td-resizing:not(.x-table--tr-expand) {
  border-right-color: var(--x-table-color-border_resizing);
}
.x-table-border-header-cell thead .x-table--tr:first-child .x-table--th:last-child {
  border-right: 0;
}
.x-table-border-body-cell .x-table--td:not(:last-child):not(.x-table--tr-expand) {
  border-right: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
}
.x-table-stripe:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):nth-child(even) .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right),
.x-table-stripe .x-table--tr-drag .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right) {
  background-color: var(--x-table-color-bg-body-stripe-row);
}
.x-table-stripe:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):nth-child(even) .x-table--td.x-table-col-fixed-left::before,
.x-table-stripe:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):nth-child(even) .x-table--td.x-table-col-fixed-right::before,
.x-table-stripe .x-table--tr-drag .x-table--td.x-table-col-fixed-left::before,
.x-table-stripe .x-table--tr-drag .x-table--td.x-table-col-fixed-right::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--x-table-color-bg-body-stripe-row);
  content: "";
}
.x-table .x-table--tr-draggable {
  cursor: move;
}
.x-table-hover:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):hover .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right),
.x-table-hover .x-table--tr-drag .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right) {
  background-color: var(--x-table-color-bg-body-row_hover);
}
.x-table-hover:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):hover .x-table--td.x-table-col-fixed-left::before,
.x-table-hover:not(.x-table-dragging) .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-summary):not(.x-table--tr-checked):hover .x-table--td.x-table-col-fixed-right::before,
.x-table-hover .x-table--tr-drag .x-table--td.x-table-col-fixed-left::before,
.x-table-hover .x-table--tr-drag .x-table--td.x-table-col-fixed-right::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--x-table-color-bg-body-row_hover);
  content: "";
}
.x-table-hover .x-table--tr-expand:not(.x-table--tr-empty):hover .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right) {
  background-color: var(--x-table-color-bg-expand-content_hover);
}
.x-table--tr-expand .x-table--td .x-table-hover .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-checked) .x-table--td:not(.x-table-col-fixed-left):not(.x-table-col-fixed-right) {
  background-color: var(--x-color-transparent);
}
.x-table--tr-expand .x-table--td .x-table-hover .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-checked) .x-table--td.x-table-col-fixed-left::before,
.x-table--tr-expand .x-table--td .x-table-hover .x-table--tr:not(.x-table--tr-empty):not(.x-table--tr-checked) .x-table--td.x-table-col-fixed-right::before {
  background-color: var(--x-color-transparent);
}
.x-table--tfoot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  overflow-x: auto;
  background-color: var(--x-table-color-bg-tfoot);
  border-top: var(--x-table-border-width) var(--x-table-border-style) var(--x-table-color-border);
  box-shadow: none;
  scrollbar-color: var(--x-color-transparent) var(--x-color-transparent);
}
.x-table--tfoot::-webkit-scrollbar {
  height: 0;
  background-color: var(--x-color-transparent);
}
.x-table tfoot .x-table--td {
  background-color: var(--x-table-color-bg-tfoot);
}
.x-table.x-table-type-selection .x-table--tr-checked > .x-table--td {
  background-color: var(--x-table-color-bg-body-row_active);
}
.x-table.x-table-type-selection .x-table--tr-checked > .x-table--td::before {
  background-color: var(--x-color-transparent);
}
.x-table .x-table--cell {
  padding: var(--x-table-size-large-padding-vertical) var(--x-table-size-large-padding-horizontal);
}
.x-table .x-table--th {
  font-size: var(--x-table-size-large-font-header-size);
}
.x-table .x-table--td {
  font-size: var(--x-table-size-large-font-size);
}
.x-table .x-table--footer {
  padding: var(--x-table-size-large-padding-vertical) var(--x-table-size-large-padding-horizontal);
}
.x-table .x-table--tr-expand .x-table--td .x-table {
  margin: calc(-1 * var(--x-table-size-large-padding-vertical)) calc(-1 * var(--x-table-size-large-padding-horizontal)) calc(-1 * var(--x-table-size-large-padding-vertical) - var(--x-table-border-width)) calc(-1 * var(--x-table-size-large-padding-horizontal));
}
.x-table-size-medium .x-table--cell {
  padding: var(--x-table-size-medium-padding-vertical) var(--x-table-size-medium-padding-horizontal);
}
.x-table-size-medium .x-table--th {
  font-size: var(--x-table-size-medium-font-header-size);
}
.x-table-size-medium .x-table--td {
  font-size: var(--x-table-size-medium-font-size);
}
.x-table-size-medium .x-table--footer {
  padding: var(--x-table-size-medium-padding-vertical) var(--x-table-size-medium-padding-horizontal);
}
.x-table-size-medium .x-table--tr-expand .x-table--td .x-table {
  margin: calc(-1 * var(--x-table-size-medium-padding-vertical)) calc(-1 * var(--x-table-size-medium-padding-horizontal)) calc(-1 * var(--x-table-size-medium-padding-vertical) - var(--x-table-border-width)) calc(-1 * var(--x-table-size-medium-padding-horizontal));
}
.x-table-size-small .x-table--cell {
  padding: var(--x-table-size-small-padding-vertical) var(--x-table-size-small-padding-horizontal);
}
.x-table-size-small .x-table--th {
  font-size: var(--x-table-size-small-font-header-size);
}
.x-table-size-small .x-table--td {
  font-size: var(--x-table-size-small-font-size);
}
.x-table-size-small .x-table--footer {
  padding: var(--x-table-size-small-padding-vertical) var(--x-table-size-small-padding-horizontal);
}
.x-table-size-small .x-table--tr-expand .x-table--td .x-table {
  margin: calc(-1 * var(--x-table-size-small-padding-vertical)) calc(-1 * var(--x-table-size-small-padding-horizontal)) calc(-1 * var(--x-table-size-small-padding-vertical) - var(--x-table-border-width)) calc(-1 * var(--x-table-size-small-padding-horizontal));
}
.x-table-size-mini .x-table--cell {
  padding: var(--x-table-size-mini-padding-vertical) var(--x-table-size-mini-padding-horizontal);
}
.x-table-size-mini .x-table--th {
  font-size: var(--x-table-size-mini-font-header-size);
}
.x-table-size-mini .x-table--td {
  font-size: var(--x-table-size-mini-font-size);
}
.x-table-size-mini .x-table--footer {
  padding: var(--x-table-size-mini-padding-vertical) var(--x-table-size-mini-padding-horizontal);
}
.x-table-size-mini .x-table--tr-expand .x-table--td .x-table {
  margin: calc(-1 * var(--x-table-size-mini-padding-vertical)) calc(-1 * var(--x-table-size-mini-padding-horizontal)) calc(-1 * var(--x-table-size-mini-padding-vertical) - var(--x-table-border-width)) calc(-1 * var(--x-table-size-mini-padding-horizontal));
}
.x-table-virtualized .x-table--element {
  table-layout: fixed;
}
.x-table-virtualized .x-table--body .x-table--tr {
  display: flex;
}
.x-table-virtualized .x-table--body .x-table--td {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
}
.x-table-virtualized .x-table--body .x-table--td > .x-table--cell {
  width: 100%;
  min-width: 0;
}
.x-table-virtualized .x-table--body .x-table--tr-expand > .x-table--td, .x-table-virtualized .x-table--body .x-table--tr-empty > .x-table--td {
  width: 100%;
}
.x-table .x-table--header-sticky {
  position: sticky;
}
.x-table-virtualized .x-virtual-list > .x-table--element {
  display: block;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .x-table .x-table--th,
  .x-table .x-table--td,
  .x-table .x-table--expand-btn,
  .x-table .x-table--sorter--icon .x-icon,
  .x-table .x-table--filters,
  .x-table .x-table--filters::before,
  .x-table .x-table-col-fixed-left-last::after,
  .x-table .x-table-col-fixed-right-first::after,
  .x-table .x-table--container::before,
  .x-table .x-table--container::after {
    transition: none;
  }
}

.x-table-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--x-spacing-4);
  justify-content: flex-end;
  margin-top: var(--x-table-spacing-pagination-margin);
}
.x-table-pagination > * {
  flex: none;
}
.x-table-pagination-left {
  justify-content: flex-start;
}
.x-table-pagination-center {
  justify-content: center;
}
.x-table-pagination-top {
  margin-top: 0;
  margin-bottom: var(--x-table-spacing-pagination-margin);
}

:root {
  --x-tabs-color-text: var(--x-color-text-2);
  --x-tabs-color-text-hover: var(--x-color-text-1);
  --x-tabs-color-text-active: var(--x-color-primary-6);
  --x-tabs-color-text-disabled: var(--x-color-text-4);
  --x-tabs-color-border: var(--x-color-neutral-3);
  --x-tabs-color-bg: var(--x-color-bg-white);
  --x-tabs-color-fill: var(--x-color-fill-1);
  --x-tabs-color-fill-hover: var(--x-color-fill-2);
  --x-tabs-color-fill-active: var(--x-color-primary-light-1);
  --x-tabs-color-focus: var(--x-color-primary-6);
  --x-tabs-content-padding: var(--x-spacing-7);
  --x-tabs-border-radius: var(--x-border-radius-small);
  --x-tabs-transition-duration: var(--x-transition-duration-2);
  --x-tabs-transition-timing: var(--x-transition-timing-function-standard);
}

.x-tabs {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: var(--x-tabs-color-text);
}
.x-tabs-horizontal, .x-tabs-justify {
  display: flex;
  flex-direction: column;
}
.x-tabs-vertical {
  display: flex;
  /*
   * 显式声明行方向，覆盖上方 `&-justify` 的 column。
   *
   * justify 与 vertical 可同时出现（`.x-tabs-vertical.x-tabs-justify`），
   * 此时若沿用 column 会把导航与内容上下堆叠。本规则在 `&-justify`
   * 之后、同特异性，按源码顺序胜出。
   */
  flex-direction: row;
  align-items: stretch;
}
.x-tabs-vertical > .x-tabs--content {
  flex: 1;
  min-width: 0;
  padding-top: 0;
}
.x-tabs {
  /*
   * 垂直布局的内容区留白（对齐 Arco vertical.less）。
   * 导航在左则内容左侧留白，导航在右则内容右侧留白——方向相反。
   * 注意必须写成 `&-vertical.x-tabs-left`（`&` 只能在复合选择器开头），
   * 不能用 `&-vertical&-left`。
   */
}
.x-tabs-vertical.x-tabs-left > .x-tabs--content {
  padding-left: var(--x-tabs-content-padding);
}
.x-tabs-vertical.x-tabs-right > .x-tabs--content {
  padding-right: var(--x-tabs-content-padding);
}
.x-tabs-right {
  flex-direction: row-reverse;
}
.x-tabs-bottom > .x-tabs--content {
  padding-top: 0;
  padding-bottom: var(--x-tabs-content-padding);
}
.x-tabs-justify {
  height: 100%;
}
.x-tabs-justify .x-tabs--content,
.x-tabs-justify .x-tabs--content--list,
.x-tabs-justify .x-tabs--pane {
  height: 100%;
}
.x-tabs--content {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--x-tabs-content-padding);
  overflow: hidden;
}
.x-tabs--content-hide {
  display: none;
}

.x-tabs--content--list {
  display: flex;
  width: 100%;
}
.x-tabs--content--list-animation {
  transition: margin var(--x-tabs-transition-duration) var(--x-tabs-transition-timing);
}

.x-tabs--content--item {
  flex-shrink: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
}
.x-tabs--content--item-active {
  height: auto;
  overflow: visible;
}

.x-tabs--pane {
  box-sizing: border-box;
  width: 100%;
}

.x-tabs-type-card > .x-tabs--content, .x-tabs-type-card-gutter > .x-tabs--content {
  padding: var(--x-tabs-content-padding);
  border: 1px solid var(--x-tabs-color-border);
  border-top: none;
}
.x-tabs-type-card.x-tabs-bottom > .x-tabs--content, .x-tabs-type-card-gutter.x-tabs-bottom > .x-tabs--content {
  border-top: 1px solid var(--x-tabs-color-border);
  border-bottom: none;
}
.x-tabs-type-card.x-tabs-left > .x-tabs--content, .x-tabs-type-card-gutter.x-tabs-left > .x-tabs--content {
  border-top: 1px solid var(--x-tabs-color-border);
  border-left: none;
}
.x-tabs-type-card.x-tabs-right > .x-tabs--content, .x-tabs-type-card-gutter.x-tabs-right > .x-tabs--content {
  border-top: 1px solid var(--x-tabs-color-border);
  border-right: none;
}

.x-tabs--nav {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.x-tabs--nav::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background-color: var(--x-tabs-color-border);
  content: "";
}
.x-tabs--nav-bottom::before {
  top: 0;
  bottom: auto;
}
.x-tabs--nav-vertical {
  flex-direction: column;
  align-items: stretch;
}
.x-tabs--nav-vertical::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 1px;
  height: auto;
}
.x-tabs--nav-right::before {
  right: auto;
  left: 0;
}
.x-tabs--nav--tab {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.x-tabs--nav--tab-scroll {
  flex: 1 1 auto;
}

.x-tabs--nav--tab--list {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  transition: transform var(--x-tabs-transition-duration) var(--x-tabs-transition-timing);
}

.x-tabs--nav-vertical .x-tabs--nav--tab {
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.x-tabs--nav-vertical .x-tabs--nav--tab--list {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.x-tabs--nav--extra {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--x-spacing-3);
  min-width: 0;
}

.x-tabs--nav--add-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--x-size-8);
  height: var(--x-size-8);
  color: var(--x-tabs-color-text);
  cursor: pointer;
}
.x-tabs--nav--add-btn:hover {
  color: var(--x-tabs-color-text-active);
}

.x-tabs--nav-type-text::before, .x-tabs--nav-type-rounded::before, .x-tabs--nav-type-capsule::before {
  display: none;
}

.x-tabs--tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: var(--x-tabs-tab-height);
  padding: 0 var(--x-tabs-tab-padding-x);
  color: var(--x-tabs-color-text);
  font-size: var(--x-tabs-tab-font-size);
  line-height: 1.5715;
  outline: none;
  cursor: pointer;
  transition: color var(--x-tabs-transition-duration) var(--x-transition-timing-function-linear), background-color var(--x-tabs-transition-duration) var(--x-transition-timing-function-linear), border-color var(--x-tabs-transition-duration) var(--x-transition-timing-function-linear);
}
.x-tabs--tab--title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.x-tabs--tab--close-btn {
  display: inline-flex;
  margin-left: var(--x-spacing-2);
  color: inherit;
  cursor: pointer;
}

.x-tabs--tab:hover {
  color: var(--x-tabs-color-text-hover);
}
.x-tabs--tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--x-tabs-color-focus);
}
.x-tabs--tab-active, .x-tabs--tab-active:hover {
  color: var(--x-tabs-color-text-active);
  font-weight: var(--x-font-weight-500);
}
.x-tabs--tab-disabled, .x-tabs--tab-disabled:hover {
  color: var(--x-tabs-color-text-disabled);
  cursor: not-allowed;
}

.x-tabs--nav-size-mini {
  --x-tabs-tab-height: 28px;
  --x-tabs-tab-font-size: var(--x-font-size-body-1);
  --x-tabs-tab-padding-x: var(--x-spacing-4);
  --x-tabs-tab-gap: var(--x-spacing-3);
}

.x-tabs--nav-size-small {
  --x-tabs-tab-height: 32px;
  --x-tabs-tab-font-size: var(--x-font-size-body-3);
  --x-tabs-tab-padding-x: var(--x-spacing-5);
  --x-tabs-tab-gap: var(--x-spacing-4);
}

.x-tabs--nav-size-medium {
  --x-tabs-tab-height: 36px;
  --x-tabs-tab-font-size: var(--x-font-size-body-3);
  --x-tabs-tab-padding-x: var(--x-spacing-6);
  --x-tabs-tab-gap: var(--x-spacing-5);
}

.x-tabs--nav-size-large {
  --x-tabs-tab-height: 44px;
  --x-tabs-tab-font-size: var(--x-font-size-title-1);
  --x-tabs-tab-padding-x: var(--x-spacing-7);
  --x-tabs-tab-gap: var(--x-spacing-6);
}

.x-tabs--nav-type-line .x-tabs--nav--tab--list {
  gap: var(--x-tabs-tab-gap);
}
.x-tabs--nav-type-line .x-tabs--nav--tab--list-no-padding .x-tabs--tab:first-child {
  padding-left: 0;
}

.x-tabs--nav-type-card .x-tabs--tab,
.x-tabs--nav-type-card-gutter .x-tabs--tab {
  background-color: var(--x-tabs-color-bg);
  border: 1px solid var(--x-tabs-color-border);
}
.x-tabs--nav-type-card .x-tabs--tab:hover,
.x-tabs--nav-type-card-gutter .x-tabs--tab:hover {
  background-color: var(--x-tabs-color-fill-hover);
}
.x-tabs--nav-type-card .x-tabs--tab-active,
.x-tabs--nav-type-card .x-tabs--tab-active:hover,
.x-tabs--nav-type-card-gutter .x-tabs--tab-active,
.x-tabs--nav-type-card-gutter .x-tabs--tab-active:hover {
  background-color: var(--x-tabs-color-bg);
  border-bottom-color: var(--x-tabs-color-bg);
  z-index: 1;
}
.x-tabs--nav-type-card .x-tabs--tab-disabled,
.x-tabs--nav-type-card .x-tabs--tab-disabled:hover,
.x-tabs--nav-type-card-gutter .x-tabs--tab-disabled,
.x-tabs--nav-type-card-gutter .x-tabs--tab-disabled:hover {
  background-color: var(--x-tabs-color-fill);
}

.x-tabs--nav-type-card .x-tabs--tab:not(:last-child) {
  border-right: none;
}
.x-tabs--nav-type-card .x-tabs--tab:first-child {
  border-top-left-radius: var(--x-tabs-border-radius);
}
.x-tabs--nav-type-card .x-tabs--tab:last-child {
  border-top-right-radius: var(--x-tabs-border-radius);
}

.x-tabs--nav-type-card-gutter .x-tabs--nav--tab--list {
  gap: var(--x-spacing-2);
}
.x-tabs--nav-type-card-gutter .x-tabs--tab {
  border-radius: var(--x-tabs-border-radius) var(--x-tabs-border-radius) 0 0;
}

.x-tabs--nav-bottom {
  /*
   * 导航在内容下方时，分隔线已移到导航上沿（`&-bottom::before { top: 0 }`），
   * 但 ink 仍画在 bottom:0（页面最底边），与分隔线隔着一整个 tab 高度。
   * 这里把 ink 一并移到上沿，与 line 类型的分隔线对齐。
   */
}
.x-tabs--nav-bottom .x-tabs--nav--ink {
  top: 0;
  bottom: auto;
}
.x-tabs--nav-bottom.x-tabs--nav-type-card, .x-tabs--nav-bottom.x-tabs--nav-type-card-gutter {
  margin-top: -1px;
}
.x-tabs--nav-bottom.x-tabs--nav-type-card .x-tabs--tab, .x-tabs--nav-bottom.x-tabs--nav-type-card-gutter .x-tabs--tab {
  border-radius: 0 0 var(--x-tabs-border-radius) var(--x-tabs-border-radius);
}
.x-tabs--nav-bottom.x-tabs--nav-type-card .x-tabs--tab-active,
.x-tabs--nav-bottom.x-tabs--nav-type-card .x-tabs--tab-active:hover, .x-tabs--nav-bottom.x-tabs--nav-type-card-gutter .x-tabs--tab-active,
.x-tabs--nav-bottom.x-tabs--nav-type-card-gutter .x-tabs--tab-active:hover {
  border-top-color: var(--x-tabs-color-bg);
  border-bottom-color: var(--x-tabs-color-border);
}

.x-tabs--nav-left.x-tabs--nav-type-card, .x-tabs--nav-left.x-tabs--nav-type-card-gutter,
.x-tabs--nav-right.x-tabs--nav-type-card,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter {
  height: auto;
}
.x-tabs--nav-left.x-tabs--nav-type-card::before, .x-tabs--nav-left.x-tabs--nav-type-card-gutter::before,
.x-tabs--nav-right.x-tabs--nav-type-card::before,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter::before {
  display: none;
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab, .x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--tab,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab {
  width: 100%;
  border-radius: var(--x-tabs-border-radius) 0 0 var(--x-tabs-border-radius);
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab-active,
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab-active:hover, .x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--tab-active,
.x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--tab-active:hover,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab-active,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab-active:hover,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab-active,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab-active:hover {
  border-right-color: var(--x-tabs-color-bg);
  border-bottom-color: var(--x-tabs-color-border);
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab:not(:last-child),
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab:not(:last-child) {
  border-right: 1px solid var(--x-tabs-color-border);
  border-bottom: none;
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab:first-child,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab:first-child {
  border-radius: var(--x-tabs-border-radius) 0 0 0;
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab:last-child,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab:last-child {
  border-radius: 0 0 0 var(--x-tabs-border-radius);
}
.x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--nav--tab--list,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--nav--tab--list {
  gap: var(--x-spacing-2);
}

.x-tabs--nav-left.x-tabs--nav-type-card, .x-tabs--nav-left.x-tabs--nav-type-card-gutter {
  margin-right: -1px;
}
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab.x-tabs--tab-active,
.x-tabs--nav-left.x-tabs--nav-type-card .x-tabs--tab.x-tabs--tab-active:hover, .x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--tab.x-tabs--tab-active,
.x-tabs--nav-left.x-tabs--nav-type-card-gutter .x-tabs--tab.x-tabs--tab-active:hover {
  border-right-color: var(--x-tabs-color-bg);
}

.x-tabs--nav-right.x-tabs--nav-type-card, .x-tabs--nav-right.x-tabs--nav-type-card-gutter {
  margin-left: -1px;
}
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab, .x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab {
  border-radius: 0 var(--x-tabs-border-radius) var(--x-tabs-border-radius) 0;
}
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab-active,
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab-active:hover, .x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab-active,
.x-tabs--nav-right.x-tabs--nav-type-card-gutter .x-tabs--tab-active:hover {
  border-right-color: var(--x-tabs-color-border);
  border-left-color: var(--x-tabs-color-bg);
}
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab:first-child {
  border-radius: 0 var(--x-tabs-border-radius) 0 0;
}
.x-tabs--nav-right.x-tabs--nav-type-card .x-tabs--tab:last-child {
  border-radius: 0 0 var(--x-tabs-border-radius) 0;
}

.x-tabs--nav-type-text .x-tabs--nav--tab--list {
  gap: var(--x-tabs-tab-gap);
}
.x-tabs--nav-type-text .x-tabs--tab {
  height: auto;
  min-height: var(--x-tabs-tab-height);
  padding: 0;
}
.x-tabs--nav-type-text .x-tabs--tab:not(:first-child)::before {
  width: 1px;
  height: 0.8em;
  margin-right: var(--x-tabs-tab-gap);
  background-color: var(--x-tabs-color-border);
  content: "";
}
.x-tabs--nav-type-text .x-tabs--tab--title {
  padding: var(--x-spacing-1) var(--x-tabs-tab-padding-x);
  border-radius: var(--x-tabs-border-radius);
}
.x-tabs--nav-type-text .x-tabs--tab:hover .x-tabs--tab--title,
.x-tabs--nav-type-text .x-tabs--tab-active .x-tabs--tab--title {
  background-color: var(--x-tabs-color-fill-active);
}

.x-tabs--nav-type-rounded .x-tabs--nav--tab--list {
  gap: var(--x-tabs-tab-gap);
}
.x-tabs--nav-type-rounded .x-tabs--tab {
  background-color: var(--x-tabs-color-fill);
  border-radius: 999px;
}
.x-tabs--nav-type-rounded .x-tabs--tab:hover {
  background-color: var(--x-tabs-color-fill-hover);
}
.x-tabs--nav-type-rounded .x-tabs--tab-active,
.x-tabs--nav-type-rounded .x-tabs--tab-active:hover {
  background-color: var(--x-tabs-color-fill-active);
}

.x-tabs--nav-type-capsule .x-tabs--nav--tab--list {
  gap: var(--x-spacing-1);
  padding: var(--x-spacing-1);
  background-color: var(--x-tabs-color-fill);
  border-radius: 999px;
}
.x-tabs--nav-type-capsule .x-tabs--tab {
  border-radius: 999px;
}
.x-tabs--nav-type-capsule .x-tabs--tab:hover {
  background-color: var(--x-tabs-color-fill-hover);
}
.x-tabs--nav-type-capsule .x-tabs--tab-active,
.x-tabs--nav-type-capsule .x-tabs--tab-active:hover {
  background-color: var(--x-tabs-color-bg);
  box-shadow: var(--x-shadow-special);
}

.x-tabs--nav-vertical .x-tabs--tab {
  justify-content: flex-start;
  width: 100%;
}
.x-tabs--nav-vertical {
  /*
   * 垂直 line 类型的标签：上下留间距、左右给足水平内边距。
   *
   * 对齐 Arco vertical.less：tab 之间用 margin-top 分隔（首个不加），
   * 水平内边距比水平布局更宽（Arco 用 spacing-8）。原实现只把 list 的
   * gap 置 0，既没有间距也没有垂直专用 padding，标签上下紧贴且左右过窄。
   */
}
.x-tabs--nav-vertical.x-tabs--nav-type-line .x-tabs--nav--tab--list {
  gap: 0;
}
.x-tabs--nav-vertical.x-tabs--nav-type-line .x-tabs--tab {
  padding: 0 var(--x-spacing-8);
  margin-top: var(--x-spacing-6);
}
.x-tabs--nav-vertical.x-tabs--nav-type-line .x-tabs--tab:first-of-type {
  margin-top: 0;
}
.x-tabs--nav-vertical {
  /* 垂直滚动时轨道上下留白，避免贴边 */
}
.x-tabs--nav-vertical .x-tabs--nav--tab-list-overflow-scroll {
  padding: var(--x-spacing-3) 0;
}
.x-tabs--nav-vertical {
  /* 新增按钮在垂直布局下不再用固定方块，跟随标签宽度 */
}
.x-tabs--nav-vertical .x-tabs--nav--add-btn {
  height: auto;
  padding: 0 var(--x-spacing-7);
  margin-top: var(--x-spacing-6);
}

.x-tabs--nav--ink {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--x-tabs-color-text-active);
  border-radius: var(--x-border-radius-small);
  transition: top var(--x-tabs-transition-duration) var(--x-tabs-transition-timing), left var(--x-tabs-transition-duration) var(--x-tabs-transition-timing), width var(--x-tabs-transition-duration) var(--x-tabs-transition-timing), height var(--x-tabs-transition-duration) var(--x-tabs-transition-timing);
}
.x-tabs--nav--ink-disabled {
  background-color: var(--x-tabs-color-text-disabled);
}

.x-tabs--nav-vertical .x-tabs--nav--ink {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 2px;
  height: auto;
}

.x-tabs--nav-right .x-tabs--nav--ink {
  right: auto;
  left: 0;
}

.x-tabs-nav-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--x-size-8);
  height: var(--x-size-8);
  color: var(--x-tabs-color-text);
  cursor: pointer;
  user-select: none;
}
.x-tabs-nav-button-left {
  margin-right: var(--x-spacing-3);
  margin-left: var(--x-spacing-6);
}
.x-tabs-nav-button-right {
  margin-right: var(--x-spacing-6);
  margin-left: var(--x-spacing-3);
}
.x-tabs-nav-button-up {
  margin-bottom: var(--x-spacing-6);
}
.x-tabs-nav-button-down {
  margin-top: var(--x-spacing-6);
}
.x-tabs-nav-button:hover {
  color: var(--x-tabs-color-text-active);
}
.x-tabs-nav-button-disabled, .x-tabs-nav-button-disabled:hover {
  color: var(--x-tabs-color-text-disabled);
  cursor: not-allowed;
}

:root {
  --x-time-picker-panel-bg: var(--x-color-bg-popup);
  --x-time-picker-panel-border: var(--x-color-transparent);
  --x-time-picker-column-border: var(--x-color-transparent);
  --x-time-picker-footer-border: var(--x-split-color);
  --x-time-picker-panel-radius: var(--x-border-radius-medium);
  --x-time-picker-panel-shadow: var(--x-picker-panel-shadow);
  /*
   * 面板宽度按可见列数自适应。
   *
   * 可见列由 format 决定（`getVisibleColumns`）：默认 `HH:mm:ss` 为 3 列，
   * 12 小时制 `h:mm:ss A` 为 4 列。原先写死 180px（=3 列）且 overflow: hidden，
   * 12 小时制下 4 列被压到 44.5px、末列溢出裁切。
   *
   * 注意：宽度不能在 :root 里用 calc 引用 count 变量——根层会提前求值成
   * `calc(60px * 3)` 字面量，面板内覆盖 count 不再生效。故此处只声明
   * 列宽与默认列数，宽度 calc 放在实际使用该变量的选择器里（见 index.scss
   * 的 --panel / --range-panel）。
   */
  --x-time-picker-column-width: 60px;
  /* 可见列数默认值；TimePanel / TimeRangePanel 会按 format 在元素上覆盖 */
  --x-time-picker-column-count: 3;
  --x-time-picker-range-column-count: 3;
  --x-time-picker-column-height: 196px;
  --x-time-picker-cell-height: 26px;
  --x-time-picker-cell-padding: 0 6px;
  --x-time-picker-cell-color: var(--x-color-text-2);
  --x-time-picker-cell-color-hover: var(--x-color-text-1);
  --x-time-picker-cell-bg-hover: var(--x-color-fill-1);
  --x-time-picker-cell-bg-selected: var(--x-color-primary-light-1);
  --x-time-picker-cell-color-selected: var(--x-color-primary-text);
  --x-time-picker-cell-color-disabled: var(--x-color-text-4);
  --x-time-picker-confirm-color: var(--x-color-primary-text);
  --x-time-picker-confirm-bg-hover: var(--x-color-primary-light-1);
  /*
   * 时间格字号与同类浮层对齐：原为 body-2（13px），
   * 偏离 Select / Dropdown 弹层的 body-3（14px），也低于 Arco 时间格（14px）。
   */
  --x-time-picker-font-size: var(--x-font-size-body-3);
  --x-time-picker-action-font-size: var(--x-font-size-body-3);
  --x-time-picker-now-color: var(--x-color-text-3);
  --x-time-picker-column-scrollbar-thumb-bg: var(--x-picker-column-scrollbar-thumb-bg);
}

.x-time-picker {
  width: 194px;
}
.x-time-picker-range {
  width: 252px;
}
.x-time-picker--popup {
  line-height: var(--x-line-height-base);
}

.x-time-picker--panel {
  /* 宽度在使用处按列数计算，使面板内覆盖的 count 变量能生效 */
  width: calc(var(--x-time-picker-column-width) * var(--x-time-picker-column-count, 3));
  overflow: hidden;
  color: var(--x-time-picker-cell-color);
  font-size: var(--x-time-picker-font-size);
  background: var(--x-time-picker-panel-bg);
  border: 1px solid var(--x-time-picker-panel-border);
  border-radius: var(--x-time-picker-panel-radius);
  box-shadow: var(--x-time-picker-panel-shadow);
}

.x-time-picker--range-panel {
  /* 两侧各按自己的列数计算，12 小时制为 4 列 / 侧 */
  width: calc(var(--x-time-picker-column-width) * var(--x-time-picker-range-column-count, 3) * 2);
  min-width: calc(var(--x-time-picker-column-width) * var(--x-time-picker-range-column-count, 3) * 2);
  overflow: hidden;
  color: var(--x-time-picker-cell-color);
  font-size: var(--x-time-picker-font-size);
  background: var(--x-time-picker-panel-bg);
  border: 1px solid var(--x-time-picker-panel-border);
  border-radius: var(--x-time-picker-panel-radius);
  box-shadow: var(--x-time-picker-panel-shadow);
}
.x-time-picker--range-panel .x-time-picker--panel {
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.x-time-picker--range-body {
  display: flex;
  align-items: stretch;
  background: var(--x-time-picker-panel-bg);
}

.x-time-picker--range-section {
  flex: 0 0 auto;
  min-width: 0;
  border-right: 1px solid var(--x-time-picker-column-border);
}
.x-time-picker--range-section:last-child {
  border-right: none;
}
.x-time-picker--range-section.x-time-picker-is-active .x-time-picker--range-header {
  background: var(--x-time-picker-cell-bg-selected);
}
.x-time-picker--range-section.x-time-picker-is-active .x-time-picker--range-header span,
.x-time-picker--range-section.x-time-picker-is-active .x-time-picker--range-header strong {
  color: var(--x-time-picker-cell-color-selected);
}

.x-time-picker--range-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
  padding: 9px 12px;
  color: var(--x-color-text-3);
  background: var(--x-time-picker-panel-bg);
}
.x-time-picker--range-header span {
  font-size: var(--x-font-size-body-1);
}
.x-time-picker--range-header strong {
  color: var(--x-color-text-1);
  font-size: var(--x-time-picker-font-size);
  font-weight: 500;
}

.x-time-picker--columns {
  display: flex;
  align-items: stretch;
  background: var(--x-time-picker-panel-bg);
}

.x-time-picker--column {
  box-sizing: border-box;
  width: var(--x-time-picker-column-width);
  height: var(--x-time-picker-column-height);
  padding: 6px 0;
  overflow: hidden;
  border-right: none;
  outline: none;
}
.x-time-picker--column:last-child {
  border-right: none;
}
.x-time-picker--column:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: -2px;
}

.x-time-picker--column-scrollbar {
  height: 100%;
}
.x-time-picker--column-scrollbar .x-scrollbar--container {
  height: 100%;
}
.x-time-picker--column-scrollbar .x-scrollbar--thumb-direction-vertical .x-scrollbar--thumb--bar {
  width: 6px;
  background-color: var(--x-time-picker-column-scrollbar-thumb-bg);
}

.x-time-picker--column-list {
  box-sizing: border-box;
  min-height: 100%;
  padding: 2px 0 4px;
}

.x-time-picker--cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 20px);
  height: var(--x-time-picker-cell-height);
  margin: 1px 10px;
  padding: var(--x-time-picker-cell-padding);
  color: var(--x-time-picker-cell-color);
  font: inherit;
  font-size: var(--x-time-picker-font-size);
  background: var(--x-color-transparent);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--x-transition-duration-1) var(--x-transition-timing-function-linear), background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-time-picker--cell:hover, .x-time-picker--cell:focus-visible {
  color: var(--x-time-picker-cell-color-hover);
  background: var(--x-time-picker-cell-bg-hover);
  outline: none;
}
.x-time-picker--cell.x-time-picker-is-selected {
  color: var(--x-time-picker-cell-color-selected);
  font-weight: 400;
  background: var(--x-time-picker-cell-bg-selected);
}
.x-time-picker--cell.x-time-picker-is-disabled, .x-time-picker--cell:disabled {
  color: var(--x-time-picker-cell-color-disabled);
  background: var(--x-color-transparent);
  cursor: not-allowed;
}

.x-time-picker--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 4px 8px;
  background: var(--x-time-picker-panel-bg);
  border-top: 1px solid var(--x-time-picker-footer-border);
}
.x-time-picker--footer .x-button {
  --x-button-mini-height: 22px;
  --x-button-mini-font-size: var(--x-time-picker-action-font-size);
  --x-button-border-radius: 3px;
  --x-button-background-color: var(--x-color-transparent);
  --x-button-border-color: var(--x-color-transparent);
  --x-button-font-weight: 400;
  min-width: 28px;
  line-height: 1;
}
.x-time-picker--footer .x-button::before {
  display: none;
}
.x-time-picker--footer .x-button:not(.x-button-is-disabled):not(:disabled):hover {
  --x-button-background-color: var(--x-color-fill-1);
}

.x-time-picker--footer-left {
  display: inline-flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.x-time-picker--extra {
  flex: 1;
  min-width: 0;
  color: var(--x-color-text-3);
  font-size: var(--x-font-size-body-1);
}

.x-time-picker--now {
  color: var(--x-time-picker-now-color);
  font-size: var(--x-time-picker-action-font-size);
}

.x-time-picker--confirm {
  color: var(--x-time-picker-confirm-color);
  font-size: var(--x-time-picker-action-font-size);
}

.x-time-range-selector {
  --x-time-range-selector-color: var(
    --x-time-range-selector-color-default,
    var(--x-color-primary-6)
  );
  --x-time-range-selector-grid-height: 64px;
  --x-time-range-selector-grid-border: var(
    --x-time-range-selector-grid-border-default,
    var(--x-color-border-subtle)
  );
  --x-time-range-selector-grid-radius: var(--x-border-radius-medium);
  --x-time-range-selector-grid-shadow: var(
    --x-time-range-selector-grid-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-track-inset-block: 16px;
  --x-time-range-selector-track-bg: var(
    --x-time-range-selector-track-bg-default,
    var(--x-color-fill-2)
  );
  --x-time-range-selector-track-border: var(
    --x-time-range-selector-track-border-default,
    var(--x-color-border-subtle)
  );
  --x-time-range-selector-track-radius: 0;
  --x-time-range-selector-track-shadow: var(
    --x-time-range-selector-track-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-grid-bg: var(
    --x-time-range-selector-grid-bg-default,
    var(--x-color-bg-white)
  );
  --x-time-range-selector-range-top: 12px;
  --x-time-range-selector-range-height: 40px;
  --x-time-range-selector-range-radius: var(--x-border-radius-medium);
  --x-time-range-selector-range-bg: var(
    --x-time-range-selector-range-bg-default,
    var(--x-time-range-selector-color)
  );
  --x-time-range-selector-range-border: var(
    --x-time-range-selector-range-border-default,
    var(--x-time-range-selector-color)
  );
  --x-time-range-selector-range-shadow: var(
    --x-time-range-selector-range-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-range-shadow-hover: var(
    --x-time-range-selector-range-shadow-hover-default,
    var(--x-time-range-selector-range-shadow)
  );
  --x-time-range-selector-range-shadow-dragging: var(
    --x-time-range-selector-range-shadow-dragging-default,
    var(--x-time-range-selector-range-shadow-hover)
  );
  --x-time-range-selector-disabled-inset-block: var(--x-time-range-selector-track-inset-block);
  --x-time-range-selector-disabled-bg: var(
    --x-time-range-selector-disabled-bg-default,
    var(--x-color-fill-3)
  );
  --x-time-range-selector-disabled-border: var(
    --x-time-range-selector-disabled-border-default,
    var(--x-color-border-subtle)
  );
  --x-time-range-selector-disabled-shadow: var(
    --x-time-range-selector-disabled-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-disabled-radius: var(--x-border-radius-small);
  --x-time-range-selector-block-alternate-bg: var(
    --x-time-range-selector-block-alternate-bg-default,
    var(--x-color-transparent)
  );
  --x-time-range-selector-tick-bottom: 13px;
  --x-time-range-selector-tick-height: 8px;
  --x-time-range-selector-tick-color: var(
    --x-time-range-selector-tick-color-default,
    var(--x-color-border-subtle)
  );
  --x-time-range-selector-edge-bg: var(
    --x-time-range-selector-edge-bg-default,
    var(--x-color-bg-surface)
  );
  --x-time-range-selector-edge-shadow: var(
    --x-time-range-selector-edge-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-edge-shadow-hover: var(
    --x-time-range-selector-edge-shadow-hover-default,
    var(--x-time-range-selector-edge-shadow)
  );
  --x-time-range-selector-label-color: var(--x-color-white);
  --x-time-range-selector-label-shadow: var(
    --x-time-range-selector-label-shadow-default,
    var(--x-shadow-none)
  );
  --x-time-range-selector-legend-color: var(--x-color-text-3);
  width: 100%;
  container-type: inline-size;
}
.x-time-range-selector.x-time-range-selector-is-disabled {
  opacity: 0.5;
}
.x-time-range-selector.x-time-range-selector-is-disabled .x-time-range-selector--grid,
.x-time-range-selector.x-time-range-selector-is-disabled .x-time-range-selector--range,
.x-time-range-selector.x-time-range-selector-is-disabled .x-time-range-selector--edge {
  cursor: not-allowed;
}
.x-time-range-selector.x-time-range-selector-is-readonly .x-time-range-selector--grid,
.x-time-range-selector.x-time-range-selector-is-readonly .x-time-range-selector--range,
.x-time-range-selector.x-time-range-selector-is-readonly .x-time-range-selector--edge {
  cursor: default;
}
.x-time-range-selector.x-time-range-selector-is-error {
  --x-time-range-selector-grid-border: var(--x-color-danger-6);
}
.x-time-range-selector--instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.x-time-range-selector--keyboard-cursor {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  box-sizing: border-box;
  border: 2px solid var(--x-color-primary-6);
  visibility: hidden;
  pointer-events: none;
}

.x-time-range-selector .x-time-range-selector--grid:focus-visible .x-time-range-selector--keyboard-cursor {
  visibility: visible;
}
.x-time-range-selector .x-time-range-selector--grid:focus-visible,
.x-time-range-selector .x-time-range-selector--range:focus-visible {
  outline: 2px solid var(--x-color-primary-text);
  outline-offset: -2px;
}
.x-time-range-selector-scene-schedule {
  --x-time-range-selector-grid-height: 52px;
  --x-time-range-selector-grid-border: var(
    --x-time-range-selector-grid-border-schedule,
    var(--x-time-range-selector-grid-border)
  );
  --x-time-range-selector-grid-radius: 0;
  --x-time-range-selector-grid-shadow: none;
  --x-time-range-selector-track-inset-block: 18px;
  --x-time-range-selector-track-bg: var(
    --x-time-range-selector-track-bg-schedule,
    var(--x-time-range-selector-track-bg)
  );
  --x-time-range-selector-track-border: var(
    --x-time-range-selector-track-border-schedule,
    var(--x-time-range-selector-track-border)
  );
  --x-time-range-selector-track-radius: var(--x-border-radius-large);
  --x-time-range-selector-track-shadow: var(
    --x-time-range-selector-track-shadow-schedule,
    var(--x-time-range-selector-track-shadow)
  );
  --x-time-range-selector-grid-bg: var(
    --x-time-range-selector-grid-bg-schedule,
    var(--x-time-range-selector-grid-bg)
  );
  --x-time-range-selector-range-top: 10px;
  --x-time-range-selector-range-height: 32px;
  --x-time-range-selector-range-radius: var(--x-border-radius-large);
  --x-time-range-selector-range-bg: var(
    --x-time-range-selector-range-bg-schedule,
    var(--x-time-range-selector-range-bg-default, var(--x-time-range-selector-color))
  );
  --x-time-range-selector-range-border: var(
    --x-time-range-selector-range-border-schedule,
    var(--x-time-range-selector-range-border-default, var(--x-time-range-selector-color))
  );
  --x-time-range-selector-range-shadow: var(
    --x-time-range-selector-range-shadow-schedule,
    var(--x-time-range-selector-range-shadow-default, var(--x-shadow-none))
  );
  --x-time-range-selector-range-shadow-hover: var(
    --x-time-range-selector-range-shadow-hover-schedule,
    var(--x-time-range-selector-range-shadow)
  );
  --x-time-range-selector-range-shadow-dragging: var(
    --x-time-range-selector-range-shadow-dragging-schedule,
    var(--x-time-range-selector-range-shadow-hover)
  );
  --x-time-range-selector-disabled-inset-block: var(--x-time-range-selector-track-inset-block);
  --x-time-range-selector-block-alternate-bg: var(
    --x-time-range-selector-block-alternate-bg-default,
    var(--x-color-transparent)
  );
  --x-time-range-selector-tick-bottom: 20px;
  --x-time-range-selector-tick-height: 5px;
  --x-time-range-selector-tick-color: var(
    --x-time-range-selector-tick-color-schedule,
    var(--x-time-range-selector-tick-color)
  );
  --x-time-range-selector-edge-bg: var(
    --x-time-range-selector-edge-bg-schedule,
    var(--x-time-range-selector-edge-bg)
  );
  --x-time-range-selector-edge-shadow: var(
    --x-time-range-selector-edge-shadow-schedule,
    var(--x-time-range-selector-edge-shadow)
  );
  --x-time-range-selector-edge-shadow-hover: var(
    --x-time-range-selector-edge-shadow-hover-schedule,
    var(--x-time-range-selector-edge-shadow-hover)
  );
  --x-time-range-selector-disabled-bg: var(
    --x-time-range-selector-disabled-bg-schedule,
    var(--x-time-range-selector-disabled-bg)
  );
  --x-time-range-selector-disabled-border: var(
    --x-time-range-selector-disabled-border-schedule,
    var(--x-time-range-selector-disabled-border)
  );
  --x-time-range-selector-disabled-shadow: var(
    --x-time-range-selector-disabled-shadow-schedule,
    var(--x-time-range-selector-disabled-shadow)
  );
  --x-time-range-selector-disabled-radius: var(--x-border-radius-large);
}

.x-time-range-selector-scene-monitor {
  --x-time-range-selector-grid-height: 44px;
  --x-time-range-selector-grid-border: var(
    --x-time-range-selector-grid-border-monitor,
    var(--x-time-range-selector-grid-border)
  );
  --x-time-range-selector-grid-radius: var(--x-border-radius-small);
  --x-time-range-selector-grid-shadow: none;
  --x-time-range-selector-track-inset-block: 20px;
  --x-time-range-selector-track-bg: var(
    --x-time-range-selector-track-bg-monitor,
    var(--x-time-range-selector-track-bg)
  );
  --x-time-range-selector-track-border: var(
    --x-time-range-selector-track-border-monitor,
    var(--x-time-range-selector-track-border)
  );
  --x-time-range-selector-track-radius: 0;
  --x-time-range-selector-track-shadow: none;
  --x-time-range-selector-grid-bg: var(
    --x-time-range-selector-grid-bg-monitor,
    var(--x-time-range-selector-grid-bg)
  );
  --x-time-range-selector-range-top: 8px;
  --x-time-range-selector-range-height: 28px;
  --x-time-range-selector-range-radius: var(--x-border-radius-small);
  --x-time-range-selector-range-bg: var(
    --x-time-range-selector-range-bg-monitor,
    var(--x-time-range-selector-range-bg-default, var(--x-time-range-selector-color))
  );
  --x-time-range-selector-disabled-inset-block: 20px;
  --x-time-range-selector-disabled-bg: var(
    --x-time-range-selector-disabled-bg-monitor,
    var(--x-time-range-selector-disabled-bg)
  );
  --x-time-range-selector-disabled-border: var(
    --x-time-range-selector-disabled-border-monitor,
    var(--x-time-range-selector-disabled-border)
  );
  --x-time-range-selector-disabled-shadow: none;
  --x-time-range-selector-disabled-radius: 0;
  --x-time-range-selector-range-border: var(
    --x-time-range-selector-range-border-monitor,
    var(--x-time-range-selector-range-border-default, var(--x-time-range-selector-color))
  );
  --x-time-range-selector-range-shadow: var(
    --x-time-range-selector-range-shadow-monitor,
    var(--x-time-range-selector-range-shadow-default, var(--x-shadow-none))
  );
  --x-time-range-selector-range-shadow-hover: var(
    --x-time-range-selector-range-shadow-hover-monitor,
    var(--x-time-range-selector-range-shadow)
  );
  --x-time-range-selector-range-shadow-dragging: var(
    --x-time-range-selector-range-shadow-dragging-monitor,
    var(--x-time-range-selector-range-shadow-hover)
  );
  --x-time-range-selector-block-alternate-bg: var(
    --x-time-range-selector-block-alternate-bg-default,
    var(--x-color-transparent)
  );
  --x-time-range-selector-tick-bottom: 10px;
  --x-time-range-selector-tick-height: 4px;
  --x-time-range-selector-tick-color: var(
    --x-time-range-selector-tick-color-monitor,
    var(--x-time-range-selector-tick-color)
  );
  --x-time-range-selector-edge-bg: var(
    --x-time-range-selector-edge-bg-monitor,
    var(--x-time-range-selector-edge-bg)
  );
  --x-time-range-selector-edge-shadow: var(
    --x-time-range-selector-edge-shadow-monitor,
    var(--x-time-range-selector-edge-shadow)
  );
  --x-time-range-selector-edge-shadow-hover: var(
    --x-time-range-selector-edge-shadow-hover-monitor,
    var(--x-time-range-selector-edge-shadow-hover)
  );
  --x-time-range-selector-label-shadow: var(
    --x-time-range-selector-label-shadow-monitor,
    var(--x-time-range-selector-label-shadow)
  );
  --x-time-range-selector-legend-color: var(--x-color-text-3);
}

.x-time-range-selector-scene-compact {
  --x-time-range-selector-grid-height: 38px;
  --x-time-range-selector-grid-border: var(--x-color-border-subtle);
  --x-time-range-selector-grid-radius: var(--x-border-radius-small);
  --x-time-range-selector-grid-shadow: none;
  --x-time-range-selector-track-inset-block: 13px;
  --x-time-range-selector-range-top: 7px;
  --x-time-range-selector-range-height: 24px;
  --x-time-range-selector-track-bg: var(
    --x-time-range-selector-track-bg-compact,
    var(--x-time-range-selector-track-bg)
  );
  --x-time-range-selector-track-border: var(
    --x-time-range-selector-track-border-compact,
    var(--x-time-range-selector-track-border)
  );
  --x-time-range-selector-track-radius: 0;
  --x-time-range-selector-track-shadow: none;
  --x-time-range-selector-grid-bg: var(
    --x-time-range-selector-grid-bg-compact,
    var(--x-time-range-selector-grid-bg)
  );
  --x-time-range-selector-range-bg: var(
    --x-time-range-selector-range-bg-compact,
    var(--x-time-range-selector-range-bg-default, var(--x-time-range-selector-color))
  );
  --x-time-range-selector-disabled-bg: var(
    --x-time-range-selector-disabled-bg-compact,
    var(--x-time-range-selector-disabled-bg)
  );
  --x-time-range-selector-disabled-border: var(
    --x-time-range-selector-disabled-border-compact,
    var(--x-time-range-selector-disabled-border)
  );
  --x-time-range-selector-disabled-radius: 0;
  --x-time-range-selector-tick-bottom: 8px;
  --x-time-range-selector-tick-height: 5px;
  --x-time-range-selector-tick-color: var(
    --x-time-range-selector-tick-color-compact,
    var(--x-time-range-selector-tick-color)
  );
}

.x-time-range-selector--grid {
  position: relative;
  display: flex;
  height: var(--x-time-range-selector-grid-height);
  overflow: hidden;
  isolation: isolate;
  background: var(--x-time-range-selector-grid-bg);
  border: 1px solid var(--x-time-range-selector-grid-border);
  border-radius: var(--x-time-range-selector-grid-radius);
  box-shadow: var(--x-time-range-selector-grid-shadow);
  cursor: crosshair;
  user-select: none;
}
.x-time-range-selector--grid::before {
  position: absolute;
  inset: var(--x-time-range-selector-track-inset-block) 0;
  z-index: 0;
  background: var(--x-time-range-selector-track-bg);
  border-block: 1px solid var(--x-time-range-selector-track-border);
  border-radius: var(--x-time-range-selector-track-radius);
  box-shadow: var(--x-time-range-selector-track-shadow);
  content: "";
  pointer-events: none;
}
.x-time-range-selector--grid.x-time-range-selector-is-dragging {
  cursor: ew-resize;
}

.x-time-range-selector--grid--block {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.x-time-range-selector--grid--block.x-time-range-selector-is-alternate {
  background-color: var(--x-time-range-selector-block-alternate-bg);
}
.x-time-range-selector--grid--block::after {
  position: absolute;
  right: 0;
  bottom: var(--x-time-range-selector-tick-bottom);
  width: 1px;
  height: var(--x-time-range-selector-tick-height);
  background-color: var(--x-time-range-selector-tick-color);
  content: "";
}
.x-time-range-selector--grid--block:last-child::after {
  display: none;
}
.x-time-range-selector--grid--block.x-time-range-selector-is-disabled {
  cursor: not-allowed;
}

.x-time-range-selector--disabled-range {
  position: absolute;
  inset-block: var(--x-time-range-selector-disabled-inset-block);
  z-index: 2;
  box-sizing: border-box;
  background: var(--x-time-range-selector-disabled-bg);
  border: 1px solid var(--x-time-range-selector-disabled-border);
  border-radius: var(--x-time-range-selector-disabled-radius);
  box-shadow: var(--x-time-range-selector-disabled-shadow);
  pointer-events: none;
}
.x-time-range-selector--disabled-range::before, .x-time-range-selector--disabled-range::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--x-time-range-selector-disabled-border);
  content: "";
}
.x-time-range-selector--disabled-range::before {
  left: -1px;
}
.x-time-range-selector--disabled-range::after {
  right: -1px;
}

.x-time-range-selector--range {
  position: absolute;
  top: var(--x-time-range-selector-range-top);
  z-index: 3;
  box-sizing: border-box;
  height: var(--x-time-range-selector-range-height);
  background: var(--x-time-range-selector-range-bg);
  border: 1px solid var(--x-time-range-selector-range-border);
  border-radius: var(--x-time-range-selector-range-radius);
  box-shadow: var(--x-time-range-selector-range-shadow);
  cursor: grab;
  transition: filter var(--x-transition-duration-2) var(--x-transition-timing-function-standard), box-shadow var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
  user-select: none;
}
.x-time-range-selector--range:hover {
  filter: brightness(1.04);
  box-shadow: var(--x-time-range-selector-range-shadow-hover);
}
.x-time-range-selector--range.x-time-range-selector-is-dragging {
  z-index: 4;
  filter: brightness(1.08);
  box-shadow: var(--x-time-range-selector-range-shadow-dragging);
  cursor: grabbing;
}

.x-time-range-selector--edge {
  position: absolute;
  top: 0;
  z-index: 5;
  box-sizing: border-box;
  width: 12px;
  height: 100%;
  cursor: ew-resize;
}
.x-time-range-selector--edge::after {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 5px;
  background-color: var(--x-time-range-selector-edge-bg);
  border-radius: var(--x-border-radius-small);
  box-shadow: var(--x-time-range-selector-edge-shadow);
  transform: translateX(-50%);
  transition: background-color var(--x-transition-duration-2) var(--x-transition-timing-function-standard), box-shadow var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
  content: "";
}
.x-time-range-selector--edge:hover::after {
  background-color: var(--x-time-range-selector-edge-bg-hover, var(--x-color-bg-surface));
  box-shadow: var(--x-time-range-selector-edge-shadow-hover);
}

.x-time-range-selector-edge-left {
  left: -6px;
}

.x-time-range-selector-edge-right {
  right: -6px;
}

.x-time-range-selector--range-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 16px);
  overflow: hidden;
  color: var(--x-time-range-selector-label-color);
  font-size: var(--x-font-size-body-1);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: var(--x-time-range-selector-label-shadow);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.x-time-range-selector--legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--x-spacing-2);
}

.x-time-range-selector--legend--num {
  width: 12px;
  color: var(--x-time-range-selector-legend-color);
  font-size: var(--x-font-size-body-1);
  line-height: 1;
  text-align: center;
}

@container (max-width: 420px) {
  .x-time-range-selector .x-time-range-selector--legend--num:not(:nth-child(6n+1)) {
    display: none;
  }
}

:root {
  --x-trigger-color-arrow-bg: var(--x-color-menu-light-bg);
  --x-trigger-size-arrow-width: var(--x-size-2);
  --x-trigger-border-arrow-radius: var(--x-border-radius-small);
}

.x-trigger--wrapper {
  display: inline-block;
}

.x-trigger--popup {
  position: absolute;
  z-index: var(--x-trigger-z-index-popup);
}

.x-trigger--popup-wrapper {
  position: relative;
}

.x-trigger--content {
  position: relative;
  z-index: 1;
}

.x-trigger--arrow {
  position: absolute;
  z-index: 0;
  display: block;
  box-sizing: border-box;
  width: var(--x-trigger-size-arrow-width);
  height: var(--x-trigger-size-arrow-width);
  background-color: var(--x-trigger-color-arrow-bg);
  content: "";
}

.x-trigger--popup[trigger-placement=top] .x-trigger--arrow, .x-trigger--popup[trigger-placement=tl] .x-trigger--arrow, .x-trigger--popup[trigger-placement=tr] .x-trigger--arrow {
  border-top: none;
  border-left: none;
  border-bottom-right-radius: var(--x-trigger-border-arrow-radius);
}
.x-trigger--popup[trigger-placement=bottom] .x-trigger--arrow, .x-trigger--popup[trigger-placement=bl] .x-trigger--arrow, .x-trigger--popup[trigger-placement=br] .x-trigger--arrow {
  border-right: none;
  border-bottom: none;
  border-top-left-radius: var(--x-trigger-border-arrow-radius);
}
.x-trigger--popup[trigger-placement=left] .x-trigger--arrow, .x-trigger--popup[trigger-placement=lt] .x-trigger--arrow, .x-trigger--popup[trigger-placement=lb] .x-trigger--arrow {
  border-bottom: none;
  border-left: none;
  border-top-right-radius: var(--x-trigger-border-arrow-radius);
}
.x-trigger--popup[trigger-placement=right] .x-trigger--arrow, .x-trigger--popup[trigger-placement=rt] .x-trigger--arrow, .x-trigger--popup[trigger-placement=rb] .x-trigger--arrow {
  border-top: none;
  border-right: none;
  border-bottom-left-radius: var(--x-trigger-border-arrow-radius);
}

.x-tooltip {
  --x-tooltip-padding-horizontal: 12px;
  --x-tooltip-padding-vertical: 8px;
  --x-tooltip-mini-padding-horizontal: 12px;
  --x-tooltip-mini-padding-vertical: 4px;
  --x-tooltip-font-size: var(--x-font-size-body-3, 14px);
  --x-tooltip-mini-font-size: var(--x-font-size-body-3, 14px);
  --x-tooltip-border-radius: var(--x-border-radius-small, 3px);
  --x-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);
  --x-tooltip-color-text: var(--x-color-overlay-tooltip-text);
  --x-tooltip-color-bg: var(--x-color-tooltip-bg);
}
.x-tooltip--content {
  max-width: 350px;
  padding: var(--x-tooltip-padding-vertical) var(--x-tooltip-padding-horizontal);
  color: var(--x-tooltip-color-text);
  font-size: var(--x-tooltip-font-size);
  line-height: 1.5715;
  text-align: left;
  overflow-wrap: break-word;
  background-color: var(--x-tooltip-color-bg);
  border-radius: var(--x-tooltip-border-radius);
}

.x-tooltip-mini {
  padding: var(--x-tooltip-mini-padding-vertical) var(--x-tooltip-mini-padding-horizontal);
  font-size: var(--x-tooltip-mini-font-size);
}
.x-tooltip--popup-arrow {
  background-color: var(--x-tooltip-color-bg);
}

.x-tooltip--disabled-wrapper {
  display: inline-block;
  cursor: not-allowed;
}

.x-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: fit-content;
  min-width: 220px;
  max-width: 100%;
  color: var(--x-text-color);
  font-size: var(--x-fs);
  line-height: 1.5715;
  --timeline-dot-size: 10px;
  --timeline-dot-top: 6px;
  --timeline-dot-color: var(--x-color-primary);
  --timeline-dot-border-color: var(--x-color-bg-white);
  --timeline-dot-hollow-bg: var(--x-color-bg-white);
  --timeline-line-color: var(--x-split-color);
  --timeline-label-color: var(--x-text-gray-2);
  --timeline-content-color: var(--x-text-gray);
  --timeline-content-description-color: var(--x-text-gray-1);
  --timeline-dot-shadow: var(--x-timeline-dot-shadow);
  --timeline-dot-hollow-shadow: var(--x-timeline-dot-hollow-shadow);
  --timeline-content-gap: 26px;
  --timeline-item-gap: 18px;
  --timeline-label-relative-width: 92px;
  --timeline-horizontal-axis-top: 50%;
}
.x-timeline.x-timeline-reverse {
  flex-direction: column-reverse;
}
.x-timeline.x-timeline-direction-horizontal {
  position: relative;
  flex-direction: row;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.x-timeline.x-timeline-direction-horizontal::before {
  position: absolute;
  top: var(--timeline-horizontal-axis-top);
  right: calc(var(--timeline-dot-size) / 2);
  left: calc(var(--timeline-dot-size) / 2);
  height: 1px;
  background-color: var(--timeline-line-color);
  content: "";
  transform: translateY(-50%);
}
.x-timeline.x-timeline-direction-horizontal.x-timeline-reverse {
  flex-direction: row-reverse;
}
.x-timeline--pending-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--timeline-dot-color);
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
}
.x-timeline--pending-dot .x-icon {
  display: block;
  width: 12px;
  height: 12px;
}

.x-timeline-item {
  position: relative;
  min-height: 32px;
  padding-bottom: var(--timeline-item-gap);
}
.x-timeline-item.x-timeline-item-last {
  padding-bottom: 0;
}
.x-timeline-item.x-timeline-item-last .x-timeline-item--dot .x-timeline-item--dot--line {
  display: none;
}
.x-timeline-item--dot {
  position: absolute;
  left: 0;
  width: var(--timeline-dot-size);
  height: 100%;
  text-align: center;
}
.x-timeline-item--dot--line {
  position: absolute;
  top: calc(var(--timeline-dot-top) + var(--timeline-dot-size) + 4px);
  bottom: -12px;
  left: 50%;
  width: 1px;
  border-color: var(--timeline-line-color);
  border-left-width: 1px;
  border-left-style: solid;
  box-sizing: border-box;
  transform: translate(-50%);
}

.x-timeline-item--dot--icon {
  position: absolute;
  top: var(--timeline-dot-top);
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  box-sizing: border-box;
  transform: translateX(-50%);
}
.x-timeline-item--dot--icon.x-timeline-item-custom-dot {
  overflow: visible;
}
.x-timeline-item--dot--icon.x-timeline-item-custom-dot > * {
  flex: 0 0 auto;
}
.x-timeline-item--dot--icon .x-timeline-item--dot--icon-dot {
  position: relative;
  display: block;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: 50%;
  border: 2px solid var(--timeline-dot-border-color);
  box-shadow: var(--timeline-dot-shadow);
  box-sizing: border-box;
}

.x-timeline-item-dot-solid {
  background-color: var(--timeline-dot-color);
}

.x-timeline-item-dot-hollow {
  background-color: var(--x-color-primary-light-1);
  border-color: var(--timeline-dot-color);
  box-shadow: inset 0 0 0 2px var(--timeline-dot-hollow-bg), var(--timeline-dot-hollow-shadow);
}

.x-timeline-item--content-wrapper {
  position: relative;
  min-width: 0;
  margin-left: var(--timeline-content-gap);
}

.x-timeline-item--content {
  min-width: 0;
  padding-top: 1px;
  color: var(--timeline-content-color);
  font-size: var(--x-fs);
  line-height: 1.5715;
}
.x-timeline-item--content--description {
  margin-bottom: 0;
  color: var(--timeline-content-description-color);
  font-size: var(--x-fs);
  font-weight: 400;
  line-height: 1.5715;
}

.x-timeline-item--label {
  margin-bottom: 2px;
  color: var(--timeline-label-color);
  font-size: var(--x-fs-small);
  line-height: 1.45;
}

.x-timeline-item.x-timeline-item-vertical-right {
  padding-right: var(--timeline-dot-size);
}
.x-timeline-item.x-timeline-item-vertical-right > .x-timeline-item--dot {
  right: 0;
  left: auto;
}
.x-timeline-item.x-timeline-item-vertical-right > .x-timeline-item--content-wrapper {
  margin-right: var(--timeline-content-gap);
  margin-left: 0;
  text-align: right;
}
.x-timeline-item.x-timeline-item-label-relative > .x-timeline-item--label {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  max-width: var(--timeline-label-relative-width);
}
.x-timeline-item.x-timeline-item-label-relative.x-timeline-item-vertical-left {
  margin-left: var(--timeline-label-relative-width);
}
.x-timeline-item.x-timeline-item-label-relative.x-timeline-item-vertical-left > .x-timeline-item--label {
  left: 0;
  padding-right: 14px;
  text-align: right;
  transform: translateX(-100%);
}
.x-timeline-item.x-timeline-item-label-relative.x-timeline-item-vertical-right {
  margin-right: var(--timeline-label-relative-width);
}
.x-timeline-item.x-timeline-item-label-relative.x-timeline-item-vertical-right > .x-timeline-item--label {
  right: 0;
  padding-left: 14px;
  text-align: left;
  transform: translateX(100%);
}

.x-timeline-alternate {
  overflow: hidden;
}
.x-timeline-alternate .x-timeline-item-vertical-left,
.x-timeline-alternate .x-timeline-item-vertical-right {
  padding-right: 0;
  padding-left: 0;
}
.x-timeline-alternate .x-timeline-item-vertical-left > .x-timeline-item--dot,
.x-timeline-alternate .x-timeline-item-vertical-right > .x-timeline-item--dot {
  left: 50%;
}
.x-timeline-alternate .x-timeline-item-vertical-left > .x-timeline-item--content-wrapper {
  left: 50%;
  width: 50%;
  margin-left: calc(var(--timeline-content-gap) + var(--timeline-dot-size));
  padding-right: calc(var(--timeline-content-gap) + var(--timeline-dot-size));
}
.x-timeline-alternate .x-timeline-item-vertical-right > .x-timeline-item--content-wrapper {
  left: 0;
  width: 50%;
  margin-right: 0;
  margin-left: calc(-1 * var(--timeline-content-gap));
  padding-right: var(--timeline-content-gap);
  text-align: right;
}
.x-timeline-alternate .x-timeline-item-label-relative {
  margin-right: 0;
  margin-left: 0;
}
.x-timeline-alternate .x-timeline-item-label-relative > .x-timeline-item--label {
  width: 50%;
  max-width: none;
  transform: none;
}
.x-timeline-alternate .x-timeline-item-label-relative.x-timeline-item-vertical-left > .x-timeline-item--label {
  left: 0;
}
.x-timeline-alternate .x-timeline-item-label-relative.x-timeline-item-vertical-right > .x-timeline-item--label {
  right: 0;
}

.x-timeline-direction-horizontal .x-timeline-item-horizontal-top,
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom {
  position: relative;
  flex: 1 0 140px;
  min-height: 148px;
  padding: 0;
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-top > .x-timeline-item--dot,
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom > .x-timeline-item--dot {
  left: 0;
  width: 100%;
  height: var(--timeline-dot-size);
  top: var(--timeline-horizontal-axis-top);
  transform: translateY(-50%);
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-top > .x-timeline-item--dot .x-timeline-item--dot--line,
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom > .x-timeline-item--dot .x-timeline-item--dot--line {
  display: none;
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-top > .x-timeline-item--dot .x-timeline-item--dot--icon,
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom > .x-timeline-item--dot .x-timeline-item--dot--icon {
  top: 50%;
  margin-top: 0;
  transform: translate(-50%, -50%);
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-top > .x-timeline-item--content-wrapper,
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom > .x-timeline-item--content-wrapper {
  position: absolute;
  right: 16px;
  left: 0;
  margin-left: 0;
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-top > .x-timeline-item--content-wrapper {
  top: calc(var(--timeline-horizontal-axis-top) + var(--timeline-dot-size) + 14px);
}
.x-timeline-direction-horizontal .x-timeline-item-horizontal-bottom > .x-timeline-item--content-wrapper {
  bottom: calc(100% - var(--timeline-horizontal-axis-top) + var(--timeline-dot-size) + 14px);
  padding-top: 0;
}
.x-timeline-direction-horizontal.x-timeline-alternate {
  align-items: center;
  min-height: 164px;
  overflow-x: auto;
}
.x-timeline-direction-horizontal.x-timeline-alternate .x-timeline-item-horizontal-top {
  transform: none;
}
.x-timeline-direction-horizontal.x-timeline-alternate .x-timeline-item-horizontal-bottom {
  transform: none;
}

@media (max-width: 640px) {
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) {
    overflow: visible;
  }
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-left,
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-right {
    padding-left: 0;
    padding-right: 0;
  }
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-left > .x-timeline-item--dot,
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-right > .x-timeline-item--dot {
    left: 0;
  }
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-left > .x-timeline-item--content-wrapper,
  .x-timeline-alternate:not(.x-timeline-direction-horizontal) .x-timeline-item-vertical-right > .x-timeline-item--content-wrapper {
    left: auto;
    width: auto;
    margin-left: var(--timeline-content-gap);
    padding-right: 0;
    text-align: left;
  }
}
:root {
  /**********************************************
   * TreeSelect 节点
   **********************************************/
  --x-tree-select-popup-max-height: var(--x-size-50);
  --x-tree-select-popup-padding-horizontal: var(--x-spacing-4);
  --x-tree-select-popup-border-radius: var(--x-border-radius-large);
  --x-tree-select-node-height: var(--x-size-8);
  --x-tree-select-node-indent: var(--x-size-4);
  --x-tree-select-node-padding-horizontal: var(--x-spacing-4);
  --x-tree-select-node-gap: var(--x-spacing-2);
  --x-tree-select-node-border-radius: var(--x-border-radius-medium);
  --x-tree-select-node-color-bg_hover: var(--x-color-fill-2);
  --x-tree-select-node-color-bg_selected: color-mix(
    in srgb,
    var(--x-color-primary) 6%,
    var(--x-color-bg-elevated)
  );
  --x-tree-select-node-color-text_selected: var(--x-color-primary);
  --x-tree-select-node-color-text_disabled: var(--x-color-text-disabled);
  --x-tree-select-node-color-line: var(--x-color-border-default);
  --x-tree-select-highlight-color-text: var(--x-color-primary);
  --x-tree-select-highlight-font-weight: var(--x-font-weight-500);
  --x-tree-select-switcher-color-icon: var(--x-color-text-3);
  --x-tree-select-switcher-size: var(--x-size-4);
  --x-tree-select-switcher-margin-right: var(--x-spacing-2);
  --x-tree-select-checkbox-margin-right: var(--x-spacing-2);
}

.x-tree-select--dropdown {
  box-sizing: border-box;
  padding: var(--x-select-popup-padding-vertical) 0;
  background-color: var(--x-select-popup-color-bg);
  border: 1px solid var(--x-select-popup-color-border);
  border-radius: var(--x-tree-select-popup-border-radius);
  box-shadow: var(--x-select-popup-box-shadow);
}
.x-tree-select--dropdown--loading, .x-tree-select--dropdown--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--x-select-popup-empty-min-height);
  padding: var(--x-select-popup-padding-vertical) var(--x-select-signal-popup-option-padding-horizontal);
}
.x-tree-select--dropdown--list {
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.x-tree-select--dropdown--list-wrapper {
  max-height: var(--x-tree-select-popup-max-height);
  overflow-y: auto;
}
.x-tree-select--dropdown--list,
.x-tree-select--dropdown > .x-virtual-list {
  box-sizing: border-box;
  padding-right: var(--x-tree-select-popup-padding-horizontal);
  padding-left: var(--x-tree-select-popup-padding-horizontal);
}
.x-tree-select--dropdown-has-header {
  padding-top: 0;
}
.x-tree-select--dropdown--header {
  border-bottom: 1px solid var(--x-select-popup-color-border);
}
.x-tree-select--dropdown-has-footer {
  padding-bottom: 0;
}
.x-tree-select--dropdown--footer {
  border-top: 1px solid var(--x-select-popup-color-border);
}

.x-tree-select--node {
  position: relative;
  box-sizing: border-box;
}
.x-tree-select--node--content {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--x-tree-select-node-height);
  padding: 0 var(--x-tree-select-node-padding-horizontal);
  color: var(--x-color-text-primary);
  background-color: var(--x-color-bg-elevated);
  border-radius: var(--x-tree-select-node-border-radius);
  cursor: pointer;
}
.x-tree-select--node--title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  padding: 0 var(--x-tree-select-node-gap);
  font-size: var(--x-select-popup-font-size);
  line-height: var(--x-tree-select-node-height);
}
.x-tree-select--node--switcher {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-tree-select-switcher-size);
  height: var(--x-tree-select-switcher-size);
  margin-right: var(--x-tree-select-switcher-margin-right);
  color: var(--x-tree-select-switcher-color-icon);
  cursor: pointer;
}
.x-tree-select--node--switcher .x-icon {
  width: var(--x-tree-select-switcher-size);
  height: var(--x-tree-select-switcher-size);
  font-size: var(--x-tree-select-switcher-size);
  transition: transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear);
}
.x-tree-select--node--switcher-placeholder {
  display: inline-block;
  flex: none;
  width: calc(var(--x-tree-select-switcher-size) + var(--x-tree-select-switcher-margin-right));
}
.x-tree-select--node--switcher-icon {
  transform: rotate(0deg);
}
.x-tree-select--node--checkbox {
  flex: none;
  margin-right: var(--x-tree-select-checkbox-margin-right);
}
.x-tree-select--node--icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-right: var(--x-tree-select-checkbox-margin-right);
}
.x-tree-select--node--highlight {
  color: var(--x-tree-select-highlight-color-text);
  font-weight: var(--x-tree-select-highlight-font-weight);
}
.x-tree-select--node-selected .x-tree-select--node--content {
  color: var(--x-tree-select-node-color-text_selected);
  font-weight: var(--x-font-weight-500);
  background-color: var(--x-tree-select-node-color-bg_selected);
}
.x-tree-select--node-multiple .x-tree-select--node--content {
  background-color: var(--x-color-transparent);
}
.x-tree-select--node-active .x-tree-select--node--content {
  background-color: var(--x-tree-select-node-color-bg_hover);
}
.x-tree-select--node-disabled .x-tree-select--node--content {
  color: var(--x-tree-select-node-color-text_disabled);
  cursor: not-allowed;
}
.x-tree-select--node-is-expanded > .x-tree-select--node--content > .x-tree-select--node--switcher .x-icon {
  transform: rotate(90deg);
}
.x-tree-select--node-block .x-tree-select--node--content {
  border-radius: 0;
}
.x-tree-select--node--content-block {
  border-radius: 0;
}
.x-tree-select--node-with-line::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x-tree-select-node-line-left, 0px) + var(--x-tree-select-node-padding-horizontal));
  width: 1px;
  background-color: var(--x-tree-select-node-color-line);
  content: "";
}
.x-tree-select--node-with-line.x-tree-select--node-last::before {
  bottom: 50%;
}
.x-tree-select--node-with-line.x-tree-select--node-root::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .x-tree-select--node--switcher .x-icon {
    transition: none;
  }
}

:root {
  --x-transfer-panel-width: calc(var(--x-size-50) + var(--x-size-10));
  --x-transfer-body-height: calc(var(--x-size-50) + var(--x-size-10));
  --x-transfer-item-height: var(--x-size-9);
  --x-transfer-gap: var(--x-spacing-6);
  --x-transfer-padding: var(--x-spacing-5);
  --x-transfer-border-color: var(--x-color-border-default);
  --x-transfer-header-bg: var(--x-color-fill-1);
  --x-transfer-item-hover-bg: var(--x-color-fill-2);
}

.x-transfer {
  display: inline-flex;
  align-items: center;
  gap: var(--x-transfer-gap);
  max-width: 100%;
  color: var(--x-color-text-primary);
  font-size: var(--x-font-size-body-1);
}
.x-transfer--panel {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--x-transfer-panel-width);
  min-width: 0;
  overflow: hidden;
  background: var(--x-color-bg-elevated);
  border: 1px solid var(--x-transfer-border-color);
  border-radius: var(--x-border-radius-medium);
}
.x-transfer--header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--x-spacing-4);
  min-height: var(--x-size-10);
  padding: 0 var(--x-transfer-padding);
  background: var(--x-transfer-header-bg);
  border-bottom: 1px solid var(--x-transfer-border-color);
}
.x-transfer--title {
  min-width: 0;
  font-weight: var(--x-font-weight-500);
}
.x-transfer--count {
  flex: none;
  color: var(--x-color-text-secondary);
  font-size: var(--x-font-size-body-1);
  font-variant-numeric: tabular-nums;
}
.x-transfer--search {
  flex: none;
  padding: var(--x-spacing-4) var(--x-transfer-padding);
  border-bottom: 1px solid var(--x-transfer-border-color);
}
.x-transfer--body {
  height: var(--x-transfer-body-height);
  overflow: auto;
  overscroll-behavior: contain;
}
.x-transfer--list {
  min-height: 100%;
}
.x-transfer--item {
  box-sizing: border-box;
  min-height: var(--x-transfer-item-height);
  padding: 0 var(--x-transfer-padding);
}
.x-transfer--item:hover:not(.x-transfer--item-disabled) {
  background: var(--x-transfer-item-hover-bg);
}
.x-transfer--item-checkbox {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--x-transfer-item-height);
  padding-top: var(--x-spacing-2);
  padding-bottom: var(--x-spacing-2);
}
.x-transfer--item-checkbox .x-checkbox--label {
  flex: 1;
  min-width: 0;
}
.x-transfer--item-label {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x-transfer--item-content {
  display: flex;
  align-items: center;
  gap: var(--x-spacing-2);
  min-height: var(--x-transfer-item-height);
}
.x-transfer--item-disabled {
  color: var(--x-color-text-disabled);
  cursor: not-allowed;
}
.x-transfer--operations {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--x-spacing-4);
}
.x-transfer--state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: var(--x-size-30);
}
.x-transfer--pagination, .x-transfer--footer {
  flex: none;
  padding: var(--x-spacing-4) var(--x-transfer-padding);
  border-top: 1px solid var(--x-transfer-border-color);
}
.x-transfer--pagination {
  display: flex;
  justify-content: center;
}
.x-transfer-error .x-transfer--panel {
  border-color: var(--x-color-danger);
}
.x-transfer-disabled .x-transfer--header {
  color: var(--x-color-text-disabled);
}
.x-transfer--list:focus-visible, .x-transfer:focus-visible {
  outline: 2px solid var(--x-color-primary);
  outline-offset: -2px;
}
.x-transfer-simple .x-transfer--item-content > .x-button {
  justify-content: flex-start;
  min-height: var(--x-transfer-item-height);
}
@media (max-width: 600px) {
  .x-transfer {
    gap: var(--x-spacing-3);
    width: 100%;
  }
}
@media (forced-colors: active) {
  .x-transfer--panel, .x-transfer--header {
    border-color: CanvasText;
  }
  .x-transfer--item-disabled {
    color: GrayText;
  }
}

:root {
  /*
   * 只保留组件需要的 token。
   * 能直接引用全局语义 token 的场景（链接色、焦点环、禁用边框等）不再包一层
   * 同名 alias：减少暗色层需要重发的派生链，也是 base.css 体积预算的一部分。
   */
  --x-upload-color-text: var(--x-color-text-primary);
  --x-upload-color-icon: var(--x-color-text-tertiary);
  --x-upload-color-tip-text: var(--x-color-text-tertiary);
  --x-upload-color-bg: var(--x-color-fill-1);
  --x-upload-color-bg-hover: var(--x-color-fill-2);
  --x-upload-color-border: var(--x-color-border-default);
  --x-upload-color-border-hover: var(--x-color-primary);
  --x-upload-color-thumbnail-bg: var(--x-color-fill-2);
  /* 图片卡：遮罩为深色蒙层，其上的文字与图标使用恒定白（--x-color-white
     的语义正是「彩底之上的内容色」，不随主题翻转） */
  --x-upload-color-picture-overlay-bg: var(--x-color-overlay-mask);
  --x-upload-color-picture-overlay-content: var(--x-color-white);
  /* 边框与圆角 */
  --x-upload-border-width: var(--x-border-1);
  --x-upload-border-radius: var(--x-border-radius-medium);
  --x-upload-border-radius-small: var(--x-border-radius-small);
  /* 字号与行高 */
  --x-upload-size-font-size: var(--x-font-size-body-3);
  --x-upload-size-tip-font-size: var(--x-font-size-caption);
  --x-upload-size-line-height: 1.5;
  /* 间距 */
  --x-upload-spacing-icon-text: var(--x-spacing-2);
  --x-upload-spacing-operations: var(--x-spacing-1);
  --x-upload-spacing-list: var(--x-spacing-2);
  --x-upload-spacing-tip: var(--x-spacing-1);
  --x-upload-spacing-card: var(--x-spacing-3);
  /* 尺寸 */
  --x-upload-size-thumbnail: var(--x-size-10);
  --x-upload-size-picture-card: var(--x-size-25);
  --x-upload-size-operation-icon: var(--x-size-4);
  --x-upload-size-picture-operation-icon: var(--x-size-5);
  --x-upload-size-progress-width: var(--x-size-25);
  --x-upload-size-item-padding-vertical: var(--x-spacing-1);
  --x-upload-size-item-padding-horizontal: var(--x-spacing-2);
  --x-upload-size-picture-name-padding: var(--x-spacing-1);
  --x-upload-size-dragger-padding-vertical: var(--x-spacing-12);
  --x-upload-size-dragger-padding-horizontal: var(--x-spacing-6);
  --x-upload-size-focus-outline: 2px;
  --x-upload-size-focus-outline-offset: 1px;
}

.x-upload {
  position: relative;
  display: block;
  color: var(--x-upload-color-text);
}
.x-upload--list {
  display: block;
}

.x-upload {
  /* 文本 / 图片列表：入口在上，列表在下 */
}
.x-upload--entry {
  display: inline-block;
}

.x-upload {
  /* 拖拽区：整块可点击，拖入时高亮 */
}
.x-upload--dragger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: var(--x-upload-size-dragger-padding-vertical) var(--x-upload-size-dragger-padding-horizontal);
  color: var(--x-upload-color-text);
  text-align: center;
  background-color: var(--x-upload-color-bg);
  border: var(--x-upload-border-width) dashed var(--x-upload-color-border);
  border-radius: var(--x-upload-border-radius);
  cursor: pointer;
  transition: background-color var(--x-transition-duration-2) var(--x-transition-timing-function-standard), border-color var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-upload--dragger:hover {
  background-color: var(--x-upload-color-bg-hover);
  border-color: var(--x-upload-color-border-hover);
}

.x-upload {
  /* 普通 / 图片卡触发入口 */
}
.x-upload--trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--x-upload-spacing-icon-text);
  color: var(--x-upload-color-text);
  cursor: pointer;
  transition: color var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}
.x-upload--trigger:focus-visible {
  outline: var(--x-upload-size-focus-outline) solid var(--x-color-border-focus);
  outline-offset: var(--x-upload-size-focus-outline-offset);
  border-radius: var(--x-upload-border-radius);
}

.x-upload--trigger-icon {
  display: inline-flex;
  align-items: center;
  color: var(--x-upload-color-icon);
}

.x-upload--trigger-text {
  font-size: var(--x-upload-size-font-size);
  line-height: var(--x-upload-size-line-height);
}

.x-upload--tip {
  margin-top: var(--x-upload-spacing-tip);
  color: var(--x-upload-color-tip-text);
  font-size: var(--x-upload-size-tip-font-size);
  line-height: var(--x-upload-size-line-height);
}

.x-upload--input {
  display: none;
}

.x-upload {
  /* ---------------- 列表 ---------------- */
}
.x-upload--items {
  margin-top: var(--x-upload-spacing-list);
}

.x-upload--item-wrapper {
  display: block;
}

.x-upload--item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--x-upload-spacing-icon-text);
  padding: var(--x-upload-size-item-padding-vertical) var(--x-upload-size-item-padding-horizontal);
  color: var(--x-upload-color-text);
  font-size: var(--x-upload-size-font-size);
  line-height: var(--x-upload-size-line-height);
  border-radius: var(--x-upload-border-radius);
}
.x-upload--item:hover {
  background-color: var(--x-upload-color-bg);
}

.x-upload--item-file-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--x-upload-color-icon);
}

.x-upload--item-thumbnail {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-upload-size-thumbnail);
  height: var(--x-upload-size-thumbnail);
  overflow: hidden;
  color: var(--x-upload-color-icon);
  background-color: var(--x-upload-color-thumbnail-bg);
  border-radius: var(--x-upload-border-radius-small);
}
.x-upload--item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.x-upload--item-name {
  flex: 1;
  flex-basis: var(--x-upload-size-thumbnail);
  min-width: 0;
  overflow: hidden;
  color: var(--x-upload-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x-upload--item-name:focus-visible {
  outline: var(--x-upload-size-focus-outline) solid var(--x-color-border-focus);
  outline-offset: var(--x-upload-size-focus-outline-offset);
  border-radius: var(--x-upload-border-radius-small);
}

.x-upload--item-name-link {
  color: var(--x-color-primary-text);
  text-decoration: none;
}
.x-upload--item-name-link:hover {
  color: var(--x-color-primary);
  text-decoration: underline;
}

.x-upload--item-error-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--x-color-danger);
}

.x-upload--item-progress {
  flex: none;
  width: var(--x-upload-size-progress-width);
}

.x-upload--item-operations {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--x-upload-spacing-operations);
  color: var(--x-upload-color-icon);
}
.x-upload--item-operations .x-icon-hover {
  font-size: var(--x-upload-size-operation-icon);
}

.x-upload {
  /* 失败行整体使用错误色，与成功 / 上传中区分 */
}
.x-upload--item-error .x-upload--item-name {
  color: var(--x-color-danger);
}

.x-upload {
  /* ---------------- 图片卡 ---------------- */
}
.x-upload--list-picture-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--x-upload-spacing-card);
}

.x-upload--picture-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--x-upload-spacing-tip);
  height: 100%;
  padding: var(--x-upload-size-item-padding-horizontal);
  box-sizing: border-box;
  color: var(--x-upload-color-icon);
}
.x-upload--picture-placeholder span {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--x-upload-size-tip-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-upload--picture-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x-upload-spacing-tip);
}

.x-upload--picture-entry-tip {
  max-width: var(--x-upload-size-picture-card);
  color: var(--x-upload-color-tip-text);
  font-size: var(--x-upload-size-tip-font-size);
  line-height: var(--x-upload-size-line-height);
  text-align: center;
}

.x-upload--picture-trigger {
  justify-content: center;
  box-sizing: border-box;
  width: var(--x-upload-size-picture-card);
  height: var(--x-upload-size-picture-card);
  color: var(--x-upload-color-icon);
  background-color: var(--x-upload-color-bg);
  border: var(--x-upload-border-width) dashed var(--x-upload-color-border);
  border-radius: var(--x-upload-border-radius);
}
.x-upload--picture-trigger .x-upload--trigger-text {
  display: none;
}
.x-upload--picture-trigger:hover {
  background-color: var(--x-upload-color-bg-hover);
  border-color: var(--x-upload-color-border-hover);
}

.x-upload--picture-item {
  position: relative;
  box-sizing: border-box;
  width: var(--x-upload-size-picture-card);
  height: var(--x-upload-size-picture-card);
  overflow: hidden;
  background-color: var(--x-upload-color-thumbnail-bg);
  border: var(--x-upload-border-width) solid var(--x-upload-color-border);
  border-radius: var(--x-upload-border-radius);
}

.x-upload--picture-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.x-upload--picture-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--x-upload-size-picture-name-padding);
  overflow: hidden;
  color: var(--x-upload-color-picture-overlay-content);
  font-size: var(--x-upload-size-tip-font-size);
  line-height: var(--x-upload-size-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--x-upload-color-picture-overlay-bg);
}

.x-upload--picture-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--x-upload-spacing-tip);
  padding: var(--x-upload-size-item-padding-horizontal);
  color: var(--x-upload-color-picture-overlay-content);
  background-color: var(--x-upload-color-picture-overlay-bg);
  opacity: 0;
  transition: opacity var(--x-transition-duration-2) var(--x-transition-timing-function-standard);
}

.x-upload--picture-item:hover .x-upload--picture-mask, .x-upload--picture-item:focus-within .x-upload--picture-mask {
  opacity: 1;
}

.x-upload--picture-operations {
  display: inline-flex;
  align-items: center;
  gap: var(--x-upload-spacing-operations);
  font-size: var(--x-upload-size-picture-operation-icon);
}
.x-upload--picture-operations .x-icon-hover {
  color: var(--x-upload-color-picture-overlay-content);
}

.x-upload--picture-uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.x-upload--picture-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--x-upload-spacing-tip);
  width: 100%;
  height: 100%;
  color: var(--x-color-danger);
}

.x-upload--picture-error-tip {
  display: -webkit-box;
  overflow: hidden;
  color: var(--x-upload-color-picture-overlay-content);
  font-size: var(--x-upload-size-tip-font-size);
  line-height: var(--x-upload-size-line-height);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.x-upload {
  /* ---------------- 空态 / 无障碍播报 ---------------- */
}
.x-upload--empty {
  display: flex;
  align-items: center;
  gap: var(--x-upload-spacing-icon-text);
  padding: var(--x-upload-size-item-padding-vertical) var(--x-upload-size-item-padding-horizontal);
  color: var(--x-upload-color-tip-text);
  font-size: var(--x-upload-size-font-size);
}

.x-upload {
  /*
   * 状态类。
   *
   * 运行时 className.is('x') 生成 `x-upload-is-x`，与结构类同处一个元素。
   * bem 的 is() / when() mixin 生成的是 `.-x` 形式，与运行时类名对不上，
   * 因此状态一律用块级 m(is-x) 表达（与 Button 的 is-disabled 写法一致）。
   */
}
.x-upload-is-entry-block {
  display: block;
  width: 100%;
}

.x-upload-is-dragging {
  color: var(--x-upload-color-text);
  background-color: var(--x-upload-color-bg-hover);
  border-color: var(--x-upload-color-border-hover);
}

.x-upload-is-disabled {
  color: var(--x-color-text-disabled);
  cursor: not-allowed;
}
.x-upload-is-disabled.x-upload--trigger .x-upload--trigger-icon,
.x-upload-is-disabled.x-upload--trigger .x-upload--trigger-text {
  color: inherit;
}
.x-upload-is-disabled.x-upload--trigger:hover {
  background-color: var(--x-upload-color-bg);
  border-color: var(--x-color-border-subtle);
}

.x-upload {
  /* 拖拽区禁用时同步弱化底色与边框 */
}
.x-upload.x-upload--dragger.x-upload-is-disabled {
  background-color: var(--x-upload-color-bg);
  border-color: var(--x-color-border-subtle);
}
.x-upload.x-upload--picture-trigger.x-upload-is-disabled {
  border-color: var(--x-color-border-subtle);
}
.x-upload-is-error {
  opacity: 1;
}

.x-upload {
  /* 图片卡上传中：虚线边框提示仍在进行 */
}
.x-upload-is-uploading {
  border-style: dashed;
}

.x-upload {
  /* 仅供屏幕阅读器播报上传状态变化 */
}
.x-upload--announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.x-watermark {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.x-watermark,
.x-watermark * {
  box-sizing: border-box;
}
.x-watermark--layer {
  user-select: none;
}

/*
 * Windows 高对比度 / forced-colors 模式适配。
 *
 * 该模式下浏览器会强制覆盖绝大部分颜色为系统色（CanvasText / ButtonText 等），
 * 组件自己的色板失效。x-next 的语义 token 是逐组件显式声明的，因此这里只做
 * 「不依赖具体色值」的最小适配，让结构在系统色环境下仍然成立：
 *
 * 1. 边框与轮廓改用系统色，避免"边框与背景同色"导致控件失去边界。
 * 2. 焦点环显式使用 Highlight，系统会把它渲染为可见的用户选中色。
 * 3. 用 forced-color-adjust: none 保留少量必须自绘的图形（选中勾、开关滑块），
 *    否则它们会被强制成与底色相同的系统色而消失。
 *
 * 不改动任何布局与尺寸，也不覆盖品牌色板本身——在 forced-colors 下浏览器
 * 会忽略它们，无需我们干预。
 */
@media (forced-colors: active) {
  :root,
  html[data-theme=dark],
  [data-theme=dark],
  .x-config-provider,
  .x-trigger--popup,
  .x-dialog,
  .x-drawer {
    /* 边框/分割线一律走系统文字色，保证与任意系统底色有对比 */
    --x-color-border-default: CanvasText;
    --x-color-border-subtle: CanvasText;
    --x-color-border-focus: Highlight !important;
    --x-color-7: Canvas;
    --x-color-bg-white: Canvas;
    --x-color-bg-page: Canvas;
    --x-color-bg-surface: Canvas;
    --x-color-bg-elevated: Canvas;
    --x-color-fill-1: Canvas;
    --x-color-fill-2: Canvas;
    --x-color-fill-3: Canvas;
    --x-color-fill-4: ButtonFace;
    --x-color-fill-5: ButtonFace;
    --x-color-fill-6: ButtonFace;
    --x-color-text-1: CanvasText;
    --x-color-text-2: CanvasText;
    --x-color-text-3: CanvasText;
    --x-color-text-4: GrayText;
    --x-color-white: ButtonText;
    --x-color-constant-dark: ButtonText;
    --x-disabled-color: GrayText;
    --x-disabled-bgc: ButtonFace;
    --x-split-color: CanvasText;
  }
  /* 表单控件：系统会给原生控件自带边框，这里补齐自定义边框 */
  .x-input--wrapper,
  .x-textarea--wrapper,
  .x-input-tag,
  .x-select--view,
  .x-input-number {
    border-color: CanvasText;
  }
  /* 焦点环统一高亮色 */
  [class^=x-]:focus-visible,
  [class*=" x-"]:focus-visible,
  .x-checkbox:has(input:focus-visible),
  .x-radio:has(input:focus-visible) {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  /* 选中态图形必须自绘，否则会被强制成与底色相同的系统色而不可见 */
  .x-checkbox-icon-check,
  .x-radio-icon::after,
  .x-switch--handle,
  .x-switch--handle-icon {
    forced-color-adjust: none;
  }
  /* 弹层阴影在强制色下无效，改用边框表达层级 */
  .x-trigger--content,
  .x-popup--content,
  .x-message,
  .x-notification {
    border: 1px solid CanvasText;
  }
  /*
   * 分页当前页：背景色被强制成 Canvas 后与未选中页无差别，用户看不出所在页；
   * 用系统高亮色描边把「当前页」表达出来。
   */
  .x-pagination--item-active {
    border: 1px solid Highlight;
  }
  /* 骨架屏填充被映射成 Canvas 后整块占位消失，补边框保留轮廓 */
  .x-skeleton--shape,
  .x-skeleton--line--row {
    border: 1px solid CanvasText;
  }
}
@media (prefers-reduced-motion: reduce) {
  [class*=x-fade-],
  [class*=x-slide-],
  [class*=x-zoom-],
  .image-fade-enter-active,
  .image-fade-leave-active {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}/*
 * 文档站专用 token。
 * 原先误放在组件库主题层（_styles/theme-light.scss），会随发布产物一起发出，
 * 且其中引用了仅文档站存在的 --vp-* 变量。这里才是它们唯一的消费方。
 */
:root {
  /*
   * 文档站品牌色阶对齐组件库主色（--x-color-primary: #1C61FF），
   * 三档分别对应主色的 6 / 5 / 4 档，避免文档站与组件库出现两套蓝。
   */
  --x-doc-vp-brand-1: #1c61ff;
  --x-doc-vp-brand-2: #4584ff;
  --x-doc-vp-brand-3: #6ea4ff;
  --x-doc-vp-bg-soft: #ffffff;
  --x-doc-layout-header-bg: rgba(15, 118, 110, 0.14);
  --x-doc-layout-sidebar-bg: rgba(37, 99, 235, 0.12);
  --x-doc-layout-content-bg: rgba(20, 184, 166, 0.08);
  --x-doc-resize-handle-bg: rgba(37, 99, 235, 0.32);
  --x-doc-resize-handle-bg-hover: rgba(37, 99, 235, 0.58);
  --x-doc-resize-trigger-bg: color-mix(in srgb, var(--vp-c-brand-1) 12%, var(--x-color-transparent));
  --x-doc-menu-icon-purple: #7b61ff;
  --x-doc-textarea-suffix-bg: color-mix(in srgb, var(--vp-c-brand-1) 10%, var(--x-color-transparent));
  --x-doc-textarea-suffix-border: color-mix(in srgb, var(--vp-c-brand-1) 24%, var(--x-color-transparent));
  --x-doc-empty-icon-bg: color-mix(in srgb, var(--vp-c-brand-1) 10%, var(--x-color-transparent));
  --x-doc-empty-icon-border: color-mix(in srgb, var(--vp-c-brand-1) 26%, var(--x-color-transparent));
  --x-doc-empty-image-bg: color-mix(in srgb, var(--vp-c-brand-1) 7%, var(--vp-c-bg));
  --x-doc-empty-image-border: color-mix(in srgb, var(--vp-c-brand-1) 18%, var(--vp-c-divider));
  --x-doc-empty-image-line-bg: color-mix(in srgb, var(--vp-c-brand-1) 26%, var(--vp-c-text-3));
  --x-doc-popup-strong-bg: color-mix(in srgb, var(--vp-c-brand-1) 8%, var(--vp-c-bg));
  --x-doc-popup-strong-border: color-mix(in srgb, var(--vp-c-brand-1) 24%, var(--vp-c-divider));
  --x-doc-drawer-local-grid-bg:
    linear-gradient(90deg, color-mix(in srgb, var(--vp-c-brand-1) 6%, var(--x-color-transparent)) 1px, var(--x-color-transparent) 1px),
    linear-gradient(color-mix(in srgb, var(--vp-c-brand-1) 6%, var(--x-color-transparent)) 1px, var(--x-color-transparent) 1px),
    var(--vp-c-bg);
  --x-doc-drawer-local-border: color-mix(in srgb, var(--vp-c-brand-1) 36%, var(--vp-c-divider));
  --x-doc-drawer-local-label-bg: color-mix(in srgb, var(--vp-c-bg) 84%, var(--x-color-transparent));
  --vp-c-brand-1: var(--x-doc-vp-brand-1);
  --vp-c-brand-2: var(--x-doc-vp-brand-2);
  --vp-c-brand-3: var(--x-doc-vp-brand-3);
  --vp-c-bg-soft: var(--x-doc-vp-bg-soft);
}

.dark {
  --x-doc-vp-bg-soft: var(--x-color-bg-surface);
}

.vp-doc > div > table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.example-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 20px;
  margin: 16px 0;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
}

.example-box-column {
  flex-direction: column;
  align-items: stretch;
}

/*
 * 可换行的行内演示组。
 * 用于需要自动折行的场景（Space 组件本身不支持 wrap）。
 */
.demo-inline-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ConfigProvider 空态插槽演示：并排展示 select 与 table 两种来源 */
.demo-provider-empty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

/*
 * 主题作用域演示容器。
 * 背景与文字取自组件库主题 token，因此开启 dark 后会随 token 一起变深，
 * 用于直观展示「局部暗色」——外围仍是文档站的亮色。
 */
.theme-scope-demo {
  padding: 16px;
  border-radius: 8px;
  background: var(--x-color-bg-surface);
  color: var(--x-color-text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.example-box .x-form,
.example-box .x-table,
.example-box .x-tabs,
.example-box .x-steps,
.example-box .x-time-range-selector {
  width: 100%;
}

/*
 * 迷你趋势图在示例里限制宽度：它是角标形态的迷你图，撑满 560px 宽的文档容器后
 * 宽高比接近 10:1，观感会变成「一条被拉平的大图」而不是趋势线。
 * 收敛到 320px 后与真实使用场景（指标卡、表格单元格）一致。
 * 需要看它在宽容器里的表现时看「响应式尺寸」示例（容器由 ResizeBox 控制）。
 */
.example-box .x-trend-chart {
  width: 100%;
  max-width: 320px;
}

.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 280px;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--x-color-border-subtle, var(--vp-c-divider));
  border-radius: 8px;
}

.metric-card-value {
  font-size: 20px;
  font-weight: 500;
}

.metric-card-label {
  color: var(--x-color-text-3, var(--vp-c-text-3));
  font-size: 12px;
}

.demo-control {
  width: 320px;
  max-width: 100%;
}

.example-box .x-form {
  max-width: 100%;
}

.demo-control-wide {
  width: 420px;
  max-width: 100%;
}

.demo-slider {
  width: 420px;
  max-width: 100%;
}

.table-doc-page .VPDoc .container,
.table-doc-page .VPDoc .content,
.table-doc-page .VPDoc .content-container {
  max-width: 1280px;
}

.table-doc-page .example-box {
  align-items: stretch;
  padding: 0;
  overflow: auto;
  background: var(--x-color-transparent);
  border: 0;
  border-radius: 0;
}

.table-doc-page .example-box + div[class*='language-'] {
  max-height: 360px;
  overflow: auto;
}

.table-doc-page .x-table {
  min-width: 0;
}

@media (min-width: 960px) {
  .table-doc-page .VPDoc.has-aside .content-container {
    max-width: 1120px;
  }
}

/* Boxicons 图标浏览器需要更宽的容器承载图标墙。
   必须写在全局样式表：VitePress 的 .VPDoc.has-aside .content-container 带 data-v 作用域属性，
   页面内 \3c style> 的同名覆盖会因 specificity 不足而失效。 */
.boxicons-doc-page .VPDoc .container,
.boxicons-doc-page .VPDoc .content,
.boxicons-doc-page .VPDoc .content-container {
  max-width: 1280px;
}

@media (min-width: 960px) {
  .boxicons-doc-page .VPDoc.has-aside .content-container {
    max-width: 1120px;
  }
}

.demo-grid-row,
.demo-layout,
.demo-menu,
.demo-form,
.demo-draggable,
.demo-scrollbar {
  width: 100%;
}

.demo-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  color: var(--x-color-white);
  background: var(--vp-c-brand-1);
  border-radius: 6px;
}

.demo-layout {
  overflow: hidden;
  min-height: 220px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}

.demo-layout .x-layout--header,
.demo-layout .x-layout--footer,
.demo-layout .x-layout--content,
.demo-layout .x-layout--sidebar,
.demo-layout .x-layout--sidebar--children {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-layout .x-layout--header,
.demo-layout .x-layout--footer {
  min-height: 48px;
  background: var(--x-doc-layout-header-bg);
}

.demo-layout .x-layout--sidebar {
  background: var(--x-doc-layout-sidebar-bg);
}

.demo-layout .x-layout--content {
  min-height: 120px;
  background: var(--x-doc-layout-content-bg);
}

.layout-doc-demo {
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  color: var(--vp-c-text-1);
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}

.layout-doc-demo + .layout-doc-demo {
  margin-top: 16px;
}

.layout-doc-demo .x-layout--header,
.layout-doc-demo .x-layout--footer,
.layout-doc-demo .x-layout--content,
.layout-doc-demo .x-layout--sidebar,
.layout-doc-demo .x-layout--sidebar--children {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
}

.layout-doc-demo .x-layout--header,
.layout-doc-demo .x-layout--footer {
  min-height: 48px;
  background: var(--x-doc-layout-header-bg);
}

.layout-doc-demo .x-layout--sidebar {
  color: var(--vp-c-text-1);
  background: var(--x-doc-layout-sidebar-bg);
}

.layout-doc-demo .x-layout--sidebar:not(.x-layout--sidebar-light) {
  color: var(--x-color-white);
}

.layout-doc-demo .x-layout--content {
  min-height: 132px;
  padding: 16px;
  text-align: center;
  background: var(--x-doc-layout-content-bg);
}

.layout-doc-sidebar-content {
  padding: 0 8px;
  text-align: center;
}

.layout-doc-responsive-text {
  display: block;
  max-width: 100%;
  padding: 0 8px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-doc-log {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--vp-c-text-2);
  font-size: 13px;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.layout-doc-resize-demo .x-layout--sidebar {
  min-width: 160px;
  max-width: 520px;
}

.layout-doc-resize-demo .x-resize-box-direction-right {
  right: -7px;
  width: 14px;
  background: var(--x-color-transparent);
}

.layout-doc-resize-demo .x-resize-box-direction-right::before {
  width: 6px;
  height: 56px;
  content: '';
  background: var(--x-doc-resize-handle-bg);
  border-radius: 999px;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.layout-doc-resize-demo .x-resize-box-direction-right:hover::before,
.layout-doc-resize-demo .x-resize-box-direction-right:focus-visible::before {
  width: 8px;
  background: var(--x-doc-resize-handle-bg-hover);
}

.layout-doc-resize-demo .x-resize-box--trigger-icon-wrapper {
  display: none;
}

.layout-doc-menu-demo {
  min-height: 260px;
}

.layout-doc-menu-demo .x-layout--sidebar--children {
  align-items: stretch;
  justify-content: flex-start;
}

.layout-doc-menu-demo .x-menu {
  width: 100%;
}

.demo-resize-box {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 120px;
  min-height: 80px;
  flex: none;
  color: var(--vp-c-text-2);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-resize-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vp-c-brand-1);
  font-size: 12px;
  white-space: nowrap;
  background: var(--x-doc-resize-trigger-bg);
}

.demo-resize-icon {
  color: var(--vp-c-brand-1);
  font-size: 16px;
  line-height: 1;
}

.demo-resize-log {
  width: 300px;
  min-height: 76px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-resize-layout {
  width: 100%;
  min-height: 140px;
  overflow: hidden;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-resize-layout .x-layout--sidebar,
.demo-resize-layout .x-layout--sidebar--children {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vp-c-text-2);
  background: var(--x-doc-layout-sidebar-bg);
}

.demo-resize-layout .x-layout--content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vp-c-text-2);
  background: var(--x-doc-layout-content-bg);
}

.demo-scrollbar {
  width: 100%;
  height: 180px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-scrollbar-content {
  min-width: 520px;
  padding: 12px 16px;
}

.demo-scrollbar-content p {
  margin: 0;
  line-height: 32px;
}

.demo-spin-panel {
  width: 160px;
  min-height: 72px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-skeleton-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 520px;
}

.demo-skeleton-row .x-skeleton--line {
  width: 100%;
}

.demo-skeleton-card {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  padding: 16px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-sizing: border-box;
}

.demo-skeleton-card strong {
  color: var(--vp-c-text-1);
  font-size: 15px;
  line-height: 22px;
}

.demo-skeleton-card span {
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
}

.demo-menu {
  max-width: 260px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.menu-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
  background-color: var(--x-color-neutral-2);
}

.menu-demo-horizontal .x-menu:not(.x-menu-dark) {
  background-color: var(--x-color-bg-white);
}

.menu-demo-vertical {
  height: 600px;
}

.menu-demo-vertical .x-menu {
  width: 200px;
  height: 100%;
}

.menu-demo-pop .x-menu {
  width: 200px;
  height: 100%;
  box-shadow: var(--x-shadow-special);
}

.menu-demo-collapse .x-button {
  height: 30px;
  margin-bottom: 4px;
  padding: 0 12px;
  line-height: 30px;
}

.menu-demo-pop-button {
  position: relative;
  width: 100%;
  height: 300px;
}

.menu-demo-pop-button .x-menu {
  width: auto;
}

.menu-demo-logo {
  width: 80px;
  height: 30px;
  border-radius: 2px;
  background: var(--x-color-fill-3);
}

.menu-demo-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
  background: var(--menu-demo-icon-color, currentColor);
}

.menu-demo-icon-blue {
  --menu-demo-icon-color: var(--x-color-primary-6);
}

.menu-demo-icon-green {
  --menu-demo-icon-color: var(--x-color-success-6);
}

.menu-demo-icon-orange {
  --menu-demo-icon-color: var(--x-color-warning-6);
}

.menu-demo-icon-purple {
  --menu-demo-icon-color: var(--x-doc-menu-icon-purple);
}

.menu-demo-state {
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
}

.menu-doc-state {
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
}

.menu-doc-log {
  display: grid;
  gap: 4px;
  width: min(100%, 420px);
  min-height: 44px;
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
}

.menu-doc-layout {
  width: min(100%, 720px);
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.menu-doc-layout .x-layout--content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 16px;
  color: var(--vp-c-text-2);
  background: var(--vp-c-bg);
}

.demo-trend-chart {
  height: 180px;
}

.demo-chart-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

.demo-chart-case {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.demo-chart-case > span {
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
}

.demo-draggable {
  display: grid;
  gap: 8px;
  max-width: 360px;
}

.demo-draggable-item {
  padding: 10px 12px;
  cursor: grab;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-trigger-popup {
  padding: 10px 12px;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-shadow: var(--vp-shadow-3);
}

.demo-textarea-suffix {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  color: var(--vp-c-brand-1);
  font-size: 12px;
  line-height: 1;
  background: var(--x-doc-textarea-suffix-bg);
  border: 1px solid var(--x-doc-textarea-suffix-border);
  border-radius: 4px;
}

.demo-textarea-log {
  width: 100%;
  max-width: 420px;
  min-height: 84px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-inline-state {
  color: var(--vp-c-text-2);
  font-size: 13px;
}

.demo-empty-icon,
.demo-empty-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.demo-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--vp-c-brand-1);
  font-size: 24px;
  font-weight: 600;
  background: var(--x-doc-empty-icon-bg);
  border: 1px solid var(--x-doc-empty-icon-border);
}

.demo-empty-small-icon {
  width: 36px;
  height: 36px;
  color: var(--vp-c-text-2);
  font-size: 16px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
}

.demo-empty-image {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 56px;
  padding: 12px;
  background: var(--x-doc-empty-image-bg);
  border: 1px solid var(--x-doc-empty-image-border);
  border-radius: 8px;
}

.demo-empty-image-line {
  width: 100%;
  height: 6px;
  background: var(--x-doc-empty-image-line-bg);
  border-radius: 999px;
}

.demo-empty-image-line + .demo-empty-image-line {
  margin-top: 8px;
}

.demo-empty-image-line.is-short {
  width: 62%;
}

.demo-empty-provider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.demo-checkbox-label {
  color: var(--vp-c-brand-1);
  font-weight: 500;
}

.demo-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--x-color-white);
  font-size: 12px;
  line-height: 1;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
}

.demo-checkbox-box.is-checked {
  background: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}

.demo-checkbox-box.is-disabled {
  color: var(--vp-c-text-3);
  background: var(--vp-c-bg-soft);
  border-color: var(--vp-c-divider);
}

.demo-checkbox-log {
  width: 100%;
  max-width: 420px;
  min-height: 72px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-radio-label {
  color: var(--vp-c-brand-1);
  font-weight: 500;
}

.demo-radio-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 2px solid var(--vp-c-divider);
  border-radius: 50%;
}

.demo-radio-dot::after {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--x-color-transparent);
  border-radius: 50%;
  content: '';
}

.demo-radio-dot.is-checked {
  border-color: var(--vp-c-brand-1);
}

.demo-radio-dot.is-checked::after {
  background: var(--vp-c-brand-1);
}

.demo-radio-dot.is-disabled {
  border-color: var(--vp-c-divider);
}

.demo-radio-log {
  width: 100%;
  max-width: 420px;
  min-height: 72px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-popup-card {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.demo-popup-card strong {
  color: var(--vp-c-text-1);
  font-size: 14px;
}

.demo-popup-card span {
  color: var(--vp-c-text-2);
  line-height: 20px;
}

.demo-popup-log {
  width: 100%;
  max-width: 420px;
  min-height: 72px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.demo-popup-container {
  position: relative;
  min-height: 180px;
}

.demo-popup-position {
  padding-top: 48px;
  padding-bottom: 48px;
}

.demo-popup-content-strong {
  --x-popup-color-bg: var(--x-doc-popup-strong-bg);
  --x-popup-color-border: var(--x-doc-popup-strong-border);
}

.demo-popup-content-strong,
.demo-popover-content-strong {
  --x-popover-color-bg: var(--x-doc-popup-strong-bg);
  --x-popover-color-border: var(--x-doc-popup-strong-border);
}

.demo-popconfirm-log,
.demo-drawer-log {
  width: 100%;
  max-width: 420px;
  min-height: 72px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 12px;
  line-height: 20px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-sizing: border-box;
}

.demo-popconfirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--x-color-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: var(--vp-c-brand-1);
  border-radius: 50%;
}

.demo-popconfirm-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.demo-popconfirm-content strong {
  color: var(--vp-c-text-1);
  font-size: 13px;
  line-height: 20px;
}

.demo-popconfirm-content span {
  color: var(--vp-c-text-2);
  font-size: 12px;
  line-height: 18px;
}

.demo-drawer-local-shell {
  width: 100%;
  max-width: 560px;
}

.demo-drawer-local-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  color: var(--vp-c-text-2);
  font-size: 13px;
  background: var(--x-doc-drawer-local-grid-bg);
  background-size: 20px 20px;
  border: 1px dashed var(--x-doc-drawer-local-border);
  border-radius: 6px;
  box-sizing: border-box;
}

.demo-drawer-local-container > span {
  padding: 4px 8px;
  background: var(--x-doc-drawer-local-label-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
}

/*
 * 站点页脚。
 *
 * 挂在 layout-bottom 插槽，全站每个页面底部都会渲染。
 * 与文档页共用，首页的主体样式单独维护。
 */
.x-doc-footer {
  padding: 40px 24px 32px;
  border-top: 1px solid var(--vp-c-divider);
}

.x-doc-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  max-width: 1152px;
  margin: 0 auto;
}

.x-doc-footer__brand {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 200px;
}

.x-doc-footer__mark {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--vp-c-brand-1);
}

.x-doc-footer__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.x-doc-footer__brand-text strong {
  color: var(--vp-c-text-1);
  font-weight: 600;
}

.x-doc-footer__brand-text span {
  color: var(--vp-c-text-3);
  font-size: 13px;
}

.x-doc-footer__column {
  min-width: 140px;
}

.x-doc-footer__column h3 {
  margin: 0 0 10px;
  color: var(--vp-c-text-1);
  font-size: 13px;
  font-weight: 600;
}

.x-doc-footer__column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.x-doc-footer__column li + li {
  margin-top: 6px;
}

.x-doc-footer__column a {
  color: var(--vp-c-text-2);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.x-doc-footer__column a:hover {
  color: var(--vp-c-brand-1);
}

.x-doc-footer__about {
  max-width: 300px;
}

.x-doc-footer__about p {
  margin: 0;
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 1.7;
}

.x-doc-footer__about p + p {
  margin-top: 4px;
}
.demo-select-scroll-scope {
  width: 100%;
}
.demo-select-scroll-region {
  height: 200px;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--x-color-border-default);
  border-radius: 8px;
}
.demo-select-scroll-content {
  min-height: 480px;
  padding: 80px 16px 0;
}
.demo-select-scroll-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
/* 首页独立样式。组件预览只使用公开 API 和局部主题，不覆盖内部结构。 */
.x-home-page {
  --home-ink: #20252d;
  --home-muted: #6f7581;
  --home-line: #e9ebf0;
  --home-paper: #fff;
  --home-grid: #e4e8f0;
  --home-shadow: 0 16px 48px -16px rgb(32 51 93 / 14%), 0 2px 8px rgb(32 51 93 / 3%);
}

.dark .x-home-page {
  --home-ink: #eef0f6;
  --home-muted: #a1a7b5;
  --home-line: #313540;
  --home-paper: #242730;
  --home-grid: #3a3e49;
  --home-shadow: 0 16px 48px -16px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 12%);
}

.x-home-page .VPHome {
  margin-bottom: 0;
}

.x-home-page .VPNavBarTitle .title {
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.x-home-page .VPNavBarTitle .logo {
  width: 29px;
  height: 29px;
  margin-right: 0;
}

.x-home {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  color: var(--home-ink);
}

.x-home-hero {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 24px;
  padding: 24px 0 28px;
}

.x-home-copy {
  position: relative;
  z-index: 1;
  padding-top: 16px;
}

.x-home-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 23px;
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
}

.x-home-eyebrow > span {
  width: 7px;
  height: 7px;
  background: var(--home-accent);
  border-radius: 50%;
}

.x-home-eyebrow i {
  width: 2px;
  height: 2px;
  margin: 0 3px;
  background: currentColor;
  border-radius: 50%;
}

.x-home-copy h1 {
  margin: 0;
  font-size: clamp(66px, 5.2vw, 78px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -4.5px;
}

.x-home-title-dot {
  margin-left: 8px;
  color: var(--home-accent);
  transition: color 0.25s;
}

.x-home-headline {
  margin: 19px 0 0;
  font-size: clamp(27px, 2.3vw, 34px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.8px;
}

.x-home-description {
  margin: 22px 0 0;
  color: var(--home-muted);
  font-size: 16px;
  line-height: 1.9;
}

.x-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 27px;
  margin-top: 29px;
}

.x-home-start,
.x-home-explore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s,
    color 0.2s;
}

.x-home-start {
  min-height: 48px;
  padding: 0 23px;
  color: #fff;
  background: var(--home-accent);
  border-radius: 10px;
}

.x-home-start:hover {
  background: color-mix(in srgb, var(--home-accent) 88%, #000);
  transform: translateY(-2px);
}

.x-home-start > span,
.x-home-explore > span {
  font-size: 19px;
  font-weight: 400;
}

.x-home-explore {
  min-height: 48px;
  gap: 12px;
}

.x-home-explore:hover {
  color: var(--home-accent);
}

.x-home-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--home-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  text-decoration: none;
  transition: color 0.2s;
}

.x-home-note:hover {
  color: var(--home-ink);
}

.x-home-ai-mark {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--home-accent);
}

.x-home-install {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 21px;
  padding: 8px 13px;
  color: var(--home-muted);
  background: color-mix(in srgb, var(--home-ink) 3%, var(--home-paper));
  border: 1px solid var(--home-line);
  border-radius: 7px;
  font-size: 12px;
}

.x-home-install > span {
  color: var(--home-accent);
}

.x-home-install code {
  font-family: var(--vp-font-family-mono);
}

.x-home-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  width: 100%;
  padding: 52px 0 28px;
  isolation: isolate;
}

.x-home-canvas-grid {
  position: absolute;
  inset: 6px -10px 6px 10px;
  z-index: -2;
  background-image: radial-gradient(var(--home-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 74%);
}

.x-home-art {
  position: absolute;
  top: 227px;
  left: 29%;
  z-index: -1;
  width: 278px;
  height: 278px;
  color: var(--home-accent);
  transform: rotate(-9deg);
  transition: color 0.3s;
}

.x-home-art svg {
  width: 100%;
  height: 100%;
}

.x-home-art path:nth-child(1) {
  fill: #a7d9cf;
}

.x-home-art path:nth-child(3) {
  fill: #f3b75d;
}

.x-home-art path:nth-child(4) {
  opacity: 0.2;
}

.x-home-orbit {
  position: absolute;
  z-index: -1;
}

.x-home-orbit--mint {
  top: 212px;
  left: 0;
  width: 44px;
  height: 44px;
  background: #a7d9cf;
  border-radius: 50% 50% 12px 50%;
  transform: rotate(-15deg);
}

.x-home-orbit--orange {
  top: 265px;
  right: 27px;
  width: 20px;
  height: 20px;
  background: #f3b75d;
  border-radius: 50%;
}

.x-home-cross {
  position: absolute;
  bottom: 31px;
  left: 18px;
  color: var(--home-muted);
  font-size: 27px;
  font-weight: 300;
  transform: rotate(-12deg);
}

.x-home-palette {
  position: absolute;
  top: 2px;
  right: 100px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--home-paper);
  border: 1px solid var(--home-line);
  border-radius: 40px;
  box-shadow: var(--home-shadow);
  transform: rotate(3deg);
}

.x-home-palette > span {
  margin-right: 8px;
  color: var(--home-muted);
  font-size: 12px;
}

.x-home-palette button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #fff;
  background: var(--swatch);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.x-home-palette button[aria-pressed='true'] {
  box-shadow:
    0 0 0 3px var(--home-paper),
    0 0 0 4px var(--swatch);
}

.x-home-palette button:hover {
  transform: translateY(-2px);
}

.x-home-palette button svg {
  width: 15px;
  height: 15px;
}

.x-home-preview-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: var(--home-paper);
  border: 1px solid var(--home-line);
  border-radius: 15px;
  box-shadow: var(--home-shadow);
}

.x-home-component-card {
  grid-column: 1;
  grid-row: 1;
  margin-top: 10px;
  padding: 21px;
  transform: rotate(-4deg);
}

.x-home-card-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--home-muted);
  font-size: 11px;
  line-height: 18px;
}

.x-home-status-dot {
  width: 6px;
  height: 6px;
  background: #29a37a;
  border-radius: 50%;
}

.x-home-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 17px;
  font-size: 14px;
  font-weight: 500;
}

.x-home-checkbox-row {
  display: flex;
  align-items: center;
}

.x-home-button-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 19px;
}

.x-home-click-feedback {
  color: var(--home-muted);
  font-size: 10px;
  white-space: nowrap;
}

.x-home-form-card {
  grid-column: 3;
  grid-row: 1;
  margin-top: 36px;
  padding: 21px;
  transform: rotate(3deg);
}

.x-home-field {
  display: grid;
  gap: 7px;
  margin: 15px 0 12px;
}

.x-home-field > span {
  font-size: 11px;
  line-height: 18px;
}

.x-home-form-feedback {
  overflow: hidden;
  margin-top: 13px;
  color: var(--home-muted);
  font-size: 10px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-home-form-feedback > span {
  color: var(--home-accent);
}

.dark .x-home-form-feedback > span {
  color: color-mix(in srgb, var(--home-accent) 50%, #fff);
}

.x-home-chart-card {
  grid-column: 1;
  grid-row: 2 / 4;
  padding: 21px 21px 15px;
  transform: rotate(3deg);
}

.x-home-chart-heading,
.x-home-chart-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--home-muted);
  font-size: 11px;
}

.x-home-chart-badge {
  padding: 2px 6px;
  color: var(--home-accent);
  background: color-mix(in srgb, var(--home-accent) 8%, var(--home-paper));
  border-radius: 4px;
  font-size: 9px;
  white-space: nowrap;
  text-decoration: none;
}

.x-home-chart-value {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 14px 0;
}

.x-home-chart-value strong {
  font-size: 31px;
  font-weight: 650;
  letter-spacing: -1px;
}

.x-home-chart-value > span {
  color: #23846a;
  font-size: 11px;
}

.dark .x-home-chart-value > span {
  color: #7bd4b4;
}

.dark .x-home-chart-badge {
  color: color-mix(in srgb, var(--home-accent) 50%, #fff);
}

.x-home-chart-labels {
  margin-top: 7px;
  font-size: 9px;
}

.x-home-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--home-muted);
  font-size: 11px;
  line-height: 18px;
}

.x-home-showcase-heading a:hover {
  background: color-mix(in srgb, var(--home-accent) 14%, var(--home-paper));
}

.x-home-heatmap-card {
  grid-column: 2;
  grid-row: 1;
  margin-top: 20px;
  padding: 18px 19px;
}

.x-home-heatmap-body {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.x-home-showcase-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin: 0;
  color: var(--home-muted);
  font-size: 10px;
  line-height: 18px;
}

.x-home-showcase-feedback .x-home-status-dot {
  flex: none;
  background: var(--home-accent);
}

.x-home-time-card {
  grid-column: 2 / 4;
  grid-row: 2;
  padding: 18px 20px;
}

.x-home-time-description {
  margin: 8px 0 12px;
  color: var(--home-muted);
  font-size: 11px;
  line-height: 16px;
}

.x-home-time-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--home-muted);
  font-family: var(--vp-font-family-mono);
  font-size: 9px;
  line-height: 14px;
}

.x-home-time-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.x-home-time-footer .x-home-showcase-feedback {
  font-family: var(--vp-font-family-mono);
}

.x-home-schedule-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 7px;
  color: var(--home-accent);
  background: color-mix(in srgb, var(--home-accent) 8%, var(--home-paper));
  border: 0;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
}

.x-home-schedule-button:hover {
  background: color-mix(in srgb, var(--home-accent) 14%, var(--home-paper));
}

.dark .x-home-schedule-button {
  color: color-mix(in srgb, var(--home-accent) 50%, #fff);
}

.x-home-tags-card {
  grid-column: 2;
  grid-row: 3;
  padding: 17px 19px;
  transform: rotate(-3deg);
}

.x-home-tags {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  margin-top: 12px;
}

.x-home-tags-empty {
  color: var(--home-muted);
  font-size: 10px;
}

.x-home-progress-card {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  transform: rotate(3deg);
}

.x-home-progress-value {
  font-family: var(--vp-font-family-mono);
  font-size: 10px;
}

.x-home-progress-card strong {
  font-size: 12px;
  font-weight: 500;
}

.x-home-progress-card p {
  margin-top: 4px;
  color: var(--home-muted);
  font-size: 10px;
}

.x-home-canvas-note {
  position: absolute;
  right: 7px;
  bottom: 0;
  color: var(--home-muted);
  font-family: var(--vp-font-family-mono);
  font-size: 9px;
  letter-spacing: 2px;
}

.x-home-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 28px 0 36px;
  border-top: 1px solid var(--home-line);
}

.x-home-feature {
  position: relative;
  padding: 4px 28px 0;
  text-decoration: none;
}

.x-home-feature:first-child {
  padding-left: 0;
}

.x-home-feature + .x-home-feature {
  border-left: 1px solid var(--home-line);
}

.x-home-feature-index {
  color: var(--home-muted);
  font-family: var(--vp-font-family-mono);
  font-size: 16px;
}

.x-home-feature h2 {
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.x-home-feature p {
  max-width: 250px;
  color: var(--home-muted);
  font-size: 12px;
  line-height: 1.8;
}

.x-home-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  font-size: 11px;
  transition:
    color 0.2s,
    gap 0.2s;
}

.x-home-feature:hover .x-home-feature-link {
  gap: 12px;
  color: var(--home-accent);
}

/* 输入控件的焦点由组件自身处理，避免在内部 input 上叠加外框。 */
.x-home a:focus-visible,
.x-home button:focus-visible {
  outline: 3px solid var(--home-accent);
  outline-offset: 5px;
}

@media (max-width: 1199px) {
  .x-home-canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-top: 66px;
  }

  .x-home-preview-card {
    margin-top: 0;
    transform: none;
  }

  .x-home-form-card {
    grid-column: 2;
  }

  .x-home-heatmap-card {
    grid-column: 1;
    grid-row: 2;
  }

  .x-home-chart-card {
    grid-column: 2;
    grid-row: 2;
  }

  .x-home-time-card {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .x-home-tags-card {
    grid-column: 1;
    grid-row: 4;
  }

  .x-home-progress-card {
    grid-column: 2;
    grid-row: 4;
  }
}

@media (max-width: 1200px) and (min-width: 961px) {
  .x-home-copy h1 {
    font-size: 66px;
  }

  .x-home-headline {
    font-size: 27px;
  }

  .x-home-description {
    font-size: 14px;
  }

  .x-home-component-card {
    padding: 19px;
  }

  .x-home-form-card {
    padding: 19px;
  }

  .x-home-chart-card {
    padding: 19px 19px 13px;
  }

  .x-home-tags-card {
    padding: 16px;
  }

  .x-home-progress-card {
    padding: 15px;
  }

  .x-home-art {
    left: 29%;
    width: 250px;
    height: 250px;
  }

  .x-home-palette {
    right: 58px;
  }
}

@media (max-width: 960px) {
  .x-home {
    padding: 0 24px;
  }

  .x-home-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 42px 0 36px;
  }

  .x-home-copy {
    padding: 0;
    text-align: center;
  }

  .x-home-eyebrow,
  .x-home-actions {
    justify-content: center;
  }

  .x-home-copy h1 {
    font-size: 66px;
  }

  .x-home-headline {
    margin-top: 14px;
    font-size: 28px;
  }

  .x-home-description {
    margin-top: 19px;
    font-size: 14px;
  }

  .x-home-actions {
    margin-top: 24px;
  }

  .x-home-note {
    margin-top: 21px;
  }

  .x-home-install {
    margin: 17px auto 0;
  }

  .x-home-canvas {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 70px 0 36px;
  }

  .x-home-preview-card {
    width: 100%;
  }

  .x-home-art {
    top: 85px;
    left: 28%;
  }

  .x-home-palette {
    top: 0;
    right: 16px;
  }

  .x-home-canvas-note {
    right: 0;
    bottom: 0;
  }

  .x-home-cross {
    display: none;
  }

  .x-home-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  .x-home-feature,
  .x-home-feature:first-child {
    padding: 0 20px;
  }

  .x-home-feature:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 600px) {
  .x-home-hero {
    gap: 30px;
    padding-top: 28px;
  }

  .x-home-copy h1 {
    font-size: 60px;
    letter-spacing: -3.5px;
  }

  .x-home-headline {
    font-size: 25px;
  }

  .x-home-canvas {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 360px;
    padding-top: 64px;
  }

  .x-home-preview-card {
    grid-column: 1;
    grid-row: auto;
  }

  .x-home-component-card {
    padding: 20px;
  }

  .x-home-form-card {
    padding: 20px;
  }

  .x-home-chart-card {
    padding: 20px 20px 14px;
  }

  .x-home-tags-card {
    padding: 17px 20px;
  }

  .x-home-progress-card {
    padding: 18px 20px;
  }

  .x-home-palette {
    right: 8px;
  }

  .x-home-art {
    top: 60px;
    left: 12%;
    width: 240px;
    height: 240px;
  }

  .x-home-orbit {
    display: none;
  }

  .x-home-canvas-note {
    font-size: 8px;
  }

  .x-home-feature,
  .x-home-feature:first-child {
    padding-right: 15px;
  }

  .x-home-feature h2 {
    font-size: 14px;
  }

  .x-home-feature p {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-home *,
  .x-home *::before,
  .x-home *::after {
    scroll-behavior: auto;
    transition: none !important;
  }
}

.alert-demo-status[data-v-f2134fe0] {
  color: var(--vp-c-text-2);
  font-size: 13px;
}
.alert-demo-icon[data-v-f2134fe0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-weight: 700;
}
.alert-demo-icon-normal[data-v-f2134fe0] {
  color: var(--x-color-primary);
}
.alert-demo-banner[data-v-f2134fe0] {
  gap: 0;
}
.alert-demo-dark[data-v-f2134fe0] {
  display: grid;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 8px;
  background: var(--x-color-bg-surface);
}

.demo-axis-layout[data-v-dd66b055] {
    width: 100%;
    min-width: 0;
}
.demo-axis-controls[data-v-dd66b055] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    color: var(--x-color-text-secondary);
    font-size: 13px;
}
.demo-axis-controls label[data-v-dd66b055] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.demo-axis-controls input[data-v-dd66b055] {
    accent-color: var(--x-color-primary);
}
.demo-axis-controls input[type='range'][data-v-dd66b055] {
    width: 120px;
}
.demo-axis-controls input[type='checkbox'][data-v-dd66b055] {
    width: auto;
}
.demo-axis-chart[data-v-dd66b055] {
    min-width: 0;
}

.boxicons-page {
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 24px 0 40px;
}
.boxicons-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.boxicons-tabs {
  display: inline-flex;
  gap: 8px;
}
.boxicons-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  color: var(--x-color-text-2);
  font: inherit;
  font-size: 14px;
  background: var(--x-color-fill-1);
  border: 1px solid transparent;
  border-radius: var(--x-border-radius-medium);
  cursor: pointer;
  transition:
    color var(--x-transition-duration-1),
    background-color var(--x-transition-duration-1),
    border-color var(--x-transition-duration-1);
}
.boxicons-tab:hover {
  color: var(--x-color-primary-6);
}
.boxicons-tab.is-active {
  color: var(--x-color-primary-6);
  background: var(--x-color-primary-1);
  border-color: var(--x-color-primary-6);
}
.boxicons-tab em {
  color: var(--x-color-text-3);
  font-size: 12px;
  font-style: normal;
}
.boxicons-controls {
  display: inline-flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.boxicons-color-field,
.boxicons-range-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--x-color-text-3);
  font-size: 13px;
}
.boxicons-color-field code {
  color: var(--x-color-text-2);
  font-size: 12px;
}
.boxicons-color-reset {
  padding: 0;
  color: var(--x-color-primary-6);
  font: inherit;
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.boxicons-range-field input {
  width: 110px;
}
.boxicons-range-field em {
  color: var(--x-color-text-2);
  font-style: normal;
}
.boxicons-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--x-color-fill-1);
  border: 1px solid transparent;
  border-radius: var(--x-border-radius-medium);
}
.boxicons-search:focus-within {
  background: var(--x-color-bg-2);
  border-color: var(--x-color-primary-6);
}
.boxicons-search input {
  min-width: 0;
  flex: 1;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
.boxicons-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--x-color-text-3);
  font-size: 13px;
}
.boxicons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  border-top: 1px solid var(--x-border-color);
  border-left: 1px solid var(--x-border-color);
}
.boxicons-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 112px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--x-border-color);
  border-bottom: 1px solid var(--x-border-color);
  cursor: pointer;
  transition:
    color var(--x-transition-duration-1),
    background-color var(--x-transition-duration-1);
}
.boxicons-card:hover,
.boxicons-card.is-selected {
  color: var(--x-color-primary-6);
  background: var(--x-color-fill-1);
}

/* 只命中名称节点：早期写法 .boxicons-card span 会把图标自身的 span 一起命中，
   导致图标被拉满整行宽、颜色被强制为 text-2。 */
.boxicons-card-name {
  width: 100%;
  min-width: 0;
  color: var(--x-color-text-2);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boxicons-card:hover .boxicons-card-name,
.boxicons-card.is-selected .boxicons-card-name {
  color: var(--x-color-primary-6);
}
.boxicons-card-pack {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--x-color-text-4);
  font-size: 10px;
  font-style: normal;
  line-height: 14px;
}
.boxicons-empty {
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--x-color-text-3);
  border: 1px dashed var(--x-border-color);
  border-radius: var(--x-border-radius-medium);
}

/* 底部悬浮详情栏：sticky + 容器末尾，滚动浏览图标墙时始终可见，
   不必再滚到网格底部才能查看/复制。 */
.boxicons-detail {
  position: sticky;
  z-index: 20;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: var(--x-color-bg-2);
  border: 1px solid var(--x-border-color);
  border-radius: var(--x-border-radius-large);
  box-shadow: var(--x-shadow3-up);
}
.boxicons-detail-preview {
  display: flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--x-color-fill-1);
  border-radius: var(--x-border-radius-medium);
}
.boxicons-detail-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.boxicons-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.boxicons-detail-name {
  min-width: 0;
  color: var(--x-color-text-1);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boxicons-detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  color: var(--x-color-text-3);
  background: transparent;
  border: 0;
  border-radius: var(--x-border-radius-small);
  cursor: pointer;
}
.boxicons-detail-close:hover {
  color: var(--x-color-text-1);
  background: var(--x-color-fill-2);
}
.boxicons-detail-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--x-color-text-3);
  font-size: 12px;
}
.boxicons-detail-meta code {
  color: var(--x-color-text-2);
  font-size: 12px;
}
.boxicons-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.boxicons-demo .x-icon {
  color: var(--x-color-text-1);
}
.boxicons-demo .x-tag .x-icon {
  margin-right: 4px;
  font-size: 14px;
  vertical-align: -2px;
}

/* 容器加宽见 src/docs/.vitepress/theme/style.css 的 .boxicons-doc-page 规则 */
@media (max-width: 640px) {
.boxicons-toolbar {
    align-items: stretch;
    flex-direction: column;
}
.boxicons-search {
    width: 100%;
}
.boxicons-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.boxicons-detail {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    bottom: 10px;
    padding: 12px;
}
.boxicons-detail-preview {
    width: 52px;
    height: 52px;
}
.boxicons-detail-actions {
    width: 100%;
}
}

.demo-button-dark[data-v-2c313dbe] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background: var(--x-color-bg-surface);
}
.demo-button-row[data-v-2c313dbe] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.demo-button-field[data-v-2c313dbe] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.demo-button-field > span[data-v-2c313dbe] {
  white-space: nowrap;
}
.demo-button-field[data-v-2c313dbe] .demo-button-select {
  width: 136px;
  flex: none;
}
.demo-button-log[data-v-2c313dbe] {
  display: grid;
  gap: 4px;
  min-height: 28px;
  color: var(--vp-c-text-2);
  font-size: 13px;
}

.dialog-local-container[data-v-ebbeae8f] {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border: 1px dashed var(--x-color-neutral-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}
.dialog-host-row[data-v-ebbeae8f] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.dialog-switch-host[data-v-ebbeae8f] {
  position: relative;
  flex: 1 1 300px;
  height: 320px;
  overflow: auto;
  border: 1px dashed var(--x-color-neutral-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}
.dialog-host-content[data-v-ebbeae8f] {
  min-height: 640px;
  padding: 12px;
}

.demo-draggable-list[data-v-fd323cd2] {
  width: 100%;
}
.demo-draggable-item[data-v-fd323cd2],
.demo-draggable-row[data-v-fd323cd2] {
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  background: var(--x-color-bg-2, #fff);
  border: 1px solid var(--x-color-border-2, #e5e6eb);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.demo-draggable-item[data-v-fd323cd2]:active,
.demo-draggable-row[data-v-fd323cd2]:active {
  cursor: grabbing;
}
.demo-draggable-item strong[data-v-fd323cd2],
.demo-draggable-row span[data-v-fd323cd2] {
  color: var(--x-color-text-1, #1d2129);
  font-size: 14px;
  font-weight: 500;
}
.demo-draggable-item span[data-v-fd323cd2],
.demo-draggable-row small[data-v-fd323cd2] {
  color: var(--x-color-text-3, #86909c);
  font-size: 12px;
}
.demo-draggable-item.is-disabled[data-v-fd323cd2] {
  cursor: not-allowed;
  opacity: 0.62;
}
.demo-draggable-row.is-locked[data-v-fd323cd2] {
  cursor: default;
  background: var(--x-color-fill-1, #f7f8fa);
}
.demo-draggable-handle[data-v-fd323cd2] {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--x-color-text-3, #86909c);
  cursor: grab;
  background: transparent;
  border: 0;
}
.demo-draggable-board[data-v-fd323cd2] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.demo-draggable-board section[data-v-fd323cd2] {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 12px;
  background: var(--x-color-fill-1, #f7f8fa);
  border: 1px solid var(--x-color-border-2, #e5e6eb);
  border-radius: 6px;
}
.demo-draggable-drop-list[data-v-fd323cd2] {
  flex: 1;
  min-height: 116px;
  padding-bottom: 24px;
}
.demo-draggable-drop-hint[data-v-fd323cd2] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--x-color-text-4, #c9cdd4);
  font-size: 12px;
  border: 1px dashed var(--x-color-border-2, #e5e6eb);
  border-radius: 6px;
}
.demo-draggable-board h4[data-v-fd323cd2] {
  margin: 0 0 10px;
  color: var(--x-color-text-1, #1d2129);
  font-size: 14px;
}
.demo-draggable-log[data-v-fd323cd2] {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--x-color-text-2, #4e5969);
  font-size: 12px;
  background: var(--x-color-fill-1, #f7f8fa);
  border-radius: 6px;
}
.demo-draggable-actions[data-v-fd323cd2] {
  display: flex;
  gap: 12px;
  align-items: center;
}
.demo-draggable-actions span[data-v-fd323cd2] {
  color: var(--x-color-text-2, #4e5969);
  font-size: 13px;
}
.demo-draggable-ghost[data-v-fd323cd2] {
  color: transparent;
  background: rgba(22, 93, 255, 0.08);
  border-color: #165dff;
  opacity: 1;
}
.demo-draggable-chosen[data-v-fd323cd2] {
  border-color: #165dff;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.12);
}
.demo-draggable-drag[data-v-fd323cd2] {
  box-shadow: 0 8px 24px rgba(29, 33, 41, 0.16);
}
@media (max-width: 640px) {
.demo-draggable-board[data-v-fd323cd2] {
    grid-template-columns: 1fr;
}
}

.demo-dropdown-context[data-v-ec5a75d3] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 520px);
  min-height: 220px;
  padding: 32px;
  color: var(--x-color-text-2);
  text-align: center;
  border: 1px dashed var(--x-color-fill-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}
.demo-dropdown-icon[data-v-ec5a75d3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--x-color-primary);
  font-size: 12px;
  font-weight: var(--x-font-weight-500);
  border-radius: 50%;
  background: var(--x-color-primary-light-1);
}
.demo-dropdown-footer[data-v-ec5a75d3] {
  box-sizing: border-box;
  min-width: 180px;
  padding: 8px 12px;
  color: var(--x-color-text-2);
  font-size: 12px;
}
.demo-dropdown-empty[data-v-ec5a75d3] {
  color: var(--x-color-text-3);
  font-size: 13px;
}

.finicon-tools,
.finicon-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 28px;
}
.finicon-browser {
  gap: 28px;
}
.finicon-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.finicon-search {
  display: inline-flex;
  width: min(100%, 520px);
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--x-color-text-3);
  background: var(--x-color-fill-1);
  border: 0;
  border-radius: 0;
}
.finicon-search input {
  min-width: 0;
  flex: 1;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
.finicon-search input::placeholder {
  color: var(--x-color-text-4);
}
.finicon-source {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  color: var(--x-color-text-3);
  font-size: 13px;
}
.finicon-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.finicon-section {
  min-width: 0;
}
.finicon-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid var(--x-border-color);
  border-bottom: 0;
}
.finicon-section-head h3 {
  margin: 0;
  color: var(--x-color-text-1);
  font-size: 16px;
  line-height: 24px;
}
.finicon-section-head span {
  color: var(--x-color-text-3);
  font-size: 13px;
  line-height: 20px;
}
.finicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  border-top: 1px solid var(--x-border-color);
  border-left: 1px solid var(--x-border-color);
}
.finicon-card {
  display: flex;
  min-width: 0;
  height: 136px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 16px 12px;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--x-border-color);
  border-bottom: 1px solid var(--x-border-color);
  border-radius: 0;
  cursor: pointer;
  transition:
    color var(--x-transition-duration-1),
    background-color var(--x-transition-duration-1),
    border-color var(--x-transition-duration-1);
}
.finicon-card:hover,
.finicon-card.is-selected {
  color: var(--x-color-primary-6);
  background: var(--x-color-fill-1);
}
.finicon-card > .x-icon {
  color: currentColor;
}
.finicon-card span {
  width: 100%;
  min-width: 0;
  color: var(--x-color-text-2);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finicon-empty {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--x-color-text-3);
  background: transparent;
  border: 1px dashed var(--x-border-color);
  border-radius: var(--x-border-radius-medium);
}
.finicon-inline-demo,
.finicon-finance-demo {
  align-items: center;
  gap: 14px;
}
.finicon-finance-demo .x-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 640px) {
.finicon-toolbar {
    align-items: stretch;
    flex-direction: column;
}
.finicon-search {
    width: 100%;
}
.finicon-source {
    justify-content: space-between;
}
.finicon-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.finicon-card {
    height: 124px;
}
}
body:has(.finicon-page) .VPDoc .content-container {
  max-width: 880px;
}
body:has(.finicon-page) .VPDoc .content {
  max-width: 880px;
}
.finicon-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: min(100%, 880px);
  margin: 28px 0 40px;
  color: #111827;
}
.finicon-customizer {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(180px, 1fr) minmax(180px, 1fr);
  align-items: end;
  gap: 16px 20px;
  padding: 16px 18px;
  background: #f6f7fb;
  border-radius: 16px;
}
.finicon-color-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  color: #111827;
  font-size: 14px;
}
.finicon-color-field input {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
}
.finicon-color-field code {
  grid-column: 2;
  color: #4b5563;
  font-size: 13px;
  background: transparent;
}
.finicon-range-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  color: #111827;
  font-size: 14px;
}
.finicon-range-field em {
  color: #6b7280;
  font-style: normal;
}
.finicon-range-field input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #165dff;
}
.finicon-canvas {
  min-width: 0;
  width: 100%;
}
.finicon-toolbar {
  margin-bottom: 28px;
}
.finicon-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  color: #64748b;
  background: #f6f7fb;
  border-radius: 999px;
}
.finicon-search > .x-icon {
  font-size: 22px;
}
.finicon-search input {
  color: #111827;
  font-size: 16px;
}
.finicon-search input::placeholder {
  color: #a3adbf;
}
.finicon-source {
  margin-left: 0;
}
.finicon-sections {
  gap: 40px;
}
.finicon-section-head {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
}
.finicon-section-head h3 {
  color: #111827;
  font-size: 20px;
  line-height: 28px;
}
.finicon-section-head span {
  color: #64748b;
  font-size: 16px;
}
.finicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 30px 18px;
  padding: 32px 0 8px;
  border: 0;
}
.finicon-card {
  height: 80px;
  gap: 12px;
  padding: 0;
  color: var(--finicon-doc-icon-color, #000);
  background: transparent;
  border: 0;
}
.finicon-card:hover {
  color: #165dff;
  background: transparent;
}
.finicon-card > .x-icon,
.finicon-card > .x-icon .x-icon--raw,
.finicon-card > .x-icon svg {
  color: currentColor;
  font-size: var(--finicon-doc-icon-size, 24px) !important;
  width: var(--finicon-doc-icon-size, 24px) !important;
  height: var(--finicon-doc-icon-size, 24px) !important;
}
.finicon-card > .x-icon svg {
  display: block;
  flex: 0 0 auto;
}
.finicon-card > .x-icon svg [stroke-width] {
  stroke-width: var(--finicon-doc-stroke-width, 2) !important;
}
.finicon-card span {
  color: #94a3b8;
  font-size: 13px;
  line-height: 18px;
}
.finicon-card:hover span {
  color: #165dff;
}
@media (max-width: 900px) {
body:has(.finicon-page) .VPDoc .content-container,
  body:has(.finicon-page) .VPDoc .content {
    max-width: 100%;
}
.finicon-page {
    grid-template-columns: 1fr;
    width: 100%;
}
.finicon-customizer {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
}
.finicon-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 32px 16px;
}
}

.grid-doc-demo[data-v-31d93530] {
  width: 100%;
}
.grid-demo-cell[data-v-31d93530] {
  min-height: 40px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--x-color-primary-light-3);
  border-radius: 6px;
  background: var(--x-color-primary-light-1);
  color: var(--x-color-text-1);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}
.grid-demo-cell-soft[data-v-31d93530] {
  border-color: var(--x-color-success-3);
  background: var(--x-color-success-light-1);
}
.grid-demo-cell-medium[data-v-31d93530] {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-demo-cell-tall[data-v-31d93530] {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-demo-cell-action[data-v-31d93530] {
  border-color: var(--x-color-warning-3);
  background: var(--x-color-warning-light-1);
}
.grid-demo-tall[data-v-31d93530] {
  min-height: 112px;
}
.grid-demo-toolbar[data-v-31d93530] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--x-color-text-2);
  font-size: 13px;
}

.demo-icon-row {
  align-items: center;
  gap: 16px;
}
.demo-icon-row > .x-icon {
  font-size: 20px;
}
.demo-icon-actions {
  align-items: center;
  gap: 12px;
}
.demo-icon-actions .x-icon {
  font-size: 16px;
}
.demo-icon-browser {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 18px 0 28px;
}
.demo-icon-customizer {
  display: grid;
  grid-template-columns: minmax(150px, 190px) repeat(2, minmax(120px, 1fr));
  align-items: end;
  gap: 16px 20px;
  padding: 16px 18px;
  background: var(--x-color-fill-1);
  border-radius: 16px;
}
.demo-icon-color-field,
.demo-icon-range-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  color: var(--x-color-text-1);
  font-size: 14px;
}
.demo-icon-color-field {
  grid-template-columns: 1fr;
  align-items: start;
}
.demo-icon-color-field > span:first-child {
  grid-column: 1 / -1;
}
.demo-icon-color-control {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
}
.demo-icon-color-field input {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
}
.demo-icon-color-field code {
  color: var(--x-color-text-2);
  font-size: 13px;
  background: transparent;
}
.demo-icon-range-field em {
  color: var(--x-color-text-3);
  font-style: normal;
}
.demo-icon-range-field input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--x-color-primary);
}
.demo-icon-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
}
.demo-icon-search {
  display: inline-flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: var(--x-color-text-3);
  background: var(--x-color-fill-1);
  border: 0;
  border-radius: 999px;
}
.demo-icon-search .x-icon {
  flex: 0 0 auto;
  font-size: 22px;
}
.demo-icon-search input {
  min-width: 0;
  flex: 1;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  outline: none;
}
.demo-icon-search input::placeholder {
  color: var(--x-color-text-4);
}
.demo-icon-count {
  flex: 0 0 auto;
  color: var(--x-color-text-3);
  font-size: 16px;
  line-height: 24px;
}
.demo-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 30px 18px;
  width: 100%;
  padding: 24px 0 8px;
}
.demo-icon-cell {
  display: flex;
  min-width: 0;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  color: var(--x-color-text-1);
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--x-transition-duration-1);
}
.demo-icon-cell:hover {
  color: var(--x-color-primary);
}
.demo-icon-cell:focus-visible {
  outline: 2px solid var(--x-color-border-focus);
  outline-offset: 6px;
  border-radius: 8px;
}
.demo-icon-alias {
  color: var(--x-color-text-3);
  font-size: 10px;
  line-height: 1.5;
}
.demo-icon-cell .x-icon {
  flex: 0 0 auto;
  color: var(--demo-icon-color, #000) !important;
  font-size: var(--demo-icon-size, 24px) !important;
  width: var(--demo-icon-size, 24px) !important;
  height: var(--demo-icon-size, 24px) !important;
}
.demo-icon-cell .x-icon svg {
  display: block;
  width: var(--demo-icon-size, 24px) !important;
  height: var(--demo-icon-size, 24px) !important;
  color: var(--demo-icon-color, #000) !important;
}
.demo-icon-cell .x-icon svg[stroke],
.demo-icon-cell .x-icon svg [stroke] {
  stroke: var(--demo-icon-color, #000) !important;
}
.demo-icon-cell .x-icon svg:not([stroke='none']) {
  stroke: var(--demo-icon-color, #000) !important;
}
.demo-icon-cell .x-icon svg[fill]:not([fill='none']),
.demo-icon-cell .x-icon svg [fill]:not([fill='none']) {
  fill: var(--demo-icon-color, #000) !important;
}
.demo-icon-name {
  width: 100%;
  min-width: 0;
  color: var(--x-color-text-3);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  overflow-wrap: anywhere;
}
.demo-icon-cell:hover .demo-icon-name {
  color: var(--x-color-primary);
}
.demo-icon-empty {
  display: flex;
  width: 100%;
  min-height: 128px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--x-color-text-3);
  background: var(--x-color-fill-1);
  border: 1px dashed var(--x-border-color);
  border-radius: var(--x-border-radius-small);
}
@media (max-width: 640px) {
.demo-icon-customizer {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
}
.demo-icon-toolbar {
    align-items: stretch;
    flex-direction: column;
}
.demo-icon-search {
    width: 100%;
}
.demo-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 32px 16px;
}
}

.image-demo-grid[data-v-9b319b1b] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.image-demo-actions[data-v-9b319b1b] {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.image-demo-state[data-v-9b319b1b],
.image-demo-log[data-v-9b319b1b] {
  color: var(--x-color-text-secondary);
  font-size: 13px;
}
.image-demo-log[data-v-9b319b1b] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.image-demo-error[data-v-9b319b1b] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--x-color-text-secondary);
  font-size: 12px;
  background: var(--x-color-fill-2);
}
.image-demo-action[data-v-9b319b1b] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: currentColor;
  font-size: 13px;
  background: transparent;
}
.image-demo-placeholder[data-v-9b319b1b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  width: 100%;
  height: 100%;
  color: var(--x-color-text-secondary);
  background: var(--x-color-fill-2);
}
.image-demo-preview-host[data-v-9b319b1b] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--x-color-fill-1);
}

.input-related-demo[data-v-b61031d7],
.input-password-demo[data-v-b61031d7] {
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.demo-link-color-scope[data-v-993d6745] {
  width: 100%;
  padding: 16px;
  color: var(--x-color-text-primary);
  background: var(--x-color-bg-surface);
}
.demo-link-color-scope .demo-link-row[data-v-993d6745] { margin-bottom: 12px;
}
.demo-link-row[data-v-993d6745] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.demo-link-log[data-v-993d6745] {
  min-height: 24px;
  color: var(--x-color-text-2);
  font-size: 13px;
  line-height: 1.6;
}

.message-box-local-container[data-v-0f50b399] {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  border: 1px dashed var(--x-color-neutral-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}

.message-local-container[data-v-9dc3cfa4] {
  position: relative;
  width: 100%;
  min-height: 120px;
  overflow: hidden;
  border: 1px dashed var(--x-color-neutral-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}

.demo-network-log[data-v-c9deca3d] {
  min-width: 0;
  width: 100%;
  color: var(--x-color-text-2);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.demo-network-card[data-v-c9deca3d] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--x-color-text-2);
  font-size: 13px;
}

.notification-local-container[data-v-4cc1e587] {
  position: relative;
  width: 100%;
  min-height: 160px;
  overflow: hidden;
  border: 1px dashed var(--x-color-neutral-4);
  border-radius: 6px;
  background: var(--x-color-fill-1);
}
.notification-custom-icon[data-v-4cc1e587] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ff7125;
  background: #fff0e8;
  border-radius: 999px;
}

.demo-pagination-log[data-v-d06f34c2] {
  display: grid;
  gap: 4px;
  color: var(--x-color-text-2);
  font-size: 13px;
}
.demo-pagination-row[data-v-d06f34c2] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

.demo-popover-card[data-v-75faadcc] {
  display: grid;
  gap: 8px;
}
.demo-popover-log[data-v-75faadcc] {
  width: 100%;
  min-height: 32px;
  color: var(--vp-c-text-2);
  font-size: 13px;
}
.demo-popover-container[data-v-75faadcc] {
  position: relative;
  min-height: 180px;
  align-items: flex-start;
}
.demo-popover-position[data-v-75faadcc] {
  flex-wrap: wrap;
}

.progress-demo-box[data-v-24ad9560] {
  width: 100%;
}
.progress-demo-box[data-v-24ad9560] .x-progress {
  width: 100%;
}
.progress-demo-circles[data-v-24ad9560] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.progress-demo-circles[data-v-24ad9560] .x-progress {
  width: auto;
}
.progress-demo-actions[data-v-24ad9560] {
  display: flex;
  gap: 8px;
}
.progress-demo-inline[data-v-24ad9560] {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  color: var(--x-color-text-2);
  font-size: var(--x-font-size-body-1);
}

.rate-demo-medal[data-v-1c3863d5] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-weight: 700;
  font-size: 0.78em;
  color: currentColor;
}

.scrollbar-demo-box[data-v-0b9015aa] {
  width: 100%;
}
.scrollbar-demo-content[data-v-0b9015aa] {
  box-sizing: border-box;
  height: 400px;
  padding: 8px 12px;
  color: #334155;
  background: #f8fafc;
}
.scrollbar-demo-content p[data-v-0b9015aa] {
  margin: 0;
  line-height: 32px;
}
.scrollbar-demo-wide[data-v-0b9015aa] {
  display: inline-flex;
  box-sizing: border-box;
  gap: 12px;
  width: max-content;
  min-width: 940px;
  padding: 12px;
  background: #f8fafc;
}
.scrollbar-demo-wide span[data-v-0b9015aa],
.scrollbar-demo-grid span[data-v-0b9015aa] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 32px;
  color: #0f172a;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 4px;
}
.scrollbar-demo-grid[data-v-0b9015aa] {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(8, 96px);
  gap: 8px;
  width: max-content;
  padding: 12px;
  background: #f8fafc;
}
.scrollbar-demo-track-content[data-v-0b9015aa] {
  padding-bottom: 24px;
}
.scrollbar-demo-track-grid[data-v-0b9015aa] {
  padding-right: 28px;
  padding-bottom: 28px;
}
.scrollbar-demo-actions[data-v-0b9015aa] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scrollbar-demo-compare[data-v-0b9015aa] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  width: 100%;
}
.scrollbar-demo-compare-item[data-v-0b9015aa] {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.scrollbar-demo-compare-item strong[data-v-0b9015aa] {
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
[data-v-0b9015aa] .scrollbar-demo-shell {
  padding: 8px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
}

.spin-demo-row[data-v-dff9b604] {
  gap: 24px;
  align-items: center;
}
.spin-demo-panel[data-v-dff9b604] {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  width: min(100%, 360px);
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg-soft);
}
.spin-demo-panel p[data-v-dff9b604] {
  margin: 0;
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 1.6;
}
.spin-demo-panel-compact[data-v-dff9b604] {
  min-height: 72px;
}
.spin-demo-icon[data-v-dff9b604] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: var(--x-color-primary);
  font-weight: 700;
}
.spin-demo-element[data-v-dff9b604] {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--x-color-border-default);
  border-top-color: var(--x-color-primary);
  border-radius: 50%;
  animation: spin-demo-rotate-dff9b604 0.8s linear infinite;
}
.spin-demo-tip[data-v-dff9b604] {
  color: var(--x-color-primary);
}

/* 延迟显示演示：统计行与面板之间的距离 */
.demo-spin-count[data-v-dff9b604] {
  color: var(--vp-c-text-2);
  font-size: 13px;
}
.demo-spin-delay-track[data-v-dff9b604] {
  width: min(100%, 360px);
}
@keyframes spin-demo-rotate-dff9b604 {
to {
    transform: rotate(360deg);
}
}

.demo-step-node[data-v-caa83b60] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--x-color-white);
  font-size: 13px;
  font-weight: 600;
  background: var(--x-color-primary-6);
  border-radius: var(--x-border-radius-circle);
}

.table-combination-demo[data-v-87401d47] {
    width: 100%;
    min-width: 0;
}
.table-combination-actions[data-v-87401d47] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.table-combination-demo p[data-v-87401d47] {
    margin: 12px 0 0;
    font-size: 13px;
}

.table-followup-demo[data-v-9fef91db] {
    display: grid;
    gap: 12px;
    width: 100%;
}
.table-followup-actions[data-v-9fef91db] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-keyboard-demo[data-v-0bcaa797] {
    display: grid;
    gap: 12px;
    width: 100%;
}

.table-height-demo[data-v-836151fb] {
    display: grid;
    gap: 12px;
    width: 100%;
}
.table-height-actions[data-v-836151fb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.table-height-details[data-v-836151fb] {
    padding: 12px;
}
.table-height-details p[data-v-836151fb] {
    margin: 0 0 8px;
}
.table-height-details p[data-v-836151fb]:last-child {
    margin-bottom: 0;
}

.table-layer-demo[data-v-dcb44881] {
  width: 100%;
  max-width: 720px;
  height: 300px;
  overflow: auto;
}
.table-layer-demo__header[data-v-dcb44881] {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 55px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--x-color-bg-surface);
  color: var(--x-color-text-primary);
}
.table-doc-demo[data-v-dcb44881] {
  gap: 12px;
}
.example-box.table-doc-sticky-demo[data-v-dcb44881] {
  overflow: visible;
}

/* 可编辑单元格：非编辑态用虚线提示可双击 */
.table-doc-editable {
  display: block;
  min-height: 22px;
  padding: 0 4px;
  border-bottom: 1px dashed var(--x-color-border-default);
  cursor: pointer;
}
.table-doc-editable:hover {
  color: var(--x-color-primary-solid);
  border-bottom-color: var(--x-color-primary-solid);
}
.table-doc-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}
.table-doc-filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.table-doc-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-weight: var(--x-font-weight-600);
  line-height: 1;
  border: var(--x-border-1) solid var(--x-color-border-default);
  border-radius: var(--x-border-radius-small);
}
.table-doc-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--x-color-text-2);
  font-size: 13px;
}
.table-doc-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--x-color-text-2);
  font-size: 13px;
}
.table-doc-expanded,
.table-doc-footer,
.table-doc-empty {
  color: var(--x-color-text-2);
  font-size: 13px;
}
.table-doc-status {
  color: var(--x-color-warning-6);
  font-weight: 500;
}
.table-doc-status.is-stable {
  color: var(--x-color-success-6);
}

.demo-tag-color-scope[data-v-7c7ff256] {
  width: 100%;
  padding: 16px;
  color: var(--x-color-text-primary);
  background: var(--x-color-bg-surface);
}

.timeline-demo-box[data-v-0b97f7b6] {
  display: block;
  width: 420px;
  max-width: 100%;
}
.timeline-demo-box[data-v-0b97f7b6] .x-timeline {
  width: 100%;
}
.timeline-demo-wide[data-v-0b97f7b6] {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 720px;
}
.timeline-demo-horizontal[data-v-0b97f7b6] {
  display: block;
  max-width: 720px;
  overflow-x: auto;
}
.timeline-demo-stack[data-v-0b97f7b6] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.timeline-demo-actions[data-v-0b97f7b6] {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.timeline-demo-dot-icon[data-v-0b97f7b6] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  background: #f59e0b;
}
.timeline-demo-pending-dot[data-v-0b97f7b6] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
.timeline-demo-pending-dot[data-v-0b97f7b6]::before {
  position: absolute;
  inset: 0;
  border: 3px solid rgb(22 93 255 / 16%);
  border-radius: inherit;
  content: '';
  animation: timeline-demo-pending-pulse-0b97f7b6 1.8s ease-in-out infinite;
  transform-origin: center;
}
.timeline-demo-pending-dot[data-v-0b97f7b6]::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--x-color-primary);
  content: '';
}
@keyframes timeline-demo-pending-pulse-0b97f7b6 {
0%,
  100% {
    opacity: 0.95;
    transform: scale(1);
}
50% {
    opacity: 0.45;
    transform: scale(0.58);
}
}
@media (max-width: 640px) {
.timeline-demo-wide[data-v-0b97f7b6] {
    display: block;
}
.timeline-demo-wide[data-v-0b97f7b6] .x-timeline + .x-timeline {
    margin-top: 28px;
}
}

.tooltip-control-row[data-v-08f10f6f] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
.tooltip-position-demo[data-v-08f10f6f] {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  gap: 28px 10px;
  align-items: center;
  justify-content: center;
  width: min(100%, 560px);
  min-height: 260px;
}
.tooltip-position-demo .x-button[data-v-08f10f6f] {
  width: 100px;
}
@media (max-width: 640px) {
.tooltip-position-demo[data-v-08f10f6f] {
    grid-template-columns: repeat(3, 92px);
    gap: 14px 8px;
    justify-content: flex-start;
    min-height: 0;
    overflow-x: auto;
}
}
.tooltip-log[data-v-08f10f6f] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 20px;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}
.tooltip-custom-content[data-v-08f10f6f] {
  display: grid;
  gap: 4px;
}
.tooltip-custom-content span[data-v-08f10f6f] {
  color: rgb(255 255 255 / 72%);
}
[data-v-08f10f6f] .tooltip-opened-trigger {
  color: var(--x-color-primary);
  border-color: var(--x-color-primary);
}

.transfer-demo[data-v-78444bec] {
  display: block;
  overflow-x: auto;
}
.transfer-demo > p[data-v-78444bec] {
  margin: 12px 0;
}

.demo-trigger-primitive-panel[data-v-04b31ca5] {
  box-sizing: border-box;
  max-width: 280px;
  padding: 10px 12px;
  color: var(--vp-c-text-1);
  font-size: 13px;
  line-height: 20px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-shadow: var(--vp-shadow-3);
}
.demo-trigger-host[data-v-04b31ca5] {
  position: relative;
  width: 100%;
  min-height: 60px;
  border: 1px dashed var(--vp-c-divider);
}
.demo-trigger-scroll[data-v-04b31ca5] { height: 120px; overflow: auto;
}
.demo-trigger-scroll-content[data-v-04b31ca5] { min-height: 360px; padding: 24px;
}

.upload-demo-logs[data-v-047e6be7] {
  width: 100%;
  padding-left: 18px;
  margin: 0;
  color: var(--vp-c-text-2);
  font-size: 13px;
  line-height: 1.8;
}
.upload-demo-actions[data-v-047e6be7] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-demo-hint[data-v-047e6be7] {
  color: var(--vp-c-text-2);
  font-size: 13px;
}
.upload-demo-drag[data-v-047e6be7] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.upload-demo-file-name[data-v-047e6be7] {
  color: var(--vp-c-text-1);
}

.watermark-doc-box[data-v-493bc7db] {
  display: block;
}
.watermark-doc-panel[data-v-493bc7db] {
  min-height: 160px;
  padding: 24px;
  border: 1px solid var(--x-color-border-2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--x-color-primary-6) 7%, transparent), transparent 42%),
    var(--x-color-bg-white);
}
.watermark-doc-panel h4[data-v-493bc7db] {
  margin: 0 0 10px;
  color: var(--x-color-text-1);
  font-size: 16px;
  line-height: 24px;
}
.watermark-doc-panel p[data-v-493bc7db] {
  max-width: 560px;
  margin: 0 0 18px;
  color: var(--x-color-text-2);
  line-height: 1.7;
}
.watermark-doc-controls[data-v-493bc7db] {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.watermark-doc-muted[data-v-493bc7db] {
  color: var(--x-color-text-3);
  font-size: 13px;
}
@media (max-width: 720px) {
.watermark-doc-controls[data-v-493bc7db] {
    grid-template-columns: 1fr;
}
}

.VPLocalSearchBox[data-v-de2b31e0] {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
}
.backdrop[data-v-de2b31e0] {
  position: absolute;
  inset: 0;
  background: var(--vp-backdrop-bg-color);
  transition: opacity 0.5s;
}
.shell[data-v-de2b31e0] {
  position: relative;
  padding: 12px;
  margin: 64px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--vp-local-search-bg);
  width: min(100vw - 60px, 900px);
  height: min-content;
  max-height: min(100vh - 128px, 900px);
  border-radius: 6px;
}
@media (max-width: 767px) {
.shell[data-v-de2b31e0] {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
}
}
.search-bar[data-v-de2b31e0] {
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: text;
}
@media (max-width: 767px) {
.search-bar[data-v-de2b31e0] {
    padding: 0 8px;
}
}
.search-bar[data-v-de2b31e0]:focus-within {
  border-color: var(--vp-c-brand-1);
}
.local-search-icon[data-v-de2b31e0] {
  display: block;
  font-size: 18px;
}
.navigate-icon[data-v-de2b31e0] {
  display: block;
  font-size: 14px;
}
.search-icon[data-v-de2b31e0] {
  margin: 8px;
}
@media (max-width: 767px) {
.search-icon[data-v-de2b31e0] {
    display: none;
}
}
.search-input[data-v-de2b31e0] {
  padding: 6px 12px;
  font-size: inherit;
  width: 100%;
}
@media (max-width: 767px) {
.search-input[data-v-de2b31e0] {
    padding: 6px 4px;
}
}
.search-actions[data-v-de2b31e0] {
  display: flex;
  gap: 4px;
}
@media (any-pointer: coarse) {
.search-actions[data-v-de2b31e0] {
    gap: 8px;
}
}
@media (min-width: 769px) {
.search-actions.before[data-v-de2b31e0] {
    display: none;
}
}
.search-actions button[data-v-de2b31e0] {
  padding: 8px;
}
.search-actions button[data-v-de2b31e0]:not([disabled]):hover,
.toggle-layout-button.detailed-list[data-v-de2b31e0] {
  color: var(--vp-c-brand-1);
}
.search-actions button.clear-button[data-v-de2b31e0]:disabled {
  opacity: 0.37;
}
.search-keyboard-shortcuts[data-v-de2b31e0] {
  font-size: 0.8rem;
  opacity: 75%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  line-height: 14px;
}
.search-keyboard-shortcuts span[data-v-de2b31e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 767px) {
.search-keyboard-shortcuts[data-v-de2b31e0] {
    display: none;
}
}
.search-keyboard-shortcuts kbd[data-v-de2b31e0] {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  padding: 3px 6px;
  min-width: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(128, 128, 128, 0.15);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.results[data-v-de2b31e0] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.result[data-v-de2b31e0] {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  transition: none;
  line-height: 1rem;
  border: solid 2px var(--vp-local-search-result-border);
  outline: none;
}
.result > div[data-v-de2b31e0] {
  margin: 12px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 767px) {
.result > div[data-v-de2b31e0] {
    margin: 8px;
}
}
.titles[data-v-de2b31e0] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
  z-index: 1001;
  padding: 2px 0;
}
.title[data-v-de2b31e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.title.main[data-v-de2b31e0] {
  font-weight: 500;
}
.title-icon[data-v-de2b31e0] {
  opacity: 0.5;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}
.title svg[data-v-de2b31e0] {
  opacity: 0.5;
}
.result.selected[data-v-de2b31e0] {
  --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
  border-color: var(--vp-local-search-result-selected-border);
}
.excerpt-wrapper[data-v-de2b31e0] {
  position: relative;
}
.excerpt[data-v-de2b31e0] {
  opacity: 50%;
  pointer-events: none;
  max-height: 140px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.result.selected .excerpt[data-v-de2b31e0] {
  opacity: 1;
}
.excerpt[data-v-de2b31e0] * {
  font-size: 0.8rem !important;
  line-height: 130% !important;
}
.titles[data-v-de2b31e0] mark,
.excerpt[data-v-de2b31e0] mark {
  background-color: var(--vp-local-search-highlight-bg);
  color: var(--vp-local-search-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}
.excerpt[data-v-de2b31e0] .vp-code-group .tabs {
  display: none;
}
.excerpt[data-v-de2b31e0] .vp-code-group div[class*='language-'] {
  border-radius: 8px !important;
}
.excerpt-gradient-bottom[data-v-de2b31e0] {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(transparent, var(--vp-local-search-result-bg));
  z-index: 1000;
}
.excerpt-gradient-top[data-v-de2b31e0] {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(var(--vp-local-search-result-bg), transparent);
  z-index: 1000;
}
.result.selected .titles[data-v-de2b31e0],
.result.selected .title-icon[data-v-de2b31e0] {
  color: var(--vp-c-brand-1) !important;
}
.no-results[data-v-de2b31e0] {
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
}
svg[data-v-de2b31e0] {
  flex: none;
}