/* ==========================================================================
   Zeus Insights · 主站 v3 样稿 · 合并定版 H3_merged · demo.css
   首屏演出用的仿真窗口：来料、正在成形的记录、协作过程三栏，左侧一条窄菜单。
   这是「产品层」，有自己的界面功能色。字号全部用 rem，最小 .8125rem（1024 宽时 13px）。

   尺寸策略（照 Twenty 首屏展示窗的做法：窗口有固定的最小尺寸，窄了不缩字）：
   - 窗口宽度由 .stage 给出：占视口宽的九成上下，最宽 84rem；最小 44rem，再窄就从右侧出血。
   - 窗内文字任何宽度都不缩。窗口变窄时收起栏目（容器查询，容器是 .stage__win）：
     不足 66rem 左侧菜单收成图标；不足 54rem「来料」与「记录」合成一栏，可切换。
   ========================================================================== */
.stage__win { container-type: inline-size; container-name: win; }
.fd {
  --fd-bg: #FFFFFF; --fd-bg2: #FAF8F5; --fd-bg3: #F1EEE8;
  --fd-line: #E9E5DE; --fd-line2: #D8D3CA;
  --fd-ink: #1E1D1B; --fd-ink2: #3A3835; --fd-mut: #5F5C57;
  --fd-amber-bg: #FAEFD6; --fd-amber: #7A4E00;
  --fd-green-bg: #E1F2E6; --fd-green: #1B6336;
  --fd-read: #FFF5EC;
  --fd-s: .8125rem;      /* 最小一档：标签、来源、等宽小字 */
  --fd-m: .875rem;       /* 界面正文 */
  position: relative; display: grid; grid-template-rows: 3.375rem minmax(0, 1fr); min-width: 44rem;
  /* 高度随视口高度取值：第一屏减去页眉、两行标题、按钮与各处间距后剩下多少就用多少，
     下限 30rem、上限 40.5rem。1440×900 与 1920×1080 下整扇窗都落在第一屏里。窗内字号不变，放不下的行在栏内滚动。 */
  height: clamp(30rem, calc(100vh - (var(--hdr-h) + var(--t-display) * 2.16 + 8.5rem)), 40.5rem);
  font-family: var(--f-sans); font-size: var(--fd-m); line-height: 1.4; color: var(--fd-ink); text-align: left;
  background: var(--fd-bg); border: 1px solid rgba(25, 24, 23, .16); border-radius: .875rem; overflow: hidden;
  box-shadow: 0 1px 1px rgba(25, 24, 23, .04), 0 1.5rem 3rem -1.5rem rgba(25, 24, 23, .22), 0 3.125rem 6.875rem -2.5rem rgba(25, 24, 23, .34);
}
.fd button { font: inherit; }
.fd [hidden] { display: none !important; }
.fd :focus-visible { outline: 2px solid var(--c-red-text); outline-offset: 2px; border-radius: .25rem; }
.fd-ic { flex: none; width: 1rem; height: 1rem; }
.fd code, .fd-ref { font-family: var(--f-mono); font-size: var(--fd-s); letter-spacing: 0; color: var(--fd-mut); white-space: nowrap; }

