/* ============================================================
   TXTANNO 文本标注系统 · 设计语言 v18
   底色：深咖纸感（档案桌牛皮纸+墨线），强调：檩黄标注笔
   布局：四问指标带 → 单列整栏：
     ① 处理流水线（左 3fr SVG 流程图·超宽 750×340·组件正常尺寸 | 右 2fr 阶段明细表）
     ② 数据分布（饼图+柱形图·面板内上下居中，与数据质量等高） + 数据质量
     ③ 数据处理日志
     ④ 数据（样本流 ⇄ 标注结果表·按分类动态列；「标注结果表」为纯文本标题）
   ============================================================ */
:root{
  --bg:#26211a; --bg2:#2d2820; --bg3:#353026;
  --line:#453e30; --line2:#544b38;
  --ink:#ece5d6; --ink2:#a89e8a; --dim:#7d745f;
  --amber:#f0b429; --teal:#0f9b8e; --red:#d9553f;
  --gov:#b45309; --life:#0f9b8e; --fin:#4d7cc1; --tech:#9a6dd7;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  line-height:1.6; min-height:100vh;
  font-variant-numeric:tabular-nums;
}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* ---------- 顶栏 ---------- */
#topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:10px 22px;
  background:rgba(38,33,26,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:baseline;gap:8px;font-size:17px;font-weight:700;letter-spacing:.5px}
.logo svg{width:20px;height:20px;transform:translateY(3px)}
.logo .en{font-size:11px;color:var(--dim);letter-spacing:2px;font-weight:400}
#topbar .sub{font-size:12px;color:var(--ink2)}
#topbar .spacer{flex:1}
.tbtn{
  border:1px solid var(--line);background:var(--bg3);color:var(--ink);
  padding:6px 14px;border-radius:6px;font-size:13px;
  transition:border-color .15s,background .15s;
}
.tbtn:hover{border-color:var(--amber);color:var(--amber)}
.tbtn.primary{background:var(--amber);border-color:var(--amber);color:#26211a;font-weight:600}
.tbtn.primary:hover{background:#ffc94d}
.tbtn:disabled{opacity:.45;cursor:not-allowed}
#clock{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* ---------- 四问指标带 ---------- */
.lead{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px; padding:16px 22px 4px;
}
.leadcard{
  background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:12px 16px 14px;
  position:relative; overflow:hidden;
}
.leadcard::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--lc,var(--amber));
}
.leadcard .k{font-size:12px;color:var(--ink2);letter-spacing:.5px}
.leadcard .v{
  font-size:34px; font-weight:700; font-family:var(--mono);
  color:var(--lc,var(--amber)); line-height:1.15; margin-top:2px;
}
.leadcard .v small{font-size:12px;color:var(--dim);font-weight:400;margin-left:3px}
.leadcard .foot{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--dim);min-height:18px;flex-wrap:wrap}
.leadcard .foot .mini{font-family:var(--mono);color:var(--ink2)}
.leadcard .foot .dotc{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.leadcard .foot .mini i{font-style:normal;color:var(--ink)}

/* ---------- 单列整栏布局 ---------- */
#layout{
  display:flex;
  flex-direction:column;
  gap:14px; padding:14px 22px 34px;
}
.rowfull{width:100%}
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .lead{grid-template-columns:repeat(2,1fr)}
  #topbar .sub{display:none}
}
.panel{
  background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px;
}
.panel h3{
  font-size:13px;color:var(--ink2);font-weight:600;letter-spacing:1px;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.panel h3::before{content:'';width:3px;height:12px;background:var(--amber);border-radius:2px}
.panel h3 .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:400}

