/* =========================================
   1. 核心变量定义 (Mango Core)
   ========================================= */
:root {
    --mango-primary: #FFB300;     /* 芒果黄主色 */
    --mango-light: #FFFDE7;       /* 极淡的奶黄色 */
    --text-main: #000000;         /* 纯黑：正文 */
    --text-muted: #475569;        /* 深灰蓝：说明文字 */
    --bg-white: #ffffff;
    --border-color: #e2e8f0;      /* 浅灰边框 */
    
    /* 视觉升级：定义大字号标准 */
    --lis-font-body: 16px;        /* 正文加大 */
    --lis-font-title: 18px;       /* 标题加大 */
    --lis-font-input: 16px;       /* 输入框文字大小 */
}

/* =========================================
   2. 全局重置与基础样式
   ========================================= */
.listening-mode {
    color: var(--text-main) !important;
    font-family: 'Inter', 'Roboto', Helvetica, Arial, sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* ⚡️ 强力去杂质：杀掉所有继承来的黄线、下划线、边框 */
.listening-mode strong,
.listening-mode b,
.listening-mode .lis-bold-text {
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
    color: #000 !important;
    font-weight: 900 !important; /* 纯黑暴力加粗 */
}

/* =========================================
   3. 容器架构 (Container System)
   ========================================= */
.listening-mode .lis-group-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 40px !important;
    padding: 0 !important;
}

/* 内层标准白卡片 (S1/S4 填空题专用) */
.listening-mode .lis-standard-content {
    background: var(--bg-white) !important;
    padding: 40px !important;
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    font-size: var(--lis-font-body);
    color: var(--text-main) !important;
    line-height: 2.4 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* 关键：防止表格撑爆卡片，允许内部滑动 */
    overflow-x: auto !important; 
    width: 100%;
}

/* =========================================
   4. 标题与排版 (Typography)
   ========================================= */
.listening-mode .lis-group-header {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    padding-left: 15px;
    border-left: 5px solid var(--mango-primary);
    line-height: 1.2;
}

/* --- 🚀 视觉优化：让指令文字变黑且倾斜 --- */
.listening-mode .lis-group-instruction {
    font-size: 15px;
    color: #000000 !important;      /* 1. 强制变为纯黑色 */
    font-style: italic !important;  /* 2. 强制变为倾斜体 */
    font-weight: 600;               /* 3. 稍微加重字重，增强辨识度 */
    margin-bottom: 20px;
    padding-left: 15px;
    line-height: 1.6;               /* 4. 增加一点行高，防止文字粘连 */
}
.listening-mode .lis-main-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin-bottom: 20px;
    margin-top: 0;
    line-height: 1.4;
}

/* =========================================
   5. 填空题组件 (Gapfill) - 重点装修区域
   ========================================= */

/* 填空容器微调 */
.listening-mode .lis-gap-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    vertical-align: middle;
    white-space: nowrap; /* 防止题号和输入框断开 */
}

/* ✨ 题号升级：官方机考极简黑体 ✨ */
.listening-mode .lis-gap-num {
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-size: 16px;
    font-weight: 900;
    margin-right: 6px;
    /* 彻底抹除原有的芒果黄方块样式 */
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    height: auto;
}

/* ✨ 输入框升级：机考标准固定硬朗框 ✨ */
.listening-mode .lis-gap-input {
    appearance: none;
    -webkit-appearance: none;
    
    /* 核心修改：写死固定宽度，绝对不许变形 */
    width: 150px !important; 
    min-width: 150px !important;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    
    /* 边框与背景：回归严肃的黑白灰 */
    border: 1px solid #64748b !important;
    border-radius: 2px !important; /* 极小圆角，显得极其硬朗专业 */
    background-color: #ffffff !important;
    
    /* 文字样式 */
    font-family: inherit;
    font-size: var(--lis-font-input) !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-align: left !important; /* 官方机考文字通常是靠左对齐的 */
    
    transition: none !important; /* 机考不需要花哨的渐变动画 */
}

/* ✨ 交互态：点击后边框加粗变黑，无花哨发光 ✨ */
.listening-mode .lis-gap-input:focus {
    border: 2px solid #000000 !important;
    background-color: #ffffff !important;
    box-shadow: none !important; /* 杀掉所有发光阴影 */
    outline: none;
}




/* =========================================
   ✨ 现代极简解析框 (Modern Feedback Box)
   ========================================= */

/* 1. 容器基础：去掉边框，改用柔和背景 + 左侧强调线 */
.listening-feedback-box {
    background-color: #ffffff !important;
    border: none !important;
    border-left: 4px solid #e5e7eb !important; /* 默认灰色线条 */
    border-radius: 4px !important;
    padding: 20px 24px !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* 增加一点点悬浮感 */
    position: relative;
    overflow: hidden;
}

/* 2. 错误状态：极淡的红背景 + 红线 */
.listening-feedback-box.is-wrong {
    background-color: #fff5f5 !important; /* 极淡绯红 */
    border-left-color: #ef4444 !important; /* 亮红强调线 */
}

/* 3. 正确状态：极淡的绿背景 + 绿线 */
.listening-feedback-box.is-correct {
    background-color: #f0fdf4 !important; /* 极淡薄荷绿 */
    border-left-color: #22c55e !important; /* 亮绿强调线 */
}

/* 4. 内部排版优化 */
.lis-feedback-row {
    display: flex;
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 14px;
}

.lis-feedback-label {
    color: #64748b; /* 标签用深灰色，不抢眼 */
    font-weight: 600;
    width: 120px; /* 固定宽度，对齐更好看 */
    flex-shrink: 0;
}

.lis-feedback-content {
    color: #1e293b;
    font-weight: 500;
    flex: 1;
}

/* 5. 题号小标签 (右上角胶囊) */
.lis-feedback-q-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255,255,255,0.8);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 列表与表格优化 */
.listening-mode .lis-item-list li {
    margin-bottom: 12px;
    color: #000;
    list-style-position: inside;
}

/* ✨ 机考级表格外框：固定比例，绝不溢出 ✨ */
.listening-mode .lis-fixed-table {
    width: 100% !important;        /* 强制占满可用宽度，绝不往右边乱跑 */
    table-layout: fixed !important; /* 核心防御：强制表格列宽固定，防止被长句子撑乱 */
    border-collapse: collapse;
    margin: 25px 0;
}

/* ✨ 单元格排版：允许换行，靠左靠上，利于阅读 ✨ */
.listening-mode .lis-fixed-table td, 
.listening-mode .lis-fixed-table th {
    border: 1px solid #cbd5e1;      /* 机考标准的冷峻灰边框 */
    padding: 16px 14px;             /* 加大内边距，让文字有呼吸感 */
    text-align: left;               /* 官方还原：靠左对齐，方便快速扫读 */
    vertical-align: top;            /* 官方还原：靠上对齐 */
    background: #fff;
    
    /* 🚀 终极杀招：彻底解开紧箍咒，允许自然换行 */
    white-space: normal !important; 
    word-wrap: break-word;          /* 遇到极端超长单词自动折断，保住排版 */
    line-height: 1.6;
}

/* ✨ 表头：克制的高级灰 ✨ */
.listening-mode .lis-fixed-table th {
    background-color: #f1f5f9;      /* 极淡的冷灰色，区分表头和正文 */
    font-weight: 700;
    color: #1e293b;                 /* 深深灰黑，避免死黑刺眼 */
}
/* =========================================
   6. 单选题组件 (MCQ) - 极致紧凑苗条版 (修复版)
   ========================================= */

/* 1. 题干容器：去掉外层大白框，改为透明紧凑布局 */
.listening-mode .lis-question-compact {
    background: transparent !important; /* 去掉背景色 */
    border: none !important;            /* 去掉边框 */
    padding: 0 !important;              /* 去掉内边距 */
    margin-bottom: 25px;                /* 题与题之间的间距 */
}

/* 2. 题干标题：紧凑排列 */
.listening-mode .lis-q-header-mini {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    gap: 8px;
    margin-bottom: 8px;      /* 标题和选项离得很近 */
}

.listening-mode .lis-q-num {
    color: var(--mango-primary);
    font-weight: 900;
    font-size: 15px;
    min-width: 24px;         /* 给题号留足空间 */
    line-height: 1.4;
}