/* 标题栏：应用名、机构名在左；四种做法的切换居中；Illustrative 标记在右 */
.fd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: .875rem; padding: 0 .875rem 0 1rem; background: var(--fd-bg2); border-bottom: 1px solid var(--fd-line); }
.fd-bar__l { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.fd-bar__app { display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
/* 系统名 GROUNDWORK 的小字标：全大写、字距略宽、字重适中；WORK 里的 O 用品牌红。名字前原有的小圆标记已去掉（与红色 O 重复）。 */
.fd-wm { font-size: .9375rem; font-weight: 600; letter-spacing: .11em; color: var(--fd-ink); }
.fd-wm b { font-weight: inherit; color: var(--c-red); }
.fd-bar__ws { color: var(--fd-mut); padding-left: .75rem; border-left: 1px solid var(--fd-line2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fd-tag { justify-self: end; display: inline-flex; align-items: center; gap: .4375rem; height: 1.75rem; padding: 0 .75rem 0 .625rem; border-radius: 99rem; border: 1px dashed var(--fd-line2); color: var(--fd-mut); font-size: var(--fd-s); font-weight: 500; background: var(--fd-bg); white-space: nowrap; }
.fd-tag i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--c-red); }

/* 四种做法：一条分段切换，只写短名。选中的一段是白底的整圆胶囊，前面一枚红点。 */
.fd-modes { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99rem; background: #ECE8E0; }
.fd-mode { display: inline-flex; align-items: center; gap: .4375rem; height: 2rem; padding: 0 .875rem; border-radius: 99rem; font-size: .9375rem; font-weight: 500; letter-spacing: -0.008em; color: var(--fd-mut); white-space: nowrap; cursor: pointer; transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out); }
.fd-mode i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--c-red); transform: scale(0); margin-left: -.8125rem; transition: transform var(--d-3) var(--e-spring), margin var(--d-2) var(--e-out); }
.fd-mode:hover { color: var(--fd-ink); }
.fd-mode[aria-checked="true"] { background: var(--fd-bg); color: var(--fd-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(25, 24, 23, .14), 0 0 0 1px rgba(25, 24, 23, .06); }
.fd-mode[aria-checked="true"] i { transform: scale(1); margin-left: 0; }
.fd .fd-mode:focus-visible { border-radius: 99rem; }

/* 菜单、主体、协作 */
.fd-body { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 20rem; min-height: 0; }
.fd-nav { display: flex; flex-direction: column; gap: 2px; padding: .625rem .4375rem; background: var(--fd-bg2); border-right: 1px solid var(--fd-line); min-height: 0; }
.fd-nav__item { position: relative; display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .5rem; border-radius: .4375rem; font-weight: 500; color: var(--fd-ink2); text-align: left; white-space: nowrap; cursor: pointer; transition: background var(--d-1) var(--e-out); }
.fd-nav__item:hover { background: #F0EDE7; }
.fd-nav__item[aria-current="page"] { background: #EBE7E0; color: var(--fd-ink); }
.fd-count { margin-left: auto; font: 500 var(--fd-s)/1.25rem var(--f-mono); color: var(--fd-mut); min-width: 1.25rem; text-align: center; border-radius: 99rem; transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out); }
.fd-count.is-alert { background: var(--c-red-text); color: #fff; animation: fd-pop var(--d-3) var(--e-spring); }
.fd-count:empty { display: none; }
.fd-user { margin-top: auto; display: flex; align-items: center; gap: .5rem; padding: .625rem .25rem .125rem; border-top: 1px solid var(--fd-line); }
.fd-user b { display: block; font-weight: 600; font-size: var(--fd-s); white-space: nowrap; }
.fd-user span span { display: block; font-size: var(--fd-s); color: var(--fd-mut); }
.fd-av { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; font: 600 var(--fd-s)/1 var(--f-sans); flex: none; }
.fd-av--a { background: #F3E3D6; color: #6E370F; }
.fd-av--b { background: #DDE6F3; color: #24406F; }

.fd-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fd-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fd-view[hidden] { display: none; }
.fd-vh { display: flex; align-items: center; gap: .5rem; height: 3.25rem; padding: 0 .875rem; border-bottom: 1px solid var(--fd-line); flex: none; }
.fd-vh h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.fd-vh__meta { margin-left: auto; color: var(--fd-mut); font-size: var(--fd-s); white-space: nowrap; }
.fd-vh__st { margin-left: auto; }

/* 来料与记录两栏 */
.fd-work { flex-direction: row; }
.fd-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fd-src { flex: .92 1 0; background: var(--fd-bg2); border-right: 1px solid var(--fd-line); }
.fd-rec { flex: 1 1 0; }
.fd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: .625rem; scrollbar-width: thin; scrollbar-color: #D8D3CA transparent; }
.fd-from { padding: .625rem .875rem .125rem; font-size: var(--fd-s); line-height: 1.35; color: var(--fd-mut); }
/* 两栏合成一栏时的切换（只在窗口最窄一档出现） */
.fd-panes { display: none; align-items: center; gap: 2px; margin: .5rem .625rem 0; padding: 3px; border-radius: 99rem; background: #ECE8E0; flex: none; }
.fd-panes button { flex: 1; height: 1.875rem; border-radius: 99rem; font-weight: 500; color: var(--fd-mut); cursor: pointer; transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out); }
.fd-panes button[aria-pressed="true"] { background: var(--fd-bg); color: var(--fd-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(25, 24, 23, .14); }
.fd-item { margin: .5rem .625rem 0; padding: .5625rem .6875rem .625rem; background: var(--fd-bg); border: 1px solid var(--fd-line); border-radius: .5625rem; transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out); }
.fd-item__h { display: flex; align-items: center; gap: .4375rem; }
.fd-item__h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fd-item__s { margin-left: auto; display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--fd-s); color: var(--fd-mut); white-space: nowrap; }
.fd-item.is-reading { border-color: var(--c-red-text); box-shadow: 0 0 0 3px rgba(230, 0, 0, .09); }
.fd-item.is-reading .fd-item__s { color: var(--c-red-text); font-weight: 500; }
.fd-item.is-read .fd-item__s { color: var(--fd-green); }
.fd-item.is-left { border-style: dashed; }
.fd-item.is-left .fd-item__h { flex-wrap: wrap; row-gap: 0; }
.fd-item.is-left .fd-item__s { color: var(--fd-amber); width: 100%; margin-left: 1.4375rem; }
.fd-form { margin-top: .4375rem; }
.fd-form > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .1875rem 0; }
.fd-form dt { font-size: var(--fd-s); color: var(--fd-mut); white-space: nowrap; }
.fd-form dd { font-weight: 500; text-align: right; }
.fd-more { margin-top: .125rem; font-size: var(--fd-s); color: var(--fd-mut); }
.fd-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin-top: .5rem; }
.fd-th { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 0; border-radius: .375rem; overflow: hidden; color: rgba(255, 255, 255, .92); border: 2px solid transparent; cursor: pointer; transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out); }
.fd-th img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fd-th:hover { border-color: var(--fd-ink2); }
.fd-item.is-reading .fd-th:not(.is-scan):not(.is-seen) { opacity: .55; }
.fd-th.is-scan { border-color: var(--c-red-text); box-shadow: 0 0 0 3px rgba(230, 0, 0, .12); }
.fd-th--a { background: #7C8B74; } .fd-th--b { background: #9A8F7E; } .fd-th--c { background: #5E728A; } .fd-th--d { background: #8C7A72; }
.fd-wave { display: flex; align-items: center; gap: 2px; height: 1.5rem; margin-top: .4375rem; }
.fd-wave i { flex: 1; max-width: 3px; min-width: 2px; border-radius: 2px; background: var(--fd-line2); }
.fd-item.is-reading .fd-wave i, .fd-item.is-read .fd-wave i { background: var(--fd-ink2); }
.fd-wave code { margin-left: auto; padding-left: .5rem; }
.fd-ev { display: none; margin-top: .4375rem; font-size: var(--fd-s); line-height: 1.35; color: var(--fd-ink2); }
.fd-ev.is-on { display: block; animation: fd-in var(--d-3) var(--e-out) both; }
.fd-ev b { font-weight: 600; }
.fd-ev i { font-style: normal; color: var(--fd-mut); }
[data-ev].is-flag { background: var(--fd-amber-bg); color: var(--fd-amber); box-shadow: 0 0 0 3px var(--fd-amber-bg); border-radius: 2px; }
.fd-th[data-ev].is-flag { background: #5E728A; color: #fff; border-color: #C98A00; box-shadow: 0 0 0 2px var(--fd-amber-bg); border-radius: .375rem; }

/* 点开看中图：盖在主体一栏上 */
.fd-viewer { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--fd-bg); animation: fd-in var(--d-3) var(--e-out) both; }
.fd-viewer__x { margin-left: auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--fd-line2); color: var(--fd-ink2); cursor: pointer; transition: border-color var(--d-2) var(--e-out); }
.fd-viewer__x:hover { border-color: var(--fd-ink); }
.fd-viewer__img { position: relative; flex: 1; min-height: 0; margin: .875rem; border-radius: .5rem; overflow: hidden; display: grid; place-items: center; color: rgba(255, 255, 255, .92); }
.fd-viewer__img .fd-ic { width: 1.75rem; height: 1.75rem; }
.fd-viewer__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; background: var(--fd-bg2); }