/* ---------- ① 处理流水线：SVG 流程图（左 3fr·超宽画布 750×340，组件正常尺寸）+ 阶段明细表（右 2fr） ---------- */
.pipeduo{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:14px;
  align-items:start;
}
@media (max-width:900px){.pipeduo{grid-template-columns:1fr}}
.pipewrap{
  padding:6px;
  overflow:hidden;
}
.pipeflow{display:block;width:100%;height:auto}
.pipeflow .fl{stroke:#4a4133;stroke-width:2;fill:none}
.pipeflow .fld{stroke:#f0b429;stroke-width:2;stroke-dasharray:4 4;fill:none;opacity:.9}
/* —— 科技感增强：HUD 角框 / 蓝图分区 / 阶段编号 / 流动脉冲 / 运行光圈 —— */
.pipeflow .nrect{
  fill:url(#ng);stroke:#5a5142;stroke-width:1.5;
  transition:stroke .2s, filter .2s;
}
.pipeflow .gring{
  fill:none;stroke:transparent;stroke-width:4;
  transition:stroke .2s;
}
.pipeflow .fst.running .gring{stroke:rgba(240,180,41,.35)}
.pipeflow .fst.done .gring{stroke:rgba(15,155,142,.18)}
.pipeflow .fst.fail .gring{stroke:rgba(217,85,63,.22)}
.pipeflow .fbadge{font-family:var(--mono);font-size:9px;font-weight:700;opacity:.95}
.pipeflow .fzone{fill:#5f5643;font-size:9px;font-family:var(--mono);letter-spacing:2px}
.pipeflow .fdeco{fill:none;stroke:#3f382c;stroke-width:1.2;stroke-dasharray:1 3}
.pipeflow .fdot{fill:#f0b429;opacity:.85}
.pipeflow .bdot{fill:#f0b429;opacity:.6}
.pipeflow .fover{
  stroke:#f0b429;stroke-width:1.2;fill:none;
  stroke-dasharray:6 10;opacity:.55;
  animation:dashmove 1.6s linear infinite;
}
.pipeflow .fsrc .nrect{fill:#2d2820;stroke-dasharray:4 3;stroke:#a89e8a}
.pipeflow .fsrc .fname{fill:#a89e8a;font-size:12.5px}
.pipeflow .fmodel .nrect{fill:#2d2820;stroke:#f0b429;stroke-dasharray:4 3}
.pipeflow .fmodel .fname{fill:#f0b429;font-size:12.5px}
.pipeflow .fmodel .fsub{fill:#a89e8a}
.pipeflow .fout .nrect{fill:url(#ng);stroke:rgba(15,155,142,.55)}
.pipeflow .fout .fsub{fill:#7d745f}
.pipeflow .fname{fill:#ece5d6;font-size:13px;font-weight:600}
.pipeflow .fstat{fill:#7d745f;font-size:10.5px;font-family:var(--mono);transition:fill .2s}
.pipeflow .fsub{fill:#7d745f;font-size:9.5px;font-family:var(--mono)}
.pipeflow .fst .ind{fill:#544b38;transition:fill .2s}
.pipeflow .fst.running .nrect{stroke:#f0b429;fill:rgba(240,180,41,.1)}
.pipeflow .fst.running .ind{fill:#f0b429;animation:pulse 1s infinite}
.pipeflow .fst.running .fstat{fill:#f0b429}
.pipeflow .fst.done .nrect{stroke:#0f9b8e}
.pipeflow .fst.done .ind{fill:#0f9b8e}
.pipeflow .fst.done .fstat{fill:#0f9b8e}
.pipeflow .fst.fail .nrect{stroke:#d9553f}
.pipeflow .fst.fail .ind{fill:#d9553f}
.pipeflow .fst.fail .fstat{fill:#d9553f}
.pipeflow .flegend text{fill:#7d745f;font-size:11.5px}
.pipeflow .flegend .lgamber{fill:#f0b429}
.pipeflow .flegend .lgteal{fill:#0f9b8e}
.pipeflow .flegend .lgflow{fill:#f0b429}
.pipeflow .flegend .lgdash{fill:none;stroke:#f0b429;stroke-width:1.5;stroke-dasharray:4 3}
.pipeflow .flegend .lgframe{fill:rgba(38,33,26,.72);stroke:#453e30;stroke-width:1}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dashmove{to{stroke-dashoffset:-16}}

/* 流水线阶段明细表（右 2fr） */
.ptable{width:100%;border-collapse:collapse;font-size:12px}
.ptable th{
  color:var(--dim);font-weight:500;text-align:left;padding:6px 8px;font-size:11px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;
}
.ptable td{padding:7px 8px;border-bottom:1px solid rgba(69,62,48,.5);color:var(--ink2)}
.ptable td.msg{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptable tr:last-child td{border-bottom:none}
.ptable td b{color:var(--ink);font-size:12.5px;font-weight:600}
.ptable td .mono{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:6px}
.ptable td.cst{font-family:var(--mono);white-space:nowrap}
.stpill{
  display:inline-block;font-size:11px;padding:1px 9px;border-radius:10px;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap;
}
.stpill.ok{color:var(--teal);border-color:rgba(15,155,142,.5);background:rgba(15,155,142,.1)}
.stpill.run{color:var(--amber);border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.1)}
.stpill.err{color:var(--red);border-color:rgba(217,85,63,.5);background:rgba(217,85,63,.1)}

/* ---------- ② 数据分布：饼图 + 柱形图（面板内上下居中·与数据质量等高）
   .distpanel：纵向 flex，标题置顶，.distcharts 占满剩余高度并 align-content:center 垂直居中 ---------- */
.distpanel{display:flex;flex-direction:column}
.distpanel .distcharts{flex:1;align-content:center}
.distcharts{
  display:grid;grid-template-columns:1.15fr 1fr;gap:16px;
  align-items:center;justify-content:center;
}
.distpie{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0}
.piebox{position:relative;width:170px;height:170px;flex:none}
.piebox svg{display:block;width:100%;height:100%}
.pielabel{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.pielabel b{font-family:var(--mono);font-size:25px;font-weight:700;color:var(--ink);line-height:1.15}
.pielabel span{font-size:10px;color:var(--dim);letter-spacing:2px}
.catslice{cursor:pointer;transition:opacity .15s}
.catslice:hover{opacity:.78}
.pielegend{display:flex;flex-direction:column;gap:5px;min-width:150px;max-width:230px}
.pielg{
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);
  padding:3px 8px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.pielg:hover{background:var(--bg3);border-color:var(--line)}
.pielg.on{border-color:var(--amber);color:var(--amber);background:rgba(240,180,41,.06)}
.pielg .dotc{flex:none}
.pielg .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pielg .n{font-family:var(--mono);font-size:11px;color:var(--ink)}
.pielg.on .n{color:var(--amber)}
.pielg .p{font-family:var(--mono);font-size:10.5px;color:var(--dim);width:46px;text-align:right;flex:none}
.distbar{
  border-left:1px dashed var(--line2);padding-left:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;
}
.distbar .bartitle{font-size:12px;color:var(--ink2);margin-bottom:2px;width:100%;text-align:center}
.distbar svg{width:220px;height:178px;max-width:100%}
.distbar .sgrid{stroke:#453e30;stroke-width:1;stroke-dasharray:2 4;opacity:.6}
.distbar .sbase{stroke:#544b38;stroke-width:1.2}
.distbar .strack{fill:var(--bg3);opacity:.55}
.distbar .sval{fill:var(--ink);font-family:var(--mono);font-size:12px;text-anchor:middle;font-weight:600}
.distbar .slab{fill:var(--ink2);font-size:11px;text-anchor:middle}
.distbar rect.v{transition:y .4s,height .4s}
@media (max-width:900px){
  .distcharts{grid-template-columns:1fr}
  .distbar{border-left:none;padding-left:0;border-top:1px dashed var(--line2);padding-top:10px}
}
.dotc{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- ② 数据质量 ---------- */
.qarow{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;color:var(--ink2)}
.qarow .k{width:88px;flex:none}
.qarow .bar{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.qarow .bar i{display:block;height:100%;border-radius:3px;transition:width .4s}
.qarow .v{font-family:var(--mono);font-size:11px;color:var(--ink);min-width:36px;text-align:right}
.qagrade{
  display:flex;align-items:baseline;gap:10px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg3);
  padding:9px 12px;margin-bottom:10px;
}
.qagrade .g{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--ag,var(--teal))}
.qagrade .d{font-size:11.5px;color:var(--ink2);line-height:1.5}
.qagrade .d b{color:var(--ink);font-family:var(--mono)}

/* 标注模型卡 */
.modelcard{border:1px solid var(--line);border-radius:8px;background:var(--bg3);padding:8px 12px;margin-bottom:8px}
.modelcard .h{display:flex;align-items:center;gap:8px}
.modelcard .nm{font-size:13px;font-weight:600}
.modelcard .ver{font-family:var(--mono);font-size:10.5px;color:var(--amber);border:1px solid rgba(240,180,41,.4);border-radius:8px;padding:0 7px}
.modelcard .d{font-size:11.5px;color:var(--ink2);margin-top:4px}
.modelcard .rules{font-size:11px;color:var(--dim);margin-top:5px}
.kbd{
  font-family:var(--mono);font-size:10.5px;background:var(--bg2);
  border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--ink2);
}

/* ---------- 分类专属特征徽标（fapill：政务/民生/金融/科技各自字段） ---------- */
.fapill{
  display:inline-flex;align-items:center;gap:0;font-size:10.5px;
  border:1px solid var(--line2);border-radius:4px;overflow:hidden;
  margin:1px 3px 1px 0;white-space:nowrap;vertical-align:middle;
}
.fapill i{
  font-style:normal;background:var(--bg2);color:var(--dim);
  padding:0 5px;font-size:10px;border-right:1px solid var(--line2);
}
.fapill b{font-weight:600;color:var(--ink);padding:0 6px;background:var(--bg3)}

/* ---------- ③ 日志（双列） ---------- */
.loglist{max-height:200px;overflow-y:auto;font-family:var(--mono);font-size:11px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.loglist::-webkit-scrollbar{width:5px}
.loglist::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.loglist.wide{columns:2;column-gap:30px;max-height:260px}
.loglist.wide .logline{break-inside:avoid}
@media (max-width:1100px){.loglist.wide{columns:1}}
.logline{display:flex;gap:8px;padding:3px 0;border-bottom:1px dashed rgba(69,62,48,.4);color:var(--ink2)}
.logline .ts{color:var(--dim);flex:none}
.logline .st{flex:none;width:26px}
.logline .st.ok{color:var(--teal)}
.logline .st.err{color:var(--red)}

/* ---------- ④ 数据区：页签 ----------
   「标注结果表」为纯文本标题（.mtabhead：仅展示总数·不可点击），
   后跟 政务/民生/金融/科技 四个可点击筛选页签 */
.maintabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.mtab{
  border:1px solid var(--line);background:var(--bg3);color:var(--ink2);
  padding:5px 14px;border-radius:16px;font-size:12.5px;
  transition:border-color .15s,color .15s;
}
.mtab span{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:5px}
.mtab:hover{border-color:var(--amber);color:var(--amber)}
.mtab.on{border-color:var(--amber);color:var(--amber);font-weight:600}
.mtab.on span{color:var(--amber)}
.mtabhead{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:13px;font-weight:700;color:var(--ink);
  padding:4px 14px 4px 4px;margin-right:6px;
  cursor:default;user-select:none;
}
.mtabhead span{font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:400}

/* ---------- 文本样本流 ---------- */
.docstream{display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.docstream.tall{max-height:640px}
.docstream::-webkit-scrollbar{width:5px}
.docstream::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.doc{
  border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;background:var(--bg3);
  animation:slidein .3s ease-out;
}
.doc.new{border-color:var(--amber)}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.doc .row1{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.doc .src-tag{
  font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:9px;
  border:1px solid var(--dim);color:var(--ink2);flex:none;
}
.doc .title{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .cat-tag{font-size:11px;padding:1px 9px;border-radius:9px;flex:none;font-weight:600}
.doc .txt{font-size:12.5px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55}
.doc .hl{padding:0 1px;border-radius:3px;font-weight:600}
.doc .ents{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.doc .ent{
  font-size:11px;padding:1px 8px;border-radius:4px;background:var(--bg2);
  border:1px solid var(--line);color:var(--ink2);
}
.doc .ent b{color:var(--ink);font-weight:600}
.doc .ent .t{color:var(--dim);margin-right:4px;font-size:10px}
.doc .ents.fa{gap:4px}
.doc .ents.fa .fapill{margin:0}
.empty-tip{color:var(--dim);font-size:12.5px;text-align:center;padding:30px 0;line-height:1.8}

/* ---------- 结构化明细表 ---------- */
.filter{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.filter input{
  background:var(--bg3);border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:5px 8px;font-size:12px;outline:none;min-width:180px;
}
.filter input:focus{border-color:var(--amber)}
.filter .tbtn{padding:5px 12px;font-size:12px}
.dtable{width:100%;border-collapse:collapse;font-size:12px}
.dtable th{color:var(--dim);font-weight:500;text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:6px;border-bottom:1px solid rgba(69,62,48,.5);vertical-align:top}
.dtable tr:hover td{background:rgba(240,180,41,.04)}
.dtable .t{color:var(--ink);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtable .m{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.dtable .grp{max-width:190px}
.grouphd td{
  background:var(--bg3);padding:4px 8px;font-size:12px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.grouphd .dotc{margin-right:6px;vertical-align:middle}
.grouphd .gn{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-weight:400;margin-left:8px}
.tagpill{font-size:10.5px;padding:1px 8px;border-radius:9px;font-weight:600;display:inline-block}
.kwpill{
  display:inline-block;font-size:10.5px;font-family:var(--mono);color:var(--ink2);
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  padding:0 5px;margin:1px 2px 1px 0;white-space:nowrap;
}
.tablewrap{overflow-x:auto;overflow-y:auto}
.tablewrap.taller{max-height:640px}

/* ---------- 页脚流程带 ---------- */
.flowfoot{
  margin:0 22px 30px;padding:11px 18px;
  border:1px dashed var(--line2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  font-size:11.5px;color:var(--dim);
}
.flowfoot b{color:var(--ink2);font-weight:600}
.flowfoot .ar{color:var(--amber);font-family:var(--mono)}
.flowfoot .fin{color:var(--teal)}

/* toast */
#toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);
  background:var(--bg3);border:1px solid var(--amber);color:var(--ink);
  padding:9px 18px;border-radius:8px;font-size:13px;
  opacity:0;pointer-events:none;transition:all .25s;z-index:99;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}