/* ============================================================
 * 问稷 AgriMind · 组件层
 * 命名：.term(终端头) .nav .panel .kpi .dl .idx .tbl .btn .pill
 *       .tag .seg .fld .meter .tabs .toast .modal .plot .legend
 * ========================================================== */

/* ---------------- 终端头（签名组件） ---------------- */
.term{
  position:sticky;top:0;z-index:60;background:var(--panel);
  border-bottom:1px solid var(--line-2);
}
.term-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:var(--s4);height:52px;
}
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0}
.brand-mark{
  width:26px;height:26px;border-radius:var(--r-sm);background:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;
}
.brand-mark svg{width:16px;height:16px;color:var(--brand-ink)}
.brand-txt{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
.brand-name{
  font-family:var(--font-mono);font-size:14px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;
}
.brand-div{width:1px;height:16px;background:var(--line-2);flex:0 0 auto}
.brand-sub{
  font-family:var(--font-mono);font-size:12.5px;font-style:italic;
  color:var(--brand-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.term-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.live{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;
  border-radius:var(--r-pill);background:var(--forest);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blip 2.4s var(--ease) infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.28}}
.clock{
  font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);white-space:nowrap;
}
.clock b{color:var(--ink);font-weight:700}
@media (max-width:760px){
  .term-in{height:48px;gap:var(--s3)}
  .brand-sub,.clock{display:none}
  .brand-name{font-size:13px}
}

/* 模式开关 */
.modesw{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden}
.modesw button{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  padding:4px 10px;color:var(--ink-3);background:var(--panel);
}
.modesw button.on{background:var(--brand);color:var(--brand-ink);font-weight:700}
/* 窄屏只隐藏**页头**那个模式开关；页脚另有一个入口（见 .foot-mode） */
@media (max-width:620px){ .term .modesw{display:none} }

/* ---------------- 主导航（可横滚的终端式 Tab） ---------------- */
.nav{position:sticky;top:52px;z-index:55;background:var(--panel-2);border-bottom:1px solid var(--line)}
@media (max-width:760px){ .nav{top:48px} }
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
}
.nav-in::-webkit-scrollbar{display:none}
.nav a{
  flex:0 0 auto;padding:9px var(--s4);font-size:12.5px;color:var(--ink-3);
  border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t-fast) var(--ease);
  display:flex;align-items:center;gap:7px;
}
.nav a .nav-ix{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4);letter-spacing:.06em}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand-deep);background:var(--panel)}
.nav a.on .nav-ix{color:var(--brand-deep)}
/* 农户主入口：高亮，一眼能看到 */
.nav a.hot{color:var(--brand-deep);font-weight:700}
.nav a.hot .nav-ix{color:var(--brand-deep)}
.nav a.hot.on{background:var(--brand-soft);border-bottom-color:var(--brand-deep)}