.listening-mode .lis-q-title-mini {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b;
    line-height: 1.4;
    margin-top: 0;
}

/* 3. 选项列表容器 */
.listening-mode .lis-mcq-list-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;               /* 选项之间非常紧密 (仅 6px) */
    padding-left: 32px;     /* 缩进，对齐题干文字 */
}

/* ⚠️ 核心修复：隐藏原生单选框 (那个丑陋的小圆圈) */
.listening-mode .lis-mcq-option input {
    display: none !important; 
}

/* 4. 选项盒子：核心“苗条”手术 */
.listening-mode .lis-mcq-box {
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* --- 核心修改：变瘦 --- */
    padding: 6px 10px;       /* 上下极小，左右适中 */
    min-height: 32px;        /* 限制高度，确保苗条 */
    /* ------------------- */
    
    border: 1px solid #cbd5e1;
    border-radius: 4px;      /* 圆角改小一点，更硬朗 */
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;             /* 占满宽度 */
    max-width: 100%;         /* 防止溢出 */
}



/* =========================================
   7. 配对题/地图题组件 (Matching & Map) - 芒果精修版
   ========================================= */

/* 外层容器：让题干和气泡更紧凑 */
.listening-mode .lis-question-compact {
    /* 复用单选题的卡片样式，保持统一 */
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px 25px; /* 稍微加大内边距 */
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.listening-mode .lis-question-compact:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* 悬停时微微浮起 */
}

/* 题干部分 */
.listening-mode .lis-q-header-mini {
    display: flex;
    align-items: baseline; /* 基线对齐，防止题号忽高忽低 */
    gap: 12px;
    margin-bottom: 15px; /* 增加题干与气泡的距离 */
}

/* 气泡行容器：不再缩进，全宽展示 */
.listening-mode .lis-matching-row {
    margin-top: 0;
    padding-left: 0; /* 核心修改：取消缩进，让气泡与题目左对齐 */
    width: 100%;
}

.listening-mode .lis-matching-bubbles-container {
    display: flex;
    gap: 12px;       /* 增加气泡间距 */
    flex-wrap: wrap; /* 允许换行 */
    align-items: center;
}

/* ✨ 气泡本体升级：大圆润、点击感强 ✨ */
.listening-mode .lis-matching-bubble {
    /* 尺寸与形状 */
    width: 40px;      /* 加大尺寸 */
    height: 40px;
    border-radius: 50%;
    
    /* 边框与背景 */
    background: #f8fafc;
    border: 2px solid #e2e8f0; /* 默认浅灰边框 */
    
    /* 内部布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 文字样式 */
    font-weight: 700;
    font-size: 16px;
    color: #64748b;    /* 默认深灰字 */
    
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none; /* 防止双击选中文字 */
}

/* 悬停态：微微变深 */
.listening-mode .lis-matching-bubble:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px); /* 微妙的位移 */
}

/* ✨ 选中态：醒目的芒果黄 + 黑字 ✨ */
.listening-mode .lis-matching-bubble:has(input:checked) {
    background: var(--mango-primary);
    border-color: var(--mango-primary);
    color: #000000;
    box-shadow: 0 2px 5px rgba(255, 179, 0, 0.3); /* 增加选中投影 */
    transform: scale(1.05); /* 选中时微微放大 */
}

/* 隐藏原生 Radio */
.listening-mode .lis-matching-bubble input {
    display: none;
}

/* 1. 题号大标题 (QUESTIONS 1-10) - 雅思橙色风 */
.listening-mode .lis-group-header {
    font-size: 16px !important;     /* 字号适中 */
    font-weight: 900 !important;    /* 极粗 */
    color: #000000 !important;      /* 纯黑文字 */
    text-transform: uppercase;      /* 强制大写 */
    margin-bottom: 12px !important; /* 与下方指令的间距 */
    padding-left: 12px;             /* 左侧留白 */
    border-left: 5px solid #FFB300; /* 左侧那道醒目的芒果黄竖线 */
    line-height: 1.2;
    display: block !important;      /* 确保它独占一行 */
}

/* --- 🚀 视觉优化：让指令文字变黑且倾斜 --- */
.listening-mode .lis-group-instruction {
    font-size: 15px;
    color: #000000 !important;      /* 1. 强制变为纯黑色 */
    font-style: italic !important;  /* 2. 强制变为倾斜体 */
    font-weight: 600;               /* 3. 稍微加重字重，增强辨识度 */
    margin-bottom: 20px;
    padding-left: 15px;
    line-height: 1.6;               /* 4. 增加一点行高，防止文字粘连 */
}


/* --- 雅思配对题选项框 (The Box) --- */
.listening-mode .lis-matching-box {
    background-color: #f8fafc;       /* 浅灰背景 */
    border: 1px solid #cbd5e1;       /* 灰色边框 */
    border-radius: 8px;              /* 圆角 */
    padding: 20px;                   /* 内边距 */
    margin-bottom: 30px;             /* 离下面的题目远一点 */
    
    /* 核心：双列布局 (像雅思真题一样) */
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 分两列 */
    gap: 15px;                       /* 间距 */
}

/* 框里的每一个选项 */
.listening-mode .lis-box-item {
    font-size: 15px;
    color: #334155;
    display: flex;
    align-items: baseline;
}

/* 选项字母 (A, B, C...) 加粗 */
.listening-mode .lis-box-item span {
    font-weight: 800;
    color: #000;
    margin-right: 10px;
    min-width: 15px;
}

/* =========================================
   🚀 判分反馈：输入框红绿灯 (高优先级修复版)
   ========================================= */

/* 正确态：加上 #exam-view 提升优先级，强行突破黑白封锁 */
#exam-view.listening-mode input.lis-gap-input.correct,
#exam-view.listening-mode .lis-drop-zone.correct {
    background-color: #f0fdf4 !important; 
    border: 2px solid #22c55e !important; 
    color: #15803d !important;
}

/* 错误态：强行变红 */
#exam-view.listening-mode input.lis-gap-input.wrong,
#exam-view.listening-mode .lis-drop-zone.wrong {
    background-color: #fef2f2 !important; 
    border: 2px solid #ef4444 !important; 
    color: #b91c1c !important;
}

/* 确保解析容器在没有内容或被隐藏时，完全不显示，不留白边 */
.listening-mode .inline-feedback-box {
    display: none; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* =========================================
   🚩 精致小红旗美化体系
   ========================================= */

/* 1. 基础态：完全透明、无边框、小巧 */
.listening-mode .flag-btn-mini {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 6px;
    width: 16px; 
    height: 16px;
    cursor: pointer;
    color: #94a3b8 !important; /* 默认：淡雅的高级灰 */
    transition: all 0.2s ease;
    vertical-align: middle;
    box-shadow: none !important;
}

/* 2. 悬停态：微微变暗 */
.listening-mode .flag-btn-mini:hover {
    color: #64748b !important;
    transform: scale(1.1);
}

/* 3. 激活态：变亮红，并带一点点呼吸感 */
.listening-mode .flag-btn-mini.active {
    color: #ef4444 !important; /* 苹果红 */
    filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4));
}

/* 4. 强制控制内部 SVG */
.listening-mode .flag-btn-mini svg {
    width: 100%;
    height: 100%;
}

.listening-mode .flag-btn-mini.active svg path {
    fill: #ef4444 !important; /* 激活时旗面实心红 */
}

/* 地图题图片容器 */
.listening-mode .lis-map-image-box { width: 100%; margin: 15px 0; text-align: center; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; }
.listening-mode .lis-map-image-box img { max-width: 100%; height: auto; border-radius: 4px; }


/* ============================================================ */
/* 🚀 [滚动条优化] 解决难选中、指针错误、无滚轮难操作问题 */
/* ============================================================ */

/* 1. 稍微加宽滚动条，增加“点击热区” */
.listening-mode #q-panel::-webkit-scrollbar {
    width: 10px !important;  /* 从 6px 增加到 10px，更容易被鼠标捕捉 */
}

/* 2. 滚动条轨道：保持通透 */
.listening-mode #q-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02); /* 极淡的底色，提示这里有滚动轨道 */
}

