/* 社会学研究操作系统 —— 轻色主题 */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#1f2430; --muted:#76808f;
  --line:#e3e7ee; --accent:#2f6df0; --accent2:#0f9d8a; --danger:#d9534f;
  --chip:#eef2fb; --chipb:#d6e0f7; --soft:#f0f3f8;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 20px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6;
}
#root{display:flex; min-height:100vh}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* 侧边栏 */
#side{
  width:230px; flex:0 0 230px; background:var(--panel); border-right:1px solid var(--line);
  padding:14px 10px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
#side .nav{display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:7px 10px; border-radius:8px; color:var(--ink); font-size:13.5px}
#side .nav:hover{background:var(--soft); text-decoration:none}
#side .nav.ent .cnt{font-size:11px; background:var(--chip); color:var(--muted);
  border-radius:10px; padding:0 7px}
#side .nav-sep{font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; margin:14px 4px 6px}
.side-foot{margin-top:18px; font-size:11px; color:var(--muted); text-align:center}

/* 主区 */
#app{flex:1; padding:22px 30px 60px; max-width:1100px}
.page h1{font-size:22px; margin:0 0 6px}
.lead{color:var(--muted); max-width:760px}
.hint{color:var(--muted); font-size:13px; border-left:3px solid var(--accent2); padding-left:10px; margin-top:14px}
.warn{background:#fff4e5; color:#8a5a00; border:1px solid #ffd591; padding:10px 14px; border-radius:8px; margin-bottom:14px}

/* 首页卡片 */
.hgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:12px 0 26px}
.hcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
  box-shadow:var(--shadow); text-align:center; color:var(--ink)}
.hcard:hover{text-decoration:none; transform:translateY(-2px); transition:.15s}
.hicon{font-size:26px}
.hname{font-weight:600; margin:6px 0 2px}
.hnum{color:var(--accent); font-size:18px; font-weight:700}

/* 流水线 */
.pipeline{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:12px}
.pstep{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; text-align:center; min-width:80px}
.pname{font-size:12.5px}
.pnum{font-weight:700; color:var(--accent2)}
.parrow{color:var(--muted)}