/* ---------------- 面包屑 / 页头 ---------------- */
.phead{padding:var(--s6) 0 var(--s3);display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.phead h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.phead .phead-sub{margin-top:6px;font-size:var(--t-body-lg);color:var(--ink-2);max-width:62ch;line-height:1.7}
.phead-act{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.crumb{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s3)}
.crumb a:hover{color:var(--brand-deep)}

/* ---------------- 面板 ---------------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);position:relative;transition:border-color var(--t) var(--ease);
}
.panel.tight{padding:var(--s3)}
.panel.pad0{padding:0;overflow:hidden}
.panel.hoverable:hover{border-color:var(--line-3)}
.panel-h{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}
.panel-h .ph-icon{width:15px;height:15px;color:var(--brand-deep);flex:0 0 auto}
.panel-h h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.005em}
.panel-h .panel-meta{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:right;white-space:nowrap;
}
.panel-f{margin-top:var(--s3);padding-top:var(--s2);border-top:1px dashed var(--line);
  font-size:var(--t-cap);color:var(--ink-3);line-height:1.6}
.panel--dark{background:var(--forest);border-color:var(--forest);color:#fff}
.panel--dark .panel-h{border-bottom-color:rgba(255,255,255,.16)}
.panel--dark .panel-h h3,.panel--dark .ink,.panel--dark .ink2{color:#fff}
.panel--dark .ink3,.panel--dark .lbl{color:rgba(255,255,255,.62)}
.panel--dark .panel-f{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.panel--brand{background:var(--brand-soft);border-color:#DFEBAE}
.panel--flat{background:var(--panel-2);border-color:var(--line)}

/* ---------------- KPI 条 ---------------- */
.kpi-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.kpi{padding:var(--s3) var(--s4);border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border-right:0}
.kpi .k-lbl{display:block;margin-bottom:5px}
.kpi .k-val{
  font-family:var(--font-mono);font-size:30px;font-weight:600;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.kpi .k-val small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.kpi .k-sub{margin-top:4px;font-size:var(--t-cap);color:var(--ink-3);line-height:1.4}
.kpi .k-sub b{color:var(--ink-2);font-weight:600}
.kpi.acc .k-val{color:var(--brand-deep)}
.kpi.acc{background:linear-gradient(180deg,var(--brand-soft),#fff)}
@media (max-width:760px){
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .kpi{border-bottom:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-last-child(-n+2){border-bottom:0}
  .kpi .k-val{font-size:24px}
}

/* ---------------- 定义列表（字典行） ---------------- */
.dl{display:flex;flex-direction:column}
.dl-row{
  display:flex;align-items:baseline;gap:var(--s3);padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.dl-row:last-child{border-bottom:0}
.dl-row dt{font-size:var(--t-cap);color:var(--ink-3);flex:0 0 auto;max-width:55%}
.dl-row dd{
  margin:0;margin-left:auto;font-family:var(--font-mono);font-size:var(--t-body);
  font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
}
.dl.dl-wide .dl-row dd{font-size:var(--t-body-lg)}
.dl.dl-lg .dl-row dd{font-family:var(--font-sans);font-weight:700}

/* ---------------- 编号索引列表（活动日志） ---------------- */
.idx{display:flex;flex-direction:column;font-size:var(--t-cap)}
.idx-row{
  display:grid;grid-template-columns:26px 54px 1fr auto;gap:var(--s2);
  align-items:center;padding:5px 0;border-bottom:1px solid var(--panel-3);
}
.idx-row:last-child{border-bottom:0}
.idx-row .i-n{font-family:var(--font-mono);font-size:10px;color:var(--ink-4)}
.idx-row .i-t{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4)}
.idx-row .i-m{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-row .i-v{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);text-align:right}
.idx-row.hl{background:var(--brand-soft);margin:0 -6px;padding-left:6px;padding-right:6px;border-radius:var(--r-xs)}
.idx-row.hl .i-m{color:var(--ink);font-weight:600}

/* ---------------- 表格 ---------------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{font-size:var(--t-cap);min-width:520px}
.tbl th{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);text-align:left;padding:8px 10px;
  background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--panel-3);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--panel-2)}
.tbl .n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tbl .c{text-align:center}
.tbl tr.best td{background:var(--brand-soft)}
.tbl tr.best:hover td{background:#EDF5C4}
.tbl tr.self td{background:var(--info-bg);font-weight:600}
.tbl .muted{color:var(--ink-4)}
.tbl .rowtag{display:inline-block;font-family:var(--font-mono);font-size:9.5px;color:var(--brand-ink);
  background:var(--brand);border-radius:var(--r-xs);padding:1px 5px;margin-left:6px;letter-spacing:.04em}
.tbl-sort{cursor:pointer;user-select:none}
.tbl-sort:hover{color:var(--ink-2)}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-sm);font-size:var(--t-body);font-weight:600;
  background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px}
.btn.ghost{background:var(--panel);color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-4);color:var(--ink);background:var(--panel)}
.btn.dark{background:var(--forest);border-color:var(--forest);color:#fff}
.btn.dark:hover{background:#1B4A38}
.btn.sm{padding:6px 11px;font-size:var(--t-cap)}
.btn.xs{padding:4px 9px;font-size:var(--t-label);font-family:var(--font-mono);letter-spacing:.05em}
.btn.blk{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn-row.end{justify-content:flex-end}

/* ---------------- 胶囊 / 标签 ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--ink-3);background:var(--panel);white-space:nowrap;
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.risk{color:var(--risk);border-color:var(--risk-line);background:var(--risk-bg)}
.pill.info{color:var(--info);border-color:var(--info-line);background:var(--info-bg)}
.pill.violet{color:var(--violet);border-color:var(--violet-line);background:var(--violet-bg)}
.pill.brand{color:var(--brand-ink);border-color:var(--brand);background:var(--brand)}
.pill.dark{color:#fff;border-color:var(--forest);background:var(--forest)}
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;
  padding:1px 7px;border-radius:var(--r-xs);background:var(--panel-3);color:var(--ink-3);
}
.tag.brand{background:var(--brand-soft);color:var(--brand-deep)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.risk{background:var(--risk-bg);color:var(--risk)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.info{background:var(--info-bg);color:var(--info)}
.tag.violet{background:var(--violet-bg);color:var(--violet)}
.badge-lg{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:var(--t-body-lg);font-weight:700;border:1px solid;
}
.badge-lg small{font-weight:500;font-size:var(--t-cap);opacity:.8}
.badge-lg.hi{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge-lg.mid{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge-lg.lo{background:var(--risk-bg);color:var(--risk);border-color:var(--risk-line)}

/* ---------------- 分段控件 / 开关 ---------------- */
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{
  flex:1 1 0;min-width:64px;padding:9px 6px;font-size:var(--t-body);font-weight:600;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-3);
  border-radius:var(--r-sm);transition:all var(--t-fast) var(--ease);text-align:center;
}
.seg button:hover{border-color:var(--ink-4);color:var(--ink-2)}
.seg button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.seg.sm button{padding:6px 8px;font-size:var(--t-cap)}
.sw{
  position:relative;width:34px;height:19px;border-radius:99px;background:var(--line-2);
  transition:background var(--t) var(--ease);flex:0 0 auto;
}
.sw::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:transform var(--t) var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.sw.on{background:var(--brand-deep)}
.sw.on::after{transform:translateX(15px)}

/* ---------------- 表单 ---------------- */
.fld{margin-bottom:var(--s4)}
.fld > label{display:block;margin-bottom:6px;font-size:var(--t-cap);font-weight:600;color:var(--ink-2)}
.fld .hint{font-size:var(--t-cap);color:var(--ink-4);margin-top:5px;line-height:1.5}
.inp,select.inp,textarea.inp{
  width:100%;padding:9px 11px;font-size:var(--t-body);border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);
}
.inp:focus{outline:none;border-color:var(--brand-deep);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.inp{resize:vertical;line-height:1.7;font-family:inherit}
.inp-row{display:flex;gap:var(--s3)}
.inp-row > *{flex:1;min-width:0}

/* ---------------- 进度 / 计量条 ---------------- */
.meter{height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--forest);border-radius:99px;
  transition:width var(--t-slow) var(--ease)}
.meter.brand i{background:var(--brand-deep)}
.meter.risk i{background:var(--risk)}
.meter.warn i{background:var(--warn)}
.meter.thin{height:4px}
.meter-row{display:flex;align-items:center;gap:var(--s3)}
.meter-row .meter{flex:1}
.meter-row .mv{font-family:var(--font-mono);font-size:var(--t-cap);width:44px;text-align:right}

/* 迷你条形分布（横条族） */
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:78px 1fr 52px;gap:var(--s2);align-items:center;font-size:var(--t-cap)}
.bar-row .bl{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bt{height:14px;background:var(--panel-3);border-radius:var(--r-xs);overflow:hidden}
.bar-row .bt i{display:block;height:100%;background:var(--forest);transition:width var(--t-slow) var(--ease)}
.bar-row .bv{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------------- Tabs ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;padding:9px var(--s4);font-size:var(--t-body);color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-fast) var(--ease);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.tabs button .tb-n{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-4);
  border:1px solid var(--line-2);border-radius:var(--r-xs);padding:0 4px;line-height:15px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand-deep)}
.tabs button.on .tb-n{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.tabs.plain{border-bottom:0}
.tabs.plain button{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);margin:0 4px 0 0}
.tabs.plain button.on{background:var(--forest);color:#fff;border-color:var(--forest)}

/* ---------------- 图表容器 ---------------- */
.plot{width:100%;position:relative}
.plot svg{width:100%;height:auto;overflow:visible}
.plot-h{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2)}
.plot-h .plot-meta{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2);
  font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.legend i.line{height:2px;width:14px;border-radius:99px}
.chart-tip{
  position:absolute;pointer-events:none;background:var(--forest);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;padding:5px 8px;border-radius:var(--r-xs);
  white-space:nowrap;opacity:0;transition:opacity var(--t-fast) var(--ease);z-index:5;
}
.plot:hover .chart-tip.on{opacity:1}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
  background:var(--forest);color:#fff;padding:10px 18px;border-radius:var(--r-sm);
  font-size:var(--t-body);z-index:200;opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
  box-shadow:var(--sh-2);max-width:min(88vw,420px);display:flex;align-items:center;gap:var(--s2);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}