/* 3. 滚动滑块（关键：解决指针和样式问题） */
.listening-mode #q-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* 使用略深的高级灰，增加可见度 */
    border-radius: 10px;
    /* 核心补丁：增加透明边框，让滑块视觉上纤细，但实际点击区域很大 */
    border: 3px solid transparent; 
    background-clip: content-box; 
    cursor: pointer !important; /* 强制显示小手指针（部分浏览器生效） */
}

/* 4. 悬停效果：变色提示 */
.listening-mode #q-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* 鼠标放上去变深色，给用户明确的反馈 */
}

/* =========================================
   🏆 简约版听力主标题 (Modern & Clean)
   ========================================= */

.listening-mode .lis-part-main-header {
    margin-bottom: 30px; 
    padding: 0;
}

/* 1. 动态 Part 标签：去掉大黑框，改为雅思官方风格的小写灰色字体 */
.listening-mode .lis-part-sub-tag {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;         /* 灰蓝色，显得专业且不抢眼 */
    text-transform: uppercase;
    letter-spacing: 1.5px;  /* 增加字间距，提升设计感 */
    margin-bottom: 6px;
}

/* 2. 主标题：缩小字号，保持纯黑，去掉过度装饰 */
.listening-mode .lis-part-title-text {
    font-size: 22px !important; 
    font-weight: 800 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3;
}

/* 3. 装饰线：将 3px 粗黑线改为 1.5px 浅灰色细线，增加通透感 */
.listening-mode .lis-part-thin-line {
    height: 1.5px;
    background: #e2e8f0;    /* 极其柔和的浅灰色 */
    width: 100%;
}


/* ✨ 输入框升级：机考标准框 (支持多列表格自适应缩小) ✨ */
.listening-mode .lis-gap-input {
    appearance: none;
    -webkit-appearance: none;
    
    /* 核心修改：增加弹性！默认 140px，但绝不允许超过父容器可用空间 */
    width: 140px !important; 
    max-width: calc(100% - 35px) !important; /* 减去题号的宽度，绝不溢出单元格 */
    min-width: 60px !important; /* 允许在4列小表格里缩短到 60px */
    
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    
    border: 1px solid #64748b !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
    
    font-family: inherit;
    font-size: var(--lis-font-input) !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-align: left !important;
    transition: none !important;
}

/* 🚀 终极降噪：在填空题(wrapper)里，彻底隐藏碍眼的小红旗，释放表格空间 */
.listening-mode .lis-gap-wrapper .flag-btn-mini {
    display: none !important;
}

/* =========================================
   ✨ 机考级表格排版：保底宽度 + 横向滚动 ✨
   ========================================= */

/* 1. 表格外框：无论 AI 起什么名字，全部拦截生效 */
.listening-mode .lis-fixed-table,
.listening-mode .lis-modern-table,
.listening-mode table {
    width: 100% !important; 
    min-width: 800px !important; /* 🚀 核心救命代码：无论屏幕多小，表格绝对不小于800像素，留足呼吸空间！ */
    table-layout: auto !important; /* 让浏览器根据文字多少，自然分配每一列的宽度 */
    border-collapse: collapse;
    margin: 25px 0;
}

/* 2. 单元格排版：允许换行，靠左靠上 */
.listening-mode .lis-fixed-table td, 
.listening-mode .lis-fixed-table th,
.listening-mode .lis-modern-table td, 
.listening-mode .lis-modern-table th,
.listening-mode table td,
.listening-mode table th {
    border: 1px solid #cbd5e1;      /* 机考冷峻灰边框 */
    padding: 16px 14px;             /* 加大内边距 */
    text-align: left;               /* 靠左对齐 */
    vertical-align: top;            /* 靠上对齐 */
    background: #fff;
    white-space: normal !important; /* 彻底解开紧箍咒，允许文字自然换行 */
    word-wrap: break-word;          /* 遇到超长单词自动折行 */
    line-height: 1.6;
}

/* 3. 表头：克制的高级灰 */
.listening-mode .lis-fixed-table th,
.listening-mode .lis-modern-table th,
.listening-mode table th {
    background-color: #f1f5f9;      /* 极淡的冷灰色 */
    font-weight: 700;
    color: #1e293b;
}

/* =========================================
   🚀 真正安全的听力界面拓宽补丁
   ========================================= */

/* 1. 让滚动条贴到屏幕最右边，不再局限在中间 */
#exam-view.listening-mode #q-panel {
    max-width: 100% !important; 
    width: 100% !important;
}

/* 2. 把题目区域从 900px 放宽到 1100px，完美容纳宽表格 */
#exam-view.listening-mode #q-container {
    max-width: 1100px !important; /* 黄金阅读宽度，比之前宽敞很多 */
    margin: 0 auto !important;    /* 保证题目稳稳居中 */
    padding: 30px 40px 100px 40px !important; 
}

/* 3. 确保内部的白底卡片能跟着撑开 */
#exam-view.listening-mode .lis-standard-content,
#exam-view.listening-mode .ielts-group-card {
    max-width: 100% !important;
}


/* =========================================
   🚀 雅思机考官方化：配对题/地图题 (Matching & Map) 专属硬朗风格
   ========================================= */

/* 1. 扒掉每道题外面的大白框，回归试卷的清爽感 */
#exam-view.listening-mode .lis-question-compact {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
}
#exam-view.listening-mode .lis-question-compact:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 2. 题干与选项之间的间距收紧 */
#exam-view.listening-mode .lis-q-header-mini {
    margin-bottom: 10px !important;
}
#exam-view.listening-mode .lis-q-num {
    color: #000000 !important; /* 题号纯黑 */
}

/* 3. 彻底消灭圆气泡！改为官方机考的方形字母块 (Square Blocks) */
#exam-view.listening-mode .lis-matching-bubbles-container,
#exam-view.listening-mode .matching-bubble-container {
    gap: 8px !important; 
}
#exam-view.listening-mode .matching-bubble,
#exam-view.listening-mode .lis-matching-bubble {
    width: 36px !important; 
    height: 36px !important;
    border-radius: 2px !important; /* 极小的圆角，硬朗专业 */
    border: 1px solid #64748b !important; /* 冷峻灰边框 */
    background: #ffffff !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: none !important; /* 取消一切花哨动画 */
    box-shadow: none !important;
}

/* 4. 交互：悬停边框变黑，选中变成极简的高对比度 (黑底白字) */
#exam-view.listening-mode .matching-bubble:hover,
#exam-view.listening-mode .lis-matching-bubble:hover {
    border-color: #000000 !important;
    background: #f1f5f9 !important;
}
#exam-view.listening-mode .matching-bubble:has(input:checked),
#exam-view.listening-mode .lis-matching-bubble:has(input:checked) {
    background-color: #000000 !important; /* 纯黑底色 */
    border-color: #000000 !important;
    color: #ffffff !important; /* 纯白文字 */
    transform: none !important; /* 不许放大 */
    box-shadow: none !important; /* 不许发光 */
}

/* 5. 隐藏这些题型里多余的小红旗，保持极简视觉 */
#exam-view.listening-mode .lis-question-compact .flag-btn-mini {
    display: none !important;
}

/* =========================================
   🚀 终极镇压版：单选/多选题 (MCQ) 严肃极简风格
   ========================================= */

/* 1. 选项整行：彻底剥离外层边框、底色和蓝色悬浮影 */
#exam-view.listening-mode .lis-mcq-box {
    border: 1px solid transparent !important; 
    background: transparent !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
    min-height: auto !important;
    display: flex !important;
    align-items: flex-start !important; /* 让文字长的时候，圆圈保持在最上面 */
}

/* 2. 悬停效果：极淡的浅灰色背景提示，干掉蓝色！ */
#exam-view.listening-mode .lis-mcq-box:hover {
    background-color: #f1f5f9 !important;
    border-radius: 4px !important;
    border-color: transparent !important; /* 强制覆盖任何悬浮变色的边框 */
    box-shadow: none !important; /* 强制杀掉任何发光效果 */
}

/* 3. 字母图标基础样式：暴力居中法！ */
#exam-view.listening-mode .lis-mcq-char {
    width: 26px !important; /* 稍微大一点，包容性更好 */
    height: 26px !important;
    border: 2px solid #94a3b8 !important; 
    background: #ffffff !important; 
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    
    /* 暴力居中三板斧，谁也干扰不了！ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; /* 确保内部没有额外的行高撑着 */
    
    flex-shrink: 0 !important; /* 绝对不允许被长文字挤扁 */
    margin-right: 12px !important; /* 调整与文字的间距 */
    transition: none !important;
}

