/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'XiaoKeNaLiaoTi';
    src: url('fonts/xiaokenailaoti.ttf') format('truetype');
}

body {
    font-family: 'ZCOOL KuaiLe', Arial, sans-serif; /* 使用Roboto字体 */
    background: radial-gradient(
        circle at center,
        rgba(40, 40, 40, 0.95) 0%,
        rgba(35, 35, 35, 0.95) 20%,
        rgba(32, 32, 32, 0.95) 40%,
        rgba(30, 30, 30, 0.95) 60%,
        rgba(28, 28, 28, 0.95) 80%,
        rgba(25, 25, 25, 0.95) 100%
    ); /* 使用径向渐变，更加平滑 */
    color: #ffffff;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.container {
    display: flex;
    width: 100%;
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.015) 25%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(255, 255, 255, 0.005) 75%,
        rgba(255, 255, 255, 0.001) 100%
    ); /* 更细腻的半透明渐变 */
}

/* 侧边栏样式 */
.sidebar {
    width: 150px; /* 初始宽度 */
    background-color: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(10px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: 50px; /* 收起时宽度 */
}

.logo img {
    width: 130%;
    margin-bottom: 20px;
    margin-left: -20px; /* 负值向左移动，数值可调 */
    transition: width 0.3s ease;
}

.sidebar.collapsed .logo img {
    width: 30px; /* 收起时缩小Logo */
}

.menu ul {
    list-style: none;
    width: 100%;
    padding: 0;
}

.menu li {
    margin-bottom: 10px;
}

.menu a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    position: relative;
}

.menu a i {
    min-width: 24px;
    text-align: center;
    margin-right: 10px;
}

.sidebar.collapsed .menu-text {
    display: none; /* 收起时隐藏文字 */
}

.menu a:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* 上传模型按钮样式 */
.upload-model-btn {
    padding: 8px 16px;
    background: linear-gradient(45deg, #6c63ff, #4834d4); /* 更改为紫色渐变 */
    color: #fff;
    text-align: center;
    border-radius: 8px;
    margin: 20px 0;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.2); /* 添加柔和阴影 */
    transition: all 0.3s ease;
}

.upload-model-btn:hover {
    background: linear-gradient(45deg, #4834d4, #6c63ff); /* 悬停时渐变方向改变 */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.3); /* 悬停时阴影加深 */
}

.upload-model-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* 小尺寸按钮样式 */
.upload-model-btn.small-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.upload-model-btn.small-btn i {
    font-size: 14px;
}

/* 我的按钮样式 */
.power-meter {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(41, 41, 41, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.power-meter img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease;
}

.sidebar.collapsed .power-meter img {
    width: 30px;
    height: 30px;
}

.power-meter span {
    font-size: 14px;
    color: #9e9e9e;
    transition: display 0.3s ease;
}

.sidebar.collapsed #myText {
    display: none; /* 收起时隐藏文字 */
}

.sidebar-toggle {
    position: absolute;
    top: 10px;
    right: -15px;
    background-color: rgba(41, 41, 41, 0.85);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101;  /* 确保按钮在最上层 */
    transition: transform 0.3s ease;
}

.sidebar-toggle i {
    color: #ffffff;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* 主内容区域样式 */
.content {
    width: calc(100% - 7%);
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(5px);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.01) 0%,
        rgba(255, 255, 255, 0.008) 25%,
        rgba(255, 255, 255, 0.005) 50%,
        rgba(255, 255, 255, 0.003) 75%,
        rgba(255, 255, 255, 0.001) 100%
    ); /* 更细腻的内容区域渐变 */
    position: relative;
    transition: width 0.3s ease;
}

.sidebar.collapsed + .content {
    width: calc(100% - 50px);
}

/* 轮播图优化 */
.carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.slides-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 400px;
    background: transparent;
}

.slide {
    min-width: 100%;
    background: transparent;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #ffffff;
    padding: 25px;
    max-width: 60%;
    background: transparent;
    pointer-events: none; /* 禁止鼠标事件 */
}

.overlay h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.overlay p {
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.cta-button {
    padding: 10px 20px;
    background-color: rgba(106, 27, 91, 0.8);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cta-button:hover {
    transform: scale(1.02) rotate(2deg);
    background-color: rgba(106, 27, 91, 0.9);
}

.cta-button:hover i {
    animation: iconRotate 0.8s ease;
    color: #4CAF50;
}

.cta-button:hover span {
    background: linear-gradient(45deg, #4CAF50, #2196F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGlow 1.5s ease infinite;
}

@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes textGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.carousel-navigation {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 40px);
}

.carousel-navigation button {
    background-color: transparent;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #ffffff;
}

.carousel-navigation button:hover {
    background-color: transparent;
}

/* 搜索栏样式优化 */
.search-section {
    margin: 20px 0;
}

.search-container {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* 搜索框外层容 */
.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

/* 搜索框样式 */
#search {
    width: 100%;
    padding: 12px 45px 12px 20px; /* 增加右侧内边距，为图标留出空间 */
    background: rgba(28, 28, 28, 0.6);
    border: 1px dashed rgba(180, 140, 255, 0.5);
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 搜索图标样式 */
.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c63ff; /* 紫色图标 */
    font-size: 18px;
    pointer-events: none; /* 防止图标影响输入 */
    transition: all 0.3s ease;
}

/* 搜索框焦点状态时图标效果 */
#search:focus + .search-icon {
    color: #4834d4; /* 深紫色 */
}

#search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 标签选择器样式 */
.tag-filter {
    width: 200px;
    position: relative;
}

.tag-filter select {
    width: 100%;
    padding: 12px 20px;
    background: rgba(28, 28, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    appearance: none; /* 移除默认的下拉箭头 */
}

.tag-filter::after {
    content: '\f107'; /* FontAwesome下箭头图 */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
}

.tag-filter select:hover {
    border-color: rgba(108, 99, 255, 0.3);
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.1);
}

.tag-filter select:focus {
    border-color: #6c63ff;
    box-shadow: 0 4px 20px rgba(108, 99, 255, 0.2);
    transform: translateY(-1px);
}

.tag-filter select:focus + .tag-filter::after {
    color: #6c63ff;
}

.tag-filter select option {
    background: #1a1a1a;
    color: #fff;
    padding: 12px;
    font-size: 14px;
}

/* 推荐搜索标签样式 */
.search-recommendations {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 15px;
}

.search-recommendations span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.recommendation {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(108, 99, 255, 0.1);
    transition: all 0.3s ease;
    border: none;
}

.recommendation:hover {
    background: rgba(108, 99, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

/* 模型卡牌样式 */
.recommendation-section {
    margin: 20px 0;
}

.recommendation-section h3 {
    margin-bottom: 20px;
    color: #ffffff;
}

.recommendation-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 一行6个卡牌 */
    gap: 15px;
}

.recommendation-cards .card {
    width: 100%;
    height: 350px;  /* 调整卡片高度 */
    background-color: rgba(32, 32, 44, 0.4);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.recommendation-cards .card:hover {
    transform: translateY(-5px);
    box-shadow: none;
    border-color: rgba(111, 111, 255, 0.3);
}

.recommendation-cards .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommendation-cards .card .model-type {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    background: rgba(32, 32, 44, 0.8);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
}

.recommendation-cards .card h4 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    margin: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    font-size: 16px;
    text-align: left;
}

/* 空状态提示 */
.empty-message {
    width: 100%;
    padding: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
}

/* Modal Styles */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px); /* 轻微模糊效果 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 5% auto; /* 居中并留出顶部空间 */
    padding: 20px;
    border-radius: 12px; /* 圆角 */
    width: 90%;
    max-width: 600px; /* 限制宽度 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* 柔和阴影效果 */
    animation: slideDown 0.3s ease;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    color: #ffffff;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #ff6347;
    text-decoration: none;
}

