/* 字体 */
@font-face {
    font-family: "MiSans Light";
    src: url("../fonts/MiSans/woff2/MiSans-Light.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    font-display: optional
}
@font-face {
    font-family: "MiSans Regular";
    src: url("../fonts/MiSans/woff2/MiSans-Regular.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-display: optional
}
@font-face {
    font-family: "MiSans Medium";
    src: url("../fonts/MiSans/woff2/MiSans-Medium.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-display: optional
}

@font-face {
    font-family: "MiSans SemiBold";
    src: url("../fonts/MiSans/woff2/MiSans-Semibold.woff2") format("woff2"),
        url("../fonts/MiSans/woff/MiSans-Semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MiSans VF";
    src: url("../fonts/MiSans/MiSansVF.ttf") format("truetype");
    font-variation-settings: "wght" 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "阿里妈妈灵动体 VF Thin";src: url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.woff2") format("woff2"),
  url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.woff") format("woff"),url("../fonts/阿里妈妈灵动体/AlimamaAgileVF-Thin.ttf") format("truetype");
  font-variation-settings: "SRIF" 0, "slnt" 0, "wdth" 75, "wght" 100;
  font-display: swap;
}
@font-face{
  font-family: "MonaSans VF";src:url("../fonts/mona-sans/MonaSansVF[wdth\,wght\,opsz\,ital].woff2") format("woff2"),
  url("../fonts/mona-sans/MonaSansVF[wdth\,wght\,opsz\,ital].woff") format("woff");
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400, "ital" 0;
  font-display: swap;
}
/* 特殊文字 */
@font-face {
  font-family: "Monoton";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Monoton"), local("Monoton-Regular"),
    url(../fonts/AKI-lyzyNHXByGHeOcds_w.woff) format("woff");
}

@font-face {
  font-family: "Iceland";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Iceland"), local("Iceland-Regular"),
    url(../fonts/F6LYTZLHrG9BNYXRjU7RSw.woff) format("woff");
}

@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  src: local("Pacifico Regular"), local("Pacifico-Regular"),
    url(../fonts/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format("woff");
}

@font-face {
  font-family: "PressStart";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Press Start 2P"), local("PressStart2P-Regular"),
    url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format("woff");
}

@font-face {
  font-family: "Audiowide";
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  src: local("Audiowide"), local("Audiowide-Regular"),
    url(../fonts/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}

@font-face {
  font-family: "Vampiro One";
  font-style: normal;
  font-display: optional;
  font-weight: 400;
  src: local("Vampiro One"), local("VampiroOne-Regular"),
    url(../fonts/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format("woff");
}
/* 字体样式 */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-misans-regular{
  font-family: "MiSans Regular";
}
.font-misans-medium{
  font-family: "MiSans Medium";
}
.font-misans-light{
  font-family: "MiSans Light";
}
.font-misans-vf{
  font-family: "MiSans VF";
  font-variation-settings: "wght" var(--wght);
}
.font-misans-semibold{
  font-family: "MiSans SemiBold";
}
.font-ali-bold {
  font-family: "阿里妈妈数黑体 Bold";
}
.font-ali-agile {
  font-family: "阿里妈妈灵动体 VF Thin";
  --srif: 0; /*衬线*/
  --slnt: 0;  /*倾斜度*/
  --wdth: 100; /*字宽*/
  --wght: 400; /*字高*/
  font-variation-settings: 
    "SRIF" var(--srif), 
    "slnt" var(--slnt), 
    "wdth" var(--wdth), 
    "wght" var(--wght);
}
.font-mona{
  font-family: "MonaSans VF";
  --opsz:14;
  --wdth:100;
  --wght:400;
  --ital:0;
  font-variation-settings: 
    "opsz" var(--opsz), 
    "wdth" var(--wdth), 
    "wght" var(--wght), 
    "ital" var(--ital);
}

/* v1.3渐变定义 */
.bg-gradient.bg-seasalt,
.bg-gradient.hover-bg-seasalt:hover {
  background-image: linear-gradient(to right,
      #25aae1,
      #40e495,
      #30dd8a,
      #2bb673);
}

.bg-gradient.bg-taurine,
.bg-gradient.hover-bg-taurine:hover {
  background-image: linear-gradient(to right,
      #f5ce62,
      #e43603,
      #fa7199,
      #e85a19);
}

.bg-gradient.bg-blueberry,
.bg-gradient.hover-bg-blueberry:hover {
  background-image: linear-gradient(to right,
      #667eea,
      #764ba2,
      #6b8dd6,
      #8e37d7);
}

.bg-gradient.bg-strawberry,
.bg-gradient.hover-bg-strawberry:hover {
  background-image: linear-gradient(to right,
      #fc6076,
      #ff9a44,
      #ef9d43,
      #e75516);
}

.bg-gradient.bg-cranberry,
.bg-gradient.hover-bg-cranberry:hover {
  background-image: linear-gradient(to right,
      #0ba360,
      #3cba92,
      #30dd8a,
      #2bb673);
}

.bg-gradient.bg-lemon,
.bg-gradient.hover-bg-lemon:hover {
  background-image: linear-gradient(to right,
      #009245,
      #fcee21,
      #00a8c5,
      #d9e021);
}

.bg-gradient.bg-violetblue,
.bg-gradient.hover-bg-violetblue:hover {
  background-image: linear-gradient(to right,
      #6253e1,
      #852d91,
      #a3a1ff,
      #f24645);
}

.bg-gradient.bg-basalt,
.bg-gradient.hover-bg-basalt:hover {
  background-image: linear-gradient(to right,
      #29323c,
      #485563,
      #2b5876,
      #4e4376);
}

.bg-gradient.bg-iceblue,
.bg-gradient.hover-bg-iceblue:hover {
  background-image: linear-gradient(to right,
      #25aae1,
      #4481eb,
      #04befe,
      #3f86ed);
}

.bg-gradient.bg-straw,
.bg-gradient.hover-bg-straw:hover {
  background-image: linear-gradient(to right,
      #ed6ea0,
      #ec8c69,
      #f7186a,
      #fbb03b);
}

.bg-gradient.bg-fireunicorn,
.bg-gradient.hover-bg-fireunicorn:hover {  
  background-image: linear-gradient(to right,
      #eb3941,
      #f15e64,
      #e14e53,
      #e2373f);
}

/* 发光效果 */
.bg-gradient.bg-seasalt.glowing {
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.bg-gradient.bg-taurine.glowing {
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

.bg-gradient.bg-blueberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.bg-gradient.bg-strawberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}

.bg-gradient.bg-cranberry.glowing {
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

.bg-gradient.bg-lemon.glowing {
  box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.bg-gradient.bg-violetblue.glowing {
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

.bg-gradient.bg-basalt.glowing {
  box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.bg-gradient.bg-iceblue.glowing {
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.bg-gradient.bg-straw.glowing {
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.bg-gradient.bg-fireunicorn.glowing {
  box-shadow: 0 4px 15px 0 rgba(242, 97, 103, 0.4);
}

/*面包屑*/
/* 基础面包屑样式 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
  margin-bottom: var(--breadcrumb-margin-bottom);
  background-color: var(--surface-bg);
  border-radius: var(--breadcrumb-border-radius);
  font-size: var(--breadcrumb-font-size);
}

/* Breadcrumb item */
.breadcrumb>li {
  display: inline-flex;
  align-items: center;
}

/* 增加项目之间的间距和分隔符 */
.breadcrumb>li+li {
  padding-left: var(--breadcrumb-item-padding);
}

.breadcrumb>li+li::before {
  display: inline-block;
  padding-right: var(--breadcrumb-item-padding);
  color: var(--breadcrumb-divider-color);
  content: var(--breadcrumb-divider);
}

/* 面包屑链接 */
.breadcrumb a {
  color: var(--breadcrumb-link-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.breadcrumb a:hover {
  color: var(--breadcrumb-link-hover-color);
  text-decoration: var(--breadcrumb-link-hover-decoration);
}

/* 活动面包屑项 */
.breadcrumb>.active a,
.breadcrumb>.active {
  color: rgb(var(--primary-hue-500));
  pointer-events: none;
  font-weight: 500;
}


/* 面包屑边距 */
.breadcrumb-bordered {
  border: 1px solid var(--breadcrumb-border-color);
}

/* 分布式渐层面包屑 */
.breadcrumb-filled {
  background-color: rgb(var(--gray-100));
}

/* 紧凑型面包屑导航条，间距较小。 */
.breadcrumb-compact {
  --breadcrumb-padding-y: 4px;
  --breadcrumb-padding-x: 8px;
  --breadcrumb-item-padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* 扩展的面包屑条目，间距更大 */
.breadcrumb-expanded {
  --breadcrumb-padding-y: 12px;
  --breadcrumb-padding-x: 20px;
  --breadcrumb-item-padding: 0.75rem;
  font-size: 1.125rem;
}

/* Alternate divider styles */
.breadcrumb-arrow {
  --breadcrumb-divider: "›";
}

.breadcrumb-angle {
  --breadcrumb-divider: ">";
}

.breadcrumb-bullet {
  --breadcrumb-divider: "•";
}

.breadcrumb-dash {
  --breadcrumb-divider: "-";
}

/* 垂直导航条（用于侧边栏样式的导航） */
.breadcrumb-vertical {
  flex-direction: column;
  align-items: flex-start;
}

.breadcrumb-vertical>li {
  margin-bottom: 0.5rem;
}

.breadcrumb-vertical>li+li::before {
  content: "";
  padding-left: 0px;
}

.breadcrumb-vertical>li+li {
  position: relative;
  padding-left: 1rem;
}

.breadcrumb-vertical>li+li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: .5rem;
  background-color: var(--breadcrumb-divider-color);
}

/* 根据屏幕大小调整面包屑 - 小屏幕上折叠 */
@media (max-width: 640px) {
  .breadcrumb-responsive>li:not(:nth-last-child(-n+2)) {
    display: none;
  }

  .breadcrumb-responsive>li:nth-last-child(2)::before {
    content: "...";
    padding-right: var(--breadcrumb-item-padding);
    color: var(--breadcrumb-divider-color);
  }

  .breadcrumb-responsive>li:first-child {
    display: inline-flex;
  }
}

/* 动画式的导航面包屑支持过渡效果。 */
.breadcrumb-animated a {
  position: relative;
  transition: all 0.3s ease;
}

.breadcrumb-animated a::after {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  bottom: -2px;
  background-color: var(--breadcrumb-link-hover-color);
  transition: width 0.3s ease;
}

.breadcrumb-animated a:hover::after {
  width: 100%;
}

/* 支持图标 */
.breadcrumb-with-icons>li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-with-icons i,
.breadcrumb-with-icons svg {
  margin-right: .25rem
}

.breadcrumb-with-icons>li+li::before {
  padding: 0 var(--breadcrumb-item-padding);
}

/* 微调动画（高亮路径） */
@keyframes highlight {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.breadcrumb-highlight>li {
  position: relative;
}

.breadcrumb-highlight:hover>li:not(:hover) {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.breadcrumb-highlight>li:hover {
  opacity: 1;
}

.tags {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1rem;
  padding-left: .25rem;
  padding-right: .25rem;
  padding-left: .125rem;
  padding-right: .125rem;
  border-radius: 0.25rem;
  background-color: rgb(var(----white));
  color: rgb(var(--gray-400));
  min-width: 1.25rem;
  white-space: pre-line;
  border: 1px solid rgb(var(--gray-300));
}

/* 紧凑tags */
.tags.size-sm {
  font-size: 0.75rem;
  line-height: 1rem;
  padding-left: .25rem;
  padding-right: .25rem;
}

/* 大tags */
.tags.size-lg {
  font-size: 0.9rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/*表格*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background-color: rgb(var(--surface-bg));
  color: var(--surface-text);
}

table tr {
  background-color: rgb(var(--surface-bg));
  color: var(--surface-text);
  -webkit-transition: all .3s;
}

table tr th,
table tr td {
  position: relative;
  min-height: 20px;
  font-size: 14px;
  color: rgb(var(--surface-text));
  border: none;
  padding: 13px 15px;
  line-height: inherit;
  text-align: left;
}

table tr th {
  border-bottom: solid 1px rgb(var(--surface-border));
  font-weight: 700;
}

table tr td {
  border-bottom: solid 0.5px rgb(var(--surface-border));
}

table tbody tr:hover,
table.striped tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.striped tbody tr:hover {
  background: none;
}

/* 提示器 */

[data-tips],
[data-badge] {
  position: relative
}

[data-tips]:after {
  border-radius: .4rem;
  content: attr(data-tips);
  font-size: 13px;
  padding: 12.8px;
  padding: .8rem;
  visibility: hidden;
  text-align: left;
  opacity: 0;
  line-height: 20px;
  line-height: 1.25rem;
  bottom: 100%;
  left: 50%;
}

[data-tips]:after,
[data-badge]:after {
  position: absolute;
  background-color: rgb(var(--primary-hue-500));
  box-shadow: 0 0 14px rgba(0, 0, 0, .1);
  color: rgb(var(--black));
  z-index: 1;
  pointer-events: none;
  display: block;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  white-space: pre;
  width: auto
}

.theme-magic[data-tips]:after {
  background-image: rgb(var(--primary-hue-500));
  background-size: 300% 100%;
  cursor: pointer;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

[data-tips]:hover {
  overflow: visible
}

[data-tips]:hover:after {
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px)
}

[data-tips].tips--bottom:after,
[data-tips][data-tips-pos=bottom]:after {
  bottom: auto;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px)
}

[data-tips].tips--bottom:hover:after,
[data-tips][data-tips-pos=bottom]:hover:after {
  -webkit-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px)
}

[data-tips].tips--left:after,
[data-tips][data-tips-pos=left]:after {
  bottom: auto;
  left: auto;
  top: 50%;
  right: 100%;
  -webkit-transform: translate(10px, -50%);
  transform: translate(10px, -50%)
}

[data-tips].tips--left:hover:after,
[data-tips][data-tips-pos=left]:hover:after {
  -webkit-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%)
}

[data-tips].tips--right:after,
[data-tips][data-tips-pos=right]:after {
  bottom: auto;
  top: 50%;
  left: 100%;
  -webkit-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%)
}

[data-tips].tips--right:hover:after,
[data-tips][data-tips-pos=right]:hover:after {
  -webkit-transform: translate(10px, -50%);
  transform: translate(10px, -50%)
}

[data-tips].tips-length--small:after,
[data-tips][data-tips-length=small]:after {
  white-space: normal;
  width: 80px
}

[data-tips].tips-length--medium:after,
[data-tips][data-tips-length=medium]:after {
  white-space: normal;
  width: 150px
}

[data-tips].tips-length--large:after,
[data-tips][data-tips-length=large]:after {
  white-space: normal;
  width: 260px
}

[data-tips].tips-length--fit:after,
[data-tips][data-tips-length=fit]:after {
  white-space: normal;
  width: 100%
}

[data-tips].tips-align--right:after,
[data-tips][data-tips-align=right]:after {
  text-align: right
}

[data-tips].tips-align--center:after,
[data-tips][data-tips-align=center]:after {
  text-align: center
}


/*提示器，配合msg.js*/

.mt--0\.5 {
  margin-top: -2px;
}

[data-msg-type="loading"] img {
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

[data-msg-close="true"] button {
  position: relative;
  top: -20px;
  right: -20px;
  cursor: pointer;
  background-color: rgb(var(--red-500));
  color: rgb(var(--white));
}

/*按钮*/
.btn {
  --btn-bg-color:var(--gray-200);
  --btn-text-color:var(--black);
  --bg-opacity:1;
  --border-width:var(--border-width-1);
  --border-style:solid;
  --border-color: var(--black);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: .5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  border: var(--border-width) var(--border-style) rgb(var(--btn-bg-color));
  cursor: pointer;
  transition: all .3s;
  -webkit-appearance: none;
  border-radius: .2rem;
  background-color: rgba(var(--btn-bg-color) / var(--bg-opacity));
  color: rgb(var(--btn-text-color));
}
.btn:hover{
  --bg-opacity:0.75;
}
.btn-outline:hover{
  --bg-opacity:1;
  background-color: rgba(var(--btn-bg-color) / var(--bg-opacity));
}
.btn.btn-transparent,
.btn-outline {
  background-color: transparent;
}

/*按钮尺寸*/
.btn.btn-xs {
  padding: .3rem .6rem;
  font-size: 0.625rem;
  line-height: 1rem;
}

.btn.btn-sm {
  padding: .4rem .8rem;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.btn.btn-lg {
  padding: .8rem 1.6rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
}
/* 按钮颜色 */
.btn-red,
.btn-danger,
.btn-outline.btn-danger:hover,
.btn-outline.btn-red:hover,
.btn-red:hover,
.btn-danger:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--red-500);
  --border-color: var(--red-500);
}

.btn-orange,
.btn-outline.btn-orange:hover,
.btn-orange:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--orange-500);
  --border-color: var(--orange-500);
}
.btn-warning,
.btn-amber,
.btn-outline.btn-amber:hover,
.btn-outline.btn-warning:hover,
.btn-warning:hover,
.btn-amber:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--amber-500);
  --border-color: var(--amber-500);
}
.btn-yellow,
.btn-outline.btn-yellow:hover,
.btn-yellow:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--yellow-500);
  --border-color: var(--yellow-500);
}
.btn-lime,
.btn-outline.btn-lime:hover,
.btn-lime:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--lime-500);
  --border-color: var(--lime-500);
}
.btn-success,
.btn-green,
.btn-outline.btn-success:hover,
.btn-outline.btn-green:hover,
.btn-green:hover,
.btn-success:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--green-500);
  --border-color: var(--green-500);
}
.btn-emerald,
.btn-outline.btn-emerald:hover,
.btn-emerald:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--emerald-500);
  --border-color: var(--emerald-500);
}
.btn-teal,
.btn-outline.btn-teal:hover,
.btn-teal:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--teal-500);
  --border-color: var(--teal-500);
}
.btn-cyan,
.btn-outline.btn-cyan:hover,
.btn-cyan:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--cyan-500);
  --border-color: var(--cyan-500);
}
.btn-sky,
.btn-outline.btn-sky:hover,
.btn-sky:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--sky-500);
  --border-color: var(--sky-500);
}
.btn-blue,
.btn-outline.btn-blue:hover,
.btn-blue:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--blue-500);
  --border-color: var(--blue-500);
}
.btn-indigo,
.btn-outline.btn-indigo:hover,
.btn-indigo:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--indigo-500);
  --border-color: var(--indigo-500);
}
.btn-violet,
.btn-outline.btn-violet:hover,
.btn-violet:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--violet-500);
  --border-color: var(--violet-500);
}

.btn-special,
.btn-purple,
.btn-outline.btn-purple:hover,
.btn-outline.btn-special:hover,
.btn-special:hover,
.btn-purple:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--purple-500);
  --border-color: var(--purple-500);
}
.btn-fuchsia,
.btn-outline.btn-fuchsia:hover,
.btn-fuchsia:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--fuchsia-500);
  --border-color:var(--fuchsia-500);
}
.btn-important,
.btn-pink,
.btn-outline.btn-important:hover,
.btn-outline.btn-pink:hover,
.btn-pink:hover,
.btn-important:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--pink-500);
  --border-color: var(--pink-500);
}
.btn-rose,
.btn-outline.btn-rose:hover,
.btn-rose:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--rose-500);
  --border-color: var(--rose-500);
}
.btn-slate,
.btn-outline.btn-slate:hover,
.btn-slate:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--slate-500);
  --border-color: var(--slate-500);
}
.btn-gray,
.btn-outline.btn-gray:hover,
.btn-gray:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--gray-500);
  --border-color: var(--gray-500);
}
.btn-zinc,
.btn-outline.btn-zinc:hover,
.btn-zinc:hover{
  --btn-text-color:var(--white);
  --btn-bg-color:var(--zinc-500);
  --border-color: var(--zinc-500);
}
/*轮播组件*/
/* 轮播图容器 */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.carousel-slide img {
  width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充 */
  display: block;    /* 消除图片底部留白 */
}

