/* ============================================================
 * task-common.css — task.html 与 checkin-task.html 共享样式（P1a 抽取）
 * 2026-10-04 自两页 <style> 逐字相同段抽出；改样式两页同时生效。
 * 页面特有样式仍在各自 <style> 内（打卡追踪明细卡/加载状态/step-type-badge 等）。
 * ============================================================ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            background: var(--theme-gradient-solid, linear-gradient(135deg, var(--theme-color, #667eea) 0%, #764ba2 100%));
            color: #fff;
            padding: 0 24px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .logo {
            font-size: 20px;
            font-weight: 600;
        }
        .nav {
            display: flex;
            gap: 20px;
        }
        .nav-item {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 4px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .nav-item:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }
        .nav-item.active {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .user-name {
            font-size: 14px;
        }
        .btn-logout {
            background: rgba(255,255,255,0.2);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 6px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .btn-logout:hover {
            background: rgba(255,255,255,0.3);
        }
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .btn-add {
            background: var(--theme-color, #667eea);
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .btn-add:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        .split-layout {
            display: flex;
            gap: 20px;
            height: calc(100vh - 100px);
        }
        .left-panel {
            width: 400px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex-shrink: 0;
        }
        .panel-header {
            padding: 16px 20px;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .class-list {
            flex: 1;
            overflow-y: auto;
        }
        .class-item {
            padding: 14px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .class-item:hover {
            background: #f8f9fa;
        }
        .class-item.active {
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.1);
            border-left: 3px solid var(--theme-color, #667eea);
        }
        .class-info {
            flex: 1;
        }
        .class-name {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .class-meta {
            font-size: 12px;
            color: #999;
        }
        .level-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        .level-badge.A0 { background: #e8f5e9; color: #2e7d32; }
        .level-badge.A1 { background: #e3f2fd; color: #1565c0; }
        .level-badge.A2 { background: #ede7f6; color: #5e35b1; }
        .level-badge.B1 { background: #fff3e0; color: #e65100; }
        .level-badge.B2 { background: #fce4ec; color: #c2185b; }
        .level-badge.C1 { background: #f3e5f5; color: #7b1fa2; }
        .level-badge.C2 { background: #ffebee; color: #c62828; }
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        .status-badge.active { background: #e8f5e9; color: #2e7d32; }
        .status-badge.ended { background: #fff3e0; color: #e65100; }
        .status-badge.dissolved { background: #f5f5f5; color: #757575; }
        .class-actions {
            display: flex;
            gap: 8px;
        }
        .btn-action {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }
        .btn-action.edit {
            background: #fff;
            border: 1px solid var(--theme-color, #667eea);
            color: var(--theme-color, #667eea);
        }
        .btn-action.edit:hover {
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.1);
        }
        .btn-action.delete {
            background: #fff;
            border: 1px solid #dc3545;
            color: #dc3545;
        }
        .btn-action.delete:hover {
            background: rgba(220, 53, 69, 0.1);
        }
        .no-data {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        .no-data .icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.3;
        }
        /* ===== 右侧面板（任务管理） ===== */
        .right-panel {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .right-panel .panel-header {
            flex-shrink: 0;
        }
        .right-content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* 任务区域 */
        .task-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .task-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
            flex-shrink: 0;
        }
        .task-toolbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .task-toolbar-left label {
            font-size: 13px;
            color: #666;
        }
        .task-toolbar-left select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
            outline: none;
        }
        .task-toolbar-left select:focus {
            border-color: var(--theme-color, #667eea);
        }
        .task-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 20px;
        }
        /* ===== 视图切换按钮 ===== */
        .view-switcher {
            display: inline-flex;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
        }
        .view-switch-btn {
            padding: 6px 14px;
            border: none;
            background: #fff;
            color: #666;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .view-switch-btn:hover {
            background: #f5f7fa;
            color: var(--theme-color, #667eea);
        }
        .view-switch-btn.active {
            background: var(--theme-color, #667eea);
            color: #fff;
        }
        .view-switch-btn .view-icon {
            font-size: 14px;
            line-height: 1;
        }
        /* ===== 列表视图（默认，2026-11-03 清单条风格：左状态竖条+状态轻染行底+右移 hover，与网格视图形成辨识度） ===== */
        .task-list.view-list .task-item {
            position: relative;
            padding: 14px 18px 14px 24px;
            border: 1px solid #eceff5;
            border-radius: 10px;
            margin-bottom: 12px;
            transition: all 0.2s;
            overflow: hidden;
            background: #fff;
        }
        /* 左侧状态竖条 */
        .task-list.view-list .task-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #e3e7ef;
        }
        .task-list.view-list .task-item[data-status="pending"]::before { background: linear-gradient(180deg, #ffa726, #f57c00); }
        .task-list.view-list .task-item[data-status="in_progress"]::before { background: linear-gradient(180deg, #42a5f5, var(--theme-color, #667eea)); }
        .task-list.view-list .task-item[data-status="completed"]::before { background: linear-gradient(180deg, #66bb6a, #43a047); }
        .task-list.view-list .task-item[data-status="ended"]::before { background: linear-gradient(180deg, #ff7043, #f4511e); }
        .task-list.view-list .task-item[data-status="cancelled"]::before { background: linear-gradient(180deg, #bdbdbd, #9e9e9e); }
        /* 状态轻染行底 */
        .task-list.view-list .task-item[data-status="pending"] { background: linear-gradient(90deg, #fff8ec, #fff 260px); }
        .task-list.view-list .task-item[data-status="in_progress"] { background: linear-gradient(90deg, #eef4ff, #fff 260px); }
        .task-list.view-list .task-item[data-status="completed"] { background: linear-gradient(90deg, #effaf0, #fff 260px); }
        .task-list.view-list .task-item[data-status="ended"] { background: linear-gradient(90deg, #fff1ea, #fff 260px); }
        .task-list.view-list .task-item[data-status="cancelled"] { background: linear-gradient(90deg, #f7f8fa, #fff 260px); }
        .task-list.view-list .task-item:hover {
            transform: translateX(3px);
            border-color: #e0e4ee;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
        }
        .task-list.view-list .task-item .task-name {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            margin-bottom: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .task-list.view-list .task-item .task-meta {
            font-size: 12px;
            color: #999;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 6px;
        }
        .task-list.view-list .task-item .task-meta span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        /* ===== 网格视图 ===== */
        /* 固定列宽卡片：卡片数量增减不改变卡片尺寸（不再随 1fr 拉伸/收缩），行尾留白（2026-11-03） */
        /* grid-auto-rows:max-content：滚动容器高度受限时 auto 行会塌缩到卡片 min-content（只剩状态条），
           必须锁 max-content 让行高跟随完整内容、超出走滚动（2026-11-03 修复卡片被压扁成彩条） */
        .task-list.view-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 320px));
            grid-auto-rows: max-content;
            justify-content: flex-start;
            gap: 16px;
            padding: 16px 20px;
            align-content: start;
        }
        /* 网格卡片 */
        .task-grid-card {
            background: #fff;
            border: 1px solid #e8eaf0;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.25s ease;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .task-grid-card:hover {
            border-color: #c7d2fe;
            box-shadow: 0 8px 24px rgba(var(--theme-color-rgb, 102, 126, 234), 0.12);
            transform: translateY(-3px);
        }
        /* 顶部状态色条 */
        .task-grid-card .grid-status-bar {
            height: 5px;
            flex-shrink: 0;
        }
        .task-grid-card[data-status="pending"] .grid-status-bar { background: linear-gradient(90deg, #ffa726, #ffb74d); }
        .task-grid-card[data-status="in_progress"] .grid-status-bar { background: linear-gradient(90deg, #42a5f5, var(--theme-color, #667eea)); }
        .task-grid-card[data-status="completed"] .grid-status-bar { background: linear-gradient(90deg, #66bb6a, #43a047); }
        .task-grid-card[data-status="ended"] .grid-status-bar { background: linear-gradient(90deg, #ff7043, #f4511e); }
        .task-grid-card[data-status="cancelled"] .grid-status-bar { background: linear-gradient(90deg, #bdbdbd, #9e9e9e); }
        /* 状态整体染色（2026-11-03：卡片顶部轻染 + hover 边框染状态色，任务之间层次分明） */
        .task-grid-card[data-status="pending"] { background: linear-gradient(180deg, #fff8ec, #fff 96px); }
        .task-grid-card[data-status="in_progress"] { background: linear-gradient(180deg, #eef4ff, #fff 96px); }
        .task-grid-card[data-status="completed"] { background: linear-gradient(180deg, #effaf0, #fff 96px); }
        .task-grid-card[data-status="ended"] { background: linear-gradient(180deg, #fff1ea, #fff 96px); }
        .task-grid-card[data-status="cancelled"] { background: linear-gradient(180deg, #f7f8fa, #fff 96px); }
        .task-grid-card[data-status="pending"]:hover { border-color: #ffcc80; }
        .task-grid-card[data-status="in_progress"]:hover { border-color: #90caf9; }
        .task-grid-card[data-status="completed"]:hover { border-color: #a5d6a7; }
        .task-grid-card[data-status="ended"]:hover { border-color: #ffab91; }
        .task-grid-card[data-status="cancelled"]:hover { border-color: #d6d6d6; }
        /* 卡片内容区 */
        .task-grid-card .grid-card-body {
            padding: 16px 18px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
            min-height: 0;
        }
        /* 标题行 */
        .task-grid-card .grid-card-title {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
        }
        .task-grid-card .grid-card-title .title-text {
            font-size: 15px;
            font-weight: 600;
            color: #2c3e50;
            line-height: 1.4;
            flex: 1;
            /* 2026-11-03 取消 2 行截断：任务名完整展示 */
            word-break: break-word;
        }
        /* 描述（2026-11-03 取消 2 行截断：卡片信息不减少，完整展示） */
        .task-grid-card .grid-card-desc {
            font-size: 12px;
            color: #95a5a6;
            line-height: 1.5;
            word-break: break-word;
            min-height: 18px;
        }
        /* 子任务标签（2026-11-03 取消 56px 高度裁切：标签全部展示） */
        .task-grid-card .grid-subtask-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        /* 进度区 */
        .task-grid-card .grid-progress-section {
            background: #f8f9fc;
            border-radius: 8px;
            padding: 10px 12px;
        }
        .task-grid-card .grid-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: #7f8c8d;
            margin-bottom: 6px;
        }
        .task-grid-card .grid-progress-header .progress-count {
            font-weight: 600;
            color: var(--theme-color, #667eea);
        }
        .task-grid-card .grid-progress-bar {
            height: 6px;
            background: #e8eaf0;
            border-radius: 3px;
            overflow: hidden;
        }
        .task-grid-card .grid-progress-bar .fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.4s ease;
        }
        .task-grid-card[data-status="completed"] .grid-progress-bar .fill { background: linear-gradient(90deg, #66bb6a, #43a047); }
        .task-grid-card[data-status="in_progress"] .grid-progress-bar .fill { background: linear-gradient(90deg, #42a5f5, var(--theme-color, #667eea)); }
        .task-grid-card[data-status="ended"] .grid-progress-bar .fill { background: linear-gradient(90deg, #ff7043, #f4511e); }
        .task-grid-card[data-status="pending"] .grid-progress-bar .fill { background: linear-gradient(90deg, #ffa726, #ffb74d); }
        .task-grid-card[data-status="cancelled"] .grid-progress-bar .fill { background: #bdbdbd; }
        /* meta 信息 */
        .task-grid-card .grid-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 11px;
            color: #b0b8c5;
            padding-top: 6px;
            border-top: 1px solid #f0f2f7;
        }
        .task-grid-card .grid-card-meta span {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        /* 卡片 hover：标题染主题色强化可点感（2026-11-03 视觉微调） */
        .task-grid-card:hover .grid-card-title .title-text {
            color: var(--theme-color, #667eea);
        }
        /* 操作按钮区（2026-11-03 靠右对齐、紧凑胶囊按钮，不再平铺整行） */
        .task-grid-card .grid-card-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 10px 14px 12px;
            flex-shrink: 0;
            border-top: 1px solid #f0f2f7;
            margin: 0;
            background: #fff;
        }
        .task-grid-card .grid-card-actions button {
            flex: 0 0 auto;
            padding: 5px 14px;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            font-weight: 500;
            line-height: 1.4;
        }
        .task-grid-card .grid-card-actions button:hover {
            transform: translateY(-1px);
        }
        .task-grid-card .grid-card-actions button:active {
            transform: translateY(0);
        }
        .task-grid-card .grid-card-actions button:focus-visible {
            outline: 2px solid var(--theme-color, #667eea);
            outline-offset: 2px;
        }
        .task-grid-card .grid-card-actions .btn-task-edit {
            background: #eef2ff;
            color: var(--theme-color, #667eea);
        }
        .task-grid-card .grid-card-actions .btn-task-edit:hover {
            background: var(--theme-color, #667eea);
            color: #fff;
        }
        .task-grid-card .grid-card-actions .btn-task-delete {
            background: #fff5f5;
            color: #e53e3e;
        }
        .task-grid-card .grid-card-actions .btn-task-delete:hover {
            background: #e53e3e;
            color: #fff;
        }
        .task-grid-card .grid-card-actions .btn-task-tracking {
            background: #e8f5e9;
            color: #2e7d32;
        }
        .task-grid-card .grid-card-actions .btn-task-tracking:hover {
            background: #2e7d32;
            color: #fff;
        }
        /* 网格视图下隐藏列表样式子任务标签，使用网格专用样式 */
        .task-grid-card .grid-subtask-tags .subtask-tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            border: 1px solid #e0e0e0;
            background: #f5f5f5;
            color: #666;
        }
        .task-grid-card .grid-subtask-tags .subtask-tag.type-1 { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
        .task-grid-card .grid-subtask-tags .subtask-tag.type-2 { background: #fce4ec; color: #c2185b; border-color: #f8bbd0; }
        .task-grid-card .grid-subtask-tags .subtask-tag.type-3 { background: #fff3e0; color: #e65100; border-color: #ffe0b2; }
        .task-grid-card .grid-subtask-tags .subtask-tag.type-4 { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
        /* 练习题子任务网格视图标签样式（type=6） */
        .task-grid-card .grid-subtask-tags .subtask-tag.type-6 { background: #e0f2f1; color: #00695c; border-color: #b2dfdb; }
        /* 段落跟读子任务网格视图标签样式（type=7） */
        .task-grid-card .grid-subtask-tags .subtask-tag.type-7 { background: #e8eaf6; color: #3949ab; border-color: #c5cae9; }
        /* 阅读子任务网格视图标签样式（type=8，2026-10-12 新增） */
        .task-grid-card .grid-subtask-tags .subtask-tag.type-8 { background: #efebe9; color: #6d4c41; border-color: #d7ccc8; }
        /* 三方课件子任务网格视图标签样式（type=9，2026-10-12 新增） */
        .task-grid-card .grid-subtask-tags .subtask-tag.type-9 { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
        /* 状态徽章实心化（2026-11-03：白字实心色块，两视图共用，辨识度更强） */
        .task-status {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
            letter-spacing: 0.5px;
        }
        .task-status.pending {
            background: linear-gradient(135deg, #ffa726, #f57c00);
        }
        .task-status.in_progress {
            background: linear-gradient(135deg, #42a5f5, #1e88e5);
        }
        .task-status.completed {
            background: linear-gradient(135deg, #66bb6a, #43a047);
        }
        .task-status.cancelled {
            background: #bdbdbd;
            text-decoration: line-through;
        }
        .task-status.ended {
            background: linear-gradient(135deg, #ff7043, #f4511e);
        }
        .task-actions {
            display: flex;
            gap: 6px;
        }
        .task-actions button {
            padding: 4px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }
        .task-actions .btn-task-edit {
            background: #e8f5e9;
            color: #2e7d32;
        }
        .task-actions .btn-task-edit:hover {
            background: #c8e6c9;
        }
        .task-actions .btn-task-delete {
            background: #ffebee;
            color: #c62828;
        }
        .task-actions .btn-task-delete:hover {
            background: #ffcdd2;
        }
        .task-actions .btn-task-tracking {
            background: #e3f2fd;
            color: #1565c0;
        }
        .task-actions .btn-task-tracking:hover {
            background: #bbdefb;
        }
        .subtask-list {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .subtask-tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            background: #f5f5f5;
            color: #666;
            border: 1px solid #e0e0e0;
        }
        .subtask-tag.type-1 { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
        .subtask-tag.type-2 { background: #fce4ec; color: #c2185b; border-color: #f8bbd0; }
        .subtask-tag.type-3 { background: #fff3e0; color: #e65100; border-color: #ffe0b2; }
        .subtask-tag.type-4 { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
        /* 练习题子任务标签样式（type=6） */
        .subtask-tag.type-6 { background: #e0f2f1; color: #00695c; border-color: #b2dfdb; }
        /* 段落跟读子任务标签样式（type=7） */
        .subtask-tag.type-7 { background: #e8eaf6; color: #3949ab; border-color: #c5cae9; }
        /* 阅读子任务标签样式（type=8，2026-10-12 新增） */
        .subtask-tag.type-8 { background: #efebe9; color: #6d4c41; border-color: #d7ccc8; }
        /* 三方课件子任务标签样式（type=9，2026-10-12 新增） */
        .subtask-tag.type-9 { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
        /* ==================== 句子范围选择弹层（复述/段落跟读，仿编辑文章「选择句子范围」点选交互） ==================== */
        .sentence-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1100; /* 高于任务编辑弹窗层级(1000)，覆盖在其上方 */
        }
        .sentence-picker-overlay.show {
            display: flex;
        }
        .sentence-picker {
            background: #fff;
            border-radius: 10px;
            width: 560px;
            max-width: 92%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
            overflow: hidden;
        }
        .sentence-picker-header {
            padding: 14px 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }
        .sentence-picker-title {
            font-size: 15px;
            font-weight: 600;
        }
        .sentence-picker-sub {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
            line-height: 1.6;
        }
        .sentence-picker-close {
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            color: #999;
            padding: 0 4px;
            line-height: 1;
        }
        .sentence-picker-close:hover {
            color: #333;
        }
        .sentence-picker-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px 14px;
            background: #fafbfc;
        }
        .sentence-picker-empty {
            text-align: center;
            color: #999;
            padding: 34px 0;
            font-size: 13px;
        }
        /* 句子条目：编号 + 英文 + 中文 + 时间 + 状态标签（起/止） */
        .sentence-picker-item {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid transparent;
            margin-bottom: 4px;
            font-size: 13px;
            background: #fff;
        }
        .sentence-picker-item:hover {
            border-color: #4a90d9;
            background: #f0f7ff;
        }
        .sentence-picker-item .sp-no {
            flex-shrink: 0;
            color: #888;
            font-size: 12px;
            min-width: 36px;
        }
        .sentence-picker-item .sp-text {
            flex: 1;
            line-height: 1.5;
            word-break: break-word;
        }
        .sentence-picker-item .sp-cn {
            color: #4a90d9;
            font-size: 12px;
        }
        .sentence-picker-item .sp-time {
            color: #bbb;
            font-size: 11px;
            flex-shrink: 0;
        }
        .sentence-picker-item .sp-tag {
            flex-shrink: 0;
            font-size: 11px;
            padding: 1px 6px;
            border-radius: 4px;
            background: #eee;
            color: #666;
        }
        /* 已选中的起始句/结束句：绿色高亮 */
        .sentence-picker-item.is-start,
        .sentence-picker-item.is-end {
            background: #e8f5e9;
            border-color: #4CAF50;
        }
        .sentence-picker-item.is-start:hover,
        .sentence-picker-item.is-end:hover {
            background: #e8f5e9;
        }
        .sentence-picker-item.is-start .sp-tag,
        .sentence-picker-item.is-end .sp-tag {
            background: #4CAF50;
            color: #fff;
        }
        /* 已选范围内的句子：浅绿底 */
        .sentence-picker-item.is-inrange {
            background: #f2f9f3;
            border-color: #a5d6a7;
        }
        .sentence-picker-footer {
            padding: 12px 16px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
        .sentence-picker-hint {
            font-size: 12px;
            color: #666;
            line-height: 1.6;
            flex: 1;
        }
        .sentence-picker-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        .sentence-picker-actions .sp-btn {
            padding: 6px 14px;
            border-radius: 6px;
            border: 1px solid var(--theme-color, #667eea);
            background: var(--theme-color, #667eea);
            color: #fff;
            font-size: 12px;
            cursor: pointer;
        }
        .sentence-picker-actions .sp-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .sentence-picker-actions .sp-btn-plain {
            background: #fff;
            color: #666;
            border-color: #ddd;
        }
        .sentence-picker-actions .sp-btn-plain:hover {
            border-color: #bbb;
        }
        /* 内容浏览器中「选择句子范围」入口按钮（复述/段落跟读） */
        .sp-open-btn {
            padding: 6px 16px;
            border-radius: 6px;
            border: 1px solid #4a90d9;
            background: #fff;
            color: #4a90d9;
            font-size: 12px;
            cursor: pointer;
        }
        .sp-open-btn:hover {
            background: #f0f7ff;
        }
        .empty-hint {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        .empty-hint .icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.3;
        }
        /* ===== 分页 ===== */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 16px 0;
            flex-shrink: 0;
        }
        .page-btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            background: #fff;
            transition: all 0.2s;
        }
        .page-btn:hover:not(:disabled) {
            background: #f5f7fa;
        }
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .page-info {
            font-size: 14px;
            color: #666;
            margin: 0 4px;
        }
        /* ===== 模态框通用 ===== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal-overlay.show {
            display: flex;
        }
        .modal {
            background: #fff;
            border-radius: 12px;
            width: 500px;
            max-width: 90%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: modalIn 0.2s ease;
        }
        @keyframes modalIn {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .modal-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .modal-close {
            width: 28px;
            height: 28px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .modal-close:hover {
            background: #e0e0e0;
        }
        .modal-body {
            flex: 1;
            overflow-y: auto;
        }
        .form-group {
            margin-bottom: 16px;
        }
        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 6px;
        }
        .form-group label.required::after {
            content: '*';
            color: #f5222d;
            margin-left: 4px;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--theme-color, #667eea);
        }
        .form-group textarea {
            min-height: 80px;
            resize: vertical;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .modal-footer {
            padding: 16px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            flex-shrink: 0;
        }
        .btn-cancel {
            padding: 10px 20px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-submit {
            padding: 10px 20px;
            background: var(--theme-color, #667eea);
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-submit:hover {
            background: var(--theme-color-hover, #5a6fd6);
        }
        /* ===== 任务弹窗 - 左右分栏布局 ===== */
        .modal-lg {
            width: 950px;
            max-width: 95%;
        }
        .modal-split {
            display: flex;
            gap: 0;
            height: 65vh;
            min-height: 420px;
        }
        .modal-left {
            width: 45%;
            overflow-y: auto;
            padding: 20px;
            border-right: 1px solid #e5e7eb;
        }
        .modal-right {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #fafbfc;
        }
        /* 子任务编辑区 */
        .subtask-form-item {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .subtask-form-item:hover {
            border-color: #c7d2fe;
        }
        .subtask-form-item.active-for-edit {
            border-color: var(--theme-color, #667eea);
            background: #eef2ff;
        }
        .subtask-form-item .subtask-header {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .subtask-form-item .subtask-no {
            font-weight: 600;
            color: #333;
            font-size: 13px;
        }
        .subtask-form-item .btn-remove-subtask {
            background: #ffebee;
            border: none;
            color: #c62828;
            padding: 2px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin-left: auto;
        }
        .subtask-form-item .btn-remove-subtask:hover {
            background: #ffcdd2;
        }
        .subtask-action-row {
            margin-top: 8px;
        }
        .btn-add-subtask {
            padding: 8px 16px;
            border: 1px dashed var(--theme-color, #667eea);
            background: #fff;
            color: var(--theme-color, #667eea);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            width: 100%;
            transition: all 0.2s;
        }
        .btn-add-subtask:hover {
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.05);
        }
        .subtask-type-badge {
            display: inline-block;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 3px;
            font-weight: 500;
        }
        .subtask-type-badge.type-1 { background: #e3f2fd; color: #1565c0; }
        .subtask-type-badge.type-2 { background: #e8f5e9; color: #2e7d32; }
        .subtask-type-badge.type-3 { background: #fff3e0; color: #e65100; }
        .subtask-type-badge.type-4 { background: #e8f5e9; color: #2e7d32; }
        /* 复述子任务徽章样式 */
        .subtask-type-badge.type-5 { background: #f3e5f5; color: #7b1fa2; }
        /* 练习题子任务徽章样式（type=6） */
        .subtask-type-badge.type-6 { background: #e0f2f1; color: #00695c; }
        /* 段落跟读子任务徽章样式（type=7） */
        .subtask-type-badge.type-7 { background: #e8eaf6; color: #3949ab; }
        /* 阅读子任务徽章样式（type=8，2026-10-12 新增） */
        .subtask-type-badge.type-8 { background: #efebe9; color: #6d4c41; }
        /* 三方课件子任务徽章样式（type=9，2026-10-12 新增） */
        .subtask-type-badge.type-9 { background: #e3f2fd; color: #1565c0; }
        .subtask-preview {
            font-size: 11px;
            color: #666;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /* 右侧内容浏览器 */
        .content-browser {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .current-subtask-hint {
            font-size: 12px;
            color: var(--theme-color, #667eea);
            background: #eef2ff;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 4px;
            border: 1px solid #c7d2fe;
        }
        /* ===== 2026-10-03 任务弹窗 UI 美化（仅视觉，不改功能） ===== */
        /* 左栏分区卡片：任务信息 / 时间设置 / 指定范围 / 子任务列表 */
        .modal-split { height: 70vh; }
        .modal-left { padding: 16px 18px; background: #f7f8fc; }
        .modal-right { background: #fafbfd; display: flex; flex-direction: column; overflow: hidden; }
        .modal-right .content-browser { flex: 1; min-height: 0; }
        #contentBrowserPlaceholder { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .ts-card {
            background: #fff;
            border: 1px solid #e8ebf3;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 12px;
            box-shadow: 0 1px 3px rgba(30, 40, 90, 0.04);
        }
        .ts-card .form-group:last-child { margin-bottom: 0; }
        .ts-card-title {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            font-weight: 600;
            color: #3a4264;
            margin-bottom: 12px;
        }
        .ts-card-title::before {
            content: '';
            width: 3px;
            height: 12px;
            border-radius: 2px;
            background: var(--theme-color, #667eea);
        }
        .ts-card-title .ts-title-tip {
            font-weight: normal;
            font-size: 11px;
            color: #9aa3b8;
            margin-left: auto;
        }
        .modal-left .form-group > label:not(.seg-label) {
            font-size: 12px;
            color: #5a6178;
            margin-bottom: 6px;
        }
        .modal-left input[type="text"],
        .modal-left input[type="date"],
        .modal-left input[type="number"],
        .modal-left select,
        .modal-left textarea {
            height: 36px;
            border: 1px solid #e2e6f0;
            border-radius: 8px;
            background: #fbfcfe;
            font-size: 13px;
            padding: 0 10px;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .modal-left textarea { height: auto; padding: 8px 10px; line-height: 1.5; }
        .modal-left input:focus, .modal-left select:focus, .modal-left textarea:focus {
            border-color: var(--theme-color, #667eea);
            box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb, 102, 126, 234), 0.12);
            outline: none;
        }
        /* 分段选择器：整班 / 指定学生（radio 仅作状态载体，视觉隐藏） */
        .seg-control {
            display: inline-flex;
            background: #eef0f7;
            border-radius: 9px;
            padding: 3px;
            gap: 2px;
        }
        .seg-control input[type="radio"] { display: none; }
        .seg-control .seg-item span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 16px;
            border-radius: 7px;
            font-size: 12.5px;
            color: #6b7280;
            cursor: pointer;
            user-select: none;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .seg-control .seg-item span:hover { color: #3a4264; }
        .seg-control input:checked + span {
            background: #fff;
            color: var(--theme-color, #667eea);
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(30, 40, 90, 0.12);
        }
        .seg-hint {
            font-size: 11.5px;
            color: #8a92a6;
            margin-left: 10px;
            white-space: nowrap;
        }
        .seg-hint.has-selected { color: var(--theme-color, #667eea); font-weight: 600; }
        /* 指定学生面板 */
        .assign-students-panel {
            margin-top: 10px;
            border: 1px solid #e8ebf3;
            border-radius: 10px;
            background: #fbfcfe;
            max-height: 168px;
            overflow-y: auto;
            padding: 10px 12px;
        }
        .assign-all-row {
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: 1px dashed #e8ebf3;
        }
        .assign-all-row label, .assign-student-item {
            font-weight: normal !important;
            font-size: 12.5px !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .assign-student-item {
            padding: 4px 10px;
            border: 1px solid #e8ebf3;
            border-radius: 14px;
            background: #fff;
            transition: all 0.15s;
        }
        .assign-student-item:hover { border-color: var(--theme-color, #667eea); }
        .assign-student-item:has(input:checked) {
            border-color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.07);
            color: var(--theme-color, #667eea);
            font-weight: 600;
        }
        /* 子任务步进导航条 */
        .stepper-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            border: 1px solid #e8ebf3;
            border-radius: 10px;
            padding: 8px 10px;
            box-shadow: 0 1px 3px rgba(30, 40, 90, 0.04);
        }
        .step-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #e2e6f0;
            background: #fbfcfe;
            border-radius: 8px;
            color: #5a6178;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.15s;
            flex-shrink: 0;
            line-height: 1;
        }
        .step-btn:hover:not(:disabled) {
            border-color: var(--theme-color, #667eea);
            color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.06);
        }
        .step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
        .step-info {
            flex: 1;
            text-align: center;
            font-size: 12.5px;
            color: #5a6178;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .step-info b { color: var(--theme-color, #667eea); font-size: 14px; }
        .step-pos {
            font-size: 11px;
            background: #eef0f7;
            color: #6b7280;
            border-radius: 10px;
            padding: 2px 9px;
        }
        /* 子任务类型可视化选择（radio 图标卡片） */
        .type-picker {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 6px;
            flex: 1;
        }
        .type-picker input[type="radio"] { display: none; }
        .type-pick-item span {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 8px 2px 6px;
            border: 1.5px solid #e8ebf3;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            transition: all 0.15s;
            user-select: none;
        }
        .type-pick-item .tp-icon { font-size: 17px; line-height: 1; font-style: normal; }
        .type-pick-item .tp-name { font-size: 11px; color: #6b7280; font-style: normal; }
        .type-pick-item span:hover { border-color: #c7cff0; transform: translateY(-1px); }
        .type-pick-item input:checked + span {
            border-color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.07);
            box-shadow: 0 1px 4px rgba(var(--theme-color-rgb, 102, 126, 234), 0.18);
        }
        .type-pick-item input:checked + span .tp-name {
            color: var(--theme-color, #667eea);
            font-weight: 600;
        }
        .stepper-extra {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
            font-size: 12px;
            color: #5a6178;
        }
        .stepper-extra .st-label { color: #8a92a6; flex-shrink: 0; }
        .stepper-extra input[type="number"] {
            width: 56px;
            height: 28px;
            border: 1px solid #e2e6f0;
            border-radius: 7px;
            font-size: 12.5px;
            text-align: center;
            background: #fbfcfe;
        }
        /* 子任务列表卡片增强 */
        .subtask-form-item {
            border-radius: 10px;
            border: 1px solid #e8ebf3;
            background: #fff;
        }
        .subtask-form-item .subtask-no {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 22px;
            padding: 0 6px;
            border-radius: 6px;
            background: #eef0f7;
            font-size: 11.5px;
        }
        .subtask-form-item.active-for-edit .subtask-no { background: var(--theme-color, #667eea); color: #fff; }
        .subtask-form-item .btn-remove-subtask { border-radius: 6px; }
        /* 子任务拖动排序（2026-11-02 新增） */
        .subtask-form-item.dragging {
            opacity: 0.55;
            border-style: dashed;
        }
        .subtask-form-item .subtask-drag-handle {
            flex-shrink: 0;
            color: #a8b0c2;
            font-size: 14px;
            line-height: 1;
            cursor: grab;
            user-select: none;
        }
        .subtask-form-item .subtask-drag-handle:active { cursor: grabbing; }
        /* 右侧内容步骤标题 */
        .modal-right .browser-section {
            border: 1px solid #e8ebf3;
            border-radius: 10px;
            background: #fff;
        }
        .modal-right .browser-section-title {
            font-size: 12px;
            color: #3a4264;
            font-weight: 600;
        }
        /* ===== 右侧多步向导（类型→系列→专辑→文章→具体选择，每步一屏滑动切换） ===== */
        .wizard-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
        .wizard-pane {
            position: absolute; inset: 0; overflow-y: auto;
            transform: translateX(60px); opacity: 0; pointer-events: none;
            transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
        }
        .wizard-pane.wp-left { transform: translateX(-60px); }
        .wizard-pane.wp-active { transform: none; opacity: 1; pointer-events: auto; }
        .wizard-step-tip { font-size: 12px; color: #8a92a6; margin-bottom: 12px; }
        /* 第1步：类型大卡片 */
        .type-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .type-card input { display: none; }
        .type-card span {
            display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
            padding: 20px 8px 14px; border: 1.5px solid #e8ebf3; border-radius: 14px; background: #fff;
            cursor: pointer; transition: all .18s; height: 100%; box-sizing: border-box;
        }
        .type-card .tc-icon { font-size: 30px; line-height: 1; font-style: normal; }
        .type-card b { font-size: 13.5px; color: #3a4264; font-weight: 600; }
        .type-card em { font-size: 11px; color: #9aa3b8; font-style: normal; line-height: 1.4; }
        .type-card span:hover { border-color: #c7cff0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30, 40, 90, 0.08); }
        .type-card input:checked + span {
            border-color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.06);
            box-shadow: 0 4px 14px rgba(var(--theme-color-rgb, 102, 126, 234), 0.16);
        }
        .type-card input:checked + span b { color: var(--theme-color, #667eea); }
        /* 步骤导航条：pills + 上一步 */
        .wizard-nav {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            background: #fff; border: 1px solid #e8ebf3; border-radius: 10px;
            padding: 7px 10px; flex-shrink: 0;
        }
        .wz-pill {
            font-size: 12px; color: #8a92a6; background: #f3f5fa; border-radius: 14px;
            padding: 4px 12px; white-space: nowrap; transition: all .15s;
        }
        .wz-pill.done { color: var(--theme-color, #667eea); background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.08); cursor: pointer; }
        .wz-pill.done:hover { background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.16); }
        .wz-pill.cur { color: #fff; background: var(--theme-color, #667eea); font-weight: 600; }
        .wz-pill.lock { opacity: 0.55; }
        .wizard-nav .wz-back { margin-right: auto; }
        .wz-back {
            border: 1px solid #e2e6f0; background: #fbfcfe; border-radius: 8px;
            padding: 6px 12px; font-size: 12px; color: #5a6178; cursor: pointer;
            flex-shrink: 0; transition: all .15s;
        }
        .wz-back:hover { border-color: var(--theme-color, #667eea); color: var(--theme-color, #667eea); }
        .wizard-nav .wz-hint { font-size: 11.5px; color: #9aa3b8; margin-left: auto; }
        /* 各步 pane 顶条 */
        .wp-topbar {
            display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
            background: #fff; border: 1px solid #e8ebf3; border-radius: 10px; padding: 9px 12px;
            position: sticky; top: 0; z-index: 5;
        }
        .wp-topbar b { font-size: 13.5px; color: #3a4264; }
        .wp-topbar .wp-desc { font-size: 11.5px; color: #9aa3b8; }
        /* 第1步底部：完成次数设置行 */
        .type-extra {
            display: flex; align-items: center; gap: 8px; margin-top: 14px;
            background: #fff; border: 1px solid #e8ebf3; border-radius: 10px; padding: 9px 12px;
        }
        .type-extra .st-label { font-size: 12px; color: #5a6178; }
        .type-extra input {
            width: 64px; height: 30px; border: 1px solid #e2e6f0; border-radius: 7px;
            font-size: 12.5px; text-align: center; background: #fbfcfe;
        }
        /* 系列/专辑/文章列表：网格卡片化，充分利用横向空间 */
        #browserSeries, #browserAlbums, #browserArticles {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 9px;
        }
        #browserSeries .browser-item, #browserAlbums .browser-item, #browserArticles .browser-item {
            border: 1.5px solid #e8ebf3; border-radius: 10px; padding: 12px 12px; background: #fff;
            font-size: 12.5px; color: #3a4264; cursor: pointer; transition: all .15s;
            line-height: 1.5; word-break: break-all; box-sizing: border-box;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        #browserSeries .browser-item:hover, #browserAlbums .browser-item:hover, #browserArticles .browser-item:hover {
            border-color: #c7cff0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30, 40, 90, 0.08);
        }
        #browserSeries .browser-item.active, #browserAlbums .browser-item.active, #browserArticles .browser-item.active {
            border-color: var(--theme-color, #667eea); color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234), 0.06); font-weight: 600;
        }
        .wizard-step-ind {
            font-size: 11px; color: #8a92a6; white-space: nowrap;
        }
        /* ===== 美化段结束 ===== */
        .browser-section {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
            overflow: hidden;
        }
        .browser-section-title {
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            background: #f3f4f6;
            border-bottom: 1px solid #e5e7eb;
        }
        .browser-items {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 14px;
            max-height: 120px;
            overflow-y: auto;
        }
        .browser-item {
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #333;
            transition: all 0.15s;
            user-select: none;
        }
        .browser-item:hover {
            border-color: var(--theme-color, #667eea);
            background: #eef2ff;
        }
        .browser-item.active {
            border-color: var(--theme-color, #667eea);
            background: var(--theme-color, #667eea);
            color: #fff;
        }
        .sentence-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 8px 14px;
            max-height: 180px;
            overflow-y: auto;
        }
        .sentence-list label {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            font-size: 12px;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            line-height: 1.5;
            transition: background 0.15s;
        }
        .sentence-list label:hover {
            background: #f0f4ff;
        }
        .sentence-list label input[type="checkbox"] {
            margin-top: 2px;
            flex-shrink: 0;
        }
        .sentence-list label .sentence-text {
            color: #555;
        }
        .sentence-list label .sentence-idx {
            display: inline-block;
            min-width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background: #f3f4f6;
            border-radius: 4px;
            font-size: 10px;
            color: #999;
            margin-right: 4px;
            flex-shrink: 0;
        }
        /* 词汇选择列表（单词子任务 type=4） */
        .vocab-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .vocab-select-all {
            font-size: 11px;
            color: var(--theme-color, #667eea);
            cursor: pointer;
            user-select: none;
        }
        .vocab-select-all:hover {
            color: var(--theme-color-hover, #5a6fd6);
        }
        .vocab-list-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 14px;
            max-height: 200px;
            overflow-y: auto;
        }
        .vocab-word-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #333;
            transition: all 0.15s;
            user-select: none;
        }
        .vocab-word-item:hover {
            border-color: var(--theme-color, #667eea);
            background: #eef2ff;
        }
        .vocab-word-item.selected {
            border-color: #4caf50;
            background: #e8f5e9;
            color: #2e7d32;
        }
        .vocab-word-item .vocab-pos-tag {
            font-size: 10px;
            color: #999;
        }
        /* 已选择词汇区域（单词子任务 type=4 跨文章选词，2026-09-21 二次优化：
           常驻内容浏览器底部，扁平无嵌套边框盒，仅展示词汇名） */
        /* 2026-09-21 四次优化：已选择词汇区域与其他步骤区同款样式（browser-section），
           标题背景色不同（浅紫 #eef0fe）以区分汇总区 */
        .selected-vocab-area {
            margin-top: 10px;
        }
        .selected-vocab-area .selected-vocab-title {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            background: #eef0fe;
            color: #3d4265;
        }
        .selected-vocab-count {
            font-size: 12px;
            color: var(--theme-color, #667eea);
            font-weight: 600;
        }
        .selected-vocab-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 14px;
            max-height: 160px;
            overflow-y: auto;
        }
        .selected-vocab-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 6px 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            background: #fff;
            border: 1px solid #e0e3f5;
            color: #333;
        }
        .selected-vocab-item .sv-word {
            font-weight: 600;
            color: #333;
        }
        .selected-vocab-item .sv-remove {
            width: 16px;
            height: 16px;
            line-height: 14px;
            text-align: center;
            border-radius: 50%;
            background: #f0f0f0;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            user-select: none;
            flex-shrink: 0;
        }
        .selected-vocab-item .sv-remove:hover {
            background: #fee;
            color: #e53e3e;
        }
        .selected-vocab-list .sv-empty {
            font-size: 11px;
            color: #b0b3c7;
        }
        .selected-vocab-tip {
            padding: 0 14px 10px;
            font-size: 10px;
            color: #b0b3c7;
        }
        .selected-vocab-tip.is-ok {
            color: #4caf50;
        }
        /* 2026-09-21 四次优化：练习模式做成小按钮组，置于「已选择 N 个词汇」标题行内 */
        .word-mode-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }
        .word-mode-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--theme-color, #667eea);
            flex-shrink: 0;
        }
        .word-mode-pill {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            font-size: 11px;
            color: #4e5969;
            background: #fff;
            border: 1px solid #d9dce8;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }
        .word-mode-pill input[type="radio"] {
            display: none;
        }
        .word-mode-pill:hover {
            border-color: var(--theme-color, #667eea);
            color: var(--theme-color, #667eea);
        }
        .word-mode-pill.active {
            background: var(--theme-color, #667eea);
            border-color: var(--theme-color, #667eea);
            color: #fff;
            font-weight: 600;
        }
        /* 任务追踪 - 右侧滑入面板 */
        .tracking-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 999;
            display: none;
        }
        .tracking-overlay.show {
            display: block;
        }
        .tracking-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background: #fff;
            box-shadow: -8px 0 32px rgba(15,23,42,0.18);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transition: right 0.3s ease;
        }
        .tracking-panel.show {
            right: 0;
        }
        .tracking-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
            background: var(--theme-gradient-solid, linear-gradient(135deg, var(--theme-color, #667eea) 0%, #764ba2 100%));
            color: #fff;
        }
        .tracking-panel-header .tracking-title {
            font-size: 16px;
            font-weight: 600;
        }
        .tracking-panel-header .tracking-subtitle {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 2px;
        }
        .tracking-close-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .tracking-close-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        /* 标签页切换 */
        .tracking-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
            background: #f8f9fa;
        }
        .tracking-tab {
            flex: 1;
            padding: 12px 16px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .tracking-tab:hover {
            color: var(--theme-color, #667eea);
            background: rgba(var(--theme-color-rgb, 102, 126, 234),0.05);
        }
        .tracking-tab.active {
            color: var(--theme-color, #667eea);
            border-bottom-color: var(--theme-color, #667eea);
            background: #fff;
        }
        .tracking-body {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        /* 视图内容区 */
        .tracking-view {
            display: none;
            padding: 16px 20px;
            background: #f6f7fb;
        }
        .tracking-view.active {
            display: block;
        }
        /* 概览卡片 */
        .tracking-summary {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        .tracking-summary-card {
            flex: 1;
            background: #fff;
            border: 1px solid #e8eaff;
            border-radius: 10px;
            padding: 12px 16px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(15,23,42,0.04);
        }
        .tracking-summary-card .num {
            font-size: 24px;
            font-weight: 700;
            color: var(--theme-color, #667eea);
        }
        .tracking-summary-card .label {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        /* 进度条 */
        .tracking-progress-bar {
            display: flex;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            background: #eee;
            margin: 8px 0;
        }
        .tracking-progress-bar .fill {
            height: 100%;
            background: var(--theme-gradient-solid, linear-gradient(90deg, var(--theme-color, #667eea), #764ba2));
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        /* 任务视图 - 子任务卡片 */
        .tracking-subtask-card {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 12px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15,23,42,0.04);
            transition: all 0.2s;
        }
        .tracking-subtask-card:hover {
            border-color: #c7d2fe;
            box-shadow: 0 2px 8px rgba(var(--theme-color-rgb, 102, 126, 234),0.08);
        }
        .tracking-subtask-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .tracking-subtask-card .card-header .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }
        .tracking-subtask-card .card-header .badge.type-1 { background: #e3f2fd; color: #1565c0; }
        .tracking-subtask-card .card-header .badge.type-2 { background: #fce4ec; color: #c2185b; }
        .tracking-subtask-card .card-header .badge.type-3 { background: #fff3e0; color: #e65100; }
        .tracking-subtask-card .card-header .badge.type-4 { background: #e8f5e9; color: #2e7d32; }
        /* 追踪面板复述任务徽章样式 */
        .tracking-subtask-card .card-header .badge.type-5 { background: #f3e5f5; color: #7b1fa2; }
        /* 练习题子任务徽章样式（type=6，追踪面板） */
        .tracking-subtask-card .card-header .badge.type-6 { background: #e0f2f1; color: #00695c; }
        /* 段落跟读子任务徽章样式（type=7，追踪面板） */
        .tracking-subtask-card .card-header .badge.type-7 { background: #e8eaf6; color: #3949ab; }
        /* 阅读子任务徽章样式（type=8，追踪面板，2026-10-12 新增） */
        .tracking-subtask-card .card-header .badge.type-8 { background: #efebe9; color: #6d4c41; }
        /* 三方课件子任务徽章样式（type=9，追踪面板，2026-10-12 新增） */
        .tracking-subtask-card .card-header .badge.type-9 { background: #e3f2fd; color: #1565c0; }
        .tracking-subtask-card .card-header .title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        .tracking-subtask-card .card-header .progress-text {
            font-size: 13px;
            color: var(--theme-color, #667eea);
            font-weight: 600;
        }
        .tracking-subtask-card .student-list {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .tracking-subtask-card .student-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #555;
        }
        .tracking-subtask-card .student-tag.done {
            background: #e8f5e9;
            border-color: #a5d6a7;
            color: #2e7d32;
        }
        .tracking-subtask-card .student-tag .count-badge {
            display: inline-block;
            font-size: 10px;
            background: rgba(0,0,0,0.1);
            padding: 0 4px;
            border-radius: 3px;
            margin-left: 2px;
        }
        .tracking-subtask-card .student-tag.done .count-badge {
            background: rgba(46,125,50,0.15);
        }
        .tracking-subtask-card .student-tag .sentence-badge {
            display: inline-block;
            font-size: 10px;
            background: rgba(var(--theme-color-rgb, 102, 126, 234),0.12);
            color: var(--theme-color, #667eea);
            padding: 0 4px;
            border-radius: 3px;
            margin-left: 2px;
        }
        .tracking-subtask-card .student-tag.done .sentence-badge {
            background: rgba(var(--theme-color-rgb, 102, 126, 234),0.15);
        }
        /* 学生视图 - 学生卡片 */
        .tracking-student-card {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 10px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15,23,42,0.04);
            transition: all 0.2s;
        }
        .tracking-student-card:hover {
            border-color: #c7d2fe;
            box-shadow: 0 2px 8px rgba(var(--theme-color-rgb, 102, 126, 234),0.08);
        }
        .tracking-student-card .student-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .tracking-student-card .student-info .name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        .tracking-student-card .student-info .phone {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
        }
        .tracking-student-card .student-info .progress-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--theme-color, #667eea);
        }
        .tracking-student-card .subtask-progress-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .tracking-student-card .subtask-progress-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #555;
        }
        .tracking-student-card .subtask-progress-item.done {
            background: #e8f5e9;
            border-color: #a5d6a7;
            color: #2e7d32;
        }
        .tracking-student-card .subtask-progress-item .count-frac {
            font-size: 10px;
            opacity: 0.7;
        }
        .tracking-student-card .subtask-progress-item .count-frac.sentence {
            color: var(--theme-color, #667eea);
            opacity: 1;
        }
        /* 表格横向滚动容器（学生多时可左右滚动） */
        .checkin-st-table-wrap {
            overflow-x: auto;
            border: 1px solid #e5e8f0;
            border-radius: 10px;
            background: #fff;
        }
        .checkin-st-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 13px;
        }
        /* 表头：第一列学生，其余为子任务列 */
        .checkin-st-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f7f8fc;
            color: #4b5563;
            font-weight: 600;
            padding: 10px 8px;
            text-align: center;
            white-space: nowrap;
            border-bottom: 1px solid #e5e8f0;
        }
        /* 第一列表头（"学生"列） */
        .checkin-st-table thead th.st-col-student {
            text-align: left;
            padding-left: 14px;
            min-width: 130px;
        }
        /* 学生列（姓名+手机号，表头/数据行通用） */
        .checkin-st-table .st-stu-name {
            display: block;
            color: #303133;
        }
        .checkin-st-table .st-stu-phone {
            display: block;
            font-size: 11px;
            font-weight: 400;
            color: #a0a6b1;
        }
        /* 子任务列表头（类型徽章+标题） */
        .checkin-st-table thead th.st-task-col {
            min-width: 150px;
            max-width: 220px;
        }
        .checkin-st-table thead th.st-task-col .st-subtask-title {
            max-width: 190px;
            margin: 0 auto;
        }
        /* 数据行单元格 */
        .checkin-st-table tbody td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #f0f2f8;
            vertical-align: middle;
        }
        .checkin-st-table tbody tr:last-child td {
            border-bottom: none;
        }
        .checkin-st-table tbody tr:hover td {
            background: #fafbff;
        }
        /* 第一列：学生（姓名+手机号） */
        .checkin-st-table tbody td.st-col-student {
            text-align: left;
            padding-left: 14px;
            max-width: 200px;
        }
        .checkin-st-table .st-subtask-title {
            display: block;
            color: #303133;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .checkin-st-cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: default;
            border: none;
            padding: 0;
            background: transparent;
        }
        .checkin-st-cell.done {
            background: #22c55e;
            color: #fff;
            cursor: pointer;
        }
        .checkin-st-cell.done:hover {
            background: #16a34a;
            transform: scale(1.12);
        }
        .checkin-st-cell.progress {
            background: #fff3e0;
            color: #f59e0b;
            cursor: pointer;
        }
        .checkin-st-cell.progress:hover {
            background: #ffe8c7;
            transform: scale(1.12);
        }
        /* 未开始：空心灰点，不可点击 */
        .checkin-st-cell.none {
            width: 10px;
            height: 10px;
            background: #e2e6ef;
        }
        /* 未开始但可点（2026-10-20 学生视图：句子类任务未开始也可查看句子清单）——button 形态灰点 */
        button.checkin-st-cell.none {
            cursor: pointer;
            transition: transform 0.15s ease, background 0.15s ease;
        }
        button.checkin-st-cell.none svg {
            display: none;
        }
        button.checkin-st-cell.none:hover {
            background: #b9c2d8;
            transform: scale(1.35);
        }
        /* 单元格点击态过渡 */
        .checkin-st-cell.done,
        .checkin-st-cell.progress {
            transition: transform 0.15s ease, background 0.15s ease;
        }
        .checkin-st-cell svg {
            width: 14px;
            height: 14px;
        }
        .checkin-st-cell.progress svg {
            width: 12px;
            height: 12px;
        }
        /* 响应式 */
        @media (max-width: 768px) {
            .tracking-panel {
                width: 85%;
                right: -85%;
            }
        }

        /* ====== 评分详情弹窗 ====== */
        .detail-btn {
            display: inline-block;
            margin-left: 4px;
            padding: 1px 6px;
            font-size: 10px;
            color: var(--theme-color, #667eea);
            background: #eef1ff;
            border: 1px solid #d0d5f0;
            border-radius: 3px;
            cursor: pointer;
            vertical-align: middle;
            line-height: 1.6;
            transition: all 0.15s;
        }
        .detail-btn:hover {
            background: #dde3ff;
            border-color: var(--theme-color, #667eea);
        }
        .detail-btn-sm {
            display: inline-block;
            margin-left: 3px;
            padding: 0 5px;
            font-size: 10px;
            color: var(--theme-color, #667eea);
            background: #eef1ff;
            border: 1px solid #d0d5f0;
            border-radius: 3px;
            cursor: pointer;
            vertical-align: middle;
            line-height: 1.6;
            transition: all 0.15s;
        }
        .detail-btn-sm:hover {
            background: #dde3ff;
            border-color: var(--theme-color, #667eea);
        }
        /* 遮罩层 */
        .detail-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .detail-overlay.active {
            display: flex;
        }
        .detail-modal {
            background: #fff;
            border-radius: 10px;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .detail-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 20px;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
        }
        .detail-modal-header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #333;
        }
        .detail-modal-header .close-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .detail-modal-header .close-btn:hover {
            background: #eee;
            color: #333;
        }
        .detail-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 20px;
        }
        /* 句子条目 */
        .detail-sentence-item {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .detail-sentence-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: #f9fafb;
            cursor: pointer;
            transition: background 0.1s;
            user-select: none;
        }
        .detail-sentence-header:hover {
            background: #f0f1f5;
        }
        .detail-sentence-header .sentence-info {
            flex: 1;
            min-width: 0;
        }
        .detail-sentence-header .sentence-num {
            font-size: 12px;
            font-weight: 600;
            color: var(--theme-color, #667eea);
            margin-right: 6px;
        }
        .detail-sentence-header .sentence-text {
            font-size: 12px;
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .detail-sentence-header .sentence-best {
            flex-shrink: 0;
            margin-left: 10px;
            font-size: 12px;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 10px;
        }
        .score-high { color: #10b981; background: #d1fae5; }
        .score-mid { color: #f59e0b; background: #fef3c7; }
        .score-low { color: #ef4444; background: #fee2e2; }

        /* ========== 单词拼写详情样式 ========== */
        .summary-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            background: #eef1f7;
            border-radius: 14px;
            font-size: 12px;
            color: #555;
        }
        .summary-chip strong {
            font-size: 14px;
            color: #333;
        }
        .word-spell-item {
            margin-bottom: 8px;
            border: 1px solid #e0e3eb;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
        }
        .word-spell-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            cursor: pointer;
            background: #f8f9fd;
            transition: background 0.15s;
        }
        .word-spell-header:hover {
            background: #eef1f7;
        }
        .word-spell-info {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            flex: 1;
            min-width: 0;
        }
        .word-spell-word {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Menlo', 'Consolas', monospace;
        }
        .word-spell-correct { color: #10b981; }
        .word-spell-wrong { color: #ef4444; }
        .word-spell-phonetic {
            font-size: 12px;
            color: #888;
            font-family: 'Times New Roman', serif;
        }
        .word-spell-trans {
            font-size: 12px;
            color: #666;
        }
        .word-spell-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 1px 8px;
            border-radius: 8px;
        }
        .spell-arrow {
            font-size: 11px;
            color: #999;
            transition: transform 0.2s;
        }
        .spell-arrow.open {
            transform: rotate(90deg);
        }
        .word-spell-body {
            display: none;
            padding: 8px 12px 12px;
            border-top: 1px solid #e5e7eb;
        }
        .word-spell-body.expanded {
            display: block;
        }
        .attempt-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .attempt-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 8px;
            border-radius: 6px;
            font-size: 12px;
            background: #f9fafb;
        }
        .attempt-correct {
            border-left: 3px solid #10b981;
        }
        .attempt-wrong {
            border-left: 3px solid #ef4444;
            background: #fff5f5;
        }
        .attempt-num {
            font-size: 11px;
            color: #999;
            min-width: 36px;
        }
        .attempt-spelling {
            font-size: 13px;
            font-weight: 600;
            font-family: 'Menlo', 'Consolas', monospace;
            color: #e53e3e;
        }
        .attempt-correct .attempt-spelling {
            color: #10b981;
        }
        .attempt-arrow {
            color: #ccc;
            font-size: 14px;
        }
        .attempt-correct-word {
            font-size: 13px;
            font-weight: 700;
            font-family: 'Menlo', 'Consolas', monospace;
            color: #10b981;
        }
        .attempt-accuracy {
            font-size: 11px;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 6px;
            margin-left: auto;
        }
        .attempt-time {
            font-size: 10px;
            color: #aaa;
            white-space: nowrap;
        }

        /* 听写详情专用样式 */
        .attempt-letters {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 1px;
            padding: 2px 4px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e5e7eb;
            font-family: 'Menlo', 'Consolas', monospace;
            font-size: 15px;
            line-height: 1.6;
        }
        .dict-letter {
            display: inline-block;
            min-width: 0.6em;
            text-align: center;
            padding: 0 1px;
        }
        .letter-correct {
            color: #10b981;
        }
        .letter-wrong {
            color: #ef4444;
            font-weight: 700;
            background: #fee2e2;
            border-radius: 2px;
        }

        .dict-sentence-num {
            font-size: 12px;
            font-weight: 700;
            color: #805ad5;
            background: #ede9fe;
            padding: 0 8px;
            border-radius: 6px;
            min-width: 28px;
            text-align: center;
        }
        .dict-sentence-text {
            font-size: 13px;
            color: #444;
            max-width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'Georgia', 'Times New Roman', serif;
        }

        .detail-sentence-body {
            display: none;
            padding: 10px 12px;
            border-top: 1px solid #e5e7eb;
            background: #fff;
        }
        .detail-sentence-body.expanded {
            display: block;
        }
        /* 评分卡片 */
        .score-cards {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .score-card {
            flex: 1;
            min-width: 80px;
            text-align: center;
            padding: 6px 4px;
            border-radius: 6px;
            background: #f3f4f6;
        }
        .score-card .label {
            font-size: 10px;
            color: #999;
        }
        .score-card .value {
            font-size: 16px;
            font-weight: 700;
            color: #333;
        }
        /* 原始数据切换 */
        .raw-toggle {
            font-size: 11px;
            color: var(--theme-color, #667eea);
            cursor: pointer;
            user-select: none;
            padding: 2px 0;
            display: inline-block;
        }
        .raw-toggle:hover {
            text-decoration: underline;
        }
        .raw-json {
            display: none;
            margin-top: 6px;
            padding: 10px;
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            font-family: 'Menlo', 'Monaco', monospace;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 300px;
            overflow-y: auto;
        }
        .raw-json.show {
            display: block;
        }
        /* 多次评分 */
        .attempt-label {
            font-size: 11px;
            color: var(--theme-color, #667eea);
            font-weight: 600;
            margin: 6px 0 4px;
        }

        /* ====== 有道云原始数据结构化展示 ====== */
        .raw-section {
            margin-top: 8px;
            border: 1px solid #e0e3eb;
            border-radius: 6px;
            overflow: hidden;
            background: #fafbfc;
        }
        .raw-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            background: #f0f2f7;
            font-size: 11px;
            font-weight: 600;
            color: #444;
            cursor: pointer;
            user-select: none;
        }
        .raw-section-header:hover {
            background: #e8ebf3;
        }
        .raw-section-header .arrow {
            font-size: 10px;
            transition: transform 0.15s;
        }
        .raw-section-header .arrow.open {
            transform: rotate(90deg);
        }
        .raw-section-body {
            display: none;
            padding: 8px 10px;
        }
        .raw-section-body.open {
            display: block;
        }
        /* 元信息行 */
        .raw-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px dashed #e0e3eb;
        }
        .raw-meta-item {
            font-size: 11px;
            color: #666;
        }
        .raw-meta-item strong {
            color: #333;
            margin-right: 3px;
        }
        /* 单词表格 */
        .word-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
        }
        .word-table th {
            text-align: left;
            padding: 4px 6px;
            background: #eef1f7;
            color: #555;
            font-weight: 600;
            border-bottom: 1px solid #dce0e8;
            white-space: nowrap;
        }
        .word-table td {
            padding: 4px 6px;
            border-bottom: 1px solid #f0f2f7;
            vertical-align: middle;
        }
        .word-table td:nth-child(2) {
            /* 单词列，较长的单词可换行 */
            white-space: normal;
            word-break: break-word;
        }
        .word-table td:nth-child(5),
        .word-table td:nth-child(6) {
            /* 音素列、操作列，内容紧凑不折行 */
            white-space: nowrap;
        }
        .word-table tr:hover td {
            background: #f8f9fd;
        }
        /* 音素展开行 */
        .phoneme-row {
            display: none;
            background: #f5f7fc !important;
        }
        .phoneme-row.open {
            display: table-row;
        }
        .phoneme-row td {
            padding: 6px 10px 6px 30px;
        }
        .phoneme-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .phoneme-chip {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 10px;
            min-width: 38px;
        }
        .phoneme-chip .ph-symbol {
            font-weight: 700;
            font-family: 'Menlo', 'Consolas', monospace;
            font-size: 12px;
        }
        .phoneme-chip .ph-score {
            font-size: 9px;
            margin-top: 1px;
        }
        .phoneme-correct {
            background: #d1fae5;
            color: #065f46;
        }
        .phoneme-wrong {
            background: #fee2e2;
            color: #991b1b;
        }
        .phoneme-partial {
            background: #fef3c7;
            color: #92400e;
        }
        .pron-badge {
            display: inline-block;
            padding: 0 5px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
        }
        .pron-badge-high { background: #d1fae5; color: #065f46; }
        .pron-badge-mid { background: #fef3c7; color: #92400e; }
        .pron-badge-low { background: #fee2e2; color: #991b1b; }
        .word-expand-btn {
            color: var(--theme-color, #667eea);
            cursor: pointer;
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 3px;
            border: 1px solid #d0d5f0;
            background: #eef1ff;
            user-select: none;
        }
        .word-expand-btn:hover {
            background: #dde3ff;
        }
        .raw-toggle-link {
            color: var(--theme-color, #667eea);
            cursor: pointer;
            font-size: 10px;
            user-select: none;
        }
        .raw-toggle-link:hover {
            text-decoration: underline;
        }
        .raw-json-block {
            display: none;
            margin-top: 4px;
            padding: 8px;
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 4px;
            font-size: 10px;
            font-family: 'Menlo', 'Consolas', monospace;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 200px;
            overflow-y: auto;
        }
        .raw-json-block.show {
            display: block;
        }
        
        /* 录音回放按钮 */
        .audio-playback-row {
            margin-top: 6px;
        }
        .audio-playback-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            font-size: 11px;
            color: #4CAF50;
            background: #fff;
            border: 1px solid #4CAF50;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .audio-playback-btn:hover {
            background: rgba(76, 175, 80, 0.08);
        }
        .audio-playback-btn.is-playing {
            border-color: #999;
            color: #999;
            background: #f5f5f5;
        }
        .audio-playback-btn .audio-icon {
            width: 14px;
            height: 14px;
        }
        /* 句子头部的内联播放按钮（放在分值后面） */
        .audio-btn-inline {
            flex-shrink: 0;
            margin-left: 8px;
            padding: 2px 6px;
            font-size: 0;
            color: #4CAF50;
            background: #fff;
            border: 1px solid #4CAF50;
            border-radius: 4px;
            cursor: pointer;
            vertical-align: middle;
        }
        .audio-btn-inline:hover {
            background: rgba(76, 175, 80, 0.08);
        }
        .audio-btn-inline.is-playing {
            border-color: #999;
            color: #999;
            background: #f5f5f5;
        }
        .audio-btn-inline .audio-icon {
            width: 16px;
            height: 16px;
        }