.share-body {
    width: 320px;
}
/* 卡片容器 - 支持滚动 */
.ri-cards-scroll-container {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch; /* 提升iOS滚动体验 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0,0,0,0.2) transparent; /* Firefox */
}

/* 自定义滚动条 */
.ri-cards-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.ri-cards-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.ri-cards-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.ri-cards-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* 小卡片容器 */
.ri-flow-cards {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 5px;
}

/* 大卡片样式 */
.ri-card-large {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 15px;
    padding: 25px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    /* 确保卡片本身不会影响外部布局 */
    overflow: hidden;
    position: relative;
}

/* 小卡片样式 */
.ri-card-small {
    width: 320px;
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    position: relative; /* 确保相对定位 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; /* 防止内容溢出 */
}

.ri-card-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* 卡片头部 */
.ri-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ri-scene-info {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 55px;
    margin-bottom: 15px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
}

.ri-scene-number {
    font-size: 14px;
    font-weight: 500;
}

.ri-duration {
    background: rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
}



/* 卡片标题 */
.ri-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 大卡片标题样式 */
.ri-card-title-large {
    font-size: 32px;
    text-align: center !important;
    width: 100%;
    display: block;
}

/* 大卡片头部容器居中 */
.ri-card-large .ri-card-header {
    justify-content: center;
}

/* 内容区域 */
.ri-content-area {
    position: relative;
    height: 180px;
    overflow: hidden;
    margin-bottom: 15px;
}

.ri-card-content {
    font-size: 15px;
    line-height: 1.8;
    color: var( --is-font);
}
.ri-card-small .ri-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ri-card-small .ri-card-line {
    margin: 0;
    padding: 8px 10px 8px 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    color: rgba(30, 41, 59, .9);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .1px;
    position: relative;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.ri-card-small .ri-card-line::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.ri-content-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 92px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .52) 46%,
        rgba(255, 255, 255, .9) 74%,
        rgba(255, 255, 255, .97) 100%
    );
    backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 3;
}
.ri-toggle-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: none;
    color: #333;
    padding: 6px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 4;
}

.ri-toggle-btn:hover {
    background: #f5f5f5;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 指标区域 - 删除重复定义，使用下面的新定义 */

.ri-guidance-section {
    text-align: center;
        background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}


/* 标签区域 */
.ri-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ri-tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    transition: all 0.2s ease;
}
/* 全文弹出层 */
.ri-fulltext-popup {
    position: absolute;
    top: 0; /* 恢复到顶部，因为现在全文层包含了自己的头部 */
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: 15px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    padding: 20px;
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
}

.ri-fulltext-popup.visible {
    opacity: 1;
    visibility: visible;
}

/* 添加内容容器样式 */
.ri-fulltext-popup p {
    margin-bottom: 20px; /* 确保文本与按钮有足够间距 */
}
.ri-fulltext-popup .ri-card-line.is-full {
    margin: 0 0 10px;
    padding: 8px 10px 8px 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    color: rgba(30, 41, 59, .9);
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: .12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    position: relative;
}
.ri-fulltext-popup .ri-card-line.is-full::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.ri-fulltext-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ri-close-btn {
    position: sticky; /* 改为sticky定位 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: none;
    color: #333;
    padding: 6px 16px; /* 减小内边距 */
    border-radius: 16px; /* 调整圆角 */
    cursor: pointer;
    font-size: 13px; /* 减小字体 */
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 101;
    margin-top: 20px; /* 添加上边距，与文本保持距离 */
}

.ri-toggle-btn:hover,
.ri-close-btn:hover {
    background: #f5f5f5;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 添加遮罩层 */
.ri-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}