.modal-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
}

.modal-content form {
    display: flex;
    flex-direction: column;
}

.modal-content label {
    margin: 10px 0 5px;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
}

.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="file"],
.modal-content select {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 16px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.modal-content input[type="text"]::placeholder,
.modal-content input[type="password"]::placeholder,
.modal-content select::placeholder {
    color: #ccc;
}

.modal-content input[type="text"]:focus,
.modal-content input[type="password"]:focus,
.modal-content input[type="file"]:focus,
.modal-content select:focus {
    border-color: #1abc9c; /* 聚焦时边框颜色 */
    outline: none;
}

.modal-content button[type="submit"],
.modal-content button[type="button"],
.add-workflow-btn {
    padding: 12px 20px;
    background: linear-gradient(45deg, #1abc9c, #16a085); /* 渐变背景 */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content button[type="submit"]:hover,
.modal-content button[type="button"]:hover,
.add-workflow-btn:hover {
    background: linear-gradient(45deg, #16a085, #1abc9c); /* Hover时渐变反转 */
    transform: scale(1.02); /* 微缩放效果 */
}

.modal-content button[type="submit"] i,
.modal-content button[type="button"] i,
.add-workflow-btn i {
    margin-left: 8px;
}

.tab {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab button {
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.tab button.active {
    color: #1abc9c;
    border-bottom: 2px solid #1abc9c;
}

.tabcontent {
    display: none;
}

.tabcontent.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 传模型弹窗优化 */
#uploadModal .modal-content form {
    width: 100%;
}

#uploadModal .modal-content form label {
    color: #ffffff;
}

#uploadModal .modal-content form input,
#uploadModal .modal-content form select {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#uploadModal .modal-content form input::placeholder,
#uploadModal .modal-content form select::placeholder {
    color: #ccc;
}

/* 手机验证码登录弹窗样式 */
#phoneLoginModal .modal-content form {
    width: 100%;
}

#phoneLoginModal .modal-content form label {
    color: #ffffff;
}

#phoneLoginModal .modal-content form input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#phoneLoginModal .modal-content form input::placeholder {
    color: #ccc;
}

/* 微信扫码登录弹窗样式 */
#wechatLoginModal .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wechatLoginModal .modal-content .wechat-qr {
    width: 200px;
    height: 200px;
    margin: 20px 0;
}

/* 个人信息弹窗样式 */
/* 个人信息弹窗样式 */
#personalInfoModal .modal-content.personal-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    background: rgba(28, 28, 28, 0.95);
    border-radius: 15px;
    max-width: 800px;
    width: 90%;
}

/* 用户信息区域 */
.user-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 30px;
    position: relative;
}

/* 修改资料按钮 */
.edit-profile-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 15px;
    background: rgba(26, 188, 156, 0.2);
    border: none;
    border-radius: 20px;
    color: #1abc9c;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.edit-profile-btn:hover {
    background: rgba(26, 188, 156, 0.3);
    transform: translateY(-2px);
}

