.rich {
    /* ---------- 主题变量 ---------- */
    --rich-text: #454545;
    --rich-text-secondary: #666666;
    --rich-text-muted: #999999;
    --rich-text-strong: #333333;
    --rich-line: #dddddd;

    --rich-primary: #0099ff;
    --rich-primary-deep: #007bff;
    --rich-primary-table: #0080e2;
    --rich-primary-bar: #00a6e2;

    --rich-bg-soft: #f9f9f9;
    --rich-bg-border: #f5f5f5;

    --rich-level-1: #00aaff;
    --rich-level-2: #ff8800;
    --rich-level-3: #ff0000;
    --rich-level-4: #aa0000;
    --rich-level-5: #8a0000;

    --rich-radius-sm: 6px;
    --rich-radius-md: 8px;
    --rich-radius-lg: 10px;
    --rich-radius-xl: 18px;

    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    color: var(--rich-text);
    font-size: 16px;
    line-height: 1.6;
}

.rich *,
.rich *::before,
.rich *::after {
    box-sizing: border-box;
}

/* 富文本内图片/表格不自适应宽度时的兜底 */
.rich img {
    max-width: 100%;
}

.rich table {
    width: 100%;
    border-collapse: collapse;
}

/* ---------- 间距工具类 ---------- */
.rich .mt10 {
    margin-top: 10px;
}

.rich .mt20 {
    margin-top: 20px;
}

.rich .mt40 {
    margin-top: 40px;
}

.rich .mb10 {
    margin-bottom: 10px;
}

.rich .mb20 {
    margin-bottom: 20px;
}

.rich .mb40 {
    margin-bottom: 40px;
}

.rich .tc {
    text-align: center !important;
}

/* ---------- 分级结果色 ---------- */
.rich .result-level-1 {
    color: var(--rich-level-1);
}

.rich .result-level-2 {
    color: var(--rich-level-2);
}

.rich .result-level-3 {
    color: var(--rich-level-3);
}

.rich .result-level-4 {
    color: var(--rich-level-4);
}

.rich .result-level-5 {
    color: var(--rich-level-5);
}

/* ==========================================================================
   标题条
   ========================================================================== */
.rich .h-bar {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid #0099ff;
    border-radius: var(--rich-radius-md) var(--rich-radius-md) 0 0;
    background-image: linear-gradient(150deg, #e1f1ff, #fafdff);
    color: var(--rich-primary-deep);
    font-size: 18px;
    line-height: 1;
}

/* ---------- 标题 / 段落 ---------- */
.rich .h,
.rich .h-color,
.rich .h2-color,
.rich .h3-color,
.rich .h4-color {
    line-height: 1.5;
    font-weight: bold;
}

.rich .h,
.rich .h-color {
    font-size: 22px;
    margin-bottom: 8px;
}

.rich .h {
    color: var(--rich-text-strong);
}

.rich .h-color {
    color: var(--rich-primary-deep);
}

.rich h2.h-color,
.rich h2.h-bar,
.rich .h2-color {
    font-size: 22px;
    color: var(--rich-primary-deep);
    margin-bottom: 8px;
}

.rich h3.h-color,
.rich h3.h-bar,
.rich .h3-color {
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--rich-primary);
}

.rich h4.h-color,
.rich h4.h-bar,
.rich .h4-color {
    font-size: 18px;
    margin-bottom: 4px;
    color: #069182;
}

.rich .h3-color{
    border-bottom: 1px solid #ccc;
}

.rich .h4-color {
    border-bottom: 1px dotted #ccc;
}

.rich .p,
.rich .p-n {
    color: var(--rich-text-secondary);
    font-size: 16px;
    line-height: 2.2em;
    text-align: justify;
    margin-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}

.rich .p-n {
    text-indent: 0;
}

.rich .p2i {
    text-indent: 2em;
}

.rich .p:last-child,
.rich .p-n:last-child {
    margin-bottom: 0;
}

.rich .t-color {
    color: var(--rich-primary);
}

.rich .label{
    color: var(--rich-primary) !important;
}

/* ---------- 图片 ---------- */
.rich .img {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 2px auto;
}

/* ---------- 信息块 ---------- */
.rich .info {
    box-sizing: border-box;
    padding: 10px;
    border-radius: var(--rich-radius-lg);
    background-color: var(--rich-bg-soft);
    color: var(--rich-text-secondary);
    font-size: 16px;
    line-height: 2.2em;
    text-align: justify;
}

/* ---------- 因素列表（卡片式） ---------- */
.rich .items,
.rich .factors-list {
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
}

.rich .factors-list .factor {
    padding: 8px;
    margin-bottom: 8px;
    border: 3px solid var(--rich-bg-border);
    border-radius: var(--rich-radius-md);
    list-style-type: none;
}

.rich .factors-list .factor .factor-name {
    padding: 8px;
    margin-bottom: 5px;
    border-bottom: 2px solid #dddddd;
    color: var(--rich-primary);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.8;
}

.rich .factors-list .factor .row,
.rich .factor-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 16px;
    color: var(--rich-text-secondary);
    padding: 8px 6px;
    border-bottom: 1px solid #eeeeee;
}

.rich .factors-list .factor .row:last-child,
.rich .factor-row:last-child{
    border-bottom: 0;
}

.rich .factors-list .factor .label,
.rich .factor-row .label{
    display: inline-block;
    min-width: 80px;
    width: 80px;
    text-align: right;
}

.rich .factors-list .factor .score {
    color: var(--rich-text);
    font-weight: bold;
}

