/* --- 1. 全局与基础样式 (已美化 - 浅色主题) --- */
:root {
    --primary-color: #007bff;
    --primary-color-dark: #0056b3;
    
    /* (新增) 浅色侧边栏颜色 (参考图) */
    --sidebar-bg: #f8f9fc; /* 浅蓝灰色 */
    --sidebar-text: #495057; /* 深灰色文字 */
    --sidebar-active-text: #0056b3; /* 激活文字 - 深蓝 */
    --sidebar-active-bg: #e6f2ff; /* 激活背景 - 浅蓝 */
    --sidebar-hover-bg: #f1f3f5; /* 悬停背景 */
    
    /* KPI 颜色 */
    --color-blue: #007bff;
    --color-green: #28a745;
    --color-cyan: #17a2b8;
    --color-yellow: #ffc107;
    --color-red: #dc3545;
    --color-gray: #6c757d;
    --color-orange: #fd7e14;
    --color-purple: #6f42c1;

    --border-color: #dee2e6;
    --background-color: #f4f7fa; /* 主背景 (稍深于侧边栏) */
    --card-background: #ffffff;
    --text-color: #333;
    --text-muted: #6c757d;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --border-radius: 8px;
}

/* 2. [新增] 暗黑模式覆盖 */
[data-theme="dark"] {
    --primary-color: #3b82f6; /* 稍微亮一点的蓝，在深色底更清晰 */
    --primary-color-dark: #60a5fa;
    
    --sidebar-bg: #1e1e1e;       /* 深灰侧边栏 */
    --sidebar-text: #e0e0e0;     /* 浅灰文字 */
    --sidebar-active-text: #60a5fa; 
    --sidebar-active-bg: #2d2d2d;
    --sidebar-hover-bg: #2d2d2d;

    --background-color: #121212; /* 极深背景 */
    --card-background: #1e1e1e;  /* 卡片背景 */
    
    --text-color: #e0e0e0;       /* 主文字变白 */
    --text-muted: #a0a0a0;       /* 次级文字变灰 */
    --border-color: #333333;     /* 边框变深 */
    
    /* 图表颜色不需要变，但可能需要调整坐标轴颜色 */
    --chart-axis-color: #eeeeee; 
}

/* [新增] 稍微调整暗黑模式下的输入框和表格 */
[data-theme="dark"] .sidebar-select, 
[data-theme="dark"] input, 
[data-theme="dark"] textarea {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444;
}
[data-theme="dark"] tr:hover {
    background-color: #2d2d2d;
}
[data-theme="dark"] th {
    background-color: #252525;
    color: #fff;
}
[data-theme="dark"] .student-card div {
    background-color: #2d2d2d; /* 学生卡片深色底 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
}
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

h2, h3 {
    margin-top: 0;
}

/* --- 2. 侧边栏 (Sidebar) (已美化 - 浅色主题) --- */
.sidebar {
    width: 260px; /* (原 240px) */
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    height: 100vh;
    padding: 24px;
    box-sizing: border-box;
    flex-shrink: 0; 
    overflow-y: auto;
    z-index: 10;
    border-right: 1px solid var(--border-color);
}
/* [!! 修改 !!] 侧边栏头部 */
.sidebar-header {
    /* [关键] 增加底部内边距，把下面的线“顶”远一点 */
    padding-bottom: 50px; 
    
    /* 保持原有的外边距和边框 */
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    
    /* 防止标题文字太长溢出 */
    overflow: hidden;
    text-align: center;
}
.sidebar-header h2 {
    color: var(--primary-color-dark);
    margin-bottom: 0;
    text-align: center;
}
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar ul li a, .upload-label {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--sidebar-text);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    margin-bottom: 5px;
    font-weight: 500;
}
.sidebar ul li a:hover, .upload-label:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--text-color);
}
.sidebar ul li a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}
.sidebar ul li a.disabled, .upload-label.disabled {
    color: #9f3131;
    background-color: transparent;
    cursor: not-allowed;
}


.sidebar-logo {
    display: block;       /* 让图片独占一行 */
    width: 800px;          /* 设置宽度，根据你的图片大小调整 (建议 60px - 100px) */
    height: auto;         /* 高度自动，保持比例 */
    margin: 0 auto 15px;  /* 水平居中，并给下方留出 15px 间距 */
    border-radius: 12px;  /* 可选：给图片加个圆角，如果想要圆形改成 50% */
    object-fit: contain;  /* 保证图片内容完整显示 */
}


/* --- 3. 侧边栏配置项 (Config) --- */
.config-section {
    padding: 0 10px;
}
.config-section h4 {
    margin-top: 0px;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.9em;
    font-weight: 600;
}
.sidebar-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: #fff;
}
.sidebar-button {
    padding: 10px 12px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
}
.sidebar-button:hover {
    background-color: var(--primary-color-dark);
}

/* --- 4. 主内容区 (Main Content) --- */
.main-content {
    flex-grow: 1;
    padding: 32px;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.module-panel { display: none; position: relative;}
.module-panel h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
}
#welcome-screen { text-align: center; padding-top: 100px; color: var(--text-muted); }

