/* 全局样式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;}
a{text-decoration: none;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background-color: #f5f5f5;color: #333;}
/* 头部导航 */
.header {background-color: #fff;border-bottom: 1px solid #e8e8e8;padding: 0 24px;height: 60px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);position: fixed;top: 0;left: 0;right: 0;z-index: 100;}
.nav-container {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.logo {display: flex;align-items: center;gap: 8px;font-size: 18px;font-weight: 600;color: #ff4d4f;}
.logo-icon {width: 32px;height: 32px;border-radius: 8px;display: flex;align-items: center;justify-content: center;object-fit: contain;}
.nav-menu {display: flex;align-items: center;gap: 24px;}
.nav-item {text-decoration: none;color: #666;font-size: 14px;transition: all 0.3s;display: flex;align-items: center;gap: 4px;}
.nav-item:hover {color: #ff4d4f;}
.nav-item.active {color: #ff4d4f;font-weight: 500;}
.user-section {display: flex;align-items: center;gap: 16px;position: relative;}
.user-avatar {width: 36px;height: 36px;border-radius: 50%;background: linear-gradient(135deg, #1890ff, #36cfc9);background-color: #f0f0f0;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 500;cursor: pointer;}
.user-dropdown {position: absolute;top: 100%;right: 0;margin-top: 8px;background-color: #fff;border-radius: 8px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);width: 320px;padding: 16px;display: none;z-index: 1000;}
.user-info {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #666;width: 100%;}
.user-avatar-large {width: 64px;height: 64px;border-radius: 50%;background: linear-gradient(135deg, #1890ff, #36cfc9);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 24px;float: left;}
.user-id {font-size: 12px;color: #999;}
.membership-status {margin-top: 8px;}
.membership-badge {display: inline-block;padding: 2px 8px;background-color: #f6ffed;color: #52c41a;border: 1px solid #b7eb8f;border-radius: 12px;font-size: 12px;font-weight: 500;}
.membership-days {font-size: 12px;color: #999;margin-left: 8px;}
.expire-time {margin-top: 12px;font-size: 12px;color: #999;}
.today-stats {margin-top: 16px;padding-top: 16px;border-top: 1px solid #f0f0f0;}
.today-stats h4 {font-size: 14px;font-weight: 600;color: #333;margin-bottom: 12px;}
.stats-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;}
.stat-item {background-color: #f5f5f5;border-radius: 8px;padding: 20px;text-align: center;}
.stat-value {color: #333;font-size: 24px;font-weight: 600;margin-bottom: 4px;}
.stat-label {margin-top: 4px;font-size: 12px;color: #999;}
.dropdown-menu {margin-top: 16px;padding-top: 16px;border-top: 1px solid #f0f0f0;}
.menu-item {display: flex;align-items: center;gap: 8px;padding: 8px 0;color: #666;text-decoration: none;font-size: 14px;transition: all 0.3s;}
.menu-item:hover {color: #ff4d4f;}
.menu-icon {font-size: 16px;}
.commission-section {margin: 12px 0;padding: 12px;background-color: #fafafa;border-radius: 6px;}
.commission-info {display: flex;align-items: center;justify-content: space-between;}
.promote-btn {padding: 4px 12px;background-color: #ff4d4f;color: #fff;border-radius: 4px;font-size: 12px;text-decoration: none;font-weight: 500;}
.logout {margin-top: 8px;color: #ff4d4f !important;}
/* 主布局 */
.main-layout {display: flex;margin-top: 60px;min-height: calc(100vh - 60px);}
.main-container {display: flex;margin-top: 60px;min-height: calc(100vh - 60px);}
/* 侧边栏 */
.sidebar {width: 200px;background-color: #fff;border-right: 1px solid #e8e8e8;padding: 20px 0;position: fixed;left: 0;top: 60px;bottom: 0;overflow-y: auto;}
/* 固定头部 */
.sidebar-header {padding: 0 20px 20px;position: sticky;top: -16px;z-index: 2000;background: #fff;padding-bottom: 16px;border-bottom: 1px solid #f0f0f0;margin-bottom: 16px;}
.sidebar-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 16px;}
.category-list {margin-top: 12px;}
.category-item {padding: 10px 16px;background-color: #fafafa;border-radius: 8px;margin-bottom: 8px;transition: all 0.3s;}
.category-item:hover {background-color: #fff7e6;transform: translateX(4px);}
.category-name {display: block;font-size: 14px;font-weight: 500;color: #333;margin-bottom: 4px;}
.category-count {font-size: 12px;color: #999;}
.sidebar-actions {padding: 0 20px;display: flex;flex-direction: column;gap: 12px;}
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    background-color: #fff;
    color: #666;
}

.action-btn:hover {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.action-btn.primary {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #ff7875 0%, #ff9c6e 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 77, 79, 0.4);
}

.action-btn.secondary {
    background-color: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
}

.action-btn.secondary:hover {
    background-color: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
    transform: translateY(-1px);
}

.action-btn.active {
    background-color: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
}
.sidebar-item {display: block;padding: 10px 20px;color: #666;text-decoration: none;font-size: 14px;transition: all 0.3s;}
.sidebar-item:hover {background-color: #fff7e6;color: #ff4d4f;}
.sidebar-item.active {background-color: #fff7e6;color: #ff4d4f;border-right: 3px solid #ff4d4f;}
/* 主内容区 */
.main-content {flex: 1;margin-left: 200px;padding: 24px;}
.content {flex: 1;margin-left: 200px;padding: 24px;}
/* 筛选区 */
.filter-section {border-radius: 12px;margin-bottom: 24px;background-color: #fff;padding: 24px;border-bottom: 1px solid #e8e8e8;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);/*position: sticky;*/
    top: 60px;z-index: 50;}
.filter-row {margin-bottom: 20px;}
.filter-category {margin-bottom: 16px;}
.filter-label {display: inline-block;margin-right: 16px;font-weight: 500;font-size: 14px;color: #666;white-space: nowrap;}
.filter-links {display: inline;margin-right: 24px;}
.filter-link {display: inline-block;padding: 6px 12px;margin-right: 8px;margin-bottom: 8px;border: 1px solid #e8e8e8;border-radius: 16px;background-color: #fff;color: #666;text-decoration: none;font-size: 13px;transition: all 0.3s;}
.filter-link:hover {border-color: #ff4d4f;color: #ff4d4f;}
.filter-link.active {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.search-section {display: flex;gap: 12px;align-items: center;}
.search-input {transition: all 0.3s;flex: 1;padding: 8px 12px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;}
.search-input:focus {outline: none;border-color: #ff4d4f;box-shadow: 0 0 0 2px rgba(255,77,79,0.2);}
.search-btn {padding: 8px 20px;background-color: #1890ff;color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.search-btn:hover {background-color: #40a9ff;}
.export-btn {padding: 10px 24px;background-color: #fff;color: #666;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.export-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
/* 结果头部 */
.result-header {margin-bottom: 16px;display: flex;align-items: center;}
.result-count {font-size: 14px;color: #666;}
.result-count strong {color: #ff4d4f;font-weight: 600;}
/* 文章表格 */
.article-table {width: 100%;border-collapse: collapse;background-color: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 24px;}
.article-table th,
.article-table td {padding: 12px 16px;border-bottom: 1px solid #f0f0f0;text-align: center;}
.article-table td:nth-child(4){text-align: left;}
.article-table th {background-color: #fafafa;font-weight: 600;color: #333;font-size: 14px;}
.article-table tr:hover {background-color: #fafafa;}
.article-title {text-decoration: none;transition: color 0.3s;font-size: 18px;font-weight: bold;color: #333;margin-bottom: 15px;line-height: 1.4;}
.article-title:hover {color: #ff4d4f;}
.hot-tag {border: 1px solid #ffccc7;font-weight: 500;display: inline-block;padding: 2px 6px;background-color: #fff2f0;color: #ff4d4f;font-size: 12px;border-radius: 2px;margin-left: 8px;}
.article-actions {display: flex;gap: 8px;align-items: center;}
.action-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.collect-btn {color: #ff4d4f;border-color: #ffccc7;}
.collect-btn:hover {background-color: #fff1f0;}
.prompt-btn {padding: 4px 8px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.prompt-btn:hover {background-color: #fff7e6;border-color: #1890ff;color: #1890ff;}
.format-btn {padding: 8px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.format-btn:hover {background-color: #e6f7ff;border-color: #ff4d4f;color: #ff4d4f;}
/* 分页 */
.pagination {display: flex;align-items: center;justify-content: center;gap: 8px;margin-top: 32px;}
.pagination-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.pagination-btn:hover:not(:disabled) {border-color: #ff4d4f;color: #ff4d4f;}
.pagination-btn.active {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.pagination-btn:disabled {opacity: 0.5;cursor: not-allowed;}
.pagination span {font-size: 14px;color: #666;margin: 0 16px;}
/* 模态框 */
.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: none;align-items: center;justify-content: center;z-index: 1000;}
.modal-overlay.active {display: flex;}
.modal {background: #fff;border-radius: 12px;width: 90%;max-width: 380px;overflow: hidden;}
.modal-content{background-color: #fff;border-radius: 10px;}
.modal-header {display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;border-bottom: 1px solid #f0f0f0;}
.modal-title {font-size: 18px;font-weight: 600;color: #333;}
.modal-close {background: none;border: none;font-size: 24px;color: #999;cursor: pointer;}
.modal-body {padding: 20px;}
.modal-footer {padding: 16px 24px;border-top: 1px solid #f0f0f0;display: flex;justify-content: flex-end;gap: 12px;}
.form-group {margin-bottom: 16px;}
.form-label {display: block;font-size: 13px;color: #666;margin-bottom: 8px;}
.form-input {width: 100%;padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;transition: all 0.3s;}
.form-input:focus {outline: none;border-color: #ff4d4f;box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);}
.modal-btn {padding: 10px 32px;background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.modal-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);}
.modal-btn.btn-cancel {background: #f5f5f5;color: #666;}
.modal-btn.btn-cancel:hover {background: #e8e8e8;transform: none;box-shadow: none;}
.modal-btn.btn-confirm {background: linear-gradient(135deg, #ff8a4c, #ff6b35);color: #fff;}
/* 设置封面弹窗样式 */
.cover-info-box {display: flex;background: #f8f8f8;border-radius: 8px;padding: 14px;margin-bottom: 16px;}
.info-icon-wrap {flex-shrink: 0;width: 24px;height: 24px;background: #ff9500;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 12px;}
.info-icon {color: #fff;font-size: 18px;font-weight: 600;font-style: normal;width: 40px;height: 40px;border-radius: 8px;background-color: #f5f5f5;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.info-title {font-weight: 600;color: #333;font-size: 14px;display: block;margin-bottom: 6px;}
.info-list {margin: 0;padding-left: 16px;font-size: 13px;color: #666;}
.info-list li {margin-bottom: 4px;}
.info-list li:last-child {margin-bottom: 0;}
.cover-preview-section {margin-bottom: 14px;}
.section-title {display: inline-block;position: relative;align-items: center;gap: 8px;font-size: 24px;font-weight: 600;color: #333;margin-bottom: 24px;text-align: center;}
.cover-preview {width: 100%;height: 140px;border: 2px dashed #e0e0e0;border-radius: 8px;display: flex;align-items: center;justify-content: center;background: #fafafa;}
.preview-placeholder {display: flex;flex-direction: column;align-items: center;color: #999;}
.placeholder-svg {width: 48px;height: 48px;margin-bottom: 8px;}
.placeholder-text {font-size: 13px;}
.cover-upload-section {margin-bottom: 14px;}
.upload-btn {width: 100%;padding: 12px;background: linear-gradient(135deg, #ff8a4c, #ff6b35);color: #fff;border: none;border-radius: 6px;font-size: 14px;font-weight: 500;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 6px;transition: all 0.3s;}
.upload-btn:hover {opacity: 0.9;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);}
.upload-icon {width: 16px;height: 16px;font-size: 48px;}
.layui-upload-drag {background: #fafafa;border: 2px dashed #e0e0e0;border-radius: 8px;text-align: center;cursor: pointer;transition: all 0.3s;min-height: 185px;display: flex;align-items: center;justify-content: center;}
.layui-upload-drag:hover {border-color: #ff8a4c;background: #fff5f0;}
.layui-upload-drag .layui-icon {font-size: 40px;color: #ff8a4c;margin-bottom: 10px;}
.layui-upload-drag p {font-size: 14px;color: #666;margin: 0;}
.layui-upload-drag .upload-hint {display: block;margin-top: 8px;}
.layui-upload-drag.cover-preview {width: 100%;padding: 20px;position: relative;overflow: hidden;}
.layui-upload-drag.cover-preview input[type="file"] {display: none !important;}
.preview-result {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.preview-result .preview-image {max-width: 100%;max-height: 140px;object-fit: contain;border-radius: 6px;}
.cover-url-section {margin-bottom: 8px;}
.url-hint {font-size: 12px;color: #999;margin: 0 0 12px;}
.url-input-row {display: flex;gap: 12px;}
.url-input {flex: 1;padding: 10px 14px;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 13px;outline: none;transition: border-color 0.3s;}
.url-input:focus {border-color: #ff8a4c;}
.url-input::placeholder {color: #ccc;}
.url-confirm-btn {padding: 10px 20px;background: #fff;color: #ff8a4c;border: 1px solid #ff8a4c;border-radius: 6px;font-size: 13px;font-weight: 500;cursor: pointer;transition: all 0.3s;}
.url-confirm-btn:hover {background: #fff5f0;}
.preview-image {max-width: 100%;max-height: 100%;object-fit: contain;border-radius: 6px;}
/* 会员套餐页面 */
.page-title {text-align: center;margin-bottom: 24px;}
.title-text {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.title-subtext {font-size: 14px;color: #999;}
.activity-banner {background-color: #fff7e6;border: 1px solid #ffd591;border-radius: 8px;padding: 12px;margin-bottom: 24px;display: flex;align-items: center;justify-content: center;gap: 8px;}
.activity-text {font-size: 14px;color: #fa8c16;font-weight: 500;}
.action-buttons {display: flex;justify-content: center;gap: 16px;margin-bottom: 32px;}
.primary-btn {background: linear-gradient(135deg, #52c41a, #73d13d);color: #fff;}
.primary-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);}
.secondary-btn {background: #fff;color: #666;border: 1px solid #e8e8e8;}
.secondary-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.package-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;margin-bottom: 32px;}
.package-card {background-color: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);position: relative;transition: all 0.3s;}
.package-card:hover {transform: translateY(-4px);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);}
.package-card.basic {border-top: 4px solid #faad14;}
.package-card.pro {border-top: 4px solid #1890ff;}
.package-card.quarterly {border-top: 4px solid #fa8c16;}
.package-card.yearly {border-top: 4px solid #eb2f96;}
.package-header {text-align: center;margin-bottom: 20px;}
.package-icon {font-size: 24px;margin-bottom: 8px;}
.package-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 4px;}
.package-subtitle {font-size: 12px;color: #999;}
.package-price {text-align: center;margin-bottom: 20px;}
.price {font-size: 24px;font-weight: 700;color: #333;}
.price-unit {font-size: 14px;color: #666;margin-left: 4px;}
.original-price {font-size: 12px;color: #999;text-decoration: line-through;margin-top: 4px;}
.package-features {margin-bottom: 24px;}
.feature-item {display: flex;align-items: center;gap: 8px;font-size: 13px;color: #666;margin-bottom: 8px;}
.feature-check {color: #52c41a;font-size: 14px;}
.feature-value {font-weight: 500;margin-left: auto;}
.package-btn {width: 100%;padding: 10px;border: none;border-radius: 6px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s;}
.package-card.basic .package-btn {background-color: #faad14;color: #fff;}
.package-card.pro .package-btn {background-color: #1890ff;color: #fff;}
.package-card.quarterly .package-btn {background-color: #fa8c16;color: #fff;}
.package-card.yearly .package-btn {background-color: #eb2f96;color: #fff;}
.package-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.package-tag {position: absolute;top: 12px;right: 12px;background-color: #ff4d4f;color: #fff;font-size: 10px;padding: 4px 8px;border-radius: 4px;font-weight: 500;}
.purchase-notes {background-color: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.notes-title {font-size: 14px;font-weight: 600;color: #333;margin-bottom: 12px;}
.notes-content {font-size: 13px;color: #666;line-height: 1.5;}
.notes-content p {margin-bottom: 8px;}
/* 我的会员页面 */
.user-card {background-color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.user-info-header {display: flex;align-items: center;gap: 16px;margin-bottom: 16px;}
.user-header{width: 100%;}
.user-details {width: calc(100% - 80px);float: right;;flex: 1;}
.username {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 4px;}
.user-status {font-size: 14px;color: #999;}
.expiry-date {font-size: 14px;color: #999;}
.benefits-card {background-color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.expired-status {text-align: center;padding: 24px;background-color: #fff7e6;border-radius: 8px;margin-bottom: 16px;}
.expired-text {font-size: 14px;color: #fa8c16;margin-bottom: 8px;}
.expired-desc {font-size: 12px;color: #999;}
.current-plan-card {background-color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.plan-expired {text-align: center;padding: 24px;background-color: #fff0f0;border-radius: 8px;margin-bottom: 16px;}
.plan-expired-text {font-size: 14px;color: #ff4d4f;font-weight: 500;margin-bottom: 8px;}
.plan-expired-desc {font-size: 13px;color: #999;margin-bottom: 16px;}
.renew-btn {background: linear-gradient(135deg, #52c41a, #73d13d);color: #fff;padding: 10px 24px;border: none;border-radius: 6px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s;}
.renew-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);}
.stats-section {margin-bottom: 24px;}
.stat-card {background-color: #fff;border-radius: 12px;padding: 24px;text-align: center;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.stat-number {font-size: 32px;font-weight: 700;margin-bottom: 8px;}
.stat-card:nth-child(1) .stat-number {color: #52c41a;}
.stat-card:nth-child(2) .stat-number {color: #fa8c16;}
.stat-card:nth-child(3) .stat-number {color: #1890ff;}
/* 我的订单页面 */
.order-card {background-color: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 16px;}
.order-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;padding-bottom: 16px;border-bottom: 1px solid #f0f0f0;}
.order-info {display: flex;align-items: center;gap: 16px;}
.order-number {font-size: 14px;color: #666;}
.order-status {font-size: 12px;padding: 4px 12px;border-radius: 12px;font-weight: 500;}
.status-pending {background-color: #fff1ed;color: #e82910;border: 1px solid #ea8d81;}
.status-used {background-color: #f6ffed;color: #52c41a;border: 1px solid #b7eb8f;}
.order-amount {font-size: 16px;font-weight: 600;color: #333;}
.order-details {display: flex;flex-wrap: wrap;gap: 24px;}
.detail-label {font-size: 13px;color: #999;margin-bottom: 4px;}
.detail-value {font-size: 14px;color: #333;}
.empty-state {background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);text-align: center;padding: 48px 0;color: #999;}
.empty-icon {color: #e8e8e8;font-size: 48px;margin-bottom: 16px;}
.empty-text {font-size: 14px;color: #999;margin-bottom: 8px;}
.empty-desc {font-size: 13px;color: #bfbfbf;}
/* 登录页面 */
.login-body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);min-height: 100vh;display: flex;align-items: center;justify-content: center;}
.login-container {display: flex;width: 100%;max-width: 1200px;min-height: 600px;margin: 40px;}
/* 左侧品牌区域 */
.login-brand-section {flex: 1;display: flex;flex-direction: column;justify-content: center;padding: 60px;color: #fff;}
.login-brand-logo {display: flex;align-items: center;gap: 12px;margin-bottom: 24px;}
.login-logo-icon {width: 48px;height: 48px;border-radius: 12px;display: flex;align-items: center;justify-content: center;object-fit: contain;}
.login-logo-text {font-size: 32px;font-weight: 700;}
.login-brand-title {font-size: 24px;font-weight: 600;margin-bottom: 16px;}
.login-brand-desc {font-size: 14px;line-height: 1.8;opacity: 0.9;margin-bottom: 40px;}
.login-brand-features {display: flex;gap: 24px;}
.login-feature-item {display: flex;align-items: center;gap: 8px;font-size: 14px;}
.login-feature-dot {width: 6px;height: 6px;background: #fff;border-radius: 50%;}
/* 右侧登录区域 */
.login-section {flex: 0 0 420px;display: flex;align-items: center;justify-content: center;padding: 40px;}
.login-card {background: #fff;border-radius: 16px;padding: 40px;width: 100%;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);}
.login-header {text-align: center;margin-bottom: 24px;}
.login-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.login-subtitle {font-size: 13px;color: #999;}
.login-tabs {display: flex;gap: 12px;margin-bottom: 24px;}
.login-tab {flex: 1;padding: 10px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background: #fff;font-size: 14px;cursor: pointer;transition: all 0.3s;text-align: center;}
.login-tab.active {background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border-color: transparent;}
.login-form-group {margin-bottom: 16px;}
.login-form-label {display: block;font-size: 13px;color: #666;margin-bottom: 6px;}
.login-form-input {width: 100%;padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;transition: all 0.3s;}
.login-form-input:focus {outline: none;border-color: #ff6b6b;box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);}
.login-agreement {display: flex;align-items: center;gap: 8px;margin: 16px 0;font-size: 12px;color: #666;}
.login-agreement input[type="checkbox"] {width: 14px;height: 14px;accent-color: #ff6b6b;}
.login-agreement a {color: #ff6b6b;text-decoration: none;}
.login-btn {width: 100%;padding: 14px;background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s;margin-bottom: 16px;}
.login-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);}
.login-links {display: flex;justify-content: space-between;align-items: center;font-size: 13px;margin-bottom: 20px;}
.login-links a {color: #ff6b6b;text-decoration: none;}
.login-links a:hover {text-decoration: underline;}
.login-register-link {text-align: center;padding-top: 20px;border-top: 1px solid #f0f0f0;font-size: 13px;color: #666;}
.login-register-link a {color: #ff6b6b;text-decoration: none;font-weight: 500;}
/* 用户协议弹窗 */
.login-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: none;align-items: center;justify-content: center;z-index: 1000;}
.login-modal-overlay.active {display: flex;}
.login-modal {background: #fff;border-radius: 12px;width: 90%;max-width: 600px;max-height: 80vh;overflow: hidden;display: flex;flex-direction: column;}
.login-modal-header {display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;border-bottom: 1px solid #f0f0f0;}
.login-modal-title {font-size: 18px;font-weight: 600;color: #333;}
.login-modal-close {background: none;border: none;font-size: 24px;color: #999;cursor: pointer;}
.login-modal-body {padding: 24px;overflow-y: auto;font-size: 14px;line-height: 1.8;color: #333;}
.login-modal-body h3 {font-size: 16px;font-weight: 600;margin: 20px 0 10px;}
.login-modal-body h3:first-child {margin-top: 0;}
.login-modal-body ul {margin-left: 20px;margin-bottom: 12px;}
.login-modal-body li {margin-bottom: 6px;}
.login-modal-footer {padding: 16px 24px;border-top: 1px solid #f0f0f0;display: flex;justify-content: center;}
.login-modal-btn {padding: 10px 32px;background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.login-modal-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);}
/* 注册页面 */
.register-container {height: 100vh;display: flex;align-items: stretch;justify-content: space-between;max-width: 1000px;width: 100%;background-color: #fff;border-radius: 12px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);overflow: hidden;max-height: 72vh;}
.register-section {flex: 1;display: flex;justify-content: center;align-items: center;padding: 40px;}
.register-card {background-color: #fff;border-radius: 12px;padding: 40px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;}
.register-header {margin-bottom: 32px;text-align: center;}
.register-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.register-subtitle {font-size: 14px;color: #999;}
.agreement {margin-bottom: 24px;display: flex;align-items: center;gap: 8px;font-size: 14px;color: #666;}
.agreement a {color: #ff4d4f;text-decoration: none;}
.agreement a:hover {text-decoration: underline;}
/* 首页 */
.home-container {min-height: calc(100vh - 60px);max-width: 1200px;margin: 0 auto;padding: 0 24px;}
.filter-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.filter-title {font-size: 16px;font-weight: 600;color: #333;}
.filter-actions {display: flex;gap: 12px;}
.filter-btn {padding: 8px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.filter-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.filter-btn.active {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.filter-content {display: flex;flex-wrap: wrap;gap: 16px;align-items: center;}
.filter-group {display: flex;align-items: center;gap: 8px;}
.filter-select {color: #333;background-color: #fff;cursor: pointer;padding: 6px 12px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;}
.filter-input {padding: 8px 12px;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 14px;color: #333;background-color: #fff;}
.article-section {padding: 24px;}
.article-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.article-stats {font-size: 14px;color: #999;}
.table-header {display: grid;grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr;background-color: #fafafa;padding: 16px;font-size: 14px;font-weight: 600;color: #333;border-bottom: 1px solid #e8e8e8;}
.table-row {display: grid;grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr;padding: 16px;border-bottom: 1px solid #f0f0f0;align-items: center;transition: background-color 0.3s;}
.table-row:hover {background-color: #fafafa;}
.table-cell {font-size: 14px;color: #333;}
.category-tag {display: inline-block;padding: 4px 12px;border-radius: 12px;font-size: 12px;font-weight: 500;}
.category-hot {background-color: #fff1f0;color: #ff4d4f;border: 1px solid #ffccc7;}
.category-tech {background-color: #e6f7ff;color: #1890ff;border: 1px solid #91d5ff;}
.category-life {background-color: #f6ffed;color: #52c41a;border: 1px solid #b7eb8f;}
.action-button {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.action-button:hover {border-color: #ff4d4f;color: #ff4d4f;}
/* 提示词库 */
.prompt-library {margin-top: 60px;min-height: calc(100vh - 60px);}
.library-header {background-color: #fff;padding: 24px;border-bottom: 1px solid #e8e8e8;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);position: sticky;top: 60px;z-index: 50;}
.library-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 16px;}
.library-actions {display: flex;gap: 12px;margin-bottom: 24px;}
.library-btn {padding: 8px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.library-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.library-btn.primary {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.library-btn.primary:hover {background-color: #ff7875;border-color: #ff7875;}
.category-section {background-color: #fff;padding: 24px;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 24px;}
.category-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.category-title {font-size: 16px;font-weight: 600;color: #333;}
.category-actions {display: flex;gap: 8px;}
.category-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.category-btn:hover {border-color: #1890ff;color: #1890ff;}
.prompt-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 16px;}
.prompt-card {background-color: #fafafa;border: 1px solid #e8e8e8;border-radius: 8px;padding: 16px;transition: all 0.3s;}
.prompt-card:hover {border-color: #ff4d4f;box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);}
.prompt-title {font-size: 14px;font-weight: 500;color: #333;margin-bottom: 8px;}
.prompt-content {font-size: 13px;color: #666;line-height: 1.4;margin-bottom: 12px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.prompt-actions {display: flex;gap: 8px;justify-content: flex-end;}
/* 一键排版 */
.format-container {margin-top: 60px;min-height: calc(100vh - 60px);}
.format-header {background-color: #fff;padding: 24px;border-bottom: 1px solid #e8e8e8;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);position: sticky;top: 60px;z-index: 50;}
.format-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 16px;}
.format-actions {display: flex;gap: 12px;}
.format-btn.primary {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.format-btn.primary:hover {background-color: #ff7875;border-color: #ff7875;}
.format-content {display: flex;height: calc(100vh - 180px);padding: 24px;gap: 24px;}
.editor-section {flex: 1;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);overflow: hidden;display: flex;flex-direction: column;}
.editor-header {gap: 8px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #f0f0f0;margin-bottom: 16px;padding: 0 16px;}
.editor-title {font-size: 14px;font-weight: 500;color: #333;}
.editor-body {flex: 1;padding: 16px;overflow-y: auto;}
.editor-textarea {width: 100%;height: 100%;border: none;outline: none;font-size: 14px;line-height: 1.5;resize: none;font-family: inherit;}
/* 颜色选择器 */
.color-picker {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 12px;}
.color-item {width: 32px;height: 32px;border-radius: 4px;cursor: pointer;border: 2px solid transparent;transition: all 0.3s;}
.color-item:hover {transform: scale(1.1);}
.color-item.active {border: 2px solid #3498db;}
.color-input-container {position: relative;margin-top: 12px;}
.color-input-container .form-input {padding-right: 60px;}
.color-select-btn {position: absolute;right: 4px;top: 50%;transform: translateY(-50%);padding: 2px 8px;font-size: 12px;}
.color-picker-modal {display: none;position: absolute;background: #fff;border: 1px solid #d9d9d9;border-radius: 8px;padding: 16px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);z-index: 1000;margin-top: 8px;}
.color-picker-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}
.color-picker-header h4 {margin: 0;font-size: 14px;}
.color-picker-header button {background: none;border: none;font-size: 16px;cursor: pointer;}
.color-preview {width: 200px;height: 150px;background: linear-gradient(to right, #fff, #ff0000), linear-gradient(to bottom, #fff, #0000ff);background-blend-mode: multiply;border-radius: 4px;margin-bottom: 16px;position: relative;}
.color-picker-pointer {width: 12px;height: 12px;border: 2px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}
.color-slider {width: 100%;height: 8px;background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);border-radius: 4px;margin-bottom: 16px;position: relative;}
.slider-pointer {width: 16px;height: 16px;border: 2px solid #fff;border-radius: 50%;background: #ff0000;position: absolute;top: 50%;left: 0;transform: translate(-50%, -50%);cursor: pointer;}
.color-values {display: flex;gap: 8px;margin-bottom: 16px;}
.color-values > div {flex: 1;}
.color-values label {font-size: 12px;color: #666;display: block;margin-bottom: 4px;}
.color-values .form-input {font-size: 12px;}
.color-picker-footer {display: flex;justify-content: flex-end;gap: 8px;}
.color-picker-footer .btn {font-size: 12px;padding: 4px 12px;}
/* 字体设置 */
.font-settings {margin-bottom: 8px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;}
.font-settings-row {display: flex;gap: 8px;margin-bottom: 8px;}
.font-settings-row > div {flex: 1;}
.font-settings-label {font-size: 12px;}
/* 编辑器 */
.editor-tab {padding: 8px 16px;cursor: pointer;border-bottom: 2px solid transparent;transition: all 0.3s;}
.editor-tab.active {border-bottom-color: #ff4d4f;color: #ff4d4f;font-weight: 500;}
.editor-toolbar {padding: 12px 16px;border-bottom: 1px solid #e8e8e8;display: flex;gap: 8px;flex-wrap: wrap;}
.toolbar-btn {padding: 4px 8px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.toolbar-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.editor-content {flex: 1;padding: 16px;overflow-y: auto;font-size: 14px;line-height: 1.5;border: none;outline: none;resize: none;font-family: inherit;}
/* 预览区域 */
.preview-section {flex: 1;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);overflow: hidden;display: flex;flex-direction: column;}
.preview-header {padding: 16px;border-bottom: 1px solid #e8e8e8;font-size: 14px;font-weight: 500;color: #333;display: flex;align-items: center;gap: 8px;margin-bottom: 16px;}
.phone-preview {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;width: 90%;min-width: 340px;max-width: 340px;margin: 0 auto 20px;padding: 0;box-sizing: border-box;}
.phone-camera {position: absolute;top: 6px;left: 50%;transform: translateX(-50%);width: 8px;height: 8px;background: #333;border-radius: 50%;}
.phone-screen {height: 500px;border: 1px solid #e8e8e8;line-height: 1.6;width: 100%;max-height: calc(100% - 40px);background: #fff;border-radius: 24px;padding: 20px;overflow-y: auto;box-sizing: border-box;}
.phone-screen p:first-child {font-weight: 600;margin-bottom: 12px;}
.phone-screen p:nth-child(2) {color: #666;font-size: 12px;margin-bottom: 20px;}
.stats {border-top: 1px solid #e8e8e8;font-size: 13px;color: #666;margin-top: 20px;padding: 16px;background: #fafafa;border-radius: 6px;}
.stats p {font-size: 12px;color: #999;margin-bottom: 4px;}
/* 复选框组 */
.checkbox-group {display: flex;align-items: center;gap: 8px;margin-bottom: 8px;font-size: 13px;}
.checkbox-group input[type="checkbox"] {width: 14px;height: 14px;accent-color: #ff4d4f;}
.btn {padding: 8px 16px;border-radius: 6px;font-size: 14px;cursor: pointer;border: none;transition: all 0.3s;}
.btn-outline {padding: 8px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;margin: 0 10px;}
.btn-outline:hover {border-color: #ff4d4f;color: #ff4d4f;}
.btn-primary {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.btn-primary:hover {background-color: #ff7875;border-color: #ff7875;}
.preview-title {font-size: 14px;font-weight: 500;color: #333;}
.preview-body {flex: 1;padding: 16px;overflow-y: auto;line-height: 1.6;}
/* 公众号管理 */
.official-account-body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background-color: #f5f5f5;color: #333;}
.official-account-header {background-color: #fff;border-bottom: 1px solid #e8e8e8;padding: 0 24px;height: 60px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.official-account-header-left {display: flex;align-items: center;gap: 32px;}
.official-account-logo {display: flex;align-items: center;gap: 8px;font-size: 18px;font-weight: 600;color: #ff4d4f;}
.official-account-logo-icon {width: 24px;height: 24px;background-color: #ff4d4f;color: #fff;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;}
.official-account-nav-links {display: flex;align-items: center;gap: 24px;}
.official-account-nav-link {text-decoration: none;color: #666;font-size: 14px;transition: all 0.3s;}
.official-account-nav-link:hover {color: #1890ff;}
.official-account-nav-link.active {color: #1890ff;font-weight: 500;}
.official-account-header-right {display: flex;align-items: center;gap: 16px;}
.official-account-user-info {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #666;}
.official-account-user-avatar {width: 32px;height: 32px;border-radius: 50%;background-color: #1890ff;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px;}
.official-account-main-container {display: flex;min-height: calc(100vh - 60px);}
.official-account-sidebar {width: 240px;background-color: #fff;border-right: 1px solid #e8e8e8;padding: 24px 0;}
.official-account-sidebar-header {padding: 0 24px 16px;border-bottom: 1px solid #e8e8e8;}
.official-account-sidebar-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;}
.official-account-sidebar-subtitle {font-size: 12px;color: #999;}
.official-account-sidebar-menu {margin-top: 16px;}
.official-account-menu-item {padding: 12px 24px;font-size: 14px;color: #666;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;justify-content: space-between;}
.official-account-menu-item:hover {background-color: #f0f0f0;}
.official-account-menu-item.active {background-color: #fff2e8;color: #fa541c;font-weight: 500;}
.official-account-menu-item-count {font-size: 12px;color: #999;}
.official-account-content {flex: 1;padding: 24px;}
.official-account-content-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 24px;}
.official-account-content-title {font-size: 20px;font-weight: 600;color: #333;}
.official-account-btn {padding: 8px 16px;border-radius: 4px;font-size: 14px;cursor: pointer;border: none;transition: all 0.3s;}
.official-account-btn-primary {background: linear-gradient(135deg, #722ed1, #13c2c2);color: #fff;}
.official-account-btn-primary:hover {opacity: 0.9;}
.official-account-container {display: flex;gap: 24px;}
.official-account-group-section {width: 240px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);padding: 16px;}
.official-account-group-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid #f0f0f0;}
.official-account-group-title {font-size: 14px;font-weight: 600;color: #333;}
.official-account-group-count {font-size: 12px;color: #999;}

/* ============================================
   公众号授权页面样式
   主色调: #ff4d4f (红色)
   ============================================ */

/* 主容器 */
.official-account-container {
    display: flex;
    margin-top: 60px;
    min-height: calc(100vh - 60px);
}

/* 侧边栏 */
.official-account-sidebar {
    width: 200px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    padding: 20px 0;
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
}

.official-account-sidebar .sidebar-header {
    padding: 0 20px 20px;
    position: sticky;
    top: -16px;
    z-index: 2000;
    background: #fff;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
}

.official-account-sidebar .sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.official-account-sidebar .category-list {
    margin-top: 12px;
}

.official-account-sidebar .category-item {
    padding: 10px 16px;
    background-color: #fafafa;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

.official-account-sidebar .category-item:hover {
    background-color: #fff7e6;
    transform: translateX(4px);
}

.official-account-sidebar .category-item.active {
    background-color: #ff4d4f;
    color: #fff;
}

.official-account-sidebar .category-item.active .category-name {
    color: #fff;
}

.official-account-sidebar .category-item.active .category-count {
    color: rgba(255, 255, 255, 0.8);
}

.official-account-sidebar .category-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.official-account-sidebar .category-count {
    font-size: 12px;
    color: #999;
}

.official-account-sidebar .sidebar-actions {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 主内容区 */
.official-account-content {
    flex: 1;
    margin-left: 200px;
    padding: 24px;
    background: #fafafa;
}

/* 内容头部 */
.official-account-content .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.official-account-content .content-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* 按钮样式 */
.official-account-content .action-btn {
    background-color: #fff;
    color: #666;
    padding: 10px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: auto;
    max-width: none;
    box-sizing: border-box;
}

.official-account-content .action-btn:hover {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.official-account-content .action-btn.primary {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

.official-account-content .action-btn.primary:hover {
    background: linear-gradient(135deg, #ff7875 0%, #ff9c6e 100%);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 77, 79, 0.4);
}

.official-account-content .action-btn.secondary {
    background-color: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
}

.official-account-content .action-btn.secondary:hover {
    background-color: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
    transform: translateY(-1px);
}

.official-account-content .action-btn.danger {
    background-color: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
}

.official-account-content .action-btn.danger:hover {
    background-color: #ff7875;
    border-color: #ff7875;
}

/* 授权流程说明区域 */
.official-account-content .auth-guide-section {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.official-account-content .guide-header {
    text-align: center;
    margin-bottom: 32px;
}

.official-account-content .guide-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.official-account-content .guide-icon svg {
    color: #fff;
}

.official-account-content .guide-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.official-account-content .guide-desc {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.official-account-content .guide-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.official-account-content .guide-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    transition: all 0.3s;
}

.official-account-content .guide-step:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.official-account-content .step-number {
    width: 32px;
    height: 32px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.official-account-content .step-content {
    flex: 1;
}

.official-account-content .step-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.official-account-content .step-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.official-account-content .guide-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.official-account-content .tip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #666;
}

.official-account-content .tip-item svg {
    color: #ff4d4f;
    flex-shrink: 0;
}

/* 筛选栏 */
.official-account-content .filter-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.official-account-content .filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.official-account-content .filter-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.official-account-content .filter-link {
    padding: 8px 16px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s;
    background: #fafafa;
}

.official-account-content .filter-link:hover {
    background: #fff7e6;
    color: #ff4d4f;
}

.official-account-content .filter-link.active {
    background: #ff4d4f;
    color: #fff;
}

.official-account-content .filter-count {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
}

/* 搜索栏 */
.official-account-content .search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.official-account-content .search-input {
    flex: 1;
    max-width: 400px;
    padding: 10px 16px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.official-account-content .search-input:focus {
    outline: none;
    border-color: #ff4d4f;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
}

.official-account-content .search-btn {
    padding: 10px 20px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.official-account-content .search-btn:hover {
    background: #ff7875;
    transform: translateY(-1px);
}

/* 公众号网格 */
.official-account-content .account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* 公众号卡片 */
.official-account-content .account-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    cursor: pointer;
}

.official-account-content .account-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.official-account-content .account-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.official-account-content .account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.official-account-content .account-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.official-account-content .account-info {
    flex: 1;
    min-width: 0;
}

.official-account-content .account-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.official-account-content .account-id {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.official-account-content .account-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.official-account-content .account-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.official-account-content .account-badge.authorized {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.official-account-content .account-badge.unauthorized {
    background: #fff2e8;
    color: #fa8c16;
    border: 1px solid #ffbb96;
}

.official-account-content .account-badge.verified {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}

.official-account-content .account-badge.unverified {
    background: #f5f5f5;
    color: #999;
    border: 1px solid #d9d9d9;
}

.official-account-content .account-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: nowrap;
}

.official-account-content .account-action-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #fafafa;
    color: #666;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

.official-account-content .account-action-btn:hover {
    background: #ff4d4f;
    color: #fff;
}

.official-account-content .account-action-btn.primary {
    background: #ff4d4f;
    color: #fff;
}

.official-account-content .account-action-btn.primary:hover {
    background: #ff7875;
}

/* 空状态 */
.official-account-content .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
}

.official-account-content .empty-icon {
    width: 120px;
    height: 120px;
    background: #fafafa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.official-account-content .empty-icon svg {
    color: #d9d9d9;
}

.official-account-content .empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.official-account-content .empty-desc {
    font-size: 14px;
    color: #999;
    margin: 0 0 24px 0;
}

/* 分页 */
.official-account-content .pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    position: relative;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.official-account-content .pagination-btn {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

.official-account-content .pagination-btn:hover:not(:disabled) {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.official-account-content .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.official-account-content .pagination-info {
    font-size: 13px;
    color: #666;
    min-width: 150px;
    text-align: center;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.official-account-content .pagination-info strong {
    color: #333;
    font-weight: 600;
}

/* 区域分隔线 */
.official-account-content .section-divider {
    height: 16px;
    background: #f5f5f5;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
    padding: 0;
}

/* 弹窗样式 */
.official-account-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.official-account-modal-overlay.active {
    display: flex;
}

.official-account-modal-overlay .modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.official-account-modal-overlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.official-account-modal-overlay .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.official-account-modal-overlay .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #fafafa;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.official-account-modal-overlay .modal-close:hover {
    background: #ff4d4f;
    color: #fff;
}

.official-account-modal-overlay .modal-body {
    padding: 24px;
}

.official-account-modal-overlay .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #f0f0f0;
}

/* 授权弹窗 */
.official-account-modal-overlay .auth-modal {
    width: 500px;
}

.official-account-modal-overlay .auth-qrcode-section {
    display: flex;
    gap: 24px;
}

.official-account-modal-overlay .qrcode-container {
    width: 200px;
    height: 200px;
    background: #fafafa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}

.official-account-modal-overlay .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff4d4f;
    border-radius: 50%;
    animation: official-account-spin 0.8s linear infinite;
}

@keyframes official-account-spin {
    to { transform: rotate(360deg); }
}

.official-account-modal-overlay .qrcode-tips {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.official-account-modal-overlay .auth-tips {
    flex: 1;
}

.official-account-modal-overlay .auth-tips h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.official-account-modal-overlay .auth-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.official-account-modal-overlay .auth-tips li {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    border-bottom: 1px dashed #f0f0f0;
}

.official-account-modal-overlay .auth-tips li:last-child {
    border-bottom: none;
}

/* 详情弹窗 */
.official-account-modal-overlay .detail-modal {
    width: 600px;
}

.official-account-modal-overlay .detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.official-account-modal-overlay .detail-section {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.official-account-modal-overlay .detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.official-account-modal-overlay .detail-section-content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* 删除弹窗 */
.official-account-modal-overlay .delete-modal {
    width: 400px;
}

.official-account-modal-overlay .delete-content {
    text-align: center;
    padding: 20px 0;
}

.official-account-modal-overlay .delete-icon {
    width: 80px;
    height: 80px;
    background: #fff2f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.official-account-modal-overlay .delete-message {
    font-size: 16px;
    color: #333;
    margin: 0 0 12px 0;
}

.official-account-modal-overlay .delete-warning {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* 分组弹窗 */
.official-account-modal-overlay .group-modal {
    width: 400px;
}

.official-account-modal-overlay .group-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.official-account-modal-overlay .group-item {
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.official-account-modal-overlay .group-item:hover {
    background: #fff7e6;
}

.official-account-modal-overlay .group-item.active {
    background: #ff4d4f;
    color: #fff;
}

.official-account-modal-overlay .group-item-name {
    font-size: 14px;
    font-weight: 500;
}

.official-account-modal-overlay .group-item-count {
    font-size: 12px;
    opacity: 0.8;
}

/* 管理分组弹窗 */
.official-account-modal-overlay .group-manager-modal {
    width: 500px;
}

.official-account-modal-overlay .group-manager-header {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.official-account-modal-overlay .group-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.official-account-modal-overlay .group-input:focus {
    border-color: #ff4d4f;
}

.official-account-modal-overlay .group-input::placeholder {
    color: #999;
}

.official-account-modal-overlay .group-manager-list {
    max-height: 300px;
    overflow-y: auto;
}

.official-account-modal-overlay .group-manager-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.3s;
}

.official-account-modal-overlay .group-manager-item:hover {
    background: #f0f0f0;
}

.official-account-modal-overlay .group-manager-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    flex: 1;
}

.official-account-modal-overlay .group-manager-count {
    font-size: 12px;
    color: #999;
    width: 80px;
    text-align: right;
    margin-right: 16px;
}

.official-account-modal-overlay .group-manager-actions {
    display: flex;
    gap: 8px;
}

.official-account-modal-overlay .group-manager-actions button {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.official-account-modal-overlay .group-edit-btn {
    background: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
}

.official-account-modal-overlay .group-edit-btn:hover {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.official-account-modal-overlay .group-delete-btn {
    background: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
}

.official-account-modal-overlay .group-delete-btn:hover {
    background: #ff4d4f;
    color: #fff;
}

.official-account-modal-overlay .group-manager-input {
    flex: 1;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.official-account-modal-overlay .group-manager-input:focus {
    border-color: #ff7875;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}

.official-account-modal-overlay .group-save-btn {
    background: #ff4d4f;
    color: #fff;
    border: 1px solid #ff4d4f;
}

.official-account-modal-overlay .group-save-btn:hover {
    background: #ff7875;
    border-color: #ff7875;
}

.official-account-modal-overlay .group-cancel-btn {
    background: #fff;
    color: #666;
    border: 1px solid #d9d9d9;
}

.official-account-modal-overlay .group-cancel-btn:hover {
    background: #f5f5f5;
    border-color: #bfbfbf;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .official-account-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
    }

    .official-account-content {
        margin-left: 0;
        padding: 16px;
    }

    .official-account-content .guide-steps {
        grid-template-columns: 1fr;
    }

    .official-account-modal-overlay .auth-qrcode-section {
        flex-direction: column;
    }

    .official-account-modal-overlay .qrcode-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .official-account-content .account-grid {
        grid-template-columns: 1fr;
    }

    .official-account-modal-overlay .modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .official-account-content .content-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .official-account-content .content-header h2 {
        margin-bottom: 0;
    }

    .official-account-content .action-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    .official-account-content .search-bar {
        flex-direction: column;
    }

    .official-account-content .search-input {
        max-width: 100%;
    }

    .official-account-content .filter-links {
        flex-direction: column;
        width: 100%;
    }

    .official-account-content .filter-link {
        text-align: center;
    }
}
.official-account-group-item {display: flex;align-items: center;justify-content: space-between;padding: 10px 0;cursor: pointer;transition: all 0.3s;}
.official-account-group-item:hover {color: #1890ff;}
.official-account-group-item.active {color: #1890ff;font-weight: 500;}
.official-account-section {flex: 1;}
.official-account-section-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.official-account-section-count {font-size: 14px;color: #999;}
.official-account-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 16px;}
.official-account-card {background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);padding: 16px;display: flex;flex-direction: column;}
.official-account-card-header {display: flex;align-items: center;gap: 12px;margin-bottom: 12px;}
.official-account-card-avatar {width: 48px;height: 48px;border-radius: 50%;background-color: #f0f0f0;display: flex;align-items: center;justify-content: center;font-size: 20px;}
.official-account-card-details {flex: 1;}
.official-account-card-name {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 4px;}
.official-account-card-id {font-size: 12px;color: #999;margin-bottom: 4px;}
.official-account-card-status {display: flex;align-items: center;gap: 8px;}
.official-account-card-status-badge {padding: 2px 8px;border-radius: 10px;font-size: 12px;}
.official-account-card-status-active {background-color: #f6ffed;color: #52c41a;}
.official-account-card-status-verified {background-color: #e6f7ff;color: #1890ff;}
.official-account-card-actions {display: flex;gap: 8px;margin-top: 12px;}
.official-account-card-action-btn {flex: 1;padding: 6px 12px;border: 1px solid #d9d9d9;border-radius: 4px;background-color: #fff;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.official-account-card-action-btn:hover {border-color: #1890ff;color: #1890ff;}
/* 联系我们 */
.contact-container {max-width: 1200px;margin: 0 auto;padding: 0 24px;}
.contact-content {padding: 40px;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);max-width: 800px;margin: 40px auto;display: flex;gap: 48px;align-items: flex-start;}
.contact-header {text-align: center;}
/* 格式化文章页面 */
.format-article-wrapper {display: flex;gap: 20px;width: 100%;min-height: calc(100vh - 120px);padding: 0 20px;position: relative;}
/* 左侧排版设置 */
.format-article-wrapper .sidebar {width: 30%;min-width: 200px;background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;flex-direction: column;flex-shrink: 0;}
/* 顶部选项卡 */
.sidebar-tabs {display: flex;border-bottom: 1px solid #f0f0f0;padding: 10px 16px;/* overflow-x: auto;*/
    white-space: nowrap;-ms-overflow-style: none;scrollbar-width: none;}
.sidebar-tabs::-webkit-scrollbar {display: none;}
.tab-btn {padding: 8px 16px;margin-right: 12px;border: none;background: transparent;color: #666;border-radius: 4px;font-size: 14px;cursor: pointer;flex-shrink: 0;transition: all 0.3s;}
.tab-btn.active {background: #f0f9ff;color: #1890ff;}
/* 侧边栏内容 */
.sidebar-content {flex: 1;display: flex;flex-direction: row;overflow: hidden;}
/* 左侧导航 */
.sidebar-nav {width: 55px;border-right: 1px solid #f0f0f0;padding: 8px 0;flex-shrink: 0;}
.sidebar-nav .nav-item {padding: 12px 0;cursor: pointer;text-align: center;color: #666;font-size: 12px;display: flex;flex-direction: column;align-items: center;writing-mode: horizontal-tb;text-orientation: mixed;transition: all 0.3s;}
.sidebar-nav .nav-item.active {color: #1890ff;}
.sidebar-nav .nav-item .nav-icon {font-size: 16px;margin-bottom: 4px;display: flex;align-items: center;justify-content: center;width: 100%;}
.sidebar-nav .nav-item .nav-text {display: flex;align-items: center;justify-content: center;width: 100%;}
/* 右侧内容 */
.sidebar-main {flex: 1;padding: 16px;overflow-y: auto;display: flex;flex-direction: column;}
/* 子选项卡 */
.sub-tabs {display: flex;margin-bottom: 12px;border-bottom: 1px solid #f0f0f0;padding-bottom: 8px;flex-wrap: wrap;}

/* ============ 智能创作页面样式 ============ */

/* 内容头部 */
#swContentHeader {justify-content: space-between;align-items: center;margin-bottom: 24px;}
#swContentTitle {font-size: 18px;font-weight: 600;color: #333;}
/* 筛选器容器 */
.smart-writing-filters, .draft-writing-filters {gap: 12px;margin-bottom: 24px;flex-wrap: wrap;}
.draft-writing-filters {display: none;}
/* 筛选按钮 */
.smart-writing-filters .filter-btn, .draft-writing-filters .filter-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 4px;font-size: 12px;cursor: pointer;background: #fff;color: #666;transition: all 0.3s;}
.smart-writing-filters .filter-btn.active,
.draft-writing-filters .filter-btn.active {background: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.smart-writing-filters .filter-btn:hover:not(.active),
.draft-writing-filters .filter-btn:hover:not(.active) {border-color: #ff4d4f;color: #ff4d4f;}

/* 文章列表头部 */
.article-list-header {display: grid;grid-template-columns: 150px 120px 120px 1fr 150px 120px;gap: 16px;padding: 16px 20px;background-color: #fafafa;border-radius: 12px 12px 0 0;border-bottom: 1px solid #e8e8e8;}
.article-list-header > div {font-size: 14px;font-weight: 600;color: #333;}
/* 草稿列表头部 */
.draft-list-header {display: grid;grid-template-columns: 2fr 150px 120px 150px;gap: 16px;padding: 16px 20px;background-color: #fafafa;border-radius: 12px 12px 0 0;border-bottom: 1px solid #e8e8e8;}
.draft-list-header > div {font-size: 14px;font-weight: 600;color: #333;}
.draft-list-header > div:last-child {text-align: center;}
/* 空状态 */
#emptyState {text-align: center;padding: 64px 24px;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
#emptyState .empty-icon {font-size: 48px;color: #e8e8e8;margin-bottom: 16px;}
#emptyState .empty-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;}
#emptyState .empty-desc {font-size: 14px;color: #999;margin-bottom: 24px;}
#emptyState .empty-btn {padding: 10px 24px;background-color: #ff4d4f;color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
#emptyState .empty-btn:hover {background-color: #ff7875;}
/* 分页 */
#pagination {display: flex;align-items: center;justify-content: center;margin-top: 24px;gap: 12px;}
.pagination-info {font-size: 14px;color: #666;}
/* 智能创作列表分页按钮 */
.sw-prev-btn, .sw-next-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background: #fff;color: #666;font-size: 14px;cursor: pointer;margin: 0 4px;display: none;transition: all 0.3s;}
.sw-prev-btn:hover,
.sw-next-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
/* 草稿列表分页按钮 */
.draft-prev-btn,.draft-next-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background: #fff;color: #666;font-size: 14px;cursor: pointer;margin: 0 4px;display: none;transition: all 0.3s;}
.draft-prev-btn:hover,.draft-next-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
/* 草稿列表容器默认隐藏 */
#draftListContainer {display: none;}

/* 动态加载内容样式 */
.loading-container {text-align: center;padding: 24px;}
.loading-spinner {display: inline-block;width: 16px;height: 16px;border: 2px solid #ff4d4f;border-top-color: transparent;border-radius: 50%;animation: spin 0.8s linear infinite;vertical-align: middle;margin-right: 8px;}
@keyframes spin {to {transform: rotate(360deg);}}
.article-item {display: grid;grid-template-columns: 150px 120px 120px 1fr 150px 120px;gap: 16px;padding: 16px 20px;border-bottom: 1px solid #f0f0f0;align-items: center;transition: background-color 0.2s;}
.article-item:hover {background-color: #fafafa;}
.article-item > div {font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.article-item > div:nth-child(1) {color: #333;font-weight: 500;}
.article-item > div:nth-child(2),.article-item > div:nth-child(3),.article-item > div:nth-child(4),.article-item > div:nth-child(5) {color: #666;}
.article-item > div:last-child {text-align: center;}
.sw-action-btn {padding: 6px 16px;background-color: #ff4d4f;color: #fff;border: none;border-radius: 4px;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.sw-action-btn:hover {background-color: #ff7875;}
.status-tag {display: inline-block;padding: 4px 12px;border-radius: 20px;font-size: 12px;}
.status-pending {background-color: #fff7e6;color: #fa8c16;}
.status-generating {background-color: #e6f7ff;color: #1890ff;}
.status-generated {background-color: #f6ffed;color: #52c41a;}
.status-failed {background-color: #fff1f0;color: #ff4d4f;}
.status-saved {background-color: #f9f0ff;color: #722ed1;}
.draft-item {display: grid;grid-template-columns: 2fr 150px 120px 150px;gap: 16px;padding: 16px 20px;border-bottom: 1px solid #f0f0f0;align-items: center;transition: background-color 0.2s;}
.draft-item:hover {background-color: #fafafa;}
.draft-item > div {font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.draft-item > div:nth-child(1) {color: #333;}
.draft-item > div:nth-child(2) {color: #666;}
.draft-item > div:nth-child(3) {padding: 4px 12px;border-radius: 20px;font-size: 12px;text-align: center;}
.draft-item > div:last-child {text-align: center;}
.draft-action-btn {padding: 4px 12px;border-radius: 4px;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.draft-action-btn.edit-btn {background-color: #fff;color: #666;border: 1px solid #e8e8e8;margin-right: 8px;}
.draft-action-btn.edit-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.draft-action-btn.delete-btn {background-color: #fff;color: #ff4d4f;border: 1px solid #ffccc7;}
.draft-action-btn.delete-btn:hover {background-color: #fff1f0;}
.draft-status-published {background-color: #f6ffed;color: #52c41a;}
.draft-status-pending {background-color: #fff7e6;color: #fa8c16;}
.draft-status-publishing {background-color: #e6f7ff;color: #1890ff;}
.draft-status-error {background-color: #fff1f0;color: #ff4d4f;}

.sub-tab {padding: 8px 16px;margin-right: 8px;cursor: pointer;color: #666;font-size: 14px;border-bottom: 2px solid transparent;transition: all 0.3s;}
.sub-tab.active {color: #333;border-bottom: 2px solid #1890ff;}
/* 二级子选项卡 */
.sub-sub-tabs {display: none;margin-bottom: 16px;flex-wrap: wrap;}
.sub-sub-tabs.active {display: flex;}
.sub-sub-tab {padding: 4px 12px;margin-right: 8px;margin-bottom: 8px;cursor: pointer;color: #666;font-size: 12px;background: #f5f5f5;border-radius: 4px;transition: all 0.3s;}
.sub-sub-tab.active {color: #333;background: #f0f9ff;}

/* 弹窗样式 */
.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);display: none;align-items: center;justify-content: center;z-index: 1000;}
.modal-content {background: #fff;border-radius: 12px;width: 90%;max-width: 600px;overflow: hidden;}
#formatArticleModal .modal-content {max-height: 90vh;display: flex;flex-direction: column;}
.modal-header {display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;border-bottom: 1px solid #f0f0f0;}
#formatArticleModal .modal-header {flex-shrink: 0;}
.modal-header h3 {font-size: 16px;font-weight: 600;color: #333;margin: 0;}
.modal-close {background: none;border: none;font-size: 24px;color: #999;cursor: pointer;}
.modal-body {padding: 24px;}
#formatArticleModal .modal-body {overflow-y: auto;flex: 1;}
.modal-footer {padding: 16px 24px;border-top: 1px solid #f0f0f0;display: flex;justify-content: flex-end;gap: 8px;}
#formatArticleModal .modal-footer {flex-shrink: 0;}

/* 表单样式 */
.form-group {margin-bottom: 16px;}
.form-group label {display: block;font-size: 13px;color: #666;margin-bottom: 8px;}
.form-input {width: 100%;padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;transition: all 0.3s;}
.form-textarea {width: 100%;padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;resize: vertical;min-height: 100px;transition: all 0.3s;}
#formatPromptText {min-height: 150px;}
.form-hint {font-size: 12px;color: #999;margin-top: 4px;}
.form-warning {font-size: 12px;color: #ff4d4f;margin-top: 4px;}
.form-info {font-size: 12px;color: #1890ff;margin-top: 4px;}
.radio-group {display: flex;gap: 16px;}
.radio-item {display: flex;align-items: center;gap: 4px;}
.radio-item span {font-size: 14px;color: #333;}

/* 按钮样式 */
.btn {padding: 8px 16px;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.btn-secondary {background-color: #fff;color: #666;border: 1px solid #e8e8e8;}
.btn-primary {background-color: #ff4d4f;color: #fff;border: none;}

/* 提示框样式 */
.tip-box {background: #fffbe6;border: 1px solid #ffe58f;border-radius: 8px;padding: 12px 16px;margin-top: 8px;}
.tip-box p {font-size: 12px;color: #ad8b00;margin: 0;line-height: 1.6;}

/* 提示词库页面样式 */
.content-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;}
.content-title {font-size: 18px;font-weight: 600;color: #333;}
.prompt-list-container {display: none;border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.09);overflow: hidden;}
.prompt-list-header {display: grid;grid-template-columns: 150px 120px 120px 1fr 150px 120px;gap: 16px;padding: 16px 20px;background-color: #fafafa;border-radius: 12px 12px 0 0;border-bottom: 1px solid #e8e8e8;}
.prompt-list-header > div {font-size: 14px;font-weight: 600;color: #333;}
.loading-more {display: none;text-align: center;padding: 20px;color: #999;font-size: 14px;border-bottom: 1px solid #f0f0f0;}
.no-more-data {display: none;text-align: center;padding: 20px;color: #999;font-size: 14px;border-bottom: 1px solid #f0f0f0;}
.empty-state {text-align: center;padding: 64px 24px;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.09);}
.empty-state .empty-icon {font-size: 48px;color: #e8e8e8;margin-bottom: 16px;}
.empty-state .empty-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;}
.empty-state .empty-desc {font-size: 14px;color: #999;margin-bottom: 24px;}
.empty-btn {padding: 10px 24px;background-color: #ff4d4f;color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.pagination-btn {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.pagination-btn:hover:not(:disabled) {border-color: #ff4d4f;color: #ff4d4f;}
.pagination-btn:disabled {opacity: 0.5;cursor: not-allowed;}
.pagination-info {font-size: 14px;color: #666;}

/* 模态框内标题 */
.modal-title {display: flex;align-items: center;gap: 8px;}
.modal-icon {font-size: 16px;}

/* 分类管理列表 */
.category-list-header {display: grid;grid-template-columns: 1fr 1fr 120px;gap: 16px;padding: 12px 16px;background-color: #fafafa;border-radius: 8px;margin-bottom: 16px;}
.category-list-header > div {font-size: 13px;font-weight: 600;color: #333;}
.category-list-header > div:last-child {text-align: center;}
.empty-category {text-align: center;padding: 40px 20px;}
.empty-category .empty-icon {font-size: 32px;margin-bottom: 12px;}
.empty-category .empty-text {font-size: 14px;color: #333;margin-bottom: 4px;}
.empty-category .empty-desc {font-size: 13px;color: #999;}

/* 打造记录表格 */
.record-loading {display: none;text-align: center;padding: 40px;}
.record-loading .loading-spinner {display: inline-block;width: 24px;height: 24px;border: 2px solid #ff4d4f;border-top-color: transparent;border-radius: 50%;animation: spin 0.8s linear infinite;}
.record-loading p {margin-top: 16px;color: #999;}
.record-error {display: none;text-align: center;padding: 40px;color: #ff4d4f;}
.record-table-container {display: none;}
.record-table {width: 100%;border-collapse: collapse;font-size: 14px;}
.record-table thead tr {background-color: #fafafa;}
.record-table th {padding: 12px 16px;text-align: left;font-weight: 600;color: #333;border-bottom: 1px solid #e8e8e8;}
.record-table td {padding: 12px 16px;text-align: left;color: #333;border-bottom: 1px solid #e8e8e8;}
.record-empty {display: none;text-align: center;padding: 40px;color: #999;}
.record-pagination {display: none;padding: 16px 24px;border-top: 1px solid #f0f0f0;justify-content: flex-end;gap: 8px;}
.record-page-info {line-height: 32px;font-size: 14px;color: #666;}
.record-btn {padding: 8px 16px;background-color: #fff;color: #666;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
/* 打造记录弹窗特殊样式 */
#recordModal .modal-content {max-width: 900px;max-height: 80vh;overflow: hidden;margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#recordModal .modal-body {max-height: calc(80vh - 140px);overflow-y: auto;}
/* 搜索框 */
.search-box {margin-bottom: 16px;align-items: center;display: flex;gap: 12px;}
.search-box input {flex: 1;padding: 8px 12px;border: 1px solid #e8e8e8;border-radius: 4px;font-size: 12px;}
.search-box button {margin-left: 8px;padding: 8px 12px;border: 1px solid #e8e8e8;background: #fff;border-radius: 4px;cursor: pointer;}
/* 样式模板 */
/* 分类标签栏 */
.category-tabs {display: flex;gap: 8px;margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #e8e8e8;overflow-x: auto;}
.category-tab {padding: 6px 12px;font-size: 13px;color: #666;cursor: pointer;border-radius: 4px;white-space: nowrap;transition: all 0.2s;}
.category-tab:hover {background: #f5f5f5;}
.category-tab.active {background: #fff;color: #ff6b00;font-weight: bold;border-bottom: 2px solid #ff6b00;border-radius: 4px 4px 0 0;}
.template-grid {column-count: 2;column-gap: 12px;}
.template-item {position: relative;overflow: hidden;background: #fff;break-inside: avoid;margin-bottom: 12px;border: 1px solid #e8e8e8;border-radius: 6px;padding: 12px;cursor: pointer;text-align: center;transition: all 0.3s;}
.template-item:hover {border-color: #1890ff;box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);}
.template-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s ease;pointer-events: none;z-index: 1000;}
.template-item:hover .template-overlay {opacity: 1;pointer-events: auto;}
.template-preview {position: relative;z-index: 1;min-height: 100px;overflow: hidden;}
.copy-btn {background: #fff;background-color: rgba(255, 255, 255, 0.3);border: none;border-radius: 4px;padding: 8px 12px;font-size: 12px;color: #fff;cursor: pointer;transition: all 0.3s;}
.copy-btn:hover {background: #f0f5ff;background-color: rgba(255, 255, 255, 0.4);}
.copy-btn.copied {background: #52c41a;color: #fff;}
/* 模板预览区域 */


.template-preview img {max-width: 100%;height: auto;display: block;}
/* 加载更多提示 */
.loading-more, .no-more {display: flex;align-items: center;justify-content: center;padding: 16px;color: #999;font-size: 14px;}
.loading-spinner {width: 16px;height: 16px;border: 2px solid #f3f3f3;border-top: 2px solid #1890ff;border-radius: 50%;animation: spin 1s linear infinite;margin-right: 8px;}
@keyframes spin {0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.template-preview .template-title {font-size: 18px;font-weight: bold;color: #ff6b00;margin-bottom: 8px;}
.template-preview .template-content {font-size: 14px;color: #333;line-height: 1.6;word-break: break-word;}
.template-preview .template-content img {max-width: 100%;height: auto;margin: 4px 0;}
.template-preview .template-content section {display: block;margin: 4px 0;}
/* 底部标签区域 */
.template-tags {display: flex;flex-wrap: wrap;gap: 6px;padding: 8px 12px;background: #f8f9fa;border-top: 1px solid #e8e8e8;}
.template-tags .tag {padding: 3px 8px;font-size: 12px;color: #666;background: #fff;border: 1px solid #e8e8e8;border-radius: 4px;}
/* 右侧编辑和预览区域 */
.format-main {width: 45%;min-width: 400px;display: flex;flex-direction: column;gap: 20px;margin-left: 33%;margin-top: 10px;}
/* 顶部操作栏 */
.action-bar {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 12px;}
.action-bar-left {display: flex;gap: 12px;}
.action-bar-right {display: flex;gap: 12px;}
/* 编辑器容器 */
.editor-container {width: 100%;background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;flex-direction: column;min-width: 300px;box-sizing: border-box;}
/* 确保编辑器容器内的元素能够完全填充宽度 */
.editor-container > * {width: 100%!important;box-sizing: border-box;}
#visualEditorContainer {width: 100%!important;flex: 1!important;min-height: 500px!important;padding: 0!important;margin: 0!important;display: block;}
#visualEditor {width: 100%!important;height: 100%!important;min-height: 500px!important;border: none!important;margin: 0!important;padding: 0!important;}
.editor-tabs {display: flex;}
.format-editor-tab {border-bottom: 2px solid transparent;padding: 12px 20px;font-size: 14px;font-weight: 500;color: #666;border-bottom: 2px solid transparent;cursor: pointer;transition: all 0.3s;}
.format-editor-tab.active {font-weight: 500;color: #ff4d4f;border-bottom: 2px solid #ff4d4f;}
.editor-stats {display: flex;gap: 20px;font-size: 13px;color: #666;}
.editor-stats em {font-style: normal;color: #ff4d4f;font-weight: 500;}
/* Markdown 编辑器 */
#markdownEditorContainer {display: none;flex: 1;min-height: 600px;}
#markdownEditor {width: 100%;height: 100%;min-height: 500px;}
/* 字数统计 */
.word-count {margin-top: 16px;font-size: 12px;color: #999;}
/* 预览区域 */
.preview-sidebar {width: 20%;min-width: 200px;height: calc(100vh - 120px);background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;flex-direction: column;flex-shrink: 0;position: fixed;right: 20px;left: auto;overflow-y: auto;}
.phone-frame {position: relative;width: 100%;height: 680px;background: #000;border-radius: 45px;padding: 12px;box-sizing: border-box;overflow: hidden;}
.phone-inner {position: relative;width: 100%;height: 100%;background: #fff;border-radius: 35px;overflow: hidden;display: flex;flex-direction: column;}
.phone-notch {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 150px;height: 35px;background: #000;border-radius: 0 0 25px 25px;z-index: 100;}
.phone-status-bar {position: relative;display: flex;justify-content: space-between;align-items: center;padding: 50px 25px 10px;color: #000;font-size: 15px;font-weight: 600;background: #fff;z-index: 50;}
.status-right {display: flex;gap: 6px;align-items: center;}
.phone-header {display: flex;justify-content: space-between;align-items: center;padding: 5px 20px 15px;background: #fff;font-size: 18px;}
.close-btn, .more-btn {cursor: pointer;opacity: 0.6;}
.phone-content {flex: 1;background: #fff;padding: 0 10px;overflow-x: hidden;overflow-y: auto;}
.phone-content::-webkit-scrollbar {width: 4px;}
.phone-content::-webkit-scrollbar-track {background: transparent;}
.phone-content::-webkit-scrollbar-thumb {background: #ddd;border-radius: 2px;}
.phone-content::-webkit-scrollbar-thumb:hover {background: #ccc;}
.article-meta {display: flex;flex-wrap: wrap;gap: 8px;align-items: center;}
.meta-tag {font-size: 12px;color: #999;background: #f0f0f0;padding: 2px 6px;border-radius: 3px;}
.meta-text {font-size: 12px;color: #999;}
.meta-author {color: #1890ff;}
.meta-divider {font-size: 12px;color: #ddd;}
.meta-date {font-size: 12px;color: #999;}
.article-location {display: flex;align-items: center;gap: 6px;font-size: 12px;color: #999;margin-bottom: 10px;}
.location-text {font-size: 12px;color: #999;}
.location-icon {font-size: 12px;margin-top: 5px;;}
.article-divider {height: 1px;background: #f0f0f0;margin: 0 -25px 20px;}
.article-section-title {font-size: 21px;font-weight: bold;color: #333;margin: 0 0 18px 0;padding-bottom: 6px;border-bottom: 2px solid #1890ff;display: inline-block;}
.article-author {font-size: 19px;color: #333;font-weight: 500;margin: 0 0 18px 0;padding-left: 12px;border-left: 3px solid #1890ff;}
.article-text {font-size: 16px;line-height: 1.8;color: #333;margin: 0 0 18px 0;}
.article-body {transform-origin: top center;transform: scale(0.9);padding: 0 10px;margin: 0 -10px;}
.article-body img {max-width: 100% !important;height: auto !important;}
.article-image {width: 100%;height: auto;border-radius: 6px;margin: 18px 0;}
.phone-bottom-bar {display: flex;justify-content: space-around;align-items: center;padding:8px 10px 5px 10px;background: #fff;border-top: 1px solid #f0f0f0;}
.bottom-item {display: flex;flex-direction: column;align-items: center;gap: 2px;color: #666;font-size: 11px;margin: 0 5px;;}
.bottom-item:nth-child(1) .bottom-icon {background: #f0f0f0;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;}
.bottom-item:nth-child(2) {flex: 1;flex-direction: row;justify-content: flex-start;padding-left: 12px;font-size: 14px;color: #333;}
.bottom-icon {font-size: 18px;}
.bottom-count {font-size: 11px;}
.bottom-text {font-size: 14px;}
.phone-home-indicator {position: relative;width: 130px;height: 5px;background: #000;border-radius: 3px;margin: 8px auto 10px;}
/* 排版设置样式 */
.format-settings {background: #fff;border-radius: 8px;padding:0 16px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.settings-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.settings-header h3 {font-size: 16px;font-weight: 500;color: #333;margin: 0;}
.hide-btn {background: #f0f0f0;border: none;border-radius: 4px;padding: 4px 12px;font-size: 12px;color: #666;cursor: pointer;}
.settings-section {margin-bottom: 20px;}
.section-title span:first-child {margin-right: 8px;}
.style-selector {display: flex;gap: 12px;align-items: center;position: relative;}
/* 自定义下拉菜单样式 */
.custom-select {position: relative;flex: 1;}
.custom-select-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 12px;border: 1px solid #e8e8e8;border-radius: 8px;background: white;cursor: pointer;font-size: 14px;}
.custom-select-header:hover {border-color: #1890ff;}
.select-arrow {font-size: 12px;color: #999;transition: transform 0.3s;}
.custom-select.open .select-arrow {transform: rotate(180deg);}
.custom-select-dropdown {position: absolute;top: 100%;left: 0;right: 0;background: white;border: 1px solid #e8e8e8;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);z-index: 1000;max-height: 300px;overflow-y: auto;margin-top: 4px;display: none;}
.custom-select.open .custom-select-dropdown {display: block;}
.custom-select-option {padding: 10px 12px;cursor: pointer;font-size: 14px;transition: background-color 0.2s;}
.custom-select-option:hover {background-color: #f0f0f0;}
.custom-select-option.active {background-color: #e6f7ff;border-left: 3px solid #1890ff;}
.custom-select-option .option-emoji {margin-right: 8px;}
.custom-select-option .option-label {font-weight: 500;display: block;}
.custom-select-option .option-description {font-size: 12px;color: #999;margin-top: 4px;display: block;}
.random-style {background: #f0f0f0;border: none;border-radius: 4px;padding: 8px 12px;font-size: 12px;color: #666;cursor: pointer;}
.random-style:hover {background: #e0e0e0;}
/* 共用标题区域样式 */
.common-title-section {padding: 16px;background: #fff;border-bottom: 1px solid #e8e8e8;}
.common-title-section .section-title {margin-bottom: 12px;}
/* 文章标题输入框样式 */
.title-input-wrapper {position: relative;display: flex;align-items: center;}
.article-title-input {width: 100%;padding: 10px 50px 10px 12px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;outline: none;transition: border-color 0.3s;}
.article-title-input:focus {border-color: #1890ff;box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);}
.article-title-input::placeholder {color: #999;}
.title-count {position: absolute;right: 12px;font-size: 12px;color: #999;}
.color-options {display: grid;grid-template-columns: repeat(6, 1fr);gap: 8px;margin-bottom: 12px;}
.color-input {display: flex;gap: 8px;align-items: center;}
.color-code {flex: 1;padding: 8px;border: 1px solid #e8e8e8;border-radius: 4px;font-size: 14px;}
.color-picker-input {width: 40px;height: 36px;border: 1px solid #e8e8e8;border-radius: 4px;cursor: pointer;}
.setting-item {display: flex;flex-direction: column;gap: 4px;}
.setting-item label {font-size: 12px;color: #666;}
.setting-item select {padding: 6px;border: 1px solid #e8e8e8;border-radius: 4px;font-size: 14px;}
.setting-item.checkbox {flex-direction: row;align-items: center;gap: 8px;}
.setting-item.checkbox input[type="checkbox"] {width: 16px;height: 16px;}
.setting-item.checkbox label {font-size: 14px;color: #333;margin: 0;}
.note {font-size: 12px;color: #999;margin-left: 8px;}
.other-settings {display: flex;flex-direction: column;gap: 12px;}
.phone-top {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 60%;max-width: 160px;height: 24px;background: #000;border-radius: 0 0 12px 12px;display: flex;align-items: center;justify-content: center;}
.phone-screen h1 {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 8px;}
.phone-screen h2 {font-size: 14px;color: #666;margin-bottom: 16px;}
.phone-screen p {font-size: 14px;color: #333;line-height: 1.6;}
.phone-footer {position: absolute;bottom: 16px;left: 0;right: 0;height: 60px;background-color: #f0f0f0;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;display: flex;align-items: center;justify-content: space-around;padding: 0 20px;gap: 24px;}
.phone-icon {font-size: 16px;cursor: pointer;transition: transform 0.3s;}
.phone-icon:hover {transform: scale(1.1);}
.stats p:first-child {font-size: 13px;color: #666;margin-bottom: 8px;}
/* 排版页面 */

.format-sidebar {width: 300px;background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;flex-direction: column;flex-shrink: 0;}
.format-sidebar-tabs {display: flex;border-bottom: 1px solid #f0f0f0;padding: 10px 16px;overflow-x: auto;white-space: nowrap;-ms-overflow-style: none;scrollbar-width: none;}
.format-sidebar-tabs::-webkit-scrollbar {display: none;}
.format-sidebar-content {flex: 1;display: flex;}
.format-sidebar-nav {width: 80px;border-right: 1px solid #f0f0f0;padding: 8px 0;}
.format-nav-item {padding: 12px 0;cursor: pointer;text-align: center;color: #666;font-size: 12px;display: flex;flex-direction: column;align-items: center;writing-mode: horizontal-tb;text-orientation: mixed;transition: all 0.3s;}
.format-nav-item:hover {color: #1890ff;}
.format-nav-item.active {color: #1890ff;}
.format-nav-item-icon {font-size: 16px;margin-bottom: 4px;display: flex;align-items: center;justify-content: center;width: 100%;}
.format-nav-item-text {display: flex;align-items: center;justify-content: center;width: 100%;}
.format-sidebar-body {flex: 1;padding: 16px;overflow-y: auto;}
.format-sub-tabs {display: flex;margin-bottom: 16px;border-bottom: 1px solid #f0f0f0;padding-bottom: 8px;}
.format-sub-sub-tabs {display: flex;margin-bottom: 16px;flex-wrap: wrap;}
.format-search {margin-bottom: 16px;display: flex;align-items: center;}
.format-search-input {flex: 1;padding: 8px 12px;border: 1px solid #e8e8e8;border-radius: 4px;font-size: 12px;}
.format-search-btn {margin-left: 8px;padding: 8px 12px;border: 1px solid #e8e8e8;background: #fff;border-radius: 4px;cursor: pointer;}
.format-templates {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;}
.format-main-header {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 12px;}
.format-main-actions {display: flex;gap: 12px;}
.format-editor-container {flex: 1;min-height: 600px;position: relative;}
.format-editor {width: calc(100% - 340px);background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;flex-direction: column;min-width: 300px;}
.format-editor-header {display: flex;border-bottom: 1px solid #f0f0f0;margin-bottom: 16px;}
.format-editor-content {flex: 1;min-height: 500px;}
.format-editor-textarea {width: 100%;height: 100%;min-height: 500px;border: 1px solid #e8e8e8;border-radius: 4px;padding: 12px;font-size: 14px;resize: none;font-family: inherit;}
.format-editor-word-count {margin-top: 16px;font-size: 12px;color: #999;}
.format-preview {width: 320px;background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);position: absolute;top: 0;right: 0;z-index: 10;}
.format-preview-header {font-size: 14px;font-weight: 500;color: #333;margin-bottom: 16px;}
.format-phone-preview {position: relative;width: 280px;height: 560px;margin: 0 auto;background: #f5f5f5;border-radius: 32px;padding: 20px;}
.format-phone-top {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 160px;height: 24px;background: #000;border-radius: 0 0 12px 12px;}
.format-phone-camera {position: absolute;top: 6px;left: 50%;transform: translateX(-50%);width: 8px;height: 8px;background: #333;border-radius: 50%;}
.format-phone-screen {width: 100%;height: 100%;background: #fff;border-radius: 24px;padding: 20px;overflow-y: auto;}
.format-phone-footer {position: absolute;bottom: 16px;left: 0;right: 0;display: flex;justify-content: center;gap: 24px;}
.format-phone-icon {font-size: 16px;cursor: pointer;}
.format-stats {margin-top: 20px;padding: 16px;background: #fafafa;border-radius: 6px;}
.format-stats-title {font-size: 13px;color: #666;margin-bottom: 8px;}
.format-stats-item {font-size: 12px;color: #999;margin-bottom: 4px;}
.contact-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 16px;}
.contact-subtitle {font-size: 14px;color: #999;}
.contact-info {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 32px;margin-bottom: 40px;flex: 1;}
.contact-item {text-align: center;}
.contact-icon {font-size: 48px;margin-bottom: 16px;}
.contact-item-title {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 8px;}
.contact-item-content {font-size: 14px;color: #666;line-height: 1.5;}
.contact-form {margin-top: 40px;}
.form-row {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 16px;margin-bottom: 16px;}
.form-textarea {width: 100%;padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 8px;font-size: 14px;line-height: 1.5;resize: vertical;min-height: 120px;font-family: inherit;}
.form-textarea:focus {outline: none;border-color: #ff4d4f;box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);}
/* 找回密码 */
.reset-container {display: flex;height: 100vh;background-color: #f5f5f5;}
.reset-section {flex: 1;display: flex;justify-content: center;align-items: center;padding: 40px;}
.reset-card {background-color: #fff;border-radius: 12px;padding: 40px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;}
.reset-header {margin-bottom: 32px;text-align: center;}
.reset-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.reset-subtitle {font-size: 14px;color: #999;}
/* 推广页面 */
.referral-container {margin-top: 60px;min-height: calc(100vh - 60px);}
.referral-content {padding: 40px;background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);max-width: 800px;margin: 40px auto;}
.referral-header {text-align: center;margin-bottom: 40px;}
.referral-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 16px;}
.referral-subtitle {font-size: 14px;color: #999;margin-bottom: 24px;}
.referral-code {background-color: #fafafa;border: 1px solid #e8e8e8;border-radius: 8px;padding: 16px;text-align: center;margin-bottom: 32px;}
.code-label {font-size: 14px;color: #666;margin-bottom: 8px;}
.code-value {font-size: 20px;font-weight: 600;color: #ff4d4f;margin-bottom: 12px;}
.code-btn {padding: 6px 16px;border: 1px solid #e8e8e8;border-radius: 6px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.code-btn:hover {border-color: #1890ff;color: #1890ff;}
.referral-rules {margin-top: 40px;}
.rules-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 16px;}
.rules-list {list-style: none;font-size: 14px;color: #666;line-height: 1.5;}
.rules-list li {margin-bottom: 8px;position: relative;padding-left: 20px;}
.rules-list li::before {content: "•";position: absolute;left: 0;color: #ff4d4f;font-weight: bold;}
/* 站点入口介绍页 */
.entrance-container {display: flex;height: 100vh;background: linear-gradient(135deg, #ff6b6b, #ff8e53);justify-content: center;align-items: center;}
.entrance-content {text-align: center;color: #fff;max-width: 600px;padding: 60px;}
.entrance-logo {display: flex;align-items: center;gap: 16px;justify-content: center;margin-bottom: 40px;}
.entrance-logo .logo-icon {width: 64px;height: 64px;font-size: 32px;}
.entrance-logo .logo-text {font-size: 32px;font-weight: 700;}
.entrance-title {font-size: 48px;font-weight: 700;margin-bottom: 24px;line-height: 1.2;}
.entrance-subtitle {font-size: 18px;line-height: 1.5;margin-bottom: 48px;opacity: 0.9;}
.entrance-btn {padding: 16px 48px;background-color: #fff;color: #ff4d4f;border: none;border-radius: 50px;font-size: 18px;font-weight: 600;cursor: pointer;transition: all 0.3s;text-decoration: none;display: inline-block;}
.entrance-btn:hover {transform: translateY(-2px);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);}
/* 仪表盘页面 */
.dashboard-container {min-height: 100vh;display: flex;flex-direction: column;}
.dashboard-header {background-color: #fff;padding: 20px 0;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.header-content {display: flex;justify-content: space-between;align-items: center;}
.logo-section {display: flex;align-items: center;gap: 10px;}
.logo-section .logo {font-size: 24px;font-weight: bold;color: #ff4d4f;}
.nav-section {display: flex;gap: 30px;}
.nav-section .nav-item {text-decoration: none;color: #333;font-size: 14px;font-weight: 500;transition: color 0.3s;}
.nav-section .nav-item:hover {color: #ff4d4f;}
.logout-btn {padding: 6px 12px;background-color: #f0f0f0;color: #333;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;transition: background-color 0.3s;}
.logout-btn:hover {background-color: #e0e0e0;}
.dashboard-main {flex: 1;padding: 40px 0;}
.welcome-section {background-color: #fff;padding: 40px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 30px;}
.welcome-title {font-size: 24px;font-weight: bold;color: #333;margin-bottom: 10px;}
.welcome-subtitle {font-size: 14px;color: #666;margin-bottom: 30px;}
.feature-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}
.feature-card {text-align: center;border: 1px solid #f0f0f0;background: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);transition: all 0.3s;}
.feature-card:hover {transform: translateY(-4px);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);}
.feature-icon {width: 48px;height: 48px;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 48px;margin-bottom: 16px;}
.feature-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 8px;}
.feature-desc {font-size: 14px;color: #666;}
.dashboard-footer {background-color: #fff;padding: 20px 0;border-top: 1px solid #f0f0f0;margin-top: auto;}
.footer-content {text-align: center;font-size: 14px;color: #666;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 32px;margin-bottom: 24px;}
/* 通用按钮样式 */
.btn-success {background-color: #52c41a;color: #fff;border-color: #52c41a;}
.btn-success:hover {background-color: #73d13d;border-color: #73d13d;color: #fff;}
.btn-info {background-color: #1890ff;color: #fff;border-color: #1890ff;}
.btn-info:hover {background-color: #40a9ff;border-color: #40a9ff;color: #fff;}
/* 今日爆款榜页面 */
.hot-list-header {background-color: #fff;border-bottom: 1px solid #e8e8e8;padding: 0 24px;height: 60px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 12px;border-bottom: 1px solid #f0f0f0;}
.header-left {display: flex;align-items: center;gap: 32px;}
.header-left .logo {display: flex;align-items: center;gap: 8px;font-size: 18px;font-weight: 600;color: #ff4d4f;}
.header-left .logo-icon {width: 24px;height: 24px;border-radius: 4px;display: flex;align-items: center;justify-content: center;object-fit: contain;}
.nav-links {display: flex;align-items: center;gap: 24px;}
.nav-link {text-decoration: none;color: #666;font-size: 14px;transition: all 0.3s;}
.nav-link:hover {color: #1890ff;}
.nav-link.active {color: #1890ff;font-weight: 500;}
.header-right {display: flex;align-items: center;gap: 16px;}
.user-info .user-avatar {width: 32px;height: 32px;border-radius: 50%;background-color: #1890ff;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px;}
.content-header {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.platform-tabs {display: flex;gap: 12px;margin-bottom: 16px;}
.platform-tab {padding: 6px 12px;border-radius: 16px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.platform-tab.active {background-color: #ff4d4f;color: #fff;}
.platform-tab:hover {background-color: #f0f0f0;}
.hot-list {background-color: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.hot-list-title {font-size: 16px;font-weight: 600;color: #333;}
.hot-list-filters {display: flex;gap: 12px;}
.hot-list-table {width: 100%;border-collapse: collapse;font-size: 14px;}
.hot-list-table th {background-color: #fafafa;text-align: left;padding: 12px 16px;font-weight: 500;border-bottom: 1px solid #f0f0f0;}
.hot-list-table td {padding: 12px 16px;border-bottom: 1px solid #f0f0f0;}
.hot-list-table tr:hover {background-color: #fafafa;}
.hot-value {color: #ff4d4f;font-weight: 500;}
.hot-pagination {display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 24px;font-size: 14px;}
.hot-pagination-btn {padding: 6px 12px;border: 1px solid #d9d9d9;border-radius: 4px;background-color: #fff;cursor: pointer;transition: all 0.3s;}
.hot-pagination-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.hot-pagination-btn.active {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
.hot-pagination-btn:disabled {opacity: 0.5;cursor: not-allowed;}
/* 推广页面 */
.referral-main-container {max-width: 1200px;margin: 24px auto;padding: 0 24px;}
.referral-page-header {text-align: center;margin-bottom: 32px;}
.referral-page-title {display: flex;align-items: center;justify-content: center;gap: 12px;font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.referral-page-subtitle {font-size: 14px;color: #999;}
.promotion-card {background: linear-gradient(135deg, #722ed1, #13c2c2);border-radius: 12px;padding: 24px;margin-bottom: 24px;color: #fff;}
.promotion-card h3 {font-size: 18px;font-weight: 600;margin-bottom: 16px;}
.promotion-content {display: flex;gap: 24px;align-items: flex-start;}
.qrcode-section {flex: 1;background-color: rgba(255, 255, 255, 0.2);border-radius: 8px;padding: 20px;text-align: center;}
.qrcode {width: 120px;height: 120px;background-color: #fff;margin: 0 auto 12px;display: flex;align-items: center;justify-content: center;font-size: 12px;color: #333;}
.qrcode-label {font-size: 14px;margin-bottom: 12px;}
.save-qrcode-btn {background-color: rgba(255, 255, 255, 0.3);border: none;border-radius: 4px;padding: 6px 12px;font-size: 12px;color: #fff;cursor: pointer;transition: all 0.3s;}
.save-qrcode-btn:hover {background-color: rgba(255, 255, 255, 0.4);}
.link-section {flex: 2;}
.link-group {display: flex;align-items: center;gap: 12px;margin-bottom: 16px;}
.link-label {font-size: 14px;white-space: nowrap;}
.link-input {flex: 1;background-color: rgba(255, 255, 255, 0.2);border: none;border-radius: 4px;padding: 8px 12px;color: #fff;font-size: 14px;}
.link-input::placeholder {color: rgba(255, 255, 255, 0.7);}
.tips-section {background-color: rgba(255, 255, 255, 0.2);border-radius: 8px;padding: 16px;}
.tips-title {font-size: 14px;font-weight: 600;margin-bottom: 8px;}
.tips-list {display: flex;gap: 24px;}
.tips-column {flex: 1;}
.tip-item {font-size: 12px;margin-bottom: 4px;display: flex;align-items: center;gap: 4px;}
.tip-item::before {content: "•";font-size: 14px;color: #fff;}
.level-card {background-color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.level-card h3 {font-size: 18px;font-weight: 600;margin-bottom: 16px;color: #333;}
.level-content {display: flex;gap: 24px;margin-bottom: 16px;}
.level-item {flex: 1;background-color: #f5f5f5;border-radius: 8px;padding: 20px;text-align: center;}
.level-item h4 {font-size: 14px;font-weight: 600;margin-bottom: 8px;color: #666;}
.level-value {font-size: 24px;font-weight: 600;margin-bottom: 4px;}
.level-item:first-child .level-value {color: #722ed1;}
.level-item:nth-child(2) .level-value {color: #52c41a;}
.level-item:nth-child(3) .level-value {color: #1890ff;}
.level-progress {background-color: #f5f5f5;border-radius: 8px;padding: 16px;}
.progress-info {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;}
.progress-label {font-size: 14px;color: #666;}
.progress-value {font-size: 14px;color: #ff7a45;font-weight: 500;}
.progress-bar {width: 100%;height: 8px;background: #f0f0f0;border-radius: 4px;overflow: hidden;margin-bottom: 16px;}
.progress-fill {background-color: #ff7a45;height: 100%;background: linear-gradient(135deg, #ff6b6b, #ff8e53);border-radius: 4px;transition: width 0.3s ease;width: 0%;}
.stats-card {background-color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.referral-stats-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;}
.stat-icon {font-size: 24px;margin-bottom: 8px;}
.records-card {background-color: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.records-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.records-title {font-size: 18px;font-weight: 600;color: #333;}
.withdraw-btn {background-color: #ff7a45;color: #fff;border: none;border-radius: 4px;padding: 8px 16px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.withdraw-btn:hover {background-color: #ff9a76;}
.records-tabs {display: flex;gap: 16px;margin-bottom: 16px;border-bottom: 1px solid #f0f0f0;}
.tab-item {padding: 8px 0;font-size: 14px;color: #666;cursor: pointer;border-bottom: 2px solid transparent;transition: all 0.3s;}
.tab-item:hover {color: #1890ff;}
.tab-item.active {color: #1890ff;border-bottom-color: #1890ff;}
/* 提现弹窗样式 */
.withdraw-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);align-items: center;justify-content: center;z-index: 1000;display: none;}
.withdraw-modal {background-color: #fff;border-radius: 8px;padding: 24px;width: 400px;max-width: 90%;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.withdraw-modal-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;padding-bottom: 12px;border-bottom: 1px solid #f0f0f0;}
.withdraw-modal-title {display: flex;align-items: center;gap: 8px;font-size: 16px;font-weight: 600;color: #333;}
.withdraw-modal-close {background: none;border: none;font-size: 18px;cursor: pointer;color: #999;transition: color 0.3s;}
.withdraw-modal-close:hover {color: #333;}
.withdraw-amount {background-color: #f6ffed;border: 1px solid #b7eb8f;border-radius: 4px;padding: 12px;margin-bottom: 20px;}
.amount-info {display: flex;justify-content: space-between;align-items: center;}
.amount-label {font-size: 14px;color: #666;}
.amount-value {font-size: 18px;font-weight: 600;color: #52c41a;}
.amount-note {font-size: 12px;color: #999;margin-top: 4px;text-align: right;}
.rule-section {margin-bottom: 20px;}
.rule-title {font-size: 14px;font-weight: 600;color: #333;margin-bottom: 8px;}
.rule-list {font-size: 14px;color: #666;line-height: 1.5;}
.rule-item {margin-bottom: 4px;}
.attention-section {background-color: #fff7e6;border: 1px solid #ffd591;border-radius: 4px;padding: 12px;margin-bottom: 20px;}
.attention-title {font-size: 14px;font-weight: 600;color: #fa8c16;margin-bottom: 8px;}
.attention-list {font-size: 14px;color: #666;line-height: 1.5;}
.attention-item {margin-bottom: 4px;}
.withdraw-modal-footer {display: flex;justify-content: center;}
.withdraw-modal-btn {padding: 8px 24px;border: 1px solid #d9d9d9;border-radius: 4px;background-color: #fff;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.withdraw-modal-btn:hover {border-color: #1890ff;color: #1890ff;}
/* 联系我们页面 */
.contact-main {margin-top: 80px;padding: 40px 0;}
.contact-page-header {text-align: center;margin-bottom: 48px;}
.contact-page-title {font-size: 28px;font-weight: 600;color: #333;margin-bottom: 12px;}
.contact-page-subtitle {font-size: 16px;color: #666;}
.contact-section {background-color: #fff;border-radius: 12px;padding: 40px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 48px;}
.contact-info h3 {font-size: 20px;font-weight: 600;color: #333;margin-bottom: 24px;}
.info-item {display: flex;align-items: flex-start;gap: 16px;margin-bottom: 24px;}
.info-content h4 {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 4px;}
.info-content p {font-size: 14px;color: #666;line-height: 1.5;}
.wechat-qrcode {flex: 0 0 200px;text-align: center;}
.contact-qrcode {width: 160px;height: 160px;background-color: #f5f5f5;margin: 0 auto 12px;display: flex;align-items: center;justify-content: center;font-size: 12px;color: #666;}
.qrcode-note {font-size: 14px;color: #666;margin-bottom: 8px;}
.wechat-tip {font-size: 12px;color: #999;line-height: 1.4;}
.tip-section {background-color: #fff7e6;border: 1px solid #ffd591;border-radius: 8px;padding: 24px;margin-bottom: 48px;}
.tip-title {font-size: 16px;font-weight: 600;color: #fa8c16;margin-bottom: 12px;display: flex;align-items: center;gap: 8px;}
.tip-content {font-size: 14px;color: #666;line-height: 1.5;}
.faq-section {background-color: #fff;border-radius: 12px;padding: 40px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 48px;}
.faq-section h3 {font-size: 20px;font-weight: 600;color: #333;margin-bottom: 24px;}
.faq-item {margin-bottom: 20px;border-bottom: 1px solid #f0f0f0;padding-bottom: 20px;background: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.faq-item:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.faq-question {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 8px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;gap: 16px;transition: all 0.3s;user-select: none;}
.faq-question::after {content: '▼';font-size: 12px;color: #999;transition: transform 0.3s;}
.faq-question.active::after {transform: rotate(180deg);}
.faq-answer {font-size: 14px;color: #666;line-height: 1.5;display: none;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;background: #fafafa;}
.faq-answer.active {display: block;}
/* 底部 */
.contact-footer {background-color: #333;color: #fff;padding: 48px 0 24px;margin-top: 48px;}
.footer-links {list-style: none;padding: 0;}
.footer-link {margin-bottom: 8px;display: block;text-decoration: none;color: #666;font-size: 14px;transition: all 0.3s;}
.footer-link:hover {color: #ff4d4f;}
.footer-bottom {font-size: 14px;color: #ccc;text-align: center;padding-top: 24px;border-top: 1px solid #f0f0f0;}
/* ============ 公众号管理页面样式 ============ */

/* 授权流程说明区域 */
.auth-guide-section {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.guide-header {
    text-align: center;
    margin-bottom: 32px;
}

.guide-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.guide-icon svg {
    color: #fff;
}

.guide-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.guide-desc {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    transition: all 0.3s;
}

.guide-step:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.step-number {
    width: 32px;
    height: 32px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.step-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.guide-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #666;
}

.tip-item svg {
    color: #ff4d4f;
    flex-shrink: 0;
}

/* 搜索栏 */
.search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.search-input {
    flex: 1;
    max-width: 400px;
    padding: 10px 16px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: #ff4d4f;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
}

.search-btn {
    padding: 10px 20px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.search-btn:hover {
    background: #ff7875;
    transform: translateY(-1px);
}

/* 公众号网格 */
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* 公众号卡片 */
.account-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    cursor: pointer;
}

.account-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.account-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.account-info {
    flex: 1;
    min-width: 0;
}

.account-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-id {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.account-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.account-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.account-badge.authorized {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.account-badge.unauthorized {
    background: #fff2e8;
    color: #fa8c16;
    border: 1px solid #ffbb96;
}

.account-badge.verified {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}

.account-badge.unverified {
    background: #f5f5f5;
    color: #999;
    border: 1px solid #d9d9d9;
}

.account-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: nowrap;
}

.account-action-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #fafafa;
    color: #666;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

.account-action-btn:hover {
    background: #ff4d4f;
    color: #fff;
}

.account-action-btn.primary {
    background: #ff4d4f;
    color: #fff;
}

.account-action-btn.primary:hover {
    background: #ff7875;
}

/* 空状态 */
.account-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
}

.account-empty-icon {
    width: 120px;
    height: 120px;
    background: #fafafa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.account-empty-icon svg {
    color: #d9d9d9;
}

.account-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.account-empty-desc {
    font-size: 14px;
    color: #999;
    margin: 0 0 24px 0;
}

/* 区域分隔线 */
.section-divider {
    height: 16px;
    background: #f5f5f5;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
    padding: 0;
}

/* 公众号管理弹窗样式 */
.official-account-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.official-account-modal-overlay.active {
    display: flex;
}

.official-account-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.official-account-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.official-account-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.official-account-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #fafafa;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.official-account-modal-close:hover {
    background: #ff4d4f;
    color: #fff;
}

.official-account-modal-body {
    padding: 24px;
}

.official-account-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #f0f0f0;
}

/* 授权弹窗 */
.auth-modal {
    width: 500px;
}

.auth-qrcode-section {
    display: flex;
    gap: 24px;
}

.qrcode-container {
    width: 200px;
    height: 200px;
    background: #fafafa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}

.qrcode-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff4d4f;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.qrcode-tips {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.auth-tips {
    flex: 1;
}

.auth-tips h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.auth-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-tips li {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    border-bottom: 1px dashed #f0f0f0;
}

.auth-tips li:last-child {
    border-bottom: none;
}

/* 详情弹窗 */
.detail-modal {
    width: 600px;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-section {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.detail-section-content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* 删除弹窗 */
.delete-modal {
    width: 400px;
}

.delete-content {
    text-align: center;
    padding: 20px 0;
}

.delete-icon {
    width: 80px;
    height: 80px;
    background: #fff2f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.delete-message {
    font-size: 16px;
    color: #333;
    margin: 0 0 12px 0;
}

.delete-warning {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* 分组弹窗 */
.group-modal {
    width: 400px;
}

.group-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-item {
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-item:hover {
    background: #fff7e6;
}

.group-item.active {
    background: #ff4d4f;
    color: #fff;
}

.group-item-name {
    font-size: 14px;
    font-weight: 500;
}

.group-item-count {
    font-size: 12px;
    opacity: 0.8;
}

/* 管理分组弹窗 */
.group-manager-modal {
    width: 500px;
}

.group-manager-header {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.group-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.group-input:focus {
    border-color: #ff4d4f;
}

.group-input::placeholder {
    color: #999;
}

.group-manager-list {
    max-height: 300px;
    overflow-y: auto;
}

.group-manager-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.3s;
}

.group-manager-item:hover {
    background: #f0f0f0;
}

.group-manager-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    flex: 1;
}

.group-manager-count {
    font-size: 12px;
    color: #999;
    width: 80px;
    text-align: right;
    margin-right: 16px;
}

.group-manager-actions {
    display: flex;
    gap: 8px;
}

.group-manager-actions button {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.group-edit-btn {
    background: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
}

.group-edit-btn:hover {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.group-delete-btn {
    background: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
}

.group-delete-btn:hover {
    background: #ff4d4f;
    color: #fff;
}

.group-manager-input {
    flex: 1;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.group-manager-input:focus {
    border-color: #ff7875;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}

.group-save-btn {
    background: #ff4d4f;
    color: #fff;
    border: 1px solid #ff4d4f;
}

.group-save-btn:hover {
    background: #ff7875;
    border-color: #ff7875;
}

.group-cancel-btn {
    background: #fff;
    color: #666;
    border: 1px solid #d9d9d9;
}

.group-cancel-btn:hover {
    background: #f5f5f5;
    border-color: #bfbfbf;
}

/* 公众号管理页面响应式设计 */
@media (max-width: 768px) {
    .guide-steps {
        grid-template-columns: 1fr;
    }

    .auth-qrcode-section {
        flex-direction: column;
    }

    .qrcode-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .official-account-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .search-bar {
        flex-direction: column;
    }

    .search-input {
        max-width: 100%;
    }
}

/* ============ 首页 ============ */
/* 英雄区域 */
.home-hero {background: linear-gradient(135deg, #fff8f0, #fff);padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;}
.home-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: radial-gradient(circle at 20% 80%, rgba(255, 77, 79, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 153, 0, 0.1) 0%, transparent 50%);pointer-events: none;}
.hero-container {max-width: 800px;margin: 0 auto;padding: 0 24px;position: relative;z-index: 1;}
.hero-badge {background-color: #fff2f0;color: #ff4d4f;padding: 4px 12px;border-radius: 16px;font-size: 12px;display: inline-block;margin-bottom: 24px;}
.hero-title {font-size: 36px;font-weight: 600;color: #333;margin-bottom: 16px;}
.hero-subtitle {font-size: 18px;color: #666;margin-bottom: 32px;line-height: 1.5;}
.hero-features {display: flex;justify-content: center;gap: 24px;margin-bottom: 40px;flex-wrap: wrap;}
.hero-feature {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #666;}
.hero-feature::before {content: '•';color: #ff4d4f;font-weight: bold;}
.hero-buttons {display: flex;justify-content: center;gap: 16px;}
/* 核心功能 */
.features {padding: 80px 0;background-color: #fff;}
.section-header {text-align: center;margin-bottom: 64px;}
.section-subtitle {font-size: 16px;color: #666;margin-bottom: 8px;}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 24px;margin-bottom: 32px;}
.feature-card:nth-child(1) .feature-icon {background-color: #fff2f0;color: #ff4d4f;}
.feature-card:nth-child(2) .feature-icon {background-color: #f6ffed;color: #52c41a;}
.feature-card:nth-child(3) .feature-icon {background-color: #e6f7ff;color: #1890ff;}
.feature-card:nth-child(4) .feature-icon {background-color: #f9f0ff;color: #722ed1;}
.feature-card:nth-child(5) .feature-icon {background-color: #fff7e6;color: #fa8c16;}
.feature-card:nth-child(6) .feature-icon {background-color: #e8f5ff;color: #13c2c2;}
.feature-description {font-size: 14px;color: #666;line-height: 1.6;margin-bottom: 16px;}
/* 多赛道覆盖 */
.tracks {padding: 80px 0;background-color: #fafafa;}
.tracks-grid {display: flex;gap: 16px;flex-wrap: wrap;justify-content: center;}
.track-card {padding: 12px 24px;border-radius: 24px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s;}
.track-card:nth-child(1) {background-color: #e6f7ff;color: #1890ff;}
.track-card:nth-child(2) {background-color: #f6ffed;color: #52c41a;}
.track-card:nth-child(3) {background-color: #f9f0ff;color: #722ed1;}
.track-card:nth-child(4) {background-color: #fff7e6;color: #fa8c16;}
.track-card:nth-child(5) {background-color: #fff2f0;color: #ff4d4f;}
.track-card:nth-child(6) {background-color: #f0f0f0;color: #666;}
.track-card:hover {transform: translateY(-2px);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
/* 为什么选择我们 */
.why-us {padding: 80px 0;background-color: #fff;}
.why-us-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 24px;}
.why-us-item {padding: 24px;background-color: #fafafa;border-radius: 8px;transition: all 0.3s;}
.why-us-item:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transform: translateY(-4px);}
.why-us-icon {font-size: 24px;margin-bottom: 16px;}
.why-us-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;}
.why-us-description {font-size: 14px;color: #666;line-height: 1.5;}
/* 行动号召 */
.cta {padding: 80px 0;background: linear-gradient(135deg, #ff4d4f, #ff7875);color: #fff;text-align: center;}
.cta-title {font-size: 28px;font-weight: 600;margin-bottom: 16px;}
.cta-subtitle {font-size: 16px;margin-bottom: 32px;opacity: 0.9;}
.cta-button {font-size: 16px;display: inline-block;padding: 12px 32px;background: #fff;color: #ff4d4f;text-decoration: none;border-radius: 6px;font-weight: 600;transition: all 0.3s;}
/* 底部 */
.home-footer {background-color: #333;color: #fff;padding: 48px 0 24px;}
/* 找回密码页面 */
.reset-password-main {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #ff4d4f, #ff7875);padding: 80px 24px 40px;}
.reset-password-container {display: flex;align-items: center;justify-content: space-between;max-width: 1200px;width: 100%;gap: 48px;}
/* 左侧内容 */
.reset-password-left {flex: 1;color: #fff;padding-right: 48px;}
.reset-password-left h1 {font-size: 36px;font-weight: 600;margin-bottom: 16px;}
.reset-password-left p {font-size: 18px;margin-bottom: 32px;opacity: 0.9;}
.reset-password-features {display: flex;flex-direction: column;gap: 16px;}
.reset-password-feature {display: flex;align-items: center;gap: 12px;font-size: 14px;}
.reset-password-feature-icon {width: 24px;height: 24px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.2);display: flex;align-items: center;justify-content: center;font-size: 12px;}
/* 右侧表单 */
.reset-password-right {flex: 0 0 400px;background-color: #fff;border-radius: 8px;padding: 32px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.reset-password-form-header {text-align: center;margin-bottom: 24px;}
.reset-password-form-title {font-size: 20px;font-weight: 600;color: #333;margin-bottom: 8px;}
.reset-password-form-subtitle {font-size: 14px;color: #666;}
.reset-password-form {display: flex;flex-direction: column;gap: 16px;}
.reset-password-form-group {display: flex;flex-direction: column;gap: 8px;}
.reset-password-form-label {font-size: 14px;font-weight: 500;color: #333;}
.reset-password-form-input {padding: 12px;border: 1px solid #d9d9d9;border-radius: 4px;font-size: 14px;transition: all 0.3s;}
.reset-password-form-input:focus {outline: none;border-color: #ff4d4f;box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);}
.verification-code {display: flex;gap: 8px;}
.verification-code input {flex: 1;}
.verification-code button {padding: 0 16px;background-color: #1890ff;color: #fff;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.verification-code button:hover {background-color: #40a9ff;}
.verification-code button:disabled {background-color: #d9d9d9;cursor: not-allowed;}
.captcha-container {display: flex;gap: 8px;align-items: center;}
.captcha-container input {flex: 1;}
.captcha-container .captcha-image {width: 120px;height: 40px;background-color: #f0f0f0;border-radius: 6px;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;color: #333;cursor: pointer;font-family: 'Courier New', monospace;letter-spacing: 2px;}
.reset-button {background-color: #ff4d4f;color: #fff;padding: 12px;border: none;border-radius: 4px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s;margin-top: 8px;}
.reset-button:hover {background-color: #ff7875;}
.login-link {text-align: center;margin-top: 16px;}
.login-link a {color: #ff4d4f;text-decoration: none;font-size: 14px;transition: color 0.3s;}
.login-link a:hover {text-decoration: underline;}
@media (max-width: 768px) {.reset-password-container {flex-direction: column;gap: 32px;}
.reset-password-left {flex: 1;padding-right: 0;text-align: center;}
.reset-password-right {flex: 1;max-width: 100%;}
.reset-password-left h1 {font-size: 28px;}
}
/* 注册页面 */
.register-main {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);padding: 40px 24px;}
/* 左侧内容 */
.register-left {flex: 1;color: #fff;padding: 40px 36px;background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);display: flex;flex-direction: column;justify-content: center;}
.register-left .logo-section {display: flex;align-items: center;gap: 12px;margin-bottom: 24px;}
.register-left .logo-icon {width: 48px;height: 48px;background-color: #ff7a45;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: bold;}
.register-left .logo-text {font-size: 28px;font-weight: bold;}
.register-left h2 {font-size: 22px;font-weight: 600;margin-bottom: 12px;}
.register-left p {font-size: 14px;margin-bottom: 24px;opacity: 0.9;line-height: 1.4;}
.register-features {display: flex;flex-direction: column;gap: 16px;}
.register-feature {display: flex;align-items: center;gap: 12px;font-size: 14px;}
.register-feature-icon {width: 20px;height: 20px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.2);display: flex;align-items: center;justify-content: center;font-size: 12px;}
/* 右侧表单 */
.register-right {flex: 0 0 420px;background-color: #fff;padding: 32px;display: flex;flex-direction: column;justify-content: center;overflow-y: hidden;max-height: 72vh;}
/* 推广页面 */
.referral-qrcode-placeholder {width: 100px;height: 100px;background-color: #000;margin: 0 auto;}
.progress-info-secondary {margin-top: 8px;}
.empty-text-secondary {margin-top: 4px;}
.register-form-header {text-align: center;margin-bottom: 24px;}
.register-form-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 8px;}
.register-form-subtitle {font-size: 14px;color: #666;display: flex;align-items: center;justify-content: center;gap: 4px;}
.register-form-subtitle::before {content: "🌟";font-size: 16px;}
.register-form {display: flex;flex-direction: column;gap: 10px;}
.register-form-group {display: flex;flex-direction: column;gap: 5px;}
.register-form-label {font-size: 14px;font-weight: 500;color: #333;}
.register-form-input {padding: 12px 16px;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 14px;transition: all 0.3s;background-color: #f8f9fa;}
.register-form-input:focus {outline: none;border-color: #1890ff;box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);background-color: #fff;}
.agreement input[type="checkbox"] {width: 16px;height: 16px;}
.register-button {background-color: #1890ff;color: #fff;padding: 12px;border: none;border-radius: 6px;font-size: 15px;font-weight: 500;cursor: pointer;transition: all 0.3s;margin-top: 12px;display: flex;align-items: center;justify-content: center;gap: 6px;}
.register-button:hover {background-color: #40a9ff;}
.register-button::before {content: "🚀";font-size: 16px;}
/* 用户协议弹窗 */
.register-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 1000;display: none;}
.register-modal {background-color: #fff;border-radius: 8px;padding: 24px;width: 600px;max-width: 90%;max-height: 80vh;overflow-y: auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.register-modal-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 24px;padding-bottom: 12px;border-bottom: 1px solid #f0f0f0;}
.register-modal-title {display: flex;align-items: center;gap: 8px;font-size: 18px;font-weight: 600;color: #333;}
.register-modal-close {background: none;border: none;font-size: 18px;cursor: pointer;color: #999;transition: color 0.3s;}
.register-modal-close:hover {color: #333;}
.register-modal-content {font-size: 14px;line-height: 1.6;color: #333;}
.register-modal-content h3 {font-size: 16px;font-weight: 600;margin: 16px 0 8px;color: #333;}
.register-modal-content p {margin-bottom: 8px;}
.register-modal-content ul {margin-left: 20px;margin-bottom: 12px;}
.register-modal-content li {margin-bottom: 4px;}
.register-modal-footer {display: flex;justify-content: center;margin-top: 24px;}
.register-modal-btn {background-color: #1890ff;color: #fff;padding: 12px 32px;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;transition: all 0.3s;}
.register-modal-btn:hover {background-color: #40a9ff;}
/* 通用卡片样式 */
.card {background-color: #fff;border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 24px;}
.card-header {margin-bottom: 16px;padding-bottom: 16px;border-bottom: 1px solid #f0f0f0;}
.card-title {font-size: 16px;font-weight: 600;color: #333;}
.card-body {font-size: 14px;color: #666;line-height: 1.5;}
/* 通用表格样式 */
.table {width: 100%;border-collapse: collapse;background-color: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.table th,
.table td {padding: 12px 16px;text-align: left;border-bottom: 1px solid #f0f0f0;}
.table th {background-color: #fafafa;font-weight: 600;color: #333;}
.table tr:hover {background-color: #fafafa;}
/* 配额表格样式 */
.quota-table-container {width: 100%;overflow-x:auto;}
.quota-table {width: 100%;border-collapse: collapse;background-color: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.quota-table thead {background-color: #fafafa;}
.quota-table th {padding: 14px 16px;font-size: 14px;font-weight: 600;color: #333;text-align: content;border-bottom: 2px solid #e8e8e8;}
.quota-table td {padding: 14px 16px;font-size: 14px;color: #666;border-bottom: 1px solid #f0f0f0;transition: background-color 0.3s;}
.quota-table tbody tr:hover {background-color: #fafafa;}
.quota-table tbody tr:last-child td {border-bottom: none;}
/* 响应式设计 */
@media (max-width: 768px) {
    .quota-table {font-size: 12px;}
    .quota-table th,
    .quota-table td {padding: 10px 12px;}
}
@media (max-width: 480px) {
    .quota-table th,
    .quota-table td {padding: 8px 10px;font-size: 11px;}
}
/* 通用输入框样式 */
/* 首页样式 */
.hero {background: linear-gradient(135deg, #fff8f0, #fff);padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;}
.hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: radial-gradient(circle at 20% 80%, rgba(255, 77, 79, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 153, 0, 0.1) 0%, transparent 50%);pointer-events: none;}
/* 核心功能 */
.container {max-width: 1200px;margin: 0 auto;padding: 0 24px;}
.cta-button:hover {background-color: #f5f5f5;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);}
/* 底部 */
.footer {background-color: #333;color: #fff;padding: 48px 0 24px;}
.input {width: 100%;padding: 8px 12px;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 14px;color: #333;background-color: #fff;transition: all 0.3s;}
.input:focus {outline: none;border-color: #ff4d4f;box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);}
/* 通用标签样式 */
.tag {display: inline-block;padding: 4px 12px;border-radius: 12px;font-size: 12px;font-weight: 500;}
.tag-success {background-color: #f6ffed;color: #52c41a;border: 1px solid #b7eb8f;}
.tag-warning {background-color: #fff7e6;color: #fa8c16;border: 1px solid #ffd591;}
.tag-danger {background-color: #fff1f0;color: #ff4d4f;border: 1px solid #ffccc7;}
.tag-info {background-color: #e6f7ff;color: #1890ff;border: 1px solid #91d5ff;}
/* 通用提示样式 */
.alert {padding: 16px;border-radius: 8px;margin-bottom: 16px;font-size: 14px;border: 1px solid transparent;}
.alert-success {background-color: #f6ffed;color: #52c41a;border-color: #b7eb8f;}
.alert-warning {background-color: #fff7e6;color: #fa8c16;border-color: #ffd591;}
.alert-danger {background-color: #fff1f0;color: #ff4d4f;border-color: #ffccc7;}
.alert-info {background-color: #e6f7ff;color: #1890ff;border-color: #91d5ff;}
/* 通用加载样式 */
.loading {display: inline-block;width: 20px;height: 20px;border: 2px solid #f3f3f3;border-top: 2px solid #ff4d4f;border-radius: 50%;animation: spin 1s linear infinite;}
/* 通用隐藏类 */
.hidden {display: none !important;}
/* 通用文本截断 */
.truncate {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* 通用居中 */
.text-center {text-align: center;}
/* 通用右对齐 */
.text-right {text-align: right;}
/* 通用左对齐 */
.text-left {text-align: left;}
/* 通用鼠标指针样式 */
.cursor-pointer {cursor: pointer;}
/* 确认对话框消息样式 */
.confirm-message {font-size: 14px;color: #333;margin-bottom: 12px;line-height: 1.5;}
.order-info-text {font-size: 13px;color: #666;padding: 12px;background-color: #fafafa;border-radius: 6px;margin: 0;}
/* 通用字体大小 */
.text-xs {font-size: 12px;}
.text-sm {font-size: 14px;}
.text-base {font-size: 16px;}
.text-lg {font-size: 18px;}
.text-xl {font-size: 24px;}
/* 通用字体颜色 */
.text-primary {color: #ff4d4f;}
.text-success {color: #52c41a;}
.text-warning {color: #fa8c16;}
.text-danger {color: #ff4d4f;}
.text-info {color: #1890ff;}
.text-gray {color: #999;}
/* 通用背景颜色 */
.bg-primary {background-color: #ff4d4f;}
.bg-success {background-color: #52c41a;}
.bg-warning {background-color: #fa8c16;}
.bg-danger {background-color: #ff4d4f;}
.bg-info {background-color: #1890ff;}
.bg-gray {background-color: #f5f5f5;}
/* 通用边距 */
.m-0 {margin: 0;}
.m-1 {margin: 4px;}
.m-2 {margin: 8px;}
.m-3 {margin: 12px;}
.m-4 {margin: 16px;}
.m-5 {margin: 20px;}
.mt-0 {margin-top: 0;}
.mt-1 {margin-top: 4px;}
.mt-2 {margin-top: 8px;}
.mt-3 {margin-top: 12px;}
.mt-4 {margin-top: 16px;}
.mt-5 {margin-top: 20px;}
.mb-0 {margin-bottom: 0;}
.mb-1 {margin-bottom: 4px;}
.mb-2 {margin-bottom: 8px;}
.mb-3 {margin-bottom: 12px;}
.mb-4 {margin-bottom: 16px;}
.mb-5 {margin-bottom: 20px;}
.ml-0 {margin-left: 0;}
/* 样式中心特有样式 */
.style-center {margin-top: 60px;min-height: calc(100vh - 60px);}
.style-center-header {background-color: #fff;padding: 24px;border-bottom: 1px solid #e8e8e8;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);position: sticky;top: 60px;z-index: 50;}
.style-center-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 16px;}
.style-center-content {padding: 24px;}
/* 分类导航 */
.category-nav {background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);padding: 24px;margin-bottom: 24px;}
.category-nav h3 {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 16px;}
.category-row {margin-bottom: 20px;}
.category-label {display: inline-block;font-size: 14px;color: #666;margin-right: 16px;font-weight: 500;min-width: 80px;}
.category-links {display: inline-block;}
.category-link {display: inline-block;padding: 6px 12px;margin-right: 8px;margin-bottom: 8px;border: 1px solid #e8e8e8;border-radius: 16px;background-color: #fff;color: #666;text-decoration: none;font-size: 13px;transition: all 0.3s;}
.category-link:hover {border-color: #ff4d4f;color: #ff4d4f;}
.category-link.active {background-color: #ff4d4f;color: #fff;border-color: #ff4d4f;}
/* 排序和推荐 */
.sort-section {display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;}
.sort-options {display: flex;gap: 12px;align-items: center;}
.sort-label {font-size: 14px;color: #666;}
.sort-select {padding: 6px 12px;border: 1px solid #e8e8e8;border-radius: 6px;font-size: 14px;color: #333;background-color: #fff;}
.recommend-tags {display: flex;gap: 8px;align-items: center;}
.recommend-label {font-size: 14px;color: #666;}
.recommend-tag {display: inline-block;padding: 4px 8px;background-color: #f0f0f0;color: #666;border-radius: 4px;font-size: 12px;}
/* 样式网格 */
.style-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 24px;}
.style-card {background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);overflow: hidden;transition: all 0.3s;}
.style-card:hover {transform: translateY(-4px);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);}
.style-preview {width: 100%;height: 200px;background-color: #f5f5f5;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}
.style-preview-content {padding: 20px;text-align: center;width: 100%;}
.style-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;}
.style-subtitle {font-size: 14px;color: #666;margin-bottom: 12px;}
.style-actions {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);padding: 16px;display: flex;justify-content: flex-end;gap: 8px;opacity: 0;transition: all 0.3s;}
.style-card:hover .style-actions {opacity: 1;}
.style-btn {padding: 6px 12px;border: 1px solid #fff;border-radius: 4px;background-color: rgba(255, 255, 255, 0.2);color: #fff;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.style-btn:hover {background-color: rgba(255, 255, 255, 0.4);}
.style-info {padding: 16px;}
.style-name {font-size: 14px;font-weight: 500;color: #333;margin-bottom: 4px;}
.style-stats {font-size: 12px;color: #999;}
/* 分页 */

/* 提示词列表容器 */
.prompt-list-container {background-color: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);overflow: hidden;}
.prompt-list {max-height: 600px;overflow-y: auto;}
.prompt-item {display: grid;grid-template-columns: 150px 120px 120px 1fr 150px 120px;gap: 16px;padding: 16px 20px;border-bottom: 1px solid #f0f0f0;align-items: center;transition: all 0.3s;}
.prompt-item:hover {background-color: #fafafa;}
.prompt-item:last-child {border-bottom: none;}
.prompt-item-name {font-size: 14px;font-weight: 500;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.prompt-item-channel {font-size: 13px;color: #666;}
.prompt-item-type {font-size: 13px;color: #666;}
.prompt-item-content {font-size: 13px;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.prompt-item-time {font-size: 12px;color: #999;}
.prompt-item-actions {display: flex;gap: 8px;justify-content: center;}
.prompt-action-btn {padding: 4px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.prompt-action-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.prompt-action-btn.delete:hover {border-color: #ff4d4f;color: #ff4d4f;background-color: #fff1f0;}
/* 渠道分类列表 */
.modal-category-item {display: grid;grid-template-columns: 1fr 1fr 120px;gap: 16px;padding: 12px 16px;border: 1px solid #f0f0f0;border-radius: 8px;margin-bottom: 12px;align-items: center;transition: all 0.3s;}
.modal-category-item:hover {border-color: #e8e8e8;background-color: #fafafa;}
.modal-category-item-name {font-size: 14px;font-weight: 500;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.modal-category-item-desc {font-size: 13px;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.modal-category-item-actions {display: flex;gap: 8px;justify-content: center;}
.category-action-btn {padding: 4px 12px;border: 1px solid #e8e8e8;border-radius: 4px;background-color: #fff;color: #666;font-size: 12px;cursor: pointer;transition: all 0.3s;}
.category-action-btn:hover {border-color: #ff4d4f;color: #ff4d4f;}
.category-action-btn.delete:hover {border-color: #ff4d4f;color: #ff4d4f;background-color: #fff1f0;}
.material-list {width: 100%;position: relative;min-height: 10px;display: block;justify-content: flex-start;align-items: flex-start;-moz-column-gap: 16px;column-gap: 16px;}
.material-list .material-col {flex: unset;display: flex;justify-content: flex-start;flex-direction: column;row-gap: 16px;flex-basis: 50%;margin: 0px 10px;min-width: 0;/*zoom: 0.8;*/
}
.material-list .material-col *{max-height: 100%;max-width: 100%;}
/* 编辑器外层 */
.CodeMirror {height: 550px !important;/* 固定高度，不会自动撑高 */
    overflow-y: auto !important;/* 内容超出时显示垂直滚动条 */
}
/* 滚动条样式美化（可选） */
.CodeMirror::-webkit-scrollbar {width: 8px;}
.CodeMirror::-webkit-scrollbar-thumb {background: #ccc;border-radius: 4px;}
/* 文件导入弹窗样式 */
.import-modal {max-width: 480px;}
.upload-area {border: 2px dashed #d9d9d9;border-radius: 12px;padding: 40px 20px;text-align: center;cursor: pointer;transition: all 0.3s ease;background: #fafafa;}
.upload-area:hover {border-color: #ff6b6b;background: #fff5f5;}
.upload-area.dragover {border-color: #ff6b6b;background: #fff5f5;transform: scale(1.02);box-shadow: 0 4px 20px rgba(255, 107, 107, 0.2);}
.upload-text {font-size: 16px;color: #333;margin-bottom: 8px;font-weight: 500;}
.upload-status {text-align: center;padding: 20px;}
.status-text {font-size: 14px;color: #666;}
.import-note {font-size: 12px;color: #999;text-align: center;margin-top: 16px;line-height: 1.6;}
.btn-cancel {background: #f5f5f5;color: #666;}
.btn-cancel:hover {background: #e8e8e8;transform: none;box-shadow: none;}
.btn-confirm {background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;}
/* Toast 提示样式 */
.import-toast {position: fixed;top: 80px;right: 20px;padding: 12px 24px;border-radius: 8px;font-size: 14px;color: #fff;z-index: 9999;opacity: 0;transform: translateX(100%);transition: all 0.3s ease;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.import-toast.show {opacity: 1;transform: translateX(0);}
.import-toast-success {background: linear-gradient(135deg, #52c41a, #389e0d);}
.import-toast-error {background: linear-gradient(135deg, #ff4d4f, #d9363e);}
.layui-upload-file {display: none;}
/* 教程页面样式 */
.tutorial-main {padding: 80px 24px 40px;min-height: calc(100vh - 60px);}
.tutorial-container {max-width: 1200px;margin: 0 auto;}
.tutorial-page-header {text-align: center;margin-bottom: 48px;}
.tutorial-page-title {font-size: 32px;font-weight: 600;color: #333;margin-bottom: 12px;}
.tutorial-page-subtitle {font-size: 16px;color: #666;}
/* 四大核心功能 */
.features-section {margin-bottom: 48px;}
.feature-tags {display: flex;gap: 8px;flex-wrap: wrap;}
.feature-tag {padding: 4px 12px;background: #f0f0f0;color: #666;border-radius: 4px;font-size: 12px;}
/* 功能详情 */
.feature-details-section {margin-bottom: 48px;}
.detail-item {flex: 1;min-width: 200px;background: #fff;border-radius: 12px;padding: 32px;margin-bottom: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);}
.detail-header {display: flex;align-items: center;gap: 12px;margin-bottom: 24px;}
.detail-icon {font-size: 32px;}
.detail-title {font-size: 20px;font-weight: 600;color: #333;}
.detail-content h4 {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 12px;margin-top: 20px;}
.detail-content h4:first-child {margin-top: 0;}
.detail-list {list-style: none;padding: 0;}
.detail-list li {padding: 8px 0;padding-left: 24px;position: relative;font-size: 14px;color: #666;line-height: 1.6;}
.detail-list li:before {content: "•";position: absolute;left: 0;color: #ff4d4f;font-weight: bold;}
.detail-content p {font-size: 14px;color: #666;line-height: 1.6;margin-bottom: 12px;}
.tip-box {background: #fff7e6;border-left: 4px solid #ff4d4f;padding: 16px;border-radius: 4px;margin-top: 16px;display: flex;align-items: flex-start;gap: 12px;}
.tip-icon {font-size: 20px;flex-shrink: 0;}
.tip-text {font-size: 14px;color: #666;line-height: 1.6;}
/* 对比表格 */
.comparison-table {display: flex;flex-direction: column;gap: 16px;}
.comparison-item {background: #fafafa;border-radius: 8px;padding: 20px;display: flex;gap: 16px;align-items: flex-start;}
.comparison-type {font-size: 16px;font-weight: 600;color: #ff4d4f;min-width: 120px;flex-shrink: 0;}
.comparison-desc {font-size: 14px;color: #666;line-height: 1.6;}
/* 会员特权 */
.privilege-list {list-style: none;padding: 0;margin: 24px 0;}
.privilege-list li {padding: 12px 0;display: flex;align-items: center;gap: 12px;font-size: 14px;color: #666;}
.check-icon {color: #52c41a;font-weight: bold;font-size: 16px;}
.cta-box {background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;padding: 24px;border-radius: 8px;text-align: center;margin-top: 24px;}
.cta-box p {font-size: 16px;font-weight: 600;margin-bottom: 16px;}
/* 常见问题 */
.faq-list {display: flex;flex-direction: column;gap: 16px;}
.faq-question:hover {background: #fafafa;}
.faq-icon {width: 32px;height: 32px;background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;flex-shrink: 0;}
.faq-text {flex: 1;font-size: 16px;font-weight: 500;color: #333;}
.faq-toggle {font-size: 24px;color: #999;transition: transform 0.3s;flex-shrink: 0;}
.faq-item.active .faq-toggle {transform: rotate(45deg);}
.faq-item.active .faq-answer {max-height: 500px;}
.answer-steps {padding: 20px 24px;font-size: 14px;color: #666;line-height: 1.8;}
/* 联系客服 */
.contact-box {background: linear-gradient(135deg, #1890ff, #36cfc9);color: #fff;padding: 40px;border-radius: 12px;text-align: center;}
.contact-box h3 {font-size: 24px;font-weight: 600;margin-bottom: 12px;}
.contact-box p {font-size: 14px;margin-bottom: 24px;opacity: 0.9;}
.contact-button {display: inline-block;padding: 12px 32px;background: #fff;color: #1890ff;text-decoration: none;border-radius: 6px;font-weight: 600;transition: all 0.3s;}
.contact-button:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);}
/* 底部 */
.tutorial-footer {background: #fff;border-top: 1px solid #e8e8e8;padding: 40px 24px;}
.footer-section h3 {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 16px;}
.footer-links li {margin-bottom: 12px;}
.footer-bottom p {font-size: 12px;color: #999;}
/* 购买弹窗样式 */
.purchase-modal {width: 480px;max-width: 90%;border-radius: 12px;overflow: hidden;}
.purchase-modal .modal-header {background: #fff;padding: 16px 20px;border-bottom: 1px solid #f0f0f0;display: flex;align-items: center;justify-content: space-between;}
.purchase-modal .modal-title {font-size: 18px;font-weight: 600;color: #333;margin: 0;}
.purchase-body {background: #fafafa;padding: 0;}
.purchase-header {display: flex;justify-content: space-between;align-items: flex-start;padding: 20px;background: #e6f7ff;}
.purchase-info {flex: 1;}
.purchase-name {font-size: 20px;font-weight: 600;color: #1890ff;margin-bottom: 8px;}
.purchase-expire {font-size: 14px;color: #666;}
.purchase-price {text-align: right;}
.purchase-price .price-symbol {font-size: 24px;font-weight: 600;color: #ff4d4f;}
.purchase-price .price-value {font-size: 48px;font-weight: 700;color: #ff4d4f;}
.purchase-divider {height: 1px;background: #e8e8e8;}
.purchase-benefits {padding: 20px;}
.benefits-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 12px;}
.benefits-list {list-style: none;padding: 0;margin: 0;}
.benefits-list li {display: flex;align-items: center;padding: 8px 0;font-size: 14px;color: #666;}
.benefit-check {color: #52c41a;font-weight: bold;margin-right: 10px;min-width: 16px;}
.benefit-value {margin-left: auto;color: #1890ff;font-size: 12px;background: #e6f7ff;padding: 2px 8px;border-radius: 4px;}
.purchase-footer {display: flex;gap: 12px;padding: 16px 20px;background: #fff;border-top: 1px solid #f0f0f0;}
.purchase-footer .modal-btn {flex: 1;padding: 12px;border-radius: 8px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s;}
.purchase-footer .cancel-btn {background: #f5f5f5;color: #666;border: 1px solid #d9d9d9;}
.purchase-footer .cancel-btn:hover {background: #e8e8e8;}
.purchase-footer .confirm-btn {background: linear-gradient(135deg, #ff6b6b, #ff8e53);color: #fff;border: none;}
.purchase-footer .confirm-btn:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);}
/* 立即生效勾选框样式 */
.purchase-option {padding: 16px 20px;border-top: 1px solid #e8e8e8;background: #fff;}
.option-checkbox {display: flex;align-items: center;cursor: pointer;user-select: none;}
.option-checkbox input[type="checkbox"] {display: none;}
.checkbox-custom {width: 20px;height: 20px;border: 2px solid #d9d9d9;border-radius: 4px;margin-right: 10px;position: relative;transition: all 0.3s;}
.option-checkbox input[type="checkbox"]:checked + .checkbox-custom {background: linear-gradient(135deg, #ff6b6b, #ff8e53);border-color: transparent;}
.option-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {content: '✓';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;font-size: 12px;font-weight: bold;}
.option-text {font-size: 14px;font-weight: 500;color: #333;}
.option-tip {display: block;margin-top: 8px;margin-left: 30px;font-size: 12px;color: #999;}

.article-list-container{background-color: #ffffff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);border-radius: 6px;}

/* ============================================
   素材库界面样式
   ============================================ */

/* 素材库头部按钮容器 */
#mlHeaderActions {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

/* 内容头部 */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.content-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* 素材库筛选区 */
.material-library .filter-section {
    border-radius: 0;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: none;
}

.material-library .filter-row {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.material-library .filter-row:last-child {
    margin-bottom: 0;
}

.material-library .filter-category {
    display: flex;
    align-items: center;
    gap: 12px;
}

.material-library .filter-label {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    width: 50px;
    flex-shrink: 0;
}

.material-library .filter-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-library .filter-link {
    display: inline-block;
    padding: 4px 16px;
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.material-library .filter-link:hover {
    background: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
}

.material-library .filter-link.active {
    background: #ff4d4f;
    color: #fff;
    border: 1px solid #ff4d4f;
}

/* 分类树容器 */
.category-tree-container {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: calc(100% - 100px);
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
}

.category-tree-header {
    display: none;
}

.tree-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.tree-expand-all,
.tree-collapse-all {
    display: none;
}

/* 分类树 - 分行布局 */
.category-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    max-height: none;
    overflow-y: visible;
}

/* 分类行容器 */
.category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
}

/* 行标签 */
.category-row-label {
    font-size: 12px;
    color: #999;
    margin-right: 8px;
    padding-top: 6px;
    flex-shrink: 0;
}

.category-node {
    position: relative;
    display: inline-flex;
}

.category-item-wrapper {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    background: #f5f5f5;
    border-radius: 20px;
    border: 1px solid #e8e8e8;
    color: #666;
    white-space: nowrap;
}

.category-item-wrapper:hover {
    background: #fff;
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.category-item-wrapper.selected {
    background: #fff;
    border-color: #ff4d4f;
    color: #ff4d4f;
    font-weight: 500;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}

.category-item-wrapper.selected .category-name {
    color: #ff4d4f;
    font-weight: 500;
}

.category-expand-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #999;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    font-size: 12px;
}

.category-item-wrapper:hover .category-expand-icon,
.category-item-wrapper.selected .category-expand-icon {
    color: #ff4d4f;
}

.category-expand-icon.expanded {
    transform: rotate(180deg);
}

.category-expand-icon.empty {
    display: none;
}

.category-icon {
    display: none;
}

.category-name {
    flex: 1;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

.category-count {
    font-size: 12px;
    color: #999;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.category-item-wrapper:hover .category-count,
.category-item-wrapper.selected .category-count {
    color: #ff4d4f;
    border-color: #ff4d4f;
}

/* 二级分类行 */
.category-node.level-2 {
    display: inline-flex;
}

.category-node.level-2 .category-item-wrapper {
    padding: 4px 10px;
    font-size: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
}

.category-node.level-2 .category-item-wrapper:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.category-node.level-2 .category-item-wrapper.selected {
    border-color: #1890ff;
    color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.category-node.level-2 .category-count {
    color: #999;
}

.category-node.level-2 .category-item-wrapper:hover .category-count,
.category-node.level-2 .category-item-wrapper.selected .category-count {
    color: #1890ff;
    border-color: #1890ff;
}

/* 三级分类 */
.category-node.level-3 .category-item-wrapper {
    padding: 3px 8px;
    font-size: 11px;
    background: #fff;
    border: 1px dashed #d9d9d9;
}

.category-node.level-3 .category-item-wrapper:hover {
    border-color: #52c41a;
    color: #52c41a;
}

.category-node.level-3 .category-item-wrapper.selected {
    border-color: #52c41a;
    color: #52c41a;
    box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.1);
}

.category-node.level-3 .category-count {
    color: #999;
}

.category-node.level-3 .category-item-wrapper:hover .category-count,
.category-node.level-3 .category-item-wrapper.selected .category-count {
    color: #52c41a;
    border-color: #52c41a;
}

/* 子分类容器 */
.category-children {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
}

.category-children.expanded {
    max-height: 500px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* 素材库搜索专用样式 */
.ml-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.ml-search-input:focus {
    outline: none;
    border-color: #ff4d4f;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
}

.ml-search-btn {
    padding: 8px 20px;
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 8px;
}

.ml-search-btn:hover {
    background-color: #40a9ff;
}

/* 批量选择栏 */
.select-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: #fffef5;
    border-bottom: 1px solid #ffe59d;
    margin-bottom: 16px;
}

.select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.select-all input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.select-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: #666;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.select-btn:hover {
    background: #f5f5f5;
}

.select-btn.danger {
    color: #ff4d4f;
    border-color: #ff4d4f;
}

.select-btn.danger:hover {
    background: #fff2f0;
}

/* 素材网格 */
.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* 素材卡片 */
.material-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
}

.material-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #ff4d4f;
}

/* 卡片复选框 */
.card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    cursor: pointer;
}

.card-checkbox input {
    display: none;
}

.checkbox-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
}

.card-checkbox input:checked + .checkbox-indicator {
    background: #ff4d4f;
    border-color: #ff4d4f;
}

.card-checkbox input:checked + .checkbox-indicator::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -4px;
}

.material-card:hover .checkbox-indicator {
    border-color: #ff4d4f;
}

/* 卡片图片 */
.card-image {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: #fafafa;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    -webkit-user-drag: element;
    user-select: none;
}

/* 拖动图片样式 */
.draggable-image {
    cursor: grab;
}

.draggable-image:active {
    cursor: grabbing;
}

.draggable-image.dragging {
    opacity: 0.7;
}

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

/* 卡片覆盖层 - 右上角操作按钮组 */
.card-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}

.material-card:hover .card-overlay {
    opacity: 1;
}

.card-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #666;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-action-btn:hover {
    background: #fff;
    color: #ff4d4f;
    transform: scale(1.1);
}

.card-action-btn.download-btn:hover {
    color: #52c41a;
}

/* 卡片信息 */
.card-info {
    padding: 10px;
}

.card-name {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    cursor: pointer;
}

.card-name:hover {
    color: #1890ff;
}

.card-name-input {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #1890ff;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
}

/* 素材库分页 */
.material-library .pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    position: relative;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.material-library .pagination-btn {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #666;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

.material-library .pagination-btn:hover:not(:disabled) {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.material-library .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.material-library .pagination-info {
    font-size: 13px;
    color: #666;
    min-width: 150px;
    text-align: center;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.material-library .pagination-info strong {
    color: #333;
    font-weight: 600;
}

/* 素材库分类管理弹窗 */
.group-manager-modal .modal {
    max-width: 480px;
}

.group-manager-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.group-manager-item:hover {
    background-color: #fafafa;
}

.group-manager-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.group-manager-name:hover {
    color: #ff4d4f;
}

.group-manager-input {
    flex: 1;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    outline: none;
}

.group-manager-count {
    font-size: 12px;
    color: #999;
    margin-right: 16px;
}

.group-manager-actions {
    display: flex;
    gap: 8px;
}

.group-edit-btn,
.group-save-btn,
.group-cancel-btn,
.group-delete-btn {
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.group-edit-btn:hover,
.group-save-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.group-cancel-btn:hover {
    border-color: #999;
    color: #666;
}

.group-delete-btn:hover {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.group-manager-item.special-group .group-manager-actions {
    display: none;
}