/* ---------------- 浮层 ---------------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(21,23,15,.42);z-index:120;
  display:grid;place-items:center;padding:var(--s4);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease);
}
.modal-bg.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--panel);border-radius:var(--r);border:1px solid var(--line-2);
  width:100%;max-width:560px;max-height:86vh;overflow:auto;box-shadow:var(--sh-2);
  transform:translateY(8px) scale(.99);transition:transform var(--t) var(--ease);
}
.modal-bg.show .modal{transform:none}
.modal-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal-h h3{font-size:var(--t-h3);font-weight:700}
.modal-h .modal-x{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--ink-3)}
.modal-h .modal-x:hover{background:var(--panel-3);color:var(--ink)}
.modal-b{padding:var(--s4)}
.modal-f{padding:var(--s3) var(--s4);border-top:1px solid var(--line);display:flex;
  gap:var(--s2);justify-content:flex-end;background:var(--panel-2);position:sticky;bottom:0}

/* ---------------- 田块卡（横向选择器，签名组件） ---------------- */
.plots{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 0 var(--s2);scrollbar-width:none}
.plots::-webkit-scrollbar{display:none}
.plotcard{
  flex:0 0 auto;width:172px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--line-3);border-radius:var(--r);padding:9px 11px;
  text-align:left;transition:all var(--t-fast) var(--ease);
}
.plotcard:hover{border-color:var(--line-3);transform:translateY(-1px)}
.plotcard.on{border-color:var(--forest);border-left-color:var(--brand);background:var(--panel);box-shadow:var(--sh-1)}
.plotcard .pc-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.plotcard .pc-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plotcard .pc-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-4);
  line-height:1.5;text-transform:uppercase;letter-spacing:.04em}