/* [!! 修复 !!] 卡片容器：允许被压缩 */
.main-card-wrapper {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
    /* [核心] Flex 子项缩小的关键 */
    min-width: 0 !important; 
    width: 100%; /* 确保卡片占满网格单元 */
}

/* 确保 Grid 布局也能自适应 */
.dashboard-chart-grid-2x2,
.dashboard-chart-grid-1x1 {
    /* 确保 Grid 本身不被内容撑爆 */
    min-width: 0;
}

/* --- 6. 模块一 (Dashboard) 布局 (已美化) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* (调整) 最小宽度 */
    gap: 20px;
    margin-bottom: 20px;
}
.kpi-card {
    background: var(--card-background);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary-color);
}
.kpi-card h3 { 
    margin-top: 0; 
    color: var(--text-muted); 
    font-size: 0.9em; /* (调整) 减小字体 */
    font-weight: 500;
}
.kpi-card .value { 
    font-size: 2em; /* (调整) 减小字体 */
    font-weight: 600; 
    color: var(--text-color);
}

/* KPI 卡片颜色 (8卡) */
.kpi-grid .kpi-card:nth-child(1) { border-left-color: var(--color-blue); }
.kpi-grid .kpi-card:nth-child(1) .value { color: var(--color-blue); }

.kpi-grid .kpi-card:nth-child(2) { border-left-color: var(--color-green); }
.kpi-grid .kpi-card:nth-child(2) .value { color: var(--color-green); }

.kpi-grid .kpi-card:nth-child(3) { border-left-color: var(--color-cyan); }
.kpi-grid .kpi-card:nth-child(3) .value { color: var(--color-cyan); }

.kpi-grid .kpi-card:nth-child(4) { border-left-color: var(--color-yellow); }
.kpi-grid .kpi-card:nth-child(4) .value { color: var(--color-yellow); }

.kpi-grid .kpi-card:nth-child(5) { border-left-color: var(--color-red); }
.kpi-grid .kpi-card:nth-child(5) .value { color: var(--color-red); }

.kpi-grid .kpi-card:nth-child(6) { border-left-color: var(--color-gray); }
.kpi-grid .kpi-card:nth-child(6) .value { color: var(--color-gray); }

.kpi-grid .kpi-card:nth-child(7) { border-left-color: var(--color-orange); }
.kpi-grid .kpi-card:nth-child(7) .value { color: var(--color-orange); }

.kpi-grid .kpi-card:nth-child(8) { border-left-color: var(--color-purple); }
.kpi-grid .kpi-card:nth-child(8) .value { color: var(--color-purple); }

.kpi-grid .kpi-card:nth-child(9) { border-left-color: var(--color-red); }
.kpi-grid .kpi-card:nth-child(9) .value { color: var(--color-red); }

.kpi-grid .kpi-card:nth-child(10) { border-left-color: var(--primary-color-dark); }
.kpi-grid .kpi-card:nth-child(10) .value { color: var(--primary-color-dark); }

.kpi-grid .kpi-card:nth-child(11) { border-left-color: var(--color-green); }
.kpi-grid .kpi-card:nth-child(11) .value { color: var(--color-green); }

.kpi-grid .kpi-card:nth-child(12) { border-left-color: var(--color-orange); }
.kpi-grid .kpi-card:nth-child(12) .value { color: var(--color-orange); }


/* (核心修改) 仪表盘主网格 -> 2x2 图表 */
.dashboard-chart-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 20px;
}
/* 响应式：在小屏幕上，2列变为1列 */
@media (max-width: 1024px) {
    .dashboard-chart-grid-2x2 {
        grid-template-columns: 1fr; /* 1列 */
    }
}


/* --- 7. 表格 (Table) --- */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
    max-height: 600px;
    overflow-y: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    box-shadow: none;
}
th, td {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 14px;
    text-align: center;
    font-size: 0.9em;
    white-space: nowrap; /* (新增) 防止表格文字换行 */
}
th {
    background-color: #f9f9f9;
    font-weight: 600;
    position: sticky;
    top: 0;
}
tr:hover {
    background-color: #f8f9fa;
}
tr.total-score-row {
    background-color: #f0f8ff;
    font-weight: 600;
}
.progress {
    color: #00a876 !important;
}
.regress {
    color: #e53935 !important;
}
td span.progress,
td span.regress {
    font-size: 0.9em;
    margin-left: 5px;
    font-weight: 600;
}

/* [!! 修复 !!] 图表容器：强制宽度跟随父级，禁止撑开 */
.chart-container {
    width: 100% !important; /* 强制填满，不准溢出 */
    height: 350px;
    overflow: hidden;       /* [关键] 裁剪溢出，防止 canvas 撑大 flex 容器 */
    position: relative;     /* 确保 ECharts 定位准确 */
}

