/* ========== Accordion/Accordion.css ========== */
    /* 禁止双击选中文本 */
Accordion *{
    user-select:   none;
    -moz-user-select:   none;
}
Accordion {
    display: block;
    padding: 0;
}
Accordion Menus {
    display: block;
    line-height: 45px;
    position: relative;
    width: 100%;
    color: #777;
    height: 45px;
    overflow:hidden;
    transition: height 0.35s ease-in-out;
}
Accordion Menus Titles icon{
    float: left; 
    font-size: 22px;
    margin-right: 12px;
}
Accordion Menus Titles .DropDownIcon {
    float: right;
    font-size: 13px;
    transform: rotate(90deg);
    transition: transform .2s;
}
Accordion Menus:not([open]) Titles .DropDownIcon {
    transform: rotate(0deg);
}
Accordion Menus Titles {
    /* 容器缩小到文字大小 */
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    transition: all .3s ease 0s;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 3px solid transparent;
}
Accordion Menus Titles:hover {
    background-color: rgba(0,0,0,.03)
}
Accordion Menus Options{
    display: block;
    cursor: pointer;
    line-height: 45px;
    padding-left: 18px;
    padding-right: 18px;
    transition: all .3s ease 0s;
} 
Accordion Menus Options:hover,/*鼠标经过样式*/
Accordion Menus Options:focus{/*点击后样式保持*/
    background-color: rgba(0,0,0,.02)
}
Accordion Menus Options icon{
    color: rgba(0,0,0,.3);
    font-size: 15px;
    margin-left: 10px;
    margin-right: 15px;
    transition: all .3s ease 0s;
} 
Accordion Menus Options:hover icon,/*鼠标经过样式*/
Accordion Menus Options:focus icon{/*点击后样式保持*/
    margin-left: 15px;
    margin-right: 10px;
}
Accordion Menus[open] Titles {
    background-color: rgba(0,0,0,.05)
}
/*------------------------------------------------------------------------------------------------------------------------
  Title ：样式定义
  Digest：在基础样式上设置更多风格的样式
/------------------------------------------------------------------------------------------------------------------------*/
Accordion.Dark Menus {
    color: rgba(255,255,255,.4);
}
Accordion.Dark Menus Titles:hover {
    color: rgba(255,255,255,.7);
}
Accordion.Dark Menus[open] Titles {
    color: rgba(255,255,255,.7);
    /*border-radius: 8px;*/
    background-image: linear-gradient(90deg, rgba(59,125,221,.12), rgba(255,255,255,0));
    background-color: rgba(0,0,0,0);
    border-left: 3px solid #3b7ddd;
}
Accordion.Dark Menus Options icon{
    color: rgba(255,255,255,.4);
} 
Accordion.Dark Menus Options[open],
Accordion.Dark Menus Options:hover,/*鼠标经过样式*/
Accordion.Dark Menus Options:focus{/*点击后样式保持*/
    background-color: rgba(0,0,0,.03);
    color: #3b7ddd;
} 


/* ========== Animation/Animation.css ========== */
.Animation-Rotate{
  display: inline-block;
	animation: Rotate .5s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
}
		
@keyframes Rotate{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}

/* ========== Anui/Anui.css ========== */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
 
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}
 
::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
 
::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
 
::-webkit-scrollbar-corner {
	background: transparent;
}


/* 始终保留滚动条空间 */
.ScrollbarHoverShow::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

/* 默认完全透明（但占位） */
.ScrollbarHoverShow::-webkit-scrollbar-track,
.ScrollbarHoverShow::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
  background-clip: content-box;
}

.ScrollbarHoverShow::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: none; /* 关键：移除默认阴影 */
}

.ScrollbarHoverShow::-webkit-scrollbar-thumb {
  min-height: 20px;
  background: transparent; /* 滑块背景透明 */
  box-shadow: none; /* 关键：移除 inset 阴影 */
}

/* 悬停时恢复样式 */
.ScrollbarHoverShow:hover::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.15) inset;
}

.ScrollbarHoverShow:hover::-webkit-scrollbar-thumb {
  box-shadow: 0 0 0 5px rgba(0,0,0,.12) inset;
}

.ScrollbarHoverShow::-webkit-scrollbar-corner {
  background: transparent;
}

	
body{
    width: 100%;
    font-family: "微软雅黑";/*全局字体设置为 微软雅黑*/
    font-size: 15px;/*全局字体设置为15px*/
    margin: 0;
    padding: 0;
    overflow-x: hidden;/*隐藏横向滚动条*/
    position: relative;
}
	
	a{
		text-decoration:none;/*去除标签下划线*/
		color: inherit;/*a标签从父元素继承颜色*/
	}
	a:link    {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover   {text-decoration:none;}
    a:active  {text-decoration:none;}
    a{/*去除手机端点击a标签出现背景颜色问题*/
		outline:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }

	
	code{
		font-family: "微软雅黑";
		font-size: 12px;
		color: #C7254E;
		background-color: #F9F2F4;
		border-radius: 3px;
		padding: 1px 5px;
		margin: 0 5px;
	}

.Clearfix{ overflow: auto; height:1%}

/*文本对齐--------------------------------------------------------------------------------------------------------------*/
.TextAlignCenter{ text-align: center}
.TextAlignLeft{ text-align: left}
.TextAlignRight{ text-align: right}
/*浮动--------------------------------------------------------------------------------------------------------------*/
.FloatRight{float: right;}
.FloatLeft{float: left;}
.FloatNone{float: none;}/*默认值。元素不浮动，并会显示在其在文本中出现的位置。*/
.FloatInherit{float: inherit;}/*规定应该从父元素继承 float 属性的值。*/
/*倒圆角--------------------------------------------------------------------------------------------------------------*/
.Radius{ border-radius: 4px; }
.Radius3{ border-radius: 3px; }
.Radius5{ border-radius: 5px; }
.Radius8{ border-radius: 8px; }
/*全圆角或胶囊--------------------------------------------------------------------------------------------------------------*/
.Capsule{ border-radius: 5000px; }
/*文本全大写--------------------------------------------------------------------------------------------------------------*/
.FontUppercase{
	text-transform: uppercase
}



/* ========== BackTop/BackTop.css ========== */
BackTop {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    pointer-events: none;
}

BackTop.Visible {
    opacity: 1;
    pointer-events: auto;
}

BackTop:hover {
    background: #1890ff;
}

BackTop::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #666;
}

BackTop:hover::after {
    border-bottom-color: #fff;
}

BackTop.Large {
    width: 48px;
    height: 48px;
    right: 50px;
}

/* ========== Breadcrumb/Breadcrumb.css ========== */
/*面包屑
===================================================================================================================================================*/
Breadcrumb {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}
BreadcrumbItem {
    display: inline-flex;
    align-items: center;
}
BreadcrumbItem::after {
    content: "/ ";
    margin: 0 8px;
    color: #999;
}
BreadcrumbItem:last-child::after {
    display: none;
}
BreadcrumbItem a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}
BreadcrumbItem a:hover {
    color: #1890ff;
}
Breadcrumb .Current {
    color: #333;
    pointer-events: none;
}
Breadcrumb icon {
    margin-right: 4px;
    font-size: 14px;
}

/* ========== Button/Button.css ========== */
Button,input,submin {
    border: 0;
    outline: none;
    margin: 0;
    font-size: 15px;
    font-family: "微软雅黑";
}
.Button, 
 Button {
    background-color: var(--DefaultColor);
    color: #FFF;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 0px 20px;
    transition: all .2s ease;
    cursor: pointer;
    user-select: none; /*取消双击选中文字*/
}
a.Button{
  margin-top: -1px;
}

/*鼠标经过样式*/
.Button:hover, 
 Button:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset; /*用于实现按钮hover颜色渐变*/
    transition: all .2s ease;
}
/*点击按钮样式*/
.Button:active,
 Button:active {
	box-shadow:0px 20px 150px rgba(0, 0, 0, 0) inset;/*按钮点击后恢复hover前按钮颜色*/
	transition: all 0s ease;/*恢复颜色的动作时长*/
	content: '';
}
/**************************************************************************************************************************************************
  Name   ：按钮外型
  Explain：设置按钮的边角
**************************************************************************************************************************************************/
/*扁平化按钮*/
.Button.Delayering,
 Button.Delayering{
    border-radius: 0;
}
/*胶囊形-------------------------------------------------------------------------------------------------------------------*/
.Button.Capsule,
 Button.Capsule{
    border-radius: 10000px;
}
/*椭圆形-------------------------------------------------------------------------------------------------------------------*/
.Button.Ellipse,
 Button.Ellipse{
    border-radius: 50%;
}
/*平行四边形----------------------------------------------------------------------------------------------------------------*/
.Button.Parallelogram,
 Button.Parallelogram{
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transform: skewX(-45deg);
}
.Button.Parallelogram > *,
 Button.Parallelogram > *{
    transform: skewX(45deg);
}
/*平行四边形-反向 ---------------------------------------------------------------------------------------------------------*/
.Button.Parallelogram.Inversion,
 Button.Parallelogram.Inversion{
    transform: skewX(45deg)!important;
}

.Button.Parallelogram.Inversion > *,
 Button.Parallelogram.Inversion > *{
    transform: skewX(-45deg);
}

/*圆形（结构不变，仅加形状类）-----------------------------------------------------------------------------------------------------------*/
.Button.Circle,
 Button.Circle{
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
}
.Button.Circle icon,
 Button.Circle icon{ margin: 0; }
/*箭头形（右箭头；Inversion 反向为左箭头）---------------------------------------------------------------------------------------------*/
.Button.Arrow,
 Button.Arrow{
    border-radius: 4px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.Button.Arrow.Inversion,
 Button.Arrow.Inversion{
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
/*菱形--------------------------------------------------------------------------------------------------------------------------------------*/
.Button.Diamond,
 Button.Diamond{
    border-radius: 4px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/*折叠圆角按钮：左上、右下为半圆端（圆角≈高度一半），右上、左下为 5px 微圆角-------------------*/
.Button.Fold,
 Button.Fold{
    border-radius: 999px 5px 999px 5px;
}

/*单调的按钮-------------------------------------------------------------------------------------------------------------------*/
.Button.Monotonous,
 Button.Monotonous{
    color: #666;
    background-color: transparent;
}

/**************************************************************************************************************************************************
  Name   ：块级按钮
  Explain：
**************************************************************************************************************************************************/
.Button icon,
 Button icon{
     margin-right: 5px;
}
/**************************************************************************************************************************************************
  Name   ：块级按钮
  Explain：
**************************************************************************************************************************************************/
.Button.Block,
 Button.Block{
     width: 100%;
     display: block;
}
/**************************************************************************************************************************************************
  Name   ：激活状态
  Explain：
**************************************************************************************************************************************************/
.Button.Active,
 Button.Active{
     box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset;
}
/**************************************************************************************************************************************************
  Name   ：禁用状态
  Explain：
**************************************************************************************************************************************************/
.Button.Disabled,
 Button.Disabled,
.Button[disabled],
 Button[disabled]{
     cursor: not-allowed;
     opacity: .5;
     box-shadow: 0px 20px 150px rgba(0, 0, 0, 0) inset;
}
/**************************************************************************************************************************************************
  Name   ：按钮尺寸
  Explain：
**************************************************************************************************************************************************/
.Button.XS,
 Button.XS{
    font-size: 80%;
    padding: 1px 3px;
    height: auto;
}
.Button.SM,
 Button.SM{
    font-size: 90%;
    padding: 4px 8px;
    height: auto;
}
.Button.LG,
 Button.LG{
    font-size: 120%;
    padding: 15px 20px;
    height: auto;
}
.Button.XL,
 Button.XL{
    font-size: 150%;
    padding: 20px 30px;
    height: auto;
}



/**************************************************************************************************************************************************
  Name   ：按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup{
    display: inline-flex;
    border-radius: 5px;
    overflow: hidden;
    justify-content: flex-start;
}
ButtonGroup Button{
	  margin: 0;
    border-radius: 0;
}
/**************************************************************************************************************************************************
  Name   ：胶囊形按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup.Capsule{
    border-radius: 300px;
}
ButtonGroup.Capsule Button:first-child{
    padding-left: 30px;
}
ButtonGroup.Capsule Button:last-child{
    padding-right: 30px;
}

/**************************************************************************************************************************************************
  Name   ：扁平化按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup.Delayering{
    border-radius: 0;
}
















.Button.Outline,
 Button.Outline{
    background-color: transparent!important;
    border: 1px solid currentColor;
    color: var(--DefaultColor);
}
.Button.Outline:hover,
 Button.Outline:hover{
    color: #FFF!important;
    background-color: var(--oc, var(--DefaultColor))!important;
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0) inset;
}
a.Button.Outline{
    padding: 10px 20px 8px 20px;
}
/* 带轮廓按钮 + 预置主题色：文字与边框跟随颜色，hover 填充该色 */
.Button.Outline.NILEBLUE,
 Button.Outline.NILEBLUE { color: var(--NILEBLUE); --oc: var(--NILEBLUE); }
.Button.Outline.VIOLET,
 Button.Outline.VIOLET { color: var(--VIOLET); --oc: var(--VIOLET); }
.Button.Outline.GRAPEFRUIT,
 Button.Outline.GRAPEFRUIT { color: var(--GRAPEFRUIT); --oc: var(--GRAPEFRUIT); }
.Button.Outline.SUNFLOWER,
 Button.Outline.SUNFLOWER { color: var(--SUNFLOWER); --oc: var(--SUNFLOWER); }
.Button.Outline.GRASS,
 Button.Outline.GRASS { color: var(--GRASS); --oc: var(--GRASS); }
.Button.Outline.MINT,
 Button.Outline.MINT { color: var(--MINT); --oc: var(--MINT); }
.Button.Outline.ORANGE,
 Button.Outline.ORANGE { color: var(--ORANGE); --oc: var(--ORANGE); }
.Button.Outline.AQUA,
 Button.Outline.AQUA { color: var(--AQUA); --oc: var(--AQUA); }
.Button.Outline.LAVENDER,
 Button.Outline.LAVENDER { color: var(--LAVENDER); --oc: var(--LAVENDER); }
.Button.Outline.PINKROSE,
 Button.Outline.PINKROSE { color: var(--PINKROSE); --oc: var(--PINKROSE); }
.Button.Outline.LIGHTGRAY,
 Button.Outline.LIGHTGRAY { color: var(--LIGHTGRAY); --oc: var(--LIGHTGRAY); }
.Button.Outline.MEDIUMGRAY,
 Button.Outline.MEDIUMGRAY { color: var(--MEDIUMGRAY); --oc: var(--MEDIUMGRAY); }
.Button.Outline.DARKGRAY,
 Button.Outline.DARKGRAY { color: var(--DARKGRAY); --oc: var(--DARKGRAY); }

/*水波纹 Ripple：需配合 Ripple 类，JS 在点击处注入 <span class="Ripple">--------------------------*/
.Button.Ripple,
 Button.Ripple{
    position: relative;
    overflow: hidden;
}
.Button.Ripple > .Ripple,
 Button.Ripple > .Ripple{
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .32;
    transform: scale(0);
    animation: RippleFx .6s ease-out forwards;
    pointer-events: none;
}
@keyframes RippleFx{
    0%{ transform: scale(0); opacity:.32; }
    100%{ transform: scale(1); opacity:0; }
}
/*文本按钮 TEXT：无背景无边框，仅文字色，可叠加预置颜色类-------------------------------------------*/
.Button.Text,
 Button.Text{
    background: transparent!important;
    border: 0;
    box-shadow: none!important;
    color: var(--DefaultColor)!important;
    opacity: .95;
}
.Button.Text:hover,
 Button.Text:hover,
 a.Button.Text:hover{ opacity: .7; }
.Button.Text.NILEBLUE,   Button.Text.NILEBLUE   { color: var(--NILEBLUE)!important; }
.Button.Text.VIOLET,     Button.Text.VIOLET     { color: var(--VIOLET)!important; }
.Button.Text.GRAPEFRUIT, Button.Text.GRAPEFRUIT { color: var(--GRAPEFRUIT)!important; }
.Button.Text.SUNFLOWER,  Button.Text.SUNFLOWER  { color: var(--SUNFLOWER)!important; }
.Button.Text.GRASS,      Button.Text.GRASS      { color: var(--GRASS)!important; }
.Button.Text.MINT,       Button.Text.MINT       { color: var(--MINT)!important; }
.Button.Text.ORANGE,     Button.Text.ORANGE     { color: var(--ORANGE)!important; }
.Button.Text.AQUA,       Button.Text.AQUA       { color: var(--AQUA)!important; }
.Button.Text.LAVENDER,   Button.Text.LAVENDER   { color: var(--LAVENDER)!important; }
.Button.Text.PINKROSE,   Button.Text.PINKROSE   { color: var(--PINKROSE)!important; }
.Button.Text.LIGHTGRAY,  Button.Text.LIGHTGRAY  { color: var(--LIGHTGRAY)!important; }
.Button.Text.MEDIUMGRAY, Button.Text.MEDIUMGRAY { color: var(--MEDIUMGRAY)!important; }
.Button.Text.DARKGRAY,   Button.Text.DARKGRAY   { color: var(--DARKGRAY)!important; }
/*渐变按钮 Gradient：复用预置颜色的渐变类（Gradient + 色名 / Direction 等），此处仅归零边框---------------------------------*/
.Button.Gradient,
 Button.Gradient{
    border: 0;
}
/*按压钮 Push：立体阴影，点击下沉-------------------------------------------------------------------------*/
.Button.Push,
 Button.Push{
    box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 6px 10px rgba(0,0,0,.22);
    transform: translateY(0);
    transition: transform .12s, box-shadow .12s;
}
.Button.Push:active,
 Button.Push:active{
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.14);
}


/* ========== Carousel/Carousel.css ========== */
/* ========== Carousel 轮播组件 ========== */

Carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
    background: #111;
}

/* --- 轮播轨道 --- */
CarouselTrack {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

/* --- 幻灯片 --- */
Slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
    display: block;
}

Slide.Active {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
    z-index: 2;
}

/* --- 背景图片（Ken Burns 效果） --- */
SlideBg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    transition: transform 8s linear;
    will-change: transform;
    display: block;
}

Slide.Active SlideBg {
    transform: scale(1.08);
}

/* --- 渐变遮罩 --- */
SlideOverlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(10,10,15,0.82) 0%, rgba(10,10,15,0.55) 45%, rgba(10,10,15,0.15) 100%),
        linear-gradient(to top, rgba(10,10,15,0.4) 0%, transparent 40%);
    z-index: 1;
    display: block;
}

/* --- 内容层 --- */
SlideContent {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;
    color: #fff;
}

SlideTag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--DefaultColor, #007bff);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

Slide.Active SlideTag {
    opacity: 1;
    transform: translateY(0);
}

SlideContent h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
    margin-bottom: 20px;
    max-width: 640px;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}

Slide.Active SlideContent h1 {
    opacity: 1;
    transform: translateY(0);
}

SlideContent h1 .Accent {
    color: var(--DefaultColor, #007bff);
}

SlideContent p {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.72);
    max-width: 520px;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}

Slide.Active SlideContent p {
    opacity: 1;
    transform: translateY(0);
}

SlideButtons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s;
}

Slide.Active SlideButtons {
    opacity: 1;
    transform: translateY(0);
}

