/* UIOPT-R5 · 介质卡三态重设计（占位头，ck-canvas 按 TASK-R5-MEDIUM.md 填充；设计源 tmp/uiopt-tasks/DESIGN-R5-MEDIUM.md v1.1）
   挂载：入口 index.html 静态 link（仲裁方 09-20 加，序在 uiopt-r4 后）——禁运行时注入、禁改 index.html。
   变量全复用 uiopt-r1.css :root，禁新增灰/禁新增 token。

   蒋哥裁定（09-20 原话「下拉+勾选可能最直接,其他先按照你推荐的来,出来了我再看是否修改」）：
   三态圆角：pill=--r-pill(999) / card=--r-card(8) / expanded 行块=8 灰底(--chip-bg)。
   Q1 进度时间轴：排队段=--ink-3 灰，生图段=--accent-marker 黄（marker 黄第三用途），完成后黄段沉 --ink-2；
   暗岛不变式：介质卡非暗岛，禁暗底。分界靠色阶+阴影，不靠描边。
   动效：展开 320ms cubic-bezier(.2,.8,.2,1)=唯一高度动画豁免；收合 pill 240ms 同曲线反放；
   Corner Radius Morph=999↔8 连续插值不跳变；跟手段（Pull Summary/Card Tray 拖拽）=pointer 驱动非计时。
   弹层（勾选下拉/模板对话框/收纳盒 popover）=--r-pop(10) 白窗 --surface + --sh-lift。 */

/* ==== 实现体（ck-canvas R5-MEDIUM 09-20）：三态皮肤+Q1 时间轴+MOTION 01/02/04/06+morph 支撑+弹层 ==== */
/* G5-PILL-1-E（主审 09-21 工单为准，覆头注释「禁新增 token」——E 明示「或新 --sh-pill 入 token 族」，定义落本文件唯一写面） */
:root { --sh-pill: 0 2px 8px rgba(16, 18, 20, 0.10); }
/* R8-W1（主审 09-21 工单 bot CSS 腿）：ink-3 指定小字深化位=mix(ink-2 75%, ink-1)，两主题 AA≥4.5（手算 hermes≈6.3/std≈7.0，终值以探针 computed 为准）；仅 <13px 文本 color 引用，边框/描边零触 */
:root { --ink-3-hi: color-mix(in srgb, var(--ink-2) 75%, var(--ink-1)); }
/* 三态根：pill=999 胶囊 / card=8 白窗(--surface) / expanded=行块 8 灰底(--chip-bg)+主体白窗 */
.canvas-card.g5-pill { border: 0; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent-ui) 12%, var(--card-bg)); box-shadow: var(--sh-pill); } /* G5-PILL-1-C（主审 09-21 裁定，翻 R7-04 的 20% ink 灰底判据）：暖金染纸底=accent-ui 12%×card-bg；阴影 token 化（E），值不变。无描边、分界靠色阶+阴影合同保持（蒋哥 09-20 裁定不变） */
.canvas-card.g5-pill .card-head, .canvas-card.g5-pill .card-meta, .canvas-card.g5-pill .conn-handle, .canvas-card.g5-pill .cover-flag, .canvas-card.g5-pill .card-ref-chip { display: none; }
.canvas-card.g5-card { border: 0; border-radius: var(--r-card, 8px); overflow: hidden; background: var(--card-bg); box-shadow: var(--sh-rest); } /* R8-W4：card 态分层归位 --surface→--card-bg（画布<卡<面板三级，头注释 :16 合同本意=白窗；pill 底 mix 基准 :17 零触） */
.canvas-card.g5-expanded { border: 0; border-radius: var(--r-card, 8px); overflow: visible; background: var(--chip-bg); box-shadow: var(--sh-rest); }
.canvas-card.generator-card:hover { box-shadow: var(--sh-lift); }
.generator-body.gen-compact { border-radius: var(--r-card, 8px); overflow: hidden; } /* R4GAPS 补单3 黑角合同=hidden（pill/card 态裁切圆角内） */
.g5-expanded .generator-body.gen-compact { overflow: visible; } /* expanded 工作台唯一豁免：托盘/散开参考带/增强面板超出 body 盒=设计语义（黑角反模式只属紧凑皮肤态） */
.g5-expanded .gen-compact-content { background: var(--surface); border-radius: var(--r-card, 8px); height: auto; flex: 0 0 auto; } /* G5-ROWS-1-C：撤 refinement:5304 flex:1 贪婪拉伸（94px 空带根因=status 后 content 被拉到底）→ 子元素自然底即 content 底，status→tray 贴齐；expanded 工作台：opt-row/七控件/status 全显。UIR-1④：basis:auto 下 shrink 默认 1，壳不足时 content 被压（min-height:0）子元素溢出与托盘重叠→shrink 归零 */
.g5-expanded .gen-prompt-box { flex: 0 0 auto; } /* R398：由 textarea 的 82..240px 实测高度撑开，参数区顺流，避免固定 82px 遮挡。 */
/* card 态=设计紧凑窗：仅 refs+prompt+执行浮钮；设置体全入 expanded（base overflow 语义显式化，防裁半行） */
.g5-card .gen-status, .g5-card .g5-progress { display: none; } /* G5-ROWS-1-A（蒋哥 09-21 裁，覆写 R7-09 通道行条款）：card 态必带两行具体设置（.gen-controls 归位，六控件两行可操作）；status/progress 仍仅 expanded；enh-seg 合一控件原样 */