/* --- 9. 模块控制栏 (Controls) & 学生卡片 (Student) --- */
.controls-bar {
    display: flex;
    gap: 15px;
    align-items: center;
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 20px;
}
/* (新增) 图表卡片内部的控制栏 */
.main-card-wrapper .controls-bar.chart-controls {
    background: transparent;
    box-shadow: none;
    padding: 0 0 16px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; /* (新增) 允许换行 */
}
.main-card-wrapper .controls-bar.chart-controls label {
    font-size: 0.9em;
    color: var(--text-muted);
}
/* (修改) 允许下拉框自动填充空间 */
.main-card-wrapper .controls-bar.chart-controls .sidebar-select {
    flex-grow: 1; 
    min-width: 100px;
}


.controls-bar label { font-weight: 600; }
.controls-bar select, .controls-bar input {
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}
.controls-bar button {
    padding: 8px 16px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}
.controls-bar button:hover { background-color: var(--primary-color-dark); }

.student-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.student-card div {
    padding: 10px;
    border: none;
    background-color: #f8f9fa; /* 默认浅灰色底 */
    border-radius: var(--border-radius);
}
/* --- (新增) 学生卡片色块美化 --- */

/* 姓名: 蓝色 */
.student-card .sc-name { background-color: rgba(0, 123, 255, 0.1); }
.student-card .sc-name strong { color: var(--color-blue); }

/* 考号: 灰色 */
.student-card .sc-id { background-color: rgba(108, 117, 125, 0.1); }
.student-card .sc-id strong { color: var(--color-gray); }

/* 总分: 绿色 (默认) */
.student-card .sc-total { background-color: rgba(40, 167, 69, 0.1); }
.student-card .sc-total strong { color: var(--color-green); }

/* 班排: 橙色 (默认) */
.student-card .sc-rank { background-color: rgba(253, 126, 20, 0.1); }
.student-card .sc-rank strong { color: var(--color-orange); }

/* 年排: 紫色 (默认) */
.student-card .sc-grade-rank { background-color: rgba(111, 66, 193, 0.1); }
.student-card .sc-grade-rank strong { color: var(--color-purple); }

/* (重要) 覆盖默认的排名颜色
  如果排名是“进步”或“退步”，
  让 .progress 和 .regress 的颜色优先显示
*/
.student-card strong.progress {
    color: var(--color-green) !important;
}
.student-card strong.regress {
    color: var(--color-red) !important;
}

.student-card div span { display: block; font-size: 0.9em; color: var(--text-muted); }
.student-card div strong { font-size: 1.5em; color: var(--text-color); }

.student-card strong span.progress,
.student-card strong span.regress {
    font-size: 0.8em;
    font-weight: 600;
    margin-left: 8px;
}
.student-card strong.progress { color: #00a876 !important; }
.student-card strong.regress { color: #e53935 !important; }

/* 模块二 "可搜索下拉框" 样式 */
.search-combobox {
    position: relative;
    display: inline-block;
}
.search-results {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.result-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.9em;
    border-bottom: 1px solid #f0f0f0;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background-color: #f0f0f0; }
.result-item strong { color: var(--primary-color); }

/* --- 10. 模态窗口 (Modal) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { margin: 0; }
.modal-close-btn {
    font-size: 1.8em;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close-btn:hover { color: #333; }
.modal-body {
    padding: 24px;
}
.modal-body p { margin-top: 0; color: var(--text-muted); }
.modal-body #subject-config-table input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
}
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

/* --- (新增) 模块四：可排序表头 --- */
.table-container th[data-sort-key] {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 20px; /* 为箭头腾出空间 */
}

/* 排序箭头 (默认隐藏) */
.table-container th[data-sort-key]::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    opacity: 0.3;
}

/* 激活的升序箭头 */
.table-container th.sort-asc::after {
    border-bottom-color: var(--text-color);
    opacity: 1;
}

/* 激活的降序箭头 */
.table-container th.sort-desc::after {
    border-top-color: var(--text-color);
    opacity: 1;
}

/* 鼠标悬停时显示 */
.table-container th[data-sort-key]:hover::after {
    opacity: 0.7;
}

/* (新增) 趋势对比散点图 Y 轴标签 (隐藏学生姓名) */
#trend-scatter-chart .echarts-y-axis .axis-label {
    display: none;
}

/* --- (新增) 模块五：快捷筛选按钮 --- */
.shortcut-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}
.shortcut-btn {
    padding: 6px 12px;
    font-size: 0.85em;
    border: 1px solid var(--border-color);
    background-color: #f8f9fa;
    color: var(--text-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}
.shortcut-btn:hover {
    background-color: #e9ecef;
}
/* A/B/C/D 颜色 */
.shortcut-btn[data-type="A"] { background-color: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.3); }
.shortcut-btn[data-type="B"] { background-color: rgba(0, 123, 255, 0.1); border-color: rgba(0, 123, 255, 0.3); }
.shortcut-btn[data-type="C"] { background-color: rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.3); }
.shortcut-btn[data-type="D"] { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); }

