* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; background:#f4f5f7; color:#1f2937; }
.hidden { display:none !important; }
/* 顶栏 */
.topbar { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#fff; border-bottom:1px solid #e5e7eb; }
.topbar .brand { font-size:14px; font-weight:700; color:#374151; }
.topbar .meta { display:flex; gap:18px; align-items:center; font-size:13px; color:#6b7280; }
.topbar .meta b { color:#4f46e5; }
/* 整页提示（token 错误等） */
.fullmsg { display:flex; align-items:center; justify-content:center; height:100vh; font-size:16px; color:#6b7280; }
/* 布局 */
.layout { display:flex; height:calc(100vh - 46px - 48px); }
.nav { width:200px; background:#fff; border-right:1px solid #e5e7eb; flex-shrink:0; overflow-y:auto; }
.nav h2 { padding:12px; font-size:12px; color:#6b7280; border-bottom:1px solid #eee; font-weight:600; }
.vid-item { padding:11px 13px; cursor:pointer; border-bottom:1px solid #f0f0f0; display:flex; gap:8px; align-items:flex-start; }
.vid-item:hover { background:#f3f4f6; } .vid-item.active { background:#eef2ff; border-left:3px solid #6366f1; }
.vid-item .ic { font-size:13px; line-height:1.5; }
.vid-item .ic.done { color:#10b981; } .vid-item .ic.part { color:#f59e0b; } .vid-item .ic.todo { color:#d1d5db; }
.vid-item .cat { font-size:11px; color:#6366f1; margin-bottom:3px; }
.vid-item .title { font-size:12px; color:#374151; line-height:1.4; }
.center { flex:1; display:flex; overflow:hidden; }
.video-panel { width:400px; flex-shrink:0; display:flex; flex-direction:column; background:#1b1b1b; }
.video-container { flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.video-container video { height:100%; max-width:100%; object-fit:contain; }
.video-title { padding:8px 12px; font-size:12px; color:#e5e7eb; background:#111; border-bottom:1px solid #000; line-height:1.5; }
.subtitle-overlay { position:absolute; bottom:60px; left:10px; right:10px; text-align:center; pointer-events:none; z-index:10; }
.subtitle-text { display:inline-block; background:rgba(0,0,0,0.62); color:#fff; font-size:14px; line-height:1.5; padding:4px 10px; border-radius:4px; max-width:100%; }
.subtitle-text:empty { display:none; }
.tasks-panel { flex:1; overflow-y:auto; padding:20px; }
.task-card { background:#fff; border-radius:10px; padding:18px; margin-bottom:16px; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.task-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.task-type { font-size:11px; padding:3px 9px; border-radius:5px; font-weight:600; }
.task-type.future_prediction{background:#fff1e6;color:#c2410c;} .task-type.perception_localization{background:#e6faf8;color:#0f766e;}
.task-type.interaction_dynamics{background:#fef9e7;color:#a16207;} .task-type.historical_understanding{background:#f3effe;color:#6d28d9;}
.task-type.causal_attribution{background:#fdeef6;color:#be185d;}
.task-id { font-size:11px; color:#9ca3af; }
.time-range { font-size:12px; color:#4f46e5; cursor:pointer; padding:3px 10px; border-radius:5px; background:#eef2ff; white-space:nowrap; }
.cutoff-badge { font-size:12px; color:#c2410c; cursor:pointer; padding:3px 10px; border-radius:5px; background:#fff1e6; white-space:nowrap; font-weight:600; }
.question { font-size:14px; line-height:1.7; margin-bottom:10px; color:#111827; }
.opts-head { display:flex; gap:10px; margin-bottom:8px; align-items:center; }
.ref-btn { font-size:12px; padding:5px 12px; border-radius:6px; border:1px solid #d1d5db; color:#374151; background:#fff; cursor:pointer; }
.ref-btn:hover { background:#f3f4f6; } .ref-btn.on { background:#059669; color:#fff; border-color:#059669; }
.en-btn { font-size:13px; font-weight:700; padding:6px 16px; border-radius:6px; border:none; color:#fff; background:linear-gradient(90deg,#0ea5e9,#14b8a6); cursor:pointer; box-shadow:0 1px 3px rgba(14,165,233,.4); }
.en-btn:hover { filter:brightness(1.08); } .en-btn.on { background:linear-gradient(90deg,#0284c7,#0d9488); }
.options { list-style:none; }
.options li { padding:8px 12px; margin-bottom:6px; border-radius:7px; font-size:13px; line-height:1.5; background:#f9fafb; border:1px solid #e5e7eb; cursor:pointer; transition:all .12s; }
.options li:hover { border-color:#a5b4fc; }
.options li.picked { background:#eef2ff; border-color:#6366f1; color:#4338ca; font-weight:600; box-shadow:inset 3px 0 0 #6366f1; }
.options li.refcorrect { background:#ecfdf5; border-color:#10b981; }
.options li.refcorrect::after { content:" ✓标注答案"; color:#059669; font-size:11px; font-weight:600; }
.en-block { display:none; background:#f0fdfa; border-radius:7px; padding:12px; margin-top:8px; border:1px solid #99f6e4; }
.en-block.show { display:block; } .en-block .question { font-size:13px; color:#374151; }
.en-block .options li { cursor:default; background:#fff; } .en-block .options li:hover{border-color:#e5e7eb;}
.evidence-block { display:none; background:#f9fafb; border-radius:7px; padding:12px; margin-top:8px; border:1px solid #e5e7eb; }
.evidence-block.show { display:block; }
.evidence-block h4 { font-size:11px; color:#6b7280; margin-bottom:6px; text-transform:uppercase; }
.evidence-block p,.evidence-block li { font-size:12px; line-height:1.7; color:#4b5563; }
.evidence-block ul { padding-left:16px; } .explanation { margin-bottom:10px; }
/* 右侧问卷 */
.review { width:360px; flex-shrink:0; background:#fff; border-left:1px solid #e5e7eb; display:flex; flex-direction:column; }
.progress-area { padding:12px 14px; border-bottom:1px solid #eee; background:#fafbff; }
.prog-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; color:#374151; }
.prog-row b { color:#4f46e5; }
.bar { height:7px; background:#e5e7eb; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,#6366f1,#10b981); width:0; transition:width .3s; }
.tabs { display:flex; border-bottom:1px solid #e5e7eb; }
.tab { flex:1; text-align:center; padding:11px; font-size:13px; font-weight:600; cursor:pointer; color:#6b7280; border-bottom:2px solid transparent; }
.tab.active { color:#4f46e5; border-bottom-color:#4f46e5; background:#f8f9ff; }
.review-panel { flex:1; overflow-y:auto; }
.rp-view { display:none; } .rp-view.active { display:block; }
.sec-title { font-size:12px; font-weight:700; color:#374151; padding:12px 14px 6px; background:#f9fafb; border-bottom:1px solid #f0f0f0; }
.qchips { display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; border-bottom:1px solid #f0f0f0; }
.qchip { font-size:12px; padding:4px 11px; border:1px solid #d1d5db; border-radius:14px; cursor:pointer; color:#374151; }
.qchip:hover { background:#f3f4f6; } .qchip.done { background:#ecfdf5; border-color:#10b981; color:#059669; }
.rev-card { padding:14px; border-bottom:1px solid #f0f0f0; }
.rev-card .rh { font-size:12px; font-weight:700; color:#4338ca; margin-bottom:10px; }
.correct-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid #f5f5f5; }
.correct-row .cl { font-size:12px; font-weight:600; color:#374151; min-width:46px; }
.abcd { display:flex; gap:5px; flex-wrap:wrap; }
.abcd label input { display:none; }
.abcd .lb { display:inline-block; width:30px; text-align:center; font-size:12px; padding:5px 0; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; }
.abcd input:checked + .lb { background:#6366f1; color:#fff; border-color:#6366f1; font-weight:700; }
.dim { border-bottom:1px solid #f5f5f5; }
.dim-head { display:flex; align-items:center; gap:8px; padding:9px 0; cursor:pointer; }
.dim-name { font-size:12px; font-weight:600; color:#1f2937; }
.dim-info { font-size:11px; color:#9ca3af; margin-left:auto; }
.score3 { display:flex; gap:4px; }
.score3 input { display:none; }
.score3 .s { display:inline-block; width:26px; text-align:center; font-size:12px; padding:4px 0; border:1px solid #d1d5db; border-radius:5px; cursor:pointer; }
.score3 input:checked + .s { color:#fff; font-weight:700; }
.score3 input[value="1"]:checked + .s { background:#ef4444; border-color:#ef4444; }
.score3 input[value="2"]:checked + .s { background:#f59e0b; border-color:#f59e0b; }
.score3 input[value="3"]:checked + .s { background:#10b981; border-color:#10b981; }
.dim-rubric { display:none; padding:8px 10px 12px; font-size:11px; color:#4b5563; line-height:1.6; background:#fafafa; border-radius:6px; margin-bottom:8px; }
.dim-rubric.show { display:block; }
.dim-rubric .subs { margin-bottom:6px; } .dim-rubric .subs li { margin-left:14px; }
.dim-rubric .rk { margin-top:2px; }
.grp-title { font-size:11px; font-weight:700; color:#6b7280; padding:8px 0 2px; text-transform:uppercase; }
.note-field { padding:10px 14px; } .note-field label{font-size:12px;color:#374151;display:block;margin-bottom:5px;}
.note-field textarea { width:100%; border:1px solid #d1d5db; border-radius:6px; padding:8px; font-size:12px; font-family:inherit; resize:vertical; min-height:48px; }
/* 底栏 */
.footer { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#fff; border-top:1px solid #e5e7eb; }
.save-status { font-size:12px; color:#6b7280; }
.save-status.ok { color:#059669; } .save-status.saving { color:#6b7280; } .save-status.local { color:#f59e0b; } .save-status.fail { color:#ef4444; }
.footer-btns { display:flex; gap:10px; }
.btn { padding:8px 18px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; }
.btn-ghost { background:#fff; border-color:#d1d5db; color:#374151; } .btn-ghost:hover{background:#f3f4f6;}
.btn-submit { background:#4f46e5; color:#fff; } .btn-submit:hover{background:#4338ca;}
.footer-msg { position:fixed; bottom:60px; right:24px; background:#111827; color:#fff; font-size:12px; padding:8px 14px; border-radius:6px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:99; }
.footer-msg.show { opacity:.92; }