/* 响应式设计 */
@media screen and (min-width: 993px) {
    .ri-flow-cards {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .ri-card-small {
        flex: 0 0 calc(33.333% - 14px);
        min-width: 300px;
    }
    
    .ri-cards-scroll-container {
        overflow-x: visible;
    }
}

@media screen and (max-width: 992px) {
    .ri-card-small {
        min-width: 280px;
    }
    .ri-card-small .ri-card-line {
        font-size: 12px;
        line-height: 1.55;
    }
}
/*新增css*/
.ri-tip-box {
    font-size: 12px;
    color: #333;
    padding: 8px 12px;
    background: rgb(22 246 69 / 41%);
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ri-tip-icon {
    font-size: 14px;
}
/* PC端保持不变 - 删除重复定义，使用下面的新定义 */

/* 移动端样式 */
@media (max-width: 767px) {
    .ri-metrics {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 15px 0; /* 调整padding，左右留出空间 */
    }
    
    .ri-metrics::-webkit-scrollbar {
        display: none;
    }
    
    .ri-metrics {
        gap: 15px; /* 添加间距 */
        padding-left: 15px; /* 左侧留出空间 */
        padding-right: 15px; /* 右侧留出空间 */
    }
    
    .ri-guidance-section {
        flex: 0 0 auto;
        min-width: 85px; /* 设置最小宽度 */
        white-space: nowrap; /* 防止文字换行 */
        position: relative; /* 添加这行，作为提示框的定位参考 */
    }
}

/* 等级总览卡片样式 */
.ri-grade-overview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 8px 25px -5px rgba(102, 126, 234, 0.4);
    color: white;
    position: relative;
    overflow: hidden;
}

.ri-grade-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.ri-grade-overview-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.ri-grade-overview-right {
    flex: 1;
    margin-left: 24px;
    position: relative;
    z-index: 1;
}

.ri-analyst-summary {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    opacity: 0.95;
}

/* 等级总览卡片中的等级显示 */
.ri-grade-overview-card .ri-grade-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none !important;
    padding: 0;
    border-radius: 0;
}

/* 创建等级徽章样式 */
.ri-grade-overview-card .ri-grade-badge {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: white;
    position: relative;
    overflow: hidden;
}

.ri-grade-overview-card .ri-grade-letter {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

/* 等级信息区域 */
.ri-grade-overview-card .ri-grade-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ri-grade-overview-card .ri-grade-level {
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ri-grade-overview-card .ri-score-display {
    font-size: 14px;
}

/* 等级徽章颜色 - 简化版 */
.ri-grade-overview-card .ri-grade-display.grade-s .ri-grade-badge {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

.ri-grade-overview-card .ri-grade-display.grade-a .ri-grade-badge {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.ri-grade-overview-card .ri-grade-display.grade-b .ri-grade-badge {
    background: linear-gradient(135deg, #2196f3, #21cbf3);
}

.ri-grade-overview-card .ri-grade-display.grade-c .ri-grade-badge {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: #333;
}

/* S级和A级简单闪光效果 */
.ri-grade-overview-card .ri-grade-display.grade-s .ri-grade-badge::after,
.ri-grade-overview-card .ri-grade-display.grade-a .ri-grade-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 100%);
    animation: simpleShimmer 3s infinite;
    border-radius: 12px;
}

@keyframes simpleShimmer {
    0% { left: -50%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ====== 创作工具快捷入口样式 ====== */
.ri-creation-tools {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    border: 1px solid rgba(79, 172, 254, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    backdrop-filter: blur(5px);
}

.ri-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ri-tools-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgb(79 172 254);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ri-tools-header h5 i {
    color: #4facfe;
}
.ri-tools-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.ri-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

.ri-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ri-tool-btn:active {
    transform: translateY(0);
}

.ri-tool-btn i {
    font-size: 16px;
    margin-bottom: 2px;
}

/* 不同工具按钮的彩色主题 */
.ri-tool-cover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 107, 157, 0.05));
    border-color: rgba(255, 107, 157, 0.3);
}

.ri-tool-cover i {
    color: #ff6b9d;
}

.ri-tool-cover span {
    color: #ff6b9d;
}

.ri-tool-voice {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1), rgba(79, 172, 254, 0.05));
    border-color: rgba(79, 172, 254, 0.3);
}

.ri-tool-voice i {
    color: #4facfe;
}

.ri-tool-voice span {
    color: #4facfe;
}

.ri-tool-check {
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.1), rgba(17, 153, 142, 0.05));
    border-color: rgba(17, 153, 142, 0.3);
}