/* pill 布局 + Q1 时间轴（02 Progress Fill：底色即进度；排队灰=--ink-3 / 生图黄=--accent-marker / 完成沉 --ink-2） */
.gen-pill { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px; box-sizing: border-box; }
.g5-pill-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--ink-1); }
.g5-pill-phase { flex: 0 0 auto; font-size: 10px; color: var(--u6-pick-deep, var(--accent-ui)); white-space: nowrap; } /* G5-PILL-1-C：phase 字归金族；deep=染纸底上对比 ≥4.5（暖金主题命中 #6E5007；标准主题无此 token→回退 accent-ui，交叉值报告披露） */
.g5-progress { flex: 0 0 auto; width: 96px; height: 6px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; display: flex; }
.g5-expanded .g5-progress { margin: 4px 10px 6px; width: auto; }
.g5-progress .seg-queue { background: var(--accent-ui); transition: width .35s cubic-bezier(.2,.8,.2,1); } /* G5-PILL-1-C：排队段（点）归金族，翻 R5 头注释 ink-3 灰条款——完成段沉 ink-2 不变 */
.g5-progress .seg-gen { background: var(--accent-marker); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.g5-progress.done .seg-gen { background: var(--ink-2); }
/* FB1020-26：删除「.canvas-card.g5-done { filter: brightness(1.06) }」完成整卡提亮（02）——与「完成/空闲恢复原主题」冲突；g5-done 保留仅作相位标记类，零视觉新增、零设计替换 */
/* FB1020-26：done 相隐藏 pill 本体填充染色——genpill-r2 .g5-pill-fill 永久渐变在 done=100% 宽时整幅染色（实测 computed 渐变满幅），与完成恢复原主题冲突；仅隐染色不改真实进度数值（width 不动），下轮 gen 移除 g5-done 后恢复可见 */
.canvas-card.g5-done .gen-pill > .g5-pill-fill { opacity: 0; }

/* 04 Card Tray：expanded 托盘（card 主体锚定不动，托盘自下缘出） */
.g5-tray { padding: 8px 12px 10px; display: grid; gap: 4px; }
.g5-tray-h { font-size: 10px; color: var(--ink-3-hi); letter-spacing: .04em; padding: 2px 0 4px; } /* R8-W1：ink-3→深化位（10px 小字 AA） */
.g5-slot-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 12px; color: var(--ink-1); }
.g5-slot-label { width: 96px; flex: 0 0 auto; display: flex; gap: 6px; align-items: center; color: var(--ink-2); }
.g5-slot-kind { font-style: normal; font-size: 9px; color: var(--ink-3-hi); border: 1px solid var(--ink-3); border-radius: 4px; padding: 0 3px; } /* R8-W1：文本色深化，描边非文本判据零触 */
.g5-slot-chips { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.g5-slot-empty { color: var(--ink-3-hi); font-style: normal; font-size: 11px; } /* R8-W1 */
.g5-chip { background: var(--surface); color: var(--ink-1); border-radius: 999px; padding: 1px 8px; font-size: 11px; box-shadow: var(--sh-rest); }
.g5-more { color: var(--ink-2); font-size: 11px; padding: 0 4px; cursor: pointer; border: 0; background: transparent; }
.g5-slot-open { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.g5-slot-open:hover { background: var(--chip-bg); }
.g5-tmpl-row { display: flex; gap: 8px; padding-top: 6px; }
.g5-chip-btn { border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink-1); border-radius: 999px; padding: 3px 12px; font-size: 11px; cursor: pointer; }

/* 06 Pull Summary：其下画布下推+局部变暗（scrim 自卡片下缘；pushed=位移态弱化） */
.g5-scrim { display: none; } /* G5-ROWS-1-B（仲裁裁=撤板，蒋哥「一拉伸就一块灰」）：硬编码 300%x560 灰板整块撤除，任意拉伸后卡外零 scrim 像素；W4 审美（限卡宽+渐隐）候蒋哥另裁再加。原规则：position:absolute; left:0; top:100%; width:300%; height:560px; background:color-mix(ink-1 14%) */
.g5-pushed { transition: filter .24s ease; filter: brightness(.93) saturate(.92); }
/* G5-ROWS-1-C 硬闸细则（工单 L3：status 底→tray-h 顶 ≤8px）：Q1 时间轴条为 expanded 合法行不可排除 →
   flex order 把 progress 前置于 status（status 底=content 底），并收紧卡间空隙（scoped expanded，勿动 card/pill）。 */
.g5-expanded .gen-status { order: 1; }
.g5-expanded .generator-body { row-gap: 2px; }
.g5-expanded .g5-tray { padding-top: 2px; }


/* 01 Overlap Row（R7-06/10 改版：负叠压致位置错+遮挡，改流式正间隙；散开动画保留） */
.g5-overlap .gen-ref-item { transition: margin-left .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.g5-overlap .gen-ref-item + .gen-ref-item { margin-left: 6px; }
.g5-ref-folded { display: none; }
.gen-ref-strip .g5-more[data-g5="ref-more"] { position: relative; z-index: 2; } /* 互压拇指堆叠会压住尾部 +N：提升其 z 层保持可点 */
.gen-compact .gen-ref-strip { overflow: visible; } /* +N 尾钮不再被滚动裁切；折叠后 ≤3 拇指必可容纳（z 提升另见下条） */
.gen-ref-strip.g5-spread .g5-ref-folded { display: inline-flex; }
.gen-ref-strip.g5-spread .gen-ref-item { margin-left: 0; }
.gen-ref-strip.g5-spread .gen-ref-item:nth-child(4) { transition-delay: 60ms; }
.gen-ref-strip.g5-spread .gen-ref-item:nth-child(5) { transition-delay: 120ms; }
.gen-ref-strip.g5-spread .gen-ref-item:nth-child(6) { transition-delay: 180ms; }

/* body 级弹层家族（--r-pop 白窗）：勾选下拉/模板对话框/收纳盒/pill hover */
.g5-pop { position: fixed; z-index: 9500; background: var(--surface); border-radius: var(--r-pop, 10px); box-shadow: var(--sh-lift); padding: 10px 12px; min-width: 210px; max-width: 300px; font-size: 12px; color: var(--ink-1); }
.g5-dd-head { font-size: 11px; color: var(--ink-3-hi); padding-bottom: 6px; } /* R8-W1 */
.g5-dd-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px 6px; background: transparent; border: 0; text-align: left; color: var(--ink-1); cursor: pointer; border-radius: 6px; }
.g5-dd-row:hover { background: var(--chip-bg); }
.g5-dd-check { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid var(--ink-3); border-radius: 4px; display: inline-block; }
.g5-dd-row[aria-checked="true"] .g5-dd-check { background: var(--accent-ui); border-color: var(--accent-ui); box-shadow: inset 0 0 0 2.5px var(--surface); }
.g5-dd-foot { margin-top: 8px; display: flex; gap: 6px; }
.g5-dd-custom { width: 100%; padding: 5px 8px; border: 1px solid var(--ink-3); border-radius: var(--r-card, 8px); background: var(--surface); color: var(--ink-1); font-size: 11px; box-sizing: border-box; }
#g5-tmpl-dialog textarea, .g5-tmpl-name { width: 100%; padding: 6px; margin: 6px 0 0; border: 1px solid var(--ink-3); border-radius: var(--r-card, 8px); background: var(--surface); color: var(--ink-1); font-size: 11px; box-sizing: border-box; }
#g5-tmpl-dialog textarea { min-height: 72px; }
.g5-box-item { display: flex; gap: 5px; align-items: center; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-3) 30%, transparent); }
.g5-box-item strong { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g5-box-sum { flex: 1; color: var(--ink-3-hi); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* R8-W1 */
.g5-box-item button, .g5-dd-foot button { border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink-1); border-radius: 6px; padding: 2px 8px; font-size: 10px; cursor: pointer; }
.g5-box-empty, .g5-box-note { color: var(--ink-3-hi); font-size: 10px; margin: 6px 0 0; } /* R8-W1（同规则 empty 随族） */
.g5-pop-prog { color: var(--ink-2); margin-top: 2px; }
.g5-pop-prompt { color: var(--ink-1); margin-top: 4px; max-height: 88px; overflow: auto; }
.g5-pop-tags { color: var(--ink-2); margin-top: 4px; }

/* 补单6 双档：一档勾选行 + 二档面板（诚实失败态文案在 JS 侧） */
/* R7-07 合一控件：三选项 segmented（形制同 R7-13：胶囊轨+选中白底凸起） */
.g5-enh-seg { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-2); padding: 2px 10px; }
.g5-enh-seg [data-enh] { border: 0; background: transparent; color: var(--ink-2); border-radius: 999px; padding: 2px 10px; font-size: 10px; cursor: pointer; }
.g5-enh-seg [data-enh].on { background: var(--surface); color: var(--u6-pick-deep, var(--accent-ui)); font-weight: 600; box-shadow: var(--sh-rest); } /* G5-PILL-1-E：字面阴影→token（凸起滑块语义保持，值就近归族）；R8-W1：选中态字色归金族=accent/pick-deep 配对（hermes #6E5007≈7.0 / 标准回退 accent-ui #6E56CF≈5.4，均 AA≥4.5，同 g5-pill-phase :32 先例链） */
.g5-opt-panel { margin: 2px 10px 4px; padding: 8px 10px; border-radius: var(--r-card, 8px); background: color-mix(in srgb, var(--accent-ui) 7%, var(--surface)); font-size: 11px; }
.g5-opt-loading { color: var(--ink-2); }
.g5-opt-ok { color: var(--ink-1); }
.g5-opt-fail { color: var(--ink-1); border-left: 3px solid var(--ink-1); padding-left: 8px; border-radius: 0 var(--r-card, 8px) var(--r-card, 8px) 0; } /* R8-W4：失败带 3px 墨左锚与警示态，形制≠.g5-opt-ok（诚实文案在 JS 侧零触） */
.g5-opt-acts { display: flex; gap: 6px; margin-top: 6px; }
.g5-opt-acts button { border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink-1); border-radius: 6px; padding: 2px 10px; font-size: 10px; cursor: pointer; }
.g5-opt-edit-area { width: 100%; min-height: 60px; border: 1px solid var(--ink-3); border-radius: var(--r-card, 8px); background: var(--surface); color: var(--ink-1); font-size: 11px; box-sizing: border-box; }