.plotcard .pc-val{font-family:var(--font-mono);font-size:17px;font-weight:600;margin-top:5px;letter-spacing:-.01em}
.plotcard .pc-val small{font-size:10px;color:var(--ink-4);font-weight:400}

/* ---------------- 流程 / 步骤条 ---------------- */
.flow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:stretch}
.flow-step{
  flex:1 1 150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);text-align:left;position:relative;transition:all var(--t) var(--ease);
}
.flow-step:hover{border-color:var(--brand-deep);transform:translateY(-2px)}
.flow-step .fs-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--brand-deep)}
.flow-step .fs-t{font-size:var(--t-body);font-weight:700;margin:5px 0 3px}
.flow-step .fs-d{font-size:var(--t-cap);color:var(--ink-3);line-height:1.5}
.flow-step.on{border-color:var(--brand);background:var(--brand-soft)}
.flow-arrow{display:grid;place-items:center;color:var(--line-3);flex:0 0 auto;padding:0 2px}
@media (max-width:760px){ .flow-arrow{display:none} }

/* 竖向时间线（审计日志 / 任务流） */
.tl{position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl-item{position:relative;padding:0 0 var(--s3)}
.tl-item::before{
  content:"";position:absolute;left:-18px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line-3);
}
.tl-item.ok::before{border-color:var(--ok)}
.tl-item.brand::before{border-color:var(--brand-deep);background:var(--brand)}
.tl-item.risk::before{border-color:var(--risk)}
.tl-item .tl-t{font-size:var(--t-cap);font-weight:600}
.tl-item .tl-m{font-size:var(--t-cap);color:var(--ink-3);line-height:1.5}