/* 编辑模式的输入框样式 */
.info-group.editing input {
    width: 100%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(26, 188, 156, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.info-group.editing input:focus {
    border-color: #1abc9c;
    box-shadow: 0 0 10px rgba(26, 188, 156, 0.2);
}

/* 保存和取消按钮 */
.edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.save-btn, .cancel-btn {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-btn {
    background: #1abc9c;
    color: #fff;
    border: none;
}

.save-btn:hover {
    background: #16a085;
    transform: translateY(-2px);
}

.cancel-btn {
    background: transparent;
    border: 1px solid #999;
    color: #999;
}

.cancel-btn:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* 退出按钮样式修改 */
#logoutButton {
    margin-top: 20px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

#logoutButton:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

#logoutButton i {
    transition: transform 0.3s ease;
}

#logoutButton:hover i {
    transform: translateX(3px);
}

/* 会员信息 */
.vip-info {
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 20px;
}

.vip-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.vip-badge {
    padding: 4px 12px;
    background: linear-gradient(45deg, #f1c40f, #f39c12);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
}

.vip-expire {
    color: #999;
    font-size: 12px;
}

/* ���辑式 */
.info-group.editing .value {
    display: none;
}

.info-group.editing input {
    width: 100%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.save-btn, .cancel-btn {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-btn {
    background: #1abc9c;
    color: #fff;
    border: none;
}

.save-btn:hover {
    background: #16a085;
    transform: translateY(-2px);
}

.cancel-btn {
    background: transparent;
    border: 1px solid #999;
    color: #999;
}

.cancel-btn:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* 会员选项卡片动 */
.membership-options .option-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.membership-options .option-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.membership-options .option-card:hover h4 {
    color: #1abc9c;
}

.membership-options .option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(26, 188, 156, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.membership-options .option-card:hover::before {
    left: 100%;
}

/* 退出按钮动效 */
#logoutButton {
    margin-top: 20px;
    padding: 12px 24px;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

#logoutButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
    background: linear-gradient(45deg, #c0392b, #e74c3c);
}

#logoutButton i {
    transition: transform 0.3s ease;
}

#logoutButton:hover i {
    transform: translateX(3px);
}

/* 存储空间展示 */
.storage-status {
    width: 100%;
    margin-bottom: 20px;
}

.storage-status p {
    font-size: 16px;
    margin-bottom: 10px;
}

.storage-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.storage-bar .progress {
    height: 100%;
    background-color: #1abc9c;
    transition: width 0.3s ease;
}

.storage-status #storage-used {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
}

/* 会员选项 */
.membership-options {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.membership-options .option-card {
    background-color: rgba(52, 73, 94, 0.9);
    padding: 15px;
    border-radius: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
}

.membership-options .option-card h4 {
    color: #ecf0f1;
    margin-bottom: 10px;
}

.membership-options .option-card p {
    font-size: 18px;
    margin-bottom: 15px;
}

.membership-options .option-card .subscribe-btn {
    padding: 8px 16px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
    font-size: 14px;
}

.membership-options .option-card .subscribe-btn:hover {
    background-color: #2980b9;
}

.membership-options .option-card ul {
    list-style: none;
    padding: 0;
    color: #bdc3c7;
    font-size: 14px;
}

.membership-options .option-card ul li {
    margin-bottom: 5px;
}

/* 会员权益表格 */
.membership-benefits {
    width: 100%;
    border-collapse: collapse;
}

.membership-benefits th,
.membership-benefits td {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px;
    text-align: center;
}

.membership-benefits th {
    background-color: rgba(41, 41, 41, 0.85);
    color: #1abc9c;
}

.membership-benefits td {
    background-color: rgba(52, 73, 94, 0.9);
    color: #bdc3c7;
}

.membership-benefits th:first-child,
.membership-benefits td:first-child {
    text-align: left;
}

/* 工作流管理弹窗样式优化 */
#workflowModal .modal-content {
    max-width: 1200px;
    max-height: 85vh;
    margin: 20px auto;
    padding: 30px;
    background: rgba(28, 28, 38, 0.95);
    border-radius: 15px;
    border: 1px solid rgba(111, 111, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#workflowModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#workflowModal h2 {
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

#workflowModal h2 i {
    color: #6c63ff;
}

#workflowModal .workflow-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

#workflowModal .workflow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(32, 32, 44, 0.4);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

#workflowModal .workflow-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

#workflowModal .workflow-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

#workflowModal .workflow-info {
    flex: 1;
}

#workflowModal .workflow-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 20px;
}

#workflowModal .edit-btn,
#workflowModal .delete-btn {
    width: 100px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

#workflowModal .edit-btn {
    background: linear-gradient(135deg, #6c63ff, #4834d4);
    color: #fff;
}

#workflowModal .edit-btn:hover {
    background: linear-gradient(135deg, #4834d4, #6c63ff);
    transform: translateX(-2px);
}

#workflowModal .delete-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ff6b6b;
}

#workflowModal .delete-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-2px);
}

#workflowModal .create-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
}

/* 滚动条样式 */
#workflowModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#workflowModal .modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#workflowModal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#workflowModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 登录成功信息样式 */
#loginSuccess,
#logoutSuccess {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(46, 204, 113, 0.95);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1001;
    display: none;
    animation: fadeInSuccess 0.5s ease;
}

@keyframes fadeInSuccess {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

#loginSuccess.hidden,
#logoutSuccess.hidden {
    display: none;
}

#loginSuccess h2,
#logoutSuccess h2 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

#loginSuccess p,
#logoutSuccess p {
    margin: 0;
    font-size: 14px;
}

#loginSuccess span,
#logoutSuccess span {
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .recommendation-cards {
        grid-template-columns: repeat(4, 1fr); /* 调整为4列 */
    }
}

@media (max-width: 992px) {
    .recommendation-cards {
        grid-template-columns: repeat(3, 1fr); /* 调整为3列 */
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 10%; /* 在较小屏幕上稍宽 */
    }

    .carousel .slides-container {
        height: 250px; /* 调整高度 */
    }

    .carousel .slide {
        height: 250px; /* 调整高度 */
    }

    .carousel .overlay {
        left: 15px;
        bottom: 10px;
    }

    .recommendation-cards {
        grid-template-columns: repeat(2, 1fr); /* 调整为2列 */
    }

    .content {
        padding: 10px;
    }

    .upload-model-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .carousel-navigation button {
        padding: 8px;
        font-size: 16px;
    }

    /* 保持主容区域宽度变 */
    .sidebar.collapsed + .content {
        width: calc(100% - 50px);
    }
}

/* 隐藏不需要的元素 */
#chat-window {
    display: none !important;
}

/* 确保侧边栏和内容区域有适当的z-index */
.sidebar {
    z-index: 100;
}

.content {
    z-index: 1;
}

/* 确保模态框在最上层 */
.modal {
    z-index: 1000;
}

/* 个人信息按钮样式 */
#personalInfoModal .modal-content button {
    padding: 8px 16px;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#personalInfoModal .modal-content button:hover {
    background-color: #c0392b;
}

/* 加渐变毛玻璃效果 */
.container {
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(50,50,50,0.5));
    backdrop-filter: blur(15px);
}

/* 按钮样式统一 */
button {
    font-family: 'Roboto', sans-serif;
}