/* 4. 🌟 官方标准：单选变圆，多选变方！ */
#exam-view.listening-mode input[type="radio"] + .lis-mcq-box .lis-mcq-char {
    border-radius: 50% !important; /* 单选题：正圆形 */
}
#exam-view.listening-mode input[type="checkbox"] + .lis-mcq-box .lis-mcq-char {
    border-radius: 4px !important; /* 多选题：微圆角方形 */
}

/* 5. 选中状态：纯黑填满，白字，绝不变黄或变蓝！ */
#exam-view.listening-mode .lis-mcq-option input:checked + .lis-mcq-box {
    background-color: transparent !important; 
    border-color: transparent !important;
}
#exam-view.listening-mode .lis-mcq-option input:checked + .lis-mcq-box .lis-mcq-char {
    background-color: #000000 !important; /* 黑底 */
    border-color: #000000 !important;     /* 黑边 */
    color: #ffffff !important;            /* 白字 */
}

/* 6. 选项文字：端正清晰 */
#exam-view.listening-mode .lis-mcq-text {
    font-size: 15px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.5 !important; /* 行高调到1.5，阅读最舒服 */
    padding-top: 2px !important; /* 稍微往下压一点，和左边的圈圈视觉对齐 */
}

/* 7. 彻底隐藏丑陋的原生单选/复选小圆点 */
#exam-view.listening-mode .lis-mcq-option input[type="radio"],
#exam-view.listening-mode .lis-mcq-option input[type="checkbox"] {
    display: none !important;
}

/* 1. 统一图片容器的显示逻辑 */
.lis-map-image-box {
    width: 100%;
    display: flex;
    justify-content: center; /* 居中 */
    padding: 10px 0;
}

/* 2. 针对地图图片的自适应调整 */
.lis-map-image-box img, 
.lis-map-image-box svg {
    /* 核心：设定一个适合机考阅读的宽度区间 */
    width: 100% !important;
    
    /* 最小宽度：防止小图太小看不清字母 (根据需要调整) */
    min-width: 320px !important;
    
    /* 最大宽度：防止在大屏幕上图片变得巨大无比 */
    max-width: 700px !important; 
    
    /* 关键：确保高度随比例缩放，不会变形 */
    height: auto !important;
    
    /* 适配小屏幕：如果屏幕高度很小，限制图片最高不要超过屏幕的 70% */
    max-height: 70vh !important;
    object-fit: contain; /* 保证图片内容完整显示 */

    /* 增加考试系统的精致感 */
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* =========================================
   🚀 终极解决：去掉地图多余的双重边框
   ========================================= */

/* 1. 彻底移除地图外层容器的背景和边框 */
.listening-mode .lis-map-image-box {
    border: none !important;      /* 杀掉外圈灰色边框 */
    background: transparent !important; /* 去掉背景色 */
    padding: 0 !important;       /* 去掉内边距，防止留白 */
    box-shadow: none !important;  /* 杀掉阴影 */
    margin: 20px 0 !important;    /* 仅保留上下间距 */
}

/* 2. 优化图片本身的显示 */
.listening-mode .lis-map-image-box img,
.listening-mode .lis-map-image-box svg {
    border: none !important;      /* 确保图片本身也没有边框 */
    display: block;
    margin: 0 auto;               /* 居中 */
    
    /* 针对机考体验：设定一个最大高度，防止图片过大导致无限下拉 */
    max-height: 65vh !important;  
    width: auto !important;       /* 宽度自适应高度 */
    max-width: 100% !important;   /* 但最宽不能超过容器 */
    
    /* 增加一个非常淡的阴影，让地图稍微立体一点点，如果不想要可以删掉这一行 */
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.05));
}


/* =========================================
   🚀 雅思机考专用：图片尺寸智能均衡补丁
   ========================================= */

.listening-mode .lis-map-image-box {
    width: 100%;
    margin: 10px 0 !important;
    text-align: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.listening-mode .lis-map-image-box img,
.listening-mode .lis-map-image-box svg {
    /* 1. 宽度控制：平时占满容器，但最宽不超过 650px (黄金阅读宽度) */
    width: 100% !important;
    max-width: 650px !important; 
    
    /* 2. 高度防爆（核心）：无论图片多大，高度最高不超过屏幕的 55% */
    /* 这样能确保图片下方至少留出 45% 的空间显示题目，不需要疯狂滚动 */
    max-height: 55vh !important; 
    
    /* 3. 比例缩放：确保图片不会被压扁或拉长 */
    height: auto !important;
    object-fit: contain !important; 
    
    display: block;
    margin: 0 auto;
    
    /* 保持机考质感 */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}

/* 针对手机等超小屏幕的额外优化 */
@media (max-height: 600px) {
    .listening-mode .lis-map-image-box img,
    .listening-mode .lis-map-image-box svg {
        max-height: 45vh !important; /* 屏幕太矮时，图片进一步缩小 */
    }
}

/* =========================================
   🚀 雅思机考优化：解决图题粘连 & 遮挡问题
   ========================================= */

.listening-mode .lis-map-image-box {
    width: 100% !important;
    /* 1. 核心修复：增加底部外边距，确保图片和题目之间有足够的空隙 */
    margin-top: 10px !important;
    margin-bottom: 45px !important; /* 加大这个值，让题目“沉”下去 */
    
    text-align: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    
    /* 2. 防遮挡补丁：确保图片不会溢出到题目层 */
    overflow: visible !important; 
    position: relative !important;
    display: block !important;
}

.listening-mode .lis-map-image-box img,
.listening-mode .lis-map-image-box svg {
    /* 3. 高度限制：保持在屏幕的一半左右，防止过长 */
    max-height: 52vh !important; 
    width: auto !important;
    max-width: 95% !important; /* 稍微收缩，防止贴边 */
    
    /* 4. 居中与比例 */
    display: inline-block; 
    vertical-align: middle;
    height: auto !important;
    object-fit: contain !important;

    /* 5. 视觉优化：给地图加一个极淡的背景块，防止白图在白背景下看不清边际 */
    background-color: #ffffff;
    border-radius: 4px;
    /* 微弱阴影增加层级感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
}

/* 6. 自动修正：如果图片后面紧跟的是题目列表，强制清除浮动 */
.listening-mode .lis-map-image-box + .lis-question-compact,
.listening-mode .lis-map-image-box + div {
    clear: both !important;
    padding-top: 10px !important;
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第一步：表格与填空题去现代化
   ============================================================ */

/* 1. 扒掉题目外层卡片的“现代外衣”（去圆角、去阴影、去灰底） */
#exam-view.listening-mode .ielts-group-card,
#exam-view.listening-mode .lis-standard-content {
    background-color: #ffffff !important; /* 纯白背景 */
    border: none !important; /* 去掉四周的大边框 */
    box-shadow: none !important; /* 干掉所有阴影 */
    border-radius: 0 !important; /* 绝对直角 */
    padding: 0 10px !important; /* 收紧留白 */
    margin-bottom: 25px !important;
}

/* 2. 还原官方极简表格 (Table) - 纯黑实线，没有灰底 */
#exam-view.listening-mode .ielts-group-content table,
#exam-view.listening-mode .lis-fixed-table {
    border-collapse: collapse !important;
    border: 1px solid #000000 !important; /* 纯黑外边框 */
    border-radius: 0 !important;
}
#exam-view.listening-mode .ielts-group-content th,
#exam-view.listening-mode .lis-fixed-table th {
    background-color: #ffffff !important; /* 表头去掉灰底，改回纯白 */
    border: 1px solid #000000 !important; /* 纯黑网格线 */
    color: #000000 !important; /* 纯黑文字 */
    font-weight: bold !important;
    padding: 8px 12px !important; /* 收紧内边距，让表格更紧凑 */
}
#exam-view.listening-mode .ielts-group-content td,
#exam-view.listening-mode .lis-fixed-table td {
    border: 1px solid #000000 !important; /* 纯黑网格线 */
    padding: 6px 10px !important; /* 压扁单元格高度 */
    color: #000000 !important;
}