/* 轮播内容文本样式 */
.carousel-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: white;
}

/* 指示器和箭头的样式增强 */
.carousel-indicators {
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.carousel-indicator:hover {
  background: white !important;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .carousel {
    height: 300px;
  }

  .carousel-caption h3 {
    font-size: 1.2rem;
  }

  .carousel-caption p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .carousel {
    height: 200px;
  }

  .carousel-caption h3 {
    font-size: 1rem;
  }

  .carousel-caption p {
    font-size: 0.8rem;
  }

  .carousel-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
}

/* 无限滚动图片 */
.scroll-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.scroll-content {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scroll-item {
  width: calc((100% - 48px) / 3.5);
  flex: 0 0 auto;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.scroll-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

.scroll-item h3 {
  margin: 10px 0 5px;
}

.controls {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

/* 选项卡 */

/* ================== 容器与基础 ================== */
.tabs-container {
    --tab-duration: 300ms;
    --tab-gap: 20px; /* 内容间距 */
    --tab-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    width: 100%;
    /* 避免边框导致宽度计算误差 */
    box-sizing: border-box; 
    /* 阻止移动端侧滑手势干扰 */
    touch-action: pan-y;
    contain: layout paint; 
}
/* 强制内部所有元素使用 border-box，防止 padding 撑开宽度导致左移 */
.tabs-container * {
    box-sizing: border-box;
}
/* ================== 导航栏 ================== */
.tabs-nav {
    display: flex;
    overflow-x: auto;
    /* 关键：防止 flex 子项被压缩 */
    flex-wrap: nowrap;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    /* 移动端惯性滚动 */
    -webkit-overflow-scrolling: touch; 
}
.tabs-nav::-webkit-scrollbar {
    display: none;
}

.tabs-item {
    white-space: nowrap;
    transition: all 0.2s;
    user-select: none;
    color: rgb(var(--surface-text));
    outline: none;
    flex-shrink: 0; /* 防止导航项被压缩 */
}

.tabs-item:focus-visible {
    background-color: rgb(var(--bg-surface));
    color: rgb(var(--primary-hue-500));
}

.tabs-item:hover {
    background-color: rgb(var(--surface-bg));
    color: rgb(var(--primary-hue-500));
}

.tabs-item.is-active {
    background-color: rgba(var(--primary-hue-500)/ 1);
    color: #fff;
}

/* ================== 内容区 ================== */
.tabs-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    /* 【修复】移除固定高度和 transition，让内容自然流动 */
    /* height 由 JS 控制或设为 auto */
    overflow: visible; /* 改为 visible，除非是 slide 模式 */
}
/* 面板通用 */
.tabs-panel {
    width: 100%;
    /* 修复：防止面板内第一个元素的 margin-top 顶出容器 */
    margin-top: 0; 
    /* 确保面板是块级 */
    display: flow-root; 
}
.tabs-panel-max-height{
    max-height: 500px;
}
/* 如果你的内容第一行是 h1/p 等有 margin 的元素，这行代码能救命 */
.tabs-panel > *:first-child {
    margin-top: 0;
}
/* ================== 模式：Static (静态切换) ================== */
.tabs-mode-static .tabs-panel {
    display: none;
}
.tabs-mode-static .tabs-panel.is-active {
    display: block;
    animation: tabFadeIn 0.2s ease forwards; /* 即使是静态也给一点点过渡更自然 */
}

/* ================== 模式：Fade (淡入) ================== */
.tabs-mode-fade .tabs-panel {
    display: none;
    opacity: 0;
}
.tabs-mode-fade .tabs-panel.is-active {
    display: block;
    animation: tabFadeIn var(--tab-duration, 300ms) ease forwards;
}

@keyframes tabFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ================== 模式：Slide (滑动) ================== */
.tabs-mode-slide .tabs-track {
    display: flex;
    width: 100%;
    /* 开启硬件加速 */
    transform: translate3d(0, 0, 0); 
    transition: transform var(--tab-duration, 300ms) var(--tab-ease, ease);
    align-items: flex-start;
    /* 【修复】确保 track 不会被压缩 */
    flex-shrink: 0;
}

.tabs-mode-slide .tabs-panel {
    flex-shrink: 0;
    width: 100%;
    min-width: 100%;
    /* 关键修复：防止 Flex 子项在 overflow: auto 时高度坍缩 */
}
/* 只有 slide 模式需要 overflow hidden */
.tabs-mode-slide .tabs-content {
    overflow: hidden;
}



/* 代码块 */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}

code.hljs {
  padding: 3px 5px
}

/* 我们将背景和圆角统一加在 <pre> 上 */
pre {
  border-radius: 0.5rem;
  background-color: rgb(var(--surface-bg));
  /* border: solid 1px rgb(var(--gray-300)); */
  /* 匹配 github-dark */
  /* 添加一些垂直间距 */
}
.code,
code{
  background-color: rgba(var(--primary-hue-500) / 0.1);
  margin: 0 0.2rem;
  padding: 0.1rem 0.2rem;
}
.code,
code,
pre code{
  padding: 5px 8px;
  font-size: 14px;
  font-family: "MonaSans VF";
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 4px;
  color: rgb(var(--primary-hue-500));
}

/* 移除 highlight.js 默认在 <code> 上的样式，我们用 JS 控制 */
.hljs {
  padding: 0 !important;
  background: none !important;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #ff7b72
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #d2a8ff
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: rgb(var(--sky-600))
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: rgb(var(--lime-600))
}

.hljs-tag,
.code-line {
  color: rgb(var(--gray-400))
}

.hljs-built_in,
.hljs-symbol {
  color: #ffa657
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  color: #8b949e
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: rgb(var(--orange-400))
}

.hljs-subst {
  color: rgb(var(--rose-500))
}

.hljs-section {
  color: rgb(var(--blue-500));
  font-weight: 700
}

.hljs-bullet {
  color: #f2cc60
}

.hljs-emphasis {
  color: #c9d1d9;
  font-style: italic
}

.hljs-strong {
  color: #c9d1d9;
  font-weight: 700
}

.hljs-addition {
  color: #aff5b4;
  background-color: #033a16
}

.hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c
}

.code-block {
  padding: 1rem;
  border-radius: 0.375rem;
  overflow: auto;
  margin-bottom: .625rem;
  margin-top: .625rem;
}

.hover-text-green-500:hover {
  color: rgb(var(--green-500))
}

/* 手风琴效果 */

.accordion>div {
  flex-grow: 1;
  transition: all 0.5s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-position: 70% center;
}

.accordion>div:hover {
  flex-grow: 4;
  /* box-shadow: inset 0 0 20px #000; */
}

/* 图片条纹遮罩层动画特效 */

.imghover>div:before {
  content: "";
  background: -webkit-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 10px,
      transparent 10px, transparent 20px, rgba(0, 0, 0, 0.1) 20px, rgba(0, 0, 0, 0.1) 30px,
      transparent 30px, transparent 40px, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.1) 50px,
      transparent 50px, transparent 60px, rgba(0, 0, 0, 0.1) 60px, rgba(0, 0, 0, 0.1) 70px,
      transparent 70px, transparent 80px, rgba(0, 0, 0, 0.1) 80px,
      rgba(0, 0, 0, 0.1) 90px, transparent 90px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: all 0.5s;
}

.imghover>div:hover:before {
  opacity: 1;
}

.imghover>div img {
  transition: all 0.5s ease;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.imghover>div:hover img {
  opacity: 0.5;
  -webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
  clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
}

.imghover>div div {
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(-55deg);
  transition: all 0.5s;
}

.imghover>div:hover div {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

.imghover>div h3 {
  text-transform: uppercase;
  text-shadow: 0 0 5px #000;
}

.imghover>div span {
  text-shadow: 0 0 5px #000;
  text-transform: capitalize;
}

@media only screen and (max-width:990px) {
  .imghover>div {
    margin: 0 0 30px;
  }
}

@media only screen and (max-width:479px) {
  .imghover .box .h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* 视差3D翻转 */
.hover-3d-flip {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* 卡片前后两面 */
/* Cards */
.card {
    background-color: transparent; /* 背景交给 decoration */
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: visible; /* 允许子元素溢出 */
    isolation: isolate;
    transition: transform 0.2s;
}

pre:before,
textarea:before {
  background-color: rgba(var(--primary-hue-500) / 0.6);
  border-radius: 50%;
  content: "";
  filter: blur(60px);
  opacity: 0.15;
  position: absolute;
  top: -8em;
  right: -10em;
  width: 25em;
  height: 25em;
  z-index: 0;
  transition: background-color 0.3;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.card-front,
.card-back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  background: rgb(var(--surface-bg));
  ;
  background: -webkit-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
  background: -o-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
  background: linear-gradient(45deg, #cedce7 0%, #596a72 100%);
}

/* 卡片正面遮罩 */
.card-front::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

/* 背景装饰器 */
.card-decoration {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: -1;
    background-color: rgb(var(--surface-bg));
    pointer-events: none;
}
/* 晨光 */
.deco-morninglight:before {
  background-color: rgba(var(--primary-hue-500) / 0.6);
  content: "";
  filter: blur(60px);
  opacity: 0.15;
  top: -8em;
  right: -10em;
  width: 25em;
  height: 25em;
  z-index: 0;
  transition: background-color 0.3;
  position: absolute;
}
/* 极光 */
.deco-aurora:before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(var(--primary-hue-500) / 0.2) 0%, transparent 70%);
    transform: scale(2);
    filter: blur(40px);
}
.deco-aurora:after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(var(--secondary-hue-500) / 0.15) 0%, transparent 70%);
    filter: blur(50px);
}
/* --- 科技网格 (Tech Grid) --- */
/* 淡雅的方格背景，适合数据展示 */
.deco-grid {
    background-image: 
        linear-gradient(rgba(var(--primary-hue-500) / 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-hue-500) / 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}
/* 添加一个顶部渐变遮罩，让网格只在上方显示 */
.deco-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgb(var(--surface-bg)) 80%);
}
 /* --- 动态呼吸球 (Breathing Orb) --- */
/* 一个会缓慢缩放的圆球 */
@keyframes breath {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.2); opacity: 0.2; }
}
.deco-orb::before {
    content: "";
    position: absolute;
    right: -5%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgb(var(--secondary-hue-500)) 10%, transparent 90%);
    filter: blur(30px);
    animation: breath 8s infinite ease-in-out;
}
 /* --- 玻璃质感条纹 (Glass Stripes) --- */
/* 现代磨砂感条纹 */
.deco-stripes {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(var(--primary-hue-500) / 0.1) 10px,
        rgba(var(--primary-hue-500) / 0.1) 20px
    );
}
.deco-stripes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgb(var(--primary-hue-500)), rgb(var(--secondary-hue-500)));
}
/* --- 赛博微光 (Cyber Glow) --- */
/* 底部发光，适合深色模式或强调卡片 */
.deco-cyber {
    background: rgb(var(--surface-bg));
}
.deco-cyber::before {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    background: rgb(var(--accent-hue));
    filter: blur(40px);
    opacity: 0.2;
    border-radius: 50%;
}
.deco-cyber::after {
    /* 顶部细微高光 */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-hue) / 0.5), transparent);
}
/* 落日余晖 (Sunset) */
.deco-sunset::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(var(--secondary-hue-500) / 0.1), transparent);
    filter: blur(20px);
}
/* 顶部聚光灯 (Spotlight) */
.deco-spotlight::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(var(--primary-hue-500) / 0.25), transparent 70%);
    filter: blur(25px);
}
/* 迷雾 (Fog) */
.deco-fog::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom left, rgba(var(--secondary-hue-500) / 0.1), transparent 60%),
                radial-gradient(circle at top right, rgba(var(--primary-hue-500) / 0.1), transparent 60%);
    filter: blur(30px);
}
/* 棱镜 (Prism) - 彩虹色光晕 */
.deco-prism {
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.05), 
        rgba(255, 165, 0, 0.05), 
        rgba(0, 128, 0, 0.05), 
        rgba(0, 0, 255, 0.05));
}
/* 蚀 (Eclipse) - 暗色模式下的反向发光 */
.deco-eclipse::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: rgb(var(--surface-bg)); /* 同背景色 */
    border-radius: 50%;
    box-shadow: -10px 10px 60px rgba(var(--primary-hue-500) / 0.3);
}
/* 扫描线 (Scanline) - 动态 */
@keyframes scan-move {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(500%); opacity: 0; }
}
.deco-scanline {
    overflow: hidden; /* 必须裁切 */
}
.deco-scanline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px; /* 扫描条高度 */
    background: linear-gradient(to bottom, transparent, rgba(var(--primary-hue-500) / 0.1), transparent);
    animation: scan-move 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 矩阵雨 (Digital Rain) - 静态模拟 */