/* Additional Styles for Additional Login Options */
.additional-login-options {
    margin-top: 20px;
    text-align: center;
}

.additional-login-options h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.additional-login-options button {
    padding: 8px 16px;
    margin: 5px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

.additional-login-options button:hover {
    background-color: #2980b9;
}

.additional-login-options .wechat-qr {
    width: 150px;
    height: 150px;
    margin-top: 10px;
}
/* 工作流管理窗样式 */
#workflowModal .modal-content {
    max-height: 80vh;
    overflow-y: auto;
    background-color: rgba(28, 28, 28, 0.95);
    color: #ffffff;
    border-radius: 12px;
    padding: 20px;
}

#workflowModal .modal-content h2 {
    color: #1abc9c;
    text-align: center;
    margin-bottom: 20px;
}

#workflowModal .add-workflow-btn {
    margin-bottom: 20px;
    align-self: flex-end;
    background-color: #3498db;
}

#workflowModal .add-workflow-btn:hover {
    background-color: #2980b9;
}

#workflowModal .workflow-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#workflowModal .workflow-item {
    background-color: rgba(52, 73, 94, 0.9);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

#workflowModal .workflow-item:hover {
    background-color: rgba(52, 73, 94, 1);
}

#workflowModal .workflow-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}

#workflowModal .workflow-info h4 {
    color: #ecf0f1;
    margin-bottom: 5px;
}

#workflowModal .workflow-info p {
    color: #bdc3c7;
    margin: 0;
    font-size: 14px;
}

#workflowModal .workflow-model-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}

/* 编辑工作流模态框样式 */
.modal-content form label {
    color: #ffffff;
}

.modal-content form select {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-content form select::placeholder {
    color: #ccc;
}

.category-section {
    display: flex;
    gap: 15px;
    justify-content: flex-start; /* 左对齐 */
    padding: 20px 0;
    padding-left: 20px; /* 添加左侧内边距，确保不会贴到边缘 */
}

.category-item {
    display: flex;
    align-items: center; /* 图片和文字同一行 */
    background-color: #232323; /* 背景颜色 */
    padding: 10px 20px; /* 控制内边距 */
    border-radius: 12px; /* 圆角 */
    cursor: pointer;
    width: 180px; /* 长方形效果 */
    height: 60px; /* 固定高度 */
    text-align: left; /* 左对齐 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影 */
    border: 2px solid transparent; /* 默认透明的边框 */
}

.category-item img {
    width: 40px; /* 调整图标大小 */
    height: 40px;
    object-fit: contain;
    margin-right: 15px; /* 图标和文字之间的间距 */
}

.category-item span {
    color: #ffffff;
    font-size: 16px; /* 文本大小 */
    font-weight: 500; /* 字体稍微加粗 */
}

.category-item.active {
    background-color: #6c63ff; /* 激活时的背景颜色 */
    box-shadow: 0 8px 20px rgba(108, 99, 255, 0.5); /* 激活状态的阴影更明显 */
    border: 2px solid #ffffff; /* 激活时的白色边框 */
}

.category-item:hover {
    background-color: #333333; /* 悬停时的背景颜色稍变亮 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* 悬停时的阴影效果 */
}
/* 保持 logo、menu 和 "我的" 按等原始样式 */

/* 将侧边栏设置为 flex 局，使元素按垂直方向排列 */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
}

/* Logo 区域 */
.logo {
    margin-bottom: 8px; /* 原来如果是 30px，可以改成 8px 更紧凑 */
}

/* 菜单区域 */
.menu {
    flex-grow: 1;
    margin-bottom: 100px;
    margin-top: 0; /* 如果设置了间距，改成 0 或更小的值 */
}

.menu ul li a {
    filter: brightness(0.6); /* 默认偏暗 */
    transition: filter 0.3s ease;
}

.menu ul li.active a {
    filter: brightness(1); /* 当前页面亮一点 */
}

/* 社交图标和版权信息位置调整 */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.social-icons a {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icons img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.1);
}

/* 版权信息样式调 */
.footer-info {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    width: 100%;
}

.footer-info p {
    margin: 3px 0;
}

.footer-info a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.footer-info a:hover {
    color: #1abc9c;
}

/* "我的"按钮样式 */
.power-meter {
    background: none;
    box-shadow: none;
    border: none;
}

/* 侧边栏收起时的样式 */
.sidebar.collapsed .social-icons,
.sidebar.collapsed .footer-info {
    display: none;
}

/* 设置下拉菜单样式 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: rgba(28, 28, 28, 0.95);
    border-radius: 8px;
    padding: 8px 0;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-top: 5px;
    z-index: 100;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    color: #fff;
    transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-icon {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.sidebar.collapsed .dropdown-icon {
    display: none;
}

.sidebar.collapsed .dropdown-menu {
    display: none !important;
}

.menu a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    position: relative;
}

.menu a i {
    min-width: 24px;
    text-align: center;
    margin-right: 10px;
}

.dropdown.active > a {
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown.active .dropdown-icon {
    transform: rotate(180deg);
}

/* ICP备案号链接样式 */
.beian-link {
    display: inline-block;
    padding: 2px 4px;
    color: #999 !important;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 3px;
    cursor: pointer;
    z-index: 10;
    position: relative;
}

.beian-link:hover {
    color: #1abc9c !important;
    background-color: rgba(26, 188, 156, 0.1);
}

/* 侧边栏收起时的样式 */
.sidebar.collapsed .footer-info {
    display: none;
}

/* 主内容区域响应式调整 */
.content {
    width: calc(100% - 7%);
    transition: width 0.3s ease;
}

.sidebar.collapsed + .content {
    width: calc(100% - 50px);
}

/* 收起状态下隐藏文本 */
.sidebar.collapsed .menu-text,
.sidebar.collapsed .social-icons,
.sidebar.collapsed .footer-info {
    display: none;
}

/* 收起状态调整图标大小 */
.sidebar.collapsed .logo img {
    width: 30px;
}