/* 3. 填空题输入框 (Input) “内联化”与“硬朗化” */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input {
    background-color: #ffffff !important;
    border: 1px solid #333333 !important; /* 纯深灰/黑边框 */
    border-radius: 0 !important; /* 绝对直角，干掉圆角 */
    box-shadow: none !important; /* 干掉所有发光和内阴影 */
    height: 26px !important; /* 压扁输入框，和文字高度更贴合！ */
    padding: 0 5px !important;
    font-size: 15px !important;
    color: #000000 !important;
    font-family: Arial, sans-serif !important; /* 机考标准字体 */
}

/* 输入框聚焦时，边框稍微加粗，但绝不发蓝色/橙色光 */
#exam-view.listening-mode input.ielts-gap-input:focus,
#exam-view.listening-mode input.lis-gap-input:focus {
    border: 2px solid #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 4. 题号贴合输入框 (像真实机考一样紧凑) */
#exam-view.listening-mode .ielts-gap-wrapper,
#exam-view.listening-mode .lis-gap-wrapper {
    margin: 0 !important; /* 去掉左右多余边距 */
}
#exam-view.listening-mode .ielts-gap-num,
#exam-view.listening-mode .lis-gap-num {
    background: transparent !important; /* 去掉题号的灰底胶囊 */
    color: #000000 !important; /* 纯黑题号 */
    font-weight: bold !important;
    font-size: 15px !important;
    margin-right: 4px !important; /* 让题号紧贴着输入框 */
    padding: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第二步：空间收缩手术 (极度紧凑化)
   ============================================================ */

/* 1. 暴力压缩所有题干、段落、列表的行高和外边距 */
#exam-view.listening-mode,
#exam-view.listening-mode .ielts-group-card,
#exam-view.listening-mode .lis-standard-content,
#exam-view.listening-mode .ielts-group-content {
    line-height: 1.5 !important; /* 把夸张的2.4行高压缩回正常的1.5 */
    padding: 15px 20px !important; /* 把周围40px的巨大留白压缩 */
    margin-bottom: 15px !important; /* 卡片之间的距离拉近 */
}

/* 2. 压缩填空题里的每一行字 (解决图4、图5文字散开的问题) */
#exam-view.listening-mode .ielts-group-content p,
#exam-view.listening-mode .ielts-group-content ul,
#exam-view.listening-mode .ielts-group-content li {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}

/* 3. 表格极限瘦身 (解决图1、图3表格巨大无比的问题) */
#exam-view.listening-mode table,
#exam-view.listening-mode .lis-fixed-table {
    margin: 10px 0 !important; /* 表格上下的空隙减小 */
}
#exam-view.listening-mode th,
#exam-view.listening-mode td,
#exam-view.listening-mode .lis-fixed-table th,
#exam-view.listening-mode .lis-fixed-table td {
    padding: 8px 12px !important; /* 关键：把表格单元格里的空白彻底抽干！原来是16px */
    line-height: 1.4 !important; /* 表格内的文字排得更紧密 */
    vertical-align: middle !important; /* 让文字和输入框在表格里垂直居中 */
}

/* 4. 让填空框和周围的文字在同一条水平线上完美对齐 */
#exam-view.listening-mode .ielts-gap-wrapper,
#exam-view.listening-mode .lis-gap-wrapper {
    margin: 0 4px !important;
    vertical-align: baseline !important; /* 基线对齐，防止输入框上下乱跳 */
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - Step 2.5 修复底部悬浮与表格拉伸
   ============================================================ */

/* 1. 修复误伤：把最外层大壳子的挤压感去掉，让底部工具栏乖乖沉到底部 */
#exam-view.listening-mode {
    padding: 0 !important; 
    margin: 0 !important; 
}
#exam-view.listening-mode .split-pane {
    flex: 1 !important; 
    height: auto !important; 
    margin-bottom: 0 !important;
}

/* 2. 修复表格被无限拉长的问题：取消 100% 宽度，改为靠左对齐 */
#exam-view.listening-mode .ielts-group-content table,
#exam-view.listening-mode .lis-fixed-table {
    width: auto !important; /* 取消强制铺满 */
    min-width: 65% !important; /* 最小占屏幕 65%，不至于太窄 */
    max-width: 95% !important; /* 最大不超过 95% */
    margin: 15px 0 25px 0 !important; /* 强制靠左对齐！ */
    table-layout: auto !important;
}

/* 3. 锁定填空题输入框的大小，让它像雅思真题一样精致 */
#exam-view.listening-mode .ielts-group-content table input.ielts-gap-input,
#exam-view.listening-mode .ielts-group-content table input.lis-gap-input {
    width: 140px !important; /* 雅思标准框通常是固定长度的 */
    max-width: 100% !important;
}

/* 4. 让列表里的横线更淡一点，表格更像官方的灰色细线 */
#exam-view.listening-mode .ielts-group-content th,
#exam-view.listening-mode .lis-fixed-table th,
#exam-view.listening-mode .ielts-group-content td,
#exam-view.listening-mode .lis-fixed-table td {
    border: 1px solid #888888 !important; /* 把死黑变成机考常用的深灰色 */
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第三步：骨架正骨 (修复工具栏与宽度)
   ============================================================ */

/* 1. 彻底修复底部工具栏悬浮问题 (利用 Flexbox 把底部死死踩在最下面) */
#exam-view.listening-mode {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important; /* 强制总高度等于浏览器窗口高度 */
    overflow: hidden !important;
}
#exam-view.listening-mode .split-pane {
    flex: 1 !important; 
    height: 0 !important; /* 核心修复：让Flex接管高度，严禁内容把容器撑破 */
    min-height: 0 !important;
    overflow: hidden !important;
}
#exam-view.listening-mode #q-panel {
    height: 100% !important;
    overflow-y: auto !important; /* 只有这个区域可以滚动 */
    background-color: #ffffff !important; /* 雅思官方背景是纯白 */
}

/* 2. 收缩核心答题区宽度 (解决图1/3/4内容太散的问题) */
#exam-view.listening-mode #q-container {
    max-width: 800px !important; /* 雅思机考黄金阅读宽度 */
    margin: 0 auto !important;   /* 绝对居中 */
    padding: 40px 20px 80px 20px !important; 
}

/* 3. 修复表格乱变形的问题 (解决图1、图3表格列宽失调) */
#exam-view.listening-mode .ielts-group-content table,
#exam-view.listening-mode .lis-fixed-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important; /* 强制表格按比例分配，严禁乱动 */
    margin: 20px 0 !important;
}
/* 强行让表格第一列 (提示词) 占 35% 宽度，第二列 (填空区) 占 65% */
#exam-view.listening-mode .ielts-group-content tr td:first-child,
#exam-view.listening-mode .lis-fixed-table tr td:first-child {
    width: 35% !important;
    font-weight: bold !important; /* 第一列加粗，符合机考规范 */
    background-color: #fbfbfb !important; /* 极淡的灰底，增加辨识度 */
}
#exam-view.listening-mode .ielts-group-content td,
#exam-view.listening-mode .lis-fixed-table td {
    vertical-align: middle !important; /* 文字和输入框垂直居中 */
}

/* 4. 彻底净化匹配题的选项框 (解决图2 The Box 的花哨问题) */
#exam-view.listening-mode .options-box-container,
#exam-view.listening-mode .lis-matching-box {
    background-color: #ffffff !important; /* 纯白底色 */
    border: 1px solid #000000 !important; /* 纯黑实线边框 */
    border-radius: 0 !important; /* 绝对直角 */
    padding: 15px 20px !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}
#exam-view.listening-mode .option-item,
#exam-view.listening-mode .lis-box-item {
    background-color: transparent !important;
    border: none !important;
    color: #000000 !important; /* 纯黑文字 */
}
#exam-view.listening-mode .option-item strong,
#exam-view.listening-mode .lis-box-item span {
    color: #000000 !important; /* A,B,C 字母变黑 */
    font-weight: bold !important;
}

/* ============================================================
   🚨 雅思机考 100% 还原 - 第四步 (终极修正版)：消灭长表格与滚动条
   ============================================================ */