SlideButtons Button {
    background-color: var(--DefaultColor, #007bff);
    color: #fff;
    height: 48px;
    padding: 0 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--DefaultColor, #007bff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

SlideButtons Button:hover {
    box-shadow: 0 8px 24px rgba(0,123,255,0.3);
    transform: translateY(-2px);
}

SlideButtons Button.Outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

SlideButtons Button.Outline:hover {
    background: #fff;
    color: #333;
    border-color: #fff;
    box-shadow: none;
}

/* --- 导航箭头 --- */
SlidePrev,
SlideNext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    user-select: none;
}

Carousel:hover SlidePrev,
Carousel:hover SlideNext {
    opacity: 1;
}

SlidePrev:hover,
SlideNext:hover {
    background: #fff;
    border-color: #fff;
    color: #333;
    transform: translateY(-50%) scale(1.08);
}

SlidePrev { left: 28px; }
SlideNext { right: 28px; }

/* 箭头 SVG 样式 */
SlidePrev svg,
SlideNext svg {
    display: block;
    pointer-events: none;
}

/* 预置颜色类 - 按钮悬停时使用对应颜色 */
Carousel.NILEBLUE   SlidePrev:hover,
Carousel.NILEBLUE   SlideNext:hover { background: var(--NILEBLUE); border-color: var(--NILEBLUE); color: #fff; }
Carousel.GRAPEFRUIT SlidePrev:hover,
Carousel.GRAPEFRUIT SlideNext:hover { background: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT); color: #fff; }
Carousel.SUNFLOWER  SlidePrev:hover,
Carousel.SUNFLOWER  SlideNext:hover { background: var(--SUNFLOWER); border-color: var(--SUNFLOWER); color: #333; }
Carousel.GRASS      SlidePrev:hover,
Carousel.GRASS      SlideNext:hover { background: var(--GRASS); border-color: var(--GRASS); color: #fff; }
Carousel.MINT       SlidePrev:hover,
Carousel.MINT       SlideNext:hover { background: var(--MINT); border-color: var(--MINT); color: #fff; }
Carousel.AQUA       SlidePrev:hover,
Carousel.AQUA       SlideNext:hover { background: var(--AQUA); border-color: var(--AQUA); color: #fff; }
Carousel.LAVENDER   SlidePrev:hover,
Carousel.LAVENDER   SlideNext:hover { background: var(--LAVENDER); border-color: var(--LAVENDER); color: #fff; }
Carousel.PINKROSE   SlidePrev:hover,
Carousel.PINKROSE   SlideNext:hover { background: var(--PINKROSE); border-color: var(--PINKROSE); color: #fff; }
Carousel.ORANGE     SlidePrev:hover,
Carousel.ORANGE     SlideNext:hover { background: var(--ORANGE); border-color: var(--ORANGE); color: #fff; }
Carousel.DARKNIGHT  SlidePrev:hover,
Carousel.DARKNIGHT  SlideNext:hover { background: var(--DARKNIGHT); border-color: var(--DARKNIGHT); color: #fff; }

/* 主题颜色类 - 激活指示器（圆形胶囊）匹配对应颜色 */
Carousel.NILEBLUE   SlideDot.Active { background: var(--NILEBLUE); border-color: var(--NILEBLUE); }
Carousel.GRAPEFRUIT SlideDot.Active { background: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT); }
Carousel.SUNFLOWER  SlideDot.Active { background: var(--SUNFLOWER); border-color: var(--SUNFLOWER); }
Carousel.GRASS      SlideDot.Active { background: var(--GRASS); border-color: var(--GRASS); }
Carousel.MINT       SlideDot.Active { background: var(--MINT); border-color: var(--MINT); }
Carousel.AQUA       SlideDot.Active { background: var(--AQUA); border-color: var(--AQUA); }
Carousel.LAVENDER   SlideDot.Active { background: var(--LAVENDER); border-color: var(--LAVENDER); }
Carousel.PINKROSE   SlideDot.Active { background: var(--PINKROSE); border-color: var(--PINKROSE); }
Carousel.ORANGE     SlideDot.Active { background: var(--ORANGE); border-color: var(--ORANGE); }
Carousel.DARKNIGHT  SlideDot.Active { background: var(--DARKNIGHT); border-color: var(--DARKNIGHT); }

/* 主题颜色类 - 标题强调文字（Accent）匹配对应颜色 */
Carousel.NILEBLUE   SlideContent h1 .Accent { color: var(--NILEBLUE); }
Carousel.GRAPEFRUIT SlideContent h1 .Accent { color: var(--GRAPEFRUIT); }
Carousel.SUNFLOWER  SlideContent h1 .Accent { color: var(--SUNFLOWER); }
Carousel.GRASS      SlideContent h1 .Accent { color: var(--GRASS); }
Carousel.MINT       SlideContent h1 .Accent { color: var(--MINT); }
Carousel.AQUA       SlideContent h1 .Accent { color: var(--AQUA); }
Carousel.LAVENDER   SlideContent h1 .Accent { color: var(--LAVENDER); }
Carousel.PINKROSE   SlideContent h1 .Accent { color: var(--PINKROSE); }
Carousel.ORANGE     SlideContent h1 .Accent { color: var(--ORANGE); }
Carousel.DARKNIGHT  SlideContent h1 .Accent { color: var(--DARKNIGHT); }

/* 移动端隐藏箭头 */
@media (max-width: 640px) {
    SlidePrev, SlideNext { display: none; }
}

/* --- 指示器（圆点） --- */
SlideDots {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

SlideDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

SlideDot.Active {
    background: var(--DefaultColor, #007bff);
    border-color: var(--DefaultColor, #007bff);
    width: 32px;
    border-radius: 5px;
}

SlideDot:hover:not(.Active) {
    border-color: #fff;
    background: rgba(255,255,255,0.3);
}

@media (max-width: 640px) {
    SlideDots { bottom: 24px; }
    SlideDot { width: 8px; height: 8px; }
    SlideDot.Active { width: 24px; }
}

/* --- 进度条 --- */
SlideProgress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.1);
    z-index: 10;
    display: block;
}

SlideProgressBar {
    height: 100%;
    width: 0;
    background: var(--DefaultColor, #007bff);
    display: block;
}

SlideProgressBar.Running {
    transition: width var(--autoplay-duration, 6s) linear;
}

/* --- 计数器 --- */
SlideCounter {
    position: absolute;
    bottom: 36px;
    right: 40px;
    z-index: 10;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
    font-family: 'DINPro', sans-serif;
}

SlideCounter.Current {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 900px) {
    SlideCounter { display: none; }
}

/* --- 响应式 --- */
@media (max-width: 1100px) {
    SlideContent h1 { font-size: 46px; }
}

@media (max-width: 900px) {
    SlideContent { padding: 0 32px; }
    SlideContent h1 { font-size: 36px; }
    SlideContent p { font-size: 14px; max-width: 400px; }
    SlidePrev, SlideNext { width: 44px; height: 44px; }
    SlidePrev { left: 16px; }
    SlideNext { right: 16px; }
}

@media (max-width: 640px) {
    SlideContent { padding: 0 24px; }
    SlideContent h1 { font-size: 28px; letter-spacing: -0.5px; }
    SlideContent p { font-size: 13px; margin-bottom: 24px; }
    SlideTag { font-size: 10px; margin-bottom: 14px; }
    SlideButtons { flex-direction: column; gap: 10px; }
    SlideButtons Button { width: 100%; max-width: 260px; }
}

/* ========== Collapse/Collapse.css ========== */
/* ======================================================================================
   ANUI 3.0 折叠面板组件 —— <Collapse> / <CollapseItem>
   全驼峰命名，类作用域限制在 Collapse 标签内
   ====================================================================================== */

/* 基础布局 */
Collapse {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

CollapseItem {
    border-bottom: 1px solid #eee;
}

CollapseItem:last-child {
    border-bottom: none;
}

/* 头部 */
CollapseItem .CollapseHeader {
    padding: 12px 16px;
    cursor: pointer;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

CollapseItem .CollapseHeader:hover {
    background: #f0f0f0;
}

/* 箭头 */
CollapseItem .CollapseArrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #999;
    transition: transform 0.3s;
    flex-shrink: 0;
}

CollapseItem.Active .CollapseArrow {
    transform: rotate(90deg);
}

/* 内容区 */
CollapseItem .CollapseBody {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

CollapseItem.Active .CollapseBody {
    max-height: 500px;
}

CollapseItem .CollapseBodyInner {
    padding: 0 16px 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* ==================== 无边框模式 Borderless ==================== */
Collapse.Borderless {
    border: none;
    border-radius: 0;
}

Collapse.Borderless CollapseItem {
    border-bottom: none;
    background: #fafafa;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
}

Collapse.Borderless CollapseItem:last-child {
    margin-bottom: 0;
}

Collapse.Borderless CollapseItem .CollapseHeader {
    background: transparent;
}

Collapse.Borderless CollapseItem .CollapseHeader:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ========== Colour/Colour.css ========== */
:root {
  /* 默认主题色 */
  --DefaultColor: #646CBE;
  /* 尼罗蓝 */
  --NILEBLUE: #4080d9; --NILEBLUE2: #7AA6E7; --NILEBLUE3: #9AB9EE; --NILEBLUE4: #BACFF5; --NILEBLUE5: #CBDFFF;
  /* 紫罗兰 */
  --VIOLET: #646CBE; --VIOLET2: #878CC5; --VIOLET3: #A5A9D4; --VIOLET4: #C3C6E2; --VIOLET5: #E1E2F1;
  /* 葡萄柚 */
  --GRAPEFRUIT: #ED5565; --GRAPEFRUIT2: #F07A82; --GRAPEFRUIT3: #F39E9F; --GRAPEFRUIT4: #F6C3BC; --GRAPEFRUIT5: #F9E8EA;
  /* 向日葵 */
  --SUNFLOWER: #FFCE54; --SUNFLOWER2: #FFD97F; --SUNFLOWER3: #FFE4A9; --SUNFLOWER4: #FFEFBF; --SUNFLOWER5: #FFFAD6;
  /* 草坪 */
  --GRASS: #A0D468; --GRASS2: #B8DA87; --GRASS3: #CFE0A5; --GRASS4: #DFEEC9; --GRASS5: #F1F9E8;
  /* 薄荷 */
  --MINT: #48CFAD; --MINT2: #8FDFD0; --MINT3: #C5ECE9; --MINT4: #DCF3F2; --MINT5: #F1FAFA;
  /* 水色 */
  --AQUA: #4FC1E9; --AQUA2: #73CEE0; --AQUA3: #97DAE7; --AQUA4: #BADFF0; --AQUA5: #DDF4FA;
  /* 薰衣草 */
  --LAVENDER: #AC92EC; --LAVENDER2: #BFA7ED; --LAVENDER3: #D2BBEF; --LAVENDER4: #E5D0F1; --LAVENDER5: #F8E6F8;
  /* 粉红玫瑰 */
  --PINKROSE: #EC87C0; --PINKROSE2: #F0A3CB; --PINKROSE3: #F4BED6; --PINKROSE4: #F8DAE1; --PINKROSE5: #FCECF5;
  /* 香橙 */
  --ORANGE: #FF9E54; --ORANGE2: #FFB378; --ORANGE3: #FFC99D; --ORANGE4: #FFE0C2; --ORANGE5: #FFF7E8;
  /* 星空灰 */
  --DARKNIGHT: #282C37; --DARKNIGHT2: #4A5062; --DARKNIGHT3: #6D7385; --DARKNIGHT4: #9196A8; --DARKNIGHT5: #B5B9CB; --DARKNIGHT6: #D1D5E0;  --DARKNIGHT7: #E4E7EF; --DARKNIGHT8: #F2F4F8; --DARKNIGHT9: #F9FAFC;
  /* 浅色（Palette 配色用） */
  --NILEBLUE_Light: #DBE7F8;
  --GRAPEFRUIT_Light: #FCE9EB;
  --SUNFLOWER_Light: #FFF8E8;
  --GRASS_Light: #F0F8E7;
  --MINT_Light: #E3F7F2;
  --AQUA_Light: #E4F5FB;
  --LAVENDER_Light: #F2EEFC;
  --PINKROSE_Light: #FCECF5;
  --ORANGE_Light: #FFF0E4;
  --LIGHTGRAY: #F5F7FA;  --LIGHTGRAY_Light: #F5F7FA;
  --MEDIUMGRAY: #CCD1D9; --MEDIUMGRAY_Light: #F5F7FA;
  --DARKGRAY: #656D78;    --DARKGRAY_Light: #CCD1D9;
}

/* 定义通用变量 */
 /* 尼罗蓝 */
.BackgroundNILEBLUE { background-color: var(--NILEBLUE); }
.BackgroundNILEBLUE2 { background-color: var(--NILEBLUE2); }
.BackgroundNILEBLUE3 { background-color: var(--NILEBLUE3); }
.BackgroundNILEBLUE4 { background-color: var(--NILEBLUE4); }
.BackgroundNILEBLUE5 { background-color: var(--NILEBLUE5); }

.FontNILEBLUE { color: var(--NILEBLUE); }
.FontNILEBLUE2 { color: var(--NILEBLUE2); }
.FontNILEBLUE3 { color: var(--NILEBLUE3); }
.FontNILEBLUE4 { color: var(--NILEBLUE4); }
.FontNILEBLUE5 { color: var(--NILEBLUE5); }

.BorderNILEBLUE { border-color: var(--NILEBLUE); }
.BorderNILEBLUE2 { border-color: var(--NILEBLUE2); }
.BorderNILEBLUE3 { border-color: var(--NILEBLUE3); }
.BorderNILEBLUE4 { border-color: var(--NILEBLUE4); }
.BorderNILEBLUE5 { border-color: var(--NILEBLUE5); }

/* 紫罗兰 */
.BackgroundVIOLET { background-color: var(--VIOLET); }
.BackgroundVIOLET2 { background-color: var(--VIOLET2); }
.BackgroundVIOLET3 { background-color: var(--VIOLET3); }
.BackgroundVIOLET4 { background-color: var(--VIOLET4); }
.BackgroundVIOLET5 { background-color: var(--VIOLET5); }

.FontVIOLET { color: var(--VIOLET); }
.FontVIOLET2 { color: var(--VIOLET2); }
.FontVIOLET3 { color: var(--VIOLET3); }
.FontVIOLET4 { color: var(--VIOLET4); }
.FontVIOLET5 { color: var(--VIOLET5); }

.BorderVIOLET { border-color: var(--VIOLET); }
.BorderVIOLET2 { border-color: var(--VIOLET2); }
.BorderVIOLET3 { border-color: var(--VIOLET3); }
.BorderVIOLET4 { border-color: var(--VIOLET4); }
.BorderVIOLET5 { border-color: var(--VIOLET5); }

/* 葡萄柚 */
.BackgroundGRAPEFRUIT { background-color: var(--GRAPEFRUIT); }
.BackgroundGRAPEFRUIT2 { background-color: var(--GRAPEFRUIT2); }
.BackgroundGRAPEFRUIT3 { background-color: var(--GRAPEFRUIT3); }
.BackgroundGRAPEFRUIT4 { background-color: var(--GRAPEFRUIT4); }
.BackgroundGRAPEFRUIT5 { background-color: var(--GRAPEFRUIT5); }

.FontGRAPEFRUIT { color: var(--GRAPEFRUIT); }
.FontGRAPEFRUIT2 { color: var(--GRAPEFRUIT2); }
.FontGRAPEFRUIT3 { color: var(--GRAPEFRUIT3); }
.FontGRAPEFRUIT4 { color: var(--GRAPEFRUIT4); }
.FontGRAPEFRUIT5 { color: var(--GRAPEFRUIT5); }

.BorderGRAPEFRUIT { border-color: var(--GRAPEFRUIT); }
.BorderGRAPEFRUIT2 { border-color: var(--GRAPEFRUIT2); }
.BorderGRAPEFRUIT3 { border-color: var(--GRAPEFRUIT3); }
.BorderGRAPEFRUIT4 { border-color: var(--GRAPEFRUIT4); }
.BorderGRAPEFRUIT5 { border-color: var(--GRAPEFRUIT5); }

/* 向日葵 */
.BackgroundSUNFLOWER { background-color: var(--SUNFLOWER); }
.BackgroundSUNFLOWER2 { background-color: var(--SUNFLOWER2); }
.BackgroundSUNFLOWER3 { background-color: var(--SUNFLOWER3); }
.BackgroundSUNFLOWER4 { background-color: var(--SUNFLOWER4); }
.BackgroundSUNFLOWER5 { background-color: var(--SUNFLOWER5); }

.FontSUNFLOWER { color: var(--SUNFLOWER); }
.FontSUNFLOWER2 { color: var(--SUNFLOWER2); }
.FontSUNFLOWER3 { color: var(--SUNFLOWER3); }
.FontSUNFLOWER4 { color: var(--SUNFLOWER4); }
.FontSUNFLOWER5 { color: var(--SUNFLOWER5); }

.BorderSUNFLOWER { border-color: var(--SUNFLOWER); }
.BorderSUNFLOWER2 { border-color: var(--SUNFLOWER2); }
.BorderSUNFLOWER3 { border-color: var(--SUNFLOWER3); }
.BorderSUNFLOWER4 { border-color: var(--SUNFLOWER4); }
.BorderSUNFLOWER5 { border-color: var(--SUNFLOWER5); }

/* 草坪 */
.BackgroundGRASS { background-color: var(--GRASS); }
.BackgroundGRASS2 { background-color: var(--GRASS2); }
.BackgroundGRASS3 { background-color: var(--GRASS3); }
.BackgroundGRASS4 { background-color: var(--GRASS4); }
.BackgroundGRASS5 { background-color: var(--GRASS5); }

.FontGRASS { color: var(--GRASS); }
.FontGRASS2 { color: var(--GRASS2); }
.FontGRASS3 { color: var(--GRASS3); }
.FontGRASS4 { color: var(--GRASS4); }
.FontGRASS5 { color: var(--GRASS5); }

.BorderGRASS { border-color: var(--GRASS); }
.BorderGRASS2 { border-color: var(--GRASS2); }
.BorderGRASS3 { border-color: var(--GRASS3); }
.BorderGRASS4 { border-color: var(--GRASS4); }
.BorderGRASS5 { border-color: var(--GRASS5); }

/* 薄荷 */
.BackgroundMINT { background-color: var(--MINT); }
.BackgroundMINT2 { background-color: var(--MINT2); }
.BackgroundMINT3 { background-color: var(--MINT3); }
.BackgroundMINT4 { background-color: var(--MINT4); }
.BackgroundMINT5 { background-color: var(--MINT5); }

.FontMINT { color: var(--MINT); }
.FontMINT2 { color: var(--MINT2); }
.FontMINT3 { color: var(--MINT3); }
.FontMINT4 { color: var(--MINT4); }
.FontMINT5 { color: var(--MINT5); }

.BorderMINT { border-color: var(--MINT); }
.BorderMINT2 { border-color: var(--MINT2); }
.BorderMINT3 { border-color: var(--MINT3); }
.BorderMINT4 { border-color: var(--MINT4); }
.BorderMINT5 { border-color: var(--MINT5); }

/* 水色 */
.BackgroundAQUA { background-color: var(--AQUA); }
.BackgroundAQUA2 { background-color: var(--AQUA2); }
.BackgroundAQUA3 { background-color: var(--AQUA3); }
.BackgroundAQUA4 { background-color: var(--AQUA4); }
.BackgroundAQUA5 { background-color: var(--AQUA5); }

.FontAQUA { color: var(--AQUA); }
.FontAQUA2 { color: var(--AQUA2); }
.FontAQUA3 { color: var(--AQUA3); }
.FontAQUA4 { color: var(--AQUA4); }
.FontAQUA5 { color: var(--AQUA5); }

.BorderAQUA { border-color: var(--AQUA); }
.BorderAQUA2 { border-color: var(--AQUA2); }
.BorderAQUA3 { border-color: var(--AQUA3); }
.BorderAQUA4 { border-color: var(--AQUA4); }
.BorderAQUA5 { border-color: var(--AQUA5); }

/* 薰衣草 */
.BackgroundLAVENDER { background-color: var(--LAVENDER); }
.BackgroundLAVENDER2 { background-color: var(--LAVENDER2); }
.BackgroundLAVENDER3 { background-color: var(--LAVENDER3); }
.BackgroundLAVENDER4 { background-color: var(--LAVENDER4); }
.BackgroundLAVENDER5 { background-color: var(--LAVENDER5); }

.FontLAVENDER { color: var(--LAVENDER); }
.FontLAVENDER2 { color: var(--LAVENDER2); }
.FontLAVENDER3 { color: var(--LAVENDER3); }
.FontLAVENDER4 { color: var(--LAVENDER4); }
.FontLAVENDER5 { color: var(--LAVENDER5); }

.BorderLAVENDER { border-color: var(--LAVENDER); }
.BorderLAVENDER2 { border-color: var(--LAVENDER2); }
.BorderLAVENDER3 { border-color: var(--LAVENDER3); }
.BorderLAVENDER4 { border-color: var(--LAVENDER4); }
.BorderLAVENDER5 { border-color: var(--LAVENDER5); }

/* 粉红玫瑰 */
.BackgroundPINKROSE { background-color: var(--PINKROSE); }
.BackgroundPINKROSE2 { background-color: var(--PINKROSE2); }
.BackgroundPINKROSE3 { background-color: var(--PINKROSE3); }
.BackgroundPINKROSE4 { background-color: var(--PINKROSE4); }
.BackgroundPINKROSE5 { background-color: var(--PINKROSE5); }

.FontPINKROSE { color: var(--PINKROSE); }
.FontPINKROSE2 { color: var(--PINKROSE2); }
.FontPINKROSE3 { color: var(--PINKROSE3); }
.FontPINKROSE4 { color: var(--PINKROSE4); }
.FontPINKROSE5 { color: var(--PINKROSE5); }

.BorderPINKROSE { border-color: var(--PINKROSE); }
.BorderPINKROSE2 { border-color: var(--PINKROSE2); }
.BorderPINKROSE3 { border-color: var(--PINKROSE3); }
.BorderPINKROSE4 { border-color: var(--PINKROSE4); }
.BorderPINKROSE5 { border-color: var(--PINKROSE5); }

/* 香橙 */
.BackgroundORANGE { background-color: var(--ORANGE); }
.BackgroundORANGE2 { background-color: var(--ORANGE2); }
.BackgroundORANGE3 { background-color: var(--ORANGE3); }
.BackgroundORANGE4 { background-color: var(--ORANGE4); }
.BackgroundORANGE5 { background-color: var(--ORANGE5); }

.FontORANGE { color: var(--ORANGE); }
.FontORANGE2 { color: var(--ORANGE2); }
.FontORANGE3 { color: var(--ORANGE3); }
.FontORANGE4 { color: var(--ORANGE4); }
.FontORANGE5 { color: var(--ORANGE5); }

.BorderORANGE { border-color: var(--ORANGE); }
.BorderORANGE2 { border-color: var(--ORANGE2); }
.BorderORANGE3 { border-color: var(--ORANGE3); }
.BorderORANGE4 { border-color: var(--ORANGE4); }
.BorderORANGE5 { border-color: var(--ORANGE5); }

/* 星空灰 */
.BackgroundDARKNIGHT { background-color: var(--DARKNIGHT); }
.BackgroundDARKNIGHT2 { background-color: var(--DARKNIGHT2); }
.BackgroundDARKNIGHT3 { background-color: var(--DARKNIGHT3); }
.BackgroundDARKNIGHT4 { background-color: var(--DARKNIGHT4); }
.BackgroundDARKNIGHT5 { background-color: var(--DARKNIGHT5); }
.BackgroundDARKNIGHT6 { background-color: var(--DARKNIGHT6); }
.BackgroundDARKNIGHT7 { background-color: var(--DARKNIGHT7); }
.BackgroundDARKNIGHT8 { background-color: var(--DARKNIGHT8); }
.BackgroundDARKNIGHT9 { background-color: var(--DARKNIGHT9); }

.FontDARKNIGHT { color: var(--DARKNIGHT); }
.FontDARKNIGHT2 { color: var(--DARKNIGHT2); }
.FontDARKNIGHT3 { color: var(--DARKNIGHT3); }
.FontDARKNIGHT4 { color: var(--DARKNIGHT4); }
.FontDARKNIGHT5 { color: var(--DARKNIGHT5); }
.FontDARKNIGHT6 { color: var(--DARKNIGHT6); }
.FontDARKNIGHT7 { color: var(--DARKNIGHT7); }
.FontDARKNIGHT8 { color: var(--DARKNIGHT8); }
.FontDARKNIGHT9 { color: var(--DARKNIGHT9); }


.BorderDARKNIGHT { border-color: var(--DARKNIGHT); }
.BorderDARKNIGHT2 { border-color: var(--DARKNIGHT2); }
.BorderDARKNIGHT3 { border-color: var(--DARKNIGHT3); }
.BorderDARKNIGHT4 { border-color: var(--DARKNIGHT4); }
.BorderDARKNIGHT5 { border-color: var(--DARKNIGHT5); }
.BorderDARKNIGHT6 { border-color: var(--DARKNIGHT6); }
.BorderDARKNIGHT7 { border-color: var(--DARKNIGHT7); }
.BorderDARKNIGHT8 { border-color: var(--DARKNIGHT8); }
.BorderDARKNIGHT9 { border-color: var(--DARKNIGHT9); }

/* ==================== 渐变颜色类：Gradient 单类型 + 预置色名 ==================== */
.Gradient.NILEBLUE   { --GradFrom: var(--NILEBLUE);   background: linear-gradient(var(--GradAngle, 135deg), var(--NILEBLUE),   var(--NILEBLUE4)); }
.Gradient.VIOLET     { --GradFrom: var(--VIOLET);     background: linear-gradient(var(--GradAngle, 135deg), var(--VIOLET),     var(--VIOLET4)); }
.Gradient.GRAPEFRUIT { --GradFrom: var(--GRAPEFRUIT); background: linear-gradient(var(--GradAngle, 135deg), var(--GRAPEFRUIT), var(--GRAPEFRUIT4)); }
.Gradient.SUNFLOWER  { --GradFrom: var(--SUNFLOWER);  background: linear-gradient(var(--GradAngle, 135deg), var(--SUNFLOWER),  var(--SUNFLOWER4)); }
.Gradient.GRASS      { --GradFrom: var(--GRASS);      background: linear-gradient(var(--GradAngle, 135deg), var(--GRASS),      var(--GRASS4)); }
.Gradient.MINT       { --GradFrom: var(--MINT);       background: linear-gradient(var(--GradAngle, 135deg), var(--MINT),       var(--MINT4)); }
.Gradient.AQUA       { --GradFrom: var(--AQUA);       background: linear-gradient(var(--GradAngle, 135deg), var(--AQUA),       var(--AQUA4)); }
.Gradient.LAVENDER   { --GradFrom: var(--LAVENDER);   background: linear-gradient(var(--GradAngle, 135deg), var(--LAVENDER),   var(--LAVENDER4)); }
.Gradient.PINKROSE   { --GradFrom: var(--PINKROSE);   background: linear-gradient(var(--GradAngle, 135deg), var(--PINKROSE),   var(--PINKROSE4)); }
.Gradient.ORANGE     { --GradFrom: var(--ORANGE);     background: linear-gradient(var(--GradAngle, 135deg), var(--ORANGE),     var(--ORANGE4)); }
.Gradient.DARKNIGHT  { --GradFrom: var(--DARKNIGHT);  background: linear-gradient(var(--GradAngle, 135deg), var(--DARKNIGHT),  var(--DARKNIGHT7)); }
/* 仅加 Gradient 或其他非预置名时，使用默认主题色渐变 */
.Gradient { --GradFrom: var(--DefaultColor); background: linear-gradient(var(--GradAngle, 135deg), var(--DefaultColor), color-mix(in srgb, var(--DefaultColor) 55%, #fff)); }

/* 预设流行渐变色（独立于预置色系：Gradient + 设计名） */
.Gradient.Ocean     { --GradFrom: #2E3192; background: linear-gradient(var(--GradAngle, 135deg), #2E3192, #1BFFFF); }
.Gradient.Aurora    { --GradFrom: #1A2980; background: linear-gradient(var(--GradAngle, 135deg), #1A2980, #26D0CE); }
.Gradient.Emerald   { --GradFrom: #11998E; background: linear-gradient(var(--GradAngle, 135deg), #11998E, #38EF7D); }
.Gradient.Sunset    { --GradFrom: #FA709A; background: linear-gradient(var(--GradAngle, 135deg), #FA709A, #FEE140); }
.Gradient.Crimson   { --GradFrom: #DC2430; background: linear-gradient(var(--GradAngle, 135deg), #DC2430, #7B4397); }
.Gradient.Royal     { --GradFrom: #7F00FF; background: linear-gradient(var(--GradAngle, 135deg), #7F00FF, #E100FF); }
.Gradient.Peachy    { --GradFrom: #ED4264; background: linear-gradient(var(--GradAngle, 135deg), #ED4264, #FFEDBC); }
.Gradient.Midnight  { --GradFrom: #0F2027; background: linear-gradient(var(--GradAngle, 135deg), #0F2027, #203A43, #2C5364); }
.Gradient.Flaming   { --GradFrom: #F83600; background: linear-gradient(var(--GradAngle, 135deg), #F83600, #F9D423); }
.Gradient.Silver    { --GradFrom: #37474F; background: linear-gradient(var(--GradAngle, 135deg), #37474F, #CFD8DC); }

/* 渐隐 Fade：起始色渐隐到透明，方向由 Direction 控制（后置以覆盖各色类 background） */
.Gradient.Fade { background: linear-gradient(var(--GradAngle, 135deg), var(--GradFrom, var(--DefaultColor)), transparent); }

/* 渐变方向 Direction：控制线性渐变的八个指向 */
.Gradient.DirectionTop    { --GradAngle: to top; }
.Gradient.DirectionBottom { --GradAngle: to bottom; }
.Gradient.DirectionLeft   { --GradAngle: to left; }
.Gradient.DirectionRight  { --GradAngle: to right; }
.Gradient.DirectionTL     { --GradAngle: to top left; }
.Gradient.DirectionTR     { --GradAngle: to top right; }
.Gradient.DirectionBL     { --GradAngle: to bottom left; }
.Gradient.DirectionBR     { --GradAngle: to bottom right; }

/* 渐变文字 Text：配合 Gradient + 色名/Direction/Fade 使用，将渐变渲染到文字上 */
.Gradient.Text {
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==================== 快捷颜色类（Back*/Palette1/Palette2） ==================== */
/*尼罗蓝*/
.NILEBLUE.Palette1 { background-color: var(--NILEBLUE_Light); color: var(--NILEBLUE); border-color: var(--NILEBLUE_Light);}
.NILEBLUE.Palette2 { background-color: var(--NILEBLUE_Light); color: var(--NILEBLUE); border-color: var(--NILEBLUE);}
.BackNILEBLUE { background-color: var(--NILEBLUE);}

/*葡萄柚*/
.GRAPEFRUIT.Palette1 { background-color: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT_Light);}
.GRAPEFRUIT.Palette2 { background-color: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT);}
.BackGRAPEFRUIT { background-color: var(--GRAPEFRUIT);}

/*向日葵*/
.SUNFLOWER.Palette1 { background-color: var(--SUNFLOWER_Light); color: var(--SUNFLOWER); border-color: var(--SUNFLOWER_Light);}
.SUNFLOWER.Palette2 { background-color: var(--SUNFLOWER_Light); color: var(--SUNFLOWER); border-color: var(--SUNFLOWER);}
.BackSUNFLOWER { background-color: var(--SUNFLOWER);}

/*草坪*/
.GRASS.Palette1 { background-color: var(--GRASS_Light); color: var(--GRASS); border-color: var(--GRASS_Light);}
.GRASS.Palette2 { background-color: var(--GRASS_Light); color: var(--GRASS); border-color: var(--GRASS);}
.BackGRASS { background-color: var(--GRASS);}

/*薄荷*/
.MINT.Palette1 { background-color: var(--MINT_Light); color: var(--MINT); border-color: var(--MINT_Light);}
.MINT.Palette2 { background-color: var(--MINT_Light); color: var(--MINT); border-color: var(--MINT);}
.BackMINT { background-color: var(--MINT);}

/*水色*/
.AQUA.Palette1 { background-color: var(--AQUA_Light); color: var(--AQUA); border-color: var(--AQUA_Light);}
.AQUA.Palette2 { background-color: var(--AQUA_Light); color: var(--AQUA); border-color: var(--AQUA);}
.BackAQUA { background-color: var(--AQUA);}

/*薰衣草*/
.LAVENDER.Palette1 { background-color: var(--LAVENDER_Light); color: var(--LAVENDER); border-color: var(--LAVENDER_Light);}
.LAVENDER.Palette2 { background-color: var(--LAVENDER_Light); color: var(--LAVENDER); border-color: var(--LAVENDER);}
.BackLAVENDER { background-color: var(--LAVENDER);}

/*粉红玫瑰*/
.PINKROSE.Palette1 { background-color: var(--PINKROSE_Light); color: var(--PINKROSE); border-color: var(--PINKROSE_Light);}
.PINKROSE.Palette2 { background-color: var(--PINKROSE_Light); color: var(--PINKROSE); border-color: var(--PINKROSE);}
.BackPINKROSE { background-color: var(--PINKROSE);}

/*香橙*/
.ORANGE.Palette1 { background-color: var(--ORANGE_Light); color: var(--ORANGE); border-color: var(--ORANGE_Light);}
.ORANGE.Palette2 { background-color: var(--ORANGE_Light); color: var(--ORANGE); border-color: var(--ORANGE);}
.BackORANGE { background-color: var(--ORANGE);}

/*浅灰色*/
.LIGHTGRAY.Palette1 { background-color: var(--LIGHTGRAY_Light); color: var(--MEDIUMGRAY); border-color: var(--LIGHTGRAY_Light);}
.LIGHTGRAY.Palette2 { background-color: var(--LIGHTGRAY_Light); color: var(--MEDIUMGRAY); border-color: var(--MEDIUMGRAY);}
.BackLIGHTGRAY { background-color: var(--LIGHTGRAY);}

/*中灰色*/
.MEDIUMGRAY.Palette1 { background-color: var(--MEDIUMGRAY_Light); color: var(--DARKGRAY); border-color: var(--MEDIUMGRAY_Light);}
.MEDIUMGRAY.Palette2 { background-color: var(--MEDIUMGRAY_Light); color: var(--DARKGRAY); border-color: var(--MEDIUMGRAY);}
.BackMEDIUMGRAY { background-color: var(--MEDIUMGRAY);}

/*深灰色*/
.DARKGRAY.Palette1 { background-color: var(--DARKGRAY_Light); color: var(--DARKGRAY); border-color: var(--DARKGRAY_Light);}
.DARKGRAY.Palette2 { background-color: var(--DARKGRAY_Light); color: var(--DARKGRAY); border-color: var(--DARKGRAY);}
.BackDARKGRAY { background-color: var(--DARKGRAY);}


/* ========== Copy/Copy.css ========== */
/* ========== Copy 组件 - 复制到剪贴板 ========== */

Copy,
Copy,
.Copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    background: transparent;
}

Copy:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

Copy > icon {
    font-size: 16px;
    margin-right: 4px;
    color: var(--DefaultColor, #007bff);
    opacity: 0.8;
    transition: all .2s ease;
}

Copy:hover > icon {
    opacity: 1;
}

Copy > Text {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

Copy > Content {
    display: none;
}

/* 复制按钮样式 */
Copy.ButtonStyle {
    border: 1px solid var(--DefaultColor, #007bff);
    padding: 6px 12px;
    background: #fff;
    border-radius: 4px;
}

Copy.ButtonStyle:hover {
    background: var(--DefaultColor, #007bff);
}

Copy.ButtonStyle:hover > icon,
Copy.ButtonStyle:hover > Text {
    color: #fff;
}

Copy.ButtonStyle > Text {
    color: var(--DefaultColor, #007bff);
}

/* 成功状态 */
Copy.Copied {
    background-color: #52c41a;
    border-color: #52c41a;
}

Copy.Copied > icon,
Copy.Copied > Text {
    color: #fff !important;
}

/* 圆形图标按钮 */
Copy.IconOnly {
    padding: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    justify-content: center;
}

Copy.IconOnly > icon {
    margin-right: 0;
}

Copy.IconOnly > Text {
    display: none;
}

/* 复制成功的工具提示 */
.CopyTooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.CopyTooltip.Show {
    opacity: 1;
    transform: translate(-50%, -18px);
}

/* 大小变体 */
Copy.SizeSmall {
    font-size: 12px;
    padding: 1px 3px;
}

Copy.SizeSmall > icon {
    font-size: 14px;
}

Copy.SizeSmall > Text {
    font-size: 12px;
}

Copy.SizeLarge {
    padding: 3px 6px;
}

Copy.SizeLarge > icon {
    font-size: 18px;
}

Copy.SizeLarge > Text {
    font-size: 16px;
}


/* ========== Drawer/Drawer.css ========== */
Drawer {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: var(--drawer-w, 400px);
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: transform var(--drawer-speed, 0.3s) ease;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    overflow: visible;
}
Drawer[open] { transform: translateX(0); }

Drawer[Direction="Left"] {
    left: 0;
    right: auto;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    transform: translateX(-100%);
}
Drawer[Direction="Left"][open] { transform: translateX(0); }

Drawer[Direction="Top"],
Drawer[Direction="Bottom"] {
    width: 100%;
    height: var(--drawer-h, 300px);
    left: 0;
    right: 0;
}
Drawer[Direction="Top"] {
    top: 0;
    bottom: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-100%);
}
Drawer[Direction="Top"][open] { transform: translateY(0); }
Drawer[Direction="Bottom"] {
    bottom: 0;
    top: auto;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    transform: translateY(100%);
}
Drawer[Direction="Bottom"][open] { transform: translateY(0); }

/* Width 快捷尺寸：Width 属性（内联变量）优先级更高，会覆盖此类 */
Drawer.Large { --drawer-w: 600px; }

/* 语义遮罩：fixed 铺满视口，画在面板内容之下 */
Drawer Back {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
Drawer[open] Back {
    opacity: 1;
    pointer-events: auto;
}
Drawer[Mask="false"] Back { display: none; }

/* 面板内容置于遮罩之上，并承载白色面板底色 */
Drawer Titles,
Drawer Bodies,
Drawer Footer {
    position: relative;
    z-index: 1;
    background: #fff;
}

Drawer Close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    color: rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.03);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}
Drawer Close:hover {
    color: #333;
    background-color: rgba(0,0,0,.06);
}
Drawer[ShowClose="false"] Close { display: none; }

Drawer Titles {
    padding: 16px 24px;
    padding-right: 48px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-weight: 500;
    flex: none;
}
Drawer Bodies {
    padding: 24px;
    flex: 1 1 auto;
    overflow-y: auto;
}
Drawer Footer {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    text-align: right;
    box-sizing: border-box;
    flex: none;
}

/* ========== Dropdown/Dropdown.css ========== */
/* 下拉按钮样式 */
Dropdown button {
    padding-left: 12px;
    padding-right: 12px;
    border: none;
    cursor: pointer;
    transition: all .2s ease; /* 与 Button 一致：激活态平滑过渡 */
}
Dropdown button icon{
   /* margin-left: 5px;*/
}

/* 容器 需要定位下拉内容 */
Dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
Dropdown ul {
    display: none;
    margin-top: 3px;
    padding: 0;
    position: absolute;
    background-color: #fff;
    min-width: 20px;
    border-radius: 5px;
    overflow: hidden; 
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    z-index: 10;
    left: 0;          /* 默认菜单左对齐（贴按钮左侧） */
    right: auto;
    text-align: left; /* 文本始终左对齐，不受菜单定位影响 */
}

/* 下拉菜单选项 */
Dropdown ul li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    list-style:none;
    white-space:nowrap;
    text-align: left;  /* 选项文本始终左对齐 */
    cursor: pointer;
}
/* 禁用 */
Dropdown ul li[disabled] {
    color: #bbb;
    opacity: 0.4;
    cursor: not-allowed;   /* 显示禁用光标 */
}
Dropdown ul li[disabled]:hover {
    background-color: transparent;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
Dropdown ul li:hover {
    background-color: #f1f1f1
}

Dropdown ul Titles {
    font-size: 80%;
    color: #999;
    padding: 8px 16px;
    display: block;
    white-space:nowrap;
    cursor: default;
}
Dropdown ul hr {
    margin: 0;
    height: 1px;
    background-color: #DDD;
    border: none;
}

/*打开下拉菜单*/
Dropdown.Open ul{
    display: block;
}

/* 菜单对齐方式：通过给 <Dropdown> 添加 Align 属性控制（推荐，优于 .Right 类）
   纯属性选择器，AJAX 片段注入也即时生效；文本对齐始终左对齐，不受定位影响 */
Dropdown[Align="Right"] ul {
    right: 0;
    left: auto;
}
Dropdown[Align="Left"] ul {
    left: 0;
    right: auto;
}
Dropdown[Align="Center"] ul {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
/* 兼容旧式 .Right 类 */
Dropdown.Right ul {
    right: 0;
    left: auto;
}

/* 下拉打开时按钮保持激活态：复用 Button 的 inset 阴影变暗技巧（不改底色、不硬编码颜色） */
Dropdown:hover button,
Dropdown.Open button {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset;
}

/* ======================================================================
   增强功能样式
   ====================================================================== */

/* 菜单项内的图标：与文字同行显示 */
Dropdown ul li icon {
    margin-right: 6px;
    vertical-align: middle;
}

/* 整组禁用：整个下拉变灰且不可交互 */
Dropdown[disabled],
Dropdown[Disabled],
Dropdown.Disabled {
    opacity: .5;
    pointer-events: none;   /* 整组（含按钮与菜单）不可点击/悬停 */
}
Dropdown[disabled] button,
Dropdown[Disabled] button,
Dropdown.Disabled button {
    cursor: not-allowed;
}

/* 单项禁用 + 提醒：禁用项点击后在按钮上方弹出提示条 */
.Dropdown-tip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 6px;
    background: #f44336;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 30;
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.Dropdown-tip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 视口边界翻转：菜单距底部过近时向上展开 */
Dropdown.Up ul {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 3px;
}
/* 视口边界翻转：默认/左对齐且距右侧过近时贴右展开 */
Dropdown.FlipH ul {
    left: auto;
    right: 0;
}

/* ========== Empty/Empty.css ========== */
/*空状态
===================================================================================================================================================*/
Empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #999;
}
Empty svg,
Empty img {
    width: 120px;
    height: 120px;
    max-width: 100%;
}
Empty .EmptyText {
    font-size: 14px;
    color: #999;
    margin-top: 8px;
    text-align: center;
}
Empty .EmptyDesc {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
    text-align: center;
}
Empty .EmptyAction {
    margin-top: 16px;
}

/* ========== FloatButton/FloatButton.css ========== */
FloatButton {
    position: fixed;
    right: 40px;
    bottom: 100px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1890ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(24,144,255,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s;
    font-size: 20px;
    user-select: none;
}

FloatButton:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(24,144,255,0.6);
}

FloatButton:active {
    transform: scale(0.95);
}

/* ========== 尺寸 ========== */
FloatButton.Small {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

FloatButton.Large {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* ========== 方形 ========== */
FloatButton.Square {
    border-radius: 8px;
}

/* ========== 预置颜色 ========== */
FloatButton.BackNILEBLUE      { background: var(--DefaultColor, #1890ff); box-shadow: 0 4px 12px rgba(24,144,255,0.4); }
FloatButton.BackGRAPEFRUIT    { background: #ED5565; box-shadow: 0 4px 12px rgba(237,85,101,0.4); }
FloatButton.BackSUNFLOWER     { background: #FFCE54; box-shadow: 0 4px 12px rgba(255,206,84,0.4); color: #333; }
FloatButton.BackGRASS         { background: #A0D468; box-shadow: 0 4px 12px rgba(160,212,104,0.4); }
FloatButton.BackMINT          { background: #48CFAD; box-shadow: 0 4px 12px rgba(72,207,173,0.4); }
FloatButton.BackORANGE        { background: #FC6E51; box-shadow: 0 4px 12px rgba(252,110,81,0.4); }
FloatButton.BackAQUA          { background: #4FC1E9; box-shadow: 0 4px 12px rgba(79,193,233,0.4); }
FloatButton.BackLAVENDER      { background: #AC92EC; box-shadow: 0 4px 12px rgba(172,146,236,0.4); }
FloatButton.BackPINKROSE      { background: #EC87C0; box-shadow: 0 4px 12px rgba(236,135,192,0.4); }
FloatButton.BackDARKGRAY      { background: #434A54; box-shadow: 0 4px 12px rgba(67,74,84,0.4); }

FloatButton.BackNILEBLUE:hover      { box-shadow: 0 6px 20px rgba(24,144,255,0.6); }
FloatButton.BackGRAPEFRUIT:hover    { box-shadow: 0 6px 20px rgba(237,85,101,0.6); }
FloatButton.BackSUNFLOWER:hover     { box-shadow: 0 6px 20px rgba(255,206,84,0.6); }
FloatButton.BackGRASS:hover         { box-shadow: 0 6px 20px rgba(160,212,104,0.6); }
FloatButton.BackMINT:hover          { box-shadow: 0 6px 20px rgba(72,207,173,0.6); }
FloatButton.BackORANGE:hover        { box-shadow: 0 6px 20px rgba(252,110,81,0.6); }
FloatButton.BackAQUA:hover          { box-shadow: 0 6px 20px rgba(79,193,233,0.6); }
FloatButton.BackLAVENDER:hover      { box-shadow: 0 6px 20px rgba(172,146,236,0.6); }
FloatButton.BackPINKROSE:hover      { box-shadow: 0 6px 20px rgba(236,135,192,0.6); }
FloatButton.BackDARKGRAY:hover      { box-shadow: 0 6px 20px rgba(67,74,84,0.6); }

/* ========== 位置 ========== */
FloatButton[data-position="TopLeft"]      { right: auto; bottom: auto; left: 40px; top: 40px; }
FloatButton[data-position="TopRight"]     { bottom: auto; top: 40px; }
FloatButton[data-position="BottomLeft"]   { right: auto; left: 40px; }
FloatButton[data-position="BottomRight"]  { /* 默认值 */ }
FloatButton[data-position="TopCenter"]    { right: auto; bottom: auto; left: 50%; top: 40px; transform: translateX(-50%); }
FloatButton[data-position="BottomCenter"] { right: auto; left: 50%; transform: translateX(-50%); }

FloatButton[data-position="TopCenter"]:hover,
FloatButton[data-position="BottomCenter"]:hover {
    transform: translateX(-50%) scale(1.1);
}

/* ========== Tooltip ========== */
FloatButton .FloatButtonTooltip {
    white-space: nowrap;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

FloatButton:hover .FloatButtonTooltip {
    opacity: 1;
}

/* ========== Badge 徽标 ========== */
FloatButton .FloatButtonBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    background: #ED5565;
    color: #fff;
    font-size: 11px;
    text-align: center;
    border-radius: 9px;
    pointer-events: none;
}

FloatButton .FloatButtonBadge.Dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
    top: 2px;
    right: 2px;
}

/* ========== 滚动显隐 ========== */
FloatButton[data-scrollshow] {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transition: opacity 0.3s, transform 0.3s;
}

FloatButton.ScrollVisible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

FloatButton.ScrollVisible:hover {
    transform: scale(1.1);
}

/* ========== 点击涟漪动画 ========== */
FloatButton .FloatButtonRipple {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    animation: FloatButtonRipple 0.6s ease-out;
    pointer-events: none;
}

@keyframes FloatButtonRipple {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ========== SpeedDial 展开子菜单 ========== */
FloatButtonGroup {
    position: fixed;
    z-index: 998;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    right: 40px;
    bottom: 100px;
}

FloatButtonGroup.Horizontal {
    flex-direction: row;
    bottom: auto;
}

FloatButtonGroup FloatButtonAction {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
    opacity: 0;
    transform: scale(0) translateY(20px);
    pointer-events: none;
    user-select: none;
}

FloatButtonGroup.Horizontal FloatButtonAction {
    transform: scale(0) translateX(20px);
}

FloatButtonGroup.Open FloatButtonAction {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

FloatButtonGroup.Horizontal.Open FloatButtonAction {
    transform: scale(1) translateX(0);
}

FloatButtonGroup.Open FloatButtonAction:nth-child(1) { transition-delay: 0.03s; }
FloatButtonGroup.Open FloatButtonAction:nth-child(2) { transition-delay: 0.06s; }
FloatButtonGroup.Open FloatButtonAction:nth-child(3) { transition-delay: 0.09s; }
FloatButtonGroup.Open FloatButtonAction:nth-child(4) { transition-delay: 0.12s; }
FloatButtonGroup.Open FloatButtonAction:nth-child(5) { transition-delay: 0.15s; }
FloatButtonGroup.Open FloatButtonAction:nth-child(6) { transition-delay: 0.18s; }

FloatButtonGroup FloatButtonAction:hover {
    background: #1890ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(24,144,255,0.4);
}

FloatButtonGroup FloatButtonAction .FloatButtonTooltip {
    white-space: nowrap;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

FloatButtonGroup.Horizontal FloatButtonAction .FloatButtonTooltip {
    right: auto;
    left: 48px;
}

FloatButtonGroup FloatButtonAction:hover .FloatButtonTooltip {
    opacity: 1;
}

/* SpeedDial 主按钮旋转 */
FloatButton.SpeedDialToggle .PlusIcon {
    transition: transform 0.3s;
    display: inline-block;
}

FloatButton.SpeedDialToggle.Open .PlusIcon {
    transform: rotate(135deg);
}


/* ========== FloatingToolbar/FloatingToolbar.css ========== */
/* ========== FloatingToolbar 浮动工具条 ========== */

FloatingToolbar {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--DefaultColor, #1890ff);
    color: #fff;
    z-index: 1000;
    font-size: 14px;
    user-select: none;
    opacity: 0;
    /* 默认横向 Bottom */
    flex-direction: row;
    height: 40px;
    padding: 0 8px;
    left: 50%;
    bottom: 0;
    top: auto;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

FloatingToolbar.Visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========== 位置：Top（横向） ========== */
FloatingToolbar[data-position="Top"] {
    left: 50%;
    top: 0;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-100%);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
FloatingToolbar[data-position="Top"].Visible {
    transform: translateX(-50%) translateY(0);
}

/* ========== 位置：Left（纵向） ========== */
FloatingToolbar[data-position="Left"] {
    left: 0;
    top: 50%;
    bottom: auto;
    right: auto;
    flex-direction: column;
    height: auto;
    width: 40px;
    padding: 8px 0;
    transform: translateY(-50%) translateX(-100%);
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.04);
}
FloatingToolbar[data-position="Left"].Visible {
    transform: translateY(-50%) translateX(0);
}

/* ========== 位置：Right（纵向） ========== */
FloatingToolbar[data-position="Right"] {
    right: 0;
    left: auto;
    top: 50%;
    bottom: auto;
    flex-direction: column;
    height: auto;
    width: 40px;
    padding: 8px 0;
    transform: translateY(-50%) translateX(100%);
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0,0,0,0.04);
}
FloatingToolbar[data-position="Right"].Visible {
    transform: translateY(-50%) translateX(0);
}

/* ========== 预置颜色 ========== */
FloatingToolbar.BackNILEBLUE   { background: var(--DefaultColor, #1890ff); }
FloatingToolbar.BackGRAPEFRUIT { background: #ED5565; }
FloatingToolbar.BackSUNFLOWER  { background: #FFCE54; color: #333; }
FloatingToolbar.BackGRASS      { background: #A0D468; }
FloatingToolbar.BackMINT       { background: #48CFAD; }
FloatingToolbar.BackORANGE     { background: #FC6E51; }
FloatingToolbar.BackAQUA       { background: #4FC1E9; }
FloatingToolbar.BackLAVENDER   { background: #AC92EC; }
FloatingToolbar.BackPINKROSE   { background: #EC87C0; }
FloatingToolbar.BackDARKGRAY   { background: #434A54; }

/* SUNFLOWER 深色文字 */
FloatingToolbar.BackSUNFLOWER Action,
FloatingToolbar.BackSUNFLOWER Close,
FloatingToolbar.BackSUNFLOWER Count,
FloatingToolbar.BackSUNFLOWER Num { color: #333; }
FloatingToolbar.BackSUNFLOWER Action:hover { color: #333; }

/* ========== 关闭按钮 ========== */
FloatingToolbar Close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin-right: 4px;
    flex-shrink: 0;
}
FloatingToolbar Close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* 纵向时关闭按钮 margin */
FloatingToolbar[data-position="Left"] Close,
FloatingToolbar[data-position="Right"] Close {
    margin-right: 0;
    margin-bottom: 4px;
}

/* ========== 计数显示 ========== */
FloatingToolbar Count {
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}
FloatingToolbar Count Num {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin: 0 3px;
}

/* 纵向时计数文字竖排 */
FloatingToolbar[data-position="Left"] Count,
FloatingToolbar[data-position="Right"] Count {
    flex-direction: column;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}
FloatingToolbar[data-position="Left"] Count Num,
FloatingToolbar[data-position="Right"] Count Num {
    margin: 2px 0;
    font-size: 14px;
}

/* ========== 分割线 ========== */
FloatingToolbar Divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.25);
    margin: 0 4px;
    flex-shrink: 0;
}

/* 纵向时分割线变横线 */
FloatingToolbar[data-position="Left"] Divider,
FloatingToolbar[data-position="Right"] Divider {
    width: 20px;
    height: 1px;
    margin: 4px 0;
}

/* ========== 操作按钮 ========== */
FloatingToolbar Action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    position: relative;
    flex-shrink: 0;
}
FloatingToolbar Action:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
FloatingToolbar Action:active {
    transform: scale(0.92);
}

/* ========== 禁用态 ========== */
FloatingToolbar Action[disabled],
FloatingToolbar Action[Disabled] {
    cursor: not-allowed;
}

/* 禁用时仅变暗图标，不影响 Tooltip 透明度 */
FloatingToolbar Action[disabled] > icon,
FloatingToolbar Action[Disabled] > icon {
    opacity: 0.35;
}

/* 禁用时不显示 hover 背景 */
FloatingToolbar Action[disabled]:hover,
FloatingToolbar Action[Disabled]:hover {
    background: transparent;
}

/* 启用状态下隐藏禁用提示 */
FloatingToolbar Action:not([disabled]):not([Disabled]) Tooltip.FTDisabledTip {
    display: none;
}

/* 禁用时隐藏普通 Tooltip */
FloatingToolbar Action[disabled] Tooltip:not(.FTDisabledTip),
FloatingToolbar Action[Disabled] Tooltip:not(.FTDisabledTip) {
    opacity: 0 !important;
    transform: translateX(-50%) scale(0.8) !important;
}
FloatingToolbar[data-position="Top"] Action[disabled] Tooltip:not(.FTDisabledTip),
FloatingToolbar[data-position="Top"] Action[Disabled] Tooltip:not(.FTDisabledTip) {
    transform: translateX(-50%) scale(0.8) !important;
}
FloatingToolbar[data-position="Left"] Action[disabled] Tooltip:not(.FTDisabledTip),
FloatingToolbar[data-position="Left"] Action[Disabled] Tooltip:not(.FTDisabledTip) {
    transform: translateY(-50%) scale(0.8) !important;
}
FloatingToolbar[data-position="Right"] Action[disabled] Tooltip:not(.FTDisabledTip),
FloatingToolbar[data-position="Right"] Action[Disabled] Tooltip:not(.FTDisabledTip) {
    transform: translateY(-50%) scale(0.8) !important;
}

/* 禁用提示（复用 Tooltip 定位，仅禁用时 hover 显示） */
FloatingToolbar Action[disabled]:hover Tooltip.FTDisabledTip,
FloatingToolbar Action[Disabled]:hover Tooltip.FTDisabledTip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
FloatingToolbar[data-position="Top"] Action[disabled]:hover Tooltip.FTDisabledTip,
FloatingToolbar[data-position="Top"] Action[Disabled]:hover Tooltip.FTDisabledTip {
    transform: translateX(-50%) scale(1);
}
FloatingToolbar[data-position="Left"] Action[disabled]:hover Tooltip.FTDisabledTip,
FloatingToolbar[data-position="Left"] Action[Disabled]:hover Tooltip.FTDisabledTip {
    transform: translateY(-50%) scale(1);
}
FloatingToolbar[data-position="Right"] Action[disabled]:hover Tooltip.FTDisabledTip,
FloatingToolbar[data-position="Right"] Action[Disabled]:hover Tooltip.FTDisabledTip {
    transform: translateY(-50%) scale(1);
}

/* ========== 按钮 Tooltip（横向：上方） ========== */
FloatingToolbar Action Tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
FloatingToolbar Action:hover Tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Top 位置 Tooltip 向下显示 */
FloatingToolbar[data-position="Top"] Action Tooltip {
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
}
FloatingToolbar[data-position="Top"] Action:hover Tooltip {
    transform: translateX(-50%) scale(1);
}

/* 纵向时 Tooltip 在右侧（Left） */
FloatingToolbar[data-position="Left"] Action Tooltip {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    z-index: 10000;
}
FloatingToolbar[data-position="Left"] Action:hover Tooltip {
    transform: translateY(-50%) scale(1);
}

/* 纵向时 Tooltip 在左侧（Right） */
FloatingToolbar[data-position="Right"] Action Tooltip {
    bottom: auto;
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    z-index: 10000;
}
FloatingToolbar[data-position="Right"] Action:hover Tooltip {
    transform: translateY(-50%) scale(1);
}

/* ========== Font/Font.css ========== */
/*字体大小
===========================================================================================================================================================*/
h1,h2,h3,h4,h5,h6,p{font-weight:500; margin: 0}

p {font-size:15px; line-height: 1.82em; letter-spacing:1px;}/*~15px*/
h1{font-size:36px; line-height:45px;}/*36px*/
h2{font-size:30px; line-height:40px;}/*30px*/
h3{font-size:24px; line-height:30px;}/*24px*/
h4{font-size:18px}/*18px*/
h5{font-size:15px}/*14px*/
h6{font-size:12px}/*12px*/

.h1{font-size:36px}/*36px*/
.h2{font-size:30px}/*30px*/
.h3{font-size:24px}/*24px*/
.h4{font-size:18px}/*18px*/
.h5{font-size:15px}/*14px*/
.h6{font-size:12px}/*12px*/


h1 small,h2 small,h3 small,h4 small,h5 small,h6  small{ color:#999999; font-weight: 300}
h1 small,h2 small,h3 small{font-size:65%}
h4 small,h5 small,h6 small{font-size:75%}

/*中心内容
===========================================================================================================================================================*/
.Lead{font-size: 18px; line-height: 26px; font-weight: 200;}

/*文本对齐方式
===========================================================================================================================================================*/
.Align-Left,
.Text-Left/*兼容旧版*/
{text-align: left;}
.Align-Center,
.Text-Center/*兼容旧版*/
{text-align: center;}
.Align-Right,
.Text-Right/*兼容旧版*/
{text-align: right;}

/*控制字体超出变成省略号===========================================================================================================================================================*/
.Omit{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.Omit2{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;	
}

.Omit3{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;	
}

.Omit4{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;	
}

.Omit5{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;	
}

.Omit6{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;	
}

.Omit7{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:7;
-webkit-box-orient:vertical;	
}

.Omit8{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:8;
-webkit-box-orient:vertical;	
}
/*文本强调
===========================================================================================================================================================*/
mark   { background-color: #FFC107;}/*文本背景高亮*/
del    {text-decoration-color: #E84C3D;}/*删除文本的线条颜色定义为红色*/
ins    {text-decoration-color: #4CAF50;}/*更新文本的线条颜色定义为绿色*/

/*改变大小写
===========================================================================================================================================================*/
.Text-lowercase/*兼容旧版*/,.Text-Lowercase{text-transform: uppercase}/*全大写*/
.Text-uppercase/*兼容旧版*/,.Text-Uppercase{text-transform: lowercase}/*全小写*/
.Text-capitalize/*兼容旧版*/,.Text-Capitalize{text-transform: capitalize}/*首字母大写*/

/*字重
===========================================================================================================================================================*/
.TextNormal   { font-weight: normal; }
.TextBold     { font-weight: bold; }
.TextLighter  { font-weight: lighter; }
.Font100      { font-weight: 100; }
.Font200      { font-weight: 200; }
.Font300      { font-weight: 300; }
.Font400      { font-weight: 400; }
.Font500      { font-weight: 500; }
.Font600      { font-weight: 600; }
.Font700      { font-weight: 700; }
.Font900      { font-weight: 900; }

/*字体样式
===========================================================================================================================================================*/
.TextItalic   { font-style: italic; }
.TextUnderline { text-decoration: underline; }
.TextLineThrough { text-decoration: line-through; }
.TextOverline  { text-decoration: overline; }
.TextNoDecor   { text-decoration: none !important; }

/*字间距
===========================================================================================================================================================*/
.TextSpacing1  { letter-spacing: 1px; }
.TextSpacing2  { letter-spacing: 2px; }
.TextSpacing3  { letter-spacing: 3px; }
.TextSpacing5  { letter-spacing: 5px; }
.TextSpacing10 { letter-spacing: 10px; }
.TextSpacingN1 { letter-spacing: -1px; }

/*行高
===========================================================================================================================================================*/
.TextHeight1   { line-height: 1; }
.TextHeight12  { line-height: 1.2; }
.TextHeight14  { line-height: 1.4; }
.TextHeight16  { line-height: 1.6; }
.TextHeight18  { line-height: 1.8; }
.TextHeight2   { line-height: 2; }
.TextHeight25  { line-height: 2.5; }
.TextHeight3   { line-height: 3; }

/*字体大小工具类
===========================================================================================================================================================*/
.Text10 { font-size: 10px; }
.Text11 { font-size: 11px; }
.Text12 { font-size: 12px; }
.Text13 { font-size: 13px; }
.Text14 { font-size: 14px; }
.Text15 { font-size: 15px; }
.Text16 { font-size: 16px; }
.Text18 { font-size: 18px; }
.Text20 { font-size: 20px; }
.Text24 { font-size: 24px; }
.Text28 { font-size: 28px; }
.Text32 { font-size: 32px; }
.Text36 { font-size: 36px; }
.Text48 { font-size: 48px; }

/*文本颜色
===========================================================================================================================================================*/
.TextMuted    { color: #999; }
.TextSubtle   { color: #bbb; }
.TextSuccess  { color: #52c41a; }
.TextDanger   { color: #ff4d4f; }
.TextWarning  { color: #faad14; }
.TextInfo     { color: #1890ff; }
.TextPrimary  { color: #1890ff; }

/*文本阴影
===========================================================================================================================================================*/
.TextShadow   { text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.TextShadowLg { text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.TextGlow     { text-shadow: 0 0 8px rgba(24,144,255,0.6); }

/*文本方向
===========================================================================================================================================================*/
.TextBreak     { word-break: break-all; }
.TextKeepAll   { word-break: keep-all; }
.TextNoWrap    { white-space: nowrap; }
.TextPreWrap   { white-space: pre-wrap; }

/*列表标记
===========================================================================================================================================================*/
.ListNone    { list-style: none; padding-left: 0; }
.ListDisc    { list-style-type: disc; padding-left: 20px; }
.ListCircle  { list-style-type: circle; padding-left: 20px; }
.ListSquare  { list-style-type: square; padding-left: 20px; }
.ListDecimal { list-style-type: decimal; padding-left: 20px; }


/* ========== Form/Form.css ========== */
/***************************************************************************************************************************************************
  Name   ：表单样式
  Explain：
**************************************************************************************************************************************************/
.Form Group,
Form Group {
	position: relative;
    display: flex;
    wrap: no-wrap;
	line-height: 40px;
    /*background-color: aquamarine;*/
}
.Form Group Button,
Form Group Button{
    white-space: nowrap;
}
/*表单按钮元素设置------------------------------------------*/
/*设置按钮之间的间距*/
.Form Group Button + Button,
Form Group Button + Button{
    margin-left: 15px;
}
/*按钮元素类型为重填（reset）的样式*/
.Form Group Button[type="reset"],
Form Group Button[type="reset"]{
    background-color: #eee;
	color: #999
}
/*鼠标经过样式*/
.Form Group Button[type="reset"]:hover,
Form Group Button[type="reset"]:hover{
	color: #555
}
/*表单标签元素设置------------------------------------------*/
.Form Group Labels,
Form Group Labels {
    flex: 1; /*这里设置为占比1，填充满剩余空间*/
    line-height: 40px;
    white-space: nowrap;
    color: #555;
    width: 100%;
	padding: 0;
}
.Form input,
Form input, 
.Form textarea,
Form textarea,
.Form select,
Form select {
    border-radius: 5px;
    width: 100%;
    border: 1px solid #DDD;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    font-family: "微软雅黑";
    transition: 0.3s;
}
.Form input,
Form input {
	position: relative;
    height: 40px;
    padding: 0 10px;
}
.Form textarea,
Form textarea {
    outline: none;
    padding: 10px;
    font-size: 15px;
}
.Form select,
Form select {
    position: relative;
    height: 40px;
    padding: 0 10px;
    outline: none;
    background-color: #fff;
    cursor: pointer;
}
/*禁用属性的表单样式*/
.Form input:disabled,
Form input:disabled,
.Form textarea:disabled,
Form textarea:disabled,
.Form select:disabled,
Form select:disabled {
    cursor: not-allowed;
}
/*placeholder表单样式*/
input::placeholder, 
textarea::placeholder {
    color: #bbb;
}

/*获得输入焦点时*/
.Form input:focus,
Form input:focus, 
.Form textarea:focus,
Form textarea:focus,
.Form select:focus,
Form select:focus {
    border: 1px solid #ccc;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
}

/***************************************************************************************************************************************************
  Name   ：复选框样式
  Explain：
**************************************************************************************************************************************************/
Form Group input[type='checkbox'],
.Form Group input[type='checkbox']{
	margin-top: 8px;
	margin-right: 8px;
}

Form input[type='checkbox'],
.Form input[type='checkbox'],
input[type='checkbox'].BSCheckbox,
.BatchSelectorContainer input[type='checkbox'] {
  --primary-color: var(--DefaultColor);
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* checkbox */
  --checkbox-diameter: 23px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

Form input[type='checkbox'], .Form input[type='checkbox'], input[type='checkbox'].BSCheckbox, .BatchSelectorContainer input[type='checkbox'],
Form input[type='checkbox'] *, .Form input[type='checkbox'] *, input[type='checkbox'].BSCheckbox *, .BatchSelectorContainer input[type='checkbox'] *,
Form input[type='checkbox'] *::before, .Form input[type='checkbox'] *::before, input[type='checkbox'].BSCheckbox *::before, .BatchSelectorContainer input[type='checkbox'] *::before,
Form input[type='checkbox'] *::after, .Form input[type='checkbox'] *::after, input[type='checkbox'].BSCheckbox *::after, .BatchSelectorContainer input[type='checkbox'] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Form input[type='checkbox'],.Form input[type='checkbox'], input[type='checkbox'].BSCheckbox, .BatchSelectorContainer input[type='checkbox'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

Form input[type='checkbox']::after,.Form input[type='checkbox']::after, input[type='checkbox'].BSCheckbox::after, .BatchSelectorContainer input[type='checkbox']::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

Form input[type='checkbox']::before,.Form input[type='checkbox']::before, input[type='checkbox'].BSCheckbox::before, .BatchSelectorContainer input[type='checkbox']::before {
  top: 45%;
  left: 50%;
  content: "";
  position: absolute;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}


Form input[type='checkbox']:hover,.Form input[type='checkbox']:hover, input[type='checkbox'].BSCheckbox:hover, .BatchSelectorContainer input[type='checkbox']:hover {
  border-color: var(--primary-color);
}

Form input[type='checkbox']:checked,.Form input[type='checkbox']:checked, input[type='checkbox'].BSCheckbox:checked, .BatchSelectorContainer input[type='checkbox']:checked {
  background: var(--primary-color);
  border-color: transparent;
}

Form input[type='checkbox']:checked::before,.Form input[type='checkbox']:checked::before, input[type='checkbox'].BSCheckbox:checked::before, .BatchSelectorContainer input[type='checkbox']:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

Form input[type='checkbox']:active:not(:checked)::after,.Form input[type='checkbox']:active:not(:checked)::after, input[type='checkbox'].BSCheckbox:active:not(:checked)::after, .BatchSelectorContainer input[type='checkbox']:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}

Form input[type='checkbox']:disabled,.Form input[type='checkbox']:disabled, input[type='checkbox'].BSCheckbox:disabled, .BatchSelectorContainer input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: not-allowed; /* 改变光标样式以表明元素不可用 */
  background-color: #eee;
}


/***************************************************************************************************************************************************
  Name   ：单选框样式
  Explain：
**************************************************************************************************************************************************/
Form Group input[type='radio'],.Form Group input[type='radio']{
	margin-top: 8px;
	margin-right: 8px;
}

Form input[type='radio'],.Form input[type='radio'] {
  --primary-color: var(--DefaultColor);
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* radio */
  --radio-diameter: 24px;
  --radio-border-radius: 50%;
  --radio-border-color: #d9d9d9;
  --radio-border-width: 1px;
  --radio-border-style: solid;
  /* dot */
  --dot-size: calc(var(--radio-diameter) / 2.5);
}

Form input[type='radio'],.Form input[type='radio'], 
Form input[type='radio'] *,.Form input[type='radio'] *, 
Form input[type='radio'] *::before,.Form input[type='radio'] *::before, 
Form input[type='radio'] *::after,.Form input[type='radio'] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Form input[type='radio'],.Form input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--radio-diameter);
  height: var(--radio-diameter);
  border-radius: var(--radio-border-radius);
  background: var(--secondary-color);
  border: var(--radio-border-width) var(--radio-border-style) var(--radio-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

/* 用于表示选中状态的小圆点 */
Form input[type='radio']::after,.Form input[type='radio']::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--secondary-color);
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

/* actions */

Form input[type='radio']:hover,.Form input[type='radio']:hover {
  border-color: var(--primary-color);
}

Form input[type='radio']:checked,.Form input[type='radio']:checked {
  background: var(--primary-color);
  border-color: transparent;
}

Form input[type='radio']:checked::after,.Form input[type='radio']:checked::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

Form input[type='radio']:active:not(:checked)::after,.Form input[type='radio']:active:not(:checked)::after {
  transition: none;
  opacity: 1;
}

Form input[type='radio']:disabled,.Form input[type='radio']:disabled {
  opacity: 0.5;
  cursor: not-allowed; /* 改变光标样式以表明元素不可用 */
  background-color: #eee;
}

.NoPass {
    position: relative;
    border-color: var(--GRAPEFRUIT);
    border-radius: 5px 0px 5px 5px;
    background-color: rgba(244, 67, 54, 0.06);
}	
NoPassText{
    border-radius: 4px 4px 0px 0px;
    background-color: var(--GRAPEFRUIT);
    color: #FFF;
    position: absolute;
    line-height: 15px;
    font-size: 11px;
    right: 0;
    top: -15px;
    padding: 0 5px;
}
.Pass {
    border-color: mediumseagreen;
    background-color: rgba(46, 204, 113, 0.08);
}


/* ========== Form/Selects.css ========== */
Selects {
    position: relative;
    width: 100%;
}
Selects Button {
    position: relative;
    padding: 0;
    margin-top: -40px;
    width: 40px;
    float: right;
    border-radius: 0px 5px 5px 0px;
    background-color: #f5f5f5;
    color: #888;
    border: 1px solid #ddd;
}
Selects Button:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.06) inset; /*用于实现按钮hover颜色渐变*/
}
Selects Button icon {
    margin: 0;
}
Selects OptionsList {
    display: none;
    position: absolute;
    border-radius: 5PX;
    width: 100%;
	margin-top: 44px;
    left: 0;
    background-color: #FFF;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
	z-index: 2;
	padding: 6px 0px;
}
Selects OptionsList hr {
    border: none; /* 移除默认的边框 */  
    border-top: 1px solid #ddd; /* 设置顶部边框为1像素宽度的实线，颜色为黑色 */  
    height: 0; /* 确保元素的高度为0，这样只显示边框 */ }

Selects OptionsList Options {
    display: block;
    line-height: 40px;
    cursor: pointer;
    padding: 0 15px;
	margin: 2px 8px;
	border-radius: 5px;
	transition: all .2s;
}
Selects OptionsList Options[Selected] {
    background-color: #F1F3F7
}
Selects OptionsList Options[Selected]:active {
    content: "1";
}
Selects OptionsList Options:hover {
    background-color: #F1F3F7
}
/*列表向上显示*/
Selects.ShowUp OptionsList{
    bottom: 44px;
	box-shadow: 3px 0 10px rgba(0, 0, 0, 0.15)!important;
}
/*列表高度限制*/
Selects.Scroll OptionsList{
    max-height: 215px;
	overflow-y: auto;
}


/* ========== Global/Global.css ========== */
body{
    font-family:"微软雅黑";
}
/*禁止文本自动换行，在一行内显示所有文本。*/
.TextNowrap{
    white-space: nowrap; 
} 


/* ========== Grid/Grid.css ========== */
html{
	font-family:sans-serif;
	font-size:100%;
	line-height:1;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-webkit-font-SMoothing:antialiased;
	-moz-osx-font-SMoothing:grayscale;
	box-sizing:border-box
	}
*,:before,:after{
    box-sizing:inherit
}

.Row,Row {margin:0 auto}
.Row:before,Row:before,
.Row:after,Row:after {
    content:''; display:table
}
.Row:after,Row:after {
    clear:both
}

/*Row下的所有格子均左对齐*/
.Row [class*="XS-"], Row [class*="XS-"], 
.Row [class*="SM-"], Row [class*="SM-"], 
.Row [class*="MD-"], Row [class*="MD-"], 
.Row [class*="LG-"], Row [class*="LG-"], 
.Row [class*="XL-"],Row [class*="XL-"]{
    float:left
}

/*可用类*/
.Hidden{display: none!important;}/*隐藏*/

/*网格间距设置
=======================================================================================================================================================*/
Row.Space-1  {margin:-.5px}  Row.Space-1>*  {padding:.5px}
Row.Space-3  {margin:-1.5px} Row.Space-3>*  {padding:1.5px}
Row.Space-5  {margin:-2.5px} Row.Space-5>*  {padding:2.5px}
Row.Space-8  {margin:-4px}   Row.Space-8>*  {padding:4px}
Row.Space-10 {margin:-5px}   Row.Space-10>* {padding:5px}
Row.Space-12 {margin:-6px}   Row.Space-12>* {padding:6px}
Row.Space-15 {margin:-7.5px} Row.Space-15>* {padding:7.5px}
Row.Space-18 {margin:-9px}   Row.Space-18>* {padding:9px}
Row.Space-20 {margin:-10px}  Row.Space-20>* {padding:10px}
Row.Space-22 {margin:-11px}  Row.Space-22>* {padding:11px}
Row.Space-28 {margin:-14px}  Row.Space-28>* {padding:14px}
Row.Space-30 {margin:-15px}  Row.Space-30>* {padding:15px}
Row.Space-40 {margin:-20px}  Row.Space-40>* {padding:20px}
Row.Space-50 {margin:-25px}  Row.Space-50>* {padding:25px}
Row.Space-60 {margin:-30px}  Row.Space-60>* {padding:30px}
Row.Space-70 {margin:-35px}  Row.Space-70>* {padding:35px}
Row.Space-80 {margin:-40px}  Row.Space-80>* {padding:40px}

/*网格属性
=======================================================================================================================================================*/
@media only all and (max-width: 479px) {/*手机竖放时*/
.XS-0 {display:none}/*超小屏幕-手机*/
.XS-1,.XS-2,.XS-3,.XS-4,.XS-5,.XS-6,.XS-7,.XS-8,.XS-9,.XS-10,.XS-11,.XS-12,.XS-13,.XS-14,.XS-15,.XS-16,.XS-17,.XS-18,.XS-18,.XS-20,.XS-21,.XS-22,.XS-23,.XS-24 {display:inline-block}
.XS-1 {width: 4.16666666666667%} 
.XS-2 {width: 8.33333333333333%} 
.XS-3 {width: 12.5%} 
.XS-4 {width: 16.6666666666667%} 
.XS-5 {width: 20.8333333333333%} 
.XS-6 {width: 25%} 
.XS-7 {width: 29.1666666666667%} 
.XS-8 {width: 33.3333333333333%} 
.XS-9 {width: 37.5%} 
.XS-10 {width: 41.6666666666667%} 
.XS-11 {width: 45.8333333333333%} 
.XS-12 {width: 50%} 
.XS-13 {width: 54.1666666666667%} 
.XS-14 {width: 58.3333333333333%} 
.XS-15 {width: 62.5%} 
.XS-16 {width: 66.6666666666667%} 
.XS-17 {width: 70.8333333333333%} 
.XS-18 {width: 75%} 
.XS-19 {width: 79.1666666666667%} 
.XS-20 {width: 83.3333333333333%} 
.XS-21 {width: 87.5%} 
.XS-22 {width: 91.6666666666667%} 
.XS-23 {width: 95.8333333333334%} 
.XS-24 {width: 100%} 
/*XS偏移*/
.XS-Offset-1 {margin-left: 4.16666666666667%} 
.XS-Offset-2 {margin-left: 8.33333333333333%} 
.XS-Offset-3 {margin-left: 12.5%} 
.XS-Offset-4 {margin-left: 16.6666666666667%} 
.XS-Offset-5 {margin-left: 20.8333333333333%} 
.XS-Offset-6 {margin-left: 25%} 
.XS-Offset-7 {margin-left: 29.1666666666667%} 
.XS-Offset-8 {margin-left: 33.3333333333333%} 
.XS-Offset-9 {margin-left: 37.5%} 
.XS-Offset-10 {margin-left: 41.6666666666667%} 
.XS-Offset-11 {margin-left: 45.8333333333333%} 
.XS-Offset-12 {margin-left: 50%} 
.XS-Offset-13 {margin-left: 54.1666666666667%} 
.XS-Offset-14 {margin-left: 58.3333333333333%} 
.XS-Offset-15 {margin-left: 62.5%} 
.XS-Offset-16 {margin-left: 66.6666666666667%} 
.XS-Offset-17 {margin-left: 70.8333333333333%} 
.XS-Offset-18 {margin-left: 75%} 
.XS-Offset-19 {margin-left: 79.1666666666667%} 
.XS-Offset-20 {margin-left: 83.3333333333333%} 
.XS-Offset-21 {margin-left: 87.5%} 
.XS-Offset-22 {margin-left: 91.6666666666667%} 
.XS-Offset-23 {margin-left: 95.8333333333334%} 
.XS-Offset-24 {margin-left: 100%} 

/*可用类*/
.Hidden-XS{display: none!important;}/*隐藏*/	
	
/*消除间距*/
.Eliminat-Space-XS {margin-left: 0!important; margin-right: 0!important;}  .Eliminat-Space-XS>* {padding-left: 0!important; padding-right: 0!important;}
}

@media only all and (min-width: 480px) and (max-width: 767px) {/*手机横放以及平板竖放时：*/
.SM-0 {display:none}
.SM-1,.SM-2,.SM-3,.SM-4,.SM-5,.SM-6,.SM-7,.SM-8,.SM-9,.SM-10,.SM-11,.SM-12,.SM-13,.SM-14,.SM-15,.SM-16,.SM-17,.SM-18,.SM-18,.SM-20,.SM-21,.SM-22,.SM-23,.SM-24 {display:inline-block}
.SM-1 {width: 4.16666666666667%} 
.SM-2 {width: 8.33333333333333%} 
.SM-3 {width: 12.5%} 
.SM-4 {width: 16.6666666666667%} 
.SM-5 {width: 20.8333333333333%} 
.SM-6 {width: 25%} 
.SM-7 {width: 29.1666666666667%} 
.SM-8 {width: 33.3333333333333%} 
.SM-9 {width: 37.5%} 
.SM-10 {width: 41.6666666666667%} 
.SM-11 {width: 45.8333333333333%} 
.SM-12 {width: 50%} 
.SM-13 {width: 54.1666666666667%} 
.SM-14 {width: 58.3333333333333%} 
.SM-15 {width: 62.5%} 
.SM-16 {width: 66.6666666666667%} 
.SM-17 {width: 70.8333333333333%} 
.SM-18 {width: 75%} 
.SM-19 {width: 79.1666666666667%} 
.SM-20 {width: 83.3333333333333%} 
.SM-21 {width: 87.5%} 
.SM-22 {width: 91.6666666666667%} 
.SM-23 {width: 95.8333333333334%} 
.SM-24 {width: 100%} 
/*SM偏移*/
.SM-Offset-1 {margin-left: 4.16666666666667%} 
.SM-Offset-2 {margin-left: 8.33333333333333%} 
.SM-Offset-3 {margin-left: 12.5%} 
.SM-Offset-4 {margin-left: 16.6666666666667%} 
.SM-Offset-5 {margin-left: 20.8333333333333%} 
.SM-Offset-6 {margin-left: 25%} 
.SM-Offset-7 {margin-left: 29.1666666666667%} 
.SM-Offset-8 {margin-left: 33.3333333333333%} 
.SM-Offset-9 {margin-left: 37.5%} 
.SM-Offset-10 {margin-left: 41.6666666666667%} 
.SM-Offset-11 {margin-left: 45.8333333333333%} 
.SM-Offset-12 {margin-left: 50%} 
.SM-Offset-13 {margin-left: 54.1666666666667%} 
.SM-Offset-14 {margin-left: 58.3333333333333%} 
.SM-Offset-15 {margin-left: 62.5%} 
.SM-Offset-16 {margin-left: 66.6666666666667%} 
.SM-Offset-17 {margin-left: 70.8333333333333%} 
.SM-Offset-18 {margin-left: 75%} 
.SM-Offset-19 {margin-left: 79.1666666666667%} 
.SM-Offset-20 {margin-left: 83.3333333333333%} 
.SM-Offset-21 {margin-left: 87.5%} 
.SM-Offset-22 {margin-left: 91.6666666666667%} 
.SM-Offset-23 {margin-left: 95.8333333333334%} 
.SM-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-SM{display: none!important;}/*隐藏*/
	
/*消除间距*/
.Eliminat-Space-SM {margin-left: 0; margin-right: 0;}  .Eliminat-Space-SM>* {padding-left: 0; padding-right: 0;}

}

@media only all and (min-width: 768px) and (max-width: 1430px) {/*平板横放时*/
.MD-0 {display:none}
.MD-1,.MD-2,.MD-3,.MD-4,.MD-5,.MD-6,.MD-7,.MD-8,.MD-9,.MD-10,.MD-11,.MD-12,.MD-13,.MD-14,.MD-15,.MD-16,.MD-17,.MD-18,.MD-18,.MD-20,.MD-21,.MD-22,.MD-23,.MD-24 {display:inline-block}
.MD-1 {width: 4.16666666666667%} 
.MD-2 {width: 8.33333333333333%} 
.MD-3 {width: 12.5%} 
.MD-4 {width: 16.6666666666667%} 
.MD-5 {width: 20.8333333333333%} 
.MD-6 {width: 25%} 
.MD-7 {width: 29.1666666666667%} 
.MD-8 {width: 33.3333333333333%} 
.MD-9 {width: 37.5%} 
.MD-10 {width: 41.6666666666667%} 
.MD-11 {width: 45.8333333333333%} 
.MD-12 {width: 50%} 
.MD-13 {width: 54.1666666666667%} 
.MD-14 {width: 58.3333333333333%} 
.MD-15 {width: 62.5%} 
.MD-16 {width: 66.6666666666667%} 
.MD-17 {width: 70.8333333333333%} 
.MD-18 {width: 75%} 
.MD-19 {width: 79.1666666666667%} 
.MD-20 {width: 83.3333333333333%} 
.MD-21 {width: 87.5%} 
.MD-22 {width: 91.6666666666667%} 
.MD-23 {width: 95.8333333333334%} 
.MD-24 {width: 100%} 
/*MD偏移*/
.MD-Offset-1 {margin-left: 4.16666666666667%} 
.MD-Offset-2 {margin-left: 8.33333333333333%} 
.MD-Offset-3 {margin-left: 12.5%} 
.MD-Offset-4 {margin-left: 16.6666666666667%} 
.MD-Offset-5 {margin-left: 20.8333333333333%} 
.MD-Offset-6 {margin-left: 25%} 
.MD-Offset-7 {margin-left: 29.1666666666667%} 
.MD-Offset-8 {margin-left: 33.3333333333333%} 
.MD-Offset-9 {margin-left: 37.5%} 
.MD-Offset-10 {margin-left: 41.6666666666667%} 
.MD-Offset-11 {margin-left: 45.8333333333333%} 
.MD-Offset-12 {margin-left: 50%} 
.MD-Offset-13 {margin-left: 54.1666666666667%} 
.MD-Offset-14 {margin-left: 58.3333333333333%} 
.MD-Offset-15 {margin-left: 62.5%} 
.MD-Offset-16 {margin-left: 66.6666666666667%} 
.MD-Offset-17 {margin-left: 70.8333333333333%} 
.MD-Offset-18 {margin-left: 75%} 
.MD-Offset-19 {margin-left: 79.1666666666667%} 
.MD-Offset-20 {margin-left: 83.3333333333333%} 
.MD-Offset-21 {margin-left: 87.5%} 
.MD-Offset-22 {margin-left: 91.6666666666667%} 
.MD-Offset-23 {margin-left: 95.8333333333334%} 
.MD-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-MD{display: none!important;}/*隐藏*/
	
/*消除间距*/
.Eliminat-Space-MD {margin:0px!important;}  .Eliminat-Space-MD>* {padding:0px!important;}

}

@media only all and (min-width: 1431px) and (max-width: 1919px) {/*大型屏幕*/
.LG-0 {display:none}
.LG-1,.LG-2,.LG-3,.LG-4,.LG-5,.LG-6,.LG-7,.LG-8,.LG-9,.LG-10,.LG-11,.LG-12,.LG-13,.LG-14,.LG-15,.LG-16,.LG-17,.LG-18,.LG-18,.LG-20,.LG-21,.LG-22,.LG-23,.LG-24 {display:inline-block}
.LG-1 {width: 4.16666666666667%} 
.LG-2 {width: 8.33333333333333%} 
.LG-3 {width: 12.5%}
.LG-4 {width: 16.6666666666667%} 
.LG-5 {width: 20.8333333333333%} 
.LG-6 {width: 25%} 
.LG-7 {width: 29.1666666666667%} 
.LG-8 {width: 33.3333333333333%} 
.LG-9 {width: 37.5%} 
.LG-10 {width: 41.6666666666667%} 
.LG-11 {width: 45.8333333333333%} 
.LG-12 {width: 50%} 
.LG-13 {width: 54.1666666666667%} 
.LG-14 {width: 58.3333333333333%} 
.LG-15 {width: 62.5%} 
.LG-16 {width: 66.6666666666667%} 
.LG-17 {width: 70.8333333333333%} 
.LG-18 {width: 75%} 
.LG-19 {width: 79.1666666666667%} 
.LG-20 {width: 83.3333333333333%} 
.LG-21 {width: 87.5%} 
.LG-22 {width: 91.6666666666667%} 
.LG-23 {width: 95.8333333333334%} 
.LG-24 {width: 100%} 
/*LG偏移*/
.LG-Offset-1 {margin-left: 4.16666666666667%} 
.LG-Offset-2 {margin-left: 8.33333333333333%} 
.LG-Offset-3 {margin-left: 12.5%} 
.LG-Offset-4 {margin-left: 16.6666666666667%} 
.LG-Offset-5 {margin-left: 20.8333333333333%} 
.LG-Offset-6 {margin-left: 25%} 
.LG-Offset-7 {margin-left: 29.1666666666667%} 
.LG-Offset-8 {margin-left: 33.3333333333333%} 
.LG-Offset-9 {margin-left: 37.5%} 
.LG-Offset-10 {margin-left: 41.6666666666667%} 
.LG-Offset-11 {margin-left: 45.8333333333333%} 
.LG-Offset-12 {margin-left: 50%} 
.LG-Offset-13 {margin-left: 54.1666666666667%} 
.LG-Offset-14 {margin-left: 58.3333333333333%} 
.LG-Offset-15 {margin-left: 62.5%} 
.LG-Offset-16 {margin-left: 66.6666666666667%} 
.LG-Offset-17 {margin-left: 70.8333333333333%} 
.LG-Offset-18 {margin-left: 75%} 
.LG-Offset-19 {margin-left: 79.1666666666667%} 
.LG-Offset-20 {margin-left: 83.3333333333333%} 
.LG-Offset-21 {margin-left: 87.5%} 
.LG-Offset-22 {margin-left: 91.6666666666667%} 
.LG-Offset-23 {margin-left: 95.8333333333334%} 
.LG-Offset-24 {margin-left: 100%} 

/*可用类*/
.Hidden-LG{display: none!important;}/*隐藏*/	
	
/*消除间距*/
.Eliminat-Space-LG {margin-left: 0!important; margin-right: 0!important;}  .Eliminat-Space-LG>* {padding-left: 0!important; padding-right: 0!important;}
}

@media only all and (min-width: 1900px) and (max-width: 3000px) {
.XL-0 {display:none}
.XL-1,.XL-2,.XL-3,.XL-4,.XL-5,.XL-6,.XL-7,.XL-8,.XL-9,.XL-10,.XL-11,.XL-12,.XL-13,.XL-14,.XL-15,.XL-16,.XL-17,.XL-18,.XL-18,.XL-20,.XL-21,.XL-22,.XL-23,.XL-24 {display:inline-block}
.XL-1 {width: 4.16666666666667%} 
.XL-2 {width: 8.33333333333333%} 
.XL-3 {width: 12.5%} 
.XL-4 {width: 16.6666666666667%} 
.XL-5 {width: 20.8333333333333%} 
.XL-6 {width: 25%} 
.XL-7 {width: 29.1666666666667%} 
.XL-8 {width: 33.3333333333333%} 
.XL-9 {width: 37.5%} 
.XL-10 {width: 41.6666666666667%} 
.XL-11 {width: 45.8333333333333%} 
.XL-12 {width: 50%} 
.XL-13 {width: 54.1666666666667%} 
.XL-14 {width: 58.3333333333333%} 
.XL-15 {width: 62.5%} 
.XL-16 {width: 66.6666666666667%} 
.XL-17 {width: 70.8333333333333%} 
.XL-18 {width: 75%} 
.XL-19 {width: 79.1666666666667%} 
.XL-20 {width: 83.3333333333333%} 
.XL-21 {width: 87.5%} 
.XL-22 {width: 91.6666666666667%} 
.XL-23 {width: 95.8333333333334%} 
.XL-24 {width: 100%} 
/*XL偏移*/
.XL-Offset-1 {margin-left: 4.16666666666667%} 
.XL-Offset-2 {margin-left: 8.33333333333333%} 
.XL-Offset-3 {margin-left: 12.5%} 
.XL-Offset-4 {margin-left: 16.6666666666667%} 
.XL-Offset-5 {margin-left: 20.8333333333333%} 
.XL-Offset-6 {margin-left: 25%} 
.XL-Offset-7 {margin-left: 29.1666666666667%} 
.XL-Offset-8 {margin-left: 33.3333333333333%} 
.XL-Offset-9 {margin-left: 37.5%} 
.XL-Offset-10 {margin-left: 41.6666666666667%} 
.XL-Offset-11 {margin-left: 45.8333333333333%} 
.XL-Offset-12 {margin-left: 50%} 
.XL-Offset-13 {margin-left: 54.1666666666667%} 
.XL-Offset-14 {margin-left: 58.3333333333333%} 
.XL-Offset-15 {margin-left: 62.5%} 
.XL-Offset-16 {margin-left: 66.6666666666667%} 
.XL-Offset-17 {margin-left: 70.8333333333333%} 
.XL-Offset-18 {margin-left: 75%} 
.XL-Offset-19 {margin-left: 79.1666666666667%} 
.XL-Offset-20 {margin-left: 83.3333333333333%} 
.XL-Offset-21 {margin-left: 87.5%} 
.XL-Offset-22 {margin-left: 91.6666666666667%} 
.XL-Offset-23 {margin-left: 95.8333333333334%} 
.XL-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-XL{display: none!important;}/*隐藏*/
	
/*消除间距*/ 
.Eliminat-Space-XL {margin:0px!important;}  .Eliminat-Space-XL>* {padding:0px!important;}
	
}

/* ========== Grid/GridNew.css ========== */
/* ======================================================================================
   ANUI 3.0 新网格系统 —— <Grid> / <Cell>
   基于 Flex + gap，全驼峰命名，与旧 Grid.css（Row/Column/div）完全隔离
   ====================================================================================== */

/* 基础 */
Grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
Cell {
    max-width: 100%;
}

/* ==================== 间距（负 margin + padding） ==================== */
Grid.Gap1  { margin: -0.5px; }   Grid.Gap1  > Cell { padding: 0.5px; }
Grid.Gap3  { margin: -1.5px; }   Grid.Gap3  > Cell { padding: 1.5px; }
Grid.Gap5  { margin: -2.5px; }   Grid.Gap5  > Cell { padding: 2.5px; }
Grid.Gap8  { margin: -4px; }     Grid.Gap8  > Cell { padding: 4px; }
Grid.Gap10 { margin: -5px; }     Grid.Gap10 > Cell { padding: 5px; }
Grid.Gap12 { margin: -6px; }     Grid.Gap12 > Cell { padding: 6px; }
Grid.Gap15 { margin: -7.5px; }   Grid.Gap15 > Cell { padding: 7.5px; }
Grid.Gap18 { margin: -9px; }     Grid.Gap18 > Cell { padding: 9px; }
Grid.Gap20 { margin: -10px; }    Grid.Gap20 > Cell { padding: 10px; }
Grid.Gap22 { margin: -11px; }    Grid.Gap22 > Cell { padding: 11px; }
Grid.Gap28 { margin: -14px; }    Grid.Gap28 > Cell { padding: 14px; }
Grid.Gap30 { margin: -15px; }    Grid.Gap30 > Cell { padding: 15px; }
Grid.Gap40 { margin: -20px; }    Grid.Gap40 > Cell { padding: 20px; }
Grid.Gap50 { margin: -25px; }    Grid.Gap50 > Cell { padding: 25px; }
Grid.Gap60 { margin: -30px; }    Grid.Gap60 > Cell { padding: 30px; }
Grid.Gap70 { margin: -35px; }    Grid.Gap70 > Cell { padding: 35px; }
Grid.Gap80 { margin: -40px; }    Grid.Gap80 > Cell { padding: 40px; }

/* ==================== 水平对齐 ==================== */
Grid.JustifyStart   { justify-content: flex-start; }
Grid.JustifyCenter  { justify-content: center; }
Grid.JustifyEnd     { justify-content: flex-end; }
Grid.JustifyBetween { justify-content: space-between; }
Grid.JustifyAround  { justify-content: space-around; }

/* ==================== 垂直对齐 ==================== */
Grid.AlignStart  { align-items: flex-start; }
Grid.AlignCenter { align-items: center; }
Grid.AlignEnd    { align-items: flex-end; }

/* ==================== 单列独立对齐 ==================== */
Cell.SelfStart  { align-self: flex-start; }
Cell.SelfCenter { align-self: center; }
Cell.SelfEnd    { align-self: flex-end; }

/* ==================== 换行 / 反转 / 垂直 ==================== */
Grid.Nowrap  { flex-wrap: nowrap !important; overflow-x: auto; }
Grid.Reverse { flex-direction: row-reverse; }
Grid.Vertical { flex-direction: column; }
Grid.Vertical > Cell { width: 100% !important; }

/* ==================== 消除间距 ==================== */
Grid.NoGap { margin: 0; }
Grid.NoGap > Cell { padding: 0; }

/* ==================== 列拉伸（显式声明） ==================== */
Grid.AlignStretch { align-items: stretch; }

/* ==================== 列增长（占据剩余空间） ==================== */
Cell.Grow1 { flex-grow: 1; }
Cell.Grow2 { flex-grow: 2; }
Cell.Grow3 { flex-grow: 3; }

/* ==================== 占满（单个 Cell 撑满整行剩余） ==================== */
Cell.Fill { flex: 1 1 auto; }

/* ==================== 禁止收缩 ==================== */
Cell.Shrink0 { flex-shrink: 0; }

/* ==================== 列排序 ==================== */
Cell.Order1 { order: 1; }
Cell.Order2 { order: 2; }
Cell.Order3 { order: 3; }
Cell.Order4 { order: 4; }
Cell.Order5 { order: 5; }

/* ==================== 等宽自动列 ==================== */
Grid > Cell:not([class*="XS"]):not([class*="SM"]):not([class*="MD"]):not([class*="LG"]):not([class*="XL"]):not(.Order1):not(.Order2):not(.Order3):not(.Order4):not(.Order5) {
    flex: 1 1 0;
    width: auto;
}

/* ==================== 隐藏类 ==================== */
Grid.Hidden, Cell.Hidden { display: none !important; }
Grid.HiddenXS, Cell.HiddenXS { display: none !important; }
Grid.HiddenSM, Cell.HiddenSM { display: none !important; }
Grid.HiddenMD, Cell.HiddenMD { display: none !important; }
Grid.HiddenLG, Cell.HiddenLG { display: none !important; }
Grid.HiddenXL, Cell.HiddenXL { display: none !important; }

/* ==================== 列宽（XL 默认） ==================== */
.XL1  { width: 4.16666666666667%; }
.XL2  { width: 8.33333333333333%; }
.XL3  { width: 12.5%; }
.XL4  { width: 16.6666666666667%; }
.XL5  { width: 20.8333333333333%; }
.XL6  { width: 25%; }
.XL7  { width: 29.1666666666667%; }
.XL8  { width: 33.3333333333333%; }
.XL9  { width: 37.5%; }
.XL10 { width: 41.6666666666667%; }
.XL11 { width: 45.8333333333333%; }
.XL12 { width: 50%; }
.XL13 { width: 54.1666666666667%; }
.XL14 { width: 58.3333333333333%; }
.XL15 { width: 62.5%; }
.XL16 { width: 66.6666666666667%; }
.XL17 { width: 70.8333333333333%; }
.XL18 { width: 75%; }
.XL19 { width: 79.1666666666667%; }
.XL20 { width: 83.3333333333333%; }
.XL21 { width: 87.5%; }
.XL22 { width: 91.6666666666667%; }
.XL23 { width: 95.8333333333334%; }
.XL24 { width: 100%; }
.XL0  { display: none; }

/* XL 偏移 */
Cell.XLOffset1  { margin-left: 4.16666666666667%; }
Cell.XLOffset2  { margin-left: 8.33333333333333%; }
Cell.XLOffset3  { margin-left: 12.5%; }
Cell.XLOffset4  { margin-left: 16.6666666666667%; }
Cell.XLOffset5  { margin-left: 20.8333333333333%; }
Cell.XLOffset6  { margin-left: 25%; }
Cell.XLOffset7  { margin-left: 29.1666666666667%; }
Cell.XLOffset8  { margin-left: 33.3333333333333%; }
Cell.XLOffset9  { margin-left: 37.5%; }
Cell.XLOffset10 { margin-left: 41.6666666666667%; }
Cell.XLOffset11 { margin-left: 45.8333333333333%; }
Cell.XLOffset12 { margin-left: 50%; }
Cell.XLOffset13 { margin-left: 54.1666666666667%; }
Cell.XLOffset14 { margin-left: 58.3333333333333%; }
Cell.XLOffset15 { margin-left: 62.5%; }
Cell.XLOffset16 { margin-left: 66.6666666666667%; }
Cell.XLOffset17 { margin-left: 70.8333333333333%; }
Cell.XLOffset18 { margin-left: 75%; }
Cell.XLOffset19 { margin-left: 79.1666666666667%; }
Cell.XLOffset20 { margin-left: 83.3333333333333%; }
Cell.XLOffset21 { margin-left: 87.5%; }
Cell.XLOffset22 { margin-left: 91.6666666666667%; }
Cell.XLOffset23 { margin-left: 95.8333333333334%; }
Cell.XLOffset24 { margin-left: 100%; }

/* ==================== 响应式断点 ==================== */

@media only all and (max-width: 479px) {
.XS1  { width: 4.16666666666667%; }
.XS2  { width: 8.33333333333333%; }
.XS3  { width: 12.5%; }
.XS4  { width: 16.6666666666667%; }
.XS5  { width: 20.8333333333333%; }
.XS6  { width: 25%; }
.XS7  { width: 29.1666666666667%; }
.XS8  { width: 33.3333333333333%; }
.XS9  { width: 37.5%; }
.XS10 { width: 41.6666666666667%; }
.XS11 { width: 45.8333333333333%; }
.XS12 { width: 50%; }
.XS13 { width: 54.1666666666667%; }
.XS14 { width: 58.3333333333333%; }
.XS15 { width: 62.5%; }
.XS16 { width: 66.6666666666667%; }
.XS17 { width: 70.8333333333333%; }
.XS18 { width: 75%; }
.XS19 { width: 79.1666666666667%; }
.XS20 { width: 83.3333333333333%; }
.XS21 { width: 87.5%; }
.XS22 { width: 91.6666666666667%; }
.XS23 { width: 95.8333333333334%; }
.XS24 { width: 100%; }
.XS0  { display: none; }
Cell.XSOffset1  { margin-left: 4.16666666666667%; }
Cell.XSOffset2  { margin-left: 8.33333333333333%; }
Cell.XSOffset3  { margin-left: 12.5%; }
Cell.XSOffset4  { margin-left: 16.6666666666667%; }
Cell.XSOffset5  { margin-left: 20.8333333333333%; }
Cell.XSOffset6  { margin-left: 25%; }
Cell.XSOffset7  { margin-left: 29.1666666666667%; }
Cell.XSOffset8  { margin-left: 33.3333333333333%; }
Cell.XSOffset9  { margin-left: 37.5%; }
Cell.XSOffset10 { margin-left: 41.6666666666667%; }
Cell.XSOffset11 { margin-left: 45.8333333333333%; }
Cell.XSOffset12 { margin-left: 50%; }
Cell.XSOffset13 { margin-left: 54.1666666666667%; }
Cell.XSOffset14 { margin-left: 58.3333333333333%; }
Cell.XSOffset15 { margin-left: 62.5%; }
Cell.XSOffset16 { margin-left: 66.6666666666667%; }
Cell.XSOffset17 { margin-left: 70.8333333333333%; }
Cell.XSOffset18 { margin-left: 75%; }
Cell.XSOffset19 { margin-left: 79.1666666666667%; }
Cell.XSOffset20 { margin-left: 83.3333333333333%; }
Cell.XSOffset21 { margin-left: 87.5%; }
Cell.XSOffset22 { margin-left: 91.6666666666667%; }
Cell.XSOffset23 { margin-left: 95.8333333333334%; }
Cell.XSOffset24 { margin-left: 100%; }
}

@media only all and (min-width: 480px) and (max-width: 767px) {
.SM1  { width: 4.16666666666667%; }
.SM2  { width: 8.33333333333333%; }
.SM3  { width: 12.5%; }
.SM4  { width: 16.6666666666667%; }
.SM5  { width: 20.8333333333333%; }
.SM6  { width: 25%; }
.SM7  { width: 29.1666666666667%; }
.SM8  { width: 33.3333333333333%; }
.SM9  { width: 37.5%; }
.SM10 { width: 41.6666666666667%; }
.SM11 { width: 45.8333333333333%; }
.SM12 { width: 50%; }
.SM13 { width: 54.1666666666667%; }
.SM14 { width: 58.3333333333333%; }
.SM15 { width: 62.5%; }
.SM16 { width: 66.6666666666667%; }
.SM17 { width: 70.8333333333333%; }
.SM18 { width: 75%; }
.SM19 { width: 79.1666666666667%; }
.SM20 { width: 83.3333333333333%; }
.SM21 { width: 87.5%; }
.SM22 { width: 91.6666666666667%; }
.SM23 { width: 95.8333333333334%; }
.SM24 { width: 100%; }
.SM0  { display: none; }
Cell.SMOffset1  { margin-left: 4.16666666666667%; }
Cell.SMOffset2  { margin-left: 8.33333333333333%; }
Cell.SMOffset3  { margin-left: 12.5%; }
Cell.SMOffset4  { margin-left: 16.6666666666667%; }
Cell.SMOffset5  { margin-left: 20.8333333333333%; }
Cell.SMOffset6  { margin-left: 25%; }
Cell.SMOffset7  { margin-left: 29.1666666666667%; }
Cell.SMOffset8  { margin-left: 33.3333333333333%; }
Cell.SMOffset9  { margin-left: 37.5%; }
Cell.SMOffset10 { margin-left: 41.6666666666667%; }
Cell.SMOffset11 { margin-left: 45.8333333333333%; }
Cell.SMOffset12 { margin-left: 50%; }
Cell.SMOffset13 { margin-left: 54.1666666666667%; }
Cell.SMOffset14 { margin-left: 58.3333333333333%; }
Cell.SMOffset15 { margin-left: 62.5%; }
Cell.SMOffset16 { margin-left: 66.6666666666667%; }
Cell.SMOffset17 { margin-left: 70.8333333333333%; }
Cell.SMOffset18 { margin-left: 75%; }
Cell.SMOffset19 { margin-left: 79.1666666666667%; }
Cell.SMOffset20 { margin-left: 83.3333333333333%; }
Cell.SMOffset21 { margin-left: 87.5%; }
Cell.SMOffset22 { margin-left: 91.6666666666667%; }
Cell.SMOffset23 { margin-left: 95.8333333333334%; }
Cell.SMOffset24 { margin-left: 100%; }
}

@media only all and (min-width: 768px) and (max-width: 1430px) {
.MD1  { width: 4.16666666666667%; }
.MD2  { width: 8.33333333333333%; }
.MD3  { width: 12.5%; }
.MD4  { width: 16.6666666666667%; }
.MD5  { width: 20.8333333333333%; }
.MD6  { width: 25%; }
.MD7  { width: 29.1666666666667%; }
.MD8  { width: 33.3333333333333%; }
.MD9  { width: 37.5%; }
.MD10 { width: 41.6666666666667%; }
.MD11 { width: 45.8333333333333%; }
.MD12 { width: 50%; }
.MD13 { width: 54.1666666666667%; }
.MD14 { width: 58.3333333333333%; }
.MD15 { width: 62.5%; }
.MD16 { width: 66.6666666666667%; }
.MD17 { width: 70.8333333333333%; }
.MD18 { width: 75%; }
.MD19 { width: 79.1666666666667%; }
.MD20 { width: 83.3333333333333%; }
.MD21 { width: 87.5%; }
.MD22 { width: 91.6666666666667%; }
.MD23 { width: 95.8333333333334%; }
.MD24 { width: 100%; }
.MD0  { display: none; }
Cell.MDOffset1  { margin-left: 4.16666666666667%; }
Cell.MDOffset2  { margin-left: 8.33333333333333%; }
Cell.MDOffset3  { margin-left: 12.5%; }
Cell.MDOffset4  { margin-left: 16.6666666666667%; }
Cell.MDOffset5  { margin-left: 20.8333333333333%; }
Cell.MDOffset6  { margin-left: 25%; }
Cell.MDOffset7  { margin-left: 29.1666666666667%; }
Cell.MDOffset8  { margin-left: 33.3333333333333%; }
Cell.MDOffset9  { margin-left: 37.5%; }
Cell.MDOffset10 { margin-left: 41.6666666666667%; }
Cell.MDOffset11 { margin-left: 45.8333333333333%; }
Cell.MDOffset12 { margin-left: 50%; }
Cell.MDOffset13 { margin-left: 54.1666666666667%; }
Cell.MDOffset14 { margin-left: 58.3333333333333%; }
Cell.MDOffset15 { margin-left: 62.5%; }
Cell.MDOffset16 { margin-left: 66.6666666666667%; }
Cell.MDOffset17 { margin-left: 70.8333333333333%; }
Cell.MDOffset18 { margin-left: 75%; }
Cell.MDOffset19 { margin-left: 79.1666666666667%; }
Cell.MDOffset20 { margin-left: 83.3333333333333%; }
Cell.MDOffset21 { margin-left: 87.5%; }
Cell.MDOffset22 { margin-left: 91.6666666666667%; }
Cell.MDOffset23 { margin-left: 95.8333333333334%; }
Cell.MDOffset24 { margin-left: 100%; }
}

@media only all and (min-width: 1431px) and (max-width: 1919px) {
.LG1  { width: 4.16666666666667%; }
.LG2  { width: 8.33333333333333%; }
.LG3  { width: 12.5%; }
.LG4  { width: 16.6666666666667%; }
.LG5  { width: 20.8333333333333%; }
.LG6  { width: 25%; }
.LG7  { width: 29.1666666666667%; }
.LG8  { width: 33.3333333333333%; }
.LG9  { width: 37.5%; }
.LG10 { width: 41.6666666666667%; }
.LG11 { width: 45.8333333333333%; }
.LG12 { width: 50%; }
.LG13 { width: 54.1666666666667%; }
.LG14 { width: 58.3333333333333%; }
.LG15 { width: 62.5%; }
.LG16 { width: 66.6666666666667%; }
.LG17 { width: 70.8333333333333%; }
.LG18 { width: 75%; }
.LG19 { width: 79.1666666666667%; }
.LG20 { width: 83.3333333333333%; }
.LG21 { width: 87.5%; }
.LG22 { width: 91.6666666666667%; }
.LG23 { width: 95.8333333333334%; }
.LG24 { width: 100%; }
.LG0  { display: none; }
Cell.LGOffset1  { margin-left: 4.16666666666667%; }
Cell.LGOffset2  { margin-left: 8.33333333333333%; }
Cell.LGOffset3  { margin-left: 12.5%; }
Cell.LGOffset4  { margin-left: 16.6666666666667%; }
Cell.LGOffset5  { margin-left: 20.8333333333333%; }
Cell.LGOffset6  { margin-left: 25%; }
Cell.LGOffset7  { margin-left: 29.1666666666667%; }
Cell.LGOffset8  { margin-left: 33.3333333333333%; }
Cell.LGOffset9  { margin-left: 37.5%; }
Cell.LGOffset10 { margin-left: 41.6666666666667%; }
Cell.LGOffset11 { margin-left: 45.8333333333333%; }
Cell.LGOffset12 { margin-left: 50%; }
Cell.LGOffset13 { margin-left: 54.1666666666667%; }
Cell.LGOffset14 { margin-left: 58.3333333333333%; }
Cell.LGOffset15 { margin-left: 62.5%; }
Cell.LGOffset16 { margin-left: 66.6666666666667%; }
Cell.LGOffset17 { margin-left: 70.8333333333333%; }
Cell.LGOffset18 { margin-left: 75%; }
Cell.LGOffset19 { margin-left: 79.1666666666667%; }
Cell.LGOffset20 { margin-left: 83.3333333333333%; }
Cell.LGOffset21 { margin-left: 87.5%; }
Cell.LGOffset22 { margin-left: 91.6666666666667%; }
Cell.LGOffset23 { margin-left: 95.8333333333334%; }
Cell.LGOffset24 { margin-left: 100%; }
}

/* ========== Icon/Icon.css ========== */
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 853635 */
  src: url('../Icon/iconfont.woff2') format('woff2'),
       url('../Icon/iconfont.woff') format('woff'),
       url('../Icon/iconfont.ttf') format('truetype');
}

icon{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Labels/Labels.css ========== */
/*标签
===================================================================================================================================================*/
Labels{
    display: inline-block;
    padding: 3px 10px 3px 10px;
	font-size: 90%;
	line-height: 100%;
    border-radius: 5px;
	color: #aaa;
	position: relative;
}
Labels.Border{
	padding: 2px 9px 2px 9px;
    border-style: solid;
	border-width: 1px;
}
Labels.Capsule{
    border-radius: 1000px;
}
/*以下CSS只有在第一个类名，且是以Back开头的类名才能生效*/
Labels[class^="Back"] {
    color: #FFF;
}

/* ==================== 尺寸 ==================== */
Labels.Small {
    padding: 1px 6px 1px 6px;
    font-size: 75%;
}
Labels.Large {
    padding: 5px 14px 5px 14px;
    font-size: 105%;
}

/* ==================== 可关闭 ==================== */
Labels.Closeable {
    padding-right: 20px;
    cursor: pointer;
}
Labels.Closeable::after {
    content: "×";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
}
Labels.Closeable:hover::after {
    opacity: 1;
}

/* ==================== 状态点 ==================== */
Labels.Dot::before,
Labels.DotSuccess::before,
Labels.DotDanger::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
Labels.Dot::before       { background-color: #aaa; }
Labels.DotSuccess::before { background-color: #52c41a; }
Labels.DotDanger::before  { background-color: #ff4d4f; }

/* ==================== 角标计数 ==================== */
Labels > Sup {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    background-color: #ff4d4f;
    border-radius: 8px;
    text-align: center;
}
Labels.Capsule > Sup {
    top: -4px;
    right: -4px;
}

/* ==================== 分组标题 ==================== */
Labels.GroupTitle {
    background: none;
    color: #999;
    font-size: 80%;
    padding: 0 4px;
    margin-right: 4px;
}
Labels.GroupTitle::after {
    content: ":";
}

/* ==================== 选中状态 ==================== */
Labels.Active {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
}
Labels.Active.Border {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
}

/* ==================== 禁用状态 ==================== */
Labels.Disabled,
Labels.Disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== Layout/Layout.css ========== */
/* ========================================================================
   ANUI Layout - 语义化标签样式定义
   ======================================================================== */

/* 页面最外层容器 */
Page {
    display: block;
    min-height: 100vh;
    position: relative;
}

/* 顶部导航栏 */
Navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 100;
}
Navbar Navbar,
Navbar * {
    vertical-align: middle;
}

/* 工具栏 / 操作栏 */
Toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}
Toolbar [class*="Button"],
Toolbar Button {
    margin: 0;
}

/* 首屏大图区域 */
Hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--NILEBLUE, #4a7fb5), var(--NILEBLUE3, #2d5f8a));
    color: #fff;
}
Hero h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
}
Hero p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
}

/* 图文混排 */
Media {
    display: flex;
    align-items: center;
    gap: 20px;
}
Media img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
Media [class*="XS-"],
Media [class*="SM-"],
Media [class*="MD-"],
Media [class*="LG-"],
Media [class*="XL-"] {
    flex: 1;
    min-width: 0;
}

/* 卡片分组容器 */
CardGroup {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
CardGroup Panel {
    margin: 0;
}

/* 分割线 */
Divider {
    display: block;
    border: none;
    height: 1px;
    background: #e8e8e8;
    margin: 20px 0;
}
Divider.Dashed {
    border-top: 1px dashed #e8e8e8;
    background: none;
}

/* 用户头像 */
Avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--NILEBLUE);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    flex-shrink: 0;
}
Avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
Avatar.Small { width: 28px; height: 28px; font-size: 12px; }
Avatar.Large { width: 56px; height: 56px; font-size: 22px; }
Avatar.Square { border-radius: 8px; }

/* 底部状态栏 */
StatusBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    font-size: 13px;
    color: #999;
}

/* 自定义滚动条容器 */
Scrollbar {
    overflow-y: auto;
    overflow-x: hidden;
}
Scrollbar.Scrollbar-None::-webkit-scrollbar {
    display: none;
}
Scrollbar.Scrollbar-Thin::-webkit-scrollbar {
    width: 4px;
}
Scrollbar.Scrollbar-Thin::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}
Scrollbar.Scrollbar-Thin::-webkit-scrollbar-track {
    background: transparent;
}
Scrollbar.Scrollbar-Thin:hover::-webkit-scrollbar-thumb {
    background: #999;
}

/* ========================================================================
   布局示意图样式（用于文档展示）
   ======================================================================== */
LayoutDemo {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: #555;
}
LayoutDemo .ld-container {
    border: 2px dashed #c8c8c8;
    border-radius: 8px;
    padding: 8px;
    position: relative;
}
LayoutDemo .ld-container::before {
    content: '.Container';
    position: absolute;
    top: -10px;
    left: 12px;
    background: #f7f7f7;
    padding: 0 6px;
    font-size: 11px;
    color: #999;
}
LayoutDemo .ld-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
LayoutDemo .ld-row:last-child {
    margin-bottom: 0;
}
LayoutDemo .ld-header {
    background: #d4e6f9;
    border: 1px solid #a8c8e8;
    border-radius: 4px;
    padding: 10px 14px;
    flex-shrink: 0;
}
LayoutDemo .ld-footer {
    background: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 14px;
    flex-shrink: 0;
}
LayoutDemo .ld-aside {
    background: #f0e6f6;
    border: 1px solid #d4b8e0;
    border-radius: 4px;
    padding: 10px 14px;
    flex-shrink: 0;
    min-width: 60px;
}
LayoutDemo .ld-main {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    padding: 10px 14px;
    flex: 1;
    min-width: 0;
}
LayoutDemo .ld-article {
    background: #e0f2f1;
    border: 1px solid #80cbc4;
    border-radius: 4px;
    padding: 10px 14px;
    flex: 1;
    min-width: 0;
}
LayoutDemo .ld-section {
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 8px;
}
LayoutDemo .ld-hero {
    background: #e3e0ff;
    border: 1px solid #c5b3ff;
    border-radius: 4px;
    padding: 20px 14px;
    text-align: center;
    flex-shrink: 0;
}
LayoutDemo .ld-navbar {
    background: #d4e6f9;
    border: 1px solid #a8c8e8;
    border-radius: 4px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
LayoutDemo .ld-toolbar {
    background: #f3e5f5;
    border: 1px solid #ce93d8;
    border-radius: 4px;
    padding: 8px 14px;
    flex-shrink: 0;
}
LayoutDemo .ld-cardgroup {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
LayoutDemo .ld-cardgroup > div {
    flex: 1;
    background: #fce4ec;
    border: 1px solid #f48fb1;
    border-radius: 4px;
    padding: 10px 14px;
    text-align: center;
}
LayoutDemo .ld-media {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding: 8px;
    background: #e8eaf6;
    border: 1px solid #c5cae9;
    border-radius: 4px;
}
LayoutDemo .ld-media-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #9fa8da;
    flex-shrink: 0;
}
LayoutDemo .ld-media-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
LayoutDemo .ld-media-content {
    flex: 1;
    background: #fff;
    border-radius: 3px;
    padding: 4px 8px;
    height: 20px;
}
LayoutDemo .ld-statusbar {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}
LayoutDemo .ld-label {
    font-weight: bold;
    color: #444;
    font-size: 12px;
}
LayoutDemo .ld-sub {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}
LayoutDemo .ld-grid-3 {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
LayoutDemo .ld-grid-3 > div {
    flex: 1;
    text-align: center;
}
LayoutDemo .ld-grid-3 .ld-nav-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 4px;
    font-size: 11px;
}
LayoutDemo .ld-sidebar-left {
    display: flex;
    gap: 8px;
    flex: 1;
}
LayoutDemo .ld-sidebar-left .ld-aside {
    flex: 0 0 80px;
}
LayoutDemo .ld-placeholder {
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 4px;
    padding: 6px;
    font-size: 10px;
    color: #bbb;
    text-align: center;
}
LayoutDemo .ld-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
    margin-right: 4px;
    margin-top: 4px;
}
LayoutDemo .ld-tag-blue { background: #4a7fb5; }
LayoutDemo .ld-tag-green { background: #5c8a5c; }
LayoutDemo .ld-tag-orange { background: #c0792a; }
LayoutDemo .ld-tag-purple { background: #7b5ea7; }
LayoutDemo .ld-tag-gray { background: #888; }
LayoutDemo .ld-cols-2 {
    display: flex;
    gap: 8px;
    flex: 1;
}
LayoutDemo .ld-cols-2 > div {
    flex: 1;
}


/* ========== Loading/Loading.css ========== */
/*加载中
===================================================================================================================================================*/
@keyframes loading-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes loading-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-5px); opacity: 1; }
}
@keyframes loading-bar {
    0%, 80%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    40% { transform: scaleY(1); opacity: 1; }
}
@keyframes loading-ring {
    0%, 100% { transform: scale(0.7); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 1; }
}
@keyframes loading-pie {
    from { --a: 0; }
    to { --a: 360; }
}
@property --a {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}
@keyframes loading-orbit {
    to { transform: rotate(360deg); }
}
@keyframes loading-pulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.9; }
    70% { box-shadow: 0 0 0 9px transparent; opacity: 0; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

Loading {
    display: inline-block;
    vertical-align: middle;
}
Loading Icons {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, currentColor 0, currentColor 75%, transparent 85%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: loading-spin 0.7s linear infinite;
    vertical-align: middle;
    color: var(--DefaultColor, #4080d9);
}

Loading Text {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

/* 垂直居中整块布局：图标在上、文本在下，卡片内嵌等居中场景使用 */
Loading.Block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
Loading.Block Text {
    margin-left: 0;
    margin-top: 10px;
}

Loading.Small Icons {
    width: 8px;
    height: 8px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
}

Loading.Large Icons {
    width: 32px;
    height: 32px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
}

Loading.Fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
Loading.Fixed Back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
Loading.Fixed Icons {
    width: 32px;
    height: 32px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
}
Loading.Fixed Text {
    margin-left: 0;
    margin-top: 12px;
    font-size: 14px;
    color: #666;
}

/* -----------------------------------------
   图标形式：Dots / Bars / Ring / Pie
   通过与 Spinner 相同作用的 <Icons> 子元素渲染，
   颜色跟随 currentColor，可用 color 覆盖
   ----------------------------------------- */
/* Dots 点状跳动 */
Loading Icons.Dots {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    -webkit-mask: none;
    mask: none;
    animation: loading-bounce 1s ease-in-out infinite;
    animation-delay: -0.16s;
}
Loading Icons.Dots::before,
Loading Icons.Dots::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: loading-bounce 1s ease-in-out infinite;
}
Loading Icons.Dots::before { left: -8px; animation-delay: -0.32s; }
Loading Icons.Dots::after { left: 8px; animation-delay: 0s; }

/* Bars 竖条跳动 */
Loading Icons.Bars {
    position: relative;
    width: 3px;
    height: 14px;
    background: currentColor;
    border-radius: 2px;
    -webkit-mask: none;
    mask: none;
    animation: loading-bar 1.2s ease-in-out infinite;
    animation-delay: -0.16s;
}
Loading Icons.Bars::before,
Loading Icons.Bars::after {
    content: '';
    position: absolute;
    top: 0;
    width: 3px;
    height: 14px;
    background: currentColor;
    border-radius: 2px;
    animation: loading-bar 1.2s ease-in-out infinite;
}
Loading Icons.Bars::before { left: -6px; animation-delay: -0.32s; }
Loading Icons.Bars::after { left: 6px; animation-delay: 0s; }

/* Ring 呼吸圆环 */
Loading Icons.Ring {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    -webkit-mask: none;
    mask: none;
    animation: loading-ring 1.2s ease-in-out infinite;
}

/* Pie 饼状填充：环形缺口逐渐闭合 */
Loading Icons.Pie {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, currentColor calc(var(--a, 0) * 1deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: loading-pie 1s linear infinite;
}

/* Orbit 五个点相互追逐转圈 */
Loading Icons.Orbit {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: transparent;
    -webkit-mask: none;
    mask: none;
    box-shadow:
        5px 0 0 0 currentColor,
        2px 5px 0 0 currentColor,
        -4px 3px 0 0 currentColor,
        -4px -3px 0 0 currentColor,
        2px -5px 0 0 currentColor;
    animation: loading-orbit 1s linear infinite;
}

/* Radar 雷达扫描 */
Loading Icons.Radar {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: conic-gradient(from 0deg, transparent 0 310deg, currentColor 310deg 338deg, transparent 338deg 360deg);
    -webkit-mask: none;
    mask: none;
    animation: loading-orbit 1.4s linear infinite;
}
Loading Icons.Radar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: currentColor;
}

/* Pulse 扩散涟漪 */
Loading Icons.Pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    -webkit-mask: none;
    mask: none;
    animation: loading-pulse 1.4s ease-out infinite;
}

/* Dots / Bars 为横排多单元，与文本之间留出更多间距 */
Loading Icons.Dots + Text,
Loading Icons.Bars + Text {
    margin-left: 14px;
}

/* 预置主题色跟随：给 <Loading> 添加预置色类即可变换图标颜色 */
Loading.NILEBLUE Icons  { color: var(--NILEBLUE); }
Loading.VIOLET Icons    { color: var(--VIOLET); }
Loading.GRAPEFRUIT Icons  { color: var(--GRAPEFRUIT); }
Loading.SUNFLOWER Icons { color: var(--SUNFLOWER); }
Loading.GRASS Icons     { color: var(--GRASS); }
Loading.MINT Icons      { color: var(--MINT); }
Loading.AQUA Icons      { color: var(--AQUA); }
Loading.LAVENDER Icons  { color: var(--LAVENDER); }
Loading.PINKROSE Icons  { color: var(--PINKROSE); }
Loading.ORANGE Icons    { color: var(--ORANGE); }
Loading.LIGHTGRAY Icons { color: var(--LIGHTGRAY); }
Loading.MEDIUMGRAY Icons { color: var(--MEDIUMGRAY); }
Loading.DARKGRAY Icons  { color: var(--DARKGRAY); }
Loading.DARKNIGHT Icons { color: var(--DARKNIGHT); }

/* ========== Modal/Modal.css ========== */
/* ========== Modal Component ========== */

Modal {
  display: flex; /* 改为始终 flex */
  justify-content: center;
  align-items: center;
  position: fixed;  
  left: 0;  
  top: 0;  
  width: 100vw;  
  height: 100vh;  
  background-color: rgba(0, 0, 0, 0); /* 初始透明 */
  backdrop-filter: blur(0px); /* 初始不模糊 */
  z-index: 100;
  overflow: hidden;
  visibility: hidden; /* 初始不可见 */
  opacity: 0; /* 初始透明 */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, background-color 0.3s ease-in-out; /* 添加过渡效果 */
}  
      
Modal[open] {
  visibility: visible; /* 可见 */
  opacity: 1; /* 完全不透明 */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}  
  
Modal>Content { 
  display: block;
  background-color: #FFF;  
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #888;  
  width: 30%; 
  max-height: 95vh;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);  
  overflow: hidden;
  border-radius: 5px; 
  position: relative;
  transform: translateY(-30px) scale(0.95); /* 初始位置和缩放 */
  opacity: 0; /* 初始透明 */
}  

Modal[open] > Content {
  transform: translateY(0) scale(1); /* 最终位置 */
  opacity: 1; /* 完全不透明 */
  transition-delay: 0.1s; /* 延迟一点出现，让背景先过渡 */
}

Modal Close{
        color: rgba(0,0,0,.3);
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 23px;
        background-color: rgba(0,0,0,.03);
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        transition: all .2s; 
		z-index: 1;
}
Modal Close:hover{
    color: crimson;
}
Modal>Content>Titles{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #eee;
    font-size: 16px;
    height: 60px;
    padding-left: 15px;
    padding-right: 50px;
    user-select: none;
}
Modal>Content>Titles>icon{
    font-size: 20px;
    margin-right: 10px;
}
Modal>Content>Bodies{
    position: relative;
    flex-grow: 1;
    display: block;
    max-height: calc(100vh - 130px);
    /* min-height: 100%; */
    overflow: hidden;
    overflow-y: auto;
    padding: 15px;
}

/* 当父容器 Content 内部有 Footer 元素时，调整 Bodies 样式 */
Modal>Content:has(Footer) > Bodies {
    max-height: calc(100vh - 200px);
}

Modal>Content>Footer{
    display: block;
    height: 70px;
    padding: 15px;
    border-top: 1px solid #ddd;
}

Modal>Content>Footer.Right{
    text-align: right;
}

Modal>Content>Footer.Center{
    text-align: center;
}

Modal>Content>Footer>Button{
    margin-left: 5px;
	margin-right: 5px;
}
Modal>Content>Footer>Button:first-child{
    margin-left: 0px;
}
Modal>Content>Footer.Right>Button:last-child{
    margin-right: 0px;
}

/*控制iframe样式*/
Modal>Content>Bodies>iframe{
    position: absolute;  /* 改为绝对定位 */
    width: 100%;
    height: 100%;
    border: 0;
    top: 0;
    left: 0;
}
/* 当父容器 Content 内部有 Footer 元素时，调整 iframe 样式 */
Modal>Content:has(Footer) > iframe {
    height: calc(100% - 70px);
}

Modal.Iframe Bodies{
    /* max-height: calc(100vh - 130px)!important;
    min-height: calc(100vh - 130px)!important; */
    height: calc(100vh - 130px)!important
}

/*全屏样式*/
Modal.FullScreen{
    background-color: #FFF!important
}
Modal.FullScreen Content{
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding-top: 50px;
	background-color: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
    border: 0;  
}
Modal.FullScreen Close{
    position: absolute;
    top: 10px;
    right: 10px;
}
Modal.FullScreen>Content>Bodies{
    flex-grow: 1;
    display: block;
    max-height: calc(100vh - 60px);
    overflow: hidden;
    overflow-y: auto;
    padding: 15px;
}

/* 当父容器 Content 内部有 Footer 元素时，调整 Bodies 样式 */
Modal.FullScreen>Content:has(Footer) > Bodies {
    max-height: calc(100vh - 200px);
}

/*====================================================================
  升级新增：可拖动模态框（Draggable）+ 叠层支持
  ====================================================================*/

/* z-index 由 JS 动态管理（叠层栈），此处仅作为关闭态兜底默认值，
   打开时 JS 会用内联 z-index 覆盖，保证新打开的模态框浮在上层。 */

/* 可拖动模态框：Titles 作为拖动手柄，显示移动光标 */
Modal[Draggable="true"] > Content > Titles {
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
}
/* 拖动按下时显示抓取中光标 */
Modal[Draggable="true"] > Content > Titles:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* 全屏模态框不允许拖动，恢复默认光标 */
Modal.FullScreen > Content > Titles {
    cursor: default;
}

/* 关键：拖动通过 Content 的 left/top 实现，
   必须确保 left/top 不被过渡动画影响，否则拖动会严重卡顿。
   这里显式声明 Content 的过渡仅作用于 transform / opacity，
   left / top / margin 立即生效。 */
Modal > Content {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* 拖动进行中时，禁用 transform 过渡，避免与 left/top 位移叠加产生抖动 */
Modal.Dragging > Content {
    transition: none !important;
}

/*====================================================================
  升级新增：Modeless 无遮罩子模态框模式
  无背景遮罩、背景可交互、默认可拖动，可作为"子模态框"浮在父模态框之上
  ====================================================================*/

/* Modeless 容器：透明、无模糊、不拦截事件，让背景（含父模态框）可交互 */
Modal.Modeless {
    background-color: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none; /* 容器透传事件 */
}

/* Modeless 主体：恢复事件捕获，保证内部可点击 */
Modal.Modeless > Content {
    pointer-events: auto;
    /* 无遮罩子模态框常需略小、带明显阴影，突出"浮层"感 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Modeless 默认可拖动（即使 JS 因某些原因未设 Draggable，也显示手柄光标） */
Modal.Modeless > Content > Titles {
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
}
Modal.Modeless > Content > Titles:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* Stacked 嵌套遮罩变暗
===========================================================================================================================================================*/
Modal.Stacked{
    background-color: rgba(0, 0, 0, 0.55) !important;
}

/* Loading 状态（整合 Loading 组件：<Loading><Back><Icons/><Text/></Back></Loading>）
===========================================================================================================================================================*/
Modal>Content>Bodies Loading.ModalLoading{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    z-index: 10;
    opacity: 1;
    transition: opacity .3s ease;
}
Modal>Content>Bodies Loading.ModalLoading.Hide{
    opacity: 0;
    pointer-events: none;
}
Modal>Content>Bodies Loading.ModalLoading Back{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.96);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
Modal>Content>Bodies Loading.ModalLoading Icons{
    width: 32px;
    height: 32px;
    background: transparent;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: currentColor;
    -webkit-mask: none;
    mask: none;
    animation: loading-spin 0.8s linear infinite;
    /* 禁止 flex 沿主轴压缩/拉伸，避免内容区偏矮时图标被压成椭圆 */
    flex: 0 0 auto;
    align-self: center;
}
Modal>Content>Bodies Loading.ModalLoading Text{
    margin-left: 0;
    margin-top: 16px;
    font-size: 14px;
    color: #666;
    flex: 0 0 auto;
}

/* 最大化按钮
===========================================================================================================================================================*/
Modal>Content>Titles>MaximizeBtn{
    margin-left: auto;
    font-size: 16px;
    cursor: pointer;
    color: rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.03);
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    transition: all .2s;
}
Modal>Content>Titles>MaximizeBtn:hover{
    color: #333;
    background-color: rgba(0,0,0,.08);
}
Modal.Maximized>Content{
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* 进入方向动画
===========================================================================================================================================================*/
Modal.DirectionBottom>Content{
    transform: translateY(100%) scale(1) !important;
}
Modal[open].DirectionBottom>Content{
    transform: translateY(0) scale(1) !important;
}
Modal.DirectionRight>Content{
    transform: translateX(100%) scale(1) !important;
}
Modal[open].DirectionRight>Content{
    transform: translateX(0) scale(1) !important;
}

/* 确认/消息弹窗
===========================================================================================================================================================*/
.ModalPromptOverlay{
    text-align: center;
}
.ModalPromptOverlay icon{
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
}
.ModalPromptOverlay.ConfirmIcon{ color: var(--DefaultColor, #007bff); }
.ModalPromptOverlay.AlertIcon{ color: #faad14; }
.ModalPromptOverlay h3{
    margin: 0 0 10px;
    font-size: 16px;
    color: #333;
}
.ModalPromptOverlay p{
    margin: 0 0 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/*====================================================================
  图片模态框（Lightbox 风格）
  ====================================================================*/
Modal.ImageModal {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
}
Modal.ImageModal > Content {
    background: transparent;
    border: none;
    box-shadow: none;
    width: auto;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
Modal.ImageModal[open] > Content {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
Modal.ImageModal Close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.3);
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
Modal.ImageModal Close:hover {
    color: #fff;
    background: rgba(0,0,0,0.6);
}

.ModalImageInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    width: 88vw;
    height: 82vh;
}
.ModalImageInner.Zoomed {
    overflow: hidden;
}
.ModalImageInner img {
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 6px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.5);
    object-fit: contain;
    cursor: grab;
    transform-origin: center center;
    will-change: transform;
    transition: opacity 0.25s ease;
}
.ModalImageInner.Zoomed img {
    border-radius: 6px;
    cursor: grab;
}
.ModalImageInner img.ImageSwitching {
    opacity: 0;
}

/* 导航箭头 */
.ModalImagePrev,
.ModalImageNext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.7);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    transition: all 0.2s;
    z-index: 10;
}
.ModalImagePrev:hover,
.ModalImageNext:hover {
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.ModalImagePrev { left: -60px; }
.ModalImageNext { right: -60px; }
.ModalImagePrev icon,
.ModalImageNext icon {
    font-size: 22px;
}

/* 图片计数器 */
.ModalImageCounter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    background: rgba(0,0,0,0.3);
    padding: 4px 14px;
    border-radius: 100px;
    white-space: nowrap;
}

/* 缩放百分比指示器 */
.ModalZoomBadge {
    position: absolute;
    top: 12px;
    right: 12px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    background: rgba(0,0,0,0.4);
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/*====================================================================
  视频模态框
  ====================================================================*/
Modal.VideoModal {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
}
Modal.VideoModal > Content {
    background: transparent;
    border: none;
    box-shadow: none;
    width: auto;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
Modal.VideoModal[open] > Content {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
Modal.VideoModal Close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.3);
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
Modal.VideoModal Close:hover {
    color: #fff;
    background: rgba(0,0,0,0.6);
}

.ModalVideoInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.ModalVideoInner video {
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 6px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.5);
    background: #000;
}
.ModalVideoInner iframe {
    width: 80vw;
    max-width: 960px;
    height: 45vw;
    max-height: 540px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.5);
}

/* ========== Nav/Nav.css ========== */
/*子导航
===================================================================================================================================================*/
Subnav{
    display: block;
}
Subnav Menus{
    display: block;
    padding: 5px 10px;
    line-height: 30px;
    transition: all .3s;
	cursor: pointer;
}
Subnav Menus:hover,
Subnav Menus.Active
{
    background-color: rgba(0,0,0,.03);
    padding-left: 15px;
}

/* ========== Notification/Notification.css ========== */
    Notification{
        position: fixed;
        z-index: 110000; /* 确保通知栏显示在其他内容之上 */ 
        /* 禁止选中文本 */ 
        -webkit-user-select: none; /* Safari */  
        -moz-user-select: none;    /* Firefox */  
        -ms-user-select: none;     /* IE10+/Edge */  
        user-select: none;         /* 标准语法 */ 
    }
    Notification.TopCenter{
        top: 0;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
    }
    Notification.TopLeft{
        top: 0;
        left: 10px;
    }
    
    Notification.TopRight{
        top: 0;
        right: 10px;
        text-align: right
    }
    Notification.TopCenter>Content,
    Notification.TopLeft>Content,
    Notification.TopRight>Content{
        animation: slideDown 0.5s ease-out forwards; 
    }
    
    Notification.BottomCenter{
        bottom: -30px;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
    }

    Notification.BottomLeft{
        bottom: -30px;
        left: 10px;
    }
    
    Notification.BottomRight{
        bottom: -30px;
        right: 10px;
        text-align: right
    }
    Notification.BottomCenter>Content,
    Notification.BottomLeft>Content,
    Notification.BottomRight>Content{
        animation: slideUp 0.5s ease-out forwards; 
    }
    
    Notification>Content{
        padding: 10px 15px;
        margin-top: 10px;
        border-radius: 5px; 
        background: rgba(0, 0, 0, 0.7); /* 默认黑色 70% 透明背景 */
        color: #fff; /* 白字保证可读 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    }
    /*状态通知：贴合预置色板——预置浅色档(_Light)做底 + 预置主色文字/图标（信息=尼罗蓝 成功=草坪绿 警告=香橙 危险/错误=葡萄柚）*/
    Notification>Content.NILEBLUE.Palette1   { background: var(--NILEBLUE_Light);   color: var(--NILEBLUE);   border-color: var(--NILEBLUE_Light); }
    Notification>Content.GRASS.Palette1      { background: var(--GRASS_Light);      color: var(--GRASS);      border-color: var(--GRASS_Light); }
    Notification>Content.ORANGE.Palette1     { background: var(--ORANGE_Light);     color: var(--ORANGE);     border-color: var(--ORANGE_Light); }
    Notification>Content.GRAPEFRUIT.Palette1 { background: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT_Light); }

    /*===== 现代化卡片式通知 Notice() =====*/
    Notification>Content.Card{
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 380px;               /* 加宽卡片，给标题/描述留足整行空间 */
        min-width: 380px;
        max-width: 380px;
        padding: 14px 40px 14px 16px;
        border-radius: 10px;
        text-align: left;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    Notification>Content.Card>icon.NoticeIcon{
        font-size: 22px;
        line-height: 1.3;
        flex-shrink: 0;
        margin-top: 1px;
    }
    Notification>Content.Card BodyWrap{
        display: flex;
        flex-direction: column;     /* 布局纵向：标题在上、描述在下 */
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }
    Notification>Content.Card Title{
        display: block;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.4;
        white-space: nowrap;        /* 标题强制单行，避免被压缩成纵向 */
        overflow: hidden;
        text-overflow: ellipsis;    /* 超长时省略号兜底 */
    }
    Notification>Content.Card Text{
        display: block;
        font-size: 13px;
        line-height: 1.6;
        opacity: .85;
        margin-top: 6px;
    }
    Notification>Content.Card Buttons{
        display: flex;
        flex-wrap: nowrap;          /* 按钮单行并排，不换行占用高度 */
        align-items: center;
        justify-content: center;    /* 按钮居中 */
        gap: 8px;
        width: 100%;                /* 撑满整行，使按钮靠右 */
        margin-top: 10px;
    }
    Notification>Content.Card Buttons Button{
        background: transparent;
        color: inherit;
        border: 1px solid currentColor;
        height: 26px;
        line-height: 26px;
        padding: 0 16px;
        font-size: 12px;
        white-space: nowrap;    /* 防止按钮文字换行 */
        flex-shrink: 0;         /* 防止按钮被压缩 */
        border-radius: 5px;
        cursor: pointer;
        transition: background-color .28s cubic-bezier(.25,.8,.25,1),
                    color .28s cubic-bezier(.25,.8,.25,1),
                    box-shadow .28s ease,
                    transform .2s ease;
    }
    /* 柔和浸润效果：渐变淡入淡出当前色，不生生翻成实心 */
    Notification>Content.Card Buttons Button:hover{
        background: rgba(0,0,0,.05);
        background: color-mix(in srgb, currentColor 16%, transparent);
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.10);
    }
    Notification>Content.Card Buttons Button:active{
        transform: translateY(0);
        box-shadow: none;
    }
    /* 确认模式主按钮：实心主题色，始终高亮 */
    Notification>Content.Card Buttons Button.Primary{
        background: var(--NoticeAccent, var(--DefaultColor, #4080d9));
        color: #fff;
        border-color: transparent;
        font-weight: 600;
    }
    Notification>Content.Card Buttons Button.Primary:hover{
        background: var(--NoticeAccent, var(--DefaultColor, #4080d9));
        filter: brightness(.94);
        color: #fff;
        box-shadow: 0 6px 14px rgba(0,0,0,.12);
    }
    Notification>Content.Card Close{
        position: absolute;
        top: 10px;
        right: 12px;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        border-radius: 4px;
        background: rgba(0,0,0,.05);
        cursor: pointer;
        opacity: .6;
        transition: all .2s;
    }
    Notification>Content.Card Close:hover{
        opacity: 1;
        background: rgba(0,0,0,.1);
    }
    Notification>Content.Card Progress{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: rgba(0,0,0,0.08);
    }
    Notification>Content.Card Progress Lane{
        display: block;
        height: 100%;
        width: 100%;
        background: currentColor;
        opacity: .85;
    }

    /*===== 屏幕居中弹出（center:true / location:'Center'）=====*/
    Notification.Center{
        position: fixed;
        inset: 0;
        z-index: 110050;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;           /* 遮罩不挡卡片，卡片自身 pointer-events:auto 可交互 */
    }
    Notification.Center > Mask{
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.45);
        animation: fadeIn .25s ease-out forwards;
        pointer-events: auto;
    }
    /* 居中卡片：白底观感，区别于角落通知的黑色，形态更接近对话框 */
    Notification.Center > Content.Card{
        pointer-events: auto;
        position: relative;
        background: #fff;
        color: #2d2d2d;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 16px 48px rgba(0,0,0,.18);
        animation: CenterIn .28s cubic-bezier(.25,.8,.25,1) forwards;
        transition: opacity .24s ease, transform .24s ease;
    }
    /* 居中卡片带状态时恢复主题浅底+状态色，并记录--NoticeAccent供主按钮同色 */
    Notification.Center > Content.NILEBLUE.Palette1   { background: var(--NILEBLUE_Light);   color: var(--NILEBLUE);   --NoticeAccent: var(--NILEBLUE); }
    Notification.Center > Content.GRASS.Palette1      { background: var(--GRASS_Light);      color: var(--GRASS);      --NoticeAccent: var(--GRASS); }
    Notification.Center > Content.ORANGE.Palette1     { background: var(--ORANGE_Light);     color: var(--ORANGE);     --NoticeAccent: var(--ORANGE); }
    Notification.Center > Content.GRAPEFRUIT.Palette1 { background: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); --NoticeAccent: var(--GRAPEFRUIT); }
    Notification.Center > Content.Card.Hide{
        opacity: 0;
        transform: translateY(-10px) scale(.98);
        pointer-events: none;
    }
    Notification.Center > Content.Card Title{
        font-size: 16px;
    }
    Notification.Center > Content.Card Text{
        opacity: .75;
        margin-top: 6px;
    }
    Notification.Center > Content.Card Buttons{
        margin-top: 16px;
    }

    @keyframes fadeIn{
        from{ opacity: 0; }
        to  { opacity: 1; }
    }
    @keyframes CenterIn{
        from{ opacity: 0; transform: translateY(-14px) scale(.96); }
        to  { opacity: 1; transform: translateY(0)    scale(1); }
    }
    
    @keyframes slideDown {  
        from {  
            transform: translateY(-100%);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(0);  
            opacity: 1;  
        }  
    }
    @keyframes slideUp {  
        from {  
            transform: translateY(0);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(-100%);  
            opacity: 1;  
        }  
    }


/* ========== Pagination/Pagination.css ========== */
Pagination {
    display: flex;
    flex-direction: row;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex-wrap: wrap;
    align-items: center;
}
Pagination PageInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}
Pagination PageItem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
Pagination Pages {
    border: 1px solid #DDD;
    min-width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 8px;
    white-space: nowrap;
}
Pagination Pages:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,.05);
}
Pagination Pages.Active {
    background-color: var(--DefaultColor);
    color: #FFF;
    border-color: var(--DefaultColor);
}
Pagination Pages.A1 {
    border: 0;
    cursor: default;
    min-width: auto;
    padding: 0 2px;
    color: #999;
}
Pagination Pages.A1:hover {
    background-color: transparent;
}
Pagination .Prev:disabled,
Pagination .Next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
Pagination Jump {
    display: flex;
    align-items: center;
    margin-left: 10px;
    height: 40px;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
}
Pagination Jump input {
    width: 50px;
    height: 40px;
    border: 1px solid #DDD;
    border-radius: 3px;
    text-align: center;
    margin: 0 5px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
Pagination Jump input:focus {
    border-color: var(--DefaultColor);
}
Pagination Jump Button {
    height: 40px;
    margin: 0 0 0 5px;
    min-width: 40px;
}
Pagination InfoText {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 13px;
    color: #777;
    height: 40px;
    white-space: nowrap;
}


/* ========== Panel/Panel.css ========== */
Panel {
    display: block;
    background-color: #FFF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
}
Panel > Titles {
    display: block;
    font-size: 16px;
    padding: 20px 20px;
    border-bottom: 1px solid #DDD;
}
Panel > Container {
	height: 100%;
    display: block;
    padding: 20px 20px;
    color: #777
}
Panel.Style-1 {
    background-color: transparent;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0);
}
Panel.Style-1 > Titles {
    font-size: 19px;
    border-bottom: 0;
    color: #444;
}
Panel.Style-1 > Container {
    background-color: #FFF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
    border-radius: 3px;
    padding: 20px;
}

/* ========== Progress/Progress.css ========== */
	Progresses{
		display: block;
		width: 100%;
		height: 5px;
		background-color: #f3f3f3; /* 设置背景色 */ 
		border-radius: 3px; /* 设置边框圆角 */
		box-shadow: 0 0 1px #ddd; /* 设置阴影效果 */
        /*overflow: hidden;*/
	}
	Progresses Bar{
		display: flex;
        justify-content: center;
        align-items: center;
		position: relative;
		width: 0%;
        height: 100%;
		text-align: center;
        background-color: var(--DefaultColor);
        border-radius: 3px; /* 设置边框圆角 */
        background-size: 20px 20px;
        animation-delay: .1s;
	}
	Progresses Bar>Label{
		position: absolute; 
		border-radius: 100px;
		top: 50%;  
		transform: translateY(-50%)!important;  
		font-size: 70%;
		color: #fff;
	}
    
/*进度条加载动画*/
@-webkit-keyframes animate-positive{
    0% { width:0;}
}
@keyframes animate-positive{
    0% { width:0;}
}
/**************************************************************************************************************************************************
  Name   ：斑纹效果
  Explain：设置进度条斑纹效果
**************************************************************************************************************************************************/
/*静态斑纹*/
Progresses.Striped Bar{
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%);}	
/*动画斑纹*/	
Progresses.Animated.Striped Bar{
    animation: process .6s infinite linear;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%);}	
/*斑纹动画效果*/
@keyframes process {
    from {
        background-position: 20px 0
    }

    to {
        background-position: 0 0
    }
}
/**************************************************************************************************************************************************
  Name   ：抹角样式
  Explain：设置进度条斑纹效果
**************************************************************************************************************************************************/
/*扁平化*/	
Progresses.Delayering,
Progresses.Delayering Bar{
    border-radius: 0;
}	
/*胶囊形*/	
Progresses.Capsule,
Progresses.Capsule Bar{
     border-radius: 10000px;
}	

/* ========== Progress/ProgressCircle.css ========== */
ProgressCircle {
    --percent: 0; /* 百分数 */
    --percentFontSize: 25px; /* 百分数字体大小 */
    --percentUnit: '%';
    --size: 0px; /* 尺寸大小 */
    --border-width: 5px; /* 环宽（粗细） */
    --color: var(--DefaultColor); /* 主色 */
    --inactive-color: #eee; /* 辅助色 */
    display:inline-block;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 300%;
	opacity:0;
	transition: opacity 400ms ease-in-out 0s;
}
/* 百分数文本 */
ProgressCircle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    counter-reset: progress var(--percent);
    content: counter(progress) var(--percentUnit);
    white-space: nowrap;
    font-size: var(--percentFontSize);
}

/* SVG 容器 */
ProgressCircle > svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
/* 进度条圆环 */
ProgressCircle circle {
    --r: calc((var(--size) - var(--border-width)) / 2);
    cx: calc(var(--size) / 2);
    cy: calc(var(--size) / 2);
    r: var(--r);
    fill: none;
    stroke-width: var(--border-width);
    stroke-linecap: round;
    transition: stroke-dasharray 800ms linear, stroke .3s;
}
ProgressCircle circle:nth-child(2) {
    stroke-dasharray: calc(2 * 3.1415 * var(--r) * (var(--percent) / 100)), 1000
}
/* 优化：进度为0时隐藏进度条 */
/*ProgressCircle {opacity: var(--percent);}*/

/* ========== Search/Search.css ========== */
@charset "utf-8";
/* CSS Document */
Search{
    /*padding: 3px;*/
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
}
Search input::placeholder {
    /*color: #bbb;  在表单的CSS里面已经定义*/
}
Search input{
	width: 100%;
    flex-grow: 1;
    border-right: 0;
    padding-left: 13px;
    padding-right: 13px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #ddd;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
/* 禁用浏览器默认的清除按钮（input[type="search"]） */
Search input::-webkit-search-cancel-button,
Search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
Search > button{
    background-color: var(--DefaultColor);
	flex-shrink: 0;
    color: #fff;
    border: 0;
    border-radius: 0;
    line-height: 100%;
    cursor: pointer;
    transition: all .3s ease;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;

}
Search > button:hover{
    box-shadow:0px 20px 150px rgba(0, 0, 0, 0.2) inset;/*用于实现按钮hover颜色渐变*/
    transition: all .3s ease;
}
Search > input,
Search > button{
    height: 100%!important;
}
Search input:focus {
    outline: none;
}
/***************************************************************************************************************************************************
  Name   ：风格样式
  Explain：搜索框的风格样式
**************************************************************************************************************************************************/
Search.Style1{
    border-radius: 1000px;
    border: 1px solid #ddd;
}
Search.Style1 input{
    border: 0;
}
Search.Style1 button{
    font-size: 20px;
    color: #CCC;
    background-color: transparent;
}
Search button icon{
    font-size: 21px;
}
Search.Style1 button:hover{
	color: #555;
	box-shadow:0px 20px 150px rgba(0, 0, 0, 0) inset;/*用于实现按钮hover颜色渐变*/
}

/***************************************************************************************************************************************************
  Name   ：清除按钮
  Explain：输入内容后自动显示，点击清空输入框
**************************************************************************************************************************************************/
Search > Clear {
	flex-shrink: 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 100% !important;
	cursor: pointer;
	color: #bbb;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: #fff;
}
Search > Clear icon {
	font-size: 16px;
}
Search > Clear:hover {
	color: #555;
}
/* Style1 中的清除按钮 */
Search.Style1 > Clear {
	border: 0;
	background: transparent;
}

/***************************************************************************************************************************************************
  Name   ：搜索分类
  Explain：搜索框前的分类选择器，配合 <Category> 元素使用
**************************************************************************************************************************************************/
Search > Category {
	position: relative;
	flex-shrink: 0;
	height: 100% !important;
}
Search > Category button {
	height: 100% !important;
	padding: 0 12px;
	white-space: nowrap;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-right: 0;
	border-radius: 0;
	cursor: pointer;
	color: #555;
	font-size: 14px;
}
Search > Category button icon {
	margin-left: 5px;
	font-size: 12px;
}
/* 有分类时输入框去掉左边框 */
Search > Category + input {
	border-left: 0;
}
Search > Category ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	z-index: 10;
	padding: 6px 0;
	list-style: none;
	margin: 3px 0 0 0;
}
Search > Category.Open ul {
	display: block;
}
Search > Category ul li {
	padding: 8px 16px;
	cursor: pointer;
	white-space: nowrap;
	color: #555;
	list-style: none;
}
Search > Category ul li:hover {
	background: #f1f1f1;
}
Search > Category ul li.Active {
	color: var(--DefaultColor);
	font-weight: bold;
}

/***************************************************************************************************************************************************
  Name   ：搜索面板（历史 + 联想）
  Explain：输入框下方的下拉面板，显示搜索历史或联想结果
**************************************************************************************************************************************************/
Search > SearchPanel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 3px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	z-index: 10;
	max-height: 300px;
	overflow-y: auto;
	padding: 6px 0;
}
Search > SearchPanel.Show {
	display: block;
}
SearchPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	font-size: 12px;
	color: #999;
}
SearchPanelClear {
	cursor: pointer;
	color: var(--DefaultColor);
}
SearchPanelClear:hover {
	text-decoration: underline;
}
SearchPanelItem {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	cursor: pointer;
	color: #333;
}
SearchPanelItem:hover {
	background: #f5f5f5;
}
SearchPanelItem icon {
	margin-right: 8px;
	color: #bbb;
	font-size: 14px;
}
SearchPanelText {
	flex: 1;
}
SearchPanelDesc {
	font-size: 12px;
	color: #999;
	margin-left: 8px;
}


/* ========== Skeleton/Skeleton.css ========== */
/*骨架屏
===================================================================================================================================================*/
@keyframes skeletonLoading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

Skeleton {
    display: inherit;
    background: #f2f2f2;
    border-radius: 4px;
    background-image: linear-gradient(
        90deg,
        #f2f2f2 25%,
        #e6e6e6 37%,
        #f2f2f2 63%
    );
    background-size: 200px 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
}

Skeleton.Heading {
    height: 20px;
    width: 60%;
}

Skeleton.Paragraph {
    height: 14px;
    width: 100%;
    margin-top: 10px;
}
Skeleton.Paragraph + Skeleton.Paragraph {
    width: 80%;
}
Skeleton.Paragraph + Skeleton.Paragraph + Skeleton.Paragraph {
    width: 60%;
}

Skeleton.Avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

Skeleton.Button {
    height: 32px;
    width: 80px;
    border-radius: 4px;
}

Skeleton.Image {
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* ========== Steps/Steps.css ========== */
/* ======================================================================================
   ANUI 3.0 步骤条组件 —— <Steps> / <Step>
   全驼峰命名，类作用域限制在 Steps 标签内
   ====================================================================================== */

/* 基础布局 */
Steps {
    display: flex;
    width: 100%;
}

Step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* 步骤图标 */
Steps .StepIcon {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #999;
    font-size: 14px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 步骤连接线（水平） */
Steps Step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 0;
    border-top: 2px solid #ddd;
    z-index: 0;
}

/* 步骤标题 */
Steps .StepTitle {
    margin-top: 8px;
    font-size: 14px;
    color: #999;
}

/* 步骤描述 */
Steps .StepDesc {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
}

/* ==================== 当前步骤 Current ==================== */
Steps Step.Current .StepIcon {
    border-color: #1890ff;
    color: #1890ff;
}

Steps Step.Current .StepTitle {
    color: #333;
}

/* Current 步骤的连接线变蓝 */
Steps Step.Current:not(:last-child)::after {
    border-top-color: #1890ff;
}

/* Finished 步骤的连接线变蓝 */
Steps Step.Finished:not(:last-child)::after {
    border-top-color: #1890ff;
}

/* ==================== 完成步骤 Finished ==================== */
Steps Step.Finished .StepIcon {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
}

/* ==================== 错误步骤 Error ==================== */
Steps Step.Error .StepIcon {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

/* ==================== 竖直方向 Vertical ==================== */
Steps.Vertical {
    flex-direction: column;
}

Steps.Vertical Step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding-bottom: 24px;
}

Steps.Vertical Step .StepIcon {
    flex-shrink: 0;
}

Steps.Vertical Step:not(:last-child)::after {
    top: 34px;
    left: 15px;
    width: 0;
    height: calc(100% - 34px);
    border-top: none;
    border-left: 2px solid #ddd;
}

Steps.Vertical Step.Current:not(:last-child)::after,
Steps.Vertical Step.Finished:not(:last-child)::after {
    border-left-color: #1890ff;
    border-top: none;
}

Steps.Vertical Step .StepTextWrap {
    margin-left: 12px;
}

Steps.Vertical Step .StepTitle {
    margin-top: 0;
}

Steps.Vertical Step .StepDesc {
    margin-top: 4px;
}

/* ========== Table/Table.css ========== */
/*表格整体属性
===========================================================================================================================================================*/
Table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 5px;
	border-spacing: 0;
	border-collapse: collapse;
	background-color: transparent;
}

/*首行字体设置
===========================================================================================================================================================*/
Table thead{
	font-size:16px;
	border-bottom: 2px solid #ddd;
}
Table thead th{
	font-weight:inherit;
	text-align: inherit;
}


/*列表字体设置
===========================================================================================================================================================*/
Table tbody{ font-size:14px;}

/*排序按钮
===========================================================================================================================================================*/
Table thead tr td i{ color:#CCC; cursor: pointer; transition:background-color 0.25s linear,color 0.25s linear;}
Table thead tr td i:hover{ color:#333;}

/*行高及边框调整
===========================================================================================================================================================*/
Table thead tr th,
Table tbody tr th,
Table tfoot tr th,
Table thead tr td,
Table tbody tr td,
Table tfoot tr td {
	padding: 11px;
	line-height: 1.4em;
	border-top: 1px solid #ddd;
}

/*行高及边框调整 - 紧缩表格
===========================================================================================================================================================*/
Table.Condensed thead tr th,
Table.Condensed tbody tr th,
Table.Condensed tfoot tr th,
Table.Condensed thead tr td,
Table.Condensed tbody tr td,
Table.Condensed tfoot tr td {
	padding: 6px 11px;
	line-height: 1.2;
	vertical-align: top;
	border-top: 1px solid #ddd;
}

/*首行顶边不显示
===========================================================================================================================================================*/
Table > caption + thead > tr:first-child > th,
Table > colgroup + thead > tr:first-child > th,
Table > thead:first-child > tr:first-child > th,
Table > caption + thead > tr:first-child > td,
Table > colgroup + thead > tr:first-child > td,
Table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
Table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.Table-bordered,
.TableBordered {
  border: 1px solid #ddd;
}
.Table-bordered > thead > tr > th,
.Table-bordered > tbody > tr > th,
.Table-bordered > tfoot > tr > th,
.Table-bordered > thead > tr > td,
.Table-bordered > tbody > tr > td,
.Table-bordered > tfoot > tr > td,
.TableBordered > thead > tr > th,
.TableBordered > tbody > tr > th,
.TableBordered > tfoot > tr > th,
.TableBordered > thead > tr > td,
.TableBordered > tbody > tr > td,
.TableBordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.Table-bordered > thead > tr > th,
.Table-bordered > thead > tr > td,
.TableBordered > thead > tr > th,
.TableBordered > thead > tr > td {
  border-bottom-width: 2px;
}
.Table-striped > tbody > tr:nth-of-type(odd),
.TableStriped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

/*滚动表格 - 外层容器方案（推荐）
===========================================================================================================================================================*/
.Table-Scroll-Wrapper,
.TableScrollWrapper {
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.Table-Scroll-Wrapper Table,
.TableScrollWrapper Table {
    margin-bottom: 0;
    border: 0;
}
.Table-Scroll-Wrapper Table thead th,
.TableScrollWrapper Table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}
.Table-Scroll-Wrapper.Table-Scroll-Height-200,
.TableScrollWrapper.TableScrollHeight200 {
    max-height: 200px;
}
.Table-Scroll-Wrapper.Table-Scroll-Height-300,
.TableScrollWrapper.TableScrollHeight300 {
    max-height: 300px;
}
.Table-Scroll-Wrapper.Table-Scroll-Height-400,
.TableScrollWrapper.TableScrollHeight400 {
    max-height: 400px;
}

/*旧版滚动表格（兼容保留）
===========================================================================================================================================================*/
Table.Scroll,
Table.Scroll tbody {
    display: block;
    height: calc(100% - 1.8em);
}
Table.Scroll tbody {
    overflow-y: scroll;
}
Table.Scroll thead,
Table.Scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
Table.Scroll thead {
    width: calc(100% - 1em)
}

/*行鼠标切换颜色
===========================================================================================================================================================*/
.Table-hover > tbody > tr:hover,
.TableHover > tbody > tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
  transition: background-color .1s ease;
}

/*Style1 卡片式表格
===========================================================================================================================================================*/
Table.Style1{
	padding-left: 16px;
	margin-left: -8px;
	border-spacing: 0px 5px!important;
	border-collapse: initial;
}
Table.Style1 tbody tr{
	position: relative;
}
Table.Style1 tbody tr td{
	position: relative;
	border-top: 0px solid #000!important;
	background-color: #FFF;
}
Table.Style1 tbody tr td::before{
	top: 0;
	left: -8px;
	height: 100%;
	position: absolute;
    background-color: inherit;
	content: "";
	padding: 5px;
	border-radius: 5px 0px 0px 5px;
}
Table.Style1 tbody tr td::after{
	top: 0;
	right: -8px;
	height: 100%;
	position: absolute;
    background-color: inherit;
	content: "";
	padding: 5px;
	border-radius: 0px 5px 5px 0;
}

/*列排序
===========================================================================================================================================================*/
Table thead th[Sort],
Table thead th[SortField] {
    cursor: pointer;
    user-select: none;
}
Table thead th[Sort] icon,
Table thead th[SortField] icon {
    color: #CCC;
    margin-left: 5px;
    font-size: 12px;
}
Table thead th[Sort]:hover icon,
Table thead th[SortField]:hover icon {
    color: #333;
}
Table thead th[SortDir="asc"] icon,
Table thead th[SortDir="desc"] icon {
    color: var(--DefaultColor);
}

/*行选择
===========================================================================================================================================================*/
Table tbody tr.Selected,
Table tbody tr.TableSelected,
Table tbody tr.Table-Selected {
    background-color: rgba(0, 123, 255, 0.08) !important;
}
Table tbody tr.Selected:hover,
Table tbody tr.TableSelected:hover,
Table tbody tr.Table-Selected:hover {
    background-color: rgba(0, 123, 255, 0.12) !important;
}
Table .SelectAll,
Table .TableSelectAll,
Table .Table-Select-All,
Table .SelectRow,
Table .TableSelectRow,
Table .Table-Select-Row {
    width: 40px;
    text-align: center;
}
Table .SelectAll input,
Table .TableSelectAll input,
Table .Table-Select-All input,
Table .SelectRow input,
Table .TableSelectRow input,
Table .Table-Select-Row input {
    cursor: pointer;
}

/*行选择复选框样式（解耦自 Form）
===========================================================================================================================================================*/
Table .SelectAll input[type='checkbox'],
Table .TableSelectAll input[type='checkbox'],
Table .Table-Select-All input[type='checkbox'],
Table .SelectRow input[type='checkbox'],
Table .TableSelectRow input[type='checkbox'],
Table .Table-Select-Row input[type='checkbox'] {
  --primary-color: var(--DefaultColor);
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  --checkbox-diameter: 23px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  --checkmark-size: 1.2;
}
Table .SelectAll input[type='checkbox'],
Table .TableSelectAll input[type='checkbox'],
Table .Table-Select-All input[type='checkbox'],
Table .SelectAll input[type='checkbox'] *,
Table .TableSelectAll input[type='checkbox'] *,
Table .Table-Select-All input[type='checkbox'] *,
Table .SelectAll input[type='checkbox'] *::before,
Table .TableSelectAll input[type='checkbox'] *::before,
Table .Table-Select-All input[type='checkbox'] *::before,
Table .SelectAll input[type='checkbox'] *::after,
Table .TableSelectAll input[type='checkbox'] *::after,
Table .Table-Select-All input[type='checkbox'] *::after,
Table .SelectRow input[type='checkbox'],
Table .TableSelectRow input[type='checkbox'],
Table .Table-Select-Row input[type='checkbox'],
Table .SelectRow input[type='checkbox'] *,
Table .TableSelectRow input[type='checkbox'] *,
Table .Table-Select-Row input[type='checkbox'] *,
Table .SelectRow input[type='checkbox'] *::before,
Table .TableSelectRow input[type='checkbox'] *::before,
Table .Table-Select-Row input[type='checkbox'] *::before,
Table .SelectRow input[type='checkbox'] *::after,
Table .TableSelectRow input[type='checkbox'] *::after,
Table .Table-Select-Row input[type='checkbox'] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
Table .SelectAll input[type='checkbox'],
Table .TableSelectAll input[type='checkbox'],
Table .Table-Select-All input[type='checkbox'],
Table .SelectRow input[type='checkbox'],
Table .TableSelectRow input[type='checkbox'],
Table .Table-Select-Row input[type='checkbox'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}
Table .SelectAll input[type='checkbox']::after,
Table .TableSelectAll input[type='checkbox']::after,
Table .Table-Select-All input[type='checkbox']::after,
Table .SelectRow input[type='checkbox']::after,
Table .TableSelectRow input[type='checkbox']::after,
Table .Table-Select-Row input[type='checkbox']::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}
Table .SelectAll input[type='checkbox']::before,
Table .TableSelectAll input[type='checkbox']::before,
Table .Table-Select-All input[type='checkbox']::before,
Table .SelectRow input[type='checkbox']::before,
Table .TableSelectRow input[type='checkbox']::before,
Table .Table-Select-Row input[type='checkbox']::before {
  top: 45%;
  left: 50%;
  content: "";
  position: absolute;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}
Table .SelectAll input[type='checkbox']:hover,
Table .TableSelectAll input[type='checkbox']:hover,
Table .Table-Select-All input[type='checkbox']:hover,
Table .SelectRow input[type='checkbox']:hover,
Table .TableSelectRow input[type='checkbox']:hover,
Table .Table-Select-Row input[type='checkbox']:hover {
  border-color: var(--primary-color);
}
Table .SelectAll input[type='checkbox']:checked,
Table .TableSelectAll input[type='checkbox']:checked,
Table .Table-Select-All input[type='checkbox']:checked,
Table .SelectRow input[type='checkbox']:checked,
Table .TableSelectRow input[type='checkbox']:checked,
Table .Table-Select-Row input[type='checkbox']:checked {
  background: var(--primary-color);
  border-color: transparent;
}
Table .SelectAll input[type='checkbox']:checked::before,
Table .TableSelectAll input[type='checkbox']:checked::before,
Table .Table-Select-All input[type='checkbox']:checked::before,
Table .SelectRow input[type='checkbox']:checked::before,
Table .TableSelectRow input[type='checkbox']:checked::before,
Table .Table-Select-Row input[type='checkbox']:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}
Table .SelectAll input[type='checkbox']:active:not(:checked)::after,
Table .TableSelectAll input[type='checkbox']:active:not(:checked)::after,
Table .Table-Select-All input[type='checkbox']:active:not(:checked)::after,
Table .SelectRow input[type='checkbox']:active:not(:checked)::after,
Table .TableSelectRow input[type='checkbox']:active:not(:checked)::after,
Table .Table-Select-Row input[type='checkbox']:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}
Table .SelectAll input[type='checkbox']:disabled,
Table .TableSelectAll input[type='checkbox']:disabled,
Table .Table-Select-All input[type='checkbox']:disabled,
Table .SelectRow input[type='checkbox']:disabled,
Table .TableSelectRow input[type='checkbox']:disabled,
Table .Table-Select-Row input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #eee;
}

/*空数据状态
===========================================================================================================================================================*/
Table tbody tr.EmptyData td,
Table tbody tr.TableEmptyData td,
Table tbody tr.Table-Empty-Data td {
    text-align: center;
    padding: 50px 20px;
    color: #999;
    border-top: 0;
}
Table tbody tr.EmptyData icon,
Table tbody tr.TableEmptyData icon,
Table tbody tr.Table-Empty-Data icon {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
    color: #ddd;
}

/*行序号
===========================================================================================================================================================*/
Table.TableRowNumber tbody {
    counter-reset: rowcounter;
}
Table.TableRowNumber tbody tr:not(.ExpandContent):not(.TableExpandContent):not(.Table-Expand-Content) {
    counter-increment: rowcounter;
}
Table.TableRowNumber tbody tr:not(.ExpandContent):not(.TableExpandContent):not(.Table-Expand-Content) td.RowNumber::before {
    content: counter(rowcounter);
    display: inline;
    color: #999;
}
Table.TableRowNumber th.RowNumber,
Table.TableRowNumber td.RowNumber {
    width: 40px;
    text-align: center;
    color: #999;
}

/*可展开行
===========================================================================================================================================================*/
Table tbody .ExpandRow,
Table tbody .TableExpandRow,
Table tbody .Table-Expand-Row {
    width: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
Table tbody .ExpandRow icon,
Table tbody .TableExpandRow icon,
Table tbody .Table-Expand-Row icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    background-color: #f5f5f5;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
}
Table tbody .ExpandRow:hover icon,
Table tbody .TableExpandRow:hover icon,
Table tbody .Table-Expand-Row:hover icon {
    background-color: #e0e0e0;
    color: #555;
}
Table tbody tr.ExpandContent,
Table tbody tr.TableExpandContent,
Table tbody tr.Table-Expand-Content {
    display: none;
}
Table tbody tr.ExpandContent td,
Table tbody tr.TableExpandContent td,
Table tbody tr.Table-Expand-Content td {
    padding: 0;
    background-color: #fafafa;
    border-top: 0;
}
Table tbody tr.ExpandContent .ExpandContentInner,
Table tbody tr.ExpandContent .TableExpandContentInner,
Table tbody tr.ExpandContent .Table-Expand-Content-Inner,
Table tbody tr.TableExpandContent .ExpandContentInner,
Table tbody tr.TableExpandContent .TableExpandContentInner,
Table tbody tr.TableExpandContent .Table-Expand-Content-Inner,
Table tbody tr.Table-Expand-Content .ExpandContentInner,
Table tbody tr.Table-Expand-Content .TableExpandContentInner,
Table tbody tr.Table-Expand-Content .Table-Expand-Content-Inner {
    padding: 15px 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}
Table tbody tr.ExpandContent .ExpandContentInner p,
Table tbody tr.ExpandContent .TableExpandContentInner p,
Table tbody tr.ExpandContent .Table-Expand-Content-Inner p,
Table tbody tr.TableExpandContent .ExpandContentInner p,
Table tbody tr.TableExpandContent .TableExpandContentInner p,
Table tbody tr.TableExpandContent .Table-Expand-Content-Inner p,
Table tbody tr.Table-Expand-Content .ExpandContentInner p,
Table tbody tr.Table-Expand-Content .TableExpandContentInner p,
Table tbody tr.Table-Expand-Content .Table-Expand-Content-Inner p {
    margin: 0 0 5px;
}
Table tbody tr.ExpandContent .ExpandContentInner p:last-child,
Table tbody tr.ExpandContent .TableExpandContentInner p:last-child,
Table tbody tr.ExpandContent .Table-Expand-Content-Inner p:last-child,
Table tbody tr.TableExpandContent .ExpandContentInner p:last-child,
Table tbody tr.TableExpandContent .TableExpandContentInner p:last-child,
Table tbody tr.TableExpandContent .Table-Expand-Content-Inner p:last-child,
Table tbody tr.Table-Expand-Content .ExpandContentInner p:last-child,
Table tbody tr.Table-Expand-Content .TableExpandContentInner p:last-child,
Table tbody tr.Table-Expand-Content .Table-Expand-Content-Inner p:last-child {
    margin-bottom: 0;
}


/* ========== Tabs/Tabs.css ========== */
	Tabs{
		display: block;
	}
	Tabs>Group{
		display: block;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid;
		border-color: #ddd;
		margin-bottom: 10px;
        -webkit-user-select: none; /* Safari */  
        -moz-user-select: none; /* Firefox */  
        -ms-user-select: none; /* IE10+/Edge */  
        user-select: none; /* 标准语法 */ 
	}
	Tabs>Group>Tab{
		display: inline-block;
		padding: 0 10px;
		cursor: pointer;
    }
	Tabs>Group>Tab.Active{
		border-bottom: 3px solid;
		border-color: var(--DefaultColor);
	}
    Tabs>Content{  
      display: none; 
	  
    }
    Tabs>Content.Active{  
      display: block; 
    }


/* ========== Timeline/Timeline.css ========== */
/* ======================================================================================
   ANUI 3.0 时间线组件 —— <Timeline> / <TimelineItem>
   全驼峰命名，类作用域限制在 Timeline 标签内
   ====================================================================================== */

/* 基础布局 */
Timeline {
    padding-left: 40px;
    position: relative;
}

/* 左侧竖线 */
Timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e8e8e8;
}

/* 时间线条目 */
TimelineItem {
    position: relative;
    padding-bottom: 24px;
    padding-left: 20px;
}

/* 节点圆点 */
TimelineItem::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
}

/* 内容区 */
TimelineItem .TimelineContent {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* 时间标签 */
TimelineItem .TimelineTime {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
}

/* ==================== 完成状态 Finished ==================== */
TimelineItem.Finished::before {
    background: #1890ff;
    border-color: #1890ff;
}

/* ==================== 成功状态 Success ==================== */
TimelineItem.Success::before {
    background: #52c41a;
    border-color: #52c41a;
}

/* ==================== 错误状态 Error ==================== */
TimelineItem.Error::before {
    background: #ff4d4f;
    border-color: #ff4d4f;
}

/* ==================== 右侧时间线 Right ==================== */
Timeline.Right {
    padding-left: 0;
    padding-right: 40px;
}

Timeline.Right::before {
    left: auto;
    right: 16px;
}

Timeline.Right TimelineItem {
    padding-left: 0;
    padding-right: 20px;
    text-align: right;
}

Timeline.Right TimelineItem::before {
    left: auto;
    right: -28px;
}

Timeline.Right TimelineItem .TimelineTime {
    text-align: right;
}

/* ========== Tooltip/Tooltip.css ========== */
.Tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.Tooltip TooltipContent {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 顶部 - 初始位置在下移10px，悬停时回到原位 */
TooltipContent.Top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-bottom: 12px;
}

.Tooltip:hover TooltipContent.Top {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 底部 - 初始位置在上移10px，悬停时回到原位 */
TooltipContent.Bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-top: 12px;
}

.Tooltip:hover TooltipContent.Bottom {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 左侧 - 初始位置在右移10px，悬停时回到原位 */
TooltipContent.Left {
    top: 50%;
    right: 100%;
    transform: translateY(-50%) translateX(10px);
    margin-right: 12px;
}

.Tooltip:hover TooltipContent.Left {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 右侧 - 初始位置在左移10px，悬停时回到原位 */
TooltipContent.Right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%) translateX(-10px);
    margin-left: 12px;
}

.Tooltip:hover TooltipContent.Right {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 箭头基础样式 */
TooltipContent::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

/* 箭头位置 */
TooltipContent.Top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(0, 0, 0, 0.85);
}

TooltipContent.Bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(0, 0, 0, 0.85);
}

TooltipContent.Left::after {
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    border-left-color: rgba(0, 0, 0, 0.85);
}

TooltipContent.Right::after {
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    border-right-color: rgba(0, 0, 0, 0.85);
}

/* ========== Tree/Tree.css ========== */
/* Tree 树结构
===========================================================================================*/
Tree {
    display: block;
    user-select: none;
    -moz-user-select: none;
    padding: 5px 0;
    font-size: 14px;
}

/* 节点 */
Tree TreeNode {
    display: block;
    list-style: none;
    cursor: pointer;
    margin: 2px 0;
}

/* 行 */
Tree TreeNode Row {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 4px;
    transition: background-color .15s;
}

Tree TreeNode Row:hover {
    background-color: rgba(0, 0, 0, .04);
}

Tree TreeNode Row.Active {
    background-color: rgba(59, 125, 221, .08);
    color: var(--DefaultColor);
}

/* 箭头 */
Tree TreeNode Row .Arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: #999;
    transition: transform .2s;
    flex-shrink: 0;
}

Tree TreeNode Row .Arrow.Expanded {
    transform: rotate(90deg);
}

/* ===== 复选框（复用 Form 的 checkbox 样式） ===== */
Tree TreeNode Row .TreeCheckboxWrap,
Tree TreeNode Row .TreeRadioWrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    margin-right: 6px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"],
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"],
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"] *,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"] *,
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"] *::before,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"] *::before,
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"] *::after,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"] *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"],
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 23px;
    height: 23px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: all 0.3s;
}

/* 勾选对号（默认隐藏） */
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"]::before,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"]::before {
    top: 45%;
    left: 50%;
    content: "";
    position: absolute;
    width: 6px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

/* 选中后蓝色填充 + 对号显示（通过 .Checked class 控制） */
Tree TreeNode Row .TreeCheckboxWrap.Checked input[type="checkbox"],
Tree TreeNode Row .TreeRadioWrap.Checked input[type="checkbox"] {
    background: var(--DefaultColor);
    border-color: transparent;
}

Tree TreeNode Row .TreeCheckboxWrap.Checked input[type="checkbox"]::before,
Tree TreeNode Row .TreeRadioWrap.Checked input[type="checkbox"]::before {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

/* hover 边框 */
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"]:hover,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"]:hover {
    border-color: var(--DefaultColor);
}

/* 点选波纹（未选中时点击） */
Tree TreeNode Row .TreeCheckboxWrap input[type="checkbox"]::after,
Tree TreeNode Row .TreeRadioWrap input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    box-shadow: 0 0 0 9px var(--DefaultColor);
    border-radius: inherit;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

Tree TreeNode Row .TreeCheckboxWrap:not(.Checked):not(.Indeterminate) input[type="checkbox"]:active::after,
Tree TreeNode Row .TreeRadioWrap:not(.Checked) input[type="checkbox"]:active::after {
    transition: none;
    box-shadow: none;
    opacity: 1;
}

/* 半选状态（蓝色背景 + 白色横线） */
Tree TreeNode Row .TreeCheckboxWrap.Indeterminate input[type="checkbox"] {
    background: var(--DefaultColor);
    border-color: transparent;
}

Tree TreeNode Row .TreeCheckboxWrap.Indeterminate input[type="checkbox"]::before {
    opacity: 0;
}

Tree TreeNode Row .TreeCheckboxWrap .IndeterminateMark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

Tree TreeNode Row .TreeCheckboxWrap.Indeterminate .IndeterminateMark {
    display: block;
}

/* 节点图标 */
Tree TreeNode Row .NodeIcon {
    font-size: 16px;
    margin-right: 6px;
    color: #666;
    flex-shrink: 0;
}

/* 节点文本 */
Tree TreeNode Row .NodeText {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 子节点容器 */
Tree TreeNode Children {
    display: block;
    padding-left: 20px;
}

/* 连接线 */
Tree.ShowLine TreeNode Children {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px dashed #ddd;
}

/* ===== 菜单模式 ===== */
Tree.MenuMode TreeNode Row {
    height: 40px;
    padding-left: 10px;
    padding-right: 15px;
    border-left: 3px solid transparent;
    border-radius: 0;
    margin: 0;
}

Tree.MenuMode TreeNode Row:hover {
    background-color: rgba(0, 0, 0, .03);
}

Tree.MenuMode TreeNode Row.Active {
    background-color: rgba(0, 0, 0, .05);
    border-left-color: var(--DefaultColor);
    color: var(--DefaultColor);
}

/* 深色菜单 */
Tree.MenuMode.Dark TreeNode Row {
    color: rgba(255, 255, 255, .6);
}

Tree.MenuMode.Dark TreeNode Row:hover {
    color: rgba(255, 255, 255, .8);
    background-color: rgba(255, 255, 255, .05);
}

Tree.MenuMode.Dark TreeNode Row.Active {
    color: rgba(255, 255, 255, .9);
    background-image: linear-gradient(90deg, rgba(59, 125, 221, .15), rgba(255, 255, 255, 0));
    border-left-color: var(--DefaultColor);
}

Tree.MenuMode.Dark TreeNode Row .Arrow {
    color: rgba(255, 255, 255, .4);
}

Tree.MenuMode.Dark TreeNode Row .NodeIcon {
    color: rgba(255, 255, 255, .5);
}

/* ===== 下拉选框模式 ===== */
Tree.SelectMode {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 0;
}

Tree.SelectMode TreeNode Row.Active {
    background-color: rgba(59, 125, 221, .1);
}

/* ===== 下拉树选框包装器 ===== */
.TreeSelectWrapper {
    position: relative;
}
.TreeSelectWrapper input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 30px 0 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}
.TreeSelectWrapper .ArrowIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 12px;
}
.TreeDropdown {
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* ========== Typesetting/Typesetting.css ========== */
/*字体大小
===========================================================================================================================================================*/
h1,h2,h3,h4,h5,h6,p{font-weight:500; margin: 0}

p {font-size:15px; line-height: 1.82em; letter-spacing:1px;}/*~15px*/
h1{font-size:36px; line-height:45px;}/*36px*/
h2{font-size:30px; line-height:40px;}/*30px*/
h3{font-size:24px; line-height:30px;}/*24px*/
h4{font-size:18px}/*18px*/
h5{font-size:15px}/*14px*/
h6{font-size:12px}/*12px*/

.h1{font-size:36px}/*36px*/
.h2{font-size:30px}/*30px*/
.h3{font-size:24px}/*24px*/
.h4{font-size:18px}/*18px*/
.h5{font-size:15px}/*14px*/
.h6{font-size:12px}/*12px*/


h1 small,h2 small,h3 small,h4 small,h5 small,h6  small{ color:#999999; font-weight: 300}
h1 small,h2 small,h3 small{font-size:65%}
h4 small,h5 small,h6 small{font-size:75%}

/*中心内容
===========================================================================================================================================================*/
.Lead{font-size: 18px; line-height: 26px; font-weight: 200;}

/*文本对齐方式
===========================================================================================================================================================*/
.Align-Left,
.Text-Left/*兼容旧版*/
{text-align: left;}
.Align-Center,
.Text-Center/*兼容旧版*/
{text-align: center;}
.Align-Right,
.Text-Right/*兼容旧版*/
{text-align: right;}

/*控制字体超出变成省略号===========================================================================================================================================================*/
.Omit{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.Omit2{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;	
}

.Omit3{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;	
}

.Omit4{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;	
}

.Omit5{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;	
}

.Omit6{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;	
}

.Omit7{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:7;
-webkit-box-orient:vertical;	
}

.Omit8{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:8;
-webkit-box-orient:vertical;	
}
/*文本强调
===========================================================================================================================================================*/
mark   { background-color: #FFC107;}/*文本背景高亮*/
del    {text-decoration-color: #E84C3D;}/*删除文本的线条颜色定义为红色*/
ins    {text-decoration-color: #4CAF50;}/*更新文本的线条颜色定义为绿色*/

/*改变大小写
===========================================================================================================================================================*/
.Text-lowercase/*兼容旧版*/,.Text-Lowercase{text-transform: uppercase}/*全大写*/
.Text-uppercase/*兼容旧版*/,.Text-Uppercase{text-transform: lowercase}/*全小写*/
.Text-capitalize/*兼容旧版*/,.Text-Capitalize{text-transform: capitalize}/*首字母大写*/

/*字重
===========================================================================================================================================================*/
.TextNormal   { font-weight: normal; }
.TextBold     { font-weight: bold; }
.TextLighter  { font-weight: lighter; }
.Font100      { font-weight: 100; }
.Font200      { font-weight: 200; }
.Font300      { font-weight: 300; }
.Font400      { font-weight: 400; }
.Font500      { font-weight: 500; }
.Font600      { font-weight: 600; }
.Font700      { font-weight: 700; }
.Font900      { font-weight: 900; }

/*字体样式
===========================================================================================================================================================*/
.TextItalic   { font-style: italic; }
.TextUnderline { text-decoration: underline; }
.TextLineThrough { text-decoration: line-through; }
.TextOverline  { text-decoration: overline; }
.TextNoDecor   { text-decoration: none !important; }

/*字间距
===========================================================================================================================================================*/
.TextSpacing1  { letter-spacing: 1px; }
.TextSpacing2  { letter-spacing: 2px; }
.TextSpacing3  { letter-spacing: 3px; }
.TextSpacing5  { letter-spacing: 5px; }
.TextSpacing10 { letter-spacing: 10px; }
.TextSpacingN1 { letter-spacing: -1px; }

/*行高
===========================================================================================================================================================*/
.TextHeight1   { line-height: 1; }
.TextHeight12  { line-height: 1.2; }
.TextHeight14  { line-height: 1.4; }
.TextHeight16  { line-height: 1.6; }
.TextHeight18  { line-height: 1.8; }
.TextHeight2   { line-height: 2; }
.TextHeight25  { line-height: 2.5; }
.TextHeight3   { line-height: 3; }

/*字体大小工具类
===========================================================================================================================================================*/
.Text10 { font-size: 10px; }
.Text11 { font-size: 11px; }
.Text12 { font-size: 12px; }
.Text13 { font-size: 13px; }
.Text14 { font-size: 14px; }
.Text15 { font-size: 15px; }
.Text16 { font-size: 16px; }
.Text18 { font-size: 18px; }
.Text20 { font-size: 20px; }
.Text24 { font-size: 24px; }
.Text28 { font-size: 28px; }
.Text32 { font-size: 32px; }
.Text36 { font-size: 36px; }
.Text48 { font-size: 48px; }

/*文本颜色
===========================================================================================================================================================*/
.TextMuted    { color: #999; }
.TextSubtle   { color: #bbb; }
.TextSuccess  { color: #52c41a; }
.TextDanger   { color: #ff4d4f; }
.TextWarning  { color: #faad14; }
.TextInfo     { color: #1890ff; }
.TextPrimary  { color: #1890ff; }

/*文本阴影
===========================================================================================================================================================*/
.TextShadow   { text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.TextShadowLg { text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.TextGlow     { text-shadow: 0 0 8px rgba(24,144,255,0.6); }

/*文本方向
===========================================================================================================================================================*/
.TextBreak     { word-break: break-all; }
.TextKeepAll   { word-break: keep-all; }
.TextNoWrap    { white-space: nowrap; }
.TextPreWrap   { white-space: pre-wrap; }

/*列表标记
===========================================================================================================================================================*/
.ListNone    { list-style: none; padding-left: 0; }
.ListDisc    { list-style-type: disc; padding-left: 20px; }
.ListCircle  { list-style-type: circle; padding-left: 20px; }
.ListSquare  { list-style-type: square; padding-left: 20px; }
.ListDecimal { list-style-type: decimal; padding-left: 20px; }


/* ========== Upload/Upload.css ========== */
Upload {
	width: 100%;
	max-width: 100%;
    display: flex;
	flex-direction: row;
    position: relative;
	border-radius: 5px;
	overflow: visible;
}

Upload label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	white-space: nowrap;
    background-color: var(--DefaultColor);
    color: white;
	padding-left: 10px;
	border-radius: 5px 0 0 5px;
	padding-right: 10px;
	font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

Upload label:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset; /*用于实现按钮hover颜色渐变*/
    transition: all .2s ease;
}

Upload Info{
	position: relative;
	align-self: flex-start;
	width: 100%;
	height: 40px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #DDD;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-radius: 0 5px 5px 0;
	overflow: hidden;
}

Upload .file-input {
    display: none;
}

Upload .file-name {
    width: 100%;
    padding-left: 8px;
    padding-right: 90px;
    box-sizing: border-box;
    font-size: 13px;
	height: 35px;
    color: #333;
    display: flex;
    align-items: center;
	white-space: nowrap;       /* 强制文本在一行内显示 */
    overflow: hidden;          /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;   /* 当文本溢出时显示省略号 */
}

Upload .progressContainer {
    margin-top: 1px;
	overflow: hidden;
}

Upload progress {
    width: 100%;
    height: 3px;
    appearance: none; /* 移除默认样式 */
    -webkit-appearance: none; /* 移除WebKit浏览器默认样式 */
    background-color: #f3f3f3; /* 背景颜色 */
    overflow: hidden;
}

Upload progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* 背景颜色 */
}

/* WebKit浏览器中的渐变效果 */
Upload progress::-webkit-progress-value {
    background: linear-gradient(to right, #4caf50, #ffeb3b); /* 渐变颜色 */
    border-radius: 10px; /* 圆角 */
}

Upload .progressText {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

/* 独立状态
===========================================================================================*/
Upload .upload-status {
    display: block;
    padding: 0 8px;
    font-size: 12px;
    margin-top: 2px;
}

/* 预览图
===========================================================================================*/
Upload .upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 8px;
    margin-top: 2px;
}
Upload .upload-preview img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* 拖拽上传
===========================================================================================*/
Upload[Draggable] {
    border: 2px dashed transparent;
    transition: border-color 0.2s, background-color 0.2s;
}
Upload[Draggable].DragOver {
    border-color: var(--DefaultColor);
    background-color: rgba(0,123,255,0.05);
}

/* 禁用状态
===========================================================================================*/
Upload[Disabled] {
    opacity: 0.6;
    pointer-events: none;
}
Upload[Disabled] label {
    background-color: #999 !important;
    cursor: not-allowed;
}

/* Form 风格验证状态
===========================================================================================*/
Upload Info.NoPass {
    border-color: var(--GRAPEFRUIT);
    border-radius: 0 5px 5px 5px;
    background-color: rgba(244, 67, 54, 0.06);
}

Upload NoPassText {
    border-radius: 4px 4px 0px 0px;
    background-color: var(--GRAPEFRUIT);
    color: #FFF;
    position: absolute;
    line-height: 15px;
    font-size: 11px;
    right: 0;
    top: -15px;
    padding: 0 5px;
    z-index: 1;
}

Upload Info.Pass {
    border-color: mediumseagreen;
    background-color: rgba(46, 204, 113, 0.08);
}

/* 上传成功：仅绿色背景提示，不再显示勾勾图标 */
Upload Info.UploadSuccess {
    background-color: rgba(46, 204, 113, 0.08);
}

Upload Info.NoPass .progressText,
Upload Info.Pass .progressText,
Upload Info.UploadSuccess .progressText {
    right: 30px;
}

/* ========== Uploader/Uploader.css ========== */
/* ==========================================================================
 * Uploader 组件样式
 * 命名前缀统一为 uploader-；状态类复用 NoPass / Pass / UploadSuccess
 * 颜色全部走主题变量（暗亮自动切换），缺失时回退到安全默认值
 * ========================================================================== */

Uploader {
    display: block;
    width: 100%;
    max-width: 100%;
    position: relative;
    --up-thumb: 96px;                 /* 缩略图尺寸，可用 ThumbSize 覆盖 */
    color: var(--text-primary, #1a1a2e);
    font-size: 14px;
}

/* 隐藏原生文件框 */
Uploader .uploader-input {
    display: none;
}

/* 触发区 / 拖拽区
=============================================================================*/
Uploader .uploader-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 110px;
    padding: 18px;
    box-sizing: border-box;
    border: 2px dashed var(--border-input, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--bg-input, #fff);
    color: var(--text-secondary, #555568);
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}

Uploader .uploader-trigger:hover {
    border-color: var(--DefaultColor, #1890ff);
    color: var(--DefaultColor, #1890ff);
    background: var(--accent-light, rgba(24, 144, 255, 0.06));
}

Uploader .uploader-trigger .uploader-ico {
    color: var(--DefaultColor, #1890ff);
}

Uploader .uploader-trigger .uploader-trigger-text {
    font-size: 13px;
}

/* 拖拽悬停高亮 */
Uploader[Draggable] .uploader-trigger.DragOver {
    border-color: var(--DefaultColor, #1890ff);
    background: var(--accent-light, rgba(24, 144, 255, 0.1));
    color: var(--DefaultColor, #1890ff);
    transform: scale(1.01);
}

/* 禁用 */
Uploader[Disabled] {
    opacity: 0.55;
    pointer-events: none;
}
Uploader[Disabled] .uploader-trigger {
    cursor: not-allowed;
    border-style: solid;
}

/* 缩略图列表
=============================================================================*/
Uploader .uploader-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--up-thumb), 1fr));
    gap: 10px;
    margin-top: 10px;
}

/* 列表模式 */
Uploader[ListView] .uploader-list {
    display: flex;
    flex-direction: column;
}

Uploader .uploader-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid var(--border-card, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    background: var(--bg-card, #fff);
    overflow: hidden;
    transition: all 0.3s;
}

/* 网格模式下缩略图占满整卡 */
Uploader:not([ListView]) .uploader-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 缩略图 */
Uploader .uploader-thumb {
    width: var(--up-thumb);
    height: var(--up-thumb);
    max-width: 100%;
    border-radius: 6px;
    background-color: var(--bg-bar, #f0f0f5);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

Uploader .uploader-thumb--file {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #555568);
    background: var(--bg-bar, #f0f0f5);
    border: 1px solid var(--border-card, rgba(0, 0, 0, 0.08));
}

/* 文件信息 */
Uploader .uploader-meta {
    flex: 1 1 auto;
    min-width: 0;
}

Uploader .uploader-name {
    font-size: 13px;
    color: var(--text-primary, #1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Uploader .uploader-size {
    font-size: 12px;
    color: var(--text-muted, #8888a0);
    margin-top: 2px;
}

/* 进度条 */
Uploader .uploader-progress {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--bg-bar, #eee);
    overflow: hidden;
}

Uploader .uploader-progress > span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--DefaultColor, #1890ff),
        var(--success, #22c55e));
    transition: width 0.2s ease;
}

Uploader .uploader-item.uploading .uploader-progress > span {
    background: var(--DefaultColor, #1890ff);
}

/* 删除按钮 */
Uploader .uploader-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 2;
}

Uploader .uploader-item:hover .uploader-remove {
    opacity: 1;
}

Uploader .uploader-remove:hover {
    background: var(--danger, #ef4444);
}

/* 状态：成功 / 失败（复用 Form 风格类） */
Uploader .uploader-item.UploadSuccess {
    border-color: var(--success, #22c55e);
}

Uploader .uploader-item.NoPass {
    border-color: var(--danger, #ef4444);
}

/* 表单级校验状态（标在组件根上） */
Uploader.NoPass {
    border-color: var(--danger, #ef4444);
}

/* 阻止 ANUI 全局 Pass/NoPass 的勾勾/叉叉背景图污染 Uploader 内部 */
Uploader.Pass,
Uploader.NoPass .uploader-trigger,
Uploader .uploader-item.UploadSuccess,
Uploader .uploader-item.NoPass {
    background-image: none !important;
}

/* Uploader 自己的校验失败态：浅红背景 + 虚线红边框 */
Uploader.NoPass .uploader-trigger {
    border-color: var(--danger, #ef4444);
    background: var(--danger-bg, rgba(239, 68, 68, 0.08));
}

Uploader.NoPass .uploader-trigger:hover {
    background: var(--danger-bg-hover, rgba(239, 68, 68, 0.14));
}

/* 校验/错误提示文字（改为正常文档流提示条，避免盖住 tab 标题） */
Uploader NoPassText {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--danger, #ef4444);
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
    max-height: 90px;
    overflow-y: auto;
}

/* 暗色主题微调：文件占位与进度底色更柔和 */
@media (prefers-color-scheme: dark) {
    Uploader .uploader-thumb--file {
        background: rgba(255, 255, 255, 0.06);
    }
    Uploader .uploader-progress {
        background: rgba(255, 255, 255, 0.12);
    }
}