/* 组件工厂。外观照 docs/STYLE_PORTAL.md；表格，分页，状态标签，按钮，表单，事实格都用 app.css 的类，
 * 这里只放本页自己的：描述卡片与参考资料，草稿卡片头的筛选，详情左右两栏，概要，检查，需求，步骤，文件与新旧对照。
 * 颜色一律用 app.css 的变量，带色值退路，退路也是帆软色板里的值。 */

/* 页面：灰底上一张张白卡片，卡片之间 12 像素 */
.fa-page { display: flex; flex-direction: column; gap: 12px; }
.fa-page > .card, .fa-page > .page-head { margin: 0; }
.fa-page > .progress { margin-bottom: -2px; }
.fa-page > .pg-t { margin-bottom: 0; }
.fa-st-l { color: var(--ink2); white-space: nowrap; }
/* 抽屉底栏：取消在前，主按钮在后，右对齐由外壳的 .sf 管 */
.fa-foot-btns { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ 描述框：需求，参考资料，生成 */
.fa-comp { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; border-radius: 6px; }
.fa-comp .fld.stack > .l { font-weight: 600; }
.fa-comp textarea#fa-c-desc { min-height: 104px; }
.fa-comp textarea#fa-d-desc { min-height: 176px; }
.fa-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fa-adds-l { margin-right: 4px; font-weight: 600; color: var(--ink, #232E40); }
.fa-adds .btn.sm { gap: 4px; }
.fa-adds .btn.sm svg.i { width: 15px; height: 15px; margin-left: -2px; color: var(--ink3, #647185); }
.fa-adds .btn.sm:hover svg.i, .fa-adds .btn.sm[aria-expanded="true"] svg.i { color: var(--primary, #3685F2); }
.fa-adds .btn.sm[aria-expanded="true"] { border-color: var(--primary, #3685F2); color: var(--primary, #3685F2); }

/* 资料一份一个小块：图标，标题，字数，移除；还在上传的转圈 */
.fa-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-refs[hidden] { display: none; }
.fa-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--border, #E8EAED);
  border-radius: 4px; background: var(--th-bg, #F7F8FA); color: var(--ink2, #3D4D66); font-size: 13px; min-width: 0; }
.fa-ref > svg.i { width: 15px; height: 15px; flex: none; color: var(--primary, #3685F2); }
.fa-ref-t { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.fa-ref-t { cursor: pointer; }
button.fa-ref-t:hover { color: var(--primary, #3685F2); text-decoration: underline; text-underline-offset: 2px; }
.fa-ref-m { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--ink4, #9EA6B2); font-size: 12px; white-space: nowrap; }
.fa-ref-m .mono { font-size: 12px; }
.fa-ref-m .spin-i { width: 12px; height: 12px; }
.fa-ref-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--ink4, #9EA6B2); cursor: pointer; }
.fa-ref-x svg.i { width: 14px; height: 14px; }
.fa-ref-x:hover { background: var(--hover, rgba(0, 0, 0, .04)); color: var(--red, #E65251); }
.fa-ref-x[disabled] { visibility: hidden; }
.fa-ref.pend { border-style: dashed; }

/* 加链接，加文字，选组件：在下面展开一行 */
.fa-pane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--border, #E8EAED); border-radius: 4px; background: var(--th-bg, #F7F8FA); }
.fa-pane[hidden] { display: none; }
.fa-pl { color: var(--ink2, #3D4D66); white-space: nowrap; }
.fa-pane input[type=text], .fa-pane input[type=search], .fa-pane textarea { height: 32px; padding: 0 11px; border: 1px solid var(--input-border, #D0D4DA); border-radius: 4px;
  background: var(--card, #FFFFFF); color: var(--ink, #232E40); font: inherit; outline: 0; min-width: 0; }
.fa-pane input:focus, .fa-pane textarea:focus { border-color: var(--primary, #3685F2); box-shadow: 0 0 0 2px var(--focus-ring, rgba(54, 133, 242, .2)); }
.fa-pane #fa-c-url, .fa-pane #fa-d-url, .fa-pane #fa-r-url { flex: 1 1 280px; }
.fa-pane-t { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.fa-pane-t .fa-pl { line-height: 32px; }
.fa-pane-t textarea { height: auto; min-height: 104px; padding: 5px 11px; resize: vertical; line-height: 22px; }
.fa-pane-b { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.fa-pane-c { align-items: flex-start; }
.fa-cq { position: relative; flex: 1 1 280px; min-width: 0; }
.fa-cq > svg.i { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; color: var(--ink4, #9EA6B2); pointer-events: none; }
.fa-cq input[type=search] { width: 100%; padding-left: 32px; }
.fa-clist { position: absolute; left: 0; right: 0; top: 36px; z-index: 30; max-height: 320px; overflow: auto; padding: 4px 0; border-radius: 4px;
  background: var(--card, #FFFFFF); box-shadow: var(--pop-shadow, 0 6px 16px rgba(35, 46, 64, .10)); border: 1px solid var(--border, #E8EAED); }
.fa-clist[hidden] { display: none; }
.fa-copt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; width: 100%; padding: 6px 12px; border: 0;
  background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink, #232E40); }
.fa-copt .t { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-copt .n { grid-column: 1; grid-row: 2; color: var(--ink4, #9EA6B2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-copt .p { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink3, #647185); font-size: 12px; white-space: nowrap; }
.fa-copt:hover, .fa-copt.on { background: var(--primary-bg, #EAF2FD); }
.fa-cnone { padding: 8px 12px; color: var(--ink4, #9EA6B2); }

/* 拖文件进来：整块描述框亮起，中间写松手上传 */
.fa-drop { position: absolute; inset: -6px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 20;
  border: 2px dashed var(--primary, #3685F2); border-radius: 6px; background: rgba(234, 242, 253, .82); background: color-mix(in srgb, var(--primary-bg, #EAF2FD) 82%, transparent);
  color: var(--primary, #3685F2); font-weight: 600; pointer-events: none; backdrop-filter: blur(1px); }
.fa-drop svg.i { width: 28px; height: 28px; }
.fa-comp.drag .fa-drop { display: flex; }

/* 清单页的描述卡片：生成在右下 */
.fa-new .card-b { display: flex; flex-direction: column; gap: 12px; }
.fa-new-f { display: flex; justify-content: flex-end; gap: 8px; }
.fa-new-f .btn svg.i, #fa-d-go svg.i { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ 草稿卡片：头上右边是状态与搜索 */
.fa-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.fa-filter select, .fa-q input { height: 32px; border: 1px solid var(--input-border, #D0D4DA); border-radius: 4px; background: var(--card, #FFFFFF);
  color: var(--ink, #232E40); font: inherit; outline: 0; }
.fa-filter select { width: 112px; padding: 0 8px; }
.fa-q { position: relative; display: block; }
.fa-q > svg.i { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; color: var(--ink4, #9EA6B2); pointer-events: none; }
.fa-q input { width: 220px; padding: 0 11px 0 32px; }
.fa-filter select:focus, .fa-q input:focus { border-color: var(--primary, #3685F2); box-shadow: 0 0 0 2px var(--focus-ring, rgba(54, 133, 242, .2)); }
.fa-t1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fa-t1 .lnk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-t1 .tag { flex: none; }
.fa-sub { display: flex; gap: 8px; min-width: 0; }
.fa-sub .mono { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--ink3, #647185); }
.fa-m { display: none; color: var(--ink4, #9EA6B2); flex: none; }
.fa-d { color: var(--ink3, #647185); }
.fa-time { color: var(--ink4, #9EA6B2); font-size: 12px; margin-left: 4px; }
.fa-root .tbl td.ops .op[disabled]:hover { color: var(--ink4, #9EA6B2); }

/* 卡片头照外壳：主色竖条加 15 像素加粗标题 */
.fa-ch { gap: 8px; }

/* ------------------------------------------------------------------ 详情 */
/* 页头：返回，标题，组件名，状态，方式，会写入；右边按钮，删除与别的按钮隔开一点 */
.fa-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
.fa-head .meta { gap: 8px; }
.fa-name { color: var(--ink3, #647185); font-size: 12px; overflow-wrap: anywhere; }
.fa-head .actions #fa-delete { margin-right: 16px; }

.fa-p { margin: 0; padding: 0 16px 16px; line-height: 22px; color: var(--ink2, #3D4D66); white-space: pre-wrap; overflow-wrap: anywhere; }

/* 概要：先写这一份为什么是现在这个状态，再写说明，最后几项事实 */
.fa-why { margin: 0 16px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--divider, #F2F4F7); }
.fa-why .k { font-size: 12px; line-height: 18px; color: var(--ink3, #647185); margin-bottom: 2px; }
.fa-why .v { line-height: 22px; color: var(--ink, #232E40); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.fa-why.fail .v { color: var(--red, #E65251); }
#fa-sum dl.facts { padding-top: 0; gap: 12px 24px; }
#fa-sum dl.facts dt { margin-bottom: 2px; }
#fa-sum dl.facts dd .mono { font-size: 12px; }

/* 检查：一条一行，错误红字，提醒灰字，说到位置的可以点 */
.fa-issues { list-style: none; margin: 0; padding: 0 16px 6px; }
.fa-issues li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--divider, #F2F4F7); line-height: 20px; overflow-wrap: anywhere; min-width: 0; }
.fa-issues li svg.i { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.fa-issues li.e { color: var(--red, #E65251); }
.fa-issues li.w { color: var(--ink3, #647185); }
.fa-lnk { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fa-lnk:hover { color: var(--primary, #3685F2); }

/* 需求与参考资料：原话在上，资料一行一份 */
.fa-rh { margin: 0 16px; padding: 10px 0 4px; border-top: 1px solid var(--divider, #F2F4F7); font-size: 12px; color: var(--ink3, #647185); }
.fa-rlist { list-style: none; margin: 0; padding: 0 16px 10px; }
.fa-rlist li { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; }
.fa-rlist li > svg.i { width: 16px; height: 16px; flex: none; color: var(--primary, #3685F2); }
.fa-rlist .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-rlist .m { flex: none; color: var(--ink4, #9EA6B2); font-size: 12px; white-space: nowrap; }
.fa-rlist .m .mono { font-size: 12px; }
.fa-lnk2 { max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--primary, #3685F2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.fa-lnk2:hover { color: var(--primary-hover, #4A91F3); text-decoration: underline; text-underline-offset: 2px; }
.fa-fold { display: flex; align-items: center; gap: 4px; width: calc(100% - 32px); margin: 0 16px; padding: 10px 0; border: 0; border-top: 1px solid var(--divider, #F2F4F7); background: none; font: inherit; font-weight: 600; color: var(--ink, #232E40); cursor: pointer; text-align: left; }
.fa-fold svg.i { width: 16px; height: 16px; color: var(--ink3, #647185); transition: transform .15s; }
.fa-fold[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.fa-fold:last-child { margin-bottom: 6px; }
.fa-ref-box { padding: 0 16px 16px; }
.fa-reftext { margin: 0; max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: 4px; background: var(--th-bg, #F7F8FA); color: var(--ink2, #3D4D66); font: 12.5px/20px var(--mono, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 资料全文：抽屉里，长了在框里滚 */
.fa-rv { display: flex; flex-direction: column; gap: 12px; }
.fa-rv dl.facts { padding: 0; }
.fa-rv dl.facts dd svg.i { width: 16px; height: 16px; color: var(--primary, #3685F2); }
.fa-reffull { max-height: none; font-family: inherit; font-size: 13px; line-height: 22px; }
.fa-rv-more { display: flex; justify-content: center; }

/* 步骤：一行一步，字在左，时间在右 */
.fa-steps { list-style: none; margin: 0; padding: 0 16px 6px; }
.fa-steps li { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--divider, #F2F4F7); }
/* 起草时新来的一步从下面浮上来 */
.fa-steps li.fa-new { animation: rise-in .34s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
.fa-steps .x { flex: 1; min-width: 0; color: var(--ink2, #3D4D66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-steps .t { flex: none; color: var(--ink4, #9EA6B2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-steps .spin-i { flex: none; width: 14px; height: 14px; border: 2px solid var(--divider, #F2F4F7); border-right-color: var(--primary, #3685F2); border-radius: 50%; animation: spin .8s linear infinite; }
/* 按意见修改开始新的一轮：加粗，上面一条深一点的分隔线；起草没成红字 */
.fa-steps li.rd { border-top-color: var(--border, #E8EAED); }
.fa-steps li.rd .x { color: var(--ink, #232E40); font-weight: 600; }
.fa-steps li.bad .x { color: var(--red, #E65251); }

.fa-n { color: var(--ink4, #9EA6B2); font-size: 12px; white-space: nowrap; margin-right: 4px; }
.fa-plus { color: var(--success-ink, #0D9047); font-weight: 600; }
.fa-minus { color: var(--red, #E65251); font-weight: 600; }
/* 对照与全文：两个连在一起的小按钮，当前那个主色 */
.fa-seg { display: inline-flex; margin-right: 8px; border: 1px solid var(--input-border, #D0D4DA); border-radius: 4px; overflow: hidden; }
.fa-seg button { height: 26px; padding: 0 10px; border: 0; background: var(--card, #FFFFFF); color: var(--ink2, #3D4D66); font: inherit; font-size: 13px; cursor: pointer; }
.fa-seg button + button { border-left: 1px solid var(--input-border, #D0D4DA); }
.fa-seg button:hover { color: var(--primary, #3685F2); }
.fa-seg button.on { background: var(--primary-bg, #EAF2FD); color: var(--primary, #3685F2); font-weight: 600; }
.fa-ftabs { display: flex; gap: 24px; padding: 0 16px; border-bottom: 1px solid var(--divider, #F2F4F7); overflow-x: auto; scrollbar-width: none; }
.fa-ftabs::-webkit-scrollbar { display: none; }
.fa-ftabs button { flex: none; white-space: nowrap; }
.fa-ftabs button { position: relative; height: 40px; padding: 0; border: 0; background: none; color: var(--ink2, #3D4D66); font-family: inherit; font-size: 14px; line-height: 40px; cursor: pointer; }
.fa-ftabs button:hover { color: var(--primary, #3685F2); }
.fa-ftabs button.on { color: var(--primary, #3685F2); }
.fa-ftabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary, #3685F2); }
.fa-ftabs button:disabled { color: var(--ink4, #9EA6B2); cursor: not-allowed; }
.fa-ftabs button.on:disabled::after { display: none; }
.fa-nofile { display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 16px; }
.fa-rows { position: relative; padding: 8px 0; font: 12.5px/20px var(--mono, monospace); color: var(--ink, #232E40); }
.fa-rows::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; border-left: 1px solid var(--divider, #F2F4F7); }
.fa-row { display: flex; min-height: 20px; }
.fa-row .no { flex: none; width: 52px; padding-right: 12px; text-align: right; color: var(--ink4, #9EA6B2); user-select: none; -webkit-user-select: none; }
.fa-row .tx { flex: 1; min-width: 0; padding: 0 16px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.fa-row.e .no { color: var(--red, #E65251); font-weight: 600; }
.fa-row.w .no { color: var(--orange, #FAAA39); font-weight: 600; }
.fa-row.hl { background: var(--primary-bg, #EAF2FD); }
.fa-row.hl.e { background: var(--red-bg, #FFECEC); }
.fa-row.hl.w { background: var(--orange-bg, #FEEED7); }
/* 对照：左边原来的行号，右边现在的行号，加的绿底，删的红底，没变的长段收成一行 */
.fa-diff { padding: 8px 0; font: 12.5px/20px var(--mono, monospace); color: var(--ink, #232E40); }
.fa-drow { display: flex; min-height: 20px; }
.fa-drow .no { flex: none; width: 44px; padding-right: 8px; text-align: right; color: var(--ink4, #9EA6B2); user-select: none; -webkit-user-select: none; }
.fa-drow .sg { flex: none; width: 18px; text-align: center; color: var(--ink4, #9EA6B2); user-select: none; -webkit-user-select: none; }
.fa-drow .tx { flex: 1; min-width: 0; padding: 0 16px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.fa-drow.add { background: var(--success-bg, #E1F4E7); }
.fa-drow.add .sg { color: var(--success-ink, #0D9047); font-weight: 600; }
.fa-drow.del { background: var(--red-bg, #FFECEC); }
.fa-drow.del .sg { color: var(--red, #E65251); font-weight: 600; }
.fa-dgap { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; margin: 2px 0; padding: 0 0 0 104px; border: 0; border-top: 1px dashed var(--border, #E8EAED);
  border-bottom: 1px dashed var(--border, #E8EAED); background: var(--card, #FFFFFF); color: var(--ink3, #647185); font: 12px/28px var(--mono, monospace); cursor: pointer; text-align: left; }
.fa-dgap svg.i { width: 16px; height: 16px; }
.fa-dgap:hover { color: var(--primary, #3685F2); background: var(--primary-bg, #EAF2FD); }
/* 页签上写这份文件加了几行删了几行 */
.fa-ftabs button { display: inline-flex; align-items: center; gap: 6px; }
.fa-tst { display: inline-flex; gap: 4px; font-size: 12px; line-height: 16px; }
.fa-tst.faint { color: var(--ink4, #9EA6B2); }
/* 参数：契约照表格给人看 */
.fa-contract { padding: 4px 16px 16px; background: var(--card, #FFFFFF); min-height: 100%; }
.fa-ct-desc { margin: 8px 0 4px; line-height: 22px; color: var(--ink2, #3D4D66); overflow-wrap: anywhere; }
.fa-ct-desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fa-ct-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-weight: 600; color: var(--ink, #232E40); }
.fa-ct-h::before { content: ""; width: 3px; height: 14px; background: var(--primary, #3685F2); border-radius: 1px; flex: none; }
.fa-ct-none { padding: 4px 0; }
.fa-contract .tbl-wrap { border: 1px solid var(--border, #E8EAED); border-radius: 4px; }
/* 类型一列照最长的类型名定宽（factory.js 的 contractHtml），不截成“对象...”；超过七个字宽的少见写法在格子里折行 */
.fa-contract .tbl td.fa-ty { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; line-height: 20px; }
/* 窄于 640 类型与必填两列收起（列表页的规矩），参数一列放宽到四成，名字下面的英文键名不截成“skip_em…” */
@media (max-width: 640px) { .fa-contract .tbl col:first-child { width: 40% !important; } }
.fa-pn { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.fa-pn .mono { overflow-wrap: anywhere; }
.tag.fa-addt { color: var(--success-ink, #0D9047); background: var(--success-bg, #E1F4E7); }
.tag.fa-chg { color: var(--orange-ink, #AF7728); background: var(--orange-bg, #FEEED7); }
.tag.fa-gone { color: var(--red, #E65251); background: var(--red-bg, #FFECEC); }
.fa-gone-r td { color: var(--ink4, #9EA6B2); }
/* 藏起来的口：说明一栏打头一个灰色小标签，后面接着写说明 */
.tag.fa-hid { margin: -1px 6px 0 0; padding: 0 5px; }
.fa-gone-r .mono { text-decoration: line-through; }
.fa-ct-list { list-style: none; margin: 0; padding: 0; }
.fa-ct-list li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--divider, #F2F4F7); }
.fa-ct-ex .sub-h { margin-top: 4px; }
/* 检查结果前面写是哪份文件 */
.fa-if { flex: none; margin-right: 6px; padding: 0 4px; border-radius: 2px; background: var(--grey-bg, #F2F4F7); color: var(--ink3, #647185); font-size: 11.5px; line-height: 18px; }
.fa-issues li > span { min-width: 0; }
/* 试运行草稿的结果 */
.fa-try-out .sec-h { margin-top: 8px; }
.fa-try-out .code.err { white-space: pre-wrap; }

/* 代码着色：关键字与数字主色，字符串偏橙的深色，注释灰，JSON 的键靛蓝 */
.fa-row .k-k, .fa-row .k-n, .fa-drow .k-k, .fa-drow .k-n { color: var(--primary, #3685F2); }
.fa-row .k-s, .fa-drow .k-s { color: #BA853B; color: color-mix(in srgb, var(--orange, #FAAA39) 70%, var(--ink, #232E40)); }
.fa-row .k-c, .fa-drow .k-c { color: var(--ink3, #647185); }
.fa-row .k-y, .fa-drow .k-y { color: var(--indigo, #1E4092); }

.fa-strong { color: var(--ink, #232E40); font-weight: 600; }

@media (max-width: 767px) {
  /* 草稿卡片头：筛选换到标题下面一行，搜索框占满 */
  #fa-list-h { flex-wrap: wrap; row-gap: 8px; }
  #fa-list-h .r, #fa-list-h .fa-filter { display: contents; }
  #fa-list-h .fa-st-l { margin-left: auto; }
  #fa-list-h .fa-q { flex: 1 1 100%; order: 9; }
  .fa-q input { width: 100%; }
}
@media (max-width: 640px) {
  /* 清单只剩组件与状态两列：组件占满，更新时间挪到组件名后面 */
  .fa-root .tbl col.fa-c1 { width: auto !important; }
  .fa-root .tbl col.fa-c2 { width: 88px !important; }
  .fa-m { display: inline; }
  .fa-head .actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  .fa-p, .fa-issues, .fa-steps, .fa-ref-box, .fa-rlist { padding-left: 12px; padding-right: 12px; }
  .fa-why, .fa-rh { margin-left: 12px; margin-right: 12px; }
  .fa-fold { width: calc(100% - 24px); margin: 0 12px; }
  .fa-ftabs { padding: 0 12px; gap: 16px; }
  .fa-ref-t { max-width: 160px; }
  .fa-adds-l { width: 100%; }
  .fa-dgap { padding-left: 16px; }
  .fa-drow .no { width: 34px; padding-right: 4px; }
}
/* 概要里的引脚图：和画布上的节点同一张卡片 */
.fa-pins { padding: 0 16px 4px; }
.fa-pins .afe-chipbox { padding-left: 4px; }

/* ------------------------------------------------------------------ 草稿页：在线开发的 IDE。左边对话，中间代码，右边预览
 * 几栏按内容区的宽度定：1180 以上三栏，720 以上两栏，代码与预览切换着看，再窄一栏，三块切换。两栏三栏时整页一屏，每块在自己框里滚动 */
.fa-idep[data-cols="2"], .fa-idep[data-cols="3"] { height: calc(100vh - var(--hd-h, 48px)); height: calc(100dvh - var(--hd-h, 48px)); padding-bottom: 12px; }
.fa-idep > .page-head { flex: none; }
.fa-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fa-idep[data-cols="2"] .fa-body, .fa-idep[data-cols="3"] .fa-body { flex: 1 1 auto; min-height: 0; }
.fa-ide { display: grid; gap: 12px; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav" "main"; }
.fa-ide > .fa-chat, .fa-ide > .fa-files, .fa-ide > .fa-pv { grid-area: main; }
.fa-ide > .fa-panes { grid-area: nav; }
.fa-idep[data-cols="3"] .fa-ide { grid-template-columns: 320px minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "chat files pv"; flex: 1 1 auto; }
.fa-idep[data-cols="3"] .fa-ide > .fa-chat { grid-area: chat; }
.fa-idep[data-cols="3"] .fa-ide > .fa-files { grid-area: files; }
.fa-idep[data-cols="3"] .fa-ide > .fa-pv { grid-area: pv; }
.fa-idep[data-cols="2"] .fa-ide { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "chat main"; flex: 1 1 auto; }
.fa-idep[data-cols="2"] .fa-ide > .fa-chat { grid-area: chat; }
/* 已答复又没有文件：只留对话，占满，最宽 880 */
.fa-ide[data-nofiles="1"] > .fa-files, .fa-ide[data-nofiles="1"] > .fa-pv, .fa-ide[data-nofiles="1"] > .fa-panes { display: none; }
.fa-idep[data-cols] .fa-ide[data-nofiles="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "chat"; }
.fa-ide[data-nofiles="1"] > .fa-chat { grid-area: chat; display: flex !important; }
.fa-ide > .card { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fa-ide > .card > .card-h { flex: none; border-bottom: 1px solid var(--divider, #F2F4F7); }
/* 页签切换着看时，页签已经写了是哪一块，卡片里不再重复标题 */
.fa-idep[data-cols="1"] #fa-chat-h, .fa-idep[data-cols="1"] #fa-pv-h, .fa-idep[data-cols="2"] #fa-pv-h { display: none; }
/* 分块切换：三栏时没有；两栏时只切代码与预览，放进右边卡片顶上一行，和左边对话的卡片头一样高，两张卡片顶边对齐；一栏时三块都切，占满一行 */
/* 三块的切换是分段按钮，和代码一栏里的文件页签分开层级 */
.fa-panes { flex: none; display: flex; align-items: center; min-width: 0; }
.fa-seg2 { display: inline-flex; padding: 2px; gap: 2px; background: var(--th-bg, #F7F8FA); border: 1px solid var(--border, #E8EAED); border-radius: 6px; }
.fa-idep[data-cols="3"] .fa-panes { display: none; }
.fa-idep[data-cols="2"] #fa-pane-chat { display: none; }
.fa-idep[data-cols="2"] .fa-ide > .fa-panes { grid-area: main; align-self: start; z-index: 2; box-sizing: border-box; height: 52px; margin: 1px 1px 0; padding: 0 15px;
  border-bottom: 1px solid var(--divider, #F2F4F7); border-radius: 5px 5px 0 0; background: var(--card, #FFFFFF); }
.fa-idep[data-cols="2"] .fa-ide > .fa-files, .fa-idep[data-cols="2"] .fa-ide > .fa-pv { padding-top: 52px; }
.fa-panes button { height: 30px; min-width: 72px; padding: 0 16px; border: 0; border-radius: 4px; background: none; color: var(--ink2, #3D4D66); font: inherit; font-size: 14px; cursor: pointer; }
.fa-panes button:hover { color: var(--primary, #3685F2); }
.fa-panes button.on { background: var(--card, #FFFFFF); color: var(--primary, #3685F2); font-weight: 600; box-shadow: 0 0 0 1px var(--border, #E8EAED); }
.fa-idep[data-cols="1"] .fa-seg2 { display: flex; flex: 1; }
.fa-idep[data-cols="1"] .fa-panes button { flex: 1; }
.fa-idep[data-cols="2"] .fa-ide[data-pane="pv"] > .fa-files, .fa-idep[data-cols="2"] .fa-ide:not([data-pane="pv"]) > .fa-pv { display: none; }
.fa-idep[data-cols="1"] .fa-ide[data-pane="chat"] > :not(.fa-chat):not(.fa-panes), .fa-idep[data-cols="1"] .fa-ide[data-pane="code"] > :not(.fa-files):not(.fa-panes),
.fa-idep[data-cols="1"] .fa-ide[data-pane="pv"] > :not(.fa-pv):not(.fa-panes) { display: none; }

/* 对话：人说的话浅灰底，AI 的一轮是一列短步骤加交卷说明，人手改，上传，退回，上架这类事一行虚线框 */
.fa-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px 16px; overscroll-behavior: contain; }
/* 滚动区上下留白，滚到边上的那一条在 12px 里淡出，不是贴着边被切 */
.fa-idep:not([data-cols="1"]) .fa-msgs { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.fa-idep[data-cols="1"] .fa-msgs { overflow: visible; }
.fa-msgs:focus-visible { outline: 2px solid var(--focus-ring, rgba(54, 133, 242, .2)); outline-offset: -2px; }
.fa-thread { display: flex; flex-direction: column; gap: 14px; }
.fa-thread > .fa-new { animation: rise-in .34s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
.fa-msg { min-width: 0; }
.fa-mh { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; color: var(--ink2, #3D4D66); }
.fa-mh b { font-weight: 600; color: var(--ink, #232E40); }
.fa-mt { margin-left: auto; font-size: 12px; color: var(--ink4, #9EA6B2); white-space: nowrap; }
.avatar.sm { width: 22px; height: 22px; font-size: 12px; background: var(--avatar, #3075D5); color: var(--on-avatar, #FFFFFF); }
.avatar.sm.ai { background: var(--primary-bg, #EAF2FD); color: var(--primary, #3685F2); }
.avatar.sm.ai svg.i { width: 14px; height: 14px; }
.fa-msg.u .fa-mb { margin: 4px 0 0 30px; padding: 8px 10px; border-radius: 6px; background: var(--th-bg, #F7F8FA); color: var(--ink, #232E40); line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fa-msg .fa-mrefs { padding: 4px 0 0 30px; }
.fa-msg .fa-mrefs li { min-height: 30px; }
.fa-msg.ai .fa-steps { margin: 2px 0 0 30px; padding: 0; }
.fa-msg.ai .fa-steps li { min-height: 28px; border-top: 0; font-size: 13px; }
.fa-msg.ai .fa-steps li + li { border-top: 1px solid var(--divider, #F2F4F7); }
.fa-res { margin: 6px 0 0 30px; color: var(--ink, #232E40); line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fa-res.bad { color: var(--red, #E65251); }
.fa-fold2 { display: flex; align-items: center; gap: 4px; margin: 2px 0 0 26px; padding: 2px 4px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink3, #647185); cursor: pointer; }
.fa-fold2 svg.i { width: 15px; height: 15px; transition: transform .15s; }
.fa-fold2[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.fa-fold2:hover { color: var(--primary, #3685F2); }
.fa-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--border, #E8EAED); border-radius: 4px; font-size: 13px; line-height: 20px; color: var(--ink3, #647185); }
.fa-ev > svg.i { width: 15px; height: 15px; flex: none; }
.fa-ev .x { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fa-ev.reject { color: var(--red, #E65251); border-color: var(--red-bg, #FFECEC); }
.fa-ev.approve { color: var(--success-ink, #0D9047); }
.fa-ev.submit, .fa-ev.upload, .fa-ev.edit { color: var(--ink2, #3D4D66); }
.fa-evm { flex-basis: 100%; padding-left: 21px; color: var(--ink2, #3D4D66); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 对话的输入框：一段话，资料一行，底下 Ctrl 加回车发送与发送键；AI 在改时换成停止 */
.fa-cin { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--divider, #F2F4F7); }
.fa-comp.compact { gap: 8px; }
.fa-comp.compact .fa-c-desc > .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fa-comp.compact textarea { min-height: 76px; resize: none; }
.fa-comp.compact .fa-adds-l { display: none; }
.fa-comp.compact .fa-adds .btn.sm { height: 26px; padding: 0 8px; }
.fa-comp.compact .fa-ref-t { max-width: 160px; }
.fa-cin-b { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* 一栏时整页滚，输入框贴在屏幕底边 */
/* 卡片用 clip 不用 hidden，不然卡片自己成了滚动框，贴底不起作用 */
.fa-idep[data-cols="1"] .fa-ide > .card { overflow: clip; }
.fa-idep[data-cols="1"] .fa-cin { position: sticky; bottom: 0; z-index: 2; background: var(--card, #FFFFFF); border-radius: 0 0 6px 6px; }
.fa-cin-note { line-height: 22px; }
.fa-cin .btn svg.i { width: 15px; height: 15px; }

/* 代码：头上一行页签与工具，下面编辑器铺满，编辑器自己滚动 */
/* 页签与工具一行放不下时，工具换到下一行靠右 */
.fa-fbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 44px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--divider, #F2F4F7); }
.fa-fbar .fa-ftabs { flex: 0 1 auto; min-width: 0; padding: 0; border-bottom: 0; }
.fa-fbar .fa-tools { margin-left: auto; min-height: 40px; }
.fa-ftabs button .fa-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--orange, #FAAA39); }
.fa-ftabs button.dirty .fa-dot { display: inline-block; }
.fa-tools { flex: none; display: flex; align-items: center; gap: 6px; }
.fa-tools .fa-seg { margin-right: 4px; }
.fa-sv { font-size: 12px; white-space: nowrap; }
.fa-sv.dirty { color: var(--orange-ink, #AF7728); }
.fa-code { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--code-bg, var(--card, #FFFFFF)); border-radius: 0 0 6px 6px; }
.fa-idep[data-cols="1"] .fa-code { height: 70vh; min-height: 420px; }
.fa-code > * { position: absolute; inset: 0; }
.fa-code > [hidden] { display: none; }
.fa-ed .cm-editor { height: 100%; }
.fa-ed .cm-content { padding: 8px 0 24px; }
.fa-ed .cm-scroller, .fa-ctbox, .fa-diffbox { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%); }
.fa-ta { width: 100%; height: 100%; padding: 8px 12px; border: 0; outline: 0; resize: none; background: var(--code-bg, var(--card, #FFFFFF)); color: var(--ink, #232E40); font: 12.5px/20px var(--mono, monospace); }
.fa-ctbox { overflow: auto; padding-bottom: 20px; background: var(--card, #FFFFFF); }
.fa-ctbox > dl.facts { padding: 12px 16px 4px; gap: 12px 24px; }
.fa-ctbox > dl.facts dd .mono { font-size: 12px; }
.fa-ctbox > .fa-pins { padding: 12px 16px 0; }
.fa-diffbox { overflow: auto; padding-bottom: 20px; background: var(--th-bg, #F7F8FA); }
#fa-nofile { display: flex; align-items: center; justify-content: center; }

/* 预览：检查一节，试运行一节；参数表单照 inputSchema 生成，结果是表格就画表格 */
.fa-pv-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 20px; }
.fa-idep:not([data-cols="1"]) .fa-pv-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%); }
.fa-idep[data-cols="1"] .fa-pv-b { overflow: visible; }
/* 检查的结论贴在预览一栏的上沿：外面那层不出盒子，贴住的范围才是整栏 */
.fa-idep:not([data-cols="1"]) #fa-checks { display: contents; }
.fa-idep:not([data-cols="1"]) #fa-checks-h { position: sticky; top: 0; z-index: 1; margin: 0 -16px; padding: 0 16px; background: var(--card, #FFFFFF); border-bottom: 1px solid var(--divider, #F2F4F7); }
/* 节头下面已有分隔线，没有问题条目时试运行一节不再另画一条 */
.fa-idep:not([data-cols="1"]) #fa-checks:not(:has(#fa-issues)) + #fa-try { margin-top: 4px; padding-top: 0; border-top: 0; }
.fa-pv-sec + .fa-pv-sec { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--divider, #F2F4F7); }
.fa-sec-h { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.fa-sec-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink, #232E40); }
.fa-sec-h .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fa-pv .fa-issues { padding: 0 0 6px; }
.fa-pv .fa-issues li { padding: 8px 0; }
.fa-why2 { margin: 0 0 10px; color: var(--ink3, #647185); font-size: 13px; line-height: 20px; }
.fa-why2[hidden] { display: none; }
.fa-tform { gap: 12px; }
.fa-tform .fld.stack > .l { font-size: 13px; }
.fa-inn { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ink4, #9EA6B2); }
.fa-inh { margin: -2px 0 6px; font-size: 12px; line-height: 18px; }
.fa-tform .fld input[type=text], .fa-tform .fld input[type=number], .fa-tform .fld select { max-width: none; }
.fa-trun { display: flex; justify-content: flex-end; margin: 12px 0 4px; }
.fa-res2 .sec-h { margin-top: 12px; }
.fa-rbar { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
dl.facts.fa-rfacts { padding: 0 0 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 16px; }
dl.facts.fa-rfacts > div.w { grid-column: 1 / -1; }
dl.facts.fa-rfacts dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.fa-rtbl { border: 1px solid var(--border, #E8EAED); border-radius: 4px; }
.fa-rtbl td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.fa-rnote { margin: 4px 0 8px; font-size: 12px; }

/* 组件开发规范：抽屉里照文档排，代码块等宽浅底 */
.fa-md { color: var(--ink, #232E40); line-height: 24px; overflow-wrap: anywhere; }
.fa-md h2 { margin: 24px 0 8px; font-size: 16px; line-height: 24px; display: flex; align-items: center; gap: 8px; }
.fa-md h2::before { content: ""; width: 3px; height: 14px; background: var(--primary, #3685F2); border-radius: 1px; flex: none; }
.fa-md h2:first-child { margin-top: 0; }
.fa-md h3 { margin: 16px 0 6px; font-size: 14px; }
.fa-md p { margin: 0 0 10px; }
.fa-md ul, .fa-md ol { margin: 0 0 10px; padding-left: 22px; }
.fa-md li { margin: 2px 0; }
.fa-md code { padding: 0 4px; border-radius: 3px; background: var(--th-bg, #F7F8FA); font: 12.5px/20px var(--mono, monospace); }
.fa-md pre { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px; background: var(--th-bg, #F7F8FA); border: 1px solid var(--border, #E8EAED); overflow-x: auto; }
.fa-md pre code { padding: 0; background: none; white-space: pre; }
.fa-md blockquote { margin: 0 0 12px; padding: 4px 12px; border-left: 3px solid var(--border, #E8EAED); color: var(--ink2, #3D4D66); }
#fa-new-h .r .btn svg.i { width: 15px; height: 15px; }
.fa-up { color: var(--primary, #3685F2); }
@media (max-width: 640px) {
  .fa-msgs, .fa-pv-b { padding-left: 12px; padding-right: 12px; }
  .fa-fbar { padding-left: 12px; flex-wrap: wrap; }
  .fa-tools { margin-left: auto; }
  #fa-new-h { flex-wrap: wrap; }
  #fa-new-h .r { width: 100%; margin-left: 0; }
}

/* ================================================================== 2026 版界面：组件工厂
 * 新建组件的输入框和门户的大输入框一个样子：字写在框里，加资料的键与生成都在框底下一行。草稿页三栏都是 12 圆角卡片，
 * 概要里组件卡放在一小块点阵画布正中。这一段压在上面旧版写法后面，同名选择器盖掉旧外观 */
.fa-root .card, .fa-idep > * { border-radius: var(--r-lg); }
.fa-ct-h::before, .fa-md h2::before { display: none; }
/* 输入框：新建组件的是 20 圆角大框，草稿页对话的是 16 圆角小一号。只去掉描述那一个文本框的边，展开的加文字一栏照常有框 */
.fa-comp.in-card, .fa-comp.compact { gap: 6px; padding: 14px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--sh-md); transition: box-shadow .15s ease, border-color .15s ease; }
.fa-comp.compact { border-radius: var(--r-xl); box-shadow: var(--sh-xs); padding: 10px 10px 8px 14px; }
.fa-comp.in-card .fa-c-desc > .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fa-comp.in-card .fa-c-desc textarea, .fa-comp.compact .fa-c-desc textarea { width: 100%; padding: 2px 4px 0 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; resize: none; outline: 0; font-size: 15px; line-height: 24px; color: var(--ink); }
.fa-comp.compact .fa-c-desc textarea { font-size: 14px; line-height: 22px; min-height: 66px; }
.fa-comp .fa-c-desc textarea::placeholder { color: var(--ink4); }
.fa-comp .fa-adds { gap: 6px; }
.fa-comp .fa-adds-l { display: none; }
.fa-comp .fa-adds .btn.sm.fa-addref { height: 28px; padding: 0 9px; border: 0; border-radius: var(--r); background: var(--grey-bg); box-shadow: none; color: var(--ink2); }
.fa-comp .fa-adds .btn.sm.fa-addref:hover { background: var(--hover2); color: var(--ink); }
.fa-adds-gap { flex: 1; }
.fa-comp .fa-adds > .btn.pri { height: 32px; padding: 0 14px; border-radius: 10px; }
.fa-comp.compact .fa-adds > .btn { height: 28px; border-radius: var(--r); }
.fa-new .card-b { padding-top: 4px; }
.fa-cin-b { display: none; }
/* 草稿页对话框窄：四个加资料的键只留图标，悬停写字；发送是和编辑页一样的圆形箭头 */
.fa-comp.compact .fa-adds .btn.sm.fa-addref { width: 30px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.fa-comp.compact .fa-adds .btn.sm.fa-addref svg.i { width: 16px; height: 16px; margin: 0; }
.fa-comp.compact .fa-adds > .as-send { width: 30px; height: 30px; }
/* 深色下大输入框高一档，框线亮一点，不和底色混在一起 */
:root[data-theme="dark"] :is(.fa-comp.in-card, .fa-comp.compact) { background: var(--raised); border-color: var(--input-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.fa-comp.in-card, .fa-comp.compact) { background: var(--raised); border-color: var(--input-border); } }
/* 聚焦时框线换帆软蓝，不加外圈；框里灰着的键没有框，一层很淡的底，字压暗 */
.fa-comp .btn[disabled] { background: var(--hover); border-color: transparent; box-shadow: none; color: var(--ink4); }
.fa-comp.in-card:focus-within, .fa-comp.compact:focus-within { border-color: var(--primary); box-shadow: var(--sh-md); }
.fa-comp.compact:focus-within { box-shadow: var(--sh-xs); }
/* 输入参数小表格去掉外框 */
.fa-contract .tbl-wrap { border: 0; border-radius: 0; }
/* 对话里的事件：浅灰圆角块，不用虚线框 */
.fa-ev { border: 0; border-radius: var(--r-lg); background: var(--grey-bg); padding: 8px 12px; }
/* 试运行：页头的提交审核是这页唯一的黑色主按钮，试运行白底细框占满一行；输入框跟着内容长高，示例整段看得见 */
.fa-trun { margin: 16px 0 4px; }
.fa-trun .btn { flex: 1; }
.fa-trun .btn.pri { background: var(--card); border-color: var(--input-border); color: var(--ink); box-shadow: var(--sh-xs); }
.fa-trun .btn.pri:hover { background: var(--th-bg); border-color: var(--input-border); color: var(--ink); }
.fa-pv textarea { field-sizing: content; min-height: 64px; max-height: 420px; }
/* 概要：组件卡放在一小块点阵画布正中；几项事实一行排四个，起草时间那项占两格 */
.fa-ctbox > .fa-pins { margin: 12px 16px 0; padding: 22px 12px; display: flex; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-lg);
  background-color: var(--cv-bg); background-image: radial-gradient(var(--cv-dot) 1px, transparent 1.2px); background-size: 16px 16px; }
.fa-ctbox > .fa-pins .afe-chipbox { padding-left: 0; }
.fa-ctbox > dl.facts { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; padding-top: 16px; }
.fa-ctbox > dl.facts > div:has(.fa-time) { grid-column: span 2; }
/* 抽屉里的描述框（新建组件，用 AI 改组件，用 AI 新建或修改技能）：也是一个圆角大框，题目写在框里左上角，加资料的键在框底下一行，生成在抽屉底下 */
.fa-dform .fa-comp { gap: 6px; padding: 12px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-xs); transition: box-shadow .15s ease, border-color .15s ease; }
.fa-dform .fa-comp:focus-within { border-color: var(--primary); }
.fa-dform .fa-comp .fa-c-desc > .l { font-size: 12.5px; color: var(--ink3); }
.fa-dform .fa-comp .fa-c-desc textarea { width: 100%; padding: 0 4px 0 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; resize: none; outline: 0; font-size: 15px; line-height: 24px; color: var(--ink); }
:root[data-theme="dark"] .fa-dform .fa-comp { background: var(--raised); border-color: var(--input-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fa-dform .fa-comp { background: var(--raised); border-color: var(--input-border); } }
/* 没写就点生成：整个框描红，框里的文本框没有边 */
.fa-comp:has(.fa-c-desc.bad) { border-color: var(--danger); }
/* 草稿清单名字后面的“上传”和草稿页头上的一样是灰色小标签，帆软蓝只留给选中与链接 */
.tag.fa-up { color: var(--ink3); }
/* 试运行表单里藏起来的参数：键名后面一个灰色小标签 */
.fa-tform .l .tag.fa-hid { margin: 0 0 0 8px; }