@charset "utf-8";

/* ============================================
   Font Face Definitions
   ============================================ */

/* DSEG7 Classic - 七段数码管电子表字体 */
@font-face {
  font-family: 'DSEG7 Classic';
  src: url('fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2'),
       url('fonts/DSEG7-Classic/DSEG7Classic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
											   
/* ============================================											   
   Design Tokens (CSS Variables)
   ============================================ */
:root {
    /* Blue (primary) */
    --ant-blue-1: #e6f4ff;
    --ant-blue-2: #bae0ff;
    --ant-blue-3: #91caff;
    --ant-blue-4: #69b1ff;
    --ant-blue-5: #4096ff;
    --ant-blue-6: #1677ff;
    --ant-blue-7: #0958d9;
    --ant-blue-8: #003eb3;
    --ant-blue-9: #002c8c;
    --ant-blue-10: #001d66;
    
    /* Purple */
    --ant-purple-1: #f9f0ff;
    --ant-purple-2: #efdbff;
    --ant-purple-3: #d3adf7;
    --ant-purple-4: #b37feb;
    --ant-purple-5: #9254de;
    --ant-purple-6: #722ed1;
    --ant-purple-7: #531dab;
    --ant-purple-8: #391085;
    --ant-purple-9: #22075e;
    --ant-purple-10: #120338;
    
    /* Cyan */
    --ant-cyan-1: #e6fffb;
    --ant-cyan-2: #b5f5ec;
    --ant-cyan-3: #87e8de;
    --ant-cyan-4: #5cdbd3;
    --ant-cyan-5: #36cfc9;
    --ant-cyan-6: #13c2c2;
    --ant-cyan-7: #08979c;
    --ant-cyan-8: #006d75;
    --ant-cyan-9: #00474f;
    --ant-cyan-10: #002329;
    
    /* Green (Success) */
    --ant-green-1: #f6ffed;
    --ant-green-2: #d9f7be;
    --ant-green-3: #b7eb8f;
    --ant-green-4: #95de64;
    --ant-green-5: #73d13d;
    --ant-green-6: #52c41a;  /* Success */
    --ant-green-7: #389e0d;
    --ant-green-8: #237804;
    --ant-green-9: #135200;
    --ant-green-10: #092b00;
    
    /* Magenta */
    --ant-magenta-1: #fff0f6;
    --ant-magenta-2: #ffd6e7;
    --ant-magenta-3: #ffadd2;
    --ant-magenta-4: #ff85c0;
    --ant-magenta-5: #f759ab;
    --ant-magenta-6: #eb2f96;
    --ant-magenta-7: #c41d7f;
    --ant-magenta-8: #9e1068;
    --ant-magenta-9: #780650;
    --ant-magenta-10: #520339;
    
    /* Pink */
    --ant-pink-1: #fff0f6;
    --ant-pink-2: #ffd6e7;
    --ant-pink-3: #ffadd2;
    --ant-pink-4: #ff85c0;
    --ant-pink-5: #f759ab;
    --ant-pink-6: #eb2f96;
    --ant-pink-7: #c41d7f;
    --ant-pink-8: #9e1068;
    --ant-pink-9: #780650;
    --ant-pink-10: #520339;
    
    /* Red (Error) */
    --ant-red-1: #fff1f0;
    --ant-red-2: #ffccc7;
    --ant-red-3: #ffa39e;
    --ant-red-4: #ff7875;
    --ant-red-5: #ff4d4f;
    --ant-red-6: #f5222d;  /* Error */
    --ant-red-7: #cf1322;
    --ant-red-8: #a8071a;
    --ant-red-9: #820014;
    --ant-red-10: #5c0011;
    
    /* Orange */
    --ant-orange-1: #fff7e6;
    --ant-orange-2: #ffe7ba;
    --ant-orange-3: #ffd591;
    --ant-orange-4: #ffc069;
    --ant-orange-5: #ffa940;
    --ant-orange-6: #fa8c16;
    --ant-orange-7: #d46b08;
    --ant-orange-8: #ad4e00;
    --ant-orange-9: #873800;
    --ant-orange-10: #612500;
    
    /* Yellow  */
    --ant-yellow-1: #feffe6;
    --ant-yellow-2: #ffffb8;
    --ant-yellow-3: #fffb8f;
    --ant-yellow-4: #fff566;
    --ant-yellow-5: #ffec3d;
    --ant-yellow-6: #fadb14;
    --ant-yellow-7: #d4b106;
    --ant-yellow-8: #ad8b00;
    --ant-yellow-9: #876800;
    --ant-yellow-10: #614700;
    
    /* Volcano */
    --ant-volcano-1: #fff2e8;
    --ant-volcano-2: #ffd8bf;
    --ant-volcano-3: #ffbb96;
    --ant-volcano-4: #ff9c6e;
    --ant-volcano-5: #ff7a45;
    --ant-volcano-6: #fa541c;
    --ant-volcano-7: #d4380d;
    --ant-volcano-8: #ad2102;
    --ant-volcano-9: #871400;
    --ant-volcano-10: #610b00;
    
    /* Geekblue */
    --ant-geekblue-1: #f0f5ff;
    --ant-geekblue-2: #d6e4ff;
    --ant-geekblue-3: #adc6ff;
    --ant-geekblue-4: #85a5ff;
    --ant-geekblue-5: #597ef7;
    --ant-geekblue-6: #2f54eb;
    --ant-geekblue-7: #1d39c4;
    --ant-geekblue-8: #10239e;
    --ant-geekblue-9: #061178;
    --ant-geekblue-10: #030852;

    /* Gold (Warning) */
    --ant-gold-1: #fffbe6;
    --ant-gold-2: #fff1b8;
    --ant-gold-3: #ffe58f;
    --ant-gold-4: #ffd666;
    --ant-gold-5: #ffc53d;
    --ant-gold-6: #faad14;  /* Warning */
    --ant-gold-7: #d48806;
    --ant-gold-8: #ad6800;
    --ant-gold-9: #874d00;
    --ant-gold-10: #613400;
    
    /* Lime */
    --ant-lime-1: #fcffe6;
    --ant-lime-2: #f4ffb8;
    --ant-lime-3: #eaff8f;
    --ant-lime-4: #d3f261;
    --ant-lime-5: #bae637;
    --ant-lime-6: #a0d911;
    --ant-lime-7: #7cb305;
    --ant-lime-8: #5b8c00;
    --ant-lime-9: #3f6600;
    --ant-lime-10: #254000;

    --ant-blue-hover: #4096ff;
    --ant-blue-active: #0958d9;
    --ant-purple-hover: #9254de;
    --ant-purple-active: #531dab;
    --ant-cyan-hover: #36cfc9;
    --ant-cyan-active: #08979c;
    --ant-green-hover: #73d13d;
    --ant-green-active: #389e0d;
    --ant-magenta-hover: #f759ab;
    --ant-magenta-active: #c41d7f;
    --ant-pink-hover: #f759ab;
    --ant-pink-active: #c41d7f;
    --ant-red-hover: #ff4d4f;
    --ant-red-active: #cf1322;
    --ant-orange-hover: #ffa940;
    --ant-orange-active: #d46b08;
    --ant-yellow-hover: #ffec3d;
    --ant-yellow-active: #d4b106;
    --ant-volcano-hover: #ff7a45;
    --ant-volcano-active: #d4380d;
    --ant-geekblue-hover: #597ef7;
    --ant-geekblue-active: #1d39c4;
    --ant-gold-hover: #ffc53d;
    --ant-gold-active: #d48806;
    --ant-lime-hover: #bae637;
    --ant-lime-active: #7cb305;
    
    /* ===== Seed Colors (Functional) ===== */

    /* Primary */
    --ant-color-primary: #1677ff;
    --ant-color-primary-bg: #e6f4ff;
    --ant-color-primary-bg-hover: #bae0ff;
    --ant-color-primary-border: #91caff;
    --ant-color-primary-border-hover: #69b1ff;
    --ant-color-primary-hover: #4096ff;
    --ant-color-primary-active: #0958d9;
    --ant-color-primary-text-hover: #4096ff;
    --ant-color-primary-text: #1677ff;
    --ant-color-primary-text-active: #0958d9;
    --ant-color-primary-rgb: 22, 119, 255;
    --ant-color-primary-outline: rgba(22, 119, 255, 0.2);

    /* Success */
    --ant-color-success: #52c41a;
    --ant-color-success-bg: #f6ffed;
    --ant-color-success-bg-hover: #d9f7be;
    --ant-color-success-border: #b7eb8f;
    --ant-color-success-border-hover: #95de64;
    --ant-color-success-hover: #95de64;
    --ant-color-success-active: #389e0d;
    --ant-color-success-text-hover: #73d13d;
    --ant-color-success-text: #52c41a;
    --ant-color-success-text-active: #389e0d;
    --ant-color-success-outline: rgba(82, 196, 26, 0.2);

    /* Error */
    --ant-color-error: #ff4d4f;
    --ant-color-error-bg: #fff2f0;
    --ant-color-error-bg-hover: #fff1f0;
    --ant-color-error-bg-filled-hover: #ffdfdc;
    --ant-color-error-bg-active: #ffccc7;
    --ant-color-error-border: #ffccc7;
    --ant-color-error-border-hover: #ffa39e;
    --ant-color-error-hover: #ff7875;
    --ant-color-error-active: #d9363e;
    --ant-color-error-text-hover: #ff7875;
    --ant-color-error-text: #ff4d4f;
    --ant-color-error-text-active: #d9363e;
    --ant-color-error-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
    --ant-color-error-outline: rgba(255, 38, 5, 0.06);

    /* Warning */
    --ant-color-warning: #faad14;
    --ant-color-warning-bg: #fffbe6;
    --ant-color-warning-bg-hover: #fff1b8;
    --ant-color-warning-border: #ffe58f;
    --ant-color-warning-border-hover: #ffd666;
    --ant-color-warning-hover: #ffd666;
    --ant-color-warning-active: #d48806;
    --ant-color-warning-text-hover: #ffc53d;
    --ant-color-warning-text: #faad14;
    --ant-color-warning-text-active: #d48806;
    --ant-color-warning-outline: rgba(255, 215, 5, 0.1);

    /* Info */
    --ant-color-info: #13c2c2;
    --ant-color-info-bg: #e6fffb;
    --ant-color-info-bg-hover: #b5f5ec;
    --ant-color-info-border: #87e8de;
    --ant-color-info-border-hover: #5cdbd3;
    --ant-color-info-hover: #36cfc9;
    --ant-color-info-active: #08979c;
    --ant-color-info-text-hover: #36cfc9;
    --ant-color-info-text: #13c2c2;
    --ant-color-info-text-active: #08979c;
    --ant-color-info-outline: rgba(19, 194, 194, 0.2);

    /* ===== Text Colors ===== */
    --ant-color-text-base: #000000;
    --ant-color-text: rgba(0, 0, 0, 0.88);
    --ant-color-text-secondary: rgba(0, 0, 0, 0.65);
    --ant-color-text-tertiary: rgba(0, 0, 0, 0.45);
    --ant-color-text-quaternary: rgba(0, 0, 0, 0.25);
    --ant-color-text-placeholder: rgba(0, 0, 0, 0.25);
    --ant-color-text-disabled: rgba(0, 0, 0, 0.25);
    --ant-color-text-heading: rgba(0, 0, 0, 0.88);
    --ant-color-text-label: rgba(0, 0, 0, 0.65);
    --ant-color-text-description: rgba(0, 0, 0, 0.45);
    --ant-color-text-light-solid: #ffffff;

    /* ===== Fill Colors ===== */
    --ant-color-fill: rgba(0, 0, 0, 0.15);
    --ant-color-fill-secondary: rgba(0, 0, 0, 0.06);
    --ant-color-fill-tertiary: rgba(0, 0, 0, 0.04);
    --ant-color-fill-quaternary: rgba(0, 0, 0, 0.02);
    --ant-color-fill-content: rgba(0, 0, 0, 0.06);
    --ant-color-fill-content-hover: rgba(0, 0, 0, 0.15);
    --ant-color-fill-alter: rgba(0, 0, 0, 0.02);

    /* ===== Background Colors ===== */
    --ant-color-bg-base: #f5f5f5;
    --ant-color-bg-solid: rgb(0, 0, 0);
    --ant-color-bg-solid-hover: rgba(0, 0, 0, 0.75);
    --ant-color-bg-solid-active: rgba(0, 0, 0, 0.95);
    --ant-color-bg-layout: #f5f5f5;
    --ant-color-bg-container: #ffffff;
    --ant-color-bg-elevated: #ffffff;
    --ant-color-bg-blur: transparent;
    --ant-color-bg-container-disabled: #f5f5f5;
    --ant-color-bg-mask: rgba(0, 0, 0, 0.45);
    --ant-color-bg-mask-light: rgba(255, 255, 255, 0.9);
    --ant-color-bg-spotlight: rgba(0, 0, 0, 0.85);

    /* ===== Border & Split Colors ===== */
    --ant-color-border: #d9d9d9;
    --ant-color-border-disabled: #d9d9d9;
    --ant-color-border-secondary: #f0f0f0;  
    --ant-color-border-bg: #ffffff;
    --ant-color-split: #f0f0f0;
    --ant-color-white: #ffffff;

    /* ===== Link Colors ===== */
    --ant-color-link: #1677ff;
    --ant-color-link-hover: #69b1ff;
    --ant-color-link-active: #0958d9;

    /* ===== Highlight ===== */
    --ant-color-highlight: #ff4d4f;
    --ant-color-bg-text-hover: rgba(0, 0, 0, 0.06);
    --ant-color-bg-text-active: rgba(0, 0, 0, 0.15);

    /* ===== Icon Colors ===== */
    --ant-color-icon: rgba(0, 0, 0, 0.45);
    --ant-color-icon-hover: rgba(0, 0, 0, 0.88);

    /* ===== Border Radius ===== */
    --ant-border-radius: 6px;
    --ant-border-radius-xs: 2px;
    --ant-border-radius-sm: 4px;
    --ant-border-radius-lg: 8px;
    --ant-border-radius-xl: 16px;
    --ant-border-radius-outer: 4px; /* 外层容器圆角，用于卡片、弹层等 */

    /* ===== Shadows ===== */
    --ant-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-tertiary: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
    --ant-box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    --ant-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
    --ant-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
    --ant-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
    --ant-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);
    --ant-box-shadow-drawer: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
    --ant-box-shadow-button: 0 2px 0 rgba(0, 0, 0, 0.016);
    --ant-box-shadow-switch-handle: 0 2px 4px 0 rgba(0, 35, 11, 0.2);

    /* Margin - 外边距 */
    --ant-margin: 16px;  /* 基础外边距 */
    --ant-margin-xxs: 4px;       /* 超小外边距 */
    --ant-margin-xs: 8px;/* 小外边距 */
    --ant-margin-sm: 12px;       /* 中小外边距 */
    --ant-margin-md: 20px;       /* 中等外边距 */
    --ant-margin-lg: 24px;       /* 大外边距 */
    --ant-margin-xl: 32px;       /* 超大外边距 */
    --ant-margin-xxl: 48px;      /* 超超大外边距 */

    /* Padding - 内边距 */
    --ant-padding: 16px; /* 基础内边距 */
    --ant-padding-xxs: 4px;      /* 超小内边距 */
    --ant-padding-xs: 8px;       /* 小内边距 */
    --ant-padding-sm: 12px;      /* 中小内边距 */
    --ant-padding-md: 20px;      /* 中等内边距 */
    --ant-padding-lg: 24px;      /* 大内边距 */
    --ant-padding-xl: 32px;      /* 超大内边距 */
    --ant-padding-xxl: 48px;     /* 超超大内边距 */
    --ant-padding-content-horizontal-lg: 24px;
    --ant-padding-content-vertical-lg: 16px;
    --ant-padding-content-horizontal: 16px;
    --ant-padding-content-vertical: 12px;
    --ant-padding-content-horizontal-sm: 16px;
    --ant-padding-content-vertical-sm: 8px;

    /* ===== Control ===== */
    --ant-control-height: 32px;
    --ant-control-height-xs: 16px;
    --ant-control-height-sm: 24px; 
    --ant-control-height-lg: 40px;
    --ant-control-interactive-size: 16px;
    --ant-control-item-bg-hover: rgba(0, 0, 0, 0.04);
    --ant-control-item-bg-active: #e6f4ff;
    --ant-control-item-bg-active-hover: #bae0ff;
    --ant-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
    --ant-control-outline: rgba(5, 145, 255, 0.1);
    --ant-control-outline-width: 2px;
    --ant-control-tmp-outline: rgba(0, 0, 0, 0.02);
    --ant-control-padding-horizontal: 12px;
    --ant-control-padding-horizontal-sm: 8px;
    --ant-control-padding-horizontal-lg: 16px;

    /* ===== Typography ===== */
    --ant-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --ant-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, monospace;
    --ant-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --ant-font-size: 14px;
    --ant-font-size-sm: 12px;
    --ant-font-size-lg: 16px;
    --ant-font-size-xl: 20px;
    --ant-font-size-heading-1: 38px;
    --ant-font-size-heading-2: 30px;
    --ant-font-size-heading-3: 24px;
    --ant-font-size-heading-4: 20px;
    --ant-font-size-heading-5: 16px;
    --ant-line-height: 1.5714285714285714;
    --ant-line-height-lg: 1.5;
    --ant-line-height-sm: 1.6666666666666667;
    --ant-font-height: 22px;
    --ant-font-height-sm: 20px;
    --ant-font-height-lg: 24px;
    --ant-font-height-xl: 28px;
    --ant-line-height-heading-1: 1.2105263157894737;
    --ant-line-height-heading-2: 1.2666666666666666;
    --ant-line-height-heading-3: 1.3333333333333333;
    --ant-line-height-heading-4: 1.4;
    --ant-line-height-heading-5: 1.5;
    --ant-font-weight-normal: 400;
    --ant-font-weight-medium: 500;
    --ant-font-weight-strong: 600;
    --ant-font-weight-semibold: 600;
    --ant-font-weight-bold: 700;
    --ant-line-type: solid;
    --ant-line-width: 1px;
    --ant-line-width-bold: 2px;
    --ant-line-width-focus: 3px;

    /* ===== 标题字体大小 ===== */
    --ant-title-font-size-sm: 14px;
    --ant-title-font-size: 16px;
    --ant-title-font-size-lg: 18px;
    --ant-title-font-size-xl: 20px;

    /* ===== 图标字体大小 ===== */
    --ant-icon-font-size-sm: 12px;
    --ant-icon-font-size: 14px;
    --ant-icon-font-size-lg: 16px;
    --ant-icon-font-size-xl: 18px;

    /* ===== 徽章/标签 ===== */
    --ant-badge-font-size: 12px;

    /* ===== Link Styles ===== */
    --ant-link-decoration: none;
    --ant-link-hover-decoration: none;
    --ant-link-focus-decoration: none;
    --ant-link-active-decoration: none;

    /* ===== Component Tokens ===== */
    --ant-dropdown-padding-block: 5px;
    --ant-input-number-handle-bg: #ffffff;
    --ant-slider-rail-bg: #f5f5f5;
    --ant-slider-handle-color: var(--ant-color-primary);
    --ant-switch-handle-bg: #ffffff;
    --ant-switch-handle-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
    --ant-table-header-bg: #fafafa;
    --ant-table-header-color: rgba(0, 0, 0, 0.88);
    --ant-table-border-color: #f0f0f0;
    --ant-table-cell-padding-block: 16px;
    --ant-table-cell-padding-inline: 16px;
    --ant-table-row-hover-bg: #fafafa;
    --ant-table-row-selected-bg: #e6f4ff;
    --ant-tree-node-selected-bg: #e6f4ff;
    --ant-tree-node-selected-color: rgba(0, 0, 0, 0.88);
    --ant-tag-default-bg: #f5f5f5;
    --ant-menu-item-selected-bg: #e6f4ff;
    --ant-progress-line-border-radius: 100px;

    /* ===== Size ===== */
    --ant-size-xxl: 48px;
    --ant-size-xl: 32px;
    --ant-size-lg: 24px;
    --ant-size-md: 20px;
    --ant-size-ms: 16px;
    --ant-size: 16px;
    --ant-size-sm: 12px;
    --ant-size-xs: 8px;
    --ant-size-xxs: 4px;
    --ant-size-unit: 4px;
    --ant-size-step: 4px;
    --ant-size-popup-arrow: 16px;

    --ant-motion-duration-fast: 0.1s;
    --ant-motion-duration-mid: 0.2s;
    --ant-motion-duration-slow: 0.3s;
    --ant-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
    --ant-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    --ant-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ant-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ant-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
    --ant-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
    --ant-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ant-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

    /* ===== Screen ===== */
    --ant-screen-xxxl: 1920px;
    --ant-screen-xxxl-min: 1920px;
    --ant-screen-xxl-max: 1919px;

    /* ===== Animation ===== */
    --ant-transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    --ant-transition-fast: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

    --ant-z-index-base: 0;
    --ant-z-index-popup-base: 1000;
    --ant-opacity-image: 1;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 4px;  /* 更细的滚动条 */
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--ant-color-fill);
  border-radius: var(--ant-border-radius-xs);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35);  /* hover时更深 */
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Flex utility classes (optional) */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.gap-sm {
  gap: var(--ant-margin-sm);
}

.gap-md {
  gap: var(--ant-margin-md);
}

.gap-lg {
  gap: var(--ant-margin-lg);
}

/* ============================================
   [DONE] 0. Global Base Styles - 全局基础样式
   ============================================ */
.panel,
.window,
.dialog,
.accordion,
.tabs,
.layout,
.datagrid,
.treegrid,
.propertygrid,
.menu,
.combo-panel,
.calendar,
textarea {
  font-family: var(--ant-font-family);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  color: var(--ant-color-text);
}

/* ============================================
   [DONE] 1. Panel - 面板组件
   ============================================ */

/* Panel 边框和圆角 */
.panel {
  border-radius: var(--ant-border-radius);
}

/* 相邻 panel 之间增加间距（排除 accordion、tabs-panels、panel-row 等） */
.panel + .panel {
  margin-top: var(--ant-margin-sm);
}

.accordion > .panel + .panel,
.tabs-panels > .panel + .panel,
.panel-row > .panel + .panel,
.combo-p > .panel + .panel,
.layout > .panel + .panel,
.panel + .panel.combo-p {
  margin-top: 0;
}

/* Panel Header 和 Body 的边框颜色 */
.panel-header,
.panel-body {
  border-color: var(--ant-color-border);
}

/* Panel Header 样式 - 使用 Flexbox 实现垂直居中 */
.panel-header {
  display: flex;
  align-items: center;
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  padding: 0 var(--ant-padding);
  min-height: 48px;
  line-height: 22px;
  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}

/* Panel 折叠时 Header 需要有完整圆角（当 panel-body 隐藏时） */
.panel:has(> .panel-body[style*="display: none"]) > .panel-header,
.panel:has(> .panel-body[style*="display:none"]) > .panel-header {
  border-radius: var(--ant-border-radius);
}

/* Panel Header 图标 - 重置定位 */
.panel-header .panel-icon {
  position: static;
  margin-top: 0;
  margin-right: var(--ant-margin-xs);
  flex-shrink: 0;
  order: -1;
}

/* Panel Header 标题 - 重置定位 */
.panel-header .panel-title {
  position: static;
  flex: 1;
  padding-left: 0;
}

/* Panel Header 工具按钮 - 重置定位 */
.panel-header .panel-tool {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
  height: auto;
  overflow: visible;
}

/* Panel Header 无边框时的圆角 */
.panel-header-noborder {
  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}

/* Panel Title - 容器标题 16px + 600 */
.panel-title {
  font-size: var(--ant-title-font-size);
  font-weight: var(--ant-font-weight-strong);
  color: var(--ant-color-text);
}

.panel-title-hint {
  margin-left: var(--ant-margin-sm);
  font-size: var(--ant-font-size-sm);
  font-weight: var(--ant-font-weight-normal);
  color: var(--ant-color-text-secondary);
}

/* Panel Body */
.panel-body {
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  padding: var(--ant-padding);
  border-radius: 0;
}

/* Panel Body 内部的所有元素也应用圆角裁剪 */
.panel-body * {
  box-sizing: border-box;
}

/* Panel Body 无 Header 时的上圆角 */
.panel-body-noheader {
  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}

/* Panel Body 作为最后一个元素时的下圆角(无Footer的情况) */
.panel > .panel-body:last-child {
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius) !important;
}

/* Panel Body 既是第一个又是最后一个元素时的完整圆角(只有Body,无Header无Footer) */
.panel > .panel-body:first-child:last-child {
  border-radius: var(--ant-border-radius) !important;
}

/* Panel Body 有 Header 但无 Footer 时的下圆角 */
.layout-panel>.panel-header + .panel-body:last-child {
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius) !important;
  padding: 0;
}

/* Panel Footer */
.panel-footer {
  border-color: var(--ant-color-border);
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  padding: var(--ant-padding-sm) var(--ant-padding);
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
}

/* Panel Footer 无边框时的圆角 */
.panel-footer-noborder {
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
}

/* Panel Tool 按钮间距，第一个按钮无左边距，后续按钮有间距 */
.panel-tool a {
  margin-left: 0;
}

.panel-tool a + a {
  margin-left: var(--ant-margin-xs);  /* 8px */
}

/* Panel Tool 图标悬停效果 - 排除 LinkButton */
.panel-tool a:not(.l-btn):hover {
  background-color: var(--ant-color-bg-layout);
  border-radius: var(--ant-border-radius-sm);
}

/* Panel Tool 中的 LinkButton - 覆盖 easyui.css 的固定尺寸限制 */
.panel-tool a.l-btn {
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Panel Tool 中 small 尺寸的 LinkButton */
.panel-tool a.l-btn.l-btn-small {
  padding: 0 7px !important;
}

/* Panel Tool 中的 LinkButton hover - 防止被 easyui.css 的灰色背景覆盖 */
.panel-tool a.l-btn:hover {
  background-color: unset;
}

/* Primary 按钮在 Panel Tool 中的 hover 颜色 */
.panel-tool a.l-btn-primary:hover {
  background: var(--ant-color-primary-hover);
}

/* Panel Header 切换项 - 用于 panel-header 中的标签切换（含 panel-tool 内） */
.panel-header .tab-switch {
  display: inline-block;
  padding: 0 var(--ant-padding-xs);
  line-height: var(--ant-control-height-lg);
  color: var(--ant-color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.panel-header .tab-switch:hover {
  color: var(--ant-color-primary);
  border-bottom-color: var(--ant-color-primary);
}

.panel-header .tab-switch.active {
  color: var(--ant-color-primary);
  border-bottom-color: var(--ant-color-primary);
}

.panel-header .tab-switch.disabled {
  color: var(--ant-color-text-disabled);
  cursor: not-allowed;
  border-bottom-color: transparent;
}

.panel-header .tab-switch.disabled:hover {
  color: var(--ant-color-text-disabled);
  border-bottom-color: transparent;
}

.panel-header > .tab-switch {
  margin-right: var(--ant-margin-xs);
}

.panel-header > .tab-switch:last-of-type {
  margin-right: 0;
}

.panel-header.no-border {
  border: none;
}

/* Header 在左侧 - 左上角和左下角 */
.panel-hleft > .panel-header {
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius) !important;
}

/* Header 在右侧 - 右上角和右下角 */
.panel-hright > .panel-header {
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0 !important;
}

/* Body 在左侧 header 后面 - 右上角和右下角（:last-child 提升优先级以覆盖通用规则） */
.panel-hleft > .panel-body:last-child {
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0 !important;
}

/* Body 在右侧 header 后面 - 左上角和左下角 */
.panel-hright > .panel-body:last-child {
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius) !important;
}

/* Body 有 footer 时 - 只有上圆角,下圆角留给 footer */
.panel-hleft > .panel-body:not(:last-child) {
  border-radius: 0 var(--ant-border-radius) 0 0 !important;
}

.panel-hright > .panel-body:not(:last-child) {
  border-radius: var(--ant-border-radius) 0 0 0 !important;
}

/* Footer 在左侧 header 时 - 只有右下角 */
.panel-hleft > .panel-footer {
  border-radius: 0 0 var(--ant-border-radius) 0 !important;
}

/* Footer 在右侧 header 时 - 只有左下角 */
.panel-hright > .panel-footer {
  border-radius: 0 0 0 var(--ant-border-radius) !important;
}

/* Panel Title 在左侧/右侧时：writing-mode 竖排 + inset/margin 居中 + 溢出省略 */
.panel-hleft > .panel-header .panel-title,
.panel-hright > .panel-header .panel-title {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  width: max-content !important;
  height: max-content !important;
  max-height: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  transform: none !important;
  padding: 5px 0;
}

/* Panel Title 向上方向（文字从下往上读）: 围绕中心原地翻转180度 */
.panel-hleft > .panel-header .panel-title-up,
.panel-hright > .panel-header .panel-title-up {
  transform: rotate(180deg) !important;
  transform-origin: center center !important;
}

/* Panel 变体：无内边距 */
.panel > .no-padding.panel-body {
  padding: 0;
}

/* Panel 变体：透明背景 */
.panel > .transparent.panel-body {
  background: transparent;
}

/* ============================================
   [DONE] 2. Accordion - 手风琴组件
   ============================================ */

/* Accordion 边框和圆角 */
.accordion {
  background: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

/* Accordion 内部的 Panel 不显示圆角 */
.accordion .panel {
  border-radius: 0 !important;
}

.accordion .panel-header {
  border-radius: 0 !important;
}

.accordion .panel-body {
  border-radius: 0 !important;
}

/* Accordion 内部的 panel-body 底部也不应该有圆角 */
.accordion .panel > .panel-body:last-child {
  border-radius: 0 !important;
}

.accordion .panel > .panel-body:first-child:last-child {
  border-radius: 0 !important;
}

.accordion .panel-header + .panel-body:last-child {
  border-radius: 0 !important;
}

/* Accordion Header 样式 */
.accordion .accordion-header {
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  padding: var(--ant-padding-sm);
  transition: var(--ant-transition-fast);
}

/* Accordion 标题 - 可折叠标题 14px + 600 */
.accordion .panel-title {
  font-size: var(--ant-title-font-size-sm);
  font-weight: var(--ant-font-weight-strong);
}

/* Accordion Header Hover 效果 */
.accordion .accordion-header:hover {
  background-color: var(--ant-color-bg-layout);
}

/* Accordion Header 选中状态 */
.accordion .accordion-header-selected {
  background: var(--ant-color-primary-bg);
  color: var(--ant-color-primary);
}

.accordion .accordion-header-selected .panel-title {
  color: var(--ant-color-primary);
}

/* Accordion Body 样式 */
.accordion .accordion-body {
  background: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
}

/* Accordion Body 内部的 Panel Body 应用默认 padding */
.accordion .panel-body {
  padding: var(--ant-padding);
}

/* 最后一个面板的边框颜色 */
.accordion .panel-last > .accordion-header-selected,
.accordion .panel-last > .accordion-header-border {
  border-bottom-color: var(--ant-color-border);
}

/* 垂直手风琴 - 左侧 */
.accordion> .panel-hleft.panel-last > .accordion-header-selected,
.accordion> .panel-hleft.panel-last > .accordion-header-border {
  border-right-color: var(--ant-color-border);
}

/* 垂直手风琴 - 右侧 */
.accordion> .panel-hright.panel-last > .accordion-header-selected,
.accordion> .panel-hright.panel-last > .accordion-header-border {
  border-left-color: var(--ant-color-border);
}

/* Horizontal Accordion - 标题居中（已由通用 panel-hleft/hright 规则覆盖，此处仅保留兼容性补充） */
.accordion > .panel-hleft .panel-title,
.accordion > .panel-hright .panel-title,
.accordion > .panel-hleft .panel-title-up,
.accordion > .panel-hright .panel-title-up {
  text-align: center;
}

/* ============================================
   [DONE] 3. Window - 窗口组件
   ============================================ */

/* Window 基础样式 */
.window {
  padding: 0;  /* 覆盖 EasyUI 默认 5px，Ant Design Modal 无外层 padding */
  background-color: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius-lg);
  box-shadow: var(--ant-box-shadow-secondary);
}

.window.panel{
  margin-top: 0;
}

/* Window Header - 使用 Flexbox 实现垂直居中 */
.window .window-header {
  display: flex;
  align-items: center;
  background: var(--ant-color-bg-container);
  padding: var(--ant-padding-sm) var(--ant-padding);
  border-bottom: transparent;
}

/* Window Header 图标 - 重置定位，排序到最前面 */
.window .window-header .panel-icon {
  position: static;
  margin-top: 2px;
  margin-right: var(--ant-margin-xs);
  flex-shrink: 0;
  order: -1;  /* DOM 顺序在最后，用 order 调整到最前 */
}

/* Window Header 标题 - 重置定位 */
.window .window-header .panel-title {
  position: static;
  flex: 1;
  line-height: 22px;
  padding-left: 0;  /* 移除原生 panel-with-icon 的 padding-left */
}

/* Window Header 工具按钮 - 重置定位 */
.window .window-header .panel-tool {
  position: static;
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
}

/* Window 工具按钮悬停效果 - Ant Design 圆角背景，排除 LinkButton */
.window .window-header .panel-tool a:not(.l-btn):hover {
  background-color: var(--ant-color-fill-content);
  border-radius: var(--ant-border-radius-sm);
}

/* Window Body */
.window .window-body {
  background: var(--ant-color-bg-container);
  padding: var(--ant-padding);
  border: 0;
}

/* Window Footer */
.window .panel-footer {
  background: var(--ant-color-bg-container);
  padding: var(--ant-padding-sm) var(--ant-padding);
  border: 0;
  top: 0;
}

/* Window Shadow - EasyUI 在 .window 背后放的独立阴影元素，已由 .window 自身 box-shadow 实现，清除避免叠加 */
.window-shadow {
  background: transparent;
  box-shadow: none;
  border-radius: var(--ant-border-radius-lg);
}

/* Window Mask (遮罩层) */
.window-mask {
  background: rgba(0, 0, 0, 0.45);  /* Ant Design 标准遮罩 */
  opacity: 1;
}

/* Window Proxy (拖拽时的虚线框) */
.window-proxy {
  border-color: var(--ant-color-primary);
  border-style: dashed;
}

.window-proxy-mask {
  background: var(--ant-color-primary-bg);
  opacity: 0.1;
}

/* Window Thin Border 变体 */
.window-thinborder {
  padding: 0;
}

.window-thinborder .window-header {
  padding: var(--ant-padding-sm);
}

/* Window No Border 变体 */
.window-noborder {
  border: 0;
}

/* 包含 tab-switch 布局的弹窗 body：禁止外层滚动，委托给内部 panel-body */
.window .window-body:has(> .page-window__content--tab-switch) {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* page-window__content--tab-switch: flex 布局固定 tab-switch 头部 */
.page-window__content--tab-switch {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.page-window__content--tab-switch > .panel {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.page-window__content--tab-switch > .panel > .panel-header {
  flex-shrink: 0;
}

.page-window__content--tab-switch > .panel > .panel-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}


/* ============================================
   [DONE] 4. Dialog - 对话框组件
   ============================================ */

/* Dialog 继承 Window 的样式,无需重复定义 */

/* Dialog Toolbar (工具栏) */
.dialog-toolbar {
  background: var(--ant-color-bg-layout);
  border-color: var(--ant-color-border);
  padding: var(--ant-padding-xxs);
  border-left: transparent;
  border-right: transparent;
  border-top-width: 1px !important;
}

/* Dialog Toolbar 分隔符 */
.dialog-tool-separator {
  border-left-color: var(--ant-color-border);
  border-right-color: transparent;
}

/* Dialog Button (按钮区域) */
.dialog-button {
  background: var(--ant-color-bg-container);
  border: 0;
  padding: var(--ant-padding-sm) var(--ant-padding);
  text-align: center;
  top: 0;
}

/* Dialog Button 间距 */
.dialog-button .l-btn {
  margin-left: var(--ant-margin-xs);
}

.window-thinborder .dialog-toolbar {
  border-left: transparent;
  border-right: transparent;
  border-top-color: #fff;
}

.window-thinborder .dialog-button {
  top: 0px;
  padding: 5px 8px 8px 8px;
  border-left: transparent;
  border-right: transparent;
  border-bottom: transparent;
}

/* ============================================
   [DONE] 5. Drawer - 抽屉组件
   ============================================ */

.drawer .panel-body {
  padding: 0 !important;
}

.drawer.window-shadow {
  box-shadow: var(--ant-box-shadow-drawer);
  border-radius: 0;
  position: fixed;
}

/* Drawer 折叠状态 */
.drawer.layout-collapsed {
  box-shadow: none;
}

/* Drawer 遮罩层 */
.drawer-mask.window-mask {
  position: fixed;
  background: var(--ant-color-bg-mask);
}

/* Drawer Header - 标题区域（覆盖 inline style） */
.drawer .panel-body > div:nth-child(1) {
  padding: var(--ant-padding-sm) !important;
  border-bottom: transparent !important;
  background: var(--ant-color-bg-container) !important;
  font-size: var(--ant-title-font-size) !important;
  font-weight: var(--ant-font-weight-bold) !important;
  color: var(--ant-color-text) !important;
  line-height: var(--ant-control-height) !important;
  text-align: left !important;
}

/* Drawer Body - 内容区域 */
.drawer .panel-body > div:nth-child(2) {
  padding: var(--ant-padding) !important;
}

/* Drawer Footer - 底部按钮区域（覆盖 inline style） */
.drawer .panel-body > div:nth-child(3) {
  padding: var(--ant-padding-sm) var(--ant-padding-lg) !important;
  border-top: 1px solid var(--ant-color-border) !important;
  text-align: right !important;
}

/* Drawer Footer 按钮间距 */
.drawer .panel-body > div:nth-child(3) .l-btn {
  margin-left: var(--ant-margin-xs);
}

/* ============================================
   [DONE] 5. LinkButton - 链接按钮组件
   ============================================ */

/* LinkButton 专属变量 */
:root {
  /* Small 尺寸 */
  --linkbutton-small-padding: 0 4px;
  --linkbutton-small-line-height: 22px;
  
  /* Medium 尺寸（默认） */
  --linkbutton-medium-padding: 4px 8px;
  --linkbutton-medium-line-height: 22px;
  
  /* Large 尺寸 */
  --linkbutton-large-padding: 8px 8px;
  --linkbutton-large-line-height: 22px;
}

.l-btn {
  color: var(--ant-color-text);
  background: var(--ant-color-bg-container);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  box-shadow: var(--ant-box-shadow-button);
  padding: var(--linkbutton-medium-padding);
}

.l-btn-text {
  font-size: var(--ant-font-size);
  font-family: var(--ant-font-family);
  line-height: var(--linkbutton-medium-line-height);
}

.l-btn-small {
  padding: var(--linkbutton-small-padding);
}

.l-btn-small .l-btn-text {
  line-height: var(--linkbutton-small-line-height);
  font-size: var(--ant-font-size-sm);
}

/* 图标在左侧时的文字 margin */
.l-btn-icon-left.l-btn-small .l-btn-text {
  margin: 0 6px 0 10px;
}

.l-btn-icon-left.l-btn-small .l-btn-text:has(+ .l-btn-icon) {
  margin: 0 6px 0 26px;
}

/* 纯图标按钮（无文字）：恢复对称 margin，使按钮更紧凑 */
.l-btn-icon-left.l-btn-small .l-btn-empty:has(+ .l-btn-icon) {
  margin: 0 6px;
}

/* 纯图标按钮：图标水平居中（覆盖 left:6px 的固定偏移） */
.l-btn-icon-left:has(.l-btn-empty) .l-btn-icon {
  left: 50%;
  transform: translateX(-50%);
}

/* medium 尺寸（默认尺寸，与无尺寸类名的按钮样式一致） */
.l-btn-medium {
  padding: var(--linkbutton-medium-padding);
}

.l-btn-medium .l-btn-text {
  line-height: var(--linkbutton-medium-line-height);
  font-size: var(--ant-font-size);
}

.l-btn-large {
  padding: var(--linkbutton-large-padding);
}

.l-btn-large .l-btn-text {
  line-height: var(--linkbutton-large-line-height);
  font-size: var(--ant-font-size);
}

/* 折叠面板内的大按钮样式 */
.layout-expand .l-btn-large {
  width: 100%;
  padding: 8px 4px;
  text-align: center;
}

.layout-expand .l-btn-large .l-btn-text {
  font-size: var(--ant-font-size-sm);
  line-height: 16px;
}

.layout-expand .l-btn-icon-top .l-btn-icon {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 4px 0;
}

.l-btn:hover {
  color: var(--ant-color-primary-hover);
  background: var(--ant-color-bg-container);
  border-color: var(--ant-color-primary-hover);
}

.l-btn-focus {
  outline: 0;
}

.l-btn-selected,
.l-btn-selected:hover {
  color: var(--ant-color-primary);
  background: var(--ant-color-bg-container);
  border-color: var(--ant-color-primary);
  box-shadow: none;
}

.l-btn-plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.l-btn-plain:hover {
  background: var(--ant-color-bg-base);
  border-color: transparent;
  color: var(--ant-color-text);
  box-shadow: none;
  border-radius: var(--ant-border-radius-sm);
}

.l-btn-plain.l-btn-small:hover:not(.tabs-inner) {
  padding: var(--linkbutton-small-padding) !important;
}

.l-btn-plain.l-btn-medium:hover:not(.tabs-inner),
.l-btn-plain:hover:not(.l-btn-large):not(.l-btn-small):not(.l-btn-medium):not(.tabs-inner) {
  padding: var(--linkbutton-medium-padding) !important;
}

.l-btn-plain.l-btn-large:hover:not(.tabs-inner) {
  padding: var(--linkbutton-large-padding) !important;
}

/* Tab 内嵌 menubutton 时，屏蔽 l-btn 的视觉干扰 */
.tabs li .tabs-inner.l-btn {
  box-shadow: none;
}

/* Tab 内 menubutton 文字与箭头的间距 */
.tabs li .tabs-inner.m-btn .l-btn-left .l-btn-text {
  margin-right: 20px;
}

.l-btn-plain-disabled,
.l-btn-plain-disabled:hover {
  background: transparent;
}

.l-btn-plain-selected,
.l-btn-plain-selected:hover {
  background: var(--ant-color-bg-base);
  color: var(--ant-color-primary);
  border-color: transparent;
}

/* Plain-selected 按钮 hover 时保持对应尺寸的 padding */
.l-btn-plain-selected.l-btn-small:hover:not(.tabs-inner) {
  padding: var(--linkbutton-small-padding) !important;  /* 必须与 .l-btn-small 正常态一致，防止 hover 抖动 */
}

.l-btn-plain-selected.l-btn-medium:hover:not(.tabs-inner),
.l-btn-plain-selected:hover:not(.l-btn-large):not(.l-btn-small):not(.l-btn-medium):not(.tabs-inner) {
  padding: var(--linkbutton-medium-padding) !important;
}

.l-btn-plain-selected.l-btn-large:hover:not(.tabs-inner) {
  padding: var(--linkbutton-large-padding) !important;
}

.l-btn-outline {
  border-color: var(--ant-color-border);
}

.l-btn-primary {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.l-btn-primary:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
}

/* 按钮颜色类型 - Success */
.l-btn-success {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-success);
  border-color: var(--ant-color-success);
}

.l-btn-success:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-success-hover);
  border-color: var(--ant-color-success-hover);
}

/* 按钮颜色类型 - Warning */
.l-btn-warning {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-warning);
  border-color: var(--ant-color-warning);
}

.l-btn-warning:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-warning-hover);
  border-color: var(--ant-color-warning-hover);
}

/* 按钮颜色类型 - Danger */
.l-btn-danger {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-error);
  border-color: var(--ant-color-error);
}

.l-btn-danger:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-error-hover);
  border-color: var(--ant-color-error-hover);
}

/* 按钮颜色类型 - Info */
.l-btn-info {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-info);
  border-color: var(--ant-color-info);
}

.l-btn-info:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-info-hover);
  border-color: var(--ant-color-info-hover);
}

/* ===== Outline 按钮变体（与颜色类组合使用） ===== */

/* Outline Primary */
.l-btn-primary.l-btn-outline {
  color: var(--ant-color-primary);
  background: transparent;
  border-color: var(--ant-color-primary);
}

.l-btn-primary.l-btn-outline:hover {
  color: var(--ant-color-primary-hover);
  background: var(--ant-color-primary-bg);
  border-color: var(--ant-color-primary-hover);
}

/* Outline Success */
.l-btn-success.l-btn-outline {
  color: var(--ant-color-success);
  background: transparent;
  border-color: var(--ant-color-success);
}

.l-btn-success.l-btn-outline:hover {
  color: var(--ant-color-success-hover);
  background: var(--ant-color-success-bg);
  border-color: var(--ant-color-success-hover);
}

/* Outline Warning */
.l-btn-warning.l-btn-outline {
  color: var(--ant-color-warning);
  background: transparent;
  border-color: var(--ant-color-warning);
}

.l-btn-warning.l-btn-outline:hover {
  color: var(--ant-color-warning-hover);
  background: var(--ant-color-warning-bg);
  border-color: var(--ant-color-warning-hover);
}

/* Outline Danger */
.l-btn-danger.l-btn-outline {
  color: var(--ant-color-error);
  background: transparent;
  border-color: var(--ant-color-error);
}

.l-btn-danger.l-btn-outline:hover {
  color: var(--ant-color-error-hover);
  background: var(--ant-color-error-bg);
  border-color: var(--ant-color-error-hover);
}

/* Outline Info */
.l-btn-info.l-btn-outline {
  color: var(--ant-color-info);
  background: transparent;
  border-color: var(--ant-color-info);
}

.l-btn-info.l-btn-outline:hover {
  color: var(--ant-color-info-hover);
  background: var(--ant-color-info-bg);
  border-color: var(--ant-color-info-hover);
}

/* 禁用态（放在颜色类型之后，利用 CSS 顺序覆盖所有颜色 hover） */
.l-btn-disabled,
.l-btn-disabled:hover {
  color: var(--ant-color-text-disabled);
  background: var(--ant-color-bg-base);
  border-color: var(--ant-color-border);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   [DONE] 6. TextBox - 文本输入框
   ============================================ */

/* TextBox 专属变量 */
:root {
  /* Small 尺寸 */
  --textbox-height-sm: 24px;
  
  /* Medium 尺寸（默认） */
  --textbox-height-md: 32px;
  
  /* Large 尺寸 */
  --textbox-height-lg: 40px;
}

/* TextBox 基础样式 */
.textbox {
  border-color: var(--ant-color-border);
  background-color: var(--ant-color-bg-container);
  border-radius: var(--ant-border-radius);
  transition: border-color 0.3s, box-shadow 0.3s;
  height: var(--textbox-height-md);
}

/* TextBox 悬停状态 */
.textbox:hover {
  border-color: var(--ant-color-primary);
}

/* TextBox 禁用时取消 hover 效果 */
.textbox-disabled:hover {
  border-color: var(--ant-color-border);
}

/* TextBox 输入区域 */
.textbox .textbox-text {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  padding: 0 var(--ant-padding-sm);
  height: calc(var(--textbox-height-md) - 2px);
  line-height: calc(var(--textbox-height-md) - 2px);
}

/* TextBox 带背景图标时保留图标空间（如 combobox showItemIcon） */
.textbox .textbox-bgicon {
  padding-left: 21px;
}

/* TextBox 占位符 */
.textbox .textbox-prompt {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text-quaternary);
}

/* TextBox 聚焦状态 */
.textbox-focused {
  border-color: var(--ant-color-primary) !important;
  box-shadow: 0 0 0 2px var(--ant-color-primary-outline);
  outline: 0;
}

/* TextBox 校验失败状态 */
.textbox-invalid {
  border-color: var(--ant-color-error) !important;
  background-color: var(--ant-color-bg-container);
}

.textbox-invalid.textbox-focused {
  border-color: var(--ant-color-error) !important;
  box-shadow: 0 0 0 2px var(--ant-color-error-outline);
  outline: 0;
}

/* TextBox 禁用状态 */
.textbox-disabled, .textbox-label-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.textbox-disabled .textbox-text {
  background-color: var(--ant-color-bg-base);
}

/* TextBox 只读状态 */
.textbox-readonly .textbox-text{
  background-color: var(--ant-color-bg-base);
}

/* TextBox 图标 */
.textbox-icon {
  opacity: 0.45;
}

.textbox-icon:hover {
  opacity: 0.85;
}

.textbox-icon-disabled:hover {
  opacity: 0.45;
}

/* TextBox 标签 */
.textbox-label {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

/* TextBox 按钮（右侧/左侧附加按钮） */
.textbox .textbox-button,
.textbox .textbox-button:hover {
  border-color: var(--ant-color-border);
}

/* 浮动标签 */
.form-floating-label.form-field .textbox-label {
  font-size: var(--ant-font-size-sm);
  transition: var(--ant-transition-base);
}

.form-floating-label.form-field-empty .textbox-label {
  font-size: var(--ant-font-size);
}

.form-floating-label.form-field-empty.form-field-focused .textbox-label {
  font-size: var(--ant-font-size-sm);
}

/* TextBox 尺寸变体 - Small */
.textbox.textbox-sm {
  height: var(--textbox-height-sm) !important;
}

.textbox.textbox-sm .textbox-text {
  padding: 0 var(--ant-padding-xxs);
  height: calc(var(--textbox-height-sm) - 2px);
  line-height: calc(var(--textbox-height-sm) - 2px);
}

/* TextBox 尺寸变体 - Medium (默认) */
.textbox.textbox-md {
  height: var(--textbox-height-md) !important;
}

.textbox.textbox-md .textbox-text {
  padding: 0 var(--ant-padding-sm);
  height: calc(var(--textbox-height-md) - 2px);
  line-height: calc(var(--textbox-height-md) - 2px);
}

/* TextBox 尺寸变体 - Large */
.textbox.textbox-lg {
  height: var(--textbox-height-lg) !important;
}

.textbox.textbox-lg .textbox-text {
  padding: 0 var(--ant-padding-sm);
  height: calc(var(--textbox-height-lg) - 2px);
  line-height: calc(var(--textbox-height-lg) - 2px);
}

/* 多行 TextBox 添加上边距 */
.textbox textarea.textbox-text {
  padding-top: var(--ant-padding-xxs);
  padding-bottom: var(--ant-padding-xxs);
  line-height: 1.5;
}

/* ============================================
   [DONE] 7. Combo - 下拉组合框基类✅
   ============================================ */

/* Combo 下拉箭头 */
.combo-arrow {
  opacity: 0.45;
  background-color: var(--ant-color-bg-container);
  transition: opacity 0.3s, background-color 0.3s;
}

.combo-arrow-hover,
.combo-arrow:hover {
  opacity: 0.85;
  background-color: var(--ant-color-bg-base);
}

/* Combo 下拉面板 */
.combo-panel {
  background-color: var(--ant-color-bg-container);
  border-radius: var(--ant-border-radius);
  box-shadow: var(--ant-box-shadow-tertiary);
  padding: var(--ant-padding-xxs) 0;
}

/* ComboBox 列表项 */
.combobox-item,
.combobox-group,
.combobox-stick {
  font-size: var(--ant-font-size);
  padding: var(--ant-padding-xs);
  line-height: 22px;
  color: var(--ant-color-text);
  transition: background-color 0.3s;
}

/* ComboBox 禁用项 */
.combobox-item-disabled {
  color: var(--ant-color-text-disabled);
  opacity: 1;
}

/* ComboBox 分组标题 */
.combobox-group,
.combobox-stick {
  font-weight: var(--ant-font-weight-medium);
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-sm);
}

/* ComboBox 悬停状态 */
.combobox-item-hover {
  background-color: var(--ant-color-bg-base);
  color: var(--ant-color-text);
  cursor: pointer;
}

/* ComboBox 选中状态 */
.combobox-item-selected {
  background-color: var(--ant-color-primary-bg);
  color: var(--ant-color-primary);
  font-weight: var(--ant-font-weight-medium);
}

/* TagBox 标签 */
.tagbox-label {
  border-radius: var(--ant-border-radius-sm);
  background: var(--ant-tag-default-bg);
  color: var(--ant-color-text);
  margin: 3px 0 0 4px;
  padding: 0 20px 0 6px;
  height: var(--ant-control-height-sm) !important;
  line-height: var(--ant-control-height-sm) !important;
  display: inline-flex;
  align-items: center;
}

/* TagBox 删除按钮 - transform 替代 margin-top 居中 */
.tagbox-remove {
  margin-top: 0;
  transform: translateY(-50%);
  opacity: 0.45;
  transition: opacity 0.2s;
}

.tagbox-remove:hover {
  opacity: 0.85;
}

.textbox-disabled .tagbox-remove:hover {
  opacity: 0.45;
}

/* TagBox 覆盖 .textbox-focused 聚焦样式 */
.tagbox.textbox-focused .textbox-text {
  border-color: var(--ant-color-border) !important;
  box-shadow: none !important;
}

/* TagBox 按钮高度撑满 */
.tagbox .textbox-button {
  height: 100% !important;
  align-self: stretch;
}

/* 默认 auto，若设置固定 height 则超出显示滚动条 */
.textbox.tagbox {
  height: auto;
}

/* TagBox 输入区域高度自适应 + 最小宽度确保 placeholder 完整显示 */
.tagbox .textbox-text {
  height: auto !important;
  line-height: normal !important;
  min-height: calc(var(--textbox-height-md) - 2px);
  min-width: 150px !important;
  padding: 4px var(--ant-padding-sm);
}
.tagbox .textbox-text.validatebox-text:focus {
  border-color: var(--ant-color-primary);
  box-shadow: unset;
}

/* ============================================
   [PENDING] 8. Layout - 布局组件
   ============================================ */

.layout {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 0;
}

/* Layout 内部的 panel 是结构拼接件，不是独立卡片 — 去掉圆角 */
.layout > .layout-panel,
.layout > .layout-panel > .panel-header,
.layout > .layout-panel > .panel-body,
.layout > .layout-panel > .panel-body:last-child,
.layout > .layout-panel > .panel-header + .panel-body:last-child {
  border-radius: 0 !important;
}

.layout-panel {
  position: absolute;
  overflow: hidden;
}

/* 折叠面板允许内容溢出显示并支持滚动 */
.layout-expand {
  overflow: visible !important;
}

.layout-expand .panel-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 4px !important;
}

.layout-body {
  min-width: 1px;
  min-height: 1px;
}

/* 折叠面板内的按钮容器 */
.layout-expand #titlebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0px 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 折叠面板内的所有按钮 - 强制全宽并添加间距 */
.layout-expand .l-btn {
  width: 100% !important;
  text-align: center;
  border-radius: var(--ant-border-radius);
  box-sizing: border-box !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.layout-expand .l-btn:last-child {
  margin-bottom: 0 !important;
}

/* 折叠面板内的大按钮样式 */
.layout-expand .l-btn-large {
  padding: 10px 4px;
  height: auto !important;
}

/* 按钮内部容器居中 */
.layout-expand .l-btn-left {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  position: static !important;
  vertical-align: middle;
  overflow: visible !important;
}

.layout-expand .l-btn-text {
  font-size: var(--ant-font-size-sm);
  line-height: 16px;
  text-align: center;
  margin: 4px 0 0 0 !important;
  width: auto !important;
  display: block !important;
}

/* 图标在顶部的按钮 */
.layout-expand .l-btn-icon-top {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
}

/* 折叠面板按钮容器滚动条样式 */
.layout-expand .panel-body::-webkit-scrollbar {
  width: 4px;
}

.layout-expand .panel-body::-webkit-scrollbar-thumb {
  background: var(--ant-color-border);
  border-radius: 2px;
}

.layout-expand .panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.layout-panel-east,
.layout-panel-west {
  z-index: 2;
}

.layout-panel-north,
.layout-panel-south {
  z-index: 3;
}

.layout-expand {
  position: absolute;
  padding: 0px;
  font-size: 1px;
  cursor: pointer;
  z-index: 1;
}

.layout-expand .panel-header,
.layout-expand .panel-body {
  background: transparent;
  filter: none;
  overflow: hidden;
}

.layout-expand .panel-header {
  border-bottom-width: 0px;
}

.layout-expand .panel-body {
  position: relative;
}

.layout-expand .panel-body .panel-icon {
  margin-top: 0;
  top: 0;
  left: 50%;
  margin-left: -8px;
}

.layout-expand-west .panel-header .panel-icon,
.layout-expand-east .panel-header .panel-icon {
  display: none;
}

.layout-expand-title {
  position: absolute;
  top: 0;
  left: 21px;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotate(90deg);
  -moz-transform-origin: 0 0;
  -o-transform: rotate(90deg);
  -o-transform-origin: 0 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
}

.layout-expand-title-up {
  position: absolute;
  top: 0;
  left: 0;
  text-align: right;
  padding-left: 5px;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: 0 0;
  -o-transform: rotate(-90deg);
  -o-transform-origin: 0 0;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.layout-expand-with-icon {
  top: 18px;
}

.layout-expand .panel-body-noheader .layout-expand-title,
.layout-expand .panel-body-noheader .panel-icon {
  top: 5px;
}

.layout-expand .panel-body-noheader .layout-expand-with-icon {
  top: 23px;
}

.layout-split-proxy-h,
.layout-split-proxy-v {
  position: absolute;
  font-size: 1px;
  display: none;
  z-index: 5;
}

.layout-split-proxy-h {
  width: 5px;
  cursor: e-resize;
}

.layout-split-proxy-v {
  height: 5px;
  cursor: n-resize;
}

.layout-mask {
  position: absolute;
  background: #fafafa;
  filter: alpha(opacity=10);
  opacity: 0.10;
  z-index: 4;
}

.layout-split-proxy-h,
.layout-split-proxy-v {
  background-color: #b3b3b3;
}

.layout-split-north {
  border-bottom: 5px solid #fff;
}

.layout-split-south {
  border-top: 5px solid #fff;
}

.layout-split-east {
  border-left: 5px solid #fff;
}

.layout-split-west {
  border-right: 5px solid #fff;
}

.layout-expand {
  background-color: #ffffff;
}

.layout-expand-over {
  background-color: #ffffff;
}

/* Layout 折叠条是布局结构件，去掉圆角 */
.layout-expand,
.layout-expand > .panel-header,
.layout-expand > .panel-body,
.layout-expand > .panel-body:last-child,
.layout-expand > .panel-header + .panel-body:last-child {
  border-radius: 0 !important;
}

/* ============================================
   [DONE] 9. Tabs - 选项卡组件
   ============================================ */

/* Tab 标签页样式 */
.tabs li .tabs-inner {
  color: var(--ant-color-text);
  background-color: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
  font-size: var(--ant-font-size);
  padding: var(--ant-padding-xs) var(--ant-padding-sm) !important;
  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
  height: 40px !important;
  line-height: 1.5715 !important;
  box-sizing: border-box !important;
}

/* Tab 包含图片时的样式 */
.tabs li .tabs-inner[style*="height: 60px"] {
  height: 80px !important;
}

/* Tab hover 状态 */
.tabs li .tabs-inner:hover {
  background-color: var(--ant-color-bg-layout);
  color: var(--ant-color-primary);
}

/* Tab 选中状态 */
.tabs li.tabs-selected .tabs-inner {
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-primary);
  font-weight: var(--ant-font-weight-medium);
  border-color: var(--ant-color-border);
  border-bottom-color: var(--ant-color-bg-container);
}

/* Tab 列表项间距 */
.tabs li {
  margin-right: 2px !important;
}

/* Tabs 容器高度 */
.tabs {
  height: 40px !important;
}

/* Tabs 容器包含图片时的高度 */
.tabs[style*="height: 60px"] {
  height: 80px !important;
}

/* Tabs Header */
.tabs-header {
  background-color: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
}

.tabs-header:not(.tabs-header-bottom):not(.tabs-header-left):not(.tabs-header-right) {
  border-top-left-radius: var(--ant-border-radius);
  border-top-right-radius: var(--ant-border-radius);
}

.tabs-header.tabs-header-plain{
  background-color: transparent;
}

/* Tabs 边框颜色 */
.tabs,
.tabs-panels,
.tabs-tool,
.tabs-scroller-left,
.tabs-scroller-right {
  border-color: var(--ant-color-border);
}

/* Tabs Panels 内容区域 */
.tabs-panels {
  background-color: var(--ant-color-bg-container);
}

.tabs-header:not(.tabs-header-bottom):not(.tabs-header-left):not(.tabs-header-right) ~ .tabs-panels {
  border-bottom-left-radius: var(--ant-border-radius);
  border-bottom-right-radius: var(--ant-border-radius);
}

.tabs-panels > .panel > .panel-body {
  box-sizing: border-box;
}

/* Tabs Tool 工具栏 */
.tabs-tool {
  background-color: var(--ant-color-bg-container);
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  display: flex !important;
  align-items: center;
}

/* 工具栏内按钮 hover 防抖 - 保持 padding 一致 */
.tabs-tool .l-btn-plain.l-btn-small,
.tabs-tool .l-btn-plain.l-btn-small:hover {
  padding: 4px !important;
}

/* 工具栏图标按钮居中 - 只调整图标位置，不改变按钮尺寸 */
.tabs-tool .l-btn-icon-left .l-btn-icon {
  left: 50%;
  transform: translateX(-50%);
}

/* 底部 Tabs 工具栏边框修正 */
.tabs-header-bottom .tabs-tool {
  border-top-width: 1px !important;
  border-bottom-width: 0 !important;
}

/* Scroller 左右箭头边框修正 - 消除与 tabs-header 的边框重叠 */
.tabs-scroller-left {
  border-top-width: 0 !important;
  border-left-width: 0 !important;
}

.tabs-scroller-right {
  border-top-width: 0 !important;
  border-right-width: 0 !important;
}

/* 底部 Tabs Scroller 边框修正 */
.tabs-header-bottom .tabs-scroller-left {
  border-top-width: 1px !important;
  border-bottom-width: 0 !important;
}

.tabs-header-bottom .tabs-scroller-right {
  border-top-width: 1px !important;
  border-bottom-width: 0 !important;
}

/* Scroller 按钮 hover */
.tabs-scroller-over,
.tabs-p-tool a:hover,
.tabs li a:hover.tabs-close {
  background-color: var(--ant-color-bg-layout);
}

/* 底部 Tabs */
.tabs-header-bottom .tabs li .tabs-inner {
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
}

.tabs-header-bottom .tabs li.tabs-selected .tabs-inner {
  border-top-color: var(--ant-color-bg-container);
  border-bottom-color: var(--ant-color-border);
}

/* 左侧 Tabs */
.tabs-header-left .tabs li .tabs-inner {
  border-radius: var(--ant-border-radius);
}

.tabs-header-left .tabs li.tabs-selected .tabs-inner {
  background-color: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
  color: var(--ant-color-primary);
  font-weight: var(--ant-font-weight-medium);
}

/* 左侧 Tabs 列表项间距 */
.tabs-header-left .tabs li {
  margin-bottom: 8px !important;
  margin-right: 0 !important;
  width: auto;
}

/* 左侧 Tabs 容器 */
.tabs-header-left .tabs {
  margin-right: 0;
  padding: var(--ant-padding-xs) !important;
  border-width: 0 !important;
}

/* 左侧 - 统一外框：左半圆角 + 分隔线 */
.tabs-header-left {
  border-color: var(--ant-color-border) !important;
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
}

.tabs-header-left .tabs-wrap {
  border-right: 1px solid var(--ant-color-border) !important;
}

.tabs-panels-right {
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0;
}

/* 右侧 Tabs */
.tabs-header-right .tabs li .tabs-inner {
  border-radius: var(--ant-border-radius);
}

.tabs-header-right .tabs li.tabs-selected .tabs-inner {
  background-color: var(--ant-color-bg-container);
  border-color: var(--ant-color-border);
  color: var(--ant-color-primary);
  font-weight: var(--ant-font-weight-medium);
}

/* 右侧 Tabs 列表项间距 */
.tabs-header-right .tabs li {
  margin-bottom: 8px !important;
  margin-left: 0 !important;
  width: auto;
}

/* 右侧 Tabs 容器 */
.tabs-header-right .tabs {
  margin-left: 0;
  padding: var(--ant-padding-xs) !important;
  border-width: 0 !important;
}

/* 右侧 - 统一外框：右半圆角 + 分隔线 */
.tabs-header-right {
  border-color: var(--ant-color-border) !important;
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0;
}

.tabs-header-right .tabs-wrap {
  border-left: 1px solid var(--ant-color-border) !important;
}

.tabs-panels-left {
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
}

/* Pill 样式 */
.tabs-header .tabs-pill li .tabs-inner {
  border-radius: var(--ant-border-radius);
}

.tabs-header .tabs-pill li.tabs-selected .tabs-inner {
  background-color: var(--ant-color-primary-bg);
  color: var(--ant-color-primary);
  border-color: var(--ant-color-primary-bg);
}

/* ============================================
   [DONE] 10. DataGrid - 数据表格
   参考 Ant Design Table 设计规范
   ============================================ */

/* --- 表格容器 --- */			 
.datagrid-wrap {
  border-radius: 0;
  padding: 0;
			 
}
.datagrid {
  background: var(--ant-color-bg-container);				  
}

/* --- 表头样式 (Ant Design: #fafafa + 加粗 + 底部边框) --- */	  
.datagrid-header {
  background-color: var(--ant-table-header-bg, #fafafa);
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
				  
						  
}
.datagrid-header .datagrid-cell span {
  font-size: var(--ant-font-size);
  font-weight: var(--ant-font-weight-strong, 600);
  color: var(--ant-table-header-color, rgba(0, 0, 0, 0.88));
}

/* --- 单元格样式 (Ant Design: 只保留行底部分隔线，无垂直边框) --- */
.datagrid-header td,
.datagrid-body td,
.datagrid-footer td {
  border: none;
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
}

/* --- 单元格内边距 (Ant Design: 16px 8px) --- */
.datagrid-cell { 
  height: 44px;	   
  line-height: 44px;					 
}

/* 分组表头 (Column Group) */				 
.datagrid-cell-group {
  text-align: center;
  font-weight: var(--ant-font-weight-strong, 600);
  color: var(--ant-table-header-color, rgba(0, 0, 0, 0.88));
}

/* 行号列 — 垂直居中对齐 */
.datagrid-header-rownumber,
.datagrid-cell-rownumber {
  padding: 0;
  text-align: center;
  height: 44px;
  line-height: 44px;
  vertical-align: middle;
}

/* --- 行高 (固定高度确保 view1/view2 同步) --- */
.datagrid-header-row,
.datagrid-row {
  height: 44px;
}

/* --- 行号列 --- */
.datagrid-td-rownumber {
  background-color: var(--ant-table-header-bg, #fafafa);
}
.datagrid-cell-rownumber {
  color: var(--ant-color-text-secondary); 
}

/* --- 表格内容文字 --- */
.datagrid-htable,
.datagrid-btable,
.datagrid-ftable {
  color: var(--ant-color-text);
  border-collapse: separate;
  border-spacing: 0;
}

/* --- 斑马纹 (Ant Design 默认无斑马纹) --- */
.datagrid-row-alt {
  background: transparent;
}

/* --- Footer 行样式 --- */
.datagrid-footer {
  background-color: var(--ant-table-header-bg, #fafafa);
}
.datagrid-footer-inner {
  border-color: var(--ant-table-border-color, #f0f0f0);		 
}
.datagrid-footer .datagrid-cell {
  font-weight: var(--ant-font-weight-medium, 500);
}

/* --- 行 Hover 状态 (Ant Design: 浅灰色而非蓝色) --- */
.datagrid-row:hover,
.datagrid-row-over,
.datagrid-header td.datagrid-header-over {
  background: var(--ant-table-row-hover-bg, #fafafa);			 
}

/* --- 行选中状态 (Ant Design: 浅蓝色背景) --- */
.datagrid-row-selected {
  background: var(--ant-blue-1, #e6f7ff);
}
.datagrid-row-selected td {
  border-bottom-color: var(--ant-table-border-color, #f0f0f0);		   
}

/* --- 工具栏和分页 --- */
.datagrid-toolbar,
.datagrid-pager {
  background: var(--ant-color-bg-container);
  border-color: var(--ant-table-border-color, #f0f0f0);
  padding: var(--ant-padding-xs);
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.datagrid-toolbar .datagrid-btns>* {
  margin-right:10px;		  
}

.datagrid-btn-separator {
  display: none;
}

/* --- 掩码层 --- */
.datagrid-mask {
  background: var(--ant-color-bg-container);
  opacity: 0.8;				
}
 		  															  
.datagrid-mask-msg {
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
  padding: 12px 12px 12px 36px;
}

/* --- 调整列宽手柄 --- */
	  
.datagrid-resize-proxy {
  background: var(--ant-color-primary);
  width: 2px;
}

/* --- 编辑输入框 --- */
.datagrid-view .datagrid-editable-input {
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  padding: 4px 8px;
}
.datagrid-view .validatebox-invalid {
  border-color: var(--ant-color-error);
}

/* --- 排序图标 (Ant Design 双箭头设计) --- */
/* 隐藏 EasyUI 默认排序图标 */
.datagrid-sort-icon {
  display: none !important;
}

/* Ant Design 风格：双箭头始终显示，激活的高亮 */
.datagrid-header .datagrid-cell {
  position: relative;
						
}

/* 排序列标记 */
.datagrid-sort .datagrid-cell::after,
.datagrid-sort-asc .datagrid-cell::after,
.datagrid-sort-desc .datagrid-cell::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 12px;
  height: 16px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 16px;
  opacity: 0.3;
  transition: opacity 0.2s;
}

/* 升序箭头 */
.datagrid-sort-asc .datagrid-cell::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231890ff' d='M12 8l6 6H6z'/%3E%3Cpath fill='%23bfbfbf' d='M12 16l6-6H6z'/%3E%3C/svg%3E");
}

/* 降序箭头 */
.datagrid-sort-desc .datagrid-cell::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bfbfbf' d='M12 8l6 6H6z'/%3E%3Cpath fill='%231890ff' d='M12 16l6-6H6z'/%3E%3C/svg%3E");
}

/* hover 时显示排序图标 */
.datagrid-header td.datagrid-header-over .datagrid-cell::after {
  opacity: 0.6;
			  
}
.datagrid-header td.datagrid-header-over .datagrid-sort-icon {
  display: none !important;
					  
}

/* --- 展开/折叠图标 (SVG 替代 PNG) --- */
.datagrid-row-collapse {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 14px 14px;
}
.datagrid-row-expand {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 14px 14px;
}

/* --- 列拖拽代理 --- */
.datagrid-split-proxy {
  border-left-color: var(--ant-color-primary);		   
}
.datagrid-moving-proxy {
  border: none;
  background: var(--ant-blue-1, #e6f7ff);
  color: var(--ant-color-primary);
  border-radius: var(--ant-border-radius);
  box-shadow: var(--ant-box-shadow-tertiary);
}

/* ============================================
   10.1 PropertyGrid - 属性表格
   ============================================ */
.propertygrid .datagrid-view1 .datagrid-body td {
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);											 
}
.propertygrid .datagrid-view1 .datagrid-group {
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
}
.propertygrid .datagrid-view2 .datagrid-group {
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
}
.propertygrid .datagrid-group,
.propertygrid .datagrid-view1 .datagrid-body,
.propertygrid .datagrid-view1 .datagrid-row-over,
.propertygrid .datagrid-view1 .datagrid-row-selected {
  background: var(--ant-color-bg-container);
}
.propertygrid .datagrid-group span {
  font-weight: var(--ant-font-weight-strong, 600);
  color: var(--ant-color-text);
}

/* ============================================
   10.2 DataList - 数据列表
   ============================================ */
.datalist .datagrid-group,
.m-list .m-list-group {
  background-color: var(--ant-table-header-bg, #fafafa);
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
  font-weight: var(--ant-font-weight-strong, 600);
  color: var(--ant-table-header-color, rgba(0, 0, 0, 0.88));
  padding: 12px 8px;
  height: auto;
}
.datalist .datagrid-cell,
.m-list li {
  color: var(--ant-color-text);
}
.datalist-link,
.m-list li>a {
  color: var(--ant-color-text);
  padding: 12px 8px;
}
.datalist-link:hover,
.m-list li>a:hover {
  background: var(--ant-table-row-hover-bg, #fafafa);
  color: var(--ant-color-primary);
}
/* 列表项箭头 */
.datalist-link::after,
.m-list li>a::after {
  border-color: var(--ant-color-text-secondary);
}
.m-list li {
  border-bottom: 1px solid var(--ant-table-border-color, #f0f0f0);
			  
}

/* ============================================
   DataList - 通用样式（无lines时）
   ============================================ */
.datalist .datagrid-row td {
  border-top: none !important;							  
}

/* ============================================
   DataList Lines - 列表分隔线 Ant Design 风格
   ============================================ */
.datalist-lines .datagrid-row td {
  border: none !important;
  border-bottom: 1px solid var(--ant-color-border) !important;
}
.datalist-lines .datagrid-row:last-child td {
  border-bottom: none !important;					  
}
.datalist-lines .datagrid-row-over td,
.datalist-lines .datagrid-row-over:hover td {
  background-color: var(--ant-table-row-hover-bg, #fafafa) !important;					  
}
.datalist-lines .datagrid-row-selected td {
  background-color: var(--ant-color-primary-bg, #e6f7ff) !important;						  
}

/* DataList 容器圆角 */
.datalist .datagrid-body {
  border-radius: 0 0 var(--ant-border-radius-sm, 4px) var(--ant-border-radius-sm, 4px);
}
.datalist .datagrid-header {
  border-radius: var(--ant-border-radius-sm, 4px) var(--ant-border-radius-sm, 4px) 0 0;					  
}

/* --- 空数据提示 --- */
.datagrid-empty {
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
  padding: 32px 16px;
}

/* ============================================
   [DONE] 11. Pagination - 分页组件 ✅
   Ant Design 分页器设计规范：
   - 分页项 32px 高度，6px 圆角
   - 当前页：primary 色背景，白色文字
   - hover：浅色背景
   - 禁用：灰色，不可点击
   ============================================ */

/* Pagination 专属变量 */
:root {
  --pagination-height: 32px;
}

/* --- 分页容器 --- */
.pagination {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--ant-margin-xxs);
  padding: var(--ant-padding-xxs) 0;
  font-size: var(--ant-font-size);
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
}

.pagination table {
  float: none;
  height: var(--pagination-height);
}

.pagination td {
  border: 0;
  padding: 0 2px;
}

/* --- 分页按钮基础样式 --- */
.pagination .l-btn {
  height: var(--pagination-height);
  min-width: var(--pagination-height);
  padding: 0;
  margin-right: var(--ant-margin-xxs);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container, #fff);
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
  cursor: pointer;
  box-shadow: none;
}

.pagination .l-btn:hover,
.pagination .l-btn.l-btn-small:hover,
.pagination .l-btn.l-btn-plain:hover,
.pagination .l-btn.l-btn-plain.l-btn-small:hover {
  border-color: var(--ant-color-primary, #1677ff);
  border-radius: var(--ant-border-radius);
  color: var(--ant-color-primary, #1677ff);
  box-shadow: none;
  padding: 0 !important;  /* 覆盖全局 l-btn hover 的 padding，防止宽度变化 */
}

.pagination .l-btn:active,
.pagination .l-btn.l-btn-small:active,
.pagination .l-btn.l-btn-plain:active,
.pagination .l-btn.l-btn-plain.l-btn-small:active {
  border-color: var(--ant-color-primary-active, #0958d9);
  color: var(--ant-color-primary-active, #0958d9);
  box-shadow: none;
  padding: 0 !important;
}

/* 强制覆盖 plain 小按钮 hover/active 时的 padding（更高优先级） */
.pagination .l-btn-plain.l-btn-small:hover:not(.tabs-inner),
.pagination .l-btn-plain.l-btn-small:active:not(.tabs-inner) {
  padding: 0 !important;
}

/* 禁用按钮 */
.pagination .l-btn-disabled,
.pagination .l-btn-disabled:hover {
  border-color: var(--ant-color-border);
  background: var(--ant-color-bg-container-disabled, rgba(0, 0, 0, 0.04));
  color: var(--ant-color-text-disabled, rgba(0, 0, 0, 0.25));
  cursor: not-allowed;
  box-shadow: none;
  padding: 0 !important;				 
}

/* --- 按钮内部容器垂直居中 --- */
.pagination .l-btn-left {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  vertical-align: middle;
					
}

/* --- 分页按钮文字（始终垂直居中）--- */
.pagination .l-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--pagination-height) - 2px);
  line-height: calc(var(--pagination-height) - 2px);
  padding: 0 8px;
  margin: 0;
  font-size: var(--ant-font-size);
  vertical-align: middle;
}

/* --- 数字页码链接 --- */
				  
.pagination-link .l-btn-text {
  min-width: var(--pagination-height);				 
  padding: 0;		  
}

/* 当前页高亮 */
.pagination-link.l-btn-selected,
.pagination-link.l-btn-selected:hover {
  border-color: var(--ant-color-primary, #1677ff);
  background: var(--ant-color-primary, #1677ff);
  color: #fff;
  padding: 0 !important;
}

.pagination-link.l-btn-selected .l-btn-text {
  color: #fff;
}

/* --- 导航图标按钮 --- */
.pagination-first .l-btn-text,
.pagination-prev .l-btn-text,
.pagination-next .l-btn-text,
.pagination-last .l-btn-text,
.pagination-load .l-btn-text {
  min-width: var(--pagination-height);
  padding: 0;
}

/* CSS 绘制导航箭头（替代 PNG sprite） */
.pagination-first .l-btn-text::before { content: '«'; }
.pagination-prev .l-btn-text::before { content: '‹'; }
.pagination-next .l-btn-text::before { content: '›'; }
.pagination-last .l-btn-text::before { content: '»'; }

.pagination-first .l-btn-text::before,
.pagination-prev .l-btn-text::before,
.pagination-next .l-btn-text::before,
.pagination-last .l-btn-text::before {
  display: block;
  font-size: var(--ant-icon-font-size-lg);
  font-weight: bold;
  line-height: 1;
}

/* 加载图标 */
.pagination-load .l-btn-text::before {
  content: '↻';
  display: block;
  font-size: var(--ant-icon-font-size-lg);
  line-height: 1;
}

/* --- 分隔线 --- */
.pagination-btn-separator {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin: 0 var(--ant-margin-xxs);
  background: var(--ant-color-split, rgba(0, 0, 0, 0.06));
  vertical-align: middle;
}

/* --- 页码输入框 --- */
.pagination .pagination-num {
  width: 50px;
  height: var(--pagination-height);
  padding: 4px 8px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  font-size: var(--ant-font-size);
  text-align: center;
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
  background: var(--ant-color-bg-container, #fff);
  transition: all 0.2s;
  outline: none;
}

.pagination .pagination-num:hover {
  border-color: var(--ant-color-primary-hover, #4096ff);
}

.pagination .pagination-num:focus {
  border-color: var(--ant-color-primary, #1677ff);
  box-shadow: 0 0 0 2px var(--ant-color-primary-bg-hover, rgba(22, 119, 255, 0.1));
}

/* --- 每页条数下拉框 --- */
.pagination-page-list {
  height: var(--pagination-height);
  padding: 4px 28px 4px 12px;
  margin: 0;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
  background: var(--ant-color-bg-container, #fff);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.pagination-page-list:hover {
  border-color: var(--ant-color-primary-hover, #4096ff);
}

.pagination-page-list:focus {
  border-color: var(--ant-color-primary, #1677ff);
  box-shadow: 0 0 0 2px var(--ant-color-primary-bg-hover, rgba(22, 119, 255, 0.1));
}

/* --- 每页条数 Combobox（替代原生 select）--- */
.pagination .combo.pagination-page-combo {
  margin-right: var(--ant-margin-xxs);
}

.pagination .combo.pagination-page-combo .combo-text {
  height: calc(var(--pagination-height) - 2px);
  line-height: calc(var(--pagination-height) - 2px);
}

.pagination .combo.pagination-page-combo .combo-arrow {
  height: calc(var(--pagination-height) - 2px);
  width: 24px;
}

/* --- 分页信息文字 --- */
.pagination-info {
  float: none;
  margin-left: auto;
  height: var(--pagination-height);
  line-height: var(--pagination-height);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.45));
  /* 防止内容溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.pagination span {
  font-size: var(--ant-font-size);
}

/* --- 页码导航文字 --- */
.pagination-nav {
  display: inline-flex;
  align-items: center;
  height: var(--pagination-height);
  padding: 0 var(--ant-margin-xxs);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.45));
}

/* --- 简洁模式 (Simple) --- */
.pagination-simple {
  display: inline-flex;
  align-items: center;
  gap: var(--ant-margin-xxs);
}

.pagination-simple .pagination-current,
.pagination-simple .pagination-total {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
}

.pagination-simple .pagination-slash {
  margin: 0 4px;
  color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.45));
}

/* ============================================
   [DONE] 12. Calendar - 日历组件
   ============================================ */

/* 日历边框 */
.calendar {
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

/* 表格字体 */
.calendar table td,
.calendar table th {
  font-size: var(--ant-font-size);
}

/* 标题栏 */
.calendar-header {
  background: var(--ant-color-bg-container);
}

/* 标题文字 */
.calendar-title span {
  font-size: var(--ant-font-size);
  border-radius: var(--ant-border-radius);
}

/* 导航箭头圆角 */
.calendar-prevmonth,
.calendar-nextmonth,
.calendar-prevyear,
.calendar-nextyear {
  border-radius: var(--ant-border-radius-sm);
}

/* 日期单元格圆角 */
.calendar-day {
  color: var(--ant-color-text);
  border-radius: var(--ant-border-radius-sm);
}

/* 非当月日期 */
.calendar-other-month {
  color: var(--ant-color-text-disabled);
  opacity: 1;
}

/* 星期标题和月份菜单 */
.calendar-body th,
.calendar-menu-month {
  color: var(--ant-color-text-secondary);
}

/* 周日 - 红色 */
.calendar-sunday {
  color: var(--ant-color-error);
}

/* 周六 - 绿色 */
.calendar-saturday {
  color: var(--ant-color-success);
}

/* 今天 - 主题色 */
.calendar-today {
  color: var(--ant-color-primary);
  font-weight: var(--ant-font-weight-medium);
}

/* 年份输入框边框 */
.calendar-menu-year {
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  font-size: var(--ant-font-size);
}

/* 日历主体和菜单背景 */
.calendar-body,
.calendar-menu {
  background: var(--ant-color-bg-container);
}

/* 星期标题行 */
.calendar-body th {
  background: var(--ant-color-bg-container);
}

/* Hover 状态 */
.calendar-hover,
.calendar-nav-hover,
.calendar-menu-hover {
  background-color: var(--ant-color-fill-secondary);
  color: var(--ant-color-text);
}

.calendar-hover {
  border-color: var(--ant-color-border);
}

/* 选中状态 - Ant Design 主题色 */
.calendar-selected {
  background-color: var(--ant-color-primary);
  color: var(--ant-color-text-light-solid);
  border-color: var(--ant-color-primary);
}

/* 日历信息区 */
.calendar-info {
  background-color: var(--ant-color-bg-container);
}

.calendar-info .year {
  font-size: var(--ant-font-size);
}

/* 月份菜单圆角 */
.calendar-menu-month {
  border-radius: var(--ant-border-radius-sm);
}

/* 年份导航按钮圆角 */
.calendar-menu-prev,
.calendar-menu-next {
  border-radius: var(--ant-border-radius-sm);
}

/* ============================================
   DateBox - 日期选择框
   ============================================ */

/* 底部按钮区 */
.datebox-button {
  background-color: var(--ant-color-bg-container);
  border-top: 1px solid var(--ant-color-split);
}

/* 按钮文字 */
.datebox-button a {
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
  transition: color 0.2s;
}

.datebox-button a:hover {
  color: var(--ant-color-primary);
}

/* ============================================
   [DONE] 13. Spinner - 微调器组件
   ============================================ */

/* Spinner 按钮背景 */
.spinner-arrow.spinner-button-top,
.spinner-arrow.spinner-button-bottom,
.spinner-arrow.spinner-button-left,
.spinner-arrow.spinner-button-right {
  background-color: var(--ant-color-bg-container);
}

/* Spinner 上下箭头 */
.spinner-arrow-up,
.spinner-arrow-down {
  color: var(--ant-color-text-secondary);
  background-color: var(--ant-color-bg-container);
  transition: background-color 0.3s;
}

/* updown 模式箭头背景透明 */
.spinner-button-updown .spinner-arrow-up,
.spinner-button-updown .spinner-arrow-down,
.spinner-button-updown .spinner-arrow-up:hover,
.spinner-button-updown .spinner-arrow-down:hover {
  background-color: transparent;
}

/* Spinner hover 状态 */
.spinner-arrow-hover {
  background-color: var(--ant-color-bg-layout);
}

.spinner-button-top:hover,
.spinner-button-bottom:hover,
.spinner-button-left:hover,
.spinner-button-right:hover,
.spinner-arrow-up:hover,
.spinner-arrow-down:hover {
  background-color: var(--ant-color-bg-layout);
}

/* Spinner 禁用状态 */
.textbox-disabled .spinner-button-top:hover,
.textbox-disabled .spinner-button-bottom:hover,
.textbox-disabled .spinner-button-left:hover,
.textbox-disabled .spinner-button-right:hover,
.textbox-icon-disabled .spinner-arrow-up:hover,
.textbox-icon-disabled .spinner-arrow-down:hover {
  background-color: var(--ant-color-bg-container);
}

/* Spinner 按钮图标在容器内居中 */
.spinner-button .l-btn-left {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  height: 100% !important;
}

.spinner-button .l-btn-text {
  margin: 0 !important;
  line-height: 1;
}

.spinner-button .l-btn-icon {
  position: static;
  margin-top: 0;
}

/* Vertical 模式按钮文本样式 */
.spinner .textbox-button-top .l-btn-text,
.spinner .textbox-button-bottom .l-btn-text {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: var(--ant-font-size);
  padding: 0;
  width: 16px;
}

/* Vertical 模式下文本区域正常显示 */
.spinner-vertical .textbox-text {
  text-align: center;
  /* 覆盖固定高度，让文本区域自适应 */
  height: auto !important;
  line-height: normal !important;
  padding: 18px 0;
  min-height: 20px;
}

/* Vertical 模式下容器需要足够高度 */
.spinner-vertical {
  min-height: 60px;
}

/* Vertical 模式按钮样式 */
.spinner-vertical .textbox-button-top.spinner-button,
.spinner-vertical .textbox-button-bottom.spinner-button {
  height: 18px !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute;
}

.spinner-vertical .textbox-button-top.spinner-button {
  top: 0;
}

.spinner-vertical .textbox-button-bottom.spinner-button {
  bottom: 0;
  top: auto;
}

/* Spinner 按钮 hover 状态 - 浅色背景 */
.spinner .spinner-button:hover {
  background-color: var(--ant-color-bg-layout);
}

/* ============================================
   [DONE] 14. ProgressBar - 进度条
   ============================================ */

/* 进度条容器 - Ant Design 圆角 + 轨道背景 */
.progressbar {
  border-color: transparent;
  border-radius: 100px;
  background-color: var(--ant-color-bg-base);
}

/* 进度条文字 */
.progressbar-text {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

/* 进度条填充值 - 主题色 */
.progressbar-value {
  background-color: var(--ant-color-primary);
  border-radius: 100px;
}

/* 填充区域内文字 */
.progressbar-value .progressbar-text {
  background-color: transparent;
  color: var(--ant-color-text-light-solid);
}
/* ============================================
  结束
   ============================================ */

/* ============================================
   [DONE] 15. Search - 搜索组件
   ============================================ */

/* SearchBox 按钮区域 - 防止全局 !important padding 覆盖 */
.searchbox .l-btn-plain {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  background: var(--ant-color-bg-container);
  transition: background-color 0.3s;
}

.searchbox .l-btn-plain:hover {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  background: var(--ant-color-bg-layout);
}

/* ============================================
   [DONE] 16. Slider - 滑块组件
   ============================================ */

/* 滑轨 - Ant Design 圆角 + 主题色 */
.slider-inner {
  border-color: transparent;
  border-radius: 100px;
  background: var(--ant-color-bg-base);
}

/* 填充轨道 - 从起点到手柄位置的主题色（由 easyui-ant-design.js 设置 CSS 变量驱动） */
.slider-h .slider-inner::before {
  content: '';
  position: absolute;
  left: var(--slider-fill-left, 0%);
  top: 0;
  bottom: 0;
  width: var(--slider-fill-width, 0%);
  background: var(--ant-color-primary);
  border-radius: 100px;
  pointer-events: none;
}

.slider-v .slider-inner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--slider-fill-left, 0%);
  height: var(--slider-fill-width, 0%);
  width: auto;
  background: var(--ant-color-primary);
  border-radius: 100px;
  pointer-events: none;
}

/* 滑块手柄 - Ant Design 小圆点风格（覆盖 JS 内联 SVG 背景） */
.slider-handle {
  background-color: var(--ant-color-bg-container) !important;
  background-image: none !important;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border: 2px solid var(--ant-blue-3);
  border-radius: 50%;
  z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.slider-v .slider-handle {
  margin-top: -7px;
}

.slider-handle:hover {
  border-color: var(--ant-color-primary);
  box-shadow: 0 0 0 5px var(--ant-color-primary-outline);
}

/* 提示文字 - Ant Design tooltip 风格 */
.slider-tip {
  top: -30px;
  z-index: 2;
  background: var(--ant-color-bg-spotlight);
  color: var(--ant-color-text-light-solid);
  padding: 4px 8px;
  border-radius: var(--ant-border-radius);
  font-size: var(--ant-font-size);
}

/* tooltip 下箭头（水平模式） */
.slider-tip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--ant-color-bg-spotlight);
}

/* tooltip 右箭头（垂直模式） */
.slider-v .slider-tip::after {
  bottom: auto;
  left: auto;
  right: -4px;
  top: 50%;
  margin-left: 0;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--ant-color-bg-spotlight);
  border-right: none;
}

/* 刻度线 */
.slider-rule span {
  border-color: var(--ant-color-split);
}

/* 刻度标签 */
.slider-rulelabel span {
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
}

/* ============================================
   [DONE] 17. Menu - 菜单组件 
   ============================================ */

/* 菜单入场动画 - 仅 opacity + 微位移，避免 scaleY 干扰 getBoundingClientRect */
@keyframes antMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu {
  padding: var(--ant-padding-xxs) 0;
  border-color: transparent;
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  border-radius: var(--ant-border-radius);
  box-shadow: var(--ant-box-shadow-tertiary);
}

/* 菜单入场动画 - 由 easyui-ant-design.js 触发 */
.menu-animate-in {
  animation: antMenuFadeIn 0.15s ease-out;
  transform-origin: top left;
}

.menu-content {
  background: var(--ant-color-bg-container);
}

.menu-sep {
  margin: var(--ant-padding-xxs);
}

.menu-item {
  height:36px;
  border-color: transparent;
  margin: 0 var(--ant-padding-xxs);
  border-radius: var(--ant-border-radius-sm);
  transition: background-color 0.3s, color 0.3s;
}

.menu-text {
  height: 26px;
  line-height: 26px;
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
}

.menu-text span {
  font-size: var(--ant-font-size);
}

.menu-icon {
  margin-top: 0;
  transform: translateY(-50%);
}

/* 子菜单右箭头 - CSS 替代背景图片 */
.menu-rightarrow {
  background-image: none;
}

.menu-rightarrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--ant-color-text-secondary);
  border-bottom: 1.5px solid var(--ant-color-text-secondary);
  transform: translate(-70%, -50%) rotate(-45deg);
}

/* 菜单项 hover 状态 */
.menu-active {
  border-color: transparent;
  color: var(--ant-color-primary);
  background-color: var(--ant-color-bg-layout);
  border-radius: var(--ant-border-radius-sm);
}

.menu-active .menu-text {
  color: var(--ant-color-primary);
}

.menu-active .menu-rightarrow::after {
  border-color: var(--ant-color-primary);
}

/* 禁用状态 */
.menu-active-disabled {
  border-color: transparent;
  background: transparent;
  color: var(--ant-color-text-disabled);
}

.menu-item-disabled {
  opacity: 1;
  color: var(--ant-color-text-disabled);
}

.menu-item-disabled .menu-text {
  color: var(--ant-color-text-disabled);
}

.menu-item-disabled .menu-rightarrow::after {
  border-color: var(--ant-color-text-disabled);
}

/* 菜单阴影层 */
.menu-shadow {
  background: transparent;
  box-shadow: none;
  border-radius: var(--ant-border-radius);
}

/* 左侧分隔线 */
.menu-line {
  border-left: none;
  border-right: none;
}

/* MenuButton / SplitButton 视觉覆盖 */
.m-btn-active,
.s-btn-active {
  background: var(--ant-color-bg-base);
  color: var(--ant-color-text);
  border: 1px solid var(--ant-color-border);
  filter: none;
}

.m-btn-plain-active,
.s-btn-plain-active {
  border-color: var(--ant-color-border);
  background-color: var(--ant-color-bg-base);
  color: var(--ant-color-text);
}

.m-btn .l-btn-left .m-btn-line {
  border-color: var(--ant-color-border);
}

/* MenuButton 文字右侧间距 - 防止被 .l-btn-small .l-btn-text:has(+.l-btn-icon) 的 margin-right:6px 覆盖 */
.m-btn .l-btn-left .l-btn-text {
  margin-right: 20px;
}

.l-btn:hover .s-btn-downarrow,
.s-btn-active .s-btn-downarrow,
.s-btn-plain-active .s-btn-downarrow {
  border-color: var(--ant-color-border);
}

.easyui-splitbutton {
  overflow: visible;
}

.easyui-splitbutton .l-btn-left {
  overflow: visible;
}

.easyui-splitbutton .m-btn-downarrow {
  right:-7px;
}

.easyui-splitbutton .m-btn-line {
  height: 21px !important;
  right: -2px !important;
  top: 1px;
}

/* ============================================
   [DONE] 18. Messager - 消息提示
   ============================================ */

/* Messager 弹框 - 移除分隔线 */
.messager-window .panel-header,
.window:has(.messager-body) .panel-header {
  border-bottom: none !important;
}

.messager-window .messager-button {
  border-top: none;
}

/* Messager 主体 - 提高优先级覆盖 window-body */
.window .window-body.messager-body {
  padding: var(--ant-padding-lg);
}

/* Messager 按钮区域 - 右对齐 */
.messager-button {
  padding: var(--ant-padding-sm) var(--ant-padding);
  text-align: right;
}

.messager-button .l-btn {
  width: auto;
}

/* Messager 第一个按钮 - primary 样式 */
.messager-button .l-btn:first-child {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.messager-button .l-btn:first-child:hover {
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
}

/* Messager 图标间距 */
.messager-icon {
  margin: 0 var(--ant-padding) var(--ant-padding) 0;
}

/* Messager SVG 矢量图标 - Dialog (32x32) */
.messager-info {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48 48 0 110-96 48 48 0 010 96z' fill='%231890ff'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-error {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z' fill='%23f5222d'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-warning {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48 48 0 110-96 48 48 0 010 96z' fill='%23faad14'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-question {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708a48 48 0 110-96 48 48 0 010 96zm80-217c-30.3 22-47.7 37.5-47.7 61.5v10c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-10c0-52.5 35.8-82 62.1-101.5 23.9-17.8 38.2-29.6 38.2-52 0-33.1-26.9-60-60-60-19.2 0-36.4 9.1-47.4 23.1-2.6 3.3-7.2 4.2-10.9 2l-26.8-16.3c-4-2.4-5.2-7.7-2.6-11.5C451.3 357 480.8 336 516.3 336c55.2 0 100 44.8 100 100 0 56.2-43.2 81.2-64.3 99z' fill='%23722ed1'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-success {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z' fill='%2352c41a'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

/* Messager SVG 矢量图标 - Tip (16x16) */
.messager-tip .messager-info {
  background-size: 100% 100% !important;
}

.messager-tip .messager-error {
  background-size: 100% 100% !important;
}

.messager-tip .messager-warning {
  background-size: 100% 100% !important;
}

.messager-tip .messager-question {
  background-size: 100% 100% !important;
}

.messager-tip .messager-success {
  background-size: 100% 100% !important;
}

/* Messager 进度条 */
.messager-progress {
  padding: var(--ant-padding);
}

/* Messager 进度消息 */
.messager-p-msg {
  margin-bottom: var(--ant-padding-xs);
}

/* Messager 输入框 */
.messager-body .messager-input {
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

/* Messager thinborder 按钮 */
.window-thinborder .messager-button {
  padding-bottom: var(--ant-padding-sm);
}

/* Messager Tip */
/* fixed 定位避免消失时触发 reflow 导致弹窗偏移 */
.messager-tip {
  position: fixed !important;
  top: 20px;
  box-shadow: var(--ant-box-shadow-tertiary);
  z-index: 11000 !important;
}

/* Messager Tip 主体 - 提高优先级覆盖通用样式 */
.messager-tip.window .messager-body {
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  height: auto !important;
  line-height: 1.5715 !important;
}

/* Messager Tip 图标间距 */
.messager-tip .messager-icon {
  margin: 0 var(--ant-padding-xs) 0 0;
  border-radius: 50%;
  padding: 2px;
}

/* Messager Tip 容器类型颜色 - 根据子元素类型设置背景色 */
.messager-tip:has(.messager-info) {
  background-color: var(--ant-blue-1);
}

.messager-tip:has(.messager-success) {
  background-color: var(--ant-green-1);
}

.messager-tip:has(.messager-error) {
  background-color: var(--ant-red-1);
}

.messager-tip:has(.messager-warning) {
  background-color: var(--ant-gold-1);
}

.messager-tip:has(.messager-question) {
  background-color: var(--ant-purple-1);
}

/* Messager Tip 类型背景 - body 透明化 */
.messager-tip:has(.messager-icon) .messager-body {
  background-color: transparent;
}

/* ============================================
   [DONE] 19. Tree - 树组件
   ============================================ */

/* --- 节点行（flex 垂直居中所有子元素） --- */
.tree-node {
  height: 32px;
  display: flex;
  align-items: center;
  border-radius: var(--ant-border-radius-sm);
  transition: background-color 0.2s;
  overflow: hidden;
  padding-left: 2px;
}

/* 缩进占位符 - 宽度与 tree-hit 一致确保对齐 */
.tree-indent {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  margin-right: 4px !important;  /* FIXED: 添加 margin-right 与 .tree-expanded/.tree-collapsed 一致 */
}

/* --- 展开/折叠箭头 --- */
/* 清除所有 PNG 图标（含 tree-lines 模式） */
.tree-expanded,
.tree-expanded-hover,
.tree-collapsed,
.tree-collapsed-hover {
  background-image: none !important;
  margin-right: var(--ant-margin-xxs);
}

/* 箭头容器 - 固定宽度确保对齐 */
.tree-hit {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* 旋转角标 - 基础样式 */
.tree-hit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ant-color-text-secondary);
  border-bottom: 1.5px solid var(--ant-color-text-secondary);
  transition: transform 0.3s, border-color 0.3s;
}

/* 折叠: 向右 > */
.tree-collapsed::after {
  transform: translate(-70%, -50%) rotate(-45deg);
}

/* 展开: 向下 v */
.tree-expanded::after {
  transform: translate(-50%, -70%) rotate(45deg);
}

/* 箭头 hover 变主题色 */
.tree-expanded-hover::after,
.tree-collapsed-hover::after {
  border-color: var(--ant-color-primary);
}

/* --- 连接线 CSS 替代 PNG --- */
.tree-line,
.tree-join,
.tree-joinbottom {
  background-image: none !important;
  position: relative;
}

/* 垂直贯穿线 */
.tree-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--ant-color-split);
}

/* 中间节点: 垂直线 + 水平分支 */
.tree-join::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  border-left: 1px dashed var(--ant-color-split);
}
.tree-join::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  border-top: 1px dashed var(--ant-color-split);
}

/* 末尾节点: 半垂直线 + 水平分支 */
.tree-joinbottom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 50%;
  border-left: 1px dashed var(--ant-color-split);
}
.tree-joinbottom::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  border-top: 1px dashed var(--ant-color-split);
}

/* tree-lines 模式下展开/折叠图标的连接线 */
.tree-lines .tree-hit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--ant-color-split);
}
.tree-lines .tree-node-last > .tree-hit::before,
.tree-lines .tree-root-one > .tree-hit::before {
  bottom: 50%;
}

/* --- 图标区域 - 默认隐藏，支持 iconCls 自定义 --- */
/* 默认无图标无间距（Ant Design 风格：纯箭头 + 文字） */
/* .tree-file 作为叶子节点占位符，宽度与 .tree-hit 一致确保对齐 */
.tree-folder,
.tree-folder-open {
  background-image: none;
  width: 0;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.tree-file {
  background-image: none;
  width: 0;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 当节点配置了 iconCls 时恢复图标显示（specificity 0,2,0 > 0,1,0） */
.tree-icon[class*="icon-"] {
  width: 16px;
  margin-right: var(--ant-margin-xxs);
  overflow: hidden;
}

/* === 预设图标主题（现代两色描边风格） ===
   用法: 在树容器上添加对应 class 即可启用图标
   例: <ul class="easyui-tree tree-icons-folder" ...>
   可选主题: folder | doc | video | org | device | tag | shield | cloud | setting | location
   节点单独配置 iconCls 时优先使用节点自定义图标
   ========================================== */

/* 图标主题基础 - 恢复被隐藏的图标尺寸 */
[class*="tree-icons-"] .tree-folder:not([class*="icon-"]),
[class*="tree-icons-"] .tree-file:not([class*="icon-"]) {
  width: 16px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center center;
}

/* 1. folder - 文件系统（金色 #faad14） */
.tree-icons-folder .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h3.5L7 5h7v7.5H2z' fill='%23fff7e6' stroke='%23faad14' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-folder .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h3.5L7 5h7v2H5L2 12.5z' fill='%23fff7e6' stroke='%23faad14' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M5 7h9.5L12 12.5H2z' fill='%23fff7e6' stroke='%23faad14' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-folder .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5h5L12.5 5V14H4z' fill='%23fff' stroke='%23d9d9d9' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M9 1.5V5h3.5' fill='none' stroke='%23d9d9d9' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2. doc - 文档管理（蓝色 #1890ff） */
.tree-icons-doc .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h3.5L7 5h7v7.5H2z' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-doc .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h3.5L7 5h7v2H5L2 12.5z' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M5 7h9.5L12 12.5H2z' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-doc .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5h5L12.5 5V14H4z' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M9 1.5V5h3.5' fill='none' stroke='%231890ff' stroke-width='1'/%3E%3Cline x1='6' y1='7.5' x2='10.5' y2='7.5' stroke='%2391d5ff' stroke-width='0.7'/%3E%3Cline x1='6' y1='10' x2='10.5' y2='10' stroke='%2391d5ff' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* 3. video - 视频监控（青色 #13c2c2） */
.tree-icons-video .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='4.5' width='9' height='7' rx='1' fill='%23e6fffb' stroke='%2313c2c2' stroke-width='1'/%3E%3Cpath d='M10.5 7l4-1.5v5L10.5 9z' fill='%23e6fffb' stroke='%2313c2c2' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-video .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='4.5' width='9' height='7' rx='1' fill='%23e6fffb' stroke='%2313c2c2' stroke-width='1'/%3E%3Cpath d='M10.5 7l4-1.5v5L10.5 9z' fill='%23e6fffb' stroke='%2313c2c2' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='8' r='1.2' fill='%23ff4d4f'/%3E%3C/svg%3E");
}

.tree-icons-video .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='2.5' width='11' height='7.5' rx='1' fill='%23e6fffb' stroke='%2313c2c2' stroke-width='1'/%3E%3Cline x1='8' y1='10' x2='8' y2='12.5' stroke='%2313c2c2' stroke-width='1'/%3E%3Cline x1='5' y1='12.5' x2='11' y2='12.5' stroke='%2313c2c2' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4. org - 组织架构（紫色 #722ed1） */
.tree-icons-org .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='4.5' r='2' fill='%23f9f0ff' stroke='%23722ed1' stroke-width='0.9'/%3E%3Ccircle cx='11' cy='4.5' r='2' fill='%23f9f0ff' stroke='%23722ed1' stroke-width='0.9'/%3E%3Cpath d='M1.5 13.5a3.5 3.5 0 017 0M7.5 13.5a3.5 3.5 0 017 0' fill='%23f9f0ff' stroke='%23722ed1' stroke-width='0.9'/%3E%3C/svg%3E");
}

.tree-icons-org .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='4.5' r='2' fill='%23efdbff' stroke='%239254de' stroke-width='0.9'/%3E%3Ccircle cx='11' cy='4.5' r='2' fill='%23efdbff' stroke='%239254de' stroke-width='0.9'/%3E%3Cpath d='M1.5 13.5a3.5 3.5 0 017 0M7.5 13.5a3.5 3.5 0 017 0' fill='%23efdbff' stroke='%239254de' stroke-width='0.9'/%3E%3C/svg%3E");
}

.tree-icons-org .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='2.5' fill='%23f9f0ff' stroke='%23b37feb' stroke-width='0.9'/%3E%3Cpath d='M3 14.5a5 5 0 0110 0' fill='%23f9f0ff' stroke='%23b37feb' stroke-width='0.9'/%3E%3C/svg%3E");
}

/* 5. device - 设备管理（灰色 #595959） */
.tree-icons-device .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='1.5' width='12' height='5' rx='1' fill='%23fafafa' stroke='%23595959' stroke-width='1'/%3E%3Crect x='2' y='8.5' width='12' height='5' rx='1' fill='%23fafafa' stroke='%23595959' stroke-width='1'/%3E%3Ccircle cx='12' cy='4' r='0.7' fill='%2352c41a'/%3E%3Ccircle cx='12' cy='11' r='0.7' fill='%2352c41a'/%3E%3Cline x1='4' y1='4' x2='9' y2='4' stroke='%23d9d9d9' stroke-width='0.6'/%3E%3Cline x1='4' y1='11' x2='9' y2='11' stroke='%23d9d9d9' stroke-width='0.6'/%3E%3C/svg%3E");
}

.tree-icons-device .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='1.5' width='12' height='5' rx='1' fill='%23fafafa' stroke='%23595959' stroke-width='1'/%3E%3Crect x='2' y='8.5' width='12' height='5' rx='1' fill='%23fafafa' stroke='%23595959' stroke-width='1'/%3E%3Ccircle cx='12' cy='4' r='0.7' fill='%231890ff'/%3E%3Ccircle cx='12' cy='11' r='0.7' fill='%231890ff'/%3E%3Cline x1='4' y1='4' x2='9' y2='4' stroke='%23d9d9d9' stroke-width='0.6'/%3E%3Cline x1='4' y1='11' x2='9' y2='11' stroke='%23d9d9d9' stroke-width='0.6'/%3E%3C/svg%3E");
}

.tree-icons-device .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='3' width='11' height='10' rx='1.5' fill='%23fafafa' stroke='%238c8c8c' stroke-width='1'/%3E%3Cline x1='2.5' y1='10' x2='13.5' y2='10' stroke='%238c8c8c' stroke-width='0.8'/%3E%3Ccircle cx='12' cy='12' r='0.6' fill='%238c8c8c'/%3E%3C/svg%3E");
}

/* 6. tag - 标签分类（橙色 #fa8c16） */
.tree-icons-tag .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5h4.5l7 7-4 4-7-7z' fill='%23fff7e6' stroke='%23fa8c16' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='5.2' cy='5.2' r='1' fill='%23fa8c16'/%3E%3C/svg%3E");
}

.tree-icons-tag .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5h4.5l7 7-4 4-7-7z' fill='%23fff2e8' stroke='%23ffa940' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='5.2' cy='5.2' r='1' fill='%23ffa940'/%3E%3C/svg%3E");
}

.tree-icons-tag .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23fff7e6' stroke='%23ffc069' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='0.8' fill='%23ffc069'/%3E%3C/svg%3E");
}

/* 7. shield - 安全管理（绿色 #52c41a） */
.tree-icons-shield .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5L2.5 4v3.5c0 3.2 2.5 5.5 5.5 6.5 3-1 5.5-3.3 5.5-6.5V4z' fill='%23f6ffed' stroke='%2352c41a' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-shield .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5L2.5 4v3.5c0 3.2 2.5 5.5 5.5 6.5 3-1 5.5-3.3 5.5-6.5V4z' fill='%23f6ffed' stroke='%2352c41a' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M5.5 8l1.5 2 3.5-3.5' fill='none' stroke='%2352c41a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-shield .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4.5' y='5' width='7' height='8' rx='1' fill='%23f6ffed' stroke='%2395de64' stroke-width='1'/%3E%3Cpath d='M6.5 5V3.5a1.5 1.5 0 013 0V5' fill='none' stroke='%2395de64' stroke-width='1'/%3E%3Ccircle cx='8' cy='9.5' r='1' fill='%2395de64'/%3E%3C/svg%3E");
}

/* 8. cloud - 云服务（极客蓝 #2f54eb） */
.tree-icons-cloud .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 12A3 3 0 014 6a4 4 0 017.8-1A2.8 2.8 0 0112 11.8H4.5z' fill='%23f0f5ff' stroke='%232f54eb' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-cloud .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 12A3 3 0 014 6a4 4 0 017.8-1A2.8 2.8 0 0112 11.8H4.5z' fill='%23f0f5ff' stroke='%232f54eb' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M8 6.5v3M6.5 8l1.5-1.5L9.5 8' fill='none' stroke='%232f54eb' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tree-icons-cloud .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 13a2.5 2.5 0 01-.3-5 3.2 3.2 0 016.3-.8 2.3 2.3 0 01.5 4.5H5z' fill='%23f0f5ff' stroke='%23adc6ff' stroke-width='0.9'/%3E%3C/svg%3E");
}

/* 9. setting - 系统配置（灰色 #8c8c8c） */
.tree-icons-setting .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2' y1='4' x2='14' y2='4' stroke='%238c8c8c' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='4' r='1.5' fill='%23fafafa' stroke='%238c8c8c' stroke-width='1'/%3E%3Cline x1='2' y1='8' x2='14' y2='8' stroke='%238c8c8c' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='10.5' cy='8' r='1.5' fill='%23fafafa' stroke='%238c8c8c' stroke-width='1'/%3E%3Cline x1='2' y1='12' x2='14' y2='12' stroke='%238c8c8c' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='12' r='1.5' fill='%23fafafa' stroke='%238c8c8c' stroke-width='1'/%3E%3C/svg%3E");
}

.tree-icons-setting .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2' y1='4' x2='14' y2='4' stroke='%231890ff' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='4' r='1.5' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1'/%3E%3Cline x1='2' y1='8' x2='14' y2='8' stroke='%231890ff' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='10.5' cy='8' r='1.5' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1'/%3E%3Cline x1='2' y1='12' x2='14' y2='12' stroke='%231890ff' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='12' r='1.5' fill='%23e6f7ff' stroke='%231890ff' stroke-width='1'/%3E%3C/svg%3E");
}

.tree-icons-setting .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2' y1='8' x2='14' y2='8' stroke='%23bfbfbf' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23fafafa' stroke='%23bfbfbf' stroke-width='1'/%3E%3C/svg%3E");
}

/* 10. location - 地理位置（红色 #f5222d） */
.tree-icons-location .tree-folder:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a4.5 4.5 0 00-4.5 4.5c0 3.5 4.5 8.5 4.5 8.5s4.5-5 4.5-8.5A4.5 4.5 0 008 1.5z' fill='%23fff1f0' stroke='%23f5222d' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='1.8' fill='%23fff1f0' stroke='%23f5222d' stroke-width='1'/%3E%3C/svg%3E");
}

.tree-icons-location .tree-folder-open:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a4.5 4.5 0 00-4.5 4.5c0 3.5 4.5 8.5 4.5 8.5s4.5-5 4.5-8.5A4.5 4.5 0 008 1.5z' fill='%23ffccc7' stroke='%23ff4d4f' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='1.8' fill='%23ffccc7' stroke='%23ff4d4f' stroke-width='1'/%3E%3C/svg%3E");
}

.tree-icons-location .tree-file:not([class*="icon-"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23fff1f0' stroke='%23ff7875' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='0.8' fill='%23ff7875'/%3E%3C/svg%3E");
}

/* --- 复选框 Ant Design 样式 --- */
.tree-checkbox0,
.tree-checkbox1,
.tree-checkbox2 {
  width: 16px;
  height: 16px;
  margin-right: var(--ant-margin-xxs);
  background-image: none !important;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}

/* 复选框外框（transform 精准居中） */
.tree-checkbox0::before,
.tree-checkbox1::before,
.tree-checkbox2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-xs);
  background: var(--ant-color-bg-container);
  transition: all 0.2s;
}

/* 已选中: 主题色背景 */
.tree-checkbox1::before {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

/* 已选中: 白色对勾 ✓（transform 精准居中） */
.tree-checkbox1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--ant-color-text-light-solid);
  border-bottom: 2px solid var(--ant-color-text-light-solid);
  transform: translate(-50%, -60%) rotate(45deg);
}

/* 半选中: 主题色背景 + 横线 + 白色内框区分全选 */
.tree-checkbox2::before {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  box-shadow: inset 0 0 0 2px var(--ant-color-bg-container);
}

.tree-checkbox2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--ant-color-text-light-solid);
}

/* --- 节点标题 --- */
.tree-title {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  padding: 0 var(--ant-padding-xs) 0 0;
  height: 20px;
  line-height: 20px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 节点状态 --- */
.tree-node-hover {
  background: var(--ant-color-bg-layout);
  color: var(--ant-color-text);
}
.tree-node-selected {
  background: var(--ant-blue-1);
  color: var(--ant-color-primary);
}
.tree-node-selected .tree-title {
  color: var(--ant-color-primary);
}
.tree-node-disabled {
  opacity: 1;
  color: var(--ant-color-text-disabled);
}
.tree-node-disabled .tree-title {
  color: var(--ant-color-text-disabled);
}

/* --- 编辑器 --- */
.tree-editor {
  border-color: var(--ant-color-primary);
  border-radius: var(--ant-border-radius-sm);
  font-size: var(--ant-font-size);
  box-shadow: 0 0 0 2px var(--ant-color-primary-outline);
}

/* --- 拖拽代理 --- */
.tree-node-proxy {
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  border-color: var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  box-shadow: var(--ant-box-shadow-tertiary);
}

/* 拖拽指示图标 - CSS 替代 PNG */
.tree-dnd-yes,
.tree-dnd-no {
  background-image: none !important;
  position: relative;
}
.tree-dnd-yes::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ant-color-success);
  font-size: var(--ant-icon-font-size-sm);
  line-height: 1;
}
.tree-dnd-no::after {
  content: '✗';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ant-color-error);
  font-size: var(--ant-icon-font-size-sm);
  line-height: 1;
}

/* --- 拖拽位置指示线 --- */
.tree-node-top {
  border-top-color: var(--ant-color-primary);
  border-top-style: solid;
}
.tree-node-bottom {
  border-bottom-color: var(--ant-color-primary);
  border-bottom-style: solid;
}
.tree-node-append .tree-title {
  border: 1px dashed var(--ant-color-primary);
  border-radius: var(--ant-border-radius-sm);
}

/* ============================================
   [DONE] 20. ValidateBox - 验证框错误状态
   ============================================ */

/* ValidateBox 输入框基础样式（原生 input） */
input.validatebox-text {
  height: var(--ant-control-height);
  padding: 4px 11px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

/* ValidateBox 聚焦状态 */
input.validatebox-text:focus {
  border-color: var(--ant-color-primary);
  box-shadow: 0 0 0 2px var(--ant-color-primary-outline);
}

/* ValidateBox 校验错误 */
.validatebox-invalid {
  border-color: var(--ant-color-error) !important;
  background-color: var(--ant-color-bg-container);
  color: var(--ant-color-text);
}
.validatebox-invalid:focus {
  border-color: var(--ant-color-error-hover) !important;
  box-shadow: 0 0 0 2px var(--ant-color-error-outline) !important;
}

/* ValidateBox 校验错误 tooltip */
.validatebox-tip .tooltip-content {
  color: #fff;
  font-size: var(--ant-font-size-sm);
}

/* ============================================
   [DONE] 21. Rate - 评分组件
   ============================================ */

/* 星星间距 + 指针 */
.rate-item {
  cursor: pointer;
  margin-right: 8px;
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.rate-item:last-of-type {
  margin-right: 0;
}

/* Hover 放大效果（Ant Design 交互） */
.rate-item:hover {
  transform: scale(1.1);
}

/* SVG 颜色过渡 */
.rate-item svg {
  transition: color 0.3s;
  vertical-align: top;
}

/* Disabled 状态 - Ant Design 风格 */
.rate-disabled {
  cursor: not-allowed;
}
.rate-disabled .rate-item {
  cursor: not-allowed;
}
.rate-disabled .rate-item:hover {
  transform: none;
}

/* Readonly 状态 */
.rate-readonly .rate-item {
  cursor: default;
}
.rate-readonly .rate-item:hover {
  transform: none;
}

/* ============================================
   [DONE] 22. Tooltip - 提示框
   ============================================ */

/* Ant Design 暗色提示框 */
.tooltip {
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  border: none !important;
  border-radius: var(--ant-border-radius);
  background-color: var(--ant-color-bg-spotlight);
  color: var(--ant-color-text-light-solid);
  box-shadow: var(--ant-box-shadow-tertiary);
}

/* 内容字体 - Ant Design 排版 */
.tooltip-content {
  font-size: var(--ant-font-size);
  font-family: var(--ant-font-family);
  line-height: var(--ant-line-height);
  word-wrap: break-word;
}

/* 箭头外层 - 隐藏边框 */
.tooltip .tooltip-arrow-outer {
  display: none;
}

/* 箭头内层 - 与背景同色 */
.tooltip-right .tooltip-arrow {
  border-right-color: var(--ant-color-bg-spotlight);
}

.tooltip-left .tooltip-arrow {
  border-left-color: var(--ant-color-bg-spotlight);
}

.tooltip-top .tooltip-arrow {
  border-top-color: var(--ant-color-bg-spotlight);
}

.tooltip-bottom .tooltip-arrow {
  border-bottom-color: var(--ant-color-bg-spotlight);
}

/* 方向感知的缩放原点（从目标方向缩放出） */
.tooltip-top {
  transform-origin: 50% calc(100% + 6px);
}

.tooltip-bottom {
  transform-origin: 50% -6px;
}

.tooltip-left {
  transform-origin: calc(100% + 6px) 50%;
}

.tooltip-right {
  transform-origin: -6px 50%;
}

/* 入场缩放动画关键帧 */
@keyframes antTooltipZoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tooltip-animate-in {
  animation: antTooltipZoomIn 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Tooltip 预设颜色 - Ant Design Presets */

/* 背景色定义 */
.tooltip-pink { background-color: #eb2f96; color: #fff; }
.tooltip-magenta { background-color: #eb2f96; color: #fff; }
.tooltip-red { background-color: #f5222d; color: #fff; }
.tooltip-volcano { background-color: #fa541c; color: #fff; }
.tooltip-orange { background-color: #fa8c16; color: #fff; }
.tooltip-gold { background-color: #faad14; color: rgba(0,0,0,0.88); }
.tooltip-yellow { background-color: #fadb14; color: rgba(0,0,0,0.88); }
.tooltip-lime { background-color: #a0d911; color: rgba(0,0,0,0.88); }
.tooltip-green { background-color: #52c41a; color: #fff; }
.tooltip-cyan { background-color: #13c2c2; color: #fff; }
.tooltip-blue { background-color: #1677ff; color: #fff; }
.tooltip-geekblue { background-color: #2f54eb; color: #fff; }
.tooltip-purple { background-color: #722ed1; color: #fff; }

/* 箭头边框重置 */
.tooltip.tooltip-pink .tooltip-arrow-outer,
.tooltip.tooltip-pink .tooltip-arrow,
.tooltip.tooltip-magenta .tooltip-arrow-outer,
.tooltip.tooltip-magenta .tooltip-arrow,
.tooltip.tooltip-red .tooltip-arrow-outer,
.tooltip.tooltip-red .tooltip-arrow,
.tooltip.tooltip-volcano .tooltip-arrow-outer,
.tooltip.tooltip-volcano .tooltip-arrow,
.tooltip.tooltip-orange .tooltip-arrow-outer,
.tooltip.tooltip-orange .tooltip-arrow,
.tooltip.tooltip-gold .tooltip-arrow-outer,
.tooltip.tooltip-gold .tooltip-arrow,
.tooltip.tooltip-yellow .tooltip-arrow-outer,
.tooltip.tooltip-yellow .tooltip-arrow,
.tooltip.tooltip-lime .tooltip-arrow-outer,
.tooltip.tooltip-lime .tooltip-arrow,
.tooltip.tooltip-green .tooltip-arrow-outer,
.tooltip.tooltip-green .tooltip-arrow,
.tooltip.tooltip-cyan .tooltip-arrow-outer,
.tooltip.tooltip-cyan .tooltip-arrow,
.tooltip.tooltip-blue .tooltip-arrow-outer,
.tooltip.tooltip-blue .tooltip-arrow,
.tooltip.tooltip-geekblue .tooltip-arrow-outer,
.tooltip.tooltip-geekblue .tooltip-arrow,
.tooltip.tooltip-purple .tooltip-arrow-outer,
.tooltip.tooltip-purple .tooltip-arrow {
  border-color: transparent;
}

/* 箭头颜色 - Pink/Magenta #eb2f96 */
.tooltip-pink.tooltip-top .tooltip-arrow,
.tooltip-magenta.tooltip-top .tooltip-arrow { border-top-color: #eb2f96; }
.tooltip-pink.tooltip-bottom .tooltip-arrow,
.tooltip-magenta.tooltip-bottom .tooltip-arrow { border-bottom-color: #eb2f96; }
.tooltip-pink.tooltip-left .tooltip-arrow,
.tooltip-magenta.tooltip-left .tooltip-arrow { border-left-color: #eb2f96; }
.tooltip-pink.tooltip-right .tooltip-arrow,
.tooltip-magenta.tooltip-right .tooltip-arrow { border-right-color: #eb2f96; }

/* 箭头颜色 - Red #f5222d */
.tooltip-red.tooltip-top .tooltip-arrow { border-top-color: #f5222d; }
.tooltip-red.tooltip-bottom .tooltip-arrow { border-bottom-color: #f5222d; }
.tooltip-red.tooltip-left .tooltip-arrow { border-left-color: #f5222d; }
.tooltip-red.tooltip-right .tooltip-arrow { border-right-color: #f5222d; }

/* 箭头颜色 - Volcano #fa541c */
.tooltip-volcano.tooltip-top .tooltip-arrow { border-top-color: #fa541c; }
.tooltip-volcano.tooltip-bottom .tooltip-arrow { border-bottom-color: #fa541c; }
.tooltip-volcano.tooltip-left .tooltip-arrow { border-left-color: #fa541c; }
.tooltip-volcano.tooltip-right .tooltip-arrow { border-right-color: #fa541c; }

/* 箭头颜色 - Orange #fa8c16 */
.tooltip-orange.tooltip-top .tooltip-arrow { border-top-color: #fa8c16; }
.tooltip-orange.tooltip-bottom .tooltip-arrow { border-bottom-color: #fa8c16; }
.tooltip-orange.tooltip-left .tooltip-arrow { border-left-color: #fa8c16; }
.tooltip-orange.tooltip-right .tooltip-arrow { border-right-color: #fa8c16; }

/* 箭头颜色 - Gold #faad14 */
.tooltip-gold.tooltip-top .tooltip-arrow { border-top-color: #faad14; }
.tooltip-gold.tooltip-bottom .tooltip-arrow { border-bottom-color: #faad14; }
.tooltip-gold.tooltip-left .tooltip-arrow { border-left-color: #faad14; }
.tooltip-gold.tooltip-right .tooltip-arrow { border-right-color: #faad14; }

/* 箭头颜色 - Yellow #fadb14 */
.tooltip-yellow.tooltip-top .tooltip-arrow { border-top-color: #fadb14; }
.tooltip-yellow.tooltip-bottom .tooltip-arrow { border-bottom-color: #fadb14; }
.tooltip-yellow.tooltip-left .tooltip-arrow { border-left-color: #fadb14; }
.tooltip-yellow.tooltip-right .tooltip-arrow { border-right-color: #fadb14; }

/* 箭头颜色 - Lime #a0d911 */
.tooltip-lime.tooltip-top .tooltip-arrow { border-top-color: #a0d911; }
.tooltip-lime.tooltip-bottom .tooltip-arrow { border-bottom-color: #a0d911; }
.tooltip-lime.tooltip-left .tooltip-arrow { border-left-color: #a0d911; }
.tooltip-lime.tooltip-right .tooltip-arrow { border-right-color: #a0d911; }

/* 箭头颜色 - Green #52c41a */
.tooltip-green.tooltip-top .tooltip-arrow { border-top-color: #52c41a; }
.tooltip-green.tooltip-bottom .tooltip-arrow { border-bottom-color: #52c41a; }
.tooltip-green.tooltip-left .tooltip-arrow { border-left-color: #52c41a; }
.tooltip-green.tooltip-right .tooltip-arrow { border-right-color: #52c41a; }

/* 箭头颜色 - Cyan #13c2c2 */
.tooltip-cyan.tooltip-top .tooltip-arrow { border-top-color: #13c2c2; }
.tooltip-cyan.tooltip-bottom .tooltip-arrow { border-bottom-color: #13c2c2; }
.tooltip-cyan.tooltip-left .tooltip-arrow { border-left-color: #13c2c2; }
.tooltip-cyan.tooltip-right .tooltip-arrow { border-right-color: #13c2c2; }

/* 箭头颜色 - Blue #1677ff */
.tooltip-blue.tooltip-top .tooltip-arrow { border-top-color: #1677ff; }
.tooltip-blue.tooltip-bottom .tooltip-arrow { border-bottom-color: #1677ff; }
.tooltip-blue.tooltip-left .tooltip-arrow { border-left-color: #1677ff; }
.tooltip-blue.tooltip-right .tooltip-arrow { border-right-color: #1677ff; }

/* 箭头颜色 - GeekBlue #2f54eb */
.tooltip-geekblue.tooltip-top .tooltip-arrow { border-top-color: #2f54eb; }
.tooltip-geekblue.tooltip-bottom .tooltip-arrow { border-bottom-color: #2f54eb; }
.tooltip-geekblue.tooltip-left .tooltip-arrow { border-left-color: #2f54eb; }
.tooltip-geekblue.tooltip-right .tooltip-arrow { border-right-color: #2f54eb; }

/* 箭头颜色 - Purple #722ed1 */
.tooltip-purple.tooltip-top .tooltip-arrow { border-top-color: #722ed1; }
.tooltip-purple.tooltip-bottom .tooltip-arrow { border-bottom-color: #722ed1; }
.tooltip-purple.tooltip-left .tooltip-arrow { border-left-color: #722ed1; }
.tooltip-purple.tooltip-right .tooltip-arrow { border-right-color: #722ed1; }
/* ============================================
  结束
   ============================================ */

/* ============================================
   [DONE] 23. SwitchButton - 开关按钮
   ============================================ */

/* Ant Design 胶囊形开关轨道 */
.switchbutton {
  background: var(--ant-color-text-quaternary);
  border-color: transparent;
  border-radius: 100px;
  transition: background-color 0.2s, box-shadow 0.2s;
}

/* Hover — 轨道色加深 */
.switchbutton:not(.switchbutton-disabled):hover {
  background: var(--ant-color-text-secondary);
}

/* Hover — ON 区域变亮 */
.switchbutton:not(.switchbutton-disabled):hover .switchbutton-on {
  background: var(--ant-color-primary-hover);
}

/* ON/OFF/手柄 — Ant Design 字体 */
.switchbutton-on,
.switchbutton-off,
.switchbutton-handle {
  font-size: var(--ant-font-size-sm);
}

/* ON 区域 — 主题色 + 白色文字 */
.switchbutton-on {
  background: var(--ant-color-primary);
  color: var(--ant-color-text-light-solid);
  transition: background-color 0.2s;
}

/* OFF 区域 — 透明背景（露出轨道灰色）+ 半透明白字 */
.switchbutton-off {
  background-color: transparent;
  color: var(--ant-color-text-light-solid);
}

/* 方向圆角 — 左侧 ON */
.switchbutton-on,
.switchbutton-reversed .switchbutton-off {
  border-radius: 100px 0 0 100px;
}

/* 方向圆角 — 右侧 OFF */
.switchbutton-off,
.switchbutton-reversed .switchbutton-on {
  border-radius: 0 100px 100px 0;
}

/* 手柄 — 白色圆形 + Ant Design 阴影 */
.switchbutton-handle {
  background-color: var(--ant-color-text-light-solid);
  border: none;
  border-radius: 50%;
  box-shadow: var(--ant-box-shadow-switch-handle);
}

/* 禁用状态 — Ant Design 标准 */
.switchbutton-disabled {
  opacity: 0.4;
}

/* Focus — 主题色光晕 */
.switchbutton:focus {
  box-shadow: 0 0 0 2px var(--ant-color-primary-outline);
  outline: none;
}

/* ============================================
   [DONE] 24. RadioButton - 单选按钮
   ============================================ */

/* Ant Design 单选圆形按钮 */
.radiobutton {
  border: 1px solid var(--ant-color-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* 选中 — 主题色边框 */
.radiobutton-checked {
  border-color: var(--ant-color-primary);
}

/* 内圆点 — 仅选中时显示主题色 */
.radiobutton-checked .radiobutton-inner {
  background: var(--ant-color-primary);
}

/* Hover — 主题色边框 */
.radiobutton:hover:not(.radiobutton-disabled) {
  border-color: var(--ant-color-primary);
}

/* 禁用选择状态和文字灰色 */
.radiobutton-disabled, .radiobutton-disabled + .textbox-label-disabled {
  color: var(--ant-color-text-disabled);
  background: none;
  cursor: not-allowed;
}

/* ============================================
   [DONE] 25. Checkbox - 复选框
   ============================================ */

/* Ant Design 复选框 — 圆角方形 */
.checkbox {
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

/* 选中 — 主题色背景 */
.checkbox-checked {
  border: 0;
  background: var(--ant-color-primary);
}

/* Hover — 主题色边框 */
.checkbox:hover:not(.checkbox-disabled) {
  border-color: var(--ant-color-primary);
}

/* 禁用选择状态和文字灰色 */
.checkbox-disabled, .checkbox-disabled + .textbox-label-disabled {
  color: var(--ant-color-text-disabled);
  background: none;
  cursor: not-allowed;
}

/* ============================================
   [DONE] 26. Sidebar - 侧边栏
   ============================================ */

/* --- Accordion 在 SideMenu 中的样式覆盖 --- */
/* 覆盖通用 accordion 背景，使其作为透明导航容器 */
.sidemenu .accordion .accordion-header,
.sidemenu .accordion .accordion-body {
  border-bottom-color: transparent;
  background: transparent;
}

/* 分组标题 — Ant Design 正文色 */
.sidemenu .accordion .accordion-header {
  color: var(--ant-color-text);
}

/* 覆盖通用 accordion 选中高亮 — 导航菜单展开不加背景 */
.sidemenu .accordion .accordion-header-selected {
  background: transparent;
}

/* 分组标题文字 — 40px 行高 + 中等字重 */
.sidemenu .accordion-header .panel-title {
  height: 40px;
  line-height: 40px;
  color: inherit;
  font-weight: var(--ant-font-weight-medium);
}

/* 隐藏默认 accordion 折叠工具按钮（用 CSS 箭头替代）
   需要 !important 覆盖 sidemenu JS 的 .show() inline 样式 */
.sidemenu .accordion-header .panel-tool {
  display: none !important;
}

/* 分组标题 Hover */
.sidemenu .accordion-header:hover {
  background: var(--ant-color-bg-layout);
}

/* Accordion body 在 SideMenu 中不需要内边距 */
.sidemenu .accordion .panel-body {
  padding: 0;
}

/* --- CSS 箭头 — 替代 accordion_arrows.png 图片 --- */

/* Accordion 分组箭头 — 展开时朝上 */
.sidemenu .accordion-header::after {
  display: inline-block;
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  border-color: currentColor;
  opacity: 0.45;
  transform: translateY(-50%) rotate(-135deg);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
              border-color 0.3s, opacity 0.3s;
}

.sidemenu .accordion-header-selected::after {
  border-color: var(--ant-color-text);
  opacity: 1;
}

/* 未展开 — 箭头朝下 */
.sidemenu .accordion-header:not(.accordion-header-selected)::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Collapsed 模式隐藏箭头 */
.sidemenu-collapsed .accordion-header::after {
  display: none;
}

/* --- Tree 菜单项 --- */

/* 隐藏通用 Tree 组件的 CSS 箭头（sidemenu 用自己的右侧箭头） */
.sidemenu .tree-hit::after {
  display: none;
}

/* 树标题 — 继承父级颜色（兼容深色主题） */
.sidemenu .tree-title {
  color: inherit;
}

/* Hover — 浅灰背景 */
.sidemenu .tree-node-hover {
  background: var(--ant-color-bg-layout);
}

/* 选中 — Ant Design 主题色高亮 + 右侧指示条 */
.sidemenu .tree-node-selected {
  background: var(--ant-blue-1);
  color: var(--ant-color-primary);
  border-right: 3px solid var(--ant-color-primary);
}

/* 子菜单非叶节点箭头 — CSS 替代图片（展开时朝上） */
.sidemenu .tree-node-nonleaf::after {
  width: 6px;
  height: 6px;
  margin-top: 0;
  background: none;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  border-color: currentColor;
  opacity: 0.45;
  right: 16px;
  transform: translateY(-50%) rotate(-135deg);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 子菜单折叠 — 箭头朝下 */
.sidemenu .tree-node-nonleaf-collapsed::after {
  background: none;
  transform: translateY(-50%) rotate(45deg);
}

/* ============================================
   [DONE] 27. Timepicker - 时间选择器
   ============================================ */

/* 时钟背景和文字颜色 */
.timepicker-panel .clock {
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text-secondary);
}

/* 时钟项 hover 和过渡效果 */
.timepicker-panel .clock .item {
  transition: background-color 0.2s, color 0.2s;
}

.timepicker-panel .clock .item:hover {
  background: var(--ant-color-fill-tertiary);
}

/* 选中项 - 主题色 */
.timepicker-panel .clock .item-selected {
  background: var(--ant-color-primary);
  color: var(--ant-color-text-light-solid);
}

/* 指针 - 主题色 */
.timepicker-panel .clock .hand {
  background-color: var(--ant-color-primary);
}

/* 拖拽点 - 主题色 */
.timepicker-panel .clock .hand .drag {
  border-color: var(--ant-color-primary);
  background-color: var(--ant-color-primary);
}

/* 中心点 - 主题色 */
.timepicker-panel .clock .center {
  background-color: var(--ant-color-primary);
}

/* AM/PM 间距变量化 */
.timepicker-panel .panel-header .ampm {
  font-size: var(--ant-font-size);
  padding-left: var(--ant-padding-sm);
  right: var(--ant-padding-lg);
}

/* 标题过渡效果 */
.timepicker-panel .panel-header .title {
  transition: opacity 0.2s;
}

/* ============================================
   [DONE] 28. Swiper - 走马灯
   ============================================ */

/* 指示点 - 默认灰色 */
.swiper-dot {
  background-color: var(--ant-color-text-quaternary);
  transition: background-color 0.3s;
}

/* 指示点 - 激活态主题色 */
.swiper-dot-active {
  background-color: var(--ant-color-primary);
}

/* ============================================
   [DONE] 29. Timeline - 时间线
   ============================================ */

/* 节点圆点 - Ant Design 边框和背景 */
.timeline-item-dot {
  border-color: var(--ant-color-primary);
  background-color: var(--ant-color-bg-container);
  transition: opacity 0.2s, background-color 0.2s;
}

/* 连接线 - Ant Design 分割线颜色 */
.timeline-item-line {
  border-left-color: var(--ant-color-split);
}

/* 内容字体 */
.timeline-item-content {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  transition: color 0.2s;
}

/* 标签字体 */
.timeline-item-label {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text-secondary);
  transition: color 0.2s;
}

/* Hover 效果 - 圆点高亮 + 文字加深 */
.timeline-item:hover .timeline-item-dot {
  background-color: var(--ant-color-primary);
}

.timeline-item:hover .timeline-item-content {
  color: var(--ant-color-primary);
}

.timeline-item:hover .timeline-item-label {
  color: var(--ant-color-primary);
}

/* ============================================
   图标样式汇总 (从 easyui.css 抽取，转换为 SVG 矢量图标)
   ============================================ */

/* Panel 工具图标 - SVG 矢量图标 */
.panel-title {
  background: url('images/blank.gif') no-repeat;
}

@keyframes panel-loading-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.panel-loading {
  position: relative;
  background: none;
  display: inline-flex;
  align-items: center;
  padding-left: 32px;
}

.panel-loading::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23595959'%3E%3Cpath d='M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 16px 16px;
  animation: panel-loading-spin 1s linear infinite;
}

.panel-tool-close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.panel-tool-min {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.panel-tool-max {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='3' width='10' height='10' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.panel-tool-restore {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='5' width='9' height='9' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Cpath d='M5 5V2h9v9h-3' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.panel-tool-collapse {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.panel-tool-expand {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Accordion 箭头图标 - SVG 矢量图标 */
.accordion-collapse {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.accordion-expand {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Layout 箭头图标 - SVG 矢量图标 */
.layout-button-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.layout-button-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.layout-button-left {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4l-4 4 4 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.layout-button-right {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Combo 下拉箭头图标 - SVG 矢量图标 */
.combo-arrow {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Datebox 日期图标 - SVG 矢量图标 */
.datebox .combo-arrow {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='12' height='11' rx='1' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Cpath d='M2 6h12M5 1v4M11 1v4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* PasswordBox 图标 - SVG 矢量图标 */
.passwordbox-open {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.passwordbox-close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Cpath d='M3 13L13 3' stroke='%23595959' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* FileBox 空白图标 - 保留 blank.gif */
.filebox-label {
  background: url('images/blank.gif') no-repeat;
}

/* TagBox 删除图标 - SVG 矢量图标 */
.tagbox-remove {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8m0-8l-8 8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 12px 12px !important;
}

/* Tabs 图标 - SVG 矢量图标 */
.tabs-scroller-left {
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3l-5 5 5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.tabs-scroller-right {
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.tabs li .tabs-close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8m0-8l-8 8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 12px 12px !important;
}

/* DataGrid 图标 - SVG 矢量图标 */
.datagrid-sort .datagrid-sort-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l3 4H5zM8 13l3-4H5z' fill='%23bfbfbf'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.datagrid-sort-desc .datagrid-sort-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13l4-5H4z' fill='%23595959'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.datagrid-sort-asc .datagrid-sort-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l4 5H4z' fill='%23595959'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.datagrid-row-collapse {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.datagrid-row-expand {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.datagrid-mask-msg {
  position: relative;
  background: #fff;
  padding-left: 28px;
}

.datagrid-mask-msg::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23595959'%3E%3Cpath d='M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 16px 16px;
  animation: panel-loading-spin 1s linear infinite;
}

/* Pagination 图标 - SVG 矢量图标 */
.pagination-first {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4v8M6 8l5-4v8z' fill='%23595959'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.pagination-prev {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4l-5 4 5 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.pagination-next {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l5 4-5 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.pagination-last {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 4v8M10 8l-5-4v8z' fill='%23595959'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.pagination-load {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23595959'%3E%3Cpath d='M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 14px 14px !important;
}

.pagination-loading {
  position: relative;
}

.pagination-loading::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23595959'%3E%3Cpath d='M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 16px 16px;
  animation: panel-loading-spin 1s linear infinite;
}

/* Calendar 箭头图标 - SVG 矢量图标 */
.calendar-prevmonth {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3l-5 5 5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.calendar-nextmonth {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.calendar-prevyear {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3l-4 5 4 5M11 3l-4 5 4 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.calendar-nextyear {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l4 5-4 5M9 3l4 5-4 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.calendar-menu-prev {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3l-5 5 5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.calendar-menu-next {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Spinner 箭头图标 - SVG 矢量图标 */
.spinner-arrow-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.spinner-arrow-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.spinner-button-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8 4v8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.spinner-button-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* SearchBox 按钮图标 - SVG 矢量图标 */
.searchbox-button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 10l3.5 3.5' stroke='%23595959' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

/* Slider 滑块图标 - SVG 矢量图标 */
.slider-handle {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23fff' stroke='%231890ff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: contain !important;
}

/* Menu 箭头图标 - SVG 矢量图标 */
.menu-rightarrow {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
}

.m-btn-downarrow,
.s-btn-downarrow {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 16px 16px !important;
  /* 保持原有定位，仅允许溢出可见 */
  overflow: visible !important;
}

/* Messager 图标 - SVG 矢量图标 */
.messager-info {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48 48 0 110-96 48 48 0 010 96z' fill='%231890ff'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-error {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z' fill='%23f5222d'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-warning {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48 48 0 110-96 48 48 0 010 96z' fill='%23faad14'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-question {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708a48 48 0 110-96 48 48 0 010 96zm80-217c-30.3 22-47.7 37.5-47.7 61.5v10c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-10c0-52.5 35.8-82 62.1-101.5 23.9-17.8 38.2-29.6 38.2-52 0-33.1-26.9-60-60-60-19.2 0-36.4 9.1-47.4 23.1-2.6 3.3-7.2 4.2-10.9 2l-26.8-16.3c-4-2.4-5.2-7.7-2.6-11.5C451.3 357 480.8 336 516.3 336c55.2 0 100 44.8 100 100 0 56.2-43.2 81.2-64.3 99z' fill='%23722ed1'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.messager-success {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z' fill='%2352c41a'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 100% 100% !important;
}



/* ============================================
   以下是基于easyui框架，结合ant-design样式扩展的自定义组件样式
   ============================================ */

/* ============================================
   Cascader - 级联选择器
   ============================================ */

/* Cascader 多列容器 */
.eu-cascader-columns {
  display: flex;
}

/* Cascader 单列 */
.eu-cascader-column {
  min-width: 0;
  flex: 1;
  max-height: 256px;
  overflow-y: auto;
  border-right: 1px solid var(--ant-color-split);
  padding: 4px 0;
}

.eu-cascader-column:last-child {
  border-right: none;
}

/* Cascader 选项 */
.eu-cascader-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ant-dropdown-padding-block) var(--ant-control-padding-horizontal);
  cursor: pointer;
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  border-radius: var(--ant-border-radius-sm);
  margin: 0 4px;
}

/* Cascader 选项悬停 */
.eu-cascader-item:hover {
  background: var(--ant-control-item-bg-hover);
}

/* Cascader 选项激活 */
.eu-cascader-item-active {
  background: var(--ant-color-primary-bg);
  font-weight: 600;
}

/* Cascader 展开箭头 - SVG */
.eu-cascader-item-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: var(--ant-margin-xs);
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23bfbfbf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 12px 12px;
}

/* Cascader 空状态 */
.eu-cascader-empty {
  padding: var(--ant-padding);
  text-align: center;
  color: var(--ant-color-text-disabled);
  font-size: var(--ant-font-size);
}

/* Cascader 面板样式 */
.eu-cascader-panel {
  border-radius: var(--ant-border-radius-lg);
}

/* ============================================
   Popconfirm / Popover - 气泡确认框 / 气泡卡片（公共基础）
   ============================================ */

/* 白色气泡基础 - 覆盖深色 tooltip */
.eu-popconfirm-tooltip.tooltip,
.eu-popover-tooltip.tooltip {
  background-color: var(--ant-color-bg-elevated) !important;
  color: var(--ant-color-text);
  border-radius: var(--ant-border-radius-lg);
  box-shadow: var(--ant-box-shadow);
  padding: var(--ant-padding-sm);
}

/* 箭头外层 - 边框颜色 */
.eu-popconfirm-tooltip.tooltip-top .tooltip-arrow-outer,
.eu-popover-tooltip.tooltip-top .tooltip-arrow-outer {
  border-top-color: var(--ant-color-border) !important;
}

.eu-popconfirm-tooltip.tooltip-bottom .tooltip-arrow-outer,
.eu-popover-tooltip.tooltip-bottom .tooltip-arrow-outer {
  border-bottom-color: var(--ant-color-border) !important;
}

.eu-popconfirm-tooltip.tooltip-left .tooltip-arrow-outer,
.eu-popover-tooltip.tooltip-left .tooltip-arrow-outer {
  border-left-color: var(--ant-color-border) !important;
}

.eu-popconfirm-tooltip.tooltip-right .tooltip-arrow-outer,										  
.eu-popover-tooltip.tooltip-right .tooltip-arrow-outer {
  border-right-color: var(--ant-color-border) !important;
}

/* 箭头内层 - 背景颜色 */
.eu-popconfirm-tooltip.tooltip-top .tooltip-arrow,
.eu-popover-tooltip.tooltip-top .tooltip-arrow {
  border-top-color: var(--ant-color-bg-elevated) !important;
}

.eu-popconfirm-tooltip.tooltip-bottom .tooltip-arrow,
.eu-popover-tooltip.tooltip-bottom .tooltip-arrow {
  border-bottom-color: var(--ant-color-bg-elevated) !important;
}

.eu-popconfirm-tooltip.tooltip-left .tooltip-arrow,
.eu-popover-tooltip.tooltip-left .tooltip-arrow {
  border-left-color: var(--ant-color-bg-elevated) !important;
}

.eu-popconfirm-tooltip.tooltip-right .tooltip-arrow,
.eu-popover-tooltip.tooltip-right .tooltip-arrow {
  border-right-color: var(--ant-color-bg-elevated) !important;
}

/* ============================================
   Popconfirm - 气泡确认框
   ============================================ */

/* Popconfirm 消息区 */
.eu-popconfirm-message {
  display: flex;
  align-items: start;
  margin-bottom: var(--ant-margin-md);
}

.eu-popconfirm-message-icon {
  flex-shrink: 0;
  line-height: 1;
  margin-right: var(--ant-margin-xs);
  padding-top: 3px;
}

.eu-popconfirm-message-icon svg {
  display: block;
}

.eu-popconfirm-title {
  font-weight: var(--ant-font-weight-strong);
  color: var(--ant-color-text-heading);
}

.eu-popconfirm-description {
  margin-top: var(--ant-margin-xxs);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

/* Popconfirm 按钮区 */
.eu-popconfirm-buttons {
  text-align: right;
  white-space: nowrap;
}

.eu-popconfirm-btn {
  display: inline-block;
  padding: 0 var(--ant-padding-xs);
  height: var(--ant-control-height-sm);
  font-size: var(--ant-font-size-sm);
  line-height: var(--ant-control-height-sm);
  border-radius: var(--ant-border-radius-sm);
  border: 1px solid var(--ant-color-border);
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  cursor: pointer;
  margin-left: var(--ant-margin-xs);
}

.eu-popconfirm-btn:first-child {
  margin-left: 0;
}

.eu-popconfirm-btn:hover {
  color: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-popconfirm-btn-primary {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  color: #fff;
}

.eu-popconfirm-btn-primary:hover {
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
  color: #fff;
}

/* ============================================
   Popover - 气泡卡片
   ============================================ */

/* Popover 无内边距 */
.eu-popover-tooltip.tooltip {
  padding: 0;
}

.eu-popover-body {
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
}

.eu-popover-title {
  padding: var(--ant-padding-xs) var(--ant-padding);
  color: var(--ant-color-text-heading);
  font-weight: 600;
  border-bottom: 1px solid var(--ant-color-split);
}

.eu-popover-title-notitle {
  border-bottom: none;
  padding-bottom: 0;
}

.eu-popover-close {
  float: right;
  cursor: pointer;
  font-size: var(--ant-icon-font-size-lg);
  color: var(--ant-color-icon);
  line-height: 1;
  margin-left: var(--ant-margin-xs);
}

.eu-popover-close:hover {
  color: var(--ant-color-icon-hover);
}

.eu-popover-content {
  padding: var(--ant-padding-sm);
  color: var(--ant-color-text);
}

.eu-popover-loading {
  text-align: center;
  color: var(--ant-color-text-quaternary);
  padding: var(--ant-padding-xs) 0;
}

.eu-popover-error {
  text-align: center;
  color: var(--ant-color-error);
  padding: var(--ant-padding-xs) 0;
}

/* ============================================
   Transferbox - 穿梭框（表单组件层）
   ============================================ */

/* Transferbox 容器 */
.eu-transferbox {
  width: 100% !important;
  max-width: 100% !important;
  vertical-align: middle;
  align-self: stretch;
}

/* Transferbox 内部 textbox 宽度限制 */
.eu-transferbox .textbox {
  width: 100% !important;
  max-width: 100% !important;
}

.eu-transferbox .textbox-focused {
  border-color: var(--ant-color-border) !important;
  box-shadow: none !important;
}

.eu-transferbox .textbox:not(.textbox-invalid):hover {
  border-color: var(--ant-color-border) !important;
}

/* Transferbox tagbox 包裹层 */
.eu-transferbox-tagwrap {
  display: flex;
  align-items: stretch;
}

/* Transferbox 选择按钮（tagboxButton 模式） */
.eu-transferbox-select-icon {
  padding: 0 var(--ant-padding-xs) !important;
  color: var(--ant-color-primary);
  cursor: pointer;
  font-size: var(--ant-font-size-sm);
  white-space: nowrap;
}

.eu-transferbox-select-icon:hover {
  color: var(--ant-color-primary-hover);
}

/* Transferbox button 模式 */
.eu-transferbox-btnarea {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
  flex-wrap: wrap;
}

/* Transferbox button 模式 prompt 提示 */
.eu-transferbox-prompt {
  color: var(--ant-color-text-placeholder);
  font-size: var(--ant-font-size);
}

/* Transferbox inline 标签 */
.eu-transferbox-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Transferbox 标签 */
.eu-transferbox-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ant-padding-xxs);
  height: var(--ant-control-height-sm);
  background: var(--ant-color-fill-quaternary);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text);
  line-height: 1;
}

.eu-transferbox-tag-text {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eu-transferbox-tag-close {
  margin-left: 4px;
  cursor: pointer;
  color: var(--ant-color-text-quaternary);
  font-size: var(--ant-font-size);
  line-height: 1;
}

.eu-transferbox-tag-close:hover {
  color: var(--ant-color-text-secondary);
}

/* Transferbox 禁用状态 */
.eu-transferbox-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.eu-transferbox-disabled .textbox,
.eu-transferbox-disabled .eu-transferbox-btn,
.eu-transferbox-disabled .eu-transferbox-tag-close {
  pointer-events: none;
}

/* Transferbox 只读状态：纯文本显示 */
.eu-transferbox-readonly {
  display: inline-block;
  vertical-align: middle;
}

.eu-transferbox-text {
  display: inline-block;
  padding: var(--ant-padding-xs) 0;
  color: var(--ant-color-text);
  line-height: var(--ant-line-height);
}

.eu-transferbox-text-empty {
  color: var(--ant-color-text-placeholder);
}

/* ============================================
   Transfer - 穿梭面板（数据选择层）
   ============================================ */

/* Transfer 容器 */
.eu-transfer {
  display: flex;
  gap: var(--ant-margin-sm);
  height: 100%;
  background: var(--ant-color-bg-container);
}

/* Transfer 面板（左/右） */
.eu-transfer-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-lg);
  overflow: hidden;
}

/* Transfer 面板头 */
.eu-transfer-panel-header {
  display: flex;
  align-items: center;
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  background: var(--ant-color-bg-layout);
  border-bottom: 1px solid var(--ant-color-border);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
}

.eu-transfer-panel-title {
  flex: 1;
  font-weight: 600;
  color: var(--ant-color-text);
}

.eu-transfer-panel-count {
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
}

/* Transfer 全选 checkbox */
.eu-transfer-checkbox-all {
  width: 16px;
  height: 16px;
  margin-right: var(--ant-margin-xs);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-xs);
  background: var(--ant-color-bg-container);
  transition: all 0.2s;
  vertical-align: middle;
}

/* Transfer 全选 checkbox - 选中状态 */
.eu-transfer-checkbox-all:checked {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

/* Transfer 全选 checkbox - 选中对勾 */
.eu-transfer-checkbox-all:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--ant-color-text-light-solid);
  border-bottom: 2px solid var(--ant-color-text-light-solid);
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Transfer 全选 checkbox - 半选状态（白色内框区分全选） */
.eu-transfer-checkbox-all:indeterminate {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  box-shadow: inset 0 0 0 2px var(--ant-color-bg-container);
}

/* Transfer 全选 checkbox - 半选横线 */
.eu-transfer-checkbox-all:indeterminate::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--ant-color-text-light-solid);
}

/* Transfer 搜索框区域 */
.eu-transfer-panel-search {
  padding: var(--ant-padding-xs);
  border-bottom: 1px solid var(--ant-color-split);
}

/* Transfer 内容区 */
.eu-transfer-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ant-padding-xs) 4px;
  position: relative;
}

/* Transfer Loading 状态 */
.eu-transfer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.45));
}

.eu-transfer-loading-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23595959'%3E%3Cpath d='M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 24px 24px;
  animation: panel-loading-spin 1s linear infinite;
}

.eu-transfer-loading-text {
  font-size: var(--ant-font-size);
}

/* Transfer 已选节点高亮（左侧树中） */
.eu-transfer-node-selected > .tree-node {
  background: var(--ant-color-primary-bg);
  color: var(--ant-color-primary);
}

/* Transfer 不可选节点 */
.eu-transfer-node-disabled > .tree-node {
  color: var(--ant-color-text-disabled);
  cursor: not-allowed;
}

/* Transfer 中间操作按钮区 */
.eu-transfer-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ant-margin-xs);
}

.eu-transfer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
  color: var(--ant-color-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.eu-transfer-btn:hover {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary);
  color: #fff !important;
}

.eu-transfer-btn-disabled {
  color: var(--ant-color-text-disabled);
  border-color: var(--ant-color-border);
  background: var(--ant-color-bg-container);
  cursor: not-allowed;
}

.eu-transfer-btn-disabled:hover {
  color: var(--ant-color-text-disabled);
  border-color: var(--ant-color-border);
  background: var(--ant-color-bg-container);
}

/* Transfer 右侧目标列表 */
.eu-transfer-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--ant-padding-xxs);
}

.eu-transfer-list-item {
  display: flex;
  align-items: center;
  padding: var(--ant-padding-xxs) var(--ant-padding-xs);
  margin: 2px 0;
  border-radius: var(--ant-border-radius-sm);
  cursor: pointer;
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  transition: background-color 0.2s;
}

.eu-transfer-list-item:hover {
  background: var(--ant-control-item-bg-hover);
}

/* Transfer 列表项勾选状态 */
.eu-transfer-list-item-checked {
  background: var(--ant-color-primary-bg);
}

.eu-transfer-list-item-checked:hover {
  background: var(--ant-color-primary-bg);
}

/* Transfer 列表项复选框 */
.eu-transfer-list-item-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--ant-margin-xs);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-xs);
  flex-shrink: 0;
  position: relative;
}

.eu-transfer-list-item-checked .eu-transfer-list-item-checkbox {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-transfer-list-item-checked .eu-transfer-list-item-checkbox::after {
  content: '';
  position: absolute;
  left: 5px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* Transfer 列表项文本 */
.eu-transfer-list-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transfer 列表项移除按钮 */
.eu-transfer-list-item-remove {
  flex-shrink: 0;
  margin-left: var(--ant-margin-xs);
  color: var(--ant-color-text-quaternary);
  cursor: pointer;
  font-size: var(--ant-icon-font-size-lg);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}

.eu-transfer-list-item:hover .eu-transfer-list-item-remove {
  opacity: 1;
}

.eu-transfer-list-item-remove:hover {
  color: var(--ant-color-text-secondary);
}

/* ============================================
   NoticeBar - 通知栏组件
   ============================================ */

/* 基础样式 */
.eu-noticebar {
  box-sizing: border-box;
  padding: var(--ant-padding-sm) var(--ant-padding);
  border-radius: var(--ant-border-radius-lg);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
}

.eu-noticebar-content {
  display: flex;
  align-items: flex-start;
}

/* 没有标题时图标垂直居中 */
.eu-noticebar-no-title .eu-noticebar-content {
  align-items: center;
  width: 100%;
}

/* 图标区域 */
.eu-noticebar-icon {
  flex-shrink: 0;
  margin-right: var(--ant-margin-xs);
  display: flex;
  align-items: center;
  height: calc(var(--ant-font-size) * var(--ant-line-height));
}

/* 消息区域 */
.eu-noticebar-message {
  flex: 1;
  min-width: 0;
}

.eu-noticebar-title {
  font-weight: var(--ant-font-weight-strong);
  margin-bottom: 4px;
}

.eu-noticebar-description {
  color: var(--ant-color-text-secondary);
}

/* 操作按钮区域 */
.eu-noticebar-actions {
  flex-shrink: 0;
  margin-left: var(--ant-margin-md);
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
}

.eu-noticebar-action-btn {
  padding: 0 var(--ant-padding-xs);
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text);
  text-decoration: none;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
  cursor: pointer;
  line-height: 22px;
  display: inline-block;
}

.eu-noticebar-action-btn:hover {
  color: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-noticebar-action-primary {
  color: #fff;
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-noticebar-action-primary:hover {
  color: #fff;
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
}

.eu-noticebar-action-danger {
  color: var(--ant-color-error);
  border-color: var(--ant-color-error);
}

.eu-noticebar-action-danger:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-error);
  border-color: var(--ant-color-error);
}

/* 关闭按钮 */
.eu-noticebar-close {
  flex-shrink: 0;
  margin-left: var(--ant-margin-xs);
  cursor: pointer;
  color: var(--ant-color-text-quaternary);
  font-size: var(--ant-icon-font-size-lg);
  line-height: 1;
}

.eu-noticebar-close:hover {
  color: var(--ant-color-text-secondary);
}

.eu-noticebar-close-icon {
  font-style: normal;
}

/* ========== 类型样式 ========== */

/* Info 类型 */
.eu-noticebar-info {
  background-color: var(--ant-color-info-bg);
  border: 1px solid var(--ant-color-info-border);
}

.eu-noticebar-info .eu-noticebar-icon {
  color: var(--ant-color-info);
}

/* Success 类型 */
.eu-noticebar-success {
  background-color: var(--ant-color-success-bg);
  border: 1px solid var(--ant-color-success-border);
}

.eu-noticebar-success .eu-noticebar-icon {
  color: var(--ant-color-success);
}

/* Warning 类型 */
.eu-noticebar-warning {
  background-color: var(--ant-color-warning-bg);
  border: 1px solid var(--ant-color-warning-border);
}

.eu-noticebar-warning .eu-noticebar-icon {
  color: var(--ant-color-warning);
}

/* Error 类型 */
.eu-noticebar-error {
  background-color: var(--ant-color-error-bg);
  border: 1px solid var(--ant-color-error-border);
}

.eu-noticebar-error .eu-noticebar-icon {
  color: var(--ant-color-error);
}

/* ========== 图标样式 ========== */

.eu-noticebar-icon-info::before,
.eu-noticebar-icon-success::before,
.eu-noticebar-icon-warning::before,
.eu-noticebar-icon-error::before {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: var(--ant-badge-font-size);
  font-weight: bold;
  font-style: normal;
}

.eu-noticebar-icon-info::before {
  content: 'i';
  background: var(--ant-color-info);
  color: #fff;
}

.eu-noticebar-icon-success::before {
  content: '✓';
  background: var(--ant-color-success);
  color: #fff;
}

.eu-noticebar-icon-warning::before {
  content: '!';
  background: var(--ant-color-warning);
  color: #fff;
}

.eu-noticebar-icon-error::before {
  content: '×';
  background: var(--ant-color-error);
  color: #fff;
}

/* ========================================================================== */
/* Steps 步骤条                                                                */
/* ========================================================================== */

:root {
  /* Steps 组件专属变量 */
  --ant-steps-icon-size: var(--ant-control-height);           /* 默认图标尺寸 32px */
  --ant-steps-icon-size-sm: var(--ant-control-height-sm);     /* 小尺寸图标尺寸 24px */
  --ant-steps-dot-size: 8px;                                  /* 点状图标尺寸 */
  --ant-steps-dot-size-active: 10px;                          /* 激活点状图标尺寸 */
  --ant-steps-icon-font-size: var(--ant-font-size);           /* 图标数字字体大小 */
  --ant-steps-title-line-height: var(--ant-control-height);   /* 标题行高（与图标同高） */
  --ant-steps-description-margin-top: var(--ant-margin-xxs);  /* 描述上边距 */
  --ant-steps-nav-gap: var(--ant-control-height-lg);          /* navigation 类型 item 间距 40px */
  --ant-steps-nav-arrow-size: 12px;                           /* navigation 箭头尺寸 */
  --ant-steps-nav-arrow-offset: -28px;                        /* navigation 箭头居中偏移量 */
}

/* 基础容器 */
.eu-steps {
  box-sizing: border-box;
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  color: var(--ant-color-text);
}

/* 步骤容器 */
.eu-steps-container {
  display: flex;
}

/* 水平方向 */
.eu-steps-horizontal .eu-steps-container {
  flex-direction: row;
}

/* 垂直方向 */
.eu-steps-vertical .eu-steps-container {
  flex-direction: column;
}

/* ========== 单个步骤项 ========== */

.eu-step-item {
  position: relative;
  display: flex;
  flex: 1;
}

.eu-steps-horizontal .eu-step-item {
  flex-direction: row;
  align-items: flex-start;
}

.eu-steps-vertical .eu-step-item {
  flex-direction: row;
  padding-bottom: var(--ant-padding-lg);
}

/* 最后一项不占满 */
.eu-steps-horizontal .eu-step-item:last-child {
  flex: none;
}

/* 可点击状态 */
.eu-step-clickable {
  cursor: pointer;
}

.eu-step-clickable:hover .eu-step-title {
  color: var(--ant-color-primary);
}

/* 禁用状态 */
.eu-step-item-disabled {
  cursor: not-allowed;
}

.eu-step-item-disabled .eu-step-icon,
.eu-step-item-disabled .eu-step-title,
.eu-step-item-disabled .eu-step-description {
  opacity: 0.5;
}

/* ========== 图标区域 ========== */

.eu-step-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-steps-icon-size);
  height: var(--ant-steps-icon-size);
  margin-right: var(--ant-margin-sm);
  flex-shrink: 0;
}

/* 数字图标 */
.eu-step-icon-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-steps-icon-size);
  height: var(--ant-steps-icon-size);
  line-height: var(--ant-steps-icon-size);
  border: 1px solid var(--ant-color-text-quaternary);
  border-radius: 50%;
  font-size: var(--ant-steps-icon-font-size);
  color: var(--ant-color-text-quaternary);
  background: var(--ant-color-bg-container);
  transition: all 0.3s;
}

.eu-step-icon-check,
.eu-step-icon-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-steps-icon-size);
  height: var(--ant-steps-icon-size);
  line-height: var(--ant-steps-icon-size);
  border-radius: 50%;
  color: var(--ant-color-text-light-solid);
  font-size: var(--ant-icon-font-size-lg);
}

.eu-step-icon-check {
  background: var(--ant-color-primary);
}

.eu-step-icon-check::before {
  content: '✓';
}

.eu-step-icon-error {
  background: var(--ant-color-error);
}

.eu-step-icon-error::before {
  content: '×';
}

/* 点状图标 */
.eu-step-icon-dot {
  display: block;
  width: var(--ant-steps-dot-size);
  height: var(--ant-steps-dot-size);
  border-radius: 50%;
  background: var(--ant-color-text-quaternary);
}

/* 自定义图标 */
.eu-step-icon-custom {
  font-size: var(--ant-font-size-heading-3);
  color: var(--ant-color-text-quaternary);
}

/* ========== 状态样式 ========== */

/* process 状态 */
.eu-step-item-process .eu-step-icon-number {
  border-color: var(--ant-color-primary);
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary);
}

.eu-step-item-process .eu-step-icon-dot {
  background: var(--ant-color-primary);
}

.eu-step-item-process .eu-step-icon-custom {
  color: var(--ant-color-primary);
}

.eu-step-item-process .eu-step-title {
  color: var(--ant-color-text);
  font-weight: var(--ant-font-weight-strong);
}

/* finish 状态 */
.eu-step-item-finish .eu-step-icon-number {
  border-color: var(--ant-color-primary);
  color: var(--ant-color-primary);
  background: var(--ant-color-bg-container);
}

.eu-step-item-finish .eu-step-icon-dot {
  background: var(--ant-color-primary);
}

.eu-step-item-finish .eu-step-icon-custom {
  color: var(--ant-color-primary);
}

.eu-step-item-finish .eu-step-title {
  color: var(--ant-color-text);
}

/* wait 状态 */
.eu-step-item-wait .eu-step-title {
  color: var(--ant-color-text-quaternary);
}

.eu-step-item-wait .eu-step-subtitle {
  color: var(--ant-color-text-quaternary);
}

.eu-step-item-wait .eu-step-description {
  color: var(--ant-color-text-quaternary);
}

/* error 状态 */
.eu-step-item-error .eu-step-icon-number {
  border-color: var(--ant-color-error);
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-error);
}

.eu-step-item-error .eu-step-title {
  color: var(--ant-color-error);
}

.eu-step-item-error .eu-step-description {
  color: var(--ant-color-error);
}

/* ========== 内容区域 ========== */

/* section 包含 header 和 description */
.eu-step-section {
  flex: 1;
  min-width: 0;
}

/* header 包含 title + subtitle + tail（连接线），使用 flex 布局 */
.eu-step-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: var(--ant-steps-icon-size);
}

.eu-step-title {
  font-size: var(--ant-font-size);
  line-height: var(--ant-steps-title-line-height);
  color: var(--ant-color-text);
  transition: color 0.3s;
  flex-shrink: 0;
}

.eu-step-subtitle {
  font-size: var(--ant-font-size-sm);
  line-height: var(--ant-steps-title-line-height);
  color: var(--ant-color-text-secondary);
  font-weight: normal;
  margin-left: var(--ant-margin-xs);
  flex-shrink: 0;
}

.eu-step-description {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
  margin-top: var(--ant-steps-description-margin-top);
}

/* ========== 连接线 ========== */

/* 水平方向连接线 - 在 header 内部，使用 flex:1 填充 title 后的剩余空间 */
.eu-steps-horizontal .eu-step-tail {
  flex: 1;
  min-width: var(--ant-margin);
  margin-left: var(--ant-margin-sm);
  margin-right: var(--ant-margin-sm);
  height: 32px;
  display: flex;
  align-items: center;
}

.eu-step-tail::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ant-color-border);
  transition: background 0.3s;
  position: relative;
  z-index: 1;
}

.eu-step-item:last-child .eu-step-tail {
  display: none;
}

.eu-step-item-finish .eu-step-tail::after {
  background: var(--ant-color-primary);
}

/* 垂直方向连接线 - 绝对定位在图标下方 */
.eu-steps-vertical .eu-step-tail {
  position: absolute;
  left: 16px;
  top: 40px;
  width: 1px;
  height: calc(100% - 48px); /* 上下各留 8px 间距 */
  margin: 0;
  flex: none;
  display: block;
}

.eu-steps-vertical .eu-step-tail::after {
  width: 1px;
  height: 100%;
}

/* ========== 标签位置 ========== */

/* 标签在下方 */
.eu-steps-label-vertical .eu-step-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 标签在下方时，所有步骤等宽 */
.eu-steps-label-vertical .eu-step-item:last-child {
  flex: 1;
}

.eu-steps-label-vertical .eu-step-icon {
  margin-right: 0;
  margin-bottom: var(--ant-margin-xs);
}

.eu-steps-label-vertical .eu-step-section {
  align-self: stretch;
}

.eu-steps-label-vertical .eu-step-header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 标签在下方时，隐藏 header 内的连接线 DOM 元素 */
.eu-steps-label-vertical .eu-step-tail {
  display: none;
}

/* 使用伪元素实现连接线，在图标水平线上 */
.eu-steps-label-vertical .eu-step-item::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 1px;
  background: var(--ant-color-border);
  transition: background 0.3s;
}

.eu-steps-label-vertical .eu-step-item:last-child::after {
  display: none !important;
}

.eu-steps-label-vertical .eu-step-item-finish::after {
  background: var(--ant-color-primary);
}

/* ========== 小尺寸 ========== */

.eu-steps-small .eu-step-icon {
  width: var(--ant-steps-icon-size-sm);
  height: var(--ant-steps-icon-size-sm);
}

.eu-steps-small .eu-step-icon-number {
  width: var(--ant-steps-icon-size-sm);
  height: var(--ant-steps-icon-size-sm);
  font-size: var(--ant-font-size-sm);
}

.eu-steps-small .eu-step-icon-check,
.eu-steps-small .eu-step-icon-error {
  width: var(--ant-steps-icon-size-sm);
  height: var(--ant-steps-icon-size-sm);
  font-size: var(--ant-icon-font-size-sm);
}

.eu-steps-small .eu-step-title {
  font-size: var(--ant-font-size-sm);
  line-height: var(--ant-steps-icon-size-sm);
}

.eu-steps-small .eu-step-header {
  min-height: var(--ant-steps-icon-size-sm);
}

.eu-steps-small.eu-steps-horizontal .eu-step-tail {
  height: var(--ant-steps-icon-size-sm);
}

/* small 尺寸垂直方向连接线 - 图标 24px，中心点在 12px */
.eu-steps-vertical.eu-steps-small .eu-step-tail {
  left: 12px;
  top: 32px;
  height: calc(100% - 36px);
}

/* ========== 点状样式 ========== */

.eu-steps-dot .eu-step-icon {
  width: var(--ant-steps-dot-size);
  height: var(--ant-steps-dot-size);
  margin-top: var(--ant-margin-sm);
  position: relative;
  z-index: 2;
}

.eu-steps-dot .eu-step-title {
  line-height: 1.5;
}

.eu-steps-dot .eu-step-subtitle {
  line-height: 1.5;
}

.eu-steps-small.eu-steps-dot .eu-step-icon {
  width: var(--ant-steps-dot-size);
  height: var(--ant-steps-dot-size);
  margin-top: var(--ant-margin-xs);
}

.eu-steps-vertical.eu-steps-dot .eu-step-tail {
  left: 4px; /* 点状图标中心 = 8px / 2 = 4px */
  top: 18px; /* 点底部(6+8=14px) + 4px 间距 */
  height: calc(100% - 16px); /* 上下各留 4px 间距到点边缘 */
}

/* ========== 导航样式（navigation） ========== */

.eu-steps-navigation {
  padding: 0;
  background: var(--ant-color-bg-container);
}

.eu-steps-navigation .eu-steps-container {
  display: flex;
  gap: var(--ant-steps-nav-gap);  /* item 之间留出间隔，箭头居中在此区域 */
}

.eu-steps-navigation .eu-step-item {
  flex: 1 !important;  /* 均分宽度，允许根据 flex 算法自然分配 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

/* wrapper 包含 icon 和 section */
.eu-steps-navigation .eu-step-nav-wrapper {
  display: flex;
  align-items: center;
  padding: var(--ant-padding) var(--ant-padding-lg);
  transition: background-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--ant-border-radius-sm);
}

.eu-steps-navigation .eu-step-item:hover .eu-step-nav-wrapper {
  background: var(--ant-color-bg-text-hover);
}

/* 图标区域 */
.eu-steps-navigation .eu-step-nav-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: var(--ant-margin-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eu-steps-navigation .eu-step-nav-icon .eu-step-icon-number {
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border: 1px solid var(--ant-color-border);
  border-radius: 50%;
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
}

.eu-steps-navigation .eu-step-nav-icon .eu-step-icon-check {
  width: 24px;
  height: 24px;
  font-size: 14px;
  background: transparent;
  color: var(--ant-color-primary);
}

.eu-steps-navigation .eu-step-nav-icon .eu-step-icon-check::before {
  content: '✓';
}

/* process 状态图标 */
.eu-steps-navigation .eu-step-item-process .eu-step-nav-icon .eu-step-icon-number {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  color: #fff;
}

/* section 区域 */
.eu-steps-navigation .eu-step-nav-section {
  flex: 1;
  min-width: 0;
}

/* header 区域（标题 + 子标题） */
.eu-steps-navigation .eu-step-nav-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.eu-steps-navigation .eu-step-title {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eu-steps-navigation .eu-step-item-wait .eu-step-title {
  color: var(--ant-color-text-secondary);
}

.eu-steps-navigation .eu-step-item-process .eu-step-title {
  font-weight: var(--ant-font-weight-strong);
  color: var(--ant-color-text);
}

.eu-steps-navigation .eu-step-description {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 箭头 - 使用伪元素 + border 实现，居中在 gap 区域 */
.eu-steps-navigation .eu-step-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--ant-steps-nav-arrow-offset);  /* gap=40px，视觉居中值：-(gap/2) + 旋转视觉补偿 = -20px - 8px = -28px */
  width: var(--ant-steps-nav-arrow-size);
  height: var(--ant-steps-nav-arrow-size);
  border-top: 1px solid var(--ant-color-border);
  border-right: 1px solid var(--ant-color-border);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  z-index: 1;
}

.eu-steps-navigation .eu-step-item:last-child::after {
  content: none;  /* 最后一个 item 不生成箭头伪元素 */
}

/* 当前步骤底部指示线，与 wrapper 宽度对齐 */
.eu-steps-navigation .eu-step-item-process::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 2px;
  background: var(--ant-color-primary);
}

/* ========== 内联样式（inline） ========== */

.eu-steps-inline .eu-steps-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.eu-steps-inline .eu-step-item {
  display: flex;
  align-items: center;
  padding: var(--ant-padding-xxs) 0; /* 4px */
}

.eu-steps-inline .eu-step-icon {
  width: var(--ant-steps-dot-size);
  height: var(--ant-steps-dot-size);
  margin: 0 var(--ant-margin-xs) 0 0; /* 8px */
  background: var(--ant-color-border);
  border-radius: 50%;
}

.eu-steps-inline .eu-step-icon-dot {
  display: none;
}

.eu-steps-inline .eu-step-item-process .eu-step-icon {
  width: var(--ant-steps-dot-size-active);
  height: var(--ant-steps-dot-size-active);
  background: var(--ant-color-primary);
  box-shadow: 0 0 0 3px var(--ant-color-primary-bg);
}

.eu-steps-inline .eu-step-item-finish .eu-step-icon {
  background: var(--ant-color-primary);
}

.eu-steps-inline .eu-step-item-error .eu-step-icon {
  background: var(--ant-color-error);
}

.eu-steps-inline .eu-step-icon-check,
.eu-steps-inline .eu-step-icon-error {
  display: none;
}

.eu-steps-inline .eu-step-title {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
  white-space: nowrap;
}

.eu-steps-inline .eu-step-item-process .eu-step-title {
  color: var(--ant-color-text);
  font-weight: var(--ant-font-weight-strong);
}

.eu-steps-inline .eu-step-item-finish .eu-step-title {
  color: var(--ant-color-text);
}

.eu-steps-inline .eu-step-inline-separator {
  width: 100%;
  height: 1px;
  background: var(--ant-color-border);
  margin: 0 var(--ant-margin-sm);
}

.eu-steps-inline .eu-step-item-finish .eu-step-inline-separator {
  background: var(--ant-color-primary);
}

.eu-steps-inline .eu-step-item:last-child .eu-step-inline-separator {
  display: none;
}

/* ========== 进度条 ========== */

.eu-step-progress {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 44px;
  height: 44px;
}

.eu-step-progress svg {
  width: 100%;
  height: 100%;
}

/* 进度轨道（底部圆环） */
.eu-step-progress-rail {
  fill: none;
  stroke: var(--ant-color-border-secondary);
  stroke-width: 2;
}

/* 进度条（前景圆环） */
.eu-step-progress-stroke {
  fill: none;
  stroke: var(--ant-color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s;
}

/* ========== 操作按钮区域 ========== */

.eu-steps-buttons {
  display: flex;
  gap: var(--ant-margin-sm);
  padding: var(--ant-padding-md) 0;
}

.eu-steps-buttons-left {
  justify-content: flex-start;
}

.eu-steps-buttons-center {
  justify-content: center;
}

.eu-steps-buttons-right {
  justify-content: flex-end;
}

.eu-steps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ant-control-height);
  padding: 0 var(--ant-padding-md);
  font-size: var(--ant-font-size);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  cursor: pointer;
  transition: all 0.3s;
}

.eu-steps-btn:hover {
  color: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-steps-btn-primary {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-steps-btn-primary:hover {
  color: var(--ant-color-text-light-solid);
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
}

/* ============================================
   Divider 分隔线组件
   ============================================ */

/* 基础样式 */
.eu-divider {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
}

/* 水平分隔线 */
.eu-divider-horizontal {
  display: flex;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: var(--ant-margin-lg) 0 var(--ant-margin-lg);
}

/* 垂直分隔线 */
.eu-divider-vertical {
  position: relative;
  top: -0.06em;
  display: inline-block;
  height: 0.9em;
  margin-inline: var(--ant-margin-xs);
  margin-block: 0;
  vertical-align: middle;
  border-top: 0;
  border-inline-start: 1px solid var(--ant-color-border);
}

/* 线条样式 */
.eu-divider-solid {
  border-top: 1px solid var(--ant-color-border);
}

.eu-divider-dashed {
  border-top: 1px dashed var(--ant-color-border);
}

.eu-divider-dotted {
  border-top: 1px dotted var(--ant-color-border);
}

/* 垂直分隔线 - 虚线/点线 */
.eu-divider-vertical.eu-divider-dashed,
.eu-divider-vertical.eu-divider-dotted {
  border-inline-start-width: 1px;
  border-inline-end: 0;
  border-block-start: 0;
  border-block-end: 0;
}

/* 间距大小 */
.eu-divider-horizontal.eu-divider-small {
  margin-block: var(--ant-margin-xs);
}

.eu-divider-horizontal.eu-divider-middle {
  margin-block: var(--ant-margin);
}

.eu-divider-horizontal.eu-divider-large {
  margin-block: var(--ant-margin-lg);
}

/* 带文字的分隔线 */
.eu-divider-horizontal.eu-divider-with-text {
  display: flex;
  align-items: center;
  margin: var(--ant-margin) 0;
  color: var(--ant-color-text-secondary);
  font-weight: var(--ant-font-weight-strong);
  font-size: var(--ant-font-size);
  white-space: nowrap;
  text-align: center;
  border-block-start: 0;
}

.eu-divider-with-text::before,
.eu-divider-with-text::after {
  position: relative;
  width: 50%;
  border: 0;
  border-block-start: 1px solid var(--ant-color-border);
  content: '';
}

/* 继承线条样式 */
.eu-divider-dashed.eu-divider-with-text::before,
.eu-divider-dashed.eu-divider-with-text::after {
  border-style: dashed none none;
}

.eu-divider-dotted.eu-divider-with-text::before,
.eu-divider-dotted.eu-divider-with-text::after {
  border-style: dotted none none;
}

/* 文字内容 */
.eu-divider-inner-text {
  display: inline-block;
  padding-block: 0;
  padding-inline: var(--ant-padding);
}

/* 普通文字样式 */
.eu-divider-plain.eu-divider-with-text {
  color: var(--ant-color-text);
  font-weight: 400;
  font-size: var(--ant-font-size);
}

/* 文字位置 - 左侧 */
.eu-divider-with-text-left::before {
  width: 5%;
}

.eu-divider-with-text-left::after {
  width: 95%;
}

/* 文字位置 - 右侧 */
.eu-divider-with-text-right::before {
  width: 95%;
}

.eu-divider-with-text-right::after {
  width: 5%;
}

/* 文字位置 - 居中（默认） */
.eu-divider-with-text-center::before,
.eu-divider-with-text-center::after {
  width: 50%;
}

/* =====================================================
   OptionGroup 选项组组件
   ===================================================== */

/* 基础容器 */
.eu-optiongroup {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ant-margin-xs);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  box-sizing: border-box;
}

/* 垂直布局 */
.eu-optiongroup-vertical {
  flex-direction: column;
}

/* 撑满宽度 */
.eu-optiongroup-block {
  display: flex;
  width: 100%;
}

.eu-optiongroup-block .eu-optiongroup-item {
  flex: 1;
  justify-content: center;
}

/* 选项项 - 基础 */
.eu-optiongroup-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ant-margin-xs);
  height: var(--ant-control-height);
  padding: var(--ant-padding-xxs) var(--ant-padding-sm);
  border-radius: var(--ant-border-radius);
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  user-select: none;
}

.eu-optiongroup-outline .eu-optiongroup-item {
  border: 1px solid var(--ant-color-border);
  background: var(--ant-color-bg-container);
}

.eu-optiongroup-outline .eu-optiongroup-item:hover {
  border-color: var(--ant-color-primary);
  color: var(--ant-color-primary);
}

.eu-optiongroup-outline .eu-optiongroup-item-selected {
  border-color: var(--ant-color-primary);
  color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
}

.eu-optiongroup-button {
  gap: 0;
}

.eu-optiongroup-button .eu-optiongroup-item {
  border: 1px solid var(--ant-color-border);
  background: var(--ant-color-bg-container);
  border-radius: 0;
  margin-left: -1px;
}

.eu-optiongroup-button .eu-optiongroup-item:first-of-type {
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
  margin-left: 0;
}

.eu-optiongroup-button .eu-optiongroup-item:last-child {
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0;
}

.eu-optiongroup-button .eu-optiongroup-item:only-child {
  border-radius: var(--ant-border-radius);
}

.eu-optiongroup-button .eu-optiongroup-item:hover {
  color: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  z-index: 1;
}

.eu-optiongroup-button .eu-optiongroup-item-selected {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
  color: var(--ant-color-text-light-solid);
  z-index: 2;
}

/* 多选模式下相邻选中项之间的分割线 */
.eu-optiongroup-button .eu-optiongroup-item-selected + .eu-optiongroup-item-selected {
  border-left-color: var(--ant-color-primary-active);
}

.eu-optiongroup-button .eu-optiongroup-item-selected:hover {
  background: var(--ant-color-primary-hover);
  border-color: var(--ant-color-primary-hover);
  color: var(--ant-color-text-light-solid);
}

/* Button 模式垂直布局 */
.eu-optiongroup-button.eu-optiongroup-vertical .eu-optiongroup-item {
  margin-left: 0;
  margin-top: -1px;
}

.eu-optiongroup-button.eu-optiongroup-vertical .eu-optiongroup-item:first-of-type {
  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
  margin-top: 0;
}

.eu-optiongroup-button.eu-optiongroup-vertical .eu-optiongroup-item:last-child {
  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
}

.eu-optiongroup-button.eu-optiongroup-vertical .eu-optiongroup-item:only-child {
  border-radius: var(--ant-border-radius);
}

.eu-optiongroup-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 单选指示器（圆点） */
.eu-optiongroup-radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ant-color-border);
  border-radius: 50%;
  background: var(--ant-color-bg-container);
  transition: all 0.2s;
}

.eu-optiongroup-item:hover .eu-optiongroup-radio {
  border-color: var(--ant-color-primary);
}

.eu-optiongroup-item-selected .eu-optiongroup-radio {
  border-color: var(--ant-color-primary);
  border-width: 5px;
}

/* 多选指示器（勾选框） */
.eu-optiongroup-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  background: var(--ant-color-bg-container);
  transition: all 0.2s;
  position: relative;
}

.eu-optiongroup-item:hover .eu-optiongroup-checkbox {
  border-color: var(--ant-color-primary);
}

.eu-optiongroup-item-selected .eu-optiongroup-checkbox {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

.eu-optiongroup-item-selected .eu-optiongroup-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: 2px solid var(--ant-color-text-light-solid);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.eu-optiongroup-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.eu-optiongroup-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small 尺寸 */
.eu-optiongroup-sm .eu-optiongroup-item {
  height: var(--ant-control-height-sm);
  padding: 0 var(--ant-padding-xs);
  font-size: var(--ant-font-size-sm);
}

.eu-optiongroup-sm .eu-optiongroup-radio,
.eu-optiongroup-sm .eu-optiongroup-checkbox {
  width: 14px;
  height: 14px;
}

.eu-optiongroup-sm .eu-optiongroup-item-selected .eu-optiongroup-radio {
  border-width: 4px;
}

.eu-optiongroup-sm .eu-optiongroup-item-selected .eu-optiongroup-checkbox::after {
  top: 1px;
  left: 4px;
  width: 3px;
  height: 7px;
}

/* Large 尺寸 */
.eu-optiongroup-lg .eu-optiongroup-item {
  height: var(--ant-control-height-lg);
  padding: var(--ant-padding-xs) var(--ant-padding);
  font-size: var(--ant-font-size-lg);
}

.eu-optiongroup-lg .eu-optiongroup-radio,
.eu-optiongroup-lg .eu-optiongroup-checkbox {
  width: 18px;
  height: 18px;
}

.eu-optiongroup-lg .eu-optiongroup-item-selected .eu-optiongroup-radio {
  border-width: 6px;
}

.eu-optiongroup-lg .eu-optiongroup-item-selected .eu-optiongroup-checkbox::after {
  top: 2px;
  left: 6px;
  width: 5px;
  height: 9px;
}

/* 组件级禁用 */
.eu-optiongroup-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 只读状态：纯文本显示 */
.eu-optiongroup-readonly {
  display: inline-block;
  vertical-align: middle;
}
.eu-optiongroup-text-readonly {
  display: inline-block;
  padding: var(--ant-padding-xs) 0;
  color: var(--ant-color-text);
  line-height: var(--ant-line-height);
}
.eu-optiongroup-text-empty {
  color: var(--ant-color-text-placeholder);
}

/* 选项级禁用 */
.eu-optiongroup-item-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.eu-optiongroup-outline .eu-optiongroup-item-disabled:hover {
  border-color: var(--ant-color-border);
  color: var(--ant-color-text);
}

.eu-optiongroup-button .eu-optiongroup-item-disabled:hover {
  border-color: var(--ant-color-border);
  color: var(--ant-color-text);
  background: var(--ant-color-bg-container);
}

/* =====================================================
   Timer 计时组件
   ===================================================== */

.eu-timer {
  display: inline-block;
  padding: var(--ant-padding-sm) var(--ant-padding-md);
  border-radius: var(--ant-border-radius);
  font-family: var(--ant-font-family);
  text-align: center;
  min-width: 300px;
}

.eu-timer-header {
  margin-bottom: var(--ant-margin-xs);
}

.eu-timer-title {
  display: block;
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-lg);
  font-weight: var(--ant-font-weight-strong);
  margin-bottom: var(--ant-margin-xxs);
}

.eu-timer-subtitle {
  display: block;
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
  margin-bottom: var(--ant-margin-xs);
}

.eu-timer-content {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.eu-timer-prefix,
.eu-timer-suffix {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size-lg);
  margin: 0 var(--ant-margin-xs);
}

.eu-timer-value {
  color: var(--ant-color-text-heading);
  font-size: var(--ant-font-size-heading-3);
  font-weight: var(--ant-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Size variants */
.eu-timer-sm .eu-timer-value {
  font-size: var(--ant-font-size-xl);
}

.eu-timer-lg .eu-timer-value {
  font-size: var(--ant-font-size-heading-2);
}

/* Mono style - 等宽字体样式 */
.eu-timer-mono .eu-timer-value {
  font-family: var(--ant-font-family-mono);
  letter-spacing: 1px;
}

/* Digital style - 电子表数码管样式 */
.eu-timer-digital .eu-timer-value {
  font-family: 'DSEG7 Classic', monospace;
  letter-spacing: 3px;
  color: var(--ant-color-text-heading);
}

/* Digital 超时状态 - 红色 */
.eu-timer-digital.eu-timer-overtime .eu-timer-value {
  color: #ff3333;
  text-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
  animation: digital-blink 0.5s infinite;
}

@keyframes digital-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Digital 暂停状态 - 暗淡 */
.eu-timer-digital.eu-timer-paused .eu-timer-value {
  color: #666666;
  text-shadow: none;
}

/* Digital 尺寸变体 */
.eu-timer-digital.eu-timer-sm .eu-timer-value {
  font-size: var(--ant-font-size-lg);
  letter-spacing: 2px;
}

.eu-timer-digital.eu-timer-lg .eu-timer-value {
  font-size: var(--ant-font-size-heading-1);
  letter-spacing: 4px;
}

/* Status styles */

.eu-timer-paused {
  background: var(--ant-orange-1);
  border: 1px solid var(--ant-orange-3);
}

.eu-timer-finished {
  background: var(--ant-green-1);
  border: 1px solid var(--ant-green-3);
}

.eu-timer-overtime {
  background: var(--ant-orange-1);
  border: 1px solid var(--ant-orange-3);
}

.eu-timer-overtime .eu-timer-value {
  color: var(--ant-orange-6);
  animation: timer-overtime-blink 1s infinite;
}

@keyframes timer-overtime-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.eu-timer-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Pending state */
.eu-timer-pending {
  background: var(--ant-orange-1);
  border: 1px solid var(--ant-orange-3);
}

/* countup 超时状态的样式 */
.eu-timer-countup.eu-timer-overtime {
  background: var(--ant-red-1);
  border: 2px solid var(--ant-red-3);
}

.eu-timer-countup.eu-timer-overtime .eu-timer-value {
  color: var(--ant-red-6);
  animation: timer-overtime-blink 1s infinite;
}

/* Lap records */
.eu-timer-laps {
  margin-top: var(--ant-margin-sm);
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  padding: var(--ant-padding-xs);
  font-size: var(--ant-font-size);
}

.eu-timer-lap {
  display: flex;
  justify-content: space-between;
  padding: var(--ant-padding-xs) 0;
  border-bottom: 1px dashed var(--ant-color-border);
}

.eu-timer-lap:last-child {
  border-bottom: none;
}

.eu-timer-lap-index {
  color: var(--ant-color-text-heading);
  min-width: var(--ant-margin-xl);
}

.eu-timer-lap-time {
  color: var(--ant-color-text);
}

.eu-timer-lap-total {
  color: var(--ant-blue-6);
  font-weight: var(--ant-font-weight-medium);
}

/* Time display elements */
/* 时间信息区域容器 */
.eu-timer-timeinfo {
  margin-top: var(--ant-margin-md);
}

.eu-timer-starttime,
.eu-timer-targettime {
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text-secondary);
  background: var(--ant-color-fill-secondary);
  border-radius: var(--ant-border-radius);
}

.eu-timer-starttime + .eu-timer-targettime {
  margin-top: var(--ant-margin-xs);
}

.eu-timer-finished-label {
  color: var(--ant-red-6);
  font-weight: var(--ant-font-weight-medium);
}

/* 秒表模式容器：横向布局，表盘在左，分段记录在右 */
.eu-timer-stopwatch {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ant-margin-md);
  padding: var(--ant-padding-xs) var(--ant-padding-md) var(--ant-padding-md) var(--ant-padding-xs);
  background: transparent;
  border: none;
}

/* 为脉冲动画预留空间 */
.eu-timer-stopwatch .eu-timer-dial {
  margin: var(--ant-margin-xs);
}

/* 圆形表盘 */
.eu-timer-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
  border: 4px solid var(--ant-blue-3);
  position: relative;
}

/* 表盘内的标题 */
.eu-timer-dial .eu-timer-header {
  margin-bottom: var(--ant-margin-xs);
}

.eu-timer-dial .eu-timer-title {
  font-size: var(--ant-font-size);
  margin-bottom: var(--ant-margin-xxs);
}

.eu-timer-dial .eu-timer-subtitle {
  font-size: var(--ant-font-size-sm);
  margin-bottom: 0;
}

/* 表盘内的时间值 */
.eu-timer-dial .eu-timer-value {
  font-size: var(--ant-font-size-heading-2);
  font-weight: var(--ant-font-weight-strong);
}

/* 秒表表盘内的电子表样式 */
.eu-timer-stopwatch.eu-timer-digital .eu-timer-dial .eu-timer-value {
  font-family: 'DSEG7 Classic', monospace;
  font-size: var(--ant-font-size-heading-3);
  letter-spacing: 2px;
  color: var(--ant-color-text-heading);
}

/* 秒表模式下的分段记录 - 右侧布局 */
.eu-timer-stopwatch .eu-timer-laps {
  margin-top: 0;
  min-width: 200px;
  max-height: 200px;
  background: var(--ant-color-bg-container);
}

/* 空分段列表隐藏 */
.eu-timer-stopwatch .eu-timer-laps:empty {
  display: none;
}

/* 运行状态的表盘样式 */
.eu-timer-stopwatch.eu-timer-running {
  background: transparent;
  border: none;
}

.eu-timer-stopwatch.eu-timer-running .eu-timer-dial {
  border-color: var(--ant-blue-5);
  animation: timer-pulse 2s infinite;
}

/* 暂停状态的表盘样式 */
.eu-timer-stopwatch.eu-timer-paused {
  background: transparent;
  border: none;
}

.eu-timer-stopwatch.eu-timer-paused .eu-timer-dial {
  border-color: var(--ant-orange-5);
  opacity: 0.9;
}

/* 表盘脉冲动画 */
@keyframes timer-pulse {
  0%, 100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.08),
      inset 0 2px 4px rgba(255, 255, 255, 0.8),
      inset 0 -2px 4px rgba(0, 0, 0, 0.05),
      0 0 0 0 rgba(24, 144, 255, 0.4);
  }
  50% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.08),
      inset 0 2px 4px rgba(255, 255, 255, 0.8),
      inset 0 -2px 4px rgba(0, 0, 0, 0.05),
      0 0 0 8px rgba(24, 144, 255, 0);
  }
}

/* 秒表模式尺寸变体 */
.eu-timer-stopwatch.eu-timer-sm .eu-timer-dial {
  width: 140px;
  height: 140px;
}

.eu-timer-stopwatch.eu-timer-sm .eu-timer-dial .eu-timer-value {
  font-size: var(--ant-font-size-xl);
}

.eu-timer-stopwatch.eu-timer-sm.eu-timer-digital .eu-timer-dial .eu-timer-value {
  font-size: var(--ant-font-size-lg);
}

.eu-timer-stopwatch.eu-timer-sm .eu-timer-laps {
  min-width: 180px;
  max-height: 160px;
}

.eu-timer-stopwatch.eu-timer-lg .eu-timer-dial {
  width: 220px;
  height: 220px;
}

.eu-timer-stopwatch.eu-timer-lg .eu-timer-dial .eu-timer-value {
  font-size: var(--ant-font-size-heading-1);
}

.eu-timer-stopwatch.eu-timer-lg.eu-timer-digital .eu-timer-dial .eu-timer-value {
  font-size: var(--ant-font-size-heading-2);
  letter-spacing: 3px;
}

.eu-timer-stopwatch.eu-timer-lg .eu-timer-laps {
  min-width: 240px;
  max-height: 240px;
}

/* ========== VideoPlayer 视频播放组件 ========== */

.eu-videoplayer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--ant-border-radius-lg);
  overflow: hidden;
  font-family: var(--ant-font-family);
  outline: none;
}

/* 视频容器 */
.eu-videoplayer-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 视频元素 */
.eu-videoplayer-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 水印 (DOM 实现) */
.eu-videoplayer-watermark {
  position: absolute;
  top: 0;
  left: 0;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
}

/* 播放按钮遮罩 */
.eu-videoplayer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 20;
}

.eu-videoplayer-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: transform 0.2s, background 0.2s;
}

.eu-videoplayer-play-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ant-blue-6);
}

.eu-videoplayer-overlay:hover .eu-videoplayer-play-btn {
  transform: scale(1.1);
  background: #fff;
}

/* 加载指示器 */
.eu-videoplayer-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 25;
}

.eu-videoplayer-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--ant-blue-5);
  border-radius: 50%;
  animation: videoplayer-spin 1s linear infinite;
}

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

/* 警告提示 */
.eu-videoplayer-warning {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: var(--ant-padding-sm) var(--ant-padding-lg);
  background: rgba(0, 0, 0, 0.8);
  color: var(--ant-orange-5);
  font-size: var(--ant-font-size);
  border-radius: var(--ant-border-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 30;
}

.eu-videoplayer-warning-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* 锁定遮罩 */
.eu-videoplayer-lock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 50;
}

.eu-videoplayer-lock-visible {
  display: flex;
}

.eu-videoplayer-lock-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ant-margin-md);
  background: var(--ant-red-5);
  border-radius: 50%;
  position: relative;
}

.eu-videoplayer-lock-icon::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

.eu-videoplayer-lock-icon::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 22px;
  background: #fff;
  border-radius: var(--ant-border-radius-sm);
}

.eu-videoplayer-lock-message {
  color: #fff;
  font-size: var(--ant-font-size-lg);
}

/* 错误提示 */
.eu-videoplayer-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 35;
}

.eu-videoplayer-error-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ant-margin-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.eu-videoplayer-error-text {
  color: #fff;
  font-size: var(--ant-font-size-lg);
  text-align: center;
  padding: 0 var(--ant-padding-lg);
}

/* 进度条 */
.eu-videoplayer-progress {
  position: absolute;
  bottom: 46px;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: height 0.2s, bottom 0.5s ease;
  z-index: 10;
}

/* 控制栏隐藏时进度条贴底 */
.eu-videoplayer-progress-bottom {
  bottom: 0;
}

/* 扩大点击区域 */
.eu-videoplayer-progress::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

.eu-videoplayer-progress:hover {
  height: 8px;
}

.eu-videoplayer-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.eu-videoplayer-progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ant-blue-5);
  pointer-events: none;
}

.eu-videoplayer-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.eu-videoplayer-progress:hover .eu-videoplayer-progress-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* 控制栏 */
.eu-videoplayer-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ant-padding-xs);
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 控制栏自动隐藏状态 */
.eu-videoplayer-controls-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.eu-videoplayer-controls-left,
.eu-videoplayer-controls-right {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-sm);
  margin-right: var(--ant-margin-xs);
}

/* 控制按钮 */
.eu-videoplayer-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
  position: relative;
}

.eu-videoplayer-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* 播放/暂停按钮 */
.eu-videoplayer-btn-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}

.eu-videoplayer-btn-play.eu-videoplayer-btn-playing::before {
  left: 50%;
  border: none;
  width: 4px;
  height: 16px;
  background: #fff;
  box-shadow: 8px 0 0 #fff;
}

/* 快进/快退按钮 */
.eu-videoplayer-btn-forward::before,
.eu-videoplayer-btn-forward::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

.eu-videoplayer-btn-forward::before { left: 35%; }
.eu-videoplayer-btn-forward::after { left: 50%; }

.eu-videoplayer-btn-backward::before,
.eu-videoplayer-btn-backward::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #fff transparent transparent;
}

.eu-videoplayer-btn-backward::before { left: 20%; }
.eu-videoplayer-btn-backward::after { left: 35%; }

/* 时间显示 */
.eu-videoplayer-time {
  color: #fff;
  font-size: var(--ant-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.eu-videoplayer-time-separator {
  margin: 0 4px;
  opacity: 0.6;
}

/* 音量控制 */
.eu-videoplayer-volume {
  display: flex;
  align-items: center;
  position: relative;
}

.eu-videoplayer-btn-volume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.eu-videoplayer-btn-volume::before,
.eu-videoplayer-btn-volume::after {
  display: none;
}

.eu-videoplayer-btn-volume.eu-videoplayer-btn-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
}

.eu-videoplayer-volume-slider {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin-left: var(--ant-margin-xs);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.eu-videoplayer-volume-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff;
}

.eu-videoplayer-volume-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.eu-videoplayer-volume:hover .eu-videoplayer-volume-handle {
  opacity: 1;
}

/* 倍速选择 */
.eu-videoplayer-rate {
  position: relative;
}

.eu-videoplayer-btn-rate {
  width: auto;
  padding: 0 var(--ant-padding-xs);
  color: #fff;
  font-size: var(--ant-font-size-sm);
}

.eu-videoplayer-rate-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--ant-margin-xs);
  background: rgba(0, 0, 0, 0.9);
  border-radius: var(--ant-border-radius);
  padding: var(--ant-padding-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.eu-videoplayer-rate-menu-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.eu-videoplayer-rate-item {
  padding: var(--ant-padding-xs) var(--ant-padding-md);
  padding-left: var(--ant-padding-lg);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--ant-font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  position: relative;
}

.eu-videoplayer-rate-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.eu-videoplayer-rate-item-active {
  color: var(--ant-blue-5);
  font-weight: 500;
}

/* 选中项前面的勾选标记 */
.eu-videoplayer-rate-item-active::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--ant-blue-5);
  border-bottom: 2px solid var(--ant-blue-5);
}

/* 全屏按钮 */
.eu-videoplayer-btn-fullscreen::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 12px;
  border: 2px solid #fff;
}

.eu-videoplayer-btn-fullscreen::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

/* 自动下一课 (控制栏内联) */
.eu-videoplayer-autonext {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
  margin-left: var(--ant-margin-md);
  padding-left: var(--ant-padding-sm);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--ant-font-size-sm);
}

.eu-videoplayer-autonext-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xxs);
  cursor: pointer;
}

.eu-videoplayer-autonext-checkbox input {
  width: 14px;
  height: 14px;
  accent-color: var(--ant-blue-5);
}

.eu-videoplayer-autonext-countdown {
  position: absolute;
  bottom: 60px;
  right: var(--ant-margin-md);
  padding: var(--ant-padding-xs) var(--ant-padding-sm);
  background: rgba(0, 0, 0, 0.8);
  border-radius: var(--ant-border-radius-sm);
  color: var(--ant-blue-4);
  font-size: var(--ant-font-size-sm);
  white-space: nowrap;
}

.eu-videoplayer-autonext-countdown:empty {
  display: none;
}

/* 在位确认弹窗 */
.eu-videoplayer-presence {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 60;
}

.eu-videoplayer-presence-visible {
  display: flex;
}

.eu-videoplayer-presence-content {
  min-width: 200px;
  text-align: center;
  padding: var(--ant-padding);
  background: var(--ant-color-bg-container);
  border-radius: var(--ant-border-radius-lg);
  box-shadow: var(--ant-box-shadow-secondary);
}

.eu-videoplayer-presence-message {
  margin-bottom: var(--ant-margin);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size-lg);
}

.eu-videoplayer-presence-btn {
  min-width: 80px;
  height: 24px;
  padding: 0 var(--ant-padding-sm);
  border: none;
  border-radius: var(--ant-border-radius-sm);
  background: var(--ant-blue-6);
  color: #fff;
  font-size: var(--ant-font-size-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.eu-videoplayer-presence-btn:hover {
  background: var(--ant-blue-5);
}

.eu-videoplayer-presence-countdown {
  margin-top: var(--ant-margin-xs);
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-sm);
}

/* 全屏模式 */
.eu-videoplayer-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.eu-videoplayer-fullscreen .eu-videoplayer-btn-fullscreen::after {
  top: auto;
  left: auto;
  bottom: 6px;
  right: 6px;
  border-top: none;
  border-left: none;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* 全屏占位符 */
/* 响应式适配 */
@media (max-width: 640px) {
  .eu-videoplayer-controls {
    padding: var(--ant-padding-xs) var(--ant-padding-sm);
  }
  
  .eu-videoplayer-btn {
    width: 28px;
    height: 28px;
  }
  
  .eu-videoplayer-time {
    font-size: 12px;
  }
  
  .eu-videoplayer-volume-slider {
    width: 60px;
  }
  
  .eu-videoplayer-play-btn {
    width: 48px;
    height: 48px;
  }
  
  .eu-videoplayer-play-btn::after {
    border-width: 8px 0 8px 14px;
  }
}

/* ==================== VideoPlayer Light 主题 ==================== */
.eu-videoplayer-light {
  background: var(--ant-color-bg-layout);
}

.eu-videoplayer-light .eu-videoplayer-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.eu-videoplayer-light .eu-videoplayer-play-btn {
  background: var(--ant-color-bg-container);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.eu-videoplayer-light .eu-videoplayer-overlay:hover .eu-videoplayer-play-btn {
  background: #fff;
}

.eu-videoplayer-light .eu-videoplayer-loading-spinner {
  border-color: var(--ant-color-border);
  border-top-color: var(--ant-blue-6);
}

.eu-videoplayer-light .eu-videoplayer-controls {
  background: var(--ant-color-bg-container);
  border-top: 1px solid var(--ant-color-border-secondary);
}

.eu-videoplayer-light .eu-videoplayer-btn-play::before {
  border-color: transparent transparent transparent var(--ant-color-text);
}

/* 暂停状态（双竖线） */
.eu-videoplayer-light .eu-videoplayer-btn-play.eu-videoplayer-btn-playing::before {
  background: var(--ant-color-text);
  box-shadow: 8px 0 0 var(--ant-color-text);
}

/* 快进按钮 */
.eu-videoplayer-light .eu-videoplayer-btn-forward::before,
.eu-videoplayer-light .eu-videoplayer-btn-forward::after {
  border-color: transparent transparent transparent var(--ant-color-text);
}

/* 快退按钮（方向相反） */
.eu-videoplayer-light .eu-videoplayer-btn-backward::before,
.eu-videoplayer-light .eu-videoplayer-btn-backward::after {
  border-color: transparent var(--ant-color-text) transparent transparent;
}

.eu-videoplayer-light .eu-videoplayer-btn-backward span,
.eu-videoplayer-light .eu-videoplayer-btn-forward span {
  color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-time {
  color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-btn-rate {
  color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-rate-menu {
  background: var(--ant-color-bg-elevated);
  border: 1px solid var(--ant-color-border);
  box-shadow: var(--ant-box-shadow);
}

.eu-videoplayer-light .eu-videoplayer-rate-item {
  color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-rate-item:hover {
  background: var(--ant-blue-1);
  color: var(--ant-blue-6);
}

.eu-videoplayer-light .eu-videoplayer-rate-item-active {
  color: var(--ant-blue-6);
  background: var(--ant-blue-1);
}

.eu-videoplayer-light .eu-videoplayer-rate-item-active::before {
  border-right-color: var(--ant-blue-6);
  border-bottom-color: var(--ant-blue-6);
}

.eu-videoplayer-light .eu-videoplayer-btn-volume::before {
  border-color: transparent transparent transparent var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-btn-volume::after {
  border-color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-btn-volume.is-muted::before {
  background: var(--ant-color-text);
}

/* Light 主题音量按钮 SVG 图标 */
.eu-videoplayer-light .eu-videoplayer-btn-volume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}

.eu-videoplayer-light .eu-videoplayer-btn-volume.eu-videoplayer-btn-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
}

.eu-videoplayer-light .eu-videoplayer-volume-slider {
  background: var(--ant-color-border);
}

.eu-videoplayer-light .eu-videoplayer-volume-fill {
  background: var(--ant-blue-6);
}

.eu-videoplayer-light .eu-videoplayer-btn-fullscreen::before,
.eu-videoplayer-light .eu-videoplayer-btn-fullscreen::after {
  border-color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-progress {
  background: var(--ant-color-border);
}

.eu-videoplayer-light .eu-videoplayer-progress-played {
  background: var(--ant-blue-6);
}

.eu-videoplayer-light .eu-videoplayer-progress-handle {
  background: var(--ant-blue-6);
  border-color: #fff;
}

.eu-videoplayer-light .eu-videoplayer-complete-overlay {
  background: var(--ant-color-bg-layout);
}

.eu-videoplayer-light .eu-videoplayer-complete-message {
  color: var(--ant-color-text);
}

.eu-videoplayer-light .eu-videoplayer-autonext-checkbox {
  color: var(--ant-color-text-secondary);
}

.eu-videoplayer-light .eu-videoplayer-autonext-countdown {
  color: var(--ant-color-text-secondary);
}

/* ==================== PDFViewer 组件 ==================== */

.eu-pdfviewer {
  position: relative;
  width: 100%;
  height: 600px;
  background: var(--ant-color-bg-layout);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none;
}

/* 工具栏 */
.eu-pdfviewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ant-padding-xs) var(--ant-padding);
  background: var(--ant-color-bg-container);
  border-bottom: 1px solid var(--ant-color-border-secondary);
  gap: var(--ant-margin);
  flex-shrink: 0;
}

.eu-pdfviewer-toolbar-left,
.eu-pdfviewer-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
}

/* 工具栏按钮 */
.eu-pdfviewer-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  background: var(--ant-color-bg-container);
  color: var(--ant-color-text);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.eu-pdfviewer-btn:hover {
  border-color: var(--ant-blue-6);
  color: var(--ant-blue-6);
}

.eu-pdfviewer-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.eu-pdfviewer-btn:disabled:hover {
  border-color: var(--ant-color-border);
  color: var(--ant-color-text);
}

/* 翻页按钮图标 - 上一页 */
.eu-pdfviewer-btn-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-prev:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* 翻页按钮图标 - 下一页 */
.eu-pdfviewer-btn-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-next:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* 缩放按钮图标 - 缩小 */
.eu-pdfviewer-btn-zoomout {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-zoomout:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}

/* 缩放按钮图标 - 放大 */
.eu-pdfviewer-btn-zoomin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-zoomin:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}

/* 下载按钮图标 */
.eu-pdfviewer-btn-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-download:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* 打印按钮图标 */
.eu-pdfviewer-btn-print {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-print:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}

/* 全屏按钮图标 */
.eu-pdfviewer-btn-fullscreen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}
.eu-pdfviewer-btn-fullscreen:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

/* 页码控件 */
.eu-pdfviewer-pagination {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-xs);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

.eu-pdfviewer-page-input {
  width: 48px;
  height: 28px;
  padding: 0 var(--ant-padding-xs);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  text-align: center;
  font-size: var(--ant-font-size);
  outline: none;
}

.eu-pdfviewer-page-input:focus {
  border-color: var(--ant-blue-6);
  box-shadow: 0 0 0 2px var(--ant-blue-1);
}

.eu-pdfviewer-page-separator {
  color: var(--ant-color-text-secondary);
}

/* 缩放显示 */
.eu-pdfviewer-zoom-value {
  min-width: 48px;
  text-align: center;
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

/* 主容器 */
.eu-pdfviewer-container {
  width: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.eu-pdfviewer-main {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: var(--ant-padding);
  box-sizing: border-box;
}

.eu-pdfviewer-canvas-wrapper {
  position: relative;
  display: inline-block;
  box-shadow: var(--ant-box-shadow);
  background: #fff;
}

.eu-pdfviewer-canvas {
  display: block;
}

/* 水印 */
.eu-pdfviewer-watermark {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  z-index: 10;
  user-select: none;
}

/* 加载指示器 */
.eu-pdfviewer-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 20;
}

.eu-pdfviewer-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ant-color-border);
  border-top-color: #1890ff;
  border-radius: 50%;
  animation: eu-pdfviewer-spin 1s linear infinite;
}

@keyframes eu-pdfviewer-spin {
  to { transform: rotate(360deg); }
}

@keyframes eu-pdfviewer-spin {
  to { transform: rotate(360deg); }
}

/* 警告提示 */
.eu-pdfviewer-warning {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--ant-padding-sm) var(--ant-padding);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: var(--ant-border-radius);
  font-size: var(--ant-font-size);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 30;
}

.eu-pdfviewer-warning-visible {
  opacity: 1;
}

/* 错误提示 */
.eu-pdfviewer-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 35;
}

.eu-pdfviewer-error-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ant-margin-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.eu-pdfviewer-error-text {
  color: #fff;
  font-size: var(--ant-font-size-lg);
  text-align: center;
  padding: 0 var(--ant-padding-lg);
}

/* 锁定遮罩 */
.eu-pdfviewer-lock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 50;
}

.eu-pdfviewer-lock-visible {
  display: flex;
}

.eu-pdfviewer-lock-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ant-margin-md);
  background: var(--ant-red-5);
  border-radius: 50%;
  position: relative;
}

.eu-pdfviewer-lock-icon::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

.eu-pdfviewer-lock-icon::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 22px;
  background: #fff;
  border-radius: var(--ant-border-radius-sm);
}

.eu-pdfviewer-lock-message {
  color: #fff;
  font-size: var(--ant-font-size-lg);
}

/* 在位确认弹窗 */
.eu-pdfviewer-presence {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 60;
}

.eu-pdfviewer-presence-visible {
  display: flex;
}

.eu-pdfviewer-presence-content {
  min-width: 200px;
  text-align: center;
  padding: var(--ant-padding);
  background: var(--ant-color-bg-container);
  border-radius: var(--ant-border-radius-lg);
  box-shadow: var(--ant-box-shadow-secondary);
}

.eu-pdfviewer-presence-message {
  margin-bottom: var(--ant-margin);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size-lg);
}

.eu-pdfviewer-presence-btn {
  min-width: 80px;
  height: 32px;
  padding: 0 var(--ant-padding);
  border: none;
  border-radius: var(--ant-border-radius-sm);
  background: var(--ant-blue-6);
  color: #fff;
  font-size: var(--ant-font-size);
  cursor: pointer;
  transition: background 0.2s;
}

.eu-pdfviewer-presence-btn:hover {
  background: var(--ant-blue-5);
}

.eu-pdfviewer-presence-countdown {
  margin-top: var(--ant-margin-xs);
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-sm);
}

/* 全屏模式 */
.eu-pdfviewer-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.eu-pdfviewer-fullscreen .eu-pdfviewer-toolbar {
  display: flex !important;
  flex-shrink: 0;
}

.eu-pdfviewer-fullscreen .eu-pdfviewer-container {
  height: calc(100vh - 50px) !important;
}

/* 全屏占位符 */
.eu-pdfviewer-placeholder {
  visibility: hidden !important;
}

.eu-videoplayer-placeholder {
  visibility: hidden !important;
}

.eu-pdfviewer-fullscreen .eu-pdfviewer-btn-fullscreen::after {
  top: auto;
  left: auto;
  bottom: 8px;
  right: 8px;
  border-top: none;
  border-left: none;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* 响应式适配 */
@media (max-width: 640px) {
  .eu-pdfviewer-toolbar {
    padding: var(--ant-padding-xs);
    gap: var(--ant-margin-xs);
  }
  
  .eu-pdfviewer-btn {
    width: 28px;
    height: 28px;
  }
  
  .eu-pdfviewer-page-input {
    width: 40px;
    height: 24px;
  }
  
  .eu-pdfviewer-zoom-value {
    min-width: 40px;
    font-size: var(--ant-font-size-sm);
  }
}

/* ==================== PDFViewer Dark 主题 ==================== */
.eu-pdfviewer-dark {
  background: #000;
  border-color: rgba(255, 255, 255, 0.1);
}

.eu-pdfviewer-dark .eu-pdfviewer-toolbar {
  background: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.eu-pdfviewer-dark .eu-pdfviewer-btn {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  background-size: 16px 16px;
  color: #fff;
}

.eu-pdfviewer-dark .eu-pdfviewer-btn:hover {
  border-color: var(--ant-blue-5);
  color: var(--ant-blue-5);
}

.eu-pdfviewer-dark .eu-pdfviewer-btn:disabled {
  opacity: 0.4;
}

.eu-pdfviewer-dark .eu-pdfviewer-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Dark 主题按钮图标 - 上一页 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-prev:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 下一页 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-next:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 缩小 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-zoomout {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-zoomout:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 放大 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-zoomin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-zoomin:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 下载 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-download:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 打印 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-print {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-print:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}

/* Dark 主题按钮图标 - 全屏 */
.eu-pdfviewer-dark .eu-pdfviewer-btn-fullscreen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}
.eu-pdfviewer-dark .eu-pdfviewer-btn-fullscreen:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

.eu-pdfviewer-dark .eu-pdfviewer-pagination {
  color: #fff;
}

.eu-pdfviewer-dark .eu-pdfviewer-page-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.eu-pdfviewer-dark .eu-pdfviewer-page-input:focus {
  border-color: var(--ant-blue-5);
}

.eu-pdfviewer-dark .eu-pdfviewer-zoom-value {
  color: #fff;
}

.eu-pdfviewer-dark .eu-pdfviewer-container {
  background: #1a1a1a;
}

.eu-pdfviewer-dark .eu-pdfviewer-main {
  background: #1a1a1a;
}

.eu-pdfviewer-dark .eu-pdfviewer-loading {
  background: rgba(0, 0, 0, 0.8);
}

.eu-pdfviewer-dark .eu-pdfviewer-loading-spinner {
  border-color: #4a4a4a;
  border-top-color: #1890ff;
}

.eu-pdfviewer-dark .eu-pdfviewer-loading-text {
  color: #fff;
}

.eu-pdfviewer-dark .eu-pdfviewer-warning {
  background: rgba(250, 173, 20, 0.15);
  border-color: var(--ant-gold-6);
  color: var(--ant-gold-6);
}

/* =====================================================
   Section 分组组件
   ===================================================== */

/* 基础容器 */
.eu-section {
  box-sizing: border-box;
  grid-column: 1 / -1;  /* 在 Grid 布局中跨越所有列 */
}

/* 相邻 Section 间距 */
.eu-section + .eu-section {
  margin-top: 16px;
}

/* Section 后面跟 form-item 时，Section 需要下边距 */
.eu-section:has(+ .eu-form-item) {
  margin-bottom: 16px;
}

/* 有边框模式 */
.eu-section-bordered {
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
}

.eu-section-bordered .eu-section-header {
  padding: var(--ant-padding-sm) var(--ant-padding);
  border-bottom: 1px solid var(--ant-color-border);
}

.eu-section-bordered .eu-section-body {
  padding: var(--ant-padding);
}

/* 折叠状态下无下边框 */
.eu-section-bordered.eu-section-collapsed .eu-section-header {
  border-bottom: none;
}

/* 填充模式（浅灰背景，适用于审批表单等只读/历史记录区域） */
.eu-section-filled {
  background: var(--ant-color-fill-quaternary);
  border-radius: var(--ant-border-radius);
}

.eu-section-filled .eu-section-header {
  padding: var(--ant-padding-sm) var(--ant-padding);
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.eu-section-filled .eu-section-body {
  padding: var(--ant-padding);
}

/* 填充模式折叠时无下边框 */
.eu-section-filled.eu-section-collapsed .eu-section-header {
  border-bottom: none;
}

/* Header 区域 */
.eu-section-header {
  display: flex;
  align-items: baseline;
  padding: var(--ant-padding-xs) 0;
  border-bottom: 1px solid var(--ant-color-border);
}

/* 图标 */
.eu-section-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: var(--ant-margin-xs);
}

/* 标题 - 与 Panel 保持一致 */
.eu-section-title {
  font-size: var(--ant-title-font-size);
  font-weight: var(--ant-font-weight-strong);
  color: var(--ant-color-text);
  line-height: 1.5;
}

/* 提示信息 */
.eu-section-hint {
  margin-left: var(--ant-margin-sm);
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
}

/* 折叠箭头 - 参考 Accordion 样式 */
.eu-section-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: var(--ant-border-radius);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 16px 16px;
  transition: transform 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.eu-section-toggle:hover {
  background-color: var(--ant-color-fill-content, rgba(0, 0, 0, 0.06));
}

/* 折叠状态下箭头向右 */
.eu-section-collapsed .eu-section-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%23595959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* Body 区域 */
.eu-section-body {
  padding: var(--ant-padding) 0;
}

/* 注意：折叠状态下 body 的隐藏由 jQuery slideUp/slideDown 控制，不使用 CSS */
/* 这样可以保留动画效果 */

/* 无边框模式下折叠时 body 无 padding */
.eu-section:not(.eu-section-bordered) .eu-section-collapsed .eu-section-body {
  padding: 0;
}

/* =====================================================
   Tag 标签组件
   ===================================================== */

/* CSS 变量定义 */
:root {
  /* filled 变体颜色 */
  --eu-tag-default-bg: #fafafa;
  --eu-tag-default-border: #d9d9d9;
  --eu-tag-default-color: rgba(0, 0, 0, 0.88);
  
  --eu-tag-success-bg: #f6ffed;
  --eu-tag-success-border: #b7eb8f;
  --eu-tag-success-color: #52c41a;
  
  --eu-tag-error-bg: #fff2f0;
  --eu-tag-error-border: #ffccc7;
  --eu-tag-error-color: #ff4d4f;
  
  --eu-tag-warning-bg: #fffbe6;
  --eu-tag-warning-border: #ffe58f;
  --eu-tag-warning-color: #faad14;
  
  --eu-tag-processing-bg: #e6f4ff;
  --eu-tag-processing-border: #91caff;
  --eu-tag-processing-color: #1677ff;
  
  --eu-tag-purple-bg: #f9f0ff;
  --eu-tag-purple-border: #d3adf7;
  --eu-tag-purple-color: #722ed1;
  
  --eu-tag-cyan-bg: #e6fffb;
  --eu-tag-cyan-border: #87e8de;
  --eu-tag-cyan-color: #13c2c2;
  
  --eu-tag-magenta-bg: #fff0f6;
  --eu-tag-magenta-border: #ffadd2;
  --eu-tag-magenta-color: #eb2f96;
  
  --eu-tag-gold-bg: #fffbe6;
  --eu-tag-gold-border: #ffd666;
  --eu-tag-gold-color: #faad14;
  
  --eu-tag-volcano-bg: #fff2e8;
  --eu-tag-volcano-border: #ffbb96;
  --eu-tag-volcano-color: #fa541c;
  
  /* solid 变体颜色 */
  --eu-tag-default-solid: #8c8c8c;
  --eu-tag-success-solid: #52c41a;
  --eu-tag-error-solid: #ff4d4f;
  --eu-tag-warning-solid: #faad14;
  --eu-tag-processing-solid: #1677ff;
  --eu-tag-purple-solid: #722ed1;
  --eu-tag-cyan-solid: #13c2c2;
  --eu-tag-magenta-solid: #eb2f96;
  --eu-tag-gold-solid: #faad14;
  --eu-tag-volcano-solid: #fa541c;
}

/* 基础样式 */
.eu-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 8px;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  border-radius: var(--ant-border-radius-sm);
  cursor: default;
  text-decoration: none;
  transition: all 0.2s;
}

/* 链接标签 */
a.eu-tag {
  cursor: pointer;
}

a.eu-tag:hover {
  opacity: 0.85;
}

/* ===== filled 变体（默认） ===== */
.eu-tag-filled {
  border: 1px solid;
  padding-top: 1px;
  padding-bottom: 1px;
}

.eu-tag-filled.eu-tag-default {
  background-color: var(--eu-tag-default-bg);
  border-color: var(--eu-tag-default-border);
  color: var(--eu-tag-default-color);
}

.eu-tag-filled.eu-tag-success {
  background-color: var(--eu-tag-success-bg);
  border-color: var(--eu-tag-success-border);
  color: var(--eu-tag-success-color);
}

.eu-tag-filled.eu-tag-error {
  background-color: var(--eu-tag-error-bg);
  border-color: var(--eu-tag-error-border);
  color: var(--eu-tag-error-color);
}

.eu-tag-filled.eu-tag-warning {
  background-color: var(--eu-tag-warning-bg);
  border-color: var(--eu-tag-warning-border);
  color: var(--eu-tag-warning-color);
}

.eu-tag-filled.eu-tag-processing {
  background-color: var(--eu-tag-processing-bg);
  border-color: var(--eu-tag-processing-border);
  color: var(--eu-tag-processing-color);
}

.eu-tag-filled.eu-tag-purple {
  background-color: var(--eu-tag-purple-bg);
  border-color: var(--eu-tag-purple-border);
  color: var(--eu-tag-purple-color);
}

.eu-tag-filled.eu-tag-cyan {
  background-color: var(--eu-tag-cyan-bg);
  border-color: var(--eu-tag-cyan-border);
  color: var(--eu-tag-cyan-color);
}

.eu-tag-filled.eu-tag-magenta {
  background-color: var(--eu-tag-magenta-bg);
  border-color: var(--eu-tag-magenta-border);
  color: var(--eu-tag-magenta-color);
}

.eu-tag-filled.eu-tag-gold {
  background-color: var(--eu-tag-gold-bg);
  border-color: var(--eu-tag-gold-border);
  color: var(--eu-tag-gold-color);
}

.eu-tag-filled.eu-tag-volcano {
  background-color: var(--eu-tag-volcano-bg);
  border-color: var(--eu-tag-volcano-border);
  color: var(--eu-tag-volcano-color);
}

/* ===== solid 变体 ===== */
.eu-tag-solid {
  border: none;
  color: #fff;
}

.eu-tag-solid.eu-tag-default {
  background-color: var(--eu-tag-default-solid);
}

.eu-tag-solid.eu-tag-success {
  background-color: var(--eu-tag-success-solid);
}

.eu-tag-solid.eu-tag-error {
  background-color: var(--eu-tag-error-solid);
}

.eu-tag-solid.eu-tag-warning {
  background-color: var(--eu-tag-warning-solid);
}

.eu-tag-solid.eu-tag-processing {
  background-color: var(--eu-tag-processing-solid);
}

.eu-tag-solid.eu-tag-purple {
  background-color: var(--eu-tag-purple-solid);
}

.eu-tag-solid.eu-tag-cyan {
  background-color: var(--eu-tag-cyan-solid);
}

.eu-tag-solid.eu-tag-magenta {
  background-color: var(--eu-tag-magenta-solid);
}

.eu-tag-solid.eu-tag-gold {
  background-color: var(--eu-tag-gold-solid);
}

.eu-tag-solid.eu-tag-volcano {
  background-color: var(--eu-tag-volcano-solid);
}

/* ===== outlined 变体 ===== */
.eu-tag-outlined {
  background-color: transparent;
  border: 1px solid;
  padding-top: 1px;
  padding-bottom: 1px;
}

.eu-tag-outlined.eu-tag-default {
  border-color: var(--eu-tag-default-border);
  color: var(--eu-tag-default-color);
}

.eu-tag-outlined.eu-tag-success {
  border-color: var(--eu-tag-success-color);
  color: var(--eu-tag-success-color);
}

.eu-tag-outlined.eu-tag-error {
  border-color: var(--eu-tag-error-color);
  color: var(--eu-tag-error-color);
}

.eu-tag-outlined.eu-tag-warning {
  border-color: var(--eu-tag-warning-color);
  color: var(--eu-tag-warning-color);
}

.eu-tag-outlined.eu-tag-processing {
  border-color: var(--eu-tag-processing-color);
  color: var(--eu-tag-processing-color);
}

.eu-tag-outlined.eu-tag-purple {
  border-color: var(--eu-tag-purple-color);
  color: var(--eu-tag-purple-color);
}

.eu-tag-outlined.eu-tag-cyan {
  border-color: var(--eu-tag-cyan-color);
  color: var(--eu-tag-cyan-color);
}

.eu-tag-outlined.eu-tag-magenta {
  border-color: var(--eu-tag-magenta-color);
  color: var(--eu-tag-magenta-color);
}

.eu-tag-outlined.eu-tag-gold {
  border-color: var(--eu-tag-gold-color);
  color: var(--eu-tag-gold-color);
}

.eu-tag-outlined.eu-tag-volcano {
  border-color: var(--eu-tag-volcano-color);
  color: var(--eu-tag-volcano-color);
}

/* ===== 无边框模式 ===== */
.eu-tag-borderless {
  border-color: transparent !important;
}

/* ===== 图标 ===== */
.eu-tag-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--ant-margin-xxs);
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== 关闭按钮 ===== */
.eu-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: var(--ant-margin-xxs);
  cursor: pointer;
  border-radius: var(--ant-border-radius-xs);
  transition: all 0.2s;
}

.eu-tag-close::before {
  content: '×';
  font-size: var(--ant-font-size);
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.25);
}

.eu-tag-close:hover::before {
  color: rgba(0, 0, 0, 0.45);
}

.eu-tag-close:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* solid 变体关闭按钮 */
.eu-tag-solid .eu-tag-close::before {
  color: rgba(255, 255, 255, 0.8);
}

.eu-tag-solid .eu-tag-close:hover::before {
  color: #fff;
}

.eu-tag-solid .eu-tag-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ===== 尺寸变体 ===== */
/* small */
.eu-tag-small {
  padding: 1px var(--ant-padding-xxs);
  font-size: var(--ant-font-size-sm);
  line-height: 18px;
}

.eu-tag-small .eu-tag-icon {
  width: 12px;
  height: 12px;
}

.eu-tag-small .eu-tag-close {
  width: 12px;
  height: 12px;
  margin-left: 2px;
}

.eu-tag-small .eu-tag-close::before {
  font-size: var(--ant-font-size-sm);
}

/* large */
.eu-tag-large {
  padding: 5px 10px;
  font-size: var(--ant-font-size);
  line-height: 22px;
}

.eu-tag-large .eu-tag-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.eu-tag-large .eu-tag-close {
  width: 16px;
  height: 16px;
  margin-left: 6px;
}

.eu-tag-large .eu-tag-close::before {
  font-size: var(--ant-font-size-lg);
}

/* 带边框尺寸调整（补偿 1px 边框） */
.eu-tag-small.eu-tag-filled,
.eu-tag-small.eu-tag-outlined {
  padding-top: 0;
  padding-bottom: 0;
}

.eu-tag-large.eu-tag-filled,
.eu-tag-large.eu-tag-outlined {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ===== 相邻标签间距 ===== */
.eu-tag + .eu-tag {
  margin-left: var(--ant-margin-xs);
}

/* ===== Dot 圆点指示器 ===== */
.eu-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--ant-margin-xxs);
  vertical-align: middle;
  background-color: var(--ant-color-text-quaternary);
}

.eu-dot-primary {
  background-color: var(--ant-color-primary);
}

.eu-dot-success {
  background-color: var(--ant-color-success);
}

.eu-dot-warning {
  background-color: var(--ant-color-warning);
}

.eu-dot-danger {
  background-color: var(--ant-color-error);
}

/* ===== Indicator 标记框（小圆角边框容器） ===== */
.eu-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ant-border-radius-sm);
  border: var(--ant-line-width) solid var(--ant-color-border);
  margin-right: var(--ant-margin-xxs);
  vertical-align: middle;
  font-size: var(--ant-font-size-sm);
  font-weight: var(--ant-font-weight-medium);
  flex-shrink: 0;
}

.eu-indicator-primary {
  background-color: var(--eu-tag-processing-bg);
  border-color: var(--eu-tag-processing-border);
  color: var(--eu-tag-processing-color);
}

.eu-indicator-success {
  background-color: var(--eu-tag-success-bg);
  border-color: var(--eu-tag-success-border);
  color: var(--eu-tag-success-color);
}

.eu-indicator-warning {
  background-color: var(--eu-tag-warning-bg);
  border-color: var(--eu-tag-warning-border);
  color: var(--eu-tag-warning-color);
}

.eu-indicator-danger {
  background-color: var(--eu-tag-error-bg);
  border-color: var(--eu-tag-error-border);
  color: var(--eu-tag-error-color);
}

.eu-indicator .eu-dot {
  margin-right: 0;
}

/* =====================================================
   Empty 空状态组件
   ===================================================== */

/* 基础样式 */
.eu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ant-padding-xl) 0;
  text-align: center;
}

/* 图片容器 */
.eu-empty-image {
  margin-bottom: var(--ant-margin-xs);
  line-height: 1;
}

.eu-empty-image svg {
  display: block;
}

.eu-empty-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 默认图片 - SVG 内联 */
.eu-empty-image-default {
  width: 184px;
  height: 152px;
  background-image: url("data:image/svg+xml,%3Csvg width='184' height='152' viewBox='0 0 184 152' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(24 31.67)'%3E%3Cellipse fill-opacity='.8' fill='%23F5F5F7' cx='67.797' cy='106.89' rx='67.797' ry='12.668'/%3E%3Cpath d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z' fill='%23AEB8C2'/%3E%3Cpath d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z' fill='%23F5F5F7' transform='translate(13.56)'/%3E%3Cpath d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344H29.83V4a4 4 0 0 1 4-4z' fill='%23F5F5F7'/%3E%3Cpath d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z' fill='%23DCE0E6'/%3E%3C/g%3E%3Cpath d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z' fill='%23DCE0E6'/%3E%3Cg transform='translate(149.65 15.383)' fill='%23FFF'%3E%3Cellipse cx='20.654' cy='3.167' rx='2.849' ry='2.815'/%3E%3Cpath d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 简单图片 - SVG 内联 */
.eu-empty-image-simple {
  width: 64px;
  height: 41px;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='41' viewBox='0 0 64 41' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(0 1)' fill='none' fill-rule='evenodd'%3E%3Cellipse fill='%23F5F5F5' cx='32' cy='33' rx='32' ry='7'/%3E%3Cg fill-rule='nonzero' stroke='%23D9D9D9'%3E%3Cpath d='M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z'/%3E%3Cpath d='M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z' fill='%23FAFAFA'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 描述文字 */
.eu-empty-description {
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
}

/* 底部操作区 */
.eu-empty-footer {
  margin-top: var(--ant-margin);
}

.eu-empty-footer .l-btn {
  margin: 0 var(--ant-margin-xxs);
}

/* =====================================================
   Result 操作结果组件
   ===================================================== */

/* 基础样式 */
.eu-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(var(--ant-padding-xl) + var(--ant-padding)) var(--ant-padding-xl);
  text-align: center;
}

/* 图标容器 */
.eu-result-icon {
  margin-bottom: var(--ant-margin-lg);
  line-height: 1;
}

.eu-result-icon img {
  display: block;
  max-width: 100%;
  height: auto;
}

.eu-result-icon > span {
  font-size: 72px;
}

/* 状态图标 - 通用样式 */
.eu-result-icon-success,
.eu-result-icon-error,
.eu-result-icon-warning,
.eu-result-icon-info {
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Success 图标 - 绿色勾选 */
.eu-result-icon-success {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z' fill='%2352c41a'/%3E%3C/svg%3E");
}

/* Error 图标 - 红色叉号 */
.eu-result-icon-error {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 460.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z' fill='%23ff4d4f'/%3E%3C/svg%3E");
}

/* Warning 图标 - 橙色感叹号 */
.eu-result-icon-warning {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z' fill='%23faad14'/%3E%3C/svg%3E");
}

/* Info 图标 - 蓝色 i */
.eu-result-icon-info {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z' fill='%231677ff'/%3E%3C/svg%3E");
}

/* 错误页图标 - 通用样式 */
.eu-result-icon-404,
.eu-result-icon-403,
.eu-result-icon-500,
.eu-result-icon-503 {
  width: 250px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 404 图标 */
.eu-result-icon-404 {
  background-image: url("data:image/svg+xml,%3Csvg width='251' height='118' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 117.527h250.22V0H0z'/%3E%3Cpath d='M52.255 93.773H39.397v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772zm40.205 0H79.602v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772z' fill='%23D4D7DC'/%3E%3Cpath d='M179.628 35.717h-60.256V0h60.256v35.717zm-55.644-4.613h51.031V4.613h-51.031v26.491z' fill='%23D4D7DC'/%3E%3Cpath d='M155.965 15.226h-12.57v5.461h12.57v-5.461z' fill='%23D4D7DC'/%3E%3Cpath d='M88.893 36.487h60.247v74.025H88.893z' fill='%23FAFBFC'/%3E%3Cpath d='M149.14 112.82H88.884V34.178h60.256v78.642zm-55.644-4.614h51.031V38.792H93.496v69.414z' fill='%23D4D7DC'/%3E%3Cpath d='M135.227 47.095H103.86v5.46h31.366v-5.46zm0 14.004H103.86v5.461h31.366V61.1zm0 14.004H103.86v5.461h31.366V75.104zm0 14.766H103.86v5.461h31.366V89.87z' fill='%23D4D7DC'/%3E%3Cpath d='M220.858 110.512H17.382v4.613h203.476v-4.613z' fill='%23D4D7DC'/%3E%3C/g%3E%3C/svg%3E");
}

/* 403 图标 - 锁/禁止访问 */
.eu-result-icon-403 {
  background-image: url("data:image/svg+xml,%3Csvg width='251' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 149.5h250.252V0H0z'/%3E%3Cpath d='M52.255 93.773H39.397v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772zm40.205 0H79.602v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772z' fill='%23D4D7DC'/%3E%3Cpath fill='%23FAFBFC' d='M105.277 39.757h59.505v70.767h-59.505z'/%3E%3Cpath d='M164.782 112.831h-59.505V37.449h59.505v75.382zm-54.892-4.614h50.28V42.063h-50.28v66.154z' fill='%23D4D7DC'/%3E%3Cpath d='M151.068 50.367h-31.366v5.461h31.366v-5.461zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.766h-31.366v5.461h31.366v-5.461z' fill='%23D4D7DC'/%3E%3Cpath d='M220.858 110.512H17.382v4.613h203.476v-4.613z' fill='%23D4D7DC'/%3E%3Crect fill='%23FAFBFC' x='168' y='20' width='32' height='38' rx='3'/%3E%3Cpath d='M200 58H168c-1.7 0-3-1.3-3-3V23c0-1.7 1.3-3 3-3h32c1.7 0 3 1.3 3 3v32c0 1.7-1.3 3-3 3zm-32-5h32V23h-32v30z' fill='%23D4D7DC'/%3E%3Cpath d='M184 8c-6.6 0-12 5.4-12 12v5h5v-5c0-3.9 3.1-7 7-7s7 3.1 7 7v5h5v-5c0-6.6-5.4-12-12-12z' fill='%23D4D7DC'/%3E%3Ccircle cx='184' cy='38' r='4' fill='%23D4D7DC'/%3E%3Cpath d='M182 42h4v8h-4z' fill='%23D4D7DC'/%3E%3C/g%3E%3C/svg%3E");
}

/* 500 图标 */
.eu-result-icon-500 {
  background-image: url("data:image/svg+xml,%3Csvg width='251' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 149.5h250.252V0H0z'/%3E%3Cpath d='M52.255 93.773H39.397v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772zm40.205 0H79.602v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772z' fill='%23D4D7DC'/%3E%3Cpath fill='%23FAFBFC' d='M95.026 35.717h59.506v74.807H95.026z'/%3E%3Cpath d='M154.532 112.831H95.026V33.41h59.506v79.421zm-54.893-4.613h50.28V38.023h-50.28v70.195z' fill='%23D4D7DC'/%3E%3Cpath d='M220.858 110.512H17.382v4.613h203.476v-4.613z' fill='%23D4D7DC'/%3E%3Cpath d='M140.818 43.333h-31.366v5.461h31.366v-5.461zm0 14.005h-31.366v5.46h31.366v-5.46zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.766h-31.366v5.46h31.366v-5.46z' fill='%23D4D7DC'/%3E%3Cpath d='M177.5 53c-12.703 0-23-10.297-23-23s10.297-23 23-23 23 10.297 23 23-10.297 23-23 23zm0-4.613c10.162 0 18.387-8.225 18.387-18.387S187.662 11.613 177.5 11.613 159.113 19.838 159.113 30s8.225 18.387 18.387 18.387z' fill='%23D4D7DC'/%3E%3Cpath d='M170 23h15v14h-15z' fill='%23D4D7DC'/%3E%3C/g%3E%3C/svg%3E");
}

/* 503 图标 - 齿轮维护中 */
.eu-result-icon-503 {
  background-image: url("data:image/svg+xml,%3Csvg width='251' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 149.5h250.252V0H0z'/%3E%3Cpath d='M52.255 93.773H39.397v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772zm40.205 0H79.602v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772z' fill='%23D4D7DC'/%3E%3Cpath fill='%23FAFBFC' d='M105.277 39.757h59.505v70.767h-59.505z'/%3E%3Cpath d='M164.782 112.831h-59.505V37.449h59.505v75.382zm-54.892-4.614h50.28V42.063h-50.28v66.154z' fill='%23D4D7DC'/%3E%3Cpath d='M151.068 50.367h-31.366v5.461h31.366v-5.461zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.766h-31.366v5.461h31.366v-5.461z' fill='%23D4D7DC'/%3E%3Cpath d='M220.858 110.512H17.382v4.613h203.476v-4.613z' fill='%23D4D7DC'/%3E%3Cpath d='M183.5 58c-1.1 0-2-.9-2-2v-6h-4c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4v-6c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v6h4c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2h-4v6c0 1.1-.9 2-2 2h-4z' fill='%23D4D7DC'/%3E%3Ccircle cx='185.5' cy='33' r='20' fill='%23FAFBFC' stroke='%23D4D7DC' stroke-width='4'/%3E%3Cpath d='M185.5 15v-5m0 46v-5m-18-18h-5m46 0h-5m-3.7-12.7l3.5-3.5m-32.1 32.1l3.5-3.5m0-25.1l-3.5-3.5m32.1 32.1l-3.5-3.5' stroke='%23D4D7DC' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='185.5' cy='33' r='8' fill='%23D4D7DC'/%3E%3C/g%3E%3C/svg%3E");
}

/* Upgrade 图标 - 上升箭头（系统升级） */
.eu-result-icon > .eu-result-icon-upgrade {
  display: inline-block;
  width: 250px;
  height: 150px;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='251' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 149.5h250.252V0H0z'/%3E%3Cpath d='M52.255 93.773H39.397v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772zm40.205 0H79.602v5.46h4.14v11.152h-4.14v5.461h17.27v-5.46h-4.412V93.772z' fill='%23D4D7DC'/%3E%3Cpath fill='%23FAFBFC' d='M105.277 39.757h59.505v70.767h-59.505z'/%3E%3Cpath d='M164.782 112.831h-59.505V37.449h59.505v75.382zm-54.892-4.614h50.28V42.063h-50.28v66.154z' fill='%23D4D7DC'/%3E%3Cpath d='M151.068 50.367h-31.366v5.461h31.366v-5.461zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.004h-31.366v5.46h31.366v-5.46zm0 14.766h-31.366v5.461h31.366v-5.461z' fill='%23D4D7DC'/%3E%3Cpath d='M220.858 110.512H17.382v4.613h203.476v-4.613z' fill='%23D4D7DC'/%3E%3Ccircle cx='185.5' cy='33' r='23' fill='%23FAFBFC' stroke='%23D4D7DC' stroke-width='4'/%3E%3Cpath d='M185.5 19l-11 13h6.5v15h9V32h6.5z' fill='%23D4D7DC'/%3E%3C/g%3E%3C/svg%3E");
}

/* 标题 */
.eu-result-title {
  margin-bottom: var(--ant-margin-sm);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size-heading-3);
  font-weight: 500;
  line-height: var(--ant-line-height-heading-3);
}

/* 副标题 */
.eu-result-subtitle {
  margin-bottom: var(--ant-margin-lg);
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-lg);
  line-height: var(--ant-line-height);
}

/* 操作区域 */
.eu-result-extra {
  margin-top: var(--ant-margin-lg);
}

.eu-result-extra .l-btn {
  margin: 0 var(--ant-margin-xs);
}

/* 内容区域 */
.eu-result-body {
  margin-top: var(--ant-margin-lg);
  padding: var(--ant-padding-lg) var(--ant-padding-xl);
  background-color: var(--ant-color-bg-layout);
  border-radius: var(--ant-border-radius);
}

/* 页面居中容器 - 用于独立页面展示 Result */
.eu-result-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: var(--ant-padding-lg);
  box-sizing: border-box;
  background-color: var(--ant-color-bg-container);
}

/* =====================================================
   Badge 徽标组件
   ===================================================== */

/* 基础容器 */
.eu-badge {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* 数字徽标 */
.eu-badge-count {
  position: absolute;
  top: 0;
  right: 0;
  z-index: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--ant-font-size-sm);
  font-weight: normal;
  line-height: 20px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--ant-color-error);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
  transition: all 0.3s;
}

/* 数字徽标隐藏 */
.eu-badge-count-hidden {
  display: none;
}

/* 数字变化动画 */
.eu-badge-count-animate {
  animation: eu-badge-zoom 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

@keyframes eu-badge-zoom {
  0% {
    transform: translate(50%, -50%) scale(1);
  }
  50% {
    transform: translate(50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(50%, -50%) scale(1);
  }
}

/* 小尺寸数字徽标 */
.eu-badge-count.eu-badge-small {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 18px;
  border-radius: 9px;
}

/* 小红点 */
.eu-badge-dot {
  position: absolute;
  top: 0;
  right: 0;
  z-index: auto;
  width: 6px;
  height: 6px;
  background-color: var(--ant-color-error);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
  transform: translate(50%, -50%);
}

/* 状态点模式 */
.eu-badge-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: inherit;
  vertical-align: baseline;
}

/* 状态点圆点 */
.eu-badge-status-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

/* 状态点文本 */
.eu-badge-status-text {
  margin-left: var(--ant-margin-xs);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
}

/* 状态点颜色 - 成功 */
.eu-badge-status-success {
  background-color: var(--ant-color-success);
}

/* 状态点颜色 - 错误 */
.eu-badge-status-error {
  background-color: var(--ant-color-error);
}

/* 状态点颜色 - 警告 */
.eu-badge-status-warning {
  background-color: var(--ant-color-warning);
}

/* 状态点颜色 - 默认 */
.eu-badge-status-default {
  background-color: var(--ant-color-text-quaternary);
}

/* 状态点颜色 - 处理中（带动画） */
.eu-badge-status-processing {
  background-color: var(--ant-color-primary);
}

.eu-badge-status-processing::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ant-color-primary);
  border-radius: 50%;
  box-sizing: content-box;
  transform-origin: center center;
  animation: eu-badge-status-processing 1.2s infinite ease-in-out;
}

@keyframes eu-badge-status-processing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* 丝带模式容器 */
.eu-badge-ribbon-wrapper {
  position: relative;
}

/* 丝带 */
.eu-badge-ribbon {
  position: absolute;
  top: 8px;
  z-index: 1;
  height: 24px;
  padding: 2px var(--ant-padding-xxs);
  font-size: var(--ant-font-size-sm);
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
  background-color: var(--ant-color-primary);
}

/* 丝带文本 */
.eu-badge-ribbon-text {
  color: inherit;
}

/* 丝带右上角 */
.eu-badge-ribbon-end {
  right: -7px;
  border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
}

/* 折角 - 右上角丝带 */
.eu-badge-ribbon-end .eu-badge-ribbon-corner {
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px;
  border-color: var(--ant-color-primary-active) transparent transparent var(--ant-color-primary-active);
}

/* 丝带左上角 */
.eu-badge-ribbon-start {
  left: -7px;
  border-radius: 0 var(--ant-border-radius) var(--ant-border-radius) 0;
}

/* 折角 - 左上角丝带 */
.eu-badge-ribbon-start .eu-badge-ribbon-corner {
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px;
  border-color: var(--ant-color-primary-active) var(--ant-color-primary-active) transparent transparent;
}

/* ============================================
   Avatar 用户头像组件
   ============================================ */

/* Design Token 变量 */
:root {
  --ant-avatar-container-size: 32px;
  --ant-avatar-container-size-lg: 40px;
  --ant-avatar-container-size-sm: 24px;
  --ant-avatar-text-font-size: 14px;
  --ant-avatar-text-font-size-lg: 14px;
  --ant-avatar-text-font-size-sm: 14px;
  --ant-avatar-icon-font-size: 18px;
  --ant-avatar-icon-font-size-lg: 24px;
  --ant-avatar-icon-font-size-sm: 14px;
  --ant-avatar-group-border-color: #ffffff;
  --ant-avatar-group-overlapping: -8px;
  --ant-avatar-group-space: 4px;
}

/* 头像容器 */
.eu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-avatar-container-size);
  height: var(--ant-avatar-container-size);
  overflow: hidden;
  font-size: var(--ant-avatar-text-font-size);
  line-height: var(--ant-avatar-container-size);
  color: var(--ant-color-text-light-solid);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background-color: var(--ant-color-primary);
  box-sizing: border-box;
  position: relative;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 圆形头像 */
.eu-avatar-circle {
  border-radius: 50%;
}

/* 方形头像 */
.eu-avatar-square {
  border-radius: var(--ant-border-radius);
}

/* 大尺寸 */
.eu-avatar-lg {
  width: var(--ant-avatar-container-size-lg);
  height: var(--ant-avatar-container-size-lg);
  line-height: var(--ant-avatar-container-size-lg);
}

.eu-avatar-lg.eu-avatar-icon {
  font-size: var(--ant-avatar-icon-font-size-lg);
}

.eu-avatar-lg.eu-avatar-text {
  font-size: var(--ant-avatar-text-font-size-lg);
}

/* 小尺寸 */
.eu-avatar-sm {
  width: var(--ant-avatar-container-size-sm);
  height: var(--ant-avatar-container-size-sm);
  line-height: var(--ant-avatar-container-size-sm);
}

.eu-avatar-sm.eu-avatar-icon {
  font-size: var(--ant-avatar-icon-font-size-sm);
}

.eu-avatar-sm.eu-avatar-text {
  font-size: var(--ant-avatar-text-font-size-sm);
}

/* 图片类型 */
.eu-avatar-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 图标类型 */
.eu-avatar-icon {
  font-size: var(--ant-avatar-icon-font-size);
}

.eu-avatar-icon > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 默认用户图标 - SVG 内联到 CSS */
.eu-avatar-default-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 文字类型 */
.eu-avatar-text {
  position: relative;
}

.eu-avatar-string {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 0 center;
  white-space: nowrap;
}

/* ============================================
   Avatar.Group 头像组样式
   ============================================ */

/* 头像组容器 */
.eu-avatar-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.eu-avatar-group .eu-avatar {
  position: relative;
  transition: all 0.3s;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 头像组可选择状态 */
.eu-avatar-group-selectable .eu-avatar:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 选中状态 - 右下角勾选标记 */
.eu-avatar-selected {
  position: relative;
  overflow: visible !important;
}

.eu-avatar-selected::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  background-color: var(--ant-color-success);
  border: 2px solid #fff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M9.765 3.205a.75.75 0 0 1 .03 1.06l-4.25 4.5a.75.75 0 0 1-1.075.015L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.705 1.704 3.72-3.939a.75.75 0 0 1 1.06-.03z'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  z-index: 1;
}

/* 溢出数量显示 */
.eu-avatar-max {
  background-color: var(--ant-color-fill-secondary);
  color: var(--ant-color-text-secondary);
  font-size: 12px;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.eu-avatar-max:hover {
  background-color: var(--ant-color-fill-tertiary);
  color: var(--ant-color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   FloatButton 悬浮按钮组件
   ============================================ */

/* Design Tokens - 参照 Ant Design FloatButton 样式 */
:root {
  /* 按钮尺寸 - 使用 Ant Design 标准控件尺寸 */
  --ant-float-button-size: var(--ant-control-height-lg);
  --ant-float-button-square-size: auto;
  /* 图标尺寸 - Ant Design: calc(1.5 * var(--ant-icon-font-size)) */
  --ant-float-button-icon-size: calc(1.5 * 14px);
  --ant-float-button-font-size: var(--ant-font-size-sm);
  /* 按钮内部间距 */
  --ant-float-button-content-gap: calc(0.5 * var(--ant-padding-xxs));
  /* 列表内按钮间距 - 紧凑型 0，分离型使用 padding */
  --ant-float-button-list-gap: 0;
  /* 组按钮间距 - 用于分离型组 */
  --ant-float-button-group-gap: var(--ant-padding);
  --ant-float-button-bg: var(--ant-color-bg-container);
  --ant-float-button-color: var(--ant-color-text-secondary);
  --ant-float-button-hover-bg: var(--ant-color-fill-tertiary);
  --ant-float-button-primary-bg: var(--ant-color-primary);
  --ant-float-button-primary-color: var(--ant-color-text-light-solid);
  /* 使用较小的阴影 */
  --ant-float-button-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  --ant-float-button-z-index: 99;
  --ant-float-button-disabled-opacity: 0.65;
  --ant-float-button-list-bg: var(--ant-color-bg-container);
  --ant-float-button-list-radius: var(--ant-border-radius-lg);
  /* 按钮组列表使用较小的阴影 */
  --ant-float-button-list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  /* 徽标样式 - 参照 Badge 组件 */
  --ant-float-button-badge-size: 20px;
  --ant-float-button-badge-font-size: var(--ant-font-size-sm);
  --ant-float-button-badge-bg: var(--ant-color-error);
  --ant-float-button-badge-color: var(--ant-color-text-light-solid);
  --ant-float-button-badge-dot-size: 6px;
  /* 动画时长 */
  --ant-motion-duration-mid: 0.2s;
  --ant-motion-duration-slow: 0.3s;
}

/* FloatButton SVG 图标 */

/* 帮助/问号 - 用于帮助入口、FAQ */
.eu-float-button-icon-question {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'/%3E%3Cpath d='M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 346 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-74-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'/%3E%3Cpath d='M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 346 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-74-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 返回顶部 - 用于长页面快速回到顶部 */
.eu-float-button-icon-backtop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 反馈/评论 - 用于意见反馈、留言 */
.eu-float-button-icon-comment {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zm-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z'/%3E%3Cpath d='M894 345a343.92 343.92 0 0 0-189.4-189.6C649.6 126.5 592.4 111 532.5 111h-1.9c-60 .3-117.3 15.9-172.2 45.3a343.64 343.64 0 0 0-190.1 189.1 344.3 344.3 0 0 0-45.1 172.5c-.3 55.2 12.5 110 37.1 159.1-11.3 31.9-22.7 63.8-34 95.7l-.5 1.4c-13.4 37.8-27.5 77.5 2.1 107.1 26.2 26.1 62.5 18.8 98.2 5.8l1.6-.6c33.8-12.1 67.6-24.2 101.4-36.3 48.5 23.6 102.4 36 157.3 36.3h2c59.9 0 117-14.5 171.8-43.6 52.3-27.8 97.7-68.1 131.9-117.2 35.1-50.3 56.8-107 63.2-165.7a342.16 342.16 0 0 0-43.6-191.9zM746 605c-28.9 41.5-67.7 75.8-112.4 99.3-46.2 24.2-97.3 36.4-152.3 36.4-48.9-.3-97.2-10.9-141.5-31.3l-14.9-7-14.5 5.2c-28.1 10.1-56.2 20.1-84.4 30.1 10.5-29.5 21-59 31.5-88.5l4.6-12.8-6.6-11.8c-21-37.3-32-79-32-121.5.2-47.6 12.2-94.2 34.8-135.6 22.1-40.5 53.6-75.9 91.3-102.6 39-27.6 83.2-46.3 129.6-54.6 48.3-8.7 98.3-5.6 145.1 9.1 45.7 14.3 87.4 38.9 121.7 71.8 33.5 32.2 59.4 71.3 75.4 114.2 16.4 44.1 22.1 91.5 16.6 137.9-6 50-23.8 97.6-51.5 138.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zm-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z'/%3E%3Cpath d='M894 345a343.92 343.92 0 0 0-189.4-189.6C649.6 126.5 592.4 111 532.5 111h-1.9c-60 .3-117.3 15.9-172.2 45.3a343.64 343.64 0 0 0-190.1 189.1 344.3 344.3 0 0 0-45.1 172.5c-.3 55.2 12.5 110 37.1 159.1-11.3 31.9-22.7 63.8-34 95.7l-.5 1.4c-13.4 37.8-27.5 77.5 2.1 107.1 26.2 26.1 62.5 18.8 98.2 5.8l1.6-.6c33.8-12.1 67.6-24.2 101.4-36.3 48.5 23.6 102.4 36 157.3 36.3h2c59.9 0 117-14.5 171.8-43.6 52.3-27.8 97.7-68.1 131.9-117.2 35.1-50.3 56.8-107 63.2-165.7a342.16 342.16 0 0 0-43.6-191.9zM746 605c-28.9 41.5-67.7 75.8-112.4 99.3-46.2 24.2-97.3 36.4-152.3 36.4-48.9-.3-97.2-10.9-141.5-31.3l-14.9-7-14.5 5.2c-28.1 10.1-56.2 20.1-84.4 30.1 10.5-29.5 21-59 31.5-88.5l4.6-12.8-6.6-11.8c-21-37.3-32-79-32-121.5.2-47.6 12.2-94.2 34.8-135.6 22.1-40.5 53.6-75.9 91.3-102.6 39-27.6 83.2-46.3 129.6-54.6 48.3-8.7 98.3-5.6 145.1 9.1 45.7 14.3 87.4 38.9 121.7 71.8 33.5 32.2 59.4 71.3 75.4 114.2 16.4 44.1 22.1 91.5 16.6 137.9-6 50-23.8 97.6-51.5 138.2z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 客服/对话 - 用于在线客服、咨询 */
.eu-float-button-icon-customer {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 添加/加号 - 用于展开菜单的触发按钮 */
.eu-float-button-icon-plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z'/%3E%3Cpath d='M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z'/%3E%3Cpath d='M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 关闭 - 用于收起菜单、关闭操作 */
.eu-float-button-icon-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m563.8 512 262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m563.8 512 262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 编辑 - 用于快捷编辑入口 */
.eu-float-button-icon-edit {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 设置 - 用于快捷设置入口 */
.eu-float-button-icon-setting {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 基础容器 */
/* 按钮基础样式 - 参照 Ant Design .ant-float-btn */
.eu-float-button {
  position: fixed;
  z-index: var(--ant-float-button-z-index);
  right: var(--ant-margin-lg);
  bottom: var(--ant-margin-xxl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--ant-float-button-size);
  min-height: var(--ant-float-button-size);
  height: auto;
  margin: 0;
  padding: var(--ant-padding-xxs) 0;
  background-color: var(--ant-float-button-bg);
  color: var(--ant-float-button-color);
  box-shadow: var(--ant-float-button-shadow);
  cursor: pointer;
  transition: all var(--ant-motion-duration-mid) ease;
  box-sizing: border-box;
  word-break: break-word;
  white-space: normal;
  gap: var(--ant-float-button-content-gap);
}

.eu-float-button:hover {
  background-color: var(--ant-float-button-hover-bg);
}

/* 自定义背景色 - 使用 CSS 变量保留 hover 效果 */
.eu-float-button.eu-float-button-custom-bg {
  background-color: var(--eu-btn-bg);
}

.eu-float-button.eu-float-button-custom-bg:hover {
  background-color: var(--eu-btn-bg);
  filter: brightness(0.9);
}

/* 圆形按钮 */
.eu-float-button-circle {
  border-radius: 50%;
}

/* 方形按钮 - 参照 Ant Design .ant-float-btn-square */
.eu-float-button-square {
  width: auto;
  min-width: var(--ant-float-button-size);
  border-radius: var(--ant-border-radius);
  padding: var(--ant-padding-xxs) var(--ant-padding-xs);
  gap: 0;
}

/* 主要类型 */
.eu-float-button-primary {
  background-color: var(--ant-float-button-primary-bg);
  color: var(--ant-float-button-primary-color);
}

.eu-float-button-primary:hover {
  background-color: var(--ant-color-primary-hover);
}

/* 禁用状态 */
.eu-float-button-disabled {
  cursor: not-allowed;
  opacity: var(--ant-float-button-disabled-opacity);
}

.eu-float-button-disabled:hover {
  background-color: var(--ant-float-button-bg);
}

.eu-float-button-primary.eu-float-button-disabled:hover {
  background-color: var(--ant-float-button-primary-bg);
}

/* 内容区 - 参照 Ant Design .ant-float-btn-content */
.eu-float-button-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--ant-font-size-sm);
}

.eu-float-button-square .eu-float-button-body {
  flex-direction: row;
  gap: var(--ant-margin-xs);
}

/* 图标 - 参照 Ant Design .ant-float-btn-icon */
.eu-float-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-float-button-icon-size);
  height: var(--ant-float-button-icon-size);
  font-size: var(--ant-float-button-icon-size);
  line-height: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 文字 */
.eu-float-button-text {
  font-size: var(--ant-float-button-font-size);
  line-height: 1.2;
  white-space: nowrap;
}

/* 徽标 - 参照 Badge 组件样式 */
.eu-float-button-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  min-width: var(--ant-float-button-badge-size);
  height: var(--ant-float-button-badge-size);
  padding: 0 6px;
  font-size: var(--ant-float-button-badge-font-size);
  font-weight: normal;
  line-height: var(--ant-float-button-badge-size);
  color: var(--ant-float-button-badge-color);
  white-space: nowrap;
  text-align: center;
  background-color: var(--ant-float-button-badge-bg);
  border-radius: calc(var(--ant-float-button-badge-size) / 2);
  box-shadow: 0 0 0 1px #fff;
  box-sizing: border-box;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}

/* 圆形按钮徽标偏移 - 参照 Ant Design */
.eu-float-button-circle .eu-float-button-badge {
  margin-top: calc(0.14644660940672627 * var(--ant-float-button-size));
  margin-right: calc(0.14644660940672627 * var(--ant-float-button-size));
}

/* 方形按钮徽标偏移 */
.eu-float-button-square .eu-float-button-badge {
  margin-top: calc(0.29289321881345254 * var(--ant-border-radius));
  margin-right: calc(0.29289321881345254 * var(--ant-border-radius));
}

/* 小红点 - 参照 Badge 组件 */
.eu-float-button-badge-dot {
  min-width: var(--ant-float-button-badge-dot-size);
  width: var(--ant-float-button-badge-dot-size);
  height: var(--ant-float-button-badge-dot-size);
  padding: 0;
  border-radius: 50%;
}

/* ===== FloatButton.Group - 参照 Ant Design .ant-float-btn-group ===== */

.eu-float-button-group {
  position: fixed;
  z-index: var(--ant-float-button-z-index);
  right: var(--ant-margin-lg);
  bottom: var(--ant-margin-xxl);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  list-style: none;
  gap: var(--ant-float-button-group-gap);
}

/* 按钮组内按钮为相对定位 */
.eu-float-button-group .eu-float-button {
  position: relative;
  inset: auto;
}

/* 垂直方向 */
.eu-float-button-group-vertical {
  flex-direction: column;
}

.eu-float-button-group-vertical .eu-float-button-list {
  flex-direction: column;
}

/* 水平方向 */
.eu-float-button-group-horizontal {
  flex-direction: row;
}

.eu-float-button-group-horizontal .eu-float-button-list {
  flex-direction: row;
}

/* 水平列表按钮圆角调整 */
.eu-float-button-group-horizontal .eu-float-button-list .eu-float-button:first-child {
  border-radius: var(--ant-float-button-list-radius) 0 0 var(--ant-float-button-list-radius);
}

.eu-float-button-group-horizontal .eu-float-button-list .eu-float-button:last-child {
  border-radius: 0 var(--ant-float-button-list-radius) var(--ant-float-button-list-radius) 0;
}

/* 水平列表按钮分隔线调整 */
.eu-float-button-group-horizontal .eu-float-button-list .eu-float-button:not(:last-child)::after {
  top: var(--ant-padding-sm);
  bottom: var(--ant-padding-sm);
  left: auto;
  right: 0;
  width: 1px;
  height: auto;
}

/* 垂直方向位置 */
.eu-float-button-group-top {
  top: var(--ant-margin-lg);
  bottom: auto;
}

.eu-float-button-group-center.eu-float-button-group-vertical {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* 水平方向位置 */
.eu-float-button-group-left {
  left: var(--ant-margin-lg);
  right: auto;
}

.eu-float-button-group-center.eu-float-button-group-horizontal {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* 按钮列表容器 - 参照 Ant Design .ant-float-btn-group-list */
.eu-float-button-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--ant-float-button-list-bg);
  border-radius: var(--ant-float-button-list-radius);
  box-shadow: var(--ant-float-button-list-shadow);
  /* overflow: visible 允许徽标显示在容器外 */
  overflow: visible;
  transition: all var(--ant-motion-duration-slow) ease;
}

/* 列表内的按钮样式 - 紧凑无间隙 */
.eu-float-button-list .eu-float-button {
  position: relative;
  inset: auto;
  box-shadow: none;
  border-radius: 0;
}

/* 列表内第一个按钮圆角 */
.eu-float-button-list .eu-float-button:first-child {
  border-radius: var(--ant-float-button-list-radius) var(--ant-float-button-list-radius) 0 0;
}

/* 列表内最后一个按钮圆角 */
.eu-float-button-list .eu-float-button:last-child {
  border-radius: 0 0 var(--ant-float-button-list-radius) var(--ant-float-button-list-radius);
}

/* 列表只有一个按钮时的圆角 */
.eu-float-button-list .eu-float-button:only-child {
  border-radius: var(--ant-float-button-list-radius);
}

/* 按钮之间的分隔线 */
.eu-float-button-list .eu-float-button:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--ant-color-border-secondary);
}

/* ===== 圆形按钮组特殊样式 - 按钮独立分开 ===== */

/* 圆形按钮组的列表 - 透明背景、无阴影、有间距 */
.eu-float-button-group-circle .eu-float-button-list {
  background-color: transparent;
  box-shadow: none;
  gap: var(--ant-margin);
}

/* 圆形按钮组内的按钮 - 保持圆形、有独立阴影 */
.eu-float-button-group-circle .eu-float-button-list .eu-float-button {
  border-radius: 50%;
  box-shadow: var(--ant-float-button-shadow);
}

/* 圆形按钮组无分隔线 */
.eu-float-button-group-circle .eu-float-button-list .eu-float-button:not(:last-child)::after {
  display: none;
}

/* 水平圆形按钮组 - 覆盖水平列表首尾按钮的方形圆角 */
.eu-float-button-group-circle.eu-float-button-group-horizontal .eu-float-button-list .eu-float-button:first-child,
.eu-float-button-group-circle.eu-float-button-group-horizontal .eu-float-button-list .eu-float-button:last-child {
  border-radius: 50%;
}

/* 列表隐藏状态 - 参照 Ant Design 动画 */
.eu-float-button-list-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--ant-float-button-size));
}

/* 列表展开状态 */
.eu-float-button-list-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 触发按钮 - 独立阴影 */
.eu-float-button-trigger {
  position: relative;
  margin-top: var(--ant-padding);
  box-shadow: var(--ant-float-button-shadow);
}

.eu-float-button-group-horizontal .eu-float-button-trigger {
  margin-top: 0;
  margin-left: var(--ant-padding);
}

/* 触发按钮展开状态图标旋转 - 仅加号图标旋转成 X */
.eu-float-button-trigger-open .eu-float-button-trigger-icon.eu-float-button-icon-plus {
  transform: rotate(45deg);
}

.eu-float-button-trigger .eu-float-button-trigger-icon {
  transition: transform var(--ant-motion-duration-mid) ease;
}

/* ===== FloatButton.BackTop ===== */

.eu-float-button-backtop {
  position: fixed;
  right: var(--ant-margin-lg);
  bottom: var(--ant-margin-lg);
  transition: opacity var(--ant-motion-duration-mid) ease, visibility var(--ant-motion-duration-mid) ease;
}

.eu-float-button-backtop-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   Image 组件
   ============================================ */

:root {
  /* ===== Image 组件变量 ===== */
  --ant-image-preview-bg: rgba(0, 0, 0, 0.45);
  --ant-image-preview-z-index: 1000;
  --ant-image-preview-operation-bg: rgba(0, 0, 0, 0.1);
  --ant-image-preview-operation-color: rgba(255, 255, 255, 0.85);
  --ant-image-preview-operation-hover-color: #fff;
  --ant-image-preview-operation-disabled-color: rgba(255, 255, 255, 0.25);
  --ant-image-preview-operation-size: 18px;
  
  /* 遮罩层 */
  --ant-image-mask-bg: rgba(0, 0, 0, 0.5);
  --ant-image-mask-color: #fff;
  --ant-image-mask-font-size: 14px;
  
  /* 占位/加载 */
  --ant-image-placeholder-bg: #f5f5f5;
  --ant-image-placeholder-color: rgba(0, 0, 0, 0.25);
  
  /* 加载失败 */
  --ant-image-error-bg: #fafafa;
  --ant-image-error-color: rgba(0, 0, 0, 0.25);
  
  /* 工具栏 */
  --ant-image-preview-toolbar-bg: rgb(96, 98, 102);
  --ant-image-preview-toolbar-radius: 22px;
  --ant-image-preview-toolbar-gap: 8px;
  --ant-image-preview-toolbar-padding: 6px 12px;
  
  /* 切换按钮 */
  --ant-image-preview-switch-size: 44px;
  --ant-image-preview-switch-bg: rgba(0, 0, 0, 0.1);
  --ant-image-preview-switch-hover-bg: rgba(0, 0, 0, 0.2);
  
  /* 关闭按钮 */
  --ant-image-preview-close-size: 44px;
  --ant-image-preview-close-bg: transparent;
  --ant-image-preview-close-hover-bg: rgba(255, 255, 255, 0.1);
  
  /* 动画 */
  --ant-image-motion-duration: 0.3s;
  --ant-image-motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ===== Image 图标工具类 ===== */

.eu-icon-rotate-90 {
  transform: rotate(90deg);
}

/* ===== Image 基础样式 ===== */

.eu-image {
  position: relative;
  display: inline-block;
}

.eu-image-wrapper {
  position: relative;
  overflow: hidden;
}

.eu-image-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== Image 加载状态 ===== */

.eu-image-loading .eu-image-img {
  opacity: 0;
}

.eu-image-loaded .eu-image-img {
  opacity: 1;
  transition: opacity var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-loading .eu-image-placeholder {
  display: flex;
}

.eu-image-loaded .eu-image-placeholder {
  display: none;
}

.eu-image-failed .eu-image-img {
  display: none;
}

.eu-image-failed .eu-image-error {
  display: flex;
}

/* ===== Image 占位层 ===== */

.eu-image-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--ant-image-placeholder-bg);
  background-size: cover;
  background-position: center;
}

.eu-image-placeholder-icon {
  color: var(--ant-image-placeholder-color);
  font-size: 24px;
  animation: eu-image-spin 1s linear infinite;
}

@keyframes eu-image-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Image 错误层 ===== */

.eu-image-error {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--ant-image-error-bg);
}

.eu-image-error-icon {
  color: var(--ant-image-error-color);
  font-size: 24px;
}

/* ===== Image 预览遮罩 ===== */ 

.eu-image-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--ant-image-mask-bg);
  color: var(--ant-image-mask-color);
  font-size: var(--ant-image-mask-font-size);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-wrapper:hover .eu-image-mask {
  opacity: 1;
}

.eu-image-mask-icon {
  font-size: 16px;
}

.eu-image-mask-icon svg {
  display: block;
}

/* ===== Image 标题 ===== */

.eu-image-title {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  text-align: center;
  line-height: 1.5;
  word-break: break-word;
}

.eu-image-title-inside {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  text-align: center;
}

/* ===== Preview 预览层 ===== */

.eu-image-preview-root {
  position: fixed;
  inset: 0;
  z-index: var(--ant-image-preview-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-preview-root.eu-image-preview-open {
  opacity: 1;
}

.eu-image-preview-mask {
  position: absolute;
  inset: 0;
  background-color: var(--ant-image-preview-bg);
}

.eu-image-preview-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Preview 图片容器 ===== */

.eu-image-preview-body {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  padding: 32px;
  box-sizing: border-box;
}

.eu-image-preview-img {
  max-width: 100%;
  max-height: calc(100vh - 64px);
  object-fit: contain;
  cursor: grab;
  user-select: none;
  transition: transform var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-preview-moving .eu-image-preview-img {
  cursor: grabbing;
  transition: none;
}

/* ===== Preview 关闭按钮 ===== */

.eu-image-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: var(--ant-image-preview-close-size);
  height: var(--ant-image-preview-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ant-image-preview-toolbar-bg);
  border: none;
  border-radius: 50%;
  color: var(--ant-image-preview-operation-color);
  font-size: var(--ant-image-preview-operation-size);
  cursor: pointer;
  transition: background-color var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-preview-close:hover {
  background-color: var(--ant-image-preview-toolbar-bg);
  color: var(--ant-image-preview-operation-hover-color);
  opacity: 0.9;
  transition: all 0.3s;
}

.eu-image-preview-close-icon svg {
  display: block;
  width: var(--ant-image-preview-operation-size);
  height: var(--ant-image-preview-operation-size);
}

.eu-image-preview-close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Preview 切换按钮 ===== */

.eu-image-preview-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: var(--ant-image-preview-switch-size);
  height: var(--ant-image-preview-switch-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ant-image-preview-toolbar-bg);
  border: none;
  border-radius: 50%;
  color: var(--ant-image-preview-operation-color);
  font-size: 18px;
  cursor: pointer;
  transition: background-color var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-preview-switch:hover {
  background-color: var(--ant-image-preview-toolbar-bg);
  color: var(--ant-image-preview-operation-hover-color);
  opacity: 0.9;
  transition: all 0.3s;
}

.eu-image-preview-switch-left {
  left: 16px;
}

.eu-image-preview-switch-right {
  right: 16px;
}

.eu-image-preview-switch-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.eu-image-preview-switch-icon svg {
  display: block;
  width: var(--ant-image-preview-operation-size);
  height: var(--ant-image-preview-operation-size);
}

.eu-image-preview-switch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Preview 图片计数 ===== */

.eu-image-preview-count {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ant-image-preview-operation-color);
  font-size: 14px;
  user-select: none;
  z-index: 1;
}

/* ===== Preview 标题 ===== */

.eu-image-preview-title {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: 60%;
  padding: 6px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* ===== Preview 工具栏 ===== */

.eu-image-preview-toolbar {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--ant-image-preview-toolbar-gap);
  padding: var(--ant-image-preview-toolbar-padding);
  background-color: var(--ant-image-preview-toolbar-bg);
  border-radius: var(--ant-image-preview-toolbar-radius);
  z-index: 1;
}

.eu-image-preview-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ant-image-preview-operation-color);
  font-size: var(--ant-image-preview-operation-size);
  cursor: pointer;
  transition: color var(--ant-image-motion-duration) var(--ant-image-motion-ease),
              background-color var(--ant-image-motion-duration) var(--ant-image-motion-ease);
}

.eu-image-preview-action:hover {
  color: var(--ant-image-preview-operation-hover-color);
  background-color: rgba(255, 255, 255, 0.1);
}

.eu-image-preview-action-disabled {
  color: var(--ant-image-preview-operation-disabled-color);
  cursor: not-allowed;
  pointer-events: none;
}

.eu-image-preview-action svg {
  display: block;
  width: 1em;
  height: 1em;
}

.eu-image-preview-action span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.eu-image-preview-action span svg {
  width: var(--ant-image-preview-operation-size);
  height: var(--ant-image-preview-operation-size);
}

/* ===== Preview 禁止滚动 ===== */

body.eu-image-preview-body-hidden {
  overflow: hidden;
}

/* ===== ImageGroup 容器 ===== */

.eu-imagegroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eu-imagegroup .eu-image {
  cursor: pointer;
}

/* =========================================================
   Watermark 水印组件
   ========================================================= */

:root {
  /* Watermark 组件变量 */
  --ant-watermark-z-index: 9;
  --ant-watermark-font-size: 16px;
  --ant-watermark-font-family: sans-serif;
  --ant-watermark-font-weight: normal;
  --ant-watermark-color: rgba(0, 0, 0, 0.15);
  --ant-watermark-rotate: -22deg;
  --ant-watermark-gap-x: 100px;
  --ant-watermark-gap-y: 100px;
}

.eu-watermark {
  position: relative;
  overflow: hidden;
}

.eu-watermark-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: var(--ant-watermark-z-index);
  background-repeat: repeat;
}

.eu-watermark-content {
  position: relative;
  z-index: 1;
}

.eu-watermark-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: var(--ant-watermark-z-index);
  background-repeat: repeat;
}

/* =========================================================
   Like 点赞组件
   ========================================================= */

:root {
  /* ===== Like 组件变量 ===== */
  --ant-like-color: var(--ant-color-text-secondary);
  --ant-like-color-active: #ff4d4f;
  --ant-like-color-hover: var(--ant-color-text);
  --ant-like-font-size: 14px;
  --ant-like-icon-size: 16px;
  --ant-like-gap: 4px;
}

.eu-like {
  display: inline-flex;
  align-items: center;
  gap: var(--ant-like-gap);
  font-size: var(--ant-like-font-size);
  color: var(--ant-like-color);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.eu-like:hover:not(.eu-like-disabled):not(.eu-like-active) {
  color: var(--ant-like-color-hover);
}

.eu-like-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.eu-like-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ant-like-icon-size);
  line-height: 1;
}

.eu-like-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.eu-like-count {
  font-size: var(--ant-like-font-size);
  line-height: 1;
}

/* 点击动画 */
@keyframes eu-like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.eu-like-animating .eu-like-icon {
  animation: eu-like-pop 0.3s ease-in-out;
}

/* =========================================================
   PasscodeBox 分格验证码输入组件
   ========================================================= */

:root {
  /* ===== PasscodeBox 组件变量 ===== */
  --ant-passcode-cell-size: 40px;
  --ant-passcode-cell-size-lg: 48px;
  --ant-passcode-cell-size-sm: 32px;
  --ant-passcode-cell-gap: 8px;
  --ant-passcode-font-size: 20px;
  --ant-passcode-font-size-lg: 24px;
  --ant-passcode-font-size-sm: 16px;
  --ant-passcode-border-color: var(--ant-color-border);
  --ant-passcode-border-color-focus: var(--ant-color-primary);
  --ant-passcode-border-color-error: var(--ant-color-error);
  --ant-passcode-border-color-warning: var(--ant-color-warning);
  --ant-passcode-bg-color: var(--ant-color-bg-container);
  --ant-passcode-bg-color-filled: var(--ant-color-fill-tertiary);
  --ant-passcode-text-color: var(--ant-color-text);
  --ant-passcode-border-radius: var(--ant-border-radius);
}

/* 容器 */
.eu-passcode {
  display: inline-flex;
  position: relative;
}

/* 单元格容器 */
.eu-passcode-cells {
  display: flex;
  gap: var(--ant-passcode-cell-gap);
}

/* 单元格基础样式 */
.eu-passcode-cell {
  width: var(--ant-passcode-cell-size);
  height: var(--ant-passcode-cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ant-passcode-font-size);
  font-weight: 500;
  color: var(--ant-passcode-text-color);
  background-color: var(--ant-passcode-bg-color);
  border: 1px solid var(--ant-passcode-border-color);
  border-radius: var(--ant-passcode-border-radius);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* 隐藏输入框 */
.eu-passcode-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  z-index: 1;
}

/* ===== 尺寸变体 ===== */

/* 大尺寸 */
.eu-passcode-lg .eu-passcode-cell {
  width: var(--ant-passcode-cell-size-lg);
  height: var(--ant-passcode-cell-size-lg);
  font-size: var(--ant-passcode-font-size-lg);
}

/* 小尺寸 */
.eu-passcode-sm .eu-passcode-cell {
  width: var(--ant-passcode-cell-size-sm);
  height: var(--ant-passcode-cell-size-sm);
  font-size: var(--ant-passcode-font-size-sm);
}

/* ===== 形态变体 ===== */

/* 有边框（默认） */
.eu-passcode-outlined .eu-passcode-cell {
  border: 1px solid var(--ant-passcode-border-color);
  background-color: var(--ant-passcode-bg-color);
}

/* 无边框 */
.eu-passcode-borderless .eu-passcode-cell {
  border: none;
  background-color: transparent;
  border-bottom: 2px solid var(--ant-passcode-border-color);
  border-radius: 0;
}

/* 填充背景 */
.eu-passcode-filled .eu-passcode-cell {
  border: 1px solid transparent;
  background-color: var(--ant-passcode-bg-color-filled);
}

.eu-passcode-focused .eu-passcode-cell-focus {
  border-color: var(--ant-passcode-border-color-focus);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.eu-passcode-borderless.eu-passcode-focused .eu-passcode-cell-focus {
  border-bottom-color: var(--ant-passcode-border-color-focus);
  box-shadow: none;
}

.eu-passcode-filled.eu-passcode-focused .eu-passcode-cell-focus {
  border-color: var(--ant-passcode-border-color-focus);
  background-color: var(--ant-passcode-bg-color);
}

/* 聚焦格光标动画 */
.eu-passcode-cell-focus::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 24px;
  background-color: var(--ant-passcode-border-color-focus);
  animation: eu-passcode-blink 1s ease-in-out infinite;
}

.eu-passcode-lg .eu-passcode-cell-focus::after {
  height: 28px;
}

.eu-passcode-sm .eu-passcode-cell-focus::after {
  height: 18px;
}

.eu-passcode-cell-filled::after {
  display: none;
}

@keyframes eu-passcode-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 错误状态 */
.eu-passcode-error .eu-passcode-cell {
  border-color: var(--ant-passcode-border-color-error);
}

.eu-passcode-error.eu-passcode-borderless .eu-passcode-cell {
  border-bottom-color: var(--ant-passcode-border-color-error);
}

.eu-passcode-error.eu-passcode-focused .eu-passcode-cell-focus {
  border-color: var(--ant-passcode-border-color-error);
  box-shadow: 0 0 0 2px var(--ant-color-error-bg);
}

/* 警告状态 */
.eu-passcode-warning .eu-passcode-cell {
  border-color: var(--ant-passcode-border-color-warning);
}

.eu-passcode-warning.eu-passcode-borderless .eu-passcode-cell {
  border-bottom-color: var(--ant-passcode-border-color-warning);
}

.eu-passcode-warning.eu-passcode-focused .eu-passcode-cell-focus {
  border-color: var(--ant-passcode-border-color-warning);
  box-shadow: 0 0 0 2px var(--ant-color-warning-bg);
}

/* 禁用状态 */
.eu-passcode-disabled {
  cursor: not-allowed;
}

.eu-passcode-disabled .eu-passcode-cell {
  background-color: var(--ant-color-bg-container-disabled);
  color: var(--ant-color-text-disabled);
  cursor: not-allowed;
}

.eu-passcode-disabled .eu-passcode-input {
  cursor: not-allowed;
}

/* 只读状态：纯文本显示 */
.eu-passcode-readonly {
  display: inline-block;
  vertical-align: middle;
}

.eu-passcode-readonly .eu-passcode-text {
  display: inline-block;
  height: var(--textbox-height-md);
  line-height: var(--textbox-height-md);
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  letter-spacing: 0.5em;
}

.eu-passcode-readonly .eu-passcode-text-empty {
  color: var(--ant-color-text-placeholder);
  letter-spacing: normal;
}

/* 单元格相对定位（用于光标） */
.eu-passcode-cell {
  position: relative;
}

/* =========================================================
   SendcodeButton 发送验证码按钮组件
   ========================================================= */

:root {
  --ant-sendcode-countdown-color: var(--ant-color-text-secondary);
}

/* 基础样式 */
.eu-sendcode {
  display: inline-block;
}

/* 倒计时状态 */
.eu-sendcode-counting {
  color: var(--ant-sendcode-countdown-color) !important;
}

/* =========================================================
   Link 文字链接组件
   ========================================================= */

/* 基础样式 */
.eu-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  margin-right: var(--ant-margin-xs);
}

/* 相邻 link 间距（最后一个不加） */
.eu-link:last-child {
  margin-right: 0;
}

/* 下划线 - hover 时显示 */
.eu-link-underline:hover {
  text-decoration: underline;
}

/* 默认类型（灰色文字） */
.eu-link-default {
  color: var(--ant-color-text);
}

.eu-link-default:hover {
  color: var(--ant-color-primary);
}

/* 主色类型（蓝色） */
.eu-link-primary {
  color: var(--ant-color-primary);
}

.eu-link-primary:hover {
  color: var(--ant-color-primary-hover);
}

/* 成功类型（绿色） */
.eu-link-success {
  color: var(--ant-color-success);
}

.eu-link-success:hover {
  color: var(--ant-color-success-hover);
}

/* 警告类型（橙色） */
.eu-link-warning {
  color: var(--ant-color-warning);
}

.eu-link-warning:hover {
  color: var(--ant-color-warning-hover);
}

/* 危险类型（红色） */
.eu-link-danger {
  color: var(--ant-color-error);
}

.eu-link-danger:hover {
  color: var(--ant-color-error-hover);
}

/* 信息类型（青色） */
.eu-link-info {
  color: var(--ant-color-info);
}

.eu-link-info:hover {
  color: var(--ant-color-info-hover);
}

/* 禁用状态 */
.eu-link-disabled {
  color: var(--ant-color-text-disabled) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.eu-link-disabled:hover {
  text-decoration: none;
}

/* 图标样式 */
.eu-link-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================================================
   ConditionWrap 条件显示容器组件
   ========================================================= */

/* 基础样式 */
.eu-conditionwrap {
  display: block;
}

/* 条件区域项 */
.eu-conditionwrap-item {
  display: none;
}

/* 显示的区域 */
.eu-conditionwrap-item.eu-conditionwrap-active {
  display: block;
}

/* =========================================================
   Form 表单增强组件
   ========================================================= */

:root {
  /* Form 设计变量 */
  --ant-form-item-margin-bottom: var(--ant-margin-lg);
  --ant-form-label-color: var(--ant-color-text);
  --ant-form-label-height: var(--ant-control-height);
  --ant-form-label-font-size: var(--ant-font-size);
  --ant-form-label-mark-margin: var(--ant-margin-xxs);
  --ant-form-label-padding-right: var(--ant-padding-sm);
  --ant-form-label-padding-left: var(--ant-padding-sm);
  --ant-form-label-padding: var(--ant-padding-xs) var(--ant-padding-sm);
  --ant-form-label-padding-compact: var(--ant-padding-xxs) var(--ant-padding-xs);
  --ant-form-label-background: var(--ant-color-fill-quaternary);  /* bordered 模式下标签背景色 */
  --ant-form-control-padding-left: var(--ant-padding-sm);
  --ant-form-control-padding-right: var(--ant-padding-sm);
  --ant-form-control-padding: var(--ant-padding-xs) var(--ant-padding-sm);
  --ant-form-control-padding-compact: var(--ant-padding-xxs) var(--ant-padding-xs);
  --ant-form-hint-color: var(--ant-color-text-tertiary);
  --ant-form-error-color: var(--ant-color-error);
  --ant-form-required-color: var(--ant-color-error);
  --ant-form-optional-color: var(--ant-color-text-tertiary);
  --ant-form-tooltip-color: var(--ant-color-text-tertiary);
  --ant-form-tooltip-size: var(--ant-font-size);
  --ant-form-colon-margin-start: 2px;
  --ant-form-colon-margin-end: var(--ant-margin-xs);
  --ant-form-additional-font-size: var(--ant-font-size-sm);
  --ant-form-additional-margin-top: var(--ant-margin-xxs);
  --ant-form-additional-height: 22px;
  --ant-form-inline-gap: var(--ant-margin-sm);
  --ant-form-column-gap: var(--ant-margin-sm);
  --ant-form-aside-gap: var(--ant-margin-lg);
  --ant-form-aside-width: 150px;
  --ant-form-list-item-gap: var(--ant-margin-xs);
  --ant-form-list-item-padding: var(--ant-padding-xs);
  --ant-form-action-margin-top: var(--ant-margin-lg);
  --ant-form-action-margin-bottom: var(--ant-margin-lg);
}

/* ===== 1. 表单容器 ===== */

/* 防止未初始化时闪烁：声明类隐藏，初始化完成后由 JS 添加 eu-form 类显示 */
.easyui-form:not(.eu-form) {
  visibility: hidden;
}

.eu-form {
  box-sizing: border-box;
}

.eu-form-item {
  margin-bottom: var(--ant-form-item-margin-bottom);
}

.eu-form-item-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* 表单级布局：vertical */
.eu-form-vertical .eu-form-item-row {
  flex-direction: column;
}

/* 字段级布局覆盖 */
.eu-form-item-horizontal .eu-form-item-row {
  flex-direction: row;
}

.eu-form-item-vertical .eu-form-item-row {
  flex-direction: column;
}

.eu-form-item-vertical .eu-form-item-control {
  width: 100%;
}

/* 无标签表单项 */
.eu-form-item-no-label .eu-form-item-label {
  display: none;
}

/* 垂直布局下控件区域撑满宽度 */
.eu-form-vertical .eu-form-item-control {
  width: 100%;
}

.eu-form-inline .eu-form-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ant-form-inline-gap);
}

.eu-form-inline .eu-form-item {
  margin-bottom: 0;
  flex: none;
}

/* 尺寸类 */
.eu-form-small .eu-form-item-label {
  line-height: var(--ant-control-height-sm);
}

.eu-form-small .eu-form-item-control-input {
  min-height: var(--ant-control-height-sm);
}

.eu-form-large .eu-form-item-label {
  line-height: var(--ant-control-height-lg);
}

.eu-form-large .eu-form-item-control-input {
  min-height: var(--ant-control-height-lg);
}

/* 标签对齐（默认左对齐，可切换为右对齐） */
.eu-form-label-right .eu-form-item-label {
  text-align: right;
  justify-content: flex-end;
}

/* 标签换行 */
.eu-form-label-wrap .eu-form-item-label {
  white-space: normal;
  line-height: var(--ant-line-height);
  align-self: center;
  flex-wrap: wrap;
  overflow: visible;
}
.eu-form-label-wrap .eu-form-item-label-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 标签冒号 */
.eu-form-label-colon .eu-form-item-label::after {
  content: ":";
  position: relative;
  margin-inline-start: var(--ant-form-colon-margin-start);
  margin-inline-end: var(--ant-form-colon-margin-end);
  flex-shrink: 0;
}

/* 标签换行 + 冒号：冒号跟随文本流，不作为独立flex项 */
.eu-form-label-wrap.eu-form-label-colon .eu-form-item-label::after {
  display: none;
}
.eu-form-label-wrap.eu-form-label-colon .eu-form-item-label-text::after {
  content: ":";
  margin-inline-start: var(--ant-form-colon-margin-start);
}

/* 禁用状态 */
.eu-form-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* ===== Bordered 变体（表格式边框） ===== */
.eu-form-bordered {
  gap: 0;
}

/* 边框在 body 上，而非 form 上 */
.eu-form-bordered .eu-form-body {
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

.eu-form-bordered .eu-form-item {
  margin-bottom: 0;
  border-bottom: 1px solid var(--ant-color-border);
}

.eu-form-bordered .eu-form-item-row {
  height: 100%;
  min-height: 40px;
  align-items: stretch;
}

.eu-form-bordered .eu-form-item-label {
  background: var(--ant-form-label-background);
  padding: var(--ant-form-label-padding);
  border-right: 1px solid var(--ant-color-border);
  display: flex;
  flex-wrap: nowrap;        /* 防止内部元素换行 */
  align-items: flex-start;  /* 顶部对齐，适应高控件（如多行文本框） */
  white-space: normal;
}

.eu-form-bordered .eu-form-item-label .eu-form-item-tooltip {
  margin-left: var(--ant-form-label-mark-margin);
  margin-top: 10px;
}

.eu-form-bordered .eu-form-item-control {
  padding: var(--ant-form-control-padding);
  display: flex;
  flex-direction: column;     /* 垂直排列：输入框在上，提示/错误在下 */
  justify-content: center;    /* 垂直居中 */
  align-items: stretch;       /* 子元素撑满宽度 */
}

/* Bordered 模式下移除 additional 的负 margin，防止溢出 */
.eu-form-bordered .eu-form-item-additional {
  margin-bottom: 0;
}

.eu-form-bordered .eu-form-item-control-input {
  min-height: auto;
  width: 100%;
}

/* 多列布局（CSS Grid + CSS 变量，支持任意列数） */
/* grid 布局在 .eu-form-body 或 .eu-section-body 上，也支持直接作为容器（如 FormList 内部） */
.eu-form-columns .eu-form-body,
.eu-section-body.eu-form-columns,
.eu-form-columns:not(.eu-form) {
  display: grid;
  grid-template-columns: repeat(var(--form-columns, 1), 1fr);
  gap: 0 var(--ant-form-column-gap);
}

/* form-body 内非 formItem 元素跨所有列 */
.eu-form-columns .eu-form-body > .eu-noticebar,
.eu-form-columns .eu-form-body > .easyui-section,
.eu-form-columns .eu-form-body > .eu-section,
.eu-form-columns .eu-form-body > .easyui-conditionwrap {
  grid-column: 1 / -1;
}

/* Bordered + 多列布局 */
.eu-form-bordered.eu-form-columns {
  gap: 0;
}

.eu-form-bordered.eu-form-columns .eu-form-body {
  gap: 0;
}

.eu-form-bordered.eu-form-columns .eu-form-item {
  border-right: 1px solid var(--ant-color-border);
}

/* 每行最后一个元素：移除右边框（JS 动态计算） */
.eu-form-bordered .eu-form-item.last-in-row {
  border-right: none;
}

/* 最后一行所有元素：移除底边框（JS 动态计算） */
.eu-form-bordered .eu-form-item.last-row {
  border-bottom: none;
}

/* ===== 3. 标签区域 ===== */
.eu-form-item-label {
  flex-shrink: 0;
  width: var(--ant-form-label-width, 100px);
  line-height: var(--ant-form-label-height);
  color: var(--ant-form-label-color);
  font-size: var(--ant-form-label-font-size);
  padding-right: var(--ant-form-label-padding-right);
  text-align: left;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  overflow: hidden;
}

/* 标签文本（不换行，超长省略，flex子项可收缩） */
.eu-form-item-label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-left: var(--ant-form-label-padding-left);
  position: relative;
}

/* 必填标记 */
.eu-form-item-label-text.is-required::before {
  content: '*';
  color: var(--ant-form-required-color);
  position: absolute;
  left: 0;
  top: 2px;
}

/* 可选标记 */
.eu-form-item-optional {
  color: var(--ant-form-optional-color);
  font-size: var(--ant-form-additional-font-size);
  margin-left: var(--ant-form-label-mark-margin);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 提示图标 */
.eu-form-item-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-form-tooltip-size);
  height: var(--ant-form-tooltip-size);
  margin-left: var(--ant-form-label-mark-margin);
  font-size: var(--ant-form-additional-font-size);
  color: var(--ant-form-tooltip-color);
  cursor: help;
  flex-shrink: 0;
  border: 1px solid var(--ant-form-tooltip-color);
  border-radius: 50%;
}

/* ===== 4. 控件区域 ===== */
.eu-form-item-control {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: var(--ant-form-control-padding-right);
}

.eu-form-item-control-input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ant-control-height);
}

/* 表单内控件默认 100% 宽度 */
/* 使用 easyui-form（HTML 声明类）确保选择器始终匹配 */
.eu-form .eu-form-item-control-input > .textbox,
.eu-form .eu-form-item-control-input > .combo,
.eu-form .eu-form-item-control-input > .spinner,
.eu-form .eu-form-item-control-input > .searchbox,
.eu-form .eu-form-item-control-input > .datebox,
.eu-form .eu-form-item-control-input > .datetimebox,
.eu-form .eu-form-item-control-input > .filebox,
.eu-form .eu-form-item-control-input > .tagbox {
  width: 100% !important;
}

/* 内部 input 也需要 100% 宽度 */
.eu-form .eu-form-item-control-input > .textbox > .textbox-text,
.eu-form .eu-form-item-control-input > .combo > .combo-text {
  width: 100% !important;
}

/* ===== 5. 附加信息区域 ===== */
.eu-form-item-additional {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(var(--ant-form-additional-height) * -1);
}

.eu-form-item-hint {
  font-size: var(--ant-form-additional-font-size);
  color: var(--ant-form-hint-color);
  line-height: 1.5;
  margin-top: var(--ant-form-additional-margin-top);
}

.eu-form-item-error {
  font-size: var(--ant-form-additional-font-size);
  color: var(--ant-form-error-color);
  line-height: 1.5;
  margin-top: var(--ant-form-additional-margin-top);
}

/* ===== 6. 状态类 ===== */
.eu-form-item.hidden {
  display: none;
}

.eu-form-item.has-error .eu-form-item-control-input .textbox,
.eu-form-item.has-error .eu-form-item-control-input .combo {
  border-color: var(--ant-form-error-color);
}

/* 有错误时隐藏 hint，只显示 error */
.eu-form-item.has-error .eu-form-item-hint {
  display: none;
}

/* ===== 7. 跨列 ===== */
.eu-form-item[data-colspan="2"] {
  grid-column: span 2;
}

.eu-form-item[data-colspan="3"] {
  grid-column: span 3;
}

.eu-form-item[data-colspan="4"] {
  grid-column: span 4;
}

/* ===== 8. 侧边布局 ===== */
.eu-form-aside-layout {
  display: flex;
  gap: var(--ant-form-aside-gap);
}

.eu-form-aside {
  flex-shrink: 0;
  width: var(--ant-form-aside-width);
}

.eu-form-aside-left {
  order: -1;
}

.eu-form-aside-right {
  order: 1;
}

.eu-form-main {
  flex: 1;
  min-width: 0;
}

/* ===== 9. 操作区 ===== */
.eu-form-action {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;  /* 默认居中 */
}

/* bordered 模式下操作区在边框外部 */
.eu-form-bordered .eu-form-action {
  margin-top: var(--ant-form-action-margin-top);
}

.eu-section + .eu-form-action {
  margin-top: var(--ant-form-action-margin-top);
}

/* 操作区在 form 外部紧跟时，自动添加 margin-top */
.eu-form + .eu-form-action,
.easyui-form + .eu-form-action {
  margin-top: var(--ant-form-action-margin-top);
}

/* 操作区居左（与控件区对齐） */
.eu-form-action-left {
  justify-content: flex-start;
}
.eu-form-action-left::before {
  content: "";
  flex-shrink: 0;
  width: var(--ant-form-label-width, 100px);
}

/* 操作区居右 */
.eu-form-action-right {
  justify-content: flex-end;
  margin-right: var(--ant-form-control-padding-right);
}

/* ===== 10. 动态列表 ===== */
.eu-form-list {
  margin-bottom: var(--ant-form-item-margin-bottom);
}

.eu-form-list-template {
  display: none;
}

/* FormList 表头 */
.eu-form-list-header {
  display: flex;
  align-items: center;
  gap: var(--ant-form-list-item-gap);
  margin-bottom: var(--ant-form-list-item-gap);
  padding: var(--ant-form-list-item-padding);
  background: var(--ant-form-label-background);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
  font-weight: 500;
}

.eu-form-list-header-cell {
  flex: 1;
  min-width: 0;
}

.eu-form-list-header-cell[style*="width"] {
  flex: none;
}

.eu-form-list-header-cell[style*="flex"] {
  flex: unset;
}

.eu-form-list-header-cell.is-required::before {
  content: '*';
  color: var(--ant-color-error);
  margin-right: 8px;
  position: relative;
  top: 2px;
  font-style: normal;
  font-weight: normal;
}

/* FormList 数据行 */
.eu-form-list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ant-form-list-item-gap);
  margin-bottom: var(--ant-form-list-item-gap);
  padding: var(--ant-form-list-item-padding);
  background: var(--ant-color-bg-container);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

.eu-form-list-row-cell {
  flex: none;
  min-width: 0;
}

/* FormList 操作列 */
.eu-form-list-action {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ant-form-label-mark-margin);
  min-height: var(--ant-control-height);
  width: 60px;
}

.eu-form-list-body {
  min-height: 0;
}

.eu-form-list-empty {
  padding: var(--ant-form-item-margin-bottom);
  text-align: center;
  color: var(--ant-color-text-secondary);
  background: var(--ant-color-bg-container);
  border: 1px dashed var(--ant-color-border);
  border-radius: var(--ant-border-radius);
}

.eu-form-list-footer {
  margin-top: var(--ant-form-list-item-gap);
}

.eu-form-list-sort {
  cursor: move;
  color: var(--ant-color-text-tertiary);
  padding: var(--ant-form-label-mark-margin);
}

.eu-form-list-sort:hover {
  color: var(--ant-color-text);
}

.eu-form-list-disabled {
  pointer-events: none;
  opacity: 0.6;
}

.eu-form-list-dragging {
  opacity: 0.5;
  background: var(--ant-color-bg-container-disabled);
}

.eu-form-list-dragover {
  position: relative;
}

.eu-form-list-dragover::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ant-color-primary);
}

.eu-form-list-add .icon-add-item {
  width: 14px;
  height: 14px;
  background-color: var(--ant-color-primary);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z'/%3E%3Cpath d='M256 544a32 32 0 0 1 0-64h512a32 32 0 0 1 0 64H256z'/%3E%3Cpath d='M480 256a32 32 0 0 1 64 0v512a32 32 0 0 1-64 0V256z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z'/%3E%3Cpath d='M256 544a32 32 0 0 1 0-64h512a32 32 0 0 1 0 64H256z'/%3E%3Cpath d='M480 256a32 32 0 0 1 64 0v512a32 32 0 0 1-64 0V256z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.eu-form-list-clear .icon-clear-all {
  width: 14px;
  height: 14px;
  background-color: var(--ant-color-error);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.621922 186.182262h77.242976c25.855992 0 46.498985 20.829993 46.498986 46.544985a46.544985 46.544985 0 0 1-46.754986 46.545986h-185.739942a46.777985 46.777985 0 0 1-46.777985-46.754986V46.778305C93.089971 20.992313 113.919964 0.00032 139.635956 0.00032c25.879992 0 46.545985 20.829993 46.545986 46.499985v70.491978A510.60384 510.60384 0 0 1 511.99984 0.00032c282.762912 0 511.99984 229.236928 511.99984 511.99984s-229.236928 511.99984-511.99984 511.99984S0 794.764072 0 512.00016a46.544985 46.544985 0 0 1 93.089971 0c0 231.353928 187.555941 418.909869 418.909869 418.909869S930.908709 743.353088 930.908709 512.00016 743.353768 93.091291 511.99884 93.091291a417.58187 417.58187 0 0 0-263.376918 93.090971z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.621922 186.182262h77.242976c25.855992 0 46.498985 20.829993 46.498986 46.544985a46.544985 46.544985 0 0 1-46.754986 46.545986h-185.739942a46.777985 46.777985 0 0 1-46.777985-46.754986V46.778305C93.089971 20.992313 113.919964 0.00032 139.635956 0.00032c25.879992 0 46.545985 20.829993 46.545986 46.499985v70.491978A510.60384 510.60384 0 0 1 511.99984 0.00032c282.762912 0 511.99984 229.236928 511.99984 511.99984s-229.236928 511.99984-511.99984 511.99984S0 794.764072 0 512.00016a46.544985 46.544985 0 0 1 93.089971 0c0 231.353928 187.555941 418.909869 418.909869 418.909869S930.908709 743.353088 930.908709 512.00016 743.353768 93.091291 511.99884 93.091291a417.58187 417.58187 0 0 0-263.376918 93.090971z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.eu-form-list-remove .icon-remove-item {
  width: 14px;
  height: 14px;
  background-color: var(--ant-color-error);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 929.28c-112.128 0-217.088-43.52-296.448-122.368-79.36-78.848-122.88-183.808-122.88-294.912 0-111.616 43.52-216.576 122.88-294.912C294.912 138.24 399.872 94.72 512 94.72s217.088 43.52 296.448 122.368c79.36 78.848 122.88 183.808 122.88 294.912 0 111.616-43.52 216.576-122.88 294.912-79.36 78.848-184.32 122.368-296.448 122.368z m0-771.072c-95.232 0-184.32 36.864-251.392 103.936-67.584 66.56-104.448 155.136-104.448 249.856s36.864 183.296 103.936 250.368c67.072 67.072 156.672 103.936 251.392 103.936 95.232 0 184.32-36.864 251.392-103.936 67.072-67.072 103.936-155.648 103.936-250.368s-36.864-183.296-103.936-250.368c-66.56-66.56-155.648-103.424-250.88-103.424z'/%3E%3Cpath d='M725.504 480.256H298.496c-17.92 0-32.256 14.336-32.256 32.256s14.336 32.256 32.256 32.256h427.008c17.92 0 32.256-14.336 32.256-32.256s-14.336-32.256-32.256-32.256z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 929.28c-112.128 0-217.088-43.52-296.448-122.368-79.36-78.848-122.88-183.808-122.88-294.912 0-111.616 43.52-216.576 122.88-294.912C294.912 138.24 399.872 94.72 512 94.72s217.088 43.52 296.448 122.368c79.36 78.848 122.88 183.808 122.88 294.912 0 111.616-43.52 216.576-122.88 294.912-79.36 78.848-184.32 122.368-296.448 122.368z m0-771.072c-95.232 0-184.32 36.864-251.392 103.936-67.584 66.56-104.448 155.136-104.448 249.856s36.864 183.296 103.936 250.368c67.072 67.072 156.672 103.936 251.392 103.936 95.232 0 184.32-36.864 251.392-103.936 67.072-67.072 103.936-155.648 103.936-250.368s-36.864-183.296-103.936-250.368c-66.56-66.56-155.648-103.424-250.88-103.424z'/%3E%3Cpath d='M725.504 480.256H298.496c-17.92 0-32.256 14.336-32.256 32.256s14.336 32.256 32.256 32.256h427.008c17.92 0 32.256-14.336 32.256-32.256s-14.336-32.256-32.256-32.256z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.eu-form-list-remove:hover .icon-remove-item {
  background-color: var(--ant-color-error-hover);
}

/* ============================================
   SideWindow - 侧边窗口组件
   ============================================ */

/* ===== Design Token 变量 ===== */
:root {
  --ant-side-window-width: 500px;
  --ant-side-window-header-padding: var(--ant-padding);
  --ant-side-window-body-padding: var(--ant-padding);
  --ant-side-window-footer-padding-block: var(--ant-padding-xs);
  --ant-side-window-footer-padding-inline: var(--ant-padding);
  --ant-side-window-title-font-size: var(--ant-font-size-lg);
  --ant-side-window-title-font-weight: var(--ant-font-weight-strong);
  --ant-side-window-title-color: var(--ant-color-text);
  --ant-side-window-back-color: var(--ant-color-icon);
    --ant-side-window-back-hover-color: var(--ant-color-icon-hover);
  --ant-side-window-close-size: calc(var(--ant-font-size-lg) + var(--ant-padding-xs));
  --ant-side-window-close-color: var(--ant-color-icon);
  --ant-side-window-close-hover-color: var(--ant-color-icon-hover);
  --ant-side-window-close-hover-bg: var(--ant-color-bg-text-hover);
  --ant-side-window-divider-color: var(--ant-color-border);
  --ant-side-window-border-color: var(--ant-color-split);
  --ant-side-window-bg: var(--ant-color-bg-elevated);
  --ant-side-window-mask-bg: var(--ant-color-bg-mask);
  --ant-side-window-shadow: var(--ant-box-shadow-drawer);
  --ant-side-window-duration: var(--ant-motion-duration-slow);
  --ant-side-window-z-index: 1000;
}

/* ===== 遮罩层 ===== */
.eu-side-window-mask {
  position: fixed;
  inset: 0;
  z-index: var(--ant-side-window-z-index);
  background: var(--ant-side-window-mask-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ant-side-window-duration), visibility var(--ant-side-window-duration);
  pointer-events: none;
}

.eu-side-window-mask-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== 主容器 ===== */
.eu-side-window {
  position: fixed;
  z-index: var(--ant-side-window-z-index);
  display: flex;
  flex-direction: column;
  background: var(--ant-side-window-bg);
  box-shadow: var(--ant-box-shadow-drawer-left);
  transition: transform var(--ant-side-window-duration) cubic-bezier(0.7, 0.3, 0.1, 1);
  pointer-events: auto;
}

.eu-side-window-no-animate {
  transition: none;
}

/* 位置变体 */
.eu-side-window-right {
  top: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  border-top:1px solid var(--ant-side-window-border-color);
}

.eu-side-window-right.eu-side-window-open {
  transform: translateX(0);
}

.eu-side-window-left {
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
  border-top:1px solid var(--ant-side-window-border-color);
}

.eu-side-window-left.eu-side-window-open {
  transform: translateX(0);
}

.eu-side-window-top {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  border-bottom:1px solid var(--ant-side-window-border-color);
}

.eu-side-window-top.eu-side-window-open {
  transform: translateY(0);
}

.eu-side-window-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  border-top:1px solid var(--ant-side-window-border-color);
}

.eu-side-window-bottom.eu-side-window-open {
  transform: translateY(0);
}

/* ===== 头部 ===== */
.eu-side-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--ant-side-window-header-padding);
  border-bottom: 1px solid var(--ant-side-window-border-color);
}

.eu-side-window-header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 12px;
}

.eu-side-window-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

/* 返回按钮 */
.eu-side-window-back {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--ant-side-window-back-color);
  transition: opacity 0.2s;
}

.eu-side-window-back:hover {
  color: var(--ant-side-window-back-hover-color);
}

.eu-side-window-back-icon {
  width: 14px;
  height: 14px;
}

.eu-side-window-back-text {
  font-size: var(--ant-font-size);
}

/* 分隔线 */
.eu-side-window-divider {
  width: 1px;
  height: 24px;
  background: var(--ant-side-window-divider-color);
  flex-shrink: 0;
}

/* 标题 */
.eu-side-window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.eu-side-window-title-icon {
  flex-shrink: 0;
}

.eu-side-window-title-text {
  font-size: var(--ant-side-window-title-font-size);
  font-weight: var(--ant-side-window-title-font-weight);
  color: var(--ant-side-window-title-color);
  line-height: var(--ant-line-height-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eu-side-window-title-extra {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ant-margin-xs);
  font-weight: normal;
}

/* 额外区域 */
.eu-side-window-extra {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 关闭按钮 */
.eu-side-window-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ant-side-window-close-size);
  height: var(--ant-side-window-close-size);
  border-radius: var(--ant-border-radius-sm);
  cursor: pointer;
  color: var(--ant-side-window-close-color);
  transition: all 0.2s;
}

.eu-side-window-close:hover {
  color: var(--ant-side-window-close-hover-color);
  background: var(--ant-side-window-close-hover-bg);
}

.eu-side-window-close-icon {
  width: 16px;
  height: 16px;
}

/* ===== 内容区域 ===== */
.eu-side-window-body {
  flex: 1;
  padding: var(--ant-side-window-body-padding);
  overflow: auto;
  min-height: 0;
}

/* ===== 底部 ===== */
.eu-side-window-footer {
  flex-shrink: 0;
  padding: var(--ant-side-window-footer-padding-block) var(--ant-side-window-footer-padding-inline);
  border-top: 1px solid var(--ant-side-window-border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.eu-side-window-footer-center {
  justify-content: center;
}

.eu-side-window-footer-left {
  justify-content: flex-start;
}

/* ===== 加载状态 ===== */
.eu-side-window-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ant-color-text-secondary);
}

.eu-side-window-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ant-color-error);
}

/* ===== 内置图标 ===== */
.eu-side-window-icon-back {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.eu-side-window-icon-close {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* =====================================================
   ColorPicker 颜色选择器
   ===================================================== */

/* Design Token */
:root {
  --ant-color-picker-width: 240px;
  --ant-color-picker-sidebar-width: 220px;
  --ant-color-picker-sidebar-max-height: 280px;
  --ant-color-picker-panel-padding: 12px;
  --ant-color-picker-trigger-size: 32px;
  --ant-color-picker-trigger-size-sm: 24px;
  --ant-color-picker-trigger-size-lg: 40px;
  --ant-color-picker-palette-height: 160px;
  --ant-color-picker-slider-height: 12px;
  --ant-color-picker-slider-radius: 6px;
  --ant-color-picker-preset-color-size: 26px;
  --ant-color-picker-preset-gap: 10px;
  --ant-color-picker-bg: var(--ant-color-bg-elevated);
  --ant-color-picker-border-color: var(--ant-color-border);
  --ant-color-picker-shadow: var(--ant-box-shadow-secondary);
}

/* 触发器 */
.eu-colorpicker {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.eu-colorpicker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  line-height: var(--ant-line-height);
  border: 1px solid var(--ant-color-picker-border-color);
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-bg-container);
  cursor: pointer;
  transition: all 0.2s;
}

.eu-colorpicker-trigger:hover {
  border-color: var(--ant-color-primary);
}

.eu-colorpicker-open .eu-colorpicker-trigger {
  border-color: var(--ant-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--ant-color-primary-rgb), 0.1);
}

.eu-colorpicker-color {
  width: var(--ant-color-picker-trigger-size);
  height: 22px;
  border-radius: var(--ant-border-radius-sm);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
  background-size: 8px 8px;
  position: relative;
  overflow: hidden;
}

.eu-colorpicker-color::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
}

.eu-colorpicker-text {
  font-size: var(--ant-font-size);
  color: var(--ant-color-text);
  font-family: var(--ant-font-family-code);
}

/* 尺寸变体 */
.eu-colorpicker-sm .eu-colorpicker-color {
  width: var(--ant-color-picker-trigger-size-sm);
  height: 18px;
}

.eu-colorpicker-lg .eu-colorpicker-color {
  width: var(--ant-color-picker-trigger-size-lg);
  height: 28px;
}

/* 禁用状态 */
.eu-colorpicker-disabled {
  cursor: not-allowed;
}

.eu-colorpicker-disabled .eu-colorpicker-trigger {
  background: var(--ant-color-bg-container-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.eu-colorpicker-disabled .eu-colorpicker-trigger:hover {
  border-color: var(--ant-color-picker-border-color);
}

/* 只读状态：颜色块 + 颜色值文本，不可点击 */
.eu-colorpicker-readonly {
  cursor: default;
}

.eu-colorpicker-readonly .eu-colorpicker-trigger {
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  height: var(--textbox-height-md);
  line-height: var(--textbox-height-md);
}

.eu-colorpicker-readonly .eu-colorpicker-trigger:hover {
  border-color: transparent;
}

.eu-colorpicker-readonly .eu-colorpicker-color {
  flex-shrink: 0;
}

.eu-colorpicker-readonly .eu-colorpicker-text {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

/* 面板 - 基于 tooltip 实现 */
.eu-colorpicker-tooltip.tooltip {
  padding: 0 !important;
  background: var(--ant-color-bg-elevated) !important;
  border-radius: var(--ant-border-radius-lg) !important;
  box-shadow: var(--ant-color-picker-shadow) !important;
}

.eu-colorpicker-tooltip .tooltip-arrow {
  display: none;
}

							
									   
 

.eu-colorpicker-panel-inner {
  padding: var(--ant-color-picker-panel-padding);
}

/* 左右分栏布局 */
.eu-colorpicker-panel-with-sidebar {
  display: flex;
  gap: 12px;
}

.eu-colorpicker-panel-left {
  width: var(--ant-color-picker-sidebar-width);
  max-height: var(--ant-color-picker-sidebar-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--ant-color-border-secondary);
}

/* 左侧滚动条样式 */
.eu-colorpicker-panel-left::-webkit-scrollbar {
  width: 4px;
}

.eu-colorpicker-panel-left::-webkit-scrollbar-thumb {
  background: var(--ant-color-fill-secondary);
  border-radius: 2px;
}

.eu-colorpicker-panel-left::-webkit-scrollbar-thumb:hover {
  background: var(--ant-color-fill-tertiary);
}

.eu-colorpicker-panel-right {
  flex: 1;
  min-width: 0;
  width: var(--ant-color-picker-width);
}

/* 色板 */
.eu-colorpicker-palette {
  position: relative;
  width: 100%;
  height: var(--ant-color-picker-palette-height);
  border-radius: var(--ant-border-radius-sm);
  overflow: hidden;
  cursor: crosshair;
}

.eu-colorpicker-palette-layer-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.eu-colorpicker-palette-layer-black {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.eu-colorpicker-palette-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 滑块区 */
.eu-colorpicker-sliders {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.eu-colorpicker-slider-hue,
.eu-colorpicker-slider-alpha {
  position: relative;
  height: var(--ant-color-picker-slider-height);
  border-radius: var(--ant-color-picker-slider-radius);
  cursor: pointer;
}

.eu-colorpicker-slider-hue {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.eu-colorpicker-slider-alpha {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
  background-size: 8px 8px;
}

.eu-colorpicker-slider-alpha .eu-colorpicker-slider-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.eu-colorpicker-slider-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 输入区 */
.eu-colorpicker-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.eu-colorpicker-preview {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
  background-size: 8px 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.eu-colorpicker-preview-color {
  display: block;
  width: 100%;
  height: 100%;
}

.eu-colorpicker-input-group {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 格式选择器 */
.eu-colorpicker-format-select {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.eu-colorpicker-format-select:hover {
  border-color: var(--ant-color-primary);
}

.eu-colorpicker-format-value {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text);
  margin-right: 4px;
}

.eu-colorpicker-format-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--ant-color-text-tertiary);
}

.eu-colorpicker-format-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--ant-color-bg-elevated);
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  box-shadow: var(--ant-box-shadow-secondary);
  z-index: 10;
  display: none;
}

.eu-colorpicker-format-open .eu-colorpicker-format-dropdown {
  display: block;
}

.eu-colorpicker-format-open .eu-colorpicker-format-arrow {
  border-top: none;
  border-bottom: 4px solid var(--ant-color-text-tertiary);
}

.eu-colorpicker-format-option {
  padding: 4px 8px;
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text);
  cursor: pointer;
}

.eu-colorpicker-format-option:hover {
  background: var(--ant-color-fill-tertiary);
}

/* 颜色值输入框 */
.eu-colorpicker-input-value {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  font-size: var(--ant-font-size-sm);
  font-family: var(--ant-font-family-code);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s;
}

.eu-colorpicker-input-value:focus {
  border-color: var(--ant-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--ant-color-primary-rgb), 0.1);
}

/* 透明度输入框 */
.eu-colorpicker-input-alpha {
  flex-shrink: 0;
}

.eu-colorpicker-alpha-value {
  width: 50px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--ant-border-radius-sm);
  font-size: var(--ant-font-size-sm);
  font-family: var(--ant-font-family-code);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s;
}

.eu-colorpicker-alpha-value:focus {
  border-color: var(--ant-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--ant-color-primary-rgb), 0.1);
}

				  
						
.eu-colorpicker-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ant-color-border-secondary);
}

.eu-colorpicker-preset-label {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
  margin-bottom: 8px;
}

.eu-colorpicker-preset-colors,
.eu-colorpicker-history-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ant-color-picker-preset-gap);
}

.eu-colorpicker-preset-color {
  width: var(--ant-color-picker-preset-color-size);
  height: var(--ant-color-picker-preset-color-size);
  border-radius: var(--ant-border-radius-sm);
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.eu-colorpicker-preset-color:hover {
  transform: scale(1.1);
}

.eu-colorpicker-preset-group + .eu-colorpicker-preset-group {
  margin-top: 12px;
}

/* ==================== Dropdown 下拉菜单 ==================== */

/* Design Token */
:root {
  --ant-dropdown-bg: var(--ant-color-bg-elevated);
  --ant-dropdown-shadow: var(--ant-box-shadow-secondary);
  --ant-dropdown-border-radius: var(--ant-border-radius-lg);
  --ant-dropdown-padding: var(--ant-padding-xxs);
  --ant-dropdown-item-height: var(--ant-control-height);
  --ant-dropdown-item-padding: var(--ant-padding-xs) var(--ant-padding-sm);
  --ant-dropdown-item-color: var(--ant-color-text);
  --ant-dropdown-item-hover-bg: var(--ant-color-bg-text-hover);
  --ant-dropdown-item-disabled-color: var(--ant-color-text-disabled);
  --ant-dropdown-divider-color: var(--ant-color-split);
  --ant-dropdown-divider-margin: var(--ant-margin-xxs) 0;
}

/* 触发器 */
.eu-dropdown {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.eu-dropdown-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 触发器右侧箭头 */
.eu-dropdown-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 16px;
  vertical-align: middle;
  transition: transform 0.2s;
}

.eu-dropdown-arrow svg {
  display: block;
}

/* tooltip 容器 */
.eu-dropdown-tooltip.tooltip {
  padding: 0 !important;
  background: var(--ant-dropdown-bg) !important;
  border: none !important;
  border-radius: var(--ant-dropdown-border-radius) !important;
  box-shadow: var(--ant-dropdown-shadow) !important;
}

/* 连接区域：解决 hover 模式下鼠标移到面板时间隙问题 */
.eu-dropdown-tooltip.tooltip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  top: -12px;
}

/* 不同方向的连接区域 */
.eu-dropdown-tooltip.tooltip-top::before {
  top: auto;
  bottom: -12px;
}

.eu-dropdown-tooltip.tooltip-left::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: -12px;
  width: 12px;
  height: auto;
}

.eu-dropdown-tooltip.tooltip-right::before {
  top: 0;
  bottom: 0;
  left: -12px;
  right: auto;
  width: 12px;
  height: auto;
}

.eu-dropdown-tooltip .tooltip-arrow {
  display: none;
}

.eu-dropdown-menu-arrow .tooltip-arrow {
  display: block;
}

.eu-dropdown-tooltip .tooltip-content {
  padding: 0;
}

/* 菜单容器 */
.eu-dropdown-menu {
  padding: var(--ant-dropdown-padding);
  min-width: 120px;
}

/* 菜单项 */
.eu-dropdown-item {
  display: flex;
  align-items: center;
  height: var(--ant-dropdown-item-height);
  padding: var(--ant-dropdown-item-padding);
  color: var(--ant-dropdown-item-color);
  border-radius: var(--ant-border-radius);
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.eu-dropdown-item:hover {
  background: var(--ant-dropdown-item-hover-bg);
}

/* 禁用状态 */
.eu-dropdown-item-disabled {
  color: var(--ant-dropdown-item-disabled-color);
  cursor: not-allowed;
}

.eu-dropdown-item-disabled:hover {
  background: transparent;
}

/* 图标 */
.eu-dropdown-item-icon {
  margin-right: var(--ant-margin-xs);
  font-size: 14px;
  line-height: 1;
}

/* 文字 */
.eu-dropdown-item-text {
  flex: 1;
}

/* 分割线 */
.eu-dropdown-divider {
  height: 1px;
  margin: var(--ant-dropdown-divider-margin);
  background: var(--ant-dropdown-divider-color);
}

/* 空状态 */
.eu-dropdown-empty {
  padding: var(--ant-dropdown-item-padding);
  color: var(--ant-color-text-disabled);
  text-align: center;
}

/* ========================================
 * Loading 加载组件
 * ======================================== */

/* CSS 变量 */
:root {
  --ant-loading-spinner-size: 32px;
  --ant-loading-spinner-size-sm: 20px;
  --ant-loading-spinner-size-lg: 40px;
  --ant-loading-color: var(--ant-color-text);
  --ant-loading-color-primary: var(--ant-color-primary);
  --ant-loading-color-success: var(--ant-color-success);
  --ant-loading-color-warning: var(--ant-color-warning);
  --ant-loading-color-error: var(--ant-color-error);
  --ant-loading-text-color: var(--ant-color-text);
  --ant-loading-text-font-size: var(--ant-font-size);
  --ant-loading-text-margin-top: var(--ant-margin-xs);
  --ant-loading-bg-light: var(--ant-color-bg-mask-light);
  --ant-loading-bg-dark: rgba(0, 0, 0, 0.45);
  --ant-loading-progress-width: 3px;
  --ant-loading-z-index: 2000;
  --ant-loading-animation-duration: 0.8s;
  --ant-loading-fade-duration: 200;
}

/* 容器 */
.eu-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ant-loading-z-index);
}

/* 全局模式 */
.eu-loading-global {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ant-loading-z-index);
}

/* 全屏模式（局部） */
.eu-loading-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ant-loading-z-index);
}

/* 遮罩层 */
.eu-loading-mask {
  pointer-events: auto;
}

.eu-loading-mask-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ant-loading-bg-light);
}

/* 内容容器 */
.eu-loading-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 图标容器 */
.eu-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ant-loading-color);
}

/* 提示文字 */
.eu-loading-text {
  margin-top: var(--ant-loading-text-margin-top);
  color: var(--ant-loading-text-color);
  font-size: var(--ant-loading-text-font-size);
  text-align: center;
}

/* 尺寸变体 */
.eu-loading-small .eu-loading-spinner {
  width: var(--ant-loading-spinner-size-sm);
  height: var(--ant-loading-spinner-size-sm);
}

.eu-loading-default .eu-loading-spinner {
  width: var(--ant-loading-spinner-size);
  height: var(--ant-loading-spinner-size);
}

.eu-loading-large .eu-loading-spinner {
  width: var(--ant-loading-spinner-size-lg);
  height: var(--ant-loading-spinner-size-lg);
}

/* large + dot 组合时，文字上边距增大 */
.eu-loading-large .eu-loading-content:has(.eu-loading-icon-dot) .eu-loading-text {
  margin-top: 12px;
}

/* 深色背景时，图标和文字使用浅色 */
.eu-loading-bg-dark .eu-loading-spinner,
.eu-loading-bg-dark .eu-loading-text,
.eu-loading-bg-dark .eu-loading-progress-ring {
  color: rgba(255, 255, 255, 0.85);
}

/* ========== circle 图标 ========== */
@keyframes eu-loading-circle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.eu-loading-circle-svg {
  width: 100%;
  height: 100%;
  animation: eu-loading-circle-rotate 2s linear infinite;
}

.eu-loading-circle-track {
  stroke: currentColor;
  opacity: 0.2;
}

.eu-loading-circle-value {
  stroke-linecap: round;
  animation: eu-loading-circle-dash 1.5s ease-in-out infinite;
}

@keyframes eu-loading-circle-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

/* ========== dot 图标 ========== */
@keyframes eu-loading-dot-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.eu-loading-icon-dot {
  display: inline-flex;
  flex-wrap: wrap;
  width: 1em;
  height: 1em;
  gap: 2px;
  animation: eu-loading-dot-rotate 1.2s linear infinite;
}

.eu-loading-dot {
  width: calc(50% - 1px);
  height: calc(50% - 1px);
  background: currentColor;
  border-radius: 50%;
}

/* 四个点不同透明度形成渐变追逐效果 */
.eu-loading-dot:nth-child(1) {
  opacity: 1;
}

.eu-loading-dot:nth-child(2) {
  opacity: 0.75;
}

.eu-loading-dot:nth-child(3) {
  opacity: 0.6;
}

.eu-loading-dot:nth-child(4) {
  opacity: 0.4;
}

/* ========== 进度模式 ========== */
.eu-loading-progress-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.eu-loading-progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.eu-loading-progress-track {
  stroke: currentColor;
  opacity: 0.2;
}

.eu-loading-progress-value {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.eu-loading-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7em;
  font-weight: 500;
  color: currentColor;
}

/* ========== 按钮 loading 模式 ========== */
.l-btn-loading {
  pointer-events: none;
}

/* 图标位置的 spinner 容器 */
.eu-loading-btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-image: none !important;
}

.eu-loading-btn-spinner {
  width: 16px;
  height: 16px;
  animation: eu-loading-circle-rotate 1s linear infinite;
}

.eu-loading-btn-spinner-track {
  stroke: currentColor;
  opacity: 0.2;
}

.eu-loading-btn-spinner-value {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0;
  animation: eu-loading-circle-dash 1.5s ease-in-out infinite;
}

/* 无图标时插入的 spinner */
.eu-loading-btn-spinner-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
  margin-right: 8px;
  width: 16px;
  height: 16px;
}