:root {
    --primary-color: #7b7ddb;
    --font-color: #333;
    --size-14: 14px;
    --size-16: 16px;
    --size-20: 20px;
    --size-24: 24px;
    --size-28: 28px;
    --size-32: 32px;
    --size-36: 36px;
    --size-40: 40px;
    --size-42: 42px;
    --size-48: 48px;
    --size-42: 42px;
    --size-100: 100px;
    --size-56: 56px;
}



.w-full{
    width:100%;
}
.h-full{
    height:100%
}
.h-screen {
    height: 100vh;
}



.flex{
    display:flex
}
.flex-col{
    flex-direction:column
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-1{
    flex:1
}
.items-center {
    align-items: center
}
.justify-between {
    justify-content: space-between;
}
.shrink-0{
    flex-shrink:0
}


.text-xs{
    font-size:12px;
}
.text-sm {
    font-size: var(--size-14);
    line-height: calc(1.25 / 0.875)
}
.text-xl {
    font-size: var(--size-20);
    line-height: calc(1.75 / 1.25);
}
.text-white{
    color: #fff
}
.text-2xl {
    font-size: var(--size-24);
    line-height: calc(2 / 1.5);
}
.text-center {
    text-align: center;
}

.cursor-pointer {
    cursor: pointer
}


.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 防止在 flex 布局中被压缩 */
}
/* 图标内容：图片、SVG 等自动填充 */
.icon > img{
    height: 100%;
    width: 100%;
}

.icon-size-20 {
    width: var(--size-20);
    height: var(--size-20);
}
.icon-size-24 {
    width: var(--size-24);
    height: var(--size-24);
}
.icon-size-28 {
    width: var(--size-28);
    height: var(--size-28);
}

.icon-size-32 {
    width: var(--size-32);
    height: var(--size-32);
}
.icon-size-36 {
    width: var(--size-36);
    height: var(--size-36);
}
.icon-size-40{
    width: var(--size-40);
    height: var(--size-40);
}
.icon-size-42 {
    width: var(--size-42);
    height: var(--size-42);
}
.icon-size-48 {
    width: var(--size-48);
    height: var(--size-48);
}

.font-bold-16 {
    font-size: var(--size-16);
    font-weight: bold;
    color: var(--font-color)
}
.font-bold-24 {
    font-size: var(--size-24);
    font-weight: bold;
    color: var(--font-color)
}
.font-bold-36 {
    font-size: var(--size-36);
    font-weight: bold;
    color: var(--font-color)
}

.font-bold-56 {
    font-size: var(--size-56);
    font-weight: bold;
    color: var(--font-color)
}
.font-bold-48 {
    font-size: var(--size-48);
    font-weight: bold;
    color: var(--font-color)
}

.font-bold-100 {
    font-size: var(--size-100);
    font-weight: bold;
    color: var(--font-color)
}


.hidden{
    display:none
}
.relative{
    position:relative
}
.absolute{
    position:absolute
}
.fixed {
    position: fixed
}


.overflow-hidden{
    overflow:hidden
}


.bg-white {
    background-color: #fff
}


/* bg 背景系列 */
.bg-linear-gradient {
    /* main background */
    background: linear-gradient( 180deg, rgba(123, 125, 219, 0.25), rgba(196, 196, 196, 0) 100% );
}
/* footer background */
.bg-footer-linear-gradient {
  background-color: linear-gradient(
    0deg,
    rgb(234, 233, 255),
    rgba(234, 233, 255, 0) 100%
  );
}

.bg-user-vip {
  background: linear-gradient(
    134.69deg,
    rgba(187, 227, 235, 1),
    rgba(246, 209, 236, 1) 99%
  );
}

.bg-Integral-text {
  background: linear-gradient(
    139.97deg,
    rgba(154, 120, 220, 1),
    rgba(207, 112, 222, 1) 9%,
    rgba(146, 121, 220, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  color: transparent;
}

.bg-main-linear {
  background: linear-gradient(
    111.8deg,
    rgba(216, 110, 222, 1),
    rgba(89, 0, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}