/* R7-13/11（蒋哥图3 参考形）：API生成|ComfyUI 与模式页签外框→segmented control：胶囊容器+选中白底凸起滑块+未选纯文字 */
.canvas-card .gen-source-toggle { border-radius: 999px; padding: 3px; border: 0; background: color-mix(in srgb, var(--ink-1) 12%, var(--surface)); }
.canvas-card .gen-source-toggle span { border-radius: 999px; padding: 3px 12px; background: transparent; color: var(--ink-2); box-shadow: none; transition: background .18s ease, color .18s ease; }
.canvas-card .gen-source-toggle span.active { background: var(--surface); color: var(--ink-1); font-weight: 600; box-shadow: var(--sh-rest); } /* G5-PILL-1-E：同上 */

/* G5-PILL-1-B：两区版式（DOM=main.js g5ShowPillPop；R7-05 旧 .g5-pop-refs 规则随旧 DOM 一并迁移——本单改动造成的孤儿清理） */
.g5-pop.g5-pop-2z { background: transparent; box-shadow: none; padding: 0; min-width: 0; max-width: none; pointer-events: none; } /* 容器=定位骨架：pill 夹显带穿透，两子区各自白窗+lift 影 */
.g5-pop-2z .g5-pop-up { display: flex; gap: 4px; background: var(--surface); border-radius: var(--r-pop, 10px); box-shadow: var(--sh-lift); padding: 6px; pointer-events: auto; }
.g5-pop-2z .g5-pop-up img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.g5-pop-2z .g5-pop-noref { font-size: 11px; color: var(--ink-2); background: var(--surface); border-radius: var(--r-pop, 10px); box-shadow: var(--sh-lift); padding: 6px 10px; pointer-events: auto; }
.g5-pop-2z .g5-pop-spacer { pointer-events: none; } /* 高=pill 高+8（JS 置），pill 本体不被遮 */
.g5-pop-2z .g5-pop-down { background: var(--surface); border-radius: var(--r-pop, 10px); box-shadow: var(--sh-lift); padding: 10px 12px; min-width: 210px; max-width: 300px; font-size: 12px; color: var(--ink-1); pointer-events: auto; }