.fd-writer { display: flex; align-items: center; gap: .4375rem; margin: .5rem .875rem 0; font-size: var(--fd-s); color: var(--fd-ink2); font-weight: 500; }
.fd-writer i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--c-red); animation: fd-blink 1.1s steps(2) infinite; }
.fd-fields { flex: 1; min-height: 0; overflow-y: auto; padding: .25rem .875rem 0; scrollbar-width: thin; }
.fd-f { padding: .4375rem 0 .5rem; border-bottom: 1px solid var(--fd-line); }
.fd-f:last-child { border-bottom: 0; }
.fd-f dt { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fd-s); color: var(--fd-mut); }
.fd-f__src { margin-left: auto; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--d-2) var(--e-out); }
.fd-f dd { display: flex; align-items: center; gap: .5rem; min-height: 1.5rem; margin-top: 1px; }
.fd-f__v { font-size: .9375rem; font-weight: 500; min-width: 0; }
.fd-f:not(.is-filled) .fd-f__v::before { content: ""; display: block; width: 4.5rem; height: .5rem; border-radius: .25rem; background: var(--fd-bg3); }
.fd-f.is-filled .fd-f__src { opacity: 1; }
.fd-f.is-flash dd { animation: fd-read 1.2s var(--e-out); border-radius: .25rem; }
.fd-f.is-typing .fd-f__v { background: var(--fd-read); box-shadow: 0 0 0 3px var(--fd-read); border-radius: 2px; }
.fd-f__tag { margin-left: auto; flex: none; font-size: var(--fd-s); font-weight: 600; line-height: 1.5rem; padding: 0 .5rem; border-radius: .375rem; white-space: nowrap; }
.fd-f__tag:empty { display: none; }
.fd-f.is-flag .fd-f__tag { background: var(--fd-amber-bg); color: var(--fd-amber); }
.fd-f.is-flag .fd-f__v { color: var(--fd-amber); }
.fd-f.is-checked .fd-f__tag { background: var(--fd-green-bg); color: var(--fd-green); }
.fd-f__tag.is-pop, .fd-st.is-pop, .fd-av.is-pop { animation: fd-pop var(--d-3) var(--e-spring); }