.ri-tool-check i {
    color: #11998e;
}

.ri-tool-check span {
    color: #11998e;
}

.ri-tool-optimize {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(102, 126, 234, 0.05));
    border-color: rgba(102, 126, 234, 0.3);
}

.ri-tool-optimize i {
    color: #667eea;
}

.ri-tool-optimize span {
    color: #667eea;
}

/* 数据工具按钮主题 */
.ri-tool-data {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border-color: rgba(255, 193, 7, 0.3);
}

.ri-tool-data i, .ri-tool-data span {
    color: #ffc107;
}

.ri-tool-trend {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    border-color: rgba(40, 167, 69, 0.3);
}

.ri-tool-trend i, .ri-tool-trend span {
    color: #28a745;
}

.ri-tool-keyword {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-color: rgba(220, 53, 69, 0.3);
}

.ri-tool-keyword i, .ri-tool-keyword span {
    color: #dc3545;
}

.ri-tool-competitor {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.1), rgba(108, 117, 125, 0.05));
    border-color: rgba(108, 117, 125, 0.3);
}

.ri-tool-competitor i, .ri-tool-competitor span {
    color: #6c757d;
}

/* 营销工具按钮主题 */
.ri-tool-social {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.1), rgba(23, 162, 184, 0.05));
    border-color: rgba(23, 162, 184, 0.3);
}

.ri-tool-social i, .ri-tool-social span {
    color: #17a2b8;
}

.ri-tool-hashtag {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(138, 43, 226, 0.05));
    border-color: rgba(138, 43, 226, 0.3);
}

.ri-tool-hashtag i, .ri-tool-hashtag span {
    color: #8a2be2;
}

.ri-tool-schedule {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-color: rgba(255, 140, 0, 0.3);
}

.ri-tool-schedule i, .ri-tool-schedule span {
    color: #ff8c00;
}

.ri-tool-engagement {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.1), rgba(255, 20, 147, 0.05));
    border-color: rgba(255, 20, 147, 0.3);
}

.ri-tool-engagement i, .ri-tool-engagement span {
    color: #ff1493;
}

/* 悬停效果 */
.ri-tool-cover:hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 107, 157, 0.1));
    border-color: #ff6b9d;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
    transform: translateY(-2px);
}

.ri-tool-voice:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(79, 172, 254, 0.1));
    border-color: #4facfe;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
    transform: translateY(-2px);
}

.ri-tool-check:hover {
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.2), rgba(17, 153, 142, 0.1));
    border-color: #11998e;
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
    transform: translateY(-2px);
}

.ri-tool-optimize:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* 数据工具悬停效果 */
.ri-tool-data:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    border-color: #ffc107;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    transform: translateY(-2px);
}

.ri-tool-trend:hover {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    border-color: #28a745;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    transform: translateY(-2px);
}

.ri-tool-keyword:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
    border-color: #dc3545;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    transform: translateY(-2px);
}

.ri-tool-competitor:hover {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.2), rgba(108, 117, 125, 0.1));
    border-color: #6c757d;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    transform: translateY(-2px);
}

/* 营销工具悬停效果 */
.ri-tool-social:hover {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.2), rgba(23, 162, 184, 0.1));
    border-color: #17a2b8;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
    transform: translateY(-2px);
}

.ri-tool-hashtag:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(138, 43, 226, 0.1));
    border-color: #8a2be2;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
    transform: translateY(-2px);
}

.ri-tool-schedule:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.2), rgba(255, 140, 0, 0.1));
    border-color: #ff8c00;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
    transform: translateY(-2px);
}