/* R7-12（「聚焦态长度颜色都不对」）：refinement.css 系为 bot 面（94 处 :focus 禁写），scoped 覆写走卡容器 */
.canvas-card button:focus, .canvas-card select:focus, .canvas-card textarea:focus, .canvas-card input:focus { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
/* R8-W1：body 级弹层家族补 :focus-visible 金环——:124 scoped .canvas-card 不覆挂 body 的 #g5-dd/#g5-box-pop/#g5-pop（FOCUS-POP RED 实证 outline=auto 1px），键盘落点同族同强 */
#g5-dd :focus-visible, #g5-box-pop :focus-visible, #g5-pop :focus-visible, #g5-tmpl-dialog :focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }

/* ═══ UIR-1（2026-09-23 续单 · Claude Code）生成器三态视觉合同 ═══
   ① 媒体页签下划线=SVG+文字实际宽（点击面积靠内衬保持大）；强调色=--accent-ui 族 token
   ② 参数两行×三列同列对齐（图标/文字/下拉同轨），底部一致内边距
   ③ expanded=参数下分割线→入口网格（内容驱动高，见 g5SyncTrayH）；未接项降透明可辨不假运行
   ④ pill 真实通道不定进度=扫带（34% 带往复位移，非完成百分比；reduce-motion 下退静态透明度脉动） */
.gen-compact .gen-mode-tabs button { flex: 0 1 auto; padding: 4px 8px; }
.gen-compact .gen-mode-tabs button.on { border-bottom-color: transparent; position: relative; }
.gen-compact .gen-mode-tabs button.on::after { content: ""; position: absolute; left: 8px; bottom: 0; width: calc(100% - 16px); height: 2px; border-radius: 2px 2px 0 0; background: var(--accent-ui, #6E56CF); } /* UIR-1：显式宽（去 right 依赖=over-constrained 通道 Chrome 计算宽反常实证）；下划线=文字+图标实宽内缩 */
.gen-compact .gen-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 23px 23px; gap: 4px 8px; padding-bottom: 5px; }
.gen-compact .gen-controls .gen-ctl { grid-column: auto; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; }
.gen-compact .gen-controls .gen-ctl:nth-child(n+4) { grid-column: auto; }
.gen-compact .gen-controls .gen-ctl select { width: 100%; min-width: 0; }
.g5-tray { border-top: 1px solid var(--u6-line, #e6e8e4); margin-top: 2px; }
.g5-tray-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.g5-wf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 2px 0 4px; }
.g5-tile { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 7px 3px 6px; border: 1px solid transparent; border-radius: var(--r-card, 8px); background: transparent; color: var(--ink-1); font-size: 10px; line-height: 1.2; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.g5-tile span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g5-tile-ic { display: grid; place-items: center; color: var(--accent-ui, #6E56CF); }
.g5-tile-ic svg { width: 18px; height: 18px; }
.g5-tile:hover { background: color-mix(in srgb, var(--accent-ui, #6E56CF) 8%, var(--surface)); transform: translateY(-1px); box-shadow: var(--sh-rest); }
.g5-tile:focus-visible { outline: 2px solid var(--accent-ui, #6E56CF); outline-offset: 2px; }
.g5-tile.on { border-color: var(--accent-ui, #6E56CF); background: color-mix(in srgb, var(--accent-ui, #6E56CF) 12%, var(--surface)); color: var(--u6-pick-deep, var(--accent-ui, #6E56CF)); font-weight: 650; }
.g5-tile.g5-pending { opacity: .5; }
.g5-tile.g5-maybe { opacity: .72; }
.g5-wf-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.g5-wf-cat { border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink-1); border-radius: 999px; padding: 2px 9px; font-size: 10px; cursor: pointer; }
.g5-wf-cat i { font-style: normal; margin-left: 3px; color: var(--ink-2); }
.g5-wf-cat.on { border-color: var(--accent-ui, #6E56CF); background: color-mix(in srgb, var(--accent-ui, #6E56CF) 12%, var(--surface)); color: var(--u6-pick-deep, var(--accent-ui, #6E56CF)); font-weight: 650; }
.g5-wf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 6px; max-height: 210px; overflow: auto; padding: 1px 2px 4px; }
.g5-wf-item { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 4px 2px; border: 1px solid transparent; border-radius: var(--r-card, 8px); background: transparent; cursor: pointer; color: var(--ink-1); font-size: 9.5px; transition: background .16s ease, border-color .16s ease; }
.g5-wf-item img { width: 100%; height: 40px; object-fit: contain; background: color-mix(in srgb, var(--ink-1) 4%, var(--surface)); border-radius: 4px; }
.g5-wf-item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g5-wf-item:hover, .g5-wf-item.on { border-color: var(--accent-ui, #6E56CF); background: color-mix(in srgb, var(--accent-ui, #6E56CF) 8%, var(--surface)); }
.g5-wf-detail { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; align-items: start; border: 1px solid var(--accent-ui, #6E56CF); border-radius: var(--r-card, 8px); background: color-mix(in srgb, var(--accent-ui, #6E56CF) 5%, var(--surface)); padding: 8px; }
.g5-wf-dv { width: 92px; height: 69px; object-fit: contain; background: color-mix(in srgb, var(--ink-1) 4%, var(--surface)); border-radius: 4px; grid-row: span 2; }
.g5-wf-dmeta strong { font-size: 11px; } .g5-wf-dmeta strong i { font-style: normal; margin-left: 6px; font-weight: 400; font-size: 9.5px; color: var(--ink-2); }
.g5-wf-dmeta p { margin: 2px 0 0; font-size: 10px; line-height: 1.5; color: var(--ink-2); max-height: 96px; overflow: auto; }
.g5-wf-dacts { grid-column: 2; display: flex; gap: 8px; padding-top: 4px; }
.gen-pill.g5-pill-r2.g5-real-run > .g5-pill-fill { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .g5-tile, .g5-wf-item { transition: none; }
  .g5-tile:hover { transform: none; }
  .gen-pill.g5-pill-r2.g5-real-run > .g5-pill-fill { animation: none; transform: none; }

}

/* Screenshot fixes: expose the connection handle outside the rounded content shell. */
.canvas-card.g5-card { overflow: visible; }
.g5-tray { position: relative; min-width: 0; }
.g5-expanded .gen-status { min-height: 22px; line-height: 22px; padding-right: 90px; }
.g5-tray > .g5-tray-back { position: absolute; top: -25px; right: 0; margin: 0; padding: 2px 7px; font-size: 10px; }
.g5-wf-cats { flex-wrap: nowrap; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: thin; gap: 4px; }
.g5-wf-cat { flex: 0 0 auto; white-space: nowrap; padding: 2px 6px; }
.g5-wf-list, .g5-wf-dmeta p, .g5-tray { overscroll-behavior: contain; }
/* ── U16/U17（B-U16-U17-PROMPT-REF-LAYOUT-R1）── 参考状态条回归常流：覆盖 refinement.css:407 的绝对定位（bottom 左下遮参数/提交钮/端口的根因）。
   带 chip 的卡=纵向 flex 页脚：head/meta 定高、body 收留剩余（图随壳收缩=诚实布局非覆盖）、chip 自占一行；
   状态点三色 reading橙/ready绿/failed红/legacy灰=纯呈现真实读取事实；长名省略号（完整名在 title）。 */
.card-ref-chip{position:static;left:auto;bottom:auto;flex:0 0 auto;margin:12px 8px 8px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.card-ref-chip .ref-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.card-ref-chip .ref-st{flex:0 0 auto;opacity:.85}
.card-ref-chip .ref-dot{width:6px;height:6px;border-radius:50%;background:#b9b6ac;flex:0 0 auto}
.card-ref-chip.ref-reading .ref-dot{background:#d9953b}
.card-ref-chip.ref-ready .ref-dot{background:#57a879}
.card-ref-chip.ref-failed .ref-dot{background:#c0574f}
.card-ref-chip .ref-clear{border:0;background:transparent;color:inherit;font-size:11px;line-height:1;padding:0 2px;cursor:pointer;opacity:.7;flex:0 0 auto}
.card-ref-chip .ref-clear:hover{opacity:1}
.canvas-card:has(> .card-ref-chip){display:flex;flex-direction:column;overflow:hidden}
.canvas-card:has(> .card-ref-chip)>.card-head,.canvas-card:has(> .card-ref-chip)>.card-meta{flex:0 0 auto}
.canvas-card:has(> .card-ref-chip) :is(img.canvas-real-image,.imported-single-image,.generator-body,.note-content,.text-content,.motif-content,.link-body,.group-body){flex:1 1 auto;min-height:0}
/* U16 配套（零新规则依赖）：prompt 行高由 JS 内联驱动（g5GrowPrompt 82..240），此处仅保证卡态不被 100% 拉伸回死高 */
.canvas-card.g5-card .gen-prompt-box{flex:0 1 auto}