body {
    margin: unset;
    background-image: url('/static/images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    /* 使背景图像固定在视口中 */
    background-attachment: fixed;
}

button {
    border-style: unset;
}

#app {
}

div {
    box-sizing: border-box;
}

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

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

.align-content {
    align-content: center;
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.center {
    justify-content: center;
}
.start {
    justify-content: start;
}

.flex-container {
    display: flex;
    align-items: center;      /* 垂直居中 */
    justify-content: space-between;  /* 内容水平居中 */
    position: relative;       /* 创建定位上下文 */
    width: 100%;              /* 占满容器宽度 */
}

.forgot-password-btn {
    margin-left: auto;        /* 自动占用剩余空间，推到最右侧 */
    flex-shrink: 0;           /* 防止按钮被压缩 */
}


.castStarDialog {
    background: linear-gradient(45deg, rgba(111, 97, 165), rgba(128, 114, 182));
}

.castStarDialog .el-dialog__title,
.castStarDialog .el-icon-close,
.castStarDialog .el-textarea__inner {
    color: #fff;
}

/* 星星飞向深处的动画 */
@keyframes fly-to-depth {
    0% {
        opacity: 1;
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3); /* 起始光晕 */
    }
    100% {
        transform: translateY(-200%) scale(0.1); /* 向屏幕上方飞，缩小 */
        opacity: 0; /* 消失 */
        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.8); /* 最终光晕几乎消失 */
    }
}

/* 控制弹窗显示 */
.castStarDialog.cast-star-in {

}

.castStarDialog.cast-star-out {
    animation: fly-to-depth 1s ease-in forwards; /* 向深处飞行并逐渐消失 */
}

.el-dialog .el-icon-close {
    font-size: 22px;
}

.container {
    width: 100%;
    height: 100%;
}

.el-dialog {
    border-radius: 20px;
    box-shadow: 0 4px 12px rgb(0, 0, 0); /* 添加阴影效果 */
}

.el-dialog .el-input__inner {
    border-radius: 10px;
}


