/* CNGateway — 资金缺口测算器（本地开发中，未上线）
   ------------------------------------------------------------------
   2026-09-30 版式重构：
   1. 顶栏是 fixed，内容区加顶部偏移（对齐站点其他页面的留白）
   2. 表单紧凑化：分字段组、窄数字输入
   3. 机构卡片化、链接高可见
   4. 里程碑时间线、政策网格
   5. 图表：坐标轴 + 网格 + 图例
   只放本工具独有样式；导航/页脚/按钮沿用站点样式。 */

:root {
  --cf-ink: #16202b;
  --cf-muted: #5d6b7a;
  --cf-line: #e2e7ec;
  --cf-accent: #c1562f;
  --cf-blue: #1a73e8;
}

/* —— 顶栏偏移：navbar 是 fixed（styles.css），内容必须让出它的高度 —— */
.cf-wrap { max-width: 980px; margin: 0 auto; padding: 118px 20px 72px; }
@media (max-width: 860px) { .cf-wrap { padding-top: 100px; } }

.cf-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-muted); margin: 0 0 8px; }
.cf-h1 { font-size: 30px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; }
.cf-lede { font-size: 16.5px; color: #3c4854; margin: 0 0 14px; max-width: 46em; }
.cf-disclaimer { font-size: 13px; color: var(--cf-muted); border-left: 3px solid #c9d3dc; padding-left: 12px; margin: 0 0 30px; }

/* —— 小节标题（图标 + 文字） —— */
.cf-sh { display: flex; align-items: center; gap: 12px; font-size: 19px; margin: 0 0 10px; }
.cf-sh-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: #eef3f8; color: #2b4c9b;
  display: inline-flex; align-items: center; justify-content: center;
}
.cf-sh-ico svg { width: 21px; height: 21px; }

.cf-panel { background: #fff; border: 1px solid var(--cf-line); border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; }
.cf-panel > h3, .cf-h4 { font-size: 17px; margin: 0 0 12px; }
.cf-h4 { font-size: 15px; margin-top: 20px; }
.cf-card-sub { font-size: 13.5px; color: var(--cf-muted); margin: 0 0 14px; }

/* —— 表单：紧凑、分组 —— */
.cf-fs { margin-bottom: 14px; }
.cf-fs-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-muted); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed #edf1f4; }
.cf-grid { display: grid; gap: 10px 14px; }
/* 紧凑化（2026-09-30）：Team & fixed costs 五个字段合一行；
   输入格宽度收窄 —— 数字不需要占满整行 */
.cf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cf-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cf-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-field label { font-size: 12px; color: var(--cf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-input, .cf-select {
  font: inherit; font-size: 14.5px; padding: 8px 10px;
  border: 1px solid #d8dee4; border-radius: 8px; background: #fff; color: var(--cf-ink);
  width: 100%; box-sizing: border-box;
}
/* 数字类输入不需要那么宽 */
.cf-field-sm .cf-input { max-width: 120px; }
.cf-field-sm .cf-select { max-width: 160px; }
.cf-input:focus, .cf-select:focus { outline: 2px solid var(--cf-blue); outline-offset: 1px; }
.cf-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.cf-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--cf-ink); background: var(--cf-ink); color: #fff; cursor: pointer; }
.cf-btn.secondary { background: #fff; color: var(--cf-ink); }
.cf-btn.ghost { background: transparent; border-color: #d8dee4; color: var(--cf-muted); }
.cf-examplenote { font-size: 12.5px; color: #a8541b; }
@media (max-width: 760px) {
  .cf-grid-3, .cf-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cf-grid-2 { grid-template-columns: 1fr; }
}

/* —— 结果 —— */
.cf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cf-card { background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px; padding: 13px 15px; }
.cf-card-label { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--cf-muted); }
.cf-card-value { font-size: 21px; font-weight: 700; margin: 5px 0 4px; line-height: 1.2; }
.cf-card-sub { font-size: 12.5px; color: var(--cf-muted); margin: 0; }
.cf-card-extra { font-size: 12px; color: #8a949e; margin-top: 6px; }
.cf-verdict { margin-top: 16px; background: #f2f6fa; border: 1px solid #dde5ec; border-radius: 10px; padding: 12px 16px; }
.cf-verdict h4 { margin: 0 0 6px; font-size: 15px; }
.cf-verdict p { margin: 0; font-size: 14px; color: #334; }
.cf-verdict.cf-ok { background: #eef7f1; border-color: #cfe6d8; }
.cf-need { color: #a8541b; font-size: 14px; }

/* —— 图表 v2 —— */
.cf-chart { width: 100%; height: auto; display: block; }
.cf-line { fill: none; stroke: var(--cf-blue); stroke-width: 2.5; stroke-linejoin: round; }
.cf-line-scen { fill: none; stroke: #9db8d8; stroke-width: 1.6; stroke-dasharray: 5 4; }
.cf-grid { stroke: #eef1f4; stroke-width: 1; }
.cf-zero { stroke: #c0562f; stroke-width: 1.4; stroke-dasharray: 6 4; }
.cf-zerolabel { font-size: 10px; fill: #c0562f; }
.cf-ytick, .cf-xtick { font-size: 10.5px; fill: #7b8794; }
.cf-axistitle { font-size: 11px; fill: var(--cf-muted); letter-spacing: .04em; }
.cf-min { fill: #c0562f; }
.cf-minlabel { font-size: 11px; fill: #c0562f; font-weight: 600; }
.cf-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--cf-muted); }
.cf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cf-legend .cf-dot { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.cf-legend .cf-dot.base { background: var(--cf-blue); }
.cf-legend .cf-dot.scen { background: #9db8d8; }
.cf-legend .cf-dot.zero { background: #c0562f; }

/* —— 缺口来源 —— */
.cf-drivergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cf-driver { background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px; padding: 13px 15px; margin: 0; }
.cf-driver h4 { font-size: 14.5px; margin: 0 0 5px; }
.cf-driver p { margin: 0; font-size: 13.5px; color: #3c4854; }

/* —— 融资路径：中心枢纽布局（2026-09-30）——
   桌面：左右两列各 4 条 + 中间详情面板；点击条目切换中间内容。
   移动（≤900px）：单列手风琴，详情展开在条目下方。
   全部详情常驻 DOM（仅显隐），保证爬虫可见。 */
.cf-hub { display: grid; grid-template-columns: 1fr minmax(280px, 1.15fr) 1fr; gap: 14px; align-items: stretch; }
.cf-hub-col { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.cf-hubitem {
  font: inherit; text-align: left; width: 100%; box-sizing: border-box;
  background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; color: var(--cf-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  /* 等高对齐（2026-10-01 修 bug）：改用 grid-auto-rows:1fr —— 行高取决于
     该列最高内容，flex:1 1 0 的「平分列高」会在列高被中间详情面板压低时
     把内容多的条目裁掉半行（用户截图的问题）。跨列一致由 cashflow.js 的
     equalizeHubItems() 在桌面端把 8 个条目的 min-height 同步到全局最大值。 */
  min-height: 118px;
  display: flex; flex-direction: column;
}
.cf-hubitem-sum { flex: 1; }
.cf-hubitem:hover { border-color: #bcd2e8; background: #f4f8fc; }
.cf-hubitem.selected { border-color: var(--cf-blue); background: #f0f6fd; box-shadow: inset 3px 0 0 var(--cf-blue); }
.cf-hubitem-head { display: flex; align-items: center; gap: 8px; }
.cf-hubitem-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #eef3f8; color: #2b4c9b; display: inline-flex; align-items: center; justify-content: center; }
.cf-hubitem-ico svg { width: 17px; height: 17px; }
.cf-hubitem-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.cf-hubitem-sum {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--cf-muted); margin-top: 6px;
}
.cf-hubitem .cf-type { margin-left: auto; }
.cf-hubitem-slot { display: block; }
.cf-hubitem-slot[empty], .cf-hubitem-slot:empty { display: none; }
.cf-hubitem.open .cf-hubitem-slot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dbe4ec; }

.cf-hub-center {
  background: #fff; border: 1px solid var(--cf-line); border-radius: 12px;
  padding: 18px 20px; position: sticky; top: 92px;
}
.cf-hub-center-head {
  font-size: 13px; color: var(--cf-muted); line-height: 1.6;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed #edf1f4;
}
.cf-hubdetail h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; margin: 0 0 6px; }
.cf-hubdetail p { margin: 7px 0 0; font-size: 13.5px; color: #3c4854; }
.cf-hubdetail .cf-path-sum { color: var(--cf-muted); }
.cf-hubdetail .cf-note { background: #f4f7fa; border-radius: 8px; padding: 8px 12px; color: #45535f; }
.cf-hubdetail .cf-note b { color: var(--cf-ink); }
.cf-hubdetail .cf-basis { font-size: 12.5px; color: #8a949e; }
.cf-hubdetail .cf-wecan { color: #1e6b45 !important; }

@media (max-width: 900px) {
  .cf-hub { grid-template-columns: 1fr; }
  .cf-hub-center { display: none; }
  /* 单列手风琴：条目按各自内容取高，不参与跨列等高同步 */
  .cf-hub-col { grid-auto-rows: auto; }
  .cf-hubitem[aria-expanded="true"] .cf-hubitem-sum { -webkit-line-clamp: unset; display: block; }
}

/* 兼容旧版列表样式（保留类名以防复用） */
.cf-note { background: #f4f7fa; border-radius: 8px; padding: 8px 12px; color: #45535f; }
.cf-note b { color: var(--cf-ink); }
.cf-basis { font-size: 12.5px; color: #8a949e; }
.cf-wecan { color: #1e6b45 !important; }
.cf-basis { font-size: 12.5px; color: #8a949e; }
.cf-wecan { color: #1e6b45 !important; }
.cf-type { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #eef2f5; color: var(--cf-muted); }
.cf-type-equity { background: #eef2fb; color: #2b4c9b; }
.cf-type-debt { background: #fdf3ea; color: #9a5a24; }
.cf-type-policy { background: #eef6f1; color: #276b48; }
.cf-tag { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: #fdf3ea; color: #9a5a24; }

/* —— 里程碑时间线 —— */
.cf-timeline { position: relative; padding-left: 26px; }
.cf-timeline::before {
  content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px;
  width: 2px; background: #e6ecf1; border-radius: 2px;
}
.cf-round { position: relative; padding: 0 0 20px 16px; }
.cf-round-dot {
  position: absolute; left: -26px; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 2px solid #dfe6ec;
  display: flex; align-items: center; justify-content: center; color: #2b4c9b;
}
.cf-round-dot .cf-ico svg { width: 18px; height: 18px; }
.cf-round-body h4 { font-size: 15.5px; margin: 2px 0 4px; }
.cf-round-when { font-size: 12.5px; color: var(--cf-accent); font-weight: 600; margin-bottom: 6px; }
.cf-round-body p { margin: 5px 0 0; font-size: 13.5px; color: #3c4854; }
.cf-chinanote { background: #f5f8fb; border-radius: 8px; padding: 8px 12px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cf-chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #eef2f5; color: #45535f; }

/* —— 政策 —— */
.cf-policies-box { margin-top: 22px; background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px; padding: 15px 18px; }
.cf-policies-box h4 { margin: 0 0 4px; font-size: 15px; }
.cf-policygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.cf-policy { background: #fff; border: 1px solid var(--cf-line); border-radius: 10px; padding: 12px 14px; }
.cf-policy h4 { font-size: 13.5px; margin: 0 0 4px; }
.cf-policy p { margin: 0; font-size: 12.5px; color: #3c4854; }

/* —— 机构：竖排（一行一家，2026-09-30）——
   之前三列卡片把长名挤成竖条；改为一行一家 + 官方 logo（Google favicon
   服务按域名取图，加载失败回退为通用机构图标，不用大写字母头像）。 */
.cf-orggroup { margin-bottom: 18px; }
.cf-orggroup h4 { font-size: 15px; margin: 0 0 10px; }
.cf-orglist { display: flex; flex-direction: column; gap: 10px; }
.cf-orgcard {
  display: flex; gap: 14px; align-items: flex-start;
  background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px; padding: 12px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-orgcard:hover { border-color: #bcd2e8; box-shadow: 0 2px 8px rgba(20, 40, 70, .07); }
.cf-orglogo {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: #fff; border: 1px solid var(--cf-line);
  object-fit: contain; padding: 4px; box-sizing: border-box;
}
.cf-orglogo-fb { display: inline-flex; align-items: center; justify-content: center; }
.cf-orglogo-fb svg { width: 24px; height: 24px; }
.cf-orgbody { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* 链接要一眼可辨：站点蓝 + 常显下划线 */
.cf-orglink {
  color: var(--cf-blue); font-weight: 600; font-size: 14.5px;
  text-decoration: underline; text-decoration-color: rgba(26, 115, 232, .35); text-underline-offset: 2px;
}
.cf-orglink:hover { text-decoration-color: currentColor; }
.cf-orgname { font-weight: 600; font-size: 14.5px; color: var(--cf-ink); }
.cf-orgvisit {
  display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--cf-blue); text-decoration: none;
}
.cf-orgvisit:hover { text-decoration: underline; }
.cf-orgnote { font-size: 12.5px; color: var(--cf-muted); margin-top: 3px; }

/* —— 双栏小面板（未包含项 / 模型说明） —— */
.cf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 760px) { .cf-two { grid-template-columns: 1fr; } }
.cf-minipanel { background: #f8fafc; border: 1px solid var(--cf-line); border-radius: 10px; padding: 13px 16px; }
.cf-minipanel h4 { margin: 0 0 8px; font-size: 14px; }
.cf-minipanel ul { margin: 0; padding-left: 18px; font-size: 13px; color: #3c4854; }
.cf-minipanel ul li { margin-bottom: 4px; }

/* —— CTA —— */
.cf-cta { background: linear-gradient(135deg, #16202b, #22364d); color: #fff; border-radius: 14px; padding: 24px 26px; }
.cf-cta h3 { margin: 0 0 8px; font-size: 19px; }
.cf-cta p { margin: 0 0 14px; font-size: 14.5px; opacity: .92; }
.cf-cta ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; }
.cf-cta ul li { margin-bottom: 5px; }
.cf-cta-btn { display: inline-block; background: #fff; color: var(--cf-ink); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 8px; text-decoration: none; }
.cf-cta-btn:hover { background: #eef2f6; }
.cf-cta-alt { display: block; margin-top: 12px; font-size: 13px; opacity: .8; }
.cf-cta-alt a { color: #fff; }

.cf-foot { font-size: 12.5px; color: #8a949e; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }

@media (max-width: 640px) {
  .cf-h1 { font-size: 25px; }
  .cf-panel { padding: 18px 16px; }
}