/* 1. 剥夺所有表格的固定宽度，恢复自适应！不管它叫什么名字，全部生效 */
#exam-view.listening-mode table,
#exam-view.listening-mode .lis-fixed-table,
#exam-view.listening-mode .lis-standard-content table {
    min-width: 0 !important; /* 🌟 致命一击：干掉旧代码里隐藏的 800px */
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important; /* 关键：让浏览器根据字数自己算列宽 */
    margin: 15px 0 !important;
}

/* 2. 解除第一列被强行霸占 35% 的诅咒 (让四列大表格不再拥挤) */
#exam-view.listening-mode table tr td:first-child,
#exam-view.listening-mode .lis-fixed-table tr td:first-child {
    width: auto !important;
    background-color: transparent !important;
    font-weight: normal !important;
}

/* 3. 填空框彻底变成弹性小巧模式，在格子里乖乖待着 */
#exam-view.listening-mode table input,
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input {
    width: 100% !important; 
    max-width: 150px !important; /* 最大不超过 150px */
    min-width: 50px !important;  /* 最小 50px，保证能打字 */
    height: 28px !important; 
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

/* 4. 强制关掉外层白色卡片的横向滚动条 */
#exam-view.listening-mode .lis-standard-content {
    overflow-x: hidden !important; 
    padding: 20px 30px !important; /* 顺便把内边距再收紧一点 */
}

/* 5. 再次压紧段落距离 */
#exam-view.listening-mode .lis-standard-content p,
#exam-view.listening-mode .lis-standard-content ul {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第五步：拯救被挤压的输入框
   ============================================================ */

/* 1. 专门给带黑圆点的列表项（li）“松绑”，拉开上下间距 */
#exam-view.listening-mode .ielts-group-content li,
#exam-view.listening-mode .lis-standard-content li,
#exam-view.listening-mode .ielts-group-content p,
#exam-view.listening-mode .lis-standard-content p {
    margin-top: 14px !important;    /* 核心：上方拉开 14px 的呼吸空间 */
    margin-bottom: 14px !important; /* 核心：下方拉开 14px，彻底解决框框打架 */
    line-height: 1.8 !important;    /* 恢复正常的行高，包容输入框 */
}

/* 2. 降低表格里的行高干扰，但保留普通句子的呼吸感 */
#exam-view.listening-mode .ielts-group-content table li,
#exam-view.listening-mode .ielts-group-content table p {
    margin-top: 6px !important; 
    margin-bottom: 6px !important;
}

/* 3. 给填空题输入框“瘦身”，变成官方机考那种细长扁平的冷峻感 */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input {
    height: 24px !important; /* 核心：进一步压扁，真实机考的框高度很小 */
    border: 1px solid #333333 !important; /* 边框变深变细 */
    border-radius: 0px !important; /* 绝对直角，消除任何现代圆角圆润感 */
    vertical-align: middle !important;
    margin: 0 5px !important; /* 左右和文字留出一点点缝隙 */
    font-size: 15px !important;
    color: #000000 !important;
}

/* 4. 让输入框旁边的题号（如1、2、3）完美居中对齐 */
#exam-view.listening-mode .ielts-gap-wrapper,
#exam-view.listening-mode .lis-gap-wrapper {
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第六步：配对题选项“机考化”改造
   ============================================================ */

/* 1. 题目外框去冗余，压紧上下间距 */
#exam-view.listening-mode .lis-question-compact {
    padding: 12px 0 !important; /* 左右不留白，和上方文本对齐 */
    margin-bottom: 0 !important; 
    border-bottom: 1px solid #eeeeee !important; /* 题与题之间加一条细细的分界线，极具考卷感 */
    border-radius: 0 !important;
}

/* 2. 题号与题目文字的紧凑排版 */
#exam-view.listening-mode .lis-q-header-mini {
    margin-bottom: 6px !important; /* 距离下方的 A B C 选项极近 */
    align-items: baseline !important;
}
#exam-view.listening-mode .lis-q-num {
    color: #000000 !important;
    font-size: 15px !important;
}
#exam-view.listening-mode .lis-q-title-mini {
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: normal !important; /* 题干不需要加粗，官方就是普通字体 */
}

/* 3. 彻底改造选项大方块 -> 官方小巧正方形 */
#exam-view.listening-mode .lis-matching-row {
    padding-left: 24px !important; /* 选项向右缩进，刚好对齐上方的题目文字 */
    margin-top: 0 !important;
    background: transparent !important;
    border: none !important;
}
#exam-view.listening-mode .lis-matching-bubbles-container,
#exam-view.listening-mode .matching-bubble-container {
    gap: 4px !important; /* 选项之间的间隙极度缩小 */
}
#exam-view.listening-mode .lis-matching-bubble,
#exam-view.listening-mode .matching-bubble {
    width: 24px !important;  /* 宽度大幅缩小！变成小方块 */
    height: 24px !important; /* 高度大幅缩小！变成小方块 */
    border: 1px solid #000000 !important; /* 纯黑实线 */
    border-radius: 0 !important; /* 绝对直角！没有任何圆角！ */
    background-color: #ffffff !important; /* 纯白背景 */
    color: #000000 !important; /* 纯黑文字 */
    font-size: 13px !important; 
    font-weight: bold !important;
    box-shadow: none !important;
    transition: none !important; /* 干掉一切现代过渡动画 */
}

/* 4. 选中状态：纯黑底白字，绝不发光、绝不放大 */
#exam-view.listening-mode .lis-matching-bubble:has(input:checked),
#exam-view.listening-mode .matching-bubble:has(input:checked) {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    transform: none !important; /* 强制拦截悬停放大 */
    box-shadow: none !important; /* 强制拦截阴影发光 */
}

/* 5. 悬停状态也改得克制一点 */
#exam-view.listening-mode .lis-matching-bubble:hover,
#exam-view.listening-mode .matching-bubble:hover {
    background-color: #f0f0f0 !important; 
    border-color: #000000 !important;
    transform: none !important;
}

/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第七步：单选题/多选题“返璞归真”
   ============================================================ */

/* 1. 让原生的小圆点（Radio）和小方框（Checkbox）重新显示出来！ */
#exam-view.listening-mode .lis-mcq-option input[type="radio"],
#exam-view.listening-mode .lis-mcq-option input[type="checkbox"] {
    display: inline-block !important; /* 强制显示原生控件 */
    margin-right: 12px !important;
    margin-top: 2px !important;
    transform: scale(1.2); /* 稍微放大一点点原生按钮，方便点击 */
    cursor: pointer;
}

/* 2. 扒掉字母外面那个花哨的圆圈/方框 */
#exam-view.listening-mode .lis-mcq-char {
    border: none !important; /* 干掉边框 */
    background: transparent !important; /* 干掉背景色 */
    width: auto !important; /* 取消固定宽度 */
    height: auto !important; /* 取消固定高度 */
    margin-right: 8px !important; 
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000000 !important; /* 变成纯粹的黑色加粗字母 */
    padding: 0 !important;
}

/* 3. 去掉选项被选中时，字母变成黑底白字的现代特效，回归原始 */
#exam-view.listening-mode .lis-mcq-option input:checked + .lis-mcq-box .lis-mcq-char {
    background-color: transparent !important; 
    color: #000000 !important; 
}

/* 4. 消除选项框外面的所有包裹感，让文字直接排列在白纸上 */
#exam-view.listening-mode .lis-mcq-box {
    padding: 2px 0 !important; /* 取消大白框的内边距 */
    border: none !important; /* 干掉选项的边框 */
}
#exam-view.listening-mode .lis-mcq-box:hover {
    background-color: transparent !important; /* 悬停时不要有灰色背景 */
}

/* 5. 调整整个选项的布局，让小圆点、字母、文字完美在同一行 */
#exam-view.listening-mode .lis-mcq-option {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important; /* 选项之间的间距 */
    cursor: pointer;
}

/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第八步：单选/多选题对齐与压缩
   ============================================================ */

