/* --- 进度条基础框架 --- */
.progress-bar {
    width: 100px; /* 固定宽度，防止撑破排版 */
    height: 8px;
    background: rgba(0, 0, 0, 0.1); /* 槽位背景 */
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    overflow: hidden;
    position: relative;
}

/* --- 进度条填充层（带平滑动画） --- */
.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* 让数值变动时有动画感 */
    width: 0%; /* 初始值，会被HTML里的inline style覆盖 */
}

/* --- 四大支线专属进度条配色 --- */

/* 1. 治愈线：明亮樱粉 */
.theme-pure .progress-bar { background: rgba(240, 160, 190, 0.2); }
.theme-pure .progress-fill { 
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 100%); 
    box-shadow: 0 0 5px rgba(255, 154, 158, 0.5);
}

/* 2. 沉沦线：魅惑深紫 */
.theme-dark .progress-bar { background: rgba(75, 0, 130, 0.3); }
.theme-dark .progress-fill { 
    background: linear-gradient(90deg, #4b0082 0%, #9370db 100%); 
    box-shadow: 0 0 5px rgba(147, 112, 219, 0.5);
}

/* 3. 背德线：禁忌血红 */
.theme-taboo .progress-bar { background: rgba(139, 0, 0, 0.3); }
.theme-taboo .progress-fill { 
    background: linear-gradient(90deg, #8b0000 0%, #ff4500 100%); 
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.6);
}

/* 4. 致郁线：荒诞冷灰 */
.theme-broken .progress-bar { background: rgba(112, 128, 144, 0.3); }
.theme-broken .progress-fill { 
    background: linear-gradient(90deg, #708090 0%, #bdc3c7 100%); 
}

/* 状态行微调：让文字和进度条对齐 */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中对齐 */
    padding: 6px 0;
    font-family: "Microsoft YaHei", sans-serif;
}