/* --- (新增) 布局修正：统一 controls-bar 高度 --- */

/* 让 .controls-bar 里的所有元素都严格垂直居中
*/
.controls-bar {
    align-items: center;
}

/* (核心) 覆盖 sidebar-button 在 controls-bar 里的 padding,
  使其与 input 的 8px 上下内边距一致
*/
.controls-bar .sidebar-button {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* (可选) 统一所有 label 的对齐方式, 增加一点右边距
*/
.controls-bar label {
    margin-right: 5px;
    color: var(--text-muted);
}

/* --- (新增) 布局修正：模块五筛选器换行问题 --- */

/* 覆盖 .sidebar-select 的 100% 宽度
  (这
*/
.controls-bar .sidebar-select {
    width: auto; /* [!!] 核心修正：取消100%宽度 */
    min-width: 150px; /* 给科目下拉框一个合理宽度 */
    flex-grow: 1; /* (可选) 让它填充一点剩余空间 */
}

/* 限制模块五中数字输入框的宽度，它们不需要很宽
*/
.controls-bar input[type="number"]#group-min,
.controls-bar input[type="number"]#group-max {
    width: 80px;
    flex-grow: 0; /* (新增) 不允许它们拉伸 */
}

/* --- (新增) 模块十二：多次考试分析 列表样式 --- */
.multi-exam-list-container {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.multi-exam-item, .multi-exam-item-empty {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}
.multi-exam-item:last-child {
    border-bottom: none;
}
.multi-exam-item-empty {
    color: var(--text-muted);
    justify-content: center;
}

.multi-exam-index {
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 10px;
}

/* [!!] 这就是您要找的 .multi-exam-label 
  我已经加入了修复输入框过短的 'width: 0' 
*/
.multi-exam-label {
    flex-grow: 1;
    font-size: 1em;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;

    /* [!!] (修复) 修复输入框太短的问题 */
    width: 0; 
    min-width: 100px;
}
.multi-exam-label:hover {
    border-color: var(--border-color);
}
.multi-exam-label:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #f8f9fa;
}

.multi-exam-buttons {
    margin-left: auto;
    display: flex;
    gap: 5px;
}
.multi-exam-buttons button {
    padding: 4px 8px;
    font-size: 0.9em;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
}
.multi-exam-buttons button:hover {
    background-color: #e0e0e0;
}
.multi-exam-buttons button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.multi-exam-buttons button.delete-btn {
    background-color: #ffeaea;
    color: var(--color-red);
    font-weight: 600;
}
.multi-exam-buttons button.delete-btn:hover {
    background-color: #f8c0c0;
}

/* --- (新增) 模块十二：表格样式 --- */
.multi-exam-table-container {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}
.multi-exam-table-container h4 {
    margin-top: 0;
}


/* --- (新增) 模块十二：科目筛选器样式 --- */
.multi-subject-filter-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    max-height: 150px;
    overflow-y: auto;
    margin-top: 10px;
}

/* (新增) 专用于模块十二的 1x1 布局 */
.dashboard-chart-grid-1x1 {
    display: grid;
    grid-template-columns: 1fr; /* 1列 */
    gap: 20px;
}
/* --- (新增) 模块十二：导入/导出按钮样式 --- */
.multi-exam-import-label {
    padding: 8px 16px;
    /* [!!] (修复) 与“导出”按钮的字体大小 (0.9em) 统一 */
    font-size: 0.9em; 
    /* [!!] (修复) 与“导出”按钮的颜色 (绿色) 统一 */
    background-color: var(--color-orange); 
    color: rgb(235, 16, 16); 
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex; 
    align-items: center; 
    gap: 5px; 
}
.multi-exam-import-label:hover {
    /* [!!] (修改) 悬停时变为深绿色 */
    background-color: #218838; 
}


/* --- [!! 新增 !!] 模块十二 隐藏功能 --- */
.multi-exam-item.is-hidden {
    opacity: 0.6;
}
.multi-exam-item.is-hidden .multi-exam-label {
    /* 为被隐藏的项目添加删除线 */
    text-decoration: line-through;
    color: var(--text-muted);
}
.multi-exam-buttons button.hide-btn {
    /* 默认按钮样式 */
    background-color: #f0f0f0;
    color: #333;
}
.multi-exam-item.is-hidden .multi-exam-buttons button.hide-btn {
    /* 隐藏状态下的按钮样式 (使其突出) */
    background-color: #fff3cd; /* 浅黄色 */
    color: #856404;
    font-weight: 600;
}

/* --- 模块十四：AI 分析样式 --- */
#ai-content h3 { color: var(--primary-color-dark); border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 20px; }
#ai-content ul, #ai-content ol { padding-left: 20px; }
#ai-content li { margin-bottom: 5px; color: #444; }
#ai-content strong { color: #000; background-color: rgba(255, 193, 7, 0.2); padding: 0 2px; }
#ai-content blockquote { border-left: 4px solid #ddd; margin: 0; padding-left: 15px; color: #666; }