.ri-tool-engagement:hover {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.2), rgba(255, 20, 147, 0.1));
    border-color: #ff1493;
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {

    .ri-tool-btn {
        padding: 10px 6px;
        font-size: 10px;
    }
.ri-metric-item {
    flex: 0 0 auto;
    min-width: 85px;
    white-space: nowrap;
    position: relative;
}    
    .ri-tool-btn i {
        font-size: 14px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ri-grade-overview-card {
        gap: 16px;
    }

    .ri-grade-overview-left {
        justify-content: center;
    }

    .ri-grade-overview-right {
        margin-left: 0;
    }

    .ri-grade-overview-card .ri-grade-badge {
        width: 50px;
        height: 50px;
    }

    .ri-grade-overview-card .ri-grade-letter {
        font-size: 20px;
    }

    .ri-grade-overview-card .ri-grade-level {
        font-size: 16px;
    }

    .ri-analyst-summary {
        font-size: 12px;
    }
}

/* 整个指标区域容器 */
.ri-metrics {
    background: rgb(221 224 222 / 28%) !important;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    
    /* 桌面端：水平滚动布局 */
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden; /* 隐藏垂直滚动 */
    -webkit-overflow-scrolling: touch;
    
    /* 隐藏所有滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    
    /* 默认光标 */
    cursor: grab;
    
    /* 防止文本选择和优化拖拽体验 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* 确保不影响页面整体布局 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 为子元素重新启用文本选择 */
.ri-metrics * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 完全隐藏WebKit滚动条 */
.ri-metrics::-webkit-scrollbar {
    display: none;
}

/* 条形图容器 - 保持原来大小 */
.ri-bar-chart-container {
    flex: 0 0 380px; /* 稍微增加宽度 */
    height: 400px; /* 设置固定高度 */
    min-width: 380px; /* 确保最小宽度 */
}

/* 解说风格和雷达图区域 */
.ri-style-radar-section {
    display: flex;
    gap: 20px;
    height: 400px; /* 与条形图容器高度一致 */
    flex: 0 0 auto; /* 不压缩 */
    min-width: 800px; /* 增加最小宽度：350px + 430px + 20px gap */
}

/* 中间解说风格区域 - 放大 */
.ri-style-section {
    flex: 0 0 350px; /* 增加宽度 */
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    min-width: 350px; /* 确保最小宽度 */
}

/* 右侧雷达图区域 - 放大更多 */
.ri-radar-section {
    flex: 0 0 430px; /* 大幅增加宽度，给雷达图更多空间 */
    background-image: linear-gradient(to right, #0f0c29,#302b63,#24243e);
    border-radius: 12px;
    padding: 20px; /* 增加内边距 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    min-width: 430px; /* 确保最小宽度 */
}
.ri-section-header {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
    text-align: center !important;
}
.ri-radar-container {
    height: 360px; /* 进一步增加高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ri-radar-chart {
    width: 100%;
    height: 100%;
}

/* 解说风格板块样式 */
.ri-guidance-section-jieshuo {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    border-radius: 15px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    position: relative;
    overflow-y: auto; /* 允许垂直滚动 */
    flex: 1; /* 让它和创作核心指引高度一致 */
    display: flex;
    flex-direction: column;
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ri-guidance-section-jieshuo::-webkit-scrollbar {
    display: none;
}

/* 创作核心指引样式 */
.ri-guidance-section {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 15px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    position: relative;
    overflow-y: auto; /* 允许垂直滚动 */
    flex: 1; /* 让它和解说风格高度一致 */
    display: flex;
    flex-direction: column;
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ri-guidance-section::-webkit-scrollbar {
    display: none;
}

/* 解说风格内容样式 */
.ri-style-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ri-narration-style {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 400;
    align-self: flex-start;
}

.ri-style-description {
    flex: 1;
}

.ri-description-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* 创作核心指引内容样式 */
.ri-guidance-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.ri-guidance-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ri-guidance-item:last-child {
    border-bottom: none;
}

.ri-guidance-number {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
}

.ri-guidance-detail {
    flex: 1;
}

.ri-guidance-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ri-guidance-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* 条形图样式在上面已经定义，这里删除重复 */





.ri-bar-chart-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ri-bar-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.ri-bar-item:hover {
    transform: translateX(3px);
}

.ri-bar-label {
    display: none; /* 隐藏外部标签，文字将显示在进度条内 */
}

.ri-bar-track {
    width: 100%;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.ri-bar-fill {
    height: 100%;
    border-radius: 16px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
    /* 初始宽度为20%，让用户看到时就有动画效果 */
    width: 20%;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ri-bar-text {
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
    opacity: 0.8; /* 初始就有一定透明度 */
    transition: opacity 0.3s ease;
}

/* 光泽效果 */
.ri-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
    opacity: 0.6;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    /* 移动端重新调整布局 */
    .ri-bar-chart-container {
        flex: 0 0 268px;
        min-width: 268px;
    }
.ri-card-title-large {
    font-size: 18px;
}
.ri-card-large {
    padding: 25px 16px;
}
    .ri-style-section {
        flex: 0 0 268px;
        min-width: 268px;
    }

    .ri-radar-section {
      flex: 0 0 368px;
        min-width: 368px;
    }

    .ri-radar-container {
        height: 250px;
    }

    .ri-guidance-text {
        font-size: 10px;
    }

    /* 条形图移动端样式 */
    .ri-bar-chart-body {
        gap: 6px;
    }

    .ri-bar-track {
        height: 28px;
    }

    .ri-bar-fill {
        padding: 0 10px;
    }

    .ri-bar-text {
        font-size: 12px;
    }
}

/* 等级Popover样式 - 高级版 */
.grade-popover {
    max-width: 400px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

.grade-popover .popover-body {
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.grade-popover-content {
    padding: 0;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.grade-popover-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff6b9d, #4ecdc4, #45b7d1, #96ceb4, #ff6b9d);
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
    z-index: -1;
    border-radius: 16px;
}

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

.grade-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* 取消标题闪光效果 */

.grade-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.grade-header i {
    margin-right: 8px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: sparkle 2s ease-in-out infinite alternate;
}

@keyframes sparkle {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

.grade-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
    position: relative;
    background: rgba(255,255,255,0.6);
}

.grade-item:hover {
    background: rgba(255,255,255,0.9);
    transform: translateX(3px);
}

.grade-item:last-child {
    border-bottom: none;
}

.grade-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* S级和A级闪光效果 */
.grade-s .grade-badge::after,
.grade-a .grade-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
    animation: badgeShimmer 2.5s infinite;
}

.grade-s .grade-info,
.grade-a .grade-info {
    position: relative;
    overflow: hidden;
}

.grade-s .grade-info::after,
.grade-a .grade-info::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: badgeShimmer 3s infinite;
}

@keyframes badgeShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.grade-item:hover .grade-badge {
    transform: scale(1.05);
}

.grade-s .grade-badge {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    box-shadow: 0 4px 20px rgba(255, 65, 108, 0.4);
}

.grade-a .grade-badge {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    box-shadow: 0 4px 20px rgba(17, 153, 142, 0.4);
}

.grade-b .grade-badge {
    background: linear-gradient(135deg, #2196f3, #21cbf3);
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
}

.grade-c .grade-badge {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    box-shadow: 0 4px 20px rgba(168, 237, 234, 0.4);
    color: #333;
}

.grade-info {
    flex: 1;
}

.grade-score {
    font-size: 13px;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grade-desc {
    font-size: 14px;
    color: #2d3748;
    line-height: 1.5;
    font-weight: 500;
}
.ri-section-header h4 {
    font-size: 18px;
}
/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {


    .ri-style-section {
        flex: 0 0 300px;
    }

    .ri-radar-section {
        flex: 0 0 360px;
    }

    .ri-radar-container {
        height: 320px;
    }
    
    .ri-guidance-text {
        font-size: 11px;
    }
}

/* 🔧 旧版本大卡片样式 - 保持原始简洁一行布局 */
.ri-legacy-simple .ri-metrics {
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* 强制一行显示 */
    overflow-x: auto; /* 如果太窄则允许滚动 */
}
.ri-rating-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}
.ri-audience-badge {
    position: absolute;
    top: -11px;
    right: -20px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #ff4757;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    transform: scale(0.8);
}
.ri-metric-miaoshu {
    font-size: 12px;
}
/* 文章页打赏组件 */
.reward-code{overflow:hidden}.pay-button button,.pay-button .button{width:100%;font-size:15px;padding:15px 0;text-align:center;line-height:1;display:block}.reward-code ul.ds-money li{width:33.333%}.reward-code .ds-item{cursor:pointer;height:50px;word-break:initial;background:rgba(255,255,255,.3)}.reward-code .ds-item.active{border:2px solid #ffc107;background:unset}.reward-code ul.ds-money{display:flex;flex-flow:wrap;padding-left:2px;margin-bottom:10px;margin:0}.ds-item{padding:10px;font-size:10px;margin:5px;border:1px solid #ddd;text-align:center;line-height:1;display:flex;justify-content:center;align-items:flex-end;border-radius:3px;box-sizing:border-box}.ds-item.ok{border:2px solid #f9c851}.ds-item span{font-size:30px}.ds-item svg{font-size:12px;margin-bottom:15px;margin-right:5px}.ds-msg{font-size:14px;line-height:14px;margin:10px auto;text-align:center}
.avatar-group{position:relative;z-index:2;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.avatar-group .avatar{width:32px;height:32px}.avatar-group .avatar:hover{z-index:2;transform:translateY(-4px) scale(1.02);transition:.5s}.avatar-group .avatar+.avatar{margin-left:-1rem}.avatar-primary{background-color:var(--is-rgb)}.avatar-initials{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:32px;height:32px;font-size:.75rem;font-weight:600;pointer-events:none;text-transform:uppercase;border-radius:.5rem;color:#fff}[data-bs-theme=dark] .content-ds{background:var(--is-body);border:1px solid var(--is-body)}.content-ds{display:flex;justify-content:center;flex-flow:column;margin-top:20px;padding:20px;border-radius:3px;position:relative;border:1px solid #F5F6F7;background:#fffcf7}.content-ds-button button{background:-webkit-linear-gradient(top,#ff557f,#f16b6f);border:0;font-size:15px;border-radius:3px}.content-ds-button{position:absolute;right:20px;top:8px}#con{width:320px;height:85px;position:relative;border-radius:4px}#TA-con{width:122px;height:45px;background-color:#f25d8e;position:absolute;top:50%;left:14%;transform:translateY(-50%);border-radius:4px;cursor:pointer;z-index:2}#text-con{height:100%;margin:0 auto;position:relative;display:flex;align-items:center}#text-con i{color:#fff}#TA{float:right;line-height:45px;font-size:15px;color:#fff}#TA-con:hover{background-color:#ff6b9a}#tube-con{width:157px;height:55px;position:absolute;right:-5px;top:15px}.content-ds-button svg{width:100%;height:100%;max-width:none}#mask{width:0;height:100%;overflow:hidden;position:absolute;top:0;left:0;transition:all .5s}#mask svg{width:157px;height:55px}#TA-con:hover+#tube-con>#mask{width:157px}#TA-con:hover+#tube-con>#orange-mask{animation:move1 .5s linear .2s infinite}#TA-con:hover+#tube-con>#orange-mask svg{animation:movetwo .5s linear .2s infinite}#orange-mask{width:18px;height:100%;overflow:hidden;position:absolute;left:-15px;top:0}#orange-mask svg{position:absolute;top:0;left:15px;width:157px;height:55px}@keyframes move1{0%{left:-15px}100%{left:140px}}@keyframes movetwo{0%{left:15px}100%{left:-140px}}#duo{position:absolute;right:10px;top:18px}#people,#money{font-size:12px;font-family:"雅黑";color:#aaa}#people>b{color:#777}@media screen and (max-width:768px){.content-ds-button{top:0;margin-top:2em}#con{width:10em;height:auto;margin:0;background:#fffcf7}#TA-con{height:40px;left:35%}#linght{top:26%}#TA{line-height:40px;margin-right:.4em}#tube-con{display:none}}.content-ds-count span{font-size:10px}