/* 状态标签 */
.fd-st { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: .375rem; font-size: var(--fd-s); font-weight: 600; white-space: nowrap; }
.fd-st--draft { background: var(--fd-amber-bg); color: var(--fd-amber); }
.fd-st--published { background: var(--fd-green-bg); color: var(--fd-green); }

/* 其余几个视图：简单的列表 */
.fd-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D8D3CA transparent; }
.fd-row { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; min-height: 3.25rem; padding: .5rem .875rem; border-bottom: 1px solid var(--fd-line); }
.fd-row--src { grid-template-columns: 1rem minmax(0, 1fr) auto; }
.fd-row--log { grid-template-columns: 8.75rem minmax(0, 1fr); align-items: baseline; }
.fd-row--log .fd-ref { white-space: normal; }
.fd-row__t b { display: block; font-weight: 600; }
.fd-row__t span { display: block; color: var(--fd-mut); font-size: var(--fd-s); }
.fd-row--log .fd-row__t b { display: inline; }
.fd-row__e { color: var(--fd-mut); font-size: var(--fd-s); white-space: nowrap; }
.fd-view.is-enter .fd-row { animation: fd-in var(--d-3) var(--e-out) both; }
.fd-row.is-fresh { background: #FFFBF0; }
.fd-row.is-written { animation: fd-in var(--d-4) var(--e-out) both; background: var(--fd-read); box-shadow: inset 3px 0 0 var(--c-red); }
.fd-lock { color: var(--fd-mut); }
.fd-note { padding: 1rem .875rem; color: var(--fd-mut); }
.fd-sub { padding: .875rem .875rem .375rem; font-size: var(--fd-s); font-weight: 600; color: var(--fd-mut); }
.fd-pend { margin: .875rem .875rem 0; padding: .75rem .875rem; border: 1px solid var(--fd-ink); border-radius: .625rem; animation: fd-in var(--d-3) var(--e-out) both; }
.fd-pend b { display: block; font-weight: 600; }
.fd-pend span { color: var(--fd-mut); font-size: var(--fd-s); }

/* 协作一栏 */
.fd-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--fd-line); background: var(--fd-bg); }
.fd-run { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .625rem 0 .5rem; border-radius: 99rem; background: var(--fd-bg3); color: var(--fd-ink2); font-size: var(--fd-s); font-weight: 500; white-space: nowrap; }
.fd-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: .875rem .75rem .25rem; padding: .875rem .75rem .875rem 1rem; border: 1px solid var(--fd-line2); border-radius: .875rem; background: var(--fd-bg2); flex: none; transition: border-color var(--d-2) var(--e-out); }
.fd-compose:hover { border-color: var(--fd-ink2); }
.fd-compose__txt { font-size: 1.0625rem; line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.fd-send { position: relative; display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--c-ink); color: #fff; cursor: pointer; transition: transform var(--d-1) var(--e-out), background var(--d-2) var(--e-out); }
.fd-send:hover { background: #000; transform: scale(1.06); }
.fd-send:active { transform: scale(.94); }
.fd-send::before, .fd-send::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--c-red); opacity: 0; pointer-events: none; animation: fd-invite 2.4s var(--e-out) infinite; }
.fd-send::after { animation-delay: 1.2s; }
.fd-compose.is-busy { display: none; }
.fd-again { display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; height: 2.625rem; border-radius: 99rem; border: 1px solid var(--fd-line2); background: var(--fd-bg); font-size: .9375rem; font-weight: 500; cursor: pointer; transition: border-color var(--d-2) var(--e-out); }
.fd-again:hover { border-color: var(--fd-ink); }