.submitbtn {
    background: linear-gradient(45deg, #c8ccdc, #bfcdd5);
}

.messages {
    flex-grow: 0;
    background-color: rgba(0, 0, 0, 0.21);
    width: 10%;
    max-width: 70px;
    margin: 20px;
    border-radius: 15px;

    flex-direction: column;
    justify-content: start;
}

.officialTag::before {
    content: '官方客服';
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: #ff4d4d;
    color: #fff;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
}

.avatar {
    position: relative;
    border-radius: 5px;
    width: 85%;
    height: 50px;
    margin: 10px;
    background-color: rgba(44, 18, 136, 0.43);
    cursor: pointer;
    overflow: visible; /* 确保超出内容可见 */
}

.avatar-nickname {
    color: #fadc9f;
}

.avatar-new::before {
    z-index: 3;
    content: attr(data-tip);
    position: absolute;

    width: 10px;
    height: 10px;
    background: red;
    color: #fff;

    border-radius: 50%;
    font-size: 7px;
    line-height: 7px;

    top: 0%;
    right: 0%;
    transform: translate(30%, -30%); /* 初始位置 */

    display: flex; /* 使用 flex 布局让内容对齐顶部 */
    align-items: flex-start; /* 内容顶部对齐 */
    justify-content: center; /* 水平居中对齐 */
    box-sizing: border-box;
}

.starsea {
    height: 70vh;
    width: 100%;
    margin-top: 80px;
    margin-right: 100px;

}

.ellipsis {
    display: inline-block;
    width: 50px; /* 这里可以设置一个具体的最大宽度 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 用 '...' 代替超出部分 */
}

.bottongroup {
    z-index: 1000;
    position: absolute;
    flex-direction: column;
    bottom: 0;
    right: 0;
}

.btn {
    flex-direction: column;
    border-radius: 50%;
    color: wheat;

    min-width: 80px;
    min-height: 80px;
    margin: 0 60px;
    margin-bottom: 60px;

    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
}

.btn:hover {
    box-shadow: 0 4px 12px rgb(0, 0, 0); /* 添加阴影效果 */
    transform: scale(1.05); /* 放大按钮，1.1表示放大10% */
}


.btn2 {
    flex-direction: column;
    border-radius: 50%;
    color: wheat;

    min-width: 80px;
    min-height: 80px;
    margin: 0 60px;
    margin-bottom: 60px;

    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
}

.btn2:hover {
    transform: scale(1.05); /* 放大按钮，1.1表示放大10% */
}


/* 文本样式 */
.btn text {
    font-weight: bold; /* 加粗文字 */
}

.cast-button {
    background: linear-gradient(45deg, #4f62b0, #619eb8);
}

.load-button {
    background: linear-gradient(45deg, #7b5b7a, #c06c84);
}

.loginout {
    width: 50px;
    height: 50px;
    position: fixed; /* 固定定位 */
    top: 30px; /* 距离顶部 0 像素 */
    right: 0; /* 距离右边 0 像素 */
    z-index: 9999; /* 确保元素在其他内容之上（可选） */
    background: linear-gradient(45deg, #b0ae4f, #77b861);
}

.avatar-uploader {
    line-height: 12px;
    --size: 60px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader .avatar-uploader-icon {
    font-size: 24px;
    color: #8c939d;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
}

.avatar-uploader .avatar {
    width: var(--size);
    height: var(--size);
    display: block;
    margin: 2px;
}

.logout {
    width: 55px;

    position: fixed; /* 固定定位 */
    top: 30px; /* 距离顶部 0 像素 */
    right: 0; /* 距离右边 0 像素 */
    z-index: 9999; /* 确保元素在其他内容之上（可选） */
}

.navbar {
    position: fixed;
    left: 20px;
    z-index: 1000;
    top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-item {
    position: relative;
    width: fit-content;
    font-weight: bold;
    opacity: 1;
}

.nav-item a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

.nav-item a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-item.active a::after,
.nav-item:hover a::after {
    width: 100%;
    left: 0;
}

.tips-dialog .el-dialog {
    background-image: url("../images/home/guide_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 696px;
    width: 100%;
}

.tips-dialog .el-dialog__body {
    padding: 210px 40px 30px;
}

.tip {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 15px auto;
    --size: 100px;
}

.tipIcon {
    position: absolute;
    left: 10px;
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    background-color: #a96cdc;
    border: 5px solid #F5BE90;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tipMsg {
    margin-left: var(--size)/2;
    width: 95%;
    height: var(--size);
    background-color: #fcecd4;
    border-radius: 100px 30px 30px 100px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tipMsg .msgContent {
    margin-left: var(--size);
    font-size: 12px;
    height: 100%;
}

.msgContent .msgTitle {
    font-size: 16px;
    font-weight: bold;
    color: #5d439d;
    margin-bottom: 5px;
}

.tipFlag {
    font-weight: bold;
    font-size: 20px;
    color: #5d439d;
    margin: 0 30px;
    text-align: right;
    cursor: pointer;
    width: fit-content;
    float: right;
}

.tipFlag:hover {
    scale: 1.05;
}

.gold-display {
    display: flex;
    align-items: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    cursor: pointer;
}

.gold-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.gold-amount {
    font-size: 13px;
    margin-right: 2px;
    color: white;
    transition: font-size 0.5s, color 0.5s;
}

.gold-amount.changed {
    font-size: 18px;
    color: #fff093;
}

.add-button {
    color: #fff;
    border-radius: 50%;
    margin: 0 2px;
    font-weight: bold;
    font-size: 10px
}


.appHint {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    cursor: pointer;
    color: #fff;
    margin-left: 20px;
}


.exchange-dialog .el-dialog {
    background-image: url("../images/home/exchangeBg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.goldCharge {
    min-height: 150px;
    width: 100%;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(110, 108, 136, 0.7), rgba(189, 201, 211, 0.70));
}

.c-problem-box {
    background: linear-gradient(rgba(102, 51, 153, 0.32), rgba(102, 51, 153, 0.45));
    border-radius: 10px;
    width: 85%;
    margin: 10px auto;
    padding: 10px;
}

.c-problem-question {
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.c-problem-answer {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.bg-red {
    background-color: #ff4d4d;
}

.bg-purple {
    background-color: #9c27b0;
}

.exTitle {
    margin: 25px auto;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    font-size: 14px;
}

.exTitle .t1 {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 3px;
    background: linear-gradient(90deg, #c79e00, #957400, #634d00);
    color: white;
    font-weight: bold;
    left: -16px;
    position: absolute;
    box-shadow: 4px 4px 5px rgba(199, 158, 0, 0.3);
}

.exTitle .t2 {
    font-weight: 500;
    color: white;
}

.exChoiceBox {
    width: 100%;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.exChoiceItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 1;
    vertical-align: middle;
    margin: 0 12px;
    cursor: pointer;
}

.exChoiceItem:hover {
    scale: 1.05;
}

.cutag {
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 8px;
    height: 28px;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
}

.exChoiceItem .cnt {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(222, 222, 250, 0.1);
    background-color: rebeccapurple;
    color: white;
    flex-shrink: 1;
    z-index: 1;
    margin-right: -2px;

}

.exChoiceItem .price {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: yellow;
    box-shadow: 0 2px 8px rgba(248, 230, 209, 0.1);
    border: 1px solid #f5f587;
    padding: 2px 8px;
}

/*充值弹框*/

.c-drawer {
    background-color: #EEE;
    background-image: url("../images/home/chargehd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 30px 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.c-drawer.trans{
    display: flex;
    flex-direction: column;
}

.el-drawer__body {
    position: relative;
}

.el-drawer__body .navbar {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 30px;
    width: 100%;
    background-image: url("../images/home/chargehd.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 20px;
    margin-top: 0;
}

.el-drawer__body .nav-list {
    width: 100%;
}

.c-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    text-align: left;
    margin-top: 32px;
    margin-bottom: 30px;
    color: #FFF8DB;
    background-color: transparent;
}

.c-title {
    font-size: 18px;
    font-weight: bold;
}

.charge-dialog .el-dialog {
    /*background: linear-gradient(30deg, #482f8e, #5d439d);*/
    background-color: #EEE;
    background-image: url("../images/home/chargehd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

.c-balance-info-group {
    gap: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.c-balance-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-balance {
    font-size: 16px;
    display: flex;

}

.c-balance-detail {
    font-size: 12px;
    color: rgba(255, 248, 219, 0.55);
}

.line-black {
    height: 1px;
    width: calc(100% - 30px);
    background-color: #7D8ABC;
    margin: 10px auto;
}

.c-section {
    margin-bottom: 15px;
}

.c-section-title {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #393053;
}

.c-membership {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-bottom: 15px;
}

.c-membership-button {
    background-color: #00bfa5;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
}

.charge-options {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.charge-item {
    flex-basis: 27%;
    background-color: #fff;
    border-radius: 10px;
    padding: 11px;
    margin: 5px;
    text-align: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer
}

.charge-item:hover {
    scale: 1.05;
}

.charge-item.active {
    background-color: #C8ACD6;
    color: #fff;
}

.discount::before {
    content: attr(data-discountInfo);
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #ff4d4d;
    color: #fff;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
}

.charge-amount {
    font-size: 13px;
    margin-bottom: 5px;
}

.charge-price {
    font-size: 17px;
    color: #00bfa5;
}

.active .charge-price {
    color: #55ffff;
}

.charge-remark {
    margin-top: 7px;
    margin-bottom: -5px;
    font-size: 10px;
    color: #807c8a;
}

.c-original-price {
    font-size: 12px;
    color: #888;
    text-decoration: line-through;
}

.c-agreement {
    text-align: center;
    margin-top: 10px;
}

.c-agreement-text {
    font-size: 12px;
    color: #888;
}

.contract {
    color: #4380b9;
}

.contract:hover {
    text-decoration-line: underline;
    cursor: pointer;
}

.c-ad-button {
    margin: 20px auto;
    color: #fff;
    border-radius: 20px;
    width: 80%;
    font-size: 17px;
    display: block;
    text-align: center;
    background: linear-gradient(60deg, rgb(198, 162, 217) 0%, rgb(77, 72, 138) 100%);
}


.c-pay-button {
    box-sizing: content-box;
    display: block;
    margin: 20px auto 3px;
    width: 80%;
    color: #fff;
    border-radius: 20px;
    font-size: 17px;
    text-align: center;
    background: linear-gradient(60deg, rgb(198, 162, 217) 0%, rgb(77, 72, 138) 100%);
}

.c-pay-button:hover {
    scale: 1.02;
    /*border: #82d7f3 1px solid;*/
}

/* transaction history */
.c-drawer .el-form {
    margin-top: 20px;
    margin-left: 20px;
}

.c-drawer .el-form-item__label {
    color: white;
    font-weight: bolder;
    margin-right: 20px;
}

.c-drawer .el-radio-button__inner {
    font-size: 13px;
    box-shadow: unset;
}

.el-radio-button__inner:hover {
    color: #c487b0;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #c487b0;
    border-color: #c487b0;
    box-shadow: unset;
}

.transContent {
    margin-top: 20px;
    padding: 15px;
    height: 100%;
    overflow: auto;
}

.transItem {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    margin: 20px 0;
    padding: 15px;
}

.transItem .icon {
    width: 50px;
    height: 40px;
    fill: #ffcf74;
    stroke: #ffcf74;
    margin-right: 15px;
}

.transItem .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: gray;
    font-weight: bolder;
}

.transItem .right {
    display: flex;
    flex-direction: column;
    color: gray;
    font-weight: bold;
    min-width: 80px;
}

.transItem .state {
    color: gray;
}

.right .state.processing {
    color: #5ab295
}

.right .state.succeed {
    color: cornflowerblue;
}

.right .state.closed,
.right .state.failed {
    color: lightcoral;
}

.transContent .endTip {
    width: 100%;
    text-align: center;
    color: gray;
    opacity: 0.8;
    font-size: 12px;
}

.dropstar {
    z-index: 0;
    position: absolute;
    top: 0;
    width: 80%;
    height: 90vh;
    -webkit-transform: rotateZ(135deg);
    transform: rotateZ(135deg);
}

.shooting_star {
    position: absolute;
    /*left: 50%;*/
    /*top: 50%;*/
    height: 2px;
    /*background: linear-gradient(-45deg,  #5f91ff, rgba(0, 0, 255, 0));*/
    border-radius: 999px;
    /*filter: drop-shadow(0 0 6px  #5f91ff);*/

    animation: tail 3000ms 500ms ease-in-out, shooting 3000ms 500ms ease-in-out;
}

.shooting_star .before, .shooting_star .after {
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: shining 3000ms 500ms ease-in-out;
}

.shooting_star .after {
    -webkit-transform: translateX(50%) rotateZ(-45deg);
    transform: translateX(50%) rotateZ(-45deg);
}

@-webkit-keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}

@keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}

@-webkit-keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}

@-webkit-keyframes shooting {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
    }
}

@keyframes shooting {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
    }
}

/*星海*/
.star_sea {
    width: 95%;
}

.star_info {
    position: absolute;
    display: flex;
    align-items: end;
    justify-content: start;
}

.direction-reverse {
    flex-direction: row-reverse;
}

.image-mask {
    display: flex;
    position: relative;

    background-repeat: no-repeat;
    background-position: center;

    mask-size: cover;
    -webkit-mask-size: cover;
}

.official {
    background: linear-gradient(to right, rgba(255, 0, 0, 0.3), rgba(255, 165, 0, 0.3), rgba(255, 255, 0, 0.3), rgba(0, 128, 0, 0.3), rgba(0, 0, 255, 0.3), rgba(238, 130, 238, 0.3), rgba(255, 0, 0, 0.3));
    filter: blur(20px); /* 设置模糊半径为 10px，可以根据需要调整 */
    background-size: 300% 100%;
    animation: twinkle 5s ease-in-out infinite, star-nova 8s linear 0s forwards, stream 6s infinite linear;
}

.mask1 {
    animation: twinkle 3.5s ease-in-out infinite, star-nova 8s linear 0s forwards;
}

.mask2 {
    animation: twinkle 2.5s ease-in-out infinite, star-nova 8s linear 0s forwards;
}

.mask3 {
    animation: twinkle 5s ease-in-out infinite, star-nova 8s linear 0s forwards;
}

@keyframes twinkle {
    0% {
        opacity: 1;
    }
    25% {
        /* 随机的不透明度变化点 1 */
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    80% {
        /* 随机的不透明度变化点 2 */
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

@keyframes star-nova {
    0% {
        filter: brightness(200%);
        transform: scale(1.3);
    }
    100% {
        filter: brightness(100%);
        transform: scale(1);
    }
}

@keyframes stream {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -150% 0;
    }
}

.star-avatar {
    box-sizing: border-box;
    background-color: #2E236C; /* Semi-transparent black background */
    opacity: 0.9;
    border-radius: 7px; /* Adjust the value to get the desired roundness */
    border: 2px solid #433D8B;
    margin-left: 5px; /* Adjust as necessary */
    margin-right: 5px; /* Adjust as necessary */
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative; /* 相对定位 */
    overflow: hidden;
}

.star-avatar.membership {
    animation: border-flow 5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(252, 208, 98, 0.79))
}

.draggable {
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%); /* 将子元素的中心点移到视口的中心 */
    cursor: grab; /* 鼠标提示 */
    z-index: 2111;
}

@keyframes border-flow {
    0% {
        border-left-color: #433D8B;
        border-top-color: rgb(246, 206, 38)
    }
    25% {
        border-top-color: #433D8B;
        border-right-color: rgb(246, 206, 38)
    }
    50% {
        border-right-color: #433D8B;
        border-bottom-color: rgb(246, 206, 38)
    }
    75% {
        border-bottom-color: #433D8B;
        border-left-color: rgb(246, 206, 38)
    }
    100% {
        border-left-color: #433D8B;
        border-top-color: rgb(246, 206, 38)
    }

}

.scrolling-text {
    display: inline-block; /* 内联块级元素 */
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap; /* 防止文字换行 */

    color: #c8c8c8;
}

.scrolling-text.animation {
    animation-name: scrollText;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 7s;
}

@keyframes scrollText {
    0% {
        transform: translateX(0%); /* 从左侧完全离开 */
    }
    30% {
        transform: translateX(0%); /* 从左侧完全离开 */
    }
    100% {
        transform: translateX(-100%); /* 到达右侧完全离开 */
    }
}

.isMembership {
    /*background-image: -webkit-linear-gradient(45deg, #C8ACD6, #FFF8DB );*/
    font-weight: 550;
    background-image: linear-gradient(110deg, #C8ACD640, rgb(255, 223, 164, 55), #C8ACD6);
    -webkit-text-fill-color: transparent; /* 字体设置成透明色 */
    -webkit-background-clip: text; /* 裁剪背景，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    animation: backgroundShine 4s linear infinite;
}

@keyframes backgroundShine {
    from {
        background-position: 0, 0;
    }
    to {
        background-position: -200%, 0;
    }
}

.other-info {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 300px;

    background: linear-gradient(45deg, #472e8d, rgba(71, 46, 141, 0.82));
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%; /* 或者使用 contain，根据需要调整 */
    background-clip: content-box;
    box-sizing: border-box;
}

.other-item {
    box-sizing: border-box;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    padding: 5px 7px;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.other-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 25%;
    margin-right: 10px;
}

.avatar-tip {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-family: "黑体"; /* 设置字体为黑体 */
    font-size: 24px;
    color: #ffd0ec;

    border-radius: 10%;
    position: absolute; /* 固定定位 */

    right: 10px;
    top: 10px;
    margin-left: auto;

    height: 20px;
}

.row-flex {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
}

.nickname {
    font-size: 16px;
    color: #fff;
}

.column-flex {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

.online {
    position: relative; /* 固定定位 */
    margin-left: auto;
    width: 100%;
    height: 20px;
    bottom: -3px;
}

.online-img {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.online-img-offline {
    filter: grayscale(100%);
}

@keyframes blink {
    0% {
        background-color: green;
    }
    50% {
        background-color: transparent;
    }
    100% {
        background-color: green;
    }
}

.online-img-online {
    animation: blink 3s infinite;
}

.online-info {
    font-size: 1em;
    color: #ddd;
    white-space: nowrap;
}

.other-item {
    box-sizing: border-box;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    padding: 5px 7px;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.other-item-message {
    word-break: break-all;
    font-size: 16px;
    background-color: #392571;
    box-sizing: border-box;
    border-radius: 7px;
    min-height: 80px;
    margin: 3px;
    padding: 7px;
    color: #ddd;
}

.star-photo-group {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
}

.star-photo {
    width: 100%;
    margin-top: 7px;
    border-radius: 5px;
}

/* 点开星星的按钮 */
.button-other-group {
    box-sizing: border-box;
    width: 100%;
    padding: 5px 16px 12px 16px;
    display: flex;
    justify-content: space-between;
}

.btn-other {
    width: 100px;

    color: #f1e1ff;
    border-radius: 25px;
    text-align: center;
    line-height: 1.7;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}

.closeCastStarWindow {
    background-color: transparent;
    border: 1px solid #CCC;
}

.doCastStar {
    background: linear-gradient(45deg, #7135F2, #be8bf6);
}

.btn-searching {
    animation: animated-border 1s infinite, gradientMove 1s linear infinite;
    background-size: 100% 333%;
}

@keyframes animated-border {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 50% 0;
    }
    100% {
        background-position: 50% 100%;
    }
}

.cast-star {
    /*box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1), inset -3px -3px 3px rgba(255, 255, 255, 0.8);*/
    width: 100%;

    background: url("https://hhwhisper.online/photo/resource/cast_wind4.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 94% 90%;
    background-clip: content-box;

    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    left: 0;
    position: fixed;
    z-index: 200;
}

.cast-star-in {
    animation: 0.8s ease-in 0s alternate zoomOutDown;
}

.cast-star-out {
    animation: 0.6s ease-in 0s alternate zoomOutDown-out;
}

@keyframes zoomOutDown {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-2000px, 1000px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }

    50% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
}

@keyframes zoomOutDown-out {
    100% {
        opacity: 0.1;
        transform: scale3d(0.2, 0.7, 0) translateY(-90vh);
        animation-timing-function: cubic-bezier(0.00, 0.00, 0.81, 0.02);
        border-radius: 50%; /* 将元素变为圆形 */
    }
}

.reachLimit {
    color: red;
}

.textarea-container {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 65px;

    flex-grow: 1;
    color: #fff;

    line-height: normal;

    font-family: "SimHei", "Microsoft YaHei", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
}

.wishinput {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    padding: 0 7px 0 32px;
    text-shadow: 1px 1px 2px rgba(203, 203, 203, 0.94); /* 文字阴影 */
    box-sizing: border-box;
    word-wrap: break-word;
    z-index: 21;
}

.truncate {
    display: -webkit-box; /* 需要结合 -webkit-line-clamp 使用 */
    -webkit-box-orient: vertical; /* 设置盒子为垂直方向 */
    -webkit-line-clamp: 3; /* 显示的行数 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
}

.cast-photo-wrapper {
    padding-right: 20px;
    z-index: 208;
    display: flex;
}

.cast-photo {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 10%;
    z-index: 30;
}

.cast-photo::before {
    content: attr(data-hint);;
    position: absolute;
    background-color: #d99b6c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.button-container {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-evenly;
    margin: 15px;
}


/*dropstar*/

.castStarContainer {
    font-weight: bold;
    background-color: transparent;
}

.castStarContainer .el-textarea__inner {
    background-color: transparent;
}

.castStarContainer .el-input__count {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.76);
}

.castStarBtn {
    background: linear-gradient(30deg, rgba(131, 85, 209, 0.7), rgba(75, 25, 143, 0.7));
    margin-top: 30px;
    color: white;
}

.castStarBtn:hover {
    background: linear-gradient(30deg, #8355d1, #4b198f);
    color: white;
}

/*message*/
.message-dialog .el-dialog {
    background: linear-gradient(30deg, #482f8e, #5d439d);
}

.chat-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.el-dialog__body {
    padding-top: 0;
}

.chat-header span {
    margin-left: 10px;
    font-weight: bold;
}

.chat-window {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid rgb(246, 244, 244);
    border-radius: 8px;
    margin-bottom: 10px;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/static/images/message/planet.png");
    background-color: #9290C3;
}

.message {
    margin-bottom: 10px;
}

.userMe {
    color: #b94126;
    font-size: 1.1em;
    font-weight: bold;
}

.userHe {
    color: #2828a2;
    font-size: 1.1em;
    font-weight: bold;
}

.message-content {
    border: 1px solid #b94126;
    padding: 5px;
    display: inline-block;
    margin-top: 5px;
}

.other-message {
    text-align: left;
}

.my-message {
    text-align: right;
}

.my-message .message-content {
    background-color: #e0f7fa;
    border-color: rgba(76, 76, 238, 0.78);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.other-message .message-content {
    background-color: #f5e4e0;
    border-color: #f36363;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
}

.input-container {
    display: flex;
    align-items: center;
}

.input-box {
    flex: 1;
    margin-right: 10px;
}

.input-box input {
    background: #9290C3;
    border-radius: 10px;
    border: none;
    color: #fff;
}

.send-button {
    flex-shrink: 0;
    background: #9290C3;
    border: none;
    color: #473086;
    border-radius: 10px;
    height: 40px
}

.user-info {
    position: relative;
    background: linear-gradient(90deg,  rgb(67, 38, 89), rgba(128, 114, 182), rgb(67, 38, 89));
    border: 1px solid #ccc;
    color: #fff;
    padding: 13px;
    box-shadow: 0 0 8px rgb(237, 222, 243);
    border-radius: 5px;
    z-index: 100; /* 确保浮层显示在顶部 */
    min-width: 315px; /* 信息框宽度 */
    backdrop-filter: blur(10px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 为兼容性添加前缀 */
    opacity: 0.9;
    transition: all 0.2s;
}

.user-info-btn {
    cursor: pointer; /* 鼠标移入时指针变为可点击样式 */
    display: inline-block;
    transition: all 0.1s ease; /* 添加平滑过渡效果 */
}

.user-info-btn:hover {
    color: #fad487;
}

.user-info-detail .el-input.is-disabled .el-input__inner {
    color: #606266;
}
.only-show{
    font-size: inherit;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}