/* 1. 修复字母 A/B/C 与选项文字不对齐的问题 (消除多余的 padding) */
#exam-view.listening-mode .lis-mcq-box {
    align-items: flex-start !important; /* 顶部对齐 */
    padding: 0 !important; /* 清除所有内边距 */
    margin: 0 !important;
}
#exam-view.listening-mode .lis-mcq-char {
    line-height: 1.5 !important; /* 与右边文字的行高保持绝对一致 */
    padding-top: 0 !important;   /* 杀掉把字母顶上去的残留 padding */
    margin-top: 0 !important;
}
#exam-view.listening-mode .lis-mcq-text {
    line-height: 1.5 !important; /* 统一行高 */
    padding-top: 0 !important;   /* 🌟 致命一击：杀掉把文字往下压的 padding-top: 2px */
    margin-top: 0 !important;
}

/* 2. 微调原生单选/复选框的小圆点位置，使其和文字完美居中对齐 */
#exam-view.listening-mode .lis-mcq-option input[type="radio"],
#exam-view.listening-mode .lis-mcq-option input[type="checkbox"] {
    margin-top: 3px !important; /* 稍微往下走一点点，和文本的视觉中心对齐 */
}

/* 3. 极限压缩选项 A、B、C 之间的行间距 (解决拉得太长需要滚动的问题) */
#exam-view.listening-mode .lis-mcq-option {
    margin-bottom: 4px !important; /* 选项之间的间距大幅缩小到 4px */
    padding: 0 !important; /* 清除一切残留的 padding */
}
#exam-view.listening-mode .lis-mcq-list-mini {
    gap: 2px !important; /* 把选项列表的内部缝隙压到最小 */
}

/* 4. 压缩整道选择题与下一题之间的间距 */
#exam-view.listening-mode .lis-question-compact {
    padding-top: 8px !important; 
    padding-bottom: 8px !important; 
    margin-bottom: 0 !important; /* 让第11题和第12题之间靠得更近 */
}
/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第九步：全域字号“学术级”普调
   ============================================================ */

/* 1. 提升全局正文字号 (模拟官方 Standard 模式) */
#exam-view.listening-mode .q-content-col,
#exam-view.listening-mode .lis-q-title-mini,
#exam-view.listening-mode .lis-mcq-text,
#exam-view.listening-mode .ielts-group-content,
#exam-view.listening-mode .lis-standard-content {
    font-size: 18px !important; /* 从15-16px提升到18px，这是官方最清晰的字号 */
    color: #000000 !important;
}

/* 2. 同步提升选项字母 A/B/C 的大小 */
#exam-view.listening-mode .lis-mcq-char {
    font-size: 18px !important;
    font-weight: bold !important;
}

/* 3. 同步提升输入框 (Input) 内的字号，防止填写的答案太小 */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input {
    font-size: 18px !important;
    height: 30px !important; /* 稍微加高一点点，配合大字号 */
}

/* 4. 保持表格内文字大小适中 (表格字太大容易撑破) */
#exam-view.listening-mode td,
#exam-view.listening-mode th {
    font-size: 17px !important; /* 表格内比正文小1px，这是排版美学 */
}

/* 5. 微调：让单选/复选的小圆点也跟着变大一点，更好点 */
#exam-view.listening-mode .lis-mcq-option input[type="radio"],
#exam-view.listening-mode .lis-mcq-option input[type="checkbox"] {
    transform: scale(1.3) !important; /* 从1.2放大到1.3 */
    margin-top: 5px !important; /* 修正大圆点的对齐 */
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第十步：配对题选项“灵动矩阵”
   ============================================================ */

/* 1. 重新定义配对题的容器，采用 Flex 布局让题目和选项更有序 */
#exam-view.listening-mode .lis-matching-row {
    padding-left: 0 !important; /* 取消缩进，改用网格控制 */
    margin-top: 8px !important;
}

/* 2. 核心：将 A B C 选项变成紧凑的网格 (Matrix) */
#exam-view.listening-mode .lis-matching-bubbles-container,
#exam-view.listening-mode .matching-bubble-container {
    display: grid !important;
    /* 核心代码：每行显示 8 个选项，超过自动换行，每个格子固定宽度 */
    grid-template-columns: repeat(8, 30px) !important; 
    gap: 5px !important; /* 方块之间的缝隙调到最小 */
    justify-content: flex-start !important;
}

/* 3. 精修小方块的尺寸与边框 (100% 还原官方直角感) */
#exam-view.listening-mode .lis-matching-bubble,
#exam-view.listening-mode .matching-bubble {
    width: 28px !important;  /* 固定宽度 */
    height: 28px !important; /* 固定高度 */
    border: 1px solid #333333 !important; /* 稍微加深边框，显得更有分量 */
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* 4. 选中状态：深度黑化（雅思机考标准选中色） */
#exam-view.listening-mode .lis-matching-bubble:has(input:checked),
#exam-view.listening-mode .matching-bubble:has(input:checked) {
    background-color: #000000 !important; /* 纯黑 */
    border-color: #000000 !important;
    color: #ffffff !important; /* 纯白字母 */
}

/* 5. 选项字母微调：确保在 28px 的方块里完美居中 */
#exam-view.listening-mode .lis-matching-bubble span {
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none; /* 防止点击到文字无法选中方块 */
}

/* 6. 降噪补丁：隐藏配对题里多余的小红旗，防止视觉干扰 */
#exam-view.listening-mode .lis-question-compact .flag-btn-mini {
    display: none !important;
}

/* ============================================================
   🚨 雅思机考 100% 还原计划 - 大框全真拖拽特效
   ============================================================ */

/* 让大框里的选项变成可抓取状态 */
#exam-view.listening-mode .lis-box-item[draggable="true"] {
    cursor: grab !important;         /* 变成小手 */
    user-select: none !important;    /* 防止文字被误选中 */
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;    /* 增加抓取面积 */
    margin: -6px -10px !important;
}

/* 鼠标悬停时的暗示特效：淡灰底 + 细边框 */
#exam-view.listening-mode .lis-box-item[draggable="true"]:hover {
    background-color: #f1f5f9 !important; 
    border-color: #cbd5e1 !important;     
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

/* 正在抓取（鼠标按下）时的状态 */
#exam-view.listening-mode .lis-box-item[draggable="true"]:active {
    cursor: grabbing !important; /* 握紧小手 */
    background-color: #e2e8f0 !important;
}

/* 乘号悬停变红 */
#exam-view.listening-mode .lis-clear-drop-btn:hover {
    color: #ef4444 !important;
}


/* ============================================================
   🥭 Mango IELTS - Part 1 官方机考排版系统 (纯净版)
   ============================================================ */

/* ----------------------------------
   1. 骨架 A：机考标准表格 (.ielts-official-table)
   ---------------------------------- */
.listening-mode .ielts-official-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 15px;
    color: #000000;
}

/* 官方表头：灰蓝底色，深蓝文字 */
.listening-mode .ielts-official-table th {
    background-color: #EBF0F5; 
    border: 1px solid #C4CDD5; 
    color: #002B5B; 
    font-weight: 700;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

/* 官方单元格：白底，浅灰边框 */
.listening-mode .ielts-official-table td {
    background-color: #FFFFFF;
    border: 1px solid #C4CDD5;
    padding: 12px 15px;
    vertical-align: middle;
    line-height: 1.6;
}

/* ----------------------------------
   2. 骨架 B：机考大纲笔记 (.ielts-official-notes)
   ---------------------------------- */
.listening-mode .ielts-official-notes {
    background: transparent;
    margin-bottom: 25px;
    font-size: 15px;
    color: #000000;
}

/* 笔记中的小标题 */
.listening-mode .ielts-official-notes h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 15px 0 10px 0;
    color: #000000;
}

/* 官方圆点列表：对齐与缩进 */
.listening-mode .ielts-official-notes ul {
    list-style-type: disc; /* 自动生成标准的黑圆点 */
    padding-left: 20px; 
    margin: 0;
}

.listening-mode .ielts-official-notes li {
    margin-bottom: 12px;
    line-height: 1.6;
    padding-left: 5px;
}

/* ----------------------------------
   3. 通用：填空题输入区 (高度还原官方)
   ---------------------------------- */
.listening-mode .lis-gap-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 4px; 
}

.listening-mode .lis-gap-num {
    font-weight: 800;
    color: #000000;
    font-size: 15px;
    margin-right: 6px; 
}