.sidebar.collapsed .power-meter img {
    width: 30px;
    height: 30px;
    margin-right: 0;
}
/* 添加到现有的 styles.css 中 */
.drop-zone {
    border: 2px dashed #4CAF50;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-zone:hover {
    background-color: rgba(76, 175, 80, 0.1);
}

.drop-zone i {
    font-size: 2rem;
    color: #4CAF50;
    margin-bottom: 0.5rem;
}

.drop-zone .sub-text {
    color: #666;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.drop-zone.dragover {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: #45a049;
}

#workflowFile {
    display: none;
}

/* 上传模型弹窗样式优化 */
#uploadModal .modal-content {
    position: relative;
    margin: 3vh auto;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    padding: 30px;
    background: linear-gradient(135deg, 
        rgba(22, 22, 29, 0.98) 0%,
        rgba(32, 32, 44, 0.98) 100%
    );
    border-radius: 20px;
    border: 1px solid rgba(111, 111, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 表单容器布局 */
#uploadModal .form-container {
    display: flex;
    gap: 30px;
    height: calc(100% - 150px);  /* 为发布按钮留出空间 */
    margin-bottom: -60px;  /* 与发布按钮的间距 */
}

/* 左右两侧区域样式 */
#uploadModal .form-left,
#uploadModal .form-right {
    flex: 1;
    background: rgba(28, 28, 38, 0.5);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(111, 111, 255, 0.1);
    overflow-y: auto;
}

/* 表单元素样式 */
#uploadModal input[type="text"],
#uploadModal select,
#uploadModal textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

/* 标签样式 */
#uploadModal label {
    display: block;
    color: #fff;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

/* 预览图上传区域样式优化 */
.preview-upload {
    position: relative;
    width: 200px;  /* 固定宽度 */
    height: 150px; /* 固定高度 */
    background: rgba(32, 32, 44, 0.4);
    border: 2px dashed rgba(111, 111, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.preview-upload:hover {
    border-color: rgba(111, 111, 255, 0.4);
    background: rgba(32, 32, 44, 0.6);
}

.preview-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;  /* 确保文件输入框在最上层 */
}

.preview-upload .upload-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.preview-upload .upload-placeholder i {
    font-size: 24px;
    color: #8f8fff;
    margin-bottom: 8px;
}

.preview-upload img#previewImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    z-index: 1;
}

.preview-upload.has-image img#previewImage {
    display: block;
}

.preview-upload.has-image .upload-placeholder {
    display: none;
}

/* 工作流组样式 */
.workflow-group {
    background: rgba(32, 32, 44, 0.4);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.workflow-group h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

/* 下拉框样式优化 */
.workflow-select {
    width: 100%;
    padding: 12px 35px 12px 15px;
    background: rgba(28, 28, 38, 0.6);  /* 深色背景 */
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;  /* 白色文字 */
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: all 0.3s ease;
}

.workflow-select option {
    background: #232323;  /* 深色背景 */
    color: #fff;  /* 白色文字 */
    padding: 10px;
}

/* 标签选择器样式 */
.tag-checkbox .checkbox-text {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag-checkbox input[type="checkbox"]:checked + .checkbox-text {
    background: rgba(111, 111, 255, 0.9);
    border-color: #8f8fff;
}

/* 发布按钮样式 */
.modal-footer {
    margin-top: 20px;  /* 添加上边距 */
    display: flex;
    justify-content: flex-end;  /* 右对齐 */
    padding-right: 25px;  /* 右侧内边距 */
}

.publish-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    padding: 12px 35px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.publish-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.publish-btn i {
    font-size: 16px;
}

/* 模型类型选择框样式 */
#modelType {
    width: 100%;
    padding: 12px 15px;
    background: rgba(28, 28, 38, 0.6);  /* 深色背景 */
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;  /* 白色文字 */
    font-size: 14px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
}

#modelType option {
    background: #232323;  /* 深色背景 */
    color: #fff;  /* 白色文字 */
    padding: 8px;
}

.workflow-dropdown::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);  /* 白色箭头 */
    pointer-events: none;
    font-size: 12px;
}

/* 悬停和焦点效果 */
.workflow-select:hover,
#modelType:hover {
    border-color: rgba(111, 111, 255, 0.4);
    background: rgba(28, 28, 38, 0.8);
}

.workflow-select:focus,
#modelType:focus {
    border-color: #8f8fff;
    box-shadow: 0 0 10px rgba(111, 111, 255, 0.15);
}

/* 可选功能工作流样式优化 */
.workflow-options {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.workflow-dropdown {
    position: relative;
    flex: 1;
}

.workflow-select {
    width: 100%;
    padding: 12px 35px 12px 15px;
    background: rgba(28, 28, 38, 0.6);  /* 深色背景 */
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;  /* 白色文字 */
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: all 0.3s ease;
}

.workflow-select option {
    background: #232323;  /* 深色背景 */
    color: #fff;  /* 白色文字 */
    padding: 10px;
}

.workflow-dropdown::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);  /* 白色箭头 */
    pointer-events: none;
    font-size: 12px;
}

.workflow-select:hover {
    border-color: rgba(111, 111, 255, 0.4);
    background: rgba(28, 28, 38, 0.8);
}

.workflow-select:focus {
    border-color: #8f8fff;
    box-shadow: 0 0 10px rgba(111, 111, 255, 0.15);
}

.workflow-select option {
    background: #232323;  /* 深色背景 */
    color: #fff;  /* 白色文字 */
    padding: 10px;
}

/* 工作流组标题样式 */
.workflow-group h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-group h4 i {
    color: #8f8fff;
}