/* --- 模块十四：AI 深度美化与打字机效果 --- */

/* 1. 内容容器 */
#ai-content {
    font-family: -apple-system, "NotosansSC", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    line-height: 1.8; /* 增加行高，阅读更舒适 */
    font-size: 16px;
    color: #374151; /* 深灰色，不刺眼 */
    padding: 10px 5px;
}

/* 2. 标题美化 */
#ai-content h1, #ai-content h2, #ai-content h3 {
    color: #1f2937;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    letter-spacing: -0.025em;
}
#ai-content h3 {
    font-size: 1.25em;
    border-left: 4px solid var(--primary-color); /* 左侧加个蓝条 */
    padding-left: 12px;
    border-bottom: none; /* 去掉下划线 */
}

/* 3. 重点文字 (加粗) */
#ai-content strong {
    color: #b45309; /* 深橙色 */
    background-color: #fffbeb; /* 浅黄背景 */
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* 4. 列表 */
#ai-content ul, #ai-content ol {
    padding-left: 24px;
    margin-bottom: 1.2em;
}
#ai-content li {
    margin-bottom: 0.5em;
}
#ai-content li::marker {
    color: var(--primary-color); /* 列表前的点点变蓝 */
}

/* 5. 引用块 (Blockquote) */
#ai-content blockquote {
    border-left: 4px solid #e5e7eb;
    background-color: #f9fafb;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    color: #6b7280;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* 6. 打字时光标闪烁效果 */
.typing-cursor::after {
    content: '▋';
    display: inline-block;
    vertical-align: middle;
    color: var(--primary-color);
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- AI 等待进度条动画 --- */
.ai-progress-container {
    width: 100%;
    max-width: 320px; /* 限制一下宽度，太宽不好看 */
    height: 8px;
    background-color: #f3f4f6; /* 浅灰底色 */
    border-radius: 10px;
    margin: 20px auto 0 auto; /* 居中 */
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.ai-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), #8b5cf6); /* 蓝到紫渐变 */
    border-radius: 10px;
    transition: width 0.2s ease; /* 平滑过渡 */
    
    /* 条纹光效 */
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: ai-stripe-move 1s linear infinite; /* 条纹滚动动画 */
}

@keyframes ai-stripe-move {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

/* --- AI 回复深度美化 (消除星号，提升颜值) --- */

/* 1. 全局容器：增加行高，让文字呼吸 */
#ai-content {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.8;
    font-size: 15px;
    color: #2c3e50;
    padding: 10px 5px;
}

/* 2. 标题美化 (#, ##, ###) */
#ai-content h1, #ai-content h2, #ai-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #1a202c;
    font-weight: 700;
    line-height: 1.3;
}
/* 让三级标题 (###) 带个漂亮的左侧竖条 */
#ai-content h3 {
    font-size: 1.1em;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
    background: linear-gradient(to right, rgba(0,123,255,0.05), transparent); /* 淡淡的背景 */
}

/* 3. 列表美化 (-, 1.) */
#ai-content ul, #ai-content ol {
    padding-left: 25px;
    margin-bottom: 1em;
}
#ai-content li {
    margin-bottom: 0.5em;
}
/* 让列表的小圆点变色 */
#ai-content li::marker {
    color: var(--primary-color);
    font-weight: bold;
}

/* 4. 重点文字美化 (**) - 关键点！ */
#ai-content strong {
    color: #d9534f; /* 变成醒目的深红色/橙色，不再是黑色 */
    background-color: rgba(255, 243, 205, 0.6); /* 加一个浅黄色高亮背景 */
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* 5. 段落间距 */
#ai-content p {
    margin-bottom: 1em;
    text-align: justify; /* 两端对齐，看起来更整齐 */
}

/* 6. 引用块 (>) */
#ai-content blockquote {
    border-left: 4px solid #ddd;
    margin: 1em 0;
    padding: 0.5em 1em;
    color: #666;
    background-color: #f8f9fa;
    font-style: italic;
}


/* --- [!! NEW !!] AI 历史记录侧边栏样式 --- */

/* 1. 悬浮开关按钮 */
#ai-history-toggle-btn {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 10px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    z-index: 990;
    font-weight: bold;
    transition: right 0.3s ease;
}
#ai-history-toggle-btn:hover {
    background-color: var(--primary-color-dark);
    padding-left: 15px;
}

/* 2. 抽屉容器 */
#ai-history-drawer {
    position: fixed;
    top: 0;
    right: -320px; /* 默认隐藏在屏幕外 */
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑过渡 */
    display: flex;
    flex-direction: column;
    border-left: 1px solid #eee;
}

/* 激活状态：滑入 */
#ai-history-drawer.open {
    right: 0;
}

/* 头部 */
.history-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--sidebar-bg);
}
.history-header h3 { margin: 0; font-size: 1.1em; color: #333; }
#ai-history-close-btn {
    background: none; border: none; font-size: 1.5em; cursor: pointer; color: #666;
}

