/* --- 基础界面优化 --- */

:root {

    --bg-color: #f8f9fa;

    --accent-color: #ff6b6b; 

}


/* --- 基础信息区特别强调 (不折叠) --- */

.base-info-box {

    background: #fff3f3;

    border-left: 5px solid var(--accent-color);

    padding: 15px;

    margin-bottom: 15px;

    border-radius: 4px;

    font-size: 0.95em;

    border: 1px solid #ffd6d6;

}


/* --- details 标签模块化 --- */

details {

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    margin: 8px 0;

    padding: 10px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}


summary {

    font-weight: bold;

    color: var(--accent-color);

    cursor: pointer;

    padding: 5px;

    list-style: none;

    outline: none;

}


/* --- 剧情推荐列表样式 (无视类名强力穿透) --- */


/* 1. 放弃猜测类名！直接锁定所有 details 标签内部的有序/无序列表项 (li) */

details li, 

div[class*="recommend"] li,

ol li,

ul li {

    margin: 6px 0 !important;

    padding: 8px 12px !important;

    background: #f1f3f5 !important;   /* 默认浅灰色背景 */

    color: #2b2b2b !important;       /* 强制默认文字为深灰色，绝不变白 */

    border-radius: 6px !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

}


/* 2. 强行把列表项里可能存在的任何子标签（如 span, p, a 等）的文字颜色锁死 */

details li *,

ol li *,

ul li * {

    color: #2b2b2b !important;       /* 平常状态下所有子元素也必须是深色 */

    background: transparent !important;

}


/* 3. 鼠标悬浮状态（Hover）：不管什么列表项，悬浮时背景一律变红，文字变白 */

details li:hover,

ol li:hover,

ul li:hover {

    background: #ff6b6b !important;  /* 强行使用你的 --accent-color 颜色（粉红） */

    color: #ffffff !important;       /* 悬浮时文字强制变纯白 */

}


/* 4. 确保鼠标悬浮时，里层的所有子标签文字也跟着一起变白，不留任何死角 */

details li:hover *,

ol li:hover * {

    color: #ffffff !important;

}