.deco-matrix {
    background-image: linear-gradient(0deg, transparent 24%, rgba(var(--primary-hue-500)/ .05) 25%, rgba(var(--primary-hue-500)/ .05) 26%, transparent 27%, transparent 74%, rgba(var(--primary-hue-500)/ .05) 75%, rgba(var(--primary-hue-500)/ .05) 76%, transparent 77%), 
                      linear-gradient(90deg, transparent 24%, rgba(var(--primary-hue-500)/ .05) 25%, rgba(var(--primary-hue-500)/ .05) 26%, transparent 27%, transparent 74%, rgba(var(--primary-hue-500)/ .05) 75%, rgba(var(--primary-hue-500)/ .05) 76%, transparent 77%);
    background-size: 30px 30px;
}
/* 故障风 (Glitch Static) */
.deco-glitch::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        rgba(var(--accent-hue) / 0.1) 3px,
        transparent 4px
    );
    z-index: 0;
}
/* 荧光边框 (Neon Inset) */
.deco-neon-inset::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 15px rgba(var(--primary-hue-500) / 0.1);
}
/* 波点 (Polka Dots) */
.deco-polka {
    background-image: radial-gradient(rgba(var(--primary-hue-500) / 0.2) 1.2px, transparent 1.2px);
    background-size: 16px 16px;
}
/* 噪点渐变 (Noise Gradient) - 纯CSS模拟 */
.deco-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(var(--primary-hue-500)/0.1) 20%, transparent 20%);
    background-size: 4px 4px;
    opacity: 0.7;
}
/* 底部波浪 (Wave) */
.deco-wave::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: radial-gradient(circle at 50% 0, transparent 10px, rgba(var(--primary-hue-500)/0.05) 11px);
    background-size: 40px 40px;
    background-repeat: repeat-x;
}
/* 树叶阴影 (Leaf Shadow) */
.deco-leaf-shadow {
    background: linear-gradient(115deg, transparent 75%, rgba(0,0,0,0.03) 75%),
                linear-gradient(115deg, transparent 65%, rgba(0,0,0,0.02) 65%);
}
/* 环形山 (Crater) */
.deco-crater::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, transparent 30%, rgba(var(--primary-hue-500)/0.03) 31%, transparent 50%, rgba(var(--primary-hue-500)/0.03) 51%);
}

/* 悬停动画 */
.hover-3d-flip:hover .card-front,
.hover-3d-flip:hover .card-back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* 卡片内容 */
.card-content {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
}

/* 初始状态 */
.hover-3d-flip .card-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.hover-3d-flip .card-front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* 悬停状态 */
.hover-3d-flip:hover .card-back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.hover-3d-flip:hover .card-front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* 卡片标题样式 */


.hover-3d-flip p::after {
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -2rem;
}

.hover-3d-flip span {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

/* 响应式 */
@media screen and (max-width: 64rem) {
  .card-item {
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem) {
  .card-item {
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem) {
  .card-item {
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

/*分页条*/
.pages span,
.pages-1 span {
  display: contents;
}

.pages .page-status,
.pages-1 .page-status {
  display: block !important;
}

.pages span a,
.pages .page-status {
  padding: 5px 10px;
  background-color: rgb(var(--surface-bg));
  border: 1px solid rgb(var(--surface-border));
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 6px;
}

.pages .page-num-current,
.pages span a:hover,
.pages span a.active {
  background-color: rgb(var(--primary-hue-500)) !important;
  color: rgb(var(--white));
}

.pages-1 span a {
  --text-opacity: 1;
  --border-opacity: 1;
  color: rgba(var(--surface-text) / var(--text-opacity));
  padding: 0.5rem 1rem;
  border: 1px solid rgba(var(--surface-border) / var(--border-opacity));
}

.pages-1 span a:not(:first-child) {
  border-right: 0;
}

.pages-1 span a i {
  vertical-align: middle;
}

.pages-1 .page-prev a,
.pages-1 .page-next a {
  padding: 0.5rem;
}

.pages-1 .page-prev a {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-right: 0;
}

.pages-1 .page-next a {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.pages-1 span .page-num-current:not(:first-child)+a {
  border-left: 1px solid rgb(var(--primary-hue-500));
}

.pages-1 span .page-num-current {
  background-color: rgba(var(--primary-hue-500) / 0.15) !important;
  color: rgb(var(--primary-hue-500)) !important;
  border-color: solid 1px rgb(var(--primary-hue-500)) !important;
}

.pages-1 span a:hover {
  color: rgb(var(--primary-hue-500));
}

/* 抽屉组件的补充样式 (终极优化版) */

/* 1. 基础面板样式 */
.drawer-panel {
    position: fixed;
    z-index: 9999; /* 确保层级够高 */
    background-color: white;
    transition-property: transform, opacity, visibility;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    will-change: transform;
    /* 默认隐藏 */
    visibility: hidden; 
}
/* 2. 显示状态 (配合 JS 的 aria-hidden 切换) */
.drawer-panel[aria-hidden="false"] {
    visibility: visible;
}
/* 3. 方向定义 (配合 data-position) */
/* Right */
.drawer-panel[data-position="right"] {
    top: 0; right: 0; bottom: 0;
    width: 20rem; /* 默认宽度，可被 tailwind 类覆盖 */
    transform: translateX(100%);
}
.drawer-panel[data-position="right"][aria-hidden="false"] {
    transform: translateX(0);
}
/* Left */
.drawer-panel[data-position="left"] {
    top: 0; left: 0; bottom: 0;
    width: 20rem;
    transform: translateX(-100%);
}
.drawer-panel[data-position="left"][aria-hidden="false"] {
    transform: translateX(0);
}
/* Top */
.drawer-panel[data-position="top"] {
    top: 0; left: 0; right: 0;
    height: 16rem;
    transform: translateY(-100%);
}
.drawer-panel[data-position="top"][aria-hidden="false"] {
    transform: translateY(0);
}
/* Bottom */
.drawer-panel[data-position="bottom"] {
    bottom: 0; left: 0; right: 0;
    height: 20rem;
    transform: translateY(100%);
}
.drawer-panel[data-position="bottom"][aria-hidden="false"] {
    transform: translateY(0);
}
/* 4. 遮罩层样式 */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998; /* 比 drawer-panel 低一层 */
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}
.drawer-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}
/* 5. 锁定 Body 滚动 */
body.drawer-open {
    overflow: hidden !important;
}


/* --- 手风琴容器 --- */
.accordion {
  /* 动画时长将由 JS 动态设置 */
  --accordion-duration: 300ms;
}

/* --- 手风琴头部/触发器 --- */
.accordion-header {
  transition-property: background-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  color: rgb(var(--gray-500));
}

.accordion-header:hover {
  background-color: #f3f4f6;
  color: rgb(var(--black));
}

.accordion-header:focus {
  /* outline: 2px solid #3b82f6; */
  /* outline-offset: -2px; */
  outline: none;
}

/* --- 头部右侧的 +/- 图标 --- */
.accordion-header::after {
  content: '+';
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: #6b7280;
  transition: transform var(--accordion-duration) ease-in-out;
}

.accordion-item.is-open .accordion-header::after {
  transform: rotate(45deg);
}

/* --- 手风琴内容面板 --- */
.accordion-content {
  max-height: 0;
  transition: max-height var(--accordion-duration) ease-in-out;
}

/* --- 辅助状态类 (可选，用于更精细的控制) --- */
/* 当一个项被完全展开后，可能会有内容动态变化（例如 Ajax 加载） */
/* 这个类可以确保内容不会被固定的 max-height 截断 */
.accordion-item.is-fully-opened>.accordion-content {
  max-height: none;
}


/* 弹出层 */
.modal-transitioning {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 
 * 模态框内容（弹窗主体）的缩放动画。
 * JS会控制这个类的添加/移除，实现弹出/缩回的效果。
 */
.modal-content-transitioning {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
 * 辅助类：用于在动画期间锁定模态框的高度，防止内容变化导致页面跳动。
 * JS会动态计算并设置高度。
*/
.modal-container-locked-height {
  height: var(--modal-height);
  overflow: hidden;
}

/* 
 * 聚焦环（Focus Ring）
 * 当模态框内的元素获得焦点时，提供一个统一的、可见的轮廓。
 * 提升可访问性。
*/
.modal-inner-content :focus {
  outline: 2px solid rgb(var(--blue-500));
  /* 使用你的主题色 */
  outline-offset: 2px;
}

/* 移除某些浏览器下按钮的默认焦点样式 */
.modal-inner-content button:focus {
  outline: none;
}

/* 为我们的关闭按钮提供焦点样式 */
.modal-inner-content .modal-close-button:focus {
  box-shadow: 0 0 0 2px rgb(var(--blue-500));
}

/* 确保模态框内的所有交互元素在鼠标悬停时有指针样式 */
.modal-inner-content button,
.modal-inner-content a,
.modal-inner-content input,
.modal-inner-content select,
.modal-inner-content textarea {
  cursor: pointer;
}

/* 输入框 */
.form-control {
  border-radius: 0.25rem;
  display: block;
  height: 2rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgba(255 255 255, 1);
  outline-color: transparent;
  outline-style: solid;
  outline-width: 1px;
  padding: .25rem .5rem;
  transition-duration: .15s;
  transition-property: outline, box-shadow;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* 单选与复选 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  /* 为伪元素提供定位上下文 */
  width: 20px;
  /* 建议设定一个固定尺寸 */
  height: 20px;
  border: 1px solid #cbd5e1;
  /* 未选中时的边框色，请按需修改 */
  border-radius: 0.25rem;
  /* 圆角 */
  background-color: transparent;
  /* 未选中时背景透明 */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* 关键：为所有变化添加平滑过渡 */
}

[type="radio"] {
  border-radius: 50%;
}

[type="checkbox"]:checked,
[type="radio"]:checked {
  background-color: rgb(var(--primary-hue-500));
  border-color: rgb(var(--primary-hue-500));
}

/* 添加这段代码来创建白色的勾 */
[type="checkbox"]:checked,
[type="radio"]:checked {
  /* 先重置浏览器默认的勾，非常重要！ */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 确保我们的伪元素有定位参考 */
  position: relative;
}

/* 使用伪元素 ::after 绘制勾 */
[type="checkbox"]:checked::after,
[type="radio"]:checked::after {
  content: '';
  /* 必须有 content 伪元素才会显示 */
  position: absolute;
  /* 绝对定位，相对于 checkbox */
  /* --- 核心：绘制一个 L 形，然后旋转它变成勾 --- */
  left: 6px;
  /* 根据你的 checkbox 大小调整 */
  top: 4px;
  /* 根据你的 checkbox 大小调整 */
  width: 5px;
  /* 勾的短边长度 */
  height: 8px;
  /* 勾的长边长度 */
  display: block;
  /* 确保它是一个块级元素 */
  border: solid white;
  /* 关键：设置边框为白色 */
  border-width: 0 2px 2px 0;
  /* 只保留下边框和右边框，形成一个 L */
  transform: rotate(45deg) scale(0);
  /* 初始状态：旋转了但缩放为0，看不见 */
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 1. 悬停效果 (Hover) */
[type="checkbox"]:hover,
[type="radio"]:hover {
  border-color: rgb(var(--primary-hue-400));
  /* 悬停时边框颜色变浅，提示可点击 */
  transform: scale(1.1);
  /* 轻微放大 */
  box-shadow: 0 0 0 3px rgba(var(--primary-hue-500), 0.1);
  /* 外围扩散光晕效果 */
}

/* 2. 焦点效果 (Focus - 键盘访问) */
[type="checkbox"]:focus,
[type="radio"]:focus {
  outline: none;
  /* 移除默认的outline */
  box-shadow: 0 0 0 1px rgb(var(--primary-hue-500));
  /* 清晰的焦点环 */
}

/* 焦点 + 悬停 */
[type="checkbox"]:focus:hover,
[type="radio"]:focus:hover {
  box-shadow: 0 0 0 1px rgb(var(--primary-hue-500)), 0 0 0 8px rgba(var(--primary-hue-500), 0.1);
  /* 同时显示焦点环和悬停光晕 */
}

/* 3. 勾选/取消勾选动画 */
/* 当被勾选时 */
[type="checkbox"]:checked,
[type="radio"]:checked {
  animation: checkboxPop 0.3s ease-out;
  /* 主体弹跳动画 */
}

/* 当被勾选时，让勾号出现 */
[type="checkbox"]:checked::after,
[type="radio"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
  /* 最终状态：显示并正常大小 */
}

/* 当从勾选变为未勾选时 */
[type="checkbox"]:not(:checked)::after,
[type="radio"]:not(:checked)::after {
  opacity: 0;
  transform: rotate(45deg) scale(0);
  /* 瞬间隐藏 */
  transition: all 0.1s ease-in;
  /* 消失可以快一点 */
}

/* 4. 自定义动画定义 */
/* checkbox 主体弹跳效果 */
@keyframes checkboxPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
    /* 弹到最大 */
  }

  100% {
    transform: scale(1);
    /* 回到原始大小 */
  }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  /* background: transparent; */
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgb(var(--surface-border));
  height: 1px;
  border-radius: 0;
}

input[type="range"]::-webkit-slider-track {
  background: rgb(var(--surface-bg));
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: rgb(var(--primary-hue-500));
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-bottom: -0.6rem;
}

/* 单选组件 */
.form-check {
  /* 垂直对齐 */
  display: flex;
  align-items: center;
}

.form-check label {
  margin-left: 0.5rem;
}

/* 下拉选项 */
.custom-select-wrapper,
.custom-multi-select-component,
.custom-select-component {
  position: relative;
  /* 为内部的自定义箭头提供定位上下文 */
  display: inline-block;
  /* 或者 block，取决于你的布局 */
  font-family: inherit;
}

.custom-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 100% 填充父容器 */
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  /* 右边留出足够空间给箭头 */
  color: rgb(var(--surface-text));
  font-size: 1rem;
  /* 字体大小 */
  font-family: inherit;
  /* 继承父级字体 */
  /* 边框和背景 */
  border-radius: 0.375rem;
  /* 与 checkbox/radio 保持一致 */
  background-color: transparent;
  cursor: pointer;
  outline: none;
  /* 我们用 JS 来控制焦点样式 */
  /* 为状态变化添加平滑过渡 */
  transition: all 0.2s ease-in-out;
}

/* 自定义下拉箭头 */
.custom-select-wrapper::after,
.multi-select-trigger .select-arrow,
.select-trigger .select-arrow {
  content: '▾';
  /* 使用一个字符作为箭头，也可以用 SVG */
  position: absolute;
  top: 50%;
  right: 0.5rem;
  /* 距离右边的距离 */
  transform: translateY(-50%);
  /* 垂直居中 */
  pointer-events: none;
  /* 防止箭头阻挡点击事件 */
}

.select-trigger .select-arrow,
.custom-select-wrapper::after,
.multi-select-trigger .select-arrow {
  color: #64748b;
  font-size: 1.2rem;
  /* 箭头大小还是在这里控制 */
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.custom-select-wrapper select option {
  background-color: rgb(var(--surface-bg));
  color: rgb(var(--surface-text));
}

/* --------------------------------------------------- */
/* --- 微动效果 --- */
/* --------------------------------------------------- */
/* 1. 悬停效果 */
.custom-select-wrapper:hover select,
.custom-select-component:hover .select-trigger {
  border-color: rgb(var(--primary-hue-300));
  /* box-shadow: 0 0 0 1px rgba(var(--primary-hue-500), 0.1); */
}

.custom-select-wrapper select option:hover {
  background-color: rgb(var(--primary-hue-500));
  color: rgb(var(--surface-bg));
}

.custom-select-wrapper:hover::after {
  color: rgb(var(--primary-hue-500));
  /* 悬停时箭头变色 */
}

/* 2. 焦点效果 (通过 JS 添加类来控制) */
.custom-select-wrapper.is-focused select {
  border-color: rgb(var(--primary-hue-500));
  /* box-shadow: 0 0 0 1px rgb(var(--primary-hue-500)); */
  color: rgb(var(--primary-hue-500));
}

/* 3. 打开状态效果 */
/* 当 select 被激活时（下拉列表打开）*/
.custom-select-wrapper:has(select:focus) select,
.select-trigger:has(.select-arrow:focus) {
  /* :has() 是现代选择器，如果需要兼容旧浏览器，请依赖 JS */
  border-color: rgb(var(--primary-hue-500));
  color: rgb(var(--primary-hue-500));
}

.custom-select-wrapper:has(select:focus)::after,
.custom-select-wrapper.is-focused::after {
  transform: translateY(-50%) rotate(180deg);
  /* 箭头旋转 */
  color: rgb(var(--primary-hue-500));
}

/* 多选下拉 */
/* --- 触发器（看起来像 select 的部分） --- */
.multi-select-trigger,
.select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1rem;
  background-color: transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.select-trigger,
.multi-select-trigger {
  border: 1px solid rgb(var(--surface-border));
}

.multi-select-trigger {
  flex-wrap: wrap;
  /* 允许标签换行 */
  gap: 0.5rem;
  /* 标签和占位符之间的间距 */
  min-height: 2.75rem;
  /* 设置一个最小高度，即使没有内容也不会太扁 */
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  /* 右边留出箭头空间 */
}

.select-trigger {
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

/* --- 已选中的标签列表 --- */
.selected-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selected-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: rgb(var(--primary-hue-500));
  color: white;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  animation: tagFadeIn 0.2s ease-out;
}

@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

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

.tag-remove-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.tag-remove-button:hover {
  opacity: 1;
}

/* --- 下拉选项列表 --- */
.multi-select-options,
.select-options {
  position: relative;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background-color: rgb(var(--surface-bg));
  border: 1px solid rgb(var(--surface-border));
  border-radius: 0.5rem;
  box-shadow: 0 10px 55px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 1000;

  /* 默认隐藏 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.custom-multi-select-component.is-active .multi-select-options,
.custom-select-component.is-active .select-options {
  max-height: 250px;
  opacity: 1;
  overflow-y: auto;
}

/* --- 单个选项 --- */
.multi-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.multi-select-option,
.select-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: inherit;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* 已选中项的视觉提示 */
.multi-select-option.is-selected,
.select-option.is-selected,
.multi-select-option:hover,
.select-option:hover {
  font-weight: 500;
  background-color: rgb(var(--primary-hue-500));
  color: white;
  border-radius: 0.5rem;
}

.multi-select-option.is-selected::after {
  content: '✓';
  /* 选中标记 */
  color: rgb(var(--primary-hue-500));
  font-weight: bold;
}

/* 键盘焦点样式 */
.multi-select-option.is-highlighted,
.select-option.is-highlighted {
  background-color: rgb(var(--primary-hue-500));
  color: white;
}

/* --- 组件的交互状态 --- */
.multi-select-trigger:hover,
.custom-multi-select-component.is-active .multi-select-trigger {
  border-color: rgb(var(--primary-hue-300));
}

.custom-multi-select-component.is-focused .multi-select-trigger,
.custom-select-component.is-focused .select-trigger {
  border-color: rgb(var(--primary-hue-500));
  /* box-shadow: 0 0 0 1px rgb(var(--primary-hue-500)); */
  border-radius: 0.375rem;
}

.custom-multi-select-component.is-active .select-arrow,
.custom-select-component.is-focused .select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.custom-multi-select-component.is-active .select-arrow,
.custom-select-component.is-focused .select-trigger {
  color: rgb(var(--primary-hue-500));
}

/* --- TagInput 组件专用样式 --- */
.tag-input-component {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid rgb(var(--surface-border));
  border-radius: 8px;
  background-color: rgb(var(--surface-bg));
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tag-input-component:focus-within {
  border-color: rgb(var(--primary-hue-500));
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  background-color: rgb(var(--primary-hue-100));
  color: rgb(var(--primary-hue-500));
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  animation: fadeIn 0.2s ease-out;
}

.tag-text {
  margin-right: 6px;
}

.tag-remove {
  background: none;
  border: none;
  color: rgb(var(--primary-hue-500));
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.tag-remove:hover {
  background-color: rgb(var(--primary-hue-200));
}

.tag-input-field {
  flex-grow: 1;
  min-width: 100px;
  border: none;
  outline: none;
  padding: 4px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: transparent;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

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

.debug-output {
  margin-top: 1rem;
  padding: 1rem;
  background: rgb(var(--surface-bg));
  border-radius: 0.5rem;
  font-family: monospace;
  white-space: pre-wrap;
}

/* --- AutoComplete 组件专用样式 --- */
.autocomplete-component {
  position: relative;
  width: 100%;
}

.autocomplete-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgb(var(--surface-border));
  /* gray-300 */
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding-right: 2.5rem;
}

.autocomplete-component.is-focused .autocomplete-input {
  border-color: rgb(var(--primary-hue-500));
  /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  /* focus:ring */
  outline: none;
}

.autocomplete-input:focus {
  border-color: rgb(var(--primary-hue-500));
  /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  /* focus:ring */
  outline: none;
  color: rgb(var(--primary-hue-500));
}

.autocomplete-suggestions {
  position: relative;
  z-index: 50;
  top: 100%;
  /* 定位在输入框正下方 */
  left: 0;
  right: 0;
  max-height: 240px;
  margin-top: 4px;
  overflow-y: auto;
  background-color: rgb(var(--surface-bg));
  border: 1px solid rgb(var(--surface-border));
  /* gray-200 */
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.autocomplete-component.is-active .autocomplete-suggestions {
  display: block;
}

.suggestion-item {
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.1s;
}

.suggestion-item.is-highlighted,
.suggestion-item:hover {
  background-color: rgb(var(--surface-bg-100));
  color: rgb(var(--primary-hue-500));
  /* gray-100 */
}

/* ============================================= */
/* --- FileUploader 组件专用样式 --- */
/* ============================================= */
.file-uploader-component {
  width: 100%;
  max-width: 500px;
  font-family: inherit;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border: 2px dashed rgb(var(--gray-300));
  border-radius: 8px;
  background-color: rgb(var(--surface-bg));
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.upload-trigger-btn {
  background: none;
  border: none;
  color: rgb(var(--primary-hue-500));
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.upload-area.is-dragover {
  border-color: rgb(var(--primary-hue-500));
  background-color: rgb(var(--primary-hue-50));
}

.upload-area.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.file-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgb(var(--gray-200));
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background-color: rgb(var(--white));
}

.file-item-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 1rem;
  background-color: rgb(var(--gray-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: rgb(var(--gray-500));
}

.file-item-details {
  flex-grow: 1;
  min-width: 0;
  /* 允许文本截断 */
}

.file-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-size {
  font-size: 0.75rem;
  color: rgb(var(--gray-500));
}

.file-item-status {
  margin-left: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  width: 60px;
  text-align: right;
}

.file-item-status.status-pending {
  color: rgb(var(--gray-500));
}

.file-item-status.status-uploading {
  color: rgb(var(--blue-500));
}

.file-item-status.status-success {
  color: rgb(var(--green-500));
}

.file-item-status.status-error {
  color: rgb(var(--red-500));
}

.file-item-remove {
  margin-left: 1rem;
  background: none;
  border: none;
  color: rgb(var(--red-500));
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  transition: transform 0.2s ease;
}

.file-item-remove:hover {
  transform: scale(1.2);
}

/* 进度条 */
.upload-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: rgb(var(--primary-hue-500));
  border-radius: 0 0 6px 6px;
  transition: width 0.3s ease;
  width: 0;
}

/* 日期与时间组件 */
/* 1. 基础容器样式 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="year"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 16px;
    color: #333;
    outline: none; /* 移除点击高亮边框 */
    background-color: #fff;
    box-sizing: border-box;
}
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="year"]:focus {
    border-color: rgb(var(--primary-hue-500));
    box-shadow: 0 0 0 1px rgb(var(--primary-hue-100));
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: rgb(var(--primary-hue-500));
}
/* 2. 隐藏/替换默认的小三角图标 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="year"]::-webkit-calendar-picker-indicator {
  /* 替换为自定义图片 */
    /* background: url('your-custom-icon.png') no-repeat center;  */
    background-size: contain;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: rgb(var(--primary-hue-500));
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); /* 添加轻微阴影提升立体感 */
}
/* 3. 修改内部文本区域（年月日）的样式 */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="week"]::-webkit-datetime-edit-fields-wrapper,
input[type="year"]::-webkit-datetime-edit-fields-wrapper {
    background-color: rgb(var(--surface-bg)); /* 修改输入区域背景 */
    border-radius: 4px;
}
/* 4. 修改具体的年、月、日字段颜色 */
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field {
    color: rgb(var(--surface-text-400)); /* 年份红色 */
}

/* 5. 修改分隔符（斜杠）的颜色 */
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-text,
input[type="week"]::-webkit-datetime-edit-text,
input[type="year"]::-webkit-datetime-edit-text {
    color: rgb(var(--surface-text-500)); /* 斜杠颜色 */
}

/* --- 评分器 (Rater) --- */
.rater-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* 星星之间的间距 */
    font-size: 1.5rem; /* 默认大小 */
    color: rgb(var(--neutral-300)); /* 背景星星的颜色 */
    cursor: pointer;
}
.rater-star-wrapper {
    position: relative;
    width: 1em; /* 宽度与字体大小相关 */
    height: 1em; /* 高度与字体大小相关 */
    transition: transform 0.2s ease-in-out;
}
.rater-stars:hover .rater-star-wrapper {
    transform: scale(1.1);
}
.rater-star {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.rater-star-fg {
    color: rgb(var(--warning-400)); /* 前景星星的颜色 (已评分) */
    transition: clip-path 0.2s ease-out;
}
/* 只读状态样式 */
.rater[data-readonly="true"] .rater-stars {
    cursor: default;
}
.rater[data-readonly="true"] .rater-stars:hover .rater-star-wrapper {
    transform: scale(1);
}
/* 不同尺寸变体 */
.rater[data-size="sm"] .rater-stars {
    font-size: 1rem;
    gap: 2px;
}
.rater[data-size="lg"] .rater-stars {
    font-size: 2.5rem;
    gap: 6px;
}
.panel-anim-enter {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
}

.panel-anim-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.panel-anim-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.panel-anim-exit-active {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19), transform 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.slide-down {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

.slide-down-open {
  max-height: 500px;
}

.btn-scale-active {
  transform: scale(0.95);
}

/**
 * 拓展背景色
 */
 /* 金盏花 */
 .bg-placergold-50{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-50) / var(--bg-opacity));
 }
 .bg-placergold-100{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-100) / var(--bg-opacity));
 }
 .bg-placergold-200{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-200) / var(--bg-opacity));
 }
 .bg-placergold-300{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-300) / var(--bg-opacity));
 }
 .bg-placergold-400{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-400) / var(--bg-opacity));
 }