/* 工作流组容器样式 */
.workflow-group {
    background: rgba(32, 32, 44, 0.4);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.workflow-group:hover {
    background: rgba(32, 32, 44, 0.5);
    border-color: rgba(111, 111, 255, 0.2);
}

/* 标签部分样式优化 */
.tags-section {
    margin-top: 20px;
    background: rgba(32, 32, 44, 0.4);
    border-radius: 12px;
    padding: 20px;
}

.tags-section h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.tag-options {
    display: flex;  /* 改为横向排列 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 12px;  /* 标签之间的间距 */
}

.tag-checkbox {
    display: inline-flex;  /* 横向排列 */
    align-items: center;
}

.tag-checkbox input[type="checkbox"] {
    display: none;
}

.tag-checkbox .checkbox-text {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag-checkbox input[type="checkbox"]:checked + .checkbox-text {
    background: rgba(111, 111, 255, 0.9);
    border-color: #8f8fff;
}
/* 优化算力显示样式 - 更紧凑的设计 */
.power-display {
    margin: 12px 0;
    padding: 8px 10px;
    background: linear-gradient(145deg, 
        rgba(28, 28, 38, 0.9),
        rgba(32, 32, 44, 0.8)
    );
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(111, 111, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.power-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.power-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.power-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(143, 143, 255, 0.05));
    border-radius: 50%;
}

.power-icon i {
    font-size: 12px;
    z-index: 2;
    background: linear-gradient(135deg, #6c63ff, #8f8fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: iconPulse 2s ease-in-out infinite;
}

.power-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(108, 99, 255, 0.5);
    border-left-color: rgba(143, 143, 255, 0.3);
    animation: ringRotate 3s linear infinite;
}

.ring1 {
    width: 100%;
    height: 100%;
    animation-duration: 3s;
}

.ring2 {
    width: 70%;
    height: 70%;
    animation-duration: 2s;
    animation-direction: reverse;
}

.power-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

#currentPower {
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(45deg, #6c63ff, #8f8fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.power-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

#totalPower {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.power-bar {
    width: 100%;
    height: 2px;
    margin-top: 2px;
}

.progress-track {
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6c63ff, #8f8fff);
    position: relative;
    animation: progressAnimate 2s ease-out forwards;
}

.progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 2s infinite;
}

/* 侧边栏收起时的样式 */
.sidebar.collapsed .power-display {
    padding: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 32px;
    margin: 12px auto;
}

.sidebar.collapsed .power-numbers {
    justify-content: center;
}

.sidebar.collapsed .power-icon {
    width: 28px;
    height: 28px;
    margin: 0 auto;
}

.sidebar.collapsed .power-icon i {
    font-size: 14px;
}

.sidebar.collapsed .power-count,
.sidebar.collapsed .power-bar {
    display: none;
}

/* 动画效果 */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

@keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
}
}

@keyframes progressAnimate {
    from { width: 0; }
    to { width: var(--progress-width, 50%); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(100%) skewX(-15deg); }
}

/* 自定义模型弹窗样式 */
#customModelModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 28, 0.6); /* 降低背景不透明度 */
    z-index: 1000;
    backdrop-filter: blur(8px);
    padding: 40px;
}

.customize-content {
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    margin: 0 auto;
    overflow-y: auto;
    background: rgba(28, 28, 38, 0.3); /* 降低内容区域不透明度 */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
}

/* 滚动条样式 */
.customize-content::-webkit-scrollbar {
    width: 6px;
}

.customize-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.customize-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.customize-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

#customModelModal h2 {
    margin: 0 0 30px 0;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#customModelModal .close {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
}

#customModelModal .close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    #customModelModal .modal-content {
        width: 95%;
        padding: 25px;
        margin: 20px auto;
    }

    #customModelModal h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #customModelModal .close {
        width: 35px;
        height: 35px;
        font-size: 20px;
        right: 15px;
        top: 15px;
    }
}

/* 添加端口配置样式 */
.port-config {
    margin-top: 15px;
    padding: 15px;
    background: rgba(32, 32, 44, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.port-config h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.port-config .port-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.port-config input[type="number"] {
    flex: 1;
    padding: 10px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.port-config input[type="number"]:focus {
    border-color: #6c63ff;
    outline: none;
}

.port-config .port-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

/* 服务器配置样式 */
.server-config {
    margin-top: 20px;
    padding: 20px;
    background: rgba(32, 32, 44, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.server-config h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-config .input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.server-config .input-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.server-config .input-field {
    flex: 1;
    position: relative;
}

.server-config label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
}

.server-config input {
    width: 100%;
    padding: 12px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.server-config input:focus {
    border-color: #6c63ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

.server-config .hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

.server-config .protocol {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    padding: 12px 0;
}

/* 编辑工作流弹窗样式 */
.modal-content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px;
}

.form-container {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.form-left, .form-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: #6c63ff;
}

.form-section {
    padding: 20px;
    background: rgba(32, 32, 44, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.preview-area {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

#imagePreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(28, 28, 38, 0.6);
    border: 2px dashed rgba(111, 111, 255, 0.2);
    transition: all 0.3s ease;
}

.upload-placeholder:hover {
    background: rgba(28, 28, 38, 0.8);
    border-color: #6c63ff;
}

.upload-placeholder i {
    font-size: 32px;
    color: #6c63ff;
    margin-bottom: 10px;
}

/* 修改表单布局相关样式 */
.form-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #6c63ff, #4834d4);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

/* 文件上传区域样式 */
.file-input-wrapper {
    position: relative;
    padding: 15px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px dashed rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.file-input-wrapper:hover {
    border-color: #6c63ff;
    background: rgba(28, 28, 38, 0.8);
}

.file-input-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* 表单组件样式 */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #6c63ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

/* 提示文本样式 */
.hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

/* 拖拽状态样式 */
.file-input-wrapper.dragover {
    border-color: #6c63ff;
    background: rgba(28, 28, 38, 0.8);
}

/* 优化批量操作按钮样式 */
.workflow-batch-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.workflow-batch-actions .select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.workflow-batch-actions .select-all:hover {
    background: rgba(255, 255, 255, 0.1);
}

.workflow-batch-actions .batch-btns {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.workflow-batch-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.workflow-batch-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.workflow-batch-actions .batch-delete {
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    color: #fff;
    box-shadow: 0 4px 15px rgba(238, 82, 83, 0.2);
}

.workflow-batch-actions .batch-delete:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 82, 83, 0.3);
}

.workflow-batch-actions .batch-update {
    background: linear-gradient(135deg, #6c63ff, #4834d4);
    color: #fff;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.2);
}

.workflow-batch-actions .batch-update:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.3);
}

/* 个人中心弹窗样式 */
#personalInfoModal .modal-content {
    max-width: 500px;  /* 增加宽度 */
    margin: 20px auto;
    padding: 25px;
    background: rgba(28, 28, 38, 0.95);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#personalInfoModal .modal-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#personalInfoModal .modal-header h2 {
    font-size: 20px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#personalInfoModal .user-info {
    padding: 15px 0;
}

#personalInfoModal .info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#personalInfoModal .info-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    min-width: 80px;
}

#personalInfoModal .info-value {
    color: #fff;
    font-size: 14px;
}

#personalInfoModal .modal-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 登录弹窗样式 */
#loginModal .modal-content,
#phoneLoginModal .modal-content,
#wechatLoginModal .modal-content,
#personalInfoModal .modal-content {
    max-width: 500px;
    margin: 20px auto;
    padding: 30px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 15px;
    border: 1px solid rgba(111, 111, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 弹窗头部样式 */
#loginModal .modal-header,
#phoneLoginModal .modal-header,
#wechatLoginModal .modal-header,
#personalInfoModal .modal-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(111, 111, 255, 0.1);
}

#loginModal .modal-header h2,
#phoneLoginModal .modal-header h2,
#wechatLoginModal .modal-header h2,
#personalInfoModal .modal-header h2 {
    font-size: 22px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 表单样式 */
.login-form {
    padding: 20px 0;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group input {
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
}

/* 个人信息样式 */
#personalInfoModal .user-info {
    padding: 15px 0;
}

#personalInfoModal .info-item {
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 10px;
}

/* 弹窗底部样式 */
#loginModal .modal-footer,
#phoneLoginModal .modal-footer,
#wechatLoginModal .modal-footer,
#personalInfoModal .modal-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(111, 111, 255, 0.1);
}

/* Webkit浏览器的滚动条样式 */
.content::-webkit-scrollbar {
    width: 8px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
}

.content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 99, 255, 0.4);
}