/* 操作区 */
.history-actions { padding: 10px 20px; border-bottom: 1px solid #eee; }

/* 列表区 */
.history-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

/* 单个历史条目卡片 */
.history-item {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.history-item:hover {
    background-color: #e9ecef;
    border-color: var(--primary-color);
}
.history-item h4 { margin: 0 0 5px 0; font-size: 0.95em; color: #333; }
.history-item p { margin: 0; font-size: 0.8em; color: #666; }
.history-item .history-date { font-size: 0.75em; color: #999; margin-top: 5px; display: block; }

/* 删除单条记录的按钮 */
.history-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.history-delete-btn:hover { color: var(--color-red); }


/* --- DeepSeek 深度思考折叠框样式 --- */
details.ai-reasoning-box {
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* 防止内容溢出圆角 */
    transition: all 0.3s ease;
}

details.ai-reasoning-box summary {
    padding: 10px 15px;
    background-color: #f3f4f6;
    cursor: pointer;
    font-weight: 600;
    color: #4b5563;
    user-select: none;
    list-style: none; /* 隐藏默认三角，下面自定义 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 自定义小箭头 */
details.ai-reasoning-box summary::after {
    content: '▼';
    font-size: 0.8em;
    transition: transform 0.2s;
}

/* 收起时箭头旋转 */
details.ai-reasoning-box:not([open]) summary::after {
    transform: rotate(-90deg);
}

/* 思考内容的容器 */
.ai-reasoning-content {
    padding: 15px;
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
    white-space: pre-wrap; /* 保留换行 */
    font-family: "Menlo", "Monaco", "Courier New", monospace; /* 代码感字体 */
}

/* --- 打印时的控制 (核心) --- */
@media print {
    /* 1. 隐藏折叠框的背景色和边框，省墨水 */
    details.ai-reasoning-box {
        border: 1px dashed #ccc;
        background-color: transparent;
    }
    
    details.ai-reasoning-box summary {
        background-color: transparent;
        border-bottom: 1px solid #ccc;
    }

    /* 2. 关键：如果屏幕上是收起的(没有open属性)，打印时彻底隐藏内容 */
    details.ai-reasoning-box:not([open]) .ai-reasoning-content {
        display: none !important;
    }

    /* 3. 如果屏幕上是展开的，打印时显示内容 */
    details.ai-reasoning-box[open] .ai-reasoning-content {
        display: block !important;
    }
}


/* --- 追问气泡上的打印按钮 --- */
.ai-bubble-print-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    font-size: 1.1em;
    color: #999;
    opacity: 0.4;
    transition: all 0.2s;
    background: none;
    border: none;
    z-index: 10;
}
.ai-bubble-print-btn:hover {
    opacity: 1;
    color: #007bff; /* 悬停变蓝 */
    transform: scale(1.1);
}

/* 打印时隐藏这个小按钮，避免纸上出现一个图标 */
@media print {
    .ai-bubble-print-btn {
        display: none !important;
    }
}

/* --- [!! NEW !!] 底部固定输入框与停止按钮 --- */

/* 1. 整个输入区域容器 (吸底) */
#ai-followup-input-area {
    position: sticky; /* 吸附在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 15px 20px;
    z-index: 900;
    display: flex !important; /* [!!] 强制一直显示，覆盖 JS 的隐藏逻辑 */
    gap: 10px;
    align-items: flex-end; /* 对齐底部 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* 2. 输入框样式优化 */
#ai-user-input {
    flex-grow: 1;
    resize: none;
    height: 50px; /* 默认高度 */
    max-height: 150px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #f9fafb;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
}
#ai-user-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
}

/* 3. 发送按钮 */
#ai-send-btn {
    height: 50px;
    width: 80px;
    border-radius: 8px;
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    transition: background-color 0.2s;
}
#ai-send-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 4. [核心] 停止按钮 (悬浮在输入框正上方) */
#ai-floating-stop-btn {
    position: absolute;
    top: -50px; /* 位于输入框上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 910;
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#ai-floating-stop-btn:hover {
    background-color: #fef2f2;
}

@keyframes popIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* 为了防止最后一条消息被输入框挡住，给历史记录容器加个底部内边距 */
#ai-chat-history {
    padding-bottom: 20px;
}
/* 给主内容区也加个底部内边距 */
#ai-result-container {
    padding-bottom: 80px; 
}

/* --- 多列表管理侧边栏样式 --- */

/* 1. 悬浮开关按钮 */
#multi-collection-toggle-btn {
    position: absolute; /* 相对于 module-panel 定位 */
    top: 20px;
    right: 20px;
    background-color: #6f42c1; /* 紫色，与 AI 区分 */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-weight: 600;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}
#multi-collection-toggle-btn:hover {
    background-color: #5a32a3;
}

/* 2. 抽屉容器 */
#multi-collection-drawer {
    position: fixed;
    top: 0;
    right: -320px; /* 默认隐藏 */
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 2000; /* 层级要高 */
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #eee;
}

/* 激活状态 */
#multi-collection-drawer.open {
    right: 0;
}

