:root { 
            /* 主色调系统 */
            --primary: #4f46e5; 
            --primary-dark: #3730a3; 
            --primary-light: #eef2ff; 
            
            /* 背景系统 */
            --bg-body: #f3f4f6;
            --bg-card: rgba(255, 255, 255, 0.95);
            --border: #e2e8f0;
            
            /* 功能色板 */
            --color-data: #1e293b;    
            --color-macro: #b45309;   
            --color-internal: #dc2626;
            --color-diag: #059669;    
            --color-student: #2563eb; 
            --color-tools: #7c3aed;   
            --secondary: #475569; 
            --success: #16a34a;  
            --danger: #dc2626;
            --warning: #f59e0b;

            /* 阴影与圆角 */
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); 
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --radius: 12px;
            
            /* 动画时长 */
            --transition-fast: 0.15s;
            --transition-normal: 0.3s;
        }
        
        /* 增加点阵背景，提升科技感 */
        body { 
            background-color: var(--bg-body); 
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 20px 20px;
            color: #1e293b; 
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            padding-bottom: 60px; 
            font-size: 14px; 
            scroll-behavior: smooth;
            line-height: 1.5;
        }
        
       /* 深色模式优化 */
       .dark-mode { 
            --bg-body: #0f172a; 
            --bg-card: rgba(30, 41, 59, 0.85);
            --border: rgba(255, 255, 255, 0.1); 
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
            --color-data: #94a3b8;
            color: #e2e8f0;
            background-image: radial-gradient(#1e293b 1px, transparent 1px);
        }

        .dark-mode .card-box { border: 1px solid var(--border); }
        .dark-mode table thead th { 
            background: rgba(30, 41, 59, 0.9); 
            color: #94a3b8; 
            border-bottom: 1px solid #334155;
        }
        .dark-mode tr:nth-child(even) { background: rgba(255,255,255,0.02); }
        .dark-mode tr:hover { background: rgba(255,255,255,0.05); }
        .dark-mode input, .dark-mode select, .dark-mode textarea { 
            background: #1e293b; 
            border-color: #334155; 
            color: white; 
        }
        .dark-mode .nav-link {
            background: rgba(255,255,255,0.05);
            color: #cbd5e1;
        }
        .dark-mode .nav-link:hover { background: rgba(255,255,255,0.1); }
        .dark-mode .nav-link.active {
            background: var(--primary);
            color: white;
        }

        .spotlight-mask {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.8); z-index: 30000;
            display: none; justify-content: center; padding-top: 100px; backdrop-filter: blur(4px);
        }
        .spotlight-box {
            width: 100%; max-width: 600px; background: var(--bg-card);
            border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            overflow: hidden; border: 1px solid var(--primary);
        }
        .spotlight-input-wrap { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border); }
        .spotlight-input { border: none !important; flex: 1; font-size: 18px; outline: none; background: transparent; }
        .spotlight-results { max-height: 400px; overflow-y: auto; }
        .spotlight-item { 
            padding: 12px 20px; display: flex; justify-content: space-between; 
            cursor: pointer; transition: 0.2s; border-bottom: 1px solid var(--border);
        }
        .spotlight-item:hover { background: var(--primary-light); color: var(--primary); }
        .spotlight-hint { padding: 10px; font-size: 12px; color: #94a3b8; text-align: center; }
        .module-help-btn {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 12px; color: #64748b; background: white;
            border: 1px solid #cbd5e1; padding: 2px 8px;
            border-radius: 12px; cursor: pointer; transition: all 0.2s;
            font-weight: normal; margin-left: 10px; vertical-align: middle;
            line-height: 1.5;
        }
        .module-help-btn:hover {
            color: var(--primary); border-color: var(--primary);
            background: var(--primary-light); transform: translateY(-1px);
        }
        .help-modal-content {
            text-align: left; font-size: 14px; line-height: 1.6; color: #333;
        }
        .help-modal-content h4 {
            color: var(--primary); margin: 15px 0 8px 0; border-left: 4px solid var(--primary); padding-left: 8px; font-size: 15px; font-weight: bold;
        }
        .help-modal-content ul { padding-left: 20px; margin: 0; }
        .help-modal-content li { margin-bottom: 5px; }
        .help-modal-content .formula-box {
            background: #f8fafc; border: 1px dashed #cbd5e1; padding: 10px; 
            border-radius: 6px; font-family: 'JetBrains Mono', monospace; 
            color: #b45309; margin: 5px 0; font-size: 13px;
        }
        .explain-panel {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 12px;
            margin: 10px 0 16px;
        }
        .explain-panel summary {
            cursor: pointer;
            font-weight: 600;
            color: #334155;
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
        }
        .explain-panel summary::-webkit-details-marker { display: none; }
        .explain-panel summary::before { content: '📘'; }
        .explain-panel[open] summary::before { content: '📖'; }
        .explain-panel .explain-content {
            margin-top: 8px;
            color: #475569;
            font-size: 12.5px;
            line-height: 1.7;
        }
        .explain-panel .explain-content p { margin: 4px 0; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
        body { background-color: var(--bg-body); color: #1e293b; line-height: 1.5; padding-bottom: 60px; font-size: 14px; scroll-behavior: smooth; }
        a { text-decoration: none; color: inherit; }
        .container { max-width: 1600px; margin: 0 auto; padding: 10px; }
        .hidden { display: none !important; }
        
        header { 
            /* 移除硬编码的红色结尾，改用 --primary-dark 变量实现同色系渐变 */
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #3730a3) 100%); 
            color: white; 
            padding: 20px; 
            border-radius: var(--radius); 
            position: relative; /* 确保定位准确 */
            transition: background 0.5s ease; /* 增加颜色切换时的过渡动画 */
        }

        /* 👇👇👇 🟢 新增代码：插入在这里 🟢 👇👇👇 */
        .module-desc-bar {
            background: white;
            border-left: 5px solid var(--primary);
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            line-height: 1.6;
        }
        .module-desc-bar p { margin: 4px 0 0 0; }
        .module-desc-bar .desc-toggle {
            margin-left: auto;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 999px;
            cursor: pointer;
        }
        .module-desc-bar.desc-collapsed p { display: none; }
        .module-desc-bar.desc-collapsed { padding-bottom: 10px; }

        /* 水印层 */
        #watermark-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 99999;
            opacity: 0.08;
            background-repeat: repeat;
            background-size: 320px 220px;
            transform: translateZ(0);
        }

        @media print {
            #watermark-layer {
                position: fixed;
                opacity: 0.08;
                display: block !important;
            }
        }
        .module-desc-bar h3 { margin-bottom: 5px; color: #333; display: flex; align-items: center; gap: 8px; font-size: 16px; }
        .module-desc-bar p { font-size: 13px; color: #64748b; margin: 0; }

        .starter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
        .starter-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); }
        .starter-card h4 { margin: 0 0 8px 0; font-size: 14px; color: #0f172a; display:flex; align-items:center; gap:6px; }
        .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
        .status-item { background:#f8fafc; border:1px solid #e2e8f0; padding:10px 12px; border-radius:8px; font-size:12px; color:#475569; }
        .status-item strong { display:block; font-size:13px; color:#0f172a; }
        .status-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; font-size:11px; border:1px solid transparent; }
        .badge-ok { background:#ecfeff; color:#0369a1; border-color:#bae6fd; }
        .badge-warn { background:#fff7ed; color:#b45309; border-color:#fed7aa; }
        .badge-err { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
        .task-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
        .task-item { display:flex; align-items:center; gap:8px; font-size:12px; color:#475569; padding:6px 8px; border-radius:8px; background:#f8fafc; border:1px dashed #e2e8f0; }
        .task-item.done { background:#ecfdf5; border-color:#bbf7d0; color:#166534; }
        .task-item .dot { width:8px; height:8px; border-radius:50%; background:#94a3b8; }
        .task-item.done .dot { background:#22c55e; }
        .log-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
        .log-item { font-size:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:6px 8px; display:flex; align-items:center; gap:6px; }
        .log-item small { color:#94a3b8; }
        .issue-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
        .issue-item { font-size:12px; color:#7f1d1d; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:6px 8px; }
        h1 { font-size: 22px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.5px; line-height: 1.3; }
        .badge { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; vertical-align: middle; margin-left: 5px; }

        .nav-wrapper { position: sticky; top: 0; z-index: 1000; margin-bottom: 15px; box-shadow: var(--shadow); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: white; }
        .nav-categories { display: flex; background: #1e293b; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .nav-categories::-webkit-scrollbar { display: none; }
        .nav-cat-item { flex: 0 0 auto; padding: 12px 15px; color: #94a3b8; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.2s; border-bottom: 3px solid transparent; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
        .nav-cat-item:hover { color: white; background: rgba(255,255,255,0.05); }
        .nav-cat-item.active { color: white; background: #0f172a; border-bottom-color: var(--primary); }

        .nav-sub-items { display: flex; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .nav-sub-items::-webkit-scrollbar { display: none; }
        .nav-link { flex: 0 0 auto; padding: 6px 12px; border-radius: 6px; white-space: nowrap; cursor: pointer; font-weight: 500; color: var(--secondary); font-size: 13px; transition: all 0.2s ease; border: 1px solid transparent; background: #f8fafc; display: flex; align-items: center; gap: 5px; }
        .nav-link:hover { background: var(--primary-light); color: var(--primary); border-color: #dbeafe; }
        .nav-link.active { background: var(--primary); color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2); border-color: var(--primary); }

        .section { display: none; animation: fadeIn 0.3s ease; }
        .section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* 减少动画偏好：提升可访问性与性能 */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        .card-box { 
            background: var(--bg-card); 
            backdrop-filter: blur(8px); /* 磨砂玻璃效果 */
            border-radius: var(--radius); 
            padding: 20px; /* 增加内边距 */
            margin-bottom: 20px; 
            box-shadow: var(--shadow); 
            border: 1px solid rgba(255,255,255,0.5); 
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card-box:hover {
            transform: translateY(-2px); /* 悬浮微动 */
            box-shadow: var(--shadow-lg);
        }
        
        .layout-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
        .side-nav { position: sticky; top: 120px; background: white; padding: 10px; border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border); max-height: 80vh; overflow-y: auto; }
        .side-nav-title { font-size: 12px; text-transform: uppercase; color: #94a3b8; font-weight: 700; padding: 5px 10px; margin-bottom: 5px; }
        .side-nav-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin-bottom: 4px; color: #64748b; border-radius: 6px; font-size: 13px; font-weight: 600; transition: all 0.2s; border-left: 3px solid transparent; cursor: pointer; }
        .side-nav-link:hover { background: var(--bg-body); color: var(--primary); }
        .side-nav-link.active { background: var(--primary-light); color: var(--primary); border-left-color: var(--primary); }
        .nav-caret { transition: transform 0.2s ease; font-size: 12px; opacity: 0.6; }
        .side-nav-link.expanded .nav-caret { transform: rotate(90deg); }
        .side-nav-sub-container { display: none; padding-left: 10px; margin-bottom: 5px; border-left: 1px solid #e2e8f0; margin-left: 15px; }
        .side-nav-sub-container.show { display: block; animation: slideDown 0.2s ease; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
        .side-nav-sub-link { display: block; padding: 6px 10px; color: #64748b; font-size: 12px; border-radius: 4px; text-decoration: none; transition: all 0.2s; position: relative; cursor: pointer; }
        .side-nav-sub-link:hover { color: var(--primary); background: white; }
        .side-nav-sub-link::before { content: '•'; margin-right: 5px; color: #cbd5e1; }
        .side-nav-sub-link:hover::before { color: var(--primary); }
        .content-area { min-width: 0; }
        .anchor-target { scroll-margin-top: 160px; }

        .sec-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary-light); padding-bottom: 10px; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
        .sec-head h2 { color: #0f172a; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .sec-head h2::before { content: ''; display: inline-block; width: 6px; height: 20px; background: var(--primary); border-radius: 3px; }
        .control-panel { background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 15px; }
        .bg-gray-50 { background-color: #f9fafb; padding: 15px; border-radius: 10px; }
        
       .table-wrap { 
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch; 
            border-radius: 8px; 
            border: 1px solid var(--border); 
            background: white; 
            margin-top: 15px; 
            width: 100%; 
            
            /* 关键修复：绝对禁止限制高度，有多少数据显示多少行 */
            max-height: none !important; 
            overflow-y: visible !important;
            display: block !important;
        }
        /* 优化表格字体 */
        table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 700px; font-size: 13px; }
        
        /* 数字列使用等宽字体，看起来更专业 */
        td:nth-child(n+3) { 
            font-family: 'JetBrains Mono', 'Menlo', 'Courier New', monospace;
            font-variant-numeric: tabular-nums; 
        }

        /* 表头样式优化 */
        thead th { 
            position: sticky; top: 0; z-index: 10; 
            background: #f1f5f9; 
            color: #334155; 
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            font-weight: 700; text-transform: uppercase; font-size: 12px; 
            padding: 12px 8px; /* 增加高度 */
            border-bottom: 2px solid #e2e8f0;
        }

        /* 首列冻结 (学校名/姓名固定) */
        table th:first-child, table td:first-child {
            position: sticky; left: 0; 
            z-index: 11; /* 比普通表头高 */
            background: inherit; /* 跟随行的背景色 */
            border-right: 2px solid #e2e8f0;
        }
        /* 修复首列冻结时的背景色穿透问题 */
        table td:first-child { background-color: inherit; }
        thead th:first-child { 
            background-color: #f1f5f9; 
            z-index: 20; /* 必须高于 z-index: 10 (表头) 和 z-index: 11 (首列) */
        }

        /* 数据条 (Data Bars) 背景样式 */
        .data-bar-bg { position: relative; z-index: 1; }
        .data-bar-bg::before {
            content: ''; position: absolute;
            top: 15%; bottom: 15%; left: 4px;
            background: rgba(79, 70, 229, 0.1); /* 浅紫色条 */
            z-index: -1; border-radius: 4px;
            width: var(--percent, 0%); /* JS控制宽度 */
            transition: width 0.5s ease;
        }
        th, td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
        /* [新增] 教师对比表样式增强 */
        .text-gray { color: #94a3b8; }
        
        /* 让表头垂直居中 */
        .comparison-table th { vertical-align: middle; }
        
        /* 增加表头高度以容纳两行文字 */
        .comparison-table thead th { height: 45px; line-height: 1.2; }
        
        /* 贡献值正负色彩 */
        .text-green { color: #16a34a; }
        .text-red { color: #dc2626; }
        th:not(:last-child), td:not(:last-child) { border-right: 1px solid #f1f5f9; }
        tr:nth-child(even) { background: #fafafa; }
        tr:hover { background: var(--primary-light); transition: background 0.1s; }
        .rank-cell { font-weight: 800; } .r-1 { color: #dc2626; font-size: 1.1em; } .r-2 { color: #ea580c; } .r-3 { color: #d97706; }
        .bg-highlight { background-color: #fef9c3 !important; color: #854d0e; font-weight: bold; border-left: 3px solid #facc15; }
        .sub-header { background: linear-gradient(to right, #e0f2fe, transparent); color: #0369a1; padding: 8px 12px; border-radius: 6px; margin-top: 25px; margin-bottom: 10px; font-weight: 700; font-size: 15px; border-left: 4px solid #0284c7; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--primary); color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); white-space: nowrap; }
        .btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .btn-green { background: var(--success); } .btn-green:hover { background: #15803d; }
        .btn-orange { background: #f59e0b; } .btn-orange:hover { background: #d97706; }
        .btn-purple { background: #7c3aed; } .btn-purple:hover { background: #6d28d9; }
        .btn-gray { background: #64748b; } .btn-gray:hover { background: #475569; }
        .btn-danger { background: #dc2626; } .btn-danger:hover { background: #b91c1c; }

        input[type="text"], input[type="number"], select { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; outline: none; transition: border 0.2s; background: white; max-width: 100%; }
        input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
        .help-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; border-radius: 50%;
            background: rgba(0,0,0,0.05); color: #94a3b8;
            font-size: 12px; cursor: pointer; margin-left: 8px; vertical-align: middle;
            border: 1px solid rgba(0,0,0,0.1); transition: all 0.2s;
        }
        .help-icon:hover {
            background: var(--primary); color: white; transform: scale(1.1); border-color: var(--primary);
        }
        .swal2-popup { font-size: 14px !important; } /* 微调弹窗字体 */
        /* ✋ 引导步骤中的图片样式 */
        .tutorial-img {
            max-width: 100%; border: 1px dashed #ccc; border-radius: 6px; margin: 10px 0;
        }
        .upload-box { border: 2px dashed #cbd5e1; padding: 30px; text-align: center; cursor: pointer; border-radius: 12px; transition: 0.3s; background: #f8fafc; }
        .upload-box:hover { border-color: var(--primary); background: #eff6ff; }
        .upload-icon { font-size: 40px; color: #94a3b8; margin-bottom: 10px; }
        .info-bar { background: #e0f2fe; border: 1px solid #bae6fd; color: #0369a1; padding: 10px; border-radius: 8px; font-size: 13px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .info-bar::before { content: 'ℹ️'; }

        /* 表格热力图与列筛选样式 */
        .heatmap-mode td { transition: background-color 0.3s; color: #000; }
        /* 在深色模式下，热力图背景较深时，文字需要反白，这里暂强制深色文字配合浅色热力背景，或者增加特异性 */
        .dark-mode .heatmap-mode td { color: #1e293b; font-weight: bold; } 
        .plank-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; margin: 2px; }
        .plank-drag { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; } /* 拖后腿/短板 */
        .plank-lift { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; } /* 提分/优势 */
        .plank-info-icon { font-size: 10px; opacity: 0.7; }
        .heatmap-legend { display:inline-flex; align-items:center; gap:5px; font-size:11px; margin-left:10px; padding:2px 8px; background:#f1f5f9; border-radius:4px; }
        .grad-bar { width:60px; height:8px; background: linear-gradient(to right, #f87171, #facc15, #4ade80); border-radius:2px; }
        
        .col-hidden { display: none !important; }
        
        .filter-popover {
            position: absolute; background: white; border: 1px solid #cbd5e1; padding: 10px;
            border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50;
            display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 300px;
        }
        .filter-popover.show { display: grid; }
        .filter-check-label { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }

        /* 特殊约束框样式 */
        .constraints-box { background: #fff0f0; padding: 15px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #fecaca; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.05); }
        .constraints-box h4 { color: #991b1b; margin-bottom: 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
        .constraints-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
        .constraints-grid label { font-size: 12px; color: #7f1d1d; font-weight: 600; display: block; margin-bottom: 4px; }
        .constraints-grid input { border-color: #fca5a5; width: 100%; }
        .constraints-grid input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }

        /* 标签输入组件样式 */
        .tag-widget-container { position: relative; background: white; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px; display: flex; flex-wrap: wrap; gap: 4px; min-height: 38px; transition: border 0.2s; }
        .tag-widget-container:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
        .tag-chip { background: #e0f2fe; color: #0369a1; font-size: 12px; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 4px; cursor: default; border: 1px solid #bae6fd; }
        .tag-chip-remove { cursor: pointer; opacity: 0.6; font-weight: bold; }
        .tag-chip-remove:hover { opacity: 1; color: #dc2626; }
        .tag-input-field { border: none !important; outline: none !important; padding: 4px !important; flex: 1; min-width: 60px; font-size: 13px; background: transparent !important; box-shadow: none !important; }
        .suggestion-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50; max-height: 200px; overflow-y: auto; display: none; margin-top: 4px; }
        .suggestion-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f1f5f9; color: #333; }
        .suggestion-item:hover { background: #f8fafc; color: var(--primary); }
        .suggestion-item small { color: #94a3b8; margin-left: 5px; }
        .conflict-builder { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; }
        .conflict-builder select { flex: 1; font-size: 12px; padding: 4px; }

        /* 卡片 */
        .teacher-cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 15px; }
        .teacher-card { background: white; border-radius: 10px; padding: 15px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: all 0.3s ease; position: relative; overflow: hidden; }
        .teacher-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); }
        .teacher-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .teacher-name { font-size: 15px; font-weight: 700; color: #333; }
        .teacher-classes { font-size: 12px; color: #64748b; margin-top: 2px; }
        .performance-badge { padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
        .performance-excellent { background: #dcfce7; color: #166534; } .performance-good { background: #fef3c7; color: #92400e; } .performance-average { background: #e0f2fe; color: #075985; } .performance-poor { background: #fee2e2; color: #991b1b; }
        .teacher-stats { display: flex; justify-content: space-between; margin-bottom: 10px; background: #f8fafc; padding: 8px; border-radius: 6px; }
        .stat-item { text-align: center; flex: 1; } .stat-value { font-size: 16px; font-weight: 800; color: #333; } .stat-label { font-size: 10px; color: #64748b; text-transform: uppercase; }
        .view-details-btn { width: 100%; padding: 8px; background: white; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; color: #475569; font-weight: 500; transition: 0.2s; }
        .view-details-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

        .pairing-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; margin-top: 15px; }
        .pairing-card { background: linear-gradient(to bottom right, #ffffff, #f8fafc); border: 1px solid #cbd5e1; border-radius: 10px; padding: 15px; display: flex; gap: 10px; position: relative; }
        .pairing-card::after { content: '🤝'; position: absolute; right: 15px; top: 15px; font-size: 24px; opacity: 0.2; }
        .pairing-side { flex: 1; }
        .pairing-arrow { display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px; }
        .pairing-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; margin-bottom: 4px; }
        .pairing-name { font-weight: bold; color: #1e293b; font-size: 14px; }
        .pairing-skill { font-size: 11px; color: var(--success); margin-top: 2px; } .pairing-need { font-size: 11px; color: var(--danger); margin-top: 2px; }
        .pairing-tag { background: var(--primary-light); color: var(--primary); padding: 2px 6px; border-radius: 4px; font-size: 10px; display: inline-block; margin-top: 5px; }

        #mode-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.95); z-index: 9999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); padding: 20px; }
        .mode-box { background: white; padding: 30px; border-radius: 16px; width: 100%; max-width: 600px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); max-height: 90vh; overflow-y: auto; }
        .mode-btns { display: flex; gap: 15px; margin-top: 30px; justify-content: center; flex-wrap: wrap; }
        .mode-btn { flex: 1; min-width: 260px; padding: 20px; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: 0.3s; text-align: left; background: #f8fafc; }
        .mode-btn:hover, .mode-btn:active { border-color: var(--primary); transform: translateY(-3px); background: #eff6ff; box-shadow: var(--shadow); }
        .mode-btn h3 { color: var(--primary); margin-bottom: 10px; font-size: 16px; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; }
        .mode-btn ul { list-style: none; padding: 0; }
        .mode-btn li { font-size: 13px; color: #475569; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
        
        .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; backdrop-filter: blur(3px); padding: 15px; }
        .modal-content { 
            background: white; 
            border-radius: 12px; 
            width: 95% !important;        /* 宽度占屏幕 95% */
            max-width: 1600px !important; /* 最大宽度放宽到 1600px */
            height: auto;
            max-height: 95vh;             /* 高度利用率提升 */
            overflow-y: auto; 
            padding: 25px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
            display: flex;                /* 使用 Flex 布局 */
            flex-direction: column;       /* 垂直排列 */
        }

        .school-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .school-modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid #eee; padding-top: 15px; }
        .clickable-school { cursor: pointer; color: var(--primary); text-decoration: underline; font-weight: bold; }
        .clickable-school:hover { color: var(--primary-dark); }
        /* 移动端适配：单列显示 */
        @media screen and (max-width: 768px) { .school-modal-grid { grid-template-columns: 1fr; } }

        .report-card-container { background: white; border: none; border-radius: 0; padding: 20px; max-width: 800px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; }
/* =========================================================
   🟢 家长端成绩单【全屏沉浸模式】增强样式
   作用：彻底解决“成绩单显示不完整 / 被挤没”的问题
   ========================================================= */

body.parent-fullscreen-mode {
    overflow: hidden !important;
}

/* 解除所有容器宽度限制 */
body.parent-fullscreen-mode .container {
    max-width: none !important;
    width: 100vw !important;
    padding: 10px !important;
}

/* 成绩单强制铺满屏幕 */
body.parent-fullscreen-mode .report-card-container {
    max-width: none !important;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 表格区域不再被裁切 */
body.parent-fullscreen-mode .table-wrap {
    max-height: none !important;
    overflow: visible !important;
}

/* 禁用 sticky，防止表头遮挡 */
body.parent-fullscreen-mode thead th {
    position: static !important;
}

/* 移动端再兜一层底 */
@media screen and (max-width: 768px) {
    body.parent-fullscreen-mode {
        font-size: 13px;
    }
}
@media screen and (max-width: 768px) {
    .table-wrap { overflow-x: auto; }
    table.mobile-card-table { display: block; border: none; }
    table.mobile-card-table thead { display: none; }
    table.mobile-card-table tbody, table.mobile-card-table tr { display: block; }
    table.mobile-card-table tr { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
    table.mobile-card-table td { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 6px 4px; border: none; }
    table.mobile-card-table td::before { content: attr(data-label); font-weight: 600; color: #64748b; }
}
        .report-header { text-align: center; border-bottom: 3px solid var(--primary); padding-bottom: 15px; margin-bottom: 20px; }
        .report-header h3 { font-size: 24px; color: var(--primary); letter-spacing: 2px; font-weight: 800; }
        .report-info-row { display: flex; justify-content: space-between; background: #f8fafc; padding: 12px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; color: #333; border: 1px solid #e2e8f0; flex-wrap: wrap; gap: 10px; font-size: 13px; }
        .chart-wrapper { position: relative; height: 300px; width: 100%; margin: 20px 0; display: flex; justify-content: center; align-items: center; }

        .dist-bar-container { display: flex; align-items: flex-end; height: 50px; gap: 1px; justify-content: center; }
        .dist-bar { background-color: var(--primary); width: 8px; border-radius: 2px 2px 0 0; position: relative; opacity: 0.8; transition: 0.2s; }
        .dist-bar:hover { background-color: var(--warning); opacity: 1; transform: scaleY(1.1); }
        .diagnosis-tag { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; display: inline-block; white-space: nowrap; }
        .diagnosis-bad { background: #fee2e2; color: #991b1b; } .diagnosis-good { background: #dcfce7; color: #166534; } .diagnosis-flat { background: #e0f2fe; color: #075985; }
        .text-red { color: var(--danger); font-weight: bold; } .text-green { color: var(--success); font-weight: bold; } .text-blue { color: var(--primary); font-weight: bold; } .text-orange { color: var(--warning); font-weight: bold; }
        .positive-percent { color: var(--success); font-weight: bold; } .negative-percent { color: var(--danger); font-weight: bold; }

        /* 语音悬浮球 */
        .voice-fab {
            position: fixed; bottom: 100px; right: 30px; z-index: 9999;
            width: 60px; height: 60px; border-radius: 50%;
            background: linear-gradient(135deg, #f43f5e, #e11d48);
            box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.5);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 28px; cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .voice-fab:hover { transform: scale(1.1); box-shadow: 0 15px 30px -5px rgba(225, 29, 72, 0.6); }
        .voice-fab.listening { animation: pulse-ring 2s infinite; background: #22c55e; }
        
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
            70% { box-shadow: 0 0 0 20px rgba(34, 197, 94, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }

        /* 全屏语音 HUD (抬头显示) */
        .voice-hud {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);
            z-index: 20000; display: none; flex-direction: column;
            align-items: center; justify-content: center; text-align: center;
            color: white; transition: opacity 0.3s;
        }
        .voice-hud.active { display: flex; animation: fadeIn 0.2s; }
        .voice-wave { display: flex; align-items: center; height: 60px; gap: 6px; margin-bottom: 30px; }
        .voice-bar { width: 8px; background: #38bdf8; border-radius: 4px; animation: sound-wave 0.5s ease-in-out infinite alternate; }
        .voice-bar:nth-child(1) { height: 20px; animation-delay: 0.1s; }
        .voice-bar:nth-child(2) { height: 40px; animation-delay: 0.2s; }
        .voice-bar:nth-child(3) { height: 60px; animation-delay: 0.3s; }
        .voice-bar:nth-child(4) { height: 40px; animation-delay: 0.4s; }
        .voice-bar:nth-child(5) { height: 20px; animation-delay: 0.5s; }
        
        @keyframes sound-wave { 0% { height: 10px; opacity: 0.5; } 100% { height: 60px; opacity: 1; } }

        .voice-text-main { font-size: 32px; font-weight: bold; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .voice-text-sub { font-size: 16px; color: #94a3b8; }
        .voice-cmd-list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; text-align: left; }
        .voice-cmd-item { background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 8px; font-size: 14px; border: 1px solid rgba(255,255,255,0.1); }
        .voice-cmd-key { color: #38bdf8; font-weight: bold; margin-right: 10px; }

.notification-btn {
            position: relative;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 18px;
            height: 18px;
            background: #ef4444; /* 鲜红色 */
            color: white;
            font-size: 10px;
            font-weight: bold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255,255,255,0.3);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 10;
            animation: pulse-red 2s infinite;
        }
        .notification-badge.hidden { display: none; }
        @keyframes pulse-red {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        #parent-view-container {
            position: fixed !important;       /* 强制固定定位，占满屏幕 */
            top: 0;
            left: 0;
            width: 100vw !important;
            height: 100vh !important;
            background-color: #f3f4f6 !important; /* 强制不透明背景，遮挡底部 */
            z-index: 20000 !important;    /* CSS允许的最大层级，确保在最上层 */
            
            /* 核心滚动修复 */
            overflow-y: auto !important;      /* 允许纵向滚动 */
            -webkit-overflow-scrolling: touch; /* iOS 惯性滚动支持 */
            overscroll-behavior: contain;     /* 防止滚动穿透到下层 */
            
            padding: 10px;
            box-sizing: border-box;
            display: block;
        }

        /* 确保内部内容有足够空间 */
        #parent-view-container .report-card-container {
            margin-bottom: 50px !important; /* 底部留白，防止被手机导航条遮挡 */
            max-width: 100% !important;
            width: 100% !important;
        }

      /* === 手机极简模式适配 === */
        #mobile-app { 
            display: none; 
            background: #f3f4f6; 
            min-height: 100vh; 
            padding-bottom: 70px; /* 为底部导航留出空间 */
            overflow-x: hidden;
        }
        
        @media screen and (max-width: 768px) {
            /* 1. 全局容器适配：强制铺满屏幕，禁止页面级横向滚动 */
            body, html { overflow-x: hidden !important; width: 100% !important; }
            
            /* 2. 显式开启电脑版容器，但限制宽度 */
            body > .container, body > header, body > .nav-wrapper { 
                display: block !important; 
                width: 100% !important; 
                max-width: 100vw !important;
                padding: 10px !important; /* 减小边距 */
                margin: 0 !important;
                box-sizing: border-box;
            }

            /* 3. 隐藏原本的极简手机版 (因为我们要用全功能版) */
            #mobile-app, .mob-bottom-nav { display: none !important; }

           /* 4. 标题栏深度适配 (修复文字竖排挤压问题) */
            /* ✅ [新增]：强制 Header 内部改为垂直布局，不再左右挤压 */
            header > div { 
                flex-direction: column !important; 
                align-items: center !important; 
                gap: 10px !important;
            }

            /* ✅ [新增]：标题容器宽度设为100%并居中 */
            header > div > div:nth-of-type(1) {
                width: 100% !important;
                text-align: center !important;
                flex: none !important; /* 禁止缩放 */
            }

            /* ✅ [新增]：右上角工具栏改为居中并允许换行 */
            header > div > div:last-child {
                width: 100% !important;
                justify-content: center !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
            }

            /* ✅ [修改]：调整标题字号和 Logo */
            h1 { 
                font-size: 20px !important; 
                line-height: 1.4 !important; 
                white-space: normal !important; /* 强制允许文字横向显示 */
                margin: 0 !important;
            }
            /* 隐藏副标题以节省手机空间 */
            #app-subtitle { display: none !important; }
            
            header { padding: 15px 10px !important; border-radius: 0 !important; height: auto !important; }
            #custom-logo-img { height: 50px !important; margin-bottom: 5px; } 
            
            /* 调整顶部按钮大小，使其更紧凑 */
            header .btn, header div[onclick] {
                font-size: 12px !important;
                padding: 6px 12px !important;
                height: 32px !important;
                margin: 0 !important;
                width: auto !important; /* 按钮不要撑满，保持自然宽度 */
            }


            /* 5. 核心布局调整：左右分栏改为上下堆叠 */
            .layout-grid { 
                display: block !important; /* 取消 Grid，改为流式布局 */
            }
            .side-nav {
                width: 100% !important;
                position: static !important; /* 取消固定定位 */
                margin-bottom: 15px;
                background: #f8fafc;
                max-height: 180px; /* 限制高度，内部滚动 */
                overflow-y: auto;
                border: 1px solid #e2e8f0;
            }

            /* 6. 控制面板优化 (关键！解决界面太大的问题) */
            .control-panel {
                display: flex !important;
                flex-direction: column !important; /* 强制垂直排列 */
                gap: 8px !important;
                align-items: stretch !important; /* 拉伸占满宽度 */
            }
            
            /* 让所有输入框、下拉框、按钮在手机上占满一行，方便点击 */
            .control-panel select, 
            .control-panel input[type="text"], 
            .control-panel input[type="number"], 
            .control-panel button, 
            .btn {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                box-sizing: border-box !important;
                height: 40px !important; /* 增大触控区域 */
                font-size: 14px !important;
            }
            /* 特殊处理：在一行内的复选框让它保持行内 */
            .control-panel label { display: flex; align-items: center; margin-bottom: 5px; }

            /* 7. 表格深度优化：字体缩小 + 强制横向滚动 */
            .table-wrap {
                width: 100% !important;
                overflow-x: auto !important; /* 关键：只在表格区域滚动 */
                -webkit-overflow-scrolling: touch; /* 平滑滚动 */
                display: block !important;
                margin-top: 10px !important;
                border: none !important; /* 移除边框节省空间 */
            }
            table { 
                min-width: 600px; /* 保证表格不被过度压缩 */
                font-size: 12px !important; /* 缩小字号 */
            }
            th, td { padding: 8px 4px !important; } /* 减小单元格内边距 */

            /* 8. 导航栏适配：横向滑动 */
            .nav-categories, .nav-sub-items {
                display: flex !important;
                overflow-x: auto !important;
                white-space: nowrap !important;
                scrollbar-width: none; /* 隐藏滚动条 */
            }
            
            /* 9. 隐藏不必要的悬浮元素，防止遮挡 */
            .voice-hud, #voice-fab, .spotlight-mask { display: none !important; }
            
            /* 10. 弹窗全屏化 */
            .modal-content {
                width: 95% !important;
                margin: 20px auto !important;
                max-height: 85vh !important;
                padding: 15px !important;
            }
            
            /* 11. 卡片与模块间距调整 */
            .card-box, .section {
                padding: 15px !important;
                border-radius: 8px !important;
                margin-bottom: 15px !important;
            }
            
            /* 12. 修复上传框太大的问题 */
            .upload-box {
                padding: 20px !important;
                min-width: auto !important;
                width: 100% !important;
            }
            /* 强制将表格组件转换为块级元素 */
            .table-wrap table, 
            .table-wrap thead, 
            .table-wrap tbody, 
            .table-wrap th, 
            .table-wrap td, 
            .table-wrap tr { 
                display: block !important; 
            }

            /* 隐藏原本的表头 (但保留结构以防辅助阅读器需要) */
            .table-wrap thead tr { 
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            /* 将每一行变成一个漂亮的白色卡片 */
            .table-wrap tbody tr { 
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 12px; /* 圆角 */
                margin-bottom: 15px; /* 卡片间距 */
                box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* 轻微阴影 */
                padding: 10px;
                position: relative;
            }

            /* 单元格样式：变成左右结构的键值对 */
            .table-wrap td { 
                border: none !important;
                border-bottom: 1px dashed #f1f5f9 !important; 
                position: relative;
                padding-left: 40% !important; /* 左侧留给标签 */
                text-align: right !important; /* 内容靠右对齐 */
                white-space: normal !important; /* 允许换行 */
                min-height: 35px;
                display: flex !important;
                align-items: center;
                justify-content: flex-end;
            }

            .table-wrap td:last-child {
                border-bottom: none !important;
            }

            /* 利用 data-label 属性自动生成左侧标签 (伪元素) */
            .table-wrap td:before { 
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                width: 35%; 
                padding-right: 10px; 
                white-space: nowrap;
                text-align: left;
                font-weight: 700;
                color: #64748b; /* 标签颜色 */
                content: attr(data-label); /* 核心：读取 HTML 中的属性 */
                font-size: 12px;
            }

            /* 特殊处理：名字和总分加粗显示 */
            .table-wrap td[data-label="姓名"], 
            .table-wrap td[data-label="总分"] {
                font-size: 15px;
                color: #1e293b;
                font-weight: 800;
            }
            
            /* ✋ 小手提示：如果是空数据行，保持居中 */
            .table-wrap td[colspan] {
                text-align: center !important;
                padding-left: 10px !important;
                justify-content: center;
            }
            /* 1. 修复 SweetAlert2 在手机上过宽的问题 */
            div.swal2-popup {
                width: 90% !important;
                padding: 1rem !important;
                font-size: 0.9rem !important;
            }
            div.swal2-actions {
                flex-direction: column-reverse; /* 手机上取消按钮在下更易点 */
                gap: 10px;
                width: 100%;
            }
            div.swal2-actions button {
                width: 100% !important;
                margin: 0 !important;
            }

        /* A. 移动端表格强制转卡片 (响应式优化) */
        @media screen and (max-width: 768px) {
            /* 强制表格元素为块级显示 */
            .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr { 
                display: block !important; 
            }
            
            /* 隐藏表头，但保留结构供屏幕阅读器 */
            .table-wrap thead tr { 
                position: absolute; top: -9999px; left: -9999px; 
            }
            
            /* 行变成卡片 */
            .table-wrap tbody tr { 
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 12px;
                margin-bottom: 15px;
                padding: 15px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.02);
            }
            
            /* 单元格变成键值对 */
            .table-wrap td { 
                border: none !important;
                border-bottom: 1px dashed rgba(0,0,0,0.05) !important; 
                position: relative;
                padding-left: 45% !important; /* 左侧留给标签 */
                text-align: right !important;
                min-height: 30px;
                display: flex !important;
                align-items: center;
                justify-content: flex-end;
            }
            
            /* 利用 data-label 显示表头 (关键UX优化) */
            .table-wrap td:before { 
                position: absolute;
                top: 50%; left: 0;
                transform: translateY(-50%);
                width: 40%; 
                padding-right: 10px; 
                white-space: nowrap;
                font-weight: 700;
                color: var(--secondary);
                content: attr(data-label); 
                text-align: left;
                font-size: 12px;
            }
            
            .table-wrap td:last-child { border-bottom: none !important; }
        }

        /* B. 全局骨架屏加载动画 (Skeleton Shimmer) */
        .skeleton-loading {
            background: #f6f7f8;
            background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
            background-repeat: no-repeat;
            background-size: 800px 100%; 
            animation: shimmer 1.5s infinite linear forwards;
            color: transparent !important;
            border-radius: 4px;
        }
        @keyframes shimmer {
            0% { background-position: -468px 0; }
            100% { background-position: 468px 0; }
        }

        /* C. 深色模式对比度修复 (WCAG标准) */
        body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
            background-color: rgba(0, 0, 0, 0.3) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #f1f5f9 !important;
        }
        body.dark-mode input:focus, body.dark-mode select:focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        }
        body.dark-mode .spotlight-item.active, body.dark-mode .spotlight-item:hover {
            background-color: rgba(59, 130, 246, 0.2) !important;
        }

            /* 2. 优化 Spotlight 搜索框在手机上的体验 */
            .spotlight-box {
                width: 95% !important;
                top: 60px !important; /* 避开顶部导航 */
                max-height: 60vh;
            }
            
            /* 3. 增大点击区域 (Accessibility) */
            input[type="checkbox"], input[type="radio"] {
                transform: scale(1.3);
                margin-right: 5px;
            }
        }

        /* 1. 底部导航栏 */
        .mob-bottom-nav {
            position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
            border-top: 1px solid #e5e7eb; display: flex; justify-content: space-around;
            align-items: center; z-index: 9000; padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
        }
        .mob-nav-item {
            flex: 1; text-align: center; color: #94a3b8; font-size: 10px;
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            cursor: pointer; transition: 0.2s;
        }
        .mob-nav-item i { font-size: 22px; margin-bottom: 2px; }
        .mob-nav-item.active { color: var(--primary); font-weight: bold; transform: translateY(-2px); }

       /* 2. 页面容器与转场 */
        /* 默认 display: block，防止 JS 挂掉时页面一片白 */
        .mob-view { display: block; padding: 15px; animation: fadeIn 0.3s ease; }
        
        /* 只有当没有 active 类时才隐藏 */
        .mob-view:not(.active) { display: none; }
        
        /* 配合 x-cloak 防止闪烁 (可选) */
        [x-cloak] { display: none !important; }

        /* 3. 增强型卡片 (支持折叠) */
        .mob-card { 
            background: white; border-radius: 16px; padding: 15px; 
            margin-bottom: 15px; box-shadow: 0 4px 15px -3px rgba(0,0,0,0.05);
            border: 1px solid rgba(255,255,255,0.5);
        }
        .mob-card-header { display: flex; justify-content: space-between; align-items: center; }
        .mob-card-title { font-size: 16px; font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 8px; }
        
        /* 4. 数据概览块 */
        .mob-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
        .mob-stat-box { background: #f8fafc; padding: 10px; border-radius: 10px; text-align: center; border: 1px solid #e2e8f0; }
        .mob-stat-val { font-size: 18px; font-weight: 800; color: var(--primary); }
        .mob-stat-lbl { font-size: 11px; color: #64748b; }

        /* 5. 搜索增强 */
        .mob-search-sticky { position: sticky; top: 0; z-index: 50; background: #f3f4f6; padding: 10px 0; margin-bottom: 10px; }
        .mob-filter-tags { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
        .mob-tag { padding: 4px 12px; background: white; border-radius: 20px; font-size: 12px; color: #64748b; border: 1px solid #e2e8f0; white-space: nowrap; }
        .mob-tag.active { background: var(--primary); color: white; border-color: var(--primary); }

        /* 6. 详情折叠区 */
        .mob-accordion-content { 
            margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; 
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        }
        .mob-score-badge { background: #f1f5f9; padding: 5px; border-radius: 6px; text-align: center; font-size: 12px; }
        .mob-score-badge b { display: block; color: #333; font-size: 14px; }

        .mob-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 15px; border: 1px solid #e2e8f0; }
        .mob-stat-row { display: flex; justify-content: space-between; text-align: center; margin-top: 10px; }
        .mob-stat-item { flex: 1; border-right: 1px solid #eee; }
        .mob-stat-item:last-child { border-right: none; }
        .mob-val { font-size: 24px; font-weight: 800; color: var(--primary); display: block; }
        .mob-label { font-size: 11px; color: #64748b; text-transform: uppercase; }
        
        .mob-search-box { position: relative; margin-bottom: 20px; }
        .mob-input { width: 100%; padding: 15px; padding-left: 45px; border: 2px solid #e2e8f0; border-radius: 50px; font-size: 16px; outline: none; transition: 0.3s; -webkit-appearance: none; }
        .mob-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
        .mob-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 20px; }
        
        .mob-res-card { border-left: 4px solid var(--primary); animation: slideUp 0.3s ease; }
        .mob-res-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
        .mob-res-name { font-size: 18px; font-weight: bold; color: #333; }
        .mob-res-cls { background: var(--primary-light); color: var(--primary); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
        .mob-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .mob-score-item { background: #f8fafc; padding: 8px; border-radius: 6px; text-align: center; }
        .mob-s-sub { font-size: 10px; color: #64748b; margin-bottom: 2px; }
        .mob-s-val { font-size: 14px; font-weight: bold; color: #333; }
        .mob-upload-btn { display: block; width: 100%; padding: 15px; background: #3b82f6; color: white; text-align: center; border-radius: 12px; font-weight: bold; margin-bottom: 15px; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); border: none; font-size: 16px; }
        
        @keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
        
        /* 打印优化 */
        @media print {
            body > *:not(#app):not(#temp-print-wrapper):not(#batch-print-container) { display: none; }
            header, .nav-wrapper, .btn, .control-panel, .info-bar, .side-nav, .upload-box, #mode-mask { 
                display: none !important; 
            }
            /* 1. 强制移除卡片阴影、边框、背景色和磨砂特效，回归白纸黑字 */
            .card-box, .section, .container, #app {
                box-shadow: none !important;
                border: none !important;
                background: white !important; /* 确保背景纯白 */
                backdrop-filter: none !important; /* 移除毛玻璃 */
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
            }

            /* 2. 强制文字纯黑，防止打印机打印出浅灰色看不清 */
            body, table, th, td, h1, h2, h3, div, span, .text-gray {
                color: #000 !important;
            }

            /* 3. 强制打印背景色 (关键！否则数据条和红绿底色打不出来) */
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;

            /* 4. 防止表格行被切断 (分页不断行) */
            tr { page-break-inside: avoid; }
            #app, .container, .content-area, .section.active, .table-wrap {
                width: 100% !important; margin: 0 !important; padding: 0 !important;
                display: block !important; overflow: visible !important;
            }
            .exam-print-page { page-break-after: always; display: block !important; width: 100%; margin: 0; padding: 20px; }
            .mp-grid { display: block; } 
            .task-ticket { 
                width: 48%; float: left; margin: 0 1% 20px 0; 
                border: 2px solid #000; box-shadow: none; page-break-inside: avoid;
            }
            #exam-results-area { display: block !important; position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; background: white; }
            
            #batch-print-container, #temp-print-wrapper { display: block !important; width: 100%; position: absolute; top: 0; left: 0; z-index: 10000; background: white; }
            .report-card-container { box-shadow: none !important; border: 2px solid #333 !important; }
            
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        #desk-labels-print-area { display: none; } 
        @media print {
            #desk-labels-print-area { display: block !important; }
            .desk-label-page { 
                display: grid !important; 
                grid-template-columns: 1fr 1fr; /* A4纸横向分两列 */
                gap: 10px; 
                padding: 10px;
                page-break-after: always; /* 考场间强制换页 */
            }
            .desk-label-card {
                border: 3px solid #000;
                padding: 15px;
                text-align: center;
                height: 250px; /* 每页纸大约打6-8个 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                border-radius: 10px;
                box-sizing: border-box;
            }
            .dl-seat-num { font-size: 64px; font-weight: 900; line-height: 1; border-bottom: 2px solid #000; margin-bottom: 5px; padding-bottom: 5px; }
            .dl-name { font-size: 32px; font-weight: bold; margin: 5px 0; }
            .dl-id { font-size: 18px; font-family: 'Courier New', Courier, monospace; letter-spacing: 1px; }
            .dl-class { font-size: 18px; margin-top: 5px; }
            .dl-footer { margin-top: 15px; font-size: 12px; border-top: 1px dashed #000; padding-top: 5px; opacity: 0.8; }
        }

        #desk-labels-print-area { display: none; } 
        @media print {
            /* 1. 设置物理纸张边距，给打印机留出左右“呼吸”空间 */
            /* 1. 强制清除浏览器默认边距，防止第一页被顶下来 */
            @page { margin: 5mm; size: A4 portrait; }
            html, body { margin: 0 !important; padding: 0 !important; height: 100%; }

            #desk-labels-print-area { 
                display: block !important; 
                width: 100% !important; 
                margin: 0 !important;
                padding: 0 !important;
            }

            .desk-label-page { 
                display: grid !important; 
                grid-template-columns: repeat(5, 1fr); 
                gap: 2mm; 
                padding: 0;
                margin: 0 auto;
                page-break-after: always; 
                break-inside: avoid;
                width: 100%;
                box-sizing: border-box;
            }

            .desk-label-card {
                border: 1px dashed #aaa; 
                padding: 0 1px;
                text-align: center;
                /* 高度保持 19mm (约70%)，确保一页能打很多 */
                height: 19mm; 
                display: flex;
                flex-direction: column;
                justify-content: space-evenly; /* 均匀分布 */
                align-items: center;
                box-sizing: border-box;
                background: #fff !important;
                overflow: hidden;
                font-family: "Microsoft YaHei", sans-serif;
                line-height: 1;
            }

            /* 1. 考号：最大，加粗，最醒目 */
            .dl-exam-no {
                font-size: 14pt; /* 字号加大 */
                font-weight: 900; 
                font-family: 'Arial Black', 'Arial', sans-serif;
                color: #000;
                letter-spacing: -0.5px; /* 紧凑一点防止换行 */
                margin-bottom: 1px;
            }

            /* 2. 班级 + 姓名：字号中等，统一大小 */
            .dl-main-row {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px; 
                font-size: 10pt; /* 比考号小 */
                font-weight: bold; 
                color: #333;
                white-space: nowrap;
            }

            /* 3. 考场 + 座号：最小，最底部 */
            .dl-footer-row {
                width: 100%;
                display: flex;
                justify-content: center;
                gap: 0;
                font-size: 8pt; /* 最小 */
                color: #666;
                border-top: 1px solid #eee;
                background: #f9f9f9 !important; 
            }
            .dl-room-box, .dl-seat-box {
                padding: 0 4px;
            }
            .dl-seat-box {
                font-weight: bold;
                color: #000;
                border-left: 1px solid #ddd;
            }
        }
        .proctor-setup-grid { 
            display: grid; 
            grid-template-columns: 1.2fr 1fr; 
            gap: 20px; 
            margin-top: 15px; 
            background: #fff; 
            padding: 15px; 
            border-radius: 8px; 
            border: 1px solid #e2e8f0; 
        }
        .teacher-scroll-list { 
            max-height: 250px; 
            overflow-y: auto; 
            border: 1px solid #eee; 
            padding: 10px; 
            border-radius: 6px; 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
            gap: 8px; 
        }
        .teacher-item { 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            font-size: 12px; 
            padding: 4px; 
            background: #f8fafc; 
            border-radius: 4px; 
            cursor: pointer; 
        }
        .teacher-item:hover { background: #e0f2fe; }
        .role-group { 
            background: #f1f5f9; 
            padding: 10px; 
            border-radius: 6px; 
            margin-bottom: 10px; 
        }
        .role-label { 
            font-weight: bold; 
            font-size: 13px; 
            color: #334155; 
            margin-bottom: 5px; 
            display: block; 
        }
        .role-select { 
            width: 100%; 
            height: 80px; 
            font-size: 12px; 
            border: 1px solid #cbd5e1; 
            border-radius: 4px; 
        }

        .fb-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
        .fb-card { background: white; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; position: relative; transition: 0.2s; }
        .fb-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .traffic-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px;
        }
        .traffic-col {
            background: white; border-radius: 12px; padding: 15px;
            box-shadow: var(--shadow); border-top: 5px solid #ccc;
            display: flex; flex-direction: column; max-height: 400px;
        }
        .traffic-col.red { border-top-color: #ef4444; background: #fef2f2; }
        .traffic-col.yellow { border-top-color: #f59e0b; background: #fffbeb; }
        .traffic-col.green { border-top-color: #22c55e; background: #f0fdf4; }
        
        .traffic-head {
            font-weight: 800; font-size: 16px; margin-bottom: 15px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .traffic-head.red { color: #b91c1c; }
        .traffic-head.yellow { color: #b45309; }
        .traffic-head.green { color: #15803d; }
        
        .traffic-list { overflow-y: auto; padding-right: 5px; flex: 1; }
        
        .traffic-item {
            background: white; border: 1px solid rgba(0,0,0,0.05);
            padding: 10px; border-radius: 8px; margin-bottom: 8px;
            cursor: pointer; transition: 0.2s; position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .traffic-item:hover { transform: translateX(5px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        
        .t-school { font-weight: bold; font-size: 14px; color: #333; }
        .t-sub { font-size: 12px; color: #666; display: flex; justify-content: space-between; margin-top: 4px; }
        .t-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: bold; }
        
        .bg-red-light { background: #fee2e2; color: #b91c1c; }
        .bg-yellow-light { background: #fef3c7; color: #b45309; }
        .bg-green-light { background: #dcfce7; color: #15803d; }
        
        /* 移动端适配 */
        @media screen and (max-width: 768px) {
            .traffic-grid { grid-template-columns: 1fr; }
        }
        .fb-val { font-size: 24px; font-weight: 800; color: #1e293b; margin: 5px 0; }
        .fb-lbl { font-size: 12px; color: #64748b; }
        .fb-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; margin-top: 15px; }
        .fb-class-box { background: white; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; cursor: pointer; border-top: 4px solid var(--primary); transition: 0.2s; }
        .fb-class-box:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transform: scale(1.01); }
        .fb-c-head { padding: 10px 15px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
        .fb-c-body { padding: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
        .fb-warn-bg { background-color: #fef2f2 !important; border-color: #fca5a5 !important; }
        .fb-good-bg { background-color: #f0fdf4 !important; border-color: #86efac !important; }
        .fb-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; }
        .fb-tag-red { background: #fee2e2; color: #991b1b; }
        .seat-workspace { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
        .seat-tools { width: 280px; flex-shrink: 0; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .seat-canvas { flex: 1; background: white; border: 2px dashed #cbd5e1; border-radius: 8px; min-height: 600px; padding: 40px; display: flex; flex-direction: column; align-items: center; overflow-x: auto; position: relative; }
        .seat-stage { width: 60%; height: 40px; background: #cbd5e1; border-radius: 4px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; font-weight: bold; letter-spacing: 5px; color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .seat-container { display: grid; gap: 15px; padding: 10px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }
        .desk { width: 80px; height: 55px; background: #f1f5f9; border: 1px solid #94a3b8; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; user-select: none; cursor: grab; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .desk:hover { transform: scale(1.1); z-index: 10; border-color: var(--primary); background: #eff6ff; }
        .desk.dragging { opacity: 0.4; border: 2px dashed #333; }
        .desk.drag-over { background: #bfdbfe; transform: scale(1.05); }
        .desk.locked { border: 2px solid #334155 !important; background: #e2e8f0; cursor: not-allowed; }
        .desk.locked::after { content: '🔒'; position: absolute; top: -8px; right: -5px; font-size: 14px; z-index: 5; }

        .poster-workspace { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
        .poster-controls { width: 300px; background: white; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .poster-preview-area { flex: 1; background: #94a3b8; padding: 40px; display: flex; justify-content: center; overflow: auto; border-radius: 8px; min-height: 600px; }
        
        /* 核心海报容器 (手机竖屏比例 9:16) */
        .poster-canvas {
            width: 375px; min-height: 667px; background: white; position: relative; overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); transform-origin: top center; transition: 0.3s;
            display: flex; flex-direction: column;
        }

        /* --- 主题 1: 大红喜报 (Traditional Red) --- */
        .theme-red { background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%); color: #fff; font-family: "Microsoft YaHei", serif; }
        .theme-red::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 50% 30%, rgba(255,215,0,0.1) 0%, transparent 60%); pointer-events: none; }
        .theme-red .p-header { text-align: center; padding-top: 40px; padding-bottom: 20px; }
        .theme-red .p-title { font-size: 42px; font-weight: 900; color: #fcd34d; text-shadow: 2px 2px 0px #7f1d1d; letter-spacing: 5px; margin: 0; }
        .theme-red .p-sub { font-size: 16px; color: #fca5a5; margin-top: 5px; letter-spacing: 2px; }
        .theme-red .p-list { padding: 20px; flex: 1; }
        .theme-red .p-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.1); margin-bottom: 10px; padding: 10px 15px; border-radius: 8px; border: 1px solid rgba(255,215,0,0.3); }
        .theme-red .p-rank { font-size: 18px; font-weight: bold; color: #fcd34d; width: 30px; }
        .theme-red .p-name { font-size: 18px; font-weight: bold; flex: 1; text-align: left; padding-left: 10px; }
        .theme-red .p-score { font-size: 20px; font-weight: 900; color: #fff; }
        .theme-red .p-footer { text-align: center; padding: 20px; font-size: 12px; color: #fca5a5; opacity: 0.8; }

        /* --- 主题 2: 清爽蓝调 (Clean Blue) --- */
        .theme-blue { background: linear-gradient(135deg, #e0f2fe 0%, #fff 100%); color: #333; position: relative; }
        .theme-blue::after { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: #3b82f6; border-radius: 50%; opacity: 0.1; }
        .theme-blue .p-header { padding: 40px 20px 20px; border-bottom: 3px solid #3b82f6; }
        .theme-blue .p-title { font-size: 32px; font-weight: 800; color: #1e40af; margin: 0; }
        .theme-blue .p-sub { font-size: 14px; color: #64748b; margin-top: 5px; }
        .theme-blue .p-list { padding: 20px; }
        .theme-blue .p-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px dashed #cbd5e1; }
        .theme-blue .p-rank { background: #3b82f6; color: white; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 12px; font-weight: bold; }
        .theme-blue .p-item:nth-child(1) .p-rank { background: #f59e0b; transform: scale(1.2); }
        .theme-blue .p-item:nth-child(2) .p-rank { background: #94a3b8; transform: scale(1.1); }
        .theme-blue .p-item:nth-child(3) .p-rank { background: #b45309; transform: scale(1.1); }
        .theme-blue .p-name { font-size: 16px; font-weight: 600; color: #334155; flex: 1; padding-left: 15px; }
        .theme-blue .p-score { font-size: 18px; font-weight: bold; color: #2563eb; }
        .theme-blue .p-footer { position: absolute; bottom: 0; width: 100%; text-align: center; padding: 15px; background: #f0f9ff; color: #0369a1; font-size: 11px; }

        /* --- 主题 3: 科技风 (Cyber Tech) --- */
        .theme-tech { background: #0f172a; color: #e2e8f0; font-family: 'Segoe UI', sans-serif; position: relative; }
        .theme-tech::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px); background-size: 20px 20px; }
        .theme-tech .p-header { padding: 40px 20px; text-align: center; border-bottom: 1px solid #334155; background: rgba(15, 23, 42, 0.9); }
        .theme-tech .p-title { font-size: 36px; font-weight: 800; color: transparent; background: linear-gradient(to right, #38bdf8, #818cf8); -webkit-background-clip: text; text-transform: uppercase; letter-spacing: 2px; }
        .theme-tech .p-sub { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 4px; margin-top: 5px; }
        .theme-tech .p-list { padding: 15px; }
        .theme-tech .p-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; background: rgba(30, 41, 59, 0.6); padding: 10px; border-left: 4px solid #38bdf8; clip-path: polygon(0 0, 100% 0, 100% 85%, 98% 100%, 0 100%); }
        .theme-tech .p-rank { font-family: monospace; font-size: 16px; color: #38bdf8; font-weight: bold; width: 40px; }
        .theme-tech .p-name { font-size: 15px; font-weight: bold; color: #fff; flex: 1; }
        .theme-tech .p-score { font-family: monospace; font-size: 18px; color: #22d3ee; text-shadow: 0 0 5px rgba(34, 211, 238, 0.5); }
        .theme-tech .p-footer { text-align: center; padding: 20px; color: #475569; font-size: 10px; font-family: monospace; }

        .thumb-select { display: flex; gap: 5px; margin-bottom: 10px; }
        .thumb-btn { flex: 1; padding: 8px; border: 2px solid #e2e8f0; border-radius: 4px; cursor: pointer; text-align: center; font-size: 12px; }
        .thumb-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: bold; }
        
        /* 讲台视角翻转：容器转180度，但桌子里的字要转回来保持正立 */
        .seat-canvas.view-rotated { transform: rotate(180deg); border-color: #94a3b8; }
        .seat-canvas.view-rotated .seat-stage { transform: rotate(180deg); }
        .seat-canvas.view-rotated .desk { transform: rotate(-180deg); }
        .seat-canvas.view-rotated .learning-group-label { transform: rotate(-180deg); }
        .desk.is-male { border-left: 4px solid #3b82f6; } .desk.is-female { border-left: 4px solid #ec4899; } .desk.is-diff { background: #fef2f2; border: 2px solid #ef4444; }
        .desk-name { font-weight: bold; font-size: 14px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; }
        .desk-info { font-size: 10px; color: #64748b; transform: scale(0.9); display: flex; gap: 4px; }
        .desk-popover { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: rgba(15, 23, 42, 0.9); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: 0.2s; z-index: 20; }
        .desk:hover .desk-popover { opacity: 1; bottom: 120%; }

        /* 新增关联分析样式 */
        .heatmap-table th, .heatmap-table td { width: 50px; height: 35px; font-size: 12px; border: 1px solid white; text-align: center; }
        .heatmap-cell { transition: 0.2s; cursor: default; }
        .heatmap-cell:hover { transform: scale(1.2); z-index: 10; border: 1px solid #333; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border-radius:4px; }
        .contribution-bar { height: 18px; border-radius: 4px; display: flex; align-items: center; padding-left: 5px; font-size: 11px; color: white; transition: width 0.5s; white-space: nowrap; overflow: hidden; }
        
        /* 考后排座专用样式 */
        .desk-rank-A { background-color: #dcfce7; border-color: #22c55e; } /* 优 - Green */
        .desk-rank-B { background-color: #e0f2fe; border-color: #3b82f6; } /* 良 - Blue */
        .desk-rank-C { background-color: #fef9c3; border-color: #eab308; } /* 及 - Yellow */
        .desk-rank-D { background-color: #fee2e2; border-color: #ef4444; } /* 差 - Red */
        
        /* 学习小组容器 */
        .learning-group-box {
            position: absolute;
            border: 2px dashed #94a3b8;
            border-radius: 12px;
            pointer-events: none; /* 让鼠标事件穿透到下面的桌子 */
            z-index: 0;
            background: rgba(241, 245, 249, 0.3);
        }
        .learning-group-label {
            position: absolute;
            top: -10px;
            left: 10px;
            background: #94a3b8;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: bold;
        }
        
        /* 进退步分析专用 */
        .trend-up { color: var(--success); font-weight: bold; }
        .trend-down { color: var(--danger); font-weight: bold; }
        .trend-icon { font-size: 16px; vertical-align: middle; margin-right: 2px; }

        /* 互助分组卡片样式 */
        .aid-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        .aid-card {
            background: white;
            border-radius: 10px;
            padding: 0;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
            position: relative;
        }
        .aid-header {
            background: #f1f5f9;
            padding: 10px 15px;
            font-weight: bold;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
        .aid-body {
            padding: 10px;
        }
        .aid-role-row {
            display: flex;
            align-items: center;
            padding: 8px 5px;
            border-bottom: 1px dashed #e2e8f0;
        }
        .aid-role-row:last-child { border-bottom: none; }
        .aid-avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: #cbd5e1;
            color: #475569;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
            font-size: 12px;
        }
        .aid-leader .aid-avatar { background: var(--primary); color: white; }
        .aid-member .aid-avatar { background: #e2e8f0; }
        .aid-info { flex: 1; }
        .aid-name { font-weight: 600; color: #1e293b; }
        .aid-score { font-size: 12px; color: #64748b; margin-top: 2px; }
        .aid-tag { 
            font-size: 10px; padding: 2px 5px; border-radius: 4px; 
            margin-left: 5px; vertical-align: middle; 
        }
        .tag-strong { background: #dcfce7; color: #166534; }
        .tag-weak { background: #fee2e2; color: #991b1b; }
        .mobile-share-container {
            position: fixed; left: -9999px; top: 0; /* 移出屏幕外进行渲染 */
            width: 375px; min-height: 667px;
            background: #f8fafc; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            border: 1px solid #e2e8f0; overflow: hidden;
        }
        .m-header {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white; padding: 20px; text-align: center;
            border-radius: 0 0 20px 20px; margin-bottom: 15px;
        }
        .m-title { font-size: 18px; font-weight: bold; margin-bottom: 5px; }
        .m-sub { font-size: 12px; opacity: 0.9; }
        .m-card {
            background: white; margin: 10px 15px; padding: 15px;
            border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .m-card-title {
            font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px;
            border-left: 3px solid #2563eb; padding-left: 8px;
        }
        .m-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; text-align: center; }
        .m-stat-val { font-size: 16px; font-weight: bold; color: #2563eb; }
        .m-stat-lbl { font-size: 10px; color: #64748b; }
        .m-list-row {
            display: flex; justify-content: space-between; padding: 8px 0;
            border-bottom: 1px dashed #eee; font-size: 13px; color: #333;
        }
        .m-list-row:last-child { border-bottom: none; }
        .m-rank-badge {
            background: #e2e8f0; color: #64748b; width: 20px; height: 20px;
            border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            font-size: 10px; margin-right: 8px; font-weight: bold;
        }
        .m-top-1 { background: #fee2e2; color: #dc2626; }
        .m-top-2 { background: #ffedd5; color: #c2410c; }
        .m-top-3 { background: #fef9c3; color: #b45309; }
        .m-footer { text-align: center; padding: 20px; color: #cbd5e1; font-size: 10px; }

        /* ================== 临界生任务单专用样式 ================== */
        .mp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* A4纸一半宽度的卡片 */
            gap: 20px;
            margin-top: 20px;
        }

        .task-ticket {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            break-inside: avoid; /* 打印时避免从中间切断 */
            box-shadow: var(--shadow);
            transition: 0.2s;
        }
        .task-ticket:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border-color: var(--primary); }

        .ticket-header {
            background: #f8fafc;
            padding: 10px 15px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .ticket-title { font-weight: 800; font-size: 16px; color: #1e293b; }
        .ticket-sub { font-size: 12px; color: #64748b; }

        .ticket-body { padding: 0; }
        .ticket-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .ticket-table th { background: #f1f5f9; padding: 6px; text-align: center; color: #475569; font-size: 12px; }
        .ticket-table td { border-bottom: 1px solid #f1f5f9; padding: 8px 6px; text-align: center; }
        .ticket-table tr:last-child td { border-bottom: none; }

        .tag-gap { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: bold; }
        .gap-red { background: #fee2e2; color: #991b1b; } /* 差很多 */
        .gap-orange { background: #ffedd5; color: #9a3412; } /* 差一点 */
        .gap-green { background: #dcfce7; color: #166534; } /* 踩线 */

        .chk-box { width: 16px; height: 16px; border: 1px solid #cbd5e1; border-radius: 3px; display: inline-block; vertical-align: middle; }
    /* 1. 全局加载遮罩 (Loading) */
    #global-loader {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255, 255, 255, 0.9); z-index: 20000;
        display: flex; justify-content: center; align-items: center;
        flex-direction: column; backdrop-filter: blur(2px);
        transition: opacity 0.3s;
    }
    .loader-spinner {
        width: 50px; height: 50px; border: 5px solid #e2e8f0;
        border-top: 5px solid var(--primary); border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    .loader-text { margin-top: 15px; color: #64748b; font-weight: 600; font-size: 16px; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* 骨架屏动画效果 */
    .skeleton {
        background: #f0f2f5;
        background-image: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
        border-radius: 4px;
        color: transparent !important;
    }
    .skeleton * { visibility: hidden; }
    @keyframes skeleton-loading {
        0% { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
    }
    /* 骨架屏布局占位 */
    .sk-block { width: 100%; height: 20px; margin-bottom: 10px; }
    .sk-card { background: white; padding: 20px; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .sk-header { height: 60px; width: 60%; margin: 0 auto 20px; }
    .sk-row { display: flex; gap: 10px; margin-bottom: 10px; }
    .sk-col { flex: 1; height: 40px; }
    .sk-chart { height: 200px; width: 100%; margin-bottom: 15px; }

    
    /* 2. 消息提示 (Toast) - 替代原生丑陋的 alert */
    .toast-container {
        position: fixed; top: 30px; left: 50%; transform: translateX(-50%);
        z-index: 21000; display: flex; flex-direction: column; gap: 10px;
        pointer-events: none; /* 让鼠标穿透，不影响下方操作 */
    }
    .toast-msg {
        background: white; color: #333; padding: 12px 24px; border-radius: 50px;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
        font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
        animation: toastSlideDown 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        border: 1px solid #e2e8f0; min-width: 200px; justify-content: center;
    }
    .toast-success { border-left: 4px solid var(--success); }
    .toast-error { border-left: 4px solid var(--danger); }
    .toast-info { border-left: 4px solid var(--primary); }
    @keyframes toastSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .spotlight-mask {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.8); z-index: 30000;
            display: none; justify-content: center; padding-top: 100px; backdrop-filter: blur(4px);
        }
        .spotlight-box {
            width: 100%; max-width: 600px; background: var(--bg-card);
            border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            overflow: hidden; border: 1px solid var(--primary);
        }
        .spotlight-input-wrap { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border); }
        .spotlight-input { border: none !important; flex: 1; font-size: 18px; outline: none; background: transparent; }
        .spotlight-results { max-height: 400px; overflow-y: auto; }
        .spotlight-item { 
            padding: 12px 20px; display: flex; justify-content: space-between; 
            cursor: pointer; transition: 0.2s; border-bottom: 1px solid var(--border);
        }
        .spotlight-item:hover { background: var(--primary-light); color: var(--primary); }
        .spotlight-hint { padding: 10px; font-size: 12px; color: #94a3b8; text-align: center; }
        .login-tab {
            flex: 1; text-align: center; padding: 8px; font-size: 13px; font-weight: 600; 
            color: #64748b; cursor: pointer; border-radius: 6px; transition: 0.2s;
        }
        .login-tab.active { background: white; color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

        /* --- 角色视图控制核心 (根据 body 的 data-role 属性显隐元素) --- */

        /* 1. 家长模式：极简，隐藏绝大多数功能，只保留查分结果 */
        body[data-role="parent"] header, 
        body[data-role="parent"] .nav-wrapper, 
        body[data-role="parent"] .control-panel,
        body[data-role="parent"] #voice-fab,
        body[data-role="parent"] .voice-hud,
        body[data-role="parent"] .spotlight-mask,
        body[data-role="parent"] #mode-mask { 
            display: none !important; 
        }
        /* 家长只显示特定的结果容器 */
        body[data-role="parent"] #parent-view-container { display: block !important; }
        /* 隐藏普通 App 主容器 */
        body[data-role="parent"] #app { display: none !important; }

        /* 2. 教师模式：隐藏敏感操作 */
        /* 隐藏绩效考核(涉及到钱/奖金)、隐藏重置系统按钮、隐藏管理员面板 */
        body[data-role="teacher"] #single-school-eval, 
        body[data-role="teacher"] .module-desc-bar button[onclick*="resetSystem"], 
        body[data-role="teacher"] #admin-panel-btn { 
            display: none !important;
        }

        /* 3. 教务主任模式：隐藏账号管理，但可以看绩效 */
        body[data-role="director"] #admin-panel-btn { 
            display: none !important; 
        }

        /* 4. 管理员模式：显示管理入口 (默认隐藏，只有 admin 才显示) */
        #admin-panel-btn { display: none; }
        body[data-role="admin"] #admin-panel-btn { display: inline-flex !important; }

        /* 通用：退出登录按钮 (悬浮在右上角) */
        #logout-btn {
            position: fixed; top: 10px; right: 10px; z-index: 10000;
            background: rgba(0,0,0,0.6); color: white; padding: 6px 12px;
            border-radius: 20px; font-size: 12px; cursor: pointer;
            backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2);
            transition: 0.2s; display: flex; align-items: center; gap: 5px;
        }
        #logout-btn:hover { background: #b91c1c; }

/* 1. 表格容器限制高度 */
#student-details .table-wrap {
    max-height: 75vh !important;
    overflow: auto !important;
    position: relative;
    border: 1px solid #cbd5e1;
}

/* 2. 表头固定 (Sticky Header) */
#studentDetailTable thead th {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f1f5f9;
    color: #334155;
    border-bottom: 2px solid #cbd5e1;
    height: 45px; /* 高度调回正常 */
    vertical-align: middle;
    padding: 0; /* 此时padding由内部div控制 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 3. 左侧三列固定 */
#studentDetailTable th:nth-child(1), #studentDetailTable td:nth-child(1) {
    position: sticky; left: 0; z-index: 10; background: inherit; width: 120px; min-width: 120px; border-right: 1px solid #e2e8f0;
}
#studentDetailTable th:nth-child(2), #studentDetailTable td:nth-child(2) {
    position: sticky; left: 120px; z-index: 10; background: inherit; width: 80px; min-width: 80px; border-right: 1px solid #e2e8f0;
}
#studentDetailTable th:nth-child(3), #studentDetailTable td:nth-child(3) {
    position: sticky; left: 200px; z-index: 10; background: inherit; width: 100px; min-width: 100px; border-right: 2px solid #94a3b8;
}
/* 表头交叉区层级最高 */
#studentDetailTable thead th:nth-child(1), #studentDetailTable thead th:nth-child(2), #studentDetailTable thead th:nth-child(3) {
    z-index: 200; background: #e2e8f0;
}

/* 4. Excel 风格表头布局 */
.excel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    height: 100%;
    cursor: pointer;
    user-select: none;
    position: relative; /* 关键：用于定位下拉菜单 */
}
.excel-header:hover { background-color: #e2e8f0; }
.header-text { flex: 1; text-align: center; font-size: 13px; font-weight: bold; }

/* 5. 筛选/排序图标 */
.filter-icon-btn {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; color: #94a3b8; margin-left: 5px;
    transition: 0.2s;
}
.filter-icon-btn:hover { background: #cbd5e1; color: #333; }
.filter-icon-btn.active { color: var(--primary); background: #e0e7ff; }

/* 6. Excel 下拉筛选菜单 */
.excel-filter-menu {
    position: absolute;
    top: 100%; right: 0; /* 对齐右侧 */
    width: 250px;
    background: white;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border-radius: 6px;
    z-index: 1000 !important; /* 确保浮在最上层 */
    display: none; /* 默认隐藏 */
    flex-direction: column;
    padding: 5px 0;
    text-align: left;
    font-weight: normal;
    color: #333;
}
.excel-filter-menu.show { display: flex; }

#studentDetailTable th:nth-child(1) .excel-filter-menu,
#studentDetailTable th:nth-child(2) .excel-filter-menu {
    right: auto;
    left: 0;
}

/* 菜单内部样式 */
.menu-actions {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; gap: 5px;
    flex-direction: column;
}
.menu-search {
    width: 100%; padding: 6px;
    border: 1px solid #cbd5e1; border-radius: 4px;
    font-size: 12px; outline: none;
}
.menu-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 0;
}
.menu-item {
    padding: 5px 12px;
    font-size: 12px;
    display: flex; align-items: center;
    cursor: pointer;
}
.menu-item:hover { background-color: #f1f5f9; }
.menu-item input { margin-right: 8px; transform: scale(1.2); }
.menu-footer {
    padding: 8px;
    border-top: 1px solid #f1f5f9;
    display: flex; justify-content: flex-end; gap: 8px;
}

        /* === 1. Instagram 风格查分卡片 (仿照 IG 社交媒体布局) === */
        .insta-view-container {
            background-color: #fafafa; /* IG 经典浅灰底 */
            min-height: 100vh;
            padding-bottom: 60px;
            max-width: 100%;
            overflow-x: hidden;
        }

        .insta-card {
            background: #ffffff;
            border: 1px solid #dbdbdb;
            border-radius: 3px; /* IG 网页版是直角或小圆角，App是大圆角，这里取中间值 */
            margin: 0 auto 20px auto;
            max-width: 600px; /* 限制最大宽度，平板上不至于太宽 */
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 卡片头部：头像 + 用户名 + 更多 */
        .insta-header {
            padding: 14px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #efefef;
        }

        .insta-avatar-ring {
            width: 42px;
            height: 42px;
            padding: 2px;
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* IG 品牌渐变圈 */
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .insta-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #fff; /* 白色内边框 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #333;
            font-size: 14px;
            overflow: hidden;
        }
        
        .insta-avatar img { width: 100%; height: 100%; object-fit: cover; }

        .insta-user-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .insta-username {
            font-weight: 600;
            font-size: 14px;
            color: #262626;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .insta-verified { color: #3897f0; font-size: 12px; } /* 蓝V */

        .insta-location {
            font-size: 12px;
            color: #262626;
        }

        /* 图片区域 (图表容器) */
        .insta-visual-area {
            width: 100%;
            background-color: #fff;
            position: relative;
            /* 保持正方形或 4:5 比例，这里自适应高度 */
            min-height: 300px; 
            padding: 20px 10px;
            box-sizing: border-box;
        }

        /* 轮播指示点 (模拟) */
        .insta-dots {
            display: flex;
            justify-content: center;
            padding: 10px 0;
            gap: 4px;
        }
        .insta-dot {
            width: 6px; height: 6px; border-radius: 50%; background: #dbdbdb;
        }
        .insta-dot.active { background: #0095f6; }

        /* 操作栏：心形、评论、分享 */
        .insta-actions {
            padding: 0 14px;
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            margin-bottom: 10px;
        }
        .insta-action-left { display: flex; gap: 16px; }
        .insta-icon { cursor: pointer; transition: transform 0.2s; color: #262626; }
        .insta-icon:hover { transform: scale(1.1); }
        .insta-icon.liked { color: #ed4956; animation: insta-heart-beat 0.3s; }

        @keyframes insta-heart-beat {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        /* 点赞数 */
        .insta-likes {
            padding: 0 14px;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 8px;
            color: #262626;
        }

        /* 成绩描述 (Caption) */
        .insta-caption {
            padding: 0 14px;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 8px;
        }
        .insta-caption-name { font-weight: 600; margin-right: 5px; }
        
        .insta-tags { color: #00376b; margin-top: 5px; display: block; }

        /* 评论区 (展示单科详情) */
        .insta-comments {
            padding: 0 14px 14px 14px;
            font-size: 14px;
        }
        .insta-comment-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .insta-comm-user { font-weight: 600; margin-right: 5px; }
        .insta-comm-text { color: #262626; }
        .insta-comm-score { font-weight: bold; color: #262626; }
        .insta-comm-rank { font-size: 12px; color: #8e8e8e; margin-left: 5px; }

        .insta-timestamp {
            padding: 0 14px 14px;
            font-size: 10px;
            color: #8e8e8e;
            text-transform: uppercase;
        }

        /* === 2. 手机端管理界面样式 (Teacher/Admin Mobile) === */
        #mobile-manager-app {
            display: none; /* 默认隐藏，JS控制显示 */
            padding-bottom: 70px;
            background: #f3f4f6;
            min-height: 100vh;
        }

        .mob-header-bar {
            background: #fff;
            padding: 15px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .mob-header-title { font-weight: 800; font-size: 18px; color: #1e293b; }

        /* 手机端底部导航栏 (固定) */
        .mob-bottom-bar {
            position: fixed;
            bottom: 0; left: 0; width: 100%;
            height: 60px;
            background: #ffffff;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 9999;
            padding-bottom: env(safe-area-inset-bottom);
        }

        .mob-nav-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 10px;
            height: 100%;
            background: none; border: none;
        }
        
        .mob-nav-btn i { font-size: 24px; margin-bottom: 2px; transition: 0.2s; }
        .mob-nav-btn.active { color: #4f46e5; }
        .mob-nav-btn.active i { transform: translateY(-2px); }

        /* 手机端卡片列表 */
        .mob-list-container { padding: 10px; }
        
        .mob-list-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .mob-avatar {
            width: 45px; height: 45px;
            border-radius: 50%;
            background: #e0e7ff;
            color: #4f46e5;
            display: flex; align-items: center; justify-content: center;
            font-weight: bold; font-size: 16px;
        }
        
        .mob-info { flex: 1; }
        .mob-name { font-weight: bold; font-size: 16px; color: #1e293b; }
        .mob-detail { font-size: 12px; color: #64748b; margin-top: 2px; }
        
        .mob-score-badge {
            background: #f0fdf4; color: #166534;
            padding: 4px 8px; border-radius: 6px;
            font-weight: bold; font-size: 14px;
        }

        /* 手机端适配调整 */
        @media screen and (max-width: 768px) {
            /* 如果在手机上，且不是家长模式，隐藏PC端的某些悬浮元素 */
            #back-to-top { bottom: 80px !important; } /* 避开底部导航 */
            .voice-fab { bottom: 150px !important; }
        }


    /* 1. 全局字体与背景 (Mica 材质模拟) */
        body {
            font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei", sans-serif !important;
            background-color: #f0f3f9 !important; /* Win11 浅色背景 */
            background-image: 
                radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, hsla(253,16%,7%,0) 50%), 
                radial-gradient(at 50% 0%, hsla(225,39%,30%,0) 0, hsla(225,39%,30%,0) 50%), 
                radial-gradient(at 100% 0%, hsla(339,49%,30%,0) 0, hsla(339,49%,30%,0) 50%) !important;
            color: #202020 !important;
            -webkit-font-smoothing: antialiased;
        }

        /* 2. 卡片与容器：亚克力磨砂玻璃效果 */
        .card-box, .section, .nav-wrapper, .modal-content, .spotlight-box, .side-nav, .control-panel {
            background: rgba(255, 255, 255, 0.75) !important; /* 半透明白 */
            backdrop-filter: blur(20px) saturate(125%) !important; /* 核心：高斯模糊 */
            border: 1px solid rgba(255, 255, 255, 0.6) !important; /* 玻璃边缘光 */
            box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.06) !important; /* 弥散阴影 */
            border-radius: 12px !important; /* Win11 标准圆角 */
        }

        /* 3. 顶部 Header：去除重色，改为清爽风格 */
        header {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.03) !important;
            color: #333 !important;
            margin-bottom: 20px !important;
        }
        /* 强制标题文字颜色变深，适应浅色背景 */
        header h1, header p, header .btn {
            color: #1a1a1a !important;
            text-shadow: none !important;
        }
        header .btn {
            background: rgba(255,255,255,0.5) !important;
            border: 1px solid rgba(0,0,0,0.1) !important;
        }
        header .btn:hover {
            background: white !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* 4. 按钮：扁平化 + 微动效 */
        .btn {
            border-radius: 6px !important; /* Win11 按钮圆角 */
            border: 1px solid transparent !important;
            font-weight: 600 !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
        }
        .btn:active {
            transform: scale(0.96) !important; /* 点击缩放 */
            opacity: 0.8;
        }
        /* 主色按钮 */
        .btn-primary, button[onclick*="login"] {
            background-color: #0067c0 !important; /* Win11 默认蓝 */
            color: white !important;
        }
        .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-purple):not(.btn-orange) {
            background-color: #ffffff !important;
            border: 1px solid #d1d5db !important;
            color: #333 !important;
        }
        .btn:not(.btn-primary):not(.btn-danger):hover {
            background-color: #f3f4f6 !important;
        }

        /* 5. 输入框：底部高亮线风格 */
        input[type="text"], input[type="number"], input[type="password"], select, textarea {
            background-color: rgba(255,255,255,0.6) !important;
            border: 1px solid #d1d5db !important;
            border-bottom: 2px solid #d1d5db !important; /* 底部加粗 */
            border-radius: 6px !important;
            transition: all 0.2s !important;
            color: #333 !important;
        }
        input:focus, select:focus, textarea:focus {
            background-color: #fff !important;
            border-color: #d1d5db !important;
            border-bottom-color: #0067c0 !important; /* 聚焦变蓝 */
            box-shadow: none !important;
        }

        /* 6. 表格：极简风，去竖线 */
        table {
            border-collapse: separate !important;
            border-spacing: 0 !important;
        }
        thead th {
            background: transparent !important;
            border-bottom: 1px solid #e5e7eb !important;
            color: #64748b !important;
            font-size: 12px !important;
            text-transform: none !important;
            padding: 12px 8px !important;
        }
        /* 悬浮行效果 */
        tbody tr {
            transition: background 0.1s !important;
            border-radius: 6px !important;
        }
        tbody tr:hover td {
            background-color: rgba(0, 0, 0, 0.03) !important; /* 极淡的灰 */
        }
        td {
            border-right: none !important; /* 去除竖线 */
            border-bottom: 1px solid #f1f5f9 !important;
            padding: 12px 8px !important;
        }
        /* 修复首列冻结的背景 */
        table th:first-child, table td:first-child {
            background: rgba(255,255,255,0.95) !important; 
            backdrop-filter: blur(10px);
        }

        /* 7. 导航栏：胶囊样式 */
        .nav-wrapper {
            background: rgba(255, 255, 255, 0.8) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
            border: 1px solid rgba(255,255,255,0.5) !important;
            padding: 5px !important;
        }
        .nav-categories {
            background: transparent !important;
            gap: 5px !important;
            padding: 5px !important;
        }
        .nav-cat-item {
            color: #666 !important;
            border-radius: 4px !important;
            border-bottom: none !important;
            padding: 8px 16px !important;
            background: transparent !important;
        }
        .nav-cat-item:hover {
            background-color: rgba(0,0,0,0.05) !important;
        }
        .nav-cat-item.active {
            background-color: #ffffff !important;
            color: #0067c0 !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            font-weight: 700 !important;
        }
        /* 二级导航胶囊 */
        .nav-link {
            border-radius: 20px !important;
            background: transparent !important;
            border: none !important;
        }
        .nav-link:hover {
            background: rgba(0,0,0,0.05) !important;
        }
        .nav-link.active {
            background: #0067c0 !important;
            color: white !important;
            box-shadow: 0 2px 8px rgba(0, 103, 192, 0.3) !important;
        }

        /* 8. 弹窗 Modal：居中悬浮卡片 */
        .modal {
            background: rgba(0, 0, 0, 0.4) !important;
            backdrop-filter: blur(5px) !important; /* 背景虚化 */
        }
        .modal-content {
            border: 1px solid rgba(255,255,255,0.8) !important;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
            animation: modalPop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
        }
        @keyframes modalPop {
            0% { transform: scale(0.95); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* 9. 滚动条美化 (Overlay Scrollbars) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 10. 修复左侧导航 (Side Nav) */
        .side-nav {
            background: rgba(255,255,255,0.6) !important;
            border: none !important;
        }
        .side-nav-link.active {
            background: rgba(0, 103, 192, 0.1) !important;
            color: #0067c0 !important;
            border-left: 3px solid #0067c0 !important;
        }

        /* 11. 消息提示 Toast */
        .toast-msg {
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255,255,255,0.5) !important;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
        }

    /* ================== 【终极版】全域沉浸式深色模式 (Immersive Dark Mode) ================== */
    /* 核心逻辑：强制将所有白色半透明容器改为深灰半透明，文字反白 */

    /* 1. 整体背景：深邃黑 */
    body.dark-mode {
        background-color: #0f0f0f !important;
        background-image: none !important; /* 去掉花哨背景，保持纯净深色 */
        color: #e0e0e0 !important;
    }

    /* 2. 核心容器变黑 (卡片、头部、导航、弹窗、侧边栏) */
    body.dark-mode .card-box, 
    body.dark-mode .section, 
    body.dark-mode .nav-wrapper, 
    body.dark-mode .modal-content, 
    body.dark-mode .spotlight-box,
    body.dark-mode .side-nav, 
    body.dark-mode .control-panel,
    body.dark-mode .upload-box,
    body.dark-mode header,
    body.dark-mode .teacher-card,  /* 教师卡片 */
    body.dark-mode .mob-card,      /* 手机端卡片 */
    body.dark-mode .sub-header     /* 小标题栏 */
    {
        background: rgba(30, 30, 30, 0.85) !important; /* 深灰色背景 */
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important; /* 极细的亮边 */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; /* 深色阴影 */
        color: #e0e0e0 !important;
    }

    /* 3. 强制文字反白 */
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
    body.dark-mode p, body.dark-mode span, body.dark-mode label, 
    body.dark-mode div, body.dark-mode strong, body.dark-mode b,
    body.dark-mode .nav-cat-item, 
    body.dark-mode .side-nav-link {
        color: #e0e0e0 !important;
    }
    /* 弱化次要文字 */
    body.dark-mode .text-gray, body.dark-mode small, body.dark-mode .nav-link {
        color: #a0a0a0 !important;
    }

    /* 4. 输入框、下拉框：深灰底白字 */
    body.dark-mode input, 
    body.dark-mode select, 
    body.dark-mode textarea {
        background-color: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }
    body.dark-mode input:focus, body.dark-mode select:focus {
        border-color: #3b82f6 !important; /* 聚焦时亮蓝边 */
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* 5. 按钮：微调 */
    body.dark-mode .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    /* 6. 表格特殊处理 */
    body.dark-mode thead th {
        background-color: rgba(45, 45, 45, 0.9) !important; /* 表头稍亮 */
        color: #ccc !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    body.dark-mode td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: #e0e0e0 !important;
    }
    /* 冻结列背景必须变黑，否则滚动时会透出文字 */
    body.dark-mode table th:first-child, 
    body.dark-mode table td:first-child {
        background: #1e1e1e !important;
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }
    /* 鼠标悬停行高亮 */
    body.dark-mode tbody tr:hover td {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* 7. 导航栏激活状态 */
    body.dark-mode .nav-cat-item.active,
    body.dark-mode .nav-link.active,
    body.dark-mode .side-nav-link.active {
        background-color: #3b82f6 !important; /* 亮蓝色 */
        color: white !important;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important; /* 发光效果 */
    }
    
    /* 8. 去除白色背景的补丁 */
    body.dark-mode .bg-gray-50, 
    body.dark-mode .bg-white {
        background-color: transparent !important;
    }

    /* ================== 3. 字体层级与间距优化 (Typography & Spacing) ================== */
    
    /* A. 增加表格舒适度 (Loose Display) */
    td, th {
        padding: 14px 12px !important; /* 增加上下内边距，让数据不拥挤 */
        font-size: 13px !important;    /* 稍微调小字号，显得更精致 */
    }

    /* B. 强调数字列字体 (Tabular Nums) */
    /* 从第3列开始通常是数字，使用等宽字体对齐更整齐 */
    td:nth-child(n+3) {
        font-family: "Cascadia Code", "Consolas", "Roboto Mono", "Menlo", monospace !important;
        letter-spacing: -0.5px; /* 数字稍微紧凑一点 */
        font-feature-settings: "tnum"; /* 开启等宽数字特性 */
    }

    /* C. 模块标题增加呼吸感 */
    .sec-head {
        margin-bottom: 25px !important;
        padding-bottom: 15px !important;
        border-bottom-width: 1px !important; /* 细线更现代 */
    }

    /* D. 优化卡片内间距 */
    .card-box, .section {
        padding: 25px !important; /* 加大卡片内边距 */
    }
    
    /* E. 优化统计数字字重 */
    .stat-value, .fb-val, .total-val {
        font-weight: 700 !important;
        letter-spacing: -1px !important; /* 大数字紧凑更具张力 */
    }

    /* ================== 4. 骨架屏加载效果 (Skeleton Loading) ================== */
    
    /* A. 定义微光流体动画 (Shimmer Animation) */
    @keyframes skeleton-shimmer {
        0% { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
    }

    /* B. 表格加载态容器 */
    /* 当给 table 或 div 加上 class="loading-mask" 时触发 */
    .loading-mask {
        position: relative;
        pointer-events: none; /* 禁止点击 */
        min-height: 200px;
    }

    /* C. 覆盖在内容上的骨架层 */
    .loading-mask::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 10;
        /* 浅色模式下的骨架背景：灰白相间流光 */
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 20%,
            rgba(240, 240, 240, 0.9) 50%,
            rgba(255, 255, 255, 0.8) 80%,
            rgba(255, 255, 255, 0) 100%
        );
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.5s infinite linear;
        backdrop-filter: blur(2px); /* 轻微模糊底层文字 */
        border-radius: 8px;
    }

    /* D. 针对表格行的条纹骨架 (更逼真) */
    /* 自动匹配空表格或加载中的表格 */
    .loading-mask tbody tr td {
        position: relative;
        color: transparent !important; /* 隐藏真实文字 */
    }
    .loading-mask tbody tr td::before {
        content: "";
        position: absolute;
        top: 12px; bottom: 12px; left: 10px; right: 10px;
        background: #e2e8f0;
        border-radius: 4px;
        /* 骨架条的微光效果 */
        background-image: linear-gradient(
            90deg, 
            rgba(255,255,255, 0) 0, 
            rgba(255,255,255, 0.5) 20%, 
            rgba(255,255,255, 0.8) 60%, 
            rgba(255,255,255, 0) 
        );
        background-size: 200% 100%;
        animation: skeleton-shimmer 2s infinite linear;
    }

    /* E. 深色模式适配 (Dark Mode Skeleton) */
    body.dark-mode .loading-mask::after {
        /* 深色模式下的流光：深灰到黑 */
        background: linear-gradient(
            90deg,
            rgba(30, 30, 30, 0) 0%,
            rgba(50, 50, 50, 0.5) 50%,
            rgba(30, 30, 30, 0) 100%
        );
    }
    body.dark-mode .loading-mask tbody tr td::before {
        background: #2d2d2d; /* 深色骨架条底色 */
        background-image: linear-gradient(
            90deg, 
            rgba(255,255,255, 0) 0, 
            rgba(255,255,255, 0.05) 50%, 
            rgba(255,255,255, 0) 
        );
    }
    /* ================== 5. 移动端底部导航质感增强 (Mobile Glassmorphism) ================== */
    @media screen and (max-width: 768px) {
        .mob-bottom-nav {
            background: rgba(255, 255, 255, 0.85) !important; /* 高透白 */
            backdrop-filter: blur(20px) saturate(180%) !important; /* iOS 风格毛玻璃 */
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border-top: 1px solid rgba(0,0,0,0.05) !important;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.05) !important;
            /* 适配全面屏底部横条 (Safe Area) */
            padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; 
            height: auto !important;
            min-height: 65px;
            z-index: 99999 !important; /* 确保最顶层 */
        }

        .mob-nav-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0.6;
            padding-top: 8px;
        }

        .mob-nav-item.active {
            color: #0067c0 !important;
            opacity: 1;
            transform: translateY(-2px); /* 选中微浮动 */
        }

        /* 选中时图标加个胶囊微光背景 */
        .mob-nav-item.active i {
            background: rgba(0, 103, 192, 0.1);
            border-radius: 16px;
            padding: 6px 20px;
            margin-bottom: 2px;
            transition: 0.3s;
        }

        /* --- 深色模式适配 (Dark Mode Mobile Nav) --- */
        body.dark-mode .mob-bottom-nav {
            background: rgba(30, 30, 30, 0.85) !important;
            border-top-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.5) !important;
        }
        
        body.dark-mode .mob-nav-item {
            color: #a0a0a0 !important;
        }

        body.dark-mode .mob-nav-item.active {
            color: #3b82f6 !important;
        }
        
        body.dark-mode .mob-nav-item.active i {
            background: rgba(59, 130, 246, 0.25);
            color: #ffffff !important;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
        }
    }

        /* 钻取弹窗专用样式 */
        .drill-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
        .drill-class-card { 
            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; 
            cursor: pointer; transition: all 0.2s; text-align: center;
        }
        .drill-class-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-color: var(--primary); background: #eff6ff; }
        .drill-val { font-size: 18px; font-weight: 800; color: var(--primary); margin: 5px 0; }
        .drill-label { font-size: 12px; color: #64748b; }
        
        .drill-stu-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .drill-stu-tag { 
            background: white; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 4px; 
            font-size: 13px; display: flex; align-items: center; gap: 5px;
        }
        .drill-stu-score { color: var(--primary); font-weight: bold; font-family: monospace; }
        .clickable-num { cursor: pointer; text-decoration: underline; color: var(--primary); font-weight: bold; }
        .clickable-num:hover { color: #d97706; }