.placergold,
.bg-placergold,
.bg-placergold-500,
.hover-bg-placergold:hover,
.hover-bg-placergold-500:hover,
.btn-placergold{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-500) / var(--bg-opacity));
}
.bg-placergold-600{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-600) / var(--bg-opacity));
 }
.bg-placergold-700{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-700) / var(--bg-opacity));
 }
.bg-placergold-800{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-800) / var(--bg-opacity));
 }
.bg-placergold-900{
  --bg-opacity: 1;
  background-color: rgba(var(--placergold-900) / var(--bg-opacity));
 }
/* 珊瑚橙 */
.bg-coralorange-50{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-50) / var(--bg-opacity));
 }
 .bg-coralorange-100{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-100) / var(--bg-opacity));
 }
 .bg-coralorange-200{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-200) / var(--bg-opacity));
 }
 .bg-coralorange-300{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-300) / var(--bg-opacity));
 }
 .bg-coralorange-400{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-400) / var(--bg-opacity));
 }
.coralorange,
.bg-coralorange,
.bg-coralorange-500,
.hover-bg-coralorange-500:hover
.hover-bg-coralorange:hover
.btn-coralorange{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-500) / var(--bg-opacity));
}
.bg-coralorange-600{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-600) / var(--bg-opacity));
 }
.bg-coralorange-700{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-700) / var(--bg-opacity));
 }
.bg-coralorange-800{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-800) / var(--bg-opacity));
 }
.bg-coralorange-900{
  --bg-opacity: 1;
  background-color: rgba(var(--coralorange-900) / var(--bg-opacity));
 }
 /* 樱桃粉 */
.bg-cherrypink-50{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-50) / var(--bg-opacity));
 }
.bg-cherrypink-100{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-100) / var(--bg-opacity));
 }
 .bg-cherrypink-200{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-200) / var(--bg-opacity));
 }
 .bg-cherrypink-300{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-300) / var(--bg-opacity));
 }
 .bg-cherrypink-400{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-400) / var(--bg-opacity));
 }
 .cherrypink,
 .bg-cherrypink-500,
 .bg-cherrypink,
 .hover-bg-cherrypink-500:hover,
 .hover-bg-cherrypink:hover,
 .btn-cherrypink{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-500) / var(--bg-opacity));
 }
 .bg-cherrypink-600{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-600) / var(--bg-opacity));
 }
.bg-cherrypink-700{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-700) / var(--bg-opacity));
 }
.bg-cherrypink-800{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-800) / var(--bg-opacity));
 }
.bg-cherrypink-900{
  --bg-opacity: 1;
  background-color: rgba(var(--cherrypink-900) / var(--bg-opacity));
 }
/* 金菊黄 */
.bg-goldenmarigold-50{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-50) / var(--bg-opacity));
}
.bg-goldenmarigold-100{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-100) / var(--bg-opacity));
}
.bg-goldenmarigold-200{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-200) / var(--bg-opacity));
}
.bg-goldenmarigold-300{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-300) / var(--bg-opacity));
}
.bg-goldenmarigold-400{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-400) / var(--bg-opacity));
}
.goldenmarigold,
.bg-goldenmarigold,
.bg-goldenmarigold-500,
.hover-bg-goldenmarigold:hover,
.hover-bg-goldenmarigold-500:hover,
.btn-goldenmarigold{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-500) / var(--bg-opacity));
}
.bg-goldenmarigold-600{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-600) / var(--bg-opacity));
 }
.bg-goldenmarigold-700{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-700) / var(--bg-opacity));
 }
.bg-goldenmarigold-800{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-800) / var(--bg-opacity));
 }
.bg-goldenmarigold-900{
  --bg-opacity: 1;
  background-color: rgba(var(--goldenmarigold-900) / var(--bg-opacity));
 }