.fd-feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .625rem; padding: .625rem .875rem .875rem; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #D8D3CA transparent; }
.fd-msg { animation: fd-in var(--d-3) var(--e-out) both; flex: none; }
.fd-bubble { align-self: flex-end; max-width: 92%; padding: .5rem .75rem; border-radius: .8125rem .8125rem .1875rem .8125rem; background: var(--fd-bg3); font-weight: 500; }
.fd-cmd { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .625rem; border-radius: .5rem; background: var(--fd-bg3); font-weight: 500; }
.fd-cmd svg { margin-top: 2px; }
.fd-step { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; align-items: start; color: var(--fd-ink2); font-weight: 500; }
.fd-spin { width: .875rem; height: .875rem; margin-top: .1875rem; border-radius: 50%; border: 1.5px solid var(--fd-line2); border-top-color: var(--c-red); animation: fd-spin .8s linear infinite; }
.fd-ok { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-top: 2px; border-radius: 50%; background: var(--fd-green-bg); color: var(--fd-green); animation: fd-pop var(--d-3) var(--e-spring); flex: none; }
.fd-ok svg { width: .6875rem; height: .6875rem; stroke-width: 2; }
.fd-item__s .fd-ok { margin-top: 0; }
.fd-text { line-height: 1.5; }
.fd-caret > span:first-child::after { content: ""; display: inline-block; width: .375rem; height: .875rem; margin-left: 2px; vertical-align: -2px; background: var(--fd-ink); animation: fd-blink .9s steps(2) infinite; }
.fd-list { border: 1px solid var(--fd-line); border-radius: .5625rem; padding: 1px .625rem; }
.fd-list > div { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .5rem; padding: .375rem 0; border-bottom: 1px dashed var(--fd-line); animation: fd-in var(--d-2) var(--e-out) both; }
.fd-list > div:last-child { border-bottom: 0; }
.fd-list dt { font-family: var(--f-mono); font-size: var(--fd-s); color: var(--fd-amber); font-weight: 500; }
.fd-list dd { font-weight: 500; }
.fd-task { border: 1px solid var(--fd-line2); border-radius: .5625rem; padding: .625rem .75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px .625rem; align-items: center; }
.fd-task b { font-weight: 600; }
.fd-task > span:not(.fd-av) { color: var(--fd-mut); font-size: var(--fd-s); grid-column: 1; }
.fd-task .fd-av { grid-row: 1 / span 2; grid-column: 2; }