.rich .factors-list .factor .result,
.rich .factor-row .result{
    display: inline-block;
    flex: 1 1 auto;
    color: var(--rich-text-secondary);
    line-height: 1.4;
    text-align: justify;
}

.rich .factors-list .factor .tip {
    color: var(--rich-text-muted);
    font-size: 12px;
    line-height: 22px;
}

/* ---------- 选中内容块 ---------- */
.rich .selected-content {
    padding: 10px;
    border-radius: var(--rich-radius-sm);
}

/* ==========================================================================
   items 列表
   ========================================================================== */
.rich .item-block {
    box-sizing: border-box;
    padding: 2px 15px 15px;
    margin-bottom: 12px;
    border: 1.5px dashed var(--rich-line);
    border-radius: var(--rich-radius-lg);
}

.rich .item-title {
    margin-top: 20px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--rich-line);
    color: var(--rich-primary);
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
}

.rich .items {
    padding: 0 10px;
    list-style-type: circle;
}

.rich .items .item-li {
    margin-left: 15px;
    margin-bottom: 6px;
    color: var(--rich-text-secondary);
    font-size: 15px;
    line-height: 2.1em;
    list-style-position: outside;
    text-align: justify;
}

.rich .items .item-li:last-child{
    margin-bottom: 0;
}

.rich .items .item-li b {
    color: var(--rich-text-strong);
}

.rich .items .item-li span {
    color: var(--rich-primary);
}

/* ==========================================================================
   score-table 评分表
   ========================================================================== */
.rich .score-table {
    width: 100%;
    height: auto;
    border: 0;
    border-collapse: collapse;
    padding-left: 6px;
    padding-right: 6px;
}

.rich .score-table .score-header { 
    border-bottom: 2px solid #999;
    height: 50px;
}

.rich .score-table .score-header .item {
    color: var(--rich-primary-table);
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.rich .score-table .factor {
    height: 40px;
    color: #888888;
    font-size: 16px;
}

/* 斑马纹：统一挂在单元格上，避免 tr 背景被 td 覆盖导致偶发不生效 */
.rich .score-table .factor:nth-child(odd) > * {
    background-color: var(--rich-bg-soft);
}

.rich .score-table .score-header .item,
.rich .score-table .factor .factor-name,
.rich .score-table .factor .factor-score,
.rich .score-table .factor .factor-result,
.rich .score-table .factor .factor-info {
    padding: 10px 6px;
}

.rich .score-table .factor .factor-name {
    color: var(--rich-text-strong);
    white-space: nowrap;
}

/* ==========================================================================
   多维结果
   ========================================================================== */
.rich .result-title {
    margin-bottom: 10px;
    color: var(--rich-text-secondary);
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
}

.rich .result-base-info {
    margin-bottom: 10px;
    color: var(--rich-text-muted);
    font-size: 16px;
    text-align: center;
}

.rich .result-title .result-info,
.rich .result-base-info .info {
    color: #004eff;
}

.rich .result-row-items {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 10px;
}

.rich .result-row-items .row-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 16px 10px;
    border-radius: var(--rich-radius-xl);
}

/* 四项配色：背景 + 标题色 */
.rich .result-row-items .row-item:nth-child(4n + 1) {
    background-color: #f5ede0;
}

.rich .result-row-items .row-item:nth-child(4n + 2) {
    background-color: #ede2f3;
}

.rich .result-row-items .row-item:nth-child(4n + 3) {
    background-color: #e5f0ea;
}

.rich .result-row-items .row-item:nth-child(4n) {
    background-color: #e5e8f0;
}

.rich .result-row-items .row-item:nth-child(4n + 1) .title {
    color: #ff9700;
}

.rich .result-row-items .row-item:nth-child(4n + 2) .title {
    color: #9c28b1;
}

.rich .result-row-items .row-item:nth-child(4n + 3) .title {
    color: #4cb050;
}

.rich .result-row-items .row-item:nth-child(4n) .title {
    color: #007eff;
}

.rich .result-row-items .title,
.rich .result-row-items .result,
.rich .result-row-items .score,
.rich .result-row-items .info {
    width: 100%;
}

.rich .result-row-items .title,
.rich .result-row-items .result,
.rich .result-row-items .score {
    text-align: center;
    line-height: 1em;
}

.rich .result-row-items .title {
    color: var(--rich-text-strong);
    font-size: 16px;
    font-weight: bold;
}

.rich .result-row-items .result {
    margin-top: 8px;
    color: var(--rich-text);
    font-size: 14px;
    line-height: 1.4;
}

.rich .result-row-items .score {
    margin-top: 12px;
    color: var(--rich-text-muted);
    font-size: 12px;
}

.rich .result-row-items .info {
    margin-top: 10px;
    color: var(--rich-text-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: justify;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media only screen and (max-width: 768px) {
    .rich .img {
        width: 100%;
        margin: 10px auto;
    }

    /* 多维结果卡片过多时换行，避免被压缩到不可读 */
    .rich .result-row-items {
        flex-wrap: wrap;
    }

    .rich .result-row-items .row-item {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }

    .rich .score-table {
        font-size: 13px;
    }

    .rich .score-table .score-header .item,
    .rich .score-table .factor .factor-name,
    .rich .score-table .factor .factor-score,
    .rich .score-table .factor .factor-result {
        padding: 8px 0;
    }

    .rich .result-title {
        font-size: 22px;
    }
}

@media print {
    .rich .h-bar {
        background-image: none;
        background-color: #f2f8ff;
    }

    .rich .result-row-items .row-item {
        border: 1px solid var(--rich-line);
    }
}