/* 番茄红 */
.bg-tomatored-50{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-50) / var(--bg-opacity));
}
.bg-tomatored-100{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-100) / var(--bg-opacity));
}
.bg-tomatored-200{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-200) / var(--bg-opacity));
}
.bg-tomatored-300{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-300) / var(--bg-opacity));
}
.bg-tomatored-400{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-400) / var(--bg-opacity));
}
.tomatored,
.bg-tomatored,
.bg-tomatored-500,
.hover-bg-tomatored-500:hover,
.btn-tomatored,
.hover-bg-tomatored:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-500) / var(--bg-opacity));
}
.bg-tomatored-600{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-600) / var(--bg-opacity));
}
.bg-tomatored-700{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-700) / var(--bg-opacity));
}
.bg-tomatored-800{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-800) / var(--bg-opacity));
}
.bg-tomatored-900{
  --bg-opacity: 1;
  background-color: rgba(var(--tomatored-900) / var(--bg-opacity));
}
/* 西瓜红 */
.bg-watermelonred-50{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-50) / var(--bg-opacity));
}
.bg-watermelonred-100{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-100) / var(--bg-opacity));
}
.bg-watermelonred-200{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-200) / var(--bg-opacity));
}
.bg-watermelonred-300{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-300) / var(--bg-opacity));
}
.bg-watermelonred-400{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-400) / var(--bg-opacity));
}
.watermelonred,
.bg-watermelonred,
.bg-watermelonred-500,
.hover-bg-watermelonred-500:hover,
.btn-watermelonred,
.hover-bg-watermelonred:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-500) / var(--bg-opacity));
}
.bg-watermelonred-600{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-600) / var(--bg-opacity));
}
.bg-watermelonred-700{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-700) / var(--bg-opacity));
}
.bg-watermelonred-800{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-800) / var(--bg-opacity));
}
.bg-watermelonred-900{
  --bg-opacity: 1;
  background-color: rgba(var(--watermelonred-900) / var(--bg-opacity));
}
/* 薄荷青 */
.bg-mintgreen-50{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-50) / var(--bg-opacity));
}
.bg-mintgreen-100{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-100) / var(--bg-opacity));
}
.bg-mintgreen-200{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-200) / var(--bg-opacity));
}
.bg-mintgreen-300{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-300) / var(--bg-opacity));
}
.bg-mintgreen-400{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-400) / var(--bg-opacity));
}
.mintgreen,
.bg-mintgreen,
.bg-mintgreen-500,
.btn-mintgreen,
.hover-bg-mintgreen:hover,
.hover-bg-mintgreen-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-500) / var(--bg-opacity));
}
.bg-mintgreen-600{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-600) / var(--bg-opacity));
}
.bg-mintgreen-700{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-700) / var(--bg-opacity));
}
.bg-mintgreen-800{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-800) / var(--bg-opacity));
}
.bg-mintgreen-900{
  --bg-opacity: 1;
  background-color: rgba(var(--mintgreen-900) / var(--bg-opacity));
}
/* 天霁蓝 */
.bg-skyazure-50{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-50) / var(--bg-opacity));
}
.bg-skyazure-100{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-100) / var(--bg-opacity));
}
.bg-skyazure-200{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-200) / var(--bg-opacity));
}
.bg-skyazure-300{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-300) / var(--bg-opacity));
}
.bg-skyazure-400{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-400) / var(--bg-opacity));
}
.skyazure,
.bg-skyazure,
.bg-skyazure-500,
.btn-skyazure,
.hover-bg-skyazure:hover,
.hover-bg-skyazure-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-500) / var(--bg-opacity));
}
.bg-skyazure-600{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-600) / var(--bg-opacity));
}
.bg-skyazure-700{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-700) / var(--bg-opacity));
}
.bg-skyazure-800{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-800) / var(--bg-opacity));
}
.bg-skyazure-900{
  --bg-opacity: 1;
  background-color: rgba(var(--skyazure-900) / var(--bg-opacity));
}
/* 翡翠绿 */
.bg-jadegreen-50{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-50) / var(--bg-opacity));
}
.bg-jadegreen-100{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-100) / var(--bg-opacity));
}
.bg-jadegreen-200{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-200) / var(--bg-opacity));
}
.bg-jadegreen-300{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-300) / var(--bg-opacity));
}
.bg-jadegreen-400{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-400) / var(--bg-opacity));
}
.jadegreen,
.bg-jadegreen,
.bg-jadegreen-500,
.btn-jadegreen,
.hover-bg-jadegreen:hover,
.hover-bg-jadegreen-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-500) / var(--bg-opacity));
}
.bg-jadegreen-600{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-600) / var(--bg-opacity));
}
.bg-jadegreen-700{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-700) / var(--bg-opacity));
}
.bg-jadegreen-800{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-800) / var(--bg-opacity));
}
.bg-jadegreen-900{
  --bg-opacity: 1;
  background-color: rgba(var(--jadegreen-900) / var(--bg-opacity));
}
/* 道奇蓝 */
.bg-dodgerblue-50{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-50) / var(--bg-opacity));
}
.bg-dodgerblue-100{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-100) / var(--bg-opacity));
}
.bg-dodgerblue-200{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-200) / var(--bg-opacity));
}
.bg-dodgerblue-300{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-300) / var(--bg-opacity));
}
.bg-dodgerblue-400{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-400) / var(--bg-opacity));
}
.dodgerblue,
.bg-dodgerblue,
.bg-dodgerblue-500,
.btn-dodgerblue,
.hover-bg-dodgerblue:hover,
.hover-bg-dodgerblue-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-500) / var(--bg-opacity));
}
.bg-dodgerblue-600{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-600) / var(--bg-opacity));
}
.bg-dodgerblue-700{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-700) / var(--bg-opacity));
}
.bg-dodgerblue-800{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-800) / var(--bg-opacity));
}
.bg-dodgerblue-900{
  --bg-opacity: 1;
  background-color: rgba(var(--dodgerblue-900) / var(--bg-opacity));
}
/* 皇家蓝 */
.bg-royalblue-50{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-50) / var(--bg-opacity));
}
.bg-royalblue-100{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-100) / var(--bg-opacity));
}
.bg-royalblue-200{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-200) / var(--bg-opacity));
}
.bg-royalblue-300{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-300) / var(--bg-opacity));
}
.bg-royalblue-400{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-400) / var(--bg-opacity));
}
.royalblue,
.bg-royalblue,
.bg-royalblue-500,
.btn-royalblue,
.hover-bg-royalblue:hover,
.hover-bg-royalblue-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-500) / var(--bg-opacity));
}
.bg-royalblue-600{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-600) / var(--bg-opacity));
}
.bg-royalblue-700{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-700) / var(--bg-opacity));
}
.bg-royalblue-800{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-800) / var(--bg-opacity));
}
.bg-royalblue-900{
  --bg-opacity: 1;
  background-color: rgba(var(--royalblue-900) / var(--bg-opacity));
}
/* 宁静灰蓝 */
.bg-peace-50{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-50) / var(--bg-opacity));
}
.bg-peace-100{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-100) / var(--bg-opacity));
}
.bg-peace-200{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-200) / var(--bg-opacity));
}
.bg-peace-300{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-300) / var(--bg-opacity));
}
.bg-peace-400{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-400) / var(--bg-opacity));
}
.peace,
.bg-peace,
.bg-peace-500,
.btn-peace,
.hover-bg-peace:hover,
.hover-bg-peace-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-500) / var(--bg-opacity));
}
.bg-peace-600{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-600) / var(--bg-opacity));
}
.bg-peace-700{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-700) / var(--bg-opacity));
}
.bg-peace-800{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-800) / var(--bg-opacity));
}
.bg-peace-900{
  --bg-opacity: 1;
  background-color: rgba(var(--peace-900) / var(--bg-opacity));
}
/* 石墨灰 */
.bg-graphite-50{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-50) / var(--bg-opacity));
}
.bg-graphite-100{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-100) / var(--bg-opacity));
}
.bg-graphite-200{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-200) / var(--bg-opacity));
}
.bg-graphite-300{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-300) / var(--bg-opacity));
}
.bg-graphite-400{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-400) / var(--bg-opacity));
}
.graphite,
.bg-graphite,
.bg-graphite-500,
.btn-graphite,
.hover-bg-graphite:hover,
.hover-bg-graphite-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-500) / var(--bg-opacity));
}
.bg-graphite-600{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-600) / var(--bg-opacity));
}
.bg-graphite-700{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-700) / var(--bg-opacity));
}
.bg-graphite-800{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-800) / var(--bg-opacity));
}
.bg-graphite-900{
  --bg-opacity: 1;
  background-color: rgba(var(--graphite-900) / var(--bg-opacity));
}
/* 银灰 */
.bg-silvergray-50{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-50) / var(--bg-opacity));
}
.bg-silvergray-100{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-100) / var(--bg-opacity));
}
.bg-silvergray-200{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-200) / var(--bg-opacity));
}
.bg-silvergray-300{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-300) / var(--bg-opacity));
}
.bg-silvergray-400{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-400) / var(--bg-opacity));
}
.silvergray,
.bg-silvergray-500,
.bg-silvergray,
.btn-silvergray,
.hover-bg-silvergray:hover,
.hover-bg-silvergray-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-500) / var(--bg-opacity));
}
.bg-silvergray-600{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-600) / var(--bg-opacity));
}
.bg-silvergray-700{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-700) / var(--bg-opacity));
}
.bg-silvergray-800{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-800) / var(--bg-opacity));
}
.bg-silvergray-900{
  --bg-opacity: 1;
  background-color: rgba(var(--silvergray-900) / var(--bg-opacity));
}