/* 批准卡：全页最重要的一刻 */
.fd-approve { position: relative; padding: .75rem; border: 1.5px solid var(--fd-ink); border-radius: .75rem; background: var(--fd-bg); box-shadow: 0 .875rem 2.125rem -1rem rgba(25, 24, 23, .45); }
.fd-approve__k { display: flex; align-items: center; gap: .5rem; font-size: var(--fd-s); font-weight: 600; color: var(--c-red-text); }
.fd-approve__k i { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-red); flex: none; }
.fd-approve__k i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c-red); animation: fd-invite-s 1.8s var(--e-out) infinite; }
.fd-approve__t { margin-top: .25rem; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.fd-approve__s { font-size: var(--fd-m); color: var(--fd-amber); font-weight: 500; }
.fd-approve__s.is-clear { color: var(--fd-green); }
.fd-approve__s.is-nudge { animation: fd-nudge .5s var(--e-out); }
.fd-pick { border: 0; margin: .5625rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; min-width: 0; }
.fd-pick legend { padding: 0; margin-bottom: .25rem; font-size: var(--fd-s); font-weight: 500; color: var(--fd-mut); }
.fd-pick label { position: relative; display: block; cursor: pointer; }
.fd-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd-pick label > span { display: block; padding: .375rem .625rem .4375rem; border: 1px solid var(--fd-line2); border-radius: .5rem; transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out); }
.fd-pick b { display: block; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.fd-pick small { display: block; font-size: var(--fd-s); color: var(--fd-mut); white-space: nowrap; }
.fd-pick label:hover > span { border-color: var(--fd-ink); }
.fd-pick input:checked + span { border-color: var(--fd-ink); background: var(--fd-bg2); box-shadow: inset 0 0 0 1px var(--fd-ink); }
.fd-pick input:focus-visible + span { outline: 2px solid var(--c-red-text); outline-offset: 2px; }
.fd-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; margin-top: .6875rem; padding: 0 .875rem; border-radius: 99rem; border: 1px solid var(--fd-line2); background: var(--fd-bg); font-size: .9375rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out), transform var(--d-1) var(--e-out); }
.fd-btn:active { transform: scale(.97); }
.fd-btn--go { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.fd-btn--go:hover { background: #000; }
.fd-btn--go[aria-disabled="true"] { background: #55524D; border-color: #55524D; cursor: default; }
.fd-btn--go i { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-red); }
.fd-btn--go[aria-disabled="true"] i { background: #A19D96; }
.fd-btn--go[aria-disabled="false"] i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #FF5640; animation: fd-invite-s 1.8s var(--e-out) infinite; }
.fd-approve.is-done { border-color: var(--fd-line2); border-width: 1px; box-shadow: none; }
.fd-approved { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.fd-approved + p { color: var(--fd-mut); font-size: var(--fd-s); margin-top: .25rem; padding-left: 1.5rem; }

/* 关键帧 */
@keyframes fd-invite { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes fd-invite-s { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@keyframes fd-blink { 50% { opacity: 0; } }
@keyframes fd-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@keyframes fd-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes fd-read { 0% { background: #FFD9BF; box-shadow: 0 0 0 4px #FFD9BF; } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }
@keyframes fd-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* 减少动态效果：邀请环改为一圈静止的红环；逐字光标不闪 */
html.rm .fd-send::before { animation: none; opacity: .55; transform: scale(1.32); }
html.rm .fd-send::after, html.rm .fd-approve__k i::after, html.rm .fd-btn--go i::after { animation: none; opacity: 0; }
html.rm .fd-spin { animation: none; border-top-color: var(--c-red); }
html.rm .fd-feed { scroll-behavior: auto; }

/* ---------- 窗口变窄：收起栏目，不缩字 ----------
   第一档（窗口不足 66rem，约视口 1150 以下）：左侧菜单收成一列图标，三栏仍在。 */
@container win (max-width: 66rem) {
  .fd-body { grid-template-columns: 3.5rem minmax(0, 1fr) 19rem; }
  .fd-nav { padding: .625rem .5rem; align-items: center; }
  .fd-nav__item { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; }
  .fd-nav__item > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fd-nav__item .fd-ic { width: 1.125rem; height: 1.125rem; }
  .fd-count { position: absolute; top: 1px; right: 1px; margin: 0; min-width: 1.125rem; line-height: 1.125rem; background: var(--fd-bg3); }
  .fd-user { padding: .625rem 0 .125rem; justify-content: center; }
  .fd-user > span:not(.fd-av) { display: none; }
  .fd-bar__ws { display: none; }
}
/* 第二档（窗口不足 54rem，约视口 950 以下）：「来料」与「记录」合成一栏，顶上一条切换；
   演出进行时由 demo.js 自动切到正在动的那一栏。协作一栏不动：发送与批准都在那里。 */
@container win (max-width: 54rem) {
  .fd-body { grid-template-columns: 3.5rem minmax(0, 1fr) 18rem; }
  .fd-work { flex-direction: column; }
  .fd-panes { display: flex; }
  .fd-work[data-pane="rec"] .fd-src, .fd-work[data-pane="src"] .fd-rec { display: none; }
  .fd-work .fd-col { flex: 1 1 0; border-right: 0; }
  .fd-work .fd-col > .fd-vh h3 { display: none; }
  .fd-work .fd-col > .fd-vh { height: 2.5rem; border-bottom: 0; }
  .fd-mode { padding: 0 .6875rem; }
  .fd-tag { padding: 0 .625rem 0 .5rem; }
}