/* 抽屉头部 */
.drawer-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.drawer-header h3 { margin: 0; font-size: 1.1em; color: #333; }
#multi-collection-close-btn {
    background: none; border: none; font-size: 1.5em; cursor: pointer; color: #999;
}
#multi-collection-close-btn:hover { color: #333; }

/* 抽屉内容 */
.drawer-content {
    padding: 20px;
    flex-grow: 1;
}


/* 在 style.css 末尾添加 */

/* 目标设定模块样式 */
#goal-strategy-table td {
    vertical-align: middle;
}

/* 搜索组合框微调 */
#goal-student-search-results {
    width: 300px; /* 搜索结果框宽一点 */
}

/* 强调色 */
.text-purple { color: #6f42c1; }
.bg-purple-light { background-color: #f3e5f5; }


/* 目标管理模块 Tab 样式 */
.tab-btn {
    font-size: 1.1em;
    transition: all 0.3s;
    opacity: 0.7;
}
.tab-btn:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.02);
}
.tab-btn.active {
    opacity: 1;
}

/* 规划列表样式微调 */
#goal-archive-list .multi-exam-item {
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
#goal-archive-list .multi-exam-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

/* 学生选择按钮矩阵 */
.goal-student-btn {
    transition: all 0.2s;
    padding: 8px 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.goal-student-btn:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 选中状态 */
.goal-student-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* 考场编排模块 */
#exam-room-tabs::-webkit-scrollbar {
    height: 6px;
}
#exam-room-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.room-tab-btn {
    transition: all 0.2s;
}
.room-tab-btn:hover {
    background-color: #e9ecef !important;
    color: #000 !important;
}
.room-tab-btn.active-tab:hover {
    background-color: var(--primary-color-dark) !important;
    color: #fff !important;
}

/* 模块十六：互助分组样式 */
.group-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.group-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.2s;
}
.group-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.group-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
}

.group-avg {
    font-size: 0.85em;
    color: #666;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
}

.group-member-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.group-member-item {
    padding: 8px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}
.group-member-item:last-child {
    border-bottom: none;
}

.role-badge {
    font-size: 0.75em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
}
.role-leader { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } /* 组长/优 */
.role-member { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; } /* 中 */
.role-support { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* 需帮扶 */


/* 评语助手标签样式 */
.quick-tag {
    display: inline-block;
    font-size: 0.75em;
    padding: 2px 6px;
    margin: 2px;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background-color: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.quick-tag:hover {
    background-color: #e9ecef;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.quick-tag:active {
    transform: scale(0.95);
}


/* =========================================
   [!! FINAL !!] 布局核心样式 (侧边栏+主内容)
   包含了：折叠、拖拽、悬浮按钮、图表自适应修复
   ========================================= */

/* --- 1. 主内容区 (Main Content) --- */
.main-content {
    flex-grow: 1;
    
    /* [核心修复] 强制宽度为0，配合 flex-grow:1 */
    /* 这能强制 Flex 容器重新计算空间，防止被内部 ECharts 图表撑大导致溢出 */
    width: 0 !important; 
    min-width: 0 !important; 
    
    overflow-x: hidden; /* 隐藏横向滚动条 */
    overflow-y: auto;   /* 保持垂直滚动 */
    
    padding: 32px;
    height: 100vh;
    box-sizing: border-box;
    position: relative; /* 为内部定位元素提供基准 */
}

/* --- 2. 侧边栏容器 (Sidebar) --- */
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    height: 100vh;
    
    /* [布局模式] Flex 布局，实现头部固定，列表滚动 */
    display: flex;              
    flex-direction: column;     
    
    /* [关键] 允许溢出，否则右侧悬浮的半圆按钮会被切掉 */
    overflow: visible !important; 
    position: relative;         
    
    padding: 24px; 
    box-sizing: border-box;
    flex-shrink: 0; 
    z-index: 10;
    border-right: 1px solid var(--border-color);
    
    /* [拖拽限制] */
    min-width: 150px;
    max-width: 600px;

    /* [动画] 平滑过渡 */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s, opacity 0.3s;
    white-space: nowrap;
}

/* --- 3. 侧边栏内部列表 (Menu List) --- */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* [核心] 只有列表区域可以滚动 */
    flex-grow: 1;        
    overflow-y: auto;    
    overflow-x: hidden;  
    
    /* 美化：让滚动条离文字稍微远一点 */
    margin-right: -10px; 
    padding-right: 10px;
}