/* 午夜蓝 */
.bg-midnight-50{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-50) / var(--bg-opacity));
}
.bg-midnight-100{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-100) / var(--bg-opacity));
}
.bg-midnight-200{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-200) / var(--bg-opacity));
}
.bg-midnight-300{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-300) / var(--bg-opacity));
}
.bg-midnight-400{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-400) / var(--bg-opacity));
}
.midnight,
.bg-midnight,
.bg-midnight-500,
.btn-midnight,
.hover-bg-midnight:hover,
.hover-bg-midnight-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-500) / var(--bg-opacity));
}
.bg-midnight-600{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-600) / var(--bg-opacity));
}
.bg-midnight-700{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-700) / var(--bg-opacity));
}
.bg-midnight-800{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-800) / var(--bg-opacity));
}
.bg-midnight-900{
  --bg-opacity: 1;
  background-color: rgba(var(--midnight-900) / var(--bg-opacity));
}
/* 雾灰白 */
.bg-mistwhite-50{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-50) / var(--bg-opacity));
}
.bg-mistwhite-100{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-100) / var(--bg-opacity));
}
.bg-mistwhite-200{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-200) / var(--bg-opacity));
}
.bg-mistwhite-300{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-300) / var(--bg-opacity));
}
.bg-mistwhite-400{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-400) / var(--bg-opacity));
}
.mistwhite,
.bg-mistwhite,
.bg-mistwhite-500,
.btn-mistwhite,
.hover-bg-mistwhite:hover,
.hover-bg-mistwhite-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-500) / var(--bg-opacity));
}
.bg-mistwhite-600{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-600) / var(--bg-opacity));
}
.bg-mistwhite-700{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-700) / var(--bg-opacity));
}
.bg-mistwhite-800{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-800) / var(--bg-opacity));
}
.bg-mistwhite-900{
  --bg-opacity: 1;
  background-color: rgba(var(--mistwhite-900) / var(--bg-opacity));
}
/* 雪青白 */
.bg-snowwhite-50{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-50) / var(--bg-opacity));
}
.bg-snowwhite-100{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-100) / var(--bg-opacity));
}
.bg-snowwhite-200{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-200) / var(--bg-opacity));
}
.bg-snowwhite-300{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-300) / var(--bg-opacity));
}
.bg-snowwhite-400{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-400) / var(--bg-opacity));
}
.snowwhite,
.bg-snowwhite,
.bg-snowwhite-500,
.btn-snowwhite,
.hover-bg-snowwhite:hover,
.hover-bg-snowwhite-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-500) / var(--bg-opacity));
}
.bg-snowwhite-600{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-600) / var(--bg-opacity));
}
.bg-snowwhite-700{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-700) / var(--bg-opacity));
}
.bg-snowwhite-800{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-800) / var(--bg-opacity));
}
.bg-snowwhite-900{
  --bg-opacity: 1;
  background-color: rgba(var(--snowwhite-900) / var(--bg-opacity));
}
/* 云灰 */
.bg-cloudgray-50{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-50) / var(--bg-opacity));
}
.bg-cloudgray-100{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-100) / var(--bg-opacity));
}
.bg-cloudgray-200{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-200) / var(--bg-opacity));
}
.bg-cloudgray-300{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-300) / var(--bg-opacity));
}
.bg-cloudgray-400{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-400) / var(--bg-opacity));
}
.cloudgray,
.bg-cloudgray,
.bg-cloudgray-500,
.btn-cloudgray,
.hover-bg-cloudgray:hover,
.hover-bg-cloudgray-500:hover{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-500) / var(--bg-opacity));
}
.bg-cloudgray-600{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-600) / var(--bg-opacity));
}
.bg-cloudgray-700{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-700) / var(--bg-opacity));
}
.bg-cloudgray-800{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-800) / var(--bg-opacity));
}
.bg-cloudgray-900{
  --bg-opacity: 1;
  background-color: rgba(var(--cloudgray-900) / var(--bg-opacity));
}
/* 左斜杠 */
.bg-img-leftslash {
  background-image: repeating-linear-gradient(135deg,
      rgba(189, 189, 189, 0.1) 0px,
      rgba(189, 189, 189, 0.1) 2px,
      transparent 2px,
      transparent 4px),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
.bg-img-cross{
  background-image: url('../images/cross.png');
  background-repeat: repeat;
}
.bg-img-circleslight{
  background-image: url('../images/circles-light.png');
  background-repeat: repeat;
}
.bg-img-circuit{
  background-image: url('../images/circuit.png');
  background-repeat: repeat;
}
.bg-img-confectionary{
  background-image: url('../images/confectionary.png');
  background-repeat: repeat;
}
.bg-img-crosslinedots{
  background-image: url('../images/crossline-dots.png');
  background-repeat: repeat;
}
.bg-img-crosslines{
  background-image: url('../images/crossline-lines.png');
  background-repeat: repeat;
}
.bg-img-curls-dark{
  background-image: url('../images/curls.png');
  background-repeat: repeat;
}
.bg-img-darkhoneycomb-dark{
  background-image: url('../images/dark-honeycomb.png');
  background-repeat: repeat;
}
.bg-img-dotgrid{
  background-image: url('../images/dot-grid.png');
  background-repeat: repeat;
}
.bg-img-doublebubble{
  background-image: url('../images/double-bubble.png');
  background-repeat: repeat;
}
.bg-img-doublebubble-dark{
  background-image: url('../images/double-bubble-dark.png');
  background-repeat: repeat;
}
.bg-img-doublebubble-outline{
  background-image: url('../images/double-bubble-outline.png');
  background-repeat: repeat;
}
.bg-img-emailpattern{
  background-image: url('../images/email-pattern.png');
  background-repeat: repeat;
}
.bg-img-fishnetsandhearts{
  background-image: url('../images/fishnets-and-hearts.png');
  background-repeat: repeat;
}
.bg-img-floortile{
  background-image: url('../images/floor-tile.png');
  background-repeat: repeat;
}
.bg-img-fullbloom{
  background-image: url('../images/full-bloom.png');
  background-repeat: repeat;
}
.bg-img-gamingpattern{
  background-image: url('../images/gaming-pattern.png');
  background-repeat: repeat;
}
.bg-img-geometricleaves{
  background-image: url('../images/geometric-leaves.png');
  background-repeat: repeat;
}
.bg-img-houndstoothpattern{
  background-image: url('../images/houndstooth-pattern.png');
  background-repeat: repeat;
}
.bg-img-justwaves{
  background-image: url('../images/just-waves.png');
  background-repeat: repeat;
}
.bg-img-leaves{
  background-image: url('../images/leaves.png');
  background-repeat: repeat;
}
.bg-img-leavespattern{
  background-image: url('../images/leaves-pattern.png');
  background-repeat: repeat;
}
.bg-img-lettherebesun{
  background-image: url('../images/let-there-be-sun.png');
  background-repeat: repeat;
}
.bg-img-memphiscolorful{
  background-image: url('../images/memphis-colorful.png');
  background-repeat: repeat;
}
.bg-img-memphismini{
  background-image: url('../images/memphis-mini.png');
  background-repeat: repeat;
}
.bg-img-morocco{
  background-image: url('../images/morocco.png');
  background-repeat: repeat;
}
.bg-img-orientaltiles-dark{
  background-image: url('../images/oriental-tiles.png');
  background-repeat: repeat;
}
.bg-img-palmleaf{
  background-image: url('../images/palm-leaf.png');
  background-repeat: repeat;
}
.bg-img-positive{
  background-image: url('../images/positive.png');
  background-repeat: repeat;
}
.bg-img-round{
  background-image: url('../images/round.png');
  background-repeat: repeat;
}
.bg-img-seigaiha{
  background-image: url('../images/seigaiha.png');
  background-repeat: repeat;
}
.bg-img-spikes{
  background-image: url('../images/spikes.png');
  background-repeat: repeat;
}
.bg-img-sports{
  background-image: url('../images/sports.png');
  background-repeat: repeat;
}
.bg-img-spring{
  background-image: url('../images/spring.png');
  background-repeat: repeat;
}
.bg-img-subtlewhiteminiwaves{
  background-image: url('../images/subtle_white_mini_waves.png');
  background-repeat: repeat;
}
.bg-img-swirlpattern{
  background-image: url('../images/swirl_pattern.png');
  background-repeat: repeat;
}
.bg-img-symphony{
  background-image: url('../images/symphony.png');
  background-repeat: repeat;
}
.bg-img-topography{
  background-image: url('../images/topography.png');
  background-repeat: repeat;
}
.bg-img-vintagewallpaper-dark{
  background-image: url('../images/vintage-wallpaper.png');
  background-repeat: repeat;
}
.bg-img-wheat-dark{
  background-image: url('../images/wheat.png');
  background-repeat: repeat;
}
.bg-img-whitewaves{
  background-image: url('../images/white-waves.png');
  background-repeat: repeat;
}
/* 渐变背景 */
/* 光晕 */
.bg-gradient-halo{
  background-image: radial-gradient( circle farthest-corner at 33.1% 43.3%, rgba(60,157,226,0.63) 4%, rgba(223,203,235,0.63) 26%, rgba(247,196,157,0.66) 41.4%, rgba(182,203,222,0.63) 99.5% );
}
/*日光*/
.bg-gradient-sunlight{
  background-image: radial-gradient( circle 387px at 42.9% 1%, #f7e15a 0%, rgba(227,234,156,1) 25%, rgba(225,217,175,1) 34.7%, rgba(155,222,212,1) 45.2%, rgba(146,213,201,1) 61.8%, rgba(128,206,191,1) 76.6%, rgba(117,193,179,1) 90%, rgba(110,206,188,1) 94.2%, rgba(87,197,177,1) 98.9% );
}
/* 暮光云母 */
.bg-gradient-twilightmica{
  background-image:conic-gradient(from 210deg, rgb(197, 187, 184) 0deg, rgb(197, 187, 184) 24deg, rgb(184, 181, 184) calc(24.1deg), rgb(184, 181, 184) 48deg, rgb(169, 175, 183) calc(48.1deg), rgb(169, 175, 183) 72deg, rgb(154, 168, 181) calc(72.1deg), rgb(154, 168, 181) 96deg, rgb(139, 161, 179) calc(96.1deg), rgb(139, 161, 179) 120deg, rgb(125, 152, 175) calc(120.1deg), rgb(125, 152, 175) 144deg, rgb(112, 144, 171) calc(144.1deg), rgb(112, 144, 171) 168deg, rgb(101, 135, 166) calc(168.1deg), rgb(101, 135, 166) 192deg, rgb(92, 126, 161) calc(192.1deg), rgb(92, 126, 161) 216deg, rgb(85, 117, 155) calc(216.1deg), rgb(85, 117, 155) 240deg, rgb(81, 108, 148) calc(240.1deg), rgb(81, 108, 148) 264deg, rgb(79, 99, 141) calc(264.1deg), rgb(79, 99, 141) 288deg, rgb(80, 90, 133) calc(288.1deg), rgb(80, 90, 133) 312deg, rgb(84, 83, 125) calc(312.1deg), rgb(84, 83, 125) 336deg, rgb(91, 75, 116) calc(336.1deg), rgb(91, 75, 116) 360deg)
}
/*深海光轮*/
.bg-gradient-Deepoceanwwheel{
  background-image:conic-gradient(from 45deg, rgb(10, 74, 89) 0deg, rgb(10, 74, 89) 27.692deg, rgb(11, 82, 124) calc(27.792deg), rgb(11, 82, 124) 55.385deg, rgb(13, 92, 159) calc(55.485deg), rgb(13, 92, 159) 83.077deg, rgb(16, 104, 194) calc(83.177deg), rgb(16, 104, 194) 110.769deg, rgb(18, 118, 227) calc(110.869deg), rgb(18, 118, 227) 138.462deg, rgb(21, 133, 255) calc(138.562deg), rgb(21, 133, 255) 166.154deg, rgb(24, 150, 255) calc(166.254deg), rgb(24, 150, 255) 193.846deg, rgb(28, 169, 255) calc(193.946deg), rgb(28, 169, 255) 221.538deg, rgb(31, 188, 255) calc(221.638deg), rgb(31, 188, 255) 249.231deg, rgb(35, 209, 255) calc(249.331deg), rgb(35, 209, 255) 276.923deg, rgb(39, 230, 255) calc(277.023deg), rgb(39, 230, 255) 304.615deg, rgb(43, 251, 255) calc(304.715deg), rgb(43, 251, 255) 332.308deg, rgb(47, 255, 255) calc(332.408deg), rgb(47, 255, 255) 360deg)
}
/* 玄砥 */
.bg-gradient-deepstrata{
  background-image:linear-gradient(90deg, rgb(5, 5, 10) 0%, rgb(5, 5, 10) 7.692%, rgb(9, 10, 14) calc(7.692% + 1px), rgb(9, 10, 14) 15.385%, rgb(13, 14, 18) calc(15.385% + 1px), rgb(13, 14, 18) 23.077%, rgb(18, 19, 22) calc(23.077% + 1px), rgb(18, 19, 22) 30.769%, rgb(22, 23, 26) calc(30.769% + 1px), rgb(22, 23, 26) 38.462%, rgb(26, 27, 30) calc(38.462% + 1px), rgb(26, 27, 30) 46.154%, rgb(30, 31, 34) calc(46.154% + 1px), rgb(30, 31, 34) 53.846%, rgb(34, 35, 38) calc(53.846% + 1px), rgb(34, 35, 38) 61.538%, rgb(38, 39, 42) calc(61.538% + 1px), rgb(38, 39, 42) 69.231%, rgb(41, 42, 45) calc(69.231% + 1px), rgb(41, 42, 45) 76.923%, rgb(44, 45, 48) calc(76.923% + 1px), rgb(44, 45, 48) 84.615%, rgb(46, 47, 51) calc(84.615% + 1px), rgb(46, 47, 51) 92.308%, rgb(48, 49, 53) calc(92.308% + 1px), rgb(48, 49, 53) 100%)
}
/* 霞绡 */
.bg-gradient-aurorasilk{
  background-image:conic-gradient(from 45deg, rgb(255, 255, 214) 0deg, rgb(255, 241, 197) 60deg, rgb(240, 220, 184) 120deg, rgb(219, 198, 179) 180deg, rgb(198, 181, 184) 240deg, rgb(183, 172, 196) 300deg, rgb(176, 175, 213) 360deg)
}
/* 苍筤 */
.bg-gradient-verdantstrata{
  background-image:conic-gradient(from 285deg, rgb(218, 197, 179) 0deg, rgb(172, 182, 164) 90deg, rgb(121, 157, 141) 180deg, rgb(86, 127, 112) 270deg, rgb(81, 95, 79) 360deg)
}
/* 渟滢 */
.bg-gradient-aquabreeze{
  background-image:linear-gradient(90deg, rgb(235, 251, 229) 0%, rgb(164, 184, 163) 25%, rgb(126, 166, 141) 50%, rgb(147, 211, 182) 75%, rgb(212, 255, 250) 100%)
}
/* 霁霓 */
.bg-gradient-auroratide{
  background-image:linear-gradient(45deg, rgb(65, 89, 208) 0%, rgb(251, 145, 149) 50%, rgb(148, 93, 183) 100%)
}
/* 烟绯 */
.bg-gradient-tideblush{
  background-image:linear-gradient(90deg, rgb(193, 209, 204) 0%, rgb(223, 180, 175) 16.667%, rgb(244, 160, 154) 33.333%, rgb(249, 157, 149) 50%, rgb(235, 171, 162) 66.667%, rgb(208, 198, 188) 83.333%, rgb(179, 225, 217) 100%)
}
/* 月魄 */
.bg-gradient-auroramist{
  background-image:linear-gradient(90deg, rgb(245, 245, 245) 0%, rgb(220, 220, 220) 25%, rgb(195, 195, 195) 50%, rgb(170, 170, 170) 75%, rgb(145, 145, 145) 100%)
}
/* 温玉 */
.bg-gradient-patinawhite{
  background-image:linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 7.692%, rgb(255, 255, 253) calc(7.692% + 1px), rgb(255, 255, 253) 15.385%, rgb(255, 255, 243) calc(15.385% + 1px), rgb(255, 255, 243) 23.077%, rgb(255, 248, 233) calc(23.077% + 1px), rgb(255, 248, 233) 30.769%, rgb(255, 238, 224) calc(30.769% + 1px), rgb(255, 238, 224) 38.462%, rgb(251, 228, 215) calc(38.462% + 1px), rgb(251, 228, 215) 46.154%, rgb(245, 219, 207) calc(46.154% + 1px), rgb(245, 219, 207) 53.846%, rgb(239, 211, 199) calc(53.846% + 1px), rgb(239, 211, 199) 61.538%, rgb(233, 202, 192) calc(61.538% + 1px), rgb(233, 202, 192) 69.231%, rgb(227, 194, 185) calc(69.231% + 1px), rgb(227, 194, 185) 76.923%, rgb(221, 187, 179) calc(76.923% + 1px), rgb(221, 187, 179) 84.615%, rgb(215, 181, 175) calc(84.615% + 1px), rgb(215, 181, 175) 92.308%, rgb(210, 175, 170) calc(92.308% + 1px), rgb(210, 175, 170) 100%)
}
/* 晴岚 */
.bg-gradient-cyanbloom{
  background-image:linear-gradient(90deg, rgb(255, 255, 138) 0%, rgb(255, 255, 164) 16.667%, rgb(255, 255, 202) 33.333%, rgb(255, 255, 245) 50%, rgb(208, 255, 255) 66.667%, rgb(163, 212, 255) 83.333%, rgb(134, 157, 255) 100%)
}
/* 靛魄 */
.bg-gradient-deepskyfade{
  background-image:linear-gradient(rgb(0, 59, 255) 0%, rgb(0, 75, 255) 8.333%, rgb(18, 92, 255) 16.667%, rgb(43, 108, 255) 25%, rgb(68, 123, 255) 33.333%, rgb(93, 139, 255) 41.667%, rgb(116, 153, 255) 50%, rgb(138, 167, 255) 58.333%, rgb(157, 179, 255) 66.667%, rgb(173, 191, 255) 75%, rgb(185, 201, 255) 83.333%, rgb(194, 210, 255) 91.667%, rgb(198, 217, 255) 100%)
}
/* 青霭 */
.bg-gradient-bamboowhorl{
  background-image:conic-gradient(from 90deg, rgb(198, 227, 190) 0deg, rgb(198, 227, 190) 10.588deg, rgb(195, 228, 193) calc(10.688deg), rgb(195, 228, 193) 21.176deg, rgb(192, 228, 196) calc(21.276deg), rgb(192, 228, 196) 31.765deg, rgb(189, 227, 199) calc(31.865deg), rgb(189, 227, 199) 42.353deg, rgb(185, 227, 201) calc(42.453deg), rgb(185, 227, 201) 52.941deg, rgb(182, 226, 203) calc(53.041deg), rgb(182, 226, 203) 63.529deg, rgb(178, 225, 205) calc(63.629deg), rgb(178, 225, 205) 74.118deg, rgb(174, 224, 207) calc(74.218deg), rgb(174, 224, 207) 84.706deg, rgb(169, 223, 208) calc(84.806deg), rgb(169, 223, 208) 95.294deg, rgb(165, 221, 209) calc(95.394deg), rgb(165, 221, 209) 105.882deg, rgb(160, 219, 210) calc(105.982deg), rgb(160, 219, 210) 116.471deg, rgb(155, 217, 210) calc(116.571deg), rgb(155, 217, 210) 127.059deg, rgb(150, 215, 210) calc(127.159deg), rgb(150, 215, 210) 137.647deg, rgb(145, 212, 210) calc(137.747deg), rgb(145, 212, 210) 148.235deg, rgb(140, 209, 210) calc(148.335deg), rgb(140, 209, 210) 158.824deg, rgb(135, 206, 209) calc(158.924deg), rgb(135, 206, 209) 169.412deg, rgb(130, 203, 208) calc(169.512deg), rgb(130, 203, 208) 180deg, rgb(124, 200, 206) calc(180.1deg), rgb(124, 200, 206) 190.588deg, rgb(119, 196, 205) calc(190.688deg), rgb(119, 196, 205) 201.176deg, rgb(113, 192, 203) calc(201.276deg), rgb(113, 192, 203) 211.765deg, rgb(108, 188, 201) calc(211.865deg), rgb(108, 188, 201) 222.353deg, rgb(102, 184, 198) calc(222.453deg), rgb(102, 184, 198) 232.941deg, rgb(97, 180, 196) calc(233.041deg), rgb(97, 180, 196) 243.529deg, rgb(91, 175, 193) calc(243.629deg), rgb(91, 175, 193) 254.118deg, rgb(86, 171, 189) calc(254.218deg), rgb(86, 171, 189) 264.706deg, rgb(80, 166, 186) calc(264.806deg), rgb(80, 166, 186) 275.294deg, rgb(75, 161, 182) calc(275.394deg), rgb(75, 161, 182) 285.882deg, rgb(70, 156, 178) calc(285.982deg), rgb(70, 156, 178) 296.471deg, rgb(65, 151, 174) calc(296.571deg), rgb(65, 151, 174) 307.059deg, rgb(60, 146, 170) calc(307.159deg), rgb(60, 146, 170) 317.647deg, rgb(55, 140, 166) calc(317.747deg), rgb(55, 140, 166) 328.235deg, rgb(50, 135, 161) calc(328.335deg), rgb(50, 135, 161) 338.824deg, rgb(45, 129, 156) calc(338.924deg), rgb(45, 129, 156) 349.412deg, rgb(40, 124, 151) calc(349.512deg), rgb(40, 124, 151) 360deg)
}
/* 岫澂 */
.bg-gradient-jademist{
  background-image:linear-gradient(90deg, rgb(114, 164, 140) 0%, rgb(120, 170, 158) 16.667%, rgb(137, 195, 203) 33.333%, rgb(164, 231, 255) 50%, rgb(193, 255, 255) 66.667%, rgb(220, 255, 255) 83.333%, rgb(239, 255, 255) 100%)
}
/* 紫府澂 */
.bg-gradient-quantumaurora{
  background-image:linear-gradient(90deg, rgb(85, 73, 255) 0%, rgb(85, 73, 255) 2.941%, rgb(75, 72, 255) calc(2.941% + 1px), rgb(75, 72, 255) 5.882%, rgb(64, 71, 255) calc(5.882% + 1px), rgb(64, 71, 255) 8.824%, rgb(55, 71, 255) calc(8.824% + 1px), rgb(55, 71, 255) 11.765%, rgb(45, 72, 255) calc(11.765% + 1px), rgb(45, 72, 255) 14.706%, rgb(37, 73, 255) calc(14.706% + 1px), rgb(37, 73, 255) 17.647%, rgb(28, 75, 255) calc(17.647% + 1px), rgb(28, 75, 255) 20.588%, rgb(21, 77, 255) calc(20.588% + 1px), rgb(21, 77, 255) 23.529%, rgb(14, 80, 255) calc(23.529% + 1px), rgb(14, 80, 255) 26.471%, rgb(7, 84, 255) calc(26.471% + 1px), rgb(7, 84, 255) 29.412%, rgb(2, 88, 255) calc(29.412% + 1px), rgb(2, 88, 255) 32.353%, rgb(0, 93, 255) calc(32.353% + 1px), rgb(0, 93, 255) 35.294%, rgb(0, 98, 255) calc(35.294% + 1px), rgb(0, 98, 255) 38.235%, rgb(0, 103, 255) calc(38.235% + 1px), rgb(0, 103, 255) 41.176%, rgb(0, 110, 255) calc(41.176% + 1px), rgb(0, 110, 255) 44.118%, rgb(0, 116, 255) calc(44.118% + 1px), rgb(0, 116, 255) 47.059%, rgb(0, 123, 255) calc(47.059% + 1px), rgb(0, 123, 255) 50%, rgb(0, 131, 255) calc(50% + 1px), rgb(0, 131, 255) 52.941%, rgb(0, 139, 255) calc(52.941% + 1px), rgb(0, 139, 255) 55.882%, rgb(0, 147, 255) calc(55.882% + 1px), rgb(0, 147, 255) 58.824%, rgb(0, 155, 255) calc(58.824% + 1px), rgb(0, 155, 255) 61.765%, rgb(0, 164, 255) calc(61.765% + 1px), rgb(0, 164, 255) 64.706%, rgb(0, 173, 255) calc(64.706% + 1px), rgb(0, 173, 255) 67.647%, rgb(0, 183, 255) calc(67.647% + 1px), rgb(0, 183, 255) 70.588%, rgb(0, 192, 255) calc(70.588% + 1px), rgb(0, 192, 255) 73.529%, rgb(4, 202, 255) calc(73.529% + 1px), rgb(4, 202, 255) 76.471%, rgb(9, 212, 255) calc(76.471% + 1px), rgb(9, 212, 255) 79.412%, rgb(16, 221, 255) calc(79.412% + 1px), rgb(16, 221, 255) 82.353%, rgb(23, 231, 255) calc(82.353% + 1px), rgb(23, 231, 255) 85.294%, rgb(31, 241, 255) calc(85.294% + 1px), rgb(31, 241, 255) 88.235%, rgb(39, 251, 255) calc(88.235% + 1px), rgb(39, 251, 255) 91.176%, rgb(48, 255, 255) calc(91.176% + 1px), rgb(48, 255, 255) 94.118%, rgb(58, 255, 255) calc(94.118% + 1px), rgb(58, 255, 255) 97.059%, rgb(68, 255, 255) calc(97.059% + 1px), rgb(68, 255, 255) 100%)
}
/* 霙澂 */
.bg-gradient-velvetdawn{
  background-image:linear-gradient(135deg, rgb(65, 94, 208) 0%, rgb(65, 94, 208) 2.941%, rgb(67, 95, 209) calc(2.941% + 1px), rgb(67, 95, 209) 5.882%, rgb(69, 96, 210) calc(5.882% + 1px), rgb(69, 96, 210) 8.824%, rgb(71, 97, 210) calc(8.824% + 1px), rgb(71, 97, 210) 11.765%, rgb(74, 98, 211) calc(11.765% + 1px), rgb(74, 98, 211) 14.706%, rgb(76, 100, 212) calc(14.706% + 1px), rgb(76, 100, 212) 17.647%, rgb(79, 101, 212) calc(17.647% + 1px), rgb(79, 101, 212) 20.588%, rgb(83, 102, 213) calc(20.588% + 1px), rgb(83, 102, 213) 23.529%, rgb(86, 103, 214) calc(23.529% + 1px), rgb(86, 103, 214) 26.471%, rgb(89, 104, 214) calc(26.471% + 1px), rgb(89, 104, 214) 29.412%, rgb(93, 105, 215) calc(29.412% + 1px), rgb(93, 105, 215) 32.353%, rgb(97, 107, 216) calc(32.353% + 1px), rgb(97, 107, 216) 35.294%, rgb(101, 108, 216) calc(35.294% + 1px), rgb(101, 108, 216) 38.235%, rgb(105, 109, 217) calc(38.235% + 1px), rgb(105, 109, 217) 41.176%, rgb(109, 110, 217) calc(41.176% + 1px), rgb(109, 110, 217) 44.118%, rgb(114, 111, 218) calc(44.118% + 1px), rgb(114, 111, 218) 47.059%, rgb(119, 113, 219) calc(47.059% + 1px), rgb(119, 113, 219) 50%, rgb(123, 114, 219) calc(50% + 1px), rgb(123, 114, 219) 52.941%, rgb(128, 115, 220) calc(52.941% + 1px), rgb(128, 115, 220) 55.882%, rgb(133, 116, 221) calc(55.882% + 1px), rgb(133, 116, 221) 58.824%, rgb(139, 118, 221) calc(58.824% + 1px), rgb(139, 118, 221) 61.765%, rgb(144, 119, 222) calc(61.765% + 1px), rgb(144, 119, 222) 64.706%, rgb(149, 120, 223) calc(64.706% + 1px), rgb(149, 120, 223) 67.647%, rgb(155, 121, 223) calc(67.647% + 1px), rgb(155, 121, 223) 70.588%, rgb(161, 123, 224) calc(70.588% + 1px), rgb(161, 123, 224) 73.529%, rgb(167, 124, 225) calc(73.529% + 1px), rgb(167, 124, 225) 76.471%, rgb(172, 125, 225) calc(76.471% + 1px), rgb(172, 125, 225) 79.412%, rgb(178, 127, 226) calc(79.412% + 1px), rgb(178, 127, 226) 82.353%, rgb(184, 128, 227) calc(82.353% + 1px), rgb(184, 128, 227) 85.294%, rgb(190, 129, 227) calc(85.294% + 1px), rgb(190, 129, 227) 88.235%, rgb(197, 131, 228) calc(88.235% + 1px), rgb(197, 131, 228) 91.176%, rgb(203, 132, 228) calc(91.176% + 1px), rgb(203, 132, 228) 94.118%, rgb(209, 133, 229) calc(94.118% + 1px), rgb(209, 133, 229) 97.059%, rgb(216, 134, 230) calc(97.059% + 1px), rgb(216, 134, 230) 100%)
}
/* 渊潨 */
.bg-gradient-aquafrost{
  background-image:linear-gradient(135deg, rgb(192, 255, 255) 0%, rgb(192, 255, 255) 2.941%, rgb(187, 255, 255) calc(2.941% + 1px), rgb(187, 255, 255) 5.882%, rgb(181, 255, 255) calc(5.882% + 1px), rgb(181, 255, 255) 8.824%, rgb(176, 252, 255) calc(8.824% + 1px), rgb(176, 252, 255) 11.765%, rgb(170, 243, 255) calc(11.765% + 1px), rgb(170, 243, 255) 14.706%, rgb(165, 233, 255) calc(14.706% + 1px), rgb(165, 233, 255) 17.647%, rgb(159, 222, 255) calc(17.647% + 1px), rgb(159, 222, 255) 20.588%, rgb(154, 211, 255) calc(20.588% + 1px), rgb(154, 211, 255) 23.529%, rgb(148, 199, 255) calc(23.529% + 1px), rgb(148, 199, 255) 26.471%, rgb(142, 187, 255) calc(26.471% + 1px), rgb(142, 187, 255) 29.412%, rgb(137, 175, 255) calc(29.412% + 1px), rgb(137, 175, 255) 32.353%, rgb(131, 163, 255) calc(32.353% + 1px), rgb(131, 163, 255) 35.294%, rgb(125, 150, 255) calc(35.294% + 1px), rgb(125, 150, 255) 38.235%, rgb(120, 137, 255) calc(38.235% + 1px), rgb(120, 137, 255) 41.176%, rgb(114, 124, 254) calc(41.176% + 1px), rgb(114, 124, 254) 44.118%, rgb(108, 112, 251) calc(44.118% + 1px), rgb(108, 112, 251) 47.059%, rgb(103, 99, 248) calc(47.059% + 1px), rgb(103, 99, 248) 50%, rgb(97, 86, 244) calc(50% + 1px), rgb(97, 86, 244) 52.941%, rgb(92, 74, 241) calc(52.941% + 1px), rgb(92, 74, 241) 55.882%, rgb(87, 62, 237) calc(55.882% + 1px), rgb(87, 62, 237) 58.824%, rgb(81, 50, 233) calc(58.824% + 1px), rgb(81, 50, 233) 61.765%, rgb(76, 39, 228) calc(61.765% + 1px), rgb(76, 39, 228) 64.706%, rgb(71, 28, 224) calc(64.706% + 1px), rgb(71, 28, 224) 67.647%, rgb(66, 18, 220) calc(67.647% + 1px), rgb(66, 18, 220) 70.588%, rgb(61, 8, 215) calc(70.588% + 1px), rgb(61, 8, 215) 73.529%, rgb(56, 0, 210) calc(73.529% + 1px), rgb(56, 0, 210) 76.471%, rgb(52, 0, 205) calc(76.471% + 1px), rgb(52, 0, 205) 79.412%, rgb(47, 0, 200) calc(79.412% + 1px), rgb(47, 0, 200) 82.353%, rgb(43, 0, 195) calc(82.353% + 1px), rgb(43, 0, 195) 85.294%, rgb(38, 0, 190) calc(85.294% + 1px), rgb(38, 0, 190) 88.235%, rgb(34, 0, 185) calc(88.235% + 1px), rgb(34, 0, 185) 91.176%, rgb(30, 0, 179) calc(91.176% + 1px), rgb(30, 0, 179) 94.118%, rgb(27, 0, 174) calc(94.118% + 1px), rgb(27, 0, 174) 97.059%, rgb(23, 0, 169) calc(97.059% + 1px), rgb(23, 0, 169) 100%)
}
/* 素朏 */
.bg-gradient-lunamist{
  background-image:radial-gradient(476px at 54.8% 51.5%, rgb(168, 229, 253) 0%, rgb(244, 244, 254) 42.3%, rgb(244, 244, 254) 100.2%)
}
/* 赛博天鹅绒 */
.bg-gradient-cybervelvet{
  background: linear-gradient(45deg, rgba(92, 10, 92, 0.8) 25%, transparent), repeating-radial-gradient(ellipse at 0% 100%, rgba(41, 163, 122, 0.5), rgba(184, 20, 102, 0.25) 50px), repeating-radial-gradient(ellipse at 100% 0%, rgba(214, 173, 235, 0.5), rgba(184, 20, 102, 0.25) 50px) purple;
}
/* 复古纸张 */
.bg-gradient-vintagepaper {
  background-color: #F9F6EF;
  background-image: repeating-linear-gradient(135deg, #0000 0 6px, #00000005 0 9px),radial-gradient(circle, #F9F6EF, #EBEBE3),radial-gradient(at 100% 20%, #5EB0E525, #0000 70%),radial-gradient(at 20% 20%, #F3D06025, #0000 70%),radial-gradient(at 20% 100%, #A5282C25, #0000 70%),radial-gradient(at 100% 100%, #AEE1CD25, #0000 70%);
  background-blend-mode: darken;
}
/* 梦幻糖果 */
.bg-gradient-holographicaurora {
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  background-image: radial-gradient(49% 81% at 45% 47%, #03FF6D45 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #F8DDD4 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #FAE5F4 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #71CEEBFF 0%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #E583B9 0%, #AC23D7FF 100%);
}
/* 皇家海绿 */
.bg-img-royalheath{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/01.-Royal-Heath.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 蛋汤 */
.bg-img-eggsour{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/02.-Egg-Sour.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 雪月 */
.bg-img-snowymint{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/03.-Snowy-Mint.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 跳草 */
.bg-img-hopbush{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/04.-Hopbush.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
.bg-img-flax{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/05.-Flax.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 紫藤 */
.bg-img-wisteria{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/06.-Wisteria.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 泰坦蓝 */
.bg-img-tidal{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/07.-Tidal.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 紫罗兰蓝 */
.bg-img-violetblue{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/08.-Violet-Blue.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
.bg-img-lightsky{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/09.-Light-Sky-Blue.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 明Dar */
.bg-img-mindaro{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/10.-Mindaro.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* 紫红色 */
.bg-img-fuchsia{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/11.-Fuchsia.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* umblingweed */
.bg-img-tumblingweed{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/12.-Tumbleweed_1.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* Violet Red */
.bg-img-violetred{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/13.-Pale-Violet-Red_1.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* Prim */
.bg-img-prim{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/14.-Prim.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* Perfume */
.bg-img-perfume{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/15.-Perfume.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
.bg-img-purple{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/16.-Medium-Purple_1.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
.bg-img-darksalmon{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/17.-Dark-Salmon.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* Buttercup */
.bg-img-buttercup{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/18.-Buttercup.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
.bg-img-cancan{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/19.-Can-Can_1.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}
/* Melanie */
.bg-img-melanie{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/20.-Melanie.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}

/* Columbia Blue */
.bg-img-columbiablue{
  --bg-size:100% 100%;
  --bg-position:0px 0px;
  background: url('https://products.ls.graphics/mesh-gradients/images/21.-Columbia-Blue_1.jpg') no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
}

/* 动态背景 - VortexFade */
.bg-vortexfade {
  position: relative; /* 建立定位上下文 */
  overflow: hidden;   /* 防止子元素溢出 */
}

.bg-vortexfade .drive,
.bg-vortexfade .shadows {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; /* 可选：防止遮挡交互 */
}

.bg-vortexfade .drive li,
.bg-vortexfade .shadows li {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;      /* 改为 100% 宽高（相对于容器） */
  height: 100%;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

/* .drive 的样式 */
.bg-vortexfade .drive li {
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1% 3% rgba(0, 0, 0, 0.5) inset; /* 注意：这里也改用 % */
  animation-name: vortexfade-drive;
}

/* .shadows 的样式 */
.bg-vortexfade .shadows li {
  background: #000;
  animation-name: vortexfade-shadows;
}

/* 动画延迟（保持不变，但加前缀） */
.bg-vortexfade .drive li:nth-child(1),
.bg-vortexfade .shadows li:nth-child(1) { animation-delay: 0s; }
.bg-vortexfade .drive li:nth-child(2),
.bg-vortexfade .shadows li:nth-child(2) { animation-delay: -1s; }
.bg-vortexfade .drive li:nth-child(3),
.bg-vortexfade .shadows li:nth-child(3) { animation-delay: -2s; }
.bg-vortexfade .drive li:nth-child(4),
.bg-vortexfade .shadows li:nth-child(4) { animation-delay: -3s; }
.bg-vortexfade .drive li:nth-child(5),
.bg-vortexfade .shadows li:nth-child(5) { animation-delay: -4s; }
.bg-vortexfade .drive li:nth-child(6),
.bg-vortexfade .shadows li:nth-child(6) { animation-delay: -5s; }
.bg-vortexfade .drive li:nth-child(7),
.bg-vortexfade .shadows li:nth-child(7) { animation-delay: -6s; }
.bg-vortexfade .drive li:nth-child(8),
.bg-vortexfade .shadows li:nth-child(8) { animation-delay: -7s; }
.bg-vortexfade .drive li:nth-child(9),
.bg-vortexfade .shadows li:nth-child(9) { animation-delay: -8s; }
.bg-vortexfade .drive li:nth-child(10),
.bg-vortexfade .shadows li:nth-child(10) { animation-delay: -9s; }

/* 关键帧（无需改动，因为 transform 是相对自身的） */
@keyframes vortexfade-drive {
  0% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(0) rotate(-45deg);
  }
}

@keyframes vortexfade-shadows {
  0% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(0) rotate(-45deg);
    opacity: 0.25;
  }
}
.bg-clouds {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 注意：不要设置 background-color，否则 mix-blend-mode 无效 */
}
/* SVG 填满容器 */
.bg-clouds svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* 文字样式 */
.bg-clouds .clouds-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 100px/1.0 "Libre Franklin", sans-serif;
  font-weight: 900;
  color: #ffffff66; /* 等价于 #fff6 */
  letter-spacing: -5px;
  mix-blend-mode: overlay;
  text-shadow: 0 0 5px white;
  z-index: 1;
  pointer-events: none; /* 避免遮挡交互 */
}

/* 抽象旋流动画背景 */
.bg-abstract-spin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-abstract-spin svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* 动画定义 */
@keyframes abstract-spin-rotate {
  100% {
    transform: rotate(360deg);
  }
}
.bg-abstract-spin .out-top {
  animation: abstract-spin-rotate 20s linear infinite;
  transform-origin: 13px 25px;
}
.bg-abstract-spin .in-top {
  animation: abstract-spin-rotate 10s linear infinite;
  transform-origin: 13px 25px;
}
.bg-abstract-spin .out-bottom {
  animation: abstract-spin-rotate 25s linear infinite;
  transform-origin: 84px 93px;
}
.bg-abstract-spin .in-bottom {
  animation: abstract-spin-rotate 15s linear infinite;
  transform-origin: 84px 93px;
}
/* 字体（全局加载一次即可） */
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap");

/* 主容器 */
.bg-balloon-celebration {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(white, #e0d1d1);
  box-shadow: inset 0 5% 30% 5% #d6c2c2;
  font-family: "Share Tech Mono", monospace;
  color: white;
  font-size: 2rem;
}

/* 背景光晕（用 % 替代 vh） */
.bg-balloon-celebration::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #ffffff 40%, #e0d1d1);
  transform-origin: 50% 100%;
  transform: scaleY(1.5) scaleX(1);
  opacity: 0.5;
  z-index: 1;
}

/* 中央文字 */
.bg-balloon-celebration .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 0.9;
  z-index: 3;
}

.bg-balloon-celebration h1 {
  font-size: 10rem;
  margin: 0;
  padding: 0;
  color: #ff6666;
}

.bg-balloon-celebration h2 {
  font-size: 8rem;
  margin: 0;
  padding: 0;
  color: #ff6666;
}

.bg-balloon-celebration h1,
.bg-balloon-celebration h2 {
  text-shadow: 0 4rem 2rem rgba(140, 115, 115, 0.2);
}

/* 气球通用样式 */
.bg-balloon-celebration .balloon {
  position: absolute;
  bottom: 0; /* 起始在容器底部 */
  left: 50%;
  width: 5rem;
  height: 5rem;
  background: #faf9f9;
  border-radius: 10rem 10rem 4rem 10rem;
  transform: rotate(45deg);
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);
  opacity: 0.95;
}

/* 气球尾巴 */
.bg-balloon-celebration .balloon::after {
  content: '';
  position: absolute;
  bottom: -0.05rem;
  right: -0.05rem;
  border: 0.5rem solid transparent;
  border-right-color: #dbbdbd;
  border-radius: 1rem;
  transform: rotate(45deg);
}

/* ———————— 动画定义（容器化） ———————— */

@keyframes float-back-1 {
  to {
    transform: rotate(50deg) translateY(-100%) translateX(-100%);
  }
}
@keyframes float-back-2 {
  to {
    transform: rotate(45deg) translateY(-100%) translateX(-100%);
  }
}
@keyframes float-back-3 {
  to {
    transform: rotate(35deg) translateY(-100%) translateX(-100%);
  }
}

@keyframes float-front-1 {
  to {
    transform: scale(1.3) rotate(50deg) translateY(-120%) translateX(-120%);
  }
}
@keyframes float-front-2 {
  to {
    transform: scale(1.3) rotate(45deg) translateY(-120%) translateX(-100%);
  }
}
@keyframes float-front-3 {
  to {
    transform: scale(1.3) rotate(35deg) translateY(-100%) translateX(-120%);
  }
}

/* 后层气球 */
.bg-balloon-celebration .holder.back {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bg-balloon-celebration .holder.back .balloon {
  /* 初始位置由 left 控制，bottom 已设为 0 */
  transform-origin: center;
}

.bg-balloon-celebration .holder.back .balloon:nth-child(1) {
  left: 50%;
  animation: float-back-2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 0s;
}
.bg-balloon-celebration .holder.back .balloon:nth-child(2) {
  left: 20%;
  animation: float-back-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 3.2s;
}
.bg-balloon-celebration .holder.back .balloon:nth-child(3) {
  left: 90%;
  animation: float-back-3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 7.7s;
}
.bg-balloon-celebration .holder.back .balloon:nth-child(4) {
  left: 70%;
  animation: float-back-1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 1.3s;
}
.bg-balloon-celebration .holder.back .balloon:nth-child(5) {
  left: 35%;
  animation: float-back-2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 5.6s;
}

/* 前层气球（更大、阴影更强） */
.bg-balloon-celebration .holder.front {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.bg-balloon-celebration .holder.front .balloon {
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 8rem 8rem 4rem rgba(153, 102, 102, 0.2);
}

.bg-balloon-celebration .holder.front .balloon:nth-child(1) {
  left: 80%;
  animation: float-front-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 2.8s;
}
.bg-balloon-celebration .holder.front .balloon:nth-child(2) {
  left: 35%;
  animation: float-front-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 1.4s;
}
.bg-balloon-celebration .holder.front .balloon:nth-child(3) {
  left: 7%;
  animation: float-front-3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 7.7s;
}
.bg-balloon-celebration .holder.front .balloon:nth-child(4) {
  left: 46%;
  animation: float-front-2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 6.3s;
}
.bg-balloon-celebration .holder.front .balloon:nth-child(5) {
  left: 75%;
  animation: float-front-1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  animation-delay: 8.9s;
}

/* 包裹容器：提供居中和尺寸上下文 */
.bg-caterpillar {
  --caterpillar-color: #FABEAB;
  /* 毛毛虫基础尺寸 */
  --caterpillar-size: 50px;
  --caterpillar-height: 80px;
  --caterpillar-border: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #F4E7CA; /* 可选：背景色移到 wrapper */
}

/* 毛毛虫主体 */
.bg-caterpillar .caterpillar-animated {
  position: relative; /* 关键：相对于 wrapper */
  animation: move 4s ease-in-out infinite;
  filter: 
    drop-shadow(120px 0 0 var(--caterpillar-color))
    drop-shadow(240px 0 0 var(--caterpillar-color))
    drop-shadow(480px 0 0 var(--caterpillar-color))
    drop-shadow(960px 0 0 var(--caterpillar-color))
    drop-shadow(-1920px 0 0 var(--caterpillar-color))
    drop-shadow(60px 80px 0 var(--caterpillar-color))
    drop-shadow(0 160px 0 var(--caterpillar-color))
    drop-shadow(0 320px 0 var(--caterpillar-color))
    drop-shadow(0 640px 0 var(--caterpillar-color))
    drop-shadow(0 -1280px 0 var(--caterpillar-color));
}

/* 触角（左） */
.bg-caterpillar .caterpillar-animated::before {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  left: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  transform: translateX(-100%);
  animation: bg-caterpillar-reach 1s ease-in-out infinite alternate;
}

/* 触角（右） */
.bg-caterpillar .caterpillar-animated::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  right: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  transform: translateX(100%);
  animation: bg-caterpillar-reach 1s ease-in-out infinite alternate;
}

/* 身体中心 */
.bg-caterpillar .caterpillar-animated .center {
  width: var(--caterpillar-size);
  height: var(--caterpillar-height);
  border: var(--caterpillar-border) solid var(--caterpillar-color);
  border-radius: 999px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(50% - 10px),
    0 calc(50% - 10px)
  );
  animation: bg-caterpillar-spring 1s ease-in-out infinite alternate;
}

/* ———————— 动画定义 ———————— */

@keyframes bg-caterpillar-spring {
  0%, 10% {
    width: 45px;
    height: 110px;
  }
  90%, 100% {
    width: 60px;
    height: 80px;
  }
}

@keyframes bg-caterpillar-reach {
  0% { width: 10px; }
  100% { width: 20px; }
}

@keyframes bg-caterpillar-move {
  0%, 2% { transform: translateX(0); }
  23%, 27% { transform: translateX(30px); }
  48%, 52% { transform: translateX(60px); }
  73%, 77% { transform: translateX(90px); }
  98%, 100% { transform: translateX(120px); }
}
/* 珍珠微光 */
.bg-pearlshimmer {
  background-image: linear-gradient(
    in oklch longer hue to right,
    oklch(0.93 0.03 0),
    oklch(0.93 0.03 1)
  );
  background-size: 200% 100%; 
  background-repeat: repeat;
  background-position: 0% 50%; /* 初始位置 */
  color: PaleVioletRed;
  -webkit-animation-name: anim_pearl_flow;
          animation-name: anim_pearl_flow;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@keyframes anim_pearl_flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@-webkit-keyframes anim_pearl_flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}




/*文字特效*/
.text-neonglow {
  color: #ffffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff,
    0 0 30px #00ffff;
  animation: neonFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes neonFlicker {
  0% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff,
      0 0 30px #00ffff;
  }

  100% {
    text-shadow: 0 0 2px #00ffff, 0 0 5px #00ffff, 0 0 10px #00ffff,
      0 0 15px #00ffff;
  }
}

.text-3Dlayers {
  color: #1e293b;
  text-shadow: 1px 1px 0 #94a3b8, 2px 2px 0 #64748b, 3px 3px 0 #475569,
    4px 4px 0 #334155, 5px 5px 0 #1e293b, 6px 6px 0 #0f172a,
    7px 7px 15px rgba(0, 0, 0, 0.3);
}

.text-fireeffect {
  color: #ff4500;
  text-shadow: 0 0 5px #ff6500, 0 -2px 10px #ff8500, 0 -4px 15px #ffa500,
    0 -6px 20px #ffbf00, 0 -8px 25px #ffdf00, 0 -10px 30px #ffff00;
  animation: fireFlicker 0.2s ease-in-out infinite;
}

@keyframes fireFlicker {

  0%,
  100% {
    text-shadow: 0 0 5px #ff6500, 0 -2px 10px #ff8500, 0 -4px 15px #ffa500,
      0 -6px 20px #ffbf00, 0 -8px 25px #ffdf00, 0 -10px 30px #ffff00;
  }

  50% {
    text-shadow: 0 0 8px #ff6500, -1px -3px 12px #ff8500, 1px -5px 18px #ffa500,
      -1px -7px 22px #ffbf00, 1px -9px 28px #ffdf00, 0 -12px 35px #ffff00;
  }
}

.text-chromatic {
  color: #1e293b;
  text-shadow: -3px 0 0 #ef4444, 3px 0 0 #06b6d4;
}

.text-retrogaming {
  color: #10b981;
  text-shadow: 3px 0 0 #1e293b, 0 3px 0 #1e293b, -3px 0 0 #1e293b,
    0 -3px 0 #1e293b, 6px 6px 0 #ef4444, 6px 6px 8px rgba(0, 0, 0, 0.3);
  font-family: monospace;
  font-weight: 900;
}

.text-letterpress {
  color: #334155;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 1), -1px -1px 0 rgba(0, 0, 0, 0.4),
    1px 1px 4px rgba(0, 0, 0, 0.2);
}

.text-multicolour {
  color: #ffffff;
  text-shadow: 1px 1px 0 #ff0066, 2px 2px 0 #ff3300, 3px 3px 0 #ff9900,
    4px 4px 0 #ffcc00, 5px 5px 0 #66ff00, 6px 6px 0 #00ff66, 7px 7px 0 #00ccff,
    8px 8px 0 #0066ff, 9px 9px 0 #6600ff, 10px 10px 20px rgba(0, 0, 0, 0.4);
}

.text-digitalerror {
  color: #1e293b;
  text-shadow: 2px 0 0 #ef4444, -2px 0 0 #06b6d4;
  animation: glitchJump 0.3s infinite;
}

@keyframes glitchJump {

  0%,
  14%,
  15%,
  49%,
  50%,
  99%,
  100% {
    text-shadow: 2px 0 0 #ef4444, -2px 0 0 #06b6d4;
    transform: translate(0);
  }

  1%,
  48%,
  51%,
  98% {
    text-shadow: 4px 0 0 #ef4444, -4px 0 0 #06b6d4;
    transform: translate(-1px, 1px);
  }
}

.text-longshadow {
  color: #f59e0b;
  text-shadow: 2px 2px 0 #d97706, 4px 4px 0 #b45309, 6px 6px 0 #92400e,
    8px 8px 0 #78350f, 10px 10px 0 #451a03, 15px 15px 0 #1c0a00,
    20px 20px 30px rgba(0, 0, 0, 0.4);
}

.text-outline {
  color: #fbbf24;
  text-shadow: -2px -2px 0 #1e293b, 2px -2px 0 #1e293b, -2px 2px 0 #1e293b,
    2px 2px 0 #1e293b;
}

.text-holographic {
  color: transparent;
  background: linear-gradient(45deg,
      #06b6d4,
      #8b5cf6,
      #ec4899,
      #f59e0b,
      #06b6d4);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.4), 0 0 20px rgba(139, 92, 246, 0.3),
    0 0 30px rgba(236, 72, 153, 0.2);
  animation: holographicShift 4s ease-in-out infinite;
}

@keyframes holographicShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.text-softblur {
  color: #1e293b;
  text-shadow: 0 0 20px #8b5cf6, 0 0 40px #8b5cf6,
    0 0 60px rgba(139, 92, 246, 0.4);
}

.text-radiance {
  background: url(../images/rainbow-gif-tumblr-6.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;
}

.text-icecream {
  letter-spacing: 5px;
  color: #78452e;
  text-shadow: -1px 0 0 #3c261c, -4px 0 0 #d0b4a7, -6px 0 0 #78452e,
    -8px 0 0 #3c261c;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
}

.text-hamburger {
  letter-spacing: 5px;
  transition: all 0.5s ease-in-out;
  color: #e1b38e;
  text-shadow: -1px 1px 0 #9a653b, -2px 2px 0 #9a653b, -6px 1px 0 #690,
    2px 4px 0 #a10, -3px 3px 0 #e1b38e, -4px 4px 0 #9a653b, -5px 5px 0 #9a653b;
}

.text-neon {
  text-shadow: 0 -1px 0 #f00, 0 2px 0 #f00, 0 4px 0 #60f, -2px -2px 15px #f06,
    2px -2px 15px #f06, -2px 2px 15px #f06, 2px 2px 15px #f06;
}

.text-disco {
  letter-spacing: 10px;
  text-shadow: -2px 2px 0 #292322, -4px 4px 0 #f60, -6px 6px 0 #292322,
    -8px 8px 0 #fc0;
  text-transform: uppercase;
}

.text-bevel {
  letter-spacing: 6px;
  text-shadow: 0 -3px 0 #ddd, 0 3px 0 #111, -3px 0 #666, 3px 0 #666,
    -3px -3px 0 #999, 3px -3px 0 #999, 3px 3px 0 #333, -3px 3px 0 #333;
  text-transform: uppercase;
}

/* 特殊文字字体 */
.text-monoton {
  font-family: Monoton;
}

.text-iceland {
  font-family: Iceland;
}

.text-pacifico {
  font-family: Pacifico;
}

.text-pressstart {
  font-family: PressStart;
}

.text-audiowide {
  font-family: Audiowide;
}

.text-vampiroone {
  font-family: "Vampiro One";
}

.text-fredokaone {
  font-family: "Fredoka One";
}

.text-dawning {
  font-family: "Dawning of a New Day";
}

.text-sniglet {
  font-family: "Sniglet";
}

/* 百度地图 */
[type="infowindow_shadow"] {
    display: none !important;
}
.BMap_bubble_top{
    height: 0px !important;
}

/* 加载器 */
/* HTML: <div class="loader"></div> */
.loader-waves {
  width: fit-content;
  font-size: 40px;
  line-height: 1.5;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px rgb(var(--primary-hue-500));
  background:
    radial-gradient(1.13em at 50% 1.6em, rgba(var(--primary-hue-500) / 1) 99%, #0000 101%) calc(50% - 1.6em) 0 / 3.2em 100% text,
    radial-gradient(1.13em at 50% -0.8em, #0000 99%, rgba(var(--primary-hue-500) / 1) 101%) 50% .8em / 3.2em 100% repeat-x text;
  animation: loader-waves 2s linear infinite;
}
.loader-waves:before {
  content: "Loading";
}
@keyframes loader-waves {
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}
/* HTML: <div class="loader"></div> */
.loader-whirlwind {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: rgb(var(--secondary-hue-200)) #0000;
  animation: loader-whirlwind 1s infinite linear;
}
.loader-whirlwind::before,
.loader-whirlwind::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader-whirlwind::before {
  border-color: rgb(var(--primary-hue-500)) #0000;
  animation: inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.loader-whirlwind::after {
  margin: 8px;
}
@keyframes loader-whirlwind { 
  100%{transform: rotate(1turn)}
}

.loader-shadowring {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--primary-hue-500));
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: loader-shadowring 1s infinite linear;
}
@keyframes loader-shadowring {to{transform: rotate(1turn)}}
/* HTML: <div class="loader"></div> */
.loader-scatterplotrotation {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader-scatterplotrotation::before,
.loader-scatterplotrotation::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,rgb(var(--primary-hue-500)) 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: loader-scatterplotrotation 1s infinite;
}
.loader-scatterplotrotation::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes loader-scatterplotrotation { 
  100%{transform: rotate(.5turn)}
}


.loader-innerringslider {
  width: 80%;
  height: 16px;
  border-radius: 16px;
  color: rgb(var(--primary-hue-500));
  border: 2px solid;
  position: relative;
}
.loader-innerringslider::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: loader-innerringslider 5s infinite;
}
@keyframes loader-innerringslider {
    100% {inset:0}
}

.loader-line {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(rgb(var(--primary-hue-500)) 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: loader-line 1.1s infinite linear;
}
@keyframes loader-line {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}

.loader-fill {
  position: relative;
  width: 2em;
  height: 2em;
  border: 3px solid rgb(var(--primary-hue-500));
  overflow: hidden;
  animation: loader-fill-spin 3s ease infinite;
}

.loader-fill::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 2em;
  height: 2em;
  background-color: rgb(var(--secondary-hue-200));
  transform-origin: center bottom;
  transform: scaleY(1);
  animation: loader-fill 3s linear infinite;
}

@keyframes loader-fill-spin {
  50%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-fill {
  25%,
  50% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}