/* ---------------- 说明卡（诚实声明 / 局限） ---------------- */
.note{
  display:flex;gap:var(--s3);padding:var(--s3);border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);font-size:var(--t-cap);
  color:var(--ink-3);line-height:1.65;
}
.note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ink-4)}
.note.risk{background:var(--risk-bg);border-color:var(--risk-line);color:#7A2822}
.note.risk svg{color:var(--risk)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:#7A4E0A}
.note.warn svg{color:var(--warn)}
.note.info{background:var(--info-bg);border-color:var(--info-line);color:#22409C}
.note.info svg{color:var(--info)}
.note.ok{background:var(--ok-bg);border-color:var(--ok-line);color:#155C39}
.note.ok svg{color:var(--ok)}
.note.brand{background:var(--brand-soft);border-color:#DFEBAE;color:#4C5C0A}
.note.brand svg{color:var(--brand-deep)}
.note b{color:inherit;font-weight:700}

/* 口语模式强调块 */
.plainbox{
  background:var(--brand-soft);border:1px solid #DFEBAE;border-radius:var(--r);
  padding:var(--s4);font-size:var(--t-body-lg);line-height:1.8;color:var(--ink);
}
.plainbox b{color:var(--brand-ink);background:var(--brand);padding:0 4px;border-radius:var(--r-xs)}
html[data-mode="expert"] .plain-only{display:none!important}
html[data-mode="plain"] .expert-only{display:none!important}

/* 空状态 */
.empty{padding:var(--s7) var(--s4);text-align:center;color:var(--ink-4);font-size:var(--t-cap)}
.empty svg{width:26px;height:26px;margin:0 auto var(--s2);color:var(--line-3)}

/* ============================================================
 * 高级感组件层 v1.1
 * 全部使用设计令牌；口语模式下字号随 --t-* 自动放大
 * ========================================================== */

/* ---------- 抬升交互 ---------- */
.lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.lift:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}

/* ---------- 小节标题 ---------- */
.sh{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin:var(--s7) 0 var(--s4)}
.sh h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.3}
.sh .sh-sub{font-size:var(--t-body);color:var(--ink-3);line-height:1.7;max-width:64ch;margin:0}
.sh .sh-act{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.hair{height:1px;border:0;margin:var(--s6) 0;background:var(--grad-hair)}

/* ---------- 深色 impact 带 ---------- */
.impact{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:var(--s7) var(--s6);background:var(--grad-deep);box-shadow:var(--sh-4);
}
.impact::after{
  content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,226,44,.17),transparent 63%);pointer-events:none;
}
.impact>*{position:relative;z-index:1}
.impact h2{color:var(--deep-ink);font-size:var(--t-h2);font-weight:700;margin:0 0 var(--s2);letter-spacing:-.01em}
.impact h3{color:var(--deep-ink);font-size:var(--t-body-lg);font-weight:700;margin:0}
.impact p{color:var(--deep-ink-2);font-size:var(--t-body);line-height:1.75;margin:0}
.impact .mono{color:var(--deep-ink-2)}
.impact-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6);margin-top:var(--s6)}
@media (min-width:780px){.impact-stats{grid-template-columns:repeat(4,1fr)}}
.istat .iv{
  font-family:var(--font-mono);font-size:27px;font-weight:700;letter-spacing:-.02em;
  color:var(--brand-2);line-height:1.1;
}
.istat .iv small{font-size:13px;font-weight:600;margin-left:2px;color:var(--deep-ink-2)}
.istat .il{font-size:var(--t-cap);color:var(--deep-ink-2);margin-top:6px;line-height:1.6}
.impact .note{background:rgba(255,255,255,.06);border-color:var(--deep-line);color:var(--deep-ink-2)}
.impact .note svg{color:var(--brand-2)}

/* ---------- 特性卡网格 ---------- */
.fgrid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:620px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.feat{
  display:flex;flex-direction:column;gap:var(--s2);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
}
.feat .fi{
  width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-deep);margin-bottom:var(--s2);
}
.feat h3{font-size:var(--t-body-lg);font-weight:700;margin:0;line-height:1.4}
.feat p{font-size:var(--t-body);color:var(--ink-2);line-height:1.72;margin:0}
.feat .fl{
  margin-top:auto;padding-top:var(--s3);font-size:var(--t-cap);color:var(--brand-deep);
  display:inline-flex;align-items:center;gap:5px;font-weight:600;
}
a.feat:hover{border-color:var(--brand);background:var(--panel)}

/* ---------- CTA 行动带 ---------- */
.cta{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-2);
}
.cta .ct-h{font-size:var(--t-h2);font-weight:700;margin:0 0 5px;letter-spacing:-.01em}
.cta .ct-d{font-size:var(--t-body);color:var(--ink-3);line-height:1.7;margin:0;max-width:56ch}
.cta .ct-a{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- 垂直时间线（版本 / 路线图） ---------- */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl-item{position:relative;padding-bottom:var(--s6)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line-3);
}
.tl-item.now::before{background:var(--brand);border-color:var(--brand-deep);box-shadow:var(--ring)}
.tl-item.next::before{background:var(--panel);border-color:var(--brand);border-style:dashed}
.tl-m{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--brand-deep);text-transform:uppercase}
.tl-t{font-size:var(--t-body-lg);font-weight:700;margin:3px 0 5px;line-height:1.4}
.tl-b{font-size:var(--t-body);color:var(--ink-2);line-height:1.72;margin:0}