.listening-mode .lis-gap-input {
    appearance: none;
    -webkit-appearance: none;
    width: 150px; /* 固定宽度，防止表格变形 */
    height: 28px; /* 官方输入框偏扁 */
    padding: 0 8px;
    background-color: #FFFFFF;
    border: 1px solid #8A94A0; 
    border-radius: 0px; /* 官方绝对直角 */
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    box-sizing: border-box;
}

.listening-mode .lis-gap-input:focus {
    border: 2px solid #000000;
    outline: none;
}

/* 隐藏填空题里的高亮小红旗 */
.listening-mode .lis-gap-wrapper .flag-btn-mini {
    display: none !important;
}

.ielts-official-notes-v2 { font-family: Arial, sans-serif; line-height: 1.8; }
.note-section { margin-bottom: 20px; }
.note-section h4 { font-weight: bold; margin-bottom: 5px; color: #000; }
.note-list { list-style-type: disc; margin-left: 25px; padding-left: 0; }
.note-list li { margin-bottom: 8px; }



/* ============================================================
   🚨 雅思机考 100% 还原计划 - 终极字号大一统补丁 (Unified Font Size)
   ============================================================ */

/* 1. 统一全局基准字号 (官方 Standard Size: 16px) */
:root {
    --lis-standard-font: 16px;
}

/* 2. 镇压所有题干与正文 (包括段落、列表、指令文字) */
#exam-view.listening-mode .lis-q-title-mini,
#exam-view.listening-mode .lis-q-title-bold,
#exam-view.listening-mode .lis-group-instruction,
#exam-view.listening-mode .ielts-group-content p,
#exam-view.listening-mode .lis-standard-content p,
#exam-view.listening-mode .ielts-group-content li,
#exam-view.listening-mode .lis-standard-content li {
    font-size: var(--lis-standard-font) !important;
    line-height: 1.6 !important;
}

/* 3. 镇压单选题/多选题 (之前被错误拉大到 18px 的元凶) */
#exam-view.listening-mode .lis-mcq-text,
#exam-view.listening-mode .lis-mcq-char {
    font-size: var(--lis-standard-font) !important;
}

/* 4. 镇压匹配题选项大框 (之前被遗忘在 15px 的受害者) */
#exam-view.listening-mode .lis-box-item,
#exam-view.listening-mode .lis-box-item span {
    font-size: var(--lis-standard-font) !important;
}

/* 5. 镇压拖拽空槽内的文字 (确保填入答案后和正文一样大) */
#exam-view.listening-mode .lis-drop-text,
#exam-view.listening-mode .lis-drop-letter {
    font-size: var(--lis-standard-font) !important;
}

/* 6. 镇压填空题输入框及题号 */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input,
#exam-view.listening-mode .lis-gap-num,
#exam-view.listening-mode .ielts-gap-num {
    font-size: var(--lis-standard-font) !important;
}

/* 7. 镇压表格内部文字 */
#exam-view.listening-mode td,
#exam-view.listening-mode th,
#exam-view.listening-mode .lis-fixed-table td,
#exam-view.listening-mode .lis-fixed-table th {
    font-size: var(--lis-standard-font) !important;
}


/* ============================================================
   🚨 雅思机考 100% 还原计划 - 第十一阶段：像素级对齐与冷硬化
   ============================================================ */

/* ---------------------------------------------------
   1. 修复单选/多选题：小圆圈与文字的垂直对齐
   --------------------------------------------------- */
#exam-view.listening-mode .lis-mcq-option {
    display: flex !important;
    align-items: flex-start !important; /* 强制顶部对齐，防止长文字导致居中错乱 */
    margin-bottom: 8px !important;      /* 选项之间的间距收紧 */
}

#exam-view.listening-mode .lis-mcq-option input[type="radio"],
#exam-view.listening-mode .lis-mcq-option input[type="checkbox"] {
    margin-top: 5px !important;         /* 🚀 核心正骨：把小圆点往下压5px，使其与16px的字母完美对齐 */
    margin-right: 12px !important;      /* 拉开圆点和字母的距离 */
    transform: scale(1.1) !important;   /* 稍微放大一点点原生按钮，不至于太刺眼 */
}

#exam-view.listening-mode .lis-mcq-char {
    line-height: 1.5 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#exam-view.listening-mode .lis-mcq-text {
    line-height: 1.5 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ---------------------------------------------------
   2. 改造拖拽/填空槽：剔除“现代感”，注入“冷硬考场感”
   --------------------------------------------------- */
/* 统一所有输入框和拖拽槽的底板样式 */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input,
#exam-view.listening-mode .lis-drop-zone {
    height: 28px !important;              /* 🚀 官方机考框偏扁，压低高度 */
    border-radius: 0 !important;          /* 🔪 绝对直角，干掉任何圆润感 */
    background-color: #ffffff !important;
}

/* 拖拽空槽专属（未填入答案时）- 改为深灰色细虚线或实线 */
#exam-view.listening-mode .lis-drop-zone:not(.has-value) {
    border: 1px dashed #555555 !important; /* 把淡蓝色虚线换成深灰偏黑的严肃虚线 */
    width: 120px !important;               /* 固定一个偏宽的距离，显得大方 */
}

/* 填空框专属（或填入答案后的拖拽槽）- 变为1px黑实线 */
#exam-view.listening-mode input.ielts-gap-input,
#exam-view.listening-mode input.lis-gap-input,
#exam-view.listening-mode .lis-drop-zone.has-value {
    border: 1px solid #000000 !important;  /* 纯黑 1px 实线，极度严谨 */
}

/* 收紧题号、框、文字之间的距离 (针对截图中 16-20题太散的问题) */
#exam-view.listening-mode .lis-drop-target-row,
#exam-view.listening-mode .lis-gap-wrapper {
    gap: 8px !important;
    margin-left: 0 !important;
}

/* ---------------------------------------------------
   3. 匹配选项大框 (The Box) 紧凑化
   --------------------------------------------------- */
#exam-view.listening-mode .lis-matching-box {
    border: 1px solid #000000 !important; /* 外框纯黑 */
    border-radius: 0 !important;          /* 绝对直角 */
    padding: 16px 20px !important;        /* 上下内边距缩小 */
    gap: 10px 15px !important;            /* 网格间距：上下10px，左右15px */
    background-color: #fcfcfc !important; /* 极淡的灰白底色区分 */
}

#exam-view.listening-mode .lis-box-item {
    line-height: 1.4 !important;
    padding: 4px 6px !important;          /* 为拖拽交互留出一点点隐形热区 */
}


/* =========================================
   🚀 核心兼容补丁：允许回看/已填位显示长文字
   ========================================= */

/* 1. 当格子拥有 .has-value 类时，解除 28px 的宽度封锁 */
#exam-view.listening-mode .lis-matching-bubble.has-value,
#exam-view.listening-mode .lis-drop-zone.has-value {
    width: auto !important;         /* 允许根据文字长度自动撑开 */
    min-width: 36px !important;     /* 保证至少能放下一个字母 */
    height: auto !important;        /* 允许高度自适应 */
    min-height: 28px !important;
    padding: 2px 12px !important;   /* 增加左右呼吸感 */
    border-radius: 2px !important;
    display: inline-flex !important; /* 确保内部字母和文字水平排列 */
    align-items: center !important;
}

/* 2. 确保回看时内部文字不折行、不消失 */
#exam-view.listening-mode .lis-matching-bubble.has-value span,
#exam-view.listening-mode .lis-drop-zone.has-value span {
    white-space: nowrap !important; /* 禁止回看文字换行 */
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. 修正题号与文字的对齐，防止回看时文字“飞了” */
#exam-view.listening-mode .lis-drop-target-row {
    display: flex !important;
    align-items: center !important; /* 强制纵向居中对齐 */
    flex-wrap: wrap !important;     /* 允许在小屏幕下折行 */
}



/* =========================================
   🚀 判分反馈：选择题/地图题 红绿灯补丁
   ========================================= */

/* 1. 单选/多选题 (MCQ) 的圈圈强制变色 */
#exam-view.listening-mode .lis-mcq-option.correct .lis-mcq-char {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
#exam-view.listening-mode .lis-mcq-option.wrong .lis-mcq-char {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* 2. 地图题 (Map) 的字母泡泡强制变色 */
#exam-view.listening-mode .lis-matching-bubble.correct {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
#exam-view.listening-mode .lis-matching-bubble.wrong {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}