/* 1. 侧边栏容器：折叠时 */
.sidebar.collapsed {
    /* 压扁宽度 */
    width: 0 !important;
    min-width: 0 !important;
    
    /* 去掉边距和边框 */
    padding: 0 !important;
    border: none !important;
    
    /* [!! 核心关键 !!] */
    /* 必须设置为 visible，否则挂在右边的 #sidebar-drag-handle 会被切掉看不见 */
    overflow: visible !important;
    
    /* 必须保持不透明，否则按钮也是透明的 */
    opacity: 1 !important;
    
    /* 停止过渡动画，防止拖拽逻辑干扰 */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sidebar.collapsed > *:not(#sidebar-drag-handle) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 3. 修正折叠时手柄的位置 */
/* 当侧边栏宽度为0时，它是贴在屏幕最左边的 */
.sidebar.collapsed #sidebar-drag-handle {
    /* 保持挂在右侧 (相对于0宽度的父容器) */
    right: -24px; /* 手柄宽度是24px，负值让它完全露出来 */
    left: auto;
    
    /* 视觉微调：变成半圆贴在屏幕边缘 */
    border-radius: 0 20px 20px 0;
    border-left: 1px solid #dee2e6; /* 补上左边框 */
}

/* 4. 翻转箭头方向 */
.sidebar.collapsed #sidebar-drag-handle .handle-icon {
    transform: rotate(180deg);
}

/* 拖拽时禁用动画，防止卡顿 */
.sidebar.no-transition {
    transition: none !important;
}

/* --- 5. 侧边栏折叠手柄 (Toggle Handle) --- */
#sidebar-drag-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* [定位] 挂在侧边栏的最右侧外部 */
    right: -12px; 
    left: auto;   
    
    width: 24px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-left: none; /* 去掉左边框，模拟连接感 */
    border-radius: 0 20px 20px 0; /* 半圆造型 */
    box-shadow: 4px 0 6px rgba(0,0,0,0.05);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001; /* 层级必须高于拖拽条 */
    transition: background-color 0.2s;
    
    /* 确保按钮内的文字/图标不被选中 */
    user-select: none; 
}

/* 手柄悬停效果 */
#sidebar-drag-handle:hover {
    background-color: var(--primary-color);
}
#sidebar-drag-handle:hover .handle-icon {
    color: #fff;
}

/* 当侧边栏折叠时，手柄的形态变化 */
.sidebar.collapsed #sidebar-drag-handle .handle-icon {
    transform: rotate(180deg); /* 箭头反转 */
}
/* 折叠时手柄的位置微调（可选，保持默认即可，因为父容器宽度变0，它自然会贴到屏幕左边） */


/* --- 6. 侧边栏宽度拖拽条 (Resizer) --- */
#sidebar-resizer {
    position: absolute;
    top: 0;
    bottom: 0;           /* 高度撑满 */
    right: 0;            /* 紧贴右边缘 */
    width: 8px;          /* 热区宽度 */
    cursor: col-resize;  /* 鼠标样式 */
    z-index: 1000;       
    background-color: transparent;
    transition: background-color 0.2s;
}

/* 拖拽条激活/悬停样式 */
#sidebar-resizer:hover,
#sidebar-resizer.resizing {
    background-color: var(--primary-color);
    opacity: 0.5;
}

/* =========================================
   [!! NEW !!] 侧边栏文字防溢出优化
   解决：拖拽变窄时，文字溢出遮挡问题
   ========================================= */

/* 1. 针对侧边栏内所有可能溢出的文本元素 */
.sidebar h2,              /* 大标题 */
.sidebar h4,              /* 小标题 */
.sidebar a,               /* 菜单链接 */
.sidebar button,          /* 按钮 */
.sidebar .upload-label,   /* 上传按钮 */
.sidebar li,              /* 列表项 */
.sidebar option,          /* 下拉选项 */
.sidebar select           /* 下拉框 */
{
    white-space: nowrap !important;      /* 强制不换行 */
    overflow: hidden !important;         /* 超出容器隐藏 */
    text-overflow: ellipsis !important;  /* 超出部分显示省略号(...) */
    max-width: 100%;                     /* 宽度不超过父容器 */
}

/* 2. 针对 Flex 布局的链接 (带图标的菜单) 需要特殊处理 */
.sidebar .nav-link {
    display: block !important;  /* 临时改为 block 以支持 ellipsis */
    /* 如果您希望保持图标垂直居中，可以用下面的 flex 兼容写法，但在极窄宽度下 block 更稳定 */
}
.sidebar .upload-label { 
    display: block !important;  
    /* 垂直居中微调 (因为变成block后flex居中失效，用行高补救) */
    line-height: 1.5; 
}

/* 3. 针对列表项的微调 */
.multi-exam-label {
    width: 100%; /* 确保输入框也能自适应缩小 */
}

/* 4. 标题区域微调 (防止 SMART PRISM 撑开) */
.sidebar-header {
    overflow: hidden;
}

/* --- 评语助手标签样式 (彩色版) --- */
.quick-tag {
    display: inline-block;
    font-size: 0.8em; /* 稍微大一点点 */
    padding: 3px 8px;
    margin: 2px;
    border: 1px solid #dee2e6;
    border-radius: 15px; /* 更圆润 */
    background-color: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

/* 鼠标悬停效果 */
.quick-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 也可以通过 JS 动态添加 class 来区分颜色，但最简单的是统一风格 */
/* 如果您希望点击后变色，可以在 JS 里 toggle class */