/* ---------- 纵向编号步骤（方案接入路径） ---------- */
.stepsv{display:grid;gap:var(--s3)}
.stepv{display:flex;gap:var(--s4);align-items:flex-start}
.stepv .sv-n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-deep);font-family:var(--font-mono);
  font-size:var(--t-label);font-weight:700;border:1px solid #DFEBAE;
}
.stepv .sv-b{flex:1;min-width:0}
.stepv .sv-t{font-size:var(--t-body);font-weight:700;margin-bottom:3px;line-height:1.45}
.stepv .sv-d{font-size:var(--t-cap);color:var(--ink-3);line-height:1.65}

/* ---------- FAQ 折叠（原生 details，离线可用） ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.faq details{border-bottom:1px solid var(--panel-3)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-size:var(--t-body-lg);
  font-weight:600;display:flex;align-items:center;gap:var(--s3);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--panel-2)}
.faq summary .fq-i{flex:0 0 auto;color:var(--brand-deep);display:grid;place-items:center}
.faq summary .fq-x{margin-left:auto;flex:0 0 auto;color:var(--ink-4);transition:transform var(--t) var(--ease)}
.faq details[open] summary{background:var(--panel-2);border-bottom:1px solid var(--panel-3)}
.faq details[open] summary .fq-x{transform:rotate(90deg)}
.faq .fq-a{padding:var(--s4) var(--s5);font-size:var(--t-body);color:var(--ink-2);line-height:1.8}
.faq .fq-a p{margin:0 0 var(--s3)}
.faq .fq-a p:last-child{margin-bottom:0}
.faq .fq-a b{color:var(--ink)}

/* ---------- 下载行 ---------- */
.dlrow{
  display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}
.dlrow+.dlrow{margin-top:var(--gap)}
.dlrow .dr-i{
  flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);color:var(--forest);
}
.dlrow .dr-b{flex:1;min-width:0}
.dlrow .dr-t{font-size:var(--t-body);font-weight:700;margin-bottom:3px}
.dlrow .dr-m{font-size:var(--t-cap);color:var(--ink-3);line-height:1.6}
.dlrow .dr-a{flex:0 0 auto;display:flex;gap:var(--s2)}

/* ---------- 信任条（数据来源 / 许可 / 能力） ---------- */
.trust{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center}
.trust .tr{display:flex;align-items:center;gap:6px;font-size:var(--t-cap);color:var(--ink-3)}
.trust .tr svg{color:var(--brand-deep);flex:0 0 auto}

/* ---------- 导航分组下拉 ---------- */
.nav-g{flex:0 0 auto;position:relative;display:flex;align-items:center}
.nav-g>.ng-t{
  display:flex;align-items:center;gap:7px;background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--ink-3);padding:9px var(--s4);white-space:nowrap;
  transition:color var(--t-fast) var(--ease);
}
.nav-g>.ng-t .nav-ix{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4);letter-spacing:.06em}
.nav-g>.ng-t svg{transition:transform var(--t) var(--ease);opacity:.6}
.nav-g.on>.ng-t{color:var(--ink);font-weight:700;border-bottom-color:var(--brand-deep);background:var(--panel)}
.nav-g.on>.ng-t .nav-ix{color:var(--brand-deep)}
.nav-dd{
  position:absolute;left:0;top:100%;min-width:224px;z-index:60;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
}
.nav-g:hover>.nav-dd,.nav-g:focus-within>.nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-g:hover>.ng-t svg,.nav-g:focus-within>.ng-t svg{transform:rotate(180deg)}
.nav-g:hover>.ng-t{color:var(--ink)}
.nav-dd a{
  display:block;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink);font-size:var(--t-body);
}
.nav-dd a:hover{background:var(--panel-2)}
.nav-dd a .nd-t{font-weight:600;display:block;line-height:1.35}
.nav-dd a .nd-d{font-size:var(--t-cap);color:var(--ink-4);margin-top:2px;line-height:1.5}
.nav-dd a.on{background:var(--brand-soft)}
.nav-dd a.on .nd-t{color:var(--brand-ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}