```css
/* ==========================================
   ✨ 华丽魔导书页风格核心样式（修正版） ✨
   ========================================== */

/* 1. 强力覆盖气泡背景：魔法书页主体 */
ai {
    display: block !important;
    width: 100% !important;
    max-width: 800px;
    margin: 10px auto !important;
    padding: 25px 20px !important;
    /* 羊皮纸复古底色，使用 !important 强力覆盖平台白色气泡 */
    background-color: #f4edd6 !important;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.06) 100%),
        repeating-linear-gradient(rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent 2px) !important;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.25),
        inset 0 0 50px rgba(139, 101, 53, 0.25) !important;
    border: 5px double #c5a059 !important;
    border-radius: 8px !important;
    color: #3c2f1f !important;
    font-family: 'Georgia', 'Noto Serif SC', 'Source Han Serif SC', serif;
    font-size: 15px;
    line-height: 1.7;
    position: relative;
    box-sizing: border-box;
}

/* 2. 头部：场景信息条 */
hd {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #8b6508;
    padding: 10px 0;
    margin-bottom: 20px;
    border-top: 1px dashed rgba(197, 160, 89, 0.5);
    border-bottom: 1px dashed rgba(197, 160, 89, 0.5);
    letter-spacing: 2px;
}

/* 3. 正文区域 */
article {
    display: block;
    padding: 5px 10px;
    margin-bottom: 25px;
    color: #2b1f11;
    font-size: 1.05rem;
    line-height: 1.8;
    text-align: justify;
}

article p {
    margin-bottom: 15px;
    text-indent: 2em;
}

/* 4. 折叠面板（去除了明亮的白色，改用温暖的复古半透明暗金色） */
ai details {
    margin: 12px 0;
    background: rgba(230, 212, 179, 0.25) !important; /* 琥珀半透明 */
    border: 1px solid rgba(197, 160, 89, 0.45) !important;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

ai details[open] {
    background: rgba(235, 219, 189, 0.45) !important; /* 打开时稍微加深 */
    border-color: rgba(197, 160, 89, 0.8) !important;
}

/* 折叠面板标题 */
ai details summary {
    padding: 12px 15px;
    font-weight: 700;
    color: #5c4017 !important;
    cursor: pointer;
    background: linear-gradient(to right, rgba(212, 185, 133, 0.3), transparent);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
}

ai details[open] summary {
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
    background: linear-gradient(to right, rgba(212, 185, 133, 0.5), transparent);
}

/* 面板小图标 */
ai details summary::before {
    content: "📜";
    margin-right: 8px;
    transition: transform 0.3s ease;
}
ai details:first-of-type summary::before { content: "🔍"; } /* 思维链 */
ai details:nth-of-type(2) summary::before { content: "👑"; } /* 主角信息 */
ai details:nth-of-type(3) summary::before { content: "👥"; } /* NPC信息 */
ai details:nth-of-type(4) summary::before { content: "🔮"; } /* 记忆区 */
ai details[open]:last-of-type summary::before { content: "⚔️"; } /* 行动推荐 */

/* 5. 进度条容器与样式设计 */
.bar-container {
    display: inline-block;
    vertical-align: middle;
    width: 120px;       /* 进度条宽度 */
    height: 12px;       /* 进度条高度 */
    background-color: rgba(60, 47, 31, 0.2); /* 槽底色 */
    border: 1px solid #c5a059;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 8px;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

/* HP 华丽红宝石条 */
.hp-bar {
    background: linear-gradient(to right, #ff4d4d, #b30000);
    box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
}

/* MP 优雅蓝宝石条 */
.mp-bar {
    background: linear-gradient(to right, #33ccff, #0066cc);
    box-shadow: 0 0 5px rgba(51, 204, 255, 0.5);
}

/* EXP 翡翠经验条 */
.exp-bar {
    background: linear-gradient(to right, #85e35b, #3b9c13);
    box-shadow: 0 0 5px rgba(133, 227, 91, 0.5);
}

/* 疲劳度 琥珀色警告条 */
.fatigue-bar {
    background: linear-gradient(to right, #ffcc00, #ff6600);
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* 6. 表格美化 */
ai details table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.2);
}

ai details th {
    background-color: rgba(197, 160, 89, 0.25);
    color: #5c4017;
    font-weight: 700;
    padding: 8px;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

ai details td {
    padding: 8px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    color: #554433;
}

/* 7. 行动推荐卡片 */
ai details[open]:last-of-type p[t="选项"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}

ai details[open]:last-of-type d {
    display: block;
    background: linear-gradient(135deg, #fbf7eb 0%, #f4e8cb 100%) !important;
    border: 1px solid rgba(197, 160, 89, 0.6) !important;
    border-radius: 6px;
    padding: 12px 15px;
    color: #5c4017 !important;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

ai details[open]:last-of-type d:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #f4e8cb 0%, #e9d7ac 100%) !important;
    border-color: #8b6508 !important;
    color: #3b280c !important;
}

/* 8. 强力重置详情页内的文字颜色，防止被默认样式染白 */
ai details p, ai details span, ai details div, ai details td {
    color: #4a3b2c !important;
}
ai details strong {
    color: #8b4513 !important;
}