/* 自定义模型选项样式 */
.custom-model-option {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(111, 111, 255, 0.1);
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox .checkbox-text {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-text {
    background: rgba(111, 111, 255, 0.9);
    border-color: #8f8fff;
}

.custom-model-hint {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    padding-left: 16px;
}

/* 训练区域样式 */
.training-area {
    padding: 20px;
    height: 100%;
}

.training-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.training-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    color: #fff;
}

.new-training-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #6c63ff, #4834d4);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.new-training-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

.training-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 8px 16px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: rgba(108, 99, 255, 0.2);
    border-color: #6c63ff;
}

.tab-btn i {
    font-size: 14px;
}

.training-list {
    display: grid;
    gap: 15px;
}

.training-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.training-info {
    flex: 1;
}

.training-info h3 {
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.training-progress {
    width: 150px;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #6c63ff, #4834d4);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    display: block;
}

.task-status {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    min-width: 100px;
    text-align: center;
}

.task-status.waiting {
    background: rgba(255, 171, 0, 0.1);
    color: #ffab00;
}

.task-status.training {
    background: rgba(108, 99, 255, 0.1);
    color: #6c63ff;
}

.task-status.completed {
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
}

.task-status.failed {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

.details-btn {
    padding: 8px 16px;
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-radius: 8px;
    color: #6c63ff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.details-btn:hover {
    background: rgba(108, 99, 255, 0.2);
    transform: translateY(-2px);
}

.details-btn i {
    font-size: 16px;
}

.empty-training {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-training i {
    font-size: 48px;
    margin-bottom: 15px;
}

/* 消息提示样式 */
.message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    z-index: 10000;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message.success {
    background: linear-gradient(135deg, #2ed573, #1abc9c);
}

.message.error {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
}

.message i {
    font-size: 18px;
}

.message.fade-out {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 训练详情样式 */
.training-details {
    max-width: 800px !important;
    max-height: 90vh;
    overflow-y: auto;
}

.training-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(111, 111, 255, 0.1);
}

.training-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.training-status.ongoing {
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
}

.training-status.completed {
    background: rgba(108, 99, 255, 0.1);
    color: #6c63ff;
}

.training-status.failed {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

.details-section {
    background: rgba(28, 28, 38, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.details-section h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-item label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.info-item span {
    color: #fff;
    font-size: 14px;
}

.progress-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.progress-bar-large {
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-large .progress {
    height: 100%;
    background: linear-gradient(90deg, #6c63ff, #4834d4);
    border-radius: 10px;
    position: relative;
}

.progress-bar-large .progress-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
}

.training-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.training-logs {
    max-height: 200px;
    overflow-y: auto;
}

.log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-item {
    display: flex;
    gap: 10px;
    font-size: 12px;
    padding: 8px;
    border-radius: 6px;
}

.log-item.info {
    background: rgba(108, 99, 255, 0.1);
}

.log-item.progress {
    background: rgba(46, 213, 115, 0.1);
}

.log-item.error {
    background: rgba(255, 71, 87, 0.1);
}

.log-time {
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.log-message {
    color: #fff;
}

.training-details-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(111, 111, 255, 0.1);
}

.training-details-footer button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pause-btn {
    background: rgba(255, 171, 0, 0.1);
    color: #ffab00;
}

.stop-btn {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.training-details-footer button:hover {
    transform: translateY(-2px);
}

/* 添加菜单项激活状态样式 */
.menu a.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-left: 4px solid #6c63ff;
}

.menu a.active i {
    color: #6c63ff;
}

.menu a.active .menu-text {
    color: #6c63ff;
}

/* 下拉菜单项激活状态 */
.dropdown-menu a.active {
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.2);
    box-shadow: 0 0 15px rgba(108, 99, 255, 0.2);
}

/* 新建训练区域样式 */
.new-training-area {
    padding: 30px;
    background: #1f1f1f;
    border-radius: 16px;
}

.new-training-header {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-btn {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 表单布局 */
.new-training-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 表单内容区域 */
.form-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    position: relative;
}

/* 左侧选项区域 */
.options-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.options-section::-webkit-scrollbar {
    display: none;
}

/* 右侧上传区域 */
.upload-section {
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    z-index: 1;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.upload-section::-webkit-scrollbar {
    display: none;
}

/* 选项组样式 */
.option-group {
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    padding: 20px;
}

.option-group h3 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
}

/* 主题选择器 */
.theme-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.theme-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-btn.active {
    background: rgba(108, 99, 255, 0.1);
    border-color: #6c63ff;
}

/* 预览区域 */
.preview-section {
    margin-top: 20px;
    background: rgba(28, 28, 38, 0.4);
    border-radius: 12px;
    padding: 15px;
    width: 100%;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

/* 预览网格 */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 10px;
    background: rgba(28, 28, 38, 0.4);
    border-radius: 12px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.preview-grid::-webkit-scrollbar {
    display: none;
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(28, 28, 38, 0.6);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 删除按钮 */
.preview-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(255, 71, 87, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-item:hover .remove-btn {
    opacity: 1;
}

/* 上传按钮样式 */
.upload-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #6c63ff, #4834d4);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

.upload-btn i {
    font-size: 18px;
}

/* 模型名称输入框 */
.model-name-group {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.model-name-group h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.model-name-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.model-name-group input:focus {
    border-color: #6c63ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

.model-name-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 模型选择器 */
.model-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.model-option.active {
    background: rgba(108, 99, 255, 0.1);
    border-color: #6c63ff;
}

.model-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-tag {
    background: rgba(108, 99, 255, 0.2);
    color: #6c63ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* 资源规格选择器 */
.resource-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resource-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.resource-option.active {
    background: rgba(108, 99, 255, 0.1);
    border-color: #6c63ff;
}

.resource-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.resource-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* 清空按钮 */
.clear-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.clear-btn:hover {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

/* 预览头部 */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.preview-header h3 {
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 图片预览模态框样式优化 */
#imagePreviewModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 40px;
}

#imagePreviewModal .modal-content {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    max-width: 800px; /* 限制最大宽度 */
    position: relative;
}

#previewModalImage {
    max-width: 100%;
    max-height: 80vh; /* 限制最大高度为视窗高度的80% */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#imagePreviewModal .close {
    position: absolute;
    right: -30px;
    top: -30px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imagePreviewModal .close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 用户协议勾选框样式 */
.agreement-check {
    margin: 15px 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 18px;
    width: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.3);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
}

.checkbox-container:hover .checkmark {
    background: rgba(255, 255, 255, 0.15);
}

.checkbox-container input:checked ~ .checkmark {
    background: #6c63ff;
    border-color: #6c63ff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.agreement-text {
    user-select: none;
}

.agreement-text a {
    color: #6c63ff;
    text-decoration: none;
}

.agreement-text a:hover {
    text-decoration: underline;
}

/* 训练状态样式 */
.task-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.task-status.waiting {
    background: rgba(255, 171, 0, 0.1);
    color: #ffab00;
}

.task-status.training {
    background: rgba(108, 99, 255, 0.1);
    color: #6c63ff;
}

.task-status.completed {
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
}

.task-status.failed {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

/* 训练详情模框式 */
.training-details-modal .modal-content {
    max-width: 900px;
    background: rgba(28, 28, 38, 0.95);
    padding: 30px;
}

.training-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(111, 111, 255, 0.1);
}

.training-details-header h3 {
    font-size: 24px;
    color: #fff;
    margin: 0;
}

.progress-steps {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.step {
    flex: 1;
    position: relative;
    padding: 20px;
    background: rgba(28, 28, 38, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.step.active {
    border-color: #6c63ff;
    background: rgba(108, 99, 255, 0.1);
}

.step-icon {
    width: 40px;
    height: 40px;
    background: rgba(108, 99, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.step.active .step-icon {
    background: #6c63ff;
}

.step-icon i {
    font-size: 20px;
    color: #6c63ff;
}

.step.active .step-icon i {
    color: #fff;
}

.step-label {
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
}

.step-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.step-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6c63ff, #4834d4);
    transition: width 0.3s ease;
}

.step-percentage {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.training-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.chart-container {
    background: rgba(28, 28, 38, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(111, 111, 255, 0.1);
}

.training-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-group {
    background: rgba(28, 28, 38, 0.4);
    border-radius: 8px;
    padding: 15px;
}

.info-group label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 5px;
}

.info-group span {
    color: #fff;
    font-size: 16px;
}

/* 已完成任务卡片网格布局 */
.completed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* 已完成任务卡片样式 */
.completed-card {
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(111, 111, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.completed-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(111, 111, 255, 0.3);
}

.card-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.completed-card:hover .card-image img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 12px;
    background: rgba(32, 32, 44, 0.8);
    border: 1px solid rgba(111, 111, 255, 0.2);
    border-radius: 20px;
}

.model-type {
    color: #fff;
    font-size: 12px;
}

.card-info {
    padding: 15px;
}

.card-info h3 {
    font-size: 16px;
    color: #fff;
    margin: 0 0 10px 0;
}

.card-meta {
    display: flex;
    gap: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-meta i {
    font-size: 14px;
}

/* 我的空间样式 */
.my-space-container {
    padding: 20px;
}

.my-space-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.my-space-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.view-controls {
    display: flex;
    gap: 10px;
}

.view-toggle {
    padding: 8px 16px;
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.view-toggle:hover {
    background: rgba(108, 99, 255, 0.2);
}

.view-toggle.active {
    background: #6c63ff;
}

.storage-info {
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.storage-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.storage-progress {
    height: 100%;
    background: linear-gradient(90deg, #6c63ff, #4834d4);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.storage-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section select {
    padding: 8px 16px;
    background: rgba(28, 28, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    width: 200px;
}

.images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.image-item {
    background: rgba(28, 28, 38, 0.6);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.image-preview {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-item:hover .image-actions {
    opacity: 1;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.image-info {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}