:root {
    --bg: #f5f6f8; --panel: #fff; --text: #232a35; --muted: #8a93a3;
    --border: #e6e9ef; --blue: #2f6fed; --purple: #7c5cff; --green: #17a673;
    --orange: #d9821f; --red: #e5484d; --hover: #f0f3f8;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }
  button { font-family: inherit; }

  header { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  header .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #2f6fed, #7c5cff); flex-shrink: 0; }
  header h1 { font-size: 14px; font-weight: 600; margin: 0; }
  header .sub { font-size: 12px; color: var(--muted); }
  .头部右 { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .按钮 { padding: 7px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 12px; cursor: pointer; }
  .按钮:hover { background: var(--hover); }
  .按钮.主 { background: var(--blue); color: #fff; border-color: var(--blue); }
  .按钮.主:hover { opacity: .9; }
  .按钮:disabled { opacity: .5; cursor: not-allowed; }
  .徽章 { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #eef3ff; color: var(--blue); white-space: nowrap; }
  .徽章.成 { background: #ecfaf4; color: var(--green); }
  .徽章.败 { background: #fdecec; color: var(--red); }
  .徽章.中断 { background: #fdf4e6; color: var(--orange); }
  .徽章.跑 { background: #eef3ff; color: var(--blue); }
  .徽章.目标 { background: #f3efff; color: var(--purple); }
  .徽章.归档 { background: #f1ede5; color: #8b806d; }

  .主体 { flex: 1; display: flex; min-height: 0; }

  /* ── 任务列表 ── */
  .列表视图 { flex: 1; overflow-y: auto; padding: 26px 34px 40px; }
  .列表视图[hidden] { display: none; }
  .列表内 { max-width: 1180px; margin: 0 auto; }
  .列表头 { display: flex; align-items: center; margin-bottom: 18px; gap: 12px; }
  .列表头 h2 { font-size: 17px; margin: 0; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
  .列表头 .说明 { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .列表头 .按钮 { margin-left: auto; flex-shrink: 0; }
  .新建面板 { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
  .新建面板[hidden] { display: none; }
  .新建面板 label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
  .新建面板 input, .新建面板 textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-family: inherit; outline: none; margin-bottom: 12px; resize: vertical; }
  .新建面板 input:focus, .新建面板 textarea:focus { border-color: var(--blue); }
  .新建面板 .操作 { display: flex; gap: 10px; justify-content: flex-end; }
  .新建面板 .勾 { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 0 0 12px; cursor: pointer; }
  .任务表 { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 13px; }
  .任务表 th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fafbfc; white-space: nowrap; }
  .任务表 td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .任务表 tr:last-child td { border-bottom: none; }
  .任务表 tbody tr { cursor: pointer; }
  .任务表 tbody tr:hover { background: var(--hover); }
  .任务表 .名称 { font-weight: 600; }
  .任务表 .目标 { color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .任务表 .时间 { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .任务表 .数字 { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .任务表 .删 { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
  .任务表 .删:hover { background: #fdecec; color: var(--red); }
  .任务表 .续 {
    border: 1px solid rgba(47,111,237,.35); background: #eef3ff; color: var(--blue);
    cursor: pointer; font-size: 11px; padding: 3px 8px; border-radius: 6px; margin-right: 4px;
  }
  .任务表 .续:hover { background: var(--blue); color: #fff; }
  .任务表 .归档行 { background: rgba(246,242,233,.55); }
  .严重 { display: inline-flex; gap: 5px; font-size: 12px; }
  .严重 .高 { color: var(--red); } .严重 .中 { color: var(--orange); } .严重 .低 { color: var(--muted); }
  .空态 { text-align: center; color: var(--muted); font-size: 13px; margin-top: 80px; line-height: 2; }

  /* ── 任务详情：左会话列表 + 右对话 ── */
  .任务视图 { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .任务视图[hidden] { display: none; }
  .任务头 { padding: 10px 22px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .任务头 .名称 { font-size: 14px; font-weight: 600; white-space: nowrap; }
  .任务头 .目标 { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .任务体 { flex: 1; display: flex; min-height: 0; }

  .会话栏 { width: 240px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 10px 8px 24px; }
  .会话栏 .组名 { font-size: 11px; color: var(--muted); padding: 12px 10px 6px; letter-spacing: .5px; }
  .会话项 { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; }
  .会话项:hover { background: var(--hover); }
  .会话项.选中 { background: #eef3ff; }
  .会话项.选中.规 { background: #f3efff; }
  .会话项.选中.审 { background: #fdf4e6; }
  .会话项.选中.工 { background: #ecfaf4; }
  .会话项 .号 { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; min-width: 20px; }
  .会话项 .标 { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .会话项 .态 { font-size: 11px; flex-shrink: 0; }
  .态.成 { color: var(--green); } .态.转 { color: var(--blue); animation: 转 .9s linear infinite; display: inline-block; }
  .态.待 { color: #c0c6d0; } .态.败 { color: var(--red); }
  @keyframes 转 { to { transform: rotate(360deg); } }

  .会话内容 { flex: 1 1 380px; min-width: 0; overflow-y: auto; padding: 22px 0 30px; }
  .会话内 { max-width: 860px; margin: 0 auto; padding: 0 26px; }
  .会话内 .空态 { margin-top: 60px; }

  /* ── 中间：演示区 ── */
  .画布区 { flex: 1.15 1 420px; min-width: 320px; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-right: 1px solid var(--border); }
  .画布头 { padding: 12px 16px 6px; display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
  .画布头 .来自 { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: auto; }
  .画布头 .更新中 { font-size: 11px; font-weight: 400; color: var(--orange); margin-left: auto; }
  .画布头 .更新中[hidden] { display: none; }
  .画布头 .更新中 + .来自[hidden] { display: none; }
  .画布头 .切换 { cursor: pointer; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 10px; color: var(--muted); }
  .画布头 .切换:hover { background: var(--hover); }
  .画布头 .切换.选 { background: #eef3ff; color: var(--text); font-weight: 600; }
  .画布舞台 { position: relative; flex: 1; min-height: 240px; margin: 6px 14px 8px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #234436 0%, #14261e 60%, #0e1c16 100%); box-shadow: inset 0 0 60px rgba(0,0,0,.35); }
  #画布 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .纸画布 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .程序控件 { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .程序控件 * { pointer-events: auto; }
  .画布空态 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(232,226,210,.55); font-size: 13px; line-height: 2; text-align: center; padding: 0 24px; }
  .画布空态[hidden] { display: none; }
  .画布空态 span { font-size: 11.5px; color: rgba(232,226,210,.35); }
  .练习页 { position: absolute; inset: 0; overflow-y: auto; padding: 18px 22px; background: #fff; color: var(--text); }
  .练习页[hidden] { display: none; }
  .练习页 pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.8; margin: 0; }
  .练习页 .练题 { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
  .练习页 .练空 { color: var(--muted); font-size: 13px; margin-top: 40px; text-align: center; }
  .练卡 { max-width: 720px; margin: 0 auto; }
  .练头 { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
  .题干 { font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
  .选项组 { display: flex; flex-direction: column; gap: 8px; }
  .选项 { text-align: left; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 14px; cursor: pointer; font-family: inherit; }
  .选项:hover:not(:disabled) { background: var(--hover); }
  .选项.对 { border-color: #2f9e63; background: #eaf7ef; }
  .选项.错 { border-color: #d64545; background: #fdeeee; }
  .选项.暗 { opacity: .5; }
  .解析 { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.7; }
  .解析.对 { background: #eaf7ef; }
  .解析.错 { background: #fdeeee; }
  .来源 { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.7; }
  .来源 a { color: var(--blue); text-decoration: none; }
  .来源 a:hover { text-decoration: underline; }
  .练脚 { display: flex; justify-content: space-between; margin-top: 18px; }
  .练脚 button { padding: 7px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-family: inherit; }
  .练脚 button:disabled { opacity: .4; cursor: default; }
  .练完 { margin-top: 12px; font-size: 13px; color: #2f6b4f; }
  .批注 { margin-top: 14px; padding: 12px 14px; background: #fff8e6; border-radius: 10px; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
  .画布说明 { padding: 0 16px 6px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
  .步骤区 { display: flex; align-items: center; gap: 8px; padding: 2px 16px 8px; font-size: 12px; flex-shrink: 0; }
  .步骤区[hidden] { display: none; }
  .步钮 { border: 1px solid var(--border); background: #fff; border-radius: 7px; width: 30px; height: 26px; cursor: pointer; font-size: 11px; color: var(--text); }
  .步钮:hover { background: var(--hover); }
  .步计数 { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .步说 { color: #445; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .控件区 { padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; flex-shrink: 0; max-height: 190px; overflow-y: auto; }
  .ctl { display: block; }
  .ctl .ctl头 { display: flex; justify-content: space-between; font-size: 11.5px; color: #556; margin-bottom: 2px; }
  .ctl .ctl头 b { color: var(--orange); font-weight: 600; font-variant-numeric: tabular-nums; }
  .ctl input[type=range] { width: 100%; accent-color: #d9a441; height: 18px; cursor: pointer; }
  .ctl select { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; font-size: 12px; background: #fff; color: var(--text); outline: none; }

  /* 对话气泡 */
  .条 { display: flex; margin-bottom: 14px; }
  .条.学生 { justify-content: flex-end; }
  .条.输入侧 { justify-content: flex-end; }
  .头像 { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; margin-right: 10px; }
  .头像.主 { background: linear-gradient(135deg, #7c5cff, #2f6fed); }
  .头像.规 { background: var(--purple); }
  .头像.工 { background: var(--green); }
  .头像.审 { background: var(--orange); }
  .条.学生 .头像, .条.输入侧 .头像 { display: none; }
  .体 { max-width: 82%; min-width: 0; }
  .名 { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
  .条.学生 .名, .条.输入侧 .名 { text-align: right; }
  .泡 { padding: 10px 14px; border-radius: 13px; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; background: #fff; border: 1px solid var(--border); }
  .条.主agent .泡 { border-top-left-radius: 4px; }
  .条.规 .泡 { border-left: 3px solid var(--purple); }
  .条.工 .泡 { border-left: 3px solid var(--green); }
  .条.学生 .泡, .条.输入侧 .泡 { background: var(--blue); color: #fff; border: none; border-top-right-radius: 4px; }
  .条.输入侧 .泡 { background: #2b3444; }

  /* 推理 / 动作行（ARTEX 那种可折叠行） */
  .行记 { margin: 0 0 10px 40px; }
  .行记 summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: #4a5568; padding: 4px 8px; border-radius: 7px; }
  .行记 summary::-webkit-details-marker { display: none; }
  .行记 summary:hover { background: var(--hover); }
  .行记 summary .箭 { font-size: 10px; color: var(--muted); flex-shrink: 0; }
  .行记 summary .文 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .行记 summary .尾 { color: var(--muted); font-size: 11px; flex-shrink: 0; }
  .行记 pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; color: #4a5568; background: #f7f8fa; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; line-height: 1.65; max-height: 420px; overflow-y: auto; }
  .行记 .工具 { color: var(--blue); font-family: ui-monospace, monospace; font-size: 11.5px; }
  .行记.写回 summary .工具 { color: var(--green); }

  .输入区 { padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--border); flex-shrink: 0; }
  .输入区[hidden] { display: none; }
  .输入行 { max-width: 860px; margin: 0 auto; display: flex; gap: 10px; }
  #输入 { flex: 1; padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px; font-size: 14px; font-family: inherit; outline: none; }
  #输入:focus { border-color: var(--blue); }
  #发 { padding: 0 24px; border: none; border-radius: 11px; background: var(--blue); color: #fff; font-size: 14px; cursor: pointer; }
  #发:disabled { opacity: .5; cursor: not-allowed; }
  .语音钮 {
    flex: 0 0 44px; width: 44px; height: 44px;
    border: 1px solid var(--border); border-radius: 11px;
    background: #fff; font-size: 17px; line-height: 1; cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .语音钮:hover { border-color: var(--blue); }
  .语音钮.在听 {
    border-color: #e5484d; background: #ffecec;
    animation: 语音呼吸 1.4s ease-in-out infinite;
  }
  .语音钮:disabled { opacity: .45; cursor: default; animation: none; }
  @keyframes 语音呼吸 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.35); }
    50% { box-shadow: 0 0 0 6px rgba(229,72,77,0); }
  }
  .语音错 {
    max-width: 860px; margin: 8px auto 0;
    font-size: 12px; line-height: 1.6; color: #c0392b;
  }
  .语音错[hidden] { display: none; }

  .思考中 { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .思考中 .点 { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: 跳 1.2s infinite; }
  .思考中 .点:nth-child(2) { animation-delay: .2s; }
  .思考中 .点:nth-child(3) { animation-delay: .4s; }
  @keyframes 跳 { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

  /* 总览 */
  .总览 h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 20px 0 8px; letter-spacing: .5px; }
  .总览 h3:first-child { margin-top: 0; }
  .总览 .项 { border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; margin-bottom: 7px; background: #fff; font-size: 13px; }
  .总览 .行 { display: flex; gap: 7px; align-items: baseline; }
  .总览 .id { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; flex-shrink: 0; }
  .想 { margin: 8px 0; }
  .想 summary { cursor: pointer; font-size: 12px; color: var(--muted); }
  .想 pre { white-space: pre-wrap; word-break: break-word; background: #faf8f2; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.7; margin: 6px 0 0; font-family: inherit; }
  .总览 .标.成 { color: var(--green); } .总览 .标.转 { color: var(--blue); } .总览 .标.待 { color: #c0c6d0; } .总览 .标.败 { color: var(--red); }
  .总览 details { margin-top: 6px; }
  .总览 summary { cursor: pointer; color: var(--muted); font-size: 11px; }
  .总览 pre { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; color: #4a5568; background: #f7f8fa; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin: 6px 0 0; line-height: 1.6; max-height: 340px; overflow-y: auto; }
  .总览 .流水 { color: #4a5568; line-height: 1.9; font-size: 12px; }

  /* ══ 4.0 新增：版本历史 / 访客 / 平板 ══ */
  .版本工具 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .版本工具 .说明 { font-size: 12px; color: var(--muted); flex: 1; }
  .版本工具 button, .版本项 button, .群工具 button {
    padding: 5px 11px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; color: var(--text); cursor: pointer; font-size: 12px; font-family: inherit;
  }
  .版本工具 button:hover, .版本项 button:hover, .群工具 button:hover { background: var(--hover); }
  .版本组 { margin-top: 16px; }
  .版本组 h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 0 8px; letter-spacing: .4px; }
  .版本项 {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px;
    border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 13px;
  }
  .版本项 .v本 { font-family: ui-monospace, monospace; font-size: 11px; color: var(--purple); min-width: 34px; }
  .版本项 .v说 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .版本项 .v时 { color: var(--muted); font-size: 11px; white-space: nowrap; }
  .版本预览 { margin-top: 10px; }
  .版本预览 pre {
    white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto;
    background: #f7f8fa; border: 1px solid var(--border); border-radius: 9px;
    padding: 11px 13px; font-size: 12px; line-height: 1.7; color: #4a5568;
  }
  .群工具 { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
  .群工具 .说明 { font-size: 12px; color: var(--muted); flex: 1; }
  .访客标 { display: inline-block; font-size: 10px; color: var(--purple); background: #f3efff; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
  .成员条 { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.8; }
  .成员条 b { color: var(--text); font-weight: 500; }

  @media (max-width: 1100px) {
    .会话栏 { width: 200px; }
    .画布区 { flex: 1 1 340px; min-width: 260px; }
  }
  @media (max-width: 860px) {
    .任务体 { flex-direction: column; overflow-y: auto; }
    .会话栏 {
      width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
      border-right: 0; border-bottom: 1px solid var(--border); padding: 6px 8px;
    }
    .会话栏 .组名 { display: none; }
    .会话项 { flex: 0 0 auto; }
    .画布区 { min-height: 52vh; border-right: 0; border-bottom: 1px solid var(--border); }
    .会话内容 { min-height: 42vh; }
    .画布舞台 { min-height: 220px; }
  }