/* 地图 */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:14px}
.mcell{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink)}
.mcell:hover{text-decoration:none; border-color:var(--accent)}
.mname{font-weight:600}
.mcnt{font-size:12px; color:var(--muted); background:var(--soft); border-radius:10px; padding:0 8px}
.mgroup{margin:14px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.mgroup-head{background:var(--soft); padding:8px 14px; font-weight:700; color:var(--ink)}
.mgroup .mgrid{margin:0; padding:12px}

/* 看板 */
.wstage{border:1px solid var(--line); border-radius:10px; margin:10px 0; overflow:hidden}
.whead{background:var(--soft); padding:8px 14px; font-weight:600}
.wcount{color:var(--muted); font-weight:400; margin-left:6px}
.wchips{padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px}

/* 列表 */
.list-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.search{width:100%; max-width:360px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; margin:12px 0; font-size:14px}
.tbl{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tbl th,.tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{background:var(--soft); font-size:12.5px; color:var(--muted)}
.tbl tr:last-child td{border-bottom:none}
.rowact a{margin-right:8px; font-size:13px}
.mono{font-family:ui-monospace,Consolas,monospace; font-size:12.5px; color:var(--muted)}
.muted{color:var(--muted)}

/* 按钮 */
.btn{display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); font-size:13px}
.btn:hover{text-decoration:none; border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.danger{color:var(--danger); border-color:#f0c6c4}
.btn.danger:hover{background:#fdeceb}

/* 查看 */
.view-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.badge{background:var(--chip); color:var(--accent); border-radius:8px; padding:2px 9px; font-size:12.5px; border:1px solid var(--chipb)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow)}
.frow{display:grid; grid-template-columns:160px 1fr; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line)}
.frow:last-child{border-bottom:none}
.flabel{color:var(--muted); font-size:13px}
.fval{word-break:break-word}
.page h3{margin:22px 0 8px; font-size:15px}
.chips,.chain{display:flex; flex-wrap:wrap; gap:6px}
.chip{background:var(--chip); border:1px solid var(--chipb); border-radius:16px; padding:3px 11px; font-size:12.5px; color:var(--ink)}
.chip:hover{text-decoration:none; background:var(--chipb)}
.chain-group{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px}
.cg-head{font-weight:600; margin-bottom:6px; font-size:13.5px}

/* 领域分类徽章 */
.dom-badge{display:inline-block; color:#fff; font-size:12px; line-height:1; padding:3px 9px;
  border-radius:10px; white-space:nowrap; font-weight:500; vertical-align:middle}

/* 一键导图（思维导图） */
.mindmap-wrap{max-height:78vh; overflow:auto; border:1px solid var(--line); border-radius:12px; background:#fff; padding:8px; margin-top:6px}
.mindmap-svg{min-width:100%}
.mm-node{cursor:pointer}
.mm-node rect{transition:fill .12s}
.mm-node:hover rect{fill:#eef4fb}
.mm-lg{display:inline-block; margin:0 8px 0 2px; font-size:12.5px; color:var(--muted)}
.mm-lg i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:middle}

/* 全链追踪：编号 + 配色的流程 */
.chain-flow{margin-top:6px}
.chain-domain{margin-bottom:14px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:8px}
.chain-steps{list-style:none; margin:0; padding:0; position:relative}
.chain-steps::before{content:''; position:absolute; left:15px; top:10px; bottom:10px; width:2px; background:var(--line)}
.chain-step{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; position:relative}
.step-no{flex:0 0 32px; height:32px; border-radius:50%; background:var(--c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  z-index:1; box-shadow:0 0 0 3px var(--panel)}
.step-body{flex:1; border-left:3px solid var(--c); background:var(--panel); border-radius:0 8px 8px 0;
  padding:8px 12px; box-shadow:0 1px 3px rgba(20,30,50,.07)}
.step-head{display:flex; align-items:center; gap:7px; font-weight:600}
.step-icon{font-size:16px}
.step-name{font-size:14px}
.step-cnt{margin-left:auto; font-size:12px; color:var(--muted); background:var(--soft); border-radius:10px; padding:1px 8px}
.step-chips{margin-top:7px; display:flex; flex-wrap:wrap; gap:6px}

/* 节点状态点（满意/不满意/需重做/待定） */
.sdot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:middle; flex:0 0 auto}
.sdot.s-approved{background:#27ae60; box-shadow:0 0 0 2px #27ae6033}
.sdot.s-rejected{background:#d6453d; box-shadow:0 0 0 2px #d6453d33}
.sdot.s-redo{background:#e0a106}
.sdot.s-pending{background:#b9bfc6}

/* 节点回溯中心 */
.tl-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.tl-node{background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--line);
  border-radius:12px; padding:12px 16px; box-shadow:var(--shadow)}
.tl-node.s-approved{border-left-color:#27ae60}
.tl-node.s-rejected{border-left-color:#d6453d}
.tl-node.s-redo{border-left-color:#e0a106}
.tl-node.s-pending{border-left-color:#b9bfc6}
.tl-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tl-stage{flex:0 0 auto; color:#fff; border-radius:7px; padding:2px 9px; font-size:12px; font-weight:600}
.tl-title{font-weight:700; font-size:15px; color:var(--ink); text-decoration:none}
.tl-title:hover{text-decoration:underline}
.tl-status{margin-left:auto; font-size:12.5px; font-weight:600; padding:2px 10px; border-radius:10px}
.tl-status.s-approved{background:#27ae6020; color:#1e8449}
.tl-status.s-rejected{background:#d6453d20; color:#c0392b}
.tl-status.s-redo{background:#e0a10622; color:#9a6b00}
.tl-status.s-pending{background:var(--soft); color:var(--muted)}
.tl-body{margin-top:8px; font-size:13px; color:var(--muted)}
.tl-row{margin-bottom:8px}
.tl-row a{color:var(--accent); text-decoration:none}
.tl-acts{display:flex; flex-wrap:wrap; gap:7px}
.btn.sm{padding:4px 11px; font-size:12.5px; border-radius:8px}
.btn.sm.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.tl-flag{margin-top:9px; padding:7px 11px; border-radius:8px; font-size:12.5px}
.tl-flag.red{background:#d6453d14; color:#b03025; border:1px solid #d6453d33}
.tl-flag.amber{background:#e0a10618; color:#8a5e00; border:1px solid #e0a10644}
.hist{margin-top:9px; border-top:1px dashed var(--line); padding-top:8px}
.hist.hidden{display:none}
.hist-item{font-size:12.5px; color:var(--muted); padding:3px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hist-item .mono{font-size:11.5px}
.hist-item a{color:var(--accent); text-decoration:none}

/* 编辑表单 */
.eform-row{margin:12px 0}
.eform-row label{display:block; font-size:13px; color:var(--muted); margin-bottom:4px}
.eform-row label .f-hint{font-weight:400; margin-left:8px; font-size:12px; color:var(--muted); opacity:.85}
.eform-row input::placeholder, .eform-row textarea::placeholder{color:#b3bac4}
.eform-row input[type=text],.eform-row textarea,.eform-row select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px;
  font-family:inherit; background:var(--panel); color:var(--ink)}
.eform-row textarea{min-height:64px; resize:vertical}
.form-actions{margin-top:18px; display:flex; gap:10px}
.req{color:var(--danger)}

/* 文档 */
.docs .doc-nav{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px}
.docs .doc-nav a{background:var(--chip); border:1px solid var(--chipb); border-radius:8px; padding:5px 11px; font-size:13px}
.docs section{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:16px; box-shadow:var(--shadow)}
.docs h2{margin-top:0; font-size:18px}
.doc-table{width:100%; border-collapse:collapse; margin:10px 0; font-size:13px}
.doc-table th,.doc-table td{border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top}
.doc-table th{background:var(--soft); color:var(--muted)}
.docs ul,.docs ol{padding-left:22px}
.wf li{margin:8px 0}
code{background:var(--soft); padding:1px 5px; border-radius:4px; font-size:12.5px}

/* 论文草稿 */
.paper{max-width:820px; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:26px 34px; box-shadow:var(--shadow); margin-top:12px}
.paper h1{font-size:23px; margin:0 0 4px}
.paper h2{font-size:18px; margin:26px 0 8px; border-bottom:2px solid var(--accent); padding-bottom:4px; display:inline-block}
.paper h3{font-size:15px; margin:16px 0 4px; color:var(--accent)}
.paper p{margin:6px 0}
.abstract{background:var(--soft); border-left:3px solid var(--accent2); padding:10px 14px; border-radius:8px; margin:12px 0}
.todo{color:#b06a00; background:#fff7e6; border:1px solid #ffe2b8; border-radius:8px; padding:7px 11px; font-size:13px}
.ref{font-size:13px; color:var(--muted); padding-left:14px; text-indent:-14px}

/* 期刊元信息 + 关键词 */
.jmeta{font-size:12.5px; color:var(--muted); background:var(--soft); border-radius:8px; padding:6px 10px; margin:8px 0}
.kw{font-size:14px; margin:4px 0 12px}
.kw b{color:var(--accent)}

/* 一键生成论文：醒目 CTA 与期刊切换 */
.paper-cta{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg,#eef2ff,#f7f9ff); border:2px solid var(--accent); border-radius:14px; padding:16px 18px; margin-bottom:14px}
.paper-cta h1{font-size:21px; margin:0 0 4px}
.paper-cta .muted{margin:0; max-width:560px}
.paper-cta-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.jbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.jbar-label{font-size:13px; color:var(--muted)}
.jchip{padding:6px 13px; border:1px solid var(--line); border-radius:999px; background:var(--panel); cursor:pointer; font-size:13.5px}
.jchip:hover{border-color:var(--accent)}
.jchip.on{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600}

/* 缺失 / 数据需求横幅 */
.gap-banner{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.gap-banner ul{margin:6px 0 0; padding-left:20px}
.gap-red{background:#fdecea; border:1px solid #f5b5b0; border-radius:10px; padding:10px 14px; font-size:13.5px}
.gap-amber{background:#fff8e6; border:1px solid #ffe1a8; border-radius:10px; padding:10px 14px; font-size:13.5px}
.gap-ok{background:#e9f7ec; border:1px solid #b6e0bf; border-radius:10px; padding:10px 14px; font-size:13.5px; color:#1f7a3d}
.dset-box{background:#f3f6ff; border:1px dashed #b9c4f0; border-radius:10px; padding:10px 14px; margin:8px 0; font-size:13.5px}
.dset-box ul{margin:6px 0 0; padding-left:20px}

/* 侧栏：研究流程导航 */
#side .nav.primary-nav{font-weight:600}
#side .nav.cta{background:var(--accent); color:#fff; justify-content:center; margin-bottom:2px}
#side .nav.cta:hover{background:#2659cc; text-decoration:none}
#side .nav.flow{padding:6px 10px; gap:8px}
#side .nav.flow .fno{flex:0 0 20px; height:20px; border-radius:50%; color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center; font-weight:700}
#side .nav.flow .fname{flex:1}
#side .nav.flow .cnt{font-size:11px; background:var(--chip); color:var(--muted); border-radius:10px; padding:0 7px}

/* 首页：从现象开始 + 研究流程图 */
.cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); margin:14px 0 6px}
.btn.big{font-size:15px; padding:10px 18px}
.cta-hint{color:var(--muted); font-size:13px; flex:1; min-width:260px}
.flowgrid{display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin:12px 0 8px}
.fcard{flex:1 1 108px; min-width:104px; background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--c);
  border-radius:10px; padding:12px 10px; text-align:center; color:var(--ink); box-shadow:var(--shadow)}
.fcard:hover{text-decoration:none; transform:translateY(-2px); transition:.15s; border-color:var(--c)}
.fcard-no{display:inline-block; width:22px; height:22px; line-height:22px; border-radius:50%; background:var(--c);
  color:#fff; font-size:12px; font-weight:700}
.fcard-icon{font-size:22px; display:block; margin:5px 0 2px}
.fcard-name{font-size:12.5px; font-weight:600; display:block}
.fcard-num{font-size:12px; color:var(--muted)}
.fcard-arrow{color:var(--muted); align-self:center; font-size:13px}

/* 列表：流程位置条 */
.flowbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-left:4px solid var(--c, #888); border-radius:8px;
  padding:9px 14px; margin:12px 0 4px; font-size:13px}

/* 智能展开（引导式自动补全） */
#seed{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--panel); color:var(--ink); resize:vertical}
.ex-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.ex-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; box-shadow:var(--shadow)}
.ex-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.ex-no{flex:0 0 auto; min-width:30px; height:26px; padding:0 7px; border-radius:13px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.ex-icon{font-size:18px}
.ex-head b{font-size:15px}
.ex-ai{margin-left:auto; font-size:12px; color:#7a4ec0; background:#f1e9fb; border:1px solid #e0d2f5;
  border-radius:10px; padding:1px 9px}
.fb-no{font-weight:700; color:var(--c, #888)}
.fb-link{color:var(--muted)}
.fb-cur{font-weight:700; background:var(--c, #888); color:#fff; border-radius:8px; padding:2px 10px}

/* 研究线进度（看板 + 首页概览） */
.pline{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.wbody{padding:10px 14px}
.wmiss{font-size:13px; margin-bottom:6px}
.wnext{font-size:12.5px; color:var(--muted)}

/* 全景对照关系：矩阵 */
.mc-wrap{overflow-x:auto; margin-top:12px}
.mc-table{min-width:920px}
.mc-table th.mc-sit,.mc-table td.mc-sit{position:sticky; left:0; background:var(--panel); z-index:2; min-width:170px}
.mc-table th.mc-stage{text-align:center; vertical-align:bottom; font-size:12px; min-width:44px}
.mc-no{display:inline-block; width:18px; height:18px; line-height:18px; border-radius:50%; color:#fff; font-size:11px; font-weight:700}
.mc-cell{text-align:center; font-weight:700; font-size:13px}
.mc-cell.empty{color:var(--muted); font-weight:400}
.mc-cell a{color:var(--ink); font-weight:700}
.mc-cell a:hover{text-decoration:none; color:var(--accent)}
.mc-prog{text-align:center; font-weight:700; color:var(--accent2)}

/* 生成页：全过程 / 论文 分段 */
.sec{margin-top:30px; font-size:18px; border-bottom:2px solid var(--accent2); padding-bottom:4px; display:inline-block}
.procmeta{background:var(--soft); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--muted)}
.procmeta2{font-size:13px; color:var(--muted)}
.proc-card{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:8px 12px; margin:8px 0; background:var(--panel)}
.pc-head{font-size:14px}
.pc-id{font-size:12px}
.pc-desc{margin:4px 0; color:var(--ink)}
.pc-map{margin:2px 0 0; font-size:12.5px; color:var(--accent2)}

/* ===== 阶段图示 双栏 + 手绘 SVG ===== */
.view-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:22px; align-items:start}
.view-main{min-width:0}
.diagram-panel{position:sticky; top:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow)}
.dp-head{display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:8px}
.dp-ico{font-size:16px}
.diagram-cap{font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.55; border-top:1px dashed var(--line); padding-top:8px}
.sk-svg{width:100%; height:auto; display:block; background:#fcfbf7; border:1px solid #ece8df; border-radius:8px}
.sk{fill:none; stroke:#3a3f47; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sk-dash{fill:none; stroke:#9aa0a6; stroke-width:1.6; stroke-dasharray:4 3}
.sk-t{font-size:14px; font-weight:700; fill:#3a3f47}
.sk-cap{font-size:11px; fill:#5a606a}
.sk-cap2{font-size:12px; font-weight:600; fill:#2b2f36}
.bg-soft{fill:#f1ede4; stroke:#cdc6b8; stroke-width:1.6}
@media (max-width: 920px){
  .view-grid{grid-template-columns:1fr}